@dexto/tui 1.6.2

package/dist/components/TodoPanel.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+function getStatusIndicator(status) {
+  switch (status) {
+    case "completed":
+      return { icon: "\u2713", color: "green" };
+    case "in_progress":
+      return { icon: "\u25CF", color: "yellow" };
+    case "pending":
+    default:
+      return { icon: "\u25CB", color: "gray" };
+  }
+}
+function TodoPanel({ todos, isExpanded, isProcessing = false }) {
+  if (todos.length === 0) {
+    return null;
+  }
+  const sortedTodos = [...todos].sort((a, b) => a.position - b.position);
+  const currentTask = sortedTodos.find((t) => t.status === "in_progress");
+  const nextPendingTask = sortedTodos.find((t) => t.status === "pending");
+  const nextTask = currentTask || nextPendingTask;
+  if (!isProcessing) {
+    if (!isExpanded) {
+      return null;
+    }
+    const completedCount = todos.filter((t) => t.status === "completed").length;
+    const totalCount = todos.length;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: "gray",
+        paddingX: 1,
+        marginX: 1,
+        marginBottom: 1,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
+              "\u{1F4CB} Todo",
+              " "
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "(",
+              completedCount,
+              "/",
+              totalCount,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+              " ",
+              "\xB7 ctrl+t to hide todo list"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: sortedTodos.map((todo) => {
+            const { icon, color } = getStatusIndicator(todo.status);
+            const isCompleted = todo.status === "completed";
+            const isInProgress = todo.status === "in_progress";
+            return /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsxs(Text, { color, children: [
+                icon,
+                " "
+              ] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  color: isCompleted ? "gray" : isInProgress ? "white" : "gray",
+                  strikethrough: isCompleted,
+                  dimColor: !isInProgress && !isCompleted,
+                  children: isInProgress ? todo.activeForm : todo.content
+                }
+              )
+            ] }, todo.id);
+          }) })
+        ]
+      }
+    );
+  }
+  if (!isExpanded) {
+    if (!currentTask) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Box, { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u23BF " }),
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: currentTask.activeForm })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: sortedTodos.map((todo, index) => {
+    const isFirst = index === 0;
+    const isCompleted = todo.status === "completed";
+    const isInProgress = todo.status === "in_progress";
+    const checkbox = isCompleted ? "\u2611" : "\u2610";
+    return /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: isFirst ? "\u23BF  " : "   " }),
+      /* @__PURE__ */ jsxs(Text, { color: isCompleted ? "green" : isInProgress ? "yellow" : "white", children: [
+        checkbox,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color: isCompleted ? "gray" : "white", dimColor: isCompleted, children: todo.content })
+    ] }, todo.id);
+  }) });
+}
+export {
+  TodoPanel
+};

package/dist/components/base/BaseAutocomplete.cjs

