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

package/src/ui/capability-editor.tsx

@@ -4,15 +4,12 @@
  * 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 {
+import React, { useState, useCallback } from 'react';
+import {
   Flex, Typography, Input, Button, IconButton, Icon, Field, Chip, Checkbox, Table, CodeBlock,
   ScrollArea, toast, usePackWorkspace,
-} = require('@fw/plugin-ui-kit');
+} from '@fw/plugin-ui-kit';
 
 import { BUILT_IN_CAPABILITIES } from '../bot/capability-registry';
 import { PLAN_OPERATIONS } from '../bot/operations';
@@ -22,11 +19,18 @@ import { estimateTokens } from '../bot/estimate-tokens';
 // Types
 // ---------------------------------------------------------------------------
 
+interface AcceptanceCheck {
+  name: string;
+  command: string;
+  condition?: string;
+}
+
 interface CapabilityDef {
   name: string;
   description: string;
   prompt: string;
   tools?: string[];
+  acceptance?: AcceptanceCheck[];
   builtIn?: boolean;
 }
 
@@ -60,6 +64,7 @@ function CapabilityDetail({
   const [description, setDescription] = useState(cap?.description ?? '');
   const [prompt, setPrompt] = useState(cap?.prompt ?? '');
   const [tools, setTools] = useState(cap?.tools ?? ([] as string[]));
+  const [acceptance, setAcceptance] = useState<AcceptanceCheck[]>(cap?.acceptance ?? []);
 
   const readOnly = mode === 'view';
   const isCreate = mode === 'create';
@@ -85,144 +90,258 @@ function CapabilityDetail({
       description: description.trim(),
       prompt: prompt.trim() || `## ${description.trim()}`,
       tools: tools.length > 0 ? tools : undefined,
+      acceptance: acceptance.length > 0 ? acceptance.filter(a => a.name && a.command) : undefined,
     });
-  }, [name, description, prompt, tools, isCreate, allNames, cap, onSubmit]);
+  }, [name, description, prompt, tools, acceptance, 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',
-                    }),
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {/* Header */}
+      <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={onBack}
+            title="Back to list"
+          />
+          <Typography variant="caption-thick" color="color-text-high">{title}</Typography>
+          {readOnly && (
+            <Chip label="built-in" size="small" color="color-status-info" />
+          )}
+        </Flex>
+      </Flex>
+
+      {/* Scrollable form */}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <Flex
+          variant="column-stretch-start-nowrap-10"
+          style={{ padding: '12px 16px' }}
+        >
+          {/* Name */}
+          <Field label="Name">
+            {readOnly
+              ? (
+                <Typography
+                  variant="smallCaption-thick"
+                  color="color-text-high"
+                  style={{ padding: '4px 0' }}
+                >
+                  {cap?.name}
+                </Typography>
+              )
+              : (
+                <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' }}
+                />
+              )}
+          </Field>
+
+          {/* Description */}
+          <Field label="Description">
+            {readOnly
+              ? (
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-text-medium"
+                  style={{ padding: '4px 0' }}
+                >
+                  {cap?.description}
+                </Typography>
+              )
+              : (
+                <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' }}
+                />
+              )}
+          </Field>
+
+          {/* Prompt */}
+          <Field label="Prompt" align="start">
+            {readOnly
+              ? (
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-text-medium"
+                  style={{ whiteSpace: 'pre-wrap', lineHeight: 1.5 }}
+                >
+                  {cap?.prompt}
+                </Typography>
+              )
+              : (
+                <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 }}
+                />
+              )}
+          </Field>
+
+          {/* Tools */}
+          <Field label="Tools" align="start">
+            <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 }) => (
+                    <div style={{ height: 20, display: 'flex', alignItems: 'center' }}>
+                      <Checkbox
+                        checked={row.active}
+                        disabled={readOnly}
+                        onChange={readOnly ? undefined : () => handleToggleTool(row.tool)}
+                        size="sm"
+                      />
+                    </div>
                   ),
