update UI and support multi release

.gitignore

@@ -23,4 +23,60 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
-.envrc
+.envrc
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Diagnostic reports
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage reports
+coverage/
+*.lcov
+
+# Build output
+dist/
+out/
+tmp/
+temp/
+
+# Dependency directories
+bower_components/
+jspm_packages/
+
+# Compiled source
+*.class
+*.dll
+*.exe
+*.o
+*.so
+*.pyc
+*.pyo
+*.pyd
+__pycache__/
+
+# Package files
+*.tgz
+*.zip
+
+# IDE and editor folders
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Environment files
+.env.local
+docs/DEVELOPER.md
+static/merge-crds.py

README.md

@@ -1,5 +1,100 @@
-# EDA Resource Browser
+# EDA Resource Browser - Visual Architecture
 
-## Generating
+## System Overview
 
-Requires `yq` and `kubectl`.
+Resource Browser is a compact SvelteKit application that reads CRD manifests stored in the repo (under `static/resources/<release>/...`) and exposes:
+
+- A release-aware resource browser and search index
+- Per-resource pages showing YAML and OpenAPI-style schema details
+- Lightweight version comparison and diff views
+
+The app is built with SvelteKit + Vite and can be deployed as a static site (for example, Cloudflare Pages).
+
+<!-- prettier-ignore -->
+# 🚀 EDA Resource Browser
+
+A compact, fast web UI for exploring Nokia EDA Custom Resource Definitions (CRDs) and release manifests.
+
+Clean, focused features:
+
+- 🔎 Search and browse CRDs by release
+- 📄 View YAML and OpenAPI-style schemas for each resource
+- 🔁 Compare versions across releases and inspect diffs
+
+Quick start
+
+1. Install dependencies:
+
+```bash
+pnpm install
+```
+
+2. Run the development server (hot-reload):
+
+```bash
+pnpm run dev
+```
+
+3. Build for production:
+
+```bash
+pnpm run prepare
+pnpm run build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm run preview
+```
+
+Notes and tips
+
+- Demo data: sample CRD manifests are placed under `static/resources/<release>/...` — the app reads these for the release browser.
+- CI tip: if `pnpm install` in CI errors with a frozen-lockfile mismatch, regenerate the lockfile locally with:
+
+```bash
+pnpm install --no-frozen-lockfile
+git add pnpm-lock.yaml
+git commit -m "chore: update pnpm-lock.yaml"
+```
+
+Developer notes
+
+- Built with SvelteKit + Vite and styled with TailwindCSS. Routes expose a home listing and per-resource detail pages.
+- Keep changes small and UI-focused. If you add a new release, drop its manifest under `static/resources/<release>/manifest.json`.
+
+Contributing
+
+- Open issues and PRs welcome. Please include a short description and screenshots where helpful.
+
+### Performance notes
+
+We changed the hero/background handling to improve LCP:
+
+- The primary hero is now an inline <img> (via a <picture> element) inserted early in the layout for accurate LCP measurement and preloading control. The CSS now uses gradients only; the image sits behind the page content.
+- Fonts: we prefer WOFF2 for smaller payloads and preloaded critical hero fonts. If you need to generate WOFF2 assets from the existing TTF fonts in `/static/fonts`, run:
+
+````bash
+pnpm install -D ttf2woff2
+pnpm run generate:woff2
+
+Note: `ttf2woff2` reads from stdin and writes a compressed WOFF2 to stdout. The `generate:woff2` script wraps this in a loop and pipes each TTF into the converter. If you prefer a one-off command, you can run:
+
+```bash
+npx ttf2woff2 < static/fonts/NokiaPureText_Rg.ttf > static/fonts/NokiaPureText_Rg.woff2
+````
+
+Or to convert all TTFs at once using a shell loop (same as the script):
+
+```bash
+for f in static/fonts/*.ttf; do npx ttf2woff2 < "$f" > "${f%.ttf}.woff2"; done
+```
+
+```
+
+That converts TTF files in `static/fonts` to WOFF2. After that, update the `app.html` preloads if you change filenames.
+
+
+
+```

e2e/demo.test.ts

@@ -4,3 +4,9 @@ test('home page has expected h1', async ({ page }) => {
 	await page.goto('/');
 	await expect(page.locator('h1')).toBeVisible();
 });
+
+test('LCP background image should be preloaded and have high priority', async ({ page }) => {
+	await page.goto('/');
+	const img = page.locator('#main-scroll picture img[fetchpriority="high"]');
+	await expect(img).toHaveCount(1);
+});

ecosystem.config.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+	apps: [
+		{
+			name: 'resource-browser',
+			// use pnpm if pnpm is installed; fallback to npm would be explicit
+			script: 'pnpm',
+			args: 'run dev -- --host 0.0.0.0',
+			// Do not specify an interpreter; allow PM2 to execute `pnpm` directly
+			// interpreter: 'bash',
+			env: {
+				NODE_ENV: 'development'
+			},
+			watch: false,
+			autorestart: true,
+			restart_delay: 5000,
+			max_restarts: 10,
+			error_file: './logs/pm2-error.log',
+			out_file: './logs/pm2-out.log',
+			log_date_format: 'YYYY-MM-DD HH:mm Z'
+		}
+	]
+};

ecosystem.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+	apps: [
+		{
+			name: 'resource-browser',
+			script: 'pnpm',
+			args: 'run dev -- --host 0.0.0.0',
+			// Ensure this matches where the repo is checked out on the host
+			cwd: '/home/noksysadm/work/resource-browser',
+			// Leave interpreter unset so PM2 executes the 'pnpm' binary directly
+			// interpreter: 'bash',
+			env: {
+				NODE_ENV: 'development'
+			},
+			watch: false,
+			autorestart: true,
+			restart_delay: 5000,
+			max_restarts: 10,
+			error_file: '/home/noksysadm/work/resource-browser/logs/pm2-error.log',
+			out_file: '/home/noksysadm/work/resource-browser/logs/pm2-out.log',
+			log_date_format: 'YYYY-MM-DD HH:mm Z'
+		}
+	]
+};

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "resource-browser",
 	"private": true,
-	"version": "0.0.1",
+	"version": "1.0.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
@@ -16,6 +16,9 @@
 		"test": "npm run test:unit -- --run && npm run test:e2e",
 		"test:e2e": "playwright test"
 	},
+	"dependencies": {
+		"ajv": "^8.17.1"
+	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",