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

package/src/ui/bot-panel.tsx

@@ -7,15 +7,12 @@
  * - "Open Dashboard" button to launch the swarm-dashboard workspace
  *
  * Polls fw_weaver_swarm_status every 5s for live updates.
- *
- * Pattern: CommonJS require, React.createElement, module.exports, usePackWorkspace.
  */
-const React = require('react');
-const { useState, useEffect, useCallback, useRef } = React;
-const {
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
   Flex, Typography, Button, IconButton, Icon, EmptyState,
   ScrollArea, StatusIcon, usePackWorkspace,
-} = require('@fw/plugin-ui-kit');
+} from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -112,7 +109,7 @@ function BotPanel() {
     return () => { mountedRef.current = false; };
   }, []);
 
-  // ── Fetch swarm status ──────────────────────────────────────────
+  // -- Fetch swarm status --
   const fetchStatus = useCallback(async () => {
     try {
       setError(null);
@@ -136,7 +133,7 @@ function BotPanel() {
     return () => clearInterval(timer);
   }, [fetchStatus]);
 
-  // ── Open dashboard ──────────────────────────────────────────────
+  // -- Open dashboard --
   const handleOpenDashboard = useCallback(() => {
     ctx.openWindow({
       type: 'custom',
@@ -152,197 +149,218 @@ function BotPanel() {
     } as Record<string, unknown>);
   }, [ctx, packId]);
 
-  // ── Render ──────────────────────────────────────────────────────
+  // -- Render --
 
   // Header
-  const header = React.createElement(Flex, {
-    variant: 'row-center-space-between-nowrap-8',
-    style: { padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)', flexShrink: 0 },
-  },
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
-      React.createElement(Icon, { name: 'smartToy', size: 16, color: 'color-text-medium' }),
-      React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' }, 'Weaver'),
-    ),
-    React.createElement(IconButton, {
-      icon: 'reset', size: 'xs', variant: 'clear',
-      onClick: fetchStatus, title: 'Refresh',
-    }),
+  const header = (
+    <Flex
+      variant="row-center-space-between-nowrap-8"
+      style={{ padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)', flexShrink: 0 }}
+    >
+      <Flex variant="row-center-start-nowrap-6">
+        <Icon name="smartToy" size={16} color="color-text-medium" />
+        <Typography variant="caption-thick" color="color-text-high">Weaver</Typography>
+      </Flex>
+      <IconButton
+        icon="reset" size="xs" variant="clear"
+        onClick={fetchStatus} title="Refresh"
+      />
+    </Flex>
   );
 
   // Loading state
   if (loading) {
-    return React.createElement(Flex, {
-      variant: 'column-stretch-start-nowrap-0',
-      style: { width: '100%', height: '100%' },
-    },
-      header,
-      React.createElement(Flex, {
-        variant: 'column-center-center-nowrap-8',
-        style: { flex: 1 },
-      },
-        React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' }, 'Loading swarm status...'),
-      ),
+    return (
+      <Flex
+        variant="column-stretch-start-nowrap-0"
+        style={{ width: '100%', height: '100%' }}
+      >
+        {header}
+        <Flex
+          variant="column-center-center-nowrap-8"
+          style={{ flex: 1 }}
+        >
+          <Typography variant="caption-regular" color="color-text-subtle">Loading swarm status...</Typography>
+        </Flex>
+      </Flex>
     );
   }
 
   // Error state
   if (error) {
-    return React.createElement(Flex, {
-      variant: 'column-stretch-start-nowrap-0',
-      style: { width: '100%', height: '100%' },
-    },
-      header,
-      React.createElement(Flex, {
-        variant: 'column-center-center-nowrap-8',
-        style: { flex: 1 },
-      },
-        React.createElement(Typography, { variant: 'caption-regular', color: 'color-status-negative' }, error),
-        React.createElement(Button, { size: 'xs', variant: 'outlined', onClick: fetchStatus }, 'Retry'),
-      ),
+    return (
+      <Flex
+        variant="column-stretch-start-nowrap-0"
+        style={{ width: '100%', height: '100%' }}
+      >
+        {header}
+        <Flex
+          variant="column-center-center-nowrap-8"
+          style={{ flex: 1 }}
+        >
+          <Typography variant="caption-regular" color="color-status-negative">{error}</Typography>
+          <Button size="xs" variant="outlined" onClick={fetchStatus}>Retry</Button>
+        </Flex>
+      </Flex>
     );
   }
 
   // Swarm status indicator
   const swarmStatus = swarm?.status ?? 'idle';
 
-  const statusRow = React.createElement(Flex, {
-    variant: 'row-center-space-between-nowrap-8',
-    style: { padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)' },
-  },
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
-      React.createElement(StatusIcon, {
-        status: statusToIconStatus(swarmStatus),
-        size: 'sm',
-      }),
-      React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' },
-        statusLabel(swarmStatus),
-      ),
-    ),
-    React.createElement(Button, {
-      size: 'xs', variant: 'outlined', color: 'primary',
-      onClick: handleOpenDashboard,
-    }, 'Open Dashboard'),
+  const statusRow = (
+    <Flex
+      variant="row-center-space-between-nowrap-8"
+      style={{ padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)' }}
+    >
+      <Flex variant="row-center-start-nowrap-6">
+        <StatusIcon
+          status={statusToIconStatus(swarmStatus)}
+          size="sm"
+        />
+        <Typography variant="caption-thick" color="color-text-high">
+          {statusLabel(swarmStatus)}
+        </Typography>
+      </Flex>
+      <Button
+        size="xs" variant="outlined" color="primary"
+        onClick={handleOpenDashboard}
+      >
+        Open Dashboard
+      </Button>
+    </Flex>
   );
 
   // Quick stats
-  const statsRow = React.createElement(Flex, {
-    variant: 'row-center-space-between-nowrap-8',
-    style: { padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)', backgroundColor: 'var(--color-surface-low)' },
-  },
-    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
-      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
-        String(swarm?.tasksCompleted ?? 0),
-      ),
-      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Done'),
-    ),
-    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
-      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
-        String(swarm?.runsIncomplete ?? 0),
-      ),
-      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Failed'),
-    ),
-    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
-      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
-        formatTokens(swarm?.totalTokensUsed ?? 0),
-      ),
-      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Tokens'),
-    ),
-    React.createElement(Flex, { variant: 'column-center-center-nowrap-1' },
-      React.createElement(Typography, { variant: 'smallCaption-thick', color: 'color-text-high' },
-        formatCost(swarm?.totalCost ?? 0),
-      ),
-      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, 'Cost'),
-    ),
+  const statsRow = (
+    <Flex
+      variant="row-center-space-between-nowrap-8"
+      style={{ padding: '8px 12px', borderBottom: '1px solid var(--color-border-default)', backgroundColor: 'var(--color-surface-low)' }}
+    >
+      <Flex variant="column-center-center-nowrap-1">
+        <Typography variant="smallCaption-thick" color="color-text-high">
+          {String(swarm?.tasksCompleted ?? 0)}
+        </Typography>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">Done</Typography>
+      </Flex>
+      <Flex variant="column-center-center-nowrap-1">
+        <Typography variant="smallCaption-thick" color="color-text-high">
+          {String(swarm?.runsIncomplete ?? 0)}
+        </Typography>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">Failed</Typography>
+      </Flex>
+      <Flex variant="column-center-center-nowrap-1">
+        <Typography variant="smallCaption-thick" color="color-text-high">
+          {formatTokens(swarm?.totalTokensUsed ?? 0)}
+        </Typography>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">Tokens</Typography>
+      </Flex>
+      <Flex variant="column-center-center-nowrap-1">
+        <Typography variant="smallCaption-thick" color="color-text-high">
+          {formatCost(swarm?.totalCost ?? 0)}
+        </Typography>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">Cost</Typography>
+      </Flex>
+    </Flex>
   );
 
   // Bot list
   const instanceEntries = Object.values(swarm?.instances ?? {}) as InstanceInfo[];
   const hasBots = instanceEntries.length > 0;
 
