@bikdotai/bik-component-library 0.0.829 → 0.0.830-beta.1

package/dist/esm/components/agent-builder/components/ConfigToolPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigToolPanel.js","sources":["../../../../../src/components/agent-builder/components/ConfigToolPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { Switch } from '@src/components/switch';\nimport { Tag } from '@src/components/tag';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tConfigToolConfig,\n\tConfigToolKey,\n\tParamField,\n\tParamsBlob,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\n\n/** Header copy per shared-drawer tool. */\nconst TOOL_COPY: Record<ConfigToolKey, { title: string; subtitle: string }> = {\n\tsend_email: {\n\t\ttitle: 'Handover to email',\n\t\tsubtitle:\n\t\t\t\"Notify someone by email when this agent can't continue. You pick the recipient, the AI drafts the message.\",\n\t},\n\tsend_slack_message: {\n\t\ttitle: 'Send Slack message',\n\t\tsubtitle:\n\t\t\t'Post a message to a Slack channel. You pick the channel, the AI composes the message from the conversation.',\n\t},\n};\n\ninterface ConfigToolPanelProps {\n\t/** Which tool this drawer configures (drives copy + persistence). */\n\ttoolKey: ConfigToolKey;\n\t/**\n\t * The backend template (`list-catalog` → params) for `toolKey`. The form is\n\t * DYNAMIC: exactly these fields render, in this order, each by its\n\t * `component` kind (KeywordInput | MultilineInput | Switch | fallback input).\n\t */\n\ttemplate: ParamsBlob;\n\tonClose: () => void;\n\t/** Persist the filled template. A pending promise shows the Save loader. */\n\tonSave: (config: ConfigToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: ConfigToolConfig;\n\t/** Optional \"Improve with AI\" for multiline fields. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n}\n\ninterface EmailChipsFieldProps {\n\tchips: string[];\n\tonChange: (next: string[]) => void;\n\tplaceholder: string;\n\tnativeID?: string;\n\t/** Optional helper caption shown between the input and the chips. */\n\thint?: React.ReactNode;\n}\n\n/**\n * Email entry field: type an address and press Enter / comma (or blur) to add\n * it. Added emails render as removable chips BELOW the input — not inside it.\n * Backspace on an empty input removes the last chip.\n */\nconst EmailChipsField: React.FC<EmailChipsFieldProps> = ({\n\tchips,\n\tonChange,\n\tplaceholder,\n\tnativeID,\n\thint,\n}) => {\n\tconst [buffer, setBuffer] = useState('');\n\n\tconst commit = () => {\n\t\tconst parts = buffer\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean);\n\t\tif (parts.length) {\n\t\t\tonChange([...chips, ...parts.filter((p) => !chips.includes(p))]);\n\t\t}\n\t\tsetBuffer('');\n\t};\n\n\treturn (\n\t\t<ChipsFieldWrap>\n\t\t\t<EmailInputBox\n\t\t\t\tid={nativeID}\n\t\t\t\ttype=\"text\"\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvalue={buffer}\n\t\t\t\tonChange={(e) => setBuffer(e.target.value)}\n\t\t\t\tonBlur={commit}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter' || e.key === ',') {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tcommit();\n\t\t\t\t\t} else if (\n\t\t\t\t\t\te.key === 'Backspace' &&\n\t\t\t\t\t\tbuffer === '' &&\n\t\t\t\t\t\tchips.length > 0\n\t\t\t\t\t) {\n\t\t\t\t\t\tonChange(chips.slice(0, -1));\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{hint}\n\t\t\t{chips.length > 0 && (\n\t\t\t\t<ChipRow>\n\t\t\t\t\t{chips.map((email, i) => (\n\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\tkey={`${email}-${i}`}\n\t\t\t\t\t\t\ttagText={email}\n\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\tTrailingIcon={CrossIcon}\n\t\t\t\t\t\t\tonTrailingIconClicked={() =>\n\t\t\t\t\t\t\t\tonChange(chips.filter((_, idx) => idx !== i))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</ChipRow>\n\t\t\t)}\n\t\t</ChipsFieldWrap>\n\t);\n};\n\n/** Field values keyed by param key (the editable part of a {@link ParamsBlob}). */\ntype ParamValues = Record<string, string | boolean | number | object>;\n\nconst seedValues = (\n\ttemplate: ParamsBlob,\n\tinitial?: ConfigToolConfig,\n): ParamValues => {\n\tconst values: ParamValues = {};\n\tObject.keys(template).forEach((key) => {\n\t\tvalues[key] = initial?.params[key]?.value ?? template[key].value;\n\t});\n\treturn values;\n};\n\n/** Chips ↔ the string value KeywordInput fields carry (comma-separated). */\nconst toChips = (value: unknown): string[] =>\n\tString(value ?? '')\n\t\t.split(',')\n\t\t.map((s) => s.trim())\n\t\t.filter(Boolean);\n\n/**\n * Shared right-side drawer for the params-driven configurable tools (email /\n * Slack). Fully backend-driven: it renders the template fields by their\n * `component` kind and returns the same blob with values filled in. KeywordInput\n * renders as multi-value email chips only for `send_email`; every other tool\n * gets a plain single-line input. Mount it fresh per open (key it) so `initial`\n * seeds the state. Built on the shared `SideModal` shell.\n */\nexport const ConfigToolPanel: React.FC<ConfigToolPanelProps> = ({\n\ttoolKey,\n\ttemplate,\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n}) => {\n\tconst [values, setValues] = useState<ParamValues>(() =>\n\t\tseedValues(template, initial),\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst fields = Object.values(template);\n\tconst isEmail = toolKey === 'send_email';\n\tconst setValue = (key: string, value: string | boolean | number | object) =>\n\t\tsetValues((prev) => ({ ...prev, [key]: value }));\n\n\tconst canSave = fields.every(\n\t\t(f) => !f.required || String(values[f.key] ?? '').trim() !== '',\n\t);\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst params: ParamsBlob = {};\n\t\tfields.forEach((f) => {\n\t\t\t// Save the FULL descriptor with only `value` changed — the backend\n\t\t\t// infers each field's type from `component` and reads `required`.\n\t\t\tparams[f.key] = { ...f, value: values[f.key] };\n\t\t});\n\t\tconst config: ConfigToolConfig = {\n\t\t\tid: initial?.id ?? `${toolKey}_${Date.now().toString(36)}`,\n\t\t\ttool_key: toolKey,\n\t\t\tparams,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst renderField = (field: ParamField) => {\n\t\tconst testId = `config-tool-${field.key.toLowerCase()}`;\n\t\tswitch (field.component) {\n\t\t\t// Multi-value email chips — only for the email tool. Slack's KeywordInput\n\t\t\t// (channelId) falls through to the plain input below.\n\t\t\tcase 'KeywordInput':\n\t\t\t\tif (!isEmail) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<FieldBlock key={field.key}>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{field.title}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t<EmailChipsField\n\t\t\t\t\t\t\tnativeID={testId}\n\t\t\t\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\t\t\t\tchips={toChips(values[field.key])}\n\t\t\t\t\t\t\tonChange={(chips) => setValue(field.key, chips.join(','))}\n\t\t\t\t\t\t\thint={\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\tPress Enter or comma to add multiple emails\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FieldBlock>\n\t\t\t\t);\n\t\t\tcase 'MultilineInput':\n\t\t\t\treturn (\n\t\t\t\t\t<ToolInstructionsField\n\t\t\t\t\t\tkey={field.key}\n\t\t\t\t\t\tdata-test={testId}\n\t\t\t\t\t\tlabel={field.title}\n\t\t\t\t\t\tvalue={String(values[field.key] ?? '')}\n\t\t\t\t\t\tonChange={(text) => setValue(field.key, text)}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\t\t\tonImprove={onImprove}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase 'Switch':\n\t\t\t\treturn (\n\t\t\t\t\t<SwitchRow key={field.key}>\n\t\t\t\t\t\t<SwitchText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{field.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t{field.hint && (\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{field.hint}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</SwitchText>\n\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\tdata-test={testId}\n\t\t\t\t\t\t\tvalue={Boolean(values[field.key])}\n\t\t\t\t\t\t\tonValueChange={async (next) => setValue(field.key, next)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SwitchRow>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tkey={field.key}\n\t\t\t\tdata-test={testId}\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText={field.title}\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\tvalue={String(values[field.key] ?? '')}\n\t\t\t\tonChangeText={(text) => setValue(field.key, text)}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst copy = TOOL_COPY[toolKey];\n\n\treturn (\n\t\t<SideModal\n\t\t\theader={copy.title}\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText title={copy.title} subtitle={copy.subtitle} />\n\t\t\t}\n\t\t\thideCrossButton={false}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'config-tool-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'config-tool-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t{fields.map(renderField)}\n\t\t</SideModal>\n\t);\n};\n\nconst ChipsFieldWrap = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst EmailInputBox = styled.input`\n\twidth: 100%;\n\tmin-width: 0;\n\tbox-sizing: border-box;\n\theight: 32px;\n\tpadding: 0 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tfont-family: 'Inter', sans-serif;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${COLORS.surface.standard};\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\n\t&:focus {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t}\n`;\n\nconst ChipRow = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 6px;\n`;\n\nconst SwitchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n`;\n\nconst SwitchText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n"],"names":["TOOL_COPY","EmailChipsField","chips","onChange","placeholder","nativeID","hint","buffer","setBuffer","useState","commit","parts","p","ChipsFieldWrap","jsx","EmailInputBox","ChipRow","email","i","Tag","CrossIcon","_","idx","seedValues","template","initial","values","key","toChips","value","s","ConfigToolPanel","toolKey","onClose","onSave","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","setValues","saving","setSaving","fields","isEmail","setValue","prev","canSave","f","handleSave","params","config","result","renderField","field","testId","FieldBlock","TitleSmall","COLORS","BodyCaption","ToolInstructionsField","text","SwitchRow","jsxs","SwitchText","Switch","next","Input","copy","SideModal","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","styled"],"mappings":"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"}

