@agenthippo-ai/agenthippo 0.1.1 → 0.2.3-dataplane

package/out/agentpack/index.js

@@ -3,7 +3,7 @@
  *  Copyright (c) AgentHippo.ai. All rights reserved.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkGitHubUpdate = exports.installFromGitHub = exports.validateForPublish = exports.publishToGitHub = exports.getGitHubUser = exports.isGitHubAuthenticated = exports.getGitHubToken = exports.formatGitHubSource = exports.parseGitHubSource = exports.resetDefaultAgent = exports.duplicateAgent = exports.updateFromUserLibrary = exports.checkForUpdate = exports.readAgentSource = exports.promoteToUserLibrary = exports.hydrateFromUserLibrary = exports.isAgentInUserLibrary = exports.isWorkspaceAgentAvailable = exports.listUserLibraryAgents = exports.updateManifestName = exports.parseAgentManifest = exports.loadAgentManifest = exports.stringifyYaml = exports.parseYaml = exports.AgentPackManager = exports.getUserAgentCurrentPath = exports.getUserAgentVersionDir = exports.getUserAgentRoot = exports.getUserAgentsDir = exports.getAgentideHome = exports.parseAgentIdFromPath = exports.getSessionsDir = exports.getAgentMcpDir = exports.getAgentRulesDir = exports.getAgentSkillsDir = exports.getAgentContextPath = exports.getAgentAgentsMdPath = exports.getAgentManifestPath = exports.isDefaultAgent = exports.resolveRuntimePaths = exports.resolveAgentRuntimePaths = exports.getAgentRoot = exports.getAgentsDir = exports.getAgentideDir = exports.AGENT_CONSTANTS = void 0;
