@bikdotai/bik-component-library 0.0.839-beta.7 → 0.0.840-beta.0

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

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as d } from "react/jsx-runtime";
-import { useRef as L, useState as j, useCallback as w, useEffect as p, useMemo as F } from "react";
+import { useRef as B, useState as j, useCallback as w, useEffect as p, useMemo as F } from "react";
 import { TitleSmall as N, BodyCaption as _ } from "../../TypographyStyle.js";
 import { COLORS as h } from "../../../constants/Theme.js";
 import { FieldBlock as G, FieldLabelRow as J, AiTextAreaShell as P } from "../AgentBuilder.styled.js";
@@ -13,11 +13,11 @@ const nt = ({
   onChange: g,
   maxLength: a,
   placeholder: C,
-  minHeight: x = "200px",
+  minHeight: T = "200px",
   resetKey: l,
   mentionItems: n,
-  tools: T,
-  onMentionSelect: b,
+  tools: b,
+  onMentionSelect: x,
   onFocus: E,
   registerInsert: r,
   onCreateSubAgent: k,
@@ -25,31 +25,31 @@ const nt = ({
   action: O,
   ...R
 }) => {
-  const c = L(null), [D, s] = j(e.length), m = w(
-    (t, o, y) => {
+  const c = B(null), [D, m] = j(e.length), s = w(
+    (t, o, M) => {
       const f = c.current;
       if (!f)
         return;
-      const A = n.find(
+      const y = n.find(
         (u) => String(u.id) === String(o) && u.meta?.kind === t
-      ), B = y ?? A?.label ?? o;
+      ), A = M ?? y?.label ?? o;
       f.insertInlineContent(
-        `${$(String(o), B, t)} `
+        `${$(String(o), A, t)} `
       );
     },
     [n]
   );
   p(() => {
     if (r)
-      return r(m), () => r(null);
-  }, [r, m]);
-  const M = F(
+      return r(s), () => r(null);
+  }, [r, s]);
+  const L = F(
     () => q(e, n),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [l]
   );
   return p(
-    () => s(e.length),
+    () => m(e.length),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [l]
   ), /* @__PURE__ */ i(G, { children: [
@@ -61,14 +61,14 @@ const nt = ({
         a
       ] })
     ] }),
-    /* @__PURE__ */ i(P, { minHeight: x, "data-test": R["data-test"], children: [
+    /* @__PURE__ */ i(P, { minHeight: T, "data-test": R["data-test"], children: [
       /* @__PURE__ */ d(
         U,
         {
           ref: c,
-          initialContent: M,
+          initialContent: L,
           placeholder: C,
-          maxCharacters: a,
+          characterLimit: a,
           minHeight: "120px",
           maxHeight: "320px",
           style: { border: "none" },
@@ -87,13 +87,13 @@ const nt = ({
             ),
             onSelect: (t) => {
               const o = t.meta?.kind;
-              o && b?.(o, String(t.id));
+              o && x?.(o, String(t.id));
             }
           },
           onChange: (t) => {
-            s(t.characterCount);
+            m(t.characterCount);
             const o = c.current?.getJSON() ?? null;
-            g(z(o, T));
+            g(z(o, b));
           }
         },
         l

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

@@ -1 +1 @@
-{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport type { ToolAction } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\tonCreateSubAgent,\n\ttoolActions,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxCharacters={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\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\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}
+{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport type { ToolAction } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\tonCreateSubAgent,\n\ttoolActions,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t// Soft limit: blocks typing past the cap but lets a paste through\n\t\t\t\t\t// (overflow rendered grey) instead of rejecting the whole paste.\n\t\t\t\t\tcharacterLimit={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\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\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}

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

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