@bikdotai/bik-component-library 0.0.831 → 0.0.832-beta.1

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

@@ -1,39 +1,41 @@
-import { jsx as h } from "react/jsx-runtime";
-import { useMemo as c, useCallback as u } from "react";
-import { useAgentBuilderContext as q } from "../context/AgentBuilderContext.js";
-import { buildAgentMentionItems as R, appTypeLabel as j, buildCustomToolMentionItems as k } from "../utils/mentionSerialization.js";
-import { buildToolActions as B } from "../utils/toolActions.js";
-import { MentionEditor as E } from "./MentionEditor.js";
-const H = ({
+import { jsx as R } from "react/jsx-runtime";
+import { useMemo as p, useCallback as g } from "react";
+import { useAgentBuilderContext as j } from "../context/AgentBuilderContext.js";
+import { buildAgentMentionItems as k, appTypeLabel as B, buildCustomToolMentionItems as E } from "../utils/mentionSerialization.js";
+import { buildToolActions as L } from "../utils/toolActions.js";
+import { MentionEditor as w } from "./MentionEditor.js";
+const N = ({
   fieldKey: o,
-  label: p,
-  placeholder: g,
-  maxLength: T,
-  minHeight: b,
-  ...A
+  label: T,
+  placeholder: b,
+  maxLength: A,
+  minHeight: d,
+  ...C
 }) => {
   const {
     value: t,
-    patch: d,
+    patch: M,
     addReference: s,
     availableTools: n,
     availableSubAgents: i,
     applicationType: r,
-    mentionResetKey: M,
+    mentionResetKey: f,
     registerMentionField: a,
-    notifyMentionFocus: C,
-    onCreateSubAgent: f,
-    requestCreateSubAgent: v,
+    notifyMentionFocus: S,
+    onCreateSubAgent: v,
+    requestCreateSubAgent: I,
     requestToolAction: l,
-    configToolTemplates: m
-  } = q(), S = c(
+    configToolTemplates: c,
+    integrationStatus: m,
+    onConnectIntegration: u
+  } = j(), F = p(
     () => [
-      ...R(
+      ...k(
         n,
         i,
-        j(r)
+        B(r)
       ),
-      ...k(t.configTools, t.restApiTools)
+      ...E(t.configTools, t.restApiTools)
     ],
     [
       n,
@@ -42,38 +44,48 @@ const H = ({
       t.configTools,
       t.restApiTools
     ]
-  ), F = c(
-    () => B(m, l),
-    [l, m]
-  ), I = u(
+  ), x = p(
+    () => L(
+      c,
+      l,
+      m,
+      u
+    ),
+    [
+      l,
+      c,
+      m,
+      u
+    ]
+  ), $ = g(
     (e) => a(o, e),
     [a, o]
-  ), x = u(
-    (e, $) => s(e, $),
+  ), h = g(
+    (e, q) => s(e, q),
     [s]
   );
-  return /* @__PURE__ */ h(
-    E,
+  return /* @__PURE__ */ R(
+    w,
     {
-      label: p,
+      label: T,
       value: t[o] ?? "",
-      onChange: (e) => d({ [o]: e }),
-      maxLength: T,
-      placeholder: g,
-      minHeight: b,
-      resetKey: `${t.id}:${o}:${M}`,
-      mentionItems: S,
+      onChange: (e) => M({ [o]: e }),
+      maxLength: A,
+      placeholder: b,
+      minHeight: d,
+      resetKey: `${t.id}:${o}:${f}`,
+      mentionItems: F,
       tools: n,
-      onMentionSelect: x,
-      onFocus: () => C(o),
-      registerInsert: I,
-      onCreateSubAgent: f ? v : void 0,
-      toolActions: F,
-      "data-test": A["data-test"]
+      onMentionSelect: h,
+      onFocus: () => S(o),
+      registerInsert: $,
+      onCreateSubAgent: v ? I : void 0,
+      toolActions: x,
+      "data-test": C["data-test"]
     }
   );
 };
 export {
-  H as MentionField
+  N as MentionField
 };
 //# sourceMappingURL=MentionField.js.map

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} = 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() => buildToolActions(configToolTemplates, requestToolAction),\n\t\t[requestToolAction, configToolTemplates],\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\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","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,EAAA,IACGC,EAAA,GAKEC,IAAeC;AAAA,IACpB,MAAM;AAAA,MACL,GAAGC;AAAA,QACFb;AAAA,QACAC;AAAA,QACAa,EAAaZ,CAAe;AAAA,MAAA;AAAA,MAE7B,GAAGa,EAA4BlB,EAAM,aAAaA,EAAM,YAAY;AAAA,IAAA;AAAA,IAErE;AAAA,MACCG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAL,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA;AAAA,EACP,GAOKmB,IAAcJ;AAAA,IACnB,MAAMK,EAAiBR,GAAqBD,CAAiB;AAAA,IAC7D,CAACA,GAAmBC,CAAmB;AAAA,EAAA,GAGlCS,IAAiBC;AAAA,IACtB,CAACC,MACAhB,EAAqBb,GAAU6B,CAAE;AAAA,IAClC,CAAChB,GAAsBb,CAAQ;AAAA,EAAA,GAM1B8B,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAexB,EAAauB,GAAMC,CAAE;AAAA,IAChE,CAACxB,CAAY;AAAA,EAAA;AAGd,SACC,gBAAAyB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAAjC;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAACmC,MAAS5B,EAAM,EAAE,CAACP,CAAQ,GAAGmC,GAA6B;AAAA,MACrE,WAAAhC;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAQ;AAAA,MACA,OAAOX;AAAA,MACP,iBAAAqB;AAAA,MACA,SAAS,MAAMhB,EAAmBd,CAAQ;AAAA,MAC1C,gBAAA2B;AAAA,MACA,kBAAkBZ,IAAmBC,IAAwB;AAAA,MAC7D,aAAAS;AAAA,MACA,aAAWpB,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} = 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\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","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,EAAA,IACGC,EAAA,GAKEC,IAAeC;AAAA,IACpB,MAAM;AAAA,MACL,GAAGC;AAAA,QACFf;AAAA,QACAC;AAAA,QACAe,EAAad,CAAe;AAAA,MAAA;AAAA,MAE7B,GAAGe,EAA4BpB,EAAM,aAAaA,EAAM,YAAY;AAAA,IAAA;AAAA,IAErE;AAAA,MACCG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAL,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA;AAAA,EACP,GAOKqB,IAAcJ;AAAA,IACnB,MACCK;AAAA,MACCV;AAAA,MACAD;AAAA,MACAE;AAAA,MACAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACCH;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACD,GAGKS,IAAiBC;AAAA,IACtB,CAACC,MACAlB,EAAqBb,GAAU+B,CAAE;AAAA,IAClC,CAAClB,GAAsBb,CAAQ;AAAA,EAAA,GAM1BgC,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe1B,EAAayB,GAAMC,CAAE;AAAA,IAChE,CAAC1B,CAAY;AAAA,EAAA;AAGd,SACC,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAAnC;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAACqC,MAAS9B,EAAM,EAAE,CAACP,CAAQ,GAAGqC,GAA6B;AAAA,MACrE,WAAAlC;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAU;AAAA,MACA,OAAOb;AAAA,MACP,iBAAAuB;AAAA,MACA,SAAS,MAAMlB,EAAmBd,CAAQ;AAAA,MAC1C,gBAAA6B;AAAA,MACA,kBAAkBd,IAAmBC,IAAwB;AAAA,MAC7D,aAAAW;AAAA,MACA,aAAWtB,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}

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

@@ -1,146 +1,158 @@
-import { jsxs as m, jsx as u, Fragment as J } from "react/jsx-runtime";
-import Q from "../../../assets/icons/chevronRight.svg.js";
-import V from "../../../assets/icons/searchIcon.svg.js";
-import W from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
-import { useState as $, useMemo as b, useEffect as T, useRef as X } from "react";
+import { jsxs as m, jsx as u, Fragment as Q } from "react/jsx-runtime";
+import V from "../../../assets/icons/chevronRight.svg.js";
+import W from "../../../assets/icons/searchIcon.svg.js";
+import X from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as A, useMemo as x, useEffect as P, useRef as Y } from "react";
 import p from "styled-components";
-import { TitleSmall as Y, BodySecondary as Z } from "../../TypographyStyle.js";
+import { TitleSmall as Z, BodySecondary as K } from "../../TypographyStyle.js";
 import { COLORS as o } from "../../../constants/Theme.js";
-import { CATEGORIES as K, CONFIG_TOOL_SOURCES as H } from "../constants/tools.js";
-import { toolSourceLabel as N } from "../utils/mentionSerialization.js";
-import { sourceIcon as z, renderSourceIcon as U } from "../utils/sourceIcons.js";
-const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_create_subagent__", ve = ({
+import { CATEGORIES as H, toolSourceRank as U, CONFIG_TOOL_SOURCES as ee } from "../constants/tools.js";
+import { toolSourceLabel as D } from "../utils/mentionSerialization.js";
+import { sourceIcon as z, renderSourceIcon as j } from "../utils/sourceIcons.js";
+const y = (i) => i.meta, L = (i) => y(i)?.plainLabel ?? i.label, te = "__bik_create_subagent__", we = ({
   items: i,
-  onSelect: A,
+  onSelect: R,
   registerKeyHandler: w,
-  onClose: E,
-  onCreateSubAgent: x,
-  initialSource: j,
-  toolActions: f
+  onClose: I,
+  onCreateSubAgent: k,
+  initialSource: F,
+  toolActions: h
 }) => {
-  const [F, R] = $(null), [a, L] = $(j ?? null), [I, h] = $(0), [k, D] = $(""), g = b(
+  const [G, B] = A(null), [a, E] = A(F ?? null), [S, g] = A(0), [v, M] = A(""), b = x(
     () => i.filter((e) => y(e)?.kind === "tool"),
     [i]
-  ), S = b(
+  ), C = x(
     () => i.filter((e) => y(e)?.kind === "subagent"),
     [i]
-  ), _ = b(() => {
+  ), _ = x(() => {
     const e = [];
-    return g.forEach((n) => {
-      const d = y(n)?.source ?? "other";
-      e.includes(d) || e.push(d);
+    return b.forEach((r) => {
+      const f = y(r)?.source ?? "other";
+      e.includes(f) || e.push(f);
     }), e;
-  }, [g]), O = b(
+  }, [b]), O = x(
     () => new Map(
-      (f ?? []).map((e) => [e.source, e])
+      (h ?? []).map((e) => [e.source, e])
     ),
-    [f]
-  ), C = b(
-    () => K.filter(
-      (e) => e.key === "tool" ? g.length > 0 || (f?.length ?? 0) > 0 : S.length > 0 || !!x
+    [h]
+  ), $ = x(
+    () => H.filter(
+      (e) => e.key === "tool" ? b.length > 0 || (h?.length ?? 0) > 0 : C.length > 0 || !!k
     ),
-    [g.length, S.length, x, f?.length]
-  ), P = C.length === 1 ? C[0].key : null, l = F ?? P, s = l ? l === "subagent" ? (
+    [b.length, C.length, k, h?.length]
+  ), T = $.length === 1 ? $[0].key : null, c = G ?? T, d = c ? c === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: P ? void 0 : () => R(null)
+      onBack: T ? void 0 : () => B(null)
     }
   ) : a ? {
-    title: N(a),
-    onBack: () => L(null),
+    title: D(a),
+    onBack: () => E(null),
     icon: z(a)
   } : (
     // 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: P ? void 0 : () => R(null)
+      onBack: T ? void 0 : () => B(null)
     }
-  ) : null, c = b(() => {
-    if (!l)
-      return C.map((t) => ({
+  ) : null, s = x(() => {
+    if (!c)
+      return $.map((t) => ({
         id: t.key,
         label: t.label,
         drillsIn: !0,
         onActivate: () => {
-          R(t.key), L(null);
+          B(t.key), E(null);
         }
       }));
-    if (l === "subagent") {
-      const t = k.trim().toLowerCase(), r = S.filter((v) => !t || B(v).toLowerCase().includes(t)).map((v) => ({
-        id: String(v.id),
-        label: B(v),
+    if (c === "subagent") {
+      const t = v.trim().toLowerCase(), n = C.filter((l) => !t || L(l).toLowerCase().includes(t)).map((l) => ({
+        id: String(l.id),
+        label: L(l),
         drillsIn: !1,
-        onActivate: () => A(v)
+        onActivate: () => R(l)
       }));
-      return x && r.push({
-        id: ee,
+      return k && n.push({
+        id: te,
         label: "Create new",
         drillsIn: !1,
         isCreate: !0,
         onActivate: () => {
-          E?.(), x();
+          I?.(), k();
         }
-      }), r;
+      }), n;
     }
     if (!a) {
-      const t = (f ?? []).map((r) => r.source).filter((r) => !_.includes(r));
-      return [..._, ...t].map((r) => ({
-        id: r,
-        label: N(r),
-        drillsIn: !0,
-        icon: z(r) ?? O.get(r)?.icon,
-        onActivate: () => L(r)
-      }));
+      const t = (h ?? []).map((n) => n.source).filter((n) => !_.includes(n));
+      return [..._, ...t].sort((n, l) => U(n) - U(l)).map((n) => {
+        const l = O.get(n);
+        return l?.connected === !1 ? {
+          id: n,
+          label: D(n),
+          drillsIn: !1,
+          icon: z(n) ?? l.icon,
+          rightLabel: "Connect",
+          onActivate: () => {
+            I?.(), l.onConnect?.();
+          }
+        } : {
+          id: n,
+          label: D(n),
+          drillsIn: !0,
+          icon: z(n) ?? l?.icon,
+          onActivate: () => E(n)
+        };
+      });
     }
-    const e = k.trim().toLowerCase(), n = g.filter((t) => (y(t)?.source ?? "other") === a).filter((t) => !e || B(t).toLowerCase().includes(e)).map((t) => ({
+    const e = v.trim().toLowerCase(), r = b.filter((t) => (y(t)?.source ?? "other") === a).filter((t) => !e || L(t).toLowerCase().includes(e)).map((t) => ({
       id: String(t.id),
-      label: B(t),
+      label: L(t),
       drillsIn: !1,
-      onActivate: () => A(t)
-    })), d = O.get(a);
-    if (d) {
-      const t = a in H;
-      n.push({
+      onActivate: () => R(t)
+    })), f = O.get(a);
+    if (f) {
+      const t = a in ee;
+      r.push({
         id: `create:${a}`,
-        label: d.label,
+        label: f.label,
         drillsIn: !1,
         isCreate: !t,
         onActivate: () => {
-          E?.(), d.onSelect();
+          I?.(), f.onSelect();
         }
       });
     }
-    return n;
+    return r;
   }, [
-    l,
-    C,
+    c,
+    $,
     a,
-    k,
-    g,
-    S,
+    v,
+    b,
+    C,
     _,
-    A,
-    E,
-    x,
-    f,
+    R,
+    I,
+    k,
+    h,
     O
   ]);
-  T(() => h(0), [l, a, k, i]), T(() => D(""), [l, a]);
-  const M = X({ rows: c, activeIndex: I, header: s });
-  M.current = { rows: c, activeIndex: I, header: s }, T(() => {
+  P(() => g(0), [c, a, v, i]), P(() => M(""), [c, a]);
+  const N = Y({ rows: s, activeIndex: S, header: d });
+  N.current = { rows: s, activeIndex: S, header: d }, P(() => {
     if (w)
       return w((e) => {
-        const { rows: n, activeIndex: d, header: t } = M.current;
+        const { rows: r, activeIndex: f, header: t } = N.current;
         switch (e.key) {
           case "ArrowDown":
-            return n.length && h((r) => (r + 1) % n.length), !0;
+            return r.length && g((n) => (n + 1) % r.length), !0;
           case "ArrowUp":
-            return n.length && h((r) => (r + n.length - 1) % n.length), !0;
+            return r.length && g((n) => (n + r.length - 1) % r.length), !0;
           case "ArrowRight":
           case "Enter":
-            return n[d]?.onActivate(), !0;
+            return r[f]?.onActivate(), !0;
           case "ArrowLeft":
             return t?.onBack ? (t.onBack(), !0) : !1;
           default:
@@ -148,38 +160,38 @@ const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_cre
         }
       }), () => w(null);
   }, [w]);
-  const G = l ? c.length && !c[0].drillsIn ? "items" : "sources" : "categories", q = l === "tool" && !!a || l === "subagent";
-  return /* @__PURE__ */ m(te, { className: `bik-mention-picker bik-mention-picker--${G}`, children: [
-    s && /* @__PURE__ */ m(
-      le,
+  const q = c ? s.length && !s[0].drillsIn ? "items" : "sources" : "categories", J = c === "tool" && !!a || c === "subagent";
+  return /* @__PURE__ */ m(ne, { className: `bik-mention-picker bik-mention-picker--${q}`, children: [
+    d && /* @__PURE__ */ m(
+      se,
       {
         type: "button",
-        onClick: s.onBack,
-        disabled: !s.onBack,
+        onClick: d.onBack,
+        disabled: !d.onBack,
         style: {
           background: o.surface.subdued,
-          cursor: s.onBack ? "pointer" : "default"
+          cursor: d.onBack ? "pointer" : "default"
         },
         children: [
-          s.onBack && /* @__PURE__ */ u(
-            W,
+          d.onBack && /* @__PURE__ */ u(
+            X,
             {
               width: 20,
               height: 20,
               color: o.content.primary
             }
           ),
-          s.icon && U(s.icon),
-          /* @__PURE__ */ m(Y, { children: [
+          d.icon && j(d.icon),
+          /* @__PURE__ */ m(Z, { children: [
             " ",
-            s.title
+            d.title
           ] })
         ]
       }
     ),
-    q && /* @__PURE__ */ m(ne, { children: [
+    J && /* @__PURE__ */ m(re, { children: [
       /* @__PURE__ */ u(
-        V,
+        W,
         {
           width: 20,
           height: 20,
@@ -187,38 +199,38 @@ const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_cre
         }
       ),
       /* @__PURE__ */ u(
-        re,
+        oe,
         {
           autoFocus: !0,
-          value: k,
+          value: v,
           placeholder: "Search",
           "data-test": "mention-picker-search",
-          onChange: (e) => D(e.target.value),
+          onChange: (e) => M(e.target.value),
           onKeyDown: (e) => {
-            c.length && (e.key === "ArrowDown" ? (e.preventDefault(), h((n) => (n + 1) % c.length)) : e.key === "ArrowUp" ? (e.preventDefault(), h((n) => (n + c.length - 1) % c.length)) : e.key === "Enter" && (e.preventDefault(), c[I]?.onActivate()));
+            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[S]?.onActivate()));
           }
         }
       )
     ] }),
-    c.length === 0 ? /* @__PURE__ */ u(ce, { children: l === "subagent" ? "No sub-agents available" : "No tools available" }) : c.map((e, n) => /* @__PURE__ */ u(
-      oe,
+    s.length === 0 ? /* @__PURE__ */ u(de, { children: c === "subagent" ? "No sub-agents available" : "No tools available" }) : s.map((e, r) => /* @__PURE__ */ u(
+      ie,
       {
         type: "button",
-        $active: n === I,
-        onMouseEnter: () => h(n),
+        $active: r === S,
+        onMouseEnter: () => g(r),
         onClick: e.onActivate,
-        children: e.isCreate ? /* @__PURE__ */ u(ae, { children: e.label }) : /* @__PURE__ */ m(J, { children: [
-          /* @__PURE__ */ m(ie, { children: [
-            U(e.icon),
-            /* @__PURE__ */ u(Z, { color: o.content.primary, children: e.label })
+        children: e.isCreate ? /* @__PURE__ */ u(ce, { children: e.label }) : /* @__PURE__ */ m(Q, { children: [
+          /* @__PURE__ */ m(ae, { children: [
+            j(e.icon),
+            /* @__PURE__ */ u(K, { color: o.content.primary, children: e.label })
           ] }),
-          e.drillsIn && /* @__PURE__ */ u(Q, { width: 12, height: 12 })
+          e.rightLabel ? /* @__PURE__ */ u(le, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ u(V, { width: 12, height: 12 })
         ] })
       },
       e.id
     ))
   ] });
-}, te = p.div`
+}, ne = p.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
@@ -228,13 +240,13 @@ const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_cre
 	border: 1px solid ${o.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, ne = p.div`
+`, re = p.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
 	border-bottom: 1px solid ${o.stroke.primary};
-`, re = p.input`
+`, oe = p.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -247,7 +259,7 @@ const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_cre
 	&::placeholder {
 		color: ${o.content.placeholder};
 	}
-`, oe = p.button`
+`, ie = p.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -264,19 +276,26 @@ const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_cre
 	&:hover {
 		background: ${o.surface.subdued};
 	}
-`, ie = p.div`
+`, ae = p.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, ae = p.div`
+`, le = p.span`
+	flex-shrink: 0;
+	color: ${o.content.brand};
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 600;
+	white-space: nowrap;
+`, ce = p.div`
 	width: 100%;
 	text-align: center;
 	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, le = p.button`
+`, se = p.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
@@ -289,13 +308,13 @@ const y = (i) => i.meta, B = (i) => y(i)?.plainLabel ?? i.label, ee = "__bik_cre
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`, ce = p.div`
+`, de = p.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
 	color: ${o.content.secondary};
 `;
 export {
-  ve as MentionPicker
+  we as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map