@unoverse-platform/studio 0.1.0

package/screens/ComponentsView.tsx

@@ -0,0 +1,551 @@
+/**
+ * Components view — Storybook-style. Left: a navigator of all components grouped
+ * by category. Top-right: the rendered component (canvas). Bottom: live controls
+ * docked under the canvas. Each control edit is a COMPONENT_DATA merge.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { ComponentStore } from "@unoverse/sdk";
+import { StreamedUnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
+import { client, authedFetch } from "studio-host";
+import { stateActivation } from "./states";
+import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
+
+const CHAT_ID = "demo";
+
+interface PropDef {
+  type?: string;
+  default?: unknown;
+  /** Studio-only sample value — marking/design data that must NEVER reach a live
+   *  render (live absence is what drives `skeleton` ghosts). Preferred over `default`
+   *  when seeding the preview stage. */
+  preview?: unknown;
+  input?: boolean;
+}
+interface ComponentDef {
+  name: string;
+  /** Display name from the manifest ("Card Finder"); falls back to `name`. */
+  title?: string;
+  description?: string;
+  /** The spatial selection text (manifest.whenToUse) — what findIntent ranks on. */
+  whenToUse?: string;
+  category?: string;
+  /** Spatial-CAPABLE: the component folder carries a manifest.json (server-projected).
+   *  Only capable components show the Spatial toggle — a basic component shows nothing. */
+  spatial?: boolean;
+  props?: Record<string, PropDef>;
+  /** The node's input prop keys, derived server-side (= the node's configSchema).
+   *  The CONTROLS panel renders exactly these; the rest stays hardcoded in the def. */
+  inputs?: string[];
+  /** The component's layer views — its states/ folder (LAYERS §7); a wizard's steps. */
+  states?: { name: string; when?: unknown }[];
+  /** The definition tree (used to resolve a state's Switch discriminant). */
+  root?: unknown;
+}
+
+const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
+  { id: "mobile", label: "Mobile", w: 390 },
+  { id: "tablet", label: "Tablet", w: 768 },
+  { id: "desktop", label: "Desktop", w: 1280 },
+  { id: "full", label: "Full", w: null },
+];
+
+export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; org?: string }) {
+  const store = useMemo(() => new ComponentStore(), []);
+  const spatial = useRegistryToggles("component");
+  const [components, setComponents] = useState<ComponentDef[]>([]);
+  const [selected, setSelected] = usePersistentState<string | null>("wb:components:selected", null);
+  const [values, setValues] = useState<Record<string, unknown>>({}); // typed values → store/render
+  const [text, setText] = useState<Record<string, string>>({}); // raw editor strings (decoupled from the typed value)
+  const [lastAction, setLastAction] = useState<string | null>(null);
+  const [, setStoreTick] = useState(0); // re-render on store changes (focus / displayState)
+  const [panelOpen, setPanelOpen] = useState(false); // controls dock starts closed — most microapps have no props
+  const [panelHeight, setPanelHeight] = useState(240);
+  const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:components:meta", false); // manifest meta panel
+  // Responsive preview — the stage width. Components are fluid (width: full), so
+  // the channel/slot sizes them; here we simulate that slot to test responsiveness.
+  const [stageWidth, setStageWidth] = useState<number | null>(768); // default Tablet — a single component reads best at a contained width
+
+  // Drag the divider to resize the controls dock (up = taller).
+  const onDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = panelHeight;
+    const onMove = (ev: MouseEvent) => setPanelHeight(Math.max(120, Math.min(window.innerHeight - 200, startH + (startY - ev.clientY))));
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  // Seed the component's data with the props' real DEFAULT VALUES, kept as their
+  // real TYPES (an array stays an array, an object an object). The previous code did
+  // String(default), which turned an array prop into "[object Object],…" — so the
+  // SDK's `Each` saw a string instead of a list and rendered nothing. Editor display
+  // strings are derived separately into `text`.
+  const toText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v, null, 2));
+  const defaultsOf = (c: ComponentDef): Record<string, unknown> =>
+    Object.fromEntries(
+      Object.entries(c.props ?? {}).map(([k, v]) => [k, v.preview ?? v.default ?? (v.type === "array" ? [] : v.type === "object" ? {} : "")]),
+    );
+
+  function choose(c: ComponentDef) {
+    setSelected(c.name);
+    const defaults = defaultsOf(c);
+    setValues(defaults);
+    setText(Object.fromEntries(Object.entries(defaults).map(([k, v]) => [k, toText(v)])));
+    store.apply({ type: "COMPONENT_INIT", chatId: CHAT_ID, nodeId: c.name, component: { type: c.name, props: defaults } });
+  }
+
+  useEffect(() => {
+    // The header org scope: "all" = design system + every org's components (tagged);
+    // an org = design system + that org's own only (org-private).
+    authedFetch(`/dev/components${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: ComponentDef[] = d.components ?? [];
+        setComponents(list);
+        // Restore the persisted selection across reloads; fall back to the first.
+        const restore = list.find((c) => c.name === selected) ?? list[0];
+        if (restore) choose(restore);
+      })
+      .catch(() => setComponents([]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [org]);
+
+  // Re-render when the store changes (so a def's setValue displayState button flips the
+  // toggle highlight + grow container, not just the rendered component).
+  useEffect(() => store.subscribe(() => setStoreTick((t) => t + 1)), [store]);
+
+  const current = components.find((c) => c.name === selected);
+  // The TWO MASTER STATES (inline / focused) are universal — every component's root
+  // switches its face on `defaultState` (STATE_MODEL §5b). The toolbar control writes
+  // that key into the slice — the same generic setValue/COMPONENT_DATA path a real
+  // component's own buttons use. `focused` also drives the grow-to-fill container.
+  const slice = selected ? store.get(CHAT_ID, selected) : undefined;
+  const masterState = ((slice?.defaultState ?? slice?.displayState) as string | undefined) ?? "inline";
+  // A component's FACES come from its OWN root `Switch on defaultState` cases — an
+  // OPEN name set (inline/focused/course/…), never a hardcoded pair. `inline` is the
+  // universal default face and always leads. A flat component (no Switch) has ONE
+  // look; the face control would be a lie, so it's hidden.
+  const facesOf = (root: unknown): string[] => {
+    const found: string[] = [];
+    const walk = (n: any): void => {
+      if (!n || typeof n !== "object") return;
+      if (Array.isArray(n)) { n.forEach(walk); return; }
+      if (n.type === "Switch" && n.on === "defaultState" && n.cases && typeof n.cases === "object") {
+        for (const k of Object.keys(n.cases)) if (k !== "default" && !found.includes(k)) found.push(k);
+      }
+      Object.values(n).forEach(walk);
+    };
+    walk(root);
+    return ["inline", ...found.filter((f) => f !== "inline")];
+  };
+  const faces = current?.root ? facesOf(current.root) : ["inline"];
+  const hasFaces = faces.length > 1;
+  // Any non-inline face gets the grow-to-fill container (focused/course/… are the fuller looks).
+  const isFocused = hasFaces && masterState !== "inline";
+  const setMasterState = (ms: string) => {
+    if (!selected) return;
+    store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: selected, data: { defaultState: ms } });
+  };
+
+  // CONTEXTUAL SUB-STATES — a face's own internal steps (a Switch inside the face on a
+  // PRIVATE key, e.g. `step`: detail ⇄ book). They exist only within that face, so they
+  // show only while it's active — never as component-wide states. Fully derived: any
+  // named case of any non-defaultState Switch in the ACTIVE face's subtree.
+  const subStates = ((): { on: string; name: string }[] => {
+    if (!current?.root || !hasFaces || masterState === "inline") return [];
+    let face: unknown;
+    const findFace = (n: any): void => {
+      if (face || !n || typeof n !== "object") return;
+      if (Array.isArray(n)) { n.forEach(findFace); return; }
+      if (n.type === "Switch" && n.on === "defaultState" && n.cases?.[masterState]) { face = n.cases[masterState]; return; }
+      Object.values(n).forEach(findFace);
+    };
+    findFace(current.root);
+    const out: { on: string; name: string }[] = [];
+    const walk = (n: any): void => {
+      if (!n || typeof n !== "object") return;
+      if (Array.isArray(n)) { n.forEach(walk); return; }
+      if (n.type === "Switch" && typeof n.on === "string" && n.on !== "defaultState" && n.cases && typeof n.cases === "object") {
+        for (const k of Object.keys(n.cases)) if (k !== "default" && !out.some((s) => s.name === k)) out.push({ on: n.on, name: k });
+      }
+      Object.values(n).forEach(walk);
+    };
+    walk(face);
+    return out;
+  })();
+
+  // COPY FOR CANVAS — writes the canvas's own clipboard payload (gravity-workflow,
+  // the same shape its Cmd+C emits), so Cmd+V on any canvas pastes this component's
+  // node. This is how design components reach a workflow now — the canvas palette
+  // no longer lists them.
+  //
+  // The design system is now ONE generic `Component` node (not one node type per
+  // component). So the pasted node's TYPE is always "Component" and the chosen
+  // component is carried in config (`component: <name>`), with the def's default
+  // props seeded so it pastes as a working, rendered component. Emitting the old
+  // per-component type (`type: <name>`) would land as an "unknown node / Package not
+  // installed" placeholder, because that node type no longer exists in the catalog.
+  const [copiedForCanvas, setCopiedForCanvas] = useState(false);
+  const copyForCanvas = async () => {
+    if (!current) return;
+    // Width from the def; height stays AUTO — the canvas node hugs the rendered
+    // component's height (components flex width, own height).
+    const size = (current as any).nodeSize ?? { width: 400 };
+    const node = {
+      id: `${current.name.toLowerCase()}1`,
+      type: "Component",
+      position: { x: 0, y: 0 },
+      data: {
+        label: current.name,
+        status: "ready",
+        config: { component: current.name, ...defaultsOf(current) },
+      },
+      style: { width: size.width },
+      draggable: true,
+    };
+    await navigator.clipboard.writeText(
+      JSON.stringify({ type: "gravity-workflow", version: 2, nodes: [node], edges: [] }, null, 2),
+    );
+    setCopiedForCanvas(true);
+    setTimeout(() => setCopiedForCanvas(false), 1600);
+  };
+
+  // Edit a control. `text` always updates so the field stays typeable; the TYPED
+  // value pushed to the store is JSON-parsed for array/object props (and left as a
+  // raw string for string props). Half-typed invalid JSON just isn't pushed yet.
+  const setField = (key: string, raw: string, type?: string) => {
+    if (!selected) return;
+    setText((t) => ({ ...t, [key]: raw }));
+    let val: unknown = raw;
+    if (type === "array" || type === "object") {
+      try {
+        val = JSON.parse(raw);
+      } catch {
+        return; // keep the keystroke in `text`; don't push half-typed JSON to the store
+      }
+    }
+    setValues((v) => ({ ...v, [key]: val }));
+    store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: selected, data: { [key]: val } });
+  };
+
+  const byCategory = Object.entries(
+    components.reduce<Record<string, ComponentDef[]>>((acc, c) => {
+      (acc[c.category ?? "Uncategorized"] ??= []).push(c);
+      return acc;
+    }, {}),
+  ).sort(([a], [b]) => a.localeCompare(b));
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[190px_1fr] overflow-hidden">
+      {/* NAVIGATOR */}
+      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+        {components.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">No components — restart the Unoverse server so /dev/components is available.</div>
+        )}
+        {byCategory.map(([cat, items]) => (
+          <div key={cat} className="mb-3">
+            <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{cat}</div>
+            {items.map((c) => (
+              <div key={c.name}>
+                <button
+                  onClick={() => choose(c)}
+                  className={`block w-full rounded px-2 py-1 text-left text-sm transition ${
+                    selected === c.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
+                  }`}
+                >
+                  {c.name}
+                </button>
+                {/* The component's OWN states (its states/ folder) live HERE in the rail.
+                    The two MASTER states (inline/focused — the `defaultState` face switch,
+                    STATE_MODEL §5b) are NOT in this list; they live in the toolbar because
+                    every component has them. A stateless component is inline by default —
+                    no states/ folder, no rail entry at all (inline needs no dedicated state). */}
+                {selected === c.name && (c.states?.length ?? 0) > 0 && (
+                  <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
+                    {(c.states ?? []).map((s) => {
+                      const data = stateActivation(c.root, s);
+                      const activeKey = data ? Object.keys(data)[0] : null;
+                      const isActive =
+                        Boolean(activeKey) &&
+                        (store.get(CHAT_ID, c.name) as Record<string, unknown>)[activeKey!] === (data as Record<string, unknown>)[activeKey!];
+                      return (
+                        <button
+                          key={s.name}
+                          onClick={() => {
+                            if (!data) return;
+                            store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data });
+                            setStoreTick((v) => v + 1);
+                          }}
+                          className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
+                            isActive ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
+                          }`}
+                        >
+                          {s.name}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+                {/* CONTEXTUAL SUB-STATES — the ACTIVE face's internal steps (its private
+                    Switch, e.g. focus's detail ⇄ book). Layouts on top, states down the
+                    left: these list here ONLY while their face is active — they aren't
+                    states of the other faces. First named case = the face's default. */}
+                {selected === c.name && subStates.length > 0 && (
+                  <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
+                    {subStates.map((s, i) => {
+                      const cur = (store.get(CHAT_ID, c.name) as Record<string, unknown>)[s.on];
+                      const on = cur === s.name || (i === 0 && (cur === undefined || cur === ""));
+                      return (
+                        <button
+                          key={s.name}
+                          onClick={() => {
+                            store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { [s.on]: s.name } });
+                            setStoreTick((v) => v + 1);
+                          }}
+                          className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
+                            on ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
+                          }`}
+                        >
+                          {s.name}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      {/* MAIN — canvas on top, controls docked at the bottom */}
+      <div className="flex min-h-0 min-w-0 flex-col">
+        {/* CANVAS */}
+        <section className="flex min-h-0 flex-1 flex-col" style={{ background: theme.color["surface.sunken"] ?? "#f3f4f6", color: theme.color["text.primary"] }}>
+          <div className="flex items-center gap-3 border-b px-4 py-2" style={{ borderColor: theme.color["border.subtle"] }}>
+            <span className="text-[11px] font-medium uppercase tracking-wider opacity-60">{current?.name ?? "rendered"}</span>
+
+            {/* The component's OWN states are picked in the LEFT RAIL; the two MASTER
+                states (inline / focused — the face switch on `defaultState`) live HERE,
+                apart from the step states. NOT universal: only a component specifically
+                coded with the two faces (root Switch on defaultState) shows the control —
+                a flat component has one look and gets nothing. */}
+            {hasFaces && (
+              <div className="flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
+                {faces.map((ms) => (
+                  <button
+                    key={ms}
+                    onClick={() => setMasterState(ms)}
+                    className="rounded px-2 py-0.5 font-medium capitalize transition"
+                    style={
+                      masterState === ms
+                        ? { background: theme.color["surface.base"], color: theme.color["text.primary"] }
+                        : { color: theme.color["text.secondary"] }
+                    }
+                  >
+                    {ms}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            <button
+              onClick={copyForCanvas}
+              className="rounded border px-2 py-0.5 text-[11px] font-medium transition"
+              style={{
+                borderColor: theme.color["border.subtle"],
+                color: copiedForCanvas ? theme.color["text.primary"] : theme.color["text.secondary"],
+                background: copiedForCanvas ? theme.color["surface.sunken"] : "transparent",
+              }}
+              title="Copy this component as a canvas node — paste (Cmd+V) on any workflow canvas"
+            >
+              {copiedForCanvas ? "✓ Copied — paste on canvas" : "⧉ Copy for Canvas"}
+            </button>
+
+
+            {/* Spatial toggle — ONLY for spatial-capable components (manifest.json present).
+                Same two-level model as templates/skills: this is Level 1 (workbench
+                eligibility); the Content Engine's per-workflow toggle is Level 2. */}
+            {current?.spatial && <ToggleSwitch on={spatial.isEnabled(current.name)} onClick={() => spatial.toggle(current.name)} label="Spatial" />}
+            {current?.spatial && (
+              <button
+                onClick={() => setMetaOpen((o) => !o)}
+                className="flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium"
+                style={{
+                  borderColor: theme.color["border.subtle"],
+                  color: metaOpen ? theme.color["text.primary"] : theme.color["text.secondary"],
+                  background: metaOpen ? theme.color["surface.sunken"] : "transparent",
+                }}
+                title="Show the component's manifest (spatial discovery meta)"
+              >
+                ⓘ Meta <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+              </button>
+            )}
+
+            {/* Responsive viewport presets — components are fluid; this resizes the slot */}
+            <div className="ml-auto flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
+              {VIEWPORTS.map((v) => (
+                <button
+                  key={v.id}
+                  onClick={() => setStageWidth(v.w)}
+                  className="rounded px-2 py-0.5 font-medium transition"
+                  style={
+                    stageWidth === v.w
+                      ? { background: theme.color["surface.base"], color: theme.color["text.primary"] }
+                      : { color: theme.color["text.secondary"] }
+                  }
+                >
+                  {v.label}
+                </button>
+              ))}
+            </div>
+            <span className="tabular-nums text-[11px]" style={{ color: theme.color["text.tertiary"] }}>
+              {stageWidth ? `${stageWidth}px` : "100%"}
+            </span>
+            {lastAction && (
+              <span className="text-xs font-medium" style={{ color: theme.color["action.primary"] }}>
+                action: {lastAction}
+              </span>
+            )}
+          </div>
+
+          {/* MANIFEST META — the component's spatial discovery meta (manifest.json),
+              the lightweight sibling of the Templates view's MCP-app panel. */}
+          {metaOpen && current?.spatial && (() => {
+            const accent = theme.color["action.primary"] ?? "#6366f1";
+            return (
+              <div className="border-b px-5 py-4" style={{ borderColor: theme.color["border.subtle"], background: theme.color["surface.base"] }}>
+                {/* Same identity anatomy as the Apps meta panel — title / accent category
+                    chip / muted tag, description, then the accented when-to-use callout. */}
+                <div className="mx-auto flex max-w-5xl flex-col gap-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h2 className="text-[17px] font-semibold leading-tight tracking-tight" style={{ color: theme.color["text.primary"] }}>
+                      {current.title || current.name}
+                    </h2>
+                    {current.category && (
+                      <span className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide" style={{ background: `${accent}14`, color: accent }}>
+                        {current.category}
+                      </span>
+                    )}
+                    <span className="font-mono text-[10px]" style={{ color: theme.color["text.tertiary"] }}>
+                      manifest.json
+                    </span>
+                  </div>
+                  {current.description && (
+                    <p className="mt-1 max-w-3xl text-[13px] leading-relaxed" style={{ color: theme.color["text.secondary"] }}>{current.description}</p>
+                  )}
+                  {current.whenToUse && (
+                    <div className="mt-2 max-w-3xl rounded-r pl-3 py-1.5" style={{ borderLeft: `3px solid ${accent}`, background: theme.color["surface.sunken"] }}>
+                      <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider" style={{ color: accent }}>
+                        When to use
+                      </div>
+                      <p className="text-[15px] font-medium leading-relaxed" style={{ color: theme.color["text.primary"] }}>{current.whenToUse}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })()}
+          {/* The grow-to-focus container, ported from legacy .focusContainer:
+              fill the area (padding 0, height 100%) + focusFadeIn 0.2s ease-out. */}
+          <style>{"@keyframes wb-focusFadeIn{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}"}</style>
+          {/* Focus faces that fill + scroll internally never overflow this box; a
+              CONTENT-TALL focus face (a document component like PerfectDay) scrolls
+              the stage instead of being clipped. */}
+          <div className={isFocused ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto p-10"}>
+            <div
+              key={masterState}
+              className={`mx-auto max-w-full ${isFocused ? "h-full" : "transition-[width] duration-200"}`}
+              style={{ width: stageWidth ?? "100%", ...(isFocused ? { animation: "wb-focusFadeIn 0.2s ease-out" } : {}) }}
+            >
+              {selected && <StreamedUnoverseComponent client={client} store={store} chatId={CHAT_ID} nodeId={selected} theme={theme} onAction={(a) => setLastAction(typeof a === "string" ? a : a?.type ?? null)} />}
+            </div>
+          </div>
+        </section>
+
+        {/* CONTROLS — docked bottom panel: collapsible + drag-to-resize (Storybook) */}
+        {panelOpen && (
+          <div
+            onMouseDown={onDragStart}
+            className="h-1.5 shrink-0 cursor-row-resize bg-gray-700 transition-colors hover:bg-emerald-600/50"
+            title="Drag to resize"
+          />
+        )}
+        <div
+          className="flex min-h-0 shrink-0 flex-col bg-[#232a34] text-gray-200"
+          style={panelOpen ? { height: panelHeight } : undefined}
+        >
+          <div
+            onClick={() => setPanelOpen((o) => !o)}
+            title={panelOpen ? "Collapse controls" : "Expand controls"}
+            className="flex cursor-pointer select-none items-center gap-2 border-y border-gray-700 px-3 py-2 text-[11px] uppercase tracking-wider text-gray-400 hover:bg-white/5"
+          >
+            <span className="leading-none text-gray-300">{panelOpen ? "▾" : "▸"}</span>
+            <span>controls</span>
+            {current && <span className="text-gray-400">· {current.name}</span>}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                if (current) choose(current);
+              }}
+              className="ml-auto rounded border border-gray-700 px-2 py-0.5 text-[10px] normal-case text-gray-300 hover:bg-white/5"
+            >
+              reset
+            </button>
+          </div>
+          {panelOpen && (
+            <div className="min-h-0 flex-1 overflow-auto">
+              <table className="w-full border-collapse text-sm">
+                <thead>
+                  <tr className="text-left text-[10px] uppercase tracking-wider text-gray-400">
+                    <th className="w-44 border-b border-gray-700 px-4 py-2 font-semibold">Name</th>
+                    <th className="border-b border-gray-700 px-4 py-2 font-semibold">Control</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {current &&
+                    Object.entries(current.props ?? {})
+                      // Render controls for exactly the node's inputs, as derived by
+                      // the server (= the node's configSchema). The workbench makes no
+                      // decision of its own — it renders what it's handed. (Defaults
+                      // for ALL props are still seeded above, so the preview renders
+                      // the hardcoded copy.) No `inputs` (untagged def) → show all.
+                      .filter(([key]) => !current.inputs || current.inputs.includes(key))
+                      .map(([key, def]) => (
+                      <tr key={key} className="border-b border-gray-700/50 align-top hover:bg-white/[0.02]">
+                        <td className="px-4 py-3">
+                          <div className="font-medium text-gray-200">{key}</div>
+                          <div className="text-[10px] uppercase tracking-wide text-gray-400">{def.type ?? "string"}</div>
+                        </td>
+                        <td className="px-4 py-3">
+                          {def.type === "array" || def.type === "object" || key === "description" ? (
+                            <textarea
+                              value={text[key] ?? ""}
+                              onChange={(e) => setField(key, e.target.value, def.type)}
+                              rows={def.type === "array" || def.type === "object" ? 8 : 2}
+                              spellCheck={false}
+                              className="w-full max-w-2xl resize-y rounded-md border border-gray-700 bg-[#2c2c2e] px-3 py-2 font-mono text-xs text-gray-200 focus:border-emerald-500 focus:outline-none"
+                            />
+                          ) : (
+                            <input
+                              value={text[key] ?? ""}
+                              onChange={(e) => setField(key, e.target.value, def.type)}
+                              className="w-full max-w-2xl rounded-md border border-gray-700 bg-[#2c2c2e] px-3 py-2 text-gray-200 focus:border-emerald-500 focus:outline-none"
+                            />
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}