feat(ui): app-wide UI refresh (#208)

## Summary
- Home screen auto-redirects into a phantom chat with the last-used
model; drawer/header **New chat** skip the home screen entirely via
`startPhantomChat`
- Empty-state gradient (`softPrimary → main`) on the chat screen, plus a
**What's new** card and prompt suggestions on phantom chats
- Streaming markdown powered by `react-native-streamdown` (Bundle Mode
wired up in `babel.config.js` + `metro.config.js`) for the in-flight
assistant message and the thinking block
- Model hub: group by family with Recommended / Experimental / Mine
tabs, per-family descriptions, storage footer with **Clear all**, red
trash button on downloaded variants inside the family modal
- Strip ` - Quantized` suffix from built-in names with a DB migration to
preserve downloaded state; extend compatibility heuristic to check
`modelPath`
- Phantom chat title opens the model sheet with a chevron affordance;
in-chat model switch persists to `lastUsedModelId`
- Designer-gray chat bar / prompt cards on light theme via new
`cardSurface` + `chatBar` + `attachButton` tokens; consistent voice-mode
tint across themes

## Bug fixes
- Fixed race where clearing `activeChatId` during navigation retriggered
the previous chat's `useFocusEffect`, flashing stale messages on the new
phantom chat
- Fixed chat-bar baseline height being captured during the empty state,
which later squeezed the scroll view once the suggestions block
disappeared
- Models deleted in the app are now removed from disk via
`ExpoResourceFetcher.deleteResources` instead of relying on in-memory
path tracking

## Test plan
- [ ] Light + dark: home → chat auto-redirect, composer ready with
last-used model
- [ ] Drawer / header **New chat** from an existing chat → no flash,
lands on phantom chat
- [ ] Streaming animation on assistant messages and thinking block
(requires full rebuild after Bundle Mode changes)
- [ ] Model hub: family drill-in, trash button deletes files, Clear all
flow, tab switch preserves scroll
- [ ] Fresh install and upgrade install both seed defaults correctly (DB
migration)

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: NorbertKlockiewicz

__tests__/ModelCard.test.tsx

@@ -50,10 +50,24 @@ const mockUseModelStore = useModelStore as jest.Mock;
 const mockIsModelCompatible = isModelCompatible as jest.Mock;
 const mockNetInfoFetch = NetInfo.fetch as jest.Mock;
 
-const baseModel = {
+const baseModel: {
+  id: number;
+  modelName: string;
+  source: 'remote';
+  isDownloaded: boolean;
+  featured: boolean;
+  parameters: number;
+  modelSize: number;
+  modelPath: string;
+  tokenizerPath: string;
+  tokenizerConfigPath: string;
+  thinking: boolean;
+  vision?: boolean;
+  labels: string[];
+} = {
   id: 1,
   modelName: 'Llama-3B',
-  source: 'remote' as const,
+  source: 'remote',
   isDownloaded: false,
   featured: false,
   parameters: 3.21,
@@ -103,25 +117,31 @@ describe('display', () => {
     expect(screen.getByTestId('chip-2.50 GB')).toBeTruthy();
   });
 
-  it('shows Featured chip when model is featured and compactView is false', () => {
-    renderCard({ featured: true, compactView: false });
-    expect(screen.getByTestId('chip-Featured')).toBeTruthy();
+  it('shows Incompatible chip when model is not compatible', () => {
+    mockIsModelCompatible.mockReturnValue(false);
+    renderCard();
+    expect(screen.getByTestId('chip-Incompatible')).toBeTruthy();
   });
 
-  it('does not show Featured chip in compact view even when featured', () => {
-    renderCard({ featured: true });
-    expect(screen.queryByTestId('chip-Featured')).toBeNull();
+  it('shows Vision chip when model supports vision', () => {
+    renderCard({ vision: true });
+    expect(screen.getByTestId('chip-Vision')).toBeTruthy();
   });
 
-  it('does not show Featured chip for non-featured model', () => {
-    renderCard({ featured: false, compactView: false });
-    expect(screen.queryByTestId('chip-Featured')).toBeNull();
+  it('does not show Vision chip when model does not support vision', () => {
+    renderCard({ vision: false });
+    expect(screen.queryByTestId('chip-Vision')).toBeNull();
   });
 
-  it('shows Incompatible chip when model is not compatible', () => {
-    mockIsModelCompatible.mockReturnValue(false);
-    renderCard();
-    expect(screen.getByTestId('chip-Incompatible')).toBeTruthy();
+  it('renders label chips from model.labels', () => {
+    renderCard({ compactView: false, labels: ['Fast', 'Reasoning'] });
+    expect(screen.getByTestId('chip-Fast')).toBeTruthy();
+    expect(screen.getByTestId('chip-Reasoning')).toBeTruthy();
+  });
+
+  it('omits label chips in compact view', () => {
+    renderCard({ compactView: true, labels: ['Fast'] });
+    expect(screen.queryByTestId('chip-Fast')).toBeNull();
   });
 
   it('calls onPress when card is tapped', () => {

__tests__/ModelHubTabs.test.tsx

@@ -14,7 +14,7 @@ jest.mock('../context/ThemeContext', () => ({
 describe('ModelHubTabs', () => {
   it('renders all three tabs', () => {
     render(<ModelHubTabs value="featured" onChange={jest.fn()} />);
-    expect(screen.getByText('Featured')).toBeTruthy();
+    expect(screen.getByText('Recommended')).toBeTruthy();
     expect(screen.getByText('Experimental')).toBeTruthy();
     expect(screen.getByText('Mine')).toBeTruthy();
   });

__tests__/NewChatHeaderButton.test.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react-native';
+import { render, fireEvent } from '@testing-library/react-native';
 
 jest.mock('../context/ThemeContext', () => ({
   useTheme: () => ({
     theme: { ...require('../styles/colors').lightTheme },
   }),
 }));
 
-const mockPush = jest.fn();
-jest.mock('expo-router', () => ({
-  useRouter: () => ({ push: mockPush }),
+jest.mock('expo-sqlite', () => ({
+  useSQLiteContext: () => ({}),
+}));
+
+const mockStart = jest.fn();
+jest.mock('../utils/startPhantomChat', () => ({
+  startPhantomChat: (...args: unknown[]) => mockStart(...args),
 }));
 
 import NewChatHeaderButton from '../components/NewChatHeaderButton';
@@ -24,18 +28,17 @@ describe('NewChatHeaderButton', () => {
     expect(UNSAFE_getAllByType(TouchableOpacity).length).toBeGreaterThan(0);
   });
 
-  it('calls router.push("/") when noOp is not set', () => {
-    render(<NewChatHeaderButton />);
-    const { TouchableOpacity } = require('react-native');
+  it('starts a phantom chat when noOp is not set', () => {
     const { UNSAFE_getByType } = render(<NewChatHeaderButton />);
+    const { TouchableOpacity } = require('react-native');
     fireEvent.press(UNSAFE_getByType(TouchableOpacity));
-    expect(mockPush).toHaveBeenCalledWith('/');
+    expect(mockStart).toHaveBeenCalled();
   });
 
-  it('does not call router.push when noOp=true', () => {
+  it('does nothing when noOp=true', () => {
     const { UNSAFE_getByType } = render(<NewChatHeaderButton noOp={true} />);
     const { TouchableOpacity } = require('react-native');
     fireEvent.press(UNSAFE_getByType(TouchableOpacity));
-    expect(mockPush).not.toHaveBeenCalled();
+    expect(mockStart).not.toHaveBeenCalled();
   });
 });

android/app/build.gradle

@@ -100,8 +100,8 @@ android {
         applicationId 'com.swmansion.privatemind'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 61
-        versionName "1.1.5"
+        versionCode 62
+        versionName "1.1.6"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }

app.json

@@ -3,7 +3,7 @@
     "scheme": "private-mind",
     "name": "Private Mind",
     "slug": "private-mind",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "orientation": "portrait",
     "icon": "./assets/icons/icon.png",
     "userInterfaceStyle": "automatic",
@@ -52,9 +52,7 @@
           "iosBackgroundMode": false,
           "iosMicrophonePermission": "This app requires access to the microphone to record audio.",
           "androidForegroundService": false,
-          "androidPermissions": [
-            "android.permission.RECORD_AUDIO"
-          ]
+          "androidPermissions": ["android.permission.RECORD_AUDIO"]
         }
       ],
       "expo-asset",

app/(drawer)/chat/[id].tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useFocusEffect, useLocalSearchParams } from 'expo-router';
 import ChatScreen from '../../../components/chat-screen/ChatScreen';
 import { useState } from 'react';
@@ -24,9 +24,10 @@ function ChatScreenInner() {
   const { modelId }: { modelId: string } = useLocalSearchParams();
   const { activeChatMessages, activeChatId, setActiveChatId } = useLLMStore();
   const { getModelById } = useModelStore();
-  const { getChatById, setChatModel, loadChats } = useChatStore();
+  const { getChatById, setChatModel, loadChats, phantomChat } = useChatStore();
   const chatId = parseInt(rawId);
   const chat = getChatById(chatId);
+  const isPhantom = phantomChat?.id === chatId;
   const resolvedModelId = modelId ?? chat?.modelId;
   const resolvedModel = resolvedModelId
     ? getModelById(parseInt(resolvedModelId.toString()))
@@ -37,27 +38,42 @@ function ChatScreenInner() {
   // from a bottom sheet), and flipping messageHistory to [] mid-session
   // causes Messages.tsx to reset its reveal animation, briefly blanking
   // the chat. If the store already has this chat active, skip the
-  // reset and use the existing data.
-  const [isLoading, setIsLoading] = useState(activeChatId !== chatId);
+  // reset and use the existing data. Phantom chats have no history, so
+  // skip loading entirely.
+  const [isLoading, setIsLoading] = useState(
+    !isPhantom && activeChatId !== chatId
+  );
+
+  const isEmpty = !isLoading && activeChatMessages.length === 0;
+  const openModelSheetRef = useRef<(() => void) | null>(null);
 
   const { MenuElements } = useChatHeader({
     chatId: chatId,
     chatModel: model,
+    isEmpty,
+    onSelectModelFromTitle: isPhantom
+      ? () => openModelSheetRef.current?.()
+      : undefined,
   });
 
   useFocusEffect(
     useCallback(() => {
-      if (activeChatId === chatId) {
+      // Read activeChatId via store to avoid re-firing this effect when the
+      // store's activeChatId changes while the screen is focused — otherwise
+      // clearing activeChatId (e.g. from startPhantomChat during navigation)
+      // would retrigger an unwanted re-fetch on the previously-focused chat.
+      const currentActiveId = useLLMStore.getState().activeChatId;
+      if (currentActiveId === chatId) {
         return;
       }
       const initChat = async () => {
-        setIsLoading(true);
+        if (!isPhantom) setIsLoading(true);
         await setActiveChatId(chatId);
         setIsLoading(false);
       };
 
       initChat();
-    }, [chatId, activeChatId])
+    }, [chatId, isPhantom])
   );
 
   const handleSetModel = async (model: Model) => {
@@ -75,6 +91,7 @@ function ChatScreenInner() {
         isLoading={isLoading}
         model={model}
         selectModel={handleSetModel}
+        openModelSheetRef={openModelSheetRef}
       />
       {MenuElements}
     </>