feat: convert OpenBuilt's own shell to a manifest-driven Tier-4 app

OpenBuilt now eats its own dog food: instead of a hand-rolled NcContent +
MainMenu.vue + vue-router shell, it declares src/manifest.json and mounts
@conduction/nextcloud-vue's CnAppRoot — the same renderer it drives for
the virtual apps it builds (ADR-024).

- src/manifest.json: menu (Dashboard / Virtual apps / Schemas / Exports /
  Documentation) + pages. OpenBuilt's pages are tooling UIs, not generic
  register CRUD, so each is type:"custom" and resolves a view via
  customComponents — Dashboard, the virtual-app manager (list + detail +
  Editor/History/Diff tabs), the schema designer (/builder/:slug/schemas
  + a paramless /schemas shortcut defaulting to the hello-world seed), the
  export-jobs list, and the BuilderHost virtual-app host. dependencies:
  ["openregister"] drives CnAppRoot's dependency-check phase (the old
  "OpenRegister is required" empty state moves to the #dependency-missing
  slot).
- src/customComponents.js: the registry mapping the five custom pages to
  src/views/*.vue.
- src/App.vue: thin CnAppRoot wrapper (manifest / customComponents /
  pageTypes / translate / permissions) — no more bespoke chrome.
- src/main.js: builds the vue-router config from manifest.pages
  (routesFromManifest), registerIcons() / registerTranslations(),
  fire-and-forget loadTranslations, mounts App.vue. Deletes
  src/router/index.js and src/navigation/MainMenu.vue.
- SchemaDesigner.appSlug now falls back to 'hello-world' for the paramless
  /schemas shortcut.
- tests/vitest/manifest.spec.js: structural manifest checks (menu→page,
  custom-page→customComponent, no dead registry entries). Stub extended
  with the manifest-renderer family. 84 Vitest tests pass.

Verified in the dev container: /apps/openbuilt/, /applications, /schemas,
/exports all render through CnPageRenderer with the manifest-driven
CnAppNav. Supersedes the competing editor shells in #4/#8 (their
PageDesigner / templates-gallery become customComponents in a follow-up).

Author: rubenvdlinde

src/App.vue

@@ -1,7 +1,23 @@
 <!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+ OpenBuilt app shell. Mounts CnAppRoot with the bundled manifest and the
+ customComponents registry; CnAppRoot handles the OpenRegister dependency
+ check, renders CnAppNav from manifest.menu, and routes <router-view> pages
+ through CnPageRenderer. The #dependency-missing slot keeps OpenBuilt's
+ original "OpenRegister is required" empty state.
+
+ @adr ADR-024 (app manifest) — OpenBuilt is now Tier-1+ (its own shell is
+ manifest-driven, like the virtual apps it builds).
+-->
 <template>
-	<NcContent app-name="openbuilt">
-		<template v-if="storesReady && !hasOpenRegisters">
+	<CnAppRoot
+		app-id="openbuilt"
+		:manifest="manifest"
+		:custom-components="customComponents"
+		:page-types="pageTypes"
+		:translate="translateForApp"
+		:permissions="permissions">
+		<template #dependency-missing>
 			<NcAppContent class="open-register-missing">
 				<NcEmptyContent
 					:name="t('openbuilt', 'OpenRegister is required')"
@@ -23,64 +39,135 @@
 				</NcEmptyContent>
 			</NcAppContent>
 		</template>
-		<template v-else-if="storesReady && hasOpenRegisters">
-			<MainMenu />
-			<NcAppContent>
-				<router-view />
-			</NcAppContent>
-		</template>
-		<NcAppContent v-else>
-			<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
-				<NcLoadingIcon :size="64" />
-			</div>
-		</NcAppContent>
-	</NcContent>
+	</CnAppRoot>
 </template>
 
 <script>
-import { NcButton, NcContent, NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { translate as ncT } from '@nextcloud/l10n'
 import { generateUrl, imagePath } from '@nextcloud/router'
+import { CnAppRoot } from '@conduction/nextcloud-vue'
+import { NcAppContent, NcButton, NcEmptyContent } from '@nextcloud/vue'
 import { initializeStores } from './store/store.js'
 import { useSettingsStore } from './store/modules/settings.js'
-import MainMenu from './navigation/MainMenu.vue'
 
 export default {
 	name: 'App',
+
 	components: {
-		NcButton,
-		NcContent,
+		CnAppRoot,
 		NcAppContent,
+		NcButton,
 		NcEmptyContent,
-		NcLoadingIcon,
-		MainMenu,
 	},
 
-	data() {
-		return {
-			storesReady: false,
-		}
+	props: {
+		/**
+		 * Bundled app manifest — passed from main.js. CnAppRoot reads
+		 * `manifest.dependencies` for the dependency-check phase and
+		 * `manifest.menu` for CnAppNav.
+		 *
+		 * @type {object}
+		 */
+		manifest: {
+			type: Object,
+			required: true,
+		},
+		/**
+		 * Registry of consumer-injected components used by `type: "custom"`
+		 * pages (`page.component`) and other manifest slot overrides.
+		 *
+		 * @type {object}
+		 */
+		customComponents: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * Page-type registry — `{ index, detail, dashboard, custom, ... }`.
+		 * Wired through to descendant CnPageRenderer instances.
+		 *
+		 * @type {?object}
+		 */
+		pageTypes: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	computed: {
-		hasOpenRegisters() {
-			const settingsStore = useSettingsStore()
-			return settingsStore.hasOpenRegisters
+		/**
+		 * The current user's Nextcloud permission flags, passed to CnAppNav.
+		 *
+		 * @return {Array} Permission identifiers (empty when unavailable).
+		 */
+		permissions() {
+			return window.OC?.currentUser?.permissions ?? []
 		},
+
+		/**
+		 * Whether the current user is a Nextcloud admin — gates the
+		 * "Install OpenRegister" button in the dependency-missing slot.
+		 *
+		 * @return {boolean} True for admins.
+		 */
 		isAdmin() {
-			const settingsStore = useSettingsStore()
-			return settingsStore.getIsAdmin
+			try {
+				return useSettingsStore().getIsAdmin === true
+			} catch (e) {
+				return typeof window.OC?.isUserAdmin === 'function' ? window.OC.isUserAdmin() : false
+			}
 		},
+
+		/**
+		 * Path to the white-on-transparent app icon for the empty state.
+		 *
+		 * @return {string} Image path.
+		 */
 		appIcon() {
 			return imagePath('openbuilt', 'app-dark.svg')
 		},
+
+		/**
+		 * Deep link to OpenRegister's app-store entry.
+		 *
+		 * @return {string} Settings URL.
+		 */
 		appStoreUrl() {
 			return generateUrl('/settings/apps/integration/openregister')
 		},
 	},
 
 	async created() {
-		await initializeStores()
-		this.storesReady = true
+		// Pinia stores still come up so the legacy views (settings store,
+		// schema designer, etc.) keep working. CnAppRoot doesn't depend on
+		// them. main.js also awaits this before $mount — idempotent.
+		try {
+			await initializeStores()
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.error('openbuilt: initializeStores() failed', e)
+		}
+	},
+
+	methods: {
+		/**
+		 * Translate function handed to CnAppRoot / CnAppNav / CnPageRenderer.
+		 * Closes over Nextcloud's translate so the lib never needs the app id.
+		 *
+		 * @param {string} key Translation key.
+		 * @return {string} Translated string (or the key on miss).
+		 */
+		translateForApp(key) {
+			return ncT('openbuilt', key)
+		},
 	},
 }
 </script>
