@growthub/cli 0.13.9 → 0.14.1

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

@@ -5030,7 +5030,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-db-status.warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
 .dm-db-status.warn span { background: #f59e0b; }
 .dm-record-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.12); }
-.dm-record-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; width: min(440px, 100vw); background: #fff; border-left: 1px solid #dfe3e8; box-shadow: -10px 0 34px rgba(15,23,42,.16); }
+.dm-record-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; min-height: 0; width: min(440px, 100vw); background: #fff; border-left: 1px solid #dfe3e8; box-shadow: -10px 0 34px rgba(15,23,42,.16); overflow: hidden; }
 .dm-record-drawer-wide { width: min(780px, 100vw); }
 .dm-api-action-card {
   display: grid;
@@ -5070,6 +5070,59 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-api-action-card-body h3 { margin: 0; font-size: 14px; font-weight: 650; color: #111827; }
 .dm-api-action-card-body p { margin: 0; font-size: 12px; line-height: 1.45; color: #4b5563; }
 .dm-api-action-card-cta { flex-shrink: 0; align-self: center; }
+
+/* Governed creation cockpit — vertical journey inside the api-registry drawer.
+   Overrides the action-card 3-col grid and reuses the workspace's own status
+   chip (.dm-db-status) + dm-btn-* buttons. No new colors, no new primitive. */
+.dm-cockpit { display: block; grid-template-columns: none; transition: box-shadow .14s, background .14s; }
+.dm-cockpit.is-collapsed { padding-bottom: 12px; }
+.dm-cockpit-head { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }
+.dm-cockpit-head:hover .dm-api-action-card-body h3 { color: #000; }
+.dm-cockpit-head:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 4px; border-radius: 6px; }
+.dm-cockpit-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; padding-top: 2px; }
+.dm-cockpit-steps { list-style: none; margin: 10px 0 0; padding: 0; }
+.dm-cockpit-step { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid #edf0f3; }
+.dm-cockpit-step:first-child { border-top: 0; }
+.dm-cockpit-step-chip { flex-shrink: 0; align-self: start; margin-top: 1px; min-width: 64px; justify-content: center; }
+.dm-cockpit-step-body { min-width: 0; display: grid; gap: 2px; }
+.dm-cockpit-step-label { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
+.dm-cockpit-step-desc { margin: 0; font-size: 12px; line-height: 1.45; color: #64748b; }
+.dm-cockpit-step-hint { margin: 0; font-size: 11px; line-height: 1.4; color: #94a3b8; }
+.dm-cockpit-step button { flex-shrink: 0; align-self: center; }
+.dm-cockpit-step-muted .dm-cockpit-step-label,
+.dm-cockpit-step-muted .dm-cockpit-step-desc { color: #94a3b8; }
+.dm-cockpit-step-next { background: #f8fafc; margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 6px; }
+.dm-cockpit-shape { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f3; display: grid; gap: 6px; }
+.dm-cockpit-shape-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.dm-cockpit-shape-head .dm-api-action-card-eyebrow { margin: 0; }
+.dm-cockpit-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
+.dm-cockpit-field { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 8px; }
+.dm-cockpit-field b { font-weight: 700; color: #94a3b8; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
+.dm-cockpit-receipts { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f3; }
+.dm-cockpit-receipts ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
+.dm-cockpit-receipt { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
+.dm-cockpit-receipt-chip { align-self: start; }
+.dm-cockpit-receipt-text { font-size: 12px; color: #64748b; line-height: 1.4; }
+
+/* Serverless upgrade — toolbar button, one-time nudge, and cockpit panel. */
+.dm-workflow-upgrade-btn { position: relative; }
+.dm-workflow-upgrade-btn.is-serverless { color: #166534; }
+.dm-workflow-upgrade-btn.is-pulse { color: #111827; }
+.dm-workflow-upgrade-btn[data-tooltip]:hover::after {
+  content: attr(data-tooltip); position: absolute; top: 100%; right: 0; margin-top: 6px;
+  white-space: nowrap; background: #111827; color: #fff; font-size: 11px; font-weight: 500;
+  padding: 5px 8px; border-radius: 6px; z-index: 40; box-shadow: 0 4px 12px rgba(15,23,42,.18);
+}
+.dm-workflow-upgrade-nudge { align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; }
+.dm-workflow-upgrade-nudge > div:first-child { min-width: 0; padding-right: 10px; }
+.dm-workflow-upgrade-nudge strong,
+.dm-workflow-upgrade-nudge span { line-height: 1.35; }
+.dm-workflow-upgrade-nudge-actions { display: inline-flex; align-items: center; gap: 8px; }
+.dm-workflow-upgrade-panel { width: auto; margin: 12px 8px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
+.dm-workflow-upgrade-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 0; }
+.dm-workflow-upgrade-panel-head .dm-api-action-card-eyebrow { margin: 0; }
+.dm-workflow-upgrade-panel .dm-api-action-card { margin: 8px; box-shadow: none; }
+
 .dm-api-review-banner {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -5223,6 +5276,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   display: flex;
   align-items: center;
   gap: 6px;
+  padding-left: 16px;
   min-width: max-content;
   flex: 1 0 auto;
   color: #8b8b91;
@@ -5276,6 +5330,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   display: flex;
   align-items: center;
   gap: 6px;
+  padding-right: 16px;
   flex: 0 1 auto;
   min-width: 0;
   max-width: 58vw;
@@ -5380,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;
@@ -5388,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;
@@ -5443,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;
@@ -5682,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 {
@@ -6013,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; }
@@ -6024,7 +6141,8 @@ 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; }
 .dm-record-testbar[data-panel="sandbox-agent-auth"] {
@@ -6114,7 +6232,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   white-space: pre-wrap;
   word-break: break-word;
 }
-.dm-record-fields { display: grid; gap: 8px; padding: 14px 16px 28px; overflow-y: auto; }
+.dm-record-fields { display: grid; align-content: start; gap: 8px; min-height: 0; padding: 14px 16px 0; }
 .dm-record-field { display: grid; gap: 5px; }
 .dm-record-field span { color: #475569; font-size: 11px; font-weight: 650; }
 .dm-record-field input,
@@ -6132,12 +6250,13 @@ 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-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-select { position: relative; width: 100%; min-width: 180px; font-size: 11px; }
+.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); }
 .dm-select.open .dm-select-trigger { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12), 0 2px 8px rgba(15,23,42,.08); }
@@ -6162,8 +6281,12 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-select-pager button { height: 26px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 8px; cursor: pointer; }
 .dm-select-pager button:disabled { opacity: .45; cursor: not-allowed; }
 .dm-select-pager span { color: #64748b; font-size: 12px; font-weight: 650; }
-.dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; }
-.dm-db-grid td .dm-select { min-width: 230px; }
+.dm-reference-picker { display: grid; gap: 6px; width: min(240px, 100%); min-width: 0; }
+.dm-reference-picker-warning { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0; padding: 5px 7px; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #92400e; font-size: 11px; line-height: 1.25; }
+.dm-reference-picker-warning svg { flex: 0 0 auto; }
+.dm-reference-picker-warning span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; vertical-align: top; }
+.dm-db-grid td .dm-select { min-width: 0; }
 .dm-json-field { position: relative; }
 .dm-json-field > span { padding-right: 34px; }
 .dm-json-expand { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15,23,42,.05); opacity: 0; cursor: pointer; transition: opacity .12s, border-color .12s, color .12s, box-shadow .12s; }
@@ -6607,6 +6730,40 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   background: #f5f5f5;
   border-color: #9ca3af;
 }
+.dm-helper-run-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.3;
+}
+.dm-helper-proposal-card-row {
+  grid-template-columns: 18px 1fr;
+}
+.dm-helper-proposal-card-row input[type=checkbox] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: #111827;
+}
+.dm-helper-proposal-card-toggle {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
 
 .dm-helper-typing {
   display: inline-flex;
@@ -8652,6 +8809,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; }
@@ -8960,7 +9121,7 @@ body.workspace-rail-collapsed .workspace-builder.workspace-lens-page,
 .workspace-lens-helper-callout-btn { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #111827; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
 .workspace-lens-helper-callout-btn:hover:not(:disabled) { background: #f3f4f6; }
 .workspace-lens-helper-callout-btn:disabled { opacity: 0.6; cursor: default; }
-.workspace-helper-setup-modal-backdrop { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 39, 0.42); backdrop-filter: blur(3px); }
+.workspace-helper-setup-modal-backdrop { position: fixed; inset: 0; z-index: 5100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 39, 0.42); backdrop-filter: blur(3px); }
 .workspace-helper-setup-modal { position: relative; width: min(620px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 24px 70px rgba(17, 24, 39, 0.28); padding: 18px; }
 .workspace-helper-setup-modal-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; }
 .workspace-helper-setup-modal-close:hover { background: #f9fafb; color: #111827; }
@@ -9020,3 +9181,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; }