@@ -0,0 +1,153 @@
+"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 BaseAutocomplete_exports = {};
+__export(BaseAutocomplete_exports, {
+  BaseAutocomplete: () => BaseAutocomplete
+});
+module.exports = __toCommonJS(BaseAutocomplete_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+function BaseAutocomplete({
+  items,
+  query,
+  isVisible,
+  isLoading = false,
+  onSelect,
+  onLoadIntoInput,
+  onClose,
+  filterFn,
+  scoreFn,
+  formatItem,
+  formatLoadText,
+  title,
+  maxVisibleItems = 10,
+  loadingMessage = "Loading...",
+  emptyMessage = "No matches found",
+  borderColor = "cyan"
+}) {
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+  const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
+  const selectedIndexRef = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    selectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+  const filteredItems = (0, import_react.useMemo)(() => {
+    if (!query) return items;
+    return items.filter((item) => filterFn(item, query)).sort((a, b) => {
+      const scoreA = scoreFn(a, query);
+      const scoreB = scoreFn(b, query);
+      return scoreB - scoreA;
+    });
+  }, [items, query, filterFn, scoreFn]);
+  (0, import_react.useEffect)(() => {
+    setSelectedIndex(0);
+    setScrollOffset(0);
+  }, [filteredItems.length]);
+  (0, import_react.useEffect)(() => {
+    if (selectedIndex < scrollOffset) {
+      setScrollOffset(selectedIndex);
+    } else if (selectedIndex >= scrollOffset + maxVisibleItems) {
+      setScrollOffset(Math.max(0, selectedIndex - maxVisibleItems + 1));
+    }
+  }, [selectedIndex, scrollOffset, maxVisibleItems]);
+  const visibleItems = (0, import_react.useMemo)(() => {
+    return filteredItems.slice(scrollOffset, scrollOffset + maxVisibleItems);
+  }, [filteredItems, scrollOffset, maxVisibleItems]);
+  (0, import_ink.useInput)(
+    (input, key) => {
+      if (!isVisible) return;
+      const itemsLength = filteredItems.length;
+      if (itemsLength === 0) return;
+      if (key.upArrow) {
+        setSelectedIndex((prev) => (prev - 1 + itemsLength) % itemsLength);
+      }
+      if (key.downArrow) {
+        setSelectedIndex((prev) => (prev + 1) % itemsLength);
+      }
+      if (key.escape) {
+        onClose();
+      }
+      if (key.tab && onLoadIntoInput && formatLoadText && itemsLength > 0) {
+        const item = filteredItems[selectedIndexRef.current];
+        if (item) {
+          onLoadIntoInput(formatLoadText(item));
+        }
+        return;
+      }
+      if (key.return && itemsLength > 0) {
+        const item = filteredItems[selectedIndexRef.current];
+        if (item) {
+          onSelect(item);
+        }
+      }
+    },
+    { isActive: isVisible }
+  );
+  if (!isVisible) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: loadingMessage }) });
+  }
+  if (filteredItems.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: emptyMessage }) });
+  }
+  const hasMoreAbove = scrollOffset > 0;
+  const hasMoreBelow = scrollOffset + maxVisibleItems < filteredItems.length;
+  const totalItems = filteredItems.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ink.Box,
+    {
+      borderStyle: "single",
+      borderColor,
+      flexDirection: "column",
+      height: Math.min(maxVisibleItems + 3, totalItems + 3),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          title,
+          " (",
+          selectedIndex + 1,
+          "/",
+          totalItems,
+          ") - \u2191\u2193 navigate",
+          onLoadIntoInput && ", Tab load",
+          ", Enter select, Esc close"
+        ] }) }),
+        hasMoreAbove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          "... \u2191 (",
+          scrollOffset,
+          " more above)"
+        ] }) }),
+        visibleItems.map((item, visibleIndex) => {
+          const actualIndex = scrollOffset + visibleIndex;
+          const isSelected = actualIndex === selectedIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
+        }),
+        hasMoreBelow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          "... \u2193 (",
+          totalItems - scrollOffset - maxVisibleItems,
+          " more below)"
+        ] }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BaseAutocomplete
+});

