@synergenius/flow-weaver-pack-weaver 0.9.62 → 0.9.78

package/src/ui/swarm-dashboard.tsx

@@ -20,7 +20,8 @@
 const React = require('react');
 const { useState, useEffect, useCallback, useRef } = React;
 const {
-  Flex, ScrollArea, EmptyState, Typography, usePackWorkspace,
+  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)
@@ -30,38 +31,48 @@ 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 BotSlotInfo {
-  botId: string;
-  botName: string;
+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 SwarmBudget {
-  tokenLimit: number;
-  tokensUsed: number;
-  costLimit: number;
-  costUsed: number;
+interface SwarmBudgetLayer {
+  limitTokens: number;
+  usedTokens: number;
+  limitCost: number;
+  usedCost: number;
 }
 
 interface SwarmStatus {
   status: 'idle' | 'running' | 'paused' | 'stopping';
-  bots: Record<string, BotSlotInfo>;
+  instances: Record<string, InstanceInfo>;
   maxConcurrent: number;
   tasksCompleted: number;
   tasksFailed: number;
   totalTokensUsed: number;
   totalCost: number;
-  budget?: SwarmBudget;
+  budgets?: {
+    workspace: SwarmBudgetLayer;
+    session: SwarmBudgetLayer;
+  };
   startedAt?: string;
 }
 
@@ -74,7 +85,7 @@ interface PoolTask {
   priority: number;
   isParent: boolean;
   parentId?: string;
-  assignedBots: string[];
+  assignedProfile?: string;
   createdAt: string;
 }
 
@@ -106,10 +117,19 @@ function SwarmDashboard() {
 
   // --- 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
@@ -147,10 +167,54 @@ function SwarmDashboard() {
     }
   }, [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()]);
+    await Promise.all([fetchSwarmStatus(), fetchTaskList(), fetchBots(), fetchConfig(), fetchProfiles(), fetchOrchestratorStatus()]);
     if (mountedRef.current) setLoading(false);
-  }, [fetchSwarmStatus, fetchTaskList]);
+  }, [fetchSwarmStatus, fetchTaskList, fetchBots, fetchConfig, fetchProfiles, fetchOrchestratorStatus]);
 
   // Initial fetch on mount
   useEffect(() => {
@@ -169,11 +233,44 @@ function SwarmDashboard() {
     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) => {
@@ -201,11 +298,13 @@ function SwarmDashboard() {
 
   // --- Render: Swarm Dashboard (default view) ---
 
-  const bots = swarmStatus?.bots ?? {};
-  const botEntries = Object.values(bots) as BotSlotInfo[];
-  const hasBots = botEntries.length > 0;
-  const hasBudget = !!(swarmStatus?.budget);
-  const hasContent = hasBots || tasks.length > 0 || swarmStatus !== null;
+  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',
@@ -220,96 +319,326 @@ function SwarmDashboard() {
     // ── BudgetBar (below controls) ──────────────────────────────
     hasBudget && React.createElement(Flex, {
       variant: 'column-stretch-start-nowrap-4',
-      style: {
-        padding: '8px 16px',
-        borderBottom: '1px solid var(--color-border-default)',
-        flexShrink: 0,
-      },
+      style: { padding: '8px 16px', flexShrink: 0, borderBottom: '1px solid var(--color-border-default)' },
     },
       React.createElement(BudgetBar, {
         label: 'Tokens',
-        used: swarmStatus!.budget!.tokensUsed,
-        limit: swarmStatus!.budget!.tokenLimit,
+        used: sessionBudget!.usedTokens,
+        limit: sessionBudget!.limitTokens,
         unit: 'tokens',
       }),
       React.createElement(BudgetBar, {
         label: 'Cost',
-        used: swarmStatus!.budget!.costUsed,
-        limit: swarmStatus!.budget!.costLimit,
+        used: sessionBudget!.usedCost,
+        limit: sessionBudget!.limitCost,
         unit: 'USD',
       }),
     ),
 
     // ── Bot slot cards (horizontal scrollable row) ──────────────
-    hasBots && React.createElement(Flex, {
-      variant: 'row-start-start-nowrap-8',
-      style: {
-        padding: '8px 16px',
-        overflowX: 'auto',
-        overflowY: 'hidden',
-        flexShrink: 0,
-        borderBottom: '1px solid var(--color-border-default)',
-      },
-    },
-      ...botEntries.map((bot: BotSlotInfo) =>
-        React.createElement(BotSlotCard, {
-          key: bot.botId,
-          bot,
-          currentTaskTitle: resolveTaskTitle(bot.currentTaskId, tasks),
-        }),
-      ),
-    ),
+    // ── 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',
+    }),
 
-    // ── Main scrollable area ────────────────────────────────────
+    // ── Tab content ──────────────────────────────────────────────
     React.createElement(Flex, {
       variant: 'column-stretch-start-nowrap-0',
-      style: { flex: 1, minHeight: 0 },
+      style: { flex: 1, minHeight: 0, overflow: 'auto' },
     },
-      // Section header
-      React.createElement(Flex, {
-        variant: 'row-center-space-between-nowrap-8',
-        style: {
-          padding: '8px 16px 4px',
-          flexShrink: 0,
+
+      // 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 },
       },
-        React.createElement(Typography, {
-          variant: 'caption-bold',
-          color: 'color-text-medium',
-        }, `Task Pool (${tasks.length})`),
+        // 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.',
+        }),
       ),
 
-      // Task pool list (scrollable)
-      !hasContent && !loading && React.createElement(EmptyState, {
-        icon: 'smartToy',
-        message: 'Swarm not started',
-        description: 'Start the swarm to begin processing tasks, or create tasks below.',
+      // 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,
       }),
 
-      hasContent && React.createElement(Flex, {
+      // Profiles tab — default list view
+      activeTab === 'profiles' && profileEditorMode == null && React.createElement(Flex, {
         variant: 'column-stretch-start-nowrap-0',
         style: { flex: 1, minHeight: 0 },
       },
-        React.createElement(TaskPoolList, {
-          tasks,
-          onTaskClick: handleTaskClick,
-        }),
+        // ── 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'),
+        ),
+
       ),
-    ),
 
-    // ── Task create form (bottom, collapsible) ──────────────────
-    React.createElement(Flex, {
-      variant: 'column-stretch-start-nowrap-0',
-      style: {
-        padding: '8px 16px',
-        borderTop: '1px solid var(--color-border-default)',
-        flexShrink: 0,
+      // Config tab
+      activeTab === 'config' && React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-12',
+        style: { padding: '12px 16px' },
       },
-    },
-      React.createElement(TaskCreateForm, {
-        onTaskCreated: handleTaskCreated,
-      }),
+        // ── 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),
+            ),
+          ),
+        ),
+      ),
     ),
+
   );
 }