canopy-ui 0.7.0 → 0.9.0

package/src/chat/restMessage.ts

@@ -0,0 +1,54 @@
+/**
+ * One REST transcript row -> the kit's `Message`.
+ *
+ * This lived twice, written out by hand in both hosts that read a transcript
+ * over REST and then hand it to this kit: canopy-web's own
+ * `pages/chatPageLogic.ts` and ace-web's `canopy/CanopyChatPanel.tsx`, whose
+ * copy carried the comment "mirrors canopy-web's own
+ * `chatPageLogic.ts::restToKitMessage`" — an accurate description of a bug
+ * waiting to happen. It is a pure function OF this kit's own `Message` type
+ * against canopy's own `MessageOut` wire schema, so neither host was ever the
+ * right owner of it; both were translating between two shapes they had each
+ * imported from somewhere else.
+ *
+ * The input is declared structurally rather than as either host's generated
+ * type, because the hosts generate their own: canopy-web has
+ * `components["schemas"]["MessageOut"]`, ace-web casts an `unknown` row. Both
+ * are assignable to `RestMessage`, and a generated type's `readonly` property
+ * modifiers do not affect that.
+ */
+
+import type { Message } from "./protocol";
+
+/** canopy's `MessageOut` (apps/canopy_sessions/schemas.py), structurally. */
+export interface RestMessage {
+  turn_index: number;
+  role: string;
+  content: Record<string, unknown>;
+  plaintext: string;
+  created_at: string;
+}
+
+/**
+ * Synthetic id (`t<turn_index>`) + `status: "complete"`.
+ *
+ * `prependHistory` dedupes on `turn_index`, not on `id`, so a synthetic id can
+ * never collide with the live WS row for the same turn — which is the whole
+ * reason it is safe to invent one here. `started_at` is null because a row read
+ * back from REST has no streaming history to report; `completed_at` takes
+ * `created_at`, which is when the turn finished as far as the server records it.
+ */
+export function restToKitMessage(m: RestMessage): Message {
+  return {
+    id: `t${m.turn_index}`,
+    turn_index: m.turn_index,
+    role: m.role as Message["role"],
+    content: m.content,
+    plaintext: m.plaintext,
+    status: "complete",
+    error_detail: null,
+    started_at: null,
+    completed_at: m.created_at,
+    created_at: m.created_at,
+  };
+}

package/src/chat/useSessionSocket.protocol.test.tsx

