@outputai/cli 0.4.1-next.6bc541c.0 → 0.4.1-next.94453f5.0

package/dist/api/generated/api.d.ts

@@ -207,6 +207,16 @@ export interface WorkflowStatusResponse {
     /** An epoch timestamp representing when the workflow ended */
     completedAt?: number;
 }
+export type WorkflowResultResponseAttributesItem = {
+    [key: string]: unknown;
+};
+/**
+ * Convenience totals derived from attributes
+ * @nullable
+ */
+export type WorkflowResultResponseAggregations = {
+    [key: string]: unknown;
+} | null;
 /**
  * The workflow execution status
  */
@@ -229,6 +239,16 @@ export interface WorkflowResultResponse {
     /** The result of workflow, null if workflow failed */
     output?: unknown;
     trace?: TraceInfo;
+    /**
+       * Durable workflow attributes collected during execution
+       * @nullable
+       */
+    attributes?: WorkflowResultResponseAttributesItem[] | null;
+    /**
+       * Convenience totals derived from attributes
+       * @nullable
+       */
+    aggregations?: WorkflowResultResponseAggregations;
     /** The workflow execution status */
     status?: WorkflowResultResponseStatus;
     /**
@@ -303,28 +323,6 @@ export type PostWorkflowRunBody = {
     /** (Optional) The max time to wait for the execution, defaults to 30s */
     timeout?: number;
 };
-/**
- * The workflow execution status
- */
-export type PostWorkflowRun200Status = typeof PostWorkflowRun200Status[keyof typeof PostWorkflowRun200Status];
-export declare const PostWorkflowRun200Status: {
-    readonly completed: "completed";
-    readonly failed: "failed";
-};
-export type PostWorkflowRun200 = {
-    /** The workflow execution id */
-    workflowId?: string;
-    /** The output of the workflow, null if workflow failed */
-    output?: unknown;
-    trace?: TraceInfo;
-    /** The workflow execution status */
-    status?: PostWorkflowRun200Status;
-    /**
-       * Error message if workflow failed, null otherwise
-       * @nullable
-       */
-    error?: string | null;
-};
 export type PostWorkflowStartBody = {
     /** The name of the workflow to execute */
     workflowName: string;
@@ -518,7 +516,7 @@ export declare const getHealth: (options?: ApiRequestOptions) => Promise<getHeal
  * @summary Execute a workflow synchronously
  */
 export type postWorkflowRunResponse200 = {
-    data: PostWorkflowRun200;
+    data: WorkflowResultResponse;
     status: 200;
 };
 export type postWorkflowRunResponse400 = {

package/dist/api/generated/api.js

@@ -42,10 +42,6 @@ export const WorkflowResultResponseStatus = {
     timed_out: 'timed_out',
     continued: 'continued',
 };
-export const PostWorkflowRun200Status = {
-    completed: 'completed',
-    failed: 'failed',
-};
 ;
 export const getGetHealthUrl = () => {
     return `/health`;

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.4.1-next.6bc541c.0}
+    image: outputai/api:${OUTPUT_API_VERSION:-0.4.1-next.94453f5.0}
     init: true
     networks:
       - main
@@ -88,9 +88,6 @@ services:
       - NODE_ENV=development
       - OUTPUT_API_PORT=3001
       - OUTPUT_CATALOG_ID=${OUTPUT_CATALOG_ID:-main}
-      - OUTPUT_AWS_REGION=${AWS_REGION:-us-west-1}
-      - OUTPUT_AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-}
-      - OUTPUT_AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-}
       - TEMPORAL_ADDRESS=temporal:7233
     ports:
       - '${OUTPUT_API_HOST_PORT:-3001}:3001'

package/dist/generated/framework_version.json

@@ -1,3 +1,3 @@
 {
-    "framework": "0.4.1-next.6bc541c.0"
+    "framework": "0.4.1-next.94453f5.0"
 }

package/dist/utils/format_workflow_result.spec.js

