@synergenius/flow-weaver-pack-weaver 0.9.134 → 0.9.136

package/src/ui/capability-editor.tsx

@@ -0,0 +1,420 @@
+/**
+ * CapabilityEditor — CRUD screen for managing knowledge capabilities.
+ *
+ * Two-screen pattern:
+ *   List view  → shows all capabilities (built-in read-only, custom editable)
+ *   Detail view → full form for creating or editing a capability
+ *
+ * Pattern: CommonJS require for platform deps, React.createElement throughout.
+ */
+const React = require('react');
+const { useState, useCallback } = React;
+const {
+  Flex, Typography, Input, Button, IconButton, Icon, Field, Chip, Checkbox, Table, CodeBlock,
+  ScrollArea, toast, usePackWorkspace,
+} = require('@fw/plugin-ui-kit');
+
+import { BUILT_IN_CAPABILITIES } from '../bot/capability-registry';
+import { PLAN_OPERATIONS } from '../bot/operations';
+import { estimateTokens } from '../bot/estimate-tokens';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface CapabilityDef {
+  name: string;
+  description: string;
+  prompt: string;
+  tools?: string[];
+  builtIn?: boolean;
+}
+
+interface CapabilityEditorProps {
+  customCapabilities?: CapabilityDef[];
+  onSave?: (capabilities: CapabilityDef[]) => void;
+  onClose?: () => void;
+}
+
+// Available tool operations for the tool picker
+const AVAILABLE_TOOLS = [...PLAN_OPERATIONS] as string[];
+
+// ---------------------------------------------------------------------------
+// Detail screen — create or edit a single capability
+// ---------------------------------------------------------------------------
+
+function CapabilityDetail({
+  cap,
+  mode,
+  allNames,
+  onBack,
+  onSubmit,
+}: {
+  cap?: CapabilityDef;
+  mode: 'create' | 'edit' | 'view';
+  allNames: string[];
+  onBack: () => void;
+  onSubmit: (cap: CapabilityDef) => void;
+}) {
+  const [name, setName] = useState(cap?.name ?? '');
+  const [description, setDescription] = useState(cap?.description ?? '');
+  const [prompt, setPrompt] = useState(cap?.prompt ?? '');
+  const [tools, setTools] = useState(cap?.tools ?? ([] as string[]));
+
+  const readOnly = mode === 'view';
+  const isCreate = mode === 'create';
+
+  const handleToggleTool = useCallback((tool: string) => {
+    setTools((prev: string[]) =>
+      prev.includes(tool) ? prev.filter((t: string) => t !== tool) : [...prev, tool],
+    );
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    const trimName = name.trim().toLowerCase().replace(/\s+/g, '-');
+    if (!trimName || !description.trim()) {
+      toast('Name and description are required', { type: 'error' });
+      return;
+    }
+    if (isCreate && allNames.includes(trimName)) {
+      toast(`Capability "${trimName}" already exists`, { type: 'error' });
+      return;
+    }
+    onSubmit({
+      name: isCreate ? trimName : (cap?.name ?? trimName),
+      description: description.trim(),
+      prompt: prompt.trim() || `## ${description.trim()}`,
+      tools: tools.length > 0 ? tools : undefined,
+    });
+  }, [name, description, prompt, tools, isCreate, allNames, cap, onSubmit]);
+
+  const title = isCreate ? 'New Capability' : readOnly ? cap?.name ?? '' : `Edit: ${cap?.name ?? ''}`;
+
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
+    // Header
+    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: onBack, title: 'Back to list',
+        }),
+        React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' }, title),
+        readOnly && React.createElement(Chip, {
+          label: 'built-in', size: 'small', color: 'color-status-info',
+        }),
+      ),
+    ),
+
+    // Scrollable form
+    React.createElement(ScrollArea, { style: { flex: 1, minHeight: 0 } },
+      React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-10',
+        style: { padding: '12px 16px' },
+      },
+        // Name
+        React.createElement(Field, { label: 'Name' },
+          readOnly
+            ? React.createElement(Typography, {
+                variant: 'smallCaption-thick', color: 'color-text-high',
+                style: { padding: '4px 0' },
+              }, cap?.name)
+            : React.createElement(Input, {
+                type: 'text', size: 'small',
+                placeholder: 'e.g. api-design',
+                value: name, onChange: (v: string) => setName(v),
+                disabled: !isCreate,
+                defaultBoxStyle: { flex: 1, minWidth: 0 }, inputBoxStyle: { maxWidth: 'none' },
+              }),
+        ),
+
+        // Description
+        React.createElement(Field, { label: 'Description' },
+          readOnly
+            ? React.createElement(Typography, {
+                variant: 'smallCaption-regular', color: 'color-text-medium',
+                style: { padding: '4px 0' },
+              }, cap?.description)
+            : React.createElement(Input, {
+                type: 'text', size: 'small',
+                placeholder: 'What this capability provides',
+                value: description, onChange: (v: string) => setDescription(v),
+                defaultBoxStyle: { flex: 1, minWidth: 0 }, inputBoxStyle: { maxWidth: 'none' },
+              }),
+        ),
+
+        // Prompt
+        React.createElement(Field, { label: 'Prompt', align: 'start' },
+          readOnly
+            ? React.createElement(Typography, {
+                variant: 'smallCaption-regular', color: 'color-text-medium',
+                style: { whiteSpace: 'pre-wrap', lineHeight: 1.5 },
+              }, cap?.prompt)
+            : React.createElement(Input, {
+                type: 'text', size: 'small', multiline: true,
+                placeholder: 'Knowledge content (markdown) injected into the system prompt',
+                value: prompt, onChange: (v: string) => setPrompt(v),
+                defaultBoxStyle: { flex: 1, minWidth: 0 },
+                inputBoxStyle: { maxWidth: 'none', minHeight: 160 },
+              }),
+        ),
+
+        // Tools
+        React.createElement(Field, { label: 'Tools', align: 'start' },
+          React.createElement(Table, {
+            size: 'compact',
+            showHeader: false,
+            data: AVAILABLE_TOOLS.map((t: string) => ({
+              tool: t,
+              active: (readOnly ? (cap?.tools ?? []) : tools).includes(t),
+            })),
+            getRowKey: (row: { tool: string }) => row.tool,
+            columns: [
+              {
+                key: 'check', header: '', width: '28px',
+                render: (_v: unknown, row: { tool: string; active: boolean }) =>
+                  React.createElement('div', { style: { height: 20, display: 'flex', alignItems: 'center' } },
+                    React.createElement(Checkbox, {
+                      checked: row.active,
+                      disabled: readOnly,
+                      onChange: readOnly ? undefined : () => handleToggleTool(row.tool),
+                      size: 'sm',
+                    }),
+                  ),
+              },
+              {
+                key: 'tool', header: 'Tool',
+                render: (_v: unknown, row: { tool: string; active: boolean }) =>
+                  React.createElement('div', { style: { height: 20, display: 'flex', alignItems: 'center' } },
+                    React.createElement(Typography, {
+                      variant: 'smallCaption-regular',
+                      color: row.active ? 'color-text-high' : 'color-text-subtle',
+                    }, row.tool),
+                  ),
+              },
+            ],
+          }),
+        ),
+
+        // Token estimate
+        React.createElement(Field, { label: 'Est. tokens' },
+          React.createElement(Typography, {
+            variant: 'smallCaption-regular', color: 'color-text-subtle',
+          }, `~${estimateTokens(readOnly ? (cap?.prompt ?? '') : prompt)} tokens (approx.)`),
+        ),
+
+        // Submit button (not for view mode)
+        !readOnly && React.createElement(Flex, {
+          variant: 'row-center-end-nowrap-8',
+          style: { paddingTop: 4 },
+        },
+          React.createElement(Button, {
+            size: 'xs', variant: 'clear', color: 'secondary', onClick: onBack,
+          }, 'Cancel'),
+          React.createElement(Button, {
+            size: 'xs', variant: 'fill', color: 'primary',
+            onClick: handleSubmit,
+            disabled: readOnly || (!isCreate && !description.trim()) || (isCreate && (!name.trim() || !description.trim())),
+          }, isCreate ? 'Create' : 'Save'),
+        ),
+      ),
+    ),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// List screen — shows all capabilities
+// ---------------------------------------------------------------------------
+
+function CapabilityList({
+  allCaps,
+  onOpen,
+  onDelete,
+  onCreate,
+  onSaveAll,
+  onClose,
+  hasCustom,
+}: {
+  allCaps: CapabilityDef[];
+  onOpen: (name: string) => void;
+  onDelete: (name: string) => void;
+  onCreate: () => void;
+  onSaveAll?: () => void;
+  onClose?: () => void;
+  hasCustom: boolean;
+}) {
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
+    // Header
+    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' },
+        onClose && React.createElement(IconButton, {
+          icon: 'back', size: 'xs', variant: 'clear', onClick: onClose, title: 'Back',
+        }),
+        React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' }, 'Capabilities'),
+        React.createElement(Chip, {
+          label: `${allCaps.length}`,
+          size: 'small',
+          color: 'color-brand-main',
+        }),
+      ),
+      React.createElement(Flex, { variant: 'row-center-end-nowrap-6' },
+        onSaveAll && hasCustom && React.createElement(Button, {
+          size: 'xs', variant: 'outlined', color: 'primary', onClick: onSaveAll,
+        }, 'Save'),
+        React.createElement(Button, {
+          size: 'xs', variant: 'fill', color: 'primary', onClick: onCreate,
+        }, 'New'),
+      ),
+    ),
+
+    // Scrollable list
+    React.createElement(ScrollArea, { style: { flex: 1, minHeight: 0 } },
+      React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-2',
+        style: { padding: '8px 16px' },
+      },
+        ...allCaps.map((cap: CapabilityDef) =>
+          React.createElement(Flex, {
+            key: cap.name,
+            variant: 'row-center-space-between-nowrap-8',
+            style: {
+              padding: '7px 10px',
+              borderRadius: 6,
+              cursor: 'pointer',
+              border: '1px solid var(--color-border-default)',
+              transition: 'background-color 0.1s',
+            },
+            onClick: () => onOpen(cap.name),
+            onMouseEnter: (e: { currentTarget: HTMLElement }) => {
+              e.currentTarget.style.backgroundColor = 'var(--color-surface-hover)';
+            },
+            onMouseLeave: (e: { currentTarget: HTMLElement }) => {
+              e.currentTarget.style.backgroundColor = 'transparent';
+            },
+          },
+            // Left: icon + name + description
+            React.createElement(Flex, { variant: 'row-center-start-nowrap-8', style: { flex: 1, minWidth: 0 } },
+              React.createElement(Icon, {
+                name: cap.builtIn ? 'lock' : 'edit',
+                size: 13,
+                color: cap.builtIn ? 'color-text-subtle' : 'color-brand-main',
+              }),
+              React.createElement(Typography, {
+                variant: 'smallCaption-thick',
+                color: 'color-text-high',
+                style: { minWidth: 80, flexShrink: 0 },
+              }, cap.name),
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular',
+                color: 'color-text-subtle',
+                style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+              }, cap.description),
+            ),
+            // Right: chips + actions
+            React.createElement(Flex, { variant: 'row-center-end-nowrap-4', style: { flexShrink: 0 } },
+              cap.tools && cap.tools.length > 0 && React.createElement(Chip, {
+                label: `${cap.tools.length} tools`,
+                size: 'small',
+                color: 'color-status-positive',
+              }),
+              !cap.builtIn && React.createElement(IconButton, {
+                icon: 'outlinedDelete',
+                size: 'xs',
+                variant: 'clear',
+                color: 'danger',
+                onClick: (e: Event) => { e.stopPropagation(); onDelete(cap.name); },
+                title: 'Delete capability',
+              }),
+              React.createElement(Icon, {
+                name: 'chevronRight', size: 12, color: 'color-text-subtle',
+              }),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component — manages navigation between list and detail
+// ---------------------------------------------------------------------------
+
+function CapabilityEditor({ customCapabilities = [], onSave, onClose }: CapabilityEditorProps) {
+  const [customs, setCustoms] = useState(customCapabilities as CapabilityDef[]);
+  // screen: 'list' | { mode: 'create' } | { mode: 'view' | 'edit', name: string }
+  const [screen, setScreen] = useState('list' as 'list' | { mode: 'create' | 'view' | 'edit'; name?: string });
+
+  const allCaps: CapabilityDef[] = [
+    ...BUILT_IN_CAPABILITIES.map((c: { name: string; description: string; prompt: string; tools?: string[] }) => ({ ...c, builtIn: true })),
+    ...customs.map((c: CapabilityDef) => ({ ...c, builtIn: false })),
+  ];
+
+  const allNames = allCaps.map((c: CapabilityDef) => c.name);
+
+  const handleOpen = useCallback((name: string) => {
+    const cap = allCaps.find((c: CapabilityDef) => c.name === name);
+    if (!cap) return;
+    setScreen({ mode: cap.builtIn ? 'view' : 'edit', name });
+  }, [allCaps]);
+
+  const handleDelete = useCallback((name: string) => {
+    setCustoms((prev: CapabilityDef[]) => prev.filter((c: CapabilityDef) => c.name !== name));
+    toast(`Capability "${name}" deleted`, { type: 'success' });
+  }, []);
+
+  const handleSubmit = useCallback((cap: CapabilityDef) => {
+    if (typeof screen === 'object' && screen.mode === 'edit') {
+      setCustoms((prev: CapabilityDef[]) =>
+        prev.map((c: CapabilityDef) => c.name === cap.name ? cap : c),
+      );
+      toast(`Capability "${cap.name}" updated`, { type: 'success' });
+    } else {
+      setCustoms((prev: CapabilityDef[]) => [...prev, cap]);
+      toast(`Capability "${cap.name}" created`, { type: 'success' });
+    }
+    setScreen('list');
+  }, [screen]);
+
+  const handleSaveAll = useCallback(() => {
+    onSave?.(customs);
+    toast('Capabilities saved', { type: 'success' });
+  }, [customs, onSave]);
+
+  // Detail screen
+  if (typeof screen === 'object') {
+    const cap = screen.name ? allCaps.find((c: CapabilityDef) => c.name === screen.name) : undefined;
+    return React.createElement(CapabilityDetail, {
+      cap,
+      mode: screen.mode,
+      allNames,
+      onBack: () => setScreen('list'),
+      onSubmit: handleSubmit,
+    });
+  }
+
+  // List screen
+  return React.createElement(CapabilityList, {
+    allCaps,
+    onOpen: handleOpen,
+    onDelete: handleDelete,
+    onCreate: () => setScreen({ mode: 'create' }),
+    onSaveAll: onSave ? handleSaveAll : undefined,
+    onClose,
+    hasCustom: customs.length > 0,
+  });
+}
+
+export { CapabilityEditor };
+export default CapabilityEditor;
+module.exports = CapabilityEditor;

package/src/ui/profile-card.tsx

@@ -25,6 +25,8 @@ interface PhaseBehavior {
 }
 
 interface ProfileBehavior {
+  capabilities?: string[];
+  budget?: number;
   phases: Record<string, PhaseBehavior>;
   escalation: { maxAttempts: number; onExhausted: string };
   scope?: { allowedPaths?: string[]; blockedPaths?: string[] };
@@ -159,6 +161,24 @@ function ProfileCard({ profile, activeInstances, onEdit, onDelete }: ProfileCard
       ),
     ),
 
+    // Knowledge capabilities (from behavior)
+    behavior?.capabilities && behavior.capabilities.length > 0 && React.createElement(Field, { label: 'Knowledge', labelWidth: 90, align: 'start' },
+      React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
+        ...behavior.capabilities.map((capName: string) =>
+          React.createElement('span', { key: capName },
+            React.createElement(Chip, { label: capName, size: 'small', color: 'color-status-info' }),
+          ),
+        ),
+      ),
+    ),
+
+    // Budget (from behavior)
+    behavior?.budget && React.createElement(Field, { label: 'Budget', labelWidth: 90, align: 'center' },
+      React.createElement(Typography, {
+        variant: 'smallCaption-regular', color: 'color-text-high',
+      }, `$${behavior.budget.toFixed(2)}/task`),
+    ),
+
     // Strategy
     React.createElement(Field, { label: 'Strategy', labelWidth: 90, align: 'center' },
       React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },

