@growthub/cli 0.14.0 → 0.14.2

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,
@@ -19,6 +20,12 @@ const LOCAL_AGENT_ADAPTERS = [
   { value: "local-agent-host", label: "Local agent host" },
   { value: "local-intelligence", label: "Local intelligence" }
 ];
+const LOCAL_INTELLIGENCE_MODE_OPTIONS = [
+  { value: "ollama", label: "ollama (OLLAMA_BASE_URL + /v1/chat/completions)" },
+  { value: "lmstudio", label: "lmstudio (LMSTUDIO_BASE_URL)" },
+  { value: "vllm", label: "vllm (VLLM_BASE_URL required)" },
+  { value: "custom-openai-compatible", label: "custom (use Chat completions URL above)" }
+];
 const EMPTY_AGENT_AUTH_PATCH = {
   agentAuthStatus: "",
   agentAuthProvider: "",
@@ -28,6 +35,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,
@@ -409,9 +433,9 @@ function LocalAgentHostControls({
   onSandboxRowPatch
 }) {
   const row = sandboxRow && typeof sandboxRow === "object" ? sandboxRow : {};
-  const runLocality = String(row.runLocality || "local").trim().toLowerCase() === "serverless" ? "serverless" : "local";
   const adapter = String(row.adapter || "local-process").trim() || "local-process";
   const agentHost = String(row.agentHost || "").trim();
+  const browserOn = ["true", "1", "on", "yes"].includes(String(row.browserAccess || "").trim().toLowerCase());
   const hostOptions = getAgentHostOptions();
   const canPatch = typeof onSandboxRowPatch === "function";
 
@@ -426,36 +450,9 @@ function LocalAgentHostControls({
   return (
     <div className="dm-orchestration-config__section dm-workflow-agent-runtime">
       <span>Local agent runtime</span>
-      <div className="dm-sandbox-locality-toggle" role="group" aria-label="Run locality">
-        {["local", "serverless"].map((mode) => (
-          <button
-            key={mode}
-            type="button"
-            className={runLocality === mode ? "is-active" : ""}
-            disabled={disabled || !canPatch}
-            onClick={() => {
-              const fields = { runLocality: mode };
-              if (mode === "serverless" && ["local-agent-host", "local-intelligence"].includes(adapter)) {
-                fields.adapter = "local-process";
-                fields.agentHost = "";
-                patchWithClearedAgentAuth(fields);
-                return;
-              }
-              patch(fields);
-            }}
-          >
-            {mode === "local" ? "Local" : "Serverless"}
-          </button>
-        ))}
-      </div>
       <p className="dm-orchestration-config__hint">
         Same runtime fields as the Data Model sandbox sidecar. Local agent host uses the Paperclip thin adapter on this machine.
       </p>
-      {runLocality === "serverless" && (
-        <p className="dm-orchestration-config__hint">
-          Serverless delegates execution to the configured scheduler/API Registry row; local CLI auth is not used.
-        </p>
-      )}
       <label className="dm-orchestration-config__field">
         <span>Execution adapter</span>
         <select
@@ -464,6 +461,7 @@ function LocalAgentHostControls({
           onChange={(event) => {
             const nextAdapter = event.target.value;
             patchWithClearedAgentAuth({
+              runLocality: "local",
               adapter: nextAdapter,
               agentHost: nextAdapter === "local-agent-host" ? (agentHost || "claude_local") : ""
             });
@@ -474,13 +472,17 @@ function LocalAgentHostControls({
           ))}
         </select>
       </label>
-      {runLocality === "local" && adapter === "local-agent-host" && (
+      {adapter === "local-agent-host" && (
         <label className="dm-orchestration-config__field">
           <span>Agent host (Paperclip)</span>
           <select
             value={agentHost}
             disabled={disabled || !canPatch}
-            onChange={(event) => patchWithClearedAgentAuth({ agentHost: event.target.value })}
+            onChange={(event) => patchWithClearedAgentAuth({
+              runLocality: "local",
+              adapter: "local-agent-host",
+              agentHost: event.target.value
+            })}
           >
             <option value="">Select host...</option>
             {hostOptions.map((item) => (
@@ -489,7 +491,7 @@ function LocalAgentHostControls({
           </select>
         </label>
       )}
-      {runLocality === "local" && adapter === "local-agent-host" && isSandboxLocalAgentHost(row) && (
+      {adapter === "local-agent-host" && isSandboxLocalAgentHost(row) && (
         <SandboxAgentAuthPanel
           objectId={objectId}
           rowName={rowName}
@@ -498,10 +500,63 @@ function LocalAgentHostControls({
           onPatchDraft={patch}
         />
       )}
+      {adapter === "local-intelligence" && (
+        <div className="dm-sandbox-local-intel">
+          <label className="dm-orchestration-config__field">
+            <span>Concrete model id</span>
+            <input
+              value={row.localModel || ""}
+              disabled={disabled || !canPatch}
+              placeholder="gemma3:4b"
+              onChange={(event) => patch({ runLocality: "local", localModel: event.target.value })}
+            />
+          </label>
+          <label className="dm-orchestration-config__field">
+            <span>Chat completions URL (optional)</span>
+            <input
+              value={row.localEndpoint || ""}
+              disabled={disabled || !canPatch}
+              placeholder="http://127.0.0.1:11434/v1/chat/completions"
+              onChange={(event) => patch({ runLocality: "local", localEndpoint: event.target.value })}
+            />
+          </label>
+          <label className="dm-orchestration-config__field">
+            <span>Resolver mode</span>
+            <select
+              value={String(row.intelligenceAdapterMode || "ollama").trim().toLowerCase()}
+              disabled={disabled || !canPatch}
+              onChange={(event) => patch({ runLocality: "local", intelligenceAdapterMode: event.target.value })}
+            >
+              {LOCAL_INTELLIGENCE_MODE_OPTIONS.map((item) => (
+                <option key={item.value} value={item.value}>{item.label}</option>
+              ))}
+            </select>
+          </label>
+          <p className="dm-orchestration-config__hint">
+            Uses Instructions + Command as the task payload. With sandbox browser access off, tool intents stay proposals. With browser access on, browser tool intents execute through the local browser bridge before the final JSON response is returned.
+          </p>
+          {browserOn && (
+            <p className="dm-orchestration-config__hint">
+              This workflow's AI-agent nodes inherit browser access only when their node-level Network permission is enabled.
+            </p>
+          )}
+        </div>
+      )}
     </div>
   );
 }
 
+function buildNodeAgentAuthDraft(sandboxRow, config) {
+  const agentHost = String(config?.agentHost || sandboxRow?.agentHost || "").trim();
+  if (!agentHost) return null;
+  return {
+    ...(sandboxRow || {}),
+    runLocality: "local",
+    adapter: "local-agent-host",
+    agentHost
+  };
+}
+
 export function OrchestrationNodeConfigPanel({
   node,
   onConfigChange,
@@ -559,6 +614,28 @@ export function OrchestrationNodeConfigPanel({
 
   const registryConnected = isApiRegistryTestSuccessful(registryRow);
   const responseMode = config.responseMode || config.mode || "json";
+  const nodeAgentAuthDraft = type === "ai-agent" ? buildNodeAgentAuthDraft(sandboxRow, config) : null;
+  const canPatchSandboxRow = typeof onSandboxRowPatch === "function";
+  const sandboxBrowserOn = ["true", "1", "on", "yes"].includes(String(sandboxRow?.browserAccess || "").trim().toLowerCase());
+  const sandboxAdapter = String(sandboxRow?.adapter || "").trim();
+  const nodeAdapter = String(config.adapter || "").trim() || sandboxAdapter;
+  const nodeUsesLocalIntelligence = nodeAdapter === "local-intelligence";
+
+  function patchNodeAgentHost(agentHost) {
+    const nextHost = String(agentHost || "").trim();
+    patchConfig({
+      agentHost: nextHost,
+      ...(nextHost ? { adapter: "local-agent-host" } : {})
+    });
+    if (nextHost && canPatchSandboxRow) {
+      onSandboxRowPatch({
+        runLocality: "local",
+        adapter: "local-agent-host",
+        agentHost: nextHost,
+        ...EMPTY_AGENT_AUTH_PATCH
+      });
+    }
+  }
 
   return (
     <div className="dm-orchestration-config">
@@ -696,24 +773,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 +955,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>
@@ -952,7 +1023,7 @@ export function OrchestrationNodeConfigPanel({
             <select
               value={config.agentHost || ""}
               disabled={disabled}
-              onChange={(e) => patchConfig({ agentHost: e.target.value })}
+              onChange={(e) => patchNodeAgentHost(e.target.value)}
             >
               <option value="">Inherit</option>
               {Object.entries(HOST_AUTH_CATALOG || {}).map(([slug, host]) => (
@@ -960,27 +1031,32 @@ 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 })}
+          {nodeAgentAuthDraft && isSandboxLocalAgentHost(nodeAgentAuthDraft) && (
+            <SandboxAgentAuthPanel
+              objectId={objectId}
+              rowName={rowName}
+              draft={nodeAgentAuthDraft}
+              disabled={disabled || !canPatchSandboxRow}
+              onPatchDraft={onSandboxRowPatch}
             />
-            <span>Required</span>
-          </label>
-          <label
-            className="dm-orchestration-config__field dm-orchestration-config__field-inline"
-            title="Network is granted only when both this and the row's networkAllow are on."
+          )}
+          <WorkflowCheckbox
+            checked={config.required !== false}
+            disabled={disabled}
+            onChange={(checked) => patchConfig({ required: checked })}
           >
-            <input
-              type="checkbox"
-              checked={config.networkAccess === true}
-              disabled={disabled}
-              onChange={(e) => patchConfig({ networkAccess: e.target.checked })}
-            />
-            <span>Network</span>
-          </label>
+            Required
+          </WorkflowCheckbox>
+          <WorkflowCheckbox
+            checked={config.networkAccess === true}
+            disabled={disabled}
+            title={sandboxBrowserOn && nodeUsesLocalIntelligence
+              ? "Network and browser are granted only when this node permission is on and the sandbox row has browser access on."
+              : "Network is granted only when both this and the row's networkAllow are on. The row's browser access inherits through the same gate."}
+            onChange={(checked) => patchConfig({ networkAccess: checked })}
+          >
+            {sandboxBrowserOn && nodeUsesLocalIntelligence ? "Network + browser" : "Network"}
+          </WorkflowCheckbox>
         </div>
       )}
 
@@ -1013,33 +1089,22 @@ 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}
+              title={sandboxBrowserOn && nodeUsesLocalIntelligence
+                ? "This node gets browser access only when this permission and the sandbox row Browser access toggle are both on."
+                : undefined}
+              onChange={(checked) => patchConfig({ networkAccess: checked })}
+            >
+              {sandboxBrowserOn && nodeUsesLocalIntelligence ? "Allow network + browser access" : "Allow network access"}
+            </WorkflowCheckbox>
           </div>
           <KeyValueRows
             label="Output fields"
@@ -1176,10 +1241,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 +1280,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 +1296,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/SandboxAgentAuthPanel.jsx

@@ -20,9 +20,9 @@
  * no second product surface, no terminal emulator — just a uniform
  * readiness bridge.
  *
- * Status values stamped on the row are intentionally distinct between
- * confirmed-authenticated ("active") and merely-installed ("reachable")
- * so the pill cannot overclaim auth from a `--version` probe.
+ * The pill represents selected local host readiness. Legacy `reachable`
+ * metadata is rendered as Active so Data Model and workflow sidecars stay
+ * visually identical after a successful host switch/check path.
  */
 
 import { useCallback, useState } from "react";
@@ -32,7 +32,7 @@ import { getAgentHostCapabilities } from "@/lib/sandbox-agent-host-catalog";
 
 const STATUS_LABEL = {
   active: "Active",
-  reachable: "Reachable",
+  reachable: "Active",
   stale: "Stale",
   missing: "Missing",
   checking: "Checking",
@@ -40,10 +40,9 @@ const STATUS_LABEL = {
 };
 
 function statusKind(status) {
-  if (status === "active") return "ok";
+  if (status === "active" || status === "reachable") return "ok";
   if (status === "stale") return "warn";
   if (status === "missing") return "bad";
-  // "reachable" stays neutral — CLI is installed, but auth is NOT confirmed.
   return "";
 }
 
@@ -62,15 +61,28 @@ export function SandboxAgentAuthPanel({ objectId, rowName, draft, disabled, onPa
   const [busy, setBusy] = useState(null); // "status" | "login" | "logout" | null
   const [output, setOutput] = useState(null);
   const [message, setMessage] = useState("");
+  const [localAuthState, setLocalAuthState] = useState(null);
 
   const capabilities = getAgentHostCapabilities(draft);
   const providerMatchesHost = String(draft?.agentAuthProvider || "").trim() === String(draft?.agentHost || "").trim();
+  const localMatchesHost =
+    localAuthState?.provider &&
+    String(localAuthState.provider || "").trim() === String(capabilities?.slug || "").trim();
   const currentStatus =
-    providerMatchesHost && typeof draft?.agentAuthStatus === "string" && draft.agentAuthStatus.trim()
-      ? draft.agentAuthStatus.trim()
-      : "unknown";
-  const lastChecked = providerMatchesHost ? draft?.agentAuthLastChecked || "" : "";
-  const lastMessage = providerMatchesHost ? draft?.agentAuthLastMessage || "" : "";
+    localMatchesHost && typeof localAuthState?.status === "string" && localAuthState.status.trim()
+      ? localAuthState.status.trim()
+      : providerMatchesHost && typeof draft?.agentAuthStatus === "string" && draft.agentAuthStatus.trim()
+        ? draft.agentAuthStatus.trim()
+        : "unknown";
+  const lastChecked = localMatchesHost && localAuthState?.checkedAt
+    ? localAuthState.checkedAt
+    : providerMatchesHost
+      ? draft?.agentAuthLastChecked || ""
+      : "";
+  const lastMessage =
+    localMatchesHost && typeof localAuthState?.message === "string"
+      ? localAuthState.message
+      : providerMatchesHost ? draft?.agentAuthLastMessage || "" : "";
   const displayMessage = normalizeAuthMessage(message || lastMessage, capabilities?.label)
     || (currentStatus === "unknown" ? "Run Check or Login to verify this local agent host." : "");
 
@@ -85,15 +97,23 @@ export function SandboxAgentAuthPanel({ objectId, rowName, draft, disabled, onPa
         const res = await fetch(endpoint, {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ objectId, name: rowName })
+          body: JSON.stringify({ objectId, name: rowName, agentHost: capabilities.slug })
         });
         const payload = await res.json();
         setOutput(payload);
         setMessage(payload.message || (payload.ok ? "Done" : payload.error || "Failed"));
+        if (payload.status) {
+          setLocalAuthState({
+            status: payload.status,
+            provider: payload.provider || capabilities.slug,
+            checkedAt: payload.checkedAt || new Date().toISOString(),
+            message: payload.message || ""
+          });
+        }
         if (typeof onPatchDraft === "function" && payload.status) {
           onPatchDraft({
             agentAuthStatus: payload.status,
-            agentAuthProvider: payload.provider || draft?.agentHost || "unknown",
+            agentAuthProvider: payload.provider || capabilities.slug,
             agentAuthLastChecked: payload.checkedAt || new Date().toISOString(),
             agentAuthLastExitCode:
               typeof payload.exitCode === "number" ? payload.exitCode : null,
@@ -107,7 +127,7 @@ export function SandboxAgentAuthPanel({ objectId, rowName, draft, disabled, onPa
         setBusy(null);
       }
     },
-    [canAct, objectId, rowName, onPatchDraft, draft?.agentHost]
+    [canAct, objectId, rowName, onPatchDraft, capabilities?.slug]
   );
 
   const onCheckStatus = () =>

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>
+  );
+}