cursedbelt 2.7.0 → 3.0.0

package/src/react/engine-studio/DiagnosticsPanel.tsx

@@ -1,100 +0,0 @@
-/**
- * The diagnostics panel — every diagnostic the compilation produced, in the
- * pipeline's own stable order, each one clickable back to what it is about.
- *
- * It shows warnings and infos too, not only the errors that block a save.
- * `capability-downgrade` never blocks (the machine you are drawing on is not a
- * defect in the design), but "your video tier will fall back to progressive on
- * this host" is exactly the thing an author needs to be told BEFORE they ship —
- * and the only place they will ever see it is here.
- */
-import type { StudioTarget, StudioVerification, TargetedDiagnostic } from '../../studio';
-import { cn } from '../lib/cn';
-import { ScrollArea } from '../components/ScrollArea';
-
-export interface DiagnosticsPanelProps {
-  verification: StudioVerification | null;
-  verifying: boolean;
-  onSelectTarget?: (target: StudioTarget) => void;
-  className?: string;
-}
-
-const TONE: Record<TargetedDiagnostic['severity'], string> = {
-  error: 'text-destructive',
-  warning: 'text-warning',
-  info: 'text-muted-foreground',
-};
-
-const locationOf = (target: StudioTarget): string => {
-  switch (target.kind) {
-    case 'feature':
-      return `${target.instanceId}.${target.feature}`;
-    case 'port':
-      return `${target.instanceId}:${target.port}`;
-    case 'instance':
-      return target.instanceId;
-    case 'connection':
-      return `connection ${target.index}`;
-    case 'engines':
-      return 'engines';
-    default:
-      return 'app';
-  }
-};
-
-export function DiagnosticsPanel({ verification, verifying, onSelectTarget, className }: DiagnosticsPanelProps) {
-  const diagnostics = verification?.diagnostics ?? [];
-  return (
-    <section className={cn('flex h-full flex-col', className)} data-cc-diagnostics=''>
-      <header className='flex items-center gap-2 border-b border-border px-3 py-2 text-sm'>
-        <span className='font-medium'>Diagnostics</span>
-        {verifying && (
-          <span className='text-xs text-muted-foreground' data-cc-diagnostics-verifying=''>
-            verifying…
-          </span>
-        )}
-        {!verifying && verification && (
-          <span className='text-xs text-muted-foreground'>
-            {verification.errorCount} error{verification.errorCount === 1 ? '' : 's'} ·{' '}
-            {verification.warningCount} warning{verification.warningCount === 1 ? '' : 's'} · through{' '}
-            {verification.lastStage}
-          </span>
-        )}
-      </header>
-
-      {verification?.failure && (
-        <p className='px-3 py-2 text-xs text-destructive' data-cc-diagnostics-failure=''>
-          The design could not be verified: {verification.failure}
-        </p>
-      )}
-
-      <ScrollArea className='flex-1' safeArea={false} space='none'>
-        <ul className='flex flex-col'>
-          {diagnostics.map((diagnostic) => (
-            <li key={`${diagnostic.code}:${locationOf(diagnostic.target)}:${diagnostic.message}`}>
-              <button
-                // guardrails-ignore no-raw-action-button: a presentational list-row that focuses the canvas on this diagnostic's target; no data mutation (same shape as KnowledgeStudioShell's master-list rows). A multi-line row does not fit Button's single-line control-height scale.
-                className='flex w-full flex-col gap-0.5 px-3 py-2 text-left hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent'
-                data-cc-diagnostic={diagnostic.code}
-                onClick={() => onSelectTarget?.(diagnostic.target)}
-                type='button'
-              >
-                <span className='flex items-baseline gap-2'>
-                  <span className={cn('text-xs font-medium', TONE[diagnostic.severity])}>{diagnostic.code}</span>
-                  <span className='truncate text-xs text-muted-foreground'>{locationOf(diagnostic.target)}</span>
-                </span>
-                <span className='text-xs'>{diagnostic.message}</span>
-                {diagnostic.fix && <span className='text-xs text-muted-foreground'>{diagnostic.fix}</span>}
-              </button>
-            </li>
-          ))}
-          {diagnostics.length === 0 && !verifying && (
-            <li className='px-3 py-2 text-xs text-muted-foreground' data-cc-diagnostics-clean=''>
-              No diagnostics.
-            </li>
-          )}
-        </ul>
-      </ScrollArea>
-    </section>
-  );
-}

