@bhooai/nexus-examples 2.0.0

package/examples/chat/apps/backend/src/ws/chat.room.ts

@@ -0,0 +1,56 @@
+/**
+ * Chat WebSocket room. Auto-discovered by createNexusApp() from ws/*.room.ts.
+ *
+ * Client protocol:
+ *   → join  { roomId, username }
+ *   ← presence  { users: [...] }
+ *   → msg   { roomId, text }
+ *   ← msg   { from, text, at }
+ *   → typing { roomId }
+ *   ← typing { username }
+ */
+export default {
+  name: 'chat',
+
+  async onJoin(socket: any, payload: { roomId: string; username: string }) {
+    socket.data.username = payload.username;
+    socket.join(`chat:${payload.roomId}`);
+    socket.to(`chat:${payload.roomId}`).emit('presence', {
+      type: 'join',
+      username: payload.username,
+    });
+  },
+
+  async onLeave(socket: any, payload: { roomId: string }) {
+    socket.to(`chat:${payload.roomId}`).emit('presence', {
+      type: 'leave',
+      username: socket.data?.username,
+    });
+  },
+
+  onMessage: {
+    'msg': async (socket: any, payload: { roomId: string; text: string }, ctx: any) => {
+      const msg = {
+        from: socket.data?.username ?? 'anon',
+        text: payload.text,
+        at: new Date().toISOString(),
+      };
+      // Persist (optional; async so we don't block broadcast)
+      try {
+        const { Message } = await import('../models/Message.js');
+        await Message.create({
+          roomId: payload.roomId,
+          userId: socket.data?.userId ?? 'anon',
+          username: msg.from,
+          text: msg.text,
+        });
+      } catch { /* swallow */ }
+      ctx.server.to(`chat:${payload.roomId}`).emit('msg', msg);
+    },
+    'typing': (socket: any, payload: { roomId: string }, ctx: any) => {
+      socket.to(`chat:${payload.roomId}`).emit('typing', {
+        username: socket.data?.username,
+      });
+    },
+  },
+};

