@bikdotai/bik-component-library 0.0.849-beta.4 → 0.0.849-beta.6

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

@@ -1 +1 @@
-{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport { ToolAction } from '../constants/tools';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n\tbuildCustomToolMentionItems,\n} from '../utils/mentionSerialization';\nimport { buildToolActions } from '../utils/toolActions';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\taddReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t\trequestToolAction,\n\t\tconfigToolTemplates,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t\tvariablesData,\n\t} = useAgentBuilderContext();\n\n\t// Catalog tools + sub-agents, PLUS the inline custom tools (Rest API / email /\n\t// Slack) so their `{{tool:<id>}}` tokens rehydrate as chips on remount — they\n\t// live on the value, not in `availableTools`.\n\tconst mentionItems = useMemo(\n\t\t() => [\n\t\t\t...buildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t\t...buildCustomToolMentionItems(value.configTools, value.restApiTools),\n\t\t],\n\t\t[\n\t\t\tavailableTools,\n\t\t\tavailableSubAgents,\n\t\t\tapplicationType,\n\t\t\tvalue.configTools,\n\t\t\tvalue.restApiTools,\n\t\t],\n\t);\n\n\t// Built-in tool actions (Rest API / email / Slack) shown in the `@` picker's\n\t// Tools view — picking one opens its drawer (Step 3) instead of inserting text.\n\t// The shared email / Slack forms are backend-driven: each is offered only when\n\t// its template was provided.\n\tconst toolActions = useMemo<ToolAction[]>(\n\t\t() =>\n\t\t\tbuildToolActions(\n\t\t\t\tconfigToolTemplates,\n\t\t\t\trequestToolAction,\n\t\t\t\tintegrationStatus,\n\t\t\t\tonConnectIntegration,\n\t\t\t),\n\t\t[\n\t\t\trequestToolAction,\n\t\t\tconfigToolTemplates,\n\t\t\tintegrationStatus,\n\t\t\tonConnectIntegration,\n\t\t],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\t// Route through the context's ref-backed `addReference`: BikEditor captures\n\t// this handler at mount, so reading `value.tools` here would keep only the last\n\t// pick. `addReference` always appends against the latest lists.\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => addReference(kind, id),\n\t\t[addReference],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\ttoolActions={toolActions}\n\t\t\tintegrationStatus={integrationStatus}\n\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\tvariablesData={variablesData}\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","addReference","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","requestToolAction","configToolTemplates","integrationStatus","onConnectIntegration","variablesData","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","buildCustomToolMentionItems","toolActions","buildToolActions","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":";;;;;;AA+BO,MAAMA,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACGC,EAAA,GAKEC,IAAeC;AAAA,IACpB,MAAM;AAAA,MACL,GAAGC;AAAA,QACFhB;AAAA,QACAC;AAAA,QACAgB,EAAaf,CAAe;AAAA,MAAA;AAAA,MAE7B,GAAGgB,EAA4BrB,EAAM,aAAaA,EAAM,YAAY;AAAA,IAAA;AAAA,IAErE;AAAA,MACCG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAL,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA;AAAA,EACP,GAOKsB,IAAcJ;AAAA,IACnB,MACCK;AAAA,MACCX;AAAA,MACAD;AAAA,MACAE;AAAA,MACAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACCH;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACD,GAGKU,IAAiBC;AAAA,IACtB,CAACC,MACAnB,EAAqBb,GAAUgC,CAAE;AAAA,IAClC,CAACnB,GAAsBb,CAAQ;AAAA,EAAA,GAM1BiC,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe3B,EAAa0B,GAAMC,CAAE;AAAA,IAChE,CAAC3B,CAAY;AAAA,EAAA;AAGd,SACC,gBAAA4B;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAApC;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAACsC,MAAS/B,EAAM,EAAE,CAACP,CAAQ,GAAGsC,GAA6B;AAAA,MACrE,WAAAnC;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAW;AAAA,MACA,OAAOd;AAAA,MACP,iBAAAwB;AAAA,MACA,SAAS,MAAMnB,EAAmBd,CAAQ;AAAA,MAC1C,gBAAA8B;AAAA,MACA,kBAAkBf,IAAmBC,IAAwB;AAAA,MAC7D,aAAAY;AAAA,MACA,mBAAAT;AAAA,MACA,sBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}
+{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport { ToolAction } from '../constants/tools';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n\tbuildCustomToolMentionItems,\n} from '../utils/mentionSerialization';\nimport { buildToolActions } from '../utils/toolActions';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\taddReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t\trequestToolAction,\n\t\tconfigToolTemplates,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t\tvariablesData,\n\t} = useAgentBuilderContext();\n\n\t// Catalog tools + sub-agents, PLUS the inline custom tools (Rest API / email /\n\t// Slack) so their `{{tool:<id>}}` tokens rehydrate as chips on remount — they\n\t// live on the value, not in `availableTools`.\n\tconst mentionItems = useMemo(\n\t\t() => [\n\t\t\t...buildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t\t...buildCustomToolMentionItems(value.configTools, value.restApiTools),\n\t\t],\n\t\t[\n\t\t\tavailableTools,\n\t\t\tavailableSubAgents,\n\t\t\tapplicationType,\n\t\t\tvalue.configTools,\n\t\t\tvalue.restApiTools,\n\t\t],\n\t);\n\n\t// Built-in tool actions (Rest API / email / Slack) shown in the `@` picker's\n\t// Tools view — picking one opens its drawer (Step 3) instead of inserting text.\n\t// The shared email / Slack forms are backend-driven: each is offered only when\n\t// its template was provided.\n\tconst toolActions = useMemo<ToolAction[]>(\n\t\t() =>\n\t\t\tbuildToolActions(\n\t\t\t\tconfigToolTemplates,\n\t\t\t\trequestToolAction,\n\t\t\t\tintegrationStatus,\n\t\t\t\tonConnectIntegration,\n\t\t\t),\n\t\t[\n\t\t\trequestToolAction,\n\t\t\tconfigToolTemplates,\n\t\t\tintegrationStatus,\n\t\t\tonConnectIntegration,\n\t\t],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\t// Route through the context's ref-backed `addReference`: BikEditor captures\n\t// this handler at mount, so reading `value.tools` here would keep only the last\n\t// pick. `addReference` always appends against the latest lists.\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => addReference(kind, id),\n\t\t[addReference],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\ttoolActions={toolActions}\n\t\t\tintegrationStatus={integrationStatus}\n\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\tvariablesData={variablesData}\n\t\t\t// Step-3 fields get the floating \"+ Add data\" pill (same as typing @).\n\t\t\taddDataButton\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","addReference","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","requestToolAction","configToolTemplates","integrationStatus","onConnectIntegration","variablesData","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","buildCustomToolMentionItems","toolActions","buildToolActions","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":";;;;;;AA+BO,MAAMA,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACGC,EAAA,GAKEC,IAAeC;AAAA,IACpB,MAAM;AAAA,MACL,GAAGC;AAAA,QACFhB;AAAA,QACAC;AAAA,QACAgB,EAAaf,CAAe;AAAA,MAAA;AAAA,MAE7B,GAAGgB,EAA4BrB,EAAM,aAAaA,EAAM,YAAY;AAAA,IAAA;AAAA,IAErE;AAAA,MACCG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAL,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA;AAAA,EACP,GAOKsB,IAAcJ;AAAA,IACnB,MACCK;AAAA,MACCX;AAAA,MACAD;AAAA,MACAE;AAAA,MACAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACCH;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACD,GAGKU,IAAiBC;AAAA,IACtB,CAACC,MACAnB,EAAqBb,GAAUgC,CAAE;AAAA,IAClC,CAACnB,GAAsBb,CAAQ;AAAA,EAAA,GAM1BiC,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe3B,EAAa0B,GAAMC,CAAE;AAAA,IAChE,CAAC3B,CAAY;AAAA,EAAA;AAGd,SACC,gBAAA4B;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAApC;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAACsC,MAAS/B,EAAM,EAAE,CAACP,CAAQ,GAAGsC,GAA6B;AAAA,MACrE,WAAAnC;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAW;AAAA,MACA,OAAOd;AAAA,MACP,iBAAAwB;AAAA,MACA,SAAS,MAAMnB,EAAmBd,CAAQ;AAAA,MAC1C,gBAAA8B;AAAA,MACA,kBAAkBf,IAAmBC,IAAwB;AAAA,MAC7D,aAAAY;AAAA,MACA,mBAAAT;AAAA,MACA,sBAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,eAAa;AAAA,MACb,aAAWhB,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}

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

