Phase 3: Svelte 5 UI skeleton

Svelte 5 + Vite + TypeScript dashboard that consumes kamado-api over
REST for the first paint and then subscribes to /api/ws for live
updates. Zero runtime deps beyond svelte itself; plain CSS, no
component library.

Layout:

- Header with brand, WebSocket status badge, chain + height
- PoolOverview: hashrate (1m/5m/1h/24h), miner count, network
  hashrate + diff, pool share (ppb), expected time to block, uptime
- BlocksTable: recent solves from the in-memory ring (will be
  SQLite-backed in Phase 2b.5)
- BestShares: top-10 workers by bestever, falling back to bestdiff
  when the ckpool patch isn't present
- MinersTable: joined view of stratum clients and workers with
  user-agent-based hardware detection (Bitaxe, NerdQAxe, Antminer,
  ...), hashrate, best-round, best-ever, last share

State is a single $state() snapshot store in svelte-runes form;
components read from it via $derived. The store does one initial
REST snapshot fetch, then owns the WebSocket with exponential
backoff reconnects.

Vite dev server on :5173 proxies /api and /api/ws to localhost:8080
so you can run `make ui-dev` alongside `make up` in development.
Production serving (bundled into the Go binary via embed, behind /
on :8080) lands in Phase 4.
This commit is contained in:
satoshi
2026-04-13 03:07:59 +03:00
parent 36c08647e2
commit d37a23bc57
20 changed files with 966 additions and 2 deletions
+56
View File
@@ -0,0 +1,56 @@
<script lang="ts">
import { snap } from "../stores/snapshot.svelte";
import { formatAgo } from "../format";
const blocks = $derived.by(() => {
const b = snap.data?.recent_blocks ?? [];
// Show newest first.
return [...b].reverse();
});
</script>
<section class="card">
<h2>Blocks found</h2>
{#if blocks.length === 0}
<div class="empty">
No blocks found yet. Any solve will appear here instantly via the
log tailer, and persist to SQLite once Phase 2b.5 ships.
</div>
{:else}
<table>
<thead>
<tr>
<th>Height</th>
<th>Hash</th>
<th class="num">When</th>
<th>Source</th>
</tr>
</thead>
<tbody>
{#each blocks as b (b.height + "-" + b.found_at)}
<tr>
<td class="mono">{b.height}</td>
<td class="hash mono">{b.hash ? b.hash.slice(0, 16) + "…" : "—"}</td>
<td class="num">{formatAgo(new Date(b.found_at).getTime() / 1000)}</td>
<td>{b.source}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</section>
<style>
h2 {
margin: 0 0 1rem;
font-size: 1.05rem;
font-weight: 600;
}
.empty {
color: var(--fg-dim);
padding: 0.5rem 0;
}
.hash {
color: var(--fg-dim);
}
</style>