@nextclaw/ui 0.15.22 → 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__/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/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/shared/components/actions/__tests__/navigation-link.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { NavigationLink } from "@/shared/components/actions/navigation-link";
 
@@ -37,11 +38,21 @@ describe("NavigationLink", () => {
     );
   });
 
-  it("keeps same-page links on the browser navigation path", () => {
-    render(<NavigationLink href="/settings">Settings</NavigationLink>);
+  it("navigates internal destinations through the app router", () => {
+    render(
+      <MemoryRouter initialEntries={["/cron"]}>
+        <NavigationLink href="/chat/session-1">Open session</NavigationLink>
+        <Routes>
+          <Route path="/chat/:sessionId" element={<p>Session route</p>} />
+        </Routes>
+      </MemoryRouter>,
+    );
 
-    const link = screen.getByRole("link", { name: "Settings" });
+    const link = screen.getByRole("link", { name: "Open session" });
     expect(link.getAttribute("target")).toBeNull();
+    fireEvent.click(link);
+
+    expect(screen.getByText("Session route")).toBeTruthy();
     expect(mocks.openExternalUrl).not.toHaveBeenCalled();
   });
 });

package/src/shared/components/actions/navigation-link.tsx

@@ -4,6 +4,7 @@ import type {
   ReactNode,
 } from "react";
 import { ExternalLink as ExternalLinkIcon, type LucideIcon } from "lucide-react";
+import { Link } from "react-router-dom";
 import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
 import { cn } from "@/shared/lib/utils";
 
@@ -58,8 +59,8 @@ function resolveExternalHttpUrl(href: string): string | null {
 
 /**
  * Shared navigation primitive for visible URL destinations.
- * External links retain native link semantics while delegating ordinary clicks
- * to the desktop host when one is available.
+ * Internal links use client-side routing; external links delegate ordinary
+ * clicks to the desktop host when one is available.
  */
 export function NavigationLink({
   children,
@@ -75,29 +76,50 @@ export function NavigationLink({
   ...props
 }: NavigationLinkProps) {
   const Icon = icon === undefined && external ? ExternalLinkIcon : icon;
+  const linkClassName = cn(
+    "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
+    LINK_SIZE_CLASS[size],
+    className,
+  );
   const linkIcon = Icon ? (
     <Icon
       aria-hidden="true"
       className={cn("shrink-0", LINK_ICON_SIZE_CLASS[size])}
     />
   ) : null;
+  const content = (
+    <>
+      {iconPosition === "leading" ? linkIcon : null}
+      {children}
+      {iconPosition === "trailing" ? linkIcon : null}
+    </>
+  );
+
+  if (!external) {
+    return (
+      <Link
+        {...props}
+        to={href}
+        target={target}
+        rel={rel}
+        className={linkClassName}
+        onClick={onClick}
+      >
+        {content}
+      </Link>
+    );
+  }
 
   return (
     <a
       {...props}
       href={href}
-      target={external ? target ?? "_blank" : target}
-      rel={external ? resolveExternalRel(rel) : rel}
-      className={cn(
-        "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
-        LINK_SIZE_CLASS[size],
-        className,
-      )}
+      target={target ?? "_blank"}
+      rel={resolveExternalRel(rel)}
+      className={linkClassName}
       onClick={(event) => {
         onClick?.(event);
-        const externalHttpUrl = external
-          ? resolveExternalHttpUrl(href)
-          : null;
+        const externalHttpUrl = resolveExternalHttpUrl(href);
         if (
           externalHttpUrl &&
           !event.defaultPrevented &&
@@ -108,9 +130,7 @@ export function NavigationLink({
         }
       }}
     >
-      {iconPosition === "leading" ? linkIcon : null}
-      {children}
-      {iconPosition === "trailing" ? linkIcon : null}
+      {content}
     </a>
   );
 }

package/src/shared/components/common/__tests__/agent-avatar.test.tsx

@@ -23,8 +23,9 @@ describe('AgentAvatar', () => {
     const avatar = screen.getByLabelText('Main');
     expect(avatar.querySelector('svg')).toBeTruthy();
     expect(avatar.textContent).not.toContain('M');
-    expect(avatar.className).toContain('bg-primary');
-    expect(avatar.className).toContain('text-primary-foreground');
+    expect(avatar.className).toContain('bg-[#ede7dc]');
+    expect(avatar.className).toContain('text-[#57534e]');
+    expect(avatar.className).not.toContain('primary');
   });
 
   it('keeps letter fallback avatars for specialist agents', () => {

package/src/shared/components/common/agent-avatar.tsx

@@ -29,9 +29,9 @@ function hashText(value: string): number {
 export function AgentAvatar({ agentId, displayName, avatarUrl, className }: AgentAvatarProps) {
   const seed = displayName?.trim() || agentId;
   const isMainAgent = agentId.trim().toLowerCase() === 'main';
-  const [paletteBgClass, paletteTextClass] = PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
-  const bgClass = isMainAgent ? 'bg-primary' : paletteBgClass;
-  const textClass = isMainAgent ? 'text-primary-foreground' : paletteTextClass;
+  const [bgClass, textClass] = isMainAgent
+    ? ['bg-[#ede7dc] [html[data-theme-appearance=dark]_&]:bg-[#373229]', 'text-[#57534e] [html[data-theme-appearance=dark]_&]:text-[#e2ded7]']
+    : PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
 
   if (avatarUrl?.trim()) {
     return (