@cueloop/client 0.1.0-alpha.2 → 0.1.0-alpha.20

package/src/components/DiffSheet.tsx

@@ -0,0 +1,243 @@
+/**
+ * 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.
+ */
+
+import React, { useEffect, useMemo, useRef } from "react";
+import type { LineNumberRenderable, LineSign, 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";
+
+export interface DiffSheetProps {
+  rows: DiffRow[];
+  cursor: number;
+  annotations: Annotation[];
+  focusedAnnotationId?: string;
+  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;
+}
+
+function DiffChunk({
+  segment,
+  cursor,
+  focusedAnnotationId,
+  theme,
+}: {
+  segment: Extract<DiffSegment, { kind: "chunk" }>;
+  cursor: number;
+  focusedAnnotationId?: string;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const gutterRef = useRef<LineNumberRenderable | null>(null);
+  const cursorInChunk = cursor - segment.firstRowIndex;
+
+  const lineNumbers = useMemo(() => {
+    const numbers = new Map<number, number>();
+    segment.rows.forEach((row, lineIndex) => {
+      const gutterNumber = row.kind === "del" ? row.oldLine : row.newLine;
+      if (gutterNumber !== undefined) numbers.set(lineIndex, gutterNumber);
+    });
+    return numbers;
+  }, [segment]);
+
+  const lineSigns = useMemo(() => {
+    const signs = new Map<number, LineSign>();
+    if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
+      signs.set(cursorInChunk, { before: "▎", beforeColor: tokens.accent });
+    }
+    if (segment.annotation) {
+      signs.set(segment.rows.length - 1, { after: "◆", afterColor: tokens.accent });
+    }
+    return signs;
+  }, [segment, cursorInChunk, tokens]);
+
+  const lineColors = useMemo(() => {
+    // 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.markCommentBg });
+    }
+    if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
+      colors.set(cursorInChunk, { gutter: tokens.cursorBg, content: tokens.cursorBg });
+    }
+    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
+  useEffect(() => {
+    const gutter = gutterRef.current;
+    if (!gutter) return;
+    gutter.setLineNumbers(lineNumbers);
+    gutter.setLineSigns(lineSigns);
+    gutter.clearAllLineColors();
+    for (const [line, colorConfig] of lineColors) gutter.setLineColor(line, colorConfig);
+  }, [lineNumbers, lineSigns, lineColors]);
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <line-number
+        ref={gutterRef}
+        fg={tokens.textDim}
+        bg={tokens.bg}
+        minWidth={4}
+        paddingRight={1}
+        lineNumbers={lineNumbers}
+        lineSigns={lineSigns}
+      >
+        <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.insFg : row.kind === "del" ? tokens.delFg : tokens.textMuted;
+            const isCursorRow = lineIndex === cursorInChunk;
+            const isAnnotatedRow = segment.annotation !== null && lineIndex === segment.rows.length - 1;
+            return (
+              <span
+                key={lineIndex}
+                fg={foreground}
+                bg={isCursorRow ? tokens.cursorBg : isAnnotatedRow ? tokens.markCommentBg : undefined}
+              >
+                {(lineIndex > 0 ? "\n" : "") + sign + rowLine(row)}
+              </span>
+            );
+          })}
+        </text>
+      </line-number>
+      {segment.annotation ? (
+        <text>
+          <span fg={tokens.textDim}>{"      "}</span>
+          <span fg={segment.annotation.id === focusedAnnotationId ? tokens.text : tokens.accent}>
+            ◆ {truncateToSingleLine(segment.annotation.body, 70)}
+          </span>
+        </text>
+      ) : null}
+    </box>
+  );
+}
+
+export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, 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]);
+
+  useEffect(() => {
+    const scrollbox = scrollRef.current;
+    const cursorOffset = rowOffsets[cursor];
+    if (!scrollbox || cursorOffset === undefined) return;
+    const viewportHeight = Math.max(1, scrollbox.height);
+    if (cursorOffset < scrollbox.scrollTop + 2) {
+      scrollbox.scrollTo({ x: 0, y: Math.max(0, cursorOffset - 2) });
+    } else if (cursorOffset > scrollbox.scrollTop + viewportHeight - 3) {
+      scrollbox.scrollTo({ x: 0, y: cursorOffset - viewportHeight + 3 });
+    }
+  }, [cursor, rowOffsets]);
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <scrollbox 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.cursorBg : tokens.panel}>
+                  {isCursor ? "▎" : " "}■ {rowLine(segment.row)}
+                </text>
+              );
+            }
+            return (
+              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBg : undefined}>
+                {isCursor ? "▎" : " "}
+                {rowLine(segment.row)}
+              </text>
+            );
+          }
+          return (
+            <DiffChunk
+              key={segmentIndex}
+              segment={segment}
+              cursor={cursor}
+              focusedAnnotationId={focusedAnnotationId}
+              theme={theme}
+            />
+          );
+        })}
+      </scrollbox>
+    </box>
+  );
+}

