// chat-render.js — 채팅 메시지·아티팩트·프로세스로그·에이전트 실행 패널 렌더링, 큐잉된 프롬프트 패널.
// extracted from app.js (v4.3.19-3 split).

function renderQueuedPromptsPanel() {
  const panel = document.getElementById('queued-prompts-panel');
  const list = document.getElementById('queued-prompts-list');
  const title = document.getElementById('queued-prompts-title');
  if (!panel || !list || !title) return;
  const count = queuedPrompts.length;
  if (count === 0) {
    panel.style.display = 'none';
    list.innerHTML = '';
    return;
  }
  panel.style.display = 'block';
  title.textContent = `Queued prompts (${count})`;
  list.innerHTML = queuedPrompts.map((q, i) => `
    <div class="queued-item">
      <div class="queued-item-text">${escHtml(q)}</div>
      <button class="queued-item-btn" onclick="removeQueuedPrompt(${i})">Remove</button>
    </div>
  `).join('');
}

function removeQueuedPrompt(index) {
  if (!Number.isInteger(index) || index < 0 || index >= queuedPrompts.length) return;
  queuedPrompts.splice(index, 1);
  updateQueuedPromptUI();
}

function clearQueuedPrompts() {
  if (!queuedPrompts.length) return;
  queuedPrompts = [];
  addProcessEntry('info', 'Cleared queued prompts.');
  updateQueuedPromptUI();
}

function updateQueuedPromptUI() {
  const badge = document.getElementById('queued-prompts-indicator');
  const sendBtn = document.getElementById('send-btn');
  const input = document.getElementById('chat-input');
  const count = queuedPrompts.length;
  if (badge) {
    if (count > 0) {
      badge.style.display = 'inline';
      badge.textContent = `Queued: ${count}`;
    } else {
      badge.style.display = 'none';
      badge.textContent = '';
    }
  }
  if (sendBtn) {
    sendBtn.disabled = false;
    sendBtn.title = isThinking ? `Queue next prompt${count ? ` (${count} queued)` : ''}` : 'Send';
  }
  if (input) {
    input.placeholder = isThinking
      ? 'Assistant is responding. Press Enter/Send to queue next prompt.'
      : 'Type a message... (Enter to send, Shift+Enter for newline)';
  }
  renderQueuedPromptsPanel();
}

function renderThinkBlock(thinking) {
  if (!thinking || !thinking.trim()) return '';
  const id = 'think_' + Math.random().toString(36).slice(2);
  const wordCount = thinking.trim().split(/\s+/).length;
  return `
    <div class="think-block">
      <button class="think-toggle" id="${id}_btn" onclick="toggleThink('${id}')">
        <span class="think-icon">...</span>
        <span>Thought process</span>
        <span style="margin-left:auto;opacity:0.5">${wordCount} words</span>
      </button>
      <div class="think-content" id="${id}_body">${escHtml(thinking)}</div>
    </div>
  `;
}

function toggleThink(id) {
  const btn = document.getElementById(id + '_btn');
  const body = document.getElementById(id + '_body');
  if (!btn || !body) return;
  const open = body.style.display !== 'none' && body.style.display !== '';
  body.style.display = open ? 'none' : 'block';
  btn.classList.toggle('open', !open);
}

function renderReactSteps(steps) {
  if (!steps || steps.length === 0) return '';
  const toolSteps = steps.filter(s => s.action);
  if (toolSteps.length === 0) return '';

  const getSearchDiagnostics = (s) => s?.toolData?.search_diagnostics || s?.diagnostics || null;
  const extractUrls = (s, resultText) => {
    const fromToolData = Array.isArray(s?.toolData?.results)
      ? s.toolData.results.map(r => String(r?.url || '').trim()).filter(u => /^https?:\/\//i.test(u))
      : [];
    const fromText = String(resultText || '').match(/https?:\/\/[^\s)]+/g) || [];
    const merged = [...fromToolData, ...fromText.map(u => String(u).trim())];
    const out = [];
    const seen = new Set();
    for (const u of merged) {
      if (!u || seen.has(u)) continue;
      seen.add(u);
      out.push(u);
      if (out.length >= 5) break;
    }
    return out;
  };
  const providerSummary = (diag) => {
    if (!diag || !Array.isArray(diag.attempted) || !diag.attempted.length) return '';
    return diag.attempted.map(a => {
      const p = String(a.provider || '').toLowerCase();
      const status = String(a.status || '').toLowerCase();
      if (status === 'success') {
        const count = Number.isFinite(a.result_count) ? `, ${a.result_count} result${a.result_count === 1 ? '' : 's'}` : '';
        return `${p}=success${count}`;
      }
      if (status === 'skipped') return `${p}=skipped${a.reason ? ` (${a.reason})` : ''}`;
      return `${p}=failed${a.reason ? ` (${a.reason})` : ''}`;
    }).join(' | ');
  };

  const id = 'steps_' + Math.random().toString(36).slice(2);
  const items = toolSteps.map(s => {
    const resultText = typeof s.toolResult === 'string' ? s.toolResult : JSON.stringify(s.toolResult || '');
    const diag = String(s.action || '') === 'web_search' ? getSearchDiagnostics(s) : null;
    const query = String(diag?.query || s?.params?.query || '').trim();
    const selectedProvider = String(diag?.selected_provider || s?.toolData?.provider || '').toLowerCase();
    const providers = diag ? providerSummary(diag) : '';
    const urls = String(s.action || '') === 'web_search' ? extractUrls(s, resultText) : [];
    return `
      <div class="react-step">
        ${s.thought ? `<div class="react-step-thought">${escHtml(s.thought.slice(0, 120))}</div>` : ''}
        <div class="react-step-action">${escHtml(s.action)}</div>
        ${resultText ? `<div class="react-step-result${resultText.startsWith('ERROR') ? ' error' : ''}">${escHtml(resultText.slice(0, 160))}${resultText.length > 160 ? '…' : ''}</div>` : ''}
        ${diag ? `
          <div style="margin-top:6px;font-size:10px;color:var(--muted);line-height:1.5">
            ${query ? `<div><b>query</b>: ${escHtml(query)}</div>` : ''}
            ${selectedProvider ? `<div><b>provider hit</b>: ${escHtml(selectedProvider)}</div>` : ''}
            ${providers ? `<div><b>providers</b>: ${escHtml(providers)}</div>` : ''}
          </div>
        ` : ''}
        ${String(s.action || '') === 'web_search' && !diag ? `
          <div style="margin-top:6px;font-size:10px;color:var(--muted);line-height:1.5">
            ${selectedProvider ? `<div><b>provider hit</b>: ${escHtml(selectedProvider)}</div>` : ''}
          </div>
        ` : ''}
        ${urls.length ? `
          <div style="margin-top:6px;font-size:10px;line-height:1.6">
            <div style="color:var(--muted);margin-bottom:2px"><b>sources</b>:</div>
            ${urls.slice(0, 3).map((u, i) => `<div>${i + 1}. <a href="${escHtml(u)}" target="_blank" rel="noopener noreferrer">${escHtml(u)}</a></div>`).join('')}
          </div>
        ` : ''}
      </div>
    `;
  }).join('');

  return `
    <div class="react-steps-toggle" onclick="toggleSteps('${id}')">
      ? ${toolSteps.length} tool step${toolSteps.length !== 1 ? 's' : ''} used
    </div>
    <div class="react-steps" id="${id}" style="display:none">${items}</div>
  `;
}

