@bytevion/cli 0.4.0 → 0.5.0

package/dist/tui/components/Dash.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useApp, useInput } from 'ink';
+import React from 'react';
+import { glyphs, gradient, tones } from '../theme.js';
+import { Panel } from './Panel.js';
+function Spark({ series, ascii, plainColor }) {
+    const ramp = glyphs(ascii).spark;
+    const values = series.length ? series : [0];
+    const max = Math.max(...values, 1);
+    const cols = gradient(values.length);
+    return (_jsx(Box, { children: values.map((value, i) => {
+            const idx = Math.min(ramp.length - 1, Math.max(0, Math.round((value / max) * (ramp.length - 1))));
+            return (_jsx(Text, { color: plainColor ? undefined : cols[i], children: ramp[idx] }, i));
+        }) }));
+}
+// Dense live monitor: a brand/health header, a one-line metric strip with a savings sparkline,
+// a Recent-requests panel beside an Optimizations panel, and a key-hint footer. Polls the
+// injected refresh port every few seconds; q / Esc / Ctrl-C exits cleanly.
+export function Dash({ data: initial, ports, ascii, plainColor, version, onDone }) {
+    const { exit } = useApp();
+    const [data, setData] = React.useState(initial);
+    const [tick, setTick] = React.useState(0);
+    const t = tones(plainColor);
+    const g = glyphs(ascii);
+    React.useEffect(() => {
+        let alive = true;
+        const timer = setInterval(() => {
+            ports
+                .refresh()
+                .then((next) => {
+                if (alive) {
+                    setData(next);
+                    setTick((n) => n + 1);
+                }
+            })
+                .catch(() => undefined);
+        }, 2500);
+        return () => {
+            alive = false;
+            clearInterval(timer);
+        };
+    }, [ports]);
+    useInput((input, key) => {
+        if (input === 'q' || key.escape || (key.ctrl && input === 'c')) {
+            onDone({ status: 'exit' });
+            exit();
+        }
+    });
+    const dot = data.gateway === 'healthy' ? t.ok : data.gateway === 'down' ? t.bad : t.muted;
+    const recent = data.recent.slice(0, 8);
+    const activeCount = data.layers.filter((l) => l.active).length;
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: t.brandMid, bold: true, children: [g.brand.join(''), " byte dash "] }), _jsxs(Text, { color: t.muted, children: ["v", version, "  "] }), _jsxs(Text, { color: dot, children: [g.filled, " ", data.gateway] }), _jsxs(Text, { color: t.muted, children: ["   ", data.email ?? '', data.org ? ` (${data.org})` : ''] })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: t.muted, children: "mode " }), _jsx(Text, { color: t.accent, children: data.mode ?? 'maximum' }), _jsx(Text, { color: t.muted, children: "   saved " }), _jsxs(Text, { color: t.ok, children: ["$", data.savedTotal.toFixed(4)] }), _jsx(Text, { color: t.muted, children: "   req " }), _jsx(Text, { children: data.requests }), _jsx(Text, { color: t.muted, children: "   cache " }), _jsxs(Text, { color: t.accent, children: [Math.round(data.cacheHitRate * 100), "%"] }), _jsx(Text, { color: t.muted, children: "   tok " }), _jsx(Text, { children: data.tokensTotal }), _jsx(Text, { color: t.muted, children: "   " }), _jsx(Spark, { series: data.savingsSeries, ascii: ascii, plainColor: plainColor })] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: "56%", marginRight: 1, children: _jsx(Panel, { title: "Recent requests", ascii: ascii, plainColor: plainColor, children: recent.length === 0 ? (_jsx(Text, { color: t.muted, children: "no requests yet" })) : (recent.map((r, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: r.status === 'ok' ? t.ok : t.bad, children: [g.bullet, " "] }), _jsx(Text, { children: r.model.padEnd(22).slice(0, 22) }), _jsxs(Text, { color: t.muted, children: [" ", String(r.latencyMs).padStart(5), "ms "] }), _jsxs(Text, { color: t.muted, children: [String(r.tokens).padStart(6), "tok "] }), _jsx(Text, { color: t.accent, children: r.cache ?? '' })] }, i)))) }) }), _jsx(Box, { width: "42%", children: _jsx(Panel, { title: `Optimizations ${activeCount}/${data.layers.length}`, tone: "ok", ascii: ascii, plainColor: plainColor, children: data.layers.slice(0, 12).map((l, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: l.active ? t.ok : t.muted, children: [l.active ? g.filled : g.empty, " "] }), _jsx(Text, { color: l.active ? undefined : t.muted, children: l.label })] }, i))) }) })] }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: t.muted, children: ["providers ", data.providers, " \u00B7 models ", data.models, " \u00B7 refresh #", tick, "    "] }), _jsx(Text, { color: t.accent, children: "q" }), _jsx(Text, { color: t.muted, children: " quit" })] })] }));
+}

