@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/settings/components/config/provider-models-section.tsx

@@ -1,39 +1,67 @@
-import { Button } from '@/shared/components/ui/button';
-import { Input } from '@/shared/components/ui/input';
-import { Label } from '@/shared/components/ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
-import { Switch } from '@/shared/components/ui/switch';
-import { t } from '@/shared/lib/i18n';
-import type { ThinkingLevel } from '@/shared/lib/api';
-import { Plus, Settings2, X } from 'lucide-react';
-
-type ModelConfig = Record<
-  string,
-  {
-    thinking?: { supported: ThinkingLevel[]; default?: ThinkingLevel | null };
-    vision?: boolean;
-  }
->;
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import { Label } from "@/shared/components/ui/label";
+import { t } from "@/shared/lib/i18n";
+import type { ThinkingLevel } from "@/shared/lib/api";
+import { useProviderModelSuggestions } from "@/features/settings/hooks/use-provider-model-suggestions";
+import {
+  ProviderModelList,
+  type ProviderModelConfig,
+} from "./provider-model-list";
+import { ProviderModelSuggestionsPanel } from "./provider-model-suggestions-panel";
+import { AlertCircle, LoaderCircle, Plus, RefreshCw, X } from "lucide-react";
+import { useRef, useState } from "react";
 
 type ProviderModelsSectionProps = {
+  providerName: string;
+  providerModelAliases: string[];
   models: string[];
-  modelConfig: ModelConfig;
+  modelConfig: ProviderModelConfig;
   modelDraft: string;
   showModelInput: boolean;
   onModelDraftChange: (value: string) => void;
   onShowModelInputChange: (value: boolean) => void;
   onAddModel: () => void;
+  onModelsChange: (models: string[]) => void;
+  supportsModelDiscovery: boolean;
+  onDiscoverModels: () => Promise<string[] | null>;
+  isDiscoveringModels: boolean;
+  fetchedModels: string[];
   onRemoveModel: (modelName: string) => void;
   onToggleModelThinkingLevel: (modelName: string, level: ThinkingLevel) => void;
-  onSetModelThinkingDefault: (modelName: string, level: ThinkingLevel | null) => void;
+  onSetModelThinkingDefault: (
+    modelName: string,
+    level: ThinkingLevel | null,
+  ) => void;
   onSetModelVision: (modelName: string, vision: boolean) => void;
   thinkingLevels: ThinkingLevel[];
   formatThinkingLevelLabel: (level: ThinkingLevel) => string;
 };
 
