@dexto/tui 1.6.2

package/dist/components/SlashCommandAutocomplete.cjs

@@ -0,0 +1,389 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SlashCommandAutocomplete_exports = {};
+__export(SlashCommandAutocomplete_exports, {
+  SlashCommandAutocomplete: () => SlashCommandAutocomplete2
+});
+module.exports = __toCommonJS(SlashCommandAutocomplete_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"), 1);
+var import_ink = require("ink");
+var import_commands = require("../interactive-commands/commands.js");
+var import_useTerminalSize = require("../hooks/useTerminalSize.js");
+var import_overlaySizing = require("../utils/overlaySizing.js");
+function getPromptMatchScore(prompt, query) {
+  if (!query) return 3;
+  const lowerQuery = query.toLowerCase();
+  const name = prompt.name.toLowerCase();
+  const description = (prompt.description || "").toLowerCase();
+  const title = (prompt.title || "").toLowerCase();
+  if (name.startsWith(lowerQuery)) {
+    return 3;
+  }
+  if (name.includes(lowerQuery)) {
+    return 2;
+  }
+  if (description.includes(lowerQuery) || title.includes(lowerQuery)) {
+    return 1;
+  }
+  return 0;
+}
+function matchesPromptQuery(prompt, query) {
+  return getPromptMatchScore(prompt, query) > 0;
+}
+function getSystemCommandMatchScore(cmd, query) {
+  if (!query) return 4;
+  const lowerQuery = query.toLowerCase();
+  const name = cmd.name.toLowerCase();
+  const description = (cmd.description || "").toLowerCase();
+  if (name.startsWith(lowerQuery)) {
+    return 4;
+  }
+  if (name.includes(lowerQuery)) {
+    return 3;
+  }
+  if (cmd.aliases) {
+    for (const alias of cmd.aliases) {
+      const lowerAlias = alias.toLowerCase();
+      if (lowerAlias.startsWith(lowerQuery)) {
+        return 2;
+      }
+      if (lowerAlias.includes(lowerQuery)) {
+        return 2;
+      }
+    }
+  }
+  if (description.includes(lowerQuery)) {
+    return 1;
+  }
+  return 0;
+}
+function matchesSystemCommandQuery(cmd, query) {
+  return getSystemCommandMatchScore(cmd, query) > 0;
+}
+const SlashCommandAutocompleteInner = (0, import_react.forwardRef)(function SlashCommandAutocomplete({
+  isVisible,
+  searchQuery,
+  onSelectPrompt,
+  onSelectSystemCommand,
+  onLoadIntoInput,
+  onSubmitRaw,
+  onClose,
+  agent
+}, ref) {
+  const [prompts, setPrompts] = (0, import_react.useState)([]);
+  const [systemCommands, setSystemCommands] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const { columns: terminalWidth, rows: terminalRows } = (0, import_useTerminalSize.useTerminalSize)();
+  const maxVisibleItems = (0, import_react.useMemo)(() => {
+    return (0, import_overlaySizing.getMaxVisibleItemsForTerminalRows)({
+      rows: terminalRows,
+      hardCap: 8,
+      reservedRows: 8
+    });
+  }, [terminalRows]);
+  const [selection, setSelection] = (0, import_react.useState)({ index: 0, offset: 0 });
+  const selectedIndexRef = (0, import_react.useRef)(0);
+  const updateSelection = (0, import_react.useCallback)(
+    (indexUpdater) => {
+      setSelection((prev) => {
+        const newIndex = typeof indexUpdater === "function" ? indexUpdater(prev.index) : indexUpdater;
+        selectedIndexRef.current = newIndex;
+        let newOffset = prev.offset;
+        if (newIndex < prev.offset) {
+          newOffset = newIndex;
+        } else if (newIndex >= prev.offset + maxVisibleItems) {
+          newOffset = Math.max(0, newIndex - maxVisibleItems + 1);
+        }
+        return { index: newIndex, offset: newOffset };
+      });
+    },
+    [maxVisibleItems]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!isVisible) return;
+    let cancelled = false;
+    setIsLoading(true);
+    const fetchCommands = async () => {
+      try {
+        const promptSet = await agent.listPrompts();
+        const promptList = Object.values(promptSet).map((p) => ({
+          ...p,
+          kind: "prompt"
+        }));
+        const allCommands = (0, import_commands.getAllCommands)();
+        const commandList = allCommands.map((cmd) => ({
+          kind: "system",
+          name: cmd.name,
+          description: cmd.description,
+          ...cmd.category && { category: cmd.category },
+          ...cmd.aliases && { aliases: cmd.aliases }
+        }));
+        if (!cancelled) {
+          setPrompts(promptList);
+          setSystemCommands(commandList);
+          setIsLoading(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setPrompts([]);
+          setSystemCommands([]);
+          setIsLoading(false);
+        }
+      }
+    };
+    void fetchCommands();
+    return () => {
+      cancelled = true;
+    };
+  }, [isVisible, agent]);
+  const commandQuery = (0, import_react.useMemo)(() => {
+    if (!searchQuery.startsWith("/")) return "";
+    const afterSlash = searchQuery.slice(1).trim();
+    const spaceIndex = afterSlash.indexOf(" ");
+    return spaceIndex > 0 ? afterSlash.slice(0, spaceIndex) : afterSlash;
+  }, [searchQuery]);
+  const filteredPrompts = (0, import_react.useMemo)(() => {
+    if (!commandQuery) {
+      return prompts;
+    }
+    return prompts.filter((p) => matchesPromptQuery(p, commandQuery)).sort((a, b) => {
+      const scoreA = getPromptMatchScore(a, commandQuery);
+      const scoreB = getPromptMatchScore(b, commandQuery);
+      return scoreB - scoreA;
+    });
+  }, [prompts, commandQuery]);
+  const filteredSystemCommands = (0, import_react.useMemo)(() => {
+    if (!commandQuery) {
+      return systemCommands;
+    }
+    return systemCommands.filter((cmd) => matchesSystemCommandQuery(cmd, commandQuery)).sort((a, b) => {
+      const scoreA = getSystemCommandMatchScore(a, commandQuery);
+      const scoreB = getSystemCommandMatchScore(b, commandQuery);
+      return scoreB - scoreA;
+    });
+  }, [systemCommands, commandQuery]);
+  const hasArguments = (0, import_react.useMemo)(() => {
+    if (!searchQuery.startsWith("/")) return false;
+    const afterSlash = searchQuery.slice(1).trim();
+    return afterSlash.includes(" ");
+  }, [searchQuery]);
+  const combinedItems = (0, import_react.useMemo)(() => {
+    const items = [];
+    if (hasArguments) {
+      const exactSystemCmd = systemCommands.find(
+        (cmd) => cmd.name.toLowerCase() === commandQuery.toLowerCase()
+      );
+      if (exactSystemCmd) {
+        items.push({ kind: "system", command: exactSystemCmd });
+      }
+      const exactPrompt = prompts.find(
+        (p) => p.name.toLowerCase() === commandQuery.toLowerCase() || p.displayName && p.displayName.toLowerCase() === commandQuery.toLowerCase()
+      );
+      if (exactPrompt) {
+        items.push({ kind: "prompt", prompt: exactPrompt });
+      }
+      return items;
+    }
+    filteredSystemCommands.forEach((cmd) => items.push({ kind: "system", command: cmd }));
+    filteredPrompts.forEach((prompt) => items.push({ kind: "prompt", prompt }));
+    return items;
+  }, [
+    hasArguments,
+    filteredPrompts,
+    filteredSystemCommands,
+    systemCommands,
+    prompts,
+    commandQuery
+  ]);
+  const getFirstItemId = () => {
+    const first = combinedItems[0];
+    if (!first) return null;
+    if (first.kind === "system") return `sys:${first.command.name}`;
+    return `prompt:${first.prompt.name}`;
+  };
+  const currentFirstId = getFirstItemId();
+  const prevItemsRef = (0, import_react.useRef)({ length: combinedItems.length, firstId: currentFirstId });
+  const itemsChanged = combinedItems.length !== prevItemsRef.current.length || currentFirstId !== prevItemsRef.current.firstId;
+  const selectedIndex = itemsChanged ? 0 : Math.min(selection.index, Math.max(0, combinedItems.length - 1));
+  const scrollOffset = itemsChanged ? 0 : Math.min(selection.offset, Math.max(0, combinedItems.length - maxVisibleItems));
+  (0, import_react.useEffect)(() => {
+    if (itemsChanged) {
+      prevItemsRef.current = { length: combinedItems.length, firstId: currentFirstId };
+      if (selection.index !== 0 || selection.offset !== 0) {
+        selectedIndexRef.current = 0;
+        setSelection({ index: 0, offset: 0 });
+      } else {
+        selectedIndexRef.current = 0;
+      }
+    }
+  }, [itemsChanged, combinedItems.length, currentFirstId, selection.index, selection.offset]);
+  const visibleItems = (0, import_react.useMemo)(() => {
+    return combinedItems.slice(scrollOffset, scrollOffset + maxVisibleItems);
+  }, [combinedItems, scrollOffset, maxVisibleItems]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        if (!isVisible) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        const itemsLength = combinedItems.length;
+        if (itemsLength === 0 || hasArguments) {
+          if (key.return) {
+            void Promise.resolve(onSubmitRaw?.(searchQuery)).catch((err) => {
+              const message = err instanceof Error ? err.message : String(err);
+              agent.logger.error(
+                `SlashCommandAutocomplete: Failed to submit raw command: ${message}`
+              );
+            });
+            onClose();
+            return true;
+          }
+          return false;
+        }
+        if (key.upArrow) {
+          updateSelection((prev) => (prev - 1 + itemsLength) % itemsLength);
+          return true;
+        }
+        if (key.downArrow) {
+          updateSelection((prev) => (prev + 1) % itemsLength);
+          return true;
+        }
+        if (key.tab) {
+          const item = combinedItems[selectedIndexRef.current];
+          if (!item) return false;
+          const interactiveCommands = ["model", "resume", "switch"];
+          const isInteractiveCommand = item.kind === "system" && interactiveCommands.includes(item.command.name);
+          if (isInteractiveCommand && item.kind === "system") {
+            onSelectSystemCommand?.(item.command.name);
+          } else if (item.kind === "system") {
+            onLoadIntoInput?.(`/${item.command.name}`);
+          } else {
+            const cmdName = item.prompt.commandName || item.prompt.displayName || item.prompt.name;
+            const argsString = item.prompt.arguments && item.prompt.arguments.length > 0 ? " " + item.prompt.arguments.map((arg) => `<${arg.name}${arg.required ? "" : "?"}>`).join(" ") : "";
+            onLoadIntoInput?.(`/${cmdName}${argsString}`);
+          }
+          return true;
+        }
+        if (key.return) {
+          const item = combinedItems[selectedIndexRef.current];
+          if (!item) return false;
+          if (item.kind === "system") {
+            onSelectSystemCommand?.(item.command.name);
+          } else {
+            onSelectPrompt(item.prompt);
+          }
+          onClose();
+          return true;
+        }
+        return false;
+      }
+    }),
+    [
+      isVisible,
+      combinedItems,
+      hasArguments,
+      selectedIndexRef,
+      searchQuery,
+      onClose,
+      onLoadIntoInput,
+      onSubmitRaw,
+      onSelectPrompt,
+      onSelectSystemCommand,
+      updateSelection,
+      agent
+    ]
+  );
+  if (!isVisible) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: terminalWidth, paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Loading commands..." }) });
+  }
+  if (combinedItems.length === 0) {
+    return null;
+  }
+  const nameColumnWidth = Math.max(16, Math.min(28, Math.floor(terminalWidth * 0.32)));
+  const descriptionColor = (isSelected) => isSelected ? "white" : "gray";
+  const commandColor = (isSelected) => isSelected ? "cyan" : "gray";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", width: terminalWidth, children: visibleItems.map((item, visibleIndex) => {
+    const actualIndex = scrollOffset + visibleIndex;
+    const isSelected = actualIndex === selectedIndex;
+    if (item.kind === "system") {
+      const cmd = item.command;
+      const nameText2 = `/${cmd.name}`;
+      const descText = cmd.description || "";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: commandColor(isSelected), children: isSelected ? "\u276F" : " " }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: nameColumnWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ink.Text,
+          {
+            wrap: "truncate-end",
+            color: commandColor(isSelected),
+            bold: isSelected,
+            children: nameText2
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexGrow: 1, minWidth: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", color: descriptionColor(isSelected), children: descText }) })
+      ] }, `system-${cmd.name}`);
+    }
+    const prompt = item.prompt;
+    const displayName = prompt.displayName || prompt.name;
+    const hasCollision = prompt.commandName && prompt.commandName !== displayName;
+    const nameText = `/${displayName}`;
+    const argsString = prompt.arguments && prompt.arguments.length > 0 ? " " + prompt.arguments.map((arg) => `<${arg.name}${arg.required ? "" : "?"}>`).join(" ") : "";
+    const description = prompt.title || prompt.description || "";
+    const commandText = nameText + argsString;
+    const collisionSuffix = hasCollision ? ` (use /${prompt.commandName})` : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: commandColor(isSelected), children: isSelected ? "\u276F" : " " }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: nameColumnWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ink.Text,
+        {
+          wrap: "truncate-end",
+          color: commandColor(isSelected),
+          bold: isSelected,
+          children: commandText
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexGrow: 1, minWidth: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "truncate-end", color: descriptionColor(isSelected), children: [
+        description,
+        collisionSuffix
+      ] }) })
+    ] }, `prompt-${prompt.name}`);
+  }) });
+});
+const SlashCommandAutocomplete2 = import_react.default.memo(
+  SlashCommandAutocompleteInner
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SlashCommandAutocomplete
+});

