refactor(gui): react-doctor cleanup for Providers

gui/src/components/add-provider-form-pane.tsx

@@ -0,0 +1,160 @@
+import { IconExternal, IconKey } from "../icons";
+import { useT } from "../i18n";
+import type { CatalogPreset } from "./provider-catalog/provider-presets";
+import type { ProviderPayloadForm } from "../provider-payload";
+import { AddProviderField } from "./add-provider-modal-field";
+import { baseUrlForChoice } from "../base-url-choice";
+
+export function AddProviderFormPane({
+  preset,
+  form,
+  endpointChoice,
+  error,
+  saving,
+  dup,
+  isCustom,
+  isLocal,
+  isReservedForward,
+  presetDescription,
+  onFormChange,
+  onEndpointChoiceChange,
+  onSubmit,
+  onUseOauthLogin,
+  onBack,
+}: {
+  preset: CatalogPreset;
+  form: ProviderPayloadForm;
+  endpointChoice: string;
+  error: string;
+  saving: boolean;
+  dup: boolean;
+  isCustom: boolean;
+  isLocal: boolean;
+  isReservedForward: boolean;
+  presetDescription: (candidate: CatalogPreset) => string | undefined;
+  onFormChange: (next: ProviderPayloadForm) => void;
+  onEndpointChoiceChange: (choiceId: string) => void;
+  onSubmit: () => void;
+  onUseOauthLogin: () => void;
+  onBack: () => void;
+}) {
+  const t = useT();
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      {!isReservedForward && !isCustom && !isLocal && !preset.keyOptional && preset.note && (
+        <details className="setup-guide">
+          <summary>{t("modal.setupGuide")}</summary>
+          <ol className="text-label leading-relaxed" style={{ margin: "8px 0 0", paddingLeft: 18, color: "var(--muted)" }}>
+            <li>
+              {t("modal.setupStep1Prefix")}{" "}
+              <a href={preset.dashboardUrl} target="_blank" rel="noreferrer">
+                {t("modal.setupDashboardLink", { label: preset.label })}
+              </a>{" "}
+              {t("modal.setupStep1Suffix")}
+            </li>
+            <li>{t("modal.setupStep2")}</li>
+            <li>{t("modal.setupStep3")}</li>
+          </ol>
+          {preset.note && <div className="text-label" style={{ color: "var(--muted)", marginTop: 6, fontStyle: "italic" }}>{preset.note}</div>}
+          {/\{[^}]*\}/.test(form.baseUrl) && (<div className="text-label" style={{ color: "var(--amber)", marginTop: 6 }}>{t("modal.baseUrlPlaceholderHint")}</div>)}
+        </details>
+      )}
+      <AddProviderField label={t("modal.providerName")}>
+        <input className="input" value={form.name} readOnly={isReservedForward} onChange={e => onFormChange({ ...form, name: e.target.value })} placeholder={t("modal.namePlaceholder")} />
+      </AddProviderField>
+      {dup && <div className="text-label" style={{ color: "var(--amber)" }}>{t("modal.duplicateWarn", { name: form.name.trim() })}</div>}
+      {!isReservedForward && <>
+        <AddProviderField label={t("modal.adapter")}>
+          <select className="input" value={form.adapter} onChange={e => onFormChange({ ...form, adapter: e.target.value })}>
+            {["openai-responses", "openai-chat", "anthropic", "google", "azure-openai", "cursor"].map(a => <option key={a} value={a}>{a}</option>)}
+          </select>
+        </AddProviderField>
+        {preset.baseUrlChoices && preset.baseUrlChoices.length > 0 ? (
+          <>
+            <AddProviderField label={t("modal.endpoint")}>
+              <select
+                className="input"
+                value={endpointChoice}
+                onChange={e => {
+                  const id = e.target.value;
+                  onEndpointChoiceChange(id);
+                  onFormChange({
+                    ...form,
+                    baseUrl: baseUrlForChoice(preset.baseUrlChoices, id, form.baseUrl),
+                  });
+                }}
+              >
+                {preset.baseUrlChoices.map(c => (
+                  <option key={c.id} value={c.id}>
+                    {c.id === "token-plan" ? t("modal.endpoint.tokenPlan")
+                      : c.id === "payg" ? t("modal.endpoint.payAsYouGo")
+                      : c.id === "custom" ? t("modal.endpoint.custom")
+                      : c.label}
+                  </option>
+                ))}
+              </select>
+            </AddProviderField>
+            {endpointChoice === "custom" && (
+              <AddProviderField label={t("modal.baseUrl")}>
+                <input
+                  className="input"
+                  value={form.baseUrl}
+                  onChange={e => onFormChange({ ...form, baseUrl: e.target.value })}
+                  placeholder={t("modal.baseUrlPlaceholder")}
+                />
+              </AddProviderField>
+            )}
+          </>
+        ) : (
+          <AddProviderField label={t("modal.baseUrl")}>
+            <input className="input" value={form.baseUrl} onChange={e => onFormChange({ ...form, baseUrl: e.target.value })} placeholder={t("modal.baseUrlPlaceholder")} />
+          </AddProviderField>
+        )}
+        {!isReservedForward && (
+          <label className="modal-field" style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <input type="checkbox" checked={form?.allowPrivateNetwork ?? false} onChange={e => onFormChange({ ...form, allowPrivateNetwork: e.target.checked })} />
+            <span className="muted text-control">{t("modal.allowPrivateNetwork")}</span>
+          </label>
+        )}
+        {!isReservedForward && (form?.allowPrivateNetwork ?? false) && (
+          <p className="muted text-hint">{t("modal.allowPrivateNetworkHint")}</p>
+        )}
+      </>}
+      {form.authMode === "forward" ? (
+        <div className="text-label" style={{ color: "var(--green)", background: "var(--green-soft)", border: "1px solid var(--green)", borderRadius: "var(--radius-sm)", padding: "8px 10px" }}>
+          {presetDescription(preset)}
+        </div>
+      ) : form.authMode === "local" ? (
+        <div className="text-label leading-relaxed" style={{ color: "var(--amber)", background: "var(--amber-soft)", border: "1px solid var(--amber)", borderRadius: "var(--radius-sm)", padding: "8px 10px" }}>
+          {t("modal.localHint")}
+        </div>
+      ) : preset.keyOptional ? (
+        <div className="text-label leading-relaxed" style={{ color: "var(--green)", background: "var(--green-soft)", border: "1px solid var(--green)", borderRadius: "var(--radius-sm)", padding: "10px 12px" }}>
+          <strong>{t("modal.freeTierTitle")}</strong> — {preset.note ?? t("modal.freeTierDefault")}
+        </div>
+      ) : (
+        <>
+          {preset.dashboardUrl && (
+            <a className="text-label" href={preset.dashboardUrl} target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
+              <IconKey style={{ width: 14, height: 14 }} />{t("modal.getApiKey", { label: preset.label })}<IconExternal style={{ width: 13, height: 13 }} />
+            </a>
+          )}
+          <AddProviderField label={t("modal.apiKey")}>
+            <input className="input" type="password" value={form.apiKey} onChange={e => onFormChange({ ...form, apiKey: e.target.value })} placeholder={t("modal.apiKeyPlaceholder")} />
+          </AddProviderField>
+        </>
+      )}
+      {!isReservedForward && <AddProviderField label={t("modal.defaultModel")}>
+        <input className="input" value={form.defaultModel} onChange={e => onFormChange({ ...form, defaultModel: e.target.value })} placeholder={t("modal.defaultModelPlaceholder")} />
+      </AddProviderField>}
+      {error && <div className="text-control" role="alert" style={{ color: "var(--red)" }}>{error}</div>}
+      <div style={{ display: "flex", gap: 8, marginTop: 4, alignItems: "center" }}>
+        <button type="button" className="btn btn-primary" onClick={onSubmit} disabled={saving}>{saving ? t("modal.adding") : t("modal.add")}</button>
+        {preset.auth === "oauth" && <button type="button" className="link-btn" onClick={onUseOauthLogin}>{t("modal.useOauthLogin")}</button>}
+        <div style={{ flex: 1 }} />
+        <button type="button" className="btn btn-ghost" onClick={onBack}>{t("modal.back")}</button>
+      </div>
+    </div>
+  );
+}

