@cydm/magic-shell-agent-node 0.1.0 → 0.1.2

package/dist/workbench/runtime-control.js

@@ -0,0 +1,180 @@
+(function (global) {
+	function hasUsablePrimaryAgent(primaryAgent) {
+		return !!primaryAgent && primaryAgent.status !== "disabled" && primaryAgent.status !== "missing";
+	}
+
+	function applyPrimaryReply(payload, ctx) {
+		ctx.pendingNodeReply = false;
+		ctx.pushNodeTranscript("assistant", payload?.text || "Primary agent did not return a message.", {
+			actionLabel: payload?.actionLabel,
+			actionType: payload?.actionType,
+			actionTaskSummary: payload?.actionTaskSummary,
+			actionSessionId: payload?.actionSessionId,
+		});
+	}
+
+	function applyRuntimeSnapshot(snapshot, ctx) {
+		const previousWorkers = ctx.workers || [];
+		ctx.workers = snapshot.workers || [];
+		ctx.runtimeSummary = snapshot.runtime || null;
+		ctx.runtimeFocus = snapshot.focus || [];
+		ctx.primaryAgent = snapshot.primary || null;
+		ctx.syncNodeTranscriptFromServer(snapshot.nodeHistory);
+
+		const liveSessionIds = new Set(ctx.workers.map((worker) => worker.sessionId));
+		const currentWorker = ctx.sessionId
+			? ctx.workers.find((worker) => worker.sessionId === ctx.sessionId)
+			: null;
+
+		for (const previousWorker of previousWorkers) {
+			if (!liveSessionIds.has(previousWorker.sessionId)) {
+				ctx.destroyTerminalView(previousWorker.sessionId);
+			}
+		}
+
+		if (ctx.pendingSpawnSessionId && ctx.workers.some((worker) => worker.sessionId === ctx.pendingSpawnSessionId)) {
+			if (ctx.pendingSpawnAutoAttach) {
+				// Once the worker is visible in runtime state, perform a real attach so
+				// the browser connection is routed to the new session via the relay.
+				ctx.attachWorker(ctx.pendingSpawnSessionId, true);
+			} else {
+				ctx.pushNodeTranscript(
+					"assistant",
+					"A worker is ready in the sidebar.\nSession · S:" + ctx.pendingSpawnSessionId.slice(-6),
+					{
+						actionSessionId: ctx.pendingSpawnSessionId,
+						actionLabel: "ATTACH",
+						actionType: "attach",
+					},
+				);
+			}
+			ctx.pendingSpawnSessionId = null;
+			ctx.pendingSpawnAutoAttach = true;
+			ctx.resetSpawnButton();
+		}
+
+		if (ctx.pendingStopSessionId) {
+			const pendingStopWorker = ctx.workers.find((worker) => worker.sessionId === ctx.pendingStopSessionId);
+			if (!pendingStopWorker || pendingStopWorker.status === "stopped" || pendingStopWorker.status === "failed") {
+				ctx.pendingStopSessionId = null;
+			}
+		}
+
+		if (ctx.pendingRestartSessionId) {
+			const pendingRestartWorker = ctx.workers.find((worker) => worker.sessionId === ctx.pendingRestartSessionId);
+			if (pendingRestartWorker && pendingRestartWorker.status === "running") {
+				ctx.pendingRestartSessionId = null;
+			}
+		}
+
+		if (ctx.sessionId && !ctx.workers.some((worker) => worker.sessionId === ctx.sessionId)) {
+			const closedSessionId = ctx.sessionId;
+			ctx.writeSystemNotice("WORKER CLOSED: " + closedSessionId.slice(-8));
+			ctx.clearPreferredSession();
+			ctx.returnToPrimaryChat({ clearSession: true });
+		}
+
+		if (
+			currentWorker
+			&& ctx.pendingRestartSessionId !== currentWorker.sessionId
+			&& (currentWorker.status === "stopped" || currentWorker.status === "failed")
+		) {
+			ctx.writeSystemNotice("WORKER INACTIVE: " + currentWorker.sessionId.slice(-8));
+			if (ctx.preferredSessionId === currentWorker.sessionId) {
+				ctx.clearPreferredSession();
+			}
+			ctx.returnToPrimaryChat({ clearSession: true });
+		}
+
+		ctx.renderWorkers();
+
+		if (ctx.sessionId && ctx.workerDetailOpen && ctx.workerDetail && ctx.workerDetail.worker.sessionId === ctx.sessionId) {
+			ctx.refreshCurrentWorkerDetail();
+		}
+
+		if (!ctx.sessionId && ctx.workers.length) {
+			const preferredWorker = ctx.preferredSessionId
+				? ctx.workers.find((worker) => worker.sessionId === ctx.preferredSessionId)
+				: null;
+			const firstAttachable = ctx.workers.find((worker) => worker.status !== "stopped" && worker.status !== "failed");
+			const targetWorker = preferredWorker || firstAttachable || ctx.workers[0];
+			if (!ctx.isNodeViewSelected() && targetWorker.status !== "stopped" && targetWorker.status !== "failed") {
+				ctx.attachWorker(targetWorker.sessionId, true);
+			}
+		}
+	}
+
+	function handleControlMessage(msg, ctx) {
+		if (msg.controlKind === "result" && msg.controlName === "get_primary_agent" && msg.payload && msg.payload.primary) {
+			ctx.primaryAgent = msg.payload.primary || null;
+			ctx.renderNodeHome();
+			return true;
+		}
+
+		if (msg.controlKind === "result" && msg.controlName === "send_primary_message") {
+			if (msg.ok === false) {
+				ctx.pendingNodeReply = false;
+				ctx.pushNodeTranscript(
+					"assistant",
+					msg.error || msg.payload?.error || "Primary agent request failed before it produced a reply.",
+				);
+				return true;
+			}
+			if (msg.payload) {
+				applyPrimaryReply(msg.payload, ctx);
+				return true;
+			}
+			ctx.pendingNodeReply = false;
+			ctx.pushNodeTranscript("assistant", "Primary agent did not return a usable reply.");
+			return true;
+		}
+
+		if (msg.controlKind === "result" && (msg.controlName === "get_runtime_summary" || msg.controlName === "list_workers") && msg.payload) {
+			applyRuntimeSnapshot(msg.payload, ctx);
+			return true;
+		}
+
+		if (msg.controlKind === "result" && msg.controlName === "get_worker_detail" && msg.payload && msg.payload.worker) {
+			ctx.workerDetail = msg.payload.worker || null;
+			ctx.renderWorkerDetailPanel();
+			return true;
+		}
+
+		if (msg.controlKind === "result" && msg.controlName === "browse_directories" && msg.payload) {
+			ctx.dirBrowserPath = msg.payload.path || null;
+			ctx.dirBrowserParentPath = msg.payload.parentPath || null;
+			ctx.dirBrowserRepoRoot = msg.payload.repoRoot || null;
+			ctx.dirBrowserEntries = msg.payload.entries || [];
+			ctx.renderDirBrowser();
+			return true;
+		}
+
+		if (msg.controlKind === "event" && msg.controlName === "runtime.snapshot" && msg.payload) {
+			applyRuntimeSnapshot(msg.payload, ctx);
+			return true;
+		}
+
+		if (msg.controlKind === "event" && msg.controlName === "worker.detail" && msg.payload && msg.payload.worker) {
+			ctx.workerDetail = msg.payload.worker || null;
+			ctx.renderWorkerDetailPanel();
+			return true;
+		}
+
+		if (msg.controlKind === "event" && msg.controlName === "directory.list" && msg.payload) {
+			ctx.dirBrowserPath = msg.payload.path || null;
+			ctx.dirBrowserParentPath = msg.payload.parentPath || null;
+			ctx.dirBrowserRepoRoot = msg.payload.repoRoot || null;
+			ctx.dirBrowserEntries = msg.payload.entries || [];
+			ctx.renderDirBrowser();
+			return true;
+		}
+
+		return false;
+	}
+
+	global.MagicShellRuntimeControl = {
+		hasUsablePrimaryAgent,
+		applyRuntimeSnapshot,
+		handleControlMessage,
+	};
+})(window);

