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

package/src/components/CompletionOverlay.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CompletionOverlay } from "./CompletionOverlay";
+
+export const meta: StoryMeta = { title: "CompletionOverlay" };
+
+export const ApprovedPrompt: Story = {
+  render: () => <CompletionOverlay verdict="approve" completion={{ phase: "prompt" }} status="" />,
+  expectedColors: [DARK.green],
+};
+
+export const FeedbackCounting: Story = {
+  render: () => (
+    <CompletionOverlay
+      verdict="request_changes"
+      completion={{ phase: "counting", remaining: 3 }}
+      status="exported to vault/cueloop/plan.md"
+      returnsTo="agent/worker-3"
+    />
+  ),
+  expectedColors: [DARK.accent],
+};

package/src/components/CompletionOverlay.tsx

@@ -0,0 +1,49 @@
+/**
+ * Post-submit hand-back overlay: the agent is unblocked, the reviewer either
+ * closes now, opts into auto-close, or dismisses back to the resolved view.
+ * The latest status line (e.g. the vault-export path) stays visible here.
+ */
+
+import React from "react";
+import type { VerdictKind } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export interface CompletionOverlayProps {
+  verdict: VerdictKind;
+  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
+  /** Latest status line (e.g. the vault-export path) stays visible here. */
+  status: string;
+  /** Where focus goes on close (the agent's pane), when known. */
+  returnsTo?: string;
+  theme?: Theme;
+}
+
+export function CompletionOverlay({ verdict, completion, status, returnsTo, theme }: CompletionOverlayProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const approved = verdict === "approve";
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.bg,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <text fg={approved ? tokens.green : tokens.accent}>{approved ? "review approved" : "feedback sent"}</text>
+      <text> </text>
+      <text fg={tokens.text}>The agent has your {approved ? "approval" : "feedback"} and is unblocked.</text>
+      {returnsTo ? <text fg={tokens.textDim}>returning to {returnsTo} on close</text> : null}
+      {status ? <text fg={tokens.textDim}>{status}</text> : null}
+      <text> </text>
+      <text fg={tokens.textDim}>
+        close [return]
+        {completion.phase === "counting" ? ` · closing in ${completion.remaining}s` : ""}
+        {" · return to plan [esc] · always [a]"}
+      </text>
+    </box>
+  );
+}

package/src/components/ComposeBar.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ComposeBar } from "./ComposeBar";
+
+export const meta: StoryMeta = { title: "ComposeBar" };
+
+export const CommentOnLine: Story = {
+  render: () => (
+    <ComposeBar kind="comment" quote="  private items = new Map();" text="Map needs an eviction story." onInput={() => {}} />
+  ),
+  expectedColors: [DARK.accent, DARK.elevated],
+};
+
+export const SuggestionOnLine: Story = {
+  render: () => <ComposeBar kind="suggestion" quote="export class Store {" text="" onInput={() => {}} />,
+  expectedColors: [DARK.green],
+};

package/src/components/ComposeBar.tsx

@@ -0,0 +1,54 @@
+/**
+ * Bottom compose bar - the diff view composes annotation bodies here. The
+ * editor is the same multiline textarea contract as the inline composer:
+ * ⏎ saves through the grammar, shift+⏎ adds a line.
+ */
+
+import React, { useRef } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { truncateToSingleLine } from "./truncate-text";
+
+export interface ComposeBarProps {
+  kind: "comment" | "suggestion";
+  quote: string;
+  text: string;
+  onInput: (text: string) => void;
+  theme?: Theme;
+}
+
+const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
+  { name: "return", action: "submit" },
+  { name: "return", shift: true, action: "newline" },
+];
+
+export function ComposeBar({ kind, quote, text, onInput, theme }: ComposeBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const editorRef = useRef<TextareaRenderable | null>(null);
+  const editorRows = Math.min(4, Math.max(1, text.split("\n").length));
+  return (
+    <box style={{ height: 1 + editorRows, backgroundColor: tokens.elevated, flexDirection: "column", paddingLeft: 1 }}>
+      <text fg={kind === "suggestion" ? tokens.green : tokens.accent}>
+        {kind === "suggestion" ? "SUGGEST REPLACEMENT FOR" : "COMMENT ON"} “{truncateToSingleLine(quote, 60)}” · ⏎ save · esc cancel
+      </text>
+      <textarea
+        ref={editorRef}
+        focused
+        initialValue=""
+        keyBindings={COMPOSE_KEY_BINDINGS}
+        onContentChange={() => {
+          const editor = editorRef.current;
+          if (editor) onInput(editor.plainText);
+        }}
+        style={{
+          height: editorRows,
+          backgroundColor: tokens.elevated,
+          focusedBackgroundColor: tokens.elevated,
+          textColor: tokens.text,
+          focusedTextColor: tokens.text,
+        }}
+      />
+    </box>
+  );
+}

