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:
@@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
import { snap } from "../stores/snapshot.svelte";
|
||||
import {
|
||||
formatHashrate,
|
||||
formatUptime,
|
||||
expectedBlockSeconds,
|
||||
formatDuration,
|
||||
} from "../format";
|
||||
|
||||
const data = $derived(snap.data!);
|
||||
const miners = $derived(data.clients?.length ?? 0);
|
||||
const workerCount = $derived(data.workers?.length ?? 0);
|
||||
|
||||
// Pool share of the network hashrate, used both for display and for
|
||||
// the expected-block calculation. Network diff comes from bitcoind.
|
||||
const poolShare = $derived.by(() => {
|
||||
const net = data.network_hashrate_hs;
|
||||
if (!net || net <= 0) return 0;
|
||||
return data.hashrate_hs_1h / net;
|
||||
});
|
||||
|
||||
const expected = $derived.by(() => {
|
||||
const diff = data.chain?.difficulty ?? 0;
|
||||
return expectedBlockSeconds(data.hashrate_hs_1h, data.network_hashrate_hs, diff);
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="grid grid-4">
|
||||
<div class="card">
|
||||
<div class="stat-label">Hashrate (1h)</div>
|
||||
<div class="stat-value">{formatHashrate(data.hashrate_hs_1h)}</div>
|
||||
<div class="stat-sub">
|
||||
1m {formatHashrate(data.hashrate_hs_1m)} · 5m {formatHashrate(data.hashrate_hs_5m)}
|
||||
· 24h {formatHashrate(data.hashrate_hs_24h)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="stat-label">Miners</div>
|
||||
<div class="stat-value">{miners}</div>
|
||||
<div class="stat-sub">{workerCount} workers · {data.users?.length ?? 0} users</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="stat-label">Network</div>
|
||||
<div class="stat-value">{formatHashrate(data.network_hashrate_hs)}</div>
|
||||
<div class="stat-sub">
|
||||
diff {data.chain?.difficulty.toExponential(2) ?? "—"} ·
|
||||
share {(poolShare * 1e9).toFixed(2)} ppb
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="stat-label">Expected block</div>
|
||||
<div class="stat-value">{formatDuration(expected)}</div>
|
||||
<div class="stat-sub">uptime {formatUptime(data.uptime_seconds)}</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user