@growthub/cli 0.13.9 → 0.14.1

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { Plus, Trash2 } from "lucide-react";
+import { Check, Plus, Trash2 } from "lucide-react";
 import { HOST_AUTH_CATALOG } from "@/lib/sandbox-agent-host-catalog";
 
 function getHostOptions() {
@@ -11,31 +11,63 @@ function getHostOptions() {
   }));
 }
 
-function patchOrchestrator(graph, patch) {
+function nodeSandboxRecordRef(objectId, rowName, nodeId) {
+  return {
+    objectId: String(objectId || "").trim(),
+    rowName: String(rowName || "").trim(),
+    nodeId: String(nodeId || "").trim()
+  };
+}
+
+function withRecordRef(patch, objectId, rowName, nodeId) {
+  return {
+    ...patch,
+    sandboxRecordRef: nodeSandboxRecordRef(objectId, rowName, nodeId)
+  };
+}
+
+function WorkflowCheckbox({ checked, disabled, onChange, children, title }) {
+  return (
+    <label className="dm-orchestration-config__field dm-orchestration-config__field-inline dm-workflow-check" title={title}>
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(event) => onChange?.(event.target.checked)}
+      />
+      <span className="dm-workflow-check__box" aria-hidden="true">
+        {checked ? <Check size={13} strokeWidth={2.4} /> : null}
+      </span>
+      <span>{children}</span>
+    </label>
+  );
+}
+
+function patchOrchestrator(graph, patch, objectId, rowName) {
   const nodes = Array.isArray(graph?.nodes) ? graph.nodes : [];
   return {
     ...graph,
     nodes: nodes.map((node) =>
       node?.type === "thinAdapter"
-        ? { ...node, config: { ...(node.config || {}), ...patch } }
+        ? { ...node, config: { ...(node.config || {}), ...withRecordRef(patch, objectId, rowName, node.id) } }
         : node
     )
   };
 }
 
-function patchSynthesis(graph, patch) {
+function patchSynthesis(graph, patch, objectId, rowName) {
   const nodes = Array.isArray(graph?.nodes) ? graph.nodes : [];
   return {
     ...graph,
     nodes: nodes.map((node) =>
       node?.type === "tool-result"
-        ? { ...node, config: { ...(node.config || {}), ...patch } }
+        ? { ...node, config: { ...(node.config || {}), ...withRecordRef(patch, objectId, rowName, node.id) } }
         : node
     )
   };
 }
 
-function patchSubagent(graph, nodeId, patch) {
+function patchSubagent(graph, nodeId, patch, objectId, rowName) {
   const nodes = Array.isArray(graph?.nodes) ? graph.nodes : [];
   return {
     ...graph,
@@ -44,7 +76,7 @@ function patchSubagent(graph, nodeId, patch) {
         ? {
             ...node,
             label: patch.role != null ? String(patch.role) : node.label,
-            config: { ...(node.config || {}), ...patch }
+            config: { ...(node.config || {}), ...withRecordRef(patch, objectId, rowName, node.id) }
           }
         : node
     )
@@ -107,7 +139,7 @@ function patchSwarmConfig(graph, patch) {
   return { ...graph, swarm: { ...base, ...patch } };
 }
 
-export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
+export function AgentSwarmPanel({ graph, objectId, rowName, onGraphChange, disabled }) {
   const hostOptions = useMemo(getHostOptions, []);
   if (!graph || typeof graph !== "object") return null;
 
@@ -133,7 +165,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
               rows={3}
               value={orchestrator?.config?.prompt || ""}
               disabled={disabled || !orchestrator}
-              onChange={(e) => patchGraph((g) => patchOrchestrator(g, { prompt: e.target.value }))}
+              onChange={(e) => patchGraph((g) => patchOrchestrator(g, { prompt: e.target.value }, objectId, rowName))}
             />
           </label>
         </div>
@@ -163,7 +195,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                     placeholder="Role"
                     value={cfg.role || node.label || ""}
                     disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { role: e.target.value }))}
+                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { role: e.target.value }, objectId, rowName))}
                   />
                   <button
                     type="button"
