@alilis/k-hat 0.1.0 → 0.2.0

package/README.md

@@ -93,7 +93,7 @@ khat stop
 | `khat doctor` | 检测本机 Agent Tool 配置并输出接入提示 |
 | `khat log [--tail <n>]` | 查看最近的脱敏请求日志 |
 | `khat ui` | 签发一次性票据并打开本地管理页 |
-| `khat tui` | 在交互式终端中查看 daemon 状态、Provider/Key、路由和请求日志 |
+| `khat tui` | 终端监控面板：跨 Provider 的 key 健康表（不可用排最前，`e` 一键恢复、`p` 探活）、请求日志与诊断，Tab/1-4 切换区块 |
 
 > Provider、key 和路由的新增、更新、删除与恢复等管理变更通过本地 Admin API 执行；若 daemon 尚未运行，命令会自动启动它。
 

package/dist/tui-state.js

@@ -0,0 +1,59 @@
+// Pure state and helpers for the TUI: key-table ordering, log filtering and
+// viewport slicing. No React, no I/O — directly unit-testable.
+export const SECTIONS = ['overview', 'routes', 'logs', 'diagnostics'];
+export const LOG_FILTERS = ['all', 'failed', 'ok'];
+export function keyRows(status) {
+    const rows = [];
+    for (const provider of status?.providers ?? []) {
+        for (const key of provider.keys)
+            rows.push({ providerId: provider.id, keyId: key.id, key });
+    }
+    return rows.sort((a, b) => {
+        const rank = (row) => (row.key.status === 'unavailable' ? 0 : 1);
+        const byRank = rank(a) - rank(b);
+        if (byRank !== 0)
+            return byRank;
+        const byProvider = a.providerId.localeCompare(b.providerId);
+        if (byProvider !== 0)
+            return byProvider;
+        return a.keyId.localeCompare(b.keyId);
+    });
+}
+export function providerOf(status, id) {
+    return status?.providers.find((item) => item.id === id);
+}
+/** Green = available, red = unavailable, yellow = available but failing often. */
+export function keyTone(key) {
+    if (key.status === 'unavailable')
+        return 'red';
+    return key.counters.failed > 0 ? 'yellow' : 'green';
+}
+export function filterLogs(logs, filter) {
+    if (filter === 'failed')
+        return logs.filter((entry) => entry.status >= 400);
+    if (filter === 'ok')
+        return logs.filter((entry) => entry.status < 400);
+    return logs;
+}
+export function newestFirst(logs) {
+    return [...logs].reverse();
+}
+/** Sliding window centered on the cursor, clamped to the list bounds. */
+export function viewport(length, cursor, height) {
+    if (height < 1 || length === 0)
+        return { start: 0, items: [], above: 0, below: 0 };
+    const size = Math.min(length, height);
+    const start = Math.min(Math.max(0, cursor - Math.floor(size / 2)), length - size);
+    const items = [];
+    for (let index = start; index < start + size; index++)
+        items.push(index);
+    return { start, items, above: start, below: length - (start + size) };
+}
+export function moveCursor(current, delta, length) {
+    if (length <= 0)
+        return 0;
+    return Math.min(length - 1, Math.max(0, current + delta));
+}
+export function clampCursor(current, length) {
+    return length <= 0 ? 0 : Math.min(current, length - 1);
+}

package/dist/tui.js

@@ -1,32 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
-const MAIN_DASHBOARD_INDEX = 0;
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
+import { LOG_FILTERS, SECTIONS, clampCursor, filterLogs, keyRows, keyTone, newestFirst, providerOf, viewport, moveCursor } from './tui-state.js';
+const TAB_LABELS = { overview: '概览', routes: '路由', logs: '日志', diagnostics: '诊断' };
+const FILTER_LABELS = { all: '全部', failed: '仅失败', ok: '仅成功' };
+const MIN_ROWS = 12;
 function n(value) { return new Intl.NumberFormat('en-US').format(value); }