package/dist/components/SlashCommandAutocomplete.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { Key } from '../hooks/useInputOrchestrator.js';
+import type { PromptInfo } from '@dexto/core';
+import type { DextoAgent } from '@dexto/core';
+export interface SlashCommandAutocompleteHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+interface SlashCommandAutocompleteProps {
+    isVisible: boolean;
+    searchQuery: string;
+    onSelectPrompt: (prompt: PromptInfo) => void;
+    onSelectSystemCommand?: (command: string) => void;
+    onLoadIntoInput?: (command: string) => void;
+    onSubmitRaw?: ((text: string) => Promise<void> | void) | undefined;
+    onClose: () => void;
+    agent: DextoAgent;
+}
+/**
+ * Inner component - wrapped with React.memo below
+ */
+declare const SlashCommandAutocompleteInner: React.ForwardRefExoticComponent<SlashCommandAutocompleteProps & React.RefAttributes<SlashCommandAutocompleteHandle>>;
+/**
+ * Export with React.memo to prevent unnecessary re-renders from parent
+ * Only re-renders when props actually change (shallow comparison)
+ */
+export declare const SlashCommandAutocomplete: typeof SlashCommandAutocompleteInner;
+export {};
+//# sourceMappingURL=SlashCommandAutocomplete.d.ts.map

package/dist/components/SlashCommandAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,MAAM,WAAW,8BAA8B;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,6BAA6B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAmGD;;GAEG;AACH,QAAA,MAAM,6BAA6B,sHA4bjC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAEhC,OAAO,6BAA6B,CAAC"}