canopy-ui 0.6.1 → 0.6.3

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "canopy-ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jjackson/canopy-web.git",
+    "url": "git+https://github.com/dimagi-internal/canopy-web.git",
     "directory": "frontend/packages/canopy-ui"
   },
   "exports": {

package/src/chat/MenuPrompt.tsx

@@ -0,0 +1,58 @@
+import type { SessionMenu } from "./protocol";
+
+export interface MenuPromptProps {
+  menu: SessionMenu;
+  busy?: boolean;
+  error?: string;
+  onAnswer: (option: number | null) => void;
+}
+
+/**
+ * The dialog a blocked agent is waiting on, answerable from here.
+ *
+ * Shows the SUBJECT, not just the question: "Do you want to proceed?" tells you
+ * nothing away from the keyboard — the command is the whole decision, so it is
+ * rendered verbatim and monospaced rather than summarised.
+ *
+ * Refusing is always offered separately from the numbered options. Every dialog
+ * accepts Escape, and it is the only answer that stays correct if the dialog on
+ * screen is not the one rendered here.
+ */
+export function MenuPrompt({ menu, busy = false, error, onAnswer }: MenuPromptProps) {
+  return (
+    <div className="rounded-md border border-warning/30 bg-warning/10 px-3 py-2.5 text-sm">
+      <div className="flex items-center gap-1.5 font-medium text-warning">
+        <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-warning" />
+        {menu.title || "Waiting on you"}
+      </div>
+      {menu.body ? (
+        <pre className="mt-1.5 max-h-32 overflow-auto whitespace-pre-wrap break-all rounded bg-muted px-2 py-1.5 font-mono text-[12px] text-foreground-secondary">
+          {menu.body}
+        </pre>
+      ) : null}
+      <div className="mt-2 text-foreground">{menu.question}</div>
+      <div className="mt-2 flex flex-wrap gap-1.5">
+        {menu.options.map((option) => (
+          <button
+            key={option.number}
+            type="button"
+            disabled={busy}
+            onClick={() => onAnswer(option.number)}
+            className="rounded border border-input bg-card px-2 py-1 text-[13px] text-foreground hover:bg-muted disabled:opacity-50"
+          >
+            {option.label}
+          </button>
+        ))}
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => onAnswer(null)}
+          className="rounded px-2 py-1 text-[13px] text-muted-foreground hover:text-foreground disabled:opacity-50"
+        >
+          Cancel (Esc)
+        </button>
+      </div>
+      {error ? <div className="mt-1.5 text-[12px] text-destructive">{error}</div> : null}
+    </div>
+  );
+}

package/src/chat/index.ts