package/src/components/InboxList.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { InboxList } from "./InboxList";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "InboxList" };
+
+export const TwoPending: Story = {
+  render: () => <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />,
+  expectedColors: [DARK.accent, DARK.cursorBg],
+  size: { width: 80, height: 12 },
+};
+
+export const Empty: Story = {
+  render: () => <InboxList inbox={[]} cursor={0} />,
+  size: { width: 80, height: 8 },
+};

package/src/components/InboxList.tsx

@@ -0,0 +1,42 @@
+/**
+ * The pending-review inbox: a cursor-driven session list. Selection stays
+ * with the keyboard grammar; the list only renders the snapshot.
+ */
+
+import React from "react";
+import type { ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { StatusBar } from "./primitives/StatusBar";
+
+export interface InboxListProps {
+  inbox: ReviewSession[];
+  cursor: number;
+  theme?: Theme;
+}
+
+export function InboxList({ inbox, cursor, theme }: InboxListProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.bg, padding: 1 }}>
+      <text fg={tokens.accent}>cueloop · inbox ({inbox.length} pending)</text>
+      <text> </text>
+      {inbox.length === 0 ? (
+        <text fg={tokens.textDim}>nothing waiting for review</text>
+      ) : (
+        inbox.map((session, index) => (
+          <text
+            key={session.id}
+            fg={index === cursor ? tokens.text : tokens.textMuted}
+            bg={index === cursor ? tokens.cursorBg : undefined}
+          >
+            {index === cursor ? "▸ " : "  "}
+            {session.artifact.meta.title ?? session.id} · {session.workspace.branch} · {session.artifact.type}
+          </text>
+        ))
+      )}
+      <box style={{ flexGrow: 1 }} />
+      <StatusBar theme={theme}>j/k move · ⏎ open · q quit</StatusBar>
+    </box>
+  );
+}

package/src/components/PlanSheet.stories.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PlanSheet } from "./PlanSheet";
+import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "PlanSheet" };
+
+const callbacks = { onLineActivate: () => {}, onEditRequest: () => {} };
+
+export const AnnotatedPlan: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={fixtureMarks()}
+      cursor={2}
+      activeSpan={null}
+      compose={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.markCommentBg, DARK.markSuggestionBg, DARK.cursorBg],
+  size: { width: 90, height: 28 },
+};
+
+export const SpanSelection: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 28 },
+};
+
+export const InlineCompose: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={{
+        kind: "comment",
+        displayIndex: 2,
+        quote: "The daemon",
+        draft: { text: "Which daemon?", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
+      }}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  size: { width: 90, height: 30 },
+};
+
+export const OrphanBanner: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      editOrphanCount={1}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 90, height: 28 },
+};

package/src/components/PlanSheet.tsx

