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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.44",
+  "version": "0.1.0-alpha.46",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -26,16 +26,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.44",
-    "@cueloop/extension-api": "0.1.0-alpha.44",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.44",
-    "@cueloop/schema": "0.1.0-alpha.44",
+    "@cueloop/daemon": "0.1.0-alpha.46",
+    "@cueloop/extension-api": "0.1.0-alpha.46",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.46",
+    "@cueloop/schema": "0.1.0-alpha.46",
     "@opentui/core": "^0.5.2",
     "@opentui/keymap": "0.5.2",
     "@opentui/react": "^0.5.2",
     "@opentui/ssh": "0.5.2",
     "@pierre/diffs": "^1.3.5",
     "diff": "^8",
+    "puppeteer-core": "^25.8.0",
     "react": "^19.2.0"
   },
   "devDependencies": {

package/src/App.plan-review.test.tsx

@@ -87,6 +87,20 @@ function backgroundsOf(setup: Setup, needle: string): string[] {
   return backgrounds;
 }
 
+function foregroundsOf(setup: Setup, needle: string): string[] {
+  const foregrounds: string[] = [];
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!span.text.includes(needle)) continue;
+      const [red, green, blue] = span.fg.toInts();
+      foregrounds.push(
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""),
+      );
+    }
+  }
+  return foregrounds;
+}
+
 /** Move the cursor to "The daemon persists sessions to disk atomically." */
 async function toContextParagraph(setup: Setup): Promise<void> {
   await press(setup, "j");
@@ -615,9 +629,9 @@ describe("edit-exit reconciliation", () => {
 
       // Act
       // deselect the card so e reaches the editor hand-off, then edit; deselection
-      // shows as the card's selected fill (elevated) clearing to a transparent card
+      // shows as the card's quote line dropping the selection tone (blue)
       await press(setup, "escape");
-      await waitForState(setup, () => !backgroundsOf(setup, "Anchor me").includes(DARK.elevated));
+      await waitForState(setup, () => !foregroundsOf(setup, "The daemon").includes(DARK.blue));
       await press(setup, "e");
 
       // Assert

package/src/App.readonly.test.tsx

@@ -150,10 +150,10 @@ describe("observer navigation still works", () => {
     await press(setup, "n");
     await setup.renderOnce();
 
-    // Assert - focus shows as the card's bright kind-colored border (transparent
-    // fill); a selected card is the only accent-colored border in the frame
+    // Assert - focus shows as the card's blue border (transparent fill); a
+    // comment card is the only blue-bordered box in the frame
     await waitForText(setup, "COMMENT · me");
-    await waitForState(setup, () => hasBorderColor(setup, DARK.accent));
+    await waitForState(setup, () => hasBorderColor(setup, DARK.blue));
   });
 });
 

package/src/App.submit-confirm.test.tsx

@@ -87,9 +87,8 @@ describe("rail submit confirm", () => {
     // Assert
     await waitForText(setup, "submit review");
     const frame = setup.captureCharFrame();
-    // the card: title, honest counts, verdict selector, word-buttons
+    // the card: title, verdict selector, word-buttons
     expect(frame).toContain("submit review");
-    expect(frame).toContain("0 annotations · 0 blocking");
     expect(frame).toContain("[Approve]"); // nothing pending: approve default
     expect(frame).toContain(" Submit ");
     expect(frame).toContain(" Cancel ");
@@ -136,7 +135,7 @@ describe("rail submit confirm", () => {
     // Assert
     // a bare ESC settles after the parser's escape-sequence window
     const frame = await waitForTextGone(setup, "[Approve]");
-    expect(frame).not.toContain("0 annotations");
+    expect(frame).not.toContain("submit review");
     expect(frame).toContain("Submit review");
   });
 
@@ -149,10 +148,9 @@ describe("rail submit confirm", () => {
     await press(setup, "enter");
 
     // Assert
-    await waitForText(setup, "1 annotations · 0 blocking");
+    await waitForText(setup, "[Changes]"); // pending items: request changes default
     const frame = setup.captureCharFrame();
-    expect(frame).toContain("1 annotations · 0 blocking");
-    expect(frame).toContain("[Changes]"); // pending items: request changes default
+    expect(frame).toContain("submit review");
 
     // Act
     await setup.mockInput.typeText("Tighten the steps.");
@@ -183,7 +181,7 @@ describe("rail submit confirm", () => {
     await press(setup, "enter");
 
     // Assert
-    await waitForText(setup, "12 annotations · 0 blocking");
+    await waitForText(setup, "[Changes]");
     // the card is pinned outside the scrollbox; the stack stays scrolled off the top
     expect(setup.captureCharFrame()).not.toContain("note 01");
 
@@ -196,7 +194,7 @@ describe("rail submit confirm", () => {
     // Assert
     await waitForText(setup, "note 12");
     const scrolledWithCard = setup.captureCharFrame();
-    expect(scrolledWithCard).toContain("12 annotations · 0 blocking");
+    expect(scrolledWithCard).toContain("submit review");
     expect(scrolledWithCard).not.toContain("note 01");
   });
 

package/src/App.tsx

@@ -58,7 +58,8 @@ import { CLIENT_VERSION } from "./version";
 import { Breadcrumb, type BreadcrumbItem } from "./components/Breadcrumb";
 import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
 import { DiffSheet } from "./components/DiffSheet";
-import { annotationBlocking, type ReviewRailHandle } from "./components/ReviewRail";
+import { PrototypeSheet } from "./components/PrototypeSheet";
+import { type ReviewRailHandle } from "./components/ReviewRail";
 import type { AgentTerminalHandle } from "./components/agent-launcher";
 import { ReviewPanel } from "./components/ReviewPanel";
 import {
@@ -251,6 +252,7 @@ export function App({
   }, [marks]);
   const resolved = session?.status === "resolved";
   const isDiff = session?.artifact.type === "diff";
+  const isPrototype = session?.artifact.type === "prototype";
   // sort position per annotation so the rail interleaves annotation and removal
   // cards in one line-ordered stack: a diff row carries its blockIndex; a plan
   // annotation resolves to the display index it marked
@@ -853,30 +855,36 @@ export function App({
         }
       : null;
 
+  // a mouse drag leaves a native selection: turn it into a word span so the
+  // marker popover opens at the dragged range, mirroring the `v` grammar.
+  // Returns whether a native selection existed (the release ended a drag).
+  const activateSpanFromSelection = (preferredIndex?: number): boolean => {
+    if (!renderer?.hasSelection) return false;
+    // the release block re-anchors the span, so each drag replaces the last
+    const selection = planSheetRef.current?.readSelection(preferredIndex);
+    const block = selection ? display[selection.displayIndex] : undefined;
+    const span =
+      selection && block
+        ? spanFromRange(selection.displayIndex, displayText(block), selection.start, selection.end)
+        : null;
+    if (span) setMode({ type: "span", span });
+    return true;
+  };
+
   const onLineActivate = (displayIndex: number): void => {
-    // a mouse drag leaves a native selection: turn it into a word span so the
-    // marker popover opens at the dragged range, mirroring the `v` grammar
-    if (renderer?.hasSelection) {
-      // the release block re-anchors the span, so each drag replaces the last
-      const selection = planSheetRef.current?.readSelection(displayIndex);
-      const block = selection ? display[selection.displayIndex] : undefined;
-      const span =
-        selection && block
-          ? spanFromRange(
-              selection.displayIndex,
-              displayText(block),
-              selection.start,
-              selection.end,
-            )
-          : null;
-      if (span) setMode({ type: "span", span });
-      return;
-    }
+    if (activateSpanFromSelection(displayIndex)) return;
     setCursor(displayIndex);
     const annotationId = marks.get(displayIndex)?.[0]?.annotationId;
     if (annotationId) selectCardFromDocument(annotationId);
   };
 
+  // a drag released outside any block's text (the gutter, past a line end, a
+  // gap between blocks) never reaches a block handler; the sheet-level release
+  // still turns the finished drag into a span
+  const onSelectionRelease = (): void => {
+    activateSpanFromSelection();
+  };
+
   const onEditRequest = (): void => {
     // A share viewer/observer has no Edit affordance (the button is hidden), so
     // this is owner-only; stay silent rather than nag if it is ever reached.
@@ -916,8 +924,6 @@ export function App({
       ? {
           verdict: mode.verdict,
           summary: mode.summary,
-          annotationCount: reviewerAnnotations(activeSession).length,
-          blockingCount: reviewerAnnotations(activeSession).filter(annotationBlocking).length,
           // walk coverage keeps partial passes honest at the verdict
           viewedSummary:
             isDiff && activeSession.viewedPaths !== undefined
@@ -1021,7 +1027,16 @@ export function App({
           <box style={{ width: railFootprint }} />
         </box>
         <box style={{ flexGrow: 1, flexDirection: "row" }}>
-          {isDiff ? (
+          {isPrototype ? (
+            <PrototypeSheet
+              prototypePath={activeSession.artifact.meta.prototypePath ?? ""}
+              quickActions={quickActions}
+              canComment={isOwner && !resolved}
+              onCommentElement={(element, body) =>
+                controller.annotatePrototype(element.selector, element.quote, body)
+              }
+            />
+          ) : isDiff ? (
             // the sheet dims to reading-quiet colors while the wizard has focus
             <DiffSheet
               rows={rows}
@@ -1044,6 +1059,7 @@ export function App({
               popover={popoverState}
               editOrphanCount={editOrphanCount}
               onLineActivate={onLineActivate}
+              onSelectionRelease={onSelectionRelease}
             />
           )}
           <ReviewPanel
@@ -1056,7 +1072,7 @@ export function App({
               session: activeSession,
               authorNames,
               selectedId: focusedAnnotationId,
-              resolvedIds: isDiff ? null : resolvedIds,
+              resolvedIds: isDiff || isPrototype ? null : resolvedIds,
               curationItems,
               selectedCurationId,
               annotationPositions,

package/src/App.walk.test.tsx

@@ -242,7 +242,8 @@ describe("the guided walk", () => {
     await press(setup, "escape");
     await waitForTextGone(setup, "agent note");
     await press(setup, "enter");
-    await waitForText(setup, "0 annotations");
+    // nothing pending despite the note, so the confirm card defaults to approve
+    await waitForText(setup, "[Approve]");
     await press(setup, "enter");
 
     // Assert

package/src/__snapshots__/view-plan.regression.test.ts.snap

@@ -0,0 +1,100 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`view-plan regression harness (M0) blockRuns output is stable across the representative blocks 1`] = `
+[
+  {
+    "runs": [
+      {
+        "role": "plain",
+        "start": 0,
+        "text": "Heading with ",
+      },
+      {
+        "role": "strong",
+        "start": 15,
+        "text": "bold",
+      },
+    ],
+    "text": "Heading with **bold**",
+    "type": "same",
+  },
+  {
+    "runs": [
+      {
+        "role": "plain",
+        "start": 0,
+        "text": "A paragraph with ",
+      },
+      {
+        "role": "strong",
+        "start": 19,
+        "text": "strong",
+      },
+      {
+        "role": "plain",
+        "start": 27,
+        "text": ", ",
+      },
+      {
+        "role": "em",
+        "start": 30,
+        "text": "em",
+      },
+      {
+        "role": "plain",
+        "start": 33,
+        "text": ", ",
+      },
+      {
+        "role": "code",
+        "start": 36,
+        "text": "code",
+      },
+      {
+        "role": "plain",
+        "start": 41,
+        "text": ", ",
+      },
+      {
+        "role": "strike",
+        "start": 45,
+        "text": "strike",
+      },
+      {
+        "role": "plain",
+        "start": 53,
+        "text": " and a ",
+      },
+      {
+        "href": "https://example.com",
+        "role": "link",
+        "start": 61,
+        "text": "label",
+      },
+      {
+        "role": "plain",
+        "start": 88,
+        "text": ".",
+      },
+    ],
+    "text": "A paragraph with **strong**, *em*, \`code\`, ~~strike~~ and a [label](https://example.com).",
+    "type": "same",
+  },
+  {
+    "runs": [
+      {
+        "role": "plain",
+        "start": 0,
+        "text": "a list item with ",
+      },
+      {
+        "role": "em",
+        "start": 18,
+        "text": "emphasis",
+      },
+    ],
+    "text": "a list item with *emphasis*",
+    "type": "same",
+  },
+]
+`;

package/src/components/AnnotationCard.stories.tsx

@@ -15,7 +15,7 @@ export const CommentDraft: Story = {
       draft={{ text: "Which daemon?", ...draftCallbacks }}
     />
   ),
-  expectedColors: [DARK.accent],
+  expectedColors: [DARK.blue],
 };
 
 export const SavedSelected: Story = {
@@ -27,15 +27,14 @@ export const SavedSelected: Story = {
         body: "Which daemon owns this?",
         isSelected: true,
         isOrphan: false,
-        isBlocking: false,
         author: "me",
-        tone: DARK.accent,
+        tone: DARK.blue,
         editing: null,
         onPress: () => {},
       }}
     />
   ),
-  expectedColors: [DARK.accent],
+  expectedColors: [DARK.blue],
 };
 
 export const SavedCollaborator: Story = {
@@ -47,7 +46,6 @@ export const SavedCollaborator: Story = {
         body: "Which daemon owns this?",
         isSelected: false,
         isOrphan: false,
-        isBlocking: false,
         author: "Priya",
         tone: DARK.blue,
         editing: null,
@@ -58,7 +56,7 @@ export const SavedCollaborator: Story = {
   expectedColors: [DARK.blue],
 };
 
-export const SavedOrphanBlocking: Story = {
+export const SavedOrphan: Story = {
   render: () => (
     <AnnotationCard
       kind="comment"
@@ -67,15 +65,14 @@ export const SavedOrphanBlocking: Story = {
         body: "The passage is gone.",
         isSelected: false,
         isOrphan: true,
-        isBlocking: true,
         author: "me",
-        tone: DARK.accent,
+        tone: DARK.blue,
         editing: null,
         onPress: () => {},
       }}
     />
   ),
-  expectedColors: [DARK.accent],
+  expectedColors: [DARK.blue],
 };
 
 export const SavedEditing: Story = {
@@ -87,9 +84,8 @@ export const SavedEditing: Story = {
         body: "old body",
         isSelected: true,
         isOrphan: false,
-        isBlocking: false,
         author: "me",
-        tone: DARK.accent,
+        tone: DARK.blue,
         editing: { text: "new body", ...draftCallbacks },
         onPress: () => {},
       }}

package/src/components/AnnotationCard.tsx

@@ -31,10 +31,9 @@ export interface AnnotationSaved {
   body: string;
   isSelected: boolean;
   isOrphan: boolean;
-  isBlocking: boolean;
   /** Border-title author: a collaborator's display name, or "me" for the reviewer's own note. */
   author: string;
-  /** Border + title color for this card (own = salmon, collaborator = blue). */
+  /** Border + title color for this card (comment cards read blue). */
   tone: string;
   /** Non-null while the card body is being rewritten in place. */
   editing: AnnotationDraft | null;
@@ -155,7 +154,8 @@ export function AnnotationCard({
   theme,
 }: AnnotationCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const kindColor = tokens.accent;
+  // the composer wears the same blue as the saved comment card it becomes
+  const kindColor = tokens.blue;
   const activeDraft = draft ?? saved?.editing ?? null;
   // The composer's visible height, grown from the wrapped text. It is shared
   // with the card frame (contentRows) so the border never clips the textarea
@@ -186,10 +186,8 @@ export function AnnotationCard({
     );
   }
   const card = saved!;
-  // border = "what + who" (+ any exceptional flag); body = the content only
-  const flags = [card.isBlocking ? "BLOCKING" : null, card.isOrphan ? "ORPHANED" : null].filter(
-    (flag): flag is string => flag !== null,
-  );
+  // border = "what + who" (+ an orphaned flag when the anchor no longer resolves)
+  const flags = card.isOrphan ? ["ORPHANED"] : [];
   const title = ` ${[kind.toUpperCase(), card.author, ...flags].join(" · ")} `;
   // every saved card is bordered, so the border + side padding always eat this width
   const borderInset = 4;
@@ -205,16 +203,20 @@ export function AnnotationCard({
         border: true,
         borderStyle: FRAME_BORDER_STYLE,
         // the border (and its title) always wears the card's tone - salmon for
-        // own notes, blue for a collaborator's; selection reads from a filled
-        // background so the color stays put whether or not the card is active
+        // own notes, blue for a collaborator's; the card background stays
+        // transparent so it sits flat on the terminal theme. Selection reads
+        // from the quote line taking the card's tone (below) and from the
+        // matching text highlight in the document.
         borderColor: card.tone,
-        backgroundColor: card.isSelected || card.editing ? tokens.elevated : "transparent",
+        backgroundColor: "transparent",
         paddingLeft: 1,
         paddingRight: 1,
       }}
       onMouseUp={card.onPress}
     >
-      <text fg={tokens.textDim}>"{truncateToSingleLine(quote, 26 - borderInset)}"</text>
+      <text
+        fg={card.isSelected ? card.tone : tokens.textDim}
+      >{`"${truncateToSingleLine(quote, 26 - borderInset)}"`}</text>
       {card.editing ? (
         <DraftEditor
           draft={card.editing}

package/src/components/ConfirmCard.stories.tsx

@@ -13,28 +13,14 @@ const callbacks = {
 };
 
 export const ApproveDefault: Story = {
-  render: () => (
-    <ConfirmCard
-      verdict="approve"
-      summary=""
-      annotationCount={0}
-      blockingCount={0}
-      {...callbacks}
-    />
-  ),
+  render: () => <ConfirmCard verdict="approve" summary="" {...callbacks} />,
   expectedColors: [DARK.green, DARK.accent],
   size: { width: 40, height: 14 },
 };
 
 export const RequestChanges: Story = {
   render: () => (
-    <ConfirmCard
-      verdict="request_changes"
-      summary="Tighten the steps."
-      annotationCount={3}
-      blockingCount={1}
-      {...callbacks}
-    />
+    <ConfirmCard verdict="request_changes" summary="Tighten the steps." {...callbacks} />
   ),
   expectedColors: [DARK.red],
   size: { width: 40, height: 14 },
@@ -42,14 +28,7 @@ export const RequestChanges: Story = {
 
 export const WithViewedSummary: Story = {
   render: () => (
-    <ConfirmCard
-      verdict="approve"
-      summary=""
-      annotationCount={1}
-      blockingCount={0}
-      viewedSummary="2/3 files viewed"
-      {...callbacks}
-    />
+    <ConfirmCard verdict="approve" summary="" viewedSummary="2/3 files viewed" {...callbacks} />
   ),
   expectedColors: [DARK.green, DARK.textDim],
   size: { width: 40, height: 14 },

package/src/components/ConfirmCard.tsx

@@ -1,9 +1,8 @@
 /**
  * The Submit button expanded into a bordered confirm card at the rail bottom:
- * honest counts, the verdict selector (arrow keys or click), the optional
- * summary, and plain word-buttons - key hints live in the status line only.
- * The bordered height derives from the content rows through Card, so layout
- * and render never drift.
+ * the verdict selector (arrow keys or click), the optional summary, and plain
+ * word-buttons - key hints live in the status line only. The bordered height
+ * derives from the content rows through Card, so layout and render never drift.
  */
 
 import React from "react";
@@ -26,8 +25,6 @@ export const VERDICT_LABEL: Record<VerdictKind, string> = {
 export interface ConfirmCardProps {
   verdict: VerdictKind;
   summary: string;
-  annotationCount: number;
-  blockingCount: number;
   /**
    * The guided walk's honest coverage line for diff sessions, e.g.
    * "2/3 files viewed". Undefined = no walk data, the row does not render.
@@ -40,8 +37,8 @@ export interface ConfirmCardProps {
   theme?: Theme;
 }
 
-/** Counts, spacer, 1-row verdict selector, spacer, summary input, spacer, buttons. */
-const CONFIRM_CONTENT_ROWS = 7;
+/** 1-row verdict selector, spacer, summary input, spacer, buttons. */
+const CONFIRM_CONTENT_ROWS = 5;
 
 export function verdictColor(verdict: VerdictKind, tokens: Theme): string {
   return verdict === "approve"
@@ -89,8 +86,6 @@ function VerdictSelector({
 export function ConfirmCard({
   verdict,
   summary,
-  annotationCount,
-  blockingCount,
   viewedSummary,
   onInput,
   onSelectVerdict,
@@ -102,17 +97,14 @@ export function ConfirmCard({
   return (
     <Card
       title=" submit review "
-      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 1 : 0)}
+      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
       borderColor={tokens.text}
       backgroundColor="transparent"
       marginRight={1}
       theme={theme}
     >
-      <text
-        fg={tokens.textDim}
-      >{`${annotationCount} annotations · ${blockingCount} blocking`}</text>
       {viewedSummary !== undefined ? <text fg={tokens.textDim}>{viewedSummary}</text> : null}
-      <box style={{ height: 1 }} />
+      {viewedSummary !== undefined ? <box style={{ height: 1 }} /> : null}
       <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
       <box style={{ height: 1 }} />
       <input

package/src/components/MarkerPopover.tsx

@@ -8,6 +8,7 @@
  */
 
 import React from "react";
+import type { MouseEvent } from "@opentui/core";
 import type { Theme } from "../theme";
 import type { QuickAction } from "../config";
 import { useComponentTheme } from "./theme-context";
@@ -56,7 +57,12 @@ export function MarkerPopover({
   };
   const open = view === "actions";
   return (
-    <box style={{ flexDirection: "column", alignItems: "flex-start" }}>
+    <box
+      style={{ flexDirection: "column", alignItems: "flex-start" }}
+      // a release on the popover is the popover's own click; it must never
+      // bubble to the sheet's selection-release fallback and re-enter span mode
+      onMouseUp={(event: MouseEvent) => event.stopPropagation()}
+    >
       <box style={{ ...cardStyle, height: cardHeight(1) }}>
         <box style={{ flexDirection: "row" }}>
           <text fg={tokens.accent} onMouseUp={onComment}>