@cat-factory/app 0.9.1 → 0.10.0

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -4,23 +4,16 @@
 // served by GET /prompt-fragments. Changing it does not retroactively change existing
 // services — each owns its selection from creation. Persisted via the
 // serviceFragmentDefaults store (the backend replaces the whole list on each change).
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
-const ui = useUiStore()
 const fragments = useFragmentsStore()
 const defaults = useServiceFragmentDefaultsStore()
 const toast = useToast()
 
-const open = computed({
-  get: () => ui.serviceFragmentDefaultsOpen,
-  set: (v: boolean) => (v ? ui.openServiceFragmentDefaults() : ui.closeServiceFragmentDefaults()),
-})
-
 const busy = ref(false)
 
-watch(open, (isOpen) => {
-  if (isOpen) void fragments.ensureLoaded()
-})
+// The tab renders when Workspace settings opens; load the fragment pool then.
+onMounted(() => void fragments.ensureLoaded())
 
 const selected = computed(() =>
   defaults.fragmentIds
@@ -68,57 +61,49 @@ function remove(id: string) {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Default service best practices" :ui="{ content: 'max-w-2xl' }">
-    <template #body>
-      <div class="space-y-4">
-        <p class="text-xs text-slate-400">
-          Pick the best-practice fragments every <span class="text-slate-300">new</span> service
-          starts with. Their guidance is folded into the prompt of every
-          <span class="text-slate-300">code-aware</span> agent (coder, reviewer, architect, fixers)
-          on the service's tasks. You can refine the set per service in its inspector; changing this
-          default does not affect services that already exist.
-        </p>
+  <div class="space-y-4">
+    <p class="text-xs text-slate-400">
+      Pick the best-practice fragments every <span class="text-slate-300">new</span> service starts
+      with. Their guidance is folded into the prompt of every
+      <span class="text-slate-300">code-aware</span> agent (coder, reviewer, architect, fixers) on
+      the service's tasks. You can refine the set per service in its inspector; changing this
+      default does not affect services that already exist.
+    </p>
 
-        <div class="flex items-center justify-between">
-          <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            Default fragments
-          </span>
-          <UDropdownMenu
-            v-if="menu.length"
-            :items="menu"
-            :ui="{ content: 'max-h-72 overflow-y-auto' }"
-          >
-            <UButton
-              size="xs"
-              variant="ghost"
-              color="neutral"
-              icon="i-lucide-plus"
-              trailing-icon="i-lucide-chevron-down"
-              :loading="busy"
-            >
-              Add fragment
-            </UButton>
-          </UDropdownMenu>
-        </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Default fragments
+      </span>
+      <UDropdownMenu v-if="menu.length" :items="menu" :ui="{ content: 'max-h-72 overflow-y-auto' }">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          trailing-icon="i-lucide-chevron-down"
+          :loading="busy"
+        >
+          Add fragment
+        </UButton>
+      </UDropdownMenu>
+    </div>
 
-        <div v-if="selected.length" class="flex flex-wrap gap-1">
-          <UBadge
-            v-for="f in selected"
-            :key="f.id"
-            color="primary"
-            variant="subtle"
-            size="sm"
-            class="cursor-pointer"
-            :title="f.summary"
-            @click="remove(f.id)"
-          >
-            {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
-          </UBadge>
-        </div>
-        <p v-else class="text-[11px] text-slate-500">
-          None — new services start with no service-level fragments.
-        </p>
-      </div>
-    </template>
-  </UModal>
+    <div v-if="selected.length" class="flex flex-wrap gap-1">
+      <UBadge
+        v-for="f in selected"
+        :key="f.id"
+        color="primary"
+        variant="subtle"
+        size="sm"
+        class="cursor-pointer"
+        :title="f.summary"
+        @click="remove(f.id)"
+      >
+        {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+      </UBadge>
+    </div>
+    <p v-else class="text-[11px] text-slate-500">
+      None — new services start with no service-level fragments.
+    </p>
+  </div>
 </template>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-// Workspace settings: the run-timing escalation threshold and the per-service
-// running-task limit policy.
-//   - waitingEscalationMinutes — runs never time out waiting for a human; after this
-//     long their notification escalates yellow → red ("Overdue") in the inbox.
-//   - task limit — cap how many tasks may run concurrently under one service, either
-//     as a single shared bucket across all types or one bucket per task type.
+// Workspace settings — a single tabbed modal that gathers the workspace-wide
+// configuration that used to live in separate windows:
+//   - Workspace: the run-timing escalation threshold + per-service running-task limit.
+//   - Merge thresholds: the auto-merge preset library.
+//   - Issue writeback: the tracker writeback toggles.
+//   - Service best practices: the default fragments new services inherit.
+// The latter three are body-only section components rendered in tabs here (no longer
+// standalone modals).
 import { reactive, ref, watch } from 'vue'
 import type { CreateTaskType, TaskLimitMode } from '~/types/domain'
+import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
+import IssueTrackerWritebackPanel from '~/components/settings/IssueTrackerWritebackPanel.vue'
+import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
 
 const ui = useUiStore()
 const store = useWorkspaceSettingsStore()
@@ -17,6 +22,35 @@ const open = computed({
   set: (v: boolean) => (v ? ui.openWorkspaceSettings() : ui.closeWorkspaceSettings()),
 })
 
+// Which tab is shown — driven by the ui store so other surfaces (command bar,
+// integrations) can deep-link straight to a tab.
+const activeTab = computed({
+  get: () => ui.workspaceSettingsTab,
+  set: (v: string) => ui.setWorkspaceSettingsTab(v),
+})
+
+const tabs = [
+  {
+    value: 'workspace',
+    label: 'Workspace',
+    icon: 'i-lucide-sliders-horizontal',
+    slot: 'workspace',
+  },
+  { value: 'merge', label: 'Merge thresholds', icon: 'i-lucide-git-merge', slot: 'merge' },
+  {
+    value: 'writeback',
+    label: 'Issue writeback',
+    icon: 'i-lucide-message-square-reply',
+    slot: 'writeback',
+  },
+  {
+    value: 'fragments',
+    label: 'Service best practices',
+    icon: 'i-lucide-book-open-check',
+    slot: 'fragments',
+  },
+]
+
 const TASK_TYPES: CreateTaskType[] = ['feature', 'bug', 'document', 'spike']
 const MODES: { value: TaskLimitMode; label: string }[] = [
   { value: 'off', label: 'No limit' },
@@ -78,65 +112,104 @@ async function save() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Workspace settings" :ui="{ content: 'max-w-xl' }">
+  <UModal v-model:open="open" title="Workspace settings" :ui="{ content: 'max-w-3xl' }">
     <template #body>
-      <div class="space-y-6">
-        <!-- Run-timing escalation -->
-        <section class="space-y-2">
-          <h3 class="text-sm font-semibold text-slate-200">Waiting for a human</h3>
-          <p class="text-[11px] text-slate-400">
-            A run parked on a human decision (a review, an approval, a merge) waits as long as it
-            needs — it is never cancelled. After this many minutes its notification turns red and is
-            flagged <span class="text-error-400">Overdue</span> in the inbox.
-          </p>
-          <label class="block w-48">
-            <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-              Escalate after (minutes)
-            </span>
-            <UInput
-              v-model.number="draft.waitingEscalationMinutes"
-              type="number"
-              :min="1"
-              size="sm"
-            />
-          </label>
-        </section>
-
-        <!-- Per-service running-task limit -->
-        <section class="space-y-2">
-          <h3 class="text-sm font-semibold text-slate-200">Running tasks per service</h3>
-          <p class="text-[11px] text-slate-400">
-            Cap how many tasks may run at once under one service. Starting a task over the limit is
-            refused with a clear message until a running task finishes.
-          </p>
-          <label class="block w-64">
-            <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">Mode</span>
-            <USelect v-model="draft.taskLimitMode" :items="MODES" value-key="value" size="sm" />
-          </label>
-
-          <label v-if="draft.taskLimitMode === 'shared'" class="block w-48">
-            <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-              Max running tasks
-            </span>
-            <UInput v-model.number="draft.taskLimitShared" type="number" :min="1" size="sm" />
-          </label>
-
-          <div v-else-if="draft.taskLimitMode === 'per_type'" class="grid grid-cols-2 gap-3">
-            <label v-for="t in TASK_TYPES" :key="t" class="block">
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-                Max {{ t }} tasks
-              </span>
-              <UInput v-model.number="draft.perType[t]" type="number" :min="1" size="sm" />
-            </label>
+      <UTabs
+        v-model="activeTab"
+        :items="tabs"
+        variant="link"
+        :ui="{ root: 'gap-4', list: 'overflow-x-auto' }"
+      >
+        <!-- Workspace -->
+        <template #workspace>
+          <div class="space-y-6">
+            <!-- Run-timing escalation -->
+            <section class="space-y-2">
+              <h3 class="text-sm font-semibold text-slate-200">Waiting for a human</h3>
+              <p class="text-[11px] text-slate-400">
+                A run parked on a human decision (a review, an approval, a merge) waits as long as
+                it needs — it is never cancelled. After this many minutes its notification turns red
+                and is flagged <span class="text-error-400">Overdue</span> in the inbox.
+              </p>
+              <label class="block w-48">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  Escalate after (minutes)
+                </span>
+                <UInput
+                  v-model.number="draft.waitingEscalationMinutes"
+                  type="number"
+                  :min="1"
+                  size="sm"
+                />
+              </label>
+            </section>
+
+            <!-- Per-service running-task limit -->
+            <section class="space-y-2">
+              <h3 class="text-sm font-semibold text-slate-200">Running tasks per service</h3>
+              <p class="text-[11px] text-slate-400">
+                Cap how many tasks may run at once under one service. Starting a task over the limit
+                is refused with a clear message until a running task finishes.
+              </p>
+              <label class="block w-64">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500"
+                  >Mode</span
+                >
+                <USelect
+                  v-model="draft.taskLimitMode"
+                  :items="MODES"
+                  value-key="value"
+                  size="sm"
+                  class="w-full"
+                />
+              </label>
+
+              <label v-if="draft.taskLimitMode === 'shared'" class="block w-48">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  Max running tasks
+                </span>
+                <UInput v-model.number="draft.taskLimitShared" type="number" :min="1" size="sm" />
+              </label>
+
+              <div v-else-if="draft.taskLimitMode === 'per_type'" class="grid grid-cols-2 gap-3">
+                <label v-for="t in TASK_TYPES" :key="t" class="block">
+                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                    Max {{ t }} tasks
+                  </span>
+                  <UInput v-model.number="draft.perType[t]" type="number" :min="1" size="sm" />
+                </label>
+              </div>
+            </section>
+
+            <div class="flex justify-end">
+              <UButton
+                color="primary"
+                icon="i-lucide-save"
+                size="sm"
+                :loading="saving"
+                @click="save"
+              >
+                Save
+              </UButton>
+            </div>
           </div>
-        </section>
-
-        <div class="flex justify-end">
-          <UButton color="primary" icon="i-lucide-save" size="sm" :loading="saving" @click="save">
-            Save
-          </UButton>
-        </div>
-      </div>
+        </template>
+
+        <!-- Merge thresholds -->
+        <template #merge>
+          <MergeThresholdsPanel />
+        </template>
+
+        <!-- Issue writeback -->
+        <template #writeback>
+          <IssueTrackerWritebackPanel />
+        </template>
+
+        <!-- Service best practices -->
+        <template #fragments>
+          <ServiceFragmentDefaultsPanel />
+        </template>
+      </UTabs>
     </template>
   </UModal>
 </template>

package/app/composables/api/releaseHealth.ts

@@ -1,27 +1,28 @@
 import type {
-  DatadogConnectionView,
+  ObservabilityConnectionView,
   ReleaseHealthConfig,
-  UpsertDatadogConnectionInput,
+  UpsertObservabilityConnectionInput,
   UpsertReleaseHealthConfigInput,
 } from '~/types/releaseHealth'
 import type { ApiContext } from './context'
 
-/** Datadog post-release-health: the connection + per-block monitor/SLO mapping. */
+/** Post-release-health: the observability connection + per-block monitor/SLO mapping. */
 export function releaseHealthApi({ http, ws }: ApiContext) {
   return {
-    // ---- Datadog post-release-health settings -----------------------------
-    getDatadogConnection: (workspaceId: string) =>
-      http<DatadogConnectionView>(`${ws(workspaceId)}/datadog/connection`),
+    // ---- Observability connection ------------------------------------------
+    getObservabilityConnection: (workspaceId: string) =>
+      http<ObservabilityConnectionView>(`${ws(workspaceId)}/observability/connection`),
 
-    setDatadogConnection: (workspaceId: string, body: UpsertDatadogConnectionInput) =>
-      http<DatadogConnectionView>(`${ws(workspaceId)}/datadog/connection`, {
+    setObservabilityConnection: (workspaceId: string, body: UpsertObservabilityConnectionInput) =>
+      http<ObservabilityConnectionView>(`${ws(workspaceId)}/observability/connection`, {
         method: 'PUT',
         body,
       }),
 
-    deleteDatadogConnection: (workspaceId: string) =>
-      http(`${ws(workspaceId)}/datadog/connection`, { method: 'DELETE' }),
+    deleteObservabilityConnection: (workspaceId: string) =>
+      http(`${ws(workspaceId)}/observability/connection`, { method: 'DELETE' }),
 
+    // ---- Per-block monitor/SLO config --------------------------------------
     listReleaseHealthConfigs: (workspaceId: string) =>
       http<ReleaseHealthConfig[]>(`${ws(workspaceId)}/release-health-configs`),
 

package/app/pages/index.vue

@@ -25,12 +25,10 @@ import SlackPanel from '~/components/slack/SlackPanel.vue'
 import GitHubOnboarding from '~/components/github/GitHubOnboarding.vue'
 import FragmentLibraryPanel from '~/components/fragments/FragmentLibraryPanel.vue'
 import CommandBar from '~/components/layout/CommandBar.vue'
-import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
-import IssueTrackerWritebackPanel from '~/components/settings/IssueTrackerWritebackPanel.vue'
+import IntegrationsHub from '~/components/layout/IntegrationsHub.vue'
 import WorkspaceSettingsPanel from '~/components/settings/WorkspaceSettingsPanel.vue'
-import DatadogPanel from '~/components/settings/DatadogPanel.vue'
+import ObservabilityConnectionPanel from '~/components/settings/ObservabilityConnectionPanel.vue'
 import ModelConfigurationPanel from '~/components/settings/ModelConfigurationPanel.vue'
-import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
 import LocalModelEndpointsPanel from '~/components/settings/LocalModelEndpointsPanel.vue'
 import OpenRouterCatalogPanel from '~/components/settings/OpenRouterCatalogPanel.vue'
 import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
@@ -118,12 +116,10 @@ watch(
       <SlackPanel />
       <FragmentLibraryPanel />
       <CommandBar />
-      <MergeThresholdsPanel />
-      <IssueTrackerWritebackPanel />
+      <IntegrationsHub />
       <WorkspaceSettingsPanel />
-      <DatadogPanel />
+      <ObservabilityConnectionPanel />
       <ModelConfigurationPanel />
-      <ServiceFragmentDefaultsPanel />
       <LocalModelEndpointsPanel />
       <OpenRouterCatalogPanel />
       <VendorCredentialsModal />

package/app/stores/agents.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { AGENT_ARCHETYPES, AGENT_BY_KIND, uid } from '~/utils/catalog'
-import type { AgentArchetype, AgentKind } from '~/types/domain'
+import type { AgentArchetype, AgentKind, CustomAgentKind } from '~/types/domain'
 
 /**
  * The agent palette. Seeded from the static catalog, but custom agents can be
@@ -36,5 +36,30 @@ export const useAgentsStore = defineStore('agents', () => {
     return archetype
   }
 
-  return { archetypes, get, addAgent }
+  /**
+   * Merge the deployment's registered CUSTOM agent kinds (from the workspace snapshot)
+   * into the palette catalog: each becomes a first-class palette block + a kind-based
+   * lookup (so timelines / inspectors render it instead of the generic fallback), and its
+   * declared `resultView` opens through the same registry the built-ins use. Idempotent
+   * and built-in-safe — a kind already known (a built-in, or a prior load) is left
+   * untouched, so a snapshot can't shadow a built-in or duplicate on reload.
+   */
+  function registerCustomKinds(kinds: CustomAgentKind[]) {
+    for (const { kind, presentation } of kinds) {
+      if (AGENT_BY_KIND[kind]) continue
+      const archetype: AgentArchetype = {
+        kind,
+        label: presentation.label,
+        icon: presentation.icon,
+        color: presentation.color,
+        description: presentation.description,
+        ...(presentation.category ? { category: presentation.category } : {}),
+        ...(presentation.resultView ? { resultView: presentation.resultView } : {}),
+      }
+      AGENT_BY_KIND[kind] = archetype
+      archetypes.value.push(archetype)
+    }
+  }
+
+  return { archetypes, get, addAgent, registerCustomKinds }
 })

package/app/stores/releaseHealth.ts

@@ -1,50 +1,83 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type {
-  DatadogConnectionView,
+  ObservabilityConnectionView,
   ReleaseHealthConfig,
-  UpsertDatadogConnectionInput,
+  UpsertObservabilityConnectionInput,
   UpsertReleaseHealthConfigInput,
 } from '~/types/releaseHealth'
 import { useWorkspaceStore } from '~/stores/workspace'
 
 /**
- * The workspace's Datadog post-release-health settings: the (single) connection — keys
- * are write-only, never read back — and the per-block monitor/SLO mappings the
- * `post-release-health` gate reads. Loaded on demand (the settings panel), not from the
- * snapshot, since the secrets never leave the server.
+ * The workspace's post-release-health settings: the (single) observability connection —
+ * provider + credentials, write-only, never read back — and the per-block monitor/SLO
+ * mappings the `post-release-health` gate reads. Loaded on demand (the observability panel
+ * + the service inspector), not from the snapshot, since the secrets never leave the server.
  */
 export const useReleaseHealthStore = defineStore('releaseHealth', () => {
   const api = useApi()
 
-  const connection = ref<DatadogConnectionView>({ connected: false, site: null })
+  const connection = ref<ObservabilityConnectionView>({
+    connected: false,
+    provider: null,
+    summary: null,
+  })
   const configs = ref<ReleaseHealthConfig[]>([])
   const loading = ref(false)
+  // Mirrors the backend's opt-in gate (`OBSERVABILITY_ENABLED`): `null` until first
+  // probed, then `true`/`false`. The hub + inspector hide their observability entry
+  // points when this is false, so a disabled backend doesn't surface a dead control.
+  const available = ref<boolean | null>(null)
+  let inFlight: Promise<void> | null = null
 
+  /** Force a refresh of the connection + per-block configs (used after a save/remove). */
   async function load() {
     const ws = useWorkspaceStore()
     loading.value = true
     try {
       const [conn, list] = await Promise.all([
-        api.getDatadogConnection(ws.requireId()),
+        api.getObservabilityConnection(ws.requireId()),
         api.listReleaseHealthConfigs(ws.requireId()),
       ])
       connection.value = conn
       configs.value = list
+      available.value = true
+    } catch {
+      // 503 (observability disabled) or any error → hide the UI entry points.
+      available.value = false
+      connection.value = { connected: false, provider: null, summary: null }
+      configs.value = []
     } finally {
       loading.value = false
     }
   }
 
-  async function saveConnection(input: UpsertDatadogConnectionInput) {
+  /**
+   * Load once and share the result: repeated hub opens / frame-inspector mounts reuse
+   * the resolved state (and coalesce a concurrent in-flight request) instead of each
+   * re-fetching the connection + the whole configs list. Use `load()` to force a refresh.
+   */
+  async function ensureLoaded() {
+    if (available.value !== null) return
+    if (!inFlight) inFlight = load().finally(() => (inFlight = null))
+    return inFlight
+  }
+
+  async function saveConnection(input: UpsertObservabilityConnectionInput) {
     const ws = useWorkspaceStore()
-    connection.value = await api.setDatadogConnection(ws.requireId(), input)
+    connection.value = await api.setObservabilityConnection(ws.requireId(), input)
+    available.value = true
   }
 
   async function removeConnection() {
     const ws = useWorkspaceStore()
-    await api.deleteDatadogConnection(ws.requireId())
-    connection.value = { connected: false, site: null }
+    await api.deleteObservabilityConnection(ws.requireId())
+    connection.value = { connected: false, provider: null, summary: null }
+  }
+
+  /** The saved config for a specific block (the service inspector reads this). */
+  function configForBlock(blockId: string): ReleaseHealthConfig | undefined {
+    return configs.value.find((c) => c.blockId === blockId)
   }
 
   async function saveConfig(blockId: string, input: UpsertReleaseHealthConfigInput) {
@@ -66,9 +99,12 @@ export const useReleaseHealthStore = defineStore('releaseHealth', () => {
     connection,
     configs,
     loading,
+    available,
     load,
+    ensureLoaded,
     saveConnection,
     removeConnection,
+    configForBlock,
     saveConfig,
     removeConfig,
   }