feat: chat shell page rendering

chat/templates/chat.html

@@ -0,0 +1,42 @@
+{% extends "layout.html" %}
+{% block title %}{{ host_bot.name }} - chat{% endblock %}
+{% block content %}
+<div class="chat-shell" data-chat-id="{{ chat.id }}">
+  <header class="chat-header">
+    <h1>{{ host_bot.name }}</h1>
+    <div class="chat-meta muted">{{ chat.time }}</div>
+    <button class="drawer-toggle" type="button" aria-controls="drawer" aria-expanded="false">Drawer</button>
+  </header>
+
+  <section class="timeline" id="timeline">
+    {% if not turns %}
+    <p class="muted">No turns yet. Start typing below.</p>
+    {% else %}
+      {% for turn in turns %}
+        <div class="turn turn-{{ turn.role }}">
+          <strong>{{ turn.speaker }}</strong>
+          <p>{{ turn.text }}</p>
+        </div>
+      {% endfor %}
+    {% endif %}
+  </section>
+
+  <form class="turn-input" method="post" action="/chats/{{ chat.id }}/turns">
+    <textarea name="prose" rows="3" placeholder="What do you say or do?"></textarea>
+    <button type="submit">Send</button>
+  </form>
+
+  <aside class="drawer" id="drawer" hidden>
+    <p class="muted">Drawer (read-only). T24 fills this in.</p>
+  </aside>
+</div>
+<script>
+document.querySelector('.drawer-toggle')?.addEventListener('click', (e) => {
+  const drawer = document.getElementById('drawer');
+  const isHidden = drawer.hasAttribute('hidden');
+  if (isHidden) drawer.removeAttribute('hidden');
+  else drawer.setAttribute('hidden', '');
+  e.target.setAttribute('aria-expanded', String(isHidden));
+});
+</script>
+{% endblock %}