@dexto/tui 1.6.2

package/dist/components/overlays/ReasoningOverlay.js

@@ -0,0 +1,278 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Box, Text } from "ink";
+import { getModelDisplayName, getReasoningProfile } from "@dexto/core";
+import { getLLMProviderDisplayName } from "../../utils/llm-provider-display.js";
+const ReasoningOverlay = React.forwardRef(
+  function ReasoningOverlay2({
+    isVisible,
+    agent,
+    sessionId,
+    showReasoning,
+    onToggleShowReasoning,
+    onSetBudgetTokens,
+    onClose,
+    onNotify
+  }, ref) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [mode, setMode] = useState("menu");
+    const [budgetInput, setBudgetInput] = useState("");
+    const [error, setError] = useState(null);
+    const isSavingRef = useRef(false);
+    const llmConfig = agent.getCurrentLLMConfig(sessionId || void 0);
+    const provider = llmConfig.provider;
+    const model = llmConfig.model;
+    const support = getReasoningProfile(provider, model);
+    const currentVariant = llmConfig.reasoning?.variant ?? support.defaultVariant ?? "default";
+    const currentBudgetTokens = llmConfig.reasoning?.budgetTokens;
+    const menuItems = useMemo(() => {
+      const items = [
+        {
+          id: "toggle-visibility",
+          label: showReasoning ? "Hide reasoning in chat" : "Show reasoning in chat",
+          description: showReasoning ? "Keep tuning; hide reasoning blocks in the transcript" : "Show reasoning blocks in the transcript"
+        }
+      ];
+      if (support.supportsBudgetTokens) {
+        items.push({
+          id: "set-budget",
+          label: "Set reasoning budget tokens",
+          description: "Advanced: cap/target reasoning budget (provider-specific)"
+        });
+        if (typeof currentBudgetTokens === "number") {
+          items.push({
+            id: "clear-budget",
+            label: "Clear reasoning budget tokens",
+            description: `Currently ${currentBudgetTokens}; revert to provider default`
+          });
+        }
+      }
+      return items;
+    }, [showReasoning, support.supportsBudgetTokens, currentBudgetTokens]);
+    useEffect(() => {
+      if (!isVisible) return;
+      setSelectedIndex(0);
+      setMode("menu");
+      setBudgetInput("");
+      setError(null);
+      isSavingRef.current = false;
+    }, [isVisible]);
+    useEffect(() => {
+      if (!isVisible) return;
+      setSelectedIndex((prev) => {
+        if (menuItems.length === 0) return 0;
+        return Math.min(prev, menuItems.length - 1);
+      });
+    }, [isVisible, menuItems.length]);
+    const handleMenuSelect = useCallback(
+      (item) => {
+        setError(null);
+        if (item.id === "toggle-visibility") {
+          onToggleShowReasoning();
+          onNotify(showReasoning ? "Reasoning hidden" : "Reasoning shown");
+          return;
+        }
+        if (item.id === "set-budget") {
+          setMode("budget-input");
+          setBudgetInput(
+            typeof currentBudgetTokens === "number" ? String(currentBudgetTokens) : ""
+          );
+          return;
+        }
+        if (item.id === "clear-budget") {
+          void (async () => {
+            if (isSavingRef.current) return;
+            isSavingRef.current = true;
+            try {
+              await onSetBudgetTokens(void 0);
+              onNotify("Reasoning budget cleared");
+            } catch (e) {
+              setError(
+                `Failed to clear budget: ${e instanceof Error ? e.message : String(e)}`
+              );
+            } finally {
+              isSavingRef.current = false;
+            }
+          })();
+        }
+      },
+      [currentBudgetTokens, onNotify, onSetBudgetTokens, onToggleShowReasoning, showReasoning]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleInput: (input, key) => {
+          if (!isVisible) return false;
+          if (key.escape) {
+            if (mode === "budget-input") {
+              setMode("menu");
+              setError(null);
+              return true;
+            }
+            onClose();
+            return true;
+          }
+          if (mode === "budget-input") {
+            if (isSavingRef.current) return true;
+            if (key.return) {
+              const trimmed = budgetInput.trim();
+              const parsed = Number.parseInt(trimmed, 10);
+              if (!trimmed) {
+                setError("Enter a positive integer (or Esc to cancel)");
+                return true;
+              }
+              if (!Number.isFinite(parsed) || parsed <= 0) {
+                setError("Budget tokens must be a positive integer");
+                return true;
+              }
+              void (async () => {
+                if (isSavingRef.current) return;
+                isSavingRef.current = true;
+                try {
+                  await onSetBudgetTokens(parsed);
+                  onNotify(`Reasoning budget set to ${parsed}`);
+                  setMode("menu");
+                  setError(null);
+                } catch (e) {
+                  setError(
+                    `Failed to set budget: ${e instanceof Error ? e.message : String(e)}`
+                  );
+                } finally {
+                  isSavingRef.current = false;
+                }
+              })();
+              return true;
+            }
+            if (key.backspace || key.delete) {
+              setBudgetInput((prev) => prev.slice(0, -1));
+              setError(null);
+              return true;
+            }
+            if (input && !key.ctrl && !key.meta) {
+              if (/^\d+$/.test(input)) {
+                setBudgetInput((prev) => prev + input);
+                setError(null);
+                return true;
+              }
+            }
+            return true;
+          }
+          if (menuItems.length > 0) {
+            if (key.upArrow) {
+              setSelectedIndex(
+                (prev) => (prev - 1 + menuItems.length) % menuItems.length
+              );
+              return true;
+            }
+            if (key.downArrow) {
+              setSelectedIndex((prev) => (prev + 1) % menuItems.length);
+              return true;
+            }
+            if (key.return) {
+              const item = menuItems[selectedIndex];
+              if (item) {
+                handleMenuSelect(item);
+                return true;
+              }
+            }
+          }
+          return false;
+        }
+      }),
+      [budgetInput, handleMenuSelect, isVisible, menuItems, mode, onClose, selectedIndex]
+    );
+    if (!isVisible) return null;
+    const providerLabel = getLLMProviderDisplayName(provider);
+    const modelLabel = getModelDisplayName(model);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: "cyan",
+        paddingX: 1,
+        marginTop: 1,
+        children: [
+          /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Reasoning" }) }),
+          /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "Model: ",
+              /* @__PURE__ */ jsx(Text, { color: "white", children: modelLabel }),
+              " ",
+              /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+                "(",
+                providerLabel,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "Variant: ",
+              /* @__PURE__ */ jsx(Text, { color: "white", children: currentVariant }),
+              " ",
+              /* @__PURE__ */ jsx(Text, { color: "gray", children: "(Tab cycles)" })
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "Visible: ",
+              /* @__PURE__ */ jsx(Text, { color: "white", children: showReasoning ? "on" : "off" })
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "Budget tokens:",
+              " ",
+              /* @__PURE__ */ jsx(Text, { color: "white", children: support.supportsBudgetTokens ? typeof currentBudgetTokens === "number" ? String(currentBudgetTokens) : "none" : "not supported" })
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "Supported variants:",
+              " ",
+              /* @__PURE__ */ jsx(Text, { color: "white", children: support.supportedVariants.join(", ") })
+            ] })
+          ] }),
+          mode === "budget-input" ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsx(Text, { bold: true, children: "Enter budget tokens:" }),
+            /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+              /* @__PURE__ */ jsx(Text, { color: "cyan", children: "> " }),
+              /* @__PURE__ */ jsx(Text, { children: budgetInput }),
+              !isSavingRef.current && /* @__PURE__ */ jsx(Text, { color: "cyan", children: "_" })
+            ] }),
+            /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter to save \u2022 Esc to cancel" }) })
+          ] }) : /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: menuItems.length === 0 ? /* @__PURE__ */ jsx(Text, { color: "gray", children: "No reasoning options available for this model." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Text, { color: "cyan", bold: true, children: [
+              "Options (",
+              selectedIndex + 1,
+              "/",
+              menuItems.length,
+              ") - \u2191\u2193 navigate, Enter select, Esc close"
+            ] }),
+            menuItems.map((item, idx) => {
+              const isSelected = idx === selectedIndex;
+              return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", marginTop: 0, children: [
+                /* @__PURE__ */ jsx(Box, { width: 2, children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? ">" : " " }) }),
+                /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      color: isSelected ? "cyan" : "gray",
+                      bold: isSelected,
+                      children: item.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { color: "gray", children: item.description })
+                ] })
+              ] }, item.id);
+            })
+          ] }) }),
+          error && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: error }) })
+        ]
+      }
+    );
+  }
+);
+export {
+  ReasoningOverlay
+};

