@bikdotai/bik-component-library 0.0.821 → 0.0.822-beta.1

package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport { buildAgentMentionItems } from '../utils/mentionSerialization';\nimport { SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport { SelectableItem, SelectableListSection } from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => (prev.includes(id) ? prev : [...prev, id]));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\tconst token = tool ? `{{tool:${tool.function_key}}}` : null;\n\t\tconst strip = (text: string) => (token ? text.split(token).join('') : text);\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => {\n\t\tconst ic = SOURCE_ICONS[t.source ?? 'manifest'];\n\t\treturn {\n\t\t\tlabel: t.display_name,\n\t\t\tvalue: t.tool_id,\n\t\t\tleadingIcon: ic\n\t\t\t\t? React.createElement(ic.Icon, { width: ic.w, height: ic.h })\n\t\t\t\t: undefined,\n\t\t};\n\t});\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\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 handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={AGENT_CHAR_LIMITS.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => (prev.includes(id) ? prev : [...prev, id]));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","ic","React","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","AGENT_CHAR_LIMITS","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"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"}
+{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { buildAgentMentionItems } from '../utils/mentionSerialization';\nimport { renderSourceIcon, SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport { SelectableItem, SelectableListSection } from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\tconst token = tool ? `{{tool:${tool.function_key}}}` : null;\n\t\tconst strip = (text: string) => (token ? text.split(token).join('') : text);\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t}));\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\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 handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","charLimits","AGENT_CHAR_LIMITS","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","renderSourceIcon","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"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"}

