style(ui): improve code formatting and consistency in App.svelte
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -33,3 +33,4 @@ bin/
|
||||
OB1/
|
||||
ui/node_modules/
|
||||
ui/.svelte-kit/
|
||||
internal/app/ui/dist
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
17
internal/app/ui/dist/index.html
vendored
17
internal/app/ui/dist/index.html
vendored
@@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AMCS</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="AMCS is a memory server that captures, links, and retrieves structured project thoughts for AI assistants using semantic search, summaries, and MCP tools."
|
||||
/>
|
||||
<script type="module" crossorigin src="/assets/index-CAayb6ka.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BDhMN0_9.css">
|
||||
</head>
|
||||
<body class="bg-slate-950">
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
1291
ui/pnpm-lock.yaml
generated
Normal file
1291
ui/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount } from "svelte";
|
||||
|
||||
type AccessEntry = {
|
||||
key_id: string;
|
||||
@@ -23,26 +23,26 @@
|
||||
|
||||
let data: StatusResponse | null = null;
|
||||
let loading = true;
|
||||
let error = '';
|
||||
let error = "";
|
||||
|
||||
const quickLinks = [
|
||||
{ href: '/llm', label: 'LLM Instructions' },
|
||||
{ href: '/healthz', label: 'Health Check' },
|
||||
{ href: '/readyz', label: 'Readiness Check' }
|
||||
{ href: "/llm", label: "LLM Instructions" },
|
||||
{ href: "/healthz", label: "Health Check" },
|
||||
{ href: "/readyz", label: "Readiness Check" },
|
||||
];
|
||||
|
||||
async function loadStatus() {
|
||||
loading = true;
|
||||
error = '';
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/status');
|
||||
const response = await fetch("/api/status");
|
||||
if (!response.ok) {
|
||||
throw new Error(`Status request failed with ${response.status}`);
|
||||
}
|
||||
data = (await response.json()) as StatusResponse;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to load status';
|
||||
error = err instanceof Error ? err.message : "Failed to load status";
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
@@ -60,98 +60,166 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-slate-950 text-slate-100">
|
||||
<main class="mx-auto flex min-h-screen max-w-7xl flex-col px-4 py-6 sm:px-6 lg:px-8">
|
||||
<section class="overflow-hidden rounded-3xl border border-white/10 bg-slate-900 shadow-2xl shadow-slate-950/40">
|
||||
<img src="/images/project.jpg" alt="Avelon Memory Crystal" class="h-64 w-full object-cover object-center sm:h-80" />
|
||||
<main
|
||||
class="mx-auto flex min-h-screen max-w-7xl flex-col px-4 py-6 sm:px-6 lg:px-8"
|
||||
>
|
||||
<section
|
||||
class="overflow-hidden rounded-3xl border border-white/10 bg-slate-900 shadow-2xl shadow-slate-950/40"
|
||||
>
|
||||
<img
|
||||
src="/images/project.jpg"
|
||||
alt="Avelon Memory Crystal"
|
||||
class="h-64 w-full object-cover object-center sm:h-80"
|
||||
/>
|
||||
|
||||
<div class="grid gap-8 p-6 sm:p-8 lg:grid-cols-[1.6fr_1fr] lg:p-10">
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-3 py-1 text-sm font-medium text-cyan-200">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-3 py-1 text-sm font-medium text-cyan-200"
|
||||
>
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
|
||||
Avalon Memory Crystal Server
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-semibold tracking-tight text-white sm:text-4xl">Avelon Memory Crystal Server (AMCS)</h1>
|
||||
<p class="mt-3 max-w-3xl text-base leading-7 text-slate-300 sm:text-lg">
|
||||
{data?.description ?? 'AMCS is a memory server that captures, links, and retrieves structured project thoughts for AI assistants using semantic search, summaries, and MCP tools.'}
|
||||
<h1
|
||||
class="text-3xl font-semibold tracking-tight text-white sm:text-4xl"
|
||||
>
|
||||
Avelon Memory Crystal Server (AMCS)
|
||||
</h1>
|
||||
<p
|
||||
class="mt-3 max-w-3xl text-base leading-7 text-slate-300 sm:text-lg"
|
||||
>
|
||||
{data?.description ??
|
||||
"AMCS is a memory server that captures, links, and retrieves structured project thoughts for AI assistants using semantic search, summaries, and MCP tools."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{#each quickLinks as link}
|
||||
<a class="inline-flex items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-2 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/20" href={link.href}>{link.label}</a>
|
||||
<a
|
||||
class="inline-flex items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-2 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/20"
|
||||
href={link.href}>{link.label}</a
|
||||
>
|
||||
{/each}
|
||||
{#if data?.oauth_enabled}
|
||||
<a class="inline-flex items-center justify-center rounded-xl border border-violet-300/20 bg-violet-400/10 px-4 py-2 text-sm font-semibold text-violet-100 transition hover:border-violet-300/40 hover:bg-violet-400/20" href="/oauth-authorization-server">OAuth Authorization Server</a>
|
||||
<a
|
||||
class="inline-flex items-center justify-center rounded-xl border border-violet-300/20 bg-violet-400/10 px-4 py-2 text-sm font-semibold text-violet-100 transition hover:border-violet-300/40 hover:bg-violet-400/20"
|
||||
href="/oauth-authorization-server">OAuth Authorization Server</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-3">
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Connected users</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">{data?.connected_count ?? '—'}</p>
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">
|
||||
Connected users
|
||||
</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">
|
||||
{data?.connected_count ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Known principals</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">{data?.total_known ?? '—'}</p>
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">
|
||||
Known principals
|
||||
</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">
|
||||
{data?.total_known ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Version</p>
|
||||
<p class="mt-2 break-all text-2xl font-semibold text-white">{data?.version ?? '—'}</p>
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">
|
||||
Version
|
||||
</p>
|
||||
<p class="mt-2 break-all text-2xl font-semibold text-white">
|
||||
{data?.version ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="space-y-4 rounded-2xl border border-white/10 bg-slate-950/50 p-5">
|
||||
<aside
|
||||
class="space-y-4 rounded-2xl border border-white/10 bg-slate-950/50 p-5"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-white">Build details</h2>
|
||||
<p class="mt-1 text-sm text-slate-400">The same status info as the old landing page, just without looking like it escaped from 2004.</p>
|
||||
<p class="mt-1 text-sm text-slate-400">The same status info.</p>
|
||||
</div>
|
||||
<dl class="space-y-3 text-sm text-slate-300">
|
||||
<div>
|
||||
<dt class="text-slate-500">Build date</dt>
|
||||
<dd class="mt-1 font-medium text-white">{data?.build_date ?? 'unknown'}</dd>
|
||||
<dd class="mt-1 font-medium text-white">
|
||||
{data?.build_date ?? "unknown"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-slate-500">Commit</dt>
|
||||
<dd class="mt-1 break-all rounded-lg bg-white/5 px-3 py-2 font-mono text-xs text-cyan-100">{data?.commit ?? 'unknown'}</dd>
|
||||
<dd
|
||||
class="mt-1 break-all rounded-lg bg-white/5 px-3 py-2 font-mono text-xs text-cyan-100"
|
||||
>
|
||||
{data?.commit ?? "unknown"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-slate-500">Connected window</dt>
|
||||
<dd class="mt-1 font-medium text-white">{data?.connected_window ?? 'last 10 minutes'}</dd>
|
||||
<dd class="mt-1 font-medium text-white">
|
||||
{data?.connected_window ?? "last 10 minutes"}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-6 rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<section
|
||||
class="mt-6 rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-white">Recent access</h2>
|
||||
<p class="mt-1 text-sm text-slate-400">Authenticated principals AMCS has seen recently.</p>
|
||||
<p class="mt-1 text-sm text-slate-400">
|
||||
Authenticated principals AMCS has seen recently.
|
||||
</p>
|
||||
</div>
|
||||
<button class="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-white/10" on:click={loadStatus}>
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-white/10"
|
||||
on:click={loadStatus}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400">Loading status…</div>
|
||||
<div
|
||||
class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400"
|
||||
>
|
||||
Loading status…
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="mt-6 rounded-2xl border border-rose-400/30 bg-rose-400/10 px-4 py-6 text-sm text-rose-100">
|
||||
<div
|
||||
class="mt-6 rounded-2xl border border-rose-400/30 bg-rose-400/10 px-4 py-6 text-sm text-rose-100"
|
||||
>
|
||||
<p class="font-semibold">Couldn’t load the status snapshot.</p>
|
||||
<p class="mt-1 text-rose-100/80">{error}</p>
|
||||
</div>
|
||||
{:else if data && data.entries.length === 0}
|
||||
<div class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400">No authenticated access recorded yet.</div>
|
||||
<div
|
||||
class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400"
|
||||
>
|
||||
No authenticated access recorded yet.
|
||||
</div>
|
||||
{:else if data}
|
||||
<div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-300">
|
||||
<thead class="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-500">
|
||||
<table
|
||||
class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-300"
|
||||
>
|
||||
<thead
|
||||
class="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-500"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">Principal</th>
|
||||
<th class="px-4 py-3 font-medium">Last accessed</th>
|
||||
@@ -162,10 +230,21 @@
|
||||
<tbody class="divide-y divide-white/5 bg-slate-950/30">
|
||||
{#each data.entries as entry}
|
||||
<tr class="hover:bg-white/[0.03]">
|
||||
<td class="px-4 py-3 align-top"><code class="rounded bg-white/5 px-2 py-1 font-mono text-xs text-cyan-100">{entry.key_id}</code></td>
|
||||
<td class="px-4 py-3 align-top text-slate-200">{formatDate(entry.last_accessed_at)}</td>
|
||||
<td class="px-4 py-3 align-top"><code class="text-slate-100">{entry.last_path}</code></td>
|
||||
<td class="px-4 py-3 align-top font-semibold text-white">{entry.request_count}</td>
|
||||
<td class="px-4 py-3 align-top"
|
||||
><code
|
||||
class="rounded bg-white/5 px-2 py-1 font-mono text-xs text-cyan-100"
|
||||
>{entry.key_id}</code
|
||||
></td
|
||||
>
|
||||
<td class="px-4 py-3 align-top text-slate-200"
|
||||
>{formatDate(entry.last_accessed_at)}</td
|
||||
>
|
||||
<td class="px-4 py-3 align-top"
|
||||
><code class="text-slate-100">{entry.last_path}</code></td
|
||||
>
|
||||
<td class="px-4 py-3 align-top font-semibold text-white"
|
||||
>{entry.request_count}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user