agent-nuvira 2.7.0 → 2.7.2

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HealthPanel;
+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 HealthPanel({ data }) {
+    if (!data) {
+        return <div className="loading-state"><p>Loading system data...</p></div>;
+    }
+    const { health, serverTime } = data;
+    return (<>
+      <h2 className="section-title">⚙️ System Health</h2>
+
+      <div className="health-grid">
+        <div className="health-card">
+          <span className="health-icon">💾</span>
+          <div className="health-body">
+            <div className="health-title">Memory Directory</div>
+            <div className="health-path">{health.memoryDir || '~/.buff/memory/'}</div>
+          </div>
+        </div>
+        <div className="health-card">
+          <span className="health-icon">📝</span>
+          <div className="health-body">
+            <div className="health-title">Coding Patterns</div>
+            <div className="health-value">{formatNumber(health.patterns)}</div>
+          </div>
+        </div>
+        <div className="health-card">
+          <span className="health-icon">👍</span>
+          <div className="health-body">
+            <div className="health-title">User Feedback</div>
+            <div className="health-value">{formatNumber(health.feedback)} ratings</div>
+          </div>
+        </div>
+        <div className="health-card">
+          <span className="health-icon">🧠</span>
+          <div className="health-body">
+            <div className="health-title">Vector Index</div>
+            <div className="health-value">{formatNumber(health.vectors)} entries</div>
+          </div>
+        </div>
+      </div>
+
+      <h3 className="section-subtitle">Server Info</h3>
+      <div className="server-info">
+        <div className="info-row">
+          <span className="info-label">Status</span>
+          <span className="info-value">● Connected</span>
+        </div>
+        <div className="info-row">
+          <span className="info-label">Last Updated</span>
+          <span className="info-value">{serverTime ? new Date(serverTime).toLocaleString() : '--'}</span>
+        </div>
+        <div className="info-row">
+          <span className="info-label">Data Directory</span>
+          <span className="info-value">{health.memoryDir || '~/.buff/memory/'}</span>
+        </div>
+      </div>
+    </>);
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HistoryBrowser;
+function formatTime(ts) {
+    const d = new Date(ts);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+function HistoryBrowser({ data }) {
+    if (!data) {
+        return <div className="loading-state"><p>Loading history...</p></div>;
+    }
+    const { history } = data;
+    const sessions = history.recent || [];
+    return (<>
+      <h2 className="section-title">📝 Conversation History</h2>
+      <div className="history-stats">
+        <span className="history-count">Total: <strong>{history.total}</strong> sessions</span>
+      </div>
+
+      <div className="history-list">
+        {sessions.length === 0 ? (<div className="empty-state">No conversations recorded yet.</div>) : (sessions.map((session) => (<div className="history-item" key={session.id}>
+              <div className="history-summary">{session.summary || 'Untitled'}</div>
+              <div className="history-meta">
+                <span>📅 {formatTime(session.startedAt)}</span>
+                <span>🤖 {session.provider || '--'}</span>
+                <span>💬 {session.messageCount || 0} msgs</span>
+                {session.tags && session.tags.length > 0 && (<span>
+                    🏷️ {session.tags.map((tag) => (<span className="history-tag" key={tag}>{tag}</span>))}
+                  </span>)}
+              </div>
+            </div>)))}
+      </div>
+    </>);
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Layout;
+const react_router_dom_1 = require("react-router-dom");
+const NAV_ITEMS = [
+    // Phase 5 — Chat is the front door (the lobby); the other rooms are panels.
+    { path: '/', label: 'Chat', icon: '💬' },
+    { path: '/overview', label: 'Overview', icon: '📊' },
+    { path: '/dag', label: 'Execution', icon: '🔀' },
+    { path: '/tasks', label: 'Tasks', icon: '🚀' },
+    { path: '/evals', label: 'Evals', icon: '🏆' },
+    { path: '/platforms', label: 'Platforms', icon: '🌐' },
+    { path: '/contacts', label: 'Contacts', icon: '📇' },
+    { path: '/gateway', label: 'Gateway', icon: '📡' },
+    { path: '/models', label: 'Models', icon: '🧠' },
+    { path: '/models/timeline', label: 'Timeline', icon: '📅' },
+    { path: '/routing', label: 'Routing', icon: '🤖' },
+    { path: '/requests', label: 'Requests', icon: '📨' },
+    { path: '/hub', label: 'Agent Hub', icon: '🧰' },
+    { path: '/traces', label: 'Traces', icon: '🔍' },
+    { path: '/costs', label: 'Costs', icon: '💰' },
+    { path: '/benchmarks', label: 'Benchmarks', icon: '📈' },
+    { path: '/system', label: 'System', icon: '⚙️' },
+    { path: '/admin', label: 'Admin', icon: '🛠️' },
+];
+function Layout({ children, connected, lastUpdated }) {
+    const statusClass = connected ? 'connected' : 'reconnecting';
+    const statusText = connected ? 'Connected' : 'Reconnecting...';
+    return (<div className="layout">
+      <nav className="nav">
+        <div className="nav-header">
+          <span className="nav-logo">🤖</span>
+          <span className="nav-title">Agent-Nuvira</span>
+        </div>
+        <div className="nav-links">
+          {NAV_ITEMS.map((item) => (<react_router_dom_1.NavLink key={item.path} to={item.path} end={item.path === '/'} className={({ isActive }) => `nav-link${isActive ? ' active' : ''}`}>
+              {item.icon} {item.label}
+            </react_router_dom_1.NavLink>))}
+        </div>
+        <div className="nav-footer">
+          <span className={`status-dot ${statusClass}`}/>
+          <span className="status-text">{statusText}</span>
+          <span className="last-updated">{lastUpdated}</span>
+        </div>
+      </nav>
+      <main className="main">
+        {children}
+      </main>
+    </div>);
+}

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

@@ -0,0 +1,152 @@
+"use strict";
+/**
+ * Markdown — chat answer renderer (Phase 1 of DASHBOARD_FIRST_PLAN).
+ *
+ * Stack (decision reviewed 2026-08-17 with the user): react-markdown v10 +
+ * remark-gfm + rehype-highlight. The earlier custom renderer covered ~90% of
+ * CommonMark but mangled real agent output (nested lists, ***bold italic***,
+ * autolinks, strikethrough, task lists) and had NO syntax highlighting — the
+ * user's exact concern ("is your custom a weak fix?"). react-markdown is the
+ * spec-complete, battle-tested standard; it adds ~10 KB gzipped to a 219 KB
+ * bundle (<5%) and builds React elements (no dangerouslySetInnerHTML) with
+ * built-in URL sanitization — the same security model as before.
+ *
+ * The zero-dependency custom renderer is preserved as `MarkdownZeroDep.tsx`
+ * (unused by the app) for anyone who wants a dependency-free build — switch
+ * the import in ChatPage.tsx to use it.
+ *
+ * Supported: full CommonMark + GFM (tables, strikethrough, task lists,
+ * autolinks), syntax-highlighted fenced code blocks with a copy button,
+ * headings, lists, blockquotes, links (react-markdown's defaultUrlTransform
+ * strips javascript:/data: hrefs).
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Markdown;
+const react_1 = require("react");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const rehype_highlight_1 = __importDefault(require("rehype-highlight"));
+const typescript_1 = __importDefault(require("highlight.js/lib/languages/typescript"));
+const javascript_1 = __importDefault(require("highlight.js/lib/languages/javascript"));
+const json_1 = __importDefault(require("highlight.js/lib/languages/json"));
+const bash_1 = __importDefault(require("highlight.js/lib/languages/bash"));
+const shell_1 = __importDefault(require("highlight.js/lib/languages/shell"));
+const python_1 = __importDefault(require("highlight.js/lib/languages/python"));
+const markdown_1 = __importDefault(require("highlight.js/lib/languages/markdown"));
+const yaml_1 = __importDefault(require("highlight.js/lib/languages/yaml"));
+const diff_1 = __importDefault(require("highlight.js/lib/languages/diff"));
+const sql_1 = __importDefault(require("highlight.js/lib/languages/sql"));
+const xml_1 = __importDefault(require("highlight.js/lib/languages/xml"));
+const css_1 = __importDefault(require("highlight.js/lib/languages/css"));
+const plaintext_1 = __importDefault(require("highlight.js/lib/languages/plaintext"));
+/**
+ * Curated highlight languages — the set the agent actually emits (ts, js,
+ * json, bash, python, markdown, yaml, diff, sql, html/xml, css). rehype-
+ * highlight's DEFAULT lowlight bundle carries ~37 grammars; registering only
+ * these keeps the dashboard bundle ~80 KB smaller (measured: gzip 322 KB →
+ * ~240 KB) while still highlighting every real code block. rehype-highlight
+ * expects a name → grammar RECORD (it builds its own lowlight internally).
+ */
+const HIGHLIGHT_LANGUAGES = {
+    ts: typescript_1.default,
+    typescript: typescript_1.default,
+    js: javascript_1.default,
+    javascript: javascript_1.default,
+    json: json_1.default,
+    bash: bash_1.default,
+    shell: shell_1.default,
+    sh: shell_1.default,
+    python: python_1.default,
+    py: python_1.default,
+    markdown: markdown_1.default,
+    md: markdown_1.default,
+    yaml: yaml_1.default,
+    yml: yaml_1.default,
+    diff: diff_1.default,
+    sql: sql_1.default,
+    html: xml_1.default,
+    xml: xml_1.default,
+    css: css_1.default,
+    text: plaintext_1.default,
+    plaintext: plaintext_1.default,
+};
+/** Walk a hast node to its raw text (highlight spans included). */
+function hastText(node) {
+    if (node == null)
+        return '';
+    const n = node;
+    if (typeof n.value === 'string')
+        return n.value;
+    if (Array.isArray(n.children))
+        return n.children.map(hastText).join('');
+    return '';
+}
+/** A fenced code block: language label + copy button + highlighted body. */
+function CodeBlockView({ lang, code, children }) {
+    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>{children}</code>
+      </pre>
+    </div>);
+}
+/**
+ * Custom `pre` renderer: wraps every fenced block in the copy-button shell.
+ * `node` is the hast element — walk it for the RAW code text (rehype-highlight
+ * has already split children into spans), and read `language-*` for the label.
+ * Blocks without a language still get the shell (lang "text").
+ */
+function Pre({ node, children }) {
+    const codeNode = node?.children?.[0];
+    const classes = Array.isArray(codeNode?.properties?.className)
+        ? codeNode?.properties?.className
+        : [];
+    const lang = classes.find((c) => typeof c === 'string' && c.startsWith('language-'))?.slice(9) ?? 'text';
+    const raw = (0, react_1.useMemo)(() => hastText(codeNode), [codeNode]);
+    return (<CodeBlockView lang={lang} code={raw}>
+      {children}
+    </CodeBlockView>);
+}
+/** Top-level renderer: react-markdown with GFM + highlighting + the shell. */
+function Markdown({ text }) {
+    const components = (0, react_1.useMemo)(() => ({
+        h1: ({ node: _n, ...p }) => <h1 className="md-heading md-h1" {...p}/>,
+        h2: ({ node: _n, ...p }) => <h2 className="md-heading md-h2" {...p}/>,
+        h3: ({ node: _n, ...p }) => <h3 className="md-heading md-h3" {...p}/>,
+        h4: ({ node: _n, ...p }) => <h4 className="md-heading md-h4" {...p}/>,
+        h5: ({ node: _n, ...p }) => <h5 className="md-heading md-h5" {...p}/>,
+        h6: ({ node: _n, ...p }) => <h6 className="md-heading md-h6" {...p}/>,
+        p: ({ node: _n, ...p }) => <p className="md-para" {...p}/>,
+        ul: ({ node: _n, ...p }) => <ul className="md-list md-ul" {...p}/>,
+        ol: ({ node: _n, ...p }) => <ol className="md-list md-ol" {...p}/>,
+        blockquote: ({ node: _n, ...p }) => <blockquote className="md-quote" {...p}/>,
+        hr: ({ node: _n, ...p }) => <hr className="md-hr" {...p}/>,
+        table: ({ node: _n, ...p }) => <table className="md-table" {...p}/>,
+        a: ({ node: _n, ...p }) => <a target="_blank" rel="noreferrer" {...p}/>,
+        pre: Pre,
+    }), []);
+    return (<div className="md-root">
+      <react_markdown_1.default remarkPlugins={[remark_gfm_1.default]} rehypePlugins={[[rehype_highlight_1.default, { languages: HIGHLIGHT_LANGUAGES }]]} components={components}>
+        {text ?? ''}
+      </react_markdown_1.default>
+    </div>);
+}

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

@@ -0,0 +1,126 @@
+"use strict";
+/**
+ * Phase 1 — Markdown renderer tests (react-markdown + remark-gfm +
+ * rehype-highlight stack).
+ *
+ * The chat answer renderer must turn the agent's markdown into rich blocks:
+ * headings, lists, bold/italic, inline code, fenced code blocks with a copy
+ * button, GFM tables/strikethrough/task lists, autolinks — while NEVER
+ * injecting unsafe hrefs (react-markdown's defaultUrlTransform strips
+ * javascript:/data:). The zero-dep fallback (`MarkdownZeroDep`) gets a smoke
+ * test so the one-import switch stays verified.
+ */
+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 Markdown_1 = __importDefault(require("./Markdown"));
+const MarkdownZeroDep_1 = __importDefault(require("./MarkdownZeroDep"));
+(0, vitest_1.afterEach)(() => {
+    (0, react_1.cleanup)();
+    vitest_1.vi.restoreAllMocks();
+});
+(0, vitest_1.describe)('Markdown (react-markdown stack)', () => {
+    (0, vitest_1.it)('renders plain prose as paragraphs', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'hello world\n\nsecond para'}/>);
+        (0, vitest_1.expect)(container.querySelectorAll('p.md-para')).toHaveLength(2);
+        (0, vitest_1.expect)(react_1.screen.getByText('hello world')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('second para')).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders headings at the right level', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'# Big\n\n### Small'}/>);
+        (0, vitest_1.expect)(container.querySelector('h1')?.textContent).toBe('Big');
+        (0, vitest_1.expect)(container.querySelector('h3')?.textContent).toBe('Small');
+    });
+    (0, vitest_1.it)('renders bold, italic, inline code and links', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'**bold** and *italic* and `code` and [docs](https://example.com)'}/>);
+        (0, vitest_1.expect)(container.querySelector('strong')?.textContent).toBe('bold');
+        (0, vitest_1.expect)(container.querySelector('em')?.textContent).toBe('italic');
+        (0, vitest_1.expect)(container.querySelector(':not(pre) > code')?.textContent).toBe('code');
+        (0, vitest_1.expect)(container.querySelector('a')?.getAttribute('href')).toBe('https://example.com');
+    });
+    (0, vitest_1.it)('never turns a javascript: link into a clickable href (defaultUrlTransform)', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'[click](javascript:alert(1))'}/>);
+        // v10 renders the text with an EMPTY href — never a javascript: URL.
+        const a = container.querySelector('a');
+        (0, vitest_1.expect)(a?.getAttribute('href') ?? '').not.toMatch(/^javascript:/);
+        (0, vitest_1.expect)(react_1.screen.getByText('click')).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders bullet and numbered lists as groups', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'- one\n- two\n- three'}/>);
+        const ul = container.querySelector('ul.md-list');
+        (0, vitest_1.expect)(ul).toBeTruthy();
+        (0, vitest_1.expect)(ul?.querySelectorAll('li')).toHaveLength(3);
+        const { container: c2 } = (0, react_1.render)(<Markdown_1.default text={'1. first\n2. second'}/>);
+        (0, vitest_1.expect)(c2.querySelector('ol.md-list')).toBeTruthy();
+    });
+    (0, vitest_1.it)('handles nested lists (CommonMark depth the old renderer could not)', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'- outer\n  - inner\n- again'}/>);
+        const ul = container.querySelector('ul.md-list');
+        // The inner list is a real nested <ul>, not flattened text.
+        (0, vitest_1.expect)(ul?.querySelector('ul')?.querySelector('li')?.textContent).toBe('inner');
+        (0, vitest_1.expect)(react_1.screen.getByText('outer')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('again')).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders GFM strikethrough, task lists and autolinks', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'~~gone~~\n\n- [x] done\n- [ ] todo\n\nvisit <https://example.com> now'}/>);
+        (0, vitest_1.expect)(container.querySelector('del')?.textContent).toBe('gone');
+        // Task-list checkboxes are real inputs.
+        (0, vitest_1.expect)(container.querySelectorAll('input[type="checkbox"]')).toHaveLength(2);
+        (0, vitest_1.expect)(container.querySelector('input[type="checkbox"]')?.hasAttribute('checked')).toBe(true);
+        (0, vitest_1.expect)(container.querySelector('a')?.getAttribute('href')).toBe('https://example.com');
+    });
+    (0, vitest_1.it)('renders a fenced code block with a language label, syntax highlight and copy button', async () => {
+        const writeText = vitest_1.vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
+        (0, react_1.render)(<Markdown_1.default text={'```ts\nconst x = 1;\n```'}/>);
+        (0, vitest_1.expect)(react_1.screen.getByText('ts')).toBeTruthy();
+        // rehype-highlight tokenized the body — the raw text is intact on the <code>.
+        const codeEl = document.querySelector('.md-code-pre code');
+        (0, vitest_1.expect)(codeEl?.textContent?.trim()).toBe('const x = 1;');
+        (0, vitest_1.expect)(codeEl?.querySelector('.hljs-keyword')?.textContent).toBe('const');
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Copy/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(writeText).toHaveBeenCalledWith('const x = 1;\n'));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText(/Copied/)).toBeTruthy());
+    });
+    (0, vitest_1.it)('keeps text inside code fences literal (no bold parsing)', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'```\n**not bold**\n```'}/>);
+        (0, vitest_1.expect)(container.querySelector('strong')).toBeNull();
+        (0, vitest_1.expect)(react_1.screen.getByText('**not bold**')).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders blockquotes and GFM tables', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={'> a note\n\n| a | b |\n|---|---|\n| 1 | 2 |'}/>);
+        (0, vitest_1.expect)(container.querySelector('blockquote')?.textContent?.trim()).toBe('a note');
+        const table = container.querySelector('table.md-table');
+        (0, vitest_1.expect)(table).toBeTruthy();
+        (0, vitest_1.expect)(table?.querySelectorAll('th')).toHaveLength(2);
+        (0, vitest_1.expect)(table?.querySelectorAll('td')).toHaveLength(2);
+        (0, vitest_1.expect)(react_1.screen.getByText('1')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('2')).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders an empty string safely', () => {
+        const { container } = (0, react_1.render)(<Markdown_1.default text={''}/>);
+        const root = container.querySelector('.md-root');
+        (0, vitest_1.expect)(root).toBeTruthy();
+        (0, vitest_1.expect)(root?.querySelector('p, pre, table, ul, ol, blockquote, h1, h2, h3, h4, h5, h6')).toBeNull();
+    });
+});
+(0, vitest_1.describe)('MarkdownZeroDep (zero-dependency fallback)', () => {
+    (0, vitest_1.it)('still renders prose and fenced code with a copy button', async () => {
+        const writeText = vitest_1.vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
+        (0, react_1.render)(<MarkdownZeroDep_1.default text={'hello\n\n```js\nconsole.log(1)\n```'}/>);
+        (0, vitest_1.expect)(react_1.screen.getByText('hello')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('js')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('console.log(1)')).toBeTruthy();
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Copy/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(writeText).toHaveBeenCalledWith('console.log(1)'));
+    });
+    (0, vitest_1.it)('still strips unsafe link schemes', () => {
+        const { container } = (0, react_1.render)(<MarkdownZeroDep_1.default text={'[click](javascript:alert(1))'}/>);
+        (0, vitest_1.expect)(container.querySelector('a')).toBeNull();
+        (0, vitest_1.expect)(react_1.screen.getByText('click')).toBeTruthy();
+    });
+});