@k2b/ui 0.26.0 → 0.27.0

package/dist/browser/chat/ChatComposer.js

@@ -25,33 +25,40 @@ 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(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div role=status>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><small>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`);
-import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+  _tmpl$11 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$12 = /*#__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><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<b>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div role=status>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$24 = /*#__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$25 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
+import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
 import { replaceTextareaRange } from "../inputs/editor-dom";
@@ -65,14 +72,25 @@ import { useSelectMessages } from "../inputs/select-messages";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
-import { conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
+import { chatCommandKey, conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
 import { useChatMessages } from "./chat-messages";
+import { chatCommandListModel, parseChatCommandQuery } from "./command-search";
 import { chatCommandQuery, chatMentionSegments, reconcileChatMentions } from "./composer-document";
 const composerMaxInputHeight = 309;
+const commandDoneMs = 3_000;
 /** Emoji suggestions for a `:shortcode`, as many as fit the list without scrolling on a phone. */
 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. */
+
+/** A fixed place in the slash list. Sections keep the given order, also while searching. */
+
+/** First-word narrowing; Tab writes `words[0]` followed by a space. */
+
+/** Passed as the third argument to `searchCommands`. */
+
 /** The row stays short: what a chat message needs. Other Markdown, typed by hand, keeps working. */
 const formatTools = [{
   id: "bold",
@@ -115,7 +133,36 @@ export function ChatComposer(props) {
   const selectMessages = useSelectMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
   const formatGroupId = `${commandListId}-format`;
+  // Emoji suggestions keep their index-based selection and ids.
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
+  const [activeCommandKey, setActiveCommandKey] = createSignal();
+  const [commandMoved, setCommandMoved] = createSignal(false);
+  const commandIds = new Map();
+  let commandIdCounter = 0;
+  const commandOptionId = command => {
+    const key = chatCommandKey(command);
+    if (!commandIds.has(key)) commandIds.set(key, commandIdCounter++);
+    return `${commandListId}-c${commandIds.get(key)}`;
+  };
+  const [closedAt, setClosedAt] = createSignal();
+  // Where the pending native edit starts; a selection replaced as a whole starts at its beginning.
+  let inputStart;
+  const [commandStatus, setCommandStatus] = createSignal();
+  const [announcement, setAnnouncement] = createSignal();
+  let statusTimer;
+  let disposed = false;
+  const showCommandStatus = status => {
+    if (disposed) return;
+    clearTimeout(statusTimer);
+    setCommandStatus(status);
+    if (status?.tone === "done") {
+      statusTimer = setTimeout(() => setCommandStatus(undefined), commandDoneMs);
+    }
+  };
+  onCleanup(() => {
+    disposed = true;
+    clearTimeout(statusTimer);
+  });
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
   let composerRef;
@@ -139,6 +186,9 @@ export function ChatComposer(props) {
   const [dismissed, setDismissed] = createSignal(false);
   const [composing, setComposing] = createSignal(false);
   const [searchResults, setSearchResults] = createSignal([]);
+  const [searchResultsQuery, setSearchResultsQuery] = createSignal();
+  const [searchResultsScope, setSearchResultsScope] = createSignal();
+  const [suggestionAnnouncement, setSuggestionAnnouncement] = createSignal();
   const [searching, setSearching] = createSignal(false);
   const [searchError, setSearchError] = createSignal(false);
   const [executing, setExecuting] = createSignal(false);
@@ -158,13 +208,51 @@ export function ChatComposer(props) {
     return token && index ? suggestEmoji(index, token.query, emojiSuggestionLimit) : [];
   });
   const emojiOpen = () => emojiMatches().length > 0;
-  const commandQuery = createMemo(() => dismissed() || composing() ? null : chatCommandQuery(props.value, caret(), selectionEnd()));
-  const commandMatches = createMemo(() => {
-    const token = commandQuery();
-    if (!token) return [];
-    return [...(props.commands ?? []).filter(command => command.name.toLowerCase().includes(token.query.toLowerCase())), ...searchResults()];
+  const caretCommandToken = createMemo(() => chatCommandQuery(props.value, caret(), selectionEnd()));
+  const caretCommandStart = createMemo(() => caretCommandToken()?.start);
+  // Retained server rows belong to one `/`: they go when it does or when another `/` starts.
+  createEffect(() => {
+    caretCommandStart();
+    setSearchResults([]);
+    setSearchResultsQuery(undefined);
+  });
+  // Escape closes the list for one `/` character, wherever the caret or selection goes; only that `/` going away ends it.
+  createEffect(() => {
+    const closed = closedAt();
+    if (closed !== undefined && props.value[closed] !== "/") setClosedAt(undefined);
+  });
+  const commandQuery = createMemo(() => {
+    const token = caretCommandToken();
+    return dismissed() || composing() || token?.start === closedAt() ? null : token;
   });
-  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (props.commands?.length || props.searchCommands));
+  const parsedCommandQuery = createMemo(() => parseChatCommandQuery(commandQuery()?.query ?? "", props.commandScopes ?? []));
+  const currentCommandScope = createMemo(() => parsedCommandQuery().scope?.id);
+  createEffect(() => {
+    currentCommandScope();
+    setSearchResults([]);
+    setSearchResultsQuery(undefined);
+  });
+  const localCommands = createMemo(() => props.commands ?? []);
+  const commandModel = createMemo(() => chatCommandListModel({
+    query: commandQuery()?.query ?? "",
+    scopes: props.commandScopes,
+    sections: props.commandSections,
+    commands: localCommands(),
+    searchResults: searchResultsScope() === parsedCommandQuery().scope?.id ? searchResults() : [],
+    searchResultsFresh: searchResultsQuery() === commandQuery()?.query && searchResultsScope() === parsedCommandQuery().scope?.id,
+    searchSettled: searchResultsQuery() !== undefined && searchResultsScope() === parsedCommandQuery().scope?.id,
+    searching: searching()
+  }));
+  const commandMatches = createMemo(() => commandQuery() ? commandModel().rows.map(row => row.command) : []);
+  const currentCommandQuery = createMemo(() => caretCommandToken()?.query);
+  // Arrow marking belongs to one token in one draft; another draft or `/` starts at the top row again.
+  createEffect(() => {
+    props.draftKey;
+    caretCommandStart();
+    currentCommandQuery();
+    setCommandMoved(false);
+  });
+  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands));
   const suggestionsOpen = () => commandsOpen() || emojiOpen();
   createEffect(() => {
     if (!suggestionsOpen()) return;
@@ -192,20 +280,33 @@ export function ChatComposer(props) {
     });
   });
   createEffect(() => {
+    props.draftKey;
     const token = commandQuery();
-    setSearchResults([]);
     setSearchError(false);
     if (!token || !props.searchCommands) {
       setSearching(false);
       return;
     }
+    const parsed = parsedCommandQuery();
     const abort = new AbortController();
     setSearching(true);
     const timer = setTimeout(() => {
-      Promise.resolve(props.searchCommands(token.query, abort.signal)).then(results => {
-        if (!abort.signal.aborted) setSearchResults(results);
+      Promise.resolve().then(() => props.searchCommands(parsed.query, abort.signal, {
+        scope: parsed.scope?.id
+      })).then(results => {
+        if (!abort.signal.aborted) {
+          batch(() => {
+            setSearchResults(results);
+            setSearchResultsQuery(token.query);
+            setSearchResultsScope(parsed.scope?.id);
+          });
+        }
       }).catch(() => {
-        if (!abort.signal.aborted) setSearchError(true);
+        if (!abort.signal.aborted) {
+          setSearchResults([]);
+          setSearchResultsQuery(undefined);
+          setSearchError(true);
+        }
       }).finally(() => {
         if (!abort.signal.aborted) setSearching(false);
       });
@@ -215,6 +316,52 @@ export function ChatComposer(props) {
       abort.abort();
     });
   });
+  let settledEmpty;
+  createEffect(() => {
+    const token = commandQuery();
+    if (!token || parsedCommandQuery().scope || searchError()) {
+      settledEmpty = undefined;
+      return;
+    }
+    const previous = settledEmpty;
+    if (/\s$/.test(token.query) && previous?.start === token.start && previous.query.trimEnd() === token.query.trimEnd()) {
+      setClosedAt(token.start);
+      return;
+    }
+    const settled = !searching() && (!props.searchCommands || searchResultsQuery() === token.query);
+    if (settled && commandModel().empty) {
+      settledEmpty = {
+        start: token.start,
+        query: token.query
+      };
+      if (/\s$/.test(token.query)) setClosedAt(token.start);
+    } else if (!searching()) settledEmpty = undefined;
+  });
+  let lastSuggestion;
+  createEffect(() => {
+    const model = commandModel();
+    const query = commandQuery()?.query;
+    if (!commandsOpen()) {
+      setSuggestionAnnouncement(undefined);
+      lastSuggestion = undefined;
+      return;
+    }
+    if (searching() || searchError() || props.searchCommands && searchResultsQuery() !== query) return;
+    const text = chatMessages().commandSuggestions({
+      count: model.rows.length
+    });
+    const timer = setTimeout(() => {
+      if (lastSuggestion && lastSuggestion.query === query && lastSuggestion.text === text) return;
+      lastSuggestion = {
+        query: query ?? "",
+        text
+      };
+      setSuggestionAnnouncement({
+        text
+      });
+    }, 350);
+    onCleanup(() => clearTimeout(timer));
+  });
   const history = [];
   let historyIndex = -1;
   createEffect(() => {
@@ -223,6 +370,11 @@ export function ChatComposer(props) {
       history.length = 0;
       historyIndex = -1;
       setDismissed(true);
+      setClosedAt(undefined);
+      setSearchResults([]);
+      setSearchResultsQuery(undefined);
+      // A failure belongs to the draft it happened in; success notes may follow a command into the chat it opened.
+      if (commandStatus()?.tone === "error") showCommandStatus();
     });
   });
   const snapshot = () => ({
@@ -241,6 +393,15 @@ export function ChatComposer(props) {
     }
   };
   const edit = (value, nextMentions = reconcileChatMentions(props.value, value, mentions())) => {
+    if (commandStatus()?.tone === "error") showCommandStatus();
+    // An edit that starts at or before the closed `/` (select all, then type `/`) replaces it; the new `/` may open again.
+    const closed = closedAt();
+    if (closed !== undefined) {
+      let same = 0;
+      while (same <= closed && props.value[same] === value[same]) same++;
+      if (Math.min(same, inputStart ?? same) <= closed) setClosedAt(undefined);
+    }
+    inputStart = undefined;
     record();
     props.onValueChange(value);
     props.onMentionsChange?.(nextMentions);
@@ -260,10 +421,25 @@ export function ChatComposer(props) {
     });
   };
   const syncCaret = () => {
-    setCaret(textareaRef?.selectionStart ?? props.value.length);
-    setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
+    // One update, so no effect sees a half-moved selection (it would read as "no `/` here" and reopen a closed list).
+    batch(() => {
+      setCaret(textareaRef?.selectionStart ?? props.value.length);
+      setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
+    });
   };
-  const selectedCommand = () => commandMatches()[selectedCommandIndex()];
+  const selectedCommand = createMemo(() => {
+    const rows = commandMatches();
+    return commandMoved() && rows.find(command => chatCommandKey(command) === activeCommandKey()) || rows[0];
+  });
+  const selectedCommandKey = createMemo(() => {
+    const command = selectedCommand();
+    return command ? chatCommandKey(command) : undefined;
+  });
+  createEffect(() => {
+    if (!commandsOpen()) commandIds.clear();
+    selectedCommandKey();
+    setAnnouncement(undefined);
+  });
   const busy = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles());
   const blocked = () => busy() || submitting();
   /** The conversation field stays editable while a message is sent, so it keeps the focus and a phone its keyboard. */
@@ -326,21 +502,23 @@ export function ChatComposer(props) {
     }
   });
   createEffect(() => {
-    commandMatches();
     emojiMatches();
     setSelectedCommandIndex(0);
   });
   createEffect(() => {
-    const index = selectedCommandIndex();
-    commandMatches();
-    emojiMatches();
+    const command = selectedCommand();
+    const id = emojiOpen() ? `${commandListId}-${selectedCommandIndex()}` : command ? commandOptionId(command) : undefined;
     queueMicrotask(() => {
       const list = commandListRef;
-      const item = list?.querySelector(`[id="${commandListId}-${index}"]`);
+      const item = id ? list?.querySelector(`[id="${id}"]`) : undefined;
       if (!list || !item?.isConnected) return;
-      if (item.offsetTop < list.scrollTop) list.scrollTop = item.offsetTop;else if (item.offsetTop + item.offsetHeight > list.scrollTop + list.clientHeight) {
-        list.scrollTop = item.offsetTop + item.offsetHeight - list.clientHeight;
-      }
+      // Measured against the visible part of the list: a sticky section heading covers the top of it.
+      const heading = item.closest(".k2b-chat-composer__command-group")?.querySelector(".k2b-chat-composer__command-heading");
+      const listTop = list.getBoundingClientRect().top + list.clientTop;
+      const box = item.getBoundingClientRect();
+      const top = box.top - listTop - (heading?.offsetHeight ?? 0);
+      const bottom = box.bottom - listTop - list.clientHeight;
+      if (top < 0) list.scrollTop += top;else if (bottom > 0) list.scrollTop += bottom;
     });
   });
   createEffect(() => {
@@ -436,9 +614,26 @@ export function ChatComposer(props) {
       });
     }
   };
-  const executeCommand = async command => {
+  const narrowCommand = command => {
+    const scope = props.commandScopes?.find(scope => scope.id === command.scope);
+    const word = scope?.words[0];
     const token = commandQuery();
-    if (!token || command.disabled || blocked()) return;
+    if (!word || !token || !textareaRef) return false;
+    replaceTextareaRange(textareaRef, token.start + 1, token.end, `${word} `);
+    syncCaret();
+    return true;
+  };
+  const executeCommand = async (command, tab = false) => {
+    const token = commandQuery();
+    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.
+      setAnnouncement(command.reason ? {
+        text: command.reason
+      } : undefined);
+      return;
+    }
+    if (command.scope && (tab || !command.action && !command.mention) && narrowCommand(command)) return;
     const previous = snapshot();
     const key = props.draftKey;
     const replacement = command.mention ? command.mention.name + " " : "";
@@ -449,32 +644,66 @@ export function ChatComposer(props) {
       end: token.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],
+      index: historyIndex
+    };
     edit(nextValue, nextMentions);
     setDismissed(true);
     setExecuting(true);
     let submitRequested = false;
+    let restored = false;
+    const restore = () => {
+      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;
+      restored = true;
+    };
+    showCommandStatus(command.busyLabel ? {
+      tone: "busy",
+      text: command.busyLabel
+    } : undefined);
     try {
-      await command.action?.({
+      const result = await command.action?.({
         setValue: value => edit(value),
         submit: () => {
           submitRequested = true;
         },
         focus
       });
+      if (result === "cancelled") {
+        submitRequested = false;
+        restore();
+        showCommandStatus();
+      } else if (result) {
+        showCommandStatus({
+          tone: "done",
+          text: result.done
+        });
+      }
     } catch (error) {
       submitRequested = false;
-      if (props.draftKey === key && props.value === nextValue) {
-        props.onValueChange(previous.value);
-        props.onMentionsChange?.(previous.mentions);
-      }
-      props.onError?.(error);
+      restore();
+      // An unmounted composer has no status line left; the app's error channel keeps the failure from going silent.
+      if (disposed) props.onError?.(error);else showCommandStatus({
+        tone: "error",
+        text: error instanceof Error && error.message ? error.message : chatMessages().commandFailed
+      });
     } finally {
+      if (commandStatus()?.tone === "busy") showCommandStatus();
       setExecuting(false);
     }
     if (submitRequested && props.draftKey === key) await submit();
     queueMicrotask(() => {
       if (props.draftKey !== key) return;
-      textareaRef?.setSelectionRange(token.start + replacement.length, token.start + replacement.length);
+      if (restored || props.value === nextValue) {
+        const position = restored ? token.end : token.start + replacement.length;
+        textareaRef?.setSelectionRange(position, position);
+      }
       syncCaret();
       autoResize();
       focus();
@@ -552,19 +781,28 @@ export function ChatComposer(props) {
     if (commandsOpen()) {
       if (event.key === "ArrowUp" || event.key === "ArrowDown") {
         event.preventDefault();
-        setSelectedCommandIndex(index => nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1));
+        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.
-      if ((event.key === "Tab" || event.key === "Enter" && !event.ctrlKey && !event.metaKey) && matches.length > 0) {
+      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();
-        if (command) void executeCommand(command);
+        // 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();
-        setDismissed(true);
+        setClosedAt(commandQuery()?.start);
         return;
       }
     }
@@ -1043,6 +1281,7 @@ export function ChatComposer(props) {
     }), _el$25, _co$4);
     _el$22.$$keydown = onKeyDown;
     _el$22.$$beforeinput = event => {
+      inputStart = event.currentTarget.selectionStart;
       if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
         event.preventDefault();
         restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
@@ -1073,8 +1312,10 @@ export function ChatComposer(props) {
       props.onPaste?.(event);
     });
     _el$22.$$input = event => {
-      edit(event.currentTarget.value);
-      syncCaret();
+      batch(() => {
+        edit(event.currentTarget.value);
+        syncCaret();
+      });
       autoResize();
       const input = event;
       if (input.inputType === "insertText" && input.data === ":") queueMicrotask(completeShortcode);
@@ -1103,7 +1344,7 @@ export function ChatComposer(props) {
         _v$0 = suggestionsOpen() ? "list" : undefined,
         _v$1 = suggestionsOpen() ? commandListId : undefined,
         _v$10 = suggestionsOpen() ? "true" : undefined,
-        _v$11 = (emojiOpen() ? emojiMatches()[selectedCommandIndex()] : selectedCommand()) ? `${commandListId}-${selectedCommandIndex()}` : 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);
@@ -1133,78 +1374,154 @@ export function ChatComposer(props) {
     _$runHydrationEvents();
     return _el$17;
   })();
+  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;
+    return (() => {
+      var _el$29 = _$getNextElement(_tmpl$12),
+        _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$29.$$click = event => {
+        event.preventDefault();
+        void executeCommand(command);
+      };
+      _el$29.$$pointerdown = event => event.preventDefault();
+      _$insert(_el$32, _$createComponent(Show, {
+        get when() {
+          return highlight();
+        },
+        get fallback() {
+          return title();
+        },
+        children: range => [_$memo(() => title().slice(0, range()[0])), (() => {
+          var _el$36 = _$getNextElement(_tmpl$13);
+          _$insert(_el$36, () => title().slice(range()[0], range()[1]));
+          return _el$36;
+        })(), _$memo(() => title().slice(range()[1]))]
+      }));
+      _$insert(_el$31, _$createComponent(Show, {
+        get when() {
+          return command.reason ?? command.description;
+        },
+        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;
+        }
+      }), _el$35, _co$6);
+      _$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);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined
+      });
+      _$runHydrationEvents();
+      return _el$29;
+    })();
+  };
   return (() => {
-    var _el$29 = _$getNextElement(_tmpl$21),
-      _el$89 = _el$29.firstChild,
-      [_el$90, _co$23] = _$getNextMarker(_el$89.nextSibling),
-      _el$57 = _el$90.nextSibling,
-      _el$81 = _el$57.firstChild,
-      [_el$82, _co$19] = _$getNextMarker(_el$81.nextSibling),
-      _el$83 = _el$82.nextSibling,
-      [_el$84, _co$20] = _$getNextMarker(_el$83.nextSibling),
-      _el$85 = _el$84.nextSibling,
-      [_el$86, _co$21] = _$getNextMarker(_el$85.nextSibling),
-      _el$87 = _el$86.nextSibling,
-      [_el$88, _co$22] = _$getNextMarker(_el$87.nextSibling);
-    _$insert(_el$29, _$createComponent(Show, {
+    var _el$37 = _$getNextElement(_tmpl$24),
+      _el$103 = _el$37.firstChild,
+      [_el$104, _co$26] = _$getNextMarker(_el$103.nextSibling),
+      _el$65 = _el$104.nextSibling,
+      _el$89 = _el$65.firstChild,
+      [_el$90, _co$20] = _$getNextMarker(_el$89.nextSibling),
+      _el$91 = _el$90.nextSibling,
+      [_el$92, _co$21] = _$getNextMarker(_el$91.nextSibling),
+      _el$93 = _el$92.nextSibling,
+      [_el$94, _co$22] = _$getNextMarker(_el$93.nextSibling),
+      _el$95 = _el$94.nextSibling,
+      [_el$96, _co$23] = _$getNextMarker(_el$95.nextSibling),
+      _el$97 = _el$65.nextSibling,
+      _el$98 = _el$97.nextSibling,
+      _el$99 = _el$98.firstChild,
+      [_el$100, _co$24] = _$getNextMarker(_el$99.nextSibling),
+      _el$101 = _el$100.nextSibling,
+      [_el$102, _co$25] = _$getNextMarker(_el$101.nextSibling);
+    _$insert(_el$37, _$createComponent(Show, {
       get when() {
         return suggestionsOpen() || hasAccessory();
       },
       get children() {
-        var _el$30 = _$getNextElement(_tmpl$16),
-          _el$31 = _el$30.firstChild,
-          _el$53 = _el$31.nextSibling,
-          [_el$54, _co$1] = _$getNextMarker(_el$53.nextSibling),
-          _el$55 = _el$54.nextSibling,
-          [_el$56, _co$10] = _$getNextMarker(_el$55.nextSibling);
-        _$insert(_el$31, accessory);
-        _$insert(_el$30, _$createComponent(Show, {
+        var _el$38 = _$getNextElement(_tmpl$19),
+          _el$39 = _el$38.firstChild,
+          _el$61 = _el$39.nextSibling,
+          [_el$62, _co$10] = _$getNextMarker(_el$61.nextSibling),
+          _el$63 = _el$62.nextSibling,
+          [_el$64, _co$11] = _$getNextMarker(_el$63.nextSibling);
+        _$insert(_el$39, accessory);
+        _$insert(_el$38, _$createComponent(Show, {
           get when() {
             return emojiOpen();
           },
           get children() {
-            var _el$32 = _$getNextElement(_tmpl$11),
-              _el$33 = _el$32.firstChild;
+            var _el$40 = _$getNextElement(_tmpl$14),
+              _el$41 = _el$40.firstChild;
             var _ref$6 = commandListRef;
-            typeof _ref$6 === "function" ? _$use(_ref$6, _el$33) : commandListRef = _el$33;
-            _$setAttribute(_el$33, "id", commandListId);
-            _$insert(_el$33, _$createComponent(For, {
+            typeof _ref$6 === "function" ? _$use(_ref$6, _el$41) : commandListRef = _el$41;
+            _$setAttribute(_el$41, "id", commandListId);
+            _$insert(_el$41, _$createComponent(For, {
               get each() {
                 return emojiMatches();
               },
               children: (entry, index) => (() => {
-                var _el$91 = _$getNextElement(_tmpl$22),
-                  _el$92 = _el$91.firstChild,
-                  _el$93 = _el$92.nextSibling,
-                  _el$94 = _el$93.nextSibling,
-                  [_el$95, _co$24] = _$getNextMarker(_el$94.nextSibling);
-                _el$91.$$click = () => pickEmojiSuggestion(index());
-                _el$91.$$pointerdown = event => event.preventDefault();
-                _$insert(_el$92, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
-                _$insert(_el$93, () => emojiName(entry, locale()));
-                _$insert(_el$91, _$createComponent(Show, {
+                var _el$105 = _$getNextElement(_tmpl$25),
+                  _el$106 = _el$105.firstChild,
+                  _el$107 = _el$106.nextSibling,
+                  _el$108 = _el$107.nextSibling,
+                  [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling);
+                _el$105.$$click = () => pickEmojiSuggestion(index());
+                _el$105.$$pointerdown = event => event.preventDefault();
+                _$insert(_el$106, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$107, () => emojiName(entry, locale()));
+                _$insert(_el$105, _$createComponent(Show, {
                   get when() {
                     return entry.shortcodes[0];
                   },
                   children: code => (() => {
-                    var _el$96 = _$getNextElement(_tmpl$23),
-                      _el$97 = _el$96.firstChild,
-                      _el$99 = _el$97.nextSibling,
-                      [_el$100, _co$25] = _$getNextMarker(_el$99.nextSibling),
-                      _el$98 = _el$100.nextSibling;
-                    _$insert(_el$96, code, _el$100, _co$25);
-                    return _el$96;
+                    var _el$110 = _$getNextElement(_tmpl$26),
+                      _el$111 = _el$110.firstChild,
+                      _el$113 = _el$111.nextSibling,
+                      [_el$114, _co$28] = _$getNextMarker(_el$113.nextSibling),
+                      _el$112 = _el$114.nextSibling;
+                    _$insert(_el$110, code, _el$114, _co$28);
+                    return _el$110;
                   })()
-                }), _el$95, _co$24);
+                }), _el$109, _co$27);
                 _$effect(_p$ => {
-                  var _v$19 = `${commandListId}-${index()}`,
-                    _v$20 = index() === selectedCommandIndex(),
-                    _v$21 = emojiName(entry, locale()),
-                    _v$22 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$19 !== _p$.e && _$setAttribute(_el$91, "id", _p$.e = _v$19);
-                  _v$20 !== _p$.t && _$setAttribute(_el$91, "aria-selected", _p$.t = _v$20);
-                  _v$21 !== _p$.a && _$setAttribute(_el$91, "aria-label", _p$.a = _v$21);
-                  _v$22 !== _p$.o && _$setAttribute(_el$91, "data-active", _p$.o = _v$22);
+                  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$105, "id", _p$.e = _v$28);
+                  _v$29 !== _p$.t && _$setAttribute(_el$105, "aria-selected", _p$.t = _v$29);
+                  _v$30 !== _p$.a && _$setAttribute(_el$105, "aria-label", _p$.a = _v$30);
+                  _v$31 !== _p$.o && _$setAttribute(_el$105, "data-active", _p$.o = _v$31);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1213,343 +1530,387 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$91;
+                return _el$105;
               })()
             }));
-            _$effect(() => _$setAttribute(_el$33, "aria-label", chatMessages().emojiSuggestions));
-            return _el$32;
+            _$effect(() => _$setAttribute(_el$41, "aria-label", chatMessages().emojiSuggestions));
+            return _el$40;
           }
-        }), _el$54, _co$1);
-        _$insert(_el$30, _$createComponent(Show, {
+        }), _el$62, _co$10);
+        _$insert(_el$38, _$createComponent(Show, {
           get when() {
             return commandsOpen();
           },
           get children() {
-            var _el$34 = _$getNextElement(_tmpl$15),
-              _el$35 = _el$34.firstChild,
-              _el$45 = _el$35.firstChild,
-              [_el$46, _co$7] = _$getNextMarker(_el$45.nextSibling),
-              _el$47 = _el$46.nextSibling,
-              [_el$48, _co$8] = _$getNextMarker(_el$47.nextSibling),
-              _el$49 = _el$48.nextSibling,
-              [_el$50, _co$9] = _$getNextMarker(_el$49.nextSibling),
-              _el$51 = _el$50.nextSibling,
-              [_el$52, _co$0] = _$getNextMarker(_el$51.nextSibling);
+            var _el$42 = _$getNextElement(_tmpl$18),
+              _el$43 = _el$42.firstChild,
+              _el$53 = _el$43.firstChild,
+              [_el$54, _co$8] = _$getNextMarker(_el$53.nextSibling),
+              _el$55 = _el$54.nextSibling,
+              [_el$56, _co$9] = _$getNextMarker(_el$55.nextSibling),
+              _el$57 = _el$56.nextSibling,
+              [_el$58, _co$0] = _$getNextMarker(_el$57.nextSibling),
+              _el$59 = _el$58.nextSibling,
+              [_el$60, _co$1] = _$getNextMarker(_el$59.nextSibling);
             var _ref$7 = commandListRef;
-            typeof _ref$7 === "function" ? _$use(_ref$7, _el$35) : commandListRef = _el$35;
-            _$setAttribute(_el$35, "id", commandListId);
-            _$insert(_el$35, _$createComponent(For, {
+            typeof _ref$7 === "function" ? _$use(_ref$7, _el$43) : commandListRef = _el$43;
+            _$setAttribute(_el$43, "id", commandListId);
+            _$insert(_el$43, _$createComponent(For, {
               get each() {
-                return commandMatches();
+                return commandModel().groups.map(commandGroupKey);
               },
-              children: (command, index) => (() => {
-                var _el$101 = _$getNextElement(_tmpl$24),
-                  _el$102 = _el$101.firstChild,
-                  _el$103 = _el$102.nextSibling,
-                  _el$104 = _el$103.nextSibling;
-                _el$101.$$click = () => void executeCommand(command);
-                _el$101.$$pointerdown = event => event.preventDefault();
-                _$insert(_el$103, () => command.label ?? `/${command.name}`);
-                _$insert(_el$104, () => command.description);
-                _$effect(_p$ => {
-                  var _v$23 = `${commandListId}-${index()}`,
-                    _v$24 = index() === selectedCommandIndex(),
-                    _v$25 = command.disabled,
-                    _v$26 = index() === selectedCommandIndex() ? "true" : undefined,
-                    _v$27 = command.icon ?? "ti ti-slash";
-                  _v$23 !== _p$.e && _$setAttribute(_el$101, "id", _p$.e = _v$23);
-                  _v$24 !== _p$.t && _$setAttribute(_el$101, "aria-selected", _p$.t = _v$24);
-                  _v$25 !== _p$.a && _$setAttribute(_el$101, "aria-disabled", _p$.a = _v$25);
-                  _v$26 !== _p$.o && _$setAttribute(_el$101, "data-active", _p$.o = _v$26);
-                  _v$27 !== _p$.i && _$className(_el$102, _p$.i = _v$27);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined,
-                  o: undefined,
-                  i: undefined
+              children: key => {
+                const group = createMemo(() => commandModel().groups.find(group => commandGroupKey(group) === key));
+                const headingId = () => `${commandListId}-g-${key === "scope" ? "scope" : props.commandSections?.findIndex(section => section.id === group()?.section?.id)}`;
+                const rows = () => group()?.rows.map(row => row.command) ?? [];
+                return _$createComponent(Show, {
+                  when: key !== "flat",
+                  get fallback() {
+                    return _$createComponent(For, {
+                      get each() {
+                        return rows();
+                      },
+                      children: renderCommandRow
+                    });
+                  },
+                  get children() {
+                    var _el$115 = _$getNextElement(_tmpl$29),
+                      _el$116 = _el$115.firstChild,
+                      _el$117 = _el$116.firstChild,
+                      _el$119 = _el$117.nextSibling,
+                      [_el$120, _co$29] = _$getNextMarker(_el$119.nextSibling),
+                      _el$122 = _el$116.nextSibling,
+                      [_el$123, _co$30] = _$getNextMarker(_el$122.nextSibling),
+                      _el$124 = _el$123.nextSibling,
+                      [_el$125, _co$31] = _$getNextMarker(_el$124.nextSibling);
+                    _$insert(_el$117, () => group()?.scopeTitle ?? group()?.section?.label);
+                    _$insert(_el$116, _$createComponent(Show, {
+                      get when() {
+                        return group()?.loading;
+                      },
+                      get children() {
+                        return _$getNextElement(_tmpl$27);
+                      }
+                    }), _el$120, _co$29);
+                    _$insert(_el$115, _$createComponent(For, {
+                      get each() {
+                        return rows();
+                      },
+                      children: renderCommandRow
+                    }), _el$123, _co$30);
+                    _$insert(_el$115, _$createComponent(Show, {
+                      get when() {
+                        return group()?.placeholder;
+                      },
+                      get children() {
+                        return _$getNextElement(_tmpl$28);
+                      }
+                    }), _el$125, _co$31);
+                    _$effect(_p$ => {
+                      var _v$32 = headingId(),
+                        _v$33 = headingId();
+                      _v$32 !== _p$.e && _$setAttribute(_el$115, "aria-labelledby", _p$.e = _v$32);
+                      _v$33 !== _p$.t && _$setAttribute(_el$116, "id", _p$.t = _v$33);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$115;
+                  }
                 });
-                _$runHydrationEvents();
-                return _el$101;
-              })()
-            }), _el$46, _co$7);
-            _$insert(_el$35, _$createComponent(Show, {
+              }
+            }), _el$54, _co$8);
+            _$insert(_el$43, _$createComponent(Show, {
               get when() {
-                return searching();
+                return _$memo(() => !!(searching() && commandMatches().length === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
               },
               get children() {
-                var _el$36 = _$getNextElement(_tmpl$12),
-                  _el$37 = _el$36.firstChild,
-                  _el$38 = _el$37.nextSibling;
-                _$insert(_el$38, () => messages().loading);
-                return _el$36;
+                var _el$44 = _$getNextElement(_tmpl$15),
+                  _el$45 = _el$44.firstChild,
+                  _el$46 = _el$45.nextSibling;
+                _$insert(_el$46, () => messages().loading);
+                return _el$44;
               }
-            }), _el$48, _co$8);
-            _$insert(_el$35, _$createComponent(Show, {
+            }), _el$56, _co$9);
+            _$insert(_el$43, _$createComponent(Show, {
               get when() {
                 return searchError();
               },
               get children() {
-                var _el$39 = _$getNextElement(_tmpl$13),
-                  _el$40 = _el$39.firstChild,
-                  _el$41 = _el$40.nextSibling,
-                  _el$42 = _el$41.nextSibling,
-                  [_el$43, _co$6] = _$getNextMarker(_el$42.nextSibling);
-                _$insert(_el$39, () => messages().error, _el$43, _co$6);
-                return _el$39;
+                var _el$47 = _$getNextElement(_tmpl$16),
+                  _el$48 = _el$47.firstChild,
+                  _el$49 = _el$48.nextSibling,
+                  _el$50 = _el$49.nextSibling,
+                  [_el$51, _co$7] = _$getNextMarker(_el$50.nextSibling);
+                _$insert(_el$47, () => messages().error, _el$51, _co$7);
+                return _el$47;
               }
-            }), _el$50, _co$9);
-            _$insert(_el$35, _$createComponent(Show, {
+            }), _el$58, _co$0);
+            _$insert(_el$43, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
               },
               get children() {
-                var _el$44 = _$getNextElement(_tmpl$14);
-                _$insert(_el$44, () => messages().noResults);
-                return _el$44;
+                var _el$52 = _$getNextElement(_tmpl$17);
+                _$insert(_el$52, (() => {
+                  var _c$ = _$memo(() => !!!parsedCommandQuery().query.trim());
+                  return () => _c$() ? messages().noResults : chatMessages().commandsNothingFound({
+                    query: parsedCommandQuery().query.trim()
+                  });
+                })());
+                return _el$52;
               }
-            }), _el$52, _co$0);
-            _$effect(() => _$setAttribute(_el$35, "aria-label", chatMessages().commands));
-            return _el$34;
+            }), _el$60, _co$1);
+            _$effect(_p$ => {
+              var _v$19 = chatMessages().commands,
+                _v$20 = searching() ? "true" : undefined;
+              _v$19 !== _p$.e && _$setAttribute(_el$43, "aria-label", _p$.e = _v$19);
+              _v$20 !== _p$.t && _$setAttribute(_el$43, "aria-busy", _p$.t = _v$20);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$42;
           }
-        }), _el$56, _co$10);
+        }), _el$64, _co$11);
         _$effect(_p$ => {
-          var _v$12 = hasAccessory() ? undefined : "true",
-            _v$13 = suggestionsOpen() ? "hidden" : undefined,
-            _v$14 = suggestionsOpen();
-          _v$12 !== _p$.e && _$setAttribute(_el$30, "data-overlay", _p$.e = _v$12);
-          _v$13 !== _p$.t && _$setStyleProperty(_el$31, "visibility", _p$.t = _v$13);
-          _v$14 !== _p$.a && _$setProperty(_el$31, "inert", _p$.a = _v$14);
+          var _v$21 = hasAccessory() ? undefined : "true",
+            _v$22 = suggestionsOpen() ? "hidden" : undefined,
+            _v$23 = suggestionsOpen();
+          _v$21 !== _p$.e && _$setAttribute(_el$38, "data-overlay", _p$.e = _v$21);
+          _v$22 !== _p$.t && _$setStyleProperty(_el$39, "visibility", _p$.t = _v$22);
+          _v$23 !== _p$.a && _$setProperty(_el$39, "inert", _p$.a = _v$23);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$30;
+        return _el$38;
       }
-    }), _el$90, _co$23);
+    }), _el$104, _co$26);
     var _ref$8 = composerRef;
-    typeof _ref$8 === "function" ? _$use(_ref$8, _el$57) : composerRef = _el$57;
-    _$insert(_el$57, _$createComponent(Show, {
+    typeof _ref$8 === "function" ? _$use(_ref$8, _el$65) : composerRef = _el$65;
+    _$insert(_el$65, _$createComponent(Show, {
       get when() {
         return showHint();
       },
       get children() {
-        var _el$58 = _$getNextElement(_tmpl$17);
-        _$insert(_el$58, _$createComponent(Show, {
+        var _el$66 = _$getNextElement(_tmpl$20);
+        _$insert(_el$66, _$createComponent(Show, {
           get when() {
             return dictationStatus();
           },
           get fallback() {
             return (() => {
-              var _el$105 = _$getNextElement(_tmpl$25);
-              _$insert(_el$105, hint);
-              return _el$105;
+              var _el$126 = _$getNextElement(_tmpl$30);
+              _$insert(_el$126, hint);
+              return _el$126;
             })();
           },
           children: status => [(() => {
-            var _el$106 = _$getNextElement(_tmpl$26),
-              _el$107 = _el$106.firstChild,
-              _el$108 = _el$107.nextSibling;
-            _$insert(_el$108, () => status().text);
+            var _el$127 = _$getNextElement(_tmpl$31),
+              _el$128 = _el$127.firstChild,
+              _el$129 = _el$128.nextSibling;
+            _$insert(_el$129, () => status().text);
             _$effect(_p$ => {
-              var _v$28 = dictation() ?? undefined,
-                _v$29 = status().icon;
-              _v$28 !== _p$.e && _$setAttribute(_el$106, "data-state", _p$.e = _v$28);
-              _v$29 !== _p$.t && _$className(_el$107, _p$.t = _v$29);
+              var _v$34 = dictation() ?? undefined,
+                _v$35 = status().icon;
+              _v$34 !== _p$.e && _$setAttribute(_el$127, "data-state", _p$.e = _v$34);
+              _v$35 !== _p$.t && _$className(_el$128, _p$.t = _v$35);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$106;
+            return _el$127;
           })(), _$createComponent(Show, {
             get when() {
               return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
             },
             children: restore => (() => {
-              var _el$109 = _$getNextElement(_tmpl$27);
-              _el$109.$$click = () => reportChatFailure(restore(), props.onError);
-              _el$109.$$mousedown = keepFieldFocus;
-              _$insert(_el$109, () => chatMessages().restoreOriginal);
-              _$effect(() => _$setProperty(_el$109, "disabled", microphoneDisabled()));
+              var _el$130 = _$getNextElement(_tmpl$32);
+              _el$130.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$130.$$mousedown = keepFieldFocus;
+              _$insert(_el$130, () => chatMessages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$130, "disabled", microphoneDisabled()));
               _$runHydrationEvents();
-              return _el$109;
+              return _el$130;
             })()
           })]
         }));
-        return _el$58;
+        return _el$66;
       }
-    }), _el$82, _co$19);
-    _$insert(_el$57, _$createComponent(Show, {
+    }), _el$90, _co$20);
+    _$insert(_el$65, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$59 = _$getNextElement(_tmpl$18);
-        _$insert(_el$59, _$createComponent(For, {
+        var _el$67 = _$getNextElement(_tmpl$21);
+        _$insert(_el$67, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$110 = _$getNextElement(_tmpl$29),
-              _el$111 = _el$110.firstChild,
-              _el$112 = _el$111.firstChild,
-              [_el$113, _co$26] = _$getNextMarker(_el$112.nextSibling),
-              _el$114 = _el$113.nextSibling,
-              [_el$115, _co$27] = _$getNextMarker(_el$114.nextSibling),
-              _el$117 = _el$111.nextSibling,
-              [_el$118, _co$28] = _$getNextMarker(_el$117.nextSibling);
-            _$insert(_el$111, _$createComponent(Show, {
+            var _el$131 = _$getNextElement(_tmpl$34),
+              _el$132 = _el$131.firstChild,
+              _el$133 = _el$132.firstChild,
+              [_el$134, _co$32] = _$getNextMarker(_el$133.nextSibling),
+              _el$135 = _el$134.nextSibling,
+              [_el$136, _co$33] = _$getNextMarker(_el$135.nextSibling),
+              _el$138 = _el$132.nextSibling,
+              [_el$139, _co$34] = _$getNextMarker(_el$138.nextSibling);
+            _$insert(_el$132, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$119 = _$getNextElement(_tmpl$31),
-                    _el$121 = _el$119.firstChild,
-                    [_el$122, _co$29] = _$getNextMarker(_el$121.nextSibling),
-                    _el$123 = _el$122.nextSibling,
-                    [_el$124, _co$30] = _$getNextMarker(_el$123.nextSibling);
-                  _$insert(_el$119, _$createComponent(Show, {
+                  var _el$140 = _$getNextElement(_tmpl$36),
+                    _el$142 = _el$140.firstChild,
+                    [_el$143, _co$35] = _$getNextMarker(_el$142.nextSibling),
+                    _el$144 = _el$143.nextSibling,
+                    [_el$145, _co$36] = _$getNextMarker(_el$144.nextSibling);
+                  _$insert(_el$140, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$125 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$125, attachmentIcon(attachment)));
-                        return _el$125;
+                        var _el$146 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$146, attachmentIcon(attachment)));
+                        return _el$146;
                       })();
                     },
                     get children() {
-                      var _el$120 = _$getNextElement(_tmpl$30);
+                      var _el$141 = _$getNextElement(_tmpl$35);
                       _$effect(_p$ => {
-                        var _v$32 = attachment.previewUrl,
-                          _v$33 = attachment.alt ?? "";
-                        _v$32 !== _p$.e && _$setAttribute(_el$120, "src", _p$.e = _v$32);
-                        _v$33 !== _p$.t && _$setAttribute(_el$120, "alt", _p$.t = _v$33);
+                        var _v$38 = attachment.previewUrl,
+                          _v$39 = attachment.alt ?? "";
+                        _v$38 !== _p$.e && _$setAttribute(_el$141, "src", _p$.e = _v$38);
+                        _v$39 !== _p$.t && _$setAttribute(_el$141, "alt", _p$.t = _v$39);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$120;
+                      return _el$141;
                     }
-                  }), _el$122, _co$29);
-                  _$insert(_el$119, () => renderAttachmentCopy(attachment), _el$124, _co$30);
-                  return _el$119;
+                  }), _el$143, _co$35);
+                  _$insert(_el$140, () => renderAttachmentCopy(attachment), _el$145, _co$36);
+                  return _el$140;
                 })();
               },
               children: href => (() => {
-                var _el$126 = _$getNextElement(_tmpl$32),
-                  _el$128 = _el$126.firstChild,
-                  [_el$129, _co$31] = _$getNextMarker(_el$128.nextSibling),
-                  _el$130 = _el$129.nextSibling,
-                  [_el$131, _co$32] = _$getNextMarker(_el$130.nextSibling);
-                _$insert(_el$126, _$createComponent(Show, {
+                var _el$147 = _$getNextElement(_tmpl$37),
+                  _el$149 = _el$147.firstChild,
+                  [_el$150, _co$37] = _$getNextMarker(_el$149.nextSibling),
+                  _el$151 = _el$150.nextSibling,
+                  [_el$152, _co$38] = _$getNextMarker(_el$151.nextSibling);
+                _$insert(_el$147, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$132 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$132, attachmentIcon(attachment)));
-                      return _el$132;
+                      var _el$153 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$153, attachmentIcon(attachment)));
+                      return _el$153;
                     })();
                   },
                   get children() {
-                    var _el$127 = _$getNextElement(_tmpl$30);
+                    var _el$148 = _$getNextElement(_tmpl$35);
                     _$effect(_p$ => {
-                      var _v$34 = attachment.previewUrl,
-                        _v$35 = attachment.alt ?? "";
-                      _v$34 !== _p$.e && _$setAttribute(_el$127, "src", _p$.e = _v$34);
-                      _v$35 !== _p$.t && _$setAttribute(_el$127, "alt", _p$.t = _v$35);
+                      var _v$40 = attachment.previewUrl,
+                        _v$41 = attachment.alt ?? "";
+                      _v$40 !== _p$.e && _$setAttribute(_el$148, "src", _p$.e = _v$40);
+                      _v$41 !== _p$.t && _$setAttribute(_el$148, "alt", _p$.t = _v$41);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$127;
+                    return _el$148;
                   }
-                }), _el$129, _co$31);
-                _$insert(_el$126, () => renderAttachmentCopy(attachment), _el$131, _co$32);
+                }), _el$150, _co$37);
+                _$insert(_el$147, () => renderAttachmentCopy(attachment), _el$152, _co$38);
                 _$effect(_p$ => {
-                  var _v$36 = href(),
-                    _v$37 = chatMessages().openInNewTab({
+                  var _v$42 = href(),
+                    _v$43 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$36 !== _p$.e && _$setAttribute(_el$126, "href", _p$.e = _v$36);
-                  _v$37 !== _p$.t && _$setAttribute(_el$126, "aria-label", _p$.t = _v$37);
+                  _v$42 !== _p$.e && _$setAttribute(_el$147, "href", _p$.e = _v$42);
+                  _v$43 !== _p$.t && _$setAttribute(_el$147, "aria-label", _p$.t = _v$43);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$126;
+                return _el$147;
               })()
-            }), _el$113, _co$26);
-            _$insert(_el$111, _$createComponent(Show, {
+            }), _el$134, _co$32);
+            _$insert(_el$132, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$133 = _$getNextElement(_tmpl$33),
-                  _el$134 = _el$133.firstChild,
-                  [_el$135, _co$33] = _$getNextMarker(_el$134.nextSibling),
-                  _el$136 = _el$135.nextSibling,
-                  [_el$137, _co$34] = _$getNextMarker(_el$136.nextSibling);
-                _el$133.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$133, _$createComponent(Show, {
+                var _el$154 = _$getNextElement(_tmpl$38),
+                  _el$155 = _el$154.firstChild,
+                  [_el$156, _co$39] = _$getNextMarker(_el$155.nextSibling),
+                  _el$157 = _el$156.nextSibling,
+                  [_el$158, _co$40] = _$getNextMarker(_el$157.nextSibling);
+                _el$154.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$154, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$138 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$138, icon()));
-                    return _el$138;
+                    var _el$159 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$159, icon()));
+                    return _el$159;
                   })()
-                }), _el$135, _co$33);
-                _$insert(_el$133, () => action().label, _el$137, _co$34);
-                _$effect(() => _$setProperty(_el$133, "disabled", blocked() || action().disabled));
+                }), _el$156, _co$39);
+                _$insert(_el$154, () => action().label, _el$158, _co$40);
+                _$effect(() => _$setProperty(_el$154, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$133;
+                return _el$154;
               })()
-            }), _el$115, _co$27);
-            _$insert(_el$110, _$createComponent(Show, {
+            }), _el$136, _co$33);
+            _$insert(_el$131, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$116 = _$getNextElement(_tmpl$28);
-                _el$116.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$137 = _$getNextElement(_tmpl$33);
+                _el$137.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$30 = selectMessages().removeNamed({
+                  var _v$36 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$31 = blocked();
-                  _v$30 !== _p$.e && _$setAttribute(_el$116, "aria-label", _p$.e = _v$30);
-                  _v$31 !== _p$.t && _$setProperty(_el$116, "disabled", _p$.t = _v$31);
+                    _v$37 = blocked();
+                  _v$36 !== _p$.e && _$setAttribute(_el$137, "aria-label", _p$.e = _v$36);
+                  _v$37 !== _p$.t && _$setProperty(_el$137, "disabled", _p$.t = _v$37);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$116;
+                return _el$137;
               }
-            }), _el$118, _co$28);
-            _$effect(() => _el$111.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$110;
+            }), _el$139, _co$34);
+            _$effect(() => _el$132.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$131;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$59, "aria-label", chatMessages().attachments));
-        return _el$59;
+        _$effect(() => _$setAttribute(_el$67, "aria-label", chatMessages().attachments));
+        return _el$67;
       }
-    }), _el$84, _co$20);
-    _$insert(_el$57, _$createComponent(Show, {
+    }), _el$92, _co$21);
+    _$insert(_el$65, _$createComponent(Show, {
       get when() {
         return conversation();
       },
@@ -1559,49 +1920,49 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$139 = _$getNextElement(_tmpl$19),
-              _el$140 = _el$139.firstChild,
-              _el$141 = _el$140.nextSibling,
-              [_el$142, _co$35] = _$getNextMarker(_el$141.nextSibling);
-            _$insert(_el$139, () => props.error, _el$142, _co$35);
-            return _el$139;
+            var _el$160 = _$getNextElement(_tmpl$22),
+              _el$161 = _el$160.firstChild,
+              _el$162 = _el$161.nextSibling,
+              [_el$163, _co$41] = _$getNextMarker(_el$162.nextSibling);
+            _$insert(_el$160, () => props.error, _el$163, _co$41);
+            return _el$160;
           }
         }), _$memo(formatRow), (() => {
-          var _el$143 = _$getNextElement(_tmpl$34);
-          _$insert(_el$143, _$createComponent(Show, {
+          var _el$164 = _$getNextElement(_tmpl$39);
+          _$insert(_el$164, _$createComponent(Show, {
             get when() {
               return props.footerContent;
             },
             get fallback() {
               return [(() => {
-                var _el$144 = _$getNextElement(_tmpl$35),
-                  _el$145 = _el$144.firstChild,
-                  [_el$146, _co$36] = _$getNextMarker(_el$145.nextSibling),
-                  _el$147 = _el$146.nextSibling,
-                  [_el$148, _co$37] = _$getNextMarker(_el$147.nextSibling),
-                  _el$149 = _el$148.nextSibling,
-                  [_el$150, _co$38] = _$getNextMarker(_el$149.nextSibling),
-                  _el$151 = _el$150.nextSibling,
-                  [_el$152, _co$39] = _$getNextMarker(_el$151.nextSibling),
-                  _el$153 = _el$152.nextSibling,
-                  [_el$154, _co$40] = _$getNextMarker(_el$153.nextSibling),
-                  _el$155 = _el$154.nextSibling,
-                  [_el$156, _co$41] = _$getNextMarker(_el$155.nextSibling),
-                  _el$157 = _el$156.nextSibling,
-                  [_el$158, _co$42] = _$getNextMarker(_el$157.nextSibling);
-                _$insert(_el$144, () => props.footerTools, _el$146, _co$36);
-                _$insert(_el$144, _$createComponent(Show, {
+                var _el$165 = _$getNextElement(_tmpl$40),
+                  _el$166 = _el$165.firstChild,
+                  [_el$167, _co$42] = _$getNextMarker(_el$166.nextSibling),
+                  _el$168 = _el$167.nextSibling,
+                  [_el$169, _co$43] = _$getNextMarker(_el$168.nextSibling),
+                  _el$170 = _el$169.nextSibling,
+                  [_el$171, _co$44] = _$getNextMarker(_el$170.nextSibling),
+                  _el$172 = _el$171.nextSibling,
+                  [_el$173, _co$45] = _$getNextMarker(_el$172.nextSibling),
+                  _el$174 = _el$173.nextSibling,
+                  [_el$175, _co$46] = _$getNextMarker(_el$174.nextSibling),
+                  _el$176 = _el$175.nextSibling,
+                  [_el$177, _co$47] = _$getNextMarker(_el$176.nextSibling),
+                  _el$178 = _el$177.nextSibling,
+                  [_el$179, _co$48] = _$getNextMarker(_el$178.nextSibling);
+                _$insert(_el$165, () => props.footerTools, _el$167, _co$42);
+                _$insert(_el$165, _$createComponent(Show, {
                   get when() {
                     return hasAddMenu();
                   },
                   get children() {
                     return addMenu("ti ti-plus");
                   }
-                }), _el$148, _co$37);
-                _$insert(_el$144, fileInput, _el$150, _co$38);
-                _$insert(_el$144, formatToggle, _el$152, _co$39);
-                _$insert(_el$144, emojiButton, _el$154, _co$40);
-                _$insert(_el$144, _$createComponent(Show, {
+                }), _el$169, _co$43);
+                _$insert(_el$165, fileInput, _el$171, _co$44);
+                _$insert(_el$165, formatToggle, _el$173, _co$45);
+                _$insert(_el$165, emojiButton, _el$175, _co$46);
+                _$insert(_el$165, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -1635,22 +1996,22 @@ export function ChatComposer(props) {
                       }
                     });
                   }
-                }), _el$156, _co$41);
-                _$insert(_el$144, () => props.modelDetails, _el$158, _co$42);
-                return _el$144;
+                }), _el$177, _co$47);
+                _$insert(_el$165, () => props.modelDetails, _el$179, _co$48);
+                return _el$165;
               })(), (() => {
-                var _el$159 = _$getNextElement(_tmpl$36),
-                  _el$160 = _el$159.firstChild,
-                  [_el$161, _co$43] = _$getNextMarker(_el$160.nextSibling),
-                  _el$162 = _el$161.nextSibling,
-                  [_el$163, _co$44] = _$getNextMarker(_el$162.nextSibling),
-                  _el$164 = _el$163.nextSibling,
-                  [_el$165, _co$45] = _$getNextMarker(_el$164.nextSibling),
-                  _el$166 = _el$165.nextSibling,
-                  [_el$167, _co$46] = _$getNextMarker(_el$166.nextSibling),
-                  _el$168 = _el$167.nextSibling,
-                  [_el$169, _co$47] = _$getNextMarker(_el$168.nextSibling);
-                _$insert(_el$159, _$createComponent(For, {
+                var _el$180 = _$getNextElement(_tmpl$41),
+                  _el$181 = _el$180.firstChild,
+                  [_el$182, _co$49] = _$getNextMarker(_el$181.nextSibling),
+                  _el$183 = _el$182.nextSibling,
+                  [_el$184, _co$50] = _$getNextMarker(_el$183.nextSibling),
+                  _el$185 = _el$184.nextSibling,
+                  [_el$186, _co$51] = _$getNextMarker(_el$185.nextSibling),
+                  _el$187 = _el$186.nextSibling,
+                  [_el$188, _co$52] = _$getNextMarker(_el$187.nextSibling),
+                  _el$189 = _el$188.nextSibling,
+                  [_el$190, _co$53] = _$getNextMarker(_el$189.nextSibling);
+                _$insert(_el$180, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -1674,13 +2035,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$170 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$170, action.icon ?? "ti ti-dots"));
-                      return _el$170;
+                      var _el$191 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$191, action.icon ?? "ti ti-dots"));
+                      return _el$191;
                     }
                   })
-                }), _el$161, _co$43);
-                _$insert(_el$159, _$createComponent(Show, {
+                }), _el$182, _co$49);
+                _$insert(_el$180, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -1692,16 +2053,16 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$163, _co$44);
-                _$insert(_el$159, () => props.submitTools, _el$165, _co$45);
-                _$insert(_el$159, microphoneControl, _el$167, _co$46);
-                _$insert(_el$159, sendControl, _el$169, _co$47);
-                return _el$159;
+                }), _el$184, _co$50);
+                _$insert(_el$180, () => props.submitTools, _el$186, _co$51);
+                _$insert(_el$180, microphoneControl, _el$188, _co$52);
+                _$insert(_el$180, sendControl, _el$190, _co$53);
+                return _el$180;
               })()];
             },
             children: content => content()
           }));
-          return _el$143;
+          return _el$164;
         })()];
       },
       get children() {
@@ -1710,43 +2071,43 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$60 = _$getNextElement(_tmpl$19),
-              _el$61 = _el$60.firstChild,
-              _el$62 = _el$61.nextSibling,
-              [_el$63, _co$11] = _$getNextMarker(_el$62.nextSibling);
-            _$insert(_el$60, () => props.error, _el$63, _co$11);
-            return _el$60;
+            var _el$68 = _$getNextElement(_tmpl$22),
+              _el$69 = _el$68.firstChild,
+              _el$70 = _el$69.nextSibling,
+              [_el$71, _co$12] = _$getNextMarker(_el$70.nextSibling);
+            _$insert(_el$68, () => props.error, _el$71, _co$12);
+            return _el$68;
           }
         }), _$memo(() => formatRow()), (() => {
-          var _el$64 = _$getNextElement(_tmpl$20),
-            _el$75 = _el$64.firstChild,
-            [_el$76, _co$16] = _$getNextMarker(_el$75.nextSibling),
+          var _el$72 = _$getNextElement(_tmpl$23),
+            _el$83 = _el$72.firstChild,
+            [_el$84, _co$17] = _$getNextMarker(_el$83.nextSibling),
+            _el$85 = _el$84.nextSibling,
+            [_el$86, _co$18] = _$getNextMarker(_el$85.nextSibling),
+            _el$73 = _el$86.nextSibling,
+            _el$81 = _el$73.firstChild,
+            [_el$82, _co$16] = _$getNextMarker(_el$81.nextSibling),
+            _el$74 = _el$82.nextSibling,
+            _el$75 = _el$74.firstChild,
+            [_el$76, _co$13] = _$getNextMarker(_el$75.nextSibling),
             _el$77 = _el$76.nextSibling,
-            [_el$78, _co$17] = _$getNextMarker(_el$77.nextSibling),
-            _el$65 = _el$78.nextSibling,
-            _el$73 = _el$65.firstChild,
-            [_el$74, _co$15] = _$getNextMarker(_el$73.nextSibling),
-            _el$66 = _el$74.nextSibling,
-            _el$67 = _el$66.firstChild,
-            [_el$68, _co$12] = _$getNextMarker(_el$67.nextSibling),
-            _el$69 = _el$68.nextSibling,
-            [_el$70, _co$13] = _$getNextMarker(_el$69.nextSibling),
-            _el$71 = _el$70.nextSibling,
-            [_el$72, _co$14] = _$getNextMarker(_el$71.nextSibling),
-            _el$79 = _el$65.nextSibling,
-            [_el$80, _co$18] = _$getNextMarker(_el$79.nextSibling);
-          _$insert(_el$64, attachControl, _el$76, _co$16);
-          _$insert(_el$64, fileInput, _el$78, _co$17);
-          _$insert(_el$65, field, _el$74, _co$15);
-          _$insert(_el$66, formatToggle, _el$68, _co$12);
-          _$insert(_el$66, emojiButton, _el$70, _co$13);
-          _$insert(_el$66, microphoneControl, _el$72, _co$14);
-          _$insert(_el$64, sendControl, _el$80, _co$18);
-          return _el$64;
+            [_el$78, _co$14] = _$getNextMarker(_el$77.nextSibling),
+            _el$79 = _el$78.nextSibling,
+            [_el$80, _co$15] = _$getNextMarker(_el$79.nextSibling),
+            _el$87 = _el$73.nextSibling,
+            [_el$88, _co$19] = _$getNextMarker(_el$87.nextSibling);
+          _$insert(_el$72, attachControl, _el$84, _co$17);
+          _$insert(_el$72, fileInput, _el$86, _co$18);
+          _$insert(_el$73, field, _el$82, _co$16);
+          _$insert(_el$74, formatToggle, _el$76, _co$13);
+          _$insert(_el$74, emojiButton, _el$78, _co$14);
+          _$insert(_el$74, microphoneControl, _el$80, _co$15);
+          _$insert(_el$72, sendControl, _el$88, _co$19);
+          return _el$72;
         })()];
       }
-    }), _el$86, _co$21);
-    _$insert(_el$57, _$createComponent(Show, {
+    }), _el$94, _co$22);
+    _$insert(_el$65, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -1765,16 +2126,60 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$88, _co$22);
+    }), _el$96, _co$23);
+    _$insert(_el$97, _$createComponent(Show, {
+      get when() {
+        return suggestionAnnouncement();
+      },
+      keyed: true,
+      children: announced => (() => {
+        var _el$192 = _$getNextElement(_tmpl$10);
+        _$insert(_el$192, () => announced.text);
+        return _el$192;
+      })()
+    }));
+    _$insert(_el$98, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!suggestionsOpen())() && commandStatus();
+      },
+      children: status => (() => {
+        var _el$193 = _$getNextElement(_tmpl$42),
+          _el$194 = _el$193.firstChild,
+          _el$195 = _el$194.nextSibling;
+        _$insert(_el$195, () => 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$193, "data-tone", _p$.e = _v$44);
+          _v$45 !== _p$.t && _$className(_el$194, _p$.t = _v$45);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$193;
+      })()
+    }), _el$100, _co$24);
+    _$insert(_el$98, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!suggestionsOpen())() && announcement();
+      },
+      keyed: true,
+      children: announced => (() => {
+        var _el$196 = _$getNextElement(_tmpl$43);
+        _$insert(_el$196, () => announced.text);
+        return _el$196;
+      })()
+    }), _el$102, _co$25);
     _$effect(_p$ => {
-      var _v$15 = `k2b-chat-composer ${props.class ?? ""}`,
-        _v$16 = running() ? "true" : undefined,
-        _v$17 = conversation() ? "conversation" : undefined,
-        _v$18 = props.label ?? chatMessages().messageComposer;
-      _v$15 !== _p$.e && _$className(_el$57, _p$.e = _v$15);
-      _v$16 !== _p$.t && _$setAttribute(_el$57, "data-running", _p$.t = _v$16);
-      _v$17 !== _p$.a && _$setAttribute(_el$57, "data-variant", _p$.a = _v$17);
-      _v$18 !== _p$.o && _$setAttribute(_el$57, "aria-label", _p$.o = _v$18);
+      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$65, _p$.e = _v$24);
+      _v$25 !== _p$.t && _$setAttribute(_el$65, "data-running", _p$.t = _v$25);
+      _v$26 !== _p$.a && _$setAttribute(_el$65, "data-variant", _p$.a = _v$26);
+      _v$27 !== _p$.o && _$setAttribute(_el$65, "aria-label", _p$.o = _v$27);
       return _p$;
     }, {
       e: undefined,
@@ -1782,7 +2187,7 @@ export function ChatComposer(props) {
       a: undefined,
       o: undefined
     });
-    return _el$29;
+    return _el$37;
   })();
 }
 _$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown", "mousedown"]);