{% extends "_base.html" %}
{% block body_class %}page-wide{% endblock %}
{% block content %}
<script src="{{ url_for('static', filename='js/workspace.js') }}?v={{ asset_v }}"></script>
<div x-data="chatApp()"
     x-effect="document.body.classList.toggle('artifact-open', !!(artifact || filesOpen))">
  <div class="chat-head">
    <div class="chat-head-left">
      <template x-if="project">
        <a class="chat-crumb" :href="'/projects/' + project.id" x-text="project.name"></a>
      </template>
      <h1 class="chat-title">Chat</h1>
    </div>
    <div class="model-bar">
      <span class="model-dot" :class="'model-' + modelState()" aria-hidden="true"></span>
      <template x-if="!showCloud">
        <select class="model-select" x-model="localChoice" aria-label="Model">
          <option value="">Choose a model…</option>
          <template x-for="g in modelGroups()" :key="g.label">
            <optgroup :label="g.label">
              <template x-for="m in g.items" :key="m.path">
                <option :value="m.path" x-text="m.name" :selected="m.path === localChoice"></option>
              </template>
            </optgroup>
          </template>
        </select>
      </template>
      <template x-if="showCloud">
        <input type="text" class="model-select" x-model.trim="model" aria-label="Cloud model id"
               placeholder="provider/model-id" spellcheck="false">
      </template>
      <button type="button" class="btn btn-sm" x-show="needsLoad()" @click="loadModel()">Load</button>
      <span class="model-note" x-text="modelNote()" role="status"></span>
    </div>
    <div class="chat-head-actions">
      <span class="save-status" x-show="saveState" x-text="saveState === 'saving' ? 'Saving…' : (saveState === 'error' ? 'Not saved — will retry' : 'Saved')"
            :class="saveState === 'error' ? 'save-status-err' : ''"></span>
      <button type="button" class="btn btn-ghost" @click="toggleFiles()" :aria-pressed="filesOpen ? 'true' : 'false'">
        Files<span class="head-count" x-show="files.length" x-text="files.length"></span></button>
      <button type="button" class="btn btn-ghost" @click="resetThread()">New chat</button>
    </div>
  </div>

  <div class="chat-grid" style="display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr);"
       :style="{ gridTemplateColumns: (artifact || filesOpen)
                   ? 'minmax(0, 1fr) minmax(' + (filesOpen ? 340 : 520) + 'px, ' + (filesOpen ? 34 : 44) + '%)'
                   : 'minmax(0, 1fr)' }">
    <div class="chat-col" style="min-width: 0;">
      <details class="card chat-settings">
        <summary>
          <span>Options</span>
          <span class="chat-settings-summary">
            <span class="chip" x-show="showCloud">cloud API</span>
            <span class="chip" x-text="'T=' + temperature.toFixed(1)"></span>
            <span class="chip" x-text="'max=' + (maxTokens || 'auto')"></span>
            <span class="chip" x-show="enableThinking === 'auto'">reasoning: model default</span>
            <span class="chip chip-on" x-show="jsonMode !== 'off'">JSON</span>
            <span class="chip chip-on" x-show="chatInstructions.trim()">chat instructions</span>
            <template x-if="selectedAdapter">
              <span class="chip chip-on" style="font-family: var(--mono);"
                    x-text="'adapter: ' + adapterNameFor(selectedAdapter)"></span>
            </template>
          </span>
        </summary>
        <div class="chat-settings-grid">
          <div class="form-row opt-wide" style="margin: 0;">
            <label for="opt-instr">This chat's instructions</label>
            <textarea id="opt-instr" x-model="chatInstructions" rows="2" maxlength="20000"
                      placeholder="Only for this conversation. Your own instructions are in Settings, a project's on its page."></textarea>
          </div>
          <div class="form-row" style="margin: 0;">
            <label for="opt-project">Project</label>
            <select id="opt-project" @change="moveToProject($event.target.value || null)">
              <option value="" :selected="!project">No project</option>
              <template x-for="p in projects" :key="p.id">
                <option :value="p.id" x-text="p.name" :selected="project && project.id === p.id"></option>
              </template>
            </select>
          </div>
          <div class="form-row" style="margin: 0;">
            <label for="opt-source">Model source</label>
            <select id="opt-source" @change="showCloud = $event.target.value === 'cloud'">
              <option value="local" :selected="!showCloud">this Mac · optiq serve</option>
              <option value="cloud" :selected="showCloud">cloud API · OpenRouter, OpenAI-compatible</option>
            </select>
          </div>
          <template x-if="showCloud">
            <div class="opt-wide" style="display: grid; gap: 10px;">
              <div class="form-row" style="margin: 0;">
                <label>API base URL</label>
                <input type="text" x-model.trim="cloudBaseUrl"
                       placeholder="https://openrouter.ai/api/v1" autocomplete="off">
              </div>
              <div class="form-row" style="margin: 0;">
                <label>API key</label>
                <input type="password" x-model.trim="cloudApiKey"
                       placeholder="sk-or-v1-…" autocomplete="off" spellcheck="false">
              </div>
              <p style="margin: 0; font-size: 0.85em; opacity: 0.72;">
                Put the provider's model id (e.g. <code>qwen/qwen3.6-35b-a3b</code>) in the model box
                at the top. Your key stays in this browser and is sent only to your local OptiQ Lab,
                which proxies the request: chat and tools work the same as with a local model.
              </p>
            </div>
          </template>
          <div class="form-row" style="margin: 0;">
            <label>Temperature</label>
            <input type="number" step="0.1" min="0" max="2" x-model.number="temperature">
          </div>
          <div class="form-row" style="margin: 0;">
            <label for="opt-max">Max reply tokens</label>
            <input id="opt-max" type="number" min="1" max="32768" x-model.number="maxTokens" placeholder="auto">
          </div>
          <div class="form-row" style="margin: 0;">
            <label>Reasoning</label>
            <select x-model="enableThinking">
              <option value="off">off</option>
              <option value="on">on</option>
              <option value="auto">model default</option>
            </select>
          </div>
          <div class="form-row" style="margin: 0;">
            <label>JSON mode</label>
            <select x-model="jsonMode">
              <option value="off">off</option>
              <option value="object">on · any valid JSON</option>
              <option value="schema">on · match schema</option>
            </select>
          </div>
          <div class="form-row opt-wide" style="margin: 0;" x-show="jsonMode === 'schema'">
            <label>JSON schema</label>
            <textarea x-model="jsonSchema" rows="5" spellcheck="false"
              style="font-family: var(--mono); font-size: 12px;"
              placeholder='{"type":"object","properties":{"answer":{"type":"string"}},"required":["answer"]}'></textarea>
          </div>
          <div class="hint opt-wide" x-show="jsonMode !== 'off'"
               style="font-size: 11px; color: var(--mute); margin: -4px 0 0;">
            Constrains the decode to valid JSON via lm-format-enforcer. Tools are off while JSON mode is on.
          </div>
          <div class="form-row" style="margin: 0;">
            <label>Sandbox</label>
            <input type="text" :value="sandboxKind || 'detecting…'" disabled style="font-family: var(--mono); font-size: 12px;">
          </div>
          <div class="form-row" style="margin: 0;">
            <label>Python libraries</label>
            <input type="text" disabled style="font-family: var(--mono); font-size: 12px;"
                   :value="analysis ? (analysis.installing ? 'installing…' : (analysis.libraries.length ? analysis.libraries.join(', ') : 'standard library only')) : '…'">
          </div>
          <div class="hint opt-wide" x-show="sandboxKind === 'subprocess'"
               style="font-size: 11px; color: var(--warn, #b45309); margin: -4px 0 0;">
            No filesystem or network isolation on this machine: the python and terminal
            tools run as you. Install Docker or Podman to turn on the container sandbox.
          </div>
          <div class="hint opt-wide" x-show="sandboxKind === 'sandbox-exec'"
               style="font-size: 11px; margin: -4px 0 0;">
            Writes are confined to the chat's workspace and network is blocked, but
            <strong>reads are not restricted</strong>: tool code can read any file you
            can. Use the container sandbox for a stronger boundary.
          </div>
          <div class="form-row opt-wide" x-show="mcpTotal > 0 || mcpErrors.length > 0">
            <label>MCP tools</label>
            <div style="font-family: var(--mono); font-size: 12px; line-height: 1.6;">
              <template x-for="s in mcpServers" :key="s.name">
                <div>
                  <span x-text="s.name"></span>
                  <span style="opacity:.6"
                        x-text="' ' + s.tools + ' (' + s.read_only + ' read-only)'"></span>
                </div>
              </template>
              <template x-for="e in mcpErrors" :key="e">
                <div style="color: var(--warn, #b45309)" x-text="e"></div>
              </template>
            </div>
          </div>
          <div class="form-row" style="margin: 0;"
               x-show="mountedAdapters.length > 0">
            <label>LoRA adapter
              <span style="color: var(--mute); font-weight: normal;"
                    x-text="mountedAdapters.length > 1
                            ? ('— ' + mountedAdapters.length + ' mounted, switch per message')
                            : '— 1 mounted'"></span>
            </label>
            <select x-model="selectedAdapter">
              <option value="">base model (no adapter)</option>
              <template x-for="a in mountedAdapters" :key="a">
                <option :value="a" x-text="adapterNameFor(a)"></option>
              </template>
            </select>
          </div>
        </div>
      </details>

      <div class="thread-card">
        <div id="thread" class="thread">
          <template x-if="!modelServed && !_cloudActive() && messages.length === 0">
            <div class="thread-empty">
              <h3 x-text="modelState() === 'loading' ? 'Loading the model…' : 'No model loaded'"></h3>
              <template x-if="recommended && modelState() !== 'loading'">
                <div class="rec">
                  <button type="button" class="btn" @click="loadModel(recommended.repo_id)"
                          x-text="'Load ' + recommended.name"></button>
                  <div class="rec-why" x-text="recommended.cached
                       ? 'Suggested for a Mac with ' + recommended.ram_gb + ' GB. Already downloaded.'
                       : 'Suggested for a Mac with ' + recommended.ram_gb + ' GB. Downloads ' + recommended.size_gb + ' GB first.'"></div>
                </div>
              </template>
              <div class="thread-empty-sub">
                Or pick a model at the top, use a cloud API under Options, or
                <a href="{{ url_for('cluster.cluster_page') }}">shard a large model across Macs</a>.
              </div>
            </div>
          </template>
          <template x-if="(modelServed || _cloudActive()) && messages.length === 0">
            <div class="thread-empty">
              <h3 x-text="project ? 'New chat in ' + project.name : 'Start a conversation'"></h3>
              <div class="thread-empty-sub">
                <span class="try-label">Try</span>
                <button class="chip-btn" @click="$refs.attach.click()">a spreadsheet or PDF to analyse</button>
                <button class="chip-btn" @click="quick('What is 12345 * 67890? Use the python tool.')">a calculation</button>
                <button class="chip-btn" @click="quick('Search for the latest MLX release notes and summarize them.')">a web search</button>
                <button class="chip-btn" @click="deepResearch = true; $refs.composer.focus()">a deep research question</button>
              </div>
            </div>
          </template>
          <template x-for="(g, gi) in displayItems" :key="gi">
            <div>
              <template x-if="g.type === 'message'">
                <div class="msg" :class="'msg-' + g.m.role">
                  <div class="msg-role">
                    <span x-text="g.m.role"></span>
                    <span class="tok-rate" x-show="g.m.role === 'assistant' && g.m.tok_per_sec" x-text="g.m.tok_per_sec + ' tok/s'"></span>
                  </div>
                  <template x-if="g.m.research">
                    <div class="research-card">
                      <div class="research-head">
                        <span class="research-glyph" :class="!g.m.research.done && !g.m.research.error ? 'spin' : ''">🔬</span>
                        <span class="research-phase"
                              x-text="g.m.research.error ? ('stopped — ' + g.m.research.error) : g.m.research.phaseLabel"></span>
                      </div>
                      <template x-if="g.m.research.plan">
                        <details class="research-block">
                          <summary>Research plan</summary>
                          <div class="research-plan" x-html="renderBody(g.m.research.plan)"></div>
                        </details>
                      </template>
                      <template x-if="g.m.research.sources.length">
                        <details class="research-block" :open="!g.m.research.done">
                          <summary x-text="g.m.research.sources.length + ' source' + (g.m.research.sources.length === 1 ? '' : 's') + ' read'"></summary>
                          <template x-for="(s, si) in g.m.research.sources" :key="si">
                            <div class="research-src">
                              <span class="research-src-n" x-text="'[' + (si + 1) + ']'"></span>
                              <template x-if="!s.local">
                                <a :href="s.url" target="_blank" rel="noopener" x-text="s.title || s.url"></a>
                              </template>
                              <template x-if="s.local">
                                <span class="research-local"><span x-text="s.title"></span> <em>attached file</em></span>
                              </template>
                            </div>
                          </template>
                        </details>
                      </template>
                      <div class="research-stats">
                        <span x-show="g.m.research.searches.length"
                              x-text="g.m.research.searches.length + ' web search' + (g.m.research.searches.length === 1 ? '' : 'es')"></span>
                        <span x-show="g.m.research.repaired"
                              x-text="' · ' + g.m.research.repaired + ' citation' + (g.m.research.repaired === 1 ? '' : 's') + ' repaired'"></span>
                      </div>
                      <template x-if="g.m.research.done && g.m.research.report_html">
                        <button class="artifact-card" type="button" @click="openArtifact(g.m.research.report_html, g.m.research.report_md)"
                                :class="artifact === g.m.research.report_html ? 'artifact-card-open' : ''">
                          <span class="artifact-glyph">▶</span>
                          <span class="artifact-meta">
                            <span class="artifact-title">Research report</span>
                            <span class="artifact-sub">cited Markdown report · opens in the side panel</span>
                          </span>
                          <span class="artifact-run" x-text="artifact === g.m.research.report_html ? 'open' : 'Open'"></span>
                        </button>
                      </template>
                    </div>
                  </template>
                  <template x-if="messageImages(g.m.content).length">
                    <div class="msg-images">
                      <template x-for="(src, ii) in messageImages(g.m.content)" :key="ii">
                        <img :src="src" class="msg-image" alt="attached image">
                      </template>
                    </div>
                  </template>
                  <template x-if="g.m.content">
                    <div class="msg-body msg-md" x-html="renderBody(g.m.content)"></div>
                  </template>
                  <template x-if="g.m.role === 'assistant'">
                    <template x-for="(art, ai) in htmlArtifacts(g.m.content)" :key="ai">
                      <button class="artifact-card" type="button" @click="openArtifact(art)"
                              :class="artifact === art ? 'artifact-card-open' : ''">
                        <span class="artifact-glyph">▶</span>
                        <span class="artifact-meta">
                          <span class="artifact-title" x-text="artifactTitle(art)"></span>
                          <span class="artifact-sub">HTML page · runs sandboxed in the side panel</span>
                        </span>
                        <span class="artifact-run" x-text="artifact === art ? 'running' : 'Run'"></span>
                      </button>
                    </template>
                  </template>
                  <template x-if="g.m.sources && g.m.sources.length">
                    <details class="msg-sources" open>
                      <summary x-text="g.m.sources.length + ' source' + (g.m.sources.length > 1 ? 's' : '') + ' cited'"></summary>
                      <template x-for="s in g.m.sources" :key="s.n">
                        <div class="src-item">
                          <span class="src-n" x-text="'[' + s.n + ']'"></span>
                          <span class="src-file" x-text="s.source"></span>
                          <span class="src-prev" x-text="s.preview"></span>
                        </div>
                      </template>
                    </details>
                  </template>
                  <template x-if="g.m.role === 'assistant' && !g.m.content && g.m.reasoning">
                    <div class="msg-body" style="color: var(--mute); font-style: italic; font-size: 13px;">
                      Model spent all tokens reasoning and didn't reach the answer.
                      Open <strong>Model &amp; params</strong> above and set
                      <strong>Reasoning → off</strong>, or raise <strong>max_tokens</strong>.
                    </div>
                  </template>
                  <template x-if="g.m.reasoning">
                    <details class="msg-reasoning" :open="!g.m.content">
                      <summary x-text="g.m.content ? 'reasoning' : 'reasoning (only output)'"></summary>
                      <pre x-text="g.m.reasoning"></pre>
                    </details>
                  </template>
                </div>
              </template>
              <template x-if="g.type === 'tool-group'">
                <div class="msg msg-tool-group">
                  <template x-if="g.cards.length > 1">
                   <div>
                    <details class="tool-group-wrap" :open="g.expanded">
                      <summary>
                        <span class="tool-group-count" x-text="g.cards.length + ' tool calls'"></span>
                        <span class="tool-group-summary">
                          <template x-for="c in g.cards" :key="c.id"><span class="tool-chip" :class="'tool-' + c.name"><span class="tool-icon" x-text="toolIcon(c.name)"></span><span x-text="c.name"></span></span></template>
                        </span>
                      </summary>
                      <template x-for="c in g.cards" :key="c.id">
                        <div class="tool-card" :class="'tool-' + c.name">
                          <div class="tool-card-head">
                            <span class="tool-icon" x-text="toolIcon(c.name)"></span>
                            <span class="tool-name" x-text="c.name"></span>
                            <template x-if="c.healed">
                              <span class="chip chip-warn" title="Model emitted a malformed tool call; we healed it">healed</span>
                            </template>
                            <template x-if="c.duplicate">
                              <span class="chip chip-warn" title="Duplicate call; skipped re-execution">dedup</span>
                            </template>
                            <template x-if="c.retry_exhausted">
                              <span class="chip chip-err" title="This call kept failing; self-healing retry budget spent, not re-run">retry limit</span>
                            </template>
                            <template x-if="c.errored">
                              <span class="chip chip-err" title="Tool returned an error">error</span>
                            </template>
                            <span class="tool-elapsed" x-text="c.elapsed_sec != null ? c.elapsed_sec.toFixed(2) + 's' : ''"></span>
                          </div>
                          <details class="tool-args">
                            <summary>arguments</summary>
                            <pre x-text="JSON.stringify(c.arguments, null, 2)"></pre>
                          </details>
                          <template x-if="c.result != null">
                            <details class="tool-result" :open="g.expanded">
                              <summary>output</summary>
                              <pre x-text="c.result"></pre>
                            </details>
                          </template>
                          <template x-if="c.result == null">
                            <div class="tool-running">running…</div>
                          </template>
                          <template x-if="c.images && c.images.length">
                            <div class="tool-images">
                              <template x-for="img in c.images" :key="img.filename">
                                <figure class="tool-image">
                                  <img :src="'data:' + img.mime + ';base64,' + img.data_b64"
                                       :alt="img.filename">
                                  <figcaption x-text="img.filename"></figcaption>
                                </figure>
                              </template>
                            </div>
                          </template>
                          <template x-if="c.files && c.files.length">
                            <div class="tool-files">
                              <template x-for="f in c.files" :key="f.path">
                                <a class="tool-file" :href="OptiqFiles.url(workspaceKey(), f.path)" download title="Download">
                                  <span class="tool-file-ico" x-text="OptiqFiles.icon(f.path)"></span>
                                  <span class="tool-file-name" x-text="f.path"></span>
                                  <span class="tool-file-size" x-text="OptiqFiles.size(f.size)"></span>
                                </a>
                              </template>
                            </div>
                          </template>
                        </div>
                      </template>
                    </details>
                      <template x-if="groupFiles(g).length">
                        <div class="tool-files tool-files-group">
                          <span class="tool-files-label">Made:</span>
                          <template x-for="f in groupFiles(g)" :key="f.path">
                            <a class="tool-file" :href="OptiqFiles.url(workspaceKey(), f.path)" download title="Download">
                              <span class="tool-file-ico" x-text="OptiqFiles.icon(f.path)"></span>
                              <span class="tool-file-name" x-text="f.path"></span>
                              <span class="tool-file-size" x-text="OptiqFiles.size(f.size)"></span>
                            </a>
                          </template>
                        </div>
                      </template>
                   </div>
                  </template>
                  <template x-if="g.cards.length === 1">
                    <template x-for="c in g.cards" :key="c.id">
                      <div class="tool-card" :class="'tool-' + c.name">
                        <div class="tool-card-head">
                          <span class="tool-icon" x-text="toolIcon(c.name)"></span>
                          <span class="tool-name" x-text="c.name"></span>
                          <template x-if="c.healed">
                            <span class="chip chip-warn" title="Model emitted a malformed tool call; we healed it">healed</span>
                          </template>
                          <template x-if="c.duplicate">
                            <span class="chip chip-warn" title="Duplicate call; skipped re-execution">dedup</span>
                          </template>
                          <template x-if="c.errored">
                            <span class="chip chip-err" title="Tool returned an error">error</span>
                          </template>
                          <span class="tool-elapsed" x-text="c.elapsed_sec != null ? c.elapsed_sec.toFixed(2) + 's' : ''"></span>
                        </div>
                        <details class="tool-args">
                          <summary>arguments</summary>
                          <pre x-text="JSON.stringify(c.arguments, null, 2)"></pre>
                        </details>
                        <template x-if="c.result != null">
                          <details class="tool-result" :open="g.expanded">
                            <summary>output</summary>
                            <pre x-text="c.result"></pre>
                          </details>
                        </template>
                        <template x-if="c.result == null">
                          <div class="tool-running">running…</div>
                        </template>
                        <template x-if="c.images && c.images.length">
                          <div class="tool-images">
                            <template x-for="img in c.images" :key="img.filename">
                              <figure class="tool-image">
                                <img :src="'data:' + img.mime + ';base64,' + img.data_b64"
                                     :alt="img.filename">
                                <figcaption x-text="img.filename"></figcaption>
                              </figure>
                            </template>
                          </div>
                        </template>
                        <template x-if="c.files && c.files.length">
                          <div class="tool-files">
                            <template x-for="f in c.files" :key="f.path">
                              <a class="tool-file" :href="OptiqFiles.url(workspaceKey(), f.path)" download title="Download">
                                <span class="tool-file-ico" x-text="OptiqFiles.icon(f.path)"></span>
                                <span class="tool-file-name" x-text="f.path"></span>
                                <span class="tool-file-size" x-text="OptiqFiles.size(f.size)"></span>
                              </a>
                            </template>
                          </div>
                        </template>
                      </div>
                    </template>
                  </template>
                </div>
              </template>
            </div>
          </template>
          <template x-if="streaming">
            <div class="msg msg-assistant">
              <div class="msg-role">
                assistant
                <span class="thinking-dot"></span>
                <span class="tok-rate" x-show="tokPerSec" x-text="tokPerSec + ' tok/s'"></span>
              </div>
              <template x-if="partial">
                <div class="msg-body msg-md" x-html="renderBody(partial)"></div>
              </template>
              <template x-if="!partial && lastEventLabel">
                <div class="msg-body" style="color: var(--mute); font-style: italic;" x-text="lastEventLabel"></div>
              </template>
            </div>
          </template>
        </div>

        <form @submit.prevent="send()" class="composer">
          <template x-if="codeNeedsSetup()">
            <div class="composer-note" role="status">
              <span x-text="analysis && analysis.installing
                ? 'Setting up data analysis… pandas and matplotlib will be available when this finishes.'
                : 'Python has no pandas or charts yet, so spreadsheets and plots are limited.'"></span>
              <template x-if="!(analysis && analysis.installing)">
                <span><button type="button" class="link-btn" @click="setupAnalysis()">Set up data analysis (about 300 MB)</button>
                  <button type="button" class="link-btn" @click="analysisDismissed = true">Not now</button></span>
              </template>
            </div>
          </template>
          <template x-if="uploads().length || (project && projectUploads())">
            <div class="composer-docs">
              <template x-if="!project">
                <template x-for="f in uploads()" :key="f.path">
                  <span class="composer-doc" :title="f.path + ' · ' + OptiqFiles.size(f.size)">
                    <span x-text="OptiqFiles.icon(f.path)"></span> <span x-text="f.path"></span>
                    <button type="button" class="composer-thumb-x" @click="removeFile(f.path)" :aria-label="'Remove ' + f.path">×</button>
                  </span>
                </template>
              </template>
              <template x-if="project">
                <a class="composer-doc" :href="'/projects/' + project.id + '?tab=files'"
                   x-text="projectUploads() + ' project file' + (projectUploads() === 1 ? '' : 's')"></a>
              </template>
              <span class="composer-doc-hint">searched for every question; the tools can open them whole</span>
            </div>
          </template>
          <div class="composer-row">
            <textarea x-model="input" x-ref="composer"
                      :disabled="streaming"
                      @keydown.enter.prevent="if (!$event.shiftKey) send()"
                      :placeholder="deepResearch ? 'Ask a research question. ⏎ to start.' : 'Message the model. ⏎ to send, ⇧⏎ for a new line.'"
                      rows="1"
                      x-init="autosize($el)"
                      @input="autosize($el)"
                      class="composer-input"></textarea>
            <template x-if="!streaming">
              <button class="btn btn-send" type="submit" :disabled="!input.trim() && !pendingImages.length" title="Send" aria-label="Send">↑</button>
            </template>
            <template x-if="streaming">
              <button class="btn btn-stop" type="button" @click="stop()" title="Stop" aria-label="Stop">■</button>
            </template>
          </div>
          <template x-if="pendingImages.length">
            <div class="composer-thumbs">
              <template x-for="(im, ii) in pendingImages" :key="ii">
                <span class="composer-thumb">
                  <img :src="im.url" :alt="im.name">
                  <button type="button" class="composer-thumb-x" @click="pendingImages.splice(ii, 1)" title="Remove">×</button>
                </span>
              </template>
            </div>
          </template>
          <div class="composer-bar">
            <label class="tog" title="Attach files: spreadsheets, PDFs, documents, images or a video">
              <input type="file" multiple x-ref="attach" @change="attachFile($event)"
                     accept=".txt,.md,.py,.json,.jsonl,.yaml,.yml,.csv,.tsv,.sql,.xml,.html,.css,.js,.ts,.tsx,.jsx,.go,.rs,.toml,.ini,.sh,.log,.pdf,.docx,.xlsx,.pptx,.parquet,.sqlite,.db,.zip,.png,.jpg,.jpeg,.gif,.webp,.bmp,image/*,.mp4,.mov,.webm,.m4v,video/*">
              <span>Attach</span>
            </label>
            <span class="tog-sep" aria-hidden="true"></span>
            <button type="button" class="tog" :aria-pressed="enableThinking === 'on' ? 'true' : 'false'"
                    @click="enableThinking = enableThinking === 'on' ? 'off' : 'on'"
                    title="Let the model reason before it answers">Thinking</button>
            <button type="button" class="tog" :aria-pressed="toolWeb ? 'true' : 'false'" :disabled="deepResearch"
                    @click="toolWeb = !toolWeb" title="Search the web and read pages">Web</button>
            <button type="button" class="tog" :aria-pressed="toolCode ? 'true' : 'false'" :disabled="deepResearch"
                    @click="toolCode = !toolCode" title="Run Python and shell commands in the sandbox">Code</button>
            <button type="button" class="tog tog-dr" :aria-pressed="deepResearch ? 'true' : 'false'"
                    @click="deepResearch = !deepResearch"
                    title="Plan, search the web and your files, and write a cited report">Deep research</button>
            <select class="tog-select" x-show="deepResearch" x-model="researchDepth" aria-label="Research depth">
              <option value="quick">Quick · 1 round</option>
              <option value="standard">Standard · 3 rounds</option>
              <option value="deep">Deep · 4 rounds</option>
            </select>
            <span class="composer-status" x-text="streaming ? '' : (attachStatus || '')"></span>
          </div>
        </form>
      </div>
    </div>

    <aside class="artifact-pane" x-show="artifact || filesOpen" x-cloak>
      <template x-if="filesOpen">
        <div class="pane-inner">
          <div class="artifact-head">
            <span class="artifact-name">Files</span>
            <span class="artifact-tag" x-text="project ? 'shared by every chat in ' + project.name : 'this chat'"></span>
            <span class="artifact-tools">
              <label class="canvas-btn">Upload<input type="file" multiple hidden @change="attachFile($event)"></label>
              <button class="canvas-btn" type="button" @click="filesOpen = false" aria-label="Close files">&#10005;</button>
            </span>
          </div>
          <div class="files-body">
            <template x-if="!files.length">
              <p class="files-empty">Nothing here yet. Attach a file, or ask for a chart or a table:
                whatever the tools save lands here, ready to download.</p>
            </template>
            <template x-for="f in files" :key="f.path">
              <div class="file-row">
                <template x-if="/\.(png|jpe?g|gif|webp)$/i.test(f.path)">
                  <img class="file-thumb" :src="OptiqFiles.url(workspaceKey(), f.path, true) + '&t=' + f.mtime" alt="">
                </template>
                <template x-if="!/\.(png|jpe?g|gif|webp)$/i.test(f.path)">
                  <span class="file-ico" x-text="OptiqFiles.icon(f.path)"></span>
                </template>
                <span class="file-meta">
                  <a :href="OptiqFiles.url(workspaceKey(), f.path)" download x-text="f.path"></a>
                  <span class="file-sub" x-text="OptiqFiles.size(f.size) + ' · ' + (f.uploaded ? 'uploaded ' : 'made ') + OptiqFiles.when(f.mtime)"></span>
                </span>
                <template x-if="confirmingFile !== f.path">
                  <button type="button" class="link-btn" @click="confirmingFile = f.path" :aria-label="'Delete ' + f.path">Delete</button>
                </template>
                <template x-if="confirmingFile === f.path">
                  <span class="file-confirm"><button type="button" class="link-btn link-danger" @click="removeFile(f.path)">Delete</button><button type="button" class="link-btn" @click="confirmingFile = null">Keep</button></span>
                </template>
              </div>
            </template>
          </div>
          <div class="artifact-foot" x-text="filesStatus || 'Files the tools write show up here as they are made.'"></div>
        </div>
      </template>
      <template x-if="!filesOpen && artifact">
        <div class="pane-inner">
          <div class="artifact-head">
            <span class="artifact-live"></span>
            <span class="artifact-name" x-text="artifactTitle(artifact)"></span>
            <span class="artifact-tag" x-text="artifactMd ? 'cited report' : 'sandboxed · runs live'"></span>
            <span class="artifact-tools">
              <button class="canvas-btn" type="button" x-show="!artifactMd" @click="restartArtifact()" title="Restart">&#8635; restart</button>
              <button class="canvas-btn" type="button" @click="artifactSource = !artifactSource"
                      x-text="artifactSource ? 'preview' : 'source'"></button>
              <button class="canvas-btn" type="button" @click="downloadArtifact()"
                      :title="artifactMd ? 'Download the report as Markdown' : 'Download the page as HTML'"
                      x-text="artifactMd ? '&#8595; .md' : '&#8595; .html'"></button>
              <button class="canvas-btn" type="button" @click="closeArtifact()" title="Close">&#10005;</button>
            </span>
          </div>
          <!-- Gate on `artifact` as well: without it the iframe is constructed (with a
               null srcdoc) before anything is ever run, and closing the panel leaves
               it behind. Nothing should exist until the reader clicks Run. -->
          <template x-if="artifact && !artifactSource">
            <iframe class="artifact-frame" sandbox="allow-scripts" :srcdoc="artifact"
                    :key="artifactNonce"></iframe>
          </template>
          <template x-if="artifact && artifactSource">
            <pre class="artifact-source" x-text="artifactMd || artifact"></pre>
          </template>
          <div class="artifact-foot">Click the panel, then use the keyboard — the page has focus.</div>
        </div>
      </template>
    </aside>

  </div>
