canopy-ui 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -12,6 +12,7 @@
     "./lib": "./src/lib/index.ts",
     "./ui": "./src/ui/index.ts",
     "./chat": "./src/chat/index.ts",
+    "./presence": "./src/presence/index.ts",
     "./shell": "./src/shell/index.ts",
     "./tokens": "./src/tokens/index.ts",
     "./tokens/preset.css": "./src/tokens/preset.css",
@@ -42,5 +43,7 @@
   "devDependencies": {
     "sonner": "^2.0.7"
   },
-  "files": ["src"]
+  "files": [
+    "src"
+  ]
 }

package/src/chat/ChatPanel.tsx

@@ -5,7 +5,7 @@ import type { RenderMarkdown } from "./MessageItem";
 import { ConnectionStatus } from "./ConnectionStatus";
 import { MessageList } from "./MessageList";
 import { PresenceChips } from "./PresenceChips";
-import { SendBox } from "./SendBox";
+import { SendBox, type PendingAttachment } from "./SendBox";
 import { isDraftIdle, msUntilDraftIdle } from "./drafts";
 import { useStickyBottom } from "./useStickyBottom";
 
@@ -14,7 +14,14 @@ export interface ChatPanelProps {
   connected: boolean;
   currentUserId: number;
   onSend: () => void;
-  onStop: (messageId: string) => void;
+  onStop: (messageId: string | null) => void;
+  /** A send is outstanding but no reply has begun — the turn is queued,
+   *  waiting for a runner to claim it. Keeps Stop reachable in that window. */
+  awaitingReply?: boolean;
+  /** Files staged for the next send; omit to hide attaching entirely. */
+  attachments?: PendingAttachment[];
+  onAttach?: (files: File[]) => void;
+  onRemoveAttachment?: (id: string) => void;
   onUpdateDraft: (body: string) => void;
   onTakeOver: () => void;
   onDiscard: () => void;
@@ -41,6 +48,10 @@ export function ChatPanel({
   currentUserId,
   onSend,
   onStop,
+  awaitingReply = false,
+  attachments,
+  onAttach,
+  onRemoveAttachment,
   onUpdateDraft,
   onTakeOver,
   onDiscard,
@@ -124,9 +135,10 @@ export function ChatPanel({
       </div>
       <SendBox
         draft={state.active_draft}
+        connected={connected}
         currentUserId={currentUserId}
         holderIsPresent={holderIsPresent}
-        isStreaming={inFlightMessage != null}
+        isStreaming={inFlightMessage != null || awaitingReply}
         streamingMessageId={inFlightMessage?.id ?? null}
         onUpdate={onUpdateDraft}
         onSend={onSend}
@@ -134,6 +146,9 @@ export function ChatPanel({
         onTakeOver={onTakeOver}
         banner={banner}
         disabledReason={disabledReason}
+        attachments={attachments}
+        onAttach={onAttach}
+        onRemoveAttachment={onRemoveAttachment}
       />
     </div>
   );

package/src/chat/MessageList.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState, type ReactNode } from "react";
-import { ChevronsDownUp, ChevronsUpDown } from "lucide-react";
+import { ChevronRight, ChevronsDownUp, ChevronsUpDown, Loader2 } from "lucide-react";
 
 import type { Message } from "./protocol";
 import { Button } from "../ui/button";
@@ -7,6 +7,7 @@ import type { RenderMarkdown } from "./MessageItem";
 import { MessageItem } from "./MessageItem";
 import { ToolCallPair } from "./ToolCallPair";
 import { pairToolMessages } from "./pairToolMessages";
+import { groupToolRuns, runHasError, runIsActive, summariseRun } from "./groupToolRuns";
 
 interface Props {
   messages: Message[];
@@ -22,10 +23,14 @@ const TOOLBAR_THRESHOLD = 5;
 type BulkState = "default" | "all" | "none";
 
 export function MessageList({ messages, emptyState, renderMarkdown }: Props) {
-  const rows = useMemo(() => pairToolMessages(messages), [messages]);
+  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
+  // the screen.
+  const rows = useMemo(() => groupToolRuns(paired), [paired]);
   const toolPairCount = useMemo(
-    () => rows.filter((r) => r.kind === "tool_pair").length,
-    [rows],
+    () => paired.filter((r) => r.kind === "tool_pair").length,
+    [paired],
   );
   // ``default`` = each <details> uses its own native state (collapsed
   // initially, user can toggle individually). The bulk toggles flip
@@ -70,6 +75,51 @@ export function MessageList({ messages, emptyState, renderMarkdown }: Props) {
       )}
       <div className="flex flex-col gap-2 p-4">
         {rows.map((row) => {
+          if (row.kind === "tool_run") {
+            // One line for a whole run, open on demand. `open` when the bulk
+            // toggle says so, and always when something in it failed — a
+            // collapsed group must never hide an error.
+            const failed = runHasError(row.rows);
+            // A run with a call still in flight must say so: collapsed, an agent
+            // mid-task would otherwise look idle.
+            const active = runIsActive(row.rows);
+            return (
+              <details
+                key={row.key}
+                open={forceToolOpen ?? (failed || undefined)}
+                className="group my-1 rounded border border-border bg-muted/40 text-sm"
+              >
+                <summary className="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-muted-foreground hover:bg-muted/60 select-none [&::-webkit-details-marker]:hidden">
+                  <ChevronRight className="h-3 w-3 shrink-0 transition-transform group-open:rotate-90" />
+                  <span className="text-xs font-medium text-foreground">
+                    {summariseRun(row.rows)}
+                  </span>
+                  {active && (
+                    <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <Loader2 className="h-3 w-3 animate-spin" /> running
+                    </span>
+                  )}
+                  {failed && (
+                    <span className="text-xs font-medium text-destructive">
+                      · contains an error
+                    </span>
+                  )}
+                </summary>
+                <div className="space-y-1 border-t border-border/60 p-2">
+                  {row.rows.map((r) =>
+                    r.kind === "tool_pair" ? (
+                      <ToolCallPair
+                        key={r.key}
+                        use={r.use}
+                        result={r.result}
+                        forceOpen={forceToolOpen}
+                      />
+                    ) : null,
+                  )}
+                </div>
+              </details>
+            );
+          }
           if (row.kind === "tool_pair") {
             return (
               <ToolCallPair

package/src/chat/SendBox.test.tsx

@@ -0,0 +1,359 @@
+/**
+ * The composer is LOCAL-FIRST: what you are typing is local component state,
+ * never server state.
+ *
+ * It used to render `value={draft.body}` straight off the websocket reducer, so
+ * every inbound frame was a chance to overwrite the user mid-keystroke — and in
+ * SINGLE-PLAYER that trade bought nothing, because there is no co-editor to
+ * reconcile with. Three ways it went wrong, all reproduced below:
+ *   * `session.state` replaces state wholesale on every reconnect, reverting
+ *     anything typed since the last 150ms flush;
+ *   * a stale echo of your OWN debounced update rewound the textarea;
+ *   * two clients on one account (phone + desktop, which this app encourages)
+ *     fight over the draft version until a mismatch clears the pending body.
+ */
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, fireEvent } from "@testing-library/react";
+
+import { SendBox } from "./SendBox";
+import type { Draft } from "./protocol";
+
+afterEach(cleanup);
+
+const ME = 1;
+const THEM = 2;
+
+function draft(overrides: Partial<Draft> = {}): Draft {
+  return {
+    id: "d1",
+    body: "",
+    version: 1,
+    last_editor: ME,
+    last_edit_at: new Date().toISOString(),
+    ...overrides,
+  } as Draft;
+}
+
+function setup(props: Partial<Parameters<typeof SendBox>[0]> = {}) {
+  const onUpdate = vi.fn();
+  const onSend = vi.fn();
+  const view = render(
+    <SendBox
+      draft={draft()}
+      connected
+      currentUserId={ME}
+      holderIsPresent={false}
+      isStreaming={false}
+      streamingMessageId={null}
+      onUpdate={onUpdate}
+      onSend={onSend}
+      onStop={vi.fn()}
+      onTakeOver={vi.fn()}
+      {...props}
+    />,
+  );
+  const textarea = () => screen.getByRole("textbox") as HTMLTextAreaElement;
+  return { ...view, textarea, onUpdate, onSend };
+}
+
+describe("SendBox — local-first composer", () => {
+  it("keeps what you typed when a stale echo of your own draft arrives", () => {
+    const { textarea, rerender } = setup();
+    fireEvent.change(textarea(), { target: { value: "hello wor" } });
+
+    // The server echoes the previous debounced update back at us.
+    rerender(
+      <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()}
+      />,
+    );
+
+    expect(textarea().value).toBe("hello wor");
+  });
+
+  it("survives a reconnect snapshot carrying a stale body", () => {
+    // session.state replaces the whole state object, so this is exactly what a
+    // reconnect looked like: everything typed since the last flush, gone.
+    const { textarea, rerender } = setup();
+    fireEvent.change(textarea(), { target: { value: "a long message" } });
+
+    rerender(
+      <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.
+    const { textarea, rerender } = setup();
+
+    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");
+  });
+
+  it("still reports every keystroke upstream", () => {
+    // Local-first governs what is DISPLAYED; the hook still needs the body so
+    // it can sync (multiplayer) and flush before chat.send commits the
+    // server-side draft.
+    const { textarea, onUpdate } = setup();
+    fireEvent.change(textarea(), { target: { value: "hi" } });
+    expect(onUpdate).toHaveBeenCalledWith("hi");
+  });
+
+  it("lets you type before the draft has arrived", () => {
+    // The textarea used to be disabled until session.state landed, so every
+    // reconnect locked you out of your own composer.
+    const { textarea } = setup({ draft: null });
+    expect(textarea().disabled).toBe(false);
+
+    fireEvent.change(textarea(), { target: { value: "typed while connecting" } });
+    expect(textarea().value).toBe("typed while connecting");
+  });
+
+  it("cannot send until a draft exists, since chat.send commits the server copy", () => {
+    const { textarea } = setup({ draft: null });
+    fireEvent.change(textarea(), { target: { value: "hi" } });
+    expect(screen.getByRole("button", { name: /send/i }).hasAttribute("disabled")).toBe(true);
+  });
+
+  it("clears the composer when you send", () => {
+    const { textarea, onSend } = setup();
+    fireEvent.change(textarea(), { target: { value: "ship it" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /send/i }));
+
+    expect(onSend).toHaveBeenCalled();
+    expect(textarea().value).toBe("");
+  });
+
+  it("still blocks editing while a teammate holds the draft", () => {
+    const { textarea } = setup({
+      draft: draft({ last_editor: THEM, body: "theirs" }),
+      holderIsPresent: true,
+    });
+    expect(textarea().disabled).toBe(true);
+  });
+});
+
+describe("SendBox — sending is gated on the socket", () => {
+  it("keeps your text instead of clearing it when the socket is down", () => {
+    // The composer clears optimistically, and the hook's send() silently drops
+    // every frame but chat.stop while closed — so an allowed send here would
+    // empty the box and lose the message.
+    const { textarea, onSend } = setup({ connected: false });
+    fireEvent.change(textarea(), { target: { value: "do not lose me" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /send/i }));
+
+    expect(onSend).not.toHaveBeenCalled();
+    expect(textarea().value).toBe("do not lose me");
+  });
+
+  it("still lets you type while disconnected", () => {
+    const { textarea } = setup({ connected: false });
+    fireEvent.change(textarea(), { target: { value: "composed offline" } });
+    expect(textarea().disabled).toBe(false);
+    expect(textarea().value).toBe("composed offline");
+  });
+});
+
+describe("SendBox — cancelling a queued turn", () => {
+  it("offers stop while a send is outstanding, before any reply exists", () => {
+    // The gap this closes: between send and the first token there is NO
+    // assistant message, so `inFlightMessage` is null and the stop button never
+    // rendered — exactly the window where you most want out, because a queued
+    // turn means no runner has picked it up (offline, or busy with another).
+    // The server has always handled it: chat.stop cancels every non-terminal
+    // turn and ignores message_id.
+    const onStop = vi.fn();
+    render(
+      <SendBox
+        draft={draft()}
+        connected
+        currentUserId={ME}
+        holderIsPresent={false}
+        isStreaming
+        streamingMessageId={null}
+        onUpdate={vi.fn()}
+        onSend={vi.fn()}
+        onStop={onStop}
+        onTakeOver={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /stop/i }));
+
+    expect(onStop).toHaveBeenCalledWith(null);
+  });
+
+  it("passes the message id through once a reply is streaming", () => {
+    const onStop = vi.fn();
+    render(
+      <SendBox
+        draft={draft()}
+        connected
+        currentUserId={ME}
+        holderIsPresent={false}
+        isStreaming
+        streamingMessageId="m1"
+        onUpdate={vi.fn()}
+        onSend={vi.fn()}
+        onStop={onStop}
+        onTakeOver={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /stop/i }));
+
+    expect(onStop).toHaveBeenCalledWith("m1");
+  });
+});
+
+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", () => {
+    // The kit must stay usable by a host with no upload endpoint.
+    render(<SendBox {...attachProps} />);
+    expect(screen.queryByRole("button", { name: /attach/i })).toBeNull();
+  });
+
+  it("hands picked files to the host", () => {
+    const onAttach = vi.fn();
+    render(<SendBox {...attachProps} onAttach={onAttach} />);
+
+    const input = screen.getByTestId("attachment-input") as HTMLInputElement;
+    const file = new File(["x"], "shot.png", { type: "image/png" });
+    fireEvent.change(input, { target: { files: [file] } });
+
+    expect(onAttach).toHaveBeenCalledWith([file]);
+  });
+
+  it("takes a pasted screenshot", () => {
+    // The point on desktop: a screenshot is already on the clipboard, and
+    // making people save it to disk first is most of the friction.
+    const onAttach = vi.fn();
+    render(<SendBox {...attachProps} onAttach={onAttach} />);
+
+    const file = new File(["x"], "clip.png", { type: "image/png" });
+    fireEvent.paste(screen.getByRole("textbox"), { clipboardData: { files: [file] } });
+
+    expect(onAttach).toHaveBeenCalledWith([file]);
+  });
+
+  it("renders a chip per staged file, and marks one still uploading", () => {
+    render(
+      <SendBox
+        {...attachProps}
+        onAttach={vi.fn()}
+        attachments={[
+          { id: "a1", filename: "done.png" },
+          { id: "a2", filename: "slow.png", uploading: true },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("done.png")).toBeTruthy();
+    expect(screen.getByText("slow.png")).toBeTruthy();
+    expect(screen.getByText(/uploading/)).toBeTruthy();
+  });
+
+  it("cannot remove a chip that is still uploading", () => {
+    // There is no server-side id to remove yet.
+    render(
+      <SendBox
+        {...attachProps}
+        onAttach={vi.fn()}
+        onRemoveAttachment={vi.fn()}
+        attachments={[{ id: "a2", filename: "slow.png", uploading: true }]}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /remove slow.png/i })).toBeNull();
+  });
+
+  it("removes a staged file on request", () => {
+    const onRemoveAttachment = vi.fn();
+    render(
+      <SendBox
+        {...attachProps}
+        onAttach={vi.fn()}
+        onRemoveAttachment={onRemoveAttachment}
+        attachments={[{ id: "a1", filename: "done.png" }]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /remove done.png/i }));
+    expect(onRemoveAttachment).toHaveBeenCalledWith("a1");
+  });
+
+  it("shows why an upload failed instead of dropping it silently", () => {
+    render(
+      <SendBox
+        {...attachProps}
+        onAttach={vi.fn()}
+        attachments={[{ id: "a3", filename: "huge.png", error: "file is larger than the 10MB limit" }]}
+      />,
+    );
+    expect(screen.getByText(/10MB limit/)).toBeTruthy();
+  });
+
+  it("does not offer attaching while a teammate holds the draft", () => {
+    render(
+      <SendBox
+        {...attachProps}
+        draft={draft({ last_editor: THEM })}
+        holderIsPresent
+        onAttach={vi.fn()}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /attach/i })).toBeNull();
+  });
+});