package/dist/workbench/runtime-messages.js

@@ -0,0 +1,80 @@
+(function (global) {
+	function handleWorkbenchMessage(msg, ctx) {
+		switch (msg.type) {
+			case "auth_success":
+				ctx.writeTerminalLine("__system__", "\r\n[ SYSTEM ONLINE ]");
+				ctx.sessionId = null;
+				ctx.setSessionDisplay("----");
+				ctx.syncWorkerPluginPreference?.();
+				ctx.requestWorkerList();
+				return true;
+
+			case "output":
+				if (msg.sessionId) {
+					ctx.writeTerminal(msg.sessionId, msg.data);
+				} else {
+					ctx.writeTerminal("__system__", msg.data);
+				}
+				return true;
+
+			case "error":
+				ctx.writeTerminalLine(ctx.activeTerminalId || "__system__", `\r\n[ ERROR: ${msg.error} ]\r\n`);
+				return true;
+
+			case "session":
+				ctx.requestWorkerList();
+				return true;
+
+			case "dir_list":
+				ctx.dirBrowserPath = msg.path || null;
+				ctx.dirBrowserParentPath = msg.parentPath || null;
+				ctx.dirBrowserRepoRoot = msg.repoRoot || null;
+				ctx.dirBrowserEntries = msg.entries || [];
+				ctx.renderDirBrowser();
+				return true;
+
+			case "worker_list":
+				global.MagicShellRuntimeControl.applyRuntimeSnapshot({
+					workers: msg.workers || [],
+					runtime: msg.runtime || null,
+					focus: msg.focus || [],
+					primary: msg.primary || null,
+					nodeHistory: msg.nodeHistory || [],
+				}, ctx.getRuntimeControlContext());
+				return true;
+
+			case "worker_detail":
+				ctx.workerDetail = msg.worker || null;
+				ctx.renderWorkerDetailPanel();
+				return true;
+
+			case "node_reply":
+				ctx.pendingNodeReply = false;
+				ctx.pushNodeTranscript("assistant", msg.text || "Primary agent did not return a message.", {
+					actionLabel: msg.actionLabel,
+					actionType: msg.actionType,
+					actionTaskSummary: msg.actionTaskSummary,
+					actionSessionId: msg.actionSessionId,
+				});
+				return true;
+
+			case "attached":
+				if (msg.sessionId) {
+					ctx.sessionId = msg.sessionId;
+					ctx.setSessionDisplay(msg.sessionId.slice(-8));
+					ctx.renderWorkers();
+				}
+				return true;
+
+			case "control":
+				return global.MagicShellRuntimeControl.handleControlMessage(msg, ctx.getRuntimeControlContext());
+
+			default:
+				return false;
+		}
+	}
+
+	global.MagicShellRuntimeMessages = {
+		handleWorkbenchMessage,
+	};
+})(window);

