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

package/dist/workbench/runtime-terminal.js

@@ -0,0 +1,250 @@
+(function (global) {
+	function createTerminalManager(options) {
+		const terminalViews = new Map();
+		let activeTerminalId = null;
+
+		function getViewport(view) {
+			return view?.pane?.querySelector?.(".xterm-viewport") || null;
+		}
+
+		function syncScrollLock(view) {
+			const viewport = getViewport(view);
+			if (!viewport) {
+				view.scrollLockActive = false;
+				view.lockedScrollTop = 0;
+				return;
+			}
+			const distanceFromBottom = Math.max(0, viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight);
+			if (distanceFromBottom <= 8) {
+				view.scrollLockActive = false;
+				view.lockedScrollTop = 0;
+				return;
+			}
+			view.scrollLockActive = true;
+			view.lockedScrollTop = viewport.scrollTop;
+		}
+
+		function captureScrollState(view) {
+			const viewport = getViewport(view);
+			if (!viewport) {
+				return { atBottom: true, viewportY: 0, lockActive: false };
+			}
+			if (view?.scrollLockActive) {
+				return {
+					atBottom: false,
+					viewportY: view.lockedScrollTop ?? viewport.scrollTop,
+					lockActive: true,
+				};
+			}
+			const distanceFromBottom = Math.max(0, viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight);
+			return {
+				atBottom: distanceFromBottom <= 8,
+				viewportY: viewport.scrollTop,
+				lockActive: false,
+			};
+		}
+
+		function restoreScrollState(view, state) {
+			if (!view || typeof view.term?.scrollToLine !== "function") {
+				return;
+			}
+			if (!state || state.atBottom) {
+				if (typeof view.term?.scrollToBottom === "function") {
+					view.term.scrollToBottom();
+				}
+				return;
+			}
+			const viewport = getViewport(view);
+			if (!viewport) {
+				return;
+			}
+			const maxScrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+			if (state?.lockActive || view.scrollLockActive) {
+				const target = state?.viewportY ?? view.lockedScrollTop ?? viewport.scrollTop;
+				viewport.scrollTop = Math.max(0, Math.min(target, maxScrollTop));
+				view.scrollLockActive = true;
+				view.lockedScrollTop = viewport.scrollTop;
+				return;
+			}
+			viewport.scrollTop = Math.max(0, Math.min(state.viewportY ?? 0, maxScrollTop));
+		}
+
+		function createTerminalView(id) {
+			const pane = document.createElement("div");
+			pane.className = "terminal-pane";
+			pane.dataset.sessionId = id;
+			options.container.appendChild(pane);
+
+			const term = new Terminal({
+				fontFamily: '"JetBrains Mono", monospace',
+				fontSize: options.getFontSize(),
+				fontWeight: "500",
+				lineHeight: 1.16,
+				letterSpacing: 0,
+				theme: options.theme,
+				cursorBlink: true,
+				scrollback: 10000,
+			});
+			const fitAddon = new FitAddon.FitAddon();
+			term.loadAddon(fitAddon);
+			term.open(pane);
+			fitAddon.fit();
+
+			term.attachCustomKeyEventHandler((event) => {
+				if (event.type !== "keydown") return true;
+				if (event.key === "Enter" && event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+					if (id === activeTerminalId && options.isConnected()) {
+						options.sendInput(id === "__system__" ? null : id, "\n");
+					}
+					event.preventDefault();
+					return false;
+				}
+				return true;
+			});
+
+			term.onData((data) => {
+				if (id !== activeTerminalId || !options.isConnected()) return;
+				options.sendInput(id === "__system__" ? null : id, data);
+			});
+
+			term.onResize(({ cols, rows }) => {
+				if (id !== activeTerminalId) return;
+				options.setTerminalSizeText(`${cols}×${rows}`);
+				if (options.isConnected() && id !== "__system__") {
+					options.sendResize(id, cols, rows);
+				}
+			});
+
+			const view = {
+				id,
+				pane,
+				term,
+				fitAddon,
+				scrollLockActive: false,
+				lockedScrollTop: 0,
+			};
+			terminalViews.set(id, view);
+			requestAnimationFrame(() => {
+				const viewport = getViewport(view);
+				if (!viewport) return;
+				viewport.addEventListener("scroll", () => {
+					syncScrollLock(view);
+				}, { passive: true });
+			});
+			return view;
+		}
+
+		function ensureView(id = "__system__") {
+			return terminalViews.get(id) || createTerminalView(id);
+		}
+
+		function getActiveView() {
+			return ensureView(activeTerminalId || "__system__");
+		}
+
+		function fitView(view) {
+			if (!view) return;
+			const scrollState = captureScrollState(view);
+			const attemptFit = (remaining) => {
+				requestAnimationFrame(() => {
+					if (!view.pane.isConnected) return;
+					const paneWidth = view.pane.clientWidth;
+					const paneHeight = view.pane.clientHeight;
+					if (paneWidth > 0 && paneHeight > 0) {
+						view.fitAddon.fit();
+						restoreScrollState(view, scrollState);
+						options.setTerminalSizeText(`${view.term.cols}×${view.term.rows}`);
+					}
+					if (remaining > 0) {
+						setTimeout(() => attemptFit(remaining - 1), 80);
+					}
+				});
+			};
+			attemptFit(3);
+		}
+
+		function writeToView(id, data, { newline = false } = {}) {
+			const view = ensureView(id || "__system__");
+			const term = view.term;
+			const writer = newline ? "writeln" : "write";
+			const scrollState = captureScrollState(view);
+			term[writer](data, () => {
+				restoreScrollState(view, scrollState);
+			});
+			return view;
+		}
+
+		function setActive(id) {
+			activeTerminalId = id;
+			for (const [viewId, view] of terminalViews) {
+				view.pane.classList.toggle("active", viewId === id);
+			}
+			const view = ensureView(id);
+			view.pane.classList.add("active");
+			syncScrollLock(view);
+			fitView(view);
+			options.setTerminalSizeText(`${view.term.cols}×${view.term.rows}`);
+			view.term.focus();
+			options.onActiveChange?.(activeTerminalId);
+		}
+
+		function fitAll() {
+			for (const view of terminalViews.values()) {
+				fitView(view);
+			}
+		}
+
+		function destroyAll() {
+			for (const view of terminalViews.values()) {
+				view.term.dispose();
+				view.pane.remove();
+			}
+			terminalViews.clear();
+			activeTerminalId = null;
+			options.onActiveChange?.(activeTerminalId);
+		}
+
+		function destroyView(id) {
+			if (!id || id === "__system__") return;
+			const view = terminalViews.get(id);
+			if (!view) return;
+			view.term.dispose();
+			view.pane.remove();
+			terminalViews.delete(id);
+			if (activeTerminalId === id) {
+				activeTerminalId = null;
+				options.onActiveChange?.(activeTerminalId);
+			}
+		}
+
+		function updateFontSize(fontSize) {
+			for (const view of terminalViews.values()) {
+				view.term.options.fontSize = fontSize;
+			}
+			fitAll();
+		}
+
+		return {
+			createTerminalView,
+			ensureView,
+			getActiveView,
+			setActive,
+			fitView,
+			fitAll,
+			destroyAll,
+			destroyView,
+			updateFontSize,
+			writeToView,
+			writelnToView(id, data) {
+				return writeToView(id, data, { newline: true });
+			},
+			getActiveId() {
+				return activeTerminalId;
+			},
+		};
+	}
+
+	global.MagicShellRuntimeTerminal = {
+		createTerminalManager,
+	};
+})(window);

