@agenthippo-ai/agenthippo 0.1.0

package/out/scripts/analytics/agent-fleet-widget.js

@@ -0,0 +1,954 @@
+#!/usr/bin/env node
+/* Copyright (c) AgentHippo.ai. All rights reserved. */
+/* Data contract for fleet.json: extensions/agentide/src/analytics/dashboard/FLEET_DATA_CONTRACT.md */
+/* eslint-disable no-console */
+const fs = require('fs');
+const path = require('path');
+
+const EXPORT_FILE = 'fleet.json';
+const LEGACY_EXPORT_FILE = 'agent-fleet.json';
+const OUTPUT_HTML = 'agent-fleet.html';
+const OUTPUT_CSV = 'agent-fleet.csv';
+
+function safeNumber(value) {
+	const num = Number(value);
+	return Number.isFinite(num) ? num : 0;
+}
+
+function resolveFleetExportPath(exportDir) {
+	const primary = path.join(exportDir, EXPORT_FILE);
+	if (fs.existsSync(primary)) {
+		return primary;
+	}
+	const legacy = path.join(exportDir, LEGACY_EXPORT_FILE);
+	return fs.existsSync(legacy) ? legacy : primary;
+}
+
+function readFleetExport(exportDir) {
+	const exportPath = resolveFleetExportPath(exportDir);
+	try {
+		fs.mkdirSync(exportDir, { recursive: true });
+		const raw = fs.readFileSync(exportPath, 'utf8');
+		const parsed = JSON.parse(raw);
+		const sessions = Array.isArray(parsed?.sessions) ? parsed.sessions : [];
+		return {
+			ok: true,
+			exportPath,
+			payload: {
+				generatedAt: parsed?.generatedAt || '',
+				totals: parsed?.totals || {},
+				sessions,
+			},
+		};
+	} catch (error) {
+		// Missing file (ENOENT) = no data yet; return empty payload so dashboard still renders
+		const isEnoent = error && (error.code === 'ENOENT' || (error.message && error.message.includes('ENOENT')));
+		return {
+			ok: isEnoent,
+			exportPath,
+			error: error instanceof Error ? error.message : String(error),
+			payload: {
+				generatedAt: new Date().toISOString(),
+				totals: { sessions: 0, activeAgents: 0, inProgress: 0, scheduled: 0, done: 0, tokens: 0, turns: 0 },
+				sessions: [],
+			},
+		};
+	}
+}
+
+function statusRank(status) {
+	if (status === 'in_progress') return 0;
+	if (status === 'scheduled') return 1;
+	if (status === 'done') return 2;
+	return 3;
+}
+
+function inferFleetEngineId(model, engine) {
+	const engineTrim = String(engine || '').trim();
+	if (engineTrim) return engineTrim;
+	const raw = String(model || '').trim().toLowerCase();
+	if (!raw || raw === 'unknown' || raw === 'scheduled') return '';
+	if (raw.includes('cursor')) return 'cursor';
+	if (raw.includes('codex') || raw.includes('openai-codex')) return 'codex';
+	if (raw.includes('claude')) return 'claude';
+	if (raw.includes('grok')) return 'grok';
+	if (raw.includes('openclaw')) return 'openclaw';
+	if (raw.startsWith('agentide-litellm::')) return '';
+	if (raw.startsWith('agentide-')) {
+		const vendor = raw.slice('agentide-'.length).split('::')[0];
+		if (vendor && vendor !== 'litellm' && vendor !== 'unknown') return vendor;
+	}
+	return '';
+}
+
+function formatFleetModelLabel(model, engine) {
+	const raw = String(model || '').trim();
+	if (!raw || raw === 'unknown' || raw === 'scheduled') {
+		const engineId = inferFleetEngineId('', engine);
+		if (engineId === 'cursor') return 'Cursor Auto';
+		if (engineId) return engineId.charAt(0).toUpperCase() + engineId.slice(1);
+		return '—';
+	}
+	if (raw.startsWith('agentide-cursor::')) {
+		const tail = raw.slice('agentide-cursor::'.length).trim() || 'auto';
+		return tail === 'auto' ? 'Cursor Auto' : ('Cursor ' + tail);
+	}
+	if (raw.startsWith('agentide-')) {
+		const inner = raw.slice('agentide-'.length);
+		const sep = inner.indexOf('::');
+		if (sep >= 0) {
+			const tail = inner.slice(sep + 2);
+			if (tail) return tail;
+		}
+	}
+	return raw;
+}
+
+function formatFleetEngineLabel(model, engine) {
+	const engineId = inferFleetEngineId(model, engine);
+	if (!engineId) return '—';
+	return engineId.charAt(0).toUpperCase() + engineId.slice(1);
+}
+
+function enrichFleetSessionDisplay(session) {
+	if (!session || typeof session !== 'object') {
+		return session;
+	}
+	const model = String(session.model || '').trim();
+	const engine = String(session.engine || '').trim();
+	const title = String(session.taskTitle || session.cardTitle || '').toLowerCase();
+	if ((!model || model === 'unknown' || model === 'scheduled') && title.includes('cursor')) {
+		session.model = 'agentide-cursor::auto';
+		session.engine = engine || 'cursor';
+	} else if ((!model || model === 'unknown' || model === 'scheduled') && title.includes('codex')) {
+		session.engine = engine || 'codex';
+	} else if ((!model || model === 'unknown' || model === 'scheduled') && title.includes('claude')) {
+		session.engine = engine || 'claude';
+	}
+	if (!String(session.engine || '').trim()) {
+		if (title.includes('cursor')) {
+			session.engine = 'cursor';
+		} else if (title.includes('codex')) {
+			session.engine = 'codex';
+		} else if (title.includes('claude')) {
+			session.engine = 'claude';
+		} else {
+			session.engine = inferFleetEngineId(session.model, session.engine);
+		}
+	}
+	return session;
+}
+
+function telemetryPillsHtml(session) {
+	const tokens = Number(session.totalTokens || 0);
+	const turns = Number(session.turns || 0);
+	if (tokens > 0) {
+		const tokenClass = tokens > 500000 ? 'pill alert' : 'pill';
+		const turnClass = turns > 100 ? 'pill alert' : 'pill';
+		return '<span class="' + tokenClass + '">' + tokens.toLocaleString() + ' Tokens</span>' +
+			'<span class="' + turnClass + '">' + turns.toLocaleString() + ' Turns</span>';
+	}
+	if (turns > 0) {
+		return '<span class="pill">Ran ' + turns.toLocaleString() + ' time' + (turns === 1 ? '' : 's') + '</span>';
+	}
+	return '';
+}
+
+function escapeHtml(value) {
+	return String(value ?? '')
+		.replaceAll('&', '&amp;')
+		.replaceAll('<', '&lt;')
+		.replaceAll('>', '&gt;')
+		.replaceAll('"', '&quot;')
+		.replaceAll("'", '&#39;');
+}
+
+function writeIfChanged(filePath, content) {
+	try {
+		const existing = fs.readFileSync(filePath, 'utf8');
+		if (existing === content) {
+			return false;
+		}
+	} catch (error) {
+		// ENOENT = first write; proceed.
+	}
+	fs.writeFileSync(filePath, content, 'utf8');
+	return true;
+}
+
+function writeCsv(exportDir, sessions) {
+	const rows = [
+		['session_id', 'agent_id', 'status', 'started_at', 'ended_at', 'tokens', 'turns', 'model', 'channel_type', 'channel_target', 'agent_pack', 'engine'],
+		...sessions.map((session) => [
+			session.sessionId || '',
+			session.agentId || '',
+			session.status || '',
+			session.startedAt || '',
+			session.endedAt || '',
+			String(safeNumber(session.totalTokens)),
+			String(safeNumber(session.turns)),
+			session.model || 'unknown',
+			session.channelType || 'none',
+			session.channelTarget || '',
+			session.agentPack || '',
+			session.engine || '',
+		]),
+	];
+	const content = rows
+		.map((columns) => columns
+			.map((cell) => `"${String(cell).replaceAll('"', '""')}"`)
+			.join(','))
+		.join('\n');
+	return writeIfChanged(path.join(exportDir, OUTPUT_CSV), `${content}\n`);
+}
+
+function buildHtml(data, diagnostics) {
+	const payloadJson = JSON.stringify(data);
+	const diagnosticsJson = JSON.stringify(diagnostics);
+	return `<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<title>Agent Hippo – Fleet Operations</title>
+	<style>
+		:root { color-scheme: dark; --bg: #0b1020; --surface: #11182b; --border: #1f2f4a; --muted: #94a3b8; --text: #e2e8f0; }
+		* { box-sizing: border-box; }
+		body { margin: 0; background: var(--bg); color: var(--text); font: 12px/1.5 ui-sans-serif, system-ui; }
+		#fleet-summary-bar {
+			position: sticky; top: 0; z-index: 10;
+			display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
+			padding: 10px 12px; background: #0f172a; border-bottom: 1px solid var(--border);
+		}
+		.fleet-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
+		.fleet-kpi .label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
+		.fleet-kpi .value { font-size: 16px; font-weight: 700; }
+		.fleet-kpi.active .value { color: #4ade80; }
+		.fleet-kpi.scheduled .value { color: #60a5fa; }
+		.fleet-kpi.done .value { color: var(--muted); }
+		#control-bar {
+			display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px;
+			background: var(--surface); border-bottom: 1px solid var(--border);
+		}
+		#control-bar select, #control-bar input { background: #0f172a; color: var(--text); border: 1px solid #334155; border-radius: 6px; padding: 5px 8px; font-size: 12px; }
+		#control-bar .control-group { display: flex; align-items: center; gap: 6px; }
+		#control-bar .control-group label { color: var(--muted); font-size: 11px; }
+		#control-bar .last-updated { color: var(--muted); font-size: 11px; margin-left: auto; }
+		#fleet-canvas { display: flex; flex-direction: column; gap: 16px; padding: 12px; min-height: 200px; }
+		.swimlane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+		.swimlane.hidden-by-filter { display: none; }
+		.swimlane-header { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 0; user-select: none; }
+		.swimlane-header:hover { opacity: .9; }
+		.row-toggle { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); flex-shrink: 0; }
+		.swimlane.collapsed .row-toggle::before { content: '▶'; }
+		.swimlane:not(.collapsed) .row-toggle::before { content: '▼'; }
+		.swimlane-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
+		.swimlane.active .swimlane-title { color: #4ade80; }
+		.swimlane.scheduled .swimlane-title { color: #60a5fa; }
+		.swimlane.done .swimlane-title { color: var(--muted); }
+		.swimlane-cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
+		.swimlane.collapsed .swimlane-cards { display: none; }
+		.agent-card {
+			background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px;
+			cursor: pointer; transition: border-color .15s, box-shadow .15s;
+			min-width: 260px; max-width: 320px; flex: 1 1 260px;
+		}
+		.agent-card:hover { border-color: #334155; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
+		.agent-card .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
+		.agent-card .card-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
+		.status-badge { font-size: 10px; border-radius: 999px; padding: 2px 8px; font-weight: 600; flex-shrink: 0; }
+		.status-badge.in_progress { background: rgba(74, 222, 128, .2); color: #4ade80; border: 1px solid #22c55e; }
+		.status-badge.in_progress.pulse { animation: pulse 1.5s ease-in-out infinite; }
+		.status-badge.scheduled { background: rgba(96, 165, 250, .2); color: #60a5fa; border: 1px solid #3b82f6; }
+		.status-badge.done { background: rgba(148, 163, 184, .15); color: var(--muted); border: 1px solid #475569; }
+		@keyframes pulse { 50% { opacity: .85; } }
+		.task-title { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+		.task-title[data-edit-title] { cursor: text; }
+		.title-editor {
+			font: inherit;
+			font-weight: 700;
+			font-size: 13px;
+			width: 100%;
+			min-width: 120px;
+			max-width: 220px;
+			background: #0f172a;
+			color: var(--text);
+			border: 1px solid #334155;
+			border-radius: 6px;
+			padding: 2px 6px;
+			outline: none;
+		}
+		.title-editor:focus { border-color: var(--muted); }
+		.connection-icon { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: #1e293b; color: var(--muted); }
+		.connection-icon.whatsapp { background: rgba(37, 211, 102, .2); color: #25d366; }
+		.connection-icon.telegram { background: rgba(0, 136, 204, .2); color: #0088cc; }
+		.agent-card .card-body { margin-bottom: 8px; }
+		.start-time { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
+		.telemetry-pills { display: flex; gap: 6px; flex-wrap: wrap; }
+		.pill { font-size: 10px; border-radius: 999px; padding: 2px 8px; background: #1e293b; color: #cbd5e1; border: 1px solid #334155; }
+		.pill.alert { background: rgba(239, 68, 68, .15); color: #f87171; border-color: #dc2626; }
+		.agent-card .card-footer { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
+		.stack-tags { font-size: 10px; color: var(--muted); }
+		.stack-tags span { margin-right: 8px; }
+		.action-area { flex-shrink: 0; }
+		.btn-disconnect { background: transparent; color: var(--muted); border: none; padding: 4px 6px; cursor: pointer; font-size: 11px; text-decoration: underline; }
+		.btn-disconnect:hover { color: #f87171; }
+		.btn-disconnect:disabled { opacity: .5; cursor: not-allowed; }
+		.empty-lane { color: var(--muted); font-size: 12px; padding: 16px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
+		#msg { margin: 0 12px 12px; color: #93c5fd; min-height: 14px; font-size: 11px; }
+	</style>
+</head>
+<body data-fleet-snapshot-shell="1">
+	<div id="fleet-summary-bar">
+		<div class="fleet-kpi active"><div class="label">Active Agents</div><div class="value" id="kpi-active">0</div></div>
+		<div class="fleet-kpi scheduled"><div class="label">Scheduled</div><div class="value" id="kpi-scheduled">0</div></div>
+		<div class="fleet-kpi done"><div class="label">Done (24h)</div><div class="value" id="kpi-done">0</div></div>
+		<div class="fleet-kpi"><div class="label">Total Tokens</div><div class="value" id="kpi-tokens">0</div></div>
+		<div class="fleet-kpi"><div class="label">Total Turns</div><div class="value" id="kpi-turns">0</div></div>
+	</div>
+	<div id="control-bar">
+		<input id="search" type="search" placeholder="Search sessions..." />
+		<span class="last-updated" id="last-updated"></span>
+	</div>
+	<div id="fleet-canvas">
+		<div class="swimlane active" data-lane="in_progress">
+			<div class="swimlane-header"><span class="row-toggle" aria-hidden="true"></span><span class="swimlane-title">In Progress</span></div>
+			<div class="swimlane-cards" id="lane-in_progress"></div>
+		</div>
+		<div class="swimlane scheduled" data-lane="scheduled">
+			<div class="swimlane-header"><span class="row-toggle" aria-hidden="true"></span><span class="swimlane-title">Scheduled</span></div>
+			<div class="swimlane-cards" id="lane-scheduled"></div>
+		</div>
+		<div class="swimlane done" data-lane="done">
+			<div class="swimlane-header"><span class="row-toggle" aria-hidden="true"></span><span class="swimlane-title">Done (Last 24h)</span></div>
+			<div class="swimlane-cards" id="lane-done"></div>
+		</div>
+	</div>
+	<div id="msg"></div>
+	<script>
+		const payload = ${payloadJson};
+		const diagnostics = ${diagnosticsJson};
+		const esc = (v) => String(v ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
+		const statusRank = (s) => s === 'in_progress' ? 0 : s === 'scheduled' ? 1 : s === 'done' ? 2 : 3;
+		function inferFleetEngineId(model, engine) {
+			const e = String(engine || '').trim().toLowerCase();
+			if (e && e !== 'unknown') return e;
+			const m = String(model || '').trim().toLowerCase();
+			if (m.startsWith('agentide-cursor') || m.includes('cursor')) return 'cursor';
+			if (m.startsWith('agentide-codex') || m.includes('codex')) return 'codex';
+			if (m.includes('claude')) return 'claude';
+			if (m.includes('gemini')) return 'gemini';
+			if (m.includes('grok')) return 'grok';
+			if (m.startsWith('agentide-litellm::')) return '';
+			const raw = m || e;
+			const parts = raw.split(/[:/]/);
+			const tail = parts[0] || '';
+			if (tail) return tail;
+			return '';
+		}
+		function formatFleetModelLabel(model, engine) {
+			const m = String(model || '').trim();
+			if (!m || m === 'unknown' || m === 'scheduled') {
+				const engineId = inferFleetEngineId('', engine);
+				if (!engineId) return '—';
+				return engineId.charAt(0).toUpperCase() + engineId.slice(1) + ' (inferred)';
+			}
+			if (m.startsWith('agentide-cursor::')) return 'Cursor ' + (m.split('::')[1] || 'Auto').replace(/^\w/, c => c.toUpperCase());
+			if (m.startsWith('agentide-litellm::')) return m.slice('agentide-litellm::'.length) || m;
+			return m;
+		}
+		function formatFleetEngineLabel(model, engine) {
+			const engineId = inferFleetEngineId(model, engine);
+			if (!engineId) return '—';
+			return engineId.charAt(0).toUpperCase() + engineId.slice(1);
+		}
+		function enrichFleetSessionDisplay(session) {
+			if (!session || typeof session !== 'object') return session;
+			const model = String(session.model || '').trim();
+			const engine = String(session.engine || '').trim();
+			const title = String(session.taskTitle || session.cardTitle || '').toLowerCase();
+			if ((!model || model === 'unknown' || model === 'scheduled') && title.includes('cursor')) {
+				session.model = 'agentide-cursor::auto';
+				session.engine = engine || 'cursor';
+			} else if ((!model || model === 'unknown' || model === 'scheduled') && title.includes('codex')) {
+				session.engine = engine || 'codex';
+			} else if ((!model || model === 'unknown' || model === 'scheduled') && title.includes('claude')) {
+				session.engine = engine || 'claude';
+			}
+			if (!String(session.engine || '').trim()) {
+				if (title.includes('cursor')) {
+					session.engine = 'cursor';
+				} else if (title.includes('codex')) {
+					session.engine = 'codex';
+				} else if (title.includes('claude')) {
+					session.engine = 'claude';
+				} else {
+					session.engine = inferFleetEngineId(session.model, session.engine);
+				}
+			}
+			return session;
+		}
+		function telemetryPillsHtml(session) {
+			const tokens = Number(session.totalTokens || 0);
+			const turns = Number(session.turns || 0);
+			const tokenClass = tokens > 500000 ? 'pill alert' : 'pill';
+			const turnClass = turns > 100 ? 'pill alert' : 'pill';
+			if (tokens > 0) {
+				return '<span class="' + tokenClass + '">' + tokens.toLocaleString() + ' Tokens</span>' +
+					'<span class="' + turnClass + '">' + turns.toLocaleString() + ' Turns</span>';
+			}
+			if (turns > 0) {
+				return '<span class="' + turnClass + '">Ran ' + turns.toLocaleString() + ' turn' + (turns === 1 ? '' : 's') + '</span>';
+			}
+			return '';
+		}
+		let sessions = Array.isArray(payload.sessions)
+			? payload.sessions.slice().map((session) => enrichFleetSessionDisplay({ ...session }))
+			: [];
+		let pendingSessionSnapshot = null;
+		function startedMs(session) {
+			const t = Date.parse(String(session.startedAt || ''));
+			return Number.isFinite(t) ? t : 0;
+		}
+		function scheduledDistanceMs(session) {
+			const t = startedMs(session);
+			if (!t) return Number.POSITIVE_INFINITY;
+			return Math.abs(t - Date.now());
+		}
+		function compareSessionsForLane(lane, a, b) {
+			if (lane === 'scheduled') {
+				const distance = scheduledDistanceMs(a) - scheduledDistanceMs(b);
+				if (distance !== 0) return distance;
+				return startedMs(a) - startedMs(b);
+			}
+			const time = startedMs(b) - startedMs(a);
+			if (time !== 0) return time;
+			return String(a.sessionId || '').localeCompare(String(b.sessionId || ''));
+		}
+
+		let fleetTotals = payload.totals || {};
+		let fleetGeneratedAt = payload.generatedAt || '';
+		let lastUpdatedTimer = null;
+		let autoRefreshInFlight = false;
+
+		function renderSummary() {
+			document.getElementById('kpi-active').textContent = Number(fleetTotals.activeAgents ?? fleetTotals.inProgress ?? 0).toLocaleString();
+			document.getElementById('kpi-scheduled').textContent = Number(fleetTotals.scheduled ?? 0).toLocaleString();
+			document.getElementById('kpi-done').textContent = Number(fleetTotals.done ?? 0).toLocaleString();
+			document.getElementById('kpi-tokens').textContent = Number(fleetTotals.tokens ?? 0).toLocaleString();
+			document.getElementById('kpi-turns').textContent = Number(fleetTotals.turns ?? 0).toLocaleString();
+			if (lastUpdatedTimer) {
+				clearInterval(lastUpdatedTimer);
+				lastUpdatedTimer = null;
+			}
+			if (fleetGeneratedAt) {
+				const t = new Date(fleetGeneratedAt).getTime();
+				function updateLastUpdated() {
+					const sec = Math.max(0, Math.floor((Date.now() - t) / 1000));
+					const el = document.getElementById('last-updated');
+					el.textContent = sec < 60 ? 'Last updated: just now' : sec < 3600 ? 'Last updated: ' + Math.floor(sec / 60) + 'm ago' : 'Last updated: ' + Math.floor(sec / 3600) + 'h ago';
+				}
+				updateLastUpdated();
+				lastUpdatedTimer = setInterval(updateLastUpdated, 60000);
+			} else {
+				document.getElementById('last-updated').textContent = '';
+			}
+		}
+		renderSummary();
+
+		function clearRefreshLoading() {
+			autoRefreshInFlight = false;
+		}
+
+		function assembleChunkedSnapshot(snapshotPayload, meta) {
+			if (!meta || meta.chunkedSessions !== true || !Array.isArray(snapshotPayload?.sessions)) {
+				return snapshotPayload;
+			}
+			const snapshotId = String(meta.snapshotId || '');
+			const chunkIndex = Number(meta.chunkIndex);
+			const chunkCount = Number(meta.chunkCount);
+			if (!snapshotId || !Number.isInteger(chunkIndex) || !Number.isInteger(chunkCount) || chunkIndex < 0 || chunkCount <= 0) {
+				return null;
+			}
+			if (!pendingSessionSnapshot || pendingSessionSnapshot.id !== snapshotId) {
+				pendingSessionSnapshot = {
+					id: snapshotId,
+					generatedAt: snapshotPayload.generatedAt || '',
+					totals: snapshotPayload.totals || {},
+					chunkCount,
+					chunks: new Array(chunkCount),
+					received: 0,
+				};
+			}
+			if (chunkIndex >= pendingSessionSnapshot.chunkCount) {
+				return null;
+			}
+			if (!pendingSessionSnapshot.chunks[chunkIndex]) {
+				pendingSessionSnapshot.received += 1;
+			}
+			pendingSessionSnapshot.chunks[chunkIndex] = snapshotPayload.sessions;
+			if (pendingSessionSnapshot.received < pendingSessionSnapshot.chunkCount) {
+				return null;
+			}
+			const assembled = {
+				generatedAt: pendingSessionSnapshot.generatedAt,
+				totals: pendingSessionSnapshot.totals,
+				sessions: pendingSessionSnapshot.chunks.flat(),
+			};
+			pendingSessionSnapshot = null;
+			return assembled;
+		}
+
+		function applySnapshot(snapshotPayload, meta) {
+			snapshotPayload = assembleChunkedSnapshot(snapshotPayload, meta);
+			if (!snapshotPayload) {
+				return;
+			}
+			if (snapshotPayload && typeof snapshotPayload === 'object') {
+				if (Array.isArray(snapshotPayload.sessions)) {
+					const incoming = snapshotPayload.sessions;
+					// Host may send sessions:[] on read/postMessage failure — keep embedded cards.
+					if (incoming.length > 0 || sessions.length === 0) {
+						sessions = incoming.slice().map((session) => enrichFleetSessionDisplay({ ...session }));
+					}
+				} else if (meta && meta.omitSessions && sessions.length > 0) {
+					// Large export: host omitted sessions; keep embedded HTML payload.
+				}
+				if (snapshotPayload.totals && typeof snapshotPayload.totals === 'object') {
+					fleetTotals = snapshotPayload.totals;
+				}
+				if (typeof snapshotPayload.generatedAt === 'string') {
+					fleetGeneratedAt = snapshotPayload.generatedAt;
+				}
+			}
+			renderSummary();
+			renderLanes();
+			clearRefreshLoading();
+			const msgEl = document.getElementById('msg');
+			if (meta && meta.ok === false && meta.error) {
+				msgEl.textContent = 'Fleet export read issue: ' + esc(meta.error);
+			} else if (!diagnostics.ok && diagnostics.error) {
+				msgEl.textContent = 'Fleet export read issue: ' + esc(diagnostics.error);
+			} else {
+				msgEl.textContent = '';
+			}
+		}
+
+		function requestSnapshot() {
+			try {
+				window.parent.postMessage({ source: 'agentide-wow-widget', type: 'requestViewExportSnapshot' }, '*');
+			} catch (err) {
+				// Ignore cross-origin postMessage failures.
+			}
+		}
+
+		function requestFleetRefresh() {
+			if (autoRefreshInFlight) {
+				return;
+			}
+			autoRefreshInFlight = true;
+			try {
+				window.parent.postMessage({ source: 'agentide-wow-widget', type: 'refreshWidget', script: 'agent-fleet-widget.js' }, '*');
+			} catch (err) {
+				// Ignore cross-origin postMessage failures.
+			}
+			requestSnapshot();
+			// If the host cannot report completion (e.g. stale extension host), avoid
+			// permanently suppressing future refreshes.
+			setTimeout(() => clearRefreshLoading(), 25000);
+		}
+
+
+		function formatStartTime(session) {
+			const status = String(session.status || '');
+			const started = session.startedAt ? new Date(session.startedAt).getTime() : NaN;
+			const ended = session.endedAt ? new Date(session.endedAt).getTime() : NaN;
+			const now = Date.now();
+			if (status === 'scheduled' && Number.isFinite(started) && started > now) {
+				const d = new Date(started);
+				const today = new Date();
+				if (d.toDateString() === today.toDateString()) return 'Scheduled: Today, ' + d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+				return 'Scheduled: ' + d.toLocaleDateString() + ', ' + d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+			}
+			const lastRun = Number.isFinite(ended) ? ended : started;
+			if (Number.isFinite(lastRun)) {
+				const min = Math.max(0, Math.floor((now - lastRun) / 60000));
+				if (min < 1) return 'Last run: just now';
+				if (min < 60) return 'Last run: ' + min + 'm ago';
+				if (min < 24 * 60) return 'Last run: ' + Math.floor(min / 60) + 'h ago';
+				return 'Last run: ' + new Date(lastRun).toLocaleString();
+			}
+			return 'Last run: —';
+		}
+
+		function connectionIcon(channelType) {
+			const ch = String(channelType || 'none').toLowerCase();
+			if (ch === 'whatsapp') return '<span class="connection-icon whatsapp" title="WhatsApp">WA</span>';
+			if (ch === 'telegram') return '<span class="connection-icon telegram" title="Telegram">TG</span>';
+			if (ch !== 'none') return '<span class="connection-icon" title="' + esc(ch) + '">Web</span>';
+			return '';
+		}
+
+		function filteredSessions() {
+			const query = String(document.getElementById('search')?.value || '').trim().toLowerCase();
+			return sessions.filter((session) => {
+				if (!query) return true;
+				const haystack = [session.sessionId, session.agentId, session.taskTitle, session.taskSummary, session.model, session.engine].map(i => String(i || '').toLowerCase()).join(' ');
+				return haystack.includes(query);
+			});
+		}
+
+		function postOpenSpotlight(session) {
+			enrichFleetSessionDisplay(session);
+			const msg = {
+				source: 'agentide-wow-widget',
+				type: 'openSpotlightForSession',
+				sessionId: String(session.sessionId || ''),
+				channelType: String(session.channelType || ''),
+				channelTarget: String(session.channelTarget || ''),
+				model: String(session.model || ''),
+				engine: String(session.engine || inferFleetEngineId(session.model, session.engine)),
+				agentId: String(session.agentId || session.agentPack || ''),
+			};
+			try { window.parent.postMessage(msg, '*'); } catch (e) {}
+			if (window.top !== window.parent) { try { window.top.postMessage(msg, '*'); } catch (e) {} }
+		}
+		function postDisconnect(session, e) {
+			e.preventDefault(); e.stopPropagation();
+			window.parent.postMessage({ source: 'agentide-wow-widget', type: 'disconnectFleetChannel', sessionId: String(session.sessionId || ''), channelType: String(session.channelType || ''), channelTarget: String(session.channelTarget || '') }, '*');
+			document.getElementById('msg').textContent = 'Disconnect requested for ' + esc(session.sessionId || 'session');
+		}
+
+		function postToHost(payload) {
+			try {
+				// Prefer direct webview messaging to the extension host. This bypasses
+				// any seeded/older panel.js bridge code and makes title persistence
+				// independent from how the outer webview forwards messages.
+				const api = typeof acquireVsCodeApi === 'function' ? acquireVsCodeApi() : null;
+				if (api && typeof api.postMessage === 'function') {
+					api.postMessage(payload);
+					return;
+				}
+			} catch (err) {
+				// Fall back to window.parent postMessage below.
+			}
+			try { window.parent.postMessage(payload, '*'); } catch (err) {}
+			if (window.top !== window.parent) { try { window.top.postMessage(payload, '*'); } catch (err) {} }
+		}
+
+		// Inner HTML for a card body (no outer wrapper). Outer .agent-card element is created/reused
+		// by renderCardElement/updateCardElement to enable DOM diffing in syncLaneCards.
+		function renderCardInnerHtml(session) {
+			enrichFleetSessionDisplay(session);
+			const status = String(session.status || 'done');
+			const cardTitleRaw = session.cardTitle || session.taskTitle || session.agentId || session.sessionId || 'Task';
+			const cardTitle = esc(cardTitleRaw);
+			const canDisconnect = String(session.channelType || 'none').toLowerCase() !== 'none';
+			const startTimeHtml = formatStartTime(session);
+			const model = esc(formatFleetModelLabel(session.model, session.engine));
+			const pack = esc(session.agentPack || session.agentId || '—');
+			const engine = esc(formatFleetEngineLabel(session.model, session.engine));
+			const telemetryHtml = telemetryPillsHtml(session);
+			return '<div class="card-header">' +
+					'<div class="card-header-left">' +
+						'<span class="status-badge ' + esc(status) + (status === 'in_progress' ? ' pulse' : '') + '">' + (status === 'in_progress' ? 'In Progress' : status === 'scheduled' ? 'Scheduled' : 'Done') + '</span>' +
+						'<span class="task-title" data-edit-title title="Click to edit title">' + cardTitle + '</span>' +
+						'<input class="title-editor" data-title-editor style="display:none" />' +
+					'</div>' +
+					connectionIcon(session.channelType) +
+				'</div>' +
+				'<div class="card-body">' +
+					'<div class="start-time">' + startTimeHtml + '</div>' +
+					'<div class="telemetry-pills">' + telemetryHtml + '</div>' +
+				'</div>' +
+				'<div class="card-footer">' +
+					'<div class="stack-tags"><span>Model: ' + model + '</span><span>Pack: ' + pack + '</span><span>Engine: ' + engine + '</span></div>' +
+					'<div class="action-area">' +
+						'<button type="button" class="btn-disconnect" ' + (canDisconnect ? '' : 'disabled') + ' data-disconnect>Disconnect Channel</button>' +
+					'</div>' +
+				'</div>';
+		}
+
+		// Stable signature: change in any of these fields triggers innerHTML rewrite.
+		// Skips rewrite when nothing visible changed (e.g. unrelated session refresh).
+		function cardSignature(session) {
+			return [
+				session.status || '',
+				session.cardTitle || session.taskTitle || session.agentId || session.sessionId || '',
+				session.totalTokens || 0,
+				session.turns || 0,
+				session.startedAt || '',
+				session.endedAt || '',
+				session.model || '',
+				session.engine || '',
+				session.channelType || '',
+				session.agentPack || '',
+			].join('|');
+		}
+
+		function renderCardElement(session) {
+			const card = document.createElement('div');
+			card.className = 'agent-card';
+			card.setAttribute('role', 'button');
+			card.setAttribute('tabindex', '0');
+			card.setAttribute('data-session-id', String(session.sessionId || ''));
+			card.setAttribute('data-source-id', String(session.source || ''));
+			card.setAttribute('data-sig', cardSignature(session));
+			card.innerHTML = renderCardInnerHtml(session);
+			return card;
+		}
+
+		function updateCardElement(card, session) {
+			// Don't disrupt an active title edit; the user is typing.
+			const editor = card.querySelector('[data-title-editor]');
+			if (editor instanceof HTMLInputElement && editor.style.display !== 'none') {
+				return;
+			}
+			const newSig = cardSignature(session);
+			if (card.getAttribute('data-sig') === newSig) {
+				return;
+			}
+			card.setAttribute('data-sig', newSig);
+			card.setAttribute('data-source-id', String(session.source || ''));
+			card.innerHTML = renderCardInnerHtml(session);
+		}
+
+		// DOM diff: reuse card elements where possible (no flicker, preserves focus).
+		// Departed sessions are removed; new sessions are appended; surviving sessions are
+		// updated in-place; element order is rewritten to match desired sequence.
+		function syncLaneCards(container, sessionsList) {
+			const wantIds = new Set(sessionsList.map((s) => String(s.sessionId || '')));
+			const existingById = new Map();
+			container.querySelectorAll('.agent-card[data-session-id]').forEach((card) => {
+				existingById.set(card.getAttribute('data-session-id') || '', card);
+			});
+			for (const [id, card] of existingById) {
+				if (!id || !wantIds.has(id)) {
+					card.remove();
+					existingById.delete(id);
+				}
+			}
+			if (!sessionsList.length) {
+				if (!container.querySelector('.empty-lane')) {
+					container.innerHTML = '<div class="empty-lane">No agents</div>';
+				}
+				container.classList.add('lane-empty');
+				return;
+			}
+			container.querySelectorAll('.empty-lane').forEach((el) => el.remove());
+			container.classList.remove('lane-empty');
+			let anchor = null;
+			for (const session of sessionsList) {
+				const id = String(session.sessionId || '');
+				let card = existingById.get(id);
+				if (!card) {
+					card = renderCardElement(session);
+				} else {
+					updateCardElement(card, session);
+				}
+				const desiredPosition = anchor ? anchor.nextElementSibling : container.firstElementChild;
+				if (card !== desiredPosition) {
+					container.insertBefore(card, desiredPosition || null);
+				}
+				anchor = card;
+			}
+		}
+
+		// laneCollapsed: user's explicit collapse choice (toggled by header click only).
+		// Empty lanes are visually collapsed but never persist a flag — when items arrive
+		// (e.g. a new scheduled task), the lane auto-expands back to the user's setting.
+		const laneCollapsed = { in_progress: false, scheduled: false, done: false };
+
+		function applyRowVisibility() {
+			['in_progress', 'scheduled', 'done'].forEach(lane => {
+				const row = document.querySelector('.swimlane[data-lane="' + lane + '"]');
+				if (!row) return;
+				const container = document.getElementById('lane-' + lane);
+				const isEmpty = container && container.classList.contains('lane-empty');
+				row.classList.toggle('empty', !!isEmpty);
+				row.classList.remove('hidden-by-filter');
+				// Show collapsed when empty OR user has manually collapsed. Don't mutate
+				// laneCollapsed here — that's user state, set only by header click handler.
+				row.classList.toggle('collapsed', !!laneCollapsed[lane] || isEmpty);
+			});
+		}
+
+		function renderLanes() {
+			const items = filteredSessions();
+			const byStatus = { in_progress: [], scheduled: [], done: [] };
+			items.forEach(s => {
+				const st = String(s.status || 'done');
+				if (byStatus[st]) byStatus[st].push(s);
+			});
+			['in_progress', 'scheduled', 'done'].forEach(lane => {
+				const container = document.getElementById('lane-' + lane);
+				const list = (byStatus[lane] || []).slice().sort((a, b) => compareSessionsForLane(lane, a, b));
+				syncLaneCards(container, list);
+			});
+			applyRowVisibility();
+		}
+
+		function findSessionById(sessionId) {
+			if (!sessionId) return undefined;
+			return sessions.find((s) => String(s.sessionId || '') === sessionId);
+		}
+
+		// Single delegated click handler for the canvas: handles lane collapse, card open,
+		// disconnect, and title-edit start. Replaces per-card listeners (avoids re-attaching
+		// listeners on every sync; new cards work automatically).
+		document.getElementById('fleet-canvas').addEventListener('click', (e) => {
+			const target = e.target instanceof HTMLElement ? e.target : null;
+			if (!target) return;
+
+			// Lane header collapse toggle.
+			const header = target.closest('.swimlane-header');
+			if (header) {
+				const row = header.closest('.swimlane');
+				const lane = row && row.getAttribute('data-lane');
+				if (lane) {
+					laneCollapsed[lane] = !laneCollapsed[lane];
+					row.classList.toggle('collapsed', laneCollapsed[lane]);
+				}
+				return;
+			}
+
+			// Disconnect button.
+			const disconnectBtn = target.closest('[data-disconnect]');
+			if (disconnectBtn) {
+				const card = disconnectBtn.closest('.agent-card');
+				const session = findSessionById(card && card.getAttribute('data-session-id'));
+				if (session) postDisconnect(session, e);
+				return;
+			}
+
+			// Title edit start.
+			const titleEl = target.closest('[data-edit-title]');
+			if (titleEl) {
+				const card = titleEl.closest('.agent-card');
+				if (!card) return;
+				e.preventDefault();
+				e.stopPropagation();
+				const sessionId = String(card.getAttribute('data-session-id') || '').trim();
+				const sourceId = String(card.getAttribute('data-source-id') || '').trim() || 'local';
+				if (!sessionId) return;
+				const input = card.querySelector('[data-title-editor]');
+				if (!(input instanceof HTMLInputElement)) return;
+				const existingSession = findSessionById(sessionId);
+				const current = String((existingSession && (existingSession.cardTitle || existingSession.taskTitle)) || titleEl.textContent || '').trim();
+				function cleanup() {
+					input.style.display = 'none';
+					titleEl.style.display = '';
+					input.onblur = null;
+					input.onkeydown = null;
+				}
+				function commit(nextValue) {
+					const trimmed = String(nextValue || '').trim();
+					postToHost({ source: 'agentide-wow-widget', type: 'updateFleetCardTitle', sourceId, sessionId, cardTitle: trimmed });
+					if (existingSession) {
+						existingSession.cardTitle = trimmed;
+					}
+					titleEl.textContent = esc(trimmed || (existingSession && existingSession.taskTitle) || sessionId);
+					cleanup();
+				}
+				titleEl.style.display = 'none';
+				input.value = current;
+				input.style.display = '';
+				input.focus();
+				input.select();
+				input.onblur = () => commit(input.value);
+				input.onkeydown = (evt) => {
+					if (evt.key === 'Enter') { evt.preventDefault(); commit(input.value); }
+					else if (evt.key === 'Escape') { evt.preventDefault(); cleanup(); }
+				};
+				return;
+			}
+
+			// Open spotlight for the clicked card.
+			const card = target.closest('.agent-card');
+			if (card) {
+				const session = findSessionById(card.getAttribute('data-session-id'));
+				if (session) postOpenSpotlight(session);
+			}
+		});
+
+		// Keyboard: Enter/Space on a focused card opens spotlight (matches click).
+		document.getElementById('fleet-canvas').addEventListener('keydown', (e) => {
+			if (e.key !== 'Enter' && e.key !== ' ') return;
+			const target = e.target instanceof HTMLElement ? e.target : null;
+			if (!target) return;
+			if (target.closest('[data-disconnect]') || target.closest('[data-edit-title]') || target.closest('[data-title-editor]')) return;
+			const card = target.closest('.agent-card');
+			if (!card) return;
+			e.preventDefault();
+			const session = findSessionById(card.getAttribute('data-session-id'));
+			if (session) postOpenSpotlight(session);
+		});
+
+		document.getElementById('search').addEventListener('input', renderLanes);
+
+		renderLanes();
+
+		if (!diagnostics.ok) {
+			document.getElementById('msg').textContent = 'Fleet export read issue: ' + esc(diagnostics.error);
+		}
+
+		window.addEventListener('message', (e) => {
+			const d = e.data;
+			if (!d || typeof d !== 'object') {
+				return;
+			}
+			if (d.type === 'viewExportSnapshot' || d.type === 'liveFleetSnapshot') {
+				applySnapshot(d.payload, d.meta);
+			}
+			if (d.type === 'refreshFinished' || d.type === 'fleetRefreshComplete') {
+				clearRefreshLoading();
+				requestSnapshot();
+			}
+		});
+
+		requestSnapshot();
+		// Self-poll as a safety net. Host also pushes snapshots after refresh; this fills
+		// gaps if the host signal is lost (e.g. webview restart) and keeps lanes fresh.
+		setInterval(requestSnapshot, 15000);
+		// The snapshot poll above only reads the current export. This refresh poll asks
+		// the host to recompute the export/widget so new scheduled/running sessions appear.
+		setInterval(requestFleetRefresh, 30000);
+	</script>
+</body>
+</html>`;
+}
+
+function main() {
+	const home = process.env.HOME || '';
+	const chartDir = process.env.AGENTIDE_CHART_DIR || path.join(home, '.agent-hippo', 'analytics', 'views', 'global', '__all', '__all', 'charts');
+	const exportDir = process.env.AGENTIDE_EXPORT_DIR || path.join(home, '.agent-hippo', 'analytics', 'views', 'global', '__all', '__all', 'exports');
+
+	fs.mkdirSync(chartDir, { recursive: true });
+	fs.mkdirSync(exportDir, { recursive: true });
+
+	const fleet = readFleetExport(exportDir);
+	const sessions = Array.isArray(fleet.payload.sessions) ? fleet.payload.sessions : [];
+	sessions.sort((a, b) => {
+		const rank = statusRank(String(a.status || '')) - statusRank(String(b.status || ''));
+		if (rank !== 0) return rank;
+		// Ascending so the next/oldest scheduled items appear first.
+		return Date.parse(String(a.startedAt || '')) - Date.parse(String(b.startedAt || ''));
+	});
+
+	writeCsv(exportDir, sessions);
+	const html = buildHtml(
+		{
+			generatedAt: fleet.payload.generatedAt,
+			totals: fleet.payload.totals,
+			sessions,
+		},
+		{
+			ok: fleet.ok,
+			error: fleet.error || '',
+			exportPath: fleet.exportPath,
+		}
+	);
+	fs.writeFileSync(path.join(chartDir, OUTPUT_HTML), html, 'utf8');
+}
+
+main();