@cueloop/client 0.1.0-alpha.66 → 0.1.0-alpha.68

package/src/components/fade-title.ts

@@ -0,0 +1,61 @@
+/**
+ * Fits a thread title onto one line, fading the last few characters toward the
+ * background instead of cutting hard or wrapping - a gradient mask on the right.
+ * Returns colored segments the caller renders as spans.
+ */
+
+export interface TitleSegment {
+  text: string;
+  fg: string;
+}
+
+function channel(hex: string, start: number): number {
+  return Number.parseInt(hex.slice(start, start + 2), 16);
+}
+
+/** Blend two #rrggbb colors; t=0 is `from`, t=1 is `to`. */
+export function mixHex(from: string, to: string, t: number): string {
+  const clamp = Math.max(0, Math.min(1, t));
+  const parts = [1, 3, 5].map((start) => {
+    const value = Math.round(
+      channel(from, start) + (channel(to, start) - channel(from, start)) * clamp,
+    );
+
+    return value.toString(16).padStart(2, "0");
+  });
+
+  return `#${parts.join("")}`;
+}
+
+/** The tail length that fades out; kept short so most of the title stays legible. */
+const FADE_WIDTH = 5;
+
+export function fadeTitle(
+  title: string,
+  maxWidth: number,
+  baseColor: string,
+  fadeColor: string,
+): TitleSegment[] {
+  const oneLine = title.replace(/\n/g, " ");
+
+  if (maxWidth <= 0) return [];
+  if (oneLine.length <= maxWidth) return [{ text: oneLine, fg: baseColor }];
+
+  const clipped = oneLine.slice(0, maxWidth);
+  const fadeLength = Math.min(FADE_WIDTH, maxWidth);
+  const head = clipped.slice(0, maxWidth - fadeLength);
+  const segments: TitleSegment[] = head.length > 0 ? [{ text: head, fg: baseColor }] : [];
+
+  for (let index = 0; index < fadeLength; index++) {
+    // the last character reaches the background fully, so the tail masks out
+    // rather than leaving a legible word fragment
+    const progress = (index + 1) / fadeLength;
+
+    segments.push({
+      text: clipped[maxWidth - fadeLength + index]!,
+      fg: mixHex(baseColor, fadeColor, progress),
+    });
+  }
+
+  return segments;
+}

package/src/components/file-tree.test.ts

@@ -42,4 +42,19 @@ describe("buildFileTree", () => {
   test("returns an empty tree for no changes", () => {
     expect(buildFileTree([])).toEqual([]);
   });
+
+  test("badges a leaf with its comment count, and leaves an uncommented file bare", () => {
+    // Act
+    const tree = buildFileTree(
+      [file("a.ts"), file("b.ts")],
+      new Map([
+        ["a.ts", 3],
+        ["b.ts", 0],
+      ]),
+    );
+
+    // Assert - a.ts shows the dot-and-count, b.ts (0) shows nothing
+    expect(tree[0]!.badge).toBe("● 3");
+    expect(tree[1]!.badge).toBeUndefined();
+  });
 });

package/src/components/file-tree.ts