@@ -1,92 +1,92 @@
-import { jsxs as b, jsx as c, Fragment as ee } from "react/jsx-runtime";
+import { jsxs as m, jsx as a, Fragment as ee } from "react/jsx-runtime";
 import te from "../../../assets/icons/chevronRight.svg.js";
 import ne from "../../../assets/icons/searchIcon.svg.js";
 import re from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
-import { useState as q, useMemo as v, useEffect as N, useRef as oe } from "react";
-import p from "styled-components";
-import { TitleSmall as ie, BodySecondary as ae, BodyCaption as le } from "../../TypographyStyle.js";
+import { useState as q, useMemo as v, useEffect as F, useRef as oe } from "react";
+import u from "styled-components";
+import { TitleSmall as ie, BodySecondary as le, BodyCaption as ae } from "../../TypographyStyle.js";
 import { COLORS as i } from "../../../constants/Theme.js";
 import { PickerType as ce } from "../../variable-picker-v3/model.js";
 import { CATEGORIES as se, toolSourceRank as W, CONFIG_TOOL_SOURCES as de } from "../constants/tools.js";
-import { toolSourceLabel as U } from "../utils/mentionSerialization.js";
+import { toolSourceLabel as N } from "../utils/mentionSerialization.js";
 import { sourceIcon as T, renderSourceIcon as X } from "../utils/sourceIcons.js";
 import { VariablePicker as ue } from "../../variable-picker-v3/VariablePicker.js";
 import Y from "../../../icons/Informational/Common UI/Shield.js";
