@synergenius/flow-weaver-pack-weaver 0.9.200 → 0.9.201

package/src/ui/profile-editor.tsx

@@ -1,15 +1,12 @@
 /**
  * ProfileEditor — unified component for creating and editing bot profiles.
  * Supports the full ProfileBehavior system: phase config, escalation, scope.
- *
- * Pattern: CommonJS require for platform deps, React.createElement throughout.
  */
-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, ScrollArea, toast, usePackWorkspace,
-} = require('@fw/plugin-ui-kit');
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Flex, Typography, Input, Button, IconButton, Icon, Checkbox, Field, Table,
+  IconPicker, ColorPicker, Switch, ToggleGroup, ScrollArea, toast, usePackWorkspace,
+} from '@fw/plugin-ui-kit';
 
 import { ICON_CATALOG, BOT_COLORS } from './bot-constants';
 import { BUILT_IN_CAPABILITIES } from '../bot/capability-registry';
@@ -366,11 +363,13 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
   }, [profileId, callTool, onDelete, ctx]);
 
   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...'),
+    return (
+      <Flex
+        variant="column-center-center-nowrap-12"
+        style={{ padding: '24px 16px' }}
+      >
+        <Typography variant="caption-regular" color="color-text-subtle">Loading profile...</Typography>
+      </Flex>
     );
   }
 
@@ -380,369 +379,453 @@ function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }: Pr
     const currentTier = phase.tier ?? 'standard';
     const ro = !isCustom;
 
-    return React.createElement(Flex, {
-      key: phaseName,
-      variant: 'row-center-space-between-nowrap-8',
-      style: { minHeight: 30, padding: '2px 0' },
-    },
-      React.createElement(Flex, { variant: 'row-center-start-nowrap-8', style: { minWidth: 100 } },
-        React.createElement(Switch, {
-          checked: phase.enabled,
-          size: 'small',
-          readOnly: ro,
-          onChange: ro ? undefined : (v: boolean) => updatePhase(phaseName as keyof BehaviorState, 'enabled', v),
-        }),
-        React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: phase.enabled ? 'color-text-high' : 'color-text-subtle',
-        }, label),
-      ),
-      isLlmPhase && React.createElement(ToggleGroup, {
-        options: [
-          { label: 'Fast', value: 'fast', icon: 'speed', selected: currentTier === 'fast', disabled: !phase.enabled },
-          { label: 'Mid', value: 'standard', icon: 'balance', selected: currentTier === 'standard', disabled: !phase.enabled },
-          { label: 'Smart', value: 'powerful', icon: 'psychology', selected: currentTier === 'powerful', disabled: !phase.enabled },
-        ],
-        onSelect: (v: string) => updatePhase(phaseName as keyof BehaviorState, 'tier', v),
-        readOnly: ro,
-        size: 'tiny',
-      }),
+    return (
+      <Flex
+        key={phaseName}
+        variant="row-center-space-between-nowrap-8"
+        style={{ minHeight: 30, padding: '2px 0' }}
+      >
+        <Flex variant="row-center-start-nowrap-8" style={{ minWidth: 100 }}>
+          <Switch
+            checked={phase.enabled}
+            size="small"
+            readOnly={ro}
+            onChange={ro ? undefined : (v: boolean) => updatePhase(phaseName as keyof BehaviorState, 'enabled', v)}
+          />
+          <Typography
+            variant="smallCaption-regular"
+            color={phase.enabled ? 'color-text-high' : 'color-text-subtle'}
+          >
+            {label}
+          </Typography>
+        </Flex>
+        {isLlmPhase && (
+          <ToggleGroup
+            options={[
+              { label: 'Fast', value: 'fast', icon: 'speed', selected: currentTier === 'fast', disabled: !phase.enabled },
+              { label: 'Mid', value: 'standard', icon: 'balance', selected: currentTier === 'standard', disabled: !phase.enabled },
+              { label: 'Smart', value: 'powerful', icon: 'psychology', selected: currentTier === 'powerful', disabled: !phase.enabled },
+            ]}
+            onSelect={(v: string) => updatePhase(phaseName as keyof BehaviorState, 'tier', v)}
+            readOnly={ro}
+            size="tiny"
+          />
+        )}
+      </Flex>
     );
   };
 
   // --- 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(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' },
