agent-nuvira 2.7.0 → 2.7.2

package/dist/web-dashboard/src/components/RequestsPanel.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RequestsPanel;
+/**
+ * Requests Panel (Nuvira-Router P3-M3.2) — per provider × model × action
+ * request aggregates from the action-telemetry JSONL (the SAME file the Models
+ * panel reads, so both panels always agree): requests, p50/p95/p99 latency,
+ * error rate, measured cost, and correlation ids for traceability.
+ *
+ * Degrades cleanly: an older server that doesn't send `requests` shows the
+ * empty state instead of crashing (established jsonOrNull guard pattern).
+ */
+const react_1 = require("react");
+const ACTION_ICONS = {
+    chat: '💬', execute: '⚙️', plan: '🗺️', edit: '✏️', skill: '🧩', learn: '📚',
+    ci: '🔁', doctor: '🩺', probe: '🔭', 'spot-check': '🧪', telemetry: '📡',
+    usage: '🧮', 'ide-chat': '💬', 'ide-inline': '✍️', 'ide-execute': '⚙️',
+};
+function fmtTime(ts) {
+    return new Date(ts).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+function fmtMs(v) {
+    return v !== undefined ? `${v}ms` : '—';
+}
+function errorColor(rate) {
+    if (rate === 0)
+        return '#3fb950';
+    if (rate < 0.2)
+        return '#d29922';
+    return '#f85149';
+}
+function RequestsStats({ data }) {
+    const rows = data.rows;
+    const totalRequests = rows.reduce((a, r) => a + r.requests, 0);
+    const totalFailures = rows.reduce((a, r) => a + Math.round(r.errorRate * r.requests), 0);
+    const totalCost = rows.reduce((a, r) => a + (r.costUsd ?? 0), 0);
+    const latencies = rows.flatMap((r) => (r.latency ? [r.latency.avg] : []));
+    const avgLatency = latencies.length > 0
+        ? Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length)
+        : undefined;
+    const actions = new Set(rows.map((r) => r.action)).size;
+    return (<div className="stats-grid" style={{ marginBottom: 16 }}>
+      <div className="stat-card">
+        <span className="stat-icon">📨</span>
+        <div className="stat-body">
+          <div className="stat-value">{totalRequests.toLocaleString()}</div>
+          <div className="stat-label">Requests</div>
+        </div>
+      </div>
+      <div className="stat-card">
+        <span className="stat-icon">🎯</span>
+        <div className="stat-body">
+          <div className="stat-value">{rows.length}</div>
+          <div className="stat-label">provider × model × action groups</div>
+        </div>
+      </div>
+      <div className="stat-card">
+        <span className="stat-icon">⚡</span>
+        <div className="stat-body">
+          <div className="stat-value" style={{ color: avgLatency !== undefined ? '#3fb950' : '#8b949e' }}>
+            {avgLatency !== undefined ? `${avgLatency}ms` : '—'}
+          </div>
+          <div className="stat-label">Avg latency{avgLatency !== undefined ? ` (${latencies.length} groups)` : ' (no samples)'}</div>
+        </div>
+      </div>
+      <div className="stat-card">
+        <span className="stat-icon">📛</span>
+        <div className="stat-body">
+          <div className="stat-value" style={{ color: errorColor(totalRequests > 0 ? totalFailures / totalRequests : 0) }}>
+            {totalRequests > 0 ? `${((totalFailures / totalRequests) * 100).toFixed(1)}%` : '—'}
+          </div>
+          <div className="stat-label">Overall error rate ({totalFailures.toLocaleString()} failures)</div>
+        </div>
+      </div>
+      <div className="stat-card">
+        <span className="stat-icon">💰</span>
+        <div className="stat-body">
+          <div className="stat-value" style={{ color: totalCost > 0 ? '#d29922' : '#8b949e' }}>
+            {totalCost > 0 ? `$${totalCost.toFixed(4)}` : '—'}
+          </div>
+          <div className="stat-label">Measured cost{actions > 0 ? ` · ${actions} actions` : ''}</div>
+        </div>
+      </div>
+    </div>);
+}
+function RequestsPanel({ data }) {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [actionFilter, setActionFilter] = (0, react_1.useState)('all');
+    const requests = data?.requests;
+    const rows = (0, react_1.useMemo)(() => {
+        if (!requests)
+            return [];
+        const q = query.trim().toLowerCase();
+        return requests.rows.filter((r) => {
+            if (actionFilter !== 'all' && r.action !== actionFilter)
+                return false;
+            if (!q)
+                return true;
+            return `${r.provider} ${r.model} ${r.action}`.toLowerCase().includes(q);
+        });
+    }, [requests, query, actionFilter]);
+    if (!data) {
+        return <div className="loading-state"><p>Loading requests...</p></div>;
+    }
+    if (!requests || !requests.enabled || requests.rows.length === 0) {
+        return (<div className="empty-state" style={{ padding: '40px 24px', textAlign: 'center' }}>
+        <div style={{ fontSize: 28, marginBottom: 10 }}>📨</div>
+        <h2 className="section-title" style={{ marginTop: 0 }}>Requests — per provider × model × action</h2>
+        <p className="section-description" style={{ maxWidth: 560, margin: '0 auto' }}>
+          No request telemetry yet. As you use <strong>chat</strong>, <strong>execute</strong>,{' '}
+          <strong>plan</strong> and <strong>edit</strong> under Auto routing, every call writes to the
+          action-telemetry log and this panel aggregates it: request counts, p50/p95/p99 latency, error
+          rate and measured cost — the same feed that drives the Models panel.
+        </p>
+      </div>);
+    }
+    const actions = [...new Set(requests.rows.map((r) => r.action))].sort();
+    return (<>
+      <h2 className="section-title">📨 Requests — per provider × model × action</h2>
+      <p className="section-description">
+        Aggregated from the same action-telemetry log as the Models panel — every Auto-routed call,
+        grouped by action × provider × model. Latency percentiles appear once ≥3 samples exist; cost
+        when the caller reported usage.
+      </p>
+
+      <RequestsStats data={requests}/>
+
+      <div style={{ display: 'flex', gap: 12, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center' }}>
+        <select value={actionFilter} onChange={(e) => setActionFilter(e.target.value)} aria-label="Filter by action" style={{
+            background: '#161b22', color: '#e6edf3', border: '1px solid #30363d',
+            borderRadius: 8, padding: '8px 10px', fontSize: 13, cursor: 'pointer',
+        }}>
+          <option value="all">All actions</option>
+          {actions.map((a) => (<option key={a} value={a}>{ACTION_ICONS[a] || '🎯'} {a}</option>))}
+        </select>
+        <div style={{ flex: 1, minWidth: 220, position: 'relative' }}>
+          <span style={{ position: 'absolute', left: 10, top: 8, color: '#6e7681', fontSize: 13 }}>🔍</span>
+          <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search provider, model or action..." style={{
+            width: '100%', padding: '8px 12px 8px 32px', background: '#161b22',
+            border: '1px solid #30363d', borderRadius: 8, color: '#e6edf3',
+            fontSize: 13, outline: 'none',
+        }}/>
+        </div>
+        <span style={{ fontSize: 12, color: '#8b949e', whiteSpace: 'nowrap' }}>
+          {rows.length} of {requests.rows.length} groups
+        </span>
+      </div>
+
+      <div style={{ overflowX: 'auto' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid #21262d', color: '#8b949e', textAlign: 'left' }}>
+              <th style={{ padding: '8px 12px', fontWeight: 500 }}>Action</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500 }}>Provider</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500 }}>Model</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>Requests</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>Error rate</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>Latency avg</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>p50</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>p95</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>p99</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>Measured cost</th>
+              <th style={{ padding: '8px 12px', fontWeight: 500, textAlign: 'right' }}>Last seen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length === 0 ? (<tr>
+                <td colSpan={11} style={{ padding: 28, textAlign: 'center', color: '#6e7681' }}>
+                  No request groups match your filter.
+                </td>
+              </tr>) : (rows.map((r) => (<tr key={`${r.action}|${r.provider}|${r.model}`} style={{ borderBottom: '1px solid #21262d' }}>
+                  <td style={{ padding: '8px 12px', whiteSpace: 'nowrap' }}>
+                    <span style={{
+                fontSize: 11, padding: '2px 8px', borderRadius: 8,
+                background: '#21262d', color: '#c9d1d9', border: '1px solid #30363d',
+            }}>
+                      {ACTION_ICONS[r.action] || '🎯'} {r.action}
+                    </span>
+                  </td>
+                  <td style={{ padding: '8px 12px', color: '#e6edf3', whiteSpace: 'nowrap' }}>{r.provider}</td>
+                  <td style={{
+                padding: '8px 12px', color: '#8b949e', fontFamily: "'SFMono-Regular', Consolas, monospace",
+                fontSize: 12, maxWidth: 260, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+            }} title={r.callIds.length > 0 ? `Correlation ids: ${r.callIds.join(', ')}` : undefined}>
+                    {r.model.length > 42 ? r.model.slice(0, 39) + '…' : r.model}
+                    {r.callIds.length > 0 && (<span style={{ color: '#6e7681', marginLeft: 6 }} title={r.callIds.join(', ')}>🔗{r.callIds.length}</span>)}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 12 }}>{r.requests}</td>
+                  <td style={{
+                padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace",
+                fontSize: 12, color: errorColor(r.errorRate),
+            }}>
+                    {(r.errorRate * 100).toFixed(1)}%
+                    {(r.partials ?? 0) > 0 && (<span title={`⏸ ${r.partials} mid-stream interruption(s) — started streaming, died before finish; the router deprioritizes flaky providers (P4 M4.4)`} style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 3,
+                    marginLeft: 6, fontSize: 10, padding: '1px 6px', borderRadius: 8, whiteSpace: 'nowrap',
+                    background: '#21122e', border: '1px solid #bc8cff', color: '#bc8cff',
+                }}>
+                        ⏸ {r.partials}
+                      </span>)}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 12 }}>
+                    {fmtMs(r.latency?.avg)}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 12 }}>
+                    {r.latency && r.latency.samples >= 3 ? fmtMs(r.latency.p50) : '—'}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 12 }}>
+                    {r.latency && r.latency.samples >= 3 ? fmtMs(r.latency.p95) : '—'}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 12 }}>
+                    {r.latency && r.latency.samples >= 3 ? fmtMs(r.latency.p99) : '—'}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 12, color: r.costUsd ? '#d29922' : '#6e7681' }}>
+                    {r.costUsd !== undefined ? `$${r.costUsd.toFixed(4)}` : '—'}
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', color: '#6e7681', fontSize: 11, whiteSpace: 'nowrap' }}>
+                    {fmtTime(r.lastAt)}
+                  </td>
+                </tr>)))}
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ textAlign: 'center', fontSize: 12, color: '#484f58', marginTop: 12 }}>
+        Auto-refreshes with the dashboard feed · percentile columns need ≥3 latency samples per group
+      </div>
+    </>);
+}

