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

package/src/ui/budget-strip.tsx

@@ -0,0 +1,199 @@
+/**
+ * BudgetStrip — compact single-line budget display with sparkline.
+ *
+ * Shows: cost, mini sparkline bars (per-task spend), token count, task tally.
+ * Click pencil icon → popover to edit token/cost limits.
+ *
+ * Replaces the old BudgetBar (two stacked progress bars) with a denser,
+ * more informative single-strip view.
+ */
+import React, { useState, useCallback, useRef } from 'react';
+import { Flex, Typography, Button, Input, StatusChip } from '@fw/plugin-ui-kit';
+import { styled } from '@fw/plugin-theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface BudgetStripProps {
+  /** Current cost spent */
+  costUsed: number;
+  /** Cost budget limit */
+  costLimit: number;
+  /** Source of cost data */
+  costSource?: 'cli' | 'estimated';
+  /** Current tokens used */
+  tokensUsed: number;
+  /** Token budget limit */
+  tokenLimit: number;
+  /** Task counts */
+  tasksDone?: number;
+  tasksFailed?: number;
+  tasksOpen?: number;
+  /** Called when limits are changed. If not provided, limits are read-only. */
+  onLimitsChange?: (costLimit: number, tokenLimit: number) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Styled
+// ---------------------------------------------------------------------------
+
+const Strip = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$gap-cluster',
+  padding: '$gap-list-tight $gap-card-content',
+  borderRadius: '$border-radius-container',
+  backgroundColor: '$color-surface-float',
+  border: '1px solid $color-border-subtle',
+  minHeight: '34px',
+});
+
+
+const PopoverOverlay = styled.div({
+  position: 'fixed',
+  inset: 0,
+  zIndex: 999,
+});
+
+const PopoverCard = styled.div({
+  position: 'absolute',
+  zIndex: 1000,
+  backgroundColor: '$color-surface-main',
+  border: '1px solid $color-border-default',
+  borderRadius: '$border-radius-popover',
+  padding: '$gap-card-content',
+  boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
+});
+
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatCost(n: number): string {
+  if (n >= 1) return `$${n.toFixed(2)}`;
+  if (n >= 0.01) return `$${n.toFixed(2)}`;
+  if (n > 0) return `$${n.toFixed(4)}`;
+  return '$0';
+}
+
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function BudgetStrip({
+  costUsed, costLimit, costSource,
+  tokenLimit,
+  tasksDone = 0, tasksFailed = 0, tasksOpen = 0,
+  onLimitsChange,
+}: BudgetStripProps) {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [editCost, setEditCost] = useState('');
+  const [editTokens, setEditTokens] = useState('');
+  const editRef = useRef<HTMLDivElement>(null);
+
+  const handleOpenPopover = useCallback(() => {
+    setEditCost(String(costLimit));
+    setEditTokens(String(tokenLimit));
+    setPopoverOpen(true);
+  }, [costLimit, tokenLimit]);
+
+  const handleSave = useCallback(() => {
+    const c = parseFloat(editCost);
+    const t = parseFloat(editTokens);
+    if (c > 0 && t > 0 && onLimitsChange) {
+      onLimitsChange(c, t);
+    }
+    setPopoverOpen(false);
+  }, [editCost, editTokens, onLimitsChange]);
+
+  const sourceTag = costSource === 'cli' ? 'actual' : costSource === 'estimated' ? 'est.' : null;
+
+  const tallyParts: Array<{ count: number; label: string; chipStatus: 'success' | 'error' | 'info'; icon: string }> = [];
+  if (tasksDone > 0) tallyParts.push({ count: tasksDone, label: 'done', chipStatus: 'success', icon: 'check' });
+  if (tasksFailed > 0) tallyParts.push({ count: tasksFailed, label: 'failed', chipStatus: 'error', icon: 'close' });
+  if (tasksOpen > 0) tallyParts.push({ count: tasksOpen, label: 'open', chipStatus: 'info', icon: 'schedule' });
+
+  return (
+    <Strip>
+      {/* LEFT: Task status */}
+      <Flex variant="row-center-start-nowrap-4" style={{ flexShrink: 0 }}>
+        {tallyParts.map((p, i) => (
+          <StatusChip key={i} status={p.chipStatus} icon={p.icon}>{p.count} {p.label}</StatusChip>
+        ))}
+      </Flex>
+
+      {/* CENTER: Budget */}
+      <Flex variant="row-center-center-nowrap-4" style={{ flex: 1, minWidth: 0 }}>
+        <Typography variant="smallCaption-thick" color="color-text-high">
+          {costLimit > 0 ? `${Math.round((costUsed / costLimit) * 100)}%` : '0%'}
+        </Typography>
+        <Typography variant="smallCaption-regular" color="color-border-default">|</Typography>
+        <Typography variant="smallCaption-regular" color="color-text-subtle">
+          {formatCost(costUsed)} / {formatCost(costLimit)}
+        </Typography>
+        {sourceTag && (
+          <Typography variant="smallCaption-regular" color={costSource === 'cli' ? 'color-status-positive' : 'color-text-subtle'}>
+            ({sourceTag})
+          </Typography>
+        )}
+      </Flex>
+
+      {/* RIGHT: Edit budget */}
+      {onLimitsChange && (
+        <div ref={editRef} style={{ position: 'relative', flexShrink: 0 }}>
+          <Button size="xs" variant="outlined" onClick={handleOpenPopover}>
+            Edit Budget
+          </Button>
+
+          {popoverOpen && (
+            <>
+              <PopoverOverlay onClick={() => setPopoverOpen(false)} />
+              <PopoverCard style={{ top: '100%', right: 0, marginTop: '4px' }}>
+                <Flex variant="column-stretch-start-nowrap-6">
+                  <Typography variant="smallCaption-thick" color="color-text-high">
+                    Budget Limits
+                  </Typography>
+                  <Flex variant="row-center-space-between-nowrap-4" style={{ whiteSpace: 'nowrap' }}>
+                    <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ flexShrink: 0 }}>Cost ($)</Typography>
+                    <Input
+                      type="number"
+                      size="extraSmall"
+                      value={editCost}
+                      onChange={(v: string) => setEditCost(v)}
+                      autoFocus={true}
+                    />
+                  </Flex>
+                  <Flex variant="row-center-space-between-nowrap-4" style={{ whiteSpace: 'nowrap' }}>
+                    <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ flexShrink: 0 }}>Tokens</Typography>
+                    <Input
+                      type="number"
+                      size="extraSmall"
+                      value={editTokens}
+                      onChange={(v: string) => setEditTokens(v)}
+                      onKeyDown={(e: { key: string }) => { if (e.key === 'Enter') handleSave(); }}
+                    />
+                  </Flex>
+                  <Flex variant="row-center-end-nowrap-4">
+                    <Button size="xs" variant="clear" onClick={() => setPopoverOpen(false)}>
+                      Cancel
+                    </Button>
+                    <Button size="xs" variant="fill" color="primary" onClick={handleSave}>
+                      Save
+                    </Button>
+                  </Flex>
+                </Flex>
+              </PopoverCard>
+            </>
+          )}
+        </div>
+      )}
+    </Strip>
+  );
+}
+
+export { BudgetStrip };
+export type { BudgetStripProps };
+export default BudgetStrip;

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

