@agenthippo-ai/agenthippo 0.1.1 → 1.110.9

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

@@ -5,8 +5,9 @@
  * 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.
+ * This bundled file is the ONLY panel.js ever executed (see provider.getHtmlContent).
+ * It is not seeded to .agent-hippo/analytics/panel/ — a copy there would never run.
+ * Dashboard UI is customized via panel.html / panel.css, which ARE read from that directory.
  * ----------------------------------------------------------------------------- */
 
 // @ts-check
@@ -17,7 +18,7 @@ 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';
+const AGENTIDE_PANEL_JS_VERSION = '2026.07.21';
 try { window.__AGENTIDE_PANEL_JS_VERSION__ = AGENTIDE_PANEL_JS_VERSION; } catch { /* no-op */ }
 
 // -----------------------------------------------------------------------------
@@ -44,7 +45,7 @@ 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 }} */
+/** @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, needsGalleryRender: boolean, pendingForceFreshHtml: boolean, refreshingViewId: string | null }} */
 const state = {
 	artifacts: [],
 	galleryIgnorePatterns: [],
@@ -64,8 +65,64 @@ const state = {
 	fleetAutoRefreshIntervalSeconds: 30,
 	fleetRefreshVersion: 0,
 	surfaceMode: 'spotlight',
+	// While a refresh is in flight, multiple artifactsUpdated bursts can arrive as scripts/
+	// watchers write files incrementally. Rendering on each one tears down and rebuilds the
+	// whole gallery (see renderGallery), which is visibly flickery. Defer to one render when
+	// the refresh actually ends (refreshFinished/refreshFailed/refreshNoData).
+	needsGalleryRender: false,
+	pendingForceFreshHtml: false,
+	// View id the in-flight refresh belongs to. Termination messages carry the viewId captured
+	// at refresh start, so after a mid-refresh view switch they no longer match activeViewId —
+	// match against this instead so isRefreshing cannot get stuck true.
+	refreshingViewId: null,
 };
 
+/** Render the gallery now if a render was deferred mid-refresh. */
+function flushPendingGalleryRender() {
+	if (!state.needsGalleryRender) {
+		return;
+	}
+	state.needsGalleryRender = false;
+	const forceFreshHtml = state.pendingForceFreshHtml;
+	state.pendingForceFreshHtml = false;
+	renderGallery(state.artifacts, { forceFreshHtml });
+}
+
+/**
+ * Single entry point for gallery renders triggered by host messages. While a refresh is in
+ * flight, defer to one render at refresh termination instead of tearing down and rebuilding
+ * the gallery on every artifactsUpdated/manifestUpdated/disabledChartsUpdated burst.
+ * @param {{ forceFreshHtml?: boolean }} [options]
+ */
+function requestGalleryRender(options) {
+	if (state.isRefreshing) {
+		state.needsGalleryRender = true;
+		if (options?.forceFreshHtml) {
+			state.pendingForceFreshHtml = true;
+		}
+		return;
+	}
+	renderGallery(state.artifacts, { forceFreshHtml: Boolean(options?.forceFreshHtml) });
+}
+
+/**
+ * The active view changed while a refresh may be in flight: that refresh belongs to the view
+ * being left, so stop tracking it. The abandoned refresh's termination message is dropped by
+ * the viewId gates, and without this reset a deferred render would block the new view's first
+ * paint until that refresh ends (or forever, if no matching termination arrives).
+ */
+function resetRefreshTrackingForViewChange() {
+	if (!state.isRefreshing && !state.needsGalleryRender && !state.pendingForceFreshHtml) {
+		return;
+	}
+	state.isRefreshing = false;
+	state.refreshingViewId = null;
+	state.needsGalleryRender = false;
+	state.pendingForceFreshHtml = false;
+	setRefreshButtonState(false);
+	setPerChartRefreshing(false);
+}
+
 function applySurfaceMode(mode) {
 	const team = mode === 'team';
 	state.surfaceMode = team ? 'team' : 'spotlight';
@@ -362,6 +419,7 @@ function switchToView(nextViewId) {
 		return;
 	}
 	state.activeViewId = nextViewId;
+	resetRefreshTrackingForViewChange();
 	state.panelStateLoaded = false;
 	state.panelState = createDefaultPanelState();
 	const viewSelect = /** @type {HTMLSelectElement | null} */ (document.getElementById('view-select'));
@@ -849,6 +907,9 @@ function toggleChartHiddenInPanelState(filename) {
 // Summary Cards
 // -----------------------------------------------------------------------------
 
+/** Last rendered summary-cards payload, to skip no-op rebuilds of the summary strip. */
+let lastSummaryCardsSignature = '';
+
 /**
  * Render summary cards in the header
  * @param {Array<{label: string, value: string, icon: string}>} cards
@@ -859,10 +920,19 @@ function renderSummaryCards(cards) {
 		return;
 	}
 	if (!cards || cards.length === 0) {
+		lastSummaryCardsSignature = '';
 		renderSummaryPlaceholders();
 		return;
 	}
 
+	// The host posts summaryCards more than once per refresh; skip the rebuild (and its
+	// visible flash) when the payload is identical to what is already rendered.
+	const signature = JSON.stringify(cards);
+	if (signature === lastSummaryCardsSignature && !container.classList.contains('loading')) {
+		return;
+	}
+	lastSummaryCardsSignature = signature;
+
 	container.style.display = 'grid';
 	container.classList.remove('loading');
 	container.innerHTML = cards.map(card => `
@@ -987,7 +1057,6 @@ function renderGallery(artifacts, options) {
 			}
 			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());
@@ -1085,7 +1154,7 @@ function renderGallery(artifacts, options) {
 
 	showGalleryState('content');
 
-	const html = orderedArtifacts.map(artifact => {
+	const buildCardHtml = (artifact) => {
 		const timeAgo = formatTimeAgo(new Date(artifact.modifiedAt));
 		const sizeFormatted = formatSize(artifact.size);
 		const isChart = artifact.type === 'chart';
@@ -1175,101 +1244,214 @@ function renderGallery(artifacts, options) {
 				${resizeHandle}
 			</div>
 		`;
-	}).join('');
+	};
+	// Keyed card reuse: diff incoming artifacts against existing cards by localPath and only
+	// rebuild what changed. Rebuilding a card destroys its iframe/img and re-fetches content —
+	// that teardown is the visible blink — so unchanged cards must not be touched at all.
+	/** @type {Map<string, HTMLElement>} */
+	const existingCards = new Map();
+	Array.from(container.children).forEach((childEl) => {
+		const child = /** @type {HTMLElement} */ (childEl);
+		const childPath = child.dataset.path || '';
+		const reusableAsCard =
+			child.classList.contains('artifact-card')
+			&& !child.classList.contains('fleet-dashboard-full') // fleet layout card: different structure
+			&& !child.classList.contains('deleting')
+			&& childPath
+			&& !existingCards.has(childPath);
+		if (!reusableAsCard) {
+			child.remove();
+			return;
+		}
+		existingCards.set(childPath, child);
+	});
 
-	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 || '';
+	/** @type {HTMLElement[]} */
+	const orderedCards = [];
+	for (const artifact of orderedArtifacts) {
+		const path = String(artifact.localPath || '');
+		const modifiedAt = String(artifact.modifiedAt || '');
+		const isVisual = artifact.type === 'chart' || artifact.type === 'image';
+		const chartState = isVisual ? artifact._panel : undefined;
+		const signature = computeCardRenderSignature(artifact);
+		const forceHtmlReload = forceFreshHtml && artifact.format === 'html';
+		const existing = existingCards.get(path);
+		existingCards.delete(path);
+
+		if (existing && existing.dataset.cardSignature === signature && !forceHtmlReload) {
+			// Unchanged: leave the DOM (and any live iframe) alone. Expanded/height are kept
+			// out of the signature and applied in place so toggling them never reloads content.
+			if (isVisual) {
+				existing.classList.toggle('expanded', chartState?.expanded === true);
+				const contentEl = /** @type {HTMLElement | null} */ (existing.querySelector('.artifact-content'));
+				if (contentEl && chartState?.height) {
+					contentEl.style.height = `${chartState.height}px`;
+					contentEl.style.minHeight = `${chartState.height}px`;
+					contentEl.style.overflow = 'auto';
+				}
+			}
+			const timeEl = existing.querySelector('.artifact-time');
+			if (timeEl) {
+				timeEl.textContent = formatTimeAgo(new Date(artifact.modifiedAt));
+			}
+			orderedCards.push(existing);
+			continue;
+		}
+
+		const template = document.createElement('template');
+		template.innerHTML = buildCardHtml(artifact).trim();
+		const card = /** @type {HTMLElement | null} */ (template.content.firstElementChild);
+		if (!card) {
+			continue;
+		}
+		card.dataset.cardSignature = signature;
 		const htmlHost = /** @type {HTMLElement | null} */ (card.querySelector('.html-preview'));
-		if (htmlHost && path && modifiedAt) {
-			const reusable = forceFreshHtml ? undefined : reusableHtmlPreviews.get(`${path}::${modifiedAt}`);
+		if (htmlHost) {
+			const reusable = forceHtmlReload ? 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);
-				}
+			} else if (artifact.format === 'html') {
+				htmlArtifactsNeedingFetch.push(artifact);
 			}
 		}
+		if (card.querySelector('.markdown-preview')) {
+			markdownArtifactsNeedingFetch.push(artifact);
+		}
+		attachArtifactCardHandlers(card);
+		if (existing) {
+			existing.replaceWith(card);
+		}
+		orderedCards.push(card);
+	}
 
-		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);
-			}
+	// Cards whose artifacts disappeared.
+	existingCards.forEach((card) => card.remove());
+
+	// Minimal-move reorder: re-inserting a node reloads its iframe, so only move cards that
+	// are actually out of position.
+	let cursor = container.firstElementChild;
+	for (const card of orderedCards) {
+		if (card === cursor) {
+			cursor = cursor.nextElementSibling;
+			continue;
 		}
-	});
+		container.insertBefore(card, cursor);
+	}
+
 	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';
