@cueloop/client 0.1.0-alpha.44 → 0.1.0-alpha.46

package/src/components/PlanSheet.tsx

@@ -16,7 +16,9 @@ import {
   blockRuns,
   displayText,
   overlayMarks,
-  renderedOffsetFor,
+  renderedOffsetAtOrAfter,
+  renderedOffsetAtOrBefore,
+  safeLinkHref,
   workRangeForRendered,
   type DisplayBlock,
   type Mark,
@@ -33,6 +35,20 @@ import { FRAME_BORDER_STYLE } from "./primitives/frame";
 /** A cut block reads as removed: struck through and grayed, never red. */
 const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
 
+/** Inline-emphasis attributes, reused per run so the render loop allocates none. */
+const STRONG_ATTRIBUTES = createTextAttributes({ bold: true });
+const EM_ATTRIBUTES = createTextAttributes({ italic: true });
+const STRIKE_ATTRIBUTES = createTextAttributes({ strikethrough: true });
+const LINK_ATTRIBUTES = createTextAttributes({ underline: true });
+/** Block-level base attributes: headings read bold, blockquotes read italic. */
+const HEADING_ATTRIBUTES = createTextAttributes({ bold: true });
+const QUOTE_ATTRIBUTES = createTextAttributes({ italic: true });
+
+/** The popover toolbar card is 3 rows tall and sits flush above the marked words. */
+const POPOVER_ROWS_ABOVE = 3;
+/** Widest toolbar row ("comment · cut · actions · [x]") plus border and padding. */
+const POPOVER_TOOLBAR_COLUMNS = 33;
+
 export interface PlanSelection {
   displayIndex: number;
   start: number;
@@ -73,6 +89,13 @@ export interface PlanSheetProps {
   popover: PlanPopoverState | null;
   editOrphanCount: number;
   onLineActivate: (displayIndex: number) => void;
+  /**
+   * Fires on any mouse release inside the sheet. A drag released outside a
+   * block's text (the gutter, past a line end, a gap between blocks) never
+   * reaches a block's own handler, so this fallback lets the app still turn
+   * the finished drag's native selection into a span.
+   */
+  onSelectionRelease?: () => void;
   theme?: Theme;
 }
 
@@ -108,6 +131,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     popover,
     editOrphanCount,
     onLineActivate,
+    onSelectionRelease,
     theme,
   }: PlanSheetProps,
   handleRef,
@@ -146,9 +170,11 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       if (!renderer) return;
       const blockRef = blockRefs.current.get(span.displayIndex);
       if (!blockRef) return;
-      const renderedStart = renderedOffsetFor(blockRef.runs, span.start);
-      const renderedEnd = renderedOffsetFor(blockRef.runs, span.end - 1);
-      if (renderedStart === null || renderedEnd === null) return;
+      // a span over an emphasized word starts/ends on concealed markers with
+      // no rendered cell; snap to the visible characters inside them
+      const renderedStart = renderedOffsetAtOrAfter(blockRef.runs, span.start);
+      const renderedEnd = renderedOffsetAtOrBefore(blockRef.runs, span.end - 1);
+      if (renderedStart === null || renderedEnd === null || renderedEnd < renderedStart) return;
       const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
       const endPosition = positionOfRenderedOffset(blockRef.renderable, renderedEnd);
       renderer.startSelection(blockRef.renderable, startPosition.x, startPosition.y);
@@ -166,24 +192,43 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     },
   }));
 
-  // the popover floats above its block, anchored to the selection start; flip
-  // below when the block sits too near the viewport top to fit above it
-  const [popoverFlipBelow, setPopoverFlipBelow] = useState(false);
+  // the popover sits flush above the marked words, anchored to the
+  // selection start mapped through the wrap geometry (line + column, not the
+  // block's linear offset). It renders as the LAST child of the scrollbox in
+  // content coordinates: content coordinates are scroll-invariant so the card
+  // tracks its block, and the last sibling paints over every block it floats
+  // across. Flips below when the line sits too near the viewport top.
+  const [popoverTop, setPopoverTop] = useState(0);
   const [popoverLeft, setPopoverLeft] = useState(2);