package/dist/workbench/runtime-node-ui.js

@@ -0,0 +1,102 @@
+(function (global) {
+	function renderNodeDetailPanel(ctx) {
+		const panel = ctx.getPanelNode();
+		const toggle = ctx.getToggleNode();
+		panel.classList.toggle("active", ctx.nodeDetailOpen && ctx.isNodeViewSelected());
+		toggle.textContent = ctx.nodeDetailOpen ? "HIDE" : "OVERVIEW";
+	}
+
+	function getPrimaryTitle(primaryAgent) {
+		return "Agent";
+	}
+
+	function renderNodeHome(ctx) {
+		const thread = ctx.getThreadNode();
+		const coordination = ctx.getCoordinationNode();
+		const coordinationText = ctx.getCoordinationTextNode();
+		const input = ctx.getInputNode();
+		const workers = ctx.workers;
+		const summary = ctx.runtimeSummary || {
+			liveWorkers: workers.filter((worker) => worker.status !== "stopped" && worker.status !== "failed").length,
+			waitingWorkers: workers.filter((worker) => worker.activityState === "ready" && worker.status !== "stopped" && worker.status !== "failed").length,
+			busyWorkers: workers.filter((worker) => worker.activityState === "busy" && worker.status !== "stopped" && worker.status !== "failed").length,
+		};
+		const primaryTitle = getPrimaryTitle(ctx.primaryAgent);
+		const primaryLabel = ctx.primaryAgent
+			? `${ctx.primaryAgent.pluginName} · ${ctx.primaryAgent.status}`
+			: "no primary";
+		ctx.setNodeNavTitle(primaryTitle);
+		ctx.setNodeHomeTitle(primaryTitle);
+		ctx.setNodeNavMeta(`${primaryLabel} · ${summary.liveWorkers || 0} live · ${summary.waitingWorkers || 0} waiting · ${summary.busyWorkers || 0} busy`);
+		ctx.setNodeNavBadge(summary.busyWorkers ? `${summary.busyWorkers} busy` : "idle");
+		ctx.setNodeHomeBadge(summary.liveWorkers ? `${summary.liveWorkers} live` : "idle");
+		const primaryReady = global.MagicShellRuntimeControl.hasUsablePrimaryAgent(ctx.primaryAgent);
+		input.disabled = ctx.pendingNodeReply || !ctx.isConnected() || !primaryReady;
+		input.placeholder = ctx.pendingNodeReply
+			? "Primary agent is thinking..."
+			: primaryReady
+				? "Ask the primary agent to coordinate work."
+				: "Primary agent unavailable. Use the worker controls directly.";
+
+		if (!primaryReady) {
+			coordination.className = "node-coordination-state";
+			coordinationText.textContent = "Primary agent unavailable. Use the runtime controls directly.";
+		} else if (ctx.pendingNodeReply) {
+			coordination.className = `node-coordination-state active ${summary.busyWorkers > 0 ? "waiting" : ""}`.trim();
+			coordinationText.textContent = summary.busyWorkers > 0
+				? "Primary is delegating work and waiting for a worker result."
+				: "Primary is reviewing the request.";
+		} else if (summary.busyWorkers > 0) {
+			coordination.className = "node-coordination-state active waiting";
+			coordinationText.textContent = `Runtime has ${summary.busyWorkers} busy worker${summary.busyWorkers > 1 ? "s" : ""}. Open the worker view to inspect live execution.`;
+		} else if (summary.waitingWorkers > 0) {
+			coordination.className = "node-coordination-state active";
+			coordinationText.textContent = `Runtime has ${summary.waitingWorkers} worker${summary.waitingWorkers > 1 ? "s" : ""} ready for follow-up.`;
+		} else {
+			coordination.className = "node-coordination-state";
+			coordinationText.textContent = "Primary coordination idle.";
+		}
+
+		const merged = [...ctx.nodeTranscript].slice(-18);
+		if (!primaryReady) {
+			merged.push({
+				id: "node-primary-unavailable",
+				role: "assistant",
+				text: "Primary agent unavailable. Magic Shell is still usable as a runtime workbench: spawn workers, inspect runtime state, browse directories, and attach directly.",
+				timestamp: Date.now(),
+			});
+		}
+
+		if (!merged.length) {
+			thread.innerHTML = '<div class="node-chat-empty">Primary agent is ready.</div>';
+			return;
+		}
+
+		const previousScrollTop = thread.scrollTop;
+		const distanceFromBottom = thread.scrollHeight - thread.scrollTop - thread.clientHeight;
+		const shouldStickToBottom = distanceFromBottom < 24;
+
+		thread.innerHTML = merged.map((entry) => `
+			<div class="node-turn ${entry.role} ${entry.pending ? "pending" : ""}">
+				<div>${ctx.escapeHtml(entry.text)}</div>
+				${(entry.actionSessionId || entry.actionType === "spawn") ? `
+					<div class="node-turn-action-row">
+						<button class="node-turn-action" onclick="runNodeAction('${entry.id}')">${ctx.escapeHtml(entry.actionLabel || "ATTACH")}</button>
+					</div>
+				` : ""}
+				${entry.pending ? '<div class="node-turn-status">Working...</div>' : ""}
+				<div class="node-turn-meta">${ctx.escapeHtml(ctx.formatRelativeTime(entry.timestamp))}</div>
+			</div>
+		`).join("");
+		if (shouldStickToBottom) {
+			thread.scrollTop = thread.scrollHeight;
+		} else {
+			thread.scrollTop = previousScrollTop;
+		}
+	}
+
+	global.MagicShellRuntimeNodeUI = {
+		renderNodeDetailPanel,
+		renderNodeHome,
+	};
+})(window);

