@cat-factory/app 0.36.0 → 0.37.0

package/app/components/auth/UserMenu.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 
-// Signed-in identity + sign-out, shown in the sidebar when auth is enabled.
+// Signed-in identity + per-user actions, shown in the sidebar when auth is enabled.
 const auth = useAuthStore()
+const ui = useUiStore()
 
 const items = computed<DropdownMenuItem[][]>(() => [
+  [
+    {
+      // The user-scoped "My setup" hub (personal GitHub token, local runners, personal
+      // subscriptions) — kept out of the workspace Integrations hub, reachable here.
+      label: 'My setup',
+      icon: 'i-lucide-user-cog',
+      onSelect: () => ui.openPersonalSetup(),
+    },
+  ],
   [
     {
       label: 'Sign out',

package/app/components/brainstorm/BrainstormWindow.vue

@@ -10,6 +10,7 @@
 import { parseOutputOutline } from '~/utils/agentOutput'
 import type {
   BrainstormItem,
+  BrainstormItemStatus,
   BrainstormSession,
   BrainstormStage,
   ReviewItemCategory,
@@ -136,7 +137,7 @@ async function submitReply(item: BrainstormItem) {
   }
 }
 
-async function setStatus(item: BrainstormItem, itemStatus: ReviewItemStatus) {
+async function setStatus(item: BrainstormItem, itemStatus: BrainstormItemStatus) {
   if (!session.value) return
   try {
     await brainstorm.setItemStatus(session.value, item.id, itemStatus)

package/app/components/clarity/ClarityReviewWindow.vue

@@ -10,6 +10,7 @@
 // consumes.
 import { parseOutputOutline } from '~/utils/agentOutput'
 import type {
+  ClarityItemStatus,
   ClarityReview,
   ClarityReviewItem,
   ReviewItemCategory,
@@ -131,7 +132,7 @@ async function submitReply(item: ClarityReviewItem) {
   }
 }
 
-async function setStatus(item: ClarityReviewItem, itemStatus: ReviewItemStatus) {
+async function setStatus(item: ClarityReviewItem, itemStatus: ClarityItemStatus) {
   if (!review.value) return
   try {
     await clarity.setItemStatus(review.value, item.id, itemStatus)

package/app/components/layout/IntegrationBackTitle.vue

@@ -1,25 +1,30 @@
 <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.
+// title with a leading "back" control that returns to the hub the panel was reached
+// from — the workspace Integrations hub (`ui.cameFromIntegrations`) or the user-scoped
+// "My setup" hub (`ui.cameFromPersonal`) — shown only when there is one. 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 right hub.
 defineProps<{ title?: string }>()
 const emit = defineEmits<{ back: [] }>()
 const ui = useUiStore()
+const cameFromHub = computed(() => ui.cameFromIntegrations || ui.cameFromPersonal)
+const backLabel = computed(() =>
+  ui.cameFromPersonal ? 'Back to My setup' : 'Back to Integrations',
+)
 </script>
 
 <template>
   <span class="flex items-center gap-1.5">
     <UButton
-      v-if="ui.cameFromIntegrations"
+      v-if="cameFromHub"
       icon="i-lucide-arrow-left"
       color="neutral"
       variant="ghost"
       size="xs"
       class="-ml-1.5 shrink-0"
-      aria-label="Back to Integrations"
+      :aria-label="backLabel"
       @click.stop="emit('back')"
     />
     <span class="min-w-0 truncate">{{ title }}</span>

package/app/components/layout/IntegrationsHub.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-// The Integrations hub: a single modal that lists every external system the
-// workspace can enable or link in — replacing the per-integration buttons that
-// used to clutter the left navbar. Each row reuses the existing per-integration
-// panel handlers on the `ui` store (so the integrations themselves are unchanged);
-// opening one closes the hub and reveals that integration's own panel/modal.
+// The Integrations hub: a single modal that lists every external system the WORKSPACE can
+// enable or link in. Each row reuses the existing per-integration panel handlers on the `ui`
+// store (so the integrations themselves are unchanged); opening one closes the hub and
+// reveals that integration's own panel/modal.
 //
-// Sections gate on the same `available` probes the navbar used, so a system that
-// the backend has turned off simply doesn't appear here.
+// Sections gate on the same `available` probes the navbar used, so a system that the backend
+// has turned off simply doesn't appear here.
+//
+// Scope split: per-USER connections (a personal GitHub token, own-machine runners, personal
+// subscriptions) now live in the "My setup" hub (UserMenu → My setup), NOT here — keeping
+// this hub purely workspace-scoped. When auth is disabled there is no UserMenu to host them,
+// so a "Personal (only you)" group falls back into this hub so they stay reachable.
 const ui = useUiStore()
 const auth = useAuthStore()
 const github = useGitHubStore()
@@ -20,6 +24,11 @@ const userSecrets = useUserSecretsStore()
 const apiKeys = useApiKeysStore()
 const workspace = useWorkspaceStore()
 
+// True when the per-user "My setup" hub is reachable (UserMenu renders only when signed in).
+// When false (auth disabled / local mode) we fold the personal rows back into this hub so
+// nothing becomes unreachable.
+const personalHubReachable = computed(() => !!auth.user)
+
 // The selected filing tracker, as a badge label ("GitHub Issues" / "Jira").
 const trackerLabel = computed(() => {
   if (tracker.settings.tracker === 'github') return 'GitHub Issues'
@@ -27,12 +36,17 @@ const trackerLabel = computed(() => {
   return undefined
 })
 
+// Free-text filter over the rows (label + description), so a workspace with many enabled
+// systems stays scannable. Reset when the hub re-opens.
+const query = ref('')
+
 // The observability connection status drives the hub's connected badge. Load it
 // lazily when the hub opens (the secret-less connection view is cheap).
 watch(
   () => ui.integrationsOpen,
   (isOpen) => {
     if (isOpen) {
+      query.value = ''
       void releaseHealth.ensureLoaded().catch(() => {})
       void providerConnections.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
@@ -47,8 +61,10 @@ const open = computed({
   set: (v: boolean) => (v ? ui.openIntegrations() : ui.closeIntegrations()),
 })
 
-// One integration row. `status` is the connected-state line shown under the label
-// (an account/team name, "Connected", or a hint); `connected` drives the badge.
+// One integration row. `connected` drives the green badge (`status` is its line — an
+// account/team name or "Connected"); `attention` drives an amber badge (e.g. a source that
+// is available but turned off) with `attentionLabel`. `recommended` tags an essential row
+// with a "Recommended" chip while the workspace has nothing connected yet.
 interface IntegrationItem {
   key: string
   icon: string
@@ -56,12 +72,27 @@ interface IntegrationItem {
   description: string
   status?: string
   connected?: boolean
+  attention?: boolean
+  attentionLabel?: string
+  recommended?: boolean
+  onClick: () => void
+}
+
+// A group may carry a small de-emphasised footer LINK (workspace config that isn't itself an
+// integration, e.g. the issue-tracker settings) rendered under its rows rather than as a
+// full row competing with the connections.
+interface IntegrationFooterLink {
+  key: string
+  icon: string
+  label: string
+  status?: string
   onClick: () => void
 }
 
 interface IntegrationGroup {
   title: string
   items: IntegrationItem[]
+  footerLink?: IntegrationFooterLink
 }
 
 // Run an integration's open handler, then dismiss the hub so its panel takes over.
@@ -87,22 +118,16 @@ const groups = computed<IntegrationGroup[]>(() => {
         description: 'One gateway to 300+ models — add your key and enable models in one place.',
         status: openRouterKeyConnected ? 'Key connected' : undefined,
         connected: openRouterKeyConnected,
+        recommended: true,
         onClick: () => go(ui.openOpenRouter),
       },
       {
         key: 'vendors',
         icon: 'i-lucide-key-round',
         label: 'Vendors & keys',
-        description: 'LLM vendor subscriptions and provider API keys.',
+        description: 'Workspace LLM subscriptions and provider API keys.',
         onClick: () => go(ui.openVendorCredentials),
       },
-      {
-        key: 'local-runners',
-        icon: 'i-lucide-server',
-        label: 'My local runners',
-        description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
-        onClick: () => go(ui.openLocalModels),
-      },
     ],
   })
 
@@ -116,23 +141,10 @@ const groups = computed<IntegrationGroup[]>(() => {
       description: 'Connect the workspace’s GitHub App, browse repos, PRs and issues.',
       status: github.connected ? github.connection?.accountLogin : undefined,
       connected: github.connected,
+      recommended: true,
       onClick: () => go(ui.openGitHub),
     })
   }
-  // Per-user GitHub PAT — works on every runtime (used for runs you initiate). Always
-  // offered; the badge reflects whether the signed-in user has stored one.
-  {
-    const pat = userSecrets.statusFor('github_pat')
-    code.push({
-      key: 'github-pat',
-      icon: 'i-lucide-key-round',
-      label: 'My GitHub token',
-      description: 'A personal access token used for runs you start (pushes, PRs, CI, merge).',
-      status: pat ? 'Connected' : undefined,
-      connected: !!pat,
-      onClick: () => go(ui.openUserSecrets),
-    })
-  }
   if (code.length) out.push({ title: 'Source control', items: code })
 
   // --- Communication ---------------------------------------------------------
@@ -180,10 +192,11 @@ const groups = computed<IntegrationGroup[]>(() => {
       icon: src.icon,
       label: src.label,
       description: `Link ${src.label} to import and reference tracker issues.`,
-      // Available + enabled ⇒ offered (green); available + off ⇒ "Disabled";
+      // Available + enabled ⇒ offered (green); available + off ⇒ "Disabled" (amber);
       // not available ⇒ no badge (Jira needs connecting; GitHub needs its App).
-      status: src.available ? (src.enabled ? undefined : 'Disabled') : undefined,
       connected: src.available && src.enabled,
+      attention: src.available && !src.enabled,
+      attentionLabel: 'Disabled',
       onClick: () => go(() => ui.openTaskConnect(src.source)),
     }))
     if (tasks.anyOffered) {
@@ -195,16 +208,19 @@ const groups = computed<IntegrationGroup[]>(() => {
         onClick: () => go(() => ui.openTaskImport(null)),
       })
     }
-    trackers.push({
-      key: 'task:tracker',
-      icon: 'i-lucide-list-checks',
-      label: 'Issue tracker settings',
-      description: 'Choose the filing tracker, enable linking sources, and configure writeback.',
-      status: trackerLabel.value,
-      connected: tracker.settings.tracker !== null,
-      onClick: () => go(() => ui.openWorkspaceSettings('tracker')),
+    // Choosing the filing tracker / writeback is workspace CONFIG, not an integration, so it
+    // sits as a quiet footer link under the sources rather than a competing row.
+    out.push({
+      title: 'Task trackers',
+      items: trackers,
+      footerLink: {
+        key: 'task:tracker',
+        icon: 'i-lucide-list-checks',
+        label: 'Issue tracker settings',
+        status: trackerLabel.value,
+        onClick: () => go(() => ui.openWorkspaceSettings('tracker')),
+      },
     })
-    out.push({ title: 'Task trackers', items: trackers })
   }
 
   // --- Observability ---------------------------------------------------------
@@ -271,8 +287,73 @@ const groups = computed<IntegrationGroup[]>(() => {
   }
   if (infra.length) out.push({ title: 'Infrastructure', items: infra })
 
+  // --- Personal (only you) — fallback when there is no UserMenu to host "My setup" -------
+  // Per-user connections normally live in the My-setup hub; with auth disabled they fold in
+  // here so they stay reachable. (The badge reflects the signed-in user's stored secret.)
+  if (!personalHubReachable.value) {
+    const pat = !!userSecrets.statusFor('github_pat')
+    out.push({
+      title: 'Personal (only you)',
+      items: [
+        {
+          key: 'github-pat',
+          icon: 'i-lucide-key-round',
+          label: 'My GitHub token',
+          description: 'A personal access token used for runs you start (pushes, PRs, CI, merge).',
+          status: pat ? 'Connected' : undefined,
+          connected: pat,
+          onClick: () => go(ui.openUserSecrets),
+        },
+        {
+          key: 'local-runners',
+          icon: 'i-lucide-server',
+          label: 'My local runners',
+          description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
+          onClick: () => go(ui.openLocalModels),
+        },
+      ],
+    })
+  }
+
   return out
 })
+
+// Sort connected rows first, then amber "attention", then idle — a stable rank so each
+// group reads "what's live" top-down without reshuffling unrelated rows.
+function stateRank(item: IntegrationItem): number {
+  if (item.connected) return 0
+  if (item.attention) return 1
+  return 2
+}
+
+const allItems = computed(() => groups.value.flatMap((g) => g.items))
+const anyConnected = computed(() => allItems.value.some((i) => i.connected))
+// Essential rows still unconnected — surfaced as the empty-workspace get-started shortcuts.
+const recommendedActions = computed(() =>
+  allItems.value.filter((i) => i.recommended && !i.connected),
+)
+
+function matches(text: string, q: string): boolean {
+  return text.toLowerCase().includes(q)
+}
+
+// Groups after the search filter + connected-first sort. A footer link is kept only when it
+// also matches the query (or the query is empty); a group with no surviving rows/link drops.
+const filteredGroups = computed<IntegrationGroup[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  return groups.value
+    .map((g) => {
+      const items = (
+        q ? g.items.filter((i) => matches(i.label, q) || matches(i.description, q)) : g.items
+      )
+        .slice()
+        .sort((a, b) => stateRank(a) - stateRank(b))
+      const footerLink =
+        g.footerLink && (!q || matches(g.footerLink.label, q)) ? g.footerLink : undefined
+      return { ...g, items, footerLink }
+    })
+    .filter((g) => g.items.length || g.footerLink)
+})
 </script>
 
 <template>
@@ -283,7 +364,47 @@ const groups = computed<IntegrationGroup[]>(() => {
           Connect and manage the external systems this workspace can link in.
         </p>
 
-        <section v-for="group in groups" :key="group.title">
+        <!-- Get-started cue: an empty workspace gets the two essentials up front so the first
+             run isn't blocked on hunting for them. Hidden once anything is connected. -->
+        <div
+          v-if="!anyConnected && recommendedActions.length"
+          class="rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
+        >
+          <div class="mb-2 flex items-center gap-2 text-sm font-medium text-primary-200">
+            <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0" />
+            <span>Get started</span>
+          </div>
+          <p class="mb-3 text-xs text-slate-300">
+            Connect a code source and a model provider to run your first pipeline.
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <UButton
+              v-for="item in recommendedActions"
+              :key="`rec:${item.key}`"
+              size="xs"
+              color="primary"
+              variant="soft"
+              :icon="item.icon"
+              @click="item.onClick()"
+            >
+              {{ item.label }}
+            </UButton>
+          </div>
+        </div>
+
+        <UInput
+          v-model="query"
+          icon="i-lucide-search"
+          size="sm"
+          placeholder="Search integrations…"
+          class="w-full"
+        />
+
+        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-slate-500">
+          No integrations match “{{ query }}”.
+        </p>
+
+        <section v-for="group in filteredGroups" :key="group.title">
           <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
             {{ group.title }}
           </h3>
@@ -302,12 +423,39 @@ const groups = computed<IntegrationGroup[]>(() => {
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || 'Connected' }}
                   </UBadge>
+                  <UBadge v-else-if="item.attention" color="warning" variant="subtle" size="sm">
+                    {{ item.attentionLabel || 'Needs attention' }}
+                  </UBadge>
+                  <span v-else class="text-[11px] text-slate-500">Not connected</span>
+                  <UBadge
+                    v-if="!anyConnected && item.recommended && !item.connected"
+                    color="primary"
+                    variant="subtle"
+                    size="sm"
+                  >
+                    Recommended
+                  </UBadge>
                 </div>
                 <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
               </div>
               <UIcon name="i-lucide-chevron-right" class="h-4 w-4 shrink-0 text-slate-500" />
             </button>
           </div>
+
+          <!-- De-emphasised workspace-config link (e.g. issue tracker settings). -->
+          <button
+            v-if="group.footerLink"
+            type="button"
+            class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-xs text-slate-400 transition hover:bg-slate-900/60 hover:text-slate-200"
+            @click="group.footerLink.onClick()"
+          >
+            <UIcon :name="group.footerLink.icon" class="h-3.5 w-3.5 shrink-0" />
+            <span class="flex-1 truncate">{{ group.footerLink.label }}</span>
+            <span v-if="group.footerLink.status" class="shrink-0 text-slate-500">{{
+              group.footerLink.status
+            }}</span>
+            <UIcon name="i-lucide-chevron-right" class="h-3.5 w-3.5 shrink-0 text-slate-600" />
+          </button>
         </section>
       </div>
     </template>

package/app/components/layout/PersonalSetupModal.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+// "My setup": the user-scoped sibling of the Integrations hub. It lists the connections
+// that belong to the SIGNED-IN USER rather than the workspace — a personal GitHub token,
+// own-machine local model runners, and individual-usage (personal) subscriptions — which
+// previously sat, confusingly, among the workspace-wide integrations. Each row reuses the
+// existing per-panel handlers via `ui.openFromPersonal(...)`, so opening one closes this
+// hub, reveals that panel, and gives it a "Back to My setup" control (IntegrationBackTitle).
+const ui = useUiStore()
+const userSecrets = useUserSecretsStore()
+const localModels = useLocalModelsStore()
+const personalSubs = usePersonalSubscriptionsStore()
+
+// Load the cheap user-scoped status whenever the hub opens, so each row's badge is accurate.
+watch(
+  () => ui.personalSetupOpen,
+  (isOpen) => {
+    if (!isOpen) return
+    void userSecrets.load().catch(() => {})
+    void localModels.load().catch(() => {})
+    void personalSubs.load().catch(() => {})
+  },
+)
+
+const open = computed({
+  get: () => ui.personalSetupOpen,
+  set: (v: boolean) => (v ? ui.openPersonalSetup() : ui.closePersonalSetup()),
+})
+
+// One row. `connected` drives the badge; `status` is the connected-state line (a count or
+// "Connected"). Mirrors the Integrations hub's row shape so the two hubs look identical.
+interface PersonalItem {
+  key: string
+  icon: string
+  label: string
+  description: string
+  status?: string
+  connected: boolean
+  onClick: () => void
+}
+
+interface PersonalGroup {
+  title: string
+  items: PersonalItem[]
+}
+
+// Open a user-scoped panel from this hub (sets the "came from My setup" marker).
+function go(fn: () => void) {
+  ui.openFromPersonal(fn)
+}
+
+const groups = computed<PersonalGroup[]>(() => {
+  const out: PersonalGroup[] = []
+
+  // --- Source control --------------------------------------------------------
+  const pat = !!userSecrets.statusFor('github_pat')
+  out.push({
+    title: 'Source control',
+    items: [
+      {
+        key: 'github-pat',
+        icon: 'i-lucide-key-round',
+        label: 'My GitHub token',
+        description: 'A personal access token used for runs you start (pushes, PRs, CI, merge).',
+        status: pat ? 'Connected' : undefined,
+        connected: pat,
+        onClick: () => go(ui.openUserSecrets),
+      },
+    ],
+  })
+
+  // --- Models ----------------------------------------------------------------
+  const runnerCount = localModels.endpoints.length
+  const subCount = personalSubs.subscriptions.length
+  out.push({
+    title: 'Models',
+    items: [
+      {
+        key: 'local-runners',
+        icon: 'i-lucide-server',
+        label: 'My local runners',
+        description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
+        status: runnerCount ? `${runnerCount} connected` : undefined,
+        connected: runnerCount > 0,
+        onClick: () => go(ui.openLocalModels),
+      },
+      {
+        key: 'personal-subs',
+        icon: 'i-lucide-user',
+        label: 'My subscriptions',
+        description:
+          'Individual-usage plans you unlock with a personal password (Claude, GLM, Codex).',
+        status: subCount ? `${subCount} connected` : undefined,
+        connected: subCount > 0,
+        onClick: () => go(() => ui.openVendorCredentials('personal')),
+      },
+    ],
+  })
+
+  return out
+})
+</script>
+
+<template>
+  <UModal v-model:open="open" title="My setup" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div class="space-y-5">
+        <p class="text-xs text-slate-400">
+          Your personal connections — used for runs you start, and visible only to you.
+        </p>
+
+        <section v-for="group in groups" :key="group.title">
+          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ group.title }}
+          </h3>
+          <div class="space-y-1.5">
+            <button
+              v-for="item in group.items"
+              :key="item.key"
+              type="button"
+              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-left transition hover:border-slate-700 hover:bg-slate-900"
+              @click="item.onClick()"
+            >
+              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
+                  <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
+                    {{ item.status || 'Connected' }}
+                  </UBadge>
+                  <span v-else class="text-[11px] text-slate-500">Not connected</span>
+                </div>
+                <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
+              </div>
+              <UIcon name="i-lucide-chevron-right" class="h-4 w-4 shrink-0 text-slate-500" />
+            </button>
+          </div>
+        </section>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/pipeline/PipelineBuilder.vue

@@ -31,7 +31,7 @@ function toggleGating(i: number) {
   if (!cfg) return
   cfg.gating = cfg.gating?.enabled
     ? { ...cfg.gating, enabled: false }
-    : { enabled: true, minRisk: 0.6, minImpact: 0.6 }
+    : { enabled: true, minRisk: 0.6, minImpact: 0.6, onMissingEstimate: 'consensus' }
 }
 const agents = useAgentsStore()
 const ui = useUiStore()

package/app/components/providers/VendorCredentialsModal.vue

@@ -22,7 +22,9 @@ const back = useIntegrationBack(open)
 
 // Horizontal tabs replace the old long vertical scroll: each credential kind is its own
 // section (pooled subscriptions, direct vendor keys, proxy/gateway keys, personal subs).
-const activeTab = ref('pool')
+// Initialised from the ui store so a caller can deep-link to a tab — the user-scoped
+// "My subscriptions" entry opens straight onto the `personal` tab.
+const activeTab = ref(ui.vendorCredentialsTab)
 const tabs = [
   { value: 'pool', label: 'Workspace pool', icon: 'i-lucide-users', slot: 'pool' },
   { value: 'direct', label: 'Direct providers', icon: 'i-lucide-key-round', slot: 'direct' },
@@ -51,7 +53,10 @@ const token = ref('')
 const busy = ref(false)
 
 watch(open, (isOpen) => {
-  if (isOpen && workspace.workspaceId) void creds.load(workspace.workspaceId)
+  if (!isOpen) return
+  // Honour a deep-linked tab each time the modal opens (e.g. "My subscriptions" → personal).
+  activeTab.value = ui.vendorCredentialsTab
+  if (workspace.workspaceId) void creds.load(workspace.workspaceId)
 })
 
 /** Step-by-step instructions for the selected vendor. */