@synergenius/flow-weaver-pack-weaver 0.9.200 → 0.9.201

package/src/ui/swarm-dashboard.tsx

@@ -5,35 +5,37 @@
  * Composes: SwarmControls, BudgetBar, BotSlotCard, TaskPoolList,
  * TaskEditor, and TaskDetailView into a unified swarm dashboard.
  *
- * Two-panel navigation:
+ * Three-panel navigation:
  * - Default: full swarm dashboard (controls + budget + bots + task pool + create form)
  * - On task click: TaskDetailView (with back button returning to dashboard)
+ * - On instance click: InstanceStreamView (live AI stream for a bot instance)
  *
  * 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.
+ * Pattern: ESM imports, JSX rendering.
  */
-const React = require('react');
-const { useState, useEffect, useCallback, useRef } = React;
-const {
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
   Flex, ScrollArea, EmptyState, Typography, StatusIcon, Icon, Chip, Card, Tabs, SectionTitle, Button,
-  Input, IconButton, IconPicker, ColorPicker, toast, usePackWorkspace,
-} = require('@fw/plugin-ui-kit');
+  Input, Slider, IconButton, IconPicker, ColorPicker, Section, Table, KeyValueRow, Field,
+  SparklineChart, BarChart, MetricCard, KanbanBoard, TaskCard, toast, usePackWorkspace,
+} from '@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 TaskPoolList from './task-pool-list.js';
 import TaskDetailView from './task-detail-view';
 import TaskEditor from './task-editor';
 import ProfileCard from './profile-card';
 import ProfileEditor from './profile-editor';
 import DecisionLog from './decision-log';
+import CapabilityEditor from './capability-editor';
+import InstanceStreamView from './instance-stream-view';
 import { ICON_CATALOG, BOT_COLORS } from './bot-constants';
 
 // ---------------------------------------------------------------------------
@@ -118,12 +120,20 @@ function SwarmDashboard() {
 
   // --- Navigation state ---
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [selectedInstance, setSelectedInstance] = useState<InstanceInfo | 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);
+  const [taskView, setTaskView] = useState<'list' | 'board'>('list');
   const [taskEditorMode, setTaskEditorMode] = useState<'create' | 'edit' | null>(null);
   const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
+  const [hintText, setHintText] = useState('');
+  const [hintSending, setHintSending] = useState(false);
+  const [costData, setCostData] = useState<Record<string, unknown> | null>(null);
+  const [localConcurrency, setLocalConcurrency] = useState<number | null>(null);
+  const [runHistory, setRunHistory] = useState<Array<Record<string, unknown>>>([]);
+  const concurrencyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // --- Data state ---
   const [swarmStatus, setSwarmStatus] = useState<SwarmStatus | null>(null);
@@ -214,10 +224,28 @@ function SwarmDashboard() {
     } catch { /* non-fatal */ }
   }, [callTool]);
 