function toggleSteps(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const visible = el.style.display !== 'none';
  el.style.display = visible ? 'none' : 'block';
  el.previousElementSibling.textContent = `${visible ? '?' : '?'} ${el.querySelectorAll('.react-step').length} tool step${el.querySelectorAll('.react-step').length !== 1 ? 's' : ''} used`;
}

function renderFileDownloads(steps, processEntries) {
  const seenUrls = new Set();  // normalized (decoded) URLs
  const buttons = [];
  const URL_RE = /\/api\/files\/[^\s)"'\]]+/g;

  function normalizeUrl(u) {
    try { return decodeURIComponent(u); } catch { return u; }
  }

  function extractUrls(text) {
    const urls = [];
    let m;
    while ((m = URL_RE.exec(text)) !== null) urls.push(m[0]);
    return urls;
  }

  // Pre-mark URLs already present in msg.content so tool-result duplicates are suppressed.
  // renderMarkdown() handles content links — we must not render a second button for the same URL.
  // Normalize both sides (decode percent-encoding) before comparing so Korean paths match.
  if (arguments.length > 2 && arguments[2]) {
    const contentText = String(arguments[2]);
    if (contentText.indexOf('/api/files/') !== -1) {
      for (const u of extractUrls(contentText)) seenUrls.add(normalizeUrl(u));
      URL_RE.lastIndex = 0;
    }
  }

  // Collect /api/files/ URLs from tool results only (not content — already handled above)
  const allUrls = [];

  // 1. msg.steps (legacy step events)
  if (steps && steps.length) {
    for (const s of steps) {
      const resultText = typeof s.toolResult === 'string' ? s.toolResult : JSON.stringify(s.toolResult || '');
      allUrls.push(...extractUrls(resultText));
    }
  }

  // 2. msg.processEntries (stored per-message in chatHistory)
  if (processEntries && processEntries.length) {
    for (const e of processEntries) {
      const txt = String(e.content || '');
      if (txt.indexOf('/api/files/') !== -1) allUrls.push(...extractUrls(txt));
    }
  }

  const _imgExts = /\.(jpg|jpeg|png|gif|webp|heic|heif|bmp|svg|avif|tiff|tif)(\?|$)/i;
  for (const rawUrl of allUrls) {
    const normUrl = normalizeUrl(rawUrl);
    if (seenUrls.has(normUrl)) continue;
    seenUrls.add(normUrl);
    const decoded = (() => { try { return decodeURIComponent(rawUrl); } catch { return rawUrl; } })();
    if (_imgExts.test(decoded)) continue; // images shown inline, no download button needed
    const filename = decoded.split('/').pop() || 'download';
    const isPptx = decoded.toLowerCase().indexOf('.pptx') !== -1;
    if (isPptx) {
      const previewId = 'pptx-chat-' + Math.random().toString(36).substr(2, 9);
      buttons.push(`
        <div class="pptx-file-row" style="margin:6px 0">
          <a href="${escHtml(rawUrl)}" onclick="downloadFile(event, this)" class="download-btn" title="Download ${escHtml(filename)}">
            <span class="download-icon">&#11015;</span> ${escHtml(filename)}</a>
          <button class="pptx-preview-btn" onclick="togglePptxPreview('${escHtml(rawUrl)}', '${previewId}', this)" title="Preview slides">&#9664; Preview</button>
          <div id="${previewId}" class="pptx-preview-strip" style="display:none"></div>
        </div>`);
    } else {
      buttons.push(`
        <a href="${escHtml(rawUrl)}" onclick="downloadFile(event, this)" class="download-btn" title="Download ${escHtml(filename)}">
          <span class="download-icon">&#11015;</span> ${escHtml(filename)}</a>`);
    }
  }
  return buttons.length ? `<div style="margin-top:8px">${buttons.join(' ')}</div>` : '';
}