@@ -16,11 +16,18 @@ interface MutableTreeNode {
   id: string;
   label: string;
   status?: GitStatus;
+  badge?: string;
   children?: Map<string, MutableTreeNode>;
 }
 
 function freeze(node: MutableTreeNode): TreeNode {
-  if (node.children === undefined) return { id: node.id, label: node.label, status: node.status };
+  if (node.children === undefined) {
+    const leaf: TreeNode = { id: node.id, label: node.label, status: node.status };
+
+    if (node.badge !== undefined) leaf.badge = node.badge;
+
+    return leaf;
+  }
 
   return {
     id: node.id,
@@ -29,8 +36,24 @@ function freeze(node: MutableTreeNode): TreeNode {
   };
 }
 
-/** Group changed files into a directory tree; leaves are keyed by their full path. */
-export function buildFileTree(files: readonly DiffFileContents[]): TreeNode[] {
+/** A file's comment count as a leaf badge, or undefined when it carries none. */
+function commentBadge(
+  counts: ReadonlyMap<string, number> | undefined,
+  path: string,
+): string | undefined {
+  const count = counts?.get(path);
+
+  return count ? `● ${count}` : undefined;
+}
+
+/**
+ * Group changed files into a directory tree; leaves are keyed by their full path. A leaf whose
+ * file carries comments shows a dot-and-count badge, so feedback is visible even with its tab closed.
+ */
+export function buildFileTree(
+  files: readonly DiffFileContents[],
+  commentCounts?: ReadonlyMap<string, number>,
+): TreeNode[] {
   const roots = new Map<string, MutableTreeNode>();
 
   for (const file of files) {
@@ -45,7 +68,39 @@ export function buildFileTree(files: readonly DiffFileContents[]): TreeNode[] {
 
       if (node === undefined) {
         node = isLeaf
-          ? { id: file.path, label: segment, status: gitStatusOf(file.status) }
+          ? {
+              id: file.path,
+              label: segment,
+              status: gitStatusOf(file.status),
+              badge: commentBadge(commentCounts, file.path),
+            }
+          : { id: prefix, label: segment, children: new Map() };
+        level.set(segment, node);
+      }
+      if (!isLeaf) level = node.children!;
+    });
+  }
+
+  return [...roots.values()].map(freeze);
+}
+
+/** Group plain repo-relative paths (git ls-files) into a directory tree; leaves keep their full path. */
+export function buildPathTree(paths: readonly string[]): TreeNode[] {
+  const roots = new Map<string, MutableTreeNode>();
+
+  for (const path of paths) {
+    const segments = path.split("/").filter((segment) => segment.length > 0);
+    let level = roots;
+    let prefix = "";
+
+    segments.forEach((segment, index) => {
+      prefix = prefix.length > 0 ? `${prefix}/${segment}` : segment;
+      const isLeaf = index === segments.length - 1;
+      let node = level.get(segment);
+
+      if (node === undefined) {
+        node = isLeaf
+          ? { id: path, label: segment }
           : { id: prefix, label: segment, children: new Map() };
         level.set(segment, node);
       }

package/src/components/pages/Workspace.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { DARK } from "../../theme";
 import type { Story, StoryMeta } from "../story";
-import { AppShell } from "../AppShell";
+import { PaneGrid } from "../PaneGrid";
 import { Tree } from "../primitives/Tree";
 import type { TreeNode } from "../primitives/tree-model";
 
@@ -168,7 +168,7 @@ function Footer(): React.ReactNode {
 
 export const ThreePane: Story = {
   render: () => (
-    <AppShell
+    <PaneGrid
       sidebar={<Sidebar />}
       main={<Main />}
       mainHeader={<Header />}

package/src/components/primitives/IconButton.tsx

@@ -3,7 +3,9 @@
 // center keeps it on the same row as sibling text or icons.
 
 import React from "react";
+import type { MouseEvent as TerminalMouseEvent } from "@opentui/core";
 import { DARK, type Theme } from "../../theme";
+import { useTooltip } from "../Tooltip";
 
 export interface IconButtonProps {
   glyph: string;
@@ -14,6 +16,8 @@ export interface IconButtonProps {
   disabled?: boolean;
   /** Override the resolved foreground (wins over active/disabled colouring). */
   color?: string;
+  /** Label shown on hover, surfaced at the screen root so a tiny header cell cannot clip it. */
+  tip?: string;
   marginLeft?: number;
   marginRight?: number;
   theme?: Theme;
@@ -25,17 +29,32 @@ export function IconButton({
   active,
   disabled,
   color,
+  tip,
   marginLeft,
   marginRight,
   theme,
 }: IconButtonProps): React.ReactNode {
   const tokens = theme ?? DARK;
   const resolved = color ?? (disabled ? tokens.textDim : active ? tokens.accent : tokens.textMuted);
+  const { showTooltip, hideTooltip } = useTooltip();
+  // a button press is its own action - never let it bubble to a clickable row behind it
+  const handleMouseUp = (event: TerminalMouseEvent): void => {
+    event.stopPropagation();
+    hideTooltip();
+    onPress?.();
+  };
 
   return (
     <box
-      onMouseUp={disabled ? undefined : onPress}
-      style={{ alignSelf: "center", marginLeft, marginRight }}
+      onMouseUp={disabled ? undefined : handleMouseUp}
+      onMouseOver={tip ? (event) => showTooltip(tip, event.x, event.y) : undefined}
+      onMouseOut={tip ? hideTooltip : undefined}
+      style={{
+        flexShrink: 0,
+        alignSelf: "center",
+        marginLeft,
+        marginRight,
+      }}
     >
       <text fg={resolved}>{glyph}</text>
     </box>

package/src/components/primitives/Tree.tsx

@@ -11,6 +11,8 @@ export interface TreeProps {
   selectedId?: string;
   flattenEmptyDirectories?: boolean;
   showStatus?: boolean;
+  /** Drop the folder/file glyph prefix, for a plain text tree (e.g. the settings nav). */
+  hideIcons?: boolean;
   indentWidth?: number;
   icons?: TreeIcons;
   onSelect?: (id: string) => void;
@@ -38,6 +40,7 @@ export function Tree({
   selectedId,
   flattenEmptyDirectories,
   showStatus,
+  hideIcons,
   indentWidth = 2,
   icons = NERD_TREE_ICONS,
   onSelect,
@@ -72,10 +75,16 @@ export function Tree({
             }}
             onMouseUp={() => (row.isFolder ? onToggle?.(row.id) : onSelect?.(row.id))}
           >
-            <text fg={row.isFolder ? tokens.blue : tokens.textDim}>
-              {row.icon ?? rowGlyph(row.isFolder, row.expanded, icons)}{" "}
-            </text>
-            <text fg={selected ? tokens.accent : labelColor}>{row.label}</text>
+            {hideIcons ? null : (
+              <text fg={row.isFolder ? tokens.blue : tokens.textDim}>
+                {row.icon ?? rowGlyph(row.isFolder, row.expanded, icons)}{" "}
+              </text>
+            )}
+            <box style={{ flexShrink: 1, minWidth: 0 }}>
+              <text fg={selected ? tokens.accent : labelColor} truncate>
+                {row.label}
+              </text>
+            </box>
             <box style={{ flexGrow: 1 }} />
             {row.badge !== undefined ? <text fg={tokens.textDim}>{row.badge}</text> : null}
             {status ? <text fg={toneColor(status.tone, tokens)}> {status.letter}</text> : null}

package/src/components/primitives/icons.ts

@@ -1,21 +1,44 @@
 // Nerd Font glyphs (Private Use Area / codicons) plus the plus-minus diff mark; render as icons under a Nerd Font, tofu without one.
 
 export const NERD = {
-  folderClosed: "",
-  folderOpen: "",
-  file: "",
+  folderClosed: "",
+  folderOpen: "",
+  file: "",
   chevronRight: "",
   chevronDown: "",
   settings: "",
   search: "",
   expand: "",
-  diff: "±",
+  diff: "",
+  copy: "",
+  unfold: "",
+  kebab: "⋮",
+  pin: "⚑",
+  close: "✕",
   listTree: "",
   sidebarLeft: "",
   sidebarLeftOff: "",
   sidebarRight: "",
   sidebarRightOff: "",
   submit: "",
+  zoom: "⛶",
+  split: "",
+} as const;
+
+// The thin rule under each pane header: an overline sits at the top edge of its cell so it hugs the
+// header text (unlike the default light-horizontal, which floats mid-cell); painted in divider gray upstream.
+export const HEADER_UNDERLINE_CHARS = {
+  topLeft: "\u250c",
+  topRight: "\u2510",
+  bottomLeft: "\u2514",
+  bottomRight: "\u2518",
+  horizontal: "\u203e",
+  vertical: "\u2502",
+  topT: "\u252c",
+  bottomT: "\u2534",
+  leftT: "\u251c",
+  rightT: "\u2524",
+  cross: "\u253c",
 } as const;
 
 export interface TreeIcons {

package/src/components/session-tree.test.ts

@@ -111,4 +111,24 @@ describe("groupInbox", () => {
     expect(rows.some((row) => row.kind === "section" && row.label === "Projects")).toBe(false);
     expect(rows.some((row) => row.kind === "section" && row.label === "Threads")).toBe(true);
   });
+
+  test("a pinned thread lifts into a Pinned section at the top, out of its normal group", () => {
+    // Arrange - one repo-bound thread, one standalone; pin the repo-bound one
+    const sessions = [session("a", "Pinned one", "root-1"), session("b", "Loose two")];
+
+    // Act
+    const { rows, ordered } = groupInbox(sessions, new Set(["a"]));
+
+    // Assert - Pinned is the first section and holds thread a; a is gone from Projects
+    const sections = rows
+      .filter((row) => row.kind === "section")
+      .map((row) => (row.kind === "section" ? row.label : ""));
+
+    expect(sections[0]).toBe("Pinned");
+    expect(sections).not.toContain("Projects"); // its only member was pinned away
+    expect(ordered[0]!.id).toBe("a"); // the cursor walks pinned threads first
+    const pinnedThreadIds = rows.filter((row) => row.kind === "thread").map((row) => row.id);
+
+    expect(pinnedThreadIds).toEqual(["a", "b"]);
+  });
 });

package/src/components/session-tree.ts

@@ -50,12 +50,21 @@ interface ProjectGroup {
   sessions: ReviewSession[];
 }
 
-/** Group pending sessions into Projects (by root commit) then standalone Threads. */
-export function groupInbox(sessions: readonly ReviewSession[]): GroupedInbox {
+/** Group pending sessions into Pinned, then Projects (by root commit), then standalone Threads. */
+export function groupInbox(
+  sessions: readonly ReviewSession[],
+  pinnedIds?: ReadonlySet<string>,
+): GroupedInbox {
+  const pinned: ReviewSession[] = [];
   const projects = new Map<string, ProjectGroup>();
   const standalone: ReviewSession[] = [];
 
   for (const session of sessions) {
+    if (pinnedIds?.has(session.id) === true) {
+      pinned.push(session);
+      continue;
+    }
+
     const key = session.workspace.rootCommit;
     if (key === undefined) {
       standalone.push(session);
@@ -74,6 +83,11 @@ export function groupInbox(sessions: readonly ReviewSession[]): GroupedInbox {
     ordered.push(session);
   };
 
+  if (pinned.length > 0) {
+    rows.push({ kind: "section", id: "section:pinned", label: "Pinned" });
+    for (const session of pinned) pushThread(session);
+  }
+
   const projectEntries = [...projects.entries()].sort((a, b) => a[1].name.localeCompare(b[1].name));
   if (projectEntries.length > 0) {
     rows.push({ kind: "section", id: "section:projects", label: "Projects" });

package/src/components/stories-app.tsx

@@ -11,7 +11,7 @@ import { createRoot, useKeyboard } from "@opentui/react";
 import { DARK } from "../theme";
 import { ThemeProvider } from "./theme-context";
 import { buildStoryTree, loadStories, type LoadedStory } from "./story";
-import { AppShell } from "./AppShell";
+import { PaneGrid } from "./PaneGrid";
 import { ShellHeader } from "./ShellHeader";
 import { Tree } from "./primitives/Tree";
 import { NERD } from "./primitives/icons";
@@ -103,7 +103,7 @@ function StoriesApp({ stories, onExit }: StoriesAppProps): React.ReactNode {
 
   return (
     <ThemeProvider theme={DARK}>
-      <AppShell
+      <PaneGrid
         theme={DARK}
         mainHeader={
           <ShellHeader

package/src/config.test.ts

@@ -8,14 +8,12 @@ import {
   actionFor,
   loadConfig,
   persistAuthorName,
-  persistReviewState,
   persistActions,
-  persistReviewWidth,
+  persistPins,
   persistTheme,
   quickActionBody,
   resolveQuickAction,
 } from "./config";
-import { REVIEW_DEFAULT_WIDTH, REVIEW_MAX_WIDTH } from "./review-panel";
 import { DARK } from "./theme";
 import { themeForName } from "./theme-presets";
 
@@ -128,48 +126,19 @@ describe("loadConfig", () => {
     }
   });
 
-  test("[ui] review panel defaults to an expanded rail at the default width", () => {
-    // Act
-    const config = loadConfig({ userConfigPath: "/nonexistent/config.toml" });
-
-    // Assert
-    expect(config.ui.reviewState).toBe("expanded");
-    expect(config.ui.reviewWidth).toBe(REVIEW_DEFAULT_WIDTH);
-  });
-
-  test("[ui] parses review_width (clamped) and review_state", () => {
-    // Arrange
-    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg6-"));
-    const path = join(dir, "config.toml");
-
-    writeFileSync(path, `[ui]\nreview_width = 999\nreview_state = "compact"\n`);
-
-    try {
-      // Act
-      const config = loadConfig({ userConfigPath: path });
-
-      // Assert
-      expect(config.ui.reviewWidth).toBe(REVIEW_MAX_WIDTH); // out-of-range width clamps
-      expect(config.ui.reviewState).toBe("compact");
-    } finally {
-      rmSync(dir, { recursive: true, force: true });
-    }
-  });
-
-  test("[ui] ignores an unknown review_state and a non-numeric width", () => {
+  test("[ui] diff_view defaults to unified and parses split", () => {
     // Arrange
-    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg7-"));
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-diff-"));
     const path = join(dir, "config.toml");
 
-    writeFileSync(path, `[ui]\nreview_width = "wide"\nreview_state = "sideways"\n`);
+    writeFileSync(path, `[ui]\ndiff_view = "split"\n`);
 
     try {
-      // Act
-      const config = loadConfig({ userConfigPath: path });
-
       // Assert
-      expect(config.ui.reviewWidth).toBe(REVIEW_DEFAULT_WIDTH);
-      expect(config.ui.reviewState).toBe("expanded");
+      expect(loadConfig({ userConfigPath: "/nonexistent/config.toml" }).ui.diffView).toBe(
+        "unified",
+      );
+      expect(loadConfig({ userConfigPath: path }).ui.diffView).toBe("split");
     } finally {
       rmSync(dir, { recursive: true, force: true });
     }
@@ -288,28 +257,30 @@ describe("loadConfig", () => {
     }
   });
 
-  test("persistReviewWidth and persistReviewState round-trip through the config file", () => {
+  test("persistPins round-trips the pinned-thread ids through the config file", () => {
     // Arrange
-    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg8-"));
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-pins-"));
     const path = join(dir, "config.toml");
 
     try {
       // Act
-      persistReviewWidth(42, path);
-      persistReviewState("hidden", path);
+      persistPins(["s_one", "s_two"], path);
 
       // Assert
-      const config = loadConfig({ userConfigPath: path });
+      expect(loadConfig({ userConfigPath: path }).ui.pins).toEqual(["s_one", "s_two"]);
 
-      expect(config.ui.reviewWidth).toBe(42);
-      expect(config.ui.reviewState).toBe("hidden");
+      // unpinning rewrites the list in place, including down to empty
+      // Act
+      persistPins(["s_two"], path);
+
+      // Assert
+      expect(loadConfig({ userConfigPath: path }).ui.pins).toEqual(["s_two"]);
 
-      // a second write replaces the key in place rather than appending a duplicate
       // Act
-      persistReviewWidth(30, path);
+      persistPins([], path);
 
       // Assert
-      expect(loadConfig({ userConfigPath: path }).ui.reviewWidth).toBe(30);
+      expect(loadConfig({ userConfigPath: path }).ui.pins).toEqual([]);
     } finally {
       rmSync(dir, { recursive: true, force: true });
     }

package/src/config.ts

@@ -2,8 +2,7 @@
  * Layered TOML config: built-in defaults → user config → trusted repo
  * config → env. Sections: [keys] action = "combo" (every action rebindable),
  * [theme] per-token overrides, [ui] auto_close + editor + theme (a named
- * preset) + the review-panel layout (review_width + review_state),
- * [integrations.obsidian] notes-vault export.
+ * preset) + pins, [integrations.obsidian] notes-vault export.
  */
 
 import { existsSync, readFileSync } from "node:fs";
@@ -15,7 +14,6 @@ import { dirname } from "node:path";
 import * as v from "valibot";
 import { DARK, type Theme } from "./theme";
 import { DEFAULT_THEME_NAME, isThemeName, themeForName, type ThemeName } from "./theme-presets";
-import { REVIEW_DEFAULT_WIDTH, clampWidth, type ReviewPanelMode } from "./review-panel";
 
 export interface KeymapConfig {
   [action: string]: string | string[];
@@ -28,6 +26,9 @@ export interface IntegrationsConfig {
 /** Post-submit behavior: "off" prompts, 0 closes instantly, N counts down. */
 export type AutoClose = "off" | number;
 
+/** How the Changes diff renders: one inline column, or old|new side by side (only when zoomed). */
+export type DiffViewMode = "unified" | "split";
+
 /** One marker-popover quick action: a preset comment body, plus optional extra lines. */
 export interface QuickAction {
   prompt: string;
@@ -93,17 +94,15 @@ export interface CueloopConfig {
   theme: Theme;
   /** The `[theme]` per-token overrides alone, so a live theme switch can re-compose them onto a new preset. */
   themeOverrides: Partial<Theme>;
-  /**
-   * ui.reviewState / ui.reviewWidth are CLIENT VIEW STATE: the review panel's
-   * collapse mode and expanded-rail width, persisted so they survive restarts.
-   */
   ui: {
     autoClose: AutoClose;
     editor?: string;
-    reviewState: ReviewPanelMode;
-    reviewWidth: number;
     /** The selected theme preset name; its tokens are the base for `theme`, before any `[theme]` overrides. */
     theme: ThemeName;
+    /** How the Changes diff renders when zoomed: one inline column or old|new side by side. */
+    diffView: DiffViewMode;
+    /** Session ids the user has pinned to the top of the sidebar; client-local view state. */
+    pins: string[];
   };
   /** Planner-local author renames: identity id → display name ([authors] table). */
   authors: Record<string, string>;
@@ -123,6 +122,9 @@ export const DEFAULT_KEYS: CueloopConfig["keys"] = {
   cut: ["x"],
   reject_hunk: ["X"],
   restore_curation: ["u"],
+  collapse_file: ["right"],
+  expand_file: ["left"],
+  split_diff: ["s"],
   edit: ["e"],
   next_annotation: ["n"],
   prev_annotation: ["p"],
@@ -132,9 +134,6 @@ export const DEFAULT_KEYS: CueloopConfig["keys"] = {
   share: ["S"],
   quit: ["q"],
   walk: ["w"],
-  review_cycle: ["b"],
-  review_wider: ["]"],
-  review_narrower: ["["],
 };
 
 const ConfigDocumentSchema = v.object({
@@ -165,9 +164,9 @@ const UiSchema = v.object({
     undefined,
   ),
   editor: v.fallback(v.optional(v.string()), undefined),
-  review_width: v.fallback(v.optional(v.pipe(v.number(), v.finite())), undefined),
-  review_state: v.fallback(v.optional(v.picklist(["expanded", "compact", "hidden"])), undefined),
   theme: v.fallback(v.optional(v.string()), undefined),
+  diff_view: v.fallback(v.optional(v.picklist(["unified", "split"])), undefined),
+  pins: v.fallback(v.optional(v.array(v.string())), undefined),
 });
 const ObsidianSchema = v.object({
   vault: v.fallback(v.optional(v.string()), undefined),
@@ -252,9 +251,8 @@ function layer(
   if (ui.success) {
     if (ui.output.auto_close !== undefined) out.ui.autoClose = ui.output.auto_close;
     if (ui.output.editor?.trim()) out.ui.editor = ui.output.editor.trim();
-    if (ui.output.review_width !== undefined)
-      out.ui.reviewWidth = clampWidth(ui.output.review_width);
-    if (ui.output.review_state !== undefined) out.ui.reviewState = ui.output.review_state;
+    if (ui.output.diff_view !== undefined) out.ui.diffView = ui.output.diff_view;
+    if (ui.output.pins !== undefined) out.ui.pins = ui.output.pins;
   }
   if (integrations.success && integrations.output.obsidian) {
     mergeObsidian(out.integrations.obsidian, integrations.output.obsidian);
@@ -272,9 +270,9 @@ export function loadConfig(
     themeOverrides: {},
     ui: {
       autoClose: "off",
-      reviewState: "expanded",
-      reviewWidth: REVIEW_DEFAULT_WIDTH,
       theme: DEFAULT_THEME_NAME,
+      diffView: "unified",
+      pins: [],
     },
     authors: {},
     actions: [...DEFAULT_QUICK_ACTIONS],
@@ -403,19 +401,19 @@ export function persistAutoClose(value: AutoClose, userConfigPath?: string): voi
   persistUiSetting("auto_close", value === "off" ? '"off"' : String(value), userConfigPath);
 }
 
-/** Persist the expanded-rail width (`[ui] review_width`) into the user config. */
-export function persistReviewWidth(width: number, userConfigPath?: string): void {
-  persistUiSetting("review_width", String(clampWidth(width)), userConfigPath);
+/** Persist the selected theme preset (`[ui] theme`) into the user config. */
+export function persistTheme(name: ThemeName, userConfigPath?: string): void {
+  persistUiSetting("theme", `"${name}"`, userConfigPath);
 }
 
-/** Persist the review-panel collapse mode (`[ui] review_state`) into the config. */
-export function persistReviewState(state: ReviewPanelMode, userConfigPath?: string): void {
-  persistUiSetting("review_state", `"${state}"`, userConfigPath);
+/** Persist the diff-view choice (`[ui] diff_view`) into the user config. */
+export function persistDiffView(mode: DiffViewMode, userConfigPath?: string): void {
+  persistUiSetting("diff_view", `"${mode}"`, userConfigPath);
 }
 
-/** Persist the selected theme preset (`[ui] theme`) into the user config. */
-export function persistTheme(name: ThemeName, userConfigPath?: string): void {
-  persistUiSetting("theme", `"${name}"`, userConfigPath);
+/** Persist the pinned-thread ids (`[ui] pins`) into the user config. */
+export function persistPins(ids: readonly string[], userConfigPath?: string): void {
+  persistUiSetting("pins", `[${ids.map(tomlString).join(", ")}]`, userConfigPath);
 }
 
 function escapeRegExp(text: string): string {