package/dist/components/overlays/SearchOverlay.cjs

@@ -0,0 +1,249 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SearchOverlay_exports = {};
+__export(SearchOverlay_exports, {
+  default: () => SearchOverlay_default
+});
+module.exports = __toCommonJS(SearchOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+const MAX_VISIBLE_RESULTS = 6;
+const SEARCH_DEBOUNCE_MS = 300;
+const SearchOverlay = (0, import_react.forwardRef)(function SearchOverlay2({ isVisible, onClose, onSelectResult, agent }, ref) {
+  const [state, setState] = (0, import_react.useState)({
+    query: "",
+    results: [],
+    isLoading: false,
+    selectedIndex: 0,
+    total: 0,
+    hasMore: false,
+    error: null
+  });
+  const searchTimeoutRef = (0, import_react.useRef)(null);
+  const scrollOffset = (0, import_react.useRef)(0);
+  const searchSeqRef = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    if (isVisible) {
+      setState({
+        query: "",
+        results: [],
+        isLoading: false,
+        selectedIndex: 0,
+        total: 0,
+        hasMore: false,
+        error: null
+      });
+      scrollOffset.current = 0;
+    }
+  }, [isVisible]);
+  const performSearch = (0, import_react.useCallback)(
+    async (query) => {
+      const seq = ++searchSeqRef.current;
+      if (!query.trim()) {
+        setState((prev) => ({
+          ...prev,
+          results: [],
+          total: 0,
+          hasMore: false,
+          isLoading: false,
+          error: null
+        }));
+        return;
+      }
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const response = await agent.searchMessages(query, { limit: 20 });
+        if (seq !== searchSeqRef.current) return;
+        setState((prev) => ({
+          ...prev,
+          results: response.results,
+          total: response.total,
+          hasMore: response.hasMore,
+          isLoading: false,
+          selectedIndex: 0
+        }));
+        scrollOffset.current = 0;
+      } catch (error) {
+        if (seq !== searchSeqRef.current) return;
+        setState((prev) => ({
+          ...prev,
+          results: [],
+          total: 0,
+          hasMore: false,
+          isLoading: false,
+          error: error instanceof Error ? error.message : "Search failed"
+        }));
+      }
+    },
+    [agent]
+  );
+  const updateQuery = (0, import_react.useCallback)(
+    (newQuery) => {
+      setState((prev) => ({ ...prev, query: newQuery }));
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      searchTimeoutRef.current = setTimeout(() => {
+        void performSearch(newQuery);
+      }, SEARCH_DEBOUNCE_MS);
+    },
+    [performSearch]
+  );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        if (!isVisible) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        if (key.return && state.results.length > 0) {
+          const selectedResult = state.results[state.selectedIndex];
+          if (selectedResult && onSelectResult) {
+            onSelectResult(selectedResult);
+          }
+          onClose();
+          return true;
+        }
+        if (key.upArrow) {
+          setState((prev) => {
+            const newIndex = Math.max(0, prev.selectedIndex - 1);
+            if (newIndex < scrollOffset.current) {
+              scrollOffset.current = newIndex;
+            }
+            return { ...prev, selectedIndex: newIndex };
+          });
+          return true;
+        }
+        if (key.downArrow) {
+          setState((prev) => {
+            const newIndex = Math.min(prev.results.length - 1, prev.selectedIndex + 1);
+            if (newIndex >= scrollOffset.current + MAX_VISIBLE_RESULTS) {
+              scrollOffset.current = newIndex - MAX_VISIBLE_RESULTS + 1;
+            }
+            return { ...prev, selectedIndex: newIndex };
+          });
+          return true;
+        }
+        if (key.backspace || key.delete) {
+          updateQuery(state.query.slice(0, -1));
+          return true;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          updateQuery(state.query + input);
+          return true;
+        }
+        return false;
+      }
+    }),
+    [isVisible, onClose, onSelectResult, state, updateQuery]
+  );
+  if (!isVisible) return null;
+  const visibleResults = state.results.slice(
+    scrollOffset.current,
+    scrollOffset.current + MAX_VISIBLE_RESULTS
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "cyan", children: "Search Messages" }),
+      state.total > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        " ",
+        "(",
+        state.total,
+        " result",
+        state.total !== 1 ? "s" : "",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "> " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: state.query }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "_" })
+    ] }),
+    state.isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: "Searching..." }) }),
+    state.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", children: state.error }) }),
+    !state.isLoading && state.results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 1, children: [
+      visibleResults.map((result, idx) => {
+        const actualIndex = scrollOffset.current + idx;
+        const isSelected = actualIndex === state.selectedIndex;
+        const roleColor = result.message.role === "user" ? "blue" : result.message.role === "assistant" ? "green" : "yellowBright";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ink.Box,
+          {
+            flexDirection: "column",
+            paddingLeft: isSelected ? 0 : 2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "> " }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: result.sessionId.slice(0, 8) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: roleColor, bold: isSelected, children: [
+                  "[",
+                  result.message.role,
+                  "]"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingLeft: isSelected ? 2 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", children: [
+                "  ",
+                truncateContext(result.context, 60)
+              ] }) })
+            ]
+          },
+          `${result.sessionId}-${result.messageIndex}`
+        );
+      }),
+      state.results.length > MAX_VISIBLE_RESULTS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        "Showing ",
+        scrollOffset.current + 1,
+        "-",
+        Math.min(
+          scrollOffset.current + MAX_VISIBLE_RESULTS,
+          state.results.length
+        ),
+        " ",
+        "of ",
+        state.results.length,
+        state.hasMore ? "+" : ""
+      ] }) })
+    ] }),
+    !state.isLoading && state.query && state.results.length === 0 && !state.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+      'No results found for "',
+      state.query,
+      '"'
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "\u2191\u2193 navigate \u2022 Enter select \u2022 Esc close" }) })
+  ] });
+});
+function truncateContext(context, maxLength) {
+  const cleaned = context.replace(/\s+/g, " ").trim();
+  if (cleaned.length <= maxLength) {
+    return cleaned;
+  }
+  return cleaned.slice(0, maxLength - 3) + "...";
+}
+var SearchOverlay_default = SearchOverlay;

package/dist/components/overlays/SearchOverlay.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SearchOverlay Component
+ * Interactive search overlay with real-time results and navigation
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import type { DextoAgent } from '@dexto/core';
+import type { SearchResult } from '@dexto/core';
+export interface SearchOverlayProps {
+    isVisible: boolean;
+    onClose: () => void;
+    onSelectResult?: (result: SearchResult) => void;
+    agent: DextoAgent;
+}
+export interface SearchOverlayHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Interactive search overlay - search messages across sessions
+ */
+declare const SearchOverlay: React.ForwardRefExoticComponent<SearchOverlayProps & React.RefAttributes<SearchOverlayHandle>>;
+export default SearchOverlay;
+//# sourceMappingURL=SearchOverlay.d.ts.map

package/dist/components/overlays/SearchOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/SearchOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAeD;;GAEG;AACH,QAAA,MAAM,aAAa,gGAqSjB,CAAC;AAcH,eAAe,aAAa,CAAC"}