package/dist/web-dashboard/src/components/RequestsPanel.test.js

@@ -0,0 +1,103 @@
+"use strict";
+/**
+ * Unit tests for the Requests Panel (Nuvira-Router P3-M3.2).
+ * Covers: empty state (no data / older server), stats cards, row rendering,
+ * the ≥3-samples latency percentile gate, and the action/search filters.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const RequestsPanel_1 = __importDefault(require("./RequestsPanel"));
+const makeRequests = (overrides = {}) => ({
+    enabled: true,
+    total: 3,
+    rows: [
+        {
+            provider: 'groq', model: 'llama-3.3-70b-versatile', action: 'chat',
+            requests: 10, errorRate: 0, partials: 3, costUsd: 0.00012, costCalls: 10,
+            latency: { avg: 420, samples: 5, p50: 400, p95: 620, p99: 700 },
+            callIds: ['call-1', 'call-2'], lastAt: 1750000000000,
+        },
+        {
+            provider: 'gemini', model: 'gemini-2.0-flash', action: 'execute',
+            requests: 4, errorRate: 0.25, partials: 0, costUsd: 0.0008, costCalls: 4,
+            latency: { avg: 900, samples: 2 }, // < 3 samples → percentiles hidden
+            callIds: [], lastAt: 1749990000000,
+        },
+        {
+            provider: 'nim', model: 'llama-3.1-8b-instruct', action: 'plan',
+            requests: 2, errorRate: 0.5, partials: 0, costCalls: 0,
+            latency: undefined, callIds: [], lastAt: 1749980000000,
+        },
+    ],
+    updatedAt: Date.now(),
+    ...overrides,
+});
+const makeData = (requests) => ({
+    cost: { totalRequests: 0, totalCost: 0, totalTokens: 0, byProvider: {}, byModel: {}, byProviderMeasured: {}, measuredCalls: 0, estimatedCalls: 0, measuredCost: 0, estimatedCost: 0, recent: [] },
+    history: { total: 0, recent: [] },
+    benchmarks: { totalRuns: 0, latest: null, runs: [] },
+    memory: { total: 0, avgScore: 0, byFingerprint: {} },
+    health: { patterns: 0, feedback: 0, vectors: 0, agentStats: null, memoryDir: '' },
+    requests,
+    serverTime: Date.now(),
+});
+(0, vitest_1.describe)('RequestsPanel', () => {
+    (0, vitest_1.afterEach)(() => {
+        (0, react_1.cleanup)();
+        vitest_1.vi.restoreAllMocks();
+    });
+    (0, vitest_1.it)('shows the empty state when the server sends no requests data (older server)', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(undefined)}/>);
+        (0, vitest_1.expect)(react_1.screen.getByText(/No request telemetry yet/i)).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders stats cards and per provider × model × action rows', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(makeRequests())}/>);
+        // Stats: 10 + 4 + 2 = 16 requests.
+        (0, vitest_1.expect)(react_1.screen.getByText('16')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('3')).toBeTruthy(); // groups
+        // Rows (action chips render as "💬 chat" — match on the substring; the
+        // action <select> also lists the action names, so assert multiplicity).
+        (0, vitest_1.expect)(react_1.screen.getByText('groq')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('gemini')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('nim')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getAllByText((c) => c.includes('chat')).length).toBeGreaterThan(0);
+        (0, vitest_1.expect)(react_1.screen.getAllByText((c) => c.includes('execute')).length).toBeGreaterThan(0);
+        (0, vitest_1.expect)(react_1.screen.getAllByText((c) => c.includes('plan')).length).toBeGreaterThan(0);
+    });
+    (0, vitest_1.it)('shows percentile columns only when ≥3 latency samples exist, else —', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(makeRequests())}/>);
+        // groq row has 5 samples → p95 = 620ms shown.
+        (0, vitest_1.expect)(react_1.screen.getByText('620ms')).toBeTruthy();
+        // gemini row has 2 samples → its p50 is a dash.
+        (0, vitest_1.expect)(react_1.screen.getAllByText('—').length).toBeGreaterThan(0);
+    });
+    (0, vitest_1.it)('shows a violet ⏸ partial chip on rows with mid-stream interruptions (P4 M4.4)', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(makeRequests())}/>);
+        // groq row has 3 partials → the ⏸ 3 chip renders with the flaky tooltip.
+        (0, vitest_1.expect)(react_1.screen.getByText(/⏸ 3/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByTitle(/mid-stream interruption\(s\)/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByTitle(/deprioritizes flaky providers/)).toBeTruthy();
+    });
+    (0, vitest_1.it)('filters by action via the select', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(makeRequests())}/>);
+        react_1.fireEvent.change(react_1.screen.getByLabelText('Filter by action'), { target: { value: 'execute' } });
+        (0, vitest_1.expect)(react_1.screen.queryByText('groq')).toBeNull();
+        (0, vitest_1.expect)(react_1.screen.getByText('gemini')).toBeTruthy();
+    });
+    (0, vitest_1.it)('filters by search query across provider/model/action', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(makeRequests())}/>);
+        react_1.fireEvent.change(react_1.screen.getByPlaceholderText('Search provider, model or action...'), { target: { value: 'gemini' } });
+        (0, vitest_1.expect)(react_1.screen.getByText('gemini')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.queryByText('groq')).toBeNull();
+    });
+    (0, vitest_1.it)('renders empty-state text when no rows match the filter', () => {
+        (0, react_1.render)(<RequestsPanel_1.default data={makeData(makeRequests())}/>);
+        react_1.fireEvent.change(react_1.screen.getByLabelText('Filter by action'), { target: { value: 'chat' } });
+        react_1.fireEvent.change(react_1.screen.getByPlaceholderText('Search provider, model or action...'), { target: { value: 'nim' } });
+        (0, vitest_1.expect)(react_1.screen.getByText(/No request groups match your filter/i)).toBeTruthy();
+    });
+});