canopy-ui 0.3.0 → 0.6.0

package/src/chat/PlacementBanner.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+
+/** A candidate runner the user may re-place a queued turn onto. */
+export interface PlacementRunner {
+  id: string;
+  name: string;
+  online: boolean;
+}
+
+export interface PlacementBannerProps {
+  /** The bound-but-offline runner's display name. */
+  runnerName: string;
+  /** Alternatives the user may re-place onto (the "Continue on…" picker). */
+  eligibleRunners: PlacementRunner[];
+  /** True while a placement POST is in flight — disables both actions. */
+  busy?: boolean;
+  /** A failure message to surface below the actions (e.g. "no pending
+   *  message to place"). Rendered with destructive styling. */
+  error?: string | null;
+  /** A non-failure status message (e.g. "Placed — the new runner will pick it
+   *  up shortly."). Rendered muted, visually distinct from `error`. */
+  info?: string | null;
+  /** Keep the turn queued for the bound runner to come back online. */
+  onWait: () => void;
+  /** Re-place the turn onto the given runner id. */
+  onPlace: (runnerId: string) => 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.
+ */
+export function PlacementBanner({
+  runnerName,
+  eligibleRunners,
+  busy = false,
+  error,
+  info,
+  onWait,
+  onPlace,
+}: 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
+  // through the container.
+  const [showPicker, setShowPicker] = useState(false);
+
+  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>
+      <button
+        type="button"
+        onClick={() => setShowPicker((v) => !v)}
+        disabled={busy}
+        className="rounded-md border border-warning/40 px-2 py-0.5 text-warning hover:bg-warning/20 disabled:opacity-50"
+      >
+        Continue on…
+      </button>
+      {showPicker && (
+        <select
+          defaultValue=""
+          disabled={busy}
+          onChange={(e) => onPlace(e.target.value)}
+          className="rounded-md border border-warning/40 bg-card px-1.5 py-0.5 text-[12px] text-foreground disabled:opacity-50"
+          aria-label="Continue on"
+        >
+          <option value="" disabled>
+            Choose a runner…
+          </option>
+          {eligibleRunners.map((r) => (
+            <option key={r.id} value={r.id}>
+              {r.online ? "●" : "○"} {r.name}
+            </option>
+          ))}
+        </select>
+      )}
+      {error && <span className="text-destructive">{error}</span>}
+      {info && <span className="text-muted-foreground">{info}</span>}
+    </div>
+  );
+}

package/src/chat/PresenceChips.tsx

@@ -0,0 +1,52 @@
+import type { Participant } from "./protocol";
+
+interface Props {
+  participants: Participant[];
+  presenceUserIds: number[];
+  draftHolderId: number | null;
+  draftHolderIdle: boolean;
+}
+
+export function PresenceChips({
+  participants,
+  presenceUserIds,
+  draftHolderId,
+  draftHolderIdle,
+}: Props) {
+  const present = participants.filter((p) =>
+    presenceUserIds.includes(p.user_id),
+  );
+  if (present.length === 0) {
+    return <div className="text-sm text-muted-foreground">nobody else here</div>;
+  }
+  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"
+            }`}
+          >
+            {initials(p.display_name)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function initials(name: string): string {
+  return name
+    .split(" ")
+    .map((w) => w[0])
+    .filter(Boolean)
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}

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();
+  });
+});