@synergenius/flow-weaver-pack-weaver 0.9.59 → 0.9.77

package/dist/ui/bot-panel.js

@@ -9,11 +9,9 @@ var {
   Button,
   IconButton,
   Icon,
-  Input,
   EmptyState,
   ScrollArea,
   StatusIcon,
-  toast,
   usePackWorkspace
 } = require("@fw/plugin-ui-kit");
 function parseToolResult(raw) {
@@ -26,181 +24,113 @@ function parseToolResult(raw) {
   }
   return raw;
 }
-function validationIcon(state) {
-  switch (state) {
-    case "valid":
-      return { icon: "checkCircle", color: "var(--color-success)" };
-    case "invalid":
-      return { icon: "error", color: "var(--color-danger)" };
-    case "checking":
-      return { icon: "sync", color: "var(--color-warning)" };
+function statusToIconStatus(status) {
+  switch (status) {
+    case "executing":
+    case "running":
+      return "running";
+    case "paused":
+      return "pending";
+    case "stopped":
+    case "stopping":
+      return "failed";
     default:
-      return { icon: "helpOutline", color: "var(--color-text-subtle)" };
+      return "completed";
   }
 }
+function statusLabel(status) {
+  switch (status) {
+    case "executing":
+      return "Executing";
+    case "running":
+      return "Running";
+    case "paused":
+      return "Paused";
+    case "stopped":
+      return "Stopped";
+    case "stopping":
+      return "Stopping";
+    default:
+      return "Idle";
+  }
+}
+function formatTokens(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(n);
+}
+function formatCost(n) {
+  return `$${n.toFixed(2)}`;
+}
+var POLL_INTERVAL_MS = 5e3;
 function BotPanel() {
   const ctx = usePackWorkspace();
-  const { callTool, dispatchEvent } = ctx;
+  const { callTool } = ctx;
   const packId = ctx.packId;
-  const [bots, setBots] = useState([]);
+  const [swarm, setSwarm] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [showRegForm, setShowRegForm] = useState(false);
-  const [regName, setRegName] = useState("");
-  const [regFilePath, setRegFilePath] = useState("");
-  const [regExport, setRegExport] = useState("");
-  const [registering, setRegistering] = useState(false);
-  const [confirmUnregId, setConfirmUnregId] = useState(null);
-  const [unregistering, setUnregistering] = useState(false);
-  const loadBots = useCallback(async () => {
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const fetchStatus = useCallback(async () => {
     try {
       setError(null);
-      const raw = await callTool("fw_weaver_list_bots");
+      const raw = await callTool("fw_weaver_swarm_status", {});
+      if (!mountedRef.current) return;
       const parsed = parseToolResult(raw);
-      if (Array.isArray(parsed)) {
-        setBots(parsed);
-      } else {
-        setBots([]);
-      }
+      if (parsed) setSwarm(parsed);
     } catch (err) {
-      const msg = err instanceof Error ? err.message : "Failed to load bots";
+      if (!mountedRef.current) return;
+      const msg = err instanceof Error ? err.message : "Failed to load swarm status";
       setError(msg);
     } finally {
-      setLoading(false);
+      if (mountedRef.current) setLoading(false);
     }
   }, [callTool]);
-  const mountedRef = useRef(false);
   useEffect(() => {
-    if (!mountedRef.current) {
-      mountedRef.current = true;
-      loadBots();
-    }
-  }, [loadBots]);
-  const handleRegister = useCallback(async () => {
-    if (!regName.trim() || !regFilePath.trim() || !regExport.trim()) return;
-    setRegistering(true);
-    try {
-      await callTool("fw_weaver_register_bot", {
-        name: regName.trim(),
-        filePath: regFilePath.trim(),
-        workflowExport: regExport.trim(),
-        paramName: "taskJson"
-      });
-      toast("Bot registered", { type: "success" });
-      setRegName("");
-      setRegFilePath("");
-      setRegExport("");
-      setShowRegForm(false);
-      await loadBots();
-    } catch (err) {
-      toast(err instanceof Error ? err.message : "Registration failed", { type: "error" });
-    } finally {
-      setRegistering(false);
-    }
-  }, [regName, regFilePath, regExport, callTool, loadBots]);
-  const handleUnregister = useCallback(async (id) => {
-    setUnregistering(true);
-    try {
-      await callTool("fw_weaver_unregister_bot", { id });
-      toast("Bot unregistered", { type: "warning" });
-      setConfirmUnregId(null);
-      await loadBots();
-    } catch (err) {
-      toast(err instanceof Error ? err.message : "Unregister failed", { type: "error" });
-    } finally {
-      setUnregistering(false);
-    }
-  }, [callTool, loadBots]);
-  const handleOpenWorkspace = useCallback((botId) => {
-    dispatchEvent("fw:open-bot-workspace", { botId, packId, live: false });
-  }, [dispatchEvent, packId]);
-  const hasBots = bots.length > 0;
+    fetchStatus();
+    const timer = setInterval(fetchStatus, POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [fetchStatus]);
+  const handleOpenDashboard = useCallback(() => {
+    ctx.openWindow({
+      type: "custom",
+      title: "Swarm Dashboard",
+      icon: "dashboard",
+      contentType: "bot-workspace",
+      displayState: "docked",
+      dockZone: "center",
+      definitionId: "bot-workspace",
+      size: { width: 1e3, height: 700 },
+      singleton: true,
+      data: { packId }
+    });
+  }, [ctx, packId]);
   const header = React.createElement(
     Flex,
     {
-      variant: "row-center-between-nowrap-8",
+      variant: "row-center-space-between-nowrap-8",
       style: { padding: "8px 12px", borderBottom: "1px solid var(--color-border-default)", flexShrink: 0 }
     },
     React.createElement(
       Flex,
       { variant: "row-center-start-nowrap-6" },
       React.createElement(Icon, { name: "smartToy", size: 16, color: "color-text-medium" }),
-      React.createElement(Typography, { variant: "caption-thick", color: "color-text-high" }, "Bots")
+      React.createElement(Typography, { variant: "caption-thick", color: "color-text-high" }, "Swarm")
     ),
-    React.createElement(
-      Flex,
-      { variant: "row-center-start-nowrap-4" },
-      React.createElement(IconButton, {
-        icon: "refresh",
-        size: "xs",
-        variant: "clear",
-        onClick: loadBots,
-        title: "Refresh"
-      }),
-      React.createElement(IconButton, {
-        icon: "add",
-        size: "xs",
-        variant: "clear",
-        onClick: () => setShowRegForm((v) => !v),
-        title: "Register bot"
-      })
-    )
+    React.createElement(IconButton, {
+      icon: "reset",
+      size: "xs",
+      variant: "clear",
+      onClick: fetchStatus,
+      title: "Refresh"
+    })
   );
-  const regForm = showRegForm ? React.createElement(
-    Flex,
-    {
-      variant: "column-start-start-nowrap-8",
-      style: {
-        padding: "10px 12px",
-        borderBottom: "1px solid var(--color-border-default)",
-        backgroundColor: "var(--color-surface-low)"
-      }
-    },
-    React.createElement(Typography, { variant: "smallCaption-thick", color: "color-text-medium" }, "Register Existing Workflow"),
-    React.createElement(Input, {
-      type: "text",
-      size: "small",
-      placeholder: "Bot name",
-      value: regName,
-      onChange: setRegName
-    }),
-    React.createElement(Input, {
-      type: "text",
-      size: "small",
-      placeholder: "File path (e.g. my-bot.ts)",
-      value: regFilePath,
-      onChange: setRegFilePath
-    }),
-    React.createElement(Input, {
-      type: "text",
-      size: "small",
-      placeholder: "Export name (e.g. myBot)",
-      value: regExport,
-      onChange: setRegExport
-    }),
-    React.createElement(
-      Flex,
-      { variant: "row-center-start-nowrap-6" },
-      React.createElement(Button, {
-        size: "xs",
-        variant: "fill",
-        color: "primary",
-        onClick: handleRegister,
-        disabled: registering || !regName.trim() || !regFilePath.trim() || !regExport.trim()
-      }, registering ? "Registering..." : "Register"),
-      React.createElement(Button, {
-        size: "xs",
-        variant: "clear",
-        color: "secondary",
-        onClick: () => {
-          setShowRegForm(false);
-          setRegName("");
-          setRegFilePath("");
-          setRegExport("");
-        }
-      }, "Cancel")
-    )
-  ) : null;
   if (loading) {
     return React.createElement(
       Flex,
@@ -213,9 +143,9 @@ function BotPanel() {
         Flex,
         {
           variant: "column-center-center-nowrap-8",
-          style: { flex: 1, padding: "24px" }
+          style: { flex: 1 }
         },
-        React.createElement(Typography, { variant: "caption-regular", color: "color-text-subtle" }, "Loading bots...")
+        React.createElement(Typography, { variant: "caption-regular", color: "color-text-subtle" }, "Loading swarm status...")
       )
     );
   }
@@ -231,60 +161,113 @@ function BotPanel() {
         Flex,
         {
           variant: "column-center-center-nowrap-8",
-          style: { flex: 1, padding: "24px" }
+          style: { flex: 1 }
         },
-        React.createElement(Typography, { variant: "caption-regular", color: "color-danger" }, error),
-        React.createElement(Button, { size: "xs", variant: "outlined", onClick: loadBots }, "Retry")
+        React.createElement(Typography, { variant: "caption-regular", color: "color-status-negative" }, error),
+        React.createElement(Button, { size: "xs", variant: "outlined", onClick: fetchStatus }, "Retry")
       )
     );
   }
-  const botCards = bots.map((bot) => {
-    const vState = bot.validation?.state;
-    const vInfo = validationIcon(vState);
-    const isConfirming = confirmUnregId === bot.id;
-    return React.createElement(
+  const swarmStatus = swarm?.status ?? "idle";
+  const statusRow = React.createElement(
+    Flex,
+    {
+      variant: "row-center-space-between-nowrap-8",
+      style: { padding: "8px 12px", borderBottom: "1px solid var(--color-border-default)" }
+    },
+    React.createElement(
+      Flex,
+      { variant: "row-center-start-nowrap-6" },
+      React.createElement(StatusIcon, {
+        status: statusToIconStatus(swarmStatus),
+        size: "sm"
+      }),
+      React.createElement(
+        Typography,
+        { variant: "caption-thick", color: "color-text-high" },
+        statusLabel(swarmStatus)
+      )
+    ),
+    React.createElement(Button, {
+      size: "xs",
+      variant: "outlined",
+      color: "primary",
+      onClick: handleOpenDashboard
+    }, "Open Dashboard")
+  );
+  const statsRow = React.createElement(
+    Flex,
+    {
+      variant: "row-center-space-between-nowrap-8",
+      style: { padding: "8px 12px", borderBottom: "1px solid var(--color-border-default)", backgroundColor: "var(--color-surface-low)" }
+    },
+    React.createElement(
+      Flex,
+      { variant: "column-center-center-nowrap-1" },
+      React.createElement(
+        Typography,
+        { variant: "smallCaption-thick", color: "color-text-high" },
+        String(swarm?.tasksCompleted ?? 0)
+      ),
+      React.createElement(Typography, { variant: "smallCaption-regular", color: "color-text-subtle" }, "Done")
+    ),
+    React.createElement(
+      Flex,
+      { variant: "column-center-center-nowrap-1" },
+      React.createElement(
+        Typography,
+        { variant: "smallCaption-thick", color: "color-text-high" },
+        String(swarm?.tasksFailed ?? 0)
+      ),
+      React.createElement(Typography, { variant: "smallCaption-regular", color: "color-text-subtle" }, "Failed")
+    ),
+    React.createElement(
+      Flex,
+      { variant: "column-center-center-nowrap-1" },
+      React.createElement(
+        Typography,
+        { variant: "smallCaption-thick", color: "color-text-high" },
+        formatTokens(swarm?.totalTokensUsed ?? 0)
+      ),
+      React.createElement(Typography, { variant: "smallCaption-regular", color: "color-text-subtle" }, "Tokens")
+    ),
+    React.createElement(
+      Flex,
+      { variant: "column-center-center-nowrap-1" },
+      React.createElement(
+        Typography,
+        { variant: "smallCaption-thick", color: "color-text-high" },
+        formatCost(swarm?.totalCost ?? 0)
+      ),
+      React.createElement(Typography, { variant: "smallCaption-regular", color: "color-text-subtle" }, "Cost")
+    )
+  );
+  const instanceEntries = Object.values(swarm?.instances ?? {});
+  const hasBots = instanceEntries.length > 0;
+  const botCards = instanceEntries.map(
+    (inst) => React.createElement(
       Flex,
       {
-        key: bot.id,
+        key: inst.instanceId,
         variant: "row-center-start-nowrap-8",
-        style: {
-          padding: "7px 8px",
-          borderRadius: "var(--border-radius-secondary)",
-          border: "1px solid var(--color-border-default)",
-          cursor: "pointer",
-          transition: "background-color 0.12s"
-        },
-        onClick: () => handleOpenWorkspace(bot.id),
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "var(--color-surface-raised)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = "";
-        }
+        style: { padding: "8px", borderRadius: "var(--border-radius-regular)", border: "1px solid var(--color-border-default)" }
       },
-      // Icon
+      // Bot icon
       React.createElement(
-        "div",
+        Flex,
         {
+          variant: "row-center-center-nowrap-0",
           style: {
-            width: "26px",
-            height: "26px",
+            width: 26,
+            height: 26,
             borderRadius: "var(--border-radius-compact)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
             flexShrink: 0,
-            background: bot.color ? `color-mix(in srgb, ${bot.color} 14%, transparent)` : "var(--color-surface-low)"
+            background: "var(--color-surface-low)"
           }
         },
-        React.createElement(Icon, {
-          name: bot.icon || "smartToy",
-          size: 14,
-          color: bot.color ? void 0 : "color-text-medium",
-          style: bot.color ? { color: bot.color } : void 0
-        })
+        React.createElement(Icon, { name: "smartToy", size: 14, color: "color-text-medium" })
       ),
-      // Name + description
+      // Name + status + task
       React.createElement(
         Flex,
         {
@@ -296,82 +279,60 @@ function BotPanel() {
           { variant: "row-center-start-nowrap-4" },
           React.createElement(Typography, {
             variant: "caption-thick",
-            color: "color-text-high",
-            style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
-          }, bot.name),
-          // Validation badge
-          React.createElement(Icon, {
-            name: vInfo.icon,
-            size: 12,
-            style: { color: vInfo.color, flexShrink: 0 }
-          })
+            color: "color-text-high"
+          }, `${inst.profileId} #${inst.index}`),
+          React.createElement(StatusIcon, {
+            status: statusToIconStatus(inst.status),
+            size: "sm"
+          }),
+          React.createElement(Typography, {
+            variant: "smallCaption-regular",
+            color: "color-text-subtle"
+          }, statusLabel(inst.status))
         ),
-        bot.description ? React.createElement(Typography, {
+        inst.currentTaskId ? React.createElement(Typography, {
           variant: "smallCaption-regular",
           color: "color-text-medium",
-          style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
-        }, bot.description) : null
+          truncate: true
+        }, `Task: ${inst.currentTaskId}`) : null
       ),
-      // Actions
-      isConfirming ? React.createElement(
-        Flex,
-        {
-          variant: "row-center-start-nowrap-4",
-          onClick: (e) => e.stopPropagation()
-        },
-        React.createElement(Button, {
-          size: "xs",
-          variant: "fill",
-          color: "danger",
-          onClick: () => handleUnregister(bot.id),
-          disabled: unregistering
-        }, unregistering ? "..." : "Yes"),
-        React.createElement(Button, {
-          size: "xs",
-          variant: "clear",
-          color: "secondary",
-          onClick: () => setConfirmUnregId(null)
-        }, "No")
-      ) : React.createElement(
+      // Per-instance stats
+      React.createElement(
         Flex,
         {
-          variant: "row-center-start-nowrap-2",
-          onClick: (e) => e.stopPropagation()
+          variant: "column-end-end-nowrap-1",
+          style: { flexShrink: 0 }
         },
-        React.createElement(IconButton, {
-          icon: "openInNew",
-          size: "xs",
-          variant: "clear",
-          onClick: () => handleOpenWorkspace(bot.id),
-          title: "Open workspace"
-        }),
-        React.createElement(IconButton, {
-          icon: "close",
-          size: "xs",
-          variant: "clear",
-          onClick: () => setConfirmUnregId(bot.id),
-          title: "Unregister"
-        })
+        React.createElement(
+          Typography,
+          { variant: "smallCaption-regular", color: "color-text-subtle" },
+          formatTokens(inst.tokensUsed)
+        ),
+        React.createElement(
+          Typography,
+          { variant: "smallCaption-regular", color: "color-text-subtle" },
+          formatCost(inst.cost)
+        )
       )
-    );
-  });
+    )
+  );
   const content = hasBots ? React.createElement(
     ScrollArea,
     { style: { flex: 1 } },
     React.createElement(Flex, {
-      variant: "column-start-start-nowrap-4",
+      variant: "column-stretch-start-nowrap-6",
       style: { padding: "8px 12px" }
     }, ...botCards)
   ) : React.createElement(
     Flex,
     {
       variant: "column-center-center-nowrap-0",
-      style: { flex: 1, padding: "24px" }
+      style: { flex: 1 }
     },
     React.createElement(EmptyState, {
       icon: "smartToy",
-      message: "No bots registered",
-      description: "Register an existing workflow or ask the AI assistant to create one."
+      message: swarmStatus === "idle" ? "Swarm idle" : "No bots active",
+      description: "Open the dashboard to configure and start the swarm."
     })
   );
   return React.createElement(
@@ -381,7 +342,8 @@ function BotPanel() {
       style: { width: "100%", height: "100%", overflow: "hidden" }
     },
     header,
-    regForm,
+    statusRow,
+    statsRow,
     content
   );
 }