package/dist/workbench/runtime-render.js

@@ -0,0 +1,180 @@
+(function (global) {
+	function renderRuntimeSummary(ctx) {
+		const node = ctx.getRuntimeSummaryNode();
+		const workers = ctx.workers;
+		const summary = ctx.runtimeSummary || {
+			liveWorkers: workers.filter((worker) => worker.status !== "stopped" && worker.status !== "failed").length,
+			closedWorkers: workers.filter((worker) => worker.status === "stopped" || worker.status === "failed").length,
+			busyWorkers: workers.filter((worker) => worker.activityState === "busy" && worker.status !== "stopped" && worker.status !== "failed").length,
+			waitingWorkers: workers.filter((worker) => worker.activityState === "ready" && worker.status !== "stopped" && worker.status !== "failed").length,
+			attentionWorkers: workers.filter((worker) => worker.phase === "attention" || ctx.workerNeedsAttention(worker)).length,
+			quietWorkers: workers.filter((worker) => worker.phase === "quiet").length,
+			failedWorkers: workers.filter((worker) => worker.status === "failed").length,
+			watchWorkers: workers.filter((worker) => worker.interventionLevel === "watch").length,
+			suggestedWorkers: workers.filter((worker) => worker.interventionLevel === "suggested").length,
+			requiredWorkers: workers.filter((worker) => worker.interventionLevel === "required").length,
+			observeWorkers: workers.filter((worker) => worker.recommendedAction === "observe").length,
+			attachWorkers: workers.filter((worker) => worker.recommendedAction === "attach").length,
+			restartWorkers: workers.filter((worker) => worker.recommendedAction === "restart").length,
+			closeWorkers: workers.filter((worker) => worker.recommendedAction === "close").length,
+			totalRestarts: workers.reduce((sum, worker) => sum + (worker.restartCount || 0), 0),
+			totalAttaches: workers.reduce((sum, worker) => sum + (worker.attachCount || 0), 0),
+			totalOutputChars: workers.reduce((sum, worker) => sum + (worker.outputCharCount || 0), 0),
+		};
+		node.innerHTML = [
+			["LIVE", summary.liveWorkers],
+			["BUSY", summary.busyWorkers],
+			["WAITING", summary.waitingWorkers],
+			["QUIET", summary.quietWorkers],
+			["ATTN", summary.attentionWorkers],
+			["FAILED", summary.failedWorkers],
+			["WATCH", summary.watchWorkers],
+			["SUGGEST", summary.suggestedWorkers],
+			["REQUIRED", summary.requiredWorkers],
+			["OBSERVE", summary.observeWorkers],
+			["ATTACH", summary.attachWorkers],
+			["RESTART", summary.restartWorkers],
+			["CLOSE", summary.closeWorkers],
+			["ATTACHES", summary.totalAttaches],
+			["RESTARTS", summary.totalRestarts],
+			["OUTPUT", ctx.formatBytes(summary.totalOutputChars)],
+			["CLOSED", summary.closedWorkers],
+		].map(([label, value]) => `
+			<div class="runtime-summary-stat">
+				<div class="runtime-summary-label">${ctx.escapeHtml(label)}</div>
+				<div class="runtime-summary-value">${ctx.escapeHtml(value)}</div>
+			</div>
+		`).join("");
+	}
+
+	function renderRuntimeFocus(ctx) {
+		const node = ctx.getRuntimeFocusNode();
+		const focusItems = ctx.runtimeFocus || [];
+		if (!focusItems.length) {
+			node.className = "runtime-focus-empty";
+			node.textContent = "No immediate actions.";
+			return;
+		}
+		node.className = "runtime-focus-list";
+		node.innerHTML = focusItems.map((item) => `
+			<div class="runtime-focus-item" onclick="attachWorker('${item.sessionId}')">
+				<div class="runtime-focus-head">
+					<span>${ctx.escapeHtml(ctx.formatFocusAction(item))} · ${ctx.escapeHtml(item.agentType)} · ${ctx.escapeHtml(item.title)}</span>
+					<span>${ctx.escapeHtml(ctx.formatRelativeTime(item.updatedAt))}</span>
+				</div>
+				<div class="runtime-focus-body">${ctx.escapeHtml(item.reason || `${item.phase || "worker"} needs attention`)}</div>
+			</div>
+		`).join("");
+	}
+
+	function renderRuntimeFeed(ctx) {
+		const node = ctx.getRuntimeFeedNode();
+		const recent = [...ctx.workers]
+			.filter((worker) => worker.lastEventAt && worker.lastEventSummary && !ctx.isControlNoise(worker.lastEventSummary))
+			.sort((a, b) => (b.lastEventAt || 0) - (a.lastEventAt || 0))
+			.slice(0, 6);
+		if (!recent.length) {
+			node.className = "runtime-feed-empty";
+			node.innerHTML = "No worker activity yet.";
+			return;
+		}
+		node.className = "runtime-feed-list";
+		node.innerHTML = recent.map((worker) => {
+			const label = worker.displayName || worker.taskSummary || `S:${worker.sessionId.slice(-6)}`;
+			const eventLevel = worker.lastEventLevel ? `<span class="runtime-level ${worker.lastEventLevel}">${ctx.escapeHtml(worker.lastEventLevel)}</span>` : "";
+			return `
+				<div class="runtime-feed-item">
+					<div class="runtime-feed-head">
+						<span>${ctx.escapeHtml(worker.agentType)} · ${ctx.escapeHtml(label)} ${eventLevel}</span>
+						<span>${ctx.escapeHtml(ctx.formatRelativeTime(worker.lastEventAt))}</span>
+					</div>
+					<div class="runtime-feed-body">${ctx.escapeHtml(worker.lastEventSummary || "")}</div>
+				</div>
+			`;
+		}).join("");
+	}
+
+	function renderWorkers(ctx) {
+		const list = ctx.getWorkerListNode();
+		const nodeCard = ctx.getNodeNavCard();
+		if (ctx.selectedViewId !== "node" && !ctx.workers.some((worker) => worker.sessionId === ctx.selectedViewId)) {
+			ctx.selectNodeHome();
+			return;
+		}
+		renderRuntimeSummary(ctx);
+		renderRuntimeFocus(ctx);
+		renderRuntimeFeed(ctx);
+		ctx.renderNodeHome();
+		nodeCard.classList.toggle("active", ctx.isNodeViewSelected());
+		if (!ctx.workers.length) {
+			list.innerHTML = '<div class="worker-empty">No workers yet.</div>';
+			ctx.updateWorkspaceView();
+			return;
+		}
+
+		const orderedWorkers = [...ctx.workers].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+		const liveWorkers = orderedWorkers.filter((worker) => worker.status !== "stopped" && worker.status !== "failed");
+		const closedWorkers = orderedWorkers.filter((worker) => worker.status === "stopped" || worker.status === "failed");
+
+		const renderWorkerCard = (worker) => {
+			const active = ctx.selectedViewId === worker.sessionId ? "active" : "";
+			const summary = worker.taskSummary || "";
+			const displayName = worker.displayName || `S:${worker.sessionId.slice(-6)}`;
+			const cwd = worker.cwd || ".";
+			const recent = ctx.formatLastOutput(worker.lastOutputAt);
+			const recentEvent = ctx.getWorkerPreviewLine(worker);
+			const recentEventAt = worker.lastEventAt ? ` · ${ctx.formatRelativeTime(worker.lastEventAt)}` : "";
+			const clickable = worker.status !== "stopped" && worker.status !== "failed";
+			const inactive = clickable ? "" : "inactive";
+			const badge = ctx.formatWorkerBadge(worker);
+			const attention = ctx.workerNeedsAttention(worker) ? "needs-attention" : "";
+			const location = ctx.pathBaseName(cwd);
+			const label = worker.agentSessionId
+				? `PIE:${worker.agentSessionId.slice(-6)}`
+				: `S:${worker.sessionId.slice(-6)}`;
+			const action = ctx.formatRecommendedAction(worker);
+			return `
+				<div class="worker-item ${active} ${inactive} ${attention} ${worker.status}" data-session-id="${worker.sessionId}" ${clickable ? `onclick="attachWorker('${worker.sessionId}')"` : ""}>
+					<div class="worker-title-row">
+						<div class="worker-type">${ctx.escapeHtml(displayName)}</div>
+						<div class="worker-label">${label}</div>
+					</div>
+					<div class="worker-meta">${ctx.escapeHtml(location)}${summary ? ` · ${ctx.escapeHtml(summary)}` : ""}</div>
+					<div class="worker-event">${ctx.escapeHtml(recentEvent)}${ctx.escapeHtml(recentEventAt)}</div>
+					<div class="worker-badge">${badge}${action ? ` · ${ctx.escapeHtml(action)}` : ""}</div>
+					<div class="worker-session">${worker.sessionId.slice(-8)} · ${recent}</div>
+				</div>
+			`;
+		};
+
+		const liveMarkup = liveWorkers.length
+			? `<div class="worker-section-list">${liveWorkers.map(renderWorkerCard).join("")}</div>`
+			: '<div class="worker-empty">No live workers.</div>';
+		const closedToggle = closedWorkers.length
+			? `
+				<button class="worker-section-toggle" onclick="toggleClosedWorkers()">
+					<span>${ctx.showClosedWorkers ? "HIDE" : "SHOW"} CLOSED</span>
+					<span>${closedWorkers.length}</span>
+				</button>
+			`
+			: "";
+		const closedMarkup = closedWorkers.length && ctx.showClosedWorkers
+			? `<div class="worker-section-list">${closedWorkers.map(renderWorkerCard).join("")}</div>`
+			: "";
+
+		list.innerHTML = `
+			<div class="worker-section">${liveMarkup}</div>
+			${closedToggle ? `<div class="worker-section">${closedToggle}${closedMarkup}</div>` : ""}
+		`;
+		ctx.setWorkerHeaderLabel(`SESSIONS ${liveWorkers.length}${closedWorkers.length ? ` · ${closedWorkers.length} CLOSED` : ""}`);
+		ctx.renderCwdShortcuts();
+		ctx.updateWorkspaceView();
+	}
+
+	global.MagicShellRuntimeRender = {
+		renderRuntimeSummary,
+		renderRuntimeFocus,
+		renderRuntimeFeed,
+		renderWorkers,
+	};
+})(window);