@synergenius/flow-weaver-pack-weaver 0.9.18 → 0.9.20

package/dist/ui/bot-config.js

@@ -6,12 +6,19 @@ var React = require("react");
 var { useState, useEffect, useCallback } = React;
 var { Typography } = require("@fw/plugin-ui-kit");
 var { Icon } = require("@fw/plugin-ui-kit");
-var { KeyValueRow } = require("@fw/plugin-ui-kit");
 var { CollapsibleSection } = require("@fw/plugin-ui-kit");
 var { LoadingSpinner } = require("@fw/plugin-ui-kit");
 var { Banner } = require("@fw/plugin-ui-kit");
-var { Badge } = require("@fw/plugin-ui-kit");
 var { IconButton } = require("@fw/plugin-ui-kit");
+var { styled } = require("@fw/plugin-theme");
+var ConfigRow = styled.div({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "6px 0",
+  borderBottom: "1px solid $color-border-default",
+  "&:last-of-type": { borderBottom: "none" }
+});
 var TOOL_URL = "/api/pack-tool/@synergenius/flow-weaver-pack-weaver/fw_weaver_insights";
 function BotConfig({ packName, botId }) {
   const [data, setData] = useState(null);
@@ -47,18 +54,33 @@ function BotConfig({ packName, botId }) {
   useEffect(() => {
     fetchData();
   }, [fetchData]);
-  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSpinner, { size: "sm" });
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Banner, { variant: "error", size: "compact", children: error }) });
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSpinner, { size: "small" });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Banner, { status: "danger", size: "small", children: error }) });
   const bot = data?.bots?.find((b) => b.name === botId) ?? data?.bots?.[0];
   const provider = bot?.provider ?? "Not configured";
   const approval = bot?.approvalMode ?? "auto";
   const hasBots = (data?.bots?.length ?? 0) > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleSection, { title: "Configuration", defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "4px 12px 12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyValueRow, { label: "Provider", value: provider }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyValueRow, { label: "Approval", value: approval }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyValueRow, { label: "Trust Phase", value: `P${data?.trust?.phase ?? "?"} (${data?.trust?.score ?? 0}/100)` }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleSection, { title: "Configuration", defaultExpanded: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "4px 12px 12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ConfigRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "smallCaption-bold", color: "color-text-subtle", children: "Provider" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-regular", color: "color-text-high", children: provider })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ConfigRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "smallCaption-bold", color: "color-text-subtle", children: "Approval" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-regular", color: "color-text-high", children: approval })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ConfigRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "smallCaption-bold", color: "color-text-subtle", children: "Trust Phase" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Typography, { variant: "caption-regular", color: "color-text-high", children: [
+        "P",
+        data?.trust?.phase ?? "?",
+        " (",
+        data?.trust?.score ?? 0,
+        "/100)"
+      ] })
+    ] }),
     !hasBots && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Banner, { variant: "info", size: "compact", children: "No .weaver.json detected. Create one to configure providers and approval modes." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Banner, { status: "info", size: "small", children: "No .weaver.json detected. Create one to configure providers and approval modes." }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-regular", color: "color-text-subtle", style: { marginTop: 6, fontFamily: "var(--typography-family-mono)" }, children: "npx flow-weaver weaver init" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 10, display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, { icon: "refresh", size: "xs", variant: "clear", onClick: fetchData, title: "Refresh" }) })

package/dist/ui/bot-dashboard.js

@@ -23,7 +23,11 @@ function callTool(tool, body = {}) {
     if (!res.ok) throw new Error("Request failed");
     const json = await res.json();
     if (json.isError) throw new Error(json.result);
-    return JSON.parse(json.result);
+    try {
+      return JSON.parse(json.result);
+    } catch {
+      return json.result;
+    }
   });
 }
 var KpiRow = styled.div({
@@ -71,9 +75,9 @@ function healthColor(score) {
   return "var(--color-status-negative)";
 }
 var severityToVariant = {
-  critical: "negative",
-  warning: "caution",
-  info: "neutral"
+  critical: "error",
+  warning: "warning",
+  info: "default"
 };
 var outcomeToIcon = {
   completed: { name: "taskAlt", color: "color-status-positive" },
@@ -125,15 +129,15 @@ function BotDashboard({ packName, botId }) {
     timerRef.current = setInterval(fetchData, 3e4);
     return () => clearInterval(timerRef.current);
   }, [fetchData]);
-  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSpinner, { size: "sm" }) });
-  if (error && !insights) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Banner, { variant: "error", size: "compact", children: error }) });
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSpinner, { size: "small" }) });
+  if (error && !insights) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Banner, { status: "danger", size: "small", children: error }) });
   if (!insights) return null;
   const healthScore = insights.health?.overall ?? 0;
   const trust = insights.trust ?? { phase: 1, score: 0 };
   const cost = insights.cost ?? { last7Days: 0, trend: "stable" };
   const topInsights = (insights.insights ?? []).slice(0, 3);
   const recentRuns = history.slice(0, 5);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleSection, { title: "Dashboard", defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "4px 12px 12px" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleSection, { title: "Dashboard", defaultExpanded: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "4px 12px 12px" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(KpiRow, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(KpiCard, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KpiValue, { style: { color: healthColor(healthScore) }, children: healthScore }),
@@ -161,7 +165,7 @@ function BotDashboard({ packName, botId }) {
     topInsights.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "smallCaption-bold", color: "color-text-subtle", style: { marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.04em" }, children: "Insights" }),
       topInsights.map((ins, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InsightRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: severityToVariant[ins.severity] ?? "neutral", size: "sm", children: ins.severity }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: severityToVariant[ins.severity] ?? "default", children: ins.severity }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, { variant: "caption-regular", color: "color-text-medium", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: ins.title })
       ] }, i))
     ] }),

