<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blackbox</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            surface: { 950: '#0c1117', 900: '#111820', 800: '#1a2332', 700: '#243044' },
            accent: { 300: '#ffe066', 400: '#ffd43b', 500: '#fab005', 600: '#e6a000' },
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
          },
        }
      }
    }
  </script>
  <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    body { background: #0c1117; }
    .glow { box-shadow: 0 0 20px rgba(250, 176, 5, 0.15), 0 0 60px rgba(250, 176, 5, 0.05); }
    .glow-text { text-shadow: 0 0 30px rgba(255, 212, 59, 0.6), 0 0 60px rgba(250, 176, 5, 0.3); }
    .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #1a2332; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #243044; }
    #log-container { word-break: break-word; overflow-wrap: anywhere; }
    .log-line { white-space: pre-wrap; }
    #sidebar.collapsed { width: 3.5rem; }
    #sidebar.collapsed .sidebar-full { display: none; }
    #sidebar.collapsed .sidebar-collapsed { display: flex; }
  </style>
</head>
<body class="bg-surface-950 text-gray-200 min-h-screen font-sans antialiased">
  {% block content %}{% endblock %}
  <script>
  (function() {
    var sidebar = document.getElementById('sidebar');
    if (!sidebar) return;
    function collapse() {
      sidebar.classList.add('collapsed');
      localStorage.setItem('sidebar-collapsed', '1');
    }
    function expand() {
      sidebar.classList.remove('collapsed');
      localStorage.setItem('sidebar-collapsed', '0');
    }
    if (localStorage.getItem('sidebar-collapsed') === '1') collapse();
    document.addEventListener('click', function(e) {
      var btn = e.target.closest('#collapse-btn');
      if (btn) { collapse(); return; }
      btn = e.target.closest('#expand-btn');
      if (btn) { expand(); }
    });
  })();
  (function() {
    var es = null;
    var currentUrl = null;
    var follow = true;

    function connectSSE(url, container) {
      if (es) { es.close(); es = null; }
      currentUrl = url;
      follow = true;
      container.innerHTML = '';

      container.addEventListener('scroll', function() {
        follow = (container.scrollTop + container.clientHeight >= container.scrollHeight - 60);
      });

      es = new EventSource(url);
      es.addEventListener('log', function(e) {
        container.insertAdjacentHTML('beforeend', e.data);
        if (follow) container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
      });
      es.addEventListener('done', function(e) {
        container.insertAdjacentHTML('beforeend', e.data);
        es.close(); es = null;
      });
      es.onerror = function() { es.close(); es = null; };
    }

    new MutationObserver(function() {
      var el = document.getElementById('log-container');
      if (!el) return;
      var url = el.getAttribute('data-sse-url');
      if (url && url !== currentUrl) {
        connectSSE(url, el);
      }
    }).observe(document.getElementById('session-detail'), { childList: true });
  })();
  </script>
</body>
</html>