+	// Markdown previews are loaded via host message passing (artifactContent)
+	// to avoid fetch restrictions for local report files.
+}
 
-		card.querySelector('.open-btn')?.addEventListener('click', (e) => {
+/**
+ * Per-card render signature: every input that affects a card's DOM except expanded/height,
+ * which renderGallery applies in place so toggling them never rebuilds the card.
+ * @param {object} artifact
+ * @returns {string}
+ */
+function computeCardRenderSignature(artifact) {
+	const isVisual = artifact.type === 'chart' || artifact.type === 'image';
+	const chartState = isVisual ? artifact._panel : undefined;
+	const manifestEntry = state.manifest?.artifacts?.find(e => e.filename === artifact.filename);
+	return [
+		String(artifact.localPath || ''),
+		String(artifact.filename || ''),
+		String(artifact.modifiedAt || ''),
+		String(artifact.size || ''),
+		String(artifact.type || ''),
+		String(artifact.format || ''),
+		String(artifact.generator || ''),
+		String(manifestEntry?.title || ''),
+		String(manifestEntry?.source || ''),
+		chartState?.hidden === true ? '1' : '0',
+		Number.isFinite(chartState?.order) ? String(chartState.order) : '',
+	].join('|');
+}
+
+/**
+ * Chart/image ordering keys derived from current DOM order — computed at click time so
+ * handlers on long-lived cards never act on a stale snapshot.
+ * @returns {string[]}
+ */
+function getInteractiveChartKeysFromDom() {
+	const container = document.getElementById('gallery-content');
+	if (!container) {
+		return [];
+	}
+	return Array.from(container.querySelectorAll('.artifact-card'))
+		.filter((cardEl) => {
+			const card = /** @type {HTMLElement} */ (cardEl);
+			return card.dataset.type === 'chart' || card.dataset.type === 'image';
+		})
+		.map((cardEl) => normalizeFilename(String(/** @type {HTMLElement} */ (cardEl).dataset.filename || '')))
+		.filter(Boolean);
+}
+
+/**
+ * Wire interactive behaviors for one gallery card (open/delete, layout buttons, expand on
+ * click, resize handle). Called once per created card; reused cards keep their listeners.
+ * @param {HTMLElement} card
+ */
+function attachArtifactCardHandlers(card) {
+	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();
-			panelApi.postMessage({ type: 'openArtifact', path });
+			moveChartInPanelState(filename, 'up', getInteractiveChartKeysFromDom());
+			renderGallery(state.artifacts);
 		});
 
-		card.querySelector('.delete-btn')?.addEventListener('click', (e) => {
+		card.querySelector('.move-down-btn')?.addEventListener('click', (e) => {
 			e.stopPropagation();
-			panelApi.postMessage({ type: 'deleteArtifact', path });
+			moveChartInPanelState(filename, 'down', getInteractiveChartKeysFromDom());
+			renderGallery(state.artifacts);
 		});
 
-		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);
-			}
+		card.querySelector('.toggle-enabled-btn')?.addEventListener('click', (e) => {
+			e.stopPropagation();
+			toggleChartHiddenInPanelState(filename);
+			renderGallery(state.artifacts);
 		});
+	}
 
