@cat-factory/app 0.315.4 → 0.315.7

package/app/stores/github.ts

@@ -20,6 +20,7 @@ import { useServicesStore } from '~/stores/services'
 import { pullKey, type GitHubStoreContext } from '~/stores/github/context'
 import { createGitHubConnectionActions } from '~/stores/github/connection'
 import { createGitHubProbe } from '~/stores/github/probe'
+import { createGitHubProjectionLoad } from '~/stores/github/projectionLoad'
 import { createGitHubRepoActions } from '~/stores/github/repoActions'
 import { createVcsConnectActions, createVcsProviderViews } from '~/stores/github/vcsConnect'
 
@@ -138,23 +139,20 @@ export const useGitHubStore = defineStore('github', () => {
     return branchWebUrl(providerOfRepo(repoGithubId), repoUrl(repoGithubId), branch)
   }
 
-  /** Load the cached repos, pull requests and issues for the workspace. */
-  async function load() {
-    if (!connected.value) return
-    loading.value = true
-    try {
-      const [r, p, i] = await Promise.all([
-        api.listGitHubRepos(workspace.requireId()),
-        api.listGitHubPullRequests(workspace.requireId()),
-        api.listGitHubIssues(workspace.requireId()),
-      ])
-      repos.value = r
-      pulls.value = p
-      issues.value = i
-    } finally {
-      loading.value = false
-    }
-  }
+  // The projection read and the record of whether it is loaded for this workspace.
+  const projection = createGitHubProjectionLoad({
+    api,
+    workspace,
+    connection,
+    repos,
+    pulls,
+    issues,
+    loading,
+  })
+  /** Reload the cached repos, pull requests and issues after a write. */
+  const load = projection.load
+  /** Reload them on demand, sharing a read already in flight. */
+  const refresh = projection.refresh
 
   /** Full file listing per repo (recursive tree), cached by GitHub numeric id. */
   const repoFiles = ref<Record<number, RepoTreeEntry[]>>({})
@@ -184,6 +182,8 @@ export const useGitHubStore = defineStore('github', () => {
     syncing,
     connected,
     load,
+    markWritten: projection.markWritten,
+    clearProjection: projection.clearProjection,
   }
   // The board-load probe (integration availability + the bound connection + the connect options +
   // the credential check). Built from the context rather than inline, so this setup stays within
@@ -193,11 +193,11 @@ export const useGitHubStore = defineStore('github', () => {
   /**
    * Ensure the projection (repos/PRs/issues) is loaded at least once — for views
    * that need it without opening the GitHub panel (e.g. the inspector's repo link).
-   * Probes the integration first if it hasn't been yet.
+   * Probes the integration first if it hasn't been yet. Concurrent callers share one read.
    */
   async function ensureLoaded() {
     if (available.value === null) await probe()
-    if (connected.value && repos.value.length === 0) await load()
+    await projection.ensureLoaded()
   }
 
   const connectionActions = createGitHubConnectionActions(context)
@@ -213,16 +213,14 @@ export const useGitHubStore = defineStore('github', () => {
    * land. `available` returns to `null` (unknown) so the onboarding gate re-resolves.
    */
   function reset() {
+    projection.clearProjection()
     available.value = null
     unavailableCause.value = null
     connection.value = null
     connectOptions.value = []
     patCheck.value = null
     installations.value = []
-    repos.value = []
     availableRepos.value = []
-    pulls.value = []
-    issues.value = []
     branches.value = {}
     repoFiles.value = {}
   }
@@ -259,6 +257,7 @@ export const useGitHubStore = defineStore('github', () => {
     probe,
     ensureProbed,
     load,
+    refresh,
     ensureLoaded,
     repoFiles,
     ...connectionActions,

package/app/stores/ui/builderModelConfigHandoff.spec.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest'
+import { createUiModals } from '~/stores/ui/modals'
+
+/**
+ * The pipeline builder and the model configuration never stack. The builder is a modal Reka
+ * slideover that holds `pointer-events: none` on <body> until its exit animation ends, so the
+ * model configuration (the app's own takeover) only shows once the builder reports it has left.
+ */
+describe('pipeline builder to model configuration handoff', () => {
+  it('shows the model configuration only after the builder has left, and reopens the builder on close', () => {
+    const ui = createUiModals()
+    ui.openBuilder()
+
+    ui.openModelConfig()
+    expect(ui.builderOpen.value).toBe(false)
+    expect(ui.modelConfigOpen.value).toBe(false)
+
+    ui.builderLeft()
+    expect(ui.modelConfigOpen.value).toBe(true)
+
+    ui.closeModelConfig()
+    expect(ui.modelConfigOpen.value).toBe(false)
+    expect(ui.builderOpen.value).toBe(true)
+  })
+
+  it('opens at once when the builder is not open, and ignores a stray builder exit', () => {
+    const ui = createUiModals()
+    ui.openModelConfig()
+    expect(ui.modelConfigOpen.value).toBe(true)
+
+    ui.closeModelConfig()
+    expect(ui.builderOpen.value).toBe(false)
+
+    ui.builderLeft()
+    expect(ui.modelConfigOpen.value).toBe(false)
+  })
+
+  it('returns to the builder once, not on every later close', () => {
+    const ui = createUiModals()
+    ui.openBuilder()
+    ui.openModelConfig()
+    ui.builderLeft()
+    ui.closeModelConfig()
+    ui.builderOpen.value = false
+
+    ui.openModelConfig()
+    ui.closeModelConfig()
+    expect(ui.builderOpen.value).toBe(false)
+  })
+
+  it('opening the builder another way closes the model configuration and drops the return', () => {
+    const ui = createUiModals()
+    ui.openBuilder()
+    ui.openModelConfig()
+    ui.builderLeft()
+
+    ui.openBuilder()
+    expect(ui.modelConfigOpen.value).toBe(false)
+    expect(ui.builderOpen.value).toBe(true)
+
+    ui.builderOpen.value = false
+    ui.openModelConfig()
+    ui.closeModelConfig()
+    expect(ui.builderOpen.value).toBe(false)
+  })
+
+  it('drops a pending show when the builder is reopened before it has left', () => {
+    const ui = createUiModals()
+    ui.openBuilder()
+    ui.openModelConfig()
+    ui.openBuilder()
+
+    ui.builderLeft()
+    expect(ui.modelConfigOpen.value).toBe(false)
+  })
+
+  it('reports a return to the builder once, so it can skip its reloads', () => {
+    const ui = createUiModals()
+    ui.openBuilder()
+    expect(ui.consumeBuilderReturn()).toBe(false)
+
+    ui.openModelConfig()
+    ui.builderLeft()
+    ui.closeModelConfig()
+    expect(ui.consumeBuilderReturn()).toBe(true)
+    expect(ui.consumeBuilderReturn()).toBe(false)
+  })
+})

package/app/stores/ui/modals.ts

@@ -182,6 +182,80 @@ function createHealthAdvisoryModals() {
   }
 }
 
+/**
+ * The pipeline builder and the model configuration never stack. Opening the model configuration
+ * from the builder closes the builder, shows the model configuration once the builder has
+ * finished leaving, and brings the builder back when the model configuration closes.
+ *
+ * The builder is a `USlideover`, a modal Reka layer: while it is mounted, Reka sets
+ * `pointer-events: none` on `<body>`, and lifts it only when the exit animation ends. The model
+ * configuration is the app's own takeover, teleported to `<body>` and not a Reka layer, so shown
+ * over the builder (or during its exit) every click landed on the builder behind it. Waiting for
+ * the exit (`builderLeft`, from the builder's `after:leave`) fixes that without an escape hatch on
+ * the panel, which would also defeat the pointer lock of the panel's OWN dropdowns. The fix lives
+ * here, not at the builder's "Configure models" button, because the "choose a model" action on a
+ * run-admission failure toast (`preset_unsatisfiable`, `model_policy_blocked`) also opens the
+ * model configuration.
+ *
+ * This owns BOTH openers: `openBuilder` closes the model configuration and drops a pending return,
+ * so a builder the user opened another way is not followed by a stale reopen.
+ *
+ * Closing the builder unmounts its body. The draft pipeline is in the pipelines store and survives,
+ * but component-local state does not: a half-typed output size in the binary-output picker, the
+ * rejected media types and references it reports, and the guarded-gate roster. The builder
+ * reloads nothing on the way back (`consumeBuilderReturn`), since nothing it loads changes while
+ * the model configuration is open.
+ *
+ * Other takeovers (reports, kaizen, operator dashboard) opened over a modal Reka layer have the
+ * same unclickable-takeover defect and are not handled here.
+ */
+function createBuilderModelConfigHandoff(
+  misc: Pick<ReturnType<typeof createMiscModals>, 'builderOpen'>,
+  panels: Pick<ReturnType<typeof createIntegrationPanelModals>, 'modelConfigOpen'>,
+) {
+  const returnToBuilder = ref(false)
+  const showAfterBuilderExit = ref(false)
+  const returningToBuilder = ref(false)
+
+  function openModelConfig() {
+    if (showAfterBuilderExit.value) return
+    if (misc.builderOpen.value) {
+      misc.builderOpen.value = false
+      returnToBuilder.value = true
+      showAfterBuilderExit.value = true
+      return
+    }
+    panels.modelConfigOpen.value = true
+  }
+  function builderLeft() {
+    if (!showAfterBuilderExit.value) return
+    showAfterBuilderExit.value = false
+    panels.modelConfigOpen.value = true
+  }
+  function closeModelConfig() {
+    panels.modelConfigOpen.value = false
+    if (!returnToBuilder.value) return
+    returnToBuilder.value = false
+    returningToBuilder.value = true
+    misc.builderOpen.value = true
+  }
+  function openBuilder() {
+    panels.modelConfigOpen.value = false
+    showAfterBuilderExit.value = false
+    returnToBuilder.value = false
+    returningToBuilder.value = false
+    misc.builderOpen.value = true
+  }
+  /** True once per return from the model configuration, so the builder can skip its reloads. */
+  function consumeBuilderReturn(): boolean {
+    const returning = returningToBuilder.value
+    returningToBuilder.value = false
+    return returning
+  }
+
+  return { openModelConfig, closeModelConfig, openBuilder, builderLeft, consumeBuilderReturn }
+}
+
 /**
  * Small standalone surfaces with no hub relationship: the pipeline builder and the
  * decision-wait window.
@@ -190,9 +264,6 @@ function createMiscModals() {
   const builderOpen = ref(false)
   const decisionContext = ref<{ instanceId: string; decisionId: string } | null>(null)
 
-  function openBuilder() {
-    builderOpen.value = true
-  }
   function openDecision(instanceId: string, decisionId: string) {
     decisionContext.value = { instanceId, decisionId }
   }
@@ -200,7 +271,7 @@ function createMiscModals() {
     decisionContext.value = null
   }
 
-  return { builderOpen, decisionContext, openBuilder, openDecision, closeDecision }
+  return { builderOpen, decisionContext, openDecision, closeDecision }
 }
 
 /** What the guided review window opens on: a session, a pull request, or neither (the picker). */
@@ -590,6 +661,7 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
   // API access tokens: the workspace's inbound public-API keys external systems present to
   // the `/api/v1` surface. Opened from the Integrations hub.
   const apiTokensOpen = ref(false)
+  // Opened and closed by `createBuilderModelConfigHandoff`, which hands the pipeline builder over.
   const modelConfigOpen = ref(false)
   // LLM-vendor subscription credentials (the token pool powering the Claude Code
   // / Codex harnesses). `vendorCredentialsTab` lets a caller deep-link to one tab —
@@ -651,12 +723,6 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
   function closeApiTokens() {
     apiTokensOpen.value = false
   }
-  function openModelConfig() {
-    modelConfigOpen.value = true
-  }
-  function closeModelConfig() {
-    modelConfigOpen.value = false
-  }
   function openVendorCredentials(tab = 'pool') {
     resetHubReturn()
     vendorCredentialsTab.value = tab
@@ -718,8 +784,6 @@ function createIntegrationPanelModals(resetHubReturn: ResetHubReturn) {
     closeOperatorDashboard,
     openApiTokens,
     closeApiTokens,
-    openModelConfig,
-    closeModelConfig,
     openVendorCredentials,
     setVendorCredentialsTab,
     closeVendorCredentials,
@@ -1223,6 +1287,7 @@ export function createUiModals() {
   const settings = createSettingsModals(resetHubReturn)
   const infra = createInfraModals(resetHubReturn)
   const ai = createAiOnboardingModals()
+  const builderHandoff = createBuilderModelConfigHandoff(misc, panels)
 
   return {
     integrationsOpen,
@@ -1249,5 +1314,6 @@ export function createUiModals() {
     ...settings,
     ...infra,
     ...ai,
+    ...builderHandoff,
   }
 }

package/app/utils/foreignLayers.spec.ts

@@ -0,0 +1,100 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createOverlayStack, type OverlayStack } from '@modular-vue/core'
+import { trackForeignLayers } from '~/utils/foreignLayers'
+
+/** A Reka-shaped layer as Nuxt UI portals it: a wrapper on `<body>` around the layer element. */
+function openLayer(root: HTMLElement, role: string | null): HTMLElement {
+  const wrapper = document.createElement('div')
+  const layer = document.createElement('div')
+  layer.setAttribute('data-dismissable-layer', '')
+  layer.dataset.state = 'open'
+  if (role) layer.setAttribute('role', role)
+  wrapper.append(layer)
+  root.append(wrapper)
+  return layer
+}
+
+/** MutationObserver callbacks run as a microtask after the DOM change. */
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+describe('trackForeignLayers', () => {
+  let root: HTMLElement
+  let stack: OverlayStack
+  let stop: () => void
+
+  beforeEach(() => {
+    root = document.createElement('div')
+    document.body.append(root)
+    stack = createOverlayStack()
+    stop = trackForeignLayers(root, stack)
+  })
+
+  afterEach(() => {
+    stop()
+    root.remove()
+  })
+
+  it('puts an open menu above the overlay under it, and gives the top back when it closes', async () => {
+    const takeover = stack.push()
+    const menu = openLayer(root, 'menu')
+    await settle()
+    expect(takeover.isTop()).toBe(false)
+
+    menu.parentElement!.remove()
+    await settle()
+    expect(takeover.isTop()).toBe(true)
+    expect(stack.size).toBe(1)
+  })
+
+  it('gives the top back when a layer starts its exit animation, before it leaves the DOM', async () => {
+    const takeover = stack.push()
+    const menu = openLayer(root, 'menu')
+    await settle()
+
+    menu.dataset.state = 'closed'
+    await settle()
+    expect(takeover.isTop()).toBe(true)
+  })
+
+  it('takes a ticket for each focus-taking role, and none for a tooltip', async () => {
+    for (const role of ['menu', 'listbox', 'dialog', 'alertdialog']) openLayer(root, role)
+    openLayer(root, null)
+    await settle()
+    expect(stack.size).toBe(4)
+  })
+
+  it('keeps open order, so a menu opened over a modal is the top layer', async () => {
+    const takeover = stack.push()
+    const modal = openLayer(root, 'dialog')
+    await settle()
+    const window = stack.push()
+    expect(window.isTop()).toBe(true)
+
+    // A menu opened inside the window goes above it, and closing the modal under both changes
+    // nothing for the window.
+    const menu = openLayer(root, 'menu')
+    await settle()
+    expect(window.isTop()).toBe(false)
+    modal.parentElement!.remove()
+    menu.parentElement!.remove()
+    await settle()
+    expect(window.isTop()).toBe(true)
+    window.release()
+    expect(takeover.isTop()).toBe(true)
+  })
+
+  it('counts a layer that was already open when tracking started', () => {
+    stop()
+    openLayer(root, 'dialog')
+    stop = trackForeignLayers(root, stack)
+    expect(stack.size).toBe(1)
+  })
+
+  it('releases every ticket when tracking stops', async () => {
+    openLayer(root, 'menu')
+    openLayer(root, 'dialog')
+    await settle()
+    stop()
+    expect(stack.size).toBe(0)
+  })
+})

package/app/utils/foreignLayers.ts

@@ -0,0 +1,71 @@
+// Nuxt UI layers on the shared overlay stack.
+//
+// Two layer stacks run in this app. `useModalBehavior` (`TakeoverShell`, `ResultWindowShell`, the
+// modular overlays) keeps `sharedOverlayStack`; Reka, under every Nuxt UI menu, select, popover
+// and modal, keeps its own. Each one only knows its own layers, so a dropdown opened inside a
+// takeover lost Escape: the shell handles the key first, in the capture phase, and calls
+// `preventDefault()`, and Reka then leaves a prevented Escape alone. The takeover closed and the
+// dropdown stayed.
+//
+// The fix is ONE stack. While a Reka layer is open it holds a ticket, pushed in open order, so
+// it is the top overlay and `useModalBehavior` stands down: no Escape, no Tab trap. Reka then
+// handles its own keys. Only the stack's own API is used here (`push`, `release`); what is
+// Reka-specific is the selector.
+
+import type { OverlayStack, OverlayStackTicket } from '@modular-vue/core'
+
+/**
+ * An open Reka layer that takes focus and owns its keys. Reka marks every layer with
+ * `data-dismissable-layer`, and the role is on the same element: `menu` (dropdown menu), `listbox`
+ * (select), `dialog` (popover, modal), `alertdialog`. A tooltip is a layer too, but it has no
+ * role, so it never takes a ticket: focus stays on its trigger, and a ticket would switch off the
+ * Tab trap under it. `data-state="closed"` is a layer playing its exit animation.
+ */
+export const FOREIGN_LAYER_SELECTOR =
+  '[data-dismissable-layer]:is([role="menu"],[role="listbox"],[role="dialog"],[role="alertdialog"]):not([data-state="closed"])'
+
+const ANY_LAYER = '[data-dismissable-layer]'
+
+/**
+ * Hold one `stack` ticket for each open layer under `root`, for as long as it is open. Returns the
+ * function that stops tracking and releases every ticket.
+ *
+ * What is observed is kept narrow, because `root` is `<body>` and the board re-renders under it
+ * constantly. Reka teleports each layer to `<body>`, so an opening or a closing is a change to
+ * `root`'s DIRECT children, which a non-subtree `childList` observer sees without ever being
+ * told about a board patch. A layer's own exit animation is its `data-state` flipping to
+ * `closed`, which the attribute observer sees; it is filtered to that one attribute and then to
+ * records whose target is a layer. Only those records trigger the one `sync` query.
+ */
+export function trackForeignLayers(root: HTMLElement, stack: OverlayStack): () => void {
+  const tickets = new Map<Element, OverlayStackTicket>()
+
+  function sync(): void {
+    const open = new Set(root.querySelectorAll(FOREIGN_LAYER_SELECTOR))
+    for (const [layer, ticket] of tickets) {
+      if (open.has(layer)) continue
+      ticket.release()
+      tickets.delete(layer)
+    }
+    // Document order is open order: Reka appends each layer's portal to the end of `<body>`.
+    for (const layer of open) {
+      if (!tickets.has(layer)) tickets.set(layer, stack.push())
+    }
+  }
+
+  const portals = new MutationObserver(sync)
+  portals.observe(root, { childList: true })
+
+  const layerState = new MutationObserver((records) => {
+    if (records.some((r) => r.target instanceof Element && r.target.matches(ANY_LAYER))) sync()
+  })
+  layerState.observe(root, { subtree: true, attributes: true, attributeFilter: ['data-state'] })
+  sync()
+
+  return () => {
+    portals.disconnect()
+    layerState.disconnect()
+    for (const ticket of tickets.values()) ticket.release()
+    tickets.clear()
+  }
+}

package/i18n/locales/de.json

@@ -3712,6 +3712,7 @@
       },
       "errors": {
         "listInstallations": "GitHub-Installationen konnten nicht aufgelistet werden",
+        "loadProjection": "Repositories, Pull Requests und Issues konnten nicht geladen werden",
         "startInstall": "Die Installation der GitHub App konnte nicht gestartet werden",
         "connect": "Verbindung nicht möglich"
       }

package/i18n/locales/en.json

@@ -4720,6 +4720,7 @@
       },
       "errors": {
         "listInstallations": "Could not list GitHub installations",
+        "loadProjection": "Could not load repositories, pull requests and issues",
         "startInstall": "Could not start the GitHub App install",
         "connect": "Could not connect"
       }

package/i18n/locales/es.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "No se pudieron listar las instalaciones de GitHub",
+        "loadProjection": "No se pudieron cargar los repositorios, las pull requests y las issues",
         "startInstall": "No se pudo iniciar la instalación de la GitHub App",
         "connect": "No se pudo conectar"
       }

package/i18n/locales/fr.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "Impossible de lister les installations GitHub",
+        "loadProjection": "Impossible de charger les dépôts, les pull requests et les issues",
         "startInstall": "Impossible de démarrer l'installation de la GitHub App",
         "connect": "Connexion impossible"
       }

package/i18n/locales/he.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "לא ניתן היה לרשום את התקנות GitHub",
+        "loadProjection": "לא ניתן היה לטעון מאגרים, בקשות משיכה ובעיות",
         "startInstall": "לא ניתן היה להתחיל את התקנת אפליקציית GitHub",
         "connect": "לא ניתן היה להתחבר"
       }

package/i18n/locales/it.json

@@ -3712,6 +3712,7 @@
       },
       "errors": {
         "listInstallations": "Impossibile elencare le installazioni GitHub",
+        "loadProjection": "Impossibile caricare repository, pull request e issue",
         "startInstall": "Impossibile avviare l'installazione della GitHub App",
         "connect": "Impossibile collegare"
       }

package/i18n/locales/ja.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "GitHub のインストール一覧を取得できませんでした",
+        "loadProjection": "リポジトリ、プルリクエスト、イシューを読み込めませんでした",
         "startInstall": "GitHub App のインストールを開始できませんでした",
         "connect": "接続できませんでした"
       }

package/i18n/locales/pl.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "Nie udało się wyświetlić instalacji GitHub",
+        "loadProjection": "Nie udało się wczytać repozytoriów, pull requestów i zgłoszeń",
         "startInstall": "Nie udało się rozpocząć instalacji aplikacji GitHub",
         "connect": "Nie udało się połączyć"
       }

package/i18n/locales/tr.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "GitHub yüklemeleri listelenemedi",
+        "loadProjection": "Depolar, çekme istekleri ve sorunlar yüklenemedi",
         "startInstall": "GitHub App yüklemesi başlatılamadı",
         "connect": "Bağlanamadı"
       }

package/i18n/locales/uk.json

@@ -4544,6 +4544,7 @@
       },
       "errors": {
         "listInstallations": "Не вдалося отримати список встановлень GitHub",
+        "loadProjection": "Не вдалося завантажити репозиторії, pull request-и та issue",
         "startInstall": "Не вдалося розпочати встановлення застосунку GitHub",
         "connect": "Не вдалося підключити"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.315.4",
+  "version": "0.315.7",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",