dsh-tool-stats 0.2.1 → 0.4.0

package/lib/client/view.d.ts

@@ -1,27 +1,10 @@
 /**
- * Pure rendering half of the toolStats page.
- *
- * Separate from `index.tsx` so a static render can assert in Node what the page draws —
- * the shipped bundle is a loader factory only a browser can run. Every user-visible
- * string comes from the `t` seat the renderer binds from this plugin's namespace, so the
- * page follows the UI language; no copy is hardcoded here.
- *
+ * Pure rendering half of the toolStats page. Uses shared UI kit.
  * @module client/view
  */
-import type { PanelPayload } from '../types.js';
-/** The translate seat the renderer binds from this plugin's locale namespace. */
+import type { ReactNode } from 'react';
 export type Translate = (key: string, params?: Record<string, unknown>) => string;
 export interface PanelProps {
-    /** Bound translate function for this plugin's namespace. */
     t: Translate;
 }
-interface PanelState {
-    payload: PanelPayload | null;
-    error: string | null;
-}
-/** Fetch the host panel payload; `reload` re-runs the request. */
-export declare function usePanel(): PanelState & {
-    reload: () => void;
-};
-export declare function ToolStatsPanel({ t }: PanelProps): import("react").JSX.Element;
-export {};
+export declare function ToolStatsPanel({ t }: PanelProps): ReactNode;

package/lib/client/view.js

@@ -1,58 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Pure rendering half of the toolStats page.
- *
- * Separate from `index.tsx` so a static render can assert in Node what the page draws —
- * the shipped bundle is a loader factory only a browser can run. Every user-visible
- * string comes from the `t` seat the renderer binds from this plugin's namespace, so the
- * page follows the UI language; no copy is hardcoded here.
- *
+ * Pure rendering half of the toolStats page. Uses shared UI kit.
  * @module client/view
  */
-import { useCallback, useEffect, useState } from 'react';
-/** Panel route registered by the host half on the web connection. */
-const PANEL_PATH = "/api/stats.panel";
-const wrap = { display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 760, fontFamily: 'inherit' };
-const head = { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' };
-const muted = { fontSize: 12, opacity: 0.75 };
-const table = { borderCollapse: 'collapse', width: '100%' };
-const th = { textAlign: 'left', padding: '4px 10px 4px 0', fontWeight: 600, fontSize: 12, opacity: 0.8, borderBottom: '0.5px solid rgba(128,128,128,0.4)' };
-const td = { padding: '6px 10px 6px 0', fontSize: 13, borderBottom: '0.5px solid rgba(128,128,128,0.18)' };
-const list = { margin: 0, paddingLeft: 18, fontSize: 13 };
-/** Fetch the host panel payload; `reload` re-runs the request. */
-export function usePanel() {
-    const [state, setState] = useState({ payload: null, error: null });
-    const [tick, setTick] = useState(0);
-    const reload = useCallback(() => setTick((value) => value + 1), []);
-    useEffect(() => {
-        const controller = new AbortController();
-        setState((previous) => ({ ...previous, error: null }));
-        fetch(PANEL_PATH, { signal: controller.signal })
-            .then(async (response) => {
-            if (!response.ok)
-                throw new Error(String(response.status));
-            return response.json();
-        })
-            .then((payload) => {
-            if (!controller.signal.aborted)
-                setState({ payload, error: null });
-        })
-            .catch((cause) => {
-            if (controller.signal.aborted)
-                return;
-            setState({ payload: null, error: cause instanceof Error ? cause.message : String(cause) });
-        });
-        return () => controller.abort();
-    }, [tick]);
-    return { ...state, reload };
+import { useCallback, useState } from 'react';
+import { Badge, Button, Card, ConfirmDialog, EmptyState, Modal, SectionTitle, Spinner, StatCard, ToastProvider, tableStyles, usePanel, useToast, } from './ui.js';
+const PANEL_PATH = '/api/stats.panel';
+const DETAIL_PATH = '/api/stats.detail';
+const EXPORT_PATH = '/api/stats.export';
+const CLEAR_PATH = '/api/stats.clear';
+function ToolModal({ tool, t, onClose }) {
+    const [detail, setDetail] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useCallback(() => {
+        setLoading(true);
+        fetch(`${DETAIL_PATH}?tool=${encodeURIComponent(tool)}`)
+            .then(async (r) => { if (r.ok)
+            setDetail(await r.json()); })
+            .finally(() => setLoading(false));
+    }, [tool])();
+    return (_jsx(Modal, { title: `${t('tool')}: ${tool}`, onClose: onClose, width: 600, children: loading ? _jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: 20 }, children: _jsx(Spinner, { size: 24 }) })
+            : detail === null ? _jsx(EmptyState, { message: t('notFound') })
+                : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [detail.errorBreakdown.length > 0 && (_jsx(Card, { title: t('errorBreakdown'), children: detail.errorBreakdown.map((e, i) => (_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }, children: [_jsxs(Badge, { color: "error", children: ["\u00D7", e.count] }), _jsx("span", { style: { fontSize: 12 }, children: e.message })] }, i))) })), _jsx(Card, { title: t('recentCalls'), children: _jsx("table", { style: tableStyles.table, children: _jsx("tbody", { children: detail.recentCalls.slice(0, 15).map((c, i) => (_jsxs("tr", { children: [_jsx("td", { style: tableStyles.td, children: c.success ? _jsx(Badge, { color: "success", children: "\u2713" }) : _jsx(Badge, { color: "error", children: "\u2717" }) }), _jsxs("td", { style: tableStyles.td, children: [c.latencyMs, "ms"] }), _jsx("td", { style: tableStyles.td, children: new Date(c.timestamp).toLocaleTimeString() }), _jsx("td", { style: { ...tableStyles.td, fontSize: 10, opacity: 0.6 }, children: c.errorMessage?.slice(0, 60) })] }, i))) }) }) })] })) }));
 }
