@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentOutputsExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -6,49 +6,283 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentOutputsExample
  *
- * Demonstrates rich output rendering for agent responses: structured data
- * tables, charts, downloadable artifacts, and multi-format output panels.
+ * Demonstrates rich output rendering for agent responses. The agent (spec
+ * `example-outputs`) is prompted to return exactly one of four output types per
+ * response:
+ *   - TABLE  → GitHub-flavored Markdown table
+ *   - JSON   → ```json fenced block
+ *   - CHART  → ```json fenced block whose first line is `// chart` (ECharts)
+ *   - FILE   → fenced block whose info string is a file extension and
+ *              whose first line is `# filename: <name.ext>`
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
- * - Shows an output gallery alongside the chat with tabs for different
- *   output formats (table, JSON, chart, file)
+ * We subscribe to the chat store, detect the output type of the latest
+ * assistant message, auto-switch the sidebar tab, and render the payload
+ * inline in the sidebar.
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label } from '@primer/react';
-import { TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, SignOutIcon, } from '@primer/octicons-react';
+import { TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { ErrorView } from './components';
+import { AuthRequiredView, ErrorView } from './components';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { SignInSimple } from '@datalayer/core/lib/views/iam';
-import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { ThemedProvider } from './utils/themedProvider';
-import { useAgents } from '../hooks/useAgents';
+import { uniqueAgentId } from './utils/agentId';
 import { Chat } from '../chat';
+import { useChatStore } from '../stores/chatStore';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
-const AGENT_NAME = 'output-demo-agent';
-const AGENT_SPEC_ID = 'monitor-sales-kpis';
+const AGENT_NAME = 'outputs-example-agent';
+const AGENT_SPEC_ID = 'demo-outputs';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+// ─── Output detection ──────────────────────────────────────────────────────
+const FENCE_RE = /```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g;
+const MD_TABLE_RE = /(^|\n)\s*\|[^\n]+\|\s*\n\s*\|[\s:|-]+\|\s*\n(\s*\|[^\n]+\|\s*\n?)+/;
+/**
+ * Some agents emit a markdown table compressed onto a single logical line by
+ * joining row separators with `||`. Expand that form back to one row per line
+ * so the markdown table renderer can parse it. Idempotent: any pre-existing
+ * `|\n|` boundaries are unaffected.
+ */
+const expandCompactMarkdownTable = (text) => {
+    if (!text)
+        return text;
+    if (!/\|\s*[-:| ]{3,}\|/.test(text))
+        return text;
+    if (!text.includes('||'))
+        return text;
+    return text.replace(/\|\|/g, '|\n|');
+};
+const EXT_LIKE_INFOS = new Set([
+    'csv',
+    'tsv',
+    'txt',
+    'md',
+    'markdown',
+    'yaml',
+    'yml',
+    'xml',
+    'html',
+    'log',
+    'ini',
+    'toml',
+]);
+const messageText = (m) => {
+    if (typeof m.content === 'string')
+        return m.content;
+    return m.content
+        .filter(p => p.type === 'text')
+        .map(p => p.text)
+        .join('\n');
+};
+const detectOutput = (m) => {
+    const text = messageText(m);
+    if (!text)
+        return null;
+    // 1) Fenced code blocks (first one wins).
+    FENCE_RE.lastIndex = 0;
+    const match = FENCE_RE.exec(text);
+    if (match) {
+        const info = (match[1] || '').toLowerCase();
+        const rawBody = match[2] ?? '';
+        const body = expandCompactMarkdownTable(rawBody);
+        const firstLine = body.split('\n', 1)[0]?.trim() ?? '';
+        // Markdown fenced table should render in the table panel, not as a file.
+        if ((info === 'markdown' || info === 'md') && MD_TABLE_RE.test(body)) {
+            const tableMatch = body.match(MD_TABLE_RE);
+            return {
+                tab: 'table',
+                payload: tableMatch ? tableMatch[0].trim() : body.trim(),
+                messageId: m.id,
+            };
+        }
+        // Bare/unlabeled fence around a markdown table — route to Table tab too.
+        if ((!info || info === 'text' || info === 'plain') &&
+            MD_TABLE_RE.test(body)) {
+            const tableMatch = body.match(MD_TABLE_RE);
+            return {
+                tab: 'table',
+                payload: tableMatch ? tableMatch[0].trim() : body.trim(),
+                messageId: m.id,
+            };
+        }
+        // Chart: ```json with `// chart` marker on first line.
+        if (info === 'json' && /^\/\/\s*chart\b/i.test(firstLine)) {
+            return {
+                tab: 'chart',
+                payload: body.replace(/^\/\/\s*chart.*\n?/i, ''),
+                messageId: m.id,
+            };
+        }
+        // File: info string is a known extension OR first line declares a filename.
+        const filenameMatch = firstLine.match(/^#\s*filename:\s*([\w.-]+)/i);
+        if (filenameMatch || EXT_LIKE_INFOS.has(info)) {
+            const filename = filenameMatch?.[1] ?? (info ? `output.${info}` : 'output.txt');
+            return {
+                tab: 'files',
+                payload: filenameMatch
+                    ? body.replace(/^#\s*filename:.*\n?/i, '')
+                    : body,
+                filename,
+                extension: filename.split('.').pop(),
+                messageId: m.id,
+            };
+        }
+        // JSON (explicit language tag).
+        if (info === 'json' || info === 'json5') {
+            return { tab: 'json', payload: body, messageId: m.id };
+        }
+        // JSON fallback: bare ``` fence whose body parses as JSON.
+        if (!info || info === 'text' || info === 'plain') {
+            const trimmed = body.trim();
+            if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+                try {
+                    JSON.parse(trimmed);
+                    return { tab: 'json', payload: trimmed, messageId: m.id };
+                }
+                catch {
+                    /* not JSON — ignore */
+                }
+            }
+        }
+    }
+    // 1b) No fences — try to detect a bare JSON object/array in the message.
+    {
+        const stripped = text.trim();
+        if (stripped.startsWith('{') || stripped.startsWith('[')) {
+            try {
+                JSON.parse(stripped);
+                return { tab: 'json', payload: stripped, messageId: m.id };
+            }
+            catch {
+                /* not JSON — ignore */
+            }
+        }
+        // Or: find the first {...} / [...] block and try parsing it.
+        const blockMatch = stripped.match(/(\{[\s\S]*\}|\[[\s\S]*\])/);
+        if (blockMatch) {
+            try {
+                JSON.parse(blockMatch[1]);
+                return { tab: 'json', payload: blockMatch[1], messageId: m.id };
+            }
+            catch {
+                /* not JSON — ignore */
+            }
+        }
+    }
+    // 2) Markdown table (no fences).
+    const expandedText = expandCompactMarkdownTable(text.trim());
+    if (MD_TABLE_RE.test(expandedText)) {
+        const tableMatch = expandedText.match(MD_TABLE_RE);
+        return {
+            tab: 'table',
+            payload: tableMatch ? tableMatch[0].trim() : expandedText,
+            messageId: m.id,
+        };
+    }
+    return null;
+};
+// ─── Table renderer (parses the Markdown pipe syntax) ──────────────────────
+const MarkdownTable = ({ source }) => {
+    const { headers, rows } = useMemo(() => {
+        // Some model responses compress table rows into one line using `||`.
+        // Normalize that form back to one table row per line.
+        const normalized = expandCompactMarkdownTable(source).trim();
+        const lines = normalized
+            .split('\n')
+            .map(l => l.trim())
+            .filter(l => l.startsWith('|'));
+        if (lines.length < 2)
+            return { headers: [], rows: [] };
+        const split = (line) => line
+            .replace(/^\|/, '')
+            .replace(/\|$/, '')
+            .split('|')
+            .map(c => c.trim());
+        const headers = split(lines[0]);
+        const rows = lines.slice(2).map(split);
+        return { headers, rows };
+    }, [source]);
+    if (headers.length === 0) {
+        return (_jsx(Box, { as: "pre", sx: {
+                fontFamily: 'mono',
+                fontSize: 0,
+                whiteSpace: 'pre-wrap',
+                m: 0,
+            }, children: source }));
+    }
+    return (_jsx(Box, { sx: { overflowX: 'auto' }, children: _jsxs(Box, { as: "table", sx: {
+                width: '100%',
+                tableLayout: 'auto',
+                borderCollapse: 'collapse',
+                fontSize: 0,
+                'th, td': {
+                    border: '1px solid',
+                    borderColor: 'border.muted',
+                    px: 2,
+                    py: 1,
+                    textAlign: 'left',
+                    verticalAlign: 'top',
+                    whiteSpace: 'normal',
+                    wordBreak: 'break-word',
+                },
+                th: { bg: 'canvas.subtle', fontWeight: 'bold' },
+            }, children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((h, i) => (_jsx("th", { children: h }, i))) }) }), _jsx("tbody", { children: rows.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { children: c }, j))) }, i))) })] }) }));
+};
+// ─── Chart renderer (lazy ECharts) ─────────────────────────────────────────
+const ChartView = ({ source }) => {
+    const [ReactECharts, setReactECharts] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        import('echarts-for-react')
+            .then(m => {
+            if (!cancelled) {
+                setReactECharts(() => m.default);
+            }
+        })
+            .catch(() => {
+            /* echarts-for-react not installed — fall back to raw JSON */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const option = useMemo(() => {
+        try {
+            return JSON.parse(source);
+        }
+        catch {
+            return null;
+        }
+    }, [source]);
+    if (!option) {
+        return (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: "Could not parse chart spec as JSON." }));
+    }
+    if (!ReactECharts) {
+        return (_jsx(Box, { as: "pre", sx: {
+                fontFamily: 'mono',
+                fontSize: 0,
+                whiteSpace: 'pre-wrap',
+                bg: 'canvas.subtle',
+                p: 2,
+                borderRadius: 2,
+                m: 0,
+            }, children: source }));
+    }
+    return (_jsx(ReactECharts, { option: option, style: { height: 280, width: '100%' } }));
+};
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentOutputsInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
-    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgents({
-        agentSpecId: AGENT_SPEC_ID,
-        autoStart: true,
-        agentConfig: {
-            name: AGENT_NAME,
-            protocol: 'ag-ui',
-            description: 'Agent with rich output rendering and artifact management',
-        },
-    });
-    const [activeTab, setActiveTab] = useState('table');
-    const [artifacts, setArtifacts] = useState([]);
-    const agentBaseUrl = runtime?.agentBaseUrl || '';
-    const agentId = runtime?.agentId || AGENT_NAME;
-    const podName = runtime?.podName || '(launching…)';
-    // Authenticated fetch helper
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(agentName);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const chatAuthToken = token === null ? undefined : token;
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -57,26 +291,107 @@ const AgentOutputsInner = ({ onLogout, }) => {
             ...(opts.headers ?? {}),
         },
     }), [token]);