@@ -71,11 +71,15 @@ describe('formatWorkflowResult', () => {
             workflowId: 'wf-456',
             status: 'failed',
             output: null,
+            attributes: [{ type: 'llm:usage', total: 0.4 }],
+            aggregations: { cost: { total: 0.4 }, tokens: { total: 20 }, httpRequests: { total: 0 } },
             error: 'Activity task failed'
         };
         const output = formatOutput(data, 'json', formatWorkflowResult);
         const parsed = JSON.parse(output);
         expect(parsed.status).toBe('failed');
+        expect(parsed.attributes).toEqual([{ type: 'llm:usage', total: 0.4 }]);
+        expect(parsed.aggregations).toEqual({ cost: { total: 0.4 }, tokens: { total: 20 }, httpRequests: { total: 0 } });
         expect(parsed.error).toBe('Activity task failed');
     });
 });

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

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

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

@@ -1,10 +1,20 @@
 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 = [
+import packageJson from '../../../../package.json' with { type: 'json' };
+const GLOBAL_HINT_ROWS = 1;
+const LOCAL_HINT_ROWS = 1;
+export const getHeight = () => GLOBAL_HINT_ROWS + LOCAL_HINT_ROWS;
+const GLOBAL_HINTS = [
     { key: 'tab', label: 'next tab' },
+    { key: 'shift-tab', label: 'prev tab' },
+    { key: '1-4', label: 'tabs' },
     { key: '/', label: 'search' },
     { key: '?', label: 'help' },
     { key: 'ctrl+c', label: 'quit' }
 ];
+const VERSION = packageJson.version;
+const HintRow = ({ hints }) => (_jsx(Box, { flexDirection: "row", children: hints.length === 0 ? (_jsx(Text, { 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))) }));
+export const Footer = ({ hints = [], itemCount, itemLabel }) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(HintRow, { hints: GLOBAL_HINTS }), typeof itemCount === 'number' && itemLabel && (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: [itemCount, " ", itemLabel] }) }))] }), _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(HintRow, { hints: hints }), _jsxs(Text, { color: "blackBright", children: ["v", VERSION] })] })] }));
+};

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

@@ -5,7 +5,8 @@ export interface WorkflowSummary {
     failed: number;
     total: number;
 }
-export declare const compressPixels: (rows: string[]) => string[];
+export declare const getHeight: (terminalRows: number) => number;
+export declare const useHeaderRows: () => number;
 export type ServiceBadge = 'healthy' | 'starting' | 'failed';
 export interface HeaderCounters {
     running: number;

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

@@ -3,46 +3,20 @@ 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 HEADER_MARGIN = 1;
+const COMPACT_HEIGHT_THRESHOLD = 50;
+const COMPACT_HEADER_ROWS = 1;
+const FULL_HEADER_ROWS = 3;
+const getLogoHeight = (terminalRows) => terminalRows < COMPACT_HEIGHT_THRESHOLD ? COMPACT_HEADER_ROWS : FULL_HEADER_ROWS;
+export const getHeight = (terminalRows) => getLogoHeight(terminalRows) + HEADER_MARGIN;
+export const useHeaderRows = () => {
+    const { stdout } = useStdout();
+    return getLogoHeight(stdout?.rows ?? 60);
 };
-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"] }));
@@ -53,12 +27,9 @@ const ServicesBadge = ({ badge, failingCount }) => {
     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))) }));
-};
+const Logo = ({ compact }) => (_jsx(Box, { flexDirection: "column", children: compact ?
+        _jsx(Text, { color: PURPLE_100, bold: true, children: "OUTPUT" }) :
+        LOGO_PIXELS.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,
@@ -68,7 +39,7 @@ export const buildSummaryCounters = (summary, totalWorkflows, serviceBadge = 'st
     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 }) })] }));
+    const headerRows = useHeaderRows();
+    const compact = headerRows === COMPACT_HEADER_ROWS;
+    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: HEADER_MARGIN, children: [_jsx(Logo, { compact: compact }), _jsx(Box, { flexDirection: "column", children: _jsx(Counters, { counters: counters }) })] }));
 };

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

@@ -1,50 +1,10 @@
 import { describe, expect, it } from 'vitest';
