<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ brain.name }} — oneiros</title>
<style>
:root {
  --bg: #0e0e10;
  --surface: #1a1a1f;
  --border: #2a2a32;
  --text: #c8c8d0;
  --text-dim: #6e6e7a;
  --accent: #8b7ec8;
  --accent-dim: #5c5480;
  --green: #5a9e6f;
  --orange: #c49a5a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', monospace;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 14px;
}
.container { max-width: 960px; margin: 0 auto; padding: 24px; }
header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
header h1 { font-size: 20px; font-weight: 600; color: var(--accent); }
header .status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--green);
  color: var(--bg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}
.stat .value { font-size: 28px; font-weight: 700; color: var(--accent); }
.stat .label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
section { margin-bottom: 32px; }
section h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.agent-list { display: flex; flex-direction: column; gap: 8px; }
.agent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
}
.agent .name { font-weight: 600; color: var(--accent); }
.agent .persona { color: var(--text-dim); font-size: 12px; }
.cognition-list { display: flex; flex-direction: column; gap: 4px; }
.cognition {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
}
.cognition .meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.cognition .texture { color: var(--orange); }
.cognition .content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#activity {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  min-height: 80px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--text-dim);
}
#activity:empty::before {
  content: 'listening...';
  font-style: italic;
}
.event-entry {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.event-entry:last-child { border-bottom: none; }
.event-type { color: var(--accent); font-weight: 600; }
.brain-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.brain-selector a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.brain-selector a.active,
.brain-selector a:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>{{ brain.name }}</h1>
    <span class="status">active</span>
  </header>

  {% if brains.len() > 1 %}
  <nav class="brain-selector">
    {% for b in brains %}
    <a href="/?brain={{ b.name }}"{% if b.name == brain.name %} class="active"{% endif %}>{{ b.name }}</a>
    {% endfor %}
  </nav>
  {% endif %}

  <div class="stats">
    <div class="stat"><div class="value">{{ agent_count }}</div><div class="label">Agents</div></div>
    <div class="stat"><div class="value">{{ cognition_count }}</div><div class="label">Cognitions</div></div>
    <div class="stat"><div class="value">{{ memory_count }}</div><div class="label">Memories</div></div>
    <div class="stat"><div class="value">{{ experience_count }}</div><div class="label">Experiences</div></div>
    <div class="stat"><div class="value">{{ connection_count }}</div><div class="label">Connections</div></div>
    <div class="stat"><div class="value">{{ event_count }}</div><div class="label">Events</div></div>
  </div>

  {% if !agents.is_empty() %}
  <section>
    <h2>Agents</h2>
    <div class="agent-list">
      {% for agent in &agents %}
      <div class="agent">
        <span class="name">{{ agent.name }}</span>
        <span class="persona">{{ agent.persona }}</span>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if !recent_cognitions.is_empty() %}
  <section>
    <h2>Recent Cognitions</h2>
    <div class="cognition-list">
      {% for cog in &recent_cognitions %}
      <div class="cognition">
        <div class="meta">
          <span class="texture">{{ cog.texture }}</span>
          <span>{{ cog.created_at.elapsed() }}</span>
        </div>
        <div class="content">{{ cog.content }}</div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section>
    <h2>Activity</h2>
    <div id="activity"></div>
  </section>
</div>

<script>
(function() {
  var feed = document.getElementById('activity');
  var source = new EventSource('/activity');

  source.onmessage = function(e) {
    try {
      var data = JSON.parse(e.data);
      var type = data.type || 'unknown';
      var entry = document.createElement('div');
      entry.className = 'event-entry';
      var typeSpan = document.createElement('span');
      typeSpan.className = 'event-type';
      typeSpan.textContent = type;
      entry.appendChild(typeSpan);
      entry.appendChild(document.createTextNode(' ' + new Date().toLocaleTimeString()));
      feed.prepend(entry);

      // Cap visible entries
      while (feed.children.length > 100) {
        feed.removeChild(feed.lastChild);
      }
    } catch(err) {
      // skip malformed events
    }
  };

  source.onerror = function() {
    var entry = document.createElement('div');
    entry.className = 'event-entry';
    entry.textContent = 'connection lost, retrying...';
    feed.prepend(entry);
  };
})();
</script>
</body>
</html>
