@agenthippo-ai/agenthippo 0.1.0

package/out/analytics/dashboard/teamViewDiscovery.js

@@ -0,0 +1,106 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) AgentHippo.ai. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AGENT_TEAM_VIEW_TAGS = exports.FLEET_VIEW_TAG = exports.TEAM_VIEW_TAG = void 0;
+exports.discoverTeamTaggedViews = discoverTeamTaggedViews;
+const fs_1 = require("fs");
+const path = __importStar(require("path"));
+const viewsConfigMerge_1 = require("./viewsConfigMerge");
+/** `view.yaml` tag: view is eligible for the Agent Team sidebar picker. */
+exports.TEAM_VIEW_TAG = 'team';
+/** `view.yaml` tag: fleet-style views also appear in the Agent Team picker. */
+exports.FLEET_VIEW_TAG = 'fleet';
+/** Tags that make a view eligible for Agent Team discovery (built-in `fleet` view is separate). */
+exports.AGENT_TEAM_VIEW_TAGS = [exports.TEAM_VIEW_TAG, exports.FLEET_VIEW_TAG];
+function hasAgentTeamTag(tags) {
+    if (!Array.isArray(tags)) {
+        return false;
+    }
+    const eligible = new Set(exports.AGENT_TEAM_VIEW_TAGS);
+    return tags.some(tag => typeof tag === 'string' && eligible.has(tag.trim().toLowerCase()));
+}
+async function readTeamTaggedView(viewRoot, dirName) {
+    const viewYamlPath = path.join(viewRoot, 'view.yaml');
+    let raw;
+    try {
+        raw = await fs_1.promises.readFile(viewYamlPath, 'utf-8');
+    }
+    catch {
+        return undefined;
+    }
+    const yaml = require('js-yaml');
+    const parsed = yaml.load(raw);
+    if (!parsed || typeof parsed !== 'object' || !hasAgentTeamTag(parsed.tags)) {
+        return undefined;
+    }
+    const id = (0, viewsConfigMerge_1.normalizeDashboardViewId)(typeof parsed.id === 'string' ? parsed.id : dirName, dirName);
+    const name = typeof parsed.name === 'string' && parsed.name.trim() ? parsed.name.trim() : id;
+    const scope = parsed.scope === 'workspace' ? 'workspace' : 'global';
+    return { id, name, scope };
+}
+/**
+ * Scan analytics roots for views whose view.yaml includes the `team` or `fleet` tag.
+ * Workspace-scoped entries override global entries with the same id.
+ */
+async function discoverTeamTaggedViews(analyticsRoots) {
+    const byId = new Map();
+    for (const root of analyticsRoots) {
+        const viewsDir = path.join(root, 'views');
+        let entries;
+        try {
+            entries = await fs_1.promises.readdir(viewsDir, { withFileTypes: true });
+        }
+        catch {
+            continue;
+        }
+        for (const entry of entries) {
+            if (!entry.isDirectory()) {
+                continue;
+            }
+            const record = await readTeamTaggedView(path.join(viewsDir, entry.name), entry.name);
+            if (!record || record.id === 'fleet') {
+                continue;
+            }
+            const existing = byId.get(record.id);
+            if (!existing || (existing.scope === 'global' && record.scope === 'workspace')) {
+                byId.set(record.id, record);
+            }
+        }
+    }
+    return [...byId.values()].sort((a, b) => a.name.localeCompare(b.name));
+}

package/out/analytics/dashboard/viewsConfigMerge.js

