feat: complete onboarding flow

2026-10-08 14:04:29 -05:00
parent fae05ebc4c
commit 61f9bb74b4
16 changed files with 684 additions and 297 deletions
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { deriveKey } from '~/utils/crypto';
+import { timeLeft } from '~/utils/time';

 const { client: authClient, signUp, session } = useAuth();

@@ -12,8 +13,6 @@ if (session.value !== null) {
    await navigateTo(to ?? '/');
 }

-const DAY_MS = 24 * 60 * 60 * 1000;
-
 // who may register is an instance setting, admins change it while it runs
 const { data: instance } = await useFetch('/api/instance', { key: 'instance' });

@@ -43,9 +42,7 @@ const blocked = computed(() => inviteOnly.value && validInvite.value === null);
 const inviteValidFor = computed(() => {
    if (!validInvite.value) return '';

-    const days = Math.max(1, Math.ceil((new Date(validInvite.value.expiresAt).getTime() - Date.now()) / DAY_MS));
-
-    return `Invite valid for ${days} more ${days === 1 ? 'day' : 'days'}${validInvite.value.singleUse ? ' · single use' : ''}`;
+    return `Invite valid for ${timeLeft(validInvite.value.expiresAt)} more${validInvite.value.singleUse ? ' · single use' : ''}`;
 });

 const form = reactive({
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { deriveKey } from '~/utils/crypto';

-const { signIn } = useAuth();
+const { signIn, fetchSession } = useAuth();

 definePageMeta({
    layout: 'auth',
@@ -127,8 +127,11 @@ const submit = async () => {
    const key = await deriveKey(form.password, res.data.user.id);
    localStorage.setItem('encryptionKey', JSON.stringify(key));

-    // straight on to connecting a provider, the instance is useless without one
-    return navigateTo('/welcome');
+    // the next steps are for admins only, so make sure the role is loaded
+    await fetchSession();
+
+    // on to the rest of the setup: who can register, then a first provider
+    return navigateTo('/setup/instance');
 };
 </script>

@@ -160,6 +163,8 @@ const submit = async () => {
            </div>

            <template v-else>
+                <OnboardingSetupSteps :current="1"></OnboardingSetupSteps>
+
                <p
                    class="px-3 py-2.5 rounded-lg bg-[var(--bg-container)] border border-[var(--color-border)] text-sm leading-snug text-[var(--text-secondary)]">
                    No accounts exist yet. The account you create here becomes the
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RegistrationMode } from '~~/drizzle/schema';
+import { DialogType } from '~/composables/useDialog';
+import { timeLeft } from '~/utils/time';

 type InstanceSettings = {
    registration: RegistrationMode;
@@ -25,6 +27,7 @@ const REGISTRATION_OPTIONS: { value: RegistrationMode; label: string; descriptio
 ];

 const { isAdmin } = useAuth();
+const { openDialog } = useDialog();

 if (!isAdmin.value) {
    await navigateTo('/settings/profile');
@@ -43,8 +46,6 @@ type Invite = {
    createdAt: string;
 };

-const DAY_MS = 24 * 60 * 60 * 1000;
-
 const { data: inviteData, refresh: loadInvites } = await useFetch<Invite[]>('/api/admin/invites', {
    key: 'admin_invites',
 });
@@ -89,9 +90,7 @@ const copiedId = ref<string | null>(null);
 const invitePath = (invite: Invite) => `/auth/register?invite=${invite.token}`;

 const describeInvite = (invite: Invite) => {
-    const days = Math.max(1, Math.ceil((new Date(invite.expiresAt).getTime() - Date.now()) / DAY_MS));
-
-    return `${invite.uses} of ${invite.maxUses} ${invite.maxUses === 1 ? 'use' : 'uses'} · expires in ${days} ${days === 1 ? 'day' : 'days'}`;
+    return `${invite.uses} of ${invite.maxUses} ${invite.maxUses === 1 ? 'use' : 'uses'} · expires in ${timeLeft(invite.expiresAt)}`;
 };

 const copyInvite = async (invite: Invite) => {
@@ -107,21 +106,12 @@ const copyInvite = async (invite: Invite) => {
    }
 };

-const createInvite = async () => {
-    if (inviteBusy.value) return;
-
-    inviteBusy.value = true;
-    inviteError.value = '';
-
-    try {
-        await $fetch('/api/admin/invites', { method: 'POST' });
+// The dialog asks how long the link lasts and for how many people, and shows
+// the link. It may be closed after the link was made, so always reload.
+const createInvite = () => {
+    openDialog(DialogType.CreateInvite, async () => {
        await loadInvites();
-    } catch (err) {
-        console.error('Failed to create invite:', err);
-        inviteError.value = 'The invite link could not be created. Try again.';
-    }
-
-    inviteBusy.value = false;
+    });
 };

 const revokeInvite = async (invite: Invite) => {
@@ -202,16 +192,11 @@ const revokeInvite = async (invite: Invite) => {

                    <p v-if="inviteError" role="alert" class="text-sm text-red-400">{{ inviteError }}</p>

-                    <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5">
-                        <button type="button" :disabled="inviteBusy" @click="createInvite"
-                            class="flex items-center gap-1.5 h-8 px-3 text-sm rounded-md bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200">
-                            <span class="i-mynaui-plus text-4" aria-hidden="true"></span>
-                            New invite link
-                        </button>
-                        <span class="text-xs text-[var(--text-secondary)]">
-                            Each link lets one person register and expires after 7 days.
-                        </span>
-                    </div>
+                    <button type="button" @click="createInvite"
+                        class="self-start flex items-center gap-1.5 h-8 px-3 text-sm rounded-md bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] transition-colors duration-200">
+                        <span class="i-mynaui-plus text-4" aria-hidden="true"></span>
+                        New invite link
+                    </button>
                </template>
            </section>
        </div>
@@ -187,38 +187,12 @@ const { data: instance } = await useFetch<{ registration: string }>('/api/admin/
    key: 'admin_instance',
 });

-const inviteBusy = ref(false);
-const inviteLink = ref('');
-const inviteCopied = ref(false);
-
-const createInvite = async () => {
-    if (inviteBusy.value) return;
-
-    inviteBusy.value = true;
-    actionError.value = '';
-    inviteCopied.value = false;
-
-    try {
-        const invite = await $fetch<{ token: string }>('/api/admin/invites', { method: 'POST' });
-        inviteLink.value = `${window.location.origin}/auth/register?invite=${invite.token}`;
+// the dialog asks for the details and shows the link to copy
+const createInvite = () => {
+    openDialog(DialogType.CreateInvite, () => {
        // the Instance page lists the links, so it has to load the new one
        clearNuxtData('admin_invites');
-    } catch (error) {
-        console.error('Failed to create invite:', error);
-        actionError.value = 'The invite link could not be created. Try again.';
-        inviteBusy.value = false;
-        return;
-    }
-
-    // copying can be refused by the browser, the link is shown either way
-    try {
-        await navigator.clipboard.writeText(inviteLink.value);
-        inviteCopied.value = true;
-    } catch (error) {
-        console.error('Failed to copy invite link:', error);
-    }
-
-    inviteBusy.value = false;
+    });
 };

 const openCreateUser = () => {
@@ -256,8 +230,7 @@ const openCreateUser = () => {
                    class="flex items-center h-8 px-3 text-[13px] rounded-md border border-[var(--color-border)] @hover:bg-[var(--color-hover)] transition-colors duration-200">
                    Create user
                </button>
-                <button v-if="instance?.registration === 'invite'" type="button" :disabled="inviteBusy"
-                    @click="createInvite"
+                <button v-if="instance?.registration === 'invite'" type="button" @click="createInvite"
                    class="flex items-center gap-1.5 h-8 px-3 text-[13px] font-semibold rounded-md bg-[var(--color-accent)] text-[var(--color-accent-text)] disabled:opacity-50 disabled:cursor-not-allowed">
                    <span class="i-mynaui-link text-4" aria-hidden="true"></span>
                    Invite link
@@ -265,17 +238,6 @@ const openCreateUser = () => {
            </div>
        </div>

-        <div v-if="inviteLink" role="status"
-            class="flex flex-wrap items-center gap-x-3 gap-y-1 mb-3 px-3 py-2 rounded-lg bg-[var(--bg-container)] text-sm">
-            <span class="text-[var(--text-secondary)]">
-                {{ inviteCopied ? 'Invite link copied:' : 'New invite link:' }}
-            </span>
-            <span class="flex-1 min-w-55 font-mono text-[13px] overflow-hidden text-ellipsis whitespace-nowrap select-all">
-                {{ inviteLink }}
-            </span>
-            <span class="text-xs text-[var(--text-secondary)]">one use · expires in 7 days</span>
-        </div>
-
        <p v-if="loadError" role="alert" class="pb-3 text-sm text-red-400">The users could not be loaded.</p>
        <p v-if="actionError" role="alert" class="pb-3 text-sm text-red-400">{{ actionError }}</p>

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { RegistrationMode } from '~~/drizzle/schema';
+
+type InstanceSettings = {
+    registration: RegistrationMode;
+    registrationLocked: boolean;
+};
+
+const REGISTRATION_OPTIONS: { value: RegistrationMode; label: string; description: string }[] = [
+    {
+        value: 'open',
+        label: 'Open',
+        description: 'Anyone who can reach this URL can create an account.',
+    },
+    {
+        value: 'invite',
+        label: 'Invite only',
+        description: 'Admins create invite links. Good default for a shared instance.',
+    },
+    {
+        value: 'closed',
+        label: 'Closed',
+        description: 'No sign-ups. Only you use this instance.',
+    },
+];
+
+// Tint of the chosen option. UnoCSS can't put an opacity on a CSS variable, so
+// "bg-[var(--color-accent)]/10" comes out as the solid accent colour.
+const SELECTED_STYLE = {
+    backgroundColor: 'color-mix(in srgb, var(--color-accent) 10%, transparent)',
+};
+
+definePageMeta({
+    layout: 'auth',
+});
+
+const { isAdmin } = useAuth();
+
+// the rest of first-run setup belongs to the admin who just made the account
+if (!isAdmin.value) {
+    await navigateTo('/');
+}
+
+const { data: instance } = await useFetch<InstanceSettings>('/api/admin/instance', {
+    key: 'admin_instance',
+});
+
+const registration = ref<RegistrationMode>(instance.value?.registration ?? 'invite');
+const locked = computed(() => !!instance.value?.registrationLocked);
+
+const saving = ref(false);
+const error = ref('');
+
+const submit = async () => {
+    if (saving.value) return;
+
+    // nothing to save when the environment decides, or nothing changed
+    if (locked.value || instance.value?.registration === registration.value) {
+        return navigateTo('/setup/provider');
+    }
+
+    saving.value = true;
+    error.value = '';
+
+    try {
+        instance.value = await $fetch<InstanceSettings>('/api/admin/instance', {
+            method: 'PUT',
+            body: { registration: registration.value },
+        });
+        // the sign in pages read this to decide whether to offer registering
+        clearNuxtData('instance');
+    } catch (err) {
+        console.error('Failed to save registration:', err);
+        error.value = 'That could not be saved. Try again.';
+        saving.value = false;
+        return;
+    }
+
+    saving.value = false;
+
+    return navigateTo('/setup/provider');
+};
+</script>
+
+<template>
+    <div class="relative flex flex-col items-center justify-center w-full h-full p-4 overflow-hidden">
+        <!-- Background decorative blobs -->
+        <div
+            class="absolute -top-24 -right-24 w-96 h-96 bg-[var(--color-accent)] opacity-10 blur-[100px] rounded-full pointer-events-none">
+        </div>
+        <div
+            class="absolute -bottom-24 -left-24 w-96 h-96 bg-[var(--color-accent)] opacity-5 blur-[100px] rounded-full pointer-events-none">
+        </div>
+
+        <div class="z-10 max-w-104 w-full flex flex-col gap-5">
+            <div class="flex flex-col items-center gap-1 text-center">
+                <h1 class="text-3xl font-bold tracking-tight">Veridian</h1>
+                <p class="text-[var(--text-secondary)]">Set up this instance</p>
+            </div>
+
+            <OnboardingSetupSteps :current="2"></OnboardingSetupSteps>
+
+            <form class="flex flex-col gap-4" @submit.prevent="submit">
+                <fieldset class="flex flex-col gap-1.5" :disabled="saving || locked">
+                    <legend
+                        class="mb-1.5 ml-1 text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)]">
+                        Who can register
+                    </legend>
+
+                    <label v-for="option in REGISTRATION_OPTIONS" :key="option.value"
+                        class="flex items-start gap-3 px-3 py-2.5 rounded-lg border transition-colors duration-200"
+                        :style="registration === option.value ? SELECTED_STYLE : undefined" :class="[
+                            registration === option.value
+                                ? 'border-[var(--color-accent)]'
+                                : 'border-[var(--color-border)]',
+                            locked ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
+                        ]">
+                        <!-- a plain radio: the auth layout sizes every input as a text field -->
+                        <input v-model="registration" type="radio" name="registration" :value="option.value"
+                            class="!w-auto !p-0 mt-0.75 flex-shrink-0" style="accent-color: var(--color-accent)" />
+                        <span class="flex flex-col gap-0.5">
+                            <span class="font-medium">{{ option.label }}</span>
+                            <span class="text-[13px] text-[var(--text-secondary)]">
+                                {{ option.description }}
+                            </span>
+                        </span>
+                    </label>
+                </fieldset>
+
+                <p v-if="locked" class="flex gap-2 text-xs leading-normal text-[var(--text-secondary)]">
+                    <span class="i-mynaui-lock text-4 mt-0.25 flex-shrink-0" aria-hidden="true"></span>
+                    <span>
+                        Registration is turned off by the <code class="font-mono">DISABLE_SIGNUP</code>
+                        environment variable. Remove it and restart the server to choose here.
+                    </span>
+                </p>
+
+                <p v-if="error" role="alert" class="text-sm text-red-400">{{ error }}</p>
+
+                <button type="submit" :disabled="saving"
+                    class="accent w-full h-11 flex items-center justify-center font-semibold">
+                    <span v-if="saving" class="i-svg-spinners-90-ring-with-bg text-xl"></span>
+                    <span v-else>Continue</span>
+                </button>
+
+                <p class="text-xs text-center text-[var(--text-secondary)]">
+                    This can be changed later in Settings → Instance.
+                </p>
+            </form>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: 'auth',
+});
+
+const { isAdmin } = useAuth();
+
+// the rest of first-run setup belongs to the admin who just made the account
+if (!isAdmin.value) {
+    await navigateTo('/');
+}
+
+const finish = () => navigateTo('/');
+const back = () => navigateTo('/setup/instance');
+</script>
+
+<template>
+    <div class="relative flex flex-col items-center justify-center w-full h-full p-4 overflow-hidden">
+        <!-- Background decorative blobs -->
+        <div
+            class="absolute -top-24 -right-24 w-96 h-96 bg-[var(--color-accent)] opacity-10 blur-[100px] rounded-full pointer-events-none">
+        </div>
+        <div
+            class="absolute -bottom-24 -left-24 w-96 h-96 bg-[var(--color-accent)] opacity-5 blur-[100px] rounded-full pointer-events-none">
+        </div>
+
+        <div class="z-10 max-w-104 w-full flex flex-col gap-5">
+            <div class="flex flex-col items-center gap-1 text-center">
+                <h1 class="text-3xl font-bold tracking-tight">Veridian</h1>
+                <p class="text-[var(--text-secondary)]">Connect your first AI provider</p>
+            </div>
+
+            <OnboardingSetupSteps :current="3"></OnboardingSetupSteps>
+
+            <OnboardingProviderForm submit-label="Fetch models and finish" :show-back="true" @done="finish"
+                @back="back">
+                <template #note>
+                    <p class="text-xs leading-normal text-[var(--text-secondary)]">
+                        Providers are per account. Other people on this instance add their own keys, and nobody,
+                        including admins, can read yours.
+                    </p>
+                </template>
+            </OnboardingProviderForm>
+        </div>
+    </div>
+</template>
@@ -1,146 +1,11 @@
 <script setup lang="ts">
-import type { Model } from '~/composables/useModels';
-import { encryptData, uint8ArrayToBase64 } from '~/utils/crypto';
-import { providerIcons } from '~/utils/model-mapping';
-import { sortByReleaseDate } from '~/utils/sort';
-
-// the providers offered up front, the rest sit behind "More…"
-const FEATURED_PROVIDERS = ['openrouter', 'anthropic', 'openai', 'google', 'ollama'];
-// these run on your own machine and are reached by address, not by key
-const LOCAL_PROVIDERS = ['ollama', 'vllm'];
-// A provider can list hundreds of models, so only the newest few are turned on
-// to start with. The rest are a click away in the provider's settings.
-const MODELS_ENABLED_AT_START = 8;
-
-const PROVIDER_LABELS: Record<string, string> = {
-    openrouter: 'OpenRouter',
-    anthropic: 'Anthropic',
-    openai: 'OpenAI',
-    google: 'Google',
-    ollama: 'Ollama',
-};
-
-const KEY_PLACEHOLDERS: Record<string, string> = {
-    openrouter: 'sk-or-…',
-    anthropic: 'sk-ant-…',
-    openai: 'sk-…',
-};
-
 definePageMeta({
    layout: 'auth',
 });

 const to = useRoute().query.to as string | undefined;

-const { providers } = await useModels();
-
-const showAll = ref(false);
-const selectedType = ref(FEATURED_PROVIDERS.find(type => providers.value.some(p => p.type === type))
-    ?? providers.value[0]?.type ?? '');
-
-const featured = computed(() => FEATURED_PROVIDERS
-    .map(type => providers.value.find(p => p.type === type))
-    .filter(p => p !== undefined));
-
-const others = computed(() => providers.value.filter(p => !FEATURED_PROVIDERS.includes(p.type)));
-
-const shownProviders = computed(() => showAll.value ? [...featured.value, ...others.value] : featured.value);
-
-const selected = computed(() => providers.value.find(p => p.type === selectedType.value));
-const isLocal = computed(() => LOCAL_PROVIDERS.includes(selectedType.value));
-
-const apiKey = ref('');
-const apiKeyVisible = ref(false);
-const baseUrl = ref('');
-
-const busy = ref(false);
-const error = ref('');
-
-const ready = computed(() => isLocal.value ? baseUrl.value.trim() !== '' : apiKey.value.trim() !== '');
-
-const selectProvider = (type: string) => {
-    selectedType.value = type;
-    error.value = '';
-};
-
 const finish = () => navigateTo(to ?? '/');
-
-const submit = async () => {
-    const provider = selected.value;
-    if (busy.value || !ready.value || !provider) return;
-
-    busy.value = true;
-    error.value = '';
-
-    const storedKey = localStorage.getItem('encryptionKey');
-    if (storedKey === null) {
-        error.value = 'This browser has no encryption key for your account. Log out and back in, then add the provider under Settings.';
-        busy.value = false;
-        return;
-    }
-
-    const key = apiKey.value.trim();
-    const config = { ...provider.config };
-
-    try {
-        if (isLocal.value) {
-            config.apiProxyUrl = baseUrl.value.trim();
-        } else {
-            const cryptoKey = await crypto.subtle.importKey('jwk', JSON.parse(storedKey), 'AES-GCM', false, ['encrypt', 'decrypt']);
-            config.apiKey = uint8ArrayToBase64(await encryptData(cryptoKey, key));
-        }
-
-        await $fetch(`/api/provider/${provider.id}`, {
-            method: 'PATCH',
-            body: { config, enabled: true },
-        });
-    } catch (err) {
-        console.error('Failed to save provider:', err);
-        error.value = 'The provider could not be saved. Try again.';
-        busy.value = false;
-        return;
-    }
-
-    let models: Model[];
-    try {
-        const response = await $fetch<{ models: Model[] }>(`/api/provider/${provider.id}/models`, {
-            method: 'POST',
-            body: { providerApiKey: isLocal.value ? undefined : key },
-        });
-        models = response.models;
-    } catch (err) {
-        console.error('Failed to fetch models:', err);
-        error.value = isLocal.value
-            ? 'No models could be fetched from that address. Check that it is right and reachable from the server.'
-            : 'No models could be fetched with that key. Check that it is right and try again.';
-        busy.value = false;
-        return;
-    }
-
-    const toEnable = models
-        .filter(m => m.outputModalities.includes('text'))
-        .sort(sortByReleaseDate)
-        .slice(0, MODELS_ENABLED_AT_START);
-
-    if (toEnable.length === 0) {
-        error.value = 'The provider answered, but has no chat models to offer. Try another provider.';
-        busy.value = false;
-        return;
-    }
-
-    // a model that fails to turn on here can still be turned on in settings
-    const results = await Promise.allSettled(toEnable.map(m => $fetch(`/api/model/${m.id}`, {
-        method: 'PATCH',
-        body: { enabled: true },
-    })));
-    const enabledIds = new Set(toEnable.filter((_, i) => results[i]!.status === 'fulfilled').map(m => m.id));
-
-    providers.value = providers.value.map(p => p.id === provider.id
-        ? { ...p, config, enabled: true, models: models.map(m => ({ ...m, enabled: m.enabled || enabledIds.has(m.id) })) }
-        : p);
-
-    await finish();
-};
 </script>

 <template>
@@ -164,83 +29,7 @@ const submit = async () => {
                land on Home.
            </p>

-            <form class="flex flex-col gap-4" @submit.prevent="submit">
-                <fieldset class="flex flex-col">
-                    <legend
-                        class="mb-1.5 ml-1 text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)]">
-                        Provider
-                    </legend>
-                    <div class="grid grid-cols-3 gap-2">
-                        <button v-for="p in shownProviders" :key="p.id" type="button"
-                            :aria-pressed="selectedType === p.type" :disabled="busy" @click="selectProvider(p.type)"
-                            class="flex items-center justify-center gap-2 h-11 px-2 min-w-0 text-sm rounded-lg border disabled:cursor-not-allowed transition-colors duration-200"
-                            :class="selectedType === p.type
-                                ? 'border-[var(--color-accent)] bg-[var(--color-accent)]/10 font-medium'
-                                : 'border-[var(--color-border)] enabled:@hover:bg-[var(--color-hover)]'">
-                            <component v-if="providerIcons[p.type]" :is="providerIcons[p.type]" :color="true"
-                                class="w-5.5 h-5.5 flex-shrink-0 text-[var(--text-primary)]" />
-                            <span class="case-capital overflow-hidden text-ellipsis whitespace-nowrap">
-                                {{ PROVIDER_LABELS[p.type] ?? p.name }}
-                            </span>
-                        </button>
-                        <button v-if="!showAll && others.length > 0" type="button" :disabled="busy"
-                            @click="showAll = true"
-                            class="flex items-center justify-center h-11 text-sm rounded-lg border border-[var(--color-border)] text-[var(--text-secondary)] enabled:@hover:bg-[var(--color-hover)] disabled:cursor-not-allowed transition-colors duration-200">
-                            More…
-                        </button>
-                    </div>
-                </fieldset>
-
-                <div v-if="isLocal" class="flex flex-col gap-1.5">
-                    <label for="baseurl"
-                        class="text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)] ml-1">
-                        Server address
-                    </label>
-                    <input id="baseurl" v-model="baseUrl" type="url" :disabled="busy" autocomplete="off"
-                        spellcheck="false" :placeholder="selected?.defaultBaseUrl || 'http://localhost:11434'"
-                        class="text-sm border border-[var(--color-border)]" />
-                </div>
-                <div v-else class="flex flex-col gap-1.5">
-                    <label for="apikey"
-                        class="text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)] ml-1">
-                        API key
-                    </label>
-                    <div
-                        class="flex items-center rounded-md bg-[var(--bg-container)] border border-[var(--color-border)]">
-                        <input id="apikey" v-model="apiKey" :type="apiKeyVisible ? 'text' : 'password'"
-                            :disabled="busy" autocomplete="off" spellcheck="false"
-                            :placeholder="KEY_PLACEHOLDERS[selectedType] ?? 'API key'"
-                            class="flex-1 min-w-0 text-sm !bg-transparent" />
-                        <button type="button" :aria-label="apiKeyVisible ? 'Hide API key' : 'Show API key'"
-                            @click="apiKeyVisible = !apiKeyVisible"
-                            class="flex items-center justify-center w-10 h-10 flex-shrink-0 text-[var(--text-secondary)]">
-                            <span class="text-4.5" :class="apiKeyVisible ? 'i-mynaui-eye' : 'i-mynaui-eye-slash'"></span>
-                        </button>
-                    </div>
-                </div>
-
-                <p v-if="!isLocal" class="flex gap-2 text-xs leading-normal text-[var(--text-secondary)]">
-                    <span class="i-mynaui-lock text-4 mt-0.25 flex-shrink-0" aria-hidden="true"></span>
-                    <span>
-                        Encrypted in this browser with AES-GCM before it is stored. Nobody else on this instance,
-                        including admins, can read it.
-                    </span>
-                </p>
-
-                <p v-if="error" role="alert" class="text-sm text-red-400">{{ error }}</p>
-
-                <div class="flex gap-2">
-                    <button type="button" :disabled="busy" @click="finish"
-                        class="flex items-center justify-center h-11 px-4 rounded-md border border-[var(--color-border)] text-[var(--text-secondary)] enabled:@hover:bg-[var(--color-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200">
-                        Skip for now
-                    </button>
-                    <button type="submit" :disabled="busy || !ready"
-                        class="accent flex-1 h-11 flex items-center justify-center font-semibold disabled:opacity-40 disabled:cursor-not-allowed">
-                        <span v-if="busy" class="i-svg-spinners-90-ring-with-bg text-xl"></span>
-                        <span v-else>Fetch models and continue</span>
-                    </button>
-                </div>
-            </form>
+            <OnboardingProviderForm submit-label="Fetch models and continue" @done="finish"></OnboardingProviderForm>
        </div>
    </div>
 </template>