@unoverse-platform/studio 0.1.0

package/src/NodeKeys.tsx

@@ -0,0 +1,98 @@
+/**
+ * The selected node's keys, read from the project's `.env`.
+ *
+ * Two decisions show up here. Keys belong to the NODE being tested, not to a global
+ * list: a developer testing one node should see exactly the credentials it declares.
+ * And Studio does not store secrets at all. Developers already have a `.env`, already
+ * gitignored; a second secret store would be one more thing to learn and to leak.
+ *
+ * So this panel is read-only. It names the exact variable each field wants and says
+ * whether it is set. Entering the value happens in the editor they are already in.
+ *
+ * See docs/architecture/LOCAL_STUDIO.md.
+ */
+import { useEffect, useState } from "react";
+
+export interface CredentialType {
+  name: string;
+  displayName?: string;
+  description?: string;
+  properties?: { name: string; displayName?: string; description?: string; required?: boolean }[];
+}
+
+interface FieldPresence {
+  field: string;
+  env: string;
+  set: boolean;
+}
+
+export function NodeKeys({ needs, types }: { needs: string[]; types: CredentialType[] }) {
+  const [present, setPresent] = useState<Record<string, FieldPresence[]>>({});
+  const [envFiles, setEnvFiles] = useState<string[]>([]);
+
+  useEffect(() => {
+    fetch("/keys")
+      .then((r) => r.json())
+      .then((d) => setPresent(d.present ?? {}))
+      .catch(() => setPresent({}));
+    fetch("/local/info")
+      .then((r) => r.json())
+      .then((d) => setEnvFiles(d.envFiles ?? []))
+      .catch(() => {});
+  }, []);
+
+  const mine = needs.map((n) => types.find((t) => t.name === n) ?? { name: n }) as CredentialType[];
+  if (mine.length === 0) return null;
+
+  const missing = mine.some((t) => (present[t.name] ?? []).some((f) => !f.set));
+
+  return (
+    <div className="mt-4">
+      <div className="flex items-baseline gap-2">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Keys</span>
+        <span className="text-[11px] text-gray-500">
+          from your <code className="rounded bg-gray-200 px-1 text-gray-700">.env</code>
+          {envFiles[0] && <span className="ml-1 text-gray-600" title={envFiles.join("  or  ")}>({envFiles[0]})</span>}
+        </span>
+      </div>
+
+      {missing && (
+        <p className="mt-1 text-[11px] text-amber-700">
+          Add the variables below to your .env and restart Studio to pick them up.
+        </p>
+      )}
+
+      <div className="mt-2 space-y-3">
+        {mine.map((t) => {
+          const fields = present[t.name] ?? [];
+          return (
+            <section key={t.name} className="rounded-lg border border-gray-200 bg-gray-50 p-3">
+              <div className="flex items-center gap-2">
+                <h3 className="text-xs font-semibold text-gray-800">{t.displayName ?? t.name}</h3>
+                {fields.length > 0 && fields.every((f) => f.set) && (
+                  <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700">
+                    ready
+                  </span>
+                )}
+              </div>
+              {t.description && <p className="mt-0.5 text-[11px] text-gray-500">{t.description}</p>}
+
+              <div className="mt-2 space-y-1">
+                {fields.map((f) => (
+                  <div key={f.field} className="flex items-center gap-2 text-[11px]">
+                    <span className={f.set ? "text-emerald-600" : "text-gray-400"}>{f.set ? "●" : "○"}</span>
+                    <code className={`rounded px-1 py-0.5 font-mono ${f.set ? "bg-gray-200 text-gray-700" : "bg-amber-100 text-amber-800"}`}>
+                      {f.env}
+                    </code>
+                    <span className="text-gray-600">{f.set ? "set" : "not set"}</span>
+                  </div>
+                ))}
+                {fields.length === 0 && <p className="text-[11px] text-gray-500">This credential declares no fields.</p>}
+              </div>
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/NodesView.tsx

@@ -0,0 +1,443 @@
+/**
+ * Nodes view — Canvas-style. Left: a searchable palette of node cards grouped by
+ * category (name + category pill + description + colored accent). Right: a
+ * schema-driven config form (like the Canvas node panel) + Run, with the raw
+ * output (single) or streamed frames (generator).
+ *
+ * The runtime routes (/nodes, /execute, /execute-stream) are auth-gated server-side;
+ * authedFetch attaches the workbench bearer.
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { authedFetch, usePersistentState, useRegistryToggles, ToggleSwitch } from "./host";
+import { ConfigForm, defaultsFromSchema } from "@unoverse/studio";
+import { NodeKeys, type CredentialType } from "./NodeKeys";
+
+interface NodeInput {
+  name: string;
+  type?: string;
+}
+interface NodeDef {
+  type: string;
+  name: string;
+  description?: string;
+  whenToUse?: string;
+  executionMode: "single" | "generator";
+  category?: string;
+  inputs?: NodeInput[];
+  configSchema?: any;
+  credentials?: Array<{ name?: string } | string>;
+  testData?: any; // author-declared sample inputs/config, if any
+  relevance?: number; // 0–1 blended score, present only on semantic-search results
+}
+
+const pretty = (v: unknown) => JSON.stringify(v, null, 2);
+// Nodes wrap their result in `__outputs` (the downstream-routing envelope); show the
+// payload itself, not the wrapper.
+const unwrap = (v: any) => (v && typeof v === "object" && "__outputs" in v ? v.__outputs : v);
+
+// Category → accent color (left border + pill), mirroring the Canvas palette.
+// Descriptive taxonomy (see docs 14 — category drives both sidebar grouping and
+// UNO catalog ranking).
+const CAT_COLOR: Record<string, string> = {
+  AI: "#6366f1",
+  Voice: "#8b5cf6",
+  "Go To Market": "#f43f5e",
+  Search: "#06b6d4",
+  "Web Scraping": "#0ea5e9",
+  "Media & Design": "#ec4899",
+  Documents: "#f59e0b",
+  "Knowledge & Vectors": "#a855f7",
+  "Storage & Data": "#3b82f6",
+  Communication: "#14b8a6",
+  Flow: "#22c55e",
+  Output: "#eab308",
+  // legacy / display
+  "Design System": "#ec4899",
+  Triggers: "#22c55e",
+  Storage: "#3b82f6",
+  Memory: "#a855f7",
+  Ingest: "#06b6d4",
+};
+const colorFor = (cat?: string) => CAT_COLOR[cat ?? ""] ?? "#6b7280";
+
+function jsonEditor(label: string, value: string, onChange: (v: string) => void) {
+  return (
+    <label className="flex flex-col gap-1">
+      <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">{label}</span>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        spellCheck={false}
+        className="h-28 w-full resize-y rounded-md border border-gray-300 bg-white px-3 py-2 font-mono text-xs text-gray-800 focus:border-emerald-500 focus:outline-none"
+      />
+    </label>
+  );
+}
+
+export function NodesView() {
+  const [nodes, setNodes] = useState<NodeDef[]>([]);
+  // Credential DEFINITIONS ride the same /nodes payload; the key panel renders from them.
+  const [credentialTypes, setCredentialTypes] = useState<CredentialType[]>([]);
+  // The folder these nodes came from. Shown so it is obvious this is YOUR nodes/ folder
+  // and not a marketplace listing.
+  const [nodesDir, setNodesDir] = useState<string>("");
+  const [selected, setSelected] = usePersistentState<string | null>("wb:nodes:selected", null);
+  const active = useRegistryToggles("node");
+  const [query, setQuery] = useState("");
+  const [config, setConfig] = useState<Record<string, any>>({});
+  const [inputs, setInputs] = useState("{}");
+  const [context, setContext] = useState(
+    pretty({ nodeId: "wb-1", executionId: "wb-exec-1", publishingContext: { chatId: "wb", conversationId: "wb", userId: "wb-user" } }),
+  );
+  const [advanced, setAdvanced] = useState(false);
+  // Bumped to remount ConfigForm when config is replaced wholesale (node switch /
+  // Load sample) — its multi-line fields keep a local text mirror that otherwise
+  // wouldn't pick up an external value change.
+  const [formKey, setFormKey] = useState(0);
+  const [running, setRunning] = useState(false);
+  const [output, setOutput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  // Semantic-search results in relevance order, or null when browsing / when
+  // ranking is unavailable (then the palette falls back to the local substring
+  // filter below — never a wrong order).
+  const [ranked, setRanked] = useState<NodeDef[] | null>(null);
+  const [searching, setSearching] = useState(false);
+
+  // Fetch the loaded-node catalog. Reused after a marketplace install/uninstall so the
+  // palette reflects the new/removed node types without a page reload.
+  const loadNodes = useCallback(async (): Promise<NodeDef[]> => {
+    try {
+      const r = await authedFetch("/nodes");
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const d = await r.json();
+      // Design-system display components (category "Design System") are rendered via
+      // the component stream, not run standalone — hide them from the Nodes tab.
+      const list: NodeDef[] = (d.nodes ?? []).filter((n: NodeDef) => n.category !== "Design System");
+      setNodes(list);
+      setCredentialTypes(d.credentialTypes ?? []);
+      fetch("/local/info").then((r) => r.json()).then((i) => setNodesDir(i.nodes ?? "")).catch(() => {});
+      setError(null);
+      return list;
+    } catch (e: any) {
+      setError(String(e.message ?? e));
+      return [];
+    }
+  }, []);
+
+  useEffect(() => {
+    loadNodes().then((list) => {
+      // Restore the persisted selection across reloads; fall back to the first.
+      const restore = list.find((n) => n.type === selected) ?? list[0];
+      if (restore) choose(restore);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Semantic search — debounced POST /nodes/search (the same embedding+lexical
+  // ranker the agent's getNodeCatalog uses, over this server's own catalog). An
+  // empty box shows the browse view; while a query is in flight the local
+  // substring filter renders, then swaps to ranked order when results arrive.
+  useEffect(() => {
+    const q = query.trim();
+    if (!q) {
+      setRanked(null);
+      setSearching(false);
+      return;
+    }
+    let cancelled = false;
+    setSearching(true);
+    const t = setTimeout(async () => {
+      try {
+        const r = await authedFetch("/nodes/search", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ task: q, limit: 40 }),
+        });
+        const d = await r.json();
+        // ranked:false (no OpenAI key / API error) → null → local substring fallback.
+        // Drop design-system display components here too (same as the browse list).
+        const hits: NodeDef[] = (d.nodes ?? []).filter((n: NodeDef) => n.category !== "Design System");
+        if (!cancelled) setRanked(r.ok && d.ranked ? hits : null);
+      } catch {
+        if (!cancelled) setRanked(null);
+      } finally {
+        if (!cancelled) setSearching(false);
+      }
+    }, 250);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [query]);
+
+  function choose(n: NodeDef) {
+    setSelected(n.type);
+    setConfig(defaultsFromSchema(n.configSchema));
+    setInputs(pretty(Object.fromEntries((n.inputs ?? []).map((i) => [i.name, ""]))));
+    setOutput("");
+    setError(null);
+  }
+  const setField = (k: string, v: any) => setConfig((c) => ({ ...c, [k]: v }));
+
+  /** Fill the form from the node's author-declared `testData`, if present. */
+  function loadSample() {
+    const td = current?.testData;
+    if (!td) return;
+    if (td.config) setConfig({ ...defaultsFromSchema(current!.configSchema), ...td.config });
+    if (td.inputs) setInputs(pretty(td.inputs));
+    if (!td.config && !td.inputs) setInputs(pretty(td)); // treat the whole blob as inputs
+    setFormKey((k) => k + 1); // remount the form so fields show the loaded values
+    setError(null);
+  }
+
+  const current = nodes.find((n) => n.type === selected);
+
+  async function run() {
+    if (!current) return;
+    let parsedInputs: unknown;
+    let parsedContext: unknown;
+    try {
+      parsedInputs = JSON.parse(inputs);
+      parsedContext = JSON.parse(context);
+    } catch (e: any) {
+      setError(`Invalid JSON in inputs/context: ${e.message}`);
+      return;
+    }
+    setError(null);
+    setOutput("");
+    setRunning(true);
+    const body = JSON.stringify({ nodeType: current.type, inputs: parsedInputs, config, context: parsedContext });
+
+    try {
+      if (current.executionMode === "generator") {
+        const res = await authedFetch("/execute-stream", { method: "POST", headers: { "content-type": "application/json" }, body });
+        if (!res.ok || !res.body) {
+          setError(`HTTP ${res.status}: ${await res.text()}`);
+          return;
+        }
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buf = "";
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buf += dec.decode(value, { stream: true });
+          const parts = buf.split("\n\n");
+          buf = parts.pop() ?? "";
+          for (const part of parts) {
+            const line = part.split("\n").find((l) => l.startsWith("data: "));
+            if (!line) continue;
+            const frame = JSON.parse(line.slice(6));
+            const display = frame.type === "NODE_OUTPUT" ? unwrap(frame.output) : frame;
+            setOutput((o) => o + pretty(display) + "\n");
+          }
+        }
+      } else {
+        const res = await authedFetch("/execute", { method: "POST", headers: { "content-type": "application/json" }, body });
+        const data = await res.json();
+        if (!res.ok) setError(data.error ?? `HTTP ${res.status}`);
+        setOutput(pretty(unwrap(data.result ?? data)));
+      }
+    } catch (e: any) {
+      setError(String(e.message ?? e));
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  // Browse view (empty box) + substring fallback (query in flight, or semantic
+  // ranking unavailable), grouped by category.
+  const byCategory = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const filtered = q
+      ? nodes.filter((n) => `${n.type} ${n.name} ${n.description ?? ""}`.toLowerCase().includes(q))
+      : nodes;
+    return Object.entries(
+      filtered.reduce<Record<string, NodeDef[]>>((acc, n) => {
+        (acc[n.category ?? "Other"] ??= []).push(n);
+        return acc;
+      }, {}),
+    ).sort(([a], [b]) => a.localeCompare(b));
+  }, [nodes, query]);
+
+  // Show ranked order once results land; until then (or if ranking is off) the
+  // grouped browse/substring view renders.
+  const showRanked = query.trim().length > 0 && ranked !== null;
+
+  function renderCard(n: NodeDef) {
+    const color = colorFor(n.category);
+    const active = selected === n.type;
+    return (
+      <button
+        key={n.type}
+        onClick={() => choose(n)}
+        className={`flex flex-col gap-1 rounded-lg border bg-[#232a34] p-3 text-left transition ${
+          active ? "border-emerald-500/60" : "border-gray-700 hover:border-gray-600"
+        }`}
+        style={{ borderLeftColor: color, borderLeftWidth: 3 }}
+      >
+        <div className="flex items-center gap-2">
+          <span className="truncate text-sm font-semibold text-gray-100">{n.name || n.type}</span>
+          {typeof n.relevance === "number" && (
+            <span className="shrink-0 rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[9px] font-medium text-emerald-300">
+              {Math.round(n.relevance * 100)}%
+            </span>
+          )}
+          <span className="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium" style={{ background: `${color}22`, color }}>
+            {n.category ?? "node"}
+          </span>
+        </div>
+        {n.description && <p className="line-clamp-2 text-[11px] leading-snug text-gray-400">{n.description}</p>}
+        {n.executionMode === "generator" && <span className="text-[9px] uppercase tracking-wide text-gray-500">stream</span>}
+      </button>
+    );
+  }
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[330px_1fr] overflow-hidden">
+      {/* PALETTE — Canvas-style searchable node cards */}
+      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#1b2129] p-3">
+        <div className="relative mb-3">
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search nodes…"
+            className="w-full rounded-lg border border-gray-700 bg-[#0f141a] px-3 py-2 pr-9 text-sm text-gray-200 placeholder:text-gray-500 focus:border-emerald-500 focus:outline-none"
+          />
+        {nodesDir && (
+          <p className="px-1 pt-1 text-[10px] leading-snug text-gray-600" title={nodesDir}>
+            your nodes: <span className="text-gray-500">{nodesDir}</span>
+          </p>
+        )}
+          {searching && (
+            <svg className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-emerald-400" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          )}
+        </div>
+        {/* Marketplace — install/update packages inline (§4b). On change, reload the
+            palette so new/removed node types appear below. */}
+        {nodes.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">{error ? `Couldn't load /nodes: ${error}` : "No nodes in Unoverse yet."}</div>
+        )}
+        {showRanked ? (
+          <div className="mb-4">
+            <div className="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">best matches</div>
+            <div className="flex flex-col gap-2">
+              {ranked!.length === 0 ? (
+                <div className="px-1 text-xs text-gray-500">No matching nodes.</div>
+              ) : (
+                ranked!.map(renderCard)
+              )}
+            </div>
+          </div>
+        ) : (
+          byCategory.map(([cat, items]) => (
+            <div key={cat} className="mb-4">
+              <div className="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">{cat}</div>
+              <div className="flex flex-col gap-2">{items.map(renderCard)}</div>
+            </div>
+          ))
+        )}
+      </nav>
+
+      {/* PANEL — request (left) · response (right), Run pinned in the header */}
+      <div className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-white">
+        {!current ? (
+          <div className="m-auto text-xs text-gray-500">Select a node.</div>
+        ) : (
+          <>
+            {/* HEADER BAR — identity + actions */}
+            <div className="flex items-start gap-3 border-b border-gray-800 px-6 py-4">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <h2 className="truncate text-lg font-semibold text-gray-900">{current.name || current.type}</h2>
+                  <span className="shrink-0 rounded bg-white/5 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-gray-400">
+                    {current.executionMode}
+                  </span>
+                  {current.category && (
+                    <span
+                      className="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium"
+                      style={{ background: `${colorFor(current.category)}22`, color: colorFor(current.category) }}
+                    >
+                      {current.category}
+                    </span>
+                  )}
+                  <span className="ml-2 shrink-0">
+                    <ToggleSwitch on={active.isEnabled(current.type)} onClick={() => active.toggle(current.type)} label="Active" />
+                  </span>
+                </div>
+                {current.description && <p className="mt-0.5 text-sm text-gray-300">{current.description}</p>}
+                {current.whenToUse && (
+                  <p className="mt-1 max-w-3xl text-[12px] leading-snug text-gray-600">
+                    <span className="font-medium text-gray-500">When to use — </span>
+                    {current.whenToUse}
+                  </p>
+                )}
+                {(current.credentials?.length ?? 0) > 0 && (
+                  <div className="mt-1 text-[11px] text-amber-700">
+                    needs credentials: {current.credentials!.map((c) => (typeof c === "string" ? c : c?.name)).filter(Boolean).join(", ")}
+                  </div>
+                )}
+              </div>
+              <div className="ml-auto flex shrink-0 items-center gap-2">
+                {current.testData && (
+                  <button onClick={loadSample} className="rounded border border-gray-700 px-3 py-1.5 text-sm font-medium text-gray-300 hover:bg-white/5">
+                    Load sample
+                  </button>
+                )}
+                <button
+                  onClick={run}
+                  disabled={running}
+                  className="rounded bg-emerald-500/90 px-5 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500 disabled:opacity-50"
+                >
+                  {running ? "Running…" : current.executionMode === "generator" ? "Run ▸ stream" : "Run ▸"}
+                </button>
+              </div>
+            </div>
+            {error && (
+              <div className="border-b border-red-500/20 bg-red-500/5 px-6 py-2 text-xs font-medium text-red-400">{error}</div>
+            )}
+
+            {/* BODY — config/inputs (left) · output (right) */}
+            <div className="grid min-h-0 flex-1 grid-cols-2 overflow-hidden">
+              <div className="flex min-h-0 flex-col gap-5 overflow-auto border-r border-gray-800 p-6">
+                <div className="flex flex-col">
+                  <span className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400">configuration</span>
+                  <div className="rounded-md border border-gray-200 bg-gray-50 p-4">
+                    <ConfigForm key={`${selected}:${formKey}`} schema={current.configSchema} value={config} onChange={setField} />
+                  </div>
+                </div>
+                <div>
+                  <button onClick={() => setAdvanced((a) => !a)} className="text-[11px] font-medium text-gray-500 hover:text-gray-800">
+                    {advanced ? "▾" : "▸"} inputs & context (JSON)
+                  </button>
+                {/* Keys belong to the NODE being tested, not a global list: only the
+                    credentials this node declares, built from their own definitions. */}
+                <NodeKeys
+                  needs={(current.credentials ?? []).map((c: any) => (typeof c === "string" ? c : c?.name)).filter(Boolean)}
+                  types={credentialTypes}
+                />
+                  {advanced && (
+                    <div className="mt-2 flex flex-col gap-3">
+                      {jsonEditor("inputs", inputs, setInputs)}
+                      {jsonEditor("context", context, setContext)}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex min-h-0 flex-col overflow-hidden p-6">
+                <span className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400">output</span>
+                <pre className="min-h-0 flex-1 overflow-auto whitespace-pre-wrap rounded-md border border-gray-200 bg-gray-50 p-4 font-mono text-xs text-gray-800">
+                  {output || <span className="text-gray-500">— run the node to see output —</span>}
+                </pre>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}