@nicknisi/pi-model-switch 0.2.0 → 0.2.1

package/dist/section-picker.d.ts

@@ -16,7 +16,10 @@ export declare class SectionPicker implements Component {
     private readonly selectTheme;
     constructor(sections: PickerSection[], theme: Theme, done: (value: string | null) => void);
     private renderTabBar;
+    private wireSelectList;
     private switchSection;
+    private filteredItems;
+    private rebuildList;
     render(width: number): string[];
     invalidate(): void;
     handleInput(data: string): void;

package/dist/section-picker.js

@@ -21,8 +21,7 @@ export class SectionPicker {
             noMatch: (text) => theme.fg('warning', text),
         };
         this.selectList = new SelectList(sections[0]?.items ?? [], 10, this.selectTheme);
-        this.selectList.onSelect = (item) => this.done(item.value);
-        this.selectList.onCancel = () => this.done(null);
+        this.wireSelectList();
         this.container.addChild(this.tabBar);
         this.container.addChild(this.searchInput);
         this.container.addChild(this.selectList);
@@ -37,12 +36,42 @@ export class SectionPicker {
         });
         this.tabBar.setText(parts.join(''));
     }
+    wireSelectList() {
+        this.selectList.onSelect = (item) => this.done(item.value);
+        this.selectList.onCancel = () => this.done(null);
+    }
     switchSection(direction) {
         this.activeSectionIndex = (this.activeSectionIndex + direction + this.sections.length) % this.sections.length;
         this.searchInput.setValue('');
-        this.selectList = new SelectList(this.sections[this.activeSectionIndex]?.items ?? [], 10, this.selectTheme);
-        this.selectList.onSelect = (item) => this.done(item.value);
-        this.selectList.onCancel = () => this.done(null);
+        this.rebuildList();
+    }
+    filteredItems() {
+        const query = this.searchInput.getValue().trim().toLowerCase();
+        if (query.length === 0)
+            return this.sections[this.activeSectionIndex]?.items ?? [];
+        // SelectList.setFilter only matches value.startsWith(query), which can never
+        // match a model name inside "provider/modelId" — filter here instead, with a
+        // substring match across every section.
+        const seen = new Set();
+        const matches = [];
+        for (const section of this.sections) {
+            for (const item of section.items) {
+                if (seen.has(item.value) || !item.value.toLowerCase().includes(query))
+                    continue;
+                seen.add(item.value);
+                matches.push({ ...item, description: section.name });
+            }
+        }
+        return matches;
+    }
+    rebuildList() {
+        // Size the primary column to the content so section descriptions never
+        // truncate long provider/modelId labels (SelectList caps it at 32 otherwise).
+        this.selectList = new SelectList(this.filteredItems(), 10, this.selectTheme, {
+            minPrimaryColumnWidth: 1,
+            maxPrimaryColumnWidth: Number.MAX_SAFE_INTEGER,
+        });
+        this.wireSelectList();
         this.container.clear();
         this.container.addChild(this.tabBar);
         this.container.addChild(this.searchInput);
@@ -69,7 +98,7 @@ export class SectionPicker {
         }
         else {
             this.searchInput.handleInput(data);
-            this.selectList.setFilter(this.searchInput.getValue());
+            this.rebuildList();
         }
     }
 }

