@cat-factory/app 0.11.0 → 0.13.0

package/app/app.config.ts

@@ -4,5 +4,23 @@ export default defineAppConfig({
       primary: 'indigo',
       neutral: 'slate',
     },
+    // Give every overlay the same layered dark palette the agent-run-details
+    // reader uses: a deep slate-950 surface so the slate-900 panels/cards inside
+    // pop, with slate-800 chrome. Applies to all UModal/USlideover instances so
+    // overlays stay consistent without per-instance `:ui` overrides.
+    modal: {
+      slots: {
+        content: 'bg-slate-950 ring-slate-800 divide-slate-800',
+        header: 'border-b border-slate-800',
+        title: 'text-white',
+      },
+    },
+    slideover: {
+      slots: {
+        content: 'bg-slate-950 ring-slate-800 divide-slate-800',
+        header: 'border-b border-slate-800',
+        title: 'text-white',
+      },
+    },
   },
 })

package/app/components/board/AddTaskModal.vue

@@ -187,7 +187,7 @@ const pendingContext = ref<PendingContext[]>([])
 // always shown (ungated): when the relevant integration isn't connected the Attach
 // button is disabled with a tooltip rather than the section being hidden.
 const docsConnected = computed(() => documents.available && documents.anyConnected)
-const issuesConnected = computed(() => tasks.available && tasks.anyConnected)
+const issuesConnected = computed(() => tasks.available && tasks.anyOffered)
 const pendingDocs = computed(() => pendingContext.value.filter((c) => c.kind === 'document'))
 const pendingIssues = computed(() => pendingContext.value.filter((c) => c.kind === 'task'))
 

package/app/components/layout/CommandBar.vue