-export function ToolStatsPanel({ t }) {
-    const { payload, error, reload } = usePanel();
-    const header = (_jsxs("header", { style: head, children: [_jsx("strong", { style: { fontSize: 13 }, children: t('title') }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", onClick: reload, style: { fontSize: 12 }, children: t('refresh') })] }));
-    if (error !== null) {
-        return (_jsxs("div", { style: wrap, children: [header, _jsxs("p", { role: "alert", style: { margin: 0, fontSize: 13 }, children: [t('failed'), ": ", error] }), _jsx("button", { type: "button", onClick: reload, style: { alignSelf: 'flex-start', fontSize: 12 }, children: t('retry') })] }));
-    }
+function ToolStatsPanelInner({ t }) {
+    const { payload, error, reload } = usePanel(PANEL_PATH);
+    const toast = useToast();
+    const [toolModal, setToolModal] = useState(null);
+    const [confirmClear, setConfirmClear] = useState(false);
+    const handleClear = useCallback(async () => {
+        const r = await fetch(CLEAR_PATH, { method: 'POST' });
+        if (r.ok) {
+            toast('success', t('cleared'));
+            reload();
+        }
+    }, [t, toast, reload]);
+    const header = (_jsxs("header", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }, children: [_jsxs("strong", { style: { fontSize: 15 }, children: ["\uD83D\uDD27 ", t('title')] }), _jsx("span", { style: { flex: 1 } }), _jsx("a", { href: EXPORT_PATH, download: true, children: _jsx(Button, { variant: "secondary", size: "sm", children: t('export') }) }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => setConfirmClear(true), children: t('clear') }), _jsx(Button, { variant: "secondary", size: "sm", onClick: reload, children: t('refresh') })] }));
+    if (error !== null)
+        return _jsxs("div", { style: { maxWidth: 820 }, children: [header, _jsx(Card, { children: _jsxs("p", { role: "alert", style: { margin: 0, fontSize: 13, color: 'var(--error, #e53935)' }, children: [t('failed'), ": ", error] }) })] });
     if (payload === null)
-        return _jsx("p", { style: muted, "aria-live": "polite", children: t('loading') });
-    return (_jsxs("div", { style: wrap, children: [header, payload.tools.length === 0 ? (_jsx("p", { style: { margin: 0, fontSize: 13, opacity: 0.8 }, children: t('empty') })) : (_jsxs("table", { style: table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: th, children: t('tool') }), _jsx("th", { style: th, children: t('calls') }), _jsx("th", { style: th, children: t('failRate') }), _jsx("th", { style: th, children: "p50" }), _jsx("th", { style: th, children: "p95" })] }) }), _jsx("tbody", { children: payload.tools.map((row) => (_jsxs("tr", { children: [_jsx("td", { style: td, children: _jsx("code", { style: { fontSize: 11 }, children: row.tool }) }), _jsx("td", { style: td, children: row.invocations }), _jsxs("td", { style: td, children: [Math.round(row.failureRate * 100), "%"] }), _jsxs("td", { style: td, children: [row.p50Latency, "ms"] }), _jsxs("td", { style: td, children: [row.p95Latency, "ms"] })] }, row.tool))) })] })), payload.deadTools.length > 0 && (_jsxs(_Fragment, { children: [_jsx("strong", { style: { fontSize: 13 }, children: t('deadTools') }), _jsx("ul", { style: list, children: payload.deadTools.map((row) => _jsx("li", { children: _jsx("code", { style: { fontSize: 11 }, children: row.tool }) }, row.tool)) })] })), payload.failingTools.length > 0 && (_jsxs(_Fragment, { children: [_jsx("strong", { style: { fontSize: 13 }, children: t('failingTools') }), _jsx("ul", { style: list, children: payload.failingTools.map((row) => (_jsxs("li", { children: [_jsx("code", { style: { fontSize: 11 }, children: row.tool }), " \u00B7 ", Math.round(row.failureRate * 100), "%"] }, row.tool))) })] })), payload.recommendations.length > 0 && (_jsxs(_Fragment, { children: [_jsx("strong", { style: { fontSize: 13 }, children: t('recommendations') }), _jsx("ul", { style: list, children: payload.recommendations.map((row, index) => _jsx("li", { children: row.message }, index)) })] }))] }));
+        return _jsxs("div", { style: { maxWidth: 820 }, children: [header, _jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: 40 }, children: _jsx(Spinner, { size: 28 }) })] });
+    const o = payload.overview;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 820 }, children: [header, payload.alerts.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: payload.alerts.map((a, i) => (_jsx(Card, { style: { borderColor: a.level === 'error' ? 'var(--error, #e53935)' : 'var(--warning, #ed6c02)' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(Badge, { color: a.level === 'error' ? 'error' : 'warning', children: a.level === 'error' ? '🔴' : '🟡' }), _jsx("strong", { children: a.tool }), _jsx("span", { style: { fontSize: 12 }, children: a.message })] }) }, i))) })), _jsxs("div", { style: { display: 'flex', gap: 10, flexWrap: 'wrap' }, children: [_jsx(StatCard, { value: o.totalCalls, label: t('totalCalls') }), _jsx(StatCard, { value: o.totalFailures, label: t('totalFailures'), color: o.totalFailures > 0 ? 'var(--error, #e53935)' : undefined }), _jsx(StatCard, { value: `${Math.round(o.overallFailureRate * 100)}%`, label: t('failRate') }), _jsx(StatCard, { value: o.activeSessions, label: t('sessions') }), _jsx(StatCard, { value: o.avgLatencyMs, unit: "ms", label: t('avgLatency') })] }), payload.tools.length === 0 ? _jsx(EmptyState, { icon: "\uD83D\uDCED", message: t('empty') }) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { icon: "\uD83D\uDCCA", children: t('tools') }), _jsx(Card, { padding: 0, children: _jsxs("table", { style: tableStyles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: tableStyles.th, children: t('tool') }), _jsx("th", { style: tableStyles.th, children: t('calls') }), _jsx("th", { style: tableStyles.th, children: t('failRate') }), _jsx("th", { style: tableStyles.th, children: "p50" }), _jsx("th", { style: tableStyles.th, children: "p95" })] }) }), _jsx("tbody", { children: payload.tools.map((row) => (_jsxs("tr", { style: tableStyles.clickRow, onClick: () => setToolModal(row.tool), children: [_jsx("td", { style: tableStyles.td, children: _jsx("code", { style: { fontSize: 11 }, children: row.tool }) }), _jsx("td", { style: tableStyles.td, children: row.invocations }), _jsxs("td", { style: { ...tableStyles.td, color: row.failureRate > 0.3 ? 'var(--error, #e53935)' : undefined }, children: [Math.round(row.failureRate * 100), "%"] }), _jsxs("td", { style: tableStyles.td, children: [row.p50Latency, "ms"] }), _jsxs("td", { style: tableStyles.td, children: [row.p95Latency, "ms"] })] }, row.tool))) })] }) })] })), payload.deadTools.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { icon: "\uD83D\uDC80", children: t('deadTools') }), _jsx(Card, { children: payload.deadTools.map((row) => (_jsxs("div", { style: { marginBottom: 4 }, children: [_jsx("code", { style: { fontSize: 11 }, children: row.tool }), " \u2014 ", row.sessionsSinceLastUse, " ", t('sessionsUnused')] }, row.tool))) })] })), payload.failingTools.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { icon: "\u26A0\uFE0F", children: t('failingTools') }), _jsx(Card, { children: payload.failingTools.map((row) => (_jsxs("div", { style: { marginBottom: 4 }, children: [_jsx("code", { style: { fontSize: 11 }, children: row.tool }), " \u00B7 ", Math.round(row.failureRate * 100), "%", row.lastError ? ` — ${row.lastError.slice(0, 60)}` : ''] }, row.tool))) })] })), payload.recommendations.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { icon: "\uD83D\uDCA1", children: t('recommendations') }), _jsx(Card, { children: payload.recommendations.map((row, i) => _jsx("div", { style: { marginBottom: 4 }, children: row.message }, i)) })] })), toolModal !== null && _jsx(ToolModal, { tool: toolModal, t: t, onClose: () => setToolModal(null) }), confirmClear && _jsx(ConfirmDialog, { title: t('clear'), message: t('confirmClear'), confirmLabel: t('clear'), danger: true, onConfirm: handleClear, onClose: () => setConfirmClear(false) })] }));
+}
+export function ToolStatsPanel({ t }) {
+    return _jsx(ToastProvider, { children: _jsx(ToolStatsPanelInner, { t: t }) });
 }

