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

package/src/App.submit-confirm.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * The rail submit confirm (tier 2): pressing submit expands the rail's
+ * Submit button into a bordered confirm card - counts, verdict selector,
+ * summary input, word-buttons. Char-frame assertions over the real App
+ * and an in-process daemon, like App.test.tsx.
+ */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DaemonServer } from "@cueloop/daemon";
+import { makeAnchor, parseBlocks, type ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+import { press, settle, waitForText, waitForTextGone } from "./test-support";
+
+const PLAN = `# Migration Plan
+
+## Context
+
+The daemon persists sessions to disk atomically.
+
+## Steps
+
+- move the store
+- add recovery
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-confirm-"));
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: PLAN, meta: { title: "Migration Plan", planPath: "plan.md" } },
+  });
+});
+afterEach(() => {
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp(options: { readOnly?: boolean } = {}) {
+  const setup = await testRender(<App home={home} sessionId={session.id} readOnly={options.readOnly ?? false} />, {
+    width: 120,
+    height: 32,
+  });
+  await waitForText(setup, "cueloop");
+  return setup;
+}
+
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+
+/** Seed annotations directly through the daemon core (all on one block). */
+function seedAnnotations(count: number): void {
+  const blocks = parseBlocks(PLAN);
+  for (let index = 1; index <= count; index++) {
+    server.core.sessionAnnotate(session.id, {
+      id: `a_confirm_${index}`,
+      kind: "comment",
+      anchor: makeAnchor(blocks, 2, 0, 10),
+      body: `note ${String(index).padStart(2, "0")}`,
+    });
+  }
+}
+
+describe("rail submit confirm", () => {
+  test("submit expands the Submit button into the confirm card", async () => {
+    const setup = await renderApp();
+    expect(setup.captureCharFrame()).toContain("Submit review (0)");
+    await press(setup, "enter");
+    const frame = setup.captureCharFrame();
+    // the card: title, honest counts, verdict selector, word-buttons
+    expect(frame).toContain("submit review");
+    expect(frame).toContain("0 annotations · 0 blocking");
+    expect(frame).toContain("[Approve]"); // nothing pending: approve default
+    expect(frame).toContain(" Submit ");
+    expect(frame).toContain(" Cancel ");
+    // key hints live in the status line, not on the buttons
+    expect(frame).toContain("verdict ←/→ · ⏎ submit · esc cancel");
+    // the bottom bar stayed a one-line hint: no detached verdict bar
+    expect(frame).not.toContain("Submit review (0) on ⏎");
+  });
+
+  test("left/right cycles the verdict selector in the card", async () => {
+    const setup = await renderApp();
+    await press(setup, "enter");
+    expect(setup.captureCharFrame()).toContain("[Approve]");
+    await press(setup, "right");
+    expect(setup.captureCharFrame()).toContain("[Changes]");
+    await press(setup, "right");
+    expect(setup.captureCharFrame()).toContain("[Comment]");
+    await press(setup, "left");
+    expect(setup.captureCharFrame()).toContain("[Changes]");
+  });
+
+  test("esc cancels the card and restores the plain Submit button", async () => {
+    const setup = await renderApp();
+    await press(setup, "enter");
+    expect(setup.captureCharFrame()).toContain("[Approve]");
+    await press(setup, "escape");
+    // a bare ESC settles after the parser's escape-sequence window
+    const frame = await waitForTextGone(setup, "[Approve]");
+    expect(frame).not.toContain("0 annotations");
+    expect(frame).toContain("Submit review (0)");
+  });
+
+  test("enter in the card resolves the session through the controller", async () => {
+    seedAnnotations(1);
+    const setup = await renderApp();
+    await press(setup, "enter");
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("1 annotations · 0 blocking");
+    expect(frame).toContain("[Changes]"); // pending items: request changes default
+    await setup.mockInput.typeText("Tighten the steps.");
+    await press(setup, "enter");
+    // the completion flow after submit is unchanged
+    await waitForText(setup, "feedback sent");
+    const stored = server.core.sessionGet(session.id);
+    expect(stored.status).toBe("resolved");
+    expect(stored.verdict!.kind).toBe("request_changes");
+  });
+
+  test("the annotation stack stays scrollable while the card is open", async () => {
+    seedAnnotations(12);
+    const setup = await renderApp();
+    // walk annotation focus to the last card: the rail scrolls it into view
+    for (let index = 0; index < 12; index++) await press(setup, "n");
+    const scrolled = setup.captureCharFrame();
+    expect(scrolled).toContain("note 12");
+    expect(scrolled).not.toContain("note 01");
+    await press(setup, "enter");
+    const opened = setup.captureCharFrame();
+    // the card is pinned outside the scrollbox; the stack above stays
+    // scrolled away from the top when the card takes its space
+    expect(opened).toContain("12 annotations · 0 blocking");
+    expect(opened).not.toContain("note 01");
+    // the stack still scrolls with the card open: wheel over the rail
+    // brings the last card back into view while the confirm card stays put
+    for (let turn = 0; turn < 12; turn++) await setup.mockMouse.scroll(100, 10, "down");
+    await settle(setup);
+    const scrolledWithCard = setup.captureCharFrame();
+    expect(scrolledWithCard).toContain("note 12");
+    expect(scrolledWithCard).toContain("12 annotations · 0 blocking");
+    expect(scrolledWithCard).not.toContain("note 01");
+  });
+
+  test("read-only observers never see the confirm card", async () => {
+    seedAnnotations(1);
+    const setup = await renderApp({ readOnly: true });
+    await press(setup, "enter");
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("observer - read-only");
+    expect(frame).not.toContain("1 annotations");
+    expect(frame).not.toContain("[Changes]");
+    expect(setup.captureCharFrame()).not.toContain("verdict ←/→");
+    expect(server.core.sessionGet(session.id).status).toBe("pending");
+  });
+});

package/src/App.test.tsx

@@ -13,6 +13,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
+import { press, typeText as type, waitForState, waitForText } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -49,35 +50,11 @@ async function renderApp(sessionId?: string) {
     width: 120,
     height: 32,
   });
-  // let the async daemon connect + first fetch land
-  for (let i = 0; i < 40 && !setup.captureCharFrame().includes("cueloop"); i++) {
-    await Bun.sleep(25);
-    await setup.renderOnce();
-  }
-  await setup.renderOnce();
+  // the async daemon connect + first fetch land within the frame wait
+  await waitForText(setup, "cueloop");
   return setup;
 }
 
-type Setup = Awaited<ReturnType<typeof renderApp>>;
-
-/** Drive one key press: letters type as text; named keys use KeyCodes ids. */
-async function press(setup: Setup, k: string): Promise<void> {
-  if (k === "enter") setup.mockInput.pressKey("RETURN");
-  else if (k === "escape") setup.mockInput.pressKey("ESCAPE");
-  else if (k === "backspace") setup.mockInput.pressKey("BACKSPACE");
-  else if (k === "left") setup.mockInput.pressKey("ARROW_LEFT");
-  else if (k === "right") setup.mockInput.pressKey("ARROW_RIGHT");
-  else await type(setup, k);
-  await Bun.sleep(15);
-  await setup.renderOnce();
-}
-
-async function type(setup: Setup, text: string): Promise<void> {
-  await setup.mockInput.typeText(text);
-  await Bun.sleep(15);
-  await setup.renderOnce();
-}
-
 describe("plan rendering", () => {
   test("renders the plan with headings, list markers, and the rail", async () => {
     const setup = await renderApp();
@@ -86,7 +63,7 @@ describe("plan rendering", () => {
     expect(frame).toContain("Context");
     expect(frame).toContain("persists sessions to disk atomically");
     expect(frame).toContain("- move the store");
-    expect(frame).toContain("REVIEW (0)");
+    expect(frame).toContain("Review (0)");
     expect(frame).toContain("Submit review (0)");
   });
 });
@@ -98,7 +75,7 @@ describe("keyboard grammar", () => {
     await press(setup, "j");
     await setup.renderOnce();
     const lines = setup.captureCharFrame().split("\n");
-    const cursorLine = lines.find((l) => l.includes("▎"))!;
+    const cursorLine = lines.find((line) => line.includes("▎"))!;
     expect(cursorLine).toContain("persists sessions");
   });
 
@@ -108,15 +85,13 @@ describe("keyboard grammar", () => {
     await press(setup, "j");
     await press(setup, "c");
     await setup.renderOnce();
-    expect(setup.captureCharFrame()).toContain("COMMENT ON");
+    expect(setup.captureCharFrame()).toContain('comment on "The daemon');
     await type(setup, "Define atomically.");
     await press(setup, "enter");
-    await Bun.sleep(80);
-    await setup.renderOnce();
+    await waitForText(setup, "COMMENT");
     const stored = server.core.sessionGet(session.id);
     expect(stored.annotations.length).toBe(1);
     expect(stored.annotations[0]!.body).toBe("Define atomically.");
-    expect(setup.captureCharFrame()).toContain("COMMENT");
   });
 
   test("span mode: v + l selects words, c anchors the exact span", async () => {
@@ -128,7 +103,7 @@ describe("keyboard grammar", () => {
     await press(setup, "c");
     await type(setup, "Which daemon?");
     await press(setup, "enter");
-    await Bun.sleep(80);
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
     const stored = server.core.sessionGet(session.id);
     expect(stored.annotations[0]!.anchor.quote).toBe("The daemon");
   });
@@ -138,14 +113,10 @@ describe("keyboard grammar", () => {
     // move to "- move the store" (h1, h2, p, h2 = 4 steps in)
     for (let i = 0; i < 4; i++) await press(setup, "j");
     await press(setup, "x");
-    await Bun.sleep(80);
-    await setup.renderOnce();
+    await waitForText(setup, "[cut]");
     expect(server.core.sessionGet(session.id).workingCopy).not.toContain("move the store");
-    expect(setup.captureCharFrame()).toContain("[cut]");
     await press(setup, "x");
-    await Bun.sleep(80);
-    await setup.renderOnce();
-    expect(server.core.sessionGet(session.id).workingCopy).toBeUndefined();
+    await waitForState(setup, () => server.core.sessionGet(session.id).workingCopy === undefined);
   });
 
   test("e runs $EDITOR on the working copy and tracks the diff", async () => {
@@ -156,10 +127,8 @@ describe("keyboard grammar", () => {
     try {
       const setup = await renderApp();
       await press(setup, "e");
-      await Bun.sleep(150);
-      await setup.renderOnce();
+      await waitForText(setup, "[edited]");
       expect(server.core.sessionGet(session.id).workingCopy).toContain("very atomically");
-      expect(setup.captureCharFrame()).toContain("[edited]");
     } finally {
       delete process.env.CUELOOP_EDITOR;
     }
@@ -167,35 +136,33 @@ describe("keyboard grammar", () => {
 });
 
 describe("submit", () => {
-  test("⏎ opens the verdict bar; verdict + summary resolve the session", async () => {
+  test("⏎ opens the rail confirm card; verdict + summary resolve the session", async () => {
     const setup = await renderApp();
     await press(setup, "j");
     await press(setup, "j");
     await press(setup, "c");
     await type(setup, "Needs a phase list.");
     await press(setup, "enter");
-    await Bun.sleep(80);
+    await waitForText(setup, "Review (1)");
     await press(setup, "enter"); // open submit
-    await setup.renderOnce();
-    expect(setup.captureCharFrame()).toContain("[Request changes]");
+    expect(setup.captureCharFrame()).toContain("[Changes]");
     await type(setup, "Expand the steps.");
     await press(setup, "enter");
-    await Bun.sleep(120);
-    await setup.renderOnce();
+    await waitForText(setup, "feedback sent");
     const stored = server.core.sessionGet(session.id);
     expect(stored.status).toBe("resolved");
     expect(stored.verdict!.kind).toBe("request_changes");
     expect(stored.verdict!.feedback).toContain("Needs a phase list.");
-    expect(setup.captureCharFrame()).toContain("resolved: request changes");
+    // submit hands the reviewer back to the agent via the completion overlay
+    expect(setup.captureCharFrame()).toContain("feedback sent");
   });
 
   test("approve via ←/→ verdict cycling", async () => {
     const setup = await renderApp();
     await press(setup, "enter");
-    await setup.renderOnce();
     expect(setup.captureCharFrame()).toContain("[Approve]"); // no pending items → approve default
     await press(setup, "enter");
-    await Bun.sleep(120);
+    await waitForState(setup, () => server.core.sessionGet(session.id).verdict !== undefined);
     expect(server.core.sessionGet(session.id).verdict!.kind).toBe("approve");
   });
 });
@@ -203,15 +170,10 @@ describe("submit", () => {
 describe("inbox", () => {
   test("inbox mode renders and opens a session", async () => {
     const setup = await testRender(<App home={home} />, { width: 120, height: 32 });
-    for (let i = 0; i < 40 && !setup.captureCharFrame().includes("inbox"); i++) {
-      await Bun.sleep(25);
-      await setup.renderOnce();
-    }
+    await waitForText(setup, "inbox");
     expect(setup.captureCharFrame()).toContain("inbox (1 pending)");
     expect(setup.captureCharFrame()).toContain("Migration Plan");
     await press(setup, "enter");
-    await Bun.sleep(80);
-    await setup.renderOnce();
-    expect(setup.captureCharFrame()).toContain("Submit review (0)");
+    await waitForText(setup, "Submit review (0)");
   });
 });

package/src/App.walk.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * The guided walk in the virtual terminal: the wizard steps every
+ * changed file with a plain progress title, ] marks viewed and persists with
+ * the session, esc keeps progress, w resumes at the first unviewed file
+ * (across App instances - the daemon round-trip), the agent-note block
+ * renders only for files carrying a note, and the end card hands over to the
+ * submit confirm with the honest viewed count.
+ */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DaemonServer } from "@cueloop/daemon";
+import type { ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+import { DARK } from "./theme";
+import { press, waitForState, waitForText, waitForTextGone } from "./test-support";
+
+const PATCH = `diff --git a/src/a.ts b/src/a.ts
+index 111..222 100644
+--- a/src/a.ts
++++ b/src/a.ts
+@@ -1,2 +1,2 @@
+ export const a = 1;
+-export const b = 2;
++export const b = 3;
+diff --git a/src/b.ts b/src/b.ts
+index 333..444 100644
+--- a/src/b.ts
++++ b/src/b.ts
+@@ -1,2 +1,2 @@
+ // header
+-old line
++new line
+diff --git a/src/c.ts b/src/c.ts
+index 555..666 100644
+--- a/src/c.ts
++++ b/src/c.ts
+@@ -1,1 +1,2 @@
+ keep
++added tail
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-walk-"));
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "diff", content: PATCH, meta: { title: "working tree" } },
+  });
+});
+afterEach(() => {
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 34 });
+  // Wait for session content, not just the chrome: pressing w before the diff
+  // loads drops the walk intent (no session, no diff view) and hangs the test.
+  await waitForText(setup, "src/a.ts");
+  return setup;
+}
+
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+
+/** Foreground colors (hex) of every styled span containing the needle. */
+function foregroundsOf(setup: Setup, needle: string): string[] {
+  const foregrounds: string[] = [];
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!span.text.includes(needle)) continue;
+      const [red, green, blue] = span.fg.toInts();
+      foregrounds.push("#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""));
+    }
+  }
+  return foregrounds;
+}
+
+describe("the guided walk", () => {
+  test("w walks all three files: progress title, persisted marks, end card, submit hand-over", async () => {
+    const setup = await renderApp();
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3 · 0 viewed");
+    expect(setup.captureCharFrame()).toContain("src/a.ts");
+    expect(setup.captureCharFrame()).toContain("+1 -1");
+
+    await press(setup, "]");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+    // the viewed mark rides the session record, not the client
+    await waitForState(setup, () => (server.core.sessionGet(session.id).viewedPaths ?? []).includes("src/a.ts"));
+
+    // [ steps back; the revisited card shows its viewed marker
+    await press(setup, "[");
+    await waitForText(setup, "file 1 of 3 · 1 viewed");
+    expect(setup.captureCharFrame()).toContain("· viewed");
+    await press(setup, "]");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+
+    await press(setup, "]");
+    await waitForText(setup, "file 3 of 3 · 2 viewed");
+    await press(setup, "]");
+    await waitForText(setup, "walk complete");
+    expect(setup.captureCharFrame()).toContain("every file viewed (3/3)");
+    expect(server.core.sessionGet(session.id).viewedPaths).toEqual(["src/a.ts", "src/b.ts", "src/c.ts"]);
+
+    // the end card's return leaves the walk and opens the rail confirm
+    await press(setup, "enter");
+    await waitForText(setup, "submit review");
+    expect(setup.captureCharFrame()).toContain("3/3 files viewed");
+    await press(setup, "enter");
+    await waitForState(setup, () => server.core.sessionGet(session.id).status === "resolved");
+  });
+
+  test("esc keeps progress and w resumes at the first unviewed file", async () => {
+    const setup = await renderApp();
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3 · 0 viewed");
+    await press(setup, "]");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+
+    await press(setup, "escape");
+    await waitForTextGone(setup, "file 2 of 3");
+    // the sheet is back at full strength: no wizard card on screen
+    expect(setup.captureCharFrame()).not.toContain("· 1 viewed");
+
+    await press(setup, "w");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+  });
+
+  test("a half-walked review resumes across App instances via the daemon", async () => {
+    const first = await renderApp();
+    await press(first, "w");
+    await waitForText(first, "file 1 of 3 · 0 viewed");
+    await press(first, "]");
+    await press(first, "]");
+    await waitForText(first, "file 3 of 3 · 2 viewed");
+    await waitForState(first, () => (server.core.sessionGet(session.id).viewedPaths ?? []).length === 2);
+    first.renderer.destroy();
+
+    // a fresh client reads the viewed set back from the session record
+    const second = await renderApp();
+    await press(second, "w");
+    await waitForText(second, "file 3 of 3 · 2 viewed");
+    expect(second.captureCharFrame()).toContain("src/c.ts");
+    // two full App boots with daemon round-trips need more than the default budget
+  }, 15_000);
+
+  test("the agent-note block renders only for files carrying a note", async () => {
+    server.core.sessionAnnotate(session.id, {
+      id: "note-b",
+      kind: "note",
+      anchor: { quote: "src/b.ts", prefix: "", suffix: "" },
+      body: "Swaps the stale line for the new constant.",
+    });
+    const setup = await renderApp();
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3");
+    expect(setup.captureCharFrame()).not.toContain("agent note");
+
+    await press(setup, "]");
+    await waitForText(setup, "agent note");
+    expect(setup.captureCharFrame()).toContain("Swaps the stale line for the new constant.");
+
+    // a note is agent context, not reviewer feedback: it neither counts nor
+    // flips the default verdict, and never comes back in the feedback doc
+    await press(setup, "escape");
+    await waitForTextGone(setup, "agent note");
+    await press(setup, "enter");
+    await waitForText(setup, "0 annotations");
+    await press(setup, "enter");
+    await waitForState(setup, () => server.core.sessionGet(session.id).status === "resolved");
+    const resolved = server.core.sessionGet(session.id);
+    expect(resolved.verdict!.kind).toBe("approve");
+    expect(resolved.verdict!.feedback).not.toContain("Swaps the stale line");
+  });
+
+  test("the sheet dims behind the wizard; the preview keeps the diff colors", async () => {
+    const setup = await renderApp();
+    // before the walk the sheet's added line wears the insertion color
+    await waitForText(setup, "+new line");
+    expect(foregroundsOf(setup, "+new line")).toContain(DARK.insFg);
+
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3 · 0 viewed");
+    // dimmed: the sheet line drops to the dim token...
+    expect(foregroundsOf(setup, "+new line")).toEqual([DARK.textDim]);
+    // ...while the wizard preview keeps the insertion color
+    expect(foregroundsOf(setup, "+export const b = 3;")).toContain(DARK.insFg);
+  });
+
+  test("walking a resolved review answers read-only", async () => {
+    server.core.sessionResolve(session.id, "approve", "");
+    const setup = await renderApp();
+    await waitForText(setup, "resolved");
+    await press(setup, "w");
+    await waitForText(setup, "review submitted - read-only");
+    expect(setup.captureCharFrame()).not.toContain("file 1 of 3");
+  });
+});

