@cueloop/client 0.1.0-alpha.78 → 0.1.0-alpha.79

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Switch } from "./Switch";
+
+export const meta: StoryMeta = { title: "Primitives/Switch" };
+
+export const On: Story = {
+  render: () => <Switch on onToggle={() => {}} theme={DARK} />,
+  expectedColors: [DARK.accent],
+  size: { width: 8, height: 1 },
+};
+
+export const Off: Story = {
+  render: () => <Switch on={false} onToggle={() => {}} theme={DARK} />,
+  size: { width: 8, height: 1 },
+};

package/src/components/primitives/Switch.tsx

@@ -0,0 +1,32 @@
+/**
+ * On/off switch: a pill with a knob that sits right (accent) when on and left
+ * (dim) when off. `onToggle` unifies a mouse click and keyboard activation, so
+ * the dialog grammar and a pointer both flip it.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface SwitchProps {
+  on: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}
+
+export function Switch({ on, onToggle, theme }: SwitchProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      onMouseUp={(event: MouseEvent) => {
+        event.stopPropagation();
+        onToggle();
+      }}
+      style={{ flexShrink: 0 }}
+    >
+      <text fg={on ? tokens.accent : tokens.textDim}>{on ? "(  ●)" : "(●  )"}</text>
+    </box>
+  );
+}

package/src/components/primitives/Tree.tsx

@@ -13,6 +13,8 @@ export interface TreeProps {
   showStatus?: boolean;
   /** Drop the folder/file glyph prefix, for a plain text tree (e.g. the settings nav). */
   hideIcons?: boolean;
+  /** The selected row's backdrop; defaults to `elevated` (invisible on an elevated dialog, use `border` there). */
+  selectedBackground?: string;
   indentWidth?: number;
   icons?: TreeIcons;
   onSelect?: (id: string) => void;