+exports.checkGitHubUpdate = exports.installFromGitHub = exports.validateForPublish = exports.publishToGitHub = exports.getGitHubUser = exports.isGitHubAuthenticated = exports.getGitHubToken = exports.formatGitHubSource = exports.parseGitHubSource = exports.resetDefaultAgent = exports.duplicateAgent = exports.updateFromUserLibrary = exports.checkForUpdate = exports.readAgentSource = exports.promoteToUserLibrary = exports.hydrateFromUserLibrary = exports.isAgentInUserLibrary = exports.isWorkspaceAgentAvailable = exports.listUserLibraryAgents = exports.updateManifestName = exports.parseAgentManifest = exports.loadAgentManifest = exports.stringifyYaml = exports.parseYaml = exports.AgentPackManager = exports.getUserAgentCurrentPath = exports.getUserAgentVersionDir = exports.getUserAgentRoot = exports.getUserAgentsDir = exports.getAgentideHome = exports.parseAgentIdFromPath = exports.getSessionsDir = exports.getAgentMcpDir = exports.getAgentRulesDir = exports.getAgentSkillsDir = exports.getAgentContextPath = exports.getAgentAgentsMdPath = exports.getAgentManifestPath = exports.isDefaultAgent = exports.userScopedEngineHome = exports.resolveRuntimePaths = exports.resolveAgentRuntimePaths = exports.getAgentRoot = exports.getAgentsDir = exports.getAgentideDir = exports.AGENT_CONSTANTS = void 0;
 // Path utilities
 var paths_1 = require("./paths");
 Object.defineProperty(exports, "AGENT_CONSTANTS", { enumerable: true, get: function () { return paths_1.AGENT_CONSTANTS; } });
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "getAgentsDir", { enumerable: true, get: function
 Object.defineProperty(exports, "getAgentRoot", { enumerable: true, get: function () { return paths_1.getAgentRoot; } });
 Object.defineProperty(exports, "resolveAgentRuntimePaths", { enumerable: true, get: function () { return paths_1.resolveAgentRuntimePaths; } });
 Object.defineProperty(exports, "resolveRuntimePaths", { enumerable: true, get: function () { return paths_1.resolveRuntimePaths; } });
+Object.defineProperty(exports, "userScopedEngineHome", { enumerable: true, get: function () { return paths_1.userScopedEngineHome; } });
 Object.defineProperty(exports, "isDefaultAgent", { enumerable: true, get: function () { return paths_1.isDefaultAgent; } });
 Object.defineProperty(exports, "getAgentManifestPath", { enumerable: true, get: function () { return paths_1.getAgentManifestPath; } });
 Object.defineProperty(exports, "getAgentAgentsMdPath", { enumerable: true, get: function () { return paths_1.getAgentAgentsMdPath; } });

package/out/agentpack/paths.js

@@ -51,6 +51,7 @@ exports.getAgentsDir = getAgentsDir;
 exports.getAgentRoot = getAgentRoot;
 exports.resolveAgentRuntimePaths = resolveAgentRuntimePaths;
 exports.resolveRuntimePaths = resolveRuntimePaths;
+exports.userScopedEngineHome = userScopedEngineHome;
 exports.isDefaultAgent = isDefaultAgent;
 exports.getAgentManifestPath = getAgentManifestPath;
 exports.getAgentAgentsMdPath = getAgentAgentsMdPath;
@@ -70,6 +71,7 @@ exports.generateAgentYaml = generateAgentYaml;
 exports.generateAgentsMd = generateAgentsMd;
 const path = __importStar(require("path"));
 const os = __importStar(require("os"));
+const crypto = __importStar(require("crypto"));
 const branding_1 = require("../branding");
 /**
  * Constants for agent directory structure.
@@ -211,6 +213,27 @@ function resolveRuntimePaths(workspaceRoot, storageUri, agentId, agentVersion) {
     const effectiveAgentId = agentId ?? exports.AGENT_CONSTANTS.DEFAULT_AGENT_ID;
     return resolveAgentRuntimePaths(workspaceRoot, storageUri, effectiveAgentId, agentVersion);
 }
+/**
+ * Key an engine's SDK state dir (CODEX_HOME / claudeConfigDir) by the verified request
+ * user in multi-tenant serve/headless deployments (secure-obo-design §8 Phase 0).
+ *
+ * The base dir is per-agent, not per-user — under concurrent turns of different users the
+ * codex engine rewrites the shared config.toml per turn, so one user's engine can launch
+ * pointed at another user's per-turn credential state. Scoping the home per verified user
+ * makes any remaining config race same-user (same credential ⇒ harmless).
+ *
+ * Returns the base dir unchanged when no verified user is in scope: the IDE and
+ * single-tenant CLI paths have no `runWithCredential` frame and must be unaffected.
+ * The user id is hashed — it is an email/subject, never safe as a raw path segment.
+ */
+function userScopedEngineHome(baseHome, verifiedUserId) {
+    const uid = verifiedUserId?.trim();
+    if (!uid) {
+        return baseHome;
+    }
+    const hash = crypto.createHash('sha256').update(uid).digest('hex').slice(0, 16);
+    return path.join(baseHome, 'users', hash);
+}
 /**
  * Check if an agent is the default workspace agent.
  */

package/out/analytics/dashboard/fleetDisplayUtils.js

@@ -74,6 +74,9 @@ function formatFleetModelLabel(model, engine) {
         }
         return '—';
     }
+    if (raw === 'ah-auto' || raw.endsWith('::ah-auto')) {
+        return 'Auto';
+    }
     if (raw.startsWith('agentide-cursor::')) {
         const tail = raw.slice('agentide-cursor::'.length).trim() || 'auto';
         if (tail === 'auto') {

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

@@ -17,7 +17,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 +44,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 +64,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 +418,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 +906,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 +919,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 +1056,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 +1153,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 +1243,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 +2225,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 +2246,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 +2281,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 +2325,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 +2336,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 +2351,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 +2362,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 +2387,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 +2466,7 @@ panelApi.onMessage(msg => {
 					.map((name) => String(name || '').trim().toLowerCase())
 					.filter(Boolean),
 			);
-			renderGallery(state.artifacts);
+			requestGalleryRender();
 			break;
 
 		case 'dataStale':