@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSessionSocket, withAguiProtocol } from './useSessionSocket'
+
+/**
+ * What the socket REALLY opens, and what it does with what comes back.
+ *
+ * This replaced an assertion that the hook's source contained `protocol=ag-ui`.
+ * That was true the whole time the flag was being dropped: the hook put it on
+ * the PATH it handed the caller's URL builder, and two of the first three
+ * builders ignore their path. Only opening a socket and reading its URL can see
+ * that — so that is what these do.
+ */
+
+class FakeSocket {
+  static opened: FakeSocket[] = []
+  onopen: (() => void) | null = null
+  onmessage: ((e: { data: string }) => void) | null = null
+  onclose: (() => void) | null = null
+  onerror: (() => void) | null = null
+  readyState = 0
+  constructor(public url: string) {
+    FakeSocket.opened.push(this)
+  }
+  send() {}
+  close() {}
+  receive(frame: unknown) {
+    this.onmessage?.({ data: JSON.stringify(frame) })
+  }
+}
+
+beforeEach(() => {
+  FakeSocket.opened = []
+  vi.stubGlobal('WebSocket', FakeSocket)
+})
+afterEach(() => vi.unstubAllGlobals())
+
+function lastUrl(): string {
+  return FakeSocket.opened.at(-1)!.url
+}
+
+describe('the flag survives whatever URL the caller builds', () => {
+  it('with a builder that uses the path it is given', () => {
+    renderHook(() =>
+      useSessionSocket({ sessionId: 's1', wsUrl: (p) => `wss://h/${p}`, protocol: 'ag-ui' }),
+    )
+    expect(lastUrl()).toBe('wss://h/ws/canopy-sessions/s1/?protocol=ag-ui')
+  })
+
+  it('with a builder that IGNORES its path — canopy-web’s widget', () => {
+    // `() => client.sessionSocketUrl(sessionId)`: the widget's real shape.
+    renderHook(() =>
+      useSessionSocket({ sessionId: 's1', wsUrl: () => 'wss://h/ws/canopy-sessions/s1/', protocol: 'ag-ui' }),
+    )
+    expect(lastUrl()).toContain('protocol=ag-ui')
+  })
+
+  it('with a builder that carries its own token — ace-web', () => {
+    // `buildCanopyWsUrl(base, id)` puts a token in the query, so the flag has
+    // to JOIN the query rather than start a second one.
+    renderHook(() =>
+      useSessionSocket({ sessionId: 's1', wsUrl: () => 'wss://h/ws/canopy-sessions/s1/?token=abc', protocol: 'ag-ui' }),
+    )
+    expect(lastUrl()).toBe('wss://h/ws/canopy-sessions/s1/?token=abc&protocol=ag-ui')
+  })
+
+  it('asks for nothing when the caller asks for nothing', () => {
+    // The default is canopy's own frames, which is what an un-upgraded consumer
+    // must keep getting.
+    renderHook(() => useSessionSocket({ sessionId: 's1', wsUrl: () => 'wss://h/x/?token=abc' }))
+    expect(lastUrl()).toBe('wss://h/x/?token=abc')
+  })
+})
+
+describe('withAguiProtocol', () => {
+  it('does not add the flag twice', () => {
+    expect(withAguiProtocol('wss://h/x/?protocol=ag-ui')).toBe('wss://h/x/?protocol=ag-ui')
+  })
+
+  it('leaves an empty URL empty — the caller’s "not yet"', () => {
+    expect(withAguiProtocol('')).toBe('')
+  })
+})
+
+describe('a server that answers in canopy frames anyway', () => {
+  it('is understood, not decoded to nothing', () => {
+    // Asked for AG-UI, got native: an old server, or a flag lost on the way.
+    // Decoding these as AG-UI yields zero frames — a blank chat with no error.
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const onTitleUpdated = vi.fn()
+    renderHook(() =>
+      useSessionSocket({ sessionId: 's1', wsUrl: (p) => `wss://h/${p}`, protocol: 'ag-ui', onTitleUpdated }),
+    )
+
+    act(() => {
+      FakeSocket.opened.at(-1)!.receive({
+        event: 'session.title_updated',
+        data: { title: 'Still readable' },
+      })
+    })
+
+    expect(onTitleUpdated).toHaveBeenCalledTimes(1)
+    expect(warn).toHaveBeenCalledTimes(1)
+    warn.mockRestore()
+  })
+
+  it('still decodes real AG-UI events as AG-UI', () => {
+    const onTitleUpdated = vi.fn()
+    renderHook(() =>
+      useSessionSocket({ sessionId: 's1', wsUrl: (p) => `wss://h/${p}`, protocol: 'ag-ui', onTitleUpdated }),
+    )
+
+    act(() => {
+      FakeSocket.opened.at(-1)!.receive({
+        type: 'STATE_DELTA',
+        delta: [{ op: 'replace', path: '/title', value: 'Via AG-UI' }],
+      })
+    })
+
+    expect(onTitleUpdated).toHaveBeenCalledTimes(1)
+  })
+})

package/src/chat/useSessionSocket.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { fromAgui, resetAguiState } from "./agui";
 import type { Message, SessionState, WsEvent } from "./protocol";
 import { shouldSyncDraftLive } from "./drafts";
 import { prependHistory } from "./history";
