{% extends "_base.html" %}
{% block content %}
<div x-data="chatApp()" x-init="init()" style="max-width: 1180px;">
  <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">
    <div>
      <span class="page-eyebrow">Workflow · chat</span>
      <h1 class="page-title" style="margin-bottom: 4px;">Chat</h1>
      <p class="page-lead" style="margin-bottom: 12px;">Talk to the loaded model. Tools (web search, Python, terminal) run locally in a sandbox.</p>
    </div>
    <div style="display: flex; gap: 8px;">
      <button class="btn btn-ghost" @click="resetThread()">New chat</button>
      <button class="btn" @click="save()" :disabled="messages.length === 0">Save</button>
    </div>
  </div>

  <div style="display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px;">
    <div style="min-width: 0;">
      <details class="card chat-settings">
        <summary>
          <span>Model &amp; params</span>
          <span class="chat-settings-summary">
            <span class="chip" x-text="model || 'default model'"></span>
            <span class="chip" x-text="'T=' + temperature.toFixed(1)"></span>
            <span class="chip" x-text="'max=' + maxTokens"></span>
            <span class="chip" :class="toolsEnabled ? 'chip-on' : 'chip-off'" x-text="toolsEnabled ? 'tools on' : 'tools off'"></span>
            <span class="chip" :class="enableThinking === 'on' ? 'chip-on' : 'chip-off'" x-text="'reason: ' + enableThinking"></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" style="margin: 0;">
            <label>Model</label>
            <input type="text" x-model="model" list="model-options"
                   placeholder="(use API default)">
            <datalist id="model-options">
              {% for m in model_picker or [] %}
                <option value="{{ m.path }}" label="{{ m.name }} · {{ m.source }}"></option>
              {% endfor %}
            </datalist>
          </div>
          <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>Max tokens</label>
            <input type="number" min="1" max="32768" x-model.number="maxTokens">
          </div>
          <div class="form-row" style="margin: 0;">
            <label>Reasoning</label>
            <select x-model="enableThinking">
              <option value="off">off (recommended for small models)</option>
              <option value="on">on</option>
              <option value="auto">auto (model default)</option>
            </select>
          </div>
          <div class="form-row" style="margin: 0;">
            <label>Tools</label>
            <select x-model.boolean="toolsEnabled">
              <option :value="true">enabled (web_search, python, terminal)</option>
              <option :value="false">disabled (plain chat)</option>
            </select>
          </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;"
               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="messages.length === 0">
            <div class="thread-empty">
              <h3>Start a conversation</h3>
              <div class="thread-empty-sub">
                Try <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>, or
                <button class="chip-btn" @click="quick('List the files in this directory using the terminal tool.')">a shell command</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" x-text="g.m.role"></div>
                  <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" x-html="renderBody(g.m.content)"></div>
                  </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">
                    <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.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>
                        </div>
                      </template>
                    </details>
                  </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>
                      </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>
              </div>
              <template x-if="partial">
                <div class="msg-body" 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">
          <div class="composer-row">
            <textarea x-model="input"
                      :disabled="streaming"
                      @keydown.enter.prevent="if (!$event.shiftKey) send()"
                      placeholder="Message the model. ⏎ to send, ⇧⏎ for newline."
                      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">→</button>
            </template>
            <template x-if="streaming">
              <button class="btn btn-stop" type="button" @click="stop()" title="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-meta">
            <label class="composer-attach">
              <input type="file" @change="attachFile($event)"
                     accept=".txt,.md,.py,.json,.jsonl,.yaml,.yml,.csv,.html,.css,.js,.ts,.tsx,.jsx,.go,.rs,.toml,.ini,.sh,.pdf,.docx,.png,.jpg,.jpeg,.gif,.webp,.bmp,image/*">
              <span>📎 attach</span>
            </label>
            <span class="composer-status" x-text="streaming ? 'streaming…' : (attachStatus || '')"></span>
            <div style="flex: 1;"></div>
            <span class="composer-hint">⏎ send · ⇧⏎ newline</span>
          </div>
        </form>
      </div>
    </div>

    <div>
      <div class="side-label" style="margin-bottom: 8px;">Saved</div>
      <template x-if="chats.length === 0">
        <div class="empty" style="padding: 16px; font-size: 13px;">No saved chats yet.</div>
      </template>
      <template x-for="c in chats" :key="c.id">
        <div class="card" style="padding: 10px 12px; margin-bottom: 6px;">
          <div style="display: flex; justify-content: space-between; gap: 6px;">
            <a href="#" @click.prevent="load(c.id)" style="font-weight: 500;" x-text="c.title"></a>
            <button class="copy-btn" @click="delChat(c.id)" title="Delete">✕</button>
          </div>
          <div style="font-size: 11px; color: var(--mute);" x-text="c.n_messages + ' msgs · ' + (c.model || '').split('/').pop()"></div>
        </div>
      </template>
    </div>
  </div>
