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

package/src/components/primitives/Button.stories.tsx

@@ -10,13 +10,13 @@ export const Variants: Story = {
   render: () => (
     <Toolbar>
       <Button variant="solid" marginRight={2} onPress={() => {}}>
-        {" Save ⏎ "}
+        {" Save "}
       </Button>
       <Button marginRight={2} onPress={() => {}}>
         {" Cancel esc "}
       </Button>
       <Button variant="accent-text" onPress={() => {}}>
-        {"Submit review (2) ⏎"}
+        {"Submit review"}
       </Button>
     </Toolbar>
   ),

package/src/components/primitives/Dialog.stories.tsx

@@ -11,7 +11,7 @@ export const Open: Story = {
       <text>dialog body content</text>
     </Dialog>
   ),
-  expectedColors: [DARK.accent, DARK.backdrop],
+  expectedColors: [DARK.accent],
   size: { width: 60, height: 16 },
 };
 

package/src/components/primitives/Dialog.tsx

@@ -1,6 +1,7 @@
 /**
- * Centered modal over a dimmed backdrop. The dialog fills the terminal with
- * the backdrop token and centers a bordered panel; content composes inside.
+ * Centered modal: a full-screen layer (backdrop token, transparent by
+ * default) centers a bordered, unpainted panel over the session - the frame
+ * delineates the dialog, the content behind stays visible.
  * `isOpen` keeps the mount decision with the caller-visible prop vocabulary.
  */
 
@@ -14,11 +15,13 @@ export interface DialogProps {
   title?: string;
   width: number;
   height: number;
+  /** Solid panel fill for content-heavy dialogs; default transparent. */
+  background?: string;
   theme?: Theme;
   children: React.ReactNode;
 }
 
-export function Dialog({ isOpen, title, width, height, theme, children }: DialogProps): React.ReactNode {
+export function Dialog({ isOpen, title, width, height, background, theme, children }: DialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   if (!isOpen) return null;
   return (
@@ -41,8 +44,7 @@ export function Dialog({ isOpen, title, width, height, theme, children }: Dialog
           border: true,
           borderStyle: FRAME_BORDER_STYLE,
           borderColor: tokens.accent,
-          /* Floating surface: painted so dialog text never mixes with the page behind. */
-          backgroundColor: tokens.elevated,
+          backgroundColor: background,
           flexDirection: "column",
         }}
         title={title}

package/src/components/primitives/Tabs.tsx

@@ -1,16 +1,15 @@
 /**
- * Tabs / TabList / Tab over the native tab-select renderable. The composition
- * follows the ARIA tabs pattern: Tabs owns the controlled selection
- * (`selectedKey` + `onSelectionChange`), TabList renders the strip, Tab
- * declares one item. Selection stays controlled from outside so the keyboard
- * grammar (not the strip) remains the key owner; clicks map through the
- * native tab geometry.
+ * Tabs / TabList / Tab: a transparent, full-width rounded strip of clickable
+ * text tabs. The composition follows the ARIA tabs pattern: Tabs owns the
+ * controlled selection (`selectedKey` + `onSelectionChange`), TabList renders
+ * the strip, Tab declares one item. Selection stays controlled from outside so
+ * the keyboard grammar remains the key owner; each tab click sets the key.
  */
 
-import React, { createContext, useContext, useEffect, useRef } from "react";
-import type { MouseEvent, TabSelectRenderable } from "@opentui/core";
+import React, { createContext, useContext } from "react";
 import type { Theme } from "../../theme";
 import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
 
 interface TabsContextValue {
   selectedKey: string;
@@ -62,36 +61,18 @@ export function TabList({ children }: TabListProps): React.ReactNode {
       items.push({ id: child.props.id, label: child.props.children });
     }
   });
-  const tabWidth = Math.max(...items.map((item) => item.label.length)) + 2;
-  const selectedIndex = Math.max(
-    0,
-    items.findIndex((item) => item.id === tabs.selectedKey),
-  );
-  const stripRef = useRef<TabSelectRenderable | null>(null);
-  // selection is controlled: mirror the selected key into the native strip
-  useEffect(() => {
-    stripRef.current?.setSelectedIndex(selectedIndex);
-  }, [selectedIndex, items.length]);
-  const onMouseUp = (event: MouseEvent): void => {
-    const strip = stripRef.current;
-    if (!strip) return;
-    const index = Math.floor((event.x - strip.x) / tabWidth);
-    const item = items[index];
-    if (item) tabs.onSelectionChange(item.id);
-  };
   return (
-    <tab-select
-      ref={stripRef}
-      options={items.map((item) => ({ name: item.label, description: "", value: item.id }))}
-      tabWidth={tabWidth}
-      showUnderline={false}
-      showDescription={false}
-      showScrollArrows={false}
-      textColor={tokens.textDim}
-      selectedTextColor={tabs.selectedColor ?? tokens.accent}
-      selectedBackgroundColor={tokens.elevated}
-      onMouseUp={onMouseUp}
-      style={{ height: 1, width: tabWidth * items.length }}
-    />
+    <box
+      style={{ width: "100%", height: 3, border: true, borderStyle: FRAME_BORDER_STYLE, borderColor: tokens.text, flexDirection: "row", paddingLeft: 1 }}
+    >
+      {items.map((item) => {
+        const selected = item.id === tabs.selectedKey;
+        return (
+          <box key={item.id} style={{ marginRight: 2 }} onMouseUp={() => tabs.onSelectionChange(item.id)}>
+            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>{item.label}</text>
+          </box>
+        );
+      })}
+    </box>
   );
 }

