@askalf/dario 3.38.6 → 4.0.1

package/dist/tui/tabs/hits.js

@@ -0,0 +1,223 @@
+/**
+ * Hits tab — live request stream with per-record detail drill-down.
+ *
+ * Subscribes to /analytics/stream on mount. Each incoming RequestRecord
+ * is prepended to the buffer (newest at the top of the visible list).
+ * Up/Down navigate the selection; the lower pane shows the selected
+ * record's full field set.
+ *
+ * Layout:
+ *
+ *   ┌─ Hits ────────────────────────[ ↑↓ select · r refresh ]
+ *   │  HH:MM:SS  METHOD  MODEL          IN     OUT   LAT    ST
+ *   │  18:42:01  POST    opus-4-7       842    216   1.2s  200  ←
+ *   │  18:42:03  POST    sonnet-4-6     1.2k   480   0.8s  200
+ *   │  …
+ *   ├─────────────────────────────────────────────────────────────
+ *   │  selected: 18:42:01  req_011…NvMn
+ *   │    account:  sprayberryit (single)
+ *   │    model:    claude-opus-4-7
+ *   │    bucket:   subscription
+ *   │    tokens:   in 842 / out 216 / cache-read 6.2k / thinking 84
+ *   │    latency:  1.18s   stream: yes  status: 200
+ *   │    5h util:  18%     7d util: 8%
+ *   └─────────────────────────────────────────────────────────────
+ */
+import { fg, dim, brand, inverse, BOX, pad, truncate } from '../render.js';
+import { renderKvRow } from '../layout.js';
+import { billingBucketFromClaim } from '../../analytics.js';
+const MAX_BUFFER = 5000;
+export const HitsTab = {
+    id: 'hits',
+    label: 'Hits',
+    hotkey: 'h',
+    initialState() {
+        return { buffer: [], selectedIdx: -1, subscribed: false, connectionError: null };
+    },
+    onMount(_state, ctx) {
+        // Subscribe to the live stream. Each record is prepended-conceptually
+        // (we push to the array and render in reverse, which keeps the
+        // buffer's mutation simple — Array.push is O(1) while unshift is O(n)).
+        const close = ctx.client.subscribeAnalyticsStream((record) => {
+            ctx.setState((s) => {
+                const next = {
+                    ...s,
+                    buffer: [...s.buffer, record].slice(-MAX_BUFFER),
+                    subscribed: true,
+                    connectionError: null,
+                };
+                // If user was at top (newest), keep them there. -1 means "no
+                // selection yet"; auto-select newest on first record.
+                if (s.selectedIdx === -1 || s.selectedIdx === 0) {
+                    next.selectedIdx = 0;
+                }
+                return next;
+            });
+        }, (err) => {
+            ctx.setState({ subscribed: false, connectionError: err.message });
+        });
+        ctx.registerCleanup(close);
+        return undefined;
+    },
+    onKey(state, key) {
+        if (state.buffer.length === 0)
+            return undefined;
+        // ↑ — go to OLDER (toward higher index in our reversed display)
+        if (key.name === 'up') {
+            const max = state.buffer.length - 1;
+            return { ...state, selectedIdx: Math.min(state.selectedIdx + 1, max) };
+        }
+        // ↓ — go to NEWER
+        if (key.name === 'down') {
+            return { ...state, selectedIdx: Math.max(state.selectedIdx - 1, 0) };
+        }
+        // PgUp / PgDn — step by 10
+        if (key.name === 'pageup') {
+            const max = state.buffer.length - 1;
+            return { ...state, selectedIdx: Math.min(state.selectedIdx + 10, max) };
+        }
+        if (key.name === 'pagedown') {
+            return { ...state, selectedIdx: Math.max(state.selectedIdx - 10, 0) };
+        }
+        // Home — jump to newest
+        if (key.name === 'home') {
+            return { ...state, selectedIdx: 0 };
+        }
+        // End — jump to oldest
+        if (key.name === 'end') {
+            return { ...state, selectedIdx: state.buffer.length - 1 };
+        }
+        return undefined;
+    },
+    render(state, dimv) {
+        const lines = [];
+        const w = dimv.cols;
+        const totalRows = dimv.rows;
+        // Split the body roughly 60/40 between list and detail.
+        const detailRows = 9;
+        const listRows = Math.max(3, totalRows - detailRows - 2);
+        if (state.buffer.length === 0) {
+            lines.push(' ' + brand('Hits') + dim('  — live request stream'));
+            lines.push('');
+            if (state.connectionError) {
+                lines.push('  ' + fg('red', `SSE error: ${state.connectionError}`));
+                lines.push('  ' + dim('Is `dario proxy` running? The stream reconnects automatically on the next mount.'));
+            }
+            else if (!state.subscribed) {
+                lines.push('  ' + dim('Connecting to /analytics/stream …'));
+            }
+            else {
+                lines.push('  ' + dim('Waiting for requests. Send one through dario to see it land here.'));
+            }
+            return lines.join('\n');
+        }
+        // Render newest-first: the LAST element of the buffer renders at
+        // the TOP of the list.
+        const newestFirst = [...state.buffer].reverse();
+        const startIdx = clampVisibleStart(state.selectedIdx, listRows, newestFirst.length);
+        const endIdx = Math.min(startIdx + listRows, newestFirst.length);
+        // Column layout — fixed widths to keep alignment stable across
+        // varied content. Fall back to truncation when columns overflow.
+        const colTime = 9;
+        const colModel = 18;
+        const colIn = 8, colOut = 7, colLat = 7, colStatus = 5;
+        lines.push(' ' + brand('Hits') +
+            dim(`  ${state.buffer.length} buffered · ${state.subscribed ? fg('green', 'live') : fg('yellow', 'disconnected')}`));
+        lines.push('');
+        // Header row (aligned with data rows)
+        lines.push('  ' + dim(pad('time', colTime) +
+            pad('model', colModel) +
+            pad('in', colIn) +
+            pad('out', colOut) +
+            pad('lat', colLat) +
+            pad('st', colStatus)));
+        for (let i = startIdx; i < endIdx; i++) {
+            const r = newestFirst[i];
+            const marker = i === state.selectedIdx ? fg('cyan', '▎') : ' ';
+            const row = marker + ' ' +
+                pad(formatTime(r.timestamp), colTime) +
+                pad(shortenModel(r.model), colModel) +
+                pad(formatTokens(r.inputTokens), colIn) +
+                pad(formatTokens(r.outputTokens), colOut) +
+                pad(formatLatency(r.latencyMs), colLat) +
+                pad(formatStatus(r.status), colStatus);
+            lines.push(i === state.selectedIdx ? inverse(truncate(row, w - 2)) : truncate(row, w - 2));
+        }
+        // Scroll hint
+        if (newestFirst.length > listRows) {
+            lines.push(' ' + dim(`${state.selectedIdx + 1} / ${newestFirst.length}  ` +
+                (startIdx > 0 ? '↑ more ' : '') +
+                (endIdx < newestFirst.length ? '↓ more' : '')));
+        }
+        // Separator
+        lines.push(' ' + dim(BOX.horizontal.repeat(w - 2)));
+        // Detail pane
+        if (state.selectedIdx >= 0 && state.selectedIdx < newestFirst.length) {
+            const r = newestFirst[state.selectedIdx];
+            lines.push('  ' + brand('Selected') + dim(`  ${formatTime(r.timestamp)}`));
+            lines.push('  ' + renderKvRow('Account', r.account, w - 4));
+            lines.push('  ' + renderKvRow('Model', r.model, w - 4));
+            lines.push('  ' + renderKvRow('Billing bucket', billingBucketFromClaim(r.claim), w - 4));
+            lines.push('  ' + renderKvRow('Tokens', tokenBreakdown(r), w - 4));
+            lines.push('  ' + renderKvRow('Latency', `${formatLatency(r.latencyMs)}  ${dim(r.isStream ? '(streaming)' : '(buffered)')}`, w - 4));
+            lines.push('  ' + renderKvRow('Util at request', `5h ${(r.util5h * 100).toFixed(0)}%   7d ${(r.util7d * 100).toFixed(0)}%`, w - 4));
+            lines.push('  ' + renderKvRow('Status', formatStatus(r.status), w - 4));
+        }
+        else {
+            lines.push('');
+            lines.push('  ' + dim('Use ↑↓ to select a request for details.'));
+        }
+        return lines.join('\n');
+    },
+};
+/**
+ * Decide what range of the (newest-first) buffer to show given the
+ * current selection. Keeps the selection visible: if selected drifts
+ * off the bottom we scroll down; off the top we scroll up.
+ */
+function clampVisibleStart(selectedIdx, listRows, total) {
+    if (selectedIdx < 0)
+        return 0;
+    // Try to keep selection roughly centered when scrolling
+    const desired = selectedIdx - Math.floor(listRows / 3);
+    return Math.max(0, Math.min(desired, Math.max(0, total - listRows)));
+}
+function formatTime(ts) {
+    const d = new Date(ts);
+    return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+function pad2(n) { return n < 10 ? '0' + n : String(n); }
+function shortenModel(model) {
+    return model.replace(/^claude-/, '');
+}
+function formatTokens(n) {
+    if (n >= 1_000_000)
+        return (n / 1_000_000).toFixed(1) + 'M';
+    if (n >= 1000)
+        return (n / 1000).toFixed(1) + 'k';
+    return String(n);
+}
+function formatLatency(ms) {
+    if (ms >= 1000)
+        return (ms / 1000).toFixed(1) + 's';
+    return ms + 'ms';
+}
+function formatStatus(code) {
+    if (code >= 200 && code < 300)
+        return fg('green', String(code));
+    if (code >= 400 && code < 500)
+        return fg('yellow', String(code));
+    if (code >= 500)
+        return fg('red', String(code));
+    return String(code);
+}
+function tokenBreakdown(r) {
+    const parts = [`in ${r.inputTokens}`, `out ${r.outputTokens}`];
+    if (r.cacheReadTokens > 0)
+        parts.push(`cache-read ${formatTokens(r.cacheReadTokens)}`);
+    if (r.cacheCreateTokens > 0)
+        parts.push(`cache-create ${formatTokens(r.cacheCreateTokens)}`);
+    if (r.thinkingTokens > 0)
+        parts.push(`thinking ${r.thinkingTokens}`);
+    return parts.join(' / ');
+}

package/dist/tui/tabs/status.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Status tab — at-a-glance proxy + auth + config-source view.
+ *
+ * Read-mostly. On mount: probe /health for proxy reachability; load
+ * config-file metadata locally. On any key, return undefined (no
+ * mutations from this tab).
+ *
+ * Layout:
+ *
+ *   ┌─ Proxy ─────────────────────────────────────────┐
+ *   │  status:      running                           │
+ *   │  port:        3456                              │
+ *   │  oauth:       healthy (expires in 7h 41m)       │
+ *   │  requests:    247                               │
+ *   └─────────────────────────────────────────────────┘
+ *   ┌─ Config ────────────────────────────────────────┐
+ *   │  source:      ~/.dario/config.json              │
+ *   │  schema:      v1                                │
+ *   │  …per-knob effective values (read-only)         │
+ *   └─────────────────────────────────────────────────┘
+ */
+import type { Tab, TabContext } from '../tab.js';
+export interface StatusState {
+    loading: boolean;
+    /** Proxy /health response, or null if unreachable. */
+    health: {
+        status: string;
+        oauth: string;
+        expiresIn?: string;
+        requests?: number;
+    } | null;
+    /** Config-file load source: file | missing | invalid. */
+    configSource: 'file' | 'missing' | 'invalid' | null;
+    /** Last refresh timestamp (ms). */
+    lastRefreshAt: number;
+    /** Error from the last refresh attempt, if any. */
+    error: string | null;
+}
+export declare const StatusTab: Tab<StatusState>;
+/**
+ * Refresh the Status tab's data — probe /health, load config file
+ * metadata. Exported separately so the parent can re-invoke on key
+ * 'r' without re-running the full onMount flow.
+ */
+export declare function refreshStatus(ctx: TabContext): Promise<StatusState>;

package/dist/tui/tabs/status.js

@@ -0,0 +1,132 @@
+/**
+ * Status tab — at-a-glance proxy + auth + config-source view.
+ *
+ * Read-mostly. On mount: probe /health for proxy reachability; load
+ * config-file metadata locally. On any key, return undefined (no
+ * mutations from this tab).
+ *
+ * Layout:
+ *
+ *   ┌─ Proxy ─────────────────────────────────────────┐
+ *   │  status:      running                           │
+ *   │  port:        3456                              │
+ *   │  oauth:       healthy (expires in 7h 41m)       │
+ *   │  requests:    247                               │
+ *   └─────────────────────────────────────────────────┘
+ *   ┌─ Config ────────────────────────────────────────┐
+ *   │  source:      ~/.dario/config.json              │
+ *   │  schema:      v1                                │
+ *   │  …per-knob effective values (read-only)         │
+ *   └─────────────────────────────────────────────────┘
+ */
+import { fg, dim, brand } from '../render.js';
+import { renderKvRow } from '../layout.js';
+export const StatusTab = {
+    id: 'status',
+    label: 'Status',
+    hotkey: 's',
+    initialState() {
+        return {
+            loading: true,
+            health: null,
+            configSource: null,
+            lastRefreshAt: 0,
+            error: null,
+        };
+    },
+    async onMount(_state, ctx) {
+        return refreshStatus(ctx);
+    },
+    onKey(state, key) {
+        // `r` triggers a manual refresh by signaling the parent to call
+        // onMount again. The parent watches for a sentinel state.
+        if (key.name === 'printable' && key.ch === 'r' && !key.ctrl) {
+            return { ...state, loading: true };
+        }
+        return undefined;
+    },
+    render(state, dim_) {
+        const lines = [];
+        const w = dim_.cols;
+        if (state.loading && !state.health) {
+            lines.push('');
+            lines.push('  ' + dim('Loading status…'));
+            return lines.join('\n');
+        }
+        // ── Proxy section ──────────────────────────────────────────
+        lines.push(' ' + brand('Proxy'));
+        if (state.health) {
+            lines.push('  ' + renderKvRow('Status', fg('green', state.health.status), w - 4));
+            lines.push('  ' + renderKvRow('OAuth', formatOauth(state.health.oauth, state.health.expiresIn), w - 4));
+            lines.push('  ' + renderKvRow('Requests', String(state.health.requests ?? 0), w - 4));
+        }
+        else {
+            lines.push('  ' + renderKvRow('Status', fg('red', 'unreachable — is `dario proxy` running?'), w - 4));
+            if (state.error) {
+                lines.push('  ' + renderKvRow('Error', dim(state.error), w - 4));
+            }
+        }
+        lines.push('');
+        // ── Config section ─────────────────────────────────────────
+        lines.push(' ' + brand('Config'));
+        const sourceLabel = state.configSource === 'file' ? '~/.dario/config.json'
+            : state.configSource === 'missing' ? dim('(no file — using defaults)')
+                : state.configSource === 'invalid' ? fg('yellow', '(file present but invalid — using defaults)')
+                    : dim('not loaded');
+        lines.push('  ' + renderKvRow('Source', sourceLabel, w - 4));
+        lines.push('');
+        // ── Footer hint ────────────────────────────────────────────
+        lines.push('');
+        lines.push(' ' + dim(`Last refresh: ${formatAgo(state.lastRefreshAt)}. Press ${fg('cyan', 'r')} to refresh.`));
+        return lines.join('\n');
+    },
+};
+/**
+ * Refresh the Status tab's data — probe /health, load config file
+ * metadata. Exported separately so the parent can re-invoke on key
+ * 'r' without re-running the full onMount flow.
+ */
+export async function refreshStatus(ctx) {
+    const { loadConfig } = await import('../../config-file.js');
+    const fileResult = loadConfig();
+    let health = null;
+    let error = null;
+    try {
+        const h = await ctx.client.health();
+        health = h;
+    }
+    catch (e) {
+        error = e.message;
+    }
+    return {
+        loading: false,
+        health,
+        configSource: fileResult.source,
+        lastRefreshAt: Date.now(),
+        error,
+    };
+}
+function formatOauth(label, expiresIn) {
+    if (label === 'healthy') {
+        return fg('green', expiresIn ? `healthy (expires in ${expiresIn})` : 'healthy');
+    }
+    if (label === 'expired')
+        return fg('yellow', 'expired (refresh on next request)');
+    if (label === 'broken')
+        return fg('red', 'broken — run `dario login`');
+    if (label === 'none')
+        return dim('no credentials');
+    return label;
+}
+function formatAgo(ts) {
+    if (ts === 0)
+        return 'never';
+    const secs = Math.floor((Date.now() - ts) / 1000);
+    if (secs < 1)
+        return 'just now';
+    if (secs < 60)
+        return `${secs}s ago`;
+    if (secs < 3600)
+        return `${Math.floor(secs / 60)}m ago`;
+    return `${Math.floor(secs / 3600)}h ago`;
+}

package/dist/tui/tui-app.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Top-level TuiApp — composes the six tabs into a single App<S>.
+ *
+ * Responsibilities:
+ *   - Render the header + tab strip + active tab body + footer
+ *   - Route keys: Tab cycles, q quits, hotkeys jump, else delegate
+ *   - Build per-tab TabContext (client + setState + registerCleanup)
+ *   - Drive an onTick heartbeat (every 250ms) for tabs that poll
+ *   - Run per-tab cleanups on tab-switch or App shutdown
+ */
+import { type StatusState } from './tabs/status.js';
+import { type ConfigState } from './tabs/config.js';
+import { type AnalyticsState } from './tabs/analytics.js';
+import { type HitsState } from './tabs/hits.js';
+import { type AccountsState } from './tabs/accounts.js';
+import { type BackendsState } from './tabs/backends.js';
+/**
+ * Composite state shape — one slice per tab plus the activeTab index.
+ * Each slice is held with its own static type so tabs don't lose
+ * type-safety; the parent dispatcher does the type-erasure when
+ * routing setState calls.
+ */
+export interface TuiState {
+    activeTab: number;
+    exiting: boolean;
+    status: StatusState;
+    config: ConfigState;
+    analytics: AnalyticsState;
+    hits: HitsState;
+    accounts: AccountsState;
+    backends: BackendsState;
+}
+export interface TuiAppOpts {
+    /** Base URL of the running proxy. Defaults to http://127.0.0.1:3456. */
+    proxyUrl?: string;
+    /** API key for the proxy (if DARIO_API_KEY is set). */
+    apiKey?: string;
+    /** dario package version, displayed in the header. */
+    version: string;
+}
+export declare function startTuiApp(opts: TuiAppOpts): Promise<void>;

package/dist/tui/tui-app.js

@@ -0,0 +1,217 @@
+/**
+ * Top-level TuiApp — composes the six tabs into a single App<S>.
+ *
+ * Responsibilities:
+ *   - Render the header + tab strip + active tab body + footer
+ *   - Route keys: Tab cycles, q quits, hotkeys jump, else delegate
+ *   - Build per-tab TabContext (client + setState + registerCleanup)
+ *   - Drive an onTick heartbeat (every 250ms) for tabs that poll
+ *   - Run per-tab cleanups on tab-switch or App shutdown
+ */
+import { App } from './app.js';
+import { ProxyClient } from './proxy-client.js';
+import { fg, dim } from './render.js';
+import { renderFooter, renderHeader, renderTabStrip } from './layout.js';
+import { StatusTab } from './tabs/status.js';
+import { ConfigTab } from './tabs/config.js';
+import { AnalyticsTab } from './tabs/analytics.js';
+import { HitsTab } from './tabs/hits.js';
+import { AccountsTab } from './tabs/accounts.js';
+import { BackendsTab } from './tabs/backends.js';
+const TICK_MS = 250;
+const TABS = [
+    StatusTab,
+    ConfigTab,
+    AnalyticsTab,
+    HitsTab,
+    AccountsTab,
+    BackendsTab,
+];
+export function startTuiApp(opts) {
+    const proxyUrl = opts.proxyUrl ?? 'http://127.0.0.1:3456';
+    const client = new ProxyClient({ baseUrl: proxyUrl, apiKey: opts.apiKey });
+    // Per-tab cleanup queues. Each entry is the cleanup fns the tab
+    // registered during its current mount. When the user switches tabs,
+    // we run + clear the OLD tab's cleanups before mounting the new one.
+    const cleanupsByTab = new Map();
+    for (let i = 0; i < TABS.length; i++)
+        cleanupsByTab.set(i, []);
+    const initialState = {
+        activeTab: 0,
+        exiting: false,
+        status: StatusTab.initialState(),
+        config: ConfigTab.initialState(),
+        analytics: AnalyticsTab.initialState(),
+        hits: HitsTab.initialState(),
+        accounts: AccountsTab.initialState(),
+        backends: BackendsTab.initialState(),
+    };
+    // Forward-declared App ref so the onKey closure can reference it
+    // before construction. TS needs the explicit annotation since
+    // strict mode disallows referencing a let-binding inside its
+    // own initializer expression.
+    let app;
+    app = new App({
+        initialState,
+        render: (state, dim_) => renderTui(state, dim_, opts.version, proxyUrl),
+        onKey: (state, key) => onKey(state, key, app, client, cleanupsByTab),
+        afterFrame: () => { },
+    });
+    // Mount the initial tab. The first tab's onMount fires before the
+    // first redraw — that means the loading state shows briefly until
+    // the async data arrives. Acceptable for v4.0; could be optimized
+    // by pre-fetching before app.start().
+    void mountTab(app, client, cleanupsByTab, initialState.activeTab);
+    // Tick heartbeat. Calls the active tab's onTick (if any) every
+    // TICK_MS. Each tab decides whether to act.
+    const tickInterval = setInterval(() => {
+        const s = app.getState();
+        const tab = TABS[s.activeTab];
+        if (tab.onTick) {
+            const ctx = makeContext(app, client, cleanupsByTab, s.activeTab);
+            tab.onTick(stateOf(s, s.activeTab), ctx);
+        }
+    }, TICK_MS);
+    // Global cleanup — fires when app.start()'s returned promise resolves
+    // (i.e. when App.stop() runs).
+    return app.start().finally(() => {
+        clearInterval(tickInterval);
+        // Run all per-tab cleanups
+        for (const fns of cleanupsByTab.values()) {
+            for (const fn of fns) {
+                try {
+                    fn();
+                }
+                catch { /* ignore */ }
+            }
+        }
+    });
+}
+// ── Wiring ─────────────────────────────────────────────────────────
+function onKey(state, key, app, client, cleanupsByTab) {
+    // ── Global keys ────────────────────────────────────────────
+    // q quits — but only when NOT inside an edit field (the Config
+    // tab's editor uses 'q' as a literal character).
+    const tab = TABS[state.activeTab];
+    const inEdit = state.activeTab === 1 /* config */ && state.config.editBuffer !== null;
+    if (!inEdit) {
+        if (key.name === 'printable' && key.ch === 'q' && !key.ctrl) {
+            app.stop();
+            return { ...state, exiting: true };
+        }
+        // Tab cycles forward; Shift+Tab cycles back. Some terminals send
+        // Shift+Tab as ESC[Z (BackTab) — parseKeys reports as 'unknown'
+        // currently. Listed for v4.x.
+        if (key.name === 'tab') {
+            return switchTab(state, (state.activeTab + 1) % TABS.length, app, client, cleanupsByTab);
+        }
+        // Hotkey jump
+        if (key.name === 'printable' && !key.ctrl) {
+            for (let i = 0; i < TABS.length; i++) {
+                if (TABS[i].hotkey === key.ch) {
+                    return switchTab(state, i, app, client, cleanupsByTab);
+                }
+            }
+        }
+    }
+    // Delegate to the active tab's onKey
+    const tabSlice = stateOf(state, state.activeTab);
+    const nextSlice = tab.onKey?.(tabSlice, key);
+    if (nextSlice !== undefined && nextSlice !== tabSlice) {
+        return withTabState(state, state.activeTab, nextSlice);
+    }
+    return undefined;
+}
+function switchTab(state, newIdx, app, client, cleanupsByTab) {
+    if (newIdx === state.activeTab)
+        return state;
+    // Run OLD tab's cleanup queue + clear it
+    const oldCleanups = cleanupsByTab.get(state.activeTab) ?? [];
+    for (const fn of oldCleanups) {
+        try {
+            fn();
+        }
+        catch { /* ignore */ }
+    }
+    cleanupsByTab.set(state.activeTab, []);
+    // Call the old tab's onUnmount (synchronous-only)
+    const oldTab = TABS[state.activeTab];
+    oldTab.onUnmount?.(stateOf(state, state.activeTab));
+    // Mount the new tab (fire-and-forget; async state updates via setState)
+    void mountTab(app, client, cleanupsByTab, newIdx);
+    return { ...state, activeTab: newIdx };
+}
+async function mountTab(app, client, cleanupsByTab, idx) {
+    const tab = TABS[idx];
+    if (!tab.onMount)
+        return;
+    const ctx = makeContext(app, client, cleanupsByTab, idx);
+    const sliceBefore = stateOf(app.getState(), idx);
+    const result = await tab.onMount(sliceBefore, ctx);
+    if (result !== undefined) {
+        app.setState((s) => withTabState(s, idx, result));
+    }
+}
+function makeContext(app, client, cleanupsByTab, idx) {
+    return {
+        client,
+        setState: (updater) => {
+            app.setState((s) => {
+                const currentSlice = stateOf(s, idx);
+                const nextSlice = typeof updater === 'function'
+                    ? updater(currentSlice)
+                    : { ...currentSlice, ...updater };
+                return withTabState(s, idx, nextSlice);
+            });
+        },
+        registerCleanup: (fn) => {
+            cleanupsByTab.get(idx)?.push(fn);
+        },
+    };
+}
+/** Read the state slice for tab `idx`. */
+function stateOf(s, idx) {
+    const key = TABS[idx].id;
+    return s[key];
+}
+/** Return a new TuiState with the slice for tab `idx` replaced. */
+function withTabState(s, idx, sliceVal) {
+    const key = TABS[idx].id;
+    return { ...s, [key]: sliceVal };
+}
+// ── Rendering ───────────────────────────────────────────────────
+function renderTui(state, dim_, version, proxyUrl) {
+    const cols = dim_.cols;
+    const rows = dim_.rows;
+    const out = [];
+    // Row 1: header
+    out.push(renderHeader(cols, { version, status: proxyUrl }));
+    // Row 2: tab strip
+    const tabLabels = TABS.map(t => t.label);
+    out.push(renderTabStrip(cols, tabLabels, state.activeTab));
+    out.push(dim('─'.repeat(cols)));
+    // Body — passed (cols, rows-5) so the tab knows it has rows 4..rows-2
+    const bodyRows = rows - 5;
+    const tab = TABS[state.activeTab];
+    const slice = stateOf(state, state.activeTab);
+    const body = tab.render(slice, { cols, rows: bodyRows });
+    out.push(body);
+    // Footer — fixed key hints (tab-cycling stays universal; per-tab
+    // hints are inside each tab body to keep the global footer stable).
+    const footerHints = [
+        { key: 'Tab', label: 'next tab' },
+        { key: 'q', label: 'quit' },
+        { key: 'r', label: 'refresh' },
+    ];
+    // Pad body to fill rows before the footer so the footer's row stays
+    // at the bottom (close to it — slight underflow OK; row count
+    // depends on each tab's content).
+    const bodyLines = body.split('\n').length;
+    if (bodyLines < bodyRows) {
+        out.push(''.padEnd(bodyRows - bodyLines, '\n'));
+    }
+    out.push(renderFooter(cols, footerHints));
+    // Connect with newlines
+    void fg; // silence unused if neither tab uses it through this module
+    return out.join('\n');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askalf/dario",
-  "version": "3.38.6",
+  "version": "4.0.1",
   "description": "Use your Claude Pro/Max subscription in any tool — Cursor, Cline, Aider, the Agent SDK, your scripts — at subscription pricing, not per-token API bills. One local Anthropic + OpenAI-compatible endpoint.",
   "type": "module",
   "bin": {