feat: VLM support with image attachment (#187)

## Summary

Adds Vision Language Model (VLM) support to Private Mind, enabling users
to attach images to messages when using a vision-capable model.

### Model layer
- Added `vision` flag to `Model` type and DB schema
- Added `imagePath` to `Message` type and DB schema
- Added LFM 2.5 VL 1.6B Quantized (2.43 GB) to default models

### LLM store
- `loadModel` passes `capabilities: ['vision']` via `fromModelName`
- `sendChatMessage` converts messages with `mediaPath` to multimodal
content array `[{ type: 'image' }, { type: 'text', text }]`

### Chat bar UI
- `+` attach button in `ChatBarActions`, visible only for vision models
- Tapping opens a `BottomSheetModal` with Camera and Photo Library
options
- Image preview with loading placeholder while HEIC→JPEG conversion runs
in the background
- Themed dismiss button using `close.svg` with app color palette

### Message bubble
- Attached image renders above message text with correct `aspectRatio`
- Tapping opens a full-screen lightbox with a close button

### Model selection
- Vision chip always visible in `ModelCard` (both compact and full view)
- Featured chip hidden in compact view to prioritize Vision

### iOS permissions
- Added `NSCameraUsageDescription` and `NSPhotoLibraryUsageDescription`
to `Info.plist`

## Test plan

- [x] Download and load LFM 2.5 VL 1.6B model
- [x] Verify `+` button appears in chat bar only for vision models
- [ ] Attach image from photo library and from camera
- [ ] Verify loading placeholder appears immediately while picker
converts HEIC
- [ ] Send image-only and image+text messages
- [ ] Verify image renders in message bubble; tap opens lightbox; close
button works
- [ ] Switch to non-vision model — `+` button disappears and pending
image is cleared
- [ ] Verify Vision chip shows in both model selection sheet and model
hub

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: NorbertKlockiewicz

__mocks__/expo-file-system.ts

@@ -1,3 +1,14 @@
-export const File = jest.fn().mockImplementation(() => ({
-  text: jest.fn(),
-}));
+export const Paths = {
+  cache: { uri: 'file:///cache/' },
+};
+
+export const File = jest.fn().mockImplementation((uriOrDir: any, name?: string) => {
+  const uri = name
+    ? `${typeof uriOrDir === 'string' ? uriOrDir : uriOrDir.uri}${name}`
+    : typeof uriOrDir === 'string' ? uriOrDir : uriOrDir.uri;
+  return {
+    uri,
+    text: jest.fn(),
+    copy: jest.fn(),
+  };
+});

__mocks__/react-native-executorch.ts

@@ -32,10 +32,12 @@ export const PHI_4_MINI_4B = makeModelConstants('phi4-mini-4b');
 export const PHI_4_MINI_4B_QUANTIZED = makeModelConstants('phi4-mini-4b-quantized');
 export const LFM2_5_1_2B_INSTRUCT = makeModelConstants('lfm2.5-1.2b-instruct');
 export const LFM2_5_1_2B_INSTRUCT_QUANTIZED = makeModelConstants('lfm2.5-1.2b-instruct-quantized');
+export const LFM2_VL_1_6B_QUANTIZED = makeModelConstants('lfm2-vl-1.6b-quantized');
 export const WHISPER_TINY_EN = 'whisper-tiny-en';
 
 export const LLMModule = {
   fromCustomModel: jest.fn(),
+  fromModelName: jest.fn(),
 };
 
 export const SpeechToTextModule = {

__mocks__/react-native-safe-area-context.ts

@@ -0,0 +1,5 @@
+const insets = { top: 0, bottom: 0, left: 0, right: 0 };
+
+export const useSafeAreaInsets = () => insets;
+export const SafeAreaProvider = ({ children }: { children: unknown }) => children;
+export const SafeAreaView = 'SafeAreaView';

__tests__/ChatBar.test.tsx

@@ -22,6 +22,22 @@ jest.mock('../store/llmStore', () => ({
   })),
 }));
 
