@cueloop/client 0.1.0-alpha.32 → 0.1.0-alpha.34

package/src/components/DiffSheet.scroll.test.tsx

@@ -0,0 +1,123 @@
+/** Keyboard scroll is smooth: cursor-follow never drifts past wrapped cards. */
+
+import { expect, test } from "bun:test";
+import React, { useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { useKeyboard } from "@opentui/react";
+import type { Renderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Annotation } from "@cueloop/schema";
+import { DiffSheet } from "./DiffSheet";
+import { diffRows, type DiffRow } from "../view-diff";
+import { DARK } from "../theme";
+import { press } from "../test-support";
+
+/** Find a renderable by id anywhere in the tree (getRenderable is not recursive). */
+function findById(node: Renderable, id: string): Renderable | undefined {
+  if (node.id === id) return node;
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+    if (found) return found;
+  }
+  return undefined;
+}
+
+function hex(color: { toInts(): [number, number, number, number] }): string {
+  const [red, green, blue] = color.toInts();
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+/** A single-hunk patch of `count` added lines, taller than any test viewport. */
+function tallPatch(count: number): string {
+  const adds = Array.from(
+    { length: count },
+    (_, index) => `+line ${String(index).padStart(2, "0")}`,
+  );
+  return [
+    "diff --git a/f.ts b/f.ts",
+    "--- a/f.ts",
+    "+++ b/f.ts",
+    `@@ -0,0 +1,${count} @@`,
+    ...adds,
+    "",
+  ].join("\n");
+}
+
+/** DiffSheet with j-driven cursor, mirroring the App's down-navigation. */
+function ScrollHarness({
+  rows,
+  annotations,
+}: {
+  rows: DiffRow[];
+  annotations: Annotation[];
+}): React.ReactNode {
+  const [cursor, setCursor] = useState(0);
+  useKeyboard((key) => {
+    if (key.name === "j") setCursor((current) => Math.min(rows.length - 1, current + 1));
+  });
+  return <DiffSheet rows={rows} cursor={cursor} annotations={annotations} />;
+}
+
+test("scrolling down past wrapped annotation cards keeps the cursor pinned and the scroll monotonic", async () => {
+  // Arrange - a tall diff whose annotation bodies would wrap at this width; the
+  // wrapped card is exactly the layout the cursor-follow model used to mis-measure
+  const rows = diffRows(tallPatch(40));
+  const longBody =
+    "this is a deliberately long annotation body that would wrap across the narrow test viewport";
+  const annotations: Annotation[] = [8, 16, 24].map((rowIndex) => ({
+    id: `a${rowIndex}`,
+    kind: "comment",
+    body: longBody,
+    anchor: { quote: rows[rowIndex]!.text, prefix: "", suffix: "" },
+    createdAt: "2026-01-01T00:00:00Z",
+  }));
+  const setup = await testRender(<ScrollHarness rows={rows} annotations={annotations} />, {
+    width: 60,
+    height: 12,
+  });
+  await setup.waitForVisualIdle();
+  const scrollbox = findById(setup.renderer.root, "diff-scroll") as ScrollBoxRenderable;
+
+  // the cursor row is the one painted with the cursor background
+  const cursorScreenRow = (): number => {
+    const lines = setup.captureSpans().lines;
+    for (let index = 0; index < lines.length; index++) {
+      if (lines[index]!.spans.some((span) => hex(span.bg) === DARK.cursorBackground)) return index;
+    }
+    return -1;
+  };
+
+  // Act - walk the cursor down through the whole diff, sampling the scroll each step
+  const scrollTops: number[] = [];
+  const screenRows: number[] = [];
+  for (let step = 0; step < rows.length; step++) {
+    scrollTops.push(scrollbox.scrollTop);
+    screenRows.push(cursorScreenRow());
+    await press(setup, "j");
+  }
+
+  // Assert - scrollTop only ever grows going down (never rebounds/jitters)
+  for (let step = 1; step < scrollTops.length; step++) {
+    expect(scrollTops[step]!).toBeGreaterThanOrEqual(scrollTops[step - 1]!);
+  }
+
+  // Assert - the cursor never scrolls off screen (the pre-fix bug walked it off
+  // the viewport as it passed each wrapped card)
+  expect(screenRows.every((row) => row >= 0)).toBe(true);
+
+  // Assert - through the steady scroll region (not the initial fill, not the
+  // final clamp at the content end) the cursor holds ONE stable row near the
+  // bottom; pre-fix it drifted down a row per wrapped card
+  const maxScroll = scrollbox.scrollHeight - scrollbox.height;
+  const steadyRows = screenRows.filter(
+    (_, step) => scrollTops[step]! > 0 && scrollTops[step]! < maxScroll,
+  );
+  expect(steadyRows.length).toBeGreaterThan(0);
+  expect(new Set(steadyRows).size).toBe(1);
+  const pinnedRow = steadyRows[0]!;
+  const viewportBottom = scrollbox.height;
+  // the cursor sits a couple of rows inside the bottom edge, per the follow rule
+  expect(viewportBottom - pinnedRow).toBeGreaterThanOrEqual(2);
+  expect(viewportBottom - pinnedRow).toBeLessThanOrEqual(3);
+
+  setup.renderer.destroy();
+}, 25000);

package/src/components/DiffSheet.stories.tsx

@@ -12,12 +12,43 @@ export const SignedRows: Story = {
   size: { width: 90, height: 16 },
 };
 
+// A modified line keeps the diff color on the changed words and dims the
+// unchanged prefix to the dim token, so the intra-line change stands out.
+export const IntralineWordDiff: Story = {
+  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
+  expectedColors: [DARK.insertedForeground, DARK.deletedForeground, DARK.textDim],
+  size: { width: 90, height: 16 },
+};
+
 export const CursorOnAddedLine: Story = {
   render: () => <DiffSheet rows={fixtureDiffRows()} cursor={4} annotations={[]} />,
   expectedColors: [DARK.cursorBackground],
   size: { width: 90, height: 16 },
 };
 
+export const ComposingOnLine: Story = {
+  render: () => (
+    <DiffSheet
+      rows={fixtureDiffRows()}
+      cursor={4}
+      annotations={[]}
+      compose={{
+        kind: "comment",
+        rowIndex: 4,
+        quote: "  private items = new Map();",
+        draft: {
+          text: "Map needs an eviction story.",
+          onInput: () => {},
+          onSave: () => {},
+          onCancel: () => {},
+        },
+      }}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 16 },
+};
+
 export const AnnotatedLine: Story = {
   render: () => (
     <DiffSheet
@@ -29,7 +60,10 @@ export const AnnotatedLine: Story = {
           kind: "comment",
           anchor: {
             // diff anchors quote the row text verbatim, trailing newline included
-            quote: FIXTURE_PATCH.split("\n").find((line) => line.startsWith("+  "))!.slice(1) + "\n",
+            quote:
+              FIXTURE_PATCH.split("\n")
+                .find((line) => line.startsWith("+  "))!
+                .slice(1) + "\n",
             prefix: "",
             suffix: "",
           },

package/src/components/DiffSheet.syntax.test.tsx

@@ -0,0 +1,62 @@
+import { afterEach, beforeEach, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import type { RGBA } from "@opentui/core";
+import React from "react";
+import { DiffSheet } from "./DiffSheet";
+import { diffRows } from "../view-diff";
+import { DARK } from "../theme";
+import { allowEventLoopUpdates } from "../test-support";
+
+const PATCH = `diff --git a/src/x.ts b/src/x.ts
+--- a/src/x.ts
++++ b/src/x.ts
+@@ -1,3 +1,3 @@
+ export class Store {
+-  const limit = 100;
++  const limit = 250;
+ }
+`;
+
+function hex(color: RGBA): string {
+  const [red, green, blue] = color.toInts();
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+beforeEach(() => allowEventLoopUpdates());
+afterEach(() => allowEventLoopUpdates());
+
+test("renders tree-sitter colors, with the changed word in the diff color on top", async () => {
+  // Arrange
+  const setup = await testRender(<DiffSheet rows={diffRows(PATCH)} cursor={0} annotations={[]} />, {
+    width: 60,
+    height: 12,
+  });
+
+  // Act
+  // syntax highlighting resolves off the render path; pump until a keyword paints
+  let keywordAccent = false;
+  for (let attempt = 0; attempt < 60 && !keywordAccent; attempt++) {
+    await setup.renderOnce();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    for (const line of setup.captureSpans().lines) {
+      for (const span of line.spans) {
+        if (span.text.includes("export") && hex(span.fg) === DARK.accent) keywordAccent = true;
+      }
+    }
+  }
+
+  // Assert
+  expect(keywordAccent).toBe(true);
+  // the intra-line changed number keeps the diff color over its syntax color
+  const changedColors = new Set<string>();
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (span.text.includes("250")) changedColors.add(hex(span.fg));
+      if (span.text.includes("100")) changedColors.add(hex(span.fg));
+    }
+  }
+  expect(changedColors.has(DARK.insertedForeground)).toBe(true);
+  expect(changedColors.has(DARK.deletedForeground)).toBe(true);
+
+  setup.renderer.destroy();
+}, 25000);

package/src/components/DiffSheet.tsx

@@ -1,75 +1,101 @@
 /**
- * The diff review sheet: every row of the patch renders (no window cap)
- * inside a scrollbox, with file headers, hunk headers, and contiguous line
- * chunks. Line chunks draw through the native line-number gutter - custom
- * numbers per row (old numbers on deletions), the cursor as a gutter sign,
- * and annotation markers as line signs. Chunks split after an annotated row
- * so the annotation body renders directly under its line.
+ * The diff review sheet: a thin renderer over diff-sheet-layout. Rows render (no
+ * window cap) in a scrollbox with file/hunk headers and contiguous code chunks.
+ * A chunk draws through the native line-number gutter - custom numbers per row,
+ * the cursor as a gutter sign, annotation markers as line signs - and closes
+ * after an annotated row so the annotation body sits under its line. A
+ * curated-out row renders struck through.
  */
 
-import React, { useEffect, useMemo, useRef } from "react";
-import type { LineNumberRenderable, LineSign, ScrollBoxRenderable } from "@opentui/core";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  createTextAttributes,
+  type LineNumberRenderable,
+  type LineSign,
+  type ScrollBoxRenderable,
+} from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import type { DiffRow } from "../view-diff";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { truncateToSingleLine } from "./truncate-text";
+import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+import { intralineRunsByRow, type IntralineRun } from "../diff-intraline";
+import { highlightDiffRows, type SyntaxSpan } from "../diff-syntax";
+import {
+  annotatedRowsByIndex,
+  coloredRowSpans,
+  rowContentOffsets,
+  rowLine,
+  segmentRows,
+  type DiffSegment,
+} from "./diff-sheet-layout";
+
+/** Shared empty map so an unresolved/stale highlight state is a stable value. */
+const EMPTY_SYNTAX: Map<number, SyntaxSpan[]> = new Map();
+
+/** Shared empty set so "nothing rejected" is a stable identity for renders. */
+const EMPTY_REJECTED: Set<number> = new Set();
+
+/** A rejected (curated-out) change row renders struck through and dimmed. */
+const REJECTED_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
+
+export interface DiffComposeState {
+  kind: "comment";
+  rowIndex: number;
+  quote: string;
+  draft: AnnotationDraft;
+}
 
 export interface DiffSheetProps {
   rows: DiffRow[];
   cursor: number;
   annotations: Annotation[];
   focusedAnnotationId?: string;
+  /** Row indices the owner rejected during curation; drawn struck through. */
+  rejectedRows?: Set<number>;
+  compose?: DiffComposeState | null;
   theme?: Theme;
 }
 
-type DiffSegment =
-  | { kind: "header"; rowIndex: number; row: DiffRow }
-  | { kind: "chunk"; firstRowIndex: number; rows: DiffRow[]; annotation: Annotation | null };
-
-/** Row text carries the patch's trailing newline; rendering strips it. */
-function rowLine(row: DiffRow): string {
-  return row.text.replace(/\n$/, "");
-}
-
-/** Chunks split after an annotated row so its card can sit directly below. */
-function segmentRows(rows: DiffRow[], annotatedByRow: Map<number, Annotation>): DiffSegment[] {
-  const segments: DiffSegment[] = [];
-  let chunk: DiffRow[] = [];
-  let chunkStart = 0;
-  const closeChunk = (annotation: Annotation | null): void => {
-    if (chunk.length) segments.push({ kind: "chunk", firstRowIndex: chunkStart, rows: chunk, annotation });
-    chunk = [];
-  };
-  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-    const row = rows[rowIndex]!;
-    if (row.kind === "file" || row.kind === "hunk") {
-      closeChunk(null);
-      segments.push({ kind: "header", rowIndex, row });
-      chunkStart = rowIndex + 1;
-      continue;
-    }
-    if (!chunk.length) chunkStart = rowIndex;
-    chunk.push(row);
-    const annotation = annotatedByRow.get(rowIndex);
-    if (annotation) {
-      closeChunk(annotation);
-      chunkStart = rowIndex + 1;
-    }
-  }
-  closeChunk(null);
-  return segments;
+/** The sign, base color, and background a row draws with. */
+function rowStyle(
+  row: DiffRow,
+  isCursorRow: boolean,
+  isAnnotatedRow: boolean,
+  tokens: Theme,
+): { sign: string; baseColor: string; background: string | undefined } {
+  const sign = row.kind === "add" ? "+" : row.kind === "del" ? "-" : " ";
+  const baseColor =
+    row.kind === "add"
+      ? tokens.insertedForeground
+      : row.kind === "del"
+        ? tokens.deletedForeground
+        : tokens.textMuted;
+  const background = isCursorRow
+    ? tokens.cursorBackground
+    : isAnnotatedRow
+      ? tokens.markCommentBackground
+      : undefined;
+  return { sign, baseColor, background };
 }
 
 function DiffChunk({
   segment,
   cursor,
   focusedAnnotationId,
+  intralineByRow,
+  syntaxByRow,
+  rejectedRows,
   theme,
 }: {
   segment: Extract<DiffSegment, { kind: "chunk" }>;
   cursor: number;
   focusedAnnotationId?: string;
+  intralineByRow: Map<number, IntralineRun[]>;
+  syntaxByRow: Map<number, SyntaxSpan[]>;
+  rejectedRows: Set<number>;
   theme?: Theme;
 }): React.ReactNode {
   const tokens = useComponentTheme(theme);
@@ -100,16 +126,21 @@ function DiffChunk({
     // the renderable's config parser requires the gutter key to be present
     const colors = new Map<number, { gutter: string | undefined; content: string }>();
     if (segment.annotation) {
-      colors.set(segment.rows.length - 1, { gutter: undefined, content: tokens.markCommentBackground });
+      colors.set(segment.rows.length - 1, {
+        gutter: undefined,
+        content: tokens.markCommentBackground,
+      });
     }
     if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
-      colors.set(cursorInChunk, { gutter: tokens.cursorBackground, content: tokens.cursorBackground });
+      colors.set(cursorInChunk, {
+        gutter: tokens.cursorBackground,
+        content: tokens.cursorBackground,
+      });
     }
     return colors;
   }, [segment, cursorInChunk, tokens]);
 
-  // gutter state flows through the imperative surface: the renderable keeps
-  // no prop setters for these maps, so updates land via effects
+  // the gutter renderable has no prop setters for these maps, so they land via an effect
   useEffect(() => {
     const gutter = gutterRef.current;
     if (!gutter) return;
@@ -132,24 +163,60 @@ function DiffChunk({
       >
         <text style={{ wrapMode: "none" }} selectable={false}>
           {segment.rows.map((row, lineIndex) => {
-            const sign = row.kind === "add" ? "+" : row.kind === "del" ? "-" : " ";
-            const foreground = row.kind === "add" ? tokens.insertedForeground : row.kind === "del" ? tokens.deletedForeground : tokens.textMuted;
             const isCursorRow = lineIndex === cursorInChunk;
-            const isAnnotatedRow = segment.annotation !== null && lineIndex === segment.rows.length - 1;
+            const isAnnotatedRow =
+              segment.annotation !== null && lineIndex === segment.rows.length - 1;
+            const { sign, baseColor, background } = rowStyle(
+              row,
+              isCursorRow,
+              isAnnotatedRow,
+              tokens,
+            );
+            const prefix = (lineIndex > 0 ? "\n" : "") + sign;
+            const absoluteRowIndex = segment.firstRowIndex + lineIndex;
+
+            // A rejected change collapses to one struck-through, dimmed span, so
+            // it reads as excluded regardless of its syntax or intra-line colors.
+            if (rejectedRows.has(absoluteRowIndex)) {
+              return (
+                <span
+                  key={lineIndex}
+                  fg={tokens.textDim}
+                  bg={background}
+                  attributes={REJECTED_ATTRIBUTES}
+                >
+                  {prefix + rowLine(row)}
+                </span>
+              );
+            }
+
+            const spans = coloredRowSpans(
+              rowLine(row),
+              intralineByRow.get(absoluteRowIndex),
+              syntaxByRow.get(absoluteRowIndex),
+              baseColor,
+              tokens,
+            );
             return (
-              <span
-                key={lineIndex}
-                fg={foreground}
-                bg={isCursorRow ? tokens.cursorBackground : isAnnotatedRow ? tokens.markCommentBackground : undefined}
-              >
-                {(lineIndex > 0 ? "\n" : "") + sign + rowLine(row)}
-              </span>
+              <React.Fragment key={lineIndex}>
+                <span fg={baseColor} bg={background}>
+                  {prefix}
+                </span>
+                {spans.map((span, spanIndex) => (
+                  <span key={spanIndex} fg={span.foreground} bg={background}>
+                    {span.text}
+                  </span>
+                ))}
+              </React.Fragment>
             );
           })}
         </text>
       </line-number>
+
       {segment.annotation ? (
-        <text>
+        // one row exactly: wrapMode none keeps the model's 1-line-per-card offset
+        // honest, so the cursor-follow scroll never drifts past a wrapped card
+        <text style={{ wrapMode: "none" }}>
           <span fg={tokens.textDim}>{"      "}</span>
           <span fg={segment.annotation.id === focusedAnnotationId ? tokens.text : tokens.accent}>
             ◆ {truncateToSingleLine(segment.annotation.body, 70)}
@@ -160,41 +227,52 @@ function DiffChunk({
   );
 }
 
-export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, theme }: DiffSheetProps): React.ReactNode {
+/** Async tree-sitter highlights, discarded when they belong to superseded rows. */
+function useSyntaxHighlights(rows: DiffRow[]): Map<number, SyntaxSpan[]> {
+  const [highlighted, setHighlighted] = useState<{
+    rows: DiffRow[];
+    byRow: Map<number, SyntaxSpan[]>;
+  }>({
+    rows,
+    byRow: EMPTY_SYNTAX,
+  });
+  useEffect(() => {
+    let active = true;
+    void highlightDiffRows(rows).then((byRow) => {
+      if (active) setHighlighted({ rows, byRow });
+    });
+    return () => {
+      active = false;
+    };
+  }, [rows]);
+  return highlighted.rows === rows ? highlighted.byRow : EMPTY_SYNTAX;
+}
+
+export function DiffSheet({
+  rows,
+  cursor,
+  annotations,
+  focusedAnnotationId,
+  rejectedRows = EMPTY_REJECTED,
+  compose,
+  theme,
+}: DiffSheetProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
 
-  const annotatedByRow = useMemo(() => {
-    const byRow = new Map<number, Annotation>();
-    for (const annotation of annotations) {
-      const rowIndex = rows.findIndex(
-        (row) => row.text === annotation.anchor.quote && (row.kind === "ctx" || row.kind === "add" || row.kind === "del"),
-      );
-      if (rowIndex !== -1) byRow.set(rowIndex, annotation);
-    }
-    return byRow;
-  }, [rows, annotations]);
-
-  const segments = useMemo(() => segmentRows(rows, annotatedByRow), [rows, annotatedByRow]);
-
-  // content y offset per row index, for cursor-following scroll
-  const rowOffsets = useMemo(() => {
-    const offsets: number[] = [];
-    let contentY = 0;
-    for (const segment of segments) {
-      if (segment.kind === "header") {
-        offsets[segment.rowIndex] = contentY;
-        contentY += 1;
-      } else {
-        segment.rows.forEach((_, lineIndex) => {
-          offsets[segment.firstRowIndex + lineIndex] = contentY + lineIndex;
-        });
-        contentY += segment.rows.length + (segment.annotation ? 1 : 0);
-      }
-    }
-    return offsets;
-  }, [segments]);
+  const annotatedByRow = useMemo(
+    () => annotatedRowsByIndex(rows, annotations),
+    [rows, annotations],
+  );
+  const segments = useMemo(
+    () => segmentRows(rows, annotatedByRow, compose?.rowIndex),
+    [rows, annotatedByRow, compose?.rowIndex],
+  );
+  const intralineByRow = useMemo(() => intralineRunsByRow(rows), [rows]);
+  const syntaxByRow = useSyntaxHighlights(rows);
+  const rowOffsets = useMemo(() => rowContentOffsets(segments), [segments]);
 
+  // follow the cursor: keep it a couple of rows inside the viewport
   useEffect(() => {
     const scrollbox = scrollRef.current;
     const cursorOffset = rowOffsets[cursor];
@@ -208,33 +286,67 @@ export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, them
   }, [cursor, rowOffsets]);
 
   return (
-    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
-      <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+    <box
+      style={{
+        flexGrow: 1,
+        flexDirection: "column",
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        paddingLeft: 1,
+        paddingTop: 0,
+      }}
+    >
+      <scrollbox id="diff-scroll" ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
         {segments.map((segment, segmentIndex) => {
           if (segment.kind === "header") {
             const isCursor = segment.rowIndex === cursor;
             if (segment.row.kind === "file") {
               return (
-                <text key={segmentIndex} fg={tokens.text} bg={isCursor ? tokens.cursorBackground : tokens.panel}>
+                <text
+                  key={segmentIndex}
+                  fg={tokens.text}
+                  bg={isCursor ? tokens.cursorBackground : tokens.panel}
+                  style={{ wrapMode: "none" }}
+                >
                   {isCursor ? "▎" : " "}■ {rowLine(segment.row)}
                 </text>
               );
             }
             return (
-              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBackground : undefined}>
+              <text
+                key={segmentIndex}
+                fg={tokens.blue}
+                bg={isCursor ? tokens.cursorBackground : undefined}
+                style={{ wrapMode: "none" }}
+              >
                 {isCursor ? "▎" : " "}
                 {rowLine(segment.row)}
               </text>
             );
           }
+
+          const lastRowIndex = segment.firstRowIndex + segment.rows.length - 1;
           return (
-            <DiffChunk
-              key={segmentIndex}
-              segment={segment}
-              cursor={cursor}
-              focusedAnnotationId={focusedAnnotationId}
-              theme={theme}
-            />
+            <React.Fragment key={segmentIndex}>
+              <DiffChunk
+                segment={segment}
+                cursor={cursor}
+                focusedAnnotationId={focusedAnnotationId}
+                intralineByRow={intralineByRow}
+                syntaxByRow={syntaxByRow}
+                rejectedRows={rejectedRows}
+                theme={theme}
+              />
+              {compose && compose.rowIndex === lastRowIndex ? (
+                <AnnotationCard
+                  kind={compose.kind}
+                  quote={compose.quote}
+                  draft={compose.draft}
+                  theme={theme}
+                />
+              ) : null}
+            </React.Fragment>
           );
         })}
       </scrollbox>

package/src/components/InboxList.stories.tsx

@@ -6,13 +6,26 @@ import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
 
 export const meta: StoryMeta = { title: "InboxList" };
 
+/** InboxList is the body under App's header/menu chrome; a frame gives it height. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ flexDirection: "column", width: "100%", height: "100%" }}>{children}</box>;
+}
+
 export const TwoPending: Story = {
-  render: () => <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />,
-  expectedColors: [DARK.accent, DARK.cursorBackground],
+  render: () => (
+    <BodyFrame>
+      <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />
+    </BodyFrame>
+  ),
+  expectedColors: [DARK.cursorBackground],
   size: { width: 80, height: 12 },
 };
 
 export const Empty: Story = {
-  render: () => <InboxList inbox={[]} cursor={0} />,
+  render: () => (
+    <BodyFrame>
+      <InboxList inbox={[]} cursor={0} />
+    </BodyFrame>
+  ),
   size: { width: 80, height: 8 },
 };