@k2b/ui 0.28.0 → 0.30.0

package/dist/browser/chat/ChatComposer.js

@@ -25,41 +25,43 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _tmpl$0 = /*#__PURE__*/_$template(`<textarea class=k2b-chat-composer__measure rows=1 tabindex=-1 aria-hidden=true readonly>`),
   _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__input role=group><!$><!/><textarea rows=1></textarea><!$><!/>`),
   _tmpl$10 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__command-detail><small></small><small><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><!$><!/>`),
   _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__command-end><i class="ti ti-check"aria-hidden=true></i><span class=k2b-sr-only>`),
   _tmpl$13 = /*#__PURE__*/_$template(`<button class=k2b-chat-composer__command type=button role=option tabindex=-1><i aria-hidden=true></i><span class=k2b-chat-composer__command-text><strong></strong><!$><!/></span><!$><!/>`),
   _tmpl$14 = /*#__PURE__*/_$template(`<b>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div role=status>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/></section><div class=k2b-sr-only role=status aria-live=polite></div><div class=k2b-chat-composer__status role=status><!$><!/><!$><!/>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
-import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+  _tmpl$15 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<label class=k2b-chat-composer__command-search><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox aria-autocomplete=list aria-expanded=true autocomplete=off autocapitalize=off>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div role=status>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><!$><!/><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/></section><div class=k2b-sr-only role=status aria-live=polite></div><div class=k2b-chat-composer__status role=status><!$><!/><!$><!/>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
+import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { dialogHistorySettled, holdDialogHistory } from "../feedback/dialog-core";
 import { Tooltip } from "../feedback/Tooltip";
@@ -85,7 +87,17 @@ const emojiSuggestionLimit = 8;
 // Keep editor undo text within approximately 2 MiB, plus the current edit.
 const composerUndoBudgetChars = 1_000_000;
 
-/** An action can cancel and restore its token, or report a short completion message. */
+/**
+ * An action can cancel and restore its token, report a short completion message, or hand back a reference chosen in a
+ * dialog: `mention` takes the token's place exactly as a `mention` row does, and Ctrl/⌘+Z brings the token back.
+ */
+
+/** The draft as a successful `open` leaves it: without the `/…` token, with its references moved along. Save this one. */
+
+/**
+ * How an `open` row ends: on success (`void`) the token leaves as for an action; `"cancelled"` changes nothing; `failed`
+ * keeps the list open and the draft unchanged, and its text replaces the row's description until the row runs again.
+ */
 
 /** A fixed place in the slash list. Sections keep the given order, also while searching. */
 
@@ -175,6 +187,17 @@ export function ChatComposer(props) {
     return `${commandListId}-c${commandIds.get(key)}`;
   };
   const [closedAt, setClosedAt] = createSignal();
+  /** The list opened from "+": the field's selection when "+" was pressed, and the search field's text. */
+  const [addSearch, setAddSearch] = createSignal();
+  const [addQuery, setAddQuery] = createSignal("");
+  let addSearchRef;
+  let addButtonRef;
+  let addComposing = false;
+  /** The `open` row running now, and why `open` rows failed in this opening, by row key. */
+  const [openingRow, setOpeningRow] = createSignal();
+  const [openFailures, setOpenFailures] = createSignal({});
+  /** Cancels the `open` row running now; `key` follows announced draft moves, `label` is its busy line. */
+  let openingRun;
   // Where the pending native edit starts; a selection replaced as a whole starts at its beginning.
   let inputStart;
   let inputEnd;
@@ -279,7 +302,17 @@ export function ChatComposer(props) {
     return token && index ? suggestEmoji(index, token.query, emojiSuggestionLimit) : [];
   });
   const emojiOpen = () => emojiMatches().length > 0;
-  const caretCommandToken = createMemo(() => chatCommandQuery(props.value, caret(), selectionEnd()));
+  // From "+", the search field's text is the query of an empty token at the field's stored caret.
+  const caretCommandToken = createMemo(() => {
+    const search = addSearch();
+    if (!search) return chatCommandQuery(props.value, caret(), selectionEnd());
+    const at = Math.min(search.end, props.value.length);
+    return {
+      start: at,
+      end: at,
+      query: addQuery()
+    };
+  });
   const caretCommandStart = createMemo(() => caretCommandToken()?.start);
   // Retained server rows belong to one `/`: they go when it does or when another `/` starts.
   createEffect(() => {
@@ -294,6 +327,7 @@ export function ChatComposer(props) {
   });
   const commandQuery = createMemo(() => {
     const token = caretCommandToken();
+    if (addSearch()) return token;
     return dismissed() || composing() || token?.start === closedAt() ? null : token;
   });
   const openingStart = createMemo(() => commandQuery()?.start);
@@ -302,14 +336,44 @@ export function ChatComposer(props) {
     const start = openingStart();
     if (start !== undefined) setCommandOpening(opening => opening + 1);
   });
+  // A failed `open` row says so for the rest of its list opening.
+  createEffect(() => {
+    props.draftKey;
+    commandOpening();
+    setOpenFailures({});
+  });
   const parsedCommandQuery = createMemo(() => parseChatCommandQuery(commandQuery()?.query ?? "", props.commandScopes ?? []));
+  const commandFallbackRow = createMemo(() => {
+    const parsed = parsedCommandQuery();
+    const query = parsed.query.trim();
+    return commandQuery() && (query || parsed.scope) ? props.commandFallback?.({
+      query,
+      scope: parsed.scope?.id
+    }) : undefined;
+  });
   const currentCommandScope = createMemo(() => parsedCommandQuery().scope?.id);
   createEffect(() => {
     currentCommandScope();
     setSearchResults([]);
     setSearchResultsQuery(undefined);
   });
