@cueloop/client 0.1.0-alpha.39 → 0.1.0-alpha.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.39",
+  "version": "0.1.0-alpha.40",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -25,10 +25,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.39",
-    "@cueloop/extension-api": "0.1.0-alpha.39",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.39",
-    "@cueloop/schema": "0.1.0-alpha.39",
+    "@cueloop/daemon": "0.1.0-alpha.40",
+    "@cueloop/extension-api": "0.1.0-alpha.40",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.40",
+    "@cueloop/schema": "0.1.0-alpha.40",
     "@opentui/core": "^0.5.2",
     "@opentui/keymap": "0.5.2",
     "@opentui/react": "^0.5.2",

package/src/App.plan-review.test.tsx

@@ -1,7 +1,7 @@
 /** The plan review surface v2: native selection feeds the annotation quote, the inline compose box keeps its anchor painted, the rail edits what the document selects, and edit-exit reconciliation orphans annotations whose passage was removed. Char-frame + styled-span assertions over the real App and a real in-process daemon. */
 
 import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
+import { mkdtempSync, readFileSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import React from "react";
@@ -525,7 +525,7 @@ describe("sheet header", () => {
     expect(frame).toContain("Share");
   });
 
-  test("the Agent tab shows the submitter, status, and revision", async () => {
+  test("the Agent tab shows the harness launcher and a compact status footer", async () => {
     // Arrange
     const setup = await renderApp();
     const lines = setup.captureCharFrame().split("\n");
@@ -536,12 +536,39 @@ describe("sheet header", () => {
     await setup.mockMouse.click(tabColumn + 1, tabRow);
     await setup.renderOnce();
 
-    // Assert
-    await waitForText(setup, "status: pending");
+    // Assert - branded launcher cards, and the submitter kept in the footer
+    await waitForText(setup, "claude code");
     const frame = setup.captureCharFrame();
+    expect(frame).toContain("Ask an agent about this plan");
+    expect(frame).toContain("codex");
     expect(frame).toContain("agent/worker-3");
-    expect(frame).toContain("status: pending");
-    expect(frame).toContain("revision 1");
+  });
+});
+
+describe("quick-actions settings editor", () => {
+  test("expanding an action edits its system prompt inline and persists it", async () => {
+    // Arrange
+    const setup = await renderApp();
+    const clickText = async (needle: string): Promise<void> => {
+      const lines = setup.captureCharFrame().split("\n");
+      const row = lines.findIndex((line) => line.includes(needle));
+      await setup.mockMouse.click(lines[row]!.indexOf(needle) + 1, row);
+      await setup.renderOnce();
+    };
+
+    // Act - open Settings, enter Actions, expand the first action, type into its input
+    await clickText("menu");
+    await clickText("Settings");
+    await clickText("Actions");
+    await clickText("Zoom out, research in depth");
+    await type(setup, "CUSTOM");
+    await setup.renderOnce();
+
+    // Assert - the keystrokes reached the focused input (not swallowed by nav) and persisted
+    expect(setup.captureCharFrame()).toContain("CUSTOM");
+    await waitForState(setup, () =>
+      readFileSync(join(home, "no-config.toml"), "utf8").includes("CUSTOM"),
+    );
   });
 });
 

package/src/App.tsx

@@ -20,6 +20,7 @@ import {
   DEFAULT_KEYS,
   DEFAULT_QUICK_ACTIONS,
   loadConfig,
+  persistActions,
   persistAuthorName,
   persistAutoClose,
   persistTheme,
@@ -37,6 +38,7 @@ import type { Theme } from "./theme";
 import { returnPaneFor } from "@cueloop/schema";
 import { createReviewController } from "./session-controller";
 import type { SessionClient } from "@cueloop/daemon/client";
+import { launchHarnessInSplit } from "@cueloop/daemon/herdr-split";
 import {
   activeSpanState,
   createIntentDispatch,
@@ -51,6 +53,7 @@ import { Toolbar } from "./components/primitives/Toolbar";
 import { MenuBar } from "./components/MenuBar";
 import { KeybindsDialog } from "./components/KeybindsDialog";
 import { SettingsDialog, type SettingsCategory } from "./components/SettingsDialog";
+import { QuickActionsEditor } from "./components/quick-actions-editor";
 import { CLIENT_VERSION } from "./version";
 import { Breadcrumb, type BreadcrumbItem } from "./components/Breadcrumb";
 import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
@@ -183,6 +186,8 @@ export function App({
   const [themeOverrides, setThemeOverrides] = useState<Partial<Theme>>({});
   const [authorNames, setAuthorNames] = useState<Record<string, string>>({});
   const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
+  // the quick-action row whose system-prompt input is open in Settings, or null
+  const [actionsExpandedIndex, setActionsExpandedIndex] = useState<number | null>(null);
   useEffect(() => {
     const config = loadConfig({ repoRoot: session?.workspace.repoRoot });
     keysRef.current = config.keys;
@@ -415,6 +420,26 @@ export function App({
                     : "none";
 
   // ── settings dialog: config-backed model, navigation, persistence ──
+  const commitActions = (next: QuickAction[]): void => {
+    setQuickActions(next);
+    persistActions(next);
+  };
+  const editActionMetadata = (index: number, metadata: string): void =>
+    commitActions(
+      quickActions.map((action, actionIndex) =>
+        actionIndex === index
+          ? { ...action, metadata: metadata.trim() ? metadata : undefined }
+          : action,
+      ),
+    );
+  const resetActions = (): void => {
+    setActionsExpandedIndex(null);
+    commitActions(DEFAULT_QUICK_ACTIONS.map((action) => ({ ...action })));
+  };
+  const addAction = (): void => {
+    setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: quickActions.length }));
+    commitActions([...quickActions, { prompt: "New action" }]);
+  };
   const settingsCategories: SettingsCategory[] = [
     {
       id: "general",
@@ -455,6 +480,27 @@ export function App({
         },
       ],
     },
+    {
+      id: "actions",
+      name: "Actions",
+      description: "quick-action comments",
+      rows: [],
+      customBody: (
+        <QuickActionsEditor
+          actions={quickActions}
+          selectedIndex={settingsNav.categoryId === "actions" ? settingsNav.rowIndex : -1}
+          expandedIndex={actionsExpandedIndex}
+          onToggleExpand={(index) => {
+            setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: index }));
+            setActionsExpandedIndex((current) => (current === index ? null : index));
+          }}
+          onEditMetadata={editActionMetadata}
+          onReset={resetActions}
+          onAdd={addAction}
+          theme={theme}
+        />
+      ),
+    },
   ];
   const settingsValues = {
     autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
@@ -479,6 +525,11 @@ export function App({
     }
   };
   const handleSettingsKey = (name: string): void => {
+    // an open system-prompt input owns typing; only esc (close it) escapes here
+    if (actionsExpandedIndex !== null) {
+      if (name === "escape") setActionsExpandedIndex(null);
+      return;
+    }
     if (name === "escape") return void setMenuDialog(null);
     const categoryIndex = settingsCategories.findIndex(
       (category) => category.id === settingsNav.categoryId,
@@ -502,6 +553,24 @@ export function App({
         setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: 0 }));
       return;
     }
+    // the Actions category is a list of quick actions plus a trailing "add" row
+    if (category.id === "actions") {
+      const rowCount = quickActions.length + 1;
+      if (name === "j" || name === "down")
+        setSettingsNav((state) => ({
+          ...state,
+          rowIndex: Math.min(rowCount - 1, state.rowIndex + 1),
+        }));
+      else if (name === "k" || name === "up")
+        setSettingsNav((state) => ({ ...state, rowIndex: Math.max(0, state.rowIndex - 1) }));
+      else if (name === "h" || name === "tab")
+        setSettingsNav((state) => ({ ...state, zone: "nav" }));
+      else if (name === "return" || name === "space" || name === "l") {
+        if (settingsNav.rowIndex === quickActions.length) addAction();
+        else setActionsExpandedIndex(settingsNav.rowIndex);
+      }
+      return;
+    }
     if (name === "j" || name === "down")
       setSettingsNav((state) => ({
         ...state,
@@ -582,7 +651,10 @@ export function App({
           activeCategoryId={settingsNav.categoryId}
           activeRowIndex={settingsNav.rowIndex}
           activeZone={settingsNav.zone}
-          onCategorySelect={(id) => setSettingsNav({ categoryId: id, rowIndex: 0, zone: "body" })}
+          onCategorySelect={(id) => {
+            setActionsExpandedIndex(null);
+            setSettingsNav({ categoryId: id, rowIndex: 0, zone: "body" });
+          }}
           onRowActivate={(row) => cycleSetting(row.key)}
           theme={theme}
         />
@@ -989,6 +1061,12 @@ export function App({
               onSelectCuration: selectCurationFromRail,
               onUndoCuration: undoCurationFromRail,
               onSubmitRequest,
+              onLaunchHarness: (command, seedText) =>
+                launchHarnessInSplit({
+                  command,
+                  cwd: activeSession.artifact.meta.cwd ?? process.cwd(),
+                  seedText,
+                }),
             }}
           />
         </box>

package/src/components/ReviewPanel.stories.tsx

@@ -23,6 +23,7 @@ const rail = {
   onSelectCuration: () => {},
   onUndoCuration: () => {},
   onSubmitRequest: () => {},
+  onLaunchHarness: () => {},
 };
 
 const panelCallbacks = { onDividerGrab: () => {}, onToggle: () => {} };

package/src/components/ReviewRail.stories.tsx

@@ -14,6 +14,7 @@ const callbacks = {
   onSelectCuration: () => {},
   onUndoCuration: () => {},
   onSubmitRequest: () => {},
+  onLaunchHarness: () => {},
 };
 
 /** The rail expects a height-constrained parent, like the app's main row. */

package/src/components/ReviewRail.tsx

@@ -17,6 +17,7 @@ import { Button } from "./primitives/Button";
 import { Toolbar } from "./primitives/Toolbar";
 import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
 import { ConfirmCard, type ConfirmCardProps } from "./ConfirmCard";
+import { AgentLauncher } from "./agent-launcher";
 import { Card } from "./primitives/Card";
 import { truncateToSingleLine } from "./truncate-text";
 import { resolveDisplayName } from "../attribution";
@@ -60,6 +61,8 @@ export interface ReviewRailProps {
   /** Restore a curation item (the selected card's undo button, same as the u key). */
   onUndoCuration: (id: string) => void;
   onSubmitRequest: () => void;
+  /** Launch a bring-your-own harness in the rail (Agent tab); seedText is the plan-context briefing. */
+  onLaunchHarness: (command: string, seedText?: string) => void;
   /** Rail column width; the app derives it from the persisted review layout. */
   width?: number;
   /**
@@ -93,6 +96,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     onSelectCuration,
     onUndoCuration,
     onSubmitRequest,
+    onLaunchHarness,
     width = 34,
     onCollapse,
     theme,
@@ -197,7 +201,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
       {railTab === "agent" ? (
         <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 2 }}>
           <text> </text>
-          <AgentTab session={session} theme={theme} />
+          <AgentLauncher session={session} onLaunchHarness={onLaunchHarness} theme={theme} />
         </box>
       ) : openAnnotations.length === 0 && curationItems.length === 0 ? (
         <box style={{ flexGrow: 1, alignItems: "center", justifyContent: "center" }}>
@@ -310,15 +314,3 @@ function RemovalCard({
     </box>
   );
 }
-
-/** Agent tab: who submitted, where the session stands, which revision. */
-function AgentTab({ session, theme }: { session: ReviewSession; theme?: Theme }): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  return (
-    <box style={{ flexDirection: "column", flexGrow: 1 }}>
-      <text fg={tokens.textMuted}>{session.artifact.meta.agent ?? "unknown"}</text>
-      <text fg={tokens.textDim}>status: {session.status}</text>
-      <text fg={tokens.textDim}>revision {session.revisions.length}</text>
-    </box>
-  );
-}

package/src/components/SettingsDialog.tsx

@@ -19,6 +19,8 @@ export interface SettingsCategory {
   name: string;
   description: string;
   rows: SettingsRowDescriptor[];
+  /** A bespoke body (e.g. the quick-actions editor) rendered instead of typed rows. */
+  customBody?: React.ReactNode;
 }
 
 export type SettingsValues = Record<string, string | boolean>;
@@ -86,6 +88,7 @@ export function SettingsDialog({
           <text fg={tokens.text}>{category.name}</text>
           <text fg={tokens.textDim}>{category.description}</text>
           <box style={{ height: 1 }} />
+          {category.customBody}
           {category.rows.map((row, rowIndex) => {
             const isActive = activeZone === "body" && rowIndex === activeRowIndex;
             const value = values[row.key];

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -937,25 +937,25 @@ exports[`stories catalog ReviewRail/AgentTab renders, snapshots, and carries its
  │ Review  Agent                 │      
  ╰───────────────────────────────╯      
                                         
-   agent/worker-3                       
-   status: pending                      
-   revision 1                           
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
-                                        
+   Ask an agent about this plan         
+   ╭─────────────────────────────╮      
+   │  ▛████▜   claude code       │      
+   │ ▜██████▛  launch in rail ▸  │      
+   │  ▝▝  ▝▝                     │      
+   ╰─────────────────────────────╯      
                                         
+   ╭─────────────────────────────╮      
+   │ ███       pi                │      
+   │ █ █       launch in rail ▸  │      
+   │ ██ █                        │      
+   │ █  █                        │      
+   ╰─────────────────────────────╯      
                                         
+   ╭─────────────────────────────╮      
+   │ ┌───┐     codex             │      
+   │ │>_ │     launch in rail ▸  │      
+   │ └───┘                       │      
+   ╰─────────────────────────────╯      
                                         
 "
 `;
@@ -1389,6 +1389,34 @@ exports[`stories catalog WalkWizard/WithAgentNote renders, snapshots, and carrie
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog AgentLauncher/Launcher renders, snapshots, and carries its colors: AgentLauncher/Launcher 1`] = `
+"  Ask an agent about this plan          
+                                        
+  ╭────────────────────────────────────╮
+  │  ▛████▜   claude code              │
+  │ ▜██████▛  launch in rail ▸         │
+  │  ▝▝  ▝▝                            │
+  ╰────────────────────────────────────╯
+                                        
+  ╭────────────────────────────────────╮
+  │ ███       pi                       │
+  │ █ █       launch in rail ▸         │
+  │ ██ █                               │
+  │ █  █                               │
+  ╰────────────────────────────────────╯
+                                        
+  ╭────────────────────────────────────╮
+  │ ┌───┐     codex                    │
+  │ │>_ │     launch in rail ▸         │
+  │ └───┘                              │
+  ╰────────────────────────────────────╯
+                                        
+  plan context: seed the plan ▸         
+                                        
+  agent/worker-3 · pending · rev 1      
 "
 `;
 
@@ -1661,6 +1689,58 @@ exports[`stories catalog primitives/Toolbar/ActionRow renders, snapshots, and ca
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog QuickActionsEditor/Collapsed renders, snapshots, and carries its colors: QuickActionsEditor/Collapsed 1`] = `
+"  click a prompt to edit its system  reset to         
+  prompt                             defaults ▸       
+                                                      
+  ▸ Zoom out, research in depth                       
+    Research the broader problem, prior art, an…      
+  ▸ Restate simplified                                
+    Restate this as the simplest thing that wor…      
+  ▸ Out of scope                                      
+    This is out of scope for the task, so captu…      
+  ▸ Let's chat about this                             
+    Do not implement yet, and surface the open …      
+  ▸ Prototype this                                    
+    Build a throwaway prototype to answer the q…      
+  ▸ Ensure 0 regressions                              
+    Characterize the current behavior with test…      
+  ▸ Consider existing repo patterns                   
+    Follow the nearest existing pattern in this…      
+  + Add action                                        
+                                                      
+                                                      
+                                                      
+                                                      
+"
+`;
+
+exports[`stories catalog QuickActionsEditor/RowExpanded renders, snapshots, and carries its colors: QuickActionsEditor/RowExpanded 1`] = `
+"  click a prompt to edit its system  reset to         
+  prompt                             defaults ▸       
+                                                      
+  ▸ Zoom out, research in depth                       
+    Research the broader problem, prior art, an…      
+  ▾ Restate simplified                                
+    > Restate this as the simplest thing that works an
+  ▸ Out of scope                                      
+    This is out of scope for the task, so captu…      
+  ▸ Let's chat about this                             
+    Do not implement yet, and surface the open …      
+  ▸ Prototype this                                    
+    Build a throwaway prototype to answer the q…      
+  ▸ Ensure 0 regressions                              
+    Characterize the current behavior with test…      
+  ▸ Consider existing repo patterns                   
+    Follow the nearest existing pattern in this…      
+  + Add action                                        
+                                                      
+                                                      
+                                                      
+                                                      
 "
 `;
 

package/src/components/agent-launcher.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AgentLauncher } from "./agent-launcher";
+import { fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "AgentLauncher" };
+
+/** The launcher expects the rail's narrow, height-constrained column. */
+function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 40, height: 24, paddingLeft: 2, backgroundColor: DARK.panel }}>
+      {children}
+    </box>
+  );
+}
+
+export const Launcher: Story = {
+  render: () => (
+    <RailFrame>
+      <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.accent, "#cc785c"],
+  size: { width: 40, height: 24 },
+};

package/src/components/agent-launcher.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test";
+import { HARNESS_LAUNCHERS, planHandoffBriefing } from "./agent-launcher";
+
+describe("planHandoffBriefing", () => {
+  test("references the session by id and directs the agent to read then annotate, not rewrite", () => {
+    // Act
+    const briefing = planHandoffBriefing("ses_42");
+
+    // Assert
+    expect(briefing).toContain("cueloop session get ses_42");
+    expect(briefing).toContain("cueloop session annotate ses_42");
+    expect(briefing).toContain("Do not rewrite the plan");
+  });
+});
+
+describe("HARNESS_LAUNCHERS", () => {
+  test("carries the three branded harnesses with their launch commands", () => {
+    // Assert
+    expect(HARNESS_LAUNCHERS.map((harness) => harness.command)).toEqual(["cc", "pi", "codex"]);
+  });
+});

package/src/components/agent-launcher.tsx

@@ -0,0 +1,123 @@
+/**
+ * The Agent rail launcher: bring-your-own review harness. Branded claude code /
+ * pi / codex cards that, on click, run that harness in a herdr split beside the
+ * review (see launchHarnessInSplit) so a reviewer can ask an agent about the plan
+ * without leaving the tab. A plan-context toggle seeds a briefing into the split.
+ */
+
+import React, { useState } from "react";
+import type { ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+/** One launchable harness: its rail command and the real logo, rendered as colored rows. */
+export interface HarnessLauncher {
+  id: string;
+  name: string;
+  /** The shell command that starts the harness, run in the split. */
+  command: string;
+  /** Brand color for the mark. */
+  color: string;
+  /** Multi-row mark rendered from the real logo. */
+  logo: string[];
+}
+
+/** Claude Code's brand coral - not a theme token, the mark keeps its own color. */
+const CLAUDE_CORAL = "#CC785C";
+
+/** The bring-your-own harnesses, with their real marks (finalized in the prototype). */
+export const HARNESS_LAUNCHERS: HarnessLauncher[] = [
+  {
+    id: "claude",
+    name: "claude code",
+    command: "cc",
+    color: CLAUDE_CORAL,
+    logo: [" ▛████▜", "▜██████▛", " ▝▝  ▝▝"],
+  },
+  { id: "pi", name: "pi", command: "pi", color: "#e4e6ec", logo: ["███ ", "█ █ ", "██ █", "█  █"] },
+  {
+    id: "codex",
+    name: "codex",
+    command: "codex",
+    color: "#e4e6ec",
+    logo: ["┌───┐", "│>_ │", "└───┘"],
+  },
+];
+
+/** The briefing typed into a launched harness when the plan-context toggle is on. */
+export function planHandoffBriefing(sessionId: string): string {
+  return `Review this cueloop plan: read it with 'cueloop session get ${sessionId}', then comment with 'cueloop session annotate ${sessionId} --author me --quote "<exact span>" --body "<comment>"'. Do not rewrite the plan.`;
+}
+
+function LogoMark({ harness }: { harness: HarnessLauncher }): React.ReactNode {
+  return (
+    <box style={{ width: 9, flexShrink: 0, flexDirection: "column", alignItems: "flex-start" }}>
+      {harness.logo.map((row) => (
+        <text key={row} fg={harness.color}>
+          {row}
+        </text>
+      ))}
+    </box>
+  );
+}
+
+export interface AgentLauncherProps {
+  session: ReviewSession;
+  /** Launch a harness in the rail; seedText is the plan-context briefing when the toggle is on. */
+  onLaunchHarness: (command: string, seedText?: string) => void;
+  theme?: Theme;
+}
+
+/**
+ * The Agent tab body: branded launcher cards plus a plan-context toggle. Replaces
+ * the old dead agent/status/revision placeholder (now a dim footer line).
+ */
+export function AgentLauncher({
+  session,
+  onLaunchHarness,
+  theme,
+}: AgentLauncherProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [seedContext, setSeedContext] = useState(true);
+  const launch = (harness: HarnessLauncher): void =>
+    onLaunchHarness(harness.command, seedContext ? planHandoffBriefing(session.id) : undefined);
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <text fg={tokens.text}>Ask an agent about this plan</text>
+      <box style={{ height: 1 }} />
+      {HARNESS_LAUNCHERS.map((harness) => (
+        <box
+          key={harness.id}
+          style={{
+            flexDirection: "row",
+            height: harness.logo.length + 2,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            backgroundColor: "transparent",
+            borderColor: tokens.border,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }}
+          onMouseUp={() => launch(harness)}
+        >
+          <LogoMark harness={harness} />
+          <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1 }}>
+            <text fg={tokens.textMuted}>{harness.name}</text>
+            <text fg={tokens.textDim}>launch in rail ▸</text>
+          </box>
+        </box>
+      ))}
+      <box style={{ flexDirection: "row" }} onMouseUp={() => setSeedContext((on) => !on)}>
+        <text fg={tokens.textDim}>plan context: </text>
+        <text fg={tokens.accent}>{seedContext ? "seed the plan ▸" : "none ▸"}</text>
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={tokens.textDim}>
+        {session.artifact.meta.agent ?? "unknown"} · {session.status} · rev{" "}
+        {session.revisions.length}
+      </text>
+    </box>
+  );
+}

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { QuickActionsEditor } from "./quick-actions-editor";
+
+export const meta: StoryMeta = { title: "QuickActionsEditor" };
+
+/** The editor renders inside the settings body column. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 54, height: 22, paddingLeft: 2, backgroundColor: DARK.elevated }}>
+      {children}
+    </box>
+  );
+}
+
+const noop = () => {};
+
+export const Collapsed: Story = {
+  render: () => (
+    <BodyFrame>
+      <QuickActionsEditor
+        actions={DEFAULT_QUICK_ACTIONS}
+        selectedIndex={0}
+        expandedIndex={null}
+        onToggleExpand={noop}
+        onEditMetadata={noop}
+        onReset={noop}
+        onAdd={noop}
+        theme={DARK}
+      />
+    </BodyFrame>
+  ),
+  size: { width: 54, height: 22 },
+};
+
+export const RowExpanded: Story = {
+  render: () => (
+    <BodyFrame>
+      <QuickActionsEditor
+        actions={DEFAULT_QUICK_ACTIONS}
+        selectedIndex={1}
+        expandedIndex={1}
+        onToggleExpand={noop}
+        onEditMetadata={noop}
+        onReset={noop}
+        onAdd={noop}
+        theme={DARK}
+      />
+    </BodyFrame>
+  ),
+  size: { width: 54, height: 22 },
+};

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

@@ -0,0 +1,136 @@
+/**
+ * The Settings "Actions" body: the quick-action vocabulary editor. Each row is a
+ * clickable prompt; the selected-and-expanded row reveals a focused input for the
+ * per-action system prompt (the extra guidance appended when the action is used).
+ * A reset-to-defaults control and an add-action row bracket the list. Controlled:
+ * the app owns the actions, the selection, and which row is expanded.
+ */
+
+import React, { useRef } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { QuickAction } from "../config";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+// ⏎ never inserts a newline: a system prompt is one line, esc closes the editor.
+const ACTION_INPUT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface QuickActionsEditorProps {
+  actions: QuickAction[];
+  /** The highlighted row; equals the settings body row index. */
+  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. */
+  onToggleExpand: (index: number) => void;
+  onEditMetadata: (index: number, metadata: string) => void;
+  onReset: () => void;
+  onAdd: () => void;
+  theme?: Theme;
+}
+
+export function QuickActionsEditor({
+  actions,
+  selectedIndex,
+  expandedIndex,
+  onToggleExpand,
+  onEditMetadata,
+  onReset,
+  onAdd,
+  theme,
+}: QuickActionsEditorProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <box style={{ flexDirection: "row" }}>
+        <box style={{ flexGrow: 1 }}>
+          <text fg={tokens.textDim}>click a prompt to edit its system prompt</text>
+        </box>
+        <box onMouseUp={onReset}>
+          <text fg={tokens.textDim}>reset to defaults ▸</text>
+        </box>
+      </box>
+      <box style={{ height: 1 }} />
+      {actions.map((action, index) => (
+        <ActionRow
+          key={index}
+          action={action}
+          isSelected={index === selectedIndex}
+          isExpanded={index === expandedIndex}
+          onToggleExpand={() => onToggleExpand(index)}
+          onEditMetadata={(metadata) => onEditMetadata(index, metadata)}
+          theme={theme}
+        />
+      ))}
+      <box
+        style={{ backgroundColor: selectedIndex === actions.length ? tokens.border : undefined }}
+        onMouseUp={onAdd}
+      >
+        <text fg={tokens.textMuted}>+ Add action</text>
+      </box>
+    </box>
+  );
+}
+
+function ActionRow({
+  action,
+  isSelected,
+  isExpanded,
+  onToggleExpand,
+  onEditMetadata,
+  theme,
+}: {
+  action: QuickAction;
+  isSelected: boolean;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onEditMetadata: (metadata: string) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <box
+        style={{ backgroundColor: isSelected ? tokens.border : undefined }}
+        onMouseUp={onToggleExpand}
+      >
+        <text fg={isSelected ? tokens.text : tokens.textMuted}>
+          {`${isExpanded ? "▾ " : "▸ "}${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 ? (
+        <box style={{ paddingLeft: 2 }}>
+          <text fg={tokens.textDim}>{truncateMetadata(action.metadata)}</text>
+        </box>
+      ) : null}
+    </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/config.test.ts

@@ -9,6 +9,7 @@ import {
   loadConfig,
   persistAuthorName,
   persistReviewState,
+  persistActions,
   persistReviewWidth,
   persistTheme,
   quickActionBody,
@@ -420,6 +421,33 @@ describe("quick actions ([[actions]])", () => {
   });
 });
 
+describe("persistActions", () => {
+  test("round-trips the action set through [[actions]] and replaces prior ones", () => {
+    // Arrange
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-persist-actions-"));
+    const path = join(dir, "config.toml");
+    writeFileSync(path, `[[actions]]\nprompt = "old one"\n\n[ui]\nauto_close = 3\n`);
+
+    try {
+      // Act
+      persistActions(
+        [{ prompt: "Zoom out" }, { prompt: "Prototype", metadata: "skip tests and polish" }],
+        path,
+      );
+      const config = loadConfig({ userConfigPath: path });
+
+      // Assert - the old action is gone, the new set is read back, and [ui] survives
+      expect(config.actions).toEqual([
+        { prompt: "Zoom out" },
+        { prompt: "Prototype", metadata: "skip tests and polish" },
+      ]);
+      expect(config.ui.autoClose).toBe(3);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
 describe("quickActionBody", () => {
   test("appends the system prompt below the prompt when set", () => {
     // Assert

package/src/config.ts

@@ -318,6 +318,33 @@ function persistUiSetting(key: string, rendered: string, userConfigPath?: string
   writeFileSync(path, text);
 }
 
+/** A double-quoted TOML basic string with the quote-breaking characters escaped. */
+function tomlString(value: string): string {
+  return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n")}"`;
+}
+
+/**
+ * Persist the whole quick-action set as `[[actions]]` tables, replacing any
+ * existing ones. The set is the user's entire vocabulary (not merged), so the
+ * old blocks are stripped and the new ones appended. An empty set clears them.
+ */
+export function persistActions(actions: QuickAction[], userConfigPath?: string): void {
+  const path = userConfigPathFrom(userConfigPath);
+  let text = existsSync(path) ? readFileSync(path, "utf8") : "";
+  // strip every existing [[actions]] block (header through its key lines)
+  text = text.replace(/^\[\[actions\]\][^[]*/gm, "").trimEnd();
+  const blocks = actions
+    .map((action) => {
+      const lines = [`[[actions]]`, `prompt = ${tomlString(action.prompt)}`];
+      if (action.metadata) lines.push(`metadata = ${tomlString(action.metadata)}`);
+      return lines.join("\n");
+    })
+    .join("\n\n");
+  text = blocks ? `${text ? `${text}\n\n` : ""}${blocks}\n` : `${text}\n`;
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, text);
+}
+
 /** Persist the auto-close choice (`[ui] auto_close`) into the user config. */
 export function persistAutoClose(value: AutoClose, userConfigPath?: string): void {
   persistUiSetting("auto_close", value === "off" ? '"off"' : String(value), userConfigPath);