package/dist/components/base/BaseAutocomplete.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Base Autocomplete Component
+ * Reusable autocomplete with filtering, scoring, and keyboard navigation
+ * Used by SlashCommandAutocomplete and ResourceAutocomplete
+ */
+import { type ReactNode } from 'react';
+export interface BaseAutocompleteProps<T> {
+    items: T[];
+    query: string;
+    isVisible: boolean;
+    isLoading?: boolean;
+    onSelect: (item: T) => void;
+    onLoadIntoInput?: (text: string) => void;
+    onClose: () => void;
+    filterFn: (item: T, query: string) => boolean;
+    scoreFn: (item: T, query: string) => number;
+    formatItem: (item: T, isSelected: boolean) => ReactNode;
+    formatLoadText?: (item: T) => string;
+    title: string;
+    maxVisibleItems?: number;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    borderColor?: string;
+}
+/**
+ * Generic autocomplete component with filtering, scoring, and keyboard navigation
+ */
+export declare function BaseAutocomplete<T>({ items, query, isVisible, isLoading, onSelect, onLoadIntoInput, onClose, filterFn, scoreFn, formatItem, formatLoadText, title, maxVisibleItems, loadingMessage, emptyMessage, borderColor, }: BaseAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BaseAutocomplete.d.ts.map

package/dist/components/base/BaseAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseAutocomplete.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAc,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpF,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAChC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,eAAe,EACf,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAU,EACV,cAAc,EACd,KAAK,EACL,eAAoB,EACpB,cAA6B,EAC7B,YAAiC,EACjC,WAAoB,GACvB,EAAE,qBAAqB,CAAC,CAAC,CAAC,kDA8I1B"}

package/dist/components/base/BaseAutocomplete.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+function BaseAutocomplete({
+  items,
+  query,
+  isVisible,
+  isLoading = false,
+  onSelect,
+  onLoadIntoInput,
+  onClose,
+  filterFn,
+  scoreFn,
+  formatItem,
+  formatLoadText,
+  title,
+  maxVisibleItems = 10,
+  loadingMessage = "Loading...",
+  emptyMessage = "No matches found",
+  borderColor = "cyan"
+}) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const selectedIndexRef = useRef(0);
+  useEffect(() => {
+    selectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+  const filteredItems = useMemo(() => {
+    if (!query) return items;
+    return items.filter((item) => filterFn(item, query)).sort((a, b) => {
+      const scoreA = scoreFn(a, query);
+      const scoreB = scoreFn(b, query);
+      return scoreB - scoreA;
+    });
+  }, [items, query, filterFn, scoreFn]);
+  useEffect(() => {
+    setSelectedIndex(0);
+    setScrollOffset(0);
+  }, [filteredItems.length]);
+  useEffect(() => {
+    if (selectedIndex < scrollOffset) {
+      setScrollOffset(selectedIndex);
+    } else if (selectedIndex >= scrollOffset + maxVisibleItems) {
+      setScrollOffset(Math.max(0, selectedIndex - maxVisibleItems + 1));
+    }
+  }, [selectedIndex, scrollOffset, maxVisibleItems]);
+  const visibleItems = useMemo(() => {
+    return filteredItems.slice(scrollOffset, scrollOffset + maxVisibleItems);
+  }, [filteredItems, scrollOffset, maxVisibleItems]);
+  useInput(
+    (input, key) => {
+      if (!isVisible) return;
+      const itemsLength = filteredItems.length;
+      if (itemsLength === 0) return;
+      if (key.upArrow) {
+        setSelectedIndex((prev) => (prev - 1 + itemsLength) % itemsLength);
+      }
+      if (key.downArrow) {
+        setSelectedIndex((prev) => (prev + 1) % itemsLength);
+      }
+      if (key.escape) {
+        onClose();
+      }
+      if (key.tab && onLoadIntoInput && formatLoadText && itemsLength > 0) {
+        const item = filteredItems[selectedIndexRef.current];
+        if (item) {
+          onLoadIntoInput(formatLoadText(item));
+        }
+        return;
+      }
+      if (key.return && itemsLength > 0) {
+        const item = filteredItems[selectedIndexRef.current];
+        if (item) {
+          onSelect(item);
+        }
+      }
+    },
+    { isActive: isVisible }
+  );
+  if (!isVisible) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: loadingMessage }) });
+  }
+  if (filteredItems.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: emptyMessage }) });
+  }
+  const hasMoreAbove = scrollOffset > 0;
+  const hasMoreBelow = scrollOffset + maxVisibleItems < filteredItems.length;
+  const totalItems = filteredItems.length;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      borderStyle: "single",
+      borderColor,
+      flexDirection: "column",
+      height: Math.min(maxVisibleItems + 3, totalItems + 3),
+      children: [
+        /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          title,
+          " (",
+          selectedIndex + 1,
+          "/",
+          totalItems,
+          ") - \u2191\u2193 navigate",
+          onLoadIntoInput && ", Tab load",
+          ", Enter select, Esc close"
+        ] }) }),
+        hasMoreAbove && /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          "... \u2191 (",
+          scrollOffset,
+          " more above)"
+        ] }) }),
+        visibleItems.map((item, visibleIndex) => {
+          const actualIndex = scrollOffset + visibleIndex;
+          const isSelected = actualIndex === selectedIndex;
+          return /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
+        }),
+        hasMoreBelow && /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          "... \u2193 (",
+          totalItems - scrollOffset - maxVisibleItems,
+          " more below)"
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  BaseAutocomplete
+};

package/dist/components/base/BaseSelector.cjs

