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

package/src/ui/bot-slot-card.tsx

@@ -1,18 +1,15 @@
 /**
- * BotSlotCard — compact per-bot status card for the swarm dashboard.
- * Displays bot name, status icon, current task, tokens used, and cost.
- * Designed for horizontal row layout (~120px wide).
- *
- * Runs in the pack sandbox — CommonJS require, React.createElement throughout.
+ * BotSlotCard — single row in the bot table for the swarm dashboard.
+ * Displays bot name, status, current task, tokens, and cost in a table row layout.
  */
-const React = require('react');
-const { Flex, Typography, IconButton, StatusIcon, Icon } = require('@fw/plugin-ui-kit');
+import React from 'react';
+import { Flex, Typography, Icon, IconButton } from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-interface BotSlot {
+interface InstanceSlot {
   botId: string;
   botName: string;
   status: 'idle' | 'executing' | 'paused' | 'stopped';
@@ -24,9 +21,12 @@ interface BotSlot {
 }
 
 interface BotSlotCardProps {
-  bot: BotSlot;
-  /** Task title to display when executing (resolved externally) */
+  bot: InstanceSlot;
   currentTaskTitle?: string;
+  profileName?: string;
+  botDisplayName?: string;
+  botIcon?: string;
+  botColor?: string;
   onPause?: (botId: string) => void;
   onResume?: (botId: string) => void;
   onStop?: (botId: string) => void;
@@ -36,22 +36,6 @@ interface BotSlotCardProps {
 // Helpers
 // ---------------------------------------------------------------------------
 
-type DotStatus = 'positive' | 'negative' | 'caution' | 'neutral' | 'info';
-
-const statusToDot: Record<string, DotStatus> = {
-  idle: 'neutral',
-  executing: 'info',
-  paused: 'caution',
-  stopped: 'negative',
-};
-
-const statusToIcon: Record<string, string> = {
-  idle: 'pending',
-  executing: 'running',
-  paused: 'pause',
-  stopped: 'stop',
-};
-
 const statusToLabel: Record<string, string> = {
   idle: 'Idle',
   executing: 'Executing',
@@ -74,114 +58,82 @@ function formatCost(n: number): string {
 // Component
 // ---------------------------------------------------------------------------
 
-function BotSlotCard({ bot, currentTaskTitle, onPause, onResume, onStop }: BotSlotCardProps) {
+function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onPause, onResume, onStop }: BotSlotCardProps) {
   const { botId, botName, status, currentTaskId, tokensUsed, cost } = bot;
-  const dotStatus = statusToDot[status] ?? 'neutral';
-  const iconName = statusToIcon[status] ?? 'pending';
-  const label = statusToLabel[status] ?? status;
   const isExecuting = status === 'executing';
   const isPaused = status === 'paused';
+  const label = statusToLabel[status] ?? status;
+  const taskText = isExecuting ? (currentTaskTitle || currentTaskId || '-') : '-';
 
-  // Status icon color
-  const iconColor = dotStatus === 'neutral'
-    ? 'color-text-subtle'
-    : `color-status-${dotStatus}`;
-
-  // Task display text
-  const taskText = isExecuting
-    ? (currentTaskTitle || currentTaskId || 'Working...')
-    : null;
-
-  // Per-bot action buttons
-  const actions = React.createElement(Flex, {
-    variant: 'row-center-center-nowrap-2',
-    style: { marginTop: '4px' },
+  return React.createElement(Flex, {
+    variant: 'row-center-start-nowrap-8',
+    style: { padding: '6px 16px', minHeight: '38px', borderBottom: '1px solid var(--color-border-default)' },
   },
-    // Pause / Resume button
-    (isExecuting && onPause) ? React.createElement(IconButton, {
-      icon: 'pause', size: 'xs', variant: 'clear',
-      onClick: (e: React.MouseEvent) => { e.stopPropagation(); onPause(botId); },
-      title: 'Pause bot',
-    }) : null,
-    (isPaused && onResume) ? React.createElement(IconButton, {
-      icon: 'playArrow', size: 'xs', variant: 'clear',
-      onClick: (e: React.MouseEvent) => { e.stopPropagation(); onResume(botId); },
-      title: 'Resume bot',
-    }) : null,
-    // Stop button (available when executing or paused)
-    ((isExecuting || isPaused) && onStop) ? React.createElement(IconButton, {
-      icon: 'stop', size: 'xs', variant: 'clear',
-      onClick: (e: React.MouseEvent) => { e.stopPropagation(); onStop(botId); },
-      title: 'Stop bot',
-    }) : null,
-  );
-
-  const hasActions = (isExecuting && onPause) || (isPaused && onResume) || ((isExecuting || isPaused) && onStop);
-
-  return React.createElement('div', {
-    style: {
-      width: '120px',
-      minWidth: '120px',
-      padding: '8px',
-      borderRadius: 'var(--border-radius-secondary)',
-      border: '1px solid var(--color-border-default)',
-      backgroundColor: 'var(--color-surface-elevated)',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '4px',
-      flexShrink: 0,
+    // Instance name
+    React.createElement(Typography, {
+      variant: 'smallCaption-regular', color: 'color-text-high',
+      style: { width: '120px', flexShrink: 0 },
+    }, profileName ? `${profileName} #${botId.split('-').pop() ?? '0'}` : botName),
+
+    // Bot (icon + name)
+    React.createElement(Flex, {
+      variant: 'row-center-start-nowrap-4',
+      style: { width: '110px', flexShrink: 0, color: botColor ? `var(--${botColor})` : undefined },
     },
-  },
-    // Row 1: Status icon + bot name
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
-      React.createElement(Icon, {
-        name: iconName as any, size: 12, color: iconColor,
-      }),
+      React.createElement(Icon, { name: botIcon || 'smartToy', size: 12 }),
       React.createElement(Typography, {
-        variant: 'caption-thick', color: 'color-text-high',
-        style: {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          flex: 1,
-          minWidth: 0,
-        },
-      }, botName),
+        variant: 'smallCaption-regular', color: 'color-text-subtle',
+      }, botDisplayName || '-'),
     ),
 
-    // Row 2: Status label
+    // Status
     React.createElement(Typography, {
       variant: 'smallCaption-regular',
-      color: iconColor,
-      style: { textTransform: 'capitalize' },
+      color: isExecuting ? 'color-brand-main' : 'color-text-subtle',
+      style: { width: '70px', flexShrink: 0 },
     }, label),
 
-    // Row 3: Current task (if executing)
-    taskText ? React.createElement(Typography, {
+    // Current task
+    React.createElement(Typography, {
       variant: 'smallCaption-regular',
-      color: 'color-text-medium',
-      style: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      },
-    }, taskText) : null,
-
-    // Row 4: Tokens + cost
-    React.createElement(Flex, { variant: 'row-center-between-nowrap-4', style: { marginTop: 'auto' } },
-      React.createElement(Typography, {
-        variant: 'smallCaption-regular', color: 'color-text-subtle',
-      }, formatTokens(tokensUsed)),
-      React.createElement(Typography, {
-        variant: 'smallCaption-regular', color: 'color-text-subtle',
-      }, formatCost(cost)),
-    ),
+      color: isExecuting ? 'color-text-medium' : 'color-text-subtle',
+      style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    }, taskText),
+
+    // Tokens
+    React.createElement(Typography, {
+      variant: 'smallCaption-regular',
+      color: 'color-text-subtle',
+      style: { width: '50px', flexShrink: 0, textAlign: 'right' },
+    }, formatTokens(tokensUsed)),
 
-    // Row 5: Actions (optional)
-    hasActions ? actions : null,
+    // Cost
+    React.createElement(Typography, {
+      variant: 'smallCaption-regular',
+      color: 'color-text-subtle',
+      style: { width: '50px', flexShrink: 0, textAlign: 'right' },
+    }, formatCost(cost)),
+
+    // Actions
+    React.createElement(Flex, {
+      variant: 'row-center-end-nowrap-1',
+      style: { width: '50px', flexShrink: 0 },
+    },
+      isExecuting && onPause && React.createElement(IconButton, {
+        icon: 'pause', size: 'xs', variant: 'clear',
+        onClick: () => onPause(botId), title: 'Pause',
+      }),
+      isPaused && onResume && React.createElement(IconButton, {
+        icon: 'playArrow', size: 'xs', variant: 'clear',
+        onClick: () => onResume(botId), title: 'Resume',
+      }),
+      (isExecuting || isPaused) && onStop && React.createElement(IconButton, {
+        icon: 'stop', size: 'xs', variant: 'clear', color: 'danger',
+        onClick: () => onStop(botId), title: 'Stop',
+      }),
+    ),
   );
 }
 
 export { BotSlotCard };
 export default BotSlotCard;
-module.exports = BotSlotCard;

package/src/ui/budget-bar.tsx

@@ -13,10 +13,12 @@ function BudgetBar({ label, used, limit, unit }: {
       React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' },
         `${used.toLocaleString()} / ${limit.toLocaleString()} ${unit}`),
     ),
-    React.createElement('div', {
-      style: { width: '100%', height: '4px', borderRadius: '2px', backgroundColor: 'var(--color-surface-raised)' },
+    React.createElement(Flex, {
+      variant: 'row-start-start-nowrap-0',
+      style: { width: '100%', height: '4px', borderRadius: '2px', backgroundColor: 'var(--color-surface-raised)', overflow: 'hidden' },
     },
-      React.createElement('div', {
+      React.createElement(Flex, {
+        variant: 'row-start-start-nowrap-0',
         style: { width: `${pct}%`, height: '100%', borderRadius: '2px', backgroundColor: color, transition: 'width 0.3s' },
       }),
     ),

package/src/ui/chat-task-result.tsx

@@ -21,7 +21,7 @@ interface TaskData {
   status: 'pending' | 'in-progress' | 'blocked' | 'done' | 'failed' | 'cancelled';
   isParent: boolean;
   currentBotId?: string;
-  assignedBots: string[];
+  assignedProfile?: string;
 }
 
 interface SubtaskData {
@@ -138,7 +138,6 @@ function ChatTaskResult({ result, args, callTool, openWorkspace }: ChatTaskResul
     return React.createElement(Flex, {
       variant: 'row-center-start-nowrap-10',
       style: {
-        padding: '8px 12px',
         borderRadius: 'var(--border-radius-regular)',
         border: '1px solid var(--color-border-default)',
         backgroundColor: 'var(--color-surface-low)',
@@ -159,8 +158,8 @@ function ChatTaskResult({ result, args, callTool, openWorkspace }: ChatTaskResul
   // Bot info
   const botLabel = task.currentBotId
     ? `Bot: ${task.currentBotId}`
-    : task.assignedBots?.length
-      ? `Assigned: ${task.assignedBots.join(', ')}`
+    : task.assignedProfile
+      ? `Profile: ${task.assignedProfile}`
       : null;
 
   const handleOpenDashboard = useCallback(() => {
@@ -173,7 +172,6 @@ function ChatTaskResult({ result, args, callTool, openWorkspace }: ChatTaskResul
   return React.createElement(Flex, {
     variant: 'row-center-start-nowrap-10',
     style: {
-      padding: '8px 12px',
       borderRadius: 'var(--border-radius-regular)',
       border: '1px solid var(--color-border-default)',
       backgroundColor: 'var(--color-surface-low)',
@@ -194,13 +192,12 @@ function ChatTaskResult({ result, args, callTool, openWorkspace }: ChatTaskResul
       React.createElement(Typography, {
         variant: 'caption-thick',
         color: 'color-text-high',
-        style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' },
+        truncate: true,
       }, task.title),
 
       // Status + subtask progress + bot
       React.createElement(Flex, {
-        variant: 'row-center-start-nowrap-6',
-        style: { flexWrap: 'wrap', gap: '4px 8px' },
+        variant: 'row-center-start-wrap-8',
       },
         // Status label
         React.createElement(Typography, {
@@ -221,7 +218,7 @@ function ChatTaskResult({ result, args, callTool, openWorkspace }: ChatTaskResul
         botLabel && React.createElement(Typography, {
           variant: 'smallCaption-regular',
           color: 'color-text-low',
-          style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+          truncate: true,
         }, botLabel),
       ),
     ),

package/src/ui/decision-log.tsx

@@ -0,0 +1,148 @@
+/**
+ * DecisionLog — displays recent orchestrator routing decisions.
+ *
+ * Each decision shows timestamp, task title, assigned instance, routing method,
+ * and the reasoning. AI-routed decisions also show confidence percentage.
+ *
+ * Pattern: CommonJS require for platform deps, React.createElement throughout.
+ */
+const React = require('react');
+const {
+  Flex, Typography, ScrollArea, Tag, SectionTitle,
+} = require('@fw/plugin-ui-kit');
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type RoutingMethod = 'exact-match' | 'single-eligible' | 'ai-routed' | 'round-robin' | 'manual';
+
+interface Decision {
+  id: number;
+  timestamp: number;
+  taskId: string;
+  taskTitle: string;
+  assignedProfileId: string;
+  assignedInstanceId: string;
+  reason: string;
+  method: RoutingMethod;
+  confidence?: number;
+}
+
+interface DecisionLogProps {
+  decisions: Decision[];
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const methodColors: Record<RoutingMethod, string> = {
+  'exact-match': 'info',
+  'single-eligible': 'positive',
+  'ai-routed': 'secondary',
+  'round-robin': 'secondary',
+  'manual': 'caution',
+};
+
+const methodLabels: Record<RoutingMethod, string> = {
+  'exact-match': 'exact',
+  'single-eligible': 'single',
+  'ai-routed': 'ai',
+  'round-robin': 'robin',
+  'manual': 'manual',
+};
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? text.slice(0, max - 1) + '\u2026' : text;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function DecisionLog({ decisions }: DecisionLogProps) {
+  if (!decisions || decisions.length === 0) {
+    return React.createElement(Flex, {
+      variant: 'column-stretch-start-nowrap-4',
+    },
+      React.createElement(SectionTitle, null, 'Decision Log'),
+      React.createElement(Typography, {
+        variant: 'smallCaption-regular', color: 'color-text-subtle',
+      }, 'No routing decisions yet.'),
+    );
+  }
+
+  // Show newest first
+  const sorted = [...decisions].sort((a, b) => b.timestamp - a.timestamp);
+
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-4',
+  },
+    React.createElement(SectionTitle, null, 'Decision Log'),
+    React.createElement(ScrollArea, {
+      style: { maxHeight: '260px' },
+    },
+      React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-0',
+      },
+        ...sorted.map((d: Decision) => {
+          const methodLabel = d.method === 'ai-routed' && d.confidence != null
+            ? `ai ${d.confidence}%`
+            : methodLabels[d.method] || d.method;
+
+          return React.createElement(Flex, {
+            key: d.id,
+            variant: 'column-stretch-start-nowrap-2',
+            style: {
+              padding: '6px 8px',
+              borderBottom: '1px solid var(--color-border-default)',
+            },
+          },
+            // Main line: time, title, instance, method
+            React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular',
+                color: 'color-text-subtle',
+                style: { flexShrink: 0, fontFamily: 'var(--font-mono, monospace)', fontSize: '11px' },
+              }, formatTime(d.timestamp)),
+
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular',
+                color: 'color-text-high',
+                style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+              }, `"${truncate(d.taskTitle, 40)}"`),
+
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular',
+                color: 'color-text-medium',
+                style: { flexShrink: 0 },
+              }, `\u2192 ${d.assignedInstanceId}`),
+
+              React.createElement(Tag, {
+                size: 'small',
+                color: methodColors[d.method] || 'secondary',
+              }, methodLabel),
+            ),
+
+            // Reason line
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular',
+              color: 'color-text-subtle',
+              style: { paddingLeft: '70px' },
+            }, d.reason),
+          );
+        }),
+      ),
+    ),
+  );
+}
+
+export { DecisionLog };
+export default DecisionLog;
+module.exports = DecisionLog;

package/src/ui/profile-card.tsx

@@ -0,0 +1,157 @@
+/**
+ * ProfileCard — displays a bot profile summary with capabilities, preferences,
+ * instance count, and budget info. Used in the Config tab of the swarm dashboard.
+ *
+ * Pattern: CommonJS require for platform deps, React.createElement throughout.
+ */
+const React = require('react');
+const {
+  Flex, Typography, Icon, Chip, IconButton, Tag,
+} = require('@fw/plugin-ui-kit');
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface Capability {
+  name: string;
+  description: string;
+}
+
+interface ProfilePreferences {
+  costStrategy: 'frugal' | 'balanced' | 'performance';
+  maxCostPerRun?: number;
+  maxCostPerTask?: number;
+  requireApproval: boolean;
+  instructions?: string;
+}
+
+interface Profile {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  color: string;
+  botId: string;
+  capabilities: Capability[];
+  preferences: ProfilePreferences;
+  minInstances: number;
+  maxInstances: number;
+}
+
+interface ProfileCardProps {
+  profile: Profile;
+  activeInstances: number;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function ProfileCard({ profile, activeInstances, onEdit, onDelete }: ProfileCardProps) {
+  const {
+    id, name, description, icon, color, capabilities,
+    preferences, maxInstances,
+  } = profile;
+
+  const budgetParts: string[] = [];
+  if (preferences.maxCostPerRun) budgetParts.push(`$${preferences.maxCostPerRun.toFixed(2)}/run`);
+  if (preferences.maxCostPerTask) budgetParts.push(`$${preferences.maxCostPerTask.toFixed(2)}/task`);
+  const budgetText = budgetParts.length > 0 ? budgetParts.join(' / ') : null;
+
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-6',
+    style: {
+      padding: '10px 12px',
+      borderRadius: '8px',
+      border: '1px solid var(--color-border-default)',
+      backgroundColor: 'var(--color-surface-elevated)',
+    },
+  },
+    // Row 1: Icon + Name + Edit/Delete buttons
+    React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
+      React.createElement(Flex, {
+        variant: 'row-center-center-nowrap-0',
+        style: { color: `var(--${color})`, flexShrink: 0 },
+      },
+        React.createElement(Icon, { name: icon || 'smartToy', size: 18 }),
+      ),
+      React.createElement(Typography, {
+        variant: 'caption-thick',
+        color: 'color-text-high',
+        style: { flex: 1, minWidth: 0 },
+      }, name),
+      onEdit && React.createElement(IconButton, {
+        icon: 'edit', size: 'xs', variant: 'clear',
+        onClick: () => onEdit(id),
+        title: 'Edit profile',
+      }),
+      onDelete && React.createElement(IconButton, {
+        icon: 'delete', size: 'xs', variant: 'clear', color: 'danger',
+        onClick: () => onDelete(id),
+        title: 'Delete profile',
+      }),
+    ),
+
+    // Description
+    description && React.createElement(Typography, {
+      variant: 'smallCaption-regular',
+      color: 'color-text-medium',
+    }, description),
+
+    // Divider
+    React.createElement(Flex, {
+      variant: 'row-center-start-nowrap-0',
+      style: { borderTop: '1px solid var(--color-border-default)', margin: '2px 0' },
+    }),
+
+    // Capabilities
+    capabilities.length > 0 && React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
+      React.createElement(Typography, {
+        variant: 'smallCaption-regular',
+        color: 'color-text-subtle',
+        style: { flexShrink: 0 },
+      }, 'Capabilities:'),
+      ...capabilities.map((cap: Capability) =>
+        React.createElement('span', { key: cap.name, title: cap.description },
+          React.createElement(Chip, { label: cap.name, size: 'small', color: 'color-brand-main' }),
+        ),
+      ),
+    ),
+
+    // Cost strategy
+    React.createElement(Flex, { variant: 'row-center-start-wrap-12' },
+      React.createElement(Typography, {
+        variant: 'smallCaption-regular', color: 'color-text-subtle',
+      }, `Cost strategy: ${preferences.costStrategy}`),
+    ),
+
+    // Instances + Approval + Budget
+    React.createElement(Flex, { variant: 'row-center-start-wrap-12' },
+      React.createElement(Typography, {
+        variant: 'smallCaption-regular', color: 'color-text-subtle',
+      }, `Instances: ${activeInstances}/${maxInstances} active`),
+      React.createElement(Tag, {
+        size: 'small',
+        color: preferences.requireApproval ? 'caution' : 'positive',
+      }, preferences.requireApproval ? 'Approval required' : 'Auto-approve'),
+    ),
+
+    // Budget line
+    budgetText && React.createElement(Typography, {
+      variant: 'smallCaption-regular', color: 'color-text-subtle',
+    }, `Budget: ${budgetText}`),
+
+    // Instructions
+    preferences.instructions && React.createElement(Typography, {
+      variant: 'smallCaption-regular', color: 'color-text-subtle',
+      style: { fontStyle: 'italic' },
+    }, preferences.instructions),
+  );
+}
+
+export { ProfileCard };
+export default ProfileCard;
+module.exports = ProfileCard;