@agenthippo-ai/agenthippo 0.1.0

package/out/analytics/dashboard/webview/panel.js

@@ -0,0 +1,2295 @@
+/* -----------------------------------------------------------------------------
+ * Copyright (c) AgentHippo.ai. All rights reserved.
+ * -----------------------------------------------------------------------------
+ * Spotlight Dashboard - Default Panel Module
+ * Handles artifact display, rendering, and interactions.
+ * Uses panelApi (provided by runtime-bridge.js) instead of raw VS Code API.
+ *
+ * This file is seeded to .agent-hippo/analytics/panel/panel.js on first use.
+ * Users can edit the seeded copy to customize the dashboard UI.
+ * ----------------------------------------------------------------------------- */
+
+// @ts-check
+/// <reference lib="dom" />
+
+// @ts-ignore - provided by runtime-bridge.js
+const panelApi = window.panelApi;
+
+// Seed/version marker for deciding whether a user's locally seeded panel.js
+// is compatible with the extension runtime (e.g. message forwarding fixes).
+const AGENTIDE_PANEL_JS_VERSION = '2026.05.30';
+try { window.__AGENTIDE_PANEL_JS_VERSION__ = AGENTIDE_PANEL_JS_VERSION; } catch { /* no-op */ }
+
+// -----------------------------------------------------------------------------
+// State
+// -----------------------------------------------------------------------------
+
+const PANEL_ID = 'default';
+
+/** Host ↔ panel / iframe ↔ panel: view-owned export JSON live updates. */
+const VIEW_EXPORT_SNAPSHOT = 'viewExportSnapshot';
+const REQUEST_VIEW_EXPORT_SNAPSHOT = 'requestViewExportSnapshot';
+/** @deprecated Renamed; widgets may still emit this until updated. */
+const LEGACY_REQUEST_LIVE_FLEET_SNAPSHOT = 'requestLiveFleetSnapshot';
+const LEGACY_VIEW_EXPORT_SNAPSHOT = 'liveFleetSnapshot';
+const ADD_VIEW_OPTION_VALUE = '__add_view__';
+
+/**
+ * @typedef {{ order: number, hidden: boolean, height?: number, expanded?: boolean }} PanelChartState
+ * @typedef {{ version: 1, charts: Record<string, PanelChartState>, summaryHidden?: boolean }} PanelState
+ */
+
+/** @returns {PanelState} */
+function createDefaultPanelState() {
+	return { version: 1, charts: {}, summaryHidden: false };
+}
+
+/** @type {{ artifacts: object[], galleryIgnorePatterns: string[], summaryCards: object[] | null, manifest: object | null, isRefreshing: boolean, scope: 'global'|'workspace', projectId: string, agentId: string, agentIds: string[], views: Array<{ id: string, name: string, scope: 'global'|'workspace', system: boolean, layout?: 'fleet-dashboard'|'gallery', refreshOnNavigate?: 'always'|'when-empty', preserveFleetIframe?: boolean }>, activeViewId: string, disabledCharts: Set<string>, panelState: PanelState, panelStateLoaded: boolean, lastArtifactCatalogSignature: string, fleetAutoRefreshIntervalSeconds: number, fleetRefreshVersion: number }} */
+const state = {
+	artifacts: [],
+	galleryIgnorePatterns: [],
+	summaryCards: null,
+	manifest: null,
+	isRefreshing: false,
+	scope: 'global',
+	projectId: '',
+	agentId: '',
+	agentIds: [],
+	views: [],
+	activeViewId: 'global',
+	disabledCharts: new Set(),
+	panelState: createDefaultPanelState(),
+	panelStateLoaded: false,
+	lastArtifactCatalogSignature: '',
+	fleetAutoRefreshIntervalSeconds: 30,
+	fleetRefreshVersion: 0,
+	surfaceMode: 'spotlight',
+};
+
+function applySurfaceMode(mode) {
+	const team = mode === 'team';
+	state.surfaceMode = team ? 'team' : 'spotlight';
+	document.body.classList.toggle('spotlight-surface-team', team);
+	applyTeamViewSelectVisibility();
+}
+
+/**
+ * Fleet view without preserveFleetIframe: host bumps fleetRefreshVersion and this panel reloads agent-fleet.html.
+ * preserveFleetIframe views receive viewExportSnapshot postMessages instead.
+ * Session/export JSON shape: extensions/agentide/src/analytics/dashboard/FLEET_DATA_CONTRACT.md
+ */
+/** Timer for Fleet view auto-refresh; cleared when view changes or interval is 0. */
+let fleetAutoRefreshTimerId = null;
+
+/**
+ * Only auto-refresh Fleet when the user is at the top of the widget.
+ * We check both the outer card scroll container and the embedded iframe
+ * document scroll position because either can own scrolling depending on
+ * current layout/height.
+ * @returns {boolean}
+ */
+function isFleetWidgetAtTop() {
+	const fleetCard = /** @type {HTMLElement | null} */ (document.querySelector('.fleet-dashboard-full.artifact-card'));
+	if (!fleetCard) {
+		return true;
+	}
+
+	const contentEl = /** @type {HTMLElement | null} */ (fleetCard.querySelector('.artifact-content'));
+	if (contentEl && contentEl.scrollTop > 4) {
+		return false;
+	}
+
+	const iframe = /** @type {HTMLIFrameElement | null} */ (fleetCard.querySelector('.html-preview iframe'));
+	if (!iframe) {
+		return true;
+	}
+
+	try {
+		const iframeDoc = iframe.contentDocument;
+		const bodyTop = iframeDoc?.body?.scrollTop ?? 0;
+		const docTop = iframeDoc?.documentElement?.scrollTop ?? 0;
+		const winTop = iframe.contentWindow?.scrollY ?? 0;
+		return bodyTop <= 4 && docTop <= 4 && winTop <= 4;
+	} catch {
+		// If iframe scroll is unavailable, avoid blocking auto-refresh.
+		return true;
+	}
+}
+
+/**
+ * Start or stop Fleet auto-refresh based on current view and configured interval.
+ * Call after activeViewId or fleetAutoRefreshIntervalSeconds changes.
+ */
+/** @returns {{ id: string, name: string, scope: 'global'|'workspace', system: boolean, layout?: string, refreshOnNavigate?: string, preserveFleetIframe?: boolean } | undefined} */
+function getActiveViewConfig() {
+	return state.views.find(view => view.id === state.activeViewId);
+}
+
+function activeViewUsesFleetDashboardLayout() {
+	return getActiveViewConfig()?.layout === 'fleet-dashboard';
+}
+
+function activeViewPreservesFleetIframe() {
+	return getActiveViewConfig()?.preserveFleetIframe === true;
+}
+
+/**
+ * Iframe-only snapshot views — no gallery Open/Delete footer.
+ * Config-driven via `preserveFleetIframe` (covers Workflows and any fleet-dashboard view).
+ * The id pattern is a back-compat fallback for legacy live-fleet views whose view.yaml
+ * predates the flag and derives `preserveFleetIframe === false` host-side.
+ */
+function activeViewIsLiveFleetSnapshot() {
+	if (activeViewPreservesFleetIframe()) {
+		return true;
+	}
+	return /^live-fleet-\d+$/.test(String(state.activeViewId || ''));
+}
+
+function applyFleetAutoRefresh() {
+	if (fleetAutoRefreshTimerId !== null) {
+		clearInterval(fleetAutoRefreshTimerId);
+		fleetAutoRefreshTimerId = null;
+	}
+	const intervalSec = state.fleetAutoRefreshIntervalSeconds;
+	const isLiveFleetView = state.activeViewId === 'fleet' || activeViewPreservesFleetIframe();
+	if (isLiveFleetView && typeof intervalSec === 'number' && intervalSec > 0) {
+		const ms = intervalSec * 1000;
+		fleetAutoRefreshTimerId = setInterval(() => {
+			if (!isFleetWidgetAtTop()) {
+				return;
+			}
+			if (activeViewPreservesFleetIframe()) {
+				panelApi.postMessage({ type: REQUEST_VIEW_EXPORT_SNAPSHOT });
+				return;
+			}
+			panelApi.postMessage({ type: 'refreshView' });
+		}, ms);
+	}
+}
+
+function applyTeamViewSelectVisibility() {
+	const viewSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('view-select'));
+	if (!viewSelect) {
+		return;
+	}
+	if (state.surfaceMode === 'team') {
+		if (state.views.length > 1) {
+			viewSelect.style.setProperty('display', 'inline-block', 'important');
+		} else {
+			viewSelect.style.setProperty('display', 'none', 'important');
+		}
+	} else {
+		viewSelect.style.removeProperty('display');
+	}
+}
+
+function applyViewOptions() {
+	const viewSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('view-select'));
+	if (!viewSelect) {
+		return;
+	}
+	const previous = state.activeViewId || viewSelect.value || '';
+	viewSelect.innerHTML = '';
+
+	if (state.surfaceMode !== 'team') {
+		const addViewOption = document.createElement('option');
+		addViewOption.value = ADD_VIEW_OPTION_VALUE;
+		addViewOption.textContent = '+ Add view…';
+		viewSelect.appendChild(addViewOption);
+	}
+
+	for (const view of state.views) {
+		const option = document.createElement('option');
+		option.value = view.id;
+		option.textContent = view.name;
+		viewSelect.appendChild(option);
+	}
+	const next = state.views.some((view) => view.id === state.activeViewId)
+		? state.activeViewId
+		: previous;
+	if (next && state.views.some((view) => view.id === next)) {
+		viewSelect.value = next;
+		state.activeViewId = next;
+	}
+	applyTeamViewSelectVisibility();
+	applyShareButtonState();
+}
+
+const SHARE_ICON_HTML = '<span class="btn-icon" aria-hidden="true">&#8593;</span>';
+const INSTALL_ICON_HTML = '<span class="btn-icon" aria-hidden="true">&#8595;</span>';
+
+function onInstallViewClick() {
+	panelApi.postMessage({ type: 'installView' });
+}
+
+function onShareViewClick() {
+	const activeView = getActiveView();
+	// Always forward to the extension host so built-in views get the explanatory toast.
+	panelApi.postMessage({
+		type: 'shareView',
+		viewId: activeView?.id ?? '',
+		bundle: 'full',
+	});
+}
+
+function onShareScriptsOnlyClick() {
+	const activeView = getActiveView();
+	panelApi.postMessage({
+		type: 'shareView',
+		viewId: activeView?.id ?? '',
+		bundle: 'scripts-only',
+	});
+}
+
+/**
+ * Insert share toolbar control when user's panel.html predates the share button.
+ */
+function ensureShareToolbarButton() {
+	let shareBtn = document.getElementById('share-view-btn');
+	if (!shareBtn) {
+		const refreshBtn = document.getElementById('refresh-charts-btn');
+		if (!refreshBtn?.parentElement) {
+			return;
+		}
+		let iconGroup = refreshBtn.closest('.toolbar-icon-group');
+		if (!iconGroup) {
+			iconGroup = document.createElement('div');
+			iconGroup.className = 'toolbar-icon-group';
+			refreshBtn.parentElement.insertBefore(iconGroup, refreshBtn);
+			iconGroup.appendChild(refreshBtn);
+		}
+		shareBtn = document.createElement('button');
+		shareBtn.id = 'share-view-btn';
+		shareBtn.className = 'toolbar-btn icon-only';
+		shareBtn.title = 'Publish current view to store (full bundle)';
+		shareBtn.setAttribute('aria-label', shareBtn.title);
+		shareBtn.innerHTML = SHARE_ICON_HTML;
+		iconGroup.appendChild(shareBtn);
+	} else {
+		const refreshBtn = document.getElementById('refresh-charts-btn');
+		const icon = shareBtn.querySelector('.btn-icon');
+		if (icon && icon.textContent !== '↑') {
+			icon.outerHTML = SHARE_ICON_HTML;
+		}
+		if (refreshBtn && shareBtn.compareDocumentPosition(refreshBtn) & Node.DOCUMENT_POSITION_FOLLOWING) {
+			refreshBtn.insertAdjacentElement('afterend', shareBtn);
+		}
+	}
+	const boundShareBtn = document.getElementById('share-view-btn');
+	if (boundShareBtn && !boundShareBtn.dataset.boundShareClick) {
+		boundShareBtn.dataset.boundShareClick = '1';
+		boundShareBtn.addEventListener('click', onShareViewClick);
+	}
+	applyShareButtonState();
+	ensureInstallToolbarButton();
+}
+
+/**
+ * Insert install toolbar control when user's panel.html predates the install button.
+ */
+function ensureInstallToolbarButton() {
+	let installBtn = document.getElementById('install-view-btn');
+	if (!installBtn) {
+		const shareBtn = document.getElementById('share-view-btn');
+		if (!shareBtn?.parentElement) {
+			return;
+		}
+		let iconGroup = shareBtn.closest('.toolbar-icon-group');
+		if (!iconGroup) {
+			iconGroup = document.createElement('div');
+			iconGroup.className = 'toolbar-icon-group';
+			shareBtn.parentElement.insertBefore(iconGroup, shareBtn);
+			iconGroup.appendChild(shareBtn);
+		}
+		installBtn = document.createElement('button');
+		installBtn.id = 'install-view-btn';
+		installBtn.className = 'toolbar-btn icon-only';
+		installBtn.title = 'Install Spotlight view from store';
+		installBtn.setAttribute('aria-label', installBtn.title);
+		installBtn.innerHTML = INSTALL_ICON_HTML;
+		shareBtn.insertAdjacentElement('afterend', installBtn);
+	} else {
+		const shareBtn = document.getElementById('share-view-btn');
+		const icon = installBtn.querySelector('.btn-icon');
+		if (icon && icon.textContent !== '↓') {
+			icon.outerHTML = INSTALL_ICON_HTML;
+		}
+		if (shareBtn && installBtn.compareDocumentPosition(shareBtn) & Node.DOCUMENT_POSITION_FOLLOWING) {
+			shareBtn.insertAdjacentElement('afterend', installBtn);
+		}
+	}
+	const boundInstallBtn = document.getElementById('install-view-btn');
+	if (boundInstallBtn && !boundInstallBtn.dataset.boundInstallClick) {
+		boundInstallBtn.dataset.boundInstallClick = '1';
+		boundInstallBtn.addEventListener('click', onInstallViewClick);
+	}
+}
+
+function applyShareButtonState() {
+	const shareBtn = document.getElementById('share-view-btn');
+	if (!shareBtn) {
+		return;
+	}
+	const activeView = getActiveView();
+	const canShare = Boolean(activeView && !activeView.system);
+	shareBtn.classList.toggle('share-unavailable', !canShare);
+	shareBtn.title = canShare
+		? 'Publish current view to store (full bundle)'
+		: 'Built-in views cannot be shared (duplicate or create a custom view)';
+	shareBtn.setAttribute('aria-label', shareBtn.title);
+
+	const scriptsOnlyItem = document.getElementById('share-scripts-only-menu-item');
+	if (scriptsOnlyItem) {
+		// Keep clickable so the host can show the same built-in-view explanation.
+		scriptsOnlyItem.disabled = false;
+		scriptsOnlyItem.classList.toggle('share-unavailable', !canShare);
+		scriptsOnlyItem.title = canShare
+			? 'Publish widget scripts only (no charts or exports)'
+			: 'Built-in views cannot be shared (duplicate or create a custom view)';
+	}
+}
+
+function getActiveView() {
+	return state.views.find((view) => view.id === state.activeViewId);
+}
+
+/**
+ * @param {string} nextViewId
+ */
+function switchToView(nextViewId) {
+	if (!nextViewId || nextViewId === state.activeViewId) {
+		return;
+	}
+	state.activeViewId = nextViewId;
+	state.panelStateLoaded = false;
+	state.panelState = createDefaultPanelState();
+	const viewSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('view-select'));
+	if (viewSelect && state.views.some((view) => view.id === nextViewId)) {
+		viewSelect.value = nextViewId;
+	}
+	applyFleetAutoRefresh();
+	applyShareButtonState();
+	panelApi.postMessage({ type: 'setActiveView', viewId: nextViewId });
+	panelApi.postMessage({ type: 'requestPanelState', panelId: PANEL_ID });
+}
+
+/**
+ * Show the "New view name" modal. Used instead of prompt() because
+ * window.prompt() is not available in VS Code webviews.
+ * @param {() => void} [onResetSelect] - Optional callback to reset view dropdown (e.g. when opened from "+ Add view…").
+ */
+function showNewViewModal(onResetSelect) {
+	const overlay = document.getElementById('new-view-modal');
+	const input = document.getElementById('new-view-name-input');
+	const okBtn = document.getElementById('new-view-modal-ok');
+	const cancelBtn = document.getElementById('new-view-modal-cancel');
+	if (!overlay || !input || !okBtn || !cancelBtn) {
+		return;
+	}
+	if (typeof onResetSelect === 'function') {
+		onResetSelect();
+	}
+	input.value = '';
+	overlay.style.display = 'flex';
+	overlay.setAttribute('aria-hidden', 'false');
+	input.focus();
+
+	function hide() {
+		overlay.style.display = 'none';
+		overlay.setAttribute('aria-hidden', 'true');
+		overlay.removeEventListener('click', handleOverlayClick);
+		document.removeEventListener('keydown', handleKeydown);
+	}
+
+	function submit() {
+		const trimmed = input.value.trim();
+		hide();
+		if (trimmed) {
+			panelApi.postMessage({ type: 'createView', name: trimmed });
+		}
+	}
+
+	function handleOverlayClick(e) {
+		if (e.target === overlay) {
+			hide();
+		}
+	}
+
+	function handleKeydown(e) {
+		if (e.key === 'Escape') {
+			hide();
+			e.preventDefault();
+		} else if (e.key === 'Enter') {
+			submit();
+			e.preventDefault();
+		}
+	}
+
+	overlay.addEventListener('click', handleOverlayClick);
+	document.addEventListener('keydown', handleKeydown);
+
+	okBtn.onclick = () => submit();
+	cancelBtn.onclick = () => hide();
+}
+
+function promptCreateView() {
+	showNewViewModal();
+}
+
+function initViews() {
+	const viewSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('view-select'));
+	viewSelect?.addEventListener('change', () => {
+		const nextViewId = viewSelect.value || '';
+		if (!nextViewId) {
+			return;
+		}
+		if (nextViewId === ADD_VIEW_OPTION_VALUE) {
+			showNewViewModal(() => {
+				viewSelect.value = state.activeViewId || '';
+			});
+			return;
+		}
+		if (nextViewId === state.activeViewId) {
+			return;
+		}
+		switchToView(nextViewId);
+	});
+}
+
+function refreshCurrentView() {
+	const btn = document.getElementById('refresh-charts-btn');
+	if (btn && !btn.classList.contains('refreshing')) {
+		setRefreshButtonState(true);
+		panelApi.postMessage({ type: 'refreshView' });
+	}
+}
+
+// -----------------------------------------------------------------------------
+// Utility Functions
+// -----------------------------------------------------------------------------
+
+/**
+ * Format a date as relative time (e.g., "2 min ago")
+ * @param {Date} date
+ * @returns {string}
+ */
+function formatTimeAgo(date) {
+	const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+	if (seconds < 60) {
+		return 'just now';
+	}
+	if (seconds < 3600) {
+		return `${Math.floor(seconds / 60)} min ago`;
+	}
+	if (seconds < 86400) {
+		return `${Math.floor(seconds / 3600)}h ago`;
+	}
+	return `${Math.floor(seconds / 86400)}d ago`;
+}
+
+/**
+ * Format file size in human-readable form
+ * @param {number} bytes
+ * @returns {string}
+ */
+function formatSize(bytes) {
+	if (bytes < 1024) {
+		return `${bytes} B`;
+	}
+	if (bytes < 1024 * 1024) {
+		return `${(bytes / 1024).toFixed(1)} KB`;
+	}
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} text
+ * @returns {string}
+ */
+function escapeHtml(text) {
+	const div = document.createElement('div');
+	div.textContent = text;
+	return div.innerHTML;
+}
+
+/**
+ * Simple markdown rendering
+ * @param {string} text
+ * @returns {string}
+ */
+function renderMarkdown(text) {
+	return text
+		.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code class="language-$1">$2</code></pre>')
+		.replace(/`([^`]+)`/g, '<code>$1</code>')
+		.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+		.replace(/\*(.+?)\*/g, '<em>$1</em>')
+		.replace(/^### (.+)$/gm, '<h3>$1</h3>')
+		.replace(/^## (.+)$/gm, '<h2>$1</h2>')
+		.replace(/^# (.+)$/gm, '<h1>$1</h1>')
+		.replace(/\n/g, '<br>');
+}
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function normalizeFilename(value) {
+	return String(value || '').trim().toLowerCase();
+}
+
+/**
+ * @param {unknown} raw
+ * @returns {PanelState}
+ */
+function normalizePanelState(raw) {
+	const parsed = raw && typeof raw === 'object' ? /** @type {Record<string, unknown>} */ (raw) : {};
+	const rawCharts = parsed.charts && typeof parsed.charts === 'object'
+		? /** @type {Record<string, unknown>} */ (parsed.charts)
+		: {};
+	/** @type {Record<string, PanelChartState>} */
+	const charts = {};
+	let nextOrder = 1;
+	for (const [key, value] of Object.entries(rawCharts)) {
+		const filenameKey = normalizeFilename(key);
+		if (!filenameKey) {
+			continue;
+		}
+		const entry = value && typeof value === 'object' ? /** @type {Record<string, unknown>} */ (value) : {};
+		const parsedOrder = Number(entry.order);
+		const order = Number.isFinite(parsedOrder) && parsedOrder > 0 ? parsedOrder : nextOrder;
+		const hidden = entry.hidden === true;
+		const height = Number(entry.height);
+		const expanded = entry.expanded === true;
+		charts[filenameKey] = {
+			order,
+			hidden,
+			height: Number.isFinite(height) && height >= 120 ? height : undefined,
+			expanded,
+		};
+		nextOrder = Math.max(nextOrder, order + 1);
+	}
+	const summaryHidden = parsed.summaryHidden === true;
+	return { version: 1, charts, summaryHidden };
+}
+
+/**
+ * @returns {number}
+ */
+function getNextChartOrder() {
+	const entries = Object.values(state.panelState.charts);
+	if (entries.length === 0) {
+		return 1;
+	}
+	return entries.reduce((max, item) => Math.max(max, item.order), 0) + 1;
+}
+
+/**
+ * Ensure every discovered chart has a panel-state entry.
+ * @param {Array<object>} artifacts
+ * @returns {boolean}
+ */
+function ensurePanelStateForArtifacts(artifacts) {
+	let changed = false;
+	let nextOrder = getNextChartOrder();
+	for (const artifact of artifacts) {
+		if (artifact.type !== 'chart' && artifact.type !== 'image') {
+			continue;
+		}
+		const key = normalizeFilename(String(artifact.filename || ''));
+		if (!key) {
+			continue;
+		}
+		if (!state.panelState.charts[key]) {
+			state.panelState.charts[key] = { order: nextOrder++, hidden: false, height: undefined, expanded: false };
+			changed = true;
+		}
+	}
+	return changed;
+}
+
+/**
+ * @param {string} filename
+ * @returns {PanelChartState}
+ */
+function getChartPanelState(filename) {
+	const key = normalizeFilename(filename);
+	if (!state.panelState.charts[key]) {
+		state.panelState.charts[key] = { order: getNextChartOrder(), hidden: false, height: undefined, expanded: false };
+	}
+	return state.panelState.charts[key];
+}
+
+function setChartHeight(filename, heightPx) {
+	const chartState = getChartPanelState(filename);
+	chartState.height = heightPx >= 120 && heightPx <= 2000 ? heightPx : undefined;
+	savePanelState();
+}
+
+function setChartExpanded(filename, expanded) {
+	const chartState = getChartPanelState(filename);
+	chartState.expanded = expanded === true;
+	savePanelState();
+}
+
+/**
+ * Auto-fit Fleet iframe content on first load when no explicit panel height
+ * has been saved yet. This prevents an oversized empty area at the bottom
+ * while preserving click-to-expand behavior.
+ * @param {HTMLElement} card
+ */
+function autoFitFleetCardHeight(card) {
+	const filename = card?.dataset?.filename || '';
+	if (!filename) {
+		return;
+	}
+	const chartState = getChartPanelState(filename);
+	if (typeof chartState.height === 'number' && Number.isFinite(chartState.height)) {
+		return;
+	}
+	const content = /** @type {HTMLElement | null} */ (card.querySelector('.artifact-content'));
+	const iframe = /** @type {HTMLIFrameElement | null} */ (card.querySelector('.html-preview iframe'));
+	if (!content || !iframe) {
+		return;
+	}
+	let docHeight = 0;
+	try {
+		const doc = iframe.contentDocument;
+		const body = doc?.body;
+		const html = doc?.documentElement;
+		docHeight = Math.max(
+			body?.scrollHeight || 0,
+			body?.offsetHeight || 0,
+			html?.scrollHeight || 0,
+			html?.offsetHeight || 0,
+			html?.clientHeight || 0,
+		);
+	} catch {
+		return;
+	}
+	if (!Number.isFinite(docHeight) || docHeight <= 0) {
+		return;
+	}
+	const computed = window.getComputedStyle(content);
+	const paddingTop = Number.parseFloat(computed.paddingTop || '0') || 0;
+	const paddingBottom = Number.parseFloat(computed.paddingBottom || '0') || 0;
+	const targetHeight = Math.round(Math.max(320, Math.min(2000, docHeight + paddingTop + paddingBottom)));
+	content.style.height = `${targetHeight}px`;
+	content.style.minHeight = `${targetHeight}px`;
+	content.style.overflow = 'hidden';
+	syncEmbeddedPreviewSize(content);
+	setChartHeight(filename, targetHeight);
+}
+
+/**
+ * Keep embedded HTML previews sized to the resized card and trigger a resize
+ * event inside iframe widgets so responsive layouts can relayout.
+ * @param {HTMLElement} content
+ */
+function syncEmbeddedPreviewSize(content) {
+	const preview = content.querySelector('.html-preview');
+	if (preview instanceof HTMLElement) {
+		preview.style.height = '100%';
+		preview.style.minHeight = '0';
+	}
+	const iframe = content.querySelector('.html-preview iframe');
+	if (iframe instanceof HTMLIFrameElement) {
+		iframe.style.height = '100%';
+		iframe.style.minHeight = '0';
+		iframe.style.display = 'block';
+		try {
+			iframe.contentWindow?.dispatchEvent(new Event('resize'));
+		} catch {
+			// Cross-origin frame or transient load state; ignore.
+		}
+	}
+}
+
+/** @param {Element | null} card @param {string} filename */
+function attachResizeHandle(card, filename) {
+	if (!card || !filename) return;
+	const resizeHandle = card.querySelector('.resize-handle');
+	const contentEl = card.querySelector('.artifact-content');
+	if (!resizeHandle || !contentEl) return;
+	const cardEl = /** @type {HTMLElement} */ (card);
+	const content = /** @type {HTMLElement} */ (contentEl);
+	const minH = 120;
+	const maxH = 2000;
+	resizeHandle.addEventListener('mousedown', (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const startY = e.clientY;
+		const rect = content.getBoundingClientRect();
+		const startHeight = rect.height;
+		let didResize = false;
+		let rafId = 0;
+		const schedulePreviewResize = () => {
+			if (rafId) {
+				cancelAnimationFrame(rafId);
+			}
+			rafId = requestAnimationFrame(() => {
+				rafId = 0;
+				syncEmbeddedPreviewSize(content);
+			});
+		};
+		const onMove = (moveEvent) => {
+			const dy = moveEvent.clientY - startY;
+			if (Math.abs(dy) > 2) {
+				didResize = true;
+			}
+			let h = Math.round(startHeight + dy);
+			h = Math.max(minH, Math.min(maxH, h));
+			content.style.height = `${h}px`;
+			content.style.minHeight = `${h}px`;
+			content.style.overflow = 'hidden';
+			schedulePreviewResize();
+		};
+		const onUp = () => {
+			document.removeEventListener('mousemove', onMove);
+			document.removeEventListener('mouseup', onUp);
+			if (rafId) {
+				cancelAnimationFrame(rafId);
+				rafId = 0;
+			}
+			syncEmbeddedPreviewSize(content);
+			if (didResize) {
+				const finalHeight = content.getBoundingClientRect().height;
+				setChartHeight(filename, Math.round(finalHeight));
+				return;
+			}
+			const nextExpanded = !cardEl.classList.contains('expanded');
+			cardEl.classList.toggle('expanded', nextExpanded);
+			setChartExpanded(filename, nextExpanded);
+		};
+		document.addEventListener('mousemove', onMove);
+		document.addEventListener('mouseup', onUp);
+	});
+}
+
+function toggleSummarySection() {
+	state.panelState.summaryHidden = !state.panelState.summaryHidden;
+	applySummarySectionVisibility();
+	savePanelState();
+}
+
+function applySummarySectionVisibility() {
+	const section = document.getElementById('summary-section');
+	const btn = document.getElementById('summary-toggle-btn');
+	if (section) {
+		section.classList.toggle('collapsed', state.panelState.summaryHidden === true);
+	}
+	if (btn) {
+		btn.textContent = state.panelState.summaryHidden ? 'Show' : 'Hide';
+		btn.title = state.panelState.summaryHidden ? 'Show summary section' : 'Hide summary section';
+		btn.setAttribute('aria-label', state.panelState.summaryHidden ? 'Show summary' : 'Hide summary');
+	}
+}
+
+function savePanelState() {
+	panelApi.postMessage({
+		type: 'savePanelState',
+		panelId: PANEL_ID,
+		state: state.panelState,
+	});
+}
+
+/**
+ * @param {string} filename
+ * @param {'up' | 'down'} direction
+ * @param {string[]} activeChartKeys
+ */
+function moveChartInPanelState(filename, direction, activeChartKeys) {
+	const targetKey = normalizeFilename(filename);
+	if (!targetKey) {
+		return;
+	}
+	getChartPanelState(filename);
+	const orderedKeys = Object.entries(state.panelState.charts)
+		.sort((a, b) => a[1].order - b[1].order || a[0].localeCompare(b[0]))
+		.map(([key]) => key);
+	const index = orderedKeys.indexOf(targetKey);
+	if (index < 0) {
+		return;
+	}
+	const normalizedActiveKeys = new Set(
+		(activeChartKeys || []).map(key => normalizeFilename(key)).filter(Boolean),
+	);
+	normalizedActiveKeys.add(targetKey);
+	const step = direction === 'up' ? -1 : 1;
+	let swapIndex = index + step;
+	while (swapIndex >= 0 && swapIndex < orderedKeys.length) {
+		if (normalizedActiveKeys.has(orderedKeys[swapIndex])) {
+			break;
+		}
+		swapIndex += step;
+	}
+	if (swapIndex < 0 || swapIndex >= orderedKeys.length || swapIndex === index) {
+		return;
+	}
+	const [entry] = orderedKeys.splice(index, 1);
+	orderedKeys.splice(swapIndex, 0, entry);
+	orderedKeys.forEach((key, orderIndex) => {
+		const chart = state.panelState.charts[key];
+		chart.order = orderIndex + 1;
+	});
+	savePanelState();
+}
+
+/**
+ * @param {string} filename
+ */
+function toggleChartHiddenInPanelState(filename) {
+	const chartState = getChartPanelState(filename);
+	chartState.hidden = !chartState.hidden;
+	savePanelState();
+}
+
+// -----------------------------------------------------------------------------
+// Summary Cards
+// -----------------------------------------------------------------------------
+
+/**
+ * Render summary cards in the header
+ * @param {Array<{label: string, value: string, icon: string}>} cards
+ */
+function renderSummaryCards(cards) {
+	const container = document.getElementById('summary-cards');
+	if (!container) {
+		return;
+	}
+	if (!cards || cards.length === 0) {
+		renderSummaryPlaceholders();
+		return;
+	}
+
+	container.style.display = 'grid';
+	container.classList.remove('loading');
+	container.innerHTML = cards.map(card => `
+		<div class="metric-card">
+			<div class="metric-icon">${card.icon}</div>
+			<div class="metric-value">${escapeHtml(card.value)}</div>
+			<div class="metric-label">${escapeHtml(card.label)}</div>
+		</div>
+	`).join('');
+}
+
+/**
+ * Render summary placeholders while data is loading.
+ */
+function renderSummaryPlaceholders() {
+	const container = document.getElementById('summary-cards');
+	if (!container) {
+		return;
+	}
+
+	container.style.display = 'grid';
+	container.classList.add('loading');
+	container.innerHTML = Array.from({ length: 4 }).map(() => `
+		<div class="metric-card skeleton">
+			<div class="skeleton-line skeleton-icon"></div>
+			<div class="skeleton-line skeleton-value"></div>
+			<div class="skeleton-line skeleton-label"></div>
+		</div>
+	`).join('');
+}
+
+// -----------------------------------------------------------------------------
+// Gallery Rendering
+// -----------------------------------------------------------------------------
+
+/**
+ * Show a specific gallery state
+ * @param {'loading' | 'empty' | 'generating' | 'failed' | 'content'} stateName
+ */
+function showGalleryState(stateName) {
+	const states = ['loading-state', 'empty-state', 'generating-state', 'failed-state', 'gallery-content'];
+	for (const id of states) {
+		const el = document.getElementById(id);
+		if (el) {
+			el.style.display = id === `${stateName}-state` || id === `${stateName}` ? 'flex' : 'none';
+		}
+	}
+
+	// gallery-content needs 'block' not 'flex'
+	const content = document.getElementById('gallery-content');
+	if (content) {
+		content.style.display = stateName === 'content' ? 'block' : 'none';
+	}
+}
+
+/**
+ * Render the artifact gallery
+ * @param {Array<object>} artifacts
+ * @param {{ forceFreshHtml?: boolean }} [options]
+ */
+function renderGallery(artifacts, options) {
+	const forceFreshHtml = options?.forceFreshHtml === true;
+	const container = document.getElementById('gallery-content');
+	if (!container) {
+		return;
+	}
+	// Preserve existing HTML iframes across incremental refreshes when the
+	// artifact content version (modifiedAt) did not change.
+	/** @type {Map<string, HTMLIFrameElement>} */
+	const reusableHtmlPreviews = new Map();
+	container.querySelectorAll('.artifact-card').forEach((cardEl) => {
+		const card = /** @type {HTMLElement} */ (cardEl);
+		const path = card.dataset.path || '';
+		const modifiedAt = card.dataset.modifiedAt || '';
+		if (!path || !modifiedAt) {
+			return;
+		}
+		const iframe = /** @type {HTMLIFrameElement | null} */ (card.querySelector('.html-preview iframe'));
+		if (!iframe) {
+			return;
+		}
+		reusableHtmlPreviews.set(`${path}::${modifiedAt}`, iframe);
+	});
+
+	const layoutChanged = ensurePanelStateForArtifacts(artifacts);
+	if (layoutChanged && state.panelStateLoaded) {
+		savePanelState();
+	}
+
+	const visibleArtifacts = artifacts.filter((artifact) => {
+		const filename = String(artifact.filename || '').trim().toLowerCase();
+		// Hide artifacts matching galleryIgnorePatterns (suffix or exact name); list is from disabled-charts.yaml
+		const ignored = state.galleryIgnorePatterns.some((p) => {
+			const pattern = String(p).trim().toLowerCase();
+			return pattern && (filename.endsWith(pattern) || filename === pattern);
+		});
+		if (ignored) {
+			return false;
+		}
+		// Live Fleet iframe views: export JSON is pushed via viewExportSnapshot — skip gallery cards (Open/Delete).
+		if (activeViewIsLiveFleetSnapshot() && artifact.type !== 'chart' && artifact.type !== 'image') {
+			return false;
+		}
+		if (artifact.type !== 'chart' && artifact.type !== 'image') {
+			return true;
+		}
+		return !state.disabledCharts.has(filename);
+	});
+
+	const chartArtifacts = visibleArtifacts
+		.filter((artifact) => artifact.type === 'chart' || artifact.type === 'image')
+		.map((artifact) => ({
+			...artifact,
+			_panel: getChartPanelState(String(artifact.filename || '')),
+		}))
+		.sort((a, b) => {
+			if (a._panel.hidden !== b._panel.hidden) {
+				return a._panel.hidden ? 1 : -1;
+			}
+			if (a._panel.order !== b._panel.order) {
+				return a._panel.order - b._panel.order;
+			}
+			return new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime();
+		});
+	const interactiveChartKeys = chartArtifacts.map((artifact) => normalizeFilename(String(artifact.filename || '')));
+	const nonChartArtifacts = visibleArtifacts
+		.filter((artifact) => artifact.type !== 'chart')
+		.sort((a, b) => new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime());
+	const orderedArtifacts = [...chartArtifacts, ...nonChartArtifacts];
+
+	if (orderedArtifacts.length === 0) {
+		showGalleryState('empty');
+		return;
+	}
+
+	// Export JSON alongside the chart is normal for live fleet views — do not fall back to gallery layout.
+	const nonChartNonExportArtifacts = nonChartArtifacts.filter((artifact) => artifact.type !== 'export');
+	const fleetHtmlCharts = chartArtifacts.filter((artifact) => artifact.format === 'html');
+	const isFleetSingleHtml =
+		(fleetHtmlCharts.length >= 1 && activeViewIsLiveFleetSnapshot())
+		|| (activeViewUsesFleetDashboardLayout() &&
+			chartArtifacts.length === 1 &&
+			chartArtifacts[0].format === 'html' &&
+			nonChartNonExportArtifacts.length === 0);
+	if (isFleetSingleHtml) {
+		const artifact = fleetHtmlCharts[0];
+		const path = artifact.localPath || '';
+		const modifiedAt = String(artifact.modifiedAt || '');
+		const fleetFilename = String(artifact.filename || '').trim() || '__fleet__';
+		const chartState = getChartPanelState(fleetFilename);
+		const fleetExpandedClass = chartState.expanded ? ' expanded' : '';
+		const fleetHeightStyle = chartState.height
+			? `style="height: ${chartState.height}px; min-height: ${chartState.height}px; overflow: auto;"`
+			: '';
+		const existingFleetCard = /** @type {HTMLElement | null} */ (
+			container.querySelector('.fleet-dashboard-full.artifact-card')
+		);
+		// preserveFleetIframe views: keep the iframe mounted; data updates arrive via viewExportSnapshot postMessage.
+		let fleetIframeHasSnapshotShell = false;
+		if (activeViewPreservesFleetIframe() && existingFleetCard) {
+			const fleetIframe = existingFleetCard.querySelector('.html-preview iframe');
+			if (fleetIframe instanceof HTMLIFrameElement) {
+				try {
+					const doc = fleetIframe.contentDocument;
+					fleetIframeHasSnapshotShell =
+						doc?.body?.dataset?.fleetSnapshotShell === '1'
+						|| doc?.documentElement?.hasAttribute('data-live-fleet-shell');
+				} catch {
+					fleetIframeHasSnapshotShell = false;
+				}
+			}
+		}
+		if (
+			activeViewPreservesFleetIframe()
+			&& existingFleetCard
+			&& existingFleetCard.dataset.path === path
+			&& existingFleetCard.querySelector('.html-preview iframe')
+			&& fleetIframeHasSnapshotShell
+			&& !forceFreshHtml
+		) {
+			showGalleryState('content');
+			existingFleetCard.dataset.modifiedAt = modifiedAt;
+			attachResizeHandle(existingFleetCard, fleetFilename);
+			return;
+		}
+		const reusable = forceFreshHtml ? undefined : reusableHtmlPreviews.get(`${path}::${modifiedAt}`);
+		showGalleryState('content');
+		container.innerHTML = `
+			<div class="fleet-dashboard-full artifact-card${fleetExpandedClass}" data-path="${escapeHtml(path)}" data-filename="${escapeHtml(fleetFilename)}" data-modified-at="${escapeHtml(modifiedAt)}">
+				<div class="artifact-content" ${fleetHeightStyle}>
+					<div class="html-preview">${reusable ? '' : '<div class="html-preview-loading">Loading Fleet Operations...</div>'}</div>
+				</div>
+				<div class="resize-handle" data-filename="${escapeHtml(fleetFilename)}" title="Drag to resize height" role="separator"></div>
+			</div>
+		`;
+		if (reusable) {
+			const host = container.querySelector('.html-preview');
+			if (host) {
+				host.classList.add('ready');
+				host.appendChild(reusable);
+			}
+		} else {
+			requestHtmlPreviewContents([artifact]);
+		}
+		const fleetCard = container.querySelector('.artifact-card');
+		attachResizeHandle(fleetCard, fleetFilename);
+		if (fleetCard instanceof HTMLElement) {
+			fleetCard.addEventListener('click', (event) => {
+				const target = /** @type {HTMLElement | null} */ (event.target instanceof HTMLElement ? event.target : null);
+				if (target?.closest('button,.resize-handle')) {
+					return;
+				}
+				const nextExpanded = !fleetCard.classList.contains('expanded');
+				fleetCard.classList.toggle('expanded', nextExpanded);
+				setChartExpanded(fleetFilename, nextExpanded);
+			});
+		}
+		return;
+	}
+
+	showGalleryState('content');
+
+	const html = orderedArtifacts.map(artifact => {
+		const timeAgo = formatTimeAgo(new Date(artifact.modifiedAt));
+		const sizeFormatted = formatSize(artifact.size);
+		const isChart = artifact.type === 'chart';
+		const isImage = artifact.type === 'image';
+		const isVisual = isChart || isImage;
+		const chartState = isVisual ? artifact._panel : undefined;
+		const isHidden = chartState?.hidden === true;
+		const isExpanded = chartState?.expanded === true;
+		const order = Number.isFinite(chartState?.order) ? chartState.order : undefined;
+
+		// Render based on format
+		let content = '';
+		switch (artifact.format) {
+			case 'png':
+			case 'svg':
+			case 'jpg':
+				content = `<img src="${artifact.webviewUri}" alt="${escapeHtml(artifact.filename)}" loading="lazy" />`;
+				break;
+			case 'html':
+				content = `
+					<div class="html-preview" data-path="${escapeHtml(artifact.localPath)}">
+						<div class="html-preview-loading">Loading preview...</div>
+					</div>
+				`;
+				break;
+			case 'md':
+				content = `<div class="markdown-preview" data-path="${escapeHtml(artifact.localPath)}">Loading...</div>`;
+				break;
+			case 'csv':
+			case 'json':
+				content = `<div class="data-preview"><code>${escapeHtml(artifact.filename)}</code></div>`;
+				break;
+			default:
+				content = `<div class="data-preview"><code>${escapeHtml(artifact.filename)}</code></div>`;
+		}
+
+		// Find manifest entry for this artifact
+		const manifestEntry = state.manifest?.artifacts?.find(e => e.filename === artifact.filename);
+		const title = manifestEntry?.title || artifact.filename;
+		const generatorBadge = artifact.generator
+			? `<span class="generator-badge">${escapeHtml(artifact.generator)}</span>`
+			: '';
+		const sourceBadge = manifestEntry?.source === 'default'
+			? '<span class="source-badge">Auto</span>'
+			: '';
+		const hiddenBadge = isVisual && isHidden
+			? '<span class="layout-badge disabled">Hidden</span>'
+			: '';
+		const orderBadge = isVisual && Number.isFinite(order)
+			? `<span class="layout-badge">#${order}</span>`
+			: '';
+		const layoutActions = isVisual
+			? `
+				<button class="action-btn move-up-btn" title="Move up">↑</button>
+				<button class="action-btn move-down-btn" title="Move down">↓</button>
+				<button class="action-btn toggle-enabled-btn" title="${isHidden ? 'Show chart' : 'Hide chart'}">
+					${isHidden ? 'Show' : 'Hide'}
+				</button>
+			`
+			: '';
+		const contentHeightStyle = isVisual && chartState?.height
+			? `style="height: ${chartState.height}px; min-height: ${chartState.height}px; overflow: auto;"`
+			: '';
+		const resizeHandle = isVisual
+			? `<div class="resize-handle" data-filename="${escapeHtml(artifact.filename)}" title="Drag to resize height" role="separator"></div>`
+			: '';
+
+		return `
+			<div class="artifact-card ${isVisual && isHidden ? 'layout-disabled' : ''}${isExpanded ? ' expanded' : ''}" data-path="${escapeHtml(artifact.localPath)}" data-type="${artifact.type}" data-filename="${escapeHtml(artifact.filename)}" data-modified-at="${escapeHtml(String(artifact.modifiedAt || ''))}">
+				<div class="artifact-content" ${contentHeightStyle}>
+					${content}
+				</div>
+				<div class="artifact-meta">
+					<span class="artifact-name" title="${escapeHtml(artifact.filename)}">${escapeHtml(title)}</span>
+					${sourceBadge}
+					${hiddenBadge}
+					${orderBadge}
+					${generatorBadge}
+					<span class="artifact-time">${timeAgo}</span>
+					<span class="artifact-size">${sizeFormatted}</span>
+				</div>
+				<div class="artifact-actions">
+					<button class="action-btn open-btn" title="Open in editor">Open</button>
+					<button class="action-btn delete-btn" title="Delete artifact">Delete</button>
+					${layoutActions}
+				</div>
+				${resizeHandle}
+			</div>
+		`;
+	}).join('');
+
+	container.innerHTML = html;
+	/** @type {Array<object>} */
+	const htmlArtifactsNeedingFetch = [];
+	/** @type {Array<object>} */
+	const markdownArtifactsNeedingFetch = [];
+	container.querySelectorAll('.artifact-card').forEach((cardEl) => {
+		const card = /** @type {HTMLElement} */ (cardEl);
+		const path = card.dataset.path || '';
+		const modifiedAt = card.dataset.modifiedAt || '';
+		const htmlHost = /** @type {HTMLElement | null} */ (card.querySelector('.html-preview'));
+		if (htmlHost && path && modifiedAt) {
+			const reusable = forceFreshHtml ? undefined : reusableHtmlPreviews.get(`${path}::${modifiedAt}`);
+			if (reusable) {
+				htmlHost.classList.add('ready');
+				htmlHost.innerHTML = '';
+				htmlHost.appendChild(reusable);
+			} else {
+				const htmlArtifact = orderedArtifacts.find((item) => item.localPath === path && item.format === 'html');
+				if (htmlArtifact) {
+					htmlArtifactsNeedingFetch.push(htmlArtifact);
+				}
+			}
+		}
+
+		const markdownHost = /** @type {HTMLElement | null} */ (card.querySelector('.markdown-preview'));
+		if (markdownHost && path) {
+			const markdownArtifact = orderedArtifacts.find((item) => item.localPath === path && item.format === 'md');
+			if (markdownArtifact) {
+				markdownArtifactsNeedingFetch.push(markdownArtifact);
+			}
+		}
+	});
+	requestHtmlPreviewContents(htmlArtifactsNeedingFetch);
+	requestMarkdownPreviewContents(markdownArtifactsNeedingFetch);
+
+	// Attach event handlers
+	container.querySelectorAll('.artifact-card').forEach(cardEl => {
+		const card = /** @type {HTMLElement} */ (cardEl);
+		const path = card.dataset.path;
+		const filename = card.dataset.filename;
+		const isChart = card.dataset.type === 'chart';
+		const isVisual = card.dataset.type === 'chart' || card.dataset.type === 'image';
+
+		card.querySelector('.open-btn')?.addEventListener('click', (e) => {
+			e.stopPropagation();
+			panelApi.postMessage({ type: 'openArtifact', path });
+		});
+
+		card.querySelector('.delete-btn')?.addEventListener('click', (e) => {
+			e.stopPropagation();
+			panelApi.postMessage({ type: 'deleteArtifact', path });
+		});
+
+		if (isChart && filename) {
+			card.querySelector('.move-up-btn')?.addEventListener('click', (e) => {
+				e.stopPropagation();
+				moveChartInPanelState(filename, 'up', interactiveChartKeys);
+				renderGallery(state.artifacts);
+			});
+
+			card.querySelector('.move-down-btn')?.addEventListener('click', (e) => {
+				e.stopPropagation();
+				moveChartInPanelState(filename, 'down', interactiveChartKeys);
+				renderGallery(state.artifacts);
+			});
+
+			card.querySelector('.toggle-enabled-btn')?.addEventListener('click', (e) => {
+				e.stopPropagation();
+				toggleChartHiddenInPanelState(filename);
+				renderGallery(state.artifacts);
+			});
+		}
+
+		// Click on card to expand/collapse
+		card.addEventListener('click', (event) => {
+			const target = /** @type {HTMLElement | null} */ (event.target instanceof HTMLElement ? event.target : null);
+			if (target?.closest('button,.resize-handle')) {
+				return;
+			}
+			const nextExpanded = !card.classList.contains('expanded');
+			card.classList.toggle('expanded', nextExpanded);
+			if (isVisual && filename) {
+				setChartExpanded(filename, nextExpanded);
+			}
+		});
+
+		if (filename) {
+			attachResizeHandle(card, filename);
+		}
+	});
+
+	// Markdown previews are loaded via host message passing (artifactContent)
+	// to avoid fetch restrictions for local report files.
+}
+
+/**
+ * Build a compact signature for artifact catalog identity.
+ * Used to avoid expensive no-op rerenders on duplicate updates.
+ * @param {Array<object>} artifacts
+ * @returns {string}
+ */
+function getArtifactCatalogSignature(artifacts) {
+	return artifacts
+		.map((artifact) => [
+			String(artifact.localPath || ''),
+			String(artifact.modifiedAt || ''),
+			String(artifact.size || ''),
+			String(artifact.format || ''),
+			String(artifact.type || ''),
+		].join('|'))
+		.sort()
+		.join('\n');
+}
+
+/** Signature ignoring export files — chart HTML identity for preserveFleetIframe fast path. */
+function getArtifactCatalogSignatureExcludingExports(artifacts) {
+	return getArtifactCatalogSignature(artifacts.filter((artifact) => artifact.type !== 'export'));
+}
+
+/**
+ * Add nonce to inline script tags so they can run in srcdoc.
+ * @param {string} html
+ * @param {string} nonce
+ * @returns {string}
+ */
+function injectNonceIntoInlineScripts(html, nonce) {
+	if (!nonce) {
+		return html;
+	}
+	return html.replace(/<script(?![^>]*\bnonce=)([^>]*)>/gi, `<script nonce="${nonce}"$1>`);
+}
+
+/**
+ * Inject a keyboard shortcut bridge for embedded iframe widgets so common
+ * shortcuts (Ctrl/Cmd+A/C/X/V) work reliably in webview sandboxes.
+ * @param {string} html
+ * @param {string} nonce
+ * @returns {string}
+ */
+function injectIframeKeyboardShortcutBridge(html, nonce) {
+	const bridge = `<script nonce="${nonce}">(function(){
+		try {
+			var pending = new Map();
+			function requestClipboardText() {
+				return new Promise(function(resolve){
+					var requestId = 'clip-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+					var timer = setTimeout(function(){ pending.delete(requestId); resolve(''); }, 1500);
+					pending.set(requestId, { resolve: resolve, timer: timer });
+					window.parent.postMessage({ source: 'agentide-wow-widget', type: 'requestClipboardText', requestId: requestId }, '*');
+				});
+			}
+			window.addEventListener('message', function(event){
+				var payload = event.data;
+				if (!payload || payload.source !== 'agentide-panel' || payload.type !== 'clipboardText') return;
+				var entry = pending.get(payload.requestId);
+				if (!entry) return;
+				clearTimeout(entry.timer);
+				pending.delete(payload.requestId);
+				entry.resolve(typeof payload.text === 'string' ? payload.text : '');
+			});
+			function getEditable(target) {
+				if (!target) return null;
+				if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return target;
+				if (target instanceof HTMLElement && target.isContentEditable) return target;
+				if (target instanceof HTMLElement) {
+					var parentEditable = target.closest('[contenteditable=""],[contenteditable="true"]');
+					return parentEditable instanceof HTMLElement ? parentEditable : null;
+				}
+				return null;
+			}
+			function writeClipboardText(text) {
+				var value = String(text || '');
+				if (!value) return;
+				try {
+					if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+						void navigator.clipboard.writeText(value).catch(function(){
+							window.parent.postMessage({ source: 'agentide-wow-widget', type: 'writeClipboardText', text: value }, '*');
+						});
+						return;
+					}
+				} catch (_err) {
+					// fall back to host bridge
+				}
+				window.parent.postMessage({ source: 'agentide-wow-widget', type: 'writeClipboardText', text: value }, '*');
+			}
+			function selectAll(editable) {
+				if (editable instanceof HTMLInputElement || editable instanceof HTMLTextAreaElement) {
+					editable.focus();
+					editable.selectionStart = 0;
+					editable.selectionEnd = editable.value.length;
+					return;
+				}
+				if (editable instanceof HTMLElement) {
+					var range = document.createRange();
+					range.selectNodeContents(editable);
+					var selection = window.getSelection();
+					if (!selection) return;
+					selection.removeAllRanges();
+					selection.addRange(range);
+				}
+			}
+			function getSelectedText(editable) {
+				if (editable instanceof HTMLInputElement || editable instanceof HTMLTextAreaElement) {
+					var start = Number.isFinite(editable.selectionStart) ? editable.selectionStart : 0;
+					var end = Number.isFinite(editable.selectionEnd) ? editable.selectionEnd : 0;
+					if (end <= start) return '';
+					return editable.value.slice(start, end);
+				}
+				var selection = window.getSelection();
+				return selection ? String(selection.toString() || '') : '';
+			}
+			function replaceSelection(editable, text) {
+				if (editable instanceof HTMLInputElement || editable instanceof HTMLTextAreaElement) {
+					var start = Number.isFinite(editable.selectionStart) ? editable.selectionStart : editable.value.length;
+					var end = Number.isFinite(editable.selectionEnd) ? editable.selectionEnd : editable.value.length;
+					var before = editable.value.slice(0, start);
+					var after = editable.value.slice(end);
+					editable.value = before + text + after;
+					var caret = start + text.length;
+					editable.selectionStart = caret;
+					editable.selectionEnd = caret;
+					editable.dispatchEvent(new Event('input', { bubbles: true }));
+					return;
+				}
+				if (!(editable instanceof HTMLElement)) return;
+				var selection = window.getSelection();
+				if (!selection || selection.rangeCount === 0) return;
+				var range = selection.getRangeAt(0);
+				range.deleteContents();
+				var node = document.createTextNode(text);
+				range.insertNode(node);
+				range.setStartAfter(node);
+				range.collapse(true);
+				selection.removeAllRanges();
+				selection.addRange(range);
+			}
+			document.addEventListener('keydown', function(event){
+				if (event.defaultPrevented || event.altKey || !(event.metaKey || event.ctrlKey)) return;
+				var key = String(event.key || '').toLowerCase();
+				var editable = getEditable(document.activeElement) || getEditable(event.target);
+				if (key === 'a') {
+					if (!editable) return;
+					event.preventDefault();
+					selectAll(editable);
+					return;
+				}
+				if (key === 'c') {
+					var selected = getSelectedText(editable || null);
+					if (!selected) return;
+					event.preventDefault();
+					writeClipboardText(selected);
+					return;
+				}
+				if (key === 'x') {
+					if (!editable) return;
+					var selectedForCut = getSelectedText(editable);
+					if (!selectedForCut) return;
+					event.preventDefault();
+					writeClipboardText(selectedForCut);
+					replaceSelection(editable, '');
+					return;
+				}
+				if (key === 'v') {
+					if (!editable) return;
+					event.preventDefault();
+					void requestClipboardText().then(function(text){
+						if (!text) return;
+						replaceSelection(editable, text);
+					});
+				}
+			}, true);
+			document.addEventListener('copy', function(event){
+				if (event.defaultPrevented) return;
+				var editable = getEditable(document.activeElement) || getEditable(event.target);
+				var selected = getSelectedText(editable || null);
+				if (!selected) return;
+				if (event.clipboardData) {
+					event.clipboardData.setData('text/plain', selected);
+					event.preventDefault();
+				}
+				writeClipboardText(selected);
+			}, true);
+			document.addEventListener('cut', function(event){
+				if (event.defaultPrevented) return;
+				var editable = getEditable(document.activeElement) || getEditable(event.target);
+				if (!editable) return;
+				var selected = getSelectedText(editable);
+				if (!selected) return;
+				if (event.clipboardData) {
+					event.clipboardData.setData('text/plain', selected);
+					event.preventDefault();
+				}
+				writeClipboardText(selected);
+				replaceSelection(editable, '');
+			}, true);
+			document.addEventListener('paste', function(event){
+				if (event.defaultPrevented) return;
+				var editable = getEditable(document.activeElement) || getEditable(event.target);
+				if (!editable) return;
+				if (event.clipboardData && event.clipboardData.getData('text')) return;
+				event.preventDefault();
+				void requestClipboardText().then(function(text){
+					if (!text) return;
+					replaceSelection(editable, text);
+				});
+			}, true);
+		} catch (err) {
+			// no-op
+		}
+	})();</script>`;
+	if (/<\/body>/i.test(html)) {
+		return html.replace(/<\/body>/i, `${bridge}</body>`);
+	}
+	return `${html}${bridge}`;
+}
+
+/**
+ * Ask host to read HTML artifact contents by local path.
+ * This avoids webview URL fetch/DNS issues for nested iframe previews.
+ * @param {Array<object>} artifacts
+ */
+function requestHtmlPreviewContents(artifacts) {
+	for (const artifact of artifacts) {
+		if (artifact.format !== 'html' || !artifact.localPath) {
+			continue;
+		}
+		panelApi.postMessage({
+			type: 'requestArtifactContent',
+			path: artifact.localPath,
+			format: 'html',
+		});
+	}
+}
+
+/**
+ * Ask host to read markdown artifact contents by local path.
+ * @param {Array<object>} artifacts
+ */
+function requestMarkdownPreviewContents(artifacts) {
+	for (const artifact of artifacts) {
+		if (artifact.format !== 'md' || !artifact.localPath) {
+			continue;
+		}
+		panelApi.postMessage({
+			type: 'requestArtifactContent',
+			path: artifact.localPath,
+			format: 'md',
+		});
+	}
+}
+
+/**
+ * Render HTML preview for one artifact path from host-provided content.
+ * @param {string} path
+ * @param {string | undefined} content
+ * @param {string | undefined} error
+ */
+function renderHtmlPreview(path, content, error) {
+	const card = Array.from(document.querySelectorAll('.artifact-card')).find((cardEl) => {
+		const element = /** @type {HTMLElement} */ (cardEl);
+		return element.dataset.path === path;
+	});
+	const host = /** @type {HTMLElement | null} */ (card?.querySelector('.html-preview'));
+	if (!host) {
+		return;
+	}
+
+	if (error || !content) {
+		const reason = error || 'No preview content available.';
+		host.innerHTML = `<div class="html-preview-fallback">Preview unavailable (${escapeHtml(reason)}). Use <strong>Open</strong> to inspect the artifact.</div>`;
+		return;
+	}
+
+	const scriptNonce = document.querySelector('script[nonce]')?.getAttribute('nonce') || '';
+	const iframe = document.createElement('iframe');
+	iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+	iframe.setAttribute('allow', 'clipboard-read; clipboard-write');
+	iframe.setAttribute('loading', 'lazy');
+	iframe.tabIndex = 0;
+	const contentWithNonce = injectNonceIntoInlineScripts(content, scriptNonce);
+	iframe.srcdoc = injectIframeKeyboardShortcutBridge(contentWithNonce, scriptNonce);
+	iframe.addEventListener('load', () => {
+		host.classList.add('ready');
+		const parentCard = host.closest('.artifact-card');
+		if (parentCard instanceof HTMLElement && parentCard.classList.contains('fleet-dashboard-full')) {
+			autoFitFleetCardHeight(parentCard);
+		}
+	});
+	host.innerHTML = '';
+	host.appendChild(iframe);
+}
+
+// -----------------------------------------------------------------------------
+// Quick Prompts & Ask AI
+// -----------------------------------------------------------------------------
+
+function initQuickPrompts() {
+	// Quick prompt buttons in empty state
+	document.querySelectorAll('.quick-prompt').forEach(buttonEl => {
+		const btn = /** @type {HTMLElement} */ (buttonEl);
+		btn.addEventListener('click', () => {
+			const prompt = btn.dataset.prompt;
+			if (prompt) {
+				panelApi.postMessage({ type: 'openChatWithPrompt', prompt });
+			}
+		});
+	});
+
+	// Main "Ask AI" button
+	document.getElementById('ask-ai-btn')?.addEventListener('click', () => {
+		panelApi.postMessage({ type: 'openChat' });
+	});
+
+	// Refresh button
+	document.getElementById('refresh-charts-btn')?.addEventListener('click', () => {
+		refreshCurrentView();
+	});
+
+	// Remove legacy Expand/Shrink buttons if a user-customized panel.html still contains them.
+	document.getElementById('expand-sidebar-btn')?.remove();
+	document.getElementById('shrink-sidebar-btn')?.remove();
+
+	document.getElementById('summary-toggle-btn')?.addEventListener('click', (e) => {
+		e.stopPropagation();
+		toggleSummarySection();
+	});
+	applySummarySectionVisibility();
+}
+
+// -----------------------------------------------------------------------------
+// Filters
+// -----------------------------------------------------------------------------
+
+function applyFiltersToControls() {
+	const agentSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('agent-filter-select'));
+	if (agentSelect) {
+		agentSelect.innerHTML = '<option value="">All agents</option>';
+		for (const agentId of state.agentIds) {
+			const option = document.createElement('option');
+			option.value = agentId;
+			option.textContent = agentId;
+			agentSelect.appendChild(option);
+		}
+		agentSelect.value = state.agentId || '';
+	}
+}
+
+function postFilterUpdate() {
+	panelApi.postMessage({
+		type: 'updateFilters',
+		agentId: state.agentId || '',
+	});
+}
+
+function initFilters() {
+	const agentSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('agent-filter-select'));
+	agentSelect?.addEventListener('change', () => {
+		state.agentId = agentSelect.value || '';
+		postFilterUpdate();
+	});
+}
+
+// -----------------------------------------------------------------------------
+// State Actions
+// -----------------------------------------------------------------------------
+
+function initStateActions() {
+	// Cancel generation
+	document.getElementById('cancel-generate-btn')?.addEventListener('click', () => {
+		panelApi.postMessage({ type: 'cancelGeneration' });
+	});
+
+	// Retry generation
+	document.getElementById('retry-generate-btn')?.addEventListener('click', () => {
+		panelApi.postMessage({ type: 'retryGeneration' });
+	});
+}
+
+// -----------------------------------------------------------------------------
+// Toolbar Menu
+// -----------------------------------------------------------------------------
+
+function initToolbarMenu() {
+	const menuBtn = document.getElementById('toolbar-menu-btn');
+	const dropdown = document.getElementById('toolbar-menu-dropdown');
+
+	if (!menuBtn || !dropdown) {
+		return;
+	}
+
+	/**
+	 * Toggle dropdown visibility.
+	 * @param {boolean} [forceOpen]
+	 */
+	function toggleMenu(forceOpen) {
+		const isOpen = forceOpen ?? !dropdown.classList.contains('open');
+		dropdown.classList.toggle('open', isOpen);
+		dropdown.setAttribute('aria-hidden', String(!isOpen));
+		menuBtn.setAttribute('aria-expanded', String(isOpen));
+	}
+
+	// Toggle on button click
+	menuBtn.addEventListener('click', (e) => {
+		e.stopPropagation();
+		toggleMenu();
+	});
+
+	// Close when clicking outside
+	document.addEventListener('click', (e) => {
+		if (!dropdown.contains(/** @type {Node} */(e.target)) && e.target !== menuBtn) {
+			toggleMenu(false);
+		}
+	});
+
+	// Close on Escape
+	document.addEventListener('keydown', (e) => {
+		if (e.key === 'Escape' && dropdown.classList.contains('open')) {
+			toggleMenu(false);
+			menuBtn.focus();
+		}
+	});
+
+	// Handle menu item clicks
+	dropdown.querySelectorAll('.dropdown-item[data-action]').forEach((itemEl) => {
+		const item = /** @type {HTMLElement} */ (itemEl);
+		item.addEventListener('click', () => {
+			const action = item.dataset.action;
+			toggleMenu(false);
+			const activeView = getActiveView();
+
+			switch (action) {
+				case 'new-view':
+					promptCreateView();
+					break;
+
+				case 'duplicate-view':
+					if (activeView?.id) {
+						panelApi.postMessage({ type: 'duplicateView', viewId: activeView.id });
+					}
+					break;
+
+				case 'rename-view': {
+					if (!activeView || activeView.system) {
+						break;
+					}
+					panelApi.postMessage({ type: 'requestRenameView', viewId: activeView.id });
+					break;
+				}
+
+				case 'delete-view': {
+					if (!activeView || activeView.system) {
+						break;
+					}
+					panelApi.postMessage({ type: 'requestDeleteView', viewId: activeView.id });
+					break;
+				}
+
+				case 'edit-view-scripts':
+					panelApi.postMessage({ type: 'editViewScripts', viewId: activeView?.id });
+					break;
+
+				case 'share-scripts-only':
+					onShareScriptsOnlyClick();
+					break;
+
+				case 'refresh-all-views':
+					panelApi.postMessage({ type: 'refreshAllViews' });
+					break;
+
+				case 'reset-home':
+					if (confirm('Reset all charts and scripts in your home analytics folder? This will delete generated charts and user scripts, then regenerate defaults.')) {
+						panelApi.postMessage({ type: 'resetChartsHome' });
+					}
+					break;
+
+				case 'reset-workspace':
+					if (confirm('Reset all charts and scripts in this workspace? This will delete generated charts and user scripts for the current workspace, then regenerate defaults.')) {
+						panelApi.postMessage({ type: 'resetChartsWorkspace' });
+					}
+					break;
+
+				case 'reenable-charts':
+					panelApi.postMessage({ type: 'reenableAllCharts' });
+					break;
+			}
+		});
+	});
+}
+
+/**
+ * Push a view export snapshot into embedded dashboard iframes (no iframe reload).
+ * Only when the active view has preserveFleetIframe (host already gates pushes).
+ * @param {{ payload?: object, meta?: object }} message
+ */
+function postViewExportSnapshotToDashboardIframes(message) {
+	const payload = message.payload;
+	const meta = message.meta;
+	document.querySelectorAll('.html-preview iframe').forEach((frameEl) => {
+		const iframe = /** @type {HTMLIFrameElement} */ (frameEl);
+		try {
+			iframe.contentWindow?.postMessage({ type: VIEW_EXPORT_SNAPSHOT, payload, meta }, '*');
+			// Legacy widgets (e.g. live-fleet-2.html) still listen for liveFleetSnapshot.
+			iframe.contentWindow?.postMessage({ type: LEGACY_VIEW_EXPORT_SNAPSHOT, payload, meta }, '*');
+		} catch {
+			// Cross-origin or unloaded iframe — ignore.
+		}
+	});
+}
+
+/**
+ * Bridge postMessage events from embedded HTML widgets.
+ * Allows widgets to trigger host actions (e.g. copy session id).
+ */
+function initEmbeddedWidgetBridge() {
+	window.addEventListener('message', (event) => {
+		const data = event.data;
+		if (!data || typeof data !== 'object') {
+			return;
+		}
+		if (data.source !== 'agentide-wow-widget') {
+			return;
+		}
+		if (data.type === 'copySessionId' && typeof data.sessionId === 'string') {
+			const sessionId = data.sessionId.trim();
+			if (sessionId) {
+				panelApi.postMessage({ type: 'copySessionId', sessionId });
+			}
+			return;
+		}
+		if (data.type === 'requestClipboardText' && typeof data.requestId === 'string') {
+			const requestId = data.requestId.trim();
+			if (requestId) {
+				panelApi.postMessage({ type: 'requestClipboardText', requestId });
+			}
+			return;
+		}
+		if (data.type === 'writeClipboardText' && typeof data.text === 'string') {
+			panelApi.postMessage({ type: 'writeClipboardText', text: data.text });
+			return;
+		}
+		if (data.type === 'openArtifact' && typeof data.path === 'string') {
+			const artifactPath = data.path.trim();
+			if (artifactPath) {
+				panelApi.postMessage({ type: 'openArtifact', path: artifactPath });
+			}
+			return;
+		}
+		if (data.type === 'openChatWithPrompt' && typeof data.prompt === 'string') {
+			const prompt = data.prompt.trim();
+			if (prompt) {
+				panelApi.postMessage({
+					type: 'openChatWithPrompt',
+					prompt: prompt.slice(0, 12_000),
+				});
+			}
+			return;
+		}
+		if (data.type === 'disconnectFleetChannel' && typeof data.sessionId === 'string') {
+			const sessionId = data.sessionId.trim();
+			if (sessionId) {
+				panelApi.postMessage({
+					type: 'disconnectFleetChannel',
+					sessionId,
+					channelType: typeof data.channelType === 'string' ? data.channelType : '',
+					channelTarget: typeof data.channelTarget === 'string' ? data.channelTarget : '',
+				});
+			}
+			return;
+		}
+		if (data.type === 'updateFleetCardTitle' && typeof data.sessionId === 'string' && typeof data.cardTitle === 'string') {
+			const sessionId = data.sessionId.trim();
+			const sourceId = typeof data.sourceId === 'string' ? data.sourceId.trim() : 'local';
+			if (sessionId) {
+				panelApi.postMessage({
+					type: 'updateFleetCardTitle',
+					sourceId,
+					sessionId,
+					cardTitle: data.cardTitle,
+				});
+			}
+			return;
+		}
+		if (data.type === 'openSpotlightForSession' && typeof data.sessionId === 'string') {
+			const sessionId = data.sessionId.trim();
+			if (sessionId) {
+				panelApi.postMessage({
+					type: 'openSpotlightForSession',
+					sessionId,
+					channelType: typeof data.channelType === 'string' ? data.channelType : '',
+					channelTarget: typeof data.channelTarget === 'string' ? data.channelTarget : '',
+					model: typeof data.model === 'string' ? data.model : '',
+					engine: typeof data.engine === 'string' ? data.engine : '',
+					agentId: typeof data.agentId === 'string' ? data.agentId : '',
+				});
+			}
+			return;
+		}
+		if (data.type === 'refreshView') {
+			panelApi.postMessage({ type: 'refreshView' });
+			return;
+		}
+		if (data.type === 'refreshFleetWidget') {
+			panelApi.postMessage({ type: 'refreshFleetWidget' });
+			return;
+		}
+		if (data.type === 'refreshWidget') {
+			const script = typeof data.script === 'string' ? data.script.trim() : '';
+			const scripts = Array.isArray(data.scripts)
+				? data.scripts.filter((s) => typeof s === 'string').map((s) => s.trim()).filter(Boolean)
+				: [];
+			if (!script && scripts.length === 0) {
+				return;
+			}
+			panelApi.postMessage({
+				type: 'refreshWidget',
+				script: script || undefined,
+				scripts: scripts.length > 0 ? scripts : undefined,
+			});
+			return;
+		}
+		if (data.type === REQUEST_VIEW_EXPORT_SNAPSHOT || data.type === LEGACY_REQUEST_LIVE_FLEET_SNAPSHOT) {
+			panelApi.postMessage({ type: REQUEST_VIEW_EXPORT_SNAPSHOT });
+			return;
+		}
+		if (data.type === 'openChat') {
+			panelApi.postMessage({ type: 'openChat' });
+		}
+	});
+
+	// Fallback: forward openSpotlightForSession when message is from a frame that didn't set
+	// source (e.g. fleet iframe in some contexts) so card click always opens chat
+	window.addEventListener('message', (event) => {
+		const data = event.data;
+		if (!data || typeof data !== 'object' || data.type !== 'openSpotlightForSession') {
+			return;
+		}
+		if (data.source === 'agentide-wow-widget') {
+			return; // already handled above
+		}
+		if (typeof data.sessionId !== 'string') {
+			return;
+		}
+		const sessionId = data.sessionId.trim();
+		if (!sessionId) {
+			return;
+		}
+		panelApi.postMessage({
+			type: 'openSpotlightForSession',
+			sessionId,
+			channelType: typeof data.channelType === 'string' ? data.channelType : '',
+			channelTarget: typeof data.channelTarget === 'string' ? data.channelTarget : '',
+			model: typeof data.model === 'string' ? data.model : '',
+			engine: typeof data.engine === 'string' ? data.engine : '',
+			agentId: typeof data.agentId === 'string' ? data.agentId : '',
+		});
+	});
+}
+
+/**
+ * Show generating state
+ */
+function showGeneratingState() {
+	showGalleryState('generating');
+}
+
+/**
+ * Show failed state with error message
+ * @param {string} errorMessage
+ */
+function showFailedState(errorMessage) {
+	const errorEl = document.getElementById('error-message');
+	if (errorEl) {
+		errorEl.textContent = errorMessage;
+	}
+	showGalleryState('failed');
+}
+
+/**
+ * Show refresh hint
+ */
+function showRefreshHint() {
+	const hint = document.getElementById('refresh-hint');
+	if (hint) {
+		hint.style.display = 'flex';
+	}
+}
+
+/**
+ * Hide refresh hint
+ */
+function hideRefreshHint() {
+	const hint = document.getElementById('refresh-hint');
+	if (hint) {
+		hint.style.display = 'none';
+	}
+}
+
+/**
+ * Show/hide per-chart refresh indicator.
+ * @param {boolean} isRefreshing
+ */
+function setPerChartRefreshing(isRefreshing) {
+	document.querySelectorAll('.artifact-card[data-type="chart"]').forEach(card => {
+		card.classList.toggle('chart-refreshing', isRefreshing);
+		let indicator = card.querySelector('.artifact-refresh-indicator');
+
+		if (isRefreshing) {
+			if (!indicator) {
+				indicator = document.createElement('div');
+				indicator.className = 'artifact-refresh-indicator';
+				indicator.textContent = 'Refreshing';
+				card.appendChild(indicator);
+			}
+		} else if (indicator) {
+			indicator.remove();
+		}
+	});
+}
+
+/**
+ * Toggle refresh button busy state.
+ * @param {boolean} isRefreshing
+ */
+function setRefreshButtonState(isRefreshing) {
+	const btn = document.getElementById('refresh-charts-btn');
+	if (!btn) {
+		return;
+	}
+	btn.classList.toggle('refreshing', isRefreshing);
+}
+
+// -----------------------------------------------------------------------------
+// Message Handling
+// -----------------------------------------------------------------------------
+
+panelApi.onMessage(msg => {
+	switch (msg.type) {
+		case 'artifactsUpdated': {
+			const nextSignature = getArtifactCatalogSignature(msg.artifacts);
+			const nextActiveViewId = typeof msg.activeViewId === 'string' ? msg.activeViewId : state.activeViewId;
+		const nextFleetRefreshVersion = typeof msg.fleetRefreshVersion === 'number'
+			? Math.max(0, Math.floor(msg.fleetRefreshVersion))
+			: state.fleetRefreshVersion;
+		const nextGalleryIgnore = Array.isArray(msg.galleryIgnorePatterns)
+			? msg.galleryIgnorePatterns.filter((p) => typeof p === 'string').map((p) => String(p).trim()).filter(Boolean)
+			: [];
+		const isFleetView = nextActiveViewId === 'fleet';
+		const exportOnlyCatalogChange =
+			activeViewPreservesFleetIframe()
+			&& nextSignature !== state.lastArtifactCatalogSignature
+			&& getArtifactCatalogSignatureExcludingExports(msg.artifacts)
+				=== getArtifactCatalogSignatureExcludingExports(state.artifacts);
+		// preserveFleetIframe views (default for fleet-dashboard layout) keep the iframe mounted
+		// and rely on viewExportSnapshot postMessages for updates — the widget's DOM-diff
+		// renderer applies them in-place. Non-preserve flows still reload when version bumps.
+		const hasFleetVersionUpdate =
+			isFleetView
+			&& nextFleetRefreshVersion > state.fleetRefreshVersion
+			&& !activeViewPreservesFleetIframe();
+		// Skip only when signature unchanged and not refreshing, unless Fleet explicitly signaled fresher data.
+		if (nextSignature === state.lastArtifactCatalogSignature && !state.isRefreshing && !hasFleetVersionUpdate) {
+			break;
+		}
+		state.lastArtifactCatalogSignature = nextSignature;
+		state.artifacts = msg.artifacts;
+		state.galleryIgnorePatterns = nextGalleryIgnore;
+		// View selection is owned by viewsLoaded; do not let artifact batches revert the dropdown.
+		if (
+			nextActiveViewId === state.activeViewId
+			|| !state.views.some((view) => view.id === state.activeViewId)
+		) {
+			state.activeViewId = nextActiveViewId;
+		}
+		state.fleetRefreshVersion = nextFleetRefreshVersion;
+		applyFleetAutoRefresh();
+		if (exportOnlyCatalogChange) {
+			// Export JSON changed; host already pushes viewExportSnapshot — avoid gallery/iframe rebuild.
+			break;
+		}
+		// Fleet JSON can change without agent-fleet.html mtime changing if the host
+		// did not re-run the widget script; bumping fleetRefreshVersion means data is
+		// fresher — force a preview reload so the iframe is not reused with stale HTML.
+		renderGallery(state.artifacts, { forceFreshHtml: hasFleetVersionUpdate });
+			if (state.isRefreshing) {
+				setPerChartRefreshing(true);
+			}
+			break;
+		}
+
+		case 'artifactDeleted': {
+			// Remove from gallery with animation
+			const card = document.querySelector(`[data-path="${msg.path}"]`);
+			if (card) {
+				card.classList.add('deleting');
+				setTimeout(() => card.remove(), 300);
+
+				// Update state
+				state.artifacts = state.artifacts.filter(a => a.localPath !== msg.path);
+
+				// Check if gallery is now empty
+				if (state.artifacts.length === 0) {
+					showGalleryState('empty');
+				}
+			}
+			break;
+		}
+
+		case 'summaryCards':
+			state.summaryCards = msg.cards;
+			renderSummaryCards(msg.cards);
+			break;
+
+		case 'manifestUpdated':
+			state.manifest = msg.manifest;
+			// Re-render gallery with new manifest data
+			if (state.artifacts.length > 0) {
+				renderGallery(state.artifacts);
+			}
+			break;
+
+		case VIEW_EXPORT_SNAPSHOT:
+		case LEGACY_VIEW_EXPORT_SNAPSHOT:
+			postViewExportSnapshotToDashboardIframes(msg);
+			break;
+
+		case 'artifactContent':
+			if (msg.path && msg.format === 'html') {
+				renderHtmlPreview(msg.path, msg.content, msg.error);
+			}
+			if (msg.path && msg.format === 'md') {
+				const card = Array.from(document.querySelectorAll('.artifact-card')).find((cardEl) => {
+					const element = /** @type {HTMLElement} */ (cardEl);
+					return element.dataset.path === msg.path;
+				});
+				const host = /** @type {HTMLElement | null} */ (card?.querySelector('.markdown-preview'));
+				if (host) {
+					if (msg.error || !msg.content) {
+						host.innerHTML = '<em>Failed to load preview</em>';
+					} else {
+						host.innerHTML = renderMarkdown(msg.content);
+					}
+				}
+			}
+			break;
+
+		case 'clipboardText':
+			document.querySelectorAll('.html-preview iframe').forEach((frame) => {
+				const iframe = /** @type {HTMLIFrameElement} */ (frame);
+				iframe.contentWindow?.postMessage({
+					source: 'agentide-panel',
+					type: 'clipboardText',
+					requestId: msg.requestId,
+					text: typeof msg.text === 'string' ? msg.text : '',
+				}, '*');
+			});
+			break;
+
+		case 'generatingStarted':
+			setRefreshButtonState(true);
+			state.isRefreshing = false;
+			setPerChartRefreshing(false);
+			showGeneratingState();
+			break;
+
+		case 'generatingCancelled':
+			setRefreshButtonState(false);
+			state.isRefreshing = false;
+			setPerChartRefreshing(false);
+			// Go back to empty or content state
+			if (state.artifacts.length > 0) {
+				renderGallery(state.artifacts);
+			} else {
+				showGalleryState('empty');
+			}
+			break;
+
+		case 'generatingFailed':
+			setRefreshButtonState(false);
+			state.isRefreshing = false;
+			setPerChartRefreshing(false);
+			showFailedState(msg.error);
+			break;
+
+		case 'refreshStarted':
+			if (!msg.viewId || msg.viewId === state.activeViewId) {
+				setRefreshButtonState(true);
+				state.isRefreshing = true;
+				setPerChartRefreshing(true);
+			}
+			break;
+
+		case 'refreshFinished':
+			if (!msg.viewId || msg.viewId === state.activeViewId) {
+				setRefreshButtonState(false);
+				state.isRefreshing = false;
+				setPerChartRefreshing(false);
+				if (activeViewPreservesFleetIframe()) {
+					document.querySelectorAll('.html-preview iframe').forEach((frameEl) => {
+						const iframe = /** @type {HTMLIFrameElement} */ (frameEl);
+						try {
+							iframe.contentWindow?.postMessage({ type: 'fleetRefreshComplete' }, '*');
+						} catch {
+							// Cross-origin or unloaded iframe — ignore.
+						}
+					});
+				}
+			}
+			break;
+
+		case 'viewsLoaded':
+			if (msg.surfaceMode === 'team' || msg.surfaceMode === 'spotlight') {
+				applySurfaceMode(msg.surfaceMode);
+			}
+			state.views = Array.isArray(msg.views) ? msg.views : [];
+			state.activeViewId = typeof msg.activeViewId === 'string' ? msg.activeViewId : state.activeViewId;
+			applyViewOptions();
+			applyFleetAutoRefresh();
+			break;
+
+		case 'refreshNoData':
+			if (!msg.viewId || msg.viewId === state.activeViewId) {
+				setRefreshButtonState(false);
+				state.isRefreshing = false;
+				setPerChartRefreshing(false);
+			}
+			break;
+
+		case 'refreshFailed':
+			if (!msg.viewId || msg.viewId === state.activeViewId) {
+				setRefreshButtonState(false);
+				state.isRefreshing = false;
+				setPerChartRefreshing(false);
+				if (state.artifacts.length === 0) {
+					showFailedState(msg.error);
+				}
+			}
+			break;
+
+		case 'filtersUpdated':
+			state.scope = msg.scope === 'workspace' ? 'workspace' : 'global';
+			state.projectId = msg.projectId || '';
+			state.agentId = msg.agentId || '';
+			state.agentIds = Array.isArray(msg.agentIds) ? msg.agentIds : [];
+			// Note: Don't override activeViewId from filtersUpdated. This prevents race conditions
+			// where filtersUpdated (sent last) overwrites the correct activeViewId set by viewsLoaded.
+			// We still call applyViewOptions() to keep the dropdown UI in sync with the views list.
+			applyViewOptions();
+			applyFleetAutoRefresh();
+			applyFiltersToControls();
+			break;
+
+		case 'panelStateLoaded':
+			if (msg.panelId && msg.panelId !== PANEL_ID) {
+				break;
+			}
+			if (msg.surfaceMode === 'team' || msg.surfaceMode === 'spotlight') {
+				applySurfaceMode(msg.surfaceMode);
+			}
+			state.panelState = normalizePanelState(msg.state);
+			state.panelStateLoaded = true;
+			applySummarySectionVisibility();
+			if (typeof msg.fleetAutoRefreshIntervalSeconds === 'number') {
+				state.fleetAutoRefreshIntervalSeconds = Math.max(0, msg.fleetAutoRefreshIntervalSeconds);
+			}
+			applyFleetAutoRefresh();
+			if (ensurePanelStateForArtifacts(state.artifacts)) {
+				savePanelState();
+			}
+			if (state.artifacts.length > 0) {
+				renderGallery(state.artifacts);
+			}
+			break;
+
+		case 'disabledChartsUpdated':
+			state.disabledCharts = new Set(
+				(Array.isArray(msg.charts) ? msg.charts : [])
+					.map((name) => String(name || '').trim().toLowerCase())
+					.filter(Boolean),
+			);
+			renderGallery(state.artifacts);
+			break;
+
+		case 'dataStale':
+			showRefreshHint();
+			break;
+
+		case 'dataFresh':
+			hideRefreshHint();
+			break;
+	}
+});
+
+// -----------------------------------------------------------------------------
+// Initialization
+// -----------------------------------------------------------------------------
+
+document.addEventListener('DOMContentLoaded', () => {
+	if (document.body.classList.contains('spotlight-surface-team')) {
+		applySurfaceMode('team');
+	}
+	ensureShareToolbarButton();
+	initQuickPrompts();
+	initStateActions();
+	initEmbeddedWidgetBridge();
+	initFilters();
+	initViews();
+	initToolbarMenu();
+	renderSummaryPlaceholders();
+
+	// Request initial data
+	panelApi.postMessage({ type: 'requestViews' });
+	panelApi.postMessage({ type: 'requestPanelState', panelId: PANEL_ID });
+	panelApi.postMessage({ type: 'requestArtifacts' });
+	panelApi.postMessage({ type: 'requestSummary' });
+	panelApi.postMessage({ type: 'requestFilters' });
+});