-function mask(value) { return value ? '*'.repeat(Math.min(value.length, 24)) : ''; }
-function providerOf(status, id) { return status?.providers.find((item) => item.id === id); }
-function Menu({ title, items, selected }) { return _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: title }), items.map((item, index) => _jsxs(Text, { color: index === selected ? 'yellow' : undefined, children: [index === selected ? '› ' : '  ', item] }, `${item}-${index}`))] }); }
-function FormView({ form }) { return _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: "yellow", children: [form.action === 'edit' ? 'Edit' : 'Add', " ", form.kind] }), form.fields.map((field, index) => _jsxs(Text, { color: index === form.cursor ? 'cyan' : undefined, children: [index === form.cursor ? '› ' : '  ', field, ": ", form.secret?.[index] ? mask(form.values[index]) : form.values[index]] }, field)), _jsx(Text, { dimColor: true, children: "Tab/\u2191\u2193 next field \u00B7 Enter submit \u00B7 Esc cancel" })] }); }
-function Details({ log }) { return _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: "Log details" }), Object.entries(log).map(([key, value]) => _jsxs(Text, { children: [key, ": ", String(value)] }, key))] }); }
+function compact(value) { return value >= 10_000 ? `${(value / 1_000).toFixed(1)}k` : n(value); }
+function bytes(value) { return value >= 1_048_576 ? `${(value / 1_048_576).toFixed(1)}MB` : value >= 1_024 ? `${(value / 1_024).toFixed(1)}KB` : `${value}B`; }
+function cell(value, width) { const text = String(value); return text.length > width ? `${text.slice(0, Math.max(1, width - 1))}…` : text.padEnd(width); }
+function numCell(value, width) { const text = compact(value); return text.length > width ? text.slice(0, width) : text.padStart(width); }
+function clock(ts) { const date = new Date(ts); return isNaN(date.getTime()) ? ts : date.toLocaleTimeString('en-GB', { hour12: false }); }
+function day(ts) { const date = new Date(ts); return isNaN(date.getTime()) ? String(ts) : date.toLocaleString('sv-SE').replace('T', ' '); }
+function duration(ms) { return ms < 1_000 ? `${ms}ms` : `${(ms / 1_000).toFixed(1)}s`; }
+function Dot({ tone }) { return _jsx(Text, { color: tone, children: "\u25CF" }); }
+function Tabs({ section }) {
+    return _jsx(Box, { gap: 1, children: SECTIONS.map((item, index) => (_jsx(Text, { color: item === section ? 'cyan' : 'gray', bold: item === section, children: item === section ? `[${index + 1} ${TAB_LABELS[item]}]` : ` ${index + 1} ${TAB_LABELS[item]} ` }, item))) });
+}
+function Edge({ text }) { return _jsx(Text, { dimColor: true, children: text }); }
+function KeyDetail({ row, status }) {
+    const provider = providerOf(status, row.providerId);
+    return _jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["\u2500 ", row.providerId, "/", row.keyId, " (", provider?.protocol ?? '?', ") ", provider?.baseUrl ?? ''] }), _jsxs(Text, { children: ["\u72B6\u6001 ", _jsx(Dot, { tone: keyTone(row.key) }), " ", row.key.status === 'available' ? '可用' : '不可用', " \u00B7 \u6743\u91CD ", row.key.weight, " \u00B7 \u5BC6\u94A5 ", row.key.secret ?? '(缺失)'] }), _jsxs(Text, { children: ["\u8BF7\u6C42 ", n(row.key.counters.requests), " \u00B7 \u5931\u8D25 ", n(row.key.counters.failed), " \u00B7 \u5B57\u8282 ", bytes(row.key.counters.bytesOut), " \u00B7 tokens ", compact(row.key.counters.tokensIn), " / ", compact(row.key.counters.tokensOut)] }), _jsxs(Text, { children: ["\u6700\u8FD1\u9519\u8BEF ", row.key.lastError ? `HTTP ${row.key.lastError.http} · ${day(row.key.lastError.at)}` : '—'] })] });
+}
+function LogDetail({ log }) {
+    return _jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["\u2500 ", day(log.ts), " \u00B7 ", log.model] }), _jsxs(Text, { children: ["provider ", log.provider, " \u00B7 key ", log.key, " \u00B7 HTTP ", log.status, log.ttfbMs !== undefined ? ` · ttfb ${duration(log.ttfbMs)}` : ''] }), _jsxs(Text, { children: ["\u8017\u65F6 ", log.durationMs !== undefined ? duration(log.durationMs) : '—', " \u00B7 \u5927\u5C0F ", log.bytes !== undefined ? bytes(log.bytes) : '—', " \u00B7 tokens ", log.tokensIn !== undefined ? n(log.tokensIn) : '—', " / ", log.tokensOut !== undefined ? n(log.tokensOut) : '—'] })] });
+}
+function OverviewBody({ status, rows, cursor, detailOpen, height }) {
+    const keys = rows.map((row) => row.key);
+    const requests = keys.reduce((sum, item) => sum + item.counters.requests, 0);
+    const failed = keys.reduce((sum, item) => sum + item.counters.failed, 0);
+    const tokensIn = keys.reduce((sum, item) => sum + item.counters.tokensIn, 0);
+    const tokensOut = keys.reduce((sum, item) => sum + item.counters.tokensOut, 0);
+    const unavailable = keys.filter((item) => item.status === 'unavailable').length;
+    const tableHeight = Math.max(3, height - 5 - (detailOpen ? 5 : 0));
+    const view = viewport(rows.length, cursor, tableHeight);
+    return _jsxs(Box, { flexDirection: "column", gap: 1, children: [status ? _jsxs(Text, { children: ["daemon ", _jsx(Dot, { tone: "green" }), " \u5728\u7EBF ", status.listen, " \u00B7 keys ", keys.length, unavailable > 0 ? _jsxs(Text, { color: "red", children: ["\uFF08", unavailable, " \u4E0D\u53EF\u7528\uFF09"] }) : null, " \u00B7 \u8BF7\u6C42 ", compact(requests), " \u00B7 \u5931\u8D25 ", compact(failed), " \u00B7 tokens ", compact(tokensIn), "/", compact(tokensOut)] }) : _jsx(Text, { dimColor: true, children: "\u7B49\u5F85 daemon \u6570\u636E\u2026" }), rows.length === 0 ? _jsx(Text, { dimColor: true, children: "\u6682\u65E0 key \u00B7 \u7528 khat provider add / khat key add \u6DFB\u52A0" }) : _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: `   ${cell('PROVIDER', 14)}${cell('KEY', 14)}${'WT'.padStart(3)}  · ${'REQ'.padStart(8)}${'FAIL'.padStart(8)}${'ERR'.padStart(9)}` }), view.above > 0 && _jsx(Edge, { text: `  ↑ ${view.above} more` }), view.items.map((index) => {
+                        const row = rows[index];
+                        const selected = index === cursor;
+                        const tone = keyTone(row.key);
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: selected ? 'yellow' : row.key.status === 'unavailable' ? 'red' : undefined, children: `${selected ? '›' : ' '} ${cell(row.providerId, 14)}${cell(row.keyId, 14)} ${String(row.key.weight).padStart(2)} ` }), _jsx(Dot, { tone: tone }), _jsx(Text, { color: selected ? 'yellow' : row.key.status === 'unavailable' ? 'red' : undefined, children: ` ${numCell(row.key.counters.requests, 8)}${numCell(row.key.counters.failed, 8)}${(row.key.lastError ? `HTTP ${row.key.lastError.http}` : '—').padStart(9)}` })] }, `${row.providerId}/${row.keyId}`));
+                    }), view.below > 0 && _jsx(Edge, { text: `  ↓ ${view.below} more` }), detailOpen && rows[cursor] && _jsx(KeyDetail, { row: rows[cursor], status: status })] })] });
+}
+function RoutesBody({ status, cursor, height }) {
+    const routes = status?.routes ?? [];
+    const view = viewport(routes.length, cursor, Math.max(3, height - 3));
+    return _jsx(Box, { flexDirection: "column", children: routes.length === 0 ? _jsx(Text, { dimColor: true, children: "\u6682\u65E0\u8DEF\u7531 \u00B7 \u7528 khat route add \u6DFB\u52A0" }) : _jsxs(_Fragment, { children: [view.above > 0 && _jsx(Edge, { text: `  ↑ ${view.above} more` }), view.items.map((index) => {
+                    const route = routes[index];
+                    const selected = index === cursor;
+                    return (_jsx(Text, { color: selected ? 'yellow' : undefined, children: `${selected ? '›' : ' '} ${cell(route.model, 32)}→ ${route.provider}` }, route.model));
+                }), view.below > 0 && _jsx(Edge, { text: `  ↓ ${view.below} more` })] }) });
+}
+function LogsBody({ logs, filter, cursor, detailOpen, height }) {
+    const rows = newestFirst(filterLogs(logs, filter));
+    const view = viewport(rows.length, cursor, Math.max(3, height - 3 - (detailOpen ? 5 : 0)));
+    return _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [`过滤: ${FILTER_LABELS[filter]} · ${rows.length} 条`, " ", cursor > 0 || detailOpen ? _jsx(Text, { color: "yellow", children: "\u00B7 \u5DF2\u6682\u505C\u5237\u65B0" }) : null] }), rows.length === 0 ? _jsx(Text, { dimColor: true, children: "\u6682\u65E0\u65E5\u5FD7" }) : _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: `  ${cell('TIME', 8)} ${cell('ST', 3)} ${cell('MODEL', 26)}${cell('KEY', 14)}${'耗时'.padStart(8)}` }), view.above > 0 && _jsx(Edge, { text: `  ↑ ${view.above} more` }), view.items.map((index) => {
+                        const log = rows[index];
+                        const selected = index === cursor;
+                        const failed = log.status >= 400;
+                        return (_jsx(Text, { color: selected ? 'yellow' : failed ? 'red' : undefined, children: `${selected ? '›' : ' '} ${cell(clock(log.ts), 8)} ${cell(String(log.status), 3)} ${cell(log.model, 26)}${cell(log.key, 14)}${(log.durationMs !== undefined ? duration(log.durationMs) : '—').padStart(8)}` }, `${log.ts}-${index}`));
+                    }), view.below > 0 && _jsx(Edge, { text: `  ↓ ${view.below} more` }), detailOpen && rows[cursor] && _jsx(LogDetail, { log: rows[cursor] })] })] });
+}
+function DiagnosticsBody({ snapshot }) {
+    const rows = keyRows(snapshot.status).filter((row) => row.key.status === 'unavailable');
+    return _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { children: ["daemon ", snapshot.error ? _jsxs(_Fragment, { children: [_jsx(Dot, { tone: "red" }), " \u4E0D\u53EF\u8FBE"] }) : _jsxs(_Fragment, { children: [_jsx(Dot, { tone: "green" }), " \u5728\u7EBF"] }), " \u00B7 \u5237\u65B0 ", snapshot.refreshedAt?.toLocaleTimeString('en-GB', { hour12: false }) ?? '—'] }), _jsxs(Text, { bold: true, color: rows.length ? 'red' : 'green', children: ["\u4E0D\u53EF\u7528 key\uFF1A", rows.length ? rows.length : '无'] }), rows.map((row) => _jsxs(Text, { color: "red", children: ["  ", row.providerId, "/", row.keyId, " ", row.key.lastError ? `HTTP ${row.key.lastError.http} · ${day(row.key.lastError.at)}` : ''] }, `${row.providerId}/${row.keyId}`)), _jsx(Text, { dimColor: true, children: "\u63A2\u6D3B\u4E0E\u542F\u7528\u8BF7\u5728\u300C\u6982\u89C8\u300D\u9009\u4E2D key \u540E\u6309 p / e" }), _jsx(Text, { children: "[t] \u8F6E\u6362\u8BBF\u95EE\u4EE4\u724C" })] });
+}
 export function Tui({ client }) {
     const { exit } = useApp();
-    const [view, setView] = useState({ kind: 'main' });
-    const [selected, setSelected] = useState(MAIN_DASHBOARD_INDEX);
+    const { stdout } = useStdout();
+    const rows = Math.max(1, stdout?.rows ?? 24);
+    const [section, setSection] = useState('overview');
     const [snapshot, setSnapshot] = useState({ status: null, logs: [], error: null, refreshedAt: null });
     const [loading, setLoading] = useState(false);
     const loadingRef = useRef(false);
     const [notice, setNotice] = useState(null);
     const [confirm, setConfirm] = useState(null);
-    const [form, setForm] = useState(null);
-    const [filters, setFilters] = useState({ model: '', key: '', status: '' });
-    const refresh = useCallback(async () => {
+    const [tokenScreen, setTokenScreen] = useState(null);
+    const [keyCursor, setKeyCursor] = useState(0);
+    const [routeCursor, setRouteCursor] = useState(0);
+    const [logCursor, setLogCursor] = useState(0);
+    const [keyDetail, setKeyDetail] = useState(false);
+    const [logDetail, setLogDetail] = useState(false);
+    const [logFilter, setLogFilter] = useState('all');
+    const logCursorRef = useRef(0);
+    const logDetailRef = useRef(false);
+    logCursorRef.current = logCursor;
+    logDetailRef.current = logDetail;
+    const refresh = useCallback(async (force = false) => {
         if (loadingRef.current)
             return;
         loadingRef.current = true;
         setLoading(true);
         try {
-            const [status, logs] = await Promise.all([client.status(), client.logs(50, filters)]);
-            setSnapshot({ status, logs, error: null, refreshedAt: new Date() });
+            const status = await client.status();
+            const frozen = !force && (logCursorRef.current > 0 || logDetailRef.current);
+            const logs = frozen ? undefined : await client.logs(50);
+            setSnapshot((current) => ({ status, logs: logs ?? current.logs, error: null, refreshedAt: new Date() }));
         }
         catch (error) {
             setSnapshot((current) => ({ ...current, error: error?.message ?? String(error) }));
@@ -35,252 +103,130 @@ export function Tui({ client }) {
             loadingRef.current = false;
             setLoading(false);
         }
-    }, [client, filters]);
+    }, [client]);
     useEffect(() => { void refresh(); }, [refresh]);
     useEffect(() => { const timer = setInterval(() => void refresh(), 5_000); return () => clearInterval(timer); }, [refresh]);
-    const providers = snapshot.status?.providers ?? [];
+    const keyRowsValue = keyRows(snapshot.status);
     const routes = snapshot.status?.routes ?? [];
-    const currentProvider = view.kind === 'provider-menu' || view.kind === 'keys' || view.kind === 'key-menu' ? providerOf(snapshot.status, view.providerId) : undefined;
-    const currentKey = view.kind === 'key-menu' ? currentProvider?.keys.find((item) => item.id === view.keyId) : undefined;
-    const mutation = async (operation, message) => { setConfirm(null); setForm(null); setNotice('Working…'); try {
-        await operation();
-        setNotice(message);
-        await refresh();
-    }
-    catch (error) {
-        setNotice(error?.message ?? String(error));
-    } };
-    const submit = async (current) => {
-        const values = current.values.map((value) => value.trim());
-        const required = current.kind === 'key' && current.action === 'edit' ? values.slice(0, 3) : values;
-        if (required.some((value) => !value)) {
-            setNotice('Required fields are missing.');
-            return;
-        }
-        if (current.kind === 'provider') {
-            if (!['openai', 'anthropic'].includes(values[2])) {
-                setNotice('Protocol must be openai or anthropic.');
-                return;
-            }
-            const input = { name: values[1], protocol: values[2], baseUrl: values[3].replace(/\/+$/, '') };
-            await mutation(() => current.action === 'edit' && current.target?.providerId ? client.updateProvider(current.target.providerId, input) : client.createProvider({ id: values[0], ...input }), `${current.action === 'edit' ? 'Updated' : 'Added'} provider ${values[0]}`);
-        }
-        else if (current.kind === 'key') {
-            const weight = Number(values[2]);
-            if (!Number.isInteger(weight) || weight < 1) {
-                setNotice('Weight must be a positive integer.');
-                return;
-            }
-            const providerId = current.target?.providerId;
-            const keyId = current.target?.keyId;
-            if (current.action === 'edit' && providerId && keyId)
-                await mutation(() => client.updateKey(providerId, keyId, { weight, ...(values[3] ? { value: values[3] } : {}) }), `Updated key ${values[1]}`);
-            else
-                await mutation(() => client.createKey(values[0], { id: values[1], value: values[3], weight }), `Added key ${values[0]}/${values[1]}`);
+    const logRowsLength = filterLogs(snapshot.logs, logFilter).length;
+    useEffect(() => { setKeyCursor((value) => clampCursor(value, keyRowsValue.length)); }, [keyRowsValue.length]);
+    useEffect(() => { setRouteCursor((value) => clampCursor(value, routes.length)); }, [routes.length]);
+    useEffect(() => { setLogCursor((value) => clampCursor(value, logRowsLength)); }, [logRowsLength, logFilter]);
+    const mutate = async (operation, message) => {
+        setConfirm(null);
+        setNotice({ text: '执行中…', tone: 'green' });
+        try {
+            await operation();
+            setNotice({ text: message, tone: 'green' });
+            await refresh(true);
         }
-        else if (current.kind === 'route')
-            await mutation(() => current.action === 'edit' && current.target?.model ? client.updateRoute(current.target.model, values[1]) : client.createRoute(values[0], values[1]), `${current.action === 'edit' ? 'Updated' : 'Added'} route ${values[0]}`);
-        else {
-            setFilters({ model: values[0], key: values[1], status: values[2] });
-            setForm(null);
-            setNotice('Log filters updated');
+        catch (error) {
+            setNotice({ text: error?.message ?? String(error), tone: 'red' });
         }
     };
-    const items = view.kind === 'main' ? ['Dashboard', 'Providers', 'Routes', 'Logs', 'Diagnostics', 'Quit']
-        : view.kind === 'providers' ? ['Add provider', ...providers.map((item) => `${item.id} (${item.protocol})`), 'Back']
-            : view.kind === 'provider-menu' ? ['View details', 'Keys', 'Edit provider', 'Delete provider', 'Back']
-                : view.kind === 'keys' ? ['Add key', ...(currentProvider?.keys ?? []).map((item) => `${item.id} (${item.status})`), 'Back']
-                    : view.kind === 'key-menu' ? ['View details', 'Edit key', 'Enable key', 'Probe key', 'Delete key', 'Back']
-                        : view.kind === 'routes' ? ['Add route', ...routes.map((item) => `${item.model} → ${item.provider}`), 'Back']
-                            : view.kind === 'route-menu' ? ['Edit route', 'Delete route', 'Back']
-                                : view.kind === 'logs' ? ['Browse recent logs', 'Set filters', 'Clear filters', 'Back']
-                                    : view.kind === 'diagnostics' ? ['Health', 'Unavailable keys', 'Rotate access token', 'Back'] : [];
+    const selectSection = (next) => { setSection(next); setKeyDetail(false); setLogDetail(false); };
     useInput((input, key) => {
-        if (form) {
-            if (key.escape)
-                setForm(null);
-            else if (key.return)
-                void submit(form);
-            else if (key.tab || key.downArrow || key.rightArrow)
-                setForm((current) => current && ({ ...current, cursor: (current.cursor + 1) % current.fields.length }));
-            else if (key.upArrow || key.leftArrow)
-                setForm((current) => current && ({ ...current, cursor: (current.cursor + current.fields.length - 1) % current.fields.length }));
-            else if (key.backspace || key.delete)
-                setForm((current) => current && ({ ...current, values: current.values.map((value, index) => index === current.cursor ? value.slice(0, -1) : value) }));
-            else if (input && !key.ctrl && !key.meta)
-                setForm((current) => current && ({ ...current, values: current.values.map((value, index) => index === current.cursor ? value + input : value) }));
-            return;
-        }
         if (confirm) {
             if (input === 'y' || key.return)
-                void mutation(confirm.run, `${confirm.label} completed`);
+                void mutate(confirm.run, `${confirm.label} 完成`);
             else if (input === 'n' || key.escape)
                 setConfirm(null);
             return;
         }
+        if (tokenScreen) {
+            if (key.escape || input === 't')
+                setTokenScreen(null);
+            return;
+        }
         if (input === 'q' || (key.ctrl && input === 'c'))
             return exit();
-        if (key.escape) {
-            setView((current) => current.kind === 'main' ? current : { kind: 'main' });
-            setSelected(MAIN_DASHBOARD_INDEX);
+        if (key.tab) {
+            selectSection(SECTIONS[(SECTIONS.indexOf(section) + 1) % SECTIONS.length]);
             return;
         }
-        if (key.upArrow) {
-            setSelected((value) => Math.max(0, value - 1));
+        const digit = ['1', '2', '3', '4'].indexOf(input);
+        if (digit >= 0) {
+            selectSection(SECTIONS[digit]);
             return;
         }
-        if (key.downArrow) {
-            setSelected((value) => Math.min(Math.max(0, items.length - 1), value + 1));
+        if (key.escape) {
+            if (keyDetail)
+                setKeyDetail(false);
+            else if (logDetail)
+                setLogDetail(false);
             return;
         }
         if (input === 'r') {
-            void refresh();
-            return;
-        }
-        if (input === 'd') {
-            setView({ kind: 'dashboard' });
-            setSelected(0);
+            void refresh(true);
             return;
         }
-        if (input === 'p') {
-            setView({ kind: 'providers' });
-            setSelected(0);
-            return;
-        }
-        if (input === 'g') {
-            setView({ kind: 'routes' });
-            setSelected(0);
-            return;
-        }
-        if (input === 'l') {
-            setView({ kind: 'logs' });
-            setSelected(0);
-            return;
-        }
-        if (input === 'i') {
-            setView({ kind: 'diagnostics' });
-            setSelected(0);
-            return;
-        }
-        if (input !== '\r' && input !== '\n' && key.return)
-            return;
-        if (!key.return)
-            return;
-        if (view.kind === 'main') {
-            const target = items[selected];
-            setView({ kind: target === 'Dashboard' ? 'dashboard' : target === 'Providers' ? 'providers' : target === 'Routes' ? 'routes' : target === 'Logs' ? 'logs' : target === 'Diagnostics' ? 'diagnostics' : 'main' });
-            setSelected(0);
-            if (target === 'Quit')
-                exit();
-        }
-        else if (view.kind === 'providers') {
-            if (selected === 0)
-                setForm({ kind: 'provider', action: 'create', fields: ['id', 'name', 'protocol', 'base URL'], values: ['', '', 'openai', ''], cursor: 0 });
-            else if (selected <= providers.length)
-                setView({ kind: 'provider-menu', providerId: providers[selected - 1].id });
-            else
-                setView({ kind: 'main' });
-            setSelected(0);
-        }
-        else if (view.kind === 'provider-menu' && currentProvider) {
-            if (selected === 0)
-                setNotice(`${currentProvider.id}: ${currentProvider.baseUrl}`);
-            else if (selected === 1)
-                setView({ kind: 'keys', providerId: currentProvider.id });
-            else if (selected === 2)
-                setForm({ kind: 'provider', action: 'edit', target: { providerId: currentProvider.id }, fields: ['id', 'name', 'protocol', 'base URL'], values: [currentProvider.id, currentProvider.name, currentProvider.protocol, currentProvider.baseUrl], cursor: 1 });
-            else if (selected === 3)
-                setConfirm({ label: `delete provider ${currentProvider.id} and its keys/routes`, run: () => client.deleteProvider(currentProvider.id) });
-            else
-                setView({ kind: 'providers' });
-            setSelected(0);
-        }
-        else if (view.kind === 'keys' && currentProvider) {
-            if (selected === 0)
-                setForm({ kind: 'key', action: 'create', fields: ['provider', 'id', 'weight', 'secret'], values: [currentProvider.id, '', '1', ''], cursor: 1, secret: [false, false, false, true] });
-            else if (selected <= currentProvider.keys.length)
-                setView({ kind: 'key-menu', providerId: currentProvider.id, keyId: currentProvider.keys[selected - 1].id });
-            else
-                setView({ kind: 'provider-menu', providerId: currentProvider.id });
-            setSelected(0);
-        }
-        else if (view.kind === 'key-menu' && currentProvider && currentKey) {
-            if (selected === 0)
-                setNotice(`${currentKey.id}: ${currentKey.secret ?? '(missing)'}`);
-            else if (selected === 1)
-                setForm({ kind: 'key', action: 'edit', target: { providerId: currentProvider.id, keyId: currentKey.id }, fields: ['provider', 'id', 'weight', 'new secret'], values: [currentProvider.id, currentKey.id, String(currentKey.weight), ''], cursor: 2, secret: [false, false, false, true] });
-            else if (selected === 2)
-                setConfirm(currentKey.status === 'unavailable' ? { label: `enable ${currentProvider.id}/${currentKey.id}`, run: () => client.enableKey(currentProvider.id, currentKey.id) } : { label: 'Key is already available', run: async () => undefined });
-            else if (selected === 3)
-                setConfirm({ label: `probe ${currentProvider.id}/${currentKey.id}`, run: async () => { const result = await client.probeKey(currentProvider.id, currentKey.id); if (!result.ok)
-                        throw new Error(`probe returned HTTP ${result.status}`); } });
-            else if (selected === 4)
-                setConfirm({ label: `delete key ${currentProvider.id}/${currentKey.id}`, run: () => client.deleteKey(currentProvider.id, currentKey.id) });
-            else
-                setView({ kind: 'keys', providerId: currentProvider.id });
-            setSelected(0);
-        }
-        else if (view.kind === 'routes') {
-            if (selected === 0)
-                setForm({ kind: 'route', action: 'create', fields: ['model', 'provider'], values: ['', providers[0]?.id ?? ''], cursor: 0 });
-            else if (selected <= routes.length)
-                setView({ kind: 'route-menu', model: routes[selected - 1].model });
-            else
-                setView({ kind: 'main' });
-            setSelected(0);
-        }
-        else if (view.kind === 'route-menu') {
-            const route = routes.find((item) => item.model === view.model);
-            if (!route)
-                return;
-            if (selected === 0)
-                setForm({ kind: 'route', action: 'edit', target: { model: route.model }, fields: ['model', 'provider'], values: [route.model, route.provider], cursor: 1 });
-            else if (selected === 1)
-                setConfirm({ label: `delete route ${route.model}`, run: () => client.deleteRoute(route.model) });
-            else
-                setView({ kind: 'routes' });
-            setSelected(0);
-        }
-        else if (view.kind === 'logs') {
-            if (selected === 0)
-                setView({ kind: 'log-details', index: snapshot.logs.length - 1 });
-            else if (selected === 1)
-                setForm({ kind: 'logs', fields: ['model', 'key', 'status'], values: [filters.model, filters.key, filters.status], cursor: 0 });
-            else if (selected === 2) {
-                setFilters({ model: '', key: '', status: '' });
-                void refresh();
+        if (section === 'overview') {
+            const row = keyRowsValue[keyCursor];
+            if (key.upArrow)
+                setKeyCursor((value) => moveCursor(value, -1, keyRowsValue.length));
+            else if (key.downArrow)
+                setKeyCursor((value) => moveCursor(value, 1, keyRowsValue.length));
+            else if (key.return)
+                setKeyDetail((value) => !value);
+            else if (row && input === 'e') {
+                if (row.key.status === 'unavailable')
+                    void mutate(() => client.enableKey(row.providerId, row.keyId), `已启用 ${row.providerId}/${row.keyId}`);
+            }
+            else if (row && input === 'p') {
+                setNotice({ text: `探活 ${row.providerId}/${row.keyId}…`, tone: 'green' });
+                client.probeKey(row.providerId, row.keyId)
+                    .then((result) => setNotice({ text: result.ok ? `探活成功 · HTTP ${result.status}` : `探活失败 · HTTP ${result.status}`, tone: result.ok ? 'green' : 'red' }))
+                    .catch((error) => setNotice({ text: error?.message ?? String(error), tone: 'red' }));
+            }
+            else if (row && input === 'd')
+                setConfirm({ label: `删除 key ${row.providerId}/${row.keyId}`, run: () => client.deleteKey(row.providerId, row.keyId) });
+        }
+        else if (section === 'routes') {
+            const route = routes[routeCursor];
+            if (key.upArrow)
+                setRouteCursor((value) => moveCursor(value, -1, routes.length));
+            else if (key.downArrow)
+                setRouteCursor((value) => moveCursor(value, 1, routes.length));
+            else if (route && input === 'd')
+                setConfirm({ label: `删除路由 ${route.model}`, run: () => client.deleteRoute(route.model) });
+        }
+        else if (section === 'logs') {
+            if (key.upArrow)
+                setLogCursor((value) => moveCursor(value, -1, logRowsLength));
+            else if (key.downArrow)
+                setLogCursor((value) => moveCursor(value, 1, logRowsLength));
+            else if (key.return)
+                setLogDetail((value) => !value);
+            else if (input === 'f') {
+                setLogFilter((current) => LOG_FILTERS[(LOG_FILTERS.indexOf(current) + 1) % LOG_FILTERS.length]);
+                setLogCursor(0);
+                setLogDetail(false);
             }
-            else
-                setView({ kind: 'main' });
-            setSelected(0);
         }
-        else if (view.kind === 'diagnostics') {
-            if (selected === 2)
-                setConfirm({ label: 'rotate access token', run: async () => { const result = await client.rotateToken(); setNotice(`New token: ${result.token}`); } });
-            else if (selected === 3)
-                setView({ kind: 'main' });
+        else if (section === 'diagnostics') {
+            if (input === 't')
+                setConfirm({ label: '轮换访问令牌（旧令牌立即失效）', run: async () => { const result = await client.rotateToken(); setTokenScreen(result.token); } });
         }
     });
-    let content;
-    if (form)
-        content = _jsx(FormView, { form: form });
-    else if (confirm)
-        content = _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", bold: true, children: ["Confirm: ", confirm.label, "?"] }), _jsx(Text, { children: "Press y/Enter to confirm, n/Esc to cancel." })] });
-    else if (view.kind === 'dashboard') {
-        const keys = providers.flatMap((item) => item.keys);
-        const requests = keys.reduce((sum, item) => sum + item.counters.requests, 0);
-        const failed = keys.reduce((sum, item) => sum + item.counters.failed, 0);
-        content = _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Dashboard" }), _jsxs(Text, { children: ["daemon: ", snapshot.error ? 'offline' : 'online', " \u00B7 ", snapshot.status?.listen ?? '—'] }), _jsxs(Text, { children: ["providers: ", providers.length, " \u00B7 keys: ", keys.length, " \u00B7 unavailable: ", keys.filter((item) => item.status === 'unavailable').length] }), _jsxs(Text, { children: ["requests: ", n(requests), " \u00B7 failed: ", n(failed), " \u00B7 success: ", requests ? `${(((requests - failed) / requests) * 100).toFixed(1)}%` : '—'] }), _jsxs(Text, { children: ["tokens: ", n(keys.reduce((sum, item) => sum + item.counters.tokensIn, 0)), " in / ", n(keys.reduce((sum, item) => sum + item.counters.tokensOut, 0)), " out"] })] });
-    }
-    else if (view.kind === 'log-details')
-        content = snapshot.logs[view.index] ? _jsx(Details, { log: snapshot.logs[view.index] }) : _jsx(Text, { children: "No log selected." });
-    else if (view.kind === 'diagnostics')
-        content = _jsxs(Box, { flexDirection: "column", children: [_jsx(Menu, { title: "Diagnostics", items: items, selected: selected }), _jsxs(Text, { dimColor: true, children: ["health: ", snapshot.error ? 'unreachable' : 'ok', " \u00B7 refreshed: ", snapshot.refreshedAt?.toLocaleTimeString() ?? '—'] })] });
-    else if (view.kind === 'logs')
-        content = _jsxs(Box, { flexDirection: "column", children: [_jsx(Menu, { title: "Logs", items: items, selected: selected }), _jsxs(Text, { dimColor: true, children: ["filters: ", filters.model || '*', " / ", filters.key || '*', " / ", filters.status || '*'] }), snapshot.logs.length > 0 && _jsxs(Text, { children: [snapshot.logs.length, " log(s) loaded"] })] });
-    else if (view.kind === 'main' || view.kind === 'providers' || view.kind === 'provider-menu' || view.kind === 'keys' || view.kind === 'key-menu' || view.kind === 'routes' || view.kind === 'route-menu')
-        content = _jsx(Menu, { title: view.kind === 'main' ? 'khat manager' : view.kind, items: items, selected: selected });
+    const bodyHeight = rows - 8;
+    let body;
+    if (rows < MIN_ROWS)
+        body = _jsxs(Text, { color: "yellow", children: ["\u7EC8\u7AEF\u592A\u77EE\uFF08", rows, " \u884C\uFF09\uFF0C\u8BF7\u8C03\u9AD8\u7A97\u53E3"] });
+    else if (section === 'overview')
+        body = _jsx(OverviewBody, { status: snapshot.status, rows: keyRowsValue, cursor: keyCursor, detailOpen: keyDetail, height: bodyHeight });
+    else if (section === 'routes')
+        body = _jsx(RoutesBody, { status: snapshot.status, cursor: routeCursor, height: bodyHeight });
+    else if (section === 'logs')
+        body = _jsx(LogsBody, { logs: snapshot.logs, filter: logFilter, cursor: logCursor, detailOpen: logDetail, height: bodyHeight });
     else
-        content = _jsx(Text, { children: "Loading\u2026" });
-    return _jsxs(Box, { flexDirection: "column", minHeight: 14, children: [_jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { bold: true, children: "khat manager" }), _jsx(Text, { children: loading ? 'refreshing' : snapshot.error ? 'offline' : 'online' })] }), _jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [content, snapshot.error && !form && !confirm && _jsx(Text, { color: "red", children: snapshot.error }), notice && _jsx(Text, { color: "green", children: notice })] }), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 select \u00B7 Enter open \u00B7 Esc back \u00B7 r refresh \u00B7 q quit" }) })] });
+        body = _jsx(DiagnosticsBody, { snapshot: snapshot });
+    const HELP = {
+        overview: 'Tab/1-4 区块 · ↑↓ 选择 · e 启用 · p 探活 · d 删除 · Enter 详情 · r 刷新 · q 退出',
+        routes: 'Tab/1-4 区块 · ↑↓ 选择 · d 删除 · r 刷新 · q 退出',
+        logs: 'Tab/1-4 区块 · ↑↓ 选择 · f 过滤 · Enter 详情 · r 刷新 · q 退出',
+        diagnostics: 'Tab/1-4 区块 · t 轮换令牌 · r 刷新 · q 退出'
+    };
+    const help = confirm ? 'y 确认 · n/Esc 取消' : tokenScreen ? 'Esc 关闭' : HELP[section];
+    const statusBadge = loading ? _jsx(Text, { color: "yellow", children: "\u5237\u65B0\u4E2D" }) : snapshot.error ? _jsx(Text, { color: "red", children: "\u79BB\u7EBF" }) : _jsx(Text, { color: "green", children: "\u5728\u7EBF" });
+    return _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, children: "khat" }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: snapshot.refreshedAt?.toLocaleTimeString('en-GB', { hour12: false }) ?? '' }), statusBadge] })] }), _jsx(Tabs, { section: section }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [body, snapshot.error && _jsx(Text, { color: "red", children: snapshot.error })] }), tokenScreen ? _jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "\u65B0\u8BBF\u95EE\u4EE4\u724C\uFF08\u4EC5\u672C\u6B21\u5C55\u793A\uFF09" }), _jsx(Text, { children: tokenScreen }), _jsx(Text, { dimColor: true, children: "\u5173\u95ED\u540E\u53EF\u968F\u65F6\u7528 khat token show \u91CD\u770B \u00B7 Esc \u5173\u95ED" })] }) : notice ? _jsx(Text, { color: notice.tone, wrap: "truncate", children: notice.text }) : _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: help })] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilis/k-hat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },