swarmy 0.1.0

package/manager/src/client/components/TerminalPanel.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useCallback, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import "@xterm/xterm/css/xterm.css";
+import { Plus, X, Maximize2, Minimize2 } from "lucide-react";
+import type { SwarmState } from "../hooks/useSwarmState";
+import { ConfirmDialog } from "./ui/ConfirmDialog";
+
+interface Props {
+  state: SwarmState;
+  selectedContainerId: string | null;
+  selectedSessionId: string | null;
+  onSelectSession: (id: string | null) => void;
+  fullscreen: boolean;
+  onToggleFullscreen: () => void;
+}
+
+export function TerminalPanel({ state, selectedContainerId, selectedSessionId, onSelectSession, fullscreen, onToggleFullscreen }: Props) {
+  const termRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<Terminal | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const [confirmKill, setConfirmKill] = useState<string | null>(null);
+
+  const session = state.sessions.find((s) => s.id === selectedSessionId);
+  const containerSessions = state.sessions.filter((s) => s.container_id === selectedContainerId);
+  const killTarget = containerSessions.find((s) => s.id === confirmKill);
+
+  useEffect(() => {
+    if (!termRef.current || !selectedSessionId) return;
+
+    const term = new Terminal({
+      theme: { background: "#09090b", foreground: "#e4e4e7", cursor: "#3b82f6" },
+      fontSize: 13, fontFamily: "monospace", cursorBlink: true,
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.loadAddon(new WebLinksAddon());
+    term.open(termRef.current);
+    fit.fit();
+    xtermRef.current = term;
+
+    const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(`${protocol}//${location.host}/ws/session/${selectedSessionId}?token=${state.token}`);
+    wsRef.current = ws;
+
+    ws.onmessage = (e) => term.write(e.data);
+    term.onData((data) => {
+      if (ws.readyState === WebSocket.OPEN) ws.send(data);
+    });
+
+    const observer = new ResizeObserver(() => fit.fit());
+    observer.observe(termRef.current);
+
+    return () => { observer.disconnect(); ws.close(); term.dispose(); };
+  }, [selectedSessionId, state.token]);
+
+  const handleNew = useCallback(async () => {
+    if (!selectedContainerId) return;
+    const data = await state.createSession(selectedContainerId);
+    if (data?.id) onSelectSession(data.id);
+  }, [selectedContainerId, state, onSelectSession]);
+
+  const handleKillConfirmed = useCallback(() => {
+    if (!confirmKill) return;
+    state.deleteSession(confirmKill);
+    if (selectedSessionId === confirmKill) {
+      const rest = containerSessions.filter((x) => x.id !== confirmKill);
+      onSelectSession(rest.length > 0 ? rest[0].id : null);
+    }
+    setConfirmKill(null);
+  }, [confirmKill, state, selectedSessionId, containerSessions, onSelectSession]);
+
+  return (
+    <div className="h-full flex flex-col bg-zinc-950">
+      <div className="h-8 bg-zinc-900 border-b border-zinc-800 flex items-center overflow-x-auto flex-shrink-0">
+        {containerSessions.map((s) => (
+          <div key={s.id}
+            className={`flex items-center gap-1 px-3 h-full text-xs cursor-pointer border-r border-zinc-800 ${
+              s.id === selectedSessionId ? "bg-zinc-950 text-zinc-100 border-b-2 border-b-blue-500" : "text-zinc-500 hover:text-zinc-300"
+            }`}
+            onClick={() => onSelectSession(s.id)}>
+            <span className="truncate max-w-24">{s.command}</span>
+            {s.status === "exited" && <span className="text-zinc-600 text-[10px]">exited</span>}
+            <button className="cursor-pointer p-0.5 hover:bg-zinc-800 rounded ml-1"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (s.status === "running") {
+                  setConfirmKill(s.id);
+                } else {
+                  state.deleteSession(s.id);
+                  if (selectedSessionId === s.id) {
+                    const rest = containerSessions.filter((x) => x.id !== s.id);
+                    onSelectSession(rest.length > 0 ? rest[0].id : null);
+                  }
+                }
+              }}>
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ))}
+        <button className="cursor-pointer px-2 h-full text-zinc-500 hover:text-zinc-300" onClick={handleNew} title="New session">
+          <Plus className="w-3 h-3" />
+        </button>
+        <div className="ml-auto flex items-center gap-1 px-2">
+          {session && (
+            <button className={`cursor-pointer text-xs px-2 py-0.5 rounded ${session.interactive ? "bg-green-900/30 text-green-400" : "bg-zinc-800 text-zinc-500"}`}
+              onClick={() => state.toggleInteractive(session.id, !session.interactive)}>
+              {session.interactive ? "Interactive" : "Observe"}
+            </button>
+          )}
+          <button onClick={onToggleFullscreen} className="cursor-pointer p-0.5 hover:bg-zinc-800 rounded text-zinc-400">
+            {fullscreen ? <Minimize2 className="w-3 h-3" /> : <Maximize2 className="w-3 h-3" />}
+          </button>
+        </div>
+      </div>
+      <div ref={termRef} className="flex-1 overflow-hidden" />
+
+      {confirmKill && (
+        <ConfirmDialog
+          open
+          onOpenChange={(open) => { if (!open) setConfirmKill(null); }}
+          title="Kill session?"
+          description={`This will terminate the running "${killTarget?.command ?? "session"}" process. This action cannot be undone.`}
+          confirmLabel="Kill"
+          variant="danger"
+          onConfirm={handleKillConfirmed}
+        />
+      )}
+    </div>
+  );
+}

