@wrongstack/tui 0.51.3 → 0.63.4

package/dist/index.js

@@ -3769,12 +3769,28 @@ var LiveActivityStrip = React4.memo(function LiveActivityStrip2({
     ] }) }) : null
   ] });
 });
+var MAX_VISIBLE = 10;
+function getVisibleWindow(selected, total) {
+  const half = Math.floor(MAX_VISIBLE / 2);
+  let start = selected - half;
+  let end = start + MAX_VISIBLE;
+  if (start < 0) {
+    start = 0;
+    end = Math.min(total, MAX_VISIBLE);
+  }
+  if (end > total) {
+    end = total;
+    start = Math.max(0, end - MAX_VISIBLE);
+  }
+  return { start, end };
+}
 function ModelPicker({
   step,
   providerOptions,
-  modelOptions,
+  filteredOptions,
   selected,
   pickedProviderId,
+  searchQuery,
   hint
 }) {
   if (step === "provider") {
@@ -3799,17 +3815,47 @@ function ModelPicker({
       hint ? /* @__PURE__ */ jsx(Text, { color: "yellow", children: hint }) : null
     ] });
   }
+  const total = filteredOptions.length;
+  const { start, end } = getVisibleWindow(selected, total);
+  const visibleItems = filteredOptions.slice(start, end);
+  const searchHint = searchQuery ? ` | filter:"${searchQuery}" \u2192 ${total} match${total === 1 ? "" : "es"}` : total > MAX_VISIBLE ? ` (${total} models \u2014 type to filter)` : "";
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
     /* @__PURE__ */ jsxs(Text, { color: "cyan", bold: true, children: [
-      "\u2501\u2501 Switch model \u2014 Step 2/2: Pick model (",
+      "\u2501\u2501 Switch model \u2014 Step 2/2: Pick model ",
+      "(",
       pickedProviderId,
-      ") \u2501\u2501"
+      searchHint,
+      ")",
+      " \u2501\u2501"
+    ] }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191/\u2193 navigate \xB7 Enter select \xB7 Esc back \xB7 Ctrl+C exit \xB7 type to filter" }),
+    total === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: searchQuery ? `(no models match "${searchQuery}")` : "(no models known for this provider)" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      start > 0 && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "\u25B2 ",
+        start,
+        " above"
+      ] }),
+      visibleItems.map((id, vi) => {
+        const absoluteIndex = start + vi;
+        return /* @__PURE__ */ jsxs(
+          Text,
+          {
+            color: absoluteIndex === selected ? "cyan" : void 0,
+            inverse: absoluteIndex === selected,
+            children: [
+              absoluteIndex === selected ? "\u203A " : "  ",
+              id
+            ]
+          },
+          id
+        );
+      }),
+      end < total && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "\u25BC ",
+        total - end,
+        " below"
+      ] })
     ] }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191/\u2193 navigate \xB7 Enter select \xB7 Esc back \xB7 Ctrl+C exit" }),
-    modelOptions.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "(no models known for this provider)" }) : modelOptions.map((id, i) => /* @__PURE__ */ jsxs(Text, { color: i === selected ? "cyan" : void 0, inverse: i === selected, children: [
-      i === selected ? "\u203A " : "  ",
-      id
-    ] }, id)),
     hint ? /* @__PURE__ */ jsx(Text, { color: "yellow", children: hint }) : null
   ] });
 }
@@ -4911,8 +4957,10 @@ function reducer(state, action) {
           step: "provider",
           providerOptions: action.providers,
           modelOptions: [],
+          filteredOptions: [],
           selected: 0,
-          hint: void 0
+          hint: void 0,
+          searchQuery: ""
         }
       };
     case "modelPickerClose":