+
+<style scoped>
+.open-register-missing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>

src/customComponents.js

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: EUPL-1.2
+//
+// Custom-component registry for OpenBuilt's manifest-driven app shell.
+//
+// OpenBuilt's own pages are tooling UIs (a dashboard, the virtual-app
+// manager, the schema designer, the export-jobs list, the virtual-app
+// host) rather than generic register CRUD, so every page declares
+// `type: "custom"` in src/manifest.json and resolves its view here.
+// Keep this file SHORT — adding entries should be a deliberate decision;
+// removing them (by moving a page onto a built-in manifest type) is the
+// right direction.
+//
+// Resolution order at runtime (CnPageRenderer):
+//   1. Built-in page types          (CnIndexPage, CnDetailPage, …)
+//   2. Built-in widget types        (version-info, register-mapping, …)
+//   3. customComponents (this file) ← consumer-injected components
+//
+// See ADR-024 (app manifest) and docs/migrating-to-manifest.md in
+// @conduction/nextcloud-vue.
+
+import DashboardView from './views/Dashboard.vue'
+import ApplicationsView from './views/ApplicationEditor.vue'
+import SchemaDesignerView from './views/SchemaDesigner.vue'
+import ExportJobsView from './views/ExportJobsList.vue'
+import BuilderHostView from './views/BuilderHost.vue'
+
+export default {
+	// Starter dashboard — sample KPIs / activity placeholders.
+	DashboardView,
+	// Virtual-app manager — list + detail + Editor/History/Diff tabs,
+	// raw-JSON manifest editor, publish, RBAC permissions modal, export.
+	ApplicationsView,
+	// Visual schema designer for a virtual app's register
+	// (/builder/:slug/schemas[/:schemaId] and the paramless /schemas
+	// shortcut, which defaults to the hello-world seed app).
+	SchemaDesignerView,
+	// Export-jobs list — status of Phase-2 "export to real app" runs.
+	ExportJobsView,
+	// Virtual-app host — mounts a nested CnAppRoot rendering the virtual
+	// app's manifest from GET /api/applications/{slug}/manifest.
+	BuilderHostView,
+}

