feat(dashboard): scaffold SvelteKit SPA for control plane

SvelteKit 2 + Svelte 5 (runes) + TS, built with `adapter-static` into a single SPA bundle that Caddy serves verbatim in production. The dashboard targets only `/api/admin/*` (manager); data-plane invocations go through the orchestrator, not through here. * Vite dev server proxies `/api` and `/healthz` to PICLOUD_API (default `http://127.0.0.1:18080` to match the picloud bind override). Port configurable via PICLOUD_DASHBOARD_PORT. * `src/lib/api.ts` is a thin typed client over the control-plane paths; the scripts placeholder route shows the "load → error → list" shape so the missing-API state is informative, not blank. * SSR disabled at the layout level: the build is a pure SPA, no Node runtime is required at serve time. * `npm run check` and `npm run build` both green; `npm audit` clean (cookie override pins past the SvelteKit transitive advisory that doesn't apply in SPA mode). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 23:28:03 +02:00
parent b8b544816d
commit dca36a30d2
16 changed files with 3758 additions and 0 deletions
--- a/dashboard/.prettierignore
+++ b/dashboard/.prettierignore
@@ -0,0 +1,4 @@
+.svelte-kit
+build
+node_modules
+package-lock.json
--- a/dashboard/.prettierrc
+++ b/dashboard/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -0,0 +1,32 @@
+# PiCloud Dashboard
+
+SvelteKit SPA for the PiCloud control plane.
+
+## Stack
+
+- SvelteKit 2 with `adapter-static` (SPA fallback)
+- Svelte 5 (runes)
+- TypeScript
+- Vite
+
+## Scripts
+
+```sh
+npm install
+npm run dev      # vite dev server on :5173, proxies /api → PICLOUD_API
+npm run build    # static SPA bundle into ./build/
+npm run check    # svelte-check
+npm run lint
+npm run format
+```
+
+By default `npm run dev` proxies `/api/*` and `/healthz` to
+`http://127.0.0.1:18080`. Override with `PICLOUD_API=http://host:port npm run dev`.
+
+## How it fits in
+
+In production Caddy serves the contents of `./build/` as static files and
+falls back to `index.html` for client-side routing. The dashboard only
+talks to the **control plane** (`/api/admin/*` on the manager); data-plane
+invocations go through `/api/execute/*` on the orchestrator and are not
+issued from the dashboard directly during MVP.
--- a/dashboard/eslint.config.js
+++ b/dashboard/eslint.config.js
@@ -0,0 +1,32 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "picloud-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@types/node": "^22.10.5",
+    "@sveltejs/kit": "^2.17.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^15.14.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "svelte": "^5.19.0",
+    "svelte-check": "^4.1.4",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7"
+  },
+  "overrides": {
+    "cookie": "^0.7.2"
+  }
+}
--- a/dashboard/src/app.d.ts
+++ b/dashboard/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app
+
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/dashboard/src/app.html
+++ b/dashboard/src/app.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		<title>PiCloud</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/dashboard/src/lib/api.ts
+++ b/dashboard/src/lib/api.ts
@@ -0,0 +1,45 @@
+// Thin client for the PiCloud control-plane API.
+//
+// All admin/CRUD calls hit `/api/admin/*` (manager). Data-plane calls
+// (script invocations) go to `/api/execute/*` (orchestrator). The
+// dashboard only talks to the control plane — data-plane invocations
+// from the dashboard go through the same path as any external caller.
+
+export interface Script {
+	id: string;
+	name: string;
+	description: string | null;
+	version: number;
+	source: string;
+	timeout_seconds: number;
+	memory_limit_mb: number;
+	created_at: string;
+	updated_at: string;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+	const res = await fetch(path, {
+		...init,
+		headers: { 'content-type': 'application/json', ...(init?.headers ?? {}) }
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(`${res.status} ${res.statusText}: ${body}`);
+	}
+	return res.json() as Promise<T>;
+}
+
+export const api = {
+	health: () => fetch('/healthz').then((r) => r.text()),
+
+	scripts: {
+		list: () => request<Script[]>('/api/admin/scripts'),
+		get: (id: string) => request<Script>(`/api/admin/scripts/${id}`),
+		create: (input: Partial<Script>) =>
+			request<Script>('/api/admin/scripts', { method: 'POST', body: JSON.stringify(input) }),
+		update: (id: string, input: Partial<Script>) =>
+			request<Script>(`/api/admin/scripts/${id}`, { method: 'PUT', body: JSON.stringify(input) }),
+		remove: (id: string) =>
+			request<void>(`/api/admin/scripts/${id}`, { method: 'DELETE' })
+	}
+};
--- a/dashboard/src/routes/+layout.svelte
+++ b/dashboard/src/routes/+layout.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
+<div class="shell">
+	<header>
+		<a href="/" class="brand">PiCloud</a>
+		<nav>
+			<a href="/">Scripts</a>
+		</nav>
+	</header>
+	<main>
+		{@render children?.()}
+	</main>
+</div>
+
+<style>
+	:global(html, body) {
+		margin: 0;
+		font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+		background: #0f172a;
+		color: #e2e8f0;
+	}
+
+	.shell {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	header {
+		display: flex;
+		align-items: center;
+		gap: 2rem;
+		padding: 1rem 2rem;
+		border-bottom: 1px solid #1e293b;
+		background: #0b1220;
+	}
+
+	.brand {
+		font-weight: 700;
+		font-size: 1.125rem;
+		color: #38bdf8;
+		text-decoration: none;
+	}
+
+	nav a {
+		color: #94a3b8;
+		text-decoration: none;
+		font-size: 0.9rem;
+	}
+
+	nav a:hover {
+		color: #e2e8f0;
+	}
+
+	main {
+		flex: 1;
+		padding: 2rem;
+		max-width: 64rem;
+		width: 100%;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>
--- a/dashboard/src/routes/+layout.ts
+++ b/dashboard/src/routes/+layout.ts
@@ -0,0 +1,5 @@
+// SPA build: no server-side rendering. Caddy serves the static bundle
+// in prod; SvelteKit handles routing entirely client-side.
+export const ssr = false;
+export const prerender = false;
+export const trailingSlash = 'never';
--- a/dashboard/src/routes/+page.svelte
+++ b/dashboard/src/routes/+page.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { api, type Script } from '$lib/api';
+
+	let scripts = $state<Script[] | null>(null);
+	let error = $state<string | null>(null);
+	let loading = $state(true);
+
+	async function load() {
+		loading = true;
+		error = null;
+		try {
+			scripts = await api.scripts.list();
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+			scripts = null;
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		void load();
+	});
+</script>
+
+<section>
+	<header class="page-header">
+		<h1>Scripts</h1>
+		<button type="button" disabled>New script</button>
+	</header>
+
+	{#if loading}
+		<p class="muted">Loading…</p>
+	{:else if error}
+		<div class="error">
+			<strong>Could not load scripts.</strong>
+			<p>{error}</p>
+			<p class="hint">
+				This is expected until <code>/api/admin/scripts</code> is implemented on the manager.
+			</p>
+			<button type="button" onclick={() => void load()}>Retry</button>
+		</div>
+	{:else if scripts && scripts.length === 0}
+		<p class="muted">No scripts yet.</p>
+	{:else if scripts}
+		<ul class="list">
+			{#each scripts as script (script.id)}
+				<li>
+					<strong>{script.name}</strong>
+					<span class="muted">v{script.version}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</section>
+
+<style>
+	.page-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 1.5rem;
+	}
+
+	h1 {
+		margin: 0;
+		font-size: 1.5rem;
+	}
+
+	button {
+		background: #38bdf8;
+		color: #0b1220;
+		border: none;
+		padding: 0.5rem 1rem;
+		border-radius: 0.375rem;
+		font-weight: 600;
+		cursor: pointer;
+	}
+
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.muted {
+		color: #64748b;
+	}
+
+	.error {
+		border: 1px solid #b91c1c;
+		background: #450a0a;
+		color: #fecaca;
+		padding: 1rem;
+		border-radius: 0.5rem;
+	}
+
+	.error code {
+		background: rgba(255, 255, 255, 0.1);
+		padding: 0.1rem 0.3rem;
+		border-radius: 0.25rem;
+	}
+
+	.hint {
+		color: #fca5a5;
+		font-size: 0.875rem;
+	}
+
+	.list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.list li {
+		padding: 0.75rem 1rem;
+		background: #1e293b;
+		border-radius: 0.375rem;
+		display: flex;
+		justify-content: space-between;
+	}
+</style>
--- a/dashboard/static/favicon.svg
+++ b/dashboard/static/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+	<rect x="6" y="14" width="52" height="36" rx="6" fill="#0ea5e9" />
+	<rect x="14" y="22" width="36" height="20" rx="3" fill="#fff" opacity="0.95" />
+	<circle cx="32" cy="32" r="4" fill="#0ea5e9" />
+</svg>
--- a/dashboard/svelte.config.js
+++ b/dashboard/svelte.config.js
@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+	kit: {
+		// SPA build: Caddy serves these files in prod, falls back to
+		// index.html for client-side routing. Matches our architecture
+		// — the dashboard is a pure SPA against /api/admin/*.
+		adapter: adapter({
+			fallback: 'index.html',
+			pages: 'build',
+			assets: 'build',
+			precompress: false,
+			strict: false
+		})
+	}
+};
+
+export default config;
--- a/dashboard/tsconfig.json
+++ b/dashboard/tsconfig.json
@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}
--- a/dashboard/vite.config.ts
+++ b/dashboard/vite.config.ts
@@ -0,0 +1,20 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+// Dev-only proxy: in production Caddy fronts both the dashboard and the
+// API. During `vite dev` we proxy the API ourselves so the dashboard can
+// run standalone against a locally-running `picloud` binary.
+const API_TARGET = process.env.PICLOUD_API ?? 'http://127.0.0.1:18080';
+const DEV_PORT = Number(process.env.PICLOUD_DASHBOARD_PORT ?? 5173);
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	server: {
+		port: DEV_PORT,
+		strictPort: true,
+		proxy: {
+			'/api': { target: API_TARGET, changeOrigin: true },
+			'/healthz': { target: API_TARGET, changeOrigin: true }
+		}
+	}
+});