@cat-factory/app 0.174.0 → 0.178.0

package/README.md

@@ -56,10 +56,10 @@ over the WebSocket. How that sync works is written up in
 ## Interface modes (basic / advanced)
 
 The SPA renders at one of two **interface tiers**. `basic` (the default) is the everyday
-surface: the run/pipeline options that only exist to override a workspace-level default are
-left at that default, and the nav is trimmed to the destinations that are the **only route**
-to their capability. `advanced` shows everything. The tier resolves in a fixed order, first
-match wins:
+**delivery** surface — plan work on a board, run it, review and merge it: the run/pipeline
+options that only exist to override a workspace-level default are left at that default, and
+the nav is trimmed to what that loop needs. `advanced` shows everything. The tier resolves in
+a fixed order, first match wins:
 
 1. **`NUXT_PUBLIC_UI_MODE`** (`basic` | `advanced`) — the deployment pin. Like
    `NUXT_PUBLIC_API_BASE` it is baked in at **build** time (`ssr: false`), and while it is
@@ -82,20 +82,32 @@ hoc where it can be avoided:
 - **A nav destination** declares `advanced: true` in `app/modular/nav-contributions.ts`. The
   shared `navSlotFilter` drops it in basic mode across all three shells (sidebar, command
   palette, toolbar), independently of its RBAC `gate` — both must pass. A consumer module's
-  own contributions take the same flag. The bar for setting it is **route count, not how
-  advanced the surface feels**: hiding the only way to reach a capability removes the
-  capability from the tier, while hiding a shortcut into a surface a basic destination also
-  opens removes nothing. So the flag belongs on a surface that sits beside the delivery path
-  (Sandbox, Kaizen), on a palette shortcut into a Workspace-settings tab, or on a knob the
-  Integrations hub already offers — and never on a sole route (the pipeline builder, the
-  fragment library, the infrastructure/PREnv windows, the operator + reports views).
-  `nav-contributions.spec.ts` pins the advanced set against a table of each item's
-  alternative route, so promoting one forces that claim to be written down.
+  own contributions take the same flag. The bar is **whether the everyday delivery loop needs
+  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 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).
+
+  Sole-route items stay in basic when the delivery loop runs on them: the pipeline builder,
+  add-from-repo, the fragment library, the infrastructure/PREnv windows, and the workspace /
+  model configuration a run actually reads. `nav-contributions.spec.ts` pins the advanced set
+  against a table naming each item's kind and reason, so promoting one forces that claim to be
+  written down rather than assumed.
+
 - **A less-used option inside a surface** reads `useUiModeStore().isAdvanced`. Hide, never
   disable, and only ever hide an OVERRIDE: what remains must be exactly the default the hidden
   field would have shown, so a basic-mode user never gets different behaviour from an advanced
   one — only fewer choices. An input nothing else supplies (the pipeline, the apriori branches)
   stays in both tiers however advanced it feels.
+- **A whole AUTHORING affordance** may be tier-scoped the same way — the frame header's
+  recurring-schedule and initiative buttons are advanced-only — but only while the tier hides
+  the ability to CREATE, never the ability to SEE. Existing state has to stay legible in basic
+  mode through its normal surfaces (a live schedule still badges its task card and opens its
+  inspector panel; an initiative is still a block on the board with its own inspector), or the
+  tier turns into a way for a user to be acted on by configuration they cannot find.
 - **An override control on an EXISTING entity gates on `showOverrideField(isAdvanced, …values)`**
   (`app/utils/uiMode.ts`) rather than on `isAdvanced` alone. Hiding an override is only safe
   while it is unset — always true for a creation form, never guaranteed for a block that a
@@ -141,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/board/nodes/BlockNode.vue

@@ -24,6 +24,7 @@ const agentRuns = useAgentRunsStore()
 const services = useServicesStore()
 const reviews = useReviewStage()
 const access = useWorkspaceAccess()
+const uiMode = useUiModeStore()
 const { t } = useI18n()
 const { lod } = useSemanticZoom()
 // Coarse-pointer (touch) bumps the frame-header actions from `xs` to `sm` so
@@ -161,6 +162,13 @@ function addRecurring() {
   ui.openAddRecurring(props.id)
 }
 