@@ -9,6 +9,7 @@
  */
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Flex, Typography, StatusIcon, Button } from '@fw/plugin-ui-kit';
+import { TASK_STATUS_ICON, TASK_STATUS_ICON_OVERRIDE, TASK_STATUS_LABEL } from './task-status';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -53,31 +54,10 @@ function parseResult(result: unknown): { task: TaskData | null; subtasks: Subtas
   }
 }
 
-type StatusKind = 'running' | 'completed' | 'failed' | 'pending';
-
-function statusToIcon(status: TaskData['status']): StatusKind {
-  switch (status) {
-    case 'open':
-      return 'pending';
-    case 'in-progress':
-      return 'running';
-    case 'done':
-      return 'completed';
-    case 'cancelled':
-      return 'failed';
-    default:
-      return 'pending';
-  }
-}
-
 function statusLabel(status: TaskData['status']): string {
-  switch (status) {
-    case 'open': return 'Open';
-    case 'in-progress': return 'Running';
-    case 'done': return 'Done';
-    case 'cancelled': return 'Cancelled';
-    default: return status;
-  }
+  // 'in-progress' maps to 'Running' in chat context (differs from TASK_STATUS_LABEL's 'In Progress')
+  if (status === 'in-progress') return 'Running';
+  return TASK_STATUS_LABEL[status] ?? status;
 }
 
 function isTerminal(status: TaskData['status']): boolean {
@@ -174,7 +154,7 @@ function ChatTaskResult(props: ChatTaskResultProps | null) {
       }}
     >
       {/* Status icon */}
