dsh-tool-stats 0.2.1 → 0.4.0

package/lib/analyzer.d.ts

@@ -1,5 +1,13 @@
-import type { ToolCall, ToolCounter, DeadTool, FailingTool, Recommendation } from './types.js';
+import type { ToolCall, ToolCounter, DeadTool, FailingTool, Recommendation, DailyToolTrend, ToolDetail, Alert, ToolStatsOverview } from './types.js';
 export declare function aggregate(calls: ToolCall[]): Map<string, ToolCounter>;
 export declare function findDeadTools(configuredTools: string[], calls: ToolCall[], threshold?: number): DeadTool[];
 export declare function findFailingTools(calls: ToolCall[], threshold?: number): FailingTool[];
 export declare function recommend(configuredTools: string[], calls: ToolCall[], deadThreshold?: number, estimatedTokensPerTool?: number): Recommendation[];
+/** Build daily trend for a specific tool. */
+export declare function dailyTrend(calls: ToolCall[], toolName: string): DailyToolTrend[];
+/** Detailed view for a single tool. */
+export declare function toolDetail(calls: ToolCall[], toolName: string): ToolDetail | null;
+/** Generate alerts for failing tools. */
+export declare function generateAlerts(calls: ToolCall[], threshold?: number): Alert[];
+/** Compute overview stats. */
+export declare function overview(calls: ToolCall[]): ToolStatsOverview;

package/lib/analyzer.js

@@ -90,3 +90,78 @@ export function recommend(configuredTools, calls, deadThreshold = 10, estimatedT
     }
     return recs;
 }
+/** Build daily trend for a specific tool. */
+export function dailyTrend(calls, toolName) {
+    const toolCalls = calls.filter((c) => c.tool === toolName);
+    const byDay = new Map();
+    for (const c of toolCalls) {
+        const day = new Date(c.timestamp).toISOString().slice(0, 10);
+        const d = byDay.get(day) ?? { invocations: 0, failures: 0, totalLatency: 0 };
+        d.invocations++;
+        if (!c.success)
+            d.failures++;
+        d.totalLatency += c.latencyMs;
+        byDay.set(day, d);
+    }
+    return [...byDay.entries()]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([date, d]) => ({
+        date,
+        invocations: d.invocations,
+        failures: d.failures,
+        avgLatencyMs: Math.round(d.totalLatency / d.invocations),
+    }));
+}
+/** Detailed view for a single tool. */
+export function toolDetail(calls, toolName) {
+    const counters = aggregate(calls);
+    const counter = counters.get(toolName);
+    if (!counter)
+        return null;
+    const toolCalls = calls.filter((c) => c.tool === toolName);
+    const recentCalls = toolCalls.sort((a, b) => b.timestamp - a.timestamp).slice(0, 50);
+    const trend = dailyTrend(calls, toolName);
+    // Error breakdown
+    const errorCounts = new Map();
+    for (const c of toolCalls) {
+        if (!c.success && c.errorMessage) {
+            const msg = c.errorMessage.slice(0, 100);
+            errorCounts.set(msg, (errorCounts.get(msg) ?? 0) + 1);
+        }
+    }
+    const errorBreakdown = [...errorCounts.entries()]
+        .map(([message, count]) => ({ message, count }))
+        .sort((a, b) => b.count - a.count);
+    return { counter, recentCalls, trend, errorBreakdown };
+}
+/** Generate alerts for failing tools. */
+export function generateAlerts(calls, threshold = 0.5) {
+    const alerts = [];
+    const counters = aggregate(calls);
+    const now = Date.now();
+    for (const c of counters.values()) {
+        if (c.invocations >= 5 && c.failureRate >= threshold) {
+            alerts.push({
+                level: c.failureRate >= 0.8 ? 'error' : 'warn',
+                tool: c.tool,
+                message: `Failure rate ${Math.round(c.failureRate * 100)}% (${c.failures}/${c.invocations})`,
+                timestamp: now,
+            });
+        }
+    }
+    return alerts;
+}
+/** Compute overview stats. */
+export function overview(calls) {
+    const totalCalls = calls.length;
+    const totalFailures = calls.filter((c) => !c.success).length;
+    const sessions = new Set(calls.map((c) => c.sessionId));
+    const totalLatency = calls.reduce((s, c) => s + c.latencyMs, 0);
+    return {
+        totalCalls,
+        totalFailures,
+        overallFailureRate: totalCalls > 0 ? totalFailures / totalCalls : 0,
+        activeSessions: sessions.size,
+        avgLatencyMs: totalCalls > 0 ? Math.round(totalLatency / totalCalls) : 0,
+    };
+}

