@nextclaw/ui 0.15.22 → 0.15.23

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

@@ -0,0 +1,239 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ProviderModelsSection } from "@/features/settings/components/config/provider-models-section";
+
+const suggestions = vi.hoisted(() => ({
+  addSuggestedModels: vi.fn(),
+  isCheckingSuggestions: false,
+  suggestedModels: [] as string[],
+  suggestionSource: "background" as "background" | "fetched",
+}));
+
+vi.mock("@/features/settings/hooks/use-provider-model-suggestions", () => ({
+  useProviderModelSuggestions: () => suggestions,
+}));
+
+function renderSection(
+  input: {
+    fetchedModels?: string[];
+    isDiscoveringModels?: boolean;
+    models?: string[];
+    onDiscoverModels?: () => Promise<string[] | null>;
+    onModelsChange?: (models: string[]) => void;
+    supportsModelDiscovery?: boolean;
+  } = {},
+) {
+  const onDiscoverModels =
+    input.onDiscoverModels ?? vi.fn(async () => ["model-a"]);
+  const onModelsChange = input.onModelsChange ?? vi.fn();
+  render(
+    <ProviderModelsSection
+      providerName="openrouter"
+      providerModelAliases={["openrouter"]}
+      models={input.models ?? ["gpt-5"]}
+      modelConfig={{}}
+      modelDraft=""
+      showModelInput={false}
+      onModelDraftChange={vi.fn()}
+      onShowModelInputChange={vi.fn()}
+      onAddModel={vi.fn()}
+      onModelsChange={onModelsChange}
+      supportsModelDiscovery={input.supportsModelDiscovery ?? true}
+      onDiscoverModels={onDiscoverModels}
+      isDiscoveringModels={input.isDiscoveringModels ?? false}
+      fetchedModels={input.fetchedModels ?? []}
+      onRemoveModel={vi.fn()}
+      onToggleModelThinkingLevel={vi.fn()}
+      onSetModelThinkingDefault={vi.fn()}
+      onSetModelVision={vi.fn()}
+      thinkingLevels={["off", "high"]}
+      formatThinkingLevelLabel={(level) => level}
+    />,
+  );
+  return { onDiscoverModels, onModelsChange };
+}
+
+describe("ProviderModelsSection", () => {
+  beforeEach(() => {
+    suggestions.addSuggestedModels.mockReset();
+    suggestions.isCheckingSuggestions = false;
+    suggestions.suggestedModels = [];
+    suggestions.suggestionSource = "background";
+  });
+
+  it("exposes a labeled one-click model discovery action", () => {
+    const onDiscoverModels = vi.fn(async () => null);
+    renderSection({ onDiscoverModels });
+
+    fireEvent.click(screen.getByRole("button", { name: "Fetch model list" }));
+
+    expect(onDiscoverModels).toHaveBeenCalledOnce();
+  });
+
+  it("shows a disabled progress state while discovery is running", () => {
+    renderSection({ isDiscoveringModels: true });
+
+    expect(screen.getByRole("button", { name: "Fetching..." })).toHaveProperty(
+      "disabled",
+      true,
+    );
+  });
+
+  it("hides discovery and remote suggestions when the provider does not expose a model list", () => {
+    suggestions.suggestedModels = ["qwen3.7-plus"];
+    suggestions.isCheckingSuggestions = true;
+    renderSection({ supportsModelDiscovery: false });
+
+    expect(
+      screen.queryByRole("button", { name: "Fetch model list" }),
+    ).toBeNull();
+    expect(screen.queryByText("Loading the model catalog…")).toBeNull();
+    expect(screen.queryByText("Catalog models not added: 1")).toBeNull();
+    expect(screen.getByRole("button", { name: /Add Model/i })).toBeTruthy();
+  });
+
+  it("shows automatic suggestions with selected and bulk draft actions", () => {
+    suggestions.suggestedModels = [
+      "inclusionai/ling-3.0-tiny:free",
+      "meta/muse-spark-1.2",
+    ];
+    renderSection();
+
+    expect(screen.getByText("Catalog models not added: 2")).toBeTruthy();
+    expect(screen.queryByText("inclusionai/ling-3.0-tiny:free")).toBeNull();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Catalog models not added: 2/i }),
+    );
+    const longModelLabel = screen.getByText("inclusionai/ling-3.0-tiny:free");
+    expect(longModelLabel.className).toContain("truncate");
+    expect(longModelLabel.closest(".grid")?.className).toContain(
+      "grid-cols-[auto_minmax(0,1fr)]",
+    );
+
+    expect(screen.getByRole("button", { name: "Add selected" })).toHaveProperty(
+      "disabled",
+      true,
+    );
+    fireEvent.click(
+      screen.getByRole("checkbox", {
+        name: "Select model inclusionai/ling-3.0-tiny:free",
+      }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Add selected" }));
+    fireEvent.click(screen.getByRole("button", { name: "Add all" }));
+
+    expect(suggestions.addSuggestedModels).toHaveBeenNthCalledWith(1, [
+      "inclusionai/ling-3.0-tiny:free",
+    ]);
+    expect(suggestions.addSuggestedModels).toHaveBeenNthCalledWith(
+      2,
+      suggestions.suggestedModels,
+    );
+    expect(screen.getByText("0 selected")).toBeTruthy();
+    expect(screen.getByText("Save to apply the added models.")).toBeTruthy();
+  });
+
+  it("turns a large catalog into searchable selective addition without a bulk-add action", () => {
+    suggestions.suggestedModels = Array.from(
+      { length: 80 },
+      (_, index) => `provider/model-${index + 1}`,
+    );
+    renderSection();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Catalog models not added: 80/i }),
+    );
+
+    expect(screen.queryByRole("button", { name: "Add all" })).toBeNull();
+    expect(screen.getAllByRole("checkbox")).toHaveLength(50);
+    expect(
+      screen.getByText(
+        "Showing the first 50 of 80 matches; refine your search to narrow the list",
+      ),
+    ).toBeTruthy();
+
+    fireEvent.change(screen.getByPlaceholderText("Search catalog models"), {
+      target: { value: "model-80" },
+    });
+    expect(screen.getAllByRole("checkbox")).toHaveLength(1);
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Select model provider/model-80" }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Add selected" }));
+
+    expect(suggestions.addSuggestedModels).toHaveBeenCalledWith([
+      "provider/model-80",
+    ]);
+  });
+
+  it("labels and expands a freshly fetched catalog for explicit selection", async () => {
+    suggestions.suggestedModels = ["gpt-5.6-sol", "gpt-5.6-terra"];
+    suggestions.suggestionSource = "fetched";
+    const onDiscoverModels = vi.fn(async () => suggestions.suggestedModels);
+    renderSection({
+      fetchedModels: suggestions.suggestedModels,
+      onDiscoverModels,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Fetch model list" }));
+
+    expect(onDiscoverModels).toHaveBeenCalledOnce();
+    expect(
+      await screen.findByText("2 fetched models available to add"),
+    ).toBeTruthy();
+    expect(await screen.findByText("gpt-5.6-sol")).toBeTruthy();
+  });
+
+  it("explains when every fetched model is already configured instead of asking for an empty selection", () => {
+    suggestions.suggestedModels = [];
+    suggestions.suggestionSource = "fetched";
+    renderSection({ fetchedModels: ["gpt-5"] });
+
+    expect(
+      screen.getByText("Fetched 1 models; all are already in the current list"),
+    ).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Add selected" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add all" })).toBeNull();
+  });
+
+  it("shows a quiet loading state while the background catalog is first resolved", () => {
+    suggestions.isCheckingSuggestions = true;
+    renderSection();
+
+    expect(screen.getByText("Loading the model catalog…")).toBeTruthy();
+  });
+
+  it("bulk-selects and removes configured models from the unsaved draft", () => {
+    const onModelsChange = vi.fn();
+    renderSection({
+      models: ["gpt-5", "claude-sonnet-4-6", "deepseek-chat"],
+      onModelsChange,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Bulk delete" }));
+    fireEvent.click(screen.getByRole("button", { name: "Select all" }));
+    expect(
+      screen
+        .getAllByRole("checkbox")
+        .every((checkbox) => (checkbox as HTMLInputElement).checked),
+    ).toBe(true);
+    fireEvent.click(screen.getByRole("button", { name: "Clear selection" }));
+    expect(
+      screen
+        .getAllByRole("checkbox")
+        .every((checkbox) => !(checkbox as HTMLInputElement).checked),
+    ).toBe(true);
+
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Select model gpt-5" }),
+    );
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Select model deepseek-chat" }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Delete selected" }));
+
+    expect(onModelsChange).toHaveBeenCalledWith(["claude-sonnet-4-6"]);
+    expect(screen.queryByRole("checkbox")).toBeNull();
+  });
+});