-              },
-              {
-                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),
+                },
+                {
+                  key: 'tool', header: 'Tool',
+                  render: (_v: unknown, row: { tool: string; active: boolean }) => (
+                    <div style={{ height: 20, display: 'flex', alignItems: 'center' }}>
+                      <Typography
+                        variant="smallCaption-regular"
+                        color={row.active ? 'color-text-high' : 'color-text-subtle'}
+                      >
+                        {row.tool}
+                      </Typography>
+                    </div>
                   ),
-              },
-            ],
-          }),
-        ),
-
-        // 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'),
-        ),
-      ),
-    ),
+                },
+              ]}
+            />
+          </Field>
+
+          {/* Acceptance Criteria */}
+          <Field label="Acceptance Checks">
+            <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ marginBottom: 4 }}>
+              Shell commands that auto-run after every task using this capability. Exit 0 = pass.
+            </Typography>
+            {(readOnly ? (cap?.acceptance ?? []) : acceptance).map((check, idx) => (
+              <Flex key={idx} variant="row-center-start-nowrap-4" style={{ marginBottom: 4 }}>
+                <Input
+                  size="xs"
+                  placeholder="Check name"
+                  value={check.name}
+                  readOnly={readOnly}
+                  style={{ width: 120 }}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    const updated = [...acceptance];
+                    updated[idx] = { ...updated[idx], name: e.target.value };
+                    setAcceptance(updated);
+                  }}
+                />
+                <Input
+                  size="xs"
+                  placeholder="Shell command (exit 0 = pass)"
+                  value={check.command}
+                  readOnly={readOnly}
+                  style={{ flex: 1 }}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    const updated = [...acceptance];
+                    updated[idx] = { ...updated[idx], command: e.target.value };
+                    setAcceptance(updated);
+                  }}
+                />
+                <Input
+                  size="xs"
+                  placeholder="Condition (optional file)"
+                  value={check.condition ?? ''}
+                  readOnly={readOnly}
+                  style={{ width: 140 }}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    const updated = [...acceptance];
+                    updated[idx] = { ...updated[idx], condition: e.target.value || undefined };
+                    setAcceptance(updated);
+                  }}
+                />
+                {!readOnly && (
+                  <IconButton
+                    size="xs"
+                    variant="clear"
+                    color="danger"
+                    onClick={() => setAcceptance(acceptance.filter((_, i) => i !== idx))}
+                  >
+                    <Icon name="delete" size={14} />
+                  </IconButton>
+                )}
+              </Flex>
+            ))}
+            {!readOnly && (
+              <Button
+                size="xs"
+                variant="clear"
+                color="primary"
+                onClick={() => setAcceptance([...acceptance, { name: '', command: '' }])}
+              >
+                + Add check
+              </Button>
+            )}
+          </Field>
+
+          {/* Token estimate */}
+          <Field label="Est. tokens">
+            <Typography variant="smallCaption-regular" color="color-text-subtle">
+              {`~${estimateTokens(readOnly ? (cap?.prompt ?? '') : prompt)} tokens (approx.)`}
+            </Typography>
+          </Field>
+
+          {/* Submit button (not for view mode) */}
+          {!readOnly && (
+            <Flex
+              variant="row-center-end-nowrap-8"
+              style={{ paddingTop: 4 }}
+            >
+              <Button size="xs" variant="clear" color="secondary" onClick={onBack}>
+                Cancel
+              </Button>
+              <Button
+                size="xs"
+                variant="fill"
+                color="primary"
+                onClick={handleSubmit}
+                disabled={readOnly || (!isCreate && !description.trim()) || (isCreate && (!name.trim() || !description.trim()))}
+              >
+                {isCreate ? 'Create' : 'Save'}
+              </Button>
+            </Flex>
+          )}
+        </Flex>
+      </ScrollArea>
+    </Flex>
   );
 }
 
