Based on the repository's commit message style and the changes in the diff, here's an appropriate commit message:

```
feat: add websocket tests, PoA metrics, marketplace endpoints, and enhanced observability

- Add comprehensive websocket tests for blocks and transactions streams including multi-subscriber and high-volume scenarios
- Extend PoA consensus with per-proposer block metrics and rotation tracking
- Add latest block interval gauge and RPC error spike alerting
- Enhance mock coordinator

apps/marketplace-web/src/counter.ts

@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}

apps/marketplace-web/src/lib/api.ts

@@ -0,0 +1,118 @@
+import { loadSession } from "./auth";
+
+export type DataMode = "mock" | "live";
+
+interface OfferRecord {
+  id: string;
+  provider: string;
+  capacity: number;
+  price: number;
+  sla: string;
+  status: string;
+}
+
+interface OffersResponse {
+  offers: OfferRecord[];
+}
+
+export interface MarketplaceStats {
+  totalOffers: number;
+  openCapacity: number;
+  averagePrice: number;
+  activeBids: number;
+}
+
+export interface MarketplaceOffer extends OfferRecord {}
+
+const CONFIG = {
+  dataMode: (import.meta.env?.VITE_MARKETPLACE_DATA_MODE as DataMode) ?? "mock",
+  mockBase: "/mock",
+  apiBase: import.meta.env?.VITE_MARKETPLACE_API ?? "http://localhost:8081",
+  enableBids:
+    (import.meta.env?.VITE_MARKETPLACE_ENABLE_BIDS ?? "true").toLowerCase() !==
+    "false",
+  requireAuth:
+    (import.meta.env?.VITE_MARKETPLACE_REQUIRE_AUTH ?? "false").toLowerCase() ===
+    "true",
+};
+
+function buildHeaders(): HeadersInit {
+  const headers: Record<string, string> = {
+    "Cache-Control": "no-cache",
+  };
+
+  const session = loadSession();
+  if (session) {
+    headers.Authorization = `Bearer ${session.token}`;
+  }
+
+  return headers;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(path, {
+    ...init,
+    headers: {
+      ...buildHeaders(),
+      ...init?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed: ${response.status}`);
+  }
+  return response.json() as Promise<T>;
+}
+
+export async function fetchMarketplaceStats(): Promise<MarketplaceStats> {
+  if (CONFIG.dataMode === "mock") {
+    return request<MarketplaceStats>(`${CONFIG.mockBase}/stats.json`);
+  }
+
+  return request<MarketplaceStats>(`${CONFIG.apiBase}/v1/marketplace/stats`);
+}
+
+export async function fetchMarketplaceOffers(): Promise<MarketplaceOffer[]> {
+  if (CONFIG.dataMode === "mock") {
+    const payload = await request<OffersResponse>(`${CONFIG.mockBase}/offers.json`);
+    return payload.offers;
+  }
+
+  return request<MarketplaceOffer[]>(`${CONFIG.apiBase}/v1/marketplace/offers`);
+}
+
+export async function submitMarketplaceBid(input: {
+  provider: string;
+  capacity: number;
+  price: number;
+  notes?: string;
+}): Promise<void> {
+  if (!CONFIG.enableBids) {
+    throw new Error("Bid submissions are disabled by configuration");
+  }
+
+  if (CONFIG.dataMode === "mock") {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    return;
+  }
+
+  if (CONFIG.requireAuth && !loadSession()) {
+    throw new Error("Authentication required to submit bids");
+  }
+
+  const response = await fetch(`${CONFIG.apiBase}/v1/marketplace/bids`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...buildHeaders(),
+    },
+    body: JSON.stringify(input),
+  });
+
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || "Failed to submit bid");
+  }
+}
+
+export const MARKETPLACE_CONFIG = CONFIG;

apps/marketplace-web/src/lib/auth.ts

@@ -0,0 +1,33 @@
+export interface MarketplaceSession {
+  token: string;
+  expiresAt: number;
+}
+
+const STORAGE_KEY = "marketplace-session";
+
+export function saveSession(session: MarketplaceSession): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
+}
+
+export function loadSession(): MarketplaceSession | null {
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if (!raw) {
+    return null;
+  }
+  try {
+    const data = JSON.parse(raw) as MarketplaceSession;
+    if (typeof data.token === "string" && typeof data.expiresAt === "number") {
+      if (data.expiresAt > Date.now()) {
+        return data;
+      }
+      clearSession();
+    }
+  } catch (error) {
+    console.warn("Failed to parse stored marketplace session", error);
+  }
+  return null;
+}
+
+export function clearSession(): void {
+  localStorage.removeItem(STORAGE_KEY);
+}

apps/marketplace-web/src/main.ts