package/lib/client/locales.d.ts

@@ -24,6 +24,16 @@ export declare const zh: {
     loading: string;
     failed: string;
     retry: string;
+    totalCalls: string;
+    totalFailures: string;
+    sessions: string;
+    avgLatency: string;
+    export: string;
+    clear: string;
+    confirmClear: string;
+    errorBreakdown: string;
+    recentCalls: string;
+    sessionsUnused: string;
 };
 /** English dictionary, checked complete against the zh key set. */
 export declare const en: typeof zh;

package/lib/client/locales.js

@@ -24,6 +24,16 @@ export const zh = {
     'loading': '正在加载…',
     'failed': '加载失败',
     'retry': '重试',
+    'totalCalls': '总调用',
+    'totalFailures': '总失败',
+    'sessions': '会话数',
+    'avgLatency': '平均延迟',
+    'export': '导出 CSV',
+    'clear': '清空',
+    'confirmClear': '确定清空所有记录？',
+    'errorBreakdown': '错误分类',
+    'recentCalls': '最近调用',
+    'sessionsUnused': '会话未用',
 };
 /** English dictionary, checked complete against the zh key set. */
 export const en = {
@@ -40,4 +50,14 @@ export const en = {
     'loading': 'Loading…',
     'failed': 'Failed to load',
     'retry': 'Retry',
+    'totalCalls': 'Total Calls',
+    'totalFailures': 'Total Failures',
+    'sessions': 'Sessions',
+    'avgLatency': 'Avg Latency',
+    'export': 'Export CSV',
+    'clear': 'Clear',
+    'confirmClear': 'Clear all recorded data?',
+    'errorBreakdown': 'Error Breakdown',
+    'recentCalls': 'Recent Calls',
+    'sessionsUnused': 'sessions unused',
 };

package/lib/client/ui.d.ts

@@ -0,0 +1,124 @@
+/**
+ * Shared UI component kit for dsh plugin panels.
+ *
+ * Self-contained: imports nothing but React. All styling is inline + CSS custom
+ * properties so the components follow the host theme. A single <style> tag injects
+ * keyframes the first time any component mounts.
+ *
+ * @module client/ui
+ */
+import type { ButtonHTMLAttributes, CSSProperties, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+export declare function Modal({ title, onClose, children, footer, width, }: {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    width?: number;
+}): ReactNode;
+export declare function ConfirmDialog({ title, message, confirmLabel, cancelLabel, onConfirm, onClose, danger, }: {
+    title: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onClose: () => void;
+    danger?: boolean;
+}): ReactNode;
+export declare function Button({ variant, size, children, style, ...rest }: {
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md';
+    children: ReactNode;
+    style?: CSSProperties;
+} & ButtonHTMLAttributes<HTMLButtonElement>): ReactNode;
+export declare function Card({ title, icon, children, actions, style, padding, }: {
+    title?: string;
+    icon?: string;
+    children: ReactNode;
+    actions?: ReactNode;
+    style?: CSSProperties;
+    padding?: number;
+}): ReactNode;
+export declare function StatCard({ value, label, color, unit, }: {
+    value: string | number;
+    label: string;
+    color?: string;
+    unit?: string;
+}): ReactNode;
+export declare function Badge({ children, color, }: {
+    children: ReactNode;
+    color?: 'default' | 'success' | 'error' | 'warning' | 'info';
+}): ReactNode;
+export declare function Input({ style, ...rest }: {
+    style?: CSSProperties;
+} & InputHTMLAttributes<HTMLInputElement>): ReactNode;
+export declare function Select({ style, children, ...rest }: {
+    style?: CSSProperties;
+    children: ReactNode;
+} & SelectHTMLAttributes<HTMLSelectElement>): ReactNode;
+export declare function Textarea({ style, ...rest }: {
+    style?: CSSProperties;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>): ReactNode;
+interface ToastItem {
+    id: number;
+    type: 'success' | 'error' | 'info';
+    message: string;
+}
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): ReactNode;
+export declare function useToast(): (type: ToastItem['type'], message: string) => void;
+export declare function Spinner({ size }: {
+    size?: number;
+}): ReactNode;
+export declare function EmptyState({ icon, message, }: {
+    icon?: string;
+    message: string;
+}): ReactNode;
+export declare function SectionTitle({ icon, children, actions, }: {
+    icon?: string;
+    children: ReactNode;
+    actions?: ReactNode;
+}): ReactNode;
+export declare const tableStyles: {
+    table: {
+        borderCollapse: "collapse";
+        width: "100%";
+    };
+    th: {
+        textAlign: "left";
+        padding: string;
+        fontWeight: 600;
+        fontSize: 12;
+        color: string;
+        borderBottom: string;
+    };
+    td: {
+        padding: string;
+        fontSize: 13;
+        borderBottom: string;
+    };
+    clickRow: {
+        cursor: "pointer";
+    };
+};
+export declare function CodeBlock({ children, maxHeight, style, }: {
+    children: string;
+    maxHeight?: number;
+    style?: CSSProperties;
+}): ReactNode;
+export declare function ProgressBar({ pct, color, height, }: {
+    pct: number;
+    color?: string;
+    height?: number;
+}): ReactNode;
+export declare function Field({ label, children, hint, }: {
+    label: string;
+    children: ReactNode;
+    hint?: string;
+}): ReactNode;
+export declare function usePanel<P>(path: string): {
+    payload: P | null;
+    error: string | null;
+    reload: () => void;
+};
+export {};

package/lib/client/ui.js

@@ -0,0 +1,388 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Shared UI component kit for dsh plugin panels.
+ *
+ * Self-contained: imports nothing but React. All styling is inline + CSS custom
+ * properties so the components follow the host theme. A single <style> tag injects
+ * keyframes the first time any component mounts.
+ *
+ * @module client/ui
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+// ─── Theme tokens ──────────────────────────────────────────────
+const T = {
+    accent: 'var(--accent, #4B8BBE)',
+    accentHover: 'var(--accent-hover, #3a6f9e)',
+    error: 'var(--error, #e53935)',
+    success: 'var(--success, #2e7d32)',
+    warning: 'var(--warning, #ed6c02)',
+    bg: 'var(--bg-secondary, rgba(128,128,128,0.04))',
+    bgHover: 'var(--bg-tertiary, rgba(128,128,128,0.08))',
+    border: 'var(--border, rgba(128,128,128,0.2))',
+    text: 'var(--text-primary, inherit)',
+    muted: 'var(--text-secondary, rgba(128,128,128,0.65))',
+    surface: 'var(--bg-primary, #fff)',
+};
+// ─── Style injection (once) ────────────────────────────────────
+let injected = false;
+function ensureStyles() {
+    if (injected || typeof document === 'undefined')
+        return;
+    injected = true;
+    const el = document.createElement('style');
+    el.textContent = `
+@keyframes dsh-fade-in{from{opacity:0}to{opacity:1}}
+@keyframes dsh-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+@keyframes dsh-spin{to{transform:rotate(360deg)}}
+.dsh-modal-overlay{animation:dsh-fade-in .15s ease}
+.dsh-modal-body{animation:dsh-slide-up .2s ease}
+.dsh-toast{animation:dsh-slide-up .2s ease}
+.dsh-spin{animation:dsh-spin .6s linear infinite}
+  `;
+    document.head.appendChild(el);
+}
+// ─── Modal ─────────────────────────────────────────────────────
+export function Modal({ title, onClose, children, footer, width = 520, }) {
+    useEffect(() => {
+        ensureStyles();
+        const handler = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [onClose]);
+    return (_jsx("div", { className: "dsh-modal-overlay", style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 1000,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(0,0,0,0.45)',
+            backdropFilter: 'blur(3px)',
+            WebkitBackdropFilter: 'blur(3px)',
+        }, onClick: onClose, children: _jsxs("div", { className: "dsh-modal-body", style: {
+                background: T.surface,
+                borderRadius: 14,
+                boxShadow: '0 12px 40px rgba(0,0,0,0.25)',
+                width: `min(92vw, ${width}px)`,
+                maxHeight: '85vh',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+            }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '16px 22px',
+                        borderBottom: `1px solid ${T.border}`,
+                    }, children: [_jsx("h3", { style: { margin: 0, fontSize: 15, fontWeight: 600 }, children: title }), _jsx("button", { type: "button", onClick: onClose, style: {
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                fontSize: 20,
+                                color: T.muted,
+                                padding: '0 4px',
+                                lineHeight: 1,
+                                borderRadius: 4,
+                            }, "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { style: { padding: 22, overflow: 'auto', flex: 1 }, children: children }), footer !== undefined && (_jsx("div", { style: {
+                        padding: '14px 22px',
+                        borderTop: `1px solid ${T.border}`,
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        gap: 10,
+                        background: T.bg,
+                    }, children: footer }))] }) }));
+}
+// ─── ConfirmDialog ─────────────────────────────────────────────
+export function ConfirmDialog({ title, message, confirmLabel, cancelLabel = 'Cancel', onConfirm, onClose, danger, }) {
+    return (_jsx(Modal, { title: title, onClose: onClose, width: 420, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }), _jsx(Button, { variant: danger === true ? 'danger' : 'primary', onClick: () => {
+                        onConfirm();
+                        onClose();
+                    }, children: confirmLabel })] }), children: _jsx("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.6 }, children: message }) }));
+}
+// ─── Button ────────────────────────────────────────────────────
+export function Button({ variant = 'secondary', size = 'md', children, style, ...rest }) {
+    const base = {
+        cursor: 'pointer',
+        borderRadius: 7,
+        fontWeight: 500,
+        transition: 'all 0.15s ease',
+        border: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        fontSize: size === 'sm' ? 12 : 13,
+        padding: size === 'sm' ? '5px 12px' : '8px 18px',
+        fontFamily: 'inherit',
+    };
+    const variants = {
+        primary: { background: T.accent, color: '#fff' },
+        secondary: {
+            background: T.bg,
+            color: T.text,
+            border: `1px solid ${T.border}`,
+        },
+        danger: {
+            background: 'transparent',
+            color: T.error,
+            border: `1px solid ${T.error}`,
+        },
+        ghost: { background: 'transparent', color: T.muted, border: 'none' },
+    };
+    return (_jsx("button", { type: "button", style: { ...base, ...variants[variant], ...style }, ...rest, children: children }));
+}
+// ─── Card ──────────────────────────────────────────────────────
+export function Card({ title, icon, children, actions, style, padding = 14, }) {
+    return (_jsxs("div", { style: {
+            borderRadius: 10,
+            border: `1px solid ${T.border}`,
+            background: T.bg,
+            overflow: 'hidden',
+            ...style,
+        }, children: [(title !== undefined || actions !== undefined) && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '12px 16px',
+                    borderBottom: title !== undefined ? `1px solid ${T.border}` : 'none',
+                }, children: [_jsxs("span", { style: { fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }, children: [icon !== undefined && _jsx("span", { children: icon }), title] }), actions] })), _jsx("div", { style: { padding }, children: children })] }));
+}
+// ─── StatCard ──────────────────────────────────────────────────
+export function StatCard({ value, label, color, unit, }) {
+    return (_jsxs("div", { style: {
+            flex: 1,
+            minWidth: 90,
+            textAlign: 'center',
+            padding: '14px 10px',
+            borderRadius: 10,
+            border: `1px solid ${T.border}`,
+            background: T.bg,
+        }, children: [_jsxs("div", { style: { fontSize: 24, fontWeight: 700, color: color ?? T.text, lineHeight: 1.2 }, children: [value, unit !== undefined && (_jsx("span", { style: { fontSize: 13, fontWeight: 500, opacity: 0.7, marginLeft: 2 }, children: unit }))] }), _jsx("div", { style: { fontSize: 11, color: T.muted, marginTop: 4 }, children: label })] }));
+}
+// ─── Badge ─────────────────────────────────────────────────────
+export function Badge({ children, color = 'default', }) {
+    const colors = {
+        default: { bg: 'rgba(128,128,128,0.12)', fg: T.muted },
+        success: { bg: 'rgba(46,125,50,0.12)', fg: T.success },
+        error: { bg: 'rgba(229,57,53,0.12)', fg: T.error },
+        warning: { bg: 'rgba(245,124,0,0.12)', fg: T.warning },
+        info: { bg: 'rgba(75,139,190,0.12)', fg: T.accent },
+    };
+    const c = colors[color];
+    return (_jsx("span", { style: {
+            display: 'inline-block',
+            padding: '2px 9px',
+            borderRadius: 10,
+            fontSize: 11,
+            fontWeight: 600,
+            background: c.bg,
+            color: c.fg,
+        }, children: children }));
+}
+// ─── Input ─────────────────────────────────────────────────────
+export function Input({ style, ...rest }) {
+    return (_jsx("input", { ...rest, style: {
+            fontSize: 13,
+            padding: '8px 12px',
+            borderRadius: 7,
+            border: `1px solid ${T.border}`,
+            background: T.surface,
+            color: T.text,
+            width: '100%',
+            boxSizing: 'border-box',
+            fontFamily: 'inherit',
+            outline: 'none',
+            transition: 'border-color 0.15s',
+            ...style,
+        } }));
+}
+// ─── Select ────────────────────────────────────────────────────
+export function Select({ style, children, ...rest }) {
+    return (_jsx("select", { ...rest, style: {
+            fontSize: 13,
+            padding: '8px 12px',
+            borderRadius: 7,
+            border: `1px solid ${T.border}`,
+            background: T.surface,
+            color: T.text,
+            cursor: 'pointer',
+            fontFamily: 'inherit',
+            outline: 'none',
+            ...style,
+        }, children: children }));
+}
+// ─── Textarea ──────────────────────────────────────────────────
+export function Textarea({ style, ...rest }) {
+    return (_jsx("textarea", { ...rest, style: {
+            fontSize: 13,
+            padding: '8px 12px',
+            borderRadius: 7,
+            border: `1px solid ${T.border}`,
+            background: T.surface,
+            color: T.text,
+            width: '100%',
+            boxSizing: 'border-box',
+            fontFamily: 'inherit',
+            outline: 'none',
+            resize: 'vertical',
+            lineHeight: 1.5,
+            ...style,
+        } }));
+}
+const ToastContext = createContext(() => { });
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const show = useCallback((type, message) => {
+        const id = Date.now() + Math.random();
+        setToasts((t) => [...t, { id, type, message }]);
+        setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500);
+    }, []);
+    return (_jsxs(ToastContext.Provider, { value: show, children: [children, toasts.length > 0 && (_jsx("div", { style: {
+                    position: 'fixed',
+                    bottom: 24,
+                    right: 24,
+                    zIndex: 2000,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8,
+                }, children: toasts.map((t) => (_jsx("div", { className: "dsh-toast", style: {
+                        padding: '12px 18px',
+                        borderRadius: 8,
+                        fontSize: 13,
+                        fontWeight: 500,
+                        boxShadow: '0 6px 20px rgba(0,0,0,0.2)',
+                        color: '#fff',
+                        background: t.type === 'success'
+                            ? T.success
+                            : t.type === 'error'
+                                ? T.error
+                                : T.accent,
+                        maxWidth: 360,
+                    }, children: t.message }, t.id))) }))] }));
+}
+export function useToast() {
+    return useContext(ToastContext);
+}
+// ─── Spinner ───────────────────────────────────────────────────
+export function Spinner({ size = 16 }) {
+    ensureStyles();
+    return (_jsx("span", { className: "dsh-spin", style: {
+            display: 'inline-block',
+            width: size,
+            height: size,
+            border: `2px solid ${T.border}`,
+            borderTopColor: T.accent,
+            borderRadius: '50%',
+        } }));
+}
+// ─── EmptyState ────────────────────────────────────────────────
+export function EmptyState({ icon, message, }) {
+    return (_jsxs("div", { style: {
+            textAlign: 'center',
+            padding: '36px 16px',
+            color: T.muted,
+        }, children: [icon !== undefined && (_jsx("div", { style: { fontSize: 36, marginBottom: 10, opacity: 0.4 }, children: icon })), _jsx("div", { style: { fontSize: 13 }, children: message })] }));
+}
+// ─── SectionTitle ──────────────────────────────────────────────
+export function SectionTitle({ icon, children, actions, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginTop: 6,
+            marginBottom: 8,
+        }, children: [_jsxs("span", { style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                }, children: [icon !== undefined && _jsx("span", { children: icon }), children] }), actions] }));
+}
+// ─── Table helpers ─────────────────────────────────────────────
+export const tableStyles = {
+    table: {
+        borderCollapse: 'collapse',
+        width: '100%',
+    },
+    th: {
+        textAlign: 'left',
+        padding: '8px 12px 8px 0',
+        fontWeight: 600,
+        fontSize: 12,
+        color: T.muted,
+        borderBottom: `1px solid ${T.border}`,
+    },
+    td: {
+        padding: '8px 12px 8px 0',
+        fontSize: 13,
+        borderBottom: '1px solid rgba(128,128,128,0.08)',
+    },
+    clickRow: { cursor: 'pointer' },
+};
+// ─── CodeBlock ─────────────────────────────────────────────────
+export function CodeBlock({ children, maxHeight = 200, style, }) {
+    return (_jsx("pre", { style: {
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontSize: 12,
+            maxHeight,
+            overflow: 'auto',
+            padding: 10,
+            borderRadius: 7,
+            background: 'rgba(128,128,128,0.06)',
+            border: `1px solid ${T.border}`,
+            margin: 0,
+            ...style,
+        }, children: children }));
+}
+// ─── ProgressBar ───────────────────────────────────────────────
+export function ProgressBar({ pct, color, height = 18, }) {
+    return (_jsx("div", { style: {
+            width: '100%',
+            height,
+            background: 'rgba(128,128,128,0.12)',
+            borderRadius: 5,
+            overflow: 'hidden',
+            position: 'relative',
+        }, children: _jsx("div", { style: {
+                width: `${Math.min(pct, 100)}%`,
+                height: '100%',
+                background: color ?? T.accent,
+                borderRadius: 5,
+                transition: 'width 0.3s ease',
+            } }) }));
+}
+// ─── Field label ───────────────────────────────────────────────
+export function Field({ label, children, hint, }) {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("label", { style: { fontSize: 12, fontWeight: 600, color: T.text }, children: label }), children, hint !== undefined && (_jsx("span", { style: { fontSize: 11, color: T.muted }, children: hint }))] }));
+}
+// ─── usePanel hook (shared fetch logic) ────────────────────────
+export function usePanel(path) {
+    const [payload, setPayload] = useState(null);
+    const [error, setError] = useState(null);
+    const [tick, setTick] = useState(0);
+    const reload = useCallback(() => setTick((v) => v + 1), []);
+    useEffect(() => {
+        const c = new AbortController();
+        setError(null);
+        fetch(path, { signal: c.signal })
+            .then(async (r) => {
+            if (!r.ok)
+                throw new Error(String(r.status));
+            return r.json();
+        })
+            .then((p) => {
+            if (!c.signal.aborted)
+                setPayload(p);
+        })
+            .catch((e) => {
+            if (!c.signal.aborted)
+                setPayload(null), setError(e instanceof Error ? e.message : String(e));
+        });
+        return () => c.abort();
+    }, [tick, path]);
+    return useMemo(() => ({ payload, error, reload }), [payload, error, reload]);
+}