+function ProviderModelCatalogError({
+  hasFetchedCatalog,
+  hasSuggestionError,
+  supportsModelDiscovery,
+}: {
+  hasFetchedCatalog: boolean;
+  hasSuggestionError: boolean;
+  supportsModelDiscovery: boolean;
+}) {
+  if (!supportsModelDiscovery || !hasSuggestionError || hasFetchedCatalog) {
+    return null;
+  }
+  return (
+    <div className="flex items-start gap-2 rounded-xl bg-destructive/10 px-3 py-2 text-xs text-destructive">
+      <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+      {t("providerModelsSuggestionsFailed")}
+    </div>
+  );
+}
+
 export function ProviderModelsSection(props: ProviderModelsSectionProps) {
   const {
+    providerName,
+    providerModelAliases,
     models,
     modelConfig,
     modelDraft,
@@ -41,178 +69,179 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
     onModelDraftChange,
     onShowModelInputChange,
     onAddModel,
+    onModelsChange,
+    supportsModelDiscovery,
+    onDiscoverModels,
+    isDiscoveringModels,
+    fetchedModels,
     onRemoveModel,
     onToggleModelThinkingLevel,
     onSetModelThinkingDefault,
     onSetModelVision,
     thinkingLevels,
-    formatThinkingLevelLabel
+    formatThinkingLevelLabel,
   } = props;
+  const [suggestionsExpanded, setSuggestionsExpanded] = useState(false);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+  const {
+    addSuggestedModels,
+    hasSuggestionError,
+    isCheckingSuggestions,
+    suggestedModels,
+    suggestionSource,
+  } = useProviderModelSuggestions({
+    providerName,
+    models,
+    aliases: providerModelAliases,
+    fetchedModels,
+    onModelsChange,
+  });
+  const handleDiscoverModels = async () => {
+    const result = await onDiscoverModels();
+    if (result) {
+      setSuggestionsExpanded(true);
+      window.requestAnimationFrame(() => {
+        const suggestions = suggestionsRef.current;
+        suggestions?.scrollIntoView?.({ behavior: "smooth", block: "center" });
+        suggestions?.focus({ preventScroll: true });
+      });
+    }
+  };
+  const hasFetchedCatalog = fetchedModels.length > 0;
 
   return (
-    <div className='space-y-2'>
-      <div className='flex items-center justify-between'>
-        <Label className='text-sm font-medium text-foreground'>{t('providerModelsTitle')}</Label>
-        {!showModelInput ? (
-          <button
-            type='button'
-            onClick={() => onShowModelInputChange(true)}
-            className='flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80'
-          >
-            <Plus className='h-3 w-3' />
-            {t('providerAddModel')}
-          </button>
-        ) : null}
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label className="text-sm font-medium text-foreground">
+          {t("providerModelsTitle")}
+        </Label>
+        <div className="flex items-center gap-3">
+          {supportsModelDiscovery ? (
+            <button
+              type="button"
+              onClick={handleDiscoverModels}
+              disabled={isDiscoveringModels}
+              className="flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary/80 disabled:cursor-wait disabled:opacity-60"
+            >
+              <RefreshCw
+                className={`h-3 w-3 ${isDiscoveringModels ? "animate-spin" : ""}`}
+              />
+              {isDiscoveringModels
+                ? t("providerModelsFetching")
+                : t("providerModelsFetch")}
+            </button>
+          ) : null}
+          {!showModelInput ? (
+            <button
+              type="button"
+              onClick={() => onShowModelInputChange(true)}
+              className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80"
+            >
+              <Plus className="h-3 w-3" />
+              {t("providerAddModel")}
+            </button>
+          ) : null}
+        </div>
       </div>
 
       {showModelInput ? (
-        <div className='flex items-center gap-2'>
+        <div className="flex items-center gap-2">
           <Input
             value={modelDraft}
             onChange={(event) => onModelDraftChange(event.target.value)}
             onKeyDown={(event) => {
-              if (event.key === 'Enter') {
+              if (event.key === "Enter") {
                 event.preventDefault();
                 onAddModel();
               }
-              if (event.key === 'Escape') {
+              if (event.key === "Escape") {
                 onShowModelInputChange(false);
-                onModelDraftChange('');
+                onModelDraftChange("");
               }
             }}
-            placeholder={t('providerModelInputPlaceholder')}
-            className='flex-1 rounded-xl'
+            placeholder={t("providerModelInputPlaceholder")}
+            className="flex-1 rounded-xl"
             autoFocus
           />
-          <Button type='button' size='sm' onClick={onAddModel} disabled={modelDraft.trim().length === 0}>
-            {t('add')}
+          <Button
+            type="button"
+            size="sm"
+            onClick={onAddModel}
+            disabled={modelDraft.trim().length === 0}
+          >
+            {t("add")}
           </Button>
           <Button
-            type='button'
-            size='sm'
-            variant='ghost'
+            type="button"
+            size="sm"
+            variant="ghost"
             onClick={() => {
               onShowModelInputChange(false);
-              onModelDraftChange('');
+              onModelDraftChange("");
             }}
           >
-            <X className='h-4 w-4' />
+            <X className="h-4 w-4" />
           </Button>
         </div>
       ) : null}
 
+      <ProviderModelCatalogError
+        hasFetchedCatalog={hasFetchedCatalog}
+        hasSuggestionError={hasSuggestionError}
+        supportsModelDiscovery={supportsModelDiscovery}
+      />
+
+      {supportsModelDiscovery && isCheckingSuggestions && !hasFetchedCatalog ? (
+        <div className="flex items-center gap-2 rounded-xl bg-muted/35 px-3 py-2 text-xs text-muted-foreground">
+          <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
+          {t("providerModelsSuggestionsChecking")}
+        </div>
+      ) : supportsModelDiscovery &&
+        (suggestedModels.length > 0 || hasFetchedCatalog) ? (
+        <div
+          ref={suggestionsRef}
+          tabIndex={-1}
+          aria-live="polite"
+          className="scroll-m-4 outline-none"
+        >
+          <ProviderModelSuggestionsPanel
+            expanded={suggestionsExpanded}
+            fetchedTotal={fetchedModels.length}
+            models={suggestedModels}
+            source={suggestionSource}
+            onExpandedChange={setSuggestionsExpanded}
+            onAddModels={addSuggestedModels}
+          />
+        </div>
+      ) : null}
+
       {models.length === 0 ? (
-        <div className='rounded-xl bg-muted/35 px-4 py-6 text-center'>
-          <p className='text-sm text-muted-foreground'>{t('providerModelsEmptyShort')}</p>
+        <div className="rounded-xl bg-muted/35 px-4 py-6 text-center">
+          <p className="text-sm text-muted-foreground">
+            {t("providerModelsEmptyShort")}
+          </p>
           {!showModelInput ? (
             <button
-              type='button'
+              type="button"
               onClick={() => onShowModelInputChange(true)}
-              className='mt-2 text-sm font-medium text-primary hover:text-primary/80'
+              className="mt-2 text-sm font-medium text-primary hover:text-primary/80"
             >
-              {t('providerAddFirstModel')}
+              {t("providerAddFirstModel")}
             </button>
           ) : null}
         </div>
       ) : (
-        <div className='flex flex-wrap gap-2'>
-          {models.map((modelName) => {
-            const modelEntry = modelConfig[modelName];
-            const thinkingEntry = modelEntry?.thinking;
-            const supportedLevels = thinkingEntry?.supported ?? [];
-            const defaultThinkingLevel = thinkingEntry?.default ?? null;
-            const visionEnabled = modelEntry?.vision === true;
-
-            return (
-              <div
-                key={modelName}
-                className='group inline-flex max-w-full items-center gap-1 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5'
-              >
-                <span className='max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]'>{modelName}</span>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <button
-                      type='button'
-                      className='inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100'
-                      aria-label={t('providerModelThinkingTitle')}
-                      title={t('providerModelThinkingTitle')}
-                    >
-                      <Settings2 className='h-3 w-3' />
-                    </button>
-                  </PopoverTrigger>
-                  <PopoverContent className='w-80 space-y-3'>
-                    <div className='flex items-center justify-between gap-3 rounded-lg bg-muted/50 px-3 py-2'>
-                      <div className='min-w-0'>
-                        <p className='text-xs font-semibold text-foreground'>{t('providerModelVisionTitle')}</p>
-                        <p className='text-xs text-muted-foreground'>{t('providerModelVisionHint')}</p>
-                      </div>
-                      <Switch
-                        checked={visionEnabled}
-                        onCheckedChange={(checked) => onSetModelVision(modelName, checked)}
-                      />
-                    </div>
-                    <div className='space-y-1'>
-                      <p className='text-xs font-semibold text-foreground'>{t('providerModelThinkingTitle')}</p>
-                      <p className='text-xs text-muted-foreground'>{t('providerModelThinkingHint')}</p>
-                    </div>
-                    <div className='flex flex-wrap gap-1.5'>
-                      {thinkingLevels.map((level) => {
-                        const selected = supportedLevels.includes(level);
-                        return (
-                          <button
-                            key={level}
-                            type='button'
-                            onClick={() => onToggleModelThinkingLevel(modelName, level)}
-                            className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
-                              selected
-                                ? 'border-foreground/15 bg-foreground text-background'
-                                : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'
-                            }`}
-                          >
-                            {formatThinkingLevelLabel(level)}
-                          </button>
-                        );
-                      })}
-                    </div>
-                    <div className='space-y-1.5'>
-                      <Label className='text-xs font-medium text-foreground'>{t('providerModelThinkingDefault')}</Label>
-                      <Select
-                        value={defaultThinkingLevel ?? '__none__'}
-                        onValueChange={(value) =>
-                          onSetModelThinkingDefault(modelName, value === '__none__' ? null : (value as ThinkingLevel))
-                        }
-                        disabled={supportedLevels.length === 0}
-                      >
-                        <SelectTrigger className='h-8 rounded-lg text-xs'>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value='__none__'>{t('providerModelThinkingDefaultNone')}</SelectItem>
-                          {supportedLevels.map((level) => (
-                            <SelectItem key={level} value={level}>
-                              {formatThinkingLevelLabel(level)}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      {supportedLevels.length === 0 ? (
-                        <p className='text-xs text-muted-foreground'>{t('providerModelThinkingNoSupported')}</p>
-                      ) : null}
-                    </div>
-                  </PopoverContent>
-                </Popover>
-                <button
-                  type='button'
-                  onClick={() => onRemoveModel(modelName)}
-                  className='inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100'
-                  aria-label={t('remove')}
-                >
-                  <X className='h-3 w-3' />
-                </button>
-              </div>
-            );
-          })}
-        </div>
+        <ProviderModelList
+          models={models}
+          modelConfig={modelConfig}
+          onModelsChange={onModelsChange}
+          onRemoveModel={onRemoveModel}
+          onToggleModelThinkingLevel={onToggleModelThinkingLevel}
+          onSetModelThinkingDefault={onSetModelThinkingDefault}
+          onSetModelVision={onSetModelVision}
+          thinkingLevels={thinkingLevels}
+          formatThinkingLevelLabel={formatThinkingLevelLabel}
+        />
       )}
     </div>
   );

package/src/features/settings/components/config/provider-status-badge.tsx

@@ -3,13 +3,15 @@ import { t } from '@/shared/lib/i18n';
 
 type ProviderStatusBadgeProps = {
   enabled: boolean;
+  apiKeyRequired?: boolean;
   apiKeySet: boolean;
   className?: string;
 };
 
-export function ProviderStatusBadge({ apiKeySet, className, enabled }: ProviderStatusBadgeProps) {
+export function ProviderStatusBadge({ apiKeyRequired = true, apiKeySet, className, enabled }: ProviderStatusBadgeProps) {
   if (!enabled) {
     return <StatusDot status="inactive" label={t('disabled')} className={className} />;
   }
-  return <StatusDot status={apiKeySet ? 'ready' : 'setup'} label={apiKeySet ? t('statusReady') : t('statusSetup')} className={className} />;
+  const isReady = !apiKeyRequired || apiKeySet;
+  return <StatusDot status={isReady ? 'ready' : 'setup'} label={isReady ? t('statusReady') : t('statusSetup')} className={className} />;
 }

package/src/features/settings/hooks/__tests__/use-provider-connectivity.test.tsx

@@ -0,0 +1,98 @@
+import { act, renderHook } from '@testing-library/react';
+import { NextClawClientError } from '@nextclaw/client-sdk';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useProviderConnectivity } from '@/features/settings/hooks/use-provider-connectivity';
+
+const mocks = vi.hoisted(() => ({
+  discoverModels: vi.fn(),
+  testConnection: vi.fn(),
+  toastError: vi.fn(),
+  toastSuccess: vi.fn(),
+}));
+
+vi.mock('@/shared/hooks/use-config', () => ({
+  useDiscoverProviderModels: () => ({ mutateAsync: mocks.discoverModels, isPending: false }),
+  useTestProviderConnection: () => ({ mutateAsync: mocks.testConnection, isPending: false }),
+}));
+
+vi.mock('sonner', () => ({
+  toast: { error: mocks.toastError, success: mocks.toastSuccess },
+}));
+
+describe('useProviderConnectivity', () => {
+  beforeEach(() => {
+    mocks.discoverModels.mockReset().mockResolvedValue({
+      models: ['openrouter/gpt-5', 'openrouter/qwen/qwen3.8-max'],
+      source: 'provider',
+    });
+    mocks.testConnection.mockReset();
+    mocks.toastError.mockReset();
+    mocks.toastSuccess.mockReset();
+  });
+
+  it('fetches a catalog for selection without changing the provider model draft', async () => {
+    const { result, rerender } = renderHook(
+      ({ apiBase }) => useProviderConnectivity({
+        providerName: 'openrouter',
+        apiKey: 'secret',
+        apiKeyRequired: true,
+        apiKeySet: false,
+        apiBase,
+        extraHeaders: null,
+        supportsWireApi: false,
+        wireApi: 'auto',
+        models: ['gpt-5'],
+        providerModelAliases: ['openrouter'],
+      }),
+      { initialProps: { apiBase: 'https://openrouter.ai/api/v1' } },
+    );
+
+    let fetched: string[] | null = null;
+    await act(async () => {
+      fetched = await result.current.discoverModels();
+    });
+
+    expect(fetched).toEqual(['openrouter/gpt-5', 'openrouter/qwen/qwen3.8-max']);
+    expect(result.current.fetchedModels).toEqual(fetched);
+    expect(mocks.toastSuccess).toHaveBeenCalledWith('Model list fetched');
+
+    rerender({ apiBase: 'https://example.com/v1' });
+    expect(result.current.fetchedModels).toEqual([]);
+  });
+
+  it('explains missing and rejected API keys without exposing upstream English errors', async () => {
+    const { result, rerender } = renderHook(
+      ({ apiKey, apiKeySet }) => useProviderConnectivity({
+        providerName: 'moonshot',
+        apiKey,
+        apiKeyRequired: true,
+        apiKeySet,
+        apiBase: 'https://api.moonshot.ai/v1',
+        extraHeaders: null,
+        supportsWireApi: false,
+        wireApi: 'auto',
+        models: [],
+        providerModelAliases: ['moonshot'],
+      }),
+      { initialProps: { apiKey: '', apiKeySet: false } },
+    );
+
+    await act(async () => {
+      await result.current.discoverModels();
+    });
+    expect(mocks.discoverModels).not.toHaveBeenCalled();
+    expect(mocks.toastError).toHaveBeenLastCalledWith('Please enter an API Key before fetching the model list');
+
+    mocks.discoverModels.mockRejectedValueOnce(new NextClawClientError({
+      message: 'Provider model discovery failed with HTTP 401 Unauthorized',
+      status: 502,
+      code: 'PROVIDER_MODEL_DISCOVERY_FAILED',
+      details: { upstreamStatus: 401 },
+    }));
+    rerender({ apiKey: 'wrong-key', apiKeySet: false });
+    await act(async () => {
+      await result.current.discoverModels();
+    });
+    expect(mocks.toastError).toHaveBeenLastCalledWith('Authentication failed. Check the API Key and API address');
+  });
+});

package/src/features/settings/hooks/__tests__/use-provider-model-suggestions.test.tsx

@@ -0,0 +1,107 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useProviderModelSuggestions } from '@/features/settings/hooks/use-provider-model-suggestions';
+
+const catalogQuery = vi.hoisted(() => ({
+  data: {
+    refreshing: false,
+    providers: {
+      openrouter: {
+        fetchedAt: '2026-08-07T00:00:00.000Z',
+        lastError: null,
+        models: [
+          'openrouter/gpt-5',
+          'openrouter/inclusionai/ling-3.0-tiny:free',
+          'openrouter/meta/muse-spark-1.2',
+        ],
+      },
+      moonshot: {
+        fetchedAt: null,
+        lastError: null as { message: string; occurredAt: string } | null,
+        models: [],
+      },
+    },
+  },
+  isLoading: false,
+}));
+
+vi.mock('@/shared/hooks/use-config', () => ({
+  useProviderModelCatalog: () => catalogQuery,
+}));
+
+describe('useProviderModelSuggestions', () => {
+  beforeEach(() => {
+    catalogQuery.data.refreshing = false;
+    catalogQuery.data.providers.moonshot.lastError = null;
+    catalogQuery.isLoading = false;
+  });
+
+  it('automatically derives only the selected provider additions and updates the form draft', () => {
+    const onModelsChange = vi.fn();
+    const { result } = renderHook(() => useProviderModelSuggestions({
+      providerName: 'openrouter',
+      models: ['gpt-5'],
+      aliases: ['openrouter'],
+      onModelsChange,
+    }));
+
+    expect(result.current.suggestedModels).toEqual([
+      'inclusionai/ling-3.0-tiny:free',
+      'meta/muse-spark-1.2',
+    ]);
+
+    expect(result.current.suggestionSource).toBe('background');
+    act(() => result.current.addSuggestedModels(['inclusionai/ling-3.0-tiny:free']));
+    expect(onModelsChange).toHaveBeenCalledWith(['gpt-5', 'inclusionai/ling-3.0-tiny:free']);
+
+    act(() => result.current.addSuggestedModels(result.current.suggestedModels));
+    expect(onModelsChange).toHaveBeenLastCalledWith([
+      'gpt-5',
+      'inclusionai/ling-3.0-tiny:free',
+      'meta/muse-spark-1.2',
+    ]);
+  });
+
+  it('uses an explicitly fetched catalog instead of the saved-provider background snapshot', () => {
+    const { result } = renderHook(() => useProviderModelSuggestions({
+      providerName: 'openrouter',
+      models: ['gpt-5'],
+      aliases: ['openrouter'],
+      fetchedModels: ['openrouter/gpt-5', 'openrouter/qwen/qwen3.8-max'],
+      onModelsChange: vi.fn(),
+    }));
+
+    expect(result.current.suggestionSource).toBe('fetched');
+    expect(result.current.suggestedModels).toEqual(['qwen/qwen3.8-max']);
+  });
+
+  it('reports the initial background lookup without suggesting another provider catalog', () => {
+    catalogQuery.isLoading = true;
+    const { result } = renderHook(() => useProviderModelSuggestions({
+      providerName: 'anthropic',
+      models: [],
+      aliases: ['anthropic'],
+      onModelsChange: vi.fn(),
+    }));
+
+    expect(result.current.isCheckingSuggestions).toBe(true);
+    expect(result.current.suggestedModels).toEqual([]);
+  });
+
+  it('reports a provider failure instead of inheriting another provider loading state', () => {
+    catalogQuery.data.refreshing = true;
+    catalogQuery.data.providers.moonshot.lastError = {
+      message: 'Provider model discovery failed with HTTP 401 Unauthorized',
+      occurredAt: '2026-08-08T00:00:00.000Z',
+    };
+    const { result } = renderHook(() => useProviderModelSuggestions({
+      providerName: 'moonshot',
+      models: [],
+      aliases: ['moonshot'],
+      onModelsChange: vi.fn(),
+    }));
+
+    expect(result.current.isCheckingSuggestions).toBe(false);
+    expect(result.current.hasSuggestionError).toBe(true);
+  });
+});