+  const fetchCosts = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_costs', {});
+      if (!mountedRef.current) return;
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      if (data && typeof data === 'object') setCostData(data as Record<string, unknown>);
+    } catch { /* non-fatal */ }
+  }, [callTool]);
+
+  const fetchRunHistory = useCallback(async () => {
+    try {
+      const raw = await callTool('fw_weaver_history', { limit: 30 });
+      if (!mountedRef.current) return;
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      if (Array.isArray(data)) setRunHistory(data);
+    } catch { /* non-fatal */ }
+  }, [callTool]);
+
   const refreshAll = useCallback(async () => {
-    await Promise.all([fetchSwarmStatus(), fetchTaskList(), fetchBots(), fetchConfig(), fetchProfiles(), fetchOrchestratorStatus()]);
+    await Promise.all([fetchSwarmStatus(), fetchTaskList(), fetchBots(), fetchConfig(), fetchProfiles(), fetchOrchestratorStatus(), fetchCosts(), fetchRunHistory()]);
     if (mountedRef.current) setLoading(false);
-  }, [fetchSwarmStatus, fetchTaskList, fetchBots, fetchConfig, fetchProfiles, fetchOrchestratorStatus]);
+  }, [fetchSwarmStatus, fetchTaskList, fetchBots, fetchConfig, fetchProfiles, fetchOrchestratorStatus, fetchCosts, fetchRunHistory]);
 
   // Initial fetch on mount
   useEffect(() => {
@@ -286,6 +314,15 @@ function SwarmDashboard() {
     refreshAll();
   }, [refreshAll]);
 
+  const handleInstanceClick = useCallback((inst: InstanceInfo) => {
+    setSelectedInstance(inst);
+  }, []);
+
+  const handleInstanceBack = useCallback(() => {
+    setSelectedInstance(null);
+    refreshAll();
+  }, [refreshAll]);
+
   // --- Render: TaskEditor from detail view ---
 
   const handleEditFromDetail = useCallback((tid: string) => {
@@ -294,23 +331,47 @@ function SwarmDashboard() {
   }, []);
 
   if (selectedTaskId && taskEditorMode === 'edit' && editingTaskId) {
-    return React.createElement(TaskEditor, {
-      mode: 'edit',
-      taskId: editingTaskId,
-      onSave: () => { setTaskEditorMode(null); setEditingTaskId(null); },
-      onCancel: () => { setTaskEditorMode(null); setEditingTaskId(null); },
-      onDelete: () => { setTaskEditorMode(null); setEditingTaskId(null); setSelectedTaskId(null); fetchTaskList(); },
-    });
+    return (
+      <TaskEditor
+        mode="edit"
+        taskId={editingTaskId}
+        onSave={() => { setTaskEditorMode(null); setEditingTaskId(null); }}
+        onCancel={() => { setTaskEditorMode(null); setEditingTaskId(null); }}
+        onDelete={() => { setTaskEditorMode(null); setEditingTaskId(null); setSelectedTaskId(null); fetchTaskList(); }}
+      />
+    );
+  }
+
+  // --- Render: InstanceStreamView (when instance is selected) ---
+
+  if (selectedInstance) {
+    const instProfile = profiles.find((p: Record<string, unknown>) => p.id === selectedInstance.profileId);
+    const instBotId = instProfile?.botId as string | undefined;
+    const instBot = registeredBots.find((b) => b.id === instBotId);
+    return (
+      <InstanceStreamView
+        instanceId={selectedInstance.instanceId}
+        profileId={selectedInstance.profileId}
+        profileName={(instProfile?.name as string) || selectedInstance.profileId}
+        profileIcon={instBot?.icon}
+        profileColor={instBot?.color}
+        currentRunId={selectedInstance.currentRunId}
+        currentTaskId={selectedInstance.currentTaskId}
+        onBack={handleInstanceBack}
+      />
+    );
   }
 
   // --- Render: TaskDetailView (when task is selected) ---
 
   if (selectedTaskId) {
-    return React.createElement(TaskDetailView, {
-      taskId: selectedTaskId,
-      onBack: handleBack,
-      onEdit: handleEditFromDetail,
-    });
+    return (
+      <TaskDetailView
+        taskId={selectedTaskId}
+        onBack={handleBack}
+        onEdit={handleEditFromDetail}
+      />
+    );
   }
 
   // --- Render: Swarm Dashboard (default view) ---
@@ -323,458 +384,930 @@ function SwarmDashboard() {
   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 ? `Workers (${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 — when TaskEditor is open, render it INSTEAD of the list
-      activeTab === 'tasks' && taskEditorMode != null && React.createElement(TaskEditor, {
-        mode: taskEditorMode,
-        taskId: editingTaskId ?? undefined,
-        onSave: () => { setTaskEditorMode(null); setEditingTaskId(null); fetchTaskList(); },
-        onCancel: () => { setTaskEditorMode(null); setEditingTaskId(null); },
-        onDelete: taskEditorMode === 'edit'
-          ? () => { setTaskEditorMode(null); setEditingTaskId(null); fetchTaskList(); }
-          : undefined,
-      }),
-
-      // Tasks tab — default list view
-      activeTab === 'tasks' && taskEditorMode == null && React.createElement(Flex, {
-        variant: 'column-stretch-start-nowrap-0',
-        style: { flex: 1, minHeight: 0 },
-      },
-        !hasContent && !loading && React.createElement(EmptyState, {
-          icon: 'smartToy',
-          message: 'No tasks yet',
-          description: 'Create tasks below or ask the AI assistant to create them for you.',
-        }),
-
-        hasContent && React.createElement(TaskPoolList, {
-          tasks,
-          onTaskClick: handleTaskClick,
-        }),
-
-        // Task clear buttons (only shown when tasks exist)
-        tasks.length > 0 && React.createElement(Flex, {
-          variant: 'row-center-start-nowrap-8',
-          style: { padding: '4px 16px', flexShrink: 0 },
-        },
-          React.createElement(Button, {
-            size: 'xs', variant: 'outlined', color: 'secondary',
-            leftIcon: 'remove',
-            onClick: async () => {
-              const ok = await ctx.confirm('Clear all completed, failed, and cancelled tasks?', {
-                title: 'Clear Completed Tasks',
-                confirmLabel: 'Clear',
-                state: 'warning',
-              });
-              if (!ok) return;
-              try {
-                const raw = await callTool('fw_weaver_tasks_clear', { filter: 'completed' });
-                const data = parseToolResult(raw) as { cleared?: number } | null;
-                toast(`Cleared ${data?.cleared ?? 0} tasks`, { type: 'success' });
-                fetchTaskList();
-              } catch (err: unknown) {
-                toast(err instanceof Error ? err.message : 'Failed to clear tasks', { type: 'error' });
-              }
-            },
-          }, 'Clear Completed'),
-          React.createElement(Button, {
-            size: 'xs', variant: 'outlined', color: 'danger',
-            leftIcon: 'deleteForever',
-            onClick: async () => {
-              const ok = await ctx.confirm('This will stop the swarm and remove ALL tasks. This cannot be undone.', {
-                title: 'Clear All Tasks',
-                confirmLabel: 'Clear All',
-                state: 'danger',
-              });
-              if (!ok) return;
-              try {
-                const raw = await callTool('fw_weaver_tasks_clear', { filter: 'all' });
-                const data = parseToolResult(raw) as { cleared?: number } | null;
-                toast(`Cleared ${data?.cleared ?? 0} tasks`, { type: 'success' });
-                refreshAll();
-              } catch (err: unknown) {
-                toast(err instanceof Error ? err.message : 'Failed to clear tasks', { type: 'error' });
-              }
-            },
-          }, 'Clear All'),
-        ),
-
-        // New Task 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: () => setTaskEditorMode('create'),
-          }, 'New Task'),
-        ),
-      ),
-
-      // 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 },
-            }, 'Worker'),
-            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.instanceId} (${inst.profileId})` : inst.instanceId,
-                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) ──
-          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(Chip, { label: 'active', size: 'small', color: 'color-status-info' }),
-          ),
-        ),
-
-        // 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(Chip, {
-                key: p.name,
-                label: p.name,
-                size: 'small',
-                color: p.envVarsSet ? 'color-status-positive' : 'color-brand-alt',
-              }),
-            ),
-          ),
-        ),
-
-        // ── Reset section ──
-        React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8', style: { marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--color-border-default)' } },
-          React.createElement(SectionTitle, { size: 'xs' }, 'Reset'),
-          React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-            React.createElement(Button, {
-              size: 'xs', variant: 'outlined', color: 'secondary',
-              leftIcon: 'undo',
-              onClick: async () => {
-                const ok = await ctx.confirm('Reset Weaver configuration to defaults? Your .weaver.json will be deleted.', {
-                  title: 'Reset Config',
-                  confirmLabel: 'Reset',
-                  state: 'warning',
-                });
-                if (!ok) return;
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {/* SwarmControls (top bar) */}
+      <SwarmControls
+        swarmStatus={swarmStatus}
+        onRefresh={refreshAll}
+      />
+
+      {/* BudgetBar (below controls) */}
+      {hasBudget && (
+        <Section padding="compact" border="bottom" shrink={true}>
+          <Flex variant="column-stretch-start-nowrap-4">
+            <BudgetBar
+              label="Tokens"
+              used={sessionBudget!.usedTokens}
+              limit={sessionBudget!.limitTokens}
+              unit="tokens"
+              onLimitChange={async (newLimit: number) => {
                 try {
-                  await callTool('fw_weaver_config_reset', {});
-                  toast('Config reset to defaults', { type: 'success' });
-                  refreshAll();
+                  await callTool('fw_weaver_swarm_config', { sessionBudgetTokens: newLimit });
+                  toast(`Token budget updated to ${newLimit.toLocaleString()}`, { type: 'success' });
+                  fetchSwarmStatus();
                 } catch (err: unknown) {
-                  toast(err instanceof Error ? err.message : 'Failed to reset config', { type: 'error' });
+                  toast(err instanceof Error ? err.message : 'Failed to update budget', { type: 'error' });
                 }
-              },
-            }, 'Reset Config'),
-            React.createElement(Button, {
-              size: 'xs', variant: 'outlined', color: 'danger',
-              leftIcon: 'warning',
-              onClick: async () => {
-                const ok = await ctx.confirm(
-                  'This will stop the swarm, delete ALL tasks, profiles, run history, and configuration. This cannot be undone.',
-                  {
-                    title: 'Reset Everything',
-                    confirmLabel: 'Reset Everything',
-                    state: 'danger',
-                  },
-                );
-                if (!ok) return;
+              }}
+            />
+            <BudgetBar
+              label="Cost"
+              used={sessionBudget!.usedCost}
+              limit={sessionBudget!.limitCost}
+              unit="USD"
+              onLimitChange={async (newLimit: number) => {
                 try {
-                  const raw = await callTool('fw_weaver_reset_all', {});
-                  const data = parseToolResult(raw) as { tasksCleared?: number; profilesCleared?: number } | null;
-                  toast(`Full reset complete — ${data?.tasksCleared ?? 0} tasks, ${data?.profilesCleared ?? 0} profiles cleared`, { type: 'success' });
-                  refreshAll();
+                  await callTool('fw_weaver_swarm_config', { sessionBudgetCost: newLimit });
+                  toast(`Cost budget updated to $${newLimit.toFixed(2)}`, { type: 'success' });
+                  fetchSwarmStatus();
                 } catch (err: unknown) {
-                  toast(err instanceof Error ? err.message : 'Failed to reset', { type: 'error' });
+                  toast(err instanceof Error ? err.message : 'Failed to update budget', { type: 'error' });
                 }
-              },
-            }, 'Reset Everything'),
-          ),
-        ),
-
-        // ── Pack version ──
-        swarmStatus?.packVersion && React.createElement(Typography, {
-          variant: 'smallCaption-regular', color: 'color-text-low',
-          style: { textAlign: 'right', paddingTop: 8 },
-        }, `Weaver v${swarmStatus.packVersion}`),
-      ),
-    ),
+              }}
+            />
+          </Flex>
+        </Section>
+      )}
+
+      {/* Tabs */}
+      <Tabs
+        tabs={[
+          { id: 'tasks', title: `Tasks (${tasks.length})` },
+          { id: 'control', title: 'Control' },
+          { id: 'bots', title: hasSwarmInstances ? `Workers (${swarmInstanceEntries.length})` : `Bots (${registeredBots.length})` },
+          { id: 'profiles', title: `Profiles (${profiles.length})` },
+          { id: 'capabilities', title: 'Capabilities' },
+          { id: 'costs', title: 'Costs' },
+          { id: 'config', title: 'Config' },
+        ]}
+        activeTabId={activeTab}
+        onSelectTab={(id: string) => setActiveTab(id)}
+        size="sm"
+      />
+
+      {/* Tab content */}
+      <Flex
+        variant="column-stretch-start-nowrap-0"
+        style={{ flex: 1, minHeight: 0, overflow: 'auto' }}
+      >
+
+        {/* Tasks tab — when TaskEditor is open, render it INSTEAD of the list */}
+        {activeTab === 'tasks' && taskEditorMode != null && (
+          <TaskEditor
+            mode={taskEditorMode}
+            taskId={editingTaskId ?? undefined}
+            onSave={() => { setTaskEditorMode(null); setEditingTaskId(null); fetchTaskList(); }}
+            onCancel={() => { setTaskEditorMode(null); setEditingTaskId(null); }}
+            onDelete={taskEditorMode === 'edit'
+              ? () => { setTaskEditorMode(null); setEditingTaskId(null); fetchTaskList(); }
+              : undefined}
+          />
+        )}
+
+        {/* Tasks tab — default view (list or board) */}
+        {activeTab === 'tasks' && taskEditorMode == null && (
+          <Flex
+            variant="column-stretch-start-nowrap-0"
+            style={{ flex: 1, minHeight: 0 }}
+          >
+            {/* View toggle + actions bar */}
+            <Section padding="compact" border="bottom" shrink>
+              <Flex variant="row-center-space-between-nowrap-8">
+                <Flex variant="row-center-start-nowrap-4">
+                  <IconButton
+                    icon="list"
+                    size="xs"
+                    variant={taskView === 'list' ? 'outlined' : 'clear'}
+                    onClick={() => setTaskView('list')}
+                    title="List view"
+                  />
+                  <IconButton
+                    icon="dashboard"
+                    size="xs"
+                    variant={taskView === 'board' ? 'outlined' : 'clear'}
+                    onClick={() => setTaskView('board')}
+                    title="Board view"
+                  />
+                </Flex>
+                <Flex variant="row-center-start-nowrap-4">
+                  {tasks.length > 0 && (
+                    <>
+                      <Button size="xs" variant="clear" color="secondary" leftIcon="remove"
+                        onClick={async () => {
+                          const ok = await ctx.confirm('Clear all completed, failed, and cancelled tasks?', {
+                            title: 'Clear Completed Tasks', confirmLabel: 'Clear', state: 'warning',
+                          });
+                          if (!ok) return;
+                          try {
+                            const raw = await callTool('fw_weaver_tasks_clear', { filter: 'completed' });
+                            const data = parseToolResult(raw) as { cleared?: number } | null;
+                            toast(`Cleared ${data?.cleared ?? 0} tasks`, { type: 'success' });
+                            fetchTaskList();
+                          } catch (err: unknown) {
+                            toast(err instanceof Error ? err.message : 'Failed to clear tasks', { type: 'error' });
+                          }
+                        }}
+                      >Clear Done</Button>
+                    </>
+                  )}
+                  <Button size="xs" variant="clear" color="primary" leftIcon="add"
+                    onClick={() => setTaskEditorMode('create')}
+                  >New Task</Button>
+                </Flex>
+              </Flex>
+            </Section>
+
+            {/* Empty state */}
+            {!hasContent && !loading && (
+              <EmptyState
+                icon="smartToy"
+                message="No tasks yet"
+                description="Create tasks below or ask the AI assistant to create them for you."
+              />
+            )}
+
+            {/* List view */}
+            {hasContent && taskView === 'list' && (
+              <TaskPoolList tasks={tasks} onTaskClick={handleTaskClick} />
+            )}
+
+            {/* Board view */}
+            {hasContent && taskView === 'board' && (() => {
+              // Split open tasks into ready vs blocked
+              const allTasks = tasks as Array<Record<string, unknown>>;
+              const doneIds = new Set(allTasks.filter(t => t.status === 'done' || t.status === 'cancelled').map(t => t.id as string));
+
+              const kanbanColumns = [
+                { id: 'waiting', title: 'Waiting', color: 'var(--color-status-caution)' },
+                { id: 'open', title: 'Ready', color: 'var(--color-text-subtle)' },
+                { id: 'in-progress', title: 'In Progress', color: 'var(--color-brand-main)' },
+                { id: 'done', title: 'Done', color: 'var(--color-status-positive)' },
+                { id: 'cancelled', title: 'Cancelled', color: 'var(--color-status-negative)' },
+              ];
+
+              const kanbanCards = allTasks
+                .filter(t => !t.isParent) // Only leaf tasks on the board
+                .map(t => {
+                  const deps = (t.dependsOn as string[]) ?? [];
+                  const unresolvedDeps = deps.filter(d => !doneIds.has(d));
+                  const subtasks = allTasks.filter(st => st.parentId === t.id);
+                  const subtasksDone = subtasks.filter(st => st.status === 'done').length;
+                  const profileName = profiles.find((p: Record<string, unknown>) => p.id === t.assignedProfile)?.name as string | undefined;
+
+                  // Open tasks with unresolved deps go to Waiting column
+                  const columnId = t.status === 'open' && unresolvedDeps.length > 0
+                    ? 'waiting'
+                    : t.status as string;
+
+                  return {
+                    id: t.id as string,
+                    columnId,
+                    content: (
+                      <TaskCard
+                        title={t.title as string}
+                        priority={t.priority as number}
+                        profile={profileName ?? (t.assignedProfile as string) ?? undefined}
+                        complexity={t.complexity as string ?? undefined}
+                        subtaskProgress={subtasks.length > 0 ? { done: subtasksDone, total: subtasks.length } : undefined}
+                        cost={t.costUsed as number ?? undefined}
+                        blockedBy={unresolvedDeps.length > 0 ? unresolvedDeps : undefined}
+                        isActive={!!(t.activeRunId)}
+                        onClick={() => handleTaskClick(t.id as string)}
+                      />
+                    ),
+                  };
+                });
 
+              return (
+                <Flex variant="column-stretch-start-nowrap-0" style={{ flex: 1, minHeight: 0, padding: '8px' }}>
+                  <KanbanBoard columns={kanbanColumns} cards={kanbanCards} emptyLabel="No tasks" />
+                </Flex>
+              );
+            })()}
+          </Flex>
+        )}
+
+        {/* Bots tab */}
+        {activeTab === 'bots' && (
+          <Flex
+            variant="column-stretch-start-nowrap-0"
+            style={{ flex: 1, minHeight: 0 }}
+          >
+            {/* When swarm is running: show swarm instances */}
+            {hasSwarmInstances && (
+              <Flex variant="column-stretch-start-nowrap-0">
+                <Flex
+                  variant="row-center-start-nowrap-8"
+                  style={{ padding: '8px 16px', borderBottom: '1px solid var(--color-border-default)' }}
+                >
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '120px', flexShrink: 0 }}>Worker</Typography>
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '110px', flexShrink: 0 }}>Bot</Typography>
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '70px', flexShrink: 0 }}>Status</Typography>
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ flex: 1, minWidth: 0 }}>Task</Typography>
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '50px', flexShrink: 0, textAlign: 'right' }}>Tokens</Typography>
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '50px', flexShrink: 0, textAlign: 'right' }}>Cost</Typography>
+                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '50px', flexShrink: 0 }}>{''}</Typography>
+                </Flex>
+                {/* 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 (
+                    <BotSlotCard
+                      key={inst.instanceId}
+                      bot={{
+                        botId: inst.instanceId,
+                        botName: inst.profileId ? `${inst.instanceId} (${inst.profileId})` : inst.instanceId,
+                        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)}
+                      onView={() => handleInstanceClick(inst)}
+                      onPause={(id: string) => handleSteerBot(id, 'pause')}
+                      onResume={(id: string) => handleSteerBot(id, 'resume')}
+                      onStop={(id: string) => handleSteerBot(id, 'cancel')}
+                    />
+                  );
+                })}
+              </Flex>
+            )}
+
+            {/* When swarm is NOT running: show registered bots */}
+            {!hasSwarmInstances && hasRegisteredBots && (
+              <Flex
+                variant="column-stretch-start-nowrap-0"
+                style={{ padding: '8px 16px' }}
+              >
+                {registeredBots.map((bot) => {
+                  const isEditing = editingBotId === bot.id;
+                  return (
+                    <Flex
+                      key={bot.id}
+                      variant="column-stretch-start-nowrap-0"
+                      style={{ borderBottom: '1px solid var(--color-border-default)' }}
+                    >
+                      {/* Bot row (clickable to toggle edit) */}
+                      <Flex
+                        variant="row-center-start-nowrap-8"
+                        style={{ padding: '6px 0', cursor: 'pointer' }}
+                        onClick={() => setEditingBotId(isEditing ? null : bot.id)}
+                      >
+                        <Icon
+                          name={bot.icon || 'smartToy'}
+                          size={16}
+                          color={bot.color || 'color-text-medium'}
+                        />
+                        <Flex variant="column-start-start-nowrap-1" style={{ flex: 1, minWidth: 0 }}>
+                          <Typography variant="smallCaption-regular" color="color-text-high">{bot.name}</Typography>
+                          {bot.description && (
+                            <Typography variant="smallCaption-regular" color="color-text-subtle">{bot.description}</Typography>
+                          )}
+                        </Flex>
+                        <Icon name={isEditing ? 'expandLess' : 'expandMore'} size={14} color="color-text-subtle" />
+                      </Flex>
+
+                      {/* Edit section (icon + color pickers) */}
+                      {isEditing && (
+                        <Flex
+                          variant="column-stretch-start-nowrap-12"
+                          style={{ padding: '8px 0 12px 24px' }}
+                        >
+                          <IconPicker
+                            catalog={ICON_CATALOG}
+                            value={bot.icon || 'smartToy'}
+                            onChange={(icon: string) => handleUpdateBot(bot.id, { icon })}
+                            accentColor={bot.color || undefined}
+                            defaultExpanded={true}
+                          />
+                          <ColorPicker
+                            colors={BOT_COLORS}
+                            value={bot.color || ''}
+                            onChange={(color: string) => handleUpdateBot(bot.id, { color })}
+                            defaultExpanded={true}
+                          />
+
+                          {/* Bot management actions */}
+                          <Flex variant="row-center-start-nowrap-8">
+                            <Button
+                              size="xs"
+                              variant="outlined"
+                              color="secondary"
+                              leftIcon="verified"
+                              onClick={async () => {
+                                try {
+                                  const raw = await callTool('fw_weaver_validate_bot', { id: bot.id });
+                                  const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+                                  if (data?.valid) {
+                                    toast(`${bot.name} is valid`, { type: 'success' });
+                                  } else {
+                                    toast(`Validation issues: ${JSON.stringify(data?.issues ?? data)}`, { type: 'warning' });
+                                  }
+                                } catch (err: unknown) {
+                                  toast(err instanceof Error ? err.message : 'Validation failed', { type: 'error' });
+                                }
+                              }}
+                            >Validate</Button>
+                            <Button
+                              size="xs"
+                              variant="outlined"
+                              color="danger"
+                              leftIcon="deleteForever"
+                              onClick={async () => {
+                                const ok = await ctx.confirm(`Unregister bot "${bot.name}"? The workflow file will not be deleted.`, {
+                                  title: 'Unregister Bot',
+                                  confirmLabel: 'Unregister',
+                                  state: 'danger',
+                                });
+                                if (!ok) return;
+                                try {
+                                  await callTool('fw_weaver_unregister_bot', { id: bot.id });
+                                  toast(`Bot "${bot.name}" unregistered`, { type: 'info' });
+                                  fetchBots();
+                                } catch (err: unknown) {
+                                  toast(err instanceof Error ? err.message : 'Failed to unregister', { type: 'error' });
+                                }
+                              }}
+                            >Unregister</Button>
+                          </Flex>
+                        </Flex>
+                      )}
+                    </Flex>
+                  );
+                })}
+              </Flex>
+            )}
+
+            {/* No bots at all */}
+            {!hasSwarmInstances && !hasRegisteredBots && (
+              <EmptyState
+                icon="smartToy"
+                message="No bots registered"
+                description="Register bots to start the swarm."
+              />
+            )}
+          </Flex>
+        )}
+
+        {/* Profiles tab — when ProfileEditor is open, render it INSTEAD of the list */}
+        {activeTab === 'profiles' && profileEditorMode != null && (
+          <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 && (
+          <Flex
+            variant="column-stretch-start-nowrap-0"
+            style={{ flex: 1, minHeight: 0 }}
+          >
+            {/* Profile cards (scrollable) */}
+            <Flex
+              variant="column-stretch-start-nowrap-8"
+              style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '12px 16px' }}
+            >
+              {profiles.length > 0
+                ? (
+                  <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 (
+                        <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' });
+                            }
+                          }}
+                        />
+                      );
+                    })}
+                  </Flex>
+                )
+                : (
+                  <EmptyState
+                    icon="person"
+                    message="No profiles"
+                    description="Profiles define how bots behave. Start the swarm to create defaults, or create one below."
+                  />
+                )}
+            </Flex>
+
+            {/* New Profile button (bottom bar) */}
+            <Flex
+              variant="column-stretch-start-nowrap-0"
+              style={{ flexShrink: 0, borderTop: '1px solid var(--color-border-default)', padding: '8px 16px' }}
+            >
+              <Button
+                size="xs"
+                variant="clear"
+                color="primary"
+                leftIcon="add"
+                onClick={() => setProfileEditorMode('create')}
+              >New Profile</Button>
+            </Flex>
+          </Flex>
+        )}
+
+        {/* Capabilities tab */}
+        {activeTab === 'capabilities' && (
+          <CapabilityEditor
+            onSave={async (caps) => {
+              toast(`${caps.length} capabilities saved`, { type: 'success' });
+            }}
+          />
+        )}
+
+        {/* Costs tab */}
+        {activeTab === 'costs' && (() => {
+          // Build sparkline data from run history (cost over time, chronological)
+          const costSparkline = [...runHistory]
+            .reverse()
+            .filter((r) => typeof r.startedAt === 'string')
+            .map((r, i) => ({
+              x: i,
+              y: ((r.cost as Record<string, unknown>)?.totalCost as number) ?? (r.cost as number) ?? 0,
+            }));
+
+          // Build token sparkline
+          const tokenSparkline = [...runHistory]
+            .reverse()
+            .filter((r) => typeof r.startedAt === 'string')
+            .map((r, i) => ({
+              x: i,
+              y: ((r.cost as Record<string, unknown>)?.totalInputTokens as number) ??
+                 ((r.cost as Record<string, unknown>)?.totalOutputTokens as number) ?? 0,
+            }));
+
+          // Build model breakdown for bar chart from costData
+          const costInsights = insights?.cost as Record<string, unknown> | undefined;
+          const byModel = costData?.byModel as Record<string, Record<string, unknown>> | undefined;
+          const modelBars = byModel
+            ? Object.entries(byModel).map(([model, data]) => ({
+                label: model.replace('claude-', '').replace(/-\d.*$/, ''),
+                value: (data.cost as number) ?? 0,
+              }))
+            : [];
+
+          const trend = (costInsights?.trend as string) === 'increasing' ? 'up' as const
+            : (costInsights?.trend as string) === 'decreasing' ? 'down' as const
+            : 'stable' as const;
+
+          return (
+            <Section padding="default">
+              <Flex variant="column-stretch-start-nowrap-16">
+
+                {/* Metric cards row */}
+                <Flex variant="row-stretch-start-nowrap-8">
+                  <MetricCard
+                    value={`$${(swarmStatus?.totalCost ?? 0).toFixed(2)}`}
+                    label="Session Cost"
+                    trend={trend}
+                    trendLabel={(costInsights?.trend as string) ?? undefined}
+                    sparklineData={costSparkline.length >= 2 ? costSparkline : undefined}
+                  />
+                  <MetricCard
+                    value={(swarmStatus?.totalTokensUsed ?? 0).toLocaleString()}
+                    label="Tokens Used"
+                    sparklineData={tokenSparkline.length >= 2 ? tokenSparkline : undefined}
+                    sparklineColor="var(--color-status-info)"
+                  />
+                  <MetricCard
+                    value={String(swarmStatus?.tasksCompleted ?? 0)}
+                    label="Tasks Completed"
+                  />
+                  <MetricCard
+                    value={`$${((costInsights?.last7Days as number) ?? 0).toFixed(2)}`}
+                    label="7-Day Cost"
+                    trendLabel={(costInsights?.costPerSuccessfulRun as number)
+                      ? `$${(costInsights.costPerSuccessfulRun as number).toFixed(3)}/run`
+                      : undefined}
+                  />
+                </Flex>
+
+                {/* Cost over time chart */}
+                {costSparkline.length >= 2 && (
+                  <Flex variant="column-stretch-start-nowrap-4">
+                    <SectionTitle size="xs">Cost Over Time</SectionTitle>
+                    <SparklineChart
+                      data={costSparkline}
+                      height={80}
+                      responsive
+                      showArea
+                      showDots
+                      showYLabels
+                      formatY={(v) => `$${v.toFixed(3)}`}
+                      strokeWidth={2}
+                    />
+                  </Flex>
+                )}
+
+                {/* Cost by model bar chart */}
+                {modelBars.length > 0 && (
+                  <Flex variant="column-stretch-start-nowrap-4">
+                    <SectionTitle size="xs">Cost by Model</SectionTitle>
+                    <BarChart
+                      data={modelBars}
+                      formatValue={(v) => `$${v.toFixed(3)}`}
+                    />
+                  </Flex>
+                )}
+
+                {/* High cost workflows */}
+                {(costInsights?.highCostWorkflows as Array<Record<string, unknown>> | undefined)?.length ? (
+                  <Flex variant="column-stretch-start-nowrap-4">
+                    <SectionTitle size="xs">High-Cost Workflows</SectionTitle>
+                    <BarChart
+                      data={(costInsights!.highCostWorkflows as Array<Record<string, unknown>>).map((w) => ({
+                        label: String(w.workflow ?? '').replace(/\.ts$/, ''),
+                        value: (w.avgCost as number) ?? 0,
+                        color: 'var(--color-status-caution)',
+                      }))}
+                      formatValue={(v) => `$${v.toFixed(3)}`}
+                    />
+                  </Flex>
+                ) : null}
+
+                {/* Detailed breakdown table */}
+                {runHistory.length > 0 && (
+                  <Flex variant="column-stretch-start-nowrap-4">
+                    <SectionTitle size="xs">Recent Runs</SectionTitle>
+                    <Table
+                      size="compact"
+                      getRowKey={(row: Record<string, unknown>) => (row.id as string) ?? String(Math.random())}
+                      onRowClick={(row: Record<string, unknown>) => {
+                        if (row.taskId) handleTaskClick(row.taskId as string);
+                      }}
+                      columns={[
+                        { key: 'outcome', header: '', width: '20px', render: (_: unknown, row: Record<string, unknown>) => (
+                          <StatusIcon status={row.success ? 'completed' : 'failed'} size="xs" />
+                        )},
+                        { key: 'taskId', header: 'Task', render: (_: unknown, row: Record<string, unknown>) => (
+                          <Typography variant="smallCaption-regular" color="color-text-high" truncate>
+                            {(row.taskId as string) ?? '-'}
+                          </Typography>
+                        )},
+                        { key: 'model', header: 'Model', width: '80px', render: (_: unknown, row: Record<string, unknown>) => {
+                          const costObj = row.cost as Record<string, unknown> | undefined;
+                          return (
+                            <Typography variant="smallCaption-regular" color="color-text-medium" mono>
+                              {((costObj?.model as string) ?? '').replace('claude-', '') || '-'}
+                            </Typography>
+                          );
+                        }},
+                        { key: 'cost', header: 'Cost', width: '65px', align: 'right' as const, render: (_: unknown, row: Record<string, unknown>) => {
+                          const costObj = row.cost as Record<string, unknown> | undefined;
+                          const val = (costObj?.totalCost as number) ?? 0;
+                          return (
+                            <Typography variant="smallCaption-regular" color="color-text-high" mono>
+                              {`$${val.toFixed(3)}`}
+                            </Typography>
+                          );
+                        }},
+                      ]}
+                      data={runHistory as Array<Record<string, unknown>>}
+                      maxHeight="200px"
+                    />
+                  </Flex>
+                )}
+
+                {/* Empty state */}
+                {!swarmStatus && !costData && runHistory.length === 0 && (
+                  <EmptyState icon="payments" message="No cost data yet" />
+                )}
+              </Flex>
+            </Section>
+          );
+        })()}
+
+        {/* Control tab — active swarm management */}
+        {activeTab === 'control' && (
+          <Section padding="default">
+            <Flex variant="column-stretch-start-nowrap-16">
+
+              {/* Orchestrator Guidance */}
+              <Flex variant="column-stretch-start-nowrap-8">
+                <SectionTitle size="xs">Orchestrator Guidance</SectionTitle>
+                <Typography variant="smallCaption-regular" color="color-text-subtle">
+                  Influence how the orchestrator routes tasks to profiles. Hints persist across dispatch cycles.
+                </Typography>
+                <Input
+                  type="text"
+                  value={hintText}
+                  onChange={(value: string) => setHintText(value)}
+                  onKeyDown={(e: { key: string }) => {
+                    if (e.key === 'Enter' && hintText.trim()) {
+                      setHintSending(true);
+                      callTool('fw_weaver_orchestrator_hint', { hint: hintText.trim() })
+                        .then(() => { toast('Hint sent to orchestrator', { type: 'success' }); setHintText(''); })
+                        .catch((err: Error) => toast(err.message, { type: 'error' }))
+                        .finally(() => setHintSending(false));
+                    }
+                  }}
+                  placeholder='e.g. "Prioritize security tasks" or "Use architect for auth changes"'
+                  disabled={hintSending}
+                  inputBoxStyle={{ maxWidth: 'none' }}
+                />
+                <Flex variant="row-center-end-nowrap-0">
+                  <Button
+                    size="xs"
+                    variant="outlined"
+                    color="primary"
+                    onClick={() => {
+                      if (!hintText.trim()) return;
+                      setHintSending(true);
+                      callTool('fw_weaver_orchestrator_hint', { hint: hintText.trim() })
+                        .then(() => { toast('Hint sent to orchestrator', { type: 'success' }); setHintText(''); })
+                        .catch((err: Error) => toast(err.message, { type: 'error' }))
+                        .finally(() => setHintSending(false));
+                    }}
+                    loading={hintSending}
+                    disabled={!hintText.trim() || hintSending}
+                  >Send</Button>
+                </Flex>
+              </Flex>
+
+              {/* Concurrency & Budgets */}
+              <Flex variant="column-stretch-start-nowrap-8">
+                <SectionTitle size="xs">Concurrency &amp; Budgets</SectionTitle>
+                <Flex variant="row-center-start-nowrap-12">
+                  <Typography variant="smallCaption-regular" color="color-text-subtle">Max Concurrent</Typography>
+                  <Slider
+                    value={localConcurrency ?? swarmStatus?.maxConcurrent ?? 5}
+                    min={1}
+                    max={20}
+                    step={1}
+                    onChange={(val: number) => {
+                      setLocalConcurrency(val);
+                      if (concurrencyTimerRef.current) clearTimeout(concurrencyTimerRef.current);
+                      concurrencyTimerRef.current = setTimeout(async () => {
+                        try {
+                          await callTool('fw_weaver_swarm_config', { maxConcurrent: val });
+                          fetchSwarmStatus();
+                        } catch { /* non-fatal */ }
+                        setLocalConcurrency(null);
+                      }, 500);
+                    }}
+                  />
+                  <Typography variant="caption-thick" color="color-text-high">
+                    {localConcurrency ?? swarmStatus?.maxConcurrent ?? 5}
+                  </Typography>
+                </Flex>
+                <Flex variant="row-center-start-nowrap-16">
+                  {sessionBudget && (
+                    <Field label="Token Limit" labelWidth={110}>
+                      <Input
+                        type="number"
+                        value={String(sessionBudget.limitTokens)}
+                        size="small"
+                        onChange={() => {}}
+                        onBlur={async (e: { target: { value: string } }) => {
+                          const val = parseInt(e.target.value, 10);
+                          if (!val || val < 1) return;
+                          try {
+                            await callTool('fw_weaver_swarm_config', { sessionBudgetTokens: val });
+                            toast(`Token limit: ${val.toLocaleString()}`, { type: 'success' });
+                            fetchSwarmStatus();
+                          } catch (err: unknown) {
+                            toast(err instanceof Error ? err.message : 'Failed', { type: 'error' });
+                          }
+                        }}
+                      />
+                    </Field>
+                  )}
+                  {sessionBudget && (
+                    <Field label="Cost Limit ($)" labelWidth={110}>
+                      <Input
+                        type="number"
+                        value={String(sessionBudget.limitCost)}
+                        size="small"
+                        onChange={() => {}}
+                        onBlur={async (e: { target: { value: string } }) => {
+                          const val = parseFloat(e.target.value);
+                          if (!val || val <= 0) return;
+                          try {
+                            await callTool('fw_weaver_swarm_config', { sessionBudgetCost: val });
+                            toast(`Cost limit: $${val.toFixed(2)}`, { type: 'success' });
+                            fetchSwarmStatus();
+                          } catch (err: unknown) {
+                            toast(err instanceof Error ? err.message : 'Failed', { type: 'error' });
+                          }
+                        }}
+                      />
+                    </Field>
+                  )}
+                </Flex>
+                {swarmStatus && (
+                  <Flex variant="row-center-start-nowrap-16">
+                    <Typography variant="smallCaption-regular" color="color-text-subtle">
+                      {`Tokens used: ${swarmStatus.totalTokensUsed.toLocaleString()}`}
+                    </Typography>
+                    <Typography variant="smallCaption-regular" color="color-text-subtle">
+                      {`Cost: $${swarmStatus.totalCost.toFixed(2)}`}
+                    </Typography>
+                  </Flex>
+                )}
+              </Flex>
+
+              {/* Routing Decisions */}
+              <DecisionLog decisions={orchestratorDecisions as unknown[]} />
+            </Flex>
+          </Section>
+        )}
+
+        {/* Config tab — static settings, read-only info, resets */}
+        {activeTab === 'config' && (
+          <Flex
+            variant="column-stretch-start-nowrap-12"
+            style={{ padding: '12px 16px' }}
+          >
+            {/* Provider */}
+            <Flex variant="row-center-space-between-nowrap-8">
+              <Typography variant="smallCaption-regular" color="color-text-subtle">Provider</Typography>
+              <Flex variant="row-center-start-nowrap-4">
+                <Typography variant="smallCaption-regular" color="color-text-high">
+                  {providers.find((p) => p.envVarsSet)?.name ?? 'None detected'}
+                </Typography>
+                {providers.find((p) => p.envVarsSet) && (
+                  <Chip label="active" size="small" color="color-status-info" />
+                )}
+              </Flex>
+            </Flex>
+
+            {/* Trust */}
+            {insights?.trust && (
+              <Flex variant="row-center-space-between-nowrap-8">
+                <Typography variant="smallCaption-regular" color="color-text-subtle">Trust</Typography>
+                <Typography variant="smallCaption-regular" color="color-text-high">
+                  {`Phase ${(insights.trust as Record<string, unknown>).phase} · ${(insights.trust as Record<string, unknown>).score}/100`}
+                </Typography>
+              </Flex>
+            )}
+
+            {/* Health */}
+            {insights?.health && (
+              <Flex variant="row-center-space-between-nowrap-8">
+                <Typography variant="smallCaption-regular" color="color-text-subtle">Health</Typography>
+                <Typography variant="smallCaption-regular" color="color-text-high">
+                  {`${(insights.health as Record<string, unknown>).overall}/100`}
+                </Typography>
+              </Flex>
+            )}
+
+            {/* Available providers */}
+            {providers.length > 0 && (
+              <Flex variant="column-stretch-start-nowrap-4">
+                <Typography variant="smallCaption-regular" color="color-text-subtle">Available Providers</Typography>
+                <Flex variant="row-center-start-wrap-4">
+                  {providers.map((p) => (
+                    <Chip
+                      key={p.name}
+                      label={p.name}
+                      size="small"
+                      color={p.envVarsSet ? 'color-status-positive' : 'color-brand-alt'}
+                    />
+                  ))}
+                </Flex>
+              </Flex>
+            )}
+
+            {/* Reset section */}
+            <Flex variant="column-stretch-start-nowrap-8" style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--color-border-default)' }}>
+              <SectionTitle size="xs">Reset</SectionTitle>
+              <Flex variant="row-center-start-nowrap-8">
+                <Button
+                  size="xs"
+                  variant="outlined"
+                  color="secondary"
+                  leftIcon="undo"
+                  onClick={async () => {
+                    const ok = await ctx.confirm('Reset Weaver configuration to defaults? Your .weaver.json will be deleted.', {
+                      title: 'Reset Config',
+                      confirmLabel: 'Reset',
+                      state: 'warning',
+                    });
+                    if (!ok) return;
+                    try {
+                      await callTool('fw_weaver_config_reset', {});
+                      toast('Config reset to defaults', { type: 'success' });
+                      refreshAll();
+                    } catch (err: unknown) {
+                      toast(err instanceof Error ? err.message : 'Failed to reset config', { type: 'error' });
+                    }
+                  }}
+                >Reset Config</Button>
+                <Button
+                  size="xs"
+                  variant="outlined"
+                  color="danger"
+                  leftIcon="warning"
+                  onClick={async () => {
+                    const ok = await ctx.confirm(
+                      'This will stop the swarm, delete ALL tasks, profiles, run history, and configuration. This cannot be undone.',
+                      {
+                        title: 'Reset Everything',
+                        confirmLabel: 'Reset Everything',
+                        state: 'danger',
+                      },
+                    );
+                    if (!ok) return;
+                    try {
+                      const raw = await callTool('fw_weaver_reset_all', {});
+                      const data = parseToolResult(raw) as { tasksCleared?: number; profilesCleared?: number } | null;
+                      toast(`Full reset complete — ${data?.tasksCleared ?? 0} tasks, ${data?.profilesCleared ?? 0} profiles cleared`, { type: 'success' });
+                      refreshAll();
+                    } catch (err: unknown) {
+                      toast(err instanceof Error ? err.message : 'Failed to reset', { type: 'error' });
+                    }
+                  }}
+                >Reset Everything</Button>
+              </Flex>
+            </Flex>
+
+            {/* Evolution */}
+            <Flex variant="column-stretch-start-nowrap-8" style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--color-border-default)' }}>
+              <SectionTitle size="xs">Evolution</SectionTitle>
+              <Flex variant="row-center-start-nowrap-8">
+                <Button
+                  size="xs"
+                  variant="outlined"
+                  color="primary"
+                  leftIcon="psychology"
+                  onClick={async () => {
+                    const ok = await ctx.confirm('Run a Genesis self-evolution cycle? This analyzes your workflows and suggests improvements.', {
+                      title: 'Run Genesis',
+                      confirmLabel: 'Run',
+                      state: 'info',
+                    });
+                    if (!ok) return;
+                    try {
+                      toast('Genesis cycle started...', { type: 'info' });
+                      const raw = await callTool('fw_weaver_genesis', {});
+                      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+                      if (data?.success) {
+                        toast('Genesis cycle completed', { type: 'success' });
+                      } else {
+                        toast(`Genesis: ${data?.summary ?? 'Cycle finished'}`, { type: 'info' });
+                      }
+                      refreshAll();
+                    } catch (err: unknown) {
+                      toast(err instanceof Error ? err.message : 'Genesis failed', { type: 'error' });
+                    }
+                  }}
+                >Run Genesis Cycle</Button>
+              </Flex>
+            </Flex>
+
+            {/* Pack version */}
+            {swarmStatus?.packVersion && (
+              <Typography
+                variant="smallCaption-regular"
+                color="color-text-low"
+                style={{ textAlign: 'right', paddingTop: 8 }}
+              >{`Weaver v${swarmStatus.packVersion}`}</Typography>
+            )}
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
   );
 }
 
 export { SwarmDashboard };
 export default SwarmDashboard;
-module.exports = SwarmDashboard;