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

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.21",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.20",
-    "@cueloop/extension-api": "0.1.0-alpha.20",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.20",
-    "@cueloop/schema": "0.1.0-alpha.20",
+    "@cueloop/daemon": "0.1.0-alpha.21",
+    "@cueloop/extension-api": "0.1.0-alpha.21",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.21",
+    "@cueloop/schema": "0.1.0-alpha.21",
     "@opentui/core": "^0.5.1",
     "@opentui/keymap": "0.5.1",
     "@opentui/react": "^0.5.1",

package/src/App.plan-review.test.tsx

@@ -147,6 +147,67 @@ describe("inline compose keeps the anchor painted", () => {
   }, 15_000);
 });
 
+describe("compose newline convention", () => {
+  // Option/Alt and Shift reach the App as `meta`/`shift` on the return key.
+  // modifyOtherKeys encoding preserves those modifiers so the grammar and the
+  // focused textarea can tell a bare submit from a newline.
+  async function renderModifierAwareApp() {
+    const setup = await testRender(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 32,
+      otherModifiersMode: true,
+    });
+    await waitForText(setup, "cueloop");
+    return setup;
+  }
+
+  async function pressReturnWith(setup: Setup, modifiers: { shift?: boolean; meta?: boolean }): Promise<void> {
+    setup.mockInput.pressKey("RETURN", modifiers);
+    await settle(setup);
+  }
+
+  test("option+return inserts a newline; a bare return submits the multiline body", async () => {
+    const setup = await renderModifierAwareApp();
+    await toContextParagraph(setup);
+    await press(setup, "v");
+    await press(setup, "l");
+    await press(setup, "c");
+    await waitForText(setup, 'comment on "The daemon"');
+    await type(setup, "first line");
+    await pressReturnWith(setup, { meta: true }); // option/alt+return -> newline
+    await type(setup, "second line");
+    // still composing: the newline did not submit
+    expect(server.core.sessionGet(session.id).annotations.length).toBe(0);
+    await press(setup, "enter"); // bare return -> save
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.body).toBe("first line\nsecond line");
+  });
+
+  test("shift+return still inserts a newline (existing muscle memory)", async () => {
+    const setup = await renderModifierAwareApp();
+    await toContextParagraph(setup);
+    await press(setup, "c");
+    await type(setup, "alpha");
+    await pressReturnWith(setup, { shift: true }); // shift+return -> newline
+    await type(setup, "beta");
+    expect(server.core.sessionGet(session.id).annotations.length).toBe(0);
+    await press(setup, "enter");
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.body).toBe("alpha\nbeta");
+  });
+
+  test("escape cancels the composer without saving", async () => {
+    const setup = await renderModifierAwareApp();
+    await toContextParagraph(setup);
+    await press(setup, "c");
+    await waitForText(setup, 'comment on "');
+    await type(setup, "never saved");
+    await press(setup, "escape");
+    await waitForTextGone(setup, 'comment on "');
+    expect(server.core.sessionGet(session.id).annotations.length).toBe(0);
+  });
+});
+
 describe("the document selects, the rail edits", () => {
   test("e edits the selected card in place; enter saves through the controller", async () => {
     const setup = await renderApp();

package/src/App.rendering.test.tsx

@@ -69,8 +69,12 @@ describe("code blocks", () => {
 });
 
 describe("block spacing", () => {
+  // the review panel's full-height divider paints a `│` on every row, so read
+  // the plan column (everything left of the divider) before asserting spacing
+  const planColumn = (line: string): string => line.split("│")[0]!.trimEnd();
+
   test("a code block never glues to the list item above it", async () => {
-    const lines = (await frame()).split("\n").map((line) => line.trimEnd());
+    const lines = (await frame()).split("\n").map(planColumn);
     const listItemLineIndex = lines.findIndex((line) => line.includes("wire the duck over MQTT"));
     const codeHeader = lines.findIndex((line) => line.trim().startsWith("tsx"));
     expect(listItemLineIndex).toBeGreaterThan(-1);
@@ -79,7 +83,7 @@ describe("block spacing", () => {
   });
 
   test("a heading never sits directly on the previous block", async () => {
-    const lines = (await frame()).split("\n").map((line) => line.trimEnd());
+    const lines = (await frame()).split("\n").map(planColumn);
     const gate = lines.findIndex((line) => line.trim() === "Gate");
     expect(gate).toBeGreaterThan(0);
     expect(lines[gate - 1]).toBe("");

package/src/App.review-panel.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * The review panel end to end: the b key cycles expanded -> compact -> hidden
+ * -> expanded on the live App, and the collapse mode persists to the user
+ * config so it survives a restart. Rendering details are locked by the
+ * ReviewPanel stories; this suite proves the App wiring and the persistence.
+ */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, 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 { loadConfig } from "./config";
+import { press, waitForText } from "./test-support";
+
+const PLAN = "# Plan\n\nShip the thing.\n";
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+let configPath: string;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-panel-"));
+  configPath = join(home, "config.toml");
+  process.env.CUELOOP_CONFIG = configPath;
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+  });
+});
+afterEach(() => {
+  delete process.env.CUELOOP_CONFIG;
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 30 });
+  await waitForText(setup, "Review");
+  return setup;
+}
+
+describe("review panel", () => {
+  test("b cycles expanded -> compact -> hidden -> expanded", async () => {
+    const setup = await renderApp();
+    expect(setup.captureCharFrame()).toContain("Submit review"); // expanded rail
+
+    await press(setup, "b");
+    let frame = setup.captureCharFrame();
+    expect(frame).toContain("«"); // compact strip shows the expand chevron
+    expect(frame).not.toContain("Submit review");
+
+    await press(setup, "b");
+    frame = setup.captureCharFrame();
+    expect(frame).not.toContain("«"); // hidden: no strip, no divider
+    expect(frame).not.toContain("│");
+
+    await press(setup, "b");
+    expect(setup.captureCharFrame()).toContain("Submit review"); // back to expanded
+  });
+
+  test("the collapse mode persists to the user config", async () => {
+    const setup = await renderApp();
+    await press(setup, "b"); // -> compact
+    expect(loadConfig({ userConfigPath: configPath }).ui.reviewState).toBe("compact");
+  });
+
+  test("] widens the rail and persists the new width", async () => {
+    const setup = await renderApp();
+    const startWidth = loadConfig({ userConfigPath: configPath }).ui.reviewWidth;
+    await press(setup, "]");
+    const widened = loadConfig({ userConfigPath: configPath }).ui.reviewWidth;
+    expect(widened).toBeGreaterThan(startWidth);
+  });
+
+  test("submitting from a hidden panel force-opens the rail so the confirm card is reachable", async () => {
+    const setup = await renderApp();
+    await press(setup, "b"); // -> compact
+    await press(setup, "b"); // -> hidden
+    expect(setup.captureCharFrame()).not.toContain("Submit review"); // rail is gone
+
+    await press(setup, "enter"); // submit while hidden must not trap in an invisible modal
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("submit review"); // the confirm card is visible again
+    expect(frame).toContain("[Approve]");
+
+    // the reveal is live-only: the saved panel preference stays as the user left it
+    expect(loadConfig({ userConfigPath: configPath }).ui.reviewState).toBe("hidden");
+  });
+});

package/src/App.tsx

@@ -11,7 +11,7 @@
 
 import React, { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import type { Clock } from "@opentui/core";
+import type { Clock, MouseEvent } from "@opentui/core";
 import { isAgentNote, type ReviewSession, type VerdictKind } from "@cueloop/schema";
 import { displayText, marksByDisplay, spanKey, startSpan, type Mark, type SpanState } from "./view-plan";
 import { noteForFile, viewedCount } from "./walk";
@@ -26,13 +26,29 @@ import { StatusBar } from "./components/primitives/StatusBar";
 import { Breadcrumb, type BreadcrumbItem } from "./components/Breadcrumb";
 import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
 import { DiffSheet } from "./components/DiffSheet";
-import { ReviewRail, annotationBlocking, type ReviewRailHandle } from "./components/ReviewRail";
+import { annotationBlocking, type ReviewRailHandle } from "./components/ReviewRail";
+import { ReviewPanel } from "./components/ReviewPanel";
+import {
+  REVIEW_DEFAULT_WIDTH,
+  REVIEW_RESIZE_STEP,
+  cycleReviewPanelMode,
+  resolveReviewWidth,
+  toggleReviewPanelMode,
+  widthFromMouseColumn,
+  type ReviewPanelMode,
+} from "./review-panel";
 import { VERDICTS } from "./components/ConfirmCard";
 import { CompletionOverlay } from "./components/CompletionOverlay";
 import { InboxList } from "./components/InboxList";
 import { ComposeBar } from "./components/ComposeBar";
 import { WalkWizard } from "./components/WalkWizard";
 
+/**
+ * The breadcrumb header and the status bar each occupy one terminal row; the
+ * review layout (plan column, divider, rail) gets the rows that remain.
+ */
+const CHROME_ROWS = 2;
+
 export interface AppProps {
   home?: string;
   sessionId?: string;
@@ -78,7 +94,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
     controller.getSnapshot,
   );
   const renderer = useRenderer();
-  const { width: terminalWidth } = useTerminalDimensions();
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
 
   // ── view state ──────────────────────────────
   const [cursor, setCursor] = useState(0);
@@ -86,6 +102,13 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
   const [mode, setMode] = useState<Mode>({ type: "normal" });
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
   const [railTab, setRailTab] = useState<"review" | "agent">("review");
+  // review panel layout: mode + expanded width are client view state, loaded
+  // from and persisted to the user config so they survive a restart. The ref
+  // mirrors the width so the drag-end persist reads the latest value.
+  const [reviewMode, setReviewMode] = useState<ReviewPanelMode>("expanded");
+  const [reviewWidth, setReviewWidth] = useState(REVIEW_DEFAULT_WIDTH);
+  const [dividerDragging, setDividerDragging] = useState(false);
+  const reviewWidthRef = useRef(REVIEW_DEFAULT_WIDTH);
   // ~2s focus pulse on the document highlight when a rail card is activated
   const [pulsedAnnotationId, setPulsedAnnotationId] = useState<string | null>(null);
   const pulseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -103,6 +126,9 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
     keysRef.current = config.keys;
     keyBindings.setKeys(config.keys);
     setTheme(config.theme);
+    setReviewMode(config.ui.reviewState);
+    setReviewWidth(config.ui.reviewWidth);
+    reviewWidthRef.current = config.ui.reviewWidth;
     controller.applyConfig(config);
   }, [session?.workspace.repoRoot, controller, keyBindings]);
   useEffect(
@@ -257,7 +283,10 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
       case "openSubmit":
         if (!session) return;
         liveInput.current = "";
-        // the confirm card lives in the review tab; opening submit reveals it
+        // the confirm card lives in the expanded review rail; a compact or hidden
+        // panel would swallow the whole submit flow, so force the rail open (live
+        // only - the saved panel preference is left untouched)
+        setReviewMode("expanded");
         setRailTab("review");
         return void setMode({ type: "submit", verdict: defaultVerdict(session), summary: "" });
       case "cut":
@@ -317,7 +346,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
         return void setMode({ type: "normal" });
       case "cycleVerdict": {
         if (mode.type !== "submit") return;
-        const verdictIndex = (VERDICTS.indexOf(mode.verdict) + intent.dir + VERDICTS.length) % VERDICTS.length;
+        const verdictIndex = (VERDICTS.indexOf(mode.verdict) + intent.direction + VERDICTS.length) % VERDICTS.length;
         return void setMode({ ...mode, verdict: VERDICTS[verdictIndex]! });
       }
       case "finishReview":
@@ -326,6 +355,18 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
         return controller.optInAutoClose();
       case "dismissCompletion":
         return controller.dismissCompletion();
+      case "cycleReviewPanel": {
+        const next = cycleReviewPanelMode(reviewMode);
+        setReviewMode(next);
+        return controller.saveReviewPanel({ mode: next });
+      }
+      case "resizeReviewPanel": {
+        if (reviewMode !== "expanded") return;
+        const next = resolveReviewWidth(reviewWidth + intent.direction * REVIEW_RESIZE_STEP, terminalWidth);
+        reviewWidthRef.current = next;
+        setReviewWidth(next);
+        return controller.saveReviewPanel({ width: next });
+      }
     }
   };
 
@@ -360,7 +401,8 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
     };
     keyBindings.setContext({ overlay: state.overlay, spanMode: state.spanMode });
     const action = keyBindings.resolveAction({ name: key.name, shift: !!key.shift });
-    for (const intent of reduceKey(state, { name: key.name, shift: !!key.shift }, action)) dispatch(intent);
+    for (const intent of reduceKey(state, { name: key.name, shift: !!key.shift, meta: !!key.meta }, action))
+      dispatch(intent);
   });
 
   // ── render ──────────────────────────────────
