fix(ModelPicker): show current model at the top of the select options

Author: remarkablemark

src/components/ModelPicker.test.tsx

@@ -43,6 +43,8 @@ import { ModelPicker } from './ModelPicker';
 
 describe('ModelPicker', () => {
   beforeEach(() => {
+    mockListModels.mockReset();
+    mockOnChange.mockReset();
     mockListModels.mockResolvedValue(['gemma4', 'llama3', 'codellama']);
   });
 
@@ -89,6 +91,67 @@ describe('ModelPicker', () => {
     expect(lastFrame()).toContain('llama3');
   });
 
+  it('renders current model first in the list', async () => {
+    const { lastFrame } = render(
+      <ModelPicker
+        currentModel="llama3"
+        onSelect={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    await test.tick(10);
+
+    const frame = lastFrame() ?? '';
+    expect(frame.indexOf('llama3')).toBeLessThan(frame.indexOf('gemma4'));
+    expect(frame.indexOf('llama3')).toBeLessThan(frame.indexOf('codellama'));
+  });
+
+  it('does not inject the current model when it is not in the fetched list', async () => {
+    mockListModels.mockResolvedValue(['gemma4', 'codellama']);
+
+    const { lastFrame } = render(
+      <ModelPicker
+        currentModel="llama3"
+        onSelect={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    await test.tick(10);
+
+    const frame = lastFrame() ?? '';
+    expect(frame).toContain('gemma4');
+    expect(frame).toContain('codellama');
+    expect(frame).not.toContain('llama3');
+  });
+
+  it('reloads and reorders options when currentModel changes', async () => {
+    const { lastFrame, rerender } = render(
+      <ModelPicker
+        currentModel="gemma4"
+        onSelect={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    await test.tick(10);
+
+    rerender(
+      <ModelPicker
+        currentModel="llama3"
+        onSelect={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    await test.tick(10);
+
+    const frame = lastFrame() ?? '';
+    expect(mockListModels).toHaveBeenCalledTimes(2);
+    expect(frame.indexOf('llama3')).toBeLessThan(frame.indexOf('gemma4'));
+  });
+
   it('calls onSelect when a model is chosen', async () => {
     const onSelect = vi.fn();
     render(

src/components/ModelPicker.tsx

@@ -27,15 +27,21 @@ export function ModelPicker({ currentModel, onSelect, onClose }: Props) {
   useEffect(() => {
     async function load() {
       try {
-        const list = await ollama.listModels();
-        setOptions(list.map((name) => ({ label: name, value: name })));
+        const models = await ollama.listModels();
+        if (models.includes(currentModel)) {
+          models.splice(models.indexOf(currentModel), 1);
+          models.unshift(currentModel);
+        }
+
+        const options = models.map((model) => ({ label: model, value: model }));
+        setOptions(options);
       } catch (error: unknown) {
         setError(error instanceof Error ? error.message : String(error));
       }
     }
 
     void load();
-  }, []);
+  }, [currentModel]);
 
   if (error) {
     return <Text color="red">Error loading models: {error}</Text>;