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
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