package/examples/chat/apps/frontend/src/main.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+interface Msg { from: string; text: string; at: string }
+
+function App() {
+  const [roomId, setRoomId] = useState('lobby');
+  const [username, setUsername] = useState(`guest-${Math.floor(Math.random() * 1000)}`);
+  const [messages, setMessages] = useState<Msg[]>([]);
+  const [draft, setDraft] = useState('');
+  const [presence, setPresence] = useState<string[]>([]);
+  const [typingUsers, setTypingUsers] = useState<string[]>([]);
+  const [connected, setConnected] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    const host = (import.meta as any).env?.VITE_BACKEND_HOST ?? 'localhost';
+    const port = (import.meta as any).env?.VITE_BACKEND_PORT ?? '4000';
+    const ws = new WebSocket(`ws://${host}:${port}/ws`);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnected(true);
+      ws.send(JSON.stringify({ type: 'join', roomId, username }));
+    };
+    ws.onclose = () => setConnected(false);
+    ws.onmessage = (ev) => {
+      try {
+        const data = JSON.parse(ev.data);
+        if (data.type === 'msg') setMessages((m) => [...m, data.payload]);
+        else if (data.type === 'presence') {
+          setPresence((p) => {
+            if (data.payload.type === 'join') return [...new Set([...p, data.payload.username])];
+            return p.filter((u) => u !== data.payload.username);
+          });
+        } else if (data.type === 'typing') {
+          setTypingUsers((t) => [...new Set([...t, data.payload.username])]);
+          setTimeout(() => setTypingUsers((t) => t.filter((u) => u !== data.payload.username)), 2000);
+        }
+      } catch { /* ignore */ }
+    };
+    return () => ws.close();
+  }, [roomId, username]);
+
+  // Load history on room change
+  useEffect(() => {
+    fetch(`/api/chat/rooms/${roomId}/messages`)
+      .then((r) => r.json())
+      .then((data) => setMessages(data.messages ?? []))
+      .catch(() => {});
+  }, [roomId]);
+
+  const send = () => {
+    if (!draft.trim() || !wsRef.current) return;
+    wsRef.current.send(JSON.stringify({ type: 'msg', roomId, text: draft }));
+    setDraft('');
+  };
+
+  const onType = (v: string) => {
+    setDraft(v);
+    if (wsRef.current && v.length % 3 === 0) {
+      wsRef.current.send(JSON.stringify({ type: 'typing', roomId }));
+    }
+  };
+
+  return (
+    <main style={{ fontFamily: 'system-ui', maxWidth: 720, margin: '2rem auto', padding: '0 1rem' }}>
+      <h1>Chat — room: {roomId}</h1>
+      <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
+        <input value={roomId} onChange={(e) => setRoomId(e.target.value)} placeholder="room" />
+        <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="username" />
+        <span>{connected ? '●' : '○'}</span>
+      </div>
+
+      <div style={{ fontSize: '0.85rem', color: '#666', marginBottom: '0.5rem' }}>
+        Online: {presence.join(', ') || '—'}
+        {typingUsers.length > 0 && <em> · typing: {typingUsers.join(', ')}</em>}
+      </div>
+
+      <div style={{ border: '1px solid #ccc', borderRadius: 8, padding: '1rem', minHeight: 300, maxHeight: 400, overflow: 'auto', marginBottom: '1rem', background: '#fafafa' }}>
+        {messages.map((m, i) => (
+          <div key={i} style={{ marginBottom: '0.5rem' }}>
+            <strong>{m.from}</strong>: {m.text} <span style={{ color: '#999', fontSize: '0.75rem' }}>{new Date(m.at).toLocaleTimeString()}</span>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ display: 'flex', gap: '0.5rem' }}>
+        <input value={draft} onChange={(e) => onType(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && send()} placeholder="Type a message…" style={{ flex: 1, padding: '0.5rem' }} />
+        <button onClick={send}>Send</button>
+      </div>
+    </main>
+  );
+}
+
+const el = document.getElementById('root');
+if (el) createRoot(el).render(<App />);

package/examples/checkout/README.md

@@ -0,0 +1,40 @@
+# Checkout example
+
+Razorpay-style payment flow: order creation on the backend, a signed webhook
+for payment confirmation, and a confirmation mailable queued on success.
+
+## What's here
+
+- `apps/backend/src/routes/checkout.ts` — `POST /api/checkout/order` + `POST /api/checkout/webhook`
+- `apps/backend/src/models/Order.ts` — order document (`created` -> `paid` / `failed`)
+- `apps/backend/src/mail/mailables/OrderConfirmationMail.ts` — Mailable subclass
+- `apps/backend/src/mail/templates/order-confirmation.ejs` — receipt template
+- `apps/frontend/src/main.tsx` — cart + checkout button (mock; no real provider call)
+
+## Flow
+
+1. Frontend posts `{ email, items }` to `/api/checkout/order`.
+2. Backend totals the cart, persists an `Order`, and returns `{ orderId, amount }`.
+   (With a real provider this is where `razorpay.orders.create(...)` goes.)
+3. The provider later calls `/api/checkout/webhook`. The signature in
+   `x-webhook-signature` is verified with `NEXUS_PAYMENTS_WEBHOOK_SECRET`
+   (demo default: `demo-webhook-secret`), the order flips to `paid`, and an
+   `OrderConfirmationMail` is queued.
+
+### Simulate the webhook
+
+```bash
+$body = '{"orderId":"<id>","status":"captured"}'
+$sig  = # HMAC-SHA256 hex of $body with the webhook secret
+curl -X POST http://localhost:4000/api/checkout/webhook \
+  -H "content-type: application/json" -H "x-webhook-signature: $sig" -d $body
+```
+
+## Run
+
+```bash
+npx nexus dev
+```
+
+Add items to the cart and press *Pay* — the demo stops right before opening a
+real payment modal.

package/examples/checkout/apps/backend/src/mail/mailables/OrderConfirmationMail.ts

@@ -0,0 +1,27 @@
+import { Mailable } from '@bhooai/nexus-core';
+
+export interface OrderLike {
+  orderId: string;
+  email: string;
+  amount: number;
+  currency: string;
+  items: Array<{ name: string; qty: number; price: number }>;
+}
+
+export class OrderConfirmationMail extends Mailable {
+  subject = 'Your order is confirmed';
+  template = 'order-confirmation';
+
+  constructor(public order: OrderLike) {
+    super();
+  }
+
+  data(): Record<string, unknown> {
+    return {
+      orderId: this.order.orderId,
+      total: (this.order.amount / 100).toFixed(2),
+      currency: this.order.currency,
+      items: this.order.items,
+    };
+  }
+}

package/examples/checkout/apps/backend/src/mail/templates/order-confirmation.ejs

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <body style="font-family: system-ui, sans-serif; color: #222;">
+    <h1>Thanks for your order!</h1>
+    <p>Order <strong><%= orderId %></strong> has been confirmed.</p>
+    <table cellpadding="6" style="border-collapse: collapse;">
+      <thead>
+        <tr><th align="left">Item</th><th align="right">Qty</th><th align="right">Price</th></tr>
+      </thead>
+      <tbody>
+        <% items.forEach(function (item) { %>
+          <tr>
+            <td><%= item.name %></td>
+            <td align="right"><%= item.qty %></td>
+            <td align="right"><%= (item.price / 100).toFixed(2) %></td>
+          </tr>
+        <% }); %>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="2" align="right"><strong>Total</strong></td>
+          <td align="right"><strong><%= currency %> <%= total %></strong></td>
+        </tr>
+      </tfoot>
+    </table>
+    <p style="color: #666; font-size: 0.85rem;">This is a demo receipt — no real charge was made.</p>
+  </body>
+</html>

package/examples/checkout/apps/backend/src/models/Order.ts

@@ -0,0 +1,14 @@
+import { model, Schema } from '@bhooai/nexus-data';
+
+const orderSchema = new Schema({
+  orderId:   { type: String, required: true, index: true },
+  email:     { type: String, required: true },
+  items:     { type: Array, default: () => [] },
+  amount:    { type: Number, required: true }, // smallest currency unit (paise)
+  currency:  { type: String, default: 'INR' },
+  status:    { type: String, default: 'created', enum: ['created', 'paid', 'failed'] },
+  receipt:   { type: String },
+  createdAt: { type: Date, default: () => new Date(), index: true },
+});
+
+export const Order = model('orders', orderSchema);

package/examples/checkout/apps/backend/src/routes/checkout.ts

@@ -0,0 +1,74 @@
+import { createHmac, randomUUID } from 'node:crypto';
+import { defineRoutes } from '@bhooai/nexus-core';
+import { Order } from '../models/Order.js';
+import { OrderConfirmationMail } from '../mail/mailables/OrderConfirmationMail.js';
+
+interface CartItem { name: string; qty: number; price: number }
+interface OrderDoc {
+  orderId: string;
+  email: string;
+  amount: number;
+  currency: string;
+  items: CartItem[];
+}
+
+const WEBHOOK_SECRET = process.env.NEXUS_PAYMENTS_WEBHOOK_SECRET ?? 'demo-webhook-secret';
+
+export default defineRoutes([
+  {
+    // Create a fake provider order. With a real provider you'd call
+    // razorpay.orders.create({ amount, currency, receipt }) here instead.
+    method: 'POST',
+    path: '/api/checkout/order',
+    handler: async (ctx) => {
+      const body = (ctx.body ?? {}) as { email?: string; items?: CartItem[] };
+      if (!body.email || !Array.isArray(body.items) || body.items.length === 0) {
+        return ctx.json({ error: 'email and items are required' }, 422);
+      }
+      const amount = body.items.reduce((sum, i) => sum + i.price * i.qty, 0);
+      const orderId = `order_${randomUUID().slice(0, 12)}`;
+      const [order] = await Order.create({
+        orderId,
+        email: body.email,
+        items: body.items,
+        amount,
+        receipt: `rcpt_${Date.now()}`,
+      });
+      const doc = order as unknown as OrderDoc;
+      ctx.json({ orderId: doc.orderId, amount, currency: 'INR' }, 201);
+    },
+  },
+  {
+    // Provider webhook: verify the signature, mark paid, send the receipt.
+    method: 'POST',
+    path: '/api/checkout/webhook',
+    handler: async (ctx) => {
+      const body = (ctx.body ?? {}) as { orderId?: string; event?: string; status?: string };
+      const signature = String(ctx.headers['x-webhook-signature'] ?? '');
+      const expected = createHmac('sha256', WEBHOOK_SECRET)
+        .update(JSON.stringify(ctx.body ?? {}))
+        .digest('hex');
+      if (signature !== expected) {
+        return ctx.json({ error: 'invalid signature' }, 401);
+      }
+      if (!body.orderId) return ctx.json({ error: 'orderId required' }, 422);
+
+      const status = body.status === 'captured' ? 'paid' : 'failed';
+      const order = await Order.findOneAndUpdate(
+        { orderId: body.orderId },
+        { $set: { status } },
+      );
+      if (order && status === 'paid') {
+        const doc = order as unknown as OrderDoc;
+        await OrderConfirmationMail.to(doc.email, {
+          orderId: doc.orderId,
+          email: doc.email,
+          amount: doc.amount,
+          currency: doc.currency,
+          items: doc.items,
+        }).queue().catch((err: unknown) => console.error('[checkout] mail failed:', err));
+      }
+      ctx.json({ received: true });
+    },
+  },
+]);

package/examples/checkout/apps/frontend/src/main.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+interface Item { name: string; qty: number; price: number }
+
+const CATALOG: Item[] = [
+  { name: 'Nexus mug', qty: 1, price: 49900 },
+  { name: 'Nexus tee', qty: 1, price: 89900 },
+  { name: 'Sticker pack', qty: 1, price: 14900 },
+];
+
+function App() {
+  const [email, setEmail] = useState('you@example.com');
+  const [cart, setCart] = useState<Item[]>([]);
+  const [status, setStatus] = useState('');
+  const [orderId, setOrderId] = useState('');
+
+  const total = useMemo(() => cart.reduce((s, i) => s + i.price * i.qty, 0), [cart]);
+
+  const add = (item: Item) => {
+    setCart((c) => {
+      const found = c.find((i) => i.name === item.name);
+      if (found) return c.map((i) => (i.name === item.name ? { ...i, qty: i.qty + 1 } : i));
+      return [...c, { ...item }];
+    });
+  };
+
+  const checkout = async () => {
+    setStatus('creating order...');
+    try {
+      const res = await fetch('/api/checkout/order', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, items: cart }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setOrderId(data.orderId);
+      // Real integration would open the Razorpay modal here with the orderId.
+      // Demo just pretends the payment succeeded.
+      setStatus(`order ${data.orderId} created — payment modal would open here (mocked as paid)`);
+      setCart([]);
+    } catch (err) {
+      setStatus(`error: ${(err as Error).message}`);
+    }
+  };
+
+  return (
+    <main style={{ fontFamily: 'system-ui', maxWidth: 720, margin: '2rem auto', padding: '0 1rem' }}>
+      <h1>Checkout demo</h1>
+
+      <h2 style={{ fontSize: '1rem' }}>Catalog</h2>
+      <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
+        {CATALOG.map((item) => (
+          <div key={item.name} style={{ border: '1px solid #ccc', borderRadius: 8, padding: '0.75rem 1rem' }}>
+            <strong>{item.name}</strong>
+            <div style={{ color: '#666', fontSize: '0.85rem' }}>INR {(item.price / 100).toFixed(2)}</div>
+            <button onClick={() => add(item)} style={{ marginTop: '0.5rem' }}>Add to cart</button>
+          </div>
+        ))}
+      </div>
+
+      <h2 style={{ fontSize: '1rem' }}>Cart ({cart.reduce((s, i) => s + i.qty, 0)})</h2>
+      {cart.length === 0 && <p style={{ color: '#666' }}>Cart is empty.</p>}
+      <ul>
+        {cart.map((i) => (
+          <li key={i.name}>{i.qty} x {i.name} — INR {((i.price * i.qty) / 100).toFixed(2)}</li>
+        ))}
+      </ul>
+
+      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '1rem' }}>
+        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email" style={{ flex: 1, padding: '0.5rem' }} />
+        <button onClick={checkout} disabled={cart.length === 0}>
+          Pay INR {(total / 100).toFixed(2)}
+        </button>
+      </div>
+
+      {status && <p style={{ color: '#444' }}>{status}</p>}
+      {orderId && <p style={{ color: '#666', fontSize: '0.85rem' }}>Last order: {orderId} — webhook flips it to paid and queues a confirmation email.</p>}
+    </main>
+  );
+}
+
+const el = document.getElementById('root');
+if (el) createRoot(el).render(<App />);

