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
@@ -21,6 +21,7 @@ export interface ScriptSandbox {
|
||||
|
||||
export interface Script {
|
||||
id: string;
|
||||
app_id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
version: number;
|
||||
@@ -32,11 +33,64 @@ export interface Script {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface App {
|
||||
id: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type DomainShape = 'exact' | 'wildcard' | 'parameterized';
|
||||
|
||||
export interface AppDomain {
|
||||
id: string;
|
||||
app_id: string;
|
||||
pattern: string;
|
||||
shape: DomainShape;
|
||||
shape_key: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface AppLookupResponse {
|
||||
id: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
/// Present only when the requested slug was a retired redirect.
|
||||
redirect_to?: string;
|
||||
}
|
||||
|
||||
export interface SlugCheckResponse {
|
||||
ok: boolean;
|
||||
conflict_kind: 'current' | 'historical' | 'invalid' | 'reserved' | null;
|
||||
current_app: App | null;
|
||||
reason: string | null;
|
||||
}
|
||||
|
||||
export interface CreateAppInput {
|
||||
slug: string;
|
||||
name: string;
|
||||
description?: string | null;
|
||||
force_takeover?: boolean;
|
||||
}
|
||||
|
||||
export interface PatchAppInput {
|
||||
name?: string;
|
||||
description?: string | null;
|
||||
slug?: string;
|
||||
force_takeover?: boolean;
|
||||
}
|
||||
|
||||
export type HostKind = 'any' | 'strict' | 'wildcard';
|
||||
export type PathKind = 'exact' | 'prefix' | 'param';
|
||||
|
||||
export interface Route {
|
||||
id: string;
|
||||
app_id: string;
|
||||
script_id: string;
|
||||
host_kind: HostKind;
|
||||
host: string;
|
||||
@@ -106,6 +160,7 @@ export interface ExecutionLog {
|
||||
}
|
||||
|
||||
export interface CreateScriptInput {
|
||||
app_id: string;
|
||||
name: string;
|
||||
description?: string | null;
|
||||
source: string;
|
||||
@@ -257,20 +312,23 @@ export const api = {
|
||||
}),
|
||||
remove: (routeId: string) =>
|
||||
adminRequest<null>(`/api/v1/admin/routes/${routeId}`, { method: 'DELETE' }),
|
||||
check: (input: RouteInput) =>
|
||||
check: (appId: string, input: RouteInput) =>
|
||||
adminRequest<CheckRouteResponse>('/api/v1/admin/routes:check', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(input)
|
||||
body: JSON.stringify({ ...input, app_id: appId })
|
||||
}),
|
||||
match: (url: string, method = 'GET') =>
|
||||
match: (appId: string, url: string, method = 'GET') =>
|
||||
adminRequest<MatchRouteResponse>('/api/v1/admin/routes:match', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ url, method })
|
||||
body: JSON.stringify({ app_id: appId, url, method })
|
||||
})
|
||||
},
|
||||
|
||||
scripts: {
|
||||
list: () => adminRequest<Script[]>('/api/v1/admin/scripts'),
|
||||
list: (opts: { app?: string } = {}) => {
|
||||
const qs = opts.app ? `?app=${encodeURIComponent(opts.app)}` : '';
|
||||
return adminRequest<Script[]>(`/api/v1/admin/scripts${qs}`);
|
||||
},
|
||||
get: (id: string) => adminRequest<Script>(`/api/v1/admin/scripts/${id}`),
|
||||
create: (input: CreateScriptInput) =>
|
||||
adminRequest<Script>('/api/v1/admin/scripts', {
|
||||
@@ -295,6 +353,51 @@ export const api = {
|
||||
}
|
||||
},
|
||||
|
||||
apps: {
|
||||
list: () => adminRequest<App[]>('/api/v1/admin/apps'),
|
||||
get: (idOrSlug: string) =>
|
||||
adminRequest<AppLookupResponse>(`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}`),
|
||||
create: (input: CreateAppInput) =>
|
||||
adminRequest<App>('/api/v1/admin/apps', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(input)
|
||||
}),
|
||||
update: (idOrSlug: string, input: PatchAppInput) =>
|
||||
adminRequest<App>(`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(input)
|
||||
}),
|
||||
remove: (idOrSlug: string) =>
|
||||
adminRequest<null>(`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}`, {
|
||||
method: 'DELETE'
|
||||
}),
|
||||
slugCheck: (idOrSlug: string, newSlug: string) =>
|
||||
adminRequest<SlugCheckResponse>(
|
||||
`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/slug:check`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ new_slug: newSlug })
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
domains: {
|
||||
listForApp: (idOrSlug: string) =>
|
||||
adminRequest<AppDomain[]>(
|
||||
`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/domains`
|
||||
),
|
||||
create: (idOrSlug: string, pattern: string) =>
|
||||
adminRequest<AppDomain>(
|
||||
`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/domains`,
|
||||
{ method: 'POST', body: JSON.stringify({ pattern }) }
|
||||
),
|
||||
remove: (idOrSlug: string, domainId: string) =>
|
||||
adminRequest<null>(
|
||||
`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/domains/${domainId}`,
|
||||
{ method: 'DELETE' }
|
||||
)
|
||||
},
|
||||
|
||||
execute: async (
|
||||
id: string,
|
||||
body: unknown,
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<header>
|
||||
<a href={base + '/'} class="brand">PiCloud</a>
|
||||
<nav>
|
||||
<a href={base + '/'}>Scripts</a>
|
||||
<a href={base + '/apps'}>Apps</a>
|
||||
<a href={base + '/admins'}>Admins</a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
|
||||
@@ -1,242 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { api, ApiError, type Script } from '$lib/api';
|
||||
import CodeEditor from '$lib/CodeEditor.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const SAMPLE_SOURCE = '#{\n statusCode: 200,\n body: #{ ok: true, echo: ctx.request.body }\n}';
|
||||
|
||||
let scripts = $state<Script[] | null>(null);
|
||||
let listError = $state<string | null>(null);
|
||||
let loading = $state(true);
|
||||
|
||||
let showCreate = $state(false);
|
||||
let createName = $state('');
|
||||
let createDescription = $state('');
|
||||
let createSource = $state(SAMPLE_SOURCE);
|
||||
let creating = $state(false);
|
||||
let createError = $state<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
listError = null;
|
||||
try {
|
||||
scripts = await api.scripts.list();
|
||||
} catch (e) {
|
||||
listError = e instanceof Error ? e.message : String(e);
|
||||
scripts = null;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCreate(event: Event) {
|
||||
event.preventDefault();
|
||||
creating = true;
|
||||
createError = null;
|
||||
try {
|
||||
await api.scripts.create({
|
||||
name: createName.trim(),
|
||||
description: createDescription.trim() || null,
|
||||
source: createSource
|
||||
});
|
||||
showCreate = false;
|
||||
createName = '';
|
||||
createDescription = '';
|
||||
createSource = SAMPLE_SOURCE;
|
||||
await load();
|
||||
} catch (e) {
|
||||
createError = e instanceof Error ? e.message : String(e);
|
||||
if (e instanceof ApiError && e.status === 422) {
|
||||
createError = `Syntax error: ${createError}`;
|
||||
}
|
||||
} finally {
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void load();
|
||||
// Dashboard entry: always lands on the apps list now (multi-app
|
||||
// scoping makes "scripts at root" no longer meaningful — every
|
||||
// script lives inside an app).
|
||||
onMount(() => {
|
||||
void goto(`${base}/apps`, { replaceState: true });
|
||||
});
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header class="page-header">
|
||||
<h1>Scripts</h1>
|
||||
<button type="button" onclick={() => (showCreate = !showCreate)}>
|
||||
{showCreate ? 'Cancel' : 'New script'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if showCreate}
|
||||
<form class="create-form" onsubmit={submitCreate}>
|
||||
<div class="row">
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input bind:value={createName} required minlength="1" placeholder="echo" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Description</span>
|
||||
<input bind:value={createDescription} placeholder="optional" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="full">
|
||||
<span>Source (Rhai)</span>
|
||||
<CodeEditor bind:value={createSource} language="rhai" minHeight="14rem" />
|
||||
</label>
|
||||
{#if createError}
|
||||
<div class="error">{createError}</div>
|
||||
{/if}
|
||||
<div class="actions">
|
||||
<button type="submit" disabled={creating}>
|
||||
{creating ? 'Creating…' : 'Create script'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<p class="muted">Loading…</p>
|
||||
{:else if listError}
|
||||
<div class="error">
|
||||
<strong>Could not load scripts.</strong>
|
||||
<p>{listError}</p>
|
||||
<button type="button" onclick={() => void load()}>Retry</button>
|
||||
</div>
|
||||
{:else if scripts && scripts.length === 0}
|
||||
<p class="muted">No scripts yet. Create one above to get started.</p>
|
||||
{:else if scripts}
|
||||
<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>
|
||||
<p class="muted">Redirecting…</p>
|
||||
|
||||
<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;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.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 .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;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.primary {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
305
dashboard/src/routes/apps/+page.svelte
Normal file
305
dashboard/src/routes/apps/+page.svelte
Normal file
@@ -0,0 +1,305 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { api, ApiError, type App } from '$lib/api';
|
||||
|
||||
let apps = $state<App[] | null>(null);
|
||||
let listError = $state<string | null>(null);
|
||||
let loading = $state(true);
|
||||
|
||||
let showCreate = $state(false);
|
||||
let createSlug = $state('');
|
||||
let createName = $state('');
|
||||
let createDescription = $state('');
|
||||
let creating = $state(false);
|
||||
let createError = $state<string | null>(null);
|
||||
let createHistoricalConflict = $state<App | null>(null);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
listError = null;
|
||||
try {
|
||||
apps = await api.apps.list();
|
||||
} catch (e) {
|
||||
listError = e instanceof Error ? e.message : String(e);
|
||||
apps = null;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetCreate() {
|
||||
createSlug = '';
|
||||
createName = '';
|
||||
createDescription = '';
|
||||
createError = null;
|
||||
createHistoricalConflict = null;
|
||||
}
|
||||
|
||||
async function submitCreate(event: Event, forceTakeover = false) {
|
||||
event.preventDefault();
|
||||
creating = true;
|
||||
createError = null;
|
||||
if (!forceTakeover) createHistoricalConflict = null;
|
||||
try {
|
||||
await api.apps.create({
|
||||
slug: createSlug.trim(),
|
||||
name: createName.trim(),
|
||||
description: createDescription.trim() || null,
|
||||
force_takeover: forceTakeover || undefined
|
||||
});
|
||||
showCreate = false;
|
||||
resetCreate();
|
||||
await load();
|
||||
} 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) {
|
||||
createHistoricalConflict = body.current_app;
|
||||
createError = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
createError = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header class="page-header">
|
||||
<h1>Apps</h1>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
showCreate = !showCreate;
|
||||
if (!showCreate) resetCreate();
|
||||
}}
|
||||
>
|
||||
{showCreate ? 'Cancel' : 'New app'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if showCreate}
|
||||
<form class="create-form" onsubmit={(e) => submitCreate(e)}>
|
||||
<div class="row">
|
||||
<label>
|
||||
<span>Slug</span>
|
||||
<input
|
||||
bind:value={createSlug}
|
||||
required
|
||||
pattern="[a-z0-9][a-z0-9-]*"
|
||||
placeholder="my-app"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input bind:value={createName} required placeholder="My App" />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Description</span>
|
||||
<input bind:value={createDescription} placeholder="optional" />
|
||||
</label>
|
||||
{#if createHistoricalConflict}
|
||||
<div class="warning">
|
||||
<strong>Slug previously redirected.</strong>
|
||||
<p>
|
||||
<code>{createSlug}</code> currently redirects to
|
||||
<code>{createHistoricalConflict.slug}</code>. Using it here will break any
|
||||
external links that still target the old slug.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button type="button" class="secondary" onclick={() => (createHistoricalConflict = null)}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => submitCreate(e, true)}
|
||||
disabled={creating}
|
||||
>
|
||||
{creating ? 'Claiming…' : 'Claim slug anyway'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if createError}
|
||||
<div class="error">{createError}</div>
|
||||
{/if}
|
||||
{#if !createHistoricalConflict}
|
||||
<div class="actions">
|
||||
<button type="submit" disabled={creating}>
|
||||
{creating ? 'Creating…' : 'Create app'}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<p class="muted">Loading…</p>
|
||||
{:else if listError}
|
||||
<div class="error">
|
||||
<strong>Could not load apps.</strong>
|
||||
<p>{listError}</p>
|
||||
<button type="button" onclick={() => void load()}>Retry</button>
|
||||
</div>
|
||||
{:else if apps && apps.length === 0}
|
||||
<p class="muted">No apps yet. Create one above to get started.</p>
|
||||
{:else if apps}
|
||||
<ul class="list">
|
||||
{#each apps as app (app.id)}
|
||||
<li>
|
||||
<a href="{base}/apps/{app.slug}">
|
||||
<div class="primary">
|
||||
<strong>{app.name}</strong>
|
||||
<span class="muted">/{app.slug}</span>
|
||||
</div>
|
||||
<div class="secondary muted">
|
||||
{app.description ?? '—'}
|
||||
</div>
|
||||
</a>
|
||||
</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.secondary {
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
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 .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 input {
|
||||
background: #0b1220;
|
||||
color: #e2e8f0;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.primary {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
@@ -38,6 +38,8 @@
|
||||
let scriptLoading = $state(true);
|
||||
let info = $state<VersionInfo | null>(null);
|
||||
|
||||
let appSlug = $state<string | null>(null);
|
||||
|
||||
async function loadScript() {
|
||||
scriptLoading = true;
|
||||
scriptError = null;
|
||||
@@ -48,6 +50,14 @@
|
||||
editableDescription = script.description ?? '';
|
||||
editableTimeout = script.timeout_seconds;
|
||||
editableSandbox = { ...(script.sandbox ?? {}) };
|
||||
// Resolve the owning app's slug for the breadcrumb. Failure
|
||||
// is non-fatal — the page works without it.
|
||||
void api.apps
|
||||
.get(script.app_id)
|
||||
.then((a) => {
|
||||
appSlug = a.slug;
|
||||
})
|
||||
.catch(() => {});
|
||||
} catch (e) {
|
||||
scriptError = e instanceof Error ? e.message : String(e);
|
||||
script = null;
|
||||
@@ -251,8 +261,9 @@
|
||||
|
||||
async function runPreview() {
|
||||
previewResult = null;
|
||||
if (!script) return;
|
||||
try {
|
||||
const r = await api.routes.match(previewUrl, previewMethod);
|
||||
const r = await api.routes.match(script.app_id, previewUrl, previewMethod);
|
||||
if (r.matched) {
|
||||
const ours = r.matched.script_id === id;
|
||||
const tag = ours ? '✓ matches THIS script' : '⚠ matches a DIFFERENT script';
|
||||
@@ -368,6 +379,13 @@
|
||||
{:else if script}
|
||||
<header class="page-header">
|
||||
<div>
|
||||
{#if appSlug}
|
||||
<div class="breadcrumb">
|
||||
<a href="{base}/apps">Apps</a> /
|
||||
<a href="{base}/apps/{appSlug}">{appSlug}</a> / Scripts /
|
||||
<code>{script.name}</code>
|
||||
</div>
|
||||
{/if}
|
||||
<h1>{script.name}</h1>
|
||||
<p class="muted">
|
||||
v{script.version} · timeout {script.timeout_seconds}s · {script.description ?? 'no description'}
|
||||
@@ -756,6 +774,23 @@
|
||||
align-items: flex-start;
|
||||
margin: 1rem 0 1.5rem;
|
||||
}
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user