@almadar/ui 4.47.9 → 4.48.0

package/dist/avl/index.cjs

@@ -56165,7 +56165,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 +56243,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 +58776,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 +58914,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 +59897,8 @@ function FlowCanvasInner({
   onPatternDelete,
   onEventWire,
   behaviorMeta,
+  orbitalStatus,
+  onOrbitalHover,
   layoutHint,
   onNodeSelect,
   composeLevel,
@@ -59899,7 +59941,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 +59957,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

@@ -56119,7 +56119,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 +56197,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 +58730,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 +58868,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 +59851,8 @@ function FlowCanvasInner({
   onPatternDelete,
   onEventWire,
   behaviorMeta,
+  orbitalStatus,
+  onOrbitalHover,
   layoutHint,
   onNodeSelect,
   composeLevel,
@@ -59853,7 +59895,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 +59911,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/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/package.json

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