-      <StatusIcon status={statusToIcon(task.status)} size="sm" />
+      <StatusIcon status={TASK_STATUS_ICON[task.status] || 'pending'} icon={TASK_STATUS_ICON_OVERRIDE[task.status]} size="sm" />
 
       {/* Title + meta column */}
       <Flex

package/src/ui/instance-stream-view.tsx

@@ -79,7 +79,13 @@ interface StatusBlock {
   detail?: string;
 }
 
-type ConversationBlock = ThinkingBlock | TextBlock | ToolCallBlock | StatusBlock;
+interface WarningBlock {
+  kind: 'warning';
+  label: string;
+  detail?: string;
+}
+
+type ConversationBlock = ThinkingBlock | TextBlock | ToolCallBlock | StatusBlock | WarningBlock;
 
 // ---------------------------------------------------------------------------
 // Build conversation blocks from events
@@ -194,6 +200,30 @@ function buildConversation(events: StreamEvent[]): ConversationBlock[] {
         lastType = 'bot-failed';
         break;
 
+      // ── Session/bridge warnings (from CliSession markDead, active turn kill) ──
+
+      case 'session-warning':
+        flushThinking(false);
+        flushText(false);
+        blocks.push({
+          kind: 'warning',
+          label: (d.label as string) ?? 'Session warning',
+          detail: (d.detail as string) ?? (d.stderr as string) ?? undefined,
+        });
+        lastType = 'session-warning';
+        break;
+
+      case 'audit:bridge-tool-filtered':
+        if ((d.textToolCallDetected as number) > 0) {
+          blocks.push({
+            kind: 'warning',
+            label: `MCP tools not connected — ${d.textToolCallDetected} tool calls output as text`,
+            detail: 'The CLI session does not have MCP tools registered. Tool calls were output as text instead of structured tool_use.',
+          });
+        }
+        lastType = 'audit:bridge-tool-filtered';
+        break;
+
       // ── Swarm/workflow-level events (emitted by runner + swarm-controller) ──
 
       case 'task-claimed':
@@ -371,6 +401,7 @@ function useConversationTypewriter(blocks: ConversationBlock[]) {
         return Math.min(display.length, TYPEWRITER.maxToolResultLen);
       }
       case 'status': return (block.detail ?? '').length;
+      case 'warning': return (block.detail ?? '').length;
       default: return 0;
     }
   }, []);
@@ -786,6 +817,24 @@ function InstanceStreamView({
                         </CollapsibleBlock>
                       );
                     }
+                    case 'warning':
+                      return (
+                        <CollapsibleBlock
+                          status="error"
+                          label={block.label}
+                          expanded={!!block.detail}
+                          canExpand={!!block.detail}
+                          onToggle={() => {}}
+                        >
+                          {block.detail && (
+                            <Section padding="compact">
+                              <Typography variant="body-regular" color="color-danger-main">
+                                {block.detail}
+                              </Typography>
+                            </Section>
+                          )}
+                        </CollapsibleBlock>
+                      );
                     default:
                       return null;
                   }

package/src/ui/swarm-dashboard.tsx

