@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/settings/hooks/use-provider-connectivity.ts

@@ -0,0 +1,132 @@
+import { useCallback, useMemo, useState } from 'react';
+import { NextClawClientError } from '@nextclaw/client-sdk';
+import { toast } from 'sonner';
+import { useDiscoverProviderModels, useTestProviderConnection } from '@/shared/hooks/use-config';
+import { t } from '@/shared/lib/i18n';
+import {
+  buildProviderConnectionTestPayload,
+  buildProviderModelDiscoveryPayload,
+  type WireApiType
+} from '@/features/settings/utils/provider-form-support.utils';
+
+type UseProviderConnectivityParams = {
+  providerName?: string;
+  apiKey: string;
+  apiKeyRequired: boolean;
+  apiKeySet: boolean;
+  apiBase: string;
+  extraHeaders: Record<string, string> | null;
+  supportsWireApi: boolean;
+  wireApi: WireApiType;
+  models: string[];
+  providerModelAliases: string[];
+};
+
+type ProviderModelDiscovery = {
+  key: string;
+  models: string[];
+};
+
+export function useProviderConnectivity(params: UseProviderConnectivityParams) {
+  const {
+    providerName,
+    apiKey,
+    apiKeyRequired,
+    apiKeySet,
+    apiBase,
+    extraHeaders,
+    supportsWireApi,
+    wireApi,
+    models,
+    providerModelAliases,
+  } = params;
+  const testProviderConnection = useTestProviderConnection();
+  const discoverProviderModels = useDiscoverProviderModels();
+  const discoveryKey = useMemo(() => JSON.stringify({
+    providerName,
+    apiKey,
+    apiBase,
+    extraHeaders
+  }), [apiBase, apiKey, extraHeaders, providerName]);
+  const [modelDiscovery, setModelDiscovery] = useState<ProviderModelDiscovery | null>(null);
+
+  const testConnection = useCallback(async () => {
+    if (!providerName) {
+      return;
+    }
+    try {
+      const result = await testProviderConnection.mutateAsync({
+        provider: providerName,
+        data: buildProviderConnectionTestPayload({
+          apiKey,
+          apiBase,
+          extraHeaders,
+          supportsWireApi,
+          wireApi,
+          models,
+          providerModelAliases
+        })
+      });
+      if (result.success) {
+        toast.success(`${t('providerTestConnectionSuccess')} (${result.latencyMs}ms)`);
+        return;
+      }
+      const details = [`provider=${result.provider}`, `latency=${result.latencyMs}ms`];
+      if (result.model) {
+        details.push(`model=${result.model}`);
+      }
+      toast.error(`${t('providerTestConnectionFailed')}: ${result.message} | ${details.join(' | ')}`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`${t('providerTestConnectionFailed')}: ${message}`);
+    }
+  }, [
+    apiBase,
+    apiKey,
+    extraHeaders,
+    models,
+    providerModelAliases,
+    providerName,
+    supportsWireApi,
+    testProviderConnection,
+    wireApi
+  ]);
+
+  const discoverModels = useCallback(async () => {
+    if (!providerName) {
+      return null;
+    }
+    if (apiKeyRequired && !apiKey.trim() && !apiKeySet) {
+      toast.error(t('providerModelsApiKeyRequired'));
+      return null;
+    }
+    try {
+      const result = await discoverProviderModels.mutateAsync({
+        provider: providerName,
+        data: buildProviderModelDiscoveryPayload({ apiKey, apiBase, extraHeaders })
+      });
+      setModelDiscovery({ key: discoveryKey, models: result.models });
+      toast.success(t('providerModelsFetchSuccess'));
+      return result.models;
+    } catch (error) {
+      if (
+        error instanceof NextClawClientError &&
+        (error.details?.upstreamStatus === 401 || error.details?.upstreamStatus === 403)
+      ) {
+        toast.error(t('providerModelsAuthorizationFailed'));
+        return null;
+      }
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`${t('providerModelsFetchFailed')}: ${message}`);
+      return null;
+    }
+  }, [apiBase, apiKey, apiKeyRequired, apiKeySet, discoverProviderModels, discoveryKey, extraHeaders, providerName]);
+
+  return {
+    discoverModels,
+    fetchedModels: modelDiscovery?.key === discoveryKey ? modelDiscovery.models : [],
+    isDiscoveringModels: discoverProviderModels.isPending,
+    isTestPending: testProviderConnection.isPending,
+    testConnection
+  };
+}

