{% extends "base.html" %}
{% block title %}Chat {{ session_id }} · Striatum{% endblock %}
{% block main %}
<section class="page-section chat-page" data-session-id="{{ session_id }}">
  <header class="chat-header">
    <p class="breadcrumb"><a href="/chat">← Chat sessions</a></p>
    <h1>Chat <code>{{ session_id }}</code></h1>
    <div class="run-meta">
      <span class="muted">{{ messages|length }} messages</span>
      {% if model %}<span class="muted">· model: <code>{{ model }}</code></span>{% endif %}
      {% if flavor %}<span class="muted">· flavor: <code>{{ flavor }}</code></span>{% endif %}
    </div>
  </header>

  <div class="chat-history" id="chat-history">
    {% for msg in messages %}
    {% if msg.role == "tool_use" %}
    <details class="chat-tool-call chat-role-tool_use">
      <summary>🔧 {{ msg.tool_name }} {{ msg.tool_input | tojson }}</summary>
      <pre class="tool-result">{{ msg.tool_input | tojson(indent=2) }}</pre>
    </details>
    {% elif msg.role == "tool_result" %}
    <details class="chat-tool-call chat-role-tool_result">
      <summary>✓ {{ msg.tool_name }} (result)</summary>
      <pre class="tool-result">{{ msg.result }}</pre>
    </details>
    {% elif msg.role == "tool_confirmation" %}
    <details class="chat-tool-call chat-role-tool_confirmation" open>
      <summary>Operator confirmation required: {{ msg.tool_name }}</summary>
      <p class="muted">Spec {{ msg.spec_hash }} · state: <code>{{ msg.state }}</code></p>
      {% if msg.state == "pending" %}
      <form class="chat-confirm-tool-form" method="post" action="/chat/{{ session_id }}/confirm-tool/{{ msg.tool_use_id }}">
        <input type="hidden" name="token" value="{{ msg.confirmation_token }}">
        <button type="submit" name="action" value="confirm" class="primary-button">Confirm write</button>
        <button type="submit" name="action" value="cancel">Cancel</button>
      </form>
      {% endif %}
      <pre class="tool-result">{{ msg.tool_input | tojson(indent=2) }}</pre>
    </details>
    {% else %}
    <article class="chat-message chat-role-{{ msg.role }}">
      <header class="chat-message-meta">
        <strong>{{ msg.role }}</strong>
        <span class="muted">{{ msg.created_at }}</span>
      </header>
      <div class="chat-message-body">{{ msg.rendered | safe }}</div>
    </article>
    {% endif %}
    {% endfor %}
  </div>

  <form class="chat-input-form" method="post" action="/chat/{{ session_id }}/send">
    <textarea name="message" rows="3" placeholder="Type a message; Enter to send, Shift+Enter for newline" required></textarea>
    <div class="chat-input-actions">
      <button type="submit" class="primary-button">Send</button>
      <span class="muted chat-status" id="chat-status"></span>
    </div>
  </form>
</section>
<script defer src="/static/chat.js"></script>
{% endblock %}