@cueloop/client 0.1.0-alpha.31 → 0.1.0-alpha.32

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.31",
+  "version": "0.1.0-alpha.32",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.31",
-    "@cueloop/extension-api": "0.1.0-alpha.31",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.31",
-    "@cueloop/schema": "0.1.0-alpha.31",
+    "@cueloop/daemon": "0.1.0-alpha.32",
+    "@cueloop/extension-api": "0.1.0-alpha.32",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.32",
+    "@cueloop/schema": "0.1.0-alpha.32",
     "@opentui/core": "^0.5.2",
     "@opentui/keymap": "0.5.2",
     "@opentui/react": "^0.5.2",

package/src/App.autoclose.test.tsx

@@ -10,7 +10,7 @@ import { ManualClock } from "@opentui/core/testing";
 import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { press, settle, waitForText } from "./test-support";
+import { isolateUserConfig, press, settle, waitForText } from "./test-support";
 
 const PLAN = "# Plan\n\nShip the thing.\n";
 
@@ -18,12 +18,13 @@ let home: string;
 let server: DaemonServer;
 let session: ReviewSession;
 let configPath: string;
+let restoreUserConfig: () => void;
 let clock: ManualClock;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-close-"));
   configPath = join(home, "config.toml");
-  process.env.CUELOOP_CONFIG = configPath;
+  restoreUserConfig = isolateUserConfig(home, "config.toml");
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -33,7 +34,7 @@ beforeEach(() => {
   clock = new ManualClock();
 });
 afterEach(() => {
-  delete process.env.CUELOOP_CONFIG;
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

package/src/App.diff.test.tsx

@@ -9,7 +9,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { press, waitForText } from "./test-support";
+import { isolateUserConfig, press, waitForText } from "./test-support";
 
 const PATCH = `diff --git a/src/store.ts b/src/store.ts
 index 111..222 100644
@@ -23,11 +23,13 @@ index 111..222 100644
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-diff-"));
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -36,6 +38,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

package/src/App.export.test.tsx

@@ -9,7 +9,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { press, waitForState, waitForText } from "./test-support";
+import { isolateUserConfig, press, waitForState, waitForText } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -20,7 +20,7 @@ let home: string;
 let vault: string;
 let server: DaemonServer;
 let session: ReviewSession;
-let savedConfigEnv: string | undefined;
+let restoreUserConfig: () => void;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-app-export-"));
@@ -28,8 +28,7 @@ beforeEach(() => {
   mkdirSync(vault);
   const configPath = join(home, "config.toml");
   writeFileSync(configPath, `[integrations.obsidian]\nvault = ${JSON.stringify(vault)}\nexportOn = "resolve"\n`);
-  savedConfigEnv = process.env.CUELOOP_CONFIG;
-  process.env.CUELOOP_CONFIG = configPath;
+  restoreUserConfig = isolateUserConfig(home, "config.toml");
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -38,8 +37,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
-  if (savedConfigEnv === undefined) delete process.env.CUELOOP_CONFIG;
-  else process.env.CUELOOP_CONFIG = savedConfigEnv;
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

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

@@ -10,7 +10,7 @@ import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
 import { DARK as T } from "./theme";
-import { press, settle, typeText as type, waitForState, waitForText, waitForTextGone } from "./test-support";
+import { isolateUserConfig, press, settle, typeText as type, waitForState, waitForText, waitForTextGone } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -27,14 +27,11 @@ The daemon persists sessions to disk atomically.
 let home: string;
 let server: DaemonServer;
 let session: ReviewSession;
-let priorConfig: string | undefined;
+let restoreUserConfig: () => void;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-plan-review-"));
-  // Isolate from the dev's real config so the rail state is the default here,
-  // not whatever review_state they last persisted (CI runs clean already).
-  priorConfig = process.env.CUELOOP_CONFIG;
-  process.env.CUELOOP_CONFIG = join(home, "no-config.toml");
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -43,8 +40,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
-  if (priorConfig === undefined) delete process.env.CUELOOP_CONFIG;
-  else process.env.CUELOOP_CONFIG = priorConfig;
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });
@@ -250,7 +246,7 @@ describe("inline compose keeps the anchor painted", () => {
     // the whole cursor block is the anchor here; check the highlight landed
     const stored = server.core.sessionGet(session.id);
     expect(stored.annotations.length).toBe(1);
-    expect(backgroundsOf(setup, stored.annotations[0]!.anchor.quote.slice(0, 20))).toContain(T.markCommentBg);
+    expect(backgroundsOf(setup, stored.annotations[0]!.anchor.quote.slice(0, 20))).toContain(T.markCommentBackground);
     // renderApp plus this many frame-waits grazes the 5s default on a loaded CI
     // runner, and the whole-suite publish lane has timed even 15s out; give the
     // heaviest frame-wait chain generous headroom so runner load cannot flake it.
@@ -396,7 +392,7 @@ describe("the document selects, the rail edits", () => {
     await press(setup, "enter");
     await waitForText(setup, "COMMENT · pending");
     expect(server.core.sessionGet(session.id).annotations.length).toBe(1);
-    expect(backgroundsOf(setup, "persists sessions")).toContain(T.markCommentBg);
+    expect(backgroundsOf(setup, "persists sessions")).toContain(T.markCommentBackground);
 
     // Act
     await press(setup, "x");
@@ -404,7 +400,7 @@ describe("the document selects, the rail edits", () => {
     // Assert
     await waitForTextGone(setup, "COMMENT · pending");
     expect(server.core.sessionGet(session.id).annotations.length).toBe(0);
-    expect(backgroundsOf(setup, "persists sessions")).not.toContain(T.markCommentBg);
+    expect(backgroundsOf(setup, "persists sessions")).not.toContain(T.markCommentBackground);
   });
 });
 
@@ -437,7 +433,7 @@ describe("addressed annotations leave the open list", () => {
     expect(frame).toContain("✓ 1 addressed by revision");
     expect(frame).not.toContain("settled note");
     expect(frame).toContain("Review (1)"); // the addressed card no longer counts as pending
-    expect(backgroundsOf(setup, "The daemon")).not.toContain(T.markCommentBg); // no highlight paint
+    expect(backgroundsOf(setup, "The daemon")).not.toContain(T.markCommentBackground); // no highlight paint
   });
 });
 

package/src/App.readonly.test.tsx

@@ -9,7 +9,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import { makeAnchor, parseBlocks, type ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { press, waitForText } from "./test-support";
+import { isolateUserConfig, press, waitForText } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -24,11 +24,13 @@ The daemon persists sessions to disk atomically.
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-observer-"));
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -37,6 +39,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

package/src/App.rendering.test.tsx

@@ -9,7 +9,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { waitForText } from "./test-support";
+import { isolateUserConfig, waitForText } from "./test-support";
 
 const PLAN = `# Render Plan
 
@@ -30,11 +30,13 @@ Deploys block below the threshold.
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-render-"));
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -43,6 +45,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

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

@@ -10,7 +10,7 @@ import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
 import { loadConfig } from "./config";
-import { press, waitForText, waitForTextGone } from "./test-support";
+import { isolateUserConfig, press, waitForText, waitForTextGone } from "./test-support";
 
 const PLAN = "# Plan\n\nShip the thing.\n";
 
@@ -18,11 +18,12 @@ let home: string;
 let server: DaemonServer;
 let session: ReviewSession;
 let configPath: string;
+let restoreUserConfig: () => void;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-panel-"));
   configPath = join(home, "config.toml");
-  process.env.CUELOOP_CONFIG = configPath;
+  restoreUserConfig = isolateUserConfig(home, "config.toml");
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -31,7 +32,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
-  delete process.env.CUELOOP_CONFIG;
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

package/src/App.submit-confirm.test.tsx

@@ -9,7 +9,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import { makeAnchor, parseBlocks, type ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { press, settle, waitForText, waitForTextGone } from "./test-support";
+import { isolateUserConfig, press, settle, waitForText, waitForTextGone } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -24,11 +24,13 @@ The daemon persists sessions to disk atomically.
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-confirm-"));
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -37,6 +39,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

package/src/App.test.tsx

@@ -9,7 +9,7 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
-import { press, typeText as type, waitForState, waitForText } from "./test-support";
+import { isolateUserConfig, press, typeText as type, waitForState, waitForText } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -24,11 +24,13 @@ The daemon persists sessions to disk atomically.
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-app-"));
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -37,6 +39,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });

package/src/App.tsx

@@ -513,7 +513,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   return (
     <ThemeProvider theme={theme}>
       <box
-        style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.bg }}
+        style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.background }}
         onMouseDrag={(event: MouseEvent) => {
           if (!dividerDragging || reviewMode !== "expanded") return;
           const next = widthFromMouseColumn(event.x, terminalWidth);

package/src/App.walk.test.tsx

@@ -10,7 +10,7 @@ import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
 import { DARK } from "./theme";
-import { press, waitForState, waitForText, waitForTextGone } from "./test-support";
+import { isolateUserConfig, press, waitForState, waitForText, waitForTextGone } from "./test-support";
 
 const PATCH = `diff --git a/src/a.ts b/src/a.ts
 index 111..222 100644
@@ -38,11 +38,13 @@ index 555..666 100644
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-walk-"));
+  restoreUserConfig = isolateUserConfig(home);
   server = new DaemonServer({ home, idleExitMs: 0 });
   server.start();
   session = server.core.sessionCreate({
@@ -51,6 +53,7 @@ beforeEach(() => {
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });
@@ -236,7 +239,7 @@ describe("the guided walk", () => {
     // Assert
     // before the walk the sheet's added line wears the insertion color
     await waitForText(setup, "+new line");
-    expect(foregroundsOf(setup, "+new line")).toContain(DARK.insFg);
+    expect(foregroundsOf(setup, "+new line")).toContain(DARK.insertedForeground);
 
     // Act
     await press(setup, "w");
@@ -246,7 +249,7 @@ describe("the guided walk", () => {
     // dimmed: the sheet line drops to the dim token...
     expect(foregroundsOf(setup, "+new line")).toEqual([DARK.textDim]);
     // ...while the wizard preview keeps the insertion color
-    expect(foregroundsOf(setup, "+export const b = 3;")).toContain(DARK.insFg);
+    expect(foregroundsOf(setup, "+export const b = 3;")).toContain(DARK.insertedForeground);
   });
 
   test("walking a resolved review answers read-only", async () => {

package/src/components/CompletionOverlay.tsx

@@ -27,7 +27,7 @@ export function CompletionOverlay({ verdict, completion, status, returnsTo, them
       style={{
         width: "100%",
         height: "100%",
-        backgroundColor: tokens.bg,
+        backgroundColor: tokens.background,
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",

package/src/components/ConfirmDialog.stories.tsx

@@ -16,6 +16,6 @@ export const DeletePlan: Story = {
       {...callbacks}
     />
   ),
-  expectedColors: [DARK.backdrop, DARK.elevated, DARK.accent],
+  expectedColors: [DARK.accent],
   size: { width: 64, height: 16 },
 };

package/src/components/DiffSheet.stories.tsx

@@ -8,13 +8,13 @@ export const meta: StoryMeta = { title: "DiffSheet" };
 
 export const SignedRows: Story = {
   render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
-  expectedColors: [DARK.insFg, DARK.delFg],
+  expectedColors: [DARK.insertedForeground, DARK.deletedForeground],
   size: { width: 90, height: 16 },
 };
 
 export const CursorOnAddedLine: Story = {
   render: () => <DiffSheet rows={fixtureDiffRows()} cursor={4} annotations={[]} />,
-  expectedColors: [DARK.cursorBg],
+  expectedColors: [DARK.cursorBackground],
   size: { width: 90, height: 16 },
 };
 
@@ -39,6 +39,6 @@ export const AnnotatedLine: Story = {
       ]}
     />
   ),
-  expectedColors: [DARK.markCommentBg],
+  expectedColors: [DARK.markCommentBackground],
   size: { width: 90, height: 16 },
 };

package/src/components/DiffSheet.tsx

@@ -100,10 +100,10 @@ function DiffChunk({
     // the renderable's config parser requires the gutter key to be present
     const colors = new Map<number, { gutter: string | undefined; content: string }>();
     if (segment.annotation) {
-      colors.set(segment.rows.length - 1, { gutter: undefined, content: tokens.markCommentBg });
+      colors.set(segment.rows.length - 1, { gutter: undefined, content: tokens.markCommentBackground });
     }
     if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
-      colors.set(cursorInChunk, { gutter: tokens.cursorBg, content: tokens.cursorBg });
+      colors.set(cursorInChunk, { gutter: tokens.cursorBackground, content: tokens.cursorBackground });
     }
     return colors;
   }, [segment, cursorInChunk, tokens]);
@@ -124,7 +124,7 @@ function DiffChunk({
       <line-number
         ref={gutterRef}
         fg={tokens.textDim}
-        bg={tokens.bg}
+        bg={tokens.background}
         minWidth={4}
         paddingRight={1}
         lineNumbers={lineNumbers}
@@ -133,14 +133,14 @@ function DiffChunk({
         <text style={{ wrapMode: "none" }} selectable={false}>
           {segment.rows.map((row, lineIndex) => {
             const sign = row.kind === "add" ? "+" : row.kind === "del" ? "-" : " ";
-            const foreground = row.kind === "add" ? tokens.insFg : row.kind === "del" ? tokens.delFg : tokens.textMuted;
+            const foreground = row.kind === "add" ? tokens.insertedForeground : row.kind === "del" ? tokens.deletedForeground : tokens.textMuted;
             const isCursorRow = lineIndex === cursorInChunk;
             const isAnnotatedRow = segment.annotation !== null && lineIndex === segment.rows.length - 1;
             return (
               <span
                 key={lineIndex}
                 fg={foreground}
-                bg={isCursorRow ? tokens.cursorBg : isAnnotatedRow ? tokens.markCommentBg : undefined}
+                bg={isCursorRow ? tokens.cursorBackground : isAnnotatedRow ? tokens.markCommentBackground : undefined}
               >
                 {(lineIndex > 0 ? "\n" : "") + sign + rowLine(row)}
               </span>
@@ -215,13 +215,13 @@ export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, them
             const isCursor = segment.rowIndex === cursor;
             if (segment.row.kind === "file") {
               return (
-                <text key={segmentIndex} fg={tokens.text} bg={isCursor ? tokens.cursorBg : tokens.panel}>
+                <text key={segmentIndex} fg={tokens.text} bg={isCursor ? tokens.cursorBackground : tokens.panel}>
                   {isCursor ? "▎" : " "}■ {rowLine(segment.row)}
                 </text>
               );
             }
             return (
-              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBg : undefined}>
+              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBackground : undefined}>
                 {isCursor ? "▎" : " "}
                 {rowLine(segment.row)}
               </text>

package/src/components/InboxList.stories.tsx

@@ -8,7 +8,7 @@ export const meta: StoryMeta = { title: "InboxList" };
 
 export const TwoPending: Story = {
   render: () => <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />,
-  expectedColors: [DARK.accent, DARK.cursorBg],
+  expectedColors: [DARK.accent, DARK.cursorBackground],
   size: { width: 80, height: 12 },
 };
 

package/src/components/InboxList.tsx

@@ -23,7 +23,7 @@ export interface InboxListProps {
 export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
-    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.bg, padding: 1 }}>
+    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.background, padding: 1 }}>
       <text fg={tokens.accent}>cueloop · inbox ({inbox.length} pending)</text>
       <text> </text>
       {inbox.length === 0 ? (
@@ -33,7 +33,7 @@ export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListPr
           const selected = index === cursor;
           const title = session.artifact.meta.title ?? session.id;
           return (
-            <box key={session.id} style={{ flexDirection: "row", backgroundColor: selected ? tokens.cursorBg : undefined }}>
+            <box key={session.id} style={{ flexDirection: "row", backgroundColor: selected ? tokens.cursorBackground : undefined }}>
               <text fg={selected ? tokens.text : tokens.textMuted}>
                 {selected ? "▸ " : "  "}
                 {title} · {session.workspace.branch} · {session.artifact.type}

package/src/components/PlanSheet.stories.tsx

@@ -21,7 +21,7 @@ export const AnnotatedPlan: Story = {
       {...callbacks}
     />
   ),
-  expectedColors: [DARK.markCommentBg, DARK.markSuggestionBg, DARK.cursorBg],
+  expectedColors: [DARK.markCommentBackground, DARK.markSuggestionBackground, DARK.cursorBackground],
   size: { width: 90, height: 28 },
 };
 

package/src/components/PlanSheet.tsx

@@ -193,7 +193,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
             <span fg={tokens.textDim}>{marker(block)}</span>
           </text>
           <text
-            bg={isCursor ? tokens.cursorBg : undefined}
+            bg={isCursor ? tokens.cursorBackground : undefined}
             selectable
             selectionBg={tokens.accent}
             selectionFg={tokens.accentInk}
@@ -228,7 +228,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
         theme={theme}
       />
       {editOrphanCount > 0 ? (
-        <box style={{ height: 1, backgroundColor: tokens.markCommentBg, paddingLeft: 2 }}>
+        <box style={{ height: 1, backgroundColor: tokens.markCommentBackground, paddingLeft: 2 }}>
           <text fg={tokens.red}>
             {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.
           </text>
@@ -312,13 +312,13 @@ function runStyle(run: StyleRun, block: DisplayBlock, tokens: Theme): { fg?: str
   const struck = block.type === "del";
   switch (run.role) {
     case "ins":
-      return { fg: tokens.insFg };
+      return { fg: tokens.insertedForeground };
     case "del":
-      return { fg: tokens.delFg };
+      return { fg: tokens.deletedForeground };
     case "mark-comment":
-      return { fg: tokens.text, bg: tokens.markCommentBg };
+      return { fg: tokens.text, bg: tokens.markCommentBackground };
     case "mark-suggestion":
-      return { fg: tokens.text, bg: tokens.markSuggestionBg };
+      return { fg: tokens.text, bg: tokens.markSuggestionBackground };
     case "mark-focus":
       return { fg: tokens.accentInk, bg: tokens.accent };
     case "kspan":

package/src/components/PromptDialog.stories.tsx

@@ -16,7 +16,7 @@ export const RenameAuthor: Story = {
       onInput={() => {}}
     />
   ),
-  expectedColors: [DARK.backdrop, DARK.elevated, DARK.accent],
+  expectedColors: [DARK.elevated, DARK.accent],
   size: { width: 64, height: 16 },
 };
 
@@ -31,6 +31,6 @@ export const NameYourself: Story = {
       onInput={() => {}}
     />
   ),
-  expectedColors: [DARK.backdrop, DARK.elevated],
+  expectedColors: [DARK.elevated],
   size: { width: 64, height: 16 },
 };

package/src/components/ReviewPanel.stories.tsx

@@ -27,7 +27,7 @@ const panelCallbacks = { onDividerGrab: () => {}, onToggle: () => {} };
 /** The plan area to the left of the divider, so the layout reads in context. */
 function PanelFrame({ children }: { children: React.ReactNode }): React.ReactNode {
   return (
-    <box style={{ flexDirection: "row", width: "100%", height: "100%", backgroundColor: DARK.bg }}>
+    <box style={{ flexDirection: "row", width: "100%", height: "100%", backgroundColor: DARK.background }}>
       <box style={{ flexGrow: 1, paddingLeft: 1 }}>
         <text fg={DARK.textMuted}>The plan takes the width the panel hands back.</text>
       </box>

package/src/components/SettingsDialog.stories.tsx

@@ -41,7 +41,7 @@ export const NavZone: Story = {
       onRowActivate={() => {}}
     />
   ),
-  expectedColors: [DARK.accent, DARK.backdrop],
+  expectedColors: [DARK.accent],
   size: { width: 100, height: 30 },
 };
 

package/src/components/WalkWizard.stories.tsx

@@ -40,7 +40,7 @@ export const FirstFile: Story = {
     />
   ),
   // the main card wears the accent border; stats carry the +/- colors
-  expectedColors: [DARK.accent, DARK.green, DARK.red, DARK.insFg, DARK.delFg],
+  expectedColors: [DARK.accent, DARK.green, DARK.red, DARK.insertedForeground, DARK.deletedForeground],
 };
 
 export const WithAgentNote: Story = {

package/src/components/WalkWizard.tsx

@@ -118,7 +118,7 @@ export function WalkWizard({
                   <text
                     key={previewIndex}
                     style={{ wrapMode: "none" }}
-                    fg={previewLine.sign === "+" ? tokens.insFg : tokens.delFg}
+                    fg={previewLine.sign === "+" ? tokens.insertedForeground : tokens.deletedForeground}
                   >
                     {previewLine.sign + previewLine.text}
                   </text>

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

@@ -11,7 +11,7 @@ export const Open: Story = {
       <text>dialog body content</text>
     </Dialog>
   ),
-  expectedColors: [DARK.accent, DARK.backdrop],
+  expectedColors: [DARK.accent],
   size: { width: 60, height: 16 },
 };
 

package/src/components/primitives/Dialog.tsx

@@ -1,6 +1,7 @@
 /**
- * Centered modal over a dimmed backdrop. The dialog fills the terminal with
- * the backdrop token and centers a bordered panel; content composes inside.
+ * Centered modal: a full-screen layer (backdrop token, transparent by
+ * default) centers a bordered, unpainted panel over the session - the frame
+ * delineates the dialog, the content behind stays visible.
  * `isOpen` keeps the mount decision with the caller-visible prop vocabulary.
  */
 
@@ -41,8 +42,6 @@ export function Dialog({ isOpen, title, width, height, theme, children }: Dialog
           border: true,
           borderStyle: FRAME_BORDER_STYLE,
           borderColor: tokens.accent,
-          /* Floating surface: painted so dialog text never mixes with the page behind. */
-          backgroundColor: tokens.elevated,
           flexDirection: "column",
         }}
         title={title}

package/src/components/stories-app.tsx

@@ -38,7 +38,7 @@ function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () =>
 
   return (
     <ThemeProvider theme={DARK}>
-      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: DARK.bg }}>
+      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: DARK.background }}>
         <box style={{ height: 1, backgroundColor: DARK.panel, paddingLeft: 1 }}>
           <text fg={DARK.text}>
             <span fg={DARK.accent}>cueloop stories</span>

package/src/components/stories.test.tsx

@@ -9,6 +9,7 @@ import { describe, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import { RGBA } from "@opentui/core";
 import { componentFilesMissingStories, loadStories } from "./story";
+import { allowEventLoopUpdates } from "../test-support";
 
 const stories = await loadStories();
 
@@ -35,6 +36,7 @@ describe("stories catalog", () => {
 
       // Act
       const setup = await testRender(story.render(), size);
+      allowEventLoopUpdates();
       await setup.waitForVisualIdle();
       const frame = setup.captureCharFrame();
 

package/src/test-support.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { loadConfig } from "./config";
+import { isolateUserConfig } from "./test-support";
+
+describe("isolateUserConfig", () => {
+  test("loadConfig sees defaults while isolated and the env is restored after", () => {
+    // Arrange
+    const home = mkdtempSync(join(tmpdir(), "cueloop-isolate-"));
+    const userConfigPath = join(home, "config.toml");
+    writeFileSync(userConfigPath, '[ui]\nreview_state = "compact"\n');
+    const priorEnv = process.env.CUELOOP_CONFIG;
+    process.env.CUELOOP_CONFIG = userConfigPath;
+
+    try {
+      // Act
+      const restoreUserConfig = isolateUserConfig(home);
+      const isolated = loadConfig({ repoRoot: home });
+      restoreUserConfig();
+      const restored = loadConfig({ repoRoot: home });
+
+      // Assert
+      expect(isolated.ui.reviewState).toBe("expanded");
+      expect(process.env.CUELOOP_CONFIG).toBe(userConfigPath);
+      expect(restored.ui.reviewState).toBe("compact");
+    } finally {
+      if (priorEnv === undefined) delete process.env.CUELOOP_CONFIG;
+      else process.env.CUELOOP_CONFIG = priorEnv;
+      rmSync(home, { recursive: true, force: true });
+    }
+  });
+
+  test("restore removes the variable when nothing was set before", () => {
+    // Arrange
+    const home = mkdtempSync(join(tmpdir(), "cueloop-isolate-"));
+    const priorEnv = process.env.CUELOOP_CONFIG;
+    delete process.env.CUELOOP_CONFIG;
+
+    try {
+      // Act
+      const restoreUserConfig = isolateUserConfig(home);
+      const pointedAt = process.env.CUELOOP_CONFIG ?? "";
+      restoreUserConfig();
+
+      // Assert
+      expect(pointedAt).toBe(join(home, "no-config.toml"));
+      expect(process.env.CUELOOP_CONFIG).toBeUndefined();
+    } finally {
+      if (priorEnv !== undefined) process.env.CUELOOP_CONFIG = priorEnv;
+      rmSync(home, { recursive: true, force: true });
+    }
+  });
+});

package/src/test-support.ts

@@ -6,16 +6,40 @@
  * generous pass budgets.
  */
 
+import { join } from "node:path";
 import type { TestRendererSetup } from "@opentui/core/testing";
 
 /** Pass budget for waits that include daemon or subprocess round-trips. */
 export const WAIT_PASSES = { maxPasses: 400 };
 
+/**
+ * Isolate the user config: point CUELOOP_CONFIG into the test home so
+ * loadConfig never reads the developer's real ~/.config/cueloop (a persisted
+ * review_state would change what char frames render locally while CI stays
+ * clean). The default file name does not exist, so loadConfig returns
+ * defaults; pass a file name for suites that write and assert a config of
+ * their own. Call in beforeEach; invoke the returned restore in afterEach.
+ */
+export function isolateUserConfig(home: string, fileName = "no-config.toml"): () => void {
+  const priorUserConfig = process.env.CUELOOP_CONFIG;
+  process.env.CUELOOP_CONFIG = join(home, fileName);
+  return () => {
+    if (priorUserConfig === undefined) delete process.env.CUELOOP_CONFIG;
+    else process.env.CUELOOP_CONFIG = priorUserConfig;
+  };
+}
+
+/** The harness drives the real event loop by design; keep React's act warning off. */
+export function allowEventLoopUpdates(): void {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = false;
+}
+
 /**
  * One macrotask yield lets the input parser and the React scheduler run,
  * then a render pass commits the result before the visual-idle wait.
  */
 export async function settle(setup: TestRendererSetup): Promise<void> {
+  allowEventLoopUpdates();
   await new Promise((resolve) => setTimeout(resolve, 0));
   await setup.renderOnce();
   await setup.waitForVisualIdle();
@@ -50,6 +74,7 @@ async function waitForFramePredicate(
   setup: TestRendererSetup,
   predicate: (frame: string) => boolean,
 ): Promise<string> {
+  allowEventLoopUpdates();
   const deadline = Date.now() + WAIT_DEADLINE_MS;
   for (;;) {
     try {
@@ -64,6 +89,7 @@ async function waitForFramePredicate(
 
 /** Wait until a state predicate holds (daemon round-trips included). */
 export async function waitForState(setup: TestRendererSetup, predicate: () => boolean): Promise<void> {
+  allowEventLoopUpdates();
   const deadline = Date.now() + WAIT_DEADLINE_MS;
   for (;;) {
     try {

package/src/theme.ts

@@ -6,7 +6,7 @@
  */
 
 export interface Theme {
-  bg: string;
+  background: string;
   panel: string;
   elevated: string;
   border: string;
@@ -18,12 +18,12 @@ export interface Theme {
   green: string;
   red: string;
   blue: string;
-  cursorBg: string;
-  markCommentBg: string;
-  markSuggestionBg: string;
-  insFg: string;
-  delFg: string;
-  /** Dimmed layer painted behind centered dialogs. */
+  cursorBackground: string;
+  markCommentBackground: string;
+  markSuggestionBackground: string;
+  insertedForeground: string;
+  deletedForeground: string;
+  /** Layer behind centered dialogs; transparent keeps the session visible. */
   backdrop: string;
 }
 
@@ -41,14 +41,14 @@ export function dimmedTheme(theme: Theme): Theme {
     green: theme.textDim,
     red: theme.textDim,
     blue: theme.textDim,
-    insFg: theme.textDim,
-    delFg: theme.textDim,
+    insertedForeground: theme.textDim,
+    deletedForeground: theme.textDim,
   };
 }
 
 export const DARK: Theme = {
   /* Unpainted so the terminal background shows through; override in [theme]. */
-  bg: "transparent",
+  background: "transparent",
   panel: "transparent",
   elevated: "#23232f",
   border: "#3a3a4a",
@@ -60,10 +60,10 @@ export const DARK: Theme = {
   green: "#62d96b",
   red: "#ff6b6b",
   blue: "#84a6e8",
-  cursorBg: "#33262a",
-  markCommentBg: "#3d2a2e",
-  markSuggestionBg: "#20351f",
-  insFg: "#62d96b",
-  delFg: "#ff6b6b",
-  backdrop: "#14141b",
+  cursorBackground: "#33262a",
+  markCommentBackground: "#3d2a2e",
+  markSuggestionBackground: "#20351f",
+  insertedForeground: "#62d96b",
+  deletedForeground: "#ff6b6b",
+  backdrop: "transparent",
 }