evOo-local/evoo-platform/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>evOo Mission Control | Executive Operations Cockpit</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
  <div class="background-mesh"></div>

  <!-- Executive Pulse Strip (Header) -->
  <header class="executive-header">
    <div class="header-left">
      <div class="brand">
        <span class="brand-name">ev<span class="brand-highlight">Oo</span></span>
        <span class="version-tag">v2.0-EXEC</span>
      </div>
      <div class="pulse-pill" id="system-health-pill">
        <span class="pulse-indicator online"></span>
        <span class="pill-label">System:</span>
        <span class="pill-value" id="system-health-val">HEALTHY (Port 3088)</span>
      </div>
    </div>

    <div class="header-center">
      <div class="topology-pill" title="Hardware-Cluster & Lokale Modelle">
        <span class="pill-icon">🖥️</span>
        <span class="pill-label">Cluster:</span>
        <span class="pill-value" id="cluster-summary-val">Host (Metal GPU 30B) · Mini · Air</span>
      </div>
      <div class="trading-pill" title="Trading-Bot & Apex Risk Subsystem">
        <span class="pill-icon">📈</span>
        <span class="pill-label">Trading:</span>
        <span class="pill-value" id="trading-summary-val">ARMED (Max DD 0.21% / 1.5%)</span>
      </div>
    </div>

    <div class="header-right">
      <button id="btn-self-improve" class="btn btn-secondary" title="Führt den vollständigen Verifizierungs- & Test-Loop aus">
        <span class="btn-icon">⚡</span>
        <span>Selbstoptimierung</span>
      </button>
      <button id="btn-killswitch" class="btn btn-warning" title="Notfall-Stopp aller autonomen Trading-Aktionen">
        <span class="btn-icon">🛡️</span>
        <span id="killswitch-text">Risk Guard: Aktiv</span>
      </button>
      <button id="btn-hot-reload" class="btn btn-primary" title="Server-Synchronisation und Hot-Reload">
        <span class="btn-icon">↺</span>
        <span>Hot-Reload</span>
      </button>
    </div>
  </header>

  <!-- Main Cockpit Grid -->
  <main class="cockpit-container">
    <div class="cockpit-main-layout">
      
      <!-- ZONE 1: Executive Action & Overnight Journal (Left Column, ~58%) -->
      <div class="column-executive">
        
        <!-- PENDING APPROVALS CARD -->
        <section class="card card-approvals">
          <div class="card-header">
            <div class="header-title-group">
              <span class="section-tag">EXECUTIVE INBOX</span>
              <h2>Offene Entscheidungen &amp; Freigaben</h2>
            </div>
            <span class="badge badge-amber" id="approvals-badge">2 Ausstehend</span>
          </div>
          <div class="approvals-list" id="approvals-container">
            <!-- Rendered dynamically by app.js -->
          </div>
        </section>

        <!-- WAS GESCHAH IN DEN LETZTEN 24h? (Overnight Briefing) -->
        <section class="card card-journal">
          <div class="card-header">
            <div class="header-title-group">
              <span class="section-tag">OVERNIGHT BRIEFING</span>
              <h2>Operations Journal (Letzte 24h)</h2>
            </div>
            <span class="badge badge-emerald" id="journal-badge">100% Physisch</span>
          </div>
          <div class="journal-timeline" id="journal-container">
            <!-- Rendered dynamically by app.js -->
          </div>
        </section>

      </div>

      <!-- ZONE 2: Executive Board & Casted Agent Network (Right Column, ~42%) -->
      <div class="column-agents">
        
        <!-- CTO DIRECTIVE CARD -->
        <section class="card card-cto">
          <div class="card-header">
            <div class="header-title-group">
              <span class="section-tag">EXECUTIVE COMMAND</span>
              <h2>CTO Steve Jobs</h2>
            </div>
            <span class="badge badge-purple">Vollmacht: Unbeschränkt</span>
          </div>
          <div class="cto-body">
            <div class="cto-profile">
              <div class="cto-avatar">SJ</div>
              <div class="cto-details">
                <span class="cto-name">Steve Jobs</span>
                <span class="cto-role">Chief Technology Officer · Modus: Action-First</span>
              </div>
            </div>
            <div class="cto-quote-box">
              <p class="cto-quote">
                „Realität im Dateisystem vor Halluzination im Kopf. Das 3-Säulen-System steht. Alle 5 Spezialisten arbeiten mit deterministischen Schnittstellen und echten Tests.“
              </p>
            </div>
            <div class="cto-actions">
              <button id="btn-open-steve-chat" class="btn-inline btn-purple">
                <span>💬 Chat mit Steve öffnen</span>
              </button>
              <div class="authority-pills">
                <span class="auth-pill">✓ Filesystem Write</span>
                <span class="auth-pill">✓ Multi-Node Orchestration</span>
              </div>
            </div>
          </div>
        </section>

        <!-- OPERATIONS BOARD (5 CASTED AGENTS) -->
        <section class="card card-operations-board">
          <div class="card-header">
            <div class="header-title-group">
              <span class="section-tag">OPERATIONS BOARD</span>
              <h2>Agenten-Flotte</h2>
            </div>
            <span class="badge badge-cyan" id="agent-count">5 Casts aktiv</span>
          </div>
          <p class="operations-hint">Klicke auf einen Spezialisten, um sofort ein physisches System-Audit auszulösen:</p>
          
          <div class="agent-roster">
            <!-- 1. Code Architect -->
            <div class="roster-item interactive-agent" data-agent="architect" title="Klicken für Architecture- & Modul-Audit">
              <div class="agent-avatar architect">CA</div>
              <div class="agent-meta">
                <span class="agent-name">Code Architect</span>
                <span class="agent-role">Moduldesign &amp; Clean Architecture</span>
                <span class="agent-node">Node: Mac mini (Strategic Reasoning)</span>
              </div>
              <div class="agent-status">
                <span class="status-dot green" id="dot-architect"></span>
              </div>
            </div>

            <!-- 2. Security & QA Auditor -->
            <div class="roster-item interactive-agent" data-agent="qa" title="Klicken für Zero-Phantom- & Test-Audit">
              <div class="agent-avatar security">QA</div>
              <div class="agent-meta">
                <span class="agent-name">Security &amp; QA Auditor</span>
                <span class="agent-role">Integritätsprüfung &amp; Zero-Phantom</span>
                <span class="agent-node">Node: MacBook Air (Fast Coding)</span>
              </div>
              <div class="agent-status">
                <span class="status-dot green" id="dot-qa"></span>
              </div>
            </div>

            <!-- 3. DevOps Engineer -->
            <div class="roster-item interactive-agent" data-agent="devops" title="Klicken für Liveness- & Port-Audit">
              <div class="agent-avatar devops">DO</div>
              <div class="agent-meta">
                <span class="agent-name">DevOps Engineer</span>
                <span class="agent-role">Hot-Reload &amp; Service Liveness</span>
                <span class="agent-node">Node: Host Mac (Daemons &amp; Ports)</span>
              </div>
              <div class="agent-status">
                <span class="status-dot green" id="dot-devops"></span>
              </div>
            </div>

            <!-- 4. Apex Quant Specialist -->
            <div class="roster-item interactive-agent" data-agent="quant" title="Klicken für Apex Risk &amp; Trading-Bot-Bridge Audit">
              <div class="agent-avatar quant">AP</div>
              <div class="agent-meta">
                <span class="agent-name">Apex Quant Specialist</span>
                <span class="agent-role">Algorithmic Risk &amp; Port 8000 Bridge</span>
                <span class="agent-node">Node: Host Mac (Deterministic Math)</span>
              </div>
              <div class="agent-status">
                <span class="status-dot purple" id="dot-quant"></span>
              </div>
            </div>

            <!-- 5. UX Designer -->
            <div class="roster-item interactive-agent" data-agent="ux" title="Klicken für UI/UX &amp; Design-System-Audit">
              <div class="agent-avatar ux">UX</div>
              <div class="agent-meta">
                <span class="agent-name">UX Designer</span>
                <span class="agent-role">Lead Product &amp; UX/UI Designer</span>
                <span class="agent-node">Node: MacBook Air / Host (3-Pillar UI)</span>
              </div>
              <div class="agent-status">
                <span class="status-dot orange" id="dot-ux"></span>
              </div>
            </div>
          </div>
        </section>

      </div>
    </div>

    <!-- ZONE 3 & 4: Distributed Cluster, Apex Trading & Telemetry Console (Bottom Full Width) -->
    <div class="cockpit-bottom-layout">
      
      <!-- CLUSTER TOPOLOGY CARD -->
      <section class="card card-cluster">
        <div class="card-header">
          <div class="header-title-group">
            <span class="section-tag">COMPUTE TOPOLOGY</span>
            <h2>Distributed Mac Cluster</h2>
          </div>
          <span class="badge badge-emerald" id="cluster-badge">Metal GPU Aktiv</span>
        </div>
        <div class="cluster-grid">
          <div class="cluster-node online">
            <div class="node-header">
              <span class="node-status-dot"></span>
              <span class="node-name">Host Mac (Primär)</span>
              <span class="node-type">Metal GPU</span>
            </div>
            <div class="node-details">
              <div class="detail-row"><span>LM Studio:</span><span class="code-val">qwen3-coder-30b-a3b (Metal)</span></div>
              <div class="detail-row"><span>Ollama:</span><span class="code-val">gemma4:latest (Port 11434)</span></div>
              <div class="detail-row"><span>Zustand:</span><span class="success-val">Aktiv · Keine Drosselung</span></div>
            </div>
          </div>

          <div class="cluster-node standby">
            <div class="node-header">
              <span class="node-status-dot amber"></span>
              <span class="node-name">Mac mini</span>
              <span class="node-type">24/7 Powerhouse</span>
            </div>
            <div class="node-details">
              <div class="detail-row"><span>Profil:</span><span>Aktiv gekühlt (Lüfter)</span></div>
              <div class="detail-row"><span>Empfohlen:</span><span class="code-val">qwen2.5:32b / deepseek-r1</span></div>
              <div class="detail-row"><span>Routing:</span><span class="text-dim">Failover zu Host Metal GPU</span></div>
            </div>
          </div>

          <div class="cluster-node standby">
            <div class="node-header">
              <span class="node-status-dot amber"></span>
              <span class="node-name">MacBook Air</span>
              <span class="node-type">Mobile Worker</span>
            </div>
            <div class="node-details">
              <div class="detail-row"><span>Profil:</span><span>Lüfterlos (Thermisch geschützt)</span></div>
              <div class="detail-row"><span>Empfohlen:</span><span class="code-val">qwen2.5-coder:7b / 3b</span></div>
              <div class="detail-row"><span>Routing:</span><span class="text-dim">Failover zu Host Metal GPU</span></div>
            </div>
          </div>
        </div>
      </section>

      <!-- APEX QUANT TRADING ENGINE SUBSYSTEM -->
      <section class="card card-apex">
        <div class="card-header">
          <div class="header-title-group">
            <span class="section-tag">SUBSYSTEM APEX</span>
            <h2>Apex Quantitative Trading Engine</h2>
          </div>
          <div class="header-action-cluster">
            <div class="mode-segmented-control" role="tablist">
              <button type="button" id="tab-mode-paper" class="segment-btn active" data-mode="paper" title="Simulierter Test-Modus mit $1,000 Paper Equity">
                <span class="segment-dot paper-dot"></span>
                <span>Paper-Modus</span>
              </button>
              <button type="button" id="tab-mode-live" class="segment-btn" data-mode="live" title="Echtgeld-Modus: Polymarket Deposit Wallet, Bitpanda & Fiat-Reserven">
                <span class="segment-dot live-dot"></span>
                <span>🟢 Live-Echtgeld</span>
              </button>
            </div>
            <span class="badge badge-cyan" id="trading-badge">REST API: Port 8001</span>
          </div>
        </div>
        <div class="trading-metrics-grid">
          <div class="tmetric-card">
            <span class="tmetric-label" id="card1-label">Equity &amp; Portfolio</span>
            <span class="tmetric-val positive" id="card1-val">$1,000.00</span>
            <span class="tmetric-sub" id="card1-sub">€921.66 · Paper Trading (Safe)</span>
          </div>
          <div class="tmetric-card">
            <span class="tmetric-label" id="card2-label">Max Drawdown</span>
            <span class="tmetric-val" id="card2-val">0.00%</span>
            <span class="tmetric-sub" id="card2-sub">Cap: 1.50% (Hard Stop)</span>
          </div>
          <div class="tmetric-card">
            <span class="tmetric-label" id="card3-label">Aktives Markt-Regime</span>
            <span class="tmetric-val cyan-text" id="card3-val">Donchian / ADX</span>
            <span class="tmetric-sub" id="card3-sub">Trend-Following + Mean-Reversion</span>
          </div>
          <div class="tmetric-card">
            <span class="tmetric-label" id="card4-label">Circuit Breaker Status</span>
            <span class="tmetric-val success-val" id="card4-val">ARMED</span>
            <span class="tmetric-sub" id="card4-sub">Fixed Fractional (1-2%)</span>
          </div>
        </div>
      </section>

      <!-- LIVE TELEMETRY & LOG CONSOLE (COLLAPSIBLE) -->
      <section class="card card-console">
        <div class="card-header">
          <div class="header-title-group">
            <span class="section-tag">LIVE TELEMETRY STREAM</span>
            <h2>Self-Improvement &amp; System Event Log</h2>
          </div>
          <div class="console-actions">
            <button id="btn-toggle-console" class="btn-text">Minimieren</button>
            <button id="btn-clear-console" class="btn-text">Leeren</button>
          </div>
        </div>
        <div class="terminal-container" id="terminal-logs">
          <div class="log-line info">[SYSTEM] evOo Executive Cockpit initialized. Version 2.0.0.</div>
          <div class="log-line success">[CLUSTER] Host Metal GPU (30B Qwen) aktiv. Port 1234 bereit.</div>
          <div class="log-line success">[VERIFY] 3-Säulen-Navigation (Heute/Team/Projekte) in Chat-App verankert.</div>
          <div class="log-line success">[OPERATIONS] 5 Casted Agents (Architect, QA, DevOps, Quant, UX) aktiv.</div>
        </div>
      </section>

    </div>
  </main>

  <footer class="app-footer">
    <div class="footer-left">
      <span>evOo Autonomous Platform &bull; Physical Reality Guaranteed &bull; Executive Command Center</span>
    </div>
    <div class="footer-right">
      <span id="timestamp-clock">--:--:-- UTC</span>
    </div>
  </footer>

  <script src="app.js"></script>
</body>
</html>