fix(web): recover provider credential lifecycle

2026-08-06 12:07:28 +08:00
parent 0865926c38
commit af652c949f
25 changed files with 400 additions and 144 deletions
--- a/packages/client/ui-models/src/client/ModelsSection.tsx
+++ b/packages/client/ui-models/src/client/ModelsSection.tsx
@@ -14,7 +14,7 @@ import type { ReactNode } from 'react'
 import type { IApiClient } from '@deepseek-ai/dsh-client-connection/client'
 import { Button, IconPlusOutline16, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
-import { messageOf } from './store.ts'
+import { deriveKeyRef, messageOf } from './store.ts'
 import type { ModelsSettingsState, ModelsSettingsStore, ProviderRow } from './store.ts'
 import { ProviderEditor } from './ProviderEditor.tsx'
 import type { en } from './locales.ts'
@@ -38,42 +38,53 @@ export interface ModelsSectionInjected {
 */
 export type ModelsSectionProps = Partial<ModelsSectionInjected>

-/** The editor target: an existing row or a dormant directory entry. */
-interface EditorTarget {
+/** Provider identity shared by row actions and confirmation copy. */
+export interface ProviderIdentity {
+  /** Stable provider route id. */
  provider: string
+  /** Human-facing provider name. */
  displayName: string
+}
+
+/** One existing row or dormant directory entry addressed by an editor action. */
+interface EditorTarget extends ProviderIdentity {
  settingsNs: string
  settingsPath: readonly string[]
+  /** Writable credential identified under this page's conventional reference. */
+  credentialRef?: string
 }

 /**
- * Remove one user-added provider profile by unsetting its path in the stored
- * user section, then reload. The removal names the profile rather than
- * rebuilding the section: this page only ever holds the redacted descriptor,
- * so a rebuilt section would drop every literal secret stored elsewhere in
- * the namespace along with the profile being removed.
- * @param api - settings wire face.
+ * Remove one user-added provider and its page-managed credential. Credential
+ * removal comes first so a second-step failure leaves the provider row visible
+ * and the whole operation safely retryable; both unsets are idempotent.
+ * The settings removal names the profile rather than rebuilding its redacted
+ * namespace, which would drop literal secrets stored elsewhere.
+ * @param api - settings and credential wire faces.
 * @param controller - the page store to refresh.
- * @param target - the provider's settings address.
+ * @param target - the provider's settings address and optional managed credential.
 * @returns the failure message, or undefined once the write and reload landed.
 */
 export async function removeProviderProfile(
-  api: Pick<IApiClient, 'settings'>,
+  api: Pick<IApiClient, 'settings' | 'credentials'>,
  controller: ModelsSettingsStore,
-  target: { settingsNs: string; settingsPath: readonly string[] },
+  target: { settingsNs: string; settingsPath: readonly string[]; credentialRef?: string },
 ): Promise<string | undefined> {
-  let response
  try {
-    response = await api.settings.mutate({
+    if (target.credentialRef !== undefined) {
+      const credential = await api.credentials.unset({ ref: target.credentialRef })
+      if (!credential.result.ok) return credential.result.error.message
+    }
+    const response = await api.settings.mutate({
      ns: target.settingsNs,
      ops: [{ op: 'unset', path: [...target.settingsPath] }],
    })
+    if (!response.result.ok) return response.result.error.message
  } catch (error) {
    // The transport rejected rather than answering; the caller must be able
-    // to say so instead of the row silently staying put.
+    // to retry the idempotent operation instead of the row silently staying.
    return messageOf(error)
  }
-  if (!response.result.ok) return response.result.error.message
  await controller.load()
  return undefined
 }
@@ -92,14 +103,33 @@ export function needsSetup(row: ProviderRow): boolean {
 }

 function targetOf(row: ProviderRow): EditorTarget {
+  const managedRef = deriveKeyRef(row.entry.provider)
+  const credentialRef = row.apiKeyEnv === managedRef
+    && row.credential?.configured === true
+    && row.credential.writable
+    ? managedRef
+    : undefined
  return {
    provider: row.entry.provider,
    displayName: row.entry.displayName,
    settingsNs: row.entry.settingsNs,
    settingsPath: row.entry.settingsPath,
+    ...credentialRef === undefined ? {} : { credentialRef },
  }
 }

+/** Stable visible and accessible identity for one provider target. */
+export function providerTargetLabel(target: ProviderIdentity): string {
+  return target.provider === target.displayName
+    ? target.provider
+    : `${target.displayName} (${target.provider})`
+}
+
+/** Replace the one provider placeholder in localized destructive-action copy. */
+export function providerCopy(template: string, target: ProviderIdentity): string {
+  return template.replace('{provider}', () => providerTargetLabel(target))
+}
+
 /**
 * Render the Models section content column.
 * @param props - slot-delivered injected dependencies.
@@ -118,6 +148,7 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
  const [adding, setAdding] = useState(false)
  const [deleteTarget, setDeleteTarget] = useState<EditorTarget | undefined>(undefined)
  const [deleting, setDeleting] = useState(false)
+  const [deleteFailure, setDeleteFailure] = useState<string | undefined>(undefined)

  const closeEditor = (changed: boolean): void => {
    setEditing(undefined)
@@ -128,16 +159,18 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
  const closeDelete = (): void => {
    if (deleting) return
    setDeleteTarget(undefined)
+    setDeleteFailure(undefined)
  }

  const confirmDelete = (): void => {
    /* v8 ignore next -- the action only renders with a target and is disabled while a deletion is pending */
    if (deleteTarget === undefined || deleting) return
    setDeleting(true)
+    setDeleteFailure(undefined)
    void removeProviderProfile(api, controller, deleteTarget)
      .then((failure) => {
        if (failure !== undefined) {
-          controller.fail(failure)
+          setDeleteFailure(failure)
          return
        }
        setDeleteTarget(undefined)
@@ -202,6 +235,7 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
                  <button
                    type="button"
                    className={styles['secondaryButton']}
+                    aria-label={providerCopy(t('editProvider'), target)}
                    onClick={() => { setAdding(false); setEditing(open ? undefined : target) }}
                  >
                    {t('edit')}
@@ -211,8 +245,9 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
                      <button
                        type="button"
                        className={styles['dangerButton']}
+                        aria-label={providerCopy(t('removeProvider'), target)}
                        disabled={!state.writable}
-                        onClick={() => { setDeleteTarget(target) }}
+                        onClick={() => { setDeleteFailure(undefined); setDeleteTarget(target) }}
                      >
                        {t('remove')}
                      </button>
@@ -296,9 +331,16 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
      <Modal
        open={deleteTarget !== undefined}
        onClose={closeDelete}
-        title={t('deleteTitle')}
+        title={deleteTarget === undefined ? '' : providerCopy(t('deleteTitle'), deleteTarget)}
        closeLabel={t('close')}
-        description={t('deleteDescription')}
+        description={deleteTarget === undefined
+          ? ''
+          : providerCopy(
+            deleteTarget.credentialRef === undefined
+              ? t('deleteDescription')
+              : t('deleteDescriptionWithCredential'),
+            deleteTarget,
+          )}
        className={styles['deleteDialog'] as string}
        footer={(
          <>
@@ -311,11 +353,15 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
              disabled={deleting}
              onClick={confirmDelete}
            >
-              {deleting ? t('deleting') : t('deleteConfirm')}
+              {deleteTarget === undefined
+                ? ''
+                : providerCopy(deleting ? t('deleting') : t('deleteConfirm'), deleteTarget)}
            </Button>
          </>
        )}
-      />
+      >
+        {deleteFailure === undefined ? null : <p className={styles['error']}>{deleteFailure}</p>}
+      </Modal>
    </div>
  )
 }
--- a/packages/client/ui-models/src/client/ProviderEditor.tsx
+++ b/packages/client/ui-models/src/client/ProviderEditor.tsx
@@ -3,7 +3,9 @@
 * field is a single write-only **API key** input (the page never asks for an
 * environment-variable name — a typed key stores through `credentials.set`
 * under the profile's reference, deriving `<ROUTE>_API_KEY` when the profile
- * has none, and the pi-ai profile records that derivation as `apiKeyEnv`);
+ * has none. The pi-ai profile records that derivation as `apiKeyEnv` only when
+ * a key is entered; a blank key materializes a reference-free profile for
+ * provider-native authentication);
 * the collapsed 自定义设置 area carries the per-family extras (`baseURL` for
 * both families, `reasoningEffort` for deepseek / `reasoning` for pi-ai, and
 * DeepSeek's id/name/context-window model catalog). Everything else stays
@@ -131,10 +133,13 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
  const [keyState, setKeyState] = useState<CredentialView | undefined>(undefined)
  const [busy, setBusy] = useState(false)
  const [failure, setFailure] = useState<string | undefined>(undefined)
-  // The revision this card opened at. A write carrying it is refused if
-  // anything else — another tab, an external edit of settings.yaml — moved the
-  // namespace meanwhile, instead of silently overwriting that change.
-  const [openedAt] = useState(() => namespace.revision)
+  // A settings success becomes the next retry baseline immediately. If the
+  // following credential write fails, retry sends only the credential instead
+  // of replaying the already-committed settings write with a stale revision.
+  const [committedOriginal, setCommittedOriginal] = useState<unknown>(
+    () => getPath(namespace.user, settingsPath),
+  )
+  const [expectedRevision, setExpectedRevision] = useState(() => namespace.revision)
  const root = useMemo(() => rehydrateSchema(namespace.schema), [namespace.schema])
  const node = useMemo(() => nodeAtPath(root, settingsPath), [root, settingsPath])
  const fallback = getPath(namespace.value, settingsPath)
@@ -176,11 +181,11 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
   */
  const applyOnce = async (): Promise<string | undefined> => {
    const ns = namespace.ns
-    const original = getPath(namespace.user, settingsPath)
-    // The pi-ai profile must name the reference the key stores under, so a
-    // dormant add (or a legacy profile without one) records the derivation.
+    const normalizedKey = keyDraft.trim()
+    // A pi-ai profile names the conventional reference only when this page is
+    // about to store a key. Otherwise the provider keeps its native auth path.
    const next = layout === 'pi-ai' && stringAt(draft, 'apiKeyEnv') === undefined
-      && stringAt(fallback, 'apiKeyEnv') === undefined
+      && stringAt(fallback, 'apiKeyEnv') === undefined && normalizedKey.length > 0
      ? setPath(draft, ['apiKeyEnv'], keyRef)
      : draft
    if (layout === 'deepseek') {
@@ -194,17 +199,25 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
      const sectionError = validateDraft(node, next)
      if (sectionError !== undefined) return sectionError
    }
-    const ops = pathOps(settingsPath, original, next)
+    const materializesNativeProfile = layout === 'pi-ai'
+      && fallback === undefined
+      && committedOriginal === undefined
+      && Object.keys(next).length === 0
+    const ops: SettingsPathOpView[] = materializesNativeProfile
+      ? [{ op: 'set', path: [...settingsPath], value: {} }]
+      : pathOps(settingsPath, committedOriginal, next)
    if (ops.length > 0) {
-      const response = await api.settings.mutate({ ns, ops, expectedRevision: openedAt })
+      const response = await api.settings.mutate({ ns, ops, expectedRevision })
      if (!response.result.ok) {
        return response.result.error.code === 'settings-conflict'
          ? t('conflict')
          : response.result.error.message
      }
+      setCommittedOriginal(getPath(response.result.value.user, settingsPath))
+      setExpectedRevision(response.result.value.revision)
    }
-    if (keyDraft.length > 0) {
-      const stored = await api.credentials.set({ ref: keyRef, value: keyDraft })
+    if (normalizedKey.length > 0) {
+      const stored = await api.credentials.set({ ref: keyRef, value: normalizedKey })
      if (!stored.result.ok) return stored.result.error.message
    }
    setKeyDraft('')
@@ -263,6 +276,11 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
    const models = modelDrafts(modelsOverridden ? customModels : inheritedModels())
    const defaultContextWindow = getPath(fallback, ['defaultContextWindow'])
    const defaultMaxTokens = getPath(fallback, ['maxTokens'])
+    const keyPlaceholder = keyLocked
+      ? t('keyEnvLocked')
+      : keyState?.configured === true
+        ? t('keyStored')
+        : family === 'pi-ai' ? t('keyPlaceholderNative') : t('keyPlaceholder')
    return (
      <>
        <div className={styles['field']}>
@@ -272,9 +290,7 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
            type="password"
            autoComplete="off"
            value={keyDraft}
-            placeholder={keyLocked
-              ? t('keyEnvLocked')
-              : keyState?.configured === true ? t('keyStored') : t('keyPlaceholder')}
+            placeholder={keyPlaceholder}
            aria-label={t('keyInput')}
            disabled={disabled || keyLocked}
            onChange={(event) => { setKeyDraft(event.target.value) }}
--- a/packages/client/ui-models/src/client/locales.ts
+++ b/packages/client/ui-models/src/client/locales.ts
@@ -6,11 +6,14 @@ export const en = {
  title: 'Models',
  intro: 'Enter your API keys to use models from the following providers.',
  edit: 'Edit',
+  editProvider: 'Edit {provider}',
  remove: 'Delete',
-  deleteTitle: 'Delete model provider?',
-  deleteDescription: 'Deleting this model provider removes its configuration. You will not be able to use its models until you add the provider again.',
-  deleteConfirm: 'Delete provider',
-  deleting: 'Deleting provider…',
+  removeProvider: 'Delete {provider}',
+  deleteTitle: 'Delete {provider}?',
+  deleteDescription: 'Deleting {provider} removes its configuration. Its credential is managed elsewhere and will be kept.',
+  deleteDescriptionWithCredential: 'Deleting {provider} removes its configuration and stored API key.',
+  deleteConfirm: 'Delete {provider}',
+  deleting: 'Deleting {provider}…',
  add: 'Add provider',
  provider: 'Provider',
  close: 'Close',
@@ -23,6 +26,7 @@ export const en = {
  retry: 'Retry',
  keyInput: 'API key',
  keyPlaceholder: 'Enter your API key',
+  keyPlaceholderNative: 'Enter an API key, or leave blank to use environment authentication',
  keyStored: 'Configured — enter a new value to replace',
  keyEnvLocked: 'Provided by the launch environment (read-only)',
  customized: 'Customized settings',
@@ -67,11 +71,14 @@ export const zh: typeof en = {
  title: '模型',
  intro: '填入各提供方的 API 密钥即可使用其模型。',
  edit: '编辑',
+  editProvider: '编辑 {provider}',
  remove: '删除',
-  deleteTitle: '删除模型提供方？',
-  deleteDescription: '删除此模型提供方会移除其配置。在重新添加前，你将无法继续使用其模型。',
-  deleteConfirm: '删除提供方',
-  deleting: '正在删除提供方…',
+  removeProvider: '删除 {provider}',
+  deleteTitle: '删除 {provider}？',
+  deleteDescription: '删除 {provider} 会移除其配置；凭证由其他位置管理，将会保留。',
+  deleteDescriptionWithCredential: '删除 {provider} 会移除其配置和存储的 API 密钥。',
+  deleteConfirm: '删除 {provider}',
+  deleting: '正在删除 {provider}…',
  add: '添加提供方',
  provider: '提供方',
  close: '关闭',
@@ -84,6 +91,7 @@ export const zh: typeof en = {
  retry: '重试',
  keyInput: 'API 密钥',
  keyPlaceholder: '输入 API 密钥',
+  keyPlaceholderNative: '输入 API 密钥，或留空使用环境认证',
  keyStored: '已配置——输入新值可替换',
  keyEnvLocked: '由启动环境提供（只读）',
  customized: '自定义设置',
--- a/packages/client/ui-models/src/client/store.ts
+++ b/packages/client/ui-models/src/client/store.ts
@@ -103,18 +103,6 @@ export class ModelsSettingsStore {
   */
  constructor(private readonly api: Pick<IApiClient, 'settings' | 'credentials' | 'llm'>) {}

-  /**
-   * Surface a failure from an operation the page ran outside {@link load} —
-   * a row removal — on the same banner a load failure uses.
-   * @param message - the failure text to show.
-   */
-  fail(message: string): void {
-    this.store.update((s) => {
-      s.status = 'error'
-      s.error = message
-    })
-  }
-
  /**
   * Refresh the whole page snapshot: directory and namespaces in parallel,
   * then one batched credential describe over every referenced ref. A