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

package/src/session-controller.ts

@@ -26,7 +26,9 @@ import {
   returnPaneFor,
   switchBranch,
   viewOfPath,
+  type Anchor,
   type Annotation,
+  type AnnotationTarget,
   type DiffFileContents,
   type ReviewSession,
   type SessionHistory,
@@ -44,7 +46,7 @@ import {
 } from "./share";
 import { buildDisplay, nextWorkBlock, type DisplayBlock } from "./view-plan";
 import { entryTarget, treeRows, type TreeRow } from "./tree-view";
-import { diffRowBlocks, diffRows, fileChangeCounts, type DiffRow } from "./view-diff";
+import { diffRowBlocks, diffRows, fileChangeCounts, fileRowRange, type DiffRow } from "./view-diff";
 import { applyFold } from "./diff-fold";
 import { copyToClipboard } from "./clipboard";
 import {
@@ -60,7 +62,8 @@ import type { FileDiffMetadata } from "@pierre/diffs";
 import { firstUnviewedIndex, walkFiles, type WalkFile } from "./walk";
 import { editInEditor } from "./editor";
 import { focusHerdrPane } from "./herdr";
-import { persistAutoClose, type AutoClose, type CueloopConfig } from "./config";
+import { persistAutoClose, type AutoClose, type CueloopConfig, type QuickAction } from "./config";
+import { slashItemsFrom } from "./slash-palette";
 
 /**
  * Post-submit lifecycle (a review pane should hand you back to the agent,
@@ -254,7 +257,17 @@ export interface ReviewController {
     end: number,
     body: string,
     endDisplayIndex?: number,
+    /** The surface being annotated; a `file` target anchors into the Changes diff rows. */
+    target?: AnnotationTarget,
   ): string | undefined;
+  /** Persist a comment whose anchor a surface already built (e.g. a file-contents view). */
+  addComment(anchor: Anchor, target: AnnotationTarget, body: string): string | undefined;
+  /**
+   * Comment from the bare launch shell, where no thread is open: find-or-create the per-repo
+   * workbench thread, open it (the shell becomes a thread view), then add the comment. This is the
+   * first write a browse-only launch makes - nothing is on disk until it runs.
+   */
+  commentOnWorkbench(anchor: Anchor, target: AnnotationTarget, body: string): Promise<void>;
   /**
    * Reply to `rootAnnotationId`: the reply shares the root's anchor and names
    * it in replyTo, so the discussion stays one conversation. Returns the minted id.
@@ -315,6 +328,12 @@ interface DerivedSessionProjection {
   tree: TreeRow[];
 }
 
+/** A live working-tree diff: the same patch + per-file contents a diff capture pins. */
+interface LiveWorkingDiff {
+  patch: string;
+  files: readonly DiffFileContents[];
+}
+
 class Controller implements ReviewController {
   readonly readOnly: boolean;
   private client: SessionClient | null = null;
@@ -331,6 +350,7 @@ class Controller implements ReviewController {
   };
   private listeners = new Set<() => void>();
   private autoClose: AutoClose = "off";
+  private quickActions: QuickAction[] = [];
   private editor: string | undefined;
   private exporters: BundledExporter[] = [];
   private readonly clock: Clock;
@@ -339,8 +359,11 @@ class Controller implements ReviewController {
   private shareReconnect: TimerHandle | undefined;
   private shareStop: (() => void) | null = null;
   private shareRun: object | null = null;
-  /** Projections keyed by session identity so renders reuse one computation. */
+  /** Projections keyed by session identity (and the live diff for non-diff threads) so renders reuse one computation. */
   private derivedFor: ReviewSession | null = null;
+  /** The launch/workspace repo's live working-tree diff, feeding the Changes view for non-diff threads. */
+  private liveDiff: LiveWorkingDiff | null = null;
+  private derivedForLiveDiff: LiveWorkingDiff | null = null;
   private derived: DerivedSessionProjection = {
     display: [],
     rows: [],
@@ -424,6 +447,7 @@ class Controller implements ReviewController {
 
   applyConfig(config: CueloopConfig): void {
     this.autoClose = config.ui.autoClose;
+    this.quickActions = config.actions;
     this.editor = config.ui.editor;
     void loadBundledExporters(config.integrations).then((exporters) => {
       this.exporters = exporters;
@@ -446,17 +470,25 @@ class Controller implements ReviewController {
   // ── derived projections ─────────────────────
   private ensureDerived(): void {
     const session = this.snapshot.session;
-
-    if (this.derivedFor === session) return;
+    const isDiff = session?.artifact.type === "diff";
+    // a diff thread reads its pinned capture; every other thread reflects the live working tree
+    const liveDiff = isDiff ? null : this.liveDiff;
+
+    if (this.derivedFor === session && this.derivedForLiveDiff === liveDiff) return;
+    // fold state belongs to the session, so a live-tree refresh keeps it; only a new session resets it
+    if (this.derivedFor !== session) {
+      this.collapsedFiles.clear();
+      this.expandedFiles.clear();
+    }
     this.derivedFor = session;
-    // a new session starts fully expanded, never inheriting the prior diff's fold state
-    this.collapsedFiles.clear();
-    this.expandedFiles.clear();
-    const rows =
-      session && session.artifact.type === "diff" ? diffRows(session.artifact.content) : [];
+    this.derivedForLiveDiff = liveDiff;
+
+    const content = isDiff ? session!.artifact.content : (liveDiff?.patch ?? "");
+    const files = isDiff ? (session?.artifact.files ?? []) : (liveDiff?.files ?? []);
+    const rows = content ? diffRows(content) : [];
     const models = new Map<string, FileDiffMetadata>();
 
-    for (const file of session?.artifact.files ?? []) models.set(file.path, parseFileDiff(file));
+    for (const file of files) models.set(file.path, parseFileDiff(file));
     this.derived = {
       display: session ? buildDisplay(session.artifact.content, session.workingCopy) : [],
       rows,
@@ -466,6 +498,13 @@ class Controller implements ReviewController {
     };
   }
 
+  /** The per-file contents that back the current rows: a diff thread's capture, else the live working tree. */
+  private foldFiles(): readonly DiffFileContents[] | undefined {
+    const session = this.snapshot.session;
+
+    return session?.artifact.type === "diff" ? session.artifact.files : this.liveDiff?.files;
+  }
+
   treeRows(): TreeRow[] {
     this.ensureDerived();
 
@@ -482,12 +521,7 @@ class Controller implements ReviewController {
     this.ensureDerived();
     if (this.collapsedFiles.size === 0 && this.expandedFiles.size === 0) return this.derived.rows;
 
-    return applyFold(
-      this.derived.rows,
-      this.collapsedFiles,
-      this.expandedFiles,
-      this.snapshot.session?.artifact.files,
-    );
+    return applyFold(this.derived.rows, this.collapsedFiles, this.expandedFiles, this.foldFiles());
   }
 
   setFileCollapsed(file: string, collapsed: boolean): void {
@@ -519,7 +553,9 @@ class Controller implements ReviewController {
   }
 
   canExpandFile(file: string): boolean {
-    return (this.snapshot.session?.artifact.files ?? []).some((entry) => entry.path === file);
+    // a live working-tree diff carries the same per-file contents as a captured one,
+    // so a non-diff thread can expand its files too
+    return (this.foldFiles() ?? []).some((entry) => entry.path === file);
   }
 
   copyFilePath(file: string): void {
@@ -581,6 +617,19 @@ class Controller implements ReviewController {
     // a diff review pins its captured snapshot; every other thread reflects the live working tree
     const session = this.snapshot.session;
     if (session?.artifact.type === "diff") return session.artifact.files ?? [];
+    // eager: capture the live working-tree diff so the Changes navigator and its file tabs render a real diff
+    if (this.client?.repoDiff !== undefined) {
+      const diff = await this.client.repoDiff(this.sidebarRepoRoot());
+      // a thread switch during the request would let this response overwrite the new
+      // thread's diff, showing changes from the wrong repo; drop it when the session moved on
+      if (this.snapshot.session !== session) return diff.files;
+      this.liveDiff = diff;
+      // rows() derive from the fresh patch; re-render so an open diff tab repaints
+      this.update({});
+
+      return diff.files;
+    }
+    // a peer without the live-diff capability still lists changes, just without a diff body
     if (this.client?.repoChanges === undefined) return [];
     const changes = await this.client.repoChanges(this.sidebarRepoRoot());
 
@@ -947,13 +996,37 @@ class Controller implements ReviewController {
     end: number,
     body: string,
     endDisplayIndex: number = displayIndex,
+    target: AnnotationTarget = { kind: "artifact" },
   ): string | undefined {
     const session = this.snapshot.session;
 
     if (!session) return undefined;
     let anchor;
+    let resolvedTarget = target;
+    // a file target (a Changes-panel diff note) and a diff artifact both anchor into the diff rows
+    const onDiff = target.kind === "file" || session.artifact.type === "diff";
+
+    if (target.kind === "file") {
+      // a Changes-panel note anchors within its own file's rows, so a quote never attaches across
+      // files; a selection that spills into the next file is clamped back to the file it started in
+      const rows = this.rows();
+      const startRow = rows[displayIndex];
+      const path = startRow?.file ?? "";
+      const range = fileRowRange(rows, path);
+      const base = range?.start ?? 0;
+      const fileRows = range ? rows.slice(range.start, range.end) : rows;
+      const lastInFile = fileRows.length - 1;
+      const clamp = (index: number): number => Math.max(0, Math.min(index - base, lastInFile));
 
-    if (session.artifact.type === "diff") {
+      anchor = makeAnchor(
+        diffRowBlocks(fileRows),
+        clamp(displayIndex),
+        start,
+        end,
+        clamp(endDisplayIndex),
+      );
+      resolvedTarget = { kind: "file", path, rev: startRow?.kind === "del" ? "head" : "worktree" };
+    } else if (onDiff) {
       // rows are the diff's blocks: a span over one or more code rows anchors with the
       // same quote, context, and position selectors a plan span does
       anchor = makeAnchor(diffRowBlocks(this.rows()), displayIndex, start, end, endDisplayIndex);
@@ -971,34 +1044,74 @@ class Controller implements ReviewController {
         workIndexOf(endDisplayIndex),
       );
     }
-    const wire = { id: newAnnotationId(), kind, anchor, body };
+    // absent target means the reviewed artifact, so keep artifact notes free of the field
+    const wire =
+      resolvedTarget.kind === "artifact"
+        ? { id: newAnnotationId(), kind, anchor, body }
+        : { id: newAnnotationId(), kind, anchor, body, target: resolvedTarget };
     const persisted = this.client!.sessionAnnotate(session.id, wire);
 
     this.apply(persisted);
     this.mirrorAnnotation(persisted, wire);
-    this.setStatus("comment added");
 
     return wire.id;
   }
 
+  addComment(anchor: Anchor, target: AnnotationTarget, body: string): string | undefined {
+    const session = this.snapshot.session;
+
+    if (!session) return undefined;
+    const wire =
+      target.kind === "artifact"
+        ? { id: newAnnotationId(), kind: "comment", anchor, body }
+        : { id: newAnnotationId(), kind: "comment", anchor, body, target };
+    const persisted = this.client!.sessionAnnotate(session.id, wire);
+
+    this.apply(persisted);
+    this.mirrorAnnotation(persisted, wire);
+
+    return wire.id;
+  }
+
+  async commentOnWorkbench(anchor: Anchor, target: AnnotationTarget, body: string): Promise<void> {
+    if (!this.snapshot.session) {
+      if (this.client?.sessionWorkbench === undefined) return;
+      let workbench;
+
+      try {
+        workbench = await this.client.sessionWorkbench(this.options.cwd ?? process.cwd());
+      } catch (cause) {
+        // the composer already closed, so a lost first comment must at least surface, not vanish
+        this.setStatus(String(cause instanceof Error ? cause.message : cause));
+
+        return;
+      }
+      // adopt the thread as active (the shell flips to the thread view) and let the inbox catch up
+      this.update({ session: workbench });
+      void this.refreshInbox();
+    }
+    this.addComment(anchor, target, body);
+  }
+
   reply(rootAnnotationId: string, body: string): string | undefined {
     const session = this.snapshot.session;
     const root = session?.annotations.find((annotation) => annotation.id === rootAnnotationId);
 
     if (!session || !root) return undefined;
-    // a reply to a reply still hangs off the discussion's root comment
-    const wire = {
+    // a reply to a reply still hangs off the discussion's root comment, and shares its target
+    // so it renders and resolves on the same surface
+    const base = {
       id: newAnnotationId(),
       kind: "comment",
       anchor: root.anchor,
       body,
       replyTo: root.replyTo ?? root.id,
     };
+    const wire = root.target ? { ...base, target: root.target } : base;
     const persisted = this.client!.sessionAnnotate(session.id, wire);
 
     this.apply(persisted);
     this.mirrorAnnotation(persisted, wire);
-    this.setStatus("reply added");
 
     return wire.id;
   }
@@ -1013,7 +1126,6 @@ class Controller implements ReviewController {
 
     this.apply(persisted);
     this.mirrorAnnotation(persisted, wire);
-    this.setStatus("comment added");
 
     return wire.id;
   }
@@ -1125,7 +1237,10 @@ class Controller implements ReviewController {
 
     if (!session) return;
     this.walkLeave();
-    this.client!.sessionResolve(session.id, verdict, summary)
+    const actionBodies = Object.fromEntries(
+      slashItemsFrom(this.quickActions).map((item) => [item.name, item.body]),
+    );
+    this.client!.sessionResolve(session.id, verdict, summary, actionBodies)
       .then((resolved) => {
         // The completion overlay heading already states the verdict, so the
         // status line stays empty here - only export/error messages fill it.

package/src/slash-palette.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from "bun:test";
+import { inlineSlashToken, scoreMatch, slashFilter, type SlashItem } from "./slash-palette";
+
+function item(name: string): SlashItem {
+  return { name, description: name, body: name };
+}
+
+const ITEMS: SlashItem[] = [
+  item("zoom-out-research-in-depth"),
+  item("restate-simplified"),
+  item("out-of-scope"),
+  item("lgtm"),
+];
+
+describe("scoreMatch", () => {
+  test("an exact name scores highest, then a prefix, then a subsequence", () => {
+    const exact = scoreMatch("lgtm", "lgtm")!;
+    const prefix = scoreMatch("lgtm-please", "lgtm")!;
+    const subsequence = scoreMatch("looking-good-to-me", "lgtm")!;
+
+    expect(exact).toBeGreaterThan(prefix);
+    expect(prefix).toBeGreaterThan(subsequence);
+  });
+
+  test("a query whose characters are not all present, in order, does not match", () => {
+    expect(scoreMatch("restate", "zzz")).toBeNull();
+    expect(scoreMatch("abc", "acb")).toBeNull();
+  });
+
+  test("an empty query matches everything", () => {
+    expect(scoreMatch("anything", "")).toBe(0);
+  });
+});
+
+describe("slashFilter", () => {
+  test("ranks a prefix match above a mere subsequence match", () => {
+    const ranked = slashFilter(ITEMS, "out");
+
+    expect(ranked[0]!.name).toBe("out-of-scope");
+    expect(ranked.map((entry) => entry.name)).toContain("zoom-out-research-in-depth");
+  });
+
+  test("drops items that do not match and returns all on an empty query", () => {
+    expect(slashFilter(ITEMS, "zzzz")).toEqual([]);
+    expect(slashFilter(ITEMS, "")).toHaveLength(ITEMS.length);
+  });
+});
+
+describe("inlineSlashToken", () => {
+  test("finds a trailing /word only when text precedes it", () => {
+    expect(inlineSlashToken("use /vitest-patt")).toBe("/vitest-patt");
+    expect(inlineSlashToken("/vitest-patt")).toBeNull();
+  });
+});

package/src/slash-palette.ts

@@ -23,28 +23,42 @@ export function slashItemsFrom(quickActions: QuickAction[]): SlashItem[] {
   }));
 }
 
-/** Prefix beats substring beats subsequence. */
-export function slashFilter(items: SlashItem[], query: string): SlashItem[] {
-  const needle = query.toLowerCase();
+const WORD_BOUNDARY = /[\s\-_./:]/;
+
+/** Order-preserving subsequence score, or null when a query character is missing; higher is better. */
+export function scoreMatch(name: string, query: string): number | null {
+  if (query.length === 0) return 0;
+  const lowerName = name.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+
+  if (lowerName === lowerQuery) return 1000;
+  if (lowerName.startsWith(lowerQuery)) return 500 - name.length;
+  let score = 0;
+  let cursor = 0;
+  let run = 0;
+
+  for (const character of lowerQuery) {
+    const found = lowerName.indexOf(character, cursor);
+
+    if (found === -1) return null;
+    run = found === cursor ? run + 1 : 0;
+    score += found === cursor ? 5 + run : 1;
+    if (found === 0 || WORD_BOUNDARY.test(lowerName[found - 1]!)) score += 10;
+    score -= found - cursor;
+    cursor = found + 1;
+  }
+
+  return score;
+}
 
-  if (needle.length === 0) return items;
+export function slashFilter(items: SlashItem[], query: string): SlashItem[] {
+  if (query.length === 0) return items;
   const scored: Array<{ item: SlashItem; score: number }> = [];
 
   for (const item of items) {
-    const name = item.name.toLowerCase();
-    let score = 0;
-
-    if (name.startsWith(needle)) score = 3;
-    else if (name.includes(needle)) score = 2;
-    else {
-      let matched = 0;
-
-      for (const character of name) {
-        if (character === needle[matched]) matched++;
-      }
-      if (matched === needle.length) score = 1;
-    }
-    if (score > 0) scored.push({ item, score });
+    const score = scoreMatch(item.name, query);
+
+    if (score !== null) scored.push({ item, score });
   }
 
   return scored.toSorted((left, right) => right.score - left.score).map((entry) => entry.item);

package/src/test-support.ts

@@ -7,10 +7,49 @@
  */
 
 import { join } from "node:path";
-import type { TestRendererSetup } from "@opentui/core/testing";
+import { cloneElement, isValidElement, type ReactNode } from "react";
+import type { TestRendererOptions, TestRendererSetup } from "@opentui/core/testing";
+import { testRender } from "@opentui/react/test-utils";
+import type { AppProps } from "./App";
 
-/** Pass budget for waits that include daemon or subprocess round-trips. */
-export const WAIT_PASSES = { maxPasses: 400 };
+/**
+ * A probe for the App's ready signal in an in-process suite: pass `onReady`
+ * to the App and await `ready` before the first interaction, instead of
+ * waiting for a piece of text and hoping the keyboard is bound by then.
+ */
+export interface AppReadyProbe {
+  /** Pass as the App's `onReady` prop. */
+  onReady: () => void;
+  /** Resolves once the App has fired its ready signal. */
+  ready: Promise<void>;
+}
+
+export function appReadyProbe(): AppReadyProbe {
+  let resolve: () => void = () => {};
+  const ready = new Promise<void>((done) => {
+    resolve = done;
+  });
+
+  return { onReady: () => resolve(), ready };
+}
+
+/**
+ * Boot an App element and resolve once it has fired its ready signal: the
+ * first usable screen is painted and its keyboard handlers are subscribed.
+ * Every App suite starts here so no boot waits on a piece of text and hopes.
+ */
+export async function renderReadyApp(
+  element: ReactNode,
+  options: TestRendererOptions,
+): Promise<TestRendererSetup> {
+  if (!isValidElement<AppProps>(element)) throw new Error("renderReadyApp needs an App element");
+  const probe = appReadyProbe();
+  const setup = await testRender(cloneElement(element, { onReady: probe.onReady }), options);
+
+  await probe.ready;
+
+  return setup;
+}
 
 /**
  * The CUELOOP_CONFIG path that isolates a test from the developer's real user

package/src/theme-presets.ts

@@ -50,6 +50,10 @@ const ROSE_PINE_MOON: Theme = {
   markCommentBackground: "#382a37",
   insertedForeground: "#9ccfd8",
   deletedForeground: "#eb6f92",
+  insertedBackground: "#243a3f",
+  insertedEmphasisBackground: "#31555c",
+  deletedBackground: "#3a2530",
+  deletedEmphasisBackground: "#563643",
   backdrop: "transparent",
 };
 
@@ -71,6 +75,10 @@ const CATPPUCCIN_MOCHA: Theme = {
   markCommentBackground: "#33222b",
   insertedForeground: "#a6e3a1",
   deletedForeground: "#f38ba8",
+  insertedBackground: "#26372b",
+  insertedEmphasisBackground: "#375140",
+  deletedBackground: "#382530",
+  deletedEmphasisBackground: "#553844",
   backdrop: "transparent",
 };
 
@@ -92,6 +100,10 @@ const TOKYO_NIGHT: Theme = {
   markCommentBackground: "#2f2230",
   insertedForeground: "#9ece6a",
   deletedForeground: "#f7768e",
+  insertedBackground: "#233028",
+  insertedEmphasisBackground: "#33493a",
+  deletedBackground: "#32232e",
+  deletedEmphasisBackground: "#4d3543",
   backdrop: "transparent",
 };
 
@@ -113,6 +125,10 @@ const GRUVBOX_DARK: Theme = {
   markCommentBackground: "#3a2823",
   insertedForeground: "#b8bb26",
   deletedForeground: "#fb4934",
+  insertedBackground: "#333521",
+  insertedEmphasisBackground: "#4a4d2c",
+  deletedBackground: "#3c2a24",
+  deletedEmphasisBackground: "#5a3a30",
   backdrop: "transparent",
 };
 
@@ -134,6 +150,10 @@ const NORD: Theme = {
   markCommentBackground: "#3a2f33",
   insertedForeground: "#a3be8c",
   deletedForeground: "#bf616a",
+  insertedBackground: "#333d33",
+  insertedEmphasisBackground: "#454f42",
+  deletedBackground: "#3c2f33",
+  deletedEmphasisBackground: "#544045",
   backdrop: "transparent",
 };
 

package/src/theme.ts

@@ -22,6 +22,12 @@ export interface Theme {
   markCommentBackground: string;
   insertedForeground: string;
   deletedForeground: string;
+  /** The band behind a whole added line, and the stronger tint under its intra-line changed words. */
+  insertedBackground: string;
+  insertedEmphasisBackground: string;
+  /** The band behind a whole removed line, and the stronger tint under its intra-line changed words. */
+  deletedBackground: string;
+  deletedEmphasisBackground: string;
   /** Layer behind centered dialogs; transparent keeps the session visible. */
   backdrop: string;
 }
@@ -42,6 +48,10 @@ export function dimmedTheme(theme: Theme): Theme {
     blue: theme.textDim,
     insertedForeground: theme.textDim,
     deletedForeground: theme.textDim,
+    insertedBackground: theme.panel,
+    insertedEmphasisBackground: theme.elevated,
+    deletedBackground: theme.panel,
+    deletedEmphasisBackground: theme.elevated,
   };
 }
 
@@ -63,6 +73,10 @@ export const DARK: Theme = {
   markCommentBackground: "#3d2a2e",
   insertedForeground: "#62d96b",
   deletedForeground: "#ff6b6b",
+  insertedBackground: "#16321d",
+  insertedEmphasisBackground: "#245c30",
+  deletedBackground: "#341c1f",
+  deletedEmphasisBackground: "#5a2a2e",
   backdrop: "transparent",
 };
 
@@ -89,5 +103,9 @@ export const LIGHT: Theme = {
   markCommentBackground: "#f2e2e8",
   insertedForeground: "#2f8a3e",
   deletedForeground: "#c0392b",
+  insertedBackground: "#d8f5dd",
+  insertedEmphasisBackground: "#a9e6b6",
+  deletedBackground: "#fbdcdc",
+  deletedEmphasisBackground: "#f5b7b7",
   backdrop: "transparent",
 };

package/src/thread-chords.ts

@@ -33,7 +33,7 @@ export const DIFF_CHORD_ENTRIES = [
   { keys: "⌥x / ⌥X", label: "reject the change / the hunk" },
   { keys: "⌥u", label: "restore the last rejection" },
   { keys: "⌥c", label: "collapse the file to its band" },
-  { keys: "⌥d", label: "unified / split (when zoomed)" },
+  { keys: "⌥d", label: "split / stacked (when wide)" },
   { keys: "⌥k", label: "start the guided walk" },
 ] as const;
 

package/src/use-annotation-surface.tsx

@@ -73,6 +73,12 @@ export interface AnnotationSurfaceOptions {
   quickActions: QuickAction[];
   tokens: Theme;
   observer: boolean;
+  /**
+   * Whether this surface accepts comments. False for a non-diff thread's live
+   * working-tree diff, which is view-only: its rows are diff rows, but the
+   * thread anchors comments in plan coordinates, so a draft here would misanchor.
+   */
+  commentsEnabled?: boolean;
   /** A verdict is in: no draft may open; the app answers with its read-only status. */
   resolved: boolean;
   /** True while a menu, dialog, or overlay owns the keyboard. */
@@ -152,6 +158,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     quickActions,
     tokens,
     observer,
+    commentsEnabled = true,
     resolved,
     suspended,
     onComposingChange,
@@ -283,6 +290,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     }));
 
   const openCompose = (state: ComposeState): void => {
+    // a view-only surface (a non-diff thread's live diff) never opens a draft
+    if (!commentsEnabled) return;
     if (observer) return onObserverBlocked?.("observer");
     if (resolved) return onObserverBlocked?.("resolved");
     composerReady.current = false;
@@ -296,7 +305,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     setCompose(null);
     setComposeText("");
   };
-  const slashActive = compose !== null && composeText.startsWith("/");
+  // open only while typing the token: a leading "/" with no space yet
+  const slashActive = compose !== null && /^\/\S*$/.test(composeText);
   const slashItems = slashActive
     ? slashFilter(slashItemsFrom(quickActions), composeText.slice(1).trim())
     : [];
@@ -417,7 +427,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
       return true;
     }
     if (key.name === "return" || key.name === "tab") {
-      openCompose({ ...activeCompose, seed: slashItems[selected]!.body });
+      openCompose({ ...activeCompose, seed: `/${slashItems[selected]!.name} ` });
 
       return true;
     }

package/src/use-settings-dialog.tsx

@@ -142,9 +142,9 @@ export function useSettingsDialog(params: {
         },
         {
           key: "diffView",
-          label: "Diff view (when zoomed)",
+          label: "Diff view (when wide)",
           kind: "cycle",
-          options: ["Unified", "Split"],
+          options: ["Split", "Stacked"],
         },
       ],
     },
@@ -191,7 +191,7 @@ export function useSettingsDialog(params: {
   ];
   const settingsValues = {
     autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
-    diffView: diffView === "split" ? "Split" : "Unified",
+    diffView: diffView === "split" ? "Split" : "Stacked",
     theme: THEME_LABELS[themeName],
   };
   const cycleSetting = (rowKey: string): void => {
@@ -201,7 +201,7 @@ export function useSettingsDialog(params: {
       setAutoClose(next);
       persistAutoClose(next);
     } else if (rowKey === "diffView") {
-      const next: DiffViewMode = diffView === "unified" ? "split" : "unified";
+      const next: DiffViewMode = diffView === "stacked" ? "split" : "stacked";
 
       setDiffView(next);
       persistDiffView(next);