From 634a6d64c9855965aae3ed46af205cb541c3cb9e Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 20:38:30 -0400
Subject: [PATCH 1/7] refactor(components): implement shared component
 SelectPrompt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It uses `@inkjs/ui`’s `Option`/`SelectProps` types, accepts `children`
for the content above the select, and owns the shared `Esc` handling for
select-backed prompts.

Used in:
- ModelPicker
- PlanApproval
- ToolApproval
---
 src/components/ModelPicker.tsx       |  31 ++++-----
 src/components/PlanApproval.tsx      |  46 ++++++------
 src/components/SelectPrompt.test.tsx | 100 +++++++++++++++++++++++++++
 src/components/SelectPrompt.tsx      |  37 ++++++++++
 src/components/ToolApproval.tsx      |  24 +++----
 src/components/index.ts              |   1 +
 6 files changed, 189 insertions(+), 50 deletions(-)
 create mode 100644 src/components/SelectPrompt.test.tsx
 create mode 100644 src/components/SelectPrompt.tsx

diff --git a/src/components/ModelPicker.tsx b/src/components/ModelPicker.tsx
index 0643abf0..88f21e5d 100644
--- a/src/components/ModelPicker.tsx
+++ b/src/components/ModelPicker.tsx
@@ -1,8 +1,9 @@
-import { Select, Spinner } from '@inkjs/ui';
-import { Box, Text, useInput } from 'ink';
+import { Spinner } from '@inkjs/ui';
+import { Text, useInput } from 'ink';
 import { useEffect, useState } from 'react';
 
 import { ollama } from '../utils';
+import { SelectPrompt } from './SelectPrompt';
 
 interface Props {
   currentModel: string;
@@ -16,6 +17,12 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
   );
   const [error, setError] = useState<string | null>(null);
 
+  useInput((_, key) => {
+    if (key.escape) {
+      onCancel();
+    }
+  });
+
   useEffect(() => {
     async function load() {
       try {
@@ -29,12 +36,6 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
     void load();
   }, []);
 
-  useInput((_, key) => {
-    if (key.escape) {
-      onCancel();
-    }
-  });
-
   if (error) {
     return <Text color="red">Error loading models: {error}</Text>;
   }
@@ -44,16 +45,14 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
   }
 
   return (
-    <Box flexDirection="column">
+    <SelectPrompt
+      options={options}
+      defaultValue={currentModel}
+      onChange={onSelect}
+    >
       <Text dimColor>
         Select a model (↑↓ + Enter to confirm, Esc to cancel)
       </Text>
-
-      <Select
-        options={options}
-        defaultValue={currentModel}
-        onChange={onSelect}
-      />
-    </Box>
+    </SelectPrompt>
   );
 }
diff --git a/src/components/PlanApproval.tsx b/src/components/PlanApproval.tsx
index de823f70..a4734008 100644
--- a/src/components/PlanApproval.tsx
+++ b/src/components/PlanApproval.tsx
@@ -1,8 +1,8 @@
-import { Select } from '@inkjs/ui';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import { useCallback } from 'react';
 
 import { MODE } from '../constants';
