@skaile/forge-settings 1.3.3 → 2.0.0

package/src/runtime/components/ForgeProvidersPanel.vue

@@ -71,10 +71,54 @@
                 variant="subtle"
                 color="neutral"
               >{{ row.badge }}</UBadge>
+              <UBadge
+                :data-testid="`provider-zone-${row.id}`"
+                size="sm"
+                variant="outline"
+                :color="row.zone === 'transfer' ? 'warning' : 'neutral'"
+                :title="`Data zone: ${row.zoneLabel}`"
+              >{{ row.zoneLabel }}</UBadge>
+              <button
+                v-if="row.modelsChip && row.canFilterModels"
+                type="button"
+                class="rounded-md border border-surface-border px-1.5 py-0.5 text-[10px] text-foreground-muted hover:border-primary-500"
+                :data-testid="`provider-models-chip-${row.id}`"
+                @click="openModelsEditor(row)"
+              >{{ row.modelsChip }}</button>
+              <UBadge
+                v-else-if="row.modelsChip"
+                :data-testid="`provider-models-chip-${row.id}`"
+                size="sm"
+                variant="subtle"
+                color="neutral"
+              >{{ row.modelsChip }}</UBadge>
               <Icon v-if="row.locked" name="lucide:lock" class="text-foreground-subtle shrink-0" />
             </div>
             <p class="font-mono text-foreground-subtle truncate" :title="row.baseUrl ?? undefined">{{ rowMeta(row) }}</p>
+            <p v-if="row.accountLine" :data-testid="`provider-account-${row.id}`" class="text-foreground-muted">{{ row.accountLine }}</p>
             <p v-if="row.inheritedNote" class="text-foreground-subtle italic">{{ row.inheritedNote }}</p>
+            <p
+              v-if="row.blockedNote"
+              :data-testid="`provider-blocked-${row.id}`"
+              class="text-foreground-subtle italic"
+            >{{ row.blockedNote }}</p>
+            <p
+              v-if="row.expiry"
+              :data-testid="`provider-expiry-${row.id}`"
+              class="flex items-center gap-1"
+              :class="row.expiry.expired || row.expiry.days < 7 ? 'text-amber-600 dark:text-amber-400' : 'text-foreground-subtle'"
+            >
+              {{ row.expiry.text }}
+              <template v-if="row.canRenew">
+                ·
+                <button
+                  type="button"
+                  class="underline hover:text-foreground"
+                  :data-testid="`provider-renew-${row.id}`"
+                  @click="openSignIn(row)"
+                >Renew</button>
+              </template>
+            </p>
           </div>
           <div class="flex items-center gap-1 shrink-0">
             <UButton
@@ -145,6 +189,16 @@
             {{ row.status }}
           </p>
 
+          <USwitch
+            v-if="row.zone === 'eu_option'"
+            :model-value="row.euProcessing === true"
+            :disabled="!row.canSetEuProcessing || rowBusy === row.id"
+            label="EU processing is on for this account"
+            size="xs"
+            :data-testid="`provider-eu-processing-${row.id}`"
+            @update:model-value="setEuProcessing(row, Boolean($event))"
+          />
+
           <!-- Inline key editor -->
           <div
             v-if="keyEditing === row.id"
@@ -203,6 +257,67 @@
             </div>
           </div>
 
