@growthub/cli 0.13.9 → 0.14.1

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import {
   ArrowDownToLine,
   Bot,
@@ -53,6 +53,15 @@ const CONNECTOR_OPTIONS = [
   { id: "preview", label: "Preview output" }
 ];
 
+const MIN_ZOOM = 0.45;
+const MAX_ZOOM = 1.4;
+const NODE_BLOCK_HEIGHT = 98;
+const FIT_VIEW_PADDING = 128;
+
+function clampZoom(value) {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Number(value.toFixed(2))));
+}
+
 function nodeSubtitle(node) {
   const config = node?.config || {};
   if (node?.subtitle) return String(node.subtitle);
@@ -111,8 +120,61 @@ export function OrchestrationGraphCanvas({
   const [internalSelected, setInternalSelected] = useState(null);
   const [connectorPopover, setConnectorPopover] = useState(null);
   const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const canvasRef = useRef(null);
+  const dragRef = useRef(null);
   const activeId = selectedNodeId ?? internalSelected;
 
+  function edgeBetween(fromId, toId) {
+    return edges.find((e) => String(e.from) === fromId && String(e.to) === toId);
+  }
+
+  const zoomBy = useCallback((delta) => {
+    setZoom((value) => clampZoom(value + delta));
+  }, []);
+
+  const fitView = useCallback(() => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    const availableHeight = Math.max(240, (rect?.height || 720) - FIT_VIEW_PADDING);
+    const graphHeight = Math.max(NODE_BLOCK_HEIGHT, nodes.length * NODE_BLOCK_HEIGHT);
+    const nextZoom = clampZoom(Math.min(1, availableHeight / graphHeight));
+    setZoom(nextZoom);
+    setPan({ x: 0, y: 0 });
+  }, [nodes.length]);
+
+  const handleWheel = useCallback((event) => {
+    event.preventDefault();
+    const direction = event.deltaY > 0 ? -0.08 : 0.08;
+    zoomBy(direction);
+  }, [zoomBy]);
+
+  const handlePointerDown = useCallback((event) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("button, .dm-orchestration-node, .dm-orchestration-connector__popover")) return;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: pan.x,
+      originY: pan.y
+    };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  }, [pan.x, pan.y]);
+
+  const handlePointerMove = useCallback((event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    event.preventDefault();
+    setPan({
+      x: drag.originX + event.clientX - drag.startX,
+      y: drag.originY + event.clientY - drag.startY
+    });
+  }, []);
+
+  const endDrag = useCallback((event) => {
+    if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+  }, []);
+
   if (!nodes.length) {
     return (
       <div className="dm-orchestration-canvas dm-orchestration-canvas--empty">
@@ -121,12 +183,18 @@ export function OrchestrationGraphCanvas({
     );
   }
 
-  function edgeBetween(fromId, toId) {
-    return edges.find((e) => String(e.from) === fromId && String(e.to) === toId);
-  }
-
   return (
-    <div className="dm-orchestration-canvas" aria-label="Orchestration graph field editor">
+    <div
+      ref={canvasRef}
+      className="dm-orchestration-canvas"
+      aria-label="Orchestration graph field editor"
+      onWheel={handleWheel}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onPointerLeave={endDrag}
+    >
       <span className={`dm-orchestration-canvas__badge is-${String(statusLabel || "draft").toLowerCase()}`}>{statusLabel}</span>
       <div className="dm-orchestration-floating-tools" aria-label="Canvas tools">
         <button type="button" title="Add node" aria-label="Add node" onClick={() => onConnectorAction?.({ action: "add-step", from: String(nodes[nodes.length - 1]?.id || ""), to: "" })}>
@@ -135,17 +203,20 @@ export function OrchestrationGraphCanvas({
         <button type="button" title="Tidy workflow" aria-label="Tidy workflow">
           <Settings size={14} />
         </button>
-        <button type="button" title="Zoom in" aria-label="Zoom in" onClick={() => setZoom((value) => Math.min(1.4, Number((value + 0.1).toFixed(2))))}>
+        <button type="button" title="Zoom in" aria-label="Zoom in" onClick={() => zoomBy(0.1)}>
           <ZoomIn size={14} />
         </button>
-        <button type="button" title="Zoom out" aria-label="Zoom out" onClick={() => setZoom((value) => Math.max(0.7, Number((value - 0.1).toFixed(2))))}>
+        <button type="button" title="Zoom out" aria-label="Zoom out" onClick={() => zoomBy(-0.1)}>
           <ZoomOut size={14} />
         </button>
-        <button type="button" title="Reset zoom" aria-label="Reset zoom" onClick={() => setZoom(1)}>
+        <button type="button" title="Fit view" aria-label="Fit view" onClick={fitView}>
           <Maximize2 size={14} />
         </button>
       </div>
-      <div className="dm-orchestration-canvas__viewport" style={{ transform: `scale(${zoom})` }}>
+      <div
+        className="dm-orchestration-canvas__viewport"
+        style={{ transform: `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${zoom})` }}
+      >
         {nodes.map((node, index) => {
           const id = String(node.id || "");
           const isSelected = activeId === id;

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { Check } from "lucide-react";
 import {
   detectFieldIdsFromLastResponse,
   FILTER_CONJUNCTIONS,
@@ -28,6 +29,23 @@ const EMPTY_AGENT_AUTH_PATCH = {
   agentAuthLastLoginUrl: ""
 };
 
+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 getAgentHostOptions() {
   return Object.entries(HOST_AUTH_CATALOG || {}).map(([slug, host]) => ({
     value: slug,
@@ -696,24 +714,20 @@ export function OrchestrationNodeConfigPanel({
               Latest registry test: {registryRow.status}
             </span>
           )}
-          <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-            <input
-              type="checkbox"
-              checked={config.writeLastResponse !== false}
-              disabled={disabled}
-              onChange={(e) => patchConfig({ writeLastResponse: e.target.checked })}
-            />
-            <span>Write lastResponse on success</span>
-          </label>
-          <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-            <input
-              type="checkbox"
-              checked={config.writeSourceRecord !== false}
-              disabled={disabled}
-              onChange={(e) => patchConfig({ writeSourceRecord: e.target.checked })}
-            />
-            <span>Write source record history</span>
-          </label>
+          <WorkflowCheckbox
+            checked={config.writeLastResponse !== false}
+            disabled={disabled}
+            onChange={(checked) => patchConfig({ writeLastResponse: checked })}
+          >
+            Write lastResponse on success
+          </WorkflowCheckbox>
+          <WorkflowCheckbox
+            checked={config.writeSourceRecord !== false}
+            disabled={disabled}
+            onChange={(checked) => patchConfig({ writeSourceRecord: checked })}
+          >
+            Write source record history
+          </WorkflowCheckbox>
           <label className="dm-orchestration-config__field">
             <span>Success HTTP codes</span>
             <input
@@ -882,15 +896,13 @@ export function OrchestrationNodeConfigPanel({
               )}
             </div>
           )}
-          <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-            <input
-              type="checkbox"
-              checked={config.confirmationRequired === true}
-              disabled={disabled || config.destructive === true}
-              onChange={(e) => patchConfig({ confirmationRequired: e.target.checked })}
-            />
-            <span>Require confirmation before destructive or version-changing execution</span>
-          </label>
+          <WorkflowCheckbox
+            checked={config.confirmationRequired === true}
+            disabled={disabled || config.destructive === true}
+            onChange={(checked) => patchConfig({ confirmationRequired: checked })}
+          >
+            Require confirmation before destructive or version-changing execution
+          </WorkflowCheckbox>
           <p className="dm-orchestration-config__hint">
             Data actions bind only to this workspace data model. Execution resolves the latest object schema at run time.
           </p>
@@ -960,27 +972,21 @@ export function OrchestrationNodeConfigPanel({
               ))}
             </select>
           </label>
-          <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-            <input
-              type="checkbox"
-              checked={config.required !== false}
-              disabled={disabled}
-              onChange={(e) => patchConfig({ required: e.target.checked })}
-            />
-            <span>Required</span>
-          </label>
-          <label
-            className="dm-orchestration-config__field dm-orchestration-config__field-inline"
+          <WorkflowCheckbox
+            checked={config.required !== false}
+            disabled={disabled}
+            onChange={(checked) => patchConfig({ required: checked })}
+          >
+            Required
+          </WorkflowCheckbox>
+          <WorkflowCheckbox
+            checked={config.networkAccess === true}
+            disabled={disabled}
             title="Network is granted only when both this and the row's networkAllow are on."
+            onChange={(checked) => patchConfig({ networkAccess: checked })}
           >
-            <input
-              type="checkbox"
-              checked={config.networkAccess === true}
-              disabled={disabled}
-              onChange={(e) => patchConfig({ networkAccess: e.target.checked })}
-            />
-            <span>Network</span>
-          </label>
+            Network
+          </WorkflowCheckbox>
         </div>
       )}
 
@@ -1013,33 +1019,15 @@ export function OrchestrationNodeConfigPanel({
           </label>
           <div className="dm-orchestration-config__section">
             <span>Permissions</span>
-            <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-              <input
-                type="checkbox"
-                checked={config.canReadWorkspace !== false}
-                disabled={disabled}
-                onChange={(e) => patchConfig({ canReadWorkspace: e.target.checked })}
-              />
-              <span>Read workspace data</span>
-            </label>
-            <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-              <input
-                type="checkbox"
-                checked={config.canWriteDraft === true}
-                disabled={disabled}
-                onChange={(e) => patchConfig({ canWriteDraft: e.target.checked })}
-              />
-              <span>Write draft changes only</span>
-            </label>
-            <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-              <input
-                type="checkbox"
-                checked={config.networkAccess === true}
-                disabled={disabled}
-                onChange={(e) => patchConfig({ networkAccess: e.target.checked })}
-              />
-              <span>Allow network access</span>
-            </label>
+            <WorkflowCheckbox checked={config.canReadWorkspace !== false} disabled={disabled} onChange={(checked) => patchConfig({ canReadWorkspace: checked })}>
+              Read workspace data
+            </WorkflowCheckbox>
+            <WorkflowCheckbox checked={config.canWriteDraft === true} disabled={disabled} onChange={(checked) => patchConfig({ canWriteDraft: checked })}>
+              Write draft changes only
+            </WorkflowCheckbox>
+            <WorkflowCheckbox checked={config.networkAccess === true} disabled={disabled} onChange={(checked) => patchConfig({ networkAccess: checked })}>
+              Allow network access
+            </WorkflowCheckbox>
           </div>
           <KeyValueRows
             label="Output fields"
@@ -1176,10 +1164,9 @@ export function OrchestrationNodeConfigPanel({
                 <span>Message</span>
                 <textarea rows={6} value={config.message || ""} disabled={disabled} onChange={(e) => patchConfig({ message: e.target.value })} />
               </label>
-              <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-                <input type="checkbox" checked={config.requireApproval !== false} disabled={disabled} onChange={(e) => patchConfig({ requireApproval: e.target.checked })} />
-                <span>Require approval before sending</span>
-              </label>
+              <WorkflowCheckbox checked={config.requireApproval !== false} disabled={disabled} onChange={(checked) => patchConfig({ requireApproval: checked })}>
+                Require approval before sending
+              </WorkflowCheckbox>
             </>
           )}
           {config.action === "code-function" && (
@@ -1216,10 +1203,9 @@ export function OrchestrationNodeConfigPanel({
             valuePlaceholder="Field type or help text"
             onChange={(fields) => patchConfig({ fields })}
           />
-          <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-            <input type="checkbox" checked={config.required !== false} disabled={disabled} onChange={(e) => patchConfig({ required: e.target.checked })} />
-            <span>Require response before continuing</span>
-          </label>
+          <WorkflowCheckbox checked={config.required !== false} disabled={disabled} onChange={(checked) => patchConfig({ required: checked })}>
+            Require response before continuing
+          </WorkflowCheckbox>
         </div>
       )}
 
@@ -1233,10 +1219,9 @@ export function OrchestrationNodeConfigPanel({
             <span>Sample response</span>
             <textarea rows={5} value={config.sampleResponse || ""} disabled={disabled} onChange={(e) => patchConfig({ sampleResponse: e.target.value })} />
           </label>
-          <label className="dm-orchestration-config__field dm-orchestration-config__field-inline">
-            <input type="checkbox" checked={config.blockPublishOnFailure !== false} disabled={disabled} onChange={(e) => patchConfig({ blockPublishOnFailure: e.target.checked })} />
-            <span>Block Publish unless this step passes</span>
-          </label>
+          <WorkflowCheckbox checked={config.blockPublishOnFailure !== false} disabled={disabled} onChange={(checked) => patchConfig({ blockPublishOnFailure: checked })}>
+            Block Publish unless this step passes
+          </WorkflowCheckbox>
         </div>
       )}
 

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

@@ -202,9 +202,9 @@ export function ReferencePicker({
     <div className="dm-reference-picker">
       {error && <p className="dm-field-error" style={{ fontSize: 11 }}>{error}</p>}
       {showRepair && (
-        <p className="dm-validation-banner" style={{ fontSize: 11, marginBottom: 6 }}>
+        <p className="dm-reference-picker-warning">
           <AlertTriangle size={12} aria-hidden />
-          <span>Selected reference is missing or filtered out. Pick a new row or adjust API Registry status.</span>
+          <span>Missing reference. Pick a row or test the API Registry.</span>
         </p>
       )}
       <SearchableSelect

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

@@ -0,0 +1,37 @@
+"use client";
+
+/**
+ * SidecarExpandView — full-width takeover WITHIN the existing helper sidecar
+ * system (SWARM_RUN_CONTRACT_V1, Phase 5).
+ *
+ * Not a modal and not a route: the parent HelperSidecar widens its own aside
+ * while this view is active and renders this wrapper inside the same body.
+ * Back returns to the prior sidecar view; Esc collapses (handled by the
+ * parent so it composes with the sidecar's existing Esc-to-close); the
+ * sidecar close button keeps closing the whole sidecar.
+ *
+ * Reuses the existing sidecar header/body grammar — no new modal stack, no
+ * new visual language.
+ */
+
+import { ArrowLeft } from "lucide-react";
+
+export function SidecarExpandView({ title, onBack, children }) {
+  return (
+    <div className="dm-swarm-expand" data-sidecar-expand="">
+      <div className="dm-sidecar-header dm-swarm-expand-head">
+        <button
+          type="button"
+          className="dm-sidecar-icon-btn"
+          onClick={onBack}
+          aria-label="Back"
+          title="Back (Esc)"
+        >
+          <ArrowLeft size={14} />
+        </button>
+        <span className="dm-sidecar-title">{title}</span>
+      </div>
+      <div className="dm-swarm-expand-body">{children}</div>
+    </div>
+  );
+}