+import { SelectPrompt } from './SelectPrompt';
 
 interface Props {
   planContent: string;
@@ -16,12 +16,6 @@ const options = [
 ];
 
 export function PlanApproval({ planContent, onModeChange }: Props) {
-  useInput((_, key) => {
-    if (key.escape) {
-      onModeChange(MODE.NAME.PLAN);
-    }
-  });
-
   const handleChange = useCallback(
     (value: string) => {
       onModeChange(value as MODE.Name);
@@ -29,21 +23,29 @@ export function PlanApproval({ planContent, onModeChange }: Props) {
     [onModeChange],
   );
 
-  return (
-    <Box flexDirection="column" marginTop={1}>
-      <Text bold color="magenta">
-        Plan Generated - Choose execution mode:
-      </Text>
+  const handleEscape = useCallback(() => {
+    onModeChange(MODE.NAME.PLAN);
+  }, [onModeChange]);
 
-      <Box marginY={1}>
-        <Text>{planContent}</Text>
+  return (
+    <SelectPrompt
+      options={options}
+      onChange={handleChange}
+      onEscape={handleEscape}
+    >
+      <Box flexDirection="column" marginTop={1}>
+        <Text bold color="magenta">
+          Plan Generated - Choose execution mode:
+        </Text>
+
+        <Box marginY={1}>
+          <Text>{planContent}</Text>
+        </Box>
+
+        <Text dimColor>
+          Select execution mode (↑↓ + Enter to confirm, Esc to cancel)
+        </Text>
       </Box>
-
-      <Text dimColor>
-        Select execution mode (↑↓ + Enter to confirm, Esc to cancel)
-      </Text>
-
-      <Select options={options} onChange={handleChange} />
-    </Box>
+    </SelectPrompt>
   );
 }
diff --git a/src/components/SelectPrompt.test.tsx b/src/components/SelectPrompt.test.tsx
new file mode 100644
index 00000000..2db306dd
--- /dev/null
+++ b/src/components/SelectPrompt.test.tsx
@@ -0,0 +1,100 @@
+import { render } from 'ink-testing-library';
+
+import { KEY } from '../constants';
+import { test } from '../utils';
+
+const { mockOnChange } = vi.hoisted(() => ({
+  mockOnChange: vi.fn<(value: string) => void>(),
+}));
+
+vi.mock('@inkjs/ui', async () => {
+  const { Text } = await import('ink');
+  return {
+    Select: ({
+      options,
+      onChange,
+      defaultValue,
+    }: {
+      options: { label: string; value: string }[];
+      defaultValue?: string;
+      onChange?: (value: string) => void;
+    }) => {
+      mockOnChange.mockImplementation((value) => onChange?.(value));
+      return (
+        <>
+          {defaultValue ? <Text>{`default:${defaultValue}`}</Text> : null}
+          {options.map(({ value, label }) => (
+            <Text key={value}>{label}</Text>
+          ))}
+        </>
+      );
+    },
+  };
+});
+
+import { Text } from 'ink';
+
+import { SelectPrompt } from './SelectPrompt';
+
+describe('SelectPrompt', () => {
+  const options = [
+    { label: 'First option', value: 'first' },
+    { label: 'Second option', value: 'second' },
+  ];
+
+  it('renders children above the select', () => {
+    const { lastFrame } = render(
+      <SelectPrompt options={options} onChange={vi.fn()}>
+        <Text>Prompt text</Text>
+      </SelectPrompt>,
+    );
+
+    const frame = lastFrame() ?? '';
+    expect(frame).toContain('Prompt text');
+    expect(frame).toContain('First option');
+    expect(frame).toContain('Second option');
+  });
+
+  it('calls onEscape when Escape is pressed', async () => {
+    const onEscape = vi.fn();
+    const { stdin } = render(
+      <SelectPrompt options={options} onChange={vi.fn()} onEscape={onEscape} />,
+    );
+
+    stdin.write(KEY.ESCAPE);
+    await test.tick(50);
+
+    expect(onEscape).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores Escape when onEscape is not provided', async () => {
+    const { stdin } = render(
+      <SelectPrompt options={options} onChange={vi.fn()} />,
+    );
+
+    stdin.write(KEY.ESCAPE);
+    await test.tick(50);
+  });
+
+  it('passes defaultValue through to Select', () => {
+    const { lastFrame } = render(
+      <SelectPrompt
+        options={options}
+        defaultValue="second"
+        onChange={vi.fn()}
+      />,
+    );
+
+    expect(lastFrame()).toContain('default:second');
+  });
+
+  it('forwards selection changes', () => {
+    const onChange = vi.fn();
+    render(<SelectPrompt options={options} onChange={onChange} />);
+
+    mockOnChange('second');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('second');
+  });
+});
diff --git a/src/components/SelectPrompt.tsx b/src/components/SelectPrompt.tsx
new file mode 100644
index 00000000..97ec152d
--- /dev/null
+++ b/src/components/SelectPrompt.tsx
@@ -0,0 +1,37 @@
+import type { Option, SelectProps } from '@inkjs/ui';
+import { Select } from '@inkjs/ui';
+import { Box, useInput } from 'ink';
+import type { ReactNode } from 'react';
+
+export interface SelectPromptProps {
+  children?: ReactNode;
+  options: Option[];
+  onChange: NonNullable<SelectProps['onChange']>;
+  onEscape?: () => void;
+  defaultValue?: SelectProps['defaultValue'];
+}
+
+export function SelectPrompt({
+  children,
+  options,
+  onChange,
+  onEscape,
+  defaultValue,
+}: SelectPromptProps) {
+  useInput((_, key) => {
+    if (key.escape) {
+      onEscape?.();
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      {children}
+      <Select
+        options={options}
+        defaultValue={defaultValue}
+        onChange={onChange}
+      />
+    </Box>
+  );
+}
diff --git a/src/components/ToolApproval.tsx b/src/components/ToolApproval.tsx
index fbeb769f..d56dda85 100644
--- a/src/components/ToolApproval.tsx
+++ b/src/components/ToolApproval.tsx
@@ -1,9 +1,9 @@
-import { Select } from '@inkjs/ui';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import { useCallback } from 'react';
 
 import { DECISION } from '../constants';
 import type { ToolCall } from '../utils/ollama';
+import { SelectPrompt } from './SelectPrompt';
 
 interface Props {
   toolCall: ToolCall;
@@ -16,12 +16,6 @@ const options: { label: string; value: DECISION.Decision }[] = [
 ];
 
 export function ToolApproval({ toolCall, onDecision }: Props) {
-  useInput((_, key) => {
-    if (key.escape) {
-      onDecision(DECISION.REJECT);
-    }
-  });
-
   const handleChange = useCallback(
     (value: string) => {
       onDecision(value as DECISION.Decision);
@@ -29,10 +23,18 @@ export function ToolApproval({ toolCall, onDecision }: Props) {
     [onDecision],
   );
 
+  const handleEscape = useCallback(() => {
+    onDecision(DECISION.REJECT);
+  }, [onDecision]);
+
   const args = JSON.stringify(toolCall.function.arguments, null, 2);
 
   return (
-    <Box flexDirection="column">
+    <SelectPrompt
+      options={options}
+      onChange={handleChange}
+      onEscape={handleEscape}
+    >
       <Text color="yellow">⚠️ Tool requires approval:</Text>
 
       <Box marginX={3} marginBottom={1} flexDirection="column">
@@ -47,8 +49,6 @@ export function ToolApproval({ toolCall, onDecision }: Props) {
       <Text dimColor>
         Select approval action (↑↓ + Enter to confirm, Esc to reject)
       </Text>
-
-      <Select options={options} onChange={handleChange} />
-    </Box>
+    </SelectPrompt>
   );
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index eb4286e9..87af3742 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,4 +6,5 @@ export { Header } from './Header';
 export { Messages } from './Messages';
 export { ModelPicker } from './ModelPicker';
 export { PlanApproval } from './PlanApproval';
+export { SelectPrompt } from './SelectPrompt';
 export { ToolApproval } from './ToolApproval';

From 53109d13d4cd80c03998418e012c9e54a0a167ee Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 20:45:13 -0400
Subject: [PATCH 2/7] refactor(components): use SelectPrompt's onEscape in
 ModelPicker

---
 src/components/ModelPicker.tsx  | 9 ++-------
 src/components/SelectPrompt.tsx | 1 +
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/ModelPicker.tsx b/src/components/ModelPicker.tsx
index 88f21e5d..998c584f 100644
--- a/src/components/ModelPicker.tsx
+++ b/src/components/ModelPicker.tsx
@@ -1,5 +1,5 @@
 import { Spinner } from '@inkjs/ui';
-import { Text, useInput } from 'ink';
+import { Text } from 'ink';
 import { useEffect, useState } from 'react';
 
 import { ollama } from '../utils';
@@ -17,12 +17,6 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
   );
   const [error, setError] = useState<string | null>(null);
 
-  useInput((_, key) => {
-    if (key.escape) {
-      onCancel();
-    }
-  });
-
   useEffect(() => {
     async function load() {
       try {
@@ -49,6 +43,7 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
       options={options}
       defaultValue={currentModel}
       onChange={onSelect}
+      onEscape={onCancel}
     >
       <Text dimColor>
         Select a model (↑↓ + Enter to confirm, Esc to cancel)
diff --git a/src/components/SelectPrompt.tsx b/src/components/SelectPrompt.tsx
index 97ec152d..e57eee5f 100644
--- a/src/components/SelectPrompt.tsx
+++ b/src/components/SelectPrompt.tsx
@@ -27,6 +27,7 @@ export function SelectPrompt({
   return (
     <Box flexDirection="column">
       {children}
+
       <Select
         options={options}
         defaultValue={defaultValue}

From 7a1e2dcb2608ebcc2e0a700bbf516fbc781a0805 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 20:50:49 -0400
Subject: [PATCH 3/7] refactor(components): tidy SelectPrompt props

---
 src/components/SelectPrompt.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/SelectPrompt.tsx b/src/components/SelectPrompt.tsx
index e57eee5f..0735f2fc 100644
--- a/src/components/SelectPrompt.tsx
+++ b/src/components/SelectPrompt.tsx
@@ -1,22 +1,17 @@
-import type { Option, SelectProps } from '@inkjs/ui';
+import type { SelectProps } from '@inkjs/ui';
 import { Select } from '@inkjs/ui';
 import { Box, useInput } from 'ink';
 import type { ReactNode } from 'react';
 
-export interface SelectPromptProps {
+export interface SelectPromptProps extends SelectProps {
   children?: ReactNode;
-  options: Option[];
-  onChange: NonNullable<SelectProps['onChange']>;
   onEscape?: () => void;
-  defaultValue?: SelectProps['defaultValue'];
 }
 
 export function SelectPrompt({
   children,
-  options,
-  onChange,
   onEscape,
-  defaultValue,
+  ...selectProps
 }: SelectPromptProps) {
   useInput((_, key) => {
     if (key.escape) {
@@ -28,11 +23,7 @@ export function SelectPrompt({
     <Box flexDirection="column">
       {children}
 
-      <Select
-        options={options}
-        defaultValue={defaultValue}
-        onChange={onChange}
-      />
+      <Select {...selectProps} />
     </Box>
   );
 }

From 92d6f47fd17907c8b3c22cd4afc2357e8d3087a7 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 21:13:38 -0400
Subject: [PATCH 4/7] fix(ModelPicker): close select prompt if current model is
 chosen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With `@inkjs/ui` `Select`, when `defaultValue` is already selected,
pressing `Enter` on that same option does not give you a new
`onChange` event, because the value did not change.

So if you want to “confirm the current model and close the picker”,
`onChange` alone is not enough.

That is why `ModelPicker` has two cancel paths:

1. `Esc` dismisses the picker via `SelectPrompt`
2. `Enter` confirms the current model when the select is already on
   `defaultValue` in `ModelPicker
---
 src/components/ModelPicker.test.tsx | 42 ++++++++++++++++++++++++++++-
 src/components/ModelPicker.tsx      |  9 ++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/components/ModelPicker.test.tsx b/src/components/ModelPicker.test.tsx
index 01e4e741..883053b5 100644
--- a/src/components/ModelPicker.test.tsx
+++ b/src/components/ModelPicker.test.tsx
@@ -46,6 +46,10 @@ describe('ModelPicker', () => {
     mockListModels.mockResolvedValue(['gemma4', 'llama3', 'codellama']);
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('shows loading state before models arrive', () => {
     mockListModels.mockReturnValue(new Promise(() => undefined));
     const { lastFrame } = render(
@@ -114,6 +118,42 @@ describe('ModelPicker', () => {
     expect(onCancel).toHaveBeenCalled();
   });
 
+  it('does not call onCancel on Enter while models are loading', async () => {
+    vi.useFakeTimers();
+    mockListModels.mockReturnValue(new Promise(() => undefined));
+
+    const onCancel = vi.fn();
+    const { stdin } = render(
+      <ModelPicker
+        currentModel="gemma4"
+        onSelect={vi.fn()}
+        onCancel={onCancel}
+      />,
+    );
+
+    stdin.write(KEY.ENTER);
+    await vi.runAllTimersAsync();
+
+    expect(onCancel).not.toHaveBeenCalled();
+  });
+
+  it('calls onCancel on Enter after models load', async () => {
+    const onCancel = vi.fn();
+    const { stdin } = render(
+      <ModelPicker
+        currentModel="gemma4"
+        onSelect={vi.fn()}
+        onCancel={onCancel}
+      />,
+    );
+
+    await test.tick(10);
+    stdin.write(KEY.ENTER);
+    await test.tick(10);
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
   it('shows error when listModels fails', async () => {
     mockListModels.mockRejectedValue(new Error('No connection'));
     const { lastFrame } = render(
@@ -140,7 +180,7 @@ describe('ModelPicker', () => {
     expect(lastFrame()).toContain('Error loading models: network timeout');
   });
 
-  it('does not call onCancel for non-escape keys', async () => {
+  it('does not call onCancel for non-enter keys', async () => {
     const onCancel = vi.fn();
     const { stdin } = render(
       <ModelPicker
diff --git a/src/components/ModelPicker.tsx b/src/components/ModelPicker.tsx
index 998c584f..99ce5b8d 100644
--- a/src/components/ModelPicker.tsx
+++ b/src/components/ModelPicker.tsx
@@ -1,5 +1,5 @@
 import { Spinner } from '@inkjs/ui';
-import { Text } from 'ink';
+import { Text, useInput } from 'ink';
 import { useEffect, useState } from 'react';
 
 import { ollama } from '../utils';
@@ -17,6 +17,13 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
   );
   const [error, setError] = useState<string | null>(null);
 
+  // close select prompt if current model is chosen
+  useInput((_, key) => {
+    if (options.length && key.return) {
+      setTimeout(onCancel);
+    }
+  });
+
   useEffect(() => {
     async function load() {
       try {

From a62e8906380f0f65f1a53228a4474a711a84d9d6 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 21:29:57 -0400
Subject: [PATCH 5/7] refactor(components): rename ModelPicker prop onCancel to
 onClose

---
 src/components/App.test.tsx         | 14 ++++-----
 src/components/App.tsx              |  4 +--
 src/components/ModelPicker.test.tsx | 44 ++++++++++++++---------------
 src/components/ModelPicker.tsx      |  8 +++---
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
index a75efc16..a15dc4b4 100644
--- a/src/components/App.test.tsx
+++ b/src/components/App.test.tsx
@@ -18,7 +18,7 @@ const capturedCallbacks = vi.hoisted(() => ({
   onCommand: null as ((command: string) => void) | null,
   onModeChange: null as ((mode: string) => void) | null,
   onSelect: null as ((model: string) => void) | null,
-  onCancel: null as (() => void) | null,
+  onClose: null as (() => void) | null,
   onToggleMode: null as (() => void) | null,
 }));
 
@@ -47,14 +47,14 @@ vi.mock('./Chat', () => ({
 vi.mock('./ModelPicker', () => ({
   ModelPicker: ({
     onSelect,
-    onCancel,
+    onClose,
   }: {
     currentModel: string;
     onSelect: (model: string) => void;
-    onCancel: () => void;
+    onClose: () => void;
   }) => {
     capturedCallbacks.onSelect = onSelect;
-    capturedCallbacks.onCancel = onCancel;
+    capturedCallbacks.onClose = onClose;
     return <Text>ModelPicker</Text>;
   },
 }));
@@ -80,7 +80,7 @@ describe('App', () => {
     capturedCallbacks.onCommand = null;
     capturedCallbacks.onModeChange = null;
     capturedCallbacks.onSelect = null;
-    capturedCallbacks.onCancel = null;
+    capturedCallbacks.onClose = null;
     capturedCallbacks.onToggleMode = null;
   });
 
@@ -114,12 +114,12 @@ describe('App', () => {
     expect(lastFrame()).not.toContain('ModelPicker');
   });
 
-  it('returns to chat when onCancel is called', async () => {
+  it('returns to chat when onClose is called', async () => {
     const { lastFrame, rerender } = render(<App />);
     capturedCallbacks.onCommand?.('/model');
     rerender(<App />);
     await test.tick();
-    capturedCallbacks.onCancel?.();
+    capturedCallbacks.onClose?.();
     rerender(<App />);
     await test.tick();
     expect(lastFrame()).not.toContain('ModelPicker');
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 74d9d877..d8f48ad3 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -25,7 +25,7 @@ export function App() {
     setPicking(false);
   }, []);
 
-  const handleCancel = useCallback(() => {
+  const handleClose = useCallback(() => {
     setPicking(false);
   }, []);
 
@@ -37,7 +37,7 @@ export function App() {
         <ModelPicker
           currentModel={model}
           onSelect={handleSelect}
-          onCancel={handleCancel}
+          onClose={handleClose}
         />
       ) : (
         <Chat
diff --git a/src/components/ModelPicker.test.tsx b/src/components/ModelPicker.test.tsx
index 883053b5..16914c88 100644
--- a/src/components/ModelPicker.test.tsx
+++ b/src/components/ModelPicker.test.tsx
@@ -56,7 +56,7 @@ describe('ModelPicker', () => {
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={vi.fn()}
+        onClose={vi.fn()}
       />,
     );
     expect(lastFrame()).toContain('Loading models');
@@ -67,7 +67,7 @@ describe('ModelPicker', () => {
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={vi.fn()}
+        onClose={vi.fn()}
       />,
     );
     await test.tick(10);
@@ -82,7 +82,7 @@ describe('ModelPicker', () => {
       <ModelPicker
         currentModel="llama3"
         onSelect={vi.fn()}
-        onCancel={vi.fn()}
+        onClose={vi.fn()}
       />,
     );
     await test.tick(10);
@@ -95,7 +95,7 @@ describe('ModelPicker', () => {
       <ModelPicker
         currentModel="gemma4"
         onSelect={onSelect}
-        onCancel={vi.fn()}
+        onClose={vi.fn()}
       />,
     );
     await test.tick(10);
@@ -103,47 +103,47 @@ describe('ModelPicker', () => {
     expect(onSelect).toHaveBeenCalledWith('llama3');
   });
 
-  it('calls onCancel on Escape', async () => {
-    const onCancel = vi.fn();
+  it('calls onClose on Escape', async () => {
+    const onClose = vi.fn();
     const { stdin } = render(
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={onCancel}
+        onClose={onClose}
       />,
     );
     await test.tick(10);
     stdin.write(KEY.ESCAPE);
     await test.tick(50);
-    expect(onCancel).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 
-  it('does not call onCancel on Enter while models are loading', async () => {
+  it('does not call onClose on Enter while models are loading', async () => {
     vi.useFakeTimers();
     mockListModels.mockReturnValue(new Promise(() => undefined));
 
-    const onCancel = vi.fn();
+    const onClose = vi.fn();
     const { stdin } = render(
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={onCancel}
+        onClose={onClose}
       />,
     );
 
     stdin.write(KEY.ENTER);
     await vi.runAllTimersAsync();
 
-    expect(onCancel).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
   });
 
-  it('calls onCancel on Enter after models load', async () => {
-    const onCancel = vi.fn();
+  it('calls onClose on Enter after models load', async () => {
+    const onClose = vi.fn();
     const { stdin } = render(
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={onCancel}
+        onClose={onClose}
       />,
     );
 
@@ -151,7 +151,7 @@ describe('ModelPicker', () => {
     stdin.write(KEY.ENTER);
     await test.tick(10);
 
-    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('shows error when listModels fails', async () => {
@@ -160,7 +160,7 @@ describe('ModelPicker', () => {
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={vi.fn()}
+        onClose={vi.fn()}
       />,
     );
     await test.tick(10);
@@ -173,25 +173,25 @@ describe('ModelPicker', () => {
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={vi.fn()}
+        onClose={vi.fn()}
       />,
     );
     await test.tick(10);
     expect(lastFrame()).toContain('Error loading models: network timeout');
   });
 
-  it('does not call onCancel for non-enter keys', async () => {
-    const onCancel = vi.fn();
+  it('does not call onClose for non-enter keys', async () => {
+    const onClose = vi.fn();
     const { stdin } = render(
       <ModelPicker
         currentModel="gemma4"
         onSelect={vi.fn()}
-        onCancel={onCancel}
+        onClose={onClose}
       />,
     );
     await test.tick(10);
     stdin.write('a');
     await test.tick(10);
-    expect(onCancel).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/ModelPicker.tsx b/src/components/ModelPicker.tsx
index 99ce5b8d..7766549e 100644
--- a/src/components/ModelPicker.tsx
+++ b/src/components/ModelPicker.tsx
@@ -8,10 +8,10 @@ import { SelectPrompt } from './SelectPrompt';
 interface Props {
   currentModel: string;
   onSelect: (model: string) => void;
-  onCancel: () => void;
+  onClose: () => void;
 }
 
-export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
+export function ModelPicker({ currentModel, onSelect, onClose }: Props) {
   const [options, setOptions] = useState<{ label: string; value: string }[]>(
     [],
   );
@@ -20,7 +20,7 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
   // close select prompt if current model is chosen
   useInput((_, key) => {
     if (options.length && key.return) {
-      setTimeout(onCancel);
+      setTimeout(onClose);
     }
   });
 
@@ -50,7 +50,7 @@ export function ModelPicker({ currentModel, onSelect, onCancel }: Props) {
       options={options}
       defaultValue={currentModel}
       onChange={onSelect}
-      onEscape={onCancel}
+      onEscape={onClose}
     >
       <Text dimColor>
         Select a model (↑↓ + Enter to confirm, Esc to cancel)

From eb75012463d8eec0580d0669a1426c0024a6d028 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 21:59:48 -0400
Subject: [PATCH 6/7] fix(ModelPicker): show current model at the top of the
 select options

---
 src/components/ModelPicker.test.tsx | 63 +++++++++++++++++++++++++++++
 src/components/ModelPicker.tsx      | 12 ++++--
 2 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/components/ModelPicker.test.tsx b/src/components/ModelPicker.test.tsx
index 16914c88..417f3ebf 100644
--- a/src/components/ModelPicker.test.tsx
+++ b/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(
diff --git a/src/components/ModelPicker.tsx b/src/components/ModelPicker.tsx
index 7766549e..ed711032 100644
--- a/src/components/ModelPicker.tsx
+++ b/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>;

From f2449b8949543711f6966697fe05f775e712a71d Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Wed, 6 May 2026 22:01:54 -0400
Subject: [PATCH 7/7] test(components): decrease `test.tick()` from 50 to 20

---
 src/components/ModelPicker.test.tsx  | 2 +-
 src/components/PlanApproval.test.tsx | 4 ++--
 src/components/SelectPrompt.test.tsx | 4 ++--
 src/components/ToolApproval.test.tsx | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ModelPicker.test.tsx b/src/components/ModelPicker.test.tsx
index 417f3ebf..da7fa620 100644
--- a/src/components/ModelPicker.test.tsx
+++ b/src/components/ModelPicker.test.tsx
@@ -177,7 +177,7 @@ describe('ModelPicker', () => {
     );
     await test.tick(10);
     stdin.write(KEY.ESCAPE);
-    await test.tick(50);
+    await test.tick(20);
     expect(onClose).toHaveBeenCalled();
   });
 
diff --git a/src/components/PlanApproval.test.tsx b/src/components/PlanApproval.test.tsx
index 77688dd0..0e18dfd3 100644
--- a/src/components/PlanApproval.test.tsx
+++ b/src/components/PlanApproval.test.tsx
@@ -84,7 +84,7 @@ describe('PlanApproval', () => {
     );
 
     stdin.write(KEY.ESCAPE);
-    await test.tick(50);
+    await test.tick(20);
 
     expect(onModeChange).toHaveBeenCalledWith(MODE.NAME.PLAN);
   });
@@ -96,7 +96,7 @@ describe('PlanApproval', () => {
     );
 
     stdin.write(KEY.ENTER);
-    await test.tick(50);
+    await test.tick(20);
 
     expect(onModeChange).not.toHaveBeenCalled();
   });
diff --git a/src/components/SelectPrompt.test.tsx b/src/components/SelectPrompt.test.tsx
index 2db306dd..68a04fe6 100644
--- a/src/components/SelectPrompt.test.tsx
+++ b/src/components/SelectPrompt.test.tsx
@@ -62,7 +62,7 @@ describe('SelectPrompt', () => {
     );
 
     stdin.write(KEY.ESCAPE);
-    await test.tick(50);
+    await test.tick(20);
 
     expect(onEscape).toHaveBeenCalledTimes(1);
   });
@@ -73,7 +73,7 @@ describe('SelectPrompt', () => {
     );
 
     stdin.write(KEY.ESCAPE);
-    await test.tick(50);
+    await test.tick(20);
   });
 
   it('passes defaultValue through to Select', () => {
diff --git a/src/components/ToolApproval.test.tsx b/src/components/ToolApproval.test.tsx
index 8e22942e..74b98cac 100644
--- a/src/components/ToolApproval.test.tsx
+++ b/src/components/ToolApproval.test.tsx
@@ -97,7 +97,7 @@ describe('ToolApproval', () => {
     );
 
     stdin.write(KEY.ESCAPE);
-    await test.tick(50);
+    await test.tick(20);
 
     expect(onDecision).toHaveBeenCalledTimes(1);
     expect(onDecision).toHaveBeenCalledWith(DECISION.REJECT);
@@ -110,7 +110,7 @@ describe('ToolApproval', () => {
     );
 
     stdin.write(KEY.ENTER);
-    await test.tick(50);
+    await test.tick(20);
 
     expect(onDecision).not.toHaveBeenCalled();
   });