package/src/components/stories-app.tsx

@@ -38,7 +38,7 @@ function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () =>
 
   return (
     <ThemeProvider theme={DARK}>
-      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: DARK.bg }}>
+      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: DARK.background }}>
         <box style={{ height: 1, backgroundColor: DARK.panel, paddingLeft: 1 }}>
           <text fg={DARK.text}>
             <span fg={DARK.accent}>cueloop stories</span>

package/src/components/stories.test.tsx

@@ -9,6 +9,7 @@ import { describe, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import { RGBA } from "@opentui/core";
 import { componentFilesMissingStories, loadStories } from "./story";
+import { allowEventLoopUpdates } from "../test-support";
 
 const stories = await loadStories();
 
@@ -35,6 +36,7 @@ describe("stories catalog", () => {
 
       // Act
       const setup = await testRender(story.render(), size);
+      allowEventLoopUpdates();
       await setup.waitForVisualIdle();
       const frame = setup.captureCharFrame();
 

package/src/key-bindings.test.ts

@@ -86,12 +86,12 @@ describe("mode layers own their keys", () => {
 describe("getActiveKeys-generated status hints", () => {
   test("normal mode hint matches the locked string", () => {
     expect(bindings().statusHint("normal")).toBe(
-      "j/k move · v span · drag selects · c comment · s suggest · x cut · e edit · n/p annotations · ⏎ submit · q quit",
+      "j/k move · v span · drag selects · c comment · s suggest · x cut · e edit · n/p annotations · enter submit · q quit",
     );
   });
 
   test("card-selected hint keeps the locked Cut label", () => {
-    expect(bindings().statusHint("card")).toBe("card · e edit · x Cut · n/p cards · esc deselect · ⏎ submit");
+    expect(bindings().statusHint("card")).toBe("card · e edit · x Cut · n/p cards · esc deselect · enter submit");
   });
 
   test("span hint", () => {
@@ -101,11 +101,11 @@ describe("getActiveKeys-generated status hints", () => {
   });
 
   test("compose hint", () => {
-    expect(bindings({ overlay: "compose" }).statusHint("compose")).toBe("typing · ⏎ save · esc cancel");
+    expect(bindings({ overlay: "compose" }).statusHint("compose")).toBe("typing · enter save · esc cancel");
   });
 
   test("submit hint", () => {
-    expect(bindings({ overlay: "submit" }).statusHint("submit")).toBe("verdict ←/→ · ⏎ submit · esc cancel");
+    expect(bindings({ overlay: "submit" }).statusHint("submit")).toBe("verdict ←/→ · enter submit · esc cancel");
   });
 
   test("walk hint", () => {

package/src/key-bindings.ts

@@ -26,6 +26,15 @@ export interface KeyLayerContext {
 /** Hint templates keyed by the same view states the status line shows. */
 export type HintMode = "normal" | "collaborator" | "card" | "span" | "compose" | "submit" | "walk" | "read-only";
 
+export interface CheatsheetEntry {
+  keys: string;
+  label: string;
+}
+export interface CheatsheetSection {
+  title: string;
+  entries: CheatsheetEntry[];
+}
+
 type HintEntry =
   | { text: string }
   | { commands: string[]; label: string; labelFirst?: boolean };
@@ -97,8 +106,8 @@ const HINT_TEMPLATES: Record<HintMode, HintEntry[]> = {
 
 /** Status-line glyphs for named keys. */
 const KEY_GLYPHS: Record<string, string> = {
-  return: "⏎",
-  enter: "⏎",
+  return: "enter",
+  enter: "enter",
   escape: "esc",
   left: "←",
   right: "→",
@@ -360,4 +369,34 @@ export class KeyBindings {
     }
     return fragments.join(" · ");
   }
+
+  /**
+   * The full keybinding cheatsheet, grouped by mode. Each section sets the
+   * layer context so getActiveKeys resolves that mode's real bindings, then
+   * restores it - a rebound key shows its live binding here too.
+   */
+  cheatsheet(): CheatsheetSection[] {
+    const saved = this.context;
+    const build = (context: KeyLayerContext, mode: HintMode, title: string): CheatsheetSection => {
+      this.context = context;
+      const entries: CheatsheetEntry[] = [];
+      for (const entry of HINT_TEMPLATES[mode]) {
+        if ("text" in entry || !entry.label) continue;
+        const keys = entry.commands
+          .map((command) => this.keyDisplayFor(command))
+          .filter((display): display is string => display !== null)
+          .join(" / ");
+        if (keys) entries.push({ keys, label: entry.label });
+      }
+      return { title, entries };
+    };
+    const sections = [
+      build({ overlay: "none", spanMode: false }, "normal", "Review"),
+      build({ overlay: "none", spanMode: true }, "span", "Selection"),
+      build({ overlay: "submit", spanMode: false }, "submit", "Submit"),
+      build({ overlay: "walk", spanMode: false }, "walk", "Walk"),
+    ];
+    this.context = saved;
+    return sections.filter((section) => section.entries.length > 0);
+  }
 }

package/src/serve.test.ts

@@ -85,8 +85,8 @@ describe("cueloop serve", () => {
     // Assert
     expect(bytes).toContain("cueloop");
     expect(bytes).toContain("Rollout Plan");
-    // observer chrome, not the controller's mutating hint bar
-    expect(bytes).toContain("observer - read-only");
+    // observer chrome: the header badge marks the read-only session
+    expect(bytes).toContain("observer");
   });
 
   test("two observers can watch at once", async () => {

package/src/session-controller.share.test.ts

@@ -80,6 +80,19 @@ describe("share", () => {
     // Assert
     expect(client.sessionSetShareId).toHaveBeenCalledWith("ses_1", "p_abc123xy");
   });
+
+  test("surfaces the ssh line as a toast, not an inline status", async () => {
+    // Arrange
+    const { controller } = await connectedController(sessionFixture());
+
+    // Act
+    controller.share();
+    await tick();
+
+    // Assert
+    expect(controller.getSnapshot().toast).toEqual({ body: "ssh p_abc123xy@cueloop.dev", title: "share link copied" });
+    expect(controller.getSnapshot().status).not.toContain("ssh p_abc123xy@cueloop.dev");
+  });
 });
 
 describe("pullShared", () => {

package/src/session-controller.ts

@@ -50,10 +50,16 @@ export const DEFAULT_AUTO_CLOSE = 5;
 /** How often an open shared plan re-pulls collaborator notes (ADR 0005 stage 2). */
 export const SHARE_POLL_MS = 4000;
 
+export interface ToastState {
+  title?: string;
+  body: string;
+}
+
 export interface ControllerSnapshot {
   session: ReviewSession | null;
   inbox: ReviewSession[] | null;
   status: string;
+  toast: ToastState | null;
   error: string | null;
   completion: Completion;
   /**
@@ -96,6 +102,8 @@ export interface ReviewController {
   /** Loaded config parts the controller acts on: auto-close and exporters. */
   applyConfig(config: CueloopConfig): void;
   setStatus(message: string): void;
+  showToast(body: string, title?: string): void;
+  dismissToast(): void;
   /** Derived projections, cached per session identity. */
   display(): DisplayBlock[];
   rows(): DiffRow[];
@@ -161,6 +169,7 @@ class Controller implements ReviewController {
     session: null,
     inbox: null,
     status: "",
+    toast: null,
     error: null,
     completion: { phase: "idle" },
     editOrphanCount: 0,
@@ -248,6 +257,14 @@ class Controller implements ReviewController {
     this.update({ status: message });
   }
 
+  showToast(body: string, title?: string): void {
+    this.update({ toast: { body, title } });
+  }
+
+  dismissToast(): void {
+    if (this.snapshot.toast) this.update({ toast: null });
+  }
+
   // ── derived projections ─────────────────────
   private ensureDerived(): void {
     const session = this.snapshot.session;
@@ -515,7 +532,8 @@ class Controller implements ReviewController {
         // Stamp the id back so a later pull knows which share to collect from.
         const shareId = shareIdFromLine(line);
         if (shareId && this.client) await this.client.sessionSetShareId(session.id, shareId);
-        this.setStatus(copied ? `✓ share link copied - ${line}` : line);
+        this.setStatus(copied ? "✓ share link copied" : "share link ready");
+        this.showToast(line, copied ? "share link copied" : "share link");
       })
       .catch((error: unknown) => this.setStatus(`share failed: ${error instanceof Error ? error.message : String(error)}`));
   }

package/src/test-support.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { loadConfig } from "./config";
+import { isolateUserConfig } from "./test-support";
+
+describe("isolateUserConfig", () => {
+  test("loadConfig sees defaults while isolated and the env is restored after", () => {
+    // Arrange
+    const home = mkdtempSync(join(tmpdir(), "cueloop-isolate-"));
+    const userConfigPath = join(home, "config.toml");
+    writeFileSync(userConfigPath, '[ui]\nreview_state = "compact"\n');
+    const priorEnv = process.env.CUELOOP_CONFIG;
+    process.env.CUELOOP_CONFIG = userConfigPath;
+
+    try {
+      // Act
+      const restoreUserConfig = isolateUserConfig(home);
+      const isolated = loadConfig({ repoRoot: home });
+      restoreUserConfig();
+      const restored = loadConfig({ repoRoot: home });
+
+      // Assert
+      expect(isolated.ui.reviewState).toBe("expanded");
+      expect(process.env.CUELOOP_CONFIG).toBe(userConfigPath);
+      expect(restored.ui.reviewState).toBe("compact");
+    } finally {
+      if (priorEnv === undefined) delete process.env.CUELOOP_CONFIG;
+      else process.env.CUELOOP_CONFIG = priorEnv;
+      rmSync(home, { recursive: true, force: true });
+    }
+  });
+
+  test("restore removes the variable when nothing was set before", () => {
+    // Arrange
+    const home = mkdtempSync(join(tmpdir(), "cueloop-isolate-"));
+    const priorEnv = process.env.CUELOOP_CONFIG;
+    delete process.env.CUELOOP_CONFIG;
+
+    try {
+      // Act
+      const restoreUserConfig = isolateUserConfig(home);
+      const pointedAt = process.env.CUELOOP_CONFIG ?? "";
+      restoreUserConfig();
+
+      // Assert
+      expect(pointedAt).toBe(join(home, "no-config.toml"));
+      expect(process.env.CUELOOP_CONFIG).toBeUndefined();
+    } finally {
+      if (priorEnv !== undefined) process.env.CUELOOP_CONFIG = priorEnv;
+      rmSync(home, { recursive: true, force: true });
+    }
+  });
+});

package/src/test-support.ts

@@ -6,16 +6,40 @@
  * generous pass budgets.
  */
 
+import { join } from "node:path";
 import type { TestRendererSetup } from "@opentui/core/testing";
 
 /** Pass budget for waits that include daemon or subprocess round-trips. */
 export const WAIT_PASSES = { maxPasses: 400 };
 
+/**
+ * Isolate the user config: point CUELOOP_CONFIG into the test home so
+ * loadConfig never reads the developer's real ~/.config/cueloop (a persisted
+ * review_state would change what char frames render locally while CI stays
+ * clean). The default file name does not exist, so loadConfig returns
+ * defaults; pass a file name for suites that write and assert a config of
+ * their own. Call in beforeEach; invoke the returned restore in afterEach.
+ */
+export function isolateUserConfig(home: string, fileName = "no-config.toml"): () => void {
+  const priorUserConfig = process.env.CUELOOP_CONFIG;
+  process.env.CUELOOP_CONFIG = join(home, fileName);
+  return () => {
+    if (priorUserConfig === undefined) delete process.env.CUELOOP_CONFIG;
+    else process.env.CUELOOP_CONFIG = priorUserConfig;
+  };
+}
+
+/** The harness drives the real event loop by design; keep React's act warning off. */
+export function allowEventLoopUpdates(): void {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = false;
+}
+
 /**
  * One macrotask yield lets the input parser and the React scheduler run,
  * then a render pass commits the result before the visual-idle wait.
  */
 export async function settle(setup: TestRendererSetup): Promise<void> {
+  allowEventLoopUpdates();
   await new Promise((resolve) => setTimeout(resolve, 0));
   await setup.renderOnce();
   await setup.waitForVisualIdle();
@@ -37,51 +61,117 @@ export async function typeText(setup: TestRendererSetup, text: string): Promise<
   await settle(setup);
 }
 
-const WAIT_DEADLINE_MS = 30_000;
+// Below the 60s per-test budget so a genuinely stuck wait throws its frame
+// error (useful) before bun's bare "timed out" fires. Generous because a
+// contended CI runner starves the render loop and daemon round-trips.
+const WAIT_DEADLINE_MS = 45_000;
+
+/** One macrotask turn: hands the event loop back so the in-process daemon can
+ *  read its socket and apply the write before the next poll. Tight render-pass
+ *  bursts starve that read on a contended CI runner - the round-trip then never
+ *  lands and the wait hangs the whole budget. */
+function yieldEventLoop(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 2));
+}
+
+/** Log a still-waiting line at most this often, so only genuinely slow (i.e.
+ *  flaking) waits are noisy; fast waits stay silent. */
+const PROGRESS_LOG_MS = 4000;
+
+/** The last render frame's tail, so a progress line shows what is on screen. */
+function frameTail(frame: string, rows = 6): string {
+  return frame.split("\n").slice(-rows).join("\n");
+}
 
 /**
- * waitForFrame gives up as soon as the renderer is idle, but external timers
- * (the parser's bare-ESC window, daemon IO, spawned editors) settle on the
- * event loop while nothing is scheduled. Between attempts, one real
- * event-loop turn plus a render pass lets those land; the deadline bounds
- * the whole wait.
+ * Poll gently: one render pass, one frame check, one macrotask yield. No
+ * multi-pass bursts, so the daemon (same event loop) always gets a turn to
+ * process IO between checks. The deadline bounds the whole wait. Slow waits log
+ * progress (poll count + frame-change count) so a CI stall shows whether the
+ * render froze or the content simply never arrived.
  */
 async function waitForFramePredicate(
   setup: TestRendererSetup,
   predicate: (frame: string) => boolean,
+  label: string,
 ): Promise<string> {
-  const deadline = Date.now() + WAIT_DEADLINE_MS;
+  allowEventLoopUpdates();
+  const start = Date.now();
+  const deadline = start + WAIT_DEADLINE_MS;
+  let polls = 0;
+  let frameChanges = 0;
+  let lastFrame = "";
+  let lastLog = start;
   for (;;) {
-    try {
-      return await setup.waitForFrame(predicate, { maxPasses: 50 });
-    } catch (error) {
-      if (Date.now() > deadline) throw error;
-      await new Promise((resolve) => setTimeout(resolve, 1));
-      await setup.renderOnce();
+    await setup.renderOnce();
+    const frame = setup.captureCharFrame();
+    polls++;
+    if (frame !== lastFrame) {
+      frameChanges++;
+      lastFrame = frame;
+    }
+    if (predicate(frame)) return frame;
+    const now = Date.now();
+    if (now > deadline) {
+      const frozen = frameChanges <= 1 ? " — render never advanced (frozen)" : "";
+      throw new Error(
+        `waitFor ${label} timed out after ${now - start}ms (${polls} polls, ${frameChanges} frame changes${frozen}).\nlast frame:\n${frame}`,
+      );
     }
+    if (now - lastLog >= PROGRESS_LOG_MS) {
+      lastLog = now;
+      console.error(
+        `[waitFor] still waiting for ${label} — ${now - start}ms, ${polls} polls, ${frameChanges} frame changes\n${frameTail(frame)}`,
+      );
+    }
+    await yieldEventLoop();
   }
 }
 
 /** Wait until a state predicate holds (daemon round-trips included). */
-export async function waitForState(setup: TestRendererSetup, predicate: () => boolean): Promise<void> {
-  const deadline = Date.now() + WAIT_DEADLINE_MS;
+export async function waitForState(
+  setup: TestRendererSetup,
+  predicate: () => boolean,
+  label = "state",
+): Promise<void> {
+  allowEventLoopUpdates();
+  const start = Date.now();
+  const deadline = start + WAIT_DEADLINE_MS;
+  let polls = 0;
+  let frameChanges = 0;
+  let lastFrame = "";
+  let lastLog = start;
   for (;;) {
-    try {
-      return await setup.waitFor(predicate, { maxPasses: 50 });
-    } catch (error) {
-      if (Date.now() > deadline) throw error;
-      await new Promise((resolve) => setTimeout(resolve, 1));
-      await setup.renderOnce();
+    if (predicate()) return;
+    await setup.renderOnce();
+    const frame = setup.captureCharFrame();
+    polls++;
+    if (frame !== lastFrame) {
+      frameChanges++;
+      lastFrame = frame;
+    }
+    if (predicate()) return;
+    const now = Date.now();
+    if (now > deadline) {
+      const frozen = frameChanges <= 1 ? " — render never advanced (frozen)" : "";
+      throw new Error(
+        `waitForState ${label} timed out after ${now - start}ms (${polls} polls, ${frameChanges} frame changes${frozen}).\nlast frame:\n${frame}`,
+      );
+    }
+    if (now - lastLog >= PROGRESS_LOG_MS) {
+      lastLog = now;
+      console.error(`[waitForState] still waiting for ${label} — ${now - start}ms, ${polls} polls, ${frameChanges} frame changes`);
     }
+    await yieldEventLoop();
   }
 }
 
 /** Wait until the frame contains the needle (daemon round-trips included). */
 export async function waitForText(setup: TestRendererSetup, needle: string): Promise<string> {
-  return waitForFramePredicate(setup, (frame) => frame.includes(needle));
+  return waitForFramePredicate(setup, (frame) => frame.includes(needle), `text ${JSON.stringify(needle)}`);
 }
 
 /** Wait until the frame no longer contains the needle. */
 export async function waitForTextGone(setup: TestRendererSetup, needle: string): Promise<string> {
-  return waitForFramePredicate(setup, (frame) => !frame.includes(needle));
+  return waitForFramePredicate(setup, (frame) => !frame.includes(needle), `text-gone ${JSON.stringify(needle)}`);
 }

package/src/theme.ts

@@ -6,7 +6,7 @@
  */
 
 export interface Theme {
-  bg: string;
+  background: string;
   panel: string;
   elevated: string;
   border: string;
@@ -18,12 +18,12 @@ export interface Theme {
   green: string;
   red: string;
   blue: string;
-  cursorBg: string;
-  markCommentBg: string;
-  markSuggestionBg: string;
-  insFg: string;
-  delFg: string;
-  /** Dimmed layer painted behind centered dialogs. */
+  cursorBackground: string;
+  markCommentBackground: string;
+  markSuggestionBackground: string;
+  insertedForeground: string;
+  deletedForeground: string;
+  /** Layer behind centered dialogs; transparent keeps the session visible. */
   backdrop: string;
 }
 
@@ -41,14 +41,14 @@ export function dimmedTheme(theme: Theme): Theme {
     green: theme.textDim,
     red: theme.textDim,
     blue: theme.textDim,
-    insFg: theme.textDim,
-    delFg: theme.textDim,
+    insertedForeground: theme.textDim,
+    deletedForeground: theme.textDim,
   };
 }
 
 export const DARK: Theme = {
   /* Unpainted so the terminal background shows through; override in [theme]. */
-  bg: "transparent",
+  background: "transparent",
   panel: "transparent",
   elevated: "#23232f",
   border: "#3a3a4a",
@@ -60,10 +60,10 @@ export const DARK: Theme = {
   green: "#62d96b",
   red: "#ff6b6b",
   blue: "#84a6e8",
-  cursorBg: "#33262a",
-  markCommentBg: "#3d2a2e",
-  markSuggestionBg: "#20351f",
-  insFg: "#62d96b",
-  delFg: "#ff6b6b",
-  backdrop: "#14141b",
+  cursorBackground: "#33262a",
+  markCommentBackground: "#3d2a2e",
+  markSuggestionBackground: "#20351f",
+  insertedForeground: "#62d96b",
+  deletedForeground: "#ff6b6b",
+  backdrop: "transparent",
 }

package/src/version.ts

@@ -0,0 +1,5 @@
+/** The published client version, read from the package manifest. */
+
+import manifest from "../package.json" with { type: "json" };
+
+export const CLIENT_VERSION: string = manifest.version;