feat(components): add ModelPicker

Author: remarkablemark

src/components/App.test.tsx

@@ -1,8 +1,50 @@
+import { Text } from 'ink';
 import { render } from 'ink-testing-library';
 
+import { tick } from '../utils/test';
+
+const capturedCallbacks = vi.hoisted(() => ({
+  onCommand: null as ((command: string) => void) | null,
+  onSelect: null as ((model: string) => void) | null,
+  onCancel: null as (() => void) | null,
+}));
+
+vi.mock('./Chat', () => ({
+  Chat: ({
+    onCommand,
+  }: {
+    model: string;
+    onCommand: (command: string) => void;
+  }) => {
+    capturedCallbacks.onCommand = onCommand;
+    return <Text>{'>'}</Text>;
+  },
+}));
+
+vi.mock('./ModelPicker', () => ({
+  ModelPicker: ({
+    onSelect,
+    onCancel,
+  }: {
+    currentModel: string;
+    onSelect: (model: string) => void;
+    onCancel: () => void;
+  }) => {
+    capturedCallbacks.onSelect = onSelect;
+    capturedCallbacks.onCancel = onCancel;
+    return <Text>ModelPicker</Text>;
+  },
+}));
+
 import { App } from './App';
 
 describe('App', () => {
+  beforeEach(() => {
+    capturedCallbacks.onCommand = null;
+    capturedCallbacks.onSelect = null;
+    capturedCallbacks.onCancel = null;
+  });
+
   it('renders title', () => {
     const { lastFrame } = render(<App />);
     expect(lastFrame()).toContain('Code Ollama');
@@ -12,4 +54,44 @@ describe('App', () => {
     const { lastFrame } = render(<App />);
     expect(lastFrame()).toContain('>');
   });
+
+  it('shows ModelPicker when /model command is issued', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/model');
+    rerender(<App />);
+    await tick();
+    expect(lastFrame()).toContain('ModelPicker');
+  });
+
+  it('returns to chat and updates model when onSelect is called', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/model');
+    rerender(<App />);
+    await tick();
+    capturedCallbacks.onSelect?.('llama3');
+    rerender(<App />);
+    await tick();
+    expect(lastFrame()).toContain('model: llama3');
+    expect(lastFrame()).not.toContain('ModelPicker');
+  });
+
+  it('returns to chat when onCancel is called', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/model');
+    rerender(<App />);
+    await tick();
+    capturedCallbacks.onCancel?.();
+    rerender(<App />);
+    await tick();
+    expect(lastFrame()).not.toContain('ModelPicker');
+    expect(lastFrame()).toContain('>');
+  });
+
+  it('does not open ModelPicker for unknown commands', async () => {
+    const { lastFrame, rerender } = render(<App />);
+    capturedCallbacks.onCommand?.('/unknown');
+    rerender(<App />);
+    await tick();
+    expect(lastFrame()).not.toContain('ModelPicker');
+  });
 });

src/components/App.tsx

@@ -1,12 +1,44 @@
 import { Box, Text } from 'ink';
+import { useCallback, useState } from 'react';
 
 import { Chat } from './Chat';
+import { ModelPicker } from './ModelPicker';
+
+const DEFAULT_MODEL = process.env.OLLAMA_MODEL ?? 'gemma4';
 
 export function App() {
+  const [model, setModel] = useState(DEFAULT_MODEL);
+  const [picking, setPicking] = useState(false);
+
+  const handleCommand = useCallback((command: string) => {
+    if (command === '/model') {
+      setPicking(true);
+    }
+  }, []);
+
+  const handleSelect = useCallback((selected: string) => {
+    setModel(selected);
+    setPicking(false);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    setPicking(false);
+  }, []);
+
   return (
     <Box flexDirection="column">
       <Text>Code Ollama</Text>
-      <Chat />
+      <Text dimColor>model: {model}</Text>
+
+      {picking ? (
+        <ModelPicker
+          currentModel={model}
+          onSelect={handleSelect}
+          onCancel={handleCancel}
+        />
+      ) : (
+        <Chat model={model} onCommand={handleCommand} />
+      )}
     </Box>
   );
 }

src/components/Chat.test.tsx

@@ -1,7 +1,9 @@
 import { Text } from 'ink';
 import { render } from 'ink-testing-library';
 