@@ -111,14 +111,14 @@ const commands = computed<Command[]>(() => {
     for (const src of tasks.sources) {
       list.push({
         id: `task-connect-${src.source}`,
-        label: tasks.isConnected(src.source) ? `Manage ${src.label}` : `Connect ${src.label}`,
+        label: src.available ? `Manage ${src.label}` : `Connect ${src.label}`,
         group: 'Integrations',
         icon: src.icon,
         keywords: 'task source tracker issues',
         run: () => ui.openTaskConnect(src.source),
       })
     }
-    if (tasks.anyConnected) {
+    if (tasks.anyOffered) {
       list.push({
         id: 'task-import',
         label: 'Import issues',

package/app/components/layout/IntegrationsHub.vue

@@ -114,11 +114,13 @@ const groups = computed<IntegrationGroup[]>(() => {
       icon: src.icon,
       label: src.label,
       description: `Link ${src.label} to import and reference tracker issues.`,
-      status: tasks.isConnected(src.source) ? 'Connected' : undefined,
-      connected: tasks.isConnected(src.source),
+      // Available + enabled ⇒ offered (green); available + off ⇒ "Disabled";
+      // not available ⇒ no badge (Jira needs connecting; GitHub needs its App).
+      status: src.available ? (src.enabled ? undefined : 'Disabled') : undefined,
+      connected: src.available && src.enabled,
       onClick: () => go(() => ui.openTaskConnect(src.source)),
     }))
-    if (tasks.anyConnected) {
+    if (tasks.anyOffered) {
       trackers.push({
         key: 'task:import',
         icon: 'i-lucide-file-down',
@@ -207,7 +209,7 @@ const groups = computed<IntegrationGroup[]>(() => {
               v-for="item in group.items"
               :key="item.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/40 px-3 py-2.5 text-left transition hover:border-slate-500 hover:bg-slate-800"
+              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" />

package/app/components/panels/InspectorPanel.vue

@@ -386,7 +386,7 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-ticket"
           @click="ui.openTaskImport()"
         >
-          {{ tasks.anyConnected ? 'Import Jira issue' : 'Connect Jira' }}
+          {{ tasks.anyOffered ? 'Import issue' : 'Connect a tracker' }}
         </UButton>
         <UButton
           v-if="isContainer && documents.available && documents.anyConnected"
@@ -406,6 +406,20 @@ const showOriginalDescription = ref(false)
       <!-- task: context issues (tracker) -->
       <TaskContextIssues v-if="isTask" :block="block" />
 
+      <!-- service (frame): navigate the prescriptive spec tree (+ Gherkin scenarios when
+           the spec is on the repo's default branch) -->
+      <UButton
+        v-if="isFrame"
+        block
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-scroll-text"
+        @click="ui.openServiceSpec(block.id)"
+      >
+        View Requirements
+      </UButton>
+
       <!-- service / module: tasks summary -->
       <ContainerSummary v-if="isContainer" :block="block" />
       <!-- service (frame): test infra + provisioning configuration -->

package/app/components/panels/StepResultViewHost.vue

@@ -17,6 +17,7 @@ import TestReportWindow from '~/components/testing/TestReportWindow.vue'
 import GateResultView from '~/components/gates/GateResultView.vue'
 import ConsensusSessionWindow from '~/components/consensus/ConsensusSessionWindow.vue'
 import GenericStructuredResultView from '~/components/panels/GenericStructuredResultView.vue'
+import ServiceSpecWindow from '~/components/spec/ServiceSpecWindow.vue'
 
 const ui = useUiStore()
 
@@ -31,6 +32,9 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   // Default dedicated view for a registered CUSTOM kind's structured (`custom`) output —
   // a read-only JSON viewer, so a proprietary agent ships a result view with no bespoke code.
   'generic-structured': GenericStructuredResultView,
+  // The service's prescriptive spec tree (+ Gherkin), opened from the inspector's "View
+  // Requirements" button. Not a pipeline-step view — opened directly via `ui.openServiceSpec`.
+  'service-spec': ServiceSpecWindow,
 }
 
 const active = computed<Component | null>(() => {

package/app/components/spec/ServiceSpecWindow.vue

@@ -0,0 +1,348 @@
+<script setup lang="ts">
+// Service-spec window — the dedicated surface for a service's prescriptive specification,
+// opened from the inspector's "View Requirements" button (via the universal result-view
+// host). It reads the sharded `spec/` artifact off the service repo's default branch and
+// lets the human navigate the structured spec tree (modules → feature groups → requirements
+// + acceptance criteria + domain rules). When the spec is present on main, a toggle switches
+// to the rendered Gherkin scenarios (the seeded `.feature` files).
+import type {
+  RequirementGroup,
+  RequirementItem,
+  RequirementPriority,
+  SpecModule,
+} from '~/types/spec'
+
+const board = useBoardStore()
+const serviceSpec = useServiceSpecStore()
+
+type ViewMode = 'structured' | 'gherkin'
+const mode = ref<ViewMode>('structured')
+// Selected feature group, keyed by its module + group index so a name collision can't
+// cross-select. Null = show the service overview.
+const selected = ref<{ m: number; g: number } | null>(null)
+
+const { open, blockId, close } = useResultView('service-spec', {
+  onOpen: (id) => {
+    mode.value = 'structured'
+    selected.value = null
+    void serviceSpec.load(id)
+  },
+})
+
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const view = computed(() => (blockId.value ? serviceSpec.viewFor(blockId.value) : undefined))
+const loading = computed(() => (blockId.value ? serviceSpec.isLoading(blockId.value) : false))
+const errored = computed(() => (blockId.value ? serviceSpec.isErrored(blockId.value) : false))
+const spec = computed(() => view.value?.spec ?? null)
+const modules = computed<SpecModule[]>(() => spec.value?.modules ?? [])
+const present = computed(() => !!view.value?.present && !!spec.value)
+const hasGherkin = computed(() => (view.value?.features.length ?? 0) > 0)
+
+// Auto-select the first non-empty group once a present spec is shown, so the main pane isn't
+// empty. Depends on `blockId` as well as `present`: switching directly to ANOTHER already-cached
+// present block (via the inspector, without closing) changes `blockId` while `present` stays
+// true, so a watch on `present` alone would never re-fire and the second block would open on
+// the empty Overview pane. `immediate` covers the first, uncached open (present flips false→true
+// after the load). `onOpen` resets `selected` to null first (it runs before this watch, since
+// `useResultView` registers its blockId watch earlier), so a stale selection never leaks across.
+watch(
+  [present, blockId],
+  ([is]) => {
+    if (is && !selected.value) {
+      const m = modules.value.findIndex((mod) => (mod.groups?.length ?? 0) > 0)
+      if (m >= 0) selected.value = { m, g: 0 }
+    }
+  },
+  { immediate: true },
+)
+
+const selectedModule = computed<SpecModule | null>(() =>
+  selected.value ? (modules.value[selected.value.m] ?? null) : null,
+)
+const selectedGroup = computed<RequirementGroup | null>(() => {
+  if (!selected.value) return null
+  return selectedModule.value?.groups?.[selected.value.g] ?? null
+})
+
+// The Gherkin `.feature` content matching the selected group. Features carry display names
+// (not slugs), and the harness permits same-named groups in one module (only the on-disk
+// SLUGS are collision-suffixed), so a plain name match can cross-select. When several
+// features share the (module, group) name pair, disambiguate by the group's ordinal among
+// its same-named siblings — both lists derive from the same name-sorted walk, so the ordinals
+// line up.
+const selectedFeature = computed(() => {
+  const mod = selectedModule.value
+  const grp = selectedGroup.value
+  if (!mod || !grp) return null
+  const matches =
+    view.value?.features.filter((f) => f.module === mod.name && f.group === grp.name) ?? []
+  if (matches.length <= 1) return matches[0] ?? null
+  const sameNamed = (mod.groups ?? []).filter((g) => g.name === grp.name)
+  const ordinal = sameNamed.indexOf(grp)
+  return matches[ordinal] ?? matches[0] ?? null
+})
+
+function selectGroup(m: number, g: number) {
+  selected.value = { m, g }
+}
+
+const PRIORITY_META: Record<RequirementPriority, { label: string; chip: string }> = {
+  must: { label: 'Must', chip: 'error' },
+  should: { label: 'Should', chip: 'warning' },
+  could: { label: 'Could', chip: 'neutral' },
+}
+
+function reqCount(group: RequirementGroup): number {
+  return group.requirements?.length ?? 0
+}
+function priorityMeta(item: RequirementItem) {
+  return PRIORITY_META[item.priority] ?? PRIORITY_META.could
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+      >
+        <!-- header -->
+        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-500/15"
+          >
+            <UIcon name="i-lucide-scroll-text" class="h-5 w-5 text-indigo-300" />
+          </div>
+          <div class="min-w-0">
+            <h1 class="truncate text-base font-semibold text-white">Requirements</h1>
+            <p v-if="block" class="truncate text-xs text-slate-500">
+              {{ spec?.service || block.title }}
+            </p>
+          </div>
+          <div class="ml-auto flex items-center gap-1.5">
+            <!-- view toggle: Gherkin only when the spec (and its feature files) are on main -->
+            <div v-if="present" class="flex items-center rounded-lg border border-slate-700 p-0.5">
+              <UButton
+                :color="mode === 'structured' ? 'primary' : 'neutral'"
+                :variant="mode === 'structured' ? 'soft' : 'ghost'"
+                size="xs"
+                icon="i-lucide-list-tree"
+                @click="mode = 'structured'"
+              >
+                Structured
+              </UButton>
+              <UButton
+                :color="mode === 'gherkin' ? 'primary' : 'neutral'"
+                :variant="mode === 'gherkin' ? 'soft' : 'ghost'"
+                size="xs"
+                icon="i-lucide-square-check-big"
+                :disabled="!hasGherkin"
+                :title="hasGherkin ? 'Gherkin scenarios' : 'No scenarios on main yet'"
+                @click="mode = 'gherkin'"
+              >
+                Gherkin
+              </UButton>
+            </div>
+            <UButton icon="i-lucide-x" color="neutral" variant="ghost" size="sm" @click="close" />
+          </div>
+        </header>
+
+        <!-- loading -->
+        <div
+          v-if="loading && !view"
+          class="flex flex-1 items-center justify-center gap-2 text-sm text-slate-400"
+        >
+          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+          Loading the specification…
+        </div>
+
+        <!-- error -->
+        <div
+          v-else-if="errored"
+          class="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center text-sm text-slate-400"
+        >
+          <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-amber-400" />
+          Could not load the specification. Try reopening this window.
+        </div>
+
+        <!-- empty: no spec on the repo's default branch yet -->
+        <div
+          v-else-if="!present"
+          class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center"
+        >
+          <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-slate-600" />
+          <div>
+            <p class="text-sm font-medium text-slate-300">No specification yet</p>
+            <p class="mx-auto mt-1 max-w-md text-xs text-slate-500">
+              This service has no spec on its default branch. A specification is generated as tasks
+              run their pipelines; once it lands on main it will appear here, with its Gherkin
+              scenarios.
+            </p>
+          </div>
+        </div>
+
+        <!-- spec body: navigable tree + detail -->
+        <div v-else class="flex min-h-0 flex-1">
+          <!-- nav: modules → feature groups -->
+          <nav class="w-64 shrink-0 overflow-y-auto border-r border-slate-800 px-3 py-4">
+            <UButton
+              block
+              class="mb-2 justify-start"
+              :color="selected === null ? 'primary' : 'neutral'"
+              :variant="selected === null ? 'soft' : 'ghost'"
+              size="xs"
+              icon="i-lucide-info"
+              @click="selected = null"
+            >
+              Overview
+            </UButton>
+            <div v-for="(mod, mi) in modules" :key="mi" class="mb-3">
+              <div
+                class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+              >
+                {{ mod.name }}
+              </div>
+              <ul class="space-y-0.5">
+                <li v-for="(group, gi) in mod.groups ?? []" :key="gi">
+                  <button
+                    type="button"
+                    class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition"
+                    :class="
+                      selected?.m === mi && selected?.g === gi
+                        ? 'bg-indigo-500/15 text-indigo-200'
+                        : 'text-slate-300 hover:bg-slate-800'
+                    "
+                    @click="selectGroup(mi, gi)"
+                  >
+                    <span class="truncate">{{ group.name }}</span>
+                    <span class="shrink-0 text-[10px] text-slate-500">{{ reqCount(group) }}</span>
+                  </button>
+                </li>
+                <li
+                  v-if="(mod.groups?.length ?? 0) === 0"
+                  class="px-2 py-1 text-[11px] italic text-slate-600"
+                >
+                  No feature groups
+                </li>
+              </ul>
+            </div>
+          </nav>
+
+          <!-- detail -->
+          <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
+            <!-- service overview -->
+            <template v-if="selected === null">
+              <h2 class="text-lg font-semibold text-white">{{ spec?.service }}</h2>
+              <p v-if="spec?.summary" class="mt-2 whitespace-pre-line text-sm text-slate-300">
+                {{ spec.summary }}
+              </p>
+              <p v-else class="mt-2 text-sm text-slate-500">No service summary.</p>
+              <p class="mt-4 text-xs text-slate-500">
+                {{ modules.length }} module(s). Select a feature group on the left to view its
+                requirements{{ hasGherkin ? ' or switch to the Gherkin scenarios' : '' }}.
+              </p>
+            </template>
+
+            <!-- selected feature group -->
+            <template v-else-if="selectedGroup">
+              <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                {{ selectedModule?.name }}
+              </div>
+              <h2 class="text-lg font-semibold text-white">{{ selectedGroup.name }}</h2>
+              <p v-if="selectedGroup.summary" class="mt-1 text-sm text-slate-400">
+                {{ selectedGroup.summary }}
+              </p>
+
+              <!-- GHERKIN view: the rendered .feature file for this group -->
+              <template v-if="mode === 'gherkin'">
+                <pre
+                  v-if="selectedFeature"
+                  class="mt-4 overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-4 text-[12.5px] leading-relaxed text-slate-200"
+                ><code>{{ selectedFeature.content }}</code></pre>
+                <div
+                  v-else
+                  class="mt-4 rounded-lg border border-dashed border-slate-700 p-6 text-center text-sm text-slate-500"
+                >
+                  No Gherkin scenarios for this group.
+                </div>
+              </template>
+
+              <!-- STRUCTURED view: requirements + acceptance + domain rules -->
+              <template v-else>
+                <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-slate-500">
+                  No requirements in this group.
+                </div>
+                <ul class="mt-4 space-y-4">
+                  <li
+                    v-for="req in selectedGroup.requirements ?? []"
+                    :key="req.id"
+                    class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+                  >
+                    <div class="flex items-start justify-between gap-3">
+                      <h3 class="text-sm font-semibold text-slate-100">{{ req.title }}</h3>
+                      <div class="flex shrink-0 items-center gap-1.5">
+                        <UBadge :color="priorityMeta(req).chip as any" variant="subtle" size="sm">
+                          {{ priorityMeta(req).label }}
+                        </UBadge>
+                        <UBadge color="neutral" variant="subtle" size="sm">{{ req.kind }}</UBadge>
+                      </div>
+                    </div>
+                    <p
+                      class="mt-1.5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300"
+                    >
+                      {{ req.statement }}
+                    </p>
+                    <!-- acceptance criteria (Given/When/Then) -->
+                    <div v-if="(req.acceptance?.length ?? 0) > 0" class="mt-3 space-y-1.5">
+                      <div
+                        v-for="ac in req.acceptance ?? []"
+                        :key="ac.id"
+                        class="rounded-md border border-slate-800 bg-slate-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
+                      >
+                        <p class="text-slate-300">
+                          <span class="font-semibold text-emerald-400">Given</span> {{ ac.given }}
+                        </p>
+                        <p class="text-slate-300">
+                          <span class="font-semibold text-sky-400">When</span> {{ ac.when }}
+                        </p>
+                        <p class="text-slate-300">
+                          <span class="font-semibold text-violet-400">Then</span> {{ ac.outcome }}
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+
+                <!-- domain rules / invariants scoped to this group -->
+                <div v-if="(selectedGroup.rules?.length ?? 0) > 0" class="mt-6">
+                  <div
+                    class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+                  >
+                    <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
+                    Domain rules
+                  </div>
+                  <ul class="space-y-1.5">
+                    <li
+                      v-for="rule in selectedGroup.rules ?? []"
+                      :key="rule.id"
+                      class="rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-[13px] text-slate-300"
+                    >
+                      {{ rule.rule }}
+                      <span v-if="rule.rationale" class="text-slate-500">
+                        — {{ rule.rationale }}</span
+                      >
+                    </li>
+                  </ul>
+                </div>
+              </template>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/tasks/TaskImportModal.vue

@@ -24,7 +24,7 @@ const ref_ = ref('')
 const importing = ref(false)
 
 const sourceItems = computed(() =>
-  tasks.connectedSources.map((s) => ({ label: s.label, value: s.source })),
+  tasks.offeredSources.map((s) => ({ label: s.label, value: s.source })),
 )
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 
@@ -52,7 +52,7 @@ const creatingId = ref<string | null>(null)
 watch(open, (isOpen) => {
   if (isOpen) {
     ref_.value = ''
-    source.value = ui.taskImport?.source ?? tasks.connectedSources[0]?.source ?? undefined
+    source.value = ui.taskImport?.source ?? tasks.offeredSources[0]?.source ?? undefined
     containerId.value = containerItems.value[0]?.value
     creatingId.value = null
     tasks.loadTasks().catch(() => {})
@@ -102,10 +102,10 @@ async function doImport() {
 <template>
   <UModal v-model:open="open" title="Import from a task source">
     <template #body>
-      <!-- Empty state: no connections -->
-      <div v-if="!tasks.anyConnected" class="space-y-3 text-center">
+      <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
+      <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
         <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
-        <p class="text-sm text-slate-400">Connect a task source first.</p>
+        <p class="text-sm text-slate-400">Connect or enable a task source first.</p>
         <div class="flex justify-center gap-2">
           <UButton
             v-for="s in tasks.sources"
@@ -115,7 +115,7 @@ async function doImport() {
             :icon="s.icon"
             @click="ui.openTaskConnect(s.source)"
           >
-            Connect {{ s.label }}
+            {{ s.available ? `Enable ${s.label}` : `Connect ${s.label}` }}
           </UButton>
         </div>
       </div>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
-// Connect (or disconnect) the workspace to a task source. The form is rendered
-// generically from the source's descriptor (credential fields), so the same
-// modal serves Jira and any future tracker. Secret credentials are write-only —
-// the backend never returns them, so on reload we show "Connected" with empty
-// fields.
+// Connect/manage a task source for the workspace. The form is rendered generically
+// from the source's descriptor (credential fields), so the same modal serves Jira
+// and any future credentialed tracker. A credentialless source (GitHub Issues)
+// has no form — it rides the workspace's installed GitHub App — so the modal just
+// offers the on/off toggle. Secret credentials are write-only: the backend never
+// returns them, so on reload we show "Connected" with empty fields.
+//
+// The on/off toggle is the per-workspace switch (persisted in task_source_settings):
+// a workspace can offer GitHub repos without offering their issues, and can park a
+// connected Jira without disconnecting it. The toggle only applies once a source is
+// available (Jira connected / the GitHub App installed) — there is nothing to offer
+// before that.
 const ui = useUiStore()
 const tasks = useTasksStore()
 const toast = useToast()
@@ -12,6 +19,10 @@ const source = computed(() => ui.taskConnect?.source ?? null)
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 const connection = computed(() => (source.value ? tasks.connectionFor(source.value) : undefined))
 const connected = computed(() => connection.value !== undefined)
+// A credentialless source (GitHub Issues) reuses the installed GitHub App: no form.
+const credentialless = computed(() => (descriptor.value?.credentialFields.length ?? 0) === 0)
+// Usable right now: a credentialed source is connected; GitHub Issues' App is installed.
+const available = computed(() => descriptor.value?.available ?? false)
 
 const open = computed({
   get: () => ui.taskConnect !== null,
@@ -23,24 +34,19 @@ const open = computed({
 /** One value per credential field, reset whenever the modal (re)opens. */
 const values = ref<Record<string, string>>({})
 const saving = ref(false)
+const togglingEnabled = ref(false)
 
 watch(open, (isOpen) => {
   if (isOpen) values.value = {}
 })
 
-// A source with no credential fields (e.g. GitHub, which reuses the workspace's
-// installed GitHub App) connects with an empty bag — there is nothing to fill in,
-// so the button is enabled as long as it isn't already connected.
-const credentialless = computed(() => (descriptor.value?.credentialFields.length ?? 0) === 0)
-
 const canSubmit = computed(() => {
   const fields = descriptor.value?.credentialFields ?? []
-  if (credentialless.value) return !connected.value
   return fields.every((f) => (values.value[f.key] ?? '').trim())
 })
 
 async function submit() {
-  if (!canSubmit.value || !source.value) return
+  if (!canSubmit.value || !source.value || credentialless.value) return
   const credentials: Record<string, string> = {}
   for (const f of descriptor.value!.credentialFields) {
     credentials[f.key] = values.value[f.key]!.trim()
@@ -53,7 +59,8 @@ async function submit() {
       icon: 'i-lucide-check',
       color: 'success',
     })
-    ui.closeTaskConnect()
+    // Re-probe so `available`/`enabled` reflect the new connection.
+    await tasks.probe()
   } catch (e) {
     toast.add({
       title: 'Could not connect',
@@ -69,28 +76,53 @@ async function submit() {
 async function disconnect() {
   if (!source.value) return
   await tasks.disconnect(source.value)
+  await tasks.probe()
   toast.add({
     title: `${descriptor.value?.label ?? 'Source'} disconnected`,
     icon: 'i-lucide-unplug',
   })
   ui.closeTaskConnect()
 }
+
+async function toggleEnabled(enabled: boolean) {
+  if (!source.value) return
+  togglingEnabled.value = true
+  try {
+    await tasks.setEnabled(source.value, enabled)
+  } catch (e) {
+    toast.add({
+      title: 'Could not update',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    togglingEnabled.value = false
+  }
+}
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+  <UModal v-model:open="open" :title="descriptor?.label ?? 'Task source'">
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">
-          Connect {{ descriptor.label }} to import issues and attach them to tasks as agent context.
+          {{ descriptor.label }} lets you import issues and attach them to tasks as agent context.
         </p>
 
-        <p v-if="credentialless" class="text-[11px] text-slate-500">
-          This source uses the GitHub App already installed on your workspace — there are no
-          credentials to enter. Connecting just enables linking its issues to tasks.
-        </p>
+        <!-- Credentialless source (GitHub Issues): no form, just the on/off toggle. -->
+        <template v-if="credentialless">
+          <p class="text-[11px] text-slate-500">
+            This source uses the GitHub App already installed on your workspace — there are no
+            credentials to enter.
+          </p>
+          <p v-if="!available" class="text-[11px] text-amber-400">
+            Install the workspace's GitHub App (connect GitHub repos) to offer {{ descriptor.label }}.
+          </p>
+        </template>
 
-        <div v-else class="space-y-3">
+        <!-- Credentialed source (Jira): the connect form, shown until connected. -->
+        <div v-else-if="!connected" class="space-y-3">
           <UFormField
             v-for="field in descriptor.credentialFields"
             :key="field.key"
@@ -105,6 +137,27 @@ async function disconnect() {
             />
           </UFormField>
         </div>
+        <p v-else class="text-[11px] text-slate-500">
+          Connected{{ connection?.label ? ` to ${connection.label}` : '' }}.
+        </p>
+
+        <!-- The per-workspace on/off toggle, available once the source is usable. -->
+        <div
+          v-if="available"
+          class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+        >
+          <div class="text-sm">
+            <div class="font-medium text-slate-200">Offer to this workspace</div>
+            <div class="text-[11px] text-slate-500">
+              When off, {{ descriptor.label }} is hidden from import and linking.
+            </div>
+          </div>
+          <USwitch
+            :model-value="descriptor.enabled"
+            :loading="togglingEnabled"
+            @update:model-value="toggleEnabled"
+          />
+        </div>
 
         <div class="flex items-center justify-between gap-2 pt-1">
           <UButton
@@ -118,6 +171,7 @@ async function disconnect() {
           </UButton>
           <div v-else />
           <UButton
+            v-if="!credentialless"
             color="primary"
             icon="i-lucide-plug"
             :loading="saving"

package/app/composables/api/spec.ts

@@ -0,0 +1,14 @@
+import type { ServiceSpecView } from '~/types/spec'
+import type { ApiContext } from './context'
+
+/**
+ * The service-spec read (the inspector's "View Requirements" window). Reassembles the
+ * sharded `spec/` artifact from the service repo's default branch. Always 200: a service
+ * with no spec on main (or no GitHub connected) returns `{ present: false }`.
+ */
+export function specApi({ http, ws }: ApiContext) {
+  return {
+    getServiceSpec: (workspaceId: string, blockId: string) =>
+      http<ServiceSpecView>(`${ws(workspaceId)}/blocks/${encodeURIComponent(blockId)}/spec`),
+  }
+}

package/app/composables/api/tasks.ts

@@ -3,8 +3,8 @@ import type {
   SourceTask,
   TaskConnection,
   TaskSearchResult,
-  TaskSourceDescriptor,
   TaskSourceKind,
+  TaskSourceState,
 } from '~/types/domain'
 import type { PutTrackerSettingsInput, TrackerSettings } from '~/types/tracker'
 import type { ApiContext } from './context'
@@ -13,10 +13,17 @@ import type { ApiContext } from './context'
 export function tasksApi({ http, ws }: ApiContext) {
   return {
     // ---- task sources (Jira, …) ------------------------------------------
-    // The configured trackers + their connect/import metadata. A 503 means the
-    // integration is off (the store hides its UI on any error here).
+    // The configured trackers + their connect/import metadata + the workspace's
+    // per-source state (available + enabled). A 503 means the integration is off
+    // (the store hides its UI on any error here).
     listTaskSources: (workspaceId: string) =>
-      http<{ sources: TaskSourceDescriptor[] }>(`${ws(workspaceId)}/task-sources`),
+      http<{ sources: TaskSourceState[] }>(`${ws(workspaceId)}/task-sources`),
+
+    setTaskSourceEnabled: (workspaceId: string, source: TaskSourceKind, enabled: boolean) =>
+      http(`${ws(workspaceId)}/task-sources/${source}/enabled`, {
+        method: 'PUT',
+        body: { enabled },
+      }),
 
     listTaskConnections: (workspaceId: string) =>
       http<{ connections: TaskConnection[] }>(`${ws(workspaceId)}/task-sources/connections`),

package/app/composables/useApi.ts

@@ -15,6 +15,7 @@ import { recurringApi } from './api/recurring'
 import { releaseHealthApi } from './api/releaseHealth'
 import { reviewsApi } from './api/reviews'
 import { slackApi } from './api/slack'
+import { specApi } from './api/spec'
 import { tasksApi } from './api/tasks'
 import { workspacesApi } from './api/workspaces'
 
@@ -78,6 +79,7 @@ export function useApi() {
     ...documentsApi(ctx),
     ...tasksApi(ctx),
     ...reviewsApi(ctx),
+    ...specApi(ctx),
     ...notificationsApi(ctx),
     ...presetsApi(ctx),
     ...releaseHealthApi(ctx),

package/app/stores/serviceSpec.ts

@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import { reactive, ref } from 'vue'
+import type { ServiceSpecView } from '~/types/spec'
+import { useWorkspaceStore } from '~/stores/workspace'
+
+/**
+ * Service-spec read state for the inspector's "View Requirements" window. The spec lives
+ * sharded in the service repo under `spec/`; the backend reassembles it from the repo's
+ * default branch and serves a {@link ServiceSpecView}. Read-only and fetched on demand
+ * (per service frame block), cached per block. Nothing is persisted client-side.
+ */
+export const useServiceSpecStore = defineStore('serviceSpec', () => {
+  const api = useApi()
+  const workspace = useWorkspaceStore()
+
+  /** The fetched view per block id (undefined = not yet fetched). */
+  const views = ref<Record<string, ServiceSpecView>>({})
+  /**
+   * In-flight loads keyed by block id — the SINGLE source of truth for "is this block
+   * loading". A reactive Map so `isLoading` (derived from `.has`) tracks set/delete, and it
+   * also coalesces overlapping loads onto one request: no separate loading-flag Set to keep
+   * in sync.
+   */
+  const inFlight = reactive(new Map<string, Promise<void>>())
+  /** Block ids whose last fetch failed (network / unexpected error). */
+  const erroredByBlock = ref<Set<string>>(new Set())
+
+  function viewFor(blockId: string): ServiceSpecView | undefined {
+    return views.value[blockId]
+  }
+  function isLoading(blockId: string): boolean {
+    return inFlight.has(blockId)
+  }
+  function isErrored(blockId: string): boolean {
+    return erroredByBlock.value.has(blockId)
+  }
+
+  function setErrored(key: string, on: boolean) {
+    const next = new Set(erroredByBlock.value)
+    if (on) next.add(key)
+    else next.delete(key)
+    erroredByBlock.value = next
+  }
+
+  /** Fetch (and cache) the spec view for a service frame block. */
+  async function load(blockId: string) {
+    if (!workspace.workspaceId) return
+    const pending = inFlight.get(blockId)
+    if (pending) return pending
+    setErrored(blockId, false)
+    const promise = (async () => {
+      try {
+        const view = await api.getServiceSpec(workspace.requireId(), blockId)
+        views.value = { ...views.value, [blockId]: view }
+      } catch {
+        setErrored(blockId, true)
+      } finally {
+        inFlight.delete(blockId)
+      }
+    })()
+    inFlight.set(blockId, promise)
+    return promise
+  }
+
+  return {
+    views,
+    viewFor,
+    isLoading,
+    isErrored,
+    load,
+  }
+})

package/app/stores/tasks.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import type { SourceTask, TaskConnection, TaskSourceDescriptor } from '~/types/domain'
+import type { SourceTask, TaskConnection, TaskSourceState } from '~/types/domain'
 import { useTasksStore } from '~/stores/tasks'
 
 /** Minimal SourceTask factory — only the fields the read getters care about. */
@@ -23,13 +23,15 @@ function sourceTask(externalId: string, over: Partial<SourceTask> = {}): SourceT
   }
 }
 
-const jiraDescriptor: TaskSourceDescriptor = {
+const jiraDescriptor: TaskSourceState = {
   source: 'jira',
   label: 'Jira',
   icon: 'i-lucide-square-check',
   credentialFields: [],
   refLabel: 'Issue key or URL',
   refPlaceholder: 'PROJ-123',
+  available: true,
+  enabled: true,
 }
 
 const jiraConnection: TaskConnection = { source: 'jira', label: 'acme', connectedAt: 0 }

package/app/stores/tasks.ts

@@ -4,8 +4,8 @@ import type {
   SourceTask,
   TaskConnection,
   TaskSearchResult,
-  TaskSourceDescriptor,
   TaskSourceKind,
+  TaskSourceState,
 } from '~/types/domain'
 import { useWorkspaceStore } from '~/stores/workspace'
 
@@ -27,9 +27,9 @@ export const useTasksStore = defineStore('tasks', () => {
 
   /** null = unknown (not probed yet), true/false = integration on/off. */
   const available = ref<boolean | null>(null)
-  /** The configured sources and their connect/import descriptors. */
-  const sources = ref<TaskSourceDescriptor[]>([])
-  /** Live connections, one per connected source. */
+  /** The configured sources, each with its descriptor + per-workspace state (available + enabled). */
+  const sources = ref<TaskSourceState[]>([])
+  /** Live connections, one per connected (credentialed) source. */
   const connections = ref<TaskConnection[]>([])
   const tasks = ref<SourceTask[]>([])
   const loading = ref(false)
@@ -40,7 +40,11 @@ export const useTasksStore = defineStore('tasks', () => {
   )
   const anyConnected = computed(() => connections.value.length > 0)
 
-  function descriptorFor(source: TaskSourceKind): TaskSourceDescriptor | undefined {
+  /** Sources offered for import: available (connected / App installed) AND enabled. */
+  const offeredSources = computed(() => sources.value.filter((s) => s.available && s.enabled))
+  const anyOffered = computed(() => offeredSources.value.length > 0)
+
+  function descriptorFor(source: TaskSourceKind): TaskSourceState | undefined {
     return sources.value.find((s) => s.source === source)
   }
 
@@ -104,6 +108,13 @@ export const useTasksStore = defineStore('tasks', () => {
     connections.value = connections.value.filter((c) => c.source !== source)
   }
 
+  /** Enable or disable a source for the workspace (the per-workspace toggle). */
+  async function setEnabled(source: TaskSourceKind, enabled: boolean) {
+    await api.setTaskSourceEnabled(workspace.requireId(), source, enabled)
+    const i = sources.value.findIndex((s) => s.source === source)
+    if (i >= 0) sources.value[i] = { ...sources.value[i]!, enabled }
+  }
+
   /** Load the imported issues for the workspace (across sources). */
   async function loadTasks() {
     tasks.value = await api.listTasks(workspace.requireId())
@@ -160,6 +171,8 @@ export const useTasksStore = defineStore('tasks', () => {
     loading,
     connectedSources,
     anyConnected,
+    offeredSources,
+    anyOffered,
     descriptorFor,
     connectionFor,
     isConnected,
@@ -167,6 +180,7 @@ export const useTasksStore = defineStore('tasks', () => {
     probe,
     connect,
     disconnect,
+    setEnabled,
     loadTasks,
     importTask,
     search,

package/app/stores/ui.ts

@@ -336,6 +336,10 @@ export const useUiStore = defineStore('ui', () => {
   function openClarityReview(blockId: string) {
     resultView.value = { view: 'clarity-review', blockId, instanceId: null, stepIndex: null }
   }
+  // Open the service-spec window for a service frame (the inspector's "View Requirements").
+  function openServiceSpec(blockId: string) {
+    resultView.value = { view: 'service-spec', blockId, instanceId: null, stepIndex: null }
+  }
   function closeResultView() {
     resultView.value = null
   }
@@ -440,6 +444,7 @@ export const useUiStore = defineStore('ui', () => {
     closeOpenRouter,
     openRequirementReview,
     openClarityReview,
+    openServiceSpec,
     closeRequirementReview,
     openStepDetail,
     closeStepDetail,

package/app/types/spec.ts

@@ -0,0 +1,74 @@
+// The prescriptive, service-level SPECIFICATION read view. These shapes mirror the
+// `@cat-factory/contracts` `spec.ts` wire schemas exactly (see the note in `domain.ts`),
+// so the service-spec endpoint's payload drops straight into the store. The spec lives
+// sharded in the service repo under `spec/`; the backend reassembles it from the repo's
+// default branch and serves it as `ServiceSpecView` for the inspector's "View
+// Requirements" window.
+
+export type RequirementPriority = 'must' | 'should' | 'could'
+export type RequirementKind = 'functional' | 'nonfunctional' | 'constraint'
+
+/** One acceptance criterion in Given/When/Then form — the seed for a Gherkin scenario. */
+export interface AcceptanceCriterion {
+  id: string
+  given: string
+  when: string
+  /** The Gherkin "Then" clause (named `outcome` so the object is never thenable). */
+  outcome: string
+}
+
+/** A single prescriptive requirement, traceable to the board task(s) it came from. */
+export interface RequirementItem {
+  id: string
+  title: string
+  statement: string
+  kind: RequirementKind
+  priority: RequirementPriority
+  sourceBlockIds?: string[]
+  acceptance?: AcceptanceCriterion[]
+}
+
+/** A domain rule / invariant scoped to the feature group it governs. */
+export interface DomainRule {
+  id: string
+  rule: string
+  rationale?: string
+  sourceBlockIds?: string[]
+}
+
+/** A feature / logical group: related requirements plus the domain rules scoped to them. */
+export interface RequirementGroup {
+  name: string
+  summary?: string
+  requirements?: RequirementItem[]
+  rules?: DomainRule[]
+}
+
+/** A module (domain) — the top level of the taxonomy, holding feature groups. */
+export interface SpecModule {
+  name: string
+  summary?: string
+  groups?: RequirementGroup[]
+}
+
+/** The unified prescriptive specification document for one service. */
+export interface SpecDoc {
+  service: string
+  summary?: string
+  modules?: SpecModule[]
+}
+
+/** A rendered Gherkin feature file read back from the repo. */
+export interface SpecFeatureFile {
+  module: string
+  group: string
+  path: string
+  content: string
+}
+
+/** The service-spec view: the reassembled tree + its Gherkin files (empty when none). */
+export interface ServiceSpecView {
+  present: boolean
+  spec: SpecDoc | null
+  features: SpecFeatureFile[]
+}

package/app/types/tasks.ts

@@ -26,6 +26,17 @@ export interface TaskSourceDescriptor {
   searchable?: boolean
 }
 
+/**
+ * A source's descriptor plus the workspace's live state: whether it's usable now
+ * (`available` — a credentialed source is connected; GitHub Issues' App is
+ * installed) and whether the workspace offers it (`enabled`, the per-workspace
+ * toggle, default true). `available && enabled` is what makes a source offered.
+ */
+export interface TaskSourceState extends TaskSourceDescriptor {
+  available: boolean
+  enabled: boolean
+}
+
 /** A workspace's connection to a task source (never carries credentials). */
 export interface TaskConnection {
   source: TaskSourceKind

package/nuxt.config.ts

@@ -15,6 +15,15 @@ export default defineNuxtConfig({
   // Render as a pure client-side SPA that talks to the cat-factory backend.
   ssr: false,
 
+  // The board is a single dark-themed surface (neutral is mapped to `slate` and
+  // every component is hand-styled in slate). Pin Nuxt UI's color mode to dark so
+  // its own chrome (modals, inputs, selects, dropdowns) matches instead of
+  // following the visitor's system preference and rendering light/white overlays.
+  colorMode: {
+    preference: 'dark',
+    fallback: 'dark',
+  },
+
   runtimeConfig: {
     public: {
       // Base URL of the cat-factory worker API. Defaults to the local wrangler

package/package.json

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