+jest.mock('react-native-image-picker', () => ({
+  launchImageLibrary: jest.fn(),
+  launchCamera: jest.fn(),
+}));
+
+jest.mock('../components/bottomSheets/ImageSourceSheet', () => {
+  const { View, TouchableOpacity, Text } = require('react-native');
+  return ({ onPickFromLibrary, onPickFromCamera }: any) => (
+    <View testID="image-source-sheet">
+      <TouchableOpacity testID="pick-library-btn" onPress={onPickFromLibrary}><Text>Library</Text></TouchableOpacity>
+      <TouchableOpacity testID="pick-camera-btn" onPress={onPickFromCamera}><Text>Camera</Text></TouchableOpacity>
+    </View>
+  );
+});
+
+
 jest.mock('../components/chat-screen/ChatSpeechInput', () => {
   const { View, TouchableOpacity, Text } = require('react-native');
   return ({ onSubmit, onCancel }: any) => (
@@ -45,6 +61,7 @@ jest.mock('../components/chat-screen/ChatBarActions', () => {
   const { View, TouchableOpacity, Text } = require('react-native');
   return ({
     userInput,
+    imagePath,
     onSend,
     isGenerating,
     isProcessingPrompt,
@@ -54,12 +71,22 @@ jest.mock('../components/chat-screen/ChatBarActions', () => {
     thinkingEnabled,
     activeSourcesCount,
     onSelectSource,
+    isVisionModel,
+    onAttachImage,
   }: any) => (
     <View testID="chat-bar-actions">
+      {isVisionModel && (
+        <TouchableOpacity testID="attach-image-btn" onPress={onAttachImage}><Text>+</Text></TouchableOpacity>
+      )}
       {(isGenerating || isProcessingPrompt) ? (
         <TouchableOpacity testID="interrupt-btn" onPress={onInterrupt}><Text>Stop</Text></TouchableOpacity>
-      ) : userInput ? (
-        <TouchableOpacity testID="send-btn" onPress={onSend}><Text>Send</Text></TouchableOpacity>
+      ) : (userInput || imagePath) ? (
+        <>
+          {imagePath && !userInput && (
+            <TouchableOpacity testID="speech-btn" onPress={onSpeechInput}><Text>Mic</Text></TouchableOpacity>
+          )}
+          <TouchableOpacity testID="send-btn" onPress={onSend}><Text>Send</Text></TouchableOpacity>
+        </>
       ) : (
         <TouchableOpacity testID="speech-btn" onPress={onSpeechInput}><Text>Mic</Text></TouchableOpacity>
       )}
@@ -93,6 +120,7 @@ const downloadedModel = {
   tokenizerConfigPath: '',
   thinking: false,
   featured: false,
+  vision: false,
 };
 
 const defaultProps = {
@@ -174,7 +202,7 @@ describe('downloaded model — text input', () => {
     renderBar({ onSend });
     fireEvent.changeText(screen.getByPlaceholderText('Ask about anything...'), 'Hello');
     fireEvent.press(screen.getByTestId('send-btn'));
-    expect(onSend).toHaveBeenCalledWith('Hello');
+    expect(onSend).toHaveBeenCalledWith('Hello', undefined);
   });
 
   it('shows prompt suggestions when hasMessages is false', () => {
@@ -279,10 +307,29 @@ describe('speech input', () => {
       fireEvent.press(screen.getByTestId('speech-btn'));
     });
     fireEvent.press(screen.getByTestId('speech-submit'));
-    expect(onSend).toHaveBeenCalledWith('voice transcript');
+    expect(onSend).toHaveBeenCalledWith('voice transcript', undefined);
     expect(screen.queryByTestId('speech-input')).toBeNull();
   });
 
+  it('forwards attached imagePath when submitting speech transcript', async () => {
+    const { launchImageLibrary } = require('react-native-image-picker');
+    launchImageLibrary.mockResolvedValue({ assets: [{ uri: 'file://test-image.jpg' }] });
+
+    const onSend = jest.fn();
+    renderBar({ onSend, model: { ...downloadedModel, vision: true } });
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('pick-library-btn'));
+    });
+
+    // speech-btn is shown alongside send-btn when image is attached with no text
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('speech-btn'));
+    });
+    fireEvent.press(screen.getByTestId('speech-submit'));
+    expect(onSend).toHaveBeenCalledWith('voice transcript', 'file://test-image.jpg');
+  });
+
   it('hides speech input without calling onSend when cancelled', async () => {
     const onSend = jest.fn();
     renderBar({ onSend });
@@ -316,3 +363,40 @@ describe('speech input', () => {
     expect(screen.queryByTestId('speech-input')).toBeNull();
   });
 });
+
+// ─── vision model attachment button ──────────────────────────────────────────
+
+describe('vision model attachment', () => {
+  it('shows + button when loaded model has vision === true', () => {
+    renderBar({ model: { ...downloadedModel, vision: true } });
+    expect(screen.getByTestId('attach-image-btn')).toBeTruthy();
+  });
+
+  it('does not show + button when loaded model has vision === false', () => {
+    renderBar({ model: { ...downloadedModel, vision: false } });
+    expect(screen.queryByTestId('attach-image-btn')).toBeNull();
+  });
+
+  it('does not show + button when model has no vision flag', () => {
+    renderBar({ model: downloadedModel });
+    expect(screen.queryByTestId('attach-image-btn')).toBeNull();
+  });
+
+  it('calls onSend with empty userInput and imagePath when send is pressed after attaching an image with no text', async () => {
+    const { launchImageLibrary } = require('react-native-image-picker');
+
+    launchImageLibrary.mockResolvedValue({
+      assets: [{ uri: 'file://test-image.jpg' }],
+    });
+
+    const onSend = jest.fn();
+    renderBar({ onSend, model: { ...downloadedModel, vision: true } });
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('pick-library-btn'));
+    });
+
+    fireEvent.press(screen.getByTestId('send-btn'));
+    expect(onSend).toHaveBeenCalledWith('', 'file://test-image.jpg');
+  });
+});