package/flowweaver.manifest.json

@@ -1,7 +1,7 @@
 {
   "manifestVersion": 2,
   "name": "@synergenius/flow-weaver-pack-weaver",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "AI bot for Flow Weaver. Execute tasks, run workflows, evolve autonomously.",
   "engineVersion": ">=0.22.10",
   "categories": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synergenius/flow-weaver-pack-weaver",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "AI bot for Flow Weaver. Execute tasks, run workflows, evolve autonomously.",
   "type": "module",
   "main": "./dist/index.js",

package/src/ui/bot-config.tsx

@@ -6,12 +6,20 @@ const React = require('react');
 const { useState, useEffect, useCallback } = React;
 const { Typography } = require('@fw/plugin-ui-kit');
 const { Icon } = require('@fw/plugin-ui-kit');
-const { KeyValueRow } = require('@fw/plugin-ui-kit');
 const { CollapsibleSection } = require('@fw/plugin-ui-kit');
 const { LoadingSpinner } = require('@fw/plugin-ui-kit');
 const { Banner } = require('@fw/plugin-ui-kit');
-const { Badge } = require('@fw/plugin-ui-kit');
 const { IconButton } = require('@fw/plugin-ui-kit');
+const { styled } = require('@fw/plugin-theme');
+
+const ConfigRow = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '6px 0',
+  borderBottom: '1px solid $color-border-default',
+  '&:last-of-type': { borderBottom: 'none' },
+});
 
 const TOOL_URL = '/api/pack-tool/@synergenius/flow-weaver-pack-weaver/fw_weaver_insights';
 