-		if (filename) {
-			attachResizeHandle(card, filename);
+	// 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);
 		}
 	});
 
-	// Markdown previews are loaded via host message passing (artifactContent)
-	// to avoid fetch restrictions for local report files.
+	if (filename) {
+		attachResizeHandle(card, filename);
+	}
 }
 
 /**
@@ -2044,12 +2226,18 @@ panelApi.onMessage(msg => {
 		state.artifacts = msg.artifacts;
 		state.galleryIgnorePatterns = nextGalleryIgnore;
 		// View selection is owned by viewsLoaded; do not let artifact batches revert the dropdown.
+		const prevActiveViewId = state.activeViewId;
 		if (
 			nextActiveViewId === state.activeViewId
 			|| !state.views.some((view) => view.id === state.activeViewId)
 		) {
 			state.activeViewId = nextActiveViewId;
 		}
+		if (state.activeViewId !== prevActiveViewId) {
+			// Host-initiated view change (e.g. openWithView): any in-flight refresh belongs
+			// to the previous view — render now instead of deferring behind it.
+			resetRefreshTrackingForViewChange();
+		}
 		state.fleetRefreshVersion = nextFleetRefreshVersion;
 		applyFleetAutoRefresh();
 		if (exportOnlyCatalogChange) {
@@ -2059,10 +2247,11 @@ panelApi.onMessage(msg => {
 		// 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);
-			}
+		if (state.isRefreshing) {
+			// Mid-refresh burst: keep spinners on; requestGalleryRender defers the rebuild.
+			setPerChartRefreshing(true);
+		}
+		requestGalleryRender({ forceFreshHtml: hasFleetVersionUpdate });
 			break;
 		}
 
@@ -2093,7 +2282,7 @@ panelApi.onMessage(msg => {
 			state.manifest = msg.manifest;
 			// Re-render gallery with new manifest data
 			if (state.artifacts.length > 0) {
-				renderGallery(state.artifacts);
+				requestGalleryRender();
 			}
 			break;
 
@@ -2137,6 +2326,10 @@ panelApi.onMessage(msg => {
 		case 'generatingStarted':
 			setRefreshButtonState(true);
 			state.isRefreshing = false;
+			state.refreshingViewId = null;
+			// Drop any deferred render — a later flush would stomp the generating state.
+			state.needsGalleryRender = false;
+			state.pendingForceFreshHtml = false;
 			setPerChartRefreshing(false);
 			showGeneratingState();
 			break;
@@ -2144,6 +2337,9 @@ panelApi.onMessage(msg => {
 		case 'generatingCancelled':
 			setRefreshButtonState(false);
 			state.isRefreshing = false;
+			state.refreshingViewId = null;
+			state.needsGalleryRender = false;
+			state.pendingForceFreshHtml = false;
 			setPerChartRefreshing(false);
 			// Go back to empty or content state
 			if (state.artifacts.length > 0) {
@@ -2156,6 +2352,9 @@ panelApi.onMessage(msg => {
 		case 'generatingFailed':
 			setRefreshButtonState(false);
 			state.isRefreshing = false;
+			state.refreshingViewId = null;
+			state.needsGalleryRender = false;
+			state.pendingForceFreshHtml = false;
 			setPerChartRefreshing(false);
 			showFailedState(msg.error);
 			break;
@@ -2164,15 +2363,18 @@ panelApi.onMessage(msg => {
 			if (!msg.viewId || msg.viewId === state.activeViewId) {
 				setRefreshButtonState(true);
 				state.isRefreshing = true;
+				state.refreshingViewId = typeof msg.viewId === 'string' && msg.viewId ? msg.viewId : null;
 				setPerChartRefreshing(true);
 			}
 			break;
 
 		case 'refreshFinished':
-			if (!msg.viewId || msg.viewId === state.activeViewId) {
+			if (!msg.viewId || msg.viewId === state.activeViewId || msg.viewId === state.refreshingViewId) {
 				setRefreshButtonState(false);
 				state.isRefreshing = false;
+				state.refreshingViewId = null;
 				setPerChartRefreshing(false);
+				flushPendingGalleryRender();
 				if (activeViewPreservesFleetIframe()) {
 					document.querySelectorAll('.html-preview iframe').forEach((frameEl) => {
 						const iframe = /** @type {HTMLIFrameElement} */ (frameEl);
