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

package/src/ui/settings-section.tsx

@@ -2,9 +2,8 @@
  * 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');
+import React, { useState, useEffect, useCallback } from 'react';
+import { Flex, Typography, Button, CollapsibleSection, KeyValueRow, toast } from '@fw/plugin-ui-kit';
 
 interface SettingsSectionProps {
   callTool: (tool: string, args?: Record<string, unknown>) => Promise<unknown>;
@@ -54,42 +53,50 @@ function SettingsSection({ callTool, dispatchEvent }: SettingsSectionProps) {
       ? (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'),
-      ),
-    ),
+  return (
+    <CollapsibleSection title="Settings" variant="list" defaultExpanded={false}>
+      <Flex variant="column-start-start-nowrap-4" style={{ width: '100%' }}>
+        {activeProvider && (
+          <KeyValueRow
+            keyName="Provider"
+            value={`${activeProvider.name} (${activeProvider.source})`}
+            size="small"
+          />
+        )}
+        {insights?.trust && (
+          <KeyValueRow
+            keyName="Trust"
+            value={`Phase ${insights.trust.phase} · ${trustDisplay}`}
+            size="small"
+          />
+        )}
+        {insights?.health && (
+          <KeyValueRow
+            keyName="Health"
+            value={`${insights.health.overall}/100`}
+            size="small"
+          />
+        )}
+        {insights?.cost && (
+          <KeyValueRow
+            keyName="Cost (7d)"
+            value={`$${insights.cost.last7Days?.toFixed(2) ?? '0.00'} · ${insights.cost.trend ?? 'stable'}`}
+            size="small"
+          />
+        )}
+        <Flex
+          variant="row-center-space-between-nowrap-8"
+          style={{ width: '100%', marginTop: '4px' }}
+        >
+          <Button size="xs" variant="outlined" color="danger" onClick={handleClear}>
+            Clear Run History
+          </Button>
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            Edit settings in .weaver.json
+          </Typography>
+        </Flex>
+      </Flex>
+    </CollapsibleSection>
   );
 }
 

package/src/ui/swarm-controls.tsx

@@ -1,12 +1,14 @@
 /**
  * SwarmControls — control bar for the swarm: start/pause/stop, status badge, active bots count.
- * Runs in the pack sandbox — uses CommonJS require, React.createElement throughout.
+ *
+ * When idle and Start is clicked, expands an inline config form for concurrency + budget params.
+ * When running, shows editable max concurrency inline in the stats area.
  */
-const React = require('react');
-const { useState, useCallback } = React;
-const {
-  Flex, Button, Typography, IconButton, StatusIcon, toast, usePackWorkspace,
-} = require('@fw/plugin-ui-kit');
+import React, { useState, useCallback } from 'react';
+import {
+  Flex, Button, Typography, IconButton, StatusIcon, Input, Slider, Field, Section,
+  CollapsibleSection, toast, usePackWorkspace,
+} from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -19,6 +21,13 @@ interface InstanceInfo {
   currentTaskId?: string;
 }
 