+  // a terminal resize rewraps every block; re-run the anchor math against the
+  // new geometry instead of leaving the card at its pre-resize cell
+  const [resizeEpoch, setResizeEpoch] = useState(0);
+  useEffect(() => {
+    if (!renderer) return;
+    const onResize = (): void => setResizeEpoch((epoch) => epoch + 1);
+    renderer.on("resize", onResize);
+    return () => void renderer.off("resize", onResize);
+  }, [renderer]);
   useEffect(() => {
     if (!popover) return;
     const blockRef = blockRefs.current.get(popover.displayIndex);
     const scrollbox = scrollRef.current;
     if (!blockRef || !scrollbox) return;
-    // only the toolbar (3 rows) + gap must fit above; the dropdown flows down
-    setPopoverFlipBelow(blockRef.renderable.y - scrollbox.y < 4);
-    // left-anchor to the start of the selection: gutter width + its column
-    const startColumn =
+    const renderedStart =
       activeSpan && activeSpan.displayIndex === popover.displayIndex
-        ? (renderedOffsetFor(blockRef.runs, activeSpan.start) ?? 0)
+        ? (renderedOffsetAtOrAfter(blockRef.runs, activeSpan.start) ?? 0)
         : 0;
-    setPopoverLeft(2 + startColumn);
-  }, [popover, activeSpan, display, cursor]);
+    const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
+    const content = scrollbox.content;
+    const anchorLeft = startPosition.x - content.x;
+    const anchorTop = startPosition.y - content.y;
+    // clamp so the toolbar card never runs past the content's right edge
+    const maxLeft = Math.max(0, content.width - POPOVER_TOOLBAR_COLUMNS);
+    setPopoverLeft(Math.min(anchorLeft, maxLeft));
+    // only the toolbar (3 rows) + gap must fit above; the dropdown flows down
+    const lineViewportRow = startPosition.y - scrollbox.y;
+    setPopoverTop(anchorTop + (lineViewportRow < POPOVER_ROWS_ABOVE ? 1 : -POPOVER_ROWS_ABOVE));
+  }, [popover, activeSpan, display, cursor, resizeEpoch]);
 
   const registerBlock = (
     displayIndex: number,
@@ -235,13 +280,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
         <box
           key={displayIndex}
           id={`plan-block-${displayIndex}`}
-          // raise the block holding the popover so its overlay paints over the
-          // later blocks it floats across (siblings paint in z-index order)
-          style={{
-            flexDirection: "row",
-            marginTop: gap,
-            zIndex: popover?.displayIndex === displayIndex ? 10 : undefined,
-          }}
+          style={{ flexDirection: "row", marginTop: gap }}
         >
           <text selectable={false}>
             <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
@@ -258,31 +297,22 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
             }
             onMouseUp={() => onLineActivate(displayIndex)}
           >
-            {runs.map((run, runIndex) => (
-              <span key={runIndex} {...runStyle(run, block, tokens)}>
-                {run.text}
-              </span>
-            ))}
+            {runs.map((run, runIndex) => {
+              const url = run.role === "link" ? safeLinkHref(run.href) : undefined;
+              return (
+                <span
+                  key={runIndex}
+                  {...runStyle(run, block, tokens)}
+                  {...(url ? { link: { url } } : {})}
+                >
+                  {run.text}
+                </span>
+              );
+            })}
             {showsChangeTag(block) ? (
               <span fg={tagColor(block, tokens)}> [{tagLabel(block)}]</span>
             ) : null}
           </text>
-          {popover && popover.displayIndex === displayIndex ? (
-            // float the card over the block, centered, with a one-row gap; flip
-            // below only when there is no room above (near the viewport top)
-            <box
-              style={{
-                position: "absolute",
-                left: popoverLeft,
-                // fixed offset: the toolbar sits one row above the selection and
-                // stays put; the dropdown flows down from it, over the selection
-                top: popoverFlipBelow ? 1 : -4,
-                flexDirection: "column",
-              }}
-            >
-              <MarkerPopover {...popover} theme={theme} />
-            </box>
-          ) : null}
         </box>,
       );
     }
@@ -298,9 +328,26 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       );
     }
   }
