@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/canvas/machine-node.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useContext, useMemo } from "react";
+import { Handle, Position, useReactFlow, type NodeProps } from "@xyflow/react";
+import { MACHINE_H, MACHINE_W, cleanName, type MachineData, type MachineNode, type Side } from "@/lib/tool/model";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { LiveContext, SidesContext } from "./contexts";
+import { DeviceIcon, accentFor, pastelFor, roleOf } from "./device-icon";
+import { InlineText } from "./inline-text";
+import { MachineAddresses, MachineFacts } from "./machine-addresses";
+import { RouterFaceplate } from "./router-node";
+import { Frame, gen, seedOf, useBusiness, useSketch } from "./sketch";
+import { StatusDot } from "./status-dot";
+import { useRemeasure } from "./use-measured-ports";
+
+/** A machine on the canvas: a hand-drawn box in its pastel, its logo and name, a socket per side. */
+export function MachineNodeView(props: NodeProps<MachineNode>) {
+  // A router you configure is drawn as its faceplate; the automatic one stays a box.
+  if (props.data.icon === "router" && props.data.kind !== "router") return <RouterFaceplate {...props} />;
+  return <MachineBox {...props} />;
+}
+
+const HANDLE = "!size-3 !border-2 !border-background !bg-foreground/50 transition-colors group-hover:!bg-signal";
+
+/**
+ * Where cables plug in. An appliance: its outside port (every cable when it stands alone; on a
+ * LAN's edge, the cables to the other network), facing out of the LAN, and on a LAN's edge its
+ * inside port. Another machine: its top and bottom.
+ */
+function MachineHandles({ appliance, side }: { appliance: boolean; side: Side | undefined }) {
+  if (!appliance) {
+    return (["top", "bottom"] as const).map((h) => (
+      <Handle key={h} id={h} type="source" position={h === "top" ? Position.Top : Position.Bottom} className="!size-2.5 !border-2 !border-background !bg-foreground/40 transition-colors group-hover:!bg-signal" />
+    ));
+  }
+  return (
+    <>
+      <Handle id="port" type="source" position={side === "bottom" ? Position.Bottom : Position.Top} className={HANDLE} />
+      {side && <Handle id="lan" type="source" position={side === "bottom" ? Position.Top : Position.Bottom} className={HANDLE} />}
+    </>
+  );
+}
+
+/** What the machine runs as, and whether it is the access machine (two pieces of text, as drawn). */
+function KindLine({ data }: { data: MachineData }) {
+  const t = useText().canvas;
+  return (
+    <>
+      {data.kind === "vm" ? t.vm : data.kind === "router" ? t.automatic : t.container}
+      {data.access ? ` · ${t.access}` : ""}
+    </>
+  );
+}
+
+/** Business: an asset card, its icon tinted, its name and role, then its facts. */
+function BusinessBody({ id, data, down }: { id: string; data: MachineData; down: boolean }) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  return (
+    <div className={cn("relative flex w-full flex-col items-start self-stretch px-2.5 pt-2.5", down && "opacity-50")}>
+      <div className="flex w-full min-w-0 items-center gap-2">
+        <DeviceIcon data={data} size="sm" accent={accentFor(data)} />
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-[12.5px] leading-tight font-semibold tracking-tight">
+            <InlineText label={t.machineName} value={data.name} clean={cleanName} onCommit={(name) => { updateNodeData(id, { name }); }} />
+          </div>
+          <div className="mt-0.5 truncate text-[10px] leading-tight text-muted-foreground">{t.roles[roleOf(data)]}</div>
+        </div>
+      </div>
+      <div className="mt-1.5 text-[8.5px] leading-none font-semibold tracking-wider text-muted-foreground/80 uppercase"><KindLine data={data} /></div>
+      <MachineFacts id={id} data={data} />
+    </div>
+  );
+}
+
+/** Sketch: the logo, the name, what it runs as. */
+function SketchBody({ id, data, down }: { id: string; data: MachineData; down: boolean }) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  return (
+    <div className={cn("relative flex flex-col items-center gap-1", down && "opacity-50")}>
+      <DeviceIcon data={data} />
+      <div className="max-w-[104px] truncate font-heading text-sm leading-tight font-semibold">
+        <InlineText label={t.machineName} value={data.name} clean={cleanName} onCommit={(name) => { updateNodeData(id, { name }); }} />
+      </div>
+      <div className="text-[10px] leading-none text-muted-foreground in-data-[design=business]:text-[9px] in-data-[design=business]:font-medium in-data-[design=business]:tracking-wider in-data-[design=business]:uppercase">
+        <KindLine data={data} />
+      </div>
+    </div>
+  );
+}
+
+function MachineBox({ id, data, selected }: NodeProps<MachineNode>) {
+  const side = useContext(SidesContext)[id];
+  // React Flow caches where handles are: re-measure when the port flips.
+  useRemeasure(id, side);
+  const sketch = useSketch();
+  const box = useMemo(
+    () => gen.rectangle(3, 3, MACHINE_W - 6, MACHINE_H - 6, { ...sketch, seed: seedOf(id), fill: "F", fillStyle: "solid", stroke: "S", strokeWidth: selected ? 2.25 : 1.4 }),
+    [id, selected, sketch],
+  );
+  const down = useContext(LiveContext)?.machines[data.name]?.status === "down";
+  const business = useBusiness();
+  return (
+    <div style={{ width: MACHINE_W, height: MACHINE_H }} className={cn("group relative flex flex-col items-center gap-1", business ? "justify-start" : "justify-center px-2")}>
+      <Frame drawable={box} fill={pastelFor(data)} selected={selected} dim={down} />
+      <StatusDot name={data.name} className="-top-1 -right-1" />
+      <MachineHandles appliance={data.icon === "router" || data.icon === "shield"} side={side} />
+      {business ? <BusinessBody id={id} data={data} down={down} /> : <SketchBody id={id} data={data} down={down} />}
+      {!business && <MachineAddresses id={id} data={data} />}
+    </div>
+  );
+}

