{% extends "base.html" %}
{% set active = "index" %}
{% block head %}
<style>
html { scroll-behavior: smooth; }
.hero-glow {
  position: absolute; inset: 0;
  opacity: 0.20;
  background: radial-gradient(circle at top right, #a855f7, transparent 40%);
  pointer-events: none;
}
.terminal {
  background: #050505;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #222;
}
.terminal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  background: #090909;
  border-bottom: 1px solid #222;
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #27272a;
}
.terminal-dots span:nth-child(1) { background: #ef4444; }
.terminal-dots span:nth-child(2) { background: #eab308; }
.terminal-dots span:nth-child(3) { background: #22c55e; }
.terminal-body {
  height: 340px; overflow-y: auto;
  padding: 8px 0;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
}
.terminal-body::-webkit-scrollbar { width: 4px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.terminal-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  letter-spacing: .05em;
  animation: pulse-dot 2s ease-in-out infinite;
}
.log-entry { padding: 8px 20px; border-left: 3px solid transparent; }
.log-entry.stage { border-color: #8b5cf6; }
.log-entry.prompt { border-color: #a855f7; }
.log-entry.response { border-color: #22c55e; }
.log-entry.test { border-color: #4ade80; }
.log-entry.error-log { border-color: #ef4444; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.card-link { transition: all .2s; }
.card-link:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(168,85,247,.12); }
</style>
{% endblock %}
{% block content %}
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 p-8 mb-8">
  <div class="hero-glow"></div>
  <div class="relative">
    <div class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs bg-violet-500/10 text-violet-300 mb-4">
      ⚡ Tool Maker
    </div>
    <h1 class="text-3xl font-bold text-white mb-2">Dashboard</h1>
    <p class="text-zinc-400 mb-6 max-w-xl">
      Create, test, and refine AI-generated tools through an automated pipeline.
    </p>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
  <a href="/pipeline" class="card-link block bg-white/[0.03] border border-white/10 rounded-2xl p-6 hover:bg-white/[0.06]">
    <div class="text-2xl mb-3">🧠</div>
    <h3 class="text-base font-semibold text-white mb-1">Pipeline</h3>
    <p class="text-sm text-zinc-400">Full tool-making pipeline: analyse → plan → implement → test → review.</p>
  </a>
  <a href="/analyze" class="card-link block bg-white/[0.03] border border-white/10 rounded-2xl p-6 hover:bg-white/[0.06]">
    <div class="text-2xl mb-3">🔍</div>
    <h3 class="text-base font-semibold text-white mb-1">Analyze</h3>
    <p class="text-sm text-zinc-400">Scan a Python project to discover modules, functions, and dependencies.</p>
  </a>
  <a href="/execute" class="card-link block bg-white/[0.03] border border-white/10 rounded-2xl p-6 hover:bg-white/[0.06]">
    <div class="text-2xl mb-3">⚡</div>
    <h3 class="text-base font-semibold text-white mb-1">Execute</h3>
    <p class="text-sm text-zinc-400">Run saved tools in the isolated sandbox and inspect the output.</p>
  </a>
  <a href="/provider" class="card-link block bg-white/[0.03] border border-white/10 rounded-2xl p-6 hover:bg-white/[0.06]">
    <div class="text-2xl mb-3">🤖</div>
    <h3 class="text-base font-semibold text-white mb-1">Provider</h3>
    <p class="text-sm text-zinc-400">Test your LLM provider configuration with custom prompts.</p>
  </a>
</div>

<div class="terminal">
  <div class="terminal-header">
    <div class="flex items-center gap-3">
      <div class="terminal-dots"><span></span><span></span><span></span></div>
      <span class="text-sm text-zinc-400 font-medium">Live Logs</span>
    </div>
    <div class="flex items-center gap-3">
      <span class="terminal-badge">LIVE</span>
    </div>
  </div>
  <div class="terminal-body" id="log-viewer"></div>
</div>

<script>
(function() {
  const viewer = document.getElementById("log-viewer");
  if (!viewer) return;
  const evt = new EventSource("/api/logs/stream");
  evt.onmessage = function(e) {
    if (e.data === "heartbeat") return;
    const rec = JSON.parse(e.data);
    const div = document.createElement("div");
    let extra = '';
    if (rec.message.includes('LLM REQUEST')) extra = 'prompt';
    else if (rec.message.includes('LLM RESPONSE')) extra = 'response';
    else if (rec.message.includes('TEST')) extra = 'test';
    else if (rec.level === 'ERROR') extra = 'error-log';
    div.className = 'log-entry ' + extra;
    div.innerHTML = [
      '<span style="color:#52525b;margin-right:8px">' + rec.time.slice(11, 19) + '</span>',
      '<span style="font-weight:600;margin-right:8px;padding:1px 4px;border-radius:3px;font-size:10px;color:' + (rec.level === 'ERROR' ? '#f87171' : rec.level === 'WARNING' ? '#fbbf24' : '#a78bfa') + '">' + rec.level + '</span>',
      '<span style="color:#e4e4e7">' + escapeHtml(rec.message) + '</span>'
    ].join("");
    viewer.appendChild(div);
    viewer.scrollTop = viewer.scrollHeight;
  };
  function escapeHtml(s) {
    const d = document.createElement("div");
    d.textContent = s;
    return d.innerHTML;
  }
})();
</script>
{% endblock %}