@@ -0,0 +1,216 @@
+import './style.css';
+import {
+  fetchMarketplaceOffers,
+  fetchMarketplaceStats,
+  submitMarketplaceBid,
+  MARKETPLACE_CONFIG,
+} from './lib/api';
+import type { MarketplaceOffer, MarketplaceStats } from './lib/api';
+
+const app = document.querySelector<HTMLDivElement>('#app');
+
+if (!app) {
+  throw new Error('Unable to mount marketplace app');
+}
+
+app.innerHTML = `
+  <main>
+    <header class="page-header">
+      <p>Data mode: <strong>${MARKETPLACE_CONFIG.dataMode.toUpperCase()}</strong></p>
+      <h1>Marketplace Control Center</h1>
+      <p>Monitor available offers, submit bids, and review marketplace health at a glance.</p>
+    </header>
+
+    <section class="dashboard-grid" id="stats-panel">
+      <article class="stat-card">
+        <h2>Total Offers</h2>
+        <strong id="stat-total-offers">--</strong>
+        <span>Listings currently visible</span>
+      </article>
+      <article class="stat-card">
+        <h2>Open Capacity</h2>
+        <strong id="stat-open-capacity">--</strong>
+        <span>GPU / compute units available</span>
+      </article>
+      <article class="stat-card">
+        <h2>Average Price</h2>
+        <strong id="stat-average-price">--</strong>
+        <span>Credits per unit per hour</span>
+      </article>
+      <article class="stat-card">
+        <h2>Active Bids</h2>
+        <strong id="stat-active-bids">--</strong>
+        <span>Open bids awaiting match</span>
+      </article>
+    </section>
+
+    <section class="panels">
+      <article class="panel" id="offers-panel">
+        <h2>Available Offers</h2>
+        <div id="offers-table-wrapper" class="table-wrapper">
+          <p class="empty-state">Fetching marketplace offers…</p>
+        </div>
+      </article>
+
+      <article class="panel">
+        <h2>Submit a Bid</h2>
+        <form class="bid-form" id="bid-form">
+          <div>
+            <label for="bid-provider">Preferred provider</label>
+            <input id="bid-provider" name="provider" placeholder="Alpha Pool" required />
+          </div>
+          <div>
+            <label for="bid-capacity">Capacity required (units)</label>
+            <input id="bid-capacity" name="capacity" type="number" min="1" step="1" required />
+          </div>
+          <div>
+            <label for="bid-price">Bid price (credits/unit/hr)</label>
+            <input id="bid-price" name="price" type="number" min="0" step="0.01" required />
+          </div>
+          <div>
+            <label for="bid-notes">Notes (optional)</label>
+            <textarea id="bid-notes" name="notes" rows="3" placeholder="Add constraints, time windows, etc."></textarea>
+          </div>
+          <button type="submit">Submit Bid</button>
+        </form>
+      </article>
+    </section>
+  </main>
+  <aside id="toast" class="toast"></aside>
+`;
+
+const selectors = {
+  totalOffers: document.querySelector<HTMLSpanElement>('#stat-total-offers'),
+  openCapacity: document.querySelector<HTMLSpanElement>('#stat-open-capacity'),
+  averagePrice: document.querySelector<HTMLSpanElement>('#stat-average-price'),
+  activeBids: document.querySelector<HTMLSpanElement>('#stat-active-bids'),
+  offersWrapper: document.querySelector<HTMLDivElement>('#offers-table-wrapper'),
+  bidForm: document.querySelector<HTMLFormElement>('#bid-form'),
+  toast: document.querySelector<HTMLDivElement>('#toast'),
+};
+
+function formatNumber(value: number, options: Intl.NumberFormatOptions = {}): string {
+  return new Intl.NumberFormat(undefined, options).format(value);
+}
+
+function renderStats(stats: MarketplaceStats): void {
+  selectors.totalOffers!.textContent = formatNumber(stats.totalOffers);
+  selectors.openCapacity!.textContent = `${formatNumber(stats.openCapacity)} units`;
+  selectors.averagePrice!.textContent = `${formatNumber(stats.averagePrice, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })} credits`; 
+  selectors.activeBids!.textContent = formatNumber(stats.activeBids);
+}
+
+function statusClass(status: string): string {
+  switch (status.toLowerCase()) {
+    case 'open':
+      return 'status-pill status-open';
+    case 'reserved':
+      return 'status-pill status-reserved';
+    default:
+      return 'status-pill';
+  }
+}
+
+function renderOffers(offers: MarketplaceOffer[]): void {
+  if (!selectors.offersWrapper) {
+    return;
+  }
+
+  if (offers.length === 0) {
+    selectors.offersWrapper.innerHTML = '<p class="empty-state">No offers available right now. Check back soon or submit a bid.</p>';
+    return;
+  }
+
+  const rows = offers
+    .map(
+      (offer) => `
+        <tr>
+          <td>${offer.id}</td>
+          <td>${offer.provider}</td>
+          <td>${formatNumber(offer.capacity)} units</td>
+          <td>${formatNumber(offer.price, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
+          <td>${offer.sla}</td>
+          <td><span class="${statusClass(offer.status)}">${offer.status}</span></td>
+        </tr>
+      `,
+    )
+    .join('');
+
+  selectors.offersWrapper.innerHTML = `
+    <div class="table-responsive">
+      <table class="offers-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Provider</th>
+            <th>Capacity</th>
+            <th>Price</th>
+            <th>SLA</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+    </div>
+  `;
+}
+
+function showToast(message: string, duration = 2500): void {
+  if (!selectors.toast) return;
+  selectors.toast.textContent = message;
+  selectors.toast.classList.add('visible');
+
+  window.setTimeout(() => {
+    selectors.toast?.classList.remove('visible');
+  }, duration);
+}
+
+async function loadDashboard(): Promise<void> {
+  try {
+    const [stats, offers] = await Promise.all([
+      fetchMarketplaceStats(),
+      fetchMarketplaceOffers(),
+    ]);
+
+    renderStats(stats);
+    renderOffers(offers);
+  } catch (error) {
+    console.error(error);
+    if (selectors.offersWrapper) {
+      selectors.offersWrapper.innerHTML = '<p class="empty-state">Failed to load offers. Please retry shortly.</p>';
+    }
+    showToast('Failed to load marketplace data.');
+  }
+}
+
+selectors.bidForm?.addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  const formData = new FormData(selectors.bidForm!);
+  const provider = formData.get('provider')?.toString().trim();
+  const capacity = Number(formData.get('capacity'));
+  const price = Number(formData.get('price'));
+  const notes = formData.get('notes')?.toString().trim();
+
+  if (!provider || Number.isNaN(capacity) || Number.isNaN(price)) {
+    showToast('Please complete the required fields.');
+    return;
+  }
+
+  try {
+    selectors.bidForm!.querySelector('button')!.setAttribute('disabled', 'disabled');
+    await submitMarketplaceBid({ provider, capacity, price, notes });
+    selectors.bidForm!.reset();
+    showToast('Bid submitted successfully!');
+  } catch (error) {
+    console.error(error);
+    showToast('Unable to submit bid. Please try again.');
+  } finally {
+    selectors.bidForm!.querySelector('button')!.removeAttribute('disabled');
+  }
+});
+
+loadDashboard();

