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

package/package.json

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

package/src/components/Breadcrumb.stories.tsx

@@ -15,5 +15,5 @@ export const SessionHeader: Story = {
       ]}
     />
   ),
-  expectedColors: [DARK.accent, DARK.green, DARK.panel],
+  expectedColors: [DARK.accent, DARK.green],
 };

package/src/components/ConfirmDialog.stories.tsx

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

package/src/components/PromptDialog.stories.tsx

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

package/src/components/ReviewPanel.stories.tsx

@@ -42,7 +42,7 @@ export const ExpandedNarrow: Story = {
       <ReviewPanel mode="expanded" width={REVIEW_MIN_WIDTH} height={24} dragging={false} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
-  expectedColors: [DARK.panel, DARK.border],
+  expectedColors: [DARK.border],
   size: { width: 80, height: 24 },
 };
 
@@ -52,7 +52,7 @@ export const ExpandedWide: Story = {
       <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} height={24} dragging={false} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
-  expectedColors: [DARK.panel, DARK.green],
+  expectedColors: [DARK.green],
   size: { width: 90, height: 24 },
 };
 

package/src/components/ReviewRail.stories.tsx

@@ -34,7 +34,7 @@ export const AnnotationStack: Story = {
       />
     </RailFrame>
   ),
-  expectedColors: [DARK.panel, DARK.green],
+  expectedColors: [DARK.green],
   size: { width: 40, height: 24 },
 };
 

package/src/components/WalkWizard.tsx

@@ -76,7 +76,7 @@ export function WalkWizard({
             title=" walk complete "
             contentRows={3}
             borderColor={tokens.green}
-            backgroundColor={tokens.panel}
+            backgroundColor={tokens.elevated}
             theme={theme}
           >
             <text fg={tokens.text}>
@@ -100,7 +100,7 @@ export function WalkWizard({
               title={` file ${index + 1} of ${files.length} · ${viewed} viewed `}
               contentRows={3 + Math.max(1, currentFile.preview.length)}
               borderColor={tokens.accent}
-              backgroundColor={tokens.panel}
+              backgroundColor={tokens.elevated}
               theme={theme}
             >
               <text fg={tokens.text}>{currentFile.path}</text>
@@ -131,7 +131,7 @@ export function WalkWizard({
                   title=" agent note "
                   contentRows={noteRows(note, width - 4)}
                   borderColor={tokens.border}
-                  backgroundColor={tokens.panel}
+                  backgroundColor={tokens.elevated}
                   theme={theme}
                 >
                   <text fg={tokens.textMuted}>{note}</text>

package/src/components/primitives/Dialog.tsx

@@ -41,7 +41,8 @@ export function Dialog({ isOpen, title, width, height, theme, children }: Dialog
           border: true,
           borderStyle: FRAME_BORDER_STYLE,
           borderColor: tokens.accent,
-          backgroundColor: tokens.panel,
+          /* Floating surface: painted so dialog text never mixes with the page behind. */
+          backgroundColor: tokens.elevated,
           flexDirection: "column",
         }}
         title={title}

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

@@ -7,5 +7,5 @@ export const meta: StoryMeta = { title: "primitives/StatusBar" };
 
 export const HintLine: Story = {
   render: () => <StatusBar>j/k move · v span · c comment · q quit</StatusBar>,
-  expectedColors: [DARK.panel, DARK.textDim],
+  expectedColors: [DARK.textDim],
 };

package/src/components/stories.test.tsx

@@ -12,7 +12,9 @@ import { componentFilesMissingStories, loadStories } from "./story";
 
 const stories = await loadStories();
 
-function hexOf(color: RGBA): string {
+/** Hex of a painted color; undefined for unpainted (transparent) spans. */
+function hexOf(color: RGBA | null | undefined): string | undefined {
+  if (!color) return undefined;
   const [red, green, blue] = color.toInts();
   return "#" + [red, green, blue].map((part) => part!.toString(16).padStart(2, "0")).join("");
 }
@@ -42,8 +44,10 @@ describe("stories catalog", () => {
         const seenColors = new Set<string>();
         for (const line of setup.captureSpans().lines) {
           for (const span of line.spans) {
-            seenColors.add(hexOf(span.fg));
-            seenColors.add(hexOf(span.bg));
+            const foregroundHex = hexOf(span.fg);
+            const backgroundHex = hexOf(span.bg);
+            if (foregroundHex) seenColors.add(foregroundHex);
+            if (backgroundHex) seenColors.add(backgroundHex);
           }
         }
         for (const expectedColor of story.expectedColors) {

package/src/theme.ts

@@ -47,8 +47,9 @@ export function dimmedTheme(theme: Theme): Theme {
 }
 
 export const DARK: Theme = {
-  bg: "#1f1f29",
-  panel: "#1a1a23",
+  /* Unpainted so the terminal background shows through; override in [theme]. */
+  bg: "transparent",
+  panel: "transparent",
   elevated: "#23232f",
   border: "#3a3a4a",
   text: "#e4e6ec",