@outputai/cli 0.3.2-next.5e221e8.0 → 0.3.3-dev.2650161.0

package/dist/assets/docker/docker-compose-dev.yml

@@ -77,7 +77,7 @@ services:
         condition: service_healthy
       worker:
         condition: service_healthy
-    image: outputai/api:${OUTPUT_API_VERSION:-0.3.2-next.5e221e8.0}
+    image: outputai/api:${OUTPUT_API_VERSION:-0.3.3-dev.2650161.0}
     init: true
     networks:
       - main

package/dist/commands/dev/index.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { validateDockerEnvironment, startDockerCompose, startDockerComposeDetached, stopDockerCompose, DockerComposeConfigNotFoundError, getDefaultDockerComposePath } from '#services/docker.js';
 import { getErrorMessage } from '#utils/error_utils.js';
 import { ensureClaudePlugin } from '#services/coding_agents.js';
-import { DevApp } from '#views/dev.js';
+import { DevApp } from '#views/dev/dev_app.js';
 import { config } from '#config.js';
 export default class Dev extends Command {
     static description = [
@@ -57,11 +57,6 @@ export default class Dev extends Command {
         catch {
             throw new DockerComposeConfigNotFoundError(dockerComposePath);
         }
-        this.log('\n🚀 Starting Output development services...\n');
-        this.log(`Docker project name: ${config.dockerServiceName}\n`);
-        if (flags['compose-file']) {
-            this.log(`Using custom docker-compose file: ${flags['compose-file']}\n`);
-        }
         const pullPolicy = flags['image-pull-policy'];
         if (flags.detached) {
             this.log('🐳 Starting services in detached mode...\n');
@@ -69,7 +64,6 @@ export default class Dev extends Command {
             this.log('✅ Services started. Run `output dev` without --detached to monitor status.\n');
             return;
         }
-        this.log('File watching enabled - worker will restart automatically on changes\n');
         const cleanup = async () => {
             this.log('\n');
             if (this.dockerProcess) {
@@ -77,22 +71,63 @@ export default class Dev extends Command {
             }
             await stopDockerCompose(dockerComposePath);
         };
+        // INK paints onto the alternate screen buffer so log-update has a
+        // fixed-height canvas and doesn't scroll old frames into the user's
+        // scrollback when the rendered tree exceeds the visible terminal rows.
+        const enterAltScreen = () => {
+            process.stdout.write('\x1b[?1049h\x1b[2J\x1b[H');
+        };
+        const exitAltScreen = () => {
+            process.stdout.write('\x1b[?1049l');
+        };
+        // Idempotent so repeated SIGINTs / process.exit don't re-emit the leave
+        // sequence (which produces visible garbage in some terminals).
+        const exitAltScreenOnce = (() => {
+            const state = { fired: false };
+            return () => {
+                if (state.fired) {
+                    return;
+                }
+                state.fired = true;
+                exitAltScreen();
+            };
+        })();
+        // Register cleanup before anything that can throw or get signaled. The
+        // `instance` ref is filled in once `render()` returns; until then,
+        // signal handlers just stop docker and exit.
+        const instanceRef = { current: null };
+        process.on('exit', exitAltScreenOnce);
+        // `process.on` doesn't await the handler, so the cleanup promise would
+        // float and any rejection would surface as an unhandled rejection.
+        // Wrap the async work in a sync registration that explicitly logs
+        // failures and always unmounts Ink afterwards. Exit the alt-screen
+        // first inside the catch — Ink still owns the alt-buffer until
+        // `unmount()` runs, so a bare `console.error` would paint into a
+        // buffer the user never sees.
+        const handleSignal = () => {
+            cleanup()
+                .catch(err => {
+                exitAltScreenOnce();
+                console.error('Cleanup failed:', getErrorMessage(err));
+            })
+                .finally(() => instanceRef.current?.unmount());
+        };
+        process.on('SIGINT', handleSignal);
+        process.on('SIGTERM', handleSignal);
         try {
             const { process: dockerProc } = await startDockerCompose(dockerComposePath, pullPolicy);
             this.dockerProcess = dockerProc;
+            enterAltScreen();
             const instance = render(React.createElement(DevApp, { dockerComposePath, onCleanup: cleanup }), { exitOnCtrlC: false });
+            instanceRef.current = instance;
             dockerProc.on('error', error => {
                 instance.unmount(new Error(`Docker process error: ${getErrorMessage(error)}`));
             });
-            const handleSignal = async () => {
-                await cleanup();
-                instance.unmount();
-            };
-            process.on('SIGINT', handleSignal);
-            process.on('SIGTERM', handleSignal);
             await instance.waitUntilExit();
+            exitAltScreenOnce();
         }
         catch (error) {
+            exitAltScreenOnce();
             this.error(getErrorMessage(error), { exit: 1 });
         }
     }

package/dist/commands/dev/index.spec.js

@@ -41,7 +41,7 @@ vi.mock('ink', () => ({
         unmount: vi.fn()
     })
 }));
-vi.mock('#views/dev.js', () => ({
+vi.mock('#views/dev/dev_app.js', () => ({
     DevApp: () => null
 }));
 const createMockDockerProcess = () => ({
@@ -184,7 +184,6 @@ describe('dev command', () => {
             await new Promise(resolve => setImmediate(resolve));
             expect(dockerService.startDockerCompose).toHaveBeenCalledWith('/path/to/docker-compose-dev.yml', 'always' // default pull policy
             );
-            expect(cmd.log).toHaveBeenCalledWith(expect.stringContaining('File watching enabled'));
             // Cancel the promise (it will be rejected but we don't care)
             runPromise.catch(() => { });
         });

package/dist/components/status_icon.js

@@ -8,7 +8,7 @@ const STATUS_MAP = {
     none: { icon: '●', color: 'blue' },
     exited: { icon: '✗', color: 'red' },
     // Workflow run status
-    running: { icon: '●', color: 'blue' },
+    running: { icon: '●', color: 'green' },
     completed: { icon: '●', color: 'green' },
     failed: { icon: '✗', color: 'red' },
     canceled: { icon: '○', color: 'gray' },

package/dist/generated/framework_version.json

@@ -1,3 +1,3 @@
 {
-    "framework": "0.3.2-next.5e221e8.0"
+    "framework": "0.3.3-dev.2650161.0"
 }

package/dist/services/docker.js

@@ -133,7 +133,6 @@ export async function startDockerCompose(dockerComposePath, pullPolicy) {
     if (pullPolicy) {
         args.push('--pull', pullPolicy);
     }
-    ux.stdout('🐳 Starting Docker services...\n');
     const dockerProcess = spawn('docker', args, {
         cwd: process.cwd(),
         stdio: ['ignore', 'pipe', 'pipe']

package/dist/templates/project/src/workflows/blog_evaluator/prompts/signal_noise@v1.prompt.template

@@ -1,6 +1,7 @@
 ---
 provider: anthropic
-model: claude-haiku-4-5
+# current as of 2026-05-04 — run output-dev-model-selection for the latest
+model: claude-sonnet-4-6
 temperature: 0.3
 maxTokens: 4096
 ---

package/dist/templates/workflow/README.md.template

@@ -185,7 +185,8 @@ Example prompt file:
 ```
 ---
 provider: anthropic
-model: claude-haiku-4-5
+# current as of 2026-05-04 — run output-dev-model-selection for the latest
+model: claude-sonnet-4-6
 temperature: 0.3
 maxTokens: 1024
 ---

package/dist/templates/workflow/prompts/example@v1.prompt.template

@@ -1,6 +1,7 @@
 ---
 provider: anthropic
-model: claude-haiku-4-5
+# current as of 2026-05-04 — run output-dev-model-selection for the latest
+model: claude-sonnet-4-6
 temperature: 0.3
 maxTokens: 4096
 ---

package/dist/utils/paths.d.ts

@@ -15,6 +15,17 @@ export declare const DEFAULT_OUTPUT_DIRS: {
  * Resolve the output directory path
  */
 export declare function resolveOutputDir(outputDir: string): string;
+/**
+ * Resolve the project root that holds `src/workflows` / `workflows`.
+ *
+ * When the CLI is invoked from inside the workflow project (the common
+ * case for `output workflow run` and friends) `process.cwd()` already
+ * points at the right place. When it's invoked from the repo root with
+ * `OUTPUT_WORKFLOWS_DIR=test_workflows` (how `npm run dev` drives
+ * `output dev` in this repo), we need to descend into that subdirectory
+ * before searching for scenarios.
+ */
+export declare function getWorkflowsBasePath(): string;
 /**
  * Create target directory path for a workflow
  */

package/dist/utils/paths.js

@@ -21,6 +21,20 @@ export const DEFAULT_OUTPUT_DIRS = {
 export function resolveOutputDir(outputDir) {
     return path.resolve(process.cwd(), outputDir);
 }
+/**
+ * Resolve the project root that holds `src/workflows` / `workflows`.
+ *
+ * When the CLI is invoked from inside the workflow project (the common
+ * case for `output workflow run` and friends) `process.cwd()` already
+ * points at the right place. When it's invoked from the repo root with
+ * `OUTPUT_WORKFLOWS_DIR=test_workflows` (how `npm run dev` drives
+ * `output dev` in this repo), we need to descend into that subdirectory
+ * before searching for scenarios.
+ */
+export function getWorkflowsBasePath() {
+    const subdir = process.env.OUTPUT_WORKFLOWS_DIR;
+    return subdir ? path.resolve(process.cwd(), subdir) : process.cwd();
+}
 /**
  * Create target directory path for a workflow
  */

package/dist/utils/scenario_resolver.d.ts

@@ -4,6 +4,7 @@ export interface ScenarioResolutionResult {
     searchedPaths: string[];
 }
 export declare function extractWorkflowRelativePath(path: string): string | null;
-export declare function resolveScenarioPath(workflowName: string, scenarioName: string, basePath?: string): Promise<ScenarioResolutionResult>;
+export declare function findWorkflowDirectoryFromPath(workflowPath: string | undefined, basePath?: string): string | null;
+export declare function resolveScenarioPath(workflowName: string, scenarioName: string, basePath?: string, workflowPath?: string): Promise<ScenarioResolutionResult>;
 export declare function listScenariosForWorkflow(workflowName: string, workflowPath?: string, basePath?: string): string[];
 export declare function getScenarioNotFoundMessage(workflowName: string, scenarioName: string, searchedPaths: string[]): string;

package/dist/utils/scenario_resolver.js

@@ -1,13 +1,34 @@
 import { existsSync, readdirSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { dirname, resolve } from 'node:path';
 import { getWorkflowCatalog } from '#api/generated/api.js';
+import { getWorkflowsBasePath } from '#utils/paths.js';
 const SCENARIOS_DIR = 'scenarios';
 const WORKFLOWS_PATHS = ['src/workflows', 'workflows'];
 export function extractWorkflowRelativePath(path) {
-    const match = path.match(/workflows\/(.+)\/workflow\.[jt]s$/);
+    const match = path.match(/(?:^|\/)workflows\/(.+)\/workflow\.[jt]s$/);
     return match ? match[1] : null;
 }
-async function fetchWorkflowDirectory(workflowName) {
+function unique(values) {
+    return [...new Set(values)];
+}
+function workflowPathSuffixes(workflowPath) {
+    const parts = dirname(workflowPath).split(/[/\\]+/).filter(Boolean);
+    return parts.map((_, index) => parts.slice(index));
+}
+function candidateWorkflowDirsFromPath(workflowPath, basePath) {
+    return unique(workflowPathSuffixes(workflowPath).flatMap(suffix => WORKFLOWS_PATHS.map(workflowsDir => resolve(basePath, workflowsDir, ...suffix))));
+}
+function candidateScenarioDirsFromPath(workflowPath, basePath) {
+    return candidateWorkflowDirsFromPath(workflowPath, basePath)
+        .map(workflowDir => resolve(workflowDir, SCENARIOS_DIR));
+}
+export function findWorkflowDirectoryFromPath(workflowPath, basePath = getWorkflowsBasePath()) {
+    if (!workflowPath) {
+        return null;
+    }
+    return candidateWorkflowDirsFromPath(workflowPath, basePath).find(existsSync) ?? null;
+}
+async function fetchWorkflowPath(workflowName) {
     try {
         const response = await getWorkflowCatalog();
         const data = response?.data;
@@ -19,11 +40,7 @@ async function fetchWorkflowDirectory(workflowName) {
         if (!workflow) {
             return null;
         }
-        const workflowPath = workflow.path;
-        if (!workflowPath) {
-            return null;
-        }
-        return extractWorkflowRelativePath(workflowPath);
+        return workflow.path ?? null;
     }
     catch {
         return null;
@@ -40,33 +57,48 @@ function resolveScenarioFromDirectory(relativeDir, scenarioFileName, basePath) {
     }
     return { found: false, searchedPaths };
 }
-export async function resolveScenarioPath(workflowName, scenarioName, basePath = process.cwd()) {
+function resolveScenarioFromScenarioDirs(scenariosDirs, scenarioFileName) {
+    const searchedPaths = scenariosDirs.map(dir => resolve(dir, scenarioFileName));
+    const path = searchedPaths.find(existsSync);
+    return path ?
+        { found: true, path, searchedPaths } :
+        { found: false, searchedPaths };
+}
+export async function resolveScenarioPath(workflowName, scenarioName, basePath = getWorkflowsBasePath(), workflowPath) {
     const scenarioFileName = scenarioName.endsWith('.json') ?
         scenarioName :
         `${scenarioName}.json`;
-    const catalogDir = await fetchWorkflowDirectory(workflowName);
-    if (catalogDir) {
-        const result = resolveScenarioFromDirectory(catalogDir, scenarioFileName, basePath);
+    if (workflowPath) {
+        const pathResult = resolveScenarioFromScenarioDirs(candidateScenarioDirsFromPath(workflowPath, basePath), scenarioFileName);
+        if (pathResult.found) {
+            return pathResult;
+        }
+    }
+    const catalogPath = workflowPath ? null : await fetchWorkflowPath(workflowName);
+    if (catalogPath) {
+        const result = resolveScenarioFromScenarioDirs(candidateScenarioDirsFromPath(catalogPath, basePath), scenarioFileName);
         if (result.found) {
             return result;
         }
-        // Catalog resolved but scenario not found at that path — still try convention fallback
-        // in case the catalog path differs from local source layout
-        if (catalogDir !== workflowName) {
-            const fallback = resolveScenarioFromDirectory(workflowName, scenarioFileName, basePath);
-            return {
-                found: fallback.found,
-                path: fallback.path,
-                searchedPaths: [...result.searchedPaths, ...fallback.searchedPaths]
-            };
-        }
-        return result;
+        const fallback = resolveScenarioFromDirectory(workflowName, scenarioFileName, basePath);
+        return {
+            found: fallback.found,
+            path: fallback.path,
+            searchedPaths: [...result.searchedPaths, ...fallback.searchedPaths]
+        };
     }
     // API unavailable or workflow not in catalog — fall back to convention
     return resolveScenarioFromDirectory(workflowName, scenarioFileName, basePath);
 }
-export function listScenariosForWorkflow(workflowName, workflowPath, basePath = process.cwd()) {
-    const relativeDir = (workflowPath && extractWorkflowRelativePath(workflowPath)) || workflowName;
+export function listScenariosForWorkflow(workflowName, workflowPath, basePath = getWorkflowsBasePath()) {
+    const scenariosDirs = workflowPath ? candidateScenarioDirsFromPath(workflowPath, basePath) : [];
+    const scenariosDir = scenariosDirs.find(existsSync);
+    if (scenariosDir) {
+        return readdirSync(scenariosDir)
+            .filter(f => f.endsWith('.json'))
+            .map(f => f.replace(/\.json$/, ''));
+    }
+    const relativeDir = workflowName;
     for (const workflowsDir of WORKFLOWS_PATHS) {
         const scenariosDir = resolve(basePath, workflowsDir, relativeDir, SCENARIOS_DIR);
         if (existsSync(scenariosDir)) {

package/dist/utils/scenario_resolver.spec.js

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { resolveScenarioPath, getScenarioNotFoundMessage, extractWorkflowRelativePath, listScenariosForWorkflow } from './scenario_resolver.js';
+import { resolveScenarioPath, getScenarioNotFoundMessage, extractWorkflowRelativePath, findWorkflowDirectoryFromPath, listScenariosForWorkflow } from './scenario_resolver.js';
 import * as fs from 'node:fs';
 import * as api from '#api/generated/api.js';
 vi.mock('node:fs', () => ({
@@ -32,6 +32,10 @@ describe('extractWorkflowRelativePath', () => {
         expect(extractWorkflowRelativePath('/src/workflows/my_flow/workflow.ts'))
             .toBe('my_flow');
     });
+    it('should not match workflows inside a parent directory name', () => {
+        expect(extractWorkflowRelativePath('/app/test_workflows/dist/workflows/simple_sleep/workflow.js'))
+            .toBe('simple_sleep');
+    });
     it('should return null for non-matching paths', () => {
         expect(extractWorkflowRelativePath('/app/dist/other/workflow.js')).toBeNull();
         expect(extractWorkflowRelativePath('/app/dist/workflows/')).toBeNull();
@@ -100,6 +104,15 @@ describe('resolveScenarioPath', () => {
             expect(result.found).toBe(true);
             expect(result.path).toContain('src/workflows/my_workflow/scenarios/test_scenario.json');
         });
+        it('should resolve using a provided workflow path without requiring a workflows segment', async () => {
+            mockCatalogFailure();
+            vi.mocked(fs.existsSync).mockImplementation(path => {
+                return String(path) === '/project/src/workflows/writing/editor/scenarios/basic.json';
+            });
+            const result = await resolveScenarioPath('writing_editor', 'basic', '/project', '/app/build-output/writing/editor/workflow.js');
+            expect(result.found).toBe(true);
+            expect(result.path).toBe('/project/src/workflows/writing/editor/scenarios/basic.json');
+        });
     });
     describe('when workflow is not in catalog', () => {
         it('should fall back to convention-based lookup', async () => {
@@ -158,6 +171,12 @@ describe('listScenariosForWorkflow', () => {
         const result = listScenariosForWorkflow('my_workflow', undefined, '/project');
         expect(result).toEqual(['basic', 'advanced']);
     });
+    it('should list scenarios from a workflow path without requiring a workflows segment', () => {
+        vi.mocked(fs.existsSync).mockImplementation(path => String(path) === '/project/src/workflows/writing/editor/scenarios');
+        vi.mocked(fs.readdirSync).mockReturnValue(['basic.json', 'README.md']);
+        const result = listScenariosForWorkflow('writing_editor', '/app/build-output/writing/editor/workflow.js', '/project');
+        expect(result).toEqual(['basic']);
+    });
     it('should use workflowPath from catalog to derive directory', () => {
         vi.mocked(fs.existsSync).mockImplementation(path => String(path).includes('src/workflows/viz_examples/01_simple_linear/scenarios'));
         vi.mocked(fs.readdirSync).mockReturnValue(['test.json']);
@@ -197,6 +216,16 @@ describe('listScenariosForWorkflow', () => {
         expect(result).toEqual([]);
     });
 });
+describe('findWorkflowDirectoryFromPath', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+    it('should find the local workflow directory from a loaded workflow path suffix', () => {
+        vi.mocked(fs.existsSync).mockImplementation(path => String(path) === '/project/src/workflows/writing/editor');
+        const result = findWorkflowDirectoryFromPath('/app/build-output/writing/editor/workflow.js', '/project');
+        expect(result).toBe('/project/src/workflows/writing/editor');
+    });
+});
 describe('getScenarioNotFoundMessage', () => {
     it('should return a helpful error message', () => {
         const searchedPaths = [

package/dist/views/dev/chrome/divider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const HorizontalRule: React.FC<{
+    color?: string;
+    widthOffset?: number;
+}>;
+export declare const VerticalRule: React.FC<{
+    color?: string;
+}>;

package/dist/views/dev/chrome/divider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useStdout } from 'ink';
+import { RULE_PURPLE } from '#views/dev/chrome/palette.js';
+// `RULE_PURPLE` is part of the OUTPUT brand chrome — kept as the default
+// for horizontal rules. Vertical rules pass through whatever the caller
+// supplies; default is undefined, which Ink renders in the terminal's
+// default foreground colour (theme-agnostic).
+const DEFAULT_RULE_COLOR = RULE_PURPLE;
+// dev_app.tsx Shell uses paddingX={2}, so 4 cols are eaten by horizontal padding.
+const SHELL_HORIZONTAL_PADDING = 4;
+export const HorizontalRule = ({ color = DEFAULT_RULE_COLOR, widthOffset = SHELL_HORIZONTAL_PADDING }) => {
+    const { stdout } = useStdout();
+    const cols = stdout?.columns ?? 80;
+    return _jsx(Text, { color: color, children: '─'.repeat(Math.max(1, cols - widthOffset)) });
+};
+export const VerticalRule = ({ color }) => (_jsx(Box, { borderStyle: "single", borderColor: color, borderTop: false, borderBottom: false, borderRight: false, flexDirection: "column" }));

package/dist/views/dev/chrome/footer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface CommandHint {
+    key: string;
+    label: string;
+}
+export declare const Footer: React.FC<{
+    hints: CommandHint[];
+    itemCount?: number;
+    itemLabel?: string;
+}>;
+export declare const GLOBAL_HINTS: CommandHint[];

package/dist/views/dev/chrome/footer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+export const Footer = ({ hints, itemCount, itemLabel = 'items' }) => (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", marginTop: 1, children: [_jsx(Box, { flexDirection: "row", children: hints.map((hint, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { bold: true, children: hint.key }), _jsx(Text, { dimColor: true, children: ` ${hint.label}` })] }, hint.key))) }), typeof itemCount === 'number' && (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: [itemCount, " ", itemLabel] }) }))] }));
+export const GLOBAL_HINTS = [
+    { key: 'tab', label: 'next tab' },
+    { key: '/', label: 'search' },
+    { key: '?', label: 'help' },
+    { key: 'ctrl+c', label: 'quit' }
+];

package/dist/views/dev/chrome/header.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface WorkflowSummary {
+    running: number;
+    completed: number;
+    failed: number;
+    total: number;
+}
+export declare const compressPixels: (rows: string[]) => string[];
+export type ServiceBadge = 'healthy' | 'starting' | 'failed';
+export interface HeaderCounters {
+    running: number;
+    failed: number;
+    totalWorkflows: number;
+    totalRuns: number;
+    serviceBadge: ServiceBadge;
+    failingServices: number;
+}
+export declare const buildSummaryCounters: (summary: WorkflowSummary | null, totalWorkflows: number, serviceBadge?: ServiceBadge, failingServices?: number) => HeaderCounters;
+export declare const Header: React.FC<{
+    counters: HeaderCounters;
+}>;

package/dist/views/dev/chrome/header.js

@@ -0,0 +1,74 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useStdout } from 'ink';
+import Spinner from 'ink-spinner';
+import { LOGO_GRADIENT, PURPLE_100 } from '#views/dev/chrome/palette.js';
+const LOGO_PIXELS = [
+    ' ██████  ██    ██ ████████ ██████  ██    ██ ████████',
+    '██    ██ ██    ██    ██    ██   ██ ██    ██    ██   ',
+    '██    ██ ██    ██    ██    ██████  ██    ██    ██   ',
+    '██    ██ ██    ██    ██    ██      ██    ██    ██   ',
+    ' ██████   ██████     ██    ██       ██████     ██   '
+];
+const QUADRANT_CHARS = [
+    ' ', '▗', '▖', '▄',
+    '▝', '▐', '▞', '▟',
+    '▘', '▚', '▌', '▙',
+    '▀', '▜', '▛', '█'
+];
+export const compressPixels = (rows) => {
+    const maxCol = Math.max(...rows.map(r => r.length));
+    const evenCol = maxCol + (maxCol % 2);
+    const padded = rows.map(r => r.padEnd(evenCol, ' '));
+    const fullPadded = padded.length % 2 === 1 ?
+        [...padded, ' '.repeat(evenCol)] :
+        padded;
+    const rowPairs = fullPadded.reduce((acc, row, i) => {
+        if (i % 2 === 0) {
+            acc.push([row, fullPadded[i + 1]]);
+        }
+        return acc;
+    }, []);
+    const colCount = Math.floor(evenCol / 2);
+    return rowPairs.map(([top, bot]) => {
+        const chars = Array.from({ length: colCount }, (_, k) => {
+            const j = k * 2;
+            const tl = top[j] === '█' ? 8 : 0;
+            const tr = top[j + 1] === '█' ? 4 : 0;
+            const bl = bot[j] === '█' ? 2 : 0;
+            const br = bot[j + 1] === '█' ? 1 : 0;
+            return QUADRANT_CHARS[tl + tr + bl + br];
+        });
+        return chars.join('');
+    });
+};
+const LOGO_COMPRESSED = compressPixels(LOGO_PIXELS);
+const FULL_WIDTH_THRESHOLD = 60;
+const ServicesBadge = ({ badge, failingCount }) => {
+    if (badge === 'failed') {
+        return (_jsxs(Text, { color: "red", bold: true, children: ["\u26A0 ", failingCount, " service", failingCount === 1 ? '' : 's', " down"] }));
+    }
+    if (badge === 'starting') {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " services" })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "green", children: "\u25CF " }), _jsx(Text, { children: "services" })] }));
+};
+const Counters = ({ counters }) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { marginRight: 3, children: _jsx(ServicesBadge, { badge: counters.serviceBadge, failingCount: counters.failingServices }) }), counters.running > 0 && (_jsxs(Box, { marginRight: 3, children: [_jsx(Text, { color: "blue", children: "\u25CF " }), _jsxs(Text, { bold: true, children: [counters.running, " "] }), _jsx(Text, { children: "running" })] })), counters.failed > 0 && (_jsxs(Box, { marginRight: 3, children: [_jsx(Text, { color: "red", children: "\u2717 " }), _jsxs(Text, { color: "red", bold: true, children: [counters.failed, " "] }), _jsx(Text, { color: "red", children: "failed" })] })), _jsx(Box, { children: _jsxs(Text, { dimColor: true, children: [counters.totalWorkflows, " workflows \u00B7 ", counters.totalRuns, " runs"] }) })] }));
+const Logo = ({ cols }) => {
+    if (cols < FULL_WIDTH_THRESHOLD) {
+        return _jsx(Text, { color: PURPLE_100, bold: true, children: "OUTPUT" });
+    }
+    return (_jsx(Box, { flexDirection: "column", children: LOGO_COMPRESSED.map((line, i) => (_jsx(Text, { color: LOGO_GRADIENT[i] ?? PURPLE_100, bold: true, children: line }, i))) }));
+};
+export const buildSummaryCounters = (summary, totalWorkflows, serviceBadge = 'starting', failingServices = 0) => ({
+    running: summary?.running ?? 0,
+    failed: summary?.failed ?? 0,
+    totalWorkflows,
+    totalRuns: summary?.total ?? 0,
+    serviceBadge,
+    failingServices
+});
+export const Header = ({ counters }) => {
+    const { stdout } = useStdout();
+    const cols = stdout?.columns ?? 120;
+    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start", children: [_jsx(Logo, { cols: cols }), _jsx(Box, { flexDirection: "column", paddingTop: 1, children: _jsx(Counters, { counters: counters }) })] }));
+};

package/dist/views/dev/chrome/header.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/views/dev/chrome/header.spec.js

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import { compressPixels } from './header.js';
+describe('compressPixels', () => {
+    it('returns an empty array for empty input', () => {
+        expect(compressPixels([])).toEqual([]);
+    });
+    it('compresses a 2x2 full block to a single full block', () => {
+        expect(compressPixels(['██', '██'])).toEqual(['█']);
+    });
+    it('maps each quadrant character correctly', () => {
+        // Each row pair decodes to: top-left, top-right, bottom-left, bottom-right
+        const cases = [
+            [['  ', '  '], ' '], // 0000
+            [['  ', ' █'], '▗'], // 0001 bottom-right
+            [['  ', '█ '], '▖'], // 0010 bottom-left
+            [['  ', '██'], '▄'], // 0011 bottom half
+            [[' █', '  '], '▝'], // 0100 top-right
+            [[' █', ' █'], '▐'], // 0101 right half
+            [[' █', '█ '], '▞'], // 0110 anti-diagonal
+            [[' █', '██'], '▟'], // 0111
+            [['█ ', '  '], '▘'], // 1000 top-left
+            [['█ ', ' █'], '▚'], // 1001 diagonal
+            [['█ ', '█ '], '▌'], // 1010 left half
+            [['█ ', '██'], '▙'], // 1011
+            [['██', '  '], '▀'], // 1100 top half
+            [['██', ' █'], '▜'], // 1101
+            [['██', '█ '], '▛'], // 1110
+            [['██', '██'], '█'] // 1111 full
+        ];
+        for (const [input, expected] of cases) {
+            expect(compressPixels(input)).toEqual([expected]);
+        }
+    });
+    it('pads odd-length rows with an empty bottom row', () => {
+        // Single row of 4 cols compresses to 1 row of 2 cols
+        expect(compressPixels(['████'])).toEqual(['▀▀']);
+    });
+    it('pads odd-width columns with a trailing space', () => {
+        // 3 cols compresses to 2 cols (even-padded)
+        expect(compressPixels(['███', '███'])).toEqual(['█▌']);
+    });
+    it('compresses 5-row input to 3 rows', () => {
+        const five = ['██', '██', '██', '██', '██'];
+        const result = compressPixels(five);
+        expect(result.length).toBe(3);
+        expect(result[0]).toBe('█');
+        expect(result[1]).toBe('█');
+        expect(result[2]).toBe('▀');
+    });
+});

package/dist/views/dev/chrome/loading_spinner.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * The dim "<spinner> loading…" row used by every panel and modal that
+ * waits on async data. Single source of truth so the visual stays
+ * uniform.
+ */
+export declare const LoadingSpinner: React.FC<{
+    label?: string;
+}>;

package/dist/views/dev/chrome/loading_spinner.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+/**
+ * The dim "<spinner> loading…" row used by every panel and modal that
+ * waits on async data. Single source of truth so the visual stays
+ * uniform.
+ */
+export const LoadingSpinner = ({ label = 'loading…' }) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { dimColor: true, children: [" ", label] })] }));