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

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

@@ -0,0 +1,139 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { Flex, Typography, Icon, IconButton } from '@fw/plugin-ui-kit';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface InstanceSlot {
+  botId: string;
+  botName: string;
+  status: 'idle' | 'executing' | 'paused' | 'stopped';
+  currentTaskId?: string;
+  currentRunId?: string;
+  startedAt?: string;
+  tokensUsed: number;
+  cost: number;
+}
+
+interface BotSlotCardProps {
+  bot: InstanceSlot;
+  currentTaskTitle?: string;
+  profileName?: string;
+  botDisplayName?: string;
+  botIcon?: string;
+  botColor?: string;
+  onPause?: (botId: string) => void;
+  onResume?: (botId: string) => void;
+  onStop?: (botId: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const statusToLabel: Record<string, string> = {
+  idle: 'Idle',
+  executing: 'Executing',
+  paused: 'Paused',
+  stopped: 'Stopped',
+};
+
+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 {
+  if (n < 0.01 && n > 0) return '<$0.01';
+  return `$${n.toFixed(2)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onPause, onResume, onStop }: BotSlotCardProps) {
+  const { botId, botName, status, currentTaskId, tokensUsed, cost } = bot;
+  const isExecuting = status === 'executing';
+  const isPaused = status === 'paused';
+  const label = statusToLabel[status] ?? status;
+  const taskText = isExecuting ? (currentTaskTitle || currentTaskId || '-') : '-';
+
+  return React.createElement(Flex, {
+    variant: 'row-center-start-nowrap-8',
+    style: { padding: '6px 16px', minHeight: '38px', borderBottom: '1px solid var(--color-border-default)' },
+  },
+    // 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 },
+    },
+      React.createElement(Icon, { name: botIcon || 'smartToy', size: 12 }),
+      React.createElement(Typography, {
+        variant: 'smallCaption-regular', color: 'color-text-subtle',
+      }, botDisplayName || '-'),
+    ),
+
+    // Status
+    React.createElement(Typography, {
+      variant: 'smallCaption-regular',
+      color: isExecuting ? 'color-brand-main' : 'color-text-subtle',
+      style: { width: '70px', flexShrink: 0 },
+    }, label),
+
+    // Current task
+    React.createElement(Typography, {
+      variant: 'smallCaption-regular',
+      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)),
+
+    // 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;

package/src/ui/budget-bar.tsx

@@ -0,0 +1,30 @@
+const React = require('react');
+const { Flex, Typography } = require('@fw/plugin-ui-kit');
+
+function BudgetBar({ label, used, limit, unit }: {
+  label: string; used: number; limit: number; unit: string;
+}) {
+  const pct = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;
+  const color = pct > 90 ? 'var(--color-status-negative)' : pct > 70 ? 'var(--color-status-caution)' : 'var(--color-brand-main)';
+
+  return React.createElement(Flex, { variant: 'column-start-start-nowrap-2', style: { width: '100%' } },
+    React.createElement(Flex, { variant: 'row-center-space-between-nowrap-4' },
+      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, label),
+      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' },
+        `${used.toLocaleString()} / ${limit.toLocaleString()} ${unit}`),
+    ),
+    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(Flex, {
+        variant: 'row-start-start-nowrap-0',
+        style: { width: `${pct}%`, height: '100%', borderRadius: '2px', backgroundColor: color, transition: 'width 0.3s' },
+      }),
+    ),
+  );
+}
+
+export { BudgetBar };
+export default BudgetBar;
+module.exports = BudgetBar;

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

@@ -0,0 +1,236 @@
+/**
+ * Chat Task Result — compact inline card for the AI chat thread.
+ *
+ * Renders when `fw_weaver_task_create` returns a result. Shows task title,
+ * live status (polls fw_weaver_task_get every 3s), subtask progress for
+ * parent tasks, assigned bot, and an "Open Dashboard" button.
+ *
+ * Runs in the pack sandbox — CommonJS require, React.createElement throughout.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback, useRef } = React;
+const { Flex, Typography, StatusIcon, Button } = require('@fw/plugin-ui-kit');
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface TaskData {
+  id: string;
+  title: string;
+  status: 'pending' | 'in-progress' | 'blocked' | 'done' | 'failed' | 'cancelled';
+  isParent: boolean;
+  currentBotId?: string;
+  assignedProfile?: string;
+}
+
+interface SubtaskData {
+  id: string;
+  title: string;
+  status: 'pending' | 'in-progress' | 'blocked' | 'done' | 'failed' | 'cancelled';
+}
+
+interface ChatTaskResultProps {
+  result: unknown;
+  toolName: string;
+  args: Record<string, unknown>;
+  callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>;
+  openWorkspace: (data: Record<string, unknown>) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseResult(result: unknown): { task: TaskData | null; subtasks: SubtaskData[] } {
+  try {
+    const parsed = typeof result === 'string' ? JSON.parse(result) : result;
+    if (!parsed || typeof parsed !== 'object') return { task: null, subtasks: [] };
+    const obj = parsed as Record<string, unknown>;
+    const task = (obj.task ?? parsed) as TaskData | null;
+    const subtasks = (Array.isArray(obj.subtasks) ? obj.subtasks : []) as SubtaskData[];
+    return { task: task?.id ? task : null, subtasks };
+  } catch {
+    return { task: null, subtasks: [] };
+  }
+}
+
+type StatusKind = 'running' | 'completed' | 'failed' | 'pending';
+
+function statusToIcon(status: TaskData['status']): StatusKind {
+  switch (status) {
+    case 'pending':
+    case 'blocked':
+      return 'pending';
+    case 'in-progress':
+      return 'running';
+    case 'done':
+      return 'completed';
+    case 'failed':
+    case 'cancelled':
+      return 'failed';
+    default:
+      return 'pending';
+  }
+}
+
+function statusLabel(status: TaskData['status']): string {
+  switch (status) {
+    case 'pending': return 'Pending';
+    case 'in-progress': return 'In Progress';
+    case 'blocked': return 'Blocked';
+    case 'done': return 'Done';
+    case 'failed': return 'Failed';
+    case 'cancelled': return 'Cancelled';
+    default: return status;
+  }
+}
+
+function isTerminal(status: TaskData['status']): boolean {
+  return status === 'done' || status === 'failed' || status === 'cancelled';
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function ChatTaskResult({ result, args, callTool, openWorkspace }: ChatTaskResultProps) {
+  const initial = parseResult(result);
+  const [task, setTask] = useState<TaskData | null>(initial.task);
+  const [subtasks, setSubtasks] = useState<SubtaskData[]>(initial.subtasks);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => { mountedRef.current = false; };
+  }, []);
+
+  // Poll fw_weaver_task_get every 3s until terminal
+  useEffect(() => {
+    if (!task?.id) return;
+    if (isTerminal(task.status)) return;
+
+    const poll = async () => {
+      try {
+        const raw = await callTool('fw_weaver_task_get', { id: task.id });
+        if (!mountedRef.current) return;
+        const { task: updated, subtasks: updatedSubs } = parseResult(raw);
+        if (updated) {
+          setTask(updated);
+          if (updatedSubs.length > 0) setSubtasks(updatedSubs);
+        }
+      } catch {
+        // non-fatal — keep polling
+      }
+    };
+
+    const interval = setInterval(poll, 3000);
+    // Initial poll after a short delay to catch quick updates
+    const timeout = setTimeout(poll, 1000);
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, [task?.id, task?.status, callTool]);
+
+  // If we couldn't parse a task, show a minimal fallback
+  if (!task) {
+    return React.createElement(Flex, {
+      variant: 'row-center-start-nowrap-10',
+      style: {
+        borderRadius: 'var(--border-radius-regular)',
+        border: '1px solid var(--color-border-default)',
+        backgroundColor: 'var(--color-surface-low)',
+      },
+    },
+      React.createElement(StatusIcon, { status: 'pending', size: 'sm' }),
+      React.createElement(Typography, {
+        variant: 'caption-thick', color: 'color-text-medium',
+      }, 'Task created'),
+    );
+  }
+
+  // Subtask progress
+  const doneCount = subtasks.filter(s => s.status === 'done').length;
+  const totalCount = subtasks.length;
+  const hasSubtasks = task.isParent && totalCount > 0;
+
+  // Bot info
+  const botLabel = task.currentBotId
+    ? `Bot: ${task.currentBotId}`
+    : task.assignedProfile
+      ? `Profile: ${task.assignedProfile}`
+      : null;
+
+  const handleOpenDashboard = useCallback(() => {
+    openWorkspace({
+      packId: '@synergenius/flow-weaver-pack-weaver',
+      taskId: task.id,
+    });
+  }, [openWorkspace, task.id]);
+
+  return React.createElement(Flex, {
+    variant: 'row-center-start-nowrap-10',
+    style: {
+      borderRadius: 'var(--border-radius-regular)',
+      border: '1px solid var(--color-border-default)',
+      backgroundColor: 'var(--color-surface-low)',
+    },
+  },
+    // Status icon
+    React.createElement(StatusIcon, {
+      status: statusToIcon(task.status),
+      size: 'sm',
+    }),
+
+    // Title + meta column
+    React.createElement(Flex, {
+      variant: 'column-start-start-nowrap-2',
+      style: { flex: 1, minWidth: 0 },
+    },
+      // Title row
+      React.createElement(Typography, {
+        variant: 'caption-thick',
+        color: 'color-text-high',
+        truncate: true,
+      }, task.title),
+
+      // Status + subtask progress + bot
+      React.createElement(Flex, {
+        variant: 'row-center-start-wrap-8',
+      },
+        // Status label
+        React.createElement(Typography, {
+          variant: 'smallCaption-regular',
+          color: task.status === 'done' ? 'color-text-positive' :
+                 task.status === 'failed' ? 'color-text-negative' :
+                 task.status === 'in-progress' ? 'color-text-info' :
+                 'color-text-medium',
+        }, statusLabel(task.status)),
+
+        // Subtask progress
+        hasSubtasks && React.createElement(Typography, {
+          variant: 'smallCaption-regular',
+          color: 'color-text-medium',
+        }, `${doneCount}/${totalCount} done`),
+
+        // Bot
+        botLabel && React.createElement(Typography, {
+          variant: 'smallCaption-regular',
+          color: 'color-text-low',
+          truncate: true,
+        }, botLabel),
+      ),
+    ),
+
+    // Open Dashboard button
+    React.createElement(Button, {
+      size: 'xs',
+      variant: 'clear',
+      color: 'secondary',
+      onClick: handleOpenDashboard,
+    }, 'Open Dashboard'),
+  );
+}
+
+module.exports = ChatTaskResult;

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;