+interface SwarmBudgetLayer {
+  limitTokens: number;
+  usedTokens: number;
+  limitCost: number;
+  usedCost: number;
+}
+
 interface SwarmStatus {
   status: 'idle' | 'running' | 'paused' | 'stopping';
   instances: Record<string, InstanceInfo>;
@@ -28,6 +37,7 @@ interface SwarmStatus {
   totalTokensUsed: number;
   totalCost: number;
   startedAt?: string;
+  budgets?: { workspace: SwarmBudgetLayer; session: SwarmBudgetLayer };
 }
 
 interface SwarmControlsProps {
@@ -74,6 +84,16 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
   const [starting, setStarting] = useState(false);
   const [pausing, setPausing] = useState(false);
   const [stopping, setStopping] = useState(false);
+  const [showStartConfig, setShowStartConfig] = useState(false);
+
+  // Start config form state
+  const [maxConcurrent, setMaxConcurrent] = useState(5);
+  const [sessionTokenBudget, setSessionTokenBudget] = useState('');
+  const [sessionCostBudget, setSessionCostBudget] = useState('');
+
+  // Live concurrency edit
+  const [editingConcurrency, setEditingConcurrency] = useState(false);
+  const [liveConcurrency, setLiveConcurrency] = useState('');
 
   const status = swarmStatus?.status ?? 'idle';
   const instances = swarmStatus?.instances ?? {};
@@ -86,38 +106,39 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
 
   // --- Actions ---
 
-  const handleStart = useCallback(async () => {
+  const handleStartWithConfig = useCallback(async () => {
     setStarting(true);
     try {
-      const result = await ctx.callTool('fw_weaver_swarm_start', {});
+      const args: Record<string, unknown> = {};
+      if (maxConcurrent > 0) args.maxConcurrent = maxConcurrent;
+      const st = parseInt(sessionTokenBudget, 10);
+      if (st > 0) args.sessionBudgetTokens = st;
+      const sc = parseFloat(sessionCostBudget);
+      if (sc > 0) args.sessionBudgetCost = sc;
+
+      const result = await ctx.callTool('fw_weaver_swarm_start', args);
       const data = result as Record<string, unknown> | null;
       if (data?.error) {
         toast(String(data.error), { type: 'error' });
       } else {
         toast('Swarm started', { type: 'success' });
+        setShowStartConfig(false);
       }
       onRefresh();
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Failed to start swarm';
-      toast(msg, { type: 'error' });
+      toast(err instanceof Error ? err.message : 'Failed to start swarm', { type: 'error' });
     }
     setStarting(false);
-  }, [ctx, onRefresh]);
+  }, [ctx, onRefresh, maxConcurrent, sessionTokenBudget, sessionCostBudget]);
 
   const handlePause = useCallback(async () => {
     setPausing(true);
     try {
-      const result = await ctx.callTool('fw_weaver_swarm_pause', {});
-      const data = result as Record<string, unknown> | null;
-      if (data?.error) {
-        toast(String(data.error), { type: 'error' });
-      } else {
-        toast('Swarm paused', { type: 'info' });
-      }
+      await ctx.callTool('fw_weaver_swarm_pause', {});
+      toast('Swarm paused', { type: 'info' });
       onRefresh();
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Failed to pause swarm';
-      toast(msg, { type: 'error' });
+      toast(err instanceof Error ? err.message : 'Failed to pause', { type: 'error' });
     }
     setPausing(false);
   }, [ctx, onRefresh]);
@@ -125,17 +146,11 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
   const handleResume = useCallback(async () => {
     setStarting(true);
     try {
-      const result = await ctx.callTool('fw_weaver_swarm_start', {});
-      const data = result as Record<string, unknown> | null;
-      if (data?.error) {
-        toast(String(data.error), { type: 'error' });
-      } else {
-        toast('Swarm resumed', { type: 'success' });
-      }
+      await ctx.callTool('fw_weaver_swarm_start', {});
+      toast('Swarm resumed', { type: 'success' });
       onRefresh();
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Failed to resume swarm';
-      toast(msg, { type: 'error' });
+      toast(err instanceof Error ? err.message : 'Failed to resume', { type: 'error' });
     }
     setStarting(false);
   }, [ctx, onRefresh]);
@@ -149,112 +164,226 @@ function SwarmControls({ swarmStatus, onRefresh }: SwarmControlsProps) {
     });
     if (!ok) { setStopping(false); return; }
     try {
-      const result = await ctx.callTool('fw_weaver_swarm_stop', {});
-      const data = result as Record<string, unknown> | null;
-      if (data?.error) {
-        toast(String(data.error), { type: 'error' });
-      } else {
-        toast('Swarm stopped', { type: 'info' });
-      }
+      await ctx.callTool('fw_weaver_swarm_stop', {});
+      toast('Swarm stopped', { type: 'info' });
       onRefresh();
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Failed to stop swarm';
-      toast(msg, { type: 'error' });
+      toast(err instanceof Error ? err.message : 'Failed to stop', { type: 'error' });
     }
     setStopping(false);
   }, [ctx, onRefresh]);
 
+  const handleConcurrencyChange = useCallback(async () => {
+    const mc = parseInt(liveConcurrency, 10);
+    if (!mc || mc < 1) { setEditingConcurrency(false); return; }
+    try {
+      await ctx.callTool('fw_weaver_swarm_config', { maxConcurrent: mc });
+      toast(`Max concurrency set to ${mc}`, { type: 'success' });
+      onRefresh();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to update config', { type: 'error' });
+    }
+    setEditingConcurrency(false);
+  }, [ctx, onRefresh, liveConcurrency]);
+
   // --- Render ---
 
   const anyLoading = starting || pausing || stopping;
 
