@cat-factory/app 0.135.2 → 0.136.0

package/app/components/panels/InspectorPanel.vue

@@ -1,26 +1,10 @@
 <script setup lang="ts">
+import { PanelsOutlet } from '@modular-vue/core'
 import type { Block, BlockStatus } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
-import TaskContextDocs from '~/components/documents/TaskContextDocs.vue'
-import TaskContextIssues from '~/components/tasks/TaskContextIssues.vue'
-import TaskAgentConfig from '~/components/panels/inspector/TaskAgentConfig.vue'
-import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
-import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
-import ServiceReleaseHealthConfig from '~/components/panels/inspector/ServiceReleaseHealthConfig.vue'
-import ServiceTestSecrets from '~/components/panels/inspector/ServiceTestSecrets.vue'
-import FrontendConfig from '~/components/panels/inspector/FrontendConfig.vue'
-import ServiceConnections from '~/components/panels/inspector/ServiceConnections.vue'
-import ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
-import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue'
-import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
-import TaskRunSettings from '~/components/panels/inspector/TaskRunSettings.vue'
-import TaskExecution from '~/components/panels/inspector/TaskExecution.vue'
-import TaskEstimateBadge from '~/components/panels/inspector/TaskEstimateBadge.vue'
-import EpicChildren from '~/components/panels/inspector/EpicChildren.vue'
-import InitiativeInspector from '~/components/panels/inspector/InitiativeInspector.vue'
+import { inspectorPanels } from '~/modular/panels/inspector.logic'
 import IconButton from '~/components/common/IconButton.vue'
-import RecurringScheduleSettings from '~/components/panels/inspector/RecurringScheduleSettings.vue'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
 
@@ -76,8 +60,6 @@ watch(
 )
 const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
 const isTask = computed(() => level.value === 'task')
-const isEpic = computed(() => level.value === 'epic')
-const isInitiative = computed(() => level.value === 'initiative')
 
 const instance = computed(() => execution.getInstance(block.value?.executionId))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
@@ -481,14 +463,9 @@ const showOriginalDescription = ref(false)
         </UButton>
       </div>
 