package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { AgentTool, SubAgentDraft } from '../AgentBuilder.model';
+import { AgentTool, ConfigToolKey, ParamsBlob, SubAgentDraft } from '../AgentBuilder.model';
 import { AgentCharLimits } from '../constants/charLimits';
 interface CreateSubAgentPanelProps {
     onClose: () => void;
@@ -8,6 +8,14 @@ interface CreateSubAgentPanelProps {
     availableTools: AgentTool[];
     /** Optional "Improve with AI" for instructions / guardrails. Omit to hide the buttons. */
     onImprove?: (kind: 'instructions' | 'guardrail', text: string) => Promise<string>;
+    /** Optional "Improve with AI" for the Rest API / config-tool drawers. */
+    onImproveToolInstructions?: (text: string) => Promise<string>;
+    /**
+     * Backend templates (email / Slack) that drive the shared config-tool drawer.
+     * Each present key enables its tool action in this drawer; absent → hidden.
+     * Same prop the main builder gets — sub-agents can add the same tools.
+     */
+    configToolTemplates?: Partial<Record<ConfigToolKey, ParamsBlob>>;
     /** Header title — "Create sub-agent" (default) or "Edit sub-agent". */
     title?: string;
     /** Initial values, e.g. when configuring an existing sub-agent. */

package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js

@@ -1,24 +1,28 @@
-import { jsxs as l, Fragment as ct, jsx as o } from "react/jsx-runtime";
-import ut from "../../../assets/icons/cross.svg.js";
-import { useState as i, useMemo as dt, useRef as x, useCallback as c } from "react";
-import mt from "styled-components";
-import { TitleRegular as gt, BodySecondary as pt } from "../../TypographyStyle.js";
-import { addUnique as N } from "../../../utils/arrayUtils.js";
-import { COLORS as u } from "../../../constants/Theme.js";
-import { SubAgentScrim as ft, SubAgentPanel as ht, SubAgentPanelHeader as bt, SubAgentPanelHeaderText as yt, SubAgentCloseButton as St, SubAgentPanelBody as xt, SubAgentPanelFooter as Ct } from "../AgentBuilder.styled.js";
-import { AGENT_CHAR_LIMITS as vt } from "../constants/charLimits.js";
-import { buildAgentMentionItems as It, toolSourceLabel as Tt } from "../utils/mentionSerialization.js";
-import { SOURCE_ICONS as k, renderSourceIcon as U } from "../utils/sourceIcons.js";
-import { MentionEditor as j } from "./MentionEditor.js";
-import { SelectableListSection as At } from "./SelectableListSection.js";
-import { Input as Rt } from "../../input/Input.js";
-import { Button as z } from "../../button/Button.js";
-import { Toaster as _t } from "../../toaster/Toaster.js";
-const q = mt.button`
+import { jsxs as rt, Fragment as Kt, jsx as c } from "react/jsx-runtime";
+import { useState as r, useRef as v, useMemo as wt, useCallback as a } from "react";
+import Nt from "styled-components";
+import { addUnique as it } from "../../../utils/arrayUtils.js";
+import { COLORS as F } from "../../../constants/Theme.js";
+import { AGENT_CHAR_LIMITS as Bt } from "../constants/charLimits.js";
+import { CONFIG_TOOL_SOURCES as lt, ToolSource as p, TOOL_ACTION_SOURCES as Lt, TOOL_SOURCE_LABELS as Dt } from "../constants/tools.js";
+import { buildAgentMentionItems as Gt, buildCustomToolMentionItems as Pt, restApiMentionItem as Ut, configToolMentionItem as zt, restApiToolName as Ht, configToolName as $t, toolSourceLabel as Ft } from "../utils/mentionSerialization.js";
+import { sourceIcon as j, SOURCE_ICONS as W, renderSourceIcon as at } from "../utils/sourceIcons.js";
+import { ConfigToolPanel as jt } from "./ConfigToolPanel.js";
+import { DRAWER_BODY_STYLE as Wt, DRAWER_HEADER_STYLE as Yt, DrawerHeaderText as Xt } from "./DrawerHeaderText.js";
+import { MentionEditor as ct } from "./MentionEditor.js";
+import { RestApiToolPanel as Zt } from "./RestApiToolPanel.js";
+import { SelectableListSection as qt } from "./SelectableListSection.js";
+import { SideModal as Jt } from "../../side-modal/SideModal.js";
+import { Input as Qt } from "../../input/Input.js";
+import { Toaster as Vt } from "../../toaster/Toaster.js";
+const te = 1e3, ut = 1002, dt = (A, f) => {
+  const s = A ?? [];
+  return s.some((u) => u.id === f.id) ? s.map((u) => u.id === f.id ? f : u) : [...s, f];
+}, mt = Nt.button`
 	align-self: flex-start;
-	border: 1px solid ${u.stroke.primary};
-	color: ${u.content.primary};
-	background: ${u.surface.standard};
+	border: 1px solid ${F.stroke.primary};
+	color: ${F.content.primary};
+	background: ${F.surface.standard};
 	border-radius: 8px;
 	padding: 6px 12px;
 	font-size: 13px;
@@ -30,232 +34,327 @@ const q = mt.button`
 		cursor: default;
 		opacity: 0.6;
 	}
-`, zt = ({
-  onClose: C,
-  onSave: W,
-  availableTools: a,
-  onImprove: p,
-  title: D = "Create sub-agent",
-  initial: f,
-  appLabel: w = "Manifest",
-  charLimits: v = vt
+`, Te = ({
+  onClose: A,
+  onSave: f,
+  availableTools: s,
+  onImprove: u,
+  onImproveToolInstructions: Y,
+  configToolTemplates: X,
+  title: Z = "Create sub-agent",
+  initial: g,
+  appLabel: q = "Manifest",
+  charLimits: h = Bt
 }) => {
-  const [I, J] = i(f?.name ?? ""), [d, h] = i(f?.instructions ?? ""), [m, b] = i(f?.guardrail ?? ""), [T, y] = i(f?.tools ?? []), [E, O] = i(!1), [Q, A] = i(0), [V, R] = i(0), [g, $] = i(null), _ = dt(
-    () => It(a, [], w),
-    [a, w]
-  ), S = x({}), P = x("instructions"), X = c((t) => {
-    S.current.instructions = t ?? void 0;
-  }, []), Y = c((t) => {
-    S.current.guardrail = t ?? void 0;
-  }, []), Z = c(() => {
-    P.current = "instructions";
-  }, []), tt = c(() => {
-    P.current = "guardrail";
-  }, []), H = c(
+  const [k, pt] = r(g?.name ?? ""), [T, x] = r(g?.instructions ?? ""), [b, R] = r(g?.guardrail ?? ""), [M, _] = r(g?.tools ?? []), [m, K] = r(
+    g?.configTools ?? []
+  ), [d, w] = r(
+    g?.restApiTools ?? []
+  ), [i, y] = r(null), E = v(0), [J, Q] = r(!1), [ft, N] = r(0), [gt, B] = r(0), [S, V] = r(null), L = wt(
+    () => [
+      ...Gt(s, [], q),
+      ...Pt(m, d)
+    ],
+    [s, q, m, d]
+  ), O = v({}), D = v("instructions"), yt = a((t) => {
+    O.current.instructions = t ?? void 0;
+  }, []), ht = a((t) => {
+    O.current.guardrail = t ?? void 0;
+  }, []), Tt = a(() => {
+    D.current = "instructions";
+  }, []), bt = a(() => {
+    D.current = "guardrail";
+  }, []), tt = a(
     (t, e) => {
-      t === "tool" && y((n) => N(n, e));
+      t === "tool" && _((o) => it(o, e));
     },
     []
-  ), et = c((t) => {
-    (S.current[P.current] ?? S.current.instructions)?.("tool", t);
-  }, []), [B, G] = i(
-    null
-  ), M = x(null), K = x(0), nt = (t) => {
-    const e = a.find((r) => r.tool_id === t), n = `{{tool:${t}}}`, s = (r) => r.split(n).join("");
-    M.current = { instructions: d, guardrail: m, tools: T }, h((r) => s(r)), b((r) => s(r)), y((r) => r.filter((lt) => lt !== t)), A((r) => r + 1), R((r) => r + 1), K.current += 1, G({
-      id: K.current,
-      message: `Tool "${e?.display_name ?? "Tool"}" removed`
+  ), C = a((t, e) => {
+    (O.current[D.current] ?? O.current.instructions)?.("tool", t, e);
+  }, []), G = a((t) => {
+    E.current += 1, y({
+      key: E.current,
+      kind: "restapi",
+      initialRest: t
     });
-  }, ot = () => {
-    const t = M.current;
-    t && (h(t.instructions), b(t.guardrail), y(t.tools), A((e) => e + 1), R((e) => e + 1), M.current = null), G(null);
-  }, L = I.trim().length > 0 && (d.trim().length > 0 || m.trim().length > 0), rt = T.map((t) => {
-    const e = a.find((n) => n.tool_id === t);
+  }, []), P = a(
+    (t, e) => {
+      E.current += 1, y({
+        key: E.current,
+        kind: "config",
+        toolKey: t,
+        initialConfig: e
+      });
+    },
+    []
+  ), St = a(
+    (t) => {
+      const e = lt[t];
+      e ? P(e) : G();
+    },
+    [P, G]
+  ), Ct = a(
+    (t) => {
+      const e = !d.some((o) => o.id === t.id);
+      w((o) => dt(o, t)), e && C(t.id, Ut(t).label), y(null);
+    },
+    [d, C]
+  ), It = a(
+    (t) => {
+      const e = !m.some((o) => o.id === t.id);
+      K((o) => dt(o, t)), e && C(t.id, zt(t).label), y(null);
+    },
+    [m, C]
+  ), [U, z] = r(
+    null
+  ), H = v(null), et = v(0), vt = (t) => {
+    const e = s.find((n) => n.tool_id === t)?.display_name ?? d.find((n) => n.id === t)?.name ?? "Tool", o = `{{tool:${t}}}`, l = (n) => n.split(o).join("");
+    H.current = {
+      instructions: T,
+      guardrail: b,
+      tools: M,
+      configTools: m,
+      restApiTools: d
+    }, x((n) => l(n)), R((n) => l(n)), _((n) => n.filter((I) => I !== t)), K((n) => n.filter((I) => I.id !== t)), w((n) => n.filter((I) => I.id !== t)), N((n) => n + 1), B((n) => n + 1), et.current += 1, z({ id: et.current, message: `Tool "${e}" removed` });
+  }, At = () => {
+    const t = H.current;
+    t && (x(t.instructions), R(t.guardrail), _(t.tools), K(t.configTools), w(t.restApiTools), N((e) => e + 1), B((e) => e + 1), H.current = null), z(null);
+  }, ot = k.trim().length > 0 && (T.trim().length > 0 || b.trim().length > 0), xt = M.map((t) => {
+    const e = s.find((o) => o.tool_id === t);
     return e ? {
       id: t,
       label: e.display_name,
-      icon: k[e.source ?? "manifest"]
+      icon: j(e.source ?? p.Manifest)
     } : null;
-  }).filter((t) => t !== null), st = a.map((t) => ({
+  }).filter((t) => t !== null), Rt = d.map((t) => ({
+    id: t.id,
+    label: Ht(t),
+    icon: W[p.RestApi],
+    onConfigure: () => G(t)
+  })), _t = m.map((t) => ({
+    id: t.id,
+    label: $t(t),
+    icon: W[t.tool_key === "send_slack_message" ? p.Slack : p.EmailHandover],
+    onConfigure: () => P(t.tool_key, t)
+  })), Et = [
+    ...xt,
+    ...Rt,
+    ..._t
+  ], $ = Lt.filter(
+    (t) => {
+      const e = lt[t];
+      return !e || !!X?.[e];
+    }
+  ).map((t) => ({
+    source: t,
+    label: Dt[t],
+    icon: W[t],
+    onSelect: () => St(t)
+  })), nt = i?.kind === "config" && i.toolKey ? X?.[i.toolKey] : void 0, Ot = s.map((t) => ({
     label: t.display_name,
     value: t.tool_id,
-    leadingIcon: U(k[t.source ?? "manifest"]) ?? void 0
-  })), it = (() => {
+    leadingIcon: at(j(t.source ?? p.Manifest)) ?? void 0
+  })), kt = (() => {
     const t = [], e = /* @__PURE__ */ new Map();
-    return a.forEach((n) => {
-      const s = n.source ?? "manifest";
-      e.has(s) || (e.set(s, []), t.push(s)), e.get(s)?.push({
-        label: n.display_name,
-        value: n.tool_id,
-        leadingIcon: U(k[n.source ?? "manifest"]) ?? void 0
+    return s.forEach((o) => {
+      const l = o.source ?? p.Manifest;
+      e.has(l) || (e.set(l, []), t.push(l)), e.get(l)?.push({
+        label: o.display_name,
+        value: o.tool_id,
+        leadingIcon: at(j(o.source ?? p.Manifest)) ?? void 0
       });
-    }), t.map((n) => ({
-      source: n,
-      label: Tt(n),
-      options: e.get(n) ?? []
+    }), t.map((o) => ({
+      source: o,
+      label: Ft(o),
+      options: e.get(o) ?? []
     }));
-  })(), at = async () => {
-    if (!L || E)
+  })(), Mt = async () => {
+    if (!ot || J)
       return;
-    const t = W({
-      name: I.trim(),
-      instructions: d,
-      guardrail: m,
-      tools: T
+    const t = f({
+      name: k.trim(),
+      instructions: T,
+      guardrail: b,
+      tools: M,
+      configTools: m,
+      restApiTools: d
     });
     if (t && typeof t.then == "function") {
-      O(!0);
+      Q(!0);
       try {
         await t;
       } finally {
-        O(!1);
+        Q(!1);
       }
     }
-  }, F = async (t) => {
-    if (!(!p || g)) {
-      $(t);
+  }, st = async (t) => {
+    if (!(!u || S)) {
+      V(t);
       try {
-        const n = await p(t, t === "instructions" ? d : m);
-        t === "instructions" ? (h(n), A((s) => s + 1)) : (b(n), R((s) => s + 1));
+        const o = await u(t, t === "instructions" ? T : b);
+        t === "instructions" ? (x(o), N((l) => l + 1)) : (R(o), B((l) => l + 1));
       } finally {
-        $(null);
+        V(null);
       }
     }
   };
-  return /* @__PURE__ */ l(ct, { children: [
-    /* @__PURE__ */ o(ft, { onClick: C, "data-test": "subagent-scrim" }),
-    /* @__PURE__ */ l(ht, { "data-test": "create-subagent-panel", children: [
-      /* @__PURE__ */ l(bt, { children: [
-        /* @__PURE__ */ l(yt, { children: [
-          /* @__PURE__ */ o(gt, { color: u.content.primary, children: D }),
-          /* @__PURE__ */ o(pt, { color: u.content.secondary, children: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them." })
-        ] }),
-        /* @__PURE__ */ o(St, { onClick: C, "aria-label": "Close", children: /* @__PURE__ */ o(
-          ut,
-          {
-            width: 20,
-            height: 20,
-            color: u.content.secondary
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ l(xt, { children: [
-        /* @__PURE__ */ o(
-          Rt,
-          {
-            "data-test": "subagent-name",
-            labelText: "Agent name",
-            labelTextBold: !0,
-            placeholder: "Enter agent name",
-            value: I,
-            maxCharLimit: v.name,
-            maxCharLimitPosition: "TOP",
-            maxCharStyle: { fontSize: 12, lineHeight: "16px" },
-            onChangeText: J
-          }
-        ),
-        /* @__PURE__ */ o(
-          j,
-          {
-            "data-test": "subagent-instructions",
-            label: "Instructions",
-            value: d,
-            onChange: h,
-            maxLength: v.instructions,
-            placeholder: "Write the steps in plain English. Type @ to reference a tool.",
-            minHeight: "160px",
-            resetKey: `instr-${Q}`,
-            mentionItems: _,
-            tools: a,
-            onMentionSelect: H,
-            onFocus: Z,
-            registerInsert: X,
-            action: p ? /* @__PURE__ */ o(
-              q,
-              {
-                type: "button",
-                "data-test": "subagent-improve-instructions",
-                disabled: g !== null,
-                onClick: () => F("instructions"),
-                children: g === "instructions" ? "Improving…" : "Improve with AI"
-              }
-            ) : void 0
-          }
-        ),
-        /* @__PURE__ */ o(
-          j,
-          {
-            "data-test": "subagent-guardrail",
-            label: "Guardrails",
-            value: m,
-            onChange: b,
-            maxLength: v.guardrail,
-            placeholder: "e.g. Never discuss competitor pricing. Type @ to reference a tool.",
-            minHeight: "160px",
-            resetKey: `guard-${V}`,
-            mentionItems: _,
-            tools: a,
-            onMentionSelect: H,
-            onFocus: tt,
-            registerInsert: Y,
-            action: p ? /* @__PURE__ */ o(
-              q,
-              {
-                type: "button",
-                "data-test": "subagent-improve-guardrail",
-                disabled: g !== null,
-                onClick: () => F("guardrail"),
-                children: g === "guardrail" ? "Improving…" : "Improve with AI"
-              }
-            ) : void 0
-          }
-        ),
-        /* @__PURE__ */ o(
-          At,
-          {
-            title: "Tools this agent can use",
-            dataTestPrefix: "subagent-tools",
-            items: rt,
-            addableOptions: st,
-            sourceGroups: it,
-            mentionItems: _,
-            emptyText: "No tools added yet.",
-            onAdd: (t) => {
-              et(t), y((e) => N(e, t));
-            },
-            onRemove: nt
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(Ct, { children: [
-        /* @__PURE__ */ o(
-          z,
+  return /* @__PURE__ */ rt(Kt, { children: [
+    /* @__PURE__ */ rt(
+      Jt,
+      {
+        header: Z,
+        closeOnEscapeKey: !1,
+        zIndex: te,
+        headerCustomComponent: /* @__PURE__ */ c(
+          Xt,
           {
-            "data-test": "subagent-save",
-            buttonType: "primary",
-            size: "small",
-            buttonText: "Save",
-            disabled: !L,
-            isLoading: E,
-            onClick: at
+            title: Z,
+            subtitle: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."
           }
         ),
-        /* @__PURE__ */ o(
-          z,
-          {
-            "data-test": "subagent-cancel",
-            buttonType: "tertiaryGray",
-            size: "small",
-            buttonText: "Cancel",
-            onClick: C
-          }
-        )
-      ] })
-    ] }),
-    B && /* @__PURE__ */ o(
-      _t,
+        width: "421px",
+        headerStyle: Yt,
+        bodyStyle: Wt,
+        onClose: A,
+        saveButtonProps: {
+          "data-test": "subagent-save",
+          buttonText: "Save",
+          buttonType: "primary",
+          size: "small",
+          disabled: !ot,
+          isLoading: J,
+          onClick: Mt
+        },
+        cancelButtonProps: {
+          "data-test": "subagent-cancel",
+          buttonText: "Cancel",
+          buttonType: "tertiaryGray",
+          size: "small",
+          onClick: A
+        },
+        children: [
+          /* @__PURE__ */ c(
+            Qt,
+            {
+              "data-test": "subagent-name",
+              labelText: "Agent name",
+              labelTextBold: !0,
+              placeholder: "Enter agent name",
+              value: k,
+              maxCharLimit: h.name,
+              maxCharLimitPosition: "TOP",
+              maxCharStyle: { fontSize: 12, lineHeight: "16px" },
+              onChangeText: pt
+            }
+          ),
+          /* @__PURE__ */ c(
+            ct,
+            {
+              "data-test": "subagent-instructions",
+              label: "Instructions",
+              value: T,
+              onChange: x,
+              maxLength: h.instructions,
+              placeholder: "Write the steps in plain English. Type @ to reference a tool.",
+              minHeight: "160px",
+              resetKey: `instr-${ft}`,
+              mentionItems: L,
+              tools: s,
+              toolActions: $,
+              onMentionSelect: tt,
+              onFocus: Tt,
+              registerInsert: yt,
+              action: u ? /* @__PURE__ */ c(
+                mt,
+                {
+                  type: "button",
+                  "data-test": "subagent-improve-instructions",
+                  disabled: S !== null,
+                  onClick: () => st("instructions"),
+                  children: S === "instructions" ? "Improving…" : "Improve with AI"
+                }
+              ) : void 0
+            }
+          ),
+          /* @__PURE__ */ c(
+            ct,
+            {
+              "data-test": "subagent-guardrail",
+              label: "Guardrails",
+              value: b,
+              onChange: R,
+              maxLength: h.guardrail,
+              placeholder: "e.g. Never discuss competitor pricing. Type @ to reference a tool.",
+              minHeight: "160px",
+              resetKey: `guard-${gt}`,
+              mentionItems: L,
+              tools: s,
+              toolActions: $,
+              onMentionSelect: tt,
+              onFocus: bt,
+              registerInsert: ht,
+              action: u ? /* @__PURE__ */ c(
+                mt,
+                {
+                  type: "button",
+                  "data-test": "subagent-improve-guardrail",
+                  disabled: S !== null,
+                  onClick: () => st("guardrail"),
+                  children: S === "guardrail" ? "Improving…" : "Improve with AI"
+                }
+              ) : void 0
+            }
+          ),
+          /* @__PURE__ */ c(
+            qt,
+            {
+              title: "Tools this agent can use",
+              dataTestPrefix: "subagent-tools",
+              items: Et,
+              addableOptions: Ot,
+              sourceGroups: kt,
+              mentionItems: L,
+              actionSources: $,
+              emptyText: "No tools added yet.",
+              onAdd: (t) => {
+                C(t), _((e) => it(e, t));
+              },
+              onRemove: vt
+            }
+          )
+        ]
+      }
+    ),
+    i?.kind === "restapi" && /* @__PURE__ */ c(
+      Zt,
+      {
+        initial: i.initialRest,
+        charLimits: h,
+        onImprove: Y,
+        onClose: () => y(null),
+        onSave: Ct,
+        zIndex: ut
+      },
+      i.key
+    ),
+    i?.kind === "config" && i.toolKey && nt && /* @__PURE__ */ c(
+      jt,
+      {
+        toolKey: i.toolKey,
+        template: nt,
+        initial: i.initialConfig,
+        charLimits: h,
+        onImprove: Y,
+        onClose: () => y(null),
+        onSave: It,
+        zIndex: ut
+      },
+      i.key
+    ),
+    U && /* @__PURE__ */ c(
+      Vt,
       {
-        text: B.message,
+        text: U.message,
         type: "info",
         position: "top-right",
         autoClose: 5e3,
@@ -263,15 +362,15 @@ const q = mt.button`
         buttonProps: {
           buttonText: "Undo",
           showButton: !0,
-          onButtonClick: () => (ot(), {})
+          onButtonClick: () => (At(), {})
         },
-        onCloseToast: () => G(null)
+        onCloseToast: () => z(null)
       },
-      B.id
+      U.id
     )
   ] });
 };
 export {
-  zt as CreateSubAgentPanel
+  Te as CreateSubAgentPanel
 };
 //# sourceMappingURL=CreateSubAgentPanel.js.map