+  if (popover) {
+    // last child on purpose: later siblings paint on top, so the floating card
+    // covers every block it overlaps regardless of scroll position
+    children.push(
+      <box
+        key="marker-popover"
+        style={{
+          position: "absolute",
+          left: popoverLeft,
+          top: popoverTop,
+          flexDirection: "column",
+        }}
+      >
+        <MarkerPopover {...popover} theme={theme} />
+      </box>,
+    );
+  }
 
   return (
-    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+    <box style={{ flexGrow: 1, flexDirection: "column" }} onMouseUp={onSelectionRelease}>
       <box
         style={{
           flexGrow: 1,
@@ -366,15 +413,25 @@ function runStyle(
 ): { fg?: string; bg?: string; attributes?: number } {
   // a cut block reads as removed: every run struck through and grayed, never red
   if (block.type === "del") return { fg: tokens.textDim, attributes: CUT_ATTRIBUTES };
+  const isHeading = block.kind === "h1" || block.kind === "h2" || block.kind === "h3";
+  const isQuote = block.kind === "quote";
+  // headings are all bold; level reads from descending brightness alone (a
+  // terminal cannot scale font size), leaving the salmon accent to annotations
   const headingFg =
     block.kind === "h1"
       ? tokens.text
-      : block.kind === "h2" || block.kind === "h3"
-        ? tokens.accent
-        : undefined;
+      : block.kind === "h2"
+        ? tokens.textMuted
+        : block.kind === "h3"
+          ? tokens.textDim
+          : undefined;
+  // block-level base: headings bold, quotes muted italic; inline roles compose on top
+  const baseFg = headingFg ?? (isQuote ? tokens.textMuted : tokens.text);
+  const baseAttributes = (isHeading ? HEADING_ATTRIBUTES : 0) | (isQuote ? QUOTE_ATTRIBUTES : 0);
+  const withBase = (roleAttributes: number): number => baseAttributes | roleAttributes;
   switch (run.role) {
     case "ins":
-      return { fg: tokens.insertedForeground };
+      return { fg: tokens.insertedForeground, attributes: baseAttributes || undefined };
     case "del":
       return { fg: tokens.deletedForeground };
     case "mark-comment":
@@ -383,7 +440,17 @@ function runStyle(
       return { fg: tokens.accentInk, bg: tokens.accent };
     case "kspan":
       return { fg: tokens.accentInk, bg: tokens.accent };
+    case "strong":
+      return { fg: baseFg, attributes: withBase(STRONG_ATTRIBUTES) };
+    case "em":
+      return { fg: baseFg, attributes: withBase(EM_ATTRIBUTES) };
+    case "code":
+      return { fg: tokens.text, bg: tokens.elevated };
+    case "strike":
+      return { fg: tokens.textMuted, attributes: withBase(STRIKE_ATTRIBUTES) };
+    case "link":
+      return { fg: tokens.blue, attributes: withBase(LINK_ATTRIBUTES) };
     default:
-      return { fg: headingFg ?? tokens.text };
+      return { fg: baseFg, attributes: baseAttributes || undefined };
   }
 }

package/src/components/PrototypeSheet.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PrototypeSheet } from "./PrototypeSheet";
+
+export const meta: StoryMeta = { title: "PrototypeSheet" };
+
+// The story renderer reports no kitty graphics, so the sheet shows its fallback.
+export const Unsupported: Story = {
+  render: () => (
+    <PrototypeSheet
+      prototypePath="/tmp/example.html"
+      quickActions={[]}
+      canComment={true}
+      onCommentElement={() => {}}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 24 },
+};

package/src/components/PrototypeSheet.tsx

@@ -0,0 +1,228 @@
+/**
+ * Prototype review surface: renders the HTML as an image and turns a click into
+ * a DOM-element selection, so the shared marker actions bar and compose card
+ * annotate an element rather than a text span.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { ImageRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import type { Theme } from "../theme";
+import { quickActionBody, type QuickAction } from "../config";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+import { MarkerPopover } from "./MarkerPopover";
+import { AnnotationCard } from "./AnnotationCard";
+import {
+  cssBoxToCell,
+  imageCellToCss,
+  launchPrototypeRenderer,
+  type PrototypeElement,
+  type PrototypeRenderer,
+  type PrototypeViewport,
+} from "../prototype-browser";
+
+export interface PrototypeSheetProps {
+  prototypePath: string;
+  quickActions: QuickAction[];
+  canComment: boolean;
+  onCommentElement: (element: PrototypeElement, body: string) => void;
+  theme?: Theme;
+}
+
+type SheetStatus = "loading" | "ready" | "unsupported" | "error";
+
+const DEFAULT_CELL_ASPECT = 2;
+const POPOVER_ROWS = 3;
+
+export function PrototypeSheet({
+  prototypePath,
+  quickActions,
+  canComment,
+  onCommentElement,
+  theme,
+}: PrototypeSheetProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
+  const imageRef = useRef<ImageRenderable | null>(null);
+  const browserRef = useRef<PrototypeRenderer | null>(null);
+  const launchedRef = useRef(false);
+  const viewportRef = useRef<PrototypeViewport>({ width: 1280, height: 800 });
+
+  const [status, setStatus] = useState<SheetStatus>("loading");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [png, setPng] = useState<Uint8Array | null>(null);
+  const [selected, setSelected] = useState<PrototypeElement | null>(null);
+  const [overlayCell, setOverlayCell] = useState<{ left: number; top: number } | null>(null);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const [composing, setComposing] = useState(false);
+  const [draftText, setDraftText] = useState("");
+
+  useEffect(() => {
+    return () => {
+      void browserRef.current?.close();
+    };
+  }, []);
+
+  const viewportFor = (columns: number, rows: number): PrototypeViewport => {
+    const resolution = renderer?.resolution ?? null;
+    const cellWidth = resolution ? resolution.width / renderer!.terminalWidth : 1;
+    const cellHeight = resolution
+      ? resolution.height / renderer!.terminalHeight
+      : DEFAULT_CELL_ASPECT;
+    return {
+      width: Math.max(320, Math.round(columns * cellWidth)),
+      height: Math.max(240, Math.round(rows * cellHeight)),
+    };
+  };
+
+  const launch = (): void => {
+    const image = imageRef.current;
+    if (launchedRef.current || !image || image.width < 1 || image.height < 1) return;
+    if (renderer?.capabilities && renderer.capabilities.kitty_graphics === false) {
+      setStatus("unsupported");
+      return;
+    }
+    launchedRef.current = true;
+    const viewport = viewportFor(image.width, image.height);
+    viewportRef.current = viewport;
+    void (async () => {
+      try {
+        const browser = await launchPrototypeRenderer({ filePath: prototypePath, viewport });
+        browserRef.current = browser;
+        setPng(await browser.screenshot());
+        setStatus("ready");
+      } catch (error) {
+        setErrorMessage(error instanceof Error ? error.message : String(error));
+        setStatus("error");
+      }
+    })();
+  };
+
+  const refresh = async (): Promise<void> => {
+    const browser = browserRef.current;
+    if (browser) setPng(await browser.screenshot());
+  };
+
+  const clearSelection = (): void => {
+    setSelected(null);
+    setOverlayCell(null);
+    setActionsOpen(false);
+    setComposing(false);
+    setDraftText("");
+    void browserRef.current
+      ?.highlight(null)
+      .then(refresh)
+      .catch(() => undefined);
+  };
+
+  const onImageMouseDown = (event: { x: number; y: number }): void => {
+    const browser = browserRef.current;
+    const image = imageRef.current;
+    if (status !== "ready" || !browser || !image) return;
+    const geometry = { x: image.x, y: image.y, width: image.width, height: image.height };
+    const cssPoint = imageCellToCss(event, geometry, viewportRef.current);
+    if (!cssPoint) return;
+    void (async () => {
+      const element = await browser.elementAt(cssPoint.x, cssPoint.y);
+      if (!element) return;
+      const cell = cssBoxToCell(element.box, geometry, viewportRef.current);
+      const topRaw = cell.row - geometry.y;
+      setSelected(element);
+      setOverlayCell({
+        left: Math.max(0, cell.column - geometry.x),
+        top: Math.max(0, topRaw < POPOVER_ROWS ? topRaw + 1 : topRaw - POPOVER_ROWS),
+      });
+      setActionsOpen(false);
+      setComposing(false);
+      await browser.highlight(element.selector);
+      await refresh();
+    })().catch((error) => {
+      setErrorMessage(error instanceof Error ? error.message : String(error));
+      setStatus("error");
+    });
+  };
+
+  const commit = (body: string): void => {
+    if (!canComment) return;
+    if (selected && body.trim()) onCommentElement(selected, body.trim());
+    clearSelection();
+  };
+
+  const overlayLeft = overlayCell?.left ?? 0;
+  const overlayTop = Math.max(0, overlayCell?.top ?? 0);
+  const overlayStyle = {
+    position: "absolute" as const,
+    left: overlayLeft,
+    top: overlayTop,
+    flexDirection: "column" as const,
+  };
+
+  return (
+    <box
+      style={{
+        flexGrow: 1,
+        flexDirection: "column",
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+      }}
+    >
+      <image
+        ref={(instance: ImageRenderable | null) => {
+          imageRef.current = instance;
+        }}
+        {...(png ? { source: png } : {})}
+        fit="fill"
+        protocol="auto"
+        style={{ flexGrow: 1 }}
+        onSizeChange={launch}
+        onMouseDown={onImageMouseDown}
+      />
+      {status !== "ready" ? (
+        <box style={{ position: "absolute", left: 2, top: 1 }}>
+          <text fg={tokens.textDim}>{statusLine(status, errorMessage)}</text>
+        </box>
+      ) : null}
+      {selected && !composing ? (
+        <box style={overlayStyle}>
+          <MarkerPopover
+            view={actionsOpen ? "actions" : "toolbar"}
+            actions={quickActions}
+            actionIndex={0}
+            canCut={false}
+            onComment={() => (canComment ? setComposing(true) : undefined)}
+            onCut={() => undefined}
+            onOpenActions={() => setActionsOpen(true)}
+            onClose={clearSelection}
+            onPickAction={(index) => commit(quickActionBody(quickActions[index]!))}
+            onBack={() => setActionsOpen(false)}
+            theme={theme}
+          />
+        </box>
+      ) : null}
+      {selected && composing ? (
+        <box style={overlayStyle}>
+          <AnnotationCard
+            kind="comment"
+            quote={selected.quote}
+            draft={{
+              text: draftText,
+              onInput: setDraftText,
+              onSave: () => commit(draftText),
+              onCancel: clearSelection,
+            }}
+            theme={theme}
+          />
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+function statusLine(status: SheetStatus, errorMessage: string): string {
+  if (status === "loading") return "rendering prototype…";
+  if (status === "unsupported")
+    return "prototype preview needs a graphics terminal (kitty or ghostty)";
+  return `prototype preview failed: ${errorMessage}`;
+}

package/src/components/ReviewRail.stories.tsx

@@ -177,8 +177,6 @@ export const SubmitConfirmOpen: Story = {
         submitConfirm={{
           verdict: "request_changes",
           summary: "",
-          annotationCount: 2,
-          blockingCount: 0,
           onInput: () => {},
           onSelectVerdict: () => {},
           onSubmit: () => {},

package/src/components/ReviewRail.tsx

@@ -75,11 +75,6 @@ export interface ReviewRailProps {
   theme?: Theme;
 }
 
-/** Forward-compatible: open annotation kinds may carry a blocking flag. */
-export function annotationBlocking(annotation: Annotation): boolean {
-  return (annotation as Annotation & { blocking?: boolean }).blocking === true;
-}
-
 export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function ReviewRail(
   {
     session,
@@ -133,15 +128,13 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
         body: annotation.body,
         isSelected: annotation.id === selectedId,
         isOrphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
-        isBlocking: annotationBlocking(annotation),
         // border-title author: a collaborator's name, "agent" for agent notes, else "me"
         author: annotation.author
           ? resolveDisplayName(annotation.author, session.participants, authorNames)
           : isAgentNote(annotation)
             ? "agent"
             : "me",
-        // own + agent notes read as salmon; a share collaborator's note as blue
-        tone: annotation.author && !isAgentNote(annotation) ? tokens.blue : tokens.accent,
+        tone: tokens.blue,
         editing:
           cardEdit && cardEdit.id === annotation.id
             ? {
@@ -296,7 +289,7 @@ function RemovalCard({
         title={title}
         contentRows={contentRows}
         borderColor={tokens.red}
-        backgroundColor={isSelected ? tokens.elevated : "transparent"}
+        backgroundColor="transparent"
         theme={theme}
       >
         {previewLines.length === 0 ? (

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -84,8 +84,8 @@ exports[`stories catalog AnnotationCard/SavedEditing renders, snapshots, and car
 "
 `;
 
-exports[`stories catalog AnnotationCard/SavedOrphanBlocking renders, snapshots, and carries its colors: AnnotationCard/SavedOrphanBlocking 1`] = `
-"╭─ COMMENT · me · BLOCKING · ORPHANED ─────────────────────────────────────────╮
+exports[`stories catalog AnnotationCard/SavedOrphan renders, snapshots, and carries its colors: AnnotationCard/SavedOrphan 1`] = `
+"╭─ COMMENT · me · ORPHANED ────────────────────────────────────────────────────╮
 │ "a removed passage"                                                          │
 │ The passage is gone.                                                         │
 ╰──────────────────────────────────────────────────────────────────────────────╯
@@ -338,8 +338,6 @@ exports[`stories catalog CompletionOverlay/FeedbackCounting renders, snapshots,
 
 exports[`stories catalog ConfirmCard/ApproveDefault renders, snapshots, and carries its colors: ConfirmCard/ApproveDefault 1`] = `
 "╭─ submit review ─────────────────────╮ 
-│ 0 annotations · 0 blocking          │ 
-│                                     │ 
 │  Comment  [Approve]  Changes        │ 
 │                                     │ 
 │ summary for the agent (optional)    │ 
@@ -351,13 +349,13 @@ exports[`stories catalog ConfirmCard/ApproveDefault renders, snapshots, and carr
                                         
                                         
                                         
+                                        
+                                        
 "
 `;
 
 exports[`stories catalog ConfirmCard/RequestChanges renders, snapshots, and carries its colors: ConfirmCard/RequestChanges 1`] = `
 "╭─ submit review ─────────────────────╮ 
-│ 3 annotations · 1 blocking          │ 
-│                                     │ 
 │  Comment   Approve  [Changes]       │ 
 │                                     │ 
 │ Tighten the steps.                  │ 
@@ -369,12 +367,13 @@ exports[`stories catalog ConfirmCard/RequestChanges renders, snapshots, and carr
                                         
                                         
                                         
+                                        
+                                        
 "
 `;
 
 exports[`stories catalog ConfirmCard/WithViewedSummary renders, snapshots, and carries its colors: ConfirmCard/WithViewedSummary 1`] = `
 "╭─ submit review ─────────────────────╮ 
-│ 1 annotations · 0 blocking          │ 
 │ 2/3 files viewed                    │ 
 │                                     │ 
 │  Comment  [Approve]  Changes        │ 
@@ -387,6 +386,7 @@ exports[`stories catalog ConfirmCard/WithViewedSummary renders, snapshots, and c
                                         
                                         
                                         
+                                        
 "
 `;
 
@@ -1121,9 +1121,9 @@ exports[`stories catalog ReviewRail/SubmitConfirmOpen renders, snapshots, and ca
                                         
                                         
                                         
+                                        
+                                        
 ╭─ submit review ───────────────╮       
-│ 2 annotations · 0 blocking    │       
-│                               │       
 │  Comment   Approve  [Changes] │       
 │                               │       
 │ summary for the agent (optiona│       
@@ -1825,5 +1825,33 @@ exports[`stories catalog theme-context/ProviderSwap renders, snapshots, and carr
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog PrototypeSheet/Unsupported renders, snapshots, and carries its colors: PrototypeSheet/Unsupported 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│                                                                              │
+│  rendering prototype…                                                        │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+│                                                                              │
+╰──────────────────────────────────────────────────────────────────────────────╯
 "
 `;

package/src/intent-dispatch.test.ts

@@ -32,6 +32,7 @@ function baseController() {
     curationItems: mock(() => []),
     restoreCuration: mock(),
     annotate: mock(),
+    annotatePrototype: mock(),
     updateAnnotation: mock(),
     removeAnnotation: mock(),
     walkStart: mock(),