package/src/react/engine-studio/EngineCanvas.tsx

@@ -1,532 +0,0 @@
-/**
- * The canvas: engine instances as nodes, `connections[]` as wires (03 §3).
- *
- * ## Why this is SVG and pointer events rather than a graph library
- *
- * The old builder pulls in `@xyflow/react` for its wiring view. That is a
- * reasonable dependency for an app; it is a bad one for cursedbelt, which every
- * generated app links. What this canvas actually needs is: absolutely-positioned
- * boxes, cubic bezier paths between them, and a pointer drag — about a hundred
- * lines, with no bundle cost imposed on apps that never open a studio.
- *
- * ## What the canvas refuses to draw
- *
- * Sockets come from the compiled manifest (`wiring.ts`), so a port switched off
- * by `enabledWhen` has no handle to grab. While a wire is being dragged, only
- * `compatibleInputs` land — the incompatible ones are dimmed and do not accept
- * the drop. An illegal wire is therefore unreachable rather than merely reported
- * afterwards, which is the difference between a builder that teaches the model
- * and one that quizzes you on it.
- *
- * ## Node size: auto-fit, then manual
- *
- * A node opens sized to its content (`fit-content`, measured with a
- * `ResizeObserver` so wires and sockets follow the real box), not at a fixed
- * constant — the owner's "plugins appear a fixed size; default big enough to see
- * all contents". The moment the author drags a resize handle, a size is stored
- * in the document (`resizeNode`) and that MANUAL box wins over the measurement
- * from then on. Both live in the layout, never the config, so neither a resize
- * nor an auto-fit dirties `app-config.json`.
- */
-import { X } from 'lucide-react';
-import { useCallback, useRef, useState } from 'react';
-import { IconButton } from '../components/IconButton';
-import type { EffectiveManifest } from '../../verify/types';
-import type { NodePosition, NodeSize, StudioDesign, StudioVerification, WirePoint } from '../../studio';
-import {
-  canWire,
-  DEFAULT_NODE_HEIGHT,
-  DEFAULT_NODE_WIDTH,
-  inputs,
-  MIN_NODE_HEIGHT,
-  MIN_NODE_WIDTH,
-  outputs,
-  resolvedPositions,
-} from '../../studio';
-import { useResizeObserver } from '../hooks/useResizeObserver';
-import { cn } from '../lib/cn';
-import { Tooltip } from '../components/Tooltip';
-
-export interface EngineCanvasProps {
-  design: StudioDesign;
-  /** The compiled manifest sockets are drawn from — the session's last good one,
-   *  so a mid-edit compile error does not blank the wires. */
-  manifest: EffectiveManifest | null;
-  verification: StudioVerification | null;
-  selectedId: string | null;
-  onSelect: (instanceId: string | null) => void;
-  onMove: (instanceId: string, position: NodePosition) => void;
-  /**
-   * Persist a MANUAL resize. `position` is present only when the gesture pulled a
-   * top/left edge, which moves the node's origin as it resizes; the host applies
-   * both as ONE undo step (see `EngineStudio`'s `resize:<id>` tag).
-   */
-  onResize: (instanceId: string, size: NodeSize, position?: NodePosition) => void;
-  onConnect: (from: string, to: string) => void;
-  onDisconnect: (index: number) => void;
-  className?: string;
-}
-
-const SOCKET_SPACING = 18;
-/** How high the first socket row sits below the node's top edge. */
-const SOCKET_TOP = 34;
-/** How wide the canvas lets an auto-fit node grow before it wraps its text. */
-const AUTOSIZE_MAX_WIDTH = 360;
-
-/** Which edges a resize gesture is pulling. */
-interface ResizeEdges {
-  n: boolean;
-  s: boolean;
-  e: boolean;
-  w: boolean;
-}
-
-/** One of the eight handles, with the cursor it shows and the edges it pulls. */
-const HANDLES: { key: string; edges: ResizeEdges; cursor: string; className: string }[] = [
-  { key: 'n', edges: { n: true, s: false, e: false, w: false }, cursor: 'ns-resize', className: 'inset-x-2 -top-1 h-2' },
-  { key: 's', edges: { n: false, s: true, e: false, w: false }, cursor: 'ns-resize', className: 'inset-x-2 -bottom-1 h-2' },
-  { key: 'e', edges: { n: false, s: false, e: true, w: false }, cursor: 'ew-resize', className: 'inset-y-2 -right-1 w-2' },
-  { key: 'w', edges: { n: false, s: false, e: false, w: true }, cursor: 'ew-resize', className: 'inset-y-2 -left-1 w-2' },
-  { key: 'ne', edges: { n: true, s: false, e: true, w: false }, cursor: 'nesw-resize', className: '-top-1 -right-1 size-3' },
-  { key: 'nw', edges: { n: true, s: false, e: false, w: true }, cursor: 'nwse-resize', className: '-top-1 -left-1 size-3' },
-  { key: 'se', edges: { n: false, s: true, e: true, w: false }, cursor: 'nwse-resize', className: '-bottom-1 -right-1 size-3' },
-  { key: 'sw', edges: { n: false, s: true, e: false, w: true }, cursor: 'nesw-resize', className: '-bottom-1 -left-1 size-3' },
-];
-
-interface DragState {
-  instanceId: string;
-  /** Pointer offset within the node, so the node does not jump to the cursor. */
-  dx: number;
-  dy: number;
-}
-
-interface ResizeState {
-  instanceId: string;
-  edges: ResizeEdges;
-  /** Pointer position, node origin and node box AT gesture start, in canvas units. */
-  startX: number;
-  startY: number;
-  startPos: NodePosition;
-  startSize: NodeSize;
-}
-
-/** Where a socket sits, in canvas coordinates — `width` is the node's own box,
- *  so a resized/auto-fit node's out-sockets land on its real right edge. */
-function socketAt(position: NodePosition, index: number, side: 'in' | 'out', width: number): NodePosition {
-  return {
-    x: position.x + (side === 'in' ? 0 : width),
-    y: position.y + SOCKET_TOP + index * SOCKET_SPACING,
-  };
-}
-
-const bendOf = (from: NodePosition, to: NodePosition): number => Math.max(40, Math.abs(to.x - from.x) / 2);
-
-/** A left-to-right cubic bezier — the standard node-graph wire. */
-function wirePath(from: NodePosition, to: NodePosition): string {
-  const bend = bendOf(from, to);
-  return `M ${from.x} ${from.y} C ${from.x + bend} ${from.y}, ${to.x - bend} ${to.y}, ${to.x} ${to.y}`;
-}
-
-/**
- * The curve's midpoint (the cubic at t=0.5), where the wire's delete control
- * sits. The control is a real HTML button rather than a click handler on the
- * path: a 2px curve is a hostile hit target with a mouse and unreachable with a
- * keyboard, and `role="button"` on an SVG element is a workaround for markup
- * that should just be a button.
- */
-function wireMidpoint(from: NodePosition, to: NodePosition): NodePosition {
-  const bend = bendOf(from, to);
-  return {
-    x: (from.x + 3 * (from.x + bend) + 3 * (to.x - bend) + to.x) / 8,
-    y: (from.y + 3 * from.y + 3 * to.y + to.y) / 8,
-  };
-}
-
-export function EngineCanvas({
-  design,
-  manifest,
-  verification,
-  selectedId,
-  onSelect,
-  onMove,
-  onResize,
-  onConnect,
-  onDisconnect,
-  className,
-}: EngineCanvasProps) {
-  const surface = useRef<HTMLDivElement>(null);
-  const [drag, setDrag] = useState<DragState | null>(null);
-  const [resize, setResize] = useState<ResizeState | null>(null);
-  const [wiring, setWiring] = useState<WirePoint | null>(null);
-  // Content sizes measured off the rendered nodes, keyed by id. Used ONLY where a
-  // node has no stored (manual) size — the auto-fit default. Never written to the
-  // document, so it costs no undo step and no re-verify.
-  const [autoSizes, setAutoSizes] = useState<Readonly<Record<string, NodeSize>>>({});
-
-  const positions = resolvedPositions(design);
-  const instances = design.config.instances ?? [];
-  const connections = design.config.connections ?? [];
-  const outs = manifest ? outputs(manifest) : [];
-  const ins = manifest ? inputs(manifest) : [];
-  const storedSizes = design.layout.sizes;
-
-  /** The node's effective box: a manual resize wins, else the measured content
-   *  fit, else the default constant (the headless fallback before measurement). */
-  const sizeOf = useCallback(
-    (id: string): NodeSize =>
-      storedSizes[id] ?? autoSizes[id] ?? { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT },
-    [storedSizes, autoSizes],
-  );
-
-  const reportAutoSize = useCallback((id: string, size: NodeSize) => {
-    setAutoSizes((prev) => {
-      const current = prev[id];
-      if (current && current.width === size.width && current.height === size.height) return prev;
-      return { ...prev, [id]: size };
-    });
-  }, []);
-
-  const socketsOf = (instanceId: string, side: 'in' | 'out'): WirePoint[] =>
-    (side === 'in' ? ins : outs).filter((point) => point.instanceId === instanceId);
-
-  const pointIn = useCallback((event: { clientX: number; clientY: number }): NodePosition => {
-    const box = surface.current?.getBoundingClientRect();
-    return { x: event.clientX - (box?.left ?? 0), y: event.clientY - (box?.top ?? 0) };
-  }, []);
-
-  const onPointerMove = (event: React.PointerEvent) => {
-    const at = pointIn(event);
-    if (resize) {
-      const { edges, startX, startY, startPos, startSize } = resize;
-      const dx = at.x - startX;
-      const dy = at.y - startY;
-      let x = startPos.x;
-      let y = startPos.y;
-      let width = startSize.width;
-      let height = startSize.height;
-      if (edges.e) width = startSize.width + dx;
-      if (edges.w) width = startSize.width - dx;
-      if (edges.s) height = startSize.height + dy;
-      if (edges.n) height = startSize.height - dy;
-      // Clamp to the readable floor. A west/north edge keeps the OPPOSITE edge
-      // pinned, so the origin only moves by the amount the box actually changed.
-      width = Math.max(MIN_NODE_WIDTH, width);
-      height = Math.max(MIN_NODE_HEIGHT, height);
-      if (edges.w) x = startPos.x + (startSize.width - width);
-      if (edges.n) y = startPos.y + (startSize.height - height);
-      const movesOrigin = edges.w || edges.n;
-      onResize(resize.instanceId, { width, height }, movesOrigin ? { x, y } : undefined);
-      return;
-    }
-    if (drag) onMove(drag.instanceId, { x: Math.round(at.x - drag.dx), y: Math.round(at.y - drag.dy) });
-  };
-
-  const endGestures = () => {
-    setDrag(null);
-    setResize(null);
-    // A wire drag that ends anywhere but on a socket is a cancel, not an error:
-    // the pointer-up handler on a socket runs first and clears this itself.
-    setWiring(null);
-  };
-
-  /** Can the wire currently being dragged land here? */
-  const landable = (candidate: WirePoint): boolean =>
-    wiring !== null && manifest !== null && canWire(manifest, wiring, candidate).ok;
-
-  /**
-   * Wires resolved to canvas geometry ONCE, so the decorative path and its
-   * delete button cannot disagree about where the wire is.
-   *
-   * A wire naming a node that is not on the canvas is skipped — the pipeline
-   * reports it as `unknown-connection-endpoint` and the diagnostics panel is
-   * where the author sees it. A wire onto a socket the manifest no longer has
-   * (a port switched off under it) falls back to the node's first row rather
-   * than vanishing: an invisible broken wire is one the author cannot remove.
-   */
-  const drawn = connections.flatMap((wire, index) => {
-    const fromInstance = wire.from.slice(0, wire.from.indexOf(':'));
-    const toInstance = wire.to.slice(0, wire.to.indexOf(':'));
-    const fromPosition = positions[fromInstance];
-    const toPosition = positions[toInstance];
-    if (!fromPosition || !toPosition) return [];
-    const fromIndex = socketsOf(fromInstance, 'out').findIndex((p) => p.endpoint === wire.from);
-    const toIndex = socketsOf(toInstance, 'in').findIndex((p) => p.endpoint === wire.to);
-    return [
-      {
-        wire,
-        index,
-        from: socketAt(fromPosition, Math.max(fromIndex, 0), 'out', sizeOf(fromInstance).width),
-        to: socketAt(toPosition, Math.max(toIndex, 0), 'in', sizeOf(toInstance).width),
-        broken: (verification?.byConnection.get(index) ?? []).some((d) => d.severity === 'error'),
-      },
-    ];
-  });
-
-  return (
-    <div
-      // guardrails-ignore no-raw-overflow: a pan-and-zoom canvas must own its own scroller — its children are absolutely positioned in canvas coordinates, which ScrollArea's flex-column (min-h-0/flex-1) body and trailing keyboard-inset spacer would reflow out from under them.
-      className={cn('relative h-full w-full overflow-auto bg-muted/30', className)}
-      data-cc-engine-canvas=''
-      onPointerLeave={endGestures}
-      onPointerMove={onPointerMove}
-      onPointerUp={endGestures}
-      ref={surface}
-    >
-      {/* Wires render UNDER the nodes so a socket is always clickable. The SVG
-          is decorative; each wire's affordance is the HTML button below it. */}
-      <svg
-        aria-hidden='true'
-        className='pointer-events-none absolute inset-0 h-full w-full overflow-visible'
-        data-cc-engine-wires=''
-      >
-        <title>Connections</title>
-        {drawn.map(({ wire, from, to, broken }) => (
-          <path
-            className={cn('fill-none stroke-2', broken ? 'stroke-destructive' : 'stroke-accent')}
-            d={wirePath(from, to)}
-            data-cc-wire={`${wire.from}→${wire.to}`}
-            data-cc-wire-broken={broken ? '' : undefined}
-            key={`${wire.from}->${wire.to}`}
-          />
-        ))}
-      </svg>
-
-      {drawn.map(({ wire, from, to, index, broken }) => {
-        const mid = wireMidpoint(from, to);
-        return (
-          <span
-            className='absolute -translate-x-1/2 -translate-y-1/2'
-            key={`remove:${wire.from}->${wire.to}`}
-            style={{ left: mid.x, top: mid.y }}
-          >
-            <IconButton
-              className={cn(
-                'bg-card',
-                // Quiet until wanted — a canvas covered in delete buttons reads
-                // as clutter — but a BROKEN wire keeps its control visible,
-                // because that is the one the author came here to remove.
-                broken ? 'opacity-100' : 'opacity-0 focus-visible:opacity-100 hover:opacity-100',
-              )}
-              data-cc-wire-remove={`${wire.from}→${wire.to}`}
-              label={`Remove the connection from ${wire.from} to ${wire.to}`}
-              onClick={() => onDisconnect(index)}
-              size='sm'
-              variant={broken ? 'destructive' : 'secondary'}
-            >
-              <X />
-            </IconButton>
-          </span>
-        );
-      })}
-      {instances.map((instance) => (
-        <CanvasNode
-          diagnostics={verification?.byInstance.get(instance.id) ?? []}
-          engine={instance.engine}
-          id={instance.id}
-          isAutoSized={storedSizes[instance.id] === undefined}
-          key={instance.id}
-          landable={landable}
-          onReportSize={reportAutoSize}
-          onResizeStart={(edges, rect) => {
-            const at = pointIn(rect);
-            setResize({
-              instanceId: instance.id,
-              edges,
-              startX: at.x,
-              startY: at.y,
-              startPos: positions[instance.id] ?? { x: 0, y: 0 },
-              startSize: sizeOf(instance.id),
-            });
-          }}
-          onSelect={onSelect}
-          onStartDrag={(rect) => {
-            const at = pointIn(rect);
-            const position = positions[instance.id] ?? { x: 0, y: 0 };
-            setDrag({ instanceId: instance.id, dx: at.x - position.x, dy: at.y - position.y });
-          }}
-          onWireDown={(point) => {
-            if (point) setWiring(point);
-          }}
-          onWireUp={(point) => {
-            if (wiring && landable(point)) onConnect(wiring.endpoint, point.endpoint);
-            setWiring(null);
-          }}
-          position={positions[instance.id] ?? { x: 0, y: 0 }}
-          selected={selectedId === instance.id}
-          size={sizeOf(instance.id)}
-          sockets={{ in: socketsOf(instance.id, 'in'), out: socketsOf(instance.id, 'out') }}
-          title={instance.title ?? instance.id}
-          wiring={wiring}
-        />
-      ))}
-
-      {instances.length === 0 && (
-        <p className='absolute inset-0 flex items-center justify-center text-sm text-muted-foreground'>
-          Add an engine to start building.
-        </p>
-      )}
-    </div>
-  );
-}
-
-interface CanvasNodeProps {
-  id: string;
-  engine: string;
-  title: string;
-  position: NodePosition;
-  size: NodeSize;
-  /** No manual size stored — the wrapper fits its content and reports the box. */
-  isAutoSized: boolean;
-  selected: boolean;
-  diagnostics: readonly { severity: string }[];
-  sockets: { in: WirePoint[]; out: WirePoint[] };
-  wiring: WirePoint | null;
-  landable: (point: WirePoint) => boolean;
-  onSelect: (id: string | null) => void;
-  onStartDrag: (rect: { clientX: number; clientY: number }) => void;
-  onResizeStart: (edges: ResizeEdges, rect: { clientX: number; clientY: number }) => void;
-  onReportSize: (id: string, size: NodeSize) => void;
-  onWireDown: (point: WirePoint | null) => void;
-  onWireUp: (point: WirePoint) => void;
-}
-
-/**
- * One node. Split out so each can run its OWN `ResizeObserver` (a hook cannot
- * live in a `.map`) — that observer is the auto-size measurement seam: while the
- * node has no manual size it lays out to `fit-content` and reports the box up,
- * so wires and sockets follow the real content rather than a fixed constant.
- */
-function CanvasNode({
-  id,
-  engine,
-  title,
-  position,
-  size,
-  isAutoSized,
-  selected,
-  diagnostics,
-  sockets,
-  wiring,
-  landable,
-  onSelect,
-  onStartDrag,
-  onResizeStart,
-  onReportSize,
-  onWireDown,
-  onWireUp,
-}: CanvasNodeProps) {
-  const nodeRef = useRef<HTMLDivElement>(null);
-  const errors = diagnostics.filter((d) => d.severity === 'error').length;
-  const warnings = diagnostics.filter((d) => d.severity === 'warning').length;
-
-  // Measure the rendered box and report it up while the node is auto-sized. When
-  // a manual size is stored the wrapper is fixed, so the measurement equals it
-  // and `sizeOf` prefers the stored value anyway — the observer is harmless then.
-  useResizeObserver(
-    nodeRef,
-    (el) => onReportSize(id, { width: (el as HTMLElement).offsetWidth, height: (el as HTMLElement).offsetHeight }),
-    { layout: true },
-  );
-
-  return (
-    <div
-      className='absolute'
-      ref={nodeRef}
-      style={
-        isAutoSized
-          ? { left: position.x, top: position.y, width: 'fit-content', minWidth: MIN_NODE_WIDTH, maxWidth: AUTOSIZE_MAX_WIDTH, minHeight: MIN_NODE_HEIGHT }
-          : { left: position.x, top: position.y, width: size.width, height: size.height }
-      }
-    >
-      <button
-        // guardrails-ignore no-raw-action-button: a canvas NODE, not an action — it selects and drags an object in a graph and mutates nothing. Button's inline-flex + control-height + touch-target baseline would fight a draggable card laid out in canvas coordinates.
-        className={cn(
-          'h-full w-full cursor-grab rounded-md border bg-card p-3 text-left shadow-raised',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
-          selected ? 'border-accent ring-2 ring-accent/40' : 'border-border',
-          errors > 0 && 'border-destructive',
-        )}
-        data-cc-engine-node={id}
-        data-cc-node-errors={errors > 0 ? String(errors) : undefined}
-        onPointerDown={(event) => {
-          onSelect(id);
-          onStartDrag(event);
-        }}
-        type='button'
-      >
-        <span className='block text-xs font-medium uppercase tracking-wide text-muted-foreground'>{engine}</span>
-        <span className='block truncate text-sm font-semibold'>{title}</span>
-        <span className='block truncate text-xs text-muted-foreground'>{id}</span>
-        {(errors > 0 || warnings > 0) && (
-          <span className={cn('mt-1 block text-xs', errors > 0 ? 'text-destructive' : 'text-warning')}>
-            {errors > 0 ? `${errors} error${errors === 1 ? '' : 's'}` : `${warnings} warning${warnings === 1 ? '' : 's'}`}
-          </span>
-        )}
-      </button>
-
-      {/* Eight resize handles — invisible hit strips that show their cursor, with
-          a faint dot on the selected node's corners for discoverability. A handle
-          drag must not also drag the node, so it stops propagation. */}
-      {HANDLES.map((handle) => (
-        <span
-          aria-hidden='true'
-          className={cn(
-            'absolute z-10',
-            handle.className,
-            selected && handle.key.length === 2 && 'rounded-full bg-accent/60',
-          )}
-          data-cc-node-resize={`${id}:${handle.key}`}
-          key={handle.key}
-          onPointerDown={(event) => {
-            event.stopPropagation();
-            onResizeStart(handle.edges, event);
-          }}
-          style={{ cursor: handle.cursor, touchAction: 'none' }}
-        />
-      ))}
-
-      {(['in', 'out'] as const).map((side) =>
-        sockets[side].map((point, index) => {
-          const dimmed = wiring !== null && side === 'in' && !landable(point);
-          return (
-            <Tooltip
-              key={`${side}-${point.endpoint}-${point.tokenId}`}
-              content={`${point.endpoint} — ${point.tokenId} (${point.mode})`}
-            >
-              <button
-                // guardrails-ignore no-raw-action-button: a 12px PORT HANDLE on a graph node — a drag origin/target, not an action. IconButton's control-height scale (and its ≥44px coarse-pointer target) cannot express a socket that must sit exactly on the node's edge where the wire terminates.
-                aria-label={`${point.endpoint} (${point.tokenId})`}
-                className={cn(
-                  'absolute z-20 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-card',
-                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
-                  point.required && 'border-warning',
-                  wiring !== null && side === 'in' && landable(point) && 'bg-accent-solid',
-                  dimmed && 'opacity-30',
-                )}
-                data-cc-socket={point.endpoint}
-                data-cc-socket-landable={wiring !== null && side === 'in' && landable(point) ? '' : undefined}
-                disabled={dimmed}
-                key={point.endpoint}
-                onPointerDown={(event) => {
-                  // A socket drag must not also drag the node under it.
-                  event.stopPropagation();
-                  if (side === 'out') onWireDown(point);
-                }}
-                onPointerUp={(event) => {
-                  event.stopPropagation();
-                  if (wiring && side === 'in') onWireUp(point);
-                  else onWireDown(null);
-                }}
-                // Positioned inside the node's own wrapper, so these are
-                // node-relative. Out-sockets ride the right edge with `100%` so they
-                // track a resized/auto-fit box without re-computing a width here.
-                style={{ left: side === 'in' ? 0 : '100%', top: SOCKET_TOP + index * SOCKET_SPACING }}
-                type='button'
-              />
-            </Tooltip>
-          );
-        }),
-      )}
-    </div>
-  );
-}