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

package/src/ui/profile-card.tsx

@@ -1,13 +1,11 @@
 /**
  * ProfileCard — displays a bot profile summary with capabilities, behavior
  * config (phases, tiers, escalation, scope), and collapsible instructions.
- *
- * Pattern: CommonJS require for platform deps, React.createElement throughout.
  */
-const React = require('react');
-const {
+import React from 'react';
+import {
   Flex, Typography, Icon, Chip, IconButton, Field, CollapsibleSection,
-} = require('@fw/plugin-ui-kit');
+} from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -105,183 +103,212 @@ function ProfileCard({ profile, activeInstances, onEdit, onDelete }: ProfileCard
   if (preferences.maxCostPerTask) budgetParts.push(`$${preferences.maxCostPerTask.toFixed(2)}/task`);
   const budgetText = budgetParts.length > 0 ? budgetParts.join(' / ') : null;
 
-  return React.createElement(Flex, {
-    variant: 'column-stretch-start-nowrap-6',
-    style: {
-      padding: '10px 12px',
-      borderRadius: '8px',
-      border: '1px solid var(--color-border-default)',
-      backgroundColor: 'var(--color-surface-elevated)',
-    },
-  },
-    // Header: Icon + Name + Edit/Delete buttons
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-      React.createElement(Flex, {
-        variant: 'row-center-center-nowrap-0',
-        style: { color: `var(--${color})`, flexShrink: 0 },
-      },
-        React.createElement(Icon, { name: icon || 'smartToy', size: 18 }),
-      ),
-      React.createElement(Typography, {
-        variant: 'caption-thick',
-        color: 'color-text-high',
-        style: { flex: 1, minWidth: 0 },
-      }, name),
-      onEdit && React.createElement(IconButton, {
-        icon: 'edit', size: 'xs', variant: 'clear',
-        onClick: () => onEdit(id),
-        title: 'Edit profile',
-      }),
-      onDelete && React.createElement(IconButton, {
-        icon: 'outlinedDelete', size: 'xs', variant: 'clear', color: 'danger',
-        onClick: () => onDelete(id),
-        title: 'Delete profile',
-      }),
-    ),
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-6"
+      style={{
+        padding: '10px 12px',
+        borderRadius: '8px',
+        border: '1px solid var(--color-border-default)',
+        backgroundColor: 'var(--color-surface-elevated)',
+      }}
+    >
+      {/* Header: Icon + Name + Edit/Delete buttons */}
+      <Flex variant="row-center-start-nowrap-8">
+        <Flex
+          variant="row-center-center-nowrap-0"
+          style={{ color: `var(--${color})`, flexShrink: 0 }}
+        >
+          <Icon name={icon || 'smartToy'} size={18} color={color || 'color-text-medium'} />
+        </Flex>
+        <Typography
+          variant="caption-thick"
+          color="color-text-high"
+          style={{ flex: 1, minWidth: 0 }}
+        >
+          {name}
+        </Typography>
+        {onEdit && (
+          <IconButton
+            icon="edit"
+            size="xs"
+            variant="clear"
+            onClick={() => onEdit(id)}
+            title="Edit profile"
+          />
+        )}
+        {onDelete && (
+          <IconButton
+            icon="outlinedDelete"
+            size="xs"
+            variant="clear"
+            color="danger"
+            onClick={() => onDelete(id)}
+            title="Delete profile"
+          />
+        )}
+      </Flex>
 
-    // Description
-    description && React.createElement(Typography, {
-      variant: 'smallCaption-regular',
-      color: 'color-text-medium',
-    }, description),
+      {/* Description */}
+      {description && (
+        <Typography variant="smallCaption-regular" color="color-text-medium">
+          {description}
+        </Typography>
+      )}
 
-    // Divider
-    React.createElement('div', {
-      style: { borderTop: '1px solid var(--color-border-default)', margin: '2px 0' },
-    }),
+      {/* Divider */}
+      <div style={{ borderTop: '1px solid var(--color-border-default)', margin: '2px 0' }} />
 
-    // Capabilities
-    capabilities.length > 0 && React.createElement(Field, { label: 'Capabilities', labelWidth: 90, align: 'start' },
-      React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
-        ...capabilities.map((cap: Capability) =>
-          React.createElement('span', { key: cap.name, title: cap.description },
-            React.createElement(Chip, { label: cap.name, size: 'small', color: 'color-brand-main' }),
-          ),
-        ),
-      ),
-    ),
+      {/* Capabilities */}
+      {capabilities.length > 0 && (
+        <Field label="Capabilities" labelWidth={90} align="start">
+          <Flex variant="row-center-start-wrap-4">
+            {capabilities.map((cap: Capability) => (
+              <span key={cap.name} title={cap.description}>
+                <Chip label={cap.name} size="small" color="color-brand-main" />
+              </span>
+            ))}
+          </Flex>
+        </Field>
+      )}
 
