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

package/src/ui/chat-task-result.tsx

@@ -5,11 +5,10 @@
  * live status (polls fw_weaver_task_get every 3s), subtask progress for
  * parent tasks, assigned bot, and an "Open Dashboard" button.
  *
- * Runs in the pack sandbox — CommonJS require, React.createElement throughout.
+ * Runs in the pack sandbox.
  */
-const React = require('react');
-const { useState, useEffect, useCallback, useRef } = React;
-const { Flex, Typography, StatusIcon, Button } = require('@fw/plugin-ui-kit');
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Flex, Typography, StatusIcon, Button } from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -131,18 +130,20 @@ function ChatTaskResult(props: ChatTaskResultProps | null) {
 
   // If we couldn't parse a task, show a minimal fallback
   if (!task) {
-    return React.createElement(Flex, {
-      variant: 'row-center-start-nowrap-10',
-      style: {
-        borderRadius: 'var(--border-radius-regular)',
-        border: '1px solid var(--color-border-default)',
-        backgroundColor: 'var(--color-surface-low)',
-      },
-    },
-      React.createElement(StatusIcon, { status: 'pending', size: 'sm' }),
-      React.createElement(Typography, {
-        variant: 'caption-thick', color: 'color-text-medium',
-      }, 'Task created'),
+    return (
+      <Flex
+        variant="row-center-start-nowrap-10"
+        style={{
+          borderRadius: 'var(--border-radius-regular)',
+          border: '1px solid var(--color-border-default)',
+          backgroundColor: 'var(--color-surface-low)',
+        }}
+      >
+        <StatusIcon status="pending" size="sm" />
+        <Typography variant="caption-thick" color="color-text-medium">
+          Task created
+        </Typography>
+      </Flex>
     );
   }
 
@@ -163,68 +164,70 @@ function ChatTaskResult(props: ChatTaskResultProps | null) {
     });
   }, [openWorkspace, task.id]);
 
-  return React.createElement(Flex, {
-    variant: 'row-center-start-nowrap-10',
-    style: {
-      borderRadius: 'var(--border-radius-regular)',
-      border: '1px solid var(--color-border-default)',
-      backgroundColor: 'var(--color-surface-low)',
-    },
-  },
-    // Status icon
-    React.createElement(StatusIcon, {
-      status: statusToIcon(task.status),
-      size: 'sm',
-    }),
-
-    // Title + meta column
-    React.createElement(Flex, {
-      variant: 'column-start-start-nowrap-2',
-      style: { flex: 1, minWidth: 0 },
-    },
-      // Title row
-      React.createElement(Typography, {
-        variant: 'caption-thick',
-        color: 'color-text-high',
-        truncate: true,
-      }, task.title),
-
-      // Status + subtask progress + bot
-      React.createElement(Flex, {
-        variant: 'row-center-start-wrap-8',
-      },
-        // Status label
-        React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: task.status === 'done' ? 'color-text-positive' :
-                 task.status === 'cancelled' ? 'color-text-negative' :
-                 task.status === 'in-progress' ? 'color-text-info' :
-                 'color-text-medium',
-        }, statusLabel(task.status)),
-
-        // Subtask progress
-        hasSubtasks && React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: 'color-text-medium',
-        }, `${doneCount}/${totalCount} done`),
-
-        // Bot
-        botLabel && React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: 'color-text-low',
-          truncate: true,
-        }, botLabel),
-      ),
-    ),
-
-    // Open Dashboard button
-    React.createElement(Button, {
-      size: 'xs',
-      variant: 'clear',
-      color: 'secondary',
-      onClick: handleOpenDashboard,
-    }, 'Open Dashboard'),
+  return (
+    <Flex
+      variant="row-center-start-nowrap-10"
+      style={{
+        borderRadius: 'var(--border-radius-regular)',
+        border: '1px solid var(--color-border-default)',
+        backgroundColor: 'var(--color-surface-low)',
+      }}
+    >
+      {/* Status icon */}
+      <StatusIcon status={statusToIcon(task.status)} size="sm" />
+
+      {/* Title + meta column */}
+      <Flex
+        variant="column-start-start-nowrap-2"
+        style={{ flex: 1, minWidth: 0 }}
+      >
+        {/* Title row */}
+        <Typography variant="caption-thick" color="color-text-high" truncate={true}>
+          {task.title}
+        </Typography>
+
+        {/* Status + subtask progress + bot */}
+        <Flex variant="row-center-start-wrap-8">
+          {/* Status label */}
+          <Typography
+            variant="smallCaption-regular"
+            color={
+              task.status === 'done' ? 'color-text-positive' :
+              task.status === 'cancelled' ? 'color-text-negative' :
+              task.status === 'in-progress' ? 'color-text-info' :
+              'color-text-medium'
+            }
+          >
+            {statusLabel(task.status)}
+          </Typography>
+
+          {/* Subtask progress */}
+          {hasSubtasks && (
+            <Typography variant="smallCaption-regular" color="color-text-medium">
+              {`${doneCount}/${totalCount} done`}
+            </Typography>
+          )}
+
+          {/* Bot */}
+          {botLabel && (
+            <Typography
+              variant="smallCaption-regular"
+              color="color-text-low"
+              truncate={true}
+            >
+              {botLabel}
+            </Typography>
+          )}
+        </Flex>
+      </Flex>
+
+      {/* Open Dashboard button */}
+      <Button size="xs" variant="clear" color="secondary" onClick={handleOpenDashboard}>
+        Open Dashboard
+      </Button>
+    </Flex>
   );
 }
 
