@outputai/cli 0.3.2-next.5e221e8.0 → 0.3.3-next.b23002f.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-next.b23002f.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-next.b23002f.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/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.js

@@ -1,6 +1,7 @@
 import { existsSync, readdirSync } from 'node:fs';
 import { 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) {
@@ -40,7 +41,7 @@ function resolveScenarioFromDirectory(relativeDir, scenarioFileName, basePath) {
     }
     return { found: false, searchedPaths };
 }
-export async function resolveScenarioPath(workflowName, scenarioName, basePath = process.cwd()) {
+export async function resolveScenarioPath(workflowName, scenarioName, basePath = getWorkflowsBasePath()) {
     const scenarioFileName = scenarioName.endsWith('.json') ?
         scenarioName :
         `${scenarioName}.json`;
@@ -65,7 +66,7 @@ export async function resolveScenarioPath(workflowName, scenarioName, basePath =
     // API unavailable or workflow not in catalog — fall back to convention
     return resolveScenarioFromDirectory(workflowName, scenarioFileName, basePath);
 }
-export function listScenariosForWorkflow(workflowName, workflowPath, basePath = process.cwd()) {
+export function listScenariosForWorkflow(workflowName, workflowPath, basePath = getWorkflowsBasePath()) {
     const relativeDir = (workflowPath && extractWorkflowRelativePath(workflowPath)) || workflowName;
     for (const workflowsDir of WORKFLOWS_PATHS) {
         const scenariosDir = resolve(basePath, workflowsDir, relativeDir, SCENARIOS_DIR);

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] })] }));

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

@@ -0,0 +1,16 @@
+/**
+ * Single source of truth for the TUI's purple gradient. Tailwind violet
+ * stops, picked so the OUTPUT logo reads top-bright to bottom-dark and
+ * the chrome rules sit somewhere in the middle.
+ */
+export declare const PURPLE_50 = "#c4b5fd";
+export declare const PURPLE_100 = "#a78bfa";
+export declare const PURPLE_200 = "#8b5cf6";
+export declare const PURPLE_300 = "#7c3aed";
+export declare const PURPLE_400 = "#6d28d9";
+export declare const RULE_PURPLE = "#a78bfa";
+/**
+ * 3-stop gradient applied across the OUTPUT logo's three rows after
+ * 2x2 quadrant compression.
+ */
+export declare const LOGO_GRADIENT: readonly ["#c4b5fd", "#8b5cf6", "#6d28d9"];

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