-    // 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' }),
-          ),
-        ),
-      ),
-    ),
+      {/* Capabilities (from behavior) */}
+      {behavior?.capabilities && behavior.capabilities.length > 0 && (
+        <Field label="Capabilities" labelWidth={90} align="start">
+          <Flex variant="row-center-start-wrap-4">
+            {behavior.capabilities.map((capName: string) => (
+              <span key={capName}>
+                <Chip label={capName} size="small" color="color-status-info" />
+              </span>
+            ))}
+          </Flex>
+        </Field>
+      )}
 
-    // 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`),
-    ),
+      {/* Budget (from behavior) */}
+      {behavior?.budget && (
+        <Field label="Budget" labelWidth={90} align="center">
+          <Typography variant="smallCaption-regular" color="color-text-high">
+            {`$${behavior.budget.toFixed(2)}/task`}
+          </Typography>
+        </Field>
+      )}
 
-    // Strategy
-    React.createElement(Field, { label: 'Strategy', labelWidth: 90, align: 'center' },
-      React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
-        React.createElement(Icon, { name: STRATEGY_ICONS[preferences.costStrategy] || 'syncAlt', size: 12 }),
-        React.createElement(Typography, {
-          variant: 'smallCaption-regular', color: 'color-text-high',
-        }, STRATEGY_LABELS[preferences.costStrategy] ?? preferences.costStrategy),
-      ),
-    ),
+      {/* Strategy */}
+      <Field label="Strategy" labelWidth={90} align="center">
+        <Flex variant="row-center-start-nowrap-6">
+          <Icon name={STRATEGY_ICONS[preferences.costStrategy] || 'syncAlt'} size={12} color="color-text-medium" />
+          <Typography variant="smallCaption-regular" color="color-text-high">
+            {STRATEGY_LABELS[preferences.costStrategy] ?? preferences.costStrategy}
+          </Typography>
+        </Flex>
+      </Field>
 
-    // Instances + Approval
-    React.createElement(Field, { label: 'Instances', labelWidth: 90, align: 'center' },
-      React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-        React.createElement(Typography, {
-          variant: 'smallCaption-regular', color: 'color-text-high',
-        }, `${activeInstances}/${maxInstances} active`),
-        React.createElement(Chip, {
-          label: preferences.requireApproval ? 'Approval required' : 'Auto-approve',
-          size: 'small',
-          color: preferences.requireApproval ? 'color-status-caution' : 'color-status-positive',
-        }),
-      ),
-    ),
+      {/* Instances + Approval */}
+      <Field label="Instances" labelWidth={90} align="center">
+        <Flex variant="row-center-start-nowrap-8">
+          <Typography variant="smallCaption-regular" color="color-text-high">
+            {`${activeInstances}/${maxInstances} active`}
+          </Typography>
+          <Chip
+            label={preferences.requireApproval ? 'Approval required' : 'Auto-approve'}
+            size="small"
+            color={preferences.requireApproval ? 'color-status-caution' : 'color-status-positive'}
+          />
+        </Flex>
+      </Field>
 
-    // Budget
-    budgetText && React.createElement(Field, { label: 'Budget', labelWidth: 90, align: 'center' },
-      React.createElement(Typography, {
-        variant: 'smallCaption-regular', color: 'color-text-high',
-      }, budgetText),
-    ),
+      {/* Budget */}
+      {budgetText && (
+        <Field label="Budget" labelWidth={90} align="center">
+          <Typography variant="smallCaption-regular" color="color-text-high">
+            {budgetText}
+          </Typography>
+        </Field>
+      )}
 