-  const botCards = instanceEntries.map((inst: InstanceInfo) =>
-    React.createElement(Flex, {
-      key: inst.instanceId,
-      variant: 'row-center-start-nowrap-8',
-      style: { padding: '8px', borderRadius: 'var(--border-radius-regular)', border: '1px solid var(--color-border-default)' },
-    },
-      // Bot icon
-      React.createElement(Flex, {
-        variant: 'row-center-center-nowrap-0',
-        style: {
-          width: 26, height: 26,
-          borderRadius: 'var(--border-radius-compact)',
-          flexShrink: 0,
-          background: 'var(--color-surface-low)',
-        },
-      },
-        React.createElement(Icon, { name: 'smartToy', size: 14, color: 'color-text-medium' }),
-      ),
-
-      // Name + status + task
-      React.createElement(Flex, {
-        variant: 'column-start-start-nowrap-1',
-        style: { flex: 1, minWidth: 0 },
-      },
-        React.createElement(Flex, { variant: 'row-center-start-nowrap-4' },
-          React.createElement(Typography, {
-            variant: 'caption-thick', color: 'color-text-high',
-          }, inst.profileId ? `${inst.instanceId} (${inst.profileId})` : inst.instanceId),
-          React.createElement(StatusIcon, {
-            status: statusToIconStatus(inst.status),
-            size: 'sm',
-          }),
-          React.createElement(Typography, {
-            variant: 'smallCaption-regular', color: 'color-text-subtle',
-          }, statusLabel(inst.status)),
-        ),
-        inst.currentTaskId ? React.createElement(Typography, {
-          variant: 'smallCaption-regular', color: 'color-text-medium',
-          truncate: true,
-        }, `Task: ${inst.currentTaskId}`) : null,
-      ),
-
-      // Per-instance stats
-      React.createElement(Flex, {
-        variant: 'column-end-end-nowrap-1',
-        style: { flexShrink: 0 },
-      },
-        React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' },
-          formatTokens(inst.tokensUsed),
-        ),
-        React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' },
-          formatCost(inst.cost),
-        ),
-      ),
-    ),
+  const content = hasBots ? (
+    <ScrollArea style={{ flex: 1 }}>
+      <Flex
+        variant="column-stretch-start-nowrap-6"
+        style={{ padding: '8px 12px' }}
+      >
+        {instanceEntries.map((inst: InstanceInfo) => (
+          <Flex
+            key={inst.instanceId}
+            variant="row-center-start-nowrap-8"
+            style={{ padding: '8px', borderRadius: 'var(--border-radius-regular)', border: '1px solid var(--color-border-default)' }}
+          >
+            {/* Bot icon */}
+            <Flex
+              variant="row-center-center-nowrap-0"
+              style={{
+                width: 26, height: 26,
+                borderRadius: 'var(--border-radius-compact)',
+                flexShrink: 0,
+                background: 'var(--color-surface-low)',
+              }}
+            >
+              <Icon name="smartToy" size={14} color="color-text-medium" />
+            </Flex>
+
+            {/* Name + status + task */}
+            <Flex
+              variant="column-start-start-nowrap-1"
+              style={{ flex: 1, minWidth: 0 }}
+            >
+              <Flex variant="row-center-start-nowrap-4">
+                <Typography variant="caption-thick" color="color-text-high">
+                  {inst.profileId ? `${inst.instanceId} (${inst.profileId})` : inst.instanceId}
+                </Typography>
+                <StatusIcon
+                  status={statusToIconStatus(inst.status)}
+                  size="sm"
+                />
+                <Typography variant="smallCaption-regular" color="color-text-subtle">
+                  {statusLabel(inst.status)}
+                </Typography>
+              </Flex>
+              {inst.currentTaskId && (
+                <Typography
+                  variant="smallCaption-regular" color="color-text-medium"
+                  truncate={true}
+                >
+                  Task: {inst.currentTaskId}
+                </Typography>
+              )}
+            </Flex>
+
+            {/* Per-instance stats */}
+            <Flex
+              variant="column-end-end-nowrap-1"
+              style={{ flexShrink: 0 }}
+            >
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                {formatTokens(inst.tokensUsed)}
+              </Typography>
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                {formatCost(inst.cost)}
+              </Typography>
+            </Flex>
+          </Flex>
+        ))}
+      </Flex>
+    </ScrollArea>
+  ) : (
+    <Flex
+      variant="column-center-center-nowrap-0"
+      style={{ flex: 1 }}
+    >
+      <EmptyState
+        icon="smartToy"
+        message={swarmStatus === 'idle' ? 'Idle' : 'No instances active'}
+        description="Open the dashboard to configure and start the swarm."
+      />
+    </Flex>
   );
 
