canopy-ui 0.2.0 → 0.4.0

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "canopy-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jjackson/canopy-web.git",
+    "directory": "frontend/packages/canopy-ui"
+  },
   "exports": {
     ".": "./src/index.ts",
     "./lib": "./src/lib/index.ts",
     "./ui": "./src/ui/index.ts",
+    "./chat": "./src/chat/index.ts",
     "./shell": "./src/shell/index.ts",
     "./tokens": "./src/tokens/index.ts",
     "./tokens/preset.css": "./src/tokens/preset.css",
@@ -19,9 +25,22 @@
     "@base-ui/react": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0"
   },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "sonner": "^2.0.7"
+  },
   "files": ["src"]
 }

package/src/chat/ChatPanel.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+
+import type { SessionState } from "./protocol";
+import type { RenderMarkdown } from "./MessageItem";
+import { ConnectionStatus } from "./ConnectionStatus";
+import { MessageList } from "./MessageList";
+import { PresenceChips } from "./PresenceChips";
+import { SendBox } from "./SendBox";
+import { isDraftIdle, msUntilDraftIdle } from "./drafts";
+import { useStickyBottom } from "./useStickyBottom";
+
+export interface ChatPanelProps {
+  state: SessionState;
+  connected: boolean;
+  currentUserId: number;
+  onSend: () => void;
+  onStop: (messageId: string) => void;
+  onUpdateDraft: (body: string) => void;
+  onTakeOver: () => void;
+  onDiscard: () => void;
+  renderMarkdown?: RenderMarkdown;
+  /** Optional banner rendered above the composer. */
+  banner?: ReactNode;
+  /** Rendered when there are no messages yet. */
+  emptyState?: ReactNode;
+  /** When set, sending is disabled and this reason is shown. */
+  disabledReason?: string;
+  /** Rendered at the top of the scroll container (e.g. a "Load earlier" button / offline banner). */
+  historySlot?: ReactNode;
+}
+
+/**
+ * Presentational, app-agnostic chat surface: connection chip + presence,
+ * a sticky-bottom message list, and the composer. Props-in / callbacks-out —
+ * NO data fetching, NO WebSocket, NO CLI-auth. The container (e.g. canopy's
+ * ChatPage) wires `useSessionSocket` returns into these props.
+ */
+export function ChatPanel({
+  state,
+  connected,
+  currentUserId,
+  onSend,
+  onStop,
+  onUpdateDraft,
+  onTakeOver,
+  onDiscard,
+  renderMarkdown,
+  banner,
+  emptyState,
+  disabledReason,
+  historySlot,
+}: ChatPanelProps) {
+  // `onDiscard` is part of the public surface (co-edit teardown) even though
+  // the default composer doesn't render a discard button. Referenced to keep
+  // it wired without an unused-var error; a future toolbar can surface it.
+  void onDiscard;
+
+  // Force a re-render when the draft lock transitions from live to idle so
+  // PresenceChips' amber-highlight updates at T+2s without waiting for some
+  // unrelated event to arrive.
+  const [, forceIdleTick] = useState(0);
+  useEffect(() => {
+    const draft = state.active_draft;
+    if (!draft) return;
+    const remaining = msUntilDraftIdle(draft);
+    if (remaining === 0) return;
+    const t = window.setTimeout(() => forceIdleTick((n) => n + 1), remaining + 10);
+    return () => window.clearTimeout(t);
+  }, [state.active_draft?.last_edit_at, state.active_draft]);
+
+  const holderId = state.active_draft?.last_editor ?? null;
+  const holderIsPresent =
+    holderId != null && state.presence_user_ids.includes(holderId);
+
+  // A turn is "in flight" from the moment the assistant row appears
+  // (status=pending/streaming) until chat.stream_complete flips it to
+  // complete. Treat pending AND streaming as in-flight so the send button
+  // stays locked out and the stop button is reachable during the "waiting
+  // for first token" window.
+  const inFlightMessage = useMemo(
+    () =>
+      state.messages.find(
+        (m) => m.status === "streaming" || m.status === "pending",
+      ) ?? null,
+    [state.messages],
+  );
+
+  // Sticky-bottom scroll: dep changes on (a) new message arrival and (b)
+  // streaming text growth on the last message. length-only (cheap) instead
+  // of the full string so the effect doesn't re-run on equal characters.
+  const messages = state.messages;
+  const lastMessageLen =
+    messages.length > 0 ? messages[messages.length - 1].plaintext.length : 0;
+  const scrollDep = `${messages.length}:${lastMessageLen}`;
+  const { containerRef, onScroll } = useStickyBottom(scrollDep);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-3 border-b border-border bg-background px-3 py-1.5 text-xs">
+        <ConnectionStatus connected={connected} />
+        <div className="ml-auto">
+          <PresenceChips
+            participants={state.participants}
+            presenceUserIds={state.presence_user_ids}
+            draftHolderId={holderId}
+            draftHolderIdle={isDraftIdle(state.active_draft)}
+          />
+        </div>
+      </div>
+      {/* Pinned ABOVE the scroll container, not inside it. The container is
+          auto-scrolled to the bottom (useStickyBottom), so a slot rendered as
+          the first child of the scroll content sits above the visible area —
+          on prod the "Load full session" control on an empty runner-discovered
+          session was in the DOM but scrolled out of view and covered by the
+          header, i.e. unreachable. Pinning keeps "Load earlier"/"Load full"
+          always visible. */}
+      {historySlot}
+      <div ref={containerRef} onScroll={onScroll} className="flex-1 overflow-y-auto">
+        <MessageList
+          messages={state.messages}
+          emptyState={emptyState}
+          renderMarkdown={renderMarkdown}
+        />
+      </div>
+      <SendBox
+        draft={state.active_draft}
+        currentUserId={currentUserId}
+        holderIsPresent={holderIsPresent}
+        isStreaming={inFlightMessage != null}
+        streamingMessageId={inFlightMessage?.id ?? null}
+        onUpdate={onUpdateDraft}
+        onSend={onSend}
+        onStop={onStop}
+        onTakeOver={onTakeOver}
+        banner={banner}
+        disabledReason={disabledReason}
+      />
+    </div>
+  );
+}