+          <!-- Models allowed here -->
+          <div
+            v-if="modelsEditing === row.id"
+            :data-testid="`provider-models-${row.id}`"
+            class="space-y-1.5 p-2 rounded-lg border border-surface-border bg-surface-ground/50"
+          >
+            <p class="font-medium text-foreground">Models allowed here</p>
+            <URadioGroup
+              :model-value="modelsForm.mode"
+              :items="MODELS_MODE_ITEMS"
+              orientation="horizontal"
+              size="xs"
+              :data-testid="`provider-models-mode-${row.id}`"
+              @update:model-value="setModelsMode($event as ProvidersPanelModelsMode)"
+            />
+            <template v-if="modelsForm.mode === 'only'">
+              <UInput
+                v-model="modelsForm.query"
+                placeholder="Search models"
+                size="xs"
+                :data-testid="`provider-models-search-${row.id}`"
+                class="w-full bg-surface-ground border-surface-border text-foreground text-xs"
+              />
+              <p v-if="modelsLoading" class="text-foreground-subtle italic">Listing models…</p>
+              <p
+                v-if="modelsListMessage"
+                :data-testid="`provider-models-message-${row.id}`"
+                class="text-foreground-subtle italic"
+              >{{ modelsListMessage }}</p>
+              <div class="max-h-48 overflow-y-auto space-y-1">
+                <UCheckbox
+                  v-for="modelId in modelChoices"
+                  :key="modelId"
+                  :model-value="modelsForm.selected.includes(modelId)"
+                  :label="modelId"
+                  size="xs"
+                  :data-testid="`provider-model-${row.id}-${modelId}`"
+                  @update:model-value="toggleModel(modelId, Boolean($event))"
+                />
+              </div>
+              <p class="text-foreground-subtle">
+                {{ modelsForm.selected.length === 0 ? "No model ticked: this provider will run no model." : `${modelsForm.selected.length} ticked.` }}
+              </p>
+            </template>
+            <p
+              v-if="modelsError"
+              :data-testid="`provider-models-error-${row.id}`"
+              class="text-error-500"
+            >{{ modelsError }}</p>
+            <div class="flex justify-end gap-1">
+              <UButton size="xs" variant="ghost" :data-testid="`provider-models-cancel-${row.id}`" @click="cancelModelsEditor()">Cancel</UButton>
+              <UButton
+                size="xs"
+                color="primary"
+                :loading="rowBusy === row.id"
+                :data-testid="`provider-models-save-${row.id}`"
+                @click="saveModelsEditor()"
+              >Save</UButton>
+            </div>
+          </div>
+
           <p
             v-for="notice in row.overrideNotices"
             :key="notice"
@@ -228,7 +343,7 @@
       :open="dialogVisible"
       :title="dialogTitle"
       :ui="{
-        content: 'bg-surface-card border border-surface-border sm:max-w-[460px]',
+        content: 'bg-surface-card border border-surface-border sm:max-w-[520px]',
         header: 'bg-surface-card border-b border-surface-border text-foreground',
         body: 'bg-surface-card p-5',
         footer: 'bg-surface-ground/50 border-t border-surface-border p-3 justify-end',
@@ -237,104 +352,323 @@
     >
       <template #body>
         <div data-testid="provider-dialog" class="space-y-4">
-          <div class="flex flex-col gap-1">
-            <label class="text-xs text-foreground-muted font-medium">
-              Preset <span class="text-error-500">*</span>
-            </label>
-            <USelect
-              :model-value="form.preset"
-              :items="presetOptions"
-              placeholder="Choose a preset"
-              data-testid="provider-preset"
-              class="w-full bg-surface-ground border-surface-border text-foreground text-sm"
-              @update:model-value="selectPreset(String($event ?? ''))"
-            />
+          <!-- Step 1: library -->
+          <div v-if="dialogStep === 'library'" data-testid="provider-library" class="space-y-3">
+            <p class="text-xs text-foreground-muted">Which provider do you want to add?</p>
+            <button
+              type="button"
+              data-testid="provider-library-azure"
+              class="w-full text-left p-3 rounded-lg border border-surface-border hover:border-primary-500 hover:bg-primary-500/5 transition-colors"
+              @click="chooseLibrary(AZURE_ACCOUNT)"
+            >
+              <span class="flex items-center gap-2">
+                <Icon name="lucide:cloud" class="text-primary-500 shrink-0" />
+                <span class="text-sm font-medium text-foreground">Microsoft Azure</span>
+              </span>
+              <span class="block text-xs text-foreground-muted mt-1">
+                Azure OpenAI and Claude on Foundry from one Azure resource, with Entra ID or an API key.
+              </span>
+            </button>
+            <div class="grid grid-cols-2 gap-2 max-h-72 overflow-y-auto">
+              <button
+                v-for="preset in libraryPresets"
+                :key="preset.id"
+                type="button"
+                :data-testid="`provider-library-${preset.id}`"
+                class="text-left p-2 rounded-lg border border-surface-border hover:border-primary-500 hover:bg-primary-500/5 transition-colors"
+                @click="chooseLibrary(preset.id)"
+              >
+                <span class="block text-xs font-medium text-foreground truncate">{{ preset.label }}</span>
+                <span class="block text-[10px] text-foreground-subtle">{{ libraryHint(preset) }}</span>
+              </button>
+              <button
+                type="button"
+                data-testid="provider-library-custom"
+                class="text-left p-2 rounded-lg border border-dashed border-surface-border hover:border-primary-500 transition-colors"
+                @click="chooseLibrary(CUSTOM_PRESET)"
+              >
+                <span class="block text-xs font-medium text-foreground">Custom</span>
+                <span class="block text-[10px] text-foreground-subtle">Any endpoint, by base URL</span>
+              </button>
+            </div>
           </div>
 