-  const localCommands = createMemo(() => props.commands ?? []);
+  // Rows of a `fixedWhileOpen` section are the ones it had when this `/` opened the list; later ones wait for the next
+  // `/`. A retry row starts another opening in the same open list, so it does not count.
+  const fixedCommandKeys = createMemo(() => {
+    props.draftKey;
+    if (openingStart() === undefined) return undefined;
+    return untrack(() => {
+      const fixed = new Set((props.commandSections ?? []).filter(section => section.fixedWhileOpen).map(section => section.id));
+      return fixed.size ? new Set((props.commands ?? []).filter(command => fixed.has(command.section ?? "")).map(chatCommandKey)) : undefined;
+    });
+  });
+  const localCommands = createMemo(() => {
+    const commands = props.commands ?? [];
+    const keys = fixedCommandKeys();
+    if (!keys) return commands;
+    const fixed = new Set((props.commandSections ?? []).filter(section => section.fixedWhileOpen).map(section => section.id));
+    return commands.filter(command => !fixed.has(command.section ?? "") || keys.has(chatCommandKey(command)));
+  });
   const commandModel = createMemo(() => chatCommandListModel({
     query: commandQuery()?.query ?? "",
     scopes: props.commandScopes,
@@ -318,9 +382,12 @@ export function ChatComposer(props) {
     searchResults: searchResultsScope() === parsedCommandQuery().scope?.id ? searchResults() : [],
     searchResultsFresh: searchResultsQuery() === commandQuery()?.query && searchResultsScope() === parsedCommandQuery().scope?.id,
     searchSettled: searchResultsQuery() !== undefined && searchResultsScope() === parsedCommandQuery().scope?.id,
-    searching: searching()
+    searching: searching(),
+    fallback: commandFallbackRow()
   }));
   const commandMatches = createMemo(() => commandQuery() ? commandModel().rows.map(row => row.command) : []);
+  /** Rows that matched; an unscoped fallback row only follows them. */
+  const foundCommandCount = () => commandMatches().length - (commandModel().fallback ? 1 : 0);
   const currentCommandQuery = createMemo(() => caretCommandToken()?.query);
   // Arrow marking belongs to one token in one draft; another draft or `/` starts at the top row again.
   createEffect(() => {
@@ -329,13 +396,87 @@ export function ChatComposer(props) {
     currentCommandQuery();
     setCommandMoved(false);
   });
-  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands));
-  const commandSheetHeld = createMemo(() => commandsOpen() && isTouchOnly());
+  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands || commandFallbackRow()));
+  // Rows that arrive for a pending section never move a visible row of the overview: until the person types, the list
+  // keeps the height it had with its placeholders and scrolls what does not fit. A list below its maximum height grows
+  // upward from the field, so a change of height alone would move its first row. While searching, the rows arrive
+  // with the search's own answer, which changes the list anyway.
+  // From "+", the whole panel keeps the height it opened with instead.
+  const commandsPending = createMemo(() => commandsOpen() && !addSearch() && !parsedCommandQuery().scope && !parsedCommandQuery().query.trim() && commandModel().groups.some(group => group.pendingRows > 0));
+  // Typing, another opening or closing the list lets it size itself again.
+  const commandListSizeKey = createMemo(() => commandsOpen() ? `${commandOpening()}\u0000${caretCommandToken()?.query}` : undefined);
+  // The list's height with its placeholders, for the size key it was measured under.
+  let pendingList;
+  createEffect(() => {
+    const list = commandListRef;
+    if (!commandsPending() || !list || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      pendingList = {
+        height: list.getBoundingClientRect().height,
+        key: untrack(commandListSizeKey)
+      };
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(list);
+    onCleanup(() => observer.disconnect());
+  });
+  createEffect(on(commandsPending, (pending, wasPending) => {
+    const held = pendingList;
+    pendingList = undefined;
+    // Only rows arriving hold the list; the person's typing or closing it does not.
+    if (pending || !wasPending || !held || held.key !== commandListSizeKey() || !commandListRef?.isConnected) return;
+    commandListRef.style.height = `${held.height}px`;
+    commandListRef.setAttribute("data-held", "");
+  }));
+  createEffect(on(commandListSizeKey, () => {
+    commandListRef?.style.removeProperty("height");
+    commandListRef?.removeAttribute("data-held");
+  }, {
+    defer: true
+  }));
+  // Escape, a press outside, or moving the caret away closes the list; while an `open` row runs, that cancels it, so
+  // nothing opens after the person backed out. Success ends the opening and closes the list in one step. A new draft
+  // cancels too, unless the opener announced that next move with `follow()`: its busy line moves to the status line,
+  // and Escape still cancels there. Any later unannounced draft change cancels.
+  createEffect(() => {
+    const draftKey = props.draftKey;
+    const open = commandsOpen();
+    const row = openingRow();
+    const run = openingRun;
+    if (!run || row === undefined) return;
+    if (draftKey !== run.key) {
+      if (run.follow) {
+        run.follow = false;
+        run.key = draftKey;
+        run.moved = true;
+        showCommandStatus({
+          tone: "busy",
+          text: run.label
+        });
+      } else run.controller.abort();
+      return;
+    }
+    if (!open && !run.moved) run.controller.abort();
+  });
+  onCleanup(() => openingRun?.controller.abort());
+  // An `open` row gives the sheet's Back entry up first, so it never races the navigation it starts.
+  const commandSheetHeld = createMemo(() => commandsOpen() && isTouchOnly() && openingRow() === undefined);
   createEffect(() => {
     if (!commandSheetHeld()) return;
-    onCleanup(holdDialogHistory(() => setClosedAt(commandQuery()?.start)));
+    onCleanup(holdDialogHistory(() => closeCommandList()));
   });
   const suggestionsOpen = () => commandsOpen() || emojiOpen();
+  const fieldOwnsList = () => suggestionsOpen() && !addSearch();
+  // From "+", the panel keeps the height it opened with while the person types or rows arrive, so neither the search
+  // field nor the first row moves; what does not fit scrolls. The space above the field still bounds it.
+  const addPanelOpen = createMemo(() => addSearch() !== undefined && commandsOpen());
+  createEffect(() => {
+    const accessory = addPanelOpen() ? commandListRef?.parentElement : undefined;
+    if (!accessory) return;
+    const frame = requestAnimationFrame(() => accessory.style.setProperty("--k2b-chat-command-held", `${accessory.getBoundingClientRect().height}px`));
+    onCleanup(() => cancelAnimationFrame(frame));
+  });
   createEffect(() => {
     if (!suggestionsOpen()) return;
     let disposed = false;
@@ -363,10 +504,13 @@ export function ChatComposer(props) {
       const left = Math.max(0, column?.left ?? 0);
       const right = Math.min(page, column?.right ?? page);
       const slot = accessory.parentElement.getBoundingClientRect();
-      const bottom = accessory.getBoundingClientRect().bottom;
-      commandListRef.style.setProperty("--k2b-chat-command-space", `${Math.max(40, bottom - top - 8)}px`);
+      // From its place in the slot, not its box: the sheet opened from "+" rises into place, and a box measured during
+      // that animation would include its offset.
+      const bottom = slot.bottom - (Number.parseFloat(window.getComputedStyle(accessory).bottom) || 0);
+      // On the accessory, so a panel opened from "+" is bounded as a whole, with its search field.
+      accessory.style.setProperty("--k2b-chat-command-space", `${Math.max(40, bottom - top - 8)}px`);
       // Only a list that reaches the screen's top edge keeps clear of a notch or the status bar.
-      commandListRef.style.setProperty("--k2b-chat-command-safe-top", top === viewportTop ? "env(safe-area-inset-top, 0px)" : "0px");
+      accessory.style.setProperty("--k2b-chat-command-safe-top", top === viewportTop ? "env(safe-area-inset-top, 0px)" : "0px");
       accessory.style.setProperty("--k2b-chat-command-reach-left", `${Math.max(0, slot.left - left)}px`);
       accessory.style.setProperty("--k2b-chat-command-reach-right", `${Math.max(0, right - slot.right)}px`);
     };
@@ -384,11 +528,29 @@ export function ChatComposer(props) {
   // A press outside the command list and the field closes the list, as Escape does; the text stays. With a mouse or a
   // trackpad the press then acts as usual. On a touch-only device a tap outside the composer closes only the list: it
   // reaches nothing beneath, and the field keeps focus, so the keyboard stays open.
+  // A list opened from "+" is a menu: any press outside it closes only the list, with every pointer, and the field gets
+  // its focus back. "+" itself toggles with its click; a press in the field closes the list and lands there as usual.
   createEffect(() => {
     if (!commandsOpen()) return;
     const onPointerDown = event => {
       const target = event.target;
-      if (!(target instanceof Node) || commandListRef?.contains(target) || textareaRef?.parentElement?.contains(target)) return;
+      if (!(target instanceof Node) || commandListRef?.parentElement?.contains(target)) return;
+      if (addSearch()) {
+        if (addButtonRef?.contains(target) && !addButtonRef.disabled) return;
+        if (textareaRef?.parentElement?.contains(target)) {
+          // The field takes the focus before the search field goes, so a phone keeps its keyboard; the press itself
+          // then places the caret.
+          textareaRef.focus({
+            preventScroll: true
+          });
+          endAddSearch(false);
+          return;
+        }
+        swallowTap(event);
+        endAddSearch(true);
+        return;
+      }
+      if (textareaRef?.parentElement?.contains(target)) return;
       setClosedAt(commandQuery()?.start);
       if (isTouchOnly() && !shellRef?.contains(target)) swallowTap(event);
     };
@@ -438,9 +600,10 @@ export function ChatComposer(props) {
     });
   });
   let settledEmpty;
+  // A space after "Nothing found" ends the `/…` as plain text; a search field opened from "+" just keeps its text.
   createEffect(() => {
     const token = commandQuery();
-    if (!token || parsedCommandQuery().scope || searchError()) {
+    if (!token || addSearch() || parsedCommandQuery().scope || searchError()) {
       settledEmpty = undefined;
       return;
     }
@@ -491,6 +654,7 @@ export function ChatComposer(props) {
       history.length = 0;
       historyIndex = -1;
       finishModelSelection(null);
+      endAddSearch(false);
       setDismissed(true);
       setClosedAt(undefined);
       setSearchResults([]);
@@ -539,6 +703,8 @@ export function ChatComposer(props) {
     setDismissed(false);
   };
   const restoreHistory = direction => {
+    // A field that only stays enabled to keep focus, while an `open` row runs, is not edited by undo either.
+    if (editBlocked()) return;
     record();
     const next = history[historyIndex + direction];
     if (!next) return;
@@ -557,6 +723,45 @@ export function ChatComposer(props) {
       setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
     });
   };
+  /** Closes the list opened from "+"; `refocus` gives the field its focus and the selection it had when "+" was pressed. */
+  const endAddSearch = refocus => {
+    const search = addSearch();
+    if (!search) return;
+    addComposing = false;
+    batch(() => {
+      setAddSearch(undefined);
+      setAddQuery("");
+    });
+    if (!refocus || !textareaRef) return;
+    const length = textareaRef.value.length;
+    textareaRef.focus();
+    textareaRef.setSelectionRange(Math.min(search.start, length), Math.min(search.end, length));
+    syncCaret();
+  };
+  /** Escape, Back, a press outside: the list closes and the text stays. */
+  const closeCommandList = (refocus = true) => {
+    if (addSearch()) endAddSearch(refocus);else setClosedAt(commandQuery()?.start);
+  };
+  const toggleAddSearch = () => {
+    if (addSearch()) {
+      endAddSearch(true);
+      return;
+    }
+    if (blocked() || !textareaRef) return;
+    const start = textareaRef.selectionStart;
+    const end = textareaRef.selectionEnd;
+    batch(() => {
+      // Emoji suggestions for a `:shortcode` at the caret give way; they would hold the list closed.
+      setDismissed(true);
+      setAddQuery("");
+      setAddSearch({
+        start,
+        end
+      });
+    });
+    // Within the press, so a phone opens its keyboard for the search field.
+    addSearchRef?.focus();
+  };
   const selectedCommand = createMemo(() => {
     const rows = commandMatches();
     return commandMoved() && rows.find(command => chatCommandKey(command) === activeCommandKey()) || rows[0];
@@ -580,6 +785,8 @@ export function ChatComposer(props) {
   const canSubmit = () => !submitting() && submittable();
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
   const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
+  /** "+" opens the slash list, as long as there is one; otherwise it stays the add menu. */
+  const addOpensCommands = () => Boolean(props.addOpensCommands && (props.commands?.length || props.searchCommands));
   const hasContextUsage = () => {
     if (props.contextPopupAction) return true;
     const context = props.contextUsage;
@@ -679,12 +886,78 @@ export function ChatComposer(props) {
     _$effect(() => _$setAttribute(_el$2, "title", attachment.name));
     return _el$;
   })();
-  const chooseFiles = () => {
+
+  /** `onNothing` runs when the person closes the selection without a file. */
+  const chooseFiles = onNothing => {
     const selection = props.fileSelection;
-    if (!selection?.choose) return fileInputRef?.click();
-    selection.choose().then(
+    if (!selection?.choose) {
+      const input = fileInputRef;
+      if (input && onNothing) {
+        const done = new AbortController();
+        input.addEventListener("cancel", () => {
+          done.abort();
+          onNothing();
+        }, {
+          signal: done.signal
+        });
+        input.addEventListener("change", () => done.abort(), {
+          signal: done.signal
+        });
+      }
+      return input?.click();
+    }
+    const failed = error => {
+      onNothing?.();
+      (props.fileSelection?.onError ?? props.onError)?.(error);
+    };
+    let chosen;
+    try {
+      chosen = selection.choose();
+    } catch (error) {
+      failed(error);
+      return;
+    }
+    chosen.then(
     // A single-file composer keeps the first chosen file, as its file dialog and drops do.
-    files => void runFiles(selection.multiple === false ? files.slice(0, 1) : files), error => (props.fileSelection?.onError ?? props.onError)?.(error));
+    files => {
+      if (files.length === 0) onNothing?.();else void runFiles(selection.multiple === false ? files.slice(0, 1) : files);
+    }, failed);
+  };
+
+  /**
+   * "Attach files" from the slash list: the token leaves as one edit, and the selection opens synchronously, inside the
+   * key or click that chose the row, because the device's file dialog needs that activation. Closing the selection
+   * without a file brings the token back, unless the draft changed meanwhile.
+   */
+  const attachFilesFromCommand = (token, selection) => {
+    if (!canSelectFiles()) return;
+    const key = props.draftKey;
+    const previous = snapshot();
+    const previousHistory = {
+      entries: [...history],
+      index: historyIndex
+    };
+    const nextValue = props.value.slice(0, token.start) + props.value.slice(token.end);
+    edit(nextValue, reconcileChatMentions(props.value, nextValue, mentions()));
+    setDismissed(true);
+    chooseFiles(() => {
+      if (props.draftKey !== key || props.value !== nextValue) return;
+      setDismissed(true);
+      props.onValueChange(previous.value);
+      props.onMentionsChange?.(previous.mentions);
+      history.splice(0, history.length, ...previousHistory.entries);
+      historyIndex = previousHistory.index;
+      queueMicrotask(() => {
+        textareaRef?.setSelectionRange(selection?.start ?? token.end, selection?.end ?? token.end);
+        syncCaret();
+        focus();
+      });
+    });
+    queueMicrotask(() => {
+      if (props.draftKey !== key || props.value !== nextValue) return;
+      textareaRef?.setSelectionRange(token.start, token.start);
+      syncCaret();
+    });
   };
   const runFiles = async files => {
     if (!canSelectFiles()) return;
@@ -707,7 +980,7 @@ export function ChatComposer(props) {
     setSubmitting(true);
     try {
       if (isTouchOnly()) {
-        if (commandSheetHeld()) setClosedAt(commandQuery()?.start);
+        if (commandSheetHeld()) closeCommandList(false);
         // The sheet's Back entry leaves first, so a submit handler that navigates finds the history settled.
         await dialogHistorySettled();
         // A draft that another one replaced, or that may no longer go out, is not sent and keeps its text.
@@ -759,6 +1032,10 @@ export function ChatComposer(props) {
     const word = scope?.words[0];
     const token = commandQuery();
     if (!word || !token || !textareaRef) return false;
+    if (addSearch()) {
+      setAddQuery(`${word} `);
+      return true;
+    }
     replaceTextareaRange(textareaRef, token.start + 1, token.end, `${word} `);
     syncCaret();
     return true;
@@ -766,6 +1043,8 @@ export function ChatComposer(props) {
   const executeCommand = async (command, tab = false) => {
     const token = commandQuery();
     const heldHistory = commandSheetHeld();
+    const addSelection = addSearch();
+    const fromAdd = addSelection !== undefined;
     if (!token || blocked()) return;
     if (command.disabled || command.reason) {
       // A new object each time, so choosing the same row again inserts and announces its reason again.
@@ -779,17 +1058,35 @@ export function ChatComposer(props) {
       setCommandOpening(opening => opening + 1);
       return;
     }
-    if (command.scope && (tab || !command.action && !command.mention) && narrowCommand(command)) return;
+    if (command.scope && (tab || !command.action && !command.mention && !command.attachFiles) && narrowCommand(command)) return;
+    if (command.attachFiles) {
+      if (!canSelectFiles()) return;
+      // The field has the focus before the selection opens, so closing it without a file comes back there.
+      endAddSearch(true);
+      attachFilesFromCommand(token, addSelection);
+      return;
+    }
+    if (command.open) {
+      await openFromCommand(command, command.open, token);
+      return;
+    }
+    // The field has the focus again before an action opens a dialog, so the dialog gives it back there.
+    endAddSearch(true);
+    // From "+" a reference joins the text at the caret, apart from a word right before it.
+    const lead = value => fromAdd && token.start > 0 && !/\s/.test(value[token.start - 1] ?? "") ? " " : "";
     const previous = snapshot();
     const key = props.draftKey;
-    const replacement = command.mention ? command.mention.name + " " : "";
+    const replacement = command.mention ? lead(props.value) + command.mention.name + " " : "";
     const nextValue = props.value.slice(0, token.start) + replacement + props.value.slice(token.end);
     const nextMentions = reconcileChatMentions(props.value, nextValue, mentions());
-    if (command.mention) nextMentions.push({
-      start: token.start,
-      end: token.start + command.mention.name.length,
-      attachment: command.mention
-    });
+    if (command.mention) {
+      const start = token.start + lead(props.value).length;
+      nextMentions.push({
+        start,
+        end: start + command.mention.name.length,
+        attachment: command.mention
+      });
+    }
     // A cancelled or failed command leaves no undo step behind: restoring puts the history back as well.
     const previousHistory = {
       entries: [...history],
@@ -800,6 +1097,7 @@ export function ChatComposer(props) {
     setExecuting(true);
     let submitRequested = false;
     let restored = false;
+    let mentioned;
     const restore = () => {
       if (props.draftKey !== key || props.value !== nextValue) return;
       setDismissed(true);
@@ -832,6 +1130,33 @@ export function ChatComposer(props) {
         submitRequested = false;
         restore();
         showCommandStatus();
+      } else if (result && "mention" in result) {
+        // One undo step from the token to the reference, as if the row had been a reference itself.
+        if (props.draftKey === key && props.value === nextValue) {
+          restore();
+          restored = false;
+          const name = result.mention.name;
+          const start = token.start + lead(previous.value).length;
+          const withMention = previous.value.slice(0, token.start) + lead(previous.value) + name + " " + previous.value.slice(token.end);
+          edit(withMention, [...reconcileChatMentions(previous.value, withMention, previous.mentions), {
+            start,
+            end: start + name.length,
+            attachment: result.mention
+          }]);
+          setDismissed(true);
+          mentioned = {
+            value: withMention,
+            caret: start + name.length + 1
+          };
+          showCommandStatus();
+        } else {
+          // The pick is lost; say so, also when the draft moved to another key meanwhile (such as a new chat saved
+          // while the dialog was open), so it never ends in silence.
+          showCommandStatus({
+            tone: "error",
+            text: chatMessages().commandDraftChanged
+          });
+        }
       } else if (result) {
         showCommandStatus({
           tone: "done",
@@ -853,9 +1178,9 @@ export function ChatComposer(props) {
     if (submitRequested && props.draftKey === key) await submit();
     queueMicrotask(() => {
       if (props.draftKey !== key) return;
-      if (restored || props.value === nextValue) {
-        const position = restored ? token.end : token.start + replacement.length;
-        textareaRef?.setSelectionRange(position, position);
+      if (restored || props.value === nextValue || mentioned && props.value === mentioned.value) {
+        const position = restored ? token.end : mentioned?.caret ?? token.start + replacement.length;
+        textareaRef?.setSelectionRange(restored && addSelection ? addSelection.start : position, restored && addSelection ? addSelection.end : position);
       }
       syncCaret();
       autoResize();
@@ -863,6 +1188,110 @@ export function ChatComposer(props) {
     });
   };
 
+  /**
+   * Runs an `open` row with the token and the list in place. Success removes the token in one undo step; `failed`
+   * stays in the row while the list is still there, otherwise the status line says it, so it never ends in silence.
+   */
+  const openFromCommand = async (command, open, token) => {
+    const key = props.draftKey;
+    const row = chatCommandKey(command);
+    const value = props.value;
+    const nextValue = value.slice(0, token.start) + value.slice(token.end);
+    const nextMentions = reconcileChatMentions(value, nextValue, mentions());
+    // Still the same draft and `/…`, so the row is where the person chose it.
+    const inPlace = () => !disposed && props.draftKey === key && props.value === value && commandQuery()?.start === token.start;
+    const heldHistory = commandSheetHeld();
+    // Closing the list or leaving the composer cancels the opening; the row ends at once, without waiting for it.
+    const controller = new AbortController();
+    const run = {
+      controller,
+      key,
+      label: command.busyLabel ?? chatMessages().commandOpening,
+      follow: false,
+      moved: false
+    };
+    openingRun = run;
+    const cancelled = new Promise(resolve => controller.signal.addEventListener("abort", () => resolve("cancelled"), {
+      once: true
+    }));
+    setOpenFailures(({
+      [row]: _,
+      ...rest
+    }) => rest);
+    setOpeningRow(row);
+    setExecuting(true);
+    // An opening that ends without leaving, by failure, rejection or cancelling, also aborts `signal`, so the opener
+    // can put back what it saved without the token.
+    const finish = (left = false) => {
+      if (!left) controller.abort();
+      if (openingRun === run) openingRun = undefined;
+      if (commandStatus()?.tone === "busy") showCommandStatus();
+      setOpeningRow(undefined);
+      setExecuting(false);
+    };
+    let result;
+    try {
+      if (heldHistory) {
+        await dialogHistorySettled();
+        if (!inPlace()) {
+          finish();
+          return;
+        }
+      }
+      result = await Promise.race([open({
+        value: nextValue,
+        mentions: nextMentions
+      }, controller.signal, () => {
+        run.follow = true;
+      }), cancelled]);
+    } catch (error) {
+      finish();
+      if (disposed) {
+        props.onError?.(error);
+        return;
+      }
+      if (inPlace()) closeCommandList();
+      showCommandStatus({
+        tone: "error",
+        text: error instanceof Error && error.message ? error.message : chatMessages().commandFailed
+      });
+      return;
+    }
+    if (!result) {
+      // Success: the token leaves and the list closes in the same step that ends the opening, so a phone sheet never
+      // takes its Back entry again while the page navigates.
+      batch(() => {
+        if (!disposed && props.draftKey === key && props.value === value) {
+          edit(nextValue, nextMentions);
+          setDismissed(true);
+        }
+        endAddSearch(!disposed && props.draftKey === key);
+        finish(true);
+      });
+      queueMicrotask(() => {
+        if (disposed || props.draftKey !== key || props.value !== nextValue) return;
+        textareaRef?.setSelectionRange(token.start, token.start);
+        syncCaret();
+        autoResize();
+      });
+      return;
+    }
+    finish();
+    if (result === "cancelled") return;
+    if (inPlace()) {
+      setOpenFailures(failures => ({
+        ...failures,
+        [row]: result.failed
+      }));
+      setAnnouncement({
+        text: result.failed
+      });
+    } else if (disposed) props.onError?.(new Error(result.failed));else showCommandStatus({
+      tone: "error",
+      text: result.failed
+    });
+  };
+
   /** Replaces `start`–`end` with the emoji through the editing path, so the browser's undo restores the shortcode. */
   const insertEmoji = (start, end, emoji) => {
     if (!textareaRef || editBlocked()) return;
@@ -903,9 +1332,66 @@ export function ChatComposer(props) {
       if (untouched && textarea.matches(":focus")) convert(loaded);
     }, () => undefined);
   };
+
+  /** Moving through and choosing in the command list, from the field or from the search field opened by "+". */
+  const commandListKey = event => {
+    if (!commandsOpen()) return false;
+    const matches = commandMatches();
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const index = matches.indexOf(selectedCommand());
+      const next = matches[nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1)];
+      setActiveCommandKey(next ? chatCommandKey(next) : undefined);
+      setCommandMoved(true);
+      setAnnouncement(undefined);
+      return true;
+    }
+    // Ctrl/⌘+Enter sends, also while suggestions are open.
+    const plain = !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+    if (plain && (event.key === "Tab" || event.key === "Enter") && matches.length > 0) {
+      event.preventDefault();
+      const command = selectedCommand();
+      // A server row answering an earlier query may no longer match; wait for fresh results. Local rows match now.
+      const row = commandModel().rows.find(row => chatCommandKey(row.command) === selectedCommandKey());
+      const staleServerRow = row?.server && (searchResultsQuery() !== commandQuery()?.query || searchResultsScope() !== parsedCommandQuery().scope?.id);
+      if (staleServerRow) return true;
+      if (command) void executeCommand(command, event.key === "Tab");
+      return true;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeCommandList();
+      return true;
+    }
+    return false;
+  };
+  const onAddSearchKeyDown = event => {
+    // Nothing chooses while an input method composes, as in the field.
+    if (event.isComposing || event.keyCode === 229 || addComposing) return;
+    if (event.key === "Escape" && openingRun) {
+      event.preventDefault();
+      openingRun.controller.abort();
+      endAddSearch(true);
+      return;
+    }
+    if (commandListKey(event)) return;
+    // Ctrl/⌘+Enter sends from the search field as from the field, with the list closed first.
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+      event.preventDefault();
+      endAddSearch(true);
+      void submit();
+    }
+  };
   const onKeyDown = event => {
     // WebKit ends the composition before the keydown of the Enter that confirms it; that keydown keeps keyCode 229.
     if (event.isComposing || event.keyCode === 229 || composing()) return;
+    // Escape cancels a running `open` row, also once its list is gone because the draft moved to a new chat.
+    if (event.key === "Escape" && openingRun) {
+      event.preventDefault();
+      openingRun.controller.abort();
+      if (commandsOpen()) closeCommandList();
+      return;
+    }
     if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
       event.preventDefault();
       restoreHistory(event.shiftKey ? 1 : -1);
@@ -930,38 +1416,11 @@ export function ChatComposer(props) {
         return;
       }
     }
-    const matches = commandMatches();
-    if (commandsOpen()) {
-      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-        event.preventDefault();
-        const index = matches.indexOf(selectedCommand());
-        const next = matches[nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1)];
-        setActiveCommandKey(next ? chatCommandKey(next) : undefined);
-        setCommandMoved(true);
-        setAnnouncement(undefined);
-        return;
-      }
-      // Ctrl/⌘+Enter sends, also while suggestions are open.
-      const plain = !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
-      if (plain && (event.key === "Tab" || event.key === "Enter") && matches.length > 0) {
-        event.preventDefault();
-        const command = selectedCommand();
-        // A server row answering an earlier query may no longer match; wait for fresh results. Local rows match now.
-        const row = commandModel().rows.find(row => chatCommandKey(row.command) === selectedCommandKey());
-        const staleServerRow = row?.server && (searchResultsQuery() !== commandQuery()?.query || searchResultsScope() !== parsedCommandQuery().scope?.id);
-        if (staleServerRow) return;
-        if (command) void executeCommand(command, event.key === "Tab");
-        return;
-      }
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setClosedAt(commandQuery()?.start);
-        return;
-      }
-    }
+    if (commandListKey(event)) return;
     const format = props.formatting && textareaRef ? formatShortcut(event) : undefined;
     if (format && textareaRef) {
       event.preventDefault();
+      if (editBlocked()) return;
       format.run(textareaRef);
       return;
     }
@@ -1102,8 +1561,52 @@ export function ChatComposer(props) {
     }
   });
 
+  /** "+" as the way to the slash list on keyboards without a handy "/". */
+  const addSearchButton = (extraClass = "") => _$createComponent(Tooltip.Trigger, {
+    ref(r$) {
+      var _ref$2 = addButtonRef;
+      typeof _ref$2 === "function" ? _ref$2(r$) : addButtonRef = r$;
+    },
+    type: "button",
+    "class": `k2b-chat-composer__icon-action${extraClass}`,
+    get ["aria-label"]() {
+      return chatMessages().addMenu;
+    },
+    "aria-haspopup": "listbox",
+    get ["aria-expanded"]() {
+      return addSearch() !== undefined;
+    },
+    get ["aria-controls"]() {
+      return addSearch() ? commandListId : undefined;
+    },
+    get content() {
+      return chatMessages().addMenu;
+    },
+    get disabled() {
+      return blocked();
+    },
+    onMouseDown: keepFieldFocus,
+    onClick: toggleAddSearch,
+    get children() {
+      var _el$5 = _$getNextElement(_tmpl$3);
+      _$effect(() => _$className(_el$5, addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus"));
+      return _el$5;
+    }
+  });
+
   /** The conversation's attach button opens the file choice directly; other actions turn it into the add menu. */
   const attachControl = () => _$createComponent(Show, {
+    get when() {
+      return !addOpensCommands();
+    },
+    get fallback() {
+      return addSearchButton(" k2b-chat-composer__attach");
+    },
+    get children() {
+      return attachChoice();
+    }
+  });
+  const attachChoice = () => _$createComponent(Show, {
     get when() {
       return props.menuActions?.length;
     },
@@ -1124,11 +1627,11 @@ export function ChatComposer(props) {
           get disabled() {
             return !canSelectFiles();
           },
-          onClick: chooseFiles,
+          onClick: () => chooseFiles(),
           get children() {
-            var _el$5 = _$getNextElement(_tmpl$3);
-            _$effect(() => _$className(_el$5, addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus"));
-            return _el$5;
+            var _el$6 = _$getNextElement(_tmpl$3);
+            _$effect(() => _$className(_el$6, addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus"));
+            return _el$6;
           }
         })
       });
@@ -1172,9 +1675,9 @@ export function ChatComposer(props) {
       return _$memo(() => !!props.formatting)() && formattingOpen();
     },
     get children() {
-      var _el$7 = _$getNextElement(_tmpl$5);
-      _$setAttribute(_el$7, "id", formatGroupId);
-      _$insert(_el$7, _$createComponent(For, {
+      var _el$8 = _$getNextElement(_tmpl$5);
+      _$setAttribute(_el$8, "id", formatGroupId);
+      _$insert(_el$8, _$createComponent(For, {
         each: formatTools,
         children: tool => _$createComponent(Tooltip.Trigger, {
           type: "button",
@@ -1193,14 +1696,14 @@ export function ChatComposer(props) {
             if (textareaRef) tool.run(textareaRef);
           },
           get children() {
-            var _el$8 = _$getNextElement(_tmpl$3);
-            _$effect(() => _$className(_el$8, tool.icon));
-            return _el$8;
+            var _el$9 = _$getNextElement(_tmpl$3);
+            _$effect(() => _$className(_el$9, tool.icon));
+            return _el$9;
           }
         })
       }));
-      _$effect(() => _$setAttribute(_el$7, "aria-label", chatMessages().composerFormatting));
-      return _el$7;
+      _$effect(() => _$setAttribute(_el$8, "aria-label", chatMessages().composerFormatting));
+      return _el$8;
     }
   });
   const emojiButton = () => _$createComponent(Show, {
@@ -1237,14 +1740,14 @@ export function ChatComposer(props) {
       return _$memo(() => !!(props.microphone?.onDictate || props.microphone?.onVoiceMessage))() ? props.microphone : undefined;
     },
     children: microphone => (() => {
-      var _el$0 = _$getNextElement(_tmpl$8),
-        _el$11 = _el$0.firstChild,
-        [_el$12, _co$] = _$getNextMarker(_el$11.nextSibling),
-        _el$13 = _el$12.nextSibling,
-        [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling);
-      var _ref$2 = microphoneRef;
-      typeof _ref$2 === "function" ? _$use(_ref$2, _el$0) : microphoneRef = _el$0;
-      _$insert(_el$0, _$createComponent(Tooltip.Trigger, {
+      var _el$1 = _$getNextElement(_tmpl$8),
+        _el$12 = _el$1.firstChild,
+        [_el$13, _co$] = _$getNextMarker(_el$12.nextSibling),
+        _el$14 = _el$13.nextSibling,
+        [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling);
+      var _ref$3 = microphoneRef;
+      typeof _ref$3 === "function" ? _$use(_ref$3, _el$1) : microphoneRef = _el$1;
+      _$insert(_el$1, _$createComponent(Tooltip.Trigger, {
         type: "button",
         "class": "k2b-chat-composer__icon-action k2b-chat-composer__microphone-button",
         get ["data-state"]() {
@@ -1304,12 +1807,12 @@ export function ChatComposer(props) {
           }
         },
         get children() {
-          var _el$1 = _$getNextElement(_tmpl$3);
-          _$effect(() => _$className(_el$1, dictation() === "listening" ? "ti ti-player-stop" : dictation() === "refining" ? "ti ti-loader-2 k2b-spin" : "ti ti-microphone"));
-          return _el$1;
+          var _el$10 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$10, dictation() === "listening" ? "ti ti-player-stop" : dictation() === "refining" ? "ti ti-loader-2 k2b-spin" : "ti ti-microphone"));
+          return _el$10;
         }
-      }), _el$12, _co$);
-      _$insert(_el$0, _$createComponent(Show, {
+      }), _el$13, _co$);
+      _$insert(_el$1, _$createComponent(Show, {
         get when() {
           return microphone().onVoiceMessage;
         },
@@ -1346,8 +1849,8 @@ export function ChatComposer(props) {
             }
           });
         }
-      }), _el$14, _co$2);
-      return _el$0;
+      }), _el$15, _co$2);
+      return _el$1;
     })()
   });
   const sendControl = () => _$createComponent(Show, {
@@ -1372,9 +1875,9 @@ export function ChatComposer(props) {
         },
         onClick: () => void submit(),
         get children() {
-          var _el$16 = _$getNextElement(_tmpl$3);
-          _$effect(() => _$className(_el$16, submitting() ? "ti ti-loader-2 k2b-spin" : conversation() ? "ti ti-send" : "ti ti-arrow-up"));
-          return _el$16;
+          var _el$17 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$17, submitting() ? "ti ti-loader-2 k2b-spin" : conversation() ? "ti ti-send" : "ti ti-arrow-up"));
+          return _el$17;
         }
       });
     },
@@ -1393,47 +1896,47 @@ export function ChatComposer(props) {
         },
         onClick: () => reportChatFailure(() => props.onStop?.(), props.onError),
         get children() {
-          var _el$15 = _$getNextElement(_tmpl$3);
-          _$effect(() => _$className(_el$15, stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop"));
-          return _el$15;
+          var _el$16 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$16, stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop"));
+          return _el$16;
         }
       });
     }
   });
   const field = () => (() => {
-    var _el$17 = _$getNextElement(_tmpl$1),
-      _el$24 = _el$17.firstChild,
-      [_el$25, _co$4] = _$getNextMarker(_el$24.nextSibling),
-      _el$22 = _el$25.nextSibling,
-      _el$26 = _el$22.nextSibling,
-      [_el$27, _co$5] = _$getNextMarker(_el$26.nextSibling);
-    _$insert(_el$17, _$createComponent(Show, {
+    var _el$18 = _$getNextElement(_tmpl$1),
+      _el$25 = _el$18.firstChild,
+      [_el$26, _co$4] = _$getNextMarker(_el$25.nextSibling),
+      _el$23 = _el$26.nextSibling,
+      _el$27 = _el$23.nextSibling,
+      [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling);
+    _$insert(_el$18, _$createComponent(Show, {
       get when() {
         return mentions().length > 0;
       },
       get children() {
-        var _el$18 = _$getNextElement(_tmpl$9),
-          _el$20 = _el$18.firstChild,
-          [_el$21, _co$3] = _$getNextMarker(_el$20.nextSibling),
-          _el$19 = _el$21.nextSibling;
-        var _ref$3 = highlightRef;
-        typeof _ref$3 === "function" ? _$use(_ref$3, _el$18) : highlightRef = _el$18;
-        _$insert(_el$18, _$createComponent(For, {
+        var _el$19 = _$getNextElement(_tmpl$9),
+          _el$21 = _el$19.firstChild,
+          [_el$22, _co$3] = _$getNextMarker(_el$21.nextSibling),
+          _el$20 = _el$22.nextSibling;
+        var _ref$4 = highlightRef;
+        typeof _ref$4 === "function" ? _$use(_ref$4, _el$19) : highlightRef = _el$19;
+        _$insert(_el$19, _$createComponent(For, {
           get each() {
             return chatMentionSegments(props.value, mentions());
           },
           children: part => (() => {
-            var _el$28 = _$getNextElement(_tmpl$10);
-            _$insert(_el$28, () => part.text);
-            _$effect(() => _el$28.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
-            return _el$28;
+            var _el$29 = _$getNextElement(_tmpl$10);
+            _$insert(_el$29, () => part.text);
+            _$effect(() => _el$29.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
+            return _el$29;
           })()
-        }), _el$21, _co$3);
-        return _el$18;
+        }), _el$22, _co$3);
+        return _el$19;
       }
-    }), _el$25, _co$4);
-    _el$22.$$keydown = onKeyDown;
-    _el$22.$$beforeinput = event => {
+    }), _el$26, _co$4);
+    _el$23.$$keydown = onKeyDown;
+    _el$23.$$beforeinput = event => {
       inputStart = event.currentTarget.selectionStart;
       inputEnd = event.currentTarget.selectionEnd;
       if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
@@ -1441,22 +1944,27 @@ export function ChatComposer(props) {
         restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
       }
     };
-    _el$22.addEventListener("scroll", () => {
+    _el$23.addEventListener("scroll", () => {
       if (highlightRef && textareaRef) highlightRef.scrollTop = textareaRef.scrollTop;
     });
-    _el$22.addEventListener("compositionend", () => {
+    _el$23.addEventListener("compositionend", () => {
       setComposing(false);
       syncCaret();
     });
-    _el$22.addEventListener("compositionstart", () => setComposing(true));
-    _el$22.$$keyup = syncCaret;
-    _el$22.$$click = () => {
+    _el$23.addEventListener("compositionstart", () => setComposing(true));
+    _el$23.$$keyup = syncCaret;
+    _el$23.$$click = () => {
       setDismissed(false);
       syncCaret();
     };
-    _el$22.addEventListener("blur", () => setDismissed(true));
-    _el$22.addEventListener("select", syncCaret);
-    _el$22.addEventListener("paste", event => {
+    _el$23.addEventListener("blur", () => setDismissed(true));
+    _el$23.addEventListener("select", syncCaret);
+    _el$23.addEventListener("paste", event => {
+      // Read-only while an `open` row runs: nothing may join the draft after it was saved.
+      if (editBlocked()) {
+        event.preventDefault();
+        return;
+      }
       const clipboardData = event.clipboardData;
       if (canSelectFiles() && clipboardData?.files.length) {
         event.preventDefault();
@@ -1465,7 +1973,7 @@ export function ChatComposer(props) {
       }
       props.onPaste?.(event);
     });
-    _el$22.$$input = event => {
+    _el$23.$$input = event => {
       batch(() => {
         edit(event.currentTarget.value);
         syncCaret();
@@ -1474,42 +1982,44 @@ export function ChatComposer(props) {
       const input = event;
       if (input.inputType === "insertText" && input.data === ":") queueMicrotask(completeShortcode);
     };
-    var _ref$4 = textareaRef;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$22) : textareaRef = _el$22;
-    _$insert(_el$17, _$createComponent(Show, {
+    var _ref$5 = textareaRef;
+    typeof _ref$5 === "function" ? _$use(_ref$5, _el$23) : textareaRef = _el$23;
+    _$insert(_el$18, _$createComponent(Show, {
       get when() {
         return conversation();
       },
       get children() {
-        var _el$23 = _$getNextElement(_tmpl$0);
-        var _ref$5 = measureRef;
-        typeof _ref$5 === "function" ? _$use(_ref$5, _el$23) : measureRef = _el$23;
-        return _el$23;
+        var _el$24 = _$getNextElement(_tmpl$0);
+        var _ref$6 = measureRef;
+        typeof _ref$6 === "function" ? _$use(_ref$6, _el$24) : measureRef = _el$24;
+        return _el$24;
       }
-    }), _el$27, _co$5);
+    }), _el$28, _co$5);
     _$effect(_p$ => {
       var _v$3 = chatMessages().messageInput,
         _v$4 = !!(mentions().length > 0),
-        _v$5 = editBlocked(),
-        _v$6 = conversation() ? "enter" : undefined,
-        _v$7 = props.placeholder ?? (running() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().writeMessage),
-        _v$8 = props.inputLabel ?? messages().message,
-        _v$9 = suggestionsOpen() ? "combobox" : undefined,
-        _v$0 = suggestionsOpen() ? "list" : undefined,
-        _v$1 = suggestionsOpen() ? commandListId : undefined,
-        _v$10 = suggestionsOpen() ? "true" : undefined,
-        _v$11 = emojiOpen() ? `${commandListId}-${selectedCommandIndex()}` : selectedCommand() ? commandOptionId(selectedCommand()) : undefined;
-      _v$3 !== _p$.e && _$setAttribute(_el$17, "aria-label", _p$.e = _v$3);
-      _v$4 !== _p$.t && _el$22.classList.toggle("k2b-chat-composer__textarea--highlighted", _p$.t = _v$4);
-      _v$5 !== _p$.a && _$setProperty(_el$22, "disabled", _p$.a = _v$5);
-      _v$6 !== _p$.o && _$setAttribute(_el$22, "enterkeyhint", _p$.o = _v$6);
-      _v$7 !== _p$.i && _$setAttribute(_el$22, "placeholder", _p$.i = _v$7);
-      _v$8 !== _p$.n && _$setAttribute(_el$22, "aria-label", _p$.n = _v$8);
-      _v$9 !== _p$.s && _$setAttribute(_el$22, "role", _p$.s = _v$9);
-      _v$0 !== _p$.h && _$setAttribute(_el$22, "aria-autocomplete", _p$.h = _v$0);
-      _v$1 !== _p$.r && _$setAttribute(_el$22, "aria-controls", _p$.r = _v$1);
-      _v$10 !== _p$.d && _$setAttribute(_el$22, "aria-expanded", _p$.d = _v$10);
-      _v$11 !== _p$.l && _$setAttribute(_el$22, "aria-activedescendant", _p$.l = _v$11);
+        _v$5 = editBlocked() && openingRow() === undefined,
+        _v$6 = openingRow() !== undefined,
+        _v$7 = conversation() ? "enter" : undefined,
+        _v$8 = props.placeholder ?? (running() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().writeMessage),
+        _v$9 = props.inputLabel ?? messages().message,
+        _v$0 = fieldOwnsList() ? "combobox" : undefined,
+        _v$1 = fieldOwnsList() ? "list" : undefined,
+        _v$10 = fieldOwnsList() ? commandListId : undefined,
+        _v$11 = fieldOwnsList() ? "true" : undefined,
+        _v$12 = !fieldOwnsList() ? undefined : emojiOpen() ? `${commandListId}-${selectedCommandIndex()}` : selectedCommand() ? commandOptionId(selectedCommand()) : undefined;
+      _v$3 !== _p$.e && _$setAttribute(_el$18, "aria-label", _p$.e = _v$3);
+      _v$4 !== _p$.t && _el$23.classList.toggle("k2b-chat-composer__textarea--highlighted", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setProperty(_el$23, "disabled", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setProperty(_el$23, "readOnly", _p$.o = _v$6);
+      _v$7 !== _p$.i && _$setAttribute(_el$23, "enterkeyhint", _p$.i = _v$7);
+      _v$8 !== _p$.n && _$setAttribute(_el$23, "placeholder", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$23, "aria-label", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$23, "role", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setAttribute(_el$23, "aria-autocomplete", _p$.r = _v$1);
+      _v$10 !== _p$.d && _$setAttribute(_el$23, "aria-controls", _p$.d = _v$10);
+      _v$11 !== _p$.l && _$setAttribute(_el$23, "aria-expanded", _p$.l = _v$11);
+      _v$12 !== _p$.u && _$setAttribute(_el$23, "aria-activedescendant", _p$.u = _v$12);
       return _p$;
     }, {
       e: undefined,
@@ -1522,32 +2032,35 @@ export function ChatComposer(props) {
       h: undefined,
       r: undefined,
       d: undefined,
-      l: undefined
+      l: undefined,
+      u: undefined
     });
-    _$effect(() => _$setProperty(_el$22, "value", props.value));
+    _$effect(() => _$setProperty(_el$23, "value", props.value));
     _$runHydrationEvents();
-    return _el$17;
+    return _el$18;
   })();
   const commandRowMap = createMemo(() => new Map(commandModel().rows.map(row => [row.command, row])));
   const commandGroupKey = group => group.scopeTitle ? "scope" : group.section ? `section:${group.section.id}` : "flat";
   const renderCommandRow = command => {
     const highlight = () => commandRowMap().get(command)?.highlight;
     const title = () => command.label ?? command.name;
+    const opening = () => openingRow() === chatCommandKey(command);
+    const failure = () => openFailures()[chatCommandKey(command)];
     return (() => {
-      var _el$29 = _$getNextElement(_tmpl$13),
-        _el$30 = _el$29.firstChild,
-        _el$31 = _el$30.nextSibling,
-        _el$32 = _el$31.firstChild,
-        _el$34 = _el$32.nextSibling,
-        [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling),
-        _el$39 = _el$31.nextSibling,
-        [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling);
-      _el$29.$$click = event => {
+      var _el$30 = _$getNextElement(_tmpl$13),
+        _el$31 = _el$30.firstChild,
+        _el$32 = _el$31.nextSibling,
+        _el$33 = _el$32.firstChild,
+        _el$40 = _el$33.nextSibling,
+        [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
+        _el$45 = _el$32.nextSibling,
+        [_el$46, _co$8] = _$getNextMarker(_el$45.nextSibling);
+      _el$30.$$click = event => {
         event.preventDefault();
         void executeCommand(command);
       };
-      _el$29.$$mousedown = keepFieldFocus;
-      _$insert(_el$32, _$createComponent(Show, {
+      _el$30.$$mousedown = keepFieldFocus;
+      _$insert(_el$33, _$createComponent(Show, {
         get when() {
           return highlight();
         },
@@ -1555,49 +2068,82 @@ export function ChatComposer(props) {
           return title();
         },
         children: range => [_$memo(() => title().slice(0, range()[0])), (() => {
-          var _el$41 = _$getNextElement(_tmpl$14);
-          _$insert(_el$41, () => title().slice(range()[0], range()[1]));
-          return _el$41;
+          var _el$47 = _$getNextElement(_tmpl$14);
+          _$insert(_el$47, () => title().slice(range()[0], range()[1]));
+          return _el$47;
         })(), _$memo(() => title().slice(range()[1]))]
       }));
-      _$insert(_el$31, _$createComponent(Show, {
+      _$insert(_el$32, _$createComponent(Show, {
         get when() {
-          return command.reason ?? command.description;
+          return _$memo(() => !!command.open)() && !command.reason;
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return command.reason ?? command.description;
+            },
+            get children() {
+              var _el$48 = _$getNextElement(_tmpl$15);
+              _$insert(_el$48, () => command.reason ?? command.description);
+              _$effect(() => _$setAttribute(_el$48, "id", command.reason ? `${commandOptionId(command)}-reason` : undefined));
+              return _el$48;
+            }
+          });
         },
         get children() {
-          var _el$33 = _$getNextElement(_tmpl$11);
-          _$insert(_el$33, () => command.reason ?? command.description);
-          _$effect(() => _$setAttribute(_el$33, "id", command.reason ? `${commandOptionId(command)}-reason` : undefined));
-          return _el$33;
+          var _el$34 = _$getNextElement(_tmpl$11),
+            _el$35 = _el$34.firstChild,
+            _el$36 = _el$35.nextSibling,
+            _el$37 = _el$36.firstChild,
+            _el$38 = _el$37.nextSibling,
+            [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling);
+          _$insert(_el$35, () => failure() ?? command.description);
+          _$insert(_el$36, () => command.busyLabel ?? chatMessages().commandOpening, _el$39, _co$6);
+          _$effect(_p$ => {
+            var _v$13 = opening() ? "busy" : failure() ? "failed" : undefined,
+              _v$14 = opening() ? "true" : undefined,
+              _v$15 = opening() ? undefined : "true";
+            _v$13 !== _p$.e && _$setAttribute(_el$34, "data-state", _p$.e = _v$13);
+            _v$14 !== _p$.t && _$setAttribute(_el$35, "aria-hidden", _p$.t = _v$14);
+            _v$15 !== _p$.a && _$setAttribute(_el$36, "aria-hidden", _p$.a = _v$15);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          return _el$34;
         }
-      }), _el$35, _co$6);
-      _$insert(_el$29, _$createComponent(Show, {
+      }), _el$41, _co$7);
+      _$insert(_el$30, _$createComponent(Show, {
         get when() {
           return command.selected;
         },
         get children() {
-          var _el$36 = _$getNextElement(_tmpl$12),
-            _el$37 = _el$36.firstChild,
-            _el$38 = _el$37.nextSibling;
-          _$insert(_el$38, () => chatMessages().commandSelected);
-          return _el$36;
+          var _el$42 = _$getNextElement(_tmpl$12),
+            _el$43 = _el$42.firstChild,
+            _el$44 = _el$43.nextSibling;
+          _$insert(_el$44, () => chatMessages().commandSelected);
+          return _el$42;
         }
-      }), _el$40, _co$7);
+      }), _el$46, _co$8);
       _$effect(_p$ => {
-        var _v$12 = commandOptionId(command),
-          _v$13 = selectedCommand() === command,
-          _v$14 = Boolean(command.disabled || command.reason),
-          _v$15 = command.reason ? `${commandOptionId(command)}-reason` : undefined,
-          _v$16 = command.reason ? "true" : undefined,
-          _v$17 = selectedCommand() === command ? "true" : undefined,
-          _v$18 = command.icon ?? "ti ti-slash";
-        _v$12 !== _p$.e && _$setAttribute(_el$29, "id", _p$.e = _v$12);
-        _v$13 !== _p$.t && _$setAttribute(_el$29, "aria-selected", _p$.t = _v$13);
-        _v$14 !== _p$.a && _$setAttribute(_el$29, "aria-disabled", _p$.a = _v$14);
-        _v$15 !== _p$.o && _$setAttribute(_el$29, "aria-describedby", _p$.o = _v$15);
-        _v$16 !== _p$.i && _$setAttribute(_el$29, "data-reason", _p$.i = _v$16);
-        _v$17 !== _p$.n && _$setAttribute(_el$29, "data-active", _p$.n = _v$17);
-        _v$18 !== _p$.s && _$className(_el$30, _p$.s = _v$18);
+        var _v$16 = commandOptionId(command),
+          _v$17 = selectedCommand() === command,
+          _v$18 = Boolean(command.disabled || command.reason),
+          _v$19 = opening() ? "true" : undefined,
+          _v$20 = command.reason ? `${commandOptionId(command)}-reason` : undefined,
+          _v$21 = command.reason ? "true" : undefined,
+          _v$22 = selectedCommand() === command ? "true" : undefined,
+          _v$23 = command.icon ?? "ti ti-slash";
+        _v$16 !== _p$.e && _$setAttribute(_el$30, "id", _p$.e = _v$16);
+        _v$17 !== _p$.t && _$setAttribute(_el$30, "aria-selected", _p$.t = _v$17);
+        _v$18 !== _p$.a && _$setAttribute(_el$30, "aria-disabled", _p$.a = _v$18);
+        _v$19 !== _p$.o && _$setAttribute(_el$30, "aria-busy", _p$.o = _v$19);
+        _v$20 !== _p$.i && _$setAttribute(_el$30, "aria-describedby", _p$.i = _v$20);
+        _v$21 !== _p$.n && _$setAttribute(_el$30, "data-reason", _p$.n = _v$21);
+        _v$22 !== _p$.s && _$setAttribute(_el$30, "data-active", _p$.s = _v$22);
+        _v$23 !== _p$.h && _$className(_el$31, _p$.h = _v$23);
         return _p$;
       }, {
         e: undefined,
@@ -1606,92 +2152,93 @@ export function ChatComposer(props) {
         o: undefined,
         i: undefined,
         n: undefined,
-        s: undefined
+        s: undefined,
+        h: undefined
       });
       _$runHydrationEvents();
-      return _el$29;
+      return _el$30;
     })();
   };
   return (() => {
-    var _el$42 = _$getNextElement(_tmpl$25),
-      _el$108 = _el$42.firstChild,
-      [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling),
-      _el$70 = _el$109.nextSibling,
-      _el$94 = _el$70.firstChild,
-      [_el$95, _co$21] = _$getNextMarker(_el$94.nextSibling),
-      _el$96 = _el$95.nextSibling,
-      [_el$97, _co$22] = _$getNextMarker(_el$96.nextSibling),
-      _el$98 = _el$97.nextSibling,
-      [_el$99, _co$23] = _$getNextMarker(_el$98.nextSibling),
-      _el$100 = _el$99.nextSibling,
-      [_el$101, _co$24] = _$getNextMarker(_el$100.nextSibling),
-      _el$102 = _el$70.nextSibling,
-      _el$103 = _el$102.nextSibling,
-      _el$104 = _el$103.firstChild,
-      [_el$105, _co$25] = _$getNextMarker(_el$104.nextSibling),
-      _el$106 = _el$105.nextSibling,
-      [_el$107, _co$26] = _$getNextMarker(_el$106.nextSibling);
-    var _ref$6 = shellRef;
-    typeof _ref$6 === "function" ? _$use(_ref$6, _el$42) : shellRef = _el$42;
-    _$insert(_el$42, _$createComponent(Show, {
+    var _el$49 = _$getNextElement(_tmpl$27),
+      _el$122 = _el$49.firstChild,
+      [_el$123, _co$30] = _$getNextMarker(_el$122.nextSibling),
+      _el$84 = _el$123.nextSibling,
+      _el$108 = _el$84.firstChild,
+      [_el$109, _co$24] = _$getNextMarker(_el$108.nextSibling),
+      _el$110 = _el$109.nextSibling,
+      [_el$111, _co$25] = _$getNextMarker(_el$110.nextSibling),
+      _el$112 = _el$111.nextSibling,
+      [_el$113, _co$26] = _$getNextMarker(_el$112.nextSibling),
+      _el$114 = _el$113.nextSibling,
+      [_el$115, _co$27] = _$getNextMarker(_el$114.nextSibling),
+      _el$116 = _el$84.nextSibling,
+      _el$117 = _el$116.nextSibling,
+      _el$118 = _el$117.firstChild,
+      [_el$119, _co$28] = _$getNextMarker(_el$118.nextSibling),
+      _el$120 = _el$119.nextSibling,
+      [_el$121, _co$29] = _$getNextMarker(_el$120.nextSibling);
+    var _ref$7 = shellRef;
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$49) : shellRef = _el$49;
+    _$insert(_el$49, _$createComponent(Show, {
       get when() {
         return suggestionsOpen() || hasAccessory();
       },
       get children() {
-        var _el$43 = _$getNextElement(_tmpl$20),
-          _el$44 = _el$43.firstChild,
-          _el$66 = _el$44.nextSibling,
-          [_el$67, _co$11] = _$getNextMarker(_el$66.nextSibling),
-          _el$68 = _el$67.nextSibling,
-          [_el$69, _co$12] = _$getNextMarker(_el$68.nextSibling);
-        _$insert(_el$44, accessory);
-        _$insert(_el$43, _$createComponent(Show, {
+        var _el$50 = _$getNextElement(_tmpl$22),
+          _el$51 = _el$50.firstChild,
+          _el$80 = _el$51.nextSibling,
+          [_el$81, _co$14] = _$getNextMarker(_el$80.nextSibling),
+          _el$82 = _el$81.nextSibling,
+          [_el$83, _co$15] = _$getNextMarker(_el$82.nextSibling);
+        _$insert(_el$51, accessory);
+        _$insert(_el$50, _$createComponent(Show, {
           get when() {
             return emojiOpen();
           },
           get children() {
-            var _el$45 = _$getNextElement(_tmpl$15),
-              _el$46 = _el$45.firstChild;
-            var _ref$7 = commandListRef;
-            typeof _ref$7 === "function" ? _$use(_ref$7, _el$46) : commandListRef = _el$46;
-            _$setAttribute(_el$46, "id", commandListId);
-            _$insert(_el$46, _$createComponent(For, {
+            var _el$52 = _$getNextElement(_tmpl$16),
+              _el$53 = _el$52.firstChild;
+            var _ref$8 = commandListRef;
+            typeof _ref$8 === "function" ? _$use(_ref$8, _el$53) : commandListRef = _el$53;
+            _$setAttribute(_el$53, "id", commandListId);
+            _$insert(_el$53, _$createComponent(For, {
               get each() {
                 return emojiMatches();
               },
               children: (entry, index) => (() => {
-                var _el$110 = _$getNextElement(_tmpl$26),
-                  _el$111 = _el$110.firstChild,
-                  _el$112 = _el$111.nextSibling,
-                  _el$113 = _el$112.nextSibling,
-                  [_el$114, _co$28] = _$getNextMarker(_el$113.nextSibling);
-                _el$110.$$click = () => pickEmojiSuggestion(index());
-                _el$110.$$mousedown = keepFieldFocus;
-                _$insert(_el$111, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
-                _$insert(_el$112, () => emojiName(entry, locale()));
-                _$insert(_el$110, _$createComponent(Show, {
+                var _el$124 = _$getNextElement(_tmpl$28),
+                  _el$125 = _el$124.firstChild,
+                  _el$126 = _el$125.nextSibling,
+                  _el$127 = _el$126.nextSibling,
+                  [_el$128, _co$31] = _$getNextMarker(_el$127.nextSibling);
+                _el$124.$$click = () => pickEmojiSuggestion(index());
+                _el$124.$$mousedown = keepFieldFocus;
+                _$insert(_el$125, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$126, () => emojiName(entry, locale()));
+                _$insert(_el$124, _$createComponent(Show, {
                   get when() {
                     return entry.shortcodes[0];
                   },
                   children: code => (() => {
-                    var _el$115 = _$getNextElement(_tmpl$27),
-                      _el$116 = _el$115.firstChild,
-                      _el$118 = _el$116.nextSibling,
-                      [_el$119, _co$29] = _$getNextMarker(_el$118.nextSibling),
-                      _el$117 = _el$119.nextSibling;
-                    _$insert(_el$115, code, _el$119, _co$29);
-                    return _el$115;
+                    var _el$129 = _$getNextElement(_tmpl$29),
+                      _el$130 = _el$129.firstChild,
+                      _el$132 = _el$130.nextSibling,
+                      [_el$133, _co$32] = _$getNextMarker(_el$132.nextSibling),
+                      _el$131 = _el$133.nextSibling;
+                    _$insert(_el$129, code, _el$133, _co$32);
+                    return _el$129;
                   })()
-                }), _el$114, _co$28);
+                }), _el$128, _co$31);
                 _$effect(_p$ => {
-                  var _v$28 = `${commandListId}-${index()}`,
-                    _v$29 = index() === selectedCommandIndex(),
-                    _v$30 = emojiName(entry, locale()),
-                    _v$31 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$28 !== _p$.e && _$setAttribute(_el$110, "id", _p$.e = _v$28);
-                  _v$29 !== _p$.t && _$setAttribute(_el$110, "aria-selected", _p$.t = _v$29);
-                  _v$30 !== _p$.a && _$setAttribute(_el$110, "aria-label", _p$.a = _v$30);
-                  _v$31 !== _p$.o && _$setAttribute(_el$110, "data-active", _p$.o = _v$31);
+                  var _v$38 = `${commandListId}-${index()}`,
+                    _v$39 = index() === selectedCommandIndex(),
+                    _v$40 = emojiName(entry, locale()),
+                    _v$41 = index() === selectedCommandIndex() ? "true" : undefined;
+                  _v$38 !== _p$.e && _$setAttribute(_el$124, "id", _p$.e = _v$38);
+                  _v$39 !== _p$.t && _$setAttribute(_el$124, "aria-selected", _p$.t = _v$39);
+                  _v$40 !== _p$.a && _$setAttribute(_el$124, "aria-label", _p$.a = _v$40);
+                  _v$41 !== _p$.o && _$setAttribute(_el$124, "data-active", _p$.o = _v$41);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1700,32 +2247,88 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$110;
+                return _el$124;
               })()
             }));
-            _$effect(() => _$setAttribute(_el$46, "aria-label", chatMessages().emojiSuggestions));
-            return _el$45;
+            _$effect(() => _$setAttribute(_el$53, "aria-label", chatMessages().emojiSuggestions));
+            return _el$52;
           }
-        }), _el$67, _co$11);
-        _$insert(_el$43, _$createComponent(Show, {
+        }), _el$81, _co$14);
+        _$insert(_el$50, _$createComponent(Show, {
           get when() {
             return commandsOpen();
           },
           get children() {
-            var _el$47 = _$getNextElement(_tmpl$19),
-              _el$48 = _el$47.firstChild,
-              _el$58 = _el$48.firstChild,
-              [_el$59, _co$9] = _$getNextMarker(_el$58.nextSibling),
-              _el$60 = _el$59.nextSibling,
-              [_el$61, _co$0] = _$getNextMarker(_el$60.nextSibling),
-              _el$62 = _el$61.nextSibling,
-              [_el$63, _co$1] = _$getNextMarker(_el$62.nextSibling),
-              _el$64 = _el$63.nextSibling,
-              [_el$65, _co$10] = _$getNextMarker(_el$64.nextSibling);
-            var _ref$8 = commandListRef;
-            typeof _ref$8 === "function" ? _$use(_ref$8, _el$48) : commandListRef = _el$48;
-            _$setAttribute(_el$48, "id", commandListId);
-            _$insert(_el$48, _$createComponent(For, {
+            var _el$54 = _$getNextElement(_tmpl$21),
+              _el$78 = _el$54.firstChild,
+              [_el$79, _co$13] = _$getNextMarker(_el$78.nextSibling),
+              _el$58 = _el$79.nextSibling,
+              _el$68 = _el$58.firstChild,
+              [_el$69, _co$0] = _$getNextMarker(_el$68.nextSibling),
+              _el$70 = _el$69.nextSibling,
+              [_el$71, _co$1] = _$getNextMarker(_el$70.nextSibling),
+              _el$72 = _el$71.nextSibling,
+              [_el$73, _co$10] = _$getNextMarker(_el$72.nextSibling),
+              _el$74 = _el$73.nextSibling,
+              [_el$75, _co$11] = _$getNextMarker(_el$74.nextSibling),
+              _el$76 = _el$75.nextSibling,
+              [_el$77, _co$12] = _$getNextMarker(_el$76.nextSibling);
+            _el$54.$$mousedown = event => {
+              if (addSearch() && event.target !== addSearchRef) event.preventDefault();
+            };
+            _$insert(_el$54, _$createComponent(Show, {
+              get when() {
+                return addSearch();
+              },
+              get children() {
+                var _el$55 = _$getNextElement(_tmpl$17),
+                  _el$56 = _el$55.firstChild,
+                  _el$57 = _el$56.nextSibling;
+                _el$57.$$focusout = event => {
+                  const next = event.relatedTarget;
+                  if (next instanceof Node && commandListRef?.parentElement?.contains(next)) return;
+                  // Focus that leaves another way, such as with Shift+Tab, closes the list and stays where it went.
+                  queueMicrotask(() => {
+                    if (addSearch() && document.activeElement !== addSearchRef) endAddSearch(false);
+                  });
+                };
+                _el$57.addEventListener("compositionend", () => {
+                  addComposing = false;
+                });
+                _el$57.addEventListener("compositionstart", () => {
+                  addComposing = true;
+                });
+                _el$57.$$keydown = onAddSearchKeyDown;
+                _el$57.$$input = event => setAddQuery(event.currentTarget.value);
+                var _ref$9 = addSearchRef;
+                typeof _ref$9 === "function" ? _$use(_ref$9, _el$57) : addSearchRef = _el$57;
+                _$setAttribute(_el$57, "aria-controls", commandListId);
+                _$setAttribute(_el$57, "spellcheck", false);
+                _$effect(_p$ => {
+                  var _v$24 = chatMessages().commandSearch,
+                    _v$25 = chatMessages().commandSearchLabel,
+                    _v$26 = selectedCommand() ? commandOptionId(selectedCommand()) : undefined,
+                    _v$27 = openingRow() !== undefined;
+                  _v$24 !== _p$.e && _$setAttribute(_el$57, "placeholder", _p$.e = _v$24);
+                  _v$25 !== _p$.t && _$setAttribute(_el$57, "aria-label", _p$.t = _v$25);
+                  _v$26 !== _p$.a && _$setAttribute(_el$57, "aria-activedescendant", _p$.a = _v$26);
+                  _v$27 !== _p$.o && _$setProperty(_el$57, "readOnly", _p$.o = _v$27);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                _$effect(() => _$setProperty(_el$57, "value", addQuery()));
+                _$runHydrationEvents();
+                return _el$55;
+              }
+            }), _el$79, _co$13);
+            var _ref$0 = commandListRef;
+            typeof _ref$0 === "function" ? _$use(_ref$0, _el$58) : commandListRef = _el$58;
+            _$setAttribute(_el$58, "id", commandListId);
+            _$insert(_el$58, _$createComponent(For, {
               get each() {
                 return commandModel().groups.map(commandGroupKey);
               },
@@ -1744,343 +2347,354 @@ export function ChatComposer(props) {
                     });
                   },
                   get children() {
-                    var _el$120 = _$getNextElement(_tmpl$30),
-                      _el$121 = _el$120.firstChild,
-                      _el$122 = _el$121.firstChild,
-                      _el$124 = _el$122.nextSibling,
-                      [_el$125, _co$30] = _$getNextMarker(_el$124.nextSibling),
-                      _el$127 = _el$121.nextSibling,
-                      [_el$128, _co$31] = _$getNextMarker(_el$127.nextSibling),
-                      _el$129 = _el$128.nextSibling,
-                      [_el$130, _co$32] = _$getNextMarker(_el$129.nextSibling);
-                    _$insert(_el$122, () => group()?.scopeTitle ?? group()?.section?.label);
-                    _$insert(_el$121, _$createComponent(Show, {
+                    var _el$134 = _$getNextElement(_tmpl$31),
+                      _el$135 = _el$134.firstChild,
+                      _el$136 = _el$135.firstChild,
+                      _el$138 = _el$136.nextSibling,
+                      [_el$139, _co$33] = _$getNextMarker(_el$138.nextSibling),
+                      _el$140 = _el$135.nextSibling,
+                      [_el$141, _co$34] = _$getNextMarker(_el$140.nextSibling),
+                      _el$142 = _el$141.nextSibling,
+                      [_el$143, _co$35] = _$getNextMarker(_el$142.nextSibling);
+                    _$insert(_el$136, () => group()?.scopeTitle ?? group()?.section?.label);
+                    _$insert(_el$135, _$createComponent(Show, {
                       get when() {
                         return group()?.loading;
                       },
                       get children() {
-                        return _$getNextElement(_tmpl$28);
+                        return _$getNextElement(_tmpl$30);
                       }
-                    }), _el$125, _co$30);
-                    _$insert(_el$120, _$createComponent(For, {
+                    }), _el$139, _co$33);
+                    _$insert(_el$134, _$createComponent(For, {
                       get each() {
                         return rows();
                       },
                       children: renderCommandRow
-                    }), _el$128, _co$31);
-                    _$insert(_el$120, _$createComponent(Show, {
-                      get when() {
-                        return group()?.placeholder;
+                    }), _el$141, _co$34);
+                    _$insert(_el$134, _$createComponent(Index, {
+                      get each() {
+                        return Array.from({
+                          length: Math.max(group()?.placeholder ? 1 : 0, group()?.pendingRows ?? 0)
+                        });
                       },
-                      get children() {
-                        return _$getNextElement(_tmpl$29);
-                      }
-                    }), _el$130, _co$32);
+                      children: () => _$getNextElement(_tmpl$32)
+                    }), _el$143, _co$35);
                     _$effect(_p$ => {
-                      var _v$32 = headingId(),
-                        _v$33 = headingId();
-                      _v$32 !== _p$.e && _$setAttribute(_el$120, "aria-labelledby", _p$.e = _v$32);
-                      _v$33 !== _p$.t && _$setAttribute(_el$121, "id", _p$.t = _v$33);
+                      var _v$42 = headingId(),
+                        _v$43 = headingId();
+                      _v$42 !== _p$.e && _$setAttribute(_el$134, "aria-labelledby", _p$.e = _v$42);
+                      _v$43 !== _p$.t && _$setAttribute(_el$135, "id", _p$.t = _v$43);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$120;
+                    return _el$134;
                   }
                 });
               }
-            }), _el$59, _co$9);
-            _$insert(_el$48, _$createComponent(Show, {
+            }), _el$69, _co$0);
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
-                return _$memo(() => !!(searching() && commandMatches().length === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
+                return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
               },
               get children() {
-                var _el$49 = _$getNextElement(_tmpl$16),
-                  _el$50 = _el$49.firstChild,
-                  _el$51 = _el$50.nextSibling;
-                _$insert(_el$51, () => messages().loading);
-                return _el$49;
+                var _el$59 = _$getNextElement(_tmpl$18),
+                  _el$60 = _el$59.firstChild,
+                  _el$61 = _el$60.nextSibling;
+                _$insert(_el$61, () => messages().loading);
+                return _el$59;
               }
-            }), _el$61, _co$0);
-            _$insert(_el$48, _$createComponent(Show, {
+            }), _el$71, _co$1);
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return searchError();
               },
               get children() {
-                var _el$52 = _$getNextElement(_tmpl$17),
-                  _el$53 = _el$52.firstChild,
-                  _el$54 = _el$53.nextSibling,
-                  _el$55 = _el$54.nextSibling,
-                  [_el$56, _co$8] = _$getNextMarker(_el$55.nextSibling);
-                _$insert(_el$52, () => messages().error, _el$56, _co$8);
-                return _el$52;
+                var _el$62 = _$getNextElement(_tmpl$19),
+                  _el$63 = _el$62.firstChild,
+                  _el$64 = _el$63.nextSibling,
+                  _el$65 = _el$64.nextSibling,
+                  [_el$66, _co$9] = _$getNextMarker(_el$65.nextSibling);
+                _$insert(_el$62, () => messages().error, _el$66, _co$9);
+                return _el$62;
               }
-            }), _el$63, _co$1);
-            _$insert(_el$48, _$createComponent(Show, {
+            }), _el$73, _co$10);
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
-                return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
+                return _$memo(() => !!(!searching() && !searchError() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.pendingRows);
               },
               get children() {
-                var _el$57 = _$getNextElement(_tmpl$18);
-                _$insert(_el$57, (() => {
+                var _el$67 = _$getNextElement(_tmpl$20);
+                _$insert(_el$67, (() => {
                   var _c$ = _$memo(() => !!!parsedCommandQuery().query.trim());
                   return () => _c$() ? messages().noResults : chatMessages().commandsNothingFound({
                     query: parsedCommandQuery().query.trim()
                   });
                 })());
-                return _el$57;
+                return _el$67;
               }
-            }), _el$65, _co$10);
+            }), _el$75, _co$11);
+            _$insert(_el$58, _$createComponent(Show, {
+              get when() {
+                return commandModel().fallback?.command;
+              },
+              keyed: true,
+              children: command => renderCommandRow(command)
+            }), _el$77, _co$12);
             _$effect(_p$ => {
-              var _v$19 = chatMessages().commands,
-                _v$20 = searching() ? "true" : undefined;
-              _v$19 !== _p$.e && _$setAttribute(_el$48, "aria-label", _p$.e = _v$19);
-              _v$20 !== _p$.t && _$setAttribute(_el$48, "aria-busy", _p$.t = _v$20);
+              var _v$28 = addSearch() ? "" : undefined,
+                _v$29 = chatMessages().commands,
+                _v$30 = searching() ? "true" : undefined;
+              _v$28 !== _p$.e && _$setAttribute(_el$54, "data-search", _p$.e = _v$28);
+              _v$29 !== _p$.t && _$setAttribute(_el$58, "aria-label", _p$.t = _v$29);
+              _v$30 !== _p$.a && _$setAttribute(_el$58, "aria-busy", _p$.a = _v$30);
               return _p$;
             }, {
               e: undefined,
-              t: undefined
+              t: undefined,
+              a: undefined
             });
-            return _el$47;
+            _$runHydrationEvents();
+            return _el$54;
           }
-        }), _el$69, _co$12);
+        }), _el$83, _co$15);
         _$effect(_p$ => {
-          var _v$21 = hasAccessory() ? undefined : "true",
-            _v$22 = suggestionsOpen() ? "hidden" : undefined,
-            _v$23 = suggestionsOpen();
-          _v$21 !== _p$.e && _$setAttribute(_el$43, "data-overlay", _p$.e = _v$21);
-          _v$22 !== _p$.t && _$setStyleProperty(_el$44, "visibility", _p$.t = _v$22);
-          _v$23 !== _p$.a && _$setProperty(_el$44, "inert", _p$.a = _v$23);
+          var _v$31 = hasAccessory() ? undefined : "true",
+            _v$32 = suggestionsOpen() ? "hidden" : undefined,
+            _v$33 = suggestionsOpen();
+          _v$31 !== _p$.e && _$setAttribute(_el$50, "data-overlay", _p$.e = _v$31);
+          _v$32 !== _p$.t && _$setStyleProperty(_el$51, "visibility", _p$.t = _v$32);
+          _v$33 !== _p$.a && _$setProperty(_el$51, "inert", _p$.a = _v$33);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$43;
+        return _el$50;
       }
-    }), _el$109, _co$27);
-    var _ref$9 = composerRef;
-    typeof _ref$9 === "function" ? _$use(_ref$9, _el$70) : composerRef = _el$70;
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$123, _co$30);
+    var _ref$1 = composerRef;
+    typeof _ref$1 === "function" ? _$use(_ref$1, _el$84) : composerRef = _el$84;
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return showHint();
       },
       get children() {
-        var _el$71 = _$getNextElement(_tmpl$21);
-        _$insert(_el$71, _$createComponent(Show, {
+        var _el$85 = _$getNextElement(_tmpl$23);
+        _$insert(_el$85, _$createComponent(Show, {
           get when() {
             return dictationStatus();
           },
           get fallback() {
             return (() => {
-              var _el$131 = _$getNextElement(_tmpl$31);
-              _$insert(_el$131, hint);
-              return _el$131;
+              var _el$145 = _$getNextElement(_tmpl$33);
+              _$insert(_el$145, hint);
+              return _el$145;
             })();
           },
           children: status => [(() => {
-            var _el$132 = _$getNextElement(_tmpl$32),
-              _el$133 = _el$132.firstChild,
-              _el$134 = _el$133.nextSibling;
-            _$insert(_el$134, () => status().text);
+            var _el$146 = _$getNextElement(_tmpl$34),
+              _el$147 = _el$146.firstChild,
+              _el$148 = _el$147.nextSibling;
+            _$insert(_el$148, () => status().text);
             _$effect(_p$ => {
-              var _v$34 = dictation() ?? undefined,
-                _v$35 = status().icon;
-              _v$34 !== _p$.e && _$setAttribute(_el$132, "data-state", _p$.e = _v$34);
-              _v$35 !== _p$.t && _$className(_el$133, _p$.t = _v$35);
+              var _v$44 = dictation() ?? undefined,
+                _v$45 = status().icon;
+              _v$44 !== _p$.e && _$setAttribute(_el$146, "data-state", _p$.e = _v$44);
+              _v$45 !== _p$.t && _$className(_el$147, _p$.t = _v$45);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$132;
+            return _el$146;
           })(), _$createComponent(Show, {
             get when() {
               return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
             },
             children: restore => (() => {
-              var _el$135 = _$getNextElement(_tmpl$33);
-              _el$135.$$click = () => reportChatFailure(restore(), props.onError);
-              _el$135.$$mousedown = keepFieldFocus;
-              _$insert(_el$135, () => chatMessages().restoreOriginal);
-              _$effect(() => _$setProperty(_el$135, "disabled", microphoneDisabled()));
+              var _el$149 = _$getNextElement(_tmpl$35);
+              _el$149.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$149.$$mousedown = keepFieldFocus;
+              _$insert(_el$149, () => chatMessages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$149, "disabled", microphoneDisabled()));
               _$runHydrationEvents();
-              return _el$135;
+              return _el$149;
             })()
           })]
         }));
-        return _el$71;
+        return _el$85;
       }
-    }), _el$95, _co$21);
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$109, _co$24);
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$72 = _$getNextElement(_tmpl$22);
-        _$insert(_el$72, _$createComponent(For, {
+        var _el$86 = _$getNextElement(_tmpl$24);
+        _$insert(_el$86, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$136 = _$getNextElement(_tmpl$35),
-              _el$137 = _el$136.firstChild,
-              _el$138 = _el$137.firstChild,
-              [_el$139, _co$33] = _$getNextMarker(_el$138.nextSibling),
-              _el$140 = _el$139.nextSibling,
-              [_el$141, _co$34] = _$getNextMarker(_el$140.nextSibling),
-              _el$143 = _el$137.nextSibling,
-              [_el$144, _co$35] = _$getNextMarker(_el$143.nextSibling);
-            _$insert(_el$137, _$createComponent(Show, {
+            var _el$150 = _$getNextElement(_tmpl$37),
+              _el$151 = _el$150.firstChild,
+              _el$152 = _el$151.firstChild,
+              [_el$153, _co$36] = _$getNextMarker(_el$152.nextSibling),
+              _el$154 = _el$153.nextSibling,
+              [_el$155, _co$37] = _$getNextMarker(_el$154.nextSibling),
+              _el$157 = _el$151.nextSibling,
+              [_el$158, _co$38] = _$getNextMarker(_el$157.nextSibling);
+            _$insert(_el$151, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$145 = _$getNextElement(_tmpl$37),
-                    _el$147 = _el$145.firstChild,
-                    [_el$148, _co$36] = _$getNextMarker(_el$147.nextSibling),
-                    _el$149 = _el$148.nextSibling,
-                    [_el$150, _co$37] = _$getNextMarker(_el$149.nextSibling);
-                  _$insert(_el$145, _$createComponent(Show, {
+                  var _el$159 = _$getNextElement(_tmpl$39),
+                    _el$161 = _el$159.firstChild,
+                    [_el$162, _co$39] = _$getNextMarker(_el$161.nextSibling),
+                    _el$163 = _el$162.nextSibling,
+                    [_el$164, _co$40] = _$getNextMarker(_el$163.nextSibling);
+                  _$insert(_el$159, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$151 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$151, attachmentIcon(attachment)));
-                        return _el$151;
+                        var _el$165 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$165, attachmentIcon(attachment)));
+                        return _el$165;
                       })();
                     },
                     get children() {
-                      var _el$146 = _$getNextElement(_tmpl$36);
+                      var _el$160 = _$getNextElement(_tmpl$38);
                       _$effect(_p$ => {
-                        var _v$38 = attachment.previewUrl,
-                          _v$39 = attachment.alt ?? "";
-                        _v$38 !== _p$.e && _$setAttribute(_el$146, "src", _p$.e = _v$38);
-                        _v$39 !== _p$.t && _$setAttribute(_el$146, "alt", _p$.t = _v$39);
+                        var _v$48 = attachment.previewUrl,
+                          _v$49 = attachment.alt ?? "";
+                        _v$48 !== _p$.e && _$setAttribute(_el$160, "src", _p$.e = _v$48);
+                        _v$49 !== _p$.t && _$setAttribute(_el$160, "alt", _p$.t = _v$49);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$146;
+                      return _el$160;
                     }
-                  }), _el$148, _co$36);
-                  _$insert(_el$145, () => renderAttachmentCopy(attachment), _el$150, _co$37);
-                  return _el$145;
+                  }), _el$162, _co$39);
+                  _$insert(_el$159, () => renderAttachmentCopy(attachment), _el$164, _co$40);
+                  return _el$159;
                 })();
               },
               children: href => (() => {
-                var _el$152 = _$getNextElement(_tmpl$38),
-                  _el$154 = _el$152.firstChild,
-                  [_el$155, _co$38] = _$getNextMarker(_el$154.nextSibling),
-                  _el$156 = _el$155.nextSibling,
-                  [_el$157, _co$39] = _$getNextMarker(_el$156.nextSibling);
-                _$insert(_el$152, _$createComponent(Show, {
+                var _el$166 = _$getNextElement(_tmpl$40),
+                  _el$168 = _el$166.firstChild,
+                  [_el$169, _co$41] = _$getNextMarker(_el$168.nextSibling),
+                  _el$170 = _el$169.nextSibling,
+                  [_el$171, _co$42] = _$getNextMarker(_el$170.nextSibling);
+                _$insert(_el$166, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$158 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$158, attachmentIcon(attachment)));
-                      return _el$158;
+                      var _el$172 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$172, attachmentIcon(attachment)));
+                      return _el$172;
                     })();
                   },
                   get children() {
-                    var _el$153 = _$getNextElement(_tmpl$36);
+                    var _el$167 = _$getNextElement(_tmpl$38);
                     _$effect(_p$ => {
-                      var _v$40 = attachment.previewUrl,
-                        _v$41 = attachment.alt ?? "";
-                      _v$40 !== _p$.e && _$setAttribute(_el$153, "src", _p$.e = _v$40);
-                      _v$41 !== _p$.t && _$setAttribute(_el$153, "alt", _p$.t = _v$41);
+                      var _v$50 = attachment.previewUrl,
+                        _v$51 = attachment.alt ?? "";
+                      _v$50 !== _p$.e && _$setAttribute(_el$167, "src", _p$.e = _v$50);
+                      _v$51 !== _p$.t && _$setAttribute(_el$167, "alt", _p$.t = _v$51);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$153;
+                    return _el$167;
                   }
-                }), _el$155, _co$38);
-                _$insert(_el$152, () => renderAttachmentCopy(attachment), _el$157, _co$39);
+                }), _el$169, _co$41);
+                _$insert(_el$166, () => renderAttachmentCopy(attachment), _el$171, _co$42);
                 _$effect(_p$ => {
-                  var _v$42 = href(),
-                    _v$43 = chatMessages().openInNewTab({
+                  var _v$52 = href(),
+                    _v$53 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$42 !== _p$.e && _$setAttribute(_el$152, "href", _p$.e = _v$42);
-                  _v$43 !== _p$.t && _$setAttribute(_el$152, "aria-label", _p$.t = _v$43);
+                  _v$52 !== _p$.e && _$setAttribute(_el$166, "href", _p$.e = _v$52);
+                  _v$53 !== _p$.t && _$setAttribute(_el$166, "aria-label", _p$.t = _v$53);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$152;
+                return _el$166;
               })()
-            }), _el$139, _co$33);
-            _$insert(_el$137, _$createComponent(Show, {
+            }), _el$153, _co$36);
+            _$insert(_el$151, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$159 = _$getNextElement(_tmpl$39),
-                  _el$160 = _el$159.firstChild,
-                  [_el$161, _co$40] = _$getNextMarker(_el$160.nextSibling),
-                  _el$162 = _el$161.nextSibling,
-                  [_el$163, _co$41] = _$getNextMarker(_el$162.nextSibling);
-                _el$159.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$159, _$createComponent(Show, {
+                var _el$173 = _$getNextElement(_tmpl$41),
+                  _el$174 = _el$173.firstChild,
+                  [_el$175, _co$43] = _$getNextMarker(_el$174.nextSibling),
+                  _el$176 = _el$175.nextSibling,
+                  [_el$177, _co$44] = _$getNextMarker(_el$176.nextSibling);
+                _el$173.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$173, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$164 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$164, icon()));
-                    return _el$164;
+                    var _el$178 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$178, icon()));
+                    return _el$178;
                   })()
-                }), _el$161, _co$40);
-                _$insert(_el$159, () => action().label, _el$163, _co$41);
-                _$effect(() => _$setProperty(_el$159, "disabled", blocked() || action().disabled));
+                }), _el$175, _co$43);
+                _$insert(_el$173, () => action().label, _el$177, _co$44);
+                _$effect(() => _$setProperty(_el$173, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$159;
+                return _el$173;
               })()
-            }), _el$141, _co$34);
-            _$insert(_el$136, _$createComponent(Show, {
+            }), _el$155, _co$37);
+            _$insert(_el$150, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$142 = _$getNextElement(_tmpl$34);
-                _el$142.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$156 = _$getNextElement(_tmpl$36);
+                _el$156.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$36 = selectMessages().removeNamed({
+                  var _v$46 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$37 = blocked();
-                  _v$36 !== _p$.e && _$setAttribute(_el$142, "aria-label", _p$.e = _v$36);
-                  _v$37 !== _p$.t && _$setProperty(_el$142, "disabled", _p$.t = _v$37);
+                    _v$47 = blocked();
+                  _v$46 !== _p$.e && _$setAttribute(_el$156, "aria-label", _p$.e = _v$46);
+                  _v$47 !== _p$.t && _$setProperty(_el$156, "disabled", _p$.t = _v$47);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$142;
+                return _el$156;
               }
-            }), _el$144, _co$35);
-            _$effect(() => _el$137.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$136;
+            }), _el$158, _co$38);
+            _$effect(() => _el$151.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$150;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$72, "aria-label", chatMessages().attachments));
-        return _el$72;
+        _$effect(() => _$setAttribute(_el$86, "aria-label", chatMessages().attachments));
+        return _el$86;
       }
-    }), _el$97, _co$22);
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$111, _co$25);
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return conversation();
       },
@@ -2090,49 +2704,59 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$165 = _$getNextElement(_tmpl$23),
-              _el$166 = _el$165.firstChild,
-              _el$167 = _el$166.nextSibling,
-              [_el$168, _co$42] = _$getNextMarker(_el$167.nextSibling);
-            _$insert(_el$165, () => props.error, _el$168, _co$42);
-            return _el$165;
+            var _el$179 = _$getNextElement(_tmpl$25),
+              _el$180 = _el$179.firstChild,
+              _el$181 = _el$180.nextSibling,
+              [_el$182, _co$45] = _$getNextMarker(_el$181.nextSibling);
+            _$insert(_el$179, () => props.error, _el$182, _co$45);
+            return _el$179;
           }
         }), _$memo(formatRow), (() => {
-          var _el$169 = _$getNextElement(_tmpl$40);
-          _$insert(_el$169, _$createComponent(Show, {
+          var _el$183 = _$getNextElement(_tmpl$42);
+          _$insert(_el$183, _$createComponent(Show, {
             get when() {
               return footer();
             },
             get fallback() {
               return [(() => {
-                var _el$170 = _$getNextElement(_tmpl$41),
-                  _el$171 = _el$170.firstChild,
-                  [_el$172, _co$43] = _$getNextMarker(_el$171.nextSibling),
-                  _el$173 = _el$172.nextSibling,
-                  [_el$174, _co$44] = _$getNextMarker(_el$173.nextSibling),
-                  _el$175 = _el$174.nextSibling,
-                  [_el$176, _co$45] = _$getNextMarker(_el$175.nextSibling),
-                  _el$177 = _el$176.nextSibling,
-                  [_el$178, _co$46] = _$getNextMarker(_el$177.nextSibling),
-                  _el$179 = _el$178.nextSibling,
-                  [_el$180, _co$47] = _$getNextMarker(_el$179.nextSibling),
-                  _el$181 = _el$180.nextSibling,
-                  [_el$182, _co$48] = _$getNextMarker(_el$181.nextSibling),
-                  _el$183 = _el$182.nextSibling,
-                  [_el$184, _co$49] = _$getNextMarker(_el$183.nextSibling);
-                _$insert(_el$170, () => props.footerTools, _el$172, _co$43);
-                _$insert(_el$170, _$createComponent(Show, {
+                var _el$184 = _$getNextElement(_tmpl$43),
+                  _el$185 = _el$184.firstChild,
+                  [_el$186, _co$46] = _$getNextMarker(_el$185.nextSibling),
+                  _el$187 = _el$186.nextSibling,
+                  [_el$188, _co$47] = _$getNextMarker(_el$187.nextSibling),
+                  _el$189 = _el$188.nextSibling,
+                  [_el$190, _co$48] = _$getNextMarker(_el$189.nextSibling),
+                  _el$191 = _el$190.nextSibling,
+                  [_el$192, _co$49] = _$getNextMarker(_el$191.nextSibling),
+                  _el$193 = _el$192.nextSibling,
+                  [_el$194, _co$50] = _$getNextMarker(_el$193.nextSibling),
+                  _el$195 = _el$194.nextSibling,
+                  [_el$196, _co$51] = _$getNextMarker(_el$195.nextSibling),
+                  _el$197 = _el$196.nextSibling,
+                  [_el$198, _co$52] = _$getNextMarker(_el$197.nextSibling);
+                _$insert(_el$184, () => props.footerTools, _el$186, _co$46);
+                _$insert(_el$184, _$createComponent(Show, {
                   get when() {
-                    return hasAddMenu();
+                    return addOpensCommands();
+                  },
+                  get fallback() {
+                    return _$createComponent(Show, {
+                      get when() {
+                        return hasAddMenu();
+                      },
+                      get children() {
+                        return addMenu("ti ti-plus");
+                      }
+                    });
                   },
                   get children() {
-                    return addMenu("ti ti-plus");
+                    return addSearchButton();
                   }
-                }), _el$174, _co$44);
-                _$insert(_el$170, fileInput, _el$176, _co$45);
-                _$insert(_el$170, formatToggle, _el$178, _co$46);
-                _$insert(_el$170, emojiButton, _el$180, _co$47);
-                _$insert(_el$170, _$createComponent(Show, {
+                }), _el$188, _co$47);
+                _$insert(_el$184, fileInput, _el$190, _co$48);
+                _$insert(_el$184, formatToggle, _el$192, _co$49);
+                _$insert(_el$184, emojiButton, _el$194, _co$50);
+                _$insert(_el$184, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -2178,22 +2802,22 @@ export function ChatComposer(props) {
                       }
                     });
                   }
-                }), _el$182, _co$48);
-                _$insert(_el$170, () => props.modelDetails, _el$184, _co$49);
-                return _el$170;
+                }), _el$196, _co$51);
+                _$insert(_el$184, () => props.modelDetails, _el$198, _co$52);
+                return _el$184;
               })(), (() => {
-                var _el$185 = _$getNextElement(_tmpl$42),
-                  _el$186 = _el$185.firstChild,
-                  [_el$187, _co$50] = _$getNextMarker(_el$186.nextSibling),
-                  _el$188 = _el$187.nextSibling,
-                  [_el$189, _co$51] = _$getNextMarker(_el$188.nextSibling),
-                  _el$190 = _el$189.nextSibling,
-                  [_el$191, _co$52] = _$getNextMarker(_el$190.nextSibling),
-                  _el$192 = _el$191.nextSibling,
-                  [_el$193, _co$53] = _$getNextMarker(_el$192.nextSibling),
-                  _el$194 = _el$193.nextSibling,
-                  [_el$195, _co$54] = _$getNextMarker(_el$194.nextSibling);
-                _$insert(_el$185, _$createComponent(For, {
+                var _el$199 = _$getNextElement(_tmpl$44),
+                  _el$200 = _el$199.firstChild,
+                  [_el$201, _co$53] = _$getNextMarker(_el$200.nextSibling),
+                  _el$202 = _el$201.nextSibling,
+                  [_el$203, _co$54] = _$getNextMarker(_el$202.nextSibling),
+                  _el$204 = _el$203.nextSibling,
+                  [_el$205, _co$55] = _$getNextMarker(_el$204.nextSibling),
+                  _el$206 = _el$205.nextSibling,
+                  [_el$207, _co$56] = _$getNextMarker(_el$206.nextSibling),
+                  _el$208 = _el$207.nextSibling,
+                  [_el$209, _co$57] = _$getNextMarker(_el$208.nextSibling);
+                _$insert(_el$199, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -2217,13 +2841,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$196 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$196, action.icon ?? "ti ti-dots"));
-                      return _el$196;
+                      var _el$210 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$210, action.icon ?? "ti ti-dots"));
+                      return _el$210;
                     }
                   })
-                }), _el$187, _co$50);
-                _$insert(_el$185, _$createComponent(Show, {
+                }), _el$201, _co$53);
+                _$insert(_el$199, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -2235,18 +2859,18 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$189, _co$51);
-                _$insert(_el$185, () => props.submitTools, _el$191, _co$52);
-                _$insert(_el$185, microphoneControl, _el$193, _co$53);
-                _$insert(_el$185, sendControl, _el$195, _co$54);
-                return _el$185;
+                }), _el$203, _co$54);
+                _$insert(_el$199, () => props.submitTools, _el$205, _co$55);
+                _$insert(_el$199, microphoneControl, _el$207, _co$56);
+                _$insert(_el$199, sendControl, _el$209, _co$57);
+                return _el$199;
               })()];
             },
             get children() {
               return footer();
             }
           }));