src/main.js

@@ -1,27 +1,44 @@
 // SPDX-License-Identifier: EUPL-1.2
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import { PiniaVuePlugin } from 'pinia'
 import { translate as t, translatePlural as n, loadTranslations } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import {
+	CnPageRenderer,
+	defaultPageTypes,
+	registerIcons,
+	registerTranslations,
+} from '@conduction/nextcloud-vue'
 import pinia from './pinia.js'
-import router from './router/index.js'
 import App from './App.vue'
-import { initializeStores } from './store/store.js'
+import bundledManifest from './manifest.json'
+import customComponents from './customComponents.js'
 
-// Library CSS — must be explicit import (webpack tree-shakes side-effect imports from aliased packages)
+// Library CSS — must be an explicit import (webpack tree-shakes side-effect imports from aliased packages).
 import '@conduction/nextcloud-vue/css/index.css'
 
-// Global (unscoped) app styles
+// Global (unscoped) app styles.
 import './assets/app.css'
 
 Vue.mixin({ methods: { t, n } })
 Vue.use(PiniaVuePlugin)
+Vue.use(VueRouter)
+
+// Library-side icon set + lib translations (best effort).
+registerIcons()
+try {
+	registerTranslations()
+} catch (e) {
+	// eslint-disable-next-line no-console
+	console.warn('[openbuilt] registerTranslations failed; lib strings fall back to English source', e)
+}
 
 // Fire-and-forget translation load. `@nextcloud/l10n`'s loadTranslations()