package/src/ui/profile-editor.tsx

@@ -8,10 +8,12 @@ const React = require('react');
 const { useState, useEffect, useCallback } = React;
 const {
   Flex, Typography, Input, Button, IconButton, Icon, SectionTitle, Checkbox, Chip, Field, Table,
-  IconPicker, ColorPicker, Switch, ToggleGroup, CollapsibleSection, toast, usePackWorkspace,
+  IconPicker, ColorPicker, Switch, ToggleGroup, CollapsibleSection, ScrollArea, toast, usePackWorkspace,
 } = require('@fw/plugin-ui-kit');
 
 import { ICON_CATALOG, BOT_COLORS } from './bot-constants';
+import { BUILT_IN_CAPABILITIES } from '../bot/capability-registry';
+import { STRATEGY_CAPABILITIES, STRATEGY_BUDGETS } from '../bot/behavior-defaults';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -121,6 +123,8 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
   const [capDescription, setCapDescription] = useState('');
   const [instructions, setInstructions] = useState('');
   const [requireApproval, setRequireApproval] = useState(false);
+  const [knowledgeCaps, setKnowledgeCaps] = useState(() => [...STRATEGY_CAPABILITIES.balanced]);
+  const [budget, setBudget] = useState(STRATEGY_BUDGETS.balanced);
   const [behavior, setBehavior] = useState(defaultBehaviorForStrategy('balanced') as BehaviorState);
   const [blockedInput, setBlockedInput] = useState('');
   const [allowedInput, setAllowedInput] = useState('');