-          return _el$169;
+          return _el$183;
         })()];
       },
       get children() {
@@ -2255,43 +2879,43 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$73 = _$getNextElement(_tmpl$23),
-              _el$74 = _el$73.firstChild,
-              _el$75 = _el$74.nextSibling,
-              [_el$76, _co$13] = _$getNextMarker(_el$75.nextSibling);
-            _$insert(_el$73, () => props.error, _el$76, _co$13);
-            return _el$73;
+            var _el$87 = _$getNextElement(_tmpl$25),
+              _el$88 = _el$87.firstChild,
+              _el$89 = _el$88.nextSibling,
+              [_el$90, _co$16] = _$getNextMarker(_el$89.nextSibling);
+            _$insert(_el$87, () => props.error, _el$90, _co$16);
+            return _el$87;
           }
         }), _$memo(() => formatRow()), (() => {
-          var _el$77 = _$getNextElement(_tmpl$24),
-            _el$88 = _el$77.firstChild,
-            [_el$89, _co$18] = _$getNextMarker(_el$88.nextSibling),
-            _el$90 = _el$89.nextSibling,
-            [_el$91, _co$19] = _$getNextMarker(_el$90.nextSibling),
-            _el$78 = _el$91.nextSibling,
-            _el$86 = _el$78.firstChild,
-            [_el$87, _co$17] = _$getNextMarker(_el$86.nextSibling),
-            _el$79 = _el$87.nextSibling,
-            _el$80 = _el$79.firstChild,
-            [_el$81, _co$14] = _$getNextMarker(_el$80.nextSibling),
-            _el$82 = _el$81.nextSibling,
-            [_el$83, _co$15] = _$getNextMarker(_el$82.nextSibling),
-            _el$84 = _el$83.nextSibling,
-            [_el$85, _co$16] = _$getNextMarker(_el$84.nextSibling),
-            _el$92 = _el$78.nextSibling,
-            [_el$93, _co$20] = _$getNextMarker(_el$92.nextSibling);
-          _$insert(_el$77, attachControl, _el$89, _co$18);
-          _$insert(_el$77, fileInput, _el$91, _co$19);
-          _$insert(_el$78, field, _el$87, _co$17);
-          _$insert(_el$79, formatToggle, _el$81, _co$14);
-          _$insert(_el$79, emojiButton, _el$83, _co$15);
-          _$insert(_el$79, microphoneControl, _el$85, _co$16);
-          _$insert(_el$77, sendControl, _el$93, _co$20);
-          return _el$77;
+          var _el$91 = _$getNextElement(_tmpl$26),
+            _el$102 = _el$91.firstChild,
+            [_el$103, _co$21] = _$getNextMarker(_el$102.nextSibling),
+            _el$104 = _el$103.nextSibling,
+            [_el$105, _co$22] = _$getNextMarker(_el$104.nextSibling),
+            _el$92 = _el$105.nextSibling,
+            _el$100 = _el$92.firstChild,
+            [_el$101, _co$20] = _$getNextMarker(_el$100.nextSibling),
+            _el$93 = _el$101.nextSibling,
+            _el$94 = _el$93.firstChild,
+            [_el$95, _co$17] = _$getNextMarker(_el$94.nextSibling),
+            _el$96 = _el$95.nextSibling,
+            [_el$97, _co$18] = _$getNextMarker(_el$96.nextSibling),
+            _el$98 = _el$97.nextSibling,
+            [_el$99, _co$19] = _$getNextMarker(_el$98.nextSibling),
+            _el$106 = _el$92.nextSibling,
+            [_el$107, _co$23] = _$getNextMarker(_el$106.nextSibling);
+          _$insert(_el$91, attachControl, _el$103, _co$21);
+          _$insert(_el$91, fileInput, _el$105, _co$22);
+          _$insert(_el$92, field, _el$101, _co$20);
+          _$insert(_el$93, formatToggle, _el$95, _co$17);
+          _$insert(_el$93, emojiButton, _el$97, _co$18);
+          _$insert(_el$93, microphoneControl, _el$99, _co$19);
+          _$insert(_el$91, sendControl, _el$107, _co$23);
+          return _el$91;
         })()];
       }
