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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.44",
+  "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.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.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,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,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,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}>

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/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│       

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

@@ -0,0 +1,60 @@
+import { describe, expect, test } from "bun:test";
+import {
+  blockRuns,
+  buildDisplay,
+  displayText,
+  renderedOffsetFor,
+  workRangeForRendered,
+} from "./view-plan";
+
+// M0 (#232): lock the renderer's current StyleRun output and offset round-trips
+// before the inline-tokenizer milestones (M1-M5) change blockRuns. The snapshots
+// capture today's runs, so a later milestone's diff is explicit and reviewable.
+// The round-trip assertions are the durable invariant: a visible word's rendered
+// selection must always recover that word's *source* (block.text) offsets, even
+// once inline markers are concealed - this is what keeps quote anchors exact.
+
+const DOC = `# Heading with **bold**
+
+A paragraph with **strong**, *em*, \`code\`, ~~strike~~ and a [label](https://example.com).
+
+- a list item with *emphasis*
+`;
+
+const blocks = buildDisplay(DOC);
+
+describe("view-plan regression harness (M0)", () => {
+  test("blockRuns output is stable across the representative blocks", () => {
+    // Arrange / Act
+    const runsByBlock = blocks.map((block) => ({
+      type: block.type,
+      text: displayText(block),
+      runs: blockRuns(block, true),
+    }));
+
+    // Assert
+    expect(runsByBlock).toMatchSnapshot();
+  });
+
+  // A visible word's source offsets survive the rendered round-trip. Holds at M0
+  // (1:1 today) and must keep holding once M2 conceals markers and the rendered
+  // offset shifts - the recovered work range stays the word's block.text span.
+  const paragraph = blocks.find((block) => displayText(block).includes("strong"))!;
+  const paragraphRuns = blockRuns(paragraph, true);
+  const paragraphText = displayText(paragraph);
+
+  for (const word of ["paragraph", "strong", "strike", "label"]) {
+    test(`rendered selection of "${word}" recovers its block.text offsets`, () => {
+      // Arrange
+      const start = paragraphText.indexOf(word);
+      const rendered = renderedOffsetFor(paragraphRuns, start);
+
+      // Assert
+      expect(rendered).not.toBeNull();
+      expect(workRangeForRendered(paragraphRuns, rendered!, rendered! + word.length)).toEqual({
+        start,
+        end: start + word.length,
+      });
+    });
+  }
+});

package/src/view-plan.test.ts

@@ -6,7 +6,10 @@ import {
   marksByDisplay,
   nextWorkBlock,
   overlayMarks,
+  renderedOffsetAtOrAfter,
+  renderedOffsetAtOrBefore,
   renderedOffsetFor,
+  safeLinkHref,
   spanFromRange,
   spanKey,
   startSpan,
@@ -125,6 +128,86 @@ describe("blockRuns + overlayMarks", () => {
   });
 });
 
