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

package/src/ui/session-bar.tsx

@@ -0,0 +1,157 @@
+/**
+ * SessionBar — shows at top of workspace when an autonomous session is active.
+ * Displays session stats and provides start/pause/stop controls.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback, useRef } = React;
+const { Flex, Typography, Icon, Button, Badge, toast, formatDuration, formatCost } = require('@fw/plugin-ui-kit');
+
+interface SessionState {
+  sessionId?: string;
+  status: string;
+  currentTask?: string | null;
+  completedTasks?: number;
+  totalCost?: number;
+  startedAt?: number;
+}
+
+interface SessionBarProps {
+  callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>;
+  dispatchEvent: (name: string, detail?: unknown) => void;
+}
+
+function SessionBar({ callTool, dispatchEvent }: SessionBarProps) {
+  const [session, setSession] = useState<SessionState | null>(null);
+  const [elapsed, setElapsed] = useState(0);
+  const [starting, setStarting] = useState(false);
+  const [stopping, setStopping] = useState(false);
+  const [pausing, setPausing] = useState(false);
+
+  const prevActiveRef = useRef(false);
+
+  const pollStatus = useCallback(async () => {
+    try {
+      const result = (await callTool('fw_weaver_session', { action: 'status' })) as SessionState;
+      const isActive = result.status !== 'no active session' && result.status !== 'idle';
+      setSession(isActive ? result : null);
+
+      if (prevActiveRef.current && !isActive) {
+        dispatchEvent('fw:refresh-bot-workspace');
+      }
+      prevActiveRef.current = isActive;
+    } catch {
+      /* non-fatal */
+    }
+  }, [callTool, dispatchEvent]);
+
+  useEffect(() => {
+    pollStatus();
+    const interval = setInterval(pollStatus, 5_000);
+    return () => clearInterval(interval);
+  }, [pollStatus]);
+
+  useEffect(() => {
+    if (!session?.startedAt || session.status === 'idle') return;
+    const tick = () => setElapsed(Date.now() - (session.startedAt ?? Date.now()));
+    tick();
+    const interval = setInterval(tick, 1000);
+    return () => clearInterval(interval);
+  }, [session?.startedAt, session?.status]);
+
+  const [startError, setStartError] = useState<string | null>(null);
+
+  const handleStart = useCallback(async () => {
+    setStarting(true);
+    setStartError(null);
+    try {
+      const result = await callTool('fw_weaver_session', { action: 'start' });
+      const data = result as Record<string, unknown> | null;
+      if (data?.error) {
+        setStartError(data.error as string);
+        toast(data.error as string, { type: 'error' });
+        setStarting(false);
+        return;
+      }
+      toast('Session started', { type: 'success' });
+      dispatchEvent('fw:refresh-bot-workspace');
+      await pollStatus();
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Failed to start session';
+      setStartError(msg);
+      toast(msg, { type: 'error' });
+    }
+    setStarting(false);
+  }, [callTool, pollStatus, dispatchEvent]);
+
+  const handleStop = useCallback(async () => {
+    setStopping(true);
+    try {
+      await callTool('fw_weaver_session', { action: 'stop' });
+      toast('Session ended', { type: 'info' });
+      await pollStatus();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to stop session', { type: 'error' });
+    }
+    setStopping(false);
+  }, [callTool, pollStatus]);
+
+  const handlePause = useCallback(async () => {
+    setPausing(true);
+    try {
+      await callTool('fw_weaver_steer', { command: 'pause' });
+      toast('Session paused', { type: 'info' });
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to pause session', { type: 'error' });
+    }
+    setPausing(false);
+  }, [callTool]);
+
+  const isActive = session && session.status !== 'idle' && session.status !== 'no active session';
+
+  if (!isActive) {
+    return React.createElement(Flex, {
+      variant: 'row-center-space-between-nowrap-10',
+      style: { flexShrink: 0, padding: '8px 16px', backgroundColor: 'transparent', borderBottom: '1px solid var(--color-border-default)' },
+    },
+      React.createElement(Icon, { name: 'smartToy', size: 14, color: 'color-text-subtle' }),
+      React.createElement(Flex, { variant: 'row-center-start-nowrap-12', style: { flex: 1, fontSize: '12px' } },
+        React.createElement(Typography, {
+          variant: 'caption-regular',
+          color: startError ? 'color-status-negative' : 'color-text-subtle',
+        }, startError ?? 'No active session'),
+      ),
+      React.createElement(Flex, { variant: 'row-center-start-nowrap-6', style: { flexShrink: 0 } },
+        React.createElement(Button, {
+          size: 'sm', variant: 'clear', onClick: handleStart, loading: starting, disabled: starting,
+        }, 'Start Session'),
+      ),
+    );
+  }
+
+  return React.createElement(Flex, {
+    variant: 'row-center-space-between-nowrap-10',
+    style: { flexShrink: 0, padding: '8px 16px', backgroundColor: 'var(--color-brand-main-alpha-10)', borderBottom: '1px solid var(--color-brand-main)' },
+  },
+    React.createElement(Badge, { variant: 'success' }, 'Session'),
+    React.createElement(Flex, {
+      variant: 'row-center-start-nowrap-12',
+      style: { flex: 1, fontSize: '12px', color: 'var(--color-text-medium)' },
+    },
+      session.completedTasks != null && React.createElement('span', null, `${session.completedTasks} tasks done`),
+      session.totalCost != null && session.totalCost > 0 && React.createElement('span', null, formatCost(session.totalCost)),
+      session.startedAt && React.createElement('span', null, `${formatDuration(elapsed)} elapsed`),
+      session.currentTask && React.createElement('span', { style: { opacity: 0.7 } }, `· ${session.currentTask}`),
+    ),
+    React.createElement(Flex, { variant: 'row-center-start-nowrap-6', style: { flexShrink: 0 } },
+      React.createElement(Button, {
+        size: 'sm', variant: 'clear', onClick: handlePause, loading: pausing, disabled: pausing || stopping,
+      }, 'Pause'),
+      React.createElement(Button, {
+        size: 'sm', variant: 'clear', color: 'danger', onClick: handleStop, loading: stopping, disabled: stopping || pausing,
+      }, 'End'),
+    ),
+  );
+}
+
+export { SessionBar };
+export default SessionBar;