-    }), _el$99, _co$23);
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$113, _co$26);
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -2310,60 +2934,60 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$101, _co$24);
-    _$insert(_el$102, _$createComponent(Show, {
+    }), _el$115, _co$27);
+    _$insert(_el$116, _$createComponent(Show, {
       get when() {
         return suggestionAnnouncement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$197 = _$getNextElement(_tmpl$10);
-        _$insert(_el$197, () => announced.text);
-        return _el$197;
+        var _el$211 = _$getNextElement(_tmpl$10);
+        _$insert(_el$211, () => announced.text);
+        return _el$211;
       })()
     }));
-    _$insert(_el$103, _$createComponent(Show, {
+    _$insert(_el$117, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!suggestionsOpen())() && commandStatus();
       },
       children: status => (() => {
-        var _el$198 = _$getNextElement(_tmpl$43),
-          _el$199 = _el$198.firstChild,
-          _el$200 = _el$199.nextSibling;
-        _$insert(_el$200, () => status().text);
+        var _el$212 = _$getNextElement(_tmpl$45),
+          _el$213 = _el$212.firstChild,
+          _el$214 = _el$213.nextSibling;
+        _$insert(_el$214, () => status().text);
         _$effect(_p$ => {
-          var _v$44 = status().tone,
-            _v$45 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
-          _v$44 !== _p$.e && _$setAttribute(_el$198, "data-tone", _p$.e = _v$44);
-          _v$45 !== _p$.t && _$className(_el$199, _p$.t = _v$45);
+          var _v$54 = status().tone,
+            _v$55 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
+          _v$54 !== _p$.e && _$setAttribute(_el$212, "data-tone", _p$.e = _v$54);
+          _v$55 !== _p$.t && _$className(_el$213, _p$.t = _v$55);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$198;
+        return _el$212;
       })()
-    }), _el$105, _co$25);
-    _$insert(_el$103, _$createComponent(Show, {
+    }), _el$119, _co$28);
+    _$insert(_el$117, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!suggestionsOpen())() && announcement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$201 = _$getNextElement(_tmpl$44);
-        _$insert(_el$201, () => announced.text);
-        return _el$201;
+        var _el$215 = _$getNextElement(_tmpl$46);
+        _$insert(_el$215, () => announced.text);
+        return _el$215;
       })()
