swarmy 0.1.0

package/manager/src/client/App.tsx

@@ -0,0 +1,168 @@
+import { useSwarmState } from "./hooks/useSwarmState";
+import { useHashRouter } from "./hooks/useHashRouter";
+import { useLocalStorage } from "./hooks/useLocalStorage";
+import { TopBar } from "./components/TopBar";
+import { Sidebar } from "./components/Sidebar";
+import { VncPanel } from "./components/VncPanel";
+import { TerminalPanel } from "./components/TerminalPanel";
+import { AllNodesView } from "./components/AllNodesView";
+import { NodeView } from "./components/NodeView";
+import { useState, useRef, useCallback, useEffect } from "react";
+
+const DEFAULT_SIDEBAR_WIDTH = 224; // 14rem = w-56
+const DEFAULT_VNC_HEIGHT = 50;
+
+export default function App() {
+  const state = useSwarmState();
+  const { route, navigate } = useHashRouter();
+  const [sidebarOpen, setSidebarOpen] = useLocalStorage("swarm-sidebar-open", true);
+  const [vncFullscreen, setVncFullscreen] = useState(false);
+  const [termFullscreen, setTermFullscreen] = useState(false);
+  const [vncHeight, setVncHeight] = useLocalStorage("swarm-vnc-height", DEFAULT_VNC_HEIGHT);
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage("swarm-sidebar-width", DEFAULT_SIDEBAR_WIDTH);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedContainerId = (route.view === "container" || route.view === "session") ? route.containerId : null;
+  const selectedSessionId = route.view === "session" ? route.sessionId : null;
+
+  const handleSelectSession = useCallback((sessionId: string | null) => {
+    if (sessionId && (route.view === "container" || route.view === "session")) {
+      navigate(`#/nodes/${route.nodeId}/containers/${route.containerId}/sessions/${sessionId}`);
+    }
+  }, [route, navigate]);
+
+  const handleVncDrag = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const container = containerRef.current;
+    if (!container) return;
+    const onMove = (ev: MouseEvent) => {
+      const rect = container.getBoundingClientRect();
+      setVncHeight(Math.max(10, Math.min(90, ((ev.clientY - rect.top) / rect.height) * 100)));
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [setVncHeight]);
+
+  const handleSidebarDrag = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const onMove = (ev: MouseEvent) => {
+      setSidebarWidth(Math.max(150, Math.min(500, ev.clientX)));
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [setSidebarWidth]);
+
+  useEffect(() => {
+    if (!state.connected) return;
+
+    if (route.view === "session") {
+      if (!state.sessions.find((s) => s.id === route.sessionId)) {
+        navigate(`#/nodes/${route.nodeId}/containers/${route.containerId}`);
+        return;
+      }
+    }
+    if (route.view === "container" || route.view === "session") {
+      if (!state.containers.find((c) => c.id === route.containerId)) {
+        navigate(`#/nodes/${route.nodeId}`);
+        return;
+      }
+    }
+    if (route.view !== "all-nodes") {
+      if (!state.nodes.find((n) => n.id === route.nodeId)) {
+        navigate("#/");
+        return;
+      }
+    }
+  }, [route, state.connected, state.nodes, state.containers, state.sessions, navigate]);
+
+  let mainContent: React.ReactNode;
+  if (route.view === "all-nodes") {
+    mainContent = <AllNodesView state={state} navigate={navigate} />;
+  } else if (route.view === "node") {
+    mainContent = <NodeView nodeId={route.nodeId} state={state} navigate={navigate} />;
+  } else {
+    // container or session view
+    if (!state.connected) {
+      mainContent = (
+        <div className="h-full flex items-center justify-center text-sm text-zinc-500">Connecting...</div>
+      );
+    } else {
+      mainContent = (
+        <div ref={containerRef} className="flex-1 flex flex-col overflow-hidden h-full">
+          {!termFullscreen && (
+            <div className="overflow-hidden" style={{ height: vncFullscreen ? "100%" : `${vncHeight}%` }}>
+              <VncPanel
+                containerId={selectedContainerId}
+                token={state.token}
+                fullscreen={vncFullscreen}
+                onToggleFullscreen={() => setVncFullscreen(!vncFullscreen)}
+              />
+            </div>
+          )}
+          {!vncFullscreen && !termFullscreen && (
+            <div
+              className="h-1 bg-zinc-700 hover:bg-blue-500 cursor-ns-resize flex-shrink-0"
+              onMouseDown={handleVncDrag}
+              onDoubleClick={() => setVncHeight(DEFAULT_VNC_HEIGHT)}
+            />
+          )}
+          {!vncFullscreen && (
+            <div className="overflow-hidden" style={{ height: termFullscreen ? "100%" : `${100 - vncHeight}%` }}>
+              <TerminalPanel
+                state={state}
+                selectedContainerId={selectedContainerId}
+                selectedSessionId={selectedSessionId}
+                onSelectSession={handleSelectSession}
+                fullscreen={termFullscreen}
+                onToggleFullscreen={() => setTermFullscreen(!termFullscreen)}
+              />
+            </div>
+          )}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-zinc-950 text-zinc-100">
+      <TopBar sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} route={route} state={state} navigate={navigate} />
+      <div className="flex flex-1 overflow-hidden">
+        {sidebarOpen && (
+          <>
+            {/* Backdrop — mobile only */}
+            <div
+              className="fixed inset-0 top-10 bg-black/60 z-40 md:hidden"
+              onClick={() => setSidebarOpen(false)}
+            />
+            {/* Sidebar wrapper: full-screen overlay on mobile, inline on desktop */}
+            <div className="fixed top-10 inset-x-0 bottom-0 z-50 max-md:[&>div]:!w-full md:relative md:inset-auto md:z-auto">
+              <Sidebar
+                state={state}
+                route={route}
+                navigate={navigate}
+                onItemSelect={() => { if (window.innerWidth < 768) setSidebarOpen(false); }}
+                width={sidebarWidth}
+              />
+            </div>
+            <div
+              className="w-1 bg-zinc-700 hover:bg-blue-500 cursor-ew-resize flex-shrink-0 hidden md:block"
+              onMouseDown={handleSidebarDrag}
+              onDoubleClick={() => setSidebarWidth(DEFAULT_SIDEBAR_WIDTH)}
+            />
+          </>
+        )}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {mainContent}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import type { SwarmState } from "../hooks/useSwarmState";
+import { NodeCard } from "./NodeCard";
+
+interface AllNodesViewProps {
+  state: SwarmState;
+  navigate: (hash: string) => void;
+}
+
+export function AllNodesView({ state, navigate }: AllNodesViewProps) {
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-base font-medium">All Nodes</h2>
+        <span className="text-xs text-zinc-500">{state.nodes.length} nodes</span>
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-4">
+        {state.nodes.map((node) => (
+          <NodeCard
+            key={node.id}
+            node={node}
+            containers={state.containers.filter((c) => c.node_id === node.id)}
+            token={state.token}
+            onClick={() => navigate(`#/nodes/${node.id}`)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { ChevronRight } from "lucide-react";
+import type { Route } from "../hooks/useHashRouter";
+import type { SwarmState } from "../hooks/useSwarmState";
+
+interface BreadcrumbsProps {
+  route: Route;
+  state: SwarmState;
+  navigate: (hash: string) => void;
+}
+
+export function Breadcrumbs({ route, state, navigate }: BreadcrumbsProps) {
+  const segments: Array<{ label: string; hash?: string }> = [];
+
+  if (route.view === "all-nodes") {
+    segments.push({ label: "All Nodes" });
+  } else {
+    segments.push({ label: "All Nodes", hash: "#/" });
+  }
+
+  if (route.view === "node" || route.view === "container" || route.view === "session") {
+    const node = state.nodes.find((n) => n.id === route.nodeId);
+    const label = node?.id ?? route.nodeId;
+    if (route.view === "node") {
+      segments.push({ label });
+    } else {
+      segments.push({ label, hash: `#/nodes/${route.nodeId}` });
+    }
+  }
+
+  if (route.view === "container" || route.view === "session") {
+    const label = route.containerId.slice(0, 8);
+    if (route.view === "container") {
+      segments.push({ label });
+    } else {
+      segments.push({ label, hash: `#/nodes/${route.nodeId}/containers/${route.containerId}` });
+    }
+  }
+
+  if (route.view === "session") {
+    const session = state.sessions.find((s) => s.id === route.sessionId);
+    segments.push({ label: session?.command ?? route.sessionId.slice(0, 8) });
+  }
+
+  return (
+    <div className="flex items-center gap-1 text-xs text-zinc-500 overflow-hidden min-w-0">
+      {segments.map((seg, i) => (
+        <span key={i} className="flex items-center gap-1 min-w-0">
+          {i > 0 && <ChevronRight className="w-3 h-3 flex-shrink-0 text-zinc-600" />}
+          {seg.hash ? (
+            <button
+              onClick={() => navigate(seg.hash!)}
+              className="cursor-pointer hover:text-zinc-300 truncate"
+            >
+              {seg.label}
+            </button>
+          ) : (
+            <span className="text-zinc-300 truncate">{seg.label}</span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import type { SwarmContainer, SwarmSession } from "../hooks/useSwarmState";
+
+interface ContainerCardProps {
+  container: SwarmContainer;
+  sessions: SwarmSession[];
+  token: string;
+  onClick: () => void;
+}
+
+export function ContainerCard({ container, sessions, token, onClick }: ContainerCardProps) {
+  const runningSessions = sessions.filter((s) => s.status === "running");
+
+  return (
+    <div
+      onClick={onClick}
+      className="bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden cursor-pointer hover:border-zinc-600 transition-colors"
+    >
+      <div className="aspect-video bg-zinc-950 relative">
+        <img
+          src={`/api/containers/${container.id}/thumbnail?token=${token}&t=${Math.floor(Date.now() / 30000)}`}
+          alt=""
+          className="w-full h-full object-cover"
+          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+        />
+        <div className="absolute inset-0 flex items-center justify-center text-xs text-zinc-600 -z-0">
+          no preview
+        </div>
+      </div>
+      <div className="px-3 py-2 flex items-center gap-2">
+        <span className={`w-2 h-2 rounded-full flex-shrink-0 ${container.status === "running" ? "bg-green-400" : "bg-zinc-600"}`} />
+        <span className="text-sm truncate flex-1">{container.id.slice(0, 8)}</span>
+        <span className="text-xs text-zinc-500">{runningSessions.length} sessions</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import type { SwarmNode, SwarmContainer } from "../hooks/useSwarmState";
+
+interface NodeCardProps {
+  node: SwarmNode;
+  containers: SwarmContainer[];
+  token: string;
+  onClick: () => void;
+}
+
+export function NodeCard({ node, containers, token, onClick }: NodeCardProps) {
+  const runningContainers = containers.filter((c) => c.status === "running");
+  const heroContainer = runningContainers[0];
+  const extraCount = runningContainers.length - 1;
+
+  return (
+    <div
+      onClick={onClick}
+      className="bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden cursor-pointer hover:border-zinc-600 transition-colors"
+    >
+      <div className="aspect-video bg-zinc-950 relative">
+        {heroContainer ? (
+          <>
+            <img
+              src={`/api/containers/${heroContainer.id}/thumbnail?token=${token}&t=${Math.floor(Date.now() / 30000)}`}
+              alt=""
+              className="w-full h-full object-cover"
+              onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+            />
+            <div className="absolute inset-0 flex items-center justify-center text-xs text-zinc-600 -z-0">
+              no preview
+            </div>
+            {extraCount > 0 && (
+              <div className="absolute bottom-2 left-2 bg-black/70 text-xs text-zinc-300 px-2 py-0.5 rounded">
+                +{extraCount} more
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-xs text-zinc-600">
+            <span className="m-auto">{node.status === "online" ? "no containers" : "offline"}</span>
+          </div>
+        )}
+      </div>
+      <div className="px-3 py-2 flex items-center gap-2">
+        <span className={`w-2 h-2 rounded-full flex-shrink-0 ${node.status === "online" ? "bg-green-400" : node.status === "reconnecting" ? "bg-yellow-400" : "bg-red-400"}`} />
+        <span className="text-sm truncate flex-1">{node.id}</span>
+        <span className="text-xs text-zinc-500">{runningContainers.length}/{node.max_containers}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { Plus } from "lucide-react";
+import type { SwarmState } from "../hooks/useSwarmState";
+import { ContainerCard } from "./ContainerCard";
+
+interface NodeViewProps {
+  nodeId: string;
+  state: SwarmState;
+  navigate: (hash: string) => void;
+}
+
+export function NodeView({ nodeId, state, navigate }: NodeViewProps) {
+  const node = state.nodes.find((n) => n.id === nodeId);
+  const containers = state.containers.filter((c) => c.node_id === nodeId);
+
+  if (!node) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-zinc-500">
+        Node not found
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-base font-medium">{node.id}</h2>
+          <span className="text-xs text-zinc-500">{containers.length} containers · {node.status}</span>
+        </div>
+        {node.status === "online" && containers.length < node.max_containers && (
+          <button
+            onClick={() => state.createContainer(nodeId)}
+            className="cursor-pointer flex items-center gap-1 px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 rounded text-white"
+          >
+            <Plus className="w-3 h-3" /> New Container
+          </button>
+        )}
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-4">
+        {containers.map((container) => (
+          <ContainerCard
+            key={container.id}
+            container={container}
+            sessions={state.sessions.filter((s) => s.container_id === container.id)}
+            token={state.token}
+            onClick={() => navigate(`#/nodes/${nodeId}/containers/${container.id}`)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,152 @@
+import { useCallback, useState } from "react";
+import { ChevronDown, ChevronRight, Circle, Box, Terminal, Plus, Trash2 } from "lucide-react";
+import type { SwarmState } from "../hooks/useSwarmState";
+import type { Route } from "../hooks/useHashRouter";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { ConfirmDialog } from "./ui/ConfirmDialog";
+
+interface SidebarProps {
+  state: SwarmState;
+  route: Route;
+  navigate: (hash: string) => void;
+  onItemSelect?: () => void;
+  width: number;
+}
+
+export function Sidebar({ state, route, navigate, onItemSelect, width }: SidebarProps) {
+  const [expandedNodes, setExpandedNodes] = useLocalStorage<string[]>("swarm-expanded-nodes", []);
+  const [expandedContainers, setExpandedContainers] = useLocalStorage<string[]>("swarm-expanded-containers", []);
+  const [confirmDelete, setConfirmDelete] = useState<{ type: "container" | "node"; id: string } | null>(null);
+
+  const toggleList = useCallback((list: string[], id: string): string[] => {
+    return list.includes(id) ? list.filter((x) => x !== id) : [...list, id];
+  }, []);
+
+  const statusColor = (s: string) =>
+    s === "online" ? "text-green-400" : s === "reconnecting" ? "text-yellow-400" : "text-red-400";
+
+  return (
+    <div className="bg-zinc-900 md:bg-zinc-900/50 flex flex-col overflow-y-auto flex-shrink-0 h-full" style={{ width }}>
+      <div className="p-2 border-b border-zinc-800 flex justify-between items-center">
+        <span className="text-xs font-semibold text-zinc-400 uppercase">Nodes</span>
+        <span className="text-xs text-zinc-500">{state.nodes.length}</span>
+      </div>
+      <div className="flex-1 overflow-y-auto p-1">
+        {state.nodes.map((node) => {
+          const nodeContainers = state.containers.filter((c) => c.node_id === node.id);
+          const expanded = expandedNodes.includes(node.id);
+          const nodeActive = route.view !== "all-nodes" && "nodeId" in route && route.nodeId === node.id;
+          return (
+            <div key={node.id} className="mb-0.5">
+              <div
+                className={`flex items-center gap-1 px-2 py-1 rounded hover:bg-zinc-800 cursor-pointer text-sm ${nodeActive ? "text-blue-300" : ""}`}
+                onClick={() => {
+                  setExpandedNodes((s) => toggleList(s, node.id));
+                  navigate(`#/nodes/${node.id}`);
+                  onItemSelect?.();
+                }}
+              >
+                {expanded ? <ChevronDown className="w-3 h-3 text-zinc-500" /> : <ChevronRight className="w-3 h-3 text-zinc-500" />}
+                <Circle className={`w-2 h-2 fill-current ${statusColor(node.status)}`} />
+                <span className="truncate flex-1">{node.id}</span>
+                <span className="text-xs text-zinc-600">{nodeContainers.length}/{node.max_containers}</span>
+                <button className="cursor-pointer p-0.5 hover:bg-red-900/50 rounded"
+                  onClick={(e) => { e.stopPropagation(); setConfirmDelete({ type: "node", id: node.id }); }}
+                  title="Remove node">
+                  <Trash2 className="w-3 h-3 text-red-400" />
+                </button>
+              </div>
+              {expanded && (
+                <div className="ml-3">
+                  {nodeContainers.map((container) => {
+                    const cSessions = state.sessions.filter((s) => s.container_id === container.id);
+                    const cExpanded = expandedContainers.includes(container.id);
+                    const selected = (route.view === "container" || route.view === "session") && route.containerId === container.id;
+                    return (
+                      <div key={container.id} className="mb-0.5">
+                        <div className={`flex items-center gap-1 px-2 py-1 rounded cursor-pointer text-sm ${selected ? "bg-blue-900/30 text-blue-300" : "hover:bg-zinc-800"}`}
+                          onClick={() => {
+                            setExpandedContainers((s) => toggleList(s, container.id));
+                            navigate(`#/nodes/${node.id}/containers/${container.id}`);
+                            onItemSelect?.();
+                          }}>
+                          {cExpanded ? <ChevronDown className="w-3 h-3 text-zinc-500" /> : <ChevronRight className="w-3 h-3 text-zinc-500" />}
+                          <Box className="w-3 h-3 text-yellow-400" />
+                          <span className="truncate flex-1 text-xs">{container.id.slice(0, 8)}</span>
+                          <span className="text-xs text-zinc-600">{cSessions.filter((s) => s.status === "running").length}/{container.max_sessions}</span>
+                          <button className="cursor-pointer p-0.5 hover:bg-red-900/50 rounded"
+                            onClick={(e) => { e.stopPropagation(); setConfirmDelete({ type: "container", id: container.id }); }}
+                            title="Stop & remove">
+                            <Trash2 className="w-3 h-3 text-red-400" />
+                          </button>
+                        </div>
+                        {cExpanded && (
+                          <div className="ml-4">
+                            {cSessions.map((session) => (
+                              <div key={session.id}
+                                className={`flex items-center gap-1 px-2 py-0.5 rounded cursor-pointer text-xs ${route.view === "session" && route.sessionId === session.id ? "bg-blue-900/20 text-blue-300" : "hover:bg-zinc-800 text-zinc-400"}`}
+                                onClick={() => {
+                                  navigate(`#/nodes/${node.id}/containers/${container.id}/sessions/${session.id}`);
+                                  onItemSelect?.();
+                                }}>
+                                <Terminal className="w-3 h-3" />
+                                <span className="truncate flex-1">{session.command}</span>
+                                <span className={session.status === "running" ? "text-green-400" : "text-zinc-600"}>
+                                  {session.status === "running" ? "\u25CF" : "\u25CB"}
+                                </span>
+                              </div>
+                            ))}
+                            {container.status === "running" && cSessions.filter((s) => s.status === "running").length < container.max_sessions && (
+                              <button className="cursor-pointer flex items-center gap-1 px-2 py-0.5 text-xs text-green-400 hover:bg-zinc-800 rounded w-full"
+                                onClick={async () => { const data = await state.createSession(container.id); if (data?.id) { navigate(`#/nodes/${node.id}/containers/${container.id}/sessions/${data.id}`); onItemSelect?.(); } }}>
+                                <Plus className="w-3 h-3" /> New Session
+                              </button>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                  {node.status === "online" && nodeContainers.length < node.max_containers && (
+                    <button className="cursor-pointer flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:bg-zinc-800 rounded w-full"
+                      onClick={() => state.createContainer(node.id)}>
+                      <Plus className="w-3 h-3" /> New Container
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {confirmDelete && (
+        <ConfirmDialog
+          open
+          onOpenChange={(open) => { if (!open) setConfirmDelete(null); }}
+          title={confirmDelete.type === "node" ? "Remove node?" : "Remove container?"}
+          description={
+            confirmDelete.type === "node"
+              ? `This will remove node "${confirmDelete.id}" and all its containers and sessions. This action cannot be undone.`
+              : `This will stop and permanently remove container ${confirmDelete.id.slice(0, 8)} and all its sessions. This action cannot be undone.`
+          }
+          confirmLabel="Remove"
+          variant="danger"
+          onConfirm={() => {
+            if (confirmDelete.type === "node") {
+              state.deleteNode(confirmDelete.id);
+              if (route.view !== "all-nodes" && "nodeId" in route && route.nodeId === confirmDelete.id) navigate("#/");
+            } else {
+              state.deleteContainer(confirmDelete.id);
+              if ((route.view === "container" || route.view === "session") && route.containerId === confirmDelete.id) {
+                const container = state.containers.find((c) => c.id === confirmDelete.id);
+                navigate(container ? `#/nodes/${container.node_id}` : "#/");
+              }
+            }
+            setConfirmDelete(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}