-import { compressPixels } from './header.js';
-describe('compressPixels', () => {
-    it('returns an empty array for empty input', () => {
-        expect(compressPixels([])).toEqual([]);
+import { getHeight as getHeaderHeight } from './header.js';
+describe('getHeaderHeight', () => {
+    it('includes margin with compact height for terminals under 50 rows', () => {
+        expect(getHeaderHeight(49)).toBe(2);
     });
-    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('▀');
+    it('includes margin with full height for terminals with at least 50 rows', () => {
+        expect(getHeaderHeight(50)).toBe(4);
     });
 });

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

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

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

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { getHeight as getFooterHeight } from './footer.js';
+import { getHeight as getTabBarHeight } from './tab_bar.js';
+import { getHeight as getContentTitleHeight } from '../components/content_title.js';
+import { getHeight as getModalFrameHeight } from '../modals/modal_frame.js';
+describe('static layout heights', () => {
+    it('reports the tab bar height including its border row', () => {
+        expect(getTabBarHeight()).toBe(2);
+    });
+    it('reports the two-line footer height', () => {
+        expect(getFooterHeight()).toBe(2);
+    });
+    it('reports content title height including bottom margin', () => {
+        expect(getContentTitleHeight()).toBe(2);
+    });
+    it('reports modal frame chrome height', () => {
+        expect(getModalFrameHeight()).toBe(6);
+    });
+});

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

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

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

@@ -1,16 +1,21 @@
 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 SEARCH_CONTENT_ROWS = 1;
+const SEARCH_BORDER_ROWS = 2;
+export const useHeight = () => {
     const ui = useUiState();
+    return ui.search.open || Boolean(ui.search.query) ? SEARCH_CONTENT_ROWS + SEARCH_BORDER_ROWS : 0;
+};
+export const SearchBar = ({ active }) => {
+    const ui = useUiState();
+    const visible = useHeight() > 0;
     useInput((input, key) => {
         if (key.escape) {
             ui.clearSearch();
             return;
         }
         if (key.return) {
-            onSubmit?.(ui.search.query);
             ui.closeSearch();
             return;
         }
@@ -22,14 +27,8 @@ export const SearchBar = ({ active, onSubmit }) => {
             ui.setSearchQuery(ui.search.query + input);
         }
     }, { isActive: active });
-    useEffect(() => {
-        if (!active) {
-            return;
-        }
-        onSubmit?.(ui.search.query);
-    }, [active, ui.search.query, onSubmit]);
-    if (!active) {
+    if (!visible) {
         return null;
     }
-    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, children: "/ " }), _jsx(Text, { children: ui.search.query }), _jsx(Text, { inverse: true, children: ' ' })] }));
+    return (_jsxs(Box, { borderColor: "white", borderStyle: "double", flexGrow: 1, children: [_jsx(Text, { dimColor: true, children: "FILTER WORKFLOWS:\u00A0" }), _jsx(Text, { children: ui.search.query }), active && _jsx(Text, { inverse: true, children: ' ' })] }));
 };

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

@@ -1,5 +1,12 @@
 import React from 'react';
 import { type Tab } from '#views/dev/state/ui_state.js';
+export declare const getHeight: () => number;
+export interface TabBarItem {
+    id: string;
+    label: string;
+}
 export declare const TabBar: React.FC<{
-    active: Tab;
+    active: Tab | string;
+    items?: readonly TabBarItem[];
+    borderColor?: string;
 }>;

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

@@ -1,4 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxs as _jsxs, 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))) }));
+const TAB_LABEL_ROWS = 1;
+const TAB_BORDER_BOTTOM_ROWS = 1;
+export const getHeight = () => TAB_LABEL_ROWS + TAB_BORDER_BOTTOM_ROWS;
+const DEFAULT_ITEMS = TAB_ORDER.map(tab => ({
+    id: tab,
+    label: TAB_LABELS[tab]
+}));
+export const TabBar = ({ active, items = DEFAULT_ITEMS, borderColor }) => (_jsx(Box, { flexDirection: "row", borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false, borderBottom: true, borderColor: borderColor ?? 'blackBright', gap: 3, children: items.map(tab => {
+        const activeTab = tab.id === active;
+        const content = _jsxs(_Fragment, { children: ["\u00A0", tab.label, "\u00A0"] });
+        if (activeTab) {
+            return (_jsx(Box, { children: _jsx(Text, { inverse: true, bold: true, children: content }) }, tab.id));
+        }
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: content }) }, tab.id));
+    }) }));

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

@@ -1,2 +1,3 @@
 import React from 'react';
+export declare const useHeight: () => number;
 export declare const Toasts: React.FC;

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