package/src/features/settings/hooks/use-provider-model-suggestions.ts

@@ -0,0 +1,51 @@
+import { useCallback, useMemo } from 'react';
+import { useProviderModelCatalog } from '@/shared/hooks/use-config';
+import {
+  findProviderModelSuggestions,
+  mergeProviderLocalModels
+} from '@/features/settings/utils/provider-form-model.utils';
+
+type UseProviderModelSuggestionsParams = {
+  providerName?: string;
+  models: string[];
+  aliases: string[];
+  fetchedModels?: string[];
+  onModelsChange: (models: string[]) => void;
+};
+
+export function useProviderModelSuggestions(params: UseProviderModelSuggestionsParams) {
+  const { providerName, models, aliases, fetchedModels = [], onModelsChange } = params;
+  const catalogQuery = useProviderModelCatalog({
+    pollWhileRefreshing: true,
+    refreshOnMount: true
+  });
+  const catalogEntry = providerName ? catalogQuery.data?.providers[providerName] : undefined;
+  const suggestionSource: 'background' | 'fetched' = fetchedModels.length > 0 ? 'fetched' : 'background';
+  const suggestedModels = useMemo(
+    () => findProviderModelSuggestions(
+      models,
+      suggestionSource === 'fetched' ? fetchedModels : catalogEntry?.models ?? [],
+      aliases
+    ),
+    [aliases, catalogEntry?.models, fetchedModels, models, suggestionSource]
+  );
+  const addSuggestedModels = useCallback((selectedModels: string[]) => {
+    const merged = mergeProviderLocalModels(models, selectedModels, aliases);
+    if (merged.addedCount > 0) {
+      onModelsChange(merged.models);
+    }
+  }, [aliases, models, onModelsChange]);
+
+  return {
+    addSuggestedModels,
+    hasSuggestionError: Boolean(catalogEntry?.lastError && !catalogEntry.fetchedAt),
+    isCheckingSuggestions: Boolean(
+      providerName && (
+        catalogQuery.isLoading ||
+        (catalogQuery.data?.refreshing && !catalogEntry)
+      )
+    ),
+    suggestedModels,
+    suggestionSource
+  };
+}

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -66,8 +66,8 @@ describe("AppearanceSettingsPage", () => {
     render(<AppearanceSettingsPage />);
 
     fireEvent.click(screen.getByRole("combobox", { name: "Theme" }));
-    fireEvent.click(screen.getByRole("option", { name: "Night" }));
-    expect(mocks.setTheme).toHaveBeenCalledWith("night");
+    fireEvent.click(screen.getByRole("option", { name: "Charcoal" }));
+    expect(mocks.setTheme).toHaveBeenCalledWith("charcoal");
 
     fireEvent.click(screen.getByRole("combobox", { name: "Language" }));
     fireEvent.click(screen.getByRole("option", { name: "中文" }));

package/src/features/settings/pages/__tests__/providers-config-page.test.tsx

@@ -11,6 +11,7 @@ const mocks = vi.hoisted(() => ({
       providers: {
         openai: { enabled: true, apiKeySet: true },
         anthropic: { enabled: true, apiKeySet: true },
+        opencode: { enabled: true, apiKeyRequired: false, apiKeySet: false },
         nextclaw: { enabled: true, apiKeySet: true },
       },
     },
@@ -22,6 +23,7 @@ const mocks = vi.hoisted(() => ({
         { name: 'nextclaw', displayName: 'NextClaw Builtin', defaultApiBase: 'https://ai-gateway-api.nextclaw.io/v1' },
         { name: 'openai', displayName: 'OpenAI', defaultApiBase: 'https://api.openai.com/v1' },
         { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' },
+        { name: 'opencode', displayName: 'OpenCode Zen Free Trial', defaultApiBase: 'https://opencode.ai/zen/v1' },
       ],
     },
   },
@@ -46,6 +48,7 @@ vi.mock('@/shared/hooks/use-config', () => ({
             isBuiltInType: providerId === 'nextclaw',
             isCustom: false,
             enabled: provider.enabled,
+            apiKeyRequired: 'apiKeyRequired' in provider ? provider.apiKeyRequired : undefined,
             apiKeySet: provider.apiKeySet,
           },
         ]),
@@ -108,4 +111,13 @@ describe('ProvidersConfigPage', () => {
       expect.stringContaining('NextClaw Builtin'),
     ]);
   });
+
+  it('shows an enabled provider without a required API key as ready', () => {
+    const { container } = render(<ProvidersConfigPage />);
+    const opencodeCard = Array.from(container.querySelectorAll('[role="button"]'))
+      .find((element) => element.textContent?.includes('OpenCode Zen Free Trial'));
+
+    expect(opencodeCard?.textContent).toContain('Ready');
+    expect(opencodeCard?.textContent).not.toContain('Setup');
+  });
 });

package/src/features/settings/pages/__tests__/search-config-page.test.tsx

@@ -35,6 +35,12 @@ const mocks = vi.hoisted(() => ({
             enabled: false,
             apiKeySet: false,
             baseUrl: 'https://api.search.brave.com/res/v1/web/search'
+          },
+          exa: {
+            enabled: false,
+            apiKeySet: false,
+            baseUrl: 'https://api.exa.ai/search',
+            docsUrl: 'https://exa.ai/docs/reference/search'
           }
         }
       }
@@ -63,6 +69,13 @@ const mocks = vi.hoisted(() => ({
           displayName: 'Brave Search',
           description: 'Brave web search API kept as an optional provider.',
           supportsSummary: false
+        },
+        {
+          name: 'exa',
+          displayName: 'Exa Search',
+          description: 'Semantic web search with extracted page content.',
+          docsUrl: 'https://exa.ai/docs/reference/search',
+          supportsSummary: true
         }
       ]
     }
@@ -150,9 +163,44 @@ describe('SearchConfigPage', () => {
           brave: {
             apiKey: undefined,
             baseUrl: 'https://api.search.brave.com/res/v1/web/search'
+          },
+          exa: {
+            apiKey: undefined,
+            baseUrl: 'https://api.exa.ai/search'
           }
         }
       }
     });
   });