@@ -41,6 +43,7 @@ export function Tree({
   flattenEmptyDirectories,
   showStatus,
   hideIcons,
+  selectedBackground,
   indentWidth = 2,
   icons = NERD_TREE_ICONS,
   onSelect,
@@ -48,6 +51,7 @@ export function Tree({
   theme,
 }: TreeProps): React.ReactNode {
   const tokens = theme ?? DARK;
+  const selectedBackdrop = selectedBackground ?? tokens.elevated;
   const rows = flattenTree(nodes, { expandedIds, flattenEmptyDirectories });
 
   return (
@@ -71,7 +75,7 @@ export function Tree({
               flexDirection: "row",
               paddingLeft: 1 + row.depth * indentWidth,
               paddingRight: 1,
-              backgroundColor: selected ? tokens.elevated : undefined,
+              backgroundColor: selected ? selectedBackdrop : undefined,
             }}
             onMouseUp={() => (row.isFolder ? onToggle?.(row.id) : onSelect?.(row.id))}
           >

package/src/components/primitives/frame.ts

@@ -10,3 +10,8 @@ import type { BorderStyle } from "@opentui/core";
 
 /** Corner style shared by every bordered frame in the app: square, not rounded. */
 export const FRAME_BORDER_STYLE: BorderStyle = "single";
+
+/** Every frame's border title renders lowercase, so the convention holds without each caller minding case. */
+export function frameTitle(title: string | undefined): string | undefined {
+  return title?.toLowerCase();
+}

package/src/components/share-dialog-store.ts

@@ -0,0 +1,58 @@
+/**
+ * UI state for the share dialog, held in a zustand store rather than juggled
+ * across component state: which category is open (share externally / export),
+ * whether the link wizard is showing, and the wizard's draft (name, auth,
+ * allowlist). The links themselves live on the thread; this is only the
+ * ephemeral surface state.
+ */
+
+import { createStore } from "zustand/vanilla";
+import { useStore } from "zustand";
+
+export type ShareCategory = "external" | "export";
+
+export interface ShareWizardDraft {
+  /** The link being edited, or null when creating a new one. */
+  editingId: string | null;
+  name: string;
+  requireAuth: boolean;
+  allowlist: string[];
+}
+
+export interface ShareDialogState {
+  category: ShareCategory;
+  /** Null = the links list; a draft = the new/edit wizard. */
+  wizard: ShareWizardDraft | null;
+  setCategory: (category: ShareCategory) => void;
+  openWizard: (draft: ShareWizardDraft) => void;
+  closeWizard: () => void;
+  setName: (name: string) => void;
+  setRequireAuth: (requireAuth: boolean) => void;
+  setAllowlist: (allowlist: string[]) => void;
+  /** Reset to the opening state (links list, external tab) when the dialog opens. */
+  reset: () => void;
+}
+
+/** A fresh wizard draft, prefilled with the thread name for a new link. */
+export function newWizardDraft(threadName: string): ShareWizardDraft {
+  return { editingId: null, name: threadName, requireAuth: false, allowlist: [] };
+}
+
+export const shareDialogStore = createStore<ShareDialogState>((set) => ({
+  category: "external",
+  wizard: null,
+  setCategory: (category) => set({ category }),
+  openWizard: (wizard) => set({ wizard }),
+  closeWizard: () => set({ wizard: null }),
+  setName: (name) => set((state) => (state.wizard ? { wizard: { ...state.wizard, name } } : {})),
+  setRequireAuth: (requireAuth) =>
+    set((state) => (state.wizard ? { wizard: { ...state.wizard, requireAuth } } : {})),
+  setAllowlist: (allowlist) =>
+    set((state) => (state.wizard ? { wizard: { ...state.wizard, allowlist } } : {})),
+  reset: () => set({ category: "external", wizard: null }),
+}));
+
+/** Subscribe a component to the share dialog store. */
+export function useShareDialog<T>(selector: (state: ShareDialogState) => T): T {
+  return useStore(shareDialogStore, selector);
+}

package/src/components/stories.test.tsx

@@ -11,7 +11,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { RGBA } from "@opentui/core";
 import { componentFilesMissingStories, loadStories } from "./story";
 import { AnsiScreen } from "./AnsiScreen";
-import { allowEventLoopUpdates } from "../test-support";
+import { settle } from "../test-support";
 
 const stories = await loadStories();
 
@@ -45,8 +45,9 @@ describe("stories catalog", () => {
       // Act
       const setup = await testRender(node, size);
 
-      allowEventLoopUpdates();
-      await setup.waitForVisualIdle();
+      // settle, not just visual-idle: async stories (a file read, a virtualizer's
+      // first measure) commit after React's own scheduler, invisible to idle
+      await settle(setup);
       const frame = setup.captureCharFrame();
 
       // Assert

package/src/config.test.ts

@@ -143,6 +143,24 @@ describe("loadConfig", () => {
     }
   });
 
+  test("[ui] default_verdict defaults to approve and parses request_changes", () => {
+    // Arrange
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-verdict-"));
+    const path = join(dir, "config.toml");
+
+    writeFileSync(path, `[ui]\ndefault_verdict = "request_changes"\n`);
+
+    try {
+      // Assert
+      expect(loadConfig({ userConfigPath: "/nonexistent/config.toml" }).ui.defaultVerdict).toBe(
+        "approve",
+      );
+      expect(loadConfig({ userConfigPath: path }).ui.defaultVerdict).toBe("request_changes");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
   test("[skills] path overrides the default and a malformed value never discards the config", () => {
     const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-skills-"));
     const path = join(dir, "config.toml");

package/src/config.ts

@@ -9,6 +9,7 @@ import { existsSync, readFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
 import { OBSIDIAN_DEFAULTS, type ObsidianConfig } from "@cueloop/integration-obsidian";
+import type { VerdictKind } from "@cueloop/schema";
 import { writeFileSync, mkdirSync } from "node:fs";
 import { dirname } from "node:path";
 import * as v from "valibot";
@@ -107,6 +108,7 @@ export interface CueloopConfig {
     theme: ThemeName;
     /** How the Changes diff renders when wide: old|new side by side or one stacked column. */
     diffView: DiffViewMode;
+    defaultVerdict: VerdictKind;
     /** Session ids the user has pinned to the top of the sidebar; client-local view state. */
     pins: string[];
     /** The last pane layout a bare launch restores; unset until the user changes one. */
@@ -162,7 +164,6 @@ export const DEFAULT_KEYS: CueloopConfig["keys"] = {
   share: ["S"],
   quit: ["q"],
   walk: ["w"],
-  leader: ["ctrl+g"],
 };
 
 const SkillsSectionSchema = v.object({ path: v.optional(v.string()) });
@@ -212,6 +213,10 @@ const UiSchema = v.object({
   editor: v.fallback(v.optional(v.string()), undefined),
   theme: v.fallback(v.optional(v.string()), undefined),
   diff_view: v.fallback(v.optional(v.picklist(["split", "stacked", "unified"])), undefined),
+  default_verdict: v.fallback(
+    v.optional(v.picklist(["comment", "approve", "request_changes"])),
+    undefined,
+  ),
   pins: v.fallback(v.optional(v.array(v.string())), undefined),
   layout: v.fallback(
     v.optional(
@@ -279,6 +284,7 @@ function applyUi(ui: CueloopConfig["ui"], parsed: v.InferOutput<typeof UiSchema>
   // "unified" is the pre-rename spelling of "stacked"; keep loading it so an upgrade never flips the layout
   if (parsed.diff_view !== undefined)
     ui.diffView = parsed.diff_view === "unified" ? "stacked" : parsed.diff_view;
+  if (parsed.default_verdict !== undefined) ui.defaultVerdict = parsed.default_verdict;
   if (parsed.pins !== undefined) ui.pins = parsed.pins;
   if (parsed.layout !== undefined) {
     ui.layout = {
@@ -358,6 +364,7 @@ export function loadConfig(
       autoClose: "off",
       theme: DEFAULT_THEME_NAME,
       diffView: "split",
+      defaultVerdict: "approve",
       pins: [],
     },
     authors: {},

package/src/diff-fold.ts

@@ -2,7 +2,7 @@
  * Per-file fold state for the diff sheet, applied over the flat diff rows so the
  * cursor, curation, and rendering all read one array. A collapsed file shows only
  * its file band; an expanded file shows its whole contents with the diff woven in
- * (unchanged lines become context rows), matching VSCode's "expand all lines".
+ * (unchanged lines become context rows), an "expand all lines" view.
  */
 
 import type { DiffRow } from "./view-diff";

package/src/intent-dispatch.test.ts

@@ -93,6 +93,7 @@ function baseController(): ReviewController {
     curationItems: mock(() => []),
     restoreCuration: mock(),
     edit: mock(),
+    saveEditedBody: mock(),
     annotate: mock(() => undefined),
     addComment: mock(() => undefined),
     commentOnWorkbench: mock(() => Promise.resolve()),
@@ -108,7 +109,13 @@ function baseController(): ReviewController {
     walkLeave: mock(),
     submit: mock(),
     share: mock(),
+    unshare: mock(),
     setShareAccess: mock(),
+    shareLinks: mock(() => []),
+    createShareLink: mock(),
+    updateShareLink: mock(),
+    deleteShareLink: mock(),
+    copyShareLink: mock(),
     treeRows: mock(() => []),
     goToEntry: mock(),
     branch: mock(),
@@ -136,6 +143,7 @@ function makeDeps(overrides: Partial<IntentDispatchDeps> = {}): IntentDispatchDe
     inboxCursor: 0,
     mode: { type: "normal" },
     session: null,
+    defaultVerdict: "approve",
     focusedAnnotationId: undefined,
     selectedCurationId: undefined,
     railTab: "review",
@@ -155,9 +163,10 @@ function makeDeps(overrides: Partial<IntentDispatchDeps> = {}): IntentDispatchDe
     setSelectedCurationId: mock(),
     setPulsedAnnotationId: mock(),
     selectCardFromDocument: mock(),
-    runEditorHandOff: mock(),
+    openBodyEditor: mock(),
     openCardEdit: mock(),
     toggleDiffView: mock(),
+    openShareDialog: mock(),
     ...overrides,
   };
 }
@@ -385,7 +394,7 @@ describe("openSubmit", () => {
 });
 
 describe("share", () => {
-  test("opens the public/private choice overlay instead of publishing directly", () => {
+  test("opens the share dialog instead of publishing directly", () => {
     // Arrange
     const deps = makeDeps();
     const dispatch = createIntentDispatch(deps);
@@ -394,7 +403,7 @@ describe("share", () => {
     dispatch({ type: "share" });
 
     // Assert
-    expect(deps.setMode).toHaveBeenCalledWith({ type: "shareChoice", index: 0 });
+    expect(deps.openShareDialog).toHaveBeenCalled();
     expect(deps.controller.share).not.toHaveBeenCalled();
   });
 });

package/src/intent-dispatch.ts

@@ -8,7 +8,7 @@
  */
 
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import { isAddressed, isAgentNote, type Thread, type VerdictKind } from "@cueloop/schema";
+import { isAddressed, type Thread, type VerdictKind } from "@cueloop/schema";
 import { displayText, spanKey, startSpan, type DisplayBlock, type SpanState } from "./view-plan";
 import type { DiffRow } from "./view-diff";
 import type { ReviewController } from "./thread-controller";
@@ -18,7 +18,7 @@ import { quickActionBody, type QuickAction } from "./config";
 import { VERDICTS } from "./components/ConfirmCard";
 
 /** Which pane of the session tree / review the keyboard grammar is aimed at. */
-export type RailTab = "review" | "agent" | "tree";
+export type RailTab = "review" | "tree";
 
 /** The one overlay/mode the TUI is in; every compose/submit/edit flow is a variant. */
 export type Mode =
@@ -40,7 +40,6 @@ export type Mode =
   | { type: "renameThread"; sessionId: string; text: string }
   | { type: "nameSelf"; text: string }
   | { type: "renameSelf"; text: string }
-  | { type: "shareChoice"; index: number }
   | { type: "treePrompt"; ask: TreeAsk; entryId?: string; text: string };
 
 /** What a tree prompt asks for: a branch name, a checkpoint name, or the summary a move back leaves. */
@@ -51,23 +50,6 @@ export function activeSpanState(mode: Mode): SpanState | null {
   return mode.type === "span" || mode.type === "spanActions" ? mode.span : null;
 }
 
-/**
- * Annotations that still count as feedback: agent notes never do, and an
- * annotation a revision already addressed is settled - it neither blocks the
- * verdict default nor re-enters the next feedback document.
- */
-export function reviewerAnnotations(session: Thread) {
-  return session.annotations.filter(
-    (annotation) => !isAgentNote(annotation) && !isAddressed(annotation),
-  );
-}
-
-export function defaultVerdict(session: Thread): VerdictKind {
-  return reviewerAnnotations(session).length || session.workingCopy !== undefined
-    ? "request_changes"
-    : "approve";
-}
-
 /**
  * Everything the reducer reads or writes, supplied fresh each render: the
  * controller and exit hook, the derived reads (view rows, cursor, mode,
@@ -86,6 +68,7 @@ export interface IntentDispatchDeps {
   inboxCursor: number;
   mode: Mode;
   session: Thread | null;
+  defaultVerdict: VerdictKind;
   focusedAnnotationId: string | undefined;
   /** The curation item selected for undo, if any. */
   selectedCurationId: string | undefined;
@@ -115,10 +98,12 @@ export interface IntentDispatchDeps {
   setPulsedAnnotationId: Dispatch<SetStateAction<string | null>>;
 
   selectCardFromDocument: (annotationId: string) => void;
-  runEditorHandOff: () => void;
+  openBodyEditor: () => void;
   openCardEdit: (annotationId: string) => void;
   /** Flip split/stacked diff and persist it (App-owned); split lays out only when wide/zoomed. */
   toggleDiffView: () => void;
+  /** Open the share dialog (App-owned); the dialog owns its own keys and links. */
+  openShareDialog: () => void;
 }
 
 type IntentOfType<Kind extends Intent["type"]> = Extract<Intent, { type: Kind }>;
@@ -383,12 +368,12 @@ function handleOpenSubmit(_intent: IntentOfType<"openSubmit">, deps: IntentDispa
 
   if (!session) return;
   deps.liveInput.current = "";
-  deps.setMode({ type: "submit", verdict: defaultVerdict(session), summary: "" });
+  deps.setMode({ type: "submit", verdict: deps.defaultVerdict, summary: "" });
 }
 
-// share opens the public/private choice overlay; the App owns the choice keys and publishes on pick
+// share opens the share dialog; it owns its own keys, links list, and publish wizard
 function handleShare(_intent: IntentOfType<"share">, deps: IntentDispatchDeps): void {
-  deps.setMode({ type: "shareChoice", index: 0 });
+  deps.openShareDialog();
 }
 
 function handleCut(_intent: IntentOfType<"cut">, deps: IntentDispatchDeps): void {
@@ -450,7 +435,7 @@ function handleRestoreCuration(
 }
 
 function handleEdit(_intent: IntentOfType<"edit">, deps: IntentDispatchDeps): void {
-  deps.runEditorHandOff();
+  deps.openBodyEditor();
 }
 
 function handleEditCard(_intent: IntentOfType<"editCard">, deps: IntentDispatchDeps): void {

package/src/key-bindings.ts

@@ -35,9 +35,6 @@ export type HintMode =
   | "walk"
   | "read-only";
 
-/** Display glyph for the Agent-tab terminal detach chord (ctrl+], App-owned). */
-export const AGENT_DETACH_HINT = "⌃]";
-
 export interface CheatsheetEntry {
   keys: string;
   label: string;
@@ -453,9 +450,6 @@ export class KeyBindings {
       build({ overlay: "none", spanMode: true }, "span", "Selection"),
       build({ overlay: "submit", spanMode: false }, "submit", "Submit"),
       build({ overlay: "walk", spanMode: false }, "walk", "Walk"),
-      // The Agent-tab terminal chord is owned by App (not the rebindable keymap),
-      // so it is listed statically rather than resolved from the active keys.
-      { title: "Agent terminal", entries: [{ keys: AGENT_DETACH_HINT, label: "detach" }] },
     ];
 
     this.context = saved;

package/src/keymap.ts

@@ -87,7 +87,6 @@ export interface KeyState {
     | "submit"
     | "confirm"
     | "prompt"
-    | "shareChoice"
     | "spanActions"
     | "completion-prompt"
     | "completion-counting";

package/src/markdown-editor-syntax-style.ts

@@ -0,0 +1,50 @@
+/**
+ * The native SyntaxStyle for the inline markdown editor: maps each markdown
+ * token group to a theme color and attribute set, and resolves the styleId the
+ * edit buffer needs for `addHighlightByCharRange`. Cached per theme, mirroring
+ * syntaxStyleFor. Syntax punctuation (the "marker" group) is dimmed rather than
+ * hidden, since the editor shows raw source.
+ */
+
+import { SyntaxStyle, type StyleDefinitionInput } from "@opentui/core";
+import { type Theme } from "./theme";
+import { MARKDOWN_HIGHLIGHT_GROUPS, type MarkdownHighlightGroup } from "./markdown-highlight";
+
+/** A markdown SyntaxStyle plus the lookup from token group to its native styleId. */
+export interface MarkdownEditorStyle {
+  style: SyntaxStyle;
+  styleIdFor: (group: MarkdownHighlightGroup) => number;
+}
+
+function markdownGroupStyles(theme: Theme): Record<MarkdownHighlightGroup, StyleDefinitionInput> {
+  return {
+    heading: { bold: true },
+    marker: { fg: theme.textDim },
+    link: { fg: theme.blue, underline: true },
+    code: { fg: theme.textDim },
+  };
+}
+
+const markdownEditorStyleCache = new WeakMap<Theme, MarkdownEditorStyle>();
+
+/** Build (or reuse) the markdown editor's SyntaxStyle for a theme, with a group-to-styleId lookup. */
+export function markdownEditorStyle(theme: Theme): MarkdownEditorStyle {
+  const cached = markdownEditorStyleCache.get(theme);
+
+  if (cached) return cached;
+  const groupStyles = markdownGroupStyles(theme);
+  const style = SyntaxStyle.fromStyles(groupStyles);
+  const styleIds = new Map<MarkdownHighlightGroup, number>();
+
+  for (const group of MARKDOWN_HIGHLIGHT_GROUPS) {
+    styleIds.set(group, style.getStyleId(group) ?? 0);
+  }
+  const entry: MarkdownEditorStyle = {
+    style,
+    styleIdFor: (group) => styleIds.get(group) ?? 0,
+  };
+
+  markdownEditorStyleCache.set(theme, entry);
+
+  return entry;
+}

package/src/markdown-grid.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test";
+import {
+  layoutFrontmatterGrid,
+  layoutMarkdownTable,
+  parseFrontmatterRows,
+  parseMarkdownTable,
+} from "./markdown-grid";
+
+/** The plain text of a grid line, segments concatenated. */
+function lineText(line: { text: string }[]): string {
+  return line.map((segment) => segment.text).join("");
+}
+
+describe("parseMarkdownTable", () => {
+  test("reads header cells, alignments, and body rows", () => {
+    const table = parseMarkdownTable("| Name | Size |\n| :--- | ---: |\n| a | 1 |\n| bb | 22 |");
+
+    expect(table.header).toEqual(["Name", "Size"]);
+    expect(table.aligns).toEqual(["left", "right"]);
+    expect(table.rows).toEqual([
+      ["a", "1"],
+      ["bb", "22"],
+    ]);
+  });
+
+  test("center alignment reads from a :---: delimiter", () => {
+    expect(parseMarkdownTable("| a |\n| :---: |\n| x |").aligns).toEqual(["center"]);
+  });
+
+  test("an escaped pipe stays inside its cell instead of splitting the column", () => {
+    const table = parseMarkdownTable("| Name | Note |\n| --- | --- |\n| a | b \\| c |");
+
+    expect(table.rows).toEqual([["a", "b | c"]]);
+  });
+
+  test("a blank cell between border pipes survives the border strip", () => {
+    expect(parseMarkdownTable("|  | b |\n| --- | --- |\n| x | y |").header).toEqual(["", "b"]);
+  });
+});
+
+describe("layoutMarkdownTable", () => {
+  test("bolds the header, rules under it, and right-aligns a numeric column", () => {
+    const lines = layoutMarkdownTable(
+      parseMarkdownTable("| Name | Size |\n| --- | ---: |\n| a | 1 |"),
+    );
+
+    expect(lines[0]![0]!.bold).toBe(true);
+    expect(lineText(lines[0]!)).toBe("Name  Size");
+    expect(lines[1]![0]!.dim).toBe(true);
+    expect(lineText(lines[1]!)).toBe("─".repeat("Name  Size".length));
+    // "a" padded to the "Name" column, "1" right-aligned under "Size"
+    expect(lineText(lines[2]!)).toBe("a" + " ".repeat(8) + "1");
+  });
+});
+
+describe("parseFrontmatterRows", () => {
+  test("splits top-level key: value pairs", () => {
+    expect(parseFrontmatterRows("title: Plan\nowner: me")).toEqual([
+      { key: "title", value: "Plan" },
+      { key: "owner", value: "me" },
+    ]);
+  });
+
+  test("folds an indented continuation into the row above", () => {
+    expect(parseFrontmatterRows("tags:\n  - one\n  - two")).toEqual([
+      { key: "tags", value: "- one\n- two" },
+    ]);
+  });
+});
+
+describe("layoutFrontmatterGrid", () => {
+  test("draws a full border with a bold key and a rule between rows", () => {
+    const lines = layoutFrontmatterGrid(
+      [
+        { key: "title", value: "Plan" },
+        { key: "owner", value: "me" },
+      ],
+      40,
+    );
+
+    expect(lineText(lines[0]!).startsWith("┌")).toBe(true);
+    expect(lineText(lines.at(-1)!).startsWith("└")).toBe(true);
+    // the key cell is bold, the border pieces are dim
+    const firstRow = lines[1]!;
+
+    expect(firstRow.find((segment) => segment.text.includes("title"))!.bold).toBe(true);
+    expect(firstRow[0]!.dim).toBe(true);
+    // a divider separates the two rows
+    expect(lines.some((line) => lineText(line).startsWith("├"))).toBe(true);
+  });
+
+  test("wraps a long value across cell lines, keeping the key on the first", () => {
+    const lines = layoutFrontmatterGrid([{ key: "desc", value: "one two three four five" }], 24);
+    const bodyLines = lines.filter((line) => lineText(line).startsWith("│"));
+
+    expect(bodyLines.length).toBeGreaterThan(1);
+    expect(bodyLines[0]!.some((segment) => segment.text.includes("desc"))).toBe(true);
+    // the continuation line keeps the key column blank
+    expect(bodyLines[1]!.some((segment) => segment.text.includes("desc"))).toBe(false);
+  });
+});