package/src/ui/settings-section.tsx

@@ -0,0 +1,97 @@
+/**
+ * SettingsSection — inline collapsible settings, rendered inside workspace.
+ * Starts collapsed; fetches provider/insight data on mount.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback } = React;
+const { Flex, Typography, Button, CollapsibleSection, KeyValueRow, toast } = require('@fw/plugin-ui-kit');
+
+interface SettingsSectionProps {
+  callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>;
+  dispatchEvent: (name: string, detail?: unknown) => void;
+}
+
+interface ProviderInfo {
+  name: string;
+  source: string;
+  envVarsSet?: boolean;
+}
+
+interface InsightsData {
+  trust?: { score: number; phase: number };
+  cost?: { last7Days: number; trend: string };
+  health?: { overall: number };
+}
+
+function SettingsSection({ callTool, dispatchEvent }: SettingsSectionProps) {
+  const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [insights, setInsights] = useState<InsightsData | null>(null);
+
+  const handleClear = useCallback(() => {
+    if (!confirm('Clear all bot run history? This action cannot be undone.')) return;
+    callTool('fw_weaver_history', { clear: true }).then(() => {
+      dispatchEvent('fw:refresh-bot-workspace');
+      toast('Run history cleared', { type: 'success' });
+    }).catch(() => {
+      toast('Failed to clear history', { type: 'error' });
+    });
+  }, [callTool, dispatchEvent]);
+
+  useEffect(() => {
+    Promise.all([
+      callTool('fw_weaver_providers') as Promise<ProviderInfo[] | null>,
+      callTool('fw_weaver_insights') as Promise<InsightsData | null>,
+    ]).then(([prov, ins]) => {
+      if (prov) setProviders(Array.isArray(prov) ? prov : []);
+      if (ins) setInsights(ins);
+    });
+  }, [callTool]);
+
+  const activeProvider = providers.find((p) => p.envVarsSet) ?? providers[0];
+  const trustScore = insights?.trust?.score;
+  const trustDisplay =
+    trustScore != null
+      ? (trustScore <= 1 ? (trustScore * 100).toFixed(0) : Math.round(trustScore)) + '%'
+      : '\u2014';
+
+  return React.createElement(CollapsibleSection, {
+    title: 'Settings', variant: 'list', defaultExpanded: false,
+  },
+    React.createElement(Flex, { variant: 'column-start-start-nowrap-4', style: { width: '100%' } },
+      activeProvider && React.createElement(KeyValueRow, {
+        keyName: 'Provider',
+        value: `${activeProvider.name} (${activeProvider.source})`,
+        size: 'small',
+      }),
+      insights?.trust && React.createElement(KeyValueRow, {
+        keyName: 'Trust',
+        value: `Phase ${insights.trust.phase} · ${trustDisplay}`,
+        size: 'small',
+      }),
+      insights?.health && React.createElement(KeyValueRow, {
+        keyName: 'Health',
+        value: `${insights.health.overall}/100`,
+        size: 'small',
+      }),
+      insights?.cost && React.createElement(KeyValueRow, {
+        keyName: 'Cost (7d)',
+        value: `$${insights.cost.last7Days?.toFixed(2) ?? '0.00'} · ${insights.cost.trend ?? 'stable'}`,
+        size: 'small',
+      }),
+      React.createElement(Flex, {
+        variant: 'row-center-space-between-nowrap-8',
+        style: { width: '100%', marginTop: '4px' },
+      },
+        React.createElement(Button, {
+          size: 'xs', variant: 'outlined', color: 'danger', onClick: handleClear,
+        }, 'Clear Run History'),
+        React.createElement(Typography, {
+          variant: 'smallCaption-regular', color: 'color-text-subtle',
+        }, 'Edit settings in .weaver.json'),
+      ),
+    ),
+  );
+}
+
+export { SettingsSection };
+export default SettingsSection;

package/src/ui/steer-api.ts

@@ -0,0 +1,17 @@
+/**
+ * Steer API for the workspace — sends steering commands via the pack tool API.
+ * Uses the workspace context's callTool instead of a hardcoded pack-tool URL.
+ */
+
+export type SteerCommand = 'pause' | 'resume' | 'cancel' | 'redirect';
+
+export async function sendSteerCommand(
+  callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>,
+  command: SteerCommand,
+  payload?: string,
+): Promise<void> {
+  await callTool('fw_weaver_steer', {
+    command,
+    ...(payload ? { payload } : {}),
+  });
+}

