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

package/src/ui/bot-status.tsx

@@ -2,9 +2,8 @@
  * Weaver Bot Status Widget — live session status during execution.
  * Runs in the platform bot-panel sandbox. Refreshes every 5 seconds.
  */
-const React = require('react');
-const { useState, useEffect, useCallback, useRef } = React;
-const { Typography, Icon } = require('@fw/plugin-ui-kit');
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Typography, Icon } from '@fw/plugin-ui-kit';
 
 const TOOL_URL = '/api/pack-tool/@synergenius/flow-weaver-pack-weaver/fw_weaver_status';
 
@@ -115,4 +114,5 @@ function BotStatus({ packName, botId }: { packName: string; botId: string }) {
   );
 }
 
-module.exports = BotStatus;
+export { BotStatus };
+export default BotStatus;

package/src/ui/budget-bar.tsx

@@ -1,30 +1,91 @@
-const React = require('react');
-const { Flex, Typography } = require('@fw/plugin-ui-kit');
-
-function BudgetBar({ label, used, limit, unit }: {
-  label: string; used: number; limit: number; unit: string;
-}) {
-  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' },
-      }),
-    ),
+/**
+ * BudgetBar — progress bar showing token/cost usage with editable limits.
+ * Click the edit icon next to the limit to change it inline.
+ */
+import React, { useState, useCallback } from 'react';
+import { Flex, Typography, IconButton, Input, UsageBar } from '@fw/plugin-ui-kit';
+
+interface BudgetBarProps {
+  label: string;
+  used: number;
+  limit: number;
+  unit: string;
+  /** Called when the user edits the limit. If not provided, limit is read-only. */
+  onLimitChange?: (newLimit: number) => void;
+}
+
+function BudgetBar({ label, used, limit, unit, onLimitChange }: BudgetBarProps) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+
+  const handleStartEdit = useCallback(() => {
+    setEditValue(String(limit));
+    setEditing(true);
+  }, [limit]);
+
+  const handleCommit = 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 (
+    <Flex variant="column-start-start-nowrap-2">
+      <Flex variant="row-center-space-between-nowrap-4">
+        <Typography variant="smallCaption-regular" color="color-text-subtle">
+          {label}
+        </Typography>
+
+        <Flex variant="row-center-start-nowrap-4">
+          {editing ? (
+            <Flex variant="row-center-start-nowrap-4">
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                {`${usedDisplay} /`}
+              </Typography>
+              <Input
+                type="number"
+                value={editValue}
+                onChange={(value: string) => setEditValue(value)}
+                onKeyDown={(e: { key: string }) => {
+                  if (e.key === 'Enter') handleCommit();
+                  if (e.key === 'Escape') setEditing(false);
+                }}
+                onBlur={handleCommit}
+                type="number"
+                size="small"
+                autoFocus={true}
+              />
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                {unit}
+              </Typography>
+            </Flex>
+          ) : (
+            <Flex variant="row-center-start-nowrap-4">
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                {`${usedDisplay} / ${limitDisplay} ${unit === 'USD' ? '' : unit}`}
+              </Typography>
+              {onLimitChange && (
+                <IconButton
+                  icon="edit"
+                  size="xs"
+                  variant="clear"
+                  onClick={handleStartEdit}
+                  title={`Edit ${label.toLowerCase()} limit`}
+                />
+              )}
+            </Flex>
+          )}
+        </Flex>
+      </Flex>
+      <UsageBar used={used} limit={limit} />
+    </Flex>
   );
 }
 
 export { BudgetBar };
 export default BudgetBar;
-module.exports = BudgetBar;