-module.exports = ChatTaskResult;
+export { ChatTaskResult };
+export default ChatTaskResult;

package/src/ui/decision-log.tsx

@@ -3,13 +3,11 @@
  *
  * Each decision shows timestamp, task title, assigned instance, routing method,
  * and the reasoning. AI-routed decisions also show confidence percentage.
- *
- * Pattern: CommonJS require for platform deps, React.createElement throughout.
  */
-const React = require('react');
-const {
+import React from 'react';
+import {
   Flex, Typography, ScrollArea, Chip, SectionTitle,
-} = require('@fw/plugin-ui-kit');
+} from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -68,82 +66,87 @@ function truncate(text: string, max: number): string {
 
 function DecisionLog({ decisions }: DecisionLogProps) {
   if (!decisions || decisions.length === 0) {
-    return React.createElement(Flex, {
-      variant: 'column-stretch-start-nowrap-4',
-    },
-      React.createElement(SectionTitle, null, 'Decision Log'),
-      React.createElement(Typography, {
-        variant: 'smallCaption-regular', color: 'color-text-subtle',
-      }, 'No routing decisions yet.'),
+    return (
+      <Flex variant="column-stretch-start-nowrap-4">
+        <SectionTitle>Decision Log</SectionTitle>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">
+          No routing decisions yet.
+        </Typography>
+      </Flex>
     );
   }
 
   // Show newest first
   const sorted = [...decisions].sort((a, b) => b.timestamp - a.timestamp);
 
-  return React.createElement(Flex, {
-    variant: 'column-stretch-start-nowrap-4',
-  },
-    React.createElement(SectionTitle, null, 'Decision Log'),
-    React.createElement(ScrollArea, {
-      style: { maxHeight: '260px' },
-    },
-      React.createElement(Flex, {
-        variant: 'column-stretch-start-nowrap-0',
-      },
-        ...sorted.map((d: Decision) => {
-          const methodLabel = d.method === 'ai-routed' && d.confidence != null
-            ? `ai ${d.confidence}%`
-            : methodLabels[d.method] || d.method;
-
-          return React.createElement(Flex, {
-            key: d.id,
-            variant: 'column-stretch-start-nowrap-2',
-            style: {
-              padding: '6px 8px',
-              borderBottom: '1px solid var(--color-border-default)',
-            },
-          },
-            // Main line: time, title, instance, method
-            React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-              React.createElement(Typography, {
-                variant: 'smallCaption-regular',
-                color: 'color-text-subtle',
-                style: { flexShrink: 0, fontFamily: 'var(--font-mono, monospace)', fontSize: '11px' },
-              }, formatTime(d.timestamp)),
-
-              React.createElement(Typography, {
-                variant: 'smallCaption-regular',
-                color: 'color-text-high',
-                style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-              }, `"${truncate(d.taskTitle, 40)}"`),
-
-              React.createElement(Typography, {
-                variant: 'smallCaption-regular',
-                color: 'color-text-medium',
-                style: { flexShrink: 0 },
-              }, `\u2192 ${d.assignedInstanceId}`),
-
-              React.createElement(Chip, {
-                label: methodLabel,
-                size: 'small',
-                color: methodColors[d.method] || 'color-brand-alt',
-              }),
-            ),
-
-            // Reason line
-            React.createElement(Typography, {
-              variant: 'smallCaption-regular',
-              color: 'color-text-subtle',
-              style: { paddingLeft: '70px' },
-            }, d.reason),
-          );
-        }),
-      ),
-    ),
+  return (
+    <Flex variant="column-stretch-start-nowrap-4">
+      <SectionTitle>Decision Log</SectionTitle>
+      <ScrollArea style={{ maxHeight: '260px' }}>
+        <Flex variant="column-stretch-start-nowrap-0">
+          {sorted.map((d: Decision) => {
+            const methodLabel = d.method === 'ai-routed' && d.confidence != null
+              ? `ai ${d.confidence}%`
+              : methodLabels[d.method] || d.method;
+
+            return (
+              <Flex
+                key={d.id}
+                variant="column-stretch-start-nowrap-2"
+                style={{
+                  padding: '6px 8px',
+                  borderBottom: '1px solid var(--color-border-default)',
+                }}
+              >
+                {/* Main line: time, title, instance, method */}
+                <Flex variant="row-center-start-nowrap-8">
+                  <Typography
+                    variant="smallCaption-regular"
+                    color="color-text-subtle"
+                    style={{ flexShrink: 0, fontFamily: 'var(--font-mono, monospace)', fontSize: '11px' }}
+                  >
+                    {formatTime(d.timestamp)}
+                  </Typography>
+
+                  <Typography
+                    variant="smallCaption-regular"
+                    color="color-text-high"
+                    style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                  >
+                    {`"${truncate(d.taskTitle, 40)}"`}
+                  </Typography>
+
+                  <Typography
+                    variant="smallCaption-regular"
+                    color="color-text-medium"
+                    style={{ flexShrink: 0 }}
+                  >
+                    {`\u2192 ${d.assignedInstanceId}`}
+                  </Typography>
+
+                  <Chip
+                    label={methodLabel}
+                    size="small"
+                    color={methodColors[d.method] || 'color-brand-alt'}
+                  />
+                </Flex>
+
+                {/* Reason line */}
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-text-subtle"
+                  style={{ paddingLeft: '70px' }}
+                >
+                  {d.reason}
+                </Typography>
+              </Flex>
+            );
+          })}
+        </Flex>
+      </ScrollArea>
+    </Flex>
   );
 }
 
 export { DecisionLog };
 export default DecisionLog;
-module.exports = DecisionLog;

package/src/ui/genesis-block.tsx

@@ -2,9 +2,8 @@
  * GenesisBlock — displays a genesis self-evolution cycle in the timeline.
  * Collapsible: shows summary when collapsed, full proposal + diff when expanded.
  */
-const React = require('react');
-const { useState, useCallback } = React;
-const { CollapsibleBlock, Flex, Typography, Icon, Badge, Chip, Button, toast, formatTimestamp } = require('@fw/plugin-ui-kit');
+import React, { useState, useCallback } from 'react';
+import { CollapsibleBlock, Flex, Typography, Icon, Badge, Chip, Button, toast, formatTimestamp } from '@fw/plugin-ui-kit';
 
 interface GenesisOperation {
   type: string;
@@ -73,64 +72,95 @@ function GenesisBlock({ cycle, callTool }: GenesisBlockProps) {
   const badgeVariant = OUTCOME_BADGE_VARIANTS[cycle.outcome] ?? 'default';
   const status = OUTCOME_STATUS[cycle.outcome] ?? 'pending';
 
-  return React.createElement(CollapsibleBlock, {
-    status,
-    icon: React.createElement(Icon, { name: 'autorenew', size: 14, color: 'color-brand-main' }),
-    label: React.createElement(Typography, {
-      variant: 'caption-thick', color: 'color-text-high',
-      style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 },
-    }, summary),
-    headerSuffix: React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-subtle' }, formatTimestamp(cycle.timestamp)),
-      React.createElement(Badge, { variant: badgeVariant }, cycle.outcome),
-    ),
-    expanded,
-    onToggle: () => setExpanded((v: boolean) => !v),
-  },
-    // Proposal
-    cycle.proposal && React.createElement(Flex, {
-      variant: 'column-start-start-nowrap-6',
-      style: { padding: '10px 12px', borderBottom: '1px solid var(--color-border-default)' },
-    },
-      React.createElement(Typography, { variant: 'caption-bold', color: 'color-text-subtle' },
-        `Proposal · ${cycle.proposal.impactLevel}`),
-      React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' },
-        cycle.proposal.rationale),
-      ...cycle.proposal.operations.map((op: GenesisOperation, i: number) =>
-        React.createElement(Flex, { key: i, variant: 'row-center-start-nowrap-6', style: { fontSize: '11px' } },
-          React.createElement(Chip, { label: op.type, size: 'small', color: 'color-status-info' }),
-          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' }, op.rationale),
-        ),
-      ),
-    ),
-    // Diff
-    cycle.diffSummary && React.createElement(Flex, {
-      variant: 'column-start-start-nowrap-6',
-      style: { padding: '10px 12px', borderBottom: '1px solid var(--color-border-default)' },
-    },
-      React.createElement(Typography, { variant: 'caption-bold', color: 'color-text-subtle' }, 'Changes'),
-      React.createElement('pre', {
-        style: {
-          fontSize: '11px', fontFamily: 'monospace', lineHeight: 1.4, padding: '8px',
-          borderRadius: 'var(--border-radius-compact, 4px)', backgroundColor: 'var(--color-surface-raised)',
-          color: 'var(--color-text-medium)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-          maxHeight: '200px', overflow: 'auto', margin: 0, width: '100%',
-        },
-      }, cycle.diffSummary),
-    ),
-    // Error
-    cycle.error && React.createElement('div', {
-      style: { padding: '10px 12px', borderBottom: '1px solid var(--color-border-default)' },
-    }, React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-status-negative' }, cycle.error)),
-    // Rollback action
-    cycle.outcome === 'applied' && React.createElement(Flex, {
-      variant: 'row-center-start-nowrap-8', style: { padding: '10px 12px' },
-    },
-      React.createElement(Button, {
-        size: 'xs', variant: 'outlined', color: 'danger',
-        onClick: handleRollback, loading: rollingBack, disabled: rollingBack,
-      }, 'Rollback'),
-    ),
+  return (
+    <CollapsibleBlock
+      status={status}
+      icon={<Icon name="autorenew" size={14} color="color-brand-main" />}
+      label={
+        <Typography
+          variant="caption-thick"
+          color="color-text-high"
+          style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}
+        >
+          {summary}
+        </Typography>
+      }
+      headerSuffix={
+        <Flex variant="row-center-start-nowrap-8">
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            {formatTimestamp(cycle.timestamp)}
+          </Typography>
+          <Badge variant={badgeVariant}>{cycle.outcome}</Badge>
+        </Flex>
+      }
+      expanded={expanded}
+      onToggle={() => setExpanded((v: boolean) => !v)}
+    >
+      {/* Proposal */}
+      {cycle.proposal && (
+        <Flex
+          variant="column-start-start-nowrap-6"
+          style={{ padding: '10px 12px', borderBottom: '1px solid var(--color-border-default)' }}
+        >
+          <Typography variant="caption-bold" color="color-text-subtle">
+            {`Proposal · ${cycle.proposal.impactLevel}`}
+          </Typography>
+          <Typography variant="smallCaption-regular" color="color-text-medium">
+            {cycle.proposal.rationale}
+          </Typography>
+          {cycle.proposal.operations.map((op: GenesisOperation, i: number) => (
+            <Flex key={i} variant="row-center-start-nowrap-6" style={{ fontSize: '11px' }}>
+              <Chip label={op.type} size="small" color="color-status-info" />
+              <Typography variant="smallCaption-regular" color="color-text-medium">
+                {op.rationale}
+              </Typography>
+            </Flex>
+          ))}
+        </Flex>
+      )}
+      {/* Diff */}
+      {cycle.diffSummary && (
+        <Flex
+          variant="column-start-start-nowrap-6"
+          style={{ padding: '10px 12px', borderBottom: '1px solid var(--color-border-default)' }}
+        >
+          <Typography variant="caption-bold" color="color-text-subtle">Changes</Typography>
+          <pre
+            style={{
+              fontSize: '11px', fontFamily: 'monospace', lineHeight: 1.4, padding: '8px',
+              borderRadius: 'var(--border-radius-compact, 4px)', backgroundColor: 'var(--color-surface-raised)',
+              color: 'var(--color-text-medium)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+              maxHeight: '200px', overflow: 'auto', margin: 0, width: '100%',
+            }}
+          >
+            {cycle.diffSummary}
+          </pre>
+        </Flex>
+      )}
+      {/* Error */}
+      {cycle.error && (
+        <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--color-border-default)' }}>
+          <Typography variant="smallCaption-regular" color="color-status-negative">
+            {cycle.error}
+          </Typography>
+        </div>
+      )}
+      {/* Rollback action */}
+      {cycle.outcome === 'applied' && (
+        <Flex variant="row-center-start-nowrap-8" style={{ padding: '10px 12px' }}>
+          <Button
+            size="xs"
+            variant="outlined"
+            color="danger"
+            onClick={handleRollback}
+            loading={rollingBack}
+            disabled={rollingBack}
+          >
+            Rollback
+          </Button>
+        </Flex>
+      )}
+    </CollapsibleBlock>
   );
 }