@growthub/cli 0.14.0 → 0.14.2

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/helper-commands.js

@@ -0,0 +1,150 @@
+/**
+ * Helper slash-command registry (SWARM_RUN_CONTRACT_V1, Phase 6).
+ *
+ * Pure module — no React, no fetch, no config writes. The HelperSidecar
+ * composer consumes this registry to render the "/" menu; unit tests assert
+ * its governance invariants.
+ *
+ * Governance rules encoded here:
+ *   - read-only commands (mutates: false) may switch the sidecar view or
+ *     seed a prompt — they never create proposals or patch config.
+ *   - mutating commands (mutates: true) only ever SEED a helper proposal
+ *     request (intent + prompt template). The proposal still travels the
+ *     full governed chain: helper query → review → helper/apply → receipt.
+ *   - no command executes sandbox-run directly and no command patches
+ *     workspace config directly.
+ */
+
+export const HELPER_COMMANDS = [
+  {
+    name: "/goal",
+    label: "Goal",
+    description: "Set a verifiable goal for this helper session",
+    scope: "chat",
+    mutates: false,
+    promptTemplate: "Set a verifiable goal for this helper session:"
+  },
+  {
+    name: "/loop",
+    label: "Loop",
+    description: "Propose a governed recurring loop — reviewed before anything runs",
+    scope: "workspace",
+    mutates: true,
+    promptTemplate: "Propose a governed loop:"
+  },
+  {
+    name: "/workflows",
+    label: "Workflows",
+    description: "Open the background tasks list — read-only, no writes",
+    scope: "workspace",
+    mutates: false,
+    view: "swarm-list"
+  },
+  {
+    name: "/swarm",
+    label: "Swarm",
+    description: "Propose a governed agent swarm — you review and apply before any run",
+    scope: "swarm",
+    mutates: true,
+    intent: "swarm",
+    promptTemplate: "Propose a governed agent swarm:"
+  },
+  {
+    name: "/register-api",
+    label: "Register API",
+    description: "Draft an API Registry entry as a reviewable proposal",
+    scope: "workspace",
+    mutates: true,
+    intent: "register_api"
+  },
+  {
+    name: "/create-object",
+    label: "Create object",
+    description: "Translate a plain-language description into a new business object",
+    scope: "workspace",
+    mutates: true,
+    intent: "create_object"
+  }
+];
+
+// The full behavioral surface a command may declare. Anything outside this
+// list (execute hooks, patch fields, fetch targets…) is a governance
+// violation — commands are a keyboard front-end to the existing pill
+// intent system, never an action runner.
+export const HELPER_COMMAND_ALLOWED_KEYS = [
+  "name",
+  "label",
+  "description",
+  "scope",
+  "mutates",
+  "promptTemplate",
+  "view",
+  "intent"
+];
+
+/**
+ * Pure governance validator for one command entry. Used by the unit suite
+ * against the live registry AND against forged entries (proving the
+ * invariant bites). Returns { ok, error }.
+ */
+export function isGovernedHelperCommand(cmd) {
+  if (!cmd || typeof cmd !== "object") return { ok: false, error: "command must be an object" };
+  if (typeof cmd.name !== "string" || !cmd.name.startsWith("/")) {
+    return { ok: false, error: "command name must start with /" };
+  }
+  if (typeof cmd.label !== "string" || !cmd.label) return { ok: false, error: `${cmd.name}: label required` };
+  if (typeof cmd.mutates !== "boolean") return { ok: false, error: `${cmd.name}: mutates must be declared` };
+  for (const key of Object.keys(cmd)) {
+    if (!HELPER_COMMAND_ALLOWED_KEYS.includes(key)) {
+      return { ok: false, error: `${cmd.name}: behavior key "${key}" is outside the governed surface` };
+    }
+  }
+  if (cmd.mutates) {
+    if (!cmd.intent && !cmd.promptTemplate) {
+      return { ok: false, error: `${cmd.name}: mutating commands must seed a governed proposal request` };
+    }
+    if (cmd.view) {
+      return { ok: false, error: `${cmd.name}: mutating commands must not switch views directly` };
+    }
+  }
+  return { ok: true, error: null };
+}
+
+/**
+ * Fuzzy-filter the registry against what the user typed after "/".
+ * Matches subsequences against the command name and label so "/wf" hits
+ * "/workflows" and "swm" hits "/swarm". Empty query returns everything.
+ */
+export function matchHelperCommands(query, commands = HELPER_COMMANDS) {
+  const text = String(query || "").trim().toLowerCase().replace(/^\//, "");
+  if (!text) return commands.slice();
+  const isSubsequence = (needle, haystack) => {
+    let i = 0;
+    for (const ch of haystack) {
+      if (ch === needle[i]) i += 1;
+      if (i >= needle.length) return true;
+    }
+    return needle.length === 0;
+  };
+  return commands.filter((cmd) => {
+    const name = cmd.name.toLowerCase().replace(/^\//, "");
+    const label = cmd.label.toLowerCase();
+    return name.includes(text) || label.includes(text)
+      || isSubsequence(text, name) || isSubsequence(text, label);
+  });
+}
+
+/**
+ * Parse a composer value into a slash-menu state. The menu only engages
+ * when "/" is the FIRST character of the prompt — a slash mid-sentence
+ * (URLs, paths) never hijacks typing.
+ */
+export function parseSlashInput(value) {
+  const text = String(value || "");
+  if (!text.startsWith("/")) return { active: false, query: "", matches: [] };
+  // Once whitespace follows the command token the user is writing the
+  // body — keep the menu closed.
+  const token = text.slice(1);
+  if (/\s/.test(token)) return { active: false, query: "", matches: [] };
+  return { active: true, query: token, matches: matchHelperCommands(token) };
+}

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/globals.css

@@ -5435,7 +5435,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   min-height: 520px;
   align-items: center;
   justify-content: center;
-  padding: 64px 24px;
+  padding: 96px 24px;
   border: 0;
   border-radius: 0;
   background-color: #fff;
@@ -5443,6 +5443,12 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   background-size: 20px 20px;
   box-shadow: none;
   overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.dm-workflow-orchestration .dm-orchestration-canvas:active {
+  cursor: grabbing;
 }
 .dm-workflow-orchestration .dm-orchestration-canvas__badge {
   top: 16px;
@@ -5498,8 +5504,11 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   display: flex;
   flex-direction: column;
   align-items: center;
-  transform-origin: center top;
+  padding: 96px 0;
+  transform-origin: center center;
   transition: transform .12s ease;
+  will-change: transform;
+  cursor: default;
 }
 .dm-workflow-orchestration .dm-orchestration-canvas__step {
   width: 173px;
@@ -5737,6 +5746,58 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   padding: 7px 9px;
   box-sizing: border-box;
 }
+.dm-workflow-orchestration .dm-orchestration-config__field input[type="number"]::-webkit-outer-spin-button,
+.dm-workflow-orchestration .dm-orchestration-config__field input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.dm-workflow-orchestration .dm-orchestration-config__field input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.dm-workflow-orchestration .dm-workflow-check {
+  width: fit-content;
+  display: inline-flex;
+  grid-template-columns: none;
+  align-items: center;
+  gap: 7px;
+  min-height: 26px;
+  cursor: pointer;
+}
+.dm-workflow-orchestration .dm-workflow-check input[type="checkbox"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.dm-workflow-orchestration .dm-workflow-check__box {
+  width: 16px;
+  height: 16px;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #f8fafc;
+  color: #111827;
+  box-sizing: border-box;
+}
+.dm-workflow-orchestration .dm-workflow-check:hover .dm-workflow-check__box {
+  border-color: #9ca3af;
+  background: #fff;
+}
+.dm-workflow-orchestration .dm-workflow-check input[type="checkbox"]:checked + .dm-workflow-check__box {
+  border-color: #111827;
+  background: #fff;
+}
+.dm-workflow-orchestration .dm-workflow-check input[type="checkbox"]:focus-visible + .dm-workflow-check__box {
+  outline: 2px solid #d1d5db;
+  outline-offset: 2px;
+}
+.dm-workflow-orchestration .dm-workflow-check input[type="checkbox"]:disabled + .dm-workflow-check__box {
+  opacity: .55;
+}
 .dm-workflow-orchestration .dm-orchestration-config__field input:focus,
 .dm-workflow-orchestration .dm-orchestration-config__field textarea:focus,
 .dm-workflow-orchestration .dm-orchestration-config__field select:focus {
@@ -6068,6 +6129,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-orch-modal-summary span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
 .dm-orch-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #edf0f3; }
 .dm-record-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #edf0f3; }
+.dm-record-drawer-head > div:first-child { min-width: 0; flex: 1 1 auto; }
 .dm-record-drawer-actions { display: inline-flex; align-items: center; gap: 8px; }
 .dm-record-head-run { min-height: 30px; padding: 0 11px; }
 .dm-record-drawer-actions { display: inline-flex; align-items: center; gap: 8px; }
@@ -6079,7 +6141,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-drawer-hidden-fields > span { color: #64748b; font-size: 12px; font-weight: 600; }
 .dm-drawer-hidden-list { display: flex; flex-wrap: wrap; gap: 8px; }
 .dm-record-drawer-head p { margin: 0 0 3px; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
-.dm-record-drawer-head h2 { margin: 0; color: #111827; font-size: 16px; font-weight: 650; }
+.dm-record-drawer-head h2 { margin: 0; color: #111827; font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-record-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 0 28px; }
 .dm-record-testbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
 .dm-record-testbar > span:last-child { min-width: 0; color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -6188,11 +6250,19 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-drawer-section.open .dm-drawer-section-toggle svg { transform: rotate(90deg); }
 .dm-drawer-section-body { display: grid; gap: 10px; padding: 11px; }
 .dm-sandbox-config { display: grid; gap: 8px; }
+.dm-sandbox-config > .dm-cockpit { width: 100%; margin: 12px 0 8px; box-sizing: border-box; }
 .dm-radio-row { display: grid; gap: 8px; }
 .dm-radio-row label, .dm-check-row { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; column-gap: 8px; color: #1f2937; font-size: 12px; line-height: 1.35; }
+.dm-check-row-compact { grid-template-columns: 16px max-content 22px; align-items: center; width: fit-content; max-width: 100%; }
 .dm-radio-row input[type="radio"], .dm-check-row input[type="checkbox"] { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; box-shadow: none; accent-color: #111827; }
 .dm-radio-row span, .dm-check-row span { color: #1f2937; font-size: 12px; font-weight: 500; }
 .dm-check-row { cursor: pointer; }
+.dm-check-row-compact > label { color: #1f2937; font-size: 12px; font-weight: 500; cursor: pointer; }
+.dm-help-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
+.dm-icon-help { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: #64748b; padding: 0; cursor: help; }
+.dm-icon-help:hover, .dm-icon-help:focus-visible { background: #f1f5f9; color: #334155; outline: none; }
+.dm-help-bubble { position: absolute; z-index: 80; left: 22px; top: 50%; transform: translateY(-50%); width: min(280px, calc(100vw - 48px)); display: none; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.16); color: #334155; font-size: 11px; font-weight: 500; line-height: 1.4; padding: 8px 9px; }
+.dm-help-wrap:hover .dm-help-bubble, .dm-help-bubble.is-open { display: block; }
 .dm-select { position: relative; width: 100%; min-width: 0; font-size: 11px; }
 .dm-select-trigger { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.05); font: inherit; font-size: 11px; padding: 6px 10px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
 .dm-select-trigger:hover:not(:disabled) { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
@@ -8746,6 +8816,10 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-run-console__tree-dot[data-variant="fail"] { background: #dc2626; }
 .dm-run-console__tree-dot[data-variant="active"] { background: #2563eb; }
 .dm-run-console__tree-dot[data-variant="canceled"] { background: #9ca3af; }
+/* Pending (hollow) — the ONE sanctioned swarm-cockpit grammar addition:
+   "declared but not started" reads as an outline in the SAME grey token the
+   canceled/base dot already uses. No new color values. */
+.dm-run-console__tree-dot[data-variant="pending"] { background: transparent; border: 1px solid #9ca3af; }
 .dm-run-console__tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-run-console__tree-meta { color: #6b7280; font-size: 10px; font-variant-numeric: tabular-nums; }
 .dm-run-console__tree-bar { display: block; width: 56px; height: 4px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
@@ -9114,3 +9188,62 @@ body.workspace-rail-collapsed .workspace-builder.workspace-lens-page,
 .workspace-template-context-banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 12px; margin: 0 0 12px; }
 .workspace-template-context-banner.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
 .workspace-template-context-banner .workspace-template-context-link { color: inherit; text-decoration: underline; font-weight: 600; margin-left: auto; }
+
+/* ---------------------------------------------------------------------------
+   Governed Swarm Cockpit (SWARM_RUN_CONTRACT_V1) — structural layout ONLY.
+   No new colors, borders, backgrounds, icons, or motion: every visual
+   treatment comes from existing primitives composed in the JSX —
+   dm-helper-toolcall(-row/-title/-chevron/-body/-json), dm-helper-stream,
+   dm-helper-error, dm-run-console__hint, dm-run-console__tree-dot,
+   dm-btn-ghost, dm-sidecar-header, dm-helper-pill-menu. The dm-swarm-*
+   classes below carry layout, spacing, grid, overflow, and typography
+   weight/size exclusively. */
+
+/* Slash command menu — same dm-helper-pill-menu primitive, anchored above
+   the composer textarea instead of below a pill. */
+.dm-helper-composer-input { position: relative; }
+.dm-helper-slash-menu { bottom: calc(100% + 6px); top: auto; left: 0; right: 0; }
+.dm-helper-slash-menu .dm-helper-pill-menu-item { justify-content: space-between; gap: 10px; }
+.dm-helper-slash-menu .dm-field-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dm-helper-slash-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+
+/* Cockpit body — scrolling list inside the existing sidecar body. */
+.dm-swarm-body { display: flex; flex-direction: column; min-height: 0; }
+.dm-swarm-cockpit { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
+.dm-swarm-cockpit-list { display: flex; flex-direction: column; gap: 8px; }
+.dm-swarm-section-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
+
+/* Run card — surface chrome comes from dm-helper-toolcall in the JSX. */
+.dm-swarm-card { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
+.dm-swarm-card-head { display: flex; align-items: center; gap: 8px; }
+.dm-swarm-card-title { flex: 1; }
+.dm-swarm-card-action { height: 24px; padding: 0 7px; }
+.dm-swarm-card-meta { display: flex; align-items: center; gap: 10px; }
+.dm-swarm-card-meta .dm-run-console__hint { font-size: 12px; }
+.dm-swarm-card-kind { font-weight: 600; }
+.dm-swarm-card-desc { font-size: 12px; padding: 7px 9px; }
+
+/* Phase groups — dm-helper-toolcall card + dm-helper-toolcall-row head. */
+.dm-swarm-phases { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
+.dm-swarm-phase { display: flex; flex-direction: column; }
+.dm-swarm-phase-head { grid-template-columns: 1fr auto; min-height: 30px; padding: 6px 10px; }
+.dm-swarm-dotstrip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0 10px 8px; }
+
+/* Agent table — Agent | Tokens | Tools | Time, inside dm-helper-toolcall-body. */
+.dm-swarm-agent-table { display: flex; flex-direction: column; gap: 1px; }
+.dm-swarm-agent-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 44px 48px; align-items: center; gap: 6px; padding: 3px 4px; font: inherit; font-size: 12px; background: transparent; border: 0; cursor: pointer; text-align: left; }
+.dm-swarm-agent-header { cursor: default; }
+.dm-swarm-agent-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dm-swarm-agent-cell { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Transcript drill-in — existing tool-call JSON pre is the output frame. */
+.dm-swarm-transcript { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
+.dm-swarm-transcript-head { display: flex; align-items: center; justify-content: space-between; }
+.dm-swarm-transcript-expand { align-self: flex-end; margin-top: 4px; }
+
+/* Expand view — full-width takeover within the same sidecar shell; the
+   head reuses dm-sidecar-header chrome. */
+.dm-swarm-expand { display: flex; flex-direction: column; min-height: 0; flex: 1; }
+.dm-swarm-expand-head { justify-content: flex-start; gap: 8px; }
+.dm-swarm-expand-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
+.dm-swarm-expand-body .dm-helper-toolcall-json { max-height: none; }

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workflows/WorkflowSurface.jsx

@@ -4,10 +4,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
+  ArrowDown,
+  ArrowUp,
   ArrowUpCircle,
   Bot,
-  ChevronDown,
-  ChevronUp,
   Code,
   Filter,
   FormInput,
@@ -135,6 +135,29 @@ function patchSandboxRowInConfig(workspaceConfig, objectId, rowIndex, fields) {
   };
 }
 
+function nodeSandboxRecordRef(objectId, rowName, nodeId) {
+  return {
+    objectId: String(objectId || "").trim(),
+    rowName: String(rowName || "").trim(),
+    nodeId: String(nodeId || "").trim()
+  };
+}
+
+function withGraphSandboxRecordRefs(graph, objectId, rowName) {
+  const parsed = parseOrchestrationGraph(graph) || graph;
+  if (!parsed || typeof parsed !== "object") return parsed;
+  return {
+    ...parsed,
+    nodes: (Array.isArray(parsed.nodes) ? parsed.nodes : []).map((node) => ({
+      ...node,
+      config: {
+        ...(node?.config || {}),
+        sandboxRecordRef: nodeSandboxRecordRef(objectId, rowName, node?.id)
+      }
+    }))
+  };
+}
+
 const WORKFLOW_ACTION_GROUPS = [
   {
     label: "Data",
@@ -243,6 +266,7 @@ function getNodeDeltaRecords(previousGraph, nextGraph) {
         nodeId,
         nodeType: String(node?.type || ""),
         label: String(node?.label || node?.sandbox || nodeId),
+        sandboxRecordRef: config.sandboxRecordRef || null,
         changeReason,
         deltaTags,
         requiresRetest: config.requiresRetest !== false,
@@ -497,8 +521,16 @@ export default function WorkflowSurface() {
 
   const selectedNode = useMemo(() => {
     if (!orchestrationGraph?.nodes || !selectedNodeId) return null;
-    return orchestrationGraph.nodes.find((n) => String(n.id) === selectedNodeId) || null;
-  }, [orchestrationGraph, selectedNodeId]);
+    const node = orchestrationGraph.nodes.find((n) => String(n.id) === selectedNodeId) || null;
+    if (!node) return null;
+    return {
+      ...node,
+      config: {
+        ...(node.config || {}),
+        sandboxRecordRef: nodeSandboxRecordRef(objectId, rowId, node.id)
+      }
+    };
+  }, [orchestrationGraph, selectedNodeId, objectId, rowId]);
 
   useEffect(() => {
     if (graphUnset || graphBlankShell) {
@@ -521,7 +553,7 @@ export default function WorkflowSurface() {
   }
 
   function serializeCurrentGraph() {
-    return graphUnset ? "" : serializeOrchestrationGraph(orchestrationGraph);
+    return graphUnset ? "" : serializeOrchestrationGraph(withGraphSandboxRecordRefs(orchestrationGraph, objectId, rowId));
   }
 
   async function saveDraft(extraFields = {}) {
@@ -588,7 +620,8 @@ export default function WorkflowSurface() {
       const nextVersion = Number.isFinite(currentVersion) ? String(currentVersion + 1) : "1";
       const previousDeltas = Array.isArray(sandboxRow?.orchestrationDeltas) ? sandboxRow.orchestrationDeltas : [];
       const previousPublishedGraph = parseOrchestrationGraph(sandboxRow?.[effectiveFieldName]);
-      const nodeDeltas = getNodeDeltaRecords(previousPublishedGraph, orchestrationGraph);
+      const graphWithRefs = withGraphSandboxRecordRefs(orchestrationGraph, objectId, rowId);
+      const nodeDeltas = getNodeDeltaRecords(previousPublishedGraph, graphWithRefs);
       const deltaTags = normalizeDeltaTags(nodeDeltas.flatMap((delta) => delta.deltaTags));
       const changeReason = nodeDeltas.map((delta) => delta.changeReason).filter(Boolean).join("\n");
       const next = patchSandboxRowInConfig(workspaceConfig, objectId, resolved.rowIndex, {
@@ -798,8 +831,12 @@ export default function WorkflowSurface() {
   function handleNodeConfigChange(configPatch) {
     if (!selectedNodeId) return;
     const { __nodePatch, ...configOnly } = configPatch || {};
+    const recordRef = nodeSandboxRecordRef(objectId, rowId, selectedNodeId);
     setOrchestrationGraph((g) => {
-      const updated = updateGraphNode(g, selectedNodeId, configOnly);
+      const updated = updateGraphNode(g, selectedNodeId, {
+        ...configOnly,
+        sandboxRecordRef: recordRef
+      });
       if (!__nodePatch || typeof __nodePatch !== "object") return updated;
       const parsed = parseOrchestrationGraph(updated) || updated;
       return {
@@ -875,6 +912,7 @@ export default function WorkflowSurface() {
       })
     : null;
   const isServerlessWorkflow = Boolean(serverlessState?.isServerless);
+  const showServerlessUpgrade = String(sandboxRow?.adapter || "").trim() !== "local-intelligence";
 
   async function patchSandboxAndPersist(fields) {
     if (resolved.rowIndex < 0 || !objectId || !workspaceConfig) return;
@@ -960,7 +998,7 @@ export default function WorkflowSurface() {
                 setAddTarget(null);
               }}
             >
-              <ChevronDown size={14} />
+              <ArrowDown size={13} />
             </button>
             <button
               type="button"
@@ -974,9 +1012,9 @@ export default function WorkflowSurface() {
                 setAddTarget(null);
               }}
             >
-              <ChevronUp size={14} />
+              <ArrowUp size={13} />
             </button>
-            {sandboxRow && (
+            {sandboxRow && showServerlessUpgrade && (
               <button
                 type="button"
                 className={"dm-workflow-icon-btn dm-workflow-upgrade-btn" + (isServerlessWorkflow ? " is-serverless" : (upgradeState.showOnboarding ? " is-pulse" : ""))}
@@ -1014,7 +1052,13 @@ export default function WorkflowSurface() {
                 <Power size={13} /> {publishing ? "Publishing" : "Publish"}
               </button>
             )}
-            <button type="button" className="dm-workflow-chip-btn" disabled={!sandboxRow} onClick={openTraceMode}>
+            <button
+              type="button"
+              className="dm-workflow-chip-btn"
+              onClick={() => {
+                if (sandboxRow) openTraceMode();
+              }}
+            >
               <History size={13} /> See Runs
             </button>
             {sidecarMode === "trace" && (
@@ -1056,7 +1100,7 @@ export default function WorkflowSurface() {
 
         {/* One-time serverless upgrade onboarding — shows only when the operator
             has workflows but none are serverless, and hasn't dismissed it. */}
-        {sandboxRow && !upgradeOpen && upgradeState.showOnboarding ? (
+        {sandboxRow && showServerlessUpgrade && !upgradeOpen && upgradeState.showOnboarding ? (
           <div className="workspace-template-context-banner dm-workflow-upgrade-nudge" role="note">
             <div>
               <strong>{upgradeState.headline}</strong>
@@ -1074,7 +1118,7 @@ export default function WorkflowSurface() {
         {/* Serverless cockpit — same derivation + cockpit interface as the API
             Registry and sandbox lanes. Toggles patch the sandbox row; deep config
             (scheduler/adapter) routes to the object's Data Model drawer. */}
-        {sandboxRow && upgradeOpen && serverlessState ? (
+        {sandboxRow && showServerlessUpgrade && upgradeOpen && serverlessState ? (
           <div className="dm-workflow-upgrade-panel">
             <div className="dm-workflow-upgrade-panel-head">
               <span className="dm-api-action-card-eyebrow">Persistence &amp; scheduling</span>
@@ -1194,6 +1238,10 @@ export default function WorkflowSurface() {
                   </div>
                   <AgentSwarmPanel
                     graph={orchestrationGraph}
+                    objectId={objectId}
+                    rowName={rowId}
+                    sandboxRow={sandboxRow}
+                    onSandboxRowPatch={patchSandboxRuntimeFields}
                     disabled={false}
                     onGraphChange={(updater) => {
                       setOrchestrationGraph((g) => (typeof updater === "function" ? updater(g) : updater));

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/docs/sandbox-environment-primitive.md

@@ -23,6 +23,32 @@ Agents and streamed APIs elsewhere in the sandbox stay orthogonal: serverless sw
 
 Sandbox rows reference **`authRef` / named env refs** — never literals in browser or config records. Scheduling uses the referenced API Registry row’s **`authRef`** merge rules identical to **`/api/workspace/test-source`**.
 
+## Browser access (`browserAccess`)
+
+`browserAccess` is a first-class boolean column on the sandbox row, surfaced as a single toggle in the record sidecar's **Environment & Network** section. It is locality-agnostic and agent-host-agnostic: the saved record carries the capability, and each execution path grants it through the mechanism that path actually understands.
+
+**Deterministic normalization** — browser access implies outbound network. The sidecar toggle stamps `networkAllow: "true"` when browser access is switched on, and `POST /api/workspace/sandbox-run` enforces the same implication server-side (`networkAllow || browserAccess`), so rows patched via the API behave identically to rows saved in the UI.
+
+**This is the product's existing agent browser primitive, surfaced — not a new system.** The upstream Paperclip server already grants any agent browser access through one boolean: the agent config's `chrome` primitive (`ui/src/components/agent-config-primitives.tsx` — "Enable Claude's Chrome integration by passing --chrome"), gated by the chrome-lease service (`server/src/services/chrome-lease.ts`) before `adapter.execute()`. The CMS profile contract likewise speaks `allowBrowserBridge` and execution mode `"browser"`. `browserAccess` is the same bit on the governed sandbox row, so rows stay portable to the upstream adapter registry without translation — exactly like the host slugs.
+
+**Local (`local-agent-host`)** — when the row's bit is on, each host engages its **first-party** browser integration; the adapter never invents flags or writes host config it cannot verify against the upstream tool (the same rule the auth catalog follows for login subcommands):
+
+| Lane | Hosts | Mechanism |
+| --- | --- | --- |
+| `native-flag` | Claude Code | `--chrome` — Claude's own Chrome integration, the same flag the upstream server adapter passes for the agent `chrome` primitive. |
+| `native-flag` | Codex | `--enable browser_use --enable in_app_browser` (with `--sandbox workspace-write`). |
+| `env-signal` | Cursor, Gemini, Qwen, OpenCode, Pi, Hermes, OpenClaw Gateway | The host receives `GROWTHUB_SANDBOX_BROWSER_ACCESS=1` (mirroring the upstream browser-isolation context); whatever browser integration the operator has configured in that host honors the row's setting. |
+
+The lane engaged for a run is recorded in `adapterMeta.browserLane`, and the run-console record projection surfaces `context.browserAccess` plus the full `adapterMeta`, so every run shows its browser proof. No host-global config (`~/.claude`, `~/.codex`, …) is ever mutated.
+
+**Orchestration graph** — this is why browser access is node-level and host-agnostic with zero extra configuration: `thinAdapter` and `ai-agent` nodes execute through this same host catalog, so every node inherits the row's browser grant no matter which host runs it (subagent nodes through the existing node-level Network gate; orchestrator and synthesis phases directly).
+
+One deliberate decision, stated explicitly: **Codex `workspace-write` on `networkAllow` alone is intentional.** Codex's `read-only` sandbox blocks all outbound network, so `workspace-write` is the least-privileged Codex mode where the row's network grant can take effect — and writes are confined to the sealed ephemeral workdir the adapter spawns into, never the operator's repo. Browser flags remain gated on `browserAccess` only; network alone never opens a browser.
+
+**Local (`local-process`)** and every other adapter — the sealed RunRequest carries `browserAccess: boolean`, and the env contract publishes `GROWTHUB_SANDBOX_BROWSER_ACCESS=1|0` alongside `GROWTHUB_SANDBOX_NET_ALLOW(LIST)`, so any script or drop-zone adapter honors the row's setting without knowing about specific hosts.
+
+**Serverless** — the `growthub-sandbox-run-v1` envelope carries `sandbox.browserAccess` (plus `networkAllow` / `allowList`), so a workflow upgraded from local to serverless keeps the identical capability contract: the Edge/QStash/cron handler reads one boolean and grants its own runtime's browser (e.g. a remote browser pool or hosted agent's browser tool). No host-specific knowledge crosses the wire — slugs and booleans only, never secrets.
+
 ## Not a widget source
 
 Workspace Builder excludes **`sandbox-environment`** from View widget bindings (execution records, not tabular KPI sources). See **`data-sources-api-registry.md`** in this folder.