@@ -135,6 +139,8 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
     if (p !== 'custom') {
       setCostStrategy(p);
       setBehavior(defaultBehaviorForStrategy(p));
+      setKnowledgeCaps([...STRATEGY_CAPABILITIES[p]]);
+      setBudget(STRATEGY_BUDGETS[p]);
     }
   }, []);
 
@@ -185,6 +191,24 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
         setInstructions((prefs.instructions as string) || '');
         setRequireApproval(!!(prefs.requireApproval));
 
+        // Load knowledge capabilities and budget from behavior
+        if (prefs.behavior) {
+          const b = prefs.behavior as Record<string, unknown>;
+          if (Array.isArray(b.capabilities)) {
+            setKnowledgeCaps(b.capabilities as string[]);
+          } else {
+            setKnowledgeCaps([...STRATEGY_CAPABILITIES[strat]]);
+          }
+          if (typeof b.budget === 'number') {
+            setBudget(b.budget as number);
+          } else {
+            setBudget(STRATEGY_BUDGETS[strat]);
+          }
+        } else {
+          setKnowledgeCaps([...STRATEGY_CAPABILITIES[strat]]);
+          setBudget(STRATEGY_BUDGETS[strat]);
+        }
+
         // Load behavior config — dynamic phases from whatever the profile has
         if (prefs.behavior) {
           const b = prefs.behavior as Record<string, unknown>;
@@ -233,6 +257,17 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
     setCapabilities((prev: Array<{ name: string; description: string }>) => prev.filter((_: unknown, i: number) => i !== index));
   }, []);
 