package/examples/dashboard/README.md

@@ -0,0 +1,26 @@
+# Dashboard example
+
+Custom metrics page with zero chart dependencies: ASCII bars, monospace tables,
+and CSS divs. The backend records requests to its own demo endpoints in memory
+and serves aggregates as JSON.
+
+## What's here
+
+- `apps/backend/src/routes/metrics.ts` — `GET /api/metrics` (requests today, avg latency, top paths, hourly buckets) plus `/api/ping` and `/api/slow` to generate traffic
+- `apps/frontend/src/main.tsx` — KPI cards, monospace bar chart for top paths, CSS-div hourly histogram
+
+## Notable
+
+- Daily counters roll over at midnight (`rollDay`).
+- `/api/slow` sleeps 120-320ms so you can watch the avg-latency number move.
+- The page polls every 5 seconds — no WS needed for a dashboard.
+
+## Run
+
+```bash
+npx nexus dev
+```
+
+Open http://localhost:3000 and press the *Hit ...* buttons a few times to see
+the charts fill in. In a real app you'd source these numbers from
+`nexus-telemetry` instead of in-process counters.

package/examples/dashboard/apps/backend/src/routes/metrics.ts

@@ -0,0 +1,76 @@
+import { defineRoutes } from '@bhooai/nexus-core';
+
+/**
+ * In-memory request metrics demo. A real deployment would aggregate from
+ * nexus-telemetry / cluster logs; here we track requests to this server's
+ * own API to show the shape of the data.
+ */
+
+interface PathStats { count: number; totalMs: number }
+const stats = new Map<string, PathStats>();
+let todayRequests = 0;
+let dayStamp = new Date().toDateString();
+
+function rollDay() {
+  const now = new Date().toDateString();
+  if (now !== dayStamp) {
+    dayStamp = now;
+    todayRequests = 0;
+    stats.clear();
+  }
+}
+
+/** Cheap middleware-style recorder — call from route handlers you want to count. */
+export function recordRequest(path: string, ms: number) {
+  rollDay();
+  todayRequests += 1;
+  const s = stats.get(path) ?? { count: 0, totalMs: 0 };
+  s.count += 1;
+  s.totalMs += ms;
+  stats.set(path, s);
+}
+
+export default defineRoutes([
+  {
+    method: 'GET',
+    path: '/api/metrics',
+    handler: async (ctx) => {
+      rollDay();
+      const topPaths = [...stats.entries()]
+        .map(([path, s]) => ({ path, count: s.count, avgMs: Math.round(s.totalMs / s.count) }))
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 8);
+      const totalMs = [...stats.values()].reduce((n, s) => n + s.totalMs, 0);
+      ctx.json({
+        date: dayStamp,
+        requestsToday: todayRequests,
+        avgLatencyMs: todayRequests > 0 ? Math.round(totalMs / todayRequests) : 0,
+        topPaths,
+        // Sparkline-ish fake hourly buckets so the frontend has a series to draw.
+        hourly: Array.from({ length: 24 }, (_, h) =>
+          h <= new Date().getHours() ? Math.max(0, Math.round(todayRequests / (new Date().getHours() + 1) + (h % 3) * 2)) : 0),
+      });
+    },
+  },
+  {
+    // A couple of endpoints to generate traffic worth charting.
+    method: 'GET',
+    path: '/api/ping',
+    handler: async (ctx) => {
+      const start = performance.now();
+      await new Promise((r) => setTimeout(r, Math.floor(Math.random() * 40)));
+      recordRequest('/api/ping', performance.now() - start);
+      ctx.json({ pong: true });
+    },
+  },
+  {
+    method: 'GET',
+    path: '/api/slow',
+    handler: async (ctx) => {
+      const start = performance.now();
+      await new Promise((r) => setTimeout(r, 120 + Math.floor(Math.random() * 200)));
+      recordRequest('/api/slow', performance.now() - start);
+      ctx.json({ ok: true });
+    },
+  },
+]);