package/manager/src/client/components/TopBar.tsx

@@ -0,0 +1,24 @@
+import { PanelLeft } from "lucide-react";
+import { Breadcrumbs } from "./Breadcrumbs";
+import type { Route } from "../hooks/useHashRouter";
+import type { SwarmState } from "../hooks/useSwarmState";
+
+interface TopBarProps {
+  sidebarOpen: boolean;
+  onToggleSidebar: () => void;
+  route: Route;
+  state: SwarmState;
+  navigate: (hash: string) => void;
+}
+
+export function TopBar({ sidebarOpen, onToggleSidebar, route, state, navigate }: TopBarProps) {
+  return (
+    <div className="h-10 bg-zinc-900 border-b border-zinc-800 flex items-center px-3 gap-3 flex-shrink-0 relative z-50">
+      <button onClick={onToggleSidebar} className="cursor-pointer p-1 hover:bg-zinc-800 rounded text-zinc-400 hover:text-zinc-100" title={sidebarOpen ? "Hide sidebar" : "Show sidebar"}>
+        <PanelLeft className="w-4 h-4" />
+      </button>
+      <span className="text-sm font-semibold text-zinc-300 flex-shrink-0">Swarm Manager</span>
+      <Breadcrumbs route={route} state={state} navigate={navigate} />
+    </div>
+  );
+}