</div>

<style>
/* ── 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: 1fr 110px 120px 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;
  min-height: 420px;
}
.thread {
  padding: 6px 24px;
  flex: 1;
  max-height: 64vh;
  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; }
.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%;
}
.msg-body pre {
  background: var(--code-bg);
  padding: 12px;
  border-radius: 4px;
  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: #03684c; }
.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; }
.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 {
  background: var(--paper);
  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 {
  padding: 9px 16px;
  font-size: 16px;
  border-radius: var(--r-md);
}
.btn-stop {
  background: var(--err);
  border-color: var(--err);
  color: white;
}
.btn-stop:hover { background: #921313; border-color: #921313; }
.composer-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--mute);
}
.composer-attach { cursor: pointer; }
.composer-attach input { display: none; }
.composer-attach span { padding: 3px 8px; border-radius: var(--r-sm); }
.composer-attach:hover span { background: var(--paper-3); }
.composer-status { font-family: var(--mono); font-size: 11px; }
.composer-hint { font-family: var(--mono); font-size: 11px; }

#thread { min-width: 0; }
</style>

<script>
function chatApp() {
  return {
    id: null,
    model: '',
    temperature: 0.7,
    maxTokens: 2048,
    enableThinking: 'off',
    toolsEnabled: true,
    // 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') || '',
    sandboxKind: '',
    messages: [],
    input: '',
    streaming: false,
    partial: '',
    lastEventLabel: '',
    attachStatus: '',
    pendingImages: [],   // [{name, url(dataURL)}] attached to the next user turn
    apiUrl: '{{ api_url }}',
    chats: {{ chats | tojson }},
    // Per-send cancellation handles
    sessionId: null,
    abortCtrl: null,

    async init() {
      await this.refreshList();
      try {
        const r = await fetch('/api/sandbox/info', {credentials: 'same-origin'});
        if (r.ok) {
          const d = await r.json();
          this.sandboxKind = d.kind || 'unknown';
        }
      } catch (e) { /* sandbox info endpoint 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');
      });
    },

    // 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.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(), 5000);
    },

    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;
    },

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

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

    resetThread() {
      this.id = null;
      this.messages = [];
      this.partial = '';
      this.lastEventLabel = '';
    },

    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.lastEventLabel = '';

      if (this.toolsEnabled) {
        await this._sendWithTools();
      } else {
        await this._sendDirect();
      }

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

    // 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.model || undefined,
            messages: apiMessages,
            temperature: this.temperature,
            max_tokens: this.maxTokens,
            enable_thinking: this.enableThinking === 'auto' ? null : (this.enableThinking === 'on'),
            tools_enabled: true,
            adapter: this.selectedAdapter
                     ? this.adapterNameFor(this.selectedAdapter)
                     : null,
          }),
        });
        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. Don't surface as error.
        } else {
          this.messages.push({ role: 'assistant', content: '(error: ' + e.message + ')' });
        }
      } finally {
        this.abortCtrl = null;
        this.sessionId = null;
      }
    },

    _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 === 'cancelled') {
        this.messages.push({ role: 'assistant', content: '(stopped)' });
        return;
      }
      if (ev.event === 'tool_call') {
        this.lastEventLabel = '🛠 calling ' + ev.data.name + '…';
        const card = {
          id: ev.data.id,
          name: ev.data.name,
          arguments: ev.data.arguments,
          healed: ev.data.healed,
          duplicate: ev.data.duplicate || false,
          errored: false,
          result: null,
          elapsed_sec: null,
        };
        pending[ev.data.id] = card;
        this.messages.push({ role: 'tool', tool_card: 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 || [];
        }
        this.lastEventLabel = '';
        this.scrollBottom();
      } else if (ev.event === 'token') {
        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,
        });
        this.partial = '';
      } else if (ev.event === 'error') {
        this.messages.push({ role: 'assistant', content: '(error: ' + (ev.data.message || 'unknown') + ')' });
      }
    },

    // No-tools path: direct stream from mlx-lm
    async _sendDirect() {
      const body = {
        model: this.model || undefined,
        messages: this.messages
          .filter(m => m.role !== 'tool')
          .map(({role, content}) => ({role, content})),
        stream: true,
        max_tokens: this.maxTokens,
        temperature: this.temperature,
      };
      if (this.enableThinking !== 'auto') {
        body.chat_template_kwargs = { enable_thinking: this.enableThinking === 'on' };
      }
      if (this.selectedAdapter) {
        // optiq serve patches mlx_lm.server to read this field and flip
        // the active-adapter ContextVar for the duration of the request.
        body.adapters = this.adapterNameFor(this.selectedAdapter);
      }

      let assembled = '';
      let reasoning = '';
      try {
        const resp = await fetch(this.apiUrl + '/v1/chat/completions', {
          method: 'POST',
          headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer sk-optiq-local'},
          body: JSON.stringify(body),
        });
        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);
            for (const line of frame.split('\n')) {
              if (!line.startsWith('data:')) continue;
              const payload = line.slice(5).trim();
              if (payload === '[DONE]') continue;
              try {
                const chunk = JSON.parse(payload);
                const delta = chunk.choices?.[0]?.delta || {};
                if (delta.content) { assembled += delta.content; this.partial = assembled; this.scrollBottom(); }
                if (delta.reasoning) reasoning += delta.reasoning;
              } catch (e) {}
            }
          }
        }
      } catch (e) {
        assembled = '(error: ' + e.message + ')';
      }

      this.messages.push({ role: 'assistant', content: assembled, reasoning: reasoning || undefined });
    },

    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;
        return out;
      });
      const resp = await fetch('/api/chats', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ id: this.id, title, model: this.model, messages: cleaned }),
        credentials: 'same-origin',
      });
      if (resp.ok) {
        const data = await resp.json();
        this.id = data.id;
        await this.refreshList();
      }
    },

    async load(id) {
      const resp = await fetch('/api/chats/' + id, {credentials: 'same-origin'});
      if (!resp.ok) return;
      const data = await resp.json();
      this.id = data.id;
      this.model = data.model || '';
      this.messages = data.messages || [];
      this.partial = '';
      this.scrollBottom();
    },

    async delChat(id) {
      if (!confirm('Delete this chat?')) return;
      await fetch('/api/chats/' + id, {method: 'DELETE', credentials: 'same-origin'});
      if (this.id === id) this.resetThread();
      await this.refreshList();
    },

    async refreshList() {
      const resp = await fetch('/api/chats', {credentials: 'same-origin'});
      if (resp.ok) {
        const data = await resp.json();
        this.chats = data.chats || [];
      }
    },

    async attachFile(ev) {
      const f = ev.target.files[0];
      if (!f) 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 {
          const url = await new Promise((resolve, reject) => {
            const r = new FileReader();
            r.onload = () => resolve(r.result);
            r.onerror = reject;
            r.readAsDataURL(f);
          });
          this.pendingImages.push({ name: f.name, url });
          this.attachStatus = '🖼 ' + f.name;
        } catch (e) {
          this.attachStatus = 'failed: ' + e.message;
        }
        ev.target.value = '';
        return;
      }

      this.attachStatus = 'extracting ' + f.name + '…';
      const isBinary = /\.(pdf|docx)$/i.test(f.name);
      try {
        if (isBinary) {
          const form = new FormData();
          form.append('file', f);
          const r = await fetch('/api/files/extract', {method: 'POST', body: form, credentials: 'same-origin'});
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const d = await r.json();
          const fenced = '```text\n' + d.text + '\n```';
          this.input = (this.input ? this.input + '\n\n' : '') + fenced;
        } else {
          const text = await f.text();
          const ext = (f.name.split('.').pop() || '').toLowerCase();
          const fenced = '```' + ext + '\n' + text + '\n```';
          this.input = (this.input ? this.input + '\n\n' : '') + fenced;
        }
        this.attachStatus = '✓ ' + f.name;
      } catch (e) {
        this.attachStatus = 'failed: ' + e.message;
      }
      ev.target.value = '';
      this.$nextTick(() => { const el = document.querySelector('.composer-input'); if (el) this.autosize(el); });
    },

    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 '';
      if (typeof marked !== 'undefined') {
        try { return marked.parse(text, { gfm: true, breaks: true }); } catch (e) {}
      }
      return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    },

    // 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 %}