+  // --- Knowledge capability toggle ---
+  const handleToggleKnowledgeCap = useCallback((capName: string) => {
+    setKnowledgeCaps((prev: string[]) => {
+      if (capName === 'core') return prev; // core cannot be toggled off
+      return prev.includes(capName)
+        ? prev.filter((n: string) => n !== capName)
+        : [...prev, capName];
+    });
+    setPreset('custom');
+  }, []);
+
   // --- Scope paths ---
   const handleAddScopePath = useCallback((type: 'blocked' | 'allowed') => {
     const input = type === 'blocked' ? blockedInput : allowedInput;
@@ -272,6 +307,8 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
     }
 
     const behaviorPayload = {
+      capabilities: knowledgeCaps,
+      budget,
       phases,
       escalation: { maxAttempts: behavior.maxAttempts, onExhausted: behavior.onExhausted },
       scope: (behavior.blockedPaths.length > 0 || behavior.allowedPaths.length > 0)
@@ -310,7 +347,7 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
     } 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, behavior, callTool, onSave]);
+  }, [mode, profileId, name, description, botId, icon, color, costStrategy, capabilities, knowledgeCaps, budget, instructions, requireApproval, behavior, callTool, onSave]);
 
   // --- Delete ---
   const handleDelete = useCallback(async () => {
@@ -397,9 +434,12 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
     ),
 
     // ── Scrollable form body ──
+    React.createElement(ScrollArea, {
+      style: { flex: 1, minHeight: 0 },
+    },
     React.createElement(Flex, {
       variant: 'column-stretch-start-nowrap-10',
-      style: { flex: 1, minHeight: 0, overflow: 'auto', padding: '12px 16px' },
+      style: { padding: '12px 16px' },
     },
 
       // ── Name ──
@@ -461,6 +501,58 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
         }),
       ),
 