-      <!-- task: context documents -->
-      <TaskContextDocs v-if="isTask" :key="`context-docs-${block.id}`" :block="block" />
-
-      <!-- task: context issues (tracker) -->
-      <TaskContextIssues v-if="isTask" :key="`context-issues-${block.id}`" :block="block" />
-
       <!-- service (frame): navigate the prescriptive spec tree (+ Gherkin scenarios when
-           the spec is on the repo's default branch) -->
+           the spec is on the repo's default branch). A shell affordance, not a
+           level-keyed body panel, so it stays here above the panel outlet. -->
       <UButton
         v-if="isFrame"
         block
@@ -501,60 +478,28 @@ const showOriginalDescription = ref(false)
         {{ t('panels.inspector.viewRequirements') }}
       </UButton>
 
-      <!-- service / module: tasks summary -->
-      <ContainerSummary v-if="isContainer" :key="`container-${block.id}`" :block="block" />
-      <!-- frontend (frame): build/serve/mock config + backend bindings (board links) -->
-      <FrontendConfig
-        v-if="isFrame && block.type === 'frontend'"
-        :key="`frontend-${block.id}`"
-        :block="block"
-      />
-
-      <!-- service (frame): directed connections to the other services it uses (board links) -->
-      <ServiceConnections
-        v-if="isFrame && block.type === 'service'"
-        :key="`connections-${block.id}`"
-        :block="block"
+      <!-- The level/type-keyed inspector body: the `inspectorPanels` panel group
+           (slice 4 of the modular-vue adoption). `<PanelsOutlet>` renders every
+           panel whose `when(block)` matches, ordered, with the selected block
+           injected as the subject (read via `usePanelSubject` in each panel's
+           wrapper). Replaces the pre-slice-4 `v-if` fan; `subject-key` is the block
+           id, so switching selections remounts panel content (matching the old
+           per-panel `:key`). A consumer contributes its own panels to the SAME
+           group via `registerAppModule`.
+
+           The `subject` cast is an upstream typing quirk, not a modelling escape
+           hatch: `<PanelsOutlet>` declares `subject` as `PropType<unknown>` with
+           `default: null`, which Volar narrows to `null`, so passing a typed
+           `Block | null` is rejected at compile time. `unknown` is the real
+           runtime contract; `as any` is the minimal unblock until the binding
+           types the prop explicitly (filed upstream — see the slice-4 residuals
+           in docs/initiatives/modular-vue-slice4-upstream-zones.md). -->
+      <PanelsOutlet
+        :group="inspectorPanels"
+        :subject="(block ?? null) as any"
+        :subject-key="block?.id ?? ''"
       />
 
-      <!-- service (frame): test infra + provisioning configuration -->
-      <ServiceTestConfig v-if="isFrame" :key="`test-config-${block.id}`" :block="block" />
-
-      <!-- service (frame): SENSITIVE test credentials (sealed, injected out of band) -->
-      <ServiceTestSecrets v-if="isFrame" :key="`test-secrets-${block.id}`" :block="block" />
-
-      <!-- service (frame): best-practice fragments for code-aware agents -->
-      <ServiceFragments v-if="isFrame" :key="`fragments-${block.id}`" :block="block" />
-
-      <!-- service (frame): post-release-health monitor/SLO mapping -->
-      <ServiceReleaseHealthConfig
-        v-if="isFrame"
-        :key="`release-health-${block.id}`"
-        :block="block"
-      />
-
-      <!-- task: the live execution surface first (open by default), then the estimate,
-           then the collapsed configuration sections (dependencies, run settings, agent
-           config, structure) so a running task reads top-down without scrolling. -->
-      <!-- Keyed by block id so a manual collapse/expand doesn't leak across task
-           selections: switching tasks re-mounts each section back to its default state
-           (e.g. the live Execution section is open again for the newly selected task). -->
-      <template v-else-if="isTask">
-        <RecurringScheduleSettings :key="`schedule-${block.id}`" :block="block" />
-        <TaskExecution :key="`execution-${block.id}`" :block="block" />
-        <TaskEstimateBadge :key="`estimate-${block.id}`" :block="block" />
-        <TaskDependencies :key="`deps-${block.id}`" :block="block" />
-        <TaskRunSettings :key="`run-settings-${block.id}`" :block="block" />
-        <TaskAgentConfig :key="`agent-config-${block.id}`" :block="block" />
-        <TaskStructure :key="`structure-${block.id}`" :block="block" />
-      </template>
-
-      <!-- epic: the full tree of member tasks, grouped by service → module -->
-      <EpicChildren v-else-if="isEpic" :key="`epic-${block.id}`" :block="block" />
-
-      <!-- initiative: status + goal, run-planning + tracker controls -->
-      <InitiativeInspector v-else-if="isInitiative" :block="block" />
-
       <!-- Locked-run explanation: a disabled task Run button reads as a dead lock unless
            it says what's holding it. Named here (and on the button title) so the blocking
            dependencies are visible to pointer, keyboard, and touch alike — a native title

package/app/modular/nav-contributions.spec.ts

@@ -45,7 +45,12 @@ const ALL_GATES: NavGates = {
   isAccountAdmin: true,
 }
 
-const slots = (): AppSlots => ({ nav: [...NAV_CONTRIBUTIONS], resultViews: [], agentKinds: [] })
+const slots = (): AppSlots => ({
+  nav: [...NAV_CONTRIBUTIONS],
+  resultViews: [],
+  agentKinds: [],
+  inspectorPanels: [],
+})
 const ids = (s: unknown) => (s as AppSlots).nav.map((i) => i.id)
 
 describe('navSlotFilter', () => {

package/app/modular/panels/inspector.logic.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest'
+import { resolvePanels } from '@modular-vue/core'
+import type { PanelEntry } from '@modular-vue/core'
+import type { Block, BlockLevel, BlockType } from '~/types/domain'
+import { INSPECTOR_PANEL_IDS, INSPECTOR_PANEL_SPECS } from './inspector.logic'
+
+/**
+ * Pins the inspector panel group's gating + ordering (slice 4 of the modular-vue
+ * adoption) against the pre-slice-4 `InspectorPanel.vue` `v-if` fan, using the
+ * SAME pure `resolvePanels` the host resolves through. A stub component per spec
+ * stands in for the real SFC (the gating/order is component-agnostic).
+ */
+
+const ENTRIES: PanelEntry<Block>[] = INSPECTOR_PANEL_SPECS.map((spec) => ({
+  id: spec.id,
+  order: spec.order,
+  when: spec.when,
+  // A trivial functional component stands in for the real SFC — the gating/order
+  // under test is component-agnostic; `() => null` satisfies the engine's
+  // `UiComponent` (a callable) without pulling a Vue runtime into the unit test.
+  component: () => null,
+}))
+
+const block = (level: BlockLevel, type: BlockType = 'service'): Block =>
+  ({ id: `b-${level}-${type}`, level, type }) as unknown as Block
+
+const visibleIds = (b: Block | null) => resolvePanels(ENTRIES, b).map((e) => e.id)
+
+describe('inspector panel group', () => {
+  it('every id has exactly one spec (no dup, no gap)', () => {
+    const specIds = INSPECTOR_PANEL_SPECS.map((s) => s.id).sort()
+    expect(specIds).toEqual([...INSPECTOR_PANEL_IDS].sort())
+    expect(new Set(specIds).size).toBe(specIds.length)
+  })
+
+  it('a service frame shows the container + service panels, ordered, no frontend-config', () => {
+    expect(visibleIds(block('frame', 'service'))).toEqual([
+      'container-summary',
+      'service-connections',
+      'service-test-config',
+      'service-test-secrets',
+      'service-fragments',
+      'service-release-health',
+    ])
+  })
+
+  it('a frontend frame swaps connections for frontend-config', () => {
+    expect(visibleIds(block('frame', 'frontend'))).toEqual([
+      'container-summary',
+      'frontend-config',
+      'service-test-config',
+      'service-test-secrets',
+      'service-fragments',
+      'service-release-health',
+    ])
+  })
+
+  it('a module shows only the container summary', () => {
+    expect(visibleIds(block('module'))).toEqual(['container-summary'])
+  })
+
+  it('a task shows the task body in the pre-slice-4 order', () => {
+    expect(visibleIds(block('task'))).toEqual([
+      'task-context-docs',
+      'task-context-issues',
+      'recurring-schedule',
+      'task-execution',
+      'task-estimate',
+      'task-dependencies',
+      'task-run-settings',
+      'task-agent-config',
+      'task-structure',
+    ])
+  })
+
+  it('epic and initiative each show their single inspector', () => {
+    expect(visibleIds(block('epic'))).toEqual(['epic-children'])
+    expect(visibleIds(block('initiative'))).toEqual(['initiative-inspector'])
+  })
+
+  it('no subject selected resolves to no panels', () => {
+    expect(visibleIds(null)).toEqual([])
+  })
+
+  // Locks the contract the client plugin's boot fail-fast depends on: it calls
+  // `resolvePanels(mergedEntries, null)` once at startup so a duplicate panel id
+  // (e.g. a consumer module colliding with a first-party id) throws at BOOT rather
+  // than the first time a block is selected. That only works because `resolvePanels`
+  // runs its duplicate-id check BEFORE the null-subject short-circuit — pin it here
+  // so an upstream reorder (dedup after the null guard) can't silently disarm the
+  // boot check.
+  it('throws on a duplicate panel id even with a null subject (boot fail-fast)', () => {
+    const dup: PanelEntry<Block>[] = [
+      { id: 'container-summary', order: 1, when: () => true, component: () => null },
+      { id: 'container-summary', order: 2, when: () => true, component: () => null },
+    ]
+    expect(() => resolvePanels(dup, null)).toThrow(/duplicate panel id "container-summary"/)
+  })
+})

package/app/modular/panels/inspector.logic.ts

@@ -0,0 +1,113 @@
+import { definePanelGroup } from '@modular-vue/core'
+import type { Block } from '~/types/domain'
+
+/**
+ * Pure definition of the block-inspector panel group (slice 4 of the modular-vue
+ * adoption — docs/initiatives/modular-vue-adoption.md).
+ *
+ * The inspector used to be a 631-line `v-if` fan in `InspectorPanel.vue` that
+ * switched its body on the selected block's `level` (frame/module/task/epic/
+ * initiative) and, inside the frame branch, on `type` (frontend/service). Slice 4
+ * turns that fan into the upstream **subject-keyed panels** primitive: each body
+ * sub-panel is a `PanelEntry<Block>` contributed to the `inspectorPanels` slot,
+ * and `<PanelsOutlet>` renders every entry whose `when(block)` passes, ordered by
+ * `order`, with the selected block injected as the subject. A consumer deployment
+ * contributes its OWN inspector panels (e.g. for a custom block type) to the SAME
+ * slot via `registerAppModule`, with zero host edits.
+ *
+ * This file is deliberately free of `.vue`/`defineModule` imports so the gating +
+ * ordering is unit-tested directly (`inspector.logic.spec.ts`) via the pure
+ * `resolvePanels`; the component wiring (which imports the sub-panel SFCs) lives
+ * in `inspector.ts`, registered from the client plugin — the same split as the
+ * result-views and journey modules. (`definePanelGroup` is a pure `{ slotKey }`
+ * token, so the group handle belongs here where every call site shares it.)
+ */
+
+/** The slot key the inspector panel entries are contributed under (and that the
+ *  group handle names). Also the `AppSlots` key — keep the two in step. */
+export const INSPECTOR_PANELS_SLOT = 'inspectorPanels' as const
+
+/** The typed panel-group handle — `usePanels(inspectorPanels, block)` /
+ *  `<PanelsOutlet :group="inspectorPanels" :subject="block">` resolve against it. */
+export const inspectorPanels = definePanelGroup<Block>(INSPECTOR_PANELS_SLOT)
+
+/** Every built-in inspector panel id. A const union so the component map in
+ *  `inspector.ts` is exhaustive (a spec with no component is a compile error, not
+ *  a silently-dropped panel). */
+export const INSPECTOR_PANEL_IDS = [
+  // task body (rendered in this order under the identity block)
+  'task-context-docs',
+  'task-context-issues',
+  'recurring-schedule',
+  'task-execution',
+  'task-estimate',
+  'task-dependencies',
+  'task-run-settings',
+  'task-agent-config',
+  'task-structure',
+  // service / module body
+  'container-summary',
+  'frontend-config',
+  'service-connections',
+  'service-test-config',
+  'service-test-secrets',
+  'service-fragments',
+  'service-release-health',
+  // epic / initiative body
+  'epic-children',
+  'initiative-inspector',
+] as const
+
+export type InspectorPanelId = (typeof INSPECTOR_PANEL_IDS)[number]
+
+/** The gating + ordering for one built-in inspector panel — the `PanelEntry`
+ *  minus its component (attached in `inspector.ts`). `when` is the predicate
+ *  lifted verbatim from the panel's old `v-if`; `order` preserves the pre-slice-4
+ *  render order within a level (levels never overlap, so cross-level order is
+ *  irrelevant and the values are just grouped by level). */
+export interface InspectorPanelSpec {
+  id: InspectorPanelId
+  order: number
+  when: (block: Block) => boolean
+}
+
+const isTask = (b: Block) => b.level === 'task'
+const isFrame = (b: Block) => b.level === 'frame'
+/** frame OR module — the "container" panels. */
+const isContainer = (b: Block) => b.level === 'frame' || b.level === 'module'
+
+/**
+ * The built-in panel specs. The `when` predicates and orders reproduce
+ * `InspectorPanel.vue`'s pre-slice-4 behaviour exactly (pinned by
+ * `inspector.logic.spec.ts`):
+ *  - task body: context docs/issues, then schedule → execution → estimate →
+ *    dependencies → run-settings → agent-config → structure.
+ *  - service/module body: container summary (frame|module), then the frame-only
+ *    panels, with frontend-config / service-connections further gated on `type`.
+ *  - epic / initiative bodies: their single inspector.
+ *
+ * The frame-only "view requirements" button and the cross-cutting run banners
+ * (`AgentFailureCard` / `AgentStopButton`) stay in the host shell — they are not
+ * level-keyed body panels, so converting them would add ceremony without
+ * extensibility value.
+ */
+export const INSPECTOR_PANEL_SPECS: readonly InspectorPanelSpec[] = [
+  { id: 'task-context-docs', order: 10, when: isTask },
+  { id: 'task-context-issues', order: 20, when: isTask },
+  { id: 'recurring-schedule', order: 30, when: isTask },
+  { id: 'task-execution', order: 40, when: isTask },
+  { id: 'task-estimate', order: 50, when: isTask },
+  { id: 'task-dependencies', order: 60, when: isTask },
+  { id: 'task-run-settings', order: 70, when: isTask },
+  { id: 'task-agent-config', order: 80, when: isTask },
+  { id: 'task-structure', order: 90, when: isTask },
+  { id: 'container-summary', order: 110, when: isContainer },
+  { id: 'frontend-config', order: 120, when: (b) => isFrame(b) && b.type === 'frontend' },
+  { id: 'service-connections', order: 130, when: (b) => isFrame(b) && b.type === 'service' },
+  { id: 'service-test-config', order: 140, when: isFrame },
+  { id: 'service-test-secrets', order: 150, when: isFrame },
+  { id: 'service-fragments', order: 160, when: isFrame },
+  { id: 'service-release-health', order: 170, when: isFrame },
+  { id: 'epic-children', order: 200, when: (b) => b.level === 'epic' },
+  { id: 'initiative-inspector', order: 210, when: (b) => b.level === 'initiative' },
+]

package/app/modular/panels/inspector.ts

@@ -0,0 +1,101 @@
+import { type Component, defineComponent, h } from 'vue'
+import { defineModule, usePanelSubject } from '@modular-vue/core'
+import type { PanelEntry } from '@modular-vue/core'
+import type { Block } from '~/types/domain'
+
+/** The engine's opaque component type on a `PanelEntry` (the neutral `UiComponent`,
+ *  which isn't exported by name). A Vue component is a valid one; the outlet renders
+ *  it as a Vue component. We reference it structurally so no cast reaches for `any`. */
+type PanelComponent = PanelEntry<Block>['component']
+import {
+  INSPECTOR_PANELS_SLOT,
+  INSPECTOR_PANEL_SPECS,
+  type InspectorPanelId,
+} from '~/modular/panels/inspector.logic'
+import TaskContextDocs from '~/components/documents/TaskContextDocs.vue'
+import TaskContextIssues from '~/components/tasks/TaskContextIssues.vue'
+import RecurringScheduleSettings from '~/components/panels/inspector/RecurringScheduleSettings.vue'
+import TaskExecution from '~/components/panels/inspector/TaskExecution.vue'
+import TaskEstimateBadge from '~/components/panels/inspector/TaskEstimateBadge.vue'
+import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue'
+import TaskRunSettings from '~/components/panels/inspector/TaskRunSettings.vue'
+import TaskAgentConfig from '~/components/panels/inspector/TaskAgentConfig.vue'
+import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
+import ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
+import FrontendConfig from '~/components/panels/inspector/FrontendConfig.vue'
+import ServiceConnections from '~/components/panels/inspector/ServiceConnections.vue'
+import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
+import ServiceTestSecrets from '~/components/panels/inspector/ServiceTestSecrets.vue'
+import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
+import ServiceReleaseHealthConfig from '~/components/panels/inspector/ServiceReleaseHealthConfig.vue'
+import EpicChildren from '~/components/panels/inspector/EpicChildren.vue'
+import InitiativeInspector from '~/components/panels/inspector/InitiativeInspector.vue'
+
+/**
+ * Component wiring for the block-inspector panel group (slice 4). The gating +
+ * ordering live in `inspector.logic.ts` (pure, unit-tested); this file attaches
+ * the sub-panel SFCs and registers the module. It imports `.vue`, so — like
+ * `result-views.ts` and the journey step module — it is registered from the
+ * client plugin via `extraModules`, keeping the unit-tested `registry.ts` import
+ * graph SFC-free.
+ */
+
+/**
+ * Bridge a `block`-prop sub-panel onto the subject-keyed panels primitive.
+ * `<PanelsOutlet>` injects the selected block as the panel *subject* (a `subject`
+ * prop + a `provide`), but the existing inspector sub-panels take a `block` prop
+ * (and several — `TaskExecution`, `ServiceTestConfig` — are reused OUTSIDE the
+ * inspector, so their prop can't be renamed). So each entry's component is this
+ * thin wrapper: it reads the injected subject via `usePanelSubject` and forwards
+ * it as `:block`. The host sets `<PanelsOutlet :subject-key="b => b.id">`, so the
+ * wrapper remounts on block switch — matching the pre-slice-4 per-panel
+ * `:key="…-${block.id}"`.
+ */
+function blockPanel(component: Component, id: InspectorPanelId): PanelComponent {
+  return defineComponent({
+    name: `InspectorPanel__${id}`,
+    setup() {
+      const block = usePanelSubject<Block>()
+      return () => h(component, { block: block.value })
+    },
+  }) as unknown as PanelComponent
+}
+
+/** Exhaustive id → sub-panel map. Typed `Record<InspectorPanelId, …>` so adding a
+ *  spec without a component (or vice-versa) fails the typecheck. */
+const COMPONENTS: Record<InspectorPanelId, Component> = {
+  'task-context-docs': TaskContextDocs,
+  'task-context-issues': TaskContextIssues,
+  'recurring-schedule': RecurringScheduleSettings,
+  'task-execution': TaskExecution,
+  'task-estimate': TaskEstimateBadge,
+  'task-dependencies': TaskDependencies,
+  'task-run-settings': TaskRunSettings,
+  'task-agent-config': TaskAgentConfig,
+  'task-structure': TaskStructure,
+  'container-summary': ContainerSummary,
+  'frontend-config': FrontendConfig,
+  'service-connections': ServiceConnections,
+  'service-test-config': ServiceTestConfig,
+  'service-test-secrets': ServiceTestSecrets,
+  'service-fragments': ServiceFragments,
+  'service-release-health': ServiceReleaseHealthConfig,
+  'epic-children': EpicChildren,
+  'initiative-inspector': InitiativeInspector,
+}
+
+/** The built-in `PanelEntry`s: each spec's gating/order + its wrapped component. */
+export const INSPECTOR_PANEL_ENTRIES: PanelEntry<Block>[] = INSPECTOR_PANEL_SPECS.map((spec) => ({
+  id: spec.id,
+  order: spec.order,
+  when: spec.when,
+  component: blockPanel(COMPONENTS[spec.id], spec.id),
+}))
+
+/** The first-party module: contributes the built-in panels to the `inspectorPanels`
+ *  slot. Registered by the client plugin (`extraModules`). */
+export const inspectorPanelsModule = defineModule({
+  id: 'cat-factory:inspector-panels',
+  version: '1.0.0',
+  slots: { [INSPECTOR_PANELS_SLOT]: INSPECTOR_PANEL_ENTRIES },
+})

package/app/modular/registry.ts

@@ -101,7 +101,7 @@ export function createAppRegistry(
   // are registered from the client plugin via `extraModules` + `registerJourney`.
   const registry = createRegistry<AppDeps, AppSlots>({
     services: { gates: deps.gates },
-    slots: { nav: [], resultViews: [], agentKinds: [] },
+    slots: { nav: [], resultViews: [], agentKinds: [], inspectorPanels: [] },
   }).use(journeysPlugin())
   for (const mod of [...FIRST_PARTY_MODULES, ...extraModules, ...consumerModules]) {
     registry.register(mod)

package/app/modular/slots.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'vue'
-import type { ComponentEntry } from '@modular-vue/core'
-import type { CustomAgentKind } from '~/types/domain'
+import type { ComponentEntry, PanelEntry } from '@modular-vue/core'
+import type { Block, CustomAgentKind } from '~/types/domain'
 import type { NavContribution } from './nav-contributions'
 
 /**
@@ -17,6 +17,12 @@ import type { NavContribution } from './nav-contributions'
  *    contributes (the palette/catalog data half). BACKEND-registered kinds
  *    arrive separately as a {@link RemoteModuleManifest} read in the agents
  *    store — see `stores/agents.ts`.
+ *  - `inspectorPanels` (slice 4) — the subject-keyed detail panels of the block
+ *    inspector ({@link PanelEntry} over a `Block`), rendered all-matching + ordered
+ *    by `<PanelsOutlet>` and gated per-block by each entry's `when(block)`
+ *    predicate. Replaces `InspectorPanel.vue`'s level/type `v-if` fan; a consumer
+ *    contributes its own panels to the SAME slot via `registerAppModule`. This is
+ *    the slot key `definePanelGroup<Block>('inspectorPanels')` names.
  *
  * The index signature is mutable (`unknown[]`) to satisfy the runtime's
  * `SlotMap` constraint while `unknown[]` still meets `useReactiveSlots`'
@@ -26,6 +32,7 @@ export interface AppSlots {
   nav: NavContribution[]
   resultViews: ResultViewContribution[]
   agentKinds: CustomAgentKind[]
+  inspectorPanels: PanelEntry<Block>[]
   [key: string]: unknown[]
 }
 

package/app/plugins/modular.client.ts

@@ -1,20 +1,22 @@
 import { installModularApp } from '@modular-vue/nuxt/runtime'
 import type { ApplicationManifest } from '@modular-vue/runtime'
 import type { NavigationItem } from '@modular-frontend/core'
-import { resolveComponentRegistry } from '@modular-vue/core'
+import { resolveComponentRegistry, resolvePanels } from '@modular-vue/core'
+import type { PanelEntry } from '@modular-vue/core'
 import { provideJourneyRuntime } from '@modular-vue/journeys'
 import type { JourneyRuntime } from '@modular-vue/journeys'
 import { createAppRegistry } from '~/modular/registry'
 import { navSlotFilter } from '~/modular/nav-contributions'
 import { createNavGates } from '~/modular/nav-gates'
 import { resultViewsModule } from '~/modular/result-views'
+import { inspectorPanelsModule } from '~/modular/panels/inspector'
 import {
   environmentSetupJourney,
   environmentSetupModule,
   environmentSetupPersistence,
 } from '~/modular/journeys/environmentSetup'
 import type { AppSlots, ResultViewContribution } from '~/modular/slots'
-import type { CustomAgentKind } from '~/types/domain'
+import type { Block, CustomAgentKind } from '~/types/domain'
 
 /**
  * Wire the modular-vue registry into the Nuxt app (slice 0 of the modular-vue
@@ -58,6 +60,7 @@ export default defineNuxtPlugin({
     // resolves (inside `installModularApp`).
     const registry = createAppRegistry({ gates: createNavGates() }, [
       resultViewsModule,
+      inspectorPanelsModule,
       environmentSetupModule,
     ])
     registry.registerJourney(environmentSetupJourney, {
@@ -88,6 +91,13 @@ export default defineNuxtPlugin({
     // clear stack. The slot is static after this resolve, so `StepResultViewHost`'s own
     // reactive re-resolve is a cheap memoized read that this has already validated.
     resolveComponentRegistry((slots.resultViews ?? []) as ResultViewContribution[])
+    // Same fail-fast for the inspector panel group (slice 4): resolve the merged
+    // `inspectorPanels` slot once with a null subject so a duplicate panel id across
+    // the first-party + consumer modules throws at BOOT (`resolvePanels` dedupes/
+    // throws before the null-subject guard) rather than the first time a block is
+    // selected. `<PanelsOutlet>` re-resolves reactively per subject; this only
+    // validates the wiring.
+    resolvePanels((slots.inspectorPanels ?? []) as PanelEntry<Block>[], null)
     // Consumer agent kinds contributed as CODE to the static `agentKinds` slot
     // (module slots resolve once, so the static base is the full set).
     useAgentsStore().registerConsumerKinds((slots.agentKinds ?? []) as CustomAgentKind[])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.135.2",
+  "version": "0.136.0",
   "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",
@@ -18,12 +18,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@modular-frontend/core": "^0.3.0",
-    "@modular-vue/core": "^1.2.0",
-    "@modular-vue/journeys": "^1.2.0",
-    "@modular-vue/nuxt": "^0.3.0",
-    "@modular-vue/runtime": "^1.3.0",
-    "@modular-vue/vue": "^1.2.0",
+    "@modular-frontend/core": "^0.4.0",
+    "@modular-vue/core": "^1.3.0",
+    "@modular-vue/journeys": "^1.3.0",
+    "@modular-vue/nuxt": "^0.4.0",
+    "@modular-vue/runtime": "^1.4.1",
+    "@modular-vue/vue": "^1.3.0",
     "@nuxt/ui": "^4.10.0",
     "@nuxtjs/i18n": "^10.4.1",
     "@pinia/nuxt": "^1.0.1",