package/src/ui/trace-to-timeline.ts

@@ -0,0 +1,204 @@
+// TimelineEntry is provided by @fw/plugin-ui-kit at runtime in the sandbox.
+// Type-only import — erased at compile time, no runtime dependency.
+interface TimelineEntry {
+  id: string;
+  timestamp: Date;
+  type: 'task-started' | 'node-started' | 'node-completed' | 'node-failed' | 'agent-request' | 'user-action' | 'task-completed' | 'task-failed';
+  nodeId?: string;
+  label: string;
+  detail?: string;
+  outputs?: Array<{ portLabel: string; value: unknown }>;
+  duration?: number;
+  color?: string;
+  icon?: string;
+}
+
+// -- Historical trace helper types --
+
+export interface HistoricalTraceEvent {
+  type: 'node-start' | 'node-complete' | 'node-error';
+  nodeId: string;
+  nodeType?: string;
+  timestamp: number;
+  durationMs?: number;
+  error?: string;
+}
+
+export interface HistoricalStepLog {
+  step: string;
+  status: 'ok' | 'blocked' | 'error';
+  detail?: string;
+}
+
+export interface HistoricalPlan {
+  summary: string;
+  steps: Array<{
+    id: string;
+    operation: string;
+    description: string;
+    args?: Record<string, unknown>;
+  }>;
+}
+
+export interface HistoricalAuditEvent {
+  type: string;
+  timestamp: string;
+  runId: string;
+  data?: Record<string, unknown>;
+}
+
+export interface HistoricalCostSummary {
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCost: number;
+  model: string;
+  provider: string;
+  entries: Array<{ step: string; model: string; estimatedCost: number }>;
+}
+
+export interface HistoricalRun {
+  id: string;
+  botId?: string;
+  botName?: string;
+  workflowFile?: string;
+  instruction?: string;
+  outcome: string; // 'completed' | 'failed' | 'error' | 'skipped'
+  success?: boolean;
+  durationMs?: number;
+  duration?: number; // fallback
+  summary?: string;
+  outputs?: Record<string, unknown>;
+  startedAt?: string;
+  finishedAt?: string;
+  provider?: string;
+  cost?: number;
+  // Execution trace data
+  trace?: HistoricalTraceEvent[];
+  nodeMeta?: Record<string, { label?: string; color?: string; icon?: string }>;
+  stepLog?: HistoricalStepLog[];
+  plan?: HistoricalPlan;
+  costDetail?: HistoricalCostSummary;
+  auditTrail?: HistoricalAuditEvent[];
+}
+
+// -- Trace-to-timeline conversion --
+
+export function traceToTimeline(run: HistoricalRun): TimelineEntry[] {
+  const entries: TimelineEntry[] = [];
+  let idCounter = 0;
+
+  const meta = run.nodeMeta ?? {};
+
+  // Prefer node-level trace events (richer, with timing); fall back to stepLog
+  if (run.trace && run.trace.length > 0) {
+    const nodeStarts = new Map<string, HistoricalTraceEvent>();
+
+    for (const event of run.trace) {
+      if (event.type === 'node-start') {
+        nodeStarts.set(event.nodeId, event);
+      } else if (event.type === 'node-complete' || event.type === 'node-error') {
+        const start = nodeStarts.get(event.nodeId);
+        const duration =
+          event.durationMs ?? (start ? event.timestamp - start.timestamp : undefined);
+        const nm = meta[event.nodeId] ?? (event.nodeType ? meta[event.nodeType] : undefined);
+        entries.push({
+          id: `trace-${idCounter++}`,
+          timestamp: new Date(event.timestamp),
+          type: event.type === 'node-complete' ? 'node-completed' : 'node-failed',
+          nodeId: event.nodeId,
+          label: nm?.label ?? event.nodeType ?? event.nodeId,
+          detail: event.error,
+          duration,
+          color: nm?.color,
+          icon: nm?.icon,
+        });
+        nodeStarts.delete(event.nodeId);
+      }
+    }
+
+    // Any nodes still in nodeStarts are still running (shouldn't happen for historical)
+    for (const [nodeId, event] of nodeStarts) {
+      const nm = meta[nodeId] ?? (event.nodeType ? meta[event.nodeType] : undefined);
+      entries.push({
+        id: `trace-${idCounter++}`,
+        timestamp: new Date(event.timestamp),
+        type: 'node-started',
+        nodeId,
+        label: nm?.label ?? event.nodeType ?? nodeId,
+        color: nm?.color,
+        icon: nm?.icon,
+      });
+    }
+  } else if (run.stepLog && run.stepLog.length > 0) {
+    // Fallback: use stepLog (coarser, from plan execution steps)
+    for (const step of run.stepLog) {
+      const type =
+        step.status === 'ok'
+          ? 'node-completed'
+          : step.status === 'error'
+            ? 'node-failed'
+            : 'node-completed'; // 'blocked' treated as completed with detail
+      entries.push({
+        id: `step-${idCounter++}`,
+        timestamp: new Date(run.startedAt ?? Date.now()),
+        type: type as TimelineEntry['type'],
+        label: step.step,
+        detail: step.detail,
+        icon: step.status === 'ok' ? 'success' : step.status === 'error' ? 'error' : 'warning',
+      });
+    }
+  }
+
+  // Append a task-level result entry for failed/completed runs
+  if (run.outcome === 'failed' || run.outcome === 'error') {
+    // Extract error details from audit trail
+    let errorDetail = '';
+    if (run.auditTrail) {
+      for (const a of run.auditTrail) {
+        if (a.type === 'step-complete' && a.data) {
+          const errors = a.data.errors as string[] | undefined;
+          if (errors && errors.length > 0) {
+            errorDetail = errors
+              .map((e: string) => (e.length > 120 ? e.slice(0, 117) + '...' : e))
+              .join('\n');
+            break;
+          }
+        }
+      }
+    }
+    // Fallback to summary
+    if (!errorDetail && run.summary) {
+      const parts = run.summary.split('|').map((p: string) => p.trim());
+      const outcomePart = parts.find((p: string) => p.startsWith('Outcome:'));
+      const summaryPart = parts.find((p: string) => p.startsWith('Summary:'));
+      errorDetail = summaryPart?.replace('Summary:', '').trim() ?? outcomePart ?? run.summary;
+    }
+
+    entries.push({
+      id: `result-${idCounter++}`,
+      timestamp: new Date(run.finishedAt ?? run.startedAt ?? Date.now()),
+      type: 'task-failed',
+      label: 'Task failed',
+      detail: errorDetail || 'Unknown failure',
+      icon: 'error',
+    });
+  } else if (run.outcome === 'completed' && run.success) {
+    entries.push({
+      id: `result-${idCounter++}`,
+      timestamp: new Date(run.finishedAt ?? run.startedAt ?? Date.now()),
+      type: 'task-completed',
+      label: 'Task completed',
+      detail: run.summary?.includes('|')
+        ? run.summary
+            .split('|')
+            .find((p: string) => p.trim().startsWith('Summary:'))
+            ?.replace('Summary:', '')
+            .trim()
+        : undefined,
+    });
+  }
+
+  // Sort by timestamp
+  entries.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+  return entries;
+}