@growthub/cli 0.14.0 → 0.14.2

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

@@ -47,6 +47,14 @@ import {
   isHelperConfigured,
   WorkspaceHelperSetupModal,
 } from "../../components/WorkspaceHelperSetupModal.jsx";
+import { SwarmRunCockpit, SwarmAgentTranscript } from "./SwarmRunCockpit.jsx";
+import { SidecarExpandView } from "./SidecarExpandView.jsx";
+import { parseSlashInput } from "./helper-commands.js";
+import {
+  deriveHelperWidgetCausationState,
+  summarizeSwarmRunProposal,
+  SWARM_WORKFLOWS_OBJECT_ID,
+} from "@/lib/workspace-swarm-proposal";
 
 // Generic "Tool Call Output" title matches the reference grammar — the
 // user already sees the prompt + assistant response in the chat above,
@@ -191,8 +199,16 @@ function resolveSystemReceipt(message, applyResult) {
 // Resolve where the Open button should navigate based on the proposal
 // shape. Returns null when no navigation makes sense (e.g. explain.object).
 function resolveArtifactTarget(proposal) {
+  // Apply receipts in the swarm lane carry an explicit artifact target.
+  if (proposal?.artifact?.surface === "swarm-run") return proposal.artifact;
   const pl = proposal?.payload || {};
   switch (proposal?.type) {
+    case "swarm.run.propose":
+    case "swarm.workflow.save":
+    case "swarm.run.resume":
+      return pl.name
+        ? { surface: "swarm-run", objectId: SWARM_WORKFLOWS_OBJECT_ID, name: pl.name }
+        : null;
     case "dataModel.object.create":
     case "dataModel.object.update":
       return pl.label || pl.id ? { surface: "data-model", source: pl.label || pl.id } : null;
@@ -321,12 +337,16 @@ function summarizePayload(proposal) {
       return p.objectId ? `binding for: ${p.objectId}` : "";
     case "explain.object":
       return p.target ? `about: ${p.target}` : "informational";
+    case "swarm.run.propose":
+    case "swarm.workflow.save":
+    case "swarm.run.resume":
+      return summarizeSwarmRunProposal(proposal);
     default:
       return "";
   }
 }
 
-export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, initialPrompt, initialThread, onApplied, onOpenArtifact }) {
+export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, initialPrompt, initialThread, onApplied, onOpenArtifact, onOpenSwarmWorkflow }) {
   const [activeTab, setActiveTab] = useState("assistant");
   const [intent, setIntent] = useState(initialIntent || "create_object");
   const [prompt, setPrompt] = useState(initialPrompt || "");
@@ -352,6 +372,22 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
   const [moreOpen, setMoreOpen] = useState(false);
   const moreMenuRef = useRef(null);
 
+  // Sidecar internal view (SWARM_RUN_CONTRACT_V1) — the swarm cockpit lives
+  // INSIDE the helper sidecar, no new route. "chat" is the existing
+  // conversation surface; swarm views render the governed run cockpit;
+  // "tool-output" is the expanded transcript frame.
+  const [activeView, setActiveView] = useState("chat");
+  // Focused workflow row when opened from an apply receipt's Open button.
+  const [swarmFocus, setSwarmFocus] = useState(null);
+  // Expanded transcript agent (tool-output view) + full-width takeover flag.
+  const [expandedAgent, setExpandedAgent] = useState(null);
+  const [expandActive, setExpandActive] = useState(false);
+  const priorViewRef = useRef("swarm-list");
+  // Slash menu — active index; "dismissed" suppresses the menu until the
+  // prompt changes again (Esc behavior).
+  const [slashIndex, setSlashIndex] = useState(0);
+  const [slashDismissed, setSlashDismissed] = useState(false);
+
   // Setup tab state
   const [connectionStatus, setConnectionStatus] = useState(null);
   const [pingLoading, setPingLoading] = useState(false);
@@ -464,6 +500,12 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
       setThreadId(null);
       setMessages([]);
       setMoreOpen(false);
+      setActiveView("chat");
+      setSwarmFocus(null);
+      setExpandedAgent(null);
+      setExpandActive(false);
+      setSlashIndex(0);
+      setSlashDismissed(false);
     }
   }, [open]);
 
@@ -478,13 +520,27 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [moreOpen]);
 