package/src/features/settings/components/config/provider-form-detail-pane.tsx

@@ -0,0 +1,307 @@
+import type { FormEventHandler } from "react";
+import { CircleDotDashed, Trash2 } from "lucide-react";
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import { Label } from "@/shared/components/ui/label";
+import { FormActions } from "@/shared/components/ui/actions/form-actions";
+import { t } from "@/shared/lib/i18n";
+import type { getLanguage } from "@/shared/lib/i18n";
+import type { ThinkingLevel } from "@/shared/lib/api";
+import {
+  ConfigSplitDetailPane,
+  ConfigSplitPaneBody,
+  ConfigSplitPaneFooter,
+  ConfigSplitPaneHeader,
+} from "@/shared/components/config-split-page";
+import { ProviderAdvancedSettingsSection } from "@/features/settings/components/config/provider-advanced-settings-section";
+import { ProviderAuthSection } from "@/features/settings/components/config/provider-auth-section";
+import { ProviderModelsSection } from "@/features/settings/components/config/provider-models-section";
+import { ProviderStatusBadge } from "@/features/settings/components/config/provider-status-badge";
+import type { useProviderConnectivity } from "@/features/settings/hooks/use-provider-connectivity";
+import type { resolveProviderFormContext } from "@/features/settings/utils/provider-form-context.utils";
+import {
+  formatThinkingLevelLabel,
+  THINKING_LEVELS,
+  type ModelConfig,
+  type WireApiType,
+} from "@/features/settings/utils/provider-form-support.utils";
+
+type ProviderFormDetailPaneProps = {
+  context: ReturnType<typeof resolveProviderFormContext>;
+  language: ReturnType<typeof getLanguage>;
+  providerTitle: string;
+  providerDisplayName: string;
+  apiKey: string;
+  apiBase: string;
+  extraHeaders: Record<string, string> | null;
+  wireApi: WireApiType;
+  models: string[];
+  modelConfig: ModelConfig;
+  modelDraft: string;
+  showAdvanced: boolean;
+  showModelInput: boolean;
+  resolvedAuthMethodId: string;
+  authSessionId: string | null;
+  authStatusMessage: string;
+  hasChanges: boolean;
+  isDeletePending: boolean;
+  isUpdatePending: boolean;
+  connectivity: ReturnType<typeof useProviderConnectivity>;
+  startPending: boolean;
+  importPending: boolean;
+  onProviderDisplayNameChange: (value: string) => void;
+  onApiKeyChange: (value: string) => void;
+  onApiBaseChange: (value: string) => void;
+  onAuthMethodChange: (value: string) => void;
+  onStartProviderAuth: () => void;
+  onImportProviderAuthFromCli: () => void;
+  onModelDraftChange: (value: string) => void;
+  onShowModelInputChange: (show: boolean) => void;
+  onAddModel: () => void;
+  onModelsChange: (models: string[]) => void;
+  onRemoveModel: (modelName: string) => void;
+  onToggleModelThinkingLevel: (modelName: string, level: ThinkingLevel) => void;
+  onSetModelThinkingDefault: (
+    modelName: string,
+    level: ThinkingLevel | null,
+  ) => void;
+  onSetModelVision: (modelName: string, vision: boolean) => void;
+  onShowAdvancedChange: (show: boolean) => void;
+  onWireApiChange: (wireApi: WireApiType) => void;
+  onExtraHeadersChange: (headers: Record<string, string> | null) => void;
+  onDeleteProvider: () => void;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  onTestConnection: () => void;
+};
+
+export function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
+  const {
+    context,
+    language,
+    providerTitle,
+    providerDisplayName,
+    apiKey,
+    apiBase,
+    extraHeaders,
+    wireApi,
+    models,
+    modelConfig,
+    modelDraft,
+    showAdvanced,
+    showModelInput,
+    resolvedAuthMethodId,
+    authSessionId,
+    authStatusMessage,
+    hasChanges,
+    isDeletePending,
+    isUpdatePending,
+    connectivity,
+    startPending,
+    importPending,
+    onProviderDisplayNameChange,
+    onApiKeyChange,
+    onApiBaseChange,
+    onAuthMethodChange,
+    onStartProviderAuth,
+    onImportProviderAuthFromCli,
+    onModelDraftChange,
+    onShowModelInputChange,
+    onAddModel,
+    onModelsChange,
+    onRemoveModel,
+    onToggleModelThinkingLevel,
+    onSetModelThinkingDefault,
+    onSetModelVision,
+    onShowAdvancedChange,
+    onWireApiChange,
+    onExtraHeadersChange,
+    onDeleteProvider,
+    onSubmit,
+    onTestConnection,
+  } = props;
+  const selectedAuthMethod = context.providerAuthMethods.find(
+    (method) => method.id === resolvedAuthMethodId,
+  );
+
+  return (
+    <ConfigSplitDetailPane>
+      <ConfigSplitPaneHeader className="px-5 py-4">
+        <div className="flex items-center justify-between">
+          <h3 className="truncate text-lg font-semibold text-foreground">
+            {providerTitle}
+          </h3>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={onDeleteProvider}
+              disabled={isDeletePending}
+              className="text-muted-foreground/70 transition-colors hover:text-red-500"
+              title={t("providerDelete")}
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+            <ProviderStatusBadge
+              enabled={context.currentEnabled}
+              apiKeyRequired={context.resolvedProviderConfig.apiKeyRequired}
+              apiKeySet={context.resolvedProviderConfig.apiKeySet}
+            />
+          </div>
+        </div>
+      </ConfigSplitPaneHeader>
+
+      <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+        <ConfigSplitPaneBody className="space-y-4 px-5 py-4">
+          <div className="space-y-2">
+            <Label
+              htmlFor="providerDisplayName"
+              className="text-sm font-medium text-foreground"
+            >
+              {t("providerDisplayName")}
+            </Label>
+            <Input
+              id="providerDisplayName"
+              type="text"
+              value={providerDisplayName}
+              onChange={(event) =>
+                onProviderDisplayNameChange(event.target.value)
+              }
+              placeholder={
+                context.defaultDisplayName ||
+                t("providerDisplayNamePlaceholder")
+              }
+              className="rounded-xl"
+            />
+            <p className="text-xs text-muted-foreground">
+              {t("providerDisplayNameHelpShort")}
+            </p>
+          </div>
+
+          <ProviderAuthSection
+            apiKey={apiKey}
+            apiKeyRequired={
+              context.resolvedProviderConfig.apiKeyRequired !== false
+            }
+            apiKeySet={context.resolvedProviderConfig.apiKeySet}
+            apiKeyPlaceholder={
+              context.apiKeyHint?.placeholder ?? t("enterApiKey")
+            }
+            providerAuth={context.providerAuth}
+            providerAuthNote={
+              context.providerAuth?.note?.[language] ||
+              context.providerAuth?.note?.en ||
+              context.providerAuth?.displayName ||
+              ""
+            }
+            providerAuthMethodOptions={context.providerAuthMethodOptions}
+            providerAuthMethodsCount={context.providerAuthMethods.length}
+            selectedAuthMethodHint={
+              selectedAuthMethod?.hint?.[language] ||
+              selectedAuthMethod?.hint?.en ||
+              ""
+            }
+            shouldUseAuthMethodPills={context.shouldUseAuthMethodPills}
+            resolvedAuthMethodId={resolvedAuthMethodId}
+            onAuthMethodChange={onAuthMethodChange}
+            onStartProviderAuth={onStartProviderAuth}
+            onImportProviderAuthFromCli={onImportProviderAuthFromCli}
+            startPending={startPending}
+            importPending={importPending}
+            authSessionId={authSessionId}
+            authStatusMessage={authStatusMessage}
+            onApiKeyChange={onApiKeyChange}
+          />
+
+          <div className="space-y-2">
+            <Label
+              htmlFor="apiBase"
+              className="text-sm font-medium text-foreground"
+            >
+              {t("apiBase")}
+            </Label>
+            <Input
+              id="apiBase"
+              type="text"
+              value={apiBase}
+              onChange={(event) => onApiBaseChange(event.target.value)}
+              placeholder={
+                context.defaultApiBase ||
+                context.apiBaseHint?.placeholder ||
+                "https://api.example.com"
+              }
+              className="rounded-xl"
+            />
+            <p className="text-xs text-muted-foreground">
+              {context.apiBaseHelpText}
+            </p>
+          </div>
+
+          <ProviderModelsSection
+            key={context.providerConfig?.providerId}
+            providerName={context.providerConfig?.providerId ?? ""}
+            providerModelAliases={context.providerModelAliases}
+            models={models}
+            modelConfig={modelConfig}
+            modelDraft={modelDraft}
+            showModelInput={showModelInput}
+            onModelDraftChange={onModelDraftChange}
+            onShowModelInputChange={onShowModelInputChange}
+            onAddModel={onAddModel}
+            onModelsChange={onModelsChange}
+            supportsModelDiscovery={context.supportsModelDiscovery}
+            onDiscoverModels={connectivity.discoverModels}
+            isDiscoveringModels={connectivity.isDiscoveringModels}
+            fetchedModels={connectivity.fetchedModels}
+            onRemoveModel={onRemoveModel}
+            onToggleModelThinkingLevel={onToggleModelThinkingLevel}
+            onSetModelThinkingDefault={onSetModelThinkingDefault}
+            onSetModelVision={onSetModelVision}
+            thinkingLevels={THINKING_LEVELS}
+            formatThinkingLevelLabel={formatThinkingLevelLabel}
+          />
+
+          <ProviderAdvancedSettingsSection
+            showAdvanced={showAdvanced}
+            onShowAdvancedChange={onShowAdvancedChange}
+            supportsWireApi={context.supportsWireApi}
+            wireApiLabel={t("wireApi")}
+            wireApi={wireApi}
+            onWireApiChange={onWireApiChange}
+            shouldUseWireApiPills={context.shouldUseWireApiPills}
+            wireApiSelectOptions={context.wireApiSelectOptions}
+            extraHeadersLabel={t("extraHeaders")}
+            extraHeaders={extraHeaders}
+            onExtraHeadersChange={onExtraHeadersChange}
+          />
+        </ConfigSplitPaneBody>
+
+        <ConfigSplitPaneFooter>
+          <FormActions align="between">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={onTestConnection}
+              disabled={connectivity.isTestPending}
+            >
+              <CircleDotDashed className="mr-1.5 h-3.5 w-3.5" />
+              {connectivity.isTestPending
+                ? t("providerTestingConnection")
+                : t("providerTestConnection")}
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              disabled={isUpdatePending || !hasChanges}
+            >
+              {isUpdatePending
+                ? t("saving")
+                : hasChanges
+                  ? t("save")
+                  : t("unchanged")}
+            </Button>
+          </FormActions>
+        </ConfigSplitPaneFooter>
+      </form>
+    </ConfigSplitDetailPane>
+  );
+}