@cueloop/client 0.1.0-alpha.72 → 0.1.0-alpha.74

package/src/components/quick-actions-editor.tsx

@@ -6,7 +6,7 @@
  * the app owns the actions, the selection, and which row is expanded.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import type { KeyBinding, ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
 import type { QuickAction } from "../config";
 import type { Theme } from "../theme";
@@ -22,8 +22,9 @@ export interface QuickActionsEditorProps {
   selectedIndex: number;
   /** The row whose system-prompt input is open and focused, or null. */
   expandedIndex: number | null;
-  /** Select and toggle a row's system-prompt input open/closed. */
+  /** Select and toggle a row's editor open/closed. */
   onToggleExpand: (index: number) => void;
+  onEditPrompt: (index: number, prompt: string) => void;
   onEditMetadata: (index: number, metadata: string) => void;
   onReset: () => void;
   onAdd: () => void;
@@ -35,6 +36,7 @@ export function QuickActionsEditor({
   selectedIndex,
   expandedIndex,
   onToggleExpand,
+  onEditPrompt,
   onEditMetadata,
   onReset,
   onAdd,
@@ -67,6 +69,7 @@ export function QuickActionsEditor({
             isSelected={index === selectedIndex}
             isExpanded={index === expandedIndex}
             onToggleExpand={() => onToggleExpand(index)}
+            onEditPrompt={(prompt) => onEditPrompt(index, prompt)}
             onEditMetadata={(metadata) => onEditMetadata(index, metadata)}
             theme={theme}
           />
@@ -89,6 +92,7 @@ function ActionRow({
   isSelected,
   isExpanded,
   onToggleExpand,
+  onEditPrompt,
   onEditMetadata,
   theme,
 }: {
@@ -97,11 +101,26 @@ function ActionRow({
   isSelected: boolean;
   isExpanded: boolean;
   onToggleExpand: () => void;
+  onEditPrompt: (prompt: string) => void;
   onEditMetadata: (metadata: string) => void;
   theme?: Theme;
 }): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const inputRef = useRef<TextareaRenderable | null>(null);
+
+  if (isExpanded) {
+    return (
+      <box id={rowId} style={{ flexDirection: "column" }}>
+        <ActionEditor
+          action={action}
+          isSelected={isSelected}
+          onEditPrompt={onEditPrompt}
+          onEditMetadata={onEditMetadata}
+          onDone={onToggleExpand}
+          tokens={tokens}
+        />
+      </box>
+    );
+  }
 
   return (
     <box id={rowId} style={{ flexDirection: "column" }}>
@@ -109,33 +128,9 @@ function ActionRow({
         style={{ backgroundColor: isSelected ? tokens.border : undefined }}
         onMouseUp={onToggleExpand}
       >
-        <text fg={isSelected ? tokens.text : tokens.textMuted}>
-          {`${isExpanded ? "▾ " : "▸ "}${action.prompt}`}
-        </text>
+        <text fg={isSelected ? tokens.text : tokens.textMuted}>{`▸ ${action.prompt}`}</text>
       </box>
-      {isExpanded ? (
-        <box style={{ flexDirection: "row", paddingLeft: 2 }}>
-          <box style={{ width: 2, flexShrink: 0 }}>
-            <text fg={tokens.textDim}>{">"}</text>
-          </box>
-          <textarea
-            ref={inputRef}
-            focused
-            initialValue={action.metadata ?? ""}
-            placeholder="extra system prompt appended to this comment (optional)"
-            keyBindings={ACTION_INPUT_KEY_BINDINGS}
-            onContentChange={() => onEditMetadata(inputRef.current?.plainText ?? "")}
-            style={{
-              height: 1,
-              flexGrow: 1,
-              backgroundColor: tokens.elevated,
-              focusedBackgroundColor: tokens.elevated,
-              textColor: tokens.text,
-              focusedTextColor: tokens.text,
-            }}
-          />
-        </box>
-      ) : action.metadata ? (
+      {action.metadata ? (
         <box style={{ paddingLeft: 2 }}>
           <text fg={tokens.textDim}>{truncateMetadata(action.metadata)}</text>
         </box>
@@ -144,6 +139,86 @@ function ActionRow({
   );
 }
 
+/**
+ * The two-field editor for an expanded row: the action title over its system
+ * prompt. Mounts fresh per expand, so focus starts on the title without a reset
+ * effect; ⏎ steps title -> description -> close, and a click focuses either.
+ */
+function ActionEditor({
+  action,
+  isSelected,
+  onEditPrompt,
+  onEditMetadata,
+  onDone,
+  tokens,
+}: {
+  action: QuickAction;
+  isSelected: boolean;
+  onEditPrompt: (prompt: string) => void;
+  onEditMetadata: (metadata: string) => void;
+  onDone: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const promptRef = useRef<TextareaRenderable | null>(null);
+  const metadataRef = useRef<TextareaRenderable | null>(null);
+  const [activeField, setActiveField] = useState<"prompt" | "metadata">("prompt");
+
+  // the focused field types from its end, not from the caret parked at the start
+  useEffect(() => {
+    const editor = activeField === "prompt" ? promptRef.current : metadataRef.current;
+
+    if (editor) editor.cursorOffset = editor.plainText.length;
+  }, [activeField]);
+
+  const fieldStyle = {
+    height: 1,
+    flexGrow: 1,
+    backgroundColor: tokens.elevated,
+    focusedBackgroundColor: tokens.elevated,
+    textColor: tokens.text,
+    focusedTextColor: tokens.text,
+  } as const;
+
+  return (
+    <>
+      <box
+        style={{ flexDirection: "row", backgroundColor: isSelected ? tokens.border : undefined }}
+      >
+        <box style={{ width: 2, flexShrink: 0 }}>
+          <text fg={isSelected ? tokens.text : tokens.textMuted}>{"▾ "}</text>
+        </box>
+        <textarea
+          ref={promptRef}
+          focused={activeField === "prompt"}
+          initialValue={action.prompt}
+          placeholder="action title"
+          keyBindings={ACTION_INPUT_KEY_BINDINGS}
+          onMouseUp={() => setActiveField("prompt")}
+          onSubmit={() => setActiveField("metadata")}
+          onContentChange={() => onEditPrompt(promptRef.current?.plainText ?? "")}
+          style={fieldStyle}
+        />
+      </box>
+      <box style={{ flexDirection: "row", paddingLeft: 2 }}>
+        <box style={{ width: 2, flexShrink: 0 }}>
+          <text fg={tokens.textDim}>{">"}</text>
+        </box>
+        <textarea
+          ref={metadataRef}
+          focused={activeField === "metadata"}
+          initialValue={action.metadata ?? ""}
+          placeholder="extra system prompt appended to this comment (optional)"
+          keyBindings={ACTION_INPUT_KEY_BINDINGS}
+          onMouseUp={() => setActiveField("metadata")}
+          onSubmit={onDone}
+          onContentChange={() => onEditMetadata(metadataRef.current?.plainText ?? "")}
+          style={fieldStyle}
+        />
+      </box>
+    </>
+  );
+}
+
 /** A one-line preview of the system prompt under a collapsed row. */
 function truncateMetadata(metadata: string): string {
   return metadata.length > 44 ? `${metadata.slice(0, 43)}…` : metadata;

package/src/components/truncate-title.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "bun:test";
+import { truncateTitle } from "./truncate-title";
+
+describe("truncateTitle", () => {
+  test("a title that fits is returned unchanged", () => {
+    expect(truncateTitle("short", 20)).toBe("short");
+  });
+
+  test("a long title is clipped to the width with a trailing ellipsis", () => {
+    const clipped = truncateTitle("Review the accent change in the theme", 20);
+
+    expect(clipped).toHaveLength(20);
+    expect(clipped.endsWith("…")).toBe(true);
+    expect(clipped).toBe("Review the accent c…");
+  });
+
+  test("newlines collapse to spaces so the row never wraps", () => {
+    expect(truncateTitle("line one\nline two", 40)).toBe("line one line two");
+  });
+
+  test("a zero width yields an empty string", () => {
+    expect(truncateTitle("anything", 0)).toBe("");
+  });
+
+  test("clips by code point, never splitting an astral character into a replacement glyph", () => {
+    const clipped = truncateTitle("🚀🚀🚀🚀🚀", 3);
+
+    expect(clipped).toBe("🚀🚀…");
+    expect(clipped).not.toContain("�");
+  });
+});

package/src/components/truncate-title.ts

@@ -0,0 +1,15 @@
+/**
+ * Fits a thread title on one line: unchanged when it fits, otherwise clipped to
+ * an ellipsis. Slices by code point, not UTF-16 unit, so an emoji or other
+ * astral character is never split into a replacement glyph.
+ */
+export function truncateTitle(title: string, maxWidth: number): string {
+  const oneLine = title.replace(/\n/g, " ");
+
+  if (maxWidth <= 0) return "";
+  const characters = [...oneLine];
+
+  if (characters.length <= maxWidth) return oneLine;
+
+  return `${characters.slice(0, Math.max(0, maxWidth - 1)).join("")}…`;
+}

package/src/config.test.ts

@@ -9,6 +9,7 @@ import {
   loadConfig,
   persistAuthorName,
   persistActions,
+  persistLayout,
   persistPins,
   persistTheme,
   quickActionBody,
@@ -317,6 +318,41 @@ describe("loadConfig", () => {
       rmSync(dir, { recursive: true, force: true });
     }
   });
+
+  test("persistLayout round-trips the remembered pane composition through the config file", () => {
+    // Arrange
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-layout-"));
+    const path = join(dir, "config.toml");
+
+    try {
+      // Act
+      persistLayout({ threads: false, rightSidebar: "project", zoomChanges: false }, path);
+
+      // Assert
+      expect(loadConfig({ userConfigPath: path }).ui.layout).toEqual({
+        threads: false,
+        rightSidebar: "project",
+        zoomChanges: false,
+      });
+
+      // Act
+      persistLayout({ threads: true, rightSidebar: "off", zoomChanges: true }, path);
+
+      // Assert
+      expect(loadConfig({ userConfigPath: path }).ui.layout).toEqual({
+        threads: true,
+        rightSidebar: "off",
+        zoomChanges: true,
+      });
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("layout is unset until the user changes one", () => {
+    // Assert
+    expect(loadConfig({ userConfigPath: "/nonexistent/config.toml" }).ui.layout).toBeUndefined();
+  });
 });
 
 describe("integrations.obsidian config", () => {

package/src/config.ts

@@ -14,6 +14,7 @@ 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 type { LaunchLayout } from "./launch-layout";
 
 export interface KeymapConfig {
   [action: string]: string | string[];
@@ -108,6 +109,8 @@ export interface CueloopConfig {
     diffView: DiffViewMode;
     /** 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. */
+    layout?: LaunchLayout;
   };
   /** Planner-local author renames: identity id → display name ([authors] table). */
   authors: Record<string, string>;
@@ -192,6 +195,16 @@ const UiSchema = v.object({
   theme: v.fallback(v.optional(v.string()), undefined),
   diff_view: v.fallback(v.optional(v.picklist(["split", "stacked", "unified"])), undefined),
   pins: v.fallback(v.optional(v.array(v.string())), undefined),
+  layout: v.fallback(
+    v.optional(
+      v.object({
+        threads: v.fallback(v.optional(v.boolean()), undefined),
+        right_sidebar: v.fallback(v.optional(v.picklist(["changes", "project", "off"])), undefined),
+        zoom_changes: v.fallback(v.optional(v.boolean()), undefined),
+      }),
+    ),
+    undefined,
+  ),
 });
 const ObsidianSchema = v.object({
   vault: v.fallback(v.optional(v.string()), undefined),
@@ -241,6 +254,23 @@ function mergeObsidian(
   if (obsidian.exportOn !== undefined) target.exportOn = obsidian.exportOn;
 }
 
+/** Fold a parsed `[ui]` table onto the accumulated ui config, field by present field. */
+function applyUi(ui: CueloopConfig["ui"], parsed: v.InferOutput<typeof UiSchema>): void {
+  if (parsed.auto_close !== undefined) ui.autoClose = parsed.auto_close;
+  if (parsed.editor?.trim()) ui.editor = parsed.editor.trim();
+  // "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.pins !== undefined) ui.pins = parsed.pins;
+  if (parsed.layout !== undefined) {
+    ui.layout = {
+      threads: parsed.layout.threads ?? true,
+      rightSidebar: parsed.layout.right_sidebar ?? "changes",
+      zoomChanges: parsed.layout.zoom_changes ?? false,
+    };
+  }
+}
+
 function layer(
   base: CueloopConfig,
   raw: v.InferOutput<typeof ConfigDocumentSchema>,
@@ -280,14 +310,7 @@ function layer(
         out.keys[action] = Array.isArray(combo.output) ? combo.output : [combo.output];
     }
   }
-  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();
-    // "unified" is the pre-rename spelling of "stacked"; keep loading it so an upgrade never flips the layout
-    if (ui.output.diff_view !== undefined)
-      out.ui.diffView = ui.output.diff_view === "unified" ? "stacked" : ui.output.diff_view;
-    if (ui.output.pins !== undefined) out.ui.pins = ui.output.pins;
-  }
+  if (ui.success) applyUi(out.ui, ui.output);
   if (integrations.success && integrations.output.obsidian) {
     mergeObsidian(out.integrations.obsidian, integrations.output.obsidian);
   }
@@ -455,6 +478,13 @@ export function persistPins(ids: readonly string[], userConfigPath?: string): vo
   persistUiSetting("pins", `[${ids.map(tomlString).join(", ")}]`, userConfigPath);
 }
 
+/** Persist the last pane layout (`[ui] layout`) so a bare launch restores it. */
+export function persistLayout(layout: LaunchLayout, userConfigPath?: string): void {
+  const table = `{ threads = ${layout.threads}, right_sidebar = "${layout.rightSidebar}", zoom_changes = ${layout.zoomChanges} }`;
+
+  persistUiSetting("layout", table, userConfigPath);
+}
+
 function escapeRegExp(text: string): string {
   return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }

package/src/index.ts

@@ -1,4 +1,6 @@
 export { runClient, type RunClientOptions } from "./run";
+export { snapshotWorkbench, type RepoDiff } from "./workbench-snapshot";
+export { defaultLayout, planLayout, reviewLayout, type LaunchLayout } from "./launch-layout";
 export { serveClient, type ServeHandle, type ServeOptions } from "./serve";
 export { App, type AppProps } from "./App";
 export {

package/src/intent-dispatch.test.ts

@@ -96,6 +96,7 @@ function baseController(): ReviewController {
     annotate: mock(() => undefined),
     addComment: mock(() => undefined),
     commentOnWorkbench: mock(() => Promise.resolve()),
+    commentOnWorkbenchDiff: mock(() => Promise.resolve()),
     reply: mock(() => undefined),
     annotatePrototype: mock(() => undefined),
     updateAnnotation: mock(),

package/src/launch-layout.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "bun:test";
+import { defaultLayout, layoutFromPanes, planLayout, reviewLayout } from "./launch-layout";
+
+describe("launch layout factories", () => {
+  test("review opens the diff zoomed with the Changes panel", () => {
+    // Assert
+    expect(reviewLayout()).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
+  });
+
+  test("plan fills the middle with the thread pane and no right region", () => {
+    // Assert
+    expect(planLayout()).toEqual({ threads: true, rightSidebar: "off", zoomChanges: false });
+  });
+
+  test("the first-run default lands on the inbox with the diff zoomed", () => {
+    // Assert
+    expect(defaultLayout()).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
+  });
+});
+
+describe("layoutFromPanes", () => {
+  test("the Changes editor wins the right region when open", () => {
+    // Assert
+    expect(
+      layoutFromPanes({ threads: true, changesOpen: true, projectOpen: true, zoomChanges: true }),
+    ).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
+  });
+
+  test("the Project tree holds the right region when the Changes editor is closed", () => {
+    // Assert
+    expect(
+      layoutFromPanes({
+        threads: false,
+        changesOpen: false,
+        projectOpen: true,
+        zoomChanges: false,
+      }),
+    ).toEqual({ threads: false, rightSidebar: "project", zoomChanges: false });
+  });
+
+  test("the right region is off when neither pane is open", () => {
+    // Assert
+    expect(
+      layoutFromPanes({
+        threads: true,
+        changesOpen: false,
+        projectOpen: false,
+        zoomChanges: false,
+      }),
+    ).toEqual({ threads: true, rightSidebar: "off", zoomChanges: false });
+  });
+});

package/src/launch-layout.ts

@@ -0,0 +1,42 @@
+/**
+ * The pane composition a launch opens with: whether the Threads sidebar is open,
+ * what the right region shows, and whether the Changes editor is zoomed. Each
+ * command picks a layout through a factory; a bare launch restores the last one
+ * the user left (persisted in config), falling back to the default.
+ */
+
+export interface LaunchLayout {
+  /** The Threads sidebar is open. */
+  threads: boolean;
+  /** The right region: the Changes editor, the Project tree, or closed. */
+  rightSidebar: "changes" | "project" | "off";
+  /** The Changes editor is zoomed - the Thread pane hides so the diff fills the middle. */
+  zoomChanges: boolean;
+}
+
+/** `cueloop diff` / `cueloop review`: the diff front and center. */
+export function reviewLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "changes", zoomChanges: true };
+}
+
+/** `cueloop plan` / `cueloop reply`: the thread pane fills the middle; no Changes panel. */
+export function planLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "off", zoomChanges: false };
+}
+
+/** The first-run default, before any layout has been remembered: the inbox with the diff zoomed. */
+export function defaultLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "changes", zoomChanges: true };
+}
+
+/** Read back the layout the panes currently sit in, to remember it for the next bare launch. */
+export function layoutFromPanes(panes: {
+  threads: boolean;
+  changesOpen: boolean;
+  projectOpen: boolean;
+  zoomChanges: boolean;
+}): LaunchLayout {
+  const rightSidebar = panes.changesOpen ? "changes" : panes.projectOpen ? "project" : "off";
+
+  return { threads: panes.threads, rightSidebar, zoomChanges: panes.zoomChanges };
+}

package/src/run.ts

@@ -4,10 +4,14 @@ import React from "react";
 import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 import { App } from "./App";
+import { loadConfig } from "./config";
+import { defaultLayout, type LaunchLayout } from "./launch-layout";
 
 export interface RunClientOptions {
   sessionId?: string;
   home?: string;
+  /** The layout a create-command opens in; omit to restore the remembered one, then the default. */
+  layout?: LaunchLayout;
 }
 
 /** OSC background query budget: brief so a terminal that never answers falls back to dark. */
@@ -16,6 +20,11 @@ const THEME_QUERY_TIMEOUT_MS = 200;
 export async function runClient(options: RunClientOptions): Promise<number> {
   // mouse movement reporting makes multiplexers forward drags to the app,
   // so the renderer's native selection is the drag driver
+  // a create-command dictates its layout; a bare inbox launch restores the remembered one, then the
+  // default; opening a specific thread carries no layout, so its own pane sync drives the composition
+  const layout =
+    options.layout ??
+    (options.sessionId === undefined ? (loadConfig().ui.layout ?? defaultLayout()) : undefined);
   const renderer = await createCliRenderer({ enableMouseMovement: true });
   const appearance =
     (await renderer.waitForThemeMode(THEME_QUERY_TIMEOUT_MS).catch(() => null)) ?? "dark";
@@ -42,6 +51,7 @@ export async function runClient(options: RunClientOptions): Promise<number> {
         home: options.home,
         sessionId: options.sessionId,
         appearance,
+        layout,
         onExit: shutdown,
       }),
     );

package/src/serve.ts

@@ -20,11 +20,39 @@ import React from "react";
 import { createRoot } from "@opentui/react";
 import { createServer } from "@opentui/ssh";
 import { cueloopHome } from "@cueloop/daemon";
+import { DaemonClient } from "@cueloop/daemon/client";
+import type { Artifact } from "@cueloop/schema";
 import { App } from "./App";
+import { snapshotWorkbench } from "./workbench-snapshot";
 
 /** OSC background query budget: brief so a terminal that never answers falls back to dark. */
 const THEME_QUERY_TIMEOUT_MS = 200;
 
+/**
+ * The frozen diff an observer reads for a served workbench thread: captured once at serve time, so a
+ * late local edit never shifts it. Undefined when nothing is served or the thread is not a workbench.
+ */
+async function captureFrozenArtifact(
+  home: string,
+  sessionId: string | undefined,
+): Promise<Artifact | undefined> {
+  if (sessionId === undefined) return undefined;
+
+  const probe = await DaemonClient.connect({ home, autostart: true });
+
+  try {
+    const thread = await probe.sessionGet(sessionId).catch(() => undefined);
+
+    if (thread === undefined) return undefined;
+
+    const snapshot = await snapshotWorkbench(thread, (root) => probe.repoDiff(root));
+
+    return snapshot === thread ? undefined : snapshot.artifact;
+  } finally {
+    probe.close();
+  }
+}
+
 export interface ServeOptions {
   /** TCP port for the SSH listener; 0 picks an ephemeral port. Default 2222. */
   port?: number;
@@ -53,6 +81,8 @@ export async function serveClient(options: ServeOptions = {}): Promise<ServeHand
 
   mkdirSync(sshDir, { recursive: true, mode: 0o700 });
 
+  const servedArtifact = await captureFrozenArtifact(home, options.sessionId);
+
   const server = createServer({
     // password-less by design; see the trust model in the module comment
     auth: "open",
@@ -73,6 +103,7 @@ export async function serveClient(options: ServeOptions = {}): Promise<ServeHand
         sessionId: options.sessionId,
         readOnly: true,
         appearance,
+        servedArtifact,
         // q disconnects only this observer, never the server
         onExit: () => session.end(),
       }),