@@ -0,0 +1,309 @@
+/**
+ * The plan document sheet: header chrome, the reconciliation banner, and the
+ * scrollable block flow. Each prose block renders as one natively wrapped
+ * text (wrapMode "word") beside a marker gutter, so wrapping is the
+ * renderer's job; the sheet keeps the rendered/work offset mapping per block
+ * and exposes an imperative selection surface - the keyboard span drives the
+ * native selection, and a mouse drag reads back as an exact work-text range,
+ * which keeps quote anchors char-precise.
+ */
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useRenderer } from "@opentui/react";
+import type { ScrollBoxRenderable, TextRenderable } from "@opentui/core";
+import type { ReviewSession } from "@cueloop/schema";
+import {
+  blockRuns,
+  displayText,
+  overlayMarks,
+  renderedOffsetFor,
+  revisionDelta,
+  workRangeForRendered,
+  type DisplayBlock,
+  type Mark,
+  type SpanState,
+  type StyleRun,
+} from "../view-plan";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { CodeBlock } from "./CodeBlock";
+import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export interface PlanSelection {
+  displayIndex: number;
+  start: number;
+  end: number;
+}
+
+export interface PlanSheetHandle {
+  /** Work-text range of the current native (mouse) selection, if any. */
+  readSelection(): PlanSelection | null;
+  /** Anchor/extend the renderer's native selection from keyboard span offsets. */
+  driveSpanSelection(span: SpanState): void;
+  clearSelection(): void;
+  revealBlock(displayIndex: number): void;
+}
+
+export interface PlanComposeState {
+  kind: "comment" | "suggestion";
+  displayIndex: number;
+  quote: string;
+  draft: AnnotationDraft;
+}
+
+export interface PlanSheetProps {
+  session: ReviewSession;
+  display: DisplayBlock[];
+  marks: Map<number, Mark[]>;
+  cursor: number;
+  /** Extra selection-style paint on one block (keyboard span or compose anchor). */
+  activeSpan: { displayIndex: number; start: number; end: number } | null;
+  compose: PlanComposeState | null;
+  editOrphanCount: number;
+  onLineActivate: (displayIndex: number) => void;
+  onEditRequest: () => void;
+  theme?: Theme;
+}
+
+interface BlockRef {
+  renderable: TextRenderable;
+  runs: StyleRun[];
+}
+
+/** Screen position of a rendered-text offset inside a wrapped text. */
+function positionOfRenderedOffset(renderable: TextRenderable, renderedOffset: number): { x: number; y: number } {
+  const info = renderable.lineInfo;
+  let lineIndex = 0;
+  for (let index = 0; index < info.lineStartCols.length; index++) {
+    if (info.lineStartCols[index]! <= renderedOffset) lineIndex = index;
+    else break;
+  }
+  return {
+    x: renderable.x + renderedOffset - (info.lineStartCols[lineIndex] ?? 0),
+    y: renderable.y + lineIndex,
+  };
+}
+
+export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function PlanSheet(
+  {
+    session,
+    display,
+    marks,
+    cursor,
+    activeSpan,
+    compose,
+    editOrphanCount,
+    onLineActivate,
+    onEditRequest,
+    theme,
+  }: PlanSheetProps,
+  handleRef,
+): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
+  const blockRefs = useRef(new Map<number, BlockRef>());
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  useImperativeHandle(handleRef, () => ({
+    readSelection: (): PlanSelection | null => {
+      if (!renderer?.hasSelection) return null;
+      const ordered = [...blockRefs.current.entries()].sort(([a], [b]) => a - b);
+      for (const [displayIndex, blockRef] of ordered) {
+        const selection = blockRef.renderable.getSelection();
+        if (!selection || selection.end <= selection.start) continue;
+        const range = workRangeForRendered(blockRef.runs, selection.start, selection.end);
+        if (range) return { displayIndex, ...range };
+      }
+      return null;
+    },
+    driveSpanSelection: (span: SpanState): void => {
+      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;
+      const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
+      const endPosition = positionOfRenderedOffset(blockRef.renderable, renderedEnd);
+      renderer.startSelection(blockRef.renderable, startPosition.x, startPosition.y);
+      renderer.updateSelection(blockRef.renderable, endPosition.x + 1, endPosition.y);
+    },
+    clearSelection: (): void => {
+      renderer?.clearSelection();
+    },
+    revealBlock: (displayIndex: number): void => {
+      try {
+        scrollRef.current?.scrollChildIntoView(`plan-block-${displayIndex}`);
+      } catch {
+        // reveal is best-effort; selection state is already correct
+      }
+    },
+  }));
+
+  const registerBlock = (displayIndex: number, renderable: TextRenderable | null, runs: StyleRun[]): void => {
+    if (renderable) blockRefs.current.set(displayIndex, { renderable, runs });
+    else blockRefs.current.delete(displayIndex);
+  };
+  // stale refs must not survive a shrinking display list
+  useEffect(() => {
+    for (const displayIndex of blockRefs.current.keys()) {
+      if (displayIndex >= display.length) blockRefs.current.delete(displayIndex);
+    }
+  }, [display]);
+
+  const children: React.ReactNode[] = [];
+  for (let displayIndex = 0; displayIndex < display.length; displayIndex++) {
+    const block = display[displayIndex]!;
+    const isCursor = displayIndex === cursor;
+    const gap = topGap(display[displayIndex - 1], block);
+    if (block.kind === "code") {
+      children.push(
+        <CodeBlock
+          key={displayIndex}
+          id={`plan-block-${displayIndex}`}
+          language={(block.work ?? block.base)?.lang}
+          content={displayText(block)}
+          isCursor={isCursor}
+          marginTop={gap}
+          isAnnotated={(marks.get(displayIndex) ?? []).length > 0}
+          changeTag={block.type !== "same" ? tagLabel(block) : undefined}
+          theme={theme}
+        />,
+      );
+    } else {
+      const blockMarks = [...(marks.get(displayIndex) ?? [])];
+      if (activeSpan && activeSpan.displayIndex === displayIndex) {
+        blockMarks.push({ start: activeSpan.start, end: activeSpan.end, role: "kspan" });
+      }
+      const runs = overlayMarks(blockRuns(block, true), blockMarks);
+      // the change tag participates in the rendered text but carries no offsets
+      const mappedRuns: StyleRun[] =
+        block.type !== "same" ? [...runs, { text: ` [${tagLabel(block)}]`, role: "plain", start: null }] : runs;
+      children.push(
+        <box key={displayIndex} id={`plan-block-${displayIndex}`} style={{ flexDirection: "row", marginTop: gap }}>
+          <text selectable={false}>
+            <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
+            <span fg={tokens.textDim}>{marker(block)}</span>
+          </text>
+          <text
+            bg={isCursor ? tokens.cursorBg : undefined}
+            selectable
+            selectionBg={tokens.accent}
+            selectionFg={tokens.accentInk}
+            style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}
+            ref={(renderable: TextRenderable | null) => registerBlock(displayIndex, renderable, mappedRuns)}
+            onMouseUp={() => onLineActivate(displayIndex)}
+          >
+            {runs.map((run, runIndex) => (
+              <span key={runIndex} {...runStyle(run, block, tokens)}>
+                {run.text}
+              </span>
+            ))}
+            {block.type !== "same" ? <span fg={tagColor(block, tokens)}> [{tagLabel(block)}]</span> : null}
+          </text>
+        </box>,
+      );
+    }
+    if (compose && compose.displayIndex === displayIndex) {
+      children.push(
+        <AnnotationCard key={`compose-${displayIndex}`} kind={compose.kind} quote={compose.quote} draft={compose.draft} theme={theme} />,
+      );
+    }
+  }
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+      <SheetHeader session={session} onEditRequest={onEditRequest} theme={theme} />
+      {editOrphanCount > 0 ? (
+        <box style={{ height: 1, backgroundColor: tokens.markCommentBg, paddingLeft: 2 }}>
+          <text fg={tokens.red}>
+            {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.
+          </text>
+        </box>
+      ) : null}
+      <scrollbox ref={scrollRef} style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }} focused={false}>
+        {children}
+      </scrollbox>
+    </box>
+  );
+});
+
+/** Sheet chrome: submitted-by + revision delta left, the Edit word-button right. */
+function SheetHeader({
+  session,
+  onEditRequest,
+  theme,
+}: {
+  session: ReviewSession;
+  onEditRequest: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const revisionCount = session.revisions.length;
+  const previous = revisionCount > 1 ? session.revisions[revisionCount - 2] : undefined;
+  const delta = previous ? revisionDelta(previous.content, session.artifact.content) : null;
+  return (
+    <box style={{ height: 1, flexDirection: "row", paddingLeft: 2, paddingRight: 1 }}>
+      <text fg={tokens.textDim}>
+        submitted by <span fg={tokens.textMuted}>{session.artifact.meta.agent ?? "unknown"}</span> · revision {revisionCount}
+        {delta ? (
+          <span fg={tokens.green}>
+            {" "}· v{revisionCount - 1}→v{revisionCount} +{delta.added} -{delta.removed}
+          </span>
+        ) : null}
+      </text>
+      <box style={{ flexGrow: 1 }} />
+      <Toolbar>
+        <Button onPress={onEditRequest} theme={theme}>
+          {" Edit "}
+        </Button>
+      </Toolbar>
+    </box>
+  );
+}
+
+/** Vertical rhythm: gaps live ABOVE blocks so boundaries never collapse. */
+function topGap(previous: DisplayBlock | undefined, current: DisplayBlock): number {
+  if (!previous) return 0;
+  const tightPair =
+    (current.kind === "li" && previous.kind === "li") || (current.kind === "oli" && previous.kind === "oli");
+  return tightPair ? 0 : 1;
+}
+
+function marker(block: DisplayBlock): string {
+  if (block.kind === "li") return "- ";
+  if (block.kind === "oli") return `${block.orderedItemNumber ?? 1}. `;
+  if (block.kind === "quote") return "▏ ";
+  return "";
+}
+
+function tagLabel(block: DisplayBlock): "cut" | "new" | "edited" {
+  return block.type === "del" ? "cut" : block.type === "add" ? "new" : "edited";
+}
+
+function tagColor(block: DisplayBlock, tokens: Theme): string {
+  return block.type === "del" ? tokens.red : block.type === "add" ? tokens.green : tokens.accent;
+}
+
+function runStyle(run: StyleRun, block: DisplayBlock, tokens: Theme): { fg?: string; bg?: string } {
+  const headingFg = block.kind === "h1" ? tokens.text : block.kind === "h2" || block.kind === "h3" ? tokens.accent : undefined;
+  const struck = block.type === "del";
+  switch (run.role) {
+    case "ins":
+      return { fg: tokens.insFg };
+    case "del":
+      return { fg: tokens.delFg };
+    case "mark-comment":
+      return { fg: tokens.text, bg: tokens.markCommentBg };
+    case "mark-suggestion":
+      return { fg: tokens.text, bg: tokens.markSuggestionBg };
+    case "mark-focus":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "kspan":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    default:
+      return { fg: struck ? tokens.red : (headingFg ?? tokens.text) };
+  }
+}