agent-nuvira 2.7.0 → 2.7.2

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

@@ -0,0 +1,237 @@
+"use strict";
+/**
+ * MarkdownZeroDep — the ZERO-DEPENDENCY markdown fallback (Phase 1).
+ *
+ * The primary renderer is `Markdown.tsx` (react-markdown + remark-gfm +
+ * rehype-highlight — spec-complete, syntax-highlighted). This module is the
+ * original hand-rolled renderer, preserved so a dependency-free build is one
+ * import away: change ChatPage's `import Markdown from './Markdown.js'` to
+ * `import Markdown from './MarkdownZeroDep.js'` and no markdown packages are
+ * needed. It covers the common shapes (fenced code + copy, headings, lists,
+ * bold/italic, inline code, links, tables, blockquotes, hr) but is NOT
+ * CommonMark-complete (nested lists, ***bold italic***, autolinks,
+ * strikethrough, task lists) and has no syntax highlighting — the tradeoffs
+ * accepted for zero deps. Never uses dangerouslySetInnerHTML (React escaping
+ * + an href allowlist are the XSS guards).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MarkdownZeroDep;
+const react_1 = require("react");
+/** Split on ``` fences; everything outside becomes prose lines. */
+function splitBlocks(text) {
+    const blocks = [];
+    const fenceRe = /^```([\w+-]*)\s*$/;
+    const lines = text.split('\n');
+    let i = 0;
+    let prose = [];
+    const flushProse = () => {
+        if (prose.length > 0) {
+            blocks.push({ type: 'prose', lines: prose });
+            prose = [];
+        }
+    };
+    while (i < lines.length) {
+        const m = fenceRe.exec(lines[i].trim());
+        if (m) {
+            flushProse();
+            const lang = m[1] || 'text';
+            const code = [];
+            i += 1;
+            while (i < lines.length && !/^```\s*$/.test(lines[i].trim())) {
+                code.push(lines[i]);
+                i += 1;
+            }
+            i += 1; // closing fence
+            blocks.push({ type: 'code', lang, code: code.join('\n') });
+        }
+        else {
+            prose.push(lines[i]);
+            i += 1;
+        }
+    }
+    flushProse();
+    return blocks;
+}
+const SAFE_HREF = /^(https?:\/\/|mailto:)/i;
+/**
+ * Inline tokenizer: `code` first (so ** inside code stays literal), then
+ * **bold**, *italic*, [text](url). Everything else is plain text. Returns
+ * React nodes — no HTML strings, so no injection surface.
+ */
+function inline(text, keyPrefix) {
+    const nodes = [];
+    const re = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*\n]+\*)|(\[([^\]]+)\]\(([^)\s]+)\))/g;
+    let last = 0;
+    let m;
+    let k = 0;
+    while ((m = re.exec(text)) !== null) {
+        if (m.index > last)
+            nodes.push(text.slice(last, m.index));
+        const [, code, bold, ital, , linkText, linkHref] = m;
+        if (code !== undefined) {
+            nodes.push(<code key={`${keyPrefix}-c${k}`} className="md-inline-code">
+          {code.slice(1, -1)}
+        </code>);
+        }
+        else if (bold !== undefined) {
+            nodes.push(<strong key={`${keyPrefix}-b${k}`}>{bold.slice(2, -2)}</strong>);
+        }
+        else if (ital !== undefined) {
+            nodes.push(<em key={`${keyPrefix}-i${k}`}>{ital.slice(1, -1)}</em>);
+        }
+        else if (linkHref !== undefined && SAFE_HREF.test(linkHref)) {
+            nodes.push(<a key={`${keyPrefix}-l${k}`} href={linkHref} target="_blank" rel="noreferrer">
+          {linkText}
+        </a>);
+        }
+        else if (linkHref !== undefined) {
+            // Unsafe scheme — render the text, never the href.
+            nodes.push(<span key={`${keyPrefix}-l${k}`}>{linkText}</span>);
+        }
+        last = m.index + m[0].length;
+        k += 1;
+    }
+    if (last < text.length)
+        nodes.push(text.slice(last));
+    return nodes;
+}
+/** Render one prose line; list items and tables accumulate into groups. */
+function Prose({ lines }) {
+    const rows = [];
+    let listRun = null;
+    let tableRun = null;
+    let key = 0;
+    const flushList = () => {
+        if (!listRun)
+            return;
+        const items = listRun;
+        const Tag = items[0].type === 'ol' ? 'ol' : 'ul';
+        rows.push(<Tag key={`md-l${key++}`} className={`md-list md-${items[0].type}`}>
+        {items.map((it, i) => (<li key={i}>{inline(it.text, `md-li${key}-${i}`)}</li>))}
+      </Tag>);
+        listRun = null;
+    };
+    const flushTable = () => {
+        if (!tableRun)
+            return;
+        const t = tableRun;
+        rows.push(<table key={`md-t${key++}`} className="md-table">
+        <thead>
+          <tr>
+            {t[0].map((h, i) => (<th key={i}>{inline(h, `md-th${i}`)}</th>))}
+          </tr>
+        </thead>
+        <tbody>
+          {t.slice(2).map((r, ri) => (<tr key={ri}>
+              {r.map((c, ci) => (<td key={ci}>{inline(c, `md-td${ri}-${ci}`)}</td>))}
+            </tr>))}
+        </tbody>
+      </table>);
+        tableRun = null;
+    };
+    for (const raw of lines) {
+        const line = raw;
+        const h = /^(#{1,6})\s+(.*)$/.exec(line);
+        if (h) {
+            flushList();
+            flushTable();
+            const level = h[1].length;
+            const Tag = (`h${Math.min(level, 6)}`);
+            rows.push(<Tag key={`md-h${key++}`} className={`md-heading md-h${level}`}>{inline(h[2], `md-h${key}`)}</Tag>);
+            continue;
+        }
+        const hr = /^\s*(---+|\*\*\*+|___+)\s*$/.exec(line);
+        if (hr) {
+            flushList();
+            flushTable();
+            rows.push(<hr key={`md-r${key++}`} className="md-hr"/>);
+            continue;
+        }
+        const quote = /^>\s?(.*)$/.exec(line);
+        if (quote) {
+            flushList();
+            flushTable();
+            rows.push(<blockquote key={`md-q${key++}`} className="md-quote">{inline(quote[1], `md-q${key}`)}</blockquote>);
+            continue;
+        }
+        const ul = /^\s*[-*]\s+(.*)$/.exec(line);
+        if (ul) {
+            flushTable();
+            if (listRun && listRun[0].type === 'ul')
+                listRun.push({ type: 'ul', text: ul[1] });
+            else {
+                flushList();
+                listRun = [{ type: 'ul', text: ul[1] }];
+            }
+            continue;
+        }
+        const ol = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+        if (ol) {
+            flushTable();
+            if (listRun && listRun[0].type === 'ol')
+                listRun.push({ type: 'ol', text: ol[1] });
+            else {
+                flushList();
+                listRun = [{ type: 'ol', text: ol[1] }];
+            }
+            continue;
+        }
+        const tbl = /^\s*\|.*\|\s*$/.exec(line);
+        if (tbl) {
+            flushList();
+            const cells = line
+                .trim()
+                .replace(/^\||\|$/g, '')
+                .split('|')
+                .map((c) => c.trim());
+            if (!tableRun)
+                tableRun = [cells];
+            else
+                tableRun.push(cells);
+            continue;
+        }
+        flushList();
+        flushTable();
+        if (line.trim() === '') {
+            rows.push(<div key={`md-p${key++}`} className="md-blank"/>);
+        }
+        else {
+            rows.push(<p key={`md-p${key++}`} className="md-para">{inline(line, `md-p${key}`)}</p>);
+        }
+    }
+    flushList();
+    flushTable();
+    return <>{rows}</>;
+}
+/** A fenced code block with a language label and a copy button. */
+function CodeBlockView({ lang, code }) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const copy = async () => {
+        try {
+            await navigator.clipboard?.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            /* clipboard unavailable (non-secure context / jsdom) — button no-ops */
+        }
+    };
+    return (<div className="md-code-block">
+      <div className="md-code-head">
+        <span className="md-code-lang">{lang}</span>
+        <button type="button" className="md-code-copy" onClick={() => void copy()}>
+          {copied ? '✓ Copied' : '⧉ Copy'}
+        </button>
+      </div>
+      <pre className="md-code-pre">
+        <code>{code}</code>
+      </pre>
+    </div>);
+}
+/** Top-level renderer: split into code/prose blocks, render each. */
+function MarkdownZeroDep({ text }) {
+    const blocks = (0, react_1.useMemo)(() => splitBlocks(text ?? ''), [text]);
+    return (<div className="md-root">
+      {blocks.map((b, i) => b.type === 'code' ? <CodeBlockView key={`b${i}`} lang={b.lang} code={b.code}/> : <Prose key={`b${i}`} lines={b.lines}/>)}
+    </div>);
+}

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MemoryPanel;
+function formatNumber(n) {
+    if (n === undefined || n === null)
+        return '0';
+    if (n >= 1_000_000)
+        return (n / 1_000_000).toFixed(1) + 'M';
+    if (n >= 1_000)
+        return (n / 1_000).toFixed(1) + 'K';
+    return n.toLocaleString();
+}
+function formatPercent(value) {
+    if (value === undefined || value === null)
+        return '0%';
+    return (value * 100).toFixed(1) + '%';
+}
+function MemoryPanel({ data }) {
+    if (!data) {
+        return <div className="loading-state"><p>Loading memory data...</p></div>;
+    }
+    const { memory, health } = data;
+    const entries = Object.entries(memory.byFingerprint || {}).sort(([, a], [, b]) => b - a);
+    const factEntries = Object.entries(memory.facts?.byProject || {}).sort(([, a], [, b]) => b - a);
+    const recall = memory.recall || { total: 0, today: 0, last7d: 0 };
+    return (<>
+      <h2 className="section-title">💾 Memory Store</h2>
+
+      <div className="stats-grid mini">
+        <div className="stat-card">
+          <div className="stat-value">{formatNumber(memory.total)}</div>
+          <div className="stat-label">Trajectories</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{formatPercent(memory.avgScore)}</div>
+          <div className="stat-label">Avg Score</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{formatNumber(memory.facts?.total)}</div>
+          <div className="stat-label">Facts</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{formatNumber(recall.total)}</div>
+          <div className="stat-label">Recall Hits</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{formatNumber(health?.patterns)}</div>
+          <div className="stat-label">Coding Patterns</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{formatNumber(health?.feedback)}</div>
+          <div className="stat-label">Feedback Ratings</div>
+        </div>
+      </div>
+
+      <p className="memory-backend">
+        Backend: <code>{memory.backend || 'local'}</code>
+        {recall.last7d > 0 ? ` · ${formatNumber(recall.last7d)} recall(s) this week, ${formatNumber(recall.today)} today` : ' · no recalls yet'}
+      </p>
+
+      {entries.length > 0 && (<>
+          <h3 className="section-subtitle">By Project Type</h3>
+          <div className="memory-list">
+            {entries.map(([project, count]) => (<div className="memory-item" key={project}>
+                <span className="memory-project">{project}</span>
+                <span className="memory-count">{count} trajectory(ies)</span>
+              </div>))}
+          </div>
+        </>)}
+
+      {factEntries.length > 0 && (<>
+          <h3 className="section-subtitle">Facts by Project</h3>
+          <div className="memory-list">
+            {factEntries.map(([project, count]) => (<div className="memory-item" key={project}>
+                <span className="memory-project">{project}</span>
+                <span className="memory-count">{count} fact(s)</span>
+              </div>))}
+          </div>
+        </>)}
+    </>);
+}

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

