diff --git a/node/rustchain_v2_integrated_v2.2.1_rip200.py b/node/rustchain_v2_integrated_v2.2.1_rip200.py
index 2288fd86..6d287e95 100644
--- a/node/rustchain_v2_integrated_v2.2.1_rip200.py
+++ b/node/rustchain_v2_integrated_v2.2.1_rip200.py
@@ -1892,224 +1892,594 @@ def openapi_spec():
 
 @app.route('/explorer', methods=['GET'])
 def explorer():
-    """Lightweight blockchain explorer interface"""
+    """Real-time block explorer dashboard (Tier 1 + Tier 2 views)."""
     html = """<!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>RustChain v2 Explorer</title>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
-        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
-        .header { text-align: center; margin-bottom: 30px; }
-        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
-        .stat-card { background: #f8f9fa; padding: 15px; border-radius: 6px; border-left: 4px solid #007bff; }
-        .stat-value { font-size: 24px; font-weight: bold; color: #007bff; }
-        .stat-label { color: #666; font-size: 14px; }
-        .query-section { margin-bottom: 30px; }
-        .query-form { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
-        .query-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; flex: 1; }
-        .query-button { padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
-        .query-button:hover { background: #0056b3; }
-        .result-box { background: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #ddd; white-space: pre-wrap; font-family: monospace; }
-        .error { color: #dc3545; }
-        .success { color: #28a745; }
-        h2 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 5px; }
-        .refresh-btn { background: #28a745; }
-        .refresh-btn:hover { background: #1e7e34; }
-    </style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>RustChain Explorer Dashboard</title>
+  <style>
+    :root {
+      --bg: #1a1a2e;
+      --panel: #16213e;
+      --panel-soft: #21325a;
+      --accent: #f39c12;
+      --text: #e8edf7;
+      --muted: #99a7c2;
+      --ok: #2ecc71;
+      --warn: #e67e22;
+      --border: #2f4478;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Segoe UI", Arial, sans-serif;
+      background: radial-gradient(circle at top right, #243b66 0, var(--bg) 45%);
+      color: var(--text);
+      min-height: 100vh;
+    }
+    .page {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 24px 16px 40px;
+    }
+    .hero {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 18px;
+    }
+    .title-wrap h1 {
+      margin: 0;
+      font-size: 32px;
+      letter-spacing: 0.3px;
+    }
+    .title-wrap p {
+      margin: 8px 0 0;
+      color: var(--muted);
+    }
+    .links a {
+      color: var(--accent);
+      text-decoration: none;
+      font-weight: 600;
+      margin-left: 16px;
+    }
+    .card-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+    .card {
+      background: linear-gradient(165deg, var(--panel-soft), var(--panel));
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 14px;
+    }
+    .card .label {
+      font-size: 12px;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+    }
+    .card .value {
+      margin-top: 6px;
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--accent);
+      font-family: "Consolas", "Courier New", monospace;
+    }
+    .toolbar {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 12px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .toolbar button, .toolbar select {
+      background: #20345f;
+      color: var(--text);
+      border: 1px solid #35508a;
+      border-radius: 8px;
+      padding: 8px 10px;
+      cursor: pointer;
+    }
+    .toolbar button:hover { background: #2a4478; }
+    .toolbar .muted {
+      margin-left: auto;
+      color: var(--muted);
+      font-size: 13px;
+    }
+    .table-wrap {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+      overflow-x: auto;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 980px;
+    }
+    th, td {
+      padding: 10px 10px;
+      text-align: left;
+      border-bottom: 1px solid #243a67;
+      font-size: 14px;
+    }
+    th button {
+      color: var(--text);
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      font-weight: 700;
+      padding: 0;
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      padding: 2px 8px;
+      font-size: 12px;
+      font-weight: 700;
+      border: 1px solid transparent;
+    }
+    .chip.ok { color: #b8ffd6; background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.45); }
+    .chip.warn { color: #ffd6b0; background: rgba(230, 126, 34, 0.15); border-color: rgba(230, 126, 34, 0.45); }
+    .chip.arch { color: #ffe4af; background: rgba(243, 156, 18, 0.12); border-color: rgba(243, 156, 18, 0.35); }
+    .chip.mult { color: #d0f5ff; background: rgba(52, 152, 219, 0.15); border-color: rgba(52, 152, 219, 0.45); }
+    .mono { font-family: "Consolas", "Courier New", monospace; }
+    .empty {
+      padding: 18px;
+      color: var(--muted);
+      text-align: center;
+    }
+    .section-title {
+      margin: 18px 0 10px;
+      font-size: 20px;
+      letter-spacing: 0.3px;
+    }
+    .section-sub {
+      margin: 0 0 10px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+    .agent-controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .agent-controls input, .agent-controls select, .agent-controls button {
+      background: #20345f;
+      color: var(--text);
+      border: 1px solid #35508a;
+      border-radius: 8px;
+      padding: 8px 10px;
+    }
+    .agent-controls button {
+      cursor: pointer;
+    }
+    .agent-controls button:hover {
+      background: #2a4478;
+    }
+    .lifecycle {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .lifecycle .node {
+      background: #1b2d52;
+      border: 1px solid #2a4578;
+      border-radius: 10px;
+      padding: 10px;
+    }
+    .lifecycle .node .k {
+      color: var(--muted);
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+    .lifecycle .node .v {
+      margin-top: 4px;
+      color: var(--accent);
+      font-size: 24px;
+      font-weight: 700;
+      font-family: "Consolas", "Courier New", monospace;
+    }
+  </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>RustChain v2 Explorer</h1>
-            <p>Integrated Server with Epoch Rewards, Withdrawals, and Finality</p>
-            <p style="margin-top:10px;">
-              <a href="/museum" style="color:#007bff;text-decoration:none;font-weight:700;">Hardware Museum (2D)</a>
-              &nbsp;|&nbsp;
-              <a href="/museum/3d" style="color:#007bff;text-decoration:none;font-weight:700;">Hardware Museum (3D)</a>
-            </p>
-        </div>
+  <div class="page">
+    <div class="hero">
+      <div class="title-wrap">
+        <h1>RustChain Explorer</h1>
+        <p>Tier 1 + Tier 2 dashboard - miner telemetry + agent economy marketplace</p>
+      </div>
+      <div class="links">
+        <a href="/museum">Museum 2D</a>
+        <a href="/museum/3d">Museum 3D</a>
+      </div>
+    </div>
 
-        <div class="stats-grid" id="stats">
-            <!-- Stats will be loaded here -->
-        </div>
+    <div class="card-grid" id="topCards"></div>
+
+    <div class="toolbar">
+      <button id="refreshBtn">Refresh Now</button>
+      <label for="archFilter">Arch:</label>
+      <select id="archFilter">
+        <option value="all">All</option>
+      </select>
+      <label for="statusFilter">Status:</label>
+      <select id="statusFilter">
+        <option value="all">All</option>
+        <option value="online">Online</option>
+        <option value="offline">Offline</option>
+      </select>
+      <span class="muted" id="updatedAt">Last update: --</span>
+    </div>
 
-        <div class="query-section">
-            <h2>Balance Query</h2>
-            <div class="query-form">
-                <input type="text" id="minerPk" placeholder="Enter miner public key" class="query-input">
-                <button onclick="queryBalance()" class="query-button">Query Balance</button>
-            </div>
-            <div id="balanceResult" class="result-box" style="display: none;"></div>
-        </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th><button data-sort="miner">Miner</button></th>
+            <th><button data-sort="architecture">Architecture</button></th>
+            <th><button data-sort="multiplier">Multiplier</button></th>
+            <th><button data-sort="status">Status</button></th>
+            <th><button data-sort="last_attest">Last Attestation</button></th>
+            <th>Hardware Type</th>
+          </tr>
+        </thead>
+        <tbody id="minerRows"></tbody>
+      </table>
+      <div id="empty" class="empty" style="display:none;">No miners matched the current filter.</div>
+    </div>
 
-        <div class="query-section">
-            <h2>Withdrawal History</h2>
-            <div class="query-form">
-                <input type="text" id="withdrawalMinerPk" placeholder="Enter miner public key" class="query-input">
-                <input type="number" id="withdrawalLimit" placeholder="Limit (default: 50)" class="query-input" value="50">
-                <button onclick="queryWithdrawals()" class="query-button">Query History</button>
-            </div>
-            <div id="withdrawalResult" class="result-box" style="display: none;"></div>
-        </div>
+    <h2 class="section-title">Agent Economy Marketplace</h2>
+    <p class="section-sub">Open jobs, lifecycle state, market stats, and reputation lookup.</p>
 
-        <div class="query-section">
-            <h2>Epoch Information</h2>
-            <div class="query-form">
-                <button onclick="queryEpoch()" class="query-button">Get Current Epoch</button>
-                <button onclick="loadStats()" class="query-button refresh-btn">Refresh Stats</button>
-            </div>
-            <div id="epochResult" class="result-box" style="display: none;"></div>
-        </div>
+    <div class="card-grid" id="agentCards"></div>
+    <div class="lifecycle" id="lifecycleGrid"></div>
+
+    <div class="agent-controls">
+      <button id="agentRefreshBtn">Refresh Agent Data</button>
+      <label for="jobCategoryFilter">Category:</label>
+      <select id="jobCategoryFilter"><option value="all">All</option></select>
+      <label for="repWallet">Reputation:</label>
+      <input id="repWallet" type="text" placeholder="wallet id (e.g. founder_community)">
+      <button id="repLookupBtn">Lookup</button>
+      <span class="muted" id="agentUpdatedAt">Agent update: --</span>
     </div>
 
-    <script>
-        async function apiCall(endpoint) {
-            try {
-                const response = await fetch(endpoint);
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                return await response.json();
-            } catch (error) {
-                throw error;
-            }
-        }
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>Job ID</th>
+            <th>Category</th>
+            <th>Reward (RTC)</th>
+            <th>Status</th>
+            <th>Posted By</th>
+            <th>Updated</th>
+          </tr>
+        </thead>
+        <tbody id="jobRows"></tbody>
+      </table>
+      <div id="jobsEmpty" class="empty" style="display:none;">No agent jobs for the selected filter.</div>
+    </div>
 
-        async function loadStats() {
-            try {
-                const stats = await apiCall('/api/stats');
-                const epoch = await apiCall('/epoch');
-
-                const statsHtml = `
-                    <div class="stat-card">
-                        <div class="stat-value">${stats.version}</div>
-                        <div class="stat-label">Version</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${epoch.epoch}</div>
-                        <div class="stat-label">Current Epoch</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${epoch.slot}</div>
-                        <div class="stat-label">Current Slot</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${stats.total_miners}</div>
-                        <div class="stat-label">Total Miners</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${stats.total_balance.toFixed(4)} RTC</div>
-                        <div class="stat-label">Total Balance</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${epoch.epoch_pot} RTC</div>
-                        <div class="stat-label">Epoch Pot</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${epoch.enrolled_miners}</div>
-                        <div class="stat-label">Enrolled Miners</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${stats.pending_withdrawals}</div>
-                        <div class="stat-label">Pending Withdrawals</div>
-                    </div>
-                `;
-
-                document.getElementById('stats').innerHTML = statsHtml;
-            } catch (error) {
-                document.getElementById('stats').innerHTML = `<div class="error">Error loading stats: ${error.message}</div>`;
-            }
-        }
+    <div class="table-wrap" style="margin-top:10px;">
+      <table>
+        <thead>
+          <tr>
+            <th>Wallet</th>
+            <th>Trust</th>
+            <th>Level</th>
+            <th>Jobs Posted</th>
+            <th>Completed</th>
+            <th>Total Paid (RTC)</th>
+            <th>Last Active</th>
+          </tr>
+        </thead>
+        <tbody id="repRows"></tbody>
+      </table>
+      <div id="repEmpty" class="empty">Lookup a wallet to view reputation.</div>
+    </div>
+  </div>
+
+  <script>
+    const state = {
+      miners: [],
+      sortBy: "multiplier",
+      sortDir: "desc",
+      archFilter: "all",
+      statusFilter: "all",
+      agentStats: null,
+      agentJobs: [],
+      jobCategoryFilter: "all",
+      reputation: null,
+    };
+
+    function nowSeconds() {
+      return Math.floor(Date.now() / 1000);
+    }
 
-        async function queryBalance() {
-            const minerPk = document.getElementById('minerPk').value.trim();
-            const resultDiv = document.getElementById('balanceResult');
+    function statusFromAttest(ts) {
+      if (!ts) return "offline";
+      return (nowSeconds() - Number(ts)) <= 3600 ? "online" : "offline";
+    }
 
-            if (!minerPk) {
-                resultDiv.innerHTML = '<span class="error">Please enter a miner public key</span>';
-                resultDiv.style.display = 'block';
-                return;
-            }
+    function architectureLabel(row) {
+      const family = String(row.device_family || "").trim();
+      const arch = String(row.device_arch || "").trim();
+      if (family && arch && family.toLowerCase() !== arch.toLowerCase()) return `${family}/${arch}`;
+      return arch || family || "unknown";
+    }
 
-            try {
-                const balance = await apiCall(`/balance/${encodeURIComponent(minerPk)}`);
-                resultDiv.innerHTML = `<span class="success">Balance for ${balance.miner_pk}:
-${balance.balance_rtc.toFixed(6)} RTC</span>`;
-                resultDiv.style.display = 'block';
-            } catch (error) {
-                resultDiv.innerHTML = `<span class="error">Error querying balance: ${error.message}</span>`;
-                resultDiv.style.display = 'block';
-            }
+    function formatTime(ts) {
+      if (!ts) return "-";
+      const date = new Date(Number(ts) * 1000);
+      return `${date.toLocaleString()} (${Math.max(0, nowSeconds() - Number(ts))}s ago)`;
+    }
+
+    async function fetchJson(path) {
+      const res = await fetch(path);
+      if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
+      return await res.json();
+    }
+
+    function applyFiltersAndSort() {
+      let rows = [...state.miners];
+      if (state.archFilter !== "all") {
+        rows = rows.filter((m) => architectureLabel(m).toLowerCase() === state.archFilter);
+      }
+      if (state.statusFilter !== "all") {
+        rows = rows.filter((m) => statusFromAttest(m.last_attest) === state.statusFilter);
+      }
+      const dir = state.sortDir === "asc" ? 1 : -1;
+      rows.sort((a, b) => {
+        let av;
+        let bv;
+        if (state.sortBy === "miner") {
+          av = String(a.miner || "").toLowerCase();
+          bv = String(b.miner || "").toLowerCase();
+        } else if (state.sortBy === "architecture") {
+          av = architectureLabel(a).toLowerCase();
+          bv = architectureLabel(b).toLowerCase();
+        } else if (state.sortBy === "multiplier") {
+          av = Number(a.antiquity_multiplier || 1);
+          bv = Number(b.antiquity_multiplier || 1);
+        } else if (state.sortBy === "last_attest") {
+          av = Number(a.last_attest || 0);
+          bv = Number(b.last_attest || 0);
+        } else {
+          av = statusFromAttest(a.last_attest);
+          bv = statusFromAttest(b.last_attest);
         }
+        if (av < bv) return -1 * dir;
+        if (av > bv) return 1 * dir;
+        return 0;
+      });
+      return rows;
+    }
 
-        async function queryWithdrawals() {
-            const minerPk = document.getElementById('withdrawalMinerPk').value.trim();
-            const limit = document.getElementById('withdrawalLimit').value || 50;
-            const resultDiv = document.getElementById('withdrawalResult');
+    function renderTopCards(health, epoch) {
+      const online = state.miners.filter((m) => statusFromAttest(m.last_attest) === "online").length;
+      const maxMultiplier = state.miners.reduce((acc, m) => Math.max(acc, Number(m.antiquity_multiplier || 1)), 1);
+      const cards = [
+        { label: "Node", value: health.ok ? "UP" : "DOWN" },
+        { label: "Epoch", value: epoch.epoch ?? "-" },
+        { label: "Slot", value: epoch.slot ?? "-" },
+        { label: "Active Miners", value: state.miners.length },
+        { label: "Online (<1h)", value: online },
+        { label: "Top Multiplier", value: `${maxMultiplier.toFixed(2)}x` },
+      ];
+      document.getElementById("topCards").innerHTML = cards.map((c) => `
+        <div class="card">
+          <div class="label">${c.label}</div>
+          <div class="value">${c.value}</div>
+        </div>
+      `).join("");
+    }
 
-            if (!minerPk) {
-                resultDiv.innerHTML = '<span class="error">Please enter a miner public key</span>';
-                resultDiv.style.display = 'block';
-                return;
-            }
+    function renderMinerTable() {
+      const rows = applyFiltersAndSort();
+      const tbody = document.getElementById("minerRows");
+      tbody.innerHTML = rows.map((m) => {
+        const arch = architectureLabel(m);
+        const status = statusFromAttest(m.last_attest);
+        const mult = Number(m.antiquity_multiplier || 1);
+        return `
+          <tr>
+            <td class="mono">${m.miner || "-"}</td>
+            <td><span class="chip arch">${arch}</span></td>
+            <td><span class="chip mult">${mult.toFixed(2)}x</span></td>
+            <td><span class="chip ${status === "online" ? "ok" : "warn"}">${status}</span></td>
+            <td class="mono">${formatTime(m.last_attest)}</td>
+            <td>${m.hardware_type || "-"}</td>
+          </tr>
+        `;
+      }).join("");
+      document.getElementById("empty").style.display = rows.length ? "none" : "block";
+    }
 
-            try {
-                const history = await apiCall(`/withdraw/history/${encodeURIComponent(minerPk)}?limit=${limit}`);
-                let output = `<span class="success">Withdrawal History for ${history.miner_pk}:
-Current Balance: ${history.current_balance.toFixed(6)} RTC
-
-Withdrawals (${history.withdrawals.length}):`;
-
-                if (history.withdrawals.length === 0) {
-                    output += '\\nNo withdrawals found.';
-                } else {
-                    history.withdrawals.forEach((w, i) => {
-                        const date = new Date(w.created_at * 1000).toISOString();
-                        output += `\\n${i + 1}. ${w.withdrawal_id}
-   Amount: ${w.amount} RTC (Fee: ${w.fee} RTC)
-   Status: ${w.status}
-   Destination: ${w.destination}
-   Created: ${date}`;
-                        if (w.tx_hash) output += `\\n   TX Hash: ${w.tx_hash}`;
-                    });
-                }
-                output += '</span>';
+    function setupFilters() {
+      const archSet = new Set(state.miners.map((m) => architectureLabel(m).toLowerCase()));
+      const archFilter = document.getElementById("archFilter");
+      const current = archFilter.value;
+      archFilter.innerHTML = '<option value="all">All</option>' + [...archSet].sort().map((a) => `<option value="${a}">${a}</option>`).join("");
+      if ([...archSet, "all"].includes(current)) {
+        archFilter.value = current;
+      }
+    }
 
-                resultDiv.innerHTML = output;
-                resultDiv.style.display = 'block';
-            } catch (error) {
-                resultDiv.innerHTML = `<span class="error">Error querying withdrawals: ${error.message}</span>`;
-                resultDiv.style.display = 'block';
-            }
-        }
+    function renderAgentCards() {
+      const payload = state.agentStats && state.agentStats.stats ? state.agentStats.stats : {};
+      const cards = [
+        { label: "Open Jobs", value: payload.open_jobs ?? 0 },
+        { label: "Active Agents", value: payload.active_agents ?? 0 },
+        { label: "Total Jobs", value: payload.total_jobs ?? 0 },
+        { label: "Completed Jobs", value: payload.completed_jobs ?? 0 },
+        { label: "Volume (RTC)", value: Number(payload.total_rtc_volume || 0).toFixed(1) },
+        { label: "Fees (RTC)", value: Number(payload.total_fees_collected || 0).toFixed(1) },
+      ];
+      document.getElementById("agentCards").innerHTML = cards.map((c) => `
+        <div class="card">
+          <div class="label">${c.label}</div>
+          <div class="value">${c.value}</div>
+        </div>
+      `).join("");
+    }
 
-        async function queryEpoch() {
-            const resultDiv = document.getElementById('epochResult');
-
-            try {
-                const epoch = await apiCall('/epoch');
-                const output = `<span class="success">Current Epoch Information:
-Epoch: ${epoch.epoch}
-Slot: ${epoch.slot}
-Epoch Pot: ${epoch.epoch_pot} RTC
-Enrolled Miners: ${epoch.enrolled_miners}
-Blocks per Epoch: ${epoch.blocks_per_epoch}</span>`;
-
-                resultDiv.innerHTML = output;
-                resultDiv.style.display = 'block';
-            } catch (error) {
-                resultDiv.innerHTML = `<span class="error">Error querying epoch: ${error.message}</span>`;
-                resultDiv.style.display = 'block';
-            }
-        }
+    function renderLifecycle() {
+      const counts = { posted: 0, claimed: 0, delivered: 0, completed: 0 };
+      for (const job of state.agentJobs) {
+        const status = String(job.status || "").toLowerCase();
+        if (counts[status] !== undefined) counts[status] += 1;
+        if (status === "open") counts.posted += 1;
+      }
+      document.getElementById("lifecycleGrid").innerHTML = [
+        ["Posted/Open", counts.posted],
+        ["Claimed", counts.claimed],
+        ["Delivered", counts.delivered],
+        ["Completed", counts.completed],
+      ].map(([k, v]) => `
+        <div class="node">
+          <div class="k">${k}</div>
+          <div class="v">${v}</div>
+        </div>
+      `).join("");
+    }
+
+    function setupJobCategoryFilter() {
+      const categories = new Set(state.agentJobs.map((j) => String(j.category || "other")));
+      const select = document.getElementById("jobCategoryFilter");
+      const current = select.value;
+      select.innerHTML = '<option value="all">All</option>' + [...categories].sort().map((c) => `<option value="${c}">${c}</option>`).join("");
+      if ([...categories, "all"].includes(current)) {
+        select.value = current;
+      }
+    }
+
+    function renderJobsTable() {
+      let rows = [...state.agentJobs];
+      if (state.jobCategoryFilter !== "all") {
+        rows = rows.filter((r) => String(r.category || "other") === state.jobCategoryFilter);
+      }
+      const tbody = document.getElementById("jobRows");
+      tbody.innerHTML = rows.map((job) => `
+        <tr>
+          <td class="mono">${job.job_id || "-"}</td>
+          <td>${job.category || "other"}</td>
+          <td>${Number(job.reward_rtc || 0).toFixed(2)}</td>
+          <td><span class="chip ${String(job.status || "").toLowerCase() === "completed" ? "ok" : "warn"}">${job.status || "unknown"}</span></td>
+          <td class="mono">${job.poster_wallet || "-"}</td>
+          <td class="mono">${job.updated_at || job.created_at || "-"}</td>
+        </tr>
+      `).join("");
+      document.getElementById("jobsEmpty").style.display = rows.length ? "none" : "block";
+    }
+
+    function renderReputation() {
+      const rep = state.reputation && state.reputation.reputation ? state.reputation.reputation : null;
+      const rows = document.getElementById("repRows");
+      if (!rep) {
+        rows.innerHTML = "";
+        document.getElementById("repEmpty").style.display = "block";
+        return;
+      }
+      document.getElementById("repEmpty").style.display = "none";
+      rows.innerHTML = `
+        <tr>
+          <td class="mono">${rep.wallet_id || "-"}</td>
+          <td>${rep.trust_score ?? "-"}</td>
+          <td>${rep.trust_level || "-"}</td>
+          <td>${rep.jobs_posted ?? 0}</td>
+          <td>${rep.jobs_completed_as_poster ?? 0}</td>
+          <td>${Number(rep.total_rtc_paid || 0).toFixed(2)}</td>
+          <td class="mono">${rep.last_active || "-"}</td>
+        </tr>
+      `;
+    }
 
-        // Load stats on page load
-        loadStats();
+    async function lookupReputation() {
+      const wallet = document.getElementById("repWallet").value.trim();
+      if (!wallet) return;
+      try {
+        state.reputation = await fetchJson(`/agent/reputation/${encodeURIComponent(wallet)}`);
+      } catch (_err) {
+        state.reputation = null;
+      }
+      renderReputation();
+    }
+
+    async function refresh() {
+      try {
+        const [health, epoch, miners, agentStats, agentJobs] = await Promise.all([
+          fetchJson("/health"),
+          fetchJson("/epoch"),
+          fetchJson("/api/miners"),
+          fetchJson("/agent/stats").catch(() => ({ stats: {} })),
+          fetchJson("/agent/jobs").catch(() => ({ jobs: [] })),
+        ]);
+        state.miners = Array.isArray(miners) ? miners : [];
+        state.agentStats = agentStats;
+        state.agentJobs = Array.isArray(agentJobs.jobs) ? agentJobs.jobs : [];
+        renderTopCards(health, epoch);
+        setupFilters();
+        renderMinerTable();
+        renderAgentCards();
+        renderLifecycle();
+        setupJobCategoryFilter();
+        renderJobsTable();
+        document.getElementById("updatedAt").textContent = `Last update: ${new Date().toLocaleTimeString()}`;
+        document.getElementById("agentUpdatedAt").textContent = `Agent update: ${new Date().toLocaleTimeString()}`;
+      } catch (err) {
+        document.getElementById("topCards").innerHTML = `<div class="card"><div class="label">Error</div><div class="value">${String(err.message || err)}</div></div>`;
+        document.getElementById("minerRows").innerHTML = "";
+      }
+    }
+
+    document.getElementById("refreshBtn").addEventListener("click", refresh);
+    document.getElementById("archFilter").addEventListener("change", (e) => {
+      state.archFilter = e.target.value;
+      renderMinerTable();
+    });
+    document.getElementById("statusFilter").addEventListener("change", (e) => {
+      state.statusFilter = e.target.value;
+      renderMinerTable();
+    });
+    document.getElementById("jobCategoryFilter").addEventListener("change", (e) => {
+      state.jobCategoryFilter = e.target.value;
+      renderJobsTable();
+    });
+    document.getElementById("agentRefreshBtn").addEventListener("click", refresh);
+    document.getElementById("repLookupBtn").addEventListener("click", lookupReputation);
+    document.querySelectorAll("th button[data-sort]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const key = btn.getAttribute("data-sort");
+        if (state.sortBy === key) {
+          state.sortDir = state.sortDir === "asc" ? "desc" : "asc";
+        } else {
+          state.sortBy = key;
+          state.sortDir = key === "multiplier" || key === "last_attest" ? "desc" : "asc";
+        }
+        renderMinerTable();
+      });
+    });
 
-        // Auto-refresh stats every 30 seconds
-        setInterval(loadStats, 30000);
-    </script>
+    refresh();
+    setInterval(refresh, 30000);
+  </script>
 </body>
 </html>"""
     return html
