wrenn/wrenn
2
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Polish admin capsule pages and improve shared components

Browse Source 
- Admin list: remove redundant Open button, normalize with dashboard
  patterns (sorting, search highlight, auto-refresh, animations)
- Admin detail: breadcrumb header, status bar, visibility polling
- FilesTab: add treeOnly prop, compact mode uses 2/7 tree + 5/7 preview
  split, expand tree to full width when no file selected, improve copy
- MetricsPanel: hide Live badge in compact layout (redundant with status)
- DestroyDialog: accept destroyFn prop for admin capsule deletion
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-13 04:41:51 +06:00
parent 60c0de670c
commit 784fe5c7a8
5 changed files with 552 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/components/DestroyDialog.svelte
View File

@ -1,13 +1,15 @@
<script lang="ts">
import { destroyCapsule } from '$lib/api/capsules';
import type { ApiResult } from '$lib/api/client';
type Props = {
open: boolean;
capsuleId: string;
onclose: () => void;
ondestroyed?: () => void;
destroyFn?: (id: string) => Promise<ApiResult<void>>;
};
let { open, capsuleId, onclose, ondestroyed }: Props = $props();
let { open, capsuleId, onclose, ondestroyed, destroyFn }: Props = $props();
let destroying = $state(false);
let error = $state<string | null>(null);
@ -15,7 +17,8 @@
async function handleDestroy() {
destroying = true;
error = null;
const result = await destroyCapsule(capsuleId);
const destroy = destroyFn ?? destroyCapsule;
const result = await destroy(capsuleId);
if (result.ok) {
error = null;
ondestroyed?.();

28
frontend/src/lib/components/FilesTab.svelte
View File

@ -453,8 +453,8 @@
</svg>
</div>
<div class="flex flex-col gap-1">
<span class="text-ui font-medium text-[var(--color-text-secondary)]">File browser unavailable</span>
<span class="text-meta text-[var(--color-text-muted)]">Start the capsule to browse its filesystem</span>
<span class="text-ui font-medium text-[var(--color-text-secondary)]">Capsule not running</span>
<span class="text-meta text-[var(--color-text-muted)]">Start or resume the capsule to browse files</span>
</div>
</div>
</div>
@ -462,7 +462,7 @@
<div class="flex flex-1 min-h-0">
<!-- Left panel: File tree -->
<div class="flex shrink-0 flex-col bg-[var(--color-bg-2)] {(treeOnly || (compact && !selectedFile)) ? 'flex-1' : 'w-[380px] border-r border-[var(--color-border)]'}"
<div class="flex shrink-0 flex-col bg-[var(--color-bg-2)] {(treeOnly || (compact && !selectedFile)) ? 'flex-1' : compact ? 'w-[28.57%] border-r border-[var(--color-border)]' : 'w-[380px] border-r border-[var(--color-border)]'}"
>
<!-- Path input -->
@ -482,7 +482,7 @@
onfocus={() => (pathInputFocused = true)}
onblur={() => (pathInputFocused = false)}
onkeydown={handleKeydown}
placeholder="Enter path..."
placeholder="/home/user or ~/file.txt"
spellcheck="false"
autocomplete="off"
class="flex-1 bg-transparent font-mono text-meta text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-muted)]"
@ -569,7 +569,7 @@
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</svg>
</div>
<span class="text-meta text-[var(--color-text-muted)]">Nothing here yet</span>
<span class="text-meta text-[var(--color-text-muted)]">Empty directory</span>
</div>
{:else}
{#each sortedEntries as entry, idx (entry.path)}
@ -669,8 +669,8 @@
</svg>
</div>
<div class="flex flex-col gap-1">
<span class="text-ui text-[var(--color-text-secondary)]">No file selected</span>
<span class="text-meta text-[var(--color-text-muted)]">Choose a file from the tree, or enter a path directly</span>
<span class="text-ui text-[var(--color-text-secondary)]">Select a file to preview</span>
<span class="text-meta text-[var(--color-text-muted)]">Click a file in the tree or type a path above</span>
</div>
</div>
</div>
@ -704,7 +704,7 @@
<button
onclick={handleDownload}
disabled={downloading || !isDownloadable}
title={isDownloadable ? undefined : 'Only regular files can be downloaded'}
title={isDownloadable ? 'Download file' : 'Not a regular file — download unavailable'}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-2.5 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)] disabled:opacity-50 disabled:cursor-not-allowed"
>
{#if downloading}
@ -752,13 +752,13 @@
</svg>
</div>
<div class="flex flex-col gap-1.5">
<span class="text-ui font-medium text-[var(--color-text-primary)]">Special file</span>
<span class="text-ui font-medium text-[var(--color-text-primary)]">Not a regular file</span>
<span class="text-meta text-[var(--color-text-tertiary)]">
<code class="rounded bg-[var(--color-bg-4)] px-1.5 py-0.5 font-mono text-[var(--color-text-secondary)]">{selectedFile.name}</code>
is a device, socket, or pipe
</span>
<span class="mt-1 text-meta text-[var(--color-text-muted)]">
Special files can't be previewed or downloaded.
These file types can't be read or downloaded.
</span>
</div>
</div>
@ -781,7 +781,7 @@
</span>
{/if}
<span class="mt-1 text-meta text-[var(--color-text-muted)]">
Symlinks can't be downloaded directly. Navigate to the target file instead.
Open the target path to view or download its contents.
</span>
</div>
</div>
@ -806,14 +806,14 @@
</div>
<div class="flex flex-col gap-1.5">
{#if isFileTooLarge(selectedFile.size)}
<span class="text-ui font-medium text-[var(--color-text-primary)]">Too large to preview</span>
<span class="text-ui font-medium text-[var(--color-text-primary)]">File too large to preview</span>
<span class="text-meta text-[var(--color-text-tertiary)]">
{formatFileSize(selectedFile.size)} — preview limit is 10 MB
{formatFileSize(selectedFile.size)} exceeds the 10 MB preview limit
</span>
{:else}
<span class="text-ui font-medium text-[var(--color-text-primary)]">Binary file</span>
<span class="text-meta text-[var(--color-text-tertiary)]">
Can't display as text — download to view
This file type can't be displayed as text
</span>
{/if}
</div>

14
frontend/src/lib/components/MetricsPanel.svelte
View File

@ -262,11 +262,15 @@
<div class="flex flex-1 flex-col min-h-0">
<!-- Controls row -->
<div class="flex shrink-0 items-center justify-between {layout === 'full' ? 'px-0 pb-5' : 'border-b border-[var(--color-border)] bg-[var(--color-bg-1)] px-5 py-2'}">
{#if !metricsLoading}
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-2 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
<span class="h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
Live
</span>
{#if layout === 'full'}
{#if !metricsLoading}
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-2 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
<span class="h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
Live
</span>
{:else}
<div></div>
{/if}
{:else}
<div></div>
{/if}

636
frontend/src/routes/admin/capsules/+page.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import AdminSidebar from '$lib/components/AdminSidebar.svelte';
import CreateCapsuleDialog from '$lib/components/CreateCapsuleDialog.svelte';
import DestroyDialog from '$lib/components/DestroyDialog.svelte';
import CopyButton from '$lib/components/CopyButton.svelte';
import { onMount, onDestroy } from 'svelte';
import { goto } from '$app/navigation';
@ -11,6 +12,9 @@
} from '$lib/api/admin-capsules';
import type { Capsule } from '$lib/api/capsules';
const REFRESH_INTERVAL = 15;
const SPIN_DURATION = 600;
let collapsed = $state(
typeof window !== 'undefined'
? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
@ -21,19 +25,98 @@
let loading = $state(true);
let error = $state<string | null>(null);
let showCreateDialog = $state(false);
let searchQuery = $state('');
let spinning = $state(false);
// Auto-refresh
let autoRefresh = $state(true);
let countdown = $state(REFRESH_INTERVAL);
let countdownInterval: ReturnType<typeof setInterval> | null = null;
let refreshInterval: ReturnType<typeof setInterval> | null = null;
// Sorting
type SortKey = 'status' | 'vcpus' | 'memory_mb' | 'started_at' | 'template';
let sortKey = $state<SortKey | null>(null);
let sortDir = $state<'asc' | 'desc'>('asc');
// Destroy state
let destroyTarget = $state<Capsule | null>(null);
let destroying = $state(false);
let destroyError = $state<string | null>(null);
// Polling
let pollInterval: ReturnType<typeof setInterval> | null = null;
// Animation tracking
let initialAnimationDone = $state(false);
let newCapsuleId = $state<string | null>(null);
let runningCount = $derived(capsules.filter((c) => c.status === 'running').length);
let pausedCount = $derived(capsules.filter((c) => c.status === 'paused').length);
async function fetchCapsules() {
let filteredCapsules = $derived.by(() => {
let list = searchQuery
? capsules.filter((c) =>
c.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
c.template.toLowerCase().includes(searchQuery.toLowerCase())
)
: [...capsules];
if (sortKey) {
const key = sortKey;
const dir = sortDir === 'asc' ? 1 : -1;
list.sort((a, b) => {
if (key === 'status' || key === 'template') {
return a[key].localeCompare(b[key]) * dir;
}
if (key === 'started_at') {
const ta = a.started_at ? new Date(a.started_at).getTime() : 0;
const tb = b.started_at ? new Date(b.started_at).getTime() : 0;
return (ta - tb) * dir;
}
return ((a[key] as number) - (b[key] as number)) * dir;
});
}
return list;
});
function toggleSort(key: SortKey) {
if (sortKey === key) {
sortDir = sortDir === 'asc' ? 'desc' : 'asc';
} else {
sortKey = key;
sortDir = 'asc';
}
}
function startAutoRefresh() {
stopAutoRefresh();
countdown = REFRESH_INTERVAL;
countdownInterval = setInterval(() => {
countdown--;
if (countdown <= 0) countdown = REFRESH_INTERVAL;
}, 1000);
refreshInterval = setInterval(fetchCapsules, REFRESH_INTERVAL * 1000);
}
function stopAutoRefresh() {
if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null; }
if (refreshInterval) { clearInterval(refreshInterval); refreshInterval = null; }
}
function toggleAutoRefresh() {
autoRefresh = !autoRefresh;
if (autoRefresh) {
startAutoRefresh();
} else {
stopAutoRefresh();
}
}
async function fetchCapsules(manual = false) {
const wasEmpty = capsules.length === 0;
if (wasEmpty) loading = true;
if (manual) {
spinning = true;
var spinTimer = new Promise<void>((resolve) => setTimeout(resolve, SPIN_DURATION));
}
const result = await listAdminCapsules();
if (result.ok) {
capsules = result.data;
@ -42,25 +125,30 @@
error = result.error;
}
loading = false;
if (!initialAnimationDone) {
setTimeout(() => { initialAnimationDone = true; }, 400 + (capsules.length * 40));
}
if (autoRefresh) countdown = REFRESH_INTERVAL;
if (manual) {
await spinTimer!;
spinning = false;
}
}
function handleCreated(capsule: Capsule) {
goto(`/admin/capsules/${capsule.id}`);
}
async function handleDestroy() {
if (!destroyTarget) return;
destroying = true;
destroyError = null;
const result = await destroyAdminCapsule(destroyTarget.id);
if (result.ok) {
capsules = capsules.filter((c) => c.id !== destroyTarget!.id);
destroyTarget = null;
function handleDestroyed() {
if (destroyTarget) {
const id = destroyTarget.id;
capsules = capsules.filter((c) => c.id !== id);
toast.success('Capsule destroyed');
} else {
destroyError = result.error;
}
destroying = false;
destroyTarget = null;
}
function statusColor(status: string): string {
@ -90,21 +178,41 @@
}
}
function fmtDate(iso: string | null | undefined): string {
if (!iso) return '—';
function formatTime(iso: string | null | undefined): string {
if (!iso) return '\u2014';
return new Date(iso).toLocaleString([], {
month: 'short', day: 'numeric',
hour: '2-digit', minute: '2-digit',
});
}
function timeAgo(iso: string | undefined): string {
if (!iso) return '';
const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
if (seconds < 60) return `${seconds}s ago`;
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
return `${Math.floor(seconds / 86400)}d ago`;
}
function handleVisibility() {
if (document.hidden) {
stopAutoRefresh();
} else if (autoRefresh) {
fetchCapsules();
startAutoRefresh();
}
}
onMount(() => {
fetchCapsules();
pollInterval = setInterval(fetchCapsules, 15_000);
startAutoRefresh();
document.addEventListener('visibilitychange', handleVisibility);
});
onDestroy(() => {
if (pollInterval) clearInterval(pollInterval);
stopAutoRefresh();
document.removeEventListener('visibilitychange', handleVisibility);
});
</script>
@ -112,169 +220,307 @@
<title>Wrenn Admin — Capsules</title>
</svelte:head>
<style>
.refresh-spin {
animation: spin-once 0.6s ease-in-out;
}
@keyframes capsule-born {
0%, 25% { background-color: rgba(94, 140, 88, 0.1); }
100% { background-color: transparent; }
}
.capsule-born {
animation: capsule-born 1.6s ease-out forwards;
}
.row-stripe {
transform: scaleY(0);
transform-origin: center;
transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
.capsule-row:hover .row-stripe {
transform: scaleY(1);
}
</style>
<div class="flex h-screen overflow-hidden bg-[var(--color-bg-0)]">
<AdminSidebar bind:collapsed />
<main class="flex min-w-0 flex-1 flex-col overflow-hidden">
<!-- Header -->
<header class="relative shrink-0 border-b border-[var(--color-border)] bg-[var(--color-bg-1)]">
<div class="absolute inset-0 bg-gradient-to-b from-[var(--color-accent)]/[0.02] to-transparent pointer-events-none"></div>
<div class="relative flex items-start justify-between px-8 pt-7 pb-5">
<div class="shrink-0 px-8 pt-8 pb-6">
<div class="flex items-center justify-between">
<div>
<h1 class="font-serif text-page leading-none tracking-[-0.03em] text-[var(--color-text-bright)]">
Capsules
</h1>
<p class="mt-2 text-ui text-[var(--color-text-tertiary)]">
<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
Launch temporary capsules to build and snapshot platform templates.
</p>
</div>
<button
onclick={() => { showCreateDialog = true; }}
class="group flex items-center gap-2.5 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-ui font-semibold text-white shadow-sm transition-all duration-200 hover:shadow-[0_0_20px_var(--color-accent-glow-mid)] hover:brightness-115 hover:-translate-y-px active:translate-y-0"
>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 group-hover:rotate-90"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Launch Capsule
</button>
</div>
<!-- Stats strip -->
{#if !loading && !error}
<div class="relative flex items-center gap-3 px-8 pb-5">
<span class="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2.5 py-1 text-label font-semibold text-[var(--color-text-secondary)]">
<span class="font-mono text-[var(--color-text-bright)]">{capsules.length}</span>
total
</span>
{#if runningCount > 0}
<span class="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-accent)]/25 bg-[var(--color-accent)]/8 px-2.5 py-1 text-label font-semibold text-[var(--color-accent-bright)]">
<span class="h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
<span class="font-mono">{runningCount}</span>
running
</span>
<div class="flex items-center gap-3">
{#if !loading && runningCount > 0}
<div class="flex items-center gap-2.5 rounded-[var(--radius-card)] border border-[var(--color-accent)]/20 bg-[var(--color-bg-2)] px-3.5 py-2">
<span class="relative flex h-[8px] w-[8px]">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[8px] w-[8px] rounded-full bg-[var(--color-accent)]"></span>
</span>
<span class="font-mono text-body font-semibold text-[var(--color-accent-bright)]">{runningCount}</span>
<span class="text-ui text-[var(--color-text-secondary)]">running</span>
</div>
{/if}
{#if pausedCount > 0}
<span class="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-amber)]/25 bg-[var(--color-amber)]/8 px-2.5 py-1 text-label font-semibold text-[var(--color-amber)]">
<span class="font-mono">{pausedCount}</span>
paused
</span>
{/if}
</div>
{/if}
</header>
<!-- Content -->
<div class="flex-1 overflow-y-auto px-8 py-6">
{#if loading}
<div class="flex items-center justify-center py-24">
<div class="flex items-center gap-3 text-ui text-[var(--color-text-secondary)]">
<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
Loading capsules...
</div>
</div>
{:else if error}
<div class="flex items-center gap-3 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-5 py-4">
<svg class="shrink-0 text-[var(--color-red)]" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<span class="text-ui text-[var(--color-red)]">{error}</span>
</div>
{:else if capsules.length === 0}
<div class="flex flex-col items-center justify-center py-28 text-center">
<div class="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-2)]">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
</svg>
</div>
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">No capsules</h2>
<p class="mt-2 max-w-[340px] text-ui text-[var(--color-text-tertiary)]">
Launch a capsule, configure it interactively, then snapshot it as a platform template.
</p>
<button
onclick={() => { showCreateDialog = true; }}
class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-ui font-semibold text-white shadow-sm transition-all duration-200 hover:shadow-[0_0_20px_var(--color-accent-glow-mid)] hover:brightness-115 hover:-translate-y-px active:translate-y-0"
class="group flex items-center gap-2.5 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-ui font-semibold text-white shadow-sm transition-all duration-200 hover:shadow-[0_0_20px_var(--color-accent-glow-mid)] hover:brightness-115 hover:-translate-y-px active:translate-y-0"
>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 group-hover:rotate-90"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Launch Capsule
</button>
</div>
{:else}
<!-- Capsule table -->
<div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]">
<table class="w-full">
<thead>
<tr class="border-b border-[var(--color-border)] bg-[var(--color-bg-2)]">
<th class="px-5 py-3 text-left text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">ID</th>
<th class="px-5 py-3 text-left text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Status</th>
<th class="px-5 py-3 text-left text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Template</th>
<th class="px-5 py-3 text-left text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Specs</th>
<th class="px-5 py-3 text-left text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Started</th>
<th class="px-5 py-3 text-right text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--color-border)]">
{#each capsules as capsule (capsule.id)}
<tr class="group transition-colors duration-100 hover:bg-[var(--color-bg-2)]">
<td class="px-5 py-3.5">
<div class="flex items-center gap-2">
<a
href="/admin/capsules/{capsule.id}"
class="font-mono text-ui text-[var(--color-text-bright)] transition-colors duration-150 hover:text-[var(--color-accent-bright)]"
>
{capsule.id}
</a>
<CopyButton value={capsule.id} />
</div>
</td>
<td class="px-5 py-3.5">
<span
class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-label font-semibold uppercase tracking-[0.05em]"
style="color: {statusColor(capsule.status)}; background: {statusBg(capsule.status)}; border: 1px solid {statusBorder(capsule.status)}"
>
{#if capsule.status === 'running'}
<span class="relative flex h-[5px] w-[5px] shrink-0">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
</span>
{/if}
{capsule.status}
</span>
</td>
<td class="px-5 py-3.5">
<span class="font-mono text-ui text-[var(--color-text-secondary)]">{capsule.template}</span>
</td>
<td class="px-5 py-3.5">
<span class="font-mono text-meta text-[var(--color-text-secondary)]">
{capsule.vcpus}v &middot; {capsule.memory_mb}MB
</span>
</td>
<td class="px-5 py-3.5">
<span class="font-mono text-meta text-[var(--color-text-muted)]">{fmtDate(capsule.started_at)}</span>
</td>
<td class="px-5 py-3.5 text-right">
<div class="flex items-center justify-end gap-2">
<a
href="/admin/capsules/{capsule.id}"
class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-3 py-1.5 text-meta font-medium text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)]"
>
Open
</a>
{#if capsule.status === 'running' || capsule.status === 'paused'}
<button
onclick={() => { destroyTarget = capsule; destroyError = null; }}
class="rounded-[var(--radius-button)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-3 py-1.5 text-meta font-medium text-[var(--color-red)] transition-all duration-150 hover:bg-[var(--color-red)]/15 hover:border-[var(--color-red)]/50"
>
Destroy
</button>
{/if}
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto px-8 pb-6" style="animation: fadeUp 0.35s ease both">
<!-- Toolbar -->
<div class="mb-4 flex items-center gap-3">
<div class="relative flex-1 max-w-[300px]">
<svg class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
<input
type="text"
placeholder="Search by ID or template..."
bind:value={searchQuery}
class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-2 pl-9 pr-3 font-mono text-ui text-[var(--color-text-bright)] outline-none placeholder:text-[var(--color-text-muted)] transition-colors duration-150 focus:border-[var(--color-accent)]"
/>
</div>
<span class="text-ui text-[var(--color-text-secondary)]">{filteredCapsules.length} capsule{filteredCapsules.length !== 1 ? 's' : ''}</span>
<div class="flex-1"></div>
<!-- Refresh -->
<button
onclick={() => fetchCapsules(true)}
disabled={spinning}
class="flex h-8 w-8 items-center justify-center rounded-[var(--radius-button)] border border-[var(--color-border)] text-[var(--color-text-tertiary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-secondary)] disabled:opacity-50"
title="Refresh"
>
<svg
class={spinning ? 'refresh-spin' : ''}
width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
>
<polyline points="23 4 23 10 17 10" />
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
</svg>
</button>
<!-- Auto-refresh countdown -->
<button
onclick={toggleAutoRefresh}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border px-2.5 py-1.5 font-mono text-label transition-colors duration-150
{autoRefresh
? 'border-[var(--color-accent)]/30 text-[var(--color-accent-mid)] hover:border-[var(--color-accent)]/50'
: 'border-[var(--color-border)] text-[var(--color-text-muted)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-secondary)]'}"
title={autoRefresh ? 'Click to disable auto-refresh' : `Click to enable auto-refresh (${REFRESH_INTERVAL}s)`}
>
{#if autoRefresh}
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="8" cy="8" r="5" stroke="var(--color-accent-glow-mid)" stroke-width="1.5" />
<circle
cx="8" cy="8" r="5"
stroke="var(--color-accent)"
stroke-width="1.5"
stroke-linecap="round"
stroke-dasharray="31.416"
stroke-dashoffset={31.416 * (1 - countdown / REFRESH_INTERVAL)}
transform="rotate(-90 8 8)"
style="transition: stroke-dashoffset 1s linear"
/>
</svg>
{countdown}s
{:else}
Off
{/if}
</button>
</div>
{#if error}
<div class="mb-4 flex items-start gap-3 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-4 py-3">
<svg class="mt-0.5 shrink-0 text-[var(--color-red)]" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<span class="text-ui text-[var(--color-red)]">{error}. Try refreshing the page.</span>
</div>
{/if}
<!-- Table -->
<div class="rounded-[var(--radius-card)] border border-[var(--color-border)] overflow-hidden">
<!-- Header row -->
<div class="grid grid-cols-[1.6fr_0.9fr_0.5fr_0.5fr_1fr_0.7fr_0.8fr] rounded-t-[var(--radius-card)] border-b border-[var(--color-border)] bg-[var(--color-bg-3)]">
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">ID</div>
{@render sortableHeader('Template', 'template')}
{@render sortableHeader('CPU', 'vcpus')}
{@render sortableHeader('Memory', 'memory_mb')}
{@render sortableHeader('Started', 'started_at')}
{@render sortableHeader('Status', 'status')}
<div class="px-5 py-3 text-right text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Actions</div>
</div>
{#if loading && capsules.length === 0}
<div class="flex items-center justify-center py-16">
<div class="flex items-center gap-3 text-ui text-[var(--color-text-secondary)]">
<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
Loading capsules...
</div>
</div>
{:else if filteredCapsules.length === 0 && searchQuery}
<div class="flex flex-col items-center justify-center py-[72px]">
<div class="relative mb-5">
<div class="relative flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-3)]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</div>
</div>
<p class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">
No matching capsules
</p>
<p class="mt-1.5 text-ui text-[var(--color-text-tertiary)]">
No capsules match "<span class="font-mono text-[var(--color-text-secondary)]">{searchQuery}</span>".
</p>
<button
onclick={() => { searchQuery = ''; }}
class="mt-4 rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-ui text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]"
>
Clear search
</button>
</div>
{:else if filteredCapsules.length === 0}
<div class="flex flex-col items-center justify-center py-[72px]">
<div class="relative mb-5">
<div class="absolute inset-0 -m-4 rounded-full" style="background: radial-gradient(circle, rgba(94,140,88,0.08) 0%, transparent 70%)"></div>
<div class="relative flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-accent)]/20 bg-[var(--color-bg-3)]" style="animation: iconFloat 4s ease-in-out infinite">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent-mid)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
</svg>
</div>
</div>
<p class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">
No capsules
</p>
<p class="mt-1.5 max-w-[340px] text-center text-ui text-[var(--color-text-tertiary)]">
Launch a capsule, configure it interactively, then snapshot it as a platform template.
</p>
<button
onclick={() => { showCreateDialog = true; }}
class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-ui font-semibold text-white shadow-sm transition-all duration-200 hover:shadow-[0_0_20px_var(--color-accent-glow-mid)] hover:brightness-115 hover:-translate-y-px active:translate-y-0"
>
Launch Capsule
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
</div>
{:else}
{#each filteredCapsules as capsule, i (capsule.id)}
{@const stripeColor = capsule.status === 'running' ? 'bg-[var(--color-accent)]' : capsule.status === 'paused' ? 'bg-[var(--color-amber)]' : capsule.status === 'error' ? 'bg-[var(--color-red)]' : 'bg-[var(--color-text-muted)]'}
<div
class="capsule-row relative grid grid-cols-[1.6fr_0.9fr_0.5fr_0.5fr_1fr_0.7fr_0.8fr] items-center overflow-hidden border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0 {newCapsuleId === capsule.id ? 'capsule-born' : ''}"
style={initialAnimationDone ? '' : `animation: fadeUp 0.35s ease both; animation-delay: ${i * 40}ms`}
>
<!-- Left accent stripe -->
<div class="row-stripe pointer-events-none absolute left-0 top-0 h-full w-0.5 {stripeColor}"></div>
<!-- ID -->
<div class="flex items-center gap-2.5 px-5 py-4">
{#if capsule.status === 'running'}
<span class="relative flex h-[6px] w-[6px] shrink-0">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[6px] w-[6px] rounded-full bg-[var(--color-accent)]"></span>
</span>
{:else if capsule.status === 'paused'}
<span class="inline-flex h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-amber)]"></span>
{:else if capsule.status === 'error'}
<span class="inline-flex h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-red)]"></span>
{:else}
<span class="inline-flex h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-text-muted)]"></span>
{/if}
{#if searchQuery && capsule.id.toLowerCase().includes(searchQuery.toLowerCase())}
{@const matchIdx = capsule.id.toLowerCase().indexOf(searchQuery.toLowerCase())}
<a href="/admin/capsules/{capsule.id}" class="font-mono text-ui text-[var(--color-text-bright)] hover:text-[var(--color-accent-bright)] transition-colors duration-150">{capsule.id.slice(0, matchIdx)}<mark class="rounded-[2px] bg-[var(--color-accent-glow-mid)] px-0.5 text-[var(--color-accent-bright)] not-italic">{capsule.id.slice(matchIdx, matchIdx + searchQuery.length)}</mark>{capsule.id.slice(matchIdx + searchQuery.length)}</a>
{:else}
<a href="/admin/capsules/{capsule.id}" class="font-mono text-ui text-[var(--color-text-bright)] hover:text-[var(--color-accent-bright)] transition-colors duration-150">{capsule.id}</a>
{/if}
<CopyButton value={capsule.id} />
</div>
<!-- Template -->
<div class="min-w-0 px-5 py-4">
<span class="block truncate font-mono text-ui text-[var(--color-text-secondary)]">{capsule.template}</span>
</div>
<!-- CPU -->
<div class="px-5 py-4">
<span class="font-mono text-ui text-[var(--color-text-secondary)]">{capsule.vcpus}</span>
</div>
<!-- Memory -->
<div class="px-5 py-4">
<span class="font-mono text-ui text-[var(--color-text-secondary)]">{capsule.memory_mb}MB</span>
</div>
<!-- Started -->
<div class="px-5 py-4">
<span class="text-ui text-[var(--color-text-secondary)]" title={capsule.started_at ?? ''}>{formatTime(capsule.started_at)}</span>
{#if capsule.last_active_at}
<span class="ml-1.5 text-label text-[var(--color-text-muted)]">active {timeAgo(capsule.last_active_at)}</span>
{/if}
</div>
<!-- Status -->
<div class="px-5 py-4">
<span
class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-label font-semibold uppercase tracking-[0.05em]"
style="color: {statusColor(capsule.status)}; background: {statusBg(capsule.status)}; border: 1px solid {statusBorder(capsule.status)}"
>
{capsule.status}
</span>
</div>
<!-- Actions -->
<div class="flex items-center justify-end gap-2 px-5 py-4">
{#if capsule.status === 'running' || capsule.status === 'paused'}
<button
onclick={() => { destroyTarget = capsule; }}
class="rounded-[var(--radius-button)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-3 py-1.5 text-meta font-medium text-[var(--color-red)] transition-all duration-150 hover:bg-[var(--color-red)]/15 hover:border-[var(--color-red)]/50"
>
Destroy
</button>
{/if}
</div>
</div>
{/each}
{/if}
</div>
</div>
<!-- Status bar -->
<footer
class="flex h-7 shrink-0 items-center justify-end border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-8"
>
<div class="flex items-center gap-1.5">
<span class="relative flex h-[5px] w-[5px]">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
</span>
<span class="font-mono text-label uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
</div>
</footer>
</main>
</div>
@ -285,50 +531,30 @@
templateSource="platform"
/>
<!-- Destroy confirmation dialog -->
{#if destroyTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="absolute inset-0 bg-black/60"
onclick={() => { if (!destroying) { destroyTarget = null; } }}
onkeydown={(e) => { if (e.key === 'Escape' && !destroying) { destroyTarget = null; } }}
></div>
<div class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Destroy Capsule</h2>
<p class="mt-2 text-ui text-[var(--color-text-tertiary)]">
Terminate <span class="font-mono text-[var(--color-text-secondary)]">{destroyTarget.id}</span> and destroy all data inside it. This cannot be undone.
</p>
{#if destroyError}
<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-meta text-[var(--color-red)]">
{destroyError}
</div>
{/if}
<div class="mt-6 flex justify-end gap-3">
<button
onclick={() => { destroyTarget = null; }}
disabled={destroying}
class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-ui text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
>
Cancel
</button>
<button
onclick={handleDestroy}
disabled={destroying}
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-110 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
>
{#if destroying}
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
Destroying...
{:else}
Destroy
{/if}
</button>
</div>
</div>
</div>
<DestroyDialog
open={true}
capsuleId={destroyTarget.id}
onclose={() => { destroyTarget = null; }}
ondestroyed={handleDestroyed}
destroyFn={destroyAdminCapsule}
/>
{/if}
{#snippet sortableHeader(label: string, key: SortKey)}
<button
onclick={() => toggleSort(key)}
class="flex items-center gap-1 px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)] transition-colors duration-150 hover:text-[var(--color-text-secondary)]"
>
{label}
{#if sortKey === key}
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-[var(--color-accent)]">
{#if sortDir === 'asc'}
<polyline points="18 15 12 9 6 15" />
{:else}
<polyline points="6 9 12 15 18 9" />
{/if}
</svg>
{/if}
</button>
{/snippet}

203
frontend/src/routes/admin/capsules/[id]/+page.svelte
View File

@ -6,6 +6,8 @@
import TerminalTab from '$lib/components/TerminalTab.svelte';
import FilesTab from '$lib/components/FilesTab.svelte';
import MetricsPanel from '$lib/components/MetricsPanel.svelte';
import DestroyDialog from '$lib/components/DestroyDialog.svelte';
import CopyButton from '$lib/components/CopyButton.svelte';
import { toast } from '$lib/toast.svelte';
import {
getAdminCapsule,
@ -29,8 +31,6 @@
// Destroy dialog
let showDestroy = $state(false);
let destroying = $state(false);
let destroyError = $state<string | null>(null);
// Snapshot dialog
let showSnapshot = $state(false);
@ -53,19 +53,6 @@
capsuleLoading = false;
}
async function handleDestroy() {
destroying = true;
destroyError = null;
const result = await destroyAdminCapsule(capsuleId);
if (result.ok) {
toast.success('Capsule destroyed');
goto('/admin/capsules');
} else {
destroyError = result.error;
}
destroying = false;
}
async function handleSnapshot() {
snapshotting = true;
snapshotError = null;
@ -108,13 +95,33 @@
let pollTimer: ReturnType<typeof setInterval> | null = null;
function startPolling() {
stopPolling();
pollTimer = setInterval(loadCapsule, 10_000);
}
function stopPolling() {
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
}
function handleVisibility() {
if (document.hidden) {
stopPolling();
} else {
loadCapsule();
startPolling();
}
}
onMount(() => {
loadCapsule();
pollTimer = setInterval(loadCapsule, 10_000);
startPolling();
document.addEventListener('visibilitychange', handleVisibility);
});
onDestroy(() => {
if (pollTimer) clearInterval(pollTimer);
stopPolling();
document.removeEventListener('visibilitychange', handleVisibility);
});
</script>
@ -143,56 +150,59 @@
</div>
</div>
{:else if capsule}
<!-- Header bar -->
<div class="flex shrink-0 items-center gap-4 border-b border-[var(--color-border)] bg-[var(--color-bg-1)] px-6 py-2.5">
<a
href="/admin/capsules"
class="flex items-center gap-1.5 text-meta text-[var(--color-text-tertiary)] transition-colors duration-150 hover:text-[var(--color-text-secondary)]"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
Capsules
</a>
<div class="h-4 w-px bg-[var(--color-border)]"></div>
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsuleId}</span>
<span
class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em]"
style="color: {statusColor(capsule.status)}; background: {statusBg(capsule.status)}; border: 1px solid {statusBorder(capsule.status)}"
>
{#if capsule.status === 'running'}
<span class="relative flex h-[5px] w-[5px] shrink-0">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
</span>
{/if}
{capsule.status}
</span>
<div class="flex items-center gap-2 text-badge text-[var(--color-text-muted)]">
<span class="font-mono">{capsule.template}</span>
<span class="text-[var(--color-border-mid)]">/</span>
<span class="font-mono">{capsule.vcpus}v · {capsule.memory_mb}MB</span>
</div>
<div class="flex-1"></div>
<!-- Breadcrumb + summary + actions -->
<div class="shrink-0 px-7 pt-8">
<div class="flex items-center gap-2.5">
<a
href="/admin/capsules"
class="font-serif text-page leading-none tracking-[-0.02em] text-[var(--color-text-secondary)] transition-colors duration-150 hover:text-[var(--color-text-bright)]"
>
Capsules
</a>
<span class="text-[var(--color-text-muted)] select-none" style="font-size: 1.1rem">&rsaquo;</span>
<span class="flex items-center gap-1.5">
<span class="font-mono text-[1.1rem] leading-none text-[var(--color-text-bright)]">{capsuleId}</span>
<CopyButton value={capsuleId} />
</span>
{#if capsule.status === 'running' || capsule.status === 'paused'}
<button
onclick={() => { showSnapshot = true; snapshotName = ''; snapshotError = null; }}
disabled={snapshotting}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent)]/8 px-3 py-1.5 text-meta font-medium text-[var(--color-accent-bright)] transition-all duration-150 hover:bg-[var(--color-accent)]/15 hover:border-[var(--color-accent)]/50 disabled:opacity-50"
<span
class="ml-1 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-label font-semibold uppercase tracking-[0.05em]"
style="color: {statusColor(capsule.status)}; background: {statusBg(capsule.status)}; border: 1px solid {statusBorder(capsule.status)}"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H2v13a2 2 0 002 2h16a2 2 0 002-2V7h-5l-2.5-3z" /><circle cx="12" cy="15" r="3" /></svg>
Snapshot
</button>
<button
onclick={() => { showDestroy = true; destroyError = null; }}
disabled={destroying}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-3 py-1.5 text-meta font-medium text-[var(--color-red)] transition-all duration-150 hover:bg-[var(--color-red)]/15 hover:border-[var(--color-red)]/50 disabled:opacity-50"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" /></svg>
Destroy
</button>
{/if}
{#if capsule.status === 'running'}
<span class="relative flex h-[5px] w-[5px] shrink-0">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
</span>
{/if}
{capsule.status}
</span>
<span class="font-mono text-ui text-[var(--color-text-muted)]">{capsule.template} &middot; {capsule.vcpus}v &middot; {capsule.memory_mb}MB</span>
<div class="ml-auto flex items-center gap-2">
{#if capsule.status === 'running' || capsule.status === 'paused'}
<button
onclick={() => { showSnapshot = true; snapshotName = ''; snapshotError = null; }}
disabled={snapshotting}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent)]/8 px-3 py-1.5 text-meta font-medium text-[var(--color-accent-bright)] transition-all duration-150 hover:bg-[var(--color-accent)]/15 hover:border-[var(--color-accent)]/50 disabled:opacity-50"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H2v13a2 2 0 002 2h16a2 2 0 002-2V7h-5l-2.5-3z" /><circle cx="12" cy="15" r="3" /></svg>
Snapshot
</button>
<button
onclick={() => { showDestroy = true; }}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-3 py-1.5 text-meta font-medium text-[var(--color-red)] transition-all duration-150 hover:bg-[var(--color-red)]/15 hover:border-[var(--color-red)]/50"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" /></svg>
Destroy
</button>
{/if}
</div>
</div>
</div>
<div class="mt-5 shrink-0 border-b border-[var(--color-border)]"></div>
<!-- Split panels: 50/50 -->
<div class="flex flex-1 overflow-hidden">
<!-- Left: Terminal -->
@ -214,6 +224,19 @@
</div>
</div>
{/if}
<!-- Status bar -->
<footer
class="flex h-7 shrink-0 items-center justify-end border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-7"
>
<div class="flex items-center gap-1.5">
<span class="relative flex h-[5px] w-[5px]">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
</span>
<span class="font-mono text-label uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
</div>
</footer>
</main>
</div>
@ -302,50 +325,10 @@
</div>
{/if}
<!-- Destroy dialog -->
{#if showDestroy}
<div class="fixed inset-0 z-50 flex items-center justify-center">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="absolute inset-0 bg-black/60"
onclick={() => { if (!destroying) showDestroy = false; }}
onkeydown={(e) => { if (e.key === 'Escape' && !destroying) showDestroy = false; }}
></div>
<div class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Destroy Capsule</h2>
<p class="mt-2 text-ui text-[var(--color-text-tertiary)]">
Terminate <span class="font-mono text-[var(--color-text-secondary)]">{capsuleId}</span> and destroy all data inside it. This cannot be undone.
</p>
{#if destroyError}
<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-meta text-[var(--color-red)]">
{destroyError}
</div>
{/if}
<div class="mt-6 flex justify-end gap-3">
<button
onclick={() => { showDestroy = false; }}
disabled={destroying}
class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-ui text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
>
Cancel
</button>
<button
onclick={handleDestroy}
disabled={destroying}
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-110 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
>
{#if destroying}
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
Destroying...
{:else}
Destroy
{/if}
</button>
</div>
</div>
</div>
{/if}
<DestroyDialog
open={showDestroy}
{capsuleId}
onclose={() => { showDestroy = false; }}
ondestroyed={() => { toast.success('Capsule destroyed'); goto('/admin/capsules'); }}
destroyFn={destroyAdminCapsule}
/>