@@ -32,6 +33,50 @@ export interface UseSessionSocketOptions {
    * has no opinion on what to do with it.
    */
   onTitleUpdated?: () => void;
+  /**
+   * A frame the kit does not understand.
+   *
+   * The kit stays agnostic: canopy grew `session.page_action` (an agent asking
+   * the embedded page to do something) and ace-web will grow its own. Teaching
+   * the reducer about each would make a shared kit carry one app's vocabulary.
+   * Same shape as `onTitleUpdated` — handed over, no opinion taken.
+   */
+  onUnknownEvent?: (frame: WsEvent) => void;
+  /**
+   * Which vocabulary to ask the server for.
+   *
+   * `"canopy"` (the default) is this kit's own frames, unchanged — the reason
+   * an existing consumer, including ace-web installing `canopy-ui` from npm,
+   * notices nothing. `"ag-ui"` asks the server to project the same conversation
+   * into AG-UI and translates it back here, so the reducer never learns a
+   * second vocabulary and there is one behaviour to test rather than two.
+   *
+   * Opting in buys interoperability, not features: a canopy frame and its
+   * AG-UI projection reduce to identical state (`agui.test.ts` asserts exactly
+   * that against a fixture the server generates).
+   */
+  protocol?: "canopy" | "ag-ui";
+}
+
+/**
+ * Ask for AG-UI on the URL the caller built — whatever it looks like.
+ *
+ * The hook OWNS this flag rather than handing the caller a path with it already
+ * attached, because that contract was invisible and two of the first three
+ * callers broke it: canopy-web's widget builds `client.sessionSocketUrl(id)` and
+ * ace-web builds `buildCanopyWsUrl(base, id)`, and both ignore the path they are
+ * given (they need their own token in the query). The flag was dropped, the
+ * server answered in native frames, and every one of them decoded as AG-UI to
+ * nothing — a blank chat with no error, caught only in review before it shipped.
+ *
+ * Exported for the test, which asserts on the URL a socket really opens.
+ */
+export function withAguiProtocol(url: string): string {
+  // Empty is a caller saying "no URL yet" (the widget before it has a
+  // session); decorating it would turn a deliberate no-op into a bad request.
+  if (!url) return url;
+  if (/[?&]protocol=/.test(url)) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}protocol=ag-ui`;
 }
 
 export interface UseSessionSocketResult {
@@ -51,10 +96,27 @@ export interface UseSessionSocketResult {
   lastError: string | null;
 }
 
+/**
+ * Frames `sessionReducer` understands. Anything else is handed to
+ * `onUnknownEvent` rather than dropped — the reducer ignores what it does not
+ * recognise, which silently swallows an app-specific frame and leaves the
+ * container wondering why its feature never fires.
+ *
+ * Keep in step with sessionReducer's own switch.
+ */
+const KNOWN_EVENTS = new Set([
+  "chat.delta", "chat.stream_cancelled", "chat.stream_complete",
+  "chat.stream_error", "chat.stream_start", "chat.tool_result",
+  "chat.tool_use", "chat.user_message", "session.activity", "session.error",
+  "session.menu", "session.state", "session.stop", "session.title_updated",
+]);
+
 export function useSessionSocket({
   sessionId,
   wsUrl,
   onTitleUpdated,
+  onUnknownEvent,
+  protocol = "canopy",
 }: UseSessionSocketOptions): UseSessionSocketResult {
   const [state, setState] = useState<SessionState>(INITIAL_STATE);
   const [connected, setConnected] = useState(false);
@@ -73,6 +135,14 @@ export function useSessionSocket({
   const pendingDraftBodyRef = useRef<string | null>(null);
   const closedByUserRef = useRef(false);
   const onTitleUpdatedRef = useRef(onTitleUpdated);
+  const onUnknownEventRef = useRef(onUnknownEvent);
+  // A ref, like the callbacks above: `connect` is a stable callback with empty
+  // deps, so reading the prop directly would pin whatever it was on first
+  // render — and a socket that reconnects would silently drop back to the other
+  // vocabulary mid-session.
+  const protocolRef = useRef(protocol);
+  protocolRef.current = protocol;
+  const warnedNativeRef = useRef(false);
   // Control frames that must not be lost across a reconnect (currently
   // only chat.stop). The WS-world analogue of an abortable chat transport.
   const pendingFramesRef = useRef<{ action: string; data: unknown }[]>([]);
@@ -85,6 +155,10 @@ export function useSessionSocket({
     onTitleUpdatedRef.current = onTitleUpdated;
   }, [onTitleUpdated]);
 
+  useEffect(() => {
+    onUnknownEventRef.current = onUnknownEvent;
+  }, [onUnknownEvent]);
+
   const send = useCallback((frame: { action: string; data: unknown }) => {
     const ws = socketRef.current;
     if (ws && ws.readyState === WebSocket.OPEN) {
@@ -134,12 +208,26 @@ export function useSessionSocket({
         }
       }
     }
+    // The reducer ignores anything it does not know, which silently drops an
+    // app-specific frame. Hand it over instead, so the container can act on
+    // vocabulary the shared kit deliberately does not carry.
+    if (!KNOWN_EVENTS.has(frame.event)) {
+      onUnknownEventRef.current?.(frame);
+      return;
+    }
     setState((prev) => sessionReducer(prev, frame));
   }, []);
 
   const connect = useCallback(() => {
     if (closedByUserRef.current) return;
-    const ws = new WebSocket(wsUrl(`ws/canopy-sessions/${sessionId}/`));
+    // A half-read tool call from the previous connection must not be completed
+    // by an ARGS event from this one — the ids are per-stream.
+    resetAguiState();
+    const path = `ws/canopy-sessions/${sessionId}/`;
+    const built = wsUrl(path);
+    const ws = new WebSocket(
+      protocolRef.current === "ag-ui" ? withAguiProtocol(built) : built,
+    );
     socketRef.current = ws;
 
     ws.onopen = () => {
@@ -162,8 +250,30 @@ export function useSessionSocket({
 
     ws.onmessage = (e) => {
       try {
-        const frame = JSON.parse(e.data) as WsEvent;
-        applyEvent(frame);
+        const raw = JSON.parse(e.data);
+        if (protocolRef.current === "ag-ui") {
+          // We asked for AG-UI and the server answered in canopy's own frames:
+          // a server that predates the negotiation, or a URL that lost the flag
+          // on the way (see `withAguiProtocol`). The two are unambiguous — every
+          // AG-UI event has a `type`, and no canopy frame does — so apply it as
+          // what it is. Decoding it as AG-UI yields nothing, which is a blank
+          // chat with no error: the worst possible way to find out.
+          if (typeof raw?.type !== "string" && typeof raw?.event === "string") {
+            if (!warnedNativeRef.current) {
+              warnedNativeRef.current = true;
+              console.warn(
+                "canopy-ui: asked for protocol=ag-ui but the server sent canopy frames; handling them as canopy frames.",
+              );
+            }
+            applyEvent(raw as WsEvent);
+            return;
+          }
+          // One AG-UI event can be several canopy frames (a tool call is three
+          // events) or none, so this is a fan-out rather than a rename.
+          for (const frame of fromAgui(raw)) applyEvent(frame);
+          return;
+        }
+        applyEvent(raw as WsEvent);
       } catch {
         // ignore malformed frames
       }

package/src/shell/WorkbenchNavItem.tsx

@@ -12,8 +12,10 @@ export function workbenchNavItemClass({
     variant === 'neutral'
       ? 'bg-accent border-transparent text-foreground font-medium'
       : 'bg-primary/10 border-primary/30 text-primary font-medium'
+  // `min-h-11` below `sm` is the 44px touch minimum; from `sm` up the rail keeps
+  // its original density, where the pointer is precise and vertical space is dear.
   return cn(
-    'flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors',
+    'flex min-h-11 items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors sm:min-h-0',
     active
       ? activeClass
       : 'border-transparent text-muted-foreground hover:bg-accent hover:text-foreground',

package/src/ui/button.tsx

@@ -4,6 +4,11 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/cn"
 
 const buttonVariants = cva(
+  // Every size variant sets a fixed height (default h-8, sm h-7, xs h-6), all of
+  // them below the 44px touch minimum. Rather than teach each variant about
+  // touch, the floor lives here once and lifts off at `sm`, where a pointer is
+  // precise and the density is the point.
+  "min-h-11 min-w-11 sm:min-h-0 sm:min-w-0 " +
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {

package/src/ui/input.tsx

@@ -9,7 +9,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        // Touch floor, matching Button: `h-8` is 32px, under the 44px minimum. Lifts
+        // off at `sm` so desktop density is unchanged.
+        "min-h-11 sm:min-h-0 sm:h-8 h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/src/ui/tabs.tsx

@@ -23,8 +23,17 @@ function Tabs({
   )
 }
 
+// Touch first, then shrink to the desktop density at `sm`.
+//
+// `w-fit` + a fixed `h-8` was two bugs at once on a phone: the list sized itself
+// to its content, so a fourth tab ran off the viewport with no scroll and no
+// wrap (measured on /supervisor at 375px: scrollWidth 302 vs clientWidth 293,
+// clipping "Runners"), and the height capped every trigger at 23px — roughly
+// half the 44px touch minimum, on the surface that ships as the phone PWA.
+// Below `sm` the list is now full-width and wraps; from `sm` up it is exactly
+// what it was.
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list grid w-full max-w-full grid-cols-2 items-center justify-center rounded-lg p-[3px] text-muted-foreground sm:inline-flex sm:w-fit sm:grid-cols-none group-data-horizontal/tabs:h-auto sm:group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -58,7 +67,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-0.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground-secondary focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:outline-1 focus-visible:outline-primary/40 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex min-h-11 flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-0.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-all sm:h-[calc(100%-1px)] sm:min-h-0 sm:px-2.5 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground-secondary focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:outline-1 focus-visible:outline-primary/40 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent",
         "data-active:bg-background data-active:text-foreground data-active:border-border",
         "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",