-// fetches l10n/<locale>.json (e.g. en_US.json) and the returned promise
-// rejects on a 404. The app ships en.json / en_US.json / nl.json; any other
-// locale just falls back to the English source strings. Boot MUST NOT depend
-// on this resolving — chaining $mount inside loadTranslations meant the whole
-// app silently failed to render whenever the locale bundle was missing.
+// fetches l10n/<locale>.json and the returned promise rejects on a 404
+// (and on dev installs that rewrite non-allowlisted paths to index.php it
+// always 404s). Boot MUST NOT depend on this resolving — strings just fall
+// back to their source on miss.
 function tryLoadTranslations() {
 	try {
 		const result = loadTranslations('openbuilt', () => {})
@@ -33,18 +50,68 @@ function tryLoadTranslations() {
 	}
 }
 
-tryLoadTranslations()
+// Shallow-clone CnPageRenderer because the lib's barrel exports are
+// non-extensible ESM module records; Vue 2's Vue.extend() attaches an
+// internal `_Ctor` cache to the component definition, which throws
+// "Cannot add property _Ctor, object is not extensible" against a frozen
+// source. Cloning gives vue-router an extensible options object.
+const RoutePageRenderer = { ...CnPageRenderer }
 
-// Create the Vue instance, activate Pinia, mount, then initialise stores.
-const app = new Vue({
-	pinia,
-	router,
-	render: h => h(App),
+/**
+ * Build the vue-router config from the manifest. Each manifest page becomes
+ * one route whose `name` IS `page.id` (the lib's manifest contract — menu
+ * entries reference pages by id, and CnPageRenderer matches by route name).
+ * Routes whose path declares a `:` parameter get `props: true` so route
+ * params reach the rendered page.
+ *
+ * Page order in the manifest matters: more specific routes
+ * (`/builder/:slug/schemas`, `/builder/:slug/schemas/:schemaId`) are
+ * declared before the `/builder/:slug/:pathMatch(.*)?` wildcard so
+ * vue-router matches them first.
+ *
+ * @param {object} manifest The bundled manifest (with `pages[]`).
+ * @return {Array<object>} vue-router 3 routes config.
+ */
+function routesFromManifest(manifest) {
+	const routes = manifest.pages.map((page) => ({
+		name: page.id,
+		path: page.route,
+		component: RoutePageRenderer,
+		props: page.route.includes(':'),
+	}))
+	// Catch-all redirect to the dashboard.
+	routes.push({ path: '*', redirect: '/' })
+	return routes
+}
+
+const router = new VueRouter({
+	mode: 'history',
+	base: generateUrl('/apps/openbuilt'),
+	routes: routesFromManifest(bundledManifest),
 })
 
-// Mount immediately so the App renders (NC32 needs #content to be taken over).
-app.$mount('#content')
+tryLoadTranslations()
+
+// Pass shallow copies of the registry maps — the lib exports
+// `defaultPageTypes` (and consumers' `customComponents`) as frozen module
+// objects in some bundle shapes, and Vue.extend() mutates component
+// definitions to attach `_Ctor`. Cloning yields extensible objects without
+// changing the values the lib resolves at render time.
+const pageTypesProp = { ...defaultPageTypes }
+const customComponentsProp = { ...customComponents }
 
-// Initialise stores after mount. (App.vue also calls this in created() — it is
-// idempotent, so the two calls are safe; this one keeps the contract explicit.)
-initializeStores()
+// Create the Vue instance — this installs Pinia and sets it active, so the
+// Pinia stores are usable from App.vue's created() hook. App.vue runs
+// initializeStores() there (idempotent). Mount immediately so the App
+// renders (NC32 needs #content to be taken over).
+new Vue({
+	pinia,
+	router,
+	render: h => h(App, {
+		props: {
+			manifest: bundledManifest,
+			customComponents: customComponentsProp,
+			pageTypes: pageTypesProp,
+		},
+	}),
+}).$mount('#content')

src/manifest.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest.schema.json",
+	"version": "1.0.0",
+	"dependencies": ["openregister"],
+	"menu": [
+		{ "id": "Dashboard", "label": "Dashboard", "icon": "icon-category-dashboard", "route": "Dashboard", "order": 10 },
+		{ "id": "VirtualApps", "label": "Virtual apps", "icon": "icon-category-app-bundles", "route": "VirtualApps", "order": 20 },
+		{ "id": "Schemas", "label": "Schemas", "icon": "icon-category-customization", "route": "Schemas", "order": 30 },
+		{ "id": "Exports", "label": "Exports", "icon": "icon-download", "route": "Exports", "order": 40 },
+		{ "id": "Documentation", "label": "Documentation", "icon": "icon-info", "href": "https://github.com/ConductionNL/openbuilt", "section": "settings", "order": 90 }
+	],
+	"pages": [
+		{ "id": "Dashboard", "route": "/", "type": "custom", "title": "Dashboard", "component": "DashboardView" },
+		{ "id": "VirtualApps", "route": "/applications", "type": "custom", "title": "Virtual apps", "component": "ApplicationsView" },
+		{ "id": "Schemas", "route": "/schemas", "type": "custom", "title": "Schemas", "component": "SchemaDesignerView" },
+		{ "id": "SchemaDesignerList", "route": "/builder/:slug/schemas", "type": "custom", "title": "Schemas", "component": "SchemaDesignerView" },
+		{ "id": "SchemaDesigner", "route": "/builder/:slug/schemas/:schemaId", "type": "custom", "title": "Schema", "component": "SchemaDesignerView" },
+		{ "id": "Exports", "route": "/exports", "type": "custom", "title": "Exports", "component": "ExportJobsView" },
+		{ "id": "BuilderHost", "route": "/builder/:slug/:pathMatch(.*)?", "type": "custom", "title": "Virtual app", "component": "BuilderHostView" }
+	]
+}