@@ -0,0 +1,221 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) AgentHippo.ai. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REQUEST_VIEW_EXPORT_SNAPSHOT_MESSAGE = exports.VIEW_EXPORT_SNAPSHOT_MESSAGE = exports.WORKFLOWS_SIDECAR_SCRIPTS = exports.WORKFLOWS_RUN_SCRIPT = exports.WORKFLOWS_VIEW_ID = exports.FLEET_WIDGET_SCRIPT = void 0;
+exports.createDefaultWorkflowsView = createDefaultWorkflowsView;
+exports.viewRunsFleetWidget = viewRunsFleetWidget;
+exports.resolveRefreshOnNavigate = resolveRefreshOnNavigate;
+exports.resolveGalleryLayout = resolveGalleryLayout;
+exports.resolvePreserveFleetIframe = resolvePreserveFleetIframe;
+exports.shouldPreserveFleetIframe = shouldPreserveFleetIframe;
+exports.buildViewExportSnapshotMessages = buildViewExportSnapshotMessages;
+exports.shouldRunScriptsOnNavigation = shouldRunScriptsOnNavigation;
+exports.normalizeDashboardViewId = normalizeDashboardViewId;
+exports.formatDisplayNameForAllocatedViewId = formatDisplayNameForAllocatedViewId;
+exports.createDefaultDashboardViewsConfig = createDefaultDashboardViewsConfig;
+exports.resolveMergedActiveViewId = resolveMergedActiveViewId;
+exports.mergeDashboardViewsConfigs = mergeDashboardViewsConfigs;
+exports.FLEET_WIDGET_SCRIPT = 'agent-fleet-widget.js';
+/** Built-in Workflows view (multi-agent pipeline timeline). */
+exports.WORKFLOWS_VIEW_ID = 'workflows';
+exports.WORKFLOWS_RUN_SCRIPT = 'workflows-widget.cjs';
+/**
+ * Sidecars seeded next to the run widget but never executed on refresh:
+ * the collector/daemon the widget spawns, plus `fleet-workflow.sh` — the writer
+ * agents call to emit workflow status (location-independent; writes to the workspace).
+ */
+exports.WORKFLOWS_SIDECAR_SCRIPTS = ['workflows-collector.cjs', 'workflows-daemon.mjs', 'fleet-workflow.sh'];
+function createDefaultWorkflowsView() {
+    return {
+        id: exports.WORKFLOWS_VIEW_ID,
+        name: 'Workflows',
+        scope: 'global',
+        scripts: [exports.WORKFLOWS_RUN_SCRIPT],
+        bundledScripts: exports.WORKFLOWS_SIDECAR_SCRIPTS,
+        system: true,
+        refreshOnNavigate: 'always',
+        layout: 'fleet-dashboard',
+        preserveFleetIframe: true,
+    };
+}
+/** Host ↔ panel: push `exports/<viewId>.json` to the webview. */
+exports.VIEW_EXPORT_SNAPSHOT_MESSAGE = 'viewExportSnapshot';
+/** Panel ↔ host / iframe ↔ panel: request a view export snapshot. */
+exports.REQUEST_VIEW_EXPORT_SNAPSHOT_MESSAGE = 'requestViewExportSnapshot';
+function normalizeScriptBasename(name) {
+    return name.trim().replace(/^.*[/\\]/, '').toLowerCase();
+}
+function viewRunsFleetWidget(view) {
+    return view.scripts.some(script => normalizeScriptBasename(script) === exports.FLEET_WIDGET_SCRIPT);
+}
+function resolveRefreshOnNavigate(view) {
+    if (view.refreshOnNavigate === 'always' || view.refreshOnNavigate === 'when-empty') {
+        return view.refreshOnNavigate;
+    }
+    return viewRunsFleetWidget(view) ? 'always' : 'when-empty';
+}
+function resolveGalleryLayout(view) {
+    if (view.layout === 'fleet-dashboard' || view.layout === 'gallery') {
+        return view.layout;
+    }
+    return resolveRefreshOnNavigate(view) === 'always' ? 'fleet-dashboard' : 'gallery';
+}
+function resolvePreserveFleetIframe(view) {
+    if (view.preserveFleetIframe === false) {
+        return false;
+    }
+    if (view.preserveFleetIframe === true) {
+        return true;
+    }
+    return resolveGalleryLayout(view) === 'fleet-dashboard';
+}
+function shouldPreserveFleetIframe(view) {
+    return resolvePreserveFleetIframe(view);
+}
+const VIEW_EXPORT_SESSION_CHUNK_BYTES = 192 * 1024;
+const VIEW_EXPORT_SESSION_CHUNK_SIZE = 100;
+/** Build one or more iframe snapshot messages (chunk only oversized sessions[]). */
+function buildViewExportSnapshotMessages(parsed) {
+    const sessions = Array.isArray(parsed.sessions) ? parsed.sessions : [];
+    const snapshotMeta = {
+        ok: true,
+        sessionCount: sessions.length,
+        cliActive: Boolean(parsed.diagnostics?.cliActive),
+        daemonHint: false,
+    };
+    if (!Array.isArray(parsed.sessions)) {
+        return [{ payload: parsed, meta: snapshotMeta }];
+    }
+    const sessionsBytes = Buffer.byteLength(JSON.stringify(sessions), 'utf8');
+    if (sessionsBytes <= VIEW_EXPORT_SESSION_CHUNK_BYTES) {
+        return [{ payload: parsed, meta: snapshotMeta }];
+    }
+    const snapshotBase = { ...parsed, sessions: [] };
+    const chunkCount = Math.max(1, Math.ceil(sessions.length / VIEW_EXPORT_SESSION_CHUNK_SIZE));
+    const snapshotId = `${Date.now()}-${sessions.length}-${sessionsBytes}`;
+    const messages = [];
+    for (let chunkIndex = 0; chunkIndex < chunkCount; chunkIndex += 1) {
+        messages.push({
+            payload: {
+                ...snapshotBase,
+                sessions: sessions.slice(chunkIndex * VIEW_EXPORT_SESSION_CHUNK_SIZE, (chunkIndex + 1) * VIEW_EXPORT_SESSION_CHUNK_SIZE),
+            },
+            meta: {
+                ...snapshotMeta,
+                chunkedSessions: true,
+                chunkIndex,
+                chunkCount,
+                snapshotId,
+            },
+        });
+    }
+    return messages;
+}
+/**
+ * Spotlight refresh policy for navigation (view switch).
+ * @see extensions/agentide/src/analytics/dashboard/README.md
+ */
+function shouldRunScriptsOnNavigation(view, artifactTypes) {
+    if (resolveRefreshOnNavigate(view) === 'always') {
+        return true;
+    }
+    return !artifactTypes.some(type => type === 'chart');
+}
+function normalizeDashboardViewId(raw, fallback = 'global') {
+    const normalized = (raw ?? fallback)
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+    return normalized || fallback;
+}
+/** Align display name with numeric id suffix (e.g. workspace-copy-3 → "Workspace Copy 3"). */
+function formatDisplayNameForAllocatedViewId(displayBase, allocatedId, normalizeId = normalizeDashboardViewId) {
+    const baseId = normalizeId(displayBase, 'view');
+    if (allocatedId === baseId) {
+        return displayBase;
+    }
+    const numericSuffixPrefix = `${baseId}-`;
+    if (allocatedId.startsWith(numericSuffixPrefix)) {
+        const suffix = allocatedId.slice(numericSuffixPrefix.length);
+        if (/^\d+$/.test(suffix)) {
+            return `${displayBase} ${suffix}`;
+        }
+    }
+    return displayBase;
+}
+function createDefaultDashboardViewsConfig(defaultActiveViewId = 'global') {
+    return {
+        version: 1,
+        activeViewId: defaultActiveViewId,
+        views: [
+            { id: 'global', name: 'Global', scope: 'global', scripts: [], system: true },
+            { id: 'workspace', name: 'Workspace', scope: 'workspace', scripts: [], system: true },
+            { id: 'fleet', name: 'Fleet', scope: 'global', scripts: ['agent-fleet-widget.js'], system: true },
+            createDefaultWorkflowsView(),
+        ],
+    };
+}
+/**
+ * Resolve activeViewId against the merged catalog; may return a fallback when the stored id is orphan.
+ */
+function resolveMergedActiveViewId(mergedViews, candidateActive, defaults, options) {
+    const preferWorkspace = options?.preferWorkspaceScopeFallback === true;
+    const normalizedCandidate = candidateActive
+        ? normalizeDashboardViewId(candidateActive, '')
+        : '';
+    if (normalizedCandidate && mergedViews.some(view => view.id === normalizedCandidate)) {
+        return normalizedCandidate;
+    }
+    if (preferWorkspace && mergedViews.some(view => view.id === 'workspace')) {
+        return 'workspace';
+    }
+    if (mergedViews.some(view => view.id === defaults.activeViewId)) {
+        return defaults.activeViewId;
+    }
+    if (mergedViews.some(view => view.id === 'global')) {
+        return 'global';
+    }
+    const custom = mergedViews.find(view => view.system !== true && view.id !== 'fleet' && view.id !== 'workspace' && view.id !== 'global');
+    if (custom) {
+        return custom.id;
+    }
+    return defaults.activeViewId;
+}
+/**
+ * Merge global (home) and workspace panel views.yaml configs.
+ * Workspace views override global entries with the same id.
+ * When workspace yaml exists, workspace activeViewId wins (may name any merged view, including global-scoped).
+ * Otherwise global activeViewId is used.
+ */
+function mergeDashboardViewsConfigs(globalConfig, workspaceConfig, defaults = createDefaultDashboardViewsConfig()) {
+    const globalNorm = globalConfig ?? defaults;
+    const viewsById = new Map();
+    for (const view of globalNorm.views) {
+        viewsById.set(view.id, view);
+    }
+    if (workspaceConfig) {
+        for (const view of workspaceConfig.views) {
+            viewsById.set(view.id, view);
+        }
+    }
+    const mergedViews = [...viewsById.values()];
+    if (workspaceConfig) {
+        const workspaceActive = normalizeDashboardViewId(workspaceConfig.activeViewId, defaults.activeViewId);
+        return {
+            activeViewId: resolveMergedActiveViewId(mergedViews, workspaceActive, defaults, {
+                preferWorkspaceScopeFallback: true,
+            }),
+            views: mergedViews,
+        };
+    }
+    const globalActive = normalizeDashboardViewId(globalNorm.activeViewId, defaults.activeViewId);
+    return {
+        activeViewId: resolveMergedActiveViewId(mergedViews, globalActive, defaults, {
+            preferWorkspaceScopeFallback: false,
+        }),
+        views: mergedViews,
+    };
+}

