@growthub/cli 0.13.0 → 0.13.2

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/OrchestrationRunTracePanel.jsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { ArrowLeft, GitBranch } from "lucide-react";
+import { parseSandboxRunTrace, normalizeRunRecord } from "@/lib/orchestration-run-trace";
+import { redactSecretsFromText } from "@/lib/orchestration-graph";
+
+export function OrchestrationRunTracePanel({
+  row,
+  objectId,
+  fieldName,
+  selectedRunId,
+  onBack,
+  onOpenGraph
+}) {
+  const [history, setHistory] = useState([]);
+  const [historyMessage, setHistoryMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [activeRunId, setActiveRunId] = useState(String(selectedRunId || row?.lastRunId || "").trim());
+
+  const rowTrace = useMemo(() => parseSandboxRunTrace(row?.lastResponse), [row?.lastResponse]);
+
+  useEffect(() => {
+    setActiveRunId(String(selectedRunId || row?.lastRunId || "").trim());
+  }, [selectedRunId, row?.lastRunId, row?.lastResponse]);
+
+  useEffect(() => {
+    const objectIdValue = String(objectId || "").trim();
+    const name = String(row?.Name || "").trim();
+    if (!objectIdValue || !name) return;
+    setLoading(true);
+    setHistoryMessage("");
+    fetch(`/api/workspace/sandbox-run?objectId=${encodeURIComponent(objectIdValue)}&name=${encodeURIComponent(name)}`, {
+      cache: "no-store"
+    })
+      .then((res) => res.json())
+      .then((payload) => {
+        if (!payload.ok) throw new Error(payload.error || "Could not load run history");
+        setHistory(Array.isArray(payload.records) ? payload.records.map(normalizeRunRecord).filter(Boolean) : []);
+        setHistoryMessage(`${payload.recordCount || 0} saved run${payload.recordCount === 1 ? "" : "s"}`);
+      })
+      .catch((err) => {
+        setHistory([]);
+        setHistoryMessage(err.message || "Could not load run history");
+      })
+      .finally(() => setLoading(false));
+  }, [objectId, row?.Name]);
+
+  const activeRecord = useMemo(() => {
+    if (activeRunId && history.length) {
+      const match = history.find((r) => r.runId === activeRunId);
+      if (match) return match;
+    }
+    if (fieldName === "lastResponse" || !activeRunId) {
+      return {
+        runId: rowTrace.runId || row?.lastRunId || "",
+        ranAt: rowTrace.ranAt || row?.lastTested || "",
+        exitCode: rowTrace.exitCode,
+        durationMs: rowTrace.durationMs,
+        error: rowTrace.error,
+        stdout: rowTrace.stdout,
+        stderr: rowTrace.stderr,
+        output: rowTrace.output
+      };
+    }
+    return history[0] || null;
+  }, [activeRunId, history, rowTrace, fieldName, row?.lastRunId, row?.lastTested]);
+
+  const summary = fieldName === "lastSourceId"
+    ? `Source ${String(row?.lastSourceId || "").trim()}`
+    : fieldName === "lastRunId"
+      ? `Run ${String(row?.lastRunId || activeRunId || "").trim()}`
+      : "Latest sandbox run";
+
+  return (
+    <section className="dm-orchestration-trace" aria-label="Run trace viewer">
+      <header className="dm-orchestration-trace__head">
+        <button type="button" className="dm-orchestration-header__back" onClick={onBack} aria-label="Back to record">
+          <ArrowLeft size={16} />
+        </button>
+        <div>
+          <h2>Run trace</h2>
+          <p>{summary} · {row?.Name || "Sandbox tool"}</p>
+        </div>
+        {onOpenGraph && (
+          <button type="button" className="dm-btn-outline" onClick={onOpenGraph}>
+            <GitBranch size={14} aria-hidden="true" />
+            Edit graph
+          </button>
+        )}
+      </header>
+
+      <div className="dm-orchestration-trace__body">
+        <aside className="dm-orchestration-trace__list">
+          <p className="dm-orchestration-trace__list-title">Run history</p>
+          {loading && <p className="dm-orchestration-config__hint">Loading…</p>}
+          {!loading && historyMessage && <p className="dm-orchestration-config__hint">{historyMessage}</p>}
+          <button
+            type="button"
+            className={`dm-orchestration-trace__run${!activeRunId ? " is-active" : ""}`}
+            onClick={() => setActiveRunId("")}
+          >
+            <span>Row preview</span>
+            <span>{row?.status || rowTrace.status || "—"} · {row?.lastTested || rowTrace.ranAt || "—"}</span>
+          </button>
+          {history.map((record) => (
+            <button
+              key={record.runId || record.ranAt}
+              type="button"
+              className={`dm-orchestration-trace__run${activeRunId === record.runId ? " is-active" : ""}`}
+              onClick={() => setActiveRunId(record.runId)}
+            >
+              <span>{record.runId || "run"}</span>
+              <span>
+                {record.exitCode === 0 && !record.error ? "success" : "failed"}
+                {record.ranAt ? ` · ${record.ranAt}` : ""}
+              </span>
+            </button>
+          ))}
+        </aside>
+
+        <div className="dm-orchestration-trace__detail">
+          <dl className="dm-orchestration-trace__meta">
+            <div><dt>Status</dt><dd>{row?.status || rowTrace.status || (activeRecord?.exitCode === 0 ? "connected" : "—")}</dd></div>
+            <div><dt>Run ID</dt><dd>{activeRecord?.runId || row?.lastRunId || "—"}</dd></div>
+            <div><dt>Exit code</dt><dd>{activeRecord?.exitCode ?? rowTrace.exitCode ?? "—"}</dd></div>
+            <div><dt>Duration</dt><dd>{activeRecord?.durationMs ?? rowTrace.durationMs ?? "—"} ms</dd></div>
+            <div><dt>Runtime</dt><dd>{rowTrace.runtime || row?.runtime || "—"}</dd></div>
+            <div><dt>Adapter</dt><dd>{rowTrace.adapter || row?.adapter || "—"}</dd></div>
+            <div><dt>Run locality</dt><dd>{rowTrace.runLocality || row?.runLocality || "—"}</dd></div>
+            <div><dt>Tested</dt><dd>{activeRecord?.ranAt || row?.lastTested || rowTrace.ranAt || "—"}</dd></div>
+          </dl>
+
+          {(activeRecord?.error || rowTrace.error) && (
+            <div className="dm-orchestration-trace__error">
+              <span>Error</span>
+              <pre>{redactSecretsFromText(activeRecord?.error || rowTrace.error)}</pre>
+            </div>
+          )}
+
+          <div className="dm-orchestration-trace__output">
+            <span>Stdout</span>
+            <pre>{redactSecretsFromText(activeRecord?.stdout || rowTrace.stdout || "—")}</pre>
+          </div>
+
+          {(activeRecord?.output || rowTrace.output) && (
+            <div className="dm-orchestration-trace__output">
+              <span>Normalized output</span>
+              <pre>{redactSecretsFromText(activeRecord?.output || rowTrace.output)}</pre>
+            </div>
+          )}
+
+          {(activeRecord?.stderr || rowTrace.stderr) && (
+            <div className="dm-orchestration-trace__output">
+              <span>Stderr</span>
+              <pre>{redactSecretsFromText(activeRecord?.stderr || rowTrace.stderr)}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/SandboxOrchestrationEditorPanel.jsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { ArrowLeft } from "lucide-react";
+import {
+  addCanonicalNodeToGraph,
+  buildBlankOrchestrationGraphShell,
+  buildDefaultOrchestrationGraphFromRegistry,
+  getNextCanonicalNodeId,
+  getOrchestrationGraphUiState,
+  parseOrchestrationGraph,
+  serializeOrchestrationGraph,
+  updateGraphNode,
+  validateOrchestrationGraph
+} from "@/lib/orchestration-graph";
+import { resolveConnectorAction } from "@/lib/orchestration-sidecar-routing";
+import { OrchestrationGraphCanvas } from "./OrchestrationGraphCanvas.jsx";
+import { OrchestrationGraphEmptyCanvas } from "./OrchestrationGraphEmptyCanvas.jsx";
+import { OrchestrationNodeConfigPanel } from "./OrchestrationNodeConfigPanel.jsx";
+
+function resolveRegistryRowForSandbox(workspaceConfig, sandboxRow) {
+  const graph = parseOrchestrationGraph(sandboxRow?.orchestrationGraph ?? sandboxRow?.orchestrationConfig);
+  const apiNode = graph?.nodes?.find((n) => n?.type === "api-registry-call");
+  const registryId = String(
+    apiNode?.config?.registryId || apiNode?.config?.integrationId || sandboxRow?.schedulerRegistryId || ""
+  ).trim();
+  if (!registryId || !workspaceConfig) return null;
+  const objects = Array.isArray(workspaceConfig?.dataModel?.objects) ? workspaceConfig.dataModel.objects : [];
+  for (const objectItem of objects) {
+    if (objectItem?.objectType !== "api-registry") continue;
+    const rows = Array.isArray(objectItem.rows) ? objectItem.rows : [];
+    const match = rows.find((r) => String(r?.integrationId || "").trim() === registryId);
+    if (match) return match;
+  }
+  return null;
+}
+
+export function SandboxOrchestrationEditorPanel({
+  sandboxRow,
+  workspaceConfig,
+  disabled,
+  onSaveGraph,
+  onBack
+}) {
+  const registryRow = useMemo(
+    () => resolveRegistryRowForSandbox(workspaceConfig, sandboxRow),
+    [workspaceConfig, sandboxRow]
+  );
+
+  const [selectedNodeId, setSelectedNodeId] = useState("input");
+  const [configTab, setConfigTab] = useState("node");
+  const [graphError, setGraphError] = useState("");
+  const savedGraph = sandboxRow?.orchestrationGraph ?? sandboxRow?.orchestrationConfig;
+  const [orchestrationGraph, setOrchestrationGraph] = useState(() => parseOrchestrationGraph(savedGraph));
+
+  const graphUiState = getOrchestrationGraphUiState(
+    orchestrationGraph ?? savedGraph
+  );
+  const graphUnset = graphUiState === "unset";
+  const graphBlankShell = graphUiState === "blank-shell";
+  const nextNodeId = useMemo(
+    () => (orchestrationGraph ? getNextCanonicalNodeId(orchestrationGraph) : "input"),
+    [orchestrationGraph]
+  );
+
+  const selectedNode = useMemo(() => {
+    if (!orchestrationGraph?.nodes || !selectedNodeId) return null;
+    return orchestrationGraph.nodes.find((n) => String(n.id) === selectedNodeId) || null;
+  }, [orchestrationGraph, selectedNodeId]);
+
+  useEffect(() => {
+    setOrchestrationGraph(parseOrchestrationGraph(sandboxRow?.orchestrationGraph ?? sandboxRow?.orchestrationConfig));
+  }, [sandboxRow?.orchestrationGraph, sandboxRow?.orchestrationConfig]);
+
+  useEffect(() => {
+    if (graphUnset) {
+      setGraphError("");
+      return;
+    }
+    if (graphBlankShell) {
+      setGraphError("");
+      onSaveGraph?.(serializeOrchestrationGraph(orchestrationGraph));
+      return;
+    }
+    const validation = validateOrchestrationGraph(orchestrationGraph);
+    setGraphError(validation.ok ? "" : validation.errors[0] || "Invalid graph");
+    onSaveGraph?.(serializeOrchestrationGraph(orchestrationGraph));
+  }, [orchestrationGraph, graphUnset, graphBlankShell, onSaveGraph]);
+
+  function startFromRegistry() {
+    if (!registryRow) return;
+    setOrchestrationGraph(buildDefaultOrchestrationGraphFromRegistry(registryRow));
+    setSelectedNodeId("input");
+    setConfigTab("node");
+  }
+
+  function startBlank() {
+    setOrchestrationGraph(buildBlankOrchestrationGraphShell());
+    setSelectedNodeId("input");
+    setConfigTab("node");
+  }
+
+  function applyPastedGraph(text) {
+    const parsed = parseOrchestrationGraph(text);
+    if (parsed) setOrchestrationGraph(parsed);
+  }
+
+  function addNextNode() {
+    if (!nextNodeId) return;
+    setOrchestrationGraph((g) => addCanonicalNodeToGraph(g || buildBlankOrchestrationGraphShell(), nextNodeId, registryRow || {}));
+    setSelectedNodeId(nextNodeId);
+    setConfigTab("node");
+  }
+
+  function handleConnectorAction(payload) {
+    const { nodeId, tab } = resolveConnectorAction(payload);
+    setSelectedNodeId(nodeId);
+    setConfigTab(tab);
+  }
+
+  function handleNodeConfigChange(configPatch) {
+    if (!selectedNodeId) return;
+    setOrchestrationGraph((g) => updateGraphNode(g, selectedNodeId, configPatch));
+  }
+
+  return (
+    <section className="dm-orchestration-sidecar" aria-label="Sandbox orchestration graph editor">
+      <header className="dm-orchestration-header">
+        <button type="button" className="dm-orchestration-header__back" onClick={onBack} aria-label="Back">
+          <ArrowLeft size={16} />
+        </button>
+        <div className="dm-orchestration-header__titles">
+          <h2>Orchestration graph</h2>
+          <p>{sandboxRow?.Name || "Sandbox tool"}</p>
+        </div>
+      </header>
+
+      <div className="dm-orchestration-sidecar__body">
+        <div className="dm-orchestration-sidecar__canvas-col">
+          {graphUnset ? (
+            <OrchestrationGraphEmptyCanvas
+              disabled={disabled || !registryRow}
+              onStartFromRegistry={registryRow ? startFromRegistry : undefined}
+              onStartBlank={startBlank}
+              onPasteGraph={applyPastedGraph}
+            />
+          ) : graphBlankShell ? (
+            <div className="dm-orchestration-canvas dm-orchestration-canvas--blank-shell">
+              <p className="dm-orchestration-canvas__blank-hint">Add first node</p>
+              <button type="button" className="dm-btn-outline" disabled={disabled} onClick={addNextNode}>
+                + Add Input
+              </button>
+            </div>
+          ) : (
+            <>
+              <OrchestrationGraphCanvas
+                graph={orchestrationGraph}
+                selectedNodeId={selectedNodeId}
+                onSelectNode={(node) => {
+                  setSelectedNodeId(String(node?.id || ""));
+                  setConfigTab("node");
+                }}
+                onConnectorAction={handleConnectorAction}
+              />
+              {nextNodeId && (
+                <button type="button" className="dm-btn-outline dm-orchestration-canvas__add-node" disabled={disabled} onClick={addNextNode}>
+                  + Add {nextNodeId === "api-request" ? "API Registry" : nextNodeId}
+                </button>
+              )}
+            </>
+          )}
+        </div>
+
+        {graphUiState === "populated" && (
+          <div className="dm-orchestration-sidecar__config-col">
+            <OrchestrationNodeConfigPanel
+              node={selectedNode}
+              registryRow={registryRow}
+              disabled={disabled}
+              activeTab={configTab}
+              onTabChange={setConfigTab}
+              onConfigChange={handleNodeConfigChange}
+            />
+            {graphError && <p className="dm-orchestration-config__error">{graphError}</p>}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/SandboxToolConfirmModal.jsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { X } from "lucide-react";
+import { summarizeOrchestrationGraph } from "@/lib/orchestration-graph";
+
+export function SandboxToolConfirmModal({
+  open,
+  toolName,
+  authRef,
+  orchestrationGraph,
+  onConfirm,
+  onCancel,
+  creating
+}) {
+  if (!open) return null;
+
+  const summary = summarizeOrchestrationGraph(orchestrationGraph);
+
+  return (
+    <div className="dm-orchestration-confirm dm-orchestration-confirm__backdrop" onClick={onCancel} role="presentation">
+      <section
+        className="dm-orchestration-confirm__dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="sandbox-tool-confirm-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <header className="dm-orchestration-confirm__head">
+          <div>
+            <p>Confirm</p>
+            <h2 id="sandbox-tool-confirm-title">Create sandbox tool?</h2>
+          </div>
+          <button type="button" className="dm-sidebar-close" onClick={onCancel} aria-label="Close">
+            <X size={16} />
+          </button>
+        </header>
+        <div className="dm-orchestration-confirm__body">
+          <p>This creates one Sandbox Environment row from the tested API Registry record.</p>
+          <ul className="dm-orchestration-confirm__list">
+            <li>Saves orchestrationGraph on the sandbox row</li>
+            <li>Stores <code>{authRef || "authRef"}</code> only — no secrets</li>
+            <li>Does not store secrets</li>
+            <li>Does not create widgets</li>
+            <li>Does not change dashboards</li>
+            <li>Does not change canvas</li>
+            <li>Does not run until you click Run sandbox</li>
+          </ul>
+          <p className="dm-orchestration-confirm__summary">
+            <span>Run plan</span>
+            {summary}
+          </p>
+        </div>
+        <footer className="dm-orchestration-confirm__foot">
+          <button type="button" className="dm-btn-outline" disabled={creating} onClick={onCancel}>
+            Cancel
+          </button>
+          <button type="button" className="dm-btn-primary-sm" disabled={creating} onClick={onConfirm}>
+            {creating ? "Creating…" : "Create tool"}
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}