@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/toolbar.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Hand, MousePointer2, Network, StickyNote } from "lucide-react";
+import { LAN_TOOL, NOTE_TOOL, hintFor } from "@/lib/tool/blocks";
+import { cn } from "@/lib/utils";
+import { DeviceBlock } from "./device-block";
+import type { EditorModel } from "./hooks/use-editor";
+import type { Mode } from "./hooks/use-tools";
+
+const KEY = "absolute bottom-0 left-0.5 font-mono text-[9px] text-muted-foreground";
+const TOOL = "relative grid size-10 shrink-0 place-items-center rounded-lg transition-colors hover:bg-muted";
+const PICKED = "bg-brand-100 ring-1 ring-signal hover:bg-brand-100 dark:bg-brand-950";
+
+const Separator = () => <span className="mx-1 h-6 w-px shrink-0 bg-border" aria-hidden />;
+
+/** Hand and selection, Excalidraw's two modes. */
+function ModeButtons({ e }: { e: EditorModel }) {
+  const t = e.t.toolbar;
+  const { tools } = e;
+  const modes: [Mode, typeof Hand, string, string][] = [
+    ["hand", Hand, t.hand, "H"],
+    ["select", MousePointer2, t.select, "V"],
+  ];
+  return modes.map(([m, Icon, label, key]) => {
+    const on = tools.mode === m && !tools.activeTool;
+    return (
+      <button
+        key={m}
+        type="button"
+        onClick={() => { tools.setModeOnly(m); }}
+        aria-pressed={on}
+        aria-label={label}
+        title={`${label} · ${key}`}
+        className={cn(TOOL, on && "bg-brand-100 text-brand-700 hover:bg-brand-100 dark:bg-brand-950 dark:text-brand-300")}
+      >
+        <Icon className="size-[18px]" aria-hidden />
+        <span className={KEY}>{key}</span>
+      </button>
+    );
+  });
+}
+
+/** A tool of its own (a LAN, a note): picked, it is the next thing a click places. */
+function ToolButton({ e, tool, label, title, letter, children }: { e: EditorModel; tool: string; label: string; title: string; letter: string; children: ReactNode }) {
+  const { tools } = e;
+  return (
+    <button
+      type="button"
+      onClick={() => { tools.pick(tool); }}
+      aria-pressed={tools.activeTool === tool}
+      aria-label={label}
+      title={`${title} · ${letter}`}
+      className={cn(TOOL, tools.activeTool === tool && PICKED)}
+    >
+      {children}
+      <span className={KEY}>{letter}</span>
+    </button>
+  );
+}
+
+/** The blocks from `from` to `to` (the network ones, then the machines). */
+function Blocks({ e, from, to }: { e: EditorModel; from: number; to?: number }) {
+  const { devices, tools } = e;
+  return devices.blocks.slice(from, to).map((b) => (
+    <DeviceBlock key={b.id} block={b} choice={devices.blockChoice[b.id]} active={tools.activeTool} onPick={(tool) => { devices.pickFromBlock(b.id, tool); }} onForget={devices.forgetDevice} />
+  ));
+}
+
+/** Top center: the devices, grouped as network, containers, VMs; the line under it says what a click does. */
+export function Toolbar({ e }: { e: EditorModel }) {
+  const t = e.t;
+  const { tools, lab } = e;
+  const hint = hintFor(tools.activeTool, e.tool?.label, { hand: tools.mode === "hand", nodes: lab.nodes.length, edges: lab.edges.length }, t);
+  return (
+    <div className="pointer-events-none absolute inset-x-0 top-3 z-10 flex flex-col items-center gap-2 px-16 max-sm:items-start max-sm:pl-16">
+      <div role="toolbar" aria-label={t.toolbar.devices} className="pointer-events-auto flex max-w-full items-center gap-0.5 overflow-x-auto rounded-xl border bg-popover p-1 shadow-[0_4px_20px_-6px_rgb(0_0_0/0.15)]">
+        <ModeButtons e={e} />
+        <Separator />
+        {/* The devices as elementary blocks: a LAN, a switch, a router, a firewall, a
+            container, a VM (and the devices saved from the canvas). A block places the kind
+            picked last; its arrow lists the kinds. */}
+        <div className="flex items-center gap-0.5">
+          <ToolButton e={e} tool={LAN_TOOL} label={t.toolbar.lan} title={t.toolbar.lanTitle} letter="L">
+            <span className="grid size-8 place-items-center rounded-md border border-dashed border-foreground/40 bg-pastel-blue">
+              <Network className="size-4" aria-hidden />
+            </span>
+          </ToolButton>
+          <Blocks e={e} from={0} to={3} />
+        </div>
+        <Separator />
+        <div className="flex items-center gap-0.5">
+          <Blocks e={e} from={3} />
+        </div>
+        <div className="flex items-center gap-0.5">
+          <Separator />
+          <ToolButton e={e} tool={NOTE_TOOL} label={t.toolbar.note} title={t.toolbar.noteTitle} letter="T">
+            <StickyNote className="size-5" />
+          </ToolButton>
+        </div>
+      </div>
+      {/* On the empty canvas the welcome's handwritten hints say it instead. */}
+      {(!e.empty || tools.activeTool) && <p className="pointer-events-none hidden text-center text-xs text-muted-foreground sm:block">{hint}</p>}
+    </div>
+  );
+}