+
+  it('renders and submits Exa configuration through the shared provider fields', async () => {
+    const user = userEvent.setup();
+
+    render(<SearchConfigPage />);
+
+    await user.click(screen.getByRole('button', { name: /Exa Search/ }));
+
+    expect(screen.getByRole('heading', { name: 'Exa Search' })).toBeTruthy();
+    expect(screen.getAllByText('语义搜索并提取网页正文，适合调研和资料发现。').length).toBeGreaterThan(0);
+    expect(screen.getByDisplayValue('https://api.exa.ai/search')).toBeTruthy();
+
+    const docsLink = screen.getByRole('link', { name: '查看文档' });
+    expect(docsLink.getAttribute('href')).toBe('https://exa.ai/docs/reference/search');
+
+    const apiKeyInput = document.querySelector('input[type="password"]');
+    expect(apiKeyInput).toBeTruthy();
+    await user.type(apiKeyInput as HTMLInputElement, 'exa_test_key');
+    await user.click(screen.getByRole('button', { name: '保存变更' }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        providers: expect.objectContaining({
+          exa: {
+            apiKey: 'exa_test_key',
+            baseUrl: 'https://api.exa.ai/search'
+          }
+        })
+      })
+    });
+  });
 });

package/src/features/settings/pages/providers-config-page.tsx

@@ -17,6 +17,7 @@ import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
 import { StatusDot } from '@/shared/components/status/status-dot';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
+import { isProviderConfigured } from '@/shared/lib/provider-models';
 import { ProviderForm } from '@/features/settings/components/config/provider-form';
 import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