@@ -181,7 +213,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                     placeholder="One-sentence charter"
                     value={cfg.description || ""}
                     disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { description: e.target.value }))}
+                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { description: e.target.value }, objectId, rowName))}
                   />
                 </label>
                 <label className="dm-orchestration-config__field">
@@ -190,7 +222,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                     rows={2}
                     value={cfg.taskPrompt || ""}
                     disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { taskPrompt: e.target.value }))}
+                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { taskPrompt: e.target.value }, objectId, rowName))}
                   />
                 </label>
                 <label className="dm-orchestration-config__field">
@@ -201,7 +233,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                     disabled={disabled}
                     onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, {
                       tools: e.target.value.split(",").map((t) => t.trim()).filter(Boolean)
-                    }))}
+                    }, objectId, rowName))}
                   />
                 </label>
                 <label className="dm-orchestration-config__field">
@@ -212,7 +244,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                     placeholder="0 = inherit"
                     value={cfg.maxTokens || 0}
                     disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { maxTokens: Math.max(0, Number(e.target.value) || 0) }))}
+                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { maxTokens: Math.max(0, Number(e.target.value) || 0) }, objectId, rowName))}
                   />
                 </label>
                 <label className="dm-orchestration-config__field">
@@ -220,7 +252,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                   <select
                     value={cfg.agentHost || ""}
                     disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { agentHost: e.target.value }))}
+                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { agentHost: e.target.value }, objectId, rowName))}
                   >
                     <option value="">Inherit</option>
                     {hostOptions.map((opt) => (
@@ -228,27 +260,21 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                     ))}
                   </select>
                 </label>
-                <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-                  <input
-                    type="checkbox"
-                    checked={cfg.required !== false}
-                    disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { required: e.target.checked }))}
-                  />
-                  <span>Required</span>
-                </label>
-                <label
-                  className="dm-orchestration-config__field dm-orchestration-config__field-inline"
+                <WorkflowCheckbox
+                  checked={cfg.required !== false}
+                  disabled={disabled}
+                  onChange={(checked) => patchGraph((g) => patchSubagent(g, node.id, { required: checked }, objectId, rowName))}
+                >
+                  Required
+                </WorkflowCheckbox>
+                <WorkflowCheckbox
+                  checked={cfg.networkAccess === true}
+                  disabled={disabled}
                   title="Network is granted only when both this and the row's networkAllow are on."
+                  onChange={(checked) => patchGraph((g) => patchSubagent(g, node.id, { networkAccess: checked }, objectId, rowName))}
                 >
-                  <input
-                    type="checkbox"
-                    checked={cfg.networkAccess === true}
-                    disabled={disabled}
-                    onChange={(e) => patchGraph((g) => patchSubagent(g, node.id, { networkAccess: e.target.checked }))}
-                  />
-                  <span>Network</span>
-                </label>
+                  Network
+                </WorkflowCheckbox>
               </div>
             );
           })}