-  // Escape key
+  // Escape key — expand mode collapses back to the prior sidecar view first;
+  // a second Escape (or Escape outside expand mode) closes the sidecar as
+  // before. Predictable, no scroll trap.
   useEffect(() => {
     if (!open) return undefined;
-    const handler = (e) => { if (e.key === "Escape") onClose(); };
+    const handler = (e) => {
+      if (e.key !== "Escape") return;
+      if (expandActive) {
+        e.preventDefault();
+        setExpandActive(false);
+        if (activeView === "tool-output") {
+          setActiveView(priorViewRef.current || "swarm-list");
+          setExpandedAgent(null);
+        }
+        return;
+      }
+      onClose();
+    };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [open, onClose]);
+  }, [open, onClose, expandActive, activeView]);
 
   // Cmd+Enter at the window level fires apply when there is a result with
   // accepted proposals. The textarea handler stops propagation when the
@@ -541,6 +597,11 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
 
   async function runQuery() {
     if (!prompt.trim() || streaming) return;
+    if (!helperWidgetState.ready) {
+      setQueryError(helperWidgetState.guidance);
+      setActiveTab("chat");
+      return;
+    }
     setResult(null);
     setQueryError("");
     setStreamBuffer("");
@@ -672,6 +733,10 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
 
   const sandboxRow = resolveSandboxEnvRow(workspaceConfig);
   const helperAgentConfigured = isHelperConfigured(workspaceConfig);
+  const helperWidgetState = useMemo(
+    () => deriveHelperWidgetCausationState(workspaceConfig),
+    [workspaceConfig]
+  );
   const liveModel = sandboxRow?.localModel || "";
   const liveEndpoint = sandboxRow?.localEndpoint || "";
   const liveAdapter = sandboxRow?.intelligenceAdapterMode || "ollama";
@@ -818,6 +883,106 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
     try { promptRef.current?.focus(); } catch {}
   };
 
