function MirrorView() {
  // Live real-money fund (paper replica retired 2026-06-18). Reads the static
  // live_portfolio.json that Alice publishes (live keys never touch Vercel/this
  // Mac). Metrics are deposit-aware (patch_live_deposits.py): return is on TOTAL
  // contributed capital, and the SPY-instead invests each deposit on its day.
  const [lf, setLf] = useState(null);
  const [err, setErr] = useState(null);
  useEffect(() => {
    fetch(`data/live_portfolio.json?t=${Date.now()}`, { cache: "no-store" })
      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
      .then(setLf)
      .catch((e) => setErr(e.message));
  }, []);

  if (err) return <div style={{ padding: 40, fontFamily: "var(--mono)" }}>Failed to load Live fund: {err}</div>;
  if (!lf) return <div style={{ height: "60vh", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-3)", fontFamily: "var(--mono)" }}>Loading Live fund…</div>;

  const cur = lf.current || {};
  const m = lf.metrics || {};
  const positions = lf.positions || [];
  const orders = lf.orders || [];
  const deposits = m.deposits || [];
  const contributed = m.total_contributed ?? m.starting_capital ?? 94;
  const nav = cur.nav ?? contributed;
  const ret = m.return_since_inception ?? (contributed > 0 ? nav / contributed - 1 : 0);
  const spyInstead = m.spy_invested_value;
  const alpha = m.alpha_vs_spy_pp;
  const ready = cur && cur.nav != null && lf.status !== "awaiting_setup";
  const hist = [...(lf.history || [])].sort((a, b) => String(a.date).localeCompare(String(b.date)));
  // Deposit-adjusted performance curve. Raw NAV would plot capital deposits as
  // if they were gains (the +$999 funding on 06-17 made NAV jump $100 -> $1,092,
  // which rendered as +1056%). Instead plot cumulative P&L net of flows, anchored
  // at total contributed: value = total_contributed + (nav - contributed_to_date).
  // This nets out all 4 deposits so the curve shows performance, not funding, and
  // start->end equals the official return on contributed capital (~-0.81%).
  const deps = [...(m.deposits || [])].sort((a, b) => String(a.date).localeCompare(String(b.date)));
  const contributedToDate = (date) =>
    deps.reduce((s, d) => (String(d.date) <= String(date) ? s + (d.amount || 0) : s), 0) || contributed;
  const perfPoints = hist.map((h) => ({
    date: h.date,
    value: contributed + (h.nav - contributedToDate(h.date)),
    benchmark: null,
  }));

  if (!ready) {
    return (
      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <h1 className="h-display">The <em style={{ color: "var(--accent)" }}>live</em> fund.</h1>
          <p className="lead" style={{ marginTop: 16 }}>Runs on a separate machine — real-money keys never touch this site. Data appears once it publishes its first snapshot.</p>
        </div>
      </section>
    );
  }

  return (
    <div>
      <section style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="container">
          <div style={{ marginBottom: 22 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Real money · forward-only · weight-matched</div>
            <h1 className="h-display" style={{ textWrap: "balance" }}>
              The <em style={{ fontStyle: "italic", color: "var(--accent)" }}>live</em> fund.
            </h1>
            <p className="lead" style={{ marginTop: 16 }}>
              A <strong>real-money</strong> account that mirrors the LLM fund in real time, scaled to its own capital — each LLM
              trade replicated as the <em>same % of NAV</em> it was for the LLM fund. It copies trades <strong>forward from its
              own start</strong> (no back-fill), runs <strong>no debates or discipline of its own</strong>, and mirrors
              <strong> only the LLM fund</strong>. Returns are measured against <strong>total deposited capital</strong>, and the
              S&amp;P benchmark invests each deposit on the day it landed.
            </p>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden",
            background: "var(--bg-card)", marginTop: 24,
          }}>
            <HeroStat label="Net asset value" value={fmtUSD(nav, { decimals: 2 })} sub={`from ${fmtUSD(contributed, { decimals: 0 })} contributed`} />
            <HeroStat label="Return on contributed" value={<span className={ret >= 0 ? "pos" : "neg"}>{ret >= 0 ? "+" : ""}{(ret * 100).toFixed(2)}%</span>} sub={`${deposits.length} deposit${deposits.length === 1 ? "" : "s"} totalling ${fmtUSD(contributed, { decimals: 0 })}`} />
            <HeroStat label="Cash" value={fmtUSD(cur.cash ?? 0, { decimals: 2 })} sub={`deployed ${(((cur.deployed_pct ?? 0)) * 100).toFixed(0)}%`} />
            <HeroStat label="Positions" value={`${positions.length}`} sub="held names" />
            {spyInstead != null && (
              <HeroStat
                label="Same deposits in S&P 500"
                value={fmtUSD(spyInstead, { decimals: 2 })}
                sub={alpha != null ? `alpha ${alpha >= 0 ? "+" : ""}${alpha.toFixed(2)}pp (each deposit bought SPY on its day)` : "deposit-weighted"}
              />
            )}
            {m.cash_drag_pnl != null && (
              <HeroStat
                label="Cost of cash discipline"
                value={<span className={m.cash_drag_pnl >= 0 ? "pos" : "neg"}>{m.cash_drag_pnl >= 0 ? "+" : ""}{fmtUSD(m.cash_drag_pnl, { decimals: 2 })}</span>}
                sub="NAV vs same deposits in SPY"
              />
            )}
            {m.realized_pnl != null && (
              <HeroStat
                label="Realized P&L"
                value={<span className={m.realized_pnl >= 0 ? "pos" : "neg"}>{m.realized_pnl >= 0 ? "+" : ""}{fmtUSD(m.realized_pnl, { decimals: 2 })}</span>}
                sub={m.tax_owed_now != null ? `Tax owed ${fmtUSD(m.tax_owed_now, { decimals: 2 })} (40% on realized gains)` : "FIFO over filled lots"}
              />
            )}
            {m.after_tax_alpha_now_pp != null && (
              <HeroStat
                label="Alpha after tax"
                value={<span className={m.after_tax_alpha_now_pp >= 0 ? "pos" : "neg"}>{m.after_tax_alpha_now_pp >= 0 ? "+" : ""}{m.after_tax_alpha_now_pp.toFixed(2)}pp</span>}
                sub="vs same deposits in SPY, after tax"
              />
            )}
          </div>
          {cur.as_of && <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 10 }}>updated {String(cur.as_of).slice(0, 16).replace("T", " ")}</div>}
        </div>
      </section>

      {m.sharpe_ratio != null || m.total_trades != null ? <MetricsStrip metrics={m} /> : null}

      <section style={{ paddingTop: 0, paddingBottom: 24 }}>
        <div className="container">
          <div className="card" style={{ padding: "20px 24px", maxWidth: 560 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Holdings <span style={{ color: "var(--accent)" }}>(real money)</span></div>
            {positions.length === 0 ? (
              <div style={{ color: "var(--ink-3)", fontSize: 13, fontFamily: "var(--mono)" }}>none yet</div>
            ) : (
              <div style={{ fontFamily: "var(--mono)", fontSize: 13 }}>
                {positions.map((pp) => {
                  const pnl = (pp.unrealized_plpc ?? pp.unrealized_pnl_pct ?? 0) * 100;
                  return (
                    <div key={pp.ticker} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid var(--line)" }}>
                      <span>{pp.ticker}</span>
                      <span>{fmtUSD(pp.market_value ?? 0, { decimals: 2 })} <span className={pnl >= 0 ? "pos" : "neg"}>{pnl >= 0 ? "+" : ""}{pnl.toFixed(1)}%</span></span>
                    </div>
                  );
                })}
              </div>
            )}
            <div className="eyebrow" style={{ margin: "18px 0 6px" }}>Pending orders</div>
            {(!orders || orders.length === 0) ? (
              <div style={{ color: "var(--ink-3)", fontSize: 13, fontFamily: "var(--mono)" }}>none</div>
            ) : (
              <div style={{ fontFamily: "var(--mono)", fontSize: 13 }}>
                {orders.map((o, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", color: "var(--ink-2)" }}>
                    <span>{(o.side || "").toUpperCase()} {o.ticker || o.symbol}</span>
                    <span>{o.notional ? fmtUSD(o.notional, { decimals: 0 }) : (o.qty ?? "")}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

      {perfPoints.length >= 2 && (
        <section style={{ paddingTop: 10, paddingBottom: 40 }}>
          <div className="container">
            <div style={{ marginBottom: 14 }}>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Performance</div>
              <h2 className="h-section">NAV</h2>
            </div>
            <div className="card" style={{ padding: "28px 32px" }}>
              {/* noFetch: the live (real-money) fund's history is NOT behind /api/history
                  (its keys live on Alice, never on Vercel). Without noFetch the chart
                  fetched /api/history?fund=live, which falls back to the LLM book and
                  clobbered perfPoints with the $58K paper series — then liveValue ($1,094)
                  overrode only the last point, producing the -98% cliff. Use the live
                  fund's own perfPoints from live_portfolio.json. */}
              <PerformanceChart points={perfPoints} showBenchmark={false} fund="live" liveValue={nav} noFetch />
            </div>
          </div>
        </section>
      )}

      <section style={{ paddingTop: 0, paddingBottom: 40 }}>
        <div className="container">
          <div style={{ marginBottom: 14 }}>
            <div className="eyebrow" style={{ marginBottom: 6 }}>Tracking</div>
            <h2 className="h-section">Live vs LLM fund</h2>
          </div>
          <div className="card" style={{ padding: "28px 32px" }}>
            <LiveTracking />
          </div>
        </div>
      </section>
    </div>
  );
}