@@ -11,6 +11,7 @@ export type {
   MessageStatus,
   Draft,
   Participant,
+  SessionMenu,
   SessionState,
   WsAction,
   WsEvent,
@@ -43,6 +44,7 @@ export {
 
 // Presentational components
 export { ChatPanel, type ChatPanelProps } from "./ChatPanel";
+export { MenuPrompt, type MenuPromptProps } from "./MenuPrompt";
 export { MessageList } from "./MessageList";
 export { MessageItem, type RenderMarkdown } from "./MessageItem";
 export { ToolCallPair } from "./ToolCallPair";

package/src/chat/protocol.ts

@@ -60,12 +60,33 @@ export interface Participant {
   last_seen_at: string | null;
 }
 
+/** A dialog an agent is blocked on, read off its terminal.
+ *
+ *  `title` and `body` are what makes it answerable away from the keyboard:
+ *  "Do you want to proceed?" tells you nothing without the command it means. */
+export interface SessionMenu {
+  question: string;
+  title?: string;
+  body?: string;
+  selected?: number | null;
+  options: { number: number; label: string }[];
+}
+
 export interface SessionState {
   messages: Message[];
   /** Live agent activity, from the runner's turn-boundary hooks. Undefined when
    *  no hook has reported yet — the caller then falls back to the server's
-   *  coarser `running` flag. */
-  activity?: "working" | "idle";
+   *  coarser `running` flag.
+   *
+   *  "blocked" means the agent wants a human: a permission prompt, or an idle
+   *  wait for input. It is deliberately coarse — a hook observer cannot tell
+   *  those apart — but it is the difference between "still thinking, wait" and
+   *  "it is waiting on YOU", which previously rendered identically. */
+  activity?: "working" | "idle" | "blocked";
+  /** The dialog the agent is waiting on, when one could be read off its screen.
+   *  Absent when the agent is not blocked, or when the runner has no way to look
+   *  (no CDP) — "blocked" still arrives, it just has no buttons. */
+  menu?: SessionMenu;
   active_draft: Draft | null;
   participants: Participant[];
   presence_user_ids: number[];
@@ -91,7 +112,7 @@ export type WsEvent =
   | { event: "chat.stream_start"; data: { message_id: string; turn_index: number } }
   // The agent started or finished a turn. Distinct from tool events: it fires
   // while Claude is THINKING, before any content exists to show.
-  | { event: "session.activity"; data: { state: "working" | "idle" } }
+  | { event: "session.activity"; data: { state: "working" | "idle" | "blocked"; menu?: SessionMenu } }
   // A human typed into emdash rather than into this page. No client echoed it,
   // so this is the only way it reaches the browser before a reload.
   | { event: "chat.user_message"; data: { message_id: string; turn_index: number; plaintext: string } }

package/src/chat/sessionReducer.test.ts

@@ -539,3 +539,90 @@ describe("sessionReducer — a web send arriving twice", () => {
     expect(next.messages).toHaveLength(2)
   })
 })
+
+describe("blocked — the agent is waiting on YOU", () => {
+  it("renders as its own state, not as working", () => {
+    const state = sessionReducer(makeState(), {
+      event: "session.activity",
+      data: { state: "blocked" },
+    });
+    expect(state.activity).toBe("blocked");
+  });
+
+  it("clears once the agent produces a row again", () => {
+    // Notification fires on the way INTO a wait and nothing fires on the way
+    // out — approving a permission prompt emits no hook at all. A row is the
+    // only proof the wait ended, so without this the chip says "needs you" for
+    // the rest of the turn, long after you answered.
+    const blocked = sessionReducer(makeState(), {
+      event: "session.activity",
+      data: { state: "blocked" },
+    });
+    const after = sessionReducer(blocked, {
+      event: "chat.tool_use",
+      data: {
+        parent_message_id: null,
+        tool_message_id: "m1",
+        turn_index: 3,
+        block: { id: "toolu_1", name: "Bash" },
+      },
+    });
+    expect(after.activity).toBe("working");
+  });
+
+  it("is not cleared by traffic that proves nothing about the agent", () => {
+    // A teammate typing, or presence churn, says nothing about whether the
+    // agent is still waiting for an answer.
+    const blocked = sessionReducer(makeState(), {
+      event: "session.activity",
+      data: { state: "blocked" },
+    });
+    const after = sessionReducer(blocked, {
+      event: "presence.joined",
+      data: { user_id: 2, display_name: "Someone" },
+    });
+    expect(after.activity).toBe("blocked");
+  });
+});
+
+describe("the dialog an agent is blocked on", () => {
+  const MENU = {
+    question: "Do you want to proceed?",
+    title: "Bash command",
+    body: "rm target.txt",
+    options: [{ number: 1, label: "Yes" }, { number: 2, label: "No" }],
+  };
+
+  it("is carried with the blocked state", () => {
+    const state = sessionReducer(makeState(), {
+      event: "session.activity",
+      data: { state: "blocked", menu: MENU },
+    });
+    expect(state.menu?.options).toHaveLength(2);
+    expect(state.menu?.body).toBe("rm target.txt");
+  });
+
+  it("is dropped when the agent starts producing again", () => {
+    // Buttons that answer a dialog no longer on screen send a stray keystroke
+    // into the prompt — worse than showing nothing.
+    const blocked = sessionReducer(makeState(), {
+      event: "session.activity",
+      data: { state: "blocked", menu: MENU },
+    });
+    const after = sessionReducer(blocked, {
+      event: "chat.tool_use",
+      data: { parent_message_id: null, tool_message_id: "m1", turn_index: 3, block: { id: "t1" } },
+    });
+    expect(after.activity).toBe("working");
+    expect(after.menu).toBeUndefined();
+  });
+
+  it("is cleared by a later activity frame that has no menu", () => {
+    const blocked = sessionReducer(makeState(), {
+      event: "session.activity",
+      data: { state: "blocked", menu: MENU },
+    });
+    const idle = sessionReducer(blocked, { event: "session.activity", data: { state: "idle" } });
+    expect(idle.menu).toBeUndefined();
+  });
+});

package/src/chat/sessionReducer.ts

@@ -13,7 +13,27 @@ import type { Draft, Message, SessionState, WsEvent } from "./protocol";
 // `draft.committed` carries only `user_message_id` (no assistant id to
 // pre-insert), so the assistant row is created lazily when its first stream
 // frame arrives.
+/** Frames that prove the agent is producing again.
+ *
+ *  `Notification` fires on the way IN to a wait and NOTHING fires on the way
+ *  out — approving a permission prompt emits no hook at all. So without this,
+ *  a session shows "needs you" for the rest of the turn, long after you
+ *  answered. Any row the agent emits afterwards is the proof the hook cannot
+ *  give. */
+const UNBLOCKING_FRAMES = new Set([
+  "chat.stream_start",
+  "chat.delta",
+  "chat.tool_use",
+  "chat.tool_result",
+]);
+
 export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState {
+  if (prev.activity === "blocked" && UNBLOCKING_FRAMES.has(frame.event)) {
+    // Dropping the menu with the state matters as much as the state itself —
+    // the dialog is gone, and buttons that answer a gone dialog send a stray
+    // keystroke into the prompt.
+    prev = { ...prev, activity: "working", menu: undefined };
+  }
   switch (frame.event) {
     case "session.state":
       return frame.data;
@@ -51,7 +71,10 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
     }
 
     case "session.activity":
-      return { ...prev, activity: frame.data.state };
+      // The menu is cleared unless this frame carries one: a stale dialog is
+      // worse than none, because its buttons would answer a prompt that is no
+      // longer on screen.
+      return { ...prev, activity: frame.data.state, menu: frame.data.menu };
 
     case "chat.user_message": {
       // Someone typed into emdash, OR into this page. Both reach here, and that