-const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_create_subagent__", ze = ({
-  items: s,
+const f = (c) => c.meta, I = (c) => f(c)?.plainLabel ?? c.label, pe = "__bik_create_subagent__", Fe = ({
+  items: c,
   onSelect: R,
   registerKeyHandler: S,
   onClose: x,
   onCreateSubAgent: y,
-  initialSource: j,
+  initialSource: U,
   toolActions: k,
-  integrationStatus: F,
+  integrationStatus: j,
   onConnectIntegration: G,
   variablesData: _,
-  onSelectVariable: O
+  onSelectVariable: D
 }) => {
-  const [Z, C] = q(null), [d, D] = q(j ?? null), [B, g] = q(-1), [w, J] = q(""), m = v(
-    () => s.filter((e) => h(e)?.kind === "tool"),
-    [s]
-  ), $ = v(
-    () => s.filter((e) => h(e)?.kind === "subagent"),
-    [s]
+  const [Z, $] = q(null), [d, O] = q(U ?? null), [C, g] = q(-1), [w, V] = q(""), b = v(
+    () => c.filter((e) => f(e)?.kind === "tool"),
+    [c]
+  ), B = v(
+    () => c.filter((e) => f(e)?.kind === "subagent"),
+    [c]
   ), z = v(() => {
     const e = [];
-    return m.forEach((r) => {
-      const f = h(r)?.source ?? "other";
-      e.includes(f) || e.push(f);
+    return b.forEach((r) => {
+      const h = f(r)?.source ?? "other";
+      e.includes(h) || e.push(h);
     }), e;
-  }, [m]), M = v(
+  }, [b]), M = v(
     () => new Map(
       (k ?? []).map((e) => [e.source, e])
     ),
     [k]
   ), A = v(
-    () => se.filter((e) => e.key === "tool" ? m.length > 0 || (k?.length ?? 0) > 0 : e.key === "variable" ? (_?.length ?? 0) > 0 && !!O : $.length > 0 || !!y),
+    () => se.filter((e) => e.key === "tool" ? b.length > 0 || (k?.length ?? 0) > 0 : e.key === "variable" ? (_?.length ?? 0) > 0 && !!D : B.length > 0 || !!y),
     [
-      m.length,
-      $.length,
+      b.length,
+      B.length,
       y,
       k?.length,
       _?.length,
-      O
+      D
     ]
-  ), L = A.length === 1 ? A[0].key : null, a = Z ?? L, u = a ? a === "subagent" ? (
+  ), L = A.length === 1 ? A[0].key : null, l = Z ?? L, p = l ? l === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: L ? void 0 : () => C(null)
+      onBack: L ? void 0 : () => $(null)
     }
-  ) : a === "variable" ? {
+  ) : l === "variable" ? {
     title: "Variables",
-    onBack: L ? void 0 : () => C(null)
+    onBack: L ? void 0 : () => $(null)
   } : d ? {
-    title: U(d),
+    title: N(d),
     // Deep-linked to a source (opened from a right-panel source button):
     // that source IS the root, so no back arrow. In the @-drill flow
     // (no initialSource) back returns to the source chooser.
-    onBack: j ? void 0 : () => D(null),
+    onBack: U ? void 0 : () => O(null),
     icon: T(d)
   } : (
     // Always titled — matches the Sub-agent header; back arrow only when the
     // category chooser is above (i.e. not the sole category).
     {
       title: "Tools",
-      onBack: L ? void 0 : () => C(null)
+      onBack: L ? void 0 : () => $(null)
     }
-  ) : null, l = v(() => {
-    if (!a)
+  ) : null, s = v(() => {
+    if (!l)
       return A.map((n) => ({
         id: n.key,
         label: n.label,
         drillsIn: !0,
         onActivate: () => {
-          C(n.key), D(null);
+          $(n.key), O(null);
         }
       }));
-    if (a === "subagent") {
-      const n = w.trim().toLowerCase(), t = $.filter((o) => !n || I(o).toLowerCase().includes(n)).map((o) => ({
+    if (l === "subagent") {
+      const n = w.trim().toLowerCase(), t = B.filter((o) => !n || I(o).toLowerCase().includes(n)).map((o) => ({
         id: String(o.id),
         label: I(o),
         drillsIn: !1,
@@ -102,16 +102,16 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
         }
       }), t;
     }
-    if (a === "variable")
+    if (l === "variable")
       return [];
     if (!d) {
       const n = (k ?? []).map((t) => t.source).filter((t) => !z.includes(t));
       return [...z, ...n].sort((t, o) => W(t) - W(o)).map((t) => {
         const o = M.get(t);
-        if ((o !== void 0 ? o.connected : F?.[t]) === !1)
+        if ((o !== void 0 ? o.connected : j?.[t]) === !1)
           return {
             id: t,
-            label: U(t),
+            label: N(t),
             drillsIn: !1,
             icon: T(t) ?? o?.icon,
             rightLabel: "Connect",
@@ -119,10 +119,10 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
               x?.(), o?.onConnect ? o.onConnect() : G?.(t);
             }
           };
-        const V = m.filter(
-          (E) => (h(E)?.source ?? "other") === t
+        const Q = b.filter(
+          (E) => (f(E)?.source ?? "other") === t
         );
-        if (V.length + (o ? 1 : 0) === 1) {
+        if (Q.length + (o ? 1 : 0) === 1) {
           const E = T(t) ?? o?.icon;
           if (o)
             return {
@@ -134,67 +134,67 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
                 x?.(), o.onSelect();
               }
             };
-          const P = V[0];
+          const P = Q[0];
           return {
             id: String(P.id),
             label: I(P),
             drillsIn: !1,
             icon: E,
-            authRequired: h(P)?.authRequired,
+            authRequired: f(P)?.authRequired,
             onActivate: () => R(P)
           };
         }
         return {
           id: t,
-          label: U(t),
+          label: N(t),
           drillsIn: !0,
           icon: T(t) ?? o?.icon,
-          onActivate: () => D(t)
+          onActivate: () => O(t)
         };
       });
     }
-    const e = w.trim().toLowerCase(), r = m.filter((n) => (h(n)?.source ?? "other") === d).filter((n) => !e || I(n).toLowerCase().includes(e)).map((n) => ({
+    const e = w.trim().toLowerCase(), r = b.filter((n) => (f(n)?.source ?? "other") === d).filter((n) => !e || I(n).toLowerCase().includes(e)).map((n) => ({
       id: String(n.id),
       label: I(n),
       drillsIn: !1,
-      authRequired: h(n)?.authRequired,
+      authRequired: f(n)?.authRequired,
       onActivate: () => R(n)
-    })), f = M.get(d);
-    if (f) {
+    })), h = M.get(d);
+    if (h) {
       const n = d in de;
       r.push({
         id: `create:${d}`,
-        label: f.label,
+        label: h.label,
         drillsIn: !1,
         isCreate: !n,
         onActivate: () => {
-          x?.(), f.onSelect();
+          x?.(), h.onSelect();
         }
       });
     }
     return r;
   }, [
-    a,
+    l,
     A,
     d,
     w,
-    m,
-    $,
+    b,
+    B,
     z,
     R,
     x,
     y,
     k,
     M,
-    F,
+    j,
     G
   ]);
-  N(() => g(-1), [a, d, w, s]), N(() => J(""), [a, d]);
-  const Q = oe({ rows: l, activeIndex: B, header: u });
-  Q.current = { rows: l, activeIndex: B, header: u }, N(() => {
+  F(() => g(-1), [l, d, w, c]), F(() => V(""), [l, d]);
+  const J = oe({ rows: s, activeIndex: C, header: p });
+  J.current = { rows: s, activeIndex: C, header: p }, F(() => {
     if (S)
       return S((e) => {
-        const { rows: r, activeIndex: f, header: n } = Q.current;
+        const { rows: r, activeIndex: h, header: n } = J.current;
         switch (e.key) {
           case "ArrowDown":
             return r.length && g((t) => (t + 1) % r.length), !0;
@@ -202,7 +202,7 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
             return r.length && g((t) => (t + r.length - 1) % r.length), !0;
           case "ArrowRight":
           case "Enter":
-            return (r[f] ?? r[0])?.onActivate(), !0;
+            return (r[h] ?? r[0])?.onActivate(), !0;
           case "ArrowLeft":
             return n?.onBack ? (n.onBack(), !0) : !1;
           default:
@@ -210,120 +210,154 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
         }
       }), () => S(null);
   }, [S]);
-  const K = a ? l.length && !l[0].drillsIn ? "items" : "sources" : "categories", H = a === "tool" && !!d || a === "subagent";
-  return /* @__PURE__ */ b(fe, { className: `bik-mention-picker bik-mention-picker--${K}`, children: [
-    u && /* @__PURE__ */ b(
-      ye,
-      {
-        type: "button",
-        onClick: u.onBack,
-        disabled: !u.onBack,
-        style: {
-          background: i.surface.subdued,
-          cursor: u.onBack ? "pointer" : "default"
-        },
-        children: [
-          u.onBack && /* @__PURE__ */ c(
-            re,
+  const H = l ? s.length && !s[0].drillsIn ? "items" : "sources" : "categories", K = l === "tool" && !!d || l === "subagent";
+  return /* @__PURE__ */ m(
+    he,
+    {
+      className: `bik-mention-picker bik-mention-picker--${H}`,
+      $fixedHeight: l === "variable",
+      children: [
+        p && /* @__PURE__ */ m(
+          Ie,
+          {
+            type: "button",
+            onClick: p.onBack,
+            disabled: !p.onBack,
+            style: {
+              background: i.surface.subdued,
+              cursor: p.onBack ? "pointer" : "default"
+            },
+            children: [
+              p.onBack && /* @__PURE__ */ a(
+                re,
+                {
+                  width: 20,
+                  height: 20,
+                  color: i.content.primary
+                }
+              ),
+              p.icon && X(p.icon),
+              /* @__PURE__ */ m(ie, { children: [
+                " ",
+                p.title
+              ] })
+            ]
+          }
+        ),
+        K && /* @__PURE__ */ m(be, { children: [
+          /* @__PURE__ */ a(
+            ne,
             {
               width: 20,
               height: 20,
-              color: i.content.primary
+              color: i.content.placeholder
             }
           ),
-          u.icon && X(u.icon),
-          /* @__PURE__ */ b(ie, { children: [
-            " ",
-            u.title
-          ] })
-        ]
-      }
-    ),
-    H && /* @__PURE__ */ b(he, { children: [
-      /* @__PURE__ */ c(
-        ne,
-        {
-          width: 20,
-          height: 20,
-          color: i.content.placeholder
-        }
-      ),
-      /* @__PURE__ */ c(
-        ge,
-        {
-          autoFocus: !0,
-          value: w,
-          placeholder: "Search",
-          "data-test": "mention-picker-search",
-          onChange: (e) => J(e.target.value),
-          onKeyDown: (e) => {
-            l.length && (e.key === "ArrowDown" ? (e.preventDefault(), g((r) => (r + 1) % l.length)) : e.key === "ArrowUp" ? (e.preventDefault(), g((r) => (r + l.length - 1) % l.length)) : e.key === "Enter" && (e.preventDefault(), (l[B] ?? l[0])?.onActivate()));
-          }
-        }
-      )
-    ] }),
-    a === "variable" ? (
-      // Shared variable catalog, embedded as this drill-in view. Selecting a
-      // variable dismisses the menu FIRST (strips the typed "@" + query),
-      // then hands the variable up to insert its `{{token}}` at the cursor.
-      /* @__PURE__ */ c(
-        ue,
-        {
-          type: ce.EMBEDDED,
-          data: _ ?? [],
-          showRecommendedBar: !1,
-          onSelect: (e) => {
-            x?.(), O?.(e);
-          }
-        }
-      )
-    ) : l.length === 0 ? /* @__PURE__ */ c(we, { children: a === "subagent" ? null : "No tools available" }) : l.map((e, r) => /* @__PURE__ */ c(
-      me,
-      {
-        type: "button",
-        $active: r === B,
-        onMouseEnter: () => g(r),
-        onMouseLeave: () => g(-1),
-        onClick: e.onActivate,
-        children: e.isCreate ? /* @__PURE__ */ c(ve, { children: e.label }) : /* @__PURE__ */ b(ee, { children: [
-          /* @__PURE__ */ b(be, { children: [
-            X(e.icon),
-            /* @__PURE__ */ c(ae, { color: i.content.primary, children: e.label }),
-            e.authRequired && /* @__PURE__ */ c(
-              Y,
-              {
-                size: 14,
-                "aria-label": "Requires customer verification"
+          /* @__PURE__ */ a(
+            me,
+            {
+              autoFocus: !0,
+              value: w,
+              placeholder: "Search",
+              "data-test": "mention-picker-search",
+              onChange: (e) => V(e.target.value),
+              onKeyDown: (e) => {
+                s.length && (e.key === "ArrowDown" ? (e.preventDefault(), g((r) => (r + 1) % s.length)) : e.key === "ArrowUp" ? (e.preventDefault(), g((r) => (r + s.length - 1) % s.length)) : e.key === "Enter" && (e.preventDefault(), (s[C] ?? s[0])?.onActivate()));
+              }
+            }
+          )
+        ] }),
+        l === "variable" ? (
+          // Shared variable catalog, embedded as this drill-in view. The fill
+          // wrapper hands it the remaining card height, so ITS search bar stays
+          // fixed and only the variable list below scrolls. Selecting a
+          // variable dismisses the menu FIRST (strips the typed "@" + query),
+          // then hands the variable up to insert its `{{token}}` at the cursor.
+          /* @__PURE__ */ a(ge, { children: /* @__PURE__ */ a(
+            ue,
+            {
+              type: ce.EMBEDDED,
+              data: _ ?? [],
+              showRecommendedBar: !1,
+              skipDefaultVariableContent: !0,
+              onSelect: (e) => {
+                x?.(), D?.(e);
               }
-            )
-          ] }),
-          e.rightLabel ? /* @__PURE__ */ c(ke, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ c(te, { width: 12, height: 12 })
+            }
+          ) })
+        ) : s.length === 0 ? /* @__PURE__ */ a(Re, { children: l === "subagent" ? null : "No tools available" }) : /* @__PURE__ */ a(fe, { children: s.map((e, r) => /* @__PURE__ */ a(
+          xe,
+          {
+            type: "button",
+            $active: r === C,
+            onMouseEnter: () => g(r),
+            onMouseLeave: () => g(-1),
+            onClick: e.onActivate,
+            children: e.isCreate ? /* @__PURE__ */ a(we, { children: e.label }) : /* @__PURE__ */ m(ee, { children: [
+              /* @__PURE__ */ m(ke, { children: [
+                X(e.icon),
+                /* @__PURE__ */ a(le, { color: i.content.primary, children: e.label }),
+                e.authRequired && /* @__PURE__ */ a(
+                  Y,
+                  {
+                    size: 14,
+                    "aria-label": "Requires customer verification"
+                  }
+                )
+              ] }),
+              e.rightLabel ? /* @__PURE__ */ a(ye, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ a(te, { width: 12, height: 12 })
+            ] })
+          },
+          e.id
+        )) }),
+        s.some((e) => e.authRequired) && /* @__PURE__ */ m(ve, { children: [
+          /* @__PURE__ */ a(Y, { size: 14 }),
+          /* @__PURE__ */ a(ae, { color: i.content.secondary, children: "Requires customer verification" })
         ] })
-      },
-      e.id
-    )),
-    l.some((e) => e.authRequired) && /* @__PURE__ */ b(xe, { children: [
-      /* @__PURE__ */ c(Y, { size: 14 }),
-      /* @__PURE__ */ c(le, { color: i.content.secondary, children: "Requires customer verification" })
-    ] })
-  ] });
-}, fe = p.div`
+      ]
+    }
+  );
+}, he = u.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
-	max-height: 301px;
-	overflow-y: auto;
+	${(c) => c.$fixedHeight ? "height: 301px;" : "max-height: 301px;"}
+	overflow: hidden;
 	background: ${i.surface.standard};
 	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, he = p.div`
+`, fe = u.div`
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow-y: auto;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+`, ge = u.div`
+	flex: 1 1 auto;
+	min-height: 0;
+
+	> div {
+		height: 100%;
+	}
+
+	* {
+		scrollbar-width: none;
+	}
+
+	*::-webkit-scrollbar {
+		display: none;
+	}
+`, be = u.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
 	border-bottom: 1px solid ${i.stroke.primary};
-`, ge = p.input`
+`, me = u.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -336,7 +370,7 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
 	&::placeholder {
 		color: ${i.content.placeholder};
 	}
-`, me = p.button`
+`, xe = u.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -346,39 +380,39 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
 	height: 48px;
 	border: none;
 	border-bottom: 1px solid ${i.stroke.primary};
-	background: ${(s) => s.$active ? i.surface.subdued : "transparent"};
+	background: ${(c) => c.$active ? i.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
 		background: ${i.surface.hovered};
 	}
-`, be = p.div`
+`, ke = u.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, xe = p.div`
+`, ve = u.div`
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	padding: 8px 12px;
 	border-top: 1px solid ${i.stroke.primary};
-`, ke = p.span`
+`, ye = u.span`
 	flex-shrink: 0;
 	color: ${i.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`, ve = p.div`
+`, we = u.div`
 	width: 100%;
 	text-align: center;
 	color: ${i.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, ye = p.button`
+`, Ie = u.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
@@ -391,13 +425,13 @@ const h = (s) => s.meta, I = (s) => h(s)?.plainLabel ?? s.label, pe = "__bik_cre
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`, we = p.div`
+`, Re = u.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
 	color: ${i.content.secondary};
 `;
 export {
-  ze as MentionPicker
+  Fe as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map