{# Spec 153 - /chat page.

   Renders both states from a single template, branched on
   ``key_configured``:

   * State A - no LLM key set: empty pane + "Configure LLM" CTA
     linking to /admin/settings/llm. No chat input rendered.
   * State B - key set: streaming chat surface backed by Server-Sent
     Events from /chat/turn.

   Egress disclosure banner ALWAYS rendered above whichever state
   shows (FR-010). #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <div class="flex items-center gap-2">
      <h1 class="ui-page-title">Audit AI</h1>
      {# Inline info toggle. The egress-disclosure banner is FR-010 and
         must remain reachable - collapsing it by default keeps the
         page chrome quiet, but the affordance lives one click away
         next to the title. Aria wiring keeps it screen-reader-usable. #}
      <button type="button" id="chat-privacy-toggle"
              class="text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
              aria-label="Show privacy notice"
              aria-expanded="false"
              aria-controls="chat-privacy-banner">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="9"/>
          <line x1="12" y1="8" x2="12" y2="8.01" stroke-linecap="round"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M11 12h1v4h1"/>
        </svg>
      </button>
    </div>
    <p class="text-base text-slate-500 dark:text-slate-400 mt-2">
      Ask your audit data in plain English. Backed by the same tools the audit dashboard uses; numbers cited here match what the rest of the audit shows for the same metric.
    </p>
  </div>

  {# Egress disclosure - FR-010. Collapsed by default; toggled by the
     info button next to the page title. The element remains in the
     DOM so screen readers can locate it via aria-controls. #}
  <div id="chat-privacy-banner" class="hidden mt-4 ui-pane border-blue-200 dark:border-blue-800 bg-blue-50/60 dark:bg-blue-950/30">
    <p class="text-sm text-blue-800 dark:text-blue-200">
      <strong>Heads up:</strong> Using Audit AI sends conversation
      content to your configured LLM provider
      {% if key_configured %}
        (<code class="font-mono">{{ provider }}</code>).
      {% else %}
        once you configure one.
      {% endif %}
      Conversation history is browser-local only - the audit never
      persists chat content to disk.
    </p>
  </div>

  {# Privacy-banner toggle. Lives outside the State A / State B branches
     so the affordance works in both - even when chat isn't configured
     yet, the user can still pop the FR-010 disclosure open. #}
  <script>
    (function () {
      var btn = document.getElementById('chat-privacy-toggle');
      var banner = document.getElementById('chat-privacy-banner');
      if (!btn || !banner) return;
      btn.addEventListener('click', function () {
        var nowHidden = banner.classList.toggle('hidden');
        btn.setAttribute('aria-expanded', String(!nowHidden));
        btn.setAttribute(
          'aria-label',
          nowHidden ? 'Show privacy notice' : 'Hide privacy notice'
        );
      });
    })();
  </script>

  {% if not key_configured %}
    {# ── State A - empty / unconfigured ────────────────────────── #}
    <div class="mt-6 ui-pane text-center py-10">
      <svg class="w-12 h-12 mx-auto text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8-1.477 0-2.87-.32-4.111-.875L3 21l1.875-4.889C3.32 14.87 3 13.477 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
      </svg>
      <h2 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Audit AI is disabled</h2>
      <p class="mt-2 max-w-md mx-auto text-sm text-slate-600 dark:text-slate-400">
        To enable Audit AI, configure an LLM provider + API key in
        Settings. The audit will send your conversation content to that
        provider on every turn; nothing leaves your machine until you
        configure a key.
      </p>
      <div class="mt-6">
        <a href="/admin/settings/llm" class="ui-btn-primary inline-flex items-center px-4 py-2 text-sm font-medium">
          Configure LLM
        </a>
      </div>
    </div>
  {% else %}
    {# ── State B - configured ────────────────────────────────── #}
    {# Two-column layout: chat on the left, starter questions on the
       right. Inline <style> rather than a Tailwind arbitrary value
       class - audit ships a pre-compiled Tailwind bundle and the JIT
       isn't available to generate ``lg:grid-cols-[...]`` for this
       template at build time. Below ``lg`` the starter panel stacks
       under the chat (it's useful at any width, just optional). #}
    <style>
      .audit-chat-grid { display: block; }
      @media (min-width: 1024px) {
        .audit-chat-grid {
          display: grid;
          /* Narrower chat column, wider MCP-tools column. The chat
             card has its own max-width below so it doesn't sprawl
             on ultra-wide displays - keeps the bubble line length
             readable. Explicit ``grid-auto-rows`` pins the single
             row to the same height as the cards (see
             ``--chat-card-height`` below) so both cards share the
             same top AND bottom edge. */
          grid-template-columns: minmax(0, 1fr) 26rem;
          grid-auto-rows: var(--chat-card-height);
          gap: 1rem;
          align-items: stretch;
        }
        /* The aside template uses ``lg:mt-0`` to zero its top margin
           at this breakpoint, but that utility isn't in the
           pre-compiled Tailwind bundle, so it never lands. Replicate
           it here so the aside's top edge matches the chat card's. */
        .audit-starter-aside.mt-4 { margin-top: 0; }
      }
      /* Fill the viewport down to a small bottom margin. Subtracting
         12rem accounts for the top nav strip + page header + the
         section's outer spacing. Tweak this single var if the header
         grows or shrinks. */
      :root { --chat-card-height: calc(100vh - 12rem); }

      /* Chat card: flex column. Transcript fills any leftover space;
         the cost strip + form sit naturally at the bottom. Fills its
         grid cell - no max-width / no centering - so there is no
         leftover gutter between the chat and the MCP-tools column.
         ``height: 100%`` defers to the grid row size, which is now
         pinned via ``grid-auto-rows`` above. */
      #chat-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
      }
      #chat-transcript {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
      }

      /* MCP-tools aside matches the chat card height; the list inside
         scrolls when there are too many tools to fit. */
      .audit-starter-aside {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
      }
      .audit-starter-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
      }

      /* Starter question rows: one line each, ellipsis on overflow.
         The full text is kept in data-q (and title=) so click still
         pre-fills the complete question and hover reveals it. */
      .audit-starter-q {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Chat bubbles: user on the right, assistant on the left. Max
         width via inline CSS because audit's pre-compiled Tailwind
         bundle doesn't include arbitrary-value classes. Asymmetric
         corner radius hints at speaker side without needing a tail
         SVG; `rounded-tl-md` / `rounded-tr-md` Tailwind utilities
         aren't in the pre-compiled bundle either, so override here. */
      .chat-bubble { max-width: 80%; }
      .chat-bubble-user { border-top-right-radius: 0.375rem; }
      .chat-bubble-ai { border-top-left-radius: 0.375rem; }
    </style>
    <div class="audit-chat-grid mt-4">
    <div class="ui-pane min-w-0" id="chat-card">
      {# Transcript area. Populated by the inline JS handler below.
         Sized so the scrollbar lives inside the panel; the input
         stays anchored at the bottom regardless of conversation
         length. #}
      <div id="chat-transcript" class="space-y-4">
        <p id="chat-empty-hint" class="text-sm text-slate-500 dark:text-slate-400">
          Ask anything about your audit data - or pick a starter
          question from the panel on the right.
        </p>
      </div>

      {# Cost strip - server's CostEvent populates this. #}
      <div id="chat-cost-strip" class="mt-3 flex items-center justify-between text-sm text-slate-500 dark:text-slate-400 border-t border-slate-200 dark:border-slate-800 pt-3">
        <span>
          Session cost: <span class="font-mono" id="chat-session-cost">$0.0000</span>
          {% if chat_session_cap_usd > 0 %}
            / <span class="font-mono">${{ '%.2f' | format(chat_session_cap_usd) }}</span> cap
          {% else %}
            (no cap)
          {% endif %}
        </span>
        <button type="button" id="chat-reset-btn"
                class="text-brand-600 dark:text-brand-300 hover:underline">
          Reset conversation
        </button>
      </div>

      {# Cap-reached overlay - initially hidden; shown when a turn
         comes back with DoneEvent(finish_reason="cost_cap"). #}
      <div id="chat-cap-reached" class="hidden mt-3 ui-pane border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30">
        <p class="text-sm text-amber-800 dark:text-amber-200">
          <strong>Session cap reached.</strong> Raise the cap in Settings
          or reset this session to keep chatting.
        </p>
        <div class="mt-2 flex gap-2">
          <a href="/admin/settings/llm" class="ui-btn-secondary text-sm">Raise cap in Settings</a>
          <button type="button" class="ui-btn-secondary text-sm" id="chat-cap-reset-btn">Reset session</button>
        </div>
      </div>

      <form id="chat-form" class="mt-4 flex items-center gap-2">
        <input type="text" id="chat-input"
               class="ui-form-input flex-1"
               placeholder="Ask anything about your audit data…"
               autocomplete="off"
               required />
        <button type="submit" id="chat-submit"
                class="ui-btn-primary inline-flex items-center justify-center rounded-full p-0 w-10"
                style="height: 2.5rem; flex-shrink: 0;"
                aria-label="Send message"
                title="Send">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.4 20.6 21 12 3.4 3.4 3.4 10.5 16 12 3.4 13.5 z"/>
          </svg>
        </button>
      </form>
    </div>

    {# ── Starter questions panel ────────────────────────────────
       Curated prompts covering the most-asked DB-admin questions.
       Click pre-fills the chat input (no auto-submit) so users can
       edit before sending. Grouped by topic so users skim by intent
       rather than reading a flat list. The set tracks the audit's
       full MCP tool surface - adding a tool here without a sample
       question makes the chat feel under-utilised. #}
    <aside class="audit-starter-aside ui-pane min-w-0 mt-4 lg:mt-0" aria-label="Starter questions">
      <h2 class="text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200">MCP tools</h2>

      {# Each entry: (short_label, full_question). Short label is what
         renders in the slim sidebar - the full question is dropped
         into the chat input on click via ``data-q``. Keep labels
         under ~22 chars to avoid mid-word truncation at 14rem. #}
      {% set _starter_groups = [
        ("Cost & spend", [
          ("Cost today",            "What was my BigQuery cost today?"),
          ("Cost last 7 days",      "Show me the cost trend for the last 7 days."),
          ("Cost vs last week",     "Did my cost go up vs last week?"),
          ("Build vs consumption",  "What's my build vs consumption breakdown?"),
          ("dbt-originated spend",  "How much of my spend is dbt-originated?")
        ]),
        ("Issues & findings", [
          ("Slot contention",       "Any slot contention this week?"),
          ("All findings",          "Summarise all detection findings."),
          ("Worst-affected tables", "What are the worst-affected tables right now?"),
          ("Top expensive model",   "What's my most expensive flagged model?")
        ]),
        ("People", [
          ("Top by cost",           "Who runs the most expensive queries?"),
          ("Top slot offenders",    "Who's tripping slot contention the most?")
        ]),
        ("Optimisation", [
          ("Partition + cluster",   "Show me my partition + cluster recommendations."),
          ("Storage by dataset",    "Storage cost by dataset.")
        ]),
        ("System", [
          ("Current scan config",   "What's my current scan config?"),
          ("Recent failures",       "Show recent failures."),
          ("Last scan",             "When was my last scan?")
        ])
      ] %}

      <div class="audit-starter-list mt-3 space-y-3 pr-1">
        {% for group_name, items in _starter_groups %}
        <div>
          <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">{{ group_name }}</p>
          <ul class="space-y-0.5">
            {% for label, full in items %}
            <li>
              <button type="button"
                      class="audit-starter-q w-full text-left text-sm text-slate-700 dark:text-slate-300 hover:text-brand-600 dark:hover:text-brand-300 hover:bg-slate-100 dark:hover:bg-slate-800 px-2 py-1 -mx-2 transition-colors"
                      data-q="{{ full | e }}"
                      title="{{ full | e }}">
                {{ label }}
              </button>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}
      </div>
    </aside>
    </div>{# /grid #}

    <script>
      // Wire starter-question buttons. Pre-fill the input rather than
      // auto-submitting so the user can tweak the wording first. After
      // a click the input is focused so Enter sends immediately if
      // they're happy with the suggested phrasing.
      (function() {
        document.querySelectorAll('.audit-starter-q').forEach(function(btn) {
          btn.addEventListener('click', function() {
            var input = document.getElementById('chat-input');
            if (!input) return;
            input.value = btn.dataset.q || btn.textContent.trim();
            input.focus();
            // Scroll the input back into view in case the list is long.
            input.scrollIntoView({ behavior: 'smooth', block: 'center' });
          });
        });
      })();
    </script>

    <script>
      (function () {
        const transcript = document.getElementById('chat-transcript');
        const emptyHint = document.getElementById('chat-empty-hint');
        const form = document.getElementById('chat-form');
        const input = document.getElementById('chat-input');
        const submit = document.getElementById('chat-submit');
        const sessionCostEl = document.getElementById('chat-session-cost');
        const resetBtn = document.getElementById('chat-reset-btn');
        const capPane = document.getElementById('chat-cap-reached');
        const capResetBtn = document.getElementById('chat-cap-reset-btn');

        // Browser-local-only history (FR-007). Conversation content
        // never leaves the client / server roundtrip.
        let history = [];
        // Display-only - the authoritative running total lives in the
        // server-side ledger keyed by ``sessionId``. We refresh this
        // from the CostEvent the server emits at end-of-turn.
        let sessionTotal = 0.0;
        // Per-tab session id anchors the server-side cost-cap ledger.
        // Fresh id on each page load (and on "New chat") so a tampered
        // client can't reset the cap mid-session by spoofing the id.
        function mintSessionId() {
          return (
            'sess-' +
            (crypto && crypto.randomUUID
              ? crypto.randomUUID()
              : (Date.now().toString(36) +
                 Math.random().toString(36).slice(2, 10)))
          );
        }
        let sessionId = mintSessionId();

        function escapeHtml(s) {
          return String(s == null ? '' : s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
        }

        // Minimal Markdown subset - what Gemini emits in practice.
        // Order matters: extract fenced blocks first so their content
        // isn't transformed, then inline code, then bold (longer
        // marker), then strip stray italics, then list / accent passes.
        function renderMarkdown(text) {
          if (!text) return '';
          let s = escapeHtml(text);
          // Fenced code blocks ```lang?\n...\n```
          s = s.replace(
            /```([a-z0-9_+\-]*)\n([\s\S]*?)```/gi,
            function (_m, _lang, body) {
              return '<pre class="mt-2 mb-2 text-sm font-mono bg-slate-100 dark:bg-slate-800 p-3 overflow-x-auto whitespace-pre"><code>'
                + body
                + '</code></pre>';
            }
          );
          // Inline `code`
          s = s.replace(
            /`([^`\n]+)`/g,
            '<code class="font-mono text-sm bg-slate-100 dark:bg-slate-800 px-1 py-0.5">$1</code>'
          );
          // Bold **text** (handle before italic so `*` doesn't greedy-match).
          s = s.replace(/\*\*([^*\n][^*]*?)\*\*/g, '<strong>$1</strong>');
          // Italic *text* - we don't render italic here (Gemini uses
          // it inconsistently for labels like ``*Jobs*: 249`` which
          // reads as noisy emphasis rather than meaningful italics).
          // Strip the asterisk wrappers but keep the inner text as
          // plain prose.
          s = s.replace(/(^|[^*])\*([^*\s][^*\n]*?)\*(?!\*)/g, '$1$2');
          // Bullets: turn line-leading "* " or "- " (with any indent)
          // into a colored unicode bullet so the nested list reads as
          // a real list rather than as literal asterisks. The bubble
          // uses whitespace-pre-wrap, so leading-space indent survives.
          s = s.split('\n').map(function (line) {
            return line.replace(
              /^(\s*)[\*\-]\s+/,
              '$1<span class="text-slate-400 dark:text-slate-500">•</span> '
            );
          }).join('\n');
          // Currency accent - emerald-tint dollar amounts so spend
          // numbers stand out at a glance. Loose match: $X, $X.XX,
          // $X,XXX.XX, $0.0001 (sub-cent values used by the cost
          // ledger). Match anywhere; nested inside <strong> is fine.
          s = s.replace(
            /(\$\d{1,3}(?:,\d{3})*(?:\.\d{1,4})?)/g,
            '<span class="text-emerald-700 dark:text-emerald-400 font-medium">$1</span>'
          );
          // Percentage accent - amber-tint X% / X.X% / X.XX% so share-of-
          // total figures pop alongside the emerald-tinted dollars. Skips
          // values already inside our emerald wrapper by requiring the
          // digit to be preceded by a word boundary OR a non-tag char.
          s = s.replace(
            /(\b\d+(?:\.\d{1,2})?%)/g,
            '<span class="text-amber-700 dark:text-amber-400 font-medium">$1</span>'
          );
          return s;
        }

        function appendTypingIndicator() {
          if (emptyHint) emptyHint.remove();
          const wrap = document.createElement('div');
          wrap.id = 'chat-typing-indicator';
          wrap.className = 'flex';
          wrap.innerHTML =
            '<div class="chat-bubble chat-bubble-ai px-4 py-2.5 rounded-2xl bg-slate-100 dark:bg-slate-800">' +
            '<div class="inline-flex gap-1 items-center" aria-label="Assistant is thinking">' +
            '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay:0ms"></span>' +
            '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay:150ms"></span>' +
            '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay:300ms"></span>' +
            '</div>' +
            '</div>';
          transcript.appendChild(wrap);
          transcript.scrollTop = transcript.scrollHeight;
          return wrap;
        }

        function removeTypingIndicator() {
          const el = document.getElementById('chat-typing-indicator');
          if (el) el.remove();
        }

        function appendMessage(role, contentHtml) {
          if (emptyHint) emptyHint.remove();
          const isUser = role === 'user';
          const wrapper = document.createElement('div');
          // Plain flex (no justify-start class - not in the pre-compiled
          // bundle, but `flex` defaults to `justify-content: flex-start`
          // which is what we want for assistant messages anyway).
          wrapper.className = isUser ? 'flex justify-end' : 'flex';
          const bubbleClasses = isUser
            ? 'chat-bubble chat-bubble-user px-4 py-2.5 rounded-2xl bg-brand-500 text-white'
            : 'chat-bubble chat-bubble-ai px-4 py-2.5 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100';
          wrapper.innerHTML =
            '<div class="' + bubbleClasses + '">' +
            '<div class="chat-msg-body text-sm whitespace-pre-wrap"></div>' +
            '</div>';
          const body = wrapper.querySelector('.chat-msg-body');
          body.innerHTML = contentHtml;
          transcript.appendChild(wrapper);
          transcript.scrollTop = transcript.scrollHeight;
          return body;
        }

        function appendToolCall(call) {
          if (emptyHint) emptyHint.remove();
          const row = document.createElement('details');
          row.className = 'ui-pane bg-slate-50/50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-800 py-2';
          row.innerHTML =
            '<summary class="cursor-pointer text-sm">' +
            '<span class="text-slate-500 dark:text-slate-400">Tool call:</span> ' +
            '<code class="font-mono text-slate-700 dark:text-slate-200">' + escapeHtml(call.tool_name) + '</code> ' +
            '<span class="text-slate-400">·</span> ' +
            '<span class="text-slate-500 dark:text-slate-400 chat-tc-summary">running…</span>' +
            '</summary>' +
            '<pre class="mt-2 text-sm font-mono text-slate-600 dark:text-slate-400 overflow-x-auto whitespace-pre">' +
            'args: ' + escapeHtml(JSON.stringify(call.arguments, null, 2)) +
            '</pre>' +
            '<pre class="mt-2 text-sm font-mono text-slate-700 dark:text-slate-300 overflow-x-auto whitespace-pre chat-tc-output">' +
            '(awaiting result)' +
            '</pre>';
          transcript.appendChild(row);
          transcript.scrollTop = transcript.scrollHeight;
          return row;
        }

        function recordHistoryUser(content) {
          history.push({role: 'user', content: content});
        }

        function recordHistoryAssistant(content, toolCalls, cost, inputTokens, outputTokens) {
          history.push({
            role: 'assistant',
            content: content || '',
            tool_calls: toolCalls || [],
            turn_cost_usd: cost || 0,
            cost_paid_in_input_tokens: inputTokens || 0,
            cost_paid_in_output_tokens: outputTokens || 0,
          });
        }

        function updateSessionCost(total) {
          sessionTotal = total;
          sessionCostEl.textContent = '$' + total.toFixed(4);
        }

        function showCapReached() {
          capPane.classList.remove('hidden');
          input.disabled = true;
          submit.disabled = true;
        }

        function resetSession() {
          // Tell the server to clear the cost ledger for the OLD
          // session id before we mint a new one. Fire-and-forget; if
          // the request fails the worst case is a stale entry that
          // ages out of the LRU bound.
          fetch('/chat/session/reset', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({session_id: sessionId}),
          }).catch(function () { /* best-effort */ });

          history = [];
          sessionId = mintSessionId();
          updateSessionCost(0);
          transcript.innerHTML = '';
          const hint = document.createElement('p');
          hint.id = 'chat-empty-hint';
          hint.className = 'text-sm text-slate-500 dark:text-slate-400 italic';
          hint.textContent = 'Conversation reset. Try a new question.';
          transcript.appendChild(hint);
          capPane.classList.add('hidden');
          input.disabled = false;
          submit.disabled = false;
          input.focus();
        }

        resetBtn.addEventListener('click', resetSession);
        capResetBtn.addEventListener('click', resetSession);

        form.addEventListener('submit', async function (ev) {
          ev.preventDefault();
          const userMessage = input.value.trim();
          if (!userMessage) return;
          appendMessage('user', escapeHtml(userMessage));
          recordHistoryUser(userMessage);
          input.value = '';
          input.disabled = true;
          submit.disabled = true;

          // Show the "thinking" indicator first. The assistant message
          // box is created lazily on the first ``text`` chunk OR
          // attached as a fallback at the end if no text streamed.
          appendTypingIndicator();
          let assistantBody = null;
          let assistantText = '';
          const turnToolCalls = []; // {tool_name, arguments, output_summary, output_json, is_error}
          const callIdToRow = {};

          // Lazy-create the assistant message box on first text /
          // first done(error). Removes the typing indicator when it
          // does. Idempotent - calling repeatedly is a no-op after
          // the box exists.
          function ensureAssistantBody() {
            if (assistantBody) return assistantBody;
            removeTypingIndicator();
            assistantBody = appendMessage('assistant', '');
            return assistantBody;
          }

          let finalCostUsd = 0;
          let finalInputTokens = 0;
          let finalOutputTokens = 0;

          try {
            const response = await fetch('/chat/turn', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({
                session_id: sessionId,
                history: history.slice(0, -1),  // exclude the user msg we just pushed; service adds it itself
                user_message: userMessage,
              }),
            });

            if (!response.ok) {
              const errBody = await response.json().catch(() => ({}));
              ensureAssistantBody().innerHTML =
                '<span class="text-red-600 dark:text-red-400">' +
                escapeHtml(errBody.error || 'request_failed') + ': ' +
                escapeHtml(errBody.remediation || ('HTTP ' + response.status)) +
                '</span>';
              input.disabled = false;
              submit.disabled = false;
              input.focus();
              return;
            }

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let buffer = '';

            // SSE frames are separated by a blank line. The spec
            // accepts \r\n\r\n, \n\n, or \r\r - sse-starlette emits
            // CRLF (\r\n\r\n) which is what we'd miss if we only
            // searched for \n\n. Match all three line-ending shapes.
            const FRAME_SEP_RE = /\r\n\r\n|\n\n|\r\r/;
            const LINE_SPLIT_RE = /\r\n|\n|\r/;

            while (true) {
              const {value, done} = await reader.read();
              if (done) break;
              buffer += decoder.decode(value, {stream: true});
              while (true) {
                const m = buffer.match(FRAME_SEP_RE);
                if (!m) break;
                const sep = m.index;
                const sepLen = m[0].length;
                const frame = buffer.slice(0, sep);
                buffer = buffer.slice(sep + sepLen);
                const dataLines = frame.split(LINE_SPLIT_RE)
                  .filter(l => l.startsWith('data:'))
                  .map(l => l.slice(5).trimStart());
                if (!dataLines.length) continue;
                let event;
                try {
                  event = JSON.parse(dataLines.join('\n'));
                } catch (e) {
                  continue;
                }
                if (event.type === 'text') {
                  // First text chunk → swap typing indicator for the
                  // real assistant message box. Subsequent chunks
                  // re-render markdown over the accumulated text.
                  ensureAssistantBody();
                  assistantText += event.chunk;
                  assistantBody.innerHTML = renderMarkdown(assistantText);
                  transcript.scrollTop = transcript.scrollHeight;
                } else if (event.type === 'tool_call') {
                  // Move the typing indicator BELOW the new tool-call
                  // row so the user sees "the model is still working".
                  removeTypingIndicator();
                  const row = appendToolCall(event);
                  callIdToRow[event.call_id] = row;
                  turnToolCalls.push({
                    tool_name: event.tool_name,
                    arguments: event.arguments,
                    call_id: event.call_id,
                    output_summary: '',
                    output_json: {},
                    is_error: false,
                  });
                  // Re-attach typing indicator under the tool row,
                  // unless a real assistant body has already appeared.
                  if (!assistantBody) {
                    appendTypingIndicator();
                  }
                } else if (event.type === 'tool_result') {
                  const row = callIdToRow[event.call_id];
                  if (row) {
                    const summaryEl = row.querySelector('.chat-tc-summary');
                    const outputEl = row.querySelector('.chat-tc-output');
                    summaryEl.textContent = event.output_summary;
                    summaryEl.classList.toggle('text-red-600', !!event.is_error);
                    summaryEl.classList.toggle('dark:text-red-400', !!event.is_error);
                    outputEl.textContent = JSON.stringify(event.output_json, null, 2);
                  }
                  for (const tc of turnToolCalls) {
                    if (tc.call_id === event.call_id) {
                      tc.output_summary = event.output_summary;
                      tc.output_json = event.output_json;
                      tc.is_error = event.is_error;
                    }
                  }
                } else if (event.type === 'cost') {
                  finalCostUsd = event.turn_cost_usd;
                  finalInputTokens = event.input_tokens;
                  finalOutputTokens = event.output_tokens;
                  updateSessionCost(event.session_total_usd);
                } else if (event.type === 'done') {
                  // Done is the last event no matter what. Drop the
                  // typing indicator if it's still up (no text ever
                  // streamed in this turn).
                  removeTypingIndicator();
                  if (event.finish_reason === 'cost_cap') {
                    showCapReached();
                  } else if (event.finish_reason !== 'stop' && event.error_message) {
                    const errSpan = document.createElement('span');
                    errSpan.className = 'block mt-2 text-sm text-amber-700 dark:text-amber-300';
                    errSpan.textContent = '(' + event.finish_reason + ': ' + event.error_message + ')';
                    ensureAssistantBody().appendChild(errSpan);
                  }
                }
              }
            }
          } catch (err) {
            ensureAssistantBody().innerHTML =
              '<span class="text-red-600 dark:text-red-400">Network error: ' +
              escapeHtml(err.message || String(err)) +
              '</span>';
          } finally {
            // Safety net: drop the typing indicator if any path
            // above missed it.
            removeTypingIndicator();
            // Add an assistant cost footer to whichever assistant
            // body exists. If the turn produced neither text nor a
            // tool call (e.g. an instant cost-cap stop), we don't
            // create one - there's nothing for the footer to attach
            // to anyway.
            if (assistantBody && (assistantText || turnToolCalls.length)) {
              const costFooter = document.createElement('p');
              costFooter.className = 'mt-2 text-sm text-slate-400 dark:text-slate-500 font-mono';
              costFooter.textContent =
                '$' + finalCostUsd.toFixed(4) + ' this turn · ' +
                finalInputTokens + ' in / ' + finalOutputTokens + ' out';
              assistantBody.appendChild(costFooter);
            }
            recordHistoryAssistant(
              assistantText, turnToolCalls, finalCostUsd, finalInputTokens, finalOutputTokens
            );
            if (!input.disabled === false && !capPane.classList.contains('hidden')) {
              // input intentionally remains disabled when the cap was hit
            }
            if (!capPane || capPane.classList.contains('hidden')) {
              input.disabled = false;
              submit.disabled = false;
              input.focus();
            }
          }
        });
      })();
    </script>
  {% endif %}
</section>
{% endblock %}