@almadar/ui 4.47.9 → 4.49.0

package/dist/avl/index.cjs

@@ -25078,14 +25078,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -25470,45 +25463,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                HStack,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }
@@ -56165,7 +56147,7 @@ function findCrossLinks(orbitals) {
   }
   return links;
 }
-function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint) {
+function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus) {
   const orbitals = getOrbitals(schema);
   const nodes = [];
   const edges = [];
@@ -56243,6 +56225,7 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint) {
         fieldCount: entityInfo.fieldCount,
         traitCount: traits2.length,
         pageRoutes,
+        status: orbitalStatus?.[orb.name] ?? "idle",
         _fullSchema: schema,
         _mockData: mockData
       }
@@ -58775,6 +58758,10 @@ var OrbPreviewNodeInner = (props) => {
   const eventSources = data.eventSources ?? [];
   const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
   const isExpanded = Boolean(data.traitName);
+  const status = data.status ?? "idle";
+  const isRunning = status === "running";
+  const isSuccess = status === "success";
+  const isError = status === "error";
   const label = isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
   const sublabel = isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
   const orbitalSchema = React147.useMemo(() => {
@@ -58909,19 +58896,54 @@ var OrbPreviewNodeInner = (props) => {
   const handlePreviewDragLeave = React147.useCallback((e) => {
     contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
   }, []);
+  const statusBorder = isRunning ? "var(--color-primary)" : isError ? "var(--color-danger)" : isSuccess ? "var(--color-success)" : null;
+  const borderWidth = isRunning || isError || isSuccess ? "2px" : "1.5px";
+  const borderColor = statusBorder ?? (hovered ? "var(--color-primary)" : colors.border);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
-      className: "rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden",
+      className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
-        borderColor: hovered ? "var(--color-primary)" : colors.border,
-        borderWidth: "1.5px",
+        borderColor,
+        borderWidth,
         width: preset.width
       },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: SELECTION_STYLES }),
+        isRunning && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes orb-preview-running-pulse {
+              0%, 100% { box-shadow: 0 0 0 0 var(--color-primary); opacity: 0.6; }
+              50%      { box-shadow: 0 0 0 4px var(--color-primary); opacity: 0.15; }
+            }
+            .orb-preview-running {
+              animation: orb-preview-running-pulse 1.8s ease-in-out infinite;
+            }
+            @keyframes orb-preview-spinner {
+              from { transform: rotate(0deg); }
+              to   { transform: rotate(360deg); }
+            }
+            .orb-preview-spinner {
+              animation: orb-preview-spinner 0.9s linear infinite;
+            }
+          ` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: "orb-preview-spinner absolute top-2 right-2 rounded-full pointer-events-none",
+              style: {
+                width: 14,
+                height: 14,
+                border: "2px solid var(--color-primary)",
+                borderTopColor: "transparent",
+                zIndex: 2
+              },
+              title: "Coordinator is dispatching to this orbital"
+            }
+          )
+        ] }),
         layerColor && /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
@@ -59857,6 +59879,8 @@ function FlowCanvasInner({
   onPatternDelete,
   onEventWire,
   behaviorMeta,
+  orbitalStatus,
+  onOrbitalHover,
   layoutHint,
   onNodeSelect,
   composeLevel,
@@ -59899,7 +59923,7 @@ function FlowCanvasInner({
   const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = React147.useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
-    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint);
+    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
@@ -59915,7 +59939,7 @@ function FlowCanvasInner({
       expandedNodes: expanded.nodes,
       expandedEdges: expanded.edges
     };
-  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData]);
+  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
   const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
   const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = react.useNodesState(activeNodes);

package/dist/avl/index.d.cts

@@ -901,6 +901,18 @@ interface PreviewNodeData extends Record<string, unknown> {
     fieldCount?: number;
     traitCount?: number;
     pageRoutes?: string[];
+    /**
+     * Generation status for this orbital. When `'running'`, the overview node
+     * renders a spinner overlay + accent border so the user can see which
+     * orbital the coordinator is currently dispatching to. Other states are
+     * available so consumers can also paint success/error treatments
+     * (e.g. green border on completion, red on failure). Default is `'idle'`.
+     *
+     * Set by FlowCanvasProps.orbitalStatus and threaded through the converter.
+     * Future expansion: hover over a `'running'` node to surface the subagent
+     * trace inline.
+     */
+    status?: 'idle' | 'running' | 'success' | 'error';
 }
 /** Data for event flow edges. */
 interface EventEdgeData extends Record<string, unknown> {
@@ -948,7 +960,7 @@ interface EventEdgeData extends Record<string, unknown> {
  */
 declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<string, unknown[]>, behaviorMeta?: Record<string, {
     layer: string;
-}>, layoutHint?: 'pipeline' | 'grid'): {
+}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };
@@ -1260,6 +1272,20 @@ interface FlowCanvasProps {
     behaviorMeta?: Record<string, {
         layer: string;
     }>;
+    /**
+     * Per-orbital generation status. Keyed by orbital name. Drives the spinner
+     * + accent border treatment on the overview node and (future) the hover
+     * trace surface. Defaults to `'idle'` for missing entries. Consumers
+     * derive this from agent subagent_start/complete SSE events.
+     */
+    orbitalStatus?: Record<string, PreviewNodeData['status']>;
+    /**
+     * Hover handler for overview-level orbital nodes. Fires with the orbital
+     * name on enter and `null` on leave. Reserved for the upcoming trace
+     * tooltip: consumers will use it to anchor a popover that shows the
+     * subagent's live trace + reasoning for the hovered orbital.
+     */
+    onOrbitalHover?: (orbitalName: string | null) => void;
     /** Layout hint: 'pipeline' renders nodes left-to-right, 'grid' (default) uses sqrt-based grid. */
     layoutHint?: 'pipeline' | 'grid';
     /** Called when the user clicks a node in overview level (for composition hints). */

package/dist/avl/index.js

@@ -25032,14 +25032,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -25424,45 +25417,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-                HStack,
+        /* @__PURE__ */ jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }
@@ -56119,7 +56101,7 @@ function findCrossLinks(orbitals) {
   }
   return links;
 }
-function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint) {
+function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus) {
   const orbitals = getOrbitals(schema);
   const nodes = [];
   const edges = [];
@@ -56197,6 +56179,7 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint) {
         fieldCount: entityInfo.fieldCount,
         traitCount: traits2.length,
         pageRoutes,
+        status: orbitalStatus?.[orb.name] ?? "idle",
         _fullSchema: schema,
         _mockData: mockData
       }
@@ -58729,6 +58712,10 @@ var OrbPreviewNodeInner = (props) => {
   const eventSources = data.eventSources ?? [];
   const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
   const isExpanded = Boolean(data.traitName);
+  const status = data.status ?? "idle";
+  const isRunning = status === "running";
+  const isSuccess = status === "success";
+  const isError = status === "error";
   const label = isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
   const sublabel = isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
   const orbitalSchema = useMemo(() => {
@@ -58863,19 +58850,54 @@ var OrbPreviewNodeInner = (props) => {
   const handlePreviewDragLeave = useCallback((e) => {
     contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
   }, []);
+  const statusBorder = isRunning ? "var(--color-primary)" : isError ? "var(--color-danger)" : isSuccess ? "var(--color-success)" : null;
+  const borderWidth = isRunning || isError || isSuccess ? "2px" : "1.5px";
+  const borderColor = statusBorder ?? (hovered ? "var(--color-primary)" : colors.border);
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: "rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden",
+      className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
-        borderColor: hovered ? "var(--color-primary)" : colors.border,
-        borderWidth: "1.5px",
+        borderColor,
+        borderWidth,
         width: preset.width
       },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsx("style", { children: SELECTION_STYLES }),
+        isRunning && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("style", { children: `
+            @keyframes orb-preview-running-pulse {
+              0%, 100% { box-shadow: 0 0 0 0 var(--color-primary); opacity: 0.6; }
+              50%      { box-shadow: 0 0 0 4px var(--color-primary); opacity: 0.15; }
+            }
+            .orb-preview-running {
+              animation: orb-preview-running-pulse 1.8s ease-in-out infinite;
+            }
+            @keyframes orb-preview-spinner {
+              from { transform: rotate(0deg); }
+              to   { transform: rotate(360deg); }
+            }
+            .orb-preview-spinner {
+              animation: orb-preview-spinner 0.9s linear infinite;
+            }
+          ` }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "orb-preview-spinner absolute top-2 right-2 rounded-full pointer-events-none",
+              style: {
+                width: 14,
+                height: 14,
+                border: "2px solid var(--color-primary)",
+                borderTopColor: "transparent",
+                zIndex: 2
+              },
+              title: "Coordinator is dispatching to this orbital"
+            }
+          )
+        ] }),
         layerColor && /* @__PURE__ */ jsx(
           Box,
           {
@@ -59811,6 +59833,8 @@ function FlowCanvasInner({
   onPatternDelete,
   onEventWire,
   behaviorMeta,
+  orbitalStatus,
+  onOrbitalHover,
   layoutHint,
   onNodeSelect,
   composeLevel,
@@ -59853,7 +59877,7 @@ function FlowCanvasInner({
   const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
-    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint);
+    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
@@ -59869,7 +59893,7 @@ function FlowCanvasInner({
       expandedNodes: expanded.nodes,
       expandedEdges: expanded.edges
     };
-  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData]);
+  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
   const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
   const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);

package/dist/components/index.cjs

@@ -20245,14 +20245,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -20637,45 +20630,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          exports.Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                exports.HStack,
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            exports.HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                exports.Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    exports.Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }

package/dist/components/index.js

@@ -20199,14 +20199,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -20591,45 +20584,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-                HStack,
+        /* @__PURE__ */ jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }

package/dist/components/molecules/avl/avl-preview-converter.d.ts

@@ -21,7 +21,7 @@ import type { PreviewNodeData, EventEdgeData } from './avl-preview-types';
  */
 export declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<string, unknown[]>, behaviorMeta?: Record<string, {
     layer: string;
-}>, layoutHint?: 'pipeline' | 'grid'): {
+}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };

package/dist/components/molecules/avl/avl-preview-types.d.ts

@@ -89,6 +89,18 @@ export interface PreviewNodeData extends Record<string, unknown> {
     fieldCount?: number;
     traitCount?: number;
     pageRoutes?: string[];
+    /**
+     * Generation status for this orbital. When `'running'`, the overview node
+     * renders a spinner overlay + accent border so the user can see which
+     * orbital the coordinator is currently dispatching to. Other states are
+     * available so consumers can also paint success/error treatments
+     * (e.g. green border on completion, red on failure). Default is `'idle'`.
+     *
+     * Set by FlowCanvasProps.orbitalStatus and threaded through the converter.
+     * Future expansion: hover over a `'running'` node to surface the subagent
+     * trace inline.
+     */
+    status?: 'idle' | 'running' | 'success' | 'error';
 }
 /** Data for event flow edges. */
 export interface EventEdgeData extends Record<string, unknown> {

package/dist/components/organisms/avl/FlowCanvas.d.ts

@@ -78,6 +78,20 @@ export interface FlowCanvasProps {
     behaviorMeta?: Record<string, {
         layer: string;
     }>;
+    /**
+     * Per-orbital generation status. Keyed by orbital name. Drives the spinner
+     * + accent border treatment on the overview node and (future) the hover
+     * trace surface. Defaults to `'idle'` for missing entries. Consumers
+     * derive this from agent subagent_start/complete SSE events.
+     */
+    orbitalStatus?: Record<string, PreviewNodeData['status']>;
+    /**
+     * Hover handler for overview-level orbital nodes. Fires with the orbital
+     * name on enter and `null` on leave. Reserved for the upcoming trace
+     * tooltip: consumers will use it to anchor a popover that shows the
+     * subagent's live trace + reasoning for the hovered orbital.
+     */
+    onOrbitalHover?: (orbitalName: string | null) => void;
     /** Layout hint: 'pipeline' renders nodes left-to-right, 'grid' (default) uses sqrt-based grid. */
     layoutHint?: 'pipeline' | 'grid';
     /** Called when the user clicks a node in overview level (for composition hints). */

package/dist/providers/index.cjs

@@ -21490,14 +21490,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -21882,45 +21875,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                HStack,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }

package/dist/providers/index.js

@@ -21444,14 +21444,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -21836,45 +21829,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-                HStack,
+        /* @__PURE__ */ jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }

package/dist/runtime/index.cjs

@@ -21259,14 +21259,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -21651,45 +21644,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                HStack,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }

package/dist/runtime/index.js

@@ -21213,14 +21213,7 @@ function DataGrid({
               {
                 "data-entity-row": true,
                 "data-entity-id": id,
-                className: cn(
-                  "bg-card rounded-lg",
-                  "border border-border",
-                  "shadow-sm hover:shadow-lg",
-                  "hover:border-primary transition-all",
-                  "p-4",
-                  isSelected && "ring-2 ring-primary border-primary"
-                ),
+                className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
                 children: children(itemData, index)
               },
               id
@@ -21605,45 +21598,34 @@ function DataList({
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: cn(
-              "group flex items-center gap-4 transition-all duration-200",
-              isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-muted/80",
-              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-                HStack,
+        /* @__PURE__ */ jsxs(Box, { className: "group flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
+            HStack,
+            {
+              gap: "xs",
+              className: "flex-shrink-0",
+              children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  gap: "xs",
-                  className: "flex-shrink-0",
-                  children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: action.variant ?? "ghost",
-                      size: "sm",
-                      onClick: handleActionClick(action, itemData),
-                      "data-testid": `action-${action.event}`,
-                      "data-row-id": String(itemData.id),
-                      className: cn(
-                        action.variant === "danger" && "text-error hover:bg-error/10"
-                      ),
-                      children: [
-                        action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                        action.label
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
-            ]
-          }
-        ),
+                  variant: action.variant ?? "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  "data-row-id": String(itemData.id),
+                  className: cn(
+                    action.variant === "danger" && "text-error hover:bg-error/10"
+                  ),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              ))
+            }
+          )
+        ] }),
         isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.47.9",
+  "version": "4.49.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [