@cat-factory/app 0.176.0 → 0.178.1

package/README.md

@@ -86,7 +86,7 @@ hoc where it can be avoided:
   it**, and marking an item does one of two distinguishable things:
   - **Reached another way** — a shortcut whose surface a basic destination also opens, so
     nothing is lost (the Merge / Service-best-practices palette entries into Workspace
-    settings, the local-models knob the Integrations hub already offers).
+    settings, the local-models knob the Model providers hub already offers).
   - **Out of the tier** — the sole route, hidden on purpose, so the capability is _absent_
     from basic mode and the tier switch is the way to it (Sandbox, Kaizen, repo bootstrap,
     and the deployment-wide operator + reports rollups).
@@ -153,9 +153,36 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   by every VCS provider), `vcs` (the GitLab personal-access-token connect),
   `bootstrap`, `documents`, `tasks`, `requirements` (review), `scenarios`
   (acceptance), and `fragments` (the prompt-fragment library).
+- **Model providers** — `ModelProvidersHub.vue`, the sibling hub for the ENGINES
+  (OpenRouter, vendor keys, personal subscriptions, own-machine runners). Kept out
+  of the Integrations hub on purpose: an integration is optional context in or
+  output out, while a provider is what executes the work, so a deployment with none
+  connected runs nothing at all. **A new provider-shaped connection belongs here,
+  never in `IntegrationsHub.vue`.** Both hubs, plus the user-scoped `PersonalSetupModal`,
+  share the `IntegrationBackTitle` Back control, which returns to whichever hub set
+  its came-from marker (`ui.cameFrom{Integrations,ModelProviders,Personal}`) — a panel
+  reachable from more than one hub must not hard-code its return.
 - **Auth** (`components/auth`) — `AuthGate` / `LoginScreen` / `UserMenu`; the app
   is gated when the backend requires sign-in.
 