@@ -449,6 +491,18 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
     dispatch({ type: "openSubmit" });
   };
 
+  // the clickable chevron toggles expanded <-> compact; the keybinding (b)
+  // cycles all three including hidden
+  const onToggleReviewPanel = (): void => {
+    const next = toggleReviewPanelMode(reviewMode);
+    setReviewMode(next);
+    controller.saveReviewPanel({ mode: next });
+  };
+  // grabbing the divider only arms a drag when there is a width to drag
+  const onDividerGrab = (): void => {
+    if (reviewMode === "expanded") setDividerDragging(true);
+  };
+
   const submitConfirmState =
     mode.type === "submit"
       ? {
@@ -507,11 +561,23 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
             : focusedAnnotationId !== undefined
               ? "card"
               : "normal";
-  const railWidth = terminalWidth >= 100 ? 34 : 28;
 
   return (
     <ThemeProvider theme={theme}>
-      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.bg }}>
+      <box
+        style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.bg }}
+        onMouseDrag={(event: MouseEvent) => {
+          if (!dividerDragging || reviewMode !== "expanded") return;
+          const next = widthFromMouseColumn(event.x, terminalWidth);
+          reviewWidthRef.current = next;
+          setReviewWidth(next);
+        }}
+        onMouseUp={() => {
+          if (!dividerDragging) return;
+          setDividerDragging(false);
+          controller.saveReviewPanel({ width: reviewWidthRef.current });
+        }}
+      >
         <Breadcrumb items={headerItems} />
         <box style={{ flexGrow: 1, flexDirection: "row" }}>
           {isDiff ? (
@@ -537,20 +603,27 @@ export function App({ home, sessionId, readOnly = false, onExit, clock }: AppPro
               onEditRequest={onEditRequest}
             />
           )}
-          <ReviewRail
-            ref={railRef}
-            session={activeSession}
-            selectedId={focusedAnnotationId}
-            resolvedIds={isDiff ? null : resolvedIds}
-            railTab={railTab}
-            pendingCount={pendingCount}
-            cardEdit={cardEditState}
-            submitConfirm={submitConfirmState}
-            onTabChange={setRailTab}
-            onSelectCard={selectCardFromRail}
-            onActivateCard={openCardEdit}
-            onSubmitRequest={onSubmitRequest}
-            width={railWidth}
+          <ReviewPanel
+            mode={reviewMode}
+            width={resolveReviewWidth(reviewWidth, terminalWidth)}
+            height={terminalHeight - CHROME_ROWS}
+            dragging={dividerDragging}
+            onDividerGrab={onDividerGrab}
+            onToggle={onToggleReviewPanel}
+            railRef={railRef}
+            rail={{
+              session: activeSession,
+              selectedId: focusedAnnotationId,
+              resolvedIds: isDiff ? null : resolvedIds,
+              railTab,
+              pendingCount,
+              cardEdit: cardEditState,
+              submitConfirm: submitConfirmState,
+              onTabChange: setRailTab,
+              onSelectCard: selectCardFromRail,
+              onActivateCard: openCardEdit,
+              onSubmitRequest,
+            }}
           />
         </box>
         {mode.type === "compose" && isDiff ? (

package/src/components/AnnotationCard.compose-rows.test.ts

@@ -0,0 +1,49 @@
+/**
+ * The composer's auto-grow row math as a pure function: hard newlines and soft
+ * wrapping both add rows, growth stops at the cap, and a non-positive width
+ * (before layout is known) degrades to a hard-newline count. The live textarea
+ * scrolls internally past the cap, so this only needs to get the growth curve
+ * and the ceiling right.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { COMPOSE_MAX_ROWS, composeRowCount } from "./AnnotationCard";
+
+describe("composeRowCount", () => {
+  const width = 10;
+
+  test("empty and short text are one row", () => {
+    expect(composeRowCount("", width)).toBe(1);
+    expect(composeRowCount("hi", width)).toBe(1);
+    expect(composeRowCount("exactly-10", width)).toBe(1); // length 10 / width 10
+  });
+
+  test("hard newlines add rows", () => {
+    expect(composeRowCount("a\nb", width)).toBe(2);
+    expect(composeRowCount("a\nb\nc", width)).toBe(3);
+    // a blank trailing line still occupies a row
+    expect(composeRowCount("a\n", width)).toBe(2);
+  });
+
+  test("a soft-wrapped long line grows the box", () => {
+    expect(composeRowCount("a".repeat(11), width)).toBe(2); // ceil(11/10)
+    expect(composeRowCount("a".repeat(25), width)).toBe(3); // ceil(25/10)
+  });
+
+  test("wrapping and hard newlines combine", () => {
+    // 1 row for "short" plus ceil(21/10)=3 rows for the long line
+    expect(composeRowCount("short\n" + "b".repeat(21), width)).toBe(4);
+  });
+
+  test("growth is capped", () => {
+    expect(composeRowCount("a".repeat(100), width)).toBe(COMPOSE_MAX_ROWS);
+    expect(composeRowCount("l\ni\nn\ne\ns\nx", width)).toBe(COMPOSE_MAX_ROWS);
+    expect(composeRowCount("a\nb", width, 1)).toBe(1); // custom cap
+  });
+
+  test("a non-positive width counts hard newlines only, never divides by zero", () => {
+    expect(composeRowCount("a".repeat(100), 0)).toBe(1);
+    expect(composeRowCount("a\nb\nc", 0)).toBe(3);
+    expect(composeRowCount("a".repeat(100), -5)).toBe(1);
+  });
+});

package/src/components/AnnotationCard.tsx

@@ -4,11 +4,13 @@
  * its body in place. Compose, saved, and re-edit share this rendering path,
  * so the kind-color and quote treatment can never drift between them.
  *
- * Bodies are multiline: the composer is a textarea (wrap, undo/redo,
- * shift+⏎ for a new line) while plain ⏎ stays the save key.
+ * Bodies are multiline: the composer is a textarea (wrap, undo/redo). Plain ⏎
+ * stays the save key while ⌥/Alt+⏎ and shift+⏎ insert a new line (the Slack
+ * convention). The box auto-grows with the wrapped text up to a cap, then
+ * scrolls internally.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import type { KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
@@ -43,24 +45,63 @@ export interface AnnotationCardProps {
   theme?: Theme;
 }
 
-/** ⏎ saves (the grammar owns it); shift+⏎ makes the body multiline. */
+/**
+ * ⏎ submits (which keeps the textarea from inserting its default newline; the
+ * grammar owns the actual save). ⌥/Alt+⏎ and shift+⏎ insert a newline so the
+ * body can grow multiline without leaving the composer.
+ *
+ * Option/Alt reaches a binding as `meta`, not `option`: a binding key here is
+ * built from name+ctrl+shift+meta+super only, so the newline binding matches on
+ * `meta`. This also overrides the textarea default that maps meta+⏎ to submit.
+ */
 const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
   { name: "return", action: "submit" },
+  { name: "return", meta: true, action: "newline" },
   { name: "return", shift: true, action: "newline" },
 ];
 
-function editorRows(text: string): number {
-  return Math.min(4, Math.max(1, text.split("\n").length));
+/** The composer never grows past this many rows; beyond it the textarea scrolls. */
+export const COMPOSE_MAX_ROWS = 4;
+
+/**
+ * Visible row count for the composer, so a soft-wrapped long line grows the box
+ * just like a hard newline does. Each logical line takes `ceil(length /
+ * contentWidth)` visual rows (at least one), summed over the hard-newline lines
+ * and capped. A non-positive width (before layout is known) counts hard
+ * newlines only. Beyond the cap the textarea scrolls internally and keeps the
+ * caret line in view.
+ */
+export function composeRowCount(text: string, contentWidth: number, cap: number = COMPOSE_MAX_ROWS): number {
+  const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
+  let visualRowCount = 0;
+  for (const line of text.split("\n")) {
+    visualRowCount += Math.max(1, Math.ceil(line.length / usableWidth));
+  }
+  return Math.min(cap, Math.max(1, visualRowCount));
 }
 
-function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }): React.ReactNode {
+function DraftEditor({
+  draft,
+  rows,
+  onRowsChange,
+  theme,
+}: {
+  draft: AnnotationDraft;
+  /** Current visible height in rows; owned by the parent so the card frame agrees. */
+  rows: number;
+  onRowsChange: (rows: number) => void;
+  theme?: Theme;
+}): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const editorRef = useRef<TextareaRenderable | null>(null);
   // re-edit opens with the caret after the existing body, like a text field
   const initialTextLength = useRef(draft.text.length);
   useEffect(() => {
     const editor = editorRef.current;
-    if (editor) editor.cursorOffset = initialTextLength.current;
+    if (!editor) return;
+    editor.cursorOffset = initialTextLength.current;
+    // the box is laid out now, so its width is known: size to the wrapped body
+    onRowsChange(composeRowCount(editor.plainText, editor.width));
   }, []);
   return (
     <>
@@ -72,10 +113,12 @@ function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }
         keyBindings={COMPOSE_KEY_BINDINGS}
         onContentChange={() => {
           const editor = editorRef.current;
-          if (editor) draft.onInput(editor.plainText);
+          if (!editor) return;
+          draft.onInput(editor.plainText);
+          onRowsChange(composeRowCount(editor.plainText, editor.width));
         }}
         style={{
-          height: editorRows(draft.text),
+          height: rows,
           backgroundColor: tokens.elevated,
           focusedBackgroundColor: tokens.elevated,
           textColor: tokens.text,
@@ -97,18 +140,28 @@ function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }
 export function AnnotationCard({ id, kind, quote, draft, saved, theme }: AnnotationCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const kindColor = kind === "suggestion" ? tokens.green : tokens.accent;
+  const activeDraft = draft ?? saved?.editing ?? null;
+  // The composer's visible height, grown from the wrapped text. It is shared
+  // with the card frame (contentRows) so the border never clips the textarea
+  // or the toolbar. Seeded from hard newlines, then corrected once the mounted
+  // textarea reports its measured width.
+  const [editorRowCount, setEditorRowCount] = useState(() =>
+    // Width 0 is the "layout not known yet" contract: count hard newlines only,
+    // until the mounted textarea reports its measured width below.
+    composeRowCount(activeDraft?.text ?? "", 0),
+  );
   if (draft) {
     const verb = kind === "suggestion" ? "suggest replacement for" : "comment on";
     return (
       <Card
         title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
-        contentRows={editorRows(draft.text) + 1}
+        contentRows={editorRowCount + 1}
         borderColor={kindColor}
         marginLeft={2}
         marginRight={2}
         theme={theme}
       >
-        <DraftEditor draft={draft} theme={theme} />
+        <DraftEditor draft={draft} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
       </Card>
     );
   }
@@ -127,7 +180,7 @@ export function AnnotationCard({ id, kind, quote, draft, saved, theme }: Annotat
       </text>
       <text fg={tokens.textDim}>  "{truncateToSingleLine(quote, 26)}"</text>
       {card.editing ? (
-        <DraftEditor draft={card.editing} theme={theme} />
+        <DraftEditor draft={card.editing} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
       ) : (
         <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>  {truncateToSingleLine(card.body, 28)}</text>
       )}