apps/marketplace-web/src/style.css

@@ -0,0 +1,219 @@
+:root {
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  color: #121212;
+  background-color: #f7f8fa;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f7f8fa 0%, #eef1f6 100%);
+}
+
+#app {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px 64px;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-header h1 {
+  font-size: 2.4rem;
+  margin: 0 0 0.5rem;
+  color: #1d2736;
+}
+
+.page-header p {
+  margin: 0;
+  color: #5a6575;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 12px 24px rgba(18, 24, 32, 0.08);
+}
+
+.stat-card h2 {
+  margin: 0 0 12px;
+  font-size: 1rem;
+  color: #64748b;
+}
+
+.stat-card strong {
+  font-size: 1.8rem;
+  color: #1d2736;
+}
+
+.stat-card span {
+  display: block;
+  margin-top: 6px;
+  color: #8895a7;
+  font-size: 0.9rem;
+}
+
+.panels {
+  display: grid;
+  gap: 24px;
+}
+
+.panel {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
+}
+
+.panel h2 {
+  margin: 0 0 16px;
+  font-size: 1.4rem;
+  color: #1d2736;
+}
+
+.offers-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.offers-table th,
+.offers-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #e5e9f1;
+}
+
+.offers-table th {
+  color: #64748b;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.offers-table tbody tr:hover {
+  background-color: rgba(99, 102, 241, 0.08);
+}
+
+.table-responsive {
+  overflow-x: auto;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.status-open {
+  background-color: rgba(34, 197, 94, 0.12);
+  color: #15803d;
+}
+
+.status-reserved {
+  background-color: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+}
+
+.bid-form {
+  display: grid;
+  gap: 16px;
+}
+
+.bid-form label {
+  font-weight: 600;
+  color: #374151;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.bid-form input,
+.bid-form select,
+.bid-form textarea {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid #d1d9e6;
+  padding: 10px 12px;
+  font-size: 1rem;
+  font-family: inherit;
+  background-color: #f9fbff;
+}
+
+.bid-form button {
+  justify-self: flex-start;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #ffffff;
+  border: none;
+  border-radius: 999px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 150ms ease, box-shadow 150ms ease;
+}
+
+.bid-form button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 18px rgba(99, 102, 241, 0.3);
+}
+
+.empty-state {
+  padding: 24px;
+  text-align: center;
+  color: #6b7280;
+  border: 1px dashed #cbd5f5;
+  border-radius: 12px;
+  background-color: rgba(99, 102, 241, 0.05);
+}
+
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 14px 18px;
+  background: #111827;
+  color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3);
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+.toast.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (max-width: 720px) {
+  #app {
+    padding: 32px 16px 48px;
+  }
+
+  .dashboard-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+
+  .offers-table th,
+  .offers-table td {
+    padding: 10px 12px;
+    font-size: 0.95rem;
+  }
+}

apps/marketplace-web/src/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>