canopy-ui 0.6.2 → 0.7.0

package/src/chat/MessageList.tsx

@@ -4,7 +4,7 @@ import { ChevronRight, ChevronsDownUp, ChevronsUpDown, Loader2 } from "lucide-re
 import type { Message } from "./protocol";
 import { Button } from "../ui/button";
 import type { RenderMarkdown } from "./MessageItem";
-import { MessageItem } from "./MessageItem";
+import { MessageItem, ThinkingIndicator } from "./MessageItem";
 import { ToolCallPair } from "./ToolCallPair";
 import { pairToolMessages } from "./pairToolMessages";
 import { groupToolRuns, runHasError, runIsActive, summariseRun } from "./groupToolRuns";
@@ -14,6 +14,20 @@ interface Props {
   /** Rendered when there are no messages yet (replaces ace's WelcomePanel). */
   emptyState?: ReactNode;
   renderMarkdown?: RenderMarkdown;
+  /**
+   * The agent has the floor but has produced no row yet — render a trailing
+   * "thinking" bubble at the bottom of the conversation.
+   *
+   * A trailing ELEMENT, not a row spliced into `messages`: the message array is
+   * a projection of the durable record and must keep exactly one writer, and a
+   * placeholder with a made-up id would need upsert/eviction rules against every
+   * frame that can follow it. This has none — it is on screen while the flag is
+   * true and gone when it isn't.
+   */
+  pendingReply?: boolean;
+  /** Wording for that bubble — the caller knows whether the turn is still
+   *  queued for a runner or the agent is actually working. */
+  pendingLabel?: string;
 }
 
 // Show the bulk expand/collapse toolbar once a session has more than this
@@ -22,7 +36,13 @@ const TOOLBAR_THRESHOLD = 5;
 
 type BulkState = "default" | "all" | "none";
 
-export function MessageList({ messages, emptyState, renderMarkdown }: Props) {
+export function MessageList({
+  messages,
+  emptyState,
+  renderMarkdown,
+  pendingReply = false,
+  pendingLabel,
+}: Props) {
   const paired = useMemo(() => pairToolMessages(messages), [messages]);
   // Collapse back-to-back tool calls into one row. An agent mid-task emits long
   // stretches of them, and one row each pushes the prose you actually read off
@@ -38,7 +58,7 @@ export function MessageList({ messages, emptyState, renderMarkdown }: Props) {
   // control back to per-row state.
   const [bulkState, setBulkState] = useState<BulkState>("default");
 
-  if (messages.length === 0) {
+  if (messages.length === 0 && !pendingReply) {
     return <>{emptyState ?? null}</>;
   }
   const forceToolOpen =
@@ -139,6 +159,15 @@ export function MessageList({ messages, emptyState, renderMarkdown }: Props) {
             />
           );
         })}
+        {pendingReply && (
+          <div
+            data-testid="pending-reply"
+            aria-live="polite"
+            className="my-2 mr-auto max-w-[80%] rounded-2xl bg-muted px-4 py-2 text-foreground"
+          >
+            <ThinkingIndicator label={pendingLabel} />
+          </div>
+        )}
       </div>
     </div>
   );

package/src/chat/PlacementBanner.test.tsx

@@ -94,6 +94,81 @@ describe("PlacementBanner", () => {
     expect(screen.getByText("Could not place the turn.")).toBeTruthy();
   });
 
