@cueloop/client 0.1.0-alpha.43 → 0.1.0-alpha.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.43",
+  "version": "0.1.0-alpha.45",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -26,10 +26,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.43",
-    "@cueloop/extension-api": "0.1.0-alpha.43",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.43",
-    "@cueloop/schema": "0.1.0-alpha.43",
+    "@cueloop/daemon": "0.1.0-alpha.45",
+    "@cueloop/extension-api": "0.1.0-alpha.45",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.45",
+    "@cueloop/schema": "0.1.0-alpha.45",
     "@opentui/core": "^0.5.2",
     "@opentui/keymap": "0.5.2",
     "@opentui/react": "^0.5.2",

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

@@ -87,18 +87,18 @@ function backgroundsOf(setup: Setup, needle: string): string[] {
   return backgrounds;
 }
 
-/** Whether any border character (box-drawing) is painted in the given foreground hex. */
-function hasBorderColor(setup: Setup, hex: string): boolean {
+function foregroundsOf(setup: Setup, needle: string): string[] {
+  const foregrounds: string[] = [];
   for (const line of setup.captureSpans().lines) {
     for (const span of line.spans) {
-      if (!/[╭╮╰╯│─┌┐└┘]/.test(span.text)) continue;
+      if (!span.text.includes(needle)) continue;
       const [red, green, blue] = span.fg.toInts();
-      const rendered =
-        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
-      if (rendered === hex) return true;
+      foregrounds.push(
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""),
+      );
     }
   }
-  return false;
+  return foregrounds;
 }
 
 /** Move the cursor to "The daemon persists sessions to disk atomically." */
@@ -629,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 accent border fading to a dim border (transparent fill)
+      // shows as the card's quote line dropping the selection tone (blue)
       await press(setup, "escape");
-      await waitForState(setup, () => !hasBorderColor(setup, DARK.accent));
+      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,7 @@ 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 { type ReviewRailHandle } from "./components/ReviewRail";
 import type { AgentTerminalHandle } from "./components/agent-launcher";
 import { ReviewPanel } from "./components/ReviewPanel";
 import {
@@ -853,30 +853,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 +922,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
@@ -1044,6 +1048,7 @@ export function App({
               popover={popoverState}
               editOrphanCount={editOrphanCount}
               onLineActivate={onLineActivate}
+              onSelectionRelease={onSelectionRelease}
             />
           )}
           <ReviewPanel

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

package/src/components/AnnotationCard.tsx

@@ -31,9 +31,10 @@ 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 (comment cards read blue). */
+  tone: string;
   /** Non-null while the card body is being rewritten in place. */
   editing: AnnotationDraft | null;
   onPress: () => void;
@@ -153,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
@@ -184,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;
@@ -202,15 +202,21 @@ export function AnnotationCard({
         height: cardHeight(contentRows),
         border: true,
         borderStyle: FRAME_BORDER_STYLE,
-        // cards stay transparent in every theme; selection is the bright
-        // kind-colored border, while unselected cards recede to a dim border
-        borderColor: card.isSelected || card.editing ? kindColor : tokens.border,
+        // the border (and its title) always wears the card's tone - salmon for
+        // 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: "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)}
-      borderColor={tokens.accent}
+      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}>