-          <div v-if="showSurface" class="flex flex-col gap-1">
-            <label class="text-xs text-foreground-muted font-medium">
-              Surface <span class="text-error-500">*</span>
-            </label>
-            <USelect
-              v-model="form.surface"
-              :items="surfaceOptions"
-              placeholder="Wire protocol"
-              data-testid="provider-surface"
-              class="w-full bg-surface-ground border-surface-border text-foreground text-sm"
-            />
-          </div>
+          <!-- Step 2: account -->
+          <template v-else-if="dialogStep === 'account'">
+            <!-- Microsoft Azure account -->
+            <template v-if="isAzureAccount">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">
+                  Resource name <span class="text-error-500">*</span>
+                </label>
+                <UInput
+                  v-model="azureForm.resource"
+                  placeholder="contoso-ai"
+                  data-testid="provider-azure-resource"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+                />
+                <p class="text-[10px] text-foreground-subtle">
+                  The <code class="font-mono">{{ azureForm.resource.trim() || 'name' }}</code> of
+                  <code class="font-mono">{{ azureForm.resource.trim() || 'name' }}.openai.azure.com</code>; shared by every entry this account creates.
+                </p>
+              </div>
 
-          <div class="flex flex-col gap-1">
-            <label class="text-xs text-foreground-muted font-medium">
-              ID <span class="text-error-500">*</span>
-            </label>
-            <UInput
-              v-model="form.id"
-              :disabled="editing !== null"
-              placeholder="openrouter"
-              data-testid="provider-id"
-              class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
-              :class="editing !== null ? 'opacity-60 cursor-not-allowed' : ''"
-            />
-            <p v-if="idError" class="text-xs text-error-500">{{ idError }}</p>
-            <p v-else class="text-[10px] text-foreground-subtle">The left half of a model selector: <code class="font-mono">&lt;id&gt;/&lt;model&gt;</code>.</p>
-          </div>
+              <div class="space-y-2">
+                <p class="text-xs text-foreground-muted font-medium">What do you want to use?</p>
+                <UCheckbox
+                  v-model="azureForm.useOpenAI"
+                  label="Azure OpenAI"
+                  description="GPT models you deployed on the resource."
+                  data-testid="provider-azure-openai"
+                />
+                <div v-if="azureForm.useOpenAI" class="ml-6 space-y-1.5" data-testid="provider-azure-deployments">
+                  <p class="text-[10px] text-foreground-subtle">Deployment name → model id the pickers show (blank: the deployment name).</p>
+                  <div
+                    v-for="(row, index) in azureForm.deployments"
+                    :key="index"
+                    class="flex items-center gap-1.5"
+                  >
+                    <UInput
+                      v-model="row.deployment"
+                      placeholder="gpt-5-eu"
+                      :aria-label="`Deployment ${index + 1}`"
+                      :data-testid="`provider-azure-deployment-${index}`"
+                      class="flex-1 bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                    />
+                    <Icon name="lucide:arrow-right" class="text-foreground-subtle shrink-0" />
+                    <UInput
+                      v-model="row.model"
+                      placeholder="gpt-5"
+                      :aria-label="`Model id ${index + 1}`"
+                      :data-testid="`provider-azure-model-${index}`"
+                      class="flex-1 bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                    />
+                    <UButton
+                      size="xs"
+                      variant="ghost"
+                      :aria-label="`Remove deployment ${index + 1}`"
+                      :data-testid="`provider-azure-deployment-remove-${index}`"
+                      @click="removeDeploymentRow(index)"
+                    >
+                      <Icon name="lucide:x" class="w-3.5 h-3.5" />
+                    </UButton>
+                  </div>
+                  <UButton size="xs" variant="ghost" data-testid="provider-azure-deployment-add" @click="addDeploymentRow()">
+                    <Icon name="lucide:plus" class="mr-1.5" />Add deployment
+                  </UButton>
+                  <div class="flex flex-col gap-1">
+                    <label class="text-xs text-foreground-muted font-medium">API version</label>
+                    <UInput
+                      v-model="azureForm.apiVersion"
+                      :disabled="!props.expert"
+                      data-testid="provider-azure-api-version"
+                      class="w-full bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                    />
+                    <p v-if="!props.expert" class="text-[10px] text-foreground-subtle">Editable in expert mode.</p>
+                  </div>
+                </div>
+                <UCheckbox
+                  v-model="azureForm.useFoundry"
+                  label="Claude on Foundry"
+                  description="Anthropic models deployed through Azure AI Foundry on the same resource."
+                  data-testid="provider-azure-foundry"
+                />
+              </div>
+            </template>
 
