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

package/src/ui/profile-editor.tsx

@@ -0,0 +1,384 @@
+/**
+ * ProfileEditor — unified component for creating and editing bot profiles.
+ *
+ * Handles both modes:
+ * - Create: all fields start empty/default, saves via fw_weaver_profile_create.
+ * - Edit: loads profile by ID on mount, saves via fw_weaver_profile_update.
+ *
+ * Calls tool functions internally via usePackWorkspace.
+ *
+ * Pattern: CommonJS require for platform deps, ESM import for local files,
+ * React.createElement throughout, module.exports at end.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback } = React;
+const {
+  Flex, Typography, Input, Button, IconButton, Icon, SectionTitle, Checkbox, Field,
+  IconPicker, ColorPicker, toast, usePackWorkspace,
+} = require('@fw/plugin-ui-kit');
+
+import { ICON_CATALOG, BOT_COLORS } from './bot-constants';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ProfileEditorProps {
+  mode: 'create' | 'edit';
+  profileId?: string;
+  bots: Array<{ id: string; name: string; icon?: string; color?: string }>;
+  onSave: () => void;
+  onCancel: () => void;
+  onDelete?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: ProfileEditorProps) {
+  const ctx = usePackWorkspace();
+  const { callTool } = ctx;
+
+  // --- Field state ---
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [botId, setBotId] = useState(mode === 'create' && bots.length > 0 ? bots[0].id : '');
+  const [icon, setIcon] = useState('smartToy');
+  const [color, setColor] = useState('color-node-blue-icon');
+  const [costStrategy, setCostStrategy] = useState<'frugal' | 'balanced' | 'performance'>('balanced');
+  const [capabilities, setCapabilities] = useState<Array<{ name: string; description: string }>>([]);
+  const [capName, setCapName] = useState('');
+  const [capDescription, setCapDescription] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [requireApproval, setRequireApproval] = useState(false);
+  const [loading, setLoading] = useState(mode === 'edit');
+
+  // --- Load profile for edit mode ---
+  useEffect(() => {
+    if (mode !== 'edit' || !profileId) return;
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const raw = await callTool('fw_weaver_profile_list', {});
+        if (cancelled) return;
+        const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+        const list = Array.isArray(data) ? data : [];
+        const profile = list.find((p: Record<string, unknown>) => p.id === profileId);
+        if (!profile) {
+          toast('Profile not found', { type: 'error' });
+          onCancel();
+          return;
+        }
+        setName((profile.name as string) || '');
+        setDescription((profile.description as string) || '');
+        setBotId((profile.botId as string) || '');
+        setIcon((profile.icon as string) || 'smartToy');
+        setColor((profile.color as string) || 'color-node-blue-icon');
+        const prefs = (profile.preferences || {}) as Record<string, unknown>;
+        setCostStrategy((prefs.costStrategy as 'frugal' | 'balanced' | 'performance') || 'balanced');
+        setCapabilities(
+          Array.isArray(profile.capabilities)
+            ? (profile.capabilities as Array<{ name: string; description: string }>)
+            : [],
+        );
+        setInstructions((prefs.instructions as string) || '');
+        setRequireApproval(!!(prefs.requireApproval));
+      } catch {
+        toast('Failed to load profile', { type: 'error' });
+        onCancel();
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+
+    return () => { cancelled = true; };
+  }, [mode, profileId, callTool, onCancel]);
+
+  // --- Capabilities ---
+  const handleAddCapability = useCallback(() => {
+    const trimName = capName.trim();
+    const trimDesc = capDescription.trim();
+    if (!trimName || !trimDesc) return;
+    setCapabilities((prev: Array<{ name: string; description: string }>) => [...prev, { name: trimName, description: trimDesc }]);
+    setCapName('');
+    setCapDescription('');
+  }, [capName, capDescription]);
+
+  const handleRemoveCapability = useCallback((index: number) => {
+    setCapabilities((prev: Array<{ name: string; description: string }>) => prev.filter((_: unknown, i: number) => i !== index));
+  }, []);
+
+  // --- Save ---
+  const handleSave = useCallback(async () => {
+    if (!name.trim()) {
+      toast('Profile name is required', { type: 'error' });
+      return;
+    }
+    if (!botId) {
+      toast('Select a bot workflow', { type: 'error' });
+      return;
+    }
+    if (capabilities.length === 0) {
+      toast('Add at least one capability', { type: 'error' });
+      return;
+    }
+
+    try {
+      if (mode === 'create') {
+        await callTool('fw_weaver_profile_create', {
+          name: name.trim(),
+          description: description.trim(),
+          botId,
+          icon,
+          color,
+          capabilities,
+          costStrategy,
+          instructions: instructions.trim() || undefined,
+          requireApproval,
+        });
+        toast('Profile created', { type: 'success' });
+      } else {
+        await callTool('fw_weaver_profile_update', {
+          id: profileId,
+          name: name.trim(),
+          description: description.trim(),
+          icon,
+          color,
+          capabilities,
+          costStrategy,
+          instructions: instructions.trim() || undefined,
+          requireApproval,
+        });
+        toast('Profile updated', { type: 'success' });
+      }
+      onSave();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : `Failed to ${mode} profile`, { type: 'error' });
+    }
+  }, [mode, profileId, name, description, botId, icon, color, costStrategy, capabilities, instructions, requireApproval, callTool, onSave]);
+
+  // --- Delete ---
+  const handleDelete = useCallback(async () => {
+    if (!profileId) return;
+    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: profileId });
+      toast('Profile deleted', { type: 'success' });
+      if (onDelete) onDelete();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to delete profile', { type: 'error' });
+    }
+  }, [profileId, callTool, onDelete, ctx]);
+
+
+
+  // --- Loading state ---
+  if (loading) {
+    return React.createElement(Flex, {
+      variant: 'column-center-center-nowrap-12',
+      style: { padding: '24px 16px' },
+    },
+      React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' }, 'Loading profile...'),
+    );
+  }
+
+  // --- Render ---
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
+    // ── Header bar ──
+    React.createElement(Flex, {
+      variant: 'row-center-space-between-nowrap-8',
+      style: { padding: '8px 16px', flexShrink: 0, borderBottom: '1px solid var(--color-border-default)' },
+    },
+      React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
+        React.createElement(IconButton, {
+          icon: 'back', size: 'xs', variant: 'clear',
+          onClick: onCancel,
+          title: 'Back',
+        }),
+        React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' }, mode === 'create' ? 'Create Profile' : 'Edit Profile'),
+      ),
+      mode === 'edit' && onDelete && React.createElement(IconButton, {
+        icon: 'outlinedDelete', size: 'sm', variant: 'clear', color: 'danger',
+        onClick: handleDelete,
+        title: 'Delete profile',
+      }),
+    ),
+
+    // ── Scrollable form body ──
+    React.createElement(Flex, {
+      variant: 'column-stretch-start-nowrap-10',
+      style: { flex: 1, minHeight: 0, overflow: 'auto', padding: '12px 16px' },
+    },
+
+      // ── Name ──
+      React.createElement(Field, { label: 'Name' },
+        React.createElement(Input, {
+          type: 'text', size: 'small',
+          placeholder: 'Profile name',
+          value: name,
+          onChange: (v: string) => setName(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // ── Description ──
+      React.createElement(Field, { label: 'Description' },
+        React.createElement(Input, {
+          type: 'text', size: 'small',
+          placeholder: 'What does this profile do?',
+          value: description,
+          onChange: (v: string) => setDescription(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // ── Bot ──
+      React.createElement(Field, { label: 'Bot' },
+        React.createElement(Input, {
+          type: 'select', size: 'small',
+          options: bots.map((b: { id: string; name: string; icon?: string }) => ({ id: b.id, label: b.name, icon: b.icon || 'smartToy' })),
+          optionId: botId,
+          onChange: (id: string) => setBotId(id),
+          disabled: mode === 'edit',
+          placeholder: 'Select bot',
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+        }),
+      ),
+
+      // ── Icon ──
+      React.createElement(Field, { label: 'Icon', align: 'start' },
+        React.createElement(IconPicker, {
+          catalog: ICON_CATALOG,
+          value: icon,
+          onChange: (v: string) => setIcon(v),
+          accentColor: color,
+          variant: 'inline',
+        }),
+      ),
+
+      // ── Color ──
+      React.createElement(Field, { label: 'Color', align: 'start' },
+        React.createElement(ColorPicker, {
+          colors: BOT_COLORS,
+          value: color,
+          onChange: (v: string) => setColor(v),
+          variant: 'inline',
+        }),
+      ),
+
+      // ── Cost Strategy ──
+      React.createElement(Field, { label: 'Cost Strategy' },
+        React.createElement(Input, {
+          type: 'select', size: 'small',
+          options: [
+            { id: 'frugal', label: 'Frugal', icon: 'timer' },
+            { id: 'balanced', label: 'Balanced', icon: 'syncAlt' },
+            { id: 'performance', label: 'Performance', icon: 'rocketLaunch' },
+          ],
+          optionId: costStrategy,
+          onChange: (id: string) => setCostStrategy(id as 'frugal' | 'balanced' | 'performance'),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+        }),
+      ),
+
+      // ── Capabilities ──
+      React.createElement(Field, { label: 'Capabilities', align: 'start' },
+        React.createElement(Flex, { variant: 'column-stretch-start-nowrap-6' },
+          // Add capability row
+          React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { overflow: 'hidden' } },
+            React.createElement(Input, {
+              type: 'text', size: 'small',
+              placeholder: 'Name',
+              value: capName,
+              onChange: (v: string) => setCapName(v),
+              defaultBoxStyle: { flex: 1, minWidth: 0 },
+              inputBoxStyle: { maxWidth: 'none' },
+            }),
+            React.createElement(Input, {
+              type: 'text', size: 'small',
+              placeholder: 'Description',
+              value: capDescription,
+              onChange: (v: string) => setCapDescription(v),
+              onEnter: handleAddCapability,
+              defaultBoxStyle: { flex: 2, minWidth: 0 },
+              inputBoxStyle: { maxWidth: 'none' },
+            }),
+            React.createElement(IconButton, {
+              icon: 'add', size: 'sm', variant: 'outlined', color: 'primary',
+              onClick: handleAddCapability,
+              disabled: !capName.trim() || !capDescription.trim(),
+            }),
+          ),
+          // Capability list
+          ...capabilities.map((cap: { name: string; description: string }, idx: number) =>
+            React.createElement(Flex, {
+              key: `${cap.name}-${idx}`,
+              variant: 'row-center-start-nowrap-6',
+              style: { paddingLeft: '4px' },
+            },
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular', color: 'color-text-high',
+                style: { flexShrink: 0 },
+              }, `\u2022 ${cap.name}:`),
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular', color: 'color-text-medium',
+                style: { flex: 1, minWidth: 0 },
+              }, cap.description),
+              React.createElement(IconButton, {
+                icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
+                onClick: () => handleRemoveCapability(idx),
+              }),
+            ),
+          ),
+        ),
+      ),
+
+      // ── Instructions ──
+      React.createElement(Field, { label: 'Instructions' },
+        React.createElement(Input, {
+          type: 'text', size: 'small',
+          placeholder: 'Optional instructions for the bot',
+          value: instructions,
+          onChange: (v: string) => setInstructions(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // ── Require Approval ──
+      React.createElement(Field, { label: '' },
+        React.createElement(Checkbox, {
+          checked: requireApproval,
+          onChange: (v: boolean) => setRequireApproval(v),
+          label: 'Require approval',
+          size: 'sm',
+        }),
+      ),
+
+      // ── Save button ──
+      React.createElement(Flex, { variant: 'row-center-end-nowrap-8' },
+        React.createElement(Button, {
+          size: 'xs', variant: 'fill', color: 'primary',
+          onClick: handleSave,
+          disabled: !name.trim() || !botId || capabilities.length === 0,
+        }, mode === 'create' ? 'Create' : 'Save'),
+      ),
+    ),
+  );
+}
+
+export { ProfileEditor };
+export default ProfileEditor;
+module.exports = ProfileEditor;

package/src/ui/swarm-controls.tsx

@@ -12,16 +12,16 @@ const {
 // Types
 // ---------------------------------------------------------------------------
 
-interface BotSlotInfo {
-  botId: string;
-  botName: string;
+interface InstanceInfo {
+  instanceId: string;
+  profileId: string;
   status: 'idle' | 'executing' | 'paused' | 'stopped';
   currentTaskId?: string;
 }
 
 interface SwarmStatus {
   status: 'idle' | 'running' | 'paused' | 'stopping';
-  bots: Record<string, BotSlotInfo>;
+  instances: Record<string, InstanceInfo>;
   maxConcurrent: number;
   tasksCompleted: number;
   tasksFailed: number;
@@ -39,15 +39,13 @@ interface SwarmControlsProps {
 // Helpers
 // ---------------------------------------------------------------------------
 
-type StatusVariant = 'positive' | 'negative' | 'caution' | 'neutral' | 'info';
-
-function statusToVariant(status: string): StatusVariant {
+function swarmStatusToIconStatus(status: string): 'pending' | 'running' | 'completed' | 'failed' {
   switch (status) {
-    case 'running': return 'positive';
-    case 'paused': return 'caution';
-    case 'stopping': return 'negative';
+    case 'running': return 'running';
+    case 'paused': return 'pending';
+    case 'stopping': return 'failed';
     case 'idle':
-    default: return 'neutral';
+    default: return 'completed';
   }
 }
 
@@ -61,9 +59,9 @@ function statusLabel(status: string): string {
   }
 }
 
-function countActiveBots(bots: Record<string, BotSlotInfo>): { active: number; total: number } {
-  const entries = Object.values(bots);
-  const active = entries.filter(b => b.status === 'executing').length;
+function countActiveInstances(instances: Record<string, InstanceInfo>): { active: number; total: number } {
+  const entries = Object.values(instances);
+  const active = entries.filter(i => i.status === 'executing').length;
   return { active, total: entries.length };
 }
 
@@ -78,8 +76,8 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
   const [stopping, setStopping] = useState(false);
 
   const status = swarmStatus?.status ?? 'idle';
-  const bots = swarmStatus?.bots ?? {};
-  const { active, total } = countActiveBots(bots);
+  const instances = swarmStatus?.instances ?? {};
+  const { active, total } = countActiveInstances(instances);
 
   const isIdle = status === 'idle';
   const isRunning = status === 'running';
@@ -144,6 +142,12 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
 
   const handleStop = useCallback(async () => {
     setStopping(true);
+    const ok = await ctx.confirm('This will stop all running instances and abort active tasks.', {
+      title: 'Stop Swarm',
+      confirmLabel: 'Stop',
+      state: 'danger',
+    });
+    if (!ok) { setStopping(false); return; }
     try {
       const result = await ctx.callTool('fw_weaver_swarm_stop', {});
       const data = result as Record<string, unknown> | null;
@@ -167,9 +171,9 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
   return React.createElement(Flex, {
     variant: 'row-center-space-between-nowrap-10',
     style: {
-      flexShrink: 0,
       padding: '8px 16px',
       borderBottom: '1px solid var(--color-border-default)',
+      flexShrink: 0,
       backgroundColor: isRunning
         ? 'var(--color-brand-main-alpha-10)'
         : isPaused
@@ -180,19 +184,18 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
     // Left: status icon + label
     React.createElement(Flex, { variant: 'row-center-start-nowrap-8', style: { flexShrink: 0 } },
       React.createElement(StatusIcon, {
-        variant: statusToVariant(status),
-        size: 10,
+        status: swarmStatusToIconStatus(status),
+        size: 'sm',
       }),
       React.createElement(Typography, {
         variant: 'caption-bold',
-        style: { textTransform: 'capitalize' },
       }, statusLabel(status)),
     ),
 
     // Center: bot count + stats
     React.createElement(Flex, {
       variant: 'row-center-start-nowrap-12',
-      style: { flex: 1, fontSize: '12px' },
+      style: { flex: 1 },
     },
       total > 0 && React.createElement(Typography, {
         variant: 'caption-regular',
@@ -209,11 +212,12 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
     ),
 
     // Right: action buttons
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-6', style: { flexShrink: 0 } },
+    React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { flexShrink: 0 } },
       // Start / Resume button
       (isIdle || isPaused) && React.createElement(Button, {
-        size: 'sm',
-        variant: 'clear',
+        size: 'xs',
+        variant: 'outlined',
+        color: 'primary',
         onClick: isPaused ? handleResume : handleStart,
         loading: starting,
         disabled: anyLoading,
@@ -221,8 +225,9 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
 
       // Pause button (only when running)
       isRunning && React.createElement(Button, {
-        size: 'sm',
-        variant: 'clear',
+        size: 'xs',
+        variant: 'outlined',
+        color: 'warning',
         onClick: handlePause,
         loading: pausing,
         disabled: anyLoading,
@@ -230,8 +235,8 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
 
       // Stop button (when running or paused)
       (isRunning || isPaused) && React.createElement(Button, {
-        size: 'sm',
-        variant: 'clear',
+        size: 'xs',
+        variant: 'outlined',
         color: 'danger',
         onClick: handleStop,
         loading: stopping,
@@ -240,12 +245,11 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
 
       // Refresh button (always available)
       React.createElement(IconButton, {
-        icon: 'refresh',
+        icon: 'reset',
         size: 'xs',
-        variant: 'clear',
+        variant: 'outlined',
         onClick: onRefresh,
         disabled: anyLoading,
-        title: 'Refresh swarm status',
       }),
     ),
   );