@cat-factory/app 0.315.3 → 0.315.6

package/README.md

@@ -34,7 +34,8 @@ A spatial planning surface. You lay out a system as a **board** of frames
 (services), modules and tasks on a [Vue Flow](https://vueflow.dev) canvas, wire up
 dependencies, attach requirements, and apply **agent pipelines** to blocks.
 Execution streams back in real time (step/subtask progress bars, decision
-prompts, failures with retry) so the canvas doubles as a live dashboard.
+prompts, failures with retry) so the canvas doubles as a live dashboard. The board's second view,
+the [queue](#queue-view), lists the same tasks by what each one needs.
 
 It is a thin client: there is **no business logic here**. Every mutation calls the
 Worker API and the stores hydrate from server snapshots and live updates pushed
@@ -43,8 +44,8 @@ over the WebSocket. How that sync works is written up in
 
 ## Tech stack
 
-- **Nuxt 4 / Vue 3** SPA: the board is `pages/index.vue`, beside three standalone routes
-  (`mcp-authorize.vue`, `mcp-oauth-callback.vue`, `reset-password.vue`).
+- **Nuxt 4 / Vue 3** SPA: the board and its queue view are `pages/index.vue`, beside three
+  standalone routes (`mcp-authorize.vue`, `mcp-oauth-callback.vue`, `reset-password.vue`).
 - **Pinia** (+ `pinia-plugin-persistedstate`): feature stores.
 - **Vue Flow** (`core`, `background`, `controls`, `node-resizer`): the canvas.
 - **Nuxt UI** + Tailwind: components and styling.
@@ -389,6 +390,18 @@ A phone's notch and home indicator cover whatever sits at the screen edge, and o
 
 `scripts/check-frontend-safe-area.mjs` (CI) refuses any other `fixed` surface that spans a whole side of the viewport, in `.vue`, `.ts` and `.css`. A surface with no edge content (a scrim, a drawing layer) or one that pads its own edges (the sidebar drawer, the inspector's bottom sheet) says why with a `safe-area-ok:` comment, on the line or the one above it, or above the element's opening tag.
 
+### Modals open at a named width
+
+A modal states what KIND of content it holds, and the width follows from that in one place. Before this, each modal picked its own `max-w-*`: five widths for three kinds of content, and no rule for which one a new modal takes.
+
+- **`<AppModal size="prompt">`** (448px): a confirmation, a decision, a short read such as the keyboard help, or a dialog with one or two fields.
+- **`<AppModal size="form">`** (576px): a form, a list or a hub to work through.
+- **`<AppModal size="wide">`** (672px): cards that each carry a paragraph and an action beside it, a row of tabs over a form, or three pickers side by side (the AI provider onboarding, the vendor credentials, the setup checklist, describe new work).
+- [`common/AppModal.vue`](./app/components/common/AppModal.vue) is `UModal` with the width applied through `ui.content`; every other prop, listener and slot passes through, and a call site still passes other `ui` slots and non-width content classes (a stacked dialog's `z-[70]`). The widths live in [`utils/overlaySize.ts`](./app/utils/overlaySize.ts). It is a wrapper rather than an `app.config.ts` variant because `UModal` has no `size` prop and passes only `transition`, `fullscreen`, `overlay` and `scrollable` into its variant function, so a `size` variant would never be selected.
+- **An always-`fullscreen` modal has no width** and stays a plain `UModal`. A modal bound fullscreen only sometimes (`:fullscreen="isPhone"`) is centered everywhere else, so it takes an `AppModal` size, which `AppModal` drops while the modal is fullscreen.
+- **A workbench surface keeps its own width for now**: the libraries, settings panels, bug hunt, adoption review and environment wizard at 768px, the sandbox and the agent prompt editor above that. Their shell is the open decision in [#2359](https://github.com/kibertoad/cat-factory/issues/2359), so a named width for them now would be dead work. Each says why in a `<!-- workbench-width-ok: … -->` comment directly above its tag.
+- `scripts/check-frontend-geometry.mjs` (CI) refuses a raw `UModal` (or `LazyUModal`) outside the wrapper, an `AppModal` that names its own width utility (`max-w-*`, `min-w-*`, `w-*`) in `class` or in the `content` slot of `:ui`, or reads either from a variable or a spread it cannot see through, a waiver with no reason, and a waiver with no raw modal directly below it. A `USlideover` is a side panel with no named width, so the guard does not read it.
+
 ### A control is its Nuxt UI component
 
 Every CONTROL in the SPA is the Nuxt UI component for it, never the raw HTML element. A raw `<button>` beside a `UButton` is the same control rendered twice, and only one of the two follows the theme, the focus ring, the disabled state and the size scale; the SPA carried 152 of them, 24 raw `<input>`, five hand-built tables and six hand-rolled `<details>`, each with its own border, background and hover recipe.
@@ -1489,7 +1502,10 @@ example ships in [`deploy/frontend`](https://github.com/kibertoad/cat-factory/tr
   `taskExpansion` store and driven by `useTaskExpansion`.
 - **Sidebar & chrome** (`components/layout`): board/account switchers, palettes
   entry points, the language + [interface-mode](#interface-modes-basic--advanced)
-  switchers, the `SpendWarningBanner`, and the toolbar (zoom, LOD, decision queue).
+  switchers, the Views switcher (`WorkViewSwitcher`), the `SpendWarningBanner`, and the toolbar
+  (zoom, LOD, and the decision counter, which opens the queue view).
+- **Queue view** (`components/queue`): `QueueView` and `QueueCard`, the board's second view. It
+  regroups the swimlane verdict and reuses the board card's actions; see [Queue view](#queue-view).
 - **Palettes** (`components/palettes`): drag blocks, pipelines and agents onto
   the board.
 - **Describe new work** (`components/queue/DescribeWorkModal.vue`, `utils/describeWork.ts`): the
@@ -1504,6 +1520,11 @@ example ships in [`deploy/frontend`](https://github.com/kibertoad/cat-factory/tr
   setup. It adds no probe of its own: each row reads what its banner or startup dialog already
   reads (`useSetupChecklist`) and opens the same surface. "Checking" and "missing" are separate
   states, because an unanswered probe and an absent capability are opposite facts.
+- **Notifications inbox** (`components/layout/NotificationsInbox.vue`, `utils/notificationRoutes.ts`):
+  a card that asks for a person carries its verb ("Answer", "Review", ...) as the primary button,
+  and "Mark read" is secondary. `NOTIFICATION_ROUTES` is exhaustive over the notification types and
+  holds each one's verb and destination, so the title link and the button cannot open different
+  places. A route that can only select the task is named "Open".
 - **Inspector** (`components/panels` + `panels/inspector`): per-block tabs:
   structure, dependencies, model + fragment picker, live execution, and linked
   docs/issues/scenarios. Decisions resolve via `DecisionModal`. A `review` task

package/app/components/assistant/AssistantModal.vue

@@ -24,6 +24,7 @@ import type { AssistantActionId, AssistantOutcome } from '~/types/domain'
 import { answerFor, assistantSurface, revealTarget, submitGate } from './AssistantModal.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import Spinner from '~/components/common/Spinner.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -153,7 +154,7 @@ function reveal(blockId: string): void {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('assistant.title')" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" :title="t('assistant.title')">
     <template #body>
       <div class="space-y-4">
         <p class="text-sm text-muted">{{ t('assistant.intro') }}</p>
@@ -361,5 +362,5 @@ function reveal(blockId: string): void {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/board/AddTaskModal.vue

@@ -48,6 +48,7 @@ import { descriptorFieldDefaults } from '@cat-factory/contracts'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import { buildTaskTypePickerRows } from '~/utils/taskTypePicker'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const ui = useUiStore()
 // Interface tier. In BASIC mode this form asks for the task itself (type, title,
@@ -910,7 +911,7 @@ function createRefusalMessage(error: unknown): string | null {
 </script>
 
 <template>
-  <UModal v-model:open="modalOpen" :title="t('board.addTask.title')">
+  <AppModal size="form" v-model:open="modalOpen" :title="t('board.addTask.title')">
     <template #body>
       <div class="space-y-4" data-testid="add-task-modal">
         <p v-if="container" class="text-xs text-muted">
@@ -1459,5 +1460,5 @@ function createRefusalMessage(error: unknown): string | null {
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/board/CreateInitiativeModal.vue

@@ -26,6 +26,7 @@ import { GENERIC_PRESET_ID } from '~/stores/initiative'
 import DescriptorFields from '~/components/common/DescriptorFields.vue'
 import ContextAttachmentFields from '~/components/context/ContextAttachmentFields.vue'
 import type { PendingContext } from '~/composables/useContextLinking'
+import AppModal from '~/components/common/AppModal.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -175,7 +176,7 @@ async function create() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('initiative.create.title')">
+  <AppModal size="form" v-model:open="open" :title="t('initiative.create.title')">
     <template #body>
       <div class="space-y-4" data-testid="create-initiative-modal">
         <p v-if="frame" class="text-xs text-muted">
@@ -291,5 +292,5 @@ async function create() {
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/board/RecurringPipelineModal.vue

@@ -13,6 +13,7 @@ import { apiErrorReason } from '~/composables/api/errors'
 import { pipelineAllowedForSchedule } from '~/utils/pipeline'
 import { appliesIntakePredicate } from '~/utils/intakePredicates'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -403,7 +404,7 @@ async function add() {
 </script>
 
 <template>
-  <UModal v-model:open="modalOpen" :title="t('board.recurring.title')">
+  <AppModal size="form" v-model:open="modalOpen" :title="t('board.recurring.title')">
     <template #body>
       <div class="space-y-4">
         <p v-if="frame" class="text-xs text-muted">
@@ -689,5 +690,5 @@ async function add() {
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/board/ReviewFrictionDialog.vue

@@ -7,6 +7,7 @@
 // pages/index.vue. See backend/docs/review-debt-friction.md.
 import { computed } from 'vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -76,12 +77,12 @@ function createAnyway() {
 </script>
 
 <template>
-  <UModal
+  <AppModal
+    size="prompt"
     v-model:open="open"
     :title="title"
     :dismissible="!pending"
     :close="{ disabled: pending }"
-    :ui="{ content: 'max-w-xl' }"
   >
     <template #body>
       <div v-if="ctx" class="space-y-5">
@@ -144,5 +145,5 @@ function createAnyway() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -166,6 +166,8 @@ watch(open, (isOpen) => {
 </script>
 
 <template>
+  <!-- workbench-width-ok: a review that puts the evidence files beside every suggestion (768px).
+       Its shell waits on #2359. -->
   <UModal
     v-model:open="open"
     :title="t('bootstrap.adoption.title')"

package/app/components/bootstrap/BootstrapModal.vue

@@ -23,6 +23,7 @@ import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import { appInstallationManageUrl, newRepoUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const ui = useUiStore()
 const bootstrap = useBootstrapStore()
@@ -53,7 +54,7 @@ watch(
 async function loadGitHubRepos() {
   try {
     await github.probe()
-    if (github.connected) await github.load()
+    await github.refresh()
   } catch {
     // GitHub integration off / unreachable → the repo picker just isn't offered.
   }
@@ -604,7 +605,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 </script>
 
 <template>
-  <UModal v-model:open="modalOpen" :title="t('bootstrap.title')" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="modalOpen" :title="t('bootstrap.title')">
     <template #body>
       <div class="space-y-6">
         <!-- Three states, because each promises the user something different about the repo.
@@ -1080,5 +1081,5 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
         </section>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/common/AppModal.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// The app's modal: `UModal` at one of the named overlay widths (`utils/overlaySize.ts`, #2251).
+//
+// `UModal` has no `size` prop, and a `size` variant under `app.config.ts`'s `ui.modal` would never
+// be selected (Nuxt UI passes only `transition`, `fullscreen`, `overlay` and `scrollable` into the
+// variant function), so the width lives here and reaches the modal through `ui.content`. A call
+// site still passes any other `ui` slot, and any other content class (a z-index), unchanged.
+//
+// Every other prop, listener and slot passes straight through to `UModal`. The props interface
+// extends `ModalProps` so a call site is still type-checked against `UModal`, and `@vue-ignore`
+// keeps those props out of the runtime declaration: declared, an absent boolean such as
+// `dismissible` would arrive as `false` and override `UModal`'s own default.
+import type { ModalProps } from '@nuxt/ui'
+import { OVERLAY_WIDTH_CLASS, type OverlaySize } from '~/utils/overlaySize'
+
+interface AppModalProps extends /* @vue-ignore */ Omit<ModalProps, 'ui'> {
+  /** What kind of dialog this is; the width follows from it. */
+  size: OverlaySize
+  ui?: ModalProps['ui']
+}
+
+const props = defineProps<AppModalProps>()
+defineOptions({ inheritAttrs: false })
+
+// A fullscreen modal fills the viewport (`inset-0`, no max-width), so it takes no width. `fullscreen`
+// arrives as an attr, so it is read where the template renders and follows a bound value such as
+// `:fullscreen="isPhone"`. The bare attribute arrives as `''`.
+function isFullscreen(attrs: Record<string, unknown>) {
+  return attrs.fullscreen !== undefined && attrs.fullscreen !== false
+}
+
+type ContentClass = NonNullable<ModalProps['ui']>['content']
+
+// The width joins the caller's `content` value as a class list. A replacer function in that list
+// still gets the plain classes appended after its result (Nuxt UI's `tv.js` finds it inside the
+// array), though the `ui` type only admits a replacer standing alone, hence the cast.
+function uiWithWidth(attrs: Record<string, unknown>): ModalProps['ui'] {
+  if (isFullscreen(attrs)) return props.ui
+  const content = [OVERLAY_WIDTH_CLASS[props.size], props.ui?.content] as ContentClass
+  return { ...props.ui, content }
+}
+</script>
+
+<template>
+  <UModal v-bind="$attrs" :ui="uiWithWidth($attrs)">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
+    </template>
+  </UModal>
+</template>

package/app/components/common/ConfirmDialog.vue

@@ -6,6 +6,7 @@
 // crucially, resolves `false` whenever the modal closes without an explicit choice.
 import { computed, onUnmounted, watch } from 'vue'
 import { sharedOverlayStack, type OverlayStackTicket } from '@modular-vue/core'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const { open, current, accept, cancel, dismissed } = useConfirm()
@@ -50,10 +51,11 @@ const isDestructive = computed(() => current.value?.variant === 'destructive')
        the app's full-screen z-50 windows (Model Configuration, Human Test) whose
        dropdowns sit at z-[60] — the dialog must stack above both or it opens invisibly
        behind the window. -->
-  <UModal
+  <AppModal
+    size="prompt"
     v-model:open="model"
     :title="current?.title ?? t('common.confirm.defaultTitle')"
-    :ui="{ overlay: 'z-[70]', content: 'z-[70] max-w-md' }"
+    :ui="{ overlay: 'z-[70]', content: 'z-[70]' }"
   >
     <template #body>
       <div class="flex items-start gap-3" data-testid="confirm-dialog">
@@ -87,5 +89,5 @@ const isDestructive = computed(() => current.value?.variant === 'destructive')
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/common/KeyboardShortcutsHelp.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-// The keyboard-shortcuts cheatsheet, opened with "?" (or from the command bar). A plain
-// UModal listing every global shortcut with its keys rendered as UKbd chips. Driven by the
+// The keyboard-shortcuts cheatsheet, opened with "?" (or from the command bar). A prompt-sized
+// AppModal listing every global shortcut with its keys rendered as UKbd chips. Driven by the
 // ui store so "?" anywhere toggles it.
+import AppModal from '~/components/common/AppModal.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 
@@ -29,7 +31,7 @@ const shortcuts = computed(() => [
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('layout.shortcuts.title')" :ui="{ content: 'max-w-md' }">
+  <AppModal size="prompt" v-model:open="open" :title="t('layout.shortcuts.title')">
     <template #body>
       <dl class="space-y-2" data-testid="shortcuts-help">
         <div
@@ -44,5 +46,5 @@ const shortcuts = computed(() => [
         </div>
       </dl>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/documents/DocumentImportModal.vue

@@ -4,6 +4,7 @@ import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Import pages from a connected document source and pick one to expand into
 // board structure. A source selector lets the user choose which connected source
@@ -73,7 +74,7 @@ function preview(externalId: string) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('documents.import.title')">
+  <AppModal size="form" v-model:open="open" :title="t('documents.import.title')">
     <template #title>
       <IntegrationBackTitle :title="t('documents.import.title')" @back="back" />
     </template>
@@ -163,5 +164,5 @@ function preview(externalId: string) {
         />
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -13,6 +13,7 @@
 // remedy belongs to an admin in a different surface and a dead control states nothing.
 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()
@@ -109,7 +110,11 @@ async function disconnect() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="descriptor?.label ?? t('documents.connect.title')">
+  <AppModal
+    size="form"
+    v-model:open="open"
+    :title="descriptor?.label ?? t('documents.connect.title')"
+  >
     <template #title>
       <IntegrationBackTitle
         :title="descriptor?.label ?? t('documents.connect.title')"
@@ -170,5 +175,5 @@ async function disconnect() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -5,6 +5,7 @@ import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Manage the workspace's per-DocKind TEMPLATE (singular) + EXEMPLAR (multi) document links (WS1).
 // A kind can be pointed at one of the workspace's already-imported documents so its parsed
@@ -89,7 +90,7 @@ async function unlink(doc: SourceDocument) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('documents.templates.title')">
+  <AppModal size="form" v-model:open="open" :title="t('documents.templates.title')">
     <template #title>
       <IntegrationBackTitle :title="t('documents.templates.title')" @back="back" />
     </template>
@@ -238,5 +239,5 @@ async function unlink(doc: SourceDocument) {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/documents/SpawnPreviewModal.vue

@@ -2,6 +2,7 @@
 import { isDesignSource } from '@cat-factory/contracts'
 import type { DocumentBoardPlan } from '~/types/domain'
 import Spinner from '~/components/common/Spinner.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Preview the structure an imported document expands into, then spawn it. The
 // plan is fetched fresh on open; a badge makes clear whether an LLM or the
@@ -122,7 +123,7 @@ async function spawn() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('documents.spawn.title')">
+  <AppModal size="form" v-model:open="open" :title="t('documents.spawn.title')">
     <template #body>
       <div class="space-y-4">
         <div v-if="plan" class="flex items-center justify-between gap-2">
@@ -227,5 +228,5 @@ async function spawn() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/documents/StartFromDesignModal.vue

@@ -21,6 +21,7 @@
 import { refRowFor, classifyRefFailure, type RefState } from './ContextDocumentPicker.logic'
 import type { DocumentSourceKind, ResolvedDocumentRef } from '~/types/domain'
 import Spinner from '~/components/common/Spinner.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -151,7 +152,7 @@ function stage() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('documents.startFromDesign.title')">
+  <AppModal size="form" v-model:open="open" :title="t('documents.startFromDesign.title')">
     <template #body>
       <div class="space-y-4">
         <p class="text-sm text-muted">{{ t('documents.startFromDesign.intro') }}</p>
@@ -232,5 +233,5 @@ function stage() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/environments/EnvironmentSetupWizard.vue

@@ -35,6 +35,8 @@ const input = computed(() => ({ frameId: ui.environmentWizardFrameId }))
 </script>
 
 <template>
+  <!-- workbench-width-ok: a multi-step wizard with a stepper (768px). Its shell waits on #2359.
+       -->
   <UModal
     v-model:open="open"
     :title="t('environmentWizard.title')"

package/app/components/foundational/FoundationalServicePanel.vue

@@ -19,6 +19,8 @@ const open = computed({
 </script>
 
 <template>
+  <!-- workbench-width-ok: a library of the merged service catalog (768px). Its shell waits on
+       #2359. -->
   <UModal
     v-model:open="open"
     :title="t('foundational.panel.title')"

package/app/components/fragments/FragmentLibraryPanel.vue

@@ -18,6 +18,8 @@ const open = computed({
 </script>
 
 <template>
+  <!-- workbench-width-ok: a library of the merged fragment catalog (768px). Its shell waits on
+       #2359. -->
   <UModal v-model:open="open" :title="t('fragments.panel.title')" :ui="{ content: 'max-w-3xl' }">
     <template #body>
       <!-- The anchor for the tutorial tour about steering agents with standards, which points at

package/app/components/github/AddServiceFromRepoModal.vue

@@ -29,6 +29,7 @@ import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue
 import { appInstallationManageUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 
@@ -58,10 +59,10 @@ const adding = ref(false)
 async function loadRepos() {
   try {
     await github.probe()
-    // Load only the linked-repo projection (to flag repos already on the board). The
+    // Load the linked-repo projection once per board (to flag repos already on the board). The
     // available-repos list is NOT prefetched — it's searched server-side on demand once
     // the user types (see the repoQueryRaw watcher), so a wide install isn't shipped whole.
-    if (github.connected) await github.load()
+    await github.refresh()
   } catch {
     // Integration off / unreachable → the picker stays empty, GitHubConnect shows.
   }
@@ -437,7 +438,7 @@ function done() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('github.addService.title')" :ui="{ content: 'max-w-xl' }">
+  <AppModal size="form" v-model:open="open" :title="t('github.addService.title')">
     <template #body>
       <div class="space-y-6">
         <p class="text-sm text-muted">
@@ -682,5 +683,5 @@ function done() {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/github/GitHubPanel.vue

@@ -13,6 +13,7 @@ import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 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()
@@ -99,7 +100,7 @@ watch(
   open,
   (isOpen) => {
     if (!isOpen) return
-    if (github.connected) void github.load()
+    if (github.connected) void github.refresh()
   },
   { immediate: true },
 )
@@ -287,7 +288,7 @@ async function merge(pr: GitHubPullRequest) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="panelTitle" :ui="{ content: 'max-w-2xl' }">
+  <AppModal size="form" v-model:open="open" :title="panelTitle">
     <template #title>
       <IntegrationBackTitle :title="panelTitle" @back="back" />
     </template>
@@ -716,5 +717,5 @@ async function merge(pr: GitHubPullRequest) {
         </template>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/layout/BoardSwitcher.vue

@@ -2,6 +2,7 @@
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { CloudProvider } from '~/types/domain'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Account + board switching. Picks the active account (personal / org) and the
 // active board within it, and manages boards (new / rename / delete). The account
@@ -322,7 +323,11 @@ async function submitPrompt() {
     </UDropdownMenu>
 
     <!-- create / rename prompt -->
-    <UModal v-model:open="promptOpen" :title="prompt ? promptMeta[prompt].title : ''">
+    <AppModal
+      size="prompt"
+      v-model:open="promptOpen"
+      :title="prompt ? promptMeta[prompt].title : ''"
+    >
       <template #body>
         <UForm class="space-y-3" @submit="submitPrompt">
           <UFormField :label="t('layout.boardSwitcher.prompt.nameLabel')">
@@ -364,6 +369,6 @@ async function submitPrompt() {
           </div>
         </UForm>
       </template>
-    </UModal>
+    </AppModal>
   </div>
 </template>

package/app/components/layout/CommandBar.vue

@@ -8,6 +8,7 @@
 
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 interface Command {
   id: string
@@ -256,7 +257,7 @@ function indexOf(cmd: Command) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :ui="{ content: 'max-w-xl' }">
+  <AppModal size="form" v-model:open="open">
     <template #content>
       <div class="flex flex-col" data-testid="command-bar" @keydown="onKeydown">
         <div class="flex items-center gap-2 border-b border-default px-3">
@@ -307,5 +308,5 @@ function indexOf(cmd: Command) {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>