-const mockState = {
+import { tick } from '../utils/test';
+
+const mockState = vi.hoisted(() => ({
   handlers: [] as ((value: string) => void)[],
   testInput: '',
   shouldReset: false,
@@ -10,7 +12,7 @@ const mockState = {
     this.testInput = '';
     this.shouldReset = true;
   },
-};
+}));
 
 vi.mock('@inkjs/ui', () => ({
   Spinner: ({ label }: { label?: string }) => <Text>{`⏳${label ?? ''}`}</Text>,
@@ -59,9 +61,6 @@ vi.mock('../utils', () => ({
   },
 }));
 
-const tick = (ms = 0) =>
-  new Promise<void>((resolve) => setTimeout(resolve, ms));
-
 async function typeText(
   rerender: (tree: React.ReactElement) => void,
   text: string,
@@ -90,12 +89,12 @@ describe('Chat', () => {
   });
 
   it('renders input prompt', () => {
-    const { lastFrame } = render(<Chat />);
+    const { lastFrame } = render(<Chat model="gemma4" onCommand={vi.fn()} />);
     expect(lastFrame()).toContain('>');
   });
 
   it('shows message after submit', async () => {
-    const chat = <Chat />;
+    const chat = <Chat model="gemma4" onCommand={vi.fn()} />;
     const { lastFrame, rerender } = render(chat);
     await typeText(rerender, 'hello', chat);
     submitInput('hello');
@@ -105,7 +104,7 @@ describe('Chat', () => {
   });
 
   it('clears input after submit', async () => {
-    const chat = <Chat />;
+    const chat = <Chat model="gemma4" onCommand={vi.fn()} />;
     const { lastFrame, rerender } = render(chat);
     await typeText(rerender, 'hello', chat);
     submitInput('hello');
@@ -116,7 +115,7 @@ describe('Chat', () => {
   });
 
   it('does not add blank messages', async () => {
-    const chat = <Chat />;
+    const chat = <Chat model="gemma4" onCommand={vi.fn()} />;
     const { lastFrame, rerender } = render(chat);
     await typeText(rerender, '   ', chat);
     submitInput('   ');
@@ -130,7 +129,7 @@ describe('Chat', () => {
   });
 
   it('shows multiple messages in order', async () => {
-    const chat = <Chat />;
+    const chat = <Chat model="gemma4" onCommand={vi.fn()} />;
     const { lastFrame, rerender } = render(chat);
     await typeText(rerender, 'first', chat);
     submitInput('first');
@@ -146,6 +145,33 @@ describe('Chat', () => {
     expect(firstIdx).toBeGreaterThanOrEqual(0);
     expect(secondIdx).toBeGreaterThan(firstIdx);
   });
+
+  it('calls onCommand when a slash command is submitted', async () => {
+    const onCommand = vi.fn();
+    const chat = <Chat model="gemma4" onCommand={onCommand} />;
+    const { rerender } = render(chat);
+    submitInput('/model');
+    rerender(chat);
+    await tick();
+    expect(onCommand).toHaveBeenCalledWith('/model');
+  });
+
+  it('passes model prop to streamChat', async () => {
+    const { ollama } = await import('../utils');
+    const { streamChat } = ollama;
+    vi.mocked(streamChat).mockClear();
+
+    const chat = <Chat model="llama3" onCommand={vi.fn()} />;
+    const { rerender } = render(chat);
+    submitInput('hello');
+    rerender(chat);
+    await waitForStream();
+
+    expect(vi.mocked(streamChat)).toHaveBeenLastCalledWith(
+      expect.any(Array),
+      'llama3',
+    );
+  });
 });
 
 describe('Chat with error', () => {
@@ -162,7 +188,7 @@ describe('Chat with error', () => {
       throw new Error('Connection failed');
     });
 
-    const chat = <Chat />;
+    const chat = <Chat model="gemma4" onCommand={vi.fn()} />;
     const { lastFrame, rerender } = render(chat);
 
     await typeText(rerender, 'hello', chat);
@@ -183,7 +209,7 @@ describe('Chat with error', () => {
       throw { toString: () => 'Custom error' };
     });
 
-    const chat = <Chat />;
+    const chat = <Chat model="gemma4" onCommand={vi.fn()} />;
     const { lastFrame, rerender } = render(chat);
 
     await typeText(rerender, 'hello', chat);

src/components/Chat.tsx

@@ -7,7 +7,12 @@ import { ollama } from '../utils';
 
 const PROMPT_PREFIX = '> ';
 
-export function Chat() {
+interface Props {
+  model: string;
+  onCommand: (command: string) => void;
+}
+
+export function Chat({ model, onCommand }: Props) {
   const [messages, setMessages] = useState<ollama.Message[]>([]);
   const [submitKey, setSubmitKey] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
@@ -18,6 +23,12 @@ export function Chat() {
       if (!userContent) return;
 
       setSubmitKey((key) => key + 1);
+
+      if (userContent.startsWith('/')) {
+        onCommand(userContent);
+        return;
+      }
+
       setIsLoading(true);
 
       const userMessage: ollama.Message = {
@@ -34,7 +45,7 @@ export function Chat() {
       setMessages((prev) => [...prev, assistantMessage]);
 
       try {
-        for await (const chunk of ollama.streamChat(updatedMessages)) {
+        for await (const chunk of ollama.streamChat(updatedMessages, model)) {
           assistantMessage.content += chunk;
           setMessages((prev) => {
             const newMessages = [...prev];
@@ -53,7 +64,7 @@ export function Chat() {
         setIsLoading(false);
       }
     },
-    [messages],
+    [messages, model, onCommand],
   );
 
   return (