package/src/components/AnnotationCard.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AnnotationCard } from "./AnnotationCard";
+
+export const meta: StoryMeta = { title: "AnnotationCard" };
+
+const draftCallbacks = { onInput: () => {}, onSave: () => {}, onCancel: () => {} };
+
+export const CommentDraft: Story = {
+  render: () => (
+    <AnnotationCard kind="comment" quote="persists sessions" draft={{ text: "Which daemon?", ...draftCallbacks }} />
+  ),
+  expectedColors: [DARK.accent, DARK.elevated],
+};
+
+export const SuggestionDraft: Story = {
+  render: () => (
+    <AnnotationCard kind="suggestion" quote="move the store" draft={{ text: "", ...draftCallbacks }} />
+  ),
+  expectedColors: [DARK.green],
+};
+
+export const SavedSelected: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="comment"
+      quote="persists sessions"
+      saved={{
+        body: "Which daemon owns this?",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        editing: null,
+        onPress: () => {},
+      }}
+    />
+  ),
+  expectedColors: [DARK.elevated],
+};
+
+export const SavedOrphanBlocking: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="comment"
+      quote="a removed passage"
+      saved={{
+        body: "The passage is gone.",
+        isSelected: false,
+        isOrphan: true,
+        isBlocking: true,
+        editing: null,
+        onPress: () => {},
+      }}
+    />
+  ),
+  expectedColors: [DARK.red],
+};
+
+export const SavedEditing: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="suggestion"
+      quote="move the store"
+      saved={{
+        body: "old body",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        editing: { text: "new body", ...draftCallbacks },
+        onPress: () => {},
+      }}
+    />
+  ),
+};