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

package/dist/ui/bot-slot-card.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/ui/bot-slot-card.tsx
@@ -34,8 +24,34 @@ __export(bot_slot_card_exports, {
   default: () => bot_slot_card_default
 });
 module.exports = __toCommonJS(bot_slot_card_exports);
-var import_react = __toESM(require("react"), 1);
 var import_plugin_ui_kit = require("@fw/plugin-ui-kit");
+var import_plugin_theme = require("@fw/plugin-theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Row = import_plugin_theme.styled.div({
+  display: "flex",
+  alignItems: "center",
+  gap: "$gap-tight",
+  padding: "6px 16px",
+  minHeight: "38px",
+  borderBottom: "1px solid $color-border-default",
+  transition: "background-color 0.15s ease",
+  variants: {
+    clickable: {
+      true: {
+        cursor: "pointer",
+        "&:hover": { backgroundColor: "$color-surface-hover" },
+        "&:active": { backgroundColor: "$color-surface-active" }
+      },
+      false: {}
+    }
+  }
+});
+var WorkerCol = import_plugin_theme.styled.div({ width: "120px", flexShrink: 0 });
+var BotCol = import_plugin_theme.styled.div({ width: "110px", flexShrink: 0, display: "flex", alignItems: "center", gap: "4px" });
+var StatusCol = import_plugin_theme.styled.div({ width: "70px", flexShrink: 0 });
+var TaskCol = import_plugin_theme.styled.div({ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" });
+var StatCol = import_plugin_theme.styled.div({ width: "50px", flexShrink: 0, textAlign: "right" });
+var ActionsCol = import_plugin_theme.styled.div({ width: "50px", flexShrink: 0 });
 var statusToLabel = {
   idle: "Idle",
   executing: "Executing",
@@ -51,91 +67,85 @@ function formatCost(n) {
   if (n < 0.01 && n > 0) return "<$0.01";
   return `$${n.toFixed(2)}`;
 }
-function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onPause, onResume, onStop }) {
+function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onView, onPause, onResume, onStop }) {
   const { botId, botName, status, currentTaskId, tokensUsed, cost } = bot;
   const isExecuting = status === "executing";
   const isPaused = status === "paused";
   const label = statusToLabel[status] ?? status;
   const taskText = isExecuting ? currentTaskTitle || currentTaskId || "-" : "-";
-  return import_react.default.createElement(
-    import_plugin_ui_kit.Flex,
+  const clickable = isExecuting && onView;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Row,
     {
-      variant: "row-center-start-nowrap-8",
-      style: { padding: "6px 16px", minHeight: "38px", borderBottom: "1px solid var(--color-border-default)" }
-    },
-    // Instance name
-    import_react.default.createElement(import_plugin_ui_kit.Typography, {
-      variant: "smallCaption-regular",
-      color: "color-text-high",
-      style: { width: "120px", flexShrink: 0 }
-    }, profileName ? `${profileName} #${botId.split("-").pop() ?? "0"}` : botName),
-    // Bot (icon + name)
-    import_react.default.createElement(
-      import_plugin_ui_kit.Flex,
-      {
-        variant: "row-center-start-nowrap-4",
-        style: { width: "110px", flexShrink: 0, color: botColor ? `var(--${botColor})` : void 0 }
-      },
-      import_react.default.createElement(import_plugin_ui_kit.Icon, { name: botIcon || "smartToy", size: 12 }),
-      import_react.default.createElement(import_plugin_ui_kit.Typography, {
-        variant: "smallCaption-regular",
-        color: "color-text-subtle"
-      }, botDisplayName || "-")
-    ),
-    // Status
-    import_react.default.createElement(import_plugin_ui_kit.Typography, {
-      variant: "smallCaption-regular",
-      color: isExecuting ? "color-brand-main" : "color-text-subtle",
-      style: { width: "70px", flexShrink: 0 }
-    }, label),
-    // Current task
-    import_react.default.createElement(import_plugin_ui_kit.Typography, {
-      variant: "smallCaption-regular",
-      color: isExecuting ? "color-text-medium" : "color-text-subtle",
-      style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
-    }, taskText),
-    // Tokens
-    import_react.default.createElement(import_plugin_ui_kit.Typography, {
-      variant: "smallCaption-regular",
-      color: "color-text-subtle",
-      style: { width: "50px", flexShrink: 0, textAlign: "right" }
-    }, formatTokens(tokensUsed)),
-    // Cost
-    import_react.default.createElement(import_plugin_ui_kit.Typography, {
-      variant: "smallCaption-regular",
-      color: "color-text-subtle",
-      style: { width: "50px", flexShrink: 0, textAlign: "right" }
-    }, formatCost(cost)),
-    // Actions
-    import_react.default.createElement(
-      import_plugin_ui_kit.Flex,
-      {
-        variant: "row-center-end-nowrap-1",
-        style: { width: "50px", flexShrink: 0 }
-      },
-      isExecuting && onPause && import_react.default.createElement(import_plugin_ui_kit.IconButton, {
-        icon: "pause",
-        size: "xs",
-        variant: "clear",
-        onClick: () => onPause(botId),
-        title: "Pause"
-      }),
-      isPaused && onResume && import_react.default.createElement(import_plugin_ui_kit.IconButton, {
-        icon: "playArrow",
-        size: "xs",
-        variant: "clear",
-        onClick: () => onResume(botId),
-        title: "Resume"
-      }),
-      (isExecuting || isPaused) && onStop && import_react.default.createElement(import_plugin_ui_kit.IconButton, {
-        icon: "stop",
-        size: "xs",
-        variant: "clear",
-        color: "danger",
-        onClick: () => onStop(botId),
-        title: "Stop"
-      })
-    )
+      clickable: !!clickable,
+      onClick: clickable ? () => onView(botId) : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WorkerCol, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-high", children: profileName ? `${profileName} #${botId.split("-").pop() ?? "0"}` : botName }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(BotCol, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Icon, { name: botIcon || "smartToy", size: 12, color: botColor || "color-text-subtle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: botDisplayName || "-" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusCol, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.Typography,
+          {
+            variant: "smallCaption-regular",
+            color: isExecuting ? "color-brand-main" : "color-text-subtle",
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TaskCol, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.Typography,
+          {
+            variant: "smallCaption-regular",
+            color: isExecuting ? "color-text-medium" : "color-text-subtle",
+            truncate: true,
+            children: taskText
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatCol, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: formatTokens(tokensUsed) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatCol, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: formatCost(cost) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsCol, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_plugin_ui_kit.Flex,
+          {
+            variant: "row-center-end-nowrap-1",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              isExecuting && onPause && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.IconButton,
+                {
+                  icon: "pause",
+                  size: "xs",
+                  variant: "clear",
+                  onClick: () => onPause(botId),
+                  title: "Pause"
+                }
+              ),
+              isPaused && onResume && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.IconButton,
+                {
+                  icon: "playArrow",
+                  size: "xs",
+                  variant: "clear",
+                  onClick: () => onResume(botId),
+                  title: "Resume"
+                }
+              ),
+              (isExecuting || isPaused) && onStop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.IconButton,
+                {
+                  icon: "stop",
+                  size: "xs",
+                  variant: "clear",
+                  color: "danger",
+                  onClick: () => onStop(botId),
+                  title: "Stop"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
   );
 }
 var bot_slot_card_default = BotSlotCard;

package/dist/ui/bot-status.js

@@ -1,10 +1,32 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/ui/bot-status.tsx
+var bot_status_exports = {};
+__export(bot_status_exports, {
+  BotStatus: () => BotStatus,
+  default: () => bot_status_default
+});
+module.exports = __toCommonJS(bot_status_exports);
+var import_react = require("react");
+var import_plugin_ui_kit = require("@fw/plugin-ui-kit");
 var import_jsx_runtime = require("react/jsx-runtime");
-var React = require("react");
-var { useState, useEffect, useCallback, useRef } = React;
-var { Typography, Icon } = require("@fw/plugin-ui-kit");
 var TOOL_URL = "/api/pack-tool/@synergenius/flow-weaver-pack-weaver/fw_weaver_status";
 var stateToDot = {
   idle: "neutral",
@@ -25,10 +47,10 @@ var stateToIcon = {
   paused: "pause"
 };
 function BotStatus({ packName, botId }) {
-  const [data, setData] = useState(null);
-  const [error, setError] = useState(null);
-  const timerRef = useRef();
-  const fetchData = useCallback(async () => {
+  const [data, setData] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const timerRef = (0, import_react.useRef)();
+  const fetchData = (0, import_react.useCallback)(async () => {
     try {
       const res = await fetch(TOOL_URL, {
         method: "POST",
@@ -51,13 +73,13 @@ function BotStatus({ packName, botId }) {
       setError(e.message ?? "Failed to load");
     }
   }, []);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     fetchData();
     timerRef.current = setInterval(fetchData, 5e3);
     return () => clearInterval(timerRef.current);
   }, [fetchData]);
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "6px 12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-regular", color: "color-status-negative", children: error }) });
-  if (!data) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "6px 12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-regular", color: "color-text-subtle", children: "Loading status..." }) });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "6px 12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-regular", color: "color-status-negative", children: error }) });
+  if (!data) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "6px 12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-regular", color: "color-text-subtle", children: "Loading status..." }) });
   const state = data.state ?? "idle";
   const dotStatus = stateToDot[state] ?? "neutral";
   const iconName = stateToIcon[state] ?? "pending";