package/dist/section-picker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/section-picker.test.js

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from 'vitest';
+import { SectionPicker } from './section-picker.js';
+const theme = {
+    fg: (_color, text) => text,
+    bold: (text) => text,
+};
+function sections() {
+    return [
+        {
+            name: 'work',
+            items: [
+                { value: 'cloudflare-ai-gateway/gpt-5.6-sol', label: '  cloudflare-ai-gateway/gpt-5.6-sol' },
+                { value: 'cloudflare-ai-gateway/claude-opus-5', label: '  cloudflare-ai-gateway/claude-opus-5' },
+                {
+                    value: 'fireworks/accounts/fireworks/models/kimi-k3',
+                    label: '  fireworks/accounts/fireworks/models/kimi-k3',
+                },
+            ],
+        },
+        {
+            name: 'personal',
+            items: [
+                {
+                    value: 'fireworks/accounts/fireworks/models/kimi-k3',
+                    label: '  fireworks/accounts/fireworks/models/kimi-k3',
+                },
+            ],
+        },
+    ];
+}
+function render(picker) {
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: stripping ANSI escape codes
+    return picker
+        .render(240)
+        .join('\n')
+        .replace(/\x1b\[[0-9;]*m/g, '');
+}
+function type(picker, text) {
+    for (const char of text)
+        picker.handleInput(char);
+}
+describe('SectionPicker filtering', () => {
+    it('matches a model name substring inside provider/modelId', () => {
+        const picker = new SectionPicker(sections(), theme, vi.fn());
+        type(picker, 'claude');
+        const output = render(picker);
+        expect(output).toContain('cloudflare-ai-gateway/claude-opus-5');
+        expect(output).not.toContain('gpt-5.6-sol');
+        expect(output).not.toContain('kimi-k3');
+    });
+    it('searches across all sections and dedupes models present in multiple sections', () => {
+        const picker = new SectionPicker(sections(), theme, vi.fn());
+        type(picker, 'kimi');
+        const output = render(picker);
+        const occurrences = output.split('kimi-k3').length - 1;
+        expect(occurrences).toBe(1);
+    });
+    it('shows only the active section when the query is empty', () => {
+        const picker = new SectionPicker(sections(), theme, vi.fn());
+        type(picker, 'claude');
+        type(picker, '\x7f'.repeat(7)); // backspace away the query
+        const output = render(picker);
+        expect(output).toContain('cloudflare-ai-gateway/claude-opus-5');
+        expect(output).toContain('cloudflare-ai-gateway/gpt-5.6-sol');
+    });
+    it('confirms the highlighted filtered match on enter', () => {
+        const done = vi.fn();
+        const picker = new SectionPicker(sections(), theme, done);
+        type(picker, 'kimi');
+        picker.handleInput('\r');
+        expect(done).toHaveBeenCalledWith('fireworks/accounts/fireworks/models/kimi-k3');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nicknisi/pi-model-switch",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Cycle or fuzzy-pick from a machine-local, sectioned list of preferred Pi models",
   "keywords": [
     "pi",

package/section-picker.ts

@@ -38,8 +38,7 @@ export class SectionPicker implements Component {
     };
 
     this.selectList = new SelectList(sections[0]?.items ?? [], 10, this.selectTheme);
-    this.selectList.onSelect = (item) => this.done(item.value);
-    this.selectList.onCancel = () => this.done(null);
+    this.wireSelectList();
 
     this.container.addChild(this.tabBar);
     this.container.addChild(this.searchInput);
@@ -57,12 +56,44 @@ export class SectionPicker implements Component {
     this.tabBar.setText(parts.join(''));
   }
 
+  private wireSelectList(): void {
+    this.selectList.onSelect = (item) => this.done(item.value);
+    this.selectList.onCancel = () => this.done(null);
+  }
+
   private switchSection(direction: 1 | -1): void {
     this.activeSectionIndex = (this.activeSectionIndex + direction + this.sections.length) % this.sections.length;
     this.searchInput.setValue('');
-    this.selectList = new SelectList(this.sections[this.activeSectionIndex]?.items ?? [], 10, this.selectTheme);
-    this.selectList.onSelect = (item) => this.done(item.value);
-    this.selectList.onCancel = () => this.done(null);
+    this.rebuildList();
+  }
+
+  private filteredItems(): SelectItem[] {
+    const query = this.searchInput.getValue().trim().toLowerCase();
+    if (query.length === 0) return this.sections[this.activeSectionIndex]?.items ?? [];
+
+    // SelectList.setFilter only matches value.startsWith(query), which can never
+    // match a model name inside "provider/modelId" — filter here instead, with a
+    // substring match across every section.
+    const seen = new Set<string>();
+    const matches: SelectItem[] = [];
+    for (const section of this.sections) {
+      for (const item of section.items) {
+        if (seen.has(item.value) || !item.value.toLowerCase().includes(query)) continue;
+        seen.add(item.value);
+        matches.push({ ...item, description: section.name });
+      }
+    }
+    return matches;
+  }
+
+  private rebuildList(): void {
+    // Size the primary column to the content so section descriptions never
+    // truncate long provider/modelId labels (SelectList caps it at 32 otherwise).
+    this.selectList = new SelectList(this.filteredItems(), 10, this.selectTheme, {
+      minPrimaryColumnWidth: 1,
+      maxPrimaryColumnWidth: Number.MAX_SAFE_INTEGER,
+    });
+    this.wireSelectList();
     this.container.clear();
     this.container.addChild(this.tabBar);
     this.container.addChild(this.searchInput);
@@ -94,7 +125,7 @@ export class SectionPicker implements Component {
       this.selectList.handleInput(data);
     } else {
       this.searchInput.handleInput(data);
-      this.selectList.setFilter(this.searchInput.getValue());
+      this.rebuildList();
     }
   }
 }