@@ -232,7 +233,7 @@ export function ProvidersConfigPage() {
             {filteredProviders.map((provider) => {
               const template = provider.providerType ? templateByType.get(provider.providerType) : null;
               const isEnabled = provider.enabled !== false;
-              const isReady = Boolean(isEnabled && provider.apiKeySet);
+              const isReady = isProviderConfigured(provider);
               const providerLabel = provider.displayName?.trim() || template?.displayName || provider.providerId;
               const description =
                 formatBasePreview(provider.apiBase || template?.defaultApiBase || '') ||

package/src/features/settings/pages/search-config-page.tsx

@@ -43,7 +43,8 @@ const ENABLED_OPTIONS = [
 const SEARCH_PROVIDER_DESCRIPTION_KEYS: Record<SearchProviderName, string> = {
   bocha: 'searchProviderBochaDescription',
   tavily: 'searchProviderTavilyDescription',
-  brave: 'searchProviderBraveDescription'
+  brave: 'searchProviderBraveDescription',
+  exa: 'searchProviderExaDescription'
 };
 
 type SearchDraft = {
@@ -64,6 +65,7 @@ type SearchDraft = {
       includeAnswer: boolean;
     };
     brave: { apiKey: string; baseUrl: string };
+    exa: { apiKey: string; baseUrl: string };
   };
 };
 
@@ -92,7 +94,8 @@ function buildSearchDraft(search: SearchView): SearchDraft {
         searchDepth: search.providers.tavily.searchDepth ?? 'basic',
         includeAnswer: Boolean(search.providers.tavily.includeAnswer)
       },
-      brave: { apiKey: '', baseUrl: search.providers.brave.baseUrl }
+      brave: { apiKey: '', baseUrl: search.providers.brave.baseUrl },
+      exa: { apiKey: '', baseUrl: search.providers.exa.baseUrl }
     }
   };
 }
@@ -118,6 +121,10 @@ function buildSearchPayload(draft: SearchDraft): SearchConfigUpdate {
       brave: {
         apiKey: draft.providers.brave.apiKey || undefined,
         baseUrl: draft.providers.brave.baseUrl
+      },
+      exa: {
+        apiKey: draft.providers.exa.apiKey || undefined,
+        baseUrl: draft.providers.exa.baseUrl
       }
     }
   };
@@ -265,21 +272,23 @@ function SearchProviderFields(props: {
     );
   }
 
-  const { brave } = draft.providers;
+  const providerDraft = draft.providers[provider];
+  const providerView = search.providers[provider];
   return (
     <>
       <SearchTextField
         label={t('apiKey')}
-        value={brave.apiKey}
-        onChange={(apiKey) => updateProviderDraft('brave', { apiKey })}
-        placeholder={search.providers.brave.apiKeyMasked || t('enterApiKey')}
+        value={providerDraft.apiKey}
+        onChange={(apiKey) => updateProviderDraft(provider, { apiKey })}
+        placeholder={providerView.apiKeyMasked || t('enterApiKey')}
         type='password'
       />
       <SearchTextField
         label={t('searchProviderBaseUrl')}
-        value={brave.baseUrl}
-        onChange={(baseUrl) => updateProviderDraft('brave', { baseUrl })}
+        value={providerDraft.baseUrl}
+        onChange={(baseUrl) => updateProviderDraft(provider, { baseUrl })}
       />
+      <SearchDocsLink docsUrl={selectedDocsUrl} />
     </>
   );
 }

package/src/features/settings/utils/__tests__/provider-form-support.utils.test.ts

@@ -1,11 +1,14 @@
 import { describe, expect, it } from 'vitest';
 import {
+  buildProviderModelDiscoveryPayload,
   buildProviderSavePayload,
   resolveEditableModels,
   serializeModelsForSave
 } from '@/features/settings/utils/provider-form-support.utils';
 import {
   addProviderLocalModel,
+  findProviderModelSuggestions,
+  mergeProviderLocalModels,
   setModelThinkingDefaultInConfig,
   toggleModelThinkingLevelInConfig
 } from '@/features/settings/utils/provider-form-model.utils';
@@ -67,6 +70,45 @@ describe('provider form model defaults', () => {
     });
   });
 