@@ -247,102 +366,107 @@ function CapabilityList({
   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',
-              }),
-            ),
-          ),
-        ),
-      ),
-    ),
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {/* Header */}
+      <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">
+          {onClose && (
+            <IconButton icon="back" size="xs" variant="clear" onClick={onClose} title="Back" />
+          )}
+          <Typography variant="caption-thick" color="color-text-high">Capabilities</Typography>
+          <Chip
+            label={`${allCaps.length}`}
+            size="small"
+            color="color-brand-main"
+          />
+        </Flex>
+        <Flex variant="row-center-end-nowrap-6">
+          {onSaveAll && hasCustom && (
+            <Button size="xs" variant="outlined" color="primary" onClick={onSaveAll}>
+              Save
+            </Button>
+          )}
+          <Button size="xs" variant="fill" color="primary" onClick={onCreate}>
+            New
+          </Button>
+        </Flex>
+      </Flex>
+
+      {/* Scrollable list */}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <Flex
+          variant="column-stretch-start-nowrap-2"
+          style={{ padding: '8px 16px' }}
+        >
+          {allCaps.map((cap: CapabilityDef) => (
+            <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: name + description */}
+              <Flex variant="row-center-start-nowrap-8" style={{ flex: 1, minWidth: 0 }}>
+                <Typography
+                  variant="smallCaption-thick"
+                  color="color-text-high"
+                  style={{ minWidth: 80, flexShrink: 0 }}
+                >
+                  {cap.name}
+                </Typography>
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-text-subtle"
+                  style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                >
+                  {cap.description}
+                </Typography>
+              </Flex>
+              {/* Right: chips + actions */}
+              <Flex variant="row-center-end-nowrap-4" style={{ flexShrink: 0 }}>
+                {cap.tools && cap.tools.length > 0 && (
+                  <Chip
+                    label={`${cap.tools.length} tools`}
+                    size="small"
+                    color="color-status-positive"
+                  />
+                )}
+                {!cap.builtIn && (
+                  <IconButton
+                    icon="outlinedDelete"
+                    size="xs"
+                    variant="clear"
+                    color="danger"
+                    onClick={(e: Event) => { e.stopPropagation(); onDelete(cap.name); }}
+                    title="Delete capability"
+                  />
+                )}
+                <Icon name="chevronRight" size={12} color="color-text-subtle" />
+              </Flex>
+            </Flex>
+          ))}
+        </Flex>
+      </ScrollArea>
+    </Flex>
   );
 }
 
@@ -365,7 +489,7 @@ function CapabilityEditor({ customCapabilities = [], onSave, onClose }: Capabili
   const handleOpen = useCallback((name: string) => {
     const cap = allCaps.find((c: CapabilityDef) => c.name === name);
     if (!cap) return;
-    setScreen({ mode: cap.builtIn ? 'view' : 'edit', name });
+    setScreen({ mode: 'edit', name });
   }, [allCaps]);
 
   const handleDelete = useCallback((name: string) => {
@@ -375,16 +499,24 @@ function CapabilityEditor({ customCapabilities = [], onSave, onClose }: Capabili
 
   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' });
+      // Check if this is a custom capability being edited or a built-in being overridden
+      const isExistingCustom = customs.some((c: CapabilityDef) => c.name === cap.name);
+      if (isExistingCustom) {
+        setCustoms((prev: CapabilityDef[]) =>
+          prev.map((c: CapabilityDef) => c.name === cap.name ? cap : c),
+        );
+        toast(`Capability "${cap.name}" updated`, { type: 'success' });
+      } else {
+        // Built-in being overridden → add as custom
+        setCustoms((prev: CapabilityDef[]) => [...prev, cap]);
+        toast(`Capability "${cap.name}" customized`, { type: 'success' });
+      }
     } else {
       setCustoms((prev: CapabilityDef[]) => [...prev, cap]);
       toast(`Capability "${cap.name}" created`, { type: 'success' });
     }
     setScreen('list');
-  }, [screen]);
+  }, [screen, customs]);
 
   const handleSaveAll = useCallback(() => {
     onSave?.(customs);
@@ -394,27 +526,30 @@ function CapabilityEditor({ customCapabilities = [], onSave, onClose }: Capabili
   // 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,
-    });
+    return (
+      <CapabilityDetail
+        cap={cap}
+        mode={screen.mode}
+        allNames={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,
-  });
+  return (
+    <CapabilityList
+      allCaps={allCaps}
+      onOpen={handleOpen}
+      onDelete={handleDelete}
+      onCreate={() => setScreen({ mode: 'create' })}
+      onSaveAll={onSave ? handleSaveAll : undefined}
+      onClose={onClose}
+      hasCustom={customs.length > 0}
+    />
+  );
 }
 
 export { CapabilityEditor };
 export default CapabilityEditor;
-module.exports = CapabilityEditor;