+## Where a surface lives
+
+Two placements are load-bearing enough to state, because putting a new one in the
+wrong place is invisible until a user cannot find it:
+
+- **The sidebar section is a claim about what the destination IS.** `models` is the
+  engines, `integrations` the optional systems, `infrastructure` where agent
+  containers and test environments run, `configuration` workspace/account settings.
+  `nav-contributions.spec.ts` pins the section order and each section's membership.
+- **A flow that edits ONE entity's config is a section of the window that owns that
+  config, not a sibling nav entry.** The guided Docker Compose environment setup
+  (`ComposeEnvironmentSetupSection.vue` → `EnvironmentSetupWizard.vue`) lives inside
+  Infrastructure → Test environments for exactly this reason: it writes a service's
+  Compose recipe plus the workspace's Compose handler, both configured in that tab.
+  It also carries a full "how it works / when you need this / when you can skip it"
+  explanation there rather than a one-line hint, since the decision to run it has to
+  be made before opening a five-minute wizard.
+
 ## Develop & test
 
 ```bash

package/app/components/documents/DocumentImportModal.vue

@@ -4,12 +4,11 @@ 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
-// to import from (Confluence, Notion, …). Carries an optional target frame from
-// the inspector so "Preview & spawn" lands the structure inside that frame.
+// to import from (Confluence, Notion, …). "Preview & spawn" always creates new
+// top-level frames — see `SpawnPreviewModal` for why there is no frame target.
 const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const board = useBoardStore()
 const toast = useToast()
 
 const open = computed({
@@ -20,11 +19,6 @@ const open = computed({
 })
 const back = useIntegrationBack(open)
 
-const targetFrameId = computed(() => ui.documentImport?.targetFrameId ?? null)
-const targetFrameTitle = computed(() =>
-  targetFrameId.value ? board.getBlock(targetFrameId.value)?.title : null,
-)
-
 /** Which connected source we're importing from (defaults to the first). */
 const source = ref<DocumentSourceKind | undefined>(undefined)
 const ref_ = ref('')
@@ -78,7 +72,7 @@ async function doImport() {
 }
 
 function preview(externalId: string) {
-  if (source.value) ui.openSpawnPreview(source.value, externalId, targetFrameId.value)
+  if (source.value) ui.openSpawnPreview(source.value, externalId)
 }
 </script>
 
@@ -106,14 +100,6 @@ function preview(externalId: string) {
       </div>
 
       <div v-else class="space-y-4">
-        <p v-if="targetFrameTitle" class="text-xs text-slate-400">
-          <i18n-t keypath="documents.import.spawningInto" scope="global">
-            <template #frame>
-              <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
-            </template>
-          </i18n-t>
-        </p>
-
         <UFormField v-if="sourceItems.length > 1" :label="t('documents.import.sourceLabel')">
           <USelect v-model="source" :items="sourceItems" class="w-full" />
         </UFormField>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -117,7 +117,7 @@ async function unlink(doc: SourceDocument) {
             color="primary"
             variant="soft"
             icon="i-lucide-file-down"
-            @click="ui.openDocumentImport(null)"
+            @click="ui.openDocumentImport()"
           >
             {{ t('documents.templates.importButton') }}
           </UButton>

package/app/components/documents/SpawnPreviewModal.vue

@@ -4,10 +4,16 @@ import type { DocumentBoardPlan } from '~/types/domain'
 // Preview the structure an imported document expands into, then spawn it. The
 // plan is fetched fresh on open; a badge makes clear whether an LLM or the
 // deterministic heading parser produced it.
+//
+// A spawn always creates new top-level frames. The planner's job is to decompose a
+// document into services, so spawning into an existing frame could only flatten the
+// planned frames into it — silently discarding the frame titles and types rendered
+// below, i.e. producing something other than what this preview showed. Scoping a
+// spawn to one service needs a target-aware PLAN (a prompt that yields modules and
+// tasks for an existing service), not a target-aware write.
 const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const board = useBoardStore()
 const toast = useToast()
 
 const open = computed({
@@ -17,11 +23,6 @@ const open = computed({
   },
 })
 
-const targetFrameId = computed(() => ui.spawnPreview?.targetFrameId ?? null)
-const targetFrameTitle = computed(() =>
-  targetFrameId.value ? board.getBlock(targetFrameId.value)?.title : null,
-)
-
 const plan = ref<DocumentBoardPlan | null>(null)
 const loadingPlan = ref(false)
 const spawning = ref(false)
@@ -54,11 +55,7 @@ async function spawn() {
   if (!preview) return
   spawning.value = true
   try {
-    const result = await documents.spawn(
-      preview.source,
-      preview.externalId,
-      targetFrameId.value ?? undefined,
-    )
+    const result = await documents.spawn(preview.source, preview.externalId)
     toast.add({
       title: t('documents.spawn.spawned'),
       description: t('documents.spawn.summary', {
@@ -100,14 +97,7 @@ async function spawn() {
                 : t('documents.spawn.plannerHeadings')
             }}
           </UBadge>
-          <span v-if="targetFrameTitle" class="text-xs text-slate-400">
-            <i18n-t keypath="documents.spawn.intoFrame" scope="global">
-              <template #frame>
-                <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
-              </template>
-            </i18n-t>
-          </span>
-          <span v-else class="text-xs text-slate-400">{{ t('documents.spawn.asTopLevel') }}</span>
+          <span class="text-xs text-slate-400">{{ t('documents.spawn.asTopLevel') }}</span>
         </div>
 
         <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-slate-400">

package/app/components/environments/steps/EnvPickStep.vue

@@ -18,6 +18,9 @@ const { t } = useI18n()
 <template>
   <section class="space-y-3" data-testid="env-setup-step-pick">
     <p class="text-sm text-slate-400">{{ t('environmentWizard.pick.intro') }}</p>
+    <!-- The one-service scope caveat, stated on the step that asks for the service: nothing
+         here changes any other service, and running it twice just re-edits this one's recipe. -->
+    <p class="text-xs leading-relaxed text-slate-500">{{ t('environmentWizard.pick.scope') }}</p>
     <p v-if="!store.serviceFrames.length" class="text-sm text-slate-500">
       {{ t('environmentWizard.pick.empty') }}
     </p>

package/app/components/layout/CommandBar.vue

@@ -92,7 +92,7 @@ const dynamicIntegrationCommands = computed<Command[]>(() => {
         group: groupIntegrations,
         icon: 'i-lucide-file-down',
         keywords: t('layout.commandBar.keywords.documentImport'),
-        run: () => ui.openDocumentImport(null),
+        run: () => ui.openDocumentImport(),
       })
     }
   }

package/app/components/layout/IntegrationBackTitle.vue

@@ -1,21 +1,24 @@
 <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 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.
+// from — the workspace Integrations hub (`ui.cameFromIntegrations`), the Model providers
+// hub (`ui.cameFromModelProviders`) 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 { t } = useI18n()
 const ui = useUiStore()
-const cameFromHub = computed(() => ui.cameFromIntegrations || ui.cameFromPersonal)
-const backLabel = computed(() =>
-  ui.cameFromPersonal
-    ? t('layout.integrationBack.backToMySetup')
-    : t('layout.integrationBack.backToIntegrations'),
+const cameFromHub = computed(
+  () => ui.cameFromIntegrations || ui.cameFromModelProviders || ui.cameFromPersonal,
 )
+const backLabel = computed(() => {
+  if (ui.cameFromPersonal) return t('layout.integrationBack.backToMySetup')
+  if (ui.cameFromModelProviders) return t('layout.integrationBack.backToModelProviders')
+  return t('layout.integrationBack.backToIntegrations')
+})
 </script>
 
 <template>

package/app/components/layout/IntegrationsHub.vue

@@ -1,18 +1,26 @@
 <script setup lang="ts">
 import { showOverrideField } from '~/utils/uiMode'
 
-// 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.
+// The Integrations hub: a single modal that lists the OPTIONAL external systems the WORKSPACE
+// can enable or link in — the ones that feed a run its context (source control, documents,
+// trackers) or receive its output (chat, observability). 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.
 //
-// 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.
+// Scope split 1 — MODEL PROVIDERS are NOT integrations here. They are the engines the
+// harnesses run on (with none connected nothing runs at all), so they have their own
+// top-level hub, `ModelProvidersHub.vue`. Keeping them out is the point: an integration is
+// something a deployment can live without, and burying the one mandatory connection among a
+// dozen optional ones is what made this hub confusing.
+//
+// Scope split 2 — per-USER connections (a personal GitHub token, own-machine runners, personal
+// subscriptions) live in the "My setup" hub (UserMenu → My setup), NOT here, keeping this hub
+// 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 the workspace-adjacent ones stay reachable
+// (the model-shaped ones fall back into the Model providers hub instead).
 const { t } = useI18n()
 const ui = useUiStore()
 const auth = useAuthStore()
@@ -25,8 +33,6 @@ const releaseHealth = useReleaseHealthStore()
 const packageRegistries = usePackageRegistriesStore()
 const publicApiKeys = usePublicApiKeysStore()
 const userSecrets = useUserSecretsStore()
-const apiKeys = useApiKeysStore()
-const workspace = useWorkspaceStore()
 const uiMode = useUiModeStore()
 
 // True when the per-user "My setup" hub is reachable (UserMenu renders only when signed in).
@@ -57,8 +63,6 @@ watch(
       void packageRegistries.ensureLoaded().catch(() => {})
       void publicApiKeys.ensureLoaded().catch(() => {})
       void userSecrets.load().catch(() => {})
-      // Drives the OpenRouter row's "Key connected" badge.
-      if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
     }
   },
   // Lazy v-if mount: the hub mounts with `integrationsOpen` already true → load immediately.
@@ -114,42 +118,9 @@ function go(fn: () => void) {
 const groups = computed<IntegrationGroup[]>(() => {
   const out: IntegrationGroup[] = []
 
-  // --- Models & providers ----------------------------------------------------
-  // Top of the hub: an OpenRouter key is the fastest path to 300+ models, so it leads.
-  const openRouterKeyConnected = apiKeys.configuredProviders.has('openrouter')
-  out.push({
-    title: t('layout.integrationsHub.groups.models'),
-    items: [
-      {
-        key: 'openrouter',
-        icon: 'i-lucide-waypoints',
-        label: 'OpenRouter',
-        description: t('layout.integrationsHub.items.openrouter.description'),
-        status: openRouterKeyConnected
-          ? t('layout.integrationsHub.status.keyConnected')
-          : undefined,
-        connected: openRouterKeyConnected,
-        recommended: true,
-        onClick: () => go(ui.openOpenRouter),
-      },
-      {
-        key: 'vendors',
-        icon: 'i-lucide-key-round',
-        label: t('layout.integrationsHub.items.vendors.label'),
-        description: t('layout.integrationsHub.items.vendors.description'),
-        onClick: () => go(ui.openVendorCredentials),
-      },
-    ],
-    // Personal (individual-usage) subscriptions are per-USER, so they live in My setup —
-    // but this hub is where people look first when connecting "their Claude plan". A quiet
-    // pointer link keeps them findable without a workspace-scoped row competing here.
-    footerLink: {
-      key: 'personal-subs',
-      icon: 'i-lucide-user',
-      label: t('layout.integrationsHub.items.personalSubs.label'),
-      onClick: () => go(() => ui.openVendorCredentials('personal')),
-    },
-  })
+  // NOTE: model providers (OpenRouter, vendor keys, personal subscriptions, local runners)
+  // are NOT listed here — they have their own top-level hub (`ModelProvidersHub.vue`, SideBar
+  // → "Model providers"). See the scope split at the top of this file.
 
   // --- Source control --------------------------------------------------------
   const code: IntegrationItem[] = []
@@ -205,7 +176,7 @@ const groups = computed<IntegrationGroup[]>(() => {
         icon: 'i-lucide-file-down',
         label: t('layout.integrationsHub.items.documentImport.label'),
         description: t('layout.integrationsHub.items.documentImport.description'),
-        onClick: () => go(() => ui.openDocumentImport(null)),
+        onClick: () => go(() => ui.openDocumentImport()),
       })
     }
     // Per-DocKind template + exemplar links are workspace CONFIG over the imported corpus, not an
@@ -338,6 +309,8 @@ const groups = computed<IntegrationGroup[]>(() => {
   // --- 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.)
+  // Only the source-control one: the per-user MODEL connections are listed unconditionally
+  // in the Model providers hub, so they need no fallback.
   if (!personalHubReachable.value) {
     const pat = !!userSecrets.statusFor('github_pat')
     out.push({
@@ -352,13 +325,6 @@ const groups = computed<IntegrationGroup[]>(() => {
           connected: pat,
           onClick: () => go(ui.openUserSecrets),
         },
-        {
-          key: 'local-runners',
-          icon: 'i-lucide-server',
-          label: t('layout.integrationsHub.items.localRunners.label'),
-          description: t('layout.integrationsHub.items.localRunners.description'),
-          onClick: () => go(ui.openLocalModels),
-        },
       ],
     })
   }

package/app/components/layout/ModelProvidersHub.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+// The Model providers hub: where the ENGINES the harnesses run on are connected.
+//
+// Split out of the Integrations hub deliberately. Both are technically "external systems we
+// hold a credential for", but they answer different questions: an integration is an OPTIONAL
+// system that feeds a run context or receives its output (source control, trackers, documents,
+// chat, observability), while a model provider is what actually executes the work — with none
+// connected, nothing runs at all. Listing the providers among a dozen optional connectors
+// buried the one connection every deployment must make.
+//
+// Rows reuse the existing per-provider panel handlers on the `ui` store via
+// `ui.openFromModelProviders(...)`, so opening one closes this hub and gives that panel a
+// "Back to Model providers" control (IntegrationBackTitle). Layout mirrors the Integrations
+// hub row-for-row so the two read as siblings.
+const { t } = useI18n()
+const ui = useUiStore()
+const apiKeys = useApiKeysStore()
+const localModels = useLocalModelsStore()
+const personalSubs = usePersonalSubscriptionsStore()
+const workspace = useWorkspaceStore()
+
+const open = computed({
+  get: () => ui.modelProvidersOpen,
+  set: (v: boolean) => (v ? ui.openModelProviders() : ui.closeModelProviders()),
+})
+
+// Free-text filter over the rows (label + description), matching the Integrations hub.
+// Declared before the `immediate` watch below, which resets it on open.
+const query = ref('')
+
+// Load the cheap status reads each time the hub opens so every badge is accurate.
+watch(
+  () => ui.modelProvidersOpen,
+  (isOpen) => {
+    if (!isOpen) return
+    query.value = ''
+    if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
+    void localModels.load().catch(() => {})
+    void personalSubs.load().catch(() => {})
+  },
+  // Lazy v-if mount: the hub mounts with `modelProvidersOpen` already true → load immediately.
+  { immediate: true },
+)
+
+/** One provider row. `connected` drives the green badge; `status` is its line. */
+interface ProviderItem {
+  key: string
+  icon: string
+  label: string
+  description: string
+  status?: string
+  connected?: boolean
+  /** Tags the fastest path to a working deployment while nothing is connected yet. */
+  recommended?: boolean
+  onClick: () => void
+}
+
+interface ProviderGroup {
+  title: string
+  /** Rendered under the group's rows — the scope caveat for the personal group. */
+  note?: string
+  items: ProviderItem[]
+}
+
+function go(fn: () => void) {
+  ui.openFromModelProviders(fn)
+}
+
+const groups = computed<ProviderGroup[]>(() => {
+  const openRouterKeyConnected = apiKeys.configuredProviders.has('openrouter')
+  const runnerCount = localModels.endpoints.length
+  const subCount = personalSubs.subscriptions.length
+
+  return [
+    // --- Workspace-wide providers ------------------------------------------
+    // An OpenRouter key is the fastest path to 300+ models, so it leads.
+    {
+      title: t('layout.modelProvidersHub.groups.workspace'),
+      items: [
+        {
+          key: 'openrouter',
+          icon: 'i-lucide-waypoints',
+          label: 'OpenRouter',
+          description: t('layout.modelProvidersHub.items.openrouter.description'),
+          status: openRouterKeyConnected
+            ? t('layout.modelProvidersHub.status.keyConnected')
+            : undefined,
+          connected: openRouterKeyConnected,
+          recommended: true,
+          onClick: () => go(ui.openOpenRouter),
+        },
+        {
+          key: 'vendors',
+          icon: 'i-lucide-key-round',
+          label: t('layout.modelProvidersHub.items.vendors.label'),
+          description: t('layout.modelProvidersHub.items.vendors.description'),
+          onClick: () => go(ui.openVendorCredentials),
+        },
+      ],
+    },
+    // --- Personal (per-user) providers -------------------------------------
+    // These live on the user, not the workspace, and are also reachable from "My setup".
+    // They are listed here as full rows rather than a pointer link because this hub is
+    // scoped by TOPIC (what runs the work) rather than by ownership — "where do I put my
+    // Claude plan" is the single most common reason to open it.
+    {
+      title: t('layout.modelProvidersHub.groups.personal'),
+      note: t('layout.modelProvidersHub.groups.personalNote'),
+      items: [
+        {
+          key: 'personal-subs',
+          icon: 'i-lucide-user',
+          label: t('layout.modelProvidersHub.items.personalSubs.label'),
+          description: t('layout.modelProvidersHub.items.personalSubs.description'),
+          status: subCount
+            ? t('layout.modelProvidersHub.status.connectedCount', { count: subCount }, subCount)
+            : undefined,
+          connected: subCount > 0,
+          onClick: () => go(() => ui.openVendorCredentials('personal')),
+        },
+        {
+          key: 'local-runners',
+          icon: 'i-lucide-server',
+          label: t('layout.modelProvidersHub.items.localRunners.label'),
+          description: t('layout.modelProvidersHub.items.localRunners.description'),
+          status: runnerCount
+            ? t(
+                'layout.modelProvidersHub.status.connectedCount',
+                { count: runnerCount },
+                runnerCount,
+              )
+            : undefined,
+          connected: runnerCount > 0,
+          onClick: () => go(ui.openLocalModels),
+        },
+      ],
+    },
+  ]
+})
+
+// Connected rows first, then idle — a stable rank so each group reads "what's live" top-down.
+function stateRank(item: ProviderItem): number {
+  return item.connected ? 0 : 1
+}
+
+const allItems = computed(() => groups.value.flatMap((g) => g.items))
+const anyConnected = computed(() => allItems.value.some((i) => i.connected))
+
+function matches(text: string, q: string): boolean {
+  return text.toLowerCase().includes(q)
+}
+
+const filteredGroups = computed<ProviderGroup[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  return groups.value
+    .map((g) => ({
+      ...g,
+      items: (q ? g.items.filter((i) => matches(i.label, q) || matches(i.description, q)) : g.items)
+        .slice()
+        .sort((a, b) => stateRank(a) - stateRank(b)),
+    }))
+    .filter((g) => g.items.length)
+})
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('layout.modelProvidersHub.title')"
+    :ui="{ content: 'max-w-xl' }"
+  >
+    <template #body>
+      <div class="space-y-5" data-testid="model-providers-hub">
+        <p class="text-xs text-slate-400">
+          {{ t('layout.modelProvidersHub.intro') }}
+        </p>
+
+        <!-- Nothing connected at all is a hard stop, not a nudge: no provider means no agent
+             step can run. Say so plainly rather than showing an empty list of options. -->
+        <div
+          v-if="!anyConnected"
+          class="rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
+        >
+          <div class="mb-1.5 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>{{ t('layout.modelProvidersHub.getStarted.title') }}</span>
+          </div>
+          <p class="text-xs text-slate-300">
+            {{ t('layout.modelProvidersHub.getStarted.body') }}
+          </p>
+        </div>
+
+        <UInput
+          v-model="query"
+          icon="i-lucide-search"
+          size="sm"
+          :placeholder="t('layout.modelProvidersHub.searchPlaceholder')"
+          class="w-full"
+        />
+
+        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-slate-500">
+          {{ t('layout.modelProvidersHub.noMatches', { 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>
+          <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-start transition hover:border-slate-700 hover:bg-slate-900"
+              :data-testid="`model-provider-${item.key}`"
+              @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 || t('layout.modelProvidersHub.status.connected') }}
+                  </UBadge>
+                  <span v-else class="text-[11px] text-slate-500">{{
+                    t('layout.modelProvidersHub.status.notConnected')
+                  }}</span>
+                  <UBadge
+                    v-if="!anyConnected && item.recommended"
+                    color="primary"
+                    variant="subtle"
+                    size="sm"
+                  >
+                    {{ t('layout.modelProvidersHub.status.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 rtl:-scale-x-100"
+              />
+            </button>
+          </div>
+          <p v-if="group.note" class="mt-1.5 px-1 text-[11px] text-slate-500">{{ group.note }}</p>
+        </section>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/panels/InspectorPanel.vue

@@ -12,7 +12,6 @@ const board = useBoardStore()
 const pipelines = usePipelinesStore()
 const execution = useExecutionStore()
 const ui = useUiStore()
-const documents = useDocumentsStore()
 const fragments = useFragmentsStore()
 const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
@@ -30,13 +29,6 @@ onMounted(() => {
   github.ensureLoaded()
 })
 
-/** Open the document import/spawn flow, targeting this container's frame. */
-function spawnFromDocument() {
-  if (!block.value) return
-  const frameId = isFrame.value ? block.value.id : (board.serviceOf(block.value)?.id ?? null)
-  ui.openDocumentImport(frameId)
-}
-
 const block = computed<Block | undefined>(() =>
   ui.selectedBlockId ? board.getBlock(ui.selectedBlockId) : undefined,
 )
@@ -451,17 +443,8 @@ const showOriginalDescription = ref(false)
         </UButton>
         <!-- Tracker entry points (import an issue, hunt bugs) live on the service frame's
              header, where they are already scoped to a frame — the inspector doesn't
-             duplicate them. -->
-        <UButton
-          v-if="isContainer && documents.available && documents.anyConnected"
-          color="neutral"
-          variant="soft"
-          size="xs"
-          icon="i-lucide-wand-sparkles"
-          @click="spawnFromDocument"
-        >
-          {{ t('panels.inspector.spawnFromDocument') }}
-        </UButton>
+             duplicate them. Document spawn is board-level only (command bar, Integrations
+             hub, templates modal), since planning is target-blind. -->
       </div>
 
       <!-- service (frame): navigate the prescriptive spec tree (+ Gherkin scenarios when