package/src/components/tool/canvas/note-node.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { NodeResizer, NodeToolbar, Position, useReactFlow, type NodeProps } from "@xyflow/react";
+import { Circle, Square, Type, type LucideIcon } from "lucide-react";
+import { NOTE_COLORS, type NoteNode, type NoteShape } from "@/lib/tool/model";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { Sketch, gen, seedOf, useSketch } from "./sketch";
+
+/** When selected, a small bar picks the note's shape and color. */
+function NoteBar({ id, data, visible }: { id: string; data: NoteNode["data"]; visible: boolean }) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  const shapes: [NoteShape, LucideIcon, string][] = [
+    ["text", Type, t.textOnly],
+    ["rect", Square, t.box],
+    ["ellipse", Circle, t.ellipse],
+  ];
+  return (
+    <NodeToolbar isVisible={visible} position={Position.Top} className="flex items-center gap-1 rounded-lg border bg-popover p-1 shadow-sm">
+      {shapes.map(([shape, Icon, label]) => (
+        <button key={shape} type="button" title={label} aria-label={label} aria-pressed={data.shape === shape} onClick={() => { updateNodeData(id, { shape }); }} className={cn("grid size-7 place-items-center rounded-md hover:bg-muted", data.shape === shape && "bg-signal/15 text-signal")}>
+          <Icon className="size-4" />
+        </button>
+      ))}
+      <span className="mx-0.5 h-5 w-px bg-border" />
+      {NOTE_COLORS.map((color) => (
+        <button
+          key={color}
+          type="button"
+          title={t.colors[color]}
+          aria-label={t.color(t.colors[color])}
+          aria-pressed={data.color === color}
+          onClick={() => { updateNodeData(id, { color }); }}
+          className={cn("size-5 rounded-full border", data.color === color && "ring-2 ring-signal ring-offset-1 ring-offset-popover")}
+          style={{ background: `var(--pastel-${color})` }}
+        />
+      ))}
+    </NodeToolbar>
+  );
+}
+
+/** The note's text; double-click to write (Enter a new line; Escape or Ctrl/⌘ Enter is done). */
+function NoteText({ id, data, selected, draft, setDraft }: { id: string; data: NoteNode["data"]; selected: boolean; draft: string | null; setDraft: (d: string | null) => void }) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 flex items-center justify-center overflow-hidden p-3 font-heading text-base leading-snug text-foreground",
+        data.shape === "ellipse" && "px-[15%]",
+        data.shape === "text" && selected && "rounded-md outline-1 outline-signal/50 outline-dashed",
+      )}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        setDraft(data.text);
+      }}
+    >
+      {draft === null ? (
+        <p className={cn("w-full text-center break-words whitespace-pre-wrap", !data.text && "text-muted-foreground")}>{data.text || t.write}</p>
+      ) : (
+        <textarea
+          autoFocus
+          aria-label={t.note}
+          value={draft}
+          onChange={(e) => { setDraft(e.target.value); }}
+          onBlur={() => {
+            updateNodeData(id, { text: draft });
+            setDraft(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Escape" || (e.key === "Enter" && (e.metaKey || e.ctrlKey))) e.currentTarget.blur();
+          }}
+          className="nodrag nowheel size-full resize-none bg-transparent text-center outline-none"
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * A note: text on the canvas, bare or in a sketched box or ellipse, to explain the lab. It stays
+ * in the editor (the draft, share links) and never reaches isoloom.yml.
+ */
+export function NoteNodeView({ id, data, selected, width, height }: NodeProps<NoteNode>) {
+  const [draft, setDraft] = useState<string | null>(null);
+  const w = width ?? 200;
+  const h = height ?? 90;
+  const sketch = useSketch();
+  const outline = useMemo(() => {
+    const o = { ...sketch, seed: seedOf(id), fill: "F", fillStyle: "solid", stroke: "S", strokeWidth: selected ? 2 : 1.3 };
+    if (data.shape === "rect") return gen.rectangle(2, 2, w - 4, h - 4, o);
+    if (data.shape === "ellipse") return gen.ellipse(w / 2, h / 2, w - 4, h - 4, o);
+    return null;
+  }, [id, w, h, selected, data.shape, sketch]);
+  return (
+    <div style={{ width: w, height: h }} className="relative">
+      <NodeResizer isVisible={selected} minWidth={80} minHeight={40} lineClassName="!border-transparent" handleClassName="pointer-events-auto !z-10 !size-2.5 !rounded-sm !border-signal !bg-background" />
+      <NoteBar id={id} data={data} visible={selected && draft === null} />
+      {outline && (
+        <svg aria-hidden className="pointer-events-none absolute inset-0 overflow-visible" width={w} height={h}>
+          <Sketch drawable={outline} fill={`var(--pastel-${data.color})`} stroke={selected ? "var(--signal)" : "var(--foreground)"} />
+        </svg>
+      )}
+      <NoteText id={id} data={data} selected={selected} draft={draft} setDraft={setDraft} />
+    </div>
+  );
+}

package/src/components/tool/canvas/port-led.tsx

@@ -0,0 +1,21 @@
+/**
+ * Business: a socket's status light, in its VLAN's or network's color (a trunk's stripes), lit
+ * when something is assigned to the port; dark when nothing is.
+ */
+export function PortLed({ color }: { color: string | null }) {
+  return (
+    <>
+      {/* The socket's latch. */}
+      <span aria-hidden className="pointer-events-none absolute inset-x-[6px] top-[3px] h-[4px] rounded-t-[1px] border border-b-0 border-white/12" />
+      <span
+        aria-hidden
+        className="pointer-events-none absolute bottom-[3px] left-1/2 h-[3px] w-3 -translate-x-1/2 rounded-full"
+        style={color ? { background: color, boxShadow: color.startsWith("repeating") ? undefined : `0 0 5px ${color}` } : { background: "#2a3341" }}
+      />
+    </>
+  );
+}
+
+/** The look of a port's square: business sockets are dark and recessed. */
+export const PORT_BOX = "rounded-[3px] border border-foreground/40";
+export const BUSINESS_SOCKET = "rounded-[2px] border-black/80 shadow-[inset_0_1px_3px_rgb(0_0_0/0.7)]";

package/src/components/tool/canvas/router-node.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useContext, useMemo } from "react";
+import { Handle, Position, useReactFlow, type NodeProps } from "@xyflow/react";
+import { Router } from "lucide-react";
+import { APPLIANCES, ROUTER_H, ROUTER_PORTS, ROUTER_W, cleanName, routerPort, type MachineData, type MachineNode } from "@/lib/tool/model";
+import type { RouterPorts } from "@/lib/tool/router-ports";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { LiveContext, PortsContext, SidesContext } from "./contexts";
+import { InlineText } from "./inline-text";
+import { BUSINESS_SOCKET, PORT_BOX, PortLed } from "./port-led";
+import { Frame, gen, seedOf, useBusiness, useSketch } from "./sketch";
+import { StatusDot } from "./status-dot";
+import { usePortSides } from "./use-measured-ports";
+
+const RPORT = 24;
+const RPORT_GAP = 8;
+const RPAD = 14;
+
+/** The router's model under its name: a VM, a Cisco OS, or FRR. */
+function modelOf(data: MachineData, vm: string): string {
+  if (data.kind === "vm") return vm;
+  return data.appliance ? `Cisco ${APPLIANCES.find((x) => x.id === data.appliance)?.label.split(" (")[0] ?? ""}` : "FRR";
+}
+
+type Interface = RouterPorts["interfaces"][number];
+
+/** One port of the faceplate: its name, its square in its network's color, its handle. */
+function RouterPort({ id, data, port, i, view }: { id: string; data: MachineData; port: string; i: number; view: RouterPorts }) {
+  const t = useText().canvas;
+  const tl = useText().canvas.live;
+  const sides = useContext(SidesContext);
+  const live = useContext(LiveContext);
+  const business = useBusiness();
+  const x = RPAD + i * (RPORT + RPORT_GAP);
+  const color = view.colors[port];
+  const nets = view.interfaces.filter((f) => f.name === port || f.name.startsWith(`${port}.`));
+  // A port is down when one of its networks' ports is (unknown counts as up).
+  const down = nets.some((f) => live?.ports[`${data.name}/${f.network}`] === false);
+  const lines = nets.map((f: Interface) => `${f.name}: ${f.network}${f.ip ? ` · ${f.ip}` : ""}`).join("\n");
+  return (
+    <div>
+      <span className={cn("absolute top-[26px] w-6 text-center font-mono text-[9px] text-muted-foreground", business && "text-slate-400")} style={{ left: x }}>
+        {port}
+      </span>
+      <span
+        title={(down ? `${tl.portDown}\n` : "") + (nets.length ? lines : t.portFree(port))}
+        className={cn("absolute top-[38px]", PORT_BOX, business && BUSINESS_SOCKET, !business && down && "border-dashed border-destructive opacity-40")}
+        style={{ left: x, width: RPORT, height: 20, background: business ? "#0b1017" : (color ?? "var(--muted)") }}
+      >
+        {business && <PortLed color={down ? "#ef4444" : (color ?? null)} />}
+      </span>
+      <Handle
+        id={port}
+        type="source"
+        position={sides[`${id}:${port}`] === "top" ? Position.Top : Position.Bottom}
+        style={{ left: x + RPORT / 2 }}
+        className="!size-2.5 !border-2 !border-background !bg-foreground/50 transition-colors group-hover:!bg-signal"
+      />
+    </div>
+  );
+}
+
+/** Its interfaces, beside the faceplate: port, address, network. */
+function InterfaceList({ data, view }: { data: MachineData; view: RouterPorts }) {
+  const live = useContext(LiveContext);
+  return (
+    <ul className="pointer-events-none absolute top-0 left-full ml-3 flex w-max flex-col gap-0.5 font-mono text-[10px]">
+      {view.interfaces.map((f) => (
+        <li key={f.name} className={cn("flex items-center gap-1.5 rounded-sm bg-background/90 px-1", live?.ports[`${data.name}/${f.network}`] === false && "text-destructive line-through")}>
+          <span className="size-2 rounded-[2px]" style={{ background: f.color }} aria-hidden />
+          <span className="text-muted-foreground">{f.name}</span>
+          <span>{f.ip ?? "—"}</span>
+          <span className="text-muted-foreground">{f.network}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * A router you configure, drawn like a switch: its interfaces eth0–eth3, each in the color of the
+ * network plugged into it, and beside it the list of interfaces with their addresses. A cable
+ * plugs into one port; on a LAN's edge, eth0 is that LAN.
+ */
+export function RouterFaceplate({ id, data, selected }: NodeProps<MachineNode>) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  usePortSides(id);
+  const view = useContext(PortsContext)[id] ?? { colors: {}, interfaces: [] };
+  const sketch = useSketch();
+  const box = useMemo(
+    () => gen.rectangle(2, 2, ROUTER_W - 4, ROUTER_H - 4, { ...sketch, seed: seedOf(id), fill: "F", fillStyle: "solid", stroke: "S", strokeWidth: selected ? 2.25 : 1.4 }),
+    [id, selected, sketch],
+  );
+  const live = useContext(LiveContext);
+  const business = useBusiness();
+  return (
+    <div style={{ width: ROUTER_W, height: ROUTER_H }} className="group relative">
+      <StatusDot name={data.name} className="-top-1 -right-1" />
+      <Frame drawable={box} fill="var(--pastel-yellow)" selected={selected} dim={live?.machines[data.name]?.status === "down"} hardware={business} />
+      <div className={cn("absolute top-1.5 left-3.5 flex items-center gap-1.5 font-heading text-sm font-semibold", business && "left-5 text-[13px] text-white")}>
+        <Router className={cn("size-3.5", business && "text-amber-400")} aria-hidden />
+        <InlineText label={t.routerName} value={data.name} clean={cleanName} onCommit={(name) => { updateNodeData(id, { name }); }} />
+        <span className={cn("font-sans text-[10px] font-normal text-muted-foreground", business && "text-[9px] font-semibold tracking-wider text-slate-400 uppercase")}>{modelOf(data, t.vm)}</span>
+      </div>
+      {Array.from({ length: ROUTER_PORTS }, (_, i) => routerPort(i)).map((port, i) => (
+        <RouterPort key={port} id={id} data={data} port={port} i={i} view={view} />
+      ))}
+      <InterfaceList data={data} view={view} />
+    </div>
+  );
+}

package/src/components/tool/canvas/sketch.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import rough from "roughjs";
+import { cn } from "@/lib/utils";
+import type { Design } from "@/lib/tool/model";
+
+/**
+ * The whiteboard look: boxes and cables drawn by rough.js (the library behind Excalidraw), kept
+ * gentle so the diagram stays clear. Each shape has a fixed seed, so its wobble doesn't change
+ * from one render to the next.
+ */
+export const gen = rough.generator();
+export const SKETCH = { roughness: 1.15, bowing: 1 };
+
+/**
+ * The canvas's look: the hand-drawn sketch (default), or business: crisp single lines, the plain
+ * sans, muted fills, for a diagram that goes into a report. The fonts and colors switch through
+ * CSS (`data-design` on the canvas); the strokes switch here.
+ */
+export const DesignContext = createContext<Design>("sketch");
+const CRISP = { roughness: 0, bowing: 0, disableMultiStroke: true, disableMultiStrokeFill: true, preserveVertices: true };
+
+/** The stroke options for this design (rough.js draws both: at roughness 0 a line is straight). */
+export function useSketch() {
+  return useContext(DesignContext) === "business" ? CRISP : SKETCH;
+}
+
+/** Whether the canvas is in the business look. */
+export function useBusiness(): boolean {
+  return useContext(DesignContext) === "business";
+}
+
+export function seedOf(id: string): number {
+  let h = 7;
+  for (const ch of id) h = (h * 31 + ch.charCodeAt(0)) % 2147483647;
+  return h || 1;
+}
+
+export type Drawable = ReturnType<typeof gen.rectangle>;
+
+/** rough.js output as SVG paths; "F" and "S" stand for the fill and stroke we style with CSS. */
+export function Sketch({
+  drawable,
+  fill,
+  stroke,
+  opacity = 1,
+  dash,
+}: {
+  drawable: Drawable;
+  fill?: string;
+  stroke: string;
+  opacity?: number;
+  /** rough.js returns the path only: a dash pattern has to be applied here. */
+  dash?: string;
+}) {
+  return (
+    <>
+      {gen.toPaths(drawable).map((p, i) => (
+        <path
+          key={i}
+          d={p.d}
+          style={{
+            fill: p.fill === "F" && fill ? fill : "none",
+            stroke: p.stroke === "S" ? stroke : "none",
+            strokeWidth: p.strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeDasharray: p.stroke === "S" ? dash : undefined,
+            opacity,
+          }}
+        />
+      ))}
+    </>
+  );
+}
+
+interface FrameProps {
+  drawable: Drawable;
+  fill: string;
+  selected: boolean;
+  dim?: boolean;
+  /** Business: network equipment, drawn as a dark faceplate instead of a card. */
+  hardware?: boolean;
+}
+
+/** Business, network equipment: a dark faceplate with a screw at each end (its rack ears). */
+function Faceplate({ selected, dim }: { selected: boolean; dim: boolean }) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-md border border-black/70 shadow-[inset_0_1px_0_rgb(255_255_255/0.09),0_1px_2px_rgb(15_23_42/0.25),0_10px_24px_-12px_rgb(15_23_42/0.55)]",
+        selected && "ring-2 ring-signal ring-offset-2 ring-offset-background",
+        dim && "opacity-55 saturate-0",
+      )}
+      style={{ background: "linear-gradient(180deg, #2c3646 0%, #1b2230 100%)" }}
+    >
+      {["left-1.5", "right-1.5"].map((side) => (
+        <span key={side} className={cn("absolute top-1/2 size-[7px] -translate-y-1/2 rounded-full bg-[#0e131b] ring-1 ring-white/15", side)} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * A node's frame. Sketch: the hand-drawn shape in its pastel. Business: a card, as in a network
+ * diagram tool: rounded corners, a hairline border, a soft shadow (or, for network equipment, a
+ * dark faceplate).
+ */
+export function Frame({ drawable, fill, selected, dim = false, hardware = false }: FrameProps) {
+  if (!useBusiness()) {
+    return (
+      <svg aria-hidden className={cn("pointer-events-none absolute inset-0 overflow-visible", dim && "opacity-40")} width="100%" height="100%">
+        <Sketch drawable={drawable} fill={fill} stroke={selected ? "var(--signal)" : "var(--foreground)"} opacity={selected ? 1 : 0.8} />
+      </svg>
+    );
+  }
+  if (hardware) return <Faceplate selected={selected} dim={dim} />;
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-lg border bg-card shadow-[0_1px_2px_rgb(15_23_42/0.06),0_4px_12px_-6px_rgb(15_23_42/0.12)] transition-shadow",
+        selected ? "border-signal ring-2 ring-signal/25" : "border-border group-hover:border-foreground/25",
+        dim && "border-dashed bg-muted/60 shadow-none",
+      )}
+    ></div>
+  );
+}

package/src/components/tool/canvas/status-dot.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useContext } from "react";
+import type { Status } from "@/lib/tool/desktop";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { LiveContext } from "./contexts";
+
+const STATUS_DOT: Record<Status, string> = {
+  up: "bg-success",
+  starting: "bg-warning animate-pulse",
+  unhealthy: "bg-destructive",
+  down: "bg-muted-foreground/50",
+};
+
+/** A machine's status as a dot in its corner, its state in the tooltip. */
+export function StatusDot({ name, className }: { name: string; className?: string }) {
+  const t = useText().canvas.live;
+  const m = useContext(LiveContext)?.machines[name];
+  if (!m) return null;
+  return (
+    <span
+      role="img"
+      title={`${t[m.status]} · ${m.detail}`}
+      aria-label={t[m.status]}
+      className={cn("pointer-events-auto absolute z-10 size-3 rounded-full ring-2 ring-background", STATUS_DOT[m.status], className)}
+    />
+  );
+}

package/src/components/tool/canvas/switch-node.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useContext, useMemo } from "react";
+import { Handle, Position, useReactFlow, type NodeProps } from "@xyflow/react";
+import { Plus, X } from "lucide-react";
+import { SWITCH_H, SWITCH_PORTS, SWITCH_W, TRUNK, cleanName, type SwitchNode } from "@/lib/tool/model";
+import { addVlan, changeVlan, cyclePort, removeVlan, vlanNumber } from "@/lib/tool/switch-edit";
+import { trunkStripes, vlanColor, vlanName } from "@/lib/tool/vlans";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { SidesContext } from "./contexts";
+import { InlineText } from "./inline-text";
+import { BUSINESS_SOCKET, PORT_BOX, PortLed } from "./port-led";
+import { Frame, gen, seedOf, useBusiness, useSketch } from "./sketch";
+import { usePortSides } from "./use-measured-ports";
+
+const PORT = 24;
+const PORT_GAP = 6;
+const SW_PAD = 14;
+
+/** Where a port's square starts, from the switch's left. The trunk sits apart, after a gap. */
+function portX(i: number | typeof TRUNK): number {
+  return i === TRUNK ? SW_PAD + SWITCH_PORTS * (PORT + PORT_GAP) + 14 : SW_PAD + i * (PORT + PORT_GAP);
+}
+
+type SwitchData = SwitchNode["data"];
+
+/** A port's tooltip: what it carries, and that a click changes it (not on the T port). */
+function usePortTitle(data: SwitchData) {
+  const t = useText().canvas;
+  return (i: number | typeof TRUNK) => {
+    const mode = i === TRUNK ? TRUNK : data.ports[i];
+    const name = i === TRUNK ? "T" : t.port(i + 1);
+    if (mode === TRUNK) return `${name}: ${t.trunkCarries(data.vlans.map((v) => vlanName(v.id)).join(", ") || t.noVlan)}${i === TRUNK ? "" : ` ${t.clickToChange}`}`;
+    return `${name}: ${mode === null ? t.noVlan : vlanName(mode)} ${t.clickToChange}`;
+  };
+}
+
+/** One port: its number, its square in its VLAN's color (striped for a trunk), its handle. */
+function SwitchPort({ id, data, i, onCycle }: { id: string; data: SwitchData; i: number | typeof TRUNK; onCycle: (i: number) => void }) {
+  const t = useText().canvas;
+  const sides = useContext(SidesContext);
+  const business = useBusiness();
+  const title = usePortTitle(data);
+  const trunk = i === TRUNK;
+  const mode = trunk ? TRUNK : data.ports[i];
+  const vlan = typeof mode === "number" ? mode : null;
+  const color = mode === TRUNK ? trunkStripes(data.vlans) : vlan === null ? null : vlanColor(vlan);
+  const handle = trunk ? TRUNK : `p${String(i + 1)}`;
+  const x = portX(i);
+  return (
+    <div>
+      <span className={cn("absolute top-[26px] w-6 text-center font-mono text-[9px] text-muted-foreground", business && "text-slate-400")} style={{ left: x }}>
+        {trunk ? "T" : i + 1}
+      </span>
+      <button
+        type="button"
+        onClick={() => {
+          if (!trunk) onCycle(i);
+        }}
+        title={title(i)}
+        aria-label={trunk ? t.trunkPort : t.port(i + 1)}
+        className={cn("nodrag absolute top-[38px]", PORT_BOX, trunk ? "cursor-default" : "cursor-pointer hover:ring-2 hover:ring-signal", business && BUSINESS_SOCKET)}
+        style={{ left: x, width: PORT, height: 20, background: business ? "#0b1017" : (color ?? "var(--muted)") }}
+      >
+        {business && <PortLed color={color} />}
+      </button>
+      <Handle
+        id={handle}
+        type="source"
+        position={sides[`${id}:${handle}`] === "top" ? Position.Top : Position.Bottom}
+        style={{ left: x + PORT / 2 }}
+        className="!size-2.5 !border-2 !border-background !bg-foreground/50 transition-colors group-hover:!bg-signal"
+      />
+    </div>
+  );
+}
+
+/** The VLANs, beside the faceplate (cables leave from above and below it): double-click to edit, + to add, × to remove. */
+function VlanList({ id, data }: { id: string; data: SwitchData }) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  return (
+    <div className="nodrag absolute top-0 left-full ml-3 flex w-max flex-col items-start gap-1 text-[11px]">
+      {data.vlans.map((v) => (
+        <span key={v.id} className="flex items-center gap-1 rounded-md bg-background/90 pr-1">
+          <span className="size-2.5 rounded-[2px]" style={{ background: vlanColor(v.id) }} aria-hidden />
+          <span className="font-heading font-semibold">
+            vlan
+            <InlineText
+              label={t.vlanNumber}
+              value={String(v.id)}
+              clean={(x) => x.replace(/\D/g, "").slice(0, 4)}
+              onCommit={(x) => {
+                const n = vlanNumber(data, x);
+                if (n !== null) updateNodeData(id, changeVlan(data, v.id, { id: n }));
+              }}
+            />
+          </span>
+          <InlineText label={t.vlanBlock} value={v.cidr} clean={(x) => x.replace(/[^0-9./]/g, "")} onCommit={(cidr) => { updateNodeData(id, changeVlan(data, v.id, { cidr })); }} className="font-mono text-muted-foreground" />
+          <button type="button" onClick={() => { updateNodeData(id, removeVlan(data, v.id)); }} aria-label={t.remove(vlanName(v.id))} className="text-muted-foreground hover:text-foreground">
+            <X className="size-3" />
+          </button>
+        </span>
+      ))}
+      <button type="button" onClick={() => { updateNodeData(id, addVlan(data)); }} className="flex items-center gap-0.5 rounded-md px-1 text-muted-foreground hover:bg-muted hover:text-foreground">
+        <Plus className="size-3" /> VLAN
+      </button>
+    </div>
+  );
+}
+
+/**
+ * A switch, drawn as its faceplate: numbered access ports in their VLAN's color (click one to
+ * change its VLAN), and a trunk striped with every VLAN it carries. A cable plugs into a port.
+ * Its VLANs are listed under it: double-click to edit, + to add, × to remove.
+ */
+export function SwitchNodeView({ id, data, selected }: NodeProps<SwitchNode>) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  // Each port faces the device plugged into it: up when that device is above the switch.
+  usePortSides(id);
+  const sketch = useSketch();
+  const box = useMemo(
+    () => gen.rectangle(2, 2, SWITCH_W - 4, SWITCH_H - 4, { ...sketch, seed: seedOf(id), fill: "F", fillStyle: "solid", stroke: "S", strokeWidth: selected ? 2.25 : 1.4 }),
+    [id, selected, sketch],
+  );
+  const business = useBusiness();
+  const ports: (number | typeof TRUNK)[] = [...data.ports.map((_, i) => i), TRUNK];
+  return (
+    <div style={{ width: SWITCH_W, height: SWITCH_H }} className="group relative">
+      <Frame drawable={box} fill="var(--card)" selected={selected} hardware={business} />
+      <div className={cn("absolute top-1.5 left-3.5 flex items-baseline gap-2 font-heading text-sm font-semibold", business && "left-5 text-[13px] text-white")}>
+        <InlineText label={t.switchName} value={data.name} clean={cleanName} onCommit={(name) => { updateNodeData(id, { name }); }} />
+        {business && <span className="font-sans text-[9px] font-semibold tracking-wider text-slate-400 uppercase">{t.switchModel(data.ports.length)}</span>}
+      </div>
+      {ports.map((i) => (
+        <SwitchPort key={String(i)} id={id} data={data} i={i} onCycle={(port) => { updateNodeData(id, cyclePort(data, port)); }} />
+      ))}
+      <VlanList id={id} data={data} />
+    </div>
+  );
+}