function renderAssistantContent(content) {
  const text = String(content || '');
  const hasStaged = /(^|\n)(Initial chat|Execution result|Final chat):\s*/i.test(text);
  if (!hasStaged) return `<div class="msg-content">${renderMarkdown(text)}</div>`;
  const chunks = text
    .split(/\n\s*---\s*\n/g)
    .map(s => String(s || '').trim())
    .filter(Boolean);
  const html = chunks.map((chunk, idx) => {
    const m = chunk.match(/^(Initial chat|Execution result|Final chat):\s*\n?/i);
    const title = m ? m[1] : `Section ${idx + 1}`;
    const body = m ? chunk.slice(m[0].length).trim() : chunk;
    return `
      <div class="msg-stage">
        <div class="msg-stage-title">${escHtml(title)}</div>
        <div class="msg-content">${renderMarkdown(body)}</div>
      </div>
    `;
  }).join('');
  return `<div class="msg-staged">${html}</div>`;
}

function renderArtifacts(artifacts) {
  const rows = Array.isArray(artifacts) ? artifacts : [];
  if (!rows.length) return '';
  const cards = rows.map((a, idx) => {
    const type = String(a?.type || '').trim();
    const title = String(a?.title || type || `Artifact ${idx + 1}`).trim();
    const status = String(a?.status || 'ok').toLowerCase();
    const pathVal = String(a?.path || '').trim();
    const fromPath = String(a?.from_path || '').trim();
    const toPath = String(a?.to_path || '').trim();
    const summary = String(a?.summary || '').trim();
    const preview = String(a?.preview || '').trim();
    const files = Array.isArray(a?.files) ? a.files.slice(0, 12).map(x => String(x || '')).filter(Boolean) : [];
    const dirs = Array.isArray(a?.directories) ? a.directories.slice(0, 8).map(x => String(x || '')).filter(Boolean) : [];
    const locationTarget = toPath || pathVal || fromPath;
    return `
      <div class="artifact-card">
        <div class="artifact-head">
          <div class="artifact-title">${escHtml(title)}</div>
          <div class="artifact-status ${escHtml(status)}">${escHtml(status)}</div>
        </div>
        ${pathVal ? `<div class="artifact-row"><b>Path:</b> <code>${escHtml(pathVal)}</code></div>` : ''}
        ${fromPath ? `<div class="artifact-row"><b>From:</b> <code>${escHtml(fromPath)}</code></div>` : ''}
        ${toPath ? `<div class="artifact-row"><b>To:</b> <code>${escHtml(toPath)}</code></div>` : ''}
        ${summary ? `<div class="artifact-row">${escHtml(summary)}</div>` : ''}
        ${files.length ? `<div class="artifact-row"><b>Files:</b> ${escHtml(files.join(', '))}${Array.isArray(a?.files) && a.files.length > files.length ? ' ...' : ''}</div>` : ''}
        ${dirs.length ? `<div class="artifact-row"><b>Directories:</b> ${escHtml(dirs.join(', '))}${Array.isArray(a?.directories) && a.directories.length > dirs.length ? ' ...' : ''}</div>` : ''}
        ${preview ? `<div class="artifact-preview">${escHtml(preview)}</div>` : ''}
        ${locationTarget ? `
          <div class="artifact-actions">
            <button class="artifact-btn" onclick="openInFileLocation('${escHtml(locationTarget).replace(/'/g, '&#39;')}')">Open In File Location</button>
          </div>
        ` : ''}
      </div>
    `;
  }).join('');
  return `<div class="artifact-list">${cards}</div>`;
}