@@ -71,10 +93,10 @@ function BotStatus({ packName, botId }) {
     borderBottom: "1px solid var(--color-border-default)",
     background: "var(--color-surface-elevated)"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: iconName, size: 14, color: `color-status-${dotStatus === "neutral" ? "info" : dotStatus}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-bold", style: { textTransform: "capitalize" }, children: state }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Icon, { name: iconName, size: 14, color: `color-status-${dotStatus === "neutral" ? "info" : dotStatus}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-bold", style: { textTransform: "capitalize" }, children: state }),
     data.currentTask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Typography,
+      import_plugin_ui_kit.Typography,
       {
         variant: "caption-regular",
         color: "color-text-medium",
@@ -82,11 +104,11 @@ function BotStatus({ packName, botId }) {
         children: data.currentTask
       }
     ),
-    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: [
+    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: [
       completed,
       "/",
       total
     ] })
   ] });
 }
-module.exports = BotStatus;
+var bot_status_default = BotStatus;

package/dist/ui/budget-bar.js

@@ -24,36 +24,62 @@ __export(budget_bar_exports, {
   default: () => budget_bar_default
 });
 module.exports = __toCommonJS(budget_bar_exports);
-var React = require("react");
-var { Flex, Typography } = require("@fw/plugin-ui-kit");
-function BudgetBar({ label, used, limit, unit }) {
-  const pct = limit > 0 ? Math.min(100, used / limit * 100) : 0;
-  const color = pct > 90 ? "var(--color-status-negative)" : pct > 70 ? "var(--color-status-caution)" : "var(--color-brand-main)";
-  return React.createElement(
-    Flex,
-    { variant: "column-start-start-nowrap-2", style: { width: "100%" } },
-    React.createElement(
-      Flex,
-      { variant: "row-center-space-between-nowrap-4" },
-      React.createElement(Typography, { variant: "smallCaption-regular", color: "color-text-subtle" }, label),
-      React.createElement(
-        Typography,
-        { variant: "smallCaption-regular", color: "color-text-subtle" },
-        `${used.toLocaleString()} / ${limit.toLocaleString()} ${unit}`
-      )
-    ),
-    React.createElement(
-      Flex,
-      {
-        variant: "row-start-start-nowrap-0",
-        style: { width: "100%", height: "4px", borderRadius: "2px", backgroundColor: "var(--color-surface-raised)", overflow: "hidden" }
-      },
-      React.createElement(Flex, {
-        variant: "row-start-start-nowrap-0",
-        style: { width: `${pct}%`, height: "100%", borderRadius: "2px", backgroundColor: color, transition: "width 0.3s" }
-      })
-    )
-  );
+var import_react = require("react");
+var import_plugin_ui_kit = require("@fw/plugin-ui-kit");
+var import_jsx_runtime = require("react/jsx-runtime");
+function BudgetBar({ label, used, limit, unit, onLimitChange }) {
+  const [editing, setEditing] = (0, import_react.useState)(false);
+  const [editValue, setEditValue] = (0, import_react.useState)("");
+  const handleStartEdit = (0, import_react.useCallback)(() => {
+    setEditValue(String(limit));
+    setEditing(true);
+  }, [limit]);
+  const handleCommit = (0, import_react.useCallback)(() => {
+    const val = parseFloat(editValue);
+    if (val > 0 && onLimitChange) {
+      onLimitChange(val);
+    }
+    setEditing(false);
+  }, [editValue, onLimitChange]);
+  const limitDisplay = unit === "USD" ? `$${limit.toLocaleString()}` : limit.toLocaleString();
+  const usedDisplay = unit === "USD" ? `$${used.toFixed(2)}` : used.toLocaleString();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-start-start-nowrap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-space-between-nowrap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-4", children: editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: `${usedDisplay} /` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.Input,
+          {
+            type: "number",
+            value: editValue,
+            onChange: (value) => setEditValue(value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleCommit();
+              if (e.key === "Escape") setEditing(false);
+            },
+            onBlur: handleCommit,
+            type: "number",
+            size: "small",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: unit })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: `${usedDisplay} / ${limitDisplay} ${unit === "USD" ? "" : unit}` }),
+        onLimitChange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.IconButton,
+          {
+            icon: "edit",
+            size: "xs",
+            variant: "clear",
+            onClick: handleStartEdit,
+            title: `Edit ${label.toLowerCase()} limit`
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.UsageBar, { used, limit })
+  ] });
 }
 var budget_bar_default = BudgetBar;
-module.exports = BudgetBar;