+  it("names a pause as a pause, with the reason it was given", () => {
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        paused
+        pausedNote="token limit on this account"
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Laptop is paused")).toBeTruthy();
+    // The note is what tells you whether resuming is actually safe.
+    expect(screen.getByText("— token limit on this account")).toBeTruthy();
+  });
+
+  it("offers Resume when the viewer can un-park the runner", () => {
+    const onResume = vi.fn();
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        paused
+        onResume={onResume}
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Resume"));
+    expect(onResume).toHaveBeenCalledTimes(1);
+  });
+
+  it("omits Resume when no handler is given — only the pairer may resume", () => {
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        paused
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    // A button that 404s reads as the runner refusing to come back.
+    expect(screen.queryByText("Resume")).toBeNull();
+  });
+
+  it("keeps waiting reachable but demoted below the acting exits", () => {
+    // Waiting leaves the message QUEUED until the box returns — real for a
+    // reboot, wrong as a default. It stays a button (role, disabled state,
+    // accessible name) but is styled as a link rather than a peer action.
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        paused
+        onResume={vi.fn()}
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    const wait = screen.getByText("Wait for it") as HTMLButtonElement;
+    expect(wait.tagName).toBe("BUTTON");
+    expect(wait.className).toContain("underline");
+    expect(wait.className).not.toContain("border");
+    // Resume comes first in reading order — the fix before the deferral.
+    expect(
+      screen.getByText("Resume").compareDocumentPosition(wait) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
   it("renders error and info distinctly styled when both are present", () => {
     render(
       <PlacementBanner

package/src/chat/PlacementBanner.tsx

@@ -24,15 +24,32 @@ export interface PlacementBannerProps {
   onWait: () => void;
   /** Re-place the turn onto the given runner id. */
   onPlace: (runnerId: string) => void;
+  /** True when the runner is PARKED rather than gone — a decision someone made,
+   *  which someone can therefore undo. Changes the headline and, with `onResume`,
+   *  puts the one-tap fix first. */
+  paused?: boolean;
+  /** The reason recorded at pause time, shown so the reader can judge whether
+   *  resuming is safe (e.g. "token limit on this account" usually is not). */
+  pausedNote?: string;
+  /** Un-park the runner in place. Omit when the viewer cannot — only the human
+   *  who paired a runner may pause or resume it, so offering this to anyone else
+   *  would render a button that 404s. */
+  onResume?: () => void;
 }
 
 /**
- * Offline-runner placement banner: the chat session's bound runner has gone
- * unavailable, and the user must decide whether to wait for it or continue
- * on a different session-capable runner. Presentational only — NO fetch, NO
- * WS. The container (canopy's ChatPage) owns the fleet poll, the derived
- * eligible-runner list, and the placement POST; this component just renders
- * the decision and forwards the pick.
+ * Offline-runner placement banner: the chat session's bound runner cannot act,
+ * and the user must get it acting again — resume it, or continue on a different
+ * session-capable runner. Presentational only — NO fetch, NO WS. The container
+ * (canopy's ChatPage) owns the fleet poll, the derived eligible-runner list, and
+ * the placement POST; this component just renders the decision and forwards it.
+ *
+ * The actions are deliberately not peers. Waiting means your message sits QUEUED
+ * until the box returns — which, for a pause you applied yourself, may be never —
+ * and a queued send reads as a sent one right up until you notice no reply came.
+ * So the exits that make the chat WORK are buttons, and waiting is a link you
+ * have to mean. It stays reachable because a box rebooting in ninety seconds is
+ * a real case; it is just not the shape of the default.
  */
 export function PlacementBanner({
   runnerName,
@@ -42,6 +59,9 @@ export function PlacementBanner({
   info,
   onWait,
   onPlace,
+  paused = false,
+  pausedNote,
+  onResume,
 }: PlacementBannerProps) {
   // Whether the "Continue on…" picker is expanded — purely local UI state,
   // not fetch-driven, so it lives in the kit rather than round-tripping
@@ -50,15 +70,22 @@ export function PlacementBanner({
 
   return (
     <div className="flex flex-wrap items-center gap-2 border-b border-warning/30 bg-warning/10 px-4 py-2 text-[12px] text-warning">
-      <span className="font-medium">{runnerName} is unavailable</span>
-      <button
-        type="button"
-        onClick={onWait}
-        disabled={busy}
-        className="rounded-md border border-warning/40 px-2 py-0.5 text-warning hover:bg-warning/20 disabled:opacity-50"
-      >
-        Wait for it
-      </button>
+      <span className="font-medium">
+        {runnerName} is {paused ? "paused" : "unavailable"}
+      </span>
+      {paused && pausedNote && (
+        <span className="text-warning/80">— {pausedNote}</span>
+      )}
+      {onResume && (
+        <button
+          type="button"
+          onClick={onResume}
+          disabled={busy}
+          className="rounded-md border border-warning/40 bg-warning/20 px-2 py-0.5 font-medium text-warning hover:bg-warning/30 disabled:opacity-50"
+        >
+          Resume
+        </button>
+      )}
       <button
         type="button"
         onClick={() => setShowPicker((v) => !v)}
@@ -85,6 +112,16 @@ export function PlacementBanner({
           ))}
         </select>
       )}
+      {/* Demoted, not removed — see the component doc. Still a <button> so it
+          keeps its role, its disabled state and its accessible name. */}
+      <button
+        type="button"
+        onClick={onWait}
+        disabled={busy}
+        className="ml-auto text-warning/70 underline underline-offset-2 hover:text-warning disabled:opacity-50"
+      >
+        Wait for it
+      </button>
       {error && <span className="text-destructive">{error}</span>}
       {info && <span className="text-muted-foreground">{info}</span>}
     </div>

package/src/chat/PresenceChips.tsx

@@ -5,42 +5,136 @@ interface Props {
   presenceUserIds: number[];
   draftHolderId: number | null;
   draftHolderIdle: boolean;
+  /** Who is looking. Required so the row can exclude YOU.
+   *
+   *  Without it this rendered your own chip and the empty state said "nobody
+   *  else here" — copy and logic disagreeing about whether "else" meant
+   *  anything. In practice the empty state was unreachable: alone in a session
+   *  you saw one chip, which is indistinguishable from being watched by a
+   *  stranger. ChatPanel had `currentUserId` the whole time and never passed
+   *  it. Caught by the first two-browser e2e this surface ever had. */
+  currentUserId: number;
 }
 
+/** A stable colour per person, so two people are told apart at a glance.
+ *
+ *  Every chip used to be `bg-muted`, which meant identity rested entirely on
+ *  two initials — and initials collide constantly on a small team (two J.K.s
+ *  render identically). Hue is derived from the user id so a given person is
+ *  the same colour in every session, for everyone, with no state to keep. */
+const PALETTE = [
+  "bg-sky-500/20 text-sky-700 dark:text-sky-200 ring-sky-500/40",
+  "bg-emerald-500/20 text-emerald-700 dark:text-emerald-200 ring-emerald-500/40",
+  "bg-violet-500/20 text-violet-700 dark:text-violet-200 ring-violet-500/40",
+  "bg-amber-500/20 text-amber-700 dark:text-amber-200 ring-amber-500/40",
+  "bg-rose-500/20 text-rose-700 dark:text-rose-200 ring-rose-500/40",
+  "bg-teal-500/20 text-teal-700 dark:text-teal-200 ring-teal-500/40",
+];
+
+const colorFor = (userId: number) => PALETTE[Math.abs(userId) % PALETTE.length];
+
+/** How many faces before collapsing into "+N". Beyond a handful the row stops
+ *  being a glance and starts being a list, and it shares a thin header bar. */
+const MAX_FACES = 4;
+
 export function PresenceChips({
   participants,
   presenceUserIds,
   draftHolderId,
   draftHolderIdle,
+  currentUserId,
 }: Props) {
-  const present = participants.filter((p) =>
-    presenceUserIds.includes(p.user_id),
+  const present = participants.filter(
+    (p) => presenceUserIds.includes(p.user_id) && p.user_id !== currentUserId,
   );
+
   if (present.length === 0) {
-    return <div className="text-sm text-muted-foreground">nobody else here</div>;
+    return (
+      <div
+        className="text-xs text-muted-foreground"
+        data-testid="presence-empty"
+      >
+        just you
+      </div>
+    );
   }
+
+  const editor = present.find(
+    (p) => p.user_id === draftHolderId && !draftHolderIdle,
+  );
+  const faces = present.slice(0, MAX_FACES);
+  const overflow = present.length - faces.length;
+
   return (
-    <div className="flex gap-2">
-      {present.map((p) => {
-        const isHolder = p.user_id === draftHolderId && !draftHolderIdle;
-        return (
-          <div
-            key={p.user_id}
-            title={p.display_name + (isHolder ? " — editing…" : "")}
-            className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium ${
-              isHolder
-                ? "bg-primary text-primary-foreground ring-2 ring-primary/30"
-                : "bg-muted text-muted-foreground"
-            }`}
+    <div className="flex items-center gap-2" data-testid="presence-chips">
+      {/* The one thing worth WORDS rather than a ring: somebody is typing into
+          the box you share, and the old UI said so only in a `title` tooltip —
+          invisible on touch, invisible to a screen reader, and invisible to
+          anyone not hovering the exact 28px circle. */}
+      {editor && (
+        <span
+          className="hidden items-center gap-1 text-xs text-muted-foreground sm:flex"
+          data-testid="presence-editing-label"
+        >
+          <span className="relative flex h-1.5 w-1.5" 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>
+          {firstName(editor.display_name)} is typing…
+        </span>
+      )}
+      <ul
+        className="flex items-center -space-x-1.5"
+        aria-label={describe(present, editor)}
+        data-testid="presence-list"
+      >
+        {faces.map((p) => {
+          const isEditor = p.user_id === editor?.user_id;
+          return (
+            <li
+              key={p.user_id}
+              data-testid="presence-chip"
+              data-user-id={p.user_id}
+              data-editing={isEditor ? "true" : "false"}
+              title={p.display_name + (isEditor ? " — editing…" : "")}
+              className={[
+                "flex h-7 w-7 items-center justify-center rounded-full",
+                "text-[11px] font-semibold ring-2 ring-background",
+                "transition-transform hover:z-10 hover:scale-110",
+                colorFor(p.user_id),
+                isEditor ? "z-10 !ring-primary" : "",
+              ].join(" ")}
+            >
+              {initials(p.display_name)}
+            </li>
+          );
+        })}
+        {overflow > 0 && (
+          <li
+            data-testid="presence-overflow"
+            title={present.slice(MAX_FACES).map((p) => p.display_name).join(", ")}
+            className="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-[11px] font-semibold text-muted-foreground ring-2 ring-background"
           >
-            {initials(p.display_name)}
-          </div>
-        );
-      })}
+            +{overflow}
+          </li>
+        )}
+      </ul>
     </div>
   );
 }
 
+/** The accessible name for the row — the same fact the faces carry, in words.
+ *  A row of coloured circles is meaningless without this. */
+function describe(present: Participant[], editor?: Participant): string {
+  const names = present.map((p) => p.display_name).join(", ");
+  const who = present.length === 1 ? "1 other person here" : `${present.length} other people here`;
+  return editor ? `${who}: ${names}. ${editor.display_name} is editing.` : `${who}: ${names}`;
+}
+
+function firstName(name: string): string {
+  return name.trim().split(/\s+/)[0] || name;
+}
+
 function initials(name: string): string {
   return name
     .split(" ")

package/src/chat/SendBox.test.tsx

@@ -357,3 +357,154 @@ describe("SendBox — attaching files", () => {
     expect(screen.queryByRole("button", { name: /attach/i })).toBeNull();
   });
 });
+
+/**
+ * A half-typed message must survive leaving the page.
+ *
+ * It lives nowhere but this component's state: single-player never mirrors the
+ * body to the server (drafts.shouldSyncDraftLive), and the adopt rule above
+ * deliberately ignores our OWN server draft — so an unmount used to destroy the
+ * only copy. `persistKey` gives it somewhere to land.
+ */
+describe("SendBox — draft persistence across unmount", () => {
+  function fakeStorage(seed: Record<string, string> = {}) {
+    const map = new Map(Object.entries(seed));
+    return {
+      map,
+      getItem: (k: string) => map.get(k) ?? null,
+      setItem: (k: string, v: string) => void map.set(k, v),
+      removeItem: (k: string) => void map.delete(k),
+    };
+  }
+
+  function mount(
+    storage: ReturnType<typeof fakeStorage>,
+    props: Partial<Parameters<typeof SendBox>[0]> = {},
+  ) {
+    return render(
+      <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}
+      />,
+    );
+  }
+
+  const box = () => screen.getByRole("textbox") as HTMLTextAreaElement;
+
+  it("restores what was typed after unmounting and mounting again", () => {
+    const storage = fakeStorage();
+    const first = mount(storage);
+    fireEvent.change(box(), { target: { value: "the thing I was saying" } });
+    first.unmount();
+
+    mount(storage);
+    expect(box().value).toBe("the thing I was saying");
+  });
+
+  it("comes back empty once the message has been sent", () => {
+    const storage = fakeStorage();
+    const onSend = vi.fn();
+    const first = mount(storage, { onSend });
+    fireEvent.change(box(), { target: { value: "shipping it" } });
+    fireEvent.click(screen.getByRole("button", { name: /^send$/i }));
+    expect(onSend).toHaveBeenCalled();
+    first.unmount();
+
+    mount(storage);
+    expect(box().value).toBe("");
+  });
+
+  it("does not carry one session's text into another", () => {
+    const storage = fakeStorage();
+    const first = mount(storage, { persistKey: "sess-1" });
+    fireEvent.change(box(), { target: { value: "for session one" } });
+    first.unmount();
+
+    mount(storage, { persistKey: "sess-2" });
+    expect(box().value).toBe("");
+  });
+
+  it("follows the key when the panel swaps sessions without remounting", () => {
+    const storage = fakeStorage();
+    const view = mount(storage, { persistKey: "sess-1" });
+    fireEvent.change(box(), { target: { value: "for session one" } });
+
+    view.rerender(
+      <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}
+      />,
+    );
+    expect(box().value).toBe("");
+
+    // ...and session one is still waiting where we left it.
+    view.unmount();
+    mount(storage, { persistKey: "sess-1" });
+    expect(box().value).toBe("for session one");
+  });
+
+  it("prefers the stored body over the server draft", () => {
+    // The stored one is strictly newer: it is what was in the box when we left.
+    const storage = fakeStorage();
+    const first = mount(storage, { draft: draft({ body: "from the server" }) });
+    fireEvent.change(box(), { target: { value: "what I actually typed" } });
+    first.unmount();
+
+    mount(storage, { draft: draft({ body: "from the server" }) });
+    expect(box().value).toBe("what I actually typed");
+  });
+
+  it("still shows the server draft when nothing was stored", () => {
+    mount(fakeStorage(), { draft: draft({ body: "from the server" }) });
+    expect(box().value).toBe("from the server");
+  });
+
+  it("without a persistKey, behaves exactly as it did before", () => {
+    const storage = fakeStorage();
+    const first = mount(storage, { persistKey: undefined });
+    fireEvent.change(box(), { target: { value: "nowhere to land" } });
+    first.unmount();
+    expect(storage.map.size).toBe(0);
+
+    mount(storage, { persistKey: undefined });
+    expect(box().value).toBe("");
+  });
+
+  it("keeps typing working when storage throws", () => {
+    const hostile = {
+      getItem: () => {
+        throw new Error("SecurityError");
+      },
+      setItem: () => {
+        throw new Error("SecurityError");
+      },
+      removeItem: () => {
+        throw new Error("SecurityError");
+      },
+    };
+    mount(hostile as unknown as ReturnType<typeof fakeStorage>);
+    fireEvent.change(box(), { target: { value: "still typeable" } });
+    expect(box().value).toBe("still typeable");
+  });
+});