async function openInFileLocation(targetPath) {
  const p = String(targetPath || '').trim();
  if (!p) return;
  try {
    const res = await fetch('/api/open-path', {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify({ path: p }),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok || !data?.ok) {
      throw new Error(String(data?.error || `HTTP ${res.status}`));
    }
    addProcessEntry('info', `Opened in file location: ${p}`);
  } catch (err) {
    addProcessEntry('error', `Open path failed: ${String(err?.message || err)}`);
  }
}

// KaTeX auto-render must run AFTER the HTML is in the DOM — innerHTML doesn't execute
// embedded <script>, so this has to be called explicitly wherever chat HTML gets inserted
// (mirrors validateDownloadLinks() right above each call site). mhchem.min.js (loaded in
// index.html alongside katex.min.js) extends KaTeX's math mode with \ce{...} for reaction/
// formula notation, e.g. $\ce{C4H10}$ or $\ce{2H2 + O2 -> 2H2O}$.
// 통화 기호 `$`를 수식 여는 기호로 오인하지 않도록 잠시 감춘다.
//
// KaTeX auto-render는 `$`를 만나면 무조건 인라인 수식의 시작으로 보고 다음 `$`까지를 짝으로
// 묶는다. 그래서 답변에 금액이 하나라도 섞이면 그 뒤의 진짜 수식이 통째로 어긋난다
// (2026-08-19 실제 신고: "월 $100 절감 … 50% $\rightarrow$ 10~20%" 에서 "100 절감. 감액 비율 50"이
// 수식으로 잡히고 `$\rightarrow$`는 날것으로 남았다).
//
// 숫자가 바로 뒤따르는 `$`는 사실상 전부 통화다 — 수식이라면 `$\ce{...}$`, `$\rightarrow$`처럼
// 백슬래시나 문자로 시작한다. 그 `$`만 사설 영역 문자로 바꿔 KaTeX 눈에 안 띄게 했다가,
// 렌더링이 끝난 뒤 남아 있는 텍스트 노드에서 되돌린다(수식으로 바뀐 노드에는 애초에 없다).
const _KATEX_DOLLAR_SENTINEL = '\uE000';

function _walkTextNodes(root, fn) {
  const w = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
  const nodes = [];
  for (let n = w.nextNode(); n; n = w.nextNode()) nodes.push(n);
  for (const n of nodes) fn(n);
}

// `$60\sim80\text{cm}$`, `$25\text{°C}$`처럼 "숫자 + 단위"뿐인 인라인 수식은 모델이 습관적으로
// LaTeX로 감싼 것일 뿐 진짜 수식이 아니다(KaTeX로 렌더하면 이탤릭 수식체라 한글 문장에서 어색하고
// TTS·복사도 망가진다). 단위(\text{}/\mathrm{})가 있고 나머지가 숫자·범위기호·간단한 연산자뿐이면
// 평문으로 푼다. 치환 뒤에도 `\ ^ _ { } =`가 남으면 진짜 수식이므로 손대지 않는다.
function _unwrapTrivialUnitMath(s) {
  if (!s.includes('$')) return s;
  return s.replace(/\$([^$\n]+)\$/g, (full, body) => {
    if (!/\\(?:text|mathrm)\{/.test(body)) return full;
    const t = body
      .replace(/\\(?:text|mathrm|mathbf|mathit)\{([^{}]*)\}/g, '$1')
      .replace(/\\sim/g, '~').replace(/\\approx/g, '≈').replace(/\\times/g, '×')
      .replace(/\\cdot/g, '·').replace(/\\div/g, '÷').replace(/\\pm/g, '±')
      .replace(/\\(?:le|leq)\b/g, '≤').replace(/\\(?:ge|geq)\b/g, '≥').replace(/\\neq\b/g, '≠')
      .replace(/\\to\b/g, '→').replace(/\\(?:ldots|dots)\b/g, '…')
      .replace(/\\(?:circ|degree)\b/g, '°')
      .replace(/\^\{?2\}?/g, '²').replace(/\^\{?3\}?/g, '³')
      .replace(/\\[,!\s]/g, ' ').replace(/\s+/g, ' ').trim();
    return /[\\^_{}=]/.test(t) ? full : t;
  });
}

// `$` 다음에 숫자가 오면 보통 통화지만, `$60\sim80\text{cm}$`처럼 다음 `$`까지의 구간에
// 백슬래시(LaTeX 명령)가 있으면 그건 수식이다 — 그 `$`는 건드리지 않는다.
function _maskCurrencyDollars(s) {
  return s.replace(/\$(?=\d)/g, (m, offset) => {
    const rest = s.slice(offset + 1);
    const end = rest.indexOf('$');
    const span = end === -1 ? rest : rest.slice(0, end);
    return span.includes('\\') ? m : _KATEX_DOLLAR_SENTINEL;
  });
}

function renderKatexIn(container) {
  if (!window.renderMathInElement || !container) return;
  try {
    _walkTextNodes(container, (n) => {
      if (n.nodeValue.includes('$')) {
        n.nodeValue = _maskCurrencyDollars(_unwrapTrivialUnitMath(n.nodeValue));
      }
    });
    renderMathInElement(container, {
      delimiters: [
        { left: '$$', right: '$$', display: true },
        { left: '\\[', right: '\\]', display: true },
        { left: '$', right: '$', display: false },
        { left: '\\(', right: '\\)', display: false },
      ],
      throwOnError: false,
    });
  } catch (e) {
  } finally {
    // 렌더링이 실패했더라도 통화 기호는 반드시 복구한다 — 안 그러면 화면에 빈 네모가 남는다.
    try {
      _walkTextNodes(container, (n) => {
        if (n.nodeValue.includes(_KATEX_DOLLAR_SENTINEL)) {
          n.nodeValue = n.nodeValue.split(_KATEX_DOLLAR_SENTINEL).join('$');
        }
      });
    } catch (e2) {}
  }
}

function renderChatMessages() {
  const container = document.getElementById('chat-messages');

  if (chatHistory.length === 0) {
    container.innerHTML = `
      <div class="chat-welcome" id="chat-welcome">
        <div class="chat-welcome-icon"><img src="${userLogoUrl}" alt="🏠"></div>
        <h2>${brandName}</h2>
        <p>Chat directly with your local model. No API keys, no cloud — just you and the model.</p>
        <div class="hint">Enable Agent mode when you want planning + tool execution in this chat.</div>
      </div>`;
    return;
  }

  container.innerHTML = chatHistory.map((msg, idx) => {
    const pinClass = contextPinMode ? ' pin-selectable' : '';
    const selectedClass = (contextPinMode && pinnedMessageIndices.has(idx)) ? ' pin-selected' : '';
    // Also show green for confirmed pins even outside pin mode
    const confirmedClass = (!contextPinMode && confirmedPins.some(p => p.content === msg.content && p.role === (msg.role === 'user' ? 'user' : 'assistant'))) ? ' pin-selected' : '';
    const clickHandler = contextPinMode ? ` onclick="togglePinMessage(${idx})"` : '';
    if (msg.role === 'widget') {
      return `<div class="msg widget${pinClass}${selectedClass}${confirmedClass}"${clickHandler}><div class="msg-content">${msg.content}</div></div>`;
    }
    return `
    <div class="msg ${msg.role}${pinClass}${selectedClass}${confirmedClass}"${clickHandler}>
      <div class="msg-avatar">${msg.role === 'user' ? 'U' : `<img src="${userLogoUrl}" style="width:48px;height:48px;border-radius:6px">`}</div>
      <div class="msg-body">
        <div class="msg-role">${msg.role === 'user' ? 'You' : (msg.mode === 'agentic' ? `${brandName} (Agent)` : brandName)}${msg.role === 'ai' ? ` <button class="tts-btn" onclick="playTTSMsg(this,${idx})" title="음성으로 듣기">🔊</button>` : ''}</div>
        ${msg.role === 'ai' ? renderAssistantContent(msg.content) : `<div class="msg-content">${renderMarkdown(msg.display !== undefined ? msg.display : msg.content, { hideDownload: true })}</div>`}
        ${msg.role === 'ai' ? renderArtifacts(msg.artifacts) : ''}
        ${msg.role === 'ai' ? renderFileDownloads(msg.steps, msg.processEntries, msg.content) : ''}
        ${msg.role === 'ai' && msg.processEntries && msg.processEntries.length ? renderProcessPill(msg.processEntries) : ''}
        ${msg.role === 'ai' ? renderThinkBlock(msg.thinking) : ''}
        ${msg.role === 'ai' ? renderReactSteps(msg.steps) : ''}
      </div>
    </div>`;
  }).join('');

  validateDownloadLinks(container);
  renderKatexIn(container);
  renderSmilesIn(container);

  if (isThinking && streamingSessionId === activeChatSessionId) {
    const progressHtml = currentProgressLines.length
      ? `<div style="margin:6px 0 8px 0;font-size:11px;line-height:1.6;color:var(--muted)">
          ${currentProgressLines.map((l) => `<div>• ${escHtml(l)}</div>`).join('')}
        </div>`
      : '';
    container.innerHTML += `
      <div class="msg ai" id="thinking-msg">
        <div class="msg-avatar"><img src="${userLogoUrl}" style="width:48px;height:48px;border-radius:6px"></div>
        <div class="msg-body">
          <div class="msg-role">${brandName}${useAgentMode ? ' (Agent)' : ''}</div>
          ${currentPreflightStatus ? `<div class="msg-content" style="margin-bottom:6px;color:#26487e">${escHtml(currentPreflightStatus)}</div>` : ''}
          ${progressHtml}
          <div class="thinking" style="align-items:center">
            <div class="thinking-dot"></div>
            <div class="thinking-dot"></div>
            <div class="thinking-dot"></div>
            <span id="thinking-elapsed" style="margin-left:8px;font-size:11px;color:var(--muted)"></span>
          </div>
          <div style="margin-top:8px">
            <button class="skill-install-btn" style="font-size:10px;padding:3px 9px" onclick="toggleCurrentProcess()">Process</button>
            <div id="current-turn-process" style="display:none;margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:8px;max-height:220px;overflow:auto;font-size:11px;line-height:1.6"></div>
          </div>
        </div>
      </div>`;
  }

  container.scrollTop = container.scrollHeight;
}

function pushProgressLine(line) {
  const txt = String(line || '').trim();
  if (!txt) return;
  const last = currentProgressLines[currentProgressLines.length - 1] || '';
  if (last === txt) return;
  currentProgressLines.push(txt);
  if (currentProgressLines.length > 8) currentProgressLines = currentProgressLines.slice(-8);
  if (isThinking) renderChatMessages();
}

// ---- Process log ----
function renderProcessPill(entries) {
  const id = 'proc_' + Math.random().toString(36).slice(2);
  return `
    <div style="margin-top:8px">
      <button class="skill-install-btn" style="font-size:10px;padding:3px 9px" onclick="togglePL('${id}')">Process</button>
      <div id="${id}" style="display:none;margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:8px;max-height:220px;overflow:auto;font-size:11px;line-height:1.6">
        ${formatProcessLines(entries)}
      </div>
    </div>
  `;
}

function formatProcessLines(entries) {
  if (!entries || entries.length === 0) return '<div style="color:var(--muted)">No process details.</div>';
  const TYPE_COLORS = {
    user: 'var(--text)', think: '#388bfd', tool: '#e3b341',
    result: '#bc8cff', error: 'var(--red)', final: '#56d364',
    warn: 'var(--yellow)', step: '#56d364', info: '#79c0ff',
    split: 'var(--accent2)', synth: 'var(--accent2)',
  };
  return entries.map(e => {
    const rawType = String(e.type || 'info');
    const typeLabel = escHtml(rawType).toUpperCase();
    const typeColor = TYPE_COLORS[rawType] || 'var(--muted)';
    const rawContent = String(e.content || '');
    // Render markdown for result entries so download links show as clickable buttons
    const content = rawType === 'result' ? renderMarkdown(rawContent) : escHtml(rawContent);
    return `<div style="margin-bottom:4px"><span style="color:var(--muted)">[${escHtml(String(e.ts || ''))}]</span> <span style="color:${typeColor};font-weight:600">${typeLabel}</span> ${content}</div>`;
  }).join('');
}

function toggleCurrentProcess() {
  const panel = document.getElementById('current-turn-process');
  if (!panel) return;
  const open = panel.style.display !== 'none';
  panel.style.display = open ? 'none' : 'block';
  if (!open) {
    const turnEntries = currentTurnStartIndex >= 0 ? processLogEntries.slice(currentTurnStartIndex) : [];
    panel.innerHTML = formatProcessLines(turnEntries);
  }
}

function isNearBottom(el, threshold = 40) {
  if (!el) return true;
  return (el.scrollHeight - (el.scrollTop + el.clientHeight)) <= threshold;
}

function setupProcessAndRightScrollTracking() {
  const processEl = document.getElementById('process-log');
  if (processEl && !processEl.dataset.scrollBound) {
    processEl.dataset.scrollBound = '1';
    processEl.addEventListener('scroll', () => {
      processLogAutoFollow = isNearBottom(processEl, 36);
    });
  }

  const rightEl = document.getElementById('right-panel');
  if (rightEl && !rightEl.dataset.scrollBound) {
    rightEl.dataset.scrollBound = '1';
    rightEl.addEventListener('scroll', () => {
      rightColumnAutoFollow = isNearBottom(rightEl, 28);
    });
  }
}

function maybeAutoScrollRightColumn(force = false) {
  const rightEl = document.getElementById('right-panel');
  if (!rightEl) return;
  if (force || rightColumnAutoFollow || isThinking) {
    rightEl.scrollTop = rightEl.scrollHeight;
  }
}

function updateHeartbeatUI() {
  const stateEl = document.getElementById('r-heartbeat-state');
  const metaEl = document.getElementById('r-heartbeat-meta');
  if (stateEl) {
    const state = String(lastHeartbeat.state || 'idle').toLowerCase();
    stateEl.textContent = state || 'idle';
    stateEl.style.color = state === 'running' || state === 'retrying'
      ? 'var(--warn)'
      : (state === 'stalled' ? 'var(--err)' : 'var(--text)');
  }
  if (metaEl) {
    const step = String(lastHeartbeat.current_step || '-');
    const retries = Number(lastHeartbeat.retry_count || 0);
    const fv = Number(lastHeartbeat.format_violation_count || 0);
    const lvl = String(lastHeartbeat.level || '').toLowerCase();
    const lvlTag = lvl ? ` ${lvl}` : '';
    metaEl.textContent = `step:${step} • retries:${retries} • fv:${fv}${lvlTag}`;
  }
}

function clearProcessLog() {
  processLogEntries.length = 0;
  const el = document.getElementById('process-log');
  if (el) el.innerHTML = '<div style="color:var(--muted);text-align:center;padding:20px 0;opacity:0.5">활동 대기 중...</div>';
  processLogAutoFollow = true;
  rightColumnAutoFollow = true;
  maybeAutoScrollRightColumn(true);
  persistActiveChat();
}

function addProcessEntry(type, content, extra) {
  const ts = new Date().toLocaleTimeString();
  processLogEntries.push({ ts, type, content, extra });
  renderProcessLog();
  maybeAutoScrollRightColumn(isThinking || rightColumnAutoFollow);
  persistActiveChat();
  if (isThinking) {
    const panel = document.getElementById('current-turn-process');
    if (panel && panel.style.display !== 'none' && currentTurnStartIndex >= 0) {
      panel.innerHTML = formatProcessLines(processLogEntries.slice(currentTurnStartIndex));
    }
  }
}

function renderProcessLog() {
  const el = document.getElementById('process-log');
  if (!el) return;
  setupProcessAndRightScrollTracking();
  const shouldFollow = processLogAutoFollow || isThinking;

  if (processLogEntries.length === 0) {
    el.innerHTML = '<div style="color:var(--muted);text-align:center;padding:20px 0;opacity:0.5">활동 대기 중...</div>';
    if (shouldFollow) el.scrollTop = el.scrollHeight;
    return;
  }

  el.innerHTML = processLogEntries.map((e,i) => {
    let icon, color, label, labelColor;
    switch(e.type) {
      case 'user':    icon='?'; color='var(--accent2)'; labelColor='var(--text)';     label='USER';   break;
      case 'think':   icon='??'; color='#388bfd';        labelColor='#388bfd';         label='THINK';  break;
      case 'tool':    icon='?'; color='#e3b341';        labelColor='#e3b341';         label='TOOL';   break;
      case 'result':  icon='?'; color='#bc8cff';        labelColor='#bc8cff';         label='OK';     break;
      case 'error':   icon='?'; color='var(--red)';     labelColor='var(--red)';      label='FAIL';   break;
      case 'final':   icon='?'; color='#56d364';        labelColor='#56d364';         label='FINAL';  break;
      case 'warn':    icon='?'; color='var(--yellow)';  labelColor='var(--yellow)';   label='WARN';   break;
      case 'step':    icon='?'; color='#56d364';        labelColor='#56d364';         label='STEP';   break;
      case 'split':   icon='?'; color='var(--accent2)'; labelColor='var(--accent2)';  label='SPLIT';  break;
      case 'synth':   icon='?'; color='var(--accent2)'; labelColor='var(--accent2)';  label='SYNTH';  break;
      case 'info':    icon='·'; color='#79c0ff';        labelColor='#79c0ff';         label='INFO';   break;
      default:        icon='·'; color='var(--muted)';   labelColor='var(--muted)';    label=e.type;   break;
    }

    // Think entries: show full content in a scrollable block
    if (e.type === 'think' && e.content && e.content.length > 60) {
      const id = 'pl_' + Math.random().toString(36).slice(2,8);
      const preview = e.content.slice(0, 80).replace(/\n/g,' ');
      return `
        <div style="margin-bottom:4px">
          <span style="color:var(--muted);font-size:10px">${e.ts}</span>
          <span style="color:${color};margin:0 6px">${icon} <span style="color:${labelColor}">${label}</span></span>
          <span style="color:var(--muted);cursor:pointer;text-decoration:underline;font-size:10px" onclick="togglePL('${id}')">${escHtml(preview)}…</span>
        </div>
        <div id="${id}" style="display:none;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:8px;margin-bottom:6px;white-space:pre-wrap;color:var(--muted);font-size:10px;max-height:200px;overflow-y:auto;font-style:italic">${escHtml(e.content)}</div>
      `;
    }

    // Tool result entries: collapsible if long
    if (e.type === 'result' && e.content && e.content.length > 120) {
      const id = 'pl_' + Math.random().toString(36).slice(2,8);
      const preview = e.content.slice(0, 100).replace(/\n/g,' ');
      return `
        <div style="margin-bottom:4px">
          <span style="color:var(--muted);font-size:10px">${e.ts}</span>
          <span style="color:${color};margin:0 6px">${icon} <span style="color:${labelColor}">${label}</span></span>
          <span style="color:${color};cursor:pointer;font-size:10px" onclick="togglePL('${id}')">${escHtml(preview)}… <span style="opacity:0.5">[expand]</span></span>
        </div>
        <div id="${id}" style="display:none;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:8px;margin-bottom:6px;white-space:pre-wrap;color:var(--text);font-size:10px;max-height:300px;overflow-y:auto">${escHtml(e.content)}</div>
      `;
    }

    // Memory suggestion: show approve/reject buttons
    if (e.type === 'memory') {
      const id = 'pl_mem_' + i;
      const suggest = e.extra || {};
      return `
        <div style="margin-bottom:6px">
          <span style="color:var(--muted);font-size:10px">${e.ts}</span>
          <span style="color:${color};margin:0 6px">${icon} <span style="color:${labelColor}">${label}</span></span>
          <span style="color:var(--text);">${escHtml(String(e.content || ''))}</span>
          <div style="margin-top:6px">
            <button class="btn btn-sm" onclick="confirmMemory(${i})">Approve</button>
            <button class="btn btn-sm" style="margin-left:6px" onclick="rejectMemory(${i})">Reject</button>
          </div>
        </div>
      `;
    }

    // If an 'extra' object/array was provided, show a details toggle
    if (e.extra) {
      const id = 'pl_extra_' + i;
      const pretty = escHtml(JSON.stringify(e.extra, null, 2));
      return `
        <div style="margin-bottom:3px">
          <span style="color:var(--muted);font-size:10px">${e.ts}</span>
          <span style="color:${color}">${icon} <span style="color:${labelColor}">${label}</span></span>
          <span style="color:var(--text);margin-left:8px">${escHtml(String(e.content || ''))}</span>
          <span style="color:var(--muted);cursor:pointer;margin-left:8px;font-size:10px" onclick="togglePL('${id}')">[details]</span>
        </div>
        <pre id="${id}" style="display:none;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:8px;margin-bottom:6px;color:var(--muted);font-size:11px;max-height:300px;overflow:auto">${pretty}</pre>
      `;
    }

    return `<div style="margin-bottom:3px"><span style="color:var(--muted);font-size:10px">${e.ts}</span> <span style="color:${color}">${icon} <span style="color:${labelColor}">${label}</span></span>  <span style="color:var(--text)">${escHtml(String(e.content || ''))}</span></div>`;
  }).join('');

  if (shouldFollow) el.scrollTop = el.scrollHeight;
}

function togglePL(id) {
  const el = document.getElementById(id);
  if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
}

function isFailedTurnReply(text) {
  const t = String(text || '').trim().toLowerCase();
  if (!t) return true;
  if (/^blocked\b/.test(t)) return true;
  if (/^no response received\.?$/.test(t)) return true;
  if (/^connection error:/.test(t)) return true;
  if (/^sorry, i didn'?t catch that/.test(t)) return true;
  if (/could not|couldn't/.test(t) && /(verify|format|synthes|extract|read|write|tool|request)/.test(t)) return true;
  return false;
}


// ---- Agent Execution Tracking ----
function spawnAgentExecution(agentName, taskPrompt, isSubagent = false) {
  const agentId = (isSubagent ? 'sub_' : 'main_') + (++agentIdCounter);
  const agentData = {
    id: agentId,
    name: agentName,
    status: AGENT_STATUS.ACTIVE,
    task: taskPrompt,
    logs: [],
    isSubagent: isSubagent,
    startTime: new Date(),
  };
  agentExecutionMap.set(agentId, agentData);
  renderAgentExecutionPanel();
  return agentId;
}

function addAgentLog(agentId, type, content) {
  const agentData = agentExecutionMap.get(agentId);
  if (!agentData) return;
  const ts = new Date().toLocaleTimeString();
  agentData.logs.push({ ts, type, content });
  // Keep only last 20 logs per agent
  if (agentData.logs.length > 20) agentData.logs.shift();
  renderAgentExecutionPanel();
}

function completeAgentExecution(agentId) {
  const agentData = agentExecutionMap.get(agentId);
  if (!agentData) return;
  agentData.status = AGENT_STATUS.COMPLETED;
  renderAgentExecutionPanel();
}

function pauseAgentExecution(agentId, reason) {
  const agentData = agentExecutionMap.get(agentId);
  if (!agentData) return;
  agentData.status = AGENT_STATUS.PAUSED;
  if (reason) addAgentLog(agentId, 'error', reason);
  renderAgentExecutionPanel();
}

function renderAgentExecutionPanel() {
  const panel = document.getElementById('agent-execution-panel');
  if (!panel) return;

  if (agentExecutionMap.size === 0) {
    panel.innerHTML = '<div style="padding:8px 12px;font-size:11px;color:var(--muted)">작업 실행 대기 중...</div>';
    return;
  }

  const agents = Array.from(agentExecutionMap.values()).sort((a, b) => a.startTime - b.startTime);
  panel.innerHTML = agents.map((agent) => {
    const statusClass = agent.status === AGENT_STATUS.ACTIVE ? 'active' : 
                        agent.status === AGENT_STATUS.COMPLETED ? 'completed' : 'paused';
    const arrow = agent.expanded ? '▼' : '▶';
    const logsHtml = agent.logs.length > 0
      ? agent.logs.map(log => `<div class="agent-log-entry"><span class="agent-log-entry-time">${escHtml(log.ts)}</span><span class="agent-log-entry-type">[${escHtml(log.type.toUpperCase())}]</span><span class="agent-log-entry-content">${escHtml(log.content)}</span></div>`).join('')
      : '<div style="color:var(--muted);opacity:0.6">No logs yet</div>';

    return `
      <div class="agent-item ${agent.expanded ? 'expanded' : ''}" onclick="toggleAgentPanel('${agent.id}')">
        <div class="agent-item-header">
          <span style="color:var(--muted);font-size:10px;min-width:12px">${arrow}</span>
          <div class="agent-item-name">${escHtml(agent.isSubagent ? '└─ ' + agent.name : agent.name)}</div>
          <div class="agent-item-status ${statusClass}">${agent.status.toUpperCase()}</div>
        </div>
        <div class="agent-item-task">${escHtml(agent.task.substring(0, 70))}${agent.task.length > 70 ? '...' : ''}</div>
        <div class="agent-item-logs">${logsHtml}</div>
      </div>
    `;
  }).join('');
}

function toggleAgentPanel(agentId) {
  const agentData = agentExecutionMap.get(agentId);
  if (!agentData) return;
  agentData.expanded = !agentData.expanded;
  renderAgentExecutionPanel();
}

function openProcessLogFile() {
  // Call server endpoint to open the process log file
  if (activeTaskId) {
    fetch(`/api/open-file?task=${encodeURIComponent(activeTaskId)}&type=process`, {
      headers: authHeaders()
    })
      .catch(err => console.error('Unable to open process log:', err));
  }
}

function clearChat() {
  chatHistory = [];
  persistActiveChat();
  renderChatMessages();
}

function toggleExportMenu(e) {
  if (e) e.stopPropagation();
  var menu = document.getElementById('export-menu');
  if (!menu) return;
  var opening = menu.style.display === 'none' || !menu.style.display;
  menu.style.display = opening ? 'block' : 'none';
  if (opening) {
    setTimeout(function() {
      document.addEventListener('click', function closeExport() {
        menu.style.display = 'none';
        document.removeEventListener('click', closeExport);
      });
    }, 0);
  }
}

function exportChat(format) {
  var menu = document.getElementById('export-menu');
  if (menu) menu.style.display = 'none';

  if (!chatHistory || !chatHistory.length) {
    alert('내보낼 채팅 내용이 없습니다.');
    return;
  }

  var sess = chatSessions.find(function(s) { return s.id === activeChatSessionId; });
  var title = (sess && sess.title) ? sess.title : '채팅';
  var dateStr = new Date().toLocaleString('ko-KR');
  var safeName = title.replace(/[^\w가-힣\s-]/g, '').trim().replace(/\s+/g, '_').slice(0, 40) || 'chat';
  var dateSuffix = new Date().toISOString().slice(0, 10);
  var filename = safeName + '_' + dateSuffix;

  var content, mime, ext;

  if (format === 'json') {
    content = JSON.stringify({
      title: title,
      exportedAt: new Date().toISOString(),
      sessionId: activeChatSessionId,
      messages: chatHistory.map(function(m) {
        return { role: m.role, content: (m.display || m.content || '').trim() };
      })
    }, null, 2);
    mime = 'application/json';
    ext = 'json';

  } else if (format === 'md') {
    var lines = ['# ' + title, '', '> 내보낸 시간: ' + dateStr, ''];
    chatHistory.forEach(function(m) {
      var label = m.role === 'user' ? '## 사용자' : '## 어시스턴트';
      var text = (m.display || m.content || '').trim();
      lines.push(label, '', text, '', '---', '');
    });
    content = lines.join('\n');
    mime = 'text/markdown';
    ext = 'md';

  } else {
    var lines = [title, '내보낸 시간: ' + dateStr, '='.repeat(50), ''];
    chatHistory.forEach(function(m) {
      var label = m.role === 'user' ? '[사용자]' : '[AI]';
      var text = (m.display || m.content || '').trim()
        .replace(/!\[[^\]]*\]\([^)]*\)/g, '[이미지]')
        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
        .replace(/[*_`#>]/g, '');
      lines.push(label, text, '');
    });
    content = lines.join('\n');
    mime = 'text/plain';
    ext = 'txt';
  }

  var blob = new Blob([content], { type: mime + '; charset=utf-8' });
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename + '.' + ext;
  document.body.appendChild(a);
  a.click();
  setTimeout(function() { URL.revokeObjectURL(a.href); a.remove(); }, 1000);
}

// Enter to send, Shift+Enter for newline
document.getElementById('chat-input').addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendChat();
  }
});

// Auto-resize textarea
document.getElementById('chat-input').addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = Math.min(this.scrollHeight, 140) + 'px';
});