feat: show agent watcher status in canvas UI

Add real-time indication of whether the CLI agent is actively listening
for feedback on a session. The daemon broadcasts watcher-status messages
to browser clients when CLI waiters connect/disconnect, with ping/pong
heartbeat to detect dead connections within ~10s.

Three feedback states after submit:
- Blue: agent connected, waiting to pick up feedback
- Green: feedback received, waiting for next revision
- Amber: agent disconnected, tell Claude to check feedback

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: matej21

daemon/client/AnnotationSidebar.tsx

@@ -17,20 +17,21 @@ interface AnnotationSidebarProps {
 }
 
 export function AnnotationSidebar({ onPreview, onSubmit, collapseButton }: AnnotationSidebarProps) {
-  const { isReadOnly, selectedRevision, currentRevision, revisions } = useContext(RevisionContext);
+  const { isReadOnly, selectedRevision, currentRevision, revisions, agentWatching } = useContext(RevisionContext);
   const sessionId = useContext(SessionContext);
-  const isCurrentButSubmitted = isReadOnly && selectedRevision === currentRevision;
   const selectedRevInfo = revisions.find((r) => r.revision === selectedRevision);
+  const isCurrentButSubmitted = isReadOnly && selectedRevision === currentRevision;
+  const feedbackConsumed = !!selectedRevInfo?.feedbackConsumed;
   const roundLabel = selectedRevInfo?.label || `Round ${selectedRevision}`;
 
   if (isReadOnly) {
-    return <ReadOnlyAnnotationSidebar sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} collapseButton={collapseButton} />;
+    return <ReadOnlyAnnotationSidebar sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} collapseButton={collapseButton} />;
   }
 
-  return <AnnotationSidebarInner onPreview={onPreview} onSubmit={onSubmit} collapseButton={collapseButton} />;
+  return <AnnotationSidebarInner onPreview={onPreview} onSubmit={onSubmit} agentWatching={agentWatching} collapseButton={collapseButton} />;
 }
 
-function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; collapseButton?: React.ReactNode }) {
+function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, feedbackConsumed, agentWatching, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; feedbackConsumed?: boolean; agentWatching?: boolean; collapseButton?: React.ReactNode }) {
   const [feedback, setFeedback] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -51,12 +52,7 @@ function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, collaps
         {collapseButton}
       </div>
 
-      {waitingForUpdate && (
-        <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-green-muted flex items-center gap-2 flex-shrink-0">
-          <span className="w-2 h-2 rounded-full bg-accent-green animate-pulse" />
-          <span className="text-[12px] font-body text-accent-green">Waiting for next revision...</span>
-        </div>
-      )}
+      {waitingForUpdate && <WaitingBanner feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} />}
 
       <div className="flex-1 overflow-y-auto px-4">
         {loading ? (
@@ -71,17 +67,42 @@ function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, collaps
   );
 }
 
+function WaitingBanner({ feedbackConsumed, agentWatching }: { feedbackConsumed?: boolean; agentWatching?: boolean }) {
+  if (feedbackConsumed) {
+    return (
+      <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-green-muted flex items-center gap-2 flex-shrink-0">
+        <span className="w-2 h-2 rounded-full bg-accent-green animate-pulse" />
+        <span className="text-[12px] font-body text-accent-green">Feedback received — waiting for next revision...</span>
+      </div>
+    );
+  }
+  if (agentWatching) {
+    return (
+      <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-blue-muted flex items-center gap-2 flex-shrink-0">
+        <span className="w-2 h-2 rounded-full bg-accent-blue animate-pulse" />
+        <span className="text-[12px] font-body text-accent-blue">Waiting for agent to pick up feedback...</span>
+      </div>
+    );
+  }
+  return (
+    <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-amber-muted flex items-center gap-2 flex-shrink-0">
+      <span className="w-2 h-2 rounded-full bg-accent-amber" />
+      <span className="text-[12px] font-body text-accent-amber">Agent disconnected — tell Claude to check feedback</span>
+    </div>
+  );
+}
+
 type ReadOnlyTab = "feedback" | "annotations";
 