package/src/components/tool/top-bars.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { CircleAlert, CircleCheck, Download, Play, Square } from "lucide-react";
+import { vlanExample } from "@/lib/tool/examples";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { EditorMenu } from "./editor-menu";
+import { copyShareLink } from "./hooks/use-shared-link";
+import type { EditorModel } from "./hooks/use-editor";
+
+/** Top left: the menu, and where the lab is saved. */
+export function TopLeft({ e, onImportGns3 }: { e: EditorModel; onImportGns3: () => void }) {
+  const { projects, actions, lab, design, t } = e;
+  const { proj } = projects;
+  const share = () => copyShareLink({ name: lab.labName, nodes: lab.nodes, edges: lab.edges, design: design.design }, e.lang, e.setToast, t);
+  const projectActions = projects.signedIn ? { onSave: () => void proj.save(), onSaveAs: () => void projects.saveAs(), onOpen: () => { projects.setProjectsOpen(true); } } : null;
+  return (
+    <div className="absolute top-3 left-3 z-10 flex items-center gap-2">
+      <EditorMenu
+        lang={e.lang}
+        onExample={() => { actions.loadExample(); }}
+        onVlanExample={() => { actions.loadExample(vlanExample); }}
+        onShare={() => void share()}
+        onImportGns3={onImportGns3}
+        onClear={actions.clearLab}
+        onFit={() => void e.flow.fitView({ padding: 0.4, duration: 300 })}
+        canClear={!e.empty}
+        design={design.design}
+        onDesign={design.chooseDesign}
+        accounts={e.accounts}
+        projects={projectActions}
+      />
+      {projects.signedIn && proj.project && (
+        <span role="status" className={cn("pointer-events-none max-w-56 truncate rounded-md px-1.5 text-xs text-muted-foreground max-sm:hidden", proj.state === "error" && "text-destructive")}>
+          {t.projects.status[proj.state](proj.project.name)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** The lab's status: valid, or how many things to fix (the engine still loading). */
+function StatusButton({ e }: { e: EditorModel }) {
+  const { issues, t } = e;
+  const label = !e.engine ? t.status.loading : issues.length ? t.status.toFix(issues.length) : t.status.valid;
+  return (
+    <button type="button" onClick={() => { e.setStatusOpen((o) => !o); }} className={cn("flex h-9 items-center gap-1.5 rounded-lg border bg-popover px-3 text-xs font-medium shadow-sm", issues.length ? "text-warning" : "text-success")}>
+      {issues.length ? <CircleAlert className="size-4" /> : <CircleCheck className="size-4" />}
+      <span className="max-sm:sr-only">{label}</span>
+    </button>
+  );
+}
+
+/** Desktop app: run the lab on this machine, or stop it. */
+function RunButton({ e }: { e: EditorModel }) {
+  const { t, hasVms } = e;
+  const { run, info } = e.desk.state;
+  if (run === "running" || run === "stopping") {
+    return (
+      <Button variant="outline" onClick={() => void e.run.stopLab()} disabled={run === "stopping"} className="h-9 bg-popover shadow-sm">
+        <Square data-icon="inline-start" /> {run === "stopping" ? t.run.stopping : t.run.stop}
+      </Button>
+    );
+  }
+  const vagrant = !!info?.vagrant;
+  return (
+    <Button
+      variant="outline"
+      onClick={() => void e.run.runLab()}
+      disabled={run === "starting" || !e.plan?.ok || e.issues.length > 0 || e.empty || (hasVms && !vagrant)}
+      title={hasVms ? (vagrant ? t.run.runVmsTitle : t.run.vmsTitle) : t.run.runTitle}
+      className="h-9 bg-popover shadow-sm"
+    >
+      <Play data-icon="inline-start" /> {run === "starting" ? t.run.starting : t.run.run}
+    </Button>
+  );
+}
+
+/** Top right: the lab's status, Run (desktop app), and Export. */
+export function TopRight({ e }: { e: EditorModel }) {
+  return (
+    <div className="absolute top-3 right-3 z-10 flex items-center gap-2">
+      {!e.empty && <StatusButton e={e} />}
+      {e.invoke && <RunButton e={e} />}
+      <Button onClick={() => { e.setExportOpen((o) => !o); }} disabled={!e.engine || e.empty} className="h-9 shadow-sm">
+        <Download data-icon="inline-start" /> {e.t.export}
+      </Button>
+    </div>
+  );
+}

package/src/components/tool/windows/conditions-fields.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { withCondition } from "@/lib/tool/conditions";
+import type { LinkConditions } from "@/lib/tool/model";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { field } from "./fields";
+
+/** How a cable or a LAN behaves: four optional numbers (empty: none). */
+export function ConditionsFields({ value, onChange }: { value: LinkConditions | undefined; onChange: (tc: LinkConditions | undefined) => void }) {
+  const t = useText().windows.conditions;
+  const fields: [keyof LinkConditions, string, number][] = [
+    ["delay", t.delay, 1],
+    ["jitter", t.jitter, 1],
+    ["loss", t.loss, 0.1],
+    ["rate", t.rate, 1],
+  ];
+  return (
+    <fieldset className="flex flex-col gap-2">
+      <legend className="mb-1 text-muted-foreground">{t.title}</legend>
+      <div className="grid grid-cols-2 gap-2">
+        {fields.map(([key, label, step]) => (
+          <label key={key} className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground">{label}</span>
+            <input
+              type="number"
+              min={0}
+              step={step}
+              inputMode="decimal"
+              className={cn(field, "font-mono")}
+              value={value?.[key] ?? ""}
+              disabled={key === "jitter" && !value?.delay}
+              onChange={(e) => {
+                onChange(withCondition(value, key, e.target.value));
+              }}
+            />
+          </label>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">{t.hint}</p>
+    </fieldset>
+  );
+}

package/src/components/tool/windows/editor-windows.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { cleanName } from "@/lib/tool/model";
+import { ExportPanel } from "../export/export-panel";
+import { FloatingWindow } from "../floating-window";
+import type { EditorModel } from "../hooks/use-editor";
+import { ProjectsList } from "../projects-list";
+import { RunWindow, SelectionWindow, StatusWindow } from "./lab-windows";
+import { CableWindow, LanWindow, MachineWindow } from "./selected-windows";
+
+/** The user's projects (signed in): open one, or one of its earlier versions. */
+function ProjectsWindow({ e }: { e: EditorModel }) {
+  const { projects } = e;
+  return (
+    <FloatingWindow title={e.t.projects.windowTitle} side="left" width={340} onClose={() => { projects.setProjectsOpen(false); }}>
+      <div className="p-4">
+        <ProjectsList
+          current={projects.proj.project}
+          onOpen={(p, d) => {
+            projects.openProject(p, d);
+            projects.setProjectsOpen(false);
+          }}
+          onOpenVersion={(d) => { projects.openDraft(d); }}
+          onDeleted={(id) => {
+            if (projects.proj.project?.id === id) projects.proj.detach();
+          }}
+        />
+      </div>
+    </FloatingWindow>
+  );
+}
+
+/** Export: the lab's name, its zip and isoloom.yml, and where it runs. */
+function ExportWindow({ e }: { e: EditorModel }) {
+  const { plan, downloads, lab } = e;
+  return (
+    <FloatingWindow title={e.t.export} side="right" width={420} onClose={() => { e.setExportOpen(false); }}>
+      {downloads.downloadError && (
+        <p role="alert" className="px-4 pt-4 text-sm text-destructive">
+          {downloads.downloadError}
+        </p>
+      )}
+      <ExportPanel
+        labName={lab.labName}
+        onLabNameChange={(n) => { lab.setLabName(cleanName(n)); }}
+        mixed={e.mixed}
+        spec={plan?.isoloom_yml ?? null}
+        files={plan?.ok ? plan.files : []}
+        issues={e.issues}
+        onDownloadAll={downloads.downloadAll}
+        onDownloadSpec={downloads.downloadSpec}
+        onDownloadTarget={downloads.downloadTarget}
+      />
+    </FloatingWindow>
+  );
+}
+
+/** The windows floating over the canvas: what is selected, projects, the lab's status, Run, Export. */
+export function EditorWindows({ e }: { e: EditorModel }) {
+  const { selection, empty } = e;
+  return (
+    <>
+      {selection.machine && <MachineWindow key={`m-${selection.machine.id}`} e={e} node={selection.machine} />}
+      {selection.lan && <LanWindow key={`l-${selection.lan.id}`} e={e} lan={selection.lan} />}
+      {selection.edge?.data && <CableWindow key={`c-${selection.edge.id}`} e={e} edge={selection.edge} data={selection.edge.data} />}
+      {e.projects.projectsOpen && <ProjectsWindow e={e} />}
+      {selection.count > 1 && <SelectionWindow e={e} />}
+      {e.statusOpen && !empty && <StatusWindow e={e} />}
+      {e.invoke && e.desk.panel.runOpen && <RunWindow e={e} />}
+      {e.exportOpen && !empty && <ExportWindow e={e} />}
+    </>
+  );
+}

package/src/components/tool/windows/fields.ts

@@ -0,0 +1,6 @@
+/** A text field in the editor's windows. */
+export const field =
+  "h-8 w-full rounded-md border border-input bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+/** A multi-line field (provisioning steps, an appliance's configuration). */
+export const area = "w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";

package/src/components/tool/windows/lab-status.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { machineStatus, type LabLive, type MachineLive, type Status, type SuspendedLink } from "@/lib/tool/desktop";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+
+const DOT: Record<Status, string> = { up: "bg-success", starting: "bg-warning", unhealthy: "bg-destructive", down: "bg-muted-foreground/50" };
+
+type Port = LabLive["ports"][number];
+
+/** A port of a running machine: its network (and interface), green when up, struck through when down. */
+function PortChip({ p, cut }: { p: Port; cut: boolean }) {
+  const t = useText().canvas.live;
+  const title = p.up === null ? t.portUnknown : p.up ? t.portUp : cut ? t.cable.cut : t.portDown;
+  return (
+    <span
+      title={title}
+      className={cn("rounded-sm border px-1 font-mono text-[10px]", p.up === true && "border-success/40 text-success", p.up === false && "border-destructive/40 text-destructive line-through", p.up === null && "text-muted-foreground")}
+    >
+      {p.network}
+      {p.interface ? ` ${p.interface}` : ""}
+    </span>
+  );
+}
+
+/** One machine now: its state (and health), then its ports. */
+function MachineLine({ name, l, live, cut }: { name: string; l: MachineLive; live: LabLive; cut: SuspendedLink[] }) {
+  const t = useText();
+  const status = machineStatus(l);
+  return (
+    <li className="flex flex-col gap-0.5">
+      <span className="flex items-center gap-1.5">
+        <span className={cn("size-2 shrink-0 rounded-full", DOT[status])} aria-hidden />
+        <span className="font-mono font-medium">{name}</span>
+        <span className="text-muted-foreground">
+          {t.canvas.live[status]}
+          {l.health && status !== "unhealthy" ? ` · ${l.health}` : ""}
+        </span>
+      </span>
+      <span className="flex flex-wrap gap-1 pl-3.5">
+        {live.ports
+          .filter((p) => p.machine === name)
+          .map((p) => (
+            <PortChip key={p.network} p={p} cut={cut.some((c) => c.machine === name && c.network === p.network)} />
+          ))}
+      </span>
+    </li>
+  );
+}
+
+/** Desktop only: the running lab now, machine by machine, with each one's ports. */
+export function LabStatus({ live, cut }: { live: LabLive; cut: SuspendedLink[] }) {
+  const t = useText();
+  const machines = Object.entries(live.machines);
+  const up = machines.filter(([, l]) => machineStatus(l) === "up").length;
+  return (
+    <section className="flex flex-col gap-2">
+      <h3 className="text-xs font-medium text-muted-foreground">
+        {t.run.statusTitle(up, machines.length)} · {live.probed ? t.run.probed : t.run.inferred}
+      </h3>
+      <ul className="flex max-h-64 flex-col gap-1 overflow-auto rounded-md border bg-surface p-2 text-xs">
+        {machines.map(([name, l]) => (
+          <MachineLine key={name} name={name} l={l} live={live} cut={cut} />
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/components/tool/windows/lab-windows.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { Trash2 } from "lucide-react";
+import { isLan, isNote, isSwitch, nodeName, unselected } from "@/lib/tool/model";
+import { setAutoStarts } from "@/lib/tool/storage";
+import { Button } from "@/components/ui/button";
+import { FloatingWindow } from "../floating-window";
+import type { EditorModel } from "../hooks/use-editor";
+import { LabStatus } from "./lab-status";
+
+/** Several things selected: what they are, and deleting them all. */
+export function SelectionWindow({ e }: { e: EditorModel }) {
+  const { t, lab } = e;
+  const { selectedNodes, selectedEdges, count } = e.selection;
+  return (
+    <FloatingWindow
+      title={t.windows.selected(count)}
+      side="left"
+      width={280}
+      onClose={() => {
+        lab.setNodes((ns) => unselected(ns));
+        lab.setEdges((es) => unselected(es));
+      }}
+    >
+      <div className="flex flex-col gap-3 p-4 text-sm">
+        <p className="text-muted-foreground">{t.windows.selection(selectedNodes.length, selectedEdges.length)}</p>
+        {selectedNodes.length > 0 && (
+          <ul className="flex flex-wrap gap-1.5 font-mono text-xs">
+            {selectedNodes.map((n) => (
+              <li key={n.id} className="rounded-md border px-1.5 py-0.5">
+                {isNote(n) ? t.canvas.noteName : nodeName(n)}
+              </li>
+            ))}
+          </ul>
+        )}
+        <Button variant="outline" size="sm" onClick={() => void e.flow.deleteElements({ nodes: selectedNodes.map((n) => ({ id: n.id })), edges: selectedEdges.map((c) => ({ id: c.id })) })}>
+          <Trash2 data-icon="inline-start" /> {t.windows.deleteSelection(count)}
+        </Button>
+      </div>
+    </FloatingWindow>
+  );
+}
+
+/** The lab at a glance: how many containers, VMs, LANs and cables, and what to fix. */
+export function StatusWindow({ e }: { e: EditorModel }) {
+  const { t, lab, machines, issues } = e;
+  const vlans = new Set(lab.nodes.filter(isSwitch).flatMap((sw) => sw.data.vlans.map((v) => v.id)));
+  const counts = [
+    [t.lab.containers, machines.filter((n) => n.data.kind === "container").length],
+    [t.lab.vms, machines.filter((n) => n.data.kind === "vm").length],
+    [t.lab.lans, lab.nodes.filter(isLan).length + vlans.size],
+    [t.lab.cables, lab.edges.length],
+  ] as const;
+  return (
+    <FloatingWindow title={t.lab.title} side="right" width={320} onClose={() => { e.setStatusOpen(false); }}>
+      <div className="flex flex-col gap-4 p-4 text-sm">
+        {/* Equal columns, unless a label (Contenedores) needs more: then it widens, unbroken. */}
+        <div className="grid grid-cols-[repeat(4,minmax(min-content,1fr))] gap-2 text-center">
+          {counts.map(([label, count]) => (
+            <div key={label} className="rounded-lg border p-2">
+              <div className="font-heading text-lg font-semibold">{count}</div>
+              <div className="text-xs text-muted-foreground">{label}</div>
+            </div>
+          ))}
+        </div>
+        {issues.length > 0 ? (
+          <div>
+            <h3 className="mb-2 font-medium">{t.lab.toFix}</h3>
+            <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
+              {issues.map((p, i) => (
+                <li key={i}>{p}</li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <p className="text-success">{t.lab.valid}</p>
+        )}
+        <p className="text-xs text-muted-foreground">{t.lab.routing}</p>
+      </div>
+    </FloatingWindow>
+  );
+}
+
+/** What the Run window says the lab is doing. */
+function runLine(e: EditorModel): string {
+  const t = e.t;
+  switch (e.desk.state.run) {
+    case "running":
+      return `${t.run.running} ${t.machineRun.consoleHint}`;
+    case "starting":
+      return t.run.starting;
+    case "stopping":
+      return t.run.stopping;
+    case "stopped":
+      return t.run.stopped;
+  }
+}
+
+/** Desktop app: the lab running on this machine, its log, and starting it with the app. */
+export function RunWindow({ e }: { e: EditorModel }) {
+  const { t, desk, lab } = e;
+  const { info, run } = desk.state;
+  const { autoStart, setAutoStart } = desk.autoStart;
+  return (
+    <FloatingWindow title={t.run.window} side="right" width={420} onClose={() => { desk.panel.setRunOpen(false); }}>
+      <div className="flex flex-col gap-3 p-4 text-sm">
+        <p>{runLine(e)}</p>
+        {info && !info.docker && <p className="rounded-md bg-pastel-yellow p-2.5 text-xs">{t.run.noDocker}</p>}
+        {info && !info.live_capture && <p className="text-xs text-muted-foreground">{t.run.noLiveCapture(info.wireshark, info.labs.replace(/labs$/, "captures"))}</p>}
+        <label className="flex items-start gap-2 text-xs">
+          <input
+            type="checkbox"
+            className="mt-0.5"
+            checked={autoStart}
+            onChange={(ev) => {
+              setAutoStarts(lab.labName, ev.target.checked);
+              setAutoStart(ev.target.checked);
+            }}
+          />
+          <span>
+            {t.run.autoStart}
+            <span className="block text-muted-foreground">{t.run.autoStartNote}</span>
+          </span>
+        </label>
+        {run === "running" && desk.live.live && <LabStatus live={desk.live.live} cut={desk.live.links} />}
+        {desk.panel.runLog && <pre className="max-h-72 overflow-auto rounded-md border bg-surface p-3 font-mono text-xs whitespace-pre-wrap">{desk.panel.runLog}</pre>}
+      </div>
+    </FloatingWindow>
+  );
+}

package/src/components/tool/windows/link-controls.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Plug, Radio, Square, Unplug } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useText } from "../text";
+
+/** Desktop only: capture a LAN's or a cable's traffic while the lab runs. */
+export function CaptureControl({ network, running, file, capturing, onStart, onStop }: { network: string; running: boolean; file: string | null | undefined; capturing: boolean; onStart: () => void; onStop: () => void }) {
+  const t = useText().capture;
+  return (
+    <div className="flex flex-col gap-1.5 rounded-lg bg-pastel-violet p-3">
+      {capturing ? (
+        <>
+          <p className="flex items-center gap-1.5 font-medium">
+            <span className="size-2 animate-pulse rounded-full bg-destructive" aria-hidden /> {t.capturing(network)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {file ? (
+              <>
+                {t.writingTo} <span className="font-mono break-all">{file}</span>
+              </>
+            ) : (
+              t.live
+            )}
+          </p>
+          <Button size="sm" variant="outline" onClick={onStop}>
+            <Square data-icon="inline-start" /> {t.stop}
+          </Button>
+        </>
+      ) : (
+        <>
+          <Button size="sm" onClick={onStart} disabled={!running}>
+            <Radio data-icon="inline-start" /> {t.start}
+          </Button>
+          {!running && <p className="text-xs text-muted-foreground">{t.runFirst}</p>}
+        </>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Desktop only: suspend a link while the lab runs, as GNS3 does: a cable's ends (their ports,
+ * down) or, with `all`, every link of a LAN. `suspended` says so when it is.
+ */
+export function LinkControl({ running, busy, all = false, suspended, onSuspend, onResume }: { running: boolean; busy: boolean; all?: boolean; suspended: string | null; onSuspend: () => void; onResume: () => void }) {
+  const t = useText().link;
+  return (
+    <div className="flex flex-col gap-1.5 rounded-lg bg-pastel-violet p-3">
+      {suspended ? (
+        <>
+          <p className="flex items-center gap-1.5 font-medium">
+            <Unplug className="size-4" aria-hidden /> {suspended}
+          </p>
+          <Button size="sm" variant="outline" onClick={onResume} disabled={busy}>
+            <Plug data-icon="inline-start" /> {all ? t.resumeAll : t.resume}
+          </Button>
+        </>
+      ) : (
+        <>
+          <Button size="sm" variant="outline" onClick={onSuspend} disabled={!running || busy}>
+            <Unplug data-icon="inline-start" /> {all ? t.suspendAll : t.suspend}
+          </Button>
+          {!running && <p className="text-xs text-muted-foreground">{t.runFirst}</p>}
+        </>
+      )}
+    </div>
+  );
+}