-    // ── Poll output artifacts ─────────────────────────────────────────────
     useEffect(() => {
-        if (!isReady || !agentBaseUrl)
-            return;
-        const poll = async () => {
+        let isCancelled = false;
+        const createAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
             try {
-                const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/outputs`);
-                if (res.ok) {
-                    const d = await res.json();
-                    setArtifacts(Array.isArray(d) ? d : (d.artifacts ?? []));
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'Agent with rich output rendering (table/JSON/chart/file)',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                let isAlreadyRunning = false;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || agentName;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    if (response.status === 409 || /already exists/i.test(detail || '')) {
+                        isAlreadyRunning = true;
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(isAlreadyRunning);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
                 }
             }
-            catch {
-                /* ok */
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
             }
         };
-        poll();
-        const interval = setInterval(poll, 10_000);
-        return () => clearInterval(interval);
-    }, [isReady, agentBaseUrl, agentId, authFetch]);
+        void createAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, agentName, authFetch]);
+    const [activeTab, setActiveTab] = useState('table');
+    const [detected, setDetected] = useState([]);
+    const lastTextByIdRef = useRef(new Map());
+    // Subscribe to chat store messages and detect outputs in assistant replies.
+    // We re-detect on every change because messages stream incrementally — the
+    // first chunk may only contain a header + one row, and later chunks add the
+    // remaining rows; we always want to keep the latest, most complete output.
+    useEffect(() => {
+        const process = (messages) => {
+            const assistants = messages.filter(m => m.role === 'assistant');
+            if (assistants.length === 0)
+                return;
+            const last = assistants[assistants.length - 1];
+            const currentText = messageText(last);
+            if (lastTextByIdRef.current.get(last.id) === currentText)
+                return;
+            lastTextByIdRef.current.set(last.id, currentText);
+            const out = detectOutput(last);
+            if (!out)
+                return;
+            setDetected(prev => {
+                const idx = prev.findIndex(d => d.messageId === out.messageId);
+                if (idx === -1)
+                    return [out, ...prev].slice(0, 20);
+                // Replace the existing detection in place so the panel keeps up with
+                // streaming content.
+                const next = prev.slice();
+                next[idx] = out;
+                return next;
+            });
+            setActiveTab(out.tab);
+        };
+        process(useChatStore.getState().messages);
+        const unsub = useChatStore.subscribe(state => state.messages, process);
+        return unsub;
+    }, []);
     // ── Loading / Error ───────────────────────────────────────────────────
     if (!isReady && runtimeStatus !== 'error') {
         return (_jsxs(Box, { sx: {
@@ -87,18 +402,35 @@ const AgentOutputsInner = ({ onLogout, }) => {
                 height: '100vh',
                 gap: 3,
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
-                        ? 'Launching runtime for output agent…'
-                        : 'Creating output demo agent…' })] }));
+                        ? 'Launching outputs example agent...'
+                        : 'Creating outputs example agent...' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    const filtered = artifacts.filter(a => a.type === activeTab);
+    const filtered = detected.filter(d => d.tab === activeTab);
+    const countByTab = (tab) => detected.filter(d => d.tab === tab).length;
+    const download = (d) => {
+        const blob = new Blob([d.payload], { type: 'text/plain;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = d.filename ?? `output.${d.extension ?? 'txt'}`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
     return (_jsxs(Box, { sx: {
             height: 'calc(100vh - 60px)',
             display: 'flex',
             flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
+        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
+                    px: 3,
+                    py: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 2,
@@ -107,22 +439,30 @@ const AgentOutputsInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(TableIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Agent Outputs \u2014 ", podName] }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Output Agent", placeholder: "Ask the agent to generate reports, data, or files\u2026", description: `${artifacts.length} artifact${artifacts.length !== 1 ? 's' : ''} produced`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Outputs Demo Agent", brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask for a Table, JSON, Chart, or File\u2026", description: `${detected.length} detected output${detected.length !== 1 ? 's' : ''}`, showHeader: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
-                                    title: 'Generate report',
-                                    message: 'Generate a KPI summary report as a table',
+                                    title: 'Table',
+                                    message: 'Generate a Markdown table of the top 5 US cities by population, with columns City, State, Population.',
                                 },
                                 {
-                                    title: 'Export JSON',
-                                    message: 'Export the latest sales data as JSON',
+                                    title: 'JSON',
+                                    message: 'Return a JSON object describing a fictitious product catalog with 3 items (id, name, price, tags).',
+                                },
+                                {
+                                    title: 'Chart',
+                                    message: 'Produce a bar chart ECharts spec (valid JSON, with `// chart` on the first line of the fenced block) showing monthly sales for Jan–Jun.',
+                                },
+                                {
+                                    title: 'File',
+                                    message: 'Create a downloadable CSV file with sample sales data for the last 7 days. Output it inside a ```csv fenced block whose first line is `# filename: sales.csv`.',
                                 },
                             ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
-                            width: 380,
+                            width: 420,
                             borderLeft: '1px solid',
                             borderColor: 'border.default',
                             display: 'flex',
                             flexDirection: 'column',
-                            overflow: 'auto',
+                            overflow: 'hidden',
                         }, children: [_jsx(Box, { sx: {
                                     display: 'flex',
                                     borderBottom: '1px solid',
@@ -133,13 +473,18 @@ const AgentOutputsInner = ({ onLogout, }) => {
                                     { key: 'json', icon: CodeIcon, label: 'JSON' },
                                     { key: 'chart', icon: GraphIcon, label: 'Chart' },
                                     { key: 'files', icon: FileIcon, label: 'Files' },
-                                ].map(t => (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: t.icon, onClick: () => setActiveTab(t.key), sx: {
-                                        flex: 1,
-                                        borderRadius: 0,
-                                        borderBottom: activeTab === t.key ? '2px solid' : '2px solid transparent',
-                                        borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
-                                        fontWeight: activeTab === t.key ? 'bold' : 'normal',
-                                    }, children: t.label }, t.key))) }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " Outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Ask the agent to generate some."] })) : (filtered.map(art => (_jsxs(Box, { sx: {
+                                ].map(t => {
+                                    const n = countByTab(t.key);
+                                    return (_jsxs(Button, { size: "small", variant: "invisible", leadingVisual: t.icon, onClick: () => setActiveTab(t.key), sx: {
+                                            flex: 1,
+                                            borderRadius: 0,
+                                            borderBottom: activeTab === t.key
+                                                ? '2px solid'
+                                                : '2px solid transparent',
+                                            borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
+                                            fontWeight: activeTab === t.key ? 'bold' : 'normal',
+                                        }, children: [t.label, n > 0 ? ` (${n})` : ''] }, t.key));
+                                }) }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the suggestion buttons in the chat to produce one \u2014 the side panel will switch to the matching tab automatically."] })) : (filtered.map((d, idx) => (_jsxs(Box, { sx: {
                                             p: 2,
                                             mb: 2,
                                             border: '1px solid',
@@ -149,25 +494,37 @@ const AgentOutputsInner = ({ onLogout, }) => {
                                                     display: 'flex',
                                                     justifyContent: 'space-between',
                                                     alignItems: 'center',
-                                                    mb: 1,
-                                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: art.name }), _jsx(Label, { size: "small", variant: "secondary", children: art.size != null
-                                                            ? `${(art.size / 1024).toFixed(1)} KB`
-                                                            : activeTab })] }), art.preview && (_jsx(Box, { sx: {
+                                                    mb: 2,
+                                                    gap: 2,
+                                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: d.filename ?? `${d.tab} output` }), _jsx(Label, { size: "small", variant: "secondary", children: d.tab })] }), d.tab === 'table' && _jsx(MarkdownTable, { source: d.payload }), d.tab === 'json' && (_jsx(Box, { as: "pre", sx: {
                                                     bg: 'canvas.subtle',
                                                     p: 2,
                                                     borderRadius: 2,
                                                     fontFamily: 'mono',
                                                     fontSize: 0,
-                                                    mb: 1,
-                                                    maxHeight: 120,
+                                                    maxHeight: 320,
                                                     overflow: 'auto',
                                                     whiteSpace: 'pre-wrap',
-                                                }, children: art.preview })), _jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    fontSize: 0,
-                                                    color: 'fg.muted',
-                                                }, children: [_jsx(Text, { children: new Date(art.timestamp).toLocaleString() }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => window.open(`${agentBaseUrl}/api/v1/agents/${agentId}/outputs/${art.id}/download`), children: "Download" })] })] }, art.id))))] })] })] })] }));
+                                                    m: 0,
+                                                }, children: (() => {
+                                                    try {
+                                                        return JSON.stringify(JSON.parse(d.payload), null, 2);
+                                                    }
+                                                    catch {
+                                                        return d.payload;
+                                                    }
+                                                })() })), d.tab === 'chart' && _jsx(ChartView, { source: d.payload }), d.tab === 'files' && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "pre", sx: {
+                                                            bg: 'canvas.subtle',
+                                                            p: 2,
+                                                            borderRadius: 2,
+                                                            fontFamily: 'mono',
+                                                            fontSize: 0,
+                                                            maxHeight: 200,
+                                                            overflow: 'auto',
+                                                            whiteSpace: 'pre-wrap',
+                                                            m: 0,
+                                                            mb: 2,
+                                                        }, children: d.payload }), _jsxs(Button, { size: "small", leadingVisual: DownloadIcon, onClick: () => download(d), children: ["Download ", d.filename ?? 'file'] })] }))] }, d.messageId + ':' + idx))))] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
@@ -177,7 +534,7 @@ const syncTokenToIamStore = (token) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentOutputsExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -185,11 +542,6 @@ const AgentOutputsExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -198,7 +550,7 @@ const AgentOutputsExample = () => {
         });
     }, [clearAuth]);
     if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Outputs", description: "Sign in to view and manage agent output artifacts.", leadingIcon: _jsx(TableIcon, { size: 24 }) }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentOutputsInner, { onLogout: handleLogout }) }) }));
 };

package/lib/examples/AgentParametersExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AgentParametersExample: React.FC;
+export default AgentParametersExample;