package/manager/src/client/components/VncPanel.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Maximize2, Minimize2 } from "lucide-react";
+
+interface VncPanelProps {
+  containerId: string | null;
+  token: string;
+  fullscreen: boolean;
+  onToggleFullscreen: () => void;
+}
+
+export function VncPanel({ containerId, token, fullscreen, onToggleFullscreen }: VncPanelProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const rfbRef = useRef<any>(null);
+  const [status, setStatus] = useState("disconnected");
+
+  const captureAndUpload = useCallback(async () => {
+    if (!containerId || !rfbRef.current) return;
+    try {
+      const sourceCanvas = canvasRef.current?.querySelector("canvas");
+      if (!sourceCanvas) return;
+      const scale = 320 / sourceCanvas.width;
+      const offscreen = document.createElement("canvas");
+      offscreen.width = 320;
+      offscreen.height = Math.round(sourceCanvas.height * scale);
+      const ctx = offscreen.getContext("2d");
+      if (!ctx) return;
+      ctx.drawImage(sourceCanvas, 0, 0, offscreen.width, offscreen.height);
+      const dataUrl = offscreen.toDataURL("image/jpeg", 0.6);
+      const base64 = dataUrl.split(",")[1];
+      await fetch(`/api/containers/${containerId}/thumbnail`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ data: base64 }),
+      });
+    } catch {
+      // Thumbnail capture failures are non-critical — silently ignore
+    }
+  }, [containerId, token]);
+
+  const captureSync = useCallback(() => {
+    if (!containerId || !rfbRef.current) return;
+    try {
+      const sourceCanvas = canvasRef.current?.querySelector("canvas");
+      if (!sourceCanvas) return;
+      const scale = 320 / sourceCanvas.width;
+      const offscreen = document.createElement("canvas");
+      offscreen.width = 320;
+      offscreen.height = Math.round(sourceCanvas.height * scale);
+      const ctx = offscreen.getContext("2d");
+      if (!ctx) return;
+      ctx.drawImage(sourceCanvas, 0, 0, offscreen.width, offscreen.height);
+      const dataUrl = offscreen.toDataURL("image/jpeg", 0.6);
+      const base64 = dataUrl.split(",")[1];
+      navigator.sendBeacon(
+        `/api/containers/${containerId}/thumbnail?token=${token}`,
+        new Blob([JSON.stringify({ data: base64 })], { type: "application/json" })
+      );
+    } catch {}
+  }, [containerId, token]);
+
+  useEffect(() => {
+    if (!containerId || !canvasRef.current) { setStatus("no container"); return; }
+
+    let disposed = false;
+    let rfb: any = null;
+    let intervalId: ReturnType<typeof setInterval> | undefined;
+    async function connect() {
+      const { default: RFB } = await import("@novnc/novnc/lib/rfb.js");
+      if (disposed || !canvasRef.current) return;
+      rfb = new RFB(canvasRef.current, `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/ws/vnc/${containerId}?token=${token}`);
+      rfb.scaleViewport = true;
+      rfb.resizeSession = false;
+      rfbRef.current = rfb;
+      rfb.addEventListener("connect", () => { if (!disposed) setStatus("connected"); });
+      rfb.addEventListener("disconnect", () => { if (!disposed) setStatus("disconnected"); });
+      intervalId = setInterval(captureAndUpload, 30_000);
+    }
+    connect().catch((e) => { if (!disposed) { console.error("VNC connect error:", e); setStatus("failed"); } });
+
+    return () => {
+      disposed = true;
+      captureSync();
+      clearInterval(intervalId);
+      rfbRef.current?.disconnect();
+      rfbRef.current = null;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerId, token]);
+
+  return (
+    <div className="h-full flex flex-col bg-zinc-950">
+      <div className="h-8 bg-zinc-900 border-b border-zinc-800 flex items-center px-3 justify-between flex-shrink-0">
+        <span className="text-xs text-yellow-400">VNC {containerId ? `— ${containerId.slice(0, 8)}` : ""}</span>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-zinc-500">{status}</span>
+          <button onClick={onToggleFullscreen} className="cursor-pointer p-0.5 hover:bg-zinc-800 rounded text-zinc-400">
+            {fullscreen ? <Minimize2 className="w-3 h-3" /> : <Maximize2 className="w-3 h-3" />}
+          </button>
+        </div>
+      </div>
+      <div ref={canvasRef} className="flex-1 overflow-hidden bg-zinc-950" />
+    </div>
+  );
+}

package/manager/src/client/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,54 @@
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import type { ReactNode } from "react";
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  trigger?: ReactNode;
+  variant?: "danger" | "default";
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  onConfirm,
+  variant = "danger",
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 bg-black/60 z-50" />
+        <AlertDialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-md rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl">
+          <AlertDialog.Title className="text-sm font-semibold text-zinc-100">
+            {title}
+          </AlertDialog.Title>
+          <AlertDialog.Description className="mt-2 text-sm text-zinc-400">
+            {description}
+          </AlertDialog.Description>
+          <div className="mt-4 flex justify-end gap-2">
+            <AlertDialog.Cancel className="cursor-pointer rounded px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 border border-zinc-700">
+              Cancel
+            </AlertDialog.Cancel>
+            <AlertDialog.Action
+              className={`cursor-pointer rounded px-3 py-1.5 text-sm font-medium ${
+                variant === "danger"
+                  ? "bg-red-600 text-white hover:bg-red-700"
+                  : "bg-blue-600 text-white hover:bg-blue-700"
+              }`}
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </AlertDialog.Action>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}

