Upload 3 files

frontend/app.js

@@ -0,0 +1,548 @@
+
+let appState = null;
+let sourceRaw = "";
+let currentTf = 30;
+let selectedSymbol = "frxEURUSD";
+
+const tfList = [30, 60, 120, 180, 300];
+const tfLabels = {30: "30s", 60: "1m", 120: "2m", 180: "3m", 300: "5m"};
+
+const $ = (id) => document.getElementById(id);
+
+function formatUTC(ts) {
+  if (ts === null || ts === undefined || Number.isNaN(Number(ts))) return "—";
+  const d = new Date(Number(ts) * 1000);
+  return d.toISOString().replace("T", " ").replace("Z", " UTC");
+}
+
+function formatNumber(v, digits = 6) {
+  if (v === null || v === undefined || Number.isNaN(Number(v))) return "—";
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "—";
+  if (Math.abs(n) >= 1000) return n.toFixed(2);
+  if (Math.abs(n) >= 1) return n.toFixed(4);
+  return n.toFixed(digits);
+}
+
+function setPill(id, text, cls = "") {
+  const el = $(id);
+  if (!el) return;
+  el.textContent = text;
+  el.className = "status-pill " + (cls || "subtle");
+}
+
+function prettyJSON(obj) {
+  return JSON.stringify(obj, null, 2);
+}
+
+function safeObj(v, fallback = {}) {
+  return (v && typeof v === "object") ? v : fallback;
+}
+
+function renderCodeViewer(htmlText) {
+  const viewer = $("sourceViewer");
+  if (!viewer) return;
+  viewer.innerHTML = htmlText;
+  applyCodeSearch();
+}
+
+function applyCodeSearch() {
+  const query = ($("codeSearch")?.value || "").trim().toLowerCase();
+  const lines = document.querySelectorAll(".code-line");
+  let matches = 0;
+  let first = null;
+  lines.forEach((line) => {
+    const text = (line.dataset.text || "").toLowerCase();
+    const hit = !query || text.includes(query);
+    line.classList.toggle("hidden", !hit);
+    line.classList.toggle("match", !!query && hit);
+    if (hit && query) {
+      matches += 1;
+      if (!first) first = line;
+    }
+  });
+  const meta = $("codeMeta");
+  if (meta) {
+    meta.textContent = query ? `${matches} matching lines` : `${lines.length} lines loaded`;
+  }
+  if (query && first) {
+    first.scrollIntoView({behavior: "smooth", block: "center"});
+  }
+}
+
+function buildTfButtons() {
+  const wrap = $("tfButtons");
+  if (!wrap) return;
+  wrap.innerHTML = "";
+  tfList.forEach((tf) => {
+    const b = document.createElement("button");
+    b.className = "tf-btn" + (tf === currentTf ? " active" : "");
+    b.textContent = tfLabels[tf];
+    b.onclick = async () => {
+      currentTf = tf;
+      await fetch(`/api/config/timeframe/${tf}`, {method:"POST"});
+      buildTfButtons();
+      refreshState();
+    };
+    wrap.appendChild(b);
+  });
+}
+
+async function setSymbol(symbol) {
+  if (!symbol) return;
+  await fetch(`/api/config/symbol/${encodeURIComponent(symbol)}`, {method:"POST"});
+  selectedSymbol = symbol;
+  refreshState();
+}
+
+function populateSymbols(symbols) {
+  const sel = $("symbolSelect");
+  if (!sel) return;
+  sel.innerHTML = "";
+  (symbols || []).forEach((sym) => {
+    const opt = document.createElement("option");
+    opt.value = sym;
+    opt.textContent = sym;
+    sel.appendChild(opt);
+  });
+  if (symbols && symbols.length) {
+    sel.value = selectedSymbol;
+    if (!selectedSymbol || !symbols.includes(selectedSymbol)) {
+      selectedSymbol = symbols[0];
+      sel.value = selectedSymbol;
+    }
+    $("symbolInput").value = selectedSymbol;
+  }
+}
+
+function drawCandles(canvas, candles) {
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  const w = canvas.width, h = canvas.height;
+  ctx.clearRect(0,0,w,h);
+
+  // background grid
+  ctx.strokeStyle = "rgba(120,140,180,0.16)";
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 8; i++) {
+    const y = Math.round((h - 24) * i / 8) + 12;
+    ctx.beginPath();
+    ctx.moveTo(8, y);
+    ctx.lineTo(w - 8, y);
+    ctx.stroke();
+  }
+
+  if (!candles || candles.length === 0) {
+    ctx.fillStyle = "#91a0be";
+    ctx.font = "18px monospace";
+    ctx.fillText("Waiting for candles…", 24, 38);
+    return;
+  }
+
+  const visible = candles.slice(-80);
+  const highs = visible.map(c => Number(c.high));
+  const lows = visible.map(c => Number(c.low));
+  const max = Math.max(...highs);
+  const min = Math.min(...lows);
+  const pad = (max - min) * 0.12 || (Math.abs(max) * 0.01) || 1;
+  const hi = max + pad;
+  const lo = min - pad;
+  const plotW = w - 36;
+  const plotH = h - 36;
+  const x0 = 18, y0 = 14;
+  const candleWidth = Math.max(4, Math.floor(plotW / visible.length * 0.68));
+  const gap = Math.max(2, Math.floor(plotW / visible.length * 0.28));
+
+  function yFor(price) {
+    return y0 + (hi - price) / (hi - lo) * plotH;
+  }
+
+  // price scale text
+  ctx.fillStyle = "#91a0be";
+  ctx.font = "12px monospace";
+  ctx.fillText(hi.toFixed(6), 18, 12);
+  ctx.fillText(lo.toFixed(6), 18, h - 8);
+
+  visible.forEach((c, i) => {
+    const o = Number(c.open), hgh = Number(c.high), l = Number(c.low), cl = Number(c.close);
+    const x = x0 + i * (candleWidth + gap);
+    const up = cl >= o;
+    const bodyTop = yFor(Math.max(o, cl));
+    const bodyBottom = yFor(Math.min(o, cl));
+    const wickTop = yFor(hgh);
+    const wickBottom = yFor(l);
+
+    ctx.strokeStyle = up ? "#58d68d" : "#ff7c7c";
+    ctx.beginPath();
+    ctx.moveTo(x + candleWidth/2, wickTop);
+    ctx.lineTo(x + candleWidth/2, wickBottom);
+    ctx.stroke();
+
+    ctx.fillStyle = up ? "rgba(88,214,141,0.85)" : "rgba(255,124,124,0.85)";
+    const bodyH = Math.max(1, bodyBottom - bodyTop);
+    ctx.fillRect(x, bodyTop, candleWidth, bodyH);
+  });
+
+  // chart label
+  const last = visible[visible.length - 1];
+  ctx.fillStyle = "#e6edf7";
+  ctx.font = "14px monospace";
+  ctx.fillText(`TF ${tfLabels[currentTf]} | O ${formatNumber(last.open)} H ${formatNumber(last.high)} L ${formatNumber(last.low)} C ${formatNumber(last.close)}`, 24, 24);
+}
+
+function drawSpark(canvas, ticks) {
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  const w = canvas.width, h = canvas.height;
+  ctx.clearRect(0,0,w,h);
+  ctx.strokeStyle = "rgba(120,140,180,0.16)";
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 4; i++) {
+    const y = Math.round((h - 24) * i / 4) + 12;
+    ctx.beginPath();
+    ctx.moveTo(8, y);
+    ctx.lineTo(w - 8, y);
+    ctx.stroke();
+  }
+
+  if (!ticks || ticks.length < 2) {
+    ctx.fillStyle = "#91a0be";
+    ctx.font = "16px monospace";
+    ctx.fillText("Waiting for ticks…", 24, 32);
+    return;
+  }
+
+  const visible = ticks.slice(-120);
+  const prices = visible.map(t => Number(t.price));
+  const max = Math.max(...prices);
+  const min = Math.min(...prices);
+  const pad = (max - min) * 0.15 || (Math.abs(max) * 0.01) || 1;
+  const hi = max + pad;
+  const lo = min - pad;
+  const x0 = 18, y0 = 14;
+  const plotW = w - 36, plotH = h - 36;
+
+  function yFor(price) {
+    return y0 + (hi - price) / (hi - lo) * plotH;
+  }
+
+  ctx.strokeStyle = "#8dd5ff";
+  ctx.beginPath();
+  visible.forEach((t, i) => {
+    const x = x0 + (i / Math.max(1, visible.length - 1)) * plotW;
+    const y = yFor(Number(t.price));
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  });
+  ctx.stroke();
+
+  const last = visible[visible.length - 1];
+  ctx.fillStyle = "#e6edf7";
+  ctx.font = "14px monospace";
+  ctx.fillText(`Last ${formatNumber(last.price)} | Bid ${formatNumber(last.bid)} | Ask ${formatNumber(last.ask)} | Spread ${formatNumber(last.spread, 8)}`, 24, 24);
+}
+
+function cardClass(value, goodWhen = null, badWhen = null) {
+  const s = String(value ?? "").toLowerCase();
+  if (badWhen && badWhen.includes(s)) return "bad";
+  if (goodWhen && goodWhen.includes(s)) return "good";
+  if (["blocked", "invalidated", "expired", "error", "cold_start"].includes(s)) return "bad";
+  if (["confirmed", "normal", "strong", "warm"].includes(s)) return "good";
+  if (["degraded", "cautious", "candidate", "forming", "cooling", "demo"].includes(s)) return "warn";
+  return "";
+}
+
+function makeCard(label, value, cls = "") {
+  const div = document.createElement("div");
+  div.className = `status-card ${cls}`.trim();
+  div.innerHTML = `<div class="k">${label}</div><div class="v">${value}</div>`;
+  return div;
+}
+
+function renderStatusGrid(snapshot) {
+  const grid = $("statusGrid");
+  if (!grid) return;
+  const engine = safeObj(snapshot.engine);
+  const out = safeObj(engine.raw_output);
+  const conn = safeObj(snapshot.connection);
+  const tl = safeObj(snapshot.timeline);
+  const current = safeObj(tl.current);
+  const clk = safeObj(snapshot.clock);
+
+  const items = [
+    ["direction", out.direction ?? "—", cardClass(out.direction, ["buy","sell"])],
+    ["confidence", out.confidence !== undefined ? Number(out.confidence).toFixed(4) : "—", ""],
+    ["execution_suitability", out.execution_suitability ?? "—", cardClass(out.execution_suitability)],
+    ["market_state", out.market_state ?? "—", cardClass(out.market_state)],
+    ["regime_label", out.regime_label ?? "—", cardClass(out.regime_label)],
+    ["asset_mode", out.asset_mode ?? "—", cardClass(out.asset_mode)],
+    ["timeframe_alignment", out.timeframe_alignment !== undefined ? Number(out.timeframe_alignment).toFixed(4) : "—", ""],
+    ["manipulation_probability", out.manipulation_probability !== undefined ? Number(out.manipulation_probability).toFixed(4) : "—", ""],
+    ["liquidity_score", out.liquidity_score !== undefined ? Number(out.liquidity_score).toFixed(4) : "—", ""],
+    ["volatility_score", out.volatility_score !== undefined ? Number(out.volatility_score).toFixed(4) : "—", ""],
+    ["pressure_score", out.pressure_score !== undefined ? Number(out.pressure_score).toFixed(4) : "—", ""],
+    ["momentum_score", out.momentum_score !== undefined ? Number(out.momentum_score).toFixed(4) : "—", ""],
+    ["timing_score", out.timing_score !== undefined ? Number(out.timing_score).toFixed(4) : "—", ""],
+    ["signal_freshness", out.signal_freshness !== undefined ? Number(out.signal_freshness).toFixed(4) : "—", ""],
+    ["spread_health", out.spread_health !== undefined ? Number(out.spread_health).toFixed(4) : "—", ""],
+    ["data_quality", out.data_quality !== undefined ? Number(out.data_quality).toFixed(4) : "—", ""],
+    ["readability_score", out.readability_score !== undefined ? Number(out.readability_score).toFixed(4) : "—", ""],
+    ["blocked_flag", String(out.blocked_flag ?? false), cardClass(out.blocked_flag ? "blocked" : "ok")],
+    ["degraded_mode_flag", String(out.degraded_mode_flag ?? false), cardClass(out.degraded_mode_flag ? "degraded" : "ok")],
+    ["stale_signal_flag", String(out.stale_signal_flag ?? false), cardClass(out.stale_signal_flag ? "expired" : "ok")],
+    ["reason_summary", out.reason_summary ?? "—", ""],
+    ["signal_generated_at", current.generated_at ? formatUTC(current.generated_at) : "—", ""],
+    ["signal_expires_at", current.expires_at ? formatUTC(current.expires_at) : "—", ""],
+    ["signal_countdown", current.countdown !== undefined && current.countdown !== null ? `${Number(current.countdown).toFixed(1)}s` : "—", ""],
+    ["signal_age", current.age !== undefined ? `${Number(current.age).toFixed(1)}s` : "—", ""],
+    ["lifecycle_state", current.lifecycle_state ?? out.lifecycle_state ?? "—", cardClass(current.lifecycle_state ?? out.lifecycle_state ?? "")],
+    ["warm_up_fraction", out.warm_up_fraction !== undefined ? Number(out.warm_up_fraction).toFixed(4) : "—", ""],
+    ["operational_mode", out.operational_mode ?? conn.status ?? "—", cardClass(out.operational_mode ?? conn.status ?? "")],
+    ["base_timeframe", snapshot.base_ref?.timeframe_label ?? "—", ""],
+    ["selected_display_tf", conn.selected_display_tf_label ?? "—", ""],
+    ["tick_count", engine.tick_count ?? 0, ""],
+    ["is_warm", String(engine.is_warm ?? false), cardClass(engine.is_warm ? "warm" : "cold_start")],
+    ["live_mode", String(conn.live_mode ?? false), cardClass(conn.live_mode ? "confirmed" : "demo")],
+    ["demo_mode", String(conn.demo_mode ?? false), cardClass(conn.demo_mode ? "demo" : "ok")],
+    ["ws_status", conn.status ?? "—", cardClass(conn.status)],
+    ["last_error", conn.last_error ?? "—", ""],
+    ["server_time", clk.server_time ? formatUTC(clk.server_time) : "—", ""],
+  ];
+
+  grid.innerHTML = "";
+  items.forEach(([label, value, cls]) => grid.appendChild(makeCard(label, value, cls)));
+}
+
+function renderRawOutput(snapshot) {
+  const pre = $("rawOutput");
+  if (!pre) return;
+  const out = safeObj(snapshot.engine).raw_output || {};
+  pre.textContent = prettyJSON(out);
+}
+
+function renderHealth(snapshot) {
+  const pre = $("healthOutput");
+  if (!pre) return;
+  const health = safeObj(snapshot.engine).health || {};
+  pre.textContent = prettyJSON(health);
+}
+
+function renderDebug(snapshot) {
+  const wrap = $("debugTrace");
+  if (!wrap) return;
+  const dbg = safeObj(snapshot.engine).debug_trace || {};
+  const sections = [
+    ["candle", dbg.candle],
+    ["data_integrity", dbg.data_integrity],
+    ["market_state", dbg.market_state],
+    ["asset_profile", dbg.asset_profile],
+    ["session", dbg.session],
+    ["timeframe_fusion", dbg.timeframe_fusion],
+    ["events", dbg.events],
+    ["liquidity_pressure", dbg.liquidity_pressure],
+    ["technical_stack", dbg.technical_stack],
+    ["score", dbg.score],
+    ["lifecycle", dbg.lifecycle],
+    ["warmup", dbg.warmup],
+  ];
+  wrap.innerHTML = "";
+  sections.forEach(([name, value]) => {
+    const d = document.createElement("details");
+    d.open = false;
+    const summaryValue = value && typeof value === "object" ? JSON.stringify(Object.keys(value).slice(0, 5)) : String(value);
+    d.innerHTML = `<summary>${name}</summary><pre>${escapeHTML(JSON.stringify(value, null, 2))}</pre>`;
+    wrap.appendChild(d);
+  });
+}
+
+function escapeHTML(str) {
+  return String(str)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function renderTimeline(snapshot) {
+  const wrap = $("signalTimeline");
+  if (!wrap) return;
+  const tl = safeObj(snapshot.timeline);
+  const rows = Array.isArray(tl.active_signals) ? tl.active_signals : [];
+  const current = tl.current;
+
+  const header = `<div class="signal-row head"><div>ID / Dir</div><div>Generated</div><div>Expires</div><div>Countdown / Age</div><div>State</div><div>Status</div></div>`;
+  const body = rows.map((s) => {
+    const countdown = (s.countdown === null || s.countdown === undefined) ? "—" : `${Number(s.countdown).toFixed(1)}s`;
+    const age = (s.age === null || s.age === undefined) ? "—" : `${Number(s.age).toFixed(1)}s`;
+    const status = s.invalidated ? "invalidated" : (s.stale ? "stale" : (s.active ? "active" : "closed"));
+    const statusClass = s.invalidated ? "expired" : (s.stale ? "stale" : (s.active ? "active" : ""));
+    return `
+      <div class="signal-row">
+        <div>#${s.signal_id} ${s.direction}</div>
+        <div>${formatUTC(s.generated_at)}</div>
+        <div>${formatUTC(s.expires_at)}</div>
+        <div>${countdown}<br><span class="meta">${age}</span></div>
+        <div>${s.lifecycle_state}</div>
+        <div class="${statusClass}">${status}</div>
+      </div>
+    `;
+  }).join("");
+
+  wrap.innerHTML = header + (body || `<div class="signal-row"><div>—</div><div>—</div><div>—</div><div>—</div><div>idle</div><div>inactive</div></div>`);
+  $("signalDirection").textContent = current?.direction ? `Direction: ${current.direction}` : "Direction: —";
+  $("signalLifecycle").textContent = current?.lifecycle_state ? `Lifecycle: ${current.lifecycle_state}` : "Lifecycle: —";
+  $("signalExpiryBucket").textContent = current?.expiry_bucket ? `Expiry bucket: ${current.expiry_bucket}` : "Expiry bucket: —";
+  $("signalFreshness").textContent = current?.confidence !== undefined ? `Confidence: ${Number(current.confidence).toFixed(4)}` : "Confidence: —";
+  $("signalState").textContent = current?.stale ? "Stale signal" : (current?.active ? "Active signal" : "Inactive");
+}
+
+function renderLogs(snapshot) {
+  const wrap = $("logList");
+  if (!wrap) return;
+  const logs = Array.isArray(snapshot.logs) ? snapshot.logs.slice(-24).reverse() : [];
+  wrap.innerHTML = logs.map((row) => `
+    <div class="log-item">
+      <div>${formatUTC(row.ts)}</div>
+      <div>${formatNumber(row.price)}</div>
+      <div>${row.market_state || ""}</div>
+      <div class="meta">dir ${row.direction || "—"} | conf ${row.confidence !== undefined ? Number(row.confidence).toFixed(4) : "—"} | ${row.execution_suitability || "—"} | ${row.lifecycle_state || "—"}</div>
+      <div class="reason">${escapeHTML(row.reason_summary || "")}</div>
+    </div>
+  `).join("");
+}
+
+function renderPrices(snapshot) {
+  const ticks = safeObj(snapshot.charts).price_stream || [];
+  const canvas = $("priceSpark");
+  drawSpark(canvas, ticks);
+  const list = $("tickList");
+  if (!list) return;
+  const rows = ticks.slice(-18).reverse().map(t => `
+    <div class="log-item">
+      <div>${formatUTC(t.ts)}</div>
+      <div>${formatNumber(t.price)}</div>
+      <div>${t.source || "tick"}</div>
+      <div class="meta">bid ${formatNumber(t.bid)} | ask ${formatNumber(t.ask)} | spread ${formatNumber(t.spread, 8)} | ${escapeHTML(t.symbol || "")}</div>
+    </div>
+  `).join("");
+  list.innerHTML = rows || `<div class="log-item"><div>Waiting for ticks…</div><div>—</div><div>—</div></div>`;
+}
+
+function renderChart(snapshot) {
+  const charts = safeObj(snapshot.charts);
+  const tf = String(charts.selected_timeframe || currentTf);
+  currentTf = Number(tf);
+  buildTfButtons();
+  const candles = safeObj(charts.timeframes)[String(currentTf)] || [];
+  drawCandles($("candleChart"), candles);
+  $("chartNote").textContent = `Selected: ${tfLabels[currentTf] || currentTf + "s"} | ${candles.length} candles | same live tick stream`;
+}
+
+function renderClock(snapshot) {
+  const clk = safeObj(snapshot.clock);
+  const conn = safeObj(snapshot.connection);
+  $("utcClock").textContent = formatUTC(clk.utc_now);
+  $("latestTick").textContent = clk.latest_tick_ts ? `${formatUTC(clk.latest_tick_ts)} (${Number(clk.latest_tick_age_sec || 0).toFixed(1)}s ago)` : "—";
+  $("baseRef").textContent = `${snapshot.base_ref?.timeframe_label || "30s"} | ${conn.selected_symbol || "—"} | ${conn.market_type || "unknown"}`;
+  const current = safeObj(snapshot.timeline).current;
+  $("signalAge").textContent = current?.age !== undefined && current?.age !== null ? `${Number(current.age).toFixed(1)}s` : "—";
+  $("signalCountdown").textContent = current?.countdown !== undefined && current?.countdown !== null ? `${Number(current.countdown).toFixed(1)}s` : "—";
+}
+
+function renderPills(snapshot) {
+  const conn = safeObj(snapshot.connection);
+  const engine = safeObj(snapshot.engine);
+  const out = safeObj(engine.raw_output);
+
+  setPill("connStatus", conn.status || "idle", cardClass(conn.status));
+  setPill("modeStatus", conn.demo_mode ? "demo mode" : (conn.live_mode ? "live mode" : (conn.status || "idle")), cardClass(conn.demo_mode ? "demo" : conn.status));
+  setPill("warmStatus", engine.is_warm ? "warm" : "cold start", engine.is_warm ? "good" : "warn");
+}
+
+function updateAll(snapshot) {
+  appState = snapshot;
+  selectedSymbol = safeObj(snapshot.connection).selected_symbol || selectedSymbol;
+  renderPills(snapshot);
+  renderClock(snapshot);
+  renderChart(snapshot);
+  renderPrices(snapshot);
+  renderStatusGrid(snapshot);
+  renderRawOutput(snapshot);
+  renderDebug(snapshot);
+  renderTimeline(snapshot);
+  renderLogs(snapshot);
+  renderHealth(snapshot);
+}
+
+async function refreshState() {
+  try {
+    const res = await fetch("/api/state", {cache: "no-store"});
+    const data = await res.json();
+    updateAll(data);
+  } catch (err) {
+    setPill("connStatus", "frontend offline", "bad");
+  }
+}
+
+async function loadSource() {
+  try {
+    const [rawRes, htmlRes] = await Promise.all([
+      fetch("/api/source", {cache: "no-store"}),
+      fetch("/api/source-html", {cache: "no-store"}),
+    ]);
+    const raw = await rawRes.json();
+    sourceRaw = raw.source || "";
+    $("codeMeta").textContent = `${raw.line_count || 0} lines loaded`;
+    const htmlText = await htmlRes.text();
+    renderCodeViewer(htmlText);
+  } catch (err) {
+    $("sourceViewer").textContent = "Source unavailable.";
+  }
+}
+
+async function loadSymbols() {
+  try {
+    const res = await fetch("/api/symbols", {cache: "no-store"});
+    const data = await res.json();
+    populateSymbols(data.symbols || []);
+    selectedSymbol = data.selected || selectedSymbol;
+    $("symbolInput").value = selectedSymbol;
+    if (data.selected) {
+      $("symbolSelect").value = data.selected;
+    }
+  } catch (err) {
+    populateSymbols(["frxEURUSD","frxGBPUSD","frxUSDJPY","cryBTCUSD","cryETHUSD"]);
+  }
+}
+
+function attachHandlers() {
+  $("symbolApply").onclick = async () => {
+    const sel = $("symbolSelect").value;
+    await setSymbol(sel);
+  };
+  $("symbolSet").onclick = async () => {
+    const sym = $("symbolInput").value.trim();
+    if (sym) await setSymbol(sym);
+  };
+  $("codeSearch").addEventListener("input", applyCodeSearch);
+  $("codeCopy").onclick = async () => {
+    try {
+      await navigator.clipboard.writeText(sourceRaw || "");
+      $("codeCopy").textContent = "Copied";
+      setTimeout(() => $("codeCopy").textContent = "Copy", 1200);
+    } catch (err) {
+      $("codeCopy").textContent = "Copy failed";
+      setTimeout(() => $("codeCopy").textContent = "Copy", 1200);
+    }
+  };
+}
+
+async function boot() {
+  buildTfButtons();
+  attachHandlers();
+  await loadSymbols();
+  await loadSource();
+  await refreshState();
+  setInterval(refreshState, 1000);
+}
+
+window.addEventListener("DOMContentLoaded", boot);

frontend/index.html

@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>MAYTHOS Live Space</title>
+  <link rel="stylesheet" href="/static/styles.css" />
+</head>
+<body>
+  <div class="app-shell">
+    <header class="topbar">
+      <div>
+        <div class="eyebrow">MAYTHOS Docker Space</div>
+        <h1>Real-time Engine Console</h1>
+        <p class="subtitle">Live Deriv stream, local candle aggregation, engine internals, debug trace, lifecycle, and health.</p>
+      </div>
+      <div class="top-actions">
+        <div class="status-pill" id="connStatus">connecting</div>
+        <div class="status-pill subtle" id="modeStatus">booting</div>
+        <div class="status-pill subtle" id="warmStatus">cold</div>
+      </div>
+    </header>
+
+    <section class="toolbar card">
+      <div class="toolbar-row">
+        <label class="field">
+          <span>Symbol</span>
+          <div class="inline">
+            <select id="symbolSelect"></select>
+            <button id="symbolApply" class="btn">Apply</button>
+          </div>
+        </label>
+        <label class="field">
+          <span>Custom symbol</span>
+          <div class="inline">
+            <input id="symbolInput" placeholder="frxEURUSD / cryBTCUSD" />
+            <button id="symbolSet" class="btn secondary">Set</button>
+          </div>
+        </label>
+        <label class="field">
+          <span>Display timeframe</span>
+          <div class="inline tf-buttons" id="tfButtons"></div>
+        </label>
+      </div>
+      <div class="toolbar-row compact">
+        <div class="mini-stat"><span>Base ref</span><strong id="baseRef">—</strong></div>
+        <div class="mini-stat"><span>Latest tick</span><strong id="latestTick">—</strong></div>
+        <div class="mini-stat"><span>Signal age</span><strong id="signalAge">—</strong></div>
+        <div class="mini-stat"><span>Expiry countdown</span><strong id="signalCountdown">—</strong></div>
+        <div class="mini-stat"><span>UTC clock</span><strong id="utcClock">—</strong></div>
+      </div>
+    </section>
+
+    <main class="grid">
+      <section class="panel card chart-panel">
+        <div class="panel-head">
+          <h2>Live candle chart</h2>
+          <div class="panel-note" id="chartNote">30s / 1m / 2m / 3m / 5m from the same tick feed</div>
+        </div>
+        <canvas id="candleChart" width="1200" height="420"></canvas>
+        <div class="signal-strip">
+          <div class="signal-chip" id="signalDirection">—</div>
+          <div class="signal-chip" id="signalLifecycle">—</div>
+          <div class="signal-chip" id="signalExpiryBucket">—</div>
+          <div class="signal-chip" id="signalFreshness">—</div>
+          <div class="signal-chip" id="signalState">—</div>
+        </div>
+      </section>
+
+      <section class="panel card price-panel">
+        <div class="panel-head">
+          <h2>Live price stream</h2>
+          <div class="panel-note">Ticks, spread, and local runtime status</div>
+        </div>
+        <canvas id="priceSpark" width="1200" height="180"></canvas>
+        <div class="ticker-list" id="tickList"></div>
+      </section>
+
+      <section class="panel card status-panel">
+        <div class="panel-head">
+          <h2>Status cards</h2>
+          <div class="panel-note">Raw engine output values and derived signal timeline</div>
+        </div>
+        <div class="status-grid" id="statusGrid"></div>
+      </section>
+
+      <section class="panel card engine-panel">
+        <div class="panel-head">
+          <h2>Raw engine output</h2>
+          <div class="panel-note">Full dict returned by MAYTHOS.tick()</div>
+        </div>
+        <pre class="json-box" id="rawOutput"></pre>
+      </section>
+
+      <section class="panel card debug-panel">
+        <div class="panel-head">
+          <h2>Nested debug trace</h2>
+          <div class="panel-note">candle, data_integrity, market_state, asset_profile, session, timeframe_fusion, events, liquidity_pressure, technical_stack, score, lifecycle, warmup</div>
+        </div>
+        <div id="debugTrace" class="debug-trace"></div>
+      </section>
+
+      <section class="panel card lifecycle-panel">
+        <div class="panel-head">
+          <h2>Signal lifecycle & expiry</h2>
+          <div class="panel-note">Generation time, expiry time, countdown, age, stale flag, and transitions</div>
+        </div>
+        <div id="signalTimeline" class="timeline"></div>
+      </section>
+
+      <section class="panel card health-panel">
+        <div class="panel-head">
+          <h2>Engine health</h2>
+          <div class="panel-note">Error counts and recent errors from engine_health()</div>
+        </div>
+        <pre class="json-box" id="healthOutput"></pre>
+      </section>
+
+      <section class="panel card log-panel">
+        <div class="panel-head">
+          <h2>Compact log viewer</h2>
+          <div class="panel-note">Recent candle-close ticks</div>
+        </div>
+        <div id="logList" class="log-list"></div>
+      </section>
+
+      <section class="panel card code-panel">
+        <div class="panel-head">
+          <h2>Source code viewer</h2>
+          <div class="panel-note">Scroll, search, and copy the uploaded maythos_patched.py verbatim</div>
+        </div>
+        <div class="code-toolbar">
+          <input id="codeSearch" placeholder="Search in source..." />
+          <button id="codeCopy" class="btn">Copy</button>
+          <span class="code-meta" id="codeMeta"></span>
+        </div>
+        <div id="sourceViewer" class="source-viewer"></div>
+      </section>
+    </main>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>

frontend/styles.css

@@ -0,0 +1,172 @@
+
+:root{
+  --bg:#0b1020;
+  --bg2:#11182c;
+  --card:#131b31;
+  --card2:#0f1629;
+  --text:#e6edf7;
+  --muted:#91a0be;
+  --line:#27324d;
+  --accent:#8dd5ff;
+  --accent2:#80ffb2;
+  --warn:#ffcc66;
+  --bad:#ff7c7c;
+  --good:#58d68d;
+  --chip:#1c2640;
+  --shadow:0 12px 30px rgba(0,0,0,.25);
+  --radius:18px;
+  --code-bg:#0a0f1d;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+*{box-sizing:border-box}
+body{
+  margin:0;
+  font-family:var(--sans);
+  color:var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(141,213,255,.11), transparent 25%),
+    radial-gradient(circle at 80% 0%, rgba(128,255,178,.08), transparent 28%),
+    linear-gradient(180deg, var(--bg), #070a13 85%);
+}
+.app-shell{max-width:1600px;margin:0 auto;padding:18px}
+.topbar{
+  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
+  margin-bottom:16px;padding:18px 18px 8px 18px
+}
+.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
+h1{margin:.25rem 0 .4rem;font-size:32px}
+.subtitle{margin:0;color:var(--muted);max-width:920px}
+.top-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
+.status-pill{
+  padding:8px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--line);
+  font-size:13px;text-transform:uppercase;letter-spacing:.06em
+}
+.status-pill.subtle{opacity:.85}
+.card{
+  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--card);
+  border:1px solid var(--line);
+  border-radius:var(--radius);
+  box-shadow:var(--shadow);
+}
+.toolbar{padding:16px;margin-bottom:16px}
+.toolbar-row{display:grid;grid-template-columns:1.1fr 1.1fr 1.6fr;gap:14px;align-items:end}
+.toolbar-row.compact{grid-template-columns:repeat(5,1fr);margin-top:12px}
+.field span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
+.inline{display:flex;gap:8px;align-items:center}
+select,input,button{
+  font:inherit
+}
+select,input{
+  width:100%;padding:11px 12px;border-radius:12px;background:var(--card2);color:var(--text);
+  border:1px solid var(--line);outline:none
+}
+.btn{
+  padding:11px 14px;border:none;border-radius:12px;background:linear-gradient(180deg, #2d6cdf, #214fd0);
+  color:white;cursor:pointer;white-space:nowrap
+}
+.btn.secondary{background:linear-gradient(180deg, #1e2c4c, #13203a)}
+.tf-buttons{flex-wrap:wrap}
+.tf-btn{
+  border:1px solid var(--line);background:var(--chip);color:var(--text);border-radius:999px;
+  padding:8px 12px;cursor:pointer;font-size:13px
+}
+.tf-btn.active{background:linear-gradient(180deg, #214fd0, #1f8bd1);border-color:transparent}
+.mini-stat{
+  background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
+  display:flex;flex-direction:column;gap:4px
+}
+.mini-stat span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
+.mini-stat strong{font-size:14px;font-family:var(--mono);font-weight:600;overflow:hidden;text-overflow:ellipsis}
+.grid{
+  display:grid;
+  grid-template-columns:repeat(2, minmax(0, 1fr));
+  gap:16px;
+}
+.panel{padding:16px;min-width:0}
+.chart-panel,.price-panel,.code-panel{grid-column:1 / -1}
+.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
+.panel-head h2{margin:0;font-size:20px}
+.panel-note{color:var(--muted);font-size:12px;max-width:65ch;text-align:right}
+canvas{
+  width:100%;
+  display:block;
+  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), #09101e;
+  border:1px solid var(--line);
+  border-radius:16px
+}
+.signal-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
+.signal-chip{
+  padding:9px 12px;border:1px solid var(--line);background:var(--chip);border-radius:999px;
+  font-size:13px;font-family:var(--mono)
+}
+.status-grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
+  gap:10px;
+}
+.status-card{
+  background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
+  display:flex;flex-direction:column;gap:6px;min-height:74px
+}
+.status-card .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
+.status-card .v{font-family:var(--mono);font-size:14px;word-break:break-word}
+.status-card.good .v{color:var(--good)}
+.status-card.warn .v{color:var(--warn)}
+.status-card.bad .v{color:var(--bad)}
+.json-box{
+  margin:0;padding:14px;background:var(--code-bg);border-radius:16px;border:1px solid var(--line);
+  overflow:auto;max-height:420px;font-family:var(--mono);font-size:12px;line-height:1.5
+}
+.debug-trace details{
+  border:1px solid var(--line);border-radius:14px;background:var(--card2);margin-bottom:10px;overflow:hidden
+}
+.debug-trace summary{
+  cursor:pointer;padding:12px 14px;font-family:var(--mono);font-size:13px;background:rgba(255,255,255,.02)
+}
+.debug-trace pre{
+  margin:0;padding:12px 14px;overflow:auto;max-height:260px;background:var(--code-bg);font-size:12px
+}
+.timeline{
+  display:grid;gap:10px
+}
+.signal-row{
+  display:grid;grid-template-columns:150px 1fr 1fr 1fr 120px 130px;gap:8px;align-items:center;
+  background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
+  font-family:var(--mono);font-size:12px
+}
+.signal-row.head{background:#10182c;font-weight:700;text-transform:uppercase;font-size:11px;color:var(--muted)}
+.signal-row .active{color:var(--good)}
+.signal-row .stale{color:var(--warn)}
+.signal-row .expired{color:var(--bad)}
+.log-list{
+  display:grid;gap:8px;max-height:320px;overflow:auto
+}
+.log-item{
+  background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-family:var(--mono);
+  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center
+}
+.log-item .meta{color:var(--muted);font-size:12px}
+.log-item .reason{color:var(--accent);font-size:12px;grid-column:1 / -1}
+.code-toolbar{
+  display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap
+}
+.code-toolbar input{max-width:320px}
+.code-meta{color:var(--muted);font-size:12px}
+.source-viewer{
+  max-height:820px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--code-bg);
+  font-family:var(--mono);font-size:12px;line-height:1.55
+}
+.code-line{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:0 12px}
+.code-line:nth-child(odd){background:rgba(255,255,255,.015)}
+.code-line .ln{color:#5d6a8f;user-select:none;text-align:right;padding-right:6px;border-right:1px solid rgba(255,255,255,.04)}
+.code-line .code{white-space:pre-wrap;word-break:break-word}
+.code-line.match{background:rgba(141,213,255,.14)}
+.code-line.hidden{display:none}
+.hl{font-family:var(--mono)}
+@media (max-width: 1200px){
+  .toolbar-row,.toolbar-row.compact,.grid{grid-template-columns:1fr}
+  .panel-head{flex-direction:column}
+  .panel-note{text-align:left}
+  .signal-row{grid-template-columns:1fr 1fr}
+}