-  const content = hasBots
-    ? React.createElement(ScrollArea, { style: { flex: 1 } },
-        React.createElement(Flex, {
-          variant: 'column-stretch-start-nowrap-6',
-          style: { padding: '8px 12px' },
-        }, ...botCards),
-      )
-    : React.createElement(Flex, {
-        variant: 'column-center-center-nowrap-0',
-        style: { flex: 1 },
-      },
-        React.createElement(EmptyState, {
-          icon: 'smartToy',
-          message: swarmStatus === 'idle' ? 'Idle' : 'No instances active',
-          description: 'Open the dashboard to configure and start the swarm.',
-        }),
-      );
-
-  return React.createElement(Flex, {
-    variant: 'column-stretch-start-nowrap-0',
-    style: { width: '100%', height: '100%', overflow: 'hidden' },
-  },
-    header,
-    statusRow,
-    statsRow,
-    content,
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {header}
+      {statusRow}
+      {statsRow}
+      {content}
+    </Flex>
   );
 }
 
-module.exports = BotPanel;
+export { BotPanel };
+export default BotPanel;

package/src/ui/bot-slot-card.tsx

@@ -1,9 +1,13 @@
 /**
  * BotSlotCard — single row in the bot table for the swarm dashboard.
- * Displays bot name, status, current task, tokens, and cost in a table row layout.
+ * Displays bot name, status, current task, tokens, and cost in fixed-width columns.
+ *
+ * Uses styled components from @fw/plugin-theme for hover — zero inline styles.
+ * The swarm dashboard renders a column header row + BotSlotCard per instance.
  */
 import React from 'react';
 import { Flex, Typography, Icon, IconButton } from '@fw/plugin-ui-kit';