package/manager/src/client/hooks/useHashRouter.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect, useCallback } from "react";
+
+export type Route =
+  | { view: "all-nodes" }
+  | { view: "node"; nodeId: string }
+  | { view: "container"; nodeId: string; containerId: string }
+  | { view: "session"; nodeId: string; containerId: string; sessionId: string };
+
+function parseHash(hash: string): Route {
+  const parts = hash.replace(/^#\/?/, "").split("/").filter(Boolean);
+  if (parts[0] === "nodes" && parts[1] && parts[2] === "containers" && parts[3] && parts[4] === "sessions" && parts[5]) {
+    return { view: "session", nodeId: parts[1], containerId: parts[3], sessionId: parts[5] };
+  }
+  if (parts[0] === "nodes" && parts[1] && parts[2] === "containers" && parts[3]) {
+    return { view: "container", nodeId: parts[1], containerId: parts[3] };
+  }
+  if (parts[0] === "nodes" && parts[1]) {
+    return { view: "node", nodeId: parts[1] };
+  }
+  return { view: "all-nodes" };
+}
+
+export function useHashRouter() {
+  const [route, setRoute] = useState<Route>(() => parseHash(window.location.hash));
+
+  useEffect(() => {
+    const handler = () => setRoute(parseHash(window.location.hash));
+    window.addEventListener("hashchange", handler);
+    return () => window.removeEventListener("hashchange", handler);
+  }, []);
+
+  const navigate = useCallback((hash: string) => {
+    window.location.hash = hash;
+  }, []);
+
+  return { route, navigate };
+}

package/manager/src/client/hooks/useLocalStorage.ts

@@ -0,0 +1,22 @@
+import { useState, useCallback } from "react";
+
+export function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void] {
+  const [state, setState] = useState<T>(() => {
+    try {
+      const stored = localStorage.getItem(key);
+      return stored !== null ? JSON.parse(stored) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  });
+
+  const setValue = useCallback((value: T | ((prev: T) => T)) => {
+    setState((prev) => {
+      const next = typeof value === "function" ? (value as (prev: T) => T)(prev) : value;
+      try { localStorage.setItem(key, JSON.stringify(next)); } catch {}
+      return next;
+    });
+  }, [key]);
+
+  return [state, setValue];
+}

package/manager/src/client/hooks/useSwarmState.ts

@@ -0,0 +1,174 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+export interface SwarmNode {
+  id: string; hostname: string; ip: string; status: string;
+  max_containers: number; last_heartbeat: number;
+}
+export interface SwarmContainer {
+  id: string; node_id: string; docker_id: string; image: string;
+  status: string; vnc_port: number; max_sessions: number;
+}
+export interface SwarmSession {
+  id: string; container_id: string; command: string; status: string;
+  exit_code: number | null; interactive: number;
+}
+export interface SwarmState {
+  connected: boolean; nodes: SwarmNode[]; containers: SwarmContainer[];
+  sessions: SwarmSession[]; token: string;
+  deleteNode: (id: string) => Promise<any>;
+  createContainer: (nodeId: string, image?: string) => Promise<any>;
+  deleteContainer: (id: string) => Promise<any>;
+  createSession: (containerId: string, command?: string) => Promise<any>;
+  deleteSession: (id: string) => Promise<any>;
+  sendInput: (sessionId: string, data: string) => Promise<any>;
+  toggleInteractive: (sessionId: string, interactive: boolean) => Promise<any>;
+}
+
+const TOKEN_KEY = "swarm-token";
+
+export function useSwarmState(): SwarmState {
+  const [connected, setConnected] = useState(false);
+  const [nodes, setNodes] = useState<SwarmNode[]>([]);
+  const [containers, setContainers] = useState<SwarmContainer[]>([]);
+  const [sessions, setSessions] = useState<SwarmSession[]>([]);
+  const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY) ?? "");
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    if (!token) {
+      const input = prompt("Enter SWARM_TOKEN:");
+      if (input) { setToken(input); localStorage.setItem(TOKEN_KEY, input); }
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (!token) return;
+    let disposed = false;
+
+    function connectWs() {
+      const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+      const ws = new WebSocket(`${protocol}//${location.host}/ws/ui?token=${token}`);
+      wsRef.current = ws;
+
+      ws.onopen = () => setConnected(true);
+      ws.onclose = () => {
+        setConnected(false);
+        if (!disposed) reconnectRef.current = setTimeout(connectWs, 3000);
+      };
+      ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        switch (msg.type) {
+          case "snapshot":
+            setNodes(msg.nodes); setContainers(msg.containers); setSessions(msg.sessions);
+            break;
+          case "node-online":
+            setNodes((prev) =>
+              prev.some((n) => n.id === msg.nodeId)
+                ? prev.map((n) => n.id === msg.nodeId ? { ...n, status: "online" } : n)
+                : [...prev, { id: msg.nodeId, hostname: msg.hostname ?? "", ip: msg.ip ?? "", status: "online", max_containers: 5, last_heartbeat: 0 }]
+            );
+            break;
+          case "node-offline":
+            setNodes((prev) =>
+              prev.map((n) => n.id === msg.nodeId ? { ...n, status: "offline" } : n)
+            );
+            break;
+          case "container-started":
+            setContainers((prev) => {
+              const exists = prev.some((c) => c.id === msg.containerId);
+              if (exists) {
+                return prev.map((c) => c.id === msg.containerId ? { ...c, docker_id: msg.dockerId, vnc_port: msg.vncPort, status: "running" } : c);
+              }
+              return [...prev, { id: msg.containerId, node_id: msg.nodeId ?? "", docker_id: msg.dockerId, image: "swarm-base", status: "running", vnc_port: msg.vncPort, max_sessions: 10 }];
+            });
+            break;
+          case "container-stopped":
+            setContainers((prev) => prev.filter((c) => c.id !== msg.containerId));
+            setSessions((prev) => prev.filter((s) => s.container_id !== msg.containerId));
+            break;
+          case "session-started":
+            setSessions((prev) => {
+              if (prev.some((s) => s.id === msg.sessionId)) return prev;
+              return [...prev, { id: msg.sessionId, container_id: msg.containerId ?? "", command: msg.command ?? "bash", status: "running", exit_code: null, interactive: 1 }];
+            });
+            break;
+          case "session-exited":
+            setSessions((prev) =>
+              prev.map((s) => s.id === msg.sessionId ? { ...s, status: "exited", exit_code: msg.exitCode } : s)
+            );
+            break;
+          case "session-deleted":
+            setSessions((prev) => prev.filter((s) => s.id !== msg.sessionId));
+            break;
+          case "node-deleted":
+            setNodes((prev) => prev.filter((n) => n.id !== msg.nodeId));
+            setContainers((prev) => {
+              const nodeContainerIds = prev.filter((c) => c.node_id === msg.nodeId).map((c) => c.id);
+              setSessions((s) => s.filter((ses) => !nodeContainerIds.includes(ses.container_id)));
+              return prev.filter((c) => c.node_id !== msg.nodeId);
+            });
+            break;
+        }
+      };
+    }
+
+    connectWs();
+    return () => { disposed = true; clearTimeout(reconnectRef.current); wsRef.current?.close(); };
+  }, [token]);
+
+  const hdrs = useCallback(() => ({
+    "Content-Type": "application/json", Authorization: `Bearer ${token}`,
+  }), [token]);
+
+  const deleteNode = useCallback(async (id: string) => {
+    const res = await fetch(`/api/nodes/${id}`, { method: "DELETE", headers: hdrs() });
+    const data = await res.json();
+    if (res.ok) {
+      setNodes((prev) => prev.filter((n) => n.id !== id));
+      setContainers((prev) => {
+        const nodeContainerIds = prev.filter((c) => c.node_id === id).map((c) => c.id);
+        setSessions((s) => s.filter((ses) => !nodeContainerIds.includes(ses.container_id)));
+        return prev.filter((c) => c.node_id !== id);
+      });
+    }
+    return data;
+  }, [hdrs]);
+
+  const createContainer = useCallback(async (nodeId: string, image = "swarm-base") => {
+    const res = await fetch("/api/containers", { method: "POST", headers: hdrs(), body: JSON.stringify({ nodeId, image }) });
+    const data = await res.json();
+    if (res.ok) setContainers((prev) => [...prev, { ...data, node_id: nodeId, docker_id: "", vnc_port: 0, max_sessions: 10 }]);
+    return data;
+  }, [hdrs]);
+
+  const deleteContainer = useCallback(async (id: string) => {
+    return (await fetch(`/api/containers/${id}`, { method: "DELETE", headers: hdrs() })).json();
+  }, [hdrs]);
+
+  const createSession = useCallback(async (containerId: string, command = "bash") => {
+    const res = await fetch("/api/sessions", { method: "POST", headers: hdrs(), body: JSON.stringify({ containerId, command }) });
+    const data = await res.json();
+    if (res.ok) setSessions((prev) => [...prev, { ...data, container_id: containerId, interactive: 1, exit_code: null }]);
+    return data;
+  }, [hdrs]);
+
+  const deleteSession = useCallback(async (id: string) => {
+    const res = await fetch(`/api/sessions/${id}`, { method: "DELETE", headers: hdrs() });
+    const data = await res.json();
+    if (res.ok) setSessions((prev) => prev.filter((s) => s.id !== id));
+    return data;
+  }, [hdrs]);
+
+  const sendInputFn = useCallback(async (sessionId: string, data: string) => {
+    return (await fetch(`/api/sessions/${sessionId}/input`, { method: "POST", headers: hdrs(), body: JSON.stringify({ data }) })).json();
+  }, [hdrs]);
+
+  const toggleInteractive = useCallback(async (sessionId: string, interactive: boolean) => {
+    const res = await fetch(`/api/sessions/${sessionId}`, { method: "PATCH", headers: hdrs(), body: JSON.stringify({ interactive }) });
+    if (res.ok) setSessions((prev) => prev.map((s) => s.id === sessionId ? { ...s, interactive: interactive ? 1 : 0 } : s));
+    return res.json();
+  }, [hdrs]);
+
+  return { connected, nodes, containers, sessions, token, deleteNode, createContainer, deleteContainer, createSession, deleteSession, sendInput: sendInputFn, toggleInteractive };
+}

