@cat-factory/app 0.9.0 → 0.10.0

package/app/components/layout/SideBar.vue

@@ -68,17 +68,6 @@ watch(
         >
           Build a pipeline
         </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-plus"
-          class="justify-start"
-          @click="ui.openCommandBar()"
-        >
-          Add a block
-        </UButton>
       </div>
     </section>
 
@@ -122,95 +111,20 @@ watch(
         Integrations
       </h2>
       <div class="space-y-1.5">
+        <!-- Every external system the workspace can enable/link now lives behind
+             this single button — the hub modal lists them grouped (source control,
+             communication, documents, trackers, observability, model providers). -->
         <UButton
-          v-if="github.available"
           block
           color="primary"
           variant="soft"
           size="sm"
-          icon="i-lucide-github"
+          icon="i-lucide-blocks"
           class="justify-start"
-          @click="ui.openGitHub()"
+          @click="ui.openIntegrations()"
         >
-          <span class="truncate">
-            {{ github.connected ? github.connection?.accountLogin : 'Connect GitHub' }}
-          </span>
+          Integrations
         </UButton>
-
-        <UButton
-          v-if="slack.available"
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-slack"
-          class="justify-start"
-          @click="ui.openSlack()"
-        >
-          <span class="truncate">
-            {{ slack.connected ? slack.connection?.teamName : 'Connect Slack' }}
-          </span>
-        </UButton>
-
-        <template v-if="documents.available">
-          <UButton
-            v-for="src in documents.sources"
-            :key="src.source"
-            block
-            color="neutral"
-            variant="soft"
-            size="sm"
-            :icon="src.icon"
-            class="justify-start"
-            @click="ui.openDocumentConnect(src.source)"
-          >
-            <span class="truncate">
-              {{ documents.isConnected(src.source) ? src.label : `Connect ${src.label}` }}
-            </span>
-          </UButton>
-          <UButton
-            v-if="documents.anyConnected"
-            block
-            color="neutral"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-file-down"
-            class="justify-start"
-            @click="ui.openDocumentImport(null)"
-          >
-            Import &amp; spawn
-          </UButton>
-        </template>
-
-        <template v-if="tasks.available">
-          <UButton
-            v-for="src in tasks.sources"
-            :key="src.source"
-            block
-            color="neutral"
-            variant="soft"
-            size="sm"
-            :icon="src.icon"
-            class="justify-start"
-            @click="ui.openTaskConnect(src.source)"
-          >
-            <span class="truncate">
-              {{ tasks.isConnected(src.source) ? src.label : `Connect ${src.label}` }}
-            </span>
-          </UButton>
-          <UButton
-            v-if="tasks.anyConnected"
-            block
-            color="neutral"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-file-down"
-            class="justify-start"
-            @click="ui.openTaskImport(null)"
-          >
-            Import issues
-          </UButton>
-        </template>
       </div>
     </section>
 
@@ -240,17 +154,8 @@ watch(
         Configuration
       </h2>
       <div class="space-y-1.5">
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-git-merge"
-          class="justify-start"
-          @click="ui.openMergeThresholds()"
-        >
-          Merge thresholds
-        </UButton>
+        <!-- Merge thresholds, issue writeback and default service best practices are
+             now tabs inside Workspace settings. -->
         <UButton
           block
           color="primary"
@@ -262,28 +167,6 @@ watch(
         >
           Workspace settings
         </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-message-square-reply"
-          class="justify-start"
-          @click="ui.openIssueWriteback()"
-        >
-          Issue tracker writeback
-        </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-activity"
-          class="justify-start"
-          @click="ui.openDatadog()"
-        >
-          Post-release health
-        </UButton>
         <UButton
           block
           color="primary"
@@ -295,51 +178,6 @@ watch(
         >
           Model Configuration
         </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-book-open-check"
-          class="justify-start"
-          @click="ui.openServiceFragmentDefaults()"
-        >
-          Default service best practices
-        </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-key-round"
-          class="justify-start"
-          title="Connect LLM vendor subscriptions + provider API keys"
-          @click="ui.openVendorCredentials()"
-        >
-          Vendors &amp; keys
-        </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-server"
-          class="justify-start"
-          @click="ui.openLocalModels()"
-        >
-          My local runners
-        </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-waypoints"
-          class="justify-start"
-          @click="ui.openOpenRouter()"
-        >
-          OpenRouter models
-        </UButton>
       </div>
     </section>
 

package/app/components/panels/GenericStructuredResultView.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+// Generic structured-result window — the default dedicated surface for a registered
+// CUSTOM agent kind whose archetype declares `resultView: 'generic-structured'`. A custom
+// `container-explore` agent returns structured JSON (the engine's `custom` channel), which
+// is recorded on the step; this renders it read-only (pretty-printed JSON), alongside the
+// agent's prose summary and the shared run metadata — so a proprietary kind ships a usable
+// result view with ZERO bespoke frontend code. Opened via the universal result-view host,
+// the same seam the requirements / tester windows use.
+import { computed } from 'vue'
+import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+
+const board = useBoardStore()
+const execution = useExecutionStore()
+const agents = useAgentsStore()
+
+// Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: this window reads
+// its data straight off the execution step, so there's nothing to fetch on open.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('generic-structured')
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+
+const instance = computed(() =>
+  instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
+)
+const step = computed(() => {
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
+})
+const meta = computed(() => (step.value ? agents.get(step.value.agentKind) : undefined))
+
+/** The agent's structured JSON, pretty-printed; null when the step produced none. */
+const customJson = computed<string | null>(() => {
+  const custom = step.value?.custom
+  if (custom === undefined || custom === null) return null
+  try {
+    return JSON.stringify(custom, null, 2)
+  } catch {
+    return String(custom)
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="m-4 flex w-full max-w-4xl 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-5 py-3">
+          <span
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-500/15 text-cyan-300"
+          >
+            <UIcon :name="meta?.icon ?? 'i-lucide-braces'" class="h-4 w-4" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">
+              {{ meta?.label ?? 'Agent result' }}{{ block ? ` — ${block.title}` : '' }}
+            </h2>
+            <p class="truncate text-[11px] text-slate-400">
+              {{ meta?.description ?? 'Structured agent output' }}
+            </p>
+          </div>
+          <StepRestartControl
+            :instance-id="instanceId"
+            :step-index="stepIndex"
+            @restarted="close"
+          />
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-4 w-4" />
+          </button>
+        </header>
+
+        <div class="flex min-h-0 flex-1">
+          <!-- Main: prose summary + structured JSON -->
+          <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+            <p
+              v-if="step?.output"
+              class="mb-4 whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
+            >
+              {{ step.output }}
+            </p>
+
+            <template v-if="customJson">
+              <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                Structured output
+              </h3>
+              <pre
+                class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-[12px] leading-relaxed text-slate-200"
+              ><code>{{ customJson }}</code></pre>
+            </template>
+
+            <div
+              v-else-if="!step?.output"
+              class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+            >
+              <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
+              <p class="text-sm">No result yet.</p>
+              <p class="max-w-sm text-[11px] text-slate-500">
+                The structured output appears once this agent finishes. While it runs, the step
+                shows live progress on the board.
+              </p>
+            </div>
+          </div>
+
+          <!-- Sidebar: shared run metadata + observability rollup -->
+          <aside
+            class="hidden w-60 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+          >
+            <StepRunMeta
+              v-if="step"
+              :step="step"
+              :instance-id="instanceId ?? undefined"
+              :step-number="stepIndex === null ? undefined : stepIndex + 1"
+              :total-steps="instance?.steps.length"
+              :run-failed="instance?.status === 'failed'"
+              :failure-at="instance?.failure?.occurredAt"
+            />
+          </aside>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/panels/InspectorPanel.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { Block, BlockStatus } from '~/types/domain'
-import { BLOCK_TYPE_META, STATUS_META } from '~/utils/catalog'
+import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 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 ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
 import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue'
 import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
@@ -52,7 +53,7 @@ const isContainer = computed(() => level.value === 'frame' || level.value === 'm
 const isTask = computed(() => level.value === 'task')
 
 const instance = computed(() => execution.getInstance(block.value?.executionId))
-const typeMeta = computed(() => (block.value ? BLOCK_TYPE_META[block.value.type] : null))
+const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
 // Containers show a derived activity status (never "done"); tasks use their own.
 const FRAME_LABEL: Record<BlockStatus, string> = {
@@ -413,6 +414,9 @@ const showOriginalDescription = ref(false)
       <!-- service (frame): best-practice fragments for code-aware agents -->
       <ServiceFragments v-if="isFrame" :block="block" />
 
+      <!-- service (frame): post-release-health monitor/SLO mapping -->
+      <ServiceReleaseHealthConfig v-if="isFrame" :block="block" />
+
       <!-- task: dependencies, structure, agent config, run settings, execution -->
       <template v-else-if="isTask">
         <RecurringScheduleSettings :block="block" />

package/app/components/panels/StepResultViewHost.vue

@@ -16,6 +16,7 @@ import ClarityReviewWindow from '~/components/clarity/ClarityReviewWindow.vue'
 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'
 
 const ui = useUiStore()
 
@@ -27,6 +28,9 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   gate: GateResultView,
   // Opened for any step that ran the consensus mechanism (routed in `ui.dispatchStepView`).
   'consensus-session': ConsensusSessionWindow,
+  // 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,
 }
 
 const active = computed<Component | null>(() => {

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import type { Block } from '~/types/domain'
+
+// 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
+// id (no manual entry) — the global window only owns the connection now. The Attach/save
+// control is disabled with a hint until an observability integration is connected.
+const props = defineProps<{ block: Block }>()
+
+const store = useReleaseHealthStore()
+const ui = useUiStore()
+const toast = useToast()
+
+const busy = ref(false)
+const draft = reactive({ monitorIds: '', sloIds: '', envTag: '' })
+
+const connected = computed(() => store.connection.connected)
+const saved = computed(() => store.configForBlock(props.block.id))
+
+function parseIds(csv: string): string[] {
+  return csv
+    .split(',')
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0)
+}
+
+// Load the connection + configs once, then hydrate the form from this block's saved config.
+onMounted(() => {
+  store.ensureLoaded().catch(() => {})
+})
+watch(
+  saved,
+  (config) => {
+    draft.monitorIds = config?.monitorIds.join(', ') ?? ''
+    draft.sloIds = config?.sloIds.join(', ') ?? ''
+    draft.envTag = config?.envTag ?? ''
+  },
+  { immediate: true },
+)
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function save() {
+  busy.value = true
+  try {
+    await store.saveConfig(props.block.id, {
+      monitorIds: parseIds(draft.monitorIds),
+      sloIds: parseIds(draft.sloIds),
+      envTag: draft.envTag.trim() || null,
+    })
+    toast.add({ title: 'Monitoring saved', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not save the mapping', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function clear() {
+  busy.value = true
+  try {
+    await store.removeConfig(props.block.id)
+    draft.monitorIds = ''
+    draft.sloIds = ''
+    draft.envTag = ''
+  } catch (e) {
+    notifyError('Could not clear the mapping', e)
+  } finally {
+    busy.value = false
+  }
+}
+</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">
+        Post-release health
+      </span>
+      <UButton
+        v-if="saved"
+        color="error"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-trash-2"
+        :loading="busy"
+        @click="clear"
+      >
+        Clear
+      </UButton>
+    </div>
+
+    <!-- Disabled affordance until an observability integration is connected. -->
+    <div
+      v-if="!connected"
+      class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-[11px] text-slate-400"
+    >
+      <span>Connect an observability integration to watch this service after releases.</span>
+      <UButton
+        color="neutral"
+        variant="soft"
+        size="xs"
+        icon="i-lucide-plug"
+        title="Connect an observability integration first"
+        @click="ui.openObservabilityConnection()"
+      >
+        Connect
+      </UButton>
+    </div>
+
+    <div v-else class="space-y-2">
+      <p class="text-[11px] text-slate-500">
+        The monitors and SLOs the gate watches after this service ships. Comma-separate ids.
+      </p>
+      <div class="grid grid-cols-2 gap-2">
+        <UFormField label="Monitor ids">
+          <UInput v-model="draft.monitorIds" placeholder="123, 456" size="sm" class="w-full" />
+        </UFormField>
+        <UFormField label="SLO ids">
+          <UInput v-model="draft.sloIds" placeholder="abc, def" size="sm" class="w-full" />
+        </UFormField>
+      </div>
+      <UFormField label="Env tag (optional)">
+        <UInput v-model="draft.envTag" placeholder="prod" size="sm" class="w-full" />
+      </UFormField>
+      <div class="flex justify-end">
+        <UButton
+          color="primary"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-save"
+          :loading="busy"
+          @click="save"
+        >
+          Save monitoring
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/settings/IssueTrackerWritebackPanel.vue

@@ -4,27 +4,23 @@
 // progresses — comment when the PR opens, and comment + close as resolved when it
 // merges. Each is overridable per task in the inspector. Persisted on the workspace
 // tracker settings (the selection + Jira project key are preserved on save).
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
-const ui = useUiStore()
 const tracker = useTrackerStore()
 const toast = useToast()
 
-const open = computed({
-  get: () => ui.issueWritebackOpen,
-  set: (v: boolean) => (v ? ui.openIssueWriteback() : ui.closeIssueWriteback()),
-})
-
 const commentOnPrOpen = ref(false)
 const resolveOnMerge = ref(false)
 const saving = ref(false)
 
-// Re-sync the local toggles from the store whenever the panel opens.
-watch(open, (isOpen) => {
-  if (!isOpen) return
+// Sync the local toggles from the store on mount (the tab renders when Workspace
+// settings opens) and whenever the stored settings change underneath.
+function hydrate() {
   commentOnPrOpen.value = tracker.settings.writebackCommentOnPrOpen
   resolveOnMerge.value = tracker.settings.writebackResolveOnMerge
-})
+}
+onMounted(hydrate)
+watch(() => tracker.settings, hydrate, { deep: true })
 
 async function save() {
   saving.value = true
@@ -51,53 +47,45 @@ async function save() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Issue tracker writeback" :ui="{ content: 'max-w-lg' }">
-    <template #body>
-      <div class="space-y-4">
-        <p class="text-xs text-slate-400">
-          When a task is linked to a tracker issue (GitHub Issues or Jira), write back to it as the
-          task's pull request progresses. Each toggle is the workspace default and can be overridden
-          per task in the inspector. GitHub issues close natively; Jira issues transition to the
-          first status in their <span class="text-slate-300">Done</span> category.
-        </p>
+  <div class="space-y-4">
+    <p class="text-xs text-slate-400">
+      When a task is linked to a tracker issue (GitHub Issues or Jira), write back to it as the
+      task's pull request progresses. Each toggle is the workspace default and can be overridden per
+      task in the inspector. GitHub issues close natively; Jira issues transition to the first
+      status in their <span class="text-slate-300">Done</span> category.
+    </p>
 
-        <label
-          class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3"
-        >
-          <USwitch v-model="commentOnPrOpen" />
-          <span class="text-sm">
-            <span class="block text-slate-200">Comment when a PR opens</span>
-            <span class="block text-xs text-slate-500">
-              Post a comment on the linked issue with the new pull request's link.
-            </span>
-          </span>
-        </label>
+    <label class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3">
+      <USwitch v-model="commentOnPrOpen" />
+      <span class="text-sm">
+        <span class="block text-slate-200">Comment when a PR opens</span>
+        <span class="block text-xs text-slate-500">
+          Post a comment on the linked issue with the new pull request's link.
+        </span>
+      </span>
+    </label>
 
-        <label
-          class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3"
-        >
-          <USwitch v-model="resolveOnMerge" />
-          <span class="text-sm">
-            <span class="block text-slate-200">Close as resolved when a PR merges</span>
-            <span class="block text-xs text-slate-500">
-              Comment that the PR merged, then close / resolve the linked issue.
-            </span>
-          </span>
-        </label>
+    <label class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3">
+      <USwitch v-model="resolveOnMerge" />
+      <span class="text-sm">
+        <span class="block text-slate-200">Close as resolved when a PR merges</span>
+        <span class="block text-xs text-slate-500">
+          Comment that the PR merged, then close / resolve the linked issue.
+        </span>
+      </span>
+    </label>
 
-        <div class="flex justify-end">
-          <UButton
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-save"
-            :loading="saving"
-            @click="save"
-          >
-            Save
-          </UButton>
-        </div>
-      </div>
-    </template>
-  </UModal>
+    <div class="flex justify-end">
+      <UButton
+        color="primary"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-save"
+        :loading="saving"
+        @click="save"
+      >
+        Save
+      </UButton>
+    </div>
+  </div>
 </template>