@@ -0,0 +1,167 @@
+"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 BaseSelector_exports = {};
+__export(BaseSelector_exports, {
+  BaseSelector: () => BaseSelector
+});
+module.exports = __toCommonJS(BaseSelector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
+var import_overlaySizing = require("../../utils/overlaySizing.js");
+var import_HintBar = require("../shared/HintBar.js");
+function BaseSelectorInner({
+  items,
+  isVisible,
+  isLoading = false,
+  selectedIndex,
+  onSelectIndex,
+  onSelect,
+  onClose,
+  formatItem,
+  title,
+  maxVisibleItems = 8,
+  loadingMessage = "Loading...",
+  emptyMessage = "No items found",
+  borderColor = "cyan",
+  onTab,
+  supportsTab = false,
+  instructionsOverride
+}, ref) {
+  const { rows: terminalRows } = (0, import_useTerminalSize.useTerminalSize)();
+  const viewportItems = (0, import_react.useMemo)(() => {
+    return (0, import_overlaySizing.getMaxVisibleItemsForTerminalRows)({
+      rows: terminalRows,
+      hardCap: maxVisibleItems,
+      reservedRows: 14
+    });
+  }, [terminalRows, maxVisibleItems]);
+  const [scrollOffsetState, setScrollOffset] = (0, import_react.useState)(0);
+  const selectedIndexRef = (0, import_react.useRef)(selectedIndex);
+  const prevItemsLengthRef = (0, import_react.useRef)(items.length);
+  selectedIndexRef.current = selectedIndex;
+  const scrollOffset = (0, import_react.useMemo)(() => {
+    const itemsChanged = items.length !== prevItemsLengthRef.current;
+    if (itemsChanged && items.length <= viewportItems) {
+      return 0;
+    }
+    let offset = scrollOffsetState;
+    if (selectedIndex < offset) {
+      offset = selectedIndex;
+    } else if (selectedIndex >= offset + viewportItems) {
+      offset = Math.max(0, selectedIndex - viewportItems + 1);
+    }
+    const maxOffset = Math.max(0, items.length - viewportItems);
+    return Math.min(maxOffset, Math.max(0, offset));
+  }, [selectedIndex, items.length, viewportItems, scrollOffsetState]);
+  (0, import_react.useEffect)(() => {
+    prevItemsLengthRef.current = items.length;
+  }, [items.length]);
+  (0, import_react.useEffect)(() => {
+    if (scrollOffset !== scrollOffsetState) {
+      setScrollOffset(scrollOffset);
+    }
+  }, [scrollOffset, scrollOffsetState]);
+  const handleSelectIndex = (0, import_react.useCallback)(
+    (newIndex) => {
+      selectedIndexRef.current = newIndex;
+      onSelectIndex(newIndex);
+    },
+    [onSelectIndex]
+  );
+  const visibleItems = (0, import_react.useMemo)(() => {
+    return items.slice(scrollOffset, scrollOffset + viewportItems);
+  }, [items, scrollOffset, viewportItems]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (_input, key) => {
+        if (!isVisible) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        const itemsLength = items.length;
+        if (isLoading || itemsLength === 0) return true;
+        if (key.upArrow) {
+          const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+          handleSelectIndex(nextIndex);
+          return true;
+        }
+        if (key.downArrow) {
+          const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+          handleSelectIndex(nextIndex);
+          return true;
+        }
+        if (key.tab && onTab) {
+          const item = items[selectedIndexRef.current];
+          if (item !== void 0) {
+            onTab(item);
+            return true;
+          }
+        }
+        if (key.return && itemsLength > 0) {
+          const item = items[selectedIndexRef.current];
+          if (item !== void 0) {
+            onSelect(item);
+            return true;
+          }
+        }
+        return false;
+      }
+    }),
+    [isVisible, isLoading, items, handleSelectIndex, onClose, onSelect, onTab]
+  );
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: borderColor, bold: true, children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: viewportItems, marginTop: 1, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: loadingMessage }) }),
+      Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, `loading-spacer-${index}`))
+    ] }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: emptyMessage }) }),
+      Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, `empty-spacer-${index}`))
+    ] }) : Array.from({ length: viewportItems }, (_, rowIndex) => {
+      const item = visibleItems[rowIndex];
+      if (item === void 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, `item-empty-${rowIndex}`);
+      }
+      const actualIndex = scrollOffset + rowIndex;
+      const isSelected = actualIndex === selectedIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", wrap: "truncate-end", children: instructionsOverride }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_HintBar.HintBar,
+      {
+        hints: [
+          "\u2191\u2193 navigate",
+          supportsTab ? "Tab load" : "",
+          "Enter select",
+          "Esc close"
+        ]
+      }
+    ) })
+  ] });
+}
+const BaseSelector = (0, import_react.forwardRef)(BaseSelectorInner);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BaseSelector
+});

package/dist/components/base/BaseSelector.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Base Selector Component
+ * Reusable selector with keyboard navigation for lists
+ * Used by ModelSelector and SessionSelector
+ */
+import { type ReactNode } from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+export interface BaseSelectorProps<T> {
+    items: T[];
+    isVisible: boolean;
+    isLoading?: boolean;
+    selectedIndex: number;
+    onSelectIndex: (index: number) => void;
+    onSelect: (item: T) => void;
+    onClose: () => void;
+    formatItem: (item: T, isSelected: boolean) => ReactNode;
+    title: string;
+    maxVisibleItems?: number;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    borderColor?: string;
+    onTab?: (item: T) => void;
+    supportsTab?: boolean;
+    instructionsOverride?: string;
+}
+export interface BaseSelectorHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Generic selector component with keyboard navigation and scrolling
+ */
+declare function BaseSelectorInner<T>({ items, isVisible, isLoading, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems, loadingMessage, emptyMessage, borderColor, onTab, supportsTab, instructionsOverride, }: BaseSelectorProps<T>, ref: React.Ref<BaseSelectorHandle>): import("react/jsx-runtime").JSX.Element | null;
+export declare const BaseSelector: <T>(props: BaseSelectorProps<T> & {
+    ref?: React.Ref<BaseSelectorHandle>;
+}) => ReturnType<typeof BaseSelectorInner>;
+export {};
+//# sourceMappingURL=BaseSelector.d.ts.map

package/dist/components/base/BaseSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,EACI,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,eAAmB,EACnB,cAA6B,EAC7B,YAA+B,EAC/B,WAAoB,EACpB,KAAK,EACL,WAAmB,EACnB,oBAAoB,GACvB,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACvB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,kDA8LrC;AAGD,eAAO,MAAM,YAAY,EAAoC,CAAC,CAAC,EAC3D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}