@synergenius/flow-weaver-pack-weaver 0.9.20 → 0.9.22

package/src/ui/bot-activity.tsx

@@ -0,0 +1,343 @@
+/**
+ * Weaver Bot Activity Panel — sidebar activity feed.
+ * Shows running bot, queued tasks, recent runs, and KPI bar.
+ * Runs in the platform bot-panel sandbox.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback, useRef } = React;
+const { Typography } = require('@fw/plugin-ui-kit');
+const { Icon } = require('@fw/plugin-ui-kit');
+const { IconButton } = require('@fw/plugin-ui-kit');
+const { Badge } = require('@fw/plugin-ui-kit');
+const { ScrollArea } = require('@fw/plugin-ui-kit');
+const { LoadingSpinner } = require('@fw/plugin-ui-kit');
+const { styled } = require('@fw/plugin-theme');
+
+const REFRESH_INTERVAL = 30_000;
+
+function packToolUrl(toolName: string) {
+  // packName is injected via props — but for now the component knows its own pack
+  return `/api/pack-tool/@synergenius/flow-weaver-pack-weaver/${toolName}`;
+}
+
+async function callTool(toolName: string, body: Record<string, unknown> = {}) {
+  const res = await fetch(packToolUrl(toolName), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    credentials: 'include',
+  });
+  if (!res.ok) throw new Error('Request failed');
+  const json = await res.json();
+  if (json.isError) throw new Error(json.result);
+  try { return JSON.parse(json.result); } catch { return json.result; }
+}
+
+// --- Types ---
+
+interface HistoryEntry {
+  id?: string;
+  outcome: string;
+  summary?: string;
+  workflowFile?: string;
+  startedAt: string;
+  duration?: number;
+}
+
+interface InsightsData {
+  health: { overall: number };
+  trust: { phase: number; score: number };
+  cost: { last7Days: number };
+}
+
+interface QueueEntry {
+  id: string;
+  instruction: string;
+  priority: number;
+}
+
+// --- Styled Components ---
+
+const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  overflow: 'hidden',
+});
+
+const SectionHeader = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+  padding: '10px 12px 4px',
+});
+
+const RunningCard = styled.div({
+  margin: '4px 12px 8px',
+  padding: '10px 12px',
+  borderRadius: '$border-radius-compact',
+  backgroundColor: '$color-surface-elevated',
+  borderLeft: '3px solid $color-brand-main',
+  cursor: 'pointer',
+  '&:hover': { opacity: 0.85 },
+});
+
+const RunningHeader = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  marginBottom: '6px',
+});
+
+const RunningControls = styled.div({
+  display: 'flex',
+  gap: '4px',
+  marginLeft: 'auto',
+});
+
+const QueueItem = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '6px 12px',
+  borderBottom: '1px solid $color-border-default',
+});
+
+const RunRow = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '8px 12px',
+  cursor: 'pointer',
+  borderBottom: '1px solid $color-border-default',
+  '&:hover': { backgroundColor: '$color-surface-elevated' },
+});
+
+const RunText = styled.div({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+const KpiBar = styled.div({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: '12px',
+  padding: '8px 12px',
+  borderTop: '1px solid $color-border-default',
+  flexShrink: 0,
+});
+
+const EmptyState = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '8px',
+  padding: '24px 16px',
+  flex: 1,
+});
+
+// --- Helpers ---
+
+const outcomeConfig: Record<string, { icon: string; color: string }> = {
+  completed: { icon: 'taskAlt', color: 'color-status-positive' },
+  success: { icon: 'taskAlt', color: 'color-status-positive' },
+  failed: { icon: 'error', color: 'color-status-negative' },
+  error: { icon: 'error', color: 'color-status-negative' },
+  skipped: { icon: 'minus', color: 'color-text-subtle' },
+};
+
+function formatTime(iso: string): string {
+  try {
+    const diffMs = Date.now() - new Date(iso).getTime();
+    if (diffMs < 0) return 'just now';
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1) return 'now';
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffH = Math.floor(diffMin / 60);
+    if (diffH < 24) return `${diffH}h ago`;
+    return `${Math.floor(diffH / 24)}d ago`;
+  } catch { return ''; }
+}
+
+function healthColor(score: number): string {
+  if (score >= 80) return 'var(--color-status-positive)';
+  if (score >= 50) return 'var(--color-status-caution)';
+  return 'var(--color-status-negative)';
+}
+
+// --- Component ---
+
+function BotActivity({ packName, botId }: { packName: string; botId: string }) {
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [queue, setQueue] = useState<QueueEntry[]>([]);
+  const [insights, setInsights] = useState<InsightsData | null>(null);
+  const [status, setStatus] = useState<{ state: string; currentTask?: string } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const timerRef = useRef<ReturnType<typeof setInterval>>();
+
+  const fetchAll = useCallback(async () => {
+    const [hist, q, ins, st] = await Promise.allSettled([
+      callTool('fw_weaver_history', { limit: 15 }),
+      callTool('fw_weaver_queue', { action: 'list' }),
+      callTool('fw_weaver_insights'),
+      callTool('fw_weaver_status'),
+    ]);
+    if (hist.status === 'fulfilled') setHistory(Array.isArray(hist.value) ? hist.value : []);
+    if (q.status === 'fulfilled') setQueue(Array.isArray(q.value) ? q.value : []);
+    if (ins.status === 'fulfilled') setInsights(ins.value);
+    if (st.status === 'fulfilled') setStatus(st.value);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchAll();
+    timerRef.current = setInterval(fetchAll, REFRESH_INTERVAL);
+    return () => clearInterval(timerRef.current);
+  }, [fetchAll]);
+
+  // Open center workspace via platform's window system
+  const openWorkspace = useCallback((runId?: string) => {
+    // Dispatch custom event that the platform's BotPanel listens for
+    window.dispatchEvent(new CustomEvent('fw:open-bot-workspace', {
+      detail: { runId, botId },
+    }));
+  }, [botId]);
+
+  const handleRemoveQueueItem = useCallback(async (id: string) => {
+    await callTool('fw_weaver_queue', { action: 'remove', id });
+    setQueue((prev) => prev.filter((q) => q.id !== id));
+  }, []);
+
+  const handlePause = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    await callTool('fw_weaver_steer', { command: 'pause' });
+  }, []);
+
+  const handleStop = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    await callTool('fw_weaver_steer', { command: 'cancel' });
+  }, []);
+
+  if (loading) return (
+    <EmptyState>
+      <LoadingSpinner size="small" />
+    </EmptyState>
+  );
+
+  const isRunning = status?.state && status.state !== 'idle' && status.state !== 'no active session';
+  const recentRuns = history.slice(0, 15);
+
+  return (
+    <Container>
+      {/* RUNNING */}
+      {isRunning && status && (
+        <>
+          <SectionHeader>
+            <Icon name="playArrow" size={12} color="color-brand-main" />
+            <Typography variant="smallCaption-bold" color="color-text-subtle" style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              Running
+            </Typography>
+          </SectionHeader>
+          <RunningCard onClick={() => openWorkspace()}>
+            <RunningHeader>
+              <Badge variant="info">{status.state}</Badge>
+              <RunningControls>
+                <IconButton icon="pause" size="xs" variant="clear" onClick={handlePause} title="Pause" />
+                <IconButton icon="stop" size="xs" variant="clear" onClick={handleStop} title="Stop" />
+              </RunningControls>
+            </RunningHeader>
+            {status.currentTask && (
+              <Typography variant="caption-regular" color="color-text-medium" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {status.currentTask}
+              </Typography>
+            )}
+          </RunningCard>
+        </>
+      )}
+
+      {/* QUEUED */}
+      {queue.length > 0 && (
+        <>
+          <SectionHeader>
+            <Icon name="pendingActions" size={12} color="color-text-subtle" />
+            <Typography variant="smallCaption-bold" color="color-text-subtle" style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              Queued ({queue.length})
+            </Typography>
+          </SectionHeader>
+          {queue.map((q: QueueEntry) => (
+            <QueueItem key={q.id}>
+              <Icon name="pending" size={14} color="color-text-subtle" />
+              <Typography variant="caption-regular" color="color-text-medium" style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {q.instruction}
+              </Typography>
+              <IconButton icon="close" size="xs" variant="clear" onClick={() => handleRemoveQueueItem(q.id)} title="Remove" />
+            </QueueItem>
+          ))}
+        </>
+      )}
+
+      {/* RECENT */}
+      <SectionHeader>
+        <Icon name="scheduled" size={12} color="color-text-subtle" />
+        <Typography variant="smallCaption-bold" color="color-text-subtle" style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+          Recent
+        </Typography>
+        <div style={{ flex: 1 }} />
+        <IconButton icon="refresh" size="xs" variant="clear" onClick={fetchAll} title="Refresh" />
+      </SectionHeader>
+
+      <ScrollArea style={{ flex: 1 }}>
+        {recentRuns.length === 0 ? (
+          <EmptyState>
+            <Icon name="info" size={20} color="color-text-subtle" />
+            <Typography variant="caption-regular" color="color-text-subtle">
+              No recent runs. Ask Weaver to run a bot.
+            </Typography>
+          </EmptyState>
+        ) : (
+          recentRuns.map((run: HistoryEntry, i: number) => {
+            const oc = outcomeConfig[run.outcome] ?? { icon: 'help', color: 'color-text-subtle' };
+            return (
+              <RunRow key={run.id ?? i} onClick={() => openWorkspace(run.id)}>
+                <Icon name={oc.icon as any} size={14} color={oc.color} />
+                <RunText>
+                  <Typography variant="caption-regular" color="color-text-medium">
+                    {run.summary ?? run.workflowFile ?? run.outcome}
+                  </Typography>
+                </RunText>
+                <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ fontFamily: 'var(--typography-family-mono)', flexShrink: 0 }}>
+                  {formatTime(run.startedAt)}
+                </Typography>
+              </RunRow>
+            );
+          })
+        )}
+      </ScrollArea>
+
+      {/* KPI BAR */}
+      {insights && (
+        <KpiBar>
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            <span style={{ color: healthColor(insights.health?.overall ?? 0), fontWeight: 600 }}>
+              {insights.health?.overall ?? 0}
+            </span>
+            {' '}health
+          </Typography>
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            <span style={{ fontWeight: 600 }}>P{insights.trust?.phase ?? '?'}</span>
+            {' '}trust
+          </Typography>
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            <span style={{ fontWeight: 600 }}>${(insights.cost?.last7Days ?? 0).toFixed(2)}</span>
+            /7d
+          </Typography>
+        </KpiBar>
+      )}
+    </Container>
+  );
+}
+
+module.exports = BotActivity;

