canopy-ui 0.12.1 → 0.13.0

package/src/chat/SendBox.test.tsx

@@ -42,14 +42,11 @@ function setup(props: Partial<Parameters<typeof SendBox>[0]> = {}) {
     <SendBox
       draft={draft()}
       connected
-      currentUserId={ME}
-      holderIsPresent={false}
       isStreaming={false}
       streamingMessageId={null}
       onUpdate={onUpdate}
       onSend={onSend}
       onStop={vi.fn()}
-      onTakeOver={vi.fn()}
       {...props}
     />,
   );
@@ -67,14 +64,11 @@ describe("SendBox — local-first composer", () => {
       <SendBox
         draft={draft({ body: "hel", version: 2, last_editor: ME })}
         connected
-        currentUserId={ME}
-        holderIsPresent={false}
         isStreaming={false}
         streamingMessageId={null}
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={vi.fn()}
-        onTakeOver={vi.fn()}
       />,
     );
 
@@ -91,41 +85,38 @@ describe("SendBox — local-first composer", () => {
       <SendBox
         draft={draft({ id: "d1", body: "a long", version: 9, last_editor: ME })}
         connected
-        currentUserId={ME}
-        holderIsPresent={false}
         isStreaming={false}
         streamingMessageId={null}
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={vi.fn()}
-        onTakeOver={vi.fn()}
       />,
     );
 
     expect(textarea().value).toBe("a long message");
   });
 