@@ -0,0 +1,16 @@
+/**
+ * Single source of truth for the TUI's purple gradient. Tailwind violet
+ * stops, picked so the OUTPUT logo reads top-bright to bottom-dark and
+ * the chrome rules sit somewhere in the middle.
+ */
+export const PURPLE_50 = '#c4b5fd';
+export const PURPLE_100 = '#a78bfa';
+export const PURPLE_200 = '#8b5cf6';
+export const PURPLE_300 = '#7c3aed';
+export const PURPLE_400 = '#6d28d9';
+export const RULE_PURPLE = PURPLE_100;
+/**
+ * 3-stop gradient applied across the OUTPUT logo's three rows after
+ * 2x2 quadrant compression.
+ */
+export const LOGO_GRADIENT = [PURPLE_50, PURPLE_200, PURPLE_400];

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SearchBar: React.FC<{
+    active: boolean;
+    onSubmit?: (query: string) => void;
+}>;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useUiState } from '#views/dev/state/ui_state.js';
+export const SearchBar = ({ active, onSubmit }) => {
+    const ui = useUiState();
+    useInput((input, key) => {
+        if (key.escape) {
+            ui.clearSearch();
+            return;
+        }
+        if (key.return) {
+            onSubmit?.(ui.search.query);
+            ui.closeSearch();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            ui.setSearchQuery(ui.search.query.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            ui.setSearchQuery(ui.search.query + input);
+        }
+    }, { isActive: active });
+    useEffect(() => {
+        if (!active) {
+            return;
+        }
+        onSubmit?.(ui.search.query);
+    }, [active, ui.search.query, onSubmit]);
+    if (!active) {
+        return null;
+    }
+    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, children: "/ " }), _jsx(Text, { children: ui.search.query }), _jsx(Text, { inverse: true, children: ' ' })] }));
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * Theme-agnostic 2-cell selection bar for list rows. When selected, renders
+ * inverse-video (SGR 7) — a solid block of the terminal's actual default
+ * foreground colour with the arrow visible inside it. When unselected,
+ * renders two plain spaces. Inverse is theme-agnostic by design: it never
+ * picks a palette slot, just swaps the user's configured fg/bg.
+ *
+ * Each row using this still owns its own 1-cell separator after the
+ * indicator, so the total indicator column is 3 cells wide.
+ */
+export declare const SelectionIndicator: React.FC<{
+    selected: boolean;
+}>;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+/**
+ * Theme-agnostic 2-cell selection bar for list rows. When selected, renders
+ * inverse-video (SGR 7) — a solid block of the terminal's actual default
+ * foreground colour with the arrow visible inside it. When unselected,
+ * renders two plain spaces. Inverse is theme-agnostic by design: it never
+ * picks a palette slot, just swaps the user's configured fg/bg.
+ *
+ * Each row using this still owns its own 1-cell separator after the
+ * indicator, so the total indicator column is 3 cells wide.
+ */
+export const SelectionIndicator = ({ selected }) => (selected ? _jsx(Text, { inverse: true, children: ' ▸' }) : _jsx(Text, { children: '  ' }));

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type Tab } from '#views/dev/state/ui_state.js';
+export declare const TabBar: React.FC<{
+    active: Tab;
+}>;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { TAB_LABELS, TAB_ORDER } from '#views/dev/state/ui_state.js';
+export const TabBar = ({ active }) => (_jsx(Box, { flexDirection: "row", marginTop: 1, children: TAB_ORDER.map(tab => (_jsx(Box, { marginRight: 3, children: tab === active ? (_jsx(Text, { inverse: true, bold: true, children: ` ${TAB_LABELS[tab]} ` })) : (_jsx(Text, { dimColor: true, children: TAB_LABELS[tab] })) }, tab))) }));

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Toasts: React.FC;

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

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { useUiState } from '#views/dev/state/ui_state.js';
+const TOAST_TTL_MS = 4000;
+const toneColor = (tone) => {
+    if (tone === 'success') {
+        return 'green';
+    }
+    if (tone === 'error') {
+        return 'red';
+    }
+    return 'cyan';
+};
+const tonePrefix = (tone) => {
+    if (tone === 'success') {
+        return '✓';
+    }
+    if (tone === 'error') {
+        return '✗';
+    }
+    return 'ℹ';
+};
+export const Toasts = () => {
+    const ui = useUiState();
+    const dismissToast = ui.dismissToast;
+    const toasts = ui.toasts;
+    useEffect(() => {
+        const timers = toasts.map(toast => setTimeout(() => dismissToast(toast.id), TOAST_TTL_MS));
+        return () => {
+            for (const t of timers) {
+                clearTimeout(t);
+            }
+        };
+    }, [toasts, dismissToast]);
+    if (toasts.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: toasts.map(toast => (_jsxs(Box, { children: [_jsxs(Text, { color: toneColor(toast.tone), bold: true, children: [tonePrefix(toast.tone), " "] }), _jsx(Text, { children: toast.message })] }, toast.id))) }));
+};

package/dist/views/dev/components/master_detail_panel.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type CommandHint } from '#views/dev/chrome/footer.js';
+/**
+ * Generic two-pane shell shared by every panel that has a windowed list
+ * on top, a horizontal rule, a detail pane below, and a footer at the
+ * bottom. Panels keep their own selection state and detail rendering;
+ * the shell owns the layout invariant (windowing, overflow indicators,
+ * separator, footer) so it lives in one place.
+ */
+export interface MasterDetailPanelProps<T> {
+    items: T[];
+    selectedIndex: number;
+    visibleRows: number;
+    renderHeader: () => React.ReactNode;
+    renderRow: (item: T, selected: boolean, absoluteIndex: number) => React.ReactNode;
+    rowKey: (item: T, absoluteIndex: number) => string;
+    detail: React.ReactNode;
+    hints: CommandHint[];
+    itemLabel: string;
+}
+export declare const MasterDetailPanel: <T extends object>(props: MasterDetailPanelProps<T>) => React.ReactElement;