@bikdotai/bik-component-library 0.0.832-beta.0 → 0.0.832-beta.2

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

package/dist/esm/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 { CATEGORIES, CONFIG_TOOL_SOURCES } from '../constants/tools';\nimport type { Category, ToolAction } from '../constants/tools';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon, SourceIcon } from '../utils/sourceIcons';\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\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the Tools view.\n\t * Picking one opens its config drawer (via `onSelect`) and dismisses the picker\n\t * — it never inserts a mention into the text.\n\t */\n\ttoolActions?: ToolAction[];\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\ttoolActions,\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\t// The built-in \"create\" action per source (Rest API / email / Slack). A source\n\t// with an action drills into [its instances + a \"Create new\" row] — like the\n\t// Sub-agent category — instead of showing a duplicate flat \"create\" row.\n\tconst actionBySource = useMemo(\n\t\t() =>\n\t\t\tnew Map<string, ToolAction>(\n\t\t\t\t(toolActions ?? []).map((a) => [a.source, a]),\n\t\t\t),\n\t\t[toolActions],\n\t);\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 || (toolActions?.length ?? 0) > 0\n\t\t\t\t\t: subAgents.length > 0 || !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent, toolActions?.length],\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. `onBack` is omitted at a root level (a\n\t// sole category has nowhere to go back to) — the header then shows as a plain\n\t// title. When `onBack` is set the header leads with a back arrow, followed by\n\t// the source icon in a source detail view: `[← back][icon][title]`.\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? // Always titled — with a back arrow only when the category chooser is above.\n\t\t  {\n\t\t\t\ttitle: 'Sub-agent',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  }\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: sourceIcon(source),\n\t\t  }\n\t\t: // Always titled — matches the Sub-agent header; back arrow only when the\n\t\t  // category chooser is above (i.e. not the sole category).\n\t\t  {\n\t\t\t\ttitle: 'Tools',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  };\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 sq = search.trim().toLowerCase();\n\t\t\tconst leaves: PickerRowModel[] = subAgents\n\t\t\t\t.filter((item) => !sq || rowLabel(item).toLowerCase().includes(sq))\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tid: String(item.id),\n\t\t\t\t\tlabel: rowLabel(item),\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tonActivate: () => onSelect(item),\n\t\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\t// One drill-in row per source: the real sources (from instances) plus any\n\t\t\t// action source (Rest API / email / Slack) with no instances yet, so it\n\t\t\t// still appears for first-time creation. Deduped — no more twin rows.\n\t\t\tconst actionOnly = (toolActions ?? [])\n\t\t\t\t.map((a) => a.source)\n\t\t\t\t.filter((s) => !sources.includes(s));\n\t\t\treturn [...sources, ...actionOnly].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: sourceIcon(s) ?? actionBySource.get(s)?.icon,\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\tconst leaves: PickerRowModel[] = 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\t// A configurable source's add row, below any existing instances, opening\n\t\t// its drawer. Config tools (Slack / email) are a single fixed capability →\n\t\t// render like a normal tool leaf (label only, no icon — matching the tool\n\t\t// rows). Rest API instances are user-created, so its \"add\" stays a\n\t\t// brand-coloured create row.\n\t\tconst action = actionBySource.get(source);\n\t\tif (action) {\n\t\t\tconst isConfigTool = source in CONFIG_TOOL_SOURCES;\n\t\t\tleaves.push({\n\t\t\t\tid: `create:${source}`,\n\t\t\t\tlabel: action.label,\n\t\t\t\tdrillsIn: false,\n\t\t\t\tisCreate: !isConfigTool,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tonClose?.();\n\t\t\t\t\taction.onSelect();\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t\treturn leaves;\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\ttoolActions,\n\t\tactionBySource,\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?.onBack) {\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) and in the\n\t// sub-agent list.\n\tconst showSearch =\n\t\t(activeCategory === 'tool' && !!source) || activeCategory === 'subagent';\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\tdisabled={!header.onBack}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: COLORS.surface.subdued,\n\t\t\t\t\t\tcursor: header.onBack ? 'pointer' : 'default',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{header.onBack && (\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{header.icon && renderSourceIcon(header.icon)}\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: 301px;\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":["metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","toolActions","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","actionBySource","a","availableCategories","CATEGORIES","c","soleCategory","activeCategory","header","toolSourceLabel","sourceIcon","rows","sq","leaves","actionOnly","q","action","isConfigTool","CONFIG_TOOL_SOURCES","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","jsx","SvgArrowLeft","renderSourceIcon","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","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\tCATEGORIES,\n\tCONFIG_TOOL_SOURCES,\n\ttoolSourceRank,\n} from '../constants/tools';\nimport type { Category, ToolAction } from '../constants/tools';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon, SourceIcon } from '../utils/sourceIcons';\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\t/**\n\t * Brand-coloured right-aligned action text (e.g. \"Connect\") shown in place of\n\t * the drill-in chevron — used for an unconnected integration source.\n\t */\n\trightLabel?: string;\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\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the Tools view.\n\t * Picking one opens its config drawer (via `onSelect`) and dismisses the picker\n\t * — it never inserts a mention into the text.\n\t */\n\ttoolActions?: ToolAction[];\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\ttoolActions,\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\t// The built-in \"create\" action per source (Rest API / email / Slack). A source\n\t// with an action drills into [its instances + a \"Create new\" row] — like the\n\t// Sub-agent category — instead of showing a duplicate flat \"create\" row.\n\tconst actionBySource = useMemo(\n\t\t() =>\n\t\t\tnew Map<string, ToolAction>(\n\t\t\t\t(toolActions ?? []).map((a) => [a.source, a]),\n\t\t\t),\n\t\t[toolActions],\n\t);\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 || (toolActions?.length ?? 0) > 0\n\t\t\t\t\t: subAgents.length > 0 || !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent, toolActions?.length],\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. `onBack` is omitted at a root level (a\n\t// sole category has nowhere to go back to) — the header then shows as a plain\n\t// title. When `onBack` is set the header leads with a back arrow, followed by\n\t// the source icon in a source detail view: `[← back][icon][title]`.\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? // Always titled — with a back arrow only when the category chooser is above.\n\t\t  {\n\t\t\t\ttitle: 'Sub-agent',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  }\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: sourceIcon(source),\n\t\t  }\n\t\t: // Always titled — matches the Sub-agent header; back arrow only when the\n\t\t  // category chooser is above (i.e. not the sole category).\n\t\t  {\n\t\t\t\ttitle: 'Tools',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  };\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 sq = search.trim().toLowerCase();\n\t\t\tconst leaves: PickerRowModel[] = subAgents\n\t\t\t\t.filter((item) => !sq || rowLabel(item).toLowerCase().includes(sq))\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tid: String(item.id),\n\t\t\t\t\tlabel: rowLabel(item),\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tonActivate: () => onSelect(item),\n\t\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\t// One drill-in row per source: the real sources (from instances) plus any\n\t\t\t// action source (Rest API / email / Slack) with no instances yet, so it\n\t\t\t// still appears for first-time creation. Deduped — no more twin rows.\n\t\t\tconst actionOnly = (toolActions ?? [])\n\t\t\t\t.map((a) => a.source)\n\t\t\t\t.filter((s) => !sources.includes(s));\n\t\t\t// Fixed source order (manifest → shopify → rest_api → email → slack →\n\t\t\t// rest) so adding/updating a tool never reshuffles the picker rows.\n\t\t\treturn [...sources, ...actionOnly]\n\t\t\t\t.sort((a, b) => toolSourceRank(a) - toolSourceRank(b))\n\t\t\t\t.map((s) => {\n\t\t\t\t\tconst action = actionBySource.get(s);\n\t\t\t\t\t// Integration not connected → a \"Connect\" row (no drill-in / no\n\t\t\t\t\t// instances / no \"Create new\"); clicking dismisses the picker and\n\t\t\t\t\t// runs the consumer's connect flow.\n\t\t\t\t\tif (action?.connected === false) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: s,\n\t\t\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\t\ticon: sourceIcon(s) ?? action.icon,\n\t\t\t\t\t\t\trightLabel: 'Connect',\n\t\t\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\t\taction.onConnect?.();\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\treturn {\n\t\t\t\t\t\tid: s,\n\t\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\t\tdrillsIn: true,\n\t\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\t\tonActivate: () => setSource(s),\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\tconst leaves: PickerRowModel[] = 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\t// A configurable source's add row, below any existing instances, opening\n\t\t// its drawer. Config tools (Slack / email) are a single fixed capability →\n\t\t// render like a normal tool leaf (label only, no icon — matching the tool\n\t\t// rows). Rest API instances are user-created, so its \"add\" stays a\n\t\t// brand-coloured create row.\n\t\tconst action = actionBySource.get(source);\n\t\tif (action) {\n\t\t\tconst isConfigTool = source in CONFIG_TOOL_SOURCES;\n\t\t\tleaves.push({\n\t\t\t\tid: `create:${source}`,\n\t\t\t\tlabel: action.label,\n\t\t\t\tdrillsIn: false,\n\t\t\t\tisCreate: !isConfigTool,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tonClose?.();\n\t\t\t\t\taction.onSelect();\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t\treturn leaves;\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\ttoolActions,\n\t\tactionBySource,\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?.onBack) {\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) and in the\n\t// sub-agent list.\n\tconst showSearch =\n\t\t(activeCategory === 'tool' && !!source) || activeCategory === 'subagent';\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\tdisabled={!header.onBack}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: COLORS.surface.subdued,\n\t\t\t\t\t\tcursor: header.onBack ? 'pointer' : 'default',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{header.onBack && (\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{header.icon && renderSourceIcon(header.icon)}\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.rightLabel ? (\n\t\t\t\t\t\t\t\t\t<RightActionText>{row.rightLabel}</RightActionText>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\trow.drillsIn && <ChevronRight width={12} height={12} />\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</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: 301px;\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// Right-aligned brand action text (e.g. \"Connect\") in place of the chevron.\nconst RightActionText = styled.span`\n\tflex-shrink: 0;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\twhite-space: nowrap;\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":["metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","toolActions","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","actionBySource","a","availableCategories","CATEGORIES","c","soleCategory","activeCategory","header","toolSourceLabel","sourceIcon","rows","sq","leaves","actionOnly","b","toolSourceRank","action","q","isConfigTool","CONFIG_TOOL_SOURCES","useEffect","navRef","useRef","event","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","jsx","SvgArrowLeft","renderSourceIcon","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","RightActionText","ChevronRight","styled"],"mappings":"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"}