package/dist/cjs/components/agent-builder/components/MentionPicker.js

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),N=require("../../../assets/icons/chevronRight.svg.js"),z=require("../../../assets/icons/searchIcon.svg.js"),U=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),l=require("react"),F=require("styled-components"),_=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),$=require("../utils/mentionSerialization.js"),q=require("../utils/sourceIcons.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},M=P(l),d=P(F),G=[{key:"tool",label:"Tools"},{key:"subagent",label:"Sub-agent"}],g=n=>n.meta,R=n=>g(n)?.plainLabel??n.label,J="__bik_create_subagent__",Q=({items:n,onSelect:O,registerKeyHandler:x,onClose:I,onCreateSubAgent:p})=>{const[T,S]=l.useState(null),[c,v]=l.useState(null),[b,f]=l.useState(0),[k,L]=l.useState(""),h=l.useMemo(()=>n.filter(t=>g(t)?.kind==="tool"),[n]),y=l.useMemo(()=>n.filter(t=>g(t)?.kind==="subagent"),[n]),j=l.useMemo(()=>{const t=[];return h.forEach(e=>{const u=g(e)?.source??"other";t.includes(u)||t.push(u)}),t},[h]),m=l.useMemo(()=>G.filter(t=>t.key==="tool"?h.length>0:y.length>0||!!p),[h.length,y.length,p]),C=m.length===1?m[0].key:null,i=T??C,s=i?i==="subagent"?C?null:{title:"Sub-agent",onBack:()=>S(null)}:c?{title:$.toolSourceLabel(c),onBack:()=>v(null),icon:q.SOURCE_ICONS[c]}:C?null:{title:"Tools",onBack:()=>S(null)}:null,a=l.useMemo(()=>{if(!i)return m.map(e=>({id:e.key,label:e.label,drillsIn:!0,onActivate:()=>{S(e.key),v(null)}}));if(i==="subagent"){const e=y.map(u=>({id:String(u.id),label:R(u),drillsIn:!1,onActivate:()=>O(u)}));return p&&e.push({id:J,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{I?.(),p()}}),e}if(!c)return j.map(e=>({id:e,label:$.toolSourceLabel(e),drillsIn:!0,icon:q.SOURCE_ICONS[e],onActivate:()=>v(e)}));const t=k.trim().toLowerCase();return h.filter(e=>(g(e)?.source??"other")===c).filter(e=>!t||R(e).toLowerCase().includes(t)).map(e=>({id:String(e.id),label:R(e),drillsIn:!1,onActivate:()=>O(e)}))},[i,m,c,k,h,y,j,O,I,p]);l.useEffect(()=>f(0),[i,c,k,n]),l.useEffect(()=>L(""),[i,c]);const E=l.useRef({rows:a,activeIndex:b,header:s});E.current={rows:a,activeIndex:b,header:s},l.useEffect(()=>{if(x)return x(t=>{const{rows:e,activeIndex:u,header:A}=E.current;switch(t.key){case"ArrowDown":return e.length&&f(w=>(w+1)%e.length),!0;case"ArrowUp":return e.length&&f(w=>(w+e.length-1)%e.length),!0;case"ArrowRight":case"Enter":return e[u]?.onActivate(),!0;case"ArrowLeft":return A?(A.onBack(),!0):!1;default:return!1}}),()=>x(null)},[x]);const B=i?a.length&&!a[0].drillsIn?"items":"sources":"categories",D=i==="tool"&&!!c;return o.jsxs(V,{className:`bik-mention-picker bik-mention-picker--${B}`,children:[s&&o.jsxs(H,{type:"button",onClick:s.onBack,style:{background:r.COLORS.surface.subdued},children:[s.icon?M.default.createElement(s.icon.Icon,{width:s.icon.w,height:s.icon.h}):o.jsx(U.default,{width:20,height:20,color:r.COLORS.content.primary}),o.jsxs(_.TitleSmall,{children:[" ",s.title]})]}),D&&o.jsxs(W,{children:[o.jsx(z.default,{width:20,height:20,color:r.COLORS.content.placeholder}),o.jsx(X,{autoFocus:!0,value:k,placeholder:"Search","data-test":"mention-picker-search",onChange:t=>L(t.target.value),onKeyDown:t=>{a.length&&(t.key==="ArrowDown"?(t.preventDefault(),f(e=>(e+1)%a.length)):t.key==="ArrowUp"?(t.preventDefault(),f(e=>(e+a.length-1)%a.length)):t.key==="Enter"&&(t.preventDefault(),a[b]?.onActivate()))}})]}),a.length===0?o.jsx(ee,{children:i==="subagent"?"No sub-agents available":"No tools available"}):a.map((t,e)=>o.jsx(Y,{type:"button",$active:e===b,onMouseEnter:()=>f(e),onClick:t.onActivate,children:t.isCreate?o.jsx(K,{children:t.label}):o.jsxs(o.Fragment,{children:[o.jsxs(Z,{children:[t.icon&&M.default.createElement(t.icon.Icon,{width:t.icon.w,height:t.icon.h}),o.jsx(_.BodySecondary,{color:r.COLORS.content.primary,children:t.label})]}),t.drillsIn&&o.jsx(N.default,{width:12,height:12})]})},t.id))]})},V=d.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),D=require("../../../assets/icons/chevronRight.svg.js"),N=require("../../../assets/icons/searchIcon.svg.js"),z=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),l=require("react"),U=require("styled-components"),_=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),q=require("../utils/mentionSerialization.js"),S=require("../utils/sourceIcons.js"),F=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},u=F(U),G=[{key:"tool",label:"Tools"},{key:"subagent",label:"Sub-agent"}],g=n=>n.meta,I=n=>g(n)?.plainLabel??n.label,J="__bik_create_subagent__",Q=({items:n,onSelect:O,registerKeyHandler:x,onClose:L,onCreateSubAgent:h,initialSource:M})=>{const[P,v]=l.useState(null),[s,C]=l.useState(M??null),[b,p]=l.useState(0),[k,j]=l.useState(""),f=l.useMemo(()=>n.filter(t=>g(t)?.kind==="tool"),[n]),y=l.useMemo(()=>n.filter(t=>g(t)?.kind==="subagent"),[n]),A=l.useMemo(()=>{const t=[];return f.forEach(e=>{const c=g(e)?.source??"other";t.includes(c)||t.push(c)}),t},[f]),m=l.useMemo(()=>G.filter(t=>t.key==="tool"?f.length>0:y.length>0||!!h),[f.length,y.length,h]),w=m.length===1?m[0].key:null,i=P??w,d=i?i==="subagent"?w?null:{title:"Sub-agent",onBack:()=>v(null)}:s?{title:q.toolSourceLabel(s),onBack:()=>C(null),icon:S.SOURCE_ICONS[s]}:w?null:{title:"Tools",onBack:()=>v(null)}:null,a=l.useMemo(()=>{if(!i)return m.map(e=>({id:e.key,label:e.label,drillsIn:!0,onActivate:()=>{v(e.key),C(null)}}));if(i==="subagent"){const e=y.map(c=>({id:String(c.id),label:I(c),drillsIn:!1,onActivate:()=>O(c)}));return h&&e.push({id:J,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{L?.(),h()}}),e}if(!s)return A.map(e=>({id:e,label:q.toolSourceLabel(e),drillsIn:!0,icon:S.SOURCE_ICONS[e],onActivate:()=>C(e)}));const t=k.trim().toLowerCase();return f.filter(e=>(g(e)?.source??"other")===s).filter(e=>!t||I(e).toLowerCase().includes(t)).map(e=>({id:String(e.id),label:I(e),drillsIn:!1,onActivate:()=>O(e)}))},[i,m,s,k,f,y,A,O,L,h]);l.useEffect(()=>p(0),[i,s,k,n]),l.useEffect(()=>j(""),[i,s]);const E=l.useRef({rows:a,activeIndex:b,header:d});E.current={rows:a,activeIndex:b,header:d},l.useEffect(()=>{if(x)return x(t=>{const{rows:e,activeIndex:c,header:$}=E.current;switch(t.key){case"ArrowDown":return e.length&&p(R=>(R+1)%e.length),!0;case"ArrowUp":return e.length&&p(R=>(R+e.length-1)%e.length),!0;case"ArrowRight":case"Enter":return e[c]?.onActivate(),!0;case"ArrowLeft":return $?($.onBack(),!0):!1;default:return!1}}),()=>x(null)},[x]);const T=i?a.length&&!a[0].drillsIn?"items":"sources":"categories",B=i==="tool"&&!!s;return r.jsxs(V,{className:`bik-mention-picker bik-mention-picker--${T}`,children:[d&&r.jsxs(H,{type:"button",onClick:d.onBack,style:{background:o.COLORS.surface.subdued},children:[d.icon?S.renderSourceIcon(d.icon):r.jsx(z.default,{width:20,height:20,color:o.COLORS.content.primary}),r.jsxs(_.TitleSmall,{children:[" ",d.title]})]}),B&&r.jsxs(W,{children:[r.jsx(N.default,{width:20,height:20,color:o.COLORS.content.placeholder}),r.jsx(X,{autoFocus:!0,value:k,placeholder:"Search","data-test":"mention-picker-search",onChange:t=>j(t.target.value),onKeyDown:t=>{a.length&&(t.key==="ArrowDown"?(t.preventDefault(),p(e=>(e+1)%a.length)):t.key==="ArrowUp"?(t.preventDefault(),p(e=>(e+a.length-1)%a.length)):t.key==="Enter"&&(t.preventDefault(),a[b]?.onActivate()))}})]}),a.length===0?r.jsx(ee,{children:i==="subagent"?"No sub-agents available":"No tools available"}):a.map((t,e)=>r.jsx(Y,{type:"button",$active:e===b,onMouseEnter:()=>p(e),onClick:t.onActivate,children:t.isCreate?r.jsx(K,{children:t.label}):r.jsxs(r.Fragment,{children:[r.jsxs(Z,{children:[S.renderSourceIcon(t.icon),r.jsx(_.BodySecondary,{color:o.COLORS.content.primary,children:t.label})]}),t.drillsIn&&r.jsx(D.default,{width:12,height:12})]})},t.id))]})},V=u.default.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
 	max-height: 280px;
 	overflow-y: auto;
-	background: ${r.COLORS.surface.standard};
-	border: 1px solid ${r.COLORS.stroke.primary};
+	background: ${o.COLORS.surface.standard};
+	border: 1px solid ${o.COLORS.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`,W=d.default.div`
+`,W=u.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
-	border-bottom: 1px solid ${r.COLORS.stroke.primary};
-`,X=d.default.input`
+	border-bottom: 1px solid ${o.COLORS.stroke.primary};
+`,X=u.default.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -22,12 +22,12 @@
 	background: transparent;
 	font-family: Inter;
 	font-size: 14px;
-	color: ${r.COLORS.content.primary};
+	color: ${o.COLORS.content.primary};
 
 	&::placeholder {
-		color: ${r.COLORS.content.placeholder};
+		color: ${o.COLORS.content.placeholder};
 	}
-`,Y=d.default.button`
+`,Y=u.default.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -36,32 +36,32 @@
 	padding: 8px 10px;
 	height: 48px;
 	border: none;
-	border-bottom: 1px solid ${r.COLORS.stroke.primary};
-	background: ${n=>n.$active?r.COLORS.surface.subdued:"transparent"};
+	border-bottom: 1px solid ${o.COLORS.stroke.primary};
+	background: ${n=>n.$active?o.COLORS.surface.subdued:"transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${r.COLORS.surface.subdued};
+		background: ${o.COLORS.surface.subdued};
 	}
-`,Z=d.default.div`
+`,Z=u.default.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`,K=d.default.div`
+`,K=u.default.div`
 	width: 100%;
 	text-align: center;
-	color: ${r.COLORS.content.brand};
+	color: ${o.COLORS.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`,H=d.default.button`
+`,H=u.default.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${r.COLORS.stroke.primary};
+	border-bottom: 1px solid ${o.COLORS.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -69,10 +69,10 @@
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`,ee=d.default.div`
+`,ee=u.default.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${r.COLORS.content.secondary};
+	color: ${o.COLORS.content.secondary};
 `;exports.MentionPicker=Q;
 //# sourceMappingURL=MentionPicker.js.map

package/dist/cjs/components/agent-builder/components/MentionPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { SOURCE_ICONS, SourceIcon } from '../utils/sourceIcons';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\t/** Leading brand glyph (source rows only). */\n\ticon?: SourceIcon;\n\t/** Brand-coloured \"Create new\" action row (not a selectable item). */\n\tisCreate?: boolean;\n\tonActivate: () => void;\n};\n\n/** Sentinel id for the sub-agent \"Create new\" row. */\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/** Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). */\n\tonCreateSubAgent?: () => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool'\n\t\t\t\t\t? tools.length > 0\n\t\t\t\t\t: subAgents.length > 0 || !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view, and whether we can go back a level.\n\t// With a sole category there is no root to go back to (no category header).\n\t// In a source detail view the leading glyph is the source icon (per design),\n\t// otherwise it's a back chevron.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack: () => void;\n\t\ticon?: SourceIcon;\n\t} | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? soleCategory\n\t\t\t? null\n\t\t\t: { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: SOURCE_ICONS[source],\n\t\t  }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst leaves: PickerRowModel[] = subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\ticon: SOURCE_ICONS[s],\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q || rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify).\n\tconst showSearch = activeCategory === 'tool' && !!source;\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t{header.icon ? (\n\t\t\t\t\t\tReact.createElement(header.icon.Icon, {\n\t\t\t\t\t\t\twidth: header.icon.w,\n\t\t\t\t\t\t\theight: header.icon.h,\n\t\t\t\t\t\t})\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\trows[activeIndex]?.onActivate();\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</PickerSearchRow>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t{row.icon &&\n\t\t\t\t\t\t\t\t\t\tReact.createElement(row.icon.Icon, {\n\t\t\t\t\t\t\t\t\t\t\twidth: row.icon.w,\n\t\t\t\t\t\t\t\t\t\t\theight: row.icon.h,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","SOURCE_ICONS","rows","leaves","q","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","React","jsx","SvgArrowLeft","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","e","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","ChevronRight","styled"],"mappings":"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"}
+{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\t/** Leading brand glyph (source rows only). */\n\ticon?: SourceIcon;\n\t/** Brand-coloured \"Create new\" action row (not a selectable item). */\n\tisCreate?: boolean;\n\tonActivate: () => void;\n};\n\n/** Sentinel id for the sub-agent \"Create new\" row. */\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/** Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Open already drilled into this tool source (e.g. `'shopify'`) — its tool list\n\t * is shown immediately. */\n\tinitialSource?: string;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n\tinitialSource,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(initialSource ?? null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool'\n\t\t\t\t\t? tools.length > 0\n\t\t\t\t\t: subAgents.length > 0 || !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view, and whether we can go back a level.\n\t// With a sole category there is no root to go back to (no category header).\n\t// In a source detail view the leading glyph is the source icon (per design),\n\t// otherwise it's a back chevron.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack: () => void;\n\t\ticon?: SourceIcon;\n\t} | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? soleCategory\n\t\t\t? null\n\t\t\t: { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: SOURCE_ICONS[source],\n\t\t  }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst leaves: PickerRowModel[] = subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\ticon: SOURCE_ICONS[s],\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q || rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify).\n\tconst showSearch = activeCategory === 'tool' && !!source;\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t{header.icon ? (\n\t\t\t\t\t\trenderSourceIcon(header.icon)\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\trows[activeIndex]?.onActivate();\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</PickerSearchRow>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t{renderSourceIcon(row.icon)}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","SOURCE_ICONS","rows","leaves","q","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","renderSourceIcon","jsx","SvgArrowLeft","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","e","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","ChevronRight","styled"],"mappings":"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"}

package/dist/cjs/components/agent-builder/components/SelectableListSection.js

@@ -1,2 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("../../../assets/icons/delete.svg.js"),D=require("../../../assets/icons/edit.svg.js"),f=require("../../../assets/icons/plus.svg.js"),g=require("react"),a=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../AgentBuilder.styled.js"),z=require("../utils/sourceIcons.js"),A=require("../../dropdown/Dropdown.js"),F=require("../../button/Button.js"),H=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},L=H(g),B="__bik_create_new__",M=({title:l,helper:C,items:s,addableOptions:u,onAdd:x,onRemove:_,dataTestPrefix:c,emptyText:p,createOption:t,onConfigure:y,sourceGroups:h})=>{const[R,S]=g.useState(!1),[q,j]=g.useState(null),w=!!h&&h.length>0,b=h?.find(e=>e.source===q),v=w?s.length>0:u.length>0||!!t&&s.length>0,O=s.length===0&&!!t&&!w,E=w&&s.length===0,I=()=>{if(w){j(null),S(e=>!e);return}if(u.length===0&&t){t.onSelect();return}S(e=>!e)},k=()=>s.map(e=>n.jsxs(o.SelectableRow,{"data-test":`${c}-row-${e.id}`,children:[e.icon&&L.default.createElement(e.icon.Icon,{width:e.icon.w,height:e.icon.h}),n.jsx(o.RowText,{children:n.jsx(a.BodySecondary,{numberOfLines:1,color:r.COLORS.content.primary,children:e.label})}),n.jsxs(o.RowActions,{children:[y&&n.jsx(o.RowMenuButton,{"data-test":`${c}-edit-${e.id}`,"aria-label":`Edit ${e.label}`,onClick:()=>y(e.id),children:n.jsx(D.default,{width:16,height:16,color:r.COLORS.content.secondary})}),y&&n.jsx(o.RowActionDivider,{"aria-hidden":!0}),n.jsx(o.RowMenuButton,{"data-test":`${c}-delete-${e.id}`,"aria-label":`Delete ${e.label}`,onClick:()=>_(e.id),children:n.jsx(m.default,{width:16,height:16,color:r.COLORS.content.secondary})})]})]},e.id)),$=t?[...u,{label:t.label,value:B,searchKey:t.label,customComponent:n.jsx("div",{style:{width:"100%",textAlign:"center",color:r.COLORS.content.brand,fontFamily:"Inter",fontSize:14,fontWeight:600},children:t.label})}]:u;return n.jsxs(o.SideSection,{children:[n.jsxs(o.SideSectionHeader,{children:[n.jsx(a.TitleSmall,{color:r.COLORS.content.primary,children:l}),v&&n.jsx(o.AddIconButton,{"data-test":`${c}-add`,onClick:I,"aria-label":`Add ${l}`,children:n.jsx(f.default,{width:20,height:20,color:r.COLORS.content.brand})})]}),C&&n.jsx(a.BodyCaption,{color:r.COLORS.content.secondary,children:C}),E?n.jsxs(n.Fragment,{children:[n.jsx(o.SourceButtonRow,{"data-test":`${c}-sources`,children:h?.map(e=>{const d=z.SOURCE_ICONS[e.source];return n.jsxs(o.SourceButton,{type:"button","data-test":`${c}-source-${e.source}`,onClick:()=>j(e.source),children:[d&&L.default.createElement(d.Icon,{width:d.w-4,height:d.h-4}),n.jsx(a.BodySecondary,{color:r.COLORS.content.primary,children:e.label})]},e.source)})}),b&&n.jsx(A.Dropdown,{"data-test":`${c}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Search ${b.label} tools`,options:b.options,onSelect:e=>{const i=(Array.isArray(e)?e[0]:e)?.value;j(null),S(!1),i&&x(i)}})]}):n.jsxs(n.Fragment,{children:[R&&$.length>0&&n.jsx(A.Dropdown,{"data-test":`${c}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Select ${l.toLowerCase()}`,options:$,onSelect:e=>{const i=(Array.isArray(e)?e[0]:e)?.value;S(!1),i&&(i===B?t?.onSelect():x(i))}}),s.length===0&&!R?n.jsxs(n.Fragment,{children:[n.jsx(a.BodyCaption,{color:r.COLORS.content.placeholder,children:p}),O&&t&&n.jsx(F.Button,{"data-test":`${c}-create`,buttonType:"secondary",size:"small",matchParentWidth:!0,LeadingIcon:f.default,buttonText:t.label,onClick:t.onSelect})]}):k()]})]})};exports.SelectableListSection=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),K=require("../../../assets/icons/delete.svg.js"),U=require("../../../assets/icons/edit.svg.js"),B=require("../../../assets/icons/plus.svg.js"),h=require("react"),J=require("styled-components"),S=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),s=require("../AgentBuilder.styled.js"),R=require("../utils/sourceIcons.js"),P=require("./MentionPicker.js"),A=require("../../dropdown/Dropdown.js"),E=require("../../dropdown/utils.js"),Q=require("../../button/Button.js"),X=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},$=X(J),D="__bik_create_new__",Y=({title:l,helper:k,items:u,addableOptions:f,onAdd:j,onRemove:I,dataTestPrefix:r,emptyText:M,createOption:t,onConfigure:x,sourceGroups:p,mentionItems:L})=>{const[a,c]=h.useState(!1),[z,b]=h.useState(null),w=!!p&&p.length>0,v=p?.find(e=>e.source===z),o=L!==void 0,C=h.useRef(null),[y,_]=h.useState(null);h.useEffect(()=>{if(!o||!a)return;const e=g=>{C.current?.contains(g.target)||c(!1)},i=g=>{g.key==="Escape"&&c(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",i),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",i)}},[o,a]);const W=w?u.length>0:o||f.length>0||!!t&&u.length>0,F=u.length===0&&!!t&&!w&&!o,H=w&&u.length===0,N=()=>{if(o){_(null),c(e=>!e);return}if(w){b(null),c(e=>!e);return}if(f.length===0&&t){t.onSelect();return}c(e=>!e)},V=()=>u.map(e=>n.jsxs(s.SelectableRow,{"data-test":`${r}-row-${e.id}`,children:[R.renderSourceIcon(e.icon),n.jsx(s.RowText,{children:n.jsx(S.BodySecondary,{numberOfLines:1,color:d.COLORS.content.primary,children:e.label})}),n.jsxs(s.RowActions,{children:[x&&n.jsx(s.RowMenuButton,{"data-test":`${r}-edit-${e.id}`,"aria-label":`Edit ${e.label}`,onClick:()=>x(e.id),children:n.jsx(U.default,{width:16,height:16,color:d.COLORS.content.secondary})}),x&&n.jsx(s.RowActionDivider,{"aria-hidden":!0}),n.jsx(s.RowMenuButton,{"data-test":`${r}-delete-${e.id}`,"aria-label":`Delete ${e.label}`,onClick:()=>I(e.id),children:n.jsx(K.default,{width:16,height:16,color:d.COLORS.content.secondary})})]})]},e.id)),m=t?[...f,{label:t.label,value:D,searchKey:t.label,customComponent:n.jsx("div",{style:{width:"100%",textAlign:"center",color:d.COLORS.content.brand,fontFamily:"Inter",fontSize:14,fontWeight:600},children:t.label})}]:f,q=o?n.jsx(P.MentionPicker,{items:L??[],query:"",activeIndex:0,initialSource:y??void 0,onSelect:e=>{c(!1),j(String(e.id))},onClose:()=>c(!1),onCreateSubAgent:t?()=>{c(!1),t.onSelect()}:void 0},y??"__root__"):null;return n.jsxs(s.SideSection,{children:[n.jsxs(s.SideSectionHeader,{children:[n.jsx(S.TitleSmall,{color:d.COLORS.content.primary,children:l}),W&&n.jsxs(Z,{ref:C,children:[n.jsx(s.AddIconButton,{"data-test":`${r}-add`,onClick:N,"aria-label":`Add ${l}`,children:n.jsx(B.default,{width:20,height:20,color:d.COLORS.content.brand})}),o&&a&&y===null&&n.jsx(O,{"data-test":`${r}-picker`,children:q})]})]}),k&&n.jsx(S.BodyCaption,{color:d.COLORS.content.secondary,children:k}),H?n.jsxs(G,{ref:o?C:void 0,children:[n.jsx(s.SourceButtonRow,{"data-test":`${r}-sources`,children:p?.map(e=>n.jsxs(s.SourceButton,{type:"button","data-test":`${r}-source-${e.source}`,onClick:()=>{if(o){_(e.source),c(!0);return}b(e.source)},children:[R.renderSourceIcon(R.SOURCE_ICONS[e.source],-4),n.jsx(S.BodySecondary,{color:d.COLORS.content.primary,children:e.label})]},e.source))}),o&&a&&y!==null&&n.jsx(O,{$align:"left","data-test":`${r}-picker`,children:q}),!o&&v&&n.jsx(A.Dropdown,{"data-test":`${r}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Search ${v.label} tools`,options:v.options,onSelect:e=>{const i=E.unwrapDropdownValue(e);b(null),c(!1),i&&j(i)}})]}):n.jsxs(n.Fragment,{children:[!o&&a&&m.length>0&&n.jsx(A.Dropdown,{"data-test":`${r}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Select ${l.toLowerCase()}`,options:m,onSelect:e=>{const i=E.unwrapDropdownValue(e);c(!1),i&&(i===D?t?.onSelect():j(i))}}),u.length===0&&!a?n.jsxs(n.Fragment,{children:[n.jsx(S.BodyCaption,{color:d.COLORS.content.placeholder,children:M}),F&&t&&n.jsx(Q.Button,{"data-test":`${r}-create`,buttonType:"secondary",size:"small",matchParentWidth:!0,LeadingIcon:B.default,buttonText:t.label,onClick:t.onSelect})]}):V()]})]})},Z=$.default.div`
+	position: relative;
+	display: flex;
+`,G=$.default.div`
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,O=$.default.div`
+	position: absolute;
+	top: calc(100% + 4px);
+	${l=>l.$align==="left"?"left: 0;":"right: 0;"}
+	z-index: 30;
+`;exports.SelectableListSection=Y;
 //# sourceMappingURL=SelectableListSection.js.map

package/dist/cjs/components/agent-builder/components/SelectableListSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React, { useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { Dropdown } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport { SOURCE_ICONS, SourceIcon } from '../utils/sourceIcons';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// With sourceGroups the empty state IS the source buttons, so \"+\" only adds more.\n\tconst showAddButton = hasSourceGroups\n\t\t? items.length > 0\n\t\t: addableOptions.length > 0 || (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups;\n\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => (\n\t\t\t<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{item.icon &&\n\t\t\t\t\tReact.createElement(item.icon.Icon, {\n\t\t\t\t\t\twidth: item.icon.w,\n\t\t\t\t\t\theight: item.icon.h,\n\t\t\t\t\t})}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\n\t\t));\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t</AddIconButton>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => {\n\t\t\t\t\t\t\tconst icon = SOURCE_ICONS[g.source];\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\t\tonClick={() => setActiveSource(g.source)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{icon &&\n\t\t\t\t\t\t\t\t\t\tReact.createElement(icon.Icon, {\n\t\t\t\t\t\t\t\t\t\t\twidth: icon.w - 4,\n\t\t\t\t\t\t\t\t\t\t\theight: icon.h - 4,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Chosen source → its searchable tool list. */}\n\t\t\t\t\t{activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\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</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\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\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","React","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","SideSection","SideSectionHeader","TitleSmall","AddIconButton","PlusIcon","BodyCaption","Fragment","SourceButtonRow","icon","SOURCE_ICONS","SourceButton","Dropdown","opt","Button"],"mappings":"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"}
+{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { MentionItem } from '@src/editor';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n\t/**\n\t * When provided, the header \"+\" opens the same `@` reference picker used in the\n\t * Instructions editor (a {@link MentionPicker} popover) instead of the inline\n\t * select dropdown. Pass the items for THIS section only (tools OR sub-agents) —\n\t * the picker auto-drills into the single category. Selecting a row calls\n\t * `onAdd(id)`; the picker's \"Create new\" row (sub-agents) calls\n\t * `createOption.onSelect`.\n\t */\n\tmentionItems?: MentionItem[];\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n\tmentionItems,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\t// When set, \"+\" opens the `@` MentionPicker popover instead of a select input.\n\tconst usePicker = mentionItems !== undefined;\n\tconst pickerWrapRef = useRef<HTMLDivElement>(null);\n\t// Source (Shopify / Manifest) the empty-state button opened the picker into;\n\t// null when \"+\" opened it at the root source list.\n\tconst [pickerSource, setPickerSource] = useState<string | null>(null);\n\n\t// Dismiss the picker popover on outside click / Escape.\n\tuseEffect(() => {\n\t\tif (!usePicker || !adding) {\n\t\t\treturn;\n\t\t}\n\t\tconst onDocMouseDown = (e: MouseEvent) => {\n\t\t\tif (!pickerWrapRef.current?.contains(e.target as Node)) {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('mousedown', onDocMouseDown);\n\t\tdocument.addEventListener('keydown', onKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', onDocMouseDown);\n\t\t\tdocument.removeEventListener('keydown', onKeyDown);\n\t\t};\n\t}, [usePicker, adding]);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// With sourceGroups the empty state IS the source buttons, so \"+\" only adds more.\n\tconst showAddButton = hasSourceGroups\n\t\t? items.length > 0\n\t\t: // Picker mode (sub-agents) always shows the header \"+\", even when empty —\n\t\t  // the empty state is just the title + helper + \"+\" (create lives in the picker).\n\t\t  usePicker ||\n\t\t  addableOptions.length > 0 ||\n\t\t  (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown. In picker mode the \"+\" opens the picker\n\t// (with its own \"Create new\" row) instead, so skip the standalone button.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups && !usePicker;\n\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (usePicker) {\n\t\t\t// Toggle the `@` reference-picker popover (rendered under the \"+\"), opened\n\t\t\t// at the root source list (no pre-drilled source).\n\t\t\tsetPickerSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => (\n\t\t\t<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\n\t\t));\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\t// One picker instance reused by the header \"+\" and the empty-state source\n\t// buttons. `key` remounts it so a source button re-drills into its own tools\n\t// (the initial drill-in level is read once, on mount).\n\tconst pickerNode = usePicker ? (\n\t\t<MentionPicker\n\t\t\tkey={pickerSource ?? '__root__'}\n\t\t\titems={mentionItems ?? []}\n\t\t\tquery=\"\"\n\t\t\tactiveIndex={0}\n\t\t\tinitialSource={pickerSource ?? undefined}\n\t\t\tonSelect={(item) => {\n\t\t\t\tsetAdding(false);\n\t\t\t\tonAdd(String(item.id));\n\t\t\t}}\n\t\t\tonClose={() => setAdding(false)}\n\t\t\tonCreateSubAgent={\n\t\t\t\tcreateOption\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\tcreateOption.onSelect();\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddButtonWrap ref={pickerWrapRef}>\n\t\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t\t</AddIconButton>\n\t\t\t\t\t\t{usePicker && adding && pickerSource === null && (\n\t\t\t\t\t\t\t<PickerPopover data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AddButtonWrap>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<SourcePickerAnchor ref={usePicker ? pickerWrapRef : undefined}>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tif (usePicker) {\n\t\t\t\t\t\t\t\t\t\t// Open the `@` picker drilled straight into this source's tools.\n\t\t\t\t\t\t\t\t\t\tsetPickerSource(g.source);\n\t\t\t\t\t\t\t\t\t\tsetAdding(true);\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetActiveSource(g.source);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(SOURCE_ICONS[g.source], -4)}\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Picker mode: clicking a source opens its tools in the `@` picker. */}\n\t\t\t\t\t{usePicker && adding && pickerSource !== null && (\n\t\t\t\t\t\t<PickerPopover $align=\"left\" data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Legacy (non-picker) mode: chosen source → its searchable tool list. */}\n\t\t\t\t\t{!usePicker && activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\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</SourcePickerAnchor>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{!usePicker && adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\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\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n\n// Anchors the `@`-picker popover to the header \"+\" button.\nconst AddButtonWrap = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n`;\n\n// Anchors the `@`-picker popover to the empty-state source buttons.\nconst SourcePickerAnchor = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n// Floating card under the trigger. Aligns to the \"+\" (right) or the source\n// buttons (left) so it stays inside the side panel.\nconst PickerPopover = styled.div<{ $align?: 'left' | 'right' }>`\n\tposition: absolute;\n\ttop: calc(100% + 4px);\n\t${(p) => (p.$align === 'left' ? 'left: 0;' : 'right: 0;')}\n\tz-index: 30;\n`;\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","mentionItems","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","pickerWrapRef","useRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","onKeyDown","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","renderSourceIcon","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","styled","p"],"mappings":"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"}

package/dist/cjs/components/agent-builder/constants/charLimits.js.map

@@ -1 +1 @@
-{"version":3,"file":"charLimits.js","sources":["../../../../../src/components/agent-builder/constants/charLimits.ts"],"sourcesContent":["/**\n * Character limits for AgentBuilder fields.\n *\n * `name` and `description` are taken directly from the Figma spec. The rest are\n * sized to match the 0/1000 counters shown on the response/handover steps; adjust\n * here if product changes them.\n */\nexport const AGENT_CHAR_LIMITS = {\n\t/** Step 1 — Agent name. */\n\tname: 60,\n\t/** Step 1 — \"What it does\". */\n\tdescription: 1000,\n\t/** Step 2 — custom intent free text. */\n\tcustom_intent: 1000,\n\t/** Step 3 — Instructions (BikEditor `maxCharacters`). */\n\tinstructions: 1000,\n\t/** Step 3 — Guardrails. */\n\tguardrail: 1000,\n\t/** Step 4 — \"Handover when\". */\n\thandoverWhen: 1000,\n} as const;\n"],"names":["AGENT_CHAR_LIMITS"],"mappings":"gFAOO,MAAMA,EAAoB,CAEhC,KAAM,GAEN,YAAa,IAEb,cAAe,IAEf,aAAc,IAEd,UAAW,IAEX,aAAc,GACf"}
+{"version":3,"file":"charLimits.js","sources":["../../../../../src/components/agent-builder/constants/charLimits.ts"],"sourcesContent":["/**\n * Character limits for AgentBuilder fields.\n *\n * `name` and `description` are taken directly from the Figma spec. The rest are\n * sized to match the 0/1000 counters shown on the response/handover steps; adjust\n * here if product changes them.\n */\nexport const AGENT_CHAR_LIMITS = {\n\t/** Step 1 — Agent name. */\n\tname: 60,\n\t/** Step 1 — \"What it does\". */\n\tdescription: 1000,\n\t/** Step 2 — custom intent free text. */\n\tcustom_intent: 1000,\n\t/** Step 3 — Instructions (BikEditor `maxCharacters`). */\n\tinstructions: 1000,\n\t/** Step 3 — Guardrails. */\n\tguardrail: 1000,\n\t/** Step 4 — \"Handover when\". */\n\thandoverWhen: 1000,\n} as const;\n\n/**\n * Per-field character limits. The consumer can override any subset via\n * `config.charLimits` on {@link AgentBuilder}; unset fields fall back to\n * {@link AGENT_CHAR_LIMITS}.\n */\nexport type AgentCharLimits = Record<keyof typeof AGENT_CHAR_LIMITS, number>;\n"],"names":["AGENT_CHAR_LIMITS"],"mappings":"gFAOO,MAAMA,EAAoB,CAEhC,KAAM,GAEN,YAAa,IAEb,cAAe,IAEf,aAAc,IAEd,UAAW,IAEX,aAAc,GACf"}

package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const nt=require("react/jsx-runtime"),n=require("react"),O=require("../constants/charLimits.js"),d=require("../constants/steps.js"),st=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},rt=st(n),Q=rt.default.createContext(null),ot=()=>{const t=n.useContext(Q);if(!t)throw new Error("useAgentBuilderContext must be used within an AgentBuilderProvider");return t},ct=t=>{const o=t.trigger.mode==="custom_intent"?(t.trigger.custom_intent??"").trim().length>0:t.trigger.intents.length>0;return{about:t.name.trim().length>0&&t.name.length<=O.AGENT_CHAR_LIMITS.name&&t.description.length<=O.AGENT_CHAR_LIMITS.description,trigger:o,response:t.instructions.trim().length>0||(t.guardrail??"").trim().length>0,handover:!0}},it=({value:t,onChange:o,activeStep:R,onStepChange:x,availableTools:u,availableSubAgents:a,availableIntents:p,availableModels:b,validation:k,applicationType:E,disableStepNavigation:M=!0,onCreateSubAgent:P,onFetchSubAgent:T,onUpdateSubAgent:h,onImproveSubAgent:A,children:W})=>{const[X,Z]=n.useState("about"),g=R??X,c=d.getStepIndex(g),[B,I]=n.useState(0),S=n.useRef({}),y=n.useRef("instructions"),j=n.useCallback((e,r)=>{r?S.current[e]=r:delete S.current[e]},[]),q=n.useCallback(e=>{y.current=e},[]),F=n.useRef(null),K=n.useCallback(e=>{F.current=e},[]),L=n.useCallback(()=>{F.current?.()},[]),Y=n.useCallback((e,r,m)=>{const l=S.current;(l[y.current]??l.instructions)?.(e,r,m)},[]),[$,_]=n.useState(null),f=n.useRef(null),w=n.useRef(0),i=n.useCallback(e=>{R===void 0&&Z(e),x?.(e)},[R,x]),V=n.useCallback(()=>{const e=d.STEP_KEYS[Math.min(c+1,d.STEP_KEYS.length-1)];i(e)},[c,i]),G=n.useCallback(()=>{const e=d.STEP_KEYS[Math.max(c-1,0)];i(e)},[c,i]),H=n.useCallback(e=>o(e),[o]),N=n.useCallback((e,r)=>o({[e]:r}),[o]),D=n.useCallback((e,r)=>{const m=e==="tool"?(()=>{const s=u.find(et=>et.tool_id===r);return s?`{{tool:${s.function_key}}}`:null})():`{{subagent:${r}}}`,l=s=>m?s.split(m).join(""):s;f.current={tools:t.tools,subagents:t.subagents,instructions:t.instructions,guardrail:t.guardrail};const J={instructions:l(t.instructions),guardrail:l(t.guardrail??""),...e==="tool"?{tools:t.tools.filter(s=>s!==r)}:{subagents:t.subagents.filter(s=>s!==r)}};o(J),I(s=>s+1);const tt=e==="tool"?u.find(s=>s.tool_id===r)?.display_name??"Tool":a.find(s=>s.id===r)?.name??"Sub-agent";w.current+=1,_({id:w.current,message:`${e==="tool"?"Tool":"Sub-agent"} "${tt}" removed`})},[u,a,t,o]),U=n.useCallback(()=>{f.current&&(o(f.current),f.current=null,I(e=>e+1)),_(null)},[o]),z=n.useCallback(()=>_(null),[]),C=n.useMemo(()=>({...ct(t),...k}),[t,k]),v=n.useMemo(()=>({value:t,patch:H,updateField:N,removeReference:D,mentionResetKey:B,insertMention:Y,registerMentionField:j,notifyMentionFocus:q,undoToast:$,undoRemoval:U,dismissUndo:z,activeStep:g,activeIndex:c,goToStep:i,goNext:V,goPrev:G,isFirstStep:c===0,isLastStep:c===d.STEP_KEYS.length-1,validation:C,isActiveStepValid:C[g],availableTools:u,availableSubAgents:a,availableIntents:p,availableModels:b,applicationType:E,disableStepNavigation:M,onCreateSubAgent:P,registerSubAgentCreator:K,requestCreateSubAgent:L,onFetchSubAgent:T,onUpdateSubAgent:h,onImproveSubAgent:A}),[t,H,N,D,B,Y,j,q,$,U,z,g,c,i,V,G,C,u,a,p,b,E,M,P,K,L,T,h,A]);return nt.jsx(Q.Provider,{value:v,children:W})};exports.AgentBuilderProvider=it;exports.useAgentBuilderContext=ot;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const st=require("react/jsx-runtime"),n=require("react"),rt=require("../constants/charLimits.js"),a=require("../constants/steps.js"),ot=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},ct=ot(n),X=ct.default.createContext(null),it=()=>{const t=n.useContext(X);if(!t)throw new Error("useAgentBuilderContext must be used within an AgentBuilderProvider");return t},ut=(t,o)=>{const u=t.trigger.mode==="custom_intent"?(t.trigger.custom_intent??"").trim().length>0:t.trigger.intents.length>0;return{about:t.name.trim().length>0&&t.name.length<=o.name&&t.description.length<=o.description,trigger:u,response:t.instructions.trim().length>0||(t.guardrail??"").trim().length>0,handover:!0}},lt=({value:t,onChange:o,activeStep:u,onStepChange:p,availableTools:l,availableSubAgents:g,availableIntents:b,availableModels:k,validation:h,applicationType:E,charLimits:M,disableStepNavigation:P=!0,onCreateSubAgent:B,onFetchSubAgent:T,onUpdateSubAgent:y,onImproveSubAgent:A,children:Z})=>{const[O,v]=n.useState("about"),m=u??O,c=a.getStepIndex(m),[j,q]=n.useState(0),x=n.useRef({}),F=n.useRef("instructions"),I=n.useCallback((e,r)=>{r?x.current[e]=r:delete x.current[e]},[]),K=n.useCallback(e=>{F.current=e},[]),L=n.useRef(null),$=n.useCallback(e=>{L.current=e},[]),Y=n.useCallback(()=>{L.current?.()},[]),w=n.useCallback((e,r,S)=>{const d=x.current;(d[F.current]??d.instructions)?.(e,r,S)},[]),[V,C]=n.useState(null),f=n.useRef(null),D=n.useRef(0),i=n.useCallback(e=>{u===void 0&&v(e),p?.(e)},[u,p]),G=n.useCallback(()=>{const e=a.STEP_KEYS[Math.min(c+1,a.STEP_KEYS.length-1)];i(e)},[c,i]),H=n.useCallback(()=>{const e=a.STEP_KEYS[Math.max(c-1,0)];i(e)},[c,i]),N=n.useCallback(e=>o(e),[o]),U=n.useCallback((e,r)=>o({[e]:r}),[o]),z=n.useCallback((e,r)=>{const S=e==="tool"?(()=>{const s=l.find(nt=>nt.tool_id===r);return s?`{{tool:${s.function_key}}}`:null})():`{{subagent:${r}}}`,d=s=>S?s.split(S).join(""):s;f.current={tools:t.tools,subagents:t.subagents,instructions:t.instructions,guardrail:t.guardrail};const W={instructions:d(t.instructions),guardrail:d(t.guardrail??""),...e==="tool"?{tools:t.tools.filter(s=>s!==r)}:{subagents:t.subagents.filter(s=>s!==r)}};o(W),q(s=>s+1);const et=e==="tool"?l.find(s=>s.tool_id===r)?.display_name??"Tool":g.find(s=>s.id===r)?.name??"Sub-agent";D.current+=1,C({id:D.current,message:`${e==="tool"?"Tool":"Sub-agent"} "${et}" removed`})},[l,g,t,o]),J=n.useCallback(()=>{f.current&&(o(f.current),f.current=null,q(e=>e+1)),C(null)},[o]),Q=n.useCallback(()=>C(null),[]),R=n.useMemo(()=>({...rt.AGENT_CHAR_LIMITS,...M}),[M]),_=n.useMemo(()=>({...ut(t,R),...h}),[t,R,h]),tt=n.useMemo(()=>({value:t,patch:N,updateField:U,removeReference:z,mentionResetKey:j,insertMention:w,registerMentionField:I,notifyMentionFocus:K,undoToast:V,undoRemoval:J,dismissUndo:Q,activeStep:m,activeIndex:c,goToStep:i,goNext:G,goPrev:H,isFirstStep:c===0,isLastStep:c===a.STEP_KEYS.length-1,validation:_,isActiveStepValid:_[m],availableTools:l,availableSubAgents:g,availableIntents:b,availableModels:k,applicationType:E,charLimits:R,disableStepNavigation:P,onCreateSubAgent:B,registerSubAgentCreator:$,requestCreateSubAgent:Y,onFetchSubAgent:T,onUpdateSubAgent:y,onImproveSubAgent:A}),[t,N,U,z,j,w,I,K,V,J,Q,m,c,i,G,H,_,l,g,b,k,E,R,P,B,$,Y,T,y,A]);return st.jsx(X.Provider,{value:tt,children:Z})};exports.AgentBuilderProvider=lt;exports.useAgentBuilderContext=it;
 //# sourceMappingURL=AgentBuilderContext.js.map