@@ -48,29 +56,38 @@ function BotConfig({ packName, botId }: { packName: string; botId: string }) {
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
-  if (loading) return <LoadingSpinner size="sm" />;
+  if (loading) return <LoadingSpinner size="small" />;
 
   if (error) return (
     <div style={{ padding: '8px 12px' }}>
-      <Banner variant="error" size="compact">{error}</Banner>
+      <Banner status="danger" size="small">{error}</Banner>
     </div>
   );
 
-  const bot = data?.bots?.find(b => b.name === botId) ?? data?.bots?.[0];
+  const bot = data?.bots?.find((b: any) => b.name === botId) ?? data?.bots?.[0];
   const provider = bot?.provider ?? 'Not configured';
   const approval = bot?.approvalMode ?? 'auto';
   const hasBots = (data?.bots?.length ?? 0) > 0;
 
   return (
-    <CollapsibleSection title="Configuration" defaultOpen>
+    <CollapsibleSection title="Configuration" defaultExpanded>
       <div style={{ padding: '4px 12px 12px' }}>
-        <KeyValueRow label="Provider" value={provider} />
-        <KeyValueRow label="Approval" value={approval} />
-        <KeyValueRow label="Trust Phase" value={`P${data?.trust?.phase ?? '?'} (${data?.trust?.score ?? 0}/100)`} />
+        <ConfigRow>
+          <Typography variant="smallCaption-bold" color="color-text-subtle">Provider</Typography>
+          <Typography variant="caption-regular" color="color-text-high">{provider}</Typography>
+        </ConfigRow>
+        <ConfigRow>
+          <Typography variant="smallCaption-bold" color="color-text-subtle">Approval</Typography>
+          <Typography variant="caption-regular" color="color-text-high">{approval}</Typography>
+        </ConfigRow>
+        <ConfigRow>
+          <Typography variant="smallCaption-bold" color="color-text-subtle">Trust Phase</Typography>
+          <Typography variant="caption-regular" color="color-text-high">P{data?.trust?.phase ?? '?'} ({data?.trust?.score ?? 0}/100)</Typography>
+        </ConfigRow>
 
         {!hasBots && (
           <div style={{ marginTop: 12 }}>
-            <Banner variant="info" size="compact">
+            <Banner status="info" size="small">
               No .weaver.json detected. Create one to configure providers and approval modes.
             </Banner>
             <Typography variant="caption-regular" color="color-text-subtle" style={{ marginTop: 6, fontFamily: 'var(--typography-family-mono)' }}>

package/src/ui/bot-dashboard.tsx

@@ -43,7 +43,7 @@ function callTool(tool: string, body: Record<string, unknown> = {}) {
     if (!res.ok) throw new Error('Request failed');
     const json = await res.json();
     if (json.isError) throw new Error(json.result);
-    return JSON.parse(json.result);
+    try { return JSON.parse(json.result); } catch { return json.result; }
   });
 }
 
@@ -105,9 +105,9 @@ function healthColor(score: number): string {
 }
 
 const severityToVariant: Record<string, string> = {
-  critical: 'negative',
-  warning: 'caution',
-  info: 'neutral',
+  critical: 'error',
+  warning: 'warning',
+  info: 'default',
 };
 
 const outcomeToIcon: Record<string, { name: TIconNameType; color: string }> = {
@@ -163,11 +163,11 @@ function BotDashboard({ packName, botId }: { packName: string; botId: string })
     return () => clearInterval(timerRef.current);
   }, [fetchData]);
 
-  if (loading) return <div style={{ padding: 16, textAlign: 'center' }}><LoadingSpinner size="sm" /></div>;
+  if (loading) return <div style={{ padding: 16, textAlign: 'center' }}><LoadingSpinner size="small" /></div>;
 
   if (error && !insights) return (
     <div style={{ padding: 12 }}>
-      <Banner variant="error" size="compact">{error}</Banner>
+      <Banner status="danger" size="small">{error}</Banner>
     </div>
   );
 
@@ -180,7 +180,7 @@ function BotDashboard({ packName, botId }: { packName: string; botId: string })
   const recentRuns = history.slice(0, 5);
 
   return (
-    <CollapsibleSection title="Dashboard" defaultOpen>
+    <CollapsibleSection title="Dashboard" defaultExpanded>
       <div style={{ padding: '4px 12px 12px' }}>
         {/* KPI cards */}
         <KpiRow>
@@ -206,7 +206,7 @@ function BotDashboard({ packName, botId }: { packName: string; botId: string })
             </Typography>
             {topInsights.map((ins, i) => (
               <InsightRow key={i}>
-                <Badge variant={(severityToVariant[ins.severity] ?? 'neutral') as any} size="sm">
+                <Badge variant={(severityToVariant[ins.severity] ?? 'default') as any}>
                   {ins.severity}
                 </Badge>
                 <Typography variant="caption-regular" color="color-text-medium" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>