@cat-factory/app 0.28.0 → 0.28.2

package/app/components/documents/DocumentImportModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DocumentSourceKind } from '~/types/domain'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.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
@@ -74,6 +75,15 @@ function preview(externalId: string) {
 
 <template>
   <UModal v-model:open="open" title="Import from a document source">
+    <template #title>
+      <IntegrationBackTitle
+        title="Import from a document source"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="!documents.anyConnected" class="space-y-3 text-center">
         <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -4,6 +4,8 @@
 // same modal serves Confluence, Notion and any future source. Secret credentials
 // are write-only — the backend never returns them, so on reload we show
 // "Connected" with empty fields.
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const toast = useToast()
@@ -77,6 +79,15 @@ async function disconnect() {
 
 <template>
   <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+    <template #title>
+      <IntegrationBackTitle
+        :title="descriptor?.label ?? 'Connect source'"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">

package/app/components/github/GitHubPanel.vue

@@ -10,6 +10,7 @@ import type { GitHubPullRequest, GitHubRepo } from '~/types/domain'
 // tag, so it silently renders as an empty element. Importing it directly binds
 // the tag unambiguously.
 import GitHubConnect from './GitHubConnect.vue'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const github = useGitHubStore()
@@ -199,6 +200,15 @@ async function merge(pr: GitHubPullRequest) {
 
 <template>
   <UModal v-model:open="open" title="GitHub" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="GitHub"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-5">
         <!-- not connected: connect -->

package/app/components/layout/IntegrationBackTitle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// Title content for an integration sub-panel's modal header. Renders the panel
+// title with a leading "back" control that returns to the Integrations hub, shown
+// only when the panel was actually reached from there (`ui.cameFromIntegrations`).
+// Panels opened from the command bar, sidebar, a banner or an inspector link don't
+// grow a dead Back. Dropped into a UModal's #title slot, so it inherits the modal's
+// title styling; it emits `back` and the host panel closes itself + reopens the hub.
+defineProps<{ title?: string }>()
+const emit = defineEmits<{ back: [] }>()
+const ui = useUiStore()
+</script>
+
+<template>
+  <span class="flex items-center gap-1.5">
+    <UButton
+      v-if="ui.cameFromIntegrations"
+      icon="i-lucide-arrow-left"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      class="-ml-1.5 shrink-0"
+      aria-label="Back to Integrations"
+      @click.stop="emit('back')"
+    />
+    <span class="min-w-0 truncate">{{ title }}</span>
+  </span>
+</template>

package/app/components/layout/IntegrationsHub.vue

@@ -64,9 +64,10 @@ interface IntegrationGroup {
 }
 
 // Run an integration's open handler, then dismiss the hub so its panel takes over.
+// `openFromIntegrations` also marks that the panel was reached from here, so the panel
+// renders a "Back to Integrations" control (see IntegrationBackTitle).
 function go(fn: () => void) {
-  fn()
-  ui.closeIntegrations()
+  ui.openFromIntegrations(fn)
 }
 
 const groups = computed<IntegrationGroup[]>(() => {

package/app/components/providers/VendorCredentialsModal.vue

@@ -7,6 +7,7 @@
 // (Claude, GLM, ChatGPT/Codex) are connected per-user in the Personal subscriptions section.
 import { computed, ref, watch } from 'vue'
 import type { SubscriptionVendor } from '~/types/domain'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
@@ -116,6 +117,15 @@ function vendorLabel(v: SubscriptionVendor): string {
 
 <template>
   <UModal v-model:open="open" title="LLM Vendors" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="LLM Vendors"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <UTabs
         v-model="activeTab"

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -214,10 +214,24 @@ async function setStatus(item: RequirementReviewItem, itemStatus: ReviewItemStat
 const recommending = computed(() =>
   blockId.value ? requirements.isRecommending(blockId.value) : false,
 )
-// Recommendations still awaiting a human decision (the ones to surface for review).
-const pendingRecommendations = computed<RequirementRecommendation[]>(() =>
+// Recommendations the Writer has produced that still await a human decision (`ready`).
+const readyRecommendations = computed<RequirementRecommendation[]>(() =>
   (review.value?.recommendations ?? []).filter((r) => r.status === 'ready'),
 )
+// Placeholders the Requirement Writer is still producing in the background (`pending`).
+const generatingRecommendations = computed<RequirementRecommendation[]>(() =>
+  (review.value?.recommendations ?? []).filter((r) => r.status === 'pending'),
+)
+// "ready / total" progress for the in-flight batch (null when nothing is generating). Scoped to
+// the current wave via `createdAt` (all placeholders in one request share the timestamp), so
+// stale `ready` recommendations the human hasn't acted on from an earlier batch don't inflate it.
+const recommendationProgress = computed(() => {
+  const generating = generatingRecommendations.value
+  if (generating.length === 0) return null
+  const batchTimes = new Set(generating.map((r) => r.createdAt))
+  const ready = readyRecommendations.value.filter((r) => batchTimes.has(r.createdAt)).length
+  return { ready, total: ready + generating.length }
+})
 function isMarkedForRecommend(item: RequirementReviewItem): boolean {
   return markedForRecommend.value.has(item.id)
 }
@@ -228,18 +242,37 @@ function toggleRecommend(item: RequirementReviewItem) {
   markedForRecommend.value = next
 }
 
-// Fire the Writer over the whole marked batch at once (grounded on the project's
-// best-practice standards, specs/tech-specs and web search).
+// Fire the Writer over the whole marked batch (grounded on the project's best-practice
+// standards, specs/tech-specs and web search). ASYNCHRONOUS: it returns at once with `pending`
+// placeholders that fill in live; the user can close the window and is notified when the batch
+// is ready. Flush any typed-but-unblurred answers first so nothing the human entered is lost.
 async function requestRecommendations() {
   if (!blockId.value || markedForRecommend.value.size === 0) return
   const ids = [...markedForRecommend.value]
   try {
-    await requirements.requestRecommendations(blockId.value, ids)
+    await flushDrafts()
+    const updated = await requirements.requestRecommendations(blockId.value, ids)
     markedForRecommend.value = new Set()
-    toast.add({
-      title: `Requesting ${ids.length} recommendation${ids.length === 1 ? '' : 's'}…`,
-      icon: 'i-lucide-sparkles',
-    })
+    const n = ids.length
+    const plural = n === 1 ? '' : 's'
+    // On a parked run the request returns at once with `pending` placeholders the durable driver
+    // fills in the background; off-path (no active pipeline) there is no driver, so the Writer
+    // ran inline and the recommendations are already settled. Tell the human which actually
+    // happened rather than always promising a background callback.
+    const stillGenerating = (updated?.recommendations ?? []).some((r) => r.status === 'pending')
+    toast.add(
+      stillGenerating
+        ? {
+            title: `Preparing ${n} recommendation${plural} in the background`,
+            description:
+              "Your answers are saved — close this if you like; we'll notify you when they're ready.",
+            icon: 'i-lucide-sparkles',
+          }
+        : {
+            title: `${n} recommendation${plural} ready`,
+            icon: 'i-lucide-sparkles',
+          },
+    )
   } catch (e) {
     notifyError('Could not request recommendations', e)
   }
@@ -567,18 +600,47 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 </div>
               </div>
 
-              <!-- Requirement-Writer recommendations awaiting a human decision -->
+              <!-- Requirement-Writer recommendations: awaiting a human decision (`ready`) and/or
+                   still generating in the background (`pending`) -->
               <section
-                v-if="pendingRecommendations.length"
+                v-if="readyRecommendations.length || generatingRecommendations.length"
                 class="mt-6 border-t border-slate-800 pt-5"
               >
-                <div class="mb-3 flex items-center gap-1.5 text-[11px] text-indigo-300">
+                <div class="mb-3 flex items-center gap-2 text-[11px] text-indigo-300">
                   <UIcon name="i-lucide-wand-2" class="h-3.5 w-3.5" />
                   <span class="font-semibold uppercase tracking-wide">Recommended answers</span>
+                  <span
+                    v-if="recommendationProgress"
+                    class="ml-auto flex items-center gap-1.5 normal-case text-indigo-300/80"
+                  >
+                    <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+                    {{ recommendationProgress.ready }} / {{ recommendationProgress.total }} ready
+                  </span>
                 </div>
+
+                <!-- still-generating placeholders (one per requested finding) -->
+                <div v-if="generatingRecommendations.length" class="mb-3 flex flex-col gap-3">
+                  <div
+                    v-for="rec in generatingRecommendations"
+                    :key="rec.id"
+                    class="flex items-start gap-2 rounded-lg border border-dashed border-indigo-900/50 bg-indigo-950/10 p-3"
+                  >
+                    <UIcon
+                      name="i-lucide-loader-circle"
+                      class="mt-0.5 h-4 w-4 shrink-0 animate-spin text-indigo-300"
+                    />
+                    <div class="min-w-0">
+                      <span class="text-sm font-medium text-white">{{
+                        rec.sourceFinding.title
+                      }}</span>
+                      <p class="text-xs text-indigo-300/70">Generating a grounded suggestion…</p>
+                    </div>
+                  </div>
+                </div>
+
                 <div class="flex flex-col gap-3">
                   <div
-                    v-for="rec in pendingRecommendations"
+                    v-for="rec in readyRecommendations"
                     :key="rec.id"
                     class="rounded-lg border border-indigo-900/50 bg-indigo-950/20 p-3"
                   >

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -7,6 +7,7 @@
 // automatically in the per-workspace model picker. One endpoint per runner type.
 import { computed, ref, watch } from 'vue'
 import { LOCAL_RUNNER_DEFAULTS, LOCAL_RUNNER_LABELS, type LocalRunner } from '~/types/localModels'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useLocalModelsStore()
@@ -152,6 +153,15 @@ async function remove(p: LocalRunner) {
 
 <template>
   <UModal v-model:open="open" title="My local runners" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="My local runners"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -6,6 +6,7 @@
 // block-id entry here. Opened from the Integrations hub.
 import { computed, reactive, ref, watch } from 'vue'
 import type { ObservabilityProviderKind } from '~/types/releaseHealth'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useReleaseHealthStore()
@@ -128,6 +129,15 @@ const connectedLabel = computed(() => {
 
 <template>
   <UModal v-model:open="open" title="Post-release health" :ui="{ content: 'max-w-lg' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="Post-release health"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-sm text-slate-400">

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -9,6 +9,7 @@
 // entry point for the key; this panel just makes OpenRouter self-sufficient.
 import { computed, ref, watch } from 'vue'
 import type { OpenRouterModelMeta } from '~/types/openrouter'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
@@ -193,6 +194,15 @@ function manageKeys() {
 
 <template>
   <UModal v-model:open="open" title="OpenRouter" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="OpenRouter"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">

package/app/components/settings/ProviderConnectionPanel.vue

@@ -9,6 +9,7 @@
 // with a `default` is optional — left blank it falls back to that default.
 import { computed, ref, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useProviderConnectionsStore()
@@ -213,6 +214,15 @@ function fieldHelp(key: string): string | undefined {
 
 <template>
   <UModal v-model:open="open" :title="meta?.title ?? 'Provider'" :ui="{ content: 'max-w-xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        :title="meta?.title ?? 'Provider'"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-xs text-slate-400">{{ meta?.blurb }}</p>

package/app/components/settings/UserSecretsSection.vue

@@ -6,6 +6,7 @@
 // access); the secret is write-only server-side and never shown again.
 import { computed, ref, watch } from 'vue'
 import type { ProviderConfigField, UserSecretKind } from '~/types/userSecrets'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useUserSecretsStore()
@@ -123,6 +124,15 @@ async function remove() {
 
 <template>
   <UModal v-model:open="open" title="My GitHub token" :ui="{ content: 'max-w-xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="My GitHub token"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -12,6 +12,7 @@ import type { CreateTaskType, TaskLimitMode, WorkspaceSettings } from '~/types/d
 import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
 import IssueTrackerPanel from '~/components/settings/IssueTrackerPanel.vue'
 import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const store = useWorkspaceSettingsStore()
@@ -160,6 +161,15 @@ async function saveBudget() {
 
 <template>
   <UModal v-model:open="open" title="Workspace settings" :ui="{ content: 'max-w-3xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="Workspace settings"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <UTabs
         v-model="activeTab"

package/app/components/slack/SlackPanel.vue

@@ -7,6 +7,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import type { NotificationType } from '~/types/notifications'
 import type { SlackMemberMappingEntry, SlackMemberRole, SlackRoute } from '~/types/slack'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const slack = useSlackStore()
@@ -141,6 +142,15 @@ async function saveMapping() {
 
 <template>
   <UModal v-model:open="open" title="Slack notifications" :ui="{ content: 'max-w-2xl' }">
+    <template #title>
+      <IntegrationBackTitle
+        title="Slack notifications"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div class="space-y-5">
         <p class="text-xs text-slate-400">

package/app/components/tasks/TaskImportModal.vue

@@ -8,6 +8,7 @@
 // each row opens the issue on GitHub.
 import type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
 import type { AddTaskPrefill } from '~/stores/ui'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const ui = useUiStore()
 const tasks = useTasksStore()
@@ -195,6 +196,15 @@ async function doSpawnEpic() {
 
 <template>
   <UModal v-model:open="open" :title="title">
+    <template #title>
+      <IntegrationBackTitle
+        :title="title"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -11,6 +11,8 @@
 // connected Jira without disconnecting it. The toggle only applies once a source is
 // available (Jira connected / the GitHub App installed) — there is nothing to offer
 // before that.
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+
 const ui = useUiStore()
 const tasks = useTasksStore()
 const toast = useToast()
@@ -104,6 +106,15 @@ async function toggleEnabled(enabled: boolean) {
 
 <template>
   <UModal v-model:open="open" :title="descriptor?.label ?? 'Task source'">
+    <template #title>
+      <IntegrationBackTitle
+        :title="descriptor?.label ?? 'Task source'"
+        @back="
+          open = false
+          ui.openIntegrations()
+        "
+      />
+    </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">

package/app/composables/api/reviews.ts

@@ -83,11 +83,17 @@ export function reviewsApi({ http, ws }: ApiContext) {
       ),
 
     // Ask the Requirement Writer to recommend grounded answers for a batch of findings (by
-    // item id). Returns the review with `ready` recommendations for the human to act on.
-    requestRecommendations: (workspaceId: string, blockId: string, itemIds: string[]) =>
+    // item id). Returns the review with `pending` placeholder recommendations; they fill in
+    // (`ready`) asynchronously via the `requirements` stream as the Writer produces each.
+    requestRecommendations: (
+      workspaceId: string,
+      blockId: string,
+      itemIds: string[],
+      note?: string,
+    ) =>
       http<RequirementReview | null>(
         `${ws(workspaceId)}/blocks/${encodeURIComponent(blockId)}/requirement-review/recommend`,
-        { method: 'POST', body: { itemIds } },
+        { method: 'POST', body: { itemIds, ...(note ? { note } : {}) } },
       ),
 
     // Accept a recommendation (becomes the finding's answer), reject it, or re-request it

package/app/stores/requirements.ts

@@ -44,14 +44,21 @@ export const useRequirementsStore = defineStore('requirements', () => {
   function reviewFor(blockId: string): RequirementReview | null {
     return reviews.value[blockId] ?? null
   }
+  /** Whether the Requirement Writer is still producing recommendations for a block (a `pending`
+   * placeholder exists). Server-derived, so the "Recommending…" state survives the window closing
+   * and a page reload — the client-local `recommending` set only covers the request round-trip. */
+  function hasPendingRecommendations(blockId: string): boolean {
+    return (reviews.value[blockId]?.recommendations ?? []).some((r) => r.status === 'pending')
+  }
   /**
    * The async background stage a block's review is in, or null. While the driver folds the
-   * answers (`incorporating`) then re-reviews the document (`reviewing`), NO human action is
-   * needed — so the board suppresses the "Approval needed" gate and shows this working state
-   * instead, with copy that names which of the two stages is running.
+   * answers (`incorporating`) then re-reviews the document (`reviewing`), or the Requirement
+   * Writer is producing recommendations (`recommending`), NO human action is needed — so the
+   * board suppresses the "Approval needed" gate and shows this working state instead, with copy
+   * that names which stage is running.
    */
   function backgroundStage(blockId: string): 'incorporating' | 'reviewing' | 'recommending' | null {
-    if (recommending.value.has(blockId)) return 'recommending'
+    if (recommending.value.has(blockId) || hasPendingRecommendations(blockId)) return 'recommending'
     const status = reviews.value[blockId]?.status
     return status === 'incorporating' || status === 'reviewing' ? status : null
   }
@@ -176,19 +183,26 @@ export const useRequirementsStore = defineStore('requirements', () => {
   }
 
   function isRecommending(blockId: string): boolean {
-    return recommending.value.has(blockId)
+    return recommending.value.has(blockId) || hasPendingRecommendations(blockId)
   }
 
   /**
    * Ask the Requirement Writer to recommend answers for a batch of findings (by item id).
-   * Runs the Writer inline (grounded on best-practice fragments → spec/tech-spec → web) and
-   * returns the review with `ready` recommendations to accept/reject. Shows a `recommending`
-   * background stage on the board while it runs.
+   * ASYNCHRONOUS: returns at once with `pending` placeholder recommendations (the Writer runs
+   * per finding in the durable driver), which fill in (`ready`) via live `requirements` stream
+   * events; a notification calls the user back when the batch is ready. The board shows the
+   * `recommending` background stage while any placeholder is pending. Optional `note` steers the
+   * whole batch.
    */
-  async function requestRecommendations(blockId: string, itemIds: string[]) {
+  async function requestRecommendations(blockId: string, itemIds: string[], note?: string) {
     withFlag(recommending, blockId, true)
     try {
-      const updated = await api.requestRecommendations(workspace.requireId(), blockId, itemIds)
+      const updated = await api.requestRecommendations(
+        workspace.requireId(),
+        blockId,
+        itemIds,
+        note,
+      )
       if (updated) store(updated)
       return updated
     } finally {

package/app/stores/ui.ts

@@ -85,6 +85,11 @@ export const useUiStore = defineStore('ui', () => {
   // local runners, OpenRouter). Replaces the per-integration navbar buttons; each
   // row inside it opens that integration's own panel via the handlers below.
   const integrationsOpen = ref(false)
+  // True while an integration's own panel is showing AND it was reached from the hub
+  // (not the command bar, sidebar, a banner or an inspector link). Drives the "Back to
+  // Integrations" control those panels render: it only offers a return path when there
+  // is one. Every direct `open*` below resets it; `openFromIntegrations` sets it.
+  const cameFromIntegrations = ref(false)
 
   // Workspace-settings modal: a single tabbed window gathering the workspace-wide
   // config (workspace / merge thresholds / issue writeback / service best practices).
@@ -231,6 +236,7 @@ export const useUiStore = defineStore('ui', () => {
   }
 
   function openDocumentConnect(source: DocumentSourceKind) {
+    cameFromIntegrations.value = false
     documentConnect.value = { source }
   }
   function closeDocumentConnect() {
@@ -240,6 +246,7 @@ export const useUiStore = defineStore('ui', () => {
     targetFrameId: string | null = null,
     source: DocumentSourceKind | null = null,
   ) {
+    cameFromIntegrations.value = false
     documentImport.value = { source, targetFrameId }
   }
   function closeDocumentImport() {
@@ -256,12 +263,14 @@ export const useUiStore = defineStore('ui', () => {
     spawnPreview.value = null
   }
   function openTaskConnect(source: TaskSourceKind) {
+    cameFromIntegrations.value = false
     taskConnect.value = { source }
   }
   function closeTaskConnect() {
     taskConnect.value = null
   }
   function openTaskImport(source: TaskSourceKind | null = null, containerId: string | null = null) {
+    cameFromIntegrations.value = false
     taskImport.value = { source, containerId }
   }
   function closeTaskImport() {
@@ -294,12 +303,14 @@ export const useUiStore = defineStore('ui', () => {
     addServiceOpen.value = false
   }
   function openGitHub() {
+    cameFromIntegrations.value = false
     githubOpen.value = true
   }
   function closeGitHub() {
     githubOpen.value = false
   }
   function openSlack() {
+    cameFromIntegrations.value = false
     slackOpen.value = true
   }
   function closeSlack() {
@@ -321,12 +332,24 @@ export const useUiStore = defineStore('ui', () => {
     commandBarOpen.value = !commandBarOpen.value
   }
   function openIntegrations() {
+    // Reaching the hub itself (fresh, or via a panel's Back control) clears the
+    // came-from marker — we're at the hub, not inside a hub-spawned panel.
+    cameFromIntegrations.value = false
     integrationsOpen.value = true
   }
   function closeIntegrations() {
     integrationsOpen.value = false
   }
+  // Open an integration's own panel FROM the hub: run its open handler (which resets
+  // `cameFromIntegrations`), then mark that we came from the hub and dismiss it. The
+  // panel reads `cameFromIntegrations` to show its Back control.
+  function openFromIntegrations(open: () => void) {
+    open()
+    cameFromIntegrations.value = true
+    integrationsOpen.value = false
+  }
   function openWorkspaceSettings(tab = 'workspace') {
+    cameFromIntegrations.value = false
     workspaceSettingsTab.value = tab
     workspaceSettingsOpen.value = true
   }
@@ -337,12 +360,14 @@ export const useUiStore = defineStore('ui', () => {
     workspaceSettingsTab.value = tab
   }
   function openObservabilityConnection() {
+    cameFromIntegrations.value = false
     observabilityConnectionOpen.value = true
   }
   function closeObservabilityConnection() {
     observabilityConnectionOpen.value = false
   }
   function openProviderConnection(kind: 'environment' | 'runner-pool') {
+    cameFromIntegrations.value = false
     providerConnectionKind.value = kind
   }
   function closeProviderConnection() {
@@ -355,12 +380,14 @@ export const useUiStore = defineStore('ui', () => {
     modelConfigOpen.value = false
   }
   function openVendorCredentials() {
+    cameFromIntegrations.value = false
     vendorCredentialsOpen.value = true
   }
   function closeVendorCredentials() {
     vendorCredentialsOpen.value = false
   }
   function openLocalModels() {
+    cameFromIntegrations.value = false
     localModelsOpen.value = true
   }
   function closeLocalModels() {
@@ -373,12 +400,14 @@ export const useUiStore = defineStore('ui', () => {
     sandboxOpen.value = false
   }
   function openUserSecrets() {
+    cameFromIntegrations.value = false
     userSecretsOpen.value = true
   }
   function closeUserSecrets() {
     userSecretsOpen.value = false
   }
   function openOpenRouter() {
+    cameFromIntegrations.value = false
     openRouterOpen.value = true
   }
   function closeOpenRouter() {
@@ -465,6 +494,7 @@ export const useUiStore = defineStore('ui', () => {
     fragmentLibraryOpen,
     commandBarOpen,
     integrationsOpen,
+    cameFromIntegrations,
     workspaceSettingsOpen,
     workspaceSettingsTab,
     observabilityConnectionOpen,
@@ -524,6 +554,7 @@ export const useUiStore = defineStore('ui', () => {
     toggleCommandBar,
     openIntegrations,
     closeIntegrations,
+    openFromIntegrations,
     openWorkspaceSettings,
     closeWorkspaceSettings,
     setWorkspaceSettingsTab,

package/app/types/requirements.ts

@@ -50,8 +50,12 @@ export type RequirementReviewStatus =
 /** How a human resolves a review that hit its iteration cap. */
 export type ResolveRequirementsExceededChoice = 'extra-round' | 'proceed' | 'stop-reset'
 
-/** Lifecycle of a Requirement-Writer recommendation. */
-export type RecommendationStatus = 'ready' | 'accepted' | 'rejected'
+/**
+ * Lifecycle of a Requirement-Writer recommendation. `pending` is a placeholder created the
+ * moment the human requests it — the Writer is still producing the suggestion in the background
+ * (the async story); it fills in to `ready` via the `requirements` stream.
+ */
+export type RecommendationStatus = 'pending' | 'ready' | 'accepted' | 'rejected'
 
 /**
  * A Requirement-Writer suggestion for one finding. First-class on the review (survives the
@@ -60,7 +64,7 @@ export type RecommendationStatus = 'ready' | 'accepted' | 'rejected'
  */
 export interface RequirementRecommendation {
   id: string
-  sourceFinding: { title: string; detail: string }
+  sourceFinding: { title: string; detail: string; itemId?: string }
   recommendedText: string
   status: RecommendationStatus
   note: string | null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "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",