@synergenius/flow-weaver-pack-weaver 0.9.59 → 0.9.77

package/src/ui/swarm-dashboard.tsx

@@ -0,0 +1,647 @@
+/**
+ * Swarm Dashboard — main workspace component for the swarm command center.
+ *
+ * Replaces bot-workspace.tsx as the primary center-dock workspace.
+ * Composes: SwarmControls, BudgetBar, BotSlotCard, TaskPoolList,
+ * TaskCreateForm, and TaskDetailView into a unified swarm dashboard.
+ *
+ * Two-panel navigation:
+ * - Default: full swarm dashboard (controls + budget + bots + task pool + create form)
+ * - On task click: TaskDetailView (with back button returning to dashboard)
+ *
+ * Data loading:
+ * - Polls fw_weaver_swarm_status every 3s for swarm state
+ * - Polls fw_weaver_task_list every 5s for task pool
+ * - Both called immediately on mount
+ *
+ * Pattern: CommonJS require for platform deps, ESM import for local components,
+ * React.createElement throughout, module.exports at end.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback, useRef } = React;
+const {
+  Flex, ScrollArea, EmptyState, Typography, StatusIcon, Icon, Tag, Card, Tabs, SectionTitle, Button,
+  Input, IconButton, IconPicker, ColorPicker, toast, usePackWorkspace,
+} = require('@fw/plugin-ui-kit');
+
+// Local pack-specific components (bundled by esbuild)
+import SwarmControls from './swarm-controls';
+import BudgetBar from './budget-bar';
+import BotSlotCard from './bot-slot-card';
+import TaskPoolList from './task-pool-list';
+import TaskCreateForm from './task-create-form';
+import TaskDetailView from './task-detail-view';
+import ProfileCard from './profile-card';
+import ProfileEditor from './profile-editor';
+import DecisionLog from './decision-log';
+import { ICON_CATALOG, BOT_COLORS } from './bot-constants';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface InstanceInfo {
+  instanceId: string;
+  profileId: string;
+  index: number;
+  status: 'idle' | 'executing' | 'paused' | 'stopped';
+  currentTaskId?: string;
+  currentRunId?: string;
+  startedAt?: string;
+  tokensUsed: number;
+  cost: number;
+  tasksCompleted: number;
+  tasksFailed: number;
+}
+
+interface SwarmBudgetLayer {
+  limitTokens: number;
+  usedTokens: number;
+  limitCost: number;
+  usedCost: number;
+}
+
+interface SwarmStatus {
+  status: 'idle' | 'running' | 'paused' | 'stopping';
+  instances: Record<string, InstanceInfo>;
+  maxConcurrent: number;
+  tasksCompleted: number;
+  tasksFailed: number;
+  totalTokensUsed: number;
+  totalCost: number;
+  budgets?: {
+    workspace: SwarmBudgetLayer;
+    session: SwarmBudgetLayer;
+  };
+  startedAt?: string;
+}
+
+type TaskStatus = 'pending' | 'in-progress' | 'blocked' | 'done' | 'failed' | 'cancelled';
+
+interface PoolTask {
+  id: string;
+  title: string;
+  status: TaskStatus;
+  priority: number;
+  isParent: boolean;
+  parentId?: string;
+  assignedProfile?: string;
+  createdAt: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseToolResult(raw: unknown): unknown {
+  if (typeof raw === 'string') {
+    try { return JSON.parse(raw); } catch { return raw; }
+  }
+  return raw;
+}
+
+/** Resolve task title for a bot's currentTaskId from the task pool. */
+function resolveTaskTitle(taskId: string | undefined, tasks: PoolTask[]): string | undefined {
+  if (!taskId) return undefined;
+  const task = tasks.find(t => t.id === taskId);
+  return task?.title;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function SwarmDashboard() {
+  const ctx = usePackWorkspace();
+  const { callTool, onRefresh } = ctx;
+
+  // --- Navigation state ---
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState('tasks');
+  const [editingBotId, setEditingBotId] = useState<string | null>(null);
+  const [profileEditorMode, setProfileEditorMode] = useState<'create' | 'edit' | null>(null);
+  const [editingProfileId, setEditingProfileId] = useState<string | null>(null);
+
+  // --- Data state ---
+  const [swarmStatus, setSwarmStatus] = useState<SwarmStatus | null>(null);
+  const [tasks, setTasks] = useState<PoolTask[]>([]);
+  const [registeredBots, setRegisteredBots] = useState<Array<{ id: string; name: string; description: string; icon?: string; color?: string }>>([]);
+  const [providers, setProviders] = useState<Array<{ name: string; source: string; envVarsSet: boolean }>>([]);
+  const [insights, setInsights] = useState<Record<string, unknown> | null>(null);
+  const [profiles, setProfiles] = useState<Array<Record<string, unknown>>>([]);
+  const [orchestratorDecisions, setOrchestratorDecisions] = useState<Array<Record<string, unknown>>>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Refs to track mounted state for async cleanup
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => { mountedRef.current = false; };
+  }, []);
+
+  // --- Data fetching ---
+
+  const fetchSwarmStatus = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_swarm_status', {});
+      if (!mountedRef.current) return;
+      const data = parseToolResult(raw) as SwarmStatus | null;
+      if (data) setSwarmStatus(data);
+    } catch {
+      // non-fatal — swarm might not be started
+    }
+  }, [callTool]);
+
+  const fetchTaskList = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_task_list', {});
+      if (!mountedRef.current) return;
+      const data = parseToolResult(raw);
+      if (Array.isArray(data)) {
+        setTasks(data as PoolTask[]);
+      } else if (data && typeof data === 'object' && Array.isArray((data as Record<string, unknown>).tasks)) {
+        setTasks((data as Record<string, unknown>).tasks as PoolTask[]);
+      }
+    } catch {
+      // non-fatal
+    }
+  }, [callTool]);
+
+  const fetchBots = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_list_bots', {});
+      if (!mountedRef.current) return;
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      if (Array.isArray(data)) setRegisteredBots(data);
+    } catch { /* non-fatal */ }
+  }, [callTool]);
+
+  const fetchConfig = useCallback(async () => {
+    try {
+      const [provRaw, insRaw] = await Promise.all([
+        callTool('fw_weaver_providers', {}),
+        callTool('fw_weaver_insights', {}),
+      ]);
+      if (!mountedRef.current) return;
+      const provData = typeof provRaw === 'string' ? JSON.parse(provRaw) : provRaw;
+      const insData = typeof insRaw === 'string' ? JSON.parse(insRaw) : insRaw;
+      if (Array.isArray(provData)) setProviders(provData);
+      if (insData && typeof insData === 'object') setInsights(insData as Record<string, unknown>);
+    } catch { /* non-fatal */ }
+  }, [callTool]);
+
+  const fetchProfiles = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_profile_list', {});
+      if (!mountedRef.current) return;
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      if (Array.isArray(data)) setProfiles(data);
+    } catch { /* non-fatal */ }
+  }, [callTool]);
+
+  const fetchOrchestratorStatus = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_orchestrator_status', {});
+      if (!mountedRef.current) return;
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      if (data && typeof data === 'object') {
+        const decisions = (data as Record<string, unknown>).recentDecisions;
+        if (Array.isArray(decisions)) setOrchestratorDecisions(decisions);
+      }
+    } catch { /* non-fatal */ }
+  }, [callTool]);
+
+  const refreshAll = useCallback(async () => {
+    await Promise.all([fetchSwarmStatus(), fetchTaskList(), fetchBots(), fetchConfig(), fetchProfiles(), fetchOrchestratorStatus()]);
+    if (mountedRef.current) setLoading(false);
+  }, [fetchSwarmStatus, fetchTaskList, fetchBots, fetchConfig, fetchProfiles, fetchOrchestratorStatus]);
+
+  // Initial fetch on mount
+  useEffect(() => {
+    refreshAll();
+  }, [refreshAll]);
+
+  // Poll swarm status every 3s
+  useEffect(() => {
+    const interval = setInterval(fetchSwarmStatus, 3_000);
+    return () => clearInterval(interval);
+  }, [fetchSwarmStatus]);
+
+  // Poll task list every 5s
+  useEffect(() => {
+    const interval = setInterval(fetchTaskList, 5_000);
+    return () => clearInterval(interval);
+  }, [fetchTaskList]);
+
+  // Poll profiles & orchestrator status every 10s
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchProfiles();
+      fetchOrchestratorStatus();
+    }, 10_000);
+    return () => clearInterval(interval);
+  }, [fetchProfiles, fetchOrchestratorStatus]);
+
+  // Listen for platform refresh events
+  useEffect(() => {
+    return onRefresh(() => refreshAll());
+  }, [refreshAll, onRefresh]);
+
+  // --- Bot edit handlers ---
+
+  const handleUpdateBot = useCallback(async (botId: string, patch: Record<string, unknown>) => {
+    try {
+      await callTool('fw_weaver_register_bot', { id: botId, ...patch });
+      await fetchBots();
+      toast('Bot updated', { type: 'success' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to update bot', { type: 'error' });
+    }
+  }, [callTool, fetchBots]);
+
+  // --- Bot steering handlers ---
+
+  const handleSteerBot = useCallback(async (botId: string, command: string) => {
+    try {
+      await callTool('fw_weaver_steer', { botId, command });
+      toast(`${command} signal sent to ${botId}`, { type: 'info' });
+      fetchSwarmStatus();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : `Failed to ${command}`, { type: 'error' });
+    }
+  }, [callTool, fetchSwarmStatus]);
+
+  // --- Navigation handlers ---
+
+  const handleTaskClick = useCallback((taskId: string) => {
+    setSelectedTaskId(taskId);
+  }, []);
+
+  const handleBack = useCallback(() => {
+    setSelectedTaskId(null);
+    // Refresh data when returning to dashboard
+    refreshAll();
+  }, [refreshAll]);
+
+  const handleTaskCreated = useCallback(() => {
+    fetchTaskList();
+  }, [fetchTaskList]);
+
+  // --- Render: TaskDetailView (when task is selected) ---
+
+  if (selectedTaskId) {
+    return React.createElement(TaskDetailView, {
+      taskId: selectedTaskId,
+      onBack: handleBack,
+    });
+  }
+
+  // --- Render: Swarm Dashboard (default view) ---
+
+  const swarmInstances = swarmStatus?.instances ?? {};
+  const swarmInstanceEntries = Object.values(swarmInstances) as InstanceInfo[];
+  const hasSwarmInstances = swarmInstanceEntries.length > 0;
+  const hasRegisteredBots = registeredBots.length > 0;
+  const sessionBudget = swarmStatus?.budgets?.session;
+  const hasBudget = !!(sessionBudget && (sessionBudget.limitTokens > 0 || sessionBudget.limitCost > 0));
+  const hasContent = hasSwarmInstances || hasRegisteredBots || tasks.length > 0 || swarmStatus !== null;
+
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
+    // ── SwarmControls (top bar) ──────────────────────────────────
+    React.createElement(SwarmControls, {
+      swarmStatus,
+      onRefresh: refreshAll,
+    }),
+
+    // ── BudgetBar (below controls) ──────────────────────────────
+    hasBudget && React.createElement(Flex, {
+      variant: 'column-stretch-start-nowrap-4',
+      style: { padding: '8px 16px', flexShrink: 0, borderBottom: '1px solid var(--color-border-default)' },
+    },
+      React.createElement(BudgetBar, {
+        label: 'Tokens',
+        used: sessionBudget!.usedTokens,
+        limit: sessionBudget!.limitTokens,
+        unit: 'tokens',
+      }),
+      React.createElement(BudgetBar, {
+        label: 'Cost',
+        used: sessionBudget!.usedCost,
+        limit: sessionBudget!.limitCost,
+        unit: 'USD',
+      }),
+    ),
+
+    // ── Bot slot cards (horizontal scrollable row) ──────────────
+    // ── Tabs ──────────────────────────────────────────────────────
+    React.createElement(Tabs, {
+      tabs: [
+        { id: 'tasks', title: `Tasks (${tasks.length})` },
+        { id: 'bots', title: hasSwarmInstances ? `Instances (${swarmInstanceEntries.length})` : `Bots (${registeredBots.length})` },
+        { id: 'profiles', title: `Profiles (${profiles.length})` },
+        { id: 'config', title: 'Config' },
+      ],
+      activeTabId: activeTab,
+      onSelectTab: (id: string) => setActiveTab(id),
+      size: 'sm',
+    }),
+
+    // ── Tab content ──────────────────────────────────────────────
+    React.createElement(Flex, {
+      variant: 'column-stretch-start-nowrap-0',
+      style: { flex: 1, minHeight: 0, overflow: 'auto' },
+    },
+
+      // Tasks tab
+      activeTab === 'tasks' && React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-0',
+        style: { flex: 1, minHeight: 0 },
+      },
+        !hasContent && !loading && React.createElement(EmptyState, {
+          icon: 'smartToy',
+          message: 'Swarm not started',
+          description: 'Start the swarm to begin processing tasks, or create tasks below.',
+        }),
+
+        hasContent && React.createElement(TaskPoolList, {
+          tasks,
+          onTaskClick: handleTaskClick,
+        }),
+
+        // Task create form (inside Tasks tab)
+        React.createElement(Flex, {
+          variant: 'column-stretch-start-nowrap-0',
+          style: { padding: '8px 16px', flexShrink: 0, borderTop: '1px solid var(--color-border-default)' },
+        },
+          React.createElement(TaskCreateForm, {
+            onTaskCreated: handleTaskCreated,
+          }),
+        ),
+      ),
+
+      // Bots tab
+      activeTab === 'bots' && React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-0',
+        style: { flex: 1, minHeight: 0 },
+      },
+        // When swarm is running: show swarm instances
+        hasSwarmInstances && React.createElement(Flex, {
+          variant: 'column-stretch-start-nowrap-0',
+        },
+          React.createElement(Flex, {
+            variant: 'row-center-start-nowrap-8',
+            style: { padding: '8px 16px', borderBottom: '1px solid var(--color-border-default)' },
+          },
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { width: '120px', flexShrink: 0 },
+            }, 'Instance'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { width: '110px', flexShrink: 0 },
+            }, 'Bot'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { width: '70px', flexShrink: 0 },
+            }, 'Status'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { flex: 1, minWidth: 0 },
+            }, 'Task'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { width: '50px', flexShrink: 0, textAlign: 'right' },
+            }, 'Tokens'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { width: '50px', flexShrink: 0, textAlign: 'right' },
+            }, 'Cost'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular', color: 'color-text-subtle',
+              style: { width: '50px', flexShrink: 0 },
+            }, ''),
+          ),
+          // Instance rows
+          ...swarmInstanceEntries.map((inst: InstanceInfo) => {
+            // Look up profile → bot for this instance
+            const profile = profiles.find((p: Record<string, unknown>) => p.id === inst.profileId);
+            const botId = profile?.botId as string | undefined;
+            const bot = registeredBots.find((b) => b.id === botId);
+            return React.createElement(BotSlotCard, {
+              key: inst.instanceId,
+              bot: {
+                botId: inst.instanceId,
+                botName: `${inst.profileId} #${inst.index}`,
+                status: inst.status,
+                currentTaskId: inst.currentTaskId,
+                currentRunId: inst.currentRunId,
+                startedAt: inst.startedAt,
+                tokensUsed: inst.tokensUsed,
+                cost: inst.cost,
+              },
+              profileName: (profile?.name as string) || inst.profileId,
+              botDisplayName: bot?.name,
+              botIcon: bot?.icon,
+              botColor: bot?.color,
+              currentTaskTitle: resolveTaskTitle(inst.currentTaskId, tasks),
+              onPause: (id: string) => handleSteerBot(id, 'pause'),
+              onResume: (id: string) => handleSteerBot(id, 'resume'),
+              onStop: (id: string) => handleSteerBot(id, 'cancel'),
+            });
+          }),
+        ),
+
+        // When swarm is NOT running: show registered bots
+        !hasSwarmInstances && hasRegisteredBots && React.createElement(Flex, {
+          variant: 'column-stretch-start-nowrap-0',
+          style: { padding: '8px 16px' },
+        },
+          ...registeredBots.map((bot) => {
+            const isEditing = editingBotId === bot.id;
+            return React.createElement(Flex, {
+              key: bot.id,
+              variant: 'column-stretch-start-nowrap-0',
+              style: { borderBottom: '1px solid var(--color-border-default)' },
+            },
+              // Bot row (clickable to toggle edit)
+              React.createElement(Flex, {
+                variant: 'row-center-start-nowrap-8',
+                style: { padding: '6px 0', cursor: 'pointer' },
+                onClick: () => setEditingBotId(isEditing ? null : bot.id),
+              },
+                React.createElement(Icon, {
+                  name: bot.icon || 'smartToy', size: 16,
+                  color: bot.color || 'color-text-medium',
+                }),
+                React.createElement(Flex, { variant: 'column-start-start-nowrap-1', style: { flex: 1, minWidth: 0 } },
+                  React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' }, bot.name),
+                  bot.description && React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, bot.description),
+                ),
+                React.createElement(Icon, { name: isEditing ? 'expandLess' : 'expandMore', size: 14, color: 'color-text-subtle' }),
+              ),
+
+              // Edit section (icon + color pickers)
+              isEditing && React.createElement(Flex, {
+                variant: 'column-stretch-start-nowrap-12',
+                style: { padding: '8px 0 12px 24px' },
+              },
+                React.createElement(IconPicker, {
+                  catalog: ICON_CATALOG,
+                  value: bot.icon || 'smartToy',
+                  onChange: (icon: string) => handleUpdateBot(bot.id, { icon }),
+                  accentColor: bot.color || undefined,
+                  defaultExpanded: true,
+                }),
+                React.createElement(ColorPicker, {
+                  colors: BOT_COLORS,
+                  value: bot.color || '',
+                  onChange: (color: string) => handleUpdateBot(bot.id, { color }),
+                  defaultExpanded: true,
+                }),
+              ),
+            );
+          }),
+        ),
+
+        // No bots at all
+        !hasSwarmInstances && !hasRegisteredBots && React.createElement(EmptyState, {
+          icon: 'smartToy',
+          message: 'No bots registered',
+          description: 'Register bots to start the swarm.',
+        }),
+      ),
+
+      // Profiles tab — when ProfileEditor is open, render it INSTEAD of the list
+      activeTab === 'profiles' && profileEditorMode != null && React.createElement(ProfileEditor, {
+        mode: profileEditorMode,
+        profileId: editingProfileId ?? undefined,
+        bots: registeredBots.map((b: { id: string; name: string; icon?: string; color?: string }) => ({ id: b.id, name: b.name, icon: b.icon, color: b.color })),
+        onSave: () => { setProfileEditorMode(null); setEditingProfileId(null); fetchProfiles(); },
+        onCancel: () => { setProfileEditorMode(null); setEditingProfileId(null); },
+        onDelete: profileEditorMode === 'edit'
+          ? () => { setProfileEditorMode(null); setEditingProfileId(null); fetchProfiles(); }
+          : undefined,
+      }),
+
+      // Profiles tab — default list view
+      activeTab === 'profiles' && profileEditorMode == null && React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-0',
+        style: { flex: 1, minHeight: 0 },
+      },
+        // ── Profile cards (scrollable) ──
+        React.createElement(Flex, {
+          variant: 'column-stretch-start-nowrap-8',
+          style: { flex: 1, minHeight: 0, overflow: 'auto', padding: '12px 16px' },
+        },
+          profiles.length > 0
+            ? React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8' },
+                ...profiles.map((p: Record<string, unknown>) => {
+                  const activeCount = swarmInstanceEntries.filter(
+                    (inst: InstanceInfo) => inst.profileId === p.id && inst.status === 'executing',
+                  ).length;
+                  return React.createElement(ProfileCard, {
+                    key: p.id as string,
+                    profile: p as unknown,
+                    activeInstances: activeCount,
+                    onEdit: (id: string) => { setEditingProfileId(id); setProfileEditorMode('edit'); },
+                    onDelete: async (id: string) => {
+                      const ok = await ctx.confirm('Are you sure you want to delete this profile?', {
+                        title: 'Delete Profile',
+                        confirmLabel: 'Delete',
+                        state: 'danger',
+                      });
+                      if (!ok) return;
+                      try {
+                        await callTool('fw_weaver_profile_delete', { id });
+                        await fetchProfiles();
+                        toast('Profile deleted', { type: 'success' });
+                      } catch (err: unknown) {
+                        toast(err instanceof Error ? err.message : 'Failed to delete profile', { type: 'error' });
+                      }
+                    },
+                  });
+                }),
+              )
+            : React.createElement(EmptyState, {
+                icon: 'person',
+                message: 'No profiles',
+                description: 'Profiles define how bots behave. Start the swarm to create defaults, or create one below.',
+              }),
+
+          // ── Routing / Decision Log (inside scrollable area) ──
+          orchestratorDecisions.length > 0 && React.createElement(DecisionLog, {
+            decisions: orchestratorDecisions as unknown[],
+          }),
+        ),
+
+        // ── New Profile button (bottom bar) ──
+        React.createElement(Flex, {
+          variant: 'column-stretch-start-nowrap-0',
+          style: { flexShrink: 0, borderTop: '1px solid var(--color-border-default)', padding: '8px 16px' },
+        },
+          React.createElement(Button, {
+            size: 'xs', variant: 'clear', color: 'primary',
+            leftIcon: 'add',
+            onClick: () => setProfileEditorMode('create'),
+          }, 'New Profile'),
+        ),
+
+      ),
+
+      // Config tab
+      activeTab === 'config' && React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-12',
+        style: { padding: '12px 16px' },
+      },
+        // ── Provider ──
+        React.createElement(Flex, { variant: 'row-center-space-between-nowrap-8' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Provider'),
+          React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
+            React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
+              providers.find((p) => p.envVarsSet)?.name ?? 'None detected',
+            ),
+            providers.find((p) => p.envVarsSet) && React.createElement(Tag, { size: 'small', color: 'info' }, 'active'),
+          ),
+        ),
+
+        // Trust
+        insights?.trust && React.createElement(Flex, { variant: 'row-center-space-between-nowrap-8' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Trust'),
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
+            `Phase ${(insights.trust as Record<string, unknown>).phase} · ${(insights.trust as Record<string, unknown>).score}/100`,
+          ),
+        ),
+
+        // Health
+        insights?.health && React.createElement(Flex, { variant: 'row-center-space-between-nowrap-8' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Health'),
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
+            `${(insights.health as Record<string, unknown>).overall}/100`,
+          ),
+        ),
+
+        // Available providers
+        providers.length > 0 && React.createElement(Flex, { variant: 'column-stretch-start-nowrap-4' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Available Providers'),
+          React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
+            ...providers.map((p) =>
+              React.createElement(Tag, {
+                key: p.name,
+                size: 'small',
+                color: p.envVarsSet ? 'positive' : 'secondary',
+              }, p.name),
+            ),
+          ),
+        ),
+      ),
+    ),
+
+  );
+}
+
+export { SwarmDashboard };
+export default SwarmDashboard;
+module.exports = SwarmDashboard;