-    }), _el$107, _co$26);
+    }), _el$121, _co$29);
     _$effect(_p$ => {
-      var _v$24 = `k2b-chat-composer ${props.class ?? ""}`,
-        _v$25 = running() ? "true" : undefined,
-        _v$26 = conversation() ? "conversation" : undefined,
-        _v$27 = props.label ?? chatMessages().messageComposer;
-      _v$24 !== _p$.e && _$className(_el$70, _p$.e = _v$24);
-      _v$25 !== _p$.t && _$setAttribute(_el$70, "data-running", _p$.t = _v$25);
-      _v$26 !== _p$.a && _$setAttribute(_el$70, "data-variant", _p$.a = _v$26);
-      _v$27 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$27);
+      var _v$34 = `k2b-chat-composer ${props.class ?? ""}`,
+        _v$35 = running() ? "true" : undefined,
+        _v$36 = conversation() ? "conversation" : undefined,
+        _v$37 = props.label ?? chatMessages().messageComposer;
+      _v$34 !== _p$.e && _$className(_el$84, _p$.e = _v$34);
+      _v$35 !== _p$.t && _$setAttribute(_el$84, "data-running", _p$.t = _v$35);
+      _v$36 !== _p$.a && _$setAttribute(_el$84, "data-variant", _p$.a = _v$36);
+      _v$37 !== _p$.o && _$setAttribute(_el$84, "aria-label", _p$.o = _v$37);
       return _p$;
     }, {
       e: undefined,
@@ -2371,8 +2995,8 @@ export function ChatComposer(props) {
       a: undefined,
       o: undefined
     });
-    return _el$42;
+    return _el$49;
   })();
 }
-_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "mousedown"]);
+_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "mousedown", "focusout"]);
 //# sourceMappingURL=ChatComposer.js.map