package/dist/workbench/runtime-transport.js

@@ -0,0 +1,105 @@
+(function (global) {
+	function createWorkbenchTransport(options) {
+		let ws = null;
+		let requestCounter = 0;
+
+		function isOpen() {
+			return !!ws && ws.readyState === WebSocket.OPEN;
+		}
+
+		function getSocket() {
+			return ws;
+		}
+
+		function sendRaw(message) {
+			if (!isOpen()) return false;
+			ws.send(JSON.stringify(message));
+			return true;
+		}
+
+		function sendControl(controlKind, controlName, payload = {}, target = {}) {
+			if (!isOpen()) return null;
+			const requestId = `web-${Date.now()}-${requestCounter++}`;
+			ws.send(JSON.stringify({
+				type: "control",
+				controlKind,
+				controlName,
+				requestId,
+				target,
+				payload,
+			}));
+			return requestId;
+		}
+
+		function connect({ relayUrl, nodeId, password }) {
+			if (!relayUrl || !nodeId || !password) {
+				throw new Error("Please fill in all fields");
+			}
+
+			if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
+				console.log("Already connected, ignoring");
+				return false;
+			}
+
+			ws = new WebSocket(relayUrl);
+			options.onSocketChange?.(ws);
+
+			ws.onopen = () => {
+				console.log("WebSocket connected");
+				options.onOpen?.({ relayUrl, nodeId, password });
+				ws.send(JSON.stringify({
+					type: "auth",
+					clientType: "browser",
+					nodeId,
+					password,
+				}));
+			};
+
+			ws.onmessage = (event) => {
+				try {
+					const message = JSON.parse(event.data);
+					console.log("Received:", message);
+					options.onMessage?.(message);
+				} catch (err) {
+					console.error("Failed to parse message:", err);
+				}
+			};
+
+			ws.onclose = () => {
+				console.log("WebSocket closed");
+				ws = null;
+				options.onSocketChange?.(null);
+				options.onClose?.();
+			};
+
+			ws.onerror = (err) => {
+				console.error("WebSocket error:", err);
+				options.onError?.(err);
+			};
+
+			return true;
+		}
+
+		function disconnect() {
+			if (ws) {
+				const closingSocket = ws;
+				ws = null;
+				options.onSocketChange?.(null);
+				closingSocket.close();
+			}
+		}
+
+		return {
+			connect,
+			disconnect,
+			sendControl,
+			sendRaw,
+			isOpen,
+			getSocket,
+		};
+	}
+
+	global.MagicShellTransport = {
+		createWorkbenchTransport,
+	};
+})(window);

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