-          <div class="flex flex-col gap-1">
-            <label class="text-xs text-foreground-muted font-medium">
-              Base URL <span v-if="isCustom" class="text-error-500">*</span>
-            </label>
-            <UInput
-              v-model="form.baseUrl"
-              :placeholder="baseUrlPlaceholder"
-              data-testid="provider-base-url"
-              class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
-            />
-          </div>
+            <template v-else>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">
+                  Preset <span class="text-error-500">*</span>
+                </label>
+                <USelect
+                  :model-value="form.preset"
+                  :items="presetOptions"
+                  placeholder="Choose a preset"
+                  data-testid="provider-preset"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm"
+                  @update:model-value="selectPreset(String($event ?? ''))"
+                />
+              </div>
 
-          <template v-if="showCredentialFields">
-            <div class="flex flex-col gap-1">
-              <label class="text-xs text-foreground-muted font-medium">Credential environment variable</label>
-              <UInput
-                v-model="form.envName"
-                placeholder="PROVIDER_API_KEY"
-                data-testid="provider-credential-env"
-                class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
-              />
-              <p class="text-[10px] text-foreground-subtle">
-                Stored as <code class="font-mono">env:{{ form.envName.trim() || 'NAME' }}</code> — the key itself stays in the environment.
-              </p>
+              <div v-if="showSurface" class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">
+                  Surface <span class="text-error-500">*</span>
+                </label>
+                <USelect
+                  v-model="form.surface"
+                  :items="surfaceOptions"
+                  placeholder="Wire protocol"
+                  data-testid="provider-surface"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm"
+                />
+              </div>
+
+              <div class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">
+                  ID <span class="text-error-500">*</span>
+                </label>
+                <UInput
+                  v-model="form.id"
+                  :disabled="editing !== null"
+                  placeholder="openrouter"
+                  data-testid="provider-id"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+                  :class="editing !== null ? 'opacity-60 cursor-not-allowed' : ''"
+                />
+                <p v-if="idError" class="text-xs text-error-500">{{ idError }}</p>
+                <p v-else class="text-[10px] text-foreground-subtle">The left half of a model selector: <code class="font-mono">&lt;id&gt;/&lt;model&gt;</code>.</p>
+              </div>
+
+              <div class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">
+                  Base URL <span v-if="isCustom" class="text-error-500">*</span>
+                </label>
+                <UInput
+                  v-model="form.baseUrl"
+                  :placeholder="baseUrlPlaceholder"
+                  data-testid="provider-base-url"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+                />
+              </div>
+
+              <div v-for="field in paramFields" :key="field.key" class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">
+                  {{ field.label }} <span v-if="field.required" class="text-error-500">*</span>
+                </label>
+                <UInput
+                  v-model="form.params[field.key]"
+                  :disabled="!field.editable"
+                  :data-testid="`provider-param-${field.key}`"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+                />
+                <p v-if="!field.editable" class="text-[10px] text-foreground-subtle">Editable in expert mode.</p>
+              </div>
+            </template>
+
+            <!-- How do you sign in? -->
+            <div v-if="showSignIn" data-testid="provider-signin" class="space-y-1.5">
+              <p class="text-xs text-foreground-muted font-medium">How do you sign in?</p>
+              <div class="flex flex-wrap gap-1.5" role="radiogroup" aria-label="How do you sign in?">
+                <UButton
+                  v-for="option in signInOptions"
+                  :key="option.id"
+                  size="xs"
+                  role="radio"
+                  :aria-checked="form.signIn === option.id"
+                  :variant="form.signIn === option.id ? 'solid' : 'outline'"
+                  :color="form.signIn === option.id ? 'primary' : 'neutral'"
+                  :data-testid="`provider-signin-${option.id}`"
+                  @click="selectSignIn(option.id)"
+                >{{ option.label }}</UButton>
+              </div>
+              <p v-if="signInOption" class="text-[10px] text-foreground-subtle leading-relaxed">{{ signInOption.description }}</p>
             </div>
 