-  it("DOES adopt an edit made by someone else", () => {
-    // Multiplayer still works: a teammate's edit is the one case where the
-    // server genuinely knows better than this client.
+  it("never adopts another editor's body — this box is only ever your own draft now", () => {
+    // Everyone gets their own draft (`SessionState.active_draft` is the
+    // CALLER's own); a teammate's live text arrives via `peer_drafts` /
+    // <TypingRows> instead, never through this component's `draft` prop. So a
+    // `last_editor` that isn't you must NOT overwrite what you're typing.
     const { textarea, rerender } = setup();
+    fireEvent.change(textarea(), { target: { value: "my own words" } });
 
     rerender(
       <SendBox
         draft={draft({ body: "from my teammate", version: 3, last_editor: THEM })}
         connected
-        currentUserId={ME}
-        holderIsPresent
         isStreaming={false}
         streamingMessageId={null}
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={vi.fn()}
-        onTakeOver={vi.fn()}
       />,
     );
 
-    expect(textarea().value).toBe("from my teammate");
+    expect(textarea().value).toBe("my own words");
   });
 
   it("still reports every keystroke upstream", () => {
@@ -163,12 +154,87 @@ describe("SendBox — local-first composer", () => {
     expect(textarea().value).toBe("");
   });
 
-  it("still blocks editing while a teammate holds the draft", () => {
+  it("never locks editing for a teammate's draft — this box is never theirs to hold", () => {
+    // There is no shared lock any more: every editor has their own draft, so a
+    // `last_editor` naming someone else describes no state this box renders.
     const { textarea } = setup({
       draft: draft({ last_editor: THEM, body: "theirs" }),
-      holderIsPresent: true,
     });
-    expect(textarea().disabled).toBe(true);
+    expect(textarea().disabled).toBe(false);
+  });
+});
+
+describe("SendBox — a local draft (contact / widget) restores a failed send", () => {
+  // A contact's or the widget's own composer has no server draft to co-edit;
+  // `useSessionSocket` stands in a LOCAL one (`id: "local"`) instead. Sending
+  // clears `localBody` optimistically (see "clears the composer when you
+  // send" above) before the round trip even starts — so a failure has no way
+  // back into the box except through this draft, once the hook re-seeds its
+  // body in the catch handler (`sendChatOverHttp`).
+  function localDraft(body: string): Draft {
+    return {
+      id: "local", slot: "next", status: "open", body, version: 0,
+      last_editor: 0, last_edit_at: new Date().toISOString(),
+    } as Draft;
+  }
+
+  it("shows the text again once the local draft's body is restored after a send", () => {
+    const { textarea, rerender } = setup({ draft: localDraft("hello") });
+    expect(textarea().value).toBe("hello");
+
+    // Pressing Send clears the box optimistically — `handleSend`'s own
+    // `setLocalBody("")`, independent of whatever the draft prop says.
+    fireEvent.click(screen.getByRole("button", { name: /^send$/i }));
+    expect(textarea().value).toBe("");
+
+    // The send already went out — the hook cleared its local draft to null the
+    // instant it fired, well before any round trip could resolve.
+    rerender(
+      <SendBox
+        draft={null}
+        connected
+        isStreaming={false}
+        streamingMessageId={null}
+        onUpdate={vi.fn()}
+        onSend={vi.fn()}
+        onStop={vi.fn()}
+      />,
+    );
+    expect(textarea().value).toBe("");
+
+    // The HTTP send failed; the hook re-seeds the SAME local draft with the
+    // original text (`updateLocalDraft` in its catch handler).
+    rerender(
+      <SendBox
+        draft={localDraft("hello")}
+        connected
+        isStreaming={false}
+        streamingMessageId={null}
+        onUpdate={vi.fn()}
+        onSend={vi.fn()}
+        onStop={vi.fn()}
+      />,
+    );
+    expect(textarea().value).toBe("hello");
+  });
+
+  it("does not restore a real multiplayer draft the same way", () => {
+    // The mirror is scoped to `id === "local"` on purpose: a server-assigned
+    // id is a real co-editor's draft, and adopting it unconditionally is
+    // exactly the deleted `theirEdit` bug (it could overwrite live typing).
+    const { textarea, rerender } = setup({ draft: null });
+    rerender(
+      <SendBox
+        draft={draft({ id: "d1", body: "not mine to adopt", last_editor: THEM })}
+        connected
+        isStreaming={false}
+        streamingMessageId={null}
+        onUpdate={vi.fn()}
+        onSend={vi.fn()}
+        onStop={vi.fn()}
+      />,
+    );
+    expect(textarea().value).toBe("");
   });
 });
 
@@ -207,14 +273,11 @@ describe("SendBox — cancelling a queued turn", () => {
       <SendBox
         draft={draft()}
         connected
-        currentUserId={ME}
-        holderIsPresent={false}
         isStreaming
         streamingMessageId={null}
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={onStop}
-        onTakeOver={vi.fn()}
       />,
     );
 
@@ -229,14 +292,11 @@ describe("SendBox — cancelling a queued turn", () => {
       <SendBox
         draft={draft()}
         connected
-        currentUserId={ME}
-        holderIsPresent={false}
         isStreaming
         streamingMessageId="m1"
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={onStop}
-        onTakeOver={vi.fn()}
       />,
     );
 
@@ -244,20 +304,39 @@ describe("SendBox — cancelling a queued turn", () => {
 
     expect(onStop).toHaveBeenCalledWith("m1");
   });
+
+  it("stays available to send while the agent is replying", () => {
+    // The composer used to lock Send for the whole reply; a send made while
+    // streaming is QUEUED server-side now, not refused client-side.
+    const onSend = vi.fn();
+    render(
+      <SendBox
+        draft={draft()}
+        connected
+        isStreaming
+        streamingMessageId="m1"
+        onUpdate={vi.fn()}
+        onSend={onSend}
+        onStop={vi.fn()}
+      />,
+    );
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "queue me up" } });
+
+    expect(screen.getByTestId("send").hasAttribute("disabled")).toBe(false);
+    fireEvent.click(screen.getByTestId("send"));
+    expect(onSend).toHaveBeenCalled();
+  });
 });
 
 describe("SendBox — attaching files", () => {
   const attachProps = {
     draft: draft(),
     connected: true,
-    currentUserId: ME,
-    holderIsPresent: false,
     isStreaming: false,
     streamingMessageId: null,
     onUpdate: vi.fn(),
     onSend: vi.fn(),
     onStop: vi.fn(),
-    onTakeOver: vi.fn(),
   };
 
   it("hides attaching entirely when the host provides no handler", () => {
@@ -345,13 +424,14 @@ describe("SendBox — attaching files", () => {
     expect(screen.getByText(/10MB limit/)).toBeTruthy();
   });
 
-  it("does not offer attaching while a teammate holds the draft", () => {
+  it("does not offer attaching while sending is blocked", () => {
+    // Attaching used to be gated on a teammate's draft lock, which no longer
+    // exists; the one real reason to withhold it now is `disabledReason`.
     render(
       <SendBox
         {...attachProps}
-        draft={draft({ last_editor: THEM })}
-        holderIsPresent
         onAttach={vi.fn()}
+        disabledReason="answer the question above to continue"
       />,
     );
     expect(screen.queryByRole("button", { name: /attach/i })).toBeNull();
@@ -385,14 +465,11 @@ describe("SendBox — draft persistence across unmount", () => {
       <SendBox
         draft={draft()}
         connected
-        currentUserId={ME}
-        holderIsPresent={false}
         isStreaming={false}
         streamingMessageId={null}
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={vi.fn()}
-        onTakeOver={vi.fn()}
         persistKey="sess-1"
         storage={storage}
         {...props}
@@ -444,14 +521,11 @@ describe("SendBox — draft persistence across unmount", () => {
       <SendBox
         draft={draft()}
         connected
-        currentUserId={ME}
-        holderIsPresent={false}
         isStreaming={false}
         streamingMessageId={null}
         onUpdate={vi.fn()}
         onSend={vi.fn()}
         onStop={vi.fn()}
-        onTakeOver={vi.fn()}
         persistKey="sess-2"
         storage={storage}
       />,

package/src/chat/SendBox.tsx

@@ -11,8 +11,6 @@ import type { Draft } from "./protocol";
 import {
   clearStoredDraft,
   defaultDraftStorage,
-  isDraftIdle,
-  msUntilDraftIdle,
   readStoredDraft,
   writeStoredDraft,
   type DraftStorage,
@@ -34,12 +32,6 @@ interface Props {
   draft: Draft | null;
   /** Live socket. Typing never depends on this; SENDING does — see canSend. */
   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;
@@ -52,7 +44,6 @@ interface Props {
    *  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. */
   banner?: ReactNode;
@@ -77,16 +68,12 @@ interface Props {
 export function SendBox({
   draft,
   connected,
-  currentUserId,
-  holderIsPresent,
-  holderName,
   isStreaming,
   streamingMessageId,
   onUpdate,
   onSend,
   onStop,
   stopState,
-  onTakeOver,
   banner,
   disabledReason,
   attachments,
@@ -96,36 +83,16 @@ export function SendBox({
   storage,
 }: Props) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  // Force a re-render when the lock transitions from live to idle.
-  // Without this, nothing would trigger a re-render exactly at T+2s
-  // after the last edit, and another user's UI would stay locked
-  // indefinitely until some unrelated event happens to arrive.
-  const [, forceTick] = useState(0);
-
-  useEffect(() => {
-    if (!draft) return;
-    const remaining = msUntilDraftIdle(draft);
-    if (remaining === 0) return;
-    const t = window.setTimeout(() => forceTick((n) => n + 1), remaining + 10);
-    return () => window.clearTimeout(t);
-  }, [draft?.last_edit_at, draft]);
-
-  const holderId = draft?.last_editor ?? null;
-  const isHolder = holderId != null && holderId === currentUserId;
-  const holderIsIdle = isDraftIdle(draft);
 
   // LOCAL-FIRST: the textarea's value is local state, never server state.
   // Rendering `draft.body` directly made every inbound frame a chance to
   // overwrite the user mid-keystroke — a stale echo of your own debounced
   // update, or a `session.state` snapshot on reconnect (which replaces state
-  // 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.
+  // wholesale), would rewind the composer to a body from 150ms ago.
   //
   // 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
+  // the server (see drafts.shouldSyncDraftLive). 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;
@@ -141,11 +108,6 @@ export function SendBox({
   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
@@ -158,46 +120,43 @@ export function SendBox({
     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
-  // also what stops two clients on one account (phone + desktop) from
-  // fighting — each keeps its own text instead of clobbering the other.
-  const theirEdit =
-    draft != null && draft.last_editor !== currentUserId ? draft.body : null;
+  // A draft with `id === "local"` is never a co-editor's — it is the LOCAL
+  // stand-in a host keeps for a principal with no server-side draft (a
+  // contact's `useSessionSocket.sendOverHttp` path, or the widget's start
+  // screen `contactDraft`). Its body is always either an echo of what THIS
+  // box just typed (harmless to mirror back) or a failed send being restored
+  // after `handleSend` already cleared the box — the one case with no other
+  // way to reach the screen, since sending clears `localBody` optimistically
+  // rather than waiting for the round trip. Scoped to `id === "local"` so a
+  // real multiplayer draft (a server-assigned id) is never adopted this way —
+  // that was the deleted `theirEdit` effect's mistake, which adopted ANY
+  // other editor's draft and could overwrite what you were mid-typing.
   useEffect(() => {
-    if (theirEdit != null) setLocalBody(theirEdit);
-  }, [theirEdit]);
+    if (draft?.id === "local" && draft.body !== localBody) {
+      setLocalBody(draft.body);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [draft?.id, draft?.body]);
 
-  // Typing is ALWAYS allowed unless a teammate is actively holding the draft.
-  // It used to require `draft != null`, so the composer was disabled until
+  // Typing is ALWAYS allowed now — this box is only ever YOUR OWN draft, and
+  // every editor gets one (see protocol.ts::SessionState.active_draft). It
+  // used to require `draft != null`, so the composer was disabled until
   // session.state landed — locking you out of your own input on first paint
   // and again on every reconnect. Keystrokes typed early are held locally and
   // flushed when the draft exists (see useSessionSocket.sendChat).
-  const canEdit = isHolder || holderIsIdle || !holderIsPresent;
-
-  useEffect(() => {
-    if (canEdit && !isHolder && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [canEdit, isHolder]);
-
   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
   // when the socket is closed, so an allowed-but-undeliverable send would clear
-  // the box and lose the message outright.
+  // the box and lose the message outright. Sending stays available while the
+  // agent is replying — a send made mid-reply is QUEUED, not blocked, and
+  // <QueuedRows> is what shows it landed.
   const canSend =
-    canEdit &&
     connected &&
     draft != null &&
     body.trim().length > 0 &&
-    !isStreaming &&
     !blocked;
 
   const handleChange = (value: string) => {
@@ -206,7 +165,7 @@ export function SendBox({
     onUpdate(value);
   };
 
-  const canAttach = typeof onAttach === "function" && canEdit && !blocked;
+  const canAttach = typeof onAttach === "function" && !blocked;
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [dragging, setDragging] = useState(false);
 
@@ -227,8 +186,7 @@ export function SendBox({
 
   const handleSend = () => {
     // Clear locally rather than waiting for the server's cleared draft to
-    // echo back: that echo carries last_editor === us, which the adopt rule
-    // above (correctly) ignores, so nothing else would empty the box.
+    // echo back — a round trip the person sending has no reason to wait on.
     setLocalBody("");
     if (persistKey) clearStoredDraft(store, persistKey);
     onSend();
@@ -253,10 +211,10 @@ export function SendBox({
 
   const placeholder = blocked
     ? disabledReason
-    : !canEdit
-      ? "Another teammate is editing…"
-      : !draft
-        ? "Type a message… (connecting…)"
+    : !draft
+      ? "Type a message… (connecting…)"
+      : isStreaming
+        ? "Type a message — it will be sent after the current reply"
         : "Type a message… (Enter to send, Shift+Enter for newline)";
 
   const staged = attachments ?? [];
@@ -307,39 +265,11 @@ 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}
+          disabled={blocked}
           onChange={(e) => handleChange(e.target.value)}
           onKeyDown={handleKey}
           onPaste={handlePaste}
@@ -349,13 +279,7 @@ export function SendBox({
             "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",
+            "border-input text-foreground disabled:bg-muted disabled:text-muted-foreground",
           ].join(" ")}
         />
         <div className="mt-1 flex items-center justify-end gap-2">

package/src/chat/TypingRows.tsx

@@ -0,0 +1,18 @@
+import type { PeerDraft } from "./protocol";
+
+/** Everyone else's box, live — the multiplayer half of the composer. One row
+ *  per person, newest edit last, right above your own box. */
+export function TypingRows({ peers }: { peers: PeerDraft[] }) {
+  if (peers.length === 0) return null;
+  return (
+    <ul className="space-y-1 border-t border-border bg-background px-3 py-2" aria-live="polite">
+      {peers.map((p) => (
+        <li key={p.author.id} data-testid="typing-row" className="flex min-w-0 gap-2 text-xs">
+          <span className="shrink-0 font-medium text-foreground">{p.author.name}</span>
+          <span className="shrink-0 text-muted-foreground">is typing:</span>
+          <span className="min-w-0 truncate italic text-foreground-secondary">{p.body}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}