</div>

<style>
.save-status { font-size: 12px; color: var(--mute); align-self: center; font-family: var(--mono); }
.save-status-err { color: var(--err); }
/* ── Header: where you are, which model, what's in the workspace ──────── */
.chat-head { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.chat-head-left { display: flex; flex-direction: column; min-width: 0; }
.chat-crumb { font-size: 12.5px; color: var(--mute); }
.chat-title { font-family: var(--display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; margin: 0; line-height: 1.1;
              font-variation-settings: "opsz" 40, "wdth" 94; }
.model-bar { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; min-width: 0; }
.model-select { flex: 0 1 380px; min-width: 0; font: inherit; font-size: 13.5px; padding: 7px 10px;
                border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); }
.model-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.model-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--mute-2); }
.model-ready { background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.model-loading { background: var(--accent-2); animation: pulse 1.1s ease-in-out infinite; }
.model-error { background: var(--err); }
.model-note { font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.chat-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.head-count { font-family: var(--mono); font-size: 11px; background: var(--paper-3); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.chat-head-actions .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.opt-wide { grid-column: 1 / -1; }
.rec { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 14px; }
.rec-why { font-size: 13px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .model-loading { animation: none; } }
/* ── Settings card ──────────────────────────────────────────────────── */
.chat-settings { padding: 10px 16px; margin-bottom: 16px; }
.chat-settings > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
  list-style: none;
}
.chat-settings > summary::-webkit-details-marker { display: none; }
.chat-settings > summary::before {
  content: "›";
  font-family: var(--mono);
  color: var(--mute);
  transition: transform 120ms ease;
}
.chat-settings[open] > summary::before { transform: rotate(90deg); }
.chat-settings-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-settings-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
}
.chip-on { background: var(--accent-soft); color: var(--accent); }
.chip-off { background: var(--paper-3); color: var(--mute); }
.chip-warn { background: #f8e6c8; color: var(--warn); }
.chip-btn {
  display: inline;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  padding: 1px 10px;
  cursor: pointer;
  margin: 1px 2px;
}
.chip-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }

/* ── Thread ─────────────────────────────────────────────────────────── */
.thread-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  /* Take whatever the column has left after the settings card, so the
     conversation fills the window and the composer stays on screen. */
  flex: 1 1 auto;
  min-height: 300px;
}
.chat-col {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
  min-height: 520px;
}
.chat-col > .chat-settings { flex: none; max-height: 48vh; overflow-y: auto; }
@media (max-width: 600px) {
  .chat-head { gap: 10px; }
  .model-bar { flex: 1 1 100%; order: 3; }
  .model-select { flex: 1 1 auto; }
  .model-note { display: none; }
  .chat-head-actions .save-status { display: none; }
  .thread { padding: 4px 14px; }
  .composer { padding: 12px 12px 14px; }
  .composer-doc-hint { display: none; }
  .tog { padding: 6px 10px; }
  .tog-sep { display: none; }
}
@media (max-width: 900px) {
  .chat-col { height: auto; }
  /* The page scrolls instead of the thread here, so the message box stays
     pinned to the bottom of the screen rather than scrolling away. */
  .composer { position: sticky; bottom: 0; z-index: 5; background: var(--paper);
              border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 -6px 16px rgba(14,20,22,.06); }
  /* Stacked under the chat, the side pane sizes to its content. */
  .artifact-pane { position: static; height: auto; min-height: 0; max-height: 75vh; }
  .files-body { max-height: 50vh; }
  .thread-card { min-height: 60vh; }
}
.thread {
  padding: 6px 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  min-width: 0;
}
.thread-empty { text-align: center; padding: 56px 24px; color: var(--mute); }
.thread-empty h3 { font-family: var(--display); font-weight: 500; color: var(--ink-2); margin: 0 0 12px; }
.thread-empty-sub { font-size: 14px; line-height: 1.8; }
.thread-empty-sub:has(.chip-btn) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.try-label { margin-right: 2px; }
.msg {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  min-width: 0;
}
.msg:last-child { border-bottom: none; }
.msg-role {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-user .msg-role { color: var(--accent); }
.msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
/* Background and colour come from lab.css (dark block, light text). Redeclaring
   the background here at equal specificity flipped it back to light --code-bg
   while the light colour survived: cream text on cream, contrast 1.0:1. */
/* Rendered Markdown is HTML: marked leaves a newline between block tags
   (<ul>\n<li>), and pre-wrap drew each one as a blank line -- a gap under
   every list item, several after a nested list. Line breaks inside a
   paragraph already arrive as <br> (breaks: true). */
.msg-body.msg-md { white-space: normal; }
.msg-body pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
  min-width: 0;
}
.msg-body code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; word-break: break-all; }
.msg-body p { margin: 0 0 10px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body h1, .msg-body h2, .msg-body h3 { font-family: var(--display); margin: 14px 0 6px; line-height: 1.3; }
.msg-body h1 { font-size: 20px; }
.msg-body h2 { font-size: 17px; }
.msg-body h3 { font-size: 15px; }
.msg-body ul, .msg-body ol { margin: 6px 0 10px; padding-left: 22px; }
.msg-body li { margin: 3px 0; }
.msg-body blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--rule); color: var(--ink-2); }
.msg-body table { border-collapse: collapse; margin: 8px 0; }
.msg-body th, .msg-body td { border: 1px solid var(--rule); padding: 4px 8px; }
.msg-body a { color: var(--accent); }
.msg-reasoning { margin-top: 8px; font-size: 12px; color: var(--mute); min-width: 0; }
.msg-reasoning pre { background: var(--paper-2); padding: 8px 10px; border-radius: 4px; overflow-x: auto; max-width: 100%; }
.thinking-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ── Tool cards ─────────────────────────────────────────────────────── */
.tool-card {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 13px;
  min-width: 0;
}
.tool-web_search { border-left-color: #2c6cb9; }
.tool-python { border-left-color: #FF9500; }
.tool-terminal { border-left-color: #6b3f9c; }
.tool-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
}
.tool-icon { font-size: 14px; }
.tool-name { font-weight: 600; color: var(--ink-2); }
.tool-elapsed { color: var(--mute); margin-left: auto; }
.tok-rate { margin-left: 8px; font-size: 0.72rem; font-weight: 600; color: var(--accent, #9c5700); letter-spacing: 0.02em; }
.tool-args, .tool-result { margin-top: 4px; }
.tool-args summary, .tool-result summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.04em;
  list-style: none;
}
.tool-args summary::-webkit-details-marker, .tool-result summary::-webkit-details-marker { display: none; }
.tool-args summary::before, .tool-result summary::before { content: "›"; margin-right: 4px; color: var(--mute); }
.tool-args[open] summary::before, .tool-result[open] summary::before { content: "⌄"; }
.tool-args pre, .tool-result pre {
  /* lab.css gives every <pre> a dark block with light text; this card swaps
     the background back to light, so the text colour has to follow or the
     output is paper-on-paper and invisible. */
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-soft);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 4px;
  max-height: 280px;
  overflow: auto;
}
.tool-running {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 4px;
}
.tool-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* User-attached image thumbnails (inside a message bubble) */
.msg-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.msg-image {
  max-width: 220px; max-height: 220px; border-radius: 8px;
  border: 1px solid var(--line); object-fit: cover;
}
/* Composer attach previews (pending, before send) */
.composer-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; }
.composer-thumb { position: relative; display: inline-block; }
.composer-thumb img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
}
.composer-thumb-x {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; line-height: 16px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); cursor: pointer; font-size: 12px;
}
.tool-image {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: 6px;
  max-width: 100%;
}
.tool-image img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  border-radius: var(--r-sm);
}
.tool-image figcaption {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
}
.chip-err { background: #f5d1d1; color: var(--err); }

/* Adjacent-tool-call group accordion */
.msg-tool-group { padding: 6px 0 14px; border-bottom: 1px solid var(--rule-soft); }
.tool-group-wrap > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.tool-group-wrap > summary::-webkit-details-marker { display: none; }
.tool-group-wrap > summary::before {
  content: "›";
  color: var(--mute);
  transition: transform 120ms ease;
}
.tool-group-wrap[open] > summary::before { transform: rotate(90deg); }
.tool-group-count { font-weight: 600; }
.tool-group-summary { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-size: 11px;
}
.tool-chip.tool-web_search { border-color: #b9d0e8; color: #2c6cb9; }
.tool-chip.tool-python     { border-color: var(--accent-soft); color: var(--accent); }
.tool-chip.tool-terminal   { border-color: #d9c5ee; color: #6b3f9c; }
.tool-group-wrap[open] > summary { margin-bottom: 8px; }
.tool-group-wrap .tool-card { margin-top: 8px; }

/* ── Composer ───────────────────────────────────────────────────────── */
.composer {
  border-top: 1px solid var(--rule-soft);
  padding: 14px 20px 16px;
}
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.4;
  min-height: 38px;
  max-height: 280px;
  color: var(--ink);
}
.composer-input:focus { outline: none; border-color: var(--accent); }
.btn-send, .btn-stop {
  height: 40px;              /* the composer's one-line height, so they line up */
  padding: 0 16px;
  font-size: 16px;
  border-radius: var(--r-md);
  flex: none;
}
.btn-stop {
  background: var(--err);
  border-color: var(--err);
  color: white;
}
.btn-stop:hover { background: #921313; border-color: #921313; }
.composer-status { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-left: 6px; }

/* Composer toggles: what this message may use. A pressed toggle reads as on
   from its fill, not only its colour. */
.composer-bar { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tog {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 12.5px; line-height: 1; padding: 6px 11px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); color: var(--ink-2);
  transition: background .12s, border-color .12s, color .12s;
}
.tog input { display: none; }
.tog:hover { border-color: var(--accent); color: var(--ink); }
.tog[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tog[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tog:disabled { opacity: .45; cursor: not-allowed; }
.tog:focus-visible, .tog:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tog-sep { width: 1px; height: 18px; background: var(--rule); margin: 0 4px; }
.tog-select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--accent); border-radius: 999px; background: var(--paper-2); color: var(--accent); }
.composer-note {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font-size: 12.5px; color: var(--ink-2); background: var(--accent-soft);
  border-radius: var(--r-md); padding: 7px 10px; margin-bottom: 10px;
}

/* Deep Research trace card */
.research-card {
  border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--paper-2, #f7f5f0); padding: 12px 14px; margin: 4px 0 2px;
  display: flex; flex-direction: column; gap: 8px;
}
.research-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.research-glyph { font-size: 14px; }
.research-glyph.spin { animation: research-pulse 1.1s ease-in-out infinite; }
@keyframes research-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .research-glyph.spin { animation: none; } }
.research-phase { color: var(--ink, #1a1a17); }
.research-block { font-size: 12.5px; }
.research-block > summary { cursor: pointer; color: var(--mute); font-family: var(--mono); font-size: 11px; padding: 2px 0; }
.research-plan { margin: 4px 0 2px; font-size: 13px; color: #333; }
.research-src { display: flex; gap: 6px; padding: 2px 0; font-size: 12.5px; line-height: 1.45; }
.research-src-n { color: var(--accent); font-family: var(--mono); font-size: 11px; flex: none; }
.research-src a { color: #333; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.research-src a:hover { color: var(--accent); text-decoration: underline; }
.research-stats { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.research-stats:empty { display: none; }

#thread { min-width: 0; }

/* Canvas: live render of an HTML artifact in a sandboxed iframe. */
/* Run card in the transcript */
.artifact-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 12px; padding: 10px 14px; text-align: left; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-md, 10px); font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.artifact-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(20,19,17,.06); }
.artifact-card-open { border-color: var(--accent); background: var(--paper); }
.artifact-glyph {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px;
}
.artifact-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.artifact-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-sub { font-size: 11px; color: var(--mute); }
.artifact-run {
  flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px;
}

/* Right-hand artifact panel */
.artifact-pane {
  position: sticky; top: 16px; align-self: start;
  display: flex; flex-direction: column;
  height: calc(100vh - 150px); min-height: 420px; max-height: 900px;
  border: 1px solid var(--rule); border-radius: var(--r-lg, 14px);
  background: var(--paper); overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,19,17,.05), 0 12px 34px rgba(20,19,17,.09);
}
/* Chat already has the wide shell (page-wide); an open artifact uses all of it. */
body.artifact-open .app-main { max-width: 1560px; }

.artifact-head {
  display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap;
  padding: 9px 12px; background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px;
}
.artifact-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.artifact-name {
  font-weight: 600; font-size: 12px; font-family: var(--sans, inherit);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
}
.artifact-tag { color: var(--mute); font-size: 10px; white-space: nowrap; flex: none; }
.artifact-tools { margin-left: auto; display: flex; gap: 6px; flex: none; }
.artifact-frame { flex: 1; width: 100%; border: 0; background: #fff; display: block; }
.artifact-source {
  flex: 1; margin: 0; overflow: auto; white-space: pre; font-size: 11px;
  background: var(--ink); color: var(--paper); padding: 14px 16px;
}
.artifact-foot {
  flex: none; padding: 6px 12px; font-size: 10.5px; color: var(--mute);
  border-top: 1px solid var(--rule-soft); background: var(--paper-2);
}
[x-cloak] { display: none !important; }

.canvas-pane { margin-top: 10px; border: 1px solid var(--line, #ddd); border-radius: var(--r-sm, 6px); overflow: hidden; }
.canvas-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: var(--paper-2, #f4f2ee); font-size: 12px; font-weight: 600; }
.canvas-tag { font-weight: 400; color: var(--mute); font-family: var(--mono); font-size: 10px; }
.canvas-frame { width: 100%; height: 320px; border: 0; background: #fff; display: block; }
.canvas-code-wrap { padding: 6px 10px; font-size: 12px; }
.canvas-code { white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; font-family: var(--mono); font-size: 11px; }

/* Files the tools wrote, offered under the call that made them. */
.tool-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tool-file { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px;
             padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); }
.tool-file:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.tool-file-size { color: var(--mute); }
.tool-files-group { align-items: center; margin: 8px 0 0; }
.tool-files-label { font-size: 12px; color: var(--mute); }
.research-local em { color: var(--mute); font-style: normal; font-size: 11px; margin-left: 4px; }

/* Side pane: Files, or a running artifact. */
.pane-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.files-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.files-empty { color: var(--mute); font-size: 13px; padding: 18px 16px; margin: 0; line-height: 1.6; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--rule-soft); }
.file-row:hover { background: var(--paper-2); }
.file-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule-soft); flex: none; background: #fff; }
.file-ico { width: 40px; text-align: center; color: var(--mute); flex: none; font-size: 18px; }
.file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-meta a { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta a:hover { color: var(--accent); }
.file-sub { font-size: 11px; color: var(--mute); font-family: var(--mono); }
.file-confirm { display: inline-flex; gap: 2px; }

/* Chat-with-files: attached document chips + citation sources panel. */
.composer-docs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.composer-doc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--paper-2, #f4f2ee); border: 1px solid var(--rule); border-radius: var(--r-sm, 6px); padding: 2px 8px; color: var(--ink-2); }
.composer-doc .composer-thumb-x { position: static; width: 16px; height: 16px; line-height: 14px; margin-left: 2px; }
.composer-doc-hint { font-size: 11px; color: var(--mute); }
.msg-sources { margin-top: 8px; font-size: 12px; border-top: 1px dashed var(--line, #ddd); padding-top: 6px; }
.msg-sources summary { cursor: pointer; color: var(--mute); }
.src-item { display: flex; gap: 6px; padding: 3px 0; align-items: baseline; }
.src-n { font-weight: 700; color: var(--accent, #9c5700); }
.src-file { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.src-prev { color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
</style>

<script>
document.addEventListener('alpine:init', () => Alpine.store('chatNav', { app: null }));

function chatApp() {
  return {
    id: null,
    saveState: '',          // '' | 'saving' | 'saved' | 'error'
    // The cloud model id. A local server serves whatever it loaded, so local
    // requests name `servedModel` (or Boost) instead -- see _requestModel().
    model: (localStorage.getItem('optiq.chat.source') !== 'local' && localStorage.getItem('optiq.chat.cloudBaseUrl')
            && localStorage.getItem('optiq.chat.cloudModel')) || '',
    temperature: 0.7,
    maxTokens: '',          // '' = auto: the room left in the model's window
    enableThinking: localStorage.getItem('optiq.chat.thinking') || 'off',
    // Which tools a message may use. "Tools on" is both groups.
    toolWeb: localStorage.getItem('optiq.chat.toolWeb') !== '0',
    toolCode: localStorage.getItem('optiq.chat.toolCode') !== '0',
    get toolsEnabled() { return this.toolWeb || this.toolCode; },
    set toolsEnabled(v) { this.toolWeb = !!v; this.toolCode = !!v; },
    deepResearch: localStorage.getItem('optiq.chat.deepResearch') === '1',
    researchDepth: localStorage.getItem('optiq.chat.researchDepth') || 'standard',
    chatInstructions: '',   // this conversation's own, saved with it
    // Projects: the open chat's project (null = none), every project, and
    // whose chats the sidebar lists ('all', 'none' or a project id).
    project: {{ project | tojson }},
    projects: {{ projects | tojson }},
    scope: {{ (project.id if project else 'all') | tojson }},
    // Models this Mac can load, the one picked, and the server's state.
    models: {{ model_picker | tojson }},
    BOOST: {{ boost_model | tojson }},
    localChoice: '',
    apiStatus: '',
    apiError: '',
    recommended: null,
    // The workspace: uploads and whatever the tools wrote.
    files: [],
    filesOpen: false,
    filesStatus: '',
    confirmingFile: null,
    analysis: null,
    analysisDismissed: false,
    jsonMode: 'off',        // off | object | schema
    jsonSchema: '',
    // LoRA adapter selection — populated from /api/status.adapters. Empty
    // string = no adapter active (run base model). Otherwise it's a path
    // string; the request body sends the basename as the 'adapters' field.
    mountedAdapters: [],
    selectedAdapter: localStorage.getItem('optiq.chat.adapter') || '',
    // Cloud / third-party OpenAI-compatible endpoint (OpenRouter, etc.). When a
    // base URL is set, the backend proxies chat there with the user's own key,
    // and the model field holds that provider's model id (e.g. qwen/qwen3.6-35b-a3b).
    // The key lives only in this browser's localStorage.
    cloudBaseUrl: localStorage.getItem('optiq.chat.cloudBaseUrl') || '',
    cloudApiKey: localStorage.getItem('optiq.chat.cloudApiKey') || '',
    showCloud: localStorage.getItem('optiq.chat.source') === 'cloud'
      || (localStorage.getItem('optiq.chat.source') === null && !!localStorage.getItem('optiq.chat.cloudBaseUrl')),
    sandboxKind: '',
    mcpServers: [],
    mcpTotal: 0,
    mcpErrors: [],
    messages: [],
    input: '',
    streaming: false,
    tokPerSec: null,
    artifact: null,          // html of the page currently running in the side panel
    artifactMd: null,        // markdown source when the artifact is a research report (else null → HTML app)
    artifactSource: false,   // panel shows source instead of the live page
    artifactNonce: 0,        // bump to remount the iframe (restart the page)
    _tokStartMs: 0,
    _tokCount: 0,
    partial: '',
    lastEventLabel: '',
    attachStatus: '',
    pendingImages: [],   // [{name, url(dataURL)}] attached to the next user turn
    // Vision budget. A VLM turns pixels into tokens: after the server's
    // smart_resize (patch 16 x merge 2) every 32x32 block of pixels costs one
    // token, so a 1080p still is ~2k tokens and an uncapped phone photo hits
    // the 4 MP ceiling at ~3.9k. Frames from a clip multiply that by the frame
    // count, so both are downscaled here, before they ever leave the browser.
    MAX_IMAGE_EDGE: 1280,   // still images: longest edge (~880 tok at 16:9)
    MAX_FRAME_EDGE: 640,    // video frames: longest edge (~300 tok at 4:3)
    VIDEO_FRAMES: 8,        // frames sampled per clip (~2.4k tok total)
    MAX_VIDEO_BYTES: 512 * 1024 * 1024,  // decoded in-browser; guard the tab
    MAX_ATTACHED_IMAGES: 16,             // per turn, across stills and frames
    lastSources: [],     // citation sources from the most recent retrieval
    modelServed: true,      // until the first status poll says otherwise
    servedModel: null,
    chats: {{ chats | tojson }},
    chatsTotal: {{ chats_total | default(0) | tojson }},
    CHATS_PAGE: 10,
    // Per-send cancellation handles
    sessionId: null,
    abortCtrl: null,

    async init() {
      // The chat list renders in the sidebar, outside this component.
      Alpine.store('chatNav').app = this;
      await this.refreshList();
      // ?chat=<id> opens that chat, ?new=1 starts a fresh one (both used by the
      // project page); otherwise reopen the chat that was open last.
      const qs = new URLSearchParams(location.search);
      try {
        const want = qs.get('chat') || (qs.get('new') ? null : localStorage.getItem('optiq.chat.current'));
        if (want && this.messages.length === 0) await this.load(want);
      } catch (e) { /* storage unavailable: start empty */ }
      if (qs.get('chat') || qs.get('new')) history.replaceState(null, '', location.pathname + (this.project ? '?project=' + this.project.id : ''));
      await this.refreshAnalysis();
      this.refreshFiles();
      for (const [k, key] of [['toolWeb', 'optiq.chat.toolWeb'], ['toolCode', 'optiq.chat.toolCode'],
                              ['deepResearch', 'optiq.chat.deepResearch']]) {
        this.$watch(k, (v) => { try { localStorage.setItem(key, v ? '1' : '0'); } catch (e) {} });
      }
      this.$watch('researchDepth', (v) => { try { localStorage.setItem('optiq.chat.researchDepth', v); } catch (e) {} });
      this.$watch('enableThinking', (v) => { try { localStorage.setItem('optiq.chat.thinking', v); } catch (e) {} });
      try {
        const r = await fetch('/api/mcp/info', {credentials: 'same-origin'});
        if (r.ok) {
          const d = await r.json();
          this.mcpServers = d.servers || [];
          this.mcpTotal = d.total || 0;
          this.mcpErrors = d.errors || [];
        }
      } catch (e) { /* MCP is optional */ }
      this.pollAdapters();
      // Persist adapter selection across reloads.
      this.$watch('selectedAdapter', (v) => {
        if (v) localStorage.setItem('optiq.chat.adapter', v);
        else localStorage.removeItem('optiq.chat.adapter');
      });
      // Persist the cloud endpoint config (base URL + key) across reloads.
      this.$watch('cloudBaseUrl', (v) => {
        if (v) localStorage.setItem('optiq.chat.cloudBaseUrl', v);
        else localStorage.removeItem('optiq.chat.cloudBaseUrl');
      });
      this.$watch('cloudApiKey', (v) => {
        if (v) localStorage.setItem('optiq.chat.cloudApiKey', v);
        else localStorage.removeItem('optiq.chat.cloudApiKey');
      });
      // ...and which source is selected, and the model id used with the remote
      // one. Before, a reload kept the URL but dropped the model and showed
      // the source select as local while requests still went remote.
      this.$watch('showCloud', (v) => localStorage.setItem('optiq.chat.source', v ? 'cloud' : 'local'));
      this.$watch('model', (v) => {
        if (!this.showCloud) return;
        if (v) localStorage.setItem('optiq.chat.cloudModel', v);
        else localStorage.removeItem('optiq.chat.cloudModel');
      });
    },

    // Reflect what adapters the running server currently has mounted. Poll
    // every few seconds so a Server-page restart shows up in the dropdown.
    async pollAdapters() {
      try {
        const r = await fetch('/api/status', {credentials: 'same-origin'});
        if (r.ok) {
          const d = await r.json();
          this.modelServed = !!(d.api_reachable && d.model);
          this.servedModel = d.model || null;
          this.apiStatus = d.api_status || '';
          this.apiError = d.api_last_error || '';
          if (!this.localChoice && this.servedModel) this.localChoice = this.servedModel;
          if (!this.modelServed && !this.recommended) this.fetchRecommended();
          this.mountedAdapters = d.adapters || [];
          // If the previously-selected adapter is no longer mounted, fall
          // back to base. Don't silently keep stale state.
          if (this.selectedAdapter
              && !this.mountedAdapters.includes(this.selectedAdapter)) {
            this.selectedAdapter = '';
          }
        }
      } catch (e) {}
      setTimeout(() => this.pollAdapters(), this.modelState() === 'loading' ? 1500 : 5000);
    },

    // ── the model ─────────────────────────────────────────────────────────
    modelState() {
      if (this.showCloud) return 'ready';
      if (['starting', 'stopping'].includes(this.apiStatus)) return 'loading';
      if (['error', 'crashed'].includes(this.apiStatus)) return 'error';
      return this.modelServed ? 'ready' : 'idle';
    },
    modelGroups() {
      const served = this.servedModel;
      const short = (p) => optiqModelName(p);
      const pick = (srcs) => this.models.filter(m => srcs.includes(m.source) && m.path !== served);
      const groups = [];
      if (served) groups.push({ label: 'Loaded now', items: [{ path: served, name: short(served) }] });
      if (this.localChoice && this.localChoice !== served && !this.models.some(m => m.path === this.localChoice)) {
        groups.push({ label: 'Loading', items: [{ path: this.localChoice, name: short(this.localChoice) }] });
      }
      groups.push({ label: 'Made in this Lab', items: pick(['local']) });
      groups.push({ label: 'Downloaded', items: pick(['hf_cache', 'loaded']) });
      groups.push({ label: 'OptiQ Cloud', items: pick(['OptiQ Cloud Boost']) });
      return groups.filter(g => g.items.length);
    },
    needsLoad() {
      return !this.showCloud && !!this.localChoice && this.localChoice !== this.servedModel
        && this.localChoice !== this.BOOST && this.modelState() !== 'loading';
    },
    modelNote() {
      if (this.showCloud) return this._cloudActive() ? 'via ' + this.cloudBaseUrl.replace(/^https?:\/\//, '') : 'set the API base URL under Options';
      const st = this.modelState();
      if (st === 'loading') return 'Loading… the first load of a model can take a minute';
      if (st === 'error') return 'Could not load: ' + (this.apiError || 'the server stopped');
      if (this.localChoice === this.BOOST) return 'answers come from OptiQ Cloud';
      if (this.needsLoad()) return this.servedModel ? 'replaces the loaded model' : '';
      return st === 'idle' ? 'nothing loaded' : '';
    },
    _requestModel() {
      if (this._cloudActive()) return this.model || undefined;
      if (this.localChoice === this.BOOST) return this.BOOST;
      return this.servedModel || undefined;
    },
    async loadModel(path) {
      const model = path || this.localChoice;
      if (!model) return;
      this.localChoice = model;
      this.apiStatus = 'starting';
      this.apiError = '';
      try {
        const r = await fetch('/api/server/apply', { method: 'POST', credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model }) });
        const d = await r.json().catch(() => ({}));
        if (!r.ok || !d.ok) throw new Error(d.error || ('HTTP ' + r.status));
      } catch (e) {
        this.apiStatus = 'error';
        this.apiError = e.message;
      }
    },
    async fetchRecommended() {
      try {
        const r = await fetch('/api/server/recommended', { credentials: 'same-origin' });
        if (r.ok) this.recommended = await r.json();
      } catch (e) {}
    },

    // ── projects ──────────────────────────────────────────────────────────
    scopeProject() { return this.projects.find(p => p.id === this.scope) || null; },
    projectName(id) { const p = this.projects.find(x => x.id === id); return p ? p.name : ''; },
    async setScope(v) {
      this.scope = v;
      this.chats = [];
      await this.refreshList();
      // An empty thread follows the scope, so "New chat" lands where you are looking.
      if (this.messages.length === 0 && !this.id) { this.project = this.scopeProject(); this.refreshFiles(); }
    },
    async moveToProject(pid) {
      const target = this.projects.find(p => p.id === pid) || null;
      if (!this.id) {                     // not saved yet: just start it there
        this.project = target;
        this.workspaceId = null;
        this.refreshFiles();
        return;
      }
      const r = await fetch('/api/chats/' + this.id + '/project', { method: 'POST', credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: pid }) });
      if (!r.ok) { this.filesStatus = 'Could not move the chat (HTTP ' + r.status + ').'; return; }
      const d = await r.json();
      this.project = target;
      this.workspaceId = d.workspace_id && !String(d.workspace_id).startsWith('proj_') ? d.workspace_id : null;
      await this.refreshList();
      this.refreshFiles();
    },

    // ── the workspace ─────────────────────────────────────────────────────
    workspaceKey() { return this.project ? this.project.id : this._workspaceId(); },
    _existingWorkspace() { return this.project ? this.project.id : this.workspaceId; },
    uploads() { return this.files.filter(f => f.uploaded); },
    projectUploads() { return this.uploads().length; },
    async refreshFiles() {
      // Listing creates the folder, so a chat that has none yet is not asked.
      const key = this._existingWorkspace();
      if (!key) { this.files = []; return; }
      try { this.files = await OptiqFiles.list(key); } catch (e) { this.files = []; }
    },
    toggleFiles() {
      this.filesOpen = !this.filesOpen;
      if (this.filesOpen) this.refreshFiles();
    },
    async removeFile(path) {
      try {
        await OptiqFiles.remove(this.workspaceKey(), path);
        this.filesStatus = 'Deleted ' + path + '.';
      } catch (e) { this.filesStatus = 'Could not delete ' + path + ': ' + e.message; }
      this.confirmingFile = null;
      await this.refreshFiles();
    },
    async refreshAnalysis() {
      try {
        const r = await fetch('/api/sandbox/info', {credentials: 'same-origin'});
        if (r.ok) {
          const d = await r.json();
          this.sandboxKind = d.kind || 'unknown';
          this.analysis = d.analysis || null;
        }
      } catch (e) { /* sandbox info endpoint optional */ }
      if (this.analysis && this.analysis.installing) setTimeout(() => this.refreshAnalysis(), 2000);
    },
    codeNeedsSetup() {
      const a = this.analysis;
      return this.toolCode && !this.deepResearch && !this.analysisDismissed && !!a
        && (a.installing || (!a.ready && !a.libraries.includes('pandas')));
    },
    async setupAnalysis() {
      const r = await fetch('/api/sandbox/analysis', { method: 'POST', credentials: 'same-origin' });
      if (r.ok) { this.analysis = (await r.json()).analysis; setTimeout(() => this.refreshAnalysis(), 1500); }
    },

    adapterNameFor(p) {
      if (!p) return '';
      const parts = String(p).replace(/\/+$/, '').split('/');
      return parts[parts.length - 1] || p;
    },

    toolIcon(name) {
      if (name === 'web_search') return '🔍';
      if (name === 'python') return '🐍';
      if (name === 'terminal') return '$_';
      return '🛠';
    },

    // Group consecutive tool messages into a single accordion so the thread
    // doesn't get visually swamped during multi-step tool runs. Each non-
    // tool message is its own group. The most-recent (last) tool group is
    // expanded; older ones are auto-collapsed when an assistant text
    // message comes in after them.
    get displayItems() {
      const out = [];
      let i = 0;
      const last = this.messages.length - 1;
      while (i < this.messages.length) {
        const m = this.messages[i];
        if (m.role === 'tool' && m.tool_card) {
          const cards = [];
          const startIdx = i;
          while (i < this.messages.length
                 && this.messages[i].role === 'tool'
                 && this.messages[i].tool_card) {
            cards.push(this.messages[i].tool_card);
            i++;
          }
          // Expanded iff this group is the most recent thing in the thread.
          // If an assistant text message comes after, auto-collapse.
          const groupEndIdx = i - 1;
          const expanded = (groupEndIdx === last);
          out.push({ type: 'tool-group', cards, expanded, startIdx });
        } else {
          out.push({ type: 'message', m, idx: i });
          i++;
        }
      }
      return out;
    },

    // Every file a run of tool calls left behind, latest size per name, so a
    // collapsed group still offers what it made.
    groupFiles(g) {
      const by = {};
      for (const c of g.cards) for (const f of (c.files || [])) by[f.path] = f;
      return Object.values(by);
    },

    quick(text) {
      this.input = text;
      this.send();
    },

    autosize(el) {
      el.style.height = 'auto';
      el.style.height = Math.min(el.scrollHeight, 280) + 'px';
    },

    // One tool workspace per conversation: python and terminal share it across
    // calls and turns, and attached files are saved into it. Minted with the
    // thread and saved with the chat, so a reopened chat finds its files.
    workspaceId: null,
    // The conversation's session-trace file (saved locally like research
    // traces). Kept with the chat, so a reopened chat keeps adding to it.
    traceId: null,
    _traceId() {
      if (!this.traceId) {
        this.traceId = 'tr_' + Array.from(crypto.getRandomValues(new Uint8Array(10)),
                                           b => b.toString(16).padStart(2, '0')).join('');
      }
      return this.traceId;
    },
    _workspaceId() {
      if (!this.workspaceId) {
        this.workspaceId = 'ws_' + Array.from(crypto.getRandomValues(new Uint8Array(10)),
                                               b => b.toString(16).padStart(2, '0')).join('');
      }
      return this.workspaceId;
    },

    resetThread() {
      this.id = null;
      this.workspaceId = null;
      this.traceId = null;
      this.project = this.scopeProject();
      this.chatInstructions = '';
      this.files = [];
      this.filesOpen = false;
      this.filesStatus = '';
      this.saveState = '';
      try { localStorage.removeItem('optiq.chat.current'); } catch (e) {}
      this.messages = [];
      this.partial = '';
      this.lastEventLabel = '';
      // Everything staged for the *next* turn has to go too. It used to clear
      // only the transcript, so a half-written prompt, an attached screenshot
      // and any chat-with-files documents survived "New chat" and were sent
      // with the first message of the new conversation -- silently, since the
      // thumbnail sits under the composer where nobody re-reads it.
      this.input = '';
      this.pendingImages = [];
      this.artifact = null;
      this.refreshFiles();
    },

    async stop() {
      // Server-side cancel so any running tool subprocess gets SIGKILL'd
      // through the cancel event. The local fetch is then aborted so we
      // don't keep reading the SSE stream.
      if (this.sessionId) {
        try {
          await fetch('/api/chat/cancel', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({session_id: this.sessionId}),
          });
        } catch (e) {/* best-effort */}
      }
      if (this.abortCtrl) {
        try { this.abortCtrl.abort(); } catch (e) {}
      }
    },

    async send() {
      const text = this.input.trim();
      if ((!text && !this.pendingImages.length) || this.streaming) return;
      // With attached images, send a multimodal content array (OpenAI shape):
      // image parts first, then the text. Otherwise a plain string.
      let content;
      if (this.pendingImages.length) {
        content = this.pendingImages.map(im => ({
          type: 'image_url', image_url: { url: im.url },
        }));
        if (text) content.push({ type: 'text', text });
        this.pendingImages = [];
        this.attachStatus = '';
      } else {
        content = text;
      }
      this.messages.push({ role: 'user', content });
      this.input = '';
      this.$nextTick(() => { const el = document.querySelector('.composer-input'); if (el) this.autosize(el); });
      this.streaming = true;
      this.partial = '';
      this.tokPerSec = null;
      this._tokStartMs = 0;
      this._tokCount = 0;
      this.lastEventLabel = '';

      // Every message goes through the Lab (/api/chat/stream): that is where
      // the instructions and the workspace's files are added, and a cloud key
      // must not travel in a cross-origin request from the browser anyway.
      if (this.deepResearch) {
        await this._sendDeepResearch();
      } else {
        await this._sendWithTools();
      }

      this.partial = '';
      this.streaming = false;
      this.lastEventLabel = '';
      this.scrollBottom();
      await this.autosave();
    },

    // Chats save themselves after every turn, like any chat app. They used to
    // exist only in the open page until someone clicked Save, so a reload or a
    // Lab restart silently threw the conversation away.
    async autosave() {
      if (!this.messages.some(m => m.role !== 'user')) return;
      this.saveState = 'saving';
      try {
        this.saveState = (await this.save()) ? 'saved' : 'error';
      } catch (e) {
        this.saveState = 'error';
      }
    },

    // Live decode-speed readout. Start the clock on the first token so the
    // figure reflects steady-state generation, not the prompt-processing wait.
    _tickTok() {
      const now = performance.now();
      if (!this._tokStartMs) { this._tokStartMs = now; this._tokCount = 0; return; }
      this._tokCount += 1;
      const secs = (now - this._tokStartMs) / 1000;
      if (secs > 0.2) this.tokPerSec = Math.round(this._tokCount / secs);
    },

    // Tools path: SSE from /api/chat/stream
    async _sendWithTools() {
      const apiMessages = this.messages
        .filter(m => m.role !== 'tool' || !m.tool_card)  // strip UI-only tool cards
        .map(({role, content, tool_calls, tool_call_id, name}) => {
          const m = { role, content };
          if (tool_calls) m.tool_calls = tool_calls;
          if (tool_call_id) m.tool_call_id = tool_call_id;
          if (name) m.name = name;
          return m;
        });

      let pendingByCall = {};
      this.abortCtrl = new AbortController();

      try {
        const resp = await fetch('/api/chat/stream', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          credentials: 'same-origin',
          signal: this.abortCtrl.signal,
          body: JSON.stringify({
            model: this._requestModel(),
            messages: apiMessages,
            temperature: this.temperature,
            max_tokens: this.maxTokens || 'auto',
            enable_thinking: this.enableThinking === 'auto' ? null : (this.enableThinking === 'on'),
            tools_enabled: this.toolsEnabled && this.jsonMode === 'off',
            tools: [...(this.toolWeb ? ['web_search'] : []),
                    ...(this.toolCode ? ['python', 'terminal'] : []), 'mcp'],
            workspace_id: this.workspaceKey(),
            trace_id: this._traceId(),
            instructions: this.chatInstructions || undefined,
            response_format: this._responseFormat() || undefined,
            adapter: this.selectedAdapter
                     ? this.adapterNameFor(this.selectedAdapter)
                     : null,
            // Cloud endpoint (OpenRouter, any OpenAI-compatible): the backend
            // proxies here with the user's own key. Empty -> local server.
            base_url: this._cloudActive() ? this.cloudBaseUrl : undefined,
            api_key: this._cloudActive() ? (this.cloudApiKey || undefined) : undefined,
          }),
        });
        if (!resp.ok || !resp.body) throw new Error('HTTP ' + resp.status);

        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buf = '';
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          buf += decoder.decode(value, { stream: true });
          let idx;
          while ((idx = buf.indexOf('\n\n')) !== -1) {
            const frame = buf.slice(0, idx); buf = buf.slice(idx + 2);
            const ev = this._parseSSE(frame);
            if (!ev) continue;
            this._handleEvent(ev, pendingByCall);
          }
        }
      } catch (e) {
        if (e.name === 'AbortError') {
          // User clicked Stop. Not an error -- but keep what had already
          // streamed and say it was stopped; the partial answer used to vanish
          // and the conversation just ended on whatever tool card came last.
          const kept = (this.partial || '').trim();
          this.messages.push({ role: 'assistant', stopped: true,
                               content: kept ? kept + '\n\n*(stopped)*' : '*(stopped)*' });
          this.partial = '';
        } else {
          this.messages.push({ role: 'assistant', content: '(error: ' + e.message + ')' });
        }
      } finally {
        this.abortCtrl = null;
        this.sessionId = null;
      }
    },

    // Deep Research path: SSE from /api/research/stream. Renders a single
    // research-trace card that updates as the workflow runs, then drops the
    // Markdown report into the artifact pane and a short answer into the chat.
    async _sendDeepResearch() {
      const apiMessages = this.messages
        .filter(m => (m.role !== 'tool' || !m.tool_card) && !m.research)
        .map(({ role, content }) => ({ role, content }));

      const asked = (apiMessages.filter(m => m.role === 'user').pop() || {}).content;
      this.messages.push({ role: 'assistant', research: {
        question: typeof asked === 'string' ? asked : '',
        phase: 'starting', phaseLabel: 'Starting…', round: 0,
        plan: '', searches: [], sources: [], repaired: 0,
        report_md: '', report_html: '', summary: '', error: '', done: false,
      } });
      // Mutate the REACTIVE copy Alpine tracks (the one now inside `messages`),
      // not the pre-push literal — otherwise the card never re-renders as it fills.
      const card = this.messages[this.messages.length - 1].research;
      this.scrollBottom();
      this.abortCtrl = new AbortController();

      try {
        const resp = await fetch('/api/research/stream', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'same-origin',
          signal: this.abortCtrl.signal,
          body: JSON.stringify({
            model: this._requestModel(),
            messages: apiMessages,
            temperature: this.temperature,
            workspace_id: this.workspaceKey(),
            instructions: this.chatInstructions || undefined,
            research: { depth: this.researchDepth },
            base_url: this._cloudActive() ? this.cloudBaseUrl : undefined,
            api_key: this._cloudActive() ? (this.cloudApiKey || undefined) : undefined,
          }),
        });
        if (!resp.ok || !resp.body) throw new Error('HTTP ' + resp.status);
        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buf = '';
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          buf += decoder.decode(value, { stream: true });
          let idx;
          while ((idx = buf.indexOf('\n\n')) !== -1) {
            const frame = buf.slice(0, idx); buf = buf.slice(idx + 2);
            const ev = this._parseSSE(frame);
            if (ev) this._handleResearchEvent(ev, card);
          }
        }
      } catch (e) {
        if (e.name !== 'AbortError') { card.error = e.message; card.done = true; }
      } finally {
        this.abortCtrl = null;
        this.sessionId = null;
      }
    },

    _handleResearchEvent(ev, card) {
      const d = ev.data || {};
      switch (ev.event) {
        case 'session': this.sessionId = d.session_id; break;
        case 'phase':
          card.phase = d.phase;
          if (d.round) card.round = d.round;
          card.phaseLabel = this._researchPhaseLabel(d.phase, card.round);
          this.lastEventLabel = '🔬 ' + card.phaseLabel;
          break;
        case 'plan': card.plan = d.outline || ''; break;
        case 'search': card.searches.push({ query: d.query, n: (d.results || []).length }); break;
        case 'source': card.sources.push({ url: d.url, title: d.title || d.url, local: !!d.local }); break;
        case 'verified': card.repaired = d.repaired || d.dropped || 0; break;
        case 'report': {
          card.report_md = d.report || '';
          card.report_html = this._reportHtml(d.report || '', card.question);
          card.summary = d.summary || '';
          card.done = true;
          card.phaseLabel = 'Report ready';
          this.lastEventLabel = '';
          const sources = (d.sources || []).map((s, i) => ({ n: i + 1, url: s.url, title: s.title }));
          if (d.summary) {
            this.messages.push({
              role: 'assistant', content: d.summary,
              sources: sources.length ? sources : undefined,
            });
          }
          this.openArtifact(card.report_html, card.report_md);
          break;
        }
        case 'cancelled': card.error = 'stopped'; card.done = true; this.lastEventLabel = ''; break;
        case 'error': card.error = d.message || 'error'; card.done = true; this.lastEventLabel = ''; break;
      }
      this.scrollBottom();
    },

    _researchPhaseLabel(phase, round) {
      const r = round ? ' · round ' + round : '';
      return ({
        starting: 'Starting…',
        planning: 'Planning the report',
        reading: 'Reading your files',
        drafting: 'Writing a first draft',
        searching: 'Searching the web' + r,
        refining: 'Folding in findings' + r,
        auditing: 'Auditing claims',
        writing: 'Writing the report',
        verifying: 'Checking citations',
      })[phase] || phase;
    },

    // Wrap the Markdown report as a self-contained styled HTML page for the
    // sandboxed artifact iframe (same pane the model's HTML artifacts use).
    _reportHtml(md, question) {
      // The panel header and the downloaded file are named from <title>. A
      // report that opens with prose rather than a "# heading" had none, so it
      // showed as "Untitled page": use its first heading, else the question.
      const heading = (md.match(/^#\s+(.+)$/m) || [])[1];
      const title = String(heading || question || 'Research report').replace(/[*_`#]/g, '').trim().slice(0, 120)
        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
      const body = (typeof marked !== 'undefined')
        ? marked.parse(md, { gfm: true, breaks: true })
        : md.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
      return '<!doctype html><html><head><meta charset="utf-8">'
        + '<title>' + title + '</title>'
        + '<style>'
        + ':root{color-scheme:light}'
        + '*{box-sizing:border-box}'
        + 'body{margin:0;background:#fbfaf7;color:#1a1a17;'
        + 'font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;'
        + '-webkit-font-smoothing:antialiased}'
        + '.report{max-width:760px;margin:0 auto;padding:40px 44px 72px}'
        + '.report h1{font-size:26px;line-height:1.25;margin:0 0 18px;letter-spacing:-.01em}'
        + '.report h2{font-size:19px;margin:34px 0 10px;padding-bottom:5px;border-bottom:1px solid #ece8df;letter-spacing:-.01em}'
        + '.report h3{font-size:15.5px;margin:22px 0 8px}'
        + '.report p{margin:0 0 14px}'
        + '.report a{color:#9c5700;text-decoration:none;border-bottom:1px solid rgba(156,87,0,.3)}'
        + '.report a:hover{border-bottom-color:#9c5700}'
        + '.report sup,.report a[href^="#"]{color:#9c5700}'
        + '.report ul,.report ol{margin:0 0 14px;padding-left:22px}'
        + '.report li{margin:4px 0}'
        + '.report table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px;display:block;overflow-x:auto}'
        + '.report th,.report td{border:1px solid #e6e1d6;padding:7px 10px;text-align:left;vertical-align:top}'
        + '.report th{background:#f4f1ea;font-weight:600}'
        + '.report code{background:#f1efe8;padding:1px 5px;border-radius:4px;font-size:.9em;'
        + 'font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}'
        + '.report pre{background:#f4f1ea;padding:14px;border-radius:8px;overflow-x:auto}'
        + '.report pre code{background:none;padding:0}'
        + '.report blockquote{margin:14px 0;padding:2px 16px;border-left:3px solid #d8d2c4;color:#555}'
        + '.report hr{border:0;border-top:1px solid #ece8df;margin:26px 0}'
        + '</style></head><body><article class="report">' + body + '</article></body></html>';
    },

    _parseSSE(frame) {
      let event = 'message', data = '';
      for (const line of frame.split('\n')) {
        if (line.startsWith('event:')) event = line.slice(6).trim();
        else if (line.startsWith('data:')) data += line.slice(5).trim();
      }
      if (!data) return null;
      try { return { event, data: JSON.parse(data) }; } catch (e) { return null; }
    },

    _handleEvent(ev, pending) {
      if (ev.event === 'session') {
        this.sessionId = ev.data.session_id;
        return;
      }
      if (ev.event === 'sources') {
        // Chat-with-files retrieval: stash the citation sources; they get
        // attached to the assistant answer when it finalizes.
        this.lastSources = ev.data.sources || [];
        return;
      }
      if (ev.event === 'cancelled') {
        this.messages.push({ role: 'assistant', content: '(stopped)' });
        return;
      }
      if (ev.event === 'tool_call') {
        this.lastEventLabel = '🛠 calling ' + ev.data.name + '…';
        // The rate is a decode speed: restart the clock after each tool, or
        // the time the tools took is counted as slow generation.
        this._tokStartMs = 0;
        const card = {
          id: ev.data.id,
          name: ev.data.name,
          arguments: ev.data.arguments,
          healed: ev.data.healed,
          duplicate: ev.data.duplicate || false,
          retry_exhausted: ev.data.retry_exhausted || false,
          errored: false,
          result: null,
          elapsed_sec: null,
        };
        this.messages.push({ role: 'tool', tool_card: card });
        // Keep the card as Alpine returns it, not the object literal above: the
        // result arrives later, and a write to the unwrapped object is not
        // seen, so every tool card stayed on "running…" after it finished.
        pending[ev.data.id] = this.messages[this.messages.length - 1].tool_card;
        this.scrollBottom();
      } else if (ev.event === 'tool_result') {
        const card = pending[ev.data.id];
        if (card) {
          card.result = ev.data.result;
          card.elapsed_sec = ev.data.elapsed_sec;
          card.errored = ev.data.errored || false;
          card.images = ev.data.images || [];
          card.files = ev.data.files || [];
          if (card.files.length) this.refreshFiles();
        }
        this.lastEventLabel = '';
        this.scrollBottom();
      } else if (ev.event === 'token') {
        this.partial += ev.data.text || '';
        this._tickTok();
        this.scrollBottom();
      } else if (ev.event === 'replace') {
        // Server rewrote what it streamed (e.g. healing pulled a tool call out
        // of the prose). Swap in the corrected transcript for this turn.
        this.partial = ev.data.text || '';
        this.scrollBottom();
      } else if (ev.event === 'assistant') {
        this.messages.push({
          role: 'assistant',
          content: ev.data.content || '',
          reasoning: ev.data.reasoning || undefined,
          sources: this.lastSources.length ? this.lastSources : undefined,
          tok_per_sec: this.tokPerSec,
        });
        this.partial = '';
        this.lastSources = [];
      } else if (ev.event === 'error') {
        this.messages.push({ role: 'assistant', content: '(error: ' + (ev.data.message || 'unknown') + ')' });
      }
    },

    // Build the OpenAI response_format object from the JSON-mode controls.
    // 'object' = any valid JSON; 'schema' = constrain to the supplied schema.
    // A malformed schema falls back to json_object so output is still valid JSON.
    // Cloud endpoint is in effect only when the source toggle is on AND a base
    // URL is set. A saved URL with the toggle off stays inert.
    _cloudActive() {
      return this.showCloud && !!(this.cloudBaseUrl || '').trim();
    },

    _responseFormat() {
      if (this.jsonMode === 'object') return { type: 'json_object' };
      if (this.jsonMode === 'schema') {
        try {
          const schema = JSON.parse(this.jsonSchema || '{}');
          return { type: 'json_schema', json_schema: { name: 'response', schema } };
        } catch (e) {
          console.warn('JSON schema is not valid JSON, falling back to json_object:', e.message);
          return { type: 'json_object' };
        }
      }
      return null;
    },

    async save() {
      const firstUser = this.messages.find(m => m.role === 'user')?.content;
      const titleText = Array.isArray(firstUser)
        ? (firstUser.find(p => p && p.type === 'text')?.text || '🖼 image')
        : firstUser;
      const title = (titleText || '').slice(0, 60) || 'Untitled chat';
      const cleaned = this.messages.map(m => {
        if (m.role === 'tool' && m.tool_card) {
          return { role: 'tool', tool_card: m.tool_card };
        }
        const out = { role: m.role, content: m.content };
        if (m.reasoning) out.reasoning = m.reasoning;
        if (m.tool_calls) out.tool_calls = m.tool_calls;
        // A Deep Research turn is only this card: dropping it saved an empty
        // message, and the reopened chat said a report was attached with no
        // report anywhere. A card saved mid-run cannot resume, so say so.
        if (m.research) {
          out.research = JSON.parse(JSON.stringify(m.research));
          if (!out.research.done && !out.research.error) out.research.error = 'interrupted';
        }
        return out;
      });
      const resp = await fetch('/api/chats', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ id: this.id, title, model: this._requestModel() || '', messages: cleaned,
                               workspace_id: this.workspaceKey(),
                               trace_id: this.traceId || undefined,
                               instructions: this.chatInstructions || undefined }),
        credentials: 'same-origin',
      });
      if (!resp.ok) return false;
      const data = await resp.json();
      this.id = data.id;
      try { localStorage.setItem('optiq.chat.current', data.id); } catch (e) {}
      await this.refreshList();
      return true;
    },

    async load(id) {
      const resp = await fetch('/api/chats/' + id, {credentials: 'same-origin'});
      if (!resp.ok) {
        try { if (localStorage.getItem('optiq.chat.current') === id) localStorage.removeItem('optiq.chat.current'); } catch (e) {}
        return;
      }
      const data = await resp.json();
      this.id = data.id;
      const ws = data.workspace_id || null;
      this.project = this.projects.find(p => p.id === data.project_id) || null;
      this.workspaceId = ws && !String(ws).startsWith('proj_') ? ws : null;
      this.chatInstructions = data.instructions || '';
      this.traceId = data.trace_id || null;
      this.saveState = 'saved';
      try { localStorage.setItem('optiq.chat.current', data.id); } catch (e) {}
      if (data.model === this.BOOST) this.localChoice = this.BOOST;
      else if (this.showCloud && data.model) this.model = data.model;
      this.messages = data.messages || [];
      this.partial = '';
      this.refreshFiles();      // an open Files panel now lists this chat's
      this.scrollBottom();
    },

    // Deleting asks twice in place rather than through a browser dialog.
    _pendingDelete: null,
    async delChat(id) {
      if (this._pendingDelete !== id) {
        this._pendingDelete = id;
        setTimeout(() => { if (this._pendingDelete === id) this._pendingDelete = null; }, 4000);
        return;
      }
      this._pendingDelete = null;
      await fetch('/api/chats/' + id, {method: 'DELETE', credentials: 'same-origin'});
      if (this.id === id) this.resetThread();
      await this.refreshList();
    },

    _scopeQuery() {
      return this.scope === 'all' ? '' : '&project=' + encodeURIComponent(this.scope);
    },

    // Refresh keeps however many are already shown, so an autosave does not
    // collapse a list the user expanded.
    async refreshList() {
      const limit = Math.max(this.CHATS_PAGE, this.chats.length);
      try {
        const pr = await fetch('/api/projects', {credentials: 'same-origin'});
        if (pr.ok) this.projects = (await pr.json()).projects || [];
      } catch (e) {}
      if (this.scope !== 'all' && this.scope !== 'none' && !this.scopeProject()) this.scope = 'all';
      const resp = await fetch('/api/chats?limit=' + limit + this._scopeQuery(), {credentials: 'same-origin'});
      if (resp.ok) {
        const data = await resp.json();
        this.chats = data.chats || [];
        this.chatsTotal = data.total ?? this.chats.length;
      }
    },

    async moreChats() {
      const resp = await fetch('/api/chats?limit=' + this.CHATS_PAGE + '&offset=' + this.chats.length + this._scopeQuery(),
                               {credentials: 'same-origin'});
      if (!resp.ok) return;
      const data = await resp.json();
      const have = new Set(this.chats.map(c => c.id));
      this.chats = this.chats.concat((data.chats || []).filter(c => !have.has(c.id)));
      this.chatsTotal = data.total ?? this.chatsTotal;
    },

    async attachFile(ev) {
      const list = Array.from(ev.target.files || []);
      ev.target.value = '';
      for (const f of list) await this._attachOne(f);
    },

    async _attachOne(f) {

      // A clip is sampled into frames and rides along as image parts: that is
      // exactly how the VLM sees video (uniform sampled frames), so the file
      // itself is never uploaded, only the frames the model will actually read.
      const isVideo = /\.(mp4|mov|webm|m4v)$/i.test(f.name)
                      || (f.type || '').startsWith('video/');
      if (isVideo) {
        try {
          if (f.size > this.MAX_VIDEO_BYTES) {
            throw new Error(`video is ${this.fmtMB(f.size)}, limit is ${this.fmtMB(this.MAX_VIDEO_BYTES)}`);
          }
          this.attachStatus = '🎞 sampling ' + f.name + '…';
          const frames = await this.sampleVideoFrames(f);
          if (!frames.length) throw new Error('no frames could be read');
          const room = this.MAX_ATTACHED_IMAGES - this.pendingImages.length;
          if (room <= 0) throw new Error(`already at ${this.MAX_ATTACHED_IMAGES} images`);
          const keep = frames.slice(0, room);
          keep.forEach((fr, i) => this.pendingImages.push(
            { name: `${f.name} #${i + 1}`, url: fr.url, dims: fr.dims }));
          const dropped = frames.length - keep.length;
          this.attachStatus = `🎞 ${f.name} · ${keep.length} frames`
            + (dropped ? ` (${dropped} dropped, limit ${this.MAX_ATTACHED_IMAGES})` : '')
            + ` · ~${this.visionTokens()} vision tokens`;
        } catch (e) {
          this.attachStatus = 'failed: ' + e.message;
        }
        return;
      }

      // Images ride along as image_url parts for the vision model (no text
      // extraction). Everything else is extracted to text as before.
      const isImage = /\.(png|jpe?g|gif|webp|bmp)$/i.test(f.name)
                      || (f.type || '').startsWith('image/');
      if (isImage) {
        try {
          if (this.pendingImages.length >= this.MAX_ATTACHED_IMAGES) {
            throw new Error(`already at ${this.MAX_ATTACHED_IMAGES} images`);
          }
          // Downscale before send: a phone photo is ~4k vision tokens and a
          // multi-MB data URL otherwise.
          const { url, dims } = await this.downscaleImage(f, this.MAX_IMAGE_EDGE);
          this.pendingImages.push({ name: f.name, url, dims });
          this.attachStatus = `🖼 ${f.name} · ~${this.visionTokens()} vision tokens`;
        } catch (e) {
          this.attachStatus = 'failed: ' + e.message;
        }
        return;
      }

      // Everything else is uploaded to the workspace whole: the tools open it
      // as it is (a spreadsheet with pandas), and its text is searched for the
      // passages relevant to each question.
      this.attachStatus = 'uploading ' + f.name + '…';
      try {
        const d = await OptiqFiles.upload(this.workspaceKey(), f);
        this.attachStatus = d.indexed ? 'added ' + d.name
          : (d.error ? 'added ' + d.name + ' (could not read its text: ' + d.error + ')'
                     : 'added ' + d.name + ' (the tools can open it; its contents are not searched)');
      } catch (e) {
        this.attachStatus = 'failed: ' + e.message;
      }
      await this.refreshFiles();
      this.$nextTick(() => { const el = document.querySelector('.composer-input'); if (el) this.autosize(el); });
    },

    fmtMB(bytes) { return (bytes / (1024 * 1024)).toFixed(0) + ' MB'; },

    // Rough cost of what is currently attached, in the model's own units: the
    // server rounds each image to a multiple of 32 px and spends one token per
    // 32x32 block. Shown so a clip's real price is visible before sending.
    visionTokens() {
      let t = 0;
      for (const im of this.pendingImages) {
        const d = im.dims;
        if (d) t += Math.ceil(d.w / 32) * Math.ceil(d.h / 32);
      }
      return t >= 1000 ? (t / 1000).toFixed(1) + 'k' : String(t);
    },

    // Draw a bitmap into a canvas no larger than `maxEdge` and return a JPEG
    // data URL. Used for both stills and frames so the payload and the token
    // bill are bounded by us, not by whatever the camera produced.
    _drawScaled(src, w, h, maxEdge) {
      const scale = Math.min(1, maxEdge / Math.max(w, h));
      const cw = Math.max(32, Math.round(w * scale));
      const ch = Math.max(32, Math.round(h * scale));
      const canvas = document.createElement('canvas');
      canvas.width = cw; canvas.height = ch;
      canvas.getContext('2d').drawImage(src, 0, 0, cw, ch);
      return { url: canvas.toDataURL('image/jpeg', 0.85), dims: { w: cw, h: ch } };
    },

    async downscaleImage(file, maxEdge) {
      const dataUrl = await new Promise((resolve, reject) => {
        const r = new FileReader();
        r.onload = () => resolve(r.result);
        r.onerror = () => reject(new Error('could not read file'));
        r.readAsDataURL(file);
      });
      const img = await new Promise((resolve, reject) => {
        const i = new Image();
        i.onload = () => resolve(i);
        i.onerror = () => reject(new Error('not a readable image'));
        i.src = dataUrl;
      });
      // A GIF may be animated and a canvas would flatten it to frame 1; small
      // images gain nothing from a re-encode. Pass those through untouched.
      if (Math.max(img.width, img.height) <= maxEdge) {
        return { url: dataUrl, dims: { w: img.width, h: img.height } };
      }
      return this._drawScaled(img, img.width, img.height, maxEdge);
    },

    // Sample `VIDEO_FRAMES` evenly-spaced frames from a clip, entirely in the
    // browser (no upload, no ffmpeg). Frames are taken at the midpoint of each
    // equal slice so the first and last are not black leader frames.
    async sampleVideoFrames(file) {
      const url = URL.createObjectURL(file);
      const v = document.createElement('video');
      v.preload = 'auto'; v.muted = true; v.playsInline = true;
      // The element must be IN the document: a detached <video> never leaves
      // readyState 0 in Chrome, so sampling would hang forever. Park it
      // offscreen for the duration and remove it in the finally below.
      v.style.cssText = 'position:fixed;left:-99999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none';
      document.body.appendChild(v);
      try {
        // Attach the listener BEFORE setting src: a blob URL can reach
        // HAVE_METADATA synchronously, and a handler bound afterwards would
        // never see the event (the attach would hang until the timeout).
        await new Promise((resolve, reject) => {
          v.onloadedmetadata = () => resolve();
          v.onerror = () => reject(new Error('this video format cannot be decoded here'));
          setTimeout(() => reject(new Error('timed out reading the video')), 30000);
          v.src = url;
          if (v.readyState >= 1) resolve();   // already there: don't wait
        });
        const dur = Number.isFinite(v.duration) && v.duration > 0 ? v.duration : 0;
        if (!v.videoWidth || !v.videoHeight) throw new Error('no video track found');
        const n = this.VIDEO_FRAMES;
        const times = dur
          ? Array.from({ length: n }, (_, i) => dur * (i + 0.5) / n)
          : [0];   // streamed/unknown duration: take what we can (first frame)
        const frames = [];
        for (const t of times) {
          try {
            await new Promise((resolve, reject) => {
              v.onseeked = () => resolve();
              v.onerror = () => reject(new Error('seek failed'));
              setTimeout(() => resolve(), 5000);   // slow decode: take what is there
              v.currentTime = t;
            });
            const { url: fu, dims } = this._drawScaled(
              v, v.videoWidth, v.videoHeight, this.MAX_FRAME_EDGE);
            frames.push({ url: fu, dims });
          } catch (e) { /* skip an unreadable frame, keep the rest */ }
        }
        return frames;
      } finally {
        URL.revokeObjectURL(url);
        v.removeAttribute('src');
        try { v.load(); } catch (e) {}
        v.remove();
      }
    },

    renderBody(text) {
      // Multimodal user turns carry an array of {type:text|image_url,...} parts.
      if (Array.isArray(text)) {
        text = text.filter(p => p && p.type === 'text').map(p => p.text).join('\n');
      }
      if (!text) return '';
      // Sanitized: this goes to x-html, and `text` is model output, which can
      // carry HTML from a prompt injection, a quoted web result or an MCP tool.
      if (typeof optiqRenderMarkdown === 'function') {
        return optiqRenderMarkdown(text, { gfm: true, breaks: true });
      }
      // No renderer: plain text, so keep its line breaks visible.
      return '<div style="white-space: pre-wrap">'
        + text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</div>';
    },

    // Artifacts: an HTML page the model wrote runs on demand, in the side panel,
    // never inline and never on arrival — the reader decides when to execute it.
    openArtifact(html, md = null) {
      this.filesOpen = false;
      this.artifact = html;
      this.artifactMd = md;   // non-null => a research report; download saves the .md
      this.artifactSource = false;
      this.artifactNonce++;
    },
    closeArtifact() { this.artifact = null; this.artifactMd = null; },
    // Download the artifact: a research report as its original Markdown, a
    // model-authored HTML app as its HTML source.
    downloadArtifact() {
      const isMd = !!this.artifactMd;
      const text = isMd ? this.artifactMd : (this.artifact || '');
      const blob = new Blob([text], { type: isMd ? 'text/markdown' : 'text/html' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = isMd ? 'research-report.md' : 'artifact.html';
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 1000);
    },
    restartArtifact() {
      const html = this.artifact;
      this.artifact = null;
      this.$nextTick(() => { this.artifact = html; this.artifactNonce++; });
    },
    artifactTitle(html) {
      if (!html) return 'Untitled page';
      const t = html.match(/<title>([^<]*)<\/title>/i);
      if (t && t[1].trim()) return t[1].trim();
      const h = html.match(/<h1[^>]*>([^<]*)<\/h1>/i);
      return (h && h[1].trim()) || 'Untitled page';
    },

    // Canvas: pull standalone HTML blocks out of an assistant message so they
    // can render live in a sandboxed iframe. Only fenced ```html blocks that
    // actually contain markup are treated as renderable artifacts.
    htmlArtifacts(content) {
      if (typeof content !== 'string') return [];
      const out = [];
      // Any fenced block tagged html / svg / xml (or untagged) that actually
      // contains renderable markup becomes a live Canvas. SVG / component
      // fragments are wrapped in a minimal HTML shell so they render centered.
      const re = /```(html|svg|xml)?\s*\n([\s\S]*?)```/gi;
      let m;
      while ((m = re.exec(content)) !== null) {
        const lang = (m[1] || '').toLowerCase();
        let code = (m[2] || '').trim();
        const looksMarkup = /<\s*(html|body|svg|canvas|div|h[1-6]|table|ul|ol|p|script|style|button|form|section|main|header)\b/i.test(code);
        if (!looksMarkup && lang !== 'html' && lang !== 'svg') continue;
        const isFullDoc = /<!doctype html|<html[\s>]/i.test(code);
        if (!isFullDoc) {
          // Wrap bare SVG / components so they render nicely.
          code = `<!doctype html><html><head><meta charset="utf-8">` +
                 `<style>html,body{margin:0;height:100%}body{display:grid;place-items:center;` +
                 `font-family:system-ui,-apple-system,sans-serif;background:#fff}</style></head>` +
                 `<body>${code}</body></html>`;
        }
        out.push(code);
      }
      return out;
    },

    // The image data-URLs in a multimodal user turn, for inline thumbnails.
    messageImages(content) {
      if (!Array.isArray(content)) return [];
      return content
        .filter(p => p && p.type === 'image_url')
        .map(p => (p.image_url && p.image_url.url) || '')
        .filter(Boolean);
    },

    scrollBottom() {
      this.$nextTick(() => {
        const el = document.getElementById('thread');
        if (el) el.scrollTop = el.scrollHeight;
      });
    },
  };
}
</script>
{% endblock %}