package/src/components/ConfirmCard.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ConfirmCard } from "./ConfirmCard";
+
+export const meta: StoryMeta = { title: "ConfirmCard" };
+
+const callbacks = { onInput: () => {}, onSelectVerdict: () => {}, onSubmit: () => {}, onCancel: () => {} };
+
+export const ApproveDefault: Story = {
+  render: () => <ConfirmCard verdict="approve" summary="" annotationCount={0} blockingCount={0} {...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} />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 40, height: 14 },
+};
+
+export const WithViewedSummary: Story = {
+  render: () => (
+    <ConfirmCard
+      verdict="approve"
+      summary=""
+      annotationCount={1}
+      blockingCount={0}
+      viewedSummary="2/3 files viewed"
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.green, DARK.textDim],
+  size: { width: 40, height: 14 },
+};

package/src/components/ConfirmCard.tsx

@@ -0,0 +1,117 @@
+/**
+ * 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.
+ */
+
+import React from "react";
+import type { VerdictKind } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Card } from "./primitives/Card";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
+
+/** Selector words in the confirm card - one word per verdict. */
+export const VERDICT_LABEL: Record<VerdictKind, string> = {
+  comment: "Comment",
+  approve: "Approve",
+  request_changes: "Changes",
+};
+
+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.
+   */
+  viewedSummary?: string;
+  onInput: (summary: string) => void;
+  onSelectVerdict: (verdict: VerdictKind) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  theme?: Theme;
+}
+
+/** Counts, spacer, 1-row verdict selector, spacer, summary input, spacer, buttons. */
+const CONFIRM_CONTENT_ROWS = 7;
+
+export function verdictColor(verdict: VerdictKind, tokens: Theme): string {
+  return verdict === "approve" ? tokens.green : verdict === "request_changes" ? tokens.red : tokens.blue;
+}
+
+/**
+ * The verdict selector: one row of pressable words, matching the reading
+ * direction of a choice between three peers. Selection stays controlled by
+ * the grammar (←/→ cycle the verdict); a click selects directly. The
+ * selected verdict wears brackets and its color.
+ */
+function VerdictSelector({
+  verdict,
+  onSelectVerdict,
+  theme,
+}: {
+  verdict: VerdictKind;
+  onSelectVerdict: (verdict: VerdictKind) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ flexDirection: "row", height: 1 }}>
+      {VERDICTS.map((candidate) => (
+        <box key={candidate} style={{ paddingRight: 1 }} onMouseUp={() => onSelectVerdict(candidate)}>
+          <text fg={candidate === verdict ? verdictColor(candidate, tokens) : tokens.textDim}>
+            {candidate === verdict ? `[${VERDICT_LABEL[candidate]}]` : ` ${VERDICT_LABEL[candidate]} `}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+export function ConfirmCard({
+  verdict,
+  summary,
+  annotationCount,
+  blockingCount,
+  viewedSummary,
+  onInput,
+  onSelectVerdict,
+  onSubmit,
+  onCancel,
+  theme,
+}: ConfirmCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <Card
+      title=" submit review "
+      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 1 : 0)}
+      borderColor={tokens.accent}
+      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 }} />
+      <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
+      <box style={{ height: 1 }} />
+      <input focused value={summary} onInput={onInput} placeholder="summary for the agent (optional)" />
+      <box style={{ height: 1 }} />
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
+          {" Submit "}
+        </Button>
+        <Button onPress={onCancel} theme={theme}>
+          {" Cancel "}
+        </Button>
+      </Toolbar>
+    </Card>
+  );
+}

package/src/components/DiffSheet.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { DiffSheet } from "./DiffSheet";
+import { FIXTURE_PATCH, fixtureDiffRows } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "DiffSheet" };
+
+export const SignedRows: Story = {
+  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
+  expectedColors: [DARK.insFg, DARK.delFg],
+  size: { width: 90, height: 16 },
+};
+
+export const CursorOnAddedLine: Story = {
+  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={4} annotations={[]} />,
+  expectedColors: [DARK.cursorBg],
+  size: { width: 90, height: 16 },
+};
+
+export const AnnotatedLine: Story = {
+  render: () => (
+    <DiffSheet
+      rows={fixtureDiffRows()}
+      cursor={0}
+      annotations={[
+        {
+          id: "a_story_diff",
+          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",
+            prefix: "",
+            suffix: "",
+          },
+          body: "Map needs an eviction story.",
+          createdAt: "2026-01-01T00:00:00Z",
+        },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.markCommentBg],
+  size: { width: 90, height: 16 },
+};

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>
+  );
+}