-function ReadOnlyAnnotationSidebar({ sessionId, revision, label, waitingForUpdate, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; collapseButton?: React.ReactNode }) {
+function ReadOnlyAnnotationSidebar({ sessionId, revision, label, waitingForUpdate, feedbackConsumed, agentWatching, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; feedbackConsumed?: boolean; agentWatching?: boolean; collapseButton?: React.ReactNode }) {
   const { annotations, generalNote, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
   const { setActiveView } = useContext(ActiveViewContext);
   const hasAnnotations = annotations.length > 0 || generalNote.trim().length > 0;
   const [activeTab, setActiveTab] = useState<ReadOnlyTab>("feedback");
 
   // If no annotations in localStorage, just show feedback
   if (!hasAnnotations) {
-    return <FeedbackDisplay sessionId={sessionId} revision={revision} label={label} waitingForUpdate={waitingForUpdate} collapseButton={collapseButton} />;
+    return <FeedbackDisplay sessionId={sessionId} revision={revision} label={label} waitingForUpdate={waitingForUpdate} feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} collapseButton={collapseButton} />;
   }
 
   return (
@@ -114,12 +135,7 @@ function ReadOnlyAnnotationSidebar({ sessionId, revision, label, waitingForUpdat
         {collapseButton}
       </div>
 
-      {waitingForUpdate && (
-        <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-green-muted flex items-center gap-2 flex-shrink-0">
-          <span className="w-2 h-2 rounded-full bg-accent-green animate-pulse" />
-          <span className="text-[12px] font-body text-accent-green">Waiting for next revision...</span>
-        </div>
-      )}
+      {waitingForUpdate && <WaitingBanner feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} />}
 
       {activeTab === "feedback" ? (
         <FeedbackDisplayContent sessionId={sessionId} revision={revision} />
@@ -287,7 +303,7 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
   );
 }
 
-function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: AnnotationSidebarProps) {
+function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseButton }: AnnotationSidebarProps & { agentWatching: boolean }) {
   const {
     annotations, updateAnnotation, removeAnnotation,
     addAnnotationImage, removeAnnotationImage,
@@ -422,6 +438,10 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
           {annotations.length > 0 && (
             <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-border-subtle text-[10px] font-medium text-text-secondary">{annotations.length}</span>
           )}
+          <span
+            className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${agentWatching ? "bg-accent-green" : "bg-accent-amber"}`}
+            title={agentWatching ? "Agent connected" : "Agent disconnected"}
+          />
         </span>
         {collapseButton}
       </div>

daemon/client/App.tsx

@@ -32,6 +32,7 @@ export interface RevisionInfo {
   canvasFiles: CanvasFileInfo[];
   createdAt: string;
   hasFeedback: boolean;
+  feedbackConsumed: boolean;
   response?: string;
 }
 
@@ -57,6 +58,7 @@ export const RevisionContext = createContext<{
   isReadOnly: boolean;
   compareRevision: { left: number; right: number } | null;
   setCompareRevision: (rev: { left: number; right: number } | null) => void;
+  agentWatching: boolean;
 }>({
   currentRevision: 1,
   selectedRevision: 1,
@@ -65,6 +67,7 @@ export const RevisionContext = createContext<{
   isReadOnly: false,
   compareRevision: null,
   setCompareRevision: () => {},
+  agentWatching: false,
 });
 
 function resolveTheme(pref: string): "light" | "dark" {
@@ -179,6 +182,7 @@ function App() {
   const [revisions, setRevisions] = useState<RevisionInfo[]>([]);
   const [compareRevision, setCompareRevision] = useState<{ left: number; right: number } | null>(null);
   const [connected, setConnected] = useState(false);
+  const [agentWatching, setAgentWatching] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [canvasFiles, setCanvasFiles] = useState<string[]>([]);
   const [activeView, setActiveViewRaw] = useState<ActiveView>({ type: "overview" });
@@ -314,6 +318,9 @@ function App() {
           if (data.type === "revision-updated") {
             if (data.revisions) setRevisions(data.revisions);
           }
+          if (data.type === "watcher-status") {
+            setAgentWatching(!!data.watching);
+          }
         } catch {}
       };
     };
@@ -336,7 +343,7 @@ function App() {
 
   return (
     <SessionContext.Provider value={sessionId}>
-      <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision }}>
+      <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision, agentWatching }}>
         <AnnotationProvider key={`${sessionId}:${selectedRevision}`} sessionId={sessionId} revision={selectedRevision} isReadOnly={isReadOnly}>
           <ActiveViewContext.Provider value={{ activeView, setActiveView, openFiles, closeFile, canvasFiles }}>
           <ActiveViewCtx.Provider value={{ setActiveView }}>

daemon/src/handlers/api.ts

@@ -8,11 +8,12 @@ import type { Route } from "../router";
 export interface ApiContext {
   sessionManager: SessionManager;
   broadcastPlanUpdate: (id: string) => void;
+  broadcastRevisionUpdate: (id: string) => void;
   port: number;
 }
 
 export function createApiHandlers(ctx: ApiContext): Route[] {
-  const { sessionManager, broadcastPlanUpdate, port } = ctx;
+  const { sessionManager, broadcastPlanUpdate, broadcastRevisionUpdate, port } = ctx;
 
   /**
    * Read *.jsx canvas files from a directory.
@@ -170,6 +171,7 @@ export function createApiHandlers(ctx: ApiContext): Route[] {
     const result = sessionManager.getLatestUnconsumedFeedback(sessionId);
     if (!result) return jsonResponse({ found: false });
     sessionManager.consumeFeedback(sessionId, result.revision);
+    broadcastRevisionUpdate(sessionId);
     return jsonResponse({ found: true, revision: result.revision, feedback: result.feedback });
   }
 

daemon/src/server.ts

@@ -21,7 +21,7 @@ const sessionManager = new SessionManager();
 const wsManager = createWebSocketManager(sessionManager);
 
 const routes = [
-  ...createApiHandlers({ sessionManager, broadcastPlanUpdate: wsManager.broadcastPlanUpdate, port: PORT }),
+  ...createApiHandlers({ sessionManager, broadcastPlanUpdate: wsManager.broadcastPlanUpdate, broadcastRevisionUpdate: wsManager.broadcastRevisionUpdate, port: PORT }),
   ...createFileHandlers(sessionManager),
   ...createUploadHandlers(sessionManager),
   ...createStaticHandlers(),

daemon/src/websocket.ts

@@ -36,12 +36,63 @@ export function createWebSocketManager(sessionManager: SessionManager) {
     }
   }
 
+  function broadcastWatcherStatus(sessionId: string) {
+    const sockets = browserSockets.get(sessionId);
+    if (!sockets) return;
+    const watching = (waitSockets.get(sessionId)?.size ?? 0) > 0;
+    const payload = JSON.stringify({ type: "watcher-status", watching });
+    for (const ws of sockets) {
+      ws.send(payload);
+    }
+  }
+
+  // Ping wait sockets periodically to detect dead connections.
+  // We can't rely on ws.close() triggering the close handler for dead sockets,
+  // so we manually remove dead sockets and broadcast status.
+  const PING_INTERVAL = 5_000;
+  const pongReceived = new WeakSet<ServerWebSocket<WSData>>();
+
+  function removeWaitSocket(ws: ServerWebSocket<WSData>, sessionId: string) {
+    const sockets = waitSockets.get(sessionId);
+    if (sockets) {
+      sockets.delete(ws);
+      if (sockets.size === 0) waitSockets.delete(sessionId);
+    }
+    try { ws.close(); } catch {}
+    broadcastWatcherStatus(sessionId);
+  }
+
+  setInterval(() => {
+    for (const [sessionId, sockets] of waitSockets) {
+      for (const ws of sockets) {
+        if (!pongReceived.has(ws)) {
+          // No pong since last ping — connection is dead
+          removeWaitSocket(ws, sessionId);
+          continue;
+        }
+        pongReceived.delete(ws);
+        try { ws.ping(); } catch {
+          removeWaitSocket(ws, sessionId);
+        }
+      }
+    }
+  }, PING_INTERVAL);
+
   const handlers = {
     open(ws: ServerWebSocket<WSData>) {
       const { type, sessionId } = ws.data;
       const map = type === "browser" ? browserSockets : waitSockets;
       if (!map.has(sessionId)) map.set(sessionId, new Set());
       map.get(sessionId)!.add(ws);
+      if (type === "browser") {
+        // Send current watcher status to newly connected browser
+        const watching = (waitSockets.get(sessionId)?.size ?? 0) > 0;
+        ws.send(JSON.stringify({ type: "watcher-status", watching }));
+      } else {
+        // CLI waiter connected — notify browsers
+        pongReceived.add(ws); // Give it a free pass on first interval
+        broadcastWatcherStatus(sessionId);
+      }
     },
     message(ws: ServerWebSocket<WSData>, message: string | Buffer) {
       const { type, sessionId } = ws.data;
@@ -59,6 +110,7 @@ export function createWebSocketManager(sessionManager: SessionManager) {
               const waiters = waitSockets.get(sessionId);
               if (waiters && waiters.size > 0) {
                 sessionManager.consumeFeedback(sessionId, session.currentRevision);
+                broadcastRevisionUpdate(sessionId);
                 const payload = JSON.stringify({ type: "submit", feedback });
                 for (const waiter of waiters) {
                   waiter.send(payload);
@@ -71,13 +123,22 @@ export function createWebSocketManager(sessionManager: SessionManager) {
         } catch {}
       }
     },
+    pong(ws: ServerWebSocket<WSData>) {
+      if (ws.data.type === "wait") {
+        pongReceived.add(ws);
+      }
+    },
     close(ws: ServerWebSocket<WSData>) {
       const { type, sessionId } = ws.data;
       const map = type === "browser" ? browserSockets : waitSockets;
       map.get(sessionId)?.delete(ws);
       if (map.get(sessionId)?.size === 0) map.delete(sessionId);
+      if (type === "wait") {
+        // CLI waiter disconnected — notify browsers
+        broadcastWatcherStatus(sessionId);
+      }
     },
   };
 
-  return { handlers, broadcastPlanUpdate, broadcastRevisionUpdate };
+  return { handlers, broadcastPlanUpdate, broadcastRevisionUpdate, broadcastWatcherStatus };
 }