josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Perk-a-cola redesign + surface RCON map/gametype/roster/health

Browse Source 
Themes the fleet manager around the Electric Cherry perk-a-cola from Mob of
the Dead — cherry-red art-deco label with electric cyan discharge. New
design tokens (Alfa Slab One + Inter + JetBrains Mono, self-hosted), full
redesign of layout/dashboard/cards/detail page, tokens pass on
deployments/betas/pipeline/beta/diff, cherry+lightning favicon.

Lights up server data that RCON was already fetching but the UI dropped.
parsePlayerRoster() extracts num/score/ping/guid/name from both status
dialects. Worker persists last_map/last_gametype/last_roster/last_seen_at/
last_error (new columns with idempotent boot-time ALTERs) and emits them
over SSE. Fleet cards now show health dot, map · gametype, top-3 roster
preview, and last-seen. Detail page adds a sortable full roster with
distinct empty-lobby vs offline states. New health classifier
(online/stale/offline) drives the visual state.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
josh
2026-09-12 08:20:54 -04:00
co-authored by Claude Opus 4.7
parent 854f5532a9
commit 9bff47a9a4
29 changed files with 1636 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+70 -24
View File
@@ -3,6 +3,7 @@
import { startPipelineStream } from '$ui/stores/pipeline.js';
import { startServerStream } from '$ui/stores/servers.js';
import { page } from '$app/stores';
import BrandMark from '$ui/components/BrandMark.svelte';
interface Props { children: import('svelte').Snippet }
let { children }: Props = $props();
@@ -15,10 +16,15 @@
<div class="shell">
<nav>
<a href="/" class:on={$page.url.pathname === '/'}>Fleet</a>
<a href="/deployments" class:on={$page.url.pathname.startsWith('/deployments')}>Deployments</a>
<a href="/betas" class:on={$page.url.pathname.startsWith('/betas')}>Betas</a>
<span class="brand">electric-cherry</span>
<a class="brand-link" href="/" aria-label="Electric Cherry home">
<BrandMark size="md" />
</a>
<div class="tabs">
<a href="/" class:on={$page.url.pathname === '/'}>Fleet</a>
<a href="/deployments" class:on={$page.url.pathname.startsWith('/deployments')}>Deployments</a>
<a href="/betas" class:on={$page.url.pathname.startsWith('/betas')}>Betas</a>
</div>
<div class="strut" aria-hidden="true"></div>
</nav>
<main>
{@render children()}
@@ -26,38 +32,78 @@
</div>
<style>
@import '$ui/styles/tokens.css';
:global(html, body) {
margin: 0;
background: #0a0a0a;
color: #ddd;
font-family: system-ui, -apple-system, sans-serif;
background: var(--cherry-975);
color: var(--ink-100);
font-family: var(--font-body);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
:global(*) { box-sizing: border-box; }
:global(a) { color: var(--spark-400); }
:global(::selection) {
background: var(--cherry-500);
color: var(--cream);
}
.shell { min-height: 100vh; }
nav {
display: flex;
gap: 4px;
padding: 10px 20px;
border-bottom: 1px solid #222;
background: #0f0f0f;
gap: 24px;
padding: 14px 24px;
align-items: center;
background:
linear-gradient(180deg, rgba(200, 16, 46, 0.18) 0%, transparent 100%),
var(--cherry-925);
border-bottom: 1px solid var(--cherry-700);
box-shadow: 0 1px 0 0 rgba(200, 16, 46, 0.25);
}
nav a {
color: #999;
.brand-link {
display: flex;
align-items: center;
text-decoration: none;
padding: 6px 10px;
border-radius: 4px;
}
.tabs {
display: flex;
gap: 4px;
margin-left: 12px;
}
.tabs a {
color: var(--ink-300);
text-decoration: none;
padding: 8px 14px;
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.4px;
position: relative;
transition: color 0.15s;
}
nav a:hover { color: #ddd; background: #1a1a1a; }
nav a.on { color: #ff6060; background: #1a1a1a; }
.brand {
margin-left: auto;
font-family: ui-monospace, monospace;
color: #444;
font-size: 12px;
letter-spacing: 1px;
.tabs a:hover { color: var(--ink-100); }
.tabs a.on {
color: var(--cream);
}
.tabs a.on::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -2px;
height: 2px;
background: var(--spark-500);
box-shadow: var(--spark-glow);
border-radius: 2px;
}
.strut { margin-left: auto; }
main {
padding: 28px 24px 48px;
max-width: 1400px;
margin: 0 auto;
}
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
</style>
src/routes/+page.svelte
+103 -21
View File
@@ -3,6 +3,7 @@
import ServerCard from '$ui/components/ServerCard.svelte';
import PipelineTimeline from '$ui/components/PipelineTimeline.svelte';
import { statusByServer } from '$ui/stores/servers.js';
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
interface HeldRow { target: string; slug: string; }
interface ServerRow {
@@ -12,6 +13,12 @@
game_port: number | null;
rcon_host: string | null;
last_players: number | null;
last_map: string | null;
last_gametype: string | null;
last_seen_at: string | null;
last_error: string | null;
roster: RosterPlayer[] | null;
health: Health;
held: HeldRow[];
}
@@ -44,16 +51,39 @@
: `pushed to ${body.totalChangedServers ?? 0} servers · ${body.totalFiles ?? 0} files`;
}
function playersFor(name: string): number | null {
const s = $statusByServer.get(name);
return s?.players ?? null;
// Live server view — merge SSE data over the initial GET
function liveFor(name: string, fallback: ServerRow) {
const live = $statusByServer.get(name);
if (!live) {
return {
players: fallback.last_players,
map: fallback.last_map,
gametype: fallback.last_gametype,
roster: fallback.roster,
health: fallback.health,
lastSeenAt: fallback.last_seen_at,
lastError: fallback.last_error
};
}
return {
players: live.players,
map: live.map,
gametype: live.gametype,
roster: live.roster,
health: live.health,
lastSeenAt: live.lastSeenAt,
lastError: live.lastError
};
}
</script>
<div class="grid">
<section class="left">
<header class="hdr">
<h1>Fleet</h1>
<div class="title-block">
<h1>Fleet</h1>
<span class="count">{servers.length} server{servers.length === 1 ? '' : 's'}</span>
</div>
<div class="actions">
<button onclick={() => push(true)} disabled={pushing}>dry run</button>
<button class="primary" onclick={() => push(false)} disabled={pushing}>push all</button>
@@ -65,9 +95,16 @@
{:else}
<div class="cards">
{#each servers as s (s.name)}
{@const live = liveFor(s.name, s)}
<ServerCard
name={s.name}
players={playersFor(s.name) ?? s.last_players}
players={live.players}
map={live.map}
gametype={live.gametype}
roster={live.roster}
health={live.health}
lastSeenAt={live.lastSeenAt}
lastError={live.lastError}
held={s.held}
/>
{/each}
@@ -84,7 +121,7 @@
.grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
gap: 24px;
}
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
@@ -92,32 +129,77 @@
.hdr {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--cherry-700);
}
.title-block { display: flex; align-items: baseline; gap: 14px; }
h1 {
margin: 0;
font-size: 22px;
color: #ff6060;
font-family: var(--font-display);
font-size: 32px;
color: var(--cream);
letter-spacing: 2px;
line-height: 1;
}
.count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-500);
letter-spacing: 0.5px;
}
.actions { display: flex; gap: 8px; }
button {
background: #222;
color: #ddd;
border: 1px solid #444;
border-radius: 4px;
padding: 8px 14px;
background: var(--cherry-875);
color: var(--ink-100);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 8px 16px;
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
transition: border-color 0.15s, box-shadow 0.15s;
}
button.primary { background: #ff3030; color: #fff; border-color: #ff3030; font-weight: 600; }
button:disabled { opacity: 0.5; cursor: default; }
button:hover:not(:disabled) {
border-color: var(--spark-500);
box-shadow: var(--spark-glow);
}
button.primary {
background: linear-gradient(180deg, var(--cherry-500), var(--cherry-600));
color: var(--cream);
border-color: var(--cherry-400);
font-weight: 600;
}
button.primary:hover:not(:disabled) {
border-color: var(--spark-500);
box-shadow: var(--spark-glow), 0 0 20px rgba(200, 16, 46, 0.4);
}
button:disabled { opacity: 0.4; cursor: default; }
.cards {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
padding: 40px;
text-align: center;
border: 1px dashed var(--cherry-700);
border-radius: var(--r-md);
}
.flash {
color: var(--spark-400);
margin: 0 0 16px;
font-family: var(--font-mono);
font-size: 12px;
padding: 10px 14px;
background: rgba(34, 224, 255, 0.06);
border: 1px solid rgba(34, 224, 255, 0.25);
border-radius: var(--r-sm);
}
.empty { color: #666; }
.flash { color: #aaa; margin: 0 0 12px; font-family: ui-monospace, monospace; font-size: 12px; }
</style>
src/routes/api/servers/+server.ts
+13
View File
@@ -1,9 +1,22 @@
import { json } from '@sveltejs/kit';
import { listServers, heldByBeta } from '$lib/server/fleet/servers.js';
import { classifyHealth } from '$lib/server/fleet/health.js';
import type { RconPlayer } from '$lib/server/integrations/rcon.js';
function safeJson<T>(raw: string | null): T | null {
if (!raw) return null;
try {
return JSON.parse(raw) as T;
} catch {
return null;
}
}
export async function GET() {
const servers = listServers().map((s) => ({
...s,
roster: safeJson<RconPlayer[]>(s.last_roster),
health: classifyHealth(s.last_seen_at, s.last_error),
held: [...heldByBeta(s.name).entries()].map(([target, slug]) => ({ target, slug }))
}));
return json({ servers });
src/routes/betas/+page.svelte
+12 -2
View File
@@ -27,6 +27,16 @@
{/if}
<style>
h1 { color: #ff6060; margin: 0 0 20px; }
.empty { color: #666; }
h1 {
color: var(--cream);
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 2px;
margin: 0 0 20px;
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
}
</style>
src/routes/deployments/+page.svelte
+67 -31
View File
@@ -31,14 +31,8 @@
return d.servers.some((s) => s.restart_state === 'pending' || s.restart_state === 'failed');
}
function chipColor(state: string): { bg: string; fg: string } {
switch (state) {
case 'done': return { bg: '#2d4a2d', fg: '#a8e6a8' };
case 'failed': return { bg: '#4a2d2d', fg: '#ff8080' };
case 'pending': return { bg: '#3a2f00', fg: '#ffcc55' };
case 'manual': return { bg: '#333', fg: '#aaa' };
default: return { bg: '#222', fg: '#888' };
}
function chipClass(state: string): string {
return `chip chip-${state}`;
}
function ago(iso: string): string {
@@ -89,8 +83,7 @@
</div>
<div class="chips">
{#each d.servers as s (s.server)}
{@const c = chipColor(s.restart_state)}
<span class="chip" style="background:{c.bg};color:{c.fg}" title={s.error ?? ''}>
<span class={chipClass(s.restart_state)} title={s.error ?? ''}>
{s.server}{s.players !== null && s.players > 0 ? ` (${s.players}p)` : ''}
</span>
{/each}
@@ -100,35 +93,78 @@
{/snippet}
<style>
h1 { color: #ff6060; margin: 0 0 20px; }
h1 {
color: var(--cream);
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 2px;
margin: 0 0 20px;
}
h2 {
margin: 30px 0 10px;
font-size: 13px;
margin: 28px 0 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
letter-spacing: 1.5px;
color: var(--ink-300);
}
.row {
display: block;
background: #141414;
border: 1px solid #333;
border-radius: 6px;
padding: 12px;
margin-bottom: 8px;
color: #ddd;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 14px 16px;
margin-bottom: 10px;
color: var(--ink-100);
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.row:hover { border-color: #555; }
.head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.action { font-family: ui-monospace, monospace; font-size: 13px; }
.when { color: #666; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
.head { display: flex; justify-content: space-between; margin-bottom: 8px; align-items: baseline; }
.action { font-family: var(--font-mono); font-size: 13px; color: var(--cream); }
.when { color: var(--ink-500); font-size: 12px; font-family: var(--font-mono); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chip {
padding: 2px 6px;
border-radius: 3px;
padding: 2px 7px;
border-radius: var(--r-sm);
font-size: 11px;
font-family: ui-monospace, monospace;
font-family: var(--font-mono);
border: 1px solid transparent;
}
.chip-done {
background: rgba(34, 224, 255, 0.1);
border-color: rgba(34, 224, 255, 0.3);
color: var(--spark-500);
}
.chip-failed {
background: rgba(255, 48, 80, 0.1);
border-color: rgba(255, 48, 80, 0.3);
color: var(--danger-500);
}
.chip-pending {
background: rgba(255, 176, 32, 0.1);
border-color: rgba(255, 176, 32, 0.3);
color: var(--amber-500);
}
.chip-held {
background: rgba(242, 230, 200, 0.08);
border-color: rgba(242, 230, 200, 0.25);
color: var(--cream);
}
.chip-manual {
background: var(--cherry-925);
border-color: var(--cherry-700);
color: var(--ink-500);
}
.id {
color: var(--ink-700);
font-family: var(--font-mono);
font-size: 11px;
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
}
.id { color: #444; font-family: ui-monospace, monospace; font-size: 11px; }
.empty { color: #666; font-size: 13px; }
</style>
src/routes/deployments/[id]/+page.svelte
+110 -52
View File
@@ -116,88 +116,146 @@
{/if}
<style>
h1 { color: #ff6060; margin: 0 0 4px; font-family: ui-monospace, monospace; font-size: 18px; }
h2 {
margin: 24px 0 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
h1 {
color: var(--cream);
font-family: var(--font-display);
font-size: 24px;
letter-spacing: 1.5px;
margin: 0 0 6px;
}
h2 {
margin: 26px 0 10px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink-300);
}
h3 {
margin: 14px 0 6px;
font-size: 13px;
color: var(--cream);
font-family: var(--font-mono);
}
.meta {
color: var(--ink-500);
font-size: 12px;
margin: 0 0 22px;
font-family: var(--font-mono);
}
h3 { margin: 12px 0 4px; font-size: 13px; color: #ddd; font-family: ui-monospace, monospace; }
.meta { color: #666; font-size: 12px; margin: 0 0 20px; font-family: ui-monospace, monospace; }
.server-grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.srv {
background: #141414;
border: 1px solid #333;
border-radius: 4px;
padding: 10px;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 12px;
}
.srv-done { border-color: #2d4a2d; }
.srv-failed { border-color: #4a2d2d; }
.srv-pending { border-color: #3a2f00; }
.name { font-weight: 600; margin-bottom: 4px; }
.line { font-size: 12px; color: #bbb; }
.line.dim { color: #666; }
.line.err { color: #ff6060; }
.file-group { margin-bottom: 12px; }
.srv-done { border-color: rgba(34, 224, 255, 0.35); }
.srv-failed { border-color: rgba(255, 48, 80, 0.35); }
.srv-pending { border-color: rgba(255, 176, 32, 0.35); }
.srv-held { border-color: rgba(242, 230, 200, 0.3); }
.srv-manual { border-color: var(--ink-500); }
.name {
font-weight: 600;
margin-bottom: 6px;
color: var(--cream);
}
.line { font-size: 12px; color: var(--ink-300); font-family: var(--font-mono); }
.line.dim { color: var(--ink-500); }
.line.err { color: var(--danger-500); }
.file-group { margin-bottom: 16px; }
.file-row {
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
width: 100%;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 3px;
padding: 4px 8px;
margin: 2px 0;
color: #ddd;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 6px 10px;
margin: 3px 0;
color: var(--ink-100);
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color 0.15s;
}
.file-row:hover { border-color: #444; }
.file-row:hover { border-color: var(--spark-500); }
.verb {
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
font-family: ui-monospace, monospace;
padding: 2px 7px;
border-radius: var(--r-sm);
font-size: 10px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.8px;
border: 1px solid transparent;
}
.verb-added {
background: rgba(34, 224, 255, 0.1);
border-color: rgba(34, 224, 255, 0.3);
color: var(--spark-500);
}
.verb-updated {
background: rgba(242, 230, 200, 0.08);
border-color: rgba(242, 230, 200, 0.25);
color: var(--cream);
}
.verb-removed {
background: rgba(255, 48, 80, 0.1);
border-color: rgba(255, 48, 80, 0.3);
color: var(--danger-500);
}
.verb-held {
background: rgba(255, 176, 32, 0.1);
border-color: rgba(255, 176, 32, 0.3);
color: var(--amber-500);
}
.sizes {
margin-left: auto;
color: var(--ink-500);
font-size: 11px;
font-family: var(--font-mono);
}
code { font-family: var(--font-mono); color: var(--ink-100); }
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
}
.verb-added { background: #2d4a2d; color: #a8e6a8; }
.verb-updated { background: #2d3a4a; color: #a8c8e6; }
.verb-removed { background: #4a2d2d; color: #ff8080; }
.verb-held { background: #3a2f00; color: #ffcc55; }
.sizes { margin-left: auto; color: #666; font-size: 11px; font-family: ui-monospace, monospace; }
code { font-family: ui-monospace, monospace; color: #ddd; }
.empty { color: #666; }
.diff-scrim {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.75);
background: rgba(4, 2, 3, 0.85);
z-index: 100;
display: grid;
place-items: center;
backdrop-filter: blur(4px);
}
.diff-modal {
max-width: 1000px;
width: 92%;
max-height: 92vh;
overflow: auto;
background: #0a0a0a;
border: 1px solid #444;
border-radius: 6px;
padding: 16px;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 20px;
box-shadow: var(--shadow-panel);
}
.close {
float: right;
background: #222;
color: #ddd;
border: 1px solid #444;
border-radius: 3px;
padding: 4px 10px;
background: var(--cherry-875);
color: var(--ink-100);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 5px 12px;
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
}
.close:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
</style>
src/routes/servers/[name]/+page.svelte
+223 -66
View File
@@ -2,6 +2,10 @@
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { statusByServer } from '$ui/stores/servers.js';
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
import StatusDot from '$ui/components/StatusDot.svelte';
import PlayerRoster from '$ui/components/PlayerRoster.svelte';
import { gametypeLabel } from '$ui/gametype.js';
interface Server {
name: string;
@@ -12,6 +16,12 @@
rcon_host: string | null;
last_players: number | null;
last_checked_at: string | null;
last_map: string | null;
last_gametype: string | null;
last_seen_at: string | null;
last_error: string | null;
roster: RosterPlayer[] | null;
health: Health;
held: Array<{ target: string; slug: string }>;
}
interface DeploymentRow {
@@ -34,96 +44,243 @@
history = depBody.deployments.filter((d) => d.servers.some((s) => s.server === name));
});
let live = $derived($statusByServer.get(name)?.players);
let live = $derived($statusByServer.get(name));
let effectivePlayers = $derived(live?.players ?? server?.last_players ?? null);
let effectiveMap = $derived(live?.map ?? server?.last_map ?? null);
let effectiveGametype = $derived(live?.gametype ?? server?.last_gametype ?? null);
let effectiveRoster = $derived(live?.roster ?? server?.roster ?? null);
let effectiveHealth = $derived<Health>(live?.health ?? server?.health ?? 'offline');
let effectiveSeen = $derived(live?.lastSeenAt ?? server?.last_seen_at ?? null);
let effectiveErr = $derived(live?.lastError ?? server?.last_error ?? null);
function ago(iso: string | null): string {
if (!iso) return 'never';
const d = Date.now() - new Date(iso).getTime();
if (d < 60_000) return `${Math.max(1, Math.floor(d / 1000))}s ago`;
if (d < 3_600_000) return `${Math.floor(d / 60_000)}m ago`;
if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`;
return `${Math.floor(d / 86_400_000)}d ago`;
}
</script>
{#if server}
<h1>{server.name}</h1>
<div class="stats">
<div class="stat">
<div class="k">players</div>
<div class="v">{live ?? server.last_players ?? '—'}</div>
<section class="hero">
<div class="hero-top">
<div class="name-row">
<StatusDot health={effectiveHealth} size={12} />
<h1>{server.name}</h1>
</div>
<div class="player-block">
<div class="player-count" class:has-players={(effectivePlayers ?? 0) > 0}>
{effectivePlayers ?? '—'}
</div>
<div class="player-label">players</div>
</div>
</div>
<div class="stat">
<div class="k">komodo</div>
<div class="v">{server.komodo_type} · {server.komodo_name}</div>
<div class="hero-meta">
<span class="pair"><span class="k">map</span> <span class="v">{effectiveMap ?? '—'}</span></span>
<span class="pair"><span class="k">mode</span> <span class="v">{gametypeLabel(effectiveGametype) || '—'}</span></span>
<span class="pair"><span class="k">status</span> <span class="v health-{effectiveHealth}">{effectiveHealth}</span></span>
<span class="pair"><span class="k">last seen</span> <span class="v">{ago(effectiveSeen)}</span></span>
</div>
<div class="stat">
<div class="k">rcon</div>
<div class="v">{server.rcon_host ?? 'default'} · port {server.game_port ?? '—'}</div>
</div>
<div class="stat">
<div class="k">last check</div>
<div class="v">{server.last_checked_at ?? '—'}</div>
</div>
<div class="stat">
<div class="k">held by beta</div>
<div class="v">{server.held.length === 0 ? '—' : server.held.map((h) => h.target).join(', ')}</div>
</div>
</div>
{#if effectiveErr && effectiveHealth !== 'online'}
<div class="hero-error">RCON: {effectiveErr}</div>
{/if}
</section>
<h2>Deployment history</h2>
{#if history.length === 0}
<p class="empty">no deployments recorded on this server</p>
{:else}
{#each history as d (d.id)}
{@const mine = d.servers.find((s) => s.server === name)!}
<a class="row row-{mine.restart_state}" href="/deployments/{d.id}">
<span class="a">{d.action}</span>
<span class="s">{mine.restart_state}{mine.players !== null && mine.players > 0 ? ` (${mine.players}p)` : ''}</span>
<span class="f">{mine.files_changed} file{mine.files_changed === 1 ? '' : 's'}</span>
<span class="w">{d.started_at}</span>
{#if mine.error}<span class="err">{mine.error}</span>{/if}
</a>
{/each}
{/if}
<section class="panel">
<h2>Roster</h2>
<PlayerRoster roster={effectiveRoster} health={effectiveHealth} />
</section>
<section class="panel">
<h2>Config</h2>
<div class="stats">
<div class="stat">
<div class="k">komodo</div>
<div class="v mono">{server.komodo_type} · {server.komodo_name}</div>
</div>
<div class="stat">
<div class="k">rcon</div>
<div class="v mono">{server.rcon_host ?? 'default'} · port {server.game_port ?? '—'}</div>
</div>
<div class="stat">
<div class="k">held by beta</div>
<div class="v mono">{server.held.length === 0 ? '—' : server.held.map((h) => h.target).join(', ')}</div>
</div>
</div>
</section>
<section class="panel">
<h2>Deployment history</h2>
{#if history.length === 0}
<p class="empty">no deployments recorded on this server</p>
{:else}
{#each history as d (d.id)}
{@const mine = d.servers.find((s) => s.server === name)!}
<a class="row row-{mine.restart_state}" href="/deployments/{d.id}">
<span class="a">{d.action}</span>
<span class="s">{mine.restart_state}{mine.players !== null && mine.players > 0 ? ` (${mine.players}p)` : ''}</span>
<span class="f">{mine.files_changed} file{mine.files_changed === 1 ? '' : 's'}</span>
<span class="w">{ago(d.started_at)}</span>
{#if mine.error}<span class="err">{mine.error}</span>{/if}
</a>
{/each}
{/if}
</section>
{:else}
<p class="empty">loading…</p>
{/if}
<style>
h1 { color: #ff6060; margin: 0 0 20px; }
h2 {
margin: 30px 0 10px;
font-size: 13px;
.hero {
background:
linear-gradient(180deg, var(--cherry-875) 0%, var(--cherry-925) 100%);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 24px 28px;
margin-bottom: 20px;
box-shadow: var(--shadow-panel);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--cherry-500), var(--spark-500), transparent);
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.name-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
h1 {
margin: 0;
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 1.5px;
color: var(--cream);
line-height: 1;
}
.player-block { text-align: right; }
.player-count {
font-family: var(--font-mono);
font-size: 40px;
font-weight: 500;
color: var(--ink-500);
line-height: 1;
}
.player-count.has-players {
color: var(--spark-500);
text-shadow: var(--spark-glow);
}
.player-label {
font-family: var(--font-body);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
letter-spacing: 1.5px;
color: var(--ink-500);
margin-top: 4px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--cherry-700);
font-size: 13px;
}
.pair { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
.pair .k {
color: var(--ink-500);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.pair .v { color: var(--ink-100); }
.v.health-online { color: var(--spark-500); }
.v.health-stale { color: var(--amber-500); }
.v.health-offline { color: var(--danger-500); }
.hero-error {
margin-top: 12px;
padding: 8px 12px;
background: rgba(255, 48, 80, 0.08);
border: 1px solid rgba(255, 48, 80, 0.25);
color: var(--danger-500);
font-family: var(--font-mono);
font-size: 12px;
border-radius: var(--r-sm);
}
.panel {
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 18px 20px;
margin-bottom: 16px;
}
h2 {
margin: 0 0 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink-300);
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.stat {
background: #141414;
border: 1px solid #333;
border-radius: 4px;
padding: 10px;
background: var(--cherry-875);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 10px 12px;
}
.k { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.v { color: #ddd; font-family: ui-monospace, monospace; margin-top: 4px; }
.stat .k {
color: var(--ink-500);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat .v { color: var(--ink-100); margin-top: 4px; font-size: 13px; }
.mono { font-family: var(--font-mono); }
.row {
display: grid;
grid-template-columns: 200px 160px 100px 220px 1fr;
grid-template-columns: 200px 160px 100px 120px 1fr;
gap: 12px;
padding: 8px 12px;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 4px;
padding: 10px 14px;
background: var(--cherry-875);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
margin: 4px 0;
color: #ddd;
color: var(--ink-100);
text-decoration: none;
font-size: 12px;
font-family: ui-monospace, monospace;
font-family: var(--font-mono);
}
.row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
.row-done { border-left: 3px solid var(--spark-500); }
.row-failed { border-left: 3px solid var(--danger-500); }
.row-pending { border-left: 3px solid var(--amber-500); }
.row-held { border-left: 3px solid var(--cream); }
.row-manual { border-left: 3px solid var(--ink-500); }
.a { color: var(--cream); }
.s { color: var(--ink-300); }
.f { color: var(--ink-500); }
.w { color: var(--ink-500); }
.err { color: var(--danger-500); }
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
}
.row-done { border-left: 3px solid #2d4a2d; }
.row-failed { border-left: 3px solid #4a2d2d; }
.row-pending { border-left: 3px solid #3a2f00; }
.a { color: #ddd; }
.s { color: #aaa; }
.f { color: #888; }
.w { color: #666; }
.err { color: #ff6060; }
.empty { color: #666; }
</style>