@@ -3,6 +3,10 @@ import { useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { useUiState } from '#views/dev/state/ui_state.js';
 const TOAST_TTL_MS = 4000;
+export const useHeight = () => {
+    const ui = useUiState();
+    return ui.toasts.length > 0 ? ui.toasts.length : 0;
+};
 const toneColor = (tone) => {
     if (tone === 'success') {
         return 'green';
@@ -14,12 +18,12 @@ const toneColor = (tone) => {
 };
 const tonePrefix = (tone) => {
     if (tone === 'success') {
-        return '✓';
+        return '[+]';
     }
     if (tone === 'error') {
-        return '✗';
+        return '[!]';
     }
-    return 'ℹ';
+    return '[i]';
 };
 export const Toasts = () => {
     const ui = useUiState();
@@ -36,5 +40,5 @@ export const Toasts = () => {
     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))) }));
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: toasts.map(toast => (_jsx(Box, { backgroundColor: toneColor(toast.tone), flexGrow: 1, children: _jsxs(Text, { color: "black", wrap: "truncate-end", children: ["\u00A0", tonePrefix(toast.tone), "\u00A0", toast.message, "\u00A0"] }) }, toast.id))) }));
 };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const getHeight: () => number;
+/** Renders a bold title for panel content sections. */
+export declare const ContentTitle: React.FC<{
+    title: string;
+}>;

package/dist/views/dev/components/content_title.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const TITLE_ROWS = 1;
+const TITLE_MARGIN_BOTTOM = 1;
+export const getHeight = () => TITLE_ROWS + TITLE_MARGIN_BOTTOM;
+/** Renders a bold title for panel content sections. */
+export const ContentTitle = ({ title }) => (_jsx(Box, { marginBottom: TITLE_MARGIN_BOTTOM, children: _jsx(Text, { bold: true, children: title }) }));

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface StatusDisplay {
+    icon: string;
+    color: string;
+}
+export declare const resolveDockerServiceStatus: (status: string) => StatusDisplay;
+export declare const dockerServiceStatusColor: (status: string) => string;
+/** Renders Docker service health/state without workflow status semantics. */
+export declare const DockerServiceStatusIcon: React.FC<{
+    status: string;
+}>;
+export {};

package/dist/views/dev/components/docker_service_status.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+const DOCKER_SERVICE_STATUS_MAP = {
+    healthy: { icon: '●', color: 'green' },
+    unhealthy: { icon: '○', color: 'red' },
+    starting: { icon: '◐', color: 'yellow' },
+    none: { icon: '●', color: 'blue' },
+    running: { icon: '●', color: 'green' },
+    created: { icon: '◐', color: 'yellow' },
+    exited: { icon: '✗', color: 'red' }
+};
+const DEFAULT_DISPLAY = { icon: '?', color: 'white' };
+export const resolveDockerServiceStatus = (status) => DOCKER_SERVICE_STATUS_MAP[status] ?? DEFAULT_DISPLAY;
+export const dockerServiceStatusColor = (status) => resolveDockerServiceStatus(status).color;
+/** Renders Docker service health/state without workflow status semantics. */
+export const DockerServiceStatusIcon = ({ status }) => {
+    const { icon, color } = resolveDockerServiceStatus(status);
+    return _jsx(Text, { color: color, children: icon });
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const InlineSnippet: React.FC<{
+    content: string;
+}>;

package/dist/views/dev/components/inline_snippet.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+export const InlineSnippet = ({ content }) => (_jsx(Text, { color: "magenta", italic: true, children: content }));

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

@@ -1,21 +1,22 @@
 import React from 'react';
-import { type CommandHint } from '#views/dev/chrome/footer.js';
+interface DetailRenderInfo {
+    detailRows: number;
+}
 /**
  * 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.
+ * on top and a detail pane below. Panels keep their own selection state
+ * and detail rendering; the shell owns the layout invariant (windowing,
+ * overflow indicators, separator) so it lives in one place.
  */
 export interface MasterDetailPanelProps<T> {
     items: T[];
     selectedIndex: number;
+    height?: 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;
+    detail: React.ReactNode | ((info: DetailRenderInfo) => React.ReactNode);
 }
 export declare const MasterDetailPanel: <T extends object>(props: MasterDetailPanelProps<T>) => React.ReactElement;
+export {};

package/dist/views/dev/components/master_detail_panel.js

@@ -1,18 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text } from 'ink';
-import { Footer } from '#views/dev/chrome/footer.js';
-import { HorizontalRule } from '#views/dev/chrome/divider.js';
 import { computeWindowStart } from '#views/dev/utils/panel_helpers.js';