-    // --- Behavior section (new) ---
-    behavior && React.createElement(React.Fragment, null,
-      // Phase pills
-      React.createElement(Field, { label: 'Phases', labelWidth: 90, align: 'start' },
-        React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
-          ...Object.entries(behavior.phases).map(([phaseName, phase]) => {
-            const enabled = phase?.enabled !== false;
-            const isLlmPhase = phase?.tier !== undefined;
-            const label = isLlmPhase && enabled
-              ? `${phaseName} (${tierLabel(phase)})`
-              : phaseName;
-            return React.createElement('span', { key: phaseName },
-              React.createElement(Chip, {
-                label,
-                size: 'small',
-                color: enabled ? 'color-status-positive' : 'color-status-info',
-                disabled: !enabled,
-              }),
-            );
-          }),
-        ),
-      ),
+      {/* --- Behavior section (new) --- */}
+      {behavior && (
+        <>
+          {/* Phase pills */}
+          <Field label="Phases" labelWidth={90} align="start">
+            <Flex variant="row-center-start-wrap-4">
+              {Object.entries(behavior.phases).map(([phaseName, phase]) => {
+                const enabled = phase?.enabled !== false;
+                const isLlmPhase = phase?.tier !== undefined;
+                const label = isLlmPhase && enabled
+                  ? `${phaseName} (${tierLabel(phase)})`
+                  : phaseName;
+                return (
+                  <span key={phaseName}>
+                    <Chip
+                      label={label}
+                      size="small"
+                      color={enabled ? 'color-status-positive' : 'color-status-info'}
+                      disabled={!enabled}
+                    />
+                  </span>
+                );
+              })}
+            </Flex>
+          </Field>
 
-      // Escalation
-      React.createElement(Field, { label: 'Escalation', labelWidth: 90, align: 'center' },
-        React.createElement(Typography, {
-          variant: 'smallCaption-regular', color: 'color-text-high',
-        }, `${behavior.escalation.maxAttempts} attempts, then ${behavior.escalation.onExhausted}`),
-      ),
+          {/* Escalation */}
+          <Field label="Escalation" labelWidth={90} align="center">
+            <Typography variant="smallCaption-regular" color="color-text-high">
+              {`${behavior.escalation.maxAttempts} attempts, then ${behavior.escalation.onExhausted}`}
+            </Typography>
+          </Field>
 
-      // Scope (if set)
-      behavior.scope && (behavior.scope.allowedPaths?.length || behavior.scope.blockedPaths?.length) &&
-        React.createElement(Field, { label: 'Scope', labelWidth: 90, align: 'start' },
-          React.createElement(Flex, { variant: 'column-stretch-start-nowrap-2' },
-            behavior.scope.blockedPaths?.length && React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
-              React.createElement(Typography, {
-                variant: 'smallCaption-regular', color: 'color-text-subtle',
-              }, 'Blocked:'),
-              ...behavior.scope.blockedPaths.map((p: string) =>
-                React.createElement('span', { key: p },
-                  React.createElement(Chip, { label: p, size: 'small', color: 'color-status-negative' }),
-                ),
-              ),
-            ),
-            behavior.scope.allowedPaths?.length && React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
-              React.createElement(Typography, {
-                variant: 'smallCaption-regular', color: 'color-text-subtle',
-              }, 'Allowed:'),
-              ...behavior.scope.allowedPaths.map((p: string) =>
-                React.createElement('span', { key: p },
-                  React.createElement(Chip, { label: p, size: 'small', color: 'color-status-positive' }),
-                ),
-              ),
-            ),
-          ),
-        ),
-    ),
+          {/* Scope (if set) */}
+          {behavior.scope && (behavior.scope.allowedPaths?.length || behavior.scope.blockedPaths?.length) && (
+            <Field label="Scope" labelWidth={90} align="start">
+              <Flex variant="column-stretch-start-nowrap-2">
+                {behavior.scope.blockedPaths?.length && (
+                  <Flex variant="row-center-start-wrap-4">
+                    <Typography variant="smallCaption-regular" color="color-text-subtle">
+                      Blocked:
+                    </Typography>
+                    {behavior.scope.blockedPaths.map((p: string) => (
+                      <span key={p}>
+                        <Chip label={p} size="small" color="color-status-negative" />
+                      </span>
+                    ))}
+                  </Flex>
+                )}
+                {behavior.scope.allowedPaths?.length && (
+                  <Flex variant="row-center-start-wrap-4">
+                    <Typography variant="smallCaption-regular" color="color-text-subtle">
+                      Allowed:
+                    </Typography>
+                    {behavior.scope.allowedPaths.map((p: string) => (
+                      <span key={p}>
+                        <Chip label={p} size="small" color="color-status-positive" />
+                      </span>
+                    ))}
+                  </Flex>
+                )}
+              </Flex>
+            </Field>
+          )}
+        </>
+      )}
 
-    // Instructions — collapsible
-    preferences.instructions && React.createElement(CollapsibleSection, {
-      title: 'Protocol',
-      variant: 'list',
-      defaultExpanded: false,
-    },
-      React.createElement(Typography, {
-        variant: 'smallCaption-regular', color: 'color-text-subtle',
-        style: { whiteSpace: 'pre-wrap', lineHeight: '1.5', padding: '4px 0' },
-      }, preferences.instructions),
-    ),
+      {/* Instructions — collapsible */}
+      {preferences.instructions && (
+        <CollapsibleSection title="Protocol" variant="list" defaultExpanded={false}>
+          <Typography
+            variant="smallCaption-regular"
+            color="color-text-subtle"
+            style={{ whiteSpace: 'pre-wrap', lineHeight: '1.5', padding: '4px 0' }}
+          >
+            {preferences.instructions}
+          </Typography>
+        </CollapsibleSection>
+      )}
+    </Flex>
   );
 }
 
 export { ProfileCard };
 export default ProfileCard;
-module.exports = ProfileCard;