@invect/ui 0.0.1

package/src/components/nodes/AgentNode.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { memo, useCallback, useState } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+import { Card } from '../ui/card';
+import { useNodeRegistry } from '../../contexts/NodeRegistryContext';
+import { GraphNodeType, NodeExecutionStatus } from '@invect/core/types';
+import { cn } from '../../lib/utils';
+import { Loader2, Bot } from 'lucide-react';
+import { NodeAppendix, type AppendixPosition } from './NodeAppendix';
+import { AgentToolsBox } from './AgentToolsBox';
+import type { ToolDefinition, AddedToolInstance } from './ToolSelectorModal';
+import { useAgentToolCallbacks } from '../../contexts/AgentToolCallbacksContext';
+
+// Stable style objects for Handles - avoids creating new objects on every render
+const INPUT_HANDLE_STYLE = { top: '50%', transform: 'translate(-54%, -50%)' } as const;
+const OUTPUT_HANDLE_STYLE_SINGLE = { top: '50%', transform: 'translate(54%, -50%)' } as const;
+const OUTPUT_HANDLE_INNER_STYLE = { transform: 'translateX(54%)' } as const;
+const HANDLE_CLASS =
+  '!bg-background !w-4 !h-4 !border-2 !border-muted-foreground !rounded-full !transition-colors hover:!bg-muted hover:!border-foreground !shadow-none !ring-0';
+
+interface AgentNodeData extends Record<string, unknown> {
+  type?: GraphNodeType;
+  display_name?: string;
+  executionStatus?: NodeExecutionStatus;
+  params?: {
+    /** Added tool instances with their configurations */
+    addedTools?: AddedToolInstance[];
+    /** All available tools (populated by parent for tool resolution) */
+    availableTools?: ToolDefinition[];
+    toolsPosition?: AppendixPosition;
+    [key: string]: unknown;
+  };
+  // Event handlers (injected by FlowEditor)
+  /** Opens the tool selector modal */
+  onOpenToolSelector?: () => void;
+  /** Opens the tool selector modal with "show selected" filter enabled */
+  onShowMoreTools?: () => void;
+  /** Removes a tool instance from this node */
+  onRemoveTool?: (instanceId: string) => void;
+  /** Called when user clicks on a tool (to configure it) */
+  onToolClick?: (tool: AddedToolInstance) => void;
+  onToolsPositionChange?: (position: AppendixPosition) => void;
+}
+
+/**
+ * Loading placeholder shown while node definition is being fetched.
+ */
+const AgentNodeLoadingPlaceholder = memo(
+  ({ data, selected }: { data: AgentNodeData; selected: boolean }) => {
+    const label = data.display_name || 'AI Agent';
+
+    return (
+      <Card
+        className={`relative w-[240px] h-[60px] flex-row py-0 items-center cursor-move transition-colors bg-card hover:bg-card/80 ${
+          selected
+            ? 'border-blue-500 dark:border-blue-400 shadow-lg shadow-blue-500/25 dark:shadow-blue-400/30'
+            : 'border-sidebar-ring hover:border-muted-foreground'
+        }`}
+      >
+        <Handle
+          id="input"
+          type="target"
+          position={Position.Left}
+          style={INPUT_HANDLE_STYLE}
+          className={HANDLE_CLASS}
+        />
+
+        <div className="flex items-center gap-3 px-3 py-0 overflow-hidden">
+          <div className="flex items-center justify-center w-10 h-10 shrink-0 rounded-xl bg-muted">
+            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-semibold tracking-tight truncate text-card-foreground">
+              {label}
+            </div>
+            <div className="font-mono text-xs tracking-tight truncate text-muted-foreground">
+              AGENT
+            </div>
+          </div>
+        </div>
+
+        <Handle
+          id="output"
+          type="source"
+          position={Position.Right}
+          style={OUTPUT_HANDLE_STYLE_SINGLE}
+          className={HANDLE_CLASS}
+        />
+      </Card>
+    );
+  },
+);
+
+AgentNodeLoadingPlaceholder.displayName = 'AgentNodeLoadingPlaceholder';
+
+/**
+ * AgentNode - A specialized node for AI Agents with an attached tools box
+ *
+ * This node renders like the UniversalNode but with an additional "appendix"
+ * panel that displays and manages the tools available to the agent.
+ */
+export const AgentNode = memo(({ id, data, selected }: NodeProps) => {
+  const typedData = data as AgentNodeData;
+  const nodeType = GraphNodeType.AGENT;
+
+  const { getNodeDefinition, isLoading: registryLoading } = useNodeRegistry();
+  const definition = getNodeDefinition(nodeType);
+
+  // Read callbacks and available tools from context instead of data injection.
+  // This avoids the parent having to remap ALL nodes just to inject these into Agent data.
+  const toolCallbacks = useAgentToolCallbacks();
+
+  // Local state for tools position (can be controlled externally via data.params.toolsPosition)
+  const [localToolsPosition, setLocalToolsPosition] = useState<AppendixPosition>('bottom');
+  const toolsPosition = typedData.params?.toolsPosition ?? localToolsPosition;
+
+  // Available tools from context (provided by FlowEditor), falling back to data injection for non-editor views
+  const availableTools: ToolDefinition[] =
+    toolCallbacks?.availableTools ?? typedData.params?.availableTools ?? [];
+
+  // Get added tool instances from params
+  const addedTools: AddedToolInstance[] = typedData.params?.addedTools ?? [];
+
+  // Handle position change
+  const handlePositionChange = useCallback(
+    (position: AppendixPosition) => {
+      setLocalToolsPosition(position);
+      typedData.onToolsPositionChange?.(position);
+    },
+    [typedData],
+  );
+
+  // Show loading placeholder if registry is still loading or definition not found
+  if (registryLoading || !definition) {
+    return <AgentNodeLoadingPlaceholder data={typedData} selected={selected ?? false} />;
+  }
+
+  const label = typedData.display_name || definition.label || 'AI Agent';
+
+  // Agent nodes always use green/AI color
+  const iconColorClass = 'bg-green-500/15 text-green-600 dark:text-green-400';
+
+  // Get handle definitions from the node definition
+  const inputHandle = definition.input;
+  const outputs = definition.outputs || [];
+
+  const hasIncomingHandle = !!inputHandle;
+
+  // Check execution status for running state
+  const isRunning =
+    typedData.executionStatus === NodeExecutionStatus.RUNNING ||
+    typedData.executionStatus === NodeExecutionStatus.PENDING ||
+    typedData.executionStatus === NodeExecutionStatus.BATCH_SUBMITTED;
+  const isSuccess = typedData.executionStatus === NodeExecutionStatus.SUCCESS;
+  const isError = typedData.executionStatus === NodeExecutionStatus.FAILED;
+  const isSkipped = typedData.executionStatus === NodeExecutionStatus.SKIPPED;
+
+  const outputHandleConfigs = outputs.map((output, index) => {
+    if (outputs.length === 1) {
+      return { output, topPercent: 50 };
+    }
+    const EDGE_OFFSET = 28;
+    const availableSpace = 100 - EDGE_OFFSET * 2;
+    const topPercent = EDGE_OFFSET + (index / (outputs.length - 1)) * availableSpace;
+    return { output, topPercent };
+  });
+
+  // Compute border class for the tools appendix to match the node state
+  const appendixBorderClass = isRunning
+    ? 'border-primary'
+    : isSuccess
+      ? 'border-success'
+      : isError
+        ? 'border-destructive'
+        : isSkipped
+          ? 'border-dashed border-muted-foreground/50'
+          : selected
+            ? 'node-selected'
+            : 'border-sidebar-ring group-hover:border-primary/60';
+
+  return (
+    <div className="relative group">
+      {/* Main node card */}
+      <Card
+        className={cn(
+          'relative w-[200px] h-[60px] flex-row py-0 items-center cursor-move transition-colors node-hover-bg bg-card',
+          // Default border
+          !isRunning &&
+            !isSuccess &&
+            !isError &&
+            !isSkipped &&
+            'border-sidebar-ring group-hover:border-primary/60',
+          // Running state - animated gradient border
+          isRunning && 'node-running-border animate-node-border rounded-xl',
+          // Success state - green border
+          isSuccess && 'border-2 border-success',
+          // Error state - red border
+          isError && 'border-2 border-destructive',
+          // Skipped state - greyed out with dashed border
+          isSkipped && 'border-2 border-dashed border-muted-foreground/50 opacity-50',
+          // Selection state - change existing border color to blue for visibility
+          selected && !isRunning && !isSuccess && !isError && !isSkipped && 'node-selected',
+        )}
+      >
+        {/* Unified Input Handle */}
+        {hasIncomingHandle && (
+          <Handle
+            id={inputHandle?.id || 'input'}
+            type="target"
+            position={Position.Left}
+            style={INPUT_HANDLE_STYLE}
+            className={HANDLE_CLASS}
+          />
+        )}
+
+        <div className="flex items-center gap-3 px-3 py-0 overflow-hidden">
+          <div
+            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${iconColorClass}`}
+          >
+            <Bot className="w-6 h-6" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-semibold tracking-tight truncate text-card-foreground">
+              {label}
+            </div>
+            <div className="font-mono text-xs tracking-tight truncate text-muted-foreground">
+              {nodeType}
+            </div>
+          </div>
+        </div>
+
+        {/* Output Handles */}
+        {outputHandleConfigs.map(({ output, topPercent }) => {
+          const showLabel = outputs.length > 1;
+          return (
+            <div
+              key={output.id}
+              className="absolute right-0"
+              style={{ top: `${topPercent}%`, transform: 'translateY(-50%)' }}
+            >
+              <div className="relative flex items-center">
+                <Handle
+                  id={output.id}
+                  type="source"
+                  position={Position.Right}
+                  style={OUTPUT_HANDLE_INNER_STYLE}
+                  className="!relative !bg-background !w-4 !h-4 !border-2 !border-muted-foreground !rounded-full !transition-colors hover:!bg-muted hover:!border-foreground !shadow-none !ring-0"
+                />
+                {showLabel && (
+                  <div className="absolute px-1 text-xs border rounded left-8 text-card-foreground whitespace-nowrap bg-card border-sidebar-ring">
+                    {output.label}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </Card>
+
+      {/* Tools Appendix - attached to the node */}
+      <NodeAppendix
+        position={toolsPosition}
+        onPositionChange={handlePositionChange}
+        showPositionToggle={true}
+        borderClassName={appendixBorderClass}
+      >
+        <AgentToolsBox
+          tools={addedTools}
+          availableTools={availableTools}
+          selectedInstanceId={
+            toolCallbacks?.selectedToolNodeId === id ? toolCallbacks.selectedToolInstanceId : null
+          }
+          onAddTool={
+            toolCallbacks
+              ? () => toolCallbacks.onOpenToolSelector(id)
+              : typedData.onOpenToolSelector
+          }
+          onShowMore={
+            toolCallbacks ? () => toolCallbacks.onShowMoreTools(id) : typedData.onShowMoreTools
+          }
+          onToolClick={
+            toolCallbacks
+              ? (tool: AddedToolInstance) => toolCallbacks.onToolClick(id, tool.instanceId)
+              : typedData.onToolClick
+          }
+          onRemoveTool={
+            toolCallbacks
+              ? (instanceId: string) => toolCallbacks.onRemoveTool(id, instanceId)
+              : typedData.onRemoveTool
+          }
+        />
+      </NodeAppendix>
+    </div>
+  );
+});
+
+AgentNode.displayName = 'AgentNode';

package/src/components/nodes/AgentToolsBox.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { memo } from 'react';
+import { Plus, Settings } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { ProviderIcon } from '../shared/ProviderIcon';
+import type { AddedToolInstance, ToolDefinition } from './ToolSelectorModal';
+
+/**
+ * Tool category for organization in UI
+ * Matches AgentToolCategory from @invect/core
+ */
+export type ToolCategory = 'data' | 'web' | 'code' | 'utility' | 'custom';
+
+/**
+ * Simplified tool definition for display in the UI
+ * @deprecated Use AddedToolInstance instead
+ */
+export interface AgentToolDisplay {
+  id: string;
+  name: string;
+  category: ToolCategory;
+}
+
+interface AgentToolsBoxProps {
+  /** Tool instances currently attached to the agent */
+  tools: AddedToolInstance[];
+  /** Available tool definitions for resolving category info */
+  availableTools: ToolDefinition[];
+  /** Currently selected tool instance ID (being configured) */
+  selectedInstanceId?: string | null;
+  /** Called when user clicks "Add Tool" button */
+  onAddTool?: () => void;
+  /** Called when user wants to see all selected tools (opens modal with filter) */
+  onShowMore?: () => void;
+  /** Called when user clicks on a tool (to configure it) */
+  onToolClick?: (tool: AddedToolInstance) => void;
+  /** Called when user clicks remove button on a tool */
+  onRemoveTool?: (instanceId: string) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Maximum visible tools in grid (2 columns x 3 rows)
+const MAX_VISIBLE_TOOLS = 6;
+
+/**
+ * ToolTile - Compact square tile for displaying a tool in the grid
+ */
+const ToolTile = memo(function ToolTile({
+  tool,
+  toolDef,
+  isSelected,
+  onToolClick,
+  onRemoveTool: _onRemoveTool,
+}: {
+  tool: AddedToolInstance;
+  toolDef: ToolDefinition | undefined;
+  isSelected?: boolean;
+  onToolClick?: (tool: AddedToolInstance) => void;
+  onRemoveTool?: (instanceId: string) => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'group relative flex flex-row items-center p-1 gap-1 rounded-md border cursor-pointer transition-colors w-[99px]',
+        'hover:bg-accent hover:border-accent-foreground/20',
+        isSelected && 'bg-accent border-primary ring-1 ring-primary/30',
+      )}
+      onClick={() => onToolClick?.(tool)}
+      title={tool.name}
+    >
+      {toolDef?.provider?.svgIcon || toolDef?.provider?.icon || toolDef?.provider?.id ? (
+        <ProviderIcon
+          providerId={toolDef?.provider?.id}
+          svgIcon={toolDef?.provider?.svgIcon}
+          icon={toolDef?.provider?.icon}
+          className="w-5 h-5 shrink-0"
+        />
+      ) : null}
+      <span className="text-[10px] truncate w-full">{tool.name}</span>
+    </div>
+  );
+});
+
+/**
+ * AgentToolsBox - Displays and manages tools attached to an AI Agent node
+ *
+ * Renders as a compact grid showing tool tiles with category-based styling.
+ * Shows max 2x3 grid with "show more" button if there are more tools.
+ */
+export const AgentToolsBox = memo(function AgentToolsBox({
+  tools,
+  availableTools,
+  selectedInstanceId,
+  onAddTool,
+  onShowMore,
+  onToolClick,
+  onRemoveTool,
+  className,
+}: AgentToolsBoxProps) {
+  const isEmpty = tools.length === 0;
+  const hasMoreTools = tools.length > MAX_VISIBLE_TOOLS;
+  const visibleTools = hasMoreTools ? tools.slice(0, MAX_VISIBLE_TOOLS - 1) : tools;
+  const hiddenCount = tools.length - visibleTools.length;
+
+  // Helper to get tool definition by toolId
+  const getToolDef = (toolId: string) => availableTools.find((t) => t.id === toolId);
+
+  return (
+    <div className={cn('w-[220px] p-2', className)}>
+      {/* Header - only show if we have tools */}
+      {!isEmpty && (
+        <div className="mb-2 text-xs font-medium text-muted-foreground">Tools ({tools.length})</div>
+      )}
+
+      {isEmpty ? (
+        /* Empty state - prominent add button */
+        onAddTool && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onAddTool();
+            }}
+            className="flex flex-col items-center justify-center w-full gap-2 p-4 transition-all border-2 border-dashed rounded-lg border-muted-foreground/30 text-muted-foreground hover:border-primary/50 hover:text-primary hover:bg-primary/5"
+          >
+            <div className="flex items-center justify-center w-10 h-10 rounded-full bg-muted">
+              <Plus className="w-5 h-5" />
+            </div>
+            <div className="text-center">
+              <div className="text-xs font-medium">Add Tools</div>
+              <div className="text-[10px] opacity-70">Give the agent capabilities</div>
+            </div>
+          </button>
+        )
+      ) : (
+        /* Tools grid */
+        <div className="space-y-2">
+          <div className="grid grid-cols-2 gap-1.5">
+            {visibleTools.map((tool) => (
+              <ToolTile
+                key={tool.instanceId}
+                tool={tool}
+                toolDef={getToolDef(tool.toolId)}
+                isSelected={selectedInstanceId === tool.instanceId}
+                onToolClick={onToolClick}
+                onRemoveTool={onRemoveTool}
+              />
+            ))}
+
+            {/* Show more button - takes place of last tile when there are more tools */}
+            {hasMoreTools && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onShowMore?.();
+                }}
+                className="flex items-center justify-center transition-colors border border-dashed rounded-md cursor-pointer border-muted-foreground/50 text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5"
+                title={`Show ${hiddenCount} more tools`}
+              >
+                <span className="text-[10px]">+{hiddenCount} more</span>
+              </button>
+            )}
+          </div>
+
+          {/* Configure button */}
+          {onAddTool && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onAddTool();
+              }}
+              className="flex items-center justify-center gap-1.5 rounded-md border border-dashed border-muted-foreground/50 px-2 py-1.5 text-xs text-muted-foreground hover:border-muted-foreground hover:text-foreground transition-colors w-full"
+            >
+              <Settings className="w-3 h-3" />
+              <span>Configure</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Empty state - only show if no add button */}
+      {isEmpty && !onAddTool && (
+        <div className="text-xs italic text-muted-foreground/60">No tools configured</div>
+      )}
+    </div>
+  );
+});
+
+AgentToolsBox.displayName = 'AgentToolsBox';

package/src/components/nodes/NodeAppendix.tsx

@@ -0,0 +1,98 @@
+import { memo } from 'react';
+import { MoveVertical, MoveHorizontal } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export type AppendixPosition = 'top' | 'bottom' | 'left' | 'right';
+
+interface NodeAppendixProps {
+  position?: AppendixPosition;
+  onPositionChange?: (position: AppendixPosition) => void;
+  children: React.ReactNode;
+  className?: string;
+  /** Override the default border class (e.g. for selected/hover/state colours) */
+  borderClassName?: string;
+  /** Whether to show the position toggle button */
+  showPositionToggle?: boolean;
+}
+
+const positionClasses: Record<AppendixPosition, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2 flex-col-reverse',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2 flex-col',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2 flex-row-reverse',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2 flex-row',
+};
+
+const connectorClasses: Record<AppendixPosition, string> = {
+  top: 'w-px h-2 mx-auto',
+  bottom: 'w-px h-2 mx-auto',
+  left: 'h-px w-2 my-auto',
+  right: 'h-px w-2 my-auto',
+};
+
+const positionCycle: AppendixPosition[] = ['bottom', 'right', 'top', 'left'];
+
+/**
+ * NodeAppendix - A reusable component that renders an attached panel to a node
+ *
+ * Used to display additional content like tools, configurations, or previews
+ * that are visually connected to a node but rendered outside its bounds.
+ */
+export const NodeAppendix = memo(function NodeAppendix({
+  position = 'bottom',
+  onPositionChange,
+  children,
+  className,
+  borderClassName,
+  showPositionToggle = true,
+}: NodeAppendixProps) {
+  const handlePositionToggle = () => {
+    if (!onPositionChange) {
+      return;
+    }
+    const currentIndex = positionCycle.indexOf(position);
+    const nextIndex = (currentIndex + 1) % positionCycle.length;
+    onPositionChange(positionCycle[nextIndex]);
+  };
+
+  const isVertical = position === 'top' || position === 'bottom';
+  const ToggleIcon = isVertical ? MoveVertical : MoveHorizontal;
+
+  const resolvedBorderClass = borderClassName || 'border-sidebar-ring';
+
+  return (
+    <div className={cn('absolute flex items-center nowheel nopan', positionClasses[position])}>
+      {/* Connector line */}
+      <div className={cn('bg-sidebar-ring', connectorClasses[position])} />
+
+      {/* Content container */}
+      <div
+        className={cn(
+          'relative rounded-lg border bg-card shadow-md nodrag transition-colors',
+          resolvedBorderClass,
+          className,
+        )}
+      >
+        {/* Position toggle button */}
+        {showPositionToggle && onPositionChange && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handlePositionToggle();
+            }}
+            className={cn(
+              'absolute z-10 flex items-center justify-center w-5 h-5 transition-colors border rounded-full -top-2 -right-2 bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              resolvedBorderClass,
+            )}
+            title="Change position"
+          >
+            <ToggleIcon className="w-3 h-3" />
+          </button>
+        )}
+
+        {children}
+      </div>
+    </div>
+  );
+});
+
+NodeAppendix.displayName = 'NodeAppendix';

package/src/components/nodes/NodeStatusIndicator.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+export type NodeStatusIndicatorStatus = 'initial' | 'loading' | 'success' | 'error';
+export type NodeStatusIndicatorLoadingVariant = 'border' | 'overlay';
+
+interface NodeStatusIndicatorProps {
+  status: NodeStatusIndicatorStatus;
+  loadingVariant?: NodeStatusIndicatorLoadingVariant;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A node wrapper that indicates the status of a node via a border effect.
+ *
+ * Status can be:
+ * - "initial" - no status indicator (default state)
+ * - "loading" - animated conic gradient border that rotates
+ * - "success" - green border
+ * - "error" - red border
+ *
+ * Loading variants:
+ * - "border" - animated gradient border around the node (default)
+ * - "overlay" - full overlay with spinner
+ *
+ * The animated border uses CSS @property for the conic gradient angle animation.
+ * This is supported in Chrome/Chromium browsers. Firefox will show a static gradient.
+ */
+export function NodeStatusIndicator({
+  status,
+  loadingVariant = 'border',
+  children,
+  className,
+}: NodeStatusIndicatorProps) {
+  // For initial status, just render children without any wrapper styling
+  if (status === 'initial') {
+    return <div className={className}>{children}</div>;
+  }
+
+  const isLoading = status === 'loading';
+  const isSuccess = status === 'success';
+  const isError = status === 'error';
+
+  return (
+    <div className={cn('relative node-status-active', className)}>
+      {/* Status border wrapper */}
+      <div
+        className={cn(
+          'relative rounded-xl',
+          // Success state - static green border
+          isSuccess && 'ring-2 ring-green-500 ring-offset-0 ring-offset-background',
+          // Error state - static red border
+          isError && 'ring-2 ring-red-500 ring-offset-0 ring-offset-background',
+          // Loading state with border variant - animated gradient border using CSS @property
+          isLoading &&
+            loadingVariant === 'border' &&
+            'node-running-border rounded-xl border border-transparent animate-node-border',
+        )}
+      >
+        {children}
+      </div>
+
+      {/* Loading overlay variant */}
+      {isLoading && loadingVariant === 'overlay' && (
+        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/60 backdrop-blur-[1px]">
+          <div className="w-6 h-6 border-2 rounded-full border-t-transparent border-primary animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+NodeStatusIndicator.displayName = 'NodeStatusIndicator';