@cueloop/client 0.1.0-alpha.77 → 0.1.0-alpha.79

package/src/components/ThreadTree.tsx

@@ -42,6 +42,9 @@ export interface ThreadTreeProps {
 
 const MENU_WIDTH = 12;
 
+/** Columns per nesting level in the sidebar cascade: section → project → thread. */
+const SIDEBAR_INDENT = 2;
+
 function ActionsMenu({
   pinned,
   onPin,
@@ -76,7 +79,7 @@ function ActionsMenu({
     >
       {item(pinned ? "unstar" : "star", tokens.text, onPin)}
       {item("rename", tokens.text, onRename)}
-      {item("delete", tokens.red, onDelete)}
+      {item("delete", tokens.text, onDelete)}
     </box>
   );
 }
@@ -85,6 +88,7 @@ interface ThreadRowProps {
   title: string;
   selected: boolean;
   pinned: boolean;
+  depth: number;
   titleWidth: number;
   menuOpen: boolean;
   onToggleMenu: () => void;
@@ -97,7 +101,8 @@ interface ThreadRowProps {
 }
 
 function ThreadRow(props: ThreadRowProps): React.ReactNode {
-  const { title, selected, pinned, titleWidth, menuOpen, onToggleMenu, tokens, theme } = props;
+  const { title, selected, pinned, depth, titleWidth, menuOpen, onToggleMenu, tokens, theme } =
+    props;
   const [hovered, setHovered] = useState(false);
   const rowRef = useRef<BoxRenderable | null>(null);
   const { setOverlay, clearOverlay } = useRootOverlay();
@@ -157,8 +162,8 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
           backgroundColor: selected ? tokens.elevated : hovered ? tokens.panel : undefined,
         }}
       >
-        <text wrapMode="none">
-          <span fg={tokens.textDim}>{pinned ? ` ${NERD.star} ` : "   "}</span>
+        <box style={{ width: depth * SIDEBAR_INDENT, flexShrink: 0 }} />
+        <text wrapMode="none" style={{ flexShrink: 1 }}>
           <span fg={selected ? tokens.accent : tokens.textMuted}>{clippedTitle}</span>
         </text>
         <box style={{ flexGrow: 1 }} />
@@ -212,8 +217,7 @@ export function ThreadTree({
 
           if (row.kind === "project") {
             return (
-              <text key={row.id}>
-                <span fg={tokens.blue}>{` ${NERD.folderOpen} `}</span>
+              <text key={row.id} wrapMode="none" style={{ marginLeft: SIDEBAR_INDENT }}>
                 <span fg={tokens.textMuted}>{row.label}</span>
               </text>
             );
@@ -230,7 +234,8 @@ export function ThreadTree({
                 focused || activeId === undefined ? row.selectionIndex === cursor : activeId === id
               }
               pinned={pinnedIds?.has(id) ?? false}
-              titleWidth={titleWidth}
+              depth={row.depth}
+              titleWidth={Math.max(8, titleWidth - (row.depth - 1) * SIDEBAR_INDENT)}
               menuOpen={menuControl.openMenuId === `thread:${id}`}
               onToggleMenu={() => menuControl.toggleMenu(`thread:${id}`)}
               onSelect={onSelect ? () => onSelect(id) : undefined}

package/src/components/ThreadView.selection.test.tsx

@@ -7,7 +7,7 @@
  * all asserted on the frame, not on internal state.
  */
 
-import { afterEach, beforeEach, describe, expect, mock, test, type Mock } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, spyOn, test, type Mock } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { TextAttributes } from "@opentui/core";
@@ -17,6 +17,7 @@ import { settle, typeText } from "../test-support";
 import { buildDisplay, marksByDisplay } from "../view-plan";
 import { makeAnchor, parseBlocks, type Annotation } from "@cueloop/schema";
 import type { TextSpan } from "../thread-selection";
+import * as markRuns from "../mark-runs";
 import { fixturePlanSession } from "./story-fixtures";
 import { ThreadView } from "./ThreadView";
 
@@ -810,3 +811,89 @@ describe("discussion identity", () => {
     expect(annotate).not.toHaveBeenCalled();
   });
 });
+
+describe("a new comment sorts into place while typing", () => {
+  const blocks = parseBlocks(PLAN);
+  const anchorOn = (word: string): Annotation["anchor"] =>
+    makeAnchor(blocks, 1, PARAGRAPH.indexOf(word), PARAGRAPH.indexOf(word) + word.length);
+  const early: Annotation = {
+    id: "early",
+    kind: "comment",
+    anchor: anchorOn("persists"),
+    body: "alpha-note",
+    createdAt: "2026-09-01T10:00:00Z",
+  };
+  const late: Annotation = {
+    id: "late",
+    kind: "comment",
+    anchor: anchorOn("atomically"),
+    body: "omega-note",
+    createdAt: "2026-09-01T10:01:00Z",
+  };
+
+  test("a draft anchored between two comments renders between them, not appended to the stack", async () => {
+    // Arrange - two comments on the same line, one earlier and one later than the draft's word
+    setup.renderer.destroy();
+    await mount([early, late]);
+
+    // Act - mark a word between them and start typing a new comment
+    const sessions = locate("sessions");
+
+    await setup.mockMouse.doubleClick(sessions.column + 2, sessions.row);
+    await settle(setup);
+    await typeText(setup, "midway-note");
+    await settle(setup);
+
+    // Assert - the draft sits where it will land on save (by span start), not at the end
+    const rows = setup.captureCharFrame().split("\n");
+    const rowOf = (needle: string): number => rows.findIndex((row) => row.includes(needle));
+
+    expect(rowOf("alpha-note")).toBeGreaterThanOrEqual(0);
+    expect(rowOf("midway-note")).toBeGreaterThan(rowOf("alpha-note"));
+    expect(rowOf("omega-note")).toBeGreaterThan(rowOf("midway-note"));
+  });
+});
+
+describe("virtualization guard", () => {
+  // The performance guard: the thread view must word-wrap only the blocks in the viewport, not the
+  // whole document. Deterministic (a call count, not a wall-clock), so it fails on any machine if a
+  // future change un-virtualizes the view - the regression the nav-latency benchmark would show.
+  test("a large plan word-wraps only the on-screen blocks, not every block", async () => {
+    // Arrange - a plan far taller than the viewport
+    const paragraphs = Array.from({ length: 800 }, (_, index) => `Paragraph ${index} with words.`);
+    const bigPlan = `# Big Plan\n\n${paragraphs.join("\n\n")}\n`;
+    const display = buildDisplay(bigPlan, undefined);
+    const bigSession = fixturePlanSession({
+      artifact: { type: "plan", content: bigPlan, meta: { title: "Big", planPath: "big.md" } },
+      annotations: [],
+    });
+    const spy = spyOn(markRuns, "wrapLines");
+
+    try {
+      // Act
+      const bigSetup = await testRender(
+        <ThreadView
+          session={bigSession}
+          display={display}
+          marks={new Map()}
+          quickActions={DEFAULT_QUICK_ACTIONS}
+          observer={false}
+          onAnnotate={() => {}}
+          onReply={() => {}}
+          onUpdateAnnotation={() => {}}
+          onExit={() => {}}
+        />,
+        { width: 64, height: 24 },
+      );
+
+      await settle(bigSetup);
+
+      // Assert - across the mount's renders the view never wraps a block for each of the 800; a
+      // viewport-worth per render stays far under one full pass over the document
+      expect(spy.mock.calls.length).toBeLessThan(display.length);
+      bigSetup.renderer.destroy();
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});

package/src/components/ThreadView.slash.test.tsx

@@ -60,42 +60,6 @@ async function mountComposerWithSkills(skills: SlashItem[] = [], width = 72) {
 
 const mountComposer = () => mountComposerWithSkills();
 
-describe("the command leader", () => {
-  test("the leader chord then a letter runs a command instead of composing a comment", async () => {
-    const commands: string[] = [];
-    const display = buildDisplay(PLAN, undefined);
-    const setup = await testRender(
-      <ThreadView
-        session={fixturePlanSession({
-          artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
-        })}
-        display={display}
-        marks={marksByDisplay([], display)}
-        quickActions={[]}
-        observer={false}
-        leaderCombos={["ctrl+g"]}
-        onLeaderCommand={(key) => commands.push(key.name)}
-        onAnnotate={() => {}}
-        onReply={() => {}}
-        onUpdateAnnotation={() => {}}
-        onExit={() => {}}
-      />,
-      { width: 72, height: 20 },
-    );
-    await settle(setup);
-
-    setup.mockInput.pressKey("g", { ctrl: true });
-    setup.mockInput.pressKey("x");
-    await settle(setup);
-
-    // the command fired and no composer opened (a bare "x" would have started a draft)
-    expect(commands).toEqual(["x"]);
-    expect(setup.captureCharFrame()).not.toContain("enter save");
-
-    setup.renderer.destroy();
-  });
-});
-
 describe("skills in the palette", () => {
   test("a skill from context lists in the / palette and a pick inserts its /name", async () => {
     const setup = await mountComposerWithSkills([

package/src/components/ThreadView.tsx

@@ -13,32 +13,48 @@
  */
 
 import React, { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
 import type { KeyEvent, ScrollBoxRenderable } from "@opentui/core";
 import type { Annotation, Thread } from "@cueloop/schema";
-import { displayText, type DisplayBlock, type Mark } from "../view-plan";
+import {
+  displayText,
+  renderedText,
+  renderedStyleRuns,
+  styledRunsFor,
+  type DisplayBlock,
+  type Mark,
+  type RenderedRun,
+  type RunRole,
+  type StyledRun,
+} from "../view-plan";
 import type { TextSpan } from "../thread-selection";
 import type { QuickAction } from "../config";
 import type { CheatsheetSection } from "../key-bindings";
 import type { Theme } from "../theme";
-import { BOLD, CUT, UNDERLINE } from "../annotation-palette";
-import { lineMarkRanges, runsFor, wrapLines, type MarkRange, type VisualLine } from "../mark-runs";
+import { BOLD, CUT, ITALIC, UNDERLINE } from "../annotation-palette";
+import { wrapLines, type MarkRange, type VisualLine } from "../mark-runs";
+import { MarkdownGridBlock } from "./MarkdownGridBlock";
 import { useFrameMeasure } from "../use-frame-measure";
+import { useTerminalVirtualizer } from "../use-terminal-virtualizer";
 import { useAnnotationSurface, type LineSource } from "../use-annotation-surface";
+import { NavModeHint } from "./NavModeHint";
 import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
 import { useComponentTheme } from "./theme-context";
 
+/** Blocks kept mounted beyond the viewport, so a scroll step or a drag past the edge never shows a gap. */
+const OVERSCAN_BLOCKS = 8;
+
 export { lighten } from "../annotation-palette";
 
 /**
- * How a block's rows are painted: heading weight, muted kinds, the list or
- * quote marker, and tracked changes as the plan sheet drew them - a cut block
- * dim and struck through, an added or edited block tagged on its first row.
+ * How a block's rows are painted: heading weight, muted kinds, and the list or
+ * quote marker. A cut block reads dim and struck through; other edits are
+ * tracked into the working copy but not tagged in the read-only view.
  */
 interface BlockStyle {
   baseFg: string;
   baseAttributes: number;
   marker: string;
-  changeTag: { text: string; fg: string } | null;
 }
 
 function blockStyle(block: DisplayBlock, tokens: Theme): BlockStyle {
@@ -53,27 +69,42 @@ function blockStyle(block: DisplayBlock, tokens: Theme): BlockStyle {
         : block.kind === "quote"
           ? "▏ "
           : "";
-  const changeTag =
-    block.type === "add"
-      ? { text: " [new]", fg: tokens.green }
-      : block.type === "mod"
-        ? { text: " [edited]", fg: tokens.accent }
-        : null;
 
   return {
     baseFg: isCut ? tokens.textDim : muted ? tokens.textMuted : tokens.text,
     baseAttributes: (isHeading ? BOLD : 0) | (isCut ? CUT : 0),
     marker,
-    changeTag,
   };
 }
 
+/** The read-only color of an inline markdown role: links accent, code and removals dim, insertions green. */
+function roleForeground(role: RunRole, baseFg: string, tokens: Theme): string {
+  if (role === "link") return tokens.blue;
+  if (role === "ins") return tokens.green;
+  if (role === "code" || role === "del") return tokens.textDim;
+
+  return baseFg;
+}
+
+/** The text attributes an inline role adds over a block's base attributes. */
+function roleAttributes(role: RunRole, baseAttributes: number): number {
+  if (role === "strong") return baseAttributes | BOLD;
+  if (role === "em") return baseAttributes | ITALIC;
+  if (role === "strike" || role === "del") return baseAttributes | CUT;
+
+  return baseAttributes;
+}
+
+function isGridKind(kind: DisplayBlock["kind"]): boolean {
+  return kind === "table" || kind === "frontmatter";
+}
+
 /* ------------------------------------------------------------------ view */
 
 /** The grammar as the keybinds dialog lists it; the view owns these keys, so they are not rebindable. */
 export const THREAD_VIEW_CHEATSHEET: CheatsheetSection[] = [
   {
-    title: "Thread",
+    title: "Thread (type)",
     entries: [
       { keys: "click", label: "place the caret" },
       { keys: "drag", label: "mark text, across blocks" },
@@ -82,11 +113,9 @@ export const THREAD_VIEW_CHEATSHEET: CheatsheetSection[] = [
       { keys: "⇧← / ⇧→", label: "hold a mark" },
       { keys: "↑ / ↓", label: "move by block" },
       { keys: "type", label: "comment on the mark" },
-      { keys: "⌘⌥m", label: "comment" },
       { keys: "enter", label: "reply to the comment" },
-      { keys: "tab", label: "fold / unfold" },
-      { keys: "⌘] / ⌘[", label: "next / previous comment" },
-      { keys: "esc", label: "drop the mark" },
+      { keys: "esc", label: "nav mode" },
+      { keys: "tab", label: "cycle panes" },
       { keys: "⌃q", label: "quit" },
     ],
   },
@@ -129,8 +158,7 @@ export interface ThreadViewProps {
   onUpdateAnnotation: (id: string, body: string) => void;
   /** The author's display name for a comment's hover tooltip. */
   resolveAuthorLabel?: (annotation: Annotation) => string | undefined;
-  leaderCombos?: readonly string[];
-  onLeaderCommand?: (key: KeyEvent) => void;
+  onNavCommand?: (key: KeyEvent) => boolean;
   onExit: () => void;
   theme?: Theme;
 }
@@ -153,15 +181,15 @@ export function ThreadView({
   onReply,
   onUpdateAnnotation,
   resolveAuthorLabel,
-  leaderCombos,
-  onLeaderCommand,
+  onNavCommand,
   onExit,
   theme,
 }: ThreadViewProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const source: LineSource = {
     count: display.length,
-    textAt: (blockIndex) => displayText(display[blockIndex]!),
+    // the surface hit-tests and paints in rendered text (inline markers concealed); a grid anchors on its raw source
+    textAt: (blockIndex) => renderedText(display[blockIndex]!),
     annotatable: () => true,
   };
   const surface = useAnnotationSurface({
@@ -182,43 +210,73 @@ export function ThreadView({
     onReply,
     onUpdateAnnotation,
     resolveAuthorLabel,
-    leaderCombos,
-    onLeaderCommand,
+    onNavCommand,
     onExit,
   });
   const { palette, discussions } = surface;
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const { height: terminalHeight } = useTerminalDimensions();
   const viewWidth = useFrameMeasure(
     () => scrollRef.current?.content?.width ?? 0,
     (left, right) => left === right,
     0,
   );
 
+  // only the viewport's blocks (plus an overscan) mount; a block is estimated at its wrapped-line
+  // count until its box, cards included, is measured. The initial viewport seeds the first render so a
+  // freshly mounted thread (a switch from a diff, another project) windows its first paint rather than
+  // building every block, and never flashes blank.
+  const estimateBlockRows = (index: number): number => {
+    const block = display[index];
+
+    if (!block) return 1;
+    const usable = viewWidth > 0 ? Math.max(1, viewWidth - 6) : 40;
+    const lines = Math.max(1, Math.ceil(displayText(block).length / usable));
+
+    return lines + (index === 0 ? 0 : 1);
+  };
+  const virtual = useTerminalVirtualizer({
+    scrollbox: scrollRef,
+    count: display.length,
+    estimateSize: estimateBlockRows,
+    overscan: OVERSCAN_BLOCKS,
+  });
+
   useEffect(() => {
-    try {
-      scrollRef.current?.scrollChildIntoView(`discussion-block-${surface.revealBlockIndex}`);
-    } catch {
-      // best-effort reveal
-    }
+    virtual.scrollToIndex(surface.revealBlockIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [surface.revealBlockIndex]);
 
   interface LineContext {
     blockIndex: number;
-    text: string;
+    roleRuns: RenderedRun[];
     line: VisualLine;
     lineIndex: number;
     ranges: MarkRange[];
     marker: string;
     baseFg: string;
     baseAttributes: number;
-    /** A tag after the row's text, such as the tracked-change label. */
-    trailing: { text: string; fg: string } | null;
   }
 
+  const paintedSpan = (
+    run: StyledRun,
+    runIndex: number,
+    baseFg: string,
+    baseAttributes: number,
+  ) => (
+    <span
+      key={runIndex}
+      fg={roleForeground(run.role, baseFg, tokens)}
+      bg={run.caretOnly ? palette.caretCell : run.marked ? palette.markBackdrop : undefined}
+      attributes={roleAttributes(run.role, baseAttributes) | (run.marked ? UNDERLINE : 0)}
+    >
+      {run.text}
+    </span>
+  );
+
   const lineRowFor = (context: LineContext): React.ReactNode => {
-    const { blockIndex, text, line, lineIndex, ranges, marker, baseFg, baseAttributes, trailing } =
+    const { blockIndex, roleRuns, line, lineIndex, ranges, marker, baseFg, baseAttributes } =
       context;
-    const lineRanges = lineMarkRanges(ranges, line);
 
     return (
       <box key={`line-${lineIndex}`} style={{ flexDirection: "row" }}>
@@ -232,17 +290,25 @@ export function ThreadView({
           ref={surface.registerLine(blockIndex, lineIndex, line)}
           onMouseDown={surface.onLineMouseDown}
         >
-          {runsFor(text.slice(line.start, line.end), lineRanges).map((run, runIndex) => (
-            <span
-              key={runIndex}
-              fg={baseFg}
-              bg={run.caretOnly ? palette.caretCell : run.marked ? palette.markBackdrop : undefined}
-              attributes={baseAttributes | (run.marked ? UNDERLINE : 0)}
-            >
-              {run.text}
-            </span>
-          ))}
-          {trailing ? <span fg={trailing.fg}>{trailing.text}</span> : null}
+          {styledRunsFor(roleRuns, line, ranges).map((run, runIndex) =>
+            paintedSpan(run, runIndex, baseFg, baseAttributes),
+          )}
+        </text>
+      </box>
+    );
+  };
+
+  // an h1 or h2 sits over a dim rule; h3 gets weight only. The row is
+  // always present for those kinds (only its width tracks the measured viewport) so a late width
+  // measurement never adds a row and shifts the blocks below it out from under a pending click
+  const headingRule = (block: DisplayBlock): React.ReactNode => {
+    if (block.kind !== "h1" && block.kind !== "h2") return null;
+    const width = Math.max(1, (viewWidth > 6 ? viewWidth : 46) - 6);
+
+    return (
+      <box key="heading-rule" style={{ flexDirection: "row" }}>
+        <text selectable={false} fg={tokens.textDim}>
+          {"  " + "─".repeat(width)}
         </text>
       </box>
     );
@@ -250,10 +316,54 @@ export function ThreadView({
 
   const blockNodeFor = (blockIndex: number): React.ReactNode => {
     const block = display[blockIndex]!;
-    const text = displayText(block);
+    const { baseFg, baseAttributes, marker } = blockStyle(block, tokens);
+    // list items of one list stay tight; every other block sits a blank row below its neighbour
+    const previous = display[blockIndex - 1];
+    const tight =
+      previous !== undefined &&
+      block.kind === previous.kind &&
+      (block.kind === "li" || block.kind === "oli");
+    // the leading gap rides inside the measured box (not marginTop, which sits outside it) so the
+    // virtualizer's spacer math counts it
+    const leadingGap =
+      blockIndex === 0 || tight ? null : <box key="lead-gap" style={{ height: 1 }} />;
+    const measuredBox = (children: React.ReactNode): React.ReactNode => (
+      <box
+        key={`discussion-block-${blockIndex}`}
+        id={`discussion-block-${blockIndex}`}
+        ref={virtual.measureRef(blockIndex)}
+        style={{ flexDirection: "column" }}
+      >
+        {leadingGap}
+        {children}
+      </box>
+    );
+
+    if (isGridKind(block.kind)) {
+      // a grid annotates as one unit: every row hit-tests to the same block span, a mark tints the grid,
+      // and the block's discussion cards slot under it, so annotations resolving into a grid stay visible
+      const gridLine: VisualLine = { start: 0, end: renderedText(block).length };
+      const marked = surface.rangesFor(blockIndex).some((range) => !range.caretOnly);
+
+      return measuredBox(
+        <>
+          <MarkdownGridBlock
+            block={block}
+            theme={tokens}
+            contentWidth={viewWidth > 0 ? viewWidth - 6 : 40}
+            marked={marked}
+            markBackdrop={palette.markBackdrop}
+            registerRow={(rowIndex) => surface.registerLine(blockIndex, rowIndex, gridLine)}
+            onRowMouseDown={surface.onLineMouseDown}
+          />
+          {surface.cardsAfterLine(blockIndex, gridLine, true)}
+        </>,
+      );
+    }
+
+    const roleRuns = renderedStyleRuns(block);
     const ranges = surface.rangesFor(blockIndex);
-    const { baseFg, baseAttributes, marker, changeTag } = blockStyle(block, tokens);
-    const lines = wrapLines(text, viewWidth > 0 ? viewWidth - marker.length - 6 : 0);
+    const lines = wrapLines(renderedText(block), viewWidth > 0 ? viewWidth - marker.length - 6 : 0);
     const lineRows: React.ReactNode[] = [];
 
     for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
@@ -263,16 +373,16 @@ export function ThreadView({
       lineRows.push(
         lineRowFor({
           blockIndex,
-          text,
+          roleRuns,
           line,
           lineIndex,
           ranges,
           marker,
           baseFg,
           baseAttributes,
-          trailing: lineIndex === 0 ? changeTag : null,
         }),
       );
+      if (isLastLine) lineRows.push(headingRule(block));
       const cards = surface.cardsAfterLine(blockIndex, line, isLastLine);
 
       lineRows.push(...cards);
@@ -281,13 +391,7 @@ export function ThreadView({
       }
     }
 
-    // list items of one list stay tight; every other block sits a blank row
-    // below its neighbour, and a code block announces its language first
-    const previous = display[blockIndex - 1];
-    const tight =
-      previous !== undefined &&
-      block.kind === previous.kind &&
-      (block.kind === "li" || block.kind === "oli");
+    // a code block announces its language first
     const languageRow =
       block.kind === "code" ? (
         <text key="language" fg={tokens.textDim} selectable={false}>
@@ -295,18 +399,43 @@ export function ThreadView({
         </text>
       ) : null;
 
-    return (
-      <box
-        key={`discussion-block-${blockIndex}`}
-        id={`discussion-block-${blockIndex}`}
-        style={{ flexDirection: "column", marginTop: blockIndex === 0 || tight ? 0 : 1 }}
-      >
+    return measuredBox(
+      <>
         {languageRow}
         {lineRows}
-      </box>
+      </>,
     );
   };
 
+  const virtualBlocks = (): React.ReactNode[] => {
+    const nodes: React.ReactNode[] = [];
+    const firstItem = virtual.items[0];
+    const lastItem = virtual.items.at(-1);
+
+    // the very first render has no measured viewport yet, so the virtualizer's window is empty; paint a
+    // viewport-worth from the top rather than blank or the whole document, then it takes over next frame
+    if (!firstItem || !lastItem) {
+      let mountedRows = 0;
+
+      for (let index = 0; index < display.length; index++) {
+        nodes.push(blockNodeFor(index));
+        mountedRows += estimateBlockRows(index);
+        if (mountedRows > terminalHeight + OVERSCAN_BLOCKS) break;
+      }
+
+      return nodes;
+    }
+    if (firstItem.start > 0) {
+      nodes.push(<box key="spacer-above" style={{ height: firstItem.start }} />);
+    }
+    for (const item of virtual.items) nodes.push(blockNodeFor(item.index));
+    const below = virtual.totalSize - lastItem.end;
+
+    if (below > 0) nodes.push(<box key="spacer-below" style={{ height: below }} />);
+
+    return nodes;
+  };
+
   return (
     <box style={{ flexGrow: 1, flexDirection: "row" }} {...surface.rootMouseProps}>
       <box style={{ flexGrow: 1, flexDirection: "column" }}>
@@ -324,12 +453,16 @@ export function ThreadView({
           focused={false}
           verticalScrollbarOptions={{ visible: false }}
         >
-          {display.map((_block, blockIndex) => blockNodeFor(blockIndex))}
+          {virtualBlocks()}
         </scrollbox>
+        {suspended ? null : (
+          <NavModeHint navMode={surface.navMode} surface="thread" theme={tokens} />
+        )}
       </box>
       <DiscussionMarkerRail
         discussions={discussions}
         spanQuote={surface.spanQuote}
+        focusedKey={surface.focusedDiscussion}
         onJump={surface.jumpToDiscussion}
         scrollbox={scrollRef}
         theme={theme}

package/src/components/Toast.stories.tsx

@@ -10,3 +10,10 @@ export const ShareLink: Story = {
   expectedColors: [DARK.accent],
   size: { width: 60, height: 12 },
 };
+
+export const LongMessage: Story = {
+  render: () => (
+    <Toast body="could not stop sharing: gateway revoke failed - the share may already be gone, try again in a moment" />
+  ),
+  size: { width: 90, height: 14 },
+};