package/lib/index.d.ts

@@ -11,5 +11,12 @@ export interface StatsService {
         errorMessage?: string;
     }): void;
     summary(configuredTools?: string[]): ReturnType<ToolStats['summary']>;
+    query(range?: {
+        from?: number | undefined;
+        to?: number | undefined;
+    }, configuredTools?: string[]): ReturnType<ToolStats['summary']>;
+    detail(toolName: string): ReturnType<ToolStats['detail']>;
+    exportCSV(): string;
+    clearData(): void;
 }
 export declare function apply(ctx: Context): void;

package/lib/index.js

@@ -8,6 +8,10 @@ export function apply(ctx) {
     const service = {
         record: (call) => stats.record(call),
         summary: (configuredTools) => stats.summary(configuredTools ?? []),
+        query: (range, configuredTools) => stats.query(range, configuredTools ?? []),
+        detail: (toolName) => stats.detail(toolName),
+        exportCSV: () => stats.exportCSV(),
+        clearData: () => stats.clearData(),
     };
     ctx.provide('toolStats', service);
     registerStatsRoutes(ctx, service);

package/lib/routes.d.ts

@@ -2,4 +2,7 @@ import type { Context } from '@deepseek-ai/cordis';
 import type { StatsService } from './index.js';
 import { STATS_PANEL_PATH } from './stats.js';
 export { STATS_PANEL_PATH };
+export declare const STATS_DETAIL_PATH = "/api/stats.detail";
+export declare const STATS_EXPORT_PATH = "/api/stats.export";
+export declare const STATS_CLEAR_PATH = "/api/stats.clear";
 export declare function registerStatsRoutes(ctx: Context, stats: StatsService): void;

package/lib/routes.js

@@ -1,15 +1,63 @@
 import { STATS_PANEL_PATH } from './stats.js';
 export { STATS_PANEL_PATH };
+export const STATS_DETAIL_PATH = '/api/stats.detail';
+export const STATS_EXPORT_PATH = '/api/stats.export';
+export const STATS_CLEAR_PATH = '/api/stats.clear';
 export function registerStatsRoutes(ctx, stats) {
     ctx.inject(['connection'], (connectionCtx) => {
         const connection = connectionCtx.connection;
+        // Panel overview
         connection.fetch.register({
             path: STATS_PANEL_PATH,
             methods: ['GET'],
             requestBody: 'buffered',
-            fetch: () => Promise.resolve(Response.json(stats.summary(), {
-                headers: { 'cache-control': 'no-store' },
-            })),
+            fetch: (req) => {
+                const url = new URL(req.url, 'http://localhost');
+                const from = url.searchParams.get('from');
+                const to = url.searchParams.get('to');
+                const range = (from || to) ? { from: from ? Number(from) : undefined, to: to ? Number(to) : undefined } : undefined;
+                return Promise.resolve(Response.json(range ? stats.query(range) : stats.summary(), {
+                    headers: { 'cache-control': 'no-store' },
+                }));
+            },
+        });
+        // Tool detail
+        connection.fetch.register({
+            path: STATS_DETAIL_PATH,
+            methods: ['GET'],
+            requestBody: 'buffered',
+            fetch: (req) => {
+                const url = new URL(req.url, 'http://localhost');
+                const tool = url.searchParams.get('tool');
+                if (!tool)
+                    return Promise.resolve(Response.json({ error: 'tool required' }, { status: 400 }));
+                const detail = stats.detail(tool);
+                if (!detail)
+                    return Promise.resolve(Response.json({ error: 'not found' }, { status: 404 }));
+                return Promise.resolve(Response.json(detail, { headers: { 'cache-control': 'no-store' } }));
+            },
+        });
+        // Export CSV
+        connection.fetch.register({
+            path: STATS_EXPORT_PATH,
+            methods: ['GET'],
+            requestBody: 'buffered',
+            fetch: () => {
+                const csv = stats.exportCSV();
+                return Promise.resolve(new Response(csv, {
+                    headers: { 'content-type': 'text/csv', 'content-disposition': 'attachment; filename=tool-stats.csv' },
+                }));
+            },
+        });
+        // Clear data
+        connection.fetch.register({
+            path: STATS_CLEAR_PATH,
+            methods: ['POST'],
+            requestBody: 'buffered',
+            fetch: () => {
+                stats.clearData();
+                return Promise.resolve(Response.json({ ok: true }));
+            },
         });
     });
 }

package/lib/stats.d.ts

@@ -1,4 +1,4 @@
-import type { ToolCall, PanelPayload } from './types.js';
+import type { ToolCall, PanelPayload, ToolDetail, TimeRange } from './types.js';
 export declare const STATS_PANEL_PATH = "/api/stats.panel";
 export declare class ToolStats {
     private projectDir;
@@ -6,4 +6,12 @@ export declare class ToolStats {
     constructor(projectDir: string);
     record(call: ToolCall): void;
     summary(configuredTools?: string[]): PanelPayload;
+    /** Query calls with optional time range. */
+    query(range?: TimeRange, configuredTools?: string[]): PanelPayload;
+    /** Get detailed stats for one tool. */
+    detail(toolName: string): ToolDetail | null;
+    /** Export all calls as CSV. */
+    exportCSV(): string;
+    /** Clear all recorded data. */
+    clearData(): void;
 }

package/lib/stats.js

@@ -1,5 +1,5 @@
 import { StatsStore } from './store.js';
-import { aggregate, findDeadTools, findFailingTools, recommend } from './analyzer.js';
+import { aggregate, findDeadTools, findFailingTools, recommend, toolDetail, generateAlerts, overview } from './analyzer.js';
 export const STATS_PANEL_PATH = '/api/stats.panel';
 export class ToolStats {
     projectDir;
@@ -20,6 +20,38 @@ export class ToolStats {
             deadTools: findDeadTools(configuredTools, calls),
             failingTools: findFailingTools(calls),
             recommendations: recommend(configuredTools, calls),
+            overview: overview(calls),
+            alerts: generateAlerts(calls),
         };
     }
+    /** Query calls with optional time range. */
+    query(range, configuredTools = []) {
+        const calls = this.store.query(range?.from, range?.to);
+        const counters = aggregate(calls);
+        const tools = [...counters.values()].sort((a, b) => b.invocations - a.invocations);
+        return {
+            tools,
+            deadTools: findDeadTools(configuredTools, calls),
+            failingTools: findFailingTools(calls),
+            recommendations: recommend(configuredTools, calls),
+            overview: overview(calls),
+            alerts: generateAlerts(calls),
+        };
+    }
+    /** Get detailed stats for one tool. */
+    detail(toolName) {
+        const calls = this.store.readAll();
+        return toolDetail(calls, toolName);
+    }
+    /** Export all calls as CSV. */
+    exportCSV() {
+        const calls = this.store.readAll();
+        const header = 'tool,timestamp,success,latencyMs,sessionId,errorMessage';
+        const rows = calls.map((c) => [c.tool, c.timestamp, c.success, c.latencyMs, c.sessionId, c.errorMessage ?? ''].join(','));
+        return [header, ...rows].join('\n');
+    }
+    /** Clear all recorded data. */
+    clearData() {
+        this.store.clear();
+    }
 }