@cat-factory/app 0.28.1 → 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/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/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/package.json

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