+describe("M4: link hrefs are scheme-validated for OSC 8 (#236)", () => {
+  test("trusts http(s) and mailto, drops everything else", () => {
+    // Assert
+    expect(safeLinkHref("https://example.com")).toBe("https://example.com");
+    expect(safeLinkHref("http://x")).toBe("http://x");
+    expect(safeLinkHref("mailto:a@b.c")).toBe("mailto:a@b.c");
+    expect(safeLinkHref("javascript:alert(1)")).toBeUndefined();
+    expect(safeLinkHref("./relative/path")).toBeUndefined();
+    expect(safeLinkHref(undefined)).toBeUndefined();
+  });
+
+  test("a control byte or space in the target drops the link", () => {
+    // Assert - ESC and BEL could splice into the OSC 8 escape stream
+    expect(safeLinkHref("https://x\x1b]8;;evil\x07")).toBeUndefined();
+    expect(safeLinkHref("https://x\x07")).toBeUndefined();
+    expect(safeLinkHref("https://x y")).toBeUndefined();
+  });
+
+  test("blockRuns carries the link href through to the link run", () => {
+    // Act
+    const block = buildDisplay("see [docs](https://example.com) now\n")[0]!;
+    const link = blockRuns(block, true).find((run) => run.role === "link")!;
+
+    // Assert
+    expect(link.text).toBe("docs");
+    expect(link.href).toBe("https://example.com");
+  });
+});
+
+describe("M3: inline emphasis composes with word-diff (#235)", () => {
+  test("context emphasis survives; added text keeps the green diff role; markers concealed", () => {
+    // Arrange - "**this**" is unchanged (context, stays emphasized); "safe"->"sound" is the edit
+    const block = buildDisplay("keep **this** safe\n", "keep **this** sound\n")[0]!;
+
+    // Act
+    const runs = blockRuns(block, true);
+
+    // Assert - no marker text renders anywhere
+    expect(runs.every((run) => !run.text.includes("*"))).toBe(true);
+    // the unchanged emphasized word keeps its strong role (context, not diffed)
+    expect(runs.find((run) => run.text === "this")!.role).toBe("strong");
+    // the added word is green (ins wins over any emphasis), the removed one opaque
+    expect(runs.find((run) => run.text.includes("sound"))!.role).toBe("ins");
+    expect(runs.some((run) => run.role === "del" && run.start === null)).toBe(true);
+  });
+
+  test("markers inside added text conceal while the run stays a positioned ins", () => {
+    // Arrange - an emphasized word is added into an otherwise unchanged line
+    const block = buildDisplay("keep it safe\n", "keep it **very** safe\n")[0]!;
+
+    // Act
+    const runs = blockRuns(block, true);
+    const added = runs.find((run) => run.text === "very")!;
+
+    // Assert - concealed markers, green role, and an exact work offset back into work text
+    expect(added.role).toBe("ins");
+    expect(added.start).not.toBeNull();
+    expect(block.work!.text.slice(added.start!, added.start! + "very".length)).toBe("very");
+    expect(runs.every((run) => !run.text.includes("*"))).toBe(true);
+  });
+
+  test("an anchor over an emphasized context word round-trips to its work offsets", () => {
+    // Arrange
+    const block = buildDisplay("hold **steady** now\n", "hold **steady** later\n")[0]!;
+    const runs = blockRuns(block, true);
+    const work = block.work!.text;
+    const start = work.indexOf("steady");
+
+    // Act
+    const rendered = renderedOffsetFor(runs, start);
+
+    // Assert
+    expect(rendered).not.toBeNull();
+    expect(workRangeForRendered(runs, rendered!, rendered! + "steady".length)).toEqual({
+      start,
+      end: start + "steady".length,
+    });
+  });
+});
+
 describe("marksByDisplay", () => {
   test("annotations resolve into display coordinates", () => {
     // Arrange
@@ -217,6 +300,28 @@ describe("rendered/work offset mapping", () => {
     expect(renderedOffsetFor(runs, 99)).toBeNull();
     expect(workRangeForRendered(runs, 90, 99)).toBeNull();
   });
+
+  test("a span starting/ending on concealed markers snaps to the visible word", () => {
+    // Arrange - the word span over "**very**" covers the markers, which have
+    // no rendered cells; the clamped lookups land on "very" itself
+    const text = "keep it **very** safe\n";
+    const runs = blockRuns(buildDisplay(text)[0]!, true);
+    const spanStart = text.indexOf("**very**");
+    const spanEnd = spanStart + "**very**".length;
+
+    // Act
+    const renderedStart = renderedOffsetAtOrAfter(runs, spanStart)!;
+    const renderedEnd = renderedOffsetAtOrBefore(runs, spanEnd - 1)!;
+
+    // Assert
+    const renderedText = runs.map((run) => run.text).join("");
+    expect(renderedText.slice(renderedStart, renderedEnd + 1)).toBe("very");
+    // exact hits behave like renderedOffsetFor
+    expect(renderedOffsetAtOrAfter(runs, 0)).toBe(0);
+    expect(renderedOffsetAtOrBefore(runs, 0)).toBe(0);
+    // nothing positioned beyond the text end
+    expect(renderedOffsetAtOrAfter(runs, 99)).toBeNull();
+  });
 });
 
 describe("span mode", () => {

package/src/view-plan.ts

@@ -8,6 +8,7 @@
  */
 
 import {
+  inlineRuns,
   isAddressed,
   lcsDiff,
   parseBlocks,
@@ -141,7 +142,18 @@ function numberOrderedListItems(display: DisplayBlock[]): void {
 
 // ── marks (annotation highlights + keyboard span) ──
 
-export type RunRole = "plain" | "ins" | "del" | "mark-comment" | "kspan" | "mark-focus";
+export type RunRole =
+  | "plain"
+  | "ins"
+  | "del"
+  | "mark-comment"
+  | "kspan"
+  | "mark-focus"
+  | "strong"
+  | "em"
+  | "code"
+  | "strike"
+  | "link";
 
 export interface StyleRun {
   text: string;
@@ -149,6 +161,8 @@ export interface StyleRun {
   /** Offset of this run in the block's working text; null for del runs. */
   start: number | null;
   annotationId?: string;
+  /** Link target for `link` runs. */
+  href?: string;
 }
 
 export interface Mark {
@@ -195,6 +209,7 @@ export function marksByDisplay(
 
 /** Base runs for a display block: plain text, or word-diff for mod blocks. */
 export function blockRuns(block: DisplayBlock, markup: boolean): StyleRun[] {
+  const literal = block.kind === "code" || block.kind === "hr";
   if (block.type === "mod" && markup) {
     const changes = wordLevelChanges(block.base!.text, block.work!.text);
     const runs: StyleRun[] = [];
@@ -202,18 +217,57 @@ export function blockRuns(block: DisplayBlock, markup: boolean): StyleRun[] {
     for (const change of changes) {
       if (change.kind === "removed") {
         runs.push({ text: change.text, role: "del", start: null });
-      } else {
-        runs.push({
-          text: change.text,
-          role: change.kind === "added" ? "ins" : "plain",
-          start: workOffset,
-        });
-        workOffset += change.text.length;
+        continue;
       }
+      // A code/rule block stays literal; prose segments inline-tokenize so their
+      // markers conceal while their work offsets stay intact. Added text keeps
+      // the green diff role (it wins over emphasis); context text shows emphasis.
+      const segment = literal
+        ? [{ text: change.text, role: "plain" as const, start: workOffset }]
+        : inlineStyleRuns(change.text, workOffset);
+      for (const run of segment) {
+        runs.push(change.kind === "added" ? { ...run, role: "ins" } : run);
+      }
+      workOffset += change.text.length;
     }
     return runs;
   }
-  return [{ text: displayText(block), role: "plain", start: 0 }];
+  const text = displayText(block);
+  // Prose carries inline markup; code fences and rules are literal. Concealed
+  // markers are dropped, so every rendered cell still maps to a work offset.
+  if (markup && !literal) {
+    return inlineStyleRuns(text, 0);
+  }
+  return [{ text, role: "plain", start: 0 }];
+}
+
+/** A link href safe to hand a terminal as an OSC 8 target, or undefined. Only
+ *  http(s) and mailto are trusted; a scheme like javascript: is dropped. The
+ *  target must stay printable ASCII: a control byte (ESC, BEL) in a reviewed
+ *  document could otherwise splice into the terminal escape stream. */
+export function safeLinkHref(href: string | undefined): string | undefined {
+  if (href === undefined) return undefined;
+  if (!/^(https?:|mailto:)/i.test(href)) return undefined;
+  return /^[\x21-\x7e]+$/.test(href) ? href : undefined;
+}
+
+/**
+ * Map the schema inline tokens to positioned StyleRuns, dropping the concealed
+ * markers. `base` is the run's offset within the block's working text (0 for a
+ * whole prose block; a segment's start for a word-diff piece).
+ */
+export function inlineStyleRuns(text: string, base: number): StyleRun[] {
+  const runs: StyleRun[] = [];
+  for (const run of inlineRuns(text)) {
+    if (run.role === "marker" || run.start === null) continue;
+    runs.push({
+      text: run.text,
+      role: run.role === "text" ? "plain" : run.role,
+      start: base + run.start,
+      ...(run.href !== undefined ? { href: run.href } : {}),
+    });
+  }
+  return runs;
 }
 
 /** Split runs at mark boundaries; marks only bind to runs with offsets. */
@@ -274,6 +328,39 @@ export function renderedOffsetFor(runs: StyleRun[], workOffset: number): number
   return null;
 }
 
+/**
+ * Rendered offset of the first positioned character at or after `workOffset`.
+ * A word span may start on a concealed marker (the `**` of an emphasized
+ * word), which has no rendered cell; the span visuals snap to the first
+ * character that does. Positioned runs appear in ascending work order.
+ */
+export function renderedOffsetAtOrAfter(runs: StyleRun[], workOffset: number): number | null {
+  let rendered = 0;
+  for (const run of runs) {
+    if (run.start !== null && run.start + run.text.length > workOffset) {
+      return rendered + Math.max(0, workOffset - run.start);
+    }
+    rendered += run.text.length;
+  }
+  return null;
+}
+
+/**
+ * Rendered offset of the last positioned character at or before `workOffset` -
+ * the closing-marker counterpart of `renderedOffsetAtOrAfter`.
+ */
+export function renderedOffsetAtOrBefore(runs: StyleRun[], workOffset: number): number | null {
+  let rendered = 0;
+  let best: number | null = null;
+  for (const run of runs) {
+    if (run.start !== null && run.start <= workOffset) {
+      best = rendered + Math.min(workOffset - run.start, run.text.length - 1);
+    }
+    rendered += run.text.length;
+  }
+  return best;
+}
+
 /**
  * Work-text range covered by a rendered-text selection [start, end). Del runs
  * and other unpositioned text inside the selection contribute nothing; the