{% extends 'ls_portal/base.html' %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
<section class="chat-shell">
  <header class="chat-header header app-topbar">
    <div class="slim-header-row">
      <div class="slim-title-wrap">
        <div class="kicker">Haigh Environmental Executive Assistant</div>
        <h1 class="title" id="chat-title">{{ current_account.display_name or current_account.username }}</h1>
      </div>
      <details class="header-menu">
        <summary class="burger-button" aria-label="Open menu">☰</summary>
        <nav class="menu-panel" aria-label="Operator navigation">
          <a class="is-active" href="{{ url_for('ls_portal_bp.home') }}">Chat</a>
          <a href="{{ url_for('ls_portal_bp.archive') }}">Archive</a>
          <a href="{{ url_for('ls_portal_bp.plans') }}">To-Dos{% if state.blocked_count %} <span class="nav-count" id="plans-badge">{{ state.blocked_count }}</span>{% else %}<span class="nav-count" id="plans-badge" hidden>0</span>{% endif %}</a>
          {% if approvals_enabled %}
            <a href="{{ url_for('ls_portal_bp.approvals') }}">Approvals{% if state.approvals_pending_count %} <span class="nav-count">{{ state.approvals_pending_count }}</span>{% endif %}</a>
          {% endif %}
          <a href="{{ url_for('ls_portal_bp.ops') }}">Ops{% if unread_notification_count %} <span class="nav-count" id="ops-badge">{{ unread_notification_count }}</span>{% else %}<span class="nav-count" id="ops-badge" hidden>0</span>{% endif %}</a>
          {% if current_account.can_manage_accounts or current_account.is_superuser %}
            <a href="{{ url_for('ls_portal_bp.accounts') }}">Accounts</a>
          {% endif %}
        </nav>
      </details>
    </div>
  </header>

  <section class="thread-pane" id="messages-pane-codex" data-thread-pane="{{ codex_conversation_kind }}">
    <section class="chat-thread" id="messages-codex" aria-live="polite">
      {% for row in messages %}
        <article class="message message-{{ 'assistant' if row.role == 'assistant' else 'user' }}" data-message-id="{{ row.id }}">
          <div class="message-body{% if row.task_status %} has-status{% endif %}">
            <div class="message-content" data-compact-text>{{ row.content }}</div>
            {% if row.task_status %}<div class="message-status-overlay">{{ row.task_status }}</div>{% endif %}
            {% if row.role == 'assistant' and (current_account.can_submit or current_account.is_superuser) %}
              <div class="message-tools">
                <button type="button" class="message-tool" data-copy-response="{{ row.id }}" data-copy-text="{{ row.content|e }}" title="Copy response" aria-label="Copy response">⧉</button>
              </div>
            {% endif %}
          </div>
          {% if row.last_error %}
            <div class="message-meta">
              {% if row.last_error %}<span class="danger">{{ row.last_error }}</span>{% endif %}
            </div>
          {% endif %}
        </article>
      {% endfor %}
    </section>
  </section>

  <section class="thread-pane" id="messages-pane-instant" data-thread-pane="{{ instant_conversation_kind }}" hidden>
    <section class="chat-thread" id="messages-instant" aria-live="polite">
      {% for row in instant_messages %}
        <article class="message message-{{ 'assistant' if row.role == 'assistant' else 'user' }}" data-message-id="{{ row.id }}">
          <div class="message-body{% if row.task_status %} has-status{% endif %}">
            <div class="message-content" data-compact-text>{{ row.content }}</div>
            {% if row.task_status %}<div class="message-status-overlay">{{ row.task_status }}</div>{% endif %}
            {% if row.role == 'assistant' and (current_account.can_submit or current_account.is_superuser) %}
              <div class="message-tools">
                <button type="button" class="message-tool" data-copy-response="{{ row.id }}" data-copy-text="{{ row.content|e }}" title="Copy response" aria-label="Copy response">⧉</button>
                <button type="button" class="message-tool" data-create-action="{{ row.id }}" data-action-text="{{ row.content|e }}" title="Process in Action" aria-label="Process in Action">↗</button>
                <button type="button" class="message-tool" data-copy-to-action="{{ row.id }}" data-action-copy-text="{{ row.content|e }}" title="Copy to Action" aria-label="Copy to Action">⇥</button>
              </div>
            {% endif %}
          </div>
          {% if row.last_error %}
            <div class="message-meta">
              <span class="danger">{{ row.last_error }}</span>
            </div>
          {% endif %}
        </article>
      {% endfor %}
    </section>
  </section>

  <div class="swipe-hint" id="swipe-hint" aria-hidden="true"></div>

  {% if current_account.can_submit or current_account.is_superuser %}
    <form method="post" action="{{ url_for('ls_portal_bp.send_message') }}" class="composer mobile-composer" id="composer-form">
      <input type="hidden" id="composer-target-kind" value="{{ codex_conversation_kind }}">
      <div class="composer-input-wrap">
        <textarea id="composer-input" name="content" maxlength="{{ max_message_len or 10000 }}" placeholder="Type or dictate here." autofocus required></textarea>
        <div class="composer-input-tools">
          <button type="button" class="composer-tool" id="composer-copy" title="Copy text" aria-label="Copy text">⧉</button>
          <button type="button" class="composer-tool" id="composer-clear" title="Clear text" aria-label="Clear text">×</button>
        </div>
        <div class="muted composer-count char-count composer-count-overlay" id="composer-count" aria-live="polite">{{ "{:,}".format(max_message_len or 10000) }} remaining</div>
      </div>
      <div class="composer-row">
        <div class="composer-status" id="composer-status" aria-live="polite" hidden></div>
        <div class="composer-actions">
          <button type="submit" id="composer-send">Send</button>
        </div>
      </div>
    </form>
  {% else %}
    <section class="panel compact-panel">
      <div class="muted">This account is read-only.</div>
    </section>
  {% endif %}
</section>

<script>
  let lastSig = '';
  let forceStickToBottom = true;
  let submitInFlight = false;
  let composerStatusTimer = 0;
  let pendingSubmitKind = '{{ codex_conversation_kind }}';
  let pendingSubmitUrl = '{{ url_for("ls_portal_bp.send_message") }}';
  const composerMaxLen = {{ (max_message_len or 10000)|int }};
  const codexKind = '{{ codex_conversation_kind }}';
  const instantKind = '{{ instant_conversation_kind }}';
  const canSubmit = {{ 'true' if (current_account.can_submit or current_account.is_superuser) else 'false' }};
  const threadContainers = {
    [codexKind]: document.getElementById('messages-codex'),
    [instantKind]: document.getElementById('messages-instant'),
  };
  const threadPanes = {
    [codexKind]: document.getElementById('messages-pane-codex'),
    [instantKind]: document.getElementById('messages-pane-instant'),
  };
  let activeThread = localStorage.getItem('ls_active_thread');
  if (![codexKind, instantKind].includes(activeThread)) activeThread = codexKind;
  const composerInput = document.getElementById('composer-input');
  const composerForm = document.getElementById('composer-form');
  const composerSend = document.getElementById('composer-send');
  const composerTargetKind = document.getElementById('composer-target-kind');
  const composerStatus = document.getElementById('composer-status');
  const swipeHint = document.getElementById('swipe-hint');
  const composerCopy = document.getElementById('composer-copy');
  const composerClear = document.getElementById('composer-clear');
  const submitUrls = {
    [codexKind]: '{{ url_for("ls_portal_bp.send_message") }}',
    [instantKind]: '{{ url_for("ls_portal_bp.send_instant_message") }}',
  };
  let swipeStartX = 0;
  let swipeStartY = 0;
  let swipeTracking = false;

  function getActiveThreadContainer() {
    return threadContainers[activeThread] || null;
  }

  function setComposerStatus(text = '', tone = 'neutral') {
    if (!composerStatus) return;
    if (composerStatusTimer) {
      clearTimeout(composerStatusTimer);
      composerStatusTimer = 0;
    }
    composerStatus.textContent = text;
    composerStatus.hidden = !text;
    composerStatus.classList.toggle('is-visible', Boolean(text));
    composerStatus.classList.toggle('is-error', tone === 'error');
    composerStatus.classList.toggle('is-success', tone === 'success');
    composerStatus.classList.toggle('is-pending', tone === 'pending');
  }

  function modeLabel(kind) {
    return kind === instantKind ? 'Instant mode' : 'Action mode';
  }

  function compactMessageText(value) {
    return String(value || '').replace(/\n\s*\n+/g, '\n').trim();
  }

  function normalizeInlineText(value) {
    return compactMessageText(value).replace(/\s+/g, ' ').trim();
  }

  function extractThreadMessages(kind) {
    const container = threadContainers[kind];
    if (!container) return [];
    return Array.from(container.querySelectorAll('.message')).map((node) => ({
      id: Number(node.getAttribute('data-message-id') || 0),
      role: node.classList.contains('message-assistant') ? 'assistant' : 'user',
      content: normalizeInlineText((node.querySelector('[data-compact-text]') || node.querySelector('.message-content') || {}).textContent || ''),
    })).filter((row) => row.id && row.content);
  }

  function normalizeActionCue(value) {
    let text = normalizeInlineText(value)
      .replace(/^if you want[^,.:;]*[,:\-]?\s*/i, '')
      .replace(/^(i|we)\s+(would\s+)?need\s+to\s+/i, '')
      .replace(/^need\s+to\s+/i, '')
      .replace(/^query\s+monolith\/job\s+records/i, 'query job records in Monolith')
      .replace(/^query\s+monolith/i, 'query Monolith')
      .replace(/\bthe date range and status\b/i, 'the relevant date range and validation status')
      .replace(/\bsupplied system data\b/i, 'Monolith data')
      .replace(/[.]+$/g, '')
      .trim();
    if (!text) return '';
    return text.charAt(0).toLowerCase() + text.slice(1);
  }

  function extractActionCueFromAssistant(value) {
    const text = normalizeInlineText(value);
    const patterns = [
      /(?:if you want[^,.:;]*[,:\-]?\s*)?i need to ([^.]+)(?:\.|$)/i,
      /we need to ([^.]+)(?:\.|$)/i,
      /would need to ([^.]+)(?:\.|$)/i,
      /need to ([^.]+)(?:\.|$)/i,
      /must ([^.]+)(?:\.|$)/i,
    ];
    for (const pattern of patterns) {
      const match = text.match(pattern);
      if (match && match[1]) return normalizeActionCue(match[1]);
    }
    return '';
  }

  function choosePrimaryIntent(userTexts) {
    const texts = (userTexts || []).map(normalizeInlineText).filter(Boolean);
    if (!texts.length) return '';
    const strong = texts.filter((text) => text.length > 18 || /[?]/.test(text));
    const source = strong.length ? strong : texts;
    return source[source.length - 1];
  }

  function intentToActionObjective(value) {
    const text = normalizeInlineText(value).replace(/[?!.]+$/g, '').trim();
    if (!text) return '';
    if (/^how many\s+/i.test(text)) return `give me the total number of ${text.replace(/^how many\s+/i, '')}`;
    if (/^(what is|what's)\s+/i.test(text)) return `tell me ${text.replace(/^(what is|what's)\s+/i, '')}`;
    if (/^show me\s+/i.test(text)) return `show me ${text.replace(/^show me\s+/i, '')}`;
    if (/^list\s+/i.test(text)) return `list ${text.replace(/^list\s+/i, '')}`;
    if (/^(can you|could you|please)\s+/i.test(text)) return text.replace(/^(can you|could you|please)\s+/i, '');
    return `help me with ${text.charAt(0).toLowerCase() + text.slice(1)}`;
  }

  function buildActionDraftFromContext(selectedMessageId) {
    const instantMessages = extractThreadMessages(instantKind);
    if (!instantMessages.length) return '';
    const selectedIndex = instantMessages.findIndex((row) => row.id === Number(selectedMessageId));
    const fallbackAssistant = instantMessages.filter((row) => row.role === 'assistant').slice(-1)[0] || null;
    const selected = selectedIndex >= 0 ? instantMessages[selectedIndex] : fallbackAssistant;
    const windowMessages = selectedIndex >= 0
      ? instantMessages.slice(Math.max(0, selectedIndex - 6), selectedIndex + 1)
      : instantMessages.slice(-6);
    const userTexts = windowMessages.filter((row) => row.role === 'user').map((row) => row.content);
    const primaryIntent = choosePrimaryIntent(userTexts);
    const actionCue = extractActionCueFromAssistant(selected ? selected.content : '');
    const objective = intentToActionObjective(primaryIntent);
    const priorContext = normalizeInlineText(userTexts.slice(-2, -1)[0] || '');

    if (actionCue && objective) {
      return `In Monolith, ${actionCue}. Then ${objective}.`;
    }
    if (actionCue) {
      return `In Monolith, ${actionCue}, then return a concise, verified answer.`;
    }
    if (objective) {
      let draft = `In Monolith, carry out the checks needed to ${objective}.`;
      if (priorContext && priorContext !== primaryIntent && primaryIntent.length < 28) {
        draft += ` Context: ${priorContext}.`;
      }
      return draft;
    }
    return 'In Monolith, carry out the relevant checks and return a concise, verified answer.';
  }

  function putTextIntoActionComposer(text, statusText) {
    if (!composerInput) return;
    composerInput.value = String(text || '').trim();
    updateComposerCount();
    setActiveThread(codexKind, { behavior: 'smooth' });
    focusComposer();
    setComposerStatus(statusText, 'success');
    scheduleStatusClear(1400);
  }

  function scrollThreadToBottom(kind = activeThread, behavior = 'auto') {
    const container = threadContainers[kind];
    if (!container) return;
    const lastMessage = container.lastElementChild;
    if (lastMessage && typeof lastMessage.scrollIntoView === 'function') {
      try {
        lastMessage.scrollIntoView({ block: 'end', behavior });
      } catch (err) {
        lastMessage.scrollIntoView(false);
      }
    }
    if (typeof container.scrollTo === 'function') {
      container.scrollTo({ top: container.scrollHeight, behavior });
    } else {
      container.scrollTop = container.scrollHeight;
    }
  }

  function focusComposer() {
    if (!composerInput) return;
    const caret = composerInput.value.length;
    try {
      composerInput.focus({ preventScroll: true });
    } catch (err) {
      composerInput.focus();
    }
    if (typeof composerInput.setSelectionRange === 'function') {
      composerInput.setSelectionRange(caret, caret);
    }
  }

  function keepComposerReady({ behavior = 'auto', preserveFocus = false } = {}) {
    const sync = () => {
      scrollThreadToBottom(activeThread, behavior);
      window.scrollTo({ top: 0, behavior: 'auto' });
      if (preserveFocus && composerInput) focusComposer();
    };
    requestAnimationFrame(sync);
    setTimeout(sync, 80);
    setTimeout(sync, 220);
    setTimeout(sync, 420);
  }

  function setPendingSubmitTarget(kind, url) {
    pendingSubmitKind = kind || codexKind;
    pendingSubmitUrl = url || submitUrls[pendingSubmitKind] || submitUrls[codexKind];
    if (composerTargetKind) composerTargetKind.value = pendingSubmitKind;
    if (composerSend) composerSend.dataset.submitKind = pendingSubmitKind;
    if (composerSend) composerSend.dataset.submitUrl = pendingSubmitUrl;
  }

  function escapeHtml(value) {
    return String(value || '')
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function updateCount(id, value, { hideWhenZero = false } = {}) {
    const el = document.getElementById(id);
    if (!el) return;
    const num = Number(value || 0);
    el.textContent = String(num);
    if (hideWhenZero) el.hidden = num <= 0;
  }

  function updateSummary(state, notifications) {
    const queued = Number(state.pending_count || 0);
    const running = Number(state.running_count || 0);
    const plans = Number(state.todo_open || 0) + Number(state.work_open || 0) + Number(state.project_open || 0);
    updateCount('queued-count', queued);
    updateCount('running-count', running);
    updateCount('plans-count', plans);
    updateCount('plans-badge', state.blocked_count, { hideWhenZero: true });
    const unread = (notifications || []).filter((n) => n.status === 'unread').length;
    updateCount('ops-badge', unread, { hideWhenZero: true });
  }

  function renderThread(kind, messages) {
    const container = threadContainers[kind];
    if (!container) return;
    const nearBottom = kind !== activeThread || forceStickToBottom || (container.scrollHeight - container.scrollTop - container.clientHeight < 80);
    container.innerHTML = (messages || []).map((row) => `
      <article class="message message-${row.role === 'assistant' ? 'assistant' : 'user'}" data-message-id="${row.id}">
        <div class="message-body${row.task_status ? ' has-status' : ''}">
          <div class="message-content" data-compact-text>${escapeHtml(compactMessageText(row.content))}</div>
          ${row.task_status ? `<div class="message-status-overlay">${escapeHtml(row.task_status)}</div>` : ''}
          ${canSubmit && row.role === 'assistant' ? `<div class="message-tools">${kind === instantKind ? `<button type="button" class="message-tool" data-copy-response="${row.id}" data-copy-text="${escapeHtml(row.content)}" title="Copy response" aria-label="Copy response">⧉</button><button type="button" class="message-tool" data-create-action="${row.id}" data-action-text="${escapeHtml(row.content)}" title="Process in Action" aria-label="Process in Action">↗</button><button type="button" class="message-tool" data-copy-to-action="${row.id}" data-action-copy-text="${escapeHtml(row.content)}" title="Copy to Action" aria-label="Copy to Action">⇥</button>` : `<button type="button" class="message-tool" data-copy-response="${row.id}" data-copy-text="${escapeHtml(row.content)}" title="Copy response" aria-label="Copy response">⧉</button>`}</div>` : ''}
        </div>
        ${row.last_error ? `<div class="message-meta">
          ${row.last_error ? `<span class="danger">${escapeHtml(row.last_error)}</span>` : ''}
        </div>` : ''}
      </article>
    `).join('');
      if (nearBottom && kind === activeThread) {
        scrollThreadToBottom(kind);
        requestAnimationFrame(() => scrollThreadToBottom(kind));
        setTimeout(() => scrollThreadToBottom(kind), 120);
        setTimeout(() => scrollThreadToBottom(kind), 320);
        if (submitInFlight) keepComposerReady();
      }
  }

  function applyThreadState() {
    Object.entries(threadPanes).forEach(([kind, pane]) => {
      if (!pane) return;
      pane.hidden = kind !== activeThread;
    });
    if (composerSend) {
      composerSend.classList.toggle('send-instant', activeThread === instantKind);
      composerSend.classList.toggle('send-action', activeThread === codexKind);
    }
    document.body.classList.toggle('ls-mode-instant', activeThread === instantKind);
    document.body.classList.toggle('ls-mode-action', activeThread === codexKind);
    if (swipeHint) {
      swipeHint.classList.toggle('hint-instant', activeThread === instantKind);
      swipeHint.classList.toggle('hint-action', activeThread === codexKind);
      swipeHint.setAttribute('aria-label', activeThread === instantKind ? 'Swipe for Action mode' : 'Swipe for Instant mode');
    }
  }

  function setActiveThread(kind, { persist = true, behavior = 'auto' } = {}) {
    if (![codexKind, instantKind].includes(kind)) return;
    activeThread = kind;
    if (persist) localStorage.setItem('ls_active_thread', kind);
    setPendingSubmitTarget(kind, submitUrls[kind]);
    applyThreadState();
    scrollThreadToBottom(kind, behavior);
    keepComposerReady({ behavior });
  }

  function toggleThreadBySwipe() {
    setActiveThread(activeThread === codexKind ? instantKind : codexKind, { behavior: 'smooth' });
    setComposerStatus(modeLabel(activeThread) + '.', 'success');
    scheduleStatusClear(1000);
  }

  function updateComposerCount() {
    const counter = document.getElementById('composer-count');
    if (!composerInput || !counter) return;
    const used = composerInput.value.length;
    const limit = Number(composerInput.getAttribute('maxlength') || composerMaxLen);
    const remaining = Math.max(limit - used, 0);
    counter.textContent = `${remaining.toLocaleString()} remaining`;
    counter.classList.toggle('danger', used > limit);
  }

  function compactExistingRenderedMessages() {
    document.querySelectorAll('[data-compact-text]').forEach((node) => {
      node.textContent = compactMessageText(node.textContent);
    });
  }

  function syncViewportState() {
    const viewport = window.visualViewport;
    const appHeight = viewport ? viewport.height : window.innerHeight;
    document.documentElement.style.setProperty('--ls-app-height', `${Math.round(appHeight)}px`);
  }

  function scheduleStatusClear(delay = 2200) {
    if (!composerStatus) return;
    if (composerStatusTimer) clearTimeout(composerStatusTimer);
    composerStatusTimer = window.setTimeout(() => {
      setComposerStatus('', 'neutral');
    }, delay);
  }

  async function submitMessage({
    content,
    submitKind = codexKind,
    submitUrl = '{{ url_for("ls_portal_bp.send_message") }}',
    clearComposer = false,
    pendingText = '',
    successText = '',
  } = {}) {
    const bodyText = String(content || '').trim();
    if (!bodyText || submitInFlight) return false;
    submitInFlight = true;
    forceStickToBottom = true;
    if (composerSend) composerSend.disabled = true;
    setComposerStatus(
      pendingText || (submitKind === instantKind ? 'Waiting for instant reply...' : 'Queued for Action...'),
      'pending',
    );
    setActiveThread(submitKind, { behavior: 'auto' });
    keepComposerReady({ preserveFocus: true });
    try {
      const formData = new FormData();
      formData.set('content', bodyText);
      const response = await fetch(submitUrl, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData,
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok || !payload.ok) {
        throw new Error(payload.error || payload.message || 'Unable to submit message');
      }
      updateSummary(payload.state || {}, payload.notifications || []);
      renderThread(codexKind, payload.messages || []);
      renderThread(instantKind, payload.instant_messages || []);
      if (clearComposer && composerInput) {
        composerInput.value = '';
        updateComposerCount();
      }
      setComposerStatus(
        successText || (submitKind === instantKind ? 'Instant reply ready.' : 'Queued for Action.'),
        'success',
      );
      scrollThreadToBottom(submitKind);
      keepComposerReady({ behavior: 'smooth', preserveFocus: true });
      scheduleStatusClear();
      return true;
    } catch (err) {
      console.warn('ls submit failed', err);
      setComposerStatus(err.message || 'Submission failed', 'error');
      return false;
    } finally {
      submitInFlight = false;
      if (composerSend) composerSend.disabled = false;
      keepComposerReady({ behavior: 'smooth', preserveFocus: true });
    }
  }

  async function pollFeed() {
    try {
      const response = await fetch('{{ url_for('ls_portal_bp.api_feed') }}?view=chat', {cache: 'no-store'});
      if (!response.ok) return;
      const payload = await response.json();
      const sig = JSON.stringify([
        payload.state,
        (payload.messages || []).map((m) => [m.id, m.updated_at, m.task_status, m.last_error]),
        (payload.instant_messages || []).map((m) => [m.id, m.updated_at, m.last_error]),
        (payload.notifications || []).map((n) => [n.id, n.status, n.created_at]),
      ]);
      const stored = Number(localStorage.getItem('ls_last_notification_id') || '0');
      let latestId = stored;
      (payload.notifications || []).filter((n) => n.status === 'unread').forEach((n) => {
        const nid = Number(n.id || 0);
        if (nid > latestId) latestId = nid;
        if (nid > stored && 'Notification' in window && Notification.permission === 'granted') {
          const note = new Notification(n.title || 'Operator', { body: n.body || '', tag: `ls-${nid}` });
          note.onclick = () => window.focus();
        }
      });
      if (latestId > stored) localStorage.setItem('ls_last_notification_id', String(latestId));
      if (lastSig !== sig) {
        updateSummary(payload.state || {}, payload.notifications || []);
        renderThread(codexKind, payload.messages || []);
        renderThread(instantKind, payload.instant_messages || []);
      }
      lastSig = sig;
    } catch (err) {
      console.warn('ls feed poll failed', err);
    }
  }

  pollFeed();
  setInterval(pollFeed, 5000);
  compactExistingRenderedMessages();
  syncViewportState();

  Object.values(threadContainers).forEach((container) => {
    if (!container) return;
    container.addEventListener('scroll', () => {
      const activeContainer = getActiveThreadContainer();
      if (!activeContainer || container !== activeContainer) return;
      forceStickToBottom = activeContainer.scrollHeight - activeContainer.scrollTop - activeContainer.clientHeight < 80;
    }, { passive: true });
    container.addEventListener('click', async (event) => {
      const createActionButton = event.target.closest('[data-create-action]');
      if (createActionButton && composerInput) {
        const text = buildActionDraftFromContext(createActionButton.getAttribute('data-create-action'));
        putTextIntoActionComposer(text, 'Action draft ready.');
        return;
      }
      const copyToActionButton = event.target.closest('[data-copy-to-action]');
      if (copyToActionButton && composerInput) {
        const text = copyToActionButton.getAttribute('data-action-copy-text') || '';
        if (!text.trim()) return;
        putTextIntoActionComposer(text, 'Copied to Action.');
        return;
      }
      const responseCopyButton = event.target.closest('[data-copy-response]');
      if (responseCopyButton) {
        const text = responseCopyButton.getAttribute('data-copy-text') || '';
        if (!text) return;
        navigator.clipboard.writeText(text).then(() => {
          setComposerStatus('Response copied.', 'success');
          scheduleStatusClear(1200);
        }).catch(() => {
          setComposerStatus('Copy failed.', 'error');
          scheduleStatusClear(1800);
        });
        return;
      }
    });
    container.addEventListener('touchstart', (event) => {
      if (!event.touches || event.touches.length !== 1) return;
      swipeTracking = true;
      swipeStartX = event.touches[0].clientX;
      swipeStartY = event.touches[0].clientY;
    }, { passive: true });
    container.addEventListener('touchend', (event) => {
      if (!swipeTracking || !event.changedTouches || event.changedTouches.length !== 1) return;
      swipeTracking = false;
      const dx = event.changedTouches[0].clientX - swipeStartX;
      const dy = event.changedTouches[0].clientY - swipeStartY;
      if (Math.abs(dx) >= 70 && Math.abs(dx) > Math.abs(dy) * 1.25) {
        forceStickToBottom = true;
        toggleThreadBySwipe();
      }
    }, { passive: true });
    container.addEventListener('touchcancel', () => {
      swipeTracking = false;
    }, { passive: true });
  });

  if (composerInput) {
    ['input', 'change', 'keyup', 'paste', 'cut'].forEach((eventName) => {
      composerInput.addEventListener(eventName, updateComposerCount);
    });
    updateComposerCount();
  }

  if (composerCopy && composerInput) {
    composerCopy.addEventListener('click', async () => {
      if (!composerInput.value) return;
      try {
        await navigator.clipboard.writeText(composerInput.value);
        setComposerStatus('Copied.', 'success');
        scheduleStatusClear(1000);
      } catch (err) {
        setComposerStatus('Copy failed.', 'error');
      }
    });
  }

  if (composerClear && composerInput) {
    composerClear.addEventListener('click', () => {
      composerInput.value = '';
      updateComposerCount();
      focusComposer();
      setComposerStatus('Cleared.', 'success');
      scheduleStatusClear(800);
    });
  }

  ['pageshow', 'resize'].forEach((eventName) => {
    window.addEventListener(eventName, () => {
      syncViewportState();
      keepComposerReady();
    }, { passive: true });
  });
  window.addEventListener('focusin', () => {
    syncViewportState();
    keepComposerReady({ preserveFocus: document.activeElement === composerInput });
  });
  if (window.visualViewport) {
    ['resize', 'scroll'].forEach((eventName) => {
      window.visualViewport.addEventListener(eventName, () => {
        syncViewportState();
        keepComposerReady({ preserveFocus: document.activeElement === composerInput });
      }, { passive: true });
    });
  }

  [composerSend].forEach((button) => {
    if (!button) return;
    ['pointerdown', 'mousedown'].forEach((eventName) => {
      button.addEventListener(eventName, (event) => {
        if (submitInFlight) {
          event.preventDefault();
          return;
        }
        event.preventDefault();
        setPendingSubmitTarget(
          button.dataset.submitKind || activeThread || codexKind,
          button.dataset.submitUrl || submitUrls[activeThread] || submitUrls[codexKind],
        );
        setActiveThread(pendingSubmitKind, { behavior: 'auto' });
        keepComposerReady({ preserveFocus: true });
      }, { passive: false });
    });
    button.addEventListener('click', () => {
      setPendingSubmitTarget(
        button.dataset.submitKind || activeThread || codexKind,
        button.dataset.submitUrl || submitUrls[activeThread] || submitUrls[codexKind],
      );
    });
  });

  if (composerForm && composerInput && composerSend) {
    composerForm.addEventListener('submit', async (event) => {
      event.preventDefault();
      const submitter = event.submitter || composerSend;
      const submitKind = submitter.dataset.submitKind || pendingSubmitKind || codexKind;
      const submitUrl = submitter.dataset.submitUrl || pendingSubmitUrl || composerForm.action;
      const content = composerInput.value.trim();
      if (!content || submitInFlight) return;
      if (typeof submitter.blur === 'function') submitter.blur();
      focusComposer();
      await submitMessage({
        content,
        submitKind,
        submitUrl,
        clearComposer: true,
      });
    });
  }

  setPendingSubmitTarget(activeThread, submitUrls[activeThread]);
  applyThreadState();
  requestAnimationFrame(() => {
    scrollThreadToBottom(codexKind);
    scrollThreadToBottom(instantKind);
    setActiveThread(activeThread, { persist: false, behavior: 'auto' });
  });
</script>
{% endblock %}