@cat-factory/app 0.79.2 → 0.80.0

package/app/components/panels/inspector/ServiceFragments.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 // Service-level best-practice fragments (frame blocks). These are the programming
 // standards/guidelines for the whole service; at run time their bodies are folded
 // into the prompt of every `code-aware` agent on tasks under this service. Drawn from
 // the board's merged fragment catalog (built-in ∪ registered ∪ account ∪ workspace,
 // via the fragments store; static pool when the library is off), grouped by category.
-const props = defineProps<{ block: Block }>()
+// `defaultOpen` expands the section on surfaces that embed this as the primary content
+// (the add-service modal); the inspector leaves it collapsed.
+const props = defineProps<{ block: Block; defaultOpen?: boolean }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
@@ -76,11 +79,13 @@ function removeFragment(id: string) {
 </script>
 
 <template>
-  <div>
-    <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('inspector.fragments.serviceTitle') }}
-      </span>
+  <InspectorSection
+    :title="t('inspector.fragments.serviceTitle')"
+    :hint="t('inspector.fragments.serviceHint')"
+    :count="selectedFragments.length"
+    :default-open="props.defaultOpen"
+  >
+    <template #actions>
       <UDropdownMenu :items="fragmentMenu">
         <UButton
           size="xs"
@@ -90,8 +95,8 @@ function removeFragment(id: string) {
           trailing-icon="i-lucide-chevron-down"
         />
       </UDropdownMenu>
-    </div>
-    <div v-if="selectedFragments.length" class="mb-1 flex flex-wrap gap-1">
+    </template>
+    <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
       <UBadge
         v-for="f in selectedFragments"
         :key="f.id"
@@ -108,5 +113,5 @@ function removeFragment(id: string) {
     <div v-else class="text-[11px] text-slate-500">
       {{ t('inspector.fragments.serviceEmpty') }}
     </div>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 // Per-service (frame) post-release-health mapping: which observability monitors/SLOs the
 // `post-release-health` gate watches after this service's PRs ship. Keyed by THIS block's
@@ -89,11 +90,11 @@ async function clear() {
 </script>
 
 <template>
-  <div class="space-y-2">
-    <div class="flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('inspector.releaseHealth.title') }}
-      </span>
+  <InspectorSection
+    :title="t('inspector.releaseHealth.title')"
+    :hint="t('inspector.releaseHealth.sectionHint')"
+  >
+    <template #actions>
       <UButton
         v-if="saved"
         color="error"
@@ -105,7 +106,7 @@ async function clear() {
       >
         {{ t('inspector.releaseHealth.clear') }}
       </UButton>
-    </div>
+    </template>
 
     <!-- Disabled affordance until an observability integration is connected. -->
     <div
@@ -153,5 +154,5 @@ async function clear() {
         </UButton>
       </div>
     </div>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -17,6 +17,7 @@ import type {
   ProvisioningServiceDirCandidate,
 } from '@cat-factory/contracts'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
 // TYPE this service produces (`infraless` / `docker-compose` / `kubernetes` / `custom`)
@@ -30,6 +31,9 @@ const props = defineProps<{
   // Repo backing this service, supplied by the add-service modal when the block is
   // too fresh to be resolvable from the stores yet. Otherwise resolved below.
   repo?: { githubId: number; directory?: string | null }
+  // Expands the section on surfaces that embed this as the primary content (the
+  // add-service modal); the inspector leaves it collapsed.
+  defaultOpen?: boolean
 }>()
 
 const board = useBoardStore()
@@ -403,11 +407,11 @@ function setSize(value: InstanceSize) {
 </script>
 
 <template>
-  <div class="space-y-3">
-    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-      {{ t('inspector.testConfig.title') }}
-    </div>
-
+  <InspectorSection
+    :title="t('inspector.testConfig.title')"
+    :hint="t('inspector.testConfig.hint')"
+    :default-open="props.defaultOpen"
+  >
     <div class="space-y-1">
       <span class="text-[11px] text-slate-400">{{ t('inspector.testConfig.provisionType') }}</span>
       <div class="flex flex-wrap gap-1">
@@ -839,60 +843,44 @@ function setSize(value: InstanceSize) {
 
     <!-- Provisioning hints: advisory inputs to the ephemeral-environment provisioner.
          Collapsed by default — most services never tune them. -->
-    <div class="border-t border-slate-800 pt-2">
-      <button
-        type="button"
-        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
-        @click="showProvisioning = !showProvisioning"
-      >
-        <UIcon
-          :name="showProvisioning ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-          class="h-3.5 w-3.5"
-        />
-        {{ t('inspector.testConfig.provisioningTitle') }}
-      </button>
-
-      <div v-if="showProvisioning" class="mt-2 space-y-3">
-        <p class="text-[11px] leading-snug text-slate-500">
-          {{ t('inspector.testConfig.provisioningHint') }}
-        </p>
-
-        <div class="space-y-1">
-          <span class="text-[11px] text-slate-400">{{
-            t('inspector.testConfig.cloudProvider')
-          }}</span>
-          <div class="flex flex-wrap gap-1">
-            <UButton
-              v-for="p in PROVIDERS"
-              :key="p.value"
-              :color="effectiveProvider === p.value ? 'primary' : 'neutral'"
-              :variant="effectiveProvider === p.value ? 'soft' : 'ghost'"
-              size="xs"
-              @click="setProvider(p.value)"
-            >
-              {{ p.label }}
-            </UButton>
-          </div>
+    <InspectorSection
+      v-model:open="showProvisioning"
+      :title="t('inspector.testConfig.provisioningTitle')"
+      :hint="t('inspector.testConfig.provisioningHint')"
+    >
+      <div class="space-y-1">
+        <span class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.cloudProvider')
+        }}</span>
+        <div class="flex flex-wrap gap-1">
+          <UButton
+            v-for="p in PROVIDERS"
+            :key="p.value"
+            :color="effectiveProvider === p.value ? 'primary' : 'neutral'"
+            :variant="effectiveProvider === p.value ? 'soft' : 'ghost'"
+            size="xs"
+            @click="setProvider(p.value)"
+          >
+            {{ p.label }}
+          </UButton>
         </div>
+      </div>
 
-        <div class="space-y-1">
-          <span class="text-[11px] text-slate-400">{{
-            t('inspector.testConfig.instanceSize')
-          }}</span>
-          <div class="flex flex-wrap gap-1">
-            <UButton
-              v-for="s in SIZES"
-              :key="s.value"
-              :color="(block.instanceSize ?? 'medium') === s.value ? 'primary' : 'neutral'"
-              :variant="(block.instanceSize ?? 'medium') === s.value ? 'soft' : 'ghost'"
-              size="xs"
-              @click="setSize(s.value)"
-            >
-              {{ s.label }}
-            </UButton>
-          </div>
+      <div class="space-y-1">
+        <span class="text-[11px] text-slate-400">{{ t('inspector.testConfig.instanceSize') }}</span>
+        <div class="flex flex-wrap gap-1">
+          <UButton
+            v-for="s in SIZES"
+            :key="s.value"
+            :color="(block.instanceSize ?? 'medium') === s.value ? 'primary' : 'neutral'"
+            :variant="(block.instanceSize ?? 'medium') === s.value ? 'soft' : 'ghost'"
+            size="xs"
+            @click="setSize(s.value)"
+          >
+            {{ s.label }}
+          </UButton>
         </div>
       </div>
-    </div>
-  </div>
+    </InspectorSection>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskAgentConfig.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { Block } from '~/types/domain'
 import { useAgentConfigStore } from '~/stores/agentConfig'
 import { useExecutionStore } from '~/stores/execution'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 // Task-level configuration contributed by the agents in this task's selected
 // pipeline (e.g. the Playwright agent's e2e target: CI vs ephemeral). Each value is
@@ -49,10 +50,12 @@ function setValue(id: string, value: string) {
 </script>
 
 <template>
-  <div v-if="descriptors.length" class="space-y-3">
-    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-      {{ t('inspector.agentConfig.title') }}
-    </div>
+  <InspectorSection
+    v-if="descriptors.length"
+    :title="t('inspector.agentConfig.title')"
+    :hint="t('inspector.agentConfig.hint')"
+    :count="descriptors.length"
+  >
     <div v-for="d in descriptors" :key="d.id" class="space-y-1">
       <div class="flex items-center justify-between">
         <span class="text-[11px] text-slate-400">{{ d.label }}</span>
@@ -80,5 +83,5 @@ function setValue(id: string, value: string) {
       </div>
       <p class="text-[11px] leading-snug text-slate-500">{{ d.description }}</p>
     </div>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskDependencies.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
 import EmptyState from '~/components/common/EmptyState.vue'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -42,11 +43,14 @@ async function removeDep(dep: Block) {
 </script>
 
 <template>
-  <div>
-    <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('inspector.dependencies.title') }}
-      </span>
+  <!-- The warning flag keeps "this task is blocked" visible even while collapsed. -->
+  <InspectorSection
+    :title="t('inspector.dependencies.title')"
+    :hint="t('inspector.dependencies.hint')"
+    :count="deps.length"
+    :warning="!runnable"
+  >
+    <template #actions>
       <UDropdownMenu v-if="depMenu.length" :items="depMenu">
         <UButton
           size="xs"
@@ -56,7 +60,7 @@ async function removeDep(dep: Block) {
           trailing-icon="i-lucide-chevron-down"
         />
       </UDropdownMenu>
-    </div>
+    </template>
     <div v-if="deps.length" class="flex flex-wrap gap-1">
       <UBadge
         v-for="d in deps"
@@ -82,8 +86,8 @@ async function removeDep(dep: Block) {
       icon="i-lucide-git-branch"
       :title="t('inspector.dependencies.empty')"
     />
-    <div v-if="!runnable" class="mt-1 text-[10px] text-amber-400">
+    <div v-if="!runnable" class="text-[10px] text-amber-400">
       {{ t('inspector.dependencies.blocked') }}
     </div>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskEstimateBadge.vue

@@ -4,6 +4,7 @@
 // used to gate consensus steps. Hidden when no estimate exists.
 import { computed } from 'vue'
 import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 const { t, n } = useI18n()
@@ -28,13 +29,13 @@ function barClass(n: number): string {
 </script>
 
 <template>
-  <section v-if="estimate" class="space-y-2">
-    <div
-      class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-400"
-    >
-      <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
-      {{ t('inspector.estimate.title') }}
-    </div>
+  <InspectorSection
+    v-if="estimate"
+    :title="t('inspector.estimate.title')"
+    :hint="t('inspector.estimate.hint')"
+    icon="i-lucide-gauge"
+    default-open
+  >
     <div class="space-y-1.5 rounded-lg border border-slate-800 bg-slate-900/40 p-2.5">
       <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
         <span class="w-20 shrink-0 text-xs text-slate-400">{{ axis.label }}</span>
@@ -53,5 +54,5 @@ function barClass(n: number): string {
         {{ estimate.rationale }}
       </p>
     </div>
-  </section>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskExecution.vue

@@ -10,6 +10,7 @@ import {
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentFailureHistory from '~/components/board/AgentFailureHistory.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -185,7 +186,13 @@ async function mergePr() {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <!-- The live run surface stays open by default: it is what a user selecting a
+       running task is looking for (and what the e2e specs assert on). -->
+  <InspectorSection
+    :title="t('inspector.execution.title')"
+    :hint="t('inspector.execution.hint')"
+    default-open
+  >
     <!-- running pipeline -->
     <div v-if="instance">
       <div class="mb-1 flex items-center justify-between">
@@ -472,5 +479,5 @@ async function mergePr() {
     >
       {{ t('inspector.execution.mergePr') }}
     </UButton>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -5,6 +5,7 @@ import type { Block } from '~/types/domain'
 import type { WritebackOverride } from '~/types/tracker'
 import { mergePresetOptionLabel, mergePresetThresholds } from '~/utils/mergePreset'
 import { pipelineAllowedForFrame } from '~/utils/pipeline'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -256,7 +257,10 @@ const technicalLabel = computed(() => {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <InspectorSection
+    :title="t('inspector.runSettings.title')"
+    :hint="t('inspector.runSettings.hint')"
+  >
     <!-- pipeline -->
     <div>
       <div class="mb-1 flex items-center justify-between">
@@ -287,6 +291,9 @@ const technicalLabel = computed(() => {
       <div v-else class="text-[11px] text-slate-500">
         {{ t('inspector.runSettings.pipelineEmpty') }}
       </div>
+      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.runSettings.pipelineHint') }}
+      </p>
     </div>
 
     <!-- merge policy preset -->
@@ -322,6 +329,9 @@ const technicalLabel = computed(() => {
       <div v-else class="text-[11px] text-slate-500">
         {{ t('inspector.runSettings.mergePresetEmpty') }}
       </div>
+      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.runSettings.mergePolicyHint') }}
+      </p>
     </div>
 
     <!-- model preset -->
@@ -393,6 +403,7 @@ const technicalLabel = computed(() => {
         </div>
       </div>
       <p class="mt-1 text-[11px] text-slate-500">
+        {{ t('inspector.runSettings.modelPresetHint') }}
         {{ t('inspector.runSettings.modelPresetChangeHint') }}
       </p>
     </div>
@@ -558,5 +569,5 @@ const technicalLabel = computed(() => {
         {{ t('inspector.runSettings.autoStartHint') }}
       </div>
     </div>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskStructure.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -76,7 +77,7 @@ function removeFragment(id: string) {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <InspectorSection :title="t('inspector.structure.title')" :hint="t('inspector.structure.hint')">
     <!-- module assignment -->
     <div>
       <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
@@ -89,6 +90,9 @@ function removeFragment(id: string) {
         :placeholder="t('inspector.structure.modulePlaceholder')"
         icon="i-lucide-package"
       />
+      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.structure.moduleHint') }}
+      </p>
     </div>
 
     <!-- best practices (prompt fragments) -->
@@ -124,6 +128,9 @@ function removeFragment(id: string) {
       <div v-else class="text-[11px] text-slate-500">
         {{ t('inspector.structure.bestPracticesEmpty') }}
       </div>
+      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.structure.bestPracticesHint') }}
+      </p>
     </div>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/tasks/TaskContextIssues.vue

@@ -6,6 +6,7 @@
 // the structured nature of an issue is visible at a glance.
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block, TaskSourceKind } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -53,17 +54,19 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
 </script>
 
 <template>
-  <div v-if="tasks.available" class="space-y-2">
-    <div class="flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('tasks.contextIssues.title') }}
-      </span>
+  <InspectorSection
+    v-if="tasks.available"
+    :title="t('tasks.contextIssues.title')"
+    :hint="t('tasks.contextIssues.hint')"
+    :count="linked.length"
+  >
+    <template #actions>
       <UDropdownMenu :items="attachMenu" :content="{ side: 'bottom', align: 'end' }">
         <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">{{
           t('tasks.contextIssues.attach')
         }}</UButton>
       </UDropdownMenu>
-    </div>
+    </template>
 
     <div v-if="linked.length" class="space-y-1">
       <a
@@ -87,5 +90,5 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
     <p v-else class="text-[11px] text-slate-500">
       {{ t('tasks.contextIssues.emptyHint') }}
     </p>
-  </div>
+  </InspectorSection>
 </template>

package/app/stores/fragmentLibrary.ts

@@ -42,8 +42,8 @@ function fragmentLibrarySetup(kind: FragmentOwnerKind, resolveOwnerId: () => str
   const resolved = ref<ResolvedFragment[]>([])
   /** Linked guideline repos for this owner. */
   const sources = ref<FragmentSource[]>([])
-  /** Per-source "changes available" counts from the last status check. */
-  const sourceChanges = ref<Record<string, number>>({})
+  /** Per-source "changes available" flag from the last status check. */
+  const sourceChanges = ref<Record<string, boolean>>({})
   const loading = ref(false)
   /**
    * Account-tier document fragments only: the workspace whose stored
@@ -166,12 +166,12 @@ function fragmentLibrarySetup(kind: FragmentOwnerKind, resolveOwnerId: () => str
     }
   }
 
-  /** Cheap "check for changes" for a source; caches the changed count. */
+  /** Lightweight commit-version "check for changes" for a source; caches the flag. */
   async function checkSource(sourceId: string) {
     const status = await api.fragmentSourceStatus(kind, requireOwnerId(), sourceId)
     sourceChanges.value = {
       ...sourceChanges.value,
-      [sourceId]: status.changed ? status.changedCount : 0,
+      [sourceId]: status.changed,
     }
     return status
   }