package/manager/src/client/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/manager/src/client/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Swarm Manager</title>
+  </head>
+  <body class="dark">
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/manager/src/client/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/manager/src/client/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/manager/src/client/novnc.d.ts

@@ -0,0 +1,9 @@
+declare module "@novnc/novnc/lib/rfb.js" {
+  export default class RFB {
+    constructor(target: HTMLElement, url: string);
+    scaleViewport: boolean;
+    resizeSession: boolean;
+    disconnect(): void;
+    addEventListener(event: string, handler: (...args: any[]) => void): void;
+  }
+}

package/manager/vite.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import path from "path";
+import fs from "fs";
+
+function novncStripAwait() {
+  return {
+    name: "novnc-strip-toplevel-await",
+    transform(code: string, id: string) {
+      if (!id.includes("novnc/lib/util/browser")) return;
+      return code.replace(
+        /^(exports\.supportsWebCodecsH264Decode\s*=\s*supportsWebCodecsH264Decode\s*=\s*)await\s+/m,
+        "$1/* await stripped */ "
+      );
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), novncStripAwait()],
+  root: "src/client",
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  server: {
+    port: 5174,
+    strictPort: true,
+  },
+  build: {
+    outDir: "../../dist/client",
+    emptyOutDir: true,
+    target: "esnext",
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      target: "esnext",
+      plugins: [
+        {
+          name: "novnc-strip-toplevel-await",
+          setup(build) {
+            build.onLoad({ filter: /novnc\/lib\/util\/browser\.js$/ }, (args) => {
+              let code = fs.readFileSync(args.path, "utf-8");
+              // Replace the top-level await with a synchronous call wrapped in a
+              // self-executing async function (the result is a Promise, but the
+              // exported value is only used lazily for H264 decode detection).
+              code = code.replace(
+                /^(exports\.supportsWebCodecsH264Decode\s*=\s*supportsWebCodecsH264Decode\s*=\s*)await\s+/m,
+                "$1/* await stripped */ "
+              );
+              return { contents: code, loader: "js" };
+            });
+          },
+        },
+      ],
+    },
+  },
+});