npm - @cydm/magic-shell-agent-node - Versions diffs - 0.1.1 → 0.1.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/local-direct-server.js +3 -2
package/dist/workbench/index.html +3827 -0
package/dist/workbench/runtime-control.js +180 -0
package/dist/workbench/runtime-messages.js +80 -0
package/dist/workbench/runtime-node-ui.js +102 -0
package/dist/workbench/runtime-render.js +180 -0
package/dist/workbench/runtime-terminal.js +250 -0
package/dist/workbench/runtime-transport.js +105 -0
package/dist/workbench/runtime-worker-ui.js +94 -0
package/dist/workbench/test.html +325 -0
package/package.json +2 -2

package/dist/workbench/index.html ADDED Viewed

@@ -0,0 +1,3827 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Magic Shell - Retro Terminal</title>
+	<!-- xterm.js CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
+	<!-- Retro Font -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+	<style>
+		:root {
+			/* Chassis Colors - Olive Green */
+			--chassis-main: #8C8C70;
+			--chassis-light: #A8A88A;
+			--chassis-dark: #6B6B54;
+			--chassis-deep: #4A4A38;
+			/* Screen Colors */
+			--screen-bg: #11214a;
+			--screen-glow: rgba(146, 214, 255, 0.16);
+			--screen-curvature: rgba(0, 0, 0, 0.18);
+			/* Text Colors */
+			--text-primary: #F5F8FF;
+			--text-dim: #AAB8CC;
+			--text-amber: #FFB000;
+			--text-green: #5CF29A;
+			/* Accent */
+			--accent-led: #FF3333;
+			--accent-led-off: #330000;
+			/* Keys */
+			--key-face: #96967A;
+			--key-side: #5A5C45;
+			--key-text: #1a1a15;
+			--key-nav: #333333;
+			--key-nav-text: #cccccc;
+			/* Effects */
+			--bevel-light: rgba(255,255,255,0.4);
+			--bevel-dark: rgba(0,0,0,0.4);
+			/* UI Controls */
+			--btn-radius: 6px;
+			--btn-height-sm: 34px;
+			--btn-height-md: 38px;
+			--btn-padding-x-sm: 10px;
+			--btn-padding-x-md: 12px;
+		}
+		* {
+			box-sizing: border-box;
+			user-select: none;
+			-webkit-tap-highlight-color: transparent;
+		}
+		.xterm,
+		.xterm *,
+		.node-chat-thread,
+		.node-chat-thread *,
+		.worker-detail-panel,
+		.worker-detail-panel *,
+		.runtime-feed,
+		.runtime-feed *,
+		.runtime-summary,
+		.runtime-summary *,
+		.current-worker-bar,
+		.current-worker-bar * {
+			user-select: text;
+		}
+		body, html {
+			margin: 0;
+			padding: 0;
+			height: 100%;
+			width: 100%;
+			overflow: hidden;
+			background-color: #111;
+			font-family: 'JetBrains Mono', monospace;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+			text-rendering: optimizeLegibility;
+		}
+		/* Device Casing - Full Screen */
+		.device-casing {
+			width: 100%;
+			height: 100%;
+			background-color: var(--chassis-main);
+			display: flex;
+			flex-direction: column;
+			padding: 16px;
+			position: relative;
+			box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
+		}
+		/* Noise Texture Overlay */
+		.device-casing::before {
+			content: "";
+			position: absolute;
+			top: 0; left: 0; width: 100%; height: 100%;
+			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
+			pointer-events: none;
+			opacity: 0.4;
+			mix-blend-mode: multiply;
+			z-index: 1;
+		}
+		/* Top Bezel with Brand and Status */
+		.bezel-top {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding-bottom: 12px;
+			border-bottom: 2px solid var(--chassis-dark);
+			margin-bottom: 12px;
+			position: relative;
+			z-index: 2;
+		}
+		.brand-badge {
+			font-size: 1.4rem;
+			color: var(--chassis-deep);
+			font-weight: bold;
+			text-shadow: 0 1px 0 rgba(255,255,255,0.2);
+			border: 2px solid var(--chassis-deep);
+			padding: 2px 12px;
+			background: rgba(0,0,0,0.05);
+			box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
+			font-family: 'VT323', monospace;
+			letter-spacing: 2px;
+		}
+		.power-indicator {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			font-size: 1rem;
+			color: var(--chassis-deep);
+			font-weight: bold;
+			text-shadow: 0 1px 0 rgba(255,255,255,0.1);
+		}
+		.led {
+			width: 14px;
+			height: 14px;
+			background-color: var(--accent-led-off);
+			border-radius: 2px;
+			border: 1px solid rgba(0,0,0,0.5);
+			box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8);
+			transition: all 0.3s ease;
+		}
+		.led.active {
+			background-color: var(--accent-led);
+			box-shadow: 0 0 8px var(--accent-led), inset 1px 1px 1px rgba(255,255,255,0.5);
+		}
+		/* CRT Container */
+		.crt-container {
+			flex: 1;
+			background-color: var(--screen-bg);
+			border-radius: 12px;
+			position: relative;
+			overflow: hidden;
+			border: 6px solid;
+			border-color: var(--chassis-dark) var(--chassis-light) var(--chassis-light) var(--chassis-dark);
+			box-shadow: inset 0 0 18px rgba(0,0,0,0.45);
+			padding: 16px;
+			z-index: 2;
+		}
+		.screen-layout {
+			position: relative;
+			z-index: 5;
+			display: flex;
+			height: 100%;
+			gap: 12px;
+		}
+		.worker-sidebar {
+			width: 220px;
+			background: rgba(0,0,0,0.25);
+			border: 1px solid rgba(255,255,255,0.08);
+			border-radius: 8px;
+			padding: 10px;
+			display: none;
+			flex-direction: column;
+			gap: 10px;
+		}
+		.mobile-sidebar-backdrop {
+			display: none;
+		}
+		.mobile-sessions-toggle {
+			display: none;
+		}
+		.worker-sidebar.active {
+			display: flex;
+		}
+		.worker-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			color: var(--text-primary);
+			font-size: 1.1rem;
+		}
+		.session-nav {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			min-height: 0;
+			overflow: auto;
+		}
+		.node-nav-card,
+		.worker-item {
+			background: rgba(255,255,255,0.04);
+			border: 1px solid rgba(255,255,255,0.08);
+			border-radius: 6px;
+			padding: 8px;
+			cursor: pointer;
+			color: var(--text-primary);
+		}
+		.node-nav-card.active,
+		.worker-item.active {
+			border-color: var(--text-green);
+			box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
+		}
+		.node-nav-card {
+			margin-bottom: 2px;
+		}
+		.node-nav-title {
+			color: var(--text-green);
+			font-size: 1rem;
+		}
+		.node-nav-meta {
+			font-size: 0.85rem;
+			color: var(--text-dim);
+			margin-top: 4px;
+			line-height: 1.25;
+		}
+		.node-nav-badge {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			margin-top: 6px;
+			padding: 2px 6px;
+			border-radius: 999px;
+			font-size: 0.78rem;
+			border: 1px solid rgba(255,255,255,0.12);
+			color: var(--text-amber);
+			background: rgba(255,255,255,0.04);
+		}
+		.worker-spawn-form {
+			display: flex;
+			flex-direction: column;
+			gap: 7px;
+			padding: 8px;
+			border: 1px solid rgba(255,255,255,0.08);
+			border-radius: 6px;
+			background: rgba(255,255,255,0.04);
+		}
+		.worker-spawn-topbar {
+			display: flex;
+			gap: 6px;
+			align-items: stretch;
+			height: 30px;
+		}
+		.worker-spawn-topbar > * ,
+		.worker-spawn-actions > * {
+			flex: 1 1 0;
+			min-width: 0;
+		}
+		.worker-select-wrap {
+			position: relative;
+			flex: 1 1 auto;
+			min-width: 0;
+			height: 100%;
+		}
+		.worker-select-wrap::after {
+			content: "▾";
+			position: absolute;
+			right: 10px;
+			top: 50%;
+			transform: translateY(-52%);
+			color: var(--text-dim);
+			font-size: 0.72rem;
+			line-height: 1;
+			pointer-events: none;
+		}
+		.worker-spawn-topbar .worker-spawn-input,
+		.worker-spawn-row .worker-spawn-input {
+			flex: 1 1 auto;
+			min-width: 0;
+		}
+		.worker-spawn-field {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+		.worker-spawn-actions {
+			display: flex;
+			gap: 6px;
+		}
+		.worker-shortcuts-wrap {
+			display: flex;
+			flex-direction: column;
+		}
+		.worker-spawn-label {
+			color: var(--text-dim);
+			font-size: 0.74rem;
+			margin-bottom: 3px;
+		}
+		.worker-spawn-input {
+			width: 100%;
+			padding: 0 8px;
+			border: 1px solid rgba(255,255,255,0.12);
+			box-sizing: border-box;
+			border-radius: 4px;
+			background: rgba(0,0,0,0.28);
+			color: var(--text-primary);
+			font-family: 'VT323', monospace;
+			font-size: 0.95rem;
+			outline: none;
+			min-height: 30px;
+			height: 30px;
+			line-height: 1;
+			appearance: none;
+		}
+		.worker-select-wrap .worker-spawn-input {
+			padding-right: 24px;
+		}
+		.worker-spawn-input:focus {
+			border-color: rgba(74, 222, 128, 0.4);
+		}
+		.worker-shortcuts {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 4px;
+			max-height: calc(22px * 2 + 4px);
+			overflow: hidden;
+		}
+		.worker-shortcut {
+			background: rgba(255,255,255,0.06);
+			color: var(--text-dim);
+			border: 1px solid rgba(255,255,255,0.10);
+			border-radius: 999px;
+			font-family: 'VT323', monospace;
+			font-size: 0.72rem;
+			min-height: 24px;
+			padding: 0 7px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			max-width: 100%;
+			line-height: 1;
+			white-space: nowrap;
+		}
+		.worker-spawn-row {
+			display: flex;
+			gap: 6px;
+			align-items: center;
+		}
+		.worker-browse-btn {
+			background: rgba(255,255,255,0.08);
+			color: var(--text-primary);
+			border: 1px solid rgba(255,255,255,0.12);
+			box-sizing: border-box;
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 0.84rem;
+			min-height: 24px;
+			height: 24px;
+			padding: 0 10px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			flex-shrink: 0;
+			touch-action: manipulation;
+			line-height: 1;
+		}
+		.worker-browse-btn:disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
+		.worker-add-btn {
+			flex: 0 0 44px;
+			width: 44px;
+			min-height: 30px;
+			height: 30px;
+			padding: 0;
+			box-sizing: border-box;
+			border-radius: 4px;
+			appearance: none;
+			-webkit-appearance: none;
+			margin: 0;
+		}
+		.worker-dir-browser {
+			display: none;
+			flex-direction: column;
+			gap: 4px;
+			padding: 6px;
+			border: 1px solid rgba(255,255,255,0.08);
+			border-radius: 6px;
+			background: rgba(0,0,0,0.22);
+		}
+		.worker-dir-browser.active {
+			display: flex;
+		}
+		.worker-dir-path {
+			color: var(--text-amber);
+			font-size: 0.74rem;
+			word-break: break-word;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 3px;
+			align-items: center;
+		}
+		.worker-dir-crumb {
+			cursor: pointer;
+			color: var(--text-amber);
+			text-decoration: underline;
+			text-underline-offset: 2px;
+		}
+		.worker-dir-sep {
+			color: var(--text-dim);
+		}
+		.worker-dir-list {
+			display: flex;
+			flex-direction: column;
+			gap: 3px;
+			max-height: 180px;
+			overflow: auto;
+		}
+		.worker-dir-item {
+			background: rgba(255,255,255,0.04);
+			border: 1px solid rgba(255,255,255,0.08);
+			border-radius: 4px;
+			padding: 0 8px;
+			min-height: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			font-size: 0.82rem;
+			line-height: 1;
+			color: var(--text-primary);
+			cursor: pointer;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.worker-dir-empty {
+			color: var(--text-dim);
+			font-size: 0.74rem;
+		}
+		.current-worker-bar {
+			display: none;
+			align-items: flex-start;
+			justify-content: space-between;
+			gap: 12px;
+			margin-bottom: 8px;
+			padding: 8px 10px;
+			background: rgba(255,255,255,0.05);
+			border: 1px solid rgba(255,255,255,0.08);
+			border-radius: 6px;
+			color: var(--text-primary);
+		}
+		.current-worker-bar.active {
+			display: flex;
+		}
+		.current-worker-main {
+			min-width: 0;
+		}
+		.current-worker-title {
+			color: var(--text-green);
+			font-size: 1rem;
+		}
+		.current-worker-subtitle {
+			color: var(--text-dim);
+			font-size: 0.85rem;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.current-worker-stop {
+			background: rgba(255, 51, 51, 0.14);
+			color: #ffd4d4;
+			border: 1px solid rgba(255, 51, 51, 0.35);
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 0.95rem;
+			min-height: var(--btn-height-md);
+			padding: 0 var(--btn-padding-x-md);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			flex-shrink: 0;
+			line-height: 1;
+		}
+		.current-worker-actions {
+			display: flex;
+			gap: 8px;
+			flex-shrink: 0;
+		}
+		.current-worker-action {
+			background: rgba(255,255,255,0.08);
+			color: var(--text-primary);
+			border: 1px solid rgba(255,255,255,0.12);
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 0.95rem;
+			min-height: var(--btn-height-md);
+			padding: 0 var(--btn-padding-x-md);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			touch-action: manipulation;
+			line-height: 1;
+		}
+		.worker-mobile-action {
+			display: none;
+		}
+		.current-worker-action:disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
+		.current-worker-stop:disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
+		.worker-add-btn {
+			background: rgba(255,255,255,0.08);
+			color: var(--text-green);
+			border: 1px solid rgba(255,255,255,0.12);
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 0.95rem;
+			min-height: 30px;
+			height: 30px;
+			padding: 0 10px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			touch-action: manipulation;
+			line-height: 1;
+		}
+		.worker-add-btn:disabled {
+			opacity: 0.55;
+			cursor: not-allowed;
+		}
+		.worker-close-btn {
+			display: none;
+			background: rgba(255,255,255,0.08);
+			color: var(--text-dim);
+			border: 1px solid rgba(255,255,255,0.12);
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 1rem;
+			min-height: var(--btn-height-md);
+			padding: 0 var(--btn-padding-x-md);
+			cursor: pointer;
+			touch-action: manipulation;
+			line-height: 1;
+		}
+		.worker-list {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			overflow: auto;
+			min-height: 0;
+		}
+		.worker-section {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
+		.worker-section-toggle {
+			display: inline-flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+			min-height: var(--btn-height-sm);
+			padding: 0 10px;
+			border-radius: var(--btn-radius);
+			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.03);
+			color: var(--text-dim);
+			font-family: 'VT323', monospace;
+			font-size: 0.9rem;
+			cursor: pointer;
+			line-height: 1;
+		}
+		.worker-section-toggle:hover {
+			border-color: rgba(255,255,255,0.16);
+			color: var(--text-primary);
+		}
+		.worker-section-list {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
+		.worker-item.inactive {
+			opacity: 0.6;
+			cursor: default;
+		}
+		.worker-item.running .worker-type,
+		.worker-item.starting .worker-type {
+			color: var(--text-green);
+		}
+		.worker-item.blocked .worker-type {
+			color: var(--text-amber);
+		}
+		.worker-item.needs-attention {
+			border-color: rgba(255, 176, 0, 0.35);
+			box-shadow: 0 0 12px rgba(255, 176, 0, 0.12);
+		}
+		.worker-item.stopping .worker-type,
+		.worker-item.stopped .worker-type,
+		.worker-item.failed .worker-type {
+			color: #ff8f8f;
+		}
+		.worker-type {
+			font-size: 1rem;
+			color: var(--text-green);
+		}
+		.worker-title-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: baseline;
+			gap: 8px;
+		}
+		.worker-label {
+			font-size: 0.82rem;
+			color: var(--text-amber);
+			flex-shrink: 0;
+		}
+		.worker-meta {
+			font-size: 0.85rem;
+			color: var(--text-dim);
+			margin-top: 4px;
+			line-height: 1.2;
+		}
+		.worker-session {
+			font-size: 0.8rem;
+			color: var(--text-amber);
+			margin-top: 4px;
+		}
+		.worker-event {
+			font-size: 0.8rem;
+			color: rgba(245, 248, 255, 0.78);
+			margin-top: 4px;
+			line-height: 1.2;
+		}
+		.worker-badge {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			margin-top: 6px;
+			padding: 2px 6px;
+			border-radius: 999px;
+			font-size: 0.78rem;
+			border: 1px solid rgba(255,255,255,0.12);
+			color: var(--text-dim);
+			background: rgba(255,255,255,0.04);
+		}
+		.worker-empty {
+			color: var(--text-dim);
+			font-size: 0.9rem;
+			padding: 6px 2px;
+		}
+		.runtime-feed {
+			margin-bottom: 14px;
+			padding: 10px;
+			border-radius: 8px;
+			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.03);
+		}
+		.runtime-feed-title {
+			font-size: 0.88rem;
+			color: var(--text-amber);
+			letter-spacing: 0.04em;
+			margin-bottom: 8px;
+		}
+		.runtime-feed-empty {
+			font-size: 0.82rem;
+			color: var(--text-dim);
+			line-height: 1.35;
+		}
+		.runtime-feed-list {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+		.runtime-feed-item {
+			padding-left: 8px;
+			border-left: 2px solid rgba(255,255,255,0.08);
+		}
+		.runtime-feed-head {
+			display: flex;
+			justify-content: space-between;
+			gap: 8px;
+			font-size: 0.78rem;
+			color: var(--text-dim);
+		}
+		.runtime-feed-body {
+			font-size: 0.82rem;
+			color: rgba(245, 248, 255, 0.88);
+			line-height: 1.3;
+			margin-top: 2px;
+		}
+		.runtime-level {
+			display: inline-flex;
+			align-items: center;
+			padding: 1px 6px;
+			border-radius: 999px;
+			font-size: 0.68rem;
+			border: 1px solid rgba(255,255,255,0.12);
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+		}
+		.runtime-level.control {
+			color: var(--text-cyan);
+			border-color: rgba(107, 231, 255, 0.22);
+		}
+		.runtime-level.warning {
+			color: var(--text-amber);
+			border-color: rgba(255, 176, 0, 0.24);
+		}
+		.runtime-level.error {
+			color: #ff8c8c;
+			border-color: rgba(255, 108, 108, 0.22);
+		}
+		.runtime-summary {
+			margin-bottom: 10px;
+			padding: 10px;
+			border-radius: 8px;
+			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.03);
+		}
+		.runtime-summary-title {
+			font-size: 0.88rem;
+			color: var(--text-amber);
+			letter-spacing: 0.04em;
+			margin-bottom: 8px;
+		}
+		.runtime-summary-grid {
+			display: grid;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			gap: 8px;
+		}
+		.runtime-summary-stat {
+			padding: 8px;
+			border-radius: 6px;
+			background: rgba(255,255,255,0.04);
+			border: 1px solid rgba(255,255,255,0.06);
+		}
+		.runtime-summary-label {
+			font-size: 0.72rem;
+			color: var(--text-dim);
+			letter-spacing: 0.05em;
+		}
+		.runtime-summary-value {
+			font-size: 1rem;
+			color: var(--text-primary);
+			margin-top: 4px;
+		}
+		.runtime-focus {
+			margin-bottom: 10px;
+			padding: 10px;
+			border-radius: 8px;
+			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.03);
+		}
+		.runtime-focus-title {
+			font-size: 0.88rem;
+			color: var(--text-amber);
+			letter-spacing: 0.04em;
+			margin-bottom: 8px;
+		}
+		.runtime-focus-empty {
+			font-size: 0.82rem;
+			color: var(--text-dim);
+			line-height: 1.35;
+		}
+		.runtime-focus-list {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+		.runtime-focus-item {
+			padding: 8px;
+			border-radius: 6px;
+			background: rgba(255,255,255,0.04);
+			border: 1px solid rgba(255,255,255,0.06);
+			cursor: pointer;
+		}
+		.runtime-focus-item:hover {
+			border-color: rgba(255,255,255,0.16);
+			background: rgba(255,255,255,0.06);
+		}
+		.runtime-focus-head {
+			display: flex;
+			justify-content: space-between;
+			gap: 8px;
+			font-size: 0.78rem;
+			color: var(--text-dim);
+		}
+		.runtime-focus-body {
+			font-size: 0.82rem;
+			color: rgba(245, 248, 255, 0.88);
+			line-height: 1.3;
+			margin-top: 3px;
+		}
+		.worker-detail-panel {
+			display: none;
+			position: absolute;
+			top: 66px;
+			right: 10px;
+			width: min(820px, calc(100% - 20px));
+			max-height: min(68vh, 640px);
+			padding: 10px;
+			border-radius: 8px;
+			border: 1px solid rgba(255,255,255,0.10);
+			background: rgba(22, 36, 75, 0.96);
+			backdrop-filter: blur(6px);
+			box-shadow: 0 18px 48px rgba(0,0,0,0.35);
+			color: var(--text-primary);
+			overflow: auto;
+			z-index: 20;
+		}
+		.worker-detail-panel.active {
+			display: block;
+		}
+		.worker-detail-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 12px;
+			margin-bottom: 6px;
+			position: sticky;
+			top: 0;
+			padding-bottom: 6px;
+			background: rgba(22, 36, 75, 0.96);
+			z-index: 1;
+		}
+		.worker-detail-title {
+			color: var(--text-amber);
+			font-size: 0.95rem;
+			margin-bottom: 0;
+		}
+		.worker-detail-close {
+			border: 1px solid rgba(255,255,255,0.10);
+			background: rgba(255,255,255,0.05);
+			color: var(--text-dim);
+			border-radius: var(--btn-radius);
+			min-height: var(--btn-height-sm);
+			padding: 0 10px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 0.74rem;
+			cursor: pointer;
+			line-height: 1;
+		}
+		.worker-detail-close:hover {
+			color: var(--text-primary);
+			border-color: rgba(255,255,255,0.22);
+		}
+		.worker-detail-meta {
+			color: var(--text-dim);
+			font-size: 0.82rem;
+			line-height: 1.4;
+			white-space: pre-wrap;
+		}
+		.worker-detail-events {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			max-height: 140px;
+			overflow: auto;
+		}
+		.worker-detail-event {
+			font-size: 0.8rem;
+			color: var(--text-dim);
+			border-left: 2px solid rgba(255,255,255,0.08);
+			padding-left: 8px;
+		}
+		.worker-detail-output {
+			margin-top: 8px;
+			padding: 8px 10px;
+			border-radius: 6px;
+			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(10, 18, 38, 0.42);
+			color: var(--text-primary);
+			font-size: 0.8rem;
+			line-height: 1.45;
+			white-space: pre-wrap;
+			max-height: 120px;
+			overflow: auto;
+		}
+		.worker-detail-snapshots {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			max-height: 120px;
+			overflow: auto;
+		}
+		.worker-detail-snapshot {
+			font-size: 0.8rem;
+			color: rgba(245, 248, 255, 0.82);
+			border-left: 2px solid rgba(92,242,154,0.25);
+			padding-left: 8px;
+		}
+		.workspace-panel {
+			position: relative;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-width: 0;
+		}
+		.node-home-view,
+		.worker-view {
+			display: none;
+			flex: 1;
+			min-height: 0;
+		}
+		.node-home-view.active,
+		.worker-view.active {
+			display: flex;
+		}
+		.node-home-view {
+			flex-direction: column;
+			gap: 10px;
+			min-height: 0;
+		}
+		.node-home-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 12px;
+			padding: 4px 2px 8px;
+		}
+		.node-home-title {
+			color: var(--text-green);
+			font-size: 1.12rem;
+		}
+		.node-home-subtitle {
+			color: var(--text-dim);
+			font-size: 0.82rem;
+			line-height: 1.35;
+			margin-top: 4px;
+		}
+		.node-home-main {
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			flex: 1;
+		}
+		.node-coordination-state {
+			display: none;
+			align-items: center;
+			gap: 10px;
+			padding: 8px 12px;
+			border-radius: 10px;
+			border: 1px solid rgba(92, 242, 154, 0.18);
+			background: rgba(92, 242, 154, 0.06);
+			color: var(--text-primary);
+			font-size: 0.86rem;
+			line-height: 1.35;
+		}
+		.node-coordination-state.active {
+			display: flex;
+		}
+		.node-coordination-dot {
+			width: 9px;
+			height: 9px;
+			border-radius: 999px;
+			background: var(--text-green);
+			box-shadow: 0 0 0 4px rgba(92, 242, 154, 0.10);
+			flex: 0 0 auto;
+		}
+		.node-coordination-state.waiting .node-coordination-dot {
+			background: var(--text-amber);
+			box-shadow: 0 0 0 4px rgba(255, 176, 0, 0.10);
+		}
+		.node-chat-card {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			min-height: 0;
+			border-radius: 8px;
+			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.025);
+			overflow: hidden;
+		}
+		.node-chat-thread {
+			flex: 1;
+			min-height: 0;
+			overflow: auto;
+			padding: 18px 18px 12px;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			align-items: stretch;
+		}
+		.node-chat-empty {
+			color: var(--text-dim);
+			font-size: 0.92rem;
+			line-height: 1.45;
+		}
+		.node-turn {
+			width: fit-content;
+			max-width: min(72ch, 92%);
+			padding: 12px 14px;
+			border-radius: 14px;
+			border: 1px solid rgba(255,255,255,0.08);
+			line-height: 1.45;
+			font-size: 0.92rem;
+			white-space: pre-wrap;
+		}
+		.node-turn.user {
+			align-self: flex-end;
+			background: rgba(92, 242, 154, 0.10);
+			border-color: rgba(92, 242, 154, 0.20);
+			color: var(--text-primary);
+		}
+		.node-turn.assistant {
+			align-self: flex-start;
+			background: rgba(255,255,255,0.04);
+			color: var(--text-primary);
+		}
+		.node-turn-meta {
+			font-size: 0.74rem;
+			color: var(--text-dim);
+			margin-top: 6px;
+		}
+		.node-turn.pending {
+			border-style: dashed;
+			opacity: 0.92;
+		}
+		.node-turn-status {
+			margin-top: 10px;
+			color: var(--text-amber);
+			font-size: 0.84rem;
+		}
+		.node-turn-action-row {
+			margin-top: 10px;
+			display: flex;
+			justify-content: flex-start;
+		}
+		.node-turn-action {
+			background: rgba(255,255,255,0.08);
+			color: var(--text-green);
+			border: 1px solid rgba(92, 242, 154, 0.24);
+			border-radius: 999px;
+			font-family: 'VT323', monospace;
+			font-size: 0.9rem;
+			min-height: 30px;
+			padding: 0 10px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			line-height: 1;
+		}
+		.crt-container.disconnected .screen-layout {
+			filter: blur(1px);
+			opacity: 0.28;
+			pointer-events: none;
+		}
+		.node-compose {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			padding: 14px 16px 16px;
+			border-top: 1px solid rgba(255,255,255,0.08);
+			background: rgba(7, 11, 25, 0.16);
+		}
+		.node-compose-input {
+			width: 100%;
+			min-height: 64px;
+			max-height: 180px;
+			resize: vertical;
+			padding: 10px 12px;
+			border: 1px solid rgba(255,255,255,0.12);
+			border-radius: 8px;
+			background: rgba(0,0,0,0.24);
+			color: var(--text-primary);
+			font-family: 'JetBrains Mono', monospace;
+			font-size: 0.9rem;
+			outline: none;
+		}
+		.node-compose-input:focus {
+			border-color: rgba(92, 242, 154, 0.35);
+		}
+		.node-compose-input:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+		.node-compose-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 10px;
+		}
+		.node-compose-hint {
+			color: var(--text-dim);
+			font-size: 0.78rem;
+			line-height: 1.35;
+		}
+		.node-compose-send {
+			background: rgba(92, 242, 154, 0.12);
+			color: var(--text-green);
+			border: 1px solid rgba(92, 242, 154, 0.24);
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 1rem;
+			min-height: var(--btn-height-md);
+			padding: 0 16px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			flex-shrink: 0;
+			line-height: 1;
+		}
+		.node-compose-send:disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
+		.node-home-actions {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+		.node-home-action {
+			background: rgba(255,255,255,0.08);
+			color: var(--text-primary);
+			border: 1px solid rgba(255,255,255,0.12);
+			border-radius: var(--btn-radius);
+			font-family: 'VT323', monospace;
+			font-size: 0.95rem;
+			min-height: var(--btn-height-md);
+			padding: 0 var(--btn-padding-x-md);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			touch-action: manipulation;
+			line-height: 1;
+		}
+		.node-home-action:hover {
+			border-color: rgba(255,255,255,0.2);
+		}
+		.node-home-badge {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			padding: 3px 8px;
+			border-radius: 999px;
+			font-size: 0.8rem;
+			border: 1px solid rgba(255,255,255,0.12);
+			color: var(--text-amber);
+			background: rgba(255,255,255,0.04);
+		}
+		.node-detail-panel {
+			display: none;
+			position: absolute;
+			top: 10px;
+			right: 10px;
+			width: min(420px, calc(100% - 20px));
+			max-height: calc(100% - 20px);
+			padding: 10px;
+			border-radius: 8px;
+			border: 1px solid rgba(255,255,255,0.10);
+			background: rgba(22, 36, 75, 0.97);
+			backdrop-filter: blur(6px);
+			box-shadow: 0 18px 48px rgba(0,0,0,0.35);
+			color: var(--text-primary);
+			overflow: auto;
+			z-index: 20;
+		}
+		.node-detail-panel.active {
+			display: block;
+		}
+		.node-detail-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 12px;
+			margin-bottom: 6px;
+			position: sticky;
+			top: 0;
+			padding-bottom: 6px;
+			background: rgba(22, 36, 75, 0.97);
+			z-index: 1;
+		}
+		.node-detail-title {
+			color: var(--text-amber);
+			font-size: 0.95rem;
+		}
+		.node-detail-close {
+			border: 1px solid rgba(255,255,255,0.10);
+			background: rgba(255,255,255,0.05);
+			color: var(--text-dim);
+			border-radius: var(--btn-radius);
+			min-height: var(--btn-height-sm);
+			padding: 0 10px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 0.74rem;
+			cursor: pointer;
+			line-height: 1;
+		}
+		.node-detail-close:hover {
+			color: var(--text-primary);
+			border-color: rgba(255,255,255,0.22);
+		}
+		.worker-view {
+			position: relative;
+			flex-direction: column;
+			min-height: 0;
+		}
+		.worker-view .terminal-content {
+			display: block;
+			flex: 1;
+			min-height: 0;
+		}
+		/* CRT Glow Effect */
+		.crt-glow {
+			position: absolute;
+			top: 0; left: 0; right: 0; bottom: 0;
+			background: radial-gradient(circle at center, rgba(150,220,255,0.10) 0%, rgba(17,33,74,0.18) 72%, rgba(0,0,0,0.24) 100%);
+			pointer-events: none;
+			z-index: 10;
+		}
+		/* Screen Curvature */
+		.crt-curvature {
+			position: absolute;
+			top: 0; left: 0; right: 0; bottom: 0;
+			background: radial-gradient(ellipse at center, transparent 60%, var(--screen-curvature) 100%);
+			pointer-events: none;
+			z-index: 11;
+			border-radius: 8px;
+		}
+		/* Scanlines */
+		.scanlines {
+			position: absolute;
+			top: 0; left: 0; right: 0; bottom: 0;
+			background: linear-gradient(
+				to bottom,
+				rgba(255,255,255,0),
+				rgba(255,255,255,0) 50%,
+				rgba(0,0,0,0.08) 50%,
+				rgba(0,0,0,0.08)
+			);
+			background-size: 100% 4px;
+			pointer-events: none;
+			z-index: 12;
+			opacity: 0.28;
+		}
+		/* Connection Overlay */
+		.connection-overlay {
+			position: absolute;
+			top: 0; left: 0; right: 0; bottom: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			z-index: 20;
+			padding: 40px;
+			background: linear-gradient(180deg, rgba(8, 14, 30, 0.96), rgba(10, 18, 38, 0.98));
+			backdrop-filter: blur(10px);
+		}
+		.connection-overlay.hidden {
+			display: none;
+		}
+		.connection-form {
+			background: rgba(0,0,0,0.3);
+			border: 2px solid var(--text-dim);
+			border-radius: 8px;
+			padding: 30px;
+			max-width: 400px;
+			width: 100%;
+		}
+		.form-title {
+			color: var(--text-primary);
+			font-size: 1.6rem;
+			text-align: center;
+			margin-bottom: 20px;
+			text-shadow: 0 0 8px rgba(200,200,255,0.3);
+		}
+		.form-group {
+			margin-bottom: 16px;
+		}
+		.form-label {
+			display: block;
+			color: var(--text-dim);
+			font-size: 0.9rem;
+			margin-bottom: 4px;
+		}
+		.form-input {
+			width: 100%;
+			background: rgba(0,0,0,0.4);
+			border: 1px solid var(--text-dim);
+			border-radius: 4px;
+			padding: 8px 12px;
+			color: var(--text-primary);
+			font-family: 'VT323', monospace;
+			font-size: 1.1rem;
+		}
+		.form-input:focus {
+			outline: none;
+			border-color: var(--text-green);
+			box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
+		}
+		.connect-btn {
+			width: 100%;
+			background: var(--chassis-main);
+			border: 2px solid var(--chassis-deep);
+			border-bottom-width: 4px;
+			border-radius: var(--btn-radius);
+			min-height: 48px;
+			padding: 0 14px;
+			color: var(--key-text);
+			font-family: 'VT323', monospace;
+			font-size: 1.2rem;
+			cursor: pointer;
+			margin-top: 10px;
+			line-height: 1;
+		}
+		.connect-btn:active {
+			border-bottom-width: 2px;
+			transform: translateY(2px);
+		}
+		.connect-btn:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+		/* Terminal Content Area */
+		.terminal-content {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			z-index: 5;
+			display: none;
+		}
+		.terminal-content.active {
+			display: block;
+		}
+		.terminal-pane {
+			position: absolute;
+			inset: 0;
+			display: none;
+		}
+		.terminal-pane.active {
+			display: block;
+		}
+		/* xterm.js Customization */
+		.xterm {
+			height: 100% !important;
+			font-variant-ligatures: none;
+		}
+		.xterm .xterm-rows,
+		.xterm .xterm-helpers,
+		.xterm .xterm-screen {
+			font-family: 'JetBrains Mono', monospace !important;
+			font-weight: 500;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+			text-rendering: geometricPrecision;
+		}
+		/* Control Deck */
+		.control-deck {
+			margin-top: 16px;
+			background-color: rgba(0,0,0,0.1);
+			border-radius: 8px;
+			padding: 12px;
+			border: 2px solid rgba(255,255,255,0.1);
+			border-bottom-color: rgba(0,0,0,0.2);
+			border-right-color: rgba(0,0,0,0.2);
+			z-index: 2;
+		}
+		.key-grid {
+			display: grid;
+			grid-template-columns: repeat(6, 1fr);
+			gap: 10px;
+			max-width: 600px;
+			margin: 0 auto;
+		}
+		/* Retro 3D Keys */
+		.key {
+			position: relative;
+			background-color: var(--key-face);
+			height: 44px;
+			border-radius: 6px;
+			border-top: 2px solid var(--bevel-light);
+			border-left: 2px solid rgba(255,255,255,0.2);
+			border-right: 3px solid rgba(0,0,0,0.3);
+			border-bottom: 5px solid var(--bevel-dark);
+			color: var(--key-text);
+			font-size: 1rem;
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			text-transform: uppercase;
+			cursor: pointer;
+			transition: all 0.05s ease-out;
+			box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+			font-family: 'VT323', monospace;
+		}
+		.key::after {
+			content: '';
+			position: absolute;
+			top: 4px; left: 4px; right: 4px; bottom: 4px;
+			background: linear-gradient(135deg, rgba(0,0,0,0.05), rgba(255,255,255,0.1));
+			border-radius: 3px;
+			pointer-events: none;
+		}
+		.key:active {
+			transform: translateY(3px);
+			border-bottom-width: 2px;
+			box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+			background-color: #8A8A6E;
+		}
+		.key.nav {
+			background-color: var(--key-nav);
+			color: var(--key-nav-text);
+			border-top-color: #555;
+			border-left-color: #444;
+			border-right-color: #111;
+			border-bottom-color: #000;
+		}
+		.key.danger {
+			background-color: #9e4a4a;
+			color: #ffe0e0;
+			border-bottom-color: rgba(0,0,0,0.6);
+		}
+		.key.danger:active {
+			background-color: #8a4040;
+		}
+		.key.accent {
+			background-color: #846b28;
+			color: #fff4cf;
+			border-bottom-color: rgba(0,0,0,0.55);
+		}
+		.key.accent:active {
+			background-color: #755d21;
+		}
+		.key.wide {
+			min-width: 0;
+		}
+		.mobile-control-cluster {
+			display: none;
+			flex-direction: column;
+			gap: 6px;
+			max-width: 420px;
+			margin: 0 auto;
+		}
+		.mobile-key-row {
+			display: grid;
+			gap: 6px;
+			grid-template-columns: repeat(5, minmax(0, 1fr));
+		}
+		.mobile-key-row.top {
+			align-items: stretch;
+		}
+		.mobile-key-split {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 4px;
+			height: 100%;
+		}
+		.mobile-key-split .key {
+			height: 100%;
+			font-size: 0.8rem;
+		}
+		/* Status Bar at Bottom */
+		.status-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 12px;
+			padding-top: 12px;
+			border-top: 1px solid var(--chassis-dark);
+			font-size: 0.9rem;
+			color: var(--chassis-deep);
+			z-index: 2;
+		}
+		.status-left, .status-right {
+			display: flex;
+			gap: 16px;
+		}
+		.status-item {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+		}
+		.status-value {
+			font-family: 'VT323', monospace;
+			background: rgba(0,0,0,0.15);
+			padding: 2px 8px;
+			border-radius: 3px;
+			border: 1px inset rgba(0,0,0,0.2);
+			color: var(--chassis-deep);
+		}
+		/* Responsive */
+		@media (max-width: 600px) {
+			.key-grid {
+				grid-template-columns: repeat(4, 1fr);
+				gap: 8px;
+			}
+			.key {
+				height: 40px;
+				font-size: 0.9rem;
+			}
+			.brand-badge {
+				font-size: 1.1rem;
+			}
+			.connection-form {
+				padding: 20px;
+			}
+		}
+		@media (max-width: 820px) {
+			body, html {
+				overflow: hidden;
+			}
+			.device-casing {
+				padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px;
+			}
+			.bezel-top {
+				padding-bottom: 8px;
+				margin-bottom: 8px;
+				gap: 8px;
+				flex-wrap: wrap;
+			}
+			.brand-badge {
+				font-size: 1.08rem;
+				padding: 2px 8px;
+				letter-spacing: 1px;
+			}
+			.power-indicator {
+				font-size: 0.84rem;
+				gap: 6px;
+			}
+			.crt-container {
+				padding: 10px;
+				border-width: 4px;
+			}
+			.screen-layout {
+				gap: 0;
+			}
+			.mobile-sidebar-backdrop {
+				display: block;
+				position: absolute;
+				inset: 0;
+				background: rgba(6, 10, 24, 0.16);
+				z-index: 12;
+				opacity: 0;
+				pointer-events: none;
+				transition: opacity 0.2s ease;
+			}
+			.mobile-sidebar-backdrop.active {
+				opacity: 1;
+				pointer-events: none;
+			}
+			.worker-sidebar {
+				position: absolute;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				width: calc(100% - 8px);
+				max-width: calc(100% - 8px);
+				display: flex;
+				flex: none;
+				z-index: 25;
+				transform: translateX(calc(-100% - 14px));
+				opacity: 0;
+				pointer-events: none;
+				transition: transform 0.2s ease, opacity 0.2s ease;
+				box-shadow: 0 18px 42px rgba(0,0,0,0.42);
+				background: linear-gradient(180deg, rgba(11, 24, 63, 0.98), rgba(9, 20, 51, 0.98));
+			}
+			.worker-sidebar.mobile-open {
+				transform: translateX(0);
+				opacity: 1;
+				pointer-events: auto;
+			}
+			.workspace-panel {
+				width: 100%;
+			}
+			.workspace-panel.mobile-muted {
+				opacity: 0.08;
+				pointer-events: none;
+				filter: saturate(0.85);
+			}
+			.node-home-header {
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				padding: 2px 0 8px;
+			}
+			.worker-sidebar {
+				padding: 8px;
+				gap: 8px;
+			}
+			.worker-header {
+				font-size: 0.98rem;
+			}
+			.worker-spawn-form {
+				gap: 6px;
+				padding: 7px;
+			}
+			.worker-spawn-topbar {
+				gap: 5px;
+				height: 28px;
+			}
+			.worker-select-wrap::after {
+				right: 9px;
+				font-size: 0.68rem;
+			}
+			.worker-spawn-field {
+				gap: 5px;
+			}
+			.worker-shortcuts-wrap {
+				gap: 0;
+			}
+			.worker-spawn-label {
+				font-size: 0.72rem;
+				margin-bottom: 2px;
+			}
+			.worker-spawn-row {
+				gap: 6px;
+			}
+			.worker-spawn-input {
+				padding: 0 7px;
+				font-size: 0.92rem;
+				min-height: 28px;
+				height: 28px;
+			}
+			.worker-shortcuts {
+				gap: 4px;
+				max-height: calc(22px * 2 + 4px);
+			}
+			.worker-shortcut {
+				min-height: 22px;
+				padding: 0 6px;
+				font-size: 0.68rem;
+			}
+			.worker-browse-btn {
+				min-height: 22px;
+				height: 22px;
+				font-size: 0.76rem;
+			}
+			.worker-add-btn {
+				flex-basis: 40px;
+				width: 40px;
+				min-height: 28px;
+				height: 28px;
+			}
+			.worker-dir-browser {
+				padding: 6px;
+				gap: 5px;
+			}
+			.worker-dir-item {
+				min-height: 22px;
+				height: 22px;
+			}
+			.worker-dir-list {
+				max-height: 132px;
+			}
+			.session-nav {
+				gap: 6px;
+			}
+			.node-nav-card,
+			.worker-item {
+				padding: 6px 7px;
+			}
+			.node-nav-title {
+				font-size: 0.92rem;
+			}
+			.node-nav-meta {
+				display: none;
+			}
+			.node-nav-badge {
+				margin-top: 4px;
+				padding: 1px 5px;
+				font-size: 0.72rem;
+			}
+			.worker-meta,
+			.worker-event,
+			.worker-session,
+			.worker-badge {
+				font-size: 0.74rem;
+				line-height: 1.12;
+			}
+			.worker-title-row {
+				margin-bottom: 2px;
+			}
+			.node-home-subtitle,
+			.node-compose-hint {
+				display: none;
+			}
+			.node-chat-thread {
+				padding: 12px 12px 10px;
+				gap: 10px;
+				align-items: stretch;
+			}
+			.node-turn {
+				width: 100%;
+				max-width: 100%;
+				padding: 10px 12px;
+				font-size: 0.88rem;
+			}
+			.node-compose {
+				padding: 10px 10px 12px;
+				gap: 10px;
+			}
+			.node-compose-input {
+				min-height: 92px;
+				max-height: 200px;
+				font-size: 0.94rem;
+			}
+			.node-compose-row {
+				flex-direction: column;
+				align-items: stretch;
+			}
+			.node-compose-send {
+				width: 100%;
+				min-height: 42px;
+				font-size: 1.06rem;
+			}
+			.current-worker-bar {
+				flex-direction: column;
+				align-items: stretch;
+				padding: 7px 8px;
+				gap: 8px;
+			}
+			.current-worker-title {
+				font-size: 0.92rem;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			.current-worker-subtitle {
+				font-size: 0.76rem;
+				line-height: 1.15;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			.current-worker-actions {
+				display: grid;
+				grid-template-columns: repeat(5, minmax(0, 1fr));
+				width: 100%;
+			}
+			.mobile-sessions-toggle {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				min-height: 40px;
+			}
+			.worker-close-btn {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				min-height: 40px;
+			}
+			.worker-mobile-action {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				min-height: 40px;
+			}
+			.current-worker-action,
+			.current-worker-stop {
+				width: 100%;
+				min-height: 40px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.worker-browse-btn,
+			.node-home-action {
+				min-height: 40px;
+			}
+			.worker-detail-panel,
+			.node-detail-panel {
+				top: 0;
+				right: 0;
+				left: 0;
+				width: 100%;
+				max-height: 100%;
+				border-radius: 10px;
+			}
+			.control-deck {
+				margin-top: 8px;
+				padding: 8px;
+			}
+			.key-grid.desktop-key-grid {
+				display: none;
+			}
+			.mobile-control-cluster {
+				display: flex;
+			}
+			.key-grid {
+				grid-template-columns: repeat(6, minmax(0, 1fr));
+				gap: 6px;
+			}
+			.key {
+				height: 36px;
+				font-size: 0.82rem;
+			}
+			.status-bar {
+				margin-top: 8px;
+				padding-top: 8px;
+				flex-wrap: wrap;
+				gap: 8px;
+				font-size: 0.8rem;
+			}
+			.status-left,
+			.status-right {
+				gap: 8px;
+				flex-wrap: wrap;
+			}
+		}
+		/* xterm scrollbar styling */
+		.xterm-viewport::-webkit-scrollbar {
+			width: 8px;
+		}
+		.xterm-viewport::-webkit-scrollbar-track {
+			background: rgba(0,0,0,0.2);
+		}
+		.xterm-viewport::-webkit-scrollbar-thumb {
+			background: var(--chassis-dark);
+			border-radius: 4px;
+		}
+	</style>
+</head>
+<body>
+	<!-- Main Device Casing -->
+	<div class="device-casing">
+		<!-- Top Bezel -->
+		<div class="bezel-top">
+			<div class="brand-badge">◈ MAGIC-SHELL ◈</div>
+			<div class="power-indicator">
+				<span id="status-text">STANDBY</span>
+				<div id="status-led" class="led"></div>
+			</div>
+		</div>
+		<!-- CRT Screen Container -->
+		<div class="crt-container">
+			<!-- CRT Effects -->
+			<div class="scanlines"></div>
+			<div class="crt-glow"></div>
+			<div class="crt-curvature"></div>
+			<div id="mobile-sidebar-backdrop" class="mobile-sidebar-backdrop" onclick="closeWorkerSidebar()"></div>
+			<!-- Connection Overlay -->
+			<div id="connection-overlay" class="connection-overlay">
+				<div class="connection-form">
+					<div class="form-title">[ CONNECTION ]</div>
+					<div class="form-group">
+						<label class="form-label">RELAY URL</label>
+						<input type="text" id="relayUrl" class="form-input" value="" placeholder="wss://magicshell.ai/ws">
+					</div>
+					<div class="form-group">
+						<label class="form-label">NODE ID</label>
+						<input type="text" id="nodeId" class="form-input" placeholder="Enter node ID">
+					</div>
+					<div class="form-group">
+						<label class="form-label">PASSWORD</label>
+						<input type="password" id="password" class="form-input" placeholder="Enter password">
+					</div>
+					<button id="connectBtn" class="connect-btn" onclick="connect()">ESTABLISH LINK</button>
+				</div>
+			</div>
+			<div class="screen-layout">
+				<div id="worker-sidebar" class="worker-sidebar">
+					<div class="worker-header">
+						<span id="worker-header-label">SESSIONS</span>
+						<div style="display:flex; gap:8px; align-items:center;">
+							<button class="worker-close-btn" onclick="closeWorkerSidebar()">CLOSE</button>
+						</div>
+					</div>
+					<div class="worker-spawn-form">
+						<div class="worker-spawn-topbar">
+							<div class="worker-select-wrap">
+								<select id="spawnPlugin" class="worker-spawn-input">
+									<option value="pie">PIE</option>
+									<option value="claude-code">CLAUDE</option>
+									<option value="codex">CODEX</option>
+								</select>
+							</div>
+							<button class="worker-add-btn" onclick="spawnPieWorker()">+ PIE</button>
+						</div>
+						<div class="worker-spawn-field">
+							<div class="worker-spawn-row">
+								<input id="spawnCwd" class="worker-spawn-input" type="text" placeholder="/path/to/project">
+							</div>
+							<div class="worker-spawn-actions">
+								<button id="browseCwdBtn" class="worker-browse-btn" onclick="toggleDirBrowser()">BROWSE</button>
+								<button id="useCwdBtn" class="worker-browse-btn" onclick="useBrowsedDir()" disabled>SELECT</button>
+							</div>
+						</div>
+						<div class="worker-shortcuts-wrap">
+							<div id="cwd-shortcuts" class="worker-shortcuts"></div>
+						</div>
+						<div id="dir-browser" class="worker-dir-browser">
+							<div id="dir-browser-path" class="worker-dir-path">Loading...</div>
+							<div id="dir-browser-list" class="worker-dir-list"></div>
+						</div>
+					</div>
+					<div class="session-nav">
+						<div id="node-nav-card" class="node-nav-card" onclick="selectNodeHome()">
+							<div id="node-nav-title" class="node-nav-title">Agent</div>
+							<div id="node-nav-meta" class="node-nav-meta">Chat with your node and supervise workers.</div>
+							<div id="node-nav-badge" class="node-nav-badge">idle</div>
+						</div>
+						<div id="worker-list" class="worker-list">
+							<div class="worker-empty">No workers yet.</div>
+						</div>
+					</div>
+				</div>
+				<div class="workspace-panel">
+					<div id="node-home-view" class="node-home-view active">
+						<div class="node-home-header">
+							<div>
+								<div id="node-home-title" class="node-home-title">Agent</div>
+								<div class="node-home-subtitle">Chat with the primary agent here. Open a worker only when you want to inspect or take over.</div>
+							</div>
+							<div class="node-home-actions">
+								<div id="node-home-badge" class="node-home-badge">idle</div>
+								<button id="node-detail-toggle" class="node-home-action" onclick="toggleNodeDetail()">OVERVIEW</button>
+								<button id="mobile-sessions-toggle" class="node-home-action mobile-sessions-toggle" onclick="toggleWorkerSidebar()">SESSIONS</button>
+							</div>
+						</div>
+						<div class="node-home-main">
+							<div id="node-coordination-state" class="node-coordination-state">
+								<div class="node-coordination-dot"></div>
+								<div id="node-coordination-text">Primary coordination idle.</div>
+							</div>
+							<div class="node-chat-card">
+								<div id="node-chat-thread" class="node-chat-thread">
+									<div class="node-chat-empty">Primary agent is ready.</div>
+								</div>
+								<div class="node-compose">
+									<textarea id="node-compose-input" class="node-compose-input" placeholder="Ask the primary agent to coordinate work."></textarea>
+									<div class="node-compose-row">
+										<div class="node-compose-hint">Chat with the primary agent here. Attach a worker only when you want to inspect or directly steer execution.</div>
+										<button id="node-compose-send" class="node-compose-send" onclick="sendNodeMessage()">SEND</button>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div id="node-detail-panel" class="node-detail-panel">
+							<div class="node-detail-header">
+								<div class="node-detail-title">Primary Overview</div>
+								<button class="node-detail-close" onclick="closeNodeDetail()">CLOSE</button>
+							</div>
+							<div class="runtime-summary">
+								<div class="runtime-summary-title">PRIMARY OVERVIEW</div>
+								<div id="runtime-summary-grid" class="runtime-summary-grid"></div>
+							</div>
+							<div class="runtime-focus">
+								<div class="runtime-focus-title">NEXT ACTIONS</div>
+								<div id="runtime-focus-list" class="runtime-focus-empty">No immediate actions.</div>
+							</div>
+							<div class="runtime-feed">
+								<div class="runtime-feed-title">RUNTIME ACTIVITY</div>
+								<div id="runtime-feed-list" class="runtime-feed-empty">No worker activity yet.</div>
+							</div>
+						</div>
+					</div>
+					<div id="worker-view" class="worker-view">
+						<div id="current-worker-bar" class="current-worker-bar">
+							<div class="current-worker-main">
+								<div id="current-worker-title" class="current-worker-title">No worker attached</div>
+								<div id="current-worker-subtitle" class="current-worker-subtitle">Attach a worker to start</div>
+							</div>
+							<div class="current-worker-actions">
+								<button class="current-worker-action worker-mobile-action" onclick="selectNodeHome()">CHAT</button>
+								<button class="current-worker-action worker-mobile-action" onclick="toggleWorkerSidebar()">SESSIONS</button>
+								<button id="current-worker-detail-btn" class="current-worker-action" onclick="inspectCurrentWorker()">DETAILS</button>
+								<button id="current-worker-restart" class="current-worker-action" onclick="restartCurrentWorker()">RESTART</button>
+								<button id="current-worker-stop" class="current-worker-stop" onclick="stopCurrentWorker()">STOP</button>
+							</div>
+						</div>
+						<div id="worker-detail-panel" class="worker-detail-panel">
+							<div class="worker-detail-header">
+								<div id="worker-detail-title" class="worker-detail-title">Worker details</div>
+								<button class="worker-detail-close" onclick="closeWorkerDetail()">CLOSE</button>
+							</div>
+							<div id="worker-detail-meta" class="worker-detail-meta"></div>
+							<div id="worker-detail-snapshots" class="worker-detail-snapshots"></div>
+							<div id="worker-detail-events" class="worker-detail-events"></div>
+							<div id="worker-detail-output" class="worker-detail-output"></div>
+						</div>
+						<!-- Terminal -->
+						<div id="terminal" class="terminal-content"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- Control Deck -->
+		<div class="control-deck">
+			<div class="key-grid desktop-key-grid">
+				<button class="key" onclick="sendCommand('clear')" title="Clear Screen">CLS</button>
+				<button class="key" onclick="zoomIn()" title="Zoom In">ZOOM+</button>
+				<button class="key" onclick="zoomOut()" title="Zoom Out">ZOOM-</button>
+				<button class="key" onclick="fitTerminal()" title="Fit Screen">FIT</button>
+				<button class="key nav" onclick="disconnect()" title="Disconnect">DISC</button>
+				<button class="key danger" onclick="resetTerminal()" title="Reset">RST</button>
+			</div>
+			<div class="mobile-control-cluster">
+				<div class="mobile-key-row top">
+					<button class="key accent" onclick="sendTerminalControl('escape')" title="Escape">ESC</button>
+					<button class="key nav" onclick="sendTerminalControl('up')" title="Arrow Up">UP</button>
+					<button class="key" onclick="sendTerminalControl('enter')" title="Enter">ENTER</button>
+					<button class="key" onclick="openMenuCommand()" title="Open Slash Command">/</button>
+					<button class="key danger" onclick="sendTerminalControl('backspace')" title="Backspace">←</button>
+				</div>
+				<div class="mobile-key-row middle">
+					<button class="key nav" onclick="sendTerminalControl('left')" title="Arrow Left">LEFT</button>
+					<button class="key nav" onclick="sendTerminalControl('down')" title="Arrow Down">DOWN</button>
+					<button class="key nav" onclick="sendTerminalControl('right')" title="Arrow Right">RIGHT</button>
+					<button class="key" onclick="zoomOut()" title="Zoom Out">-</button>
+					<button class="key" onclick="zoomIn()" title="Zoom In">+</button>
+				</div>
+			</div>
+		</div>
+		<!-- Status Bar -->
+		<div class="status-bar">
+			<div class="status-left">
+				<div class="status-item">
+					<span>SES:</span>
+					<span id="session-display" class="status-value">----</span>
+				</div>
+				<div class="status-item">
+					<span>DIM:</span>
+					<span id="terminal-size" class="status-value">--×--</span>
+				</div>
+			</div>
+			<div class="status-right">
+				<div class="status-item">
+					<span>MODE:</span>
+					<span id="mode-display" class="status-value">STANDBY</span>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- xterm.js -->
+	<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+	<script src="./runtime-control.js"></script>
+	<script src="./runtime-transport.js"></script>
+	<script src="./runtime-messages.js"></script>
+	<script src="./runtime-render.js"></script>
+	<script src="./runtime-worker-ui.js"></script>
+	<script src="./runtime-node-ui.js"></script>
+	<script src="./runtime-terminal.js"></script>
+	<script>
+		const terminalContainer = document.getElementById('terminal');
+		const terminalTheme = {
+			background: '#11214a',
+			foreground: '#f5f8ff',
+			cursor: '#5cf29a',
+			selection: '#294b89',
+			black: '#11214a',
+			red: '#ff6b6b',
+			green: '#5cf29a',
+			yellow: '#FFB000',
+			blue: '#77b6ff',
+			magenta: '#ff89d8',
+			cyan: '#6be7ff',
+			white: '#f5f8ff',
+			brightBlack: '#5b6f96',
+			brightRed: '#ff8c8c',
+			brightGreen: '#8dffbc',
+			brightYellow: '#ffd76b',
+			brightBlue: '#9ccaff',
+			brightMagenta: '#fface6',
+			brightCyan: '#9af0ff',
+			brightWhite: '#ffffff'
+		};
+		// WebSocket
+		let ws = null;
+		let transport = null;
+		let sessionId = null;
+		let selectedViewId = localStorage.getItem('selectedViewId') || 'node';
+		let activeTerminalId = null;
+		let workers = [];
+		let preferredSessionId = localStorage.getItem('preferredSessionId');
+		let workerPollTimer = null;
+		let selectedSpawnPlugin = readStoredSpawnPlugin();
+		let defaultSpawnCwd = localStorage.getItem('spawnCwd') || '';
+		let recentCwds = [];
+		let pendingSpawnSessionId = null;
+		let pendingSpawnAutoAttach = true;
+		let pendingStopSessionId = null;
+		let pendingRestartSessionId = null;
+		let terminalFontSize = 14;
+		let dirBrowserPath = null;
+		let dirBrowserParentPath = null;
+		let dirBrowserRepoRoot = null;
+		let dirBrowserEntries = [];
+		let showClosedWorkers = localStorage.getItem('showClosedWorkers') === '1';
+		let workerDetail = null;
+		let workerDetailOpen = false;
+		let nodeDetailOpen = false;
+		let runtimeSummary = null;
+		let runtimeFocus = [];
+		let primaryAgent = null;
+		let pendingNodeReply = false;
+		let nodeTranscript = [{
+			id: `node-welcome-${Date.now()}`,
+			role: 'assistant',
+			text: 'Magic Shell is online. Use the runtime views to inspect, spawn, attach, and supervise workers.',
+			timestamp: Date.now(),
+		}];
+		let terminalManager = null;
+		let mobileSidebarOpen = false;
+		let mobileControlMode = 'terminal';
+		let mobileGestureState = null;
+		function escapeHtml(value) {
+			return String(value ?? '')
+				.replaceAll('&', '&amp;')
+				.replaceAll('<', '&lt;')
+				.replaceAll('>', '&gt;')
+				.replaceAll('"', '&quot;')
+				.replaceAll("'", '&#39;');
+		}
+		function pathBaseName(value) {
+			if (!value) return '.';
+			const normalized = String(value).replace(/[\\/]+$/, '');
+			if (!normalized) return value;
+			const parts = normalized.split(/[\\/]/).filter(Boolean);
+			return parts[parts.length - 1] || normalized;
+		}
+		function readCookie(name) {
+			const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+			return match ? decodeURIComponent(match[1]) : '';
+		}
+		function writeCookie(name, value) {
+			document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${60 * 60 * 24 * 365}`;
+		}
+		function readStoredSpawnPlugin() {
+			const cookieValue = readCookie('spawnPlugin');
+			const saved = cookieValue || localStorage.getItem('spawnPlugin') || 'pie';
+			return saved === 'claude-code' || saved === 'codex' ? saved : 'pie';
+		}
+		function persistSpawnPlugin(pluginName) {
+			selectedSpawnPlugin = pluginName === 'claude-code' || pluginName === 'codex' ? pluginName : 'pie';
+			localStorage.setItem('spawnPlugin', selectedSpawnPlugin);
+			writeCookie('spawnPlugin', selectedSpawnPlugin);
+		}
+		function loadRecentCwds() {
+			try {
+				const stored = readCookie('recentCwds') || localStorage.getItem('recentCwds') || '[]';
+				const parsed = JSON.parse(stored);
+				return Array.isArray(parsed) ? parsed.filter((item) => typeof item === 'string') : [];
+			} catch {
+				return [];
+			}
+		}
+		function saveRecentCwds() {
+			const serialized = JSON.stringify(recentCwds.slice(0, 8));
+			localStorage.setItem('recentCwds', serialized);
+			writeCookie('recentCwds', serialized);
+		}
+		function rememberCwd(cwd) {
+			if (!cwd) return;
+			recentCwds = [cwd, ...recentCwds.filter((item) => item !== cwd)].slice(0, 8);
+			saveRecentCwds();
+			renderCwdShortcuts();
+		}
+		function getTerminalManager() {
+			if (!terminalManager) {
+				terminalManager = window.MagicShellRuntimeTerminal.createTerminalManager({
+					container: terminalContainer,
+					theme: terminalTheme,
+					getFontSize() {
+						return terminalFontSize;
+					},
+					isConnected() {
+						return !!ws && ws.readyState === WebSocket.OPEN;
+					},
+					sendInput(targetSessionId, data) {
+						if (!ws || ws.readyState !== WebSocket.OPEN) return;
+						ws.send(JSON.stringify({
+							type: 'input',
+							sessionId: targetSessionId,
+							data,
+						}));
+					},
+					sendResize(targetSessionId, cols, rows) {
+						if (!ws || ws.readyState !== WebSocket.OPEN) return;
+						ws.send(JSON.stringify({
+							type: 'resize',
+							sessionId: targetSessionId,
+							cols,
+							rows,
+						}));
+					},
+					setTerminalSizeText(value) {
+						document.getElementById('terminal-size').textContent = value;
+					},
+					onActiveChange(value) {
+						activeTerminalId = value;
+					},
+				});
+			}
+			return terminalManager;
+		}
+		function createTerminalView(id) {
+			return getTerminalManager().createTerminalView(id);
+		}
+		function ensureTerminalView(id = '__system__') {
+			return getTerminalManager().ensureView(id);
+		}
+		function getActiveTerminalView() {
+			return getTerminalManager().getActiveView();
+		}
+		function setActiveTerminal(id) {
+			getTerminalManager().setActive(id);
+		}
+		function fitTerminalView(view) {
+			getTerminalManager().fitView(view);
+		}
+		function fitAllTerminalViews() {
+			getTerminalManager().fitAll();
+		}
+		function writeTerminal(id, data) {
+			return getTerminalManager().writeToView(id, data);
+		}
+		function writeTerminalLine(id, data) {
+			return getTerminalManager().writelnToView(id, data);
+		}
+		function destroyTerminalViews() {
+			getTerminalManager().destroyAll();
+		}
+		function destroyTerminalView(id) {
+			getTerminalManager().destroyView(id);
+		}
+		recentCwds = loadRecentCwds();
+		// Load saved credentials
+		document.getElementById('relayUrl').value = localStorage.getItem('relayUrl') || document.getElementById('relayUrl').value;
+		document.getElementById('nodeId').value = localStorage.getItem('nodeId') || '';
+		document.getElementById('password').value = localStorage.getItem('password') || '';
+		document.getElementById('spawnCwd').value = defaultSpawnCwd;
+		document.getElementById('spawnPlugin').value = selectedSpawnPlugin;
+		document.getElementById('spawnPlugin').addEventListener('change', (event) => {
+			persistSpawnPlugin(event.target.value || 'pie');
+			resetSpawnButton();
+			syncWorkerPluginPreference();
+		});
+		resetSpawnButton();
+		function renderCwdShortcuts() {
+			const container = document.getElementById('cwd-shortcuts');
+			const workerCwds = Array.from(new Set(
+				workers
+					.map((worker) => worker.cwd)
+					.filter((cwd) => typeof cwd === 'string' && cwd.length > 0)
+			));
+			const shortcuts = Array.from(new Set([
+				...recentCwds,
+				...workerCwds,
+			])).slice(0, 8);
+			if (!shortcuts.length) {
+				container.innerHTML = '';
+				return;
+			}
+			container.innerHTML = shortcuts.map((cwd) => {
+				const label = pathBaseName(cwd);
+				return `<button class="worker-shortcut" onclick="applyCwdShortcut(decodeURIComponent('${encodeURIComponent(cwd)}'))" title="${escapeHtml(cwd)}">${escapeHtml(label)}</button>`;
+			}).join('');
+		}
+		function applyCwdShortcut(cwd) {
+			const input = document.getElementById('spawnCwd');
+			input.value = cwd;
+			defaultSpawnCwd = cwd;
+			localStorage.setItem('spawnCwd', defaultSpawnCwd);
+			if (cwd) {
+				rememberCwd(cwd);
+			}
+		}
+		const searchParams = new URLSearchParams(window.location.search);
+		const inferredRelayUrl = inferDefaultRelayUrl();
+		document.getElementById('relayUrl').value = inferredRelayUrl;
+		const relayParam = searchParams.get('relay');
+		const nodeParam = searchParams.get('node');
+		const passwordParam = searchParams.get('pwd');
+		const autoConnectParam = searchParams.get('autoconnect');
+		if (relayParam) {
+			document.getElementById('relayUrl').value = relayParam;
+		}
+		if (nodeParam) {
+			document.getElementById('nodeId').value = nodeParam;
+		}
+		if (passwordParam) {
+			document.getElementById('password').value = passwordParam;
+		}
+		if (autoConnectParam === '1' || autoConnectParam === 'true') {
+			queueMicrotask(() => {
+				const relayUrl = document.getElementById('relayUrl').value.trim();
+				const nodeId = document.getElementById('nodeId').value.trim();
+				const password = document.getElementById('password').value.trim();
+				if (relayUrl && nodeId && password) {
+					connect();
+				}
+			});
+		}
+		document.getElementById('node-compose-input').addEventListener('keydown', (event) => {
+			if (event.key === 'Enter' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+				event.preventDefault();
+				sendNodeMessage();
+			}
+		});
+		function updateStatus(status, color = '#eaeaea') {
+			document.getElementById('status-text').textContent = status;
+			document.getElementById('mode-display').textContent = status;
+			const led = document.getElementById('status-led');
+			if (status === 'ONLINE') {
+				led.classList.add('active');
+			} else {
+				led.classList.remove('active');
+			}
+		}
+		function inferDefaultRelayUrl() {
+			const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+			return `${protocol}//${window.location.host}/ws`;
+		}
+		function setDisconnectedState(disconnected) {
+			document.querySelector('.crt-container')?.classList.toggle('disconnected', disconnected);
+		}
+		function isNodeViewSelected() {
+			return selectedViewId === 'node';
+		}
+		function pushNodeTranscript(role, text, extra = {}) {
+			nodeTranscript = [...nodeTranscript, {
+				id: `${role}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+				role,
+				text,
+				timestamp: Date.now(),
+				actionSessionId: extra.actionSessionId || null,
+				actionLabel: extra.actionLabel || '',
+				actionType: extra.actionType || '',
+				actionTaskSummary: extra.actionTaskSummary || '',
+			}].slice(-40);
+			renderNodeHome();
+		}
+		function syncNodeTranscriptFromServer(history) {
+			if (!Array.isArray(history) || !history.length) return;
+			nodeTranscript = history.slice(-40).map((entry, index) => ({
+				id: `node-sync-${entry.timestamp || Date.now()}-${index}`,
+				role: entry.role === 'user' ? 'user' : 'assistant',
+				text: String(entry.text || ''),
+				timestamp: entry.timestamp || Date.now(),
+				actionSessionId: entry.actionSessionId || null,
+				actionLabel: entry.actionLabel || '',
+				actionType: entry.actionType || '',
+				actionTaskSummary: entry.actionTaskSummary || '',
+			}));
+			renderNodeHome();
+		}
+		function sendControl(controlKind, controlName, payload = {}, target = {}) {
+			return transport?.sendControl(controlKind, controlName, payload, target) || null;
+		}
+		function syncWorkerPluginPreference() {
+			if (!ws || ws.readyState !== WebSocket.OPEN) return null;
+			return sendControl('command', 'set_worker_plugin_preference', {
+				pluginName: selectedSpawnPlugin,
+			});
+		}
+		function selectNodeHome() {
+			selectedViewId = 'node';
+			localStorage.setItem('selectedViewId', selectedViewId);
+			workerDetailOpen = false;
+			if (isMobileViewport()) {
+				closeWorkerSidebar();
+			}
+			updateWorkspaceView();
+			renderWorkers();
+		}
+		function returnToPrimaryChat({ clearSession = false } = {}) {
+			if (clearSession) {
+				sessionId = null;
+				document.getElementById('session-display').textContent = '----';
+			}
+			selectedViewId = 'node';
+			localStorage.setItem('selectedViewId', selectedViewId);
+			workerDetail = null;
+			workerDetailOpen = false;
+			nodeDetailOpen = false;
+			mobileSidebarOpen = false;
+			setActiveTerminal('__system__');
+			setMobileControlMode('terminal');
+			updateWorkspaceView();
+			renderWorkers();
+			requestAnimationFrame(() => {
+				document.getElementById('node-compose-input')?.focus?.();
+			});
+		}
+		function isMobileViewport() {
+			return (window.innerWidth || 0) <= 820;
+		}
+		function syncMobileWorkbench() {
+			const sidebar = document.getElementById('worker-sidebar');
+			const backdrop = document.getElementById('mobile-sidebar-backdrop');
+			const sessionsBtn = document.getElementById('mobile-sessions-toggle');
+			const controlDeck = document.querySelector('.control-deck');
+			const statusBar = document.querySelector('.status-bar');
+			const brandBadge = document.querySelector('.brand-badge');
+			const bezelTop = document.querySelector('.bezel-top');
+			const workspacePanel = document.querySelector('.workspace-panel');
+			const isMobile = isMobileViewport();
+			if (!isMobile) {
+				mobileSidebarOpen = false;
+			}
+			document.body.classList.toggle('compact-layout', isMobile);
+			if (sidebar) {
+				if (isMobile) {
+					sidebar.style.position = 'absolute';
+					sidebar.style.top = '0';
+					sidebar.style.left = '0';
+					sidebar.style.bottom = '0';
+					sidebar.style.width = 'calc(100% - 8px)';
+					sidebar.style.maxWidth = 'calc(100% - 8px)';
+					sidebar.style.flex = 'none';
+					sidebar.style.zIndex = '25';
+					sidebar.style.opacity = mobileSidebarOpen ? '1' : '0';
+					sidebar.style.pointerEvents = mobileSidebarOpen ? 'auto' : 'none';
+					sidebar.style.transform = mobileSidebarOpen ? 'translateX(0)' : 'translateX(calc(-100% - 14px))';
+					sidebar.style.boxShadow = '0 18px 42px rgba(0,0,0,0.42)';
+					sidebar.style.background = 'linear-gradient(180deg, rgba(11, 24, 63, 0.98), rgba(9, 20, 51, 0.98))';
+				} else {
+					sidebar.style.position = '';
+					sidebar.style.top = '';
+					sidebar.style.left = '';
+					sidebar.style.bottom = '';
+					sidebar.style.width = '';
+					sidebar.style.maxWidth = '';
+					sidebar.style.flex = '';
+					sidebar.style.zIndex = '';
+					sidebar.style.opacity = '';
+					sidebar.style.pointerEvents = '';
+					sidebar.style.transform = '';
+					sidebar.style.boxShadow = '';
+					sidebar.style.background = '';
+				}
+			}
+			if (bezelTop) {
+				bezelTop.style.flexWrap = isMobile ? 'wrap' : '';
+				bezelTop.style.gap = isMobile ? '8px' : '';
+				bezelTop.style.paddingBottom = isMobile ? '8px' : '';
+				bezelTop.style.marginBottom = isMobile ? '8px' : '';
+			}
+			if (brandBadge) {
+				brandBadge.style.fontSize = isMobile ? '1.08rem' : '';
+				brandBadge.style.padding = isMobile ? '2px 8px' : '';
+				brandBadge.style.letterSpacing = isMobile ? '1px' : '';
+			}
+			if (controlDeck) {
+				controlDeck.style.marginTop = isMobile ? '8px' : '';
+				controlDeck.style.padding = isMobile ? '8px' : '';
+			}
+			if (statusBar) {
+				statusBar.style.marginTop = isMobile ? '8px' : '';
+				statusBar.style.paddingTop = isMobile ? '8px' : '';
+				statusBar.style.fontSize = isMobile ? '0.8rem' : '';
+				statusBar.style.flexWrap = isMobile ? 'wrap' : '';
+				statusBar.style.gap = isMobile ? '8px' : '';
+			}
+			if (workspacePanel) {
+				workspacePanel.classList.toggle('mobile-muted', isMobile && mobileSidebarOpen);
+			}
+			sidebar.classList.toggle('mobile-open', isMobile && mobileSidebarOpen);
+			backdrop.classList.toggle('active', isMobile && mobileSidebarOpen);
+			if (sessionsBtn) {
+				sessionsBtn.classList.toggle('active', isMobile && mobileSidebarOpen);
+			}
+			if (!isMobile && mobileControlMode !== 'terminal') {
+				setMobileControlMode('terminal');
+			}
+			renderMobileControlMode();
+		}
+		function closeWorkerSidebar() {
+			mobileSidebarOpen = false;
+			syncMobileWorkbench();
+		}
+		function renderMobileControlMode() {
+			const badge = document.getElementById('control-mode-display');
+			if (!badge) return;
+			const inMenuNav = mobileControlMode === 'menu_nav';
+			badge.textContent = inMenuNav ? 'MENU NAV' : 'TERMINAL';
+			badge.classList.toggle('menu-nav', inMenuNav);
+		}
+		function setMobileControlMode(nextMode) {
+			mobileControlMode = nextMode === 'menu_nav' ? 'menu_nav' : 'terminal';
+			renderMobileControlMode();
+		}
+		function toggleMenuNavMode() {
+			if (!isMobileViewport()) return;
+			setMobileControlMode(mobileControlMode === 'menu_nav' ? 'terminal' : 'menu_nav');
+			getActiveTerminalView()?.term?.focus?.();
+		}
+		function openMenuCommand() {
+			if (!isMobileViewport()) return;
+			sendRawTerminalInput('/');
+			setMobileControlMode('menu_nav');
+		}
+		function getActiveTerminalTargetSessionId() {
+			const activeId = getTerminalManager().getActiveId() || '__system__';
+			return activeId === '__system__' ? null : activeId;
+		}
+		function sendRawTerminalInput(data) {
+			if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+			ws.send(JSON.stringify({
+				type: 'input',
+				sessionId: getActiveTerminalTargetSessionId(),
+				data,
+			}));
+			getActiveTerminalView()?.term?.focus?.();
+			return true;
+		}
+		function sendTerminalControl(action) {
+			const data = {
+				up: '\u001b[A',
+				down: '\u001b[B',
+				left: '\u001b[D',
+				right: '\u001b[C',
+				enter: '\r',
+				escape: '\u001b',
+				backspace: '\u007f',
+				ctrl_c: '\u0003',
+			}[action];
+			if (!data) return false;
+			return sendRawTerminalInput(data);
+		}
+		function installMobileSidebarGuards() {
+			const sidebar = document.getElementById('worker-sidebar');
+			if (!sidebar || sidebar.dataset.guardsInstalled === '1') {
+				return;
+			}
+			sidebar.dataset.guardsInstalled = '1';
+		}
+		function toggleWorkerSidebar() {
+			if (!isMobileViewport()) return;
+			mobileSidebarOpen = !mobileSidebarOpen;
+			syncMobileWorkbench();
+		}
+		function focusWorkerView() {
+			if (sessionId) {
+				selectedViewId = sessionId;
+				localStorage.setItem('selectedViewId', selectedViewId);
+				updateWorkspaceView();
+				renderWorkers();
+			} else {
+				selectNodeHome();
+			}
+			if (isMobileViewport()) {
+				closeWorkerSidebar();
+			}
+		}
+		function toggleNodeDetail() {
+			nodeDetailOpen = !nodeDetailOpen;
+			renderNodeDetailPanel();
+		}
+		function closeNodeDetail() {
+			nodeDetailOpen = false;
+			renderNodeDetailPanel();
+		}
+		function renderNodeDetailPanel() {
+			window.MagicShellRuntimeNodeUI.renderNodeDetailPanel({
+				nodeDetailOpen,
+				isNodeViewSelected,
+				getPanelNode() {
+					return document.getElementById('node-detail-panel');
+				},
+				getToggleNode() {
+					return document.getElementById('node-detail-toggle');
+				},
+			});
+		}
+		function updateWorkspaceView() {
+			const nodeHome = document.getElementById('node-home-view');
+			const workerView = document.getElementById('worker-view');
+			const controlDeck = document.querySelector('.control-deck');
+			const isNode = isNodeViewSelected();
+			nodeHome.classList.toggle('active', isNode);
+			workerView.classList.toggle('active', !isNode);
+			if (controlDeck) {
+				controlDeck.style.display = isNode ? 'none' : '';
+			}
+			document.getElementById('mode-display').textContent = isNode ? 'PRIMARY' : 'WORKER';
+			syncMobileWorkbench();
+			if (isNode) {
+				if (mobileControlMode !== 'terminal') {
+					setMobileControlMode('terminal');
+				}
+				renderNodeHome();
+				renderNodeDetailPanel();
+			} else {
+				nodeDetailOpen = false;
+				renderNodeDetailPanel();
+				updateCurrentWorkerBar();
+			}
+		}
+		function getRuntimeControlContext() {
+			return {
+				get workers() { return workers; },
+				set workers(value) { workers = value; },
+				get selectedViewId() { return selectedViewId; },
+				get runtimeSummary() { return runtimeSummary; },
+				set runtimeSummary(value) { runtimeSummary = value; },
+				get runtimeFocus() { return runtimeFocus; },
+				set runtimeFocus(value) { runtimeFocus = value; },
+				get primaryAgent() { return primaryAgent; },
+				set primaryAgent(value) { primaryAgent = value; },
+				get pendingNodeReply() { return pendingNodeReply; },
+				set pendingNodeReply(value) { pendingNodeReply = value; },
+				get sessionId() { return sessionId; },
+				set sessionId(value) { sessionId = value; },
+				get workerDetail() { return workerDetail; },
+				set workerDetail(value) { workerDetail = value; },
+				get workerDetailOpen() { return workerDetailOpen; },
+				get preferredSessionId() { return preferredSessionId; },
+				get pendingSpawnSessionId() { return pendingSpawnSessionId; },
+				set pendingSpawnSessionId(value) { pendingSpawnSessionId = value; },
+				get pendingSpawnAutoAttach() { return pendingSpawnAutoAttach; },
+				set pendingSpawnAutoAttach(value) { pendingSpawnAutoAttach = value; },
+				get pendingStopSessionId() { return pendingStopSessionId; },
+				set pendingStopSessionId(value) { pendingStopSessionId = value; },
+				get pendingRestartSessionId() { return pendingRestartSessionId; },
+				set pendingRestartSessionId(value) { pendingRestartSessionId = value; },
+				get dirBrowserPath() { return dirBrowserPath; },
+				set dirBrowserPath(value) { dirBrowserPath = value; },
+				get dirBrowserParentPath() { return dirBrowserParentPath; },
+				set dirBrowserParentPath(value) { dirBrowserParentPath = value; },
+				get dirBrowserRepoRoot() { return dirBrowserRepoRoot; },
+				set dirBrowserRepoRoot(value) { dirBrowserRepoRoot = value; },
+				get dirBrowserEntries() { return dirBrowserEntries; },
+				set dirBrowserEntries(value) { dirBrowserEntries = value; },
+				syncNodeTranscriptFromServer,
+				destroyTerminalView,
+				attachWorker,
+				pushNodeTranscript,
+				renderNodeHome,
+				selectNodeHome,
+				returnToPrimaryChat,
+				resetSpawnButton,
+				renderWorkers,
+				inspectCurrentWorker,
+				refreshCurrentWorkerDetail,
+				renderWorkerDetailPanel,
+				renderDirBrowser,
+				isNodeViewSelected,
+				writeSystemNotice(text) {
+					writeTerminalLine('__system__', `\r\n[ ${text} ]\r\n`);
+				},
+				clearPreferredSession() {
+					preferredSessionId = null;
+					localStorage.removeItem('preferredSessionId');
+				},
+			};
+		}
+		function renderNodeHome() {
+			window.MagicShellRuntimeNodeUI.renderNodeHome({
+				workers,
+				runtimeSummary,
+				runtimeFocus,
+				primaryAgent,
+				pendingNodeReply,
+				nodeTranscript,
+				escapeHtml,
+				formatRelativeTime,
+				isConnected() {
+					return !!ws && ws.readyState === WebSocket.OPEN;
+				},
+				getThreadNode() {
+					return document.getElementById('node-chat-thread');
+				},
+				getCoordinationNode() {
+					return document.getElementById('node-coordination-state');
+				},
+				getCoordinationTextNode() {
+					return document.getElementById('node-coordination-text');
+				},
+				getInputNode() {
+					return document.getElementById('node-compose-input');
+				},
+				setNodeNavTitle(value) {
+					document.getElementById('node-nav-title').textContent = value;
+				},
+				setNodeHomeTitle(value) {
+					document.getElementById('node-home-title').textContent = value;
+				},
+				setNodeNavMeta(value) {
+					document.getElementById('node-nav-meta').textContent = value;
+				},
+				setNodeNavBadge(value) {
+					document.getElementById('node-nav-badge').textContent = value;
+				},
+				setNodeHomeBadge(value) {
+					document.getElementById('node-home-badge').textContent = value;
+				},
+			});
+		}
+		function sendNodeMessage() {
+			const input = document.getElementById('node-compose-input');
+			const text = input.value.trim();
+			if (!text || pendingNodeReply || !ws || ws.readyState !== WebSocket.OPEN || !window.MagicShellRuntimeControl.hasUsablePrimaryAgent(primaryAgent)) return;
+			pushNodeTranscript('user', text);
+			input.value = '';
+			pendingNodeReply = true;
+			renderNodeHome();
+			const requestId = sendControl('command', 'send_primary_message', { text });
+			if (!requestId) {
+				pendingNodeReply = false;
+				pushNodeTranscript('assistant', 'Primary agent unavailable. Try reconnecting or use the runtime controls directly.');
+				renderNodeHome();
+			}
+		}
+		function runNodeAction(entryId) {
+			const entry = nodeTranscript.find((item) => item.id === entryId);
+			if (!entry) return;
+			if (entry.actionType === 'attach' && entry.actionSessionId) {
+				attachWorker(entry.actionSessionId);
+				return;
+			}
+			if (entry.actionType === 'spawn') {
+				const taskSummary = entry.actionTaskSummary || undefined;
+				spawnPieWorkerInternal({ taskSummary, autoAttach: false });
+			}
+		}
+		function getSpawnPluginLabel(pluginName) {
+			if (pluginName === 'claude-code') return 'CLAUDE';
+			if (pluginName === 'codex') return 'CODEX';
+			return 'PIE';
+		}
+		function isControlNoise(summary) {
+			if (!summary) return true;
+			const normalized = String(summary).toLowerCase();
+			return normalized.includes('detail requested')
+				|| normalized.includes('attached from browser')
+				|| normalized.includes('control snapshot')
+				|| normalized.includes('attached ')
+				|| normalized === 'attached';
+		}
+		function getWorkerPreviewLine(worker) {
+			if (worker.recommendedActionReason) return worker.recommendedActionReason;
+			if (worker.interventionReason) return worker.interventionReason;
+			if (worker.attentionReason) return worker.attentionReason;
+			if (worker.lastEventSummary && !isControlNoise(worker.lastEventSummary)) return worker.lastEventSummary;
+			return worker.cwd || '.';
+		}
+		function renderWorkers() {
+			window.MagicShellRuntimeRender.renderWorkers({
+				workers,
+				runtimeSummary,
+				runtimeFocus,
+				showClosedWorkers,
+				selectedViewId,
+				sessionId,
+				escapeHtml,
+				pathBaseName,
+				formatLastOutput,
+				formatRelativeTime,
+				formatWorkerBadge,
+				formatRecommendedAction,
+				formatFocusAction,
+				formatBytes,
+				getWorkerPreviewLine,
+				workerNeedsAttention,
+				isControlNoise,
+				renderNodeHome,
+				selectNodeHome,
+				returnToPrimaryChat,
+				renderCwdShortcuts,
+				updateWorkspaceView,
+				isNodeViewSelected,
+				getWorkerListNode() {
+					return document.getElementById('worker-list');
+				},
+				getNodeNavCard() {
+					return document.getElementById('node-nav-card');
+				},
+				getRuntimeSummaryNode() {
+					return document.getElementById('runtime-summary-grid');
+				},
+				getRuntimeFocusNode() {
+					return document.getElementById('runtime-focus-list');
+				},
+				getRuntimeFeedNode() {
+					return document.getElementById('runtime-feed-list');
+				},
+				setWorkerHeaderLabel(value) {
+					document.getElementById('worker-header-label').textContent = value;
+				},
+			});
+		}
+		function renderRuntimeSummary() {
+			window.MagicShellRuntimeRender.renderRuntimeSummary({
+				workers,
+				runtimeSummary,
+				escapeHtml,
+				formatBytes,
+				workerNeedsAttention,
+				getRuntimeSummaryNode() {
+					return document.getElementById('runtime-summary-grid');
+				},
+			});
+		}
+		function renderRuntimeFocus() {
+			window.MagicShellRuntimeRender.renderRuntimeFocus({
+				runtimeFocus,
+				escapeHtml,
+				formatFocusAction,
+				formatRelativeTime,
+				getRuntimeFocusNode() {
+					return document.getElementById('runtime-focus-list');
+				},
+			});
+		}
+		function renderRuntimeFeed() {
+			window.MagicShellRuntimeRender.renderRuntimeFeed({
+				workers,
+				escapeHtml,
+				formatRelativeTime,
+				isControlNoise,
+				getRuntimeFeedNode() {
+					return document.getElementById('runtime-feed-list');
+				},
+			});
+		}
+		function toggleClosedWorkers() {
+			showClosedWorkers = !showClosedWorkers;
+			localStorage.setItem('showClosedWorkers', showClosedWorkers ? '1' : '0');
+			renderWorkers();
+		}
+		function updateCurrentWorkerBar() {
+			window.MagicShellRuntimeWorkerUI.renderCurrentWorkerBar({
+				workers,
+				sessionId,
+				pendingStopSessionId,
+				pendingRestartSessionId,
+				pathBaseName,
+				formatWorkerBadge,
+				formatLastOutput,
+				getWorkerPreviewLine,
+				isNodeViewSelected,
+				setActiveTerminal,
+				renderWorkerDetailPanel,
+				getBarNode() {
+					return document.getElementById('current-worker-bar');
+				},
+				getTitleNode() {
+					return document.getElementById('current-worker-title');
+				},
+				getSubtitleNode() {
+					return document.getElementById('current-worker-subtitle');
+				},
+				getStopButton() {
+					return document.getElementById('current-worker-stop');
+				},
+				getRestartButton() {
+					return document.getElementById('current-worker-restart');
+				},
+				getDetailButton() {
+					return document.getElementById('current-worker-detail-btn');
+				},
+			});
+		}
+		function closeWorkerDetail() {
+			workerDetailOpen = false;
+			renderWorkerDetailPanel();
+		}
+		function renderWorkerDetailPanel() {
+			window.MagicShellRuntimeWorkerUI.renderWorkerDetailPanel({
+				workerDetailOpen,
+				workerDetail,
+				sessionId,
+				escapeHtml,
+				formatEventTime,
+				formatRelativeTime,
+				formatDuration,
+				formatBytes,
+				stripAnsi,
+				getPanelNode() {
+					return document.getElementById('worker-detail-panel');
+				},
+				getTitleNode() {
+					return document.getElementById('worker-detail-title');
+				},
+				getMetaNode() {
+					return document.getElementById('worker-detail-meta');
+				},
+				getSnapshotsNode() {
+					return document.getElementById('worker-detail-snapshots');
+				},
+				getEventsNode() {
+					return document.getElementById('worker-detail-events');
+				},
+				getOutputNode() {
+					return document.getElementById('worker-detail-output');
+				},
+			});
+		}
+		function formatEventTime(timestamp) {
+			const date = new Date(timestamp);
+			return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+		}
+		function formatLastOutput(timestamp) {
+			if (!timestamp) return 'idle';
+			const seconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
+			if (seconds < 5) return 'active now';
+			if (seconds < 60) return `${seconds}s ago`;
+			const minutes = Math.floor(seconds / 60);
+			if (minutes < 60) return `${minutes}m ago`;
+			const hours = Math.floor(minutes / 60);
+			return `${hours}h ago`;
+		}
+		function formatRelativeTime(timestamp) {
+			if (!timestamp) return 'just now';
+			const seconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
+			if (seconds < 5) return 'just now';
+			if (seconds < 60) return `${seconds}s ago`;
+			const minutes = Math.floor(seconds / 60);
+			if (minutes < 60) return `${minutes}m ago`;
+			const hours = Math.floor(minutes / 60);
+			if (hours < 24) return `${hours}h ago`;
+			const days = Math.floor(hours / 24);
+			return `${days}d ago`;
+		}
+		function formatDuration(durationMs) {
+			const totalSeconds = Math.max(0, Math.floor(durationMs / 1000));
+			if (totalSeconds < 60) return `${totalSeconds}s`;
+			const minutes = Math.floor(totalSeconds / 60);
+			if (minutes < 60) return `${minutes}m ${totalSeconds % 60}s`;
+			const hours = Math.floor(minutes / 60);
+			if (hours < 24) return `${hours}h ${minutes % 60}m`;
+			const days = Math.floor(hours / 24);
+			return `${days}d ${hours % 24}h`;
+		}
+		function formatBytes(byteCount) {
+			const value = Math.max(0, byteCount || 0);
+			if (value < 1024) return `${value} B`;
+			if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+			return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+		}
+		function stripAnsi(value) {
+			return String(value || '')
+				.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
+				.replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, '')
+				.replace(/\x1b[@-_]/g, '');
+		}
+		function formatWorkerBadge(worker) {
+			if (pendingSpawnSessionId === worker.sessionId) return 'spawning';
+			if (pendingStopSessionId === worker.sessionId) return 'stopping';
+			if (pendingRestartSessionId === worker.sessionId) return 'restarting';
+			if (worker.status === 'starting') return 'booting';
+			if (worker.status === 'blocked') return 'needs help';
+			if (worker.status === 'stopped') return 'closed';
+			if (worker.status === 'failed') return 'failed';
+			if (worker.interventionLevel === 'required') return 'intervene';
+			if (worker.interventionLevel === 'suggested') return 'check in';
+			if (worker.interventionLevel === 'watch') return 'watch';
+			if (worker.phase === 'attention') return 'needs help';
+			if (worker.phase === 'quiet') return 'quiet';
+			if (worker.activityState === 'busy') {
+				return workerNeedsAttention(worker) ? 'needs help' : 'thinking';
+			}
+			if (worker.activityState === 'ready') {
+				const outputAgeSeconds = getAgeSeconds(worker.lastOutputAt);
+				if (outputAgeSeconds !== null && outputAgeSeconds > 600) return 'quiet';
+				return 'waiting';
+			}
+			if (worker.status === 'running' && worker.lastOutputAt) {
+				const ageSeconds = getAgeSeconds(worker.lastOutputAt) ?? 0;
+				if (ageSeconds < 5) return 'live';
+				if (ageSeconds < 45) return 'active';
+				if (ageSeconds < 180) return 'idle';
+				return 'stale';
+			}
+			return 'idle';
+		}
+		function formatRecommendedAction(worker) {
+			if (!worker.recommendedAction || worker.recommendedAction === 'none') return '';
+			if (worker.recommendedAction === 'attach') return 'attach next';
+			if (worker.recommendedAction === 'observe') return 'observe';
+			if (worker.recommendedAction === 'restart') return 'restart';
+			if (worker.recommendedAction === 'close') return 'safe to close';
+			return worker.recommendedAction;
+		}
+		function formatFocusAction(item) {
+			if (!item.recommendedAction || item.recommendedAction === 'none') return 'observe';
+			if (item.recommendedAction === 'attach') return 'attach next';
+			if (item.recommendedAction === 'observe') return 'observe';
+			if (item.recommendedAction === 'restart') return 'restart';
+			if (item.recommendedAction === 'close') return 'safe to close';
+			return item.recommendedAction;
+		}
+		function getAgeSeconds(timestamp) {
+			if (!timestamp) return null;
+			return Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
+		}
+		function workerNeedsAttention(worker) {
+			if (worker.status === 'blocked' || worker.status === 'failed') return true;
+			if (worker.activityState !== 'busy') return false;
+			const activityAgeSeconds = getAgeSeconds(worker.activityUpdatedAt);
+			const outputAgeSeconds = getAgeSeconds(worker.lastOutputAt);
+			return activityAgeSeconds !== null
+				&& outputAgeSeconds !== null
+				&& activityAgeSeconds > 90
+				&& outputAgeSeconds > 45;
+		}
+		function requestWorkerList() {
+			sendControl('query', 'get_runtime_summary');
+		}
+		function startWorkerPolling() {
+			stopWorkerPolling();
+			workerPollTimer = setInterval(() => {
+				requestWorkerList();
+			}, 5000);
+		}
+		function stopWorkerPolling() {
+			if (workerPollTimer) {
+				clearInterval(workerPollTimer);
+				workerPollTimer = null;
+			}
+		}
+		function spawnPieWorker() {
+			return spawnPieWorkerInternal({ pluginName: selectedSpawnPlugin, autoAttach: !isMobileViewport() });
+		}
+		function spawnPieWorkerInternal({ taskSummary, autoAttach = true, pluginName = selectedSpawnPlugin } = {}) {
+			return spawnWorkerInternal({ pluginName, taskSummary, autoAttach });
+		}
+		function spawnWorkerInternal({ pluginName = 'pie', taskSummary, autoAttach = true } = {}) {
+			if (!ws || ws.readyState !== WebSocket.OPEN || pendingSpawnSessionId) return;
+			const nextSessionId = 'session-' + Date.now();
+			const cwdInput = document.getElementById('spawnCwd');
+			const pluginInput = document.getElementById('spawnPlugin');
+			const cwd = cwdInput.value.trim();
+			const spawnButton = document.querySelector('.worker-add-btn');
+			const normalizedPlugin = pluginName || pluginInput?.value || 'pie';
+			persistSpawnPlugin(normalizedPlugin);
+			if (pluginInput) {
+				pluginInput.value = selectedSpawnPlugin;
+			}
+			const pluginLabel = getSpawnPluginLabel(selectedSpawnPlugin);
+			defaultSpawnCwd = cwd;
+			localStorage.setItem('spawnCwd', defaultSpawnCwd);
+			if (cwd) {
+				rememberCwd(cwd);
+			}
+			pendingSpawnSessionId = nextSessionId;
+			pendingSpawnAutoAttach = autoAttach;
+			if (spawnButton) {
+				spawnButton.disabled = true;
+				spawnButton.textContent = `SPAWNING ${pluginLabel}`;
+			}
+			writeTerminalLine('__system__', `\r\n[ SPAWNING ${pluginLabel} WORKER: S:${nextSessionId.slice(-6)} ]\r\n`);
+			sendControl('command', 'spawn_worker', {
+				sessionId: nextSessionId,
+				pluginName: selectedSpawnPlugin,
+				taskSummary: taskSummary || undefined,
+				cwd: cwd || undefined
+			}, {
+				sessionId: nextSessionId
+			});
+			if (autoAttach) {
+				sessionId = nextSessionId;
+				selectedViewId = nextSessionId;
+				localStorage.setItem('selectedViewId', selectedViewId);
+				preferredSessionId = nextSessionId;
+				localStorage.setItem('preferredSessionId', nextSessionId);
+				document.getElementById('session-display').textContent = nextSessionId.slice(-8);
+				ensureTerminalView(nextSessionId);
+				setActiveTerminal(nextSessionId);
+				updateWorkspaceView();
+			}
+			renderWorkers();
+		}
+		function attachWorker(targetSessionId, sendMessage = true) {
+			sessionId = targetSessionId;
+			selectedViewId = targetSessionId;
+			localStorage.setItem('selectedViewId', selectedViewId);
+			ensureTerminalView(targetSessionId);
+			setActiveTerminal(targetSessionId);
+			preferredSessionId = targetSessionId;
+			localStorage.setItem('preferredSessionId', targetSessionId);
+			document.getElementById('session-display').textContent = targetSessionId.slice(-8);
+			updateWorkspaceView();
+			renderWorkers();
+			if (isMobileViewport()) {
+				closeWorkerSidebar();
+			}
+			if (sendMessage && ws && ws.readyState === WebSocket.OPEN) {
+				sendControl('command', 'attach_session', { sessionId: targetSessionId }, { sessionId: targetSessionId });
+			}
+			const activeView = getActiveTerminalView();
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify({
+					type: 'resize',
+					sessionId: targetSessionId,
+					cols: activeView.term.cols,
+					rows: activeView.term.rows
+				}));
+				requestWorkerList();
+			}
+			activeView.term.focus();
+		}
+		function stopCurrentWorker() {
+			if (!ws || ws.readyState !== WebSocket.OPEN || !sessionId || pendingStopSessionId === sessionId) return;
+			const targetSessionId = sessionId;
+			pendingStopSessionId = targetSessionId;
+			updateCurrentWorkerBar();
+			sendControl('command', 'stop_worker', { sessionId: targetSessionId }, { sessionId: targetSessionId });
+			if (isMobileViewport()) {
+				returnToPrimaryChat({ clearSession: true });
+			}
+		}
+		function restartCurrentWorker() {
+			if (!ws || ws.readyState !== WebSocket.OPEN || !sessionId) return;
+			pendingRestartSessionId = sessionId;
+			updateCurrentWorkerBar();
+			sendControl('command', 'restart_worker', { sessionId }, { sessionId });
+		}
+		function inspectCurrentWorker() {
+			if (!ws || ws.readyState !== WebSocket.OPEN || !sessionId) return;
+			if (workerDetailOpen && workerDetail && workerDetail.worker?.sessionId === sessionId) {
+				closeWorkerDetail();
+				return;
+			}
+			workerDetailOpen = true;
+			sendControl('query', 'get_worker_detail', { sessionId }, { sessionId });
+		}
+		function refreshCurrentWorkerDetail() {
+			if (!ws || ws.readyState !== WebSocket.OPEN || !sessionId || !workerDetailOpen) return;
+			sendControl('query', 'get_worker_detail', { sessionId }, { sessionId });
+		}
+		function resetSpawnButton() {
+			const spawnButton = document.querySelector('.worker-add-btn');
+			if (spawnButton) {
+				spawnButton.disabled = false;
+				spawnButton.textContent = '+';
+			}
+		}
+		function requestDirBrowse(path) {
+			sendControl('query', 'browse_directories', { path: path || undefined }, path ? { path } : {});
+		}
+		function renderDirBrowser() {
+			const browser = document.getElementById('dir-browser');
+			const pathNode = document.getElementById('dir-browser-path');
+			const listNode = document.getElementById('dir-browser-list');
+			const useButton = document.getElementById('useCwdBtn');
+			if (!browser.classList.contains('active')) return;
+			renderDirBreadcrumbs(pathNode, dirBrowserPath);
+			if (useButton) {
+				useButton.disabled = !dirBrowserPath;
+			}
+			if (!dirBrowserEntries.length) {
+				listNode.innerHTML = '<div class="worker-dir-empty">No subdirectories here.</div>';
+				return;
+			}
+			listNode.innerHTML = dirBrowserEntries.map((entry) => `
+				<div class="worker-dir-item" onclick="browseDir(decodeURIComponent('${encodeURIComponent(entry.path)}'))">${escapeHtml(entry.name)}</div>
+			`).join('');
+		}
+		function renderDirBreadcrumbs(node, targetPath) {
+			if (!targetPath) {
+				node.textContent = 'Loading...';
+				return;
+			}
+			const parts = targetPath.split('/').filter(Boolean);
+			const crumbs = [];
+			let current = targetPath.startsWith('/') ? '/' : '';
+			if (targetPath.startsWith('/')) {
+				crumbs.push({ label: '/', path: '/' });
+			}
+			for (const part of parts) {
+				current = current === '/' ? `/${part}` : `${current}/${part}`;
+				crumbs.push({ label: part, path: current });
+			}
+			node.innerHTML = crumbs.map((crumb, index) => `
+				<span class="worker-dir-crumb" onclick="browseDir(decodeURIComponent('${encodeURIComponent(crumb.path)}'))">${escapeHtml(crumb.label)}</span>${index < crumbs.length - 1 ? '<span class="worker-dir-sep">/</span>' : ''}
+			`).join('');
+		}
+		function toggleDirBrowser() {
+			const browser = document.getElementById('dir-browser');
+			const useButton = document.getElementById('useCwdBtn');
+			const willOpen = !browser.classList.contains('active');
+			browser.classList.toggle('active', willOpen);
+			if (useButton) {
+				useButton.disabled = !willOpen || !dirBrowserPath;
+			}
+			if (willOpen) {
+				requestDirBrowse(document.getElementById('spawnCwd').value.trim() || undefined);
+			}
+		}
+		function browseDir(targetPath) {
+			requestDirBrowse(targetPath);
+		}
+		function useBrowsedDir() {
+			if (!dirBrowserPath) return;
+			const input = document.getElementById('spawnCwd');
+			const browser = document.getElementById('dir-browser');
+			const useButton = document.getElementById('useCwdBtn');
+			input.value = dirBrowserPath;
+			defaultSpawnCwd = dirBrowserPath;
+			localStorage.setItem('spawnCwd', defaultSpawnCwd);
+			rememberCwd(dirBrowserPath);
+			if (browser) {
+				browser.classList.remove('active');
+			}
+			if (useButton) {
+				useButton.disabled = true;
+			}
+		}
+		function connect() {
+			const relayUrl = document.getElementById('relayUrl').value;
+			const nodeId = document.getElementById('nodeId').value;
+			const password = document.getElementById('password').value;
+			// Save credentials
+			localStorage.setItem('relayUrl', relayUrl);
+			localStorage.setItem('nodeId', nodeId);
+			localStorage.setItem('password', password);
+			updateStatus('CONNECTING...', '#ff0');
+			destroyTerminalViews();
+			ensureTerminalView('__system__');
+			setActiveTerminal('__system__');
+			if (!transport) {
+				transport = window.MagicShellTransport.createWorkbenchTransport({
+					onSocketChange(nextSocket) {
+						ws = nextSocket;
+					},
+					onOpen() {
+						updateStatus('ONLINE', '#0f0');
+						setDisconnectedState(false);
+						setMobileControlMode('terminal');
+						sessionId = null;
+						document.getElementById('connectBtn').disabled = true;
+						document.getElementById('connection-overlay').classList.add('hidden');
+						document.getElementById('terminal').classList.add('active');
+						document.getElementById('worker-sidebar').classList.add('active');
+						fitAllTerminalViews();
+						setTimeout(() => fitAllTerminalViews(), 50);
+						startWorkerPolling();
+						syncWorkerPluginPreference();
+						syncMobileWorkbench();
+					},
+					onMessage(msg) {
+						window.MagicShellRuntimeMessages.handleWorkbenchMessage(msg, {
+							get sessionId() { return sessionId; },
+							set sessionId(value) { sessionId = value; },
+							get activeTerminalId() { return activeTerminalId; },
+							get pendingNodeReply() { return pendingNodeReply; },
+							set pendingNodeReply(value) { pendingNodeReply = value; },
+							get workerDetail() { return workerDetail; },
+							set workerDetail(value) { workerDetail = value; },
+							get dirBrowserPath() { return dirBrowserPath; },
+							set dirBrowserPath(value) { dirBrowserPath = value; },
+							get dirBrowserParentPath() { return dirBrowserParentPath; },
+							set dirBrowserParentPath(value) { dirBrowserParentPath = value; },
+							get dirBrowserRepoRoot() { return dirBrowserRepoRoot; },
+							set dirBrowserRepoRoot(value) { dirBrowserRepoRoot = value; },
+							get dirBrowserEntries() { return dirBrowserEntries; },
+							set dirBrowserEntries(value) { dirBrowserEntries = value; },
+							ensureTerminalView,
+							writeTerminal,
+							writeTerminalLine,
+							renderDirBrowser,
+							requestWorkerList,
+							renderWorkerDetailPanel,
+							pushNodeTranscript,
+							renderWorkers,
+							syncWorkerPluginPreference,
+							setSessionDisplay(value) {
+								document.getElementById('session-display').textContent = value;
+							},
+							getRuntimeControlContext,
+						});
+					},
+					onClose() {
+						sessionId = null;
+						workerDetail = null;
+						preferredSessionId = localStorage.getItem('preferredSessionId');
+						setMobileControlMode('terminal');
+						pendingNodeReply = false;
+						pendingSpawnSessionId = null;
+						pendingStopSessionId = null;
+						pendingRestartSessionId = null;
+						resetSpawnButton();
+						updateStatus('STANDBY', '#eaeaea');
+						setDisconnectedState(true);
+						writeTerminalLine('__system__', '\r\n[ CONNECTION CLOSED ]\r\n');
+						renderNodeHome();
+						stopWorkerPolling();
+						document.getElementById('connectBtn').disabled = false;
+						document.getElementById('connection-overlay').classList.remove('hidden');
+						document.getElementById('terminal').classList.remove('active');
+						document.getElementById('worker-sidebar').classList.remove('active');
+						mobileSidebarOpen = false;
+						workers = [];
+						renderWorkers();
+						document.getElementById('current-worker-bar').classList.remove('active');
+						syncMobileWorkbench();
+					},
+					onError() {
+						updateStatus('ERROR', '#f00');
+						writeTerminalLine(activeTerminalId || '__system__', '\r\n[ CONNECTION ERROR ]\r\n');
+					},
+				});
+			}
+			try {
+				transport.connect({ relayUrl, nodeId, password });
+			} catch (error) {
+				alert(error instanceof Error ? error.message : String(error));
+				updateStatus('STANDBY', '#eaeaea');
+			}
+		}
+		function disconnect() {
+			if (transport) {
+				transport.disconnect();
+			}
+			setMobileControlMode('terminal');
+			updateStatus('STANDBY', '#eaeaea');
+			setDisconnectedState(true);
+			writeTerminalLine('__system__', '\r\n[ DISCONNECTED ]\r\n');
+		}
+		function sendCommand(cmd) {
+			const activeView = getActiveTerminalView();
+			if (cmd === 'clear') {
+				activeView.term.clear();
+			}
+		}
+		function zoomIn() {
+			terminalFontSize += 2;
+			getTerminalManager().updateFontSize(terminalFontSize);
+		}
+		function zoomOut() {
+			terminalFontSize = Math.max(10, terminalFontSize - 2);
+			getTerminalManager().updateFontSize(terminalFontSize);
+		}
+		function fitTerminal() {
+			fitAllTerminalViews();
+		}
+		function resetTerminal() {
+			const activeView = getActiveTerminalView();
+			activeView.term.reset();
+			writeTerminalLine(getTerminalManager().getActiveId() || '__system__', '[ TERMINAL RESET ]\r\n');
+		}
+		function installMobileTerminalGestures() {
+			const terminal = document.getElementById('terminal');
+			if (!terminal || terminal.dataset.mobileGesturesInstalled === '1') {
+				return;
+			}
+			terminal.dataset.mobileGesturesInstalled = '1';
+			const minDistance = 30;
+			terminal.addEventListener('touchstart', (event) => {
+				if (!isMobileViewport() || mobileControlMode !== 'menu_nav' || event.touches.length !== 1) {
+					mobileGestureState = null;
+					return;
+				}
+				const touch = event.touches[0];
+				mobileGestureState = {
+					startX: touch.clientX,
+					startY: touch.clientY,
+					handled: false,
+				};
+			}, { passive: true });
+			terminal.addEventListener('touchmove', (event) => {
+				if (!isMobileViewport() || mobileControlMode !== 'menu_nav' || !mobileGestureState || mobileGestureState.handled || event.touches.length !== 1) {
+					return;
+				}
+				const touch = event.touches[0];
+				const dx = touch.clientX - mobileGestureState.startX;
+				const dy = touch.clientY - mobileGestureState.startY;
+				if (Math.abs(dy) < minDistance || Math.abs(dy) <= Math.abs(dx)) {
+					return;
+				}
+				mobileGestureState.handled = true;
+				event.preventDefault();
+				sendTerminalControl(dy < 0 ? 'up' : 'down');
+			}, { passive: false });
+			terminal.addEventListener('touchend', () => {
+				mobileGestureState = null;
+			}, { passive: true });
+			terminal.addEventListener('touchcancel', () => {
+				mobileGestureState = null;
+			}, { passive: true });
+		}
+		document.getElementById('spawnCwd').addEventListener('keydown', (event) => {
+			if (event.key === 'Enter') {
+				event.preventDefault();
+				spawnPieWorker();
+			}
+		});
+		window.addEventListener('resize', () => {
+			fitAllTerminalViews();
+			syncMobileWorkbench();
+		});
+		if (document.fonts && document.fonts.ready) {
+			document.fonts.ready.then(() => {
+				fitAllTerminalViews();
+			}).catch(() => {});
+		}
+		syncMobileWorkbench();
+		installMobileSidebarGuards();
+		installMobileTerminalGestures();
+		renderMobileControlMode();
+		if (autoConnectParam === '1' || autoConnectParam === 'true') {
+			requestAnimationFrame(() => {
+				const relayUrl = document.getElementById('relayUrl').value.trim();
+				const nodeId = document.getElementById('nodeId').value.trim();
+				const password = document.getElementById('password').value.trim();
+				if (relayUrl && nodeId && password) {
+					connect();
+				}
+			});
+		}
+		// Initial message in overlay
+		console.log('[Magic Shell] Ready to connect');
+	</script>
+</body>
+</html>