-            <div v-if="canSetValue" class="flex flex-col gap-1">
-              <label class="text-xs text-foreground-muted font-medium">Set value now</label>
+            <template v-if="showCredentialFields">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">Credential environment variable</label>
+                <UInput
+                  v-model="form.envName"
+                  :placeholder="defaultEnvPlaceholder"
+                  data-testid="provider-credential-env"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+                />
+                <p class="text-[10px] text-foreground-subtle">
+                  Stored as <code class="font-mono">env:{{ form.envName.trim() || defaultEnvPlaceholder }}</code> — the key itself stays in the environment.
+                </p>
+              </div>
+
+              <div v-if="canSetValue" class="flex flex-col gap-1">
+                <label class="text-xs text-foreground-muted font-medium">Set value now</label>
+                <UInput
+                  v-model="form.secret"
+                  type="password"
+                  autocomplete="off"
+                  placeholder="Optional — written to this scope's .env"
+                  data-testid="provider-set-value"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+                />
+              </div>
+            </template>
+
+            <div v-if="showReferenceField" class="flex flex-col gap-1">
+              <label class="text-xs text-foreground-muted font-medium">
+                Credential reference <span class="text-error-500">*</span>
+              </label>
               <UInput
-                v-model="form.secret"
-                type="password"
-                autocomplete="off"
-                placeholder="Optional — written to this scope's .env"
-                data-testid="provider-set-value"
+                v-model="form.credentialRef"
+                placeholder="env:NAME · keyring:forge/name · cmd:… · platform:…"
+                data-testid="provider-dialog-credential-ref"
                 class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
               />
             </div>
           </template>
 
+          <!-- Step 3: done, the created entries tested -->
+          <div v-else data-testid="provider-done" class="space-y-2">
+            <p class="text-xs text-foreground-muted">
+              {{ createdIds.length === 1 ? 'Added' : `Added ${createdIds.length} providers` }}. Testing the sign-in:
+            </p>
+            <div
+              v-for="id in createdIds"
+              :key="id"
+              :data-testid="`provider-created-${id}`"
+              class="flex items-start gap-2 p-2 rounded-lg border border-surface-border text-xs"
+            >
+              <span class="font-mono text-foreground shrink-0">{{ id }}</span>
+              <span v-if="testBusy === id" class="text-foreground-subtle italic">testing…</span>
+              <span
+                v-else-if="testResults[id]"
+                :data-testid="`provider-created-result-${id}`"
+                :class="testResults[id]?.ok ? 'text-success-500' : 'text-error-500'"
+              >{{ testResults[id]?.message }}</span>
+              <UButton
+                v-if="testBusy !== id"
+                size="xs"
+                variant="ghost"
+                class="ml-auto"
+                :disabled="testBusy !== null"
+                :data-testid="`provider-created-test-${id}`"
+                @click="testProvider({ id })"
+              >Test again</UButton>
+            </div>
+          </div>
+
           <p v-if="dialogError" data-testid="provider-dialog-error" class="text-sm text-error-500">{{ dialogError }}</p>
         </div>
       </template>
 
       <template #footer>
         <div class="flex gap-2 justify-end w-full">
-          <UButton size="sm" variant="ghost" @click="dialogVisible = false">Cancel</UButton>
           <UButton
+            v-if="!editing && dialogStep === 'account'"
             size="sm"
-            color="primary"
-            data-testid="provider-save"
-            :loading="saving"
-            @click="saveProvider"
+            variant="ghost"
+            class="mr-auto"
+            data-testid="provider-back"
+            @click="backToLibrary()"
           >
-            <Icon name="lucide:check" class="mr-1.5" />{{ editing ? 'Save' : 'Add' }}
+            <Icon name="lucide:arrow-left" class="mr-1.5" />Back
           </UButton>
