@synergenius/flow-weaver-pack-weaver 0.9.134 → 0.9.136

package/dist/ui/capability-editor.js

@@ -0,0 +1,657 @@
+"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/capability-editor.tsx
+var capability_editor_exports = {};
+__export(capability_editor_exports, {
+  CapabilityEditor: () => CapabilityEditor,
+  default: () => capability_editor_default
+});
+module.exports = __toCommonJS(capability_editor_exports);
+
+// src/bot/operations.ts
+var OP_WRITE_FILE = "write_file";
+var OP_READ_FILE = "read_file";
+var OP_PATCH_FILE = "patch_file";
+var OP_LIST_FILES = "list_files";
+var OP_RUN_SHELL = "run_shell";
+var OP_VALIDATE = "validate";
+var OP_TSC_CHECK = "tsc_check";
+var OP_RUN_TESTS = "run_tests";
+var OP_TASK_CREATE = "task_create";
+var OP_RESPOND = "respond";
+var PLAN_OPERATIONS = [
+  OP_WRITE_FILE,
+  OP_READ_FILE,
+  OP_PATCH_FILE,
+  OP_LIST_FILES,
+  OP_RUN_SHELL,
+  OP_VALIDATE,
+  OP_TASK_CREATE,
+  OP_RESPOND
+];
+
+// src/bot/capability-registry.ts
+var CAP_CORE = {
+  name: "core",
+  description: "Bot identity, structured plan output format, and safety rules. Always loaded.",
+  prompt: `You are Weaver, an expert AI companion for Flow Weaver workflows.
+
+## Plan Format
+Your plans MUST be structured JSON with concrete steps.
+Each step has: operation (tool name), description (what it does), args (complete arguments).
+Do NOT describe what you would do \u2014 actually do it by calling tools.
+
+## Safety Rules
+- Writes that shrink a file by >50% or write empty content are automatically BLOCKED.
+- Blocked shell commands: rm -rf, git push, npm publish, sudo, curl|sh.
+- Always validate BEFORE and AFTER patching.
+- Always read a file before patching it (you need exact strings for find/replace).
+- Use patch_file for modifications, write_file only for new files.
+- Be concise \u2014 let tool results speak.`
+};
+var CAP_FILE_OPS = {
+  name: "file-ops",
+  description: "File read/write/patch operations and best practices for file manipulation.",
+  tools: [OP_READ_FILE, OP_WRITE_FILE, OP_PATCH_FILE, OP_LIST_FILES],
+  prompt: `## File Operations
+- read_file: Read a file and return its content. args: { file }
+- write_file: Write a file. args: { file, content }. Content must be the COMPLETE file.
+- patch_file: Surgical find-and-replace edits. args: { file, patches: [{ find: "old text", replace: "new text" }] }. PREFERRED for modifying existing files.
+- list_files: List files in a directory. args: { directory, pattern? } (pattern is regex)
+
+## Best Practices
+PREFER patch_file over write_file for modifying existing files (surgical edits, no truncation risk).
+Use read_file to understand a file before modifying it.
+Use list_files to discover project structure.
+Writes that shrink a file by >50% or write empty content are automatically BLOCKED.`
+};
+var CAP_SHELL = {
+  name: "shell",
+  description: "Shell command execution for running tests, builds, and inspecting output.",
+  tools: [OP_RUN_SHELL, OP_VALIDATE, OP_TSC_CHECK, OP_RUN_TESTS],
+  prompt: `## Shell Commands
+- run_shell: Execute a shell command and return output. args: { command }
+  Use for: npx vitest, git status, grep, find, etc.
+  Examples: { "command": "npx vitest run --reporter verbose" }, { "command": "npx flow-weaver validate src/workflow.ts --json" }
+  Blocked: rm -rf, git push, npm publish, sudo, curl|sh (safety policy).
+Use run_shell for running tests (npx vitest), validation (flow-weaver validate), and inspecting output.`
+};
+var CAP_TASK_MGMT = {
+  name: "task-mgmt",
+  description: "Create and manage swarm subtasks for parallel execution.",
+  tools: [OP_TASK_CREATE],
+  prompt: `## Task Management
+- task_create: Create swarm subtasks for parallel execution. args: { title, description, complexity, subtasks[] }
+- task_list, task_get, task_update: Query and update existing tasks
+
+Use task_create to decompose complex work into smaller, independent subtasks that other bots can execute in parallel.`
+};
+var CAP_FW_GRAMMAR = {
+  name: "fw-grammar",
+  description: "Flow Weaver annotation syntax, node types, workflows, patterns, and data flow.",
+  prompt: `## Core Mental Model
+
+The code IS the workflow. Flow Weaver workflows are plain TypeScript files with JSDoc annotations above functions. The compiler reads annotations and generates deterministic execution code between @flow-weaver-body-start/end markers. Compiled code is standalone with no runtime dependency on flow-weaver.
+
+Three block types:
+- @flowWeaver nodeType: A reusable function (node) with typed inputs/outputs
+- @flowWeaver workflow: A DAG orchestration that wires node instances together
+- @flowWeaver pattern: A reusable fragment with boundary ports (IN/OUT instead of Start/Exit)
+
+## Node Execution Model
+
+Expression nodes (@expression):
+- No execute/onSuccess/onFailure params. Just inputs and return value.
+- throw = failure path, return = success path
+- Synchronous. Use execSync for shell commands.
+- Preferred for deterministic operations.
+
+Standard nodes:
+- execute: boolean param gates execution
+- Return { onSuccess: boolean, onFailure: boolean, ...outputs }
+- Can be async for I/O operations
+
+Async agent nodes:
+- Use (globalThis as any).__fw_agent_channel__ to pause workflow
+- Call channel.request({ agentId, context, prompt }) which returns a Promise
+- Workflow suspends until agent responds
+- NOT @expression (must be async)
+
+Pass-through pattern:
+- FW auto-connects ports by matching names on adjacent nodes
+- To forward data through intermediate nodes, declare it as both @input and @output with the same name
+- For non-adjacent wiring, use @connect sourceNode.port -> targetNode.port
+
+Data flow:
+- @path A -> B -> C: Linear execution path (sugar for multiple @connect)
+- @autoConnect: Auto-wire all nodes in declaration order
+- @connect: Explicit port-to-port wiring
+- Merge strategies for fan-in: FIRST, LAST, COLLECT, MERGE, CONCAT`
+};
+var CAP_FW_VALIDATE = {
+  name: "fw-validate",
+  description: "Flow Weaver validation error codes and common fix patterns.",
+  prompt: `## Validation Errors
+
+When you encounter validation errors, suggest the specific fix. Common resolutions:
+- UNKNOWN_NODE_TYPE: Ensure the referenced function has @flowWeaver nodeType annotation
+- MISSING_REQUIRED_INPUT: Add a @connect from a source port or make the input optional with [brackets]
+- UNKNOWN_SOURCE_PORT / UNKNOWN_TARGET_PORT: Check port name spelling in @connect
+- CYCLE_DETECTED: Break the cycle; use scoped iteration (@scope, @map) instead of circular dependencies`
+};
+var CAP_FW_GENESIS = {
+  name: "fw-genesis",
+  description: "Flow Weaver genesis protocol for self-evolving workflows.",
+  prompt: `## Genesis Protocol
+
+Genesis is a 17-step self-evolving workflow engine:
+1. Load config 2. Observe project 3. Load task workflow 4. Diff fingerprint
+5. Check stabilize mode 6. Wait for agent 7. Propose evolution 8. Validate proposal
+9. Snapshot for rollback 10. Apply changes 11. Compile and validate
+12. Diff workflow 13. Check approval threshold 14. Wait for approval
+15. Commit or rollback 16. Update history 17. Report summary
+
+When stabilize mode is active, only fix-up operations are allowed.`
+};
+var CAP_FW_CLI = {
+  name: "fw-cli",
+  description: "Flow Weaver CLI command reference for compile, validate, diagram, and other operations.",
+  prompt: `## CLI Commands
+
+Note: compile, validate, modify, diff, diagram, and describe operations are available as direct plan steps (no CLI needed).`
+};
+var CAP_CODE_REVIEW = {
+  name: "code-review",
+  description: "Code review guidelines, quality checklist, and security review patterns.",
+  prompt: `## Code Review
+
+When reviewing code, check for:
+1. Correctness: Does the code do what the task asked?
+2. Security: No hardcoded secrets, no injection vulnerabilities, no exposed APIs
+3. Style: Consistent with project conventions, proper naming, no dead code
+4. Testing: Are there tests? Do they cover edge cases?
+5. Performance: No unnecessary loops, no blocking calls in async code
+
+Report concerns with specific file:line references and suggested fixes.`
+};
+var CAP_WEB = {
+  name: "web",
+  description: "Web fetch capability for fetching URLs and external resources.",
+  tools: ["web_fetch"],
+  prompt: `## Web
+- web_fetch(url): Fetch a URL and return its content. Use for API docs, examples, etc.`
+};
+var CAP_CONTEXT = {
+  name: "context",
+  description: "Project file listings, directory structure, and workspace context.",
+  prompt: `## Project Context
+
+Use list_files to understand the project structure before making changes.
+The context bundle (when available) provides a snapshot of the workspace.`
+};
+var BUILT_IN_CAPABILITIES = [
+  CAP_CORE,
+  CAP_FILE_OPS,
+  CAP_SHELL,
+  CAP_TASK_MGMT,
+  CAP_FW_GRAMMAR,
+  CAP_FW_VALIDATE,
+  CAP_FW_GENESIS,
+  CAP_FW_CLI,
+  CAP_CODE_REVIEW,
+  CAP_WEB,
+  CAP_CONTEXT
+];
+var capabilityMap = new Map(
+  BUILT_IN_CAPABILITIES.map((c) => [c.name, c])
+);
+
+// src/bot/estimate-tokens.ts
+function estimateTokens(text) {
+  if (!text) return 0;
+  const byChars = text.length / 3.5;
+  const byWords = text.split(/\s+/).filter(Boolean).length * 1.33;
+  return Math.ceil((byChars + byWords) / 2);
+}
+
+// src/ui/capability-editor.tsx
+var React = require("react");
+var { useState, useCallback } = React;
+var {
+  Flex,
+  Typography,
+  Input,
+  Button,
+  IconButton,
+  Icon,
+  Field,
+  Chip,
+  Checkbox,
+  Table,
+  CodeBlock,
+  ScrollArea,
+  toast,
+  usePackWorkspace
+} = require("@fw/plugin-ui-kit");
+var AVAILABLE_TOOLS = [...PLAN_OPERATIONS];
+function CapabilityDetail({
+  cap,
+  mode,
+  allNames,
+  onBack,
+  onSubmit
+}) {
+  const [name, setName] = useState(cap?.name ?? "");
+  const [description, setDescription] = useState(cap?.description ?? "");
+  const [prompt, setPrompt] = useState(cap?.prompt ?? "");
+  const [tools, setTools] = useState(cap?.tools ?? []);
+  const readOnly = mode === "view";
+  const isCreate = mode === "create";
+  const handleToggleTool = useCallback((tool) => {
+    setTools(
+      (prev) => prev.includes(tool) ? prev.filter((t) => t !== tool) : [...prev, tool]
+    );
+  }, []);
+  const handleSubmit = useCallback(() => {
+    const trimName = name.trim().toLowerCase().replace(/\s+/g, "-");
+    if (!trimName || !description.trim()) {
+      toast("Name and description are required", { type: "error" });
+      return;
+    }
+    if (isCreate && allNames.includes(trimName)) {
+      toast(`Capability "${trimName}" already exists`, { type: "error" });
+      return;
+    }
+    onSubmit({
+      name: isCreate ? trimName : cap?.name ?? trimName,
+      description: description.trim(),
+      prompt: prompt.trim() || `## ${description.trim()}`,
+      tools: tools.length > 0 ? tools : void 0
+    });
+  }, [name, description, prompt, tools, isCreate, allNames, cap, onSubmit]);
+  const title = isCreate ? "New Capability" : readOnly ? cap?.name ?? "" : `Edit: ${cap?.name ?? ""}`;
+  return React.createElement(
+    Flex,
+    {
+      variant: "column-stretch-start-nowrap-0",
+      style: { width: "100%", height: "100%", overflow: "hidden" }
+    },
+    // Header
+    React.createElement(
+      Flex,
+      {
+        variant: "row-center-space-between-nowrap-8",
+        style: { padding: "8px 16px", flexShrink: 0, borderBottom: "1px solid var(--color-border-default)" }
+      },
+      React.createElement(
+        Flex,
+        { variant: "row-center-start-nowrap-8" },
+        React.createElement(IconButton, {
+          icon: "back",
+          size: "xs",
+          variant: "clear",
+          onClick: onBack,
+          title: "Back to list"
+        }),
+        React.createElement(Typography, { variant: "caption-thick", color: "color-text-high" }, title),
+        readOnly && React.createElement(Chip, {
+          label: "built-in",
+          size: "small",
+          color: "color-status-info"
+        })
+      )
+    ),
+    // Scrollable form
+    React.createElement(
+      ScrollArea,
+      { style: { flex: 1, minHeight: 0 } },
+      React.createElement(
+        Flex,
+        {
+          variant: "column-stretch-start-nowrap-10",
+          style: { padding: "12px 16px" }
+        },
+        // Name
+        React.createElement(
+          Field,
+          { label: "Name" },
+          readOnly ? React.createElement(Typography, {
+            variant: "smallCaption-thick",
+            color: "color-text-high",
+            style: { padding: "4px 0" }
+          }, cap?.name) : React.createElement(Input, {
+            type: "text",
+            size: "small",
+            placeholder: "e.g. api-design",
+            value: name,
+            onChange: (v) => setName(v),
+            disabled: !isCreate,
+            defaultBoxStyle: { flex: 1, minWidth: 0 },
+            inputBoxStyle: { maxWidth: "none" }
+          })
+        ),
+        // Description
+        React.createElement(
+          Field,
+          { label: "Description" },
+          readOnly ? React.createElement(Typography, {
+            variant: "smallCaption-regular",
+            color: "color-text-medium",
+            style: { padding: "4px 0" }
+          }, cap?.description) : React.createElement(Input, {
+            type: "text",
+            size: "small",
+            placeholder: "What this capability provides",
+            value: description,
+            onChange: (v) => setDescription(v),
+            defaultBoxStyle: { flex: 1, minWidth: 0 },
+            inputBoxStyle: { maxWidth: "none" }
+          })
+        ),
+        // Prompt
+        React.createElement(
+          Field,
+          { label: "Prompt", align: "start" },
+          readOnly ? React.createElement(Typography, {
+            variant: "smallCaption-regular",
+            color: "color-text-medium",
+            style: { whiteSpace: "pre-wrap", lineHeight: 1.5 }
+          }, cap?.prompt) : React.createElement(Input, {
+            type: "text",
+            size: "small",
+            multiline: true,
+            placeholder: "Knowledge content (markdown) injected into the system prompt",
+            value: prompt,
+            onChange: (v) => setPrompt(v),
+            defaultBoxStyle: { flex: 1, minWidth: 0 },
+            inputBoxStyle: { maxWidth: "none", minHeight: 160 }
+          })
+        ),
+        // Tools
+        React.createElement(
+          Field,
+          { label: "Tools", align: "start" },
+          React.createElement(Table, {
+            size: "compact",
+            showHeader: false,
+            data: AVAILABLE_TOOLS.map((t) => ({
+              tool: t,
+              active: (readOnly ? cap?.tools ?? [] : tools).includes(t)
+            })),
+            getRowKey: (row) => row.tool,
+            columns: [
+              {
+                key: "check",
+                header: "",
+                width: "28px",
+                render: (_v, row) => React.createElement(
+                  "div",
+                  { style: { height: 20, display: "flex", alignItems: "center" } },
+                  React.createElement(Checkbox, {
+                    checked: row.active,
+                    disabled: readOnly,
+                    onChange: readOnly ? void 0 : () => handleToggleTool(row.tool),
+                    size: "sm"
+                  })
+                )
+              },
+              {
+                key: "tool",
+                header: "Tool",
+                render: (_v, row) => React.createElement(
+                  "div",
+                  { style: { height: 20, display: "flex", alignItems: "center" } },
+                  React.createElement(Typography, {
+                    variant: "smallCaption-regular",
+                    color: row.active ? "color-text-high" : "color-text-subtle"
+                  }, row.tool)
+                )
+              }
+            ]
+          })
+        ),
+        // Token estimate
+        React.createElement(
+          Field,
+          { label: "Est. tokens" },
+          React.createElement(Typography, {
+            variant: "smallCaption-regular",
+            color: "color-text-subtle"
+          }, `~${estimateTokens(readOnly ? cap?.prompt ?? "" : prompt)} tokens (approx.)`)
+        ),
+        // Submit button (not for view mode)
+        !readOnly && React.createElement(
+          Flex,
+          {
+            variant: "row-center-end-nowrap-8",
+            style: { paddingTop: 4 }
+          },
+          React.createElement(Button, {
+            size: "xs",
+            variant: "clear",
+            color: "secondary",
+            onClick: onBack
+          }, "Cancel"),
+          React.createElement(Button, {
+            size: "xs",
+            variant: "fill",
+            color: "primary",
+            onClick: handleSubmit,
+            disabled: readOnly || !isCreate && !description.trim() || isCreate && (!name.trim() || !description.trim())
+          }, isCreate ? "Create" : "Save")
+        )
+      )
+    )
+  );
+}
+function CapabilityList({
+  allCaps,
+  onOpen,
+  onDelete,
+  onCreate,
+  onSaveAll,
+  onClose,
+  hasCustom
+}) {
+  return React.createElement(
+    Flex,
+    {
+      variant: "column-stretch-start-nowrap-0",
+      style: { width: "100%", height: "100%", overflow: "hidden" }
+    },
+    // Header
+    React.createElement(
+      Flex,
+      {
+        variant: "row-center-space-between-nowrap-8",
+        style: { padding: "8px 16px", flexShrink: 0, borderBottom: "1px solid var(--color-border-default)" }
+      },
+      React.createElement(
+        Flex,
+        { variant: "row-center-start-nowrap-8" },
+        onClose && React.createElement(IconButton, {
+          icon: "back",
+          size: "xs",
+          variant: "clear",
+          onClick: onClose,
+          title: "Back"
+        }),
+        React.createElement(Typography, { variant: "caption-thick", color: "color-text-high" }, "Capabilities"),
+        React.createElement(Chip, {
+          label: `${allCaps.length}`,
+          size: "small",
+          color: "color-brand-main"
+        })
+      ),
+      React.createElement(
+        Flex,
+        { variant: "row-center-end-nowrap-6" },
+        onSaveAll && hasCustom && React.createElement(Button, {
+          size: "xs",
+          variant: "outlined",
+          color: "primary",
+          onClick: onSaveAll
+        }, "Save"),
+        React.createElement(Button, {
+          size: "xs",
+          variant: "fill",
+          color: "primary",
+          onClick: onCreate
+        }, "New")
+      )
+    ),
+    // Scrollable list
+    React.createElement(
+      ScrollArea,
+      { style: { flex: 1, minHeight: 0 } },
+      React.createElement(
+        Flex,
+        {
+          variant: "column-stretch-start-nowrap-2",
+          style: { padding: "8px 16px" }
+        },
+        ...allCaps.map(
+          (cap) => React.createElement(
+            Flex,
+            {
+              key: cap.name,
+              variant: "row-center-space-between-nowrap-8",
+              style: {
+                padding: "7px 10px",
+                borderRadius: 6,
+                cursor: "pointer",
+                border: "1px solid var(--color-border-default)",
+                transition: "background-color 0.1s"
+              },
+              onClick: () => onOpen(cap.name),
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              }
+            },
+            // Left: icon + name + description
+            React.createElement(
+              Flex,
+              { variant: "row-center-start-nowrap-8", style: { flex: 1, minWidth: 0 } },
+              React.createElement(Icon, {
+                name: cap.builtIn ? "lock" : "edit",
+                size: 13,
+                color: cap.builtIn ? "color-text-subtle" : "color-brand-main"
+              }),
+              React.createElement(Typography, {
+                variant: "smallCaption-thick",
+                color: "color-text-high",
+                style: { minWidth: 80, flexShrink: 0 }
+              }, cap.name),
+              React.createElement(Typography, {
+                variant: "smallCaption-regular",
+                color: "color-text-subtle",
+                style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+              }, cap.description)
+            ),
+            // Right: chips + actions
+            React.createElement(
+              Flex,
+              { variant: "row-center-end-nowrap-4", style: { flexShrink: 0 } },
+              cap.tools && cap.tools.length > 0 && React.createElement(Chip, {
+                label: `${cap.tools.length} tools`,
+                size: "small",
+                color: "color-status-positive"
+              }),
+              !cap.builtIn && React.createElement(IconButton, {
+                icon: "outlinedDelete",
+                size: "xs",
+                variant: "clear",
+                color: "danger",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDelete(cap.name);
+                },
+                title: "Delete capability"
+              }),
+              React.createElement(Icon, {
+                name: "chevronRight",
+                size: 12,
+                color: "color-text-subtle"
+              })
+            )
+          )
+        )
+      )
+    )
+  );
+}
+function CapabilityEditor({ customCapabilities = [], onSave, onClose }) {
+  const [customs, setCustoms] = useState(customCapabilities);
+  const [screen, setScreen] = useState("list");
+  const allCaps = [
+    ...BUILT_IN_CAPABILITIES.map((c) => ({ ...c, builtIn: true })),
+    ...customs.map((c) => ({ ...c, builtIn: false }))
+  ];
+  const allNames = allCaps.map((c) => c.name);
+  const handleOpen = useCallback((name) => {
+    const cap = allCaps.find((c) => c.name === name);
+    if (!cap) return;
+    setScreen({ mode: cap.builtIn ? "view" : "edit", name });
+  }, [allCaps]);
+  const handleDelete = useCallback((name) => {
+    setCustoms((prev) => prev.filter((c) => c.name !== name));
+    toast(`Capability "${name}" deleted`, { type: "success" });
+  }, []);
+  const handleSubmit = useCallback((cap) => {
+    if (typeof screen === "object" && screen.mode === "edit") {
+      setCustoms(
+        (prev) => prev.map((c) => c.name === cap.name ? cap : c)
+      );
+      toast(`Capability "${cap.name}" updated`, { type: "success" });
+    } else {
+      setCustoms((prev) => [...prev, cap]);
+      toast(`Capability "${cap.name}" created`, { type: "success" });
+    }
+    setScreen("list");
+  }, [screen]);
+  const handleSaveAll = useCallback(() => {
+    onSave?.(customs);
+    toast("Capabilities saved", { type: "success" });
+  }, [customs, onSave]);
+  if (typeof screen === "object") {
+    const cap = screen.name ? allCaps.find((c) => c.name === screen.name) : void 0;
+    return React.createElement(CapabilityDetail, {
+      cap,
+      mode: screen.mode,
+      allNames,
+      onBack: () => setScreen("list"),
+      onSubmit: handleSubmit
+    });
+  }
+  return React.createElement(CapabilityList, {
+    allCaps,
+    onOpen: handleOpen,
+    onDelete: handleDelete,
+    onCreate: () => setScreen({ mode: "create" }),
+    onSaveAll: onSave ? handleSaveAll : void 0,
+    onClose,
+    hasCustom: customs.length > 0
+  });
+}
+var capability_editor_default = CapabilityEditor;
+module.exports = CapabilityEditor;

package/dist/ui/profile-card.js

@@ -138,6 +138,31 @@ function ProfileCard({ profile, activeInstances, onEdit, onDelete }) {
         )
       )
     ),
+    // Knowledge capabilities (from behavior)
+    behavior?.capabilities && behavior.capabilities.length > 0 && React.createElement(
+      Field,
+      { label: "Knowledge", labelWidth: 90, align: "start" },
+      React.createElement(
+        Flex,
+        { variant: "row-center-start-wrap-4" },
+        ...behavior.capabilities.map(
+          (capName) => React.createElement(
+            "span",
+            { key: capName },
+            React.createElement(Chip, { label: capName, size: "small", color: "color-status-info" })
+          )
+        )
+      )
+    ),
+    // Budget (from behavior)
+    behavior?.budget && React.createElement(
+      Field,
+      { label: "Budget", labelWidth: 90, align: "center" },
+      React.createElement(Typography, {
+        variant: "smallCaption-regular",
+        color: "color-text-high"
+      }, `$${behavior.budget.toFixed(2)}/task`)
+    ),
     // Strategy
     React.createElement(
       Field,