static/deck.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEED-SIM · The Deck</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/deck.css">
    <link rel="stylesheet" href="/static/agent-widget.css">
</head>
<body>
    <header class="deck-header">
        <div class="logo"><span class="icon">⬡</span><h1>THE DECK <span class="subtitle">Regulation · Current View of Everything</span></h1></div>
        <div class="controls">
            <span id="kos-chip" class="chip-status">Observer Bus: …</span>
            <a href="/play" class="action-btn">Play</a>
            <a href="/lab" class="action-btn">Lab</a>
            <a href="/agent" class="action-btn">⌬ Agent</a>
            <a href="/" class="action-btn">⌂</a>
            <button id="btn-refresh" class="action-btn">Refresh</button>
        </div>
    </header>

    <main class="deck-main">
        <!-- Top gauges -->
        <section class="gauges" id="gauges"></section>

        <div class="deck-cols">
            <!-- Left: mode portals + selection tray -->
            <div class="col">
                <div class="panel portals">
                    <a class="portal" href="/play" id="portal-play">
                        <div class="portal-title">▶ Play Mode</div>
                        <div class="portal-sub" id="play-sub">grow · breed · clone</div>
                    </a>
                    <a class="portal" href="/lab" id="portal-lab">
                        <div class="portal-title">⚗ Speciation Lab</div>
                        <div class="portal-sub" id="lab-sub">analytics · pedigree · prediction</div>
                    </a>
                </div>
                <div class="panel">
                    <div class="panel-header"><h2>Selection Tray <span class="hint">shared across modes</span></h2></div>
                    <div class="panel-content" id="tray">
                        <div class="empty-note">No specimens selected. Pick in Play or Lab; they ride along here.</div>
                    </div>
                    <div class="tray-actions">
                        <button id="btn-to-play" class="action-btn">Send to Breeding →</button>
                        <button id="btn-to-lab" class="action-btn">Open in Lab →</button>
                        <button id="btn-clear-sel" class="mini-btn">clear</button>
                    </div>
                </div>
            </div>

            <!-- Middle: breakdowns + gamut -->
            <div class="col">
                <div class="panel">
                    <div class="panel-header"><h2>Population Breakdown</h2></div>
                    <div class="panel-content" id="breakdowns"></div>
                </div>
                <div class="panel">
                    <div class="panel-header"><h2>Phenotype Gamut</h2></div>
                    <div class="panel-content" id="gamut"></div>
                </div>
            </div>

            <!-- Right: recent crosses + signals -->
            <div class="col">
                <div class="panel">
                    <div class="panel-header"><h2>Recent Crosses</h2></div>
                    <div class="panel-content" id="recent"></div>
                </div>
                <div class="panel">
                    <div class="panel-header"><h2>Observer Bus · Signals</h2></div>
                    <div class="panel-content" id="signals"></div>
                </div>
            </div>
        </div>
    </main>
    <script src="/static/session.js"></script>
    <script src="/static/deck.js"></script>
    <script src="/static/agent-widget.js"></script>
</body>
</html>