@cat-factory/app 0.6.0

package/nuxt.config.ts

@@ -0,0 +1,55 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// This is a Nuxt *layer*: a consuming app `extends` it. Config file paths must
+// resolve against THIS layer's directory, not the consumer's — `~`/`@` rebind to
+// the consumer's srcDir, so an asset referenced as `~/assets/...` would be looked
+// up in the consumer. Use an absolute path anchored here instead.
+const layerDir = dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtConfig({
+  compatibilityDate: '2025-06-01',
+  devtools: { enabled: true },
+
+  // Render as a pure client-side SPA that talks to the cat-factory backend.
+  ssr: false,
+
+  runtimeConfig: {
+    public: {
+      // Base URL of the cat-factory worker API. Defaults to the local wrangler
+      // dev server; override per-environment with NUXT_PUBLIC_API_BASE.
+      apiBase: 'http://localhost:8787',
+    },
+  },
+
+  modules: ['@nuxt/ui', '@pinia/nuxt', 'pinia-plugin-persistedstate/nuxt'],
+
+  // This is a Nuxt *layer*. @pinia/nuxt's default `storesDirs` is an ABSOLUTE path
+  // resolved against the CONSUMER's srcDir, so when this layer is `extends`ed it
+  // resolves every layer to the consumer's (empty) `stores/` and never scans this
+  // layer's own stores — every `use*Store` then fails as "not defined" at boot. A
+  // RELATIVE entry is re-resolved against each layer's app dir
+  // (`resolve(layer.app, 'stores')`), so the layer's stores auto-import in any
+  // consumer (and a consumer can still add its own `stores/`). See @pinia/nuxt
+  // module.mjs.
+  pinia: {
+    storesDirs: ['stores'],
+  },
+
+  css: [
+    '@vue-flow/core/dist/style.css',
+    '@vue-flow/core/dist/theme-default.css',
+    '@vue-flow/controls/dist/style.css',
+    '@vue-flow/minimap/dist/style.css',
+    '@vue-flow/node-resizer/dist/style.css',
+    join(layerDir, 'app/assets/css/main.css'),
+  ],
+
+  app: {
+    head: {
+      title: 'Agent Architecture Board',
+      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    },
+  },
+})

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@cat-factory/app",
+  "version": "0.6.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.",
+  "files": [
+    "app",
+    "nuxt.config.ts"
+  ],
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nuxt/ui": "^4.9.0",
+    "@pinia/nuxt": "^0.11.3",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.2",
+    "@vue-flow/minimap": "^1.5.4",
+    "@vue-flow/node-resizer": "^1.5.1",
+    "@vueuse/core": "^14.3.0",
+    "markdown-it": "^14.2.0",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.38"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "happy-dom": "^15.11.7",
+    "nuxt": "^4.4.8",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^3.3.5"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.4.8"
+  },
+  "scripts": {
+    "postinstall": "nuxt prepare",
+    "typecheck": "nuxt typecheck",
+    "test": "vitest",
+    "test:run": "vitest run"
+  }
+}