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
2025-12-22 07:55:09 +01:00
parent fb60505cdf
commit d98b2c7772
70 changed files with 3472 additions and 246 deletions
--- a/apps/marketplace-web/.gitignore
+++ b/apps/marketplace-web/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/apps/marketplace-web/README.md
+++ b/apps/marketplace-web/README.md
@ -1,15 +1,41 @@
 # Marketplace Web

-## Purpose & Scope
+Mock UI for exploring marketplace offers and submitting bids.

-Vite-powered vanilla TypeScript app for listing compute offers, placing bids, and showing market analytics. Follow the implementation blueprint in `docs/bootstrap/marketplace_web.md`.
+## Development

-## Development Setup
+```bash
+npm install
+npm run dev
+```

- Install dependencies with `npm install` once `package.json` is defined.
- Run the dev server via `npm run dev`.
- Build for production with `npm run build` and preview using `npm run preview`.
+The dev server listens on `http://localhost:5173/` by default. Adjust via `--host`/`--port` flags in the `systemd` unit or `package.json` script.

-## Notes
+## Data Modes

-Works against mock API responses initially; switch to real coordinator/pool-hub endpoints later via `VITE_API_BASE`.
+Marketplace web reuses the explorer pattern of mock vs. live data:
+
+- Set `VITE_MARKETPLACE_DATA_MODE=mock` (default) to consume JSON fixtures under `public/mock/`.
+- Set `VITE_MARKETPLACE_DATA_MODE=live` and point `VITE_MARKETPLACE_API` to the coordinator backend when integration-ready.
+
+### Feature Flags & Auth
+
+- `VITE_MARKETPLACE_ENABLE_BIDS` (default `true`) gates whether the bid form submits to the backend. Set to `false` to keep the UI read-only during phased rollouts.
+- `VITE_MARKETPLACE_REQUIRE_AUTH` (default `false`) enforces a bearer token session before live bid submissions. Tokens are stored in `localStorage` by `src/lib/auth.ts`; the API helpers automatically attach the `Authorization` header when a session is present.
+- Session JSON is expected to include `token` (string) and `expiresAt` (epoch ms). Expired or malformed entries are cleared automatically.
+
+Document any backend expectations (e.g., coordinator accepting bearer tokens) alongside the environment variables in deployment manifests.
+
+## Structure
+
+- `public/mock/offers.json` – sample marketplace offers.
+- `public/mock/stats.json` – summary dashboard statistics.
+- `src/lib/api.ts` – data-mode-aware fetch helpers.
+- `src/main.ts` – renders dashboard, offers table, and bid form.
+- `src/style.css` – layout and visual styling.
+
+## Submitting Bids
+
+When in mock mode, bid submissions simulate latency and always succeed.
+
+When in live mode, ensure the coordinator exposes `/v1/marketplace/offers`, `/v1/marketplace/stats`, and `/v1/marketplace/bids` endpoints compatible with the JSON shapes defined in `src/lib/api.ts`.
--- a/apps/marketplace-web/index.html
+++ b/apps/marketplace-web/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>marketplace-web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/apps/marketplace-web/package.json
+++ b/apps/marketplace-web/package.json
@ -0,0 +1,15 @@
+{
+  "name": "marketplace-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7"
+  }
+}
--- a/apps/marketplace-web/public/mock/offers.json
+++ b/apps/marketplace-web/public/mock/offers.json
@ -0,0 +1,36 @@
+{
+  "offers": [
+    {
+      "id": "offer-101",
+      "provider": "Alpha Pool",
+      "capacity": 250,
+      "price": 12.5,
+      "sla": "99.9%",
+      "status": "Open"
+    },
+    {
+      "id": "offer-102",
+      "provider": "Beta Collective",
+      "capacity": 140,
+      "price": 15.75,
+      "sla": "99.5%",
+      "status": "Open"
+    },
+    {
+      "id": "offer-103",
+      "provider": "Gamma Compute",
+      "capacity": 400,
+      "price": 10.9,
+      "sla": "99.95%",
+      "status": "Reserved"
+    },
+    {
+      "id": "offer-104",
+      "provider": "Delta Grid",
+      "capacity": 90,
+      "price": 18.25,
+      "sla": "99.0%",
+      "status": "Open"
+    }
+  ]
+}
--- a/apps/marketplace-web/public/mock/stats.json
+++ b/apps/marketplace-web/public/mock/stats.json
@ -0,0 +1,6 @@
+{
+  "totalOffers": 78,
+  "openCapacity": 1120,
+  "averagePrice": 14.3,
+  "activeBids": 36
+}
--- a/apps/marketplace-web/public/vite.svg
+++ b/apps/marketplace-web/public/vite.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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/apps/marketplace-web/src/counter.ts
+++ b/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)
+}
--- a/apps/marketplace-web/src/lib/api.ts
+++ b/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;
--- a/apps/marketplace-web/src/lib/auth.ts
+++ b/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);
+}
--- a/apps/marketplace-web/src/main.ts
+++ b/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();
--- a/apps/marketplace-web/src/style.css
+++ b/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;
+  }
+}
--- a/apps/marketplace-web/src/typescript.svg
+++ b/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>
--- a/apps/marketplace-web/tsconfig.json
+++ b/apps/marketplace-web/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
				`@ -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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>