canopy-ui 0.12.2 → 0.14.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}
       />,
@@ -508,3 +582,30 @@ describe("SendBox — draft persistence across unmount", () => {
     expect(box().value).toBe("still typeable");
   });
 });
+
+describe("SendBox — typing visibility control", () => {
+  it("is absent when neither prop is given", () => {
+    setup();
+    expect(screen.queryByTestId("typing-visibility")).toBeNull();
+  });
+
+  it("is absent when only the value is given, with no handler", () => {
+    setup({ typingVisibility: "live" });
+    expect(screen.queryByTestId("typing-visibility")).toBeNull();
+  });
+
+  it("shows the control when both props are given, and calls the handler on selection", () => {
+    const onChange = vi.fn();
+    setup({ typingVisibility: "live", onTypingVisibilityChange: onChange });
+    const control = screen.getByTestId("typing-visibility") as HTMLSelectElement;
+    expect(control.value).toBe("live");
+    fireEvent.change(control, { target: { value: "typing" } });
+    expect(onChange).toHaveBeenCalledWith("typing");
+  });
+
+  it("has a tooltip explaining what it does", () => {
+    setup({ typingVisibility: "hidden", onTypingVisibilityChange: vi.fn() });
+    const control = screen.getByTestId("typing-visibility") as HTMLSelectElement;
+    expect(control.title.length).toBeGreaterThan(0);
+  });
+});

package/src/chat/SendBox.tsx

@@ -7,12 +7,10 @@ import {
 } from "react";
 import type React from "react";
 
-import type { Draft } from "./protocol";
+import type { Draft, TypingVisibility } 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;
@@ -72,21 +63,25 @@ interface Props {
   /** Storage backing `persistKey`. Defaults to localStorage; inject a fake in
    *  tests, or sessionStorage for per-tab drafts. */
   storage?: DraftStorage | null;
+  /** This person's choice of how much of THEIR OWN in-progress message peers
+   *  get to see: the words live (`live`), just the fact of typing (`typing`),
+   *  or nothing until send (`hidden`). Both this and `onTypingVisibilityChange`
+   *  are optional, and the control renders only when BOTH are given — a host
+   *  that passes neither (a contact's socket, which has no draft sync) gets no
+   *  control at all rather than a dead one. */
+  typingVisibility?: TypingVisibility;
+  onTypingVisibilityChange?: (visibility: TypingVisibility) => void;
 }
 
 export function SendBox({
   draft,
   connected,
-  currentUserId,
-  holderIsPresent,
-  holderName,
   isStreaming,
   streamingMessageId,
   onUpdate,
   onSend,
   onStop,
   stopState,
-  onTakeOver,
   banner,
   disabledReason,
   attachments,
@@ -94,38 +89,20 @@ export function SendBox({
   onRemoveAttachment,
   persistKey,
   storage,
+  typingVisibility,
+  onTypingVisibilityChange,
 }: 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 +118,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 +130,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 +175,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 +196,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 +221,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 +275,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 +289,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">
@@ -419,6 +353,33 @@ export function SendBox({
               {stopState === "requested" ? "stopping…" : "stop"}
             </Button>
           ) : null}
+          {typingVisibility != null && onTypingVisibilityChange != null && (
+            <label className="flex items-center gap-1 text-xs text-muted-foreground">
+              <span className="hidden sm:inline">Others see:</span>
+              <select
+                data-testid="typing-visibility"
+                value={typingVisibility}
+                title="Choose what others see of your message while you're still typing it."
+                onChange={(e) =>
+                  onTypingVisibilityChange(e.target.value as TypingVisibility)
+                }
+                className={[
+                  // bg-background, not bg-transparent: a native <select>'s
+                  // OPTION list paints on the OS's own background, and a
+                  // transparent trigger left the closed control's text
+                  // sitting on whatever was behind it — unreadable in dark
+                  // mode, where that was the page's own dark-on-dark text.
+                  "rounded-md border border-input bg-background px-1.5 py-1 text-xs",
+                  "text-foreground focus-visible:outline-none focus-visible:ring-1",
+                  "focus-visible:ring-ring",
+                ].join(" ")}
+              >
+                <option value="live">My text</option>
+                <option value="typing">Typing…</option>
+                <option value="hidden">Nothing</option>
+              </select>
+            </label>
+          )}
           <Button
             type="button"
             size="sm"

package/src/chat/TypingRows.test.tsx

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { TypingRows } from "./TypingRows";
+import type { PeerDraft } from "./protocol";
+
+afterEach(cleanup);
+
+describe("TypingRows", () => {
+  it("renders nothing when nobody is typing", () => {
+    const { container } = render(<TypingRows peers={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("shows a peer's live words when a body is present", () => {
+    const peers: PeerDraft[] = [{ author: { id: 2, name: "Bo B" }, body: "hello there", at: null }];
+    render(<TypingRows peers={peers} />);
+    const row = screen.getByTestId("typing-row");
+    expect(row.textContent).toContain("Bo B");
+    expect(row.textContent).toContain("hello there");
+    expect(row.textContent).toContain("is typing:");
+  });
+
+  it("renders 'is typing…' with no words when the body is withheld", () => {
+    const peers: PeerDraft[] = [{ author: { id: 2, name: "Bo B" }, body: "", at: null, typing: true }];
+    render(<TypingRows peers={peers} />);
+    const row = screen.getByTestId("typing-row");
+    expect(row.textContent).toContain("Bo B");
+    expect(row.textContent).toContain("is typing…");
+    expect(row.textContent).not.toContain("is typing:");
+  });
+});