-        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',
-        }),
-      ),
-
-      // ── Preset (ToggleGroup with Custom option) ──
-      React.createElement(Field, { label: 'Preset', align: 'start' },
-        React.createElement(ToggleGroup, {
-          options: [
-            { label: 'Fast', value: 'frugal', icon: 'speed', selected: preset === 'frugal' },
-            { label: 'Mid', value: 'balanced', icon: 'balance', selected: preset === 'balanced' },
-            { label: 'Smart', value: 'performance', icon: 'psychology', selected: preset === 'performance' },
-            { label: 'Custom', value: 'custom', icon: 'settings', selected: preset === 'custom' },
-          ],
-          onSelect: handlePresetChange,
-          size: 'extraSmall',
-        }),
-      ),
-
-      // ── 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, {
-          variant: 'column-stretch-start-nowrap-6',
-        },
-          ...Object.entries(behavior).filter(([k]) => !['maxAttempts', 'onExhausted', 'blockedPaths', 'allowedPaths'].includes(k)).map(([phaseName, phase]) => {
-            const phaseObj = phase as { enabled?: boolean; tier?: string };
-            const isLlm = phaseObj.tier !== undefined;
-            const label = phaseName.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()).trim();
-            return phaseRow(phaseName, label, isLlm);
-          }),
-        ),
-      ),
-
-      // ── Escalation (always visible, readOnly when preset) ──
-      React.createElement(Field, { label: 'Retries', align: 'start' },
-        React.createElement(Flex, {
-          variant: 'column-stretch-start-nowrap-8',
-        },
-          React.createElement(Field, { label: 'Max attempts', labelWidth: 100, align: 'center' },
-            React.createElement(Input, {
-              type: 'number', size: 'small',
-              value: String(behavior.maxAttempts),
-              readOnly: !isCustom,
-              onChange: isCustom ? (v: string) => updateEscalation('maxAttempts', Math.max(1, parseInt(v) || 1)) : undefined,
-              defaultBoxStyle: { width: 60 },
-            }),
-          ),
-          React.createElement(Field, { label: 'On exhausted', labelWidth: 100, align: 'start' },
-            React.createElement(ToggleGroup, {
-              options: [
-                { label: 'Block', value: 'block', icon: 'block', selected: behavior.onExhausted === 'block' },
-                { label: 'Reassign', value: 'reassign', icon: 'sync', selected: behavior.onExhausted === 'reassign' },
-                { label: 'Notify', value: 'notify', icon: 'notifications', selected: behavior.onExhausted === 'notify' },
-              ],
-              onSelect: (v: string) => updateEscalation('onExhausted', v),
-              readOnly: !isCustom,
-              size: 'extraSmall',
-            }),
-          ),
-        ),
-      ),
-
-      // ── Scope Constraints (collapsible) ──
-      // ── Custom: Scope Constraints (inline) ──
-      isCustom && React.createElement(Field, { label: 'Scope', align: 'start' },
-        React.createElement(Flex, {
-          variant: 'column-stretch-start-nowrap-8',
-        },
-          // Blocked paths
-          React.createElement(Field, { label: 'Blocked', labelWidth: 70, align: 'start' },
-            React.createElement(Flex, { variant: 'column-stretch-start-nowrap-4' },
-              React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
-                React.createElement(Input, {
-                  type: 'text', size: 'small', placeholder: 'e.g. src/',
-                  value: blockedInput, onChange: (v: string) => setBlockedInput(v),
-                  onEnter: () => handleAddScopePath('blocked'),
-                  defaultBoxStyle: { flex: 1, minWidth: 0 }, inputBoxStyle: { maxWidth: 'none' },
-                }),
-                React.createElement(IconButton, {
-                  icon: 'add', size: 'sm', variant: 'outlined', color: 'primary',
-                  onClick: () => handleAddScopePath('blocked'), disabled: !blockedInput.trim(),
-                }),
-              ),
-              ...behavior.blockedPaths.map((p: string, i: number) =>
-                React.createElement(Flex, { key: `b-${p}-${i}`, variant: 'row-center-start-nowrap-6' },
-                  React.createElement(Icon, { name: 'block', size: 12, color: 'color-status-negative' }),
-                  React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high', style: { flex: 1 } }, p),
-                  React.createElement(IconButton, {
-                    icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
-                    onClick: () => handleRemoveScopePath('blocked', i),
-                  }),
-                ),
-              ),
-            ),
-          ),
-
-          // Allowed paths
-          React.createElement(Field, { label: 'Allowed', labelWidth: 70, align: 'start' },
-            React.createElement(Flex, { variant: 'column-stretch-start-nowrap-4' },
-              React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
-                React.createElement(Input, {
-                  type: 'text', size: 'small', placeholder: 'e.g. config/',
-                  value: allowedInput, onChange: (v: string) => setAllowedInput(v),
-                  onEnter: () => handleAddScopePath('allowed'),
-                  defaultBoxStyle: { flex: 1, minWidth: 0 }, inputBoxStyle: { maxWidth: 'none' },
-                }),
-                React.createElement(IconButton, {
-                  icon: 'add', size: 'sm', variant: 'outlined', color: 'primary',
-                  onClick: () => handleAddScopePath('allowed'), disabled: !allowedInput.trim(),
-                }),
-              ),
-              ...behavior.allowedPaths.map((p: string, i: number) =>
-                React.createElement(Flex, { key: `a-${p}-${i}`, variant: 'row-center-start-nowrap-6' },
-                  React.createElement(Icon, { name: 'checkCircle', size: 12, color: 'color-status-positive' }),
-                  React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high', style: { flex: 1 } }, p),
-                  React.createElement(IconButton, {
-                    icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
-                    onClick: () => handleRemoveScopePath('allowed', i),
-                  }),
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
-
-      // ── Capabilities ──
-      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: { minWidth: 0 } },
-            React.createElement(Input, {
-              type: 'text', size: 'small', placeholder: 'Name',
-              value: capName, onChange: (v: string) => setCapName(v),
-              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: '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
-          capabilities.length > 0 && React.createElement(Table, {
-            size: 'compact',
-            showHeader: false,
-            data: capabilities,
-            getRowKey: (_row: { name: string }, i: number) => `cap-${i}`,
-            columns: [
-              {
-                key: 'name', header: 'Name', width: '30%',
-                render: (val: unknown) => React.createElement('div', { style: { lineHeight: '28px' } }, String(val)),
-              },
-              {
-                key: 'description', header: 'Description',
-                render: (val: unknown) => React.createElement('div', { style: { lineHeight: '28px' } }, String(val)),
-              },
-              {
-                key: 'actions', header: '', width: '32px', align: 'right',
-                render: (_val: unknown, _row: { name: string; description: string }, idx: number) =>
-                  React.createElement(IconButton, {
-                    icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
-                    onClick: () => handleRemoveCapability(idx),
-                  }),
-              },
-            ],
-          }),
-        ),
-      ),
-
-      // ── Instructions (multiline) ──
-      React.createElement(Field, { label: 'Instructions', align: 'start' },
-        React.createElement(Input, {
-          type: 'text', size: 'small', multiline: true,
-          placeholder: 'Behavioral protocol for this profile (optional)',
-          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'),
-      ),
-    ),
-    ),
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {/* Header bar */}
+      <Flex
+        variant="row-center-space-between-nowrap-8"
+        style={{ padding: '8px 16px', flexShrink: 0, borderBottom: '1px solid var(--color-border-default)' }}
+      >
+        <Flex variant="row-center-start-nowrap-8">
+          <IconButton
+            icon="back"
+            size="xs"
+            variant="clear"
+            onClick={onCancel}
+            title="Back"
+          />
+          <Typography variant="caption-thick" color="color-text-high">
+            {mode === 'create' ? 'Create Profile' : 'Edit Profile'}
+          </Typography>
+        </Flex>
+        {mode === 'edit' && onDelete && (
+          <IconButton
+            icon="outlinedDelete"
+            size="sm"
+            variant="clear"
+            color="danger"
+            onClick={handleDelete}
+            title="Delete profile"
+          />
+        )}
+      </Flex>
+
+      {/* Scrollable form body */}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <Flex
+          variant="column-stretch-start-nowrap-10"
+          style={{ padding: '12px 16px' }}
+        >
+          {/* Name */}
+          <Field label="Name">
+            <Input
+              type="text"
+              size="small"
+              placeholder="Profile name"
+              value={name}
+              onChange={(v: string) => setName(v)}
+              defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+              inputBoxStyle={{ maxWidth: 'none' }}
+            />
+          </Field>
+
+          {/* Description */}
+          <Field label="Description">
+            <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' }}
+            />
+          </Field>
+
+          {/* Bot */}
+          <Field label="Bot">
+            <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 }}
+            />
+          </Field>
+
+          {/* Icon */}
+          <Field label="Icon" align="start">
+            <IconPicker
+              catalog={ICON_CATALOG}
+              value={icon}
+              onChange={(v: string) => setIcon(v)}
+              accentColor={color}
+              variant="inline"
+            />
+          </Field>
+
+          {/* Color */}
+          <Field label="Color" align="start">
+            <ColorPicker
+              colors={BOT_COLORS}
+              value={color}
+              onChange={(v: string) => setColor(v)}
+              variant="inline"
+            />
+          </Field>
+
+          {/* Preset (ToggleGroup with Custom option) */}
+          <Field label="Preset" align="start">
+            <ToggleGroup
+              options={[
+                { label: 'Fast', value: 'frugal', icon: 'speed', selected: preset === 'frugal' },
+                { label: 'Mid', value: 'balanced', icon: 'balance', selected: preset === 'balanced' },
+                { label: 'Smart', value: 'performance', icon: 'psychology', selected: preset === 'performance' },
+                { label: 'Custom', value: 'custom', icon: 'settings', selected: preset === 'custom' },
+              ]}
+              onSelect={handlePresetChange}
+              size="extraSmall"
+            />
+          </Field>
+
+          {/* Capabilities (checkbox grid) */}
+          <Field label="Capabilities" align="start">
+            <Flex variant="column-stretch-start-nowrap-2">
+              {BUILT_IN_CAPABILITIES.map((cap: { name: string; description: string }) => (
+                <Flex
+                  key={cap.name}
+                  variant="row-center-start-nowrap-8"
+                  style={{ minHeight: 28, padding: '1px 0' }}
+                >
+                  <Checkbox
+                    checked={knowledgeCaps.includes(cap.name)}
+                    onChange={() => handleToggleKnowledgeCap(cap.name)}
+                    disabled={cap.name === 'core' || !isCustom}
+                    size="sm"
+                  />
+                  <Typography
+                    variant="smallCaption-thick"
+                    color={knowledgeCaps.includes(cap.name) ? 'color-text-high' : 'color-text-subtle'}
+                    style={{ minWidth: 80 }}
+                  >
+                    {cap.name}
+                  </Typography>
+                  <Typography
+                    variant="smallCaption-regular"
+                    color="color-text-subtle"
+                    style={{ flex: 1 }}
+                  >
+                    {cap.description}
+                  </Typography>
+                </Flex>
+              ))}
+            </Flex>
+          </Field>
+
+          {/* Budget */}
+          <Field label="Budget" align="center">
+            <Flex variant="row-center-start-nowrap-6">
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                $
+              </Typography>
+              <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 }}
+              />
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                / task
+              </Typography>
+            </Flex>
+          </Field>
+
+          {/* Phase Configuration (always visible, readOnly when preset) */}
+          <Field label="Phases" align="start">
+            <Flex variant="column-stretch-start-nowrap-6">
+              {Object.entries(behavior).filter(([k]) => !['maxAttempts', 'onExhausted', 'blockedPaths', 'allowedPaths'].includes(k)).map(([phaseName, phase]) => {
+                const phaseObj = phase as { enabled?: boolean; tier?: string };
+                const isLlm = phaseObj.tier !== undefined;
+                const label = phaseName.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()).trim();
+                return phaseRow(phaseName, label, isLlm);
+              })}
+            </Flex>
+          </Field>
+
+          {/* Escalation (always visible, readOnly when preset) */}
+          <Field label="Retries" align="start">
+            <Flex variant="column-stretch-start-nowrap-8">
+              <Field label="Max attempts" labelWidth={100} align="center">
+                <Input
+                  type="number"
+                  size="small"
+                  value={String(behavior.maxAttempts)}
+                  readOnly={!isCustom}
+                  onChange={isCustom ? (v: string) => updateEscalation('maxAttempts', Math.max(1, parseInt(v) || 1)) : undefined}
+                  defaultBoxStyle={{ width: 60 }}
+                />
+              </Field>
+              <Field label="On exhausted" labelWidth={100} align="start">
+                <ToggleGroup
+                  options={[
+                    { label: 'Block', value: 'block', icon: 'block', selected: behavior.onExhausted === 'block' },
+                    { label: 'Reassign', value: 'reassign', icon: 'sync', selected: behavior.onExhausted === 'reassign' },
+                    { label: 'Notify', value: 'notify', icon: 'notifications', selected: behavior.onExhausted === 'notify' },
+                  ]}
+                  onSelect={(v: string) => updateEscalation('onExhausted', v)}
+                  readOnly={!isCustom}
+                  size="extraSmall"
+                />
+              </Field>
+            </Flex>
+          </Field>
+
+          {/* Custom: Scope Constraints (inline) */}
+          {isCustom && (
+            <Field label="Scope" align="start">
+              <Flex variant="column-stretch-start-nowrap-8">
+                {/* Blocked paths */}
+                <Field label="Blocked" labelWidth={70} align="start">
+                  <Flex variant="column-stretch-start-nowrap-4">
+                    <Flex variant="row-center-start-nowrap-4">
+                      <Input
+                        type="text"
+                        size="small"
+                        placeholder="e.g. src/"
+                        value={blockedInput}
+                        onChange={(v: string) => setBlockedInput(v)}
+                        onEnter={() => handleAddScopePath('blocked')}
+                        defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+                        inputBoxStyle={{ maxWidth: 'none' }}
+                      />
+                      <IconButton
+                        icon="add"
+                        size="sm"
+                        variant="outlined"
+                        color="primary"
+                        onClick={() => handleAddScopePath('blocked')}
+                        disabled={!blockedInput.trim()}
+                      />
+                    </Flex>
+                    {behavior.blockedPaths.map((p: string, i: number) => (
+                      <Flex key={`b-${p}-${i}`} variant="row-center-start-nowrap-6">
+                        <Icon name="block" size={12} color="color-status-negative" />
+                        <Typography variant="smallCaption-regular" color="color-text-high" style={{ flex: 1 }}>
+                          {p}
+                        </Typography>
+                        <IconButton
+                          icon="close"
+                          size="xs"
+                          variant="clear"
+                          color="danger"
+                          onClick={() => handleRemoveScopePath('blocked', i)}
+                        />
+                      </Flex>
+                    ))}
+                  </Flex>
+                </Field>
+
+                {/* Allowed paths */}
+                <Field label="Allowed" labelWidth={70} align="start">
+                  <Flex variant="column-stretch-start-nowrap-4">
+                    <Flex variant="row-center-start-nowrap-4">
+                      <Input
+                        type="text"
+                        size="small"
+                        placeholder="e.g. config/"
+                        value={allowedInput}
+                        onChange={(v: string) => setAllowedInput(v)}
+                        onEnter={() => handleAddScopePath('allowed')}
+                        defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+                        inputBoxStyle={{ maxWidth: 'none' }}
+                      />
+                      <IconButton
+                        icon="add"
+                        size="sm"
+                        variant="outlined"
+                        color="primary"
+                        onClick={() => handleAddScopePath('allowed')}
+                        disabled={!allowedInput.trim()}
+                      />
+                    </Flex>
+                    {behavior.allowedPaths.map((p: string, i: number) => (
+                      <Flex key={`a-${p}-${i}`} variant="row-center-start-nowrap-6">
+                        <Icon name="checkCircle" size={12} color="color-status-positive" />
+                        <Typography variant="smallCaption-regular" color="color-text-high" style={{ flex: 1 }}>
+                          {p}
+                        </Typography>
+                        <IconButton
+                          icon="close"
+                          size="xs"
+                          variant="clear"
+                          color="danger"
+                          onClick={() => handleRemoveScopePath('allowed', i)}
+                        />
+                      </Flex>
+                    ))}
+                  </Flex>
+                </Field>
+              </Flex>
+            </Field>
+          )}
+
+          {/* Capabilities */}
+          <Field label="Capabilities" align="start">
+            <Flex variant="column-stretch-start-nowrap-6">
+              {/* Add row */}
+              <Flex variant="row-center-start-nowrap-4" style={{ minWidth: 0 }}>
+                <Input
+                  type="text"
+                  size="small"
+                  placeholder="Name"
+                  value={capName}
+                  onChange={(v: string) => setCapName(v)}
+                  defaultBoxStyle={{ flex: '0 1 120px', minWidth: 0 }}
+                  inputBoxStyle={{ maxWidth: 'none', minWidth: 0 }}
+                />
+                <Input
+                  type="text"
+                  size="small"
+                  placeholder="Description"
+                  value={capDescription}
+                  onChange={(v: string) => setCapDescription(v)}
+                  onEnter={handleAddCapability}
+                  defaultBoxStyle={{ flex: '1 1 0', minWidth: 0 }}
+                  inputBoxStyle={{ maxWidth: 'none', minWidth: 0 }}
+                />
+                <IconButton
+                  icon="add"
+                  size="sm"
+                  variant="outlined"
+                  color="primary"
+                  onClick={handleAddCapability}
+                  disabled={!capName.trim() || !capDescription.trim()}
+                  style={{ flexShrink: 0 }}
+                />
+              </Flex>
+              {/* Table */}
+              {capabilities.length > 0 && (
+                <Table
+                  size="compact"
+                  showHeader={false}
+                  data={capabilities}
+                  getRowKey={(_row: { name: string }, i: number) => `cap-${i}`}
+                  columns={[
+                    {
+                      key: 'name', header: 'Name', width: '30%',
+                      render: (val: unknown) => <div style={{ lineHeight: '28px' }}>{String(val)}</div>,
+                    },
+                    {
+                      key: 'description', header: 'Description',
+                      render: (val: unknown) => <div style={{ lineHeight: '28px' }}>{String(val)}</div>,
+                    },
+                    {
+                      key: 'actions', header: '', width: '32px', align: 'right',
+                      render: (_val: unknown, _row: { name: string; description: string }, idx: number) => (
+                        <IconButton
+                          icon="close"
+                          size="xs"
+                          variant="clear"
+                          color="danger"
+                          onClick={() => handleRemoveCapability(idx)}
+                        />
+                      ),
+                    },
+                  ]}
+                />
+              )}
+            </Flex>
+          </Field>
+
+          {/* Instructions (multiline) */}
+          <Field label="Instructions" align="start">
+            <Input
+              type="text"
+              size="small"
+              multiline={true}
+              placeholder="Behavioral protocol for this profile (optional)"
+              value={instructions}
+              onChange={(v: string) => setInstructions(v)}
+              defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+              inputBoxStyle={{ maxWidth: 'none' }}
+            />
+          </Field>
+
+          {/* Require Approval */}
+          <Field label="">
+            <Checkbox
+              checked={requireApproval}
+              onChange={(v: boolean) => setRequireApproval(v)}
+              label="Require approval"
+              size="sm"
+            />
+          </Field>
+
+          {/* Save button */}
+          <Flex variant="row-center-end-nowrap-8">
+            <Button
+              size="xs"
+              variant="fill"
+              color="primary"
+              onClick={handleSave}
+              disabled={!name.trim() || !botId || capabilities.length === 0}
+            >
+              {mode === 'create' ? 'Create' : 'Save'}
+            </Button>
+          </Flex>
+        </Flex>
+      </ScrollArea>
+    </Flex>
   );
 }
 
 export { ProfileEditor };
 export default ProfileEditor;
-module.exports = ProfileEditor;