-  return React.createElement(Flex, {
-    variant: 'row-center-space-between-nowrap-10',
-    style: {
-      padding: '8px 16px',
-      borderBottom: '1px solid var(--color-border-default)',
-      flexShrink: 0,
-      backgroundColor: isRunning
-        ? 'var(--color-brand-main-alpha-10)'
-        : isPaused
-          ? 'var(--color-status-caution-alpha-10)'
-          : 'transparent',
-    },
-  },
-    // Left: status icon + label
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-8', style: { flexShrink: 0 } },
-      React.createElement(StatusIcon, {
-        status: swarmStatusToIconStatus(status),
-        size: 'sm',
-      }),
-      React.createElement(Typography, {
-        variant: 'caption-bold',
-      }, statusLabel(status)),
-    ),
-
-    // Center: bot count + stats
-    React.createElement(Flex, {
-      variant: 'row-center-start-nowrap-12',
-      style: { flex: 1 },
-    },
-      total > 0 && React.createElement(Typography, {
-        variant: 'caption-regular',
-        color: 'color-text-medium',
-      }, `${active}/${total} bots active`),
-      swarmStatus && swarmStatus.tasksCompleted > 0 && React.createElement(Typography, {
-        variant: 'caption-regular',
-        color: 'color-text-subtle',
-      }, `${swarmStatus.tasksCompleted} done`),
-      swarmStatus && swarmStatus.runsIncomplete > 0 && React.createElement(Typography, {
-        variant: 'caption-regular',
-        color: 'color-status-negative',
-      }, `${swarmStatus.runsIncomplete} incomplete`),
-    ),
-
-    // Right: action buttons
-    React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { flexShrink: 0 } },
-      // Start / Resume button
-      (isIdle || isPaused) && React.createElement(Button, {
-        size: 'xs',
-        variant: 'outlined',
-        color: 'primary',
-        onClick: isPaused ? handleResume : handleStart,
-        loading: starting,
-        disabled: anyLoading,
-      }, isPaused ? 'Resume' : 'Start'),
-
-      // Pause button (only when running)
-      isRunning && React.createElement(Button, {
-        size: 'xs',
-        variant: 'outlined',
-        color: 'warning',
-        onClick: handlePause,
-        loading: pausing,
-        disabled: anyLoading,
-      }, 'Pause'),
-
-      // Stop button (when running or paused)
-      (isRunning || isPaused) && React.createElement(Button, {
-        size: 'xs',
-        variant: 'outlined',
-        color: 'danger',
-        onClick: handleStop,
-        loading: stopping,
-        disabled: anyLoading || isStopping,
-      }, 'Stop'),
-
-      // Refresh button (always available)
-      React.createElement(IconButton, {
-        icon: 'reset',
-        size: 'xs',
-        variant: 'outlined',
-        onClick: onRefresh,
-        disabled: anyLoading,
-      }),
-    ),
+  return (
+    <Flex variant="column-stretch-start-nowrap-0">
+
+      {/* Main control bar */}
+      <Section
+        padding="compact"
+        border="bottom"
+        shrink={true}
+        background={isRunning ? 'none' : isPaused ? 'none' : 'none'}
+      >
+        <Flex variant="row-center-space-between-nowrap-10">
+
+          {/* Left: status icon + label */}
+          <Flex variant="row-center-start-nowrap-8">
+            <StatusIcon
+              status={swarmStatusToIconStatus(status)}
+              size="sm"
+            />
+            <Typography variant="caption-bold">{statusLabel(status)}</Typography>
+          </Flex>
+
+          {/* Center: bot count + stats + live concurrency */}
+          <Flex variant="row-center-start-nowrap-12">
+            {total > 0 && (
+              <Typography variant="caption-regular" color="color-text-medium">
+                {`${active}/${total} bots active`}
+              </Typography>
+            )}
+
+            {/* Concurrency display (when running) — edit in Control tab */}
+            {(isRunning || isPaused) && (
+              <Typography variant="caption-regular" color="color-text-subtle">
+                {`max ${swarmStatus?.maxConcurrent ?? '?'}`}
+              </Typography>
+            )}
+
+            {swarmStatus && swarmStatus.tasksCompleted > 0 && (
+              <Typography variant="caption-regular" color="color-text-subtle">
+                {`${swarmStatus.tasksCompleted} done`}
+              </Typography>
+            )}
+            {swarmStatus && swarmStatus.runsIncomplete > 0 && (
+              <Typography variant="caption-regular" color="color-status-negative">
+                {`${swarmStatus.runsIncomplete} incomplete`}
+              </Typography>
+            )}
+          </Flex>
+
+          {/* Right: action buttons */}
+          <Flex variant="row-center-start-nowrap-4">
+            {/* Start button (idle) — opens config form */}
+            {isIdle && !showStartConfig && (
+              <Button
+                size="xs"
+                variant="outlined"
+                color="primary"
+                onClick={() => setShowStartConfig(true)}
+                disabled={anyLoading}
+              >
+                Start
+              </Button>
+            )}
+
+            {/* Resume button (paused) */}
+            {isPaused && (
+              <Button
+                size="xs"
+                variant="outlined"
+                color="primary"
+                onClick={handleResume}
+                loading={starting}
+                disabled={anyLoading}
+              >
+                Resume
+              </Button>
+            )}
+
+            {/* Pause button (running) */}
+            {isRunning && (
+              <Button
+                size="xs"
+                variant="outlined"
+                color="warning"
+                onClick={handlePause}
+                loading={pausing}
+                disabled={anyLoading}
+              >
+                Pause
+              </Button>
+            )}
+
+            {/* Stop button (running or paused) */}
+            {(isRunning || isPaused) && (
+              <Button
+                size="xs"
+                variant="outlined"
+                color="danger"
+                onClick={handleStop}
+                loading={stopping}
+                disabled={anyLoading || isStopping}
+              >
+                Stop
+              </Button>
+            )}
+
+            {/* Cancel start config */}
+            {isIdle && showStartConfig && (
+              <IconButton
+                icon="close"
+                size="xs"
+                variant="clear"
+                onClick={() => setShowStartConfig(false)}
+              />
+            )}
+
+            {/* Refresh */}
+            <IconButton
+              icon="reset"
+              size="xs"
+              variant="outlined"
+              onClick={onRefresh}
+              disabled={anyLoading}
+            />
+          </Flex>
+        </Flex>
+      </Section>
+
+      {/* Start config form (inline, when Start is clicked) */}
+      {isIdle && showStartConfig && (
+        <Section padding="default" border="bottom" shrink={true}>
+          <Flex variant="column-stretch-start-nowrap-8">
+            <Typography variant="caption-thick" color="color-text-high">
+              Start Configuration
+            </Typography>
+
+            <Flex variant="row-center-start-nowrap-12">
+              <Flex variant="row-center-start-nowrap-8">
+                <Typography variant="smallCaption-regular" color="color-text-subtle">Max</Typography>
+                <Slider
+                  value={maxConcurrent}
+                  min={1}
+                  max={20}
+                  step={1}
+                  onChange={(val: number) => setMaxConcurrent(val)}
+                />
+                <Typography variant="caption-thick" color="color-text-high">{maxConcurrent}</Typography>
+              </Flex>
+              <Field label="Token Budget" labelWidth={100}>
+                <Input
+                  value={sessionTokenBudget}
+                  onChange={(value: string) => setSessionTokenBudget(value)}
+                  type="number"
+                  size="small"
+                  placeholder="No limit"
+                />
+              </Field>
+              <Field label="Cost Budget ($)" labelWidth={100}>
+                <Input
+                  value={sessionCostBudget}
+                  onChange={(value: string) => setSessionCostBudget(value)}
+                  type="number"
+                  size="small"
+                  placeholder="No limit"
+                />
+              </Field>
+            </Flex>
+
+            <Flex variant="row-center-start-nowrap-8">
+              <Button
+                size="xs"
+                variant="fill"
+                color="primary"
+                onClick={handleStartWithConfig}
+                loading={starting}
+                disabled={anyLoading}
+                leftIcon="playArrow"
+              >
+                Start Swarm
+              </Button>
+              <Button
+                size="xs"
+                variant="clear"
+                color="secondary"
+                onClick={() => setShowStartConfig(false)}
+              >
+                Cancel
+              </Button>
+            </Flex>
+          </Flex>
+        </Section>
+      )}
+    </Flex>
   );
 }
 
 export { SwarmControls };
 export default SwarmControls;
-module.exports = SwarmControls;