@cat-factory/app 0.315.2 → 0.315.4

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/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`)
@@ -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 }
 
@@ -1392,7 +1393,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 +1461,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/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>

package/app/components/settings/RiskPolicyHealthModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppModal from '~/components/common/AppModal.vue'
 // Startup advisory for built-in merge presets that drifted from the catalog. Opened once per
 // session from the board page when `useRiskPolicyHealth` reports any issue. Lists:
 //   • new built-in presets the workspace doesn't have yet (ADD them);
@@ -48,7 +49,7 @@ const reseedableCount = computed(
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('riskPolicy.health.title')" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" :title="t('riskPolicy.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" />
@@ -156,5 +157,5 @@ const reseedableCount = computed(
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/UserSecretsSection.vue

@@ -11,6 +11,7 @@ import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import ConnectionWarnings from '~/components/settings/ConnectionWarnings.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -142,11 +143,7 @@ async function remove() {
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('settings.userSecrets.title')"
-    :ui="{ content: 'max-w-xl' }"
-  >
+  <AppModal size="form" v-model:open="open" :title="t('settings.userSecrets.title')">
     <template #title>
       <IntegrationBackTitle :title="t('settings.userSecrets.title')" @back="back" />
     </template>
@@ -247,5 +244,5 @@ async function remove() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -328,6 +328,7 @@ async function save() {
 </script>
 
 <template>
+  <!-- workbench-width-ok: tabbed workspace settings (768px). Its shell waits on #2359. -->
   <UModal
     v-model:open="open"
     :title="t('settings.workspaceSettings.title')"

package/app/components/setup/SetupChecklistPanel.vue

@@ -3,6 +3,7 @@ import type { SetupRow, SetupRowCause, SetupRowId, SetupRowStatus } from '~/util
 import type { SetupRemedy } from '~/utils/setupAudience'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import Spinner from '~/components/common/Spinner.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 /**
  * The setup checklist: every prerequisite for "a task can run and merge", its state, and one
@@ -210,7 +211,7 @@ const also = computed(() =>
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('setup.title')" :ui="{ content: 'sm:max-w-3xl' }">
+  <AppModal size="wide" v-model:open="open" :title="t('setup.title')">
     <template #title>
       <span class="flex items-baseline gap-3">
         {{ t('setup.title') }}
@@ -336,5 +337,5 @@ const also = computed(() =>
         </ul>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/slack/SlackPanel.vue

@@ -17,6 +17,7 @@ import {
 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 ui = useUiStore()
 const slack = useSlackStore()
@@ -202,7 +203,7 @@ async function saveMapping() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('slack.panel.title')" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" :title="t('slack.panel.title')">
     <template #title>
       <IntegrationBackTitle :title="t('slack.panel.title')" @back="back" />
     </template>
@@ -372,5 +373,5 @@ async function saveMapping() {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tasks/BugHuntModal.vue

@@ -335,6 +335,8 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
 </script>
 
 <template>
+  <!-- workbench-width-ok: a ranked list of tracker bugs with scan controls (768px). Its shell
+       waits on #2359. -->
   <UModal v-model:open="open" :title="t('bugHunt.title')" :ui="{ content: 'max-w-3xl' }">
     <template #title>
       <IntegrationBackTitle :title="t('bugHunt.title')" @back="back" />