+          <template v-if="dialogStep === 'done'">
+            <UButton size="sm" color="primary" data-testid="provider-done-close" @click="finishDialog()">
+              <Icon name="lucide:check" class="mr-1.5" />Done
+            </UButton>
+          </template>
+          <template v-else>
+            <UButton size="sm" variant="ghost" @click="dialogVisible = false">Cancel</UButton>
+            <UButton
+              v-if="dialogStep === 'account'"
+              size="sm"
+              color="primary"
+              data-testid="provider-save"
+              :loading="saving"
+              @click="saveProvider"
+            >
+              <Icon name="lucide:check" class="mr-1.5" />{{ editing ? 'Save' : isAzureAccount ? 'Add account' : 'Add' }}
+            </UButton>
+          </template>
         </div>
       </template>
     </UModal>
@@ -375,8 +709,16 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import type { AIProviderDataZoneRule } from "../shared/provider-registry";
 import type { ProvidersPanelClient } from "../vue/providers-client";
-import { providersPanelNote, providersPanelRowMeta as rowMeta } from "../vue/providers-panel-model";
+import {
+  AZURE_ACCOUNT,
+  CUSTOM_PRESET,
+  type ProvidersPanelModelsMode,
+  type ProvidersPanelPreset,
+  providersPanelNote,
+  providersPanelRowMeta as rowMeta,
+} from "../vue/providers-panel-model";
 import { type ProvidersPanelLayer, useProvidersPanel } from "../vue/useProvidersPanel";
 
 const props = withDefaults(
@@ -402,13 +744,40 @@ const props = withDefaults(
     readOnly?: boolean;
     /** The line above the list. Absent: the default text for `layer`; a string replaces it; `false` hides it. */
     note?: string | false;
+    /**
+     * Expert mode: the sign-in step also offers the raw reference form
+     * (`env:` / `keyring:` / `cmd:` / `platform:`), and expert-only
+     * parameters (`api_version`) become editable.
+     */
+    expert?: boolean;
+    /**
+     * The host's data-zone rule: rows outside it show a muted note naming the
+     * rule (`provider-blocked-<id>`). Absent or `any`: none.
+     */
+    dataZoneRule?: AIProviderDataZoneRule;
   }>(),
   // Without a default Vue casts an absent boolean to `false`; the panel tells absent from `false`.
-  { environmentEnabled: undefined, note: undefined },
+  { environmentEnabled: undefined, note: undefined, expert: false },
 );
 
 const noteText = computed(() => providersPanelNote(props.note, props.layer));
 
+const MODELS_MODE_ITEMS: Array<{ label: string; value: ProvidersPanelModelsMode }> = [
+  { label: "All models", value: "all" },
+  { label: "Only these", value: "only" },
+];
+
+/** The library card's second line: what the preset serves. */
+function libraryHint(preset: ProvidersPanelPreset): string {
+  if (preset.credential.kind === "none") return "Local, no sign-in";
+  if (preset.kind === "stt") return "Speech to text";
+  if (preset.kind === "tts") return "Text to speech";
+  if (preset.kind === "embed") return "Embeddings";
+  return "Chat models";
+}
+
+const defaultEnvPlaceholder = computed(() => defaultEnvName.value ?? "PROVIDER_API_KEY");
+
 const emit = defineEmits<{
   /** After every successful `PUT`/`DELETE`. */
   (event: "changed"): void;
@@ -431,6 +800,24 @@ const {
   baseUrlPlaceholder,
   canSetValue,
   showCredentialFields,
+  defaultEnvName,
+  dialogStep,
+  libraryPresets,
+  chooseLibrary,
+  backToLibrary,
+  isAzureAccount,
+  signInOptions,
+  signInOption,
+  selectSignIn,
+  showSignIn,
+  showReferenceField,
+  paramFields,
+  azureForm,
+  addDeploymentRow,
+  removeDeploymentRow,
+  createdIds,
+  finishDialog,
+  openSignIn,
   rowBusy,
   rowError,
   canTest,
@@ -440,6 +827,18 @@ const {
   onCredentialSelect,
   setEnabled,
   resetPatch,
+  setEuProcessing,
+  modelsEditing,
+  modelsForm,
+  modelsLoading,
+  modelsListMessage,
+  modelChoices,
+  modelsError,
+  openModelsEditor,
+  setModelsMode,
+  toggleModel,
+  cancelModelsEditor,
+  saveModelsEditor,
   keyEditing,
   keyForm,
   keyError,