{#
  Chat — the cold open, and a bound session (043 C6).

  Derived from docs/design/040/web/chat-cold-open.html and chat-read-only.html.
  ONE template, two states, decided by `is_new`:

    is_new   the hero, four starters, the composer. No model picker, no tool
             checkboxes, no max-steps slider — they move to Agent › Settings in
             phase 4, and the session request carries only the task.
    bound    the thread, live, drawn by static/app/transcript.js. It reads
             the session from document.body's data attributes, which is why no
             inline script is needed here.

  The read-only frame comes from shell.html and is stated ONCE there; all this
  page does is swap the composer for the sentence that says why it is off. The
  thread itself is a READ and renders on every posture.
#}
{% extends "shell.html" %}
{% block body_attrs %} data-session-id="{{ session_id or 'new' }}" data-is-new="{{ 'true' if is_new else 'false' }}" data-is-owner="{{ 'true' if is_owner else 'false' }}" data-is-authenticated="{{ 'true' if is_authenticated else 'false' }}" data-read-only="{{ 'true' if read_only else 'false' }}"{% endblock %}
{% block body %}
{%- if is_new %}
    <div class="open">
      <div class="face open-face" aria-hidden="true"></div>
      <h1 class="open-hero">{{ hero|safe }}</h1>
      <p class="open-sub">{{ t('chat.open.sub') }}</p>
{%- if not read_only %}
      {# A starter is a SHORTCUT INTO THE COMPOSER, and read-only has no
         composer — chat-open.js binds them only after it finds the form, so
         rendering them here shipped four buttons that did nothing. #}
      <div class="starters" role="group" aria-label="{{ t('chat.open.starters_label') }}">
{%- for starter in starters %}
        <button class="starter" type="button">{{ starter }}</button>
{%- endfor %}
      </div>
{%- endif %}
    </div>
{%- elif ownership_unknown %}
    {# ⚠️ The ownership PROBE failed — that is not "this session does not
       exist", which is what a 404 would have said. No thread either: the
       modules would bind to a session the check never cleared. #}
    <h1 class="vh">{{ t('chat.title') }}</h1>
    <div class="state">
      <div class="state-glyph" aria-hidden="true">{{ page_glyph }}</div>
      <p class="state-body">{{ t('chat.ownership_unknown') }}</p>
    </div>
{%- else %}
    <h1 class="vh">{{ t('chat.title') }}</h1>
    {# The Work pane sits BESIDE the thread — a disclosure, not a nav slot:
       what this chat MADE (Files, three tiers) beside what it DID (Timeline),
       both read-only. The two-column layout is the one inline declaration the
       schema (docs/design/040/web/chat-work-pane.html) carries; the CSP already
       has style-src 'unsafe-inline'. On a narrow screen the aside
       wraps below the thread. workpane.js fills it, or leaves the honest empty /
       unreadable state — it never blanks. #}
    <div style="display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap">
      <div class="thread" id="chat-messages" style="flex:1 1 360px;min-width:0"></div>
      <aside id="work-pane" style="flex:1 1 320px;min-width:0;max-width:420px">
        <div class="section">
          <div class="section-head">
            <h2 class="section-title">{{ t('workpane.files_title') }}</h2>
            <span class="section-aside">{{ t('workpane.files_aside') }}</span>
          </div>
          <div id="workpane-files"></div>
          <p class="state-body" id="workpane-files-state" hidden></p>
          <p class="entry-meta">{{ t('workpane.files_note') }}</p>
        </div>
        <div class="section">
          <div class="section-head">
            <h2 class="section-title">{{ t('workpane.timeline_title') }}</h2>
            <span class="section-aside" id="workpane-timeline-aside"></span>
          </div>
          <div id="workpane-timeline"></div>
          <p class="state-body" id="workpane-timeline-state" hidden></p>
          <p class="entry-meta">{{ t('workpane.timeline_note') }}</p>
        </div>
      </aside>
    </div>
    {# The words the running transcript says, crossing from the copy layer into
       transcript.js the same way chats.js reads #chats-copy — no 043 template
       carries an inline script. ⚠️ The names carry an UNDERSCORE, not a hyphen:
       `dataset` camel-cases a hyphen away, and the JS keys them as written. #}
    <div id="transcript-copy" data-history_unavailable="{{ t('chat.history_unavailable') }}" data-live_unavailable="{{ t('chat.live_unavailable') }}" data-action_unavailable="{{ t('chat.action_unavailable') }}" hidden
         data-stop="{{ t('chat.stop') }}"
         data-steer="{{ t('chat.steer') }}"
         data-receipt_working="{{ t('chat.receipt.working') }}"
         data-receipt_done="{{ t('chat.receipt.done') }}"
         data-receipt_stopped="{{ t('chat.receipt.stopped') }}"
         data-cost_unknown="{{ t('chat.receipt.cost_unknown') }}"
         data-act_did_work="{{ t('chat.act.did_work') }}"
         data-act_failed="{{ t('chat.act.failed') }}"
         data-live_at_agent="{{ t('chat.live_at_agent') }}"></div>
    {# The words the Work pane says, crossing from the copy layer into
       workpane.js the same way. ⚠️ Underscore, not hyphen: `dataset` camel-cases
       a hyphen away, and workpane.js keys them as written. The narrator's own
       fallback (chat.act.*) rides on #transcript-copy above; workpane.js merges
       both so the Timeline says the same name-free line the thread does. #}
    <div id="workpane-copy" hidden
         data-loading="{{ t('workpane.loading') }}"
         data-files_empty="{{ t('workpane.files_empty') }}"
         data-files_unreadable="{{ t('workpane.files_unreadable') }}"
         data-tier_ready="{{ t('workpane.tier_ready') }}"
         data-tier_ready_why="{{ t('workpane.tier_ready_why') }}"
         data-tier_working="{{ t('workpane.tier_working') }}"
         data-tier_working_why="{{ t('workpane.tier_working_why') }}"
         data-tier_given="{{ t('workpane.tier_given') }}"
         data-tier_given_why="{{ t('workpane.tier_given_why') }}"
         data-verdict_ok="{{ t('workpane.verdict_ok') }}"
         data-verdict_changed="{{ t('workpane.verdict_changed') }}"
         data-verdict_missing="{{ t('workpane.verdict_missing') }}"
         data-verdict_unknown="{{ t('workpane.verdict_unknown') }}"
         data-timeline_empty="{{ t('workpane.timeline_empty') }}"
         data-timeline_unreadable="{{ t('workpane.timeline_unreadable') }}"
         data-timeline_count="{{ t('workpane.timeline_count') }}"></div>
    <script src="/static/app/workpane.js" type="module"></script>
{%- endif %}

    <div class="composer-wrap">
{%- if ownership_unknown %}
      <p class="composer-note">{{ t('chat.ownership_unknown_note') }}</p>
{%- elif read_only %}
      {# The off state (schema: chat-read-only.html) — a dashed, dimmed
         composer that cannot be typed into. `style-src 'unsafe-inline'` is
         already the CSP. #}
      <div class="composer" style="opacity:.55;border-style:dashed">
        <p class="composer-input">{{ t('chat.read_only.composer') }}</p>
      </div>
      <p class="composer-note">{{ t('chat.read_only.note') }}</p>
      {# E14: an owner verb typed here is refused too. Before this the box said
         only that the console could not TALK, so `/pause` looked like a thing
         you could still do from a read-only seat. #}
      <p class="composer-note">{{ t('chat.read_only.verbs') }}</p>
{%- else %}
      <form class="composer" id="chat-composer" data-unreachable="{{ t('chat.action_unavailable') }}">
        <textarea class="composer-input" id="chat-input" rows="1"
                  aria-label="{{ t('chat.composer.label') }}"
                  placeholder="{{ t('chat.composer.placeholder') if is_new else t('chat.composer.placeholder_busy') }}"></textarea>
{%- if not is_new %}
        {# A24: the file picker the README has always described. The `accept=`
           is rendered from the ONE upload allowlist
           (core.surfaces.inbound_attachments), never hand-written here; the
           per-file cap and the MIME sniff are the endpoint's. It exists only
           on a BOUND session, because the upload route is session-scoped —
           the cold open has no folder to put a file in yet. #}
        {# ⚠️ `upload_accept` is a Jinja global installed by
           webview/template_globals.py::register, which `pages_new`'s OWN
           environment does not currently call — so the attribute is emitted
           only when the list is really there. An `accept=""` would tell the
           browser "any file", which is a claim about the allowlist, and a
           wrong one; an ABSENT accept claims nothing and the endpoint still
           refuses. #}
        <input type="file" id="chat-file"{% if upload_accept %} accept="{{ upload_accept }}"{% endif %} multiple hidden>
        <button class="btn btn-quiet" id="chat-attach" type="button"
                aria-label="{{ t('chat.attach') }}">{{ t('chat.attach') }}</button>
{%- endif %}
        <button class="send" id="chat-send-btn" type="submit"
                aria-label="{{ t('chat.send') }}">&#8593;</button>
      </form>
    <p id="chat-create-status" class="note" role="status"></p>
      <div id="chat-attached"></div>
      <p class="composer-note">{{ t('chat.composer.hint') }}</p>
{%- if not is_new %}
    <div id="attach-copy" hidden
         data-session_id="{{ session_id }}"
         data-attach="{{ t('chat.attach') }}"
         data-attach_sending="{{ t('chat.attach_sending') }}"
         data-attach_done="{{ t('chat.attach_done') }}"
         data-attach_failed="{{ t('chat.attach_failed') }}"
         data-attach_unreachable="{{ t('chat.attach_unreachable') }}"></div>
    <script src="/static/app/file-attach.js" type="module"></script>
{%- endif %}
{%- endif %}
    </div>
    <p class="sources">{{ t('chat.sources')|safe }}</p>
    {# Loaded on EVERY posture. The thread is a READ, and gating the script on
       read-only left /c/{id} permanently blank on the one posture prod runs —
       the composer is already absent above, and `data-read-only` is what keeps
       the imported session modules in look-only mode. #}
{%- if not ownership_unknown %}
    <script src="/static/app/chat-open.js" type="module"></script>
{%- endif %}
{% endblock %}