package/out/analytics/dashboard/webview/analytics-panel.html

@@ -0,0 +1,155 @@
+<div id="app">
+	<!-- Summary section (cost, token summary) – can be hidden or scrolled away -->
+	<div id="summary-section" class="summary-section">
+		<div class="summary-section-header">
+			<span class="summary-section-title">Cost & tokens</span>
+			<button type="button" id="summary-toggle-btn" class="toolbar-btn summary-toggle-btn" title="Hide summary section" aria-label="Hide summary">Hide</button>
+		</div>
+		<div id="summary-cards" style="display: none;"></div>
+	</div>
+
+	<!-- Gallery Toolbar -->
+	<div id="gallery-toolbar">
+		<div class="toolbar-menu-container">
+			<button id="toolbar-menu-btn" class="toolbar-btn icon-only" title="Dashboard menu" aria-label="Dashboard menu" aria-haspopup="true" aria-expanded="false">
+				<span class="btn-icon menu-icon">&#9776;</span>
+			</button>
+			<div id="toolbar-menu-dropdown" class="toolbar-dropdown" role="menu" aria-hidden="true">
+				<button class="dropdown-item" role="menuitem" data-action="new-view">
+					<span class="dropdown-icon">➕</span>
+					New view
+				</button>
+				<button class="dropdown-item" role="menuitem" data-action="duplicate-view">
+					<span class="dropdown-icon">📄</span>
+					Duplicate view
+				</button>
+				<button class="dropdown-item" role="menuitem" data-action="rename-view">
+					<span class="dropdown-icon">✏️</span>
+					Rename view
+				</button>
+				<button class="dropdown-item" role="menuitem" data-action="delete-view">
+					<span class="dropdown-icon">🗑️</span>
+					Delete view
+				</button>
+				<button class="dropdown-item" role="menuitem" data-action="edit-view-scripts">
+					<span class="dropdown-icon">📂</span>
+					Open view scripts
+				</button>
+				<button id="share-scripts-only-menu-item" class="dropdown-item" role="menuitem" data-action="share-scripts-only">
+					<span class="dropdown-icon">&#8593;</span>
+					Share scripts only to store
+				</button>
+				<button class="dropdown-item" role="menuitem" data-action="refresh-all-views">
+					<span class="dropdown-icon">🔁</span>
+					Refresh all views
+				</button>
+				<div class="dropdown-divider" role="separator"></div>
+				<button class="dropdown-item" role="menuitem" data-action="reset-home">
+					<span class="dropdown-icon">&#128465;</span>
+					Reset charts (home)
+				</button>
+				<button class="dropdown-item" role="menuitem" data-action="reset-workspace">
+					<span class="dropdown-icon">&#128193;</span>
+					Reset charts (workspace)
+				</button>
+				<div class="dropdown-divider" role="separator"></div>
+				<button class="dropdown-item" role="menuitem" data-action="reenable-charts">
+					<span class="dropdown-icon">&#128065;</span>
+					Re-enable hidden charts
+				</button>
+			</div>
+		</div>
+		<span class="toolbar-title"> </span>
+		<div class="toolbar-actions">
+			<select id="view-select" class="toolbar-select" title="Choose dashboard view">
+				<option value="__add_view__">+ Add view…</option>
+				<option value="global">Global</option>
+				<option value="workspace">Workspace</option>
+			</select>
+			<select id="agent-filter-select" class="toolbar-select" title="Filter by agent pack name">
+				<option value="">All agents</option>
+			</select>
+			<div class="toolbar-icon-group">
+				<button id="refresh-charts-btn" class="toolbar-btn icon-only" title="Refresh current view with latest data" aria-label="Refresh current view with latest data">
+					<span class="btn-icon">&#8635;</span>
+				</button>
+				<button id="share-view-btn" class="toolbar-btn icon-only" title="Publish current view to store (full bundle)" aria-label="Publish current view to store (full bundle)">
+					<span class="btn-icon" aria-hidden="true">&#8593;</span>
+				</button>
+				<button id="install-view-btn" class="toolbar-btn icon-only" title="Install Spotlight view from store" aria-label="Install Spotlight view from store">
+					<span class="btn-icon" aria-hidden="true">&#8595;</span>
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Refresh Hint -->
+	<div id="refresh-hint" style="display: none;">
+		<span>New data available. Use the refresh icon.</span>
+	</div>
+
+	<!-- Gallery Section -->
+	<section id="gallery">
+		<div id="loading-state" class="state-container">
+			<div class="spinner"></div>
+			<p class="state-title">Loading...</p>
+		</div>
+
+		<div id="empty-state" class="state-container" style="display: none;">
+			<div class="state-icon">&#128202;</div>
+			<p class="state-title">No visualizations yet</p>
+			<p class="state-hint">Charts will appear here automatically when Spotlight data is available. You can also ask the AI to create custom charts.</p>
+			<div class="quick-prompts">
+				<button class="quick-prompt" data-prompt="Show me a cost breakdown by model as a pie chart using matplotlib">
+					Cost by model
+				</button>
+				<button class="quick-prompt" data-prompt="Create a line chart of my daily costs for the past week using matplotlib">
+					Daily costs
+				</button>
+				<button class="quick-prompt" data-prompt="Visualize my top sessions by cost as a bar chart">
+					Top sessions
+				</button>
+			</div>
+		</div>
+
+		<div id="generating-state" style="display: none;">
+			<div class="generating-header">
+				<div class="spinner"></div>
+				<span class="generating-title">Generating charts...</span>
+			</div>
+			<p class="generating-hint">Querying traces and building 6 visualizations</p>
+			<button id="cancel-generate-btn">Cancel</button>
+		</div>
+
+		<div id="failed-state" style="display: none;">
+			<div class="error-icon">⚠️</div>
+			<p class="error-title">Couldn't generate charts</p>
+			<p class="error-message" id="error-message"></p>
+			<button id="retry-generate-btn">Try again</button>
+			<p class="fallback-hint">Use the button below to ask for charts manually.</p>
+		</div>
+
+		<div id="gallery-content" style="display: none;"></div>
+	</section>
+
+	<!-- Ask AI Bar -->
+	<div id="ask-ai-bar">
+		<p class="ask-ai-hint">Need a visualization or to drilldown on something?</p>
+		<button id="ask-ai-btn">
+			<span class="icon">✨</span>
+			<span>Ask Agent Hippo</span>
+		</button>
+	</div>
+
+	<!-- New view name modal (replaces prompt(); webviews don't support window.prompt) -->
+	<div id="new-view-modal" class="modal-overlay" role="dialog" aria-labelledby="new-view-modal-title" aria-modal="true" aria-hidden="true" style="display: none;">
+		<div class="modal-content">
+			<h2 id="new-view-modal-title" class="modal-title">New view name</h2>
+			<input type="text" id="new-view-name-input" class="modal-input" placeholder="View name" autocomplete="off" />
+			<div class="modal-actions">
+				<button type="button" id="new-view-modal-cancel" class="modal-btn modal-btn-secondary">Cancel</button>
+				<button type="button" id="new-view-modal-ok" class="modal-btn modal-btn-primary">OK</button>
+			</div>
+		</div>
+	</div>
+</div>

package/out/analytics/dashboard/webview/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+	Spotlight Dashboard Template
+	This file is a reference only - the actual HTML is generated by provider.ts with:
+	- CSP nonces for scripts
+	- WebView URIs for resources
+	- Panel files resolved from .agentide/analytics/panel/ (user) or bundled defaults
+
+	Architecture:
+	- runtime-bridge.js  - bundled; wraps acquireVsCodeApi(), exposes window.panelApi
+	- panel.js           - seeded from panel.js; uses panelApi for messaging
+	- panel.css          - seeded from styles.css; VS Code theme-aware styles
+	- panel.html         - seeded from analytics-panel.html; the HTML body content below
+
+	Users can customize the dashboard by editing files in .agentide/analytics/panel/.
+	The extension never overwrites user-modified files.
+-->
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Spotlight Dashboard</title>
+</head>
+<body>
+	<!-- Panel HTML body is injected here from panel.html (or analytics-panel.html fallback) -->
+	<div id="app">
+		<!-- Summary Cards (instant metrics) -->
+		<div id="summary-cards" style="display: none;"></div>
+
+		<!-- Refresh Hint (shown when data is stale) -->
+		<div id="refresh-hint" style="display: none;">
+			<span>Data has changed since charts were generated</span>
+			<button id="refresh-defaults-btn">Refresh</button>
+		</div>
+
+		<!-- Gallery Section -->
+		<section id="gallery">
+			<!-- Loading State -->
+			<div id="loading-state" class="state-container">
+				<div class="spinner"></div>
+				<p class="state-title">Loading...</p>
+			</div>
+
+			<!-- Empty State -->
+			<div id="empty-state" class="state-container" style="display: none;">
+				<div class="state-icon">&#128202;</div>
+				<p class="state-title">No visualizations yet</p>
+				<p class="state-hint">Ask the AI to chart your Spotlight data.</p>
+				<div class="quick-prompts">
+					<button class="quick-prompt" data-prompt="Show me a cost breakdown by model as a pie chart using matplotlib">
+						Cost by model
+					</button>
+					<button class="quick-prompt" data-prompt="Create a line chart of my daily costs for the past week using matplotlib">
+						Daily costs
+					</button>
+					<button class="quick-prompt" data-prompt="Visualize my top sessions by cost as a bar chart">
+						Top sessions
+					</button>
+				</div>
+			</div>
+
+			<!-- Generating / Failed / Content states -->
+			<div id="generating-state" style="display: none;">...</div>
+			<div id="failed-state" style="display: none;">...</div>
+			<div id="gallery-content" style="display: none;"></div>
+		</section>
+
+		<!-- Ask AI Bar -->
+		<div id="ask-ai-bar">
+			<button id="ask-ai-btn">Ask Agent Hippo</button>
+		</div>
+	</div>
+
+	<!-- Scripts: bridge first, then panel module -->
+	<!-- <script nonce="..." src="runtime-bridge.js"></script> -->
+	<!-- <script nonce="..." src="panel.js"></script> -->
+</body>
+</html>