@cat-factory/app 0.315.3 → 0.315.6

package/app/components/layout/IntegrationsHub.vue

@@ -2,6 +2,7 @@
 import { showOverrideField } from '~/utils/uiMode'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 // The Integrations hub: a single modal that lists the OPTIONAL external systems the WORKSPACE
 // can enable or link in — the ones that feed a run its context (source control, documents,
@@ -370,11 +371,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('layout.integrationsHub.title')"
-    :ui="{ content: 'max-w-xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('layout.integrationsHub.title')">
     <template #body>
       <!-- Named for the same reason `model-providers-hub` is: the tutorial tour that explains
            what a connection adds to a run points at this list. -->
@@ -489,5 +486,5 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
         </section>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/layout/ModelProvidersHub.vue

@@ -14,6 +14,7 @@
 // hub row-for-row so the two read as siblings.
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -167,11 +168,7 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('layout.modelProvidersHub.title')"
-    :ui="{ content: 'max-w-xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('layout.modelProvidersHub.title')">
     <template #body>
       <div class="space-y-5" data-testid="model-providers-hub">
         <p class="text-xs text-muted">
@@ -245,5 +242,5 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
         </section>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/layout/PersonalSetupModal.vue

@@ -6,6 +6,7 @@
 // existing per-panel handlers via `ui.openFromPersonal(...)`, so opening one closes this
 // hub, reveals that panel, and gives it a "Back to My setup" control (IntegrationBackTitle).
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -107,11 +108,7 @@ const groups = computed<PersonalGroup[]>(() => {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('layout.personalSetup.title')"
-    :ui="{ content: 'max-w-xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('layout.personalSetup.title')">
     <template #body>
       <div class="space-y-5">
         <p class="text-xs text-muted">
@@ -153,5 +150,5 @@ const groups = computed<PersonalGroup[]>(() => {
         </section>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/layout/RolePrompt.vue

@@ -11,6 +11,7 @@
 // next launch asks again. There is deliberately no "don't ask me again": an unanswered question
 // costs nothing here, where a wrongly-recorded answer costs a person destinations they need.
 import { ROLE_PRESENTATION, UI_ROLES, type UiRole } from '~/utils/uiRole'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const uiRole = useUiRoleStore()
@@ -26,7 +27,7 @@ function pick(role: UiRole) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('uiRole.prompt.title')" :ui="{ content: 'max-w-lg' }">
+  <AppModal size="prompt" v-model:open="open" :title="t('uiRole.prompt.title')">
     <template #body>
       <div class="space-y-4" data-testid="role-prompt">
         <p class="text-sm text-toned">{{ t('uiRole.prompt.intro') }}</p>
@@ -72,5 +73,5 @@ function pick(role: UiRole) {
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -26,6 +26,7 @@ import type {
 } from '~/types/notifications'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const ui = useUiStore()
 const notifications = useNotificationsStore()
@@ -134,11 +135,7 @@ function resetToDefaults() {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('notificationSettings.panel.title')"
-    :ui="{ content: 'max-w-2xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('notificationSettings.panel.title')">
     <template #title>
       <IntegrationBackTitle :title="t('notificationSettings.panel.title')" @back="back" />
     </template>
@@ -235,5 +232,5 @@ function resetToDefaults() {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/panels/DecisionModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { agentKindMeta } from '~/utils/catalog'
+import AppModal from '~/components/common/AppModal.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -52,7 +53,7 @@ async function choose(option: string) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('panels.decision.title')">
+  <AppModal size="prompt" v-model:open="open" :title="t('panels.decision.title')">
     <template #body>
       <div v-if="decision && agent" class="space-y-4" data-testid="decision-modal">
         <div class="flex items-center gap-2 text-sm text-muted">
@@ -97,5 +98,5 @@ async function choose(option: string) {
         </p>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/panels/InspectorPanel.vue

@@ -24,10 +24,15 @@ const recurring = useRecurringPipelinesStore()
 const requirements = useRequirementsStore()
 const access = useWorkspaceAccess()
 const { t } = useI18n()
+const { present } = usePipelineErrorToast()
 
 onMounted(() => {
   fragments.ensureLoaded()
-  github.ensureLoaded()
+  // The repo list behind the inspector's repo link and the service config's detect-from-repo
+  // lookup. Both read the store, so this one call serves them.
+  github.ensureLoaded().catch((error: unknown) => {
+    present(error, 'github.connect.errors.loadProjection')
+  })
 })
 
 const block = computed<Block | undefined>(() =>

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -21,6 +21,7 @@ import InspectorSection from '~/components/panels/inspector/InspectorSection.vue
 import ServiceSelfTests from '~/components/panels/inspector/ServiceSelfTests.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
 // TYPE this service produces (`infraless` / `docker-compose` / `kubernetes` / `custom`)
@@ -49,10 +50,10 @@ const ui = useUiStore()
 const { t, te } = useI18n()
 
 // The custom-manifest-type catalog feeds the `custom` picker. Cheap + shared (coalesced).
-// The repo list backs the detect-from-repo affordance (owner/name lookup).
+// The repo list behind the detect-from-repo affordance (owner/name lookup) is loaded by the
+// surface that hosts this section: the inspector panel, or the add-service modal on open.
 onMounted(() => {
   void infra.ensureLoaded()
-  void github.ensureLoaded()
 })
 
 // The service's declared provision type (absent ⇒ treated as `infraless`: no environment
@@ -840,7 +841,8 @@ function setSize(value: InstanceSize) {
       </div>
     </div>
 
-    <UModal
+    <AppModal
+      size="form"
       v-model:open="browseOpen"
       :title="
         browseTarget === 'compose'
@@ -880,7 +882,7 @@ function setSize(value: InstanceSize) {
           </div>
         </div>
       </template>
-    </UModal>
+    </AppModal>
 
     <!-- Provisioning hints: advisory inputs to the ephemeral-environment provisioner.
          Collapsed by default — most services never tune them. -->

package/app/components/pipeline/AgentPromptEditor.vue

@@ -170,6 +170,8 @@ function revisionLabel(revision: AgentPromptRevision): string {
 </script>
 
 <template>
+  <!-- workbench-width-ok: a prompt editor, up to 1024px on a large screen. Its shell waits on
+       #2359. -->
   <UModal
     v-model:open="open"
     :title="t('agentPrompt.title', { agent: label })"

package/app/components/pipeline/PipelineBuilder.vue

@@ -31,6 +31,7 @@ import type { ConsensusStrategy } from '~/types/consensus'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 type DraftUnit = { index: number; kind: AgentKind; companionIndex: number | null }
 
@@ -251,6 +252,8 @@ const open = computed({
 // knows whether to offer the post-release-health gate (it's loaded on demand, not from
 // the snapshot). Best-effort: a failure just leaves the gate hidden.
 onModalOpen(open, () => {
+  // Coming back from the model configuration, where none of this changed.
+  if (ui.consumeBuilderReturn()) return
   releaseHealth.load().catch(() => {})
   // The prompt-override index badges the steps whose agent no longer runs the shipped prompt.
   // Best-effort: the builder is fully usable without it, and a deployment that wires no
@@ -403,6 +406,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
     :title="t('pipeline.builder.title')"
     side="left"
     :ui="{ content: 'max-w-[90vw] sm:max-w-2xl lg:max-w-5xl xl:max-w-6xl' }"
+    @after:leave="ui.builderLeft()"
   >
     <template #body>
       <!-- On compact viewports the three sections stack and the slideover body
@@ -442,6 +446,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
               size="xs"
               icon="i-lucide-cpu"
               :title="t('pipeline.builder.configureModelsTooltip')"
+              data-testid="pipeline-builder-configure-models"
               @click="ui.openModelConfig()"
             >
               {{ t('pipeline.builder.configureModels') }}
@@ -1392,7 +1397,11 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
   </USlideover>
 
   <!-- Add-agent form -->
-  <UModal v-model:open="addAgentOpen" :title="t('pipeline.builder.addAgentModal.title')">
+  <AppModal
+    size="prompt"
+    v-model:open="addAgentOpen"
+    :title="t('pipeline.builder.addAgentModal.title')"
+  >
     <template #body>
       <div class="space-y-3">
         <div>
@@ -1456,7 +1465,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 
   <!-- The per-workspace system-prompt editor for one agent kind. Mounted alongside the builder
        (not inside its slideover body) so its own modal isn't nested inside the scrolling column. -->

package/app/components/pipeline/PipelineHealthModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppModal from '~/components/common/AppModal.vue'
 // Startup advisory for unhealthy pipelines. Opened once per session from the board page when
 // `usePipelineHealth` reports any issue. Lists:
 //   • new built-in pipelines the workspace doesn't have yet (ADD them);
@@ -121,7 +122,7 @@ const reseedableCount = computed(
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('pipeline.health.title')" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" :title="t('pipeline.health.title')">
     <template #body>
       <div v-if="!hasIssues" class="py-6 text-center text-sm text-muted">
         <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-app-success-400" />
@@ -331,5 +332,5 @@ const reseedableCount = computed(
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/providers/AiPresetMismatchDialog.vue

@@ -8,6 +8,7 @@
 // fixed (or all its models become available).
 import { computed } from 'vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -36,11 +37,7 @@ function go(action: () => void) {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('providers.presetMismatch.title')"
-    :ui="{ content: 'max-w-xl' }"
-  >
+  <AppModal size="prompt" v-model:open="open" :title="t('providers.presetMismatch.title')">
     <template #body>
       <div class="space-y-5">
         <i18n-t
@@ -103,5 +100,5 @@ function go(action: () => void) {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/providers/AiProviderOnboardingModal.vue

@@ -6,6 +6,7 @@
 // duplicating them). It auto-opens once per session (driven from pages/index.vue) and, like
 // the banner, disappears automatically the moment a usable source exists.
 import { computed } from 'vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -75,11 +76,7 @@ const routes = computed<Route[]>(() => [
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('providers.onboarding.title')"
-    :ui="{ content: 'max-w-2xl' }"
-  >
+  <AppModal size="wide" v-model:open="open" :title="t('providers.onboarding.title')">
     <template #body>
       <div class="space-y-5">
         <div
@@ -123,5 +120,5 @@ const routes = computed<Route[]>(() => [
         </p>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/providers/PersonalCredentialModal.vue

@@ -6,6 +6,7 @@
 // password. The copy follows the pending vendor (Claude / GLM / ChatGPT-Codex).
 import { computed, ref } from 'vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const personal = usePersonalSubscriptionsStore()
@@ -85,7 +86,7 @@ function goConnect() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="title" :ui="{ content: 'max-w-md' }">
+  <AppModal size="prompt" v-model:open="open" :title="title">
     <template #body>
       <div class="space-y-4">
         <template v-if="needsConnect">
@@ -141,5 +142,5 @@ function goConnect() {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/providers/VendorCredentialsModal.vue

@@ -10,6 +10,7 @@ import type { SubscriptionVendor } from '~/types/domain'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t, n } = useI18n()
 const ui = useUiStore()
@@ -173,11 +174,7 @@ function vendorLabel(v: SubscriptionVendor): string {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('providers.vendorCredentials.title')"
-    :ui="{ content: 'max-w-2xl' }"
-  >
+  <AppModal size="wide" v-model:open="open" :title="t('providers.vendorCredentials.title')">
     <template #title>
       <IntegrationBackTitle :title="t('providers.vendorCredentials.title')" @back="back" />
     </template>
@@ -337,5 +334,5 @@ function vendorLabel(v: SubscriptionVendor): string {
         </template>
       </UTabs>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/queue/DescribeWorkModal.vue

@@ -6,6 +6,7 @@ import { splitDescribedWork } from '~/utils/describeWork'
 import { isReviewDebtConflict, reviewFrictionContext } from '~/utils/reviewFriction'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import { showOverrideField } from '~/utils/uiMode'
+import AppModal from '~/components/common/AppModal.vue'
 
 /**
  * The one-sentence intake (issue #2258): what needs doing, which service, feature or bug. Nothing else on the
@@ -220,7 +221,7 @@ async function submit(startNow: boolean, acknowledgeReviewDebt = false) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('describeWork.title')" :ui="{ content: 'sm:max-w-2xl' }">
+  <AppModal size="wide" v-model:open="open" :title="t('describeWork.title')">
     <template #body>
       <div class="space-y-4" data-testid="describe-work-modal">
         <UFormField :label="t('describeWork.textLabel')" :description="t('describeWork.textHint')">
@@ -363,5 +364,5 @@ async function submit(startNow: boolean, acknowledgeReviewDebt = false) {
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/sandbox/SandboxPanel.vue

@@ -272,6 +272,8 @@ async function archive(prompt: SandboxPromptVersion) {
 </script>
 
 <template>
+  <!-- workbench-width-ok: experiments, prompts and fixtures with a graded grid (1024px). Its
+       shell waits on #2359. -->
   <UModal
     v-model:open="open"
     :title="t('sandbox.title')"

package/app/components/settings/AccountSettingsPanel.vue

@@ -59,6 +59,7 @@ const tabs = computed(() => [
 </script>
 
 <template>
+  <!-- workbench-width-ok: tabbed account settings (768px). Its shell waits on #2359. -->
   <UModal v-model:open="open" :title="t('settings.account.title')" :ui="{ content: 'max-w-3xl' }">
     <template #body>
       <EmptyState

package/app/components/settings/ApiTokensPanel.vue

@@ -9,6 +9,7 @@ import { showOverrideField } from '~/utils/uiMode'
 import type { PublicApiKey, PublicApiScope } from '~/types/publicApiKeys'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t, d } = useI18n()
 
@@ -227,7 +228,7 @@ async function revokeToken(key: PublicApiKey) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('settings.apiTokens.title')" :ui="{ content: 'max-w-lg' }">
+  <AppModal size="form" v-model:open="open" :title="t('settings.apiTokens.title')">
     <template #title>
       <IntegrationBackTitle :title="t('settings.apiTokens.title')" @back="back" />
     </template>
@@ -416,5 +417,5 @@ async function revokeToken(key: PublicApiKey) {
         </section>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/InfrastructureWindow.vue

@@ -37,6 +37,7 @@ import SharedStacksPanel from '~/components/settings/SharedStacksPanel.vue'
 import ComposeEnvironmentSetupSection from '~/components/settings/ComposeEnvironmentSetupSection.vue'
 import PackageRegistriesPanel from '~/components/settings/PackageRegistriesPanel.vue'
 import CapabilityCredentialsPanel from '~/components/settings/CapabilityCredentialsPanel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -152,11 +153,7 @@ watch([tabs, () => store.loaded], () => {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('settings.providerConnection.windowTitle')"
-    :ui="{ content: 'max-w-xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('settings.providerConnection.windowTitle')">
     <template #body>
       <div class="space-y-4">
         <UTabs
@@ -218,5 +215,5 @@ watch([tabs, () => store.loaded], () => {
         </p>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -19,6 +19,7 @@ import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -269,11 +270,7 @@ async function remove(p: LocalRunner) {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('settings.localModelEndpoints.title')"
-    :ui="{ content: 'max-w-2xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('settings.localModelEndpoints.title')">
     <template #title>
       <IntegrationBackTitle :title="t('settings.localModelEndpoints.title')" @back="back" />
     </template>
@@ -483,5 +480,5 @@ async function remove(p: LocalRunner) {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/ModelConfigurationPanel.vue

@@ -311,6 +311,7 @@ async function save() {
     <Transition name="reader-fade">
       <div
         v-if="open"
+        data-testid="model-configuration-panel"
         class="z-50 flex-col bg-app-950/96 backdrop-blur-sm"
         :class="FULL_BLEED_TAKEOVER_CLASS"
         role="dialog"
@@ -377,7 +378,13 @@ async function save() {
                     </template>
                   </i18n-t>
                 </p>
-                <UButton icon="i-lucide-plus" size="sm" class="shrink-0" @click="startCreate">
+                <UButton
+                  icon="i-lucide-plus"
+                  size="sm"
+                  class="shrink-0"
+                  data-testid="model-preset-new"
+                  @click="startCreate"
+                >
                   {{ t('settings.modelConfiguration.list.newPreset') }}
                 </UButton>
               </div>
@@ -491,6 +498,7 @@ async function save() {
                   </SectionLabel>
                   <UInput
                     v-model="editor.name"
+                    data-testid="model-preset-name"
                     :placeholder="t('settings.modelConfiguration.editor.namePlaceholder')"
                     size="sm"
                     class="w-full"

package/app/components/settings/ModelPresetHealthModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppModal from '~/components/common/AppModal.vue'
 // Startup advisory for built-in model presets that drifted from the catalog. Opened once per
 // session from the board page when `useModelPresetHealth` reports any issue. Lists:
 //   • new built-in presets the workspace doesn't have yet (ADD them);
@@ -57,7 +58,7 @@ const reseedableCount = computed(
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('modelPreset.health.title')" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" :title="t('modelPreset.health.title')">
     <template #body>
       <div v-if="!hasIssues" class="py-6 text-center text-sm text-muted">
         <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-app-success-400" />
@@ -165,5 +166,5 @@ const reseedableCount = computed(
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -8,6 +8,7 @@ import { computed, reactive, ref, watch } from 'vue'
 import type { ObservabilityProviderKind } from '~/types/releaseHealth'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -136,11 +137,7 @@ const connectedLabel = computed(() => {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('settings.observabilityConnection.title')"
-    :ui="{ content: 'max-w-lg' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('settings.observabilityConnection.title')">
     <template #title>
       <IntegrationBackTitle :title="t('settings.observabilityConnection.title')" @back="back" />
     </template>
@@ -261,5 +258,5 @@ const connectedLabel = computed(() => {
         </section>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -12,6 +12,7 @@ import type { OpenRouterModelMeta } from '~/types/openrouter'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -205,7 +206,7 @@ function manageKeys() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="OpenRouter" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" title="OpenRouter">
     <template #title>
       <IntegrationBackTitle title="OpenRouter" @back="back" />
     </template>
@@ -387,5 +388,5 @@ function manageKeys() {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>