@@ -4923,12 +4971,15 @@ function reducer(state, action) {
           step: "provider",
           providerOptions: [],
           modelOptions: [],
-          selected: 0
+          filteredOptions: [],
+          selected: 0,
+          searchQuery: ""
         }
       };
     case "modelPickerMove": {
       if (!state.modelPicker.open) return state;
-      const len = state.modelPicker.step === "provider" ? state.modelPicker.providerOptions.length : state.modelPicker.modelOptions.length;
+      const list = state.modelPicker.step === "provider" ? state.modelPicker.providerOptions : state.modelPicker.filteredOptions;
+      const len = list.length;
       if (len === 0) return state;
       const next = (state.modelPicker.selected + action.delta + len) % len;
       return {
@@ -4943,9 +4994,11 @@ function reducer(state, action) {
           ...state.modelPicker,
           step: "model",
           modelOptions: action.models,
+          filteredOptions: action.models,
           selected: 0,
           pickedProviderId: action.providerId,
-          hint: void 0
+          hint: void 0,
+          searchQuery: ""
         }
       };
     case "modelPickerBack":
@@ -4955,11 +5008,29 @@ function reducer(state, action) {
           ...state.modelPicker,
           step: "provider",
           modelOptions: [],
+          filteredOptions: [],
           selected: 0,
           pickedProviderId: void 0,
+          hint: void 0,
+          searchQuery: ""
+        }
+      };
+    case "modelPickerSearch": {
+      if (!state.modelPicker.open || state.modelPicker.step !== "model") return state;
+      const q = action.query.toLowerCase();
+      const filtered = q ? state.modelPicker.modelOptions.filter((id) => id.toLowerCase().includes(q)) : state.modelPicker.modelOptions;
+      const selected = filtered.length > 0 ? Math.min(state.modelPicker.selected, filtered.length - 1) : 0;
+      return {
+        ...state,
+        modelPicker: {
+          ...state.modelPicker,
+          filteredOptions: filtered,
+          selected,
+          searchQuery: action.query,
           hint: void 0
         }
       };
+    }
     case "modelPickerHint":
       return {
         ...state,
@@ -5819,7 +5890,9 @@ function App({
       step: "provider",
       providerOptions: [],
       modelOptions: [],
-      selected: 0
+      filteredOptions: [],
+      selected: 0,
+      searchQuery: ""
     },
     autonomyPicker: { open: false, options: [], selected: 0 },
     settingsPicker: { open: false, field: 0, mode: "off", delayMs: 0 },
@@ -7864,6 +7937,19 @@ function App({
         dispatch({ type: "modelPickerMove", delta: 1 });
         return;
       }
+      if (state.modelPicker.step === "model" && input && !key.return && !key.backspace) {
+        dispatch({ type: "modelPickerSearch", query: state.modelPicker.searchQuery + input });
+        return;
+      }
+      if (state.modelPicker.step === "model" && key.backspace) {
+        const q = state.modelPicker.searchQuery;
+        if (q.length > 0) {
+          dispatch({ type: "modelPickerSearch", query: q.slice(0, -1) });
+        } else {
+          dispatch({ type: "modelPickerBack" });
+        }
+        return;
+      }
       if (isEnter) {
         inputGateRef.current = true;
         try {
@@ -7878,7 +7964,7 @@ function App({
             return;
           }
           const providerId = state.modelPicker.pickedProviderId;
-          const modelId = state.modelPicker.modelOptions[state.modelPicker.selected];
+          const modelId = state.modelPicker.filteredOptions[state.modelPicker.selected];
           if (!providerId || !modelId) return;
           const err = switchProviderAndModel?.(providerId, modelId);
           if (err) {
@@ -8684,8 +8770,10 @@ User message:
           step: state.modelPicker.step,
           providerOptions: state.modelPicker.providerOptions,
           modelOptions: state.modelPicker.modelOptions,
+          filteredOptions: state.modelPicker.filteredOptions,
           selected: state.modelPicker.selected,
           pickedProviderId: state.modelPicker.pickedProviderId,
+          searchQuery: state.modelPicker.searchQuery,
           hint: state.modelPicker.hint
         }
       ) : null,