@cat-factory/app 0.9.0 → 0.10.0

package/app/stores/ui.ts

@@ -64,18 +64,22 @@ export const useUiStore = defineStore('ui', () => {
   // Command bar (⌘K) — searchable launcher for every navbar action.
   const commandBarOpen = ref(false)
 
-  // Workspace-settings panels: merge-threshold preset library + per-agent-kind
-  // default model overrides.
-  const mergeThresholdsOpen = ref(false)
-  // Workspace-settings panel: the run-timing escalation threshold + per-service task limit.
+  // Integrations hub: a single modal listing every external system the workspace
+  // can enable/link (GitHub, Slack, document + task sources, Datadog, LLM vendors,
+  // local runners, OpenRouter). Replaces the per-integration navbar buttons; each
+  // row inside it opens that integration's own panel via the handlers below.
+  const integrationsOpen = ref(false)
+
+  // Workspace-settings modal: a single tabbed window gathering the workspace-wide
+  // config (workspace / merge thresholds / issue writeback / service best practices).
+  // `workspaceSettingsTab` lets other surfaces deep-link straight to a tab.
   const workspaceSettingsOpen = ref(false)
-  const datadogOpen = ref(false)
-  // Workspace-settings panel: issue-tracker writeback toggles (comment on PR open,
-  // close linked issue on merge).
-  const issueWritebackOpen = ref(false)
+  const workspaceSettingsTab = ref('workspace')
+  // Observability integration: the post-release-health connection panel (Datadog
+  // today, pluggable). NB: distinct from `observabilityInstanceId` below, which is the
+  // LLM per-call observability panel.
+  const observabilityConnectionOpen = ref(false)
   const modelConfigOpen = ref(false)
-  // Workspace-settings panel: the default service-fragment selection new services inherit.
-  const serviceFragmentDefaultsOpen = ref(false)
   // LLM-vendor subscription credentials (the token pool powering the Claude Code
   // / Codex harnesses).
   const vendorCredentialsOpen = ref(false)
@@ -280,29 +284,27 @@ export const useUiStore = defineStore('ui', () => {
   function toggleCommandBar() {
     commandBarOpen.value = !commandBarOpen.value
   }
-  function openMergeThresholds() {
-    mergeThresholdsOpen.value = true
+  function openIntegrations() {
+    integrationsOpen.value = true
   }
-  function closeMergeThresholds() {
-    mergeThresholdsOpen.value = false
+  function closeIntegrations() {
+    integrationsOpen.value = false
   }
-  function openWorkspaceSettings() {
+  function openWorkspaceSettings(tab = 'workspace') {
+    workspaceSettingsTab.value = tab
     workspaceSettingsOpen.value = true
   }
   function closeWorkspaceSettings() {
     workspaceSettingsOpen.value = false
   }
-  function openIssueWriteback() {
-    issueWritebackOpen.value = true
-  }
-  function closeIssueWriteback() {
-    issueWritebackOpen.value = false
+  function setWorkspaceSettingsTab(tab: string) {
+    workspaceSettingsTab.value = tab
   }
-  function openDatadog() {
-    datadogOpen.value = true
+  function openObservabilityConnection() {
+    observabilityConnectionOpen.value = true
   }
-  function closeDatadog() {
-    datadogOpen.value = false
+  function closeObservabilityConnection() {
+    observabilityConnectionOpen.value = false
   }
   function openModelConfig() {
     modelConfigOpen.value = true
@@ -310,12 +312,6 @@ export const useUiStore = defineStore('ui', () => {
   function closeModelConfig() {
     modelConfigOpen.value = false
   }
-  function openServiceFragmentDefaults() {
-    serviceFragmentDefaultsOpen.value = true
-  }
-  function closeServiceFragmentDefaults() {
-    serviceFragmentDefaultsOpen.value = false
-  }
   function openVendorCredentials() {
     vendorCredentialsOpen.value = true
   }
@@ -376,12 +372,11 @@ export const useUiStore = defineStore('ui', () => {
     slackOpen,
     fragmentLibraryOpen,
     commandBarOpen,
-    mergeThresholdsOpen,
-    issueWritebackOpen,
+    integrationsOpen,
     workspaceSettingsOpen,
-    datadogOpen,
+    workspaceSettingsTab,
+    observabilityConnectionOpen,
     modelConfigOpen,
-    serviceFragmentDefaultsOpen,
     vendorCredentialsOpen,
     localModelsOpen,
     openRouterOpen,
@@ -428,18 +423,15 @@ export const useUiStore = defineStore('ui', () => {
     openCommandBar,
     closeCommandBar,
     toggleCommandBar,
-    openMergeThresholds,
-    closeMergeThresholds,
-    openIssueWriteback,
-    closeIssueWriteback,
+    openIntegrations,
+    closeIntegrations,
     openWorkspaceSettings,
     closeWorkspaceSettings,
-    openDatadog,
-    closeDatadog,
+    setWorkspaceSettingsTab,
+    openObservabilityConnection,
+    closeObservabilityConnection,
     openModelConfig,
     closeModelConfig,
-    openServiceFragmentDefaults,
-    closeServiceFragmentDefaults,
     openVendorCredentials,
     closeVendorCredentials,
     openLocalModels,

package/app/stores/workspace.ts

@@ -14,6 +14,7 @@ import { useModelPresetsStore } from '~/stores/modelPresets'
 import { useServiceFragmentDefaultsStore } from '~/stores/serviceFragmentDefaults'
 import { useRecurringPipelinesStore } from '~/stores/recurringPipelines'
 import { useServicesStore } from '~/stores/services'
+import { useAgentsStore } from '~/stores/agents'
 import { useTrackerStore } from '~/stores/tracker'
 
 /**
@@ -76,6 +77,9 @@ export const useWorkspaceStore = defineStore(
       useRecurringPipelinesStore().hydrate(snapshot.recurringPipelines ?? [])
       useTrackerStore().hydrate(snapshot.trackerSettings)
       useServicesStore().hydrate(snapshot.mounts ?? [], snapshot.serviceCatalog ?? [])
+      // Merge the deployment's registered custom agent kinds into the palette catalog so a
+      // proprietary kind renders as a first-class block + result view (idempotent on reload).
+      useAgentsStore().registerCustomKinds(snapshot.customAgentKinds ?? [])
     }
 
     /** Resolve accounts + boards, then open the right board for the active account. */

package/app/types/domain.ts

@@ -35,7 +35,13 @@ export type BlockStatus =
   | 'pr_ready' // pipeline finished — a PR is open and awaiting merge
   | 'done' // PR merged, implementation complete
 
-/** Kind of architecture building block (drives icon + accent). */
+/**
+ * Kind of architecture building block (drives icon + accent). `external` and
+ * `environment` are no longer user-creatable, but the backend still emits them
+ * (the seed's third-party `external` service, and the environments integration's
+ * `environment` blocks), so they remain part of the union for display parity with
+ * the contracts `blockTypeSchema`.
+ */
 export type BlockType =
   | 'frontend'
   | 'service'
@@ -294,6 +300,26 @@ export interface AgentArchetype {
   resultView?: string
 }
 
+/**
+ * A registered CUSTOM agent kind carried in the workspace snapshot: its id + display
+ * metadata + whether it runs in a container. The SPA merges these into its palette
+ * catalog (`registerCustomKinds`) so a deployment's proprietary kind becomes a
+ * first-class palette block + result view. Mirrors `CustomAgentKind` in
+ * `@cat-factory/contracts`.
+ */
+export interface CustomAgentKind {
+  kind: AgentKind
+  presentation: {
+    label: string
+    icon: string
+    color: string
+    description: string
+    category?: AgentCategory
+    resultView?: string
+  }
+  container: boolean
+}
+
 /** A reusable, linear sequence of agents. */
 export interface Pipeline {
   id: string
@@ -409,6 +435,12 @@ export interface WorkspaceSnapshot {
   serviceCatalog?: Service[]
   /** The workspace's runtime settings (human-wait escalation threshold + task limit). */
   settings?: WorkspaceSettings
+  /**
+   * Registered custom agent kinds (kind + presentation + container flag) a deployment
+   * mixed in. The SPA merges these into its palette catalog so a proprietary kind becomes
+   * a first-class palette block + result view. Absent when none are registered.
+   */
+  customAgentKinds?: CustomAgentKind[]
 }
 
 /** How the per-service running-task limit is bucketed. Mirrors `@cat-factory/contracts`. */

package/app/types/execution.ts

@@ -300,6 +300,12 @@ export interface PipelineStep {
   consensus?: ConsensusStepConfig | null
   /** text the agent produced for this step (when LLM execution is enabled). */
   output?: string
+  /**
+   * Structured JSON a registered CUSTOM kind's agent step returned (the generic
+   * manifest-driven `agent` dispatch). Rendered by the `generic-structured` result view.
+   * Absent for built-in / prose kinds.
+   */
+  custom?: unknown
   /** identifier of the model that produced `output`, for transparency. */
   model?: string
   /** prompt-fragment library ids folded into this step (manual ∪ selector pick). */

package/app/types/releaseHealth.ts

@@ -1,18 +1,26 @@
-// Datadog post-release-health settings shapes, mirroring `@cat-factory/contracts`
-// (release.ts). Per-workspace Datadog connection (keys write-only, never read back) and
-// the per-block monitor/SLO mappings the post-release-health gate reads.
+// Post-release-health (observability) settings shapes, mirroring `@cat-factory/contracts`
+// (release.ts). Per-workspace observability connection (provider + credentials, write-only,
+// never read back) and the per-block monitor/SLO mappings the post-release-health gate reads.
 
-/** What `GET /datadog/connection` returns — never the secret keys. */
-export interface DatadogConnectionView {
+/** Observability vendors a workspace can connect (extensible; Datadog today). */
+export type ObservabilityProviderKind = 'datadog'
+
+/** What `GET /observability/connection` returns — never the secret keys. */
+export interface ObservabilityConnectionView {
   connected: boolean
-  site: string | null
+  provider: ObservabilityProviderKind | null
+  /** Non-secret display fields, e.g. `{ site }` for Datadog. */
+  summary: Record<string, string> | null
 }
 
-/** Set/replace the workspace's Datadog connection. */
-export interface UpsertDatadogConnectionInput {
-  site: string
-  apiKey: string
-  appKey: string
+/** Set/replace the workspace's observability connection. */
+export interface UpsertObservabilityConnectionInput {
+  provider: ObservabilityProviderKind
+  credentials: {
+    site: string
+    apiKey: string
+    appKey: string
+  }
 }
 
 /** A block's monitor/SLO mapping for the post-release-health gate. */

package/app/utils/catalog.spec.ts

@@ -7,6 +7,7 @@ import {
   STATUS_META,
   SYSTEM_AGENT_META,
   agentKindMeta,
+  blockTypeMeta,
   uid,
 } from '~/utils/catalog'
 
@@ -37,6 +38,7 @@ const BLOCK_TYPES: BlockType[] = [
   'queue',
   'integration',
   'external',
+  'environment',
 ]
 const BLOCK_STATUSES: BlockStatus[] = [
   'planned',
@@ -94,6 +96,14 @@ describe('catalog', () => {
     }
   })
 
+  it('blockTypeMeta returns a usable fallback for an unknown block type', () => {
+    expect(blockTypeMeta('totally-made-up' as BlockType)).toMatchObject({
+      label: expect.any(String),
+      icon: expect.any(String),
+      accent: expect.any(String),
+    })
+  })
+
   it('provides metadata for every block status', () => {
     for (const s of BLOCK_STATUSES) {
       expect(STATUS_META[s]).toMatchObject({

package/app/utils/catalog.ts

@@ -384,8 +384,10 @@ export function agentKindMeta(kind: string): AgentArchetype {
   )
 }
 
+type BlockTypeMeta = { label: string; icon: string; accent: string }
+
 /** Visual metadata for each architecture block type. */
-export const BLOCK_TYPE_META: Record<BlockType, { label: string; icon: string; accent: string }> = {
+export const BLOCK_TYPE_META: Record<BlockType, BlockTypeMeta> = {
   frontend: { label: 'Frontend', icon: 'i-lucide-monitor', accent: '#60a5fa' },
   service: { label: 'Service', icon: 'i-lucide-server', accent: '#a78bfa' },
   api: { label: 'API', icon: 'i-lucide-route', accent: '#22d3ee' },
@@ -396,12 +398,24 @@ export const BLOCK_TYPE_META: Record<BlockType, { label: string; icon: string; a
     icon: 'i-lucide-workflow',
     accent: '#fb923c',
   },
+  // Not user-creatable, but still emitted by the backend (the seeded third-party
+  // service and the environments integration), so they need display metadata.
   external: { label: 'External', icon: 'i-lucide-globe', accent: '#94a3b8' },
-  environment: {
-    label: 'Environment',
-    icon: 'i-lucide-container',
-    accent: '#2dd4bf',
-  },
+  environment: { label: 'Environment', icon: 'i-lucide-box', accent: '#2dd4bf' },
+}
+
+const FALLBACK_BLOCK_TYPE_META: BlockTypeMeta = {
+  label: 'Block',
+  icon: 'i-lucide-box',
+  accent: '#94a3b8',
+}
+
+/**
+ * Visual metadata for a block type, with a safe fallback for any unknown/legacy
+ * type so the board never crashes on a type the backend introduces ahead of the SPA.
+ */
+export function blockTypeMeta(type: BlockType): BlockTypeMeta {
+  return BLOCK_TYPE_META[type] ?? FALLBACK_BLOCK_TYPE_META
 }
 
 /** Color + iconography for each block status. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.9.0",
+  "version": "0.10.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",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "happy-dom": "^15.11.7",
+    "happy-dom": "^20.10.6",
     "nuxt": "^4.4.8",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",