+// Hunt this service's tracker board for a bug worth picking up. Scoped to THIS frame, so
+// an adopted candidate lands here rather than wherever the board's first frame happens to be.
+function huntBugs() {
+  ui.expandFrame(props.id)
+  ui.openBugHunt(null, props.id)
+}
+
 function createInitiative() {
   ui.expandFrame(props.id)
   ui.openCreateInitiative(props.id)
@@ -491,8 +499,18 @@ const ITEM_ICON: Record<string, string> = {
                   :title="t('board.frame.createTaskFromIssueTitle')"
                   @click.stop="createTaskFromIssue"
                 />
+                <!-- Recurring pipelines + initiatives are ADVANCED-tier authoring: both plan
+                     work rather than do it (a schedule that fires runs on a cadence, an
+                     initiative that groups tasks under a goal), and the basic frame header is
+                     the most-used control strip on the board. Hiding the CREATE affordance
+                     removes neither's existing state from basic mode — a live schedule still
+                     badges its task card and opens its inspector panel, and an initiative is
+                     still a block on the board with its own inspector — so what a basic-mode
+                     user loses is the ability to author a new one, not sight of one. -->
                 <UButton
+                  v-if="uiMode.isAdvanced"
                   class="nodrag"
+                  data-testid="frame-add-recurring"
                   :size="isTouch ? 'sm' : 'xs'"
                   variant="ghost"
                   color="neutral"
@@ -501,6 +519,7 @@ const ITEM_ICON: Record<string, string> = {
                   @click.stop="addRecurring"
                 />
                 <UButton
+                  v-if="uiMode.isAdvanced"
                   class="nodrag"
                   data-testid="frame-add-initiative"
                   :size="isTouch ? 'sm' : 'xs'"
@@ -510,6 +529,17 @@ const ITEM_ICON: Record<string, string> = {
                   :title="t('board.frame.createInitiativeTitle')"
                   @click.stop="createInitiative"
                 />
+                <UButton
+                  v-if="tasks.anyOffered"
+                  class="nodrag"
+                  data-testid="frame-hunt-bugs"
+                  :size="isTouch ? 'sm' : 'xs'"
+                  variant="ghost"
+                  color="neutral"
+                  icon="i-lucide-radar"
+                  :title="t('board.frame.huntBugsTitle')"
+                  @click.stop="huntBugs"
+                />
               </template>
               <UButton
                 class="nodrag"

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/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,16 +1,26 @@
 <script setup lang="ts">
-// 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.
+import { showOverrideField } from '~/utils/uiMode'
+
+// 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()
@@ -23,8 +33,7 @@ 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).
 // When false (auth disabled / local mode) we fold the personal rows back into this hub so
@@ -54,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.
@@ -111,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[] = []
@@ -268,7 +242,17 @@ const groups = computed<IntegrationGroup[]>(() => {
   // Gated like every other backend-toggleable system: hidden until a probe confirms
   // the observability module is enabled (`available === true`), so a disabled backend
   // doesn't show a dead "Connect" row that only 503s.
-  if (releaseHealth.available) {
+  //
+  // Also an ADVANCED-tier row. Post-release health is the one integration here that acts
+  // AFTER delivery rather than during it — it watches monitors once a release ships and can
+  // spawn an on-call agent — so it sits outside the everyday loop the basic tier serves.
+  // Gated with `showOverrideField` rather than a bare `isAdvanced`: an already-connected
+  // Datadog is live behaviour on this workspace, and a tier must never conceal a connection a
+  // basic-mode user would then have no way to inspect or disconnect.
+  if (
+    releaseHealth.available &&
+    showOverrideField(uiMode.isAdvanced, releaseHealth.connection.connected || null)
+  ) {
     out.push({
       title: t('layout.integrationsHub.groups.observability'),
       items: [
@@ -325,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({
@@ -339,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

@@ -13,7 +13,6 @@ const pipelines = usePipelinesStore()
 const execution = useExecutionStore()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const tasks = useTasksStore()
 const fragments = useFragmentsStore()
 const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
@@ -450,33 +449,9 @@ const showOriginalDescription = ref(false)
         >
           {{ block!.pullRequest!.branch }}
         </UButton>
-        <UButton
-          v-if="tasks.available"
-          color="neutral"
-          variant="soft"
-          size="xs"
-          icon="i-lucide-ticket"
-          @click="ui.openTaskImport()"
-        >
-          {{
-            tasks.anyOffered
-              ? t('panels.inspector.importIssue')
-              : t('panels.inspector.connectTracker')
-          }}
-        </UButton>
-        <!-- Hunt this service's tracker board for a bug worth picking up. Scoped to the
-             selected container, so an adopted candidate lands here rather than wherever the
-             board's first frame happens to be. -->
-        <UButton
-          v-if="isContainer && tasks.anyOffered"
-          color="neutral"
-          variant="soft"
-          size="xs"
-          icon="i-lucide-radar"
-          @click="ui.openBugHunt(null, block!.id)"
-        >
-          {{ t('panels.inspector.huntBugs') }}
-        </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"