+  // Slash menu state derives from the live prompt. The menu only engages
+  // when "/" is the first character (parseSlashInput), never mid-sentence.
+  const slash = slashDismissed ? { active: false, query: "", matches: [] } : parseSlashInput(prompt);
+  const slashActive = slash.active && slash.matches.length > 0 && !streaming && activeView === "chat";
+
+  // Selecting a command never mutates config: read-only commands switch the
+  // sidecar view or seed a prompt; mutating commands seed a governed
+  // proposal request (intent + template) that still travels query → review
+  // → apply. No command calls sandbox-run or PATCH directly.
+  const selectSlashCommand = (cmd) => {
+    if (!helperWidgetState.ready) {
+      setQueryError(helperWidgetState.guidance);
+      setActiveTab("chat");
+      return;
+    }
+    setSlashDismissed(false);
+    setSlashIndex(0);
+    if (cmd.view) {
+      setPrompt("");
+      setSwarmFocus(null);
+      setActiveView(cmd.view);
+      return;
+    }
+    if (cmd.intent) onPickIntent(cmd.intent);
+    setPrompt(cmd.promptTemplate ? `${cmd.promptTemplate} ` : "");
+    try { promptRef.current?.focus(); } catch {}
+  };
+
+  const handleSlashKeyDown = (e) => {
+    if (!slashActive) return false;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSlashIndex((i) => (i + 1) % slash.matches.length);
+      return true;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSlashIndex((i) => (i - 1 + slash.matches.length) % slash.matches.length);
+      return true;
+    }
+    if (e.key === "Enter" || e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      selectSlashCommand(slash.matches[Math.min(slashIndex, slash.matches.length - 1)]);
+      return true;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setSlashDismissed(true);
+      return true;
+    }
+    return false;
+  };
+
+  // Refresh the page-level workspace config after a sandbox-run stamps run
+  // state onto a row — same onApplied channel the apply flow already uses.
+  const refreshWorkspaceConfig = async () => {
+    try {
+      const res = await fetch("/api/workspace");
+      const data = await res.json();
+      if (data?.workspaceConfig && onApplied) onApplied(data.workspaceConfig);
+    } catch {
+      // Non-fatal — the cockpit's own history polling still reflects the run.
+    }
+  };
+
+  // Open a swarm artifact (apply receipt → Open) inside the sidecar cockpit;
+  // every other artifact surface keeps routing through the page-level handler.
+  const handleOpenArtifact = (target, proposal) => {
+    if (target?.surface === "swarm-run") {
+      setSwarmFocus({ objectId: target.objectId, name: target.name });
+      setActiveView("swarm-detail");
+      return;
+    }
+    if (typeof onOpenArtifact === "function") onOpenArtifact(target, proposal);
+  };
+
+  const handleExpandTranscript = (agent) => {
+    priorViewRef.current = activeView === "tool-output" ? priorViewRef.current : activeView;
+    setExpandedAgent(agent);
+    setActiveView("tool-output");
+    setExpandActive(true);
+  };
+
+  const collapseExpand = () => {
+    setExpandActive(false);
+    setActiveView(priorViewRef.current || "swarm-list");
+    setExpandedAgent(null);
+  };
+
+  const inSwarmView = activeView === "swarm-list" || activeView === "swarm-detail" || activeView === "tool-output";
+  const canOpenSwarmWorkflow = Boolean(
+    inSwarmView
+    && activeTab === "assistant"
+    && swarmFocus?.objectId
+    && swarmFocus?.name
+    && typeof onOpenSwarmWorkflow === "function"
+  );
+
   if (!open) return null;
 
   return (
@@ -830,7 +995,7 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
         role="dialog"
         aria-label="Workspace helper"
         aria-modal="true"
-        style={{ width: panelWidth }}
+        style={{ width: expandActive ? "80vw" : panelWidth }}
       >
         {/* Drag handle */}
         <div
@@ -844,22 +1009,50 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
         {/* Header — title left; gear toggles Assistant ↔ Setup, then close. */}
         <div className="dm-sidecar-header">
           <div className="dm-sidecar-header-left">
+            {inSwarmView && (
+              <button
+                type="button"
+                className="dm-sidecar-icon-btn"
+                onClick={() => {
+                  if (activeView === "tool-output") { collapseExpand(); return; }
+                  setActiveView("chat");
+                  setSwarmFocus(null);
+                }}
+                aria-label="Back to chat"
+                title="Back to chat"
+                data-swarm-back=""
+              >
+                <ArrowLeft size={14} />
+              </button>
+            )}
             <span className="dm-sidecar-title" data-helper-title="">
-              {threadActive
-                ? deriveThreadDisplayTitle(initialThread, "Workspace Helper")
-                : "Workspace Helper"}
+              {inSwarmView
+                ? "Background tasks"
+                : threadActive
+                  ? deriveThreadDisplayTitle(initialThread, "Workspace Helper")
+                  : "Workspace Helper"}
             </span>
           </div>
           <div className="dm-sidecar-header-right">
             <button
               type="button"
               className="dm-sidecar-icon-btn"
-              onClick={() => setActiveTab((current) => (current === "setup" ? "assistant" : "setup"))}
-              aria-label={activeTab === "setup" ? "Back" : "Setup"}
-              title={activeTab === "setup" ? "Back" : "Setup"}
+              onClick={() => {
+                if (canOpenSwarmWorkflow) {
+                  onOpenSwarmWorkflow(swarmFocus);
+                  onClose?.();
+                  return;
+                }
+                setActiveTab((current) => (current === "setup" ? "assistant" : "setup"));
+              }}
+              disabled={inSwarmView && activeTab === "assistant" && !canOpenSwarmWorkflow}
+              aria-label={inSwarmView && activeTab === "assistant" ? "Open workflow canvas" : activeTab === "setup" ? "Back" : "Setup"}
+              title={inSwarmView && activeTab === "assistant" ? "Open workflow canvas" : activeTab === "setup" ? "Back" : "Setup"}
               data-tab={activeTab === "setup" ? "assistant" : "setup"}
             >
-              {activeTab === "setup" ? <ArrowLeft size={14} /> : <Settings size={14} />}
+              {inSwarmView && activeTab === "assistant"
+                ? <ArrowUpRight size={14} />
+                : activeTab === "setup" ? <ArrowLeft size={14} /> : <Settings size={14} />}
             </button>
             <button
               type="button"
@@ -873,11 +1066,31 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
           </div>
         </div>
 
+        {/* Swarm cockpit views — Background tasks list / detail / expanded
+            transcript. Same sidecar shell, no route change; chat state stays
+            mounted-adjacent and untouched while the user inspects runs. */}
+        {activeTab === "assistant" && inSwarmView && (
+          <div className="dm-sidecar-body dm-swarm-body" data-swarm-view={activeView}>
+            {activeView === "tool-output" && expandedAgent ? (
+              <SidecarExpandView title={expandedAgent.label || "Transcript"} onBack={collapseExpand}>
+                <SwarmAgentTranscript agent={expandedAgent} />
+              </SidecarExpandView>
+            ) : (
+              <SwarmRunCockpit
+                workspaceConfig={workspaceConfig}
+                focus={activeView === "swarm-detail" ? swarmFocus : null}
+                onConfigRefresh={refreshWorkspaceConfig}
+                onExpandTranscript={handleExpandTranscript}
+              />
+            )}
+          </div>
+        )}
+
         {/* Assistant tab — composer-at-bottom layout (Twenty Ask AI parity):
             conversation/result area on top (flex:1), bottom-anchored composer
             holds chip stack (empty state) → mode row (active thread) →
             textarea with attach + mode + send-arrow action row. */}
-        {activeTab === "assistant" && (
+        {activeTab === "assistant" && !inSwarmView && (
           <div className="dm-sidecar-body dm-helper-body">
             <div className="dm-helper-conversation" ref={conversationRef}>
               {/* Conversation — ChatGPT-grade multi-turn. User bubble
@@ -911,11 +1124,7 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
                           <ToolCallCard
                             proposal={receipt}
                             content={m.content || ""}
-                            onOpenArtifact={(p) => {
-                              if (typeof onOpenArtifact === "function") {
-                                onOpenArtifact(resolveArtifactTarget(p), p);
-                              }
-                            }}
+                            onOpenArtifact={(p) => handleOpenArtifact(resolveArtifactTarget(p), p)}
                           />
                         </div>
                       );
@@ -1154,20 +1363,53 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
               ) : null}
 
               <div className="dm-helper-composer-input">
+                {!helperWidgetState.ready && (
+                  <div className="dm-helper-error" role="status">
+                    <span>{helperWidgetState.guidance}</span>
+                  </div>
+                )}
+                {slashActive && (
+                  <div className="dm-helper-pill-menu dm-helper-slash-menu" role="listbox" data-helper-slash-menu="">
+                    {slash.matches.map((cmd, i) => (
+                      <button
+                        key={cmd.name}
+                        type="button"
+                        className={`dm-helper-pill-menu-item${i === Math.min(slashIndex, slash.matches.length - 1) ? " active" : ""}`}
+                        role="option"
+                        aria-selected={i === slashIndex}
+                        data-helper-slash-item={cmd.name}
+                        disabled={!helperWidgetState.ready}
+                        title={!helperWidgetState.ready ? helperWidgetState.guidance : cmd.description || cmd.label}
+                        onClick={() => selectSlashCommand(cmd)}
+                        onMouseEnter={() => setSlashIndex(i)}
+                      >
+                        <span className="dm-helper-slash-name">{cmd.name}</span>
+                        <span className="dm-field-hint">{cmd.description || cmd.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
                 <textarea
                   id="helper-prompt"
                   ref={promptRef}
                   className="dm-helper-composer-textarea"
                   rows={threadActive ? 2 : 3}
                   placeholder={threadActive
-                    ? 'Continue the conversation…'
-                    : 'Ask, search or make anything…'}
+                    ? 'Continue, or type / for commands…'
+                    : 'Type / for commands, or ask anything…'}
                   value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
+                  onChange={(e) => {
+                    setPrompt(e.target.value);
+                    setSlashDismissed(false);
+                    setSlashIndex(0);
+                  }}
                   disabled={streaming}
                   data-helper-prompt=""
                   aria-label="Helper prompt"
                   onKeyDown={(e) => {
+                    // Slash menu intercepts navigation/selection keys while
+                    // open; Cmd+Enter submission below stays intact.
+                    if (handleSlashKeyDown(e)) return;
                     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                       e.preventDefault();
                       // Stop the window-level apply handler from firing on the
@@ -1192,7 +1434,7 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
                       type="button"
                       className="dm-helper-composer-send"
                       onClick={runQuery}
-                      disabled={streaming || !prompt.trim()}
+                      disabled={streaming || !prompt.trim() || !helperWidgetState.ready}
                       data-helper-submit=""
                       aria-label={streaming ? "Sending" : "Send (⌘+Enter)"}
                       title={streaming ? "Sending…" : `Send · ${intentLabel(activeIntent)} (⌘+Enter)`}

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;