zidane-ui 0.0.0-stage → 9.0.2

package/src/onboarding/steps/ReadyStep.tsx

@@ -0,0 +1,278 @@
+/**
+ * Ready: what the run set, each line with a way back to its step. Below it
+ * come the imports and installs that run in the background, with Retry and
+ * the browser sign-in that a connector still needs. The recap names the
+ * picks, not counts, so one glance confirms them.
+ */
+import { Fragment, useEffect, useState, type ReactNode } from 'react';
+import {
+  APPROVAL_MODE_OPTIONS,
+  connectorById,
+  nativeExtensionByName,
+  onboardingImportParts,
+  onboardingSwitchedFeatures,
+  TRANSCRIPT_PRESETS,
+  transcriptPresetOf,
+  type OnboardingFlowState,
+  type OnboardingProvider,
+  type OnboardingStepId,
+  type OnboardingTask,
+} from 'zidane/chat/pure';
+
+import { constant, useReadable } from '../../chat/headless/store';
+import { BrandMark } from '../../components/BrandMark';
+import { BrowserSignIn } from '../../components/BrowserSignIn';
+import { buttonClass } from '../../components/button';
+import { presetFor } from '../../theme/accents';
+import type { Theme } from '../../theme/themes';
+import type { OnboardingAppIcon, OnboardingModelInfo } from '../headless/host';
+import type { OnboardingLabels } from '../headless/labels';
+import { ExtensionMark, ProviderMark } from '../marks';
+import { useOnboarding, useOnboardingLabels } from '../OnboardingProvider';
+import { OnboardingStepFrame } from '../OnboardingStepFrame';
+import { useSignIn } from '../useSignIn';
+import { StepSection } from './StepSection';
+import { TaskChip } from './tasks';
+
+const NO_THEMES = constant<readonly Theme[]>([]);
+const NO_ICONS = constant<readonly OnboardingAppIcon[]>([]);
+
+interface RecapInput {
+  state: OnboardingFlowState;
+  providers: readonly OnboardingProvider[];
+  models: readonly OnboardingModelInfo[];
+  themes: readonly Theme[];
+  icons: readonly OnboardingAppIcon[];
+  labels: OnboardingLabels;
+}
+
+function list(names: readonly string[], labels: OnboardingLabels): string {
+  return names.length > 0 ? names.join(', ') : labels.recapNone;
+}
+
+/** A name with its small logo before it. */
+interface Marked {
+  key: string;
+  label: string;
+  mark: ReactNode;
+}
+
+/** Names with their logos, joined like {@link list}. */
+function marked(items: readonly Marked[], labels: OnboardingLabels): ReactNode {
+  if (items.length === 0) return labels.recapNone;
+  return items.map((item, i) => (
+    <Fragment key={item.key}>
+      {i > 0 && ', '}
+      <span className="inline-flex items-center gap-1.5 align-middle">
+        {item.mark}
+        {item.label}
+      </span>
+    </Fragment>
+  ));
+}
+
+function recapOf(
+  step: OnboardingStepId,
+  { state, providers, models, themes, icons, labels }: RecapInput,
+): ReactNode | null {
+  const { draft } = state;
+  switch (step) {
+    case 'connect': {
+      const provider = providers.find((p) => p.key === draft.provider?.key);
+      if (!provider) return labels.recapNone;
+      const model = models.find((m) => m.id === draft.provider?.model)?.label ?? draft.provider?.model;
+      return (
+        <span className="inline-flex items-center gap-1.5 align-middle">
+          <ProviderMark provider={provider} size="sm" />
+          {labels.recapProvider(provider.label, model)}
+        </span>
+      );
+    }
+    case 'import':
+      return list(onboardingImportParts(draft.imports, labels), labels);
+    case 'connectors':
+      return marked(
+        draft.connectors.map((id) => {
+          const entry = connectorById(id);
+          const label = entry?.label ?? id;
+          return { key: id, label, mark: <BrandMark brand={entry?.brand} label={label} size="sm" /> };
+        }),
+        labels,
+      );
+    case 'skills':
+      return list(
+        draft.skills.map((pick) => pick.name),
+        labels,
+      );
+    case 'extensions':
+      return marked(
+        draft.extensions.map((name) => {
+          const entry = nativeExtensionByName(name) ?? { name, label: name };
+          return { key: name, label: entry.label, mark: <ExtensionMark entry={entry} size="sm" /> };
+        }),
+        labels,
+      );
+    case 'look': {
+      const look = draft.appearance;
+      if (!look) return null;
+      const name = (id: string) => themes.find((theme) => theme.id === id)?.label ?? id;
+      const theme =
+        look.mode === 'dark'
+          ? name(look.darkTheme)
+          : look.mode === 'light'
+            ? name(look.lightTheme)
+            : labels.recapLookSystem(name(look.darkTheme), name(look.lightTheme));
+      const accent = presetFor(look.accent)?.label ?? (look.accent ? labels.custom : null);
+      const icon = look.icon ? icons.find((entry) => entry.id === look.icon)?.label : undefined;
+      return [theme, accent && labels.recapAccent(accent), icon && labels.recapIcon(icon)].filter(Boolean).join(', ');
+    }
+    case 'conversation': {
+      const preset = transcriptPresetOf(draft.settings);
+      return preset === 'custom' ? labels.custom : (TRANSCRIPT_PRESETS.find((p) => p.id === preset)?.label ?? preset);
+    }
+    case 'autonomy': {
+      const mode = APPROVAL_MODE_OPTIONS.find((option) => option.value === draft.settings.approvalMode)?.label;
+      return [mode, draft.settings.sandbox && labels.sandboxed].filter(Boolean).join(', ');
+    }
+    case 'features': {
+      const { on, off } = onboardingSwitchedFeatures(state);
+      return labels.recapSwitched(on, off);
+    }
+    default:
+      return null;
+  }
+}
+
+/** Props of {@link ReadyStep}. */
+export interface ReadyStepProps {
+  /** Extra classes on the root element. */
+  className?: string;
+}
+
+/**
+ * The Ready step.
+ *
+ * @param props - The {@link ReadyStepProps}.
+ */
+export function ReadyStep({ className }: ReadyStepProps) {
+  const { host, state, dispatch } = useOnboarding();
+  const labels = useOnboardingLabels();
+  const providers = useReadable(host.providers.list);
+  const themes = useReadable(host.themes?.list ?? NO_THEMES);
+  const icons = useReadable(host.appIcons?.list ?? NO_ICONS);
+  const [models, setModels] = useState<readonly OnboardingModelInfo[]>([]);
+  const key = state.draft.provider?.key;
+  const listModels = host.providers.models;
+  useEffect(() => {
+    if (!key || !listModels) return;
+    let live = true;
+    listModels(key).then(
+      (found) => {
+        if (live) setModels(found);
+      },
+      () => {},
+    );
+    return () => {
+      live = false;
+    };
+  }, [key, listModels]);
+
+  const input = { state, providers, models, themes, icons, labels };
+  const rows = state.steps.flatMap((step) => {
+    const value = recapOf(step, input);
+    return value === null ? [] : [{ step, value }];
+  });
+
+  return (
+    <OnboardingStepFrame className={className}>
+      <div className="flex flex-col gap-10">
+        {rows.length > 0 && (
+          <dl className="zg-tray rounded-zg-xl m-0 p-2 flex flex-col">
+            {rows.map((row) => (
+              <div
+                key={row.step}
+                className="zg-onboarding-recap-row flex flex-col sm:flex-row sm:items-center gap-x-4 gap-y-1 px-4 py-2.5 min-w-0"
+              >
+                <dt className="sm:w-40 shrink-0 text-zg-label text-[var(--zg-text-muted)]">
+                  {labels.stepLabel(row.step)}
+                </dt>
+                <dd className="m-0 flex-1 min-w-0 flex items-center gap-3">
+                  <span className="flex-1 min-w-0 break-words text-zg-ui">{row.value}</span>
+                  <button
+                    type="button"
+                    onClick={() => dispatch({ type: 'goto', step: row.step })}
+                    aria-label={labels.changeStep(labels.stepLabel(row.step))}
+                    className={`zg-onboarding-change ${buttonClass({ variant: 'ghost', size: 'xs' })}`}
+                  >
+                    {labels.change}
+                  </button>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        )}
+        {state.tasks.length > 0 && (
+          <StepSection title={labels.background}>
+            <ul className="zg-tray rounded-zg-xl m-0 p-2 list-none flex flex-col">
+              {state.tasks.map((task) => (
+                <TaskRow key={task.id} task={task} />
+              ))}
+            </ul>
+          </StepSection>
+        )}
+        <p className="m-0 px-1 text-zg-label text-[var(--zg-text-muted)] text-pretty">{labels.changeLater}</p>
+      </div>
+    </OnboardingStepFrame>
+  );
+}
+
+function TaskRow({ task }: { task: OnboardingTask }) {
+  const { host, controller, dispatch } = useOnboarding();
+  const labels = useOnboardingLabels();
+  const signIn = useSignIn(() => dispatch({ type: 'task', task: { ...task, status: 'done', message: undefined } }));
+  const connector = task.kind === 'connector' ? task.id.slice('connector:'.length) : null;
+  const begin = connector ? host.connectors?.signIn : undefined;
+  const start = () => {
+    if (connector && begin) signIn.start(() => begin(connector));
+  };
+  return (
+    <li className="flex flex-col gap-2 px-4 py-2.5 min-w-0">
+      <div className="flex items-center gap-x-3 gap-y-1 flex-wrap min-w-0">
+        <span className="text-zg-ui">{task.label}</span>
+        <TaskChip task={task} />
+        {task.message && (
+          <span
+            className={`flex-1 min-w-0 break-words text-zg-label ${task.status === 'failed' ? 'text-zg-danger' : 'text-[var(--zg-text-muted)]'}`}
+          >
+            {task.message}
+          </span>
+        )}
+        <span className="ml-auto flex items-center gap-1.5 shrink-0">
+          {task.status === 'failed' && (
+            <button
+              type="button"
+              onClick={() => controller.retry(task.id)}
+              className={buttonClass({ variant: 'ghost', size: 'xs' })}
+            >
+              {labels.retry}
+            </button>
+          )}
+          {task.status === 'needs-sign-in' && begin && !signIn.state && (
+            <button type="button" onClick={start} className={buttonClass({ variant: 'primary', size: 'xs' })}>
+              {labels.signIn}
+            </button>
+          )}
+        </span>
+      </div>
+      {signIn.state && task.status === 'needs-sign-in' && (
+        <BrowserSignIn
+          state={signIn.state}
+          service={task.label}
+          onCancel={signIn.cancel}
+          onRetry={start}
+          onSubmit={signIn.submit}
+        />
+      )}
+    </li>
+  );
+}

package/src/onboarding/steps/SkillsStep.tsx

@@ -0,0 +1,45 @@
+/**
+ * Skills: how skills work, then the skill source browser. The picks join the
+ * draft and install once the user passes the step, one task per source, into
+ * the user's skills folder. A skill already installed shows as such.
+ */
+import { constant, useReadable } from '../../chat/headless/store';
+import { useOnboarding, useOnboardingLabels } from '../OnboardingProvider';
+import { OnboardingStepFrame } from '../OnboardingStepFrame';
+import { SkillSourceBrowser } from '../skills/SkillSourceBrowser';
+import { Tutorial } from '../tutorials';
+
+const NONE = constant<readonly string[]>([]);
+
+/** Props of {@link SkillsStep}. */
+export interface SkillsStepProps {
+  /** Extra classes on the root element. */
+  className?: string;
+}
+
+/**
+ * The Skills step.
+ *
+ * @param props - The {@link SkillsStepProps}.
+ */
+export function SkillsStep({ className }: SkillsStepProps) {
+  const { host, state, dispatch } = useOnboarding();
+  const labels = useOnboardingLabels();
+  const installed = useReadable(host.skills?.installed ?? NONE);
+  if (!host.skills) return null;
+  const pending = state.draft.skills.filter((pick) => !installed.includes(pick.name)).length;
+  return (
+    <OnboardingStepFrame className={className} note={pending > 0 ? labels.toInstall(pending) : undefined}>
+      <div className="flex flex-col gap-8">
+        <Tutorial topic="skills" />
+        <SkillSourceBrowser
+          browse={host.skills.browse}
+          picks={state.draft.skills}
+          installed={installed}
+          {...(host.skills.images ? { images: host.skills.images } : {})}
+          onToggle={(picks, on) => dispatch({ type: 'toggle-skills', picks, on })}
+        />
+      </div>
+    </OnboardingStepFrame>
+  );
+}

package/src/onboarding/steps/StepSection.tsx

@@ -0,0 +1,63 @@
+/**
+ * A titled section of a wizard step: the section label, with an optional
+ * visual before it (a logo), over the section's content. The cards of a
+ * section stack full width in a `StepTray`, so a card that grows (a token
+ * field, a failed install) never leaves a gap beside it.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+
+import { SectionLabel, Tray } from '../../components/Surface';
+
+/** Props of {@link StepSection}. */
+export interface StepSectionProps {
+  /** The section's label. */
+  title: ReactNode;
+  /** A visual before the label, such as a small `BrandMark`. */
+  visual?: ReactNode;
+  /** Extra classes on the section. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+  /** The section's content. */
+  children: ReactNode;
+}
+
+/**
+ * Renders a section of a step: its label over its content.
+ *
+ * @param props - Component props.
+ */
+export function StepSection({ title, visual, className = '', style, children }: StepSectionProps) {
+  return (
+    <section className={`zg-onboarding-section flex flex-col gap-3 min-w-0 ${className}`} style={style}>
+      <SectionLabel className="flex items-center gap-2 px-1">
+        {visual}
+        {title}
+      </SectionLabel>
+      {children}
+    </section>
+  );
+}
+
+/** Props of {@link StepTray}. */
+export interface StepTrayProps {
+  /** Extra classes on the tray. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+  /** The cards. */
+  children: ReactNode;
+}
+
+/**
+ * Renders the cards of a section, stacked full width in a tray.
+ *
+ * @param props - Component props.
+ */
+export function StepTray({ className = '', style, children }: StepTrayProps) {
+  return (
+    <Tray radius="xl" className={`p-2 flex flex-col gap-1 ${className}`} style={style}>
+      {children}
+    </Tray>
+  );
+}

package/src/onboarding/steps/Tradeoff.tsx

@@ -0,0 +1,45 @@
+/**
+ * What a choice gives you and what it prevents, as two muted lines under its
+ * description: a plus, then a shield. Each line starts with its label,
+ * so a screen reader reads "Gives you" and "Prevents" too.
+ */
+import type { CSSProperties } from 'react';
+
+import { useOnboardingLabels } from '../OnboardingProvider';
+
+/** Props of {@link Tradeoff}. */
+export interface TradeoffProps {
+  /** What the choice gives you. */
+  unlocks: string;
+  /** What it guards against. */
+  prevents: string;
+  /** Extra classes on the lines. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+
+/**
+ * Renders a choice's trade-off: what it unlocks and what it prevents.
+ *
+ * @param props - Component props.
+ */
+export function Tradeoff({ unlocks, prevents, className = '', style }: TradeoffProps) {
+  const labels = useOnboardingLabels();
+  const lines = [
+    { icon: 'i-ph-plus-circle', label: labels.unlocks, text: unlocks },
+    { icon: 'i-ph-shield-check', label: labels.prevents, text: prevents },
+  ];
+  return (
+    <span data-tradeoff="" className={`flex flex-col gap-1.5 mt-3 ${className}`} style={style}>
+      {lines.map((line) => (
+        <span key={line.label} className="flex items-start gap-2 text-zg-label text-[var(--zg-text-muted)] text-pretty">
+          <span aria-hidden className={`${line.icon} mt-[3px] shrink-0`} />
+          <span className="min-w-0">
+            <span className="font-medium text-[var(--zg-text)]">{line.label}</span> {line.text}
+          </span>
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/onboarding/steps/WelcomeStep.tsx

@@ -0,0 +1,147 @@
+/**
+ * Welcome: Full setup or Quick start, and what zidane found on this computer
+ * (keys in the environment, other agents, the GitHub login, local model
+ * servers). Each finding names the step that uses it, so the next steps feel
+ * like confirming rather than configuring.
+ */
+import {
+  connectorById,
+  LOCAL_SERVER_BRANDS,
+  ONBOARDING_AGENT_BRANDS,
+  type OnboardingDetection,
+  type OnboardingStepId,
+} from 'zidane/chat/pure';
+
+import { BrandMark } from '../../components/BrandMark';
+import { ChoiceCards } from '../../components/ChoiceCards';
+import { MetaChip } from '../../components/Form';
+import { SectionLabel } from '../../components/Surface';
+import type { OnboardingLabels } from '../headless/labels';
+import { useOnboarding, useOnboardingLabels } from '../OnboardingProvider';
+import { OnboardingStepFrame } from '../OnboardingStepFrame';
+
+interface Found {
+  key: string;
+  /** The logo of the service, as a Simple Icons slug. */
+  brand?: string;
+  /** The service's name, for the letter when there is no logo. */
+  name: string;
+  /** The icon when there is no logo. */
+  icon: string;
+  text: string;
+  /** The step that uses it. */
+  step: OnboardingStepId;
+}
+
+function foundOn(detection: OnboardingDetection, labels: OnboardingLabels): Found[] {
+  const found: Found[] = [];
+  for (const provider of detection.providers) {
+    if (!provider.ready) continue;
+    const text =
+      provider.source === 'env' && provider.envKey
+        ? labels.foundEnvKey(provider.envKey)
+        : provider.source === 'oauth'
+          ? labels.foundSignedIn(provider.label)
+          : labels.foundSaved(provider.label);
+    found.push({
+      key: `provider:${provider.key}`,
+      brand: provider.brand,
+      name: provider.label,
+      icon: 'i-ph-key',
+      text,
+      step: 'connect',
+    });
+  }
+  for (const agent of detection.agents)
+    found.push({
+      key: `agent:${agent}`,
+      brand: ONBOARDING_AGENT_BRANDS[agent],
+      name: labels.agentName(agent),
+      icon: 'i-ph-folder-simple',
+      text: labels.foundAgent(agent),
+      step: 'import',
+    });
+  if (detection.github)
+    found.push({
+      key: 'github',
+      brand: connectorById('github')?.brand,
+      name: connectorById('github')?.label ?? '',
+      icon: 'i-ph-github-logo',
+      text: labels.foundGithub(detection.github.login, detection.github.source),
+      step: 'connectors',
+    });
+  for (const server of detection.localServers)
+    found.push({
+      key: `local:${server.kind}`,
+      brand: LOCAL_SERVER_BRANDS[server.kind],
+      name: server.kind,
+      icon: 'i-ph-cpu',
+      text: labels.foundLocalServer(server),
+      step: 'connect',
+    });
+  return found;
+}
+
+/** Props of {@link WelcomeStep}. */
+export interface WelcomeStepProps {
+  /** Extra classes on the root element. */
+  className?: string;
+}
+
+/**
+ * The Welcome step.
+ *
+ * @param props - The {@link WelcomeStepProps}.
+ */
+export function WelcomeStep({ className }: WelcomeStepProps) {
+  const { state, setup, dispatch } = useOnboarding();
+  const labels = useOnboardingLabels();
+  const found = foundOn(setup.detection, labels);
+  return (
+    <OnboardingStepFrame className={className}>
+      <div className="flex flex-col gap-10">
+        <ChoiceCards
+          ariaLabel={labels.setup}
+          numbered
+          columns={2}
+          value={state.draft.path}
+          onChange={(path) => dispatch({ type: 'choose-path', path })}
+          options={[
+            {
+              value: 'custom',
+              title: labels.fullSetup,
+              icon: 'i-ph-sliders-horizontal',
+              description: labels.fullSetupDetail,
+              badge: <MetaChip>{labels.fullSetupTime}</MetaChip>,
+            },
+            {
+              value: 'quick',
+              title: labels.quickStart,
+              icon: 'i-ph-lightning',
+              description: labels.quickStartDetail,
+              badge: <MetaChip>{labels.quickStartTime}</MetaChip>,
+            },
+          ]}
+        />
+        {found.length > 0 && (
+          <section className="flex flex-col gap-2.5">
+            <SectionLabel className="px-1">{labels.found}</SectionLabel>
+            <ul className="zg-tray rounded-zg-xl m-0 p-2 list-none flex flex-col">
+              {found.map((item) => (
+                <li key={item.key} className="flex items-center gap-3 px-3 py-2.5 min-w-0 text-zg-ui">
+                  <BrandMark brand={item.brand} label={item.name} icon={item.icon} />
+                  <span className="flex-1 min-w-0 break-words">{item.text}</span>
+                  {state.steps.includes(item.step) && (
+                    <span className="shrink-0 text-zg-label text-[var(--zg-text-muted)]">
+                      {labels.usedIn(labels.stepLabel(item.step))}
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </div>
+    </OnboardingStepFrame>
+  );
+}

package/src/onboarding/steps/connect/KeyForm.tsx

@@ -0,0 +1,112 @@
+/**
+ * Connect's key form: the provider's own fields (a base URL, a project),
+ * then its API key, saved with the same writer as Settings. The Local LLM
+ * provider starts on the server Welcome found.
+ */
+import { useState, type CSSProperties, type FormEvent } from 'react';
+import type { OnboardingProvider } from 'zidane/chat/pure';
+
+import { buttonClass } from '../../../components/button';
+import { ErrorNote, FIELD_LABEL_CLASS, INPUT_CLASS } from '../../../components/Form';
+import { useOnboarding, useOnboardingLabels } from '../../OnboardingProvider';
+
+/** Props of {@link KeyForm}. */
+export interface KeyFormProps {
+  /** The provider to set up. */
+  provider: OnboardingProvider;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+
+/**
+ * The fields and key of a provider, and Save.
+ *
+ * @param props - Component props.
+ */
+export function KeyForm({ provider, className, style }: KeyFormProps) {
+  const { host, setup } = useOnboarding();
+  const labels = useOnboardingLabels();
+  const server = setup.detection.localServers[0];
+  const [fields, setFields] = useState<Record<string, string>>(() => {
+    const start: Record<string, string> = {};
+    if (provider.key === 'local' && server) start.baseURL = server.url;
+    return start;
+  });
+  const [value, setValue] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const save = host.providers.saveKey;
+  if (!save) return null;
+
+  const missing =
+    provider.customFields.some((field) => field.required && !fields[field.key]?.trim()) ||
+    (provider.apiKey && provider.customFields.length === 0 && !value.trim());
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (missing || busy) return;
+    setBusy(true);
+    setError(null);
+    const filled = Object.fromEntries(Object.entries(fields).filter(([, text]) => text.trim()));
+    try {
+      await save(provider.key, {
+        ...(value.trim() ? { value: value.trim() } : {}),
+        ...(Object.keys(filled).length ? { fields: filled } : {}),
+      });
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <form onSubmit={submit} className={['flex flex-col gap-3', className].filter(Boolean).join(' ')} style={style}>
+      {provider.customFields.map((field) => (
+        <label key={field.key} className="block">
+          <span className={FIELD_LABEL_CLASS}>{field.label}</span>
+          <input
+            className={INPUT_CLASS}
+            value={fields[field.key] ?? ''}
+            placeholder={field.placeholder}
+            required={field.required}
+            spellCheck={false}
+            onChange={(e) => setFields((prev) => ({ ...prev, [field.key]: e.target.value }))}
+          />
+          {field.hint && <span className="block mt-1 text-zg-label text-[var(--zg-text-muted)]">{field.hint}</span>}
+        </label>
+      ))}
+      {provider.apiKey && (
+        <label className="block">
+          <span className={FIELD_LABEL_CLASS}>{labels.apiKeyFor(provider.label)}</span>
+          <input
+            type="password"
+            autoComplete="off"
+            spellCheck={false}
+            className={`${INPUT_CLASS} font-mono`}
+            value={value}
+            placeholder={provider.apiKeyPlaceholder}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </label>
+      )}
+      {error && <ErrorNote>{error}</ErrorNote>}
+      <div className="flex items-center gap-3">
+        {setup.credentialsPath && (
+          <span className="text-zg-label text-[var(--zg-text-muted)] text-pretty">
+            {labels.credentialsAt(setup.credentialsPath)}
+          </span>
+        )}
+        <button
+          type="submit"
+          disabled={missing || busy}
+          aria-busy={busy || undefined}
+          className={`${buttonClass({ variant: 'primary' })} ml-auto`}
+        >
+          {busy ? labels.saving : labels.save}
+        </button>
+      </div>
+    </form>
+  );
+}