feat(admin): apix-admin UI at admin.api-index.org
Deploy to Production / deploy (push) Failing after 47s

Internal maintainer dashboard: global stats, sandbox list with
tier-filter and pagination, sandbox drill-down with D3 world map,
tier-promotion form. API-key auth via HttpOnly cookie. Port 8084,
rolling a/b deploy alongside the existing service pairs.

- apix-common: AdminSandboxSummary, AdminSandboxListResponse, AdminStatsResponse DTOs
- apix-registry: AdminResource (4 endpoints), SandboxService.listAllSandboxes + getGlobalStats
- apix-registry: SandboxResource GET /{uuid}/dashboard endpoint (was missing — fixes portal 500)
- apix-portal: RegistryClient path corrected to /dashboard
- apix-admin: new Quarkus module — auth filter, registry REST client, 3 resources, 6 Qute templates, admin.js
- infra: Dockerfile.admin, docker-compose admin-a/b services, Caddyfile admin.api-index.org block
- scripts: deploy-bluegreen.sh extended for admin-a/b

Co-Authored-By: Mira Rehfeld <noreply@anthropic.com>
This commit is contained in:
Carsten Rehfeld
2026-05-16 21:18:48 +02:00
parent e385d05ce1
commit 82a379e536
32 changed files with 1300 additions and 32 deletions
+70
View File
@@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.botstandards</groupId>
<artifactId>apix-parent</artifactId>
<version>${revision}</version>
</parent>
<artifactId>apix-admin</artifactId>
<name>APIX :: Admin</name>
<description>Internal maintainer UI at admin.api-index.org. API-key auth, no username/password. Port 8084.</description>
<dependencies>
<dependency>
<groupId>org.botstandards</groupId>
<artifactId>apix-common</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-rest</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-rest-qute</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-rest-client</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-rest-client-jackson</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-smallrye-health</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-junit5</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>${quarkus.platform.group-id}</groupId>
<artifactId>quarkus-maven-plugin</artifactId>
<extensions>true</extensions>
<executions>
<execution>
<goals>
<goal>build</goal>
<goal>generate-code</goal>
<goal>generate-code-tests</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
@@ -0,0 +1,46 @@
package org.botstandards.apix.admin.client;
import jakarta.ws.rs.*;
import jakarta.ws.rs.core.MediaType;
import org.botstandards.apix.common.*;
import org.eclipse.microprofile.rest.client.inject.RegisterRestClient;
import java.util.Map;
@RegisterRestClient(configKey = "registry")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public interface AdminRegistryClient {
@GET
@Path("/admin/sandboxes")
AdminSandboxListResponse listSandboxes(
@HeaderParam("X-Admin-Key") String adminKey,
@QueryParam("page") int page,
@QueryParam("size") int size,
@QueryParam("tier") String tier);
@GET
@Path("/admin/stats")
AdminStatsResponse stats(@HeaderParam("X-Admin-Key") String adminKey);
@GET
@Path("/admin/sandboxes/{uuid}")
SandboxDashboardResponse sandboxDetail(
@HeaderParam("X-Admin-Key") String adminKey,
@PathParam("uuid") String uuid);
@PATCH
@Path("/admin/sandboxes/{uuid}/tier")
Map<String, Object> promoteTier(
@HeaderParam("X-Admin-Key") String adminKey,
@PathParam("uuid") String uuid,
Map<String, String> body);
@PATCH
@Path("/sandbox/admin/{uuid}/tier")
Map<String, Object> promoteTierLegacy(
@HeaderParam("X-Admin-Key") String adminKey,
@PathParam("uuid") String uuid,
Map<String, String> body);
}
@@ -0,0 +1,41 @@
package org.botstandards.apix.admin.filter;
import jakarta.ws.rs.container.ContainerRequestContext;
import jakarta.ws.rs.container.ContainerRequestFilter;
import jakarta.ws.rs.core.Cookie;
import jakarta.ws.rs.core.Response;
import jakarta.ws.rs.core.UriInfo;
import jakarta.ws.rs.ext.Provider;
import org.eclipse.microprofile.config.inject.ConfigProperty;
import java.io.IOException;
import java.net.URI;
@Provider
public class AdminAuthFilter implements ContainerRequestFilter {
@ConfigProperty(name = "apix.admin.key")
String adminKey;
@ConfigProperty(name = "apix.admin.cookie-name")
String cookieName;
private static final java.util.Set<String> PUBLIC_PATHS = java.util.Set.of(
"/login", "/q/health", "/q/health/live", "/q/health/ready"
);
@Override
public void filter(ContainerRequestContext ctx) throws IOException {
UriInfo uri = ctx.getUriInfo();
String path = "/" + uri.getPath();
for (String pub : PUBLIC_PATHS) {
if (path.startsWith(pub)) return;
}
Cookie session = ctx.getCookies().get(cookieName);
if (session != null && adminKey.equals(session.getValue())) return;
ctx.abortWith(Response.seeOther(URI.create("/login")).build());
}
}
@@ -0,0 +1,62 @@
package org.botstandards.apix.admin.resource;
import com.fasterxml.jackson.databind.ObjectMapper;
import io.quarkus.qute.CheckedTemplate;
import io.quarkus.qute.TemplateInstance;
import jakarta.inject.Inject;
import jakarta.ws.rs.*;
import jakarta.ws.rs.core.*;
import org.botstandards.apix.common.AdminStatsResponse;
import org.botstandards.apix.common.SandboxDashboardResponse;
import org.botstandards.apix.admin.client.AdminRegistryClient;
import org.eclipse.microprofile.config.inject.ConfigProperty;
import org.eclipse.microprofile.rest.client.inject.RestClient;
import org.jboss.logging.Logger;
@Path("/")
@Produces(MediaType.TEXT_HTML)
public class DashboardResource {
private static final Logger LOG = Logger.getLogger(DashboardResource.class);
@Inject @RestClient
AdminRegistryClient registry;
@Inject
ObjectMapper mapper;
@ConfigProperty(name = "apix.admin.key")
String adminKey;
@CheckedTemplate
static class Templates {
static native TemplateInstance global(AdminStatsResponse stats, String statsJson);
static native TemplateInstance sandbox(SandboxDashboardResponse dashboard, String dataJson);
static native TemplateInstance error(String message);
}
@GET
public TemplateInstance globalDashboard() {
try {
AdminStatsResponse stats = registry.stats(adminKey);
String json = mapper.writeValueAsString(stats).replace("</", "<\\/");
return Templates.global(stats, json);
} catch (Exception e) {
LOG.errorf(e, "Failed to load global stats");
return Templates.error("Could not load stats from registry");
}
}
@GET
@Path("/sandbox/{uuid}")
public TemplateInstance sandboxDashboard(@PathParam("uuid") String uuid) {
try {
SandboxDashboardResponse dashboard = registry.sandboxDetail(adminKey, uuid);
String json = mapper.writeValueAsString(dashboard).replace("</", "<\\/");
return Templates.sandbox(dashboard, json);
} catch (Exception e) {
LOG.errorf(e, "Failed to load sandbox %s", uuid);
return Templates.error("Could not load sandbox " + uuid);
}
}
}
@@ -0,0 +1,59 @@
package org.botstandards.apix.admin.resource;
import io.quarkus.qute.CheckedTemplate;
import io.quarkus.qute.TemplateInstance;
import jakarta.ws.rs.*;
import jakarta.ws.rs.core.*;
import org.eclipse.microprofile.config.inject.ConfigProperty;
import java.net.URI;
@Path("/login")
public class LoginResource {
@ConfigProperty(name = "apix.admin.key")
String adminKey;
@ConfigProperty(name = "apix.admin.cookie-name")
String cookieName;
@CheckedTemplate
static class Templates {
static native TemplateInstance login(boolean invalid);
}
@GET
@Produces(MediaType.TEXT_HTML)
public TemplateInstance loginPage() {
return Templates.login(false);
}
@POST
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
public Response authenticate(@FormParam("key") String key) {
if (key == null || !adminKey.equals(key.strip())) {
return Response.ok(Templates.login(true).render())
.type(MediaType.TEXT_HTML)
.build();
}
NewCookie session = new NewCookie.Builder(cookieName)
.value(adminKey)
.path("/")
.httpOnly(true)
.sameSite(NewCookie.SameSite.STRICT)
.maxAge(28800) // 8 hours
.build();
return Response.seeOther(URI.create("/")).cookie(session).build();
}
@GET
@Path("/logout")
public Response logout() {
NewCookie expired = new NewCookie.Builder(cookieName)
.value("")
.path("/")
.maxAge(0)
.build();
return Response.seeOther(URI.create("/login")).cookie(expired).build();
}
}
@@ -0,0 +1,61 @@
package org.botstandards.apix.admin.resource;
import io.quarkus.qute.CheckedTemplate;
import io.quarkus.qute.TemplateInstance;
import jakarta.inject.Inject;
import jakarta.ws.rs.*;
import jakarta.ws.rs.core.*;
import org.botstandards.apix.common.AdminSandboxListResponse;
import org.botstandards.apix.admin.client.AdminRegistryClient;
import org.eclipse.microprofile.config.inject.ConfigProperty;
import org.eclipse.microprofile.rest.client.inject.RestClient;
import org.jboss.logging.Logger;
import java.net.URI;
import java.util.Map;
@Path("/sandboxes")
@Produces(MediaType.TEXT_HTML)
public class SandboxListResource {
private static final Logger LOG = Logger.getLogger(SandboxListResource.class);
@Inject @RestClient
AdminRegistryClient registry;
@ConfigProperty(name = "apix.admin.key")
String adminKey;
@CheckedTemplate
static class Templates {
static native TemplateInstance list(AdminSandboxListResponse result, int page, int size, String tier);
static native TemplateInstance error(String message);
}
@GET
public TemplateInstance list(
@QueryParam("page") @DefaultValue("0") int page,
@QueryParam("size") @DefaultValue("50") int size,
@QueryParam("tier") @DefaultValue("") String tier) {
try {
String tierParam = tier.isBlank() ? null : tier;
AdminSandboxListResponse result = registry.listSandboxes(adminKey, page, size, tierParam);
return Templates.list(result, page, size, tier);
} catch (Exception e) {
LOG.errorf(e, "Failed to load sandbox list");
return Templates.error("Could not load sandbox list");
}
}
@POST
@Path("/{uuid}/promote")
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
public Response promote(@PathParam("uuid") String uuid, @FormParam("tier") String tier) {
try {
registry.promoteTier(adminKey, uuid, Map.of("tier", tier.toUpperCase()));
} catch (Exception e) {
LOG.errorf(e, "Failed to promote sandbox %s to %s", uuid, tier);
}
return Response.seeOther(URI.create("/sandbox/" + uuid)).build();
}
}
@@ -0,0 +1,128 @@
/* admin.js — shared between global dashboard and sandbox drill-down */
(function () {
// ── Relative expiry display ─────────────────────────────────────────────────
const expiresRaw = document.getElementById('expires-raw');
const expiresVal = document.getElementById('expires-val');
if (expiresRaw && expiresVal) {
const d = new Date(expiresRaw.textContent.trim());
const days = Math.round((d - Date.now()) / 86400000);
expiresVal.textContent = days < 0 ? `expired ${-days}d ago` : `${days}d left`;
expiresVal.style.color = days < 7 ? '#f85149' : days < 30 ? '#e3b341' : '#3fb950';
}
// ── Request count formatting ────────────────────────────────────────────────
const reqFmt = document.getElementById('req-fmt');
if (reqFmt && window.__D) {
const n = __D.totalRequests || 0;
reqFmt.textContent = n >= 1e6 ? (n / 1e6).toFixed(1) + 'M'
: n >= 1e3 ? (n / 1e3).toFixed(1) + 'k'
: n.toString();
}
// ── Timestamp ───────────────────────────────────────────────────────────────
const ts = document.getElementById('refresh-ts');
if (ts) ts.textContent = 'loaded ' + new Date().toLocaleTimeString();
// ── D3 world map ────────────────────────────────────────────────────────────
const mapEl = document.getElementById('world-map');
if (!mapEl || typeof d3 === 'undefined') return;
const W = mapEl.parentElement.clientWidth || 960;
const H = Math.round(W * 0.42);
mapEl.setAttribute('viewBox', `0 0 ${W} ${H}`);
mapEl.style.height = H + 'px';
const projection = d3.geoNaturalEarth1()
.scale(W / 6.3)
.translate([W / 2, H / 2]);
const path = d3.geoPath().projection(projection);
const svg = d3.select(mapEl);
const TIER_COLORS = {
FREE: '#484f58', STANDARD: '#388bfd', PROFESSIONAL: '#a371f7',
COMMUNITY: '#3fb950', FOUNDER: '#e3b341', DEMO: '#58a6ff'
};
fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json')
.then(r => r.json())
.then(world => {
svg.append('g').selectAll('path')
.data(topojson.feature(world, world.objects.countries).features)
.join('path')
.attr('d', path)
.attr('fill', '#0d2033')
.attr('stroke', '#1c2d3f')
.attr('stroke-width', 0.4);
// Points: from stats (global) or sandbox (drill-down)
let points = [];
if (window.__D) {
if (__D.registrarPoints) {
// global dashboard
points = __D.registrarPoints.map(p => ({
lat: p.lat, lon: p.lon, label: p.name, tier: p.tier, type: 'registrar'
}));
} else if (__D.registrarLat != null) {
// sandbox drill-down — registrar star
points.push({ lat: __D.registrarLat, lon: __D.registrarLon, label: __D.name, tier: __D.tier, type: 'registrar' });
// agent visits
(__D.recentVisits || []).forEach(v => {
points.push({ lat: v.lat, lon: v.lon, type: 'agent' });
});
}
}
// Agent blinks
svg.append('g').selectAll('circle.agent')
.data(points.filter(p => p.type === 'agent'))
.join('circle')
.attr('class', 'agent-blink')
.attr('cx', p => projection([p.lon, p.lat])?.[0])
.attr('cy', p => projection([p.lon, p.lat])?.[1])
.attr('r', 3)
.style('animation-delay', (_, i) => `${(i * 0.4) % 2.8}s`);
// Registrar stars
svg.append('g').selectAll('text.star')
.data(points.filter(p => p.type === 'registrar'))
.join('text')
.attr('class', 'registrar-star')
.attr('x', p => projection([p.lon, p.lat])?.[0])
.attr('y', p => projection([p.lon, p.lat])?.[1])
.attr('fill', p => TIER_COLORS[p.tier] || '#ffd700')
.text('★')
.append('title').text(p => `${p.label} (${p.tier})`);
});
// ── Tier donut (global dashboard only) ─────────────────────────────────────
const donutEl = document.getElementById('donut');
const legendEl = document.getElementById('tier-legend');
if (donutEl && window.__D && __D.byTier) {
const data = Object.entries(__D.byTier).map(([tier, count]) => ({ tier, count }));
const total = data.reduce((s, d) => s + d.count, 0);
const cx = 60, cy = 60, r = 46, ri = 28;
const svgD = d3.select(donutEl);
const pie = d3.pie().value(d => d.count).sort(null);
const arc = d3.arc().innerRadius(ri).outerRadius(r);
svgD.append('g').attr('transform', `translate(${cx},${cy})`)
.selectAll('path').data(pie(data)).join('path')
.attr('d', arc)
.attr('fill', d => TIER_COLORS[d.data.tier] || '#484f58')
.attr('stroke', '#0d1117').attr('stroke-width', 1.5)
.append('title').text(d => `${d.data.tier}: ${d.data.count}`);
svgD.append('text').attr('x', cx).attr('y', cy + 5)
.attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
.attr('fill', '#e6edf3').attr('font-size', '18').attr('font-weight', '700')
.text(total);
data.forEach(d => {
const li = document.createElement('li');
li.innerHTML = `<span class="tier-dot" style="background:${TIER_COLORS[d.tier] || '#484f58'}"></span>
<span style="color:#8b949e">${d.tier}</span>
<span style="margin-left:auto;color:#e6edf3">${d.count}</span>`;
legendEl.appendChild(li);
});
}
})();
@@ -0,0 +1,14 @@
quarkus.http.port=8084
quarkus.smallrye-health.root-path=/q/health
quarkus.log.level=${LOG_LEVEL:INFO}
# Registry REST client — all admin API calls go through here
quarkus.rest-client.registry.url=${APIX_REGISTRY_URL:http://registry:8180}
quarkus.rest-client.registry.connect-timeout=5000
quarkus.rest-client.registry.read-timeout=15000
# Admin API key — must match APIX_API_KEY on the registry
apix.admin.key=${APIX_API_KEY:dev-insecure-key-change-in-prod}
# Session cookie name
apix.admin.cookie-name=apix_admin_session
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>APIX Admin — Error</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas',monospace; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.card { text-align: center; }
.label { font-size: 0.75rem; color: #f85149; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.msg { color: #8b949e; font-size: 0.9rem; margin-bottom: 1.5rem; }
a { color: #58a6ff; }
</style>
</head>
<body>
<div class="card">
<div class="label">ERROR</div>
<div class="msg">{message}</div>
<a href="/">← Back to dashboard</a>
</div>
</body>
</html>
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APIX Admin — Dashboard</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas','Fira Code',monospace; font-size: 14px; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
nav {
display: flex; align-items: center; gap: 1.5rem;
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d;
background: #161b22;
}
.nav-logo { color: #8b949e; font-size: 0.75rem; }
.nav-logo span { color: #e6edf3; font-weight: 600; font-size: 0.9rem; }
.nav-link { font-size: 0.8rem; color: #8b949e; }
.nav-link.active, .nav-link:hover { color: #e6edf3; }
.nav-right { margin-left: auto; }
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px; background: #21262d; border-bottom: 1px solid #21262d;
}
.stat { background: #0d1117; padding: 1.2rem 1.5rem; }
.stat-label { font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.stat-value { font-size: 1.8rem; color: #e6edf3; font-weight: 700; }
.stat-sub { font-size: 0.7rem; color: #484f58; margin-top: 0.2rem; }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 1px; background: #21262d; }
.panel { background: #0d1117; padding: 1.5rem; }
.panel-title { font-size: 0.7rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
#map-wrap { background: #060d18; border-bottom: 1px solid #21262d; }
#world-map { display: block; width: 100%; }
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; }
#donut { width: 120px; height: 120px; flex-shrink: 0; }
.tier-list { list-style: none; }
.tier-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; margin-bottom: 0.4rem; }
.tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.footer { padding: 0.75rem 1.5rem; border-top: 1px solid #21262d; font-size: 0.7rem; color: #484f58; display: flex; justify-content: space-between; }
@keyframes star-glow {
0%,100% { filter: drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 6px #ffd70066); }
50% { filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 18px #ffd700aa); }
}
.registrar-star { font-size: 12px; fill: #ffd700; dominant-baseline: central; text-anchor: middle; animation: star-glow 2.4s ease-in-out infinite; cursor: default; }
</style>
</head>
<body>
<nav>
<div class="nav-logo">APIX · <span>Admin</span></div>
<a class="nav-link active" href="/">Dashboard</a>
<a class="nav-link" href="/sandboxes">Sandboxes</a>
<div class="nav-right"><a class="nav-link" href="/login/logout">Sign out</a></div>
</nav>
<div class="stats-grid">
<div class="stat">
<div class="stat-label">Total Sandboxes</div>
<div class="stat-value">{stats.totalSandboxes}</div>
<div class="stat-sub">{stats.activeSandboxes} active · {stats.expiredSandboxes} expired</div>
</div>
<div class="stat">
<div class="stat-label">Services registered</div>
<div class="stat-value">{stats.totalServices}</div>
<div class="stat-sub">across all sandboxes</div>
</div>
<div class="stat">
<div class="stat-label">Total Requests</div>
<div class="stat-value" id="req-fmt"></div>
<div class="stat-sub">cumulative</div>
</div>
</div>
<div id="map-wrap"><svg id="world-map"></svg></div>
<div class="layout">
<div class="panel">
<div class="panel-title">Tier distribution</div>
<div class="donut-wrap">
<svg id="donut" viewBox="0 0 120 120"></svg>
<ul class="tier-list" id="tier-legend"></ul>
</div>
</div>
<div class="panel">
<div class="panel-title">Quick links</div>
<p style="font-size:0.8rem;color:#8b949e;line-height:1.8">
<a href="/sandboxes">All sandboxes →</a><br>
<a href="/sandboxes?tier=COMMUNITY">COMMUNITY tier →</a><br>
<a href="/sandboxes?tier=FREE">FREE tier →</a><br>
<a href="/sandboxes?tier=FOUNDER">FOUNDER tier →</a>
</p>
</div>
</div>
<div class="footer">
<span>APIX Admin · internal</span>
<span id="refresh-ts"></span>
</div>
<script>var __D = {statsJson.raw};</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
<script src="/admin.js"></script>
</body>
</html>
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{dashboard.name} · APIX Admin</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas','Fira Code',monospace; font-size: 14px; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
nav {
display: flex; align-items: center; gap: 1.5rem;
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d; background: #161b22;
}
.nav-logo { color: #8b949e; font-size: 0.75rem; }
.nav-logo span { color: #e6edf3; font-weight: 600; font-size: 0.9rem; }
.nav-link { font-size: 0.8rem; color: #8b949e; }
.nav-link:hover { color: #e6edf3; }
.nav-right { margin-left: auto; }
.header { padding: 1rem 1.5rem; border-bottom: 1px solid #21262d; display: flex; align-items: center; gap: 1rem; }
.sb-name { font-size: 1rem; color: #e6edf3; font-weight: 600; }
.tier-badge {
background: #161b22; border: 1px solid #30363d;
color: #8b949e; padding: 0.1rem 0.5rem; border-radius: 12px;
font-size: 0.7rem; letter-spacing: 0.05em;
}
.sb-id { font-size: 0.75rem; color: #484f58; }
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
gap: 1px; background: #21262d; border-bottom: 1px solid #21262d;
}
.stat { background: #0d1117; padding: 1rem 1.5rem; }
.stat-label { font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.stat-value { font-size: 1.4rem; color: #e6edf3; font-weight: 600; }
.stat-sub { font-size: 0.7rem; color: #484f58; margin-top: 0.2rem; }
#map-wrap { background: #060d18; }
#world-map { display: block; width: 100%; }
.actions { padding: 1.5rem; border-top: 1px solid #21262d; display: flex; gap: 1rem; flex-wrap: wrap; }
.actions-title { width: 100%; font-size: 0.7rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
form { display: flex; gap: 0.5rem; align-items: center; }
select, button {
background: #161b22; border: 1px solid #30363d; color: #c9d1d9;
font-family: inherit; font-size: 0.8rem;
border-radius: 4px; padding: 0.4rem 0.7rem; cursor: pointer;
}
select:focus, button:focus { outline: none; border-color: #58a6ff; }
button.promote { background: #238636; border-color: #238636; color: #fff; font-weight: 600; }
button.promote:hover { background: #2ea043; }
.footer { padding: 0.75rem 1.5rem; border-top: 1px solid #21262d; font-size: 0.7rem; color: #484f58; }
@keyframes star-glow {
0%,100% { filter: drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 6px #ffd70066); }
50% { filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 18px #ffd700aa); }
}
.registrar-star { font-size: 14px; fill: #ffd700; dominant-baseline: central; text-anchor: middle; animation: star-glow 2.4s ease-in-out infinite; }
@keyframes blink-pulse {
0% { opacity:0; r:2; } 25% { opacity:0.9; r:5; } 65% { opacity:0.4; r:4; } 100% { opacity:0; r:2; }
}
.agent-blink { fill: #3d8bfd; opacity:0; animation: blink-pulse 2.8s ease-in-out infinite; }
</style>
</head>
<body>
<nav>
<div class="nav-logo">APIX · <span>Admin</span></div>
<a class="nav-link" href="/">Dashboard</a>
<a class="nav-link" href="/sandboxes">Sandboxes</a>
<div class="nav-right"><a class="nav-link" href="/login/logout">Sign out</a></div>
</nav>
<div class="header">
<span class="sb-name">{dashboard.name}</span>
<span class="tier-badge">{dashboard.tier}</span>
<span class="sb-id">{dashboard.sandboxId}</span>
</div>
<div class="stats-grid">
<div class="stat">
<div class="stat-label">Services</div>
<div class="stat-value">{#if dashboard.usage.get('SERVICE_REGISTERED') != null}{dashboard.usage.get('SERVICE_REGISTERED')}{#else}0{/if}</div>
<div class="stat-sub">of {#if dashboard.maxServices != null}{dashboard.maxServices}{#else}∞{/if} allowed</div>
</div>
<div class="stat">
<div class="stat-label">Searches</div>
<div class="stat-value">{#if dashboard.usage.get('SERVICE_SEARCHED') != null}{dashboard.usage.get('SERVICE_SEARCHED')}{#else}0{/if}</div>
<div class="stat-sub">capability discovery calls</div>
</div>
<div class="stat">
<div class="stat-label">Rate limit</div>
<div class="stat-value">{dashboard.ratePerMinute}</div>
<div class="stat-sub">req / min</div>
</div>
<div class="stat">
<div class="stat-label">Expires</div>
<div class="stat-value" id="expires-val"></div>
<div class="stat-sub" id="expires-raw">{dashboard.expiresAt}</div>
</div>
{#if dashboard.registrarLocation != null}
<div class="stat">
<div class="stat-label">Location</div>
<div class="stat-value" style="font-size:1rem">{dashboard.registrarLocation}</div>
<div class="stat-sub">owner-declared</div>
</div>
{/if}
</div>
<div id="map-wrap"><svg id="world-map"></svg></div>
<div class="actions">
<div class="actions-title">Admin actions</div>
<form method="POST" action="/sandboxes/{dashboard.sandboxId}/promote">
<select name="tier">
<option value="FREE">FREE</option>
<option value="STANDARD">STANDARD</option>
<option value="PROFESSIONAL">PROFESSIONAL</option>
<option value="COMMUNITY">COMMUNITY</option>
<option value="FOUNDER">FOUNDER</option>
<option value="DEMO">DEMO</option>
</select>
<button type="submit" class="promote">Promote tier</button>
</form>
</div>
<div class="footer">sandbox id: {dashboard.sandboxId} · created {dashboard.createdAt}</div>
<script>var __D = {dataJson.raw};</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
<script src="/admin.js"></script>
</body>
</html>
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APIX Admin — Login</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0d1117; color: #c9d1d9;
font-family: 'SF Mono', 'Consolas', 'Fira Code', monospace;
display: flex; align-items: center; justify-content: center;
min-height: 100vh;
}
.card {
width: 380px;
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
padding: 2rem;
}
.logo { color: #8b949e; font-size: 0.75rem; letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.logo span { color: #e6edf3; font-size: 1rem; font-weight: 600; }
label { display: block; font-size: 0.75rem; color: #8b949e; margin-bottom: 0.4rem; letter-spacing: 0.04em; }
input[type=password] {
width: 100%; padding: 0.6rem 0.8rem;
background: #0d1117; border: 1px solid #30363d;
border-radius: 4px; color: #e6edf3;
font-family: inherit; font-size: 0.9rem;
outline: none; margin-bottom: 1rem;
}
input[type=password]:focus { border-color: #58a6ff; }
button {
width: 100%; padding: 0.65rem;
background: #238636; border: none;
border-radius: 4px; color: #fff;
font-family: inherit; font-size: 0.9rem;
cursor: pointer; font-weight: 600;
}
button:hover { background: #2ea043; }
.error {
background: #2d1b1b; border: 1px solid #f85149;
color: #f85149; border-radius: 4px;
padding: 0.5rem 0.8rem; font-size: 0.8rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="card">
<div class="logo">APIX · <span>Admin</span></div>
{#if invalid}<div class="error">Invalid admin key. Try again.</div>{/if}
<form method="POST" action="/login">
<label>Admin API Key</label>
<input type="password" name="key" autofocus autocomplete="current-password" placeholder="apix_...">
<button type="submit">Sign in</button>
</form>
</div>
</body>
</html>
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Error · APIX Admin</title>
<style>* { box-sizing:border-box;margin:0;padding:0; } body { background:#0d1117;color:#c9d1d9;font-family:monospace;display:flex;align-items:center;justify-content:center;min-height:100vh; } .card { text-align:center; } .label { color:#f85149;font-size:.75rem;margin-bottom:.5rem; } .msg { color:#8b949e;margin-bottom:1.5rem; } a { color:#58a6ff; }</style>
</head>
<body><div class="card"><div class="label">ERROR</div><div class="msg">{message}</div><a href="/sandboxes">← Back to list</a></div></body>
</html>
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sandboxes · APIX Admin</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas','Fira Code',monospace; font-size: 13px; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
nav {
display: flex; align-items: center; gap: 1.5rem;
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d; background: #161b22;
}
.nav-logo { color: #8b949e; font-size: 0.75rem; }
.nav-logo span { color: #e6edf3; font-weight: 600; font-size: 0.9rem; }
.nav-link { font-size: 0.8rem; color: #8b949e; }
.nav-link.active, .nav-link:hover { color: #e6edf3; }
.nav-right { margin-left: auto; }
.toolbar {
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d;
display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
}
.toolbar-label { font-size: 0.7rem; color: #484f58; }
.filter-link {
font-size: 0.75rem; color: #8b949e;
padding: 0.2rem 0.6rem; border: 1px solid #30363d; border-radius: 12px;
}
.filter-link:hover, .filter-link.active { color: #e6edf3; border-color: #58a6ff; }
.count { margin-left: auto; font-size: 0.75rem; color: #484f58; }
table { width: 100%; border-collapse: collapse; }
th {
text-align: left; padding: 0.6rem 1.5rem;
font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em;
border-bottom: 1px solid #21262d; background: #161b22;
}
td { padding: 0.55rem 1.5rem; border-bottom: 1px solid #161b22; vertical-align: middle; }
tr:hover td { background: #161b22; }
.tier-badge {
background: #0d1117; border: 1px solid #30363d;
color: #8b949e; padding: 0.1rem 0.4rem; border-radius: 10px;
font-size: 0.65rem; letter-spacing: 0.04em;
}
.tier-COMMUNITY { border-color: #1f6feb; color: #58a6ff; }
.tier-FOUNDER { border-color: #9e6a03; color: #e3b341; }
.tier-DEMO { border-color: #388bfd; color: #79c0ff; }
.expired { color: #f85149; }
.ok { color: #3fb950; }
.pagination { padding: 1rem 1.5rem; display: flex; gap: 1rem; align-items: center; border-top: 1px solid #21262d; }
.page-link { font-size: 0.8rem; color: #58a6ff; }
.page-info { font-size: 0.75rem; color: #484f58; }
</style>
</head>
<body>
<nav>
<div class="nav-logo">APIX · <span>Admin</span></div>
<a class="nav-link" href="/">Dashboard</a>
<a class="nav-link active" href="/sandboxes">Sandboxes</a>
<div class="nav-right"><a class="nav-link" href="/login/logout">Sign out</a></div>
</nav>
<div class="toolbar">
<span class="toolbar-label">Filter:</span>
<a class="filter-link {#if tier == ''}active{/if}" href="/sandboxes">All</a>
<a class="filter-link {#if tier == 'FREE'}active{/if}" href="/sandboxes?tier=FREE">FREE</a>
<a class="filter-link {#if tier == 'COMMUNITY'}active{/if}" href="/sandboxes?tier=COMMUNITY">COMMUNITY</a>
<a class="filter-link {#if tier == 'FOUNDER'}active{/if}" href="/sandboxes?tier=FOUNDER">FOUNDER</a>
<a class="filter-link {#if tier == 'DEMO'}active{/if}" href="/sandboxes?tier=DEMO">DEMO</a>
<span class="count">{result.total} total</span>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Tier</th>
<th>Services</th>
<th>Requests</th>
<th>Location</th>
<th>Expires</th>
</tr>
</thead>
<tbody>
{#for sb in result.sandboxes}
<tr>
<td><a href="/sandbox/{sb.sandboxId}">{sb.name}</a>
<div style="font-size:0.65rem;color:#484f58;margin-top:2px">{sb.sandboxId}</div>
</td>
<td><span class="tier-badge tier-{sb.tier}">{sb.tier}</span></td>
<td>{sb.serviceCount}</td>
<td>{sb.totalRequests}</td>
<td>{#if sb.location != null}{sb.location}{#else}<span style="color:#484f58"></span>{/if}</td>
<td class="{#if sb.expired}expired{#else}ok{/if}" data-expires="{sb.expiresAt}">{sb.expiresAt}</td>
</tr>
{/for}
</tbody>
</table>
<div class="pagination">
{#if page > 0}
<a class="page-link" href="/sandboxes?page={page - 1}&size={size}&tier={tier}">← Previous</a>
{/if}
<span class="page-info">Page {page + 1} · {result.sandboxes.size} of {result.total}</span>
{#if (page + 1) * size < result.total}
<a class="page-link" href="/sandboxes?page={page + 1}&size={size}&tier={tier}">Next →</a>
{/if}
</div>
<script>
document.querySelectorAll('[data-expires]').forEach(td => {
const d = new Date(td.dataset.expires);
const now = new Date();
const days = Math.round((d - now) / 86400000);
td.textContent = days < 0 ? `expired ${-days}d ago` : `in ${days}d`;
});
</script>
</body>
</html>