@@ -2186,29 +2388,38 @@ panelApi.onMessage(msg => {
 			}
 			break;
 
-		case 'viewsLoaded':
+		case 'viewsLoaded': {
 			if (msg.surfaceMode === 'team' || msg.surfaceMode === 'spotlight') {
 				applySurfaceMode(msg.surfaceMode);
 			}
+			const prevViewsLoadedViewId = state.activeViewId;
 			state.views = Array.isArray(msg.views) ? msg.views : [];
 			state.activeViewId = typeof msg.activeViewId === 'string' ? msg.activeViewId : state.activeViewId;
+			if (state.activeViewId !== prevViewsLoadedViewId) {
+				resetRefreshTrackingForViewChange();
+			}
 			applyViewOptions();
 			applyFleetAutoRefresh();
 			break;
+		}
 
 		case 'refreshNoData':
-			if (!msg.viewId || msg.viewId === state.activeViewId) {
+			if (!msg.viewId || msg.viewId === state.activeViewId || msg.viewId === state.refreshingViewId) {
 				setRefreshButtonState(false);
 				state.isRefreshing = false;
+				state.refreshingViewId = null;
 				setPerChartRefreshing(false);
+				flushPendingGalleryRender();
 			}
 			break;
 
 		case 'refreshFailed':
-			if (!msg.viewId || msg.viewId === state.activeViewId) {
+			if (!msg.viewId || msg.viewId === state.activeViewId || msg.viewId === state.refreshingViewId) {
 				setRefreshButtonState(false);
 				state.isRefreshing = false;
+				state.refreshingViewId = null;
 				setPerChartRefreshing(false);
+				flushPendingGalleryRender();
 				if (state.artifacts.length === 0) {
 					showFailedState(msg.error);
 				}
@@ -2256,7 +2467,7 @@ panelApi.onMessage(msg => {
 					.map((name) => String(name || '').trim().toLowerCase())
 					.filter(Boolean),
 			);
-			renderGallery(state.artifacts);
+			requestGalleryRender();
 			break;
 
 		case 'dataStale':

package/out/analytics/service.js

@@ -800,21 +800,22 @@ class AnalyticsService {
             '-ConfigPath',
             options.configPath,
         ]);
+        // A missing config is not fatal: the launcher re-seeds the managed default
+        // (~/.agent-hippo/litellm-otel.yaml) from its bundled template before starting.
         return [
             'Write-Host "Starting LiteLLM proxy..."',
             `if (-not (Test-Path ${q(options.configPath)})) {`,
-            `  Write-Host ${q(`[WARN] LiteLLM config not found: ${options.configPath}`)} -ForegroundColor Yellow`,
-            '} else {',
-            `  $env:LITELLM_CONFIG_PATH = ${q(options.configPath)}`,
-            '  try {',
-            `    $proc = Start-Process -FilePath ${q(getWindowsPwshOrPowerShell())} -WindowStyle Hidden -WorkingDirectory ${q(path.dirname(options.litellmScript))} -ArgumentList ${q(launcherArgumentLine)} -RedirectStandardOutput ${q(options.stdoutPath)} -RedirectStandardError ${q(options.stderrPath)} -PassThru -ErrorAction Stop`,
-            '    Write-Host "[OK]   LiteLLM launcher started (PID: $($proc.Id))"',
-            `    Write-Host ${q(`       Logs: ${options.stdoutPath}`)}`,
-            `    Write-Host ${q(`       Errors: ${options.stderrPath}`)}`,
-            '  } catch {',
-            '    Write-Host "[ERROR] Failed to start LiteLLM launcher." -ForegroundColor Red',
-            '    Write-Host $_.Exception.Message -ForegroundColor Red',
-            '  }',
+            `  Write-Host ${q(`[INFO] LiteLLM config missing: ${options.configPath} — launcher will re-create it from the bundled template.`)}`,
+            '}',
+            `$env:LITELLM_CONFIG_PATH = ${q(options.configPath)}`,
+            'try {',
+            `  $proc = Start-Process -FilePath ${q(getWindowsPwshOrPowerShell())} -WindowStyle Hidden -WorkingDirectory ${q(path.dirname(options.litellmScript))} -ArgumentList ${q(launcherArgumentLine)} -RedirectStandardOutput ${q(options.stdoutPath)} -RedirectStandardError ${q(options.stderrPath)} -PassThru -ErrorAction Stop`,
+            '  Write-Host "[OK]   LiteLLM launcher started (PID: $($proc.Id))"',
+            `  Write-Host ${q(`       Logs: ${options.stdoutPath}`)}`,
+            `  Write-Host ${q(`       Errors: ${options.stderrPath}`)}`,
+            '} catch {',
+            '  Write-Host "[ERROR] Failed to start LiteLLM launcher." -ForegroundColor Red',
+            '  Write-Host $_.Exception.Message -ForegroundColor Red',
             '}',
         ];
     }
@@ -854,17 +855,18 @@ class AnalyticsService {
         if (!options.litellmScript) {
             return ['echo "[WARN] LiteLLM launcher script not found. Skipping LiteLLM start." >&2'];
         }
+        // A missing config is not fatal: the launcher re-seeds the managed default
+        // (~/.agent-hippo/litellm-otel.yaml) from its bundled template before starting.
         return [
             'echo "Starting LiteLLM proxy..."',
             `if [ ! -f ${q(options.configPath)} ]; then`,
-            `  echo ${q(`[WARN] LiteLLM config not found: ${options.configPath}`)} >&2`,
-            'else',
-            `  export LITELLM_CONFIG_PATH=${q(options.configPath)}`,
-            `  nohup ${q(options.litellmScript)} --config ${q(options.configPath)} >> ${q(options.stdoutPath)} 2>> ${q(options.stderrPath)} &`,
-            '  echo "[OK]   LiteLLM launcher started (PID: $!)"',
-            `  echo ${q(`       Logs: ${options.stdoutPath}`)}`,
-            `  echo ${q(`       Errors: ${options.stderrPath}`)}`,
+            `  echo ${q(`[INFO] LiteLLM config missing: ${options.configPath} — launcher will re-create it from the bundled template.`)}`,
             'fi',
+            `export LITELLM_CONFIG_PATH=${q(options.configPath)}`,
+            `nohup ${q(options.litellmScript)} --config ${q(options.configPath)} >> ${q(options.stdoutPath)} 2>> ${q(options.stderrPath)} &`,
+            'echo "[OK]   LiteLLM launcher started (PID: $!)"',
+            `echo ${q(`       Logs: ${options.stdoutPath}`)}`,
+            `echo ${q(`       Errors: ${options.stderrPath}`)}`,
         ];
     }
     getLifecycleTerminalIntro(action) {
@@ -893,13 +895,9 @@ class AnalyticsService {
      * Start LiteLLM in a detached background process. Logs go to .agent-hippo/analytics/litellm.{log,error.log}.
      */
     async startLiteLLMDirectly() {
+        // No existence check: a missing managed config is re-seeded from the bundled
+        // template by the launcher itself (deleting it is a "reset to defaults" gesture).
         const configPath = path.join((0, index_1.getAgentideHome)(), 'litellm-otel.yaml');
-        try {
-            await fs_1.promises.access(configPath);
-        }
-        catch {
-            return false;
-        }
         const isWindows = process.platform === 'win32';
         const args = isWindows
             ? ['-ConfigPath', configPath]