package/dist/esm/components/agent-builder/constants/tools.d.ts

@@ -1,5 +1,4 @@
 import { FunctionComponent, SVGAttributes } from 'react';
-import { ConfigToolKey } from '../AgentBuilder.model';
 /**
  * Static tool-related constants for the builder's Step 3 (tools & sub-agents):
  * the reference-picker category tabs and the per-source display labels. Kept here
@@ -67,9 +66,34 @@ export interface ToolAction {
     icon?: SourceIcon;
     /** Open this tool's config drawer. */
     onSelect: () => void;
+    /**
+     * Integration connection state for this source. `undefined` = no connection
+     * gating (default). `false` = the store hasn't connected this integration →
+     * the `@` picker shows a "Connect" row that calls {@link onConnect} instead of
+     * drilling in / offering "Create new". `true` = connected (renders normally).
+     * Set by the consumer via `config.integrationStatus` (today: Slack only).
+     */
+    connected?: boolean;
+    /** Open the parent's connect flow for this source (used when `connected === false`). */
+    onConnect?: () => void;
 }
 /** Sources of the built-in drawer tools, in display order. */
 export declare const TOOL_ACTION_SOURCES: ToolSource[];
+/**
+ * Fixed display rank for the `@`-picker's tool-source groups (lower = higher). The
+ * picker sorts its source rows by this so adding/updating a tool never reshuffles
+ * them. Any source not listed here (dynamic/unknown, e.g. Integration) sorts AFTER
+ * Slack, keeping its discovery order among the rest (Array.sort is stable).
+ */
+export declare const TOOL_SOURCE_RANK: Partial<Record<ToolSource, number>>;
+/** Sort rank for a source string; unknown sources rank after all known ones. */
+export declare const toolSourceRank: (source: string) => number;
+/**
+ * `tool_key` of a configurable shared-drawer tool (email / Slack). Lives here (not
+ * in AgentBuilder.model) so this leaf constants file has no back-edge to the model
+ * — the dependency stays one-way (model → constants), avoiding a circular import.
+ */
+export type ConfigToolKey = 'send_email' | 'send_slack_message';
 /**
  * Drawer sources rendered by the shared dynamic panel (`ConfigToolPanel`), each
  * mapped to its backend `tool_key`. Rest API is absent — it has a bespoke panel.

package/dist/esm/components/agent-builder/constants/tools.js

@@ -1,34 +1,42 @@
-const s = [
+const t = [
   { key: "tool", label: "Tools" },
   { key: "subagent", label: "Sub-agent" }
 ];
-var e = /* @__PURE__ */ ((a) => (a.Manifest = "manifest", a.Shopify = "shopify", a.Integration = "integration", a.RestApi = "rest_api", a.EmailHandover = "email_handover", a.Slack = "slack", a))(e || {});
-const n = {
+var s = /* @__PURE__ */ ((a) => (a.Manifest = "manifest", a.Shopify = "shopify", a.Integration = "integration", a.RestApi = "rest_api", a.EmailHandover = "email_handover", a.Slack = "slack", a))(s || {});
+const i = {
   manifest: "Manifest",
   shopify: "Shopify",
   integration: "Integration",
   rest_api: "Rest API",
   email_handover: "Email",
   slack: "Slack"
-}, t = {
+}, _ = {
   rest_api: "REST API",
   email_handover: "Handover to email",
   slack: "Send Slack message"
-}, i = [
+}, l = [
   "rest_api",
   "email_handover",
   "slack"
   /* Slack */
-], _ = {
+], e = {
+  manifest: 0,
+  shopify: 1,
+  rest_api: 2,
+  email_handover: 3,
+  slack: 4
+}, n = Object.keys(e).length, O = (a) => e[a] ?? n, o = {
   email_handover: "send_email",
   slack: "send_slack_message"
 };
 export {
-  s as CATEGORIES,
-  _ as CONFIG_TOOL_SOURCES,
-  t as TOOL_ACTION_LABELS,
-  i as TOOL_ACTION_SOURCES,
-  n as TOOL_SOURCE_LABELS,
-  e as ToolSource
+  t as CATEGORIES,
+  o as CONFIG_TOOL_SOURCES,
+  _ as TOOL_ACTION_LABELS,
+  l as TOOL_ACTION_SOURCES,
+  i as TOOL_SOURCE_LABELS,
+  e as TOOL_SOURCE_RANK,
+  s as ToolSource,
+  O as toolSourceRank
 };
 //# sourceMappingURL=tools.js.map