"""HTML fragments in the Bit design language.
Gradio gives us controls; the design needs panels, chips, stat bands and
micro-labels that Gradio has no equivalent for. Those live here as small pure
functions returning markup, so `app.py` stays layout and wiring only.
Every fragment uses design-system tokens (`var(--...)`) rather than raw colour,
so a theme change in `assets/tokens/colors.css` propagates without edits here.
"""
from __future__ import annotations
import pandas as pd
from .. import config
from .format import EM, arrow, count, esc, money, num, pct, seg, sharpe_tone, tone
# The actual mark shipped with the design (uploads/bit-trading-mark.svg),
# inlined so it can be recoloured through a token rather than loaded as a
# fixed-colour file. Previously this was a CSS box-shadow approximation --
# a guess at a logo that was sitting in the design folder the whole time.
MARK_SVG = (
''
)
# --------------------------------------------------------------------------
# Primitives
# --------------------------------------------------------------------------
def micro(text: str, color: str = "var(--text-tertiary)") -> str:
return f'
Configure a strategy on the left, or start from a worked example and edit it.
{kbd("RUN BACKTEST")}{kbd("COSTS DEFAULT ON")}{kbd("FILLS AT NEXT BAR OPEN")}
"""
STAGE_LABELS = ("Reading cached slices", "Simulating trades",
"Walking forward", "Computing robustness")
def loading_stages(active: int = 0) -> str:
rows = []
for i, label in enumerate(STAGE_LABELS):
mark = "✓" if i < active else ("▸" if i == active else "·")
color = ("var(--accent-moss-strong)" if i < active else
"var(--text-primary)" if i == active else "var(--text-tertiary)")
rows.append(f'
{mark} {esc(label)}
')
return f'
{"".join(rows)}
'
# --------------------------------------------------------------------------
# Stat band
# --------------------------------------------------------------------------
def stat_band(rec) -> str:
"""The design's stat band: big mono number, tiny label, IS/OOS underneath."""
if rec is None:
return ""
r = rec.result
a, i, o = r.metrics_all, r.metrics_is, r.metrics_oos
def isoos(fmt, key, *fargs):
return (f"IS {seg(i, fmt, getattr(i, key), *fargs)} · "
f"OOS {seg(o, fmt, getattr(o, key), *fargs)}")
bench = (float(r.benchmark_equity.iloc[-1] / r.benchmark_equity.iloc[0] - 1.0)
if len(r.benchmark_equity) else float("nan"))
gap = a.total_return - bench if pd.notna(bench) else float("nan")
cells = [
("Total return", f"{pct(a.total_return)}{arrow(a.total_return)}",
tone(a.total_return), isoos(pct, "total_return"),
"Cumulative return of the strategy equity curve, costs included."),
("CAGR", pct(a.cagr), tone(a.cagr), isoos(pct, "cagr"),
"Compound annual growth rate implied by the equity curve."),
("Sharpe", num(a.sharpe), tone(a.sharpe), isoos(num, "sharpe"),
"Annualized mean excess return over return volatility."),
("Sortino", num(a.sortino), tone(a.sortino), isoos(num, "sortino"),
"Sharpe with only downside deviation in the denominator."),
("Max drawdown", pct(a.max_drawdown), "bit-down",
isoos(pct, "max_drawdown"), "Worst peak-to-trough decline."),
("Win rate", pct(a.win_rate, 0, signed=False), "",
f"IS {seg(i, pct, i.win_rate, 0, False)} · OOS {seg(o, pct, o.win_rate, 0, False)}",
"Share of closed trades with positive net P&L."),
("Profit factor", num(a.profit_factor), tone(a.profit_factor - 1.0),
isoos(num, "profit_factor"), "Gross profit over gross loss."),
("Trades", count(a.trade_count), "",
f"IS {seg(i, count, i.trade_count)} · OOS {seg(o, count, o.trade_count)}",
"Closed round-trip trades."),
("Exposure", pct(a.exposure, 0, signed=False), "",
f"IS {seg(i, pct, i.exposure, 0, False)} · OOS {seg(o, pct, o.exposure, 0, False)}",
"Fraction of bars holding a position."),
("vs buy & hold", f"{pct(gap)}{arrow(gap)}", tone(gap),
f"costs paid {money(r.costs_paid)}",
"Strategy return minus buy-and-hold over the same window."),
]
html = ['
']
for label, value, cls, sub, tip in cells:
html.append(
f'
'
f'
{esc(label)}
'
f'
{value}
'
f'
{sub}
')
html.append("
")
for n in getattr(r.plan, "notes", []):
html.append(note(esc(n), danger=True))
if r.metrics_holdout is not None:
h = r.metrics_holdout
ok = h.total_return > 0
html.append(note(
f'LOCKED HOLDOUT · return {pct(h.total_return)} · '
f'Sharpe {num(h.sharpe)} · {h.bars} bars never used for any parameter '
f'choice.' + ("" if ok else " It loses money here."),
danger=not ok))
return "".join(html)
# --------------------------------------------------------------------------
# Run manager
# --------------------------------------------------------------------------
def run_card(rec, selected: bool = False) -> str:
s = rec.sharpe
color = sharpe_tone(s)
mark = "✓" if selected else ""
return (
f'
'
f'
'
f'{esc(rec.label[:36])}'
f'{mark}
'
f'
{esc(rec.meta)}
'
f'
'
f'SHARPE {num(s)}{pct(rec.result.metrics_all.total_return)}'
f'
')
def run_history(hist, selected_ids: set[str] | None = None) -> str:
if not hist:
return micro("no runs yet in this session")
sel = selected_ids or set()
head = micro(f"{len(hist)} run{'s' if len(hist) != 1 else ''} this session")
return head + "".join(run_card(r, r.run_id in sel) for r in hist[:14])
def glossary(items) -> str:
rows = "".join(
f'
{esc(t)}
'
f'
{esc(d)}
'
for t, d in items)
return f'
{rows}
'
# --------------------------------------------------------------------------
# Coverage
# --------------------------------------------------------------------------
def coverage_summary(cells) -> str:
if not cells:
return note("The signal store has no coverage yet.", danger=True)
models = sorted({c.model_slug for c in cells})
assets = sorted({c.asset for c in cells})
tfs = sorted({c.timeframe for c in cells})
rows = sum(c.rows for c in cells)
ph = sum(1 for c in cells if c.is_placeholder)
body = (
f'
')
# --------------------------------------------------------------------------
# Leaderboard & consensus (the global compare interface)
# --------------------------------------------------------------------------
def podium(df: pd.DataFrame, metric: str = "oos_sharpe") -> str:
"""Top three rows of the leaderboard, called out above the table."""
if df is None or df.empty:
return micro("no catalog rows yet")
top = df.head(3)
cards = []
for rank, (_, r) in enumerate(top.iterrows(), start=1):
val = r.get(metric)
model = r.get("model_display") or EM
cards.append(
f'
ret {pct(r.get("total_return"))} · '
f'dd {pct(r.get("max_drawdown"))} · {count(r.get("trades"))} trades
'
f'
')
return f'
{"".join(cards)}
'
def consensus_panel(consensus: pd.DataFrame, verdict: dict,
asset: str, timeframe: str) -> str:
"""Signal Aggregator: every model's latest call for one asset, plus a
calibration-weighted consensus.
Weight is how far a model's realised directional accuracy sits above a coin
flip on this exact slice, so a confident but historically wrong model does
not get to shout.
"""
if consensus is None or consensus.empty:
return note(f"No model signals cached for {esc(asset)} {esc(timeframe)}.")
rows = []
for _, r in consensus.iterrows():
d = r["direction"]
dcolor = ("var(--fin-up-strong)" if d == "LONG" else
"var(--fin-down-strong)" if d == "SHORT" else "var(--text-tertiary)")
glyph = "▲" if d == "LONG" else ("▼" if d == "SHORT" else "■")
tag = ' BASELINE' if r["is_baseline"] else ""
acc = r["directional_accuracy"]
rows.append(
f'
')
d = verdict["direction"]
vcolor = ("var(--fin-up-strong)" if d == "LONG" else
"var(--fin-down-strong)" if d == "SHORT" else "var(--text-secondary)")
glyph = "▲" if d == "LONG" else ("▼" if d == "SHORT" else "■")
conf = verdict["confidence"]
verdict_box = (
f'
'
+ micro("weight = realised directional accuracy above a coin flip, "
"on this asset and timeframe"),
meta=f"{len(consensus)} MODELS",
)
def scorecard_note(sc: pd.DataFrame) -> str:
"""One honest sentence about whether the models beat the baselines."""
if sc is None or sc.empty:
return ""
learned = sc[~sc["is_baseline"]] if "is_baseline" in sc.columns else sc
base = sc[sc["is_baseline"]] if "is_baseline" in sc.columns else pd.DataFrame()
if learned.empty or base.empty:
return ""
la = learned["directional_accuracy"].mean()
ba = base["directional_accuracy"].mean()
if pd.isna(la) or pd.isna(ba):
return ""
delta = la - ba
if delta > 0.01:
return note(f"Learned models call direction correctly "
f"{pct(la, 1, signed=False)} of the time against "
f"{pct(ba, 1, signed=False)} for naive baselines "
f"({pct(delta, 1)} better).")
return note(f"Learned models call direction correctly "
f"{pct(la, 1, signed=False)} of the time; naive baselines manage "
f"{pct(ba, 1, signed=False)}. The models are not beating the "
f"baselines on direction. Read the leaderboard with that in mind.",
danger=True)