@@ -315,7 +341,7 @@ export function AgentSwarmPanel({ graph, onGraphChange, disabled }) {
                 rows={2}
                 value={synthesis?.config?.outcomePrompt || ""}
                 disabled={disabled}
-                onChange={(e) => patchGraph((g) => patchSynthesis(g, { outcomePrompt: e.target.value }))}
+                onChange={(e) => patchGraph((g) => patchSynthesis(g, { outcomePrompt: e.target.value }, objectId, rowName))}
               />
             </label>
           </div>

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

@@ -0,0 +1,200 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * ApiRegistryCreationCockpit — the governed creation interface for one API,
+ * rendered inside the existing api-registry record drawer (DataModelShell).
+ *
+ * Renders the ordered journey from `deriveApiRegistryCreationState`
+ * (lib/api-registry-creation-flow.js) plus, once the API is tested, the response
+ * Shape analysis (`profileApiResponse` / `recommendResolver`) and a receipts log
+ * of real actions. Every actionable step's button calls back into the drawer's
+ * existing governed handlers via `onAction(action)` — status, the highlighted
+ * "next" step, the activation score, and which buttons are live all come from
+ * derivation/real responses, never guessed.
+ *
+ * Visual language is the workspace's own: the `.dm-db-status` chip and `dm-btn-*`
+ * buttons. No invented colors, no new primitive.
+ */
+
+const STEP_STATUS = {
+  complete: { mod: "ok", label: "Done" },
+  active: { mod: "warn", label: "Next" },
+  pending: { mod: "", label: "Pending" },
+  blocked: { mod: "", label: "Blocked" },
+  optional: { mod: "", label: "Optional" },
+};
+
+const RESOLVER_LEVEL = {
+  optional: { mod: "", label: "Resolver optional" },
+  recommended: { mod: "warn", label: "Resolver recommended" },
+  required: { mod: "bad", label: "Resolver required" },
+};
+
+function StatusChip({ mod, children, className = "" }) {
+  return (
+    <span className={`dm-db-status${mod ? ` ${mod}` : ""}${className ? ` ${className}` : ""}`}>
+      <span />
+      {children}
+    </span>
+  );
+}
+
+export function ApiRegistryCreationCockpit({
+  state,
+  onAction,
+  busyAction = "",
+  disabled = false,
+  profile = null,
+  resolverRec = null,
+  receipts = [],
+  dataSourcePreview = null,
+  eyebrow = "Governed creation",
+  defaultCollapsed = false,
+  hideWhenComplete = false,
+  onCollapsedChange,
+}) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  useEffect(() => {
+    setCollapsed(defaultCollapsed || Boolean(hideWhenComplete && state?.complete));
+  }, [defaultCollapsed, hideWhenComplete, state?.complete, state?.integrationId]);
+  if (!state || !Array.isArray(state.steps)) return null;
+  if (hideWhenComplete && state.complete) return null;
+  const candidates = profile?.candidates || {};
+  const candidateEntries = Object.entries(candidates).filter(([, v]) => v);
+  const previewRow = dataSourcePreview?.row || null;
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  const runAction = (action) => {
+    if (action?.id === "edit") {
+      setCollapsed(true);
+      onCollapsedChange?.(true);
+    }
+    onAction?.(action);
+  };
+
+  return (
+    <section className={`dm-api-action-card dm-cockpit${collapsed ? " is-collapsed" : ""}`} aria-label="API creation journey">
+      <button
+        type="button"
+        className="dm-cockpit-head"
+        aria-expanded={!collapsed}
+        onClick={toggleCollapsed}
+      >
+        <div className="dm-api-action-card-body">
+          <p className="dm-api-action-card-eyebrow">{eyebrow} · {state.score}% activated</p>
+          <h3>{state.headline}</h3>
+        </div>
+        <span className="dm-cockpit-count">{state.completedCount}/{state.totalCount}</span>
+      </button>
+
+      {!collapsed && <ol className="dm-cockpit-steps">
+        {state.steps.map((step) => {
+          const meta = STEP_STATUS[step.status] || STEP_STATUS.pending;
+          const isNext = step.id === state.nextStepId;
+          const action = step.action;
+          const isBusy = action && busyAction === `${step.id}:${action.id}`;
+          return (
+            <li
+              key={step.id}
+              className={`dm-cockpit-step${isNext ? " dm-cockpit-step-next" : ""}${step.status === "blocked" ? " dm-cockpit-step-muted" : ""}`}
+            >
+              <StatusChip mod={meta.mod} className="dm-cockpit-step-chip">{meta.label}</StatusChip>
+              <div className="dm-cockpit-step-body">
+                <p className="dm-cockpit-step-label">{step.label}</p>
+                <p className="dm-cockpit-step-desc">{step.description}</p>
+                {step.hint ? <p className="dm-cockpit-step-hint">{step.hint}</p> : null}
+              </div>
+              {action ? (
+                <button
+                  type="button"
+                  className={isNext ? "dm-btn-primary-sm" : "dm-btn-outline"}
+                  disabled={disabled || Boolean(busyAction)}
+                  onClick={() => runAction(action)}
+                >
+                  {isBusy ? "Working…" : action.label}
+                </button>
+              ) : null}
+            </li>
+          );
+        })}
+      </ol>}
+
+      {!collapsed && profile && profile.parsed ? (
+        <div className="dm-cockpit-shape">
+          <div className="dm-cockpit-shape-head">
+            <p className="dm-api-action-card-eyebrow">Response shape</p>
+            {resolverRec ? (
+              <StatusChip mod={(RESOLVER_LEVEL[resolverRec.level] || RESOLVER_LEVEL.optional).mod}>
+                {(RESOLVER_LEVEL[resolverRec.level] || RESOLVER_LEVEL.optional).label}
+              </StatusChip>
+            ) : null}
+          </div>
+          <p className="dm-cockpit-step-desc">
+            {profile.usable
+              ? `${profile.recordCount} record${profile.recordCount === 1 ? "" : "s"}${profile.arrayPath ? ` at "${profile.arrayPath}"` : " (top-level)"} · entity "${profile.suggestedEntityType}".`
+              : "No record array detected in the response."}
+          </p>
+          {resolverRec ? <p className="dm-cockpit-step-hint">{resolverRec.reason}</p> : null}
+          {candidateEntries.length ? (
+            <div className="dm-cockpit-fields">
+              {candidateEntries.map(([role, name]) => (
+                <span key={role} className="dm-cockpit-field"><b>{role}</b>{name}</span>
+              ))}
+            </div>
+          ) : null}
+          {profile.hasPagination ? (
+            <p className="dm-cockpit-step-hint">Pagination keys present — a resolver is needed to fetch every page.</p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {!collapsed && previewRow ? (
+        <div className="dm-cockpit-shape">
+          <p className="dm-api-action-card-eyebrow">Data Source preview</p>
+          <p className="dm-cockpit-step-desc">
+            Create will add a live-backed Data Source object that references this API by <code>registryId</code> and writes records to the source-records sidecar. Nothing fetches until you Refresh.
+          </p>
+          <div className="dm-cockpit-fields">
+            <span className="dm-cockpit-field"><b>name</b>{previewRow.Name}</span>
+            <span className="dm-cockpit-field"><b>sourceId</b>{previewRow.sourceId}</span>
+            <span className="dm-cockpit-field"><b>storage</b>{previewRow.sourceStorage}</span>
+            <span className="dm-cockpit-field"><b>entity</b>{previewRow.entityType}</span>
+            <span className="dm-cockpit-field"><b>registryId</b>{previewRow.registryId}</span>
+            {previewRow.authRef ? <span className="dm-cockpit-field"><b>authRef</b>{previewRow.authRef}</span> : null}
+          </div>
+          {Array.isArray(dataSourcePreview.fields) && dataSourcePreview.fields.length ? (
+            <>
+              <p className="dm-cockpit-step-hint">Detected fields it will carry:</p>
+              <div className="dm-cockpit-fields">
+                {dataSourcePreview.fields.slice(0, 10).map((f) => (
+                  <span key={f.name} className="dm-cockpit-field"><b>{f.role || f.type}</b>{f.name}</span>
+                ))}
+              </div>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+
+      {!collapsed && Array.isArray(receipts) && receipts.length ? (
+        <div className="dm-cockpit-receipts">
+          <p className="dm-api-action-card-eyebrow">Receipts</p>
+          <ul>
+            {receipts.slice(0, 6).map((r, i) => (
+              <li key={`${r.at}-${i}`} className="dm-cockpit-receipt">
+                <StatusChip mod={r.ok ? "ok" : "bad"} className="dm-cockpit-receipt-chip">{r.kind}</StatusChip>
+                <span className="dm-cockpit-receipt-text">{r.detail}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+export default ApiRegistryCreationCockpit;