diff --git a/.gitignore b/.gitignore
index 595dfa4b..06ae33c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,7 @@ static/*.db-wal
.secrets
.env
+
+web/dist/
+web/node_modules/
+web/.astro/
diff --git a/Dockerfile b/Dockerfile
index e430d248..9642cecd 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,11 +4,21 @@ WORKDIR /app
COPY . .
RUN go build -o reverse-watch main.go
+# Build the Astro dashboard to web/dist. `npm ci` installs from the
+# committed package-lock.json for reproducible, supply-chain-pinned deps.
+FROM node:22 AS web-builder
+
+WORKDIR /app/web
+COPY web/package.json web/package-lock.json ./
+RUN npm ci
+COPY web/ ./
+RUN npm run build
+
FROM gcr.io/distroless/base-debian12
WORKDIR /app
COPY --from=builder /app/reverse-watch /app/reverse-watch
-COPY --from=builder /app/static/index.html /app/static/index.html
+COPY --from=web-builder /app/web/dist /app/web/dist
EXPOSE 80
CMD ["./reverse-watch"]
diff --git a/README.md b/README.md
index 1926b7f4..b96731d1 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# [reverse.watch](https://reverse.watch)
-Community-driven open trade reversal tracking database for Steam. Participating entities can report trade reverals to the open database.
+Community-driven open trade reversal tracking database for Steam. Participating entities can report trade reversals to the open database.
## Interested in Participating?
diff --git a/server/server.go b/server/server.go
index 5f5a85bc..18033c75 100644
--- a/server/server.go
+++ b/server/server.go
@@ -60,8 +60,16 @@ func New(cfg config.Config, factory repository.Factory) (*Server, error) {
r.Use(rwmiddleware.FactoryMiddleware(factory))
+ // Serve the Astro-built dashboard from web/dist. `npm run build`
+ // emits the hashed bundles under web/dist/_astro and copies
+ // public/static verbatim to web/dist/static, so we hand both
+ // prefixes to a single FileServer and fall back to index.html for
+ // the root document.
+ fs := http.FileServer(http.Dir("web/dist"))
+ r.Handle("/static/*", fs)
+ r.Handle("/_astro/*", fs)
r.Get("/", func(w http.ResponseWriter, r *http.Request) {
- http.ServeFile(w, r, "static/index.html")
+ http.ServeFile(w, r, "web/dist/index.html")
})
r.Mount("/api", api.Router())
diff --git a/static/index.html b/static/index.html
deleted file mode 100644
index 95bfedd0..00000000
--- a/static/index.html
+++ /dev/null
@@ -1,534 +0,0 @@
-
-
-
- reverse.watch
-
-
-
-
-
-
-
-
-
-
-
-
- Steam ID
-
-
- Status
-
-
- Last Reversal
-
-
-
-
-
-
+
+
Powered by
+
+
+
The open trade
+
+ Check if a Steam ID has a history of reversed trades, reported by
+ marketplaces, trading tools, and community platforms.
+
+
+
diff --git a/web/src/components/Kpis.astro b/web/src/components/Kpis.astro
new file mode 100644
index 00000000..43d13d62
--- /dev/null
+++ b/web/src/components/Kpis.astro
@@ -0,0 +1,17 @@
+---
+// Summary KPI cards, populated from /api/v1/stats/summary in app.ts.
+---
+
+
+
Steam IDs Searched
+
—
+
+
+
+
Traders Flagged (24h)
+
—
+
+
+
+
+
+
+
+ Trader
+ Steam ID
+ Date Added
+
+
+
+ Loading reversals…
+
+
+
+ Load More
+
+
+
diff --git a/web/src/components/ReversalChart.astro b/web/src/components/ReversalChart.astro
new file mode 100644
index 00000000..28c41fde
--- /dev/null
+++ b/web/src/components/ReversalChart.astro
@@ -0,0 +1,23 @@
+---
+// Reversal volume chart with the 7d/30d/3m/6m/1y period picker. The
+// uPlot instance + CS2 event annotation chips are built in app.ts and
+// mounted into #chartContainer.
+---
+
diff --git a/web/src/components/Search.astro b/web/src/components/Search.astro
new file mode 100644
index 00000000..e5168f22
--- /dev/null
+++ b/web/src/components/Search.astro
@@ -0,0 +1,51 @@
+---
+// Steam-ID search form, result chip (avatar + display name + Steam/CSFloat
+// profile links + verdict) and inline error. All wiring lives in
+// src/scripts/app.ts, keyed off the element IDs below.
+---
+
+
+
+
+
+
Enter a 64-bit Steam ID to check their reversal history.
+
+
+
reverse.watch — The open trade reversal database
+
+
+
+
+
+
+
+ 0
+ reversals
+
`;
+ els.chartContainer.appendChild(chartTooltip);
+ return chartTooltip;
+}
+
+function renderChart(daily, days) {
+ els.chartContainer.classList.remove('is-empty', 'is-error');
+ if (chartInstance) {
+ chartInstance.destroy();
+ chartInstance = null;
+ }
+ els.chartContainer.innerHTML = '';
+ chartTooltip = null;
+
+ if (!daily || daily.length === 0) {
+ showChartEmpty('No reversal data for this window yet.');
+ return;
+ }
+
+ const xs = new Array(daily.length);
+ const ys = new Array(daily.length);
+ for (let i = 0; i < daily.length; i++) {
+ // Parse YYYY-MM-DD as UTC midnight to match server bucketing.
+ xs[i] = Date.parse(daily[i].date + 'T00:00:00Z') / 1000;
+ ys[i] = daily[i].count;
+ }
+
+ // For ≤60 days, show "MMM DD" on the x-axis; for longer windows,
+ // collapse to month-only so 6m/1y don't overlap labels.
+ const showDayOnAxis = days <= 60;
+
+ // Pair the label format with a matching increment ladder so
+ // uPlot never picks a sub-month increment when we're rendering
+ // month-only labels (otherwise the 3m view would draw 14-day
+ // ticks that all render as "Apr Apr May May Jun Jun"). Above
+ // 30 days uPlot does month-aware iteration, so ticks land on
+ // the 1st/cadence-aligned points of each month.
+ const xIncrs = showDayOnAxis
+ ? [86400, 2 * 86400, 7 * 86400, 14 * 86400]
+ : [30 * 86400, 61 * 86400, 91 * 86400, 182 * 86400];
+
+ const opts = {
+ width: els.chartContainer.getBoundingClientRect().width || 800,
+ height: els.chartContainer.getBoundingClientRect().height || 360,
+ // Force uPlot to compute tick splits in UTC so they line up
+ // exactly with our UTC-midnight data x-values. Without this,
+ // uPlot uses local time — in any non-UTC zone, the "May 24"
+ // tick lands 1–12 hours off from the May-24 data point and
+ // the tick label can read "May 23" while the tooltip reads
+ // "May 24".
+ tzDate: (ts) => uPlot.tzDate(new Date(ts * 1000), 'Etc/UTC'),
+ cursor: {
+ drag: { x: false, y: false },
+ points: { size: 8, stroke: '#1d9bf0', fill: '#0c0d11', width: 2 },
+ },
+ scales: { x: { time: true }, y: { range: (u, dataMin, dataMax) => [0, Math.max(dataMax, 1) * 1.1] } },
+ axes: [
+ {
+ stroke: '#5a6068',
+ grid: { stroke: 'rgba(255,255,255,0.04)', width: 1 },
+ ticks: { show: false },
+ space: 70,
+ incrs: xIncrs,
+ values: (u, splits) => splits.map(s => {
+ const d = new Date(s * 1000);
+ return showDayOnAxis
+ ? d.toLocaleDateString('en-US', { month: 'short', day: '2-digit', timeZone: 'UTC' })
+ : d.toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' });
+ }),
+ },
+ {
+ stroke: '#5a6068',
+ grid: { stroke: 'rgba(255,255,255,0.04)', width: 1 },
+ ticks: { show: false },
+ size: 50,
+ values: (u, splits) => splits.map(s => fmtNumber.format(Math.round(s))),
+ }
+ ],
+ series: [
+ {},
+ {
+ label: 'Reversals',
+ stroke: '#1d9bf0',
+ width: 2,
+ fill: (u) => {
+ const ctx = u.ctx;
+ const grad = ctx.createLinearGradient(0, u.bbox.top, 0, u.bbox.top + u.bbox.height);
+ grad.addColorStop(0, 'rgba(29, 155, 240, 0.30)');
+ grad.addColorStop(1, 'rgba(29, 155, 240, 0.00)');
+ return grad;
+ },
+ points: { show: false },
+ }
+ ],
+ legend: { show: false },
+ hooks: {
+ setCursor: [
+ (u) => {
+ const tt = ensureTooltip();
+ const idx = u.cursor.idx;
+ if (idx == null || u.cursor.left < 0 || u.cursor.top < 0) {
+ tt.classList.remove('visible');
+ return;
+ }
+ const ts = u.data[0][idx];
+ const ct = u.data[1][idx];
+ const d = new Date(ts * 1000);
+ tt.querySelector('.tt-date').textContent =
+ d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: '2-digit', timeZone: 'UTC' });
+ tt.querySelector('.tt-value').textContent = fmtNumber.format(ct);
+ tt.querySelector('.tt-label').textContent = ct === 1 ? 'reversal' : 'reversals';
+
+ // valToPos (canvasPixels=false) is relative to the plot
+ // area; the tooltip is positioned relative to the chart
+ // container, so add the plot-area inset (bbox is in canvas
+ // pixels, so divide by devicePixelRatio for CSS px).
+ const pxRatio = window.devicePixelRatio || 1;
+ const x = u.valToPos(ts, 'x') + u.bbox.left / pxRatio;
+ const y = u.valToPos(ct, 'y') + u.bbox.top / pxRatio;
+ // Clamp x so the tooltip stays inside the chart bounds.
+ const rect = els.chartContainer.getBoundingClientRect();
+ const ttRect = tt.getBoundingClientRect();
+ const half = ttRect.width / 2;
+ const clampedX = Math.max(half + 4, Math.min(rect.width - half - 4, x));
+ tt.style.left = clampedX + 'px';
+ tt.style.top = y + 'px';
+ tt.classList.add('visible');
+ }
+ ],
+ setSeries: [
+ (u, _seriesIdx, opts) => {
+ if (opts && opts.show === false && chartTooltip) {
+ chartTooltip.classList.remove('visible');
+ }
+ }
+ ],
+ },
+ };
+
+ chartInstance = new uPlot(opts, [xs, ys], els.chartContainer);
+ renderEventChips(chartInstance);
+}
+
+els.chartContainer.addEventListener('mouseleave', () => {
+ if (chartTooltip) chartTooltip.classList.remove('visible');
+});
+
+function resizeChart() {
+ if (!chartInstance) return;
+ const rect = els.chartContainer.getBoundingClientRect();
+ chartInstance.setSize({ width: rect.width, height: rect.height });
+ renderEventChips(chartInstance);
+}
+
+// Picker state. dailyFetchSeq protects against out-of-order
+// responses when the user clicks several buttons quickly: only
+// the latest request's render is allowed to win.
+const DEFAULT_DAYS = 30;
+let currentDays = DEFAULT_DAYS;
+let dailyFetchSeq = 0;
+
+async function loadDaily(days) {
+ const seq = ++dailyFetchSeq;
+ try {
+ const r = await fetch('/api/v1/stats/reversals/daily?days=' + days);
+ if (seq !== dailyFetchSeq) return;
+ if (!r.ok) throw new Error('daily ' + r.status);
+ const json = await r.json();
+ if (seq !== dailyFetchSeq) return;
+ renderChart(json.data || [], days);
+ } catch (err) {
+ if (seq !== dailyFetchSeq) return;
+ console.error('daily load failed:', err);
+ if (chartInstance) {
+ chartInstance.destroy();
+ chartInstance = null;
+ }
+ chartTooltip = null;
+ els.chartContainer.classList.add('is-error');
+ els.chartContainer.classList.remove('is-empty');
+ els.chartContainer.textContent = 'Could not load chart.';
+ }
+}
+
+function wirePeriodPicker() {
+ const buttons = document.querySelectorAll('.period-btn');
+ buttons.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const days = parseInt(btn.dataset.days, 10);
+ if (!Number.isFinite(days) || days === currentDays) return;
+ currentDays = days;
+ buttons.forEach(b => {
+ const active = b === btn;
+ b.classList.toggle('active', active);
+ b.setAttribute('aria-pressed', active ? 'true' : 'false');
+ });
+ loadDaily(days);
+ });
+ });
+}
+
+// The /recent endpoint already returns up to 100 rows in one call,
+// so "Load More" is purely client-side reveal (+10 rows per click)
+// until all fetched rows are visible. True server-side pagination
+// is deferred to v1.1 (PRD §6.4).
+const PAGE_SIZE = 10;
+const recentState = {
+ rows: [],
+ shown: 0,
+};
+
+async function loadRecent() {
+ try {
+ const r = await fetch('/api/v1/reversals/recent?limit=100');
+ if (!r.ok) throw new Error('recent ' + r.status);
+ const json = await r.json();
+ recentState.rows = json.data || [];
+ recentState.shown = 0;
+ renderInitialReversals();
+ } catch (err) {
+ console.error('recent load failed:', err);
+ els.reversalsBody.innerHTML =
+ 'Could not load reversals. No reversals reported yet.
+
+ person
+
+ `;
+ // steam_id is a uint64 string from the API; keep it as a string
+ // so the full precision survives (never parse it as a Number).
+ const steamId = String(row.steam_id);
+ tdTrader.querySelector('.trader-name').textContent = steamId;
+
+ const tdId = document.createElement('td');
+ tdId.className = 'col-steam-id';
+ const span = document.createElement('span');
+ span.className = 'steam-id-mono';
+ span.textContent = steamId;
+ tdId.appendChild(span);
+
+ const tdDate = document.createElement('td');
+ tdDate.className = 'col-date';
+ // PRD §6.4: order by created_at DESC; "Date Added" semantic.
+ tdDate.textContent = formatDate(row.created_at);
+
+ tr.appendChild(tdTrader);
+ tr.appendChild(tdId);
+ tr.appendChild(tdDate);
+ return tr;
+}
+
+els.loadMoreBtn.addEventListener('click', () => {
+ appendNextPage();
+});
+
+function clearChip() {
+ els.resultChip.classList.remove('visible', 'flagged', 'clear');
+ document.body.classList.remove('flagged', 'clear-result');
+}
+
+function showError(msg) {
+ els.searchError.textContent = msg;
+ els.searchError.classList.add('visible');
+}
+
+function clearError() {
+ els.searchError.classList.remove('visible');
+ els.searchError.textContent = '';
+}
+
+function showChip({ steamId, flagged, lastReversalMs }) {
+ // Steam IDs are uint64 and exceed Number.MAX_SAFE_INTEGER, so
+ // they must stay strings end-to-end — never coerced through
+ // Number/parseInt — or the profile links lose precision.
+ const id = String(steamId);
+ els.chipName.textContent = id;
+ els.chipSteamLink.href = 'https://steamcommunity.com/profiles/' + encodeURIComponent(id);
+ els.chipCsfloatLink.href = 'https://csfloat.com/stall/' + encodeURIComponent(id);
+ els.chipWhen.textContent = flagged && lastReversalMs
+ ? 'Last reversal ' + formatDate(lastReversalMs)
+ : '';
+
+ if (flagged) {
+ els.resultChip.classList.remove('clear');
+ els.resultChip.classList.add('flagged', 'visible');
+ els.chipVerdict.innerHTML =
+ 'priority_high Reversals Found';
+ document.body.classList.add('flagged');
+ document.body.classList.remove('clear-result');
+ } else {
+ els.resultChip.classList.remove('flagged');
+ els.resultChip.classList.add('clear', 'visible');
+ els.chipVerdict.innerHTML =
+ 'check No Reversals Found';
+ document.body.classList.add('clear-result');
+ document.body.classList.remove('flagged');
+ }
+}
+
+els.searchForm.addEventListener('submit', async (e) => {
+ e.preventDefault();
+ clearError();
+ clearChip();
+
+ const steamId = els.steamIdInput.value.trim();
+ if (!steamId) return;
+
+ els.searchBtn.disabled = true;
+ els.searchBtnIcon.outerHTML = ' 
+
+ 
+ 
+