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>
This commit is contained in:
MechaCat02
13
dashboard/src/app.d.ts
vendored
Normal file
13
dashboard/src/app.d.ts
vendored
Normal file
@@ -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 {};
|
||||
14
dashboard/src/app.html
Normal file
14
dashboard/src/app.html
Normal file
@@ -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>
|
||||
45
dashboard/src/lib/api.ts
Normal file
45
dashboard/src/lib/api.ts
Normal file
@@ -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' })
|
||||
}
|
||||
};
|
||||
65
dashboard/src/routes/+layout.svelte
Normal file
65
dashboard/src/routes/+layout.svelte
Normal file
@@ -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>
|
||||
5
dashboard/src/routes/+layout.ts
Normal file
5
dashboard/src/routes/+layout.ts
Normal file
@@ -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';
|
||||
124
dashboard/src/routes/+page.svelte
Normal file
124
dashboard/src/routes/+page.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user