feat(web): on-device web search for chat

.github/workflows/test.yml

@@ -26,5 +26,8 @@ jobs:
       - name: Check formatting
         run: yarn format:check
 
+      - name: Typecheck
+        run: yarn typecheck
+
       - name: Run tests
         run: yarn test --forceExit --ci

__mocks__/react-native-reanimated.ts

@@ -1,5 +1,5 @@
-// Manual mock that avoids importing the real module (which needs worklets)
 const RN = require('react-native');
+const React = require('react');
 
 const createAnimatedComponent = (Component: any) => Component;
 
@@ -50,10 +50,18 @@ module.exports = {
   default: Animated,
   ...Animated,
   createAnimatedComponent,
-  useSharedValue: <T>(init: T) => makeSharedValue(init),
+  useSharedValue: <T>(init: T) => {
+    const ref: { current: MockSharedValue<T> | null } = React.useRef(null);
+    if (ref.current === null) ref.current = makeSharedValue(init);
+    return ref.current;
+  },
   useAnimatedStyle: (fn: () => any) => fn(),
   useAnimatedRef: () => ({ current: null }),
   useDerivedValue: <T>(fn: () => T) => makeSharedValue(fn()),
+  useAnimatedReaction: <T>(
+    prepare: () => T,
+    react: (current: T, previous: T | null) => void
+  ) => react(prepare(), null),
   useAnimatedScrollHandler: (fn: any) => fn,
   withTiming: (
     val: any,
@@ -76,7 +84,6 @@ module.exports = {
     inOut: (fn: any) => fn,
     out: (fn: any) => fn,
     in: (fn: any) => fn,
-    bezier: () => (t: any) => t,
   },
   interpolate: (val: any, inputRange: any, outputRange: any) => {
     if (val <= inputRange[0]) return outputRange[0];
@@ -91,5 +98,8 @@ module.exports = {
   LinearTransition: makeAnimationBuilder(),
   FadeIn: makeAnimationBuilder(),
   FadeInDown: makeAnimationBuilder(),
+  FadeInUp: makeAnimationBuilder(),
   FadeOut: makeAnimationBuilder(),
+  FadeOutDown: makeAnimationBuilder(),
+  FadeOutUp: makeAnimationBuilder(),
 };

__tests__/ChatBar.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent, act } from '@testing-library/react-native';
 import type { LLMStore } from '../store/llmStore';
 import type { Attachment } from '../hooks/useAttachment';
 import type { PermissionStatus } from 'react-native-audio-api';
+import type { SharedValue } from 'react-native-reanimated';
 
 // ── mocks ─────────────────────────────────────────────────────────────────────
 
@@ -193,7 +194,7 @@ import { useLLMStore } from '../store/llmStore';
 import { AudioManager } from 'react-native-audio-api';
 import Toast from 'react-native-toast-message';
 
-const mockUseLLMStore = useLLMStore as jest.Mock;
+const mockUseLLMStore = useLLMStore as unknown as jest.Mock;
 const mockAudioManager = AudioManager as jest.Mocked<typeof AudioManager>;
 
 const downloadedModel = {
@@ -211,6 +212,8 @@ const downloadedModel = {
 
 const defaultProps = {
   chatId: 1,
+  ref: { current: null },
+  extraContentPadding: { value: 0 } as unknown as SharedValue<number>,
   onSend: jest.fn(),
   onSelectModel: jest.fn(),
   onSelectPrompt: jest.fn(),
@@ -307,6 +310,43 @@ describe('downloaded model — text input', () => {
     expect(onSend).toHaveBeenCalledWith('Hello', undefined, []);
   });
 
+  it('stays empty when the native input echoes the sent text back', () => {
+    renderBar();
+    const textInput = () =>
+      screen.getByPlaceholderText('Ask about anything...');
+    fireEvent.changeText(textInput(), 'czesc test wysylki');
+    fireEvent.press(screen.getByTestId('send-btn'));
+    expect(textInput().props.value).toBe('');
+
+    fireEvent.changeText(textInput(), 'czesc test wysylki');
+    expect(textInput().props.value).toBe('');
+  });
+
+  it('accepts genuine typing right after a send', () => {
+    renderBar();
+    const textInput = () =>
+      screen.getByPlaceholderText('Ask about anything...');
+    fireEvent.changeText(textInput(), 'first');
+    fireEvent.press(screen.getByTestId('send-btn'));
+
+    fireEvent.changeText(textInput(), 'n');
+    expect(textInput().props.value).toBe('n');
+    fireEvent.changeText(textInput(), 'next');
+    expect(textInput().props.value).toBe('next');
+  });
+
+  it('does not swallow a repeat of the same message typed again', () => {
+    renderBar();
+    const textInput = () =>
+      screen.getByPlaceholderText('Ask about anything...');
+    fireEvent.changeText(textInput(), 'again');
+    fireEvent.press(screen.getByTestId('send-btn'));
+
+    fireEvent.changeText(textInput(), 'a');
+    fireEvent.changeText(textInput(), 'again');
+    expect(textInput().props.value).toBe('again');
+  });
+
   it('shows prompt suggestions when hasMessages is false', () => {
     renderBar({ hasMessages: false });
     expect(screen.getByTestId('prompt-suggestion')).toBeTruthy();

__tests__/MessageItem.test.tsx

@@ -5,10 +5,21 @@ import { fireEvent, render, screen } from '@testing-library/react-native';
 type MockLLMState = {
   isGenerating: boolean;
   isProcessingPrompt: boolean;
+  isSearchingWeb?: boolean;
+  webSearchTrace?: unknown[];
 };
 
 type MockLLMSelector<T = MockLLMState> = (state: MockLLMState) => T;
 
+type MockWebSearchState = {
+  isSearchingWeb: boolean;
+  webSearchTrace: unknown[];
+};
+
+type MockWebSearchSelector<T = MockWebSearchState> = (
+  state: MockWebSearchState
+) => T;
+
 type ThinkingBlockMockProps = {
   content: string;
   isComplete: boolean;
@@ -40,6 +51,16 @@ jest.mock('../store/llmStore', () => ({
   }),
 }));
 
+jest.mock('../store/webSearchStore', () => ({
+  useWebSearchStore: jest.fn(<T,>(selector?: MockWebSearchSelector<T>) => {
+    const state = {
+      isSearchingWeb: false,
+      webSearchTrace: [],
+    };
+    return selector ? selector(state) : state;
+  }),
+}));
+
 jest.mock('../components/chat-screen/MarkdownComponent', () => {
   const { Text } = require('react-native');
   return ({ text }: { text: string }) => <Text testID="markdown">{text}</Text>;
@@ -59,6 +80,18 @@ jest.mock('../components/chat-screen/ThinkingBlock', () => {
 
 jest.mock('../components/chat-screen/AnimatedChatLoading', () => () => null);
 
+jest.mock('../components/chat-screen/WebSearchBlock', () => {
+  const { Text } = require('react-native');
+  return ({ isSearching }: { isSearching?: boolean }) => (
+    <Text
+      testID="web-search-block"
+      accessibilityLabel={`searching:${!!isSearching}`}
+    >
+      {''}
+    </Text>
+  );
+});
+
 jest.mock('@gorhom/bottom-sheet', () => {
   const MockReact = require('react') as typeof import('react');
   const { View } = require('react-native');
@@ -88,13 +121,24 @@ jest.mock('@gorhom/bottom-sheet', () => {
 
 import MessageItem from '../components/chat-screen/MessageItem';
 import { useLLMStore } from '../store/llmStore';
+import { useWebSearchStore } from '../store/webSearchStore';
 
 const mockUseLLMStore = useLLMStore as unknown as jest.Mock;
+const mockUseWebSearchStore = useWebSearchStore as unknown as jest.Mock;
 
-const setLLMState = (state: MockLLMState) =>
+const setLLMState = (state: MockLLMState) => {
   mockUseLLMStore.mockImplementation((selector?: MockLLMSelector) =>
     selector ? selector(state) : state
   );
+  const webState: MockWebSearchState = {
+    isSearchingWeb: state.isSearchingWeb ?? false,
+    webSearchTrace: state.webSearchTrace ?? [],
+  };
+  mockUseWebSearchStore.mockImplementation(
+    (selector?: MockWebSearchSelector) =>
+      selector ? selector(webState) : webState
+  );
+};
 
 const baseMessage = {
   id: 1,
@@ -396,3 +440,43 @@ describe('thinking block parsing', () => {
     expect(screen.queryByTestId('thinking-block')).toBeNull();
   });
 });
+
+describe('live web-search trace', () => {
+  it('shows the web trace in the searching state while searching the web', () => {
+    setLLMState({
+      isGenerating: false,
+      isProcessingPrompt: true,
+      isSearchingWeb: true,
+      webSearchTrace: [],
+    });
+    renderItem({ content: '', isLastMessage: true });
+
+    const block = screen.getByTestId('web-search-block');
+    expect(block).toBeTruthy();
+    expect(block.props.accessibilityLabel).toBe('searching:true');
+  });
+
+  it('is not in the searching state once tokens have started streaming', () => {
+    setLLMState({
+      isGenerating: true,
+      isProcessingPrompt: false,
+      isSearchingWeb: true,
+      webSearchTrace: [],
+    });
+    renderItem({ content: 'Dzisiaj jest słonecznie', isLastMessage: true });
+
+    expect(screen.queryByTestId('web-search-block')).toBeNull();
+  });
+
+  it('does not show the searching trace on a non-last message', () => {
+    setLLMState({
+      isGenerating: false,
+      isProcessingPrompt: true,
+      isSearchingWeb: true,
+      webSearchTrace: [],
+    });
+    renderItem({ content: '', isLastMessage: false });
+
+    expect(screen.queryByTestId('web-search-block')).toBeNull();
+  });
+});

__tests__/ModelCard.test.tsx

@@ -48,12 +48,12 @@
 
 jest.mock('../components/Chip', () => {
   const { Text } = require('react-native');
   return ({ title }: any) => <Text testID={`chip-${title}`}>{title}</Text>;
 });
 
 jest.mock('../components/CircleButton', () => {
   const { TouchableOpacity } = require('react-native');
   return ({ onPress, disabled, testID }: any) => (
     <TouchableOpacity
       testID={testID || 'circle-btn'}
       onPress={onPress}
@@ -66,7 +66,7 @@
 import { useModelStore, ModelState } from '../store/modelStore';
 import { isModelCompatible } from '../utils/modelCompatibility';
 
-const mockUseModelStore = useModelStore as jest.Mock;
+const mockUseModelStore = useModelStore as unknown as jest.Mock;
 const mockIsModelCompatible = isModelCompatible as jest.Mock;
 const mockNetInfoFetch = NetInfo.fetch as jest.Mock;
 
@@ -104,8 +104,8 @@
     typeof baseModel & {
       compactView?: boolean;
       selected?: boolean;
       onPress?: any;
       wifiWarningSheetRef?: any;
     }
   > = {}
 ) => {

__tests__/ModelManagementSheet.test.tsx

@@ -29,14 +29,14 @@
 // ModelCard — stub to show model name
 jest.mock('../components/model-hub/ModelCard', () => {
   const { Text } = require('react-native');
   return ({ model }: any) => <Text testID="model-card">{model.modelName}</Text>;
 });
 
 // BottomSheetModal — immediately render children with injected data
 jest.mock('@gorhom/bottom-sheet', () => {
   const React = require('react');
   const { View } = require('react-native');
   let _injectedData: any = null;
 
   const BottomSheetModal = React.forwardRef((props: any, _ref: any) => {
     if (!props.children || !_injectedData) return null;
@@ -63,7 +63,7 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import Toast from 'react-native-toast-message';
 
-const mockUseModelStore = useModelStore as jest.Mock;
+const mockUseModelStore = useModelStore as unknown as jest.Mock;
 const setSheetData = (BottomSheetModal as any).__setData;
 
 const baseModel = {

__tests__/ModelSelectSheet.test.tsx

@@ -78,7 +78,7 @@ import ModelSelectSheet from '../components/bottomSheets/ModelSelectSheet';
 import { useModelStore } from '../store/modelStore';
 import { router } from 'expo-router';
 
-const mockUseModelStore = useModelStore as jest.Mock;
+const mockUseModelStore = useModelStore as unknown as jest.Mock;
 
 const makeModel = (id: number, name: string) => ({
   id,
@@ -108,8 +108,6 @@ const renderSheet = (props = {}) =>
     />
   );
 
-// ─── empty state ──────────────────────────────────────────────────────────────
-
 describe('empty state', () => {
   it('shows empty state message when no models downloaded', () => {
     renderSheet();
@@ -128,8 +126,6 @@ describe('empty state', () => {
   });
 });
 
-// ─── with models ──────────────────────────────────────────────────────────────
-
 describe('with downloaded models', () => {
   beforeEach(() => {
     mockUseModelStore.mockReturnValue({
@@ -158,8 +154,6 @@ describe('with downloaded models', () => {
   });
 });
 
-// ─── search filtering ─────────────────────────────────────────────────────────
-
 describe('search filtering', () => {
   beforeEach(() => {
     mockUseModelStore.mockReturnValue({

__tests__/WebFavicon.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react-native';
+
+jest.mock('../context/ThemeContext', () => ({
+  useTheme: () => ({
+    theme: {
+      ...require('../styles/colors').lightTheme,
+      insets: { top: 0, bottom: 0, left: 0, right: 0 },
+    },
+  }),
+}));
+
+import WebFavicon from '../components/chat-screen/WebFavicon';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+const failOnce = () => {
+  fireEvent(screen.getByTestId('web-favicon'), 'error');
+};
+
+describe('WebFavicon — a failed load is retried, not final', () => {
+  it('requests the icon again after an error, with a cache-busting uri', () => {
+    render(<WebFavicon url="https://a.example/page" size={16} />);
+    const first = screen.getByTestId('web-favicon').props.source.uri;
+
+    failOnce();
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    const retried = screen.getByTestId('web-favicon').props.source.uri;
+    expect(retried).not.toBe(first);
+    expect(retried).toContain('retry=1');
+  });
+
+  it('waits out the backoff before retrying', () => {
+    render(<WebFavicon url="https://a.example/page" size={16} />);
+
+    failOnce();
+    act(() => {
+      jest.advanceTimersByTime(1999);
+    });
+    expect(screen.getByTestId('web-favicon').props.source.uri).not.toContain(
+      'retry'
+    );
+  });
+
+  it('gives up for good only after the retry budget is spent', () => {
+    render(<WebFavicon url="https://a.example/page" size={16} />);
+
+    failOnce();
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    failOnce();
+    act(() => {
+      jest.advanceTimersByTime(6000);
+    });
+    expect(screen.getByTestId('web-favicon').props.source.uri).toContain(
+      'retry=2'
+    );
+
+    failOnce();
+    act(() => {
+      jest.advanceTimersByTime(60000);
+    });
+    expect(screen.queryByTestId('web-favicon')).toBeNull();
+  });
+
+  it('starts over with a clean slate when the url changes', () => {
+    const view = render(<WebFavicon url="https://a.example/page" size={16} />);
+    failOnce();
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    expect(screen.getByTestId('web-favicon').props.source.uri).toContain(
+      'retry=1'
+    );
+
+    view.rerender(<WebFavicon url="https://b.example/page" size={16} />);
+    const fresh = screen.getByTestId('web-favicon').props.source.uri;
+    expect(fresh).toContain('b.example');
+    expect(fresh).not.toContain('retry');
+  });
+});