@@ -0,0 +1,298 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ModelTimeline;
+const react_1 = require("react");
+function formatTimeAgo(ms) {
+    if (ms <= 0)
+        return 'never';
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (days > 30)
+        return `${days}d ago`;
+    if (days > 0)
+        return `${days}d ${hours % 24}h ago`;
+    if (hours > 0)
+        return `${hours}h ${minutes % 60}m ago`;
+    if (minutes > 0)
+        return `${minutes}m ago`;
+    return `${seconds}s ago`;
+}
+function getStatusColor(status, lastProbedAt, errorRate) {
+    if (status === 'unavailable')
+        return '#f85149';
+    if (status === 'unverified')
+        return '#d29922';
+    const now = Date.now();
+    const daysSinceProbe = (now - lastProbedAt) / (24 * 60 * 60 * 1000);
+    if (daysSinceProbe > 30 && errorRate > 0.5)
+        return '#f85149';
+    if (daysSinceProbe > 7)
+        return '#d29922';
+    return '#3fb950';
+}
+function getStatusLabel(status, lastProbedAt, errorRate) {
+    if (status === 'unavailable')
+        return 'Unavailable';
+    if (status === 'unverified')
+        return 'Unverified';
+    const now = Date.now();
+    const daysSinceProbe = (now - lastProbedAt) / (24 * 60 * 60 * 1000);
+    if (daysSinceProbe > 30 && errorRate > 0.5)
+        return 'Likely Removed';
+    if (daysSinceProbe > 7)
+        return 'Stale';
+    return 'Fresh';
+}
+function TimelineBar({ entry }) {
+    const now = Date.now();
+    const probeAge = now - entry.lastProbedAt;
+    const verifyAge = now - entry.lastVerifiedAt;
+    const useAge = now - entry.lastUsedAt;
+    // Normalize to 30-day scale
+    const probePercent = Math.min(100, (probeAge / (30 * 24 * 60 * 60 * 1000)) * 100);
+    const verifyPercent = entry.lastVerifiedAt > 0 ? Math.min(100, (verifyAge / (30 * 24 * 60 * 60 * 1000)) * 100) : -1;
+    const usePercent = entry.lastUsedAt > 0 ? Math.min(100, (useAge / (30 * 24 * 60 * 60 * 1000)) * 100) : -1;
+    return (<div className="timeline-bar-container">
+      <div className="timeline-bar" title={`Last probed: ${formatTimeAgo(probeAge)}`}>
+        <div className="timeline-bar-fill probe" style={{ width: `${probePercent}%` }}/>
+      </div>
+      {verifyPercent >= 0 && (<div className="timeline-bar small" title={`Last verified: ${formatTimeAgo(verifyAge)}`}>
+          <div className="timeline-bar-fill verify" style={{ width: `${verifyPercent}%` }}/>
+        </div>)}
+      {usePercent >= 0 && (<div className="timeline-bar small" title={`Last used: ${formatTimeAgo(useAge)}`}>
+          <div className="timeline-bar-fill use" style={{ width: `${usePercent}%` }}/>
+        </div>)}
+    </div>);
+}
+function ModelTimeline() {
+    const [data, setData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [filter, setFilter] = (0, react_1.useState)('all');
+    const [sortBy, setSortBy] = (0, react_1.useState)('provider');
+    const mountedRef = (0, react_1.useRef)(true);
+    const fetchData = (0, react_1.useCallback)(async () => {
+        try {
+            const response = await fetch('/api/model-timeline');
+            if (!response.ok)
+                throw new Error('Failed to fetch timeline data');
+            const result = await response.json();
+            if (mountedRef.current) {
+                setData(result);
+                setError(null);
+            }
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setError(err instanceof Error ? err.message : 'Failed to load timeline');
+            }
+        }
+        finally {
+            if (mountedRef.current)
+                setLoading(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        mountedRef.current = true;
+        fetchData();
+        const interval = setInterval(fetchData, 30000); // Refresh every 30s
+        return () => {
+            mountedRef.current = false;
+            clearInterval(interval);
+        };
+    }, [fetchData]);
+    if (loading) {
+        return (<div className="admin-header">
+        <h2 className="section-title">📅 Model Discovery Timeline</h2>
+        <div className="loading-state">
+          <div className="loading-spinner"/>
+          <p>Loading timeline...</p>
+        </div>
+      </div>);
+    }
+    if (error) {
+        return (<div className="admin-header">
+        <h2 className="section-title">📅 Model Discovery Timeline</h2>
+        <div className="admin-row-msg admin-row-msg-err">{error}</div>
+      </div>);
+    }
+    const entries = data?.entries ?? [];
+    // Filter entries
+    const filteredEntries = entries.filter((e) => {
+        const now = Date.now();
+        const daysSinceProbe = (now - e.lastProbedAt) / (24 * 60 * 60 * 1000);
+        const isStale = daysSinceProbe > 7;
+        const isRemoved = daysSinceProbe > 30 && e.errorRate > 0.5;
+        const isFresh = !isStale && !isRemoved;
+        if (filter === 'fresh')
+            return isFresh;
+        if (filter === 'stale')
+            return isStale && !isRemoved;
+        if (filter === 'removed')
+            return isRemoved;
+        return true;
+    });
+    // Sort entries
+    const sortedEntries = [...filteredEntries].sort((a, b) => {
+        if (sortBy === 'provider')
+            return a.provider.localeCompare(b.provider) || a.model.localeCompare(b.model);
+        if (sortBy === 'lastProbed')
+            return b.lastProbedAt - a.lastProbedAt;
+        if (sortBy === 'status') {
+            const statusOrder = { unavailable: 0, unverified: 1, verified: 2 };
+            return (statusOrder[b.status] ?? 0) - (statusOrder[a.status] ?? 0);
+        }
+        return 0;
+    });
+    // Group by provider
+    const byProvider = new Map();
+    for (const e of sortedEntries) {
+        if (!byProvider.has(e.provider))
+            byProvider.set(e.provider, []);
+        byProvider.get(e.provider).push(e);
+    }
+    return (<div className="admin-header">
+      <h2 className="section-title">📅 Model Discovery Timeline</h2>
+      
+      {/* Summary cards */}
+      <div className="stats-grid" style={{ marginBottom: 16 }}>
+        <div className="stat-card">
+          <div className="stat-value">{data?.totalModels ?? 0}</div>
+          <div className="stat-label">Total Models</div>
+        </div>
+        <div className="stat-card" style={{ borderColor: '#3fb950' }}>
+          <div className="stat-value" style={{ color: '#3fb950' }}>{data?.freshCount ?? 0}</div>
+          <div className="stat-label">Fresh (&lt;7d)</div>
+        </div>
+        <div className="stat-card" style={{ borderColor: '#d29922' }}>
+          <div className="stat-value" style={{ color: '#d29922' }}>{data?.staleCount ?? 0}</div>
+          <div className="stat-label">Stale (7-30d)</div>
+        </div>
+        <div className="stat-card" style={{ borderColor: '#f85149' }}>
+          <div className="stat-value" style={{ color: '#f85149' }}>{data?.removedCount ?? 0}</div>
+          <div className="stat-label">Likely Removed (&gt;30d)</div>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 4 }}>
+          {['all', 'fresh', 'stale', 'removed'].map((f) => (<button key={f} className={`admin-refresh-btn ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)} style={{
+                background: filter === f ? '#238636' : '#21262d',
+                border: `1px solid ${filter === f ? '#3fb950' : '#30363d'}`,
+                padding: '4px 12px',
+                fontSize: 12,
+                cursor: 'pointer',
+            }}>
+              {f.charAt(0).toUpperCase() + f.slice(1)}
+            </button>))}
+        </div>
+        <div style={{ display: 'flex', gap: 4 }}>
+          {['provider', 'lastProbed', 'status'].map((s) => (<button key={s} className={`admin-refresh-btn ${sortBy === s ? 'active' : ''}`} onClick={() => setSortBy(s)} style={{
+                background: sortBy === s ? '#238636' : '#21262d',
+                border: `1px solid ${sortBy === s ? '#3fb950' : '#30363d'}`,
+                padding: '4px 12px',
+                fontSize: 12,
+                cursor: 'pointer',
+            }}>
+              Sort: {s === 'lastProbed' ? 'Last Seen' : s.charAt(0).toUpperCase() + s.slice(1)}
+            </button>))}
+        </div>
+        <button className="admin-refresh-btn" onClick={fetchData} style={{
+            background: '#21262d',
+            border: '1px solid #30363d',
+            padding: '4px 12px',
+            fontSize: 12,
+            cursor: 'pointer',
+        }}>
+          🔄 Refresh
+        </button>
+      </div>
+
+      {/* Legend */}
+      <div style={{ display: 'flex', gap: 16, marginBottom: 12, fontSize: 11, color: '#8b949e' }}>
+        <span><span style={{ color: '#58a6ff' }}>■</span> Probe (last seen)</span>
+        <span><span style={{ color: '#3fb950' }}>■</span> Verified (last success)</span>
+        <span><span style={{ color: '#d29922' }}>■</span> Used (last invocation)</span>
+      </div>
+
+      {/* Timeline entries */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {Array.from(byProvider.entries()).map(([provider, models]) => (<div key={provider} style={{
+                background: '#161b22',
+                borderRadius: 8,
+                border: '1px solid #30363d',
+                overflow: 'hidden',
+            }}>
+            <div style={{
+                padding: '10px 14px',
+                borderBottom: '1px solid #30363d',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+              <span style={{ fontSize: 16 }}>
+                {provider === 'groq' ? '⚡' : provider === 'gemini' ? '🌀' : provider === 'local' ? '💻' : '🤖'}
+              </span>
+              <span style={{ fontWeight: 600, color: '#e6edf3' }}>{provider}</span>
+              <span style={{ fontSize: 12, color: '#8b949e' }}>({models.length} models)</span>
+            </div>
+            <div style={{ padding: '8px 14px' }}>
+              {models.map((entry) => {
+                const now = Date.now();
+                const daysSinceProbe = (now - entry.lastProbedAt) / (24 * 60 * 60 * 1000);
+                const statusColor = getStatusColor(entry.status, entry.lastProbedAt, entry.errorRate);
+                const statusLabel = getStatusLabel(entry.status, entry.lastProbedAt, entry.errorRate);
+                return (<div key={entry.model} style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 12,
+                        padding: '6px 0',
+                        borderBottom: '1px solid #21262d',
+                    }}>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{
+                        fontSize: 13,
+                        color: '#e6edf3',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }}>
+                        {entry.model}
+                      </div>
+                      <div style={{ fontSize: 11, color: '#8b949e', display: 'flex', gap: 12 }}>
+                        <span>Probed: {formatTimeAgo(now - entry.lastProbedAt)}</span>
+                        {entry.lastVerifiedAt > 0 && (<span>Verified: {formatTimeAgo(now - entry.lastVerifiedAt)}</span>)}
+                        {entry.lastUsedAt > 0 && (<span>Used: {formatTimeAgo(now - entry.lastUsedAt)}</span>)}
+                        {entry.latencyMs !== undefined && (<span>{entry.latencyMs}ms</span>)}
+                      </div>
+                    </div>
+                    <TimelineBar entry={entry}/>
+                    <div style={{
+                        fontSize: 11,
+                        padding: '2px 8px',
+                        borderRadius: 4,
+                        background: `${statusColor}20`,
+                        color: statusColor,
+                        border: `1px solid ${statusColor}40`,
+                        whiteSpace: 'nowrap',
+                    }}>
+                      {statusLabel}
+                    </div>
+                  </div>);
+            })}
+            </div>
+          </div>))}
+      </div>
+
+      {filteredEntries.length === 0 && (<div style={{
+                textAlign: 'center',
+                padding: '40px 20px',
+                color: '#8b949e',
+            }}>
+          No models match the current filter
+        </div>)}
+    </div>);
+}