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

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;

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;