gui/src/components/add-provider-modal-field.tsx

@@ -0,0 +1,8 @@
+export function AddProviderField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label style={{ display: "block" }}>
+      <span className="field-label">{label}</span>
+      {children}
+    </label>
+  );
+}

gui/src/components/add-provider-modal-reducer.ts

@@ -0,0 +1,137 @@
+import type { CatalogPreset } from "./provider-catalog/provider-presets";
+import type { ProviderPayloadForm } from "../provider-payload";
+
+type Preset = CatalogPreset;
+type FormState = ProviderPayloadForm;
+
+export type AddProviderModalState = {
+  preset: Preset | null;
+  form: FormState | null;
+  saving: boolean;
+  error: string;
+  oauthBusy: boolean;
+  oauthMsg: string;
+  oauthMsgTone: "ok" | "warn";
+  manualCode: string;
+  manualCodeBusy: boolean;
+  manualCodeMsg: string;
+  manualCodeOk: boolean;
+  endpointChoice: string;
+  oauthTosPending: string | null;
+};
+
+export type AddProviderModalAction =
+  | { type: "choose-preset"; preset: Preset; form: FormState; endpointChoice: string }
+  | { type: "back" }
+  | { type: "set-form"; form: FormState }
+  | { type: "set-endpoint-choice"; choice: string }
+  | { type: "set-saving"; saving: boolean }
+  | { type: "set-error"; error: string }
+  | { type: "set-oauth-busy"; busy: boolean }
+  | { type: "set-oauth-msg"; msg: string; tone?: "ok" | "warn" }
+  | { type: "set-oauth-tone"; tone: "ok" | "warn" }
+  | { type: "set-manual-code"; code: string }
+  | { type: "set-manual-code-busy"; busy: boolean }
+  | { type: "set-manual-code-msg"; msg: string; ok?: boolean }
+  | { type: "set-oauth-tos-pending"; providerId: string | null }
+  | { type: "use-oauth-login"; form: FormState }
+  | { type: "use-api-key-instead"; form: FormState };
+
+export function createInitialAddProviderState(
+  initialCustom: boolean,
+  customLabel: string,
+): AddProviderModalState {
+  const customPreset: Preset = {
+    id: "custom",
+    label: customLabel,
+    adapter: "openai-chat",
+    baseUrl: "",
+    auth: "key",
+  };
+  return {
+    preset: initialCustom ? customPreset : null,
+    form: initialCustom
+      ? { name: "", adapter: "openai-chat", baseUrl: "", authMode: "key", apiKey: "", defaultModel: "", allowPrivateNetwork: false }
+      : null,
+    saving: false,
+    error: "",
+    oauthBusy: false,
+    oauthMsg: "",
+    oauthMsgTone: "ok",
+    manualCode: "",
+    manualCodeBusy: false,
+    manualCodeMsg: "",
+    manualCodeOk: true,
+    endpointChoice: "custom",
+    oauthTosPending: null,
+  };
+}
+
+export function addProviderModalReducer(
+  state: AddProviderModalState,
+  action: AddProviderModalAction,
+): AddProviderModalState {
+  switch (action.type) {
+    case "choose-preset":
+      return {
+        ...state,
+        preset: action.preset,
+        form: action.form,
+        endpointChoice: action.endpointChoice,
+        error: "",
+        oauthMsg: "",
+        oauthMsgTone: "ok",
+        manualCode: "",
+        manualCodeMsg: "",
+        manualCodeOk: true,
+      };
+    case "back":
+      return {
+        ...state,
+        preset: null,
+        form: null,
+        endpointChoice: "custom",
+        error: "",
+        oauthMsg: "",
+        oauthMsgTone: "ok",
+        manualCode: "",
+        manualCodeMsg: "",
+        manualCodeOk: true,
+      };
+    case "set-form":
+      return { ...state, form: action.form };
+    case "set-endpoint-choice":
+      return { ...state, endpointChoice: action.choice };
+    case "set-saving":
+      return { ...state, saving: action.saving };
+    case "set-error":
+      return { ...state, error: action.error };
+    case "set-oauth-busy":
+      return { ...state, oauthBusy: action.busy };
+    case "set-oauth-msg":
+      return { ...state, oauthMsg: action.msg, oauthMsgTone: action.tone ?? state.oauthMsgTone };
+    case "set-oauth-tone":
+      return { ...state, oauthMsgTone: action.tone };
+    case "set-manual-code":
+      return { ...state, manualCode: action.code };
+    case "set-manual-code-busy":
+      return { ...state, manualCodeBusy: action.busy };
+    case "set-manual-code-msg":
+      return { ...state, manualCodeMsg: action.msg, manualCodeOk: action.ok ?? state.manualCodeOk };
+    case "set-oauth-tos-pending":
+      return { ...state, oauthTosPending: action.providerId };
+    case "use-oauth-login":
+      return { ...state, form: action.form, error: "" };
+    case "use-api-key-instead":
+      return {
+        ...state,
+        form: action.form,
+        oauthMsg: "",
+        oauthMsgTone: "ok",
+        manualCode: "",
+        manualCodeMsg: "",
+      };
+    default:
+      return state;
+  }
+}