canopy-ui 0.6.3 → 0.8.0

package/src/chat/SendBox.tsx

@@ -8,7 +8,15 @@ import {
 import type React from "react";
 
 import type { Draft } from "./protocol";
-import { isDraftIdle, msUntilDraftIdle } from "./drafts";
+import {
+  clearStoredDraft,
+  defaultDraftStorage,
+  isDraftIdle,
+  msUntilDraftIdle,
+  readStoredDraft,
+  writeStoredDraft,
+  type DraftStorage,
+} from "./drafts";
 import { Button } from "../ui/button";
 
 /** An attachment the composer is holding, uploaded but not yet sent. */
@@ -28,6 +36,10 @@ interface Props {
   connected: boolean;
   currentUserId: number;
   holderIsPresent: boolean;
+  /** Display name of the teammate holding the draft, when it is not you.
+   *  The composer is where their words appear, so it is where their name
+   *  belongs — it used to live only in a 28px chip in the opposite corner. */
+  holderName?: string | null;
   isStreaming: boolean;
   streamingMessageId: string | null;
   onUpdate: (body: string) => void;
@@ -36,6 +48,10 @@ interface Props {
    *  The server cancels every non-terminal turn regardless, so a null id is
    *  a valid cancel, not a no-op. */
   onStop: (messageId: string | null) => void;
+  /** Whether the stop the human asked for actually landed. Rendered next to the
+   *  button that asked for it, because that is where the person who pressed it
+   *  is looking. Undefined = no stop has been asked for on this turn. */
+  stopState?: "requested" | "stopped" | "failed";
   onTakeOver: () => void;
   /** Optional app-supplied banner rendered above the composer (e.g. an
    *  imported-session note). The kit itself has no CLI-auth banners. */
@@ -49,6 +65,13 @@ interface Props {
    *  paths); it re-renders `attachments` as they progress. */
   onAttach?: (files: File[]) => void;
   onRemoveAttachment?: (id: string) => void;
+  /** Persist what is typed under this key (the session id) so it survives
+   *  unmounting — routing away and back, or closing the tab. Omit to keep the
+   *  purely in-memory behaviour. */
+  persistKey?: string;
+  /** Storage backing `persistKey`. Defaults to localStorage; inject a fake in
+   *  tests, or sessionStorage for per-tab drafts. */
+  storage?: DraftStorage | null;
 }
 
 export function SendBox({
@@ -56,17 +79,21 @@ export function SendBox({
   connected,
   currentUserId,
   holderIsPresent,
+  holderName,
   isStreaming,
   streamingMessageId,
   onUpdate,
   onSend,
   onStop,
+  stopState,
   onTakeOver,
   banner,
   disabledReason,
   attachments,
   onAttach,
   onRemoveAttachment,
+  persistKey,
+  storage,
 }: Props) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   // Force a re-render when the lock transitions from live to idle.
@@ -94,7 +121,42 @@ export function SendBox({
   // wholesale), would rewind the composer to a body from 150ms ago. In
   // single-player that reconciliation protects against nothing at all, since
   // there is no co-editor whose edits could be lost.
-  const [localBody, setLocalBody] = useState(draft?.body ?? "");
+  //
+  // Seeded from persisted storage when there is one, because a body typed
+  // before an unmount exists NOWHERE else: single-player never mirrors it to
+  // the server (see drafts.shouldSyncDraftLive), and the adopt rule below
+  // deliberately ignores our own server draft. A stored body wins over
+  // `draft.body` — it is strictly newer, being what was in the box when we
+  // last left it.
+  const store = storage === undefined ? defaultDraftStorage() : storage;
+  const [localBody, setLocalBody] = useState(
+    () => readStoredDraft(store, persistKey ?? "") ?? draft?.body ?? "",
+  );
+
+  // Persistence is a synchronous localStorage write per keystroke — no
+  // debounce on purpose. The payload is a chat message, the write is
+  // microseconds, and every timer-based alternative has to solve flush-on-
+  // unmount and flush-on-tab-close to be correct at exactly the moments this
+  // feature exists for.
+  const persist = (body: string) => {
+    if (persistKey) writeStoredDraft(store, persistKey, body);
+  };
+  // Nothing persists a CO-EDITOR's text, deliberately: a draft someone else is
+  // editing is by definition being live-synced to the server, so the existing
+  // adopt rule below restores it from `session.state` on the way back in. The
+  // gap this whole mechanism closes is the single-player one, where the server
+  // is never told at all.
+
+  // The panel can swap sessions without remounting (same route, new :id), so
+  // the box must follow the key rather than carry one session's text into the
+  // next. Adjusted during render rather than in an effect — React's documented
+  // shape for "reset state when a prop changes", and the one that avoids a
+  // paint showing the previous session's text.
+  const [keyOnScreen, setKeyOnScreen] = useState(persistKey);
+  if (keyOnScreen !== persistKey) {
+    setKeyOnScreen(persistKey);
+    setLocalBody(readStoredDraft(store, persistKey ?? "") ?? "");
+  }
 
   // The ONE case where the server genuinely knows better than this client:
   // somebody ELSE edited the shared draft. Our own echo is ignored, which is
@@ -121,6 +183,10 @@ export function SendBox({
 
   const body = localBody;
   const blocked = Boolean(disabledReason);
+  // Locked BY SOMEONE ELSE, as opposed to blocked for an unrelated reason.
+  // The two look identical to `disabled` and want opposite treatments: a
+  // blocked box is inert, a co-edited one is showing you live content.
+  const lockedByTeammate = !canEdit && holderIsPresent && !holderIsIdle && !blocked;
   // Sending needs a draft (`chat.send` commits the SERVER's copy, so there must
   // be one) AND a live socket. The socket check is load-bearing now that the
   // composer clears optimistically: `send()` drops every frame but chat.stop
@@ -136,6 +202,7 @@ export function SendBox({
 
   const handleChange = (value: string) => {
     setLocalBody(value);
+    persist(value);
     onUpdate(value);
   };
 
@@ -163,6 +230,7 @@ export function SendBox({
     // echo back: that echo carries last_editor === us, which the adopt rule
     // above (correctly) ignores, so nothing else would empty the box.
     setLocalBody("");
+    if (persistKey) clearStoredDraft(store, persistKey);
     onSend();
   };
 
@@ -239,8 +307,37 @@ export function SendBox({
             ))}
           </ul>
         )}
+        {/* Co-edit attribution, at the box rather than across the screen.
+            Their text arrives INSIDE this textarea, and a disabled textarea
+            renders it in muted grey — pixel-identical to a placeholder. So the
+            single most important thing multiplayer does (showing you what your
+            teammate is writing) read as an EMPTY box with a hint in it. */}
+        {lockedByTeammate && (
+          <div
+            data-testid="coedit-banner"
+            className="mb-1.5 flex items-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-2 py-1 text-xs"
+          >
+            <span className="relative flex h-1.5 w-1.5 shrink-0" aria-hidden="true">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-primary" />
+            </span>
+            <span className="text-foreground">
+              <span className="font-medium">{holderName ?? "A teammate"}</span> is
+              writing — you are seeing their draft
+            </span>
+            <button
+              type="button"
+              data-testid="take-over"
+              onClick={onTakeOver}
+              className="ml-auto shrink-0 rounded border border-border px-1.5 py-0.5 font-medium text-foreground hover:bg-muted"
+            >
+              take over
+            </button>
+          </div>
+        )}
         <textarea
           ref={textareaRef}
+          data-testid="composer"
           value={body}
           disabled={!canEdit || blocked}
           onChange={(e) => handleChange(e.target.value)}
@@ -248,7 +345,18 @@ export function SendBox({
           onPaste={handlePaste}
           placeholder={placeholder}
           rows={3}
-          className="w-full resize-none rounded-md border border-input bg-transparent p-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground"
+          className={[
+            "w-full resize-none rounded-md border bg-transparent p-2 text-sm shadow-sm",
+            "placeholder:text-muted-foreground focus-visible:outline-none",
+            "focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed",
+            // A teammate's draft is CONTENT, not a disabled control. Dimming it
+            // to `text-muted-foreground` made their sentence look like the
+            // placeholder it sits next to — the one styling choice that made
+            // co-editing appear not to work at all.
+            lockedByTeammate
+              ? "border-primary/40 bg-primary/5 text-foreground"
+              : "border-input text-foreground disabled:bg-muted disabled:text-muted-foreground",
+          ].join(" ")}
         />
         <div className="mt-1 flex items-center justify-end gap-2">
           {canAttach && (
@@ -281,6 +389,26 @@ export function SendBox({
               {disabledReason}
             </span>
           )}
+          {stopState === "failed" ? (
+            // The one state that MUST be loud. Everything else here is either
+            // self-evident (the reply stopped) or transient. A stop that did not
+            // take looks exactly like a stop that worked — the agent keeps
+            // running either way — so without this it is invisible, which is the
+            // whole reason Stop could not be trusted.
+            <span
+              role="status"
+              className="mr-auto text-xs font-medium text-destructive"
+              title="Escape was pressed and the agent is still running. Try again, or stop it in the terminal."
+            >
+              stop didn&rsquo;t take — still running
+            </span>
+          ) : null}
+          {/* Never DISABLED while a stop is in flight, only relabelled. If the
+              runner dies between the request and the verdict, `stopState` never
+              advances — and a button that latched off would leave the human with
+              no way to ask again, the exact trap #519 documents for the composer
+              lock. Pressing again is harmless: the runner dedupes by session_key,
+              so three impatient presses are still one Escape. */}
           {isStreaming ? (
             <Button
               type="button"
@@ -288,15 +416,16 @@ export function SendBox({
               size="sm"
               onClick={handleStopClick}
             >
-              stop
-            </Button>
-          ) : null}
-          {!canEdit && holderIsPresent && !holderIsIdle ? (
-            <Button type="button" variant="outline" size="sm" onClick={onTakeOver}>
-              take over
+              {stopState === "requested" ? "stopping…" : "stop"}
             </Button>
           ) : null}
-          <Button type="button" size="sm" disabled={!canSend} onClick={handleSend}>
+          <Button
+            type="button"
+            size="sm"
+            data-testid="send"
+            disabled={!canSend}
+            onClick={handleSend}
+          >
             send
           </Button>
         </div>

package/src/chat/agui.fixture.json

@@ -0,0 +1,235 @@
+[
+  {
+    "canopy": {
+      "event": "chat.stream_start",
+      "data": {
+        "message_id": "m1",
+        "turn_index": 4
+      }
+    },
+    "agui": [
+      {
+        "metadata": {
+          "canopy": {
+            "turn_index": 4
+          }
+        },
+        "type": "TEXT_MESSAGE_START",
+        "messageId": "m1",
+        "role": "assistant"
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "chat.delta",
+      "data": {
+        "message_id": "m1",
+        "text": "hello"
+      }
+    },
+    "agui": [
+      {
+        "type": "TEXT_MESSAGE_CONTENT",
+        "messageId": "m1",
+        "delta": "hello"
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "chat.stream_complete",
+      "data": {
+        "message_id": "m1",
+        "plaintext": "hello"
+      }
+    },
+    "agui": [
+      {
+        "metadata": {
+          "canopy": {
+            "plaintext": "hello"
+          }
+        },
+        "type": "TEXT_MESSAGE_END",
+        "messageId": "m1"
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "chat.user_message",
+      "data": {
+        "message_id": "u1",
+        "turn_index": 3,
+        "plaintext": "hi there"
+      }
+    },
+    "agui": [
+      {
+        "metadata": {
+          "canopy": {
+            "turn_index": 3
+          }
+        },
+        "type": "TEXT_MESSAGE_CHUNK",
+        "messageId": "u1",
+        "role": "user",
+        "delta": "hi there"
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "chat.tool_use",
+      "data": {
+        "tool_message_id": "t9",
+        "parent_message_id": "m1",
+        "turn_index": 5,
+        "block": {
+          "name": "list_insights",
+          "input": {
+            "limit": 5
+          }
+        }
+      }
+    },
+    "agui": [
+      {
+        "metadata": {
+          "canopy": {
+            "turn_index": 5,
+            "block": {
+              "name": "list_insights",
+              "input": {
+                "limit": 5
+              }
+            }
+          }
+        },
+        "type": "TOOL_CALL_START",
+        "toolCallId": "t9",
+        "toolCallName": "list_insights",
+        "parentMessageId": "m1"
+      },
+      {
+        "type": "TOOL_CALL_ARGS",
+        "toolCallId": "t9",
+        "delta": "{\"limit\": 5}"
+      },
+      {
+        "type": "TOOL_CALL_END",
+        "toolCallId": "t9"
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "chat.tool_result",
+      "data": {
+        "tool_message_id": "t9",
+        "parent_message_id": "m1",
+        "turn_index": 6,
+        "block": {
+          "type": "tool_result",
+          "tool_use_id": "toolu_01ABC",
+          "content": "[]"
+        }
+      }
+    },
+    "agui": [
+      {
+        "metadata": {
+          "canopy": {
+            "turn_index": 6,
+            "parent_message_id": "m1",
+            "block": {
+              "type": "tool_result",
+              "tool_use_id": "toolu_01ABC",
+              "content": "[]"
+            }
+          }
+        },
+        "type": "TOOL_CALL_RESULT",
+        "messageId": "t9",
+        "toolCallId": "t9",
+        "content": "[]"
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "session.title_updated",
+      "data": {
+        "title": "Insights triage"
+      }
+    },
+    "agui": [
+      {
+        "type": "STATE_DELTA",
+        "delta": [
+          {
+            "op": "replace",
+            "path": "/title",
+            "value": "Insights triage"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "draft.updated",
+      "data": {
+        "id": "d1",
+        "body": "x",
+        "version": 2
+      }
+    },
+    "agui": [
+      {
+        "type": "CUSTOM",
+        "name": "canopy.draft.updated",
+        "value": {
+          "id": "d1",
+          "body": "x",
+          "version": 2
+        }
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "presence.joined",
+      "data": {
+        "user_id": 7
+      }
+    },
+    "agui": [
+      {
+        "type": "CUSTOM",
+        "name": "canopy.presence.joined",
+        "value": {
+          "user_id": 7
+        }
+      }
+    ]
+  },
+  {
+    "canopy": {
+      "event": "presence.left",
+      "data": {
+        "user_id": 7
+      }
+    },
+    "agui": [
+      {
+        "type": "CUSTOM",
+        "name": "canopy.presence.left",
+        "value": {
+          "user_id": 7
+        }
+      }
+    ]
+  }
+]