zidane-ui 9.1.1 → 9.1.3

package/src/settings/sections/providers/ProvidersSection.tsx

@@ -1,389 +0,0 @@
-/**
- * Settings › Accounts, over the settings host's `providers`: every provider
- * with its sign-in state, and what the host lets the user do with it (paste
- * or replace an API key, fill a provider's configuration fields, clear its
- * credentials, sign in through the browser, add a second OAuth account,
- * pick, rename, re-auth or remove one of several stored credentials).
- *
- * Each provider runs its own browser sign-in (`useSignIn`), so several can
- * run at once, each with its own state, Cancel and Retry; leaving the
- * screen cancels the ones still running.
- */
-import { useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { providerBrand } from 'zidane/chat/pure';
-
-import { BrandMark } from '../../../components/BrandMark';
-import { BrowserSignIn } from '../../../components/BrowserSignIn';
-import { BTN_DANGER, BTN_PRIMARY, BTN_SECONDARY } from '../../../components/button';
-import type { ConfirmOptions } from '../../../components/ConfirmDialog';
-import { INPUT_CLASS, MetaChip } from '../../../components/Form';
-import { constant, useReadable } from '../../../chat/headless/store';
-import { useSignIn } from '../../../onboarding/useSignIn';
-import { toSettingsError, type SettingsError } from '../../headless/host';
-import {
-  hasCredentialChoice,
-  type SettingsProvider,
-  type SettingsProvidersHost,
-  type SettingsSignInOptions,
-} from '../../headless/providers';
-import { SettingsPanel, SettingsPanelBody } from '../../section';
-import { useSettingsHost } from '../../SettingsProvider';
-import { useSettingsResource } from '../shared/catalog';
-import { useSectionLabels } from '../use-section-labels';
-import { CredentialSources } from './CredentialSources';
-import { DEFAULT_ACCOUNTS_SECTION_LABELS, type AccountsSectionLabels } from './labels';
-
-/** The Accounts sections' strings, overridable through `LabelsProvider`. */
-export function useAccountsSectionLabels(): AccountsSectionLabels {
-  return useSectionLabels(DEFAULT_ACCOUNTS_SECTION_LABELS);
-}
-
-/** Asks the user to confirm; resolves with the answer. */
-export type AccountsConfirm = (options: ConfirmOptions) => Promise<boolean>;
-
-const ALWAYS = constant(true);
-const YES: AccountsConfirm = async () => true;
-const NO_PROVIDERS: readonly SettingsProvider[] = [];
-
-/** Props for {@link ProvidersSection}. */
-export interface ProvidersSectionProps {
-  /** The folder whose extension providers count. `null` or absent: built-ins only. */
-  cwd?: string | null;
-  /** Above the list (an app's tutorial card). */
-  intro?: ReactNode;
-  /** Asks before Clear and Remove. Default: no question. */
-  confirm?: AccountsConfirm;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the providers of the nearest `SettingsProvider`'s host (`providers`). Without it the list is
- * empty; without an action, its control is hidden; a connection that may not write (`writable`) shows
- * no action.
- *
- * @param props - The `cwd`, an `intro`, `confirm`, `className` and `style`.
- */
-export function ProvidersSection({ cwd, intro, confirm = YES, className, style }: ProvidersSectionProps) {
-  const host = useSettingsHost();
-  const providers = host.providers;
-  const writable = useReadable(host.writable ?? ALWAYS);
-  const l = useAccountsSectionLabels();
-  const folder = cwd ?? '';
-  const resource = useMemo(() => providers?.list(folder) ?? null, [providers, folder]);
-  const load = useSettingsResource(resource);
-  const statuses = load.data ?? NO_PROVIDERS;
-
-  return (
-    <SettingsPanel className={className} style={style}>
-      <SettingsPanelBody>
-        {intro}
-        <ul className="zg-tray rounded-zg-lg flex flex-col gap-1.5 list-none m-0 p-1.5">
-          {providers &&
-            statuses.map((status) => (
-              <ProviderRow
-                key={status.key}
-                status={status}
-                cwd={folder}
-                host={providers}
-                writable={writable}
-                labels={l}
-                confirm={confirm}
-              />
-            ))}
-        </ul>
-        {load.error && <div className="mt-3 text-xs text-zg-danger">{l.accountsError(load.error)}</div>}
-      </SettingsPanelBody>
-    </SettingsPanel>
-  );
-}
-
-interface ProviderRowProps {
-  status: SettingsProvider;
-  cwd: string;
-  host: SettingsProvidersHost;
-  writable: boolean;
-  labels: AccountsSectionLabels;
-  confirm: AccountsConfirm;
-}
-
-function ProviderRow({ status, cwd, host, writable, labels: l, confirm }: ProviderRowProps) {
-  const [editing, setEditing] = useState(false);
-  const [value, setValue] = useState('');
-  const [fieldValues, setFieldValues] = useState<Record<string, string>>({});
-  const [busy, setBusy] = useState<'setting' | 'clearing' | null>(null);
-  const [rowError, setRowError] = useState<SettingsError | null>(null);
-  /*
-   * "Add account" opens a one-field prompt for the account's name before the
-   * browser flow starts. Only shown once the provider already holds an OAuth
-   * account: the first sign-in goes straight to the browser and is stored
-   * under the default name. A second account exists to be told apart from
-   * the first, so here the name is required.
-   */
-  const [namingAccount, setNamingAccount] = useState(false);
-  const [accountName, setAccountName] = useState('');
-  const trimmedAccountName = accountName.trim();
-  const signIn = useSignIn();
-  // What the sign-in was started with (account name, re-auth target): Retry reuses it.
-  const lastOptions = useRef<SettingsSignInOptions | undefined>(undefined);
-  // A finished sign-in leaves the row; the list shows the account.
-  const flow = signIn.state && signIn.state.kind !== 'done' ? signIn.state : null;
-
-  const startSignIn = (options?: SettingsSignInOptions) => {
-    if (!host.signIn) return;
-    lastOptions.current = options;
-    signIn.start(() => host.signIn!(status.key, options));
-  };
-
-  const startNamedAccount = () => {
-    if (!trimmedAccountName) return;
-    setNamingAccount(false);
-    startSignIn({ label: trimmedAccountName });
-  };
-
-  const customFields = status.customFields ?? [];
-  const hasCustomFields = customFields.length > 0;
-  const { available, hasApiKey, hasOAuth } = status;
-  const canSignIn = writable && status.oauth && host.signIn !== undefined;
-  const canEdit = writable && (hasCustomFields ? host.configure !== undefined : host.setApiKey !== undefined);
-  const canClear = writable && host.clear !== undefined;
-  const hasConfiguration = hasCustomFields && available;
-  const signInWith = status.signInLabel ?? status.label;
-  const keyPlaceholder = status.apiKeyPlaceholder ?? l.accountsKeyPlaceholder;
-  const description = status.description ?? (status.extension ? l.accountsFromExtension : '');
-
-  const startEditing = () => {
-    setRowError(null);
-    setValue('');
-    setFieldValues({ ...status.configuredFields });
-    setEditing(true);
-  };
-
-  const cancelEditing = () => {
-    setEditing(false);
-    setValue('');
-    setFieldValues({});
-  };
-
-  const requiredCustomFieldsSatisfied = customFields.every(
-    (field) => !field.required || Boolean((fieldValues[field.key] ?? '').trim()),
-  );
-
-  const save = async () => {
-    if (!hasCustomFields && !value.trim()) return;
-    try {
-      setRowError(null);
-      setBusy('setting');
-      if (hasCustomFields) await host.configure!(cwd, status.key, fieldValues);
-      else await host.setApiKey!(cwd, status.key, value.trim());
-      setValue('');
-      setEditing(false);
-      setFieldValues({});
-    } catch (err) {
-      setRowError(toSettingsError(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const clear = async () => {
-    if (
-      !(await confirm({
-        title: l.accountsClearConfirm(status.label),
-        confirmLabel: l.accountsClear,
-        destructive: true,
-      }))
-    ) {
-      return;
-    }
-    try {
-      setRowError(null);
-      setBusy('clearing');
-      await host.clear!(cwd, status.key);
-    } catch (err) {
-      setRowError(toSettingsError(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  return (
-    <li className="zg-raised border rounded-zg-md p-3">
-      <div className="flex items-start gap-3">
-        <BrandMark brand={providerBrand(status.key)} label={status.label} className="shrink-0" />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-1.5 flex-wrap">
-            <div className="text-sm font-medium text-[var(--zg-text)] mr-0.5">{status.label}</div>
-            <span
-              className={`inline-block w-2 h-2 rounded-full shrink-0 mr-0.5 ${available ? 'bg-zg-success-dot' : 'bg-[var(--zg-border-strong)]'}`}
-              role="img"
-              aria-label={available ? l.accountsAuthenticated : l.accountsNotAuthenticated}
-              title={available ? l.accountsAuthenticated : l.accountsNotAuthenticated}
-            />
-            {hasConfiguration && <MetaChip>{l.accountsConfigured}</MetaChip>}
-            {hasApiKey && !hasConfiguration && <MetaChip>{l.accountsApiKeyChip}</MetaChip>}
-            {hasOAuth && <MetaChip>{l.accountsOAuthChip}</MetaChip>}
-          </div>
-          {description && <div className="text-xs text-[var(--zg-text-muted)] mt-0.5">{description}</div>}
-        </div>
-
-        {!editing && !namingAccount && canSignIn && !flow && (
-          <button
-            type="button"
-            onClick={() => {
-              if (hasOAuth) {
-                setRowError(null);
-                setAccountName('');
-                setNamingAccount(true);
-              } else {
-                startSignIn();
-              }
-            }}
-            className={BTN_PRIMARY}
-          >
-            {hasOAuth ? l.accountsAddAccount : l.accountsSignInWith(signInWith)}
-          </button>
-        )}
-        {!editing && canEdit && (
-          <button type="button" onClick={startEditing} className={BTN_SECONDARY}>
-            {hasCustomFields
-              ? available
-                ? l.accountsEditConfig
-                : l.accountsConfigure
-              : hasApiKey
-                ? l.accountsReplaceKey
-                : l.accountsSetKey}
-          </button>
-        )}
-        {!editing && available && canClear && (
-          <button type="button" onClick={clear} disabled={busy === 'clearing'} className={BTN_DANGER}>
-            {busy === 'clearing' ? l.accountsClearing : l.accountsClear}
-          </button>
-        )}
-      </div>
-
-      {flow && (
-        <BrowserSignIn
-          className="mt-3"
-          state={flow}
-          service={signInWith}
-          onCancel={signIn.cancel}
-          onRetry={() => startSignIn(lastOptions.current)}
-          {...(signIn.submit ? { onSubmit: signIn.submit } : {})}
-        />
-      )}
-
-      {namingAccount && !flow && (
-        <div className="mt-3 flex items-center gap-2">
-          <input
-            autoFocus
-            type="text"
-            placeholder={l.accountsAccountNamePlaceholder}
-            value={accountName}
-            onChange={(e) => setAccountName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') startNamedAccount();
-              if (e.key === 'Escape') setNamingAccount(false);
-            }}
-            aria-label={l.accountsAccountName}
-            className={`${INPUT_CLASS} flex-1 !w-auto`}
-          />
-          <button type="button" disabled={!trimmedAccountName} onClick={startNamedAccount} className={BTN_PRIMARY}>
-            {l.accountsSignIn}
-          </button>
-          <button type="button" onClick={() => setNamingAccount(false)} className={BTN_SECONDARY}>
-            {l.accountsCancel}
-          </button>
-        </div>
-      )}
-
-      {editing &&
-        (hasCustomFields ? (
-          <div className="mt-3 space-y-3">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              {customFields.map((field, index) => {
-                const valueForField = fieldValues[field.key] ?? '';
-                const placeholder =
-                  field.secret && available ? l.accountsKeepSecret : field.placeholder || keyPlaceholder;
-
-                return (
-                  <label key={field.key} className="flex flex-col gap-1">
-                    <span className="text-xs text-[var(--zg-text-muted)]">
-                      {field.label}
-                      {field.required ? l.accountsRequired : ''}
-                    </span>
-                    <input
-                      autoFocus={index === 0}
-                      type={field.secret ? 'password' : 'text'}
-                      placeholder={placeholder}
-                      value={valueForField}
-                      onChange={(e) => setFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                      onKeyDown={(e) => {
-                        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') void save();
-                        if (e.key === 'Escape') cancelEditing();
-                      }}
-                      className={`${INPUT_CLASS} font-mono`}
-                    />
-                    {field.hint && (
-                      <span className="text-zg-meta leading-snug text-[var(--zg-text-muted)]">{field.hint}</span>
-                    )}
-                  </label>
-                );
-              })}
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                disabled={!requiredCustomFieldsSatisfied || busy === 'setting'}
-                onClick={save}
-                className={BTN_PRIMARY}
-              >
-                {busy === 'setting' ? l.accountsSaving : l.accountsSaveConfig}
-              </button>
-              <button type="button" onClick={cancelEditing} className={BTN_SECONDARY}>
-                {l.accountsCancel}
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="mt-3 flex items-center gap-2">
-            <input
-              autoFocus
-              type="password"
-              placeholder={keyPlaceholder}
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') void save();
-                if (e.key === 'Escape') cancelEditing();
-              }}
-              aria-label={l.accountsKeyField(status.label)}
-              className={`${INPUT_CLASS} flex-1 !w-auto font-mono`}
-            />
-            <button type="button" disabled={!value.trim() || busy === 'setting'} onClick={save} className={BTN_PRIMARY}>
-              {busy === 'setting' ? l.accountsSaving : l.accountsSave}
-            </button>
-            <button type="button" onClick={cancelEditing} className={BTN_SECONDARY}>
-              {l.accountsCancel}
-            </button>
-          </div>
-        ))}
-
-      {hasCredentialChoice(status) && (
-        <CredentialSources
-          provider={status}
-          cwd={cwd}
-          host={writable ? host : { list: host.list }}
-          labels={l}
-          confirm={confirm}
-          onError={setRowError}
-          onReauth={canSignIn && !flow ? startSignIn : undefined}
-        />
-      )}
-
-      {rowError && <div className="mt-2 text-xs text-zg-danger">{l.accountsError(rowError)}</div>}
-    </li>
-  );
-}

package/src/settings/sections/providers/ServerProvidersSection.tsx

@@ -1,244 +0,0 @@
-/**
- * Settings › Accounts of a server's session, over the settings host's
- * `providers` (that server's): its providers as its agents use them, never
- * a secret. An API key can be stored there (typed masked), an OAuth account
- * signed in (the browser here, the tokens there: `ServerSignIn`), or a
- * stored credential removed; a key the server only has from its environment
- * is left alone. With more than one stored, they are its credential sources
- * (`CredentialSources`: the one in use picked, an OAuth account renamed).
- */
-import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { BTN_DANGER, BTN_PRIMARY, BTN_SECONDARY } from '../../../components/button';
-import { ErrorNote, FormCard, FormSection, INPUT_CLASS, MetaChip, OpLine, RowText } from '../../../components/Form';
-import { constant, useReadable } from '../../../chat/headless/store';
-import { toSettingsError, type SettingsError } from '../../headless/host';
-import { hasCredentialChoice, type SettingsProvider, type SettingsProvidersHost } from '../../headless/providers';
-import { SettingsPanel, SettingsPanelBody } from '../../section';
-import { useSettingsHost } from '../../SettingsProvider';
-import { useSettingsResource } from '../shared/catalog';
-import { CredentialSources } from './CredentialSources';
-import type { AccountsSectionLabels } from './labels';
-import { useAccountsSectionLabels } from './ProvidersSection';
-import { ServerSignIn } from './ServerSignIn';
-
-const ALWAYS = constant(true);
-const YES = async () => true;
-
-/** Props for {@link ServerProvidersSection}. */
-export interface ServerProvidersSectionProps {
-  /** The server's name, for the lines. */
-  hostName: string;
-  /** Above the list (an app's tutorial card), as on This computer's Accounts. */
-  intro?: ReactNode;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the providers of the nearest `SettingsProvider`'s host (`providers`) as a server's cards: Set API
- * key needs `setApiKey`, Sign in `signIn`, Remove `remove`; a connection that may not write (`writable`)
- * shows none of them.
- *
- * @param props - The `hostName`, an `intro`, `className` and `style`.
- */
-export function ServerProvidersSection({ hostName, intro, className, style }: ServerProvidersSectionProps) {
-  const host = useSettingsHost();
-  const providers = host.providers;
-  const writable = useReadable(host.writable ?? ALWAYS);
-  const l = useAccountsSectionLabels();
-  const resource = useMemo(() => providers?.list('') ?? null, [providers]);
-  const load = useSettingsResource(resource);
-  const list = load.data;
-
-  return (
-    <SettingsPanel className={className} style={style}>
-      <SettingsPanelBody>
-        {intro}
-        <div className="space-y-4">
-          {load.error && <ErrorNote>{l.accountsServerReadFailed(hostName, l.accountsError(load.error))}</ErrorNote>}
-          {!list && !load.error && <OpLine kind="busy">{l.accountsServerReading(hostName)}</OpLine>}
-          {list && providers && (
-            <FormSection layout="cards">
-              {list.map((provider) => (
-                <ProviderCard
-                  key={provider.key}
-                  host={providers}
-                  hostName={hostName}
-                  provider={provider}
-                  writable={writable}
-                  labels={l}
-                />
-              ))}
-            </FormSection>
-          )}
-        </div>
-      </SettingsPanelBody>
-    </SettingsPanel>
-  );
-}
-
-function ProviderCard({
-  host,
-  hostName,
-  provider,
-  writable,
-  labels: l,
-}: {
-  host: SettingsProvidersHost;
-  hostName: string;
-  provider: SettingsProvider;
-  writable: boolean;
-  labels: AccountsSectionLabels;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [signingIn, setSigningIn] = useState(false);
-  const [key, setKey] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<SettingsError | null>(null);
-  const { setApiKey, remove, signIn } = host;
-
-  // The typed key is a secret: it doesn't outlive the form.
-  const closeForm = () => {
-    setEditing(false);
-    setKey('');
-  };
-
-  const run = async (op: () => Promise<void>) => {
-    setBusy(true);
-    setError(null);
-    try {
-      // The provider's card shows the new state: no line needed.
-      await op();
-      closeForm();
-    } catch (err) {
-      setError(toSettingsError(err));
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const stored = provider.methods.filter((method) => method.key && method.source !== 'env');
-
-  return (
-    <FormCard data-testid={`host-auth-${provider.key}`}>
-      <div className="flex items-center gap-3 px-3 py-2.5">
-        <RowText
-          label={
-            <span className="inline-flex items-center gap-2">
-              {provider.label}
-              <MetaChip tone={provider.available ? 'muted' : 'danger'}>
-                {provider.available ? l.accountsServerConfigured : l.accountsServerNotConfigured}
-              </MetaChip>
-            </span>
-          }
-          truncate={false}
-          description={
-            provider.methods.length > 0 ? (
-              <span className="flex flex-wrap gap-1 mt-0.5">
-                {provider.methods.map((method) => (
-                  <MetaChip key={`${method.source}:${method.key ?? method.detail}`}>{method.detail}</MetaChip>
-                ))}
-              </span>
-            ) : undefined
-          }
-        />
-        {writable && signIn && provider.oauth && !signingIn && (
-          <button type="button" className={BTN_SECONDARY} onClick={() => setSigningIn(true)}>
-            {l.accountsSignIn}
-          </button>
-        )}
-        {writable && setApiKey && !editing && (
-          <button type="button" className={BTN_SECONDARY} onClick={() => setEditing(true)}>
-            {l.accountsServerSetKey}
-          </button>
-        )}
-      </div>
-      {editing && setApiKey && (
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape closes the key form, not a modal around it
-        <form
-          className="flex items-center gap-2 px-3 pb-2.5"
-          onKeyDown={(event) => {
-            // Escape closes the key form, not a modal around it.
-            if (event.key !== 'Escape') return;
-            event.stopPropagation();
-            closeForm();
-          }}
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (busy || !key.trim()) return;
-            void run(() => setApiKey('', provider.key, key));
-          }}
-        >
-          <input
-            type="password"
-            autoComplete="off"
-            aria-label={l.accountsKeyField(provider.label)}
-            className={INPUT_CLASS}
-            value={key}
-            autoFocus
-            onChange={(event) => setKey(event.target.value)}
-          />
-          <button type="submit" className={BTN_PRIMARY} disabled={busy || !key.trim()}>
-            {l.accountsSave}
-          </button>
-          <button type="button" className={BTN_SECONDARY} onClick={closeForm}>
-            {l.accountsCancel}
-          </button>
-        </form>
-      )}
-      {hasCredentialChoice(provider) && (
-        <div className="px-3 pb-2.5">
-          <CredentialSources
-            provider={provider}
-            cwd=""
-            host={writable ? host : { list: host.list }}
-            labels={l}
-            confirm={YES}
-            onError={setError}
-          />
-        </div>
-      )}
-      {stored.length > 0 && !hasCredentialChoice(provider) && (
-        <ul className="m-0 list-none px-3 pb-2.5 space-y-1">
-          {stored.map((method) => (
-            <li key={method.key} className="flex items-center gap-2 text-xs text-[var(--zg-text-muted)]">
-              <span className="flex-1 min-w-0 flex items-center gap-1.5">
-                <span className="truncate">
-                  {method.source === 'oauth' ? l.accountsServerOAuth(method.label) : l.accountsServerApiKey}
-                </span>
-                {method.active && <MetaChip tone="accent">{l.accountsServerActive}</MetaChip>}
-                <MetaChip>{method.detail}</MetaChip>
-              </span>
-              {writable && remove && (
-                <button
-                  type="button"
-                  className={BTN_DANGER}
-                  disabled={busy}
-                  onClick={() => void run(() => remove('', provider.key, method.key!))}
-                >
-                  {l.accountsRemove}
-                </button>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
-      {signingIn && signIn && (
-        <ServerSignIn
-          begin={() => signIn(provider.key)}
-          hostName={hostName}
-          label={provider.label}
-          onClose={() => setSigningIn(false)}
-        />
-      )}
-      {error && (
-        <div className="px-3 pb-2.5">
-          <OpLine kind="error">{l.accountsError(error)}</OpLine>
-        </div>
-      )}
-    </FormCard>
-  );
-}