canopy-ui 0.6.3 → 0.8.0

package/src/chat/sessionReducer.ts

@@ -28,6 +28,12 @@ const UNBLOCKING_FRAMES = new Set([
 ]);
 
 export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState {
+  if (frame.event === "chat.stream_start" || frame.event === "draft.committed") {
+    // A new turn is starting, so the previous turn's stop outcome is history —
+    // leaving "your stop did not take" pinned over fresh work would be a stale
+    // warning about something the human has already moved on from.
+    prev = { ...prev, stopState: undefined };
+  }
   if (prev.activity === "blocked" && UNBLOCKING_FRAMES.has(frame.event)) {
     // Dropping the menu with the state matters as much as the state itself —
     // the dialog is gone, and buttons that answer a gone dialog send a stray
@@ -71,10 +77,33 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
     }
 
     case "session.activity":
-      // The menu is cleared unless this frame carries one: a stale dialog is
-      // worse than none, because its buttons would answer a prompt that is no
-      // longer on screen.
-      return { ...prev, activity: frame.data.state, menu: frame.data.menu };
+      // A frame that says the agent is NOT waiting retracts the menu — a stale
+      // dialog is worse than none, because its buttons would answer a prompt
+      // that is no longer on screen.
+      //
+      // A `blocked` frame that carries no menu does NOT, and that asymmetry is
+      // load-bearing. The hook path reports `blocked` without one on purpose
+      // (#510 — reading the screen stole emdash's focus), so treating a bare
+      // `blocked` as a retraction would erase every menu the snapshot and the
+      // session report supply, which is now all of them.
+      if (frame.data.state !== "blocked") {
+        return { ...prev, activity: frame.data.state, menu: undefined };
+      }
+      return { ...prev, activity: "blocked", menu: frame.data.menu ?? prev.menu };
+
+    case "session.stop":
+      // Independent of `activity` on purpose. A stop that FAILED leaves the agent
+      // working, and both facts have to be sayable at once: "it is still going"
+      // AND "your stop did not take". Collapsing them loses whichever one loses
+      // the race, and it was always the second — which is how a dead Stop button
+      // stayed invisible.
+      return { ...prev, stopState: frame.data.state };
+
+    case "session.menu":
+      // The authoritative producer: the session report re-derives the dialog
+      // from the transcript every ~10s and pushes only the edges. `null` is the
+      // retraction, and has to be honoured — somebody answered at the keyboard.
+      return { ...prev, menu: frame.data.menu ?? undefined };
 
     case "chat.user_message": {
       // Someone typed into emdash, OR into this page. Both reach here, and that
@@ -341,7 +370,23 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
     case "presence.joined": {
       const ids = new Set(prev.presence_user_ids);
       ids.add(frame.data.user_id);
-      return { ...prev, presence_user_ids: [...ids] };
+      // Adopt the joiner into `participants` too. The presence ROW renders
+      // participants filtered by presence, so an id with no matching
+      // participant is invisible — which is what made a first-time joiner
+      // unseeable by everyone already in the room until they reloaded.
+      // `participant` is optional (an older server may not send it); without
+      // it this degrades to exactly the previous behaviour rather than
+      // inventing a nameless entry.
+      const joined = frame.data.participant;
+      const known = joined
+        ? prev.participants.some((p) => p.user_id === joined.user_id)
+        : true;
+      return {
+        ...prev,
+        presence_user_ids: [...ids],
+        participants:
+          joined && !known ? [...prev.participants, joined] : prev.participants,
+      };
     }
 
     case "presence.left":

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,29 @@ 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";
 }
 
 export interface UseSessionSocketResult {
@@ -51,10 +75,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 +114,13 @@ 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;
   // 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 +133,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 +186,25 @@ 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 ws = new WebSocket(
+      wsUrl(protocolRef.current === "ag-ui" ? `${path}?protocol=ag-ui` : path),
+    );
     socketRef.current = ws;
 
     ws.onopen = () => {
@@ -162,8 +227,14 @@ 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") {
+          // 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",