@@ -26,8 +26,7 @@ import {
 
 // Local pack-specific components (bundled by esbuild)
 import SwarmControls from './swarm-controls';
-import BudgetBar from './budget-bar';
-import BotSlotCard from './bot-slot-card';
+import BudgetStrip from './budget-strip';
 import TaskPoolList from './task-pool-list.js';
 import TaskDetailView from './task-detail-view';
 import TaskEditor from './task-editor';
@@ -37,6 +36,7 @@ import DecisionLog from './decision-log';
 import CapabilityEditor from './capability-editor';
 import InstanceStreamView from './instance-stream-view';
 import { ICON_CATALOG, BOT_COLORS } from './bot-constants';
+import { TaskStatus, TASK_STATUS_BOARD_LABEL, TASK_STATUS_BOARD_COLOR } from './task-status';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -79,8 +79,6 @@ interface SwarmStatus {
   packVersion?: string;
 }
 
-type TaskStatus = 'open' | 'in-progress' | 'done' | 'cancelled';
-
 interface PoolTask {
   id: string;
   title: string;
@@ -395,41 +393,27 @@ function SwarmDashboard() {
         onRefresh={refreshAll}
       />
 
-      {/* BudgetBar (below controls) */}
+      {/* Budget strip (below controls) */}
       {hasBudget && (
         <Section padding="compact" border="bottom" shrink={true}>
-          <Flex variant="column-stretch-start-nowrap-4">
-            <BudgetBar
-              label="Tokens"
-              used={sessionBudget!.usedTokens}
-              limit={sessionBudget!.limitTokens}
-              unit="tokens"
-              onLimitChange={async (newLimit: number) => {
-                try {
-                  await callTool('fw_weaver_swarm_config', { sessionBudgetTokens: newLimit });
-                  toast(`Token budget updated to ${newLimit.toLocaleString()}`, { type: 'success' });
-                  fetchSwarmStatus();
-                } catch (err: unknown) {
-                  toast(err instanceof Error ? err.message : 'Failed to update budget', { type: 'error' });
-                }
-              }}
-            />
-            <BudgetBar
-              label="Cost"
-              used={sessionBudget!.usedCost}
-              limit={sessionBudget!.limitCost}
-              unit="USD"
-              onLimitChange={async (newLimit: number) => {
-                try {
-                  await callTool('fw_weaver_swarm_config', { sessionBudgetCost: newLimit });
-                  toast(`Cost budget updated to $${newLimit.toFixed(2)}`, { type: 'success' });
-                  fetchSwarmStatus();
-                } catch (err: unknown) {
-                  toast(err instanceof Error ? err.message : 'Failed to update budget', { type: 'error' });
-                }
-              }}
-            />
-          </Flex>
+          <BudgetStrip
+            costUsed={sessionBudget!.usedCost}
+            costLimit={sessionBudget!.limitCost}
+            tokensUsed={sessionBudget!.usedTokens}
+            tokenLimit={sessionBudget!.limitTokens}
+            tasksDone={tasks.filter((t: { status: string }) => t.status === 'done').length}
+            tasksFailed={tasks.filter((t: { status: string }) => t.status === 'failed' || t.status === 'cancelled').length}
+            tasksOpen={tasks.filter((t: { status: string }) => t.status !== 'done' && t.status !== 'failed' && t.status !== 'cancelled').length}
+            onLimitsChange={async (costLimit: number, tokenLimit: number) => {
+              try {
+                await callTool('fw_weaver_swarm_config', { sessionBudgetCost: costLimit, sessionBudgetTokens: tokenLimit });
+                toast('Budget updated', { type: 'success' });
+                fetchSwarmStatus();
+              } catch (err: unknown) {
+                toast(err instanceof Error ? err.message : 'Failed to update budget', { type: 'error' });
+              }
+            }}
+          />
         </Section>
       )}
 
@@ -541,12 +525,10 @@ function SwarmDashboard() {
               const allTasks = tasks as Array<Record<string, unknown>>;
               const doneIds = new Set(allTasks.filter(t => t.status === 'done' || t.status === 'cancelled').map(t => t.id as string));
 
+              const statusColumns: TaskStatus[] = ['open', 'in-progress', 'done', 'cancelled'];
               const kanbanColumns = [
                 { id: 'waiting', title: 'Waiting', color: 'var(--color-status-caution)' },
-                { id: 'open', title: 'Ready', color: 'var(--color-text-subtle)' },
-                { id: 'in-progress', title: 'In Progress', color: 'var(--color-brand-main)' },
-                { id: 'done', title: 'Done', color: 'var(--color-status-positive)' },
-                { id: 'cancelled', title: 'Cancelled', color: 'var(--color-status-negative)' },
+                ...statusColumns.map(s => ({ id: s, title: TASK_STATUS_BOARD_LABEL[s], color: `var(--${TASK_STATUS_BOARD_COLOR[s]})` })),
               ];
 
               const kanbanCards = allTasks
@@ -599,51 +581,76 @@ function SwarmDashboard() {
           >
             {/* When swarm is running: show swarm instances */}
             {hasSwarmInstances && (
-              <Flex variant="column-stretch-start-nowrap-0">
-                <Flex
-                  variant="row-center-start-nowrap-8"
-                  style={{ padding: '8px 16px', borderBottom: '1px solid var(--color-border-default)' }}
-                >
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '120px', flexShrink: 0 }}>Worker</Typography>
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '110px', flexShrink: 0 }}>Bot</Typography>
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '70px', flexShrink: 0 }}>Status</Typography>
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ flex: 1, minWidth: 0 }}>Task</Typography>
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '50px', flexShrink: 0, textAlign: 'right' }}>Tokens</Typography>
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '50px', flexShrink: 0, textAlign: 'right' }}>Cost</Typography>
-                  <Typography variant="smallCaption-regular" color="color-text-subtle" style={{ width: '50px', flexShrink: 0 }}>{''}</Typography>
-                </Flex>
-                {/* Instance rows */}
-                {swarmInstanceEntries.map((inst: InstanceInfo) => {
-                  // Look up profile -> bot for this instance
+              <Table
+                size="compact"
+                data={swarmInstanceEntries.map((inst: InstanceInfo) => {
                   const profile = profiles.find((p: Record<string, unknown>) => p.id === inst.profileId);
                   const botId = profile?.botId as string | undefined;
                   const bot = registeredBots.find((b) => b.id === botId);
-                  return (
-                    <BotSlotCard
-                      key={inst.instanceId}
-                      bot={{
-                        botId: inst.instanceId,
-                        botName: inst.profileId ? `${inst.instanceId} (${inst.profileId})` : inst.instanceId,
-                        status: inst.status,
-                        currentTaskId: inst.currentTaskId,
-                        currentRunId: inst.currentRunId,
-                        startedAt: inst.startedAt,
-                        tokensUsed: inst.tokensUsed,
-                        cost: inst.cost,
-                      }}
-                      profileName={(profile?.name as string) || inst.profileId}
-                      botDisplayName={bot?.name}
-                      botIcon={bot?.icon}
-                      botColor={bot?.color}
-                      currentTaskTitle={resolveTaskTitle(inst.currentTaskId, tasks)}
-                      onView={() => handleInstanceClick(inst)}
-                      onPause={(id: string) => handleSteerBot(id, 'pause')}
-                      onResume={(id: string) => handleSteerBot(id, 'resume')}
-                      onStop={(id: string) => handleSteerBot(id, 'cancel')}
-                    />
-                  );
+                  return { ...inst, _profileName: (profile?.name as string) || inst.profileId, _botName: bot?.name, _botIcon: bot?.icon, _botColor: bot?.color };
                 })}
-              </Flex>
+                getRowKey={(row: InstanceInfo) => row.instanceId}
+                onRowClick={(row: InstanceInfo) => row.status === 'executing' && handleInstanceClick(row)}
+                columns={[
+                  {
+                    key: 'worker', header: 'Worker', width: '25%',
+                    render: (_v: unknown, row: Record<string, unknown>) => (
+                      <Flex variant="row-center-start-nowrap-0" style={{ gap: 'var(--gap-button-icon)' }}>
+                        <Icon name={(row._botIcon as string) || 'smartToy'} size={12} color={(row._botColor as string) || 'color-text-subtle'} />
+                        <span>{row._profileName as string}</span>
+                      </Flex>
+                    ),
+                  },
+                  {
+                    key: 'status', header: 'Status', width: '15%',
+                    render: (_v: unknown, row: Record<string, unknown>) => {
+                      const s = row.status as string;
+                      return (
+                        <Flex variant="row-center-start-nowrap-0" style={{ gap: 'var(--gap-button-icon)' }}>
+                          <StatusIcon status={s === 'executing' ? 'running' : s === 'paused' ? 'warning' : 'pending'} size="xs" />
+                          <span>{s === 'executing' ? 'Running' : s === 'paused' ? 'Paused' : s === 'stopped' ? 'Stopped' : 'Idle'}</span>
+                        </Flex>
+                      );
+                    },
+                  },
+                  {
+                    key: 'task', header: 'Task',
+                    render: (_v: unknown, row: Record<string, unknown>) => (
+                      <span>{row.status === 'executing' ? resolveTaskTitle(row.currentTaskId as string, tasks) || (row.currentTaskId as string) || '-' : '-'}</span>
+                    ),
+                  },
+                  {
+                    key: 'tokens', header: 'Tokens', width: '80px', align: 'right' as const,
+                    render: (_v: unknown, row: Record<string, unknown>) => {
+                      const t = row.tokensUsed as number;
+                      return <span>{t >= 1000 ? `${(t / 1000).toFixed(1)}k` : t}</span>;
+                    },
+                  },
+                  {
+                    key: 'cost', header: 'Cost', width: '80px', align: 'right' as const,
+                    render: (_v: unknown, row: Record<string, unknown>) => {
+                      const c = row.cost as number;
+                      return <span>{c < 0.01 && c > 0 ? '<$0.01' : `$${c.toFixed(2)}`}</span>;
+                    },
+                  },
+                  {
+                    key: 'actions', header: '', width: '60px', align: 'right' as const,
+                    render: (_v: unknown, row: Record<string, unknown>) => (
+                      <Flex variant="row-center-end-nowrap-1" onClick={(e: { stopPropagation: () => void }) => e.stopPropagation()}>
+                        {row.status === 'executing' && (
+                          <IconButton icon="pause" size="xs" variant="clear" onClick={() => handleSteerBot(row.instanceId as string, 'pause')} title="Pause" />
+                        )}
+                        {row.status === 'paused' && (
+                          <IconButton icon="playArrow" size="xs" variant="clear" onClick={() => handleSteerBot(row.instanceId as string, 'resume')} title="Resume" />
+                        )}
+                        {(row.status === 'executing' || row.status === 'paused') && (
+                          <IconButton icon="stop" size="xs" variant="clear" color="danger" onClick={() => handleSteerBot(row.instanceId as string, 'cancel')} title="Stop" />
+                        )}
+                      </Flex>
+                    ),
+                  },
+                ]}
+              />
             )}
 
             {/* When swarm is NOT running: show registered bots */}
@@ -969,7 +976,6 @@ function SwarmDashboard() {
                   <Flex variant="column-stretch-start-nowrap-4">
                     <SectionTitle size="xs">Recent Runs</SectionTitle>
                     <Table
-                      size="compact"
                       getRowKey={(row: Record<string, unknown>) => (row.id as string) ?? String(Math.random())}
                       onRowClick={(row: Record<string, unknown>) => {
                         if (row.taskId) handleTaskClick(row.taskId as string);
@@ -1002,7 +1008,6 @@ function SwarmDashboard() {
                         }},
                       ]}
                       data={runHistory as Array<Record<string, unknown>>}
-                      maxHeight="200px"
                     />
                   </Flex>
                 )}