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

package/src/ui/bot-panel.tsx

@@ -1,45 +1,49 @@
 /**
- * Weaver Bot Panel — sidebar component.
+ * Weaver Bot Panel — sidebar fleet overview.
  *
- * Replaces BotPanel.tsx + BotLibrary.tsx from the platform's cloud-bot-panel.
- * Runs in the pack sandbox — uses CommonJS require for platform deps,
- * React.createElement throughout (no JSX transform in sandbox).
+ * Simplified panel that shows swarm status at a glance:
+ * - Bot list with current status (idle/executing/paused)
+ * - Quick stats: tasks completed, tokens used, cost
+ * - "Open Dashboard" button to launch the swarm-dashboard workspace
  *
- * Features:
- * - Lists registered bots via fw_weaver_list_bots
- * - Validation badges per bot
- * - Register existing workflow form
- * - Open workspace action per bot
- * - Unregister action per bot
+ * Polls fw_weaver_swarm_status every 5s for live updates.
+ *
+ * Pattern: CommonJS require, React.createElement, module.exports, usePackWorkspace.
  */
 const React = require('react');
 const { useState, useEffect, useCallback, useRef } = React;
 const {
-  Flex, Typography, Button, IconButton, Icon, Input, EmptyState,
-  ScrollArea, StatusIcon, toast, usePackWorkspace,
+  Flex, Typography, Button, IconButton, Icon, EmptyState,
+  ScrollArea, StatusIcon, usePackWorkspace,
 } = require('@fw/plugin-ui-kit');
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-interface Bot {
-  id: string;
-  name: string;
-  description: string;
-  icon?: string;
-  color?: string;
-  filePath: string;
-  workflowExport: string;
-  paramName: string;
-  packId?: string;
-  ejected?: boolean;
-  validation?: {
-    state: 'valid' | 'invalid' | 'checking' | 'unknown';
-    fileExists?: boolean;
-    exportValid?: boolean;
-    errorMessage?: 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 SwarmStatus {
+  status: 'idle' | 'running' | 'paused' | 'stopping';
+  instances: Record<string, InstanceInfo>;
+  maxConcurrent: number;
+  tasksCompleted: number;
+  tasksFailed: number;
+  totalTokensUsed: number;
+  totalCost: number;
+  startedAt?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -53,171 +57,117 @@ function parseToolResult(raw: unknown): unknown {
   return raw;
 }
 
-function validationIcon(state: string | undefined): { icon: string; color: string } {
-  switch (state) {
-    case 'valid': return { icon: 'checkCircle', color: 'var(--color-success)' };
-    case 'invalid': return { icon: 'error', color: 'var(--color-danger)' };
-    case 'checking': return { icon: 'sync', color: 'var(--color-warning)' };
-    default: return { icon: 'helpOutline', color: 'var(--color-text-subtle)' };
+function statusToIconStatus(status: string): 'pending' | 'running' | 'completed' | 'failed' {
+  switch (status) {
+    case 'executing': case 'running': return 'running';
+    case 'paused': return 'pending';
+    case 'stopped': case 'stopping': return 'failed';
+    default: return 'completed';
+  }
+}
+
+function statusLabel(status: string): string {
+  switch (status) {
+    case 'executing': return 'Executing';
+    case 'running': return 'Running';
+    case 'paused': return 'Paused';
+    case 'stopped': return 'Stopped';
+    case 'stopping': return 'Stopping';
+    default: return 'Idle';
   }
 }
 
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(n);
+}
+
+function formatCost(n: number): string {
+  return `$${n.toFixed(2)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const POLL_INTERVAL_MS = 5000;
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 
 function BotPanel() {
   const ctx = usePackWorkspace();
-  const { callTool, dispatchEvent } = ctx;
+  const { callTool } = ctx;
   const packId = ctx.packId;
 
-  // Bot list state
-  const [bots, setBots] = useState<Bot[]>([]);
+  const [swarm, setSwarm] = useState<SwarmStatus | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Register form state
-  const [showRegForm, setShowRegForm] = useState(false);
-  const [regName, setRegName] = useState('');
-  const [regFilePath, setRegFilePath] = useState('');
-  const [regExport, setRegExport] = useState('');
-  const [registering, setRegistering] = useState(false);
-
-  // Unregister confirmation
-  const [confirmUnregId, setConfirmUnregId] = useState<string | null>(null);
-  const [unregistering, setUnregistering] = useState(false);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => { mountedRef.current = false; };
+  }, []);
 
-  // ── Load bots ──────────────────────────────────────────────────
-  const loadBots = useCallback(async () => {
+  // ── Fetch swarm status ──────────────────────────────────────────
+  const fetchStatus = useCallback(async () => {
     try {
       setError(null);
-      const raw = await callTool('fw_weaver_list_bots');
-      const parsed = parseToolResult(raw);
-      if (Array.isArray(parsed)) {
-        setBots(parsed as Bot[]);
-      } else {
-        setBots([]);
-      }
+      const raw = await callTool('fw_weaver_swarm_status', {});
+      if (!mountedRef.current) return;
+      const parsed = parseToolResult(raw) as SwarmStatus | null;
+      if (parsed) setSwarm(parsed);
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Failed to load bots';
+      if (!mountedRef.current) return;
+      const msg = err instanceof Error ? err.message : 'Failed to load swarm status';
       setError(msg);
     } finally {
-      setLoading(false);
+      if (mountedRef.current) setLoading(false);
     }
   }, [callTool]);
 
-  // Load on mount
-  const mountedRef = useRef(false);
+  // Fetch on mount + poll every 5s
   useEffect(() => {
-    if (!mountedRef.current) {
-      mountedRef.current = true;
-      loadBots();
-    }
-  }, [loadBots]);
+    fetchStatus();
+    const timer = setInterval(fetchStatus, POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [fetchStatus]);
 
-  // ── Register bot ───────────────────────────────────────────────
-  const handleRegister = useCallback(async () => {
-    if (!regName.trim() || !regFilePath.trim() || !regExport.trim()) return;
-    setRegistering(true);
-    try {
-      await callTool('fw_weaver_register_bot', {
-        name: regName.trim(),
-        filePath: regFilePath.trim(),
-        workflowExport: regExport.trim(),
-        paramName: 'taskJson',
-      });
-      toast('Bot registered', { type: 'success' });
-      setRegName('');
-      setRegFilePath('');
-      setRegExport('');
-      setShowRegForm(false);
-      await loadBots();
-    } catch (err: unknown) {
-      toast(err instanceof Error ? err.message : 'Registration failed', { type: 'error' });
-    } finally {
-      setRegistering(false);
-    }
-  }, [regName, regFilePath, regExport, callTool, loadBots]);
-
-  // ── Unregister bot ─────────────────────────────────────────────
-  const handleUnregister = useCallback(async (id: string) => {
-    setUnregistering(true);
-    try {
-      await callTool('fw_weaver_unregister_bot', { id });
-      toast('Bot unregistered', { type: 'warning' });
-      setConfirmUnregId(null);
-      await loadBots();
-    } catch (err: unknown) {
-      toast(err instanceof Error ? err.message : 'Unregister failed', { type: 'error' });
-    } finally {
-      setUnregistering(false);
-    }
-  }, [callTool, loadBots]);
-
-  // ── Open workspace ─────────────────────────────────────────────
-  const handleOpenWorkspace = useCallback((botId: string) => {
-    dispatchEvent('fw:open-bot-workspace', { botId, packId, live: false });
-  }, [dispatchEvent, packId]);
-
-  // ── Render ─────────────────────────────────────────────────────
+  // ── Open dashboard ──────────────────────────────────────────────
+  const handleOpenDashboard = useCallback(() => {
+    ctx.openWindow({
+      type: 'custom',
+      title: 'Swarm Dashboard',
+      icon: 'dashboard',
+      contentType: 'bot-workspace',
+      displayState: 'docked',
+      dockZone: 'center',
+      definitionId: 'bot-workspace',
+      size: { width: 1000, height: 700 },
+      singleton: true,
+      data: { packId },
+    } as Record<string, unknown>);
+  }, [ctx, packId]);
 
-  const hasBots = bots.length > 0;
+  // ── Render ──────────────────────────────────────────────────────
 
-  // Header row with title + actions
+  // Header
   const header = React.createElement(Flex, {
-    variant: 'row-center-between-nowrap-8',
+    variant: 'row-center-space-between-nowrap-8',
     style: { padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)', flexShrink: 0 },
   },
     React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
       React.createElement(Icon, { name: 'smartToy', size: 16, color: 'color-text-medium' }),
-      React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' }, 'Bots'),
+      React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' }, 'Swarm'),
     ),
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
-      React.createElement(IconButton, {
-        icon: 'refresh', size: 'xs', variant: 'clear',
-        onClick: loadBots, title: 'Refresh',
-      }),
-      React.createElement(IconButton, {
-        icon: 'add', size: 'xs', variant: 'clear',
-        onClick: () => setShowRegForm((v: boolean) => !v), title: 'Register bot',
-      }),
-    ),
-  );
-
-  // Registration form
-  const regForm = showRegForm ? React.createElement(Flex, {
-    variant: 'column-start-start-nowrap-8',
-    style: {
-      padding: '10px 12px',
-      borderBottom: '1px solid var(--color-border-default)',
-      backgroundColor: 'var(--color-surface-low)',
-    },
-  },
-    React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-medium' }, 'Register Existing Workflow'),
-    React.createElement(Input, {
-      type: 'text', size: 'small', placeholder: 'Bot name',
-      value: regName, onChange: setRegName,
-    }),
-    React.createElement(Input, {
-      type: 'text', size: 'small', placeholder: 'File path (e.g. my-bot.ts)',
-      value: regFilePath, onChange: setRegFilePath,
-    }),
-    React.createElement(Input, {
-      type: 'text', size: 'small', placeholder: 'Export name (e.g. myBot)',
-      value: regExport, onChange: setRegExport,
+    React.createElement(IconButton, {
+      icon: 'reset', size: 'xs', variant: 'clear',
+      onClick: fetchStatus, title: 'Refresh',
     }),
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
-      React.createElement(Button, {
-        size: 'xs', variant: 'fill', color: 'primary',
-        onClick: handleRegister,
-        disabled: registering || !regName.trim() || !regFilePath.trim() || !regExport.trim(),
-      }, registering ? 'Registering...' : 'Register'),
-      React.createElement(Button, {
-        size: 'xs', variant: 'clear', color: 'secondary',
-        onClick: () => { setShowRegForm(false); setRegName(''); setRegFilePath(''); setRegExport(''); },
-      }, 'Cancel'),
-    ),
-  ) : null;
+  );
 
   // Loading state
   if (loading) {
@@ -228,9 +178,9 @@ function BotPanel() {
       header,
       React.createElement(Flex, {
         variant: 'column-center-center-nowrap-8',
-        style: { flex: 1, padding: '24px' },
+        style: { flex: 1 },
       },
-        React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' }, 'Loading bots...'),
+        React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' }, 'Loading swarm status...'),
       ),
     );
   }
@@ -244,57 +194,91 @@ function BotPanel() {
       header,
       React.createElement(Flex, {
         variant: 'column-center-center-nowrap-8',
-        style: { flex: 1, padding: '24px' },
+        style: { flex: 1 },
       },
-        React.createElement(Typography, { variant: 'caption-regular', color: 'color-danger' }, error),
-        React.createElement(Button, { size: 'xs', variant: 'outlined', onClick: loadBots }, 'Retry'),
+        React.createElement(Typography, { variant: 'caption-regular', color: 'color-status-negative' }, error),
+        React.createElement(Button, { size: 'xs', variant: 'outlined', onClick: fetchStatus }, 'Retry'),
       ),
     );
   }
 
-  // Bot cards
-  const botCards = bots.map((bot: Bot) => {
-    const vState = bot.validation?.state;
-    const vInfo = validationIcon(vState);
-    const isConfirming = confirmUnregId === bot.id;
+  // Swarm status indicator
+  const swarmStatus = swarm?.status ?? 'idle';
 
-    return React.createElement(Flex, {
-      key: bot.id,
+  const statusRow = React.createElement(Flex, {
+    variant: 'row-center-space-between-nowrap-8',
+    style: { padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)' },
+  },
+    React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
+      React.createElement(StatusIcon, {
+        status: statusToIconStatus(swarmStatus),
+        size: 'sm',
+      }),
+      React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' },
+        statusLabel(swarmStatus),
+      ),
+    ),
+    React.createElement(Button, {
+      size: 'xs', variant: 'outlined', color: 'primary',
+      onClick: handleOpenDashboard,
+    }, 'Open Dashboard'),
+  );
+
+  // Quick stats
+  const statsRow = React.createElement(Flex, {
+    variant: 'row-center-space-between-nowrap-8',
+    style: { padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)', backgroundColor: 'var(--color-surface-low)' },
+  },
+    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
+      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
+        String(swarm?.tasksCompleted ?? 0),
+      ),
+      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Done'),
+    ),
+    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
+      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
+        String(swarm?.tasksFailed ?? 0),
+      ),
+      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Failed'),
+    ),
+    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
+      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
+        formatTokens(swarm?.totalTokensUsed ?? 0),
+      ),
+      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Tokens'),
+    ),
+    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
+      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
+        formatCost(swarm?.totalCost ?? 0),
+      ),
+      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Cost'),
+    ),
+  );
+
+  // Bot list
+  const instanceEntries = Object.values(swarm?.instances ?? {}) as InstanceInfo[];
+  const hasBots = instanceEntries.length > 0;
+
+  const botCards = instanceEntries.map((inst: InstanceInfo) =>
+    React.createElement(Flex, {
+      key: inst.instanceId,
       variant: 'row-center-start-nowrap-8',
-      style: {
-        padding: '7px 8px',
-        borderRadius: 'var(--border-radius-secondary)',
-        border: '1px solid var(--color-border-default)',
-        cursor: 'pointer',
-        transition: 'background-color 0.12s',
-      },
-      onClick: () => handleOpenWorkspace(bot.id),
-      onMouseEnter: (e: React.MouseEvent) => {
-        (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--color-surface-raised)';
-      },
-      onMouseLeave: (e: React.MouseEvent) => {
-        (e.currentTarget as HTMLElement).style.backgroundColor = '';
-      },
+      style: { padding: '8px', borderRadius: 'var(--border-radius-regular)', border: '1px solid var(--color-border-default)' },
     },
-      // Icon
-      React.createElement('div', {
+      // Bot icon
+      React.createElement(Flex, {
+        variant: 'row-center-center-nowrap-0',
         style: {
-          width: '26px', height: '26px',
+          width: 26, height: 26,
           borderRadius: 'var(--border-radius-compact)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
-          background: bot.color
-            ? `color-mix(in srgb, ${bot.color} 14%, transparent)`
-            : 'var(--color-surface-low)',
+          flexShrink: 0,
+          background: 'var(--color-surface-low)',
         },
       },
-        React.createElement(Icon, {
-          name: bot.icon || 'smartToy', size: 14,
-          color: bot.color ? undefined : 'color-text-medium',
-          style: bot.color ? { color: bot.color } : undefined,
-        }),
+        React.createElement(Icon, { name: 'smartToy', size: 14, color: 'color-text-medium' }),
       ),
 
-      // Name + description
+      // Name + status + task
       React.createElement(Flex, {
         variant: 'column-start-start-nowrap-1',
         style: { flex: 1, minWidth: 0 },
@@ -302,70 +286,51 @@ function BotPanel() {
         React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
           React.createElement(Typography, {
             variant: 'caption-thick', color: 'color-text-high',
-            style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-          }, bot.name),
-          // Validation badge
-          React.createElement(Icon, {
-            name: vInfo.icon, size: 12,
-            style: { color: vInfo.color, flexShrink: 0 },
+          }, `${inst.profileId} #${inst.index}`),
+          React.createElement(StatusIcon, {
+            status: statusToIconStatus(inst.status),
+            size: 'sm',
           }),
+          React.createElement(Typography, {
+            variant: 'smallCaption-regular', color: 'color-text-subtle',
+          }, statusLabel(inst.status)),
         ),
-        bot.description ? React.createElement(Typography, {
+        inst.currentTaskId ? React.createElement(Typography, {
           variant: 'smallCaption-regular', color: 'color-text-medium',
-          style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-        }, bot.description) : null,
+          truncate: true,
+        }, `Task: ${inst.currentTaskId}`) : null,
       ),
 
-      // Actions
-      isConfirming
-        ? React.createElement(Flex, {
-            variant: 'row-center-start-nowrap-4',
-            onClick: (e: React.MouseEvent) => e.stopPropagation(),
-          },
-            React.createElement(Button, {
-              size: 'xs', variant: 'fill', color: 'danger',
-              onClick: () => handleUnregister(bot.id),
-              disabled: unregistering,
-            }, unregistering ? '...' : 'Yes'),
-            React.createElement(Button, {
-              size: 'xs', variant: 'clear', color: 'secondary',
-              onClick: () => setConfirmUnregId(null),
-            }, 'No'),
-          )
-        : React.createElement(Flex, {
-            variant: 'row-center-start-nowrap-2',
-            onClick: (e: React.MouseEvent) => e.stopPropagation(),
-          },
-            React.createElement(IconButton, {
-              icon: 'openInNew', size: 'xs', variant: 'clear',
-              onClick: () => handleOpenWorkspace(bot.id),
-              title: 'Open workspace',
-            }),
-            React.createElement(IconButton, {
-              icon: 'close', size: 'xs', variant: 'clear',
-              onClick: () => setConfirmUnregId(bot.id),
-              title: 'Unregister',
-            }),
-          ),
-    );
-  });
+      // Per-instance stats
+      React.createElement(Flex, {
+        variant: 'column-end-end-nowrap-1',
+        style: { flexShrink: 0 },
+      },
+        React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' },
+          formatTokens(inst.tokensUsed),
+        ),
+        React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' },
+          formatCost(inst.cost),
+        ),
+      ),
+    ),
+  );
 
-  // Main content
   const content = hasBots
     ? React.createElement(ScrollArea, { style: { flex: 1 } },
         React.createElement(Flex, {
-          variant: 'column-start-start-nowrap-4',
+          variant: 'column-stretch-start-nowrap-6',
           style: { padding: '8px 12px' },
         }, ...botCards),
       )
     : React.createElement(Flex, {
         variant: 'column-center-center-nowrap-0',
-        style: { flex: 1, padding: '24px' },
+        style: { flex: 1 },
       },
         React.createElement(EmptyState, {
           icon: 'smartToy',
-          message: 'No bots registered',
-          description: 'Register an existing workflow or ask the AI assistant to create one.',
+          message: swarmStatus === 'idle' ? 'Swarm idle' : 'No bots active',
+          description: 'Open the dashboard to configure and start the swarm.',
         }),
       );
 
@@ -374,7 +339,8 @@ function BotPanel() {
     style: { width: '100%', height: '100%', overflow: 'hidden' },
   },
     header,
-    regForm,
+    statusRow,
+    statsRow,
     content,
   );
 }