__tests__/MessageItem.test.tsx

@@ -117,6 +117,28 @@ describe('user messages', () => {
   });
 });
 
+// ─── user messages with image ─────────────────────────────────────────────────
+
+describe('user messages with image', () => {
+  it('renders image above text for user messages with imagePath', () => {
+    renderItem({ role: 'user', content: 'Check this out', imagePath: 'file://test.jpg' });
+    const image = screen.getByTestId('message-image');
+    expect(image.props.source).toEqual({ uri: 'file://test.jpg' });
+    expect(screen.getByText('Check this out')).toBeTruthy();
+  });
+
+  it('renders text-only bubble when imagePath is absent', () => {
+    renderItem({ role: 'user', content: 'Hello there' });
+    expect(screen.queryByTestId('message-image')).toBeNull();
+    expect(screen.getByText('Hello there')).toBeTruthy();
+  });
+
+  it('does not render image for assistant messages even if imagePath is provided', () => {
+    renderItem({ role: 'assistant', content: 'Response', imagePath: 'file://test.jpg' });
+    expect(screen.queryByTestId('message-image')).toBeNull();
+  });
+});
+
 // ─── thinking block parsing ───────────────────────────────────────────────────
 
 describe('thinking block parsing', () => {

__tests__/ModelCard.test.tsx

@@ -103,13 +103,18 @@ describe('display', () => {
     expect(screen.getByTestId('chip-2.50 GB')).toBeTruthy();
   });
 
-  it('shows Featured chip when model is featured', () => {
-    renderCard({ featured: true });
+  it('shows Featured chip when model is featured and compactView is false', () => {
+    renderCard({ featured: true, compactView: false });
     expect(screen.getByTestId('chip-Featured')).toBeTruthy();
   });
 
+  it('does not show Featured chip in compact view even when featured', () => {
+    renderCard({ featured: true });
+    expect(screen.queryByTestId('chip-Featured')).toBeNull();
+  });
+
   it('does not show Featured chip for non-featured model', () => {
-    renderCard({ featured: false });
+    renderCard({ featured: false, compactView: false });
     expect(screen.queryByTestId('chip-Featured')).toBeNull();
   });
 

__tests__/chatRepository.test.ts

@@ -0,0 +1,43 @@
+import { persistMessage } from '../database/chatRepository';
+
+jest.mock('expo-sqlite', () => ({
+  useSQLiteContext: jest.fn(() => ({})),
+}));
+jest.mock('@react-native-async-storage/async-storage', () => ({
+  getItem: jest.fn().mockResolvedValue(null),
+}));
+
+describe('persistMessage with imagePath', () => {
+  it('includes imagePath in INSERT when provided', async () => {
+    const runAsync = jest.fn().mockResolvedValue({ lastInsertRowId: 1 });
+    const mockDb = { runAsync } as any;
+
+    await persistMessage(mockDb, {
+      role: 'user',
+      content: 'Look at this',
+      chatId: 1,
+      imagePath: '/path/to/image.jpg',
+    });
+
+    expect(runAsync).toHaveBeenCalledWith(
+      expect.stringContaining('imagePath'),
+      expect.arrayContaining(['/path/to/image.jpg'])
+    );
+  });
+
+  it('passes null imagePath when not provided', async () => {
+    const runAsync = jest.fn().mockResolvedValue({ lastInsertRowId: 2 });
+    const mockDb = { runAsync } as any;
+
+    await persistMessage(mockDb, {
+      role: 'user',
+      content: 'Hello',
+      chatId: 1,
+    });
+
+    expect(runAsync).toHaveBeenCalledWith(
+      expect.stringContaining('imagePath'),
+      expect.arrayContaining([null])
+    );
+  });
+});