+      // ── Knowledge Capabilities (checkbox grid) ──
+      React.createElement(Field, { label: 'Knowledge', align: 'start' },
+        React.createElement(Flex, { variant: 'column-stretch-start-nowrap-2' },
+          ...BUILT_IN_CAPABILITIES.map((cap: { name: string; description: string }) =>
+            React.createElement(Flex, {
+              key: cap.name,
+              variant: 'row-center-start-nowrap-8',
+              style: { minHeight: 28, padding: '1px 0' },
+            },
+              React.createElement(Checkbox, {
+                checked: knowledgeCaps.includes(cap.name),
+                onChange: () => handleToggleKnowledgeCap(cap.name),
+                disabled: cap.name === 'core' || !isCustom,
+                size: 'sm',
+              }),
+              React.createElement(Typography, {
+                variant: 'smallCaption-thick',
+                color: knowledgeCaps.includes(cap.name) ? 'color-text-high' : 'color-text-subtle',
+                style: { minWidth: 80 },
+              }, cap.name),
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular',
+                color: 'color-text-subtle',
+                style: { flex: 1 },
+              }, cap.description),
+            ),
+          ),
+        ),
+      ),
+
+      // ── Budget ──
+      React.createElement(Field, { label: 'Budget', align: 'center' },
+        React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
+          React.createElement(Typography, {
+            variant: 'smallCaption-regular', color: 'color-text-subtle',
+          }, '$'),
+          React.createElement(Input, {
+            type: 'number', size: 'small',
+            value: String(budget),
+            readOnly: !isCustom,
+            onChange: isCustom ? (v: string) => {
+              const n = parseFloat(v);
+              if (!isNaN(n) && n >= 0) setBudget(n);
+            } : undefined,
+            defaultBoxStyle: { width: 80 },
+          }),
+          React.createElement(Typography, {
+            variant: 'smallCaption-regular', color: 'color-text-subtle',
+          }, '/ task'),
+        ),
+      ),
+
       // ── Phase Configuration (always visible, readOnly when preset) ──
       React.createElement(Field, { label: 'Phases', align: 'start' },
         React.createElement(Flex, {
@@ -572,21 +664,22 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
       React.createElement(Field, { label: 'Capabilities', align: 'start' },
         React.createElement(Flex, { variant: 'column-stretch-start-nowrap-6' },
           // Add row
-          React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { overflow: 'hidden' } },
+          React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { minWidth: 0 } },
             React.createElement(Input, {
               type: 'text', size: 'small', placeholder: 'Name',
               value: capName, onChange: (v: string) => setCapName(v),
-              defaultBoxStyle: { flex: 1, minWidth: 0 }, inputBoxStyle: { maxWidth: 'none' },
+              defaultBoxStyle: { flex: '0 1 120px', minWidth: 0 }, inputBoxStyle: { maxWidth: 'none', minWidth: 0 },
             }),
             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' },
+              defaultBoxStyle: { flex: '1 1 0', minWidth: 0 }, inputBoxStyle: { maxWidth: 'none', minWidth: 0 },
             }),
             React.createElement(IconButton, {
               icon: 'add', size: 'sm', variant: 'outlined', color: 'primary',
               onClick: handleAddCapability, disabled: !capName.trim() || !capDescription.trim(),
+              style: { flexShrink: 0 },
             }),
           ),
           // Table
@@ -646,6 +739,7 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
         }, mode === 'create' ? 'Create' : 'Save'),
       ),
     ),
+    ),
   );
 }