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

package/package.json

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

package/src/App.diff.test.tsx

@@ -72,7 +72,7 @@ describe("diff review", () => {
     await press(setup, "c");
 
     // Assert
-    await waitForText(setup, "COMMENT ON");
+    await waitForText(setup, 'comment on "');
 
     // Act
     await setup.mockInput.typeText("Map needs an eviction story.");

package/src/App.export.test.tsx

@@ -52,7 +52,7 @@ describe("obsidian export on resolve", () => {
     await press(setup, "enter"); // open the submit overlay, keep the default verdict (approve)
 
     // Assert
-    await waitForText(setup, "verdict");
+    await waitForText(setup, "[Approve]");
 
     // Act
     await press(setup, "enter"); // submit

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

@@ -221,7 +221,7 @@ describe("inline compose keeps the anchor painted", () => {
     // Assert
     // compose open: the anchor is painted selection-style. The box can render
     // a frame before the anchor repaint settles, so wait on the color itself.
-    await waitForText(setup, "Save ⏎");
+    await waitForText(setup, "Save");
     expect(setup.captureCharFrame()).toContain("Cancel esc");
     await waitForState(setup, () => backgroundsOf(setup, "The daemon").includes(T.accent));
     expect(backgroundsOf(setup, "The daemon")).toContain(T.accent);
@@ -250,7 +250,7 @@ describe("inline compose keeps the anchor painted", () => {
     // renderApp plus this many frame-waits grazes the 5s default on a loaded CI
     // runner, and the whole-suite publish lane has timed even 15s out; give the
     // heaviest frame-wait chain generous headroom so runner load cannot flake it.
-  }, 30_000);
+  }, 60_000);
 });
 
 describe("compose newline convention", () => {
@@ -432,7 +432,7 @@ describe("addressed annotations leave the open list", () => {
     const frame = setup.captureCharFrame();
     expect(frame).toContain("✓ 1 addressed by revision");
     expect(frame).not.toContain("settled note");
-    expect(frame).toContain("Review (1)"); // the addressed card no longer counts as pending
+    expect(frame).toContain("still open note"); // the open card survives; the addressed one does not
     expect(backgroundsOf(setup, "The daemon")).not.toContain(T.markCommentBackground); // no highlight paint
   });
 });
@@ -444,7 +444,8 @@ describe("sheet header", () => {
 
     // Assert
     const frame = setup.captureCharFrame();
-    expect(frame).toContain("submitted by agent/worker-3 · revision 1");
+    expect(frame).toContain("submitted by agent/worker-3");
+    expect(frame).toContain("rev 1");
     expect(frame).toContain("Edit");
     expect(frame).toContain("Share");
   });
@@ -453,7 +454,7 @@ describe("sheet header", () => {
     // Arrange
     const setup = await renderApp();
     const lines = setup.captureCharFrame().split("\n");
-    const tabRow = lines.findIndex((line) => line.includes("Review (0)"));
+    const tabRow = lines.findIndex((line) => line.includes("Review") && line.includes("Agent"));
     const tabColumn = lines[tabRow]!.indexOf("Agent");
 
     // Act

package/src/App.readonly.test.tsx

@@ -60,15 +60,14 @@ function snapshot() {
 }
 
 describe("observer rendering", () => {
-  test("shows the observer badge and read-only hint bar", async () => {
+  test("shows the observer badge and the bottom menu", async () => {
     // Arrange
     const setup = await renderObserver();
 
     // Assert
     const frame = setup.captureCharFrame();
     expect(frame).toContain("· observer");
-    expect(frame).toContain("observer - read-only · j/k move");
-    expect(frame).not.toContain("⏎ submit");
+    expect(frame).toContain("menu");
   });
 });
 
@@ -88,8 +87,8 @@ describe("observer verbs are blocked", () => {
       await press(setup, key);
       const frame = await waitForText(setup, "observer - read-only");
       // no overlay opened: compose/submit bars never appear
-      expect(frame).not.toContain("COMMENT ON");
-      expect(frame).not.toContain("SUGGEST REPLACEMENT");
+      expect(frame).not.toContain('comment on "');
+      expect(frame).not.toContain('suggest replacement for "');
       expect(frame).not.toContain("verdict ←/→");
       expect(snapshot()).toEqual(before);
     });
@@ -109,7 +108,7 @@ describe("observer verbs are blocked", () => {
     // Assert
     const frame = setup.captureCharFrame();
     expect(frame).toContain("observer - read-only");
-    expect(frame).not.toContain("COMMENT ON");
+    expect(frame).not.toContain('comment on "');
     expect(snapshot().annotations).toBe(0);
   });
 });

package/src/App.rendering.test.tsx

@@ -80,7 +80,8 @@ 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();
+  // the plan body is framed: content sits between the left border and the next │
+  const planColumn = (line: string): string => line.split("│")[1]?.trimEnd() ?? "";
 
   test("a code block never glues to the list item above it", async () => {
     // Arrange

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

@@ -10,7 +10,7 @@ import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
 import { loadConfig } from "./config";
-import { isolateUserConfig, press, waitForText, waitForTextGone } from "./test-support";
+import { isolateUserConfig, press, settle, waitForText, waitForTextGone } from "./test-support";
 
 const PLAN = "# Plan\n\nShip the thing.\n";
 
@@ -47,26 +47,30 @@ describe("review panel", () => {
   test("b cycles expanded -> compact -> hidden -> expanded", async () => {
     // Arrange
     const setup = await renderApp();
+    // the plan frame widens as the rail shrinks: expanded < compact < hidden.
+    // its width is the column of its top-right corner (the first ╮ on the row).
+    const planWidth = () => setup.captureCharFrame().split("\n").find((line) => line.includes("╮"))?.indexOf("╮") ?? 0;
 
-    // Assert
-    expect(setup.captureCharFrame()).toContain("Submit review"); // expanded rail
+    // Assert: expanded shows the submit button and leaves room for the rail
+    expect(setup.captureCharFrame()).toContain("Submit review");
+    const expandedWidth = planWidth();
 
     // Act
     await press(setup, "b");
 
-    // Assert
-    await waitForText(setup, "«");
-    let frame = setup.captureCharFrame();
-    expect(frame).toContain("«"); // compact strip shows the expand chevron
-    expect(frame).not.toContain("Submit review");
+    // Assert: compact drops the submit button and widens the plan (rail is a strip)
+    await waitForTextGone(setup, "Submit review");
+    const compactWidth = planWidth();
+    expect(compactWidth).toBeGreaterThan(expandedWidth);
 
     // Act
     await press(setup, "b");
+    await settle(setup);
 
-    // Assert
-    frame = await waitForTextGone(setup, "«");
-    expect(frame).not.toContain("«"); // hidden: no strip, no divider
-    expect(frame).not.toContain("│");
+    // Assert: hidden spans the plan full width, no rail column
+    const hiddenWidth = planWidth();
+    expect(hiddenWidth).toBeGreaterThan(compactWidth);
+    expect(hiddenWidth).toBeGreaterThan(115);
 
     // Act
     await press(setup, "b");

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

@@ -74,7 +74,7 @@ describe("rail submit confirm", () => {
     const setup = await renderApp();
 
     // Assert
-    expect(setup.captureCharFrame()).toContain("Submit review (0)");
+    expect(setup.captureCharFrame()).toContain("Submit review");
 
     // Act
     await press(setup, "enter");
@@ -88,10 +88,6 @@ describe("rail submit confirm", () => {
     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 () => {
@@ -136,7 +132,7 @@ describe("rail submit confirm", () => {
     // 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)");
+    expect(frame).toContain("Submit review");
   });
 
   test("enter in the card resolves the session through the controller", async () => {

package/src/App.test.tsx

@@ -65,8 +65,8 @@ 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("Submit review (0)");
+    expect(frame).toContain("Review");
+    expect(frame).toContain("Submit review");
   });
 });
 
@@ -179,7 +179,7 @@ describe("submit", () => {
     await press(setup, "c");
     await type(setup, "Needs a phase list.");
     await press(setup, "enter");
-    await waitForText(setup, "Review (1)");
+    await waitForText(setup, "Needs a phase list");
 
     // Act
     await press(setup, "enter"); // open submit
@@ -234,6 +234,6 @@ describe("inbox", () => {
     await press(setup, "enter");
 
     // Assert
-    await waitForText(setup, "Submit review (0)");
+    await waitForText(setup, "Submit review");
   });
 });

package/src/App.toast.test.tsx

@@ -0,0 +1,68 @@
+/** The share toast is non-modal: while it is up, escape still cancels an open overlay. */
+
+import { afterEach, beforeEach, describe, expect, mock, 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";
+
+// the controller reaches the gateway through "./share"; stub it so `S` yields a toast
+const publishShare = mock(async () => ({ line: "ssh p_share01@cueloop.dev", copied: true }));
+mock.module("./share", () => ({
+  publishShare,
+  pullShare: mock(async () => null),
+  pushShare: mock(async () => {}),
+  shareIdFromLine: (line: string) => line.match(/^ssh (\S+)@/)?.[1],
+  collaboratorAnnotations: () => [],
+}));
+
+const { App } = await import("./App");
+const { isolateUserConfig, press, waitForText, waitForTextGone } = await import("./test-support");
+
+const PLAN = `# Migration Plan\n\n## Context\n\nThe daemon persists sessions to disk atomically.\n`;
+
+let home: string;
+let restoreUserConfig: () => void;
+let server: DaemonServer;
+let session: ReviewSession;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-toast-"));
+  restoreUserConfig = isolateUserConfig(home);
+  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(() => {
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+describe("share toast", () => {
+  test("escape cancels an open composer even while the toast is up", async () => {
+    // Arrange
+    const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 32 });
+    await waitForText(setup, "cueloop");
+
+    // Act: share raises the toast, then open a composer under it
+    await press(setup, "S");
+    await waitForText(setup, "share link copied");
+    await press(setup, "j");
+    await press(setup, "j");
+    await press(setup, "c");
+    await waitForText(setup, 'comment on "');
+
+    // Act: escape must reach the composer, not get eaten by the toast
+    await press(setup, "escape");
+
+    // Assert: the composer closed on the first escape
+    await waitForTextGone(setup, 'comment on "');
+  });
+});

package/src/App.tsx

@@ -16,21 +16,27 @@ import { type VerdictKind } from "@cueloop/schema";
 import { displayText, marksByDisplay, type Mark } from "./view-plan";
 import { noteForFile, viewedCount } from "./walk";
 import { DARK, dimmedTheme } from "./theme";
-import { DEFAULT_KEYS, loadConfig, persistAuthorName } from "./config";
+import { DEFAULT_KEYS, loadConfig, persistAuthorName, persistAutoClose, type AutoClose } from "./config";
 import { returnPaneFor } from "@cueloop/schema";
 import { createReviewController } from "./session-controller";
 import type { SessionClient } from "@cueloop/daemon/client";
 import { createIntentDispatch, reviewerAnnotations, type Mode } from "./intent-dispatch";
 import { reduceKey, type KeyState } from "./keymap";
-import { KeyBindings, type HintMode } from "./key-bindings";
+import { KeyBindings } from "./key-bindings";
 import { ThemeProvider } from "./components/theme-context";
-import { StatusBar } from "./components/primitives/StatusBar";
+import { Button } from "./components/primitives/Button";
+import { Toolbar } from "./components/primitives/Toolbar";
+import { MenuBar } from "./components/MenuBar";
+import { KeybindsDialog } from "./components/KeybindsDialog";
+import { SettingsDialog, type SettingsCategory } from "./components/SettingsDialog";
+import { CLIENT_VERSION } from "./version";
 import { Breadcrumb, type BreadcrumbItem } from "./components/Breadcrumb";
 import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
 import { DiffSheet } from "./components/DiffSheet";
 import { annotationBlocking, type ReviewRailHandle } from "./components/ReviewRail";
 import { ReviewPanel } from "./components/ReviewPanel";
 import {
+  REVIEW_COMPACT_WIDTH,
   REVIEW_DEFAULT_WIDTH,
   resolveReviewWidth,
   toggleReviewPanelMode,
@@ -41,14 +47,11 @@ import { CompletionOverlay } from "./components/CompletionOverlay";
 import { InboxList } from "./components/InboxList";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { PromptDialog } from "./components/PromptDialog";
-import { ComposeBar } from "./components/ComposeBar";
 import { WalkWizard } from "./components/WalkWizard";
+import { Toast } from "./components/Toast";
 
-/**
- * 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;
+/** A toast clears itself after this idle; esc dismisses it sooner. */
+const TOAST_DISMISS_MS = 4000;
 
 export interface AppProps {
   home?: string;
@@ -94,7 +97,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     controller.connect();
     return () => controller.close();
   }, [controller]);
-  const { session, inbox, status, error, completion, editOrphanCount, walk } = useSyncExternalStore(
+  const { session, inbox, status, toast, error, completion, editOrphanCount, walk } = useSyncExternalStore(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot,
@@ -106,12 +109,21 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     return controller.startSharePoll();
   }, [isOwner, session?.id, session?.shareId, controller]);
   const renderer = useRenderer();
-  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const { width: terminalWidth } = useTerminalDimensions();
 
   // ── view state ──────────────────────────────
   const [cursor, setCursor] = useState(0);
   const [inboxCursor, setInboxCursor] = useState(0);
   const [mode, setMode] = useState<Mode>({ type: "normal" });
+  // the bottom-left menu drop-up and the centered dialog it opens
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
+  const [autoClose, setAutoClose] = useState<AutoClose>("off");
+  const [settingsNav, setSettingsNav] = useState<{ categoryId: string; rowIndex: number; zone: "nav" | "body" }>({
+    categoryId: "general",
+    rowIndex: 0,
+    zone: "body",
+  });
   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
@@ -143,6 +155,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     setReviewWidth(config.ui.reviewWidth);
     reviewWidthRef.current = config.ui.reviewWidth;
     setAuthorNames(config.authors);
+    setAutoClose(config.ui.autoClose);
     controller.applyConfig(config);
   }, [session?.workspace.repoRoot, controller, keyBindings]);
   useEffect(
@@ -152,6 +165,12 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     [],
   );
 
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(() => controller.dismissToast(), TOAST_DISMISS_MS);
+    return () => clearTimeout(timer);
+  }, [toast, controller]);
+
   // First open of a share: ask the collaborator for a display name once, unless
   // a past visit already recorded one. esc skips and their notes read anonymous.
   const promptedSelfRef = useRef(false);
@@ -300,7 +319,57 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               ? "walk"
               : "none";
 
+  // ── settings dialog: config-backed model, navigation, persistence ──
+  const settingsCategories: SettingsCategory[] = [
+    {
+      id: "general",
+      name: "General",
+      description: "submission behaviour",
+      rows: [{ key: "autoClose", label: "Auto-close on submit", kind: "cycle", options: ["off", "3s", "10s"] }],
+    },
+    {
+      id: "display",
+      name: "Display",
+      description: "the review panel",
+      rows: [{ key: "reviewPanel", label: "Review panel", kind: "cycle", options: ["expanded", "compact", "hidden"] }],
+    },
+  ];
+  const settingsValues = { autoClose: autoClose === "off" ? "off" : `${autoClose}s`, reviewPanel: reviewMode };
+  const cycleSetting = (rowKey: string): void => {
+    if (rowKey === "autoClose") {
+      const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
+      setAutoClose(next);
+      persistAutoClose(next);
+    } else if (rowKey === "reviewPanel") {
+      const order: ReviewPanelMode[] = ["expanded", "compact", "hidden"];
+      const next = order[(order.indexOf(reviewMode) + 1) % order.length]!;
+      setReviewMode(next);
+      controller.saveReviewPanel({ mode: next });
+    }
+  };
+  const handleSettingsKey = (name: string): void => {
+    if (name === "escape") return void setMenuDialog(null);
+    const categoryIndex = settingsCategories.findIndex((category) => category.id === settingsNav.categoryId);
+    const category = settingsCategories[categoryIndex]!;
+    if (settingsNav.zone === "nav") {
+      if (name === "j" || name === "down") setSettingsNav({ categoryId: settingsCategories[Math.min(settingsCategories.length - 1, categoryIndex + 1)]!.id, rowIndex: 0, zone: "nav" });
+      else if (name === "k" || name === "up") setSettingsNav({ categoryId: settingsCategories[Math.max(0, categoryIndex - 1)]!.id, rowIndex: 0, zone: "nav" });
+      else if (name === "l" || name === "tab" || name === "return") setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: 0 }));
+      return;
+    }
+    if (name === "j" || name === "down") setSettingsNav((state) => ({ ...state, rowIndex: Math.min(category.rows.length - 1, state.rowIndex + 1) }));
+    else if (name === "k" || name === "up") setSettingsNav((state) => ({ ...state, rowIndex: Math.max(0, state.rowIndex - 1) }));
+    else if (name === "h" || name === "tab") setSettingsNav((state) => ({ ...state, zone: "nav" }));
+    else if (name === "return" || name === "space") cycleSetting(category.rows[settingsNav.rowIndex]!.key);
+  };
+
   useKeyboard((key) => {
+    if (menuDialog === "settings") return void handleSettingsKey(key.name);
+    if (menuDialog) return void (key.name === "escape" && setMenuDialog(null));
+    if (menuOpen) return void (key.name === "escape" && setMenuOpen(false));
+    // the toast is non-modal: escape only dismisses it when nothing else owns
+    // escape, so an open overlay (compose, submit, prompt, walk) still cancels
+    if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span") return controller.dismissToast();
     const state: KeyState = {
       keys: keysRef.current,
       readOnly: observer,
@@ -398,6 +467,24 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
         }
       : null;
 
+  const diffComposeState =
+    mode.type === "compose" && isDiff
+      ? {
+          kind: mode.kind,
+          rowIndex: mode.displayIndex,
+          quote: rows[mode.displayIndex]?.text.replace(/\n$/, "") ?? "",
+          draft: {
+            text: mode.text,
+            onInput: (text: string) => {
+              liveInput.current = text;
+              setMode({ ...mode, text });
+            },
+            onSave: () => dispatch({ type: "saveCompose" }),
+            onCancel: () => dispatch({ type: "closeOverlay" }),
+          },
+        }
+      : null;
+
   const activeSpan =
     mode.type === "span"
       ? { displayIndex: mode.span.displayIndex, start: mode.span.start, end: mode.span.end }
@@ -484,32 +571,24 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
         }
       : null;
 
+  // width the review panel occupies (divider + rail), so the header can reserve
+  // it and keep Edit/Share pinned to the plan sheet's right edge, not the rail's
+  const railFootprint =
+    reviewMode === "hidden"
+      ? 0
+      : 1 + (reviewMode === "compact" ? REVIEW_COMPACT_WIDTH : resolveReviewWidth(reviewWidth, terminalWidth));
+
+  // status badges sit right after the product word so they survive a header
+  // that is too narrow for the whole trail (the rail can eat the width)
   const headerItems: BreadcrumbItem[] = [
     { label: "cueloop", tone: "accent" },
-    { label: `${activeSession.artifact.meta.title ?? activeSession.artifact.meta.planPath ?? activeSession.id} · rev ${activeSession.revisions.length}`, tone: "dim" },
     ...(resolved ? [{ label: `resolved: ${activeSession.verdict!.kind.replace("_", " ")}`, tone: "green" as const }] : []),
     ...(observer ? [{ label: "observer", tone: "dim" as const }] : []),
     ...(role === "collaborator" ? [{ label: "shared · your notes save as you go", tone: "dim" as const }] : []),
-    ...(status ? [{ label: status, tone: "accent" as const }] : []),
+    { label: `${activeSession.artifact.meta.title ?? activeSession.artifact.meta.planPath ?? activeSession.id} · rev ${activeSession.revisions.length}`, tone: "dim" },
+    { label: `submitted by ${activeSession.artifact.meta.agent ?? "unknown"}`, tone: "dim" },
   ];
 
-  keyBindings.setContext({ overlay, spanMode: mode.type === "span" });
-  const hintMode: HintMode = observer
-    ? "read-only"
-    : mode.type === "submit"
-      ? "submit"
-      : mode.type === "span"
-        ? "span"
-        : mode.type === "compose" || mode.type === "railEdit"
-          ? "compose"
-          : walking
-            ? "walk"
-            : focusedAnnotationId !== undefined
-              ? "card"
-              : role === "collaborator"
-                ? "collaborator"
-                : "normal";
-
   return (
     <ThemeProvider theme={theme}>
       <box
@@ -526,7 +605,19 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
           controller.saveReviewPanel({ width: reviewWidthRef.current });
         }}
       >
-        <Breadcrumb items={headerItems} />
+        <box style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}>
+          <box style={{ flexGrow: 1, flexDirection: "row", paddingRight: 1 }}>
+            <Breadcrumb items={headerItems} />
+            <box style={{ flexGrow: 1 }} />
+            {isOwner && !isDiff && !resolved ? (
+              <Toolbar>
+                <Button onPress={onEditRequest} theme={theme}>{" Edit "}</Button>
+                <Button onPress={onShareRequest} theme={theme}>{" Share "}</Button>
+              </Toolbar>
+            ) : null}
+          </box>
+          <box style={{ width: railFootprint }} />
+        </box>
         <box style={{ flexGrow: 1, flexDirection: "row" }}>
           {isDiff ? (
             // the sheet dims to reading-quiet colors while the wizard has focus
@@ -535,6 +626,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               cursor={cursor}
               annotations={activeSession.annotations}
               focusedAnnotationId={focusedAnnotationId}
+              compose={diffComposeState}
               theme={walking ? dimmedTheme(theme) : undefined}
             />
           ) : (
@@ -548,16 +640,11 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               compose={composeState}
               editOrphanCount={editOrphanCount}
               onLineActivate={onLineActivate}
-              onEditRequest={onEditRequest}
-              onShareRequest={onShareRequest}
-              canEdit={isOwner}
             />
           )}
           <ReviewPanel
             mode={reviewMode}
             width={resolveReviewWidth(reviewWidth, terminalWidth)}
-            height={terminalHeight - CHROME_ROWS}
-            dragging={dividerDragging}
             onDividerGrab={onDividerGrab}
             onToggle={onToggleReviewPanel}
             railRef={railRef}
@@ -577,19 +664,21 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
             }}
           />
         </box>
-        {mode.type === "compose" && isDiff ? (
-          <ComposeBar
-            kind={mode.kind}
-            quote={rows[mode.displayIndex]?.text ?? ""}
-            text={mode.text}
-            onInput={(text) => {
-              liveInput.current = text;
-              setMode({ ...mode, text });
-            }}
-          />
-        ) : (
-          <StatusBar>{keyBindings.statusHint(hintMode)}</StatusBar>
-        )}
+        <MenuBar
+          open={menuOpen}
+          version={CLIENT_VERSION}
+          status={status}
+          onToggle={() => setMenuOpen((isOpen) => !isOpen)}
+          onSettings={() => {
+            setMenuOpen(false);
+            setMenuDialog("settings");
+          }}
+          onKeybinds={() => {
+            setMenuOpen(false);
+            setMenuDialog("keybinds");
+          }}
+          theme={theme}
+        />
         {walking && walk !== null ? (
           <WalkWizard
             files={walkFileList}
@@ -630,6 +719,21 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
             theme={theme}
           />
         ) : null}
+        {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
+        {menuDialog === "keybinds" ? <KeybindsDialog sections={keyBindings.cheatsheet()} theme={theme} /> : null}
+        {menuDialog === "settings" ? (
+          <SettingsDialog
+            isOpen
+            categories={settingsCategories}
+            values={settingsValues}
+            activeCategoryId={settingsNav.categoryId}
+            activeRowIndex={settingsNav.rowIndex}
+            activeZone={settingsNav.zone}
+            onCategorySelect={(id) => setSettingsNav({ categoryId: id, rowIndex: 0, zone: "body" })}
+            onRowActivate={(row) => cycleSetting(row.key)}
+            theme={theme}
+          />
+        ) : null}
       </box>
     </ThemeProvider>
   );

package/src/App.walk.test.tsx

@@ -190,7 +190,7 @@ describe("the guided walk", () => {
     // two full App boots with daemon round-trips need more than the default
     // budget, and the whole-suite publish lane has timed even 15s out; give the
     // double-boot chain generous headroom so runner load cannot flake it.
-  }, 30_000);
+  }, 60_000);
 
   test("the agent-note block renders only for files carrying a note", async () => {
     // Arrange