package/dist/tui/contract.d.ts

@@ -97,3 +97,45 @@ export type WizardResult = {
     status: 'done';
     summary: WizardSummary;
 };
+export interface DashRequest {
+    model: string;
+    status: string;
+    latencyMs: number;
+    tokens: number;
+    cache?: string;
+}
+export interface DashLayer {
+    label: string;
+    active: boolean;
+}
+export interface DashData {
+    email?: string;
+    org?: string;
+    gateway: 'healthy' | 'down' | 'unknown';
+    mode?: string;
+    requests: number;
+    cacheHitRate: number;
+    savedTotal: number;
+    tokensTotal: number;
+    costTotal: number;
+    savingsSeries: number[];
+    providers: number;
+    models: number;
+    recent: DashRequest[];
+    layers: DashLayer[];
+}
+export interface DashPorts {
+    refresh(): Promise<DashData>;
+}
+export interface DashIslandProps {
+    data: DashData;
+    ports: DashPorts;
+    plainColor: boolean;
+    ascii: boolean;
+    version: string;
+}
+export type DashResult = {
+    status: 'fallback';
+} | {
+    status: 'exit';
+};

package/dist/tui/index.d.ts

@@ -1,3 +1,4 @@
-import type { HomeIslandProps, HomeResult, WizardIslandProps, WizardResult } from './contract.js';
+import type { DashIslandProps, DashResult, HomeIslandProps, HomeResult, WizardIslandProps, WizardResult } from './contract.js';
 export declare function renderHome(props: HomeIslandProps): Promise<HomeResult>;
 export declare function renderWizard(props: WizardIslandProps): Promise<WizardResult>;
+export declare function renderDash(props: DashIslandProps): Promise<DashResult>;

package/dist/tui/index.js

@@ -1,6 +1,7 @@
 import { render } from 'ink';
 import React from 'react';
 import { App } from './components/App.js';
+import { Dash } from './components/Dash.js';
 import { Home } from './components/Home.js';
 // ESM island entry. The CJS bridge (src/lib/tui.ts) dynamic-imports this and calls renderHome /
 // renderWizard. Each mounts an Ink root, resolves the result Promise when the component reports
@@ -76,3 +77,36 @@ export async function renderWizard(props) {
         }
     }
 }
+export async function renderDash(props) {
+    let settled = false;
+    let resolve;
+    const done = new Promise((res) => {
+        resolve = (r) => {
+            if (!settled) {
+                settled = true;
+                res(r);
+            }
+        };
+    });
+    const instance = render(React.createElement(Dash, {
+        data: props.data,
+        ports: props.ports,
+        ascii: props.ascii,
+        plainColor: props.plainColor,
+        version: props.version,
+        onDone: resolve,
+    }), { exitOnCtrlC: false });
+    try {
+        instance.waitUntilExit().then(() => resolve({ status: 'exit' }), () => resolve({ status: 'fallback' }));
+        return await done;
+    }
+    finally {
+        instance.unmount();
+        try {
+            process.stdout.write(SHOW_CURSOR);
+        }
+        catch {
+            /* stream may be closed */
+        }
+    }
+}