+import { styled } from '@fw/plugin-theme';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -27,11 +31,43 @@ interface BotSlotCardProps {
   botDisplayName?: string;
   botIcon?: string;
   botColor?: string;
+  onView?: (botId: string) => void;
   onPause?: (botId: string) => void;
   onResume?: (botId: string) => void;
   onStop?: (botId: string) => void;
 }
 
+// ---------------------------------------------------------------------------
+// Styled — row with CSS :hover, columns with fixed widths
+// ---------------------------------------------------------------------------
+
+const Row = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$gap-tight',
+  padding: '6px 16px',
+  minHeight: '38px',
+  borderBottom: '1px solid $color-border-default',
+  transition: 'background-color 0.15s ease',
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        '&:hover': { backgroundColor: '$color-surface-hover' },
+        '&:active': { backgroundColor: '$color-surface-active' },
+      },
+      false: {},
+    },
+  },
+});
+
+const WorkerCol = styled.div({ width: '120px', flexShrink: 0 });
+const BotCol = styled.div({ width: '110px', flexShrink: 0, display: 'flex', alignItems: 'center', gap: '4px' });
+const StatusCol = styled.div({ width: '70px', flexShrink: 0 });
+const TaskCol = styled.div({ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
+const StatCol = styled.div({ width: '50px', flexShrink: 0, textAlign: 'right' });
+const ActionsCol = styled.div({ width: '50px', flexShrink: 0 });
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -58,80 +94,99 @@ function formatCost(n: number): string {
 // Component
 // ---------------------------------------------------------------------------
 
-function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onPause, onResume, onStop }: BotSlotCardProps) {
+function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onView, onPause, onResume, onStop }: BotSlotCardProps) {
   const { botId, botName, status, currentTaskId, tokensUsed, cost } = bot;
   const isExecuting = status === 'executing';
   const isPaused = status === 'paused';
   const label = statusToLabel[status] ?? status;
   const taskText = isExecuting ? (currentTaskTitle || currentTaskId || '-') : '-';
-
-  return React.createElement(Flex, {
-    variant: 'row-center-start-nowrap-8',
-    style: { padding: '6px 16px', minHeight: '38px', borderBottom: '1px solid var(--color-border-default)' },
-  },
-    // Instance name
-    React.createElement(Typography, {
-      variant: 'smallCaption-regular', color: 'color-text-high',
-      style: { width: '120px', flexShrink: 0 },
-    }, profileName ? `${profileName} #${botId.split('-').pop() ?? '0'}` : botName),
-
-    // Bot (icon + name)
-    React.createElement(Flex, {
-      variant: 'row-center-start-nowrap-4',
-      style: { width: '110px', flexShrink: 0, color: botColor ? `var(--${botColor})` : undefined },
-    },
-      React.createElement(Icon, { name: botIcon || 'smartToy', size: 12 }),
-      React.createElement(Typography, {
-        variant: 'smallCaption-regular', color: 'color-text-subtle',
-      }, botDisplayName || '-'),
-    ),
-
-    // Status
-    React.createElement(Typography, {
-      variant: 'smallCaption-regular',
-      color: isExecuting ? 'color-brand-main' : 'color-text-subtle',
-      style: { width: '70px', flexShrink: 0 },
-    }, label),
-
-    // Current task
-    React.createElement(Typography, {
-      variant: 'smallCaption-regular',
-      color: isExecuting ? 'color-text-medium' : 'color-text-subtle',
-      style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-    }, taskText),
-
-    // Tokens
-    React.createElement(Typography, {
-      variant: 'smallCaption-regular',
-      color: 'color-text-subtle',
-      style: { width: '50px', flexShrink: 0, textAlign: 'right' },
-    }, formatTokens(tokensUsed)),
-
-    // Cost
-    React.createElement(Typography, {
-      variant: 'smallCaption-regular',
-      color: 'color-text-subtle',
-      style: { width: '50px', flexShrink: 0, textAlign: 'right' },
-    }, formatCost(cost)),
-
-    // Actions
-    React.createElement(Flex, {
-      variant: 'row-center-end-nowrap-1',
-      style: { width: '50px', flexShrink: 0 },
-    },
-      isExecuting && onPause && React.createElement(IconButton, {
-        icon: 'pause', size: 'xs', variant: 'clear',
-        onClick: () => onPause(botId), title: 'Pause',
-      }),
-      isPaused && onResume && React.createElement(IconButton, {
-        icon: 'playArrow', size: 'xs', variant: 'clear',
-        onClick: () => onResume(botId), title: 'Resume',
-      }),
-      (isExecuting || isPaused) && onStop && React.createElement(IconButton, {
-        icon: 'stop', size: 'xs', variant: 'clear', color: 'danger',
-        onClick: () => onStop(botId), title: 'Stop',
-      }),
-    ),
+  const clickable = isExecuting && onView;
+
+  return (
+    <Row
+      clickable={!!clickable}
+      onClick={clickable ? () => onView!(botId) : undefined}
+    >
+      <WorkerCol>
+        <Typography variant="smallCaption-regular" color="color-text-high">
+          {profileName ? `${profileName} #${botId.split('-').pop() ?? '0'}` : botName}
+        </Typography>
+      </WorkerCol>
+
+      <BotCol>
+        <Icon name={botIcon || 'smartToy'} size={12} color={botColor || 'color-text-subtle'} />
+        <Typography variant="smallCaption-regular" color="color-text-subtle">
+          {botDisplayName || '-'}
+        </Typography>
+      </BotCol>
+
+      <StatusCol>
+        <Typography
+          variant="smallCaption-regular"
+          color={isExecuting ? 'color-brand-main' : 'color-text-subtle'}
+        >
+          {label}
+        </Typography>
+      </StatusCol>
+
+      <TaskCol>
+        <Typography
+          variant="smallCaption-regular"
+          color={isExecuting ? 'color-text-medium' : 'color-text-subtle'}
+          truncate={true}
+        >
+          {taskText}
+        </Typography>
+      </TaskCol>
+
+      <StatCol>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">
+          {formatTokens(tokensUsed)}
+        </Typography>
+      </StatCol>
+
+      <StatCol>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">
+          {formatCost(cost)}
+        </Typography>
+      </StatCol>
+
+      <ActionsCol>
+        <Flex
+          variant="row-center-end-nowrap-1"
+          onClick={(e: { stopPropagation: () => void }) => e.stopPropagation()}
+        >
+          {isExecuting && onPause && (
+            <IconButton
+              icon="pause"
+              size="xs"
+              variant="clear"
+              onClick={() => onPause(botId)}
+              title="Pause"
+            />
+          )}
+          {isPaused && onResume && (
+            <IconButton
+              icon="playArrow"
+              size="xs"
+              variant="clear"
+              onClick={() => onResume(botId)}
+              title="Resume"
+            />
+          )}
+          {(isExecuting || isPaused) && onStop && (
+            <IconButton
+              icon="stop"
+              size="xs"
+              variant="clear"
+              color="danger"
+              onClick={() => onStop(botId)}
+              title="Stop"
+            />
+          )}
+        </Flex>
+      </ActionsCol>
+    </Row>
   );
 }