@synergenius/flow-weaver-pack-weaver 0.9.53 → 0.9.55

package/src/ui/bot-workspace.tsx

@@ -0,0 +1,406 @@
+/**
+ * Weaver Bot Workspace — center dock execution workspace.
+ *
+ * Pack-contributed component loaded via botUI.workspace manifest slot.
+ * Receives PackWorkspaceContext from platform — uses it for all tool calls,
+ * event streaming, and window management. Zero platform imports.
+ *
+ * Single chronological timeline (oldest → newest, like a conversation):
+ * - Completed runs at the top
+ * - Live execution streaming in the middle
+ * - Queued tasks at the bottom
+ * - Genesis cycles interleaved with history
+ *
+ * Layout:
+ * - Session bar (top)
+ * - Settings (collapsed)
+ * - Scrollable timeline (main area)
+ * - Input bar (pinned bottom)
+ */
+const React = require('react');
+const { useRef, useEffect, useState, useCallback, useMemo } = React;
+const {
+  Flex, ScrollArea, EmptyState, TaskBlock, toast, usePackWorkspace, useEventStream,
+} = require('@fw/plugin-ui-kit');
+
+// Local pack-specific components and utilities (bundled by esbuild)
+import { SessionBar } from './session-bar';
+import { SettingsSection } from './settings-section';
+import { QueueInput } from './queue-input';
+import { GenesisBlock } from './genesis-block';
+import { ApprovalCard } from './approval-card';
+import { useStreamTimeline } from './use-stream-timeline';
+import { traceToTimeline } from './trace-to-timeline';
+import { sendSteerCommand } from './steer-api';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface QueuedTask {
+  id: string;
+  instruction: string;
+  status: string;
+  priority: number;
+}
+
+interface GenesisCycleData {
+  id: string;
+  timestamp: string;
+  durationMs: number;
+  proposal: Record<string, unknown> | null;
+  outcome: string;
+  diffSummary: string | null;
+  error: string | null;
+}
+
+interface HistoricalRun {
+  id: string;
+  outcome: string;
+  success?: boolean;
+  summary?: string;
+  startedAt?: string;
+  durationMs?: number;
+  duration?: number;
+  cost?: number;
+  costDetail?: Record<string, unknown>;
+  workflowFile?: string;
+  plan?: Record<string, unknown>;
+  trace?: Array<Record<string, unknown>>;
+  nodeMeta?: Record<string, Record<string, unknown>>;
+  auditTrail?: Array<Record<string, unknown>>;
+  params?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+interface TimelineItem {
+  kind: 'run' | 'genesis';
+  timestamp: number;
+  run?: HistoricalRun;
+  runTimeline?: Array<Record<string, unknown>>;
+  genesis?: GenesisCycleData;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function BotWorkspace() {
+  const ctx = usePackWorkspace();
+  const { callTool, windowData, dispatchEvent, onRefresh } = ctx;
+  const packId = ctx.packId;
+
+  const isLive = windowData?.live === true && !!windowData?.runId;
+  const highlightRunId = windowData?.runId as string | undefined;
+
+  // ── Live execution (SSE stream) ──────────────────────────────
+  const stream = useEventStream();
+  const {
+    timeline: liveTimeline,
+    phase: livePhase,
+    instruction: liveInstruction,
+    elapsed,
+    cost,
+    plan,
+    awaitingApproval,
+  } = useStreamTimeline(stream.events, stream.isDone);
+
+  // Start SSE stream for direct live run (from AI chat)
+  useEffect(() => {
+    if (!isLive || !windowData?.runId) return;
+    stream.start(packId, 'fw_weaver_events', windowData.runId as string);
+    return () => stream.stop();
+  }, [isLive, packId, windowData?.runId]);
+
+  // Auto-detect active session task
+  const [sessionRunId, setSessionRunId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isLive) return;
+    const poll = async () => {
+      try {
+        const status = (await callTool('fw_weaver_status')) as Record<string, unknown> | null;
+        const runId = (status?.currentRunId as string) ?? null;
+        const alive = status?.alive as boolean | null;
+        if (runId && alive === false) {
+          setSessionRunId(null);
+        } else {
+          setSessionRunId(runId);
+        }
+      } catch { /* non-fatal */ }
+    };
+    poll();
+    const interval = setInterval(poll, 3_000);
+    return () => clearInterval(interval);
+  }, [isLive, callTool]);
+
+  // Start SSE for session's current task
+  useEffect(() => {
+    if (!sessionRunId || isLive) return;
+    stream.start(packId, 'fw_weaver_events', sessionRunId);
+    return () => stream.stop();
+  }, [sessionRunId, packId, isLive]);
+
+  // Auto-scroll
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [liveTimeline.length, stream.events.length]);
+
+  // Steer controls
+  const [pausing, setPausing] = useState(false);
+  const [stopping, setStopping] = useState(false);
+
+  const handlePause = useCallback(async () => {
+    setPausing(true);
+    try {
+      await sendSteerCommand(callTool, 'pause');
+      toast('Pause signal sent', { type: 'info' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to pause', { type: 'error' });
+    }
+    setPausing(false);
+  }, [callTool]);
+
+  const handleStop = useCallback(async () => {
+    setStopping(true);
+    try {
+      await sendSteerCommand(callTool, 'cancel');
+      toast('Stopping — will take effect after current node completes', { type: 'info' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to stop', { type: 'error' });
+      setStopping(false);
+    }
+  }, [callTool]);
+
+  // ── History + Genesis + Queue ────────────────────────────────
+  const [history, setHistory] = useState<HistoricalRun[]>([]);
+  const [genesisCycles, setGenesisCycles] = useState<GenesisCycleData[]>([]);
+  const [queuedTasks, setQueuedTasks] = useState<QueuedTask[]>([]);
+  const [removingIds, setRemovingIds] = useState<Set<string>>(new Set());
+  const [expandedRunId, setExpandedRunId] = useState<string | null>(
+    highlightRunId && !isLive ? highlightRunId : null,
+  );
+  const [liveExpanded, setLiveExpanded] = useState(true);
+
+  const refreshData = useCallback(() => {
+    callTool('fw_weaver_history', { limit: 20 }).then((data: unknown) => {
+      if (Array.isArray(data)) {
+        setHistory(
+          data.map((r: Record<string, unknown>) => {
+            const costObj = r.cost && typeof r.cost === 'object' ? (r.cost as Record<string, unknown>) : undefined;
+            return { ...r, costDetail: costObj, cost: costObj?.totalCost } as unknown as HistoricalRun;
+          }),
+        );
+      } else {
+        setHistory([]);
+      }
+    });
+    callTool('fw_weaver_insights').then((data: unknown) => {
+      const d = data as Record<string, unknown> | null;
+      if (d?.evolution) {
+        const evo = d.evolution as Record<string, unknown>;
+        if (Array.isArray(evo.recentCycles)) {
+          setGenesisCycles(evo.recentCycles.slice(0, 10) as GenesisCycleData[]);
+        }
+      }
+    });
+    callTool('fw_weaver_queue', { action: 'list' }).then((data: unknown) => {
+      const visible = (Array.isArray(data) ? (data as QueuedTask[]) : []).filter(
+        (t: QueuedTask) => t.status === 'pending' || t.status === 'running',
+      );
+      setQueuedTasks(visible);
+    });
+  }, [callTool]);
+
+  useEffect(() => { refreshData(); }, [refreshData]);
+
+  // Poll queue every 10s
+  useEffect(() => {
+    const interval = setInterval(() => {
+      callTool('fw_weaver_queue', { action: 'list' }).then((data: unknown) => {
+        const visible = (Array.isArray(data) ? (data as QueuedTask[]) : []).filter(
+          (t: QueuedTask) => t.status === 'pending' || t.status === 'running',
+        );
+        setQueuedTasks(visible);
+      });
+    }, 10_000);
+    return () => clearInterval(interval);
+  }, [callTool]);
+
+  // Listen for refresh events
+  useEffect(() => {
+    return onRefresh(() => refreshData());
+  }, [refreshData, onRefresh]);
+
+  // Refresh when session task changes
+  useEffect(() => {
+    if (sessionRunId !== null) refreshData();
+  }, [sessionRunId, refreshData]);
+
+  const handleRemoveTask = useCallback(async (id: string) => {
+    setRemovingIds((prev: Set<string>) => new Set(prev).add(id));
+    try {
+      await callTool('fw_weaver_queue', { action: 'remove', id });
+      refreshData();
+      toast('Task removed', { type: 'warning' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to remove task', { type: 'error' });
+    }
+    setRemovingIds((prev: Set<string>) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, [callTool, refreshData]);
+
+  // Build unified timeline
+  const timelineItems = useMemo(() => {
+    const items: TimelineItem[] = [];
+    for (const run of history) {
+      items.push({ kind: 'run', timestamp: new Date(run.startedAt ?? 0).getTime(), run, runTimeline: traceToTimeline(run) });
+    }
+    for (const cycle of genesisCycles) {
+      items.push({ kind: 'genesis', timestamp: new Date(cycle.timestamp).getTime(), genesis: cycle });
+    }
+    items.sort((a: TimelineItem, b: TimelineItem) => a.timestamp - b.timestamp);
+    return items;
+  }, [history, genesisCycles]);
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedRunId((prev: string | null) => (prev === id ? null : id));
+  }, []);
+
+  // ── Render ────────────────────────────────────────────────────
+
+  const isStreaming = isLive || !!sessionRunId;
+  const hasContent = isStreaming || timelineItems.length > 0 || queuedTasks.length > 0;
+
+  // Helper to extract instruction text from a run
+  function extractInstruction(run: HistoricalRun): string {
+    let text = '';
+    if (run.params) {
+      try {
+        const taskJson = (run.params as Record<string, unknown>).taskJson as string;
+        if (taskJson) {
+          const task = JSON.parse(taskJson) as Record<string, unknown>;
+          if (task.instruction) text = task.instruction as string;
+        }
+      } catch { /* not JSON */ }
+    }
+    if (!text && run.summary) {
+      const summary = run.summary;
+      if (summary.includes('|')) {
+        const parts = summary.split('|').map((p: string) => p.trim());
+        const taskPart = parts.find((p: string) => p.startsWith('Task:'));
+        const summaryPart = parts.find((p: string) => p.startsWith('Summary:'));
+        text = taskPart?.replace('Task:', '').trim() ?? summaryPart?.replace('Summary:', '').trim() ?? parts[0] ?? '';
+      } else {
+        text = summary;
+      }
+    }
+    if (!text) {
+      const wf = run.workflowFile;
+      if (wf) {
+        const parts = wf.split('/');
+        text = parts[parts.length - 1] ?? 'Bot run';
+      } else {
+        text = 'Bot run';
+      }
+    }
+    if (text.length > 120) text = text.slice(0, 117) + '...';
+    return text;
+  }
+
+  // Approval slot for running TaskBlock
+  const approvalSlot = awaitingApproval && plan
+    ? React.createElement(ApprovalCard, { plan, callTool })
+    : null;
+
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
+    // Session bar
+    React.createElement(SessionBar, { callTool, dispatchEvent }),
+
+    // Settings
+    React.createElement(SettingsSection, { callTool, dispatchEvent }),
+
+    // Main scrollable timeline
+    React.createElement(Flex, { variant: 'column-stretch-start-nowrap-0', style: { flex: 1, minHeight: 0 } },
+      React.createElement(ScrollArea, { ref: scrollRef },
+        React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8', style: { padding: '12px 16px' } },
+          // Empty state
+          !hasContent && React.createElement(EmptyState, {
+            icon: 'smartToy', message: 'No bot runs yet',
+            description: 'Ask the AI assistant to run a task, or add tasks below.',
+          }),
+
+          // History + Genesis
+          ...timelineItems.map((item: TimelineItem) => {
+            if (item.kind === 'genesis' && item.genesis) {
+              return React.createElement(GenesisBlock, {
+                key: `genesis-${item.genesis.id}`, cycle: item.genesis, callTool,
+              });
+            }
+            if (item.kind === 'run' && item.run) {
+              const run = item.run;
+              const runId = run.id;
+              const isExpanded = expandedRunId === runId;
+              const isSuccess = run.outcome === 'completed' || run.success === true;
+              return React.createElement(TaskBlock, {
+                key: `run-${runId}`,
+                state: isSuccess ? 'completed' : 'failed',
+                instruction: extractInstruction(run),
+                timeline: item.runTimeline ?? [],
+                cost: typeof run.cost === 'number' ? run.cost : ((run.costDetail?.totalCost as number) ?? null),
+                plan: run.plan,
+                startedAt: run.startedAt,
+                durationMs: run.durationMs ?? run.duration,
+                expanded: isExpanded,
+                onToggleExpand: () => toggleExpand(runId),
+              });
+            }
+            return null;
+          }),
+
+          // Live execution
+          isStreaming && React.createElement(TaskBlock, {
+            state: 'running',
+            instruction: liveInstruction ?? (windowData?.instruction as string) ?? 'Running...',
+            timeline: liveTimeline,
+            phase: livePhase,
+            elapsed,
+            cost,
+            plan,
+            error: stream.error,
+            approvalSlot,
+            onPause: handlePause,
+            onStop: handleStop,
+            pauseLoading: pausing,
+            stopLoading: stopping,
+            expanded: liveExpanded,
+            onToggleExpand: () => setLiveExpanded((v: boolean) => !v),
+          }),
+
+          // Queued tasks
+          ...(isStreaming ? queuedTasks.filter((t: QueuedTask) => t.status !== 'running') : queuedTasks)
+            .map((task: QueuedTask) =>
+              React.createElement(TaskBlock, {
+                key: task.id, state: 'pending', instruction: task.instruction,
+                onRemove: () => handleRemoveTask(task.id),
+                removeLoading: removingIds.has(task.id),
+              }),
+            ),
+        ),
+      ),
+    ),
+
+    // Input bar
+    React.createElement(QueueInput, { callTool, onTaskAdded: refreshData }),
+  );
+}
+
+module.exports = BotWorkspace;

package/src/ui/genesis-block.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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, Tag, Button, toast, formatTimestamp } = require('@fw/plugin-ui-kit');
+
+interface GenesisOperation {
+  type: string;
+  args?: Record<string, unknown>;
+  costUnits: number;
+  rationale: string;
+}
+
+interface GenesisProposal {
+  operations: GenesisOperation[];
+  totalCost: number;
+  impactLevel: string;
+  summary: string;
+  rationale: string;
+}
+
+export interface GenesisCycleData {
+  id: string;
+  timestamp: string;
+  durationMs: number;
+  proposal: GenesisProposal | null;
+  outcome: string;
+  diffSummary: string | null;
+  error: string | null;
+}
+
+interface GenesisBlockProps {
+  cycle: GenesisCycleData;
+  callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>;
+}
+
+const OUTCOME_BADGE_VARIANTS: Record<string, string> = {
+  applied: 'success',
+  'rolled-back': 'error',
+  rejected: 'warning',
+  stabilized: 'success',
+  'no-change': 'default',
+  error: 'error',
+};
+
+const OUTCOME_STATUS: Record<string, string> = {
+  applied: 'completed',
+  stabilized: 'completed',
+  'rolled-back': 'error',
+  rejected: 'error',
+  error: 'error',
+  'no-change': 'completed',
+};
+
+function GenesisBlock({ cycle, callTool }: GenesisBlockProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [rollingBack, setRollingBack] = useState(false);
+
+  const handleRollback = useCallback(async () => {
+    setRollingBack(true);
+    try {
+      await callTool('fw_weaver_genesis_rollback', { cycleId: cycle.id });
+      toast('Genesis cycle rolled back', { type: 'success' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to rollback', { type: 'error' });
+    }
+    setRollingBack(false);
+  }, [callTool, cycle.id]);
+
+  const summary = cycle.proposal?.summary ?? `Genesis cycle ${cycle.id.slice(0, 8)}`;
+  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(Tag, { size: 'small', color: 'info' }, op.type),
+          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'),
+    ),
+  );
+}
+
+export { GenesisBlock };
+export default GenesisBlock;

package/src/ui/queue-input.tsx

@@ -0,0 +1,56 @@
+/**
+ * QueueInput — pinned input bar for adding tasks to the queue.
+ * Rendered at the very bottom of the workspace, outside the scroll area.
+ */
+const React = require('react');
+const { useState, useCallback } = React;
+const { Flex, IconButton, Input, toast } = require('@fw/plugin-ui-kit');
+
+interface QueueInputProps {
+  callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>;
+  onTaskAdded?: () => void;
+}
+
+function QueueInput({ callTool, onTaskAdded }: QueueInputProps) {
+  const [newTask, setNewTask] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  const handleAdd = useCallback(async () => {
+    const instruction = newTask.trim();
+    if (!instruction) return;
+    setAdding(true);
+    try {
+      await callTool('fw_weaver_queue', { action: 'add', task: instruction });
+      setNewTask('');
+      onTaskAdded?.();
+      toast('Task added to queue', { type: 'success' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to add task', { type: 'error' });
+    }
+    setAdding(false);
+  }, [callTool, newTask, onTaskAdded]);
+
+  return React.createElement(Flex, {
+    variant: 'row-center-start-nowrap-6',
+    style: {
+      flexShrink: 0, padding: '8px 16px',
+      borderTop: '1px solid var(--color-border-default)',
+      width: '100%', boxSizing: 'border-box',
+    },
+  },
+    React.createElement(Input, {
+      type: 'text', size: 'medium', placeholder: 'Add a task...',
+      value: newTask, onChange: setNewTask, onEnter: handleAdd, disabled: adding,
+      defaultBoxStyle: { flex: 1, minWidth: 0 },
+      inputBoxStyle: { maxWidth: 'none' },
+    }),
+    React.createElement(IconButton, {
+      icon: 'add', size: 'md', variant: 'fill', color: 'primary',
+      'aria-label': 'Add task', onClick: handleAdd, loading: adding,
+      disabled: adding || !newTask.trim(),
+    }),
+  );
+}
+
+export { QueueInput };
+export default QueueInput;