package/src/chat/ConnectionStatus.tsx

@@ -0,0 +1,30 @@
+interface Props {
+  connected: boolean;
+}
+
+/**
+ * WS connection chip — "Connected" (success) or "Reconnecting…" (warning).
+ * The ace CLI-auth variant is stripped; the kit only knows about the socket.
+ */
+export function ConnectionStatus({ connected }: Props) {
+  if (!connected) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 rounded-full border border-warning/40 bg-warning/10 px-2 py-0.5 text-xs text-warning"
+        title="Trying to reconnect to the chat server."
+      >
+        <span className="h-2 w-2 animate-pulse rounded-full bg-warning" />
+        Reconnecting…
+      </span>
+    );
+  }
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-full border border-success/40 bg-success/10 px-2 py-0.5 text-xs text-success"
+      title="Connected."
+    >
+      <span className="h-2 w-2 rounded-full bg-success" />
+      Connected
+    </span>
+  );
+}

package/src/chat/MessageItem.tsx

@@ -0,0 +1,198 @@
+import type { ReactNode } from "react";
+import { AlertTriangle, ChevronRight, OctagonX } from "lucide-react";
+
+import type { Message } from "./protocol";
+import { ToolCallPair } from "./ToolCallPair";
+
+/** How to render assistant/system markdown. Injected by the app so the kit
+ *  stays free of `react-markdown`. Defaults to plain text in a <span>. */
+export type RenderMarkdown = (text: string) => ReactNode;
+
+const plainText: RenderMarkdown = (text) => (
+  <span className="whitespace-pre-wrap">{text}</span>
+);
+
+interface Props {
+  message: Message;
+  /** When set, expand/collapse this row regardless of native toggle. Lets
+   *  MessageList's toolbar drive bulk expand/collapse without having to
+   *  duplicate the rendering logic per row. */
+  forceToolOpen?: boolean;
+  renderMarkdown?: RenderMarkdown;
+}
+
+/** Count visible lines for the "▸ System context (N lines)" header. */
+function countLines(text: string): number {
+  if (!text) return 0;
+  return text.split("\n").length;
+}
+
+// The backend marks cancelled-by-user turns as status=error with
+// error_detail prefixed by "cancelled". Treat that visually as a
+// neutral "stopped" state, not a scary "error" state.
+function classifyError(detail: string | null) {
+  const text = (detail ?? "").trim();
+  if (text.toLowerCase().startsWith("cancelled")) {
+    return {
+      kind: "stopped" as const,
+      label: text.replace(/^cancelled/i, "Stopped").trim() || "Stopped",
+    };
+  }
+  return {
+    kind: "error" as const,
+    label: text || "Something went wrong",
+  };
+}
+
+export function MessageItem({
+  message,
+  forceToolOpen,
+  renderMarkdown = plainText,
+}: Props) {
+  const text = message.plaintext;
+  const isStreaming = message.status === "streaming";
+  const isPending = message.status === "pending";
+  const isError = message.status === "error";
+
+  // tool_use and tool_result rows that survived the pairing pass in
+  // MessageList didn't find a partner — render as standalone with the
+  // same component for visual consistency. The common case (paired
+  // tool_use+tool_result) is rendered by MessageList itself via
+  // ToolCallPair so we never reach here for those.
+  if (message.role === "tool_use") {
+    return <ToolCallPair use={message} result={null} forceOpen={forceToolOpen} />;
+  }
+  if (message.role === "tool_result") {
+    // Synthesize a fake "use" message so the pair component can render
+    // a uniform header. Defensive — should be rare.
+    const fakeUse: Message = {
+      ...message,
+      role: "tool_use",
+      content: { name: "tool_result (orphan)" },
+    };
+    return (
+      <ToolCallPair use={fakeUse} result={message} forceOpen={forceToolOpen} />
+    );
+  }
+
+  // System messages are seed context for the agent: load-bearing for the
+  // assistant's first response, but a wall-of-text from the human reader's
+  // POV. Render collapsed by default with a chevron header so the send box
+  // stays the focal point on session open.
+  if (message.role === "system") {
+    return (
+      <SystemSeedRow
+        message={message}
+        forceOpen={forceToolOpen}
+        renderMarkdown={renderMarkdown}
+      />
+    );
+  }
+
+  const bubbleClass =
+    message.role === "user"
+      ? "ml-auto bg-primary text-primary-foreground"
+      : "mr-auto bg-muted text-foreground";
+  // Hold the "Thinking…" treatment through the gap between
+  // chat.stream_start (status flips to "streaming") and the first
+  // chat.delta (text becomes non-empty).
+  const showThinking =
+    (isPending || isStreaming) && message.role === "assistant" && !text;
+  return (
+    <div
+      className={`my-2 max-w-[80%] rounded-2xl px-4 py-2 ${bubbleClass}`}
+      aria-live={isStreaming || isPending ? "polite" : undefined}
+    >
+      {showThinking ? (
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <span className="inline-flex gap-0.5" aria-label="thinking">
+            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]" />
+            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.15s]" />
+            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current" />
+          </span>
+          <span className="text-xs italic">Thinking…</span>
+        </span>
+      ) : message.role === "assistant" ? (
+        renderMarkdown(text)
+      ) : (
+        <div className="whitespace-pre-wrap">{text}</div>
+      )}
+      {isStreaming && text && (
+        <span className="ml-1 inline-block h-3 w-1 animate-pulse bg-current align-middle" />
+      )}
+      {isError && message.role === "assistant" && (
+        <ErrorFooter detail={message.error_detail} hasPartial={Boolean(text)} />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Collapsed-by-default rendering for a seed/system message. Uses a native
+ * <details> element so it's keyboard-accessible and screen-reader friendly.
+ * ``forceToolOpen`` (from MessageList's bulk toolbar) overrides the native
+ * state to match the surrounding tool rows.
+ */
+function SystemSeedRow({
+  message,
+  forceOpen,
+  renderMarkdown,
+}: {
+  message: Message;
+  forceOpen: boolean | undefined;
+  renderMarkdown: RenderMarkdown;
+}) {
+  const text = message.plaintext;
+  const lineCount = countLines(text);
+  const openProp = forceOpen === undefined ? undefined : forceOpen;
+  return (
+    <details
+      className="group my-2 mr-auto max-w-[80%] rounded-2xl border border-border bg-muted/40 px-3 py-1.5 text-sm"
+      data-testid="system-seed-row"
+      {...(openProp !== undefined ? { open: openProp } : {})}
+    >
+      <summary className="flex cursor-pointer items-center gap-1.5 text-muted-foreground hover:text-foreground select-none list-none [&::-webkit-details-marker]:hidden">
+        <ChevronRight className="h-3.5 w-3.5 transition-transform group-open:rotate-90" />
+        <span className="text-xs font-medium uppercase tracking-wide">
+          System context
+        </span>
+        {lineCount > 0 && (
+          <span className="text-xs text-muted-foreground/70">
+            · {lineCount} line{lineCount === 1 ? "" : "s"}
+          </span>
+        )}
+      </summary>
+      <div className="mt-2 border-t border-border/40 pt-2 text-foreground">
+        {renderMarkdown(text)}
+      </div>
+    </details>
+  );
+}
+
+function ErrorFooter({
+  detail,
+  hasPartial,
+}: {
+  detail: string | null;
+  hasPartial: boolean;
+}) {
+  const { kind, label } = classifyError(detail);
+  const isStopped = kind === "stopped";
+  // Stopped = neutral muted treatment; error = amber warning. Avoid
+  // destructive red — even a real error is recoverable (the user resends
+  // the next turn) and red bubbles reflexively read as "your chat is broken".
+  const Icon = isStopped ? OctagonX : AlertTriangle;
+  const tone = isStopped ? "text-muted-foreground" : "text-warning";
+  return (
+    <div
+      className={`mt-2 flex items-start gap-1.5 border-t border-border/40 pt-1.5 text-xs italic ${tone}`}
+      role="status"
+    >
+      <Icon className="mt-0.5 h-3 w-3 shrink-0" aria-hidden="true" />
+      <span>
+        {label}
+        {hasPartial ? " · partial response shown above" : ""}
+      </span>
+    </div>
+  );
+}

package/src/chat/MessageList.tsx

@@ -0,0 +1,95 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { ChevronsDownUp, ChevronsUpDown } from "lucide-react";
+
+import type { Message } from "./protocol";
+import { Button } from "../ui/button";
+import type { RenderMarkdown } from "./MessageItem";
+import { MessageItem } from "./MessageItem";
+import { ToolCallPair } from "./ToolCallPair";
+import { pairToolMessages } from "./pairToolMessages";
+
+interface Props {
+  messages: Message[];
+  /** Rendered when there are no messages yet (replaces ace's WelcomePanel). */
+  emptyState?: ReactNode;
+  renderMarkdown?: RenderMarkdown;
+}
+
+// Show the bulk expand/collapse toolbar once a session has more than this
+// many tool rows. Below that, the per-row toggle is enough.
+const TOOLBAR_THRESHOLD = 5;
+
+type BulkState = "default" | "all" | "none";
+
+export function MessageList({ messages, emptyState, renderMarkdown }: Props) {
+  const rows = useMemo(() => pairToolMessages(messages), [messages]);
+  const toolPairCount = useMemo(
+    () => rows.filter((r) => r.kind === "tool_pair").length,
+    [rows],
+  );
+  // ``default`` = each <details> uses its own native state (collapsed
+  // initially, user can toggle individually). The bulk toggles flip
+  // every row open or closed at once. Reverting to "default" hands
+  // control back to per-row state.
+  const [bulkState, setBulkState] = useState<BulkState>("default");
+
+  if (messages.length === 0) {
+    return <>{emptyState ?? null}</>;
+  }
+  const forceToolOpen =
+    bulkState === "all" ? true : bulkState === "none" ? false : undefined;
+
+  return (
+    <div className="flex flex-col">
+      {toolPairCount > TOOLBAR_THRESHOLD && (
+        <div className="sticky top-0 z-10 flex items-center justify-end gap-2 border-b border-border bg-background/80 px-4 py-1.5 backdrop-blur">
+          <span className="text-xs text-muted-foreground">
+            {toolPairCount} tool calls
+          </span>
+          <Button
+            variant={bulkState === "all" ? "secondary" : "ghost"}
+            size="xs"
+            onClick={() => setBulkState(bulkState === "all" ? "default" : "all")}
+            aria-pressed={bulkState === "all"}
+          >
+            <ChevronsUpDown className="h-3 w-3" />
+            Expand all
+          </Button>
+          <Button
+            variant={bulkState === "none" ? "secondary" : "ghost"}
+            size="xs"
+            onClick={() =>
+              setBulkState(bulkState === "none" ? "default" : "none")
+            }
+            aria-pressed={bulkState === "none"}
+          >
+            <ChevronsDownUp className="h-3 w-3" />
+            Collapse all
+          </Button>
+        </div>
+      )}
+      <div className="flex flex-col gap-2 p-4">
+        {rows.map((row) => {
+          if (row.kind === "tool_pair") {
+            return (
+              <ToolCallPair
+                key={row.key}
+                use={row.use}
+                result={row.result}
+                forceOpen={forceToolOpen}
+              />
+            );
+          }
+          return (
+            <MessageItem
+              key={row.key}
+              message={row.message}
+              forceToolOpen={forceToolOpen}
+              renderMarkdown={renderMarkdown}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/chat/PlacementBanner.test.tsx

@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+import { PlacementBanner, type PlacementRunner } from "./PlacementBanner";
+
+function runner(id: string, overrides: Partial<PlacementRunner> = {}): PlacementRunner {
+  return { id, name: `Runner ${id}`, online: true, ...overrides };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PlacementBanner", () => {
+  it("renders the bound-but-offline runner's name", () => {
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Laptop is unavailable")).toBeTruthy();
+  });
+
+  it("fires onPlace with the picked runner id", () => {
+    const onPlace = vi.fn();
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[runner("r1", { name: "Cloud" }), runner("r2", { name: "Backup" })]}
+        onWait={vi.fn()}
+        onPlace={onPlace}
+      />,
+    );
+
+    // The picker is collapsed until "Continue on…" is clicked.
+    expect(screen.queryByLabelText("Continue on")).toBeNull();
+    fireEvent.click(screen.getByText("Continue on…"));
+
+    const select = screen.getByLabelText("Continue on") as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: "r2" } });
+
+    expect(onPlace).toHaveBeenCalledWith("r2");
+    expect(onPlace).toHaveBeenCalledTimes(1);
+  });
+
+  it("disables both actions when busy", () => {
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[runner("r1")]}
+        busy
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    const waitButton = screen.getByText("Wait for it") as HTMLButtonElement;
+    const continueButton = screen.getByText("Continue on…") as HTMLButtonElement;
+    expect(waitButton.disabled).toBe(true);
+    expect(continueButton.disabled).toBe(true);
+  });
+
+  it("fires onWait when 'Wait for it' is clicked", () => {
+    const onWait = vi.fn();
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        onWait={onWait}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Wait for it"));
+    expect(onWait).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders an error message when provided", () => {
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        error="Could not place the turn."
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Could not place the turn.")).toBeTruthy();
+  });
+
+  it("renders error and info distinctly styled when both are present", () => {
+    render(
+      <PlacementBanner
+        runnerName="Laptop"
+        eligibleRunners={[]}
+        error="boom"
+        info="Placed."
+        onWait={vi.fn()}
+        onPlace={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Placed.").className).toContain("text-muted-foreground");
+    expect(screen.getByText("boom").className).toContain("text-destructive");
+  });
+});