@cat-factory/app 0.315.3 → 0.315.6

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" />

package/app/components/tasks/TaskImportModal.vue

@@ -19,6 +19,7 @@ import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.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'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -120,7 +121,7 @@ async function doSpawnEpic() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="title">
+  <AppModal size="form" v-model:open="open" :title="title">
     <template #title>
       <IntegrationBackTitle :title="title" @back="back" />
     </template>
@@ -215,5 +216,5 @@ async function doSpawnEpic() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -12,6 +12,7 @@
 // available (Jira connected / the GitHub App installed) — there is nothing to offer
 // before that.
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -116,7 +117,7 @@ async function toggleEnabled(enabled: boolean) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="descriptor?.label ?? t('tasks.connect.title')">
+  <AppModal size="form" v-model:open="open" :title="descriptor?.label ?? t('tasks.connect.title')">
     <template #title>
       <IntegrationBackTitle :title="descriptor?.label ?? t('tasks.connect.title')" @back="back" />
     </template>
@@ -212,5 +213,5 @@ async function toggleEnabled(enabled: boolean) {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/theme/ThemeImportModal.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { useThemeStore } from '~/stores/theme'
 import { decodeThemeLink, type ThemeLinkDecodeResult } from '~/utils/theme/link'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Import a theme built in the Nuxt UI theme editor (https://ui.nuxt.com/theme): the user pastes
 // the editor's share link (or the raw document JSON), names it, and the theme is stored in this
@@ -60,7 +61,8 @@ async function submit() {
 </script>
 
 <template>
-  <UModal
+  <AppModal
+    size="prompt"
     v-model:open="open"
     :title="t('appearance.import.title')"
     :description="t('appearance.import.description')"
@@ -111,5 +113,5 @@ async function submit() {
         </div>
       </UForm>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tutorial/TutorialCatalogue.vue

@@ -14,6 +14,7 @@ import { buildCatalogueRows, summarizeProgress } from './TutorialCatalogue.logic
 import type { TutorialCatalogueRow } from './TutorialCatalogue.logic'
 import { TUTORIAL_ACTION_KEYS, TUTORIAL_STATUS_KEYS } from '~/utils/tutorial'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const tutorial = useTutorialStore()
@@ -51,11 +52,11 @@ const statusColor = (row: TutorialCatalogueRow) =>
 </script>
 
 <template>
-  <UModal
+  <AppModal
+    size="form"
     v-model:open="open"
     :title="t('tutorial.catalogue.title')"
     :description="t('tutorial.catalogue.intro')"
-    :ui="{ content: 'max-w-2xl' }"
   >
     <template #body>
       <div class="space-y-4" data-testid="tutorial-catalogue">
@@ -162,5 +163,5 @@ const statusColor = (row: TutorialCatalogueRow) =>
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tutorial/TutorialPrompt.vue

@@ -15,6 +15,7 @@
 // prompt never auto-opens again), while closing without answering defers to next launch.
 import { TUTORIAL_ACTION_KEYS } from '~/utils/tutorial'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const tutorial = useTutorialStore()
@@ -34,7 +35,7 @@ const undecided = computed(() => tutorial.decision === null)
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('tutorial.prompt.title')" :ui="{ content: 'max-w-lg' }">
+  <AppModal size="prompt" v-model:open="open" :title="t('tutorial.prompt.title')">
     <template #body>
       <!-- NOTE for spec authors: this marks the modal's BODY, so it is the "prompt is
            showing" signal, not a container for everything in the prompt. The footer's
@@ -125,5 +126,5 @@ const undecided = computed(() => tutorial.decision === null)
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/stores/github/connection.ts

@@ -14,7 +14,7 @@ import type { GitHubStoreContext } from './context'
  */
 export function createGitHubConnectionActions(ctx: GitHubStoreContext) {
   const { api, workspace, available, connection, installations, loadingInstallations } = ctx
-  const { repos, availableRepos, pulls, issues, branches, syncing, load } = ctx
+  const { availableRepos, branches, syncing, load, clearProjection } = ctx
 
   /** The URL a workspace owner visits to install the App against this workspace. */
   function getInstallUrl(): Promise<string> {
@@ -48,10 +48,8 @@ export function createGitHubConnectionActions(ctx: GitHubStoreContext) {
     // Backends predating the discriminator omit `provider`; those connections are GitHub App ones.
     await DISCONNECT_BY_PROVIDER[connection.value?.provider ?? 'github'](workspace.requireId())
     connection.value = null
-    repos.value = []
+    clearProjection()
     availableRepos.value = []
-    pulls.value = []
-    issues.value = []
     branches.value = {}
   }
 

package/app/stores/github/context.ts

@@ -45,6 +45,10 @@ export interface GitHubStoreContext {
   syncing: Ref<boolean>
   /** Whether an App installation is bound (the store's `connected` computed). */
   connected: Readonly<Ref<boolean>>
-  /** Reload the cached repos/PRs/issues projection (the store's `load`). */
+  /** Reload the cached repos/PRs/issues projection after a write (the store's `load`). */
   load: () => Promise<void>
+  /** Record a direct write to the projection, so a read that started before it cannot land. */
+  markWritten: () => void
+  /** Empty the repos/PRs/issues projection and mark it unloaded, so `ensureLoaded` reads it again. */
+  clearProjection: () => void
 }

package/app/stores/github/projectionLoad.ts

@@ -0,0 +1,127 @@
+import type { Ref } from 'vue'
+import type { GitHubConnection, GitHubIssue, GitHubPullRequest, GitHubRepo } from '~/types/domain'
+import type { GitHubStoreContext } from '~/stores/github/context'
+
+/** What the projection load reads and writes. The store owns every ref. */
+interface ProjectionLoadDeps {
+  api: GitHubStoreContext['api']
+  workspace: GitHubStoreContext['workspace']
+  connection: Readonly<Ref<GitHubConnection | null>>
+  repos: Ref<GitHubRepo[]>
+  pulls: Ref<GitHubPullRequest[]>
+  issues: Ref<GitHubIssue[]>
+  loading: Ref<boolean>
+}
+
+interface ProjectionLoad {
+  /** Read the projection again after a write, never sharing a read that started before it. */
+  load: () => Promise<void>
+  /** Read the projection again, sharing a read already in flight for the same connection. */
+  refresh: () => Promise<void>
+  /** Read the projection unless it is already loaded for the current connection. */
+  ensureLoaded: () => Promise<void>
+  /** Record a direct write to the projection, so a read that started before it cannot land. */
+  markWritten: () => void
+  /** Empty the lists and forget the load in one step. */
+  clearProjection: () => void
+}
+
+interface InFlightRead {
+  key: string
+  promise: Promise<void>
+}
+
+/**
+ * The repos / pull requests / issues projection read, and the record of what it is loaded for.
+ *
+ * One generation counter answers every question about whether a read may land. A read takes the
+ * next number when it starts, and every direct write to the projection (`markWritten()`, which
+ * `clearProjection()` calls too) takes one as well. A read lands only if its number is still the
+ * latest and it was started for the connection that is current when it finishes, so a result that
+ * a newer read, a write, a disconnect or a board switch overtook is dropped.
+ *
+ * The projection counts as loaded for a key made of the workspace and the connection. A connected
+ * workspace with no linked repos is loaded: the empty list is its answer. A different workspace or
+ * a new connection is a different key, so a reinstall is read again without anyone telling this
+ * module that it happened.
+ *
+ * There are three doors. `ensureLoaded()` reads only when nothing is loaded, `refresh()` is a
+ * deliberate re-read that still shares a read in flight, and `load()` is the re-read after a write,
+ * which starts its own read so it never returns what the write replaced.
+ */
+export function createGitHubProjectionLoad(deps: ProjectionLoadDeps): ProjectionLoad {
+  const { api, workspace, connection, repos, pulls, issues, loading } = deps
+
+  let generation = 0
+  let loadedKey: string | null = null
+  let inFlight: InFlightRead | null = null
+
+  /** What the projection is read for. Null while there is nothing to read: no board or no connection. */
+  function currentKey(): string | null {
+    const conn = connection.value
+    if (!workspace.workspaceId || !conn) return null
+    return `${workspace.workspaceId}:${conn.provider}:${conn.installationId}:${conn.connectedAt}`
+  }
+
+  async function read(mine: number, key: string, askedFor: string): Promise<void> {
+    const [r, p, i] = await Promise.all([
+      api.listGitHubRepos(askedFor),
+      api.listGitHubPullRequests(askedFor),
+      api.listGitHubIssues(askedFor),
+    ])
+    if (mine !== generation || key !== currentKey()) return
+    repos.value = r
+    pulls.value = p
+    issues.value = i
+    loadedKey = key
+  }
+
+  function start(key: string): Promise<void> {
+    const mine = ++generation
+    loading.value = true
+    const entry: InFlightRead = {
+      key,
+      promise: read(mine, key, workspace.requireId()).finally(() => {
+        // Only the read that still owns the slot settles the flag. One that a write, a clear or a
+        // newer read replaced must not report the projection as settled.
+        if (inFlight === entry) {
+          inFlight = null
+          loading.value = false
+        }
+      }),
+    }
+    inFlight = entry
+    return entry.promise
+  }
+
+  function markWritten(): void {
+    generation++
+    inFlight = null
+    loading.value = false
+  }
+
+  return {
+    load: () => {
+      const key = currentKey()
+      return key ? start(key) : Promise.resolve()
+    },
+    refresh: () => {
+      const key = currentKey()
+      if (!key) return Promise.resolve()
+      return inFlight?.key === key ? inFlight.promise : start(key)
+    },
+    ensureLoaded: () => {
+      const key = currentKey()
+      if (!key || loadedKey === key) return Promise.resolve()
+      return inFlight?.key === key ? inFlight.promise : start(key)
+    },
+    markWritten,
+    clearProjection: () => {
+      markWritten()
+      loadedKey = null
+      repos.value = []
+      pulls.value = []
+      issues.value = []
+    },
+  }
+}

package/app/stores/github/repoActions.ts

@@ -16,7 +16,7 @@ import { pullKey, type GitHubStoreContext } from './context'
  */
 export function createGitHubRepoActions(ctx: GitHubStoreContext) {
   const { api, workspace, connected, repos, availableRepos, loadingAvailable, savingRepos } = ctx
-  const { branches, repoFiles, upsertPull, getPull, load } = ctx
+  const { branches, repoFiles, upsertPull, getPull, load, markWritten } = ctx
 
   /**
    * Load the repos the installation can access, with this workspace's link state.
@@ -55,6 +55,7 @@ export function createGitHubRepoActions(ctx: GitHubStoreContext) {
     savingRepos.value = true
     try {
       repos.value = await api.setGitHubLinkedRepos(workspace.requireId(), repoGithubIds)
+      markWritten()
       // Reflect the new link state in the picker and refresh PRs/issues.
       const linked = new Set(repoGithubIds)
       availableRepos.value = availableRepos.value.map((r) => ({
@@ -117,6 +118,7 @@ export function createGitHubRepoActions(ctx: GitHubStoreContext) {
   async function openPullRequest(repoGithubId: number, input: OpenPullRequestInput) {
     const pr = await api.openGitHubPullRequest(workspace.requireId(), repoGithubId, input)
     upsertPull(pr)
+    markWritten()
     return pr
   }
 
@@ -128,7 +130,10 @@ export function createGitHubRepoActions(ctx: GitHubStoreContext) {
     await api.mergeGitHubPullRequest(workspace.requireId(), repoGithubId, number, input)
     // Optimistically reflect the merge until the next sync confirms it.
     const existing = getPull(pullKey(repoGithubId, number))
-    if (existing) upsertPull({ ...existing, state: 'closed', merged: true })
+    if (existing) {
+      upsertPull({ ...existing, state: 'closed', merged: true })
+      markWritten()
+    }
   }
 
   function comment(repoGithubId: number, number: number, body: string) {