feat(manager-core,orchestrator-core): multi-app scoping (Phase 3b)
Apps become the isolation boundary for scripts, routes, domains, and
later data. Doing this now — while the surface is small — avoids
several migrations on populated tables once v1.1 data-plane services
ship.
Schema (migration 0005_apps.sql):
- New tables: apps, app_domains (with shape_key UNIQUE for collision
detection), app_slug_history (for permanent slug-rename redirects).
- app_id added to scripts, routes, execution_logs (non-null, cascading
rules per row).
- Script-name uniqueness becomes per-app; the route unique index is
swapped for an app-scoped version.
- The "default" app is seeded unconditionally with a localhost claim;
existing scripts/routes backfill into it. Fresh installs additionally
get the Hello World seed via seed_hello_world_if_fresh after
migrations run (idempotent — only fires when the default app has no
scripts).
Orchestrator dispatch is two-phase: AppDomainTable resolves Host →
app_id (most-specific match wins, exact beats wildcard), then the
existing route matcher runs against that app's partitioned slice via
RouteTable. Unknown hosts return 404 at the app layer with a clear
message; /api/v1/execute/{id} still works as the implicit
__internal__ claim, decoupled from any public domain.
Manager API: full CRUD for /api/v1/admin/apps/* and
/api/v1/admin/apps/{id_or_slug}/domains/*, with slug:check + force
takeover semantics implementing the rename-history flow (two-step
check → confirm, never a single endpoint). Script create requires
app_id; list accepts ?app= filter. Route create validates host
against the parent app's claims; conflict detection stays strictly
intra-app.
Dashboard: /admin/apps and /admin/apps/{slug} (overview + scripts +
domains + settings tabs, with slug-history-aware redirects). Root
path redirects to the apps list. Script detail page gains an app
breadcrumb and threads app_id into the route preview.
Deferred per design: per-app admin roles. The require_admin middleware
remains the seam where role checks will slot in later.
Blueprint §11.5 and roadmap updated to reflect what shipped; docs/
versioning.md notes the schema 3 → 5 bump.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
653
dashboard/src/routes/apps/[slug]/+page.svelte
Normal file
653
dashboard/src/routes/apps/[slug]/+page.svelte
Normal file
@@ -0,0 +1,653 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import {
|
||||
api,
|
||||
ApiError,
|
||||
type App,
|
||||
type AppDomain,
|
||||
type Script
|
||||
} from '$lib/api';
|
||||
import CodeEditor from '$lib/CodeEditor.svelte';
|
||||
|
||||
const SAMPLE_SOURCE =
|
||||
'#{\n statusCode: 200,\n body: #{ ok: true, echo: ctx.request.body }\n}';
|
||||
|
||||
type Tab = 'scripts' | 'domains' | 'settings';
|
||||
|
||||
let slug = $derived(page.params.slug ?? '');
|
||||
let app = $state<App | null>(null);
|
||||
let loadError = $state<string | null>(null);
|
||||
let loading = $state(true);
|
||||
let activeTab = $state<Tab>('scripts');
|
||||
|
||||
let scripts = $state<Script[]>([]);
|
||||
let domains = $state<AppDomain[]>([]);
|
||||
|
||||
// Script create
|
||||
let showCreateScript = $state(false);
|
||||
let createScriptName = $state('');
|
||||
let createScriptDescription = $state('');
|
||||
let createScriptSource = $state(SAMPLE_SOURCE);
|
||||
let creatingScript = $state(false);
|
||||
let createScriptError = $state<string | null>(null);
|
||||
|
||||
// Domain create
|
||||
let createDomainPattern = $state('');
|
||||
let creatingDomain = $state(false);
|
||||
let createDomainError = $state<string | null>(null);
|
||||
|
||||
// Settings
|
||||
let editName = $state('');
|
||||
let editDescription = $state('');
|
||||
let editSlug = $state('');
|
||||
let savingSettings = $state(false);
|
||||
let settingsError = $state<string | null>(null);
|
||||
let slugTakeoverNeeded = $state<App | null>(null);
|
||||
|
||||
async function loadApp() {
|
||||
loading = true;
|
||||
loadError = null;
|
||||
try {
|
||||
const fetched = await api.apps.get(slug);
|
||||
if (fetched.redirect_to && fetched.redirect_to !== slug) {
|
||||
await goto(`${base}/apps/${fetched.redirect_to}`, { replaceState: true });
|
||||
return;
|
||||
}
|
||||
app = {
|
||||
id: fetched.id,
|
||||
slug: fetched.slug,
|
||||
name: fetched.name,
|
||||
description: fetched.description,
|
||||
created_at: fetched.created_at,
|
||||
updated_at: fetched.updated_at
|
||||
};
|
||||
editName = app.name;
|
||||
editDescription = app.description ?? '';
|
||||
editSlug = app.slug;
|
||||
await Promise.all([loadScripts(app.id), loadDomains(app.id)]);
|
||||
} catch (e) {
|
||||
loadError = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadScripts(appId: string) {
|
||||
try {
|
||||
scripts = await api.scripts.list({ app: appId });
|
||||
} catch (e) {
|
||||
scripts = [];
|
||||
loadError = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDomains(appId: string) {
|
||||
try {
|
||||
domains = await api.domains.listForApp(appId);
|
||||
} catch (e) {
|
||||
domains = [];
|
||||
loadError = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCreateScript(event: Event) {
|
||||
event.preventDefault();
|
||||
if (!app) return;
|
||||
creatingScript = true;
|
||||
createScriptError = null;
|
||||
try {
|
||||
await api.scripts.create({
|
||||
app_id: app.id,
|
||||
name: createScriptName.trim(),
|
||||
description: createScriptDescription.trim() || null,
|
||||
source: createScriptSource
|
||||
});
|
||||
showCreateScript = false;
|
||||
createScriptName = '';
|
||||
createScriptDescription = '';
|
||||
createScriptSource = SAMPLE_SOURCE;
|
||||
await loadScripts(app.id);
|
||||
} catch (e) {
|
||||
createScriptError = e instanceof Error ? e.message : String(e);
|
||||
if (e instanceof ApiError && e.status === 422) {
|
||||
createScriptError = `Validation: ${createScriptError}`;
|
||||
}
|
||||
} finally {
|
||||
creatingScript = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCreateDomain(event: Event) {
|
||||
event.preventDefault();
|
||||
if (!app) return;
|
||||
creatingDomain = true;
|
||||
createDomainError = null;
|
||||
try {
|
||||
await api.domains.create(app.id, createDomainPattern.trim());
|
||||
createDomainPattern = '';
|
||||
await loadDomains(app.id);
|
||||
} catch (e) {
|
||||
createDomainError = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
creatingDomain = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeDomain(d: AppDomain) {
|
||||
if (!app) return;
|
||||
if (!window.confirm(`Delete domain claim ${d.pattern}?`)) return;
|
||||
try {
|
||||
await api.domains.remove(app.id, d.id);
|
||||
await loadDomains(app.id);
|
||||
} catch (e) {
|
||||
alert(e instanceof Error ? e.message : String(e));
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSettings(event: Event, forceTakeover = false) {
|
||||
event.preventDefault();
|
||||
if (!app) return;
|
||||
savingSettings = true;
|
||||
settingsError = null;
|
||||
if (!forceTakeover) slugTakeoverNeeded = null;
|
||||
try {
|
||||
const slugChanged = editSlug.trim() !== app.slug;
|
||||
const updated = await api.apps.update(app.id, {
|
||||
name: editName.trim() !== app.name ? editName.trim() : undefined,
|
||||
description:
|
||||
editDescription !== (app.description ?? '')
|
||||
? editDescription || null
|
||||
: undefined,
|
||||
slug: slugChanged ? editSlug.trim() : undefined,
|
||||
force_takeover: forceTakeover || undefined
|
||||
});
|
||||
if (slugChanged) {
|
||||
await goto(`${base}/apps/${updated.slug}`, { replaceState: true });
|
||||
return;
|
||||
}
|
||||
app = updated;
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError && e.status === 409 && e.body) {
|
||||
const body = e.body as { conflict_kind?: string; current_app?: App };
|
||||
if (body.conflict_kind === 'historical' && body.current_app) {
|
||||
slugTakeoverNeeded = body.current_app;
|
||||
settingsError = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
settingsError = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
savingSettings = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteApp() {
|
||||
if (!app) return;
|
||||
const yes = window.confirm(
|
||||
`Delete app "${app.name}"? This requires zero scripts and zero domain claims.`
|
||||
);
|
||||
if (!yes) return;
|
||||
try {
|
||||
await api.apps.remove(app.id);
|
||||
await goto(`${base}/apps`);
|
||||
} catch (e) {
|
||||
alert(e instanceof Error ? e.message : String(e));
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void loadApp();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loading && !app}
|
||||
<p class="muted">Loading…</p>
|
||||
{:else if loadError && !app}
|
||||
<div class="error">
|
||||
<strong>Could not load app.</strong>
|
||||
<p>{loadError}</p>
|
||||
<a href="{base}/apps">Back to apps</a>
|
||||
</div>
|
||||
{:else if app}
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<div class="breadcrumb">
|
||||
<a href="{base}/apps">Apps</a> / <code>{app.slug}</code>
|
||||
</div>
|
||||
<h1>{app.name}</h1>
|
||||
{#if app.description}<p class="muted">{app.description}</p>{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="tabs">
|
||||
<button
|
||||
type="button"
|
||||
class:active={activeTab === 'scripts'}
|
||||
onclick={() => (activeTab = 'scripts')}>Scripts ({scripts.length})</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class:active={activeTab === 'domains'}
|
||||
onclick={() => (activeTab = 'domains')}>Domains ({domains.length})</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class:active={activeTab === 'settings'}
|
||||
onclick={() => (activeTab = 'settings')}>Settings</button
|
||||
>
|
||||
</nav>
|
||||
|
||||
{#if activeTab === 'scripts'}
|
||||
<section>
|
||||
<div class="row">
|
||||
<h2>Scripts</h2>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showCreateScript = !showCreateScript)}
|
||||
>
|
||||
{showCreateScript ? 'Cancel' : 'New script'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if showCreateScript}
|
||||
<form class="create-form" onsubmit={submitCreateScript}>
|
||||
<div class="row">
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input bind:value={createScriptName} required placeholder="echo" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Description</span>
|
||||
<input bind:value={createScriptDescription} placeholder="optional" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="full">
|
||||
<span>Source (Rhai)</span>
|
||||
<CodeEditor bind:value={createScriptSource} language="rhai" minHeight="14rem" />
|
||||
</label>
|
||||
{#if createScriptError}
|
||||
<div class="error">{createScriptError}</div>
|
||||
{/if}
|
||||
<div class="actions">
|
||||
<button type="submit" disabled={creatingScript}>
|
||||
{creatingScript ? 'Creating…' : 'Create script'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if scripts.length === 0}
|
||||
<p class="muted">No scripts in this app yet.</p>
|
||||
{:else}
|
||||
<ul class="list">
|
||||
{#each scripts as script (script.id)}
|
||||
<li>
|
||||
<a href="{base}/scripts/{script.id}">
|
||||
<div class="primary">
|
||||
<strong>{script.name}</strong>
|
||||
<span class="muted">v{script.version}</span>
|
||||
</div>
|
||||
<div class="secondary muted">{script.description ?? '—'}</div>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</section>
|
||||
{:else if activeTab === 'domains'}
|
||||
<section>
|
||||
<h2>Domain claims</h2>
|
||||
<p class="muted">
|
||||
Hosts this app answers on. Routes inside this app can only bind to
|
||||
these. Use <code>app.example.com</code> for exact, <code>*.example.com</code> for
|
||||
wildcard, or <code>{'{'}tenant{'}'}.example.com</code> to bind a capture.
|
||||
</p>
|
||||
<form class="create-form inline" onsubmit={submitCreateDomain}>
|
||||
<input
|
||||
bind:value={createDomainPattern}
|
||||
required
|
||||
placeholder="app.example.com"
|
||||
/>
|
||||
<button type="submit" disabled={creatingDomain}>
|
||||
{creatingDomain ? 'Adding…' : 'Add domain'}
|
||||
</button>
|
||||
</form>
|
||||
{#if createDomainError}
|
||||
<div class="error">{createDomainError}</div>
|
||||
{/if}
|
||||
{#if domains.length === 0}
|
||||
<p class="muted">No domain claims yet.</p>
|
||||
{:else}
|
||||
<ul class="list">
|
||||
{#each domains as d (d.id)}
|
||||
<li class="domain-row">
|
||||
<div>
|
||||
<code>{d.pattern}</code>
|
||||
<span class="muted">— {d.shape}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="secondary danger"
|
||||
onclick={() => void removeDomain(d)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</section>
|
||||
{:else if activeTab === 'settings'}
|
||||
<section>
|
||||
<h2>Settings</h2>
|
||||
<form class="create-form" onsubmit={(e) => saveSettings(e)}>
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input bind:value={editName} required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Description</span>
|
||||
<input bind:value={editDescription} />
|
||||
</label>
|
||||
<label>
|
||||
<span>Slug</span>
|
||||
<input
|
||||
bind:value={editSlug}
|
||||
required
|
||||
pattern="[a-z0-9][a-z0-9-]*"
|
||||
/>
|
||||
<small class="muted">
|
||||
Renaming records the old slug as a permanent 301 redirect.
|
||||
</small>
|
||||
</label>
|
||||
{#if slugTakeoverNeeded}
|
||||
<div class="warning">
|
||||
<strong>Slug previously redirected.</strong>
|
||||
<p>
|
||||
<code>{editSlug}</code> currently redirects to
|
||||
<code>{slugTakeoverNeeded.slug}</code>. Renaming to it will break old
|
||||
links.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button
|
||||
type="button"
|
||||
class="secondary"
|
||||
onclick={() => (slugTakeoverNeeded = null)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => saveSettings(e, true)}
|
||||
disabled={savingSettings}
|
||||
>
|
||||
{savingSettings ? 'Renaming…' : 'Rename anyway'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if settingsError}
|
||||
<div class="error">{settingsError}</div>
|
||||
{/if}
|
||||
{#if !slugTakeoverNeeded}
|
||||
<div class="actions">
|
||||
<button type="submit" disabled={savingSettings}>
|
||||
{savingSettings ? 'Saving…' : 'Save changes'}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
<div class="danger-zone">
|
||||
<h3>Delete app</h3>
|
||||
<p class="muted">
|
||||
Requires the app to have zero scripts and zero domain claims.
|
||||
</p>
|
||||
<button type="button" class="danger" onclick={deleteApp}>Delete app</button>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.breadcrumb code {
|
||||
background: #1e293b;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.125rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
border: none;
|
||||
padding: 0.6rem 1rem;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.tabs button:hover {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.tabs button.active {
|
||||
color: #38bdf8;
|
||||
border-bottom-color: #38bdf8;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #38bdf8;
|
||||
color: #0b1220;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #7f1d1d;
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
button.secondary.danger {
|
||||
background: transparent;
|
||||
color: #fca5a5;
|
||||
border-color: #7f1d1d;
|
||||
}
|
||||
|
||||
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;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border: 1px solid #ca8a04;
|
||||
background: #3f2e07;
|
||||
color: #fde68a;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.warning code {
|
||||
background: #1e293b;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.create-form {
|
||||
background: #1e293b;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.create-form.inline {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.create-form .row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.create-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.create-form label.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.create-form input {
|
||||
background: #0b1220;
|
||||
color: #e2e8f0;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font: inherit;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.list a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.85rem 1rem;
|
||||
background: #1e293b;
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.list a:hover {
|
||||
background: #283549;
|
||||
}
|
||||
|
||||
.domain-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.85rem 1rem;
|
||||
background: #1e293b;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.domain-row code {
|
||||
background: #0b1220;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.primary {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #7f1d1d;
|
||||
border-radius: 0.5rem;
|
||||
background: #1e0a0a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user