package/src/ui/bot-config.tsx

@@ -1,17 +1,19 @@
 /**
- * Weaver Bot Config Panel — read-only configuration summary.
+ * Weaver Bot Config Panel — shows active configuration (detected + configured).
  * Runs in the platform bot-panel sandbox.
  */
 const React = require('react');
 const { useState, useEffect, useCallback } = React;
 const { Typography } = require('@fw/plugin-ui-kit');
-const { Icon } = require('@fw/plugin-ui-kit');
 const { CollapsibleSection } = require('@fw/plugin-ui-kit');
 const { LoadingSpinner } = require('@fw/plugin-ui-kit');
 const { Banner } = require('@fw/plugin-ui-kit');
 const { IconButton } = require('@fw/plugin-ui-kit');
+const { Badge } = require('@fw/plugin-ui-kit');
 const { styled } = require('@fw/plugin-theme');
 
+const BASE = '/api/pack-tool/@synergenius/flow-weaver-pack-weaver';
+
 const ConfigRow = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
@@ -21,7 +23,20 @@ const ConfigRow = styled.div({
   '&:last-of-type': { borderBottom: 'none' },
 });
 
-const TOOL_URL = '/api/pack-tool/@synergenius/flow-weaver-pack-weaver/fw_weaver_insights';
+const Footer = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginTop: '10px',
+  paddingTop: '6px',
+  borderTop: '1px solid $color-border-default',
+});
+
+interface ProviderInfo {
+  name: string;
+  source: string;
+  envVarsSet: boolean;
+}
 
 interface InsightsResult {
   health: { overall: number };
@@ -29,23 +44,34 @@ interface InsightsResult {
   trust: { phase: number; score: number };
 }
 
+function callTool(tool: string, body: Record<string, unknown> = {}) {
+  return fetch(`${BASE}/${tool}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    credentials: 'include',
+  }).then(async res => {
+    if (!res.ok) throw new Error('Request failed');
+    const json = await res.json();
+    if (json.isError) throw new Error(json.result);
+    try { return JSON.parse(json.result); } catch { return json.result; }
+  });
+}
+
 function BotConfig({ packName, botId }: { packName: string; botId: string }) {
-  const [data, setData] = useState<InsightsResult | null>(null);
+  const [insights, setInsights] = useState<InsightsResult | null>(null);
+  const [providers, setProviders] = useState<ProviderInfo[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
   const fetchData = useCallback(async () => {
     try {
-      const res = await fetch(TOOL_URL, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({}),
-        credentials: 'include',
-      });
-      if (!res.ok) { setError('Failed to fetch'); setLoading(false); return; }
-      const json = await res.json();
-      if (json.isError) { setError(json.result); setLoading(false); return; }
-      setData(JSON.parse(json.result));
+      const [ins, provs] = await Promise.allSettled([
+        callTool('fw_weaver_insights'),
+        callTool('fw_weaver_providers'),
+      ]);
+      if (ins.status === 'fulfilled') setInsights(ins.value);
+      if (provs.status === 'fulfilled' && Array.isArray(provs.value)) setProviders(provs.value);
       setError(null);
     } catch (e: any) {
       setError(e.message ?? 'Failed to load');
@@ -56,49 +82,66 @@ function BotConfig({ packName, botId }: { packName: string; botId: string }) {
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
-  if (loading) return <LoadingSpinner size="small" />;
+  if (loading) return (
+    <div style={{ padding: 16, display: 'flex', justifyContent: 'center' }}>
+      <LoadingSpinner size="small" />
+    </div>
+  );
 
-  if (error) return (
+  if (error && !insights) return (
     <div style={{ padding: '8px 12px' }}>
       <Banner status="danger" size="small">{error}</Banner>
     </div>
   );
 
-  const bot = data?.bots?.find((b: any) => b.name === botId) ?? data?.bots?.[0];
-  const provider = bot?.provider ?? 'Not configured';
+  // Determine active provider — prefer configured, fall back to first available
+  const bot = insights?.bots?.find((b: any) => b.name === botId) ?? insights?.bots?.[0];
+  const configuredProvider = bot?.provider;
+  const availableProvider = providers.find((p: ProviderInfo) => p.envVarsSet);
+  const activeProvider = configuredProvider || availableProvider?.name;
+  const isAutoDetected = !configuredProvider && !!availableProvider;
   const approval = bot?.approvalMode ?? 'auto';
-  const hasBots = (data?.bots?.length ?? 0) > 0;
+  const trustPhase = insights?.trust?.phase ?? 1;
+  const trustScore = insights?.trust?.score ?? 0;
+  const noProvider = !activeProvider;
 
   return (
     <CollapsibleSection title="Configuration" defaultExpanded>
       <div style={{ padding: '4px 12px 12px' }}>
         <ConfigRow>
           <Typography variant="smallCaption-bold" color="color-text-subtle">Provider</Typography>
-          <Typography variant="caption-regular" color="color-text-high">{provider}</Typography>
+          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <Typography variant="caption-regular" color="color-text-high">
+              {activeProvider ?? 'None detected'}
+            </Typography>
+            {isAutoDetected && <Badge variant="default">auto</Badge>}
+          </span>
         </ConfigRow>
         <ConfigRow>
           <Typography variant="smallCaption-bold" color="color-text-subtle">Approval</Typography>
           <Typography variant="caption-regular" color="color-text-high">{approval}</Typography>
         </ConfigRow>
         <ConfigRow>
-          <Typography variant="smallCaption-bold" color="color-text-subtle">Trust Phase</Typography>
-          <Typography variant="caption-regular" color="color-text-high">P{data?.trust?.phase ?? '?'} ({data?.trust?.score ?? 0}/100)</Typography>
+          <Typography variant="smallCaption-bold" color="color-text-subtle">Trust</Typography>
+          <Typography variant="caption-regular" color="color-text-high">
+            P{trustPhase} ({trustScore}/100)
+          </Typography>
         </ConfigRow>
 
-        {!hasBots && (
-          <div style={{ marginTop: 12 }}>
-            <Banner status="info" size="small">
-              No .weaver.json detected. Create one to configure providers and approval modes.
+        {noProvider && (
+          <div style={{ marginTop: 10 }}>
+            <Banner status="warning" size="small">
+              No AI provider detected. Set ANTHROPIC_API_KEY or install Claude CLI.
             </Banner>
-            <Typography variant="caption-regular" color="color-text-subtle" style={{ marginTop: 6, fontFamily: 'var(--typography-family-mono)' }}>
-              npx flow-weaver weaver init
-            </Typography>
           </div>
         )}
 
-        <div style={{ marginTop: 10, display: 'flex', justifyContent: 'flex-end' }}>
+        <Footer>
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            Customize via .weaver.json
+          </Typography>
           <IconButton icon="refresh" size="xs" variant="clear" onClick={fetchData} title="Refresh" />
-        </div>
+        </Footer>
       </div>
     </CollapsibleSection>
   );