+const HEADER_ROWS = 1;
+const DETAIL_BORDER_ROWS = 2;
 const OverflowIndicator = ({ direction, count }) => (_jsxs(Text, { dimColor: true, children: ["  ", direction === 'up' ? '↑' : '↓', " ", count, " more ", direction === 'up' ? 'above' : 'below'] }));
 export const MasterDetailPanel = (props) => {
-    const { items, selectedIndex, visibleRows, renderHeader, renderRow, rowKey, detail, hints, itemLabel } = props;
+    const { items, selectedIndex, height, visibleRows, renderHeader, renderRow, rowKey, detail } = props;
     const windowStart = computeWindowStart(selectedIndex, items.length, visibleRows);
     const visible = items.slice(windowStart, windowStart + visibleRows);
     const overflowAbove = windowStart;
     const overflowBelow = items.length - (windowStart + visible.length);
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { flexDirection: "column", children: [renderHeader(), overflowAbove > 0 && _jsx(OverflowIndicator, { direction: "up", count: overflowAbove }), visible.map((item, i) => {
+    const listRows = HEADER_ROWS + visible.length + (overflowAbove > 0 ? 1 : 0) + (overflowBelow > 0 ? 1 : 0);
+    const detailRows = Math.max(1, (height ?? 1) - listRows - DETAIL_BORDER_ROWS);
+    const renderedDetail = typeof detail === 'function' ? detail({ detailRows }) : detail;
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [renderHeader(), overflowAbove > 0 && _jsx(OverflowIndicator, { direction: "up", count: overflowAbove }), visible.map((item, i) => {
                         const absoluteIndex = windowStart + i;
                         return (_jsx(React.Fragment, { children: renderRow(item, absoluteIndex === selectedIndex, absoluteIndex) }, rowKey(item, absoluteIndex)));
-                    }), overflowBelow > 0 && _jsx(OverflowIndicator, { direction: "down", count: overflowBelow })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(HorizontalRule, {}) }), detail, _jsx(Footer, { hints: hints, itemCount: items.length, itemLabel: itemLabel })] }));
+                    }), overflowBelow > 0 && _jsx(OverflowIndicator, { direction: "down", count: overflowBelow })] }), _jsx(Box, { borderStyle: "single", borderColor: "blackBright", paddingX: 1, flexGrow: 1, children: renderedDetail })] }));
 };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { WorkflowRun } from '#services/workflow_runs.js';
+export declare const RunInfoSidebar: React.FC<{
+    run: WorkflowRun;
+    resultStatus?: string | null;
+    maxRows?: number;
+}>;

package/dist/views/dev/components/run_info_sidebar.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { WorkflowStatusIcon, workflowStatusColor } from '#views/dev/components/workflow_status.js';
+import { elapsedMs, formatDate, formatDurationCompact } from '#utils/date_formatter.js';
+const SidebarKV = ({ label, value }) => (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { dimColor: true, bold: true, children: [label, ":\u00A0"] }), _jsx(Text, { bold: true, wrap: "wrap", children: value })] }));
+export const RunInfoSidebar = ({ run, resultStatus, maxRows }) => {
+    const status = resultStatus ?? run.status ?? 'unknown';
+    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
+    const rows = [
+        _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "RUN STATUS\u00A0" }), _jsx(WorkflowStatusIcon, { status: status }), _jsx(Text, { children: "\u00A0" }), _jsx(Text, { bold: true, color: workflowStatusColor(status), children: status.toUpperCase() })] }, "status"),
+        _jsx(SidebarKV, { label: "RUN ID", value: run.runId ?? '-' }, "run-id"),
+        _jsx(SidebarKV, { label: "WORKFLOW ID", value: run.workflowId ?? '-' }, "workflow-id"),
+        _jsx(SidebarKV, { label: "TYPE", value: run.workflowType ?? '-' }, "type"),
+        _jsx(SidebarKV, { label: "DURATION", value: duration }, "duration"),
+        _jsx(SidebarKV, { label: "START", value: formatDate(run.startedAt) }, "start"),
+        _jsx(SidebarKV, { label: "END", value: run.completedAt ? formatDate(run.completedAt) : '' }, "end")
+    ];
+    return (_jsx(Box, { flexDirection: "column", gap: maxRows === undefined ? 1 : 0, children: rows.slice(0, maxRows) }));
+};