@@ -0,0 +1,94 @@
+(function (global) {
+	function renderCurrentWorkerBar(ctx) {
+		const bar = ctx.getBarNode();
+		const title = ctx.getTitleNode();
+		const subtitle = ctx.getSubtitleNode();
+		const stopButton = ctx.getStopButton();
+		const restartButton = ctx.getRestartButton();
+		const detailButton = ctx.getDetailButton();
+		const currentWorker = ctx.workers.find((worker) => worker.sessionId === ctx.sessionId);
+
+		if (!currentWorker) {
+			bar.classList.remove("active");
+			title.textContent = "No worker attached";
+			subtitle.textContent = "Attach a worker to start";
+			stopButton.disabled = true;
+			restartButton.disabled = true;
+			detailButton.disabled = true;
+			ctx.renderWorkerDetailPanel();
+			if (!ctx.isNodeViewSelected()) {
+				ctx.setActiveTerminal("__system__");
+			}
+			return;
+		}
+
+		bar.classList.add("active");
+		title.textContent = currentWorker.displayName || `S:${currentWorker.sessionId.slice(-6)}`;
+		const agentSession = currentWorker.agentSessionId ? `PIE:${currentWorker.agentSessionId.slice(-6)} · ` : "";
+		const previewLine = ctx.getWorkerPreviewLine(currentWorker);
+		subtitle.textContent = `${currentWorker.agentType} · ${ctx.pathBaseName(currentWorker.cwd || ".")} · ${agentSession}${currentWorker.status} · ${ctx.formatWorkerBadge(currentWorker)} · ${ctx.formatLastOutput(currentWorker.lastOutputAt)}${previewLine ? ` · ${previewLine}` : ""}`;
+		stopButton.disabled = ctx.pendingStopSessionId === currentWorker.sessionId
+			|| currentWorker.status === "stopping"
+			|| currentWorker.status === "stopped"
+			|| currentWorker.status === "failed";
+		restartButton.disabled = ctx.pendingRestartSessionId === currentWorker.sessionId
+			|| currentWorker.status === "starting"
+			|| currentWorker.status === "stopping";
+		detailButton.disabled = false;
+		ctx.renderWorkerDetailPanel();
+	}
+
+	function renderWorkerDetailPanel(ctx) {
+		const panel = ctx.getPanelNode();
+		const title = ctx.getTitleNode();
+		const meta = ctx.getMetaNode();
+		const snapshots = ctx.getSnapshotsNode();
+		const events = ctx.getEventsNode();
+		const output = ctx.getOutputNode();
+		if (!ctx.workerDetailOpen || !ctx.workerDetail || !ctx.sessionId || ctx.workerDetail.worker.sessionId !== ctx.sessionId) {
+			panel.classList.remove("active");
+			meta.textContent = "";
+			snapshots.innerHTML = "";
+			events.innerHTML = "";
+			output.textContent = "";
+			return;
+		}
+
+		panel.classList.add("active");
+		title.textContent = `DETAILS · ${(ctx.workerDetail.worker.displayName || `S:${ctx.workerDetail.worker.sessionId.slice(-6)}`)}`;
+		meta.textContent = [
+			`plugin: ${ctx.workerDetail.pluginName}`,
+			`cwd: ${ctx.workerDetail.worker.cwd}`,
+			`session: ${ctx.workerDetail.worker.sessionId}`,
+			ctx.workerDetail.worker.agentSessionId ? `pie session: ${ctx.workerDetail.worker.agentSessionId}` : null,
+			`status: ${ctx.workerDetail.worker.status}${ctx.workerDetail.worker.coordinationState ? ` · ${ctx.workerDetail.worker.coordinationState}` : ""}${ctx.workerDetail.worker.phase ? ` · ${ctx.workerDetail.worker.phase}` : ""}${ctx.workerDetail.worker.activityState ? ` · ${ctx.workerDetail.worker.activityState}` : ""}`,
+			ctx.workerDetail.worker.coordinationTaskSummary ? `delegated task: ${ctx.workerDetail.worker.coordinationTaskSummary}` : null,
+			ctx.workerDetail.worker.attentionReason ? `attention: ${ctx.workerDetail.worker.attentionReason}` : null,
+			ctx.workerDetail.worker.interventionLevel && ctx.workerDetail.worker.interventionLevel !== "none" ? `intervention: ${ctx.workerDetail.worker.interventionLevel}${ctx.workerDetail.worker.interventionReason ? ` · ${ctx.workerDetail.worker.interventionReason}` : ""}` : null,
+			ctx.workerDetail.worker.interventionSince ? `intervention since: ${ctx.formatRelativeTime(ctx.workerDetail.worker.interventionSince)}` : null,
+			ctx.workerDetail.worker.recommendedAction && ctx.workerDetail.worker.recommendedAction !== "none" ? `recommended: ${ctx.workerDetail.worker.recommendedAction}${ctx.workerDetail.worker.recommendedActionReason ? ` · ${ctx.workerDetail.worker.recommendedActionReason}` : ""}` : null,
+			`created: ${ctx.formatRelativeTime(ctx.workerDetail.worker.createdAt)}`,
+			ctx.workerDetail.worker.startedAt ? `active for: ${ctx.formatDuration(Date.now() - ctx.workerDetail.worker.startedAt)}` : null,
+			ctx.workerDetail.worker.totalRunMs ? `total run: ${ctx.formatDuration(ctx.workerDetail.worker.totalRunMs)}` : null,
+			ctx.workerDetail.worker.lastAttachedAt ? `last attach: ${ctx.formatRelativeTime(ctx.workerDetail.worker.lastAttachedAt)}` : null,
+			ctx.workerDetail.worker.stoppedAt ? `last stop: ${ctx.formatRelativeTime(ctx.workerDetail.worker.stoppedAt)}` : null,
+			ctx.workerDetail.worker.lastEventSummary ? `last event: ${ctx.workerDetail.worker.lastEventSummary} · ${ctx.formatRelativeTime(ctx.workerDetail.worker.lastEventAt)}` : null,
+			`attaches: ${ctx.workerDetail.worker.attachCount || 0} · restarts: ${ctx.workerDetail.worker.restartCount || 0} · inspects: ${ctx.workerDetail.worker.inspectCount || 0}`,
+			`output: ${ctx.workerDetail.worker.outputEventCount || 0} events · ${ctx.formatBytes(ctx.workerDetail.worker.outputCharCount || 0)}`,
+		].filter(Boolean).join("\n");
+		snapshots.innerHTML = (ctx.workerDetail.snapshots || []).slice().reverse().map((snapshot) => `
+			<div class="worker-detail-snapshot">${ctx.escapeHtml(ctx.formatEventTime(snapshot.timestamp))} · ${ctx.escapeHtml(snapshot.summary)}</div>
+		`).join("");
+		events.innerHTML = (ctx.workerDetail.recentEvents || []).slice().reverse().map((event) => `
+			<div class="worker-detail-event">${ctx.escapeHtml(ctx.formatEventTime(event.timestamp))}${event.level ? ` · ${ctx.escapeHtml(event.level)}` : ""} · ${ctx.escapeHtml(event.message)}</div>
+		`).join("");
+		output.textContent = ctx.workerDetail.lastBufferedOutput
+			? `RECENT OUTPUT\n${ctx.stripAnsi(ctx.workerDetail.lastBufferedOutput).trimEnd().slice(-1200)}`
+			: "RECENT OUTPUT\nNo buffered output yet.";
+	}
+
+	global.MagicShellRuntimeWorkerUI = {
+		renderCurrentWorkerBar,
+		renderWorkerDetailPanel,
+	};
+})(window);