package/examples/dashboard/apps/frontend/src/main.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+interface TopPath { path: string; count: number; avgMs: number }
+interface Metrics {
+  date: string;
+  requestsToday: number;
+  avgLatencyMs: number;
+  topPaths: TopPath[];
+  hourly: number[];
+}
+
+function Bar({ value, max, width = 24 }: { value: number; max: number; width?: number }) {
+  const filled = max > 0 ? Math.round((value / max) * width) : 0;
+  return <code style={{ fontFamily: 'ui-monospace, monospace', color: '#0a0', whiteSpace: 'pre' }}>
+    {'#'.repeat(filled)}{'.'.repeat(Math.max(0, width - filled))}
+  </code>;
+}
+
+function App() {
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  const [error, setError] = useState('');
+
+  const load = async () => {
+    try {
+      const res = await fetch('/api/metrics');
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setMetrics(await res.json());
+    } catch (err) { setError((err as Error).message); }
+  };
+  useEffect(() => {
+    load();
+    const t = setInterval(load, 5000);
+    return () => clearInterval(t);
+  }, []);
+
+  const hit = (path: string) => fetch(path).catch(() => {});
+
+  if (error) return <main style={{ fontFamily: 'system-ui', margin: '2rem' }}><p style={{ color: '#c00' }}>{error}</p></main>;
+  if (!metrics) return <main style={{ fontFamily: 'system-ui', margin: '2rem' }}>Loading metrics...</main>;
+
+  const maxPath = Math.max(1, ...metrics.topPaths.map((p) => p.count));
+  const maxHour = Math.max(1, ...metrics.hourly);
+
+  return (
+    <main style={{ fontFamily: 'system-ui', maxWidth: 760, margin: '2rem auto', padding: '0 1rem' }}>
+      <h1>Dashboard — {metrics.date}</h1>
+
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem' }}>
+        <div style={{ border: '1px solid #ccc', borderRadius: 8, padding: '0.75rem 1.25rem' }}>
+          <div style={{ fontSize: '1.75rem', fontWeight: 700 }}>{metrics.requestsToday}</div>
+          <div style={{ color: '#666', fontSize: '0.85rem' }}>requests today</div>
+        </div>
+        <div style={{ border: '1px solid #ccc', borderRadius: 8, padding: '0.75rem 1.25rem' }}>
+          <div style={{ fontSize: '1.75rem', fontWeight: 700 }}>{metrics.avgLatencyMs}ms</div>
+          <div style={{ color: '#666', fontSize: '0.85rem' }}>avg latency</div>
+        </div>
+        <div style={{ alignSelf: 'center', display: 'flex', gap: '0.5rem' }}>
+          <button onClick={() => hit('/api/ping')}>Hit /api/ping</button>
+          <button onClick={() => hit('/api/slow')}>Hit /api/slow</button>
+        </div>
+      </div>
+
+      <h2 style={{ fontSize: '1rem' }}>Top paths</h2>
+      {metrics.topPaths.length === 0 && <p style={{ color: '#666' }}>No traffic yet. Hit an endpoint above.</p>}
+      <table cellPadding={4} style={{ borderCollapse: 'collapse', fontFamily: 'ui-monospace, monospace', fontSize: '0.85rem' }}>
+        <tbody>
+          {metrics.topPaths.map((p) => (
+            <tr key={p.path}>
+              <td style={{ paddingRight: 12 }}>{p.path}</td>
+              <td style={{ paddingRight: 12, textAlign: 'right' }}>{p.count}</td>
+              <td style={{ paddingRight: 12, textAlign: 'right', color: '#666' }}>{p.avgMs}ms</td>
+              <td><Bar value={p.count} max={maxPath} /></td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h2 style={{ fontSize: '1rem', marginTop: '1.5rem' }}>Hourly requests</h2>
+      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 80 }}>
+        {metrics.hourly.map((v, h) => (
+          <div
+            key={h}
+            title={`${h}:00 — ${v}`}
+            style={{
+              width: 24,
+              height: Math.max(2, (v / maxHour) * 80),
+              background: h === new Date().getHours() ? '#06c' : '#9ec5fe',
+              borderRadius: '2px 2px 0 0',
+            }}
+          />
+        ))}
+      </div>
+      <div style={{ fontSize: '0.7rem', color: '#999' }}>0h {'-'.repeat(30)} 23h (auto-refreshes every 5s)</div>
+    </main>
+  );
+}
+
+const el = document.getElementById('root');
+if (el) createRoot(el).render(<App />);