+  it('builds discovery credentials from the unsaved provider draft', () => {
+    expect(buildProviderModelDiscoveryPayload({
+      apiKey: ' draft-key ',
+      apiBase: ' https://api.example.com/v1 ',
+      extraHeaders: { ' X-Tenant ': 'team-a' }
+    })).toEqual({
+      apiKey: 'draft-key',
+      apiBase: 'https://api.example.com/v1',
+      extraHeaders: { 'X-Tenant': 'team-a' }
+    });
+    expect(buildProviderModelDiscoveryPayload({
+      apiKey: '',
+      apiBase: 'https://opencode.ai/zen/v1',
+      extraHeaders: null
+    })).toEqual({
+      apiBase: 'https://opencode.ai/zen/v1',
+      extraHeaders: null
+    });
+  });
+
+  it('keeps current ordering and appends only new provider-local discoveries', () => {
+    expect(mergeProviderLocalModels(
+      ['gpt-5', 'vendor/existing'],
+      ['openrouter/gpt-5', 'openrouter/vendor/new', 'vendor/existing', 'vendor/new'],
+      ['openrouter']
+    )).toEqual({
+      models: ['gpt-5', 'vendor/existing', 'vendor/new'],
+      addedCount: 1
+    });
+  });
+
+  it('derives provider catalog suggestions in remote order without configured aliases', () => {
+    expect(findProviderModelSuggestions(
+      ['gpt-5'],
+      ['openrouter/gpt-5', 'openrouter/meta/muse-spark-1.2', 'meta/muse-spark-1.2', 'qwen/qwen3.8-max'],
+      ['openrouter']
+    )).toEqual(['meta/muse-spark-1.2', 'qwen/qwen3.8-max']);
+  });
+
   it('keeps model thinking defaults inside the supported level set', () => {
     const config = toggleModelThinkingLevelInConfig({}, 'gpt-5.5', 'high');
 

package/src/features/settings/utils/provider-form-context.utils.ts

@@ -86,6 +86,7 @@ export function resolveProviderFormContext(input: ProviderFormContextInput) {
   const currentDisplayName = (resolvedProviderConfig.displayName || '').trim();
   const effectiveDisplayName = currentDisplayName || defaultDisplayName;
   const currentEnabled = resolvedProviderConfig.enabled !== false;
+  const supportsModelDiscovery = isCustomProvider || providerSpec?.supportsModelDiscovery === true;
   const providerModelAliases = normalizeModelList([providerSpec?.modelPrefix || providerSpec?.providerType || '', providerName || '']);
   const defaultApiBase = providerSpec?.defaultApiBase || '';
   const currentApiBase = resolvedProviderConfig.apiBase || defaultApiBase;
@@ -125,6 +126,7 @@ export function resolveProviderFormContext(input: ProviderFormContextInput) {
     providerConfig,
     providerModelAliases,
     resolvedProviderConfig,
+    supportsModelDiscovery,
     wireApiHint,
     ...wireApiContext
   };

package/src/features/settings/utils/provider-form-model.utils.ts

@@ -21,6 +21,31 @@ export function addProviderLocalModel(models: string[], draft: string, aliases:
   return { models: [...models, next], draft: '' };
 }
 
+export function mergeProviderLocalModels(
+  models: string[],
+  discoveredModels: string[],
+  aliases: string[]
+): { models: string[]; addedCount: number } {
+  const merged = [...models];
+  const known = new Set(models);
+  for (const discoveredModel of discoveredModels) {
+    const model = toProviderLocalModelId(discoveredModel, aliases);
+    if (model && !known.has(model)) {
+      known.add(model);
+      merged.push(model);
+    }
+  }
+  return { models: merged, addedCount: merged.length - models.length };
+}
+
+export function findProviderModelSuggestions(
+  models: string[],
+  catalogModels: string[],
+  aliases: string[]
+): string[] {
+  return mergeProviderLocalModels(models, catalogModels, aliases).models.slice(models.length);
+}
+
 export function removeProviderLocalModel(models: string[], modelConfig: ModelConfig, modelName: string): {
   models: string[];
   modelConfig: ModelConfig;

package/src/features/settings/utils/provider-form-support.utils.ts

@@ -4,6 +4,7 @@ import type {
   ProviderConfigUpdate,
   ProviderConfigView,
   ProviderConnectionTestRequest,
+  ProviderModelDiscoveryRequest,
   ThinkingLevel
 } from '@/shared/lib/api';
 import {
@@ -48,6 +49,11 @@ type ProviderConnectionTestPayloadInput = {
   models: string[];
   providerModelAliases: string[];
 };
+type ProviderModelDiscoveryPayloadInput = {
+  apiKey: string;
+  apiBase: string;
+  extraHeaders: Record<string, string> | null;
+};
 
 const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
   providerId: '',
@@ -281,19 +287,28 @@ function buildProviderConnectionTestPayload(input: ProviderConnectionTestPayload
   const preferredModel = input.models.find((modelName) => modelName.trim().length > 0) ?? '';
   const testModel = toProviderLocalModelId(preferredModel, input.providerModelAliases);
   const payload: ProviderConnectionTestRequest = {
-    apiBase: input.apiBase.trim(),
-    extraHeaders: normalizeHeaders(input.extraHeaders),
+    ...buildProviderModelDiscoveryPayload(input),
     model: testModel || null
   };
-  if (input.apiKey.trim().length > 0) {
-    payload.apiKey = input.apiKey.trim();
-  }
   if (input.supportsWireApi) {
     payload.wireApi = input.wireApi;
   }
   return payload;
 }
 
+function buildProviderModelDiscoveryPayload(
+  input: ProviderModelDiscoveryPayloadInput
+): ProviderModelDiscoveryRequest {
+  const payload: ProviderModelDiscoveryRequest = {
+    apiBase: input.apiBase.trim(),
+    extraHeaders: normalizeHeaders(input.extraHeaders)
+  };
+  if (input.apiKey.trim().length > 0) {
+    payload.apiKey = input.apiKey.trim();
+  }
+  return payload;
+}
+
 function formatThinkingLevelLabel(level: ThinkingLevel): string {
   if (level === 'off') {
     return t('chatThinkingLevelOff');
@@ -384,6 +399,7 @@ function shouldUsePillSelector(params: {
 export type { ModelConfig, ProviderAuthMethodOption, WireApiType };
 export {
   buildProviderConnectionTestPayload,
+  buildProviderModelDiscoveryPayload,
   buildProviderSavePayload,
   EMPTY_PROVIDER_CONFIG,
   formatThinkingLevelLabel,

package/src/index.css

@@ -1,5 +1,5 @@
-/* Import Design System - must be first */
 @import "./app/styles/design-system.css";
+@import "./app/styles/charcoal-theme.css";
 
 @tailwind base;
 @tailwind components;

package/src/platforms/desktop/types/desktop-update.types.ts

@@ -52,8 +52,13 @@ export type DesktopOpenExternalUrlResult =
   | { opened: true }
   | { opened: false; reason: 'unsupported-url' | 'popup-blocked' | 'bridge-failed' };
 
+export type DesktopRevealPathResult =
+  | { revealed: true }
+  | { revealed: false; reason: 'unsupported-path' | 'bridge-failed' };
+
 export type DesktopHostBridge = {
   openExternalUrl: (url: string) => Promise<DesktopOpenExternalUrlResult>;
+  revealPath?: (path: string) => Promise<DesktopRevealPathResult>;
 };
 
 export type NextClawDesktopBridge = {

package/src/platforms/mobile/components/__tests__/mobile-app-shell.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/app/components/i18n-provider";
@@ -9,14 +10,19 @@ vi.mock("@/shared/components/doc-browser", () => ({
 }));
 
 function renderShell(pathname: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
   const view = render(
-    <I18nProvider>
-      <MemoryRouter initialEntries={[pathname]}>
-        <MobileAppShell pathname={pathname} isDocBrowserOpen={false}>
-          <div>Content</div>
-        </MobileAppShell>
-      </MemoryRouter>
-    </I18nProvider>,
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider>
+        <MemoryRouter initialEntries={[pathname]}>
+          <MobileAppShell pathname={pathname} isDocBrowserOpen={false}>
+            <div>Content</div>
+          </MobileAppShell>
+        </MemoryRouter>
+      </I18nProvider>
+    </QueryClientProvider>,
   );
   return {
     ...view,