@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/export/target-list.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { ChevronRight, Download } from "lucide-react";
+import type { Target } from "@/lib/tool/export-targets";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { Command } from "./copy-button";
+
+/** Which target and which file are open: kept by the Export window, so they stay open while it is. */
+export interface Opened {
+  target: string | null;
+  setTarget: (dir: string | null) => void;
+  file: string | null;
+  setFile: (path: string | null) => void;
+}
+
+/** A target's commands and files; a click on a file shows it. */
+function TargetDetails({ target, opened }: { target: Target; opened: Opened }) {
+  const t = useText().exportPanel;
+  const { file: openFile, setFile: setOpenFile } = opened;
+  return (
+    <div className="flex flex-col gap-3 px-4 pb-4">
+      {target.isoloom && <Command label={t.withIsoloom} text={target.isoloom} />}
+      {target.run && <Command label={target.isoloom ? t.withTool : t.run} text={target.run} />}
+      <ul className="font-mono text-xs">
+        {target.files.map((f) => (
+          <li key={f.path}>
+            <button
+              type="button"
+              onClick={() => { setOpenFile(openFile === f.path ? null : f.path); }}
+              className={cn("w-full truncate rounded px-2 py-1 text-left text-muted-foreground hover:bg-muted hover:text-foreground", openFile === f.path && "bg-muted text-foreground")}
+            >
+              {f.path}
+            </button>
+            {openFile === f.path && (
+              <pre className="mt-1 max-h-80 overflow-auto rounded-md border bg-surface p-3">
+                <code>{f.contents}</code>
+              </pre>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/** One target: its name and file count (a click opens it), and its own zip. */
+function TargetRow({ target, opened, onDownload, ready }: { target: Target; opened: Opened; onDownload: () => void; ready: boolean }) {
+  const t = useText().exportPanel;
+  const expanded = opened.target === target.dir;
+  const onToggle = () => {
+    opened.setTarget(expanded ? null : target.dir);
+  };
+  return (
+    <li>
+      <div className="flex items-center hover:bg-muted/50">
+        <button type="button" aria-expanded={expanded} onClick={onToggle} className="flex min-w-0 flex-1 items-center gap-2 py-3 pl-4 text-left text-sm">
+          <ChevronRight className={cn("size-4 text-muted-foreground transition-transform", expanded && "rotate-90")} aria-hidden />
+          <span className="flex-1 font-medium">{target.name}</span>
+          <span className="text-xs text-muted-foreground">{t.files(target.files.length)}</span>
+        </button>
+        <button
+          type="button"
+          onClick={onDownload}
+          disabled={!ready}
+          title={t.downloadOnly(target.name)}
+          aria-label={t.downloadTarget(target.name)}
+          className="mr-2 grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40"
+        >
+          <Download className="size-4" />
+        </button>
+      </div>
+      {expanded && <TargetDetails target={target} opened={opened} />}
+    </li>
+  );
+}
+
+/** Every target the zip holds, one open at a time. */
+export function TargetList({ targets, ready, opened, onDownloadTarget }: { targets: Target[]; ready: boolean; opened: Opened; onDownloadTarget: (dir: string) => void }) {
+  return (
+    <ul className="divide-y rounded-lg border">
+      {targets.map((g) => (
+        <TargetRow key={g.dir} target={g} opened={opened} onDownload={() => { onDownloadTarget(g.dir); }} ready={ready} />
+      ))}
+    </ul>
+  );
+}

package/src/components/tool/floating-window.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useRef, useState, type PointerEvent, type ReactNode } from "react";
+import { GripHorizontal, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useText } from "./text";
+
+const MARGIN = 12;
+/** Room left under the top bar (menu, toolbar, export). */
+const TOP = 72;
+
+/** Dragging a window by its title bar, kept inside the screen. */
+function useWindowDrag(width: number, side: "left" | "right") {
+  const ref = useRef<HTMLDivElement>(null);
+  // The editor only renders in the browser, so the screen size is known from the start.
+  const [pos, setPos] = useState(() => {
+    const w = Math.min(width, window.innerWidth - 2 * MARGIN);
+    return { x: side === "left" ? MARGIN : window.innerWidth - w - MARGIN, y: TOP };
+  });
+  const drag = useRef<{ dx: number; dy: number } | null>(null);
+  const clamp = (x: number, y: number) => {
+    const w = ref.current?.offsetWidth ?? width;
+    return { x: Math.min(Math.max(MARGIN, x), window.innerWidth - w - MARGIN), y: Math.min(Math.max(MARGIN, y), window.innerHeight - 48) };
+  };
+  const handlers = {
+    onPointerDown: (e: PointerEvent<HTMLDivElement>) => {
+      if (e.target instanceof Element && e.target.closest("button")) return;
+      drag.current = { dx: e.clientX - pos.x, dy: e.clientY - pos.y };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    onPointerMove: (e: PointerEvent<HTMLDivElement>) => {
+      if (drag.current) setPos(clamp(e.clientX - drag.current.dx, e.clientY - drag.current.dy));
+    },
+    onPointerUp: () => {
+      drag.current = null;
+    },
+  };
+  return { ref, pos, handlers };
+}
+
+/**
+ * A window floating over the canvas: drag it by its title bar, close it with the cross. It opens
+ * against the left or right edge and stays inside the screen while dragged.
+ */
+export function FloatingWindow({ title, side, width, onClose, children, className }: { title: ReactNode; side: "left" | "right"; width: number; onClose: () => void; children: ReactNode; className?: string }) {
+  const t = useText();
+  const { ref, pos, handlers } = useWindowDrag(width, side);
+  return (
+    <div
+      ref={ref}
+      role="dialog"
+      aria-label={typeof title === "string" ? title : undefined}
+      style={{ left: pos.x, top: pos.y, width: `min(${String(width)}px, calc(100vw - ${String(2 * MARGIN)}px))` }}
+      className={cn(
+        "absolute z-20 flex max-h-[calc(100dvh-96px)] flex-col overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-[0_8px_30px_-8px_rgb(0_0_0/0.18)]",
+        className,
+      )}
+    >
+      <div {...handlers} className="flex cursor-grab touch-none items-center gap-2 border-b px-3 py-2 select-none active:cursor-grabbing">
+        <GripHorizontal className="size-4 text-muted-foreground/60" aria-hidden />
+        <span className="flex-1 truncate font-heading text-sm font-semibold">{title}</span>
+        <button type="button" onClick={onClose} aria-label={t.windows.close} className="grid size-6 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
+          <X className="size-4" />
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
+    </div>
+  );
+}

package/src/components/tool/flow-canvas.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import type { MouseEvent, ReactNode } from "react";
+import { Background, BackgroundVariant, ConnectionMode, Controls, Panel, ReactFlow, SelectionMode, type EdgeTypes, type NodeTypes } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Redo2, Undo2 } from "lucide-react";
+import { machineEnds, networkOfCable } from "@/lib/tool/cables";
+import { isLan, isMachine, type CableEdge, type LabNode } from "@/lib/tool/model";
+import { nameById } from "@/lib/tool/selection";
+import { CableEdgeView } from "./canvas/cable-edge";
+import { AddressesContext, LiveContext, PortsContext, SidesContext } from "./canvas/contexts";
+import { LanNodeView } from "./canvas/lan-node";
+import { MachineNodeView } from "./canvas/machine-node";
+import { NoteNodeView } from "./canvas/note-node";
+import { DesignContext } from "./canvas/sketch";
+import { SwitchNodeView } from "./canvas/switch-node";
+import type { EditorModel } from "./hooks/use-editor";
+
+const nodeTypes: NodeTypes = { machine: MachineNodeView, lan: LanNodeView, switch: SwitchNodeView, note: NoteNodeView };
+const edgeTypes: EdgeTypes = { cable: CableEdgeView };
+
+/** What the canvas's nodes and cables read: the look, addresses, port sides and the running lab. */
+function CanvasContexts({ e, children }: { e: EditorModel; children: ReactNode }) {
+  return (
+    <DesignContext.Provider value={e.design.design}>
+      <AddressesContext.Provider value={e.addresses}>
+        <SidesContext.Provider value={e.views.sides}>
+          <PortsContext.Provider value={e.views.routerPorts}>
+            <LiveContext.Provider value={e.liveView}>{children}</LiveContext.Provider>
+          </PortsContext.Provider>
+        </SidesContext.Provider>
+      </AddressesContext.Provider>
+    </DesignContext.Provider>
+  );
+}
+
+/** As in GNS3: double-click a running machine for its console, right-click for the rest (desktop app only). */
+function runningLabMenus(e: EditorModel) {
+  const { invoke, desk, lab } = e;
+  const running = desk.state.run === "running";
+  return {
+    onNodeDoubleClick: (_: MouseEvent, node: LabNode) => {
+      if (invoke && running && isMachine(node)) void desk.actions.machineConsole(node.data.name);
+    },
+    onNodeContextMenu: (ev: MouseEvent, node: LabNode) => {
+      if (!invoke) return;
+      if (isMachine(node)) {
+        ev.preventDefault();
+        desk.menus.setMachineMenu({ x: ev.clientX, y: ev.clientY, machine: node.data.name });
+      } else if (isLan(node)) {
+        ev.preventDefault();
+        desk.menus.setLinkMenu({ x: ev.clientX, y: ev.clientY, network: node.data.name, title: node.data.name });
+      }
+    },
+    onEdgeContextMenu: (ev: MouseEvent, edge: CableEdge) => {
+      const network = invoke ? networkOfCable(edge.id, lab.nodes, lab.edges) : null;
+      if (!network) return;
+      ev.preventDefault();
+      const title = `${nameById(lab.nodes, edge.source)} ↔ ${nameById(lab.nodes, edge.target)}`;
+      desk.menus.setLinkMenu({ x: ev.clientX, y: ev.clientY, network, title, machines: machineEnds(edge, lab.nodes) });
+    },
+  };
+}
+
+/** Undo and redo, beside the zoom controls. */
+function HistoryButtons({ e }: { e: EditorModel }) {
+  const { step, canUndo, canRedo } = e.history;
+  const t = e.t.toolbar;
+  return (
+    <Panel position="bottom-left" className="!mb-4 !ml-16 flex overflow-hidden rounded-lg border bg-popover shadow-sm">
+      <button type="button" onClick={() => { step(true); }} disabled={!canUndo} title={t.undoTitle} aria-label={t.undo} className="grid size-8 place-items-center text-foreground hover:bg-muted disabled:opacity-35">
+        <Undo2 className="size-4" />
+      </button>
+      <button type="button" onClick={() => { step(false); }} disabled={!canRedo} title={t.redoTitle} aria-label={t.redo} className="grid size-8 place-items-center border-l text-foreground hover:bg-muted disabled:opacity-35">
+        <Redo2 className="size-4" />
+      </button>
+    </Panel>
+  );
+}
+
+/** The canvas: React Flow with the lab's nodes and cables, in Excalidraw's two modes. */
+export function FlowCanvas({ e }: { e: EditorModel }) {
+  const { lab, tools, cabling, carry, placement } = e;
+  const select = tools.mode === "select";
+  const menus = runningLabMenus(e);
+  return (
+    <CanvasContexts e={e}>
+      <ReactFlow<LabNode, CableEdge>
+        nodes={lab.nodes}
+        edges={e.views.shownEdges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={cabling.onNodesChange}
+        onNodeDragStart={carry.onNodeDragStart}
+        onNodeDrag={carry.onNodeDrag}
+        onNodeDragStop={carry.onNodeDragStop}
+        // A selected LAN must stay under its machines.
+        elevateNodesOnSelect={false}
+        onEdgesChange={lab.onEdgesChange}
+        onConnect={cabling.onConnect}
+        onPaneClick={placement.onPaneClick}
+        onNodeClick={placement.onNodeClick}
+        onNodeDoubleClick={menus.onNodeDoubleClick}
+        onNodeContextMenu={menus.onNodeContextMenu}
+        onEdgeContextMenu={menus.onEdgeContextMenu}
+        onMoveStart={e.desk.menus.closeMenus}
+        connectionMode={ConnectionMode.Loose}
+        // Select: dragging the canvas draws a selection box; the middle button or Space pans.
+        // Hand: dragging pans, and nothing on the canvas can be changed.
+        panOnDrag={select ? [1] : true}
+        selectionOnDrag={select}
+        // Only what is wholly inside the box, so selecting a LAN's machines leaves the LAN alone.
+        selectionMode={SelectionMode.Full}
+        multiSelectionKeyCode={["Shift", "Meta", "Control"]}
+        panActivationKeyCode="Space"
+        nodesDraggable={select}
+        nodesConnectable={select}
+        elementsSelectable={select}
+        panOnScroll
+        zoomActivationKeyCode={["Meta", "Control"]}
+        isValidConnection={cabling.isValid}
+        edgesReconnectable
+        onReconnectStart={cabling.onReconnectStart}
+        onReconnect={cabling.onReconnect}
+        onReconnectEnd={cabling.onReconnectEnd}
+        colorMode={e.resolvedTheme === "dark" ? "dark" : "light"}
+        deleteKeyCode={["Backspace", "Delete"]}
+        fitView
+        fitViewOptions={{ padding: 0.4, maxZoom: 1.1 }}
+        proOptions={{ hideAttribution: true }}
+      >
+        {e.design.design === "business" && <Background variant={BackgroundVariant.Dots} gap={20} size={1.2} color="var(--border)" />}
+        <Controls position="bottom-left" showInteractive={false} className="!m-4 overflow-hidden !rounded-lg !border !shadow-sm" />
+        <HistoryButtons e={e} />
+      </ReactFlow>
+    </CanvasContexts>
+  );
+}

package/src/components/tool/hooks/use-cabling.ts

@@ -0,0 +1,66 @@
+import { useCallback, useMemo, useRef } from "react";
+import { addEdge, type Connection, type NodeChange } from "@xyflow/react";
+import { canConnect, newCable, onLanEdge, reconnected, type LabIndex } from "@/lib/tool/cables";
+import { isLan, isRealRouter, isSwitch, type CableEdge, type LabNode, type LanNode } from "@/lib/tool/model";
+import { snapMoves } from "@/lib/tool/placement";
+import type { Lab } from "./use-lab";
+
+/** The ids of the LANs, switches and real routers, and the LANs themselves. */
+export function useLabIndex(nodes: LabNode[]): LabIndex & { lans: LanNode[] } {
+  const lanIds = useMemo(() => new Set(nodes.filter(isLan).map((n) => n.id)), [nodes]);
+  const lans = useMemo(() => nodes.filter(isLan), [nodes]);
+  const switchIds = useMemo(() => new Set(nodes.filter(isSwitch).map((n) => n.id)), [nodes]);
+  const routerIds = useMemo(() => new Set(nodes.filter(isRealRouter).map((n) => n.id)), [nodes]);
+  return useMemo(() => ({ lanIds, lans, switchIds, routerIds }), [lanIds, lans, switchIds, routerIds]);
+}
+
+/**
+ * Drawing and moving cables. Machine to machine, LAN or port; never LAN to LAN or switch to LAN;
+ * a switch or router port takes one cable. Cables can be moved: drag either end onto another
+ * machine, LAN or port, or onto the canvas to unplug it.
+ */
+export function useCabling(lab: Lab, index: LabIndex & { lans: LanNode[] }) {
+  const { nodes, edges, setEdges, onNodesChange } = lab;
+  // Routers, firewalls and switches are magnetic: dragged near a LAN's border, they land on it.
+  const onSnappingChange = useCallback(
+    (changes: NodeChange<LabNode>[]) => {
+      onNodesChange(snapMoves(changes, nodes, index.lans));
+    },
+    [onNodesChange, nodes, index.lans],
+  );
+  // The cable being moved, if any: its own ends don't count as taken while it moves.
+  const moving = useRef<{ id: string; done: boolean } | null>(null);
+  // An appliance on a LAN's edge already uses eth0 there: its cables start at eth1.
+  const first = useCallback((id: string) => (onLanEdge(id, nodes, index.lans) ? 1 : 0), [nodes, index.lans]);
+  const isValid = useCallback((c: Parameters<typeof canConnect>[0]) => canConnect(c, index, edges, moving.current?.id), [index, edges]);
+  const onReconnect = useCallback(
+    (old: CableEdge, c: Connection) => {
+      if (!c.source || !c.target || !canConnect(c, index, edges, moving.current?.id)) return;
+      if (moving.current) moving.current.done = true;
+      setEdges((es) => reconnected(es, old, c, index, first));
+    },
+    [index, edges, setEdges, first],
+  );
+  const onConnect = useCallback(
+    (c: Connection) => {
+      if (!c.source || !c.target || c.source === c.target) return;
+      setEdges((es) => addEdge<CableEdge>(newCable(c, index, es, first), es));
+    },
+    [setEdges, index, first],
+  );
+  return {
+    onNodesChange: onSnappingChange,
+    isValid,
+    onConnect,
+    onReconnect,
+    onReconnectStart: (_: unknown, edge: CableEdge) => {
+      moving.current = { id: edge.id, done: false };
+    },
+    // Dropped nowhere: the cable is unplugged.
+    onReconnectEnd: () => {
+      const m = moving.current;
+      if (m && !m.done) setEdges((es) => es.filter((e) => e.id !== m.id));
+      moving.current = null;
+    },
+  };
+}

package/src/components/tool/hooks/use-captures.ts

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import type { Invoke } from "@/lib/tool/desktop";
+
+/** Captures in progress (desktop): network -> the .pcap file, or null when Wireshark shows it live. */
+export function useCaptures(invoke: Invoke | null, labName: string, onError: (error: string) => void) {
+  const [captures, setCaptures] = useState<Record<string, string | null>>({});
+  async function capture(network: string) {
+    if (!invoke) return;
+    try {
+      const res = await invoke<{ file: string | null }>("capture_start", { name: labName, network });
+      setCaptures((c) => ({ ...c, [network]: res.file }));
+    } catch (e) {
+      onError(String(e));
+    }
+  }
+  async function stopCapture(network: string) {
+    if (!invoke) return;
+    await invoke("capture_stop", { name: labName, network }).catch(() => undefined);
+    setCaptures((c) => Object.fromEntries(Object.entries(c).filter(([n]) => n !== network)));
+  }
+  return { captures, capture, stopCapture, clearCaptures: () => { setCaptures({}); } };
+}
+
+export type Captures = ReturnType<typeof useCaptures>;

package/src/components/tool/hooks/use-clipboard.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef } from "react";
+import type { XYPosition } from "@xyflow/react";
+import { cloneLab } from "@/lib/tool/clone";
+import { isLan, unselected, type CableEdge, type LabNode } from "@/lib/tool/model";
+import { inTextField } from "./use-history";
+import type { Lab } from "./use-lab";
+
+type DeleteNodes = (elements: { nodes: { id: string }[] }) => unknown;
+
+/** The cables between `picked` nodes: what goes with them when they are copied. */
+function cablesWithin(picked: LabNode[], edges: CableEdge[]): CableEdge[] {
+  const ids = new Set(picked.map((n) => n.id));
+  return edges.filter((c) => ids.has(c.source) && ids.has(c.target));
+}
+
+/**
+ * Copy, cut, paste and duplicate (Ctrl/⌘ C, X, V, D). Copies get new names and ids, a LAN its own
+ * block; LANs go first in the list so they stay under the machines.
+ */
+export function useClipboard(lab: Lab, deleteElements: DeleteNodes): void {
+  const { nodes, edges, setNodes, setEdges } = lab;
+  const clipboard = useRef<{ nodes: LabNode[]; edges: CableEdge[]; pastes: number } | null>(null);
+  const addCopies = useCallback(
+    (picked: LabNode[], from: CableEdge[], offset: XYPosition) => {
+      const copies = cloneLab(picked, from, nodes, offset);
+      setNodes([...copies.nodes.filter(isLan), ...unselected(nodes), ...copies.nodes.filter((n) => !isLan(n))]);
+      setEdges((es) => [...unselected(es), ...copies.edges]);
+    },
+    [nodes, setNodes, setEdges],
+  );
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (inTextField(e)) return;
+      if (!(e.metaKey || e.ctrlKey) || e.shiftKey) return;
+      const key = e.key.toLowerCase();
+      const picked = nodes.filter((n) => n.selected);
+      const pasted = clipboard.current;
+      if ((key === "c" || key === "x") && picked.length) {
+        clipboard.current = { nodes: picked, edges: cablesWithin(picked, edges), pastes: 0 };
+        if (key === "x") void deleteElements({ nodes: picked.map((n) => ({ id: n.id })) });
+      } else if (key === "v" && pasted) {
+        pasted.pastes += 1;
+        addCopies(pasted.nodes, pasted.edges, { x: 40 * pasted.pastes, y: 40 * pasted.pastes });
+      } else if (key === "d" && picked.length) {
+        addCopies(picked, cablesWithin(picked, edges), { x: 40, y: 40 });
+      } else return;
+      e.preventDefault();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [nodes, edges, addCopies, deleteElements]);
+}

package/src/components/tool/hooks/use-context-menus.ts

@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+/** A right-click on a machine (desktop): its console, its screen, starting or stopping it. */
+export interface MachineMenuAt {
+  x: number;
+  y: number;
+  machine: string;
+}
+
+/**
+ * A right-click on a cable or a LAN (desktop): capture its traffic, suspend or resume it.
+ * `machines`: a cable's ends that are machines (their ports); none for a whole LAN.
+ */
+export interface LinkMenuAt {
+  x: number;
+  y: number;
+  network: string;
+  title: string;
+  machines?: string[];
+}
+
+/** The right-click menus open on the canvas (desktop app only). */
+export function useContextMenus() {
+  const [machineMenu, setMachineMenu] = useState<MachineMenuAt | null>(null);
+  const [linkMenu, setLinkMenu] = useState<LinkMenuAt | null>(null);
+  return {
+    machineMenu,
+    setMachineMenu,
+    linkMenu,
+    setLinkMenu,
+    closeMenus: () => {
+      setMachineMenu(null);
+      setLinkMenu(null);
+    },
+  };
+}
+

package/src/components/tool/hooks/use-design.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { desktop } from "@/lib/tool/desktop";
+import type { Design } from "@/lib/tool/model";
+import { loadDesign, saveDesign } from "@/lib/tool/storage";
+
+/**
+ * The canvas's look: a preference of this browser (a share link brings its own). The desktop
+ * app opens in business, the site in the sketch.
+ */
+export function useDesign() {
+  const [design, setDesign] = useState<Design>(() => (desktop() ? "business" : "sketch"));
+  useEffect(() => {
+    const saved = loadDesign();
+    if (saved)
+      queueMicrotask(() => {
+        setDesign(saved);
+      });
+  }, []);
+  const chooseDesign = (d: Design) => {
+    setDesign(d);
+    saveDesign(d);
+  };
+  return { design, setDesign, chooseDesign };
+}

package/src/components/tool/hooks/use-desktop.ts

@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useState } from "react";
+import { desktop, runningServices, type DesktopInfo, type Invoke, type LabLive, type Snapshot, type SuspendedLink } from "@/lib/tool/desktop";
+import { autoStarts } from "@/lib/tool/storage";
+
+/** The desktop app's side of the editor: running the lab on this machine (none in a browser). */
+
+export type RunState = "stopped" | "starting" | "running" | "stopping";
+
+/** The app's commands (null in a browser), what the app says about itself, and the lab's run state. */
+export function useDesktopState() {
+  const [invoke] = useState(desktop);
+  const [info, setInfo] = useState<DesktopInfo | null>(null);
+  const [run, setRun] = useState<RunState>("stopped");
+  const [update, setUpdate] = useState<string | null>(null);
+  const [updating, setUpdating] = useState(false);
+  return { invoke, info, setInfo, run, setRun, update, setUpdate, updating, setUpdating };
+}
+
+export type DesktopState = ReturnType<typeof useDesktopState>;
+
+/**
+ * The running lab now (desktop): its machines' states and their ports, read from them, its
+ * machines' snapshots, and the links cut. Read again every 3 seconds while it runs.
+ */
+export function useLiveLab(invoke: Invoke | null, labName: string, run: RunState) {
+  const [machineStates, setMachineStates] = useState<Record<string, string>>({});
+  const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
+  const [links, setLinks] = useState<SuspendedLink[]>([]);
+  const [live, setLive] = useState<LabLive | null>(null);
+  const refreshStates = useCallback(async () => {
+    if (!invoke) return;
+    try {
+      const now = await invoke<LabLive | null>("lab_live", { name: labName });
+      setLive(now);
+      setMachineStates(Object.fromEntries(Object.entries(now?.machines ?? {}).map(([m, l]) => [m, l.state])));
+      setSnapshots(await invoke<Snapshot[]>("snapshot_list", { name: labName }));
+      setLinks(await invoke<SuspendedLink[]>("link_list", { name: labName }));
+    } catch {
+      setMachineStates({});
+      setLive(null);
+    }
+  }, [invoke, labName]);
+  useEffect(() => {
+    if (run !== "running") return;
+    queueMicrotask(() => void refreshStates());
+    const timer = setInterval(() => void refreshStates(), 3000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [run, refreshStates]);
+  return { machineStates, snapshots, links, setLinks, live, setLive, refreshStates };
+}
+
+export type LiveLab = ReturnType<typeof useLiveLab>;
+
+/** The Run window's state and its log. */
+export function useRunPanel() {
+  const [runOpen, setRunOpen] = useState(false);
+  const [runLog, setRunLog] = useState("");
+  return { runOpen, setRunOpen, runLog, setRunLog };
+}
+
+/** Auto-start (desktop): this lab starts when the app opens on it, once the engine has its spec. */
+export function useAutoStart(invoke: Invoke | null, labName: string) {
+  const [autoStart, setAutoStart] = useState(false);
+  const [autoStartPending, setAutoStartPending] = useState(false);
+  useEffect(() => {
+    if (invoke)
+      queueMicrotask(() => {
+        setAutoStart(autoStarts(labName));
+      });
+  }, [invoke, labName]);
+  return { autoStart, setAutoStart, autoStartPending, setAutoStartPending };
+}
+
+/**
+ * On opening: what the app says about itself, whether a newer release is out (signed; from
+ * GitHub's latest release), and whether the lab still runs from before the app was reopened. If
+ * not, and it is set to, it starts.
+ */
+export function useDesktopStartup(state: DesktopState, initialName: string, setAutoStartPending: (pending: boolean) => void): void {
+  const { invoke, setInfo, setUpdate, setRun } = state;
+  useEffect(() => {
+    if (!invoke) return;
+    invoke<DesktopInfo>("desktop_info").then(setInfo, () => undefined);
+    invoke<{ version: string } | null>("update_check").then(
+      (u) => {
+        if (u) setUpdate(u.version);
+      },
+      () => undefined,
+    );
+    invoke<string>("lab_status", { name: initialName }).then(
+      (ps) => {
+        if (runningServices(ps) > 0) setRun("running");
+        else if (autoStarts(initialName)) setAutoStartPending(true);
+      },
+      () => undefined,
+    );
+  }, [invoke, initialName, setInfo, setUpdate, setRun, setAutoStartPending]);
+}

package/src/components/tool/hooks/use-devices.ts

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from "react";
+import { allPresets, deviceBlocks } from "@/lib/tool/blocks";
+import type { MachineData } from "@/lib/tool/model";
+import { deviceFrom, type Preset } from "@/lib/tool/presets";
+import { loadBlockChoices, loadDevices, saveBlockChoices, saveDevices } from "@/lib/tool/storage";
+import type { EditorText } from "@/lib/tool/text";
+import type { Tools } from "./use-tools";
+
+/**
+ * Devices saved from the canvas, in this browser (loaded after mount: no localStorage on the
+ * server), and the toolbar's blocks, each placing the kind picked last.
+ */
+export function useDevices(tools: Tools, setToast: (message: string) => void, t: EditorText) {
+  const [myDevices, setMyDevices] = useState<Preset[]>([]);
+  useEffect(() => {
+    queueMicrotask(() => {
+      setMyDevices(loadDevices());
+    });
+  }, []);
+  const presets = useMemo(() => allPresets(myDevices), [myDevices]);
+  const blocks = useMemo(() => deviceBlocks(presets, myDevices, t), [presets, myDevices, t]);
+  const [blockChoice, setBlockChoice] = useState<Record<string, string>>({});
+  useEffect(() => {
+    const saved = loadBlockChoices();
+    if (saved)
+      queueMicrotask(() => {
+        setBlockChoice(saved);
+      });
+  }, []);
+  const keep = (list: Preset[]) => {
+    setMyDevices(list);
+    saveDevices(list);
+  };
+  return {
+    presets,
+    blocks,
+    blockChoice,
+    pickFromBlock: (block: string, tool: string) => {
+      tools.pick(tool);
+      setBlockChoice((c) => {
+        const next = { ...c, [block]: tool };
+        saveBlockChoices(next);
+        return next;
+      });
+    },
+    /** Saving a machine again under the same name replaces that device. */
+    saveDevice: (m: MachineData) => {
+      const device = deviceFrom(m);
+      const name = device.label ?? "";
+      keep([...myDevices.filter((d) => d.label !== name), device]);
+      setToast(t.toasts.savedDevice(name));
+    },
+    forgetDevice: (id: string) => {
+      keep(myDevices.filter((d) => d.id !== id));
+      if (tools.activeTool === id) tools.setActiveTool(null);
+    },
+  };
+}