// ============================================================================
// code.js — Standalone Code Editor page (code.html)
//
// This is a self-contained extract of the code-editor view that also lives
// inside the main app (web-ui/app.js). It is loaded ONLY by code.html so the

const _DBG = false; // set true to enable streaming/editor debug logs
// editor can run in its own browser tab (opened from the 💻 코드 sidebar tab),
// mirroring how the slide wizard opens pptx-wizard.html.
//
// The main app keeps its own in-page code mode (for live code streaming from
// the chat agent), so this file intentionally does not depend on app.js.
// If you change code-view behaviour, update both this file and app.js.
// ============================================================================

// ── Shared helpers (self-contained copies of app.js utilities) ──────────────
function getAuthToken() { try { return sessionStorage.getItem('smallclaw_token') || localStorage.getItem('smallclaw_token') || ''; } catch { return ''; } }
function setAuthToken(t) { try { if (t) { sessionStorage.setItem('smallclaw_token', t); localStorage.setItem('smallclaw_token', t); } else { sessionStorage.removeItem('smallclaw_token'); } } catch {} }
function authHeaders(extra) { const t = getAuthToken(); const h = { ...(extra || {}) }; if (t) h['Authorization'] = 'Bearer ' + t; return h; }
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return '';
}
function escHtml(s) {
  return String(s || '').replace(/&/g,'&amp;').replace(/\\/g,'&#92;').replace(/`/g,'&#96;').replace(/\$/g,'&#36;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
async function api(path, opts = {}) {
  const API = window.location.origin || 'http://127.0.0.1:18789';
  const { headers: optsHeaders, credentials: _discard, ...restOpts } = opts;
  const headers = authHeaders({ 'Content-Type': 'application/json', ...optsHeaders });
  const r = await fetch(API + path, { headers, ...restOpts });
  if (r.status === 401) { setAuthToken(''); window.location.href = '/login.html'; throw new Error('Authentication required'); }
  const ct = String(r.headers.get('content-type') || '').toLowerCase();
  const bodyText = await r.text();
  if (!ct.includes('application/json')) {
    const preview = bodyText.slice(0, 120).replace(/\s+/g, ' ');
    throw new Error(`Expected JSON from ${path}, got ${ct || 'unknown'} (HTTP ${r.status}) :: ${preview}`);
  }
  let data = null;
  try { data = bodyText ? JSON.parse(bodyText) : null; }
  catch { const preview = bodyText.slice(0, 120).replace(/\s+/g, ' '); throw new Error(`Invalid JSON from ${path} (HTTP ${r.status}) :: ${preview}`); }
  if (!r.ok) { const msg = (data && (data.error || data.message)) ? String(data.error || data.message) : `HTTP ${r.status}`; throw new Error(msg); }
  return data;
}

// ── Code Editor View ─────────────────────────────────────────────────────────
let monacoEditor = null;
let monacoReady = false;
let codeFiles = [];       // [{id, name, content, language, model}]
let activeCodeFileId = null;
let codeAiHistory = [];
// Strip code blocks from a history entry before storage.
// File content is re-sent via contextMsg on every request, so repeating it in history
// is pure waste and the main source of payload bloat. Keep only prose/summary text.
function _histEntry(text) {
  if (!text) return text;
  const stripped = text
    .replace(/```[\s\S]*?```/g, '[코드]')   // fenced code blocks → placeholder
    .replace(/<think>[\s\S]*?<\/think>/gi, '') // thinking tags
    .trim();
  return stripped.slice(0, 3000) || text.slice(0, 200); // prose cap; fallback if all stripped
}

// Returns history entries (excluding last/current user msg) up to maxMsgs count AND maxBytes total
function _histForAPI(hist, maxMsgs = 20, maxBytes = 150 * 1024) {
  if (hist.length <= 1) return [];
  const src = hist.slice(0, -1);
  let bytes = 0;
  const result = [];
  for (let i = src.length - 1; i >= 0 && result.length < maxMsgs; i--) {
    const size = (src[i].content || '').length;
    if (bytes + size > maxBytes) break;
    bytes += size;
    result.unshift({ role: src[i].role, content: src[i].content });
  }
  return result;
}
let codeAiAbort = null;
let _codeAiAutoAccept = false; // when true: skip diff review, write files directly
let _autoAcceptTurn = false;   // true during an auto-accept execute phase → triggers completion message
let _prevTurnDoneTools = [];   // legacy: kept for session-clear compatibility
let _readFileCache = {};      // { bareFilename: fullContent } — persists across turns so model remembers Read files
let _historySummary = '';     // compressed summary of old turns injected into system prompt
let _karpathyMode = localStorage.getItem('codeKarpathyMode') === '1'; // Andrej Karpathy coding guidelines
let _pendingImages = []; // { dataUrl: string, mimeType: string }[]
let codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
let activeProjectName = localStorage.getItem('code_active_project') || null;
let codeAiModel = localStorage.getItem('codeAiModel') ?? 'glm-5.1:cloud';
let codeAiTech = localStorage.getItem('codeAiTech') ?? 'auto'; // 'auto' | 'html' | 'python' | 'node'
let codeDiffState = {};  // { fileId: { originalText, modifiedText, hunks, decorationIds, viewZoneIds, resolved, rejected, onReject } }

// Claude Code-style tool definitions sent directly to Ollama by the client loop
const CLIENT_TOOL_DEFS = [
  { type: 'function', function: { name: 'Read', description: '파일 내용을 줄번호와 함께 읽습니다. offset/limit으로 부분 읽기 가능. 컨텍스트에 이미 있는 파일에는 사용하지 마세요.', parameters: { type: 'object', properties: { file: { type: 'string', description: '파일 경로' }, offset: { type: 'number', description: '시작 줄 번호 (1-based, 선택)' }, limit: { type: 'number', description: '읽을 줄 수 (선택)' } }, required: ['file'] } } },
  { type: 'function', function: { name: 'Write', description: '새 파일을 생성하거나 전체 내용을 교체합니다. 기존 파일 수정에는 Edit을 사용하세요.', parameters: { type: 'object', properties: { file: { type: 'string' }, content: { type: 'string', description: '파일 전체 내용' } }, required: ['file', 'content'] } } },
  { type: 'function', function: { name: 'Edit', description: '파일 내 정확한 문자열을 교체합니다. old_string은 파일에 정확히 존재해야 합니다 (공백, 들여쓰기, 줄바꿈 포함).', parameters: { type: 'object', properties: { file: { type: 'string' }, old_string: { type: 'string', description: '교체할 기존 텍스트 (정확히 일치해야 함)' }, new_string: { type: 'string', description: '새 텍스트' } }, required: ['file', 'old_string', 'new_string'] } } },
  { type: 'function', function: { name: 'Glob', description: '파일 패턴으로 파일 목록을 검색합니다. 예: "**/*.py", "src/*.ts"', parameters: { type: 'object', properties: { pattern: { type: 'string', description: '글로브 패턴' } }, required: ['pattern'] } } },
  { type: 'function', function: { name: 'Grep', description: '파일에서 텍스트를 검색합니다. 결과는 "파일:줄번호: 내용" 형식입니다.', parameters: { type: 'object', properties: { pattern: { type: 'string', description: '검색 패턴 (정규식 가능)' }, path: { type: 'string', description: '검색 범위 파일/디렉토리 (선택, 기본: 전체 프로젝트)' }, case_insensitive: { type: 'boolean', description: '대소문자 무시 (기본: false)' } }, required: ['pattern'] } } },
  { type: 'function', function: { name: 'Bash', description: '쉘 명령을 실행합니다. companion.py 연결 시에만 작동합니다.', parameters: { type: 'object', properties: { command: { type: 'string', description: '실행할 명령어' } }, required: ['command'] } } },
];

const CODE_EXTS = new Set(['js','ts','jsx','tsx','py','html','htm','css','scss','java','c','cpp','cs','go','rs','php','rb','swift','kt','vue','svelte','json','yaml','yml','sh','sql']);
const isCodeFile = name => CODE_EXTS.has((name.split('.').pop() || '').toLowerCase());

const CODE_LANG_MAP = {
  js:'javascript', ts:'typescript', jsx:'javascript', tsx:'typescript',
  py:'python', rb:'ruby', go:'go', rs:'rust', java:'java', cs:'csharp',
  cpp:'cpp', c:'c', php:'php', html:'html', css:'css', scss:'scss',
  json:'json', yaml:'yaml', yml:'yaml', md:'markdown', sh:'shell',
  bash:'shell', sql:'sql', xml:'xml', toml:'ini', vue:'html',
};

function codeDetectLang(name) {
  const ext = (name || '').split('.').pop().toLowerCase();
  return CODE_LANG_MAP[ext] || 'plaintext';
}

function updateCodeAiLabel() {
  const label = codeAiModel || 'AI';
  const input = document.getElementById('code-ai-input');
  if (input) input.placeholder = label + '에게 질문... (예: 게임 만들어줘)';
}

function setCodeAiTech(tech) {
  codeAiTech = tech;
  localStorage.setItem('codeAiTech', tech);
}

function initCodeView() {
  updateCodeAiLabel();
  setCodeAiTech(codeAiTech);
  if (monacoReady) { setTimeout(() => { if (monacoEditor) monacoEditor.layout(); }, 50); return; }
  if (typeof require === 'undefined') return;
  require.config({ paths: { vs: '/vendor/vs' } });
  require(['vs/editor/editor.main'], function() {
    monacoReady = true;
    const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
    monacoEditor = monaco.editor.create(document.getElementById('code-editor-container'), {
      theme: isDark ? 'vs-dark' : 'vs',
      language: 'plaintext',
      automaticLayout: true,
      fontSize: 14,
      lineHeight: 22,
      fontFamily: "'D2Coding', 'D2 Coding', monospace",
      minimap: { enabled: true },
      scrollBeyondLastLine: false,
      wordWrap: 'on',
      renderWhitespace: 'selection',
      smoothScrolling: true,
      cursorBlinking: 'smooth',
      mouseWheelZoom: true,
      tabSize: 2,
    });
    monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, codeSaveFile);
    // Broadcast .ino edits to emulator in real-time
    let _syncDebounce = null;
    monacoEditor.onDidChangeModelContent(() => {
      if (_esp32SyncBusy) return;
      clearTimeout(_syncDebounce);
      _syncDebounce = setTimeout(() => {
        const file = codeFiles.find(f => f.id === activeCodeFileId);
        if (!file || !file.name.endsWith('.ino')) return;
        _esp32CodeChannel.postMessage({ type: 'code', code: monacoEditor.getValue() });
      }, 300);
    });
    codeFlushPendingQueue();
    if (!codeFiles.length && !codePendingQueue.length) {
      // Don't create a placeholder file — the model will create files as needed
      renderCodeFileTabs();
    } else renderCodeFileTabs();
    setupCodeVResize();
    csbRestoreSettings();
    setupCodeEditorDrop();
  });
}

function codeNewFile(name, content) {
  // In client-local + project mode: tabs always store bare filenames; the project
  // subfolder prefix is handled transparently by _clientProjectPath at disk I/O time.
  // In server mode with activeProjectName: prefix IS part of the tab name (existing behaviour).
  let fname = name;
  if (!fname) {
    const raw = prompt('파일 이름:', 'untitled.py');
    if (!raw || !raw.trim()) return;
    fname = (localDirHandle && activeProjectName)
      ? raw.trim()
      : (activeProjectName ? `${activeProjectName}/${raw.trim()}` : raw.trim());
  } else if (localDirHandle && activeProjectName) {
    // Strip project prefix so tab names are always bare in client-local mode
    fname = _clientBareFileName(fname.trim());
  }
  fname = fname.trim();
  if (!fname) return;
  const id = 'cf_' + Math.random().toString(36).slice(2, 8);
  const lang = codeDetectLang(fname);
  const model = monacoReady ? monaco.editor.createModel(content || '', lang) : null;
  codeFiles.push({ id, name: fname, content: content || '', language: lang, model });
  switchCodeFile(id);
}

function switchCodeFile(id) {
  const prev = codeFiles.find(f => f.id === activeCodeFileId);
  if (prev && monacoEditor) prev.content = monacoEditor.getValue();
  _DBG && console.log(`[switchCodeFile] ${activeCodeFileId} → ${id} file=${(codeFiles.find(f => f.id === id) || {}).name || '?'}`);
  activeCodeFileId = id;
  const file = codeFiles.find(f => f.id === id);
  if (!file || !monacoEditor) { renderCodeFileTabs(); return; }
  if (!file.model) file.model = monaco.editor.createModel(file.content, file.language);

  // If this file has an active inline diff, re-apply decorations
  if (codeDiffState[id]) {
    monacoEditor.setModel(file.model);
    monacoEditor.focus();
    _showDiffBar(id);
    _applyInlineDiffDecorations(id);
  } else {
    monacoEditor.setModel(file.model);
    monacoEditor.focus();
  }
  renderCodeFileTabs();
  codeUpdateRunButton();
  if (_hideBlankLines) setTimeout(_applyHideBlankLines, 50);
  if (_blockFlipFlop) setTimeout(_applyBlockFlipFlop, 60);
}

function closeCodeFile(id, ev) {
  if (ev) ev.stopPropagation();
  const idx = codeFiles.findIndex(f => f.id === id);
  if (idx === -1) return;
  // Clean up diff view if active
  if (codeDiffState[id]) cleanupCodeDiff(id);
  const file = codeFiles[idx];
  if (file.model) file.model.dispose();
  codeFiles.splice(idx, 1);
  if (!codeFiles.length) { codeNewFile('untitled.py', ''); return; }
  if (activeCodeFileId === id)
    switchCodeFile(codeFiles[Math.min(idx, codeFiles.length - 1)].id);
  else
    renderCodeFileTabs();
}

function renderCodeFileTabs() {
  const bar = document.getElementById('code-file-tabs');
  if (!bar) return;
  bar.innerHTML = codeFiles.map(f => {
    const active = f.id === activeCodeFileId;
    const ds = codeDiffState[f.id];
    const diff = !!ds;
    const unresolved = diff ? ds.hunks.filter((_, i) => !ds.resolved.has(i)).length : 0;
    return `<div class="code-file-tab${active ? ' active' : ''}${diff ? ' diff-active' : ''}" onclick="switchCodeFile('${f.id}')">
      ${unresolved > 0 ? `<span class="code-tab-dot">${unresolved}</span>` : ''}
      <span>${escHtml(f.name)}</span>
      <span class="code-file-tab-close" onclick="closeCodeFile('${f.id}',event)">&times;</span>
    </div>`;
  }).join('');
}

let codeDirLabel = 'code';

// ── Local file system (File System Access API) ────────────────────────────
let localDirHandle = null;
let localTermPath = localStorage.getItem('code_local_term_path') || '';

async function idbHandleGet() {
  return new Promise(resolve => {
    const req = indexedDB.open('code_editor_v1', 1);
    req.onupgradeneeded = e => e.target.result.createObjectStore('handles');
    req.onsuccess = e => {
      const r = e.target.result.transaction('handles', 'readonly').objectStore('handles').get('dir');
      r.onsuccess = () => resolve(r.result || null);
      r.onerror = () => resolve(null);
    };
    req.onerror = () => resolve(null);
  });
}
async function idbHandleSet(handle) {
  return new Promise(resolve => {
    const req = indexedDB.open('code_editor_v1', 1);
    req.onupgradeneeded = e => e.target.result.createObjectStore('handles');
    req.onsuccess = e => {
      const tx = e.target.result.transaction('handles', 'readwrite');
      tx.objectStore('handles').put(handle, 'dir');
      tx.oncomplete = resolve;
      tx.onerror = resolve;
    };
    req.onerror = resolve;
  });
}
async function restoreLocalDirHandle() {
  try {
    const handle = await idbHandleGet();
    if (!handle) return;
    const perm = await handle.queryPermission({ mode: 'readwrite' });
    if (perm === 'granted') {
      localDirHandle = handle;
      updateLocalModeUI();
      // Restore per-project AI session
      if (activeProjectName) {
        const savedId = localStorage.getItem('code_proj_session_' + activeProjectName);
        const savedHist = localStorage.getItem('code_proj_history_' + activeProjectName);
        if (savedId) codeAiSessionId = savedId;
        try { if (savedHist) codeAiHistory = JSON.parse(savedHist); } catch {}
        // 채팅 패널 렌더링 (switchProject와 동일)
        const _msgs = document.getElementById('code-ai-messages');
        if (_msgs) {
          _msgs.innerHTML = '';
          if (codeAiHistory.length) {
            codeAiHistory.forEach(m => codeAiAppend(m.role === 'user' ? 'user' : 'assistant', m.content));
          } else {
            _renderSessionsList();
          }
        }
      }
      codeSbRefresh();
    }
  } catch {}
}

async function openLocalFolder() {
  if (!window.showDirectoryPicker) {
    alert('이 브라우저는 File System Access API를 지원하지 않습니다.\nChrome 또는 Edge를 사용해주세요.');
    return;
  }
  try {
    localDirHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
    await idbHandleSet(localDirHandle);
    if (!localTermPath) {
      const inp = document.getElementById('csb-termpath');
      if (inp && !inp.value) inp.value = '';
    }
    updateLocalModeUI();
    codeSbRefresh();
    // Auto-load files if a project was already remembered
    if (activeProjectName) _clientLoadProjectFiles();
  } catch (e) {
    if (e.name !== 'AbortError') codeAiAppend('system', '⚠️ 폴더 열기 실패: ' + (e.message || e));
  }
}

function updateLocalModeUI() {
  const btn = document.getElementById('code-local-btn');
  const lbl = document.getElementById('csb-folder-label');
  const folderBtn = document.getElementById('code-folder-btn');
  const folderName = localDirHandle ? (localDirHandle.name || '로컬') : '폴더 없음';
  if (btn) {
    btn.title = localDirHandle ? `📂 ${folderName} — 클릭해서 변경` : '로컬 폴더 열기';
    btn.style.color = localDirHandle ? '#22c55e' : '';
    btn.textContent = localDirHandle ? '📂' : '🖥️';
    btn.onclick = openLocalFolder;
  }
  if (lbl) lbl.textContent = localDirHandle ? folderName : '폴더 없음';
  if (folderBtn) { const s = folderBtn.querySelector('span'); if (s) s.textContent = localDirHandle ? folderName : '폴더 없음'; }
  const hdr = document.getElementById('code-header-dir');
  if (hdr) hdr.textContent = localDirHandle ? (activeProjectName || folderName) : '폴더 없음';
  const dd = document.getElementById('code-dropdown-dir');
  if (dd) dd.textContent = localDirHandle ? `📁 ${folderName}` : '📁 폴더 없음';
}

const SKIP_DIRS = new Set(['node_modules', '__pycache__', '.git', 'dist', 'build', '.venv', 'venv', '.cache', '.next', 'out', 'coverage', 'target', '.idea', '.vs']);
// Per-file byte cap for AI context. A minified bundle / large data file can be few
// lines but tens of MB — line-count windowing misses it, so cap by bytes too.
const MAX_AI_FILE_BYTES = 256 * 1024; // 256KB
async function localListFiles(dirHandle, prefix) {
  const files = [];
  try {
    for await (const [name, handle] of dirHandle.entries()) {
      if (name.startsWith('.') || name.endsWith('.crswap')) continue;
      const rel = prefix ? `${prefix}/${name}` : name;
      if (handle.kind === 'directory') {
        if (SKIP_DIRS.has(name)) continue;
        files.push(...await localListFiles(handle, rel));
      } else files.push(rel);
    }
  } catch {}
  return files.sort();
}

async function localReadFile(filename) {
  if (!localDirHandle) return null;
  try {
    const parts = filename.split('/');
    let dir = localDirHandle;
    for (let i = 0; i < parts.length - 1; i++) dir = await dir.getDirectoryHandle(parts[i]);
    const fh = await dir.getFileHandle(parts[parts.length - 1]);
    return await (await fh.getFile()).text();
  } catch { return null; }
}

async function localWriteFile(filename, content) {
  if (!localDirHandle) return false;
  try {
    const parts = filename.split('/');
    let dir = localDirHandle;
    for (let i = 0; i < parts.length - 1; i++) dir = await dir.getDirectoryHandle(parts[i], { create: true });
    const fh = await dir.getFileHandle(parts[parts.length - 1], { create: true });
    const w = await fh.createWritable();
    await w.write(content);
    await w.close();
    return true;
  } catch (e) { console.error('[localWriteFile]', e); return false; }
}

async function localDeleteFile(filename) {
  if (!localDirHandle) return false;
  try {
    const parts = filename.split('/');
    let dir = localDirHandle;
    for (let i = 0; i < parts.length - 1; i++) dir = await dir.getDirectoryHandle(parts[i]);
    await dir.removeEntry(parts[parts.length - 1]);
    return true;
  } catch { return false; }
}

// ── Client-local project path helpers ────────────────────────────────────
// "client-local" = browser File System Access API (localDirHandle).
// Distinguished from "server-local" = server's own workspace on disk.
// When client-local root + activeProjectName are both set, all disk I/O
// is scoped to the project subfolder. The model always sees bare filenames.
function _clientProjectPath(fname) {
  if (!localDirHandle || !activeProjectName) return fname;
  const bare = fname.startsWith(activeProjectName + '/')
    ? fname.slice(activeProjectName.length + 1) : fname;
  return activeProjectName + '/' + bare;
}
function _clientBareFileName(fname) {
  if (!activeProjectName) return fname;
  return fname.startsWith(activeProjectName + '/')
    ? fname.slice(activeProjectName.length + 1) : fname;
}

// Close all open tabs that belong to the client-local project scope,
// then load every code file from the new activeProjectName subfolder.
async function _clientLoadProjectFiles() {
  if (!localDirHandle || !activeProjectName) return;

  // Close all existing tabs (they belonged to the previous project)
  if (codeFiles.length) {
    codeFiles.forEach(f => { try { f.model?.dispose(); } catch {} });
    codeFiles.length = 0;
    activeCodeFileId = null;
    codeDiffState = {};
    renderCodeFileTabs();
  }

  // Ensure the session's directory exists on disk (new session → no folder yet)
  await localDirHandle.getDirectoryHandle(activeProjectName, { create: true }).catch(() => {});

  const allFiles = await localListFiles(localDirHandle, '');
  const projFiles = allFiles.filter(f =>
    f.startsWith(activeProjectName + '/') && isCodeFile(f)
  );

  for (const fpath of projFiles) {
    const bare = _clientBareFileName(fpath);
    const content = await localReadFile(fpath);
    if (content === null || content.length > 300_000) continue; // skip missing/huge
    const id = 'cf_' + Math.random().toString(36).slice(2, 8);
    const lang = codeDetectLang(bare);
    const model = monacoReady ? monaco.editor.createModel(content, lang) : null;
    codeFiles.push({ id, name: bare, content, language: lang, model });
  }

  renderCodeFileTabs();
  // Switch to first file if any
  if (codeFiles.length) switchCodeFile(codeFiles[0].id);

  // Inject file manifest into empty AI history so AI knows existing files
  if (codeFiles.length > 0 && codeAiHistory.length === 0) {
    const manifest = codeFiles.map(f => f.name).join(', ');
    codeAiHistory.push({ role: 'user', content: `[기존 프로젝트 파일: ${manifest}]\n이 파일들이 이미 존재합니다. 새로 만들지 마세요.` });
    codeAiHistory.push({ role: 'assistant', content: '기존 프로젝트 파일 목록을 확인했습니다.' });
  }
}

// ── Terminal output capture (for AI error feedback loop) ─────────────────
// Keeps a rolling plaintext buffer per shell (ANSI stripped). Used to detect
// errors after a run and offer one-click "AI에게 전송" from the terminal.
const _termBuffers = {};          // shellId → string[]  (last 300 lines)
const _TERM_BUF_MAX = 300;
function _stripTerminal(raw) {
  return raw
    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '') // OSC (title 등)
    .replace(/\x1b\[[\d;?]*[a-zA-Z]/g, '')              // CSI (색상, 커서, private mode)
    .replace(/\x1b[^[\]]/g, '')                         // 기타 ESC 시퀀스
    .replace(/[\x00-\x09\x0b-\x1f\x7f]/g, '')          // 제어문자 (\n 제외)
    .replace(/\r/g, '');
}

function _termBufferAppend(shellId, raw) {
  if (!shellId) return;
  const text = _stripTerminal(raw);
  if (!text) return;
  const lines = text.split('\n');
  if (!_termBuffers[shellId]) _termBuffers[shellId] = [];
  const buf = _termBuffers[shellId];
  for (const l of lines) { if (l) buf.push(l); }
  while (buf.length > _TERM_BUF_MAX) buf.shift();
  _termDetectAndShowError(shellId);
}

const _ERROR_PATTERNS = [
  // Python
  /Traceback \(most recent call last\)/,
  /(?:Syntax|Name|Type|Attribute|Import|Indentation|Value|Key|Index|Zero|Overflow|Runtime|OS|IO|File)Error:/,
  /^\s*\^\s*$/,
  // JavaScript / Node
  /Uncaught (?:TypeError|ReferenceError|SyntaxError|Error):/,
  /Error: .+\n?\s+at /,
  /\[Error\]/i,
  // GCC / Arduino 컴파일 에러
  /\berror:\s/,
  /undefined reference to\b/,
  /multiple definition of\b/,
  /expected\s.+before\s/,
  /invalid conversion from\b/,
  /cannot convert\b/,
  /sketch too big/i,
  /\w+\.ino:\d+:\d+:.*error/,
  /\w+\.cpp:\d+:\d+:.*error/,
  /recipe for target.*failed/i,
  /make\[1\].*Error/,
];
let _lastErrorShellId = null;
let _lastErrorText = '';

function _termDetectAndShowError(shellId) {
  const buf = _termBuffers[shellId];
  if (!buf || buf.length < 2) return;
  const recent = buf.slice(-40).join('\n');
  const hasError = _ERROR_PATTERNS.some(re => re.test(recent));
  if (!hasError) return;
  // Deduplicate — don't re-show if same error already triggered
  if (_lastErrorShellId === shellId && _lastErrorText === recent) return;
  _lastErrorShellId = shellId;
  _lastErrorText = recent;
  _showTerminalErrorButton(shellId, recent);
}

function _showTerminalErrorButton(shellId, errorText) {
  const btn = document.getElementById('code-term-ai-error-btn');
  if (btn) { btn.style.display = ''; btn.style.background = '#dc2626'; btn.style.color = '#fff'; btn.dataset.shellId = shellId; }
}

function _sendTerminalErrorToAI(errorText) {
  const input = document.getElementById('code-ai-input');
  if (!input) return;

  // Filter noise lines
  const filtered = errorText.split('\n').filter(l => {
    const t = l.trim();
    if (!t) return false;
    if (/^[A-Za-z]:\\.+>/.test(t)) return false;              // Windows 프롬프트 (명령어 포함)
    if (/^[~/][^\s]*[$#]\s*/.test(t)) return false;           // Unix 프롬프트
    if (/^Hello from the pygame community/.test(t)) return false;
    if (/^https?:\/\/www\.pygame\.org/.test(t)) return false;
    return true;
  });

  // 마지막 Traceback 블록만 추출
  let blockStart = 0;
  for (let i = filtered.length - 1; i >= 0; i--) {
    if (/Traceback \(most recent call last\)/.test(filtered[i])) {
      blockStart = i; break;
    }
  }
  const trimmed = filtered.slice(blockStart).slice(-30).join('\n');
  if (!trimmed) return;

  input.value = '다음 에러를 고쳐줘. Read로 파일을 읽은 뒤 Edit 또는 Write 도구로 파일을 직접 수정해:\n```\n' + trimmed + '\n```';
  input.style.height = '';
  input.dispatchEvent(new Event('input'));
  codeAiSend();
}

function _getXtermVisibleText(term, maxLines = 80) {
  const buf = term.buffer.active;
  const lines = [];
  const endRow = buf.baseY + buf.cursorY;
  const startRow = Math.max(0, endRow - maxLines);
  for (let i = startRow; i <= endRow; i++) {
    const line = buf.getLine(i);
    if (!line) continue;
    const t = line.translateToString(true);
    if (t.trim()) lines.push(t);
  }
  return lines.join('\n');
}

function _sendActiveTermErrorToAI() {
  const btn = document.getElementById('code-term-ai-error-btn');
  const shellId = btn?.dataset.shellId || _lastErrorShellId || activeCodeTermShellId;
  const shell = codeTermShells.find(s => s.id === shellId) || codeTermShells.find(s => s.id === activeCodeTermShellId);
  const text = (shell?.term ? _getXtermVisibleText(shell.term) : '')
    || (shellId && _termBuffers[shellId] || Object.values(_termBuffers).at(-1))?.slice(-40).join('\n')
    || _lastErrorText;
  if (text) _sendTerminalErrorToAI(text);
  if (btn) { btn.style.background = '#1a3a28'; btn.style.color = '#22c55e'; }
}

// Called when a run completes successfully (exit code 0) — clear error button
function _termOnRunSuccess(shellId) {
  _lastErrorShellId = null;
  _lastErrorText = '';
  const btn = document.getElementById('code-term-ai-error-btn');
  if (btn) btn.style.display = 'none';
}

// ── Companion WebSocket (local Python execution) ───────────────────────────
let companionWs = null;
let companionConnected = false;
let companionEverConnected = false; // 한 번이라도 성공한 적 있는지
const COMPANION_URL = 'ws://127.0.0.1:9000';
let companionPlatform = 'unix'; // 'windows' | 'unix', set on shell_ready
let companionHome = '';         // home directory from companion
const localShellIds = new Set(); // shell IDs routed to companion PTY (tab id = shell id)

function companionConnect() {
  if (companionWs && (companionWs.readyState === WebSocket.OPEN || companionWs.readyState === WebSocket.CONNECTING)) return;
  try { companionWs = new WebSocket(COMPANION_URL); } catch { return; }
  companionWs.onopen = () => { companionConnected = true; companionEverConnected = true; updateCompanionStatus(true); };
  companionWs.onclose = () => {
    companionConnected = false; companionWs = null;
    updateCompanionStatus(false);
    // 한 번이라도 연결됐던 경우에만 자동 재연결 (미연결 상태서 콘솔 에러 spam 방지)
    if (companionEverConnected) setTimeout(companionConnect, 5000);
  };
  companionWs.onerror = () => { companionConnected = false; };
  companionWs.onmessage = (ev) => {
    let msg; try { msg = JSON.parse(ev.data); } catch { return; }
    handleCompanionMessage(msg);
  };
}

function updateCompanionStatus(connected) {
  const dot = document.getElementById('companion-dot');
  if (!dot) return;
  dot.style.background = connected ? '#22c55e' : '#6b7280';
  dot.title = connected ? '🐍 Python companion 연결됨' : '🐍 Python companion 미연결 (companion.py 실행 필요) — 클릭해서 재연결';
  const lsBtn = document.getElementById('local-shell-btn');
  if (lsBtn) lsBtn.style.color = connected ? '#22c55e' : '#6b7280';
}

function handleCompanionMessage(msg) {
  // shell_* messages → route by msg.shellId; run messages → active code terminal
  const isShellMsg = msg.type === 'shell_output' || msg.type === 'shell_ready' || msg.type === 'shell_exit';
  const targetId = isShellMsg && msg.shellId ? msg.shellId : activeCodeTermShellId;
  if (!codeTermOpen) toggleCodeTerminal();
  setTimeout(() => {
    const s = codeTermShells.find(s => s.id === targetId) || codeTermShells.find(s => s.id === activeCodeTermShellId);
    if (!s || !s.term) return;
    if (msg.type === 'shell_ready') {
      if (msg.platform) companionPlatform = msg.platform;
      if (msg.home) companionHome = msg.home;
      _companionCdProject(msg.shellId);
    }
    else if (msg.type === 'shell_output') { s.term.write(msg.data); _termBufferAppend(s.id, msg.data); }
    else if (msg.type === 'shell_exit') { s.term.write(`\r\n\x1b[33m[셸 종료 ${msg.code}]\x1b[0m\r\n`); }
    else if (msg.type === 'started') s.term.write(`\r\n\x1b[32m▶ ${msg.filename}\x1b[0m\r\n`);
    else if (msg.type === 'output') { s.term.write(msg.data.replace(/(?<!\r)\n/g, '\r\n')); _termBufferAppend(s.id, msg.data); }
    else if (msg.type === 'exit') { s.term.write(`\r\n\x1b[33m[exit ${msg.code}]\x1b[0m\r\n`); if (msg.code === 0) _termOnRunSuccess(s.id); }
    else if (msg.type === 'error') { s.term.write(`\r\n\x1b[31m오류: ${msg.data}\x1b[0m\r\n`); _termBufferAppend(s.id, msg.data); }
    else if (msg.type === 'killed') s.term.write(`\r\n\x1b[31m[강제 종료]\x1b[0m\r\n`);
  }, codeTermOpen ? 0 : 500);
}

// ⏹ 버튼: 활성 터미널에서 실행 중인 프로세스를 중단
function codeTermKill() {
  const s = codeTermShells.find(s => s.id === activeCodeTermShellId);
  if (!s) return;
  if (localShellIds.has(s.id)) {
    // 로컬(companion) PTY 셸: Ctrl+C만 전송 (PTY 자체는 유지)
    if (companionConnected && companionWs)
      companionWs.send(JSON.stringify({ type: 'input', shellId: s.id, data: '\x03' }));
  } else {
    // 서버 셸: PTY에 Ctrl+C 전송
    if (termWsConnected) termWsSend({ type: 'pty_input', shellId: s.id, data: '\x03' });
  }
  if (s.term) s.term.focus();
}

function _companionCdProject(shellId) {
  if (!companionConnected || !companionWs) return;
  const sid = shellId || activeCodeTermShellId;
  const isWin = companionPlatform === 'windows';
  const sep = isWin ? '\\' : '/';
  const base = (localTermPath || companionHome || '').replace(/[/\\]$/, '');
  if (!base) return;
  const target = activeProjectName ? base + sep + activeProjectName : base;
  const cmd = isWin
    ? `cd /d "${target}"\r`
    : `cd ${JSON.stringify(target)}\r`;
  companionWs.send(JSON.stringify({ type: 'input', shellId: sid, data: cmd }));
}

function csbLoadCodeDir() {}

async function codeSaveFile() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !monacoEditor) return;
  // A pending AI diff keeps the FULL modified text live in the model, so saving
  // now would persist hunks the user hasn't decided on yet. Make them resolve first.
  if (codeDiffState[activeCodeFileId]) {
    codeAiAppend('system', '⚠️ AI 제안 변경이 검토 대기 중입니다. 먼저 ✅/❌로 적용하거나 취소한 뒤 저장하세요.');
    return;
  }
  file.content = monacoEditor.getValue();
  if (!localDirHandle) { codeAiAppend('system', '⚠️ 폴더를 먼저 선택해주세요 (🖥️ 버튼)'); return; }
  const ok = await localWriteFile(_clientProjectPath(file.name), file.content);
  codeAiAppend('system', ok ? `💾 저장: ${file.name}` : '⚠️ 저장 실패');
  if (ok) codeSbRefresh();
}

// ── Terminal infrastructure (PTY over WebSocket) ─────────────────────────
let termWs = null;
let termWsConnected = false;

function termWsConnect() {
  if (termWs && (termWs.readyState === WebSocket.OPEN || termWs.readyState === WebSocket.CONNECTING)) return;
  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
  let url = `${proto}//${location.host}/ws`;
  const token = sessionStorage.getItem('smallclaw_token') || getCookie('smallclaw_session');
  if (token) url += `?token=${encodeURIComponent(token)}`;
  try { termWs = new WebSocket(url); } catch { return; }
  termWs.onopen = () => {
    termWsConnected = true;
    for (const [shellId, inst] of xtermInstances) {
      if (!inst.ptyReady && !localShellIds.has(shellId)) { inst.ptyReady = true; termWsSend({ type: 'pty_spawn', shellId, cols: inst.term.cols, rows: inst.term.rows }); }
    }
  };
  termWs.onmessage = (ev) => {
    let msg; try { msg = JSON.parse(ev.data); } catch { return; }
    if (msg.type === 'pty_output') { const i = xtermInstances.get(msg.shellId); if (i) { i.term.write(msg.data); _termBufferAppend(msg.shellId, msg.data); } }
    else if (msg.type === 'pty_exit') { const i = xtermInstances.get(msg.shellId); if (i) { i.ptyReady = false; i.term.write('\r\n\x1b[90m[exited]\x1b[0m\r\n'); if (msg.code === 0) _termOnRunSuccess(msg.shellId); } }
    else if (msg.type === 'pty_error') { const i = xtermInstances.get(msg.shellId); if (i) i.term.write('\r\n\x1b[31mPTY error: '+(msg.error||'?')+'\x1b[0m\r\n'); }
  };
  termWs.onclose = () => {
    termWsConnected = false; termWs = null;
    for (const [,i] of xtermInstances) i.ptyReady = false;
    setTimeout(termWsConnect, 3000);
  };
  termWs.onerror = () => { termWsConnected = false; };
}

function termWsSend(msg) {
  if (termWs && termWs.readyState === WebSocket.OPEN) { termWs.send(JSON.stringify(msg)); return true; }
  return false;
}

const xtermInstances = new Map();

function createXtermShell(container, shellId) {
  const id = shellId || 'sh_' + Math.random().toString(36).slice(2, 8);
  const sub = document.createElement('div');
  sub.id = 'xterm-' + id;
  sub.style.cssText = 'position:absolute;inset:0';
  container.appendChild(sub);
  const term = new Terminal({
    theme: { background:'#4B1D45', foreground:'#CCCCCC', cursor:'#22c55e',
      selectionBackground:'rgba(34,197,94,0.3)', red:'#E74856', green:'#16C60C',
      yellow:'#C19C00', blue:'#3B78FF', cyan:'#61D6D6', white:'#CCCCCC',
      brightBlack:'#767676', brightGreen:'#69FF69', brightWhite:'#FFFFFF' },
    fontFamily: "'IBM Plex Mono', 'D2Coding', 'NanumGothicCoding', 'Malgun Gothic', 'AppleGothic', monospace",
    fontSize: 13, lineHeight: 1.4, cursorBlink: true, scrollback: 5000,
  });
  const fitAddon = new FitAddon.FitAddon();
  const webLinksAddon = new WebLinksAddon.WebLinksAddon();
  term.loadAddon(fitAddon); term.loadAddon(webLinksAddon);
  term.open(sub); fitAddon.fit();
  // Intercept Ctrl+` inside xterm to toggle the terminal panel.
  // Return false = xterm won't process this key; return true = xterm handles it normally.
  term.attachCustomKeyEventHandler(e => {
    if (e.type === 'keydown' && e.ctrlKey && (e.key === '`' || e.code === 'Backquote')) {
      toggleCodeTerminal();
      return false;
    }
    if (e.type === 'keydown' && e.key === 'Escape' && codeTermFullscreen) {
      toggleCodeTermFullscreen();
      return false;
    }
    return true;
  });
  const inst = { term, fitAddon, ptyReady: false };
  xtermInstances.set(id, inst);
  term.onData(data => {
    if (localShellIds.has(id)) {
      if (companionConnected && companionWs) companionWs.send(JSON.stringify({ type: 'input', shellId: id, data }));
    } else if (termWsConnected && inst.ptyReady) {
      termWsSend({ type: 'pty_input', shellId: id, data });
    }
  });
  term.onResize(({ cols, rows }) => {
    if (localShellIds.has(id)) {
      if (companionConnected && companionWs) companionWs.send(JSON.stringify({ type: 'resize', shellId: id, cols, rows }));
    } else if (termWsConnected && inst.ptyReady) {
      termWsSend({ type: 'pty_resize', shellId: id, cols, rows });
    }
  });
  if (!localShellIds.has(id) && termWsConnected) { inst.ptyReady = true; termWsSend({ type: 'pty_spawn', shellId: id, cols: term.cols, rows: term.rows }); }
  return { id, term, fitAddon, inst };
}

// Init WebSocket connection on load
fetch('/api/status').then(r => r.json()).catch(() => ({})).finally(termWsConnect);

// ── Chat terminal (for chat view) ─────────────────────────────────────────
let chatTermShells = [];
let activeChatTermShellId = null;
let chatTermOpen = false;
let chatTermHeight = 280;

function toggleChatTerminal() {
  const panel = document.getElementById('chat-terminal-panel');
  const btn   = document.getElementById('chat-term-btn');
  if (!panel) return;
  chatTermOpen = !chatTermOpen;
  if (chatTermOpen) {
    panel.style.display = 'flex';
    if (btn) btn.classList.add('active');
    if (!chatTermShells.length) { addChatTermShell(); }
    else { setTimeout(() => { const s = chatTermShells.find(s => s.id === activeChatTermShellId); if (s?.fitAddon) s.fitAddon.fit(); if (s?.term) s.term.focus(); }, 50); }
  } else {
    panel.style.display = 'none';
    if (btn) btn.classList.remove('active');
  }
}
function renderChatShellTabs() {
  const bar = document.getElementById('chat-shell-tabs'); if (!bar) return;
  bar.innerHTML = chatTermShells.map(s => {
    const a = s.id === activeChatTermShellId;
    return `<div class="ct-tab${a?' active':''}" onclick="switchChatTermShell('${s.id}')"><svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" style="opacity:.6"><path d="M14 3v10H2V3h12zM1 2v12h14V2H1zm5 9l3-2.5L6 6v5z"/></svg><span>${escHtml(s.name)}</span>${chatTermShells.length>1?`<span class="ct-tab-close" onclick="closeChatTermShell('${s.id}',event)">&times;</span>`:''}</div>`;
  }).join('');
}
function addChatTermShell() {
  const id = 'ct_' + Math.random().toString(36).slice(2,8);
  chatTermShells.push({ id, name:'bash', ptyReady:false, term:null, fitAddon:null });
  switchChatTermShell(id);
}
function switchChatTermShell(id) {
  const cur = chatTermShells.find(s => s.id === activeChatTermShellId);
  if (cur) { const sub = document.getElementById('xterm-'+cur.id); if (sub) sub.style.display='none'; }
  activeChatTermShellId = id;
  const shell = chatTermShells.find(s => s.id === id); if (!shell) return;
  if (shell.term) {
    const sub = document.getElementById('xterm-'+shell.id); if (sub) sub.style.display='';
    if (shell.fitAddon) shell.fitAddon.fit(); shell.term.focus();
  } else {
    const container = document.getElementById('chat-term-container');
    if (container) { const r = createXtermShell(container, shell.id); shell.term=r.term; shell.fitAddon=r.fitAddon; shell.ptyReady=r.inst.ptyReady; setTimeout(()=>{r.fitAddon.fit();r.term.focus();},50); }
  }
  renderChatShellTabs();
}
function closeChatTermShell(id, ev) {
  if (ev) ev.stopPropagation();
  const idx = chatTermShells.findIndex(s => s.id === id);
  if (idx === -1 || chatTermShells.length <= 1) return;
  termWsSend({ type:'pty_kill', shellId:id });
  const shell = chatTermShells[idx]; if (shell.term) shell.term.dispose();
  xtermInstances.delete(id); const sub = document.getElementById('xterm-'+id); if (sub) sub.remove();
  chatTermShells.splice(idx, 1);
  if (activeChatTermShellId === id) switchChatTermShell(chatTermShells[Math.min(idx,chatTermShells.length-1)].id);
  else renderChatShellTabs();
}
document.addEventListener('DOMContentLoaded', function() {
  const handle = document.getElementById('chat-term-resize-handle'); if (!handle) return;
  let startY=0, startH=0;
  handle.addEventListener('mousedown', function(e) {
    startY=e.clientY; startH=chatTermHeight;
    const onMove = e2 => { const dy=startY-e2.clientY; chatTermHeight=Math.max(120,Math.min(window.innerHeight*.7,startH+dy)); const p=document.getElementById('chat-terminal-panel'); if(p) p.style.height=chatTermHeight+'px'; const s=chatTermShells.find(s=>s.id===activeChatTermShellId); if(s?.fitAddon) s.fitAddon.fit(); };
    const onUp  = () => { document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp); };
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); e.preventDefault();
  });
});

// ── Code editor terminal ──────────────────────────────────────────────────
let codeTermShells = [];
let activeCodeTermShellId = null;
let codeTermOpen = false;

function toggleCodeTerminal() {
  const panel = document.getElementById('code-term-panel');
  const btn   = document.getElementById('code-term-toggle-btn');
  if (!panel) return;
  codeTermOpen = !codeTermOpen;
  if (codeTermOpen) {
    panel.style.display = 'flex';
    if (btn) btn.classList.add('active');
    const { min, max } = _bottomPanelHeightBounds();
    const cur = panel.offsetHeight;
    if (cur < min || cur > max) panel.style.height = Math.round((min + max) / 2) + 'px';
    if (!codeTermShells.length) { setTimeout(() => { if (companionConnected) addLocalShell(); else addCodeTermShell(); }, 60); }
    else { setTimeout(() => { const s = codeTermShells.find(s => s.id === activeCodeTermShellId); if (s?.fitAddon) s.fitAddon.fit(); if (s?.term) { s.term.focus(); const inst = xtermInstances.get(s.id); if (inst?.ptyReady) { if (localShellIds.has(s.id)) { if (companionConnected && companionWs) companionWs.send(JSON.stringify({ type: 'input', shellId: s.id, data: companionPlatform === 'windows' ? 'cls\r' : 'clear\r' })); } else { termWsSend({ type: 'pty_input', shellId: s.id, data: 'clear\r' }); } } } }, 50); }
  } else {
    panel.style.display = 'none';
    if (btn) btn.classList.remove('active');
  }
  if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
}
let codeTermFullscreen = false;
function toggleCodeTermFullscreen() {
  const panel = document.getElementById('code-term-panel');
  const btn   = document.getElementById('code-term-fullscreen-btn');
  if (!panel) return;
  codeTermFullscreen = !codeTermFullscreen;
  panel.classList.toggle('code-term-fullscreen', codeTermFullscreen);
  if (btn) { btn.classList.toggle('active', codeTermFullscreen); btn.title = codeTermFullscreen ? '전체화면 종료 (Esc)' : '전체화면'; }
  setTimeout(() => {
    const s = codeTermShells.find(s => s.id === activeCodeTermShellId);
    if (s?.fitAddon) s.fitAddon.fit();
    if (s?.term) s.term.focus();
  }, 60);
}
document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && codeTermFullscreen) toggleCodeTermFullscreen();
});
// ── Browser Preview Panel ────────────────────────────────────────────────────
let codePreviewOpen = false;
function toggleCodePreview() {
  const panel = document.getElementById('code-preview-panel');
  const btn   = document.getElementById('code-preview-toggle-btn');
  if (!panel) return;
  codePreviewOpen = !codePreviewOpen;
  if (codePreviewOpen) {
    panel.style.display = 'flex';
    if (btn) btn.classList.add('active');
    const urlInput = document.getElementById('code-preview-url');
    const saved = localStorage.getItem('code_preview_url');
    if (saved && urlInput) urlInput.value = saved;
    const iframe = document.getElementById('code-preview-iframe');
    if (iframe && !iframe.getAttribute('src')) iframe.src = (urlInput ? urlInput.value : 'http://127.0.0.1:8000');
  } else {
    panel.style.display = 'none';
    if (btn) btn.classList.remove('active');
  }
  if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
}
let _emuPanelOpen = false;
let _emuPanelUrl  = '';

function toggleEmuPanel() {
  const panel = document.getElementById('code-emu-panel');
  const btn   = document.getElementById('code-emu-btn');
  if (!panel) return;
  _emuPanelOpen = !_emuPanelOpen;
  panel.style.display = _emuPanelOpen ? 'flex' : 'none';
  if (btn) btn.classList.toggle('active', _emuPanelOpen);
  if (!_emuPanelOpen) {
    const iframe = document.getElementById('code-emu-iframe');
    if (iframe) iframe.src = '';
    _emuPanelUrl = '';
  }
  if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
}

function _emuPanelLoad(url, title) {
  const panel  = document.getElementById('code-emu-panel');
  const iframe = document.getElementById('code-emu-iframe');
  const lbl    = document.getElementById('emu-panel-title');
  const btn    = document.getElementById('code-emu-btn');
  if (!panel || !iframe) return;
  _emuPanelUrl = url;
  iframe.src = url;
  if (lbl) lbl.textContent = title || '에뮬레이터';
  if (!_emuPanelOpen) {
    _emuPanelOpen = true;
    panel.style.display = 'flex';
    if (btn) btn.classList.add('active');
    if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
  }
}

function emuPanelNewTab() {
  if (_emuPanelUrl) window.open(_emuPanelUrl, '_blank');
}

// 하단 패널(클로드 앱, 터미널 등) 높이는 항상 전체 높이의 1/2~7/10 사이로 제한한다.
function _bottomPanelHeightBounds() {
  const total = document.getElementById('code-view')?.clientHeight || window.innerHeight;
  return { min: total * 0.5, max: total * 0.7 };
}

let _claudePanelOpen = false;
function toggleClaudeAppPanel() {
  const panel = document.getElementById('code-claude-panel');
  const btn   = document.getElementById('code-claude-btn');
  if (!panel) return;
  _claudePanelOpen = !_claudePanelOpen;
  panel.style.display = _claudePanelOpen ? 'flex' : 'none';
  if (btn) btn.classList.toggle('active', _claudePanelOpen);
  if (_claudePanelOpen) {
    const iframe = document.getElementById('code-claude-iframe');
    if (iframe && !iframe.getAttribute('src')) iframe.src = '/claude-app.html';
    const { min, max } = _bottomPanelHeightBounds();
    const cur = panel.offsetHeight;
    if (cur < min || cur > max) panel.style.height = Math.round((min + max) / 2) + 'px';
  }
  if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
}
// Claude App panel resize drag
document.addEventListener('DOMContentLoaded', function() {
  const drag  = document.getElementById('code-claude-drag');
  const panel = document.getElementById('code-claude-panel');
  if (!drag || !panel) return;
  let startY = 0, startH = 0;
  drag.addEventListener('mouseover', () => drag.style.background = 'rgba(189,147,249,.4)');
  drag.addEventListener('mousedown', e => {
    startY = e.clientY; startH = panel.offsetHeight; e.preventDefault();
    const { min, max } = _bottomPanelHeightBounds();
    // 드래그 중 마우스가 iframe 위로 지나가면 부모 document가 mousemove/mouseup을 못 받아
    // 드래그가 안 풀리므로, 드래그하는 동안은 iframe이 마우스 이벤트를 가로채지 않게 한다.
    const iframe = document.getElementById('code-claude-iframe');
    if (iframe) iframe.style.pointerEvents = 'none';
    const onMove = e2 => {
      const dy = startY - e2.clientY;
      panel.style.height = Math.max(min, Math.min(max, startH + dy)) + 'px';
    };
    const onUp = () => {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
      drag.style.background = '';
      if (iframe) iframe.style.pointerEvents = '';
    };
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
  });
});

function openArduinoEmulator() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  const btn  = document.getElementById('code-emu-btn');

  if (!file || !file.name.endsWith('.ino')) {
    _emuPanelLoad('/arduino-emulator.html', '에뮬레이터');
    return;
  }

  const content  = file.model ? file.model.getValue() : (file.content || '');
  const fqbn     = _csbSelBoard.fqbn;
  const fqbnArch = fqbn.split(':')[1] || '';

  if (fqbnArch === 'esp32') {
    if (btn) { btn.textContent = '⏳ 컴파일 중…'; btn.disabled = true; }
    _emuPanelLoad('/arduino-emulator.html?loading=1', `ESP32 — ${file.name}`);
    codeAiAppend('system', `🖥️ ESP32 에뮬레이터 컴파일 중... [${_csbSelBoard.name}]`);
    try { localStorage.setItem('esp32_sketch', content); } catch {}
    api('/api/arduino/qemu/start', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ code: content, fqbn }) })
      .then(d => {
        if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
        if (d.error) {
          const isUnsupported = d.error.includes('미지원') || d.error.includes('RISC-V');
          if (isUnsupported) codeAiAppend('system', '⚠️ ' + d.error);
          else sendCompileErrorToAI(d.error, file.name, content);
          toggleEmuPanel();
          return;
        }
        const _proj = activeProjectName ? '&project=' + encodeURIComponent(activeProjectName) : '';
        const url = `/arduino-emulator.html?session=${d.id}&file=${encodeURIComponent(file.name)}&fqbn=${encodeURIComponent(fqbn)}${_proj}`;
        _emuPanelLoad(url, `ESP32 — ${file.name}`);
        codeAiAppend('system', `✅ ESP32 에뮬레이터 실행 중.`);
      }).catch(e => {
        if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
        codeAiAppend('system', '⚠️ ' + e.message);
        toggleEmuPanel();
      });

  } else if (fqbnArch === 'esp8266') {
    if (btn) { btn.textContent = '⏳ 컴파일 중…'; btn.disabled = true; }
    _emuPanelLoad('/arduino-emulator.html?loading=1', `ESP8266 — ${file.name}`);
    codeAiAppend('system', `🖥️ ESP8266 에뮬레이터 컴파일 중... [${_csbSelBoard.name}]`);
    try { localStorage.setItem('esp8266_sketch', content); } catch {}
    api('/api/arduino/esp8266/start', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ code: content, fqbn }) })
      .then(d => {
        if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
        if (d.error) {
          sendCompileErrorToAI(d.error, file.name, content);
          toggleEmuPanel();
          return;
        }
        const _proj = activeProjectName ? '&project=' + encodeURIComponent(activeProjectName) : '';
        const url = `/arduino-emulator.html?session=${d.id}&file=${encodeURIComponent(file.name)}&fqbn=${encodeURIComponent(fqbn)}${_proj}`;
        _emuPanelLoad(url, `ESP8266 — ${file.name}`);
        codeAiAppend('system', `✅ ESP8266 에뮬레이터 실행 중.`);
      }).catch(e => {
        if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
        codeAiAppend('system', '⚠️ ' + e.message);
        toggleEmuPanel();
      });

  } else if (fqbn.startsWith('STMicroelectronics:stm32')) {
    if (btn) { btn.textContent = '⏳ 컴파일 중…'; btn.disabled = true; }
    _emuPanelLoad('/arduino-emulator.html?loading=1', `STM32 — ${file.name}`);
    codeAiAppend('system', `🖥️ STM32 Renode 에뮬레이터 컴파일 중... [${_csbSelBoard.name}]`);
    try { localStorage.setItem('stm32_sketch', content); } catch {}
    api('/api/arduino/renode/start', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ code: content, fqbn }) })
      .then(d => {
        if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
        if (d.error) {
          sendCompileErrorToAI(d.error, file.name, content);
          toggleEmuPanel();
          return;
        }
        const _proj = activeProjectName ? '&project=' + encodeURIComponent(activeProjectName) : '';
        const url = `/arduino-emulator.html?session=${d.id}&file=${encodeURIComponent(file.name)}&fqbn=${encodeURIComponent(fqbn)}${_proj}`;
        _emuPanelLoad(url, `STM32 — ${file.name}`);
        codeAiAppend('system', `✅ STM32 Renode 에뮬레이터 실행 중.`);
      }).catch(e => {
        if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
        codeAiAppend('system', '⚠️ ' + e.message);
        toggleEmuPanel();
      });

  } else {
    // AVR 및 기타
    if (btn) { btn.textContent = '⏳ 컴파일 중…'; btn.disabled = true; }
    fetch('/api/arduino/compile', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', ...authHeaders({}) },
      body: JSON.stringify({ code: content, board: fqbn, fqbn }),
    }).then(r => r.json()).then(data => {
      if (btn) { btn.textContent = '🖥️ 에뮬레이터'; btn.disabled = false; }
      if (data.autoInstalled?.length) codeAiAppend('system', `📦 라이브러리 자동 설치: ${data.autoInstalled.join(', ')}`);
      if (data.error) { sendCompileErrorToAI(data.error, file.name, content); return; }
      if (data.hex) {
        sessionStorage.setItem('arduino_hex', data.hex);
        sessionStorage.setItem('arduino_sketch', content);
        _emuPanelLoad('/arduino-emulator.html', `AVR — ${file.name}`);
      } else if (data.boardType === 'rp2040') {
        sessionStorage.setItem('arduino_uf2', data.bin);
        sessionStorage.setItem('arduino_sketch', content);
        _emuPanelLoad('/arduino-emulator.html', `RP2040 — ${file.name}`);
      } else if (data.bin) {
        const ext = data.boardType === 'uf2' ? '.uf2' : '.bin';
        const blob = new Blob([Uint8Array.from(atob(data.bin), c => c.charCodeAt(0))], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = file.name.replace(/\.ino$/, '') + ext; a.click();
        URL.revokeObjectURL(url);
        codeAiAppend('system', `✅ 컴파일 완료 (${(data.size/1024).toFixed(1)} KB) — ${ext.slice(1).toUpperCase()} 다운로드됨.\n보드에 올리려면 ⚡ 업로드 버튼을 사용하세요.`);
      }
    }).catch(e => {
      if (btn) { btn.textContent = '🖥️  에뮬레이터'; btn.disabled = false; }
      codeAiAppend('system', '⚠️ 서버 오류: ' + e.message);
    });
  }
}

// ── Arduino 업로드 페이지 열기 ────────────────────────────────────────────────
function csbUploadToBoard() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !file.name.endsWith('.ino')) {
    codeAiAppend('system', '⚠️ .ino 파일을 선택해주세요'); return;
  }
  cupOpenWith(file);
}

function codePreviewRefresh() {
  const urlInput = document.getElementById('code-preview-url');
  const iframe = document.getElementById('code-preview-iframe');
  if (!iframe) return;
  const url = urlInput ? urlInput.value.trim() : 'http://127.0.0.1:8000';
  if (url) { localStorage.setItem('code_preview_url', url); iframe.src = url; }
}
// Preview panel resize drag
document.addEventListener('DOMContentLoaded', function() {
  const drag  = document.getElementById('code-preview-drag');
  const panel = document.getElementById('code-preview-panel');
  if (!drag || !panel) return;
  let startY=0, startH=0;
  drag.addEventListener('mouseover', ()=>drag.style.background='rgba(96,165,250,.4)');
  drag.addEventListener('mousedown', e => {
    startY=e.clientY; startH=panel.offsetHeight; e.preventDefault();
    const iframe = document.getElementById('code-preview-iframe');
    if (iframe) iframe.style.pointerEvents = 'none';
    const onMove = e2 => {
      const dy = startY - e2.clientY;
      panel.style.height = Math.max(100, Math.min(window.innerHeight*.7, startH+dy)) + 'px';
    };
    const onUp = () => {
      document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp);
      drag.style.background='';
      if (iframe) iframe.style.pointerEvents = '';
    };
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
  });
});

function renderCodeTermTabs() {
  const bar = document.getElementById('code-term-tabs'); if (!bar) return;
  bar.innerHTML = codeTermShells.map(s => {
    const a = s.id === activeCodeTermShellId;
    const label = s.local ? '🖥️ 로컬' : 'bash';
    return `<div style="display:flex;align-items:center;gap:5px;padding:0 10px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;color:${a?'#c8e6c0':'#3d6b4f'};background:${a?'#0c0c0c':'transparent'};border-top:${a?'2px solid #22c55e':'2px solid transparent'};white-space:nowrap;user-select:none" onclick="switchCodeTermShell('${s.id}')">
      <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" style="opacity:.7"><path d="M14 3v10H2V3h12zM1 2v12h14V2H1zm5 9l3-2.5L6 6v5z"/></svg>
      ${label}${codeTermShells.length>1?` <span onclick="closeCodeTermShell('${s.id}',event)" style="color:#3d6b4f;margin-left:3px">&times;</span>`:''}
    </div>`;
  }).join('');
}

function addLocalShell() {
  if (!companionConnected) {
    alert('companion.py가 실행되지 않았습니다.\n\n터미널에서: python companion.py');
    return;
  }
  const id = 'cdt_' + Math.random().toString(36).slice(2, 8);
  codeTermShells.push({ id, name: '로컬', local: true, ptyReady: false, term: null, fitAddon: null });
  localShellIds.add(id);
  if (!codeTermOpen) toggleCodeTerminal();
  switchCodeTermShell(id);
  setTimeout(() => {
    const shell = codeTermShells.find(s => s.id === id);
    if (companionConnected && companionWs && shell?.term) {
      if (shell.fitAddon) shell.fitAddon.fit();
      const rows = shell.term.rows > 0 ? shell.term.rows : 24;
      const cols = shell.term.cols > 0 ? shell.term.cols : 80;
      companionWs.send(JSON.stringify({ type: 'shell', shellId: id, rows, cols }));
      setTimeout(() => { if (companionConnected && companionWs) companionWs.send(JSON.stringify({ type: 'input', shellId: id, data: companionPlatform === 'windows' ? 'cls\r' : 'clear\r' })); }, 800);
    }
  }, 300);
}
function addCodeTermShell() {
  const id = 'cdt_' + Math.random().toString(36).slice(2,8);
  codeTermShells.push({ id, name:'☁️서버', ptyReady:false, term:null, fitAddon:null });
  switchCodeTermShell(id);
  const _termClear = (delay) => setTimeout(() => {
    const inst = xtermInstances.get(id);
    if (inst?.ptyReady) termWsSend({ type: 'pty_input', shellId: id, data: 'clear\r' });
    else setTimeout(() => { const i2 = xtermInstances.get(id); if (i2?.ptyReady) termWsSend({ type: 'pty_input', shellId: id, data: 'clear\r' }); }, 800);
  }, delay);
  if (localTermPath) {
    setTimeout(() => {
      const inst = xtermInstances.get(id);
      if (inst?.ptyReady) { termWsSend({ type: 'pty_input', shellId: id, data: `cd ${JSON.stringify(localTermPath)}\r` }); _termClear(200); }
      else setTimeout(() => { const i2 = xtermInstances.get(id); if (i2?.ptyReady) { termWsSend({ type: 'pty_input', shellId: id, data: `cd ${JSON.stringify(localTermPath)}\r` }); _termClear(200); } }, 800);
    }, 400);
  } else {
    _termClear(400);
  }
}

function csbTermPathSave() {
  const inp = document.getElementById('csb-termpath');
  localTermPath = (inp?.value || '').trim();
  localStorage.setItem('code_local_term_path', localTermPath);
  // Show confirmation inline (not in chat window)
  const status = document.getElementById('csb-termpath-status');
  if (status) {
    status.textContent = localTermPath ? `✅ 저장됨: ${localTermPath}` : '경로 초기화됨';
    status.style.color = 'var(--brand)';
    setTimeout(() => { status.textContent = '새 터미널 탭 열면 이 경로로 자동 이동'; status.style.color = ''; }, 2500);
  }
  // Apply cd to all currently open terminals immediately
  if (localTermPath) {
    const isWin = companionPlatform === 'windows';
    for (const s of codeTermShells) {
      if (localShellIds.has(s.id)) {
        if (companionConnected && companionWs) {
          const cmd = isWin
            ? `cd /d "${localTermPath}"\r`
            : `cd ${JSON.stringify(localTermPath)}\r`;
          companionWs.send(JSON.stringify({ type: 'input', shellId: s.id, data: cmd }));
        }
      } else if (s.ptyReady) {
        termWsSend({ type: 'pty_input', shellId: s.id, data: `cd ${JSON.stringify(localTermPath)}\r` });
      }
    }
  }
}
function switchCodeTermShell(id) {
  const cur = codeTermShells.find(s => s.id === activeCodeTermShellId);
  if (cur) { const sub = document.getElementById('xterm-'+cur.id); if (sub) sub.style.display='none'; }
  activeCodeTermShellId = id;
  const shell = codeTermShells.find(s => s.id === id); if (!shell) return;
  if (shell.term) {
    const sub = document.getElementById('xterm-'+shell.id); if (sub) sub.style.display='';
    if (shell.fitAddon) shell.fitAddon.fit(); shell.term.focus();
  } else {
    const container = document.getElementById('code-term-container');
    if (container) { const r = createXtermShell(container, shell.id); shell.term=r.term; shell.fitAddon=r.fitAddon; shell.ptyReady=r.inst.ptyReady; setTimeout(()=>{r.fitAddon.fit();r.term.focus();},50); }
  }
  renderCodeTermTabs();
}
function closeCodeTermShell(id, ev) {
  if (ev) ev.stopPropagation();
  const idx = codeTermShells.findIndex(s => s.id === id);
  if (idx === -1 || codeTermShells.length <= 1) return;
  if (localShellIds.has(id)) {
    localShellIds.delete(id);
    if (companionConnected && companionWs)
      companionWs.send(JSON.stringify({ type: 'shell_close', shellId: id }));
  } else {
    termWsSend({ type:'pty_kill', shellId:id });
  }
  const shell = codeTermShells[idx]; if (shell.term) shell.term.dispose();
  xtermInstances.delete(id); const sub = document.getElementById('xterm-'+id); if (sub) sub.remove();
  codeTermShells.splice(idx, 1);
  if (activeCodeTermShellId === id) switchCodeTermShell(codeTermShells[Math.min(idx,codeTermShells.length-1)].id);
  else renderCodeTermTabs();
}
// Resize drag (top edge → pull up/down)
document.addEventListener('click', e => { if (!e.target.closest('#csb-ctx')) csbCtxClose(); });
document.addEventListener('DOMContentLoaded', function() {
  const drag  = document.getElementById('code-term-drag');
  const panel = document.getElementById('code-term-panel');
  if (!drag || !panel) return;
  let startY=0, startH=0;
  drag.addEventListener('mouseover', ()=>drag.style.background='rgba(34,197,94,.4)');
  drag.addEventListener('mousedown', e => {
    startY=e.clientY; startH=panel.offsetHeight; e.preventDefault();
    const { min, max } = _bottomPanelHeightBounds();
    const onMove = e2 => {
      const dy = startY - e2.clientY;
      panel.style.height = Math.max(min, Math.min(max, startH+dy)) + 'px';
      const s = codeTermShells.find(s => s.id === activeCodeTermShellId); if (s?.fitAddon) s.fitAddon.fit();
    };
    const onUp = () => { document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp); drag.style.background=''; };
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
  });
});
// Restore log panel collapsed state
(function() {
  if (localStorage.getItem('logPanelCollapsed') === '1') {
    const panel = document.getElementById('sidebar-log-panel');
    if (panel) panel.classList.add('collapsed');
  }
  // Restore preview URL input
  const savedUrl = localStorage.getItem('code_preview_url');
  if (savedUrl) { const el = document.getElementById('code-preview-url'); if (el) el.value = savedUrl; }
})();

// Ctrl+` shortcut — for Monaco / non-xterm focus; xterm handles it via attachCustomKeyEventHandler
document.addEventListener('keydown', e => {
  if (e.ctrlKey && (e.key === '`' || e.code === 'Backquote')) {
    e.preventDefault();
    toggleCodeTerminal();
  }
});

// ── Code Run: multi-mode execution ──────────────────────────────────────────

const CODE_RUN_MODES = {
  html: [
    { id: 'browser',  icon: '🌐', label: '브라우저',     desc: '새 탭에서 열기' },
    { id: 'terminal', icon: '⌨',  label: '터미널',       desc: '웹 서버로 실행' },
  ],
  htm: 'html',
  py: [
    { id: 'companion', icon: '🖥️', label: '로컬 실행',    desc: 'companion.py (pygame 지원)' },
    { id: 'pyodide',   icon: '🐍', label: 'Pyodide',      desc: '브라우저에서 실행' },
    { id: 'companion', icon: '🖥️', label: 'python3 로컬', desc: '로컬 셸에서 실행' },
  ],
  js: [
    { id: 'companion', icon: '🖥️', label: 'node 로컬',     desc: '로컬 셸에서 실행' },
    { id: 'terminal',  icon: '☁️', label: 'node 서버',     desc: '서버 터미널에서 실행' },
  ],
  ts: [
    { id: 'companion', icon: '🖥️', label: 'ts-node 로컬',  desc: '로컬 셸에서 실행' },
    { id: 'terminal',  icon: '☁️', label: 'ts-node 서버',  desc: '서버 터미널에서 실행' },
  ],
  go: [
    { id: 'terminal', icon: '⌨',  label: 'go run',        desc: '터미널에서 실행' },
  ],
  rs: [
    { id: 'terminal', icon: '⌨',  label: 'rustc',        desc: '터미널에서 실행' },
  ],
  cpp: [
    { id: 'terminal', icon: '⌨',  label: 'g++',          desc: '터미널에서 실행' },
  ],
  c: [
    { id: 'terminal', icon: '⌨',  label: 'gcc',          desc: '터미널에서 실행' },
  ],
  sh: [
    { id: 'terminal', icon: '⌨',  label: 'bash',         desc: '터미널에서 실행' },
  ],
  ino: [
    { id: 'arduino', icon: '🔌', label: '에뮬레이터', desc: 'AVR/STM32/ESP 에뮬레이터 (보드에 따라 자동 선택)' },
    { id: 'esp32',   icon: '⚡', label: 'ESP32 플래시',      desc: 'Web Serial로 ESP32에 업로드' },
    { id: 'terminal', icon: '⌨', label: 'arduino-cli',    desc: '터미널에서 빌드/업로드' },
  ],
};

function codeGetRunModes(ext) {
  const modes = CODE_RUN_MODES[ext];
  if (!modes) return [{ id: 'terminal', icon: '⌨', label: '터미널', desc: '터미널에서 실행' }];
  if (typeof modes === 'string') return CODE_RUN_MODES[modes];
  return modes;
}

let _codeRunMenuOpen = false;

function codeToggleRunMenu() {
  const menu = document.getElementById('code-run-menu');
  if (_codeRunMenuOpen) {
    menu.style.display = 'none';
    _codeRunMenuOpen = false;
    return;
  }
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file) return;
  const ext = file.name.split('.').pop().toLowerCase();
  const modes = codeGetRunModes(ext);
  menu.innerHTML = modes.map(m =>
    `<div onclick="codeRunWith('${m.id}')" style="display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s" onmouseover="this.style.background='#2d4a2d'" onmouseout="this.style.background=''">` +
    `<span style="font-size:14px">${m.icon}</span>` +
    `<div style="flex:1"><div style="font-size:12px;font-weight:600;color:#e5e7eb">${m.label}</div><div style="font-size:10px;color:#9ca3af">${m.desc}</div></div>` +
    `</div>`
  ).join('');
  menu.style.display = 'block';
  _codeRunMenuOpen = true;
  const close = (e) => {
    if (!menu.contains(e.target) && !e.target.closest('#code-run-dropdown')) {
      menu.style.display = 'none';
      _codeRunMenuOpen = false;
      document.removeEventListener('click', close);
    }
  };
  setTimeout(() => document.addEventListener('click', close), 0);
}

function codeUpdateRunButton() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  const iconEl = document.getElementById('code-run-icon');
  const labelEl = document.getElementById('code-run-label');
  if (!file || !iconEl) return;
  const ext = file.name.split('.').pop().toLowerCase();
  const modes = codeGetRunModes(ext);
  const primary = modes[0];
  iconEl.textContent = primary.icon;
  labelEl.textContent = primary.label;
}

function codeRunDefault() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !monacoEditor) return;
  file.content = monacoEditor.getValue();
  const ext = file.name.split('.').pop().toLowerCase();
  const modes = codeGetRunModes(ext);
  codeRunWith(modes[0].id);
}

// Resolve <link href="x.css"> and <script src="x.js"> from local filesystem,
// inline them into the HTML, then return a blob URL for window.open.
async function _openHtmlWithInlinedAssets(file) {
  let html = file.content;
  const dir = file.name.includes('/') ? file.name.split('/').slice(0, -1).join('/') : '';

  // Inline <link rel="stylesheet" href="...">
  const linkRe = /<link\b[^>]*\brel=["']stylesheet["'][^>]*\bhref=["']([^"']+)["'][^>]*\/?>/gi;
  const cssMatches = [...html.matchAll(linkRe)];
  for (const m of cssMatches) {
    const href = m[1];
    if (href.startsWith('http') || href.startsWith('//')) continue;
    const fpath = dir ? `${dir}/${href}` : href;
    const css = await localReadFile(_clientProjectPath(fpath)) ?? await localReadFile(fpath);
    if (css !== null) {
      html = html.replace(m[0], `<style>/* ${href} */\n${css}\n</style>`);
    }
  }

  // Inline <script src="..."> (skip external URLs)
  const scriptRe = /<script\b([^>]*)\bsrc=["']([^"']+)["'][^>]*><\/script>/gi;
  const scriptMatches = [...html.matchAll(scriptRe)];
  for (const m of scriptMatches) {
    const src = m[2];
    if (src.startsWith('http') || src.startsWith('//')) continue;
    const fpath = dir ? `${dir}/${src}` : src;
    const js = await localReadFile(_clientProjectPath(fpath)) ?? await localReadFile(fpath);
    if (js !== null) {
      html = html.replace(m[0], `<script${m[1]}>\n/* ${src} */\n${js}\n</script>`);
    }
  }

  const blob = new Blob([html], { type: 'text/html' });
  return URL.createObjectURL(blob);
}

function codeRunWith(mode) {
  const menu = document.getElementById('code-run-menu');
  if (menu) menu.style.display = 'none';
  _codeRunMenuOpen = false;

  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !monacoEditor) return;
  // Don't run while an AI diff is pending — the model holds undecided changes.
  if (codeDiffState[activeCodeFileId]) {
    codeAiAppend('system', '⚠️ AI 제안 변경이 검토 대기 중입니다. 먼저 ✅/❌로 적용하거나 취소한 뒤 실행하세요.');
    return;
  }
  file.content = monacoEditor.getValue();
  const fpath = `${codeDirLabel}/${file.name}`;

  if (mode === 'browser') {
    const ext = file.name.split('.').pop().toLowerCase();
    if ((ext === 'html' || ext === 'htm') && localDirHandle) {
      // Inline linked CSS and JS so the blob URL can resolve them
      _openHtmlWithInlinedAssets(file).then(url => {
        const w = window.open(url, '_blank');
        if (!w) codeAiAppend('system', '⚠️ 팝업 차단됨 — 브라우저에서 팝업을 허용해주세요');
        setTimeout(() => URL.revokeObjectURL(url), 120000);
      });
    } else {
      const mime = ext === 'css' ? 'text/css' : ext === 'js' ? 'text/javascript' : 'text/plain';
      const blob = new Blob([file.content], { type: mime });
      const url = URL.createObjectURL(blob);
      const w = window.open(url, '_blank');
      if (!w) codeAiAppend('system', '⚠️ 팝업 차단됨 — 브라우저에서 팝업을 허용해주세요');
      setTimeout(() => URL.revokeObjectURL(url), 60000);
    }
    return;
  }

  if (mode === 'companion') {
    if (!companionConnected) {
      codeAiAppend('system', '⚠️ companion.py가 실행되지 않았습니다. 로컬에서 python companion.py 를 실행하세요.');
      return;
    }

    if (localDirHandle) {
      // Local folder is open → run via companion shell PTY so output stays in the local tab.
      // Ensure local shell tab exists and is front.
      const existingLocalId = [...localShellIds].find(id => codeTermShells.find(s => s.id === id));
      const needsShell = !existingLocalId;
      if (needsShell) addLocalShell();
      else { if (!codeTermOpen) toggleCodeTerminal(); switchCodeTermShell(existingLocalId); }

      const ext = file.name.split('.').pop().toLowerCase();
      const bare = _clientBareFileName(file.name);
      const base = (localTermPath || companionHome || '').replace(/[/\\]$/, '');
      // Detect Windows from platform flag OR from drive-letter prefix (C:\...) in base path
      const isWin = companionPlatform === 'windows' || /^[A-Za-z]:/.test(base);
      const sep = isWin ? '\\' : '/';
      const proj = activeProjectName ? sep + activeProjectName : '';
      // Normalise all separators in the assembled path to match the platform
      const rawPath = base ? base + proj + sep + bare : bare;
      const normPath = isWin ? rawPath.replace(/\//g, '\\') : rawPath.replace(/\\/g, '/');
      const localPath = `"${normPath}"`;
      const pyCmd = isWin ? 'python' : 'python3';
      const cmd = (ext === 'js' ? `node ${localPath}` :
                   ext === 'ts' ? `npx ts-node ${localPath}` :
                   `${pyCmd} ${localPath}`) + '\r';

      setTimeout(() => {
        const targetShellId = [...localShellIds].find(id => codeTermShells.find(s => s.id === id));
        if (companionConnected && companionWs && targetShellId)
          companionWs.send(JSON.stringify({ type: 'input', shellId: targetShellId, data: cmd }));
      }, needsShell ? 900 : 0);
    } else {
      // No local folder → send code directly (one-shot run, output to active terminal)
      if (!codeTermOpen) toggleCodeTerminal();
      setTimeout(() => {
        companionWs.send(JSON.stringify({ type: 'run', code: file.content, filename: file.name }));
      }, codeTermOpen ? 0 : 500);
    }
    return;
  }

  if (mode === 'pyodide') {
    sessionStorage.setItem('py_run_code', file.content);
    sessionStorage.setItem('py_run_name', file.name);
    const w = window.open('/python-runner.html', '_blank');
    if (!w) codeAiAppend('system', '⚠️ 팝업 차단됨 — 브라우저에서 팝업을 허용해주세요');
    return;
  }

  if (mode === 'esp32') {
    _emuPanelLoad('/arduino-emulator.html?loading=1', `ESP32 — ${file.name}`);
    codeAiAppend('system', `🖥️ ESP32 에뮬레이터 컴파일 중... (${file.name})`);
    try { localStorage.setItem('esp32_sketch', file.content); } catch {}
    api('/api/arduino/qemu/start', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ code: file.content, fqbn: 'esp32:esp32:esp32' }) })
      .then(d => {
        if (d.error) { sendCompileErrorToAI(d.error, file.name, file.content); toggleEmuPanel(); return; }
        const _proj2 = activeProjectName ? '&project=' + encodeURIComponent(activeProjectName) : '';
        _emuPanelLoad(`/arduino-emulator.html?session=${d.id}&file=${encodeURIComponent(file.name)}&fqbn=esp32%3Aesp32%3Aesp32${_proj2}`, `ESP32 — ${file.name}`);
        codeAiAppend('system', `✅ ESP32 에뮬레이터 실행 중.`);
      }).catch(e => { codeAiAppend('system', '⚠️ ' + e.message); toggleEmuPanel(); });
    return;
  }

  if (mode === 'esp8266') {
    _emuPanelLoad('/arduino-emulator.html?loading=1', `ESP8266 — ${file.name}`);
    codeAiAppend('system', `🖥️ ESP8266 에뮬레이터 컴파일 중... (${file.name})`);
    try { localStorage.setItem('esp8266_sketch', file.content); } catch {}
    const _esp8266Fqbn = (_csbSelBoard.fqbn.startsWith('esp8266:')) ? _csbSelBoard.fqbn : 'esp8266:esp8266:nodemcuv2';
    api('/api/arduino/esp8266/start', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ code: file.content, fqbn: _esp8266Fqbn }) })
      .then(d => {
        if (d.error) { sendCompileErrorToAI(d.error, file.name, file.content); toggleEmuPanel(); return; }
        const _proj2 = activeProjectName ? '&project=' + encodeURIComponent(activeProjectName) : '';
        _emuPanelLoad(`/arduino-emulator.html?session=${d.id}&file=${encodeURIComponent(file.name)}&fqbn=${encodeURIComponent(_esp8266Fqbn)}${_proj2}`, `ESP8266 — ${file.name}`);
        codeAiAppend('system', `✅ ESP8266 에뮬레이터 실행 중.`);
      }).catch(e => { codeAiAppend('system', '⚠️ ' + e.message); toggleEmuPanel(); });
    return;
  }

  if (mode === 'arduino') {
    const _isEsp32Board = (_csbSelBoard.fqbn.split(':')[1] || '') === 'esp32';
    const _isEsp8266Board = (_csbSelBoard.fqbn.split(':')[0] || '') === 'esp8266';
    const _isStm32Board = _csbSelBoard.fqbn.startsWith('STMicroelectronics:stm32');
    if (_isEsp32Board || _isEsp8266Board || _isStm32Board) {
      // ESP32/ESP8266/STM32 계열 — openArduinoEmulator()로 에뮬레이터 실행
      openArduinoEmulator(); return;
    }
    codeAiAppend('system', `🔌 컴파일 중... (${file.name}) [${_csbSelBoard.name}]`);
    fetch('/api/arduino/compile', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', ...authHeaders({}) },
      body: JSON.stringify({ code: file.content, board: _csbSelBoard.fqbn, fqbn: _csbSelBoard.fqbn }),
    }).then(r => r.json()).then(data => {
      if (data.autoInstalled?.length) codeAiAppend('system', `📦 라이브러리 자동 설치: ${data.autoInstalled.join(', ')}`);
      if (data.error) {
        const extra = data.install ? `\n\n설치 필요: ${data.install}` : '';
        sendCompileErrorToAI(data.error + extra, file.name, file.content);
        return;
      }
      sessionStorage.setItem('arduino_filename', file.name);
      sessionStorage.setItem('arduino_project', activeProjectName || '');
      sessionStorage.setItem('arduino_board', _csbSelBoard.fqbn);
      // boardType에 따라 결과 처리
      if (data.merged) {
        // (이미 위에서 처리됨, fallback)
        codeAiAppend('system', `✅ 컴파일 완료.`);
      } else if (data.hex) {
        sessionStorage.setItem('arduino_hex', data.hex);
        sessionStorage.setItem('arduino_sketch', file.content);
        _emuPanelLoad('/arduino-emulator.html', `AVR — ${file.name}`);
      } else if (data.boardType === 'rp2040') {
        sessionStorage.setItem('arduino_uf2', data.bin);
        sessionStorage.setItem('arduino_sketch', file.content);
        _emuPanelLoad('/arduino-emulator.html', `RP2040 — ${file.name}`);
      } else if (data.bin) {
        const ext  = data.boardType === 'uf2' ? '.uf2' : '.bin';
        const blob = new Blob([Uint8Array.from(atob(data.bin), c => c.charCodeAt(0))], { type: 'application/octet-stream' });
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a');
        a.href = url; a.download = file.name.replace(/\.ino$/, '') + ext; a.click();
        URL.revokeObjectURL(url);
        const kb = (data.size / 1024).toFixed(1);
        codeAiAppend('system', `✅ 컴파일 완료 (${kb} KB) — ${ext.slice(1).toUpperCase()} 다운로드됨.\n보드에 올리려면 ⚡ 업로드 버튼을 사용하세요. [${_csbSelBoard.name}]`);
      }
    }).catch(e => codeAiAppend('system', '⚠️ 서버 오류: ' + e.message));
    return;
  }

  // terminal modes
  const ext = file.name.split('.').pop().toLowerCase();

  let cmd;
  if (mode === 'terminal') {
    cmd = ext === 'py' ? `python3 ${fpath}` :
          ext === 'js' ? `node ${fpath}` :
          ext === 'ts' ? `npx ts-node ${fpath}` :
          ext === 'go' ? `go run ${fpath}` :
          ext === 'cpp' ? `g++ -o /tmp/_coder_out ${fpath} && /tmp/_coder_out` :
          ext === 'c' ? `gcc -o /tmp/_coder_out ${fpath} && /tmp/_coder_out` :
          ext === 'rs' ? `rustc -o /tmp/_coder_out ${fpath} && /tmp/_coder_out` :
          ext === 'sh' ? `bash ${fpath}` : `./${fpath}`;
  } else {
    cmd = mode === 'python3' ? `python3 ${fpath}` :
          mode === 'node' ? `node ${fpath}` : `${mode} ${fpath}`;
  }
  if (!codeTermOpen) toggleCodeTerminal();
  setTimeout(() => {
    const s = codeTermShells.find(s => s.id === activeCodeTermShellId);
    if (s && s.ptyReady) termWsSend({ type: 'pty_input', shellId: s.id, data: cmd + '\r' });
  }, codeTermOpen ? 0 : 500);
}

function _boardSpecificHints(code = '') {
  const fqbn = _csbSelBoard.fqbn || '';
  const arch = fqbn.split(':')[1] || '';
  const usesWifi = /WiFi|ESP8266WiFi|HTTPClient|WebServer/i.test(code);

  // 언어 직접 선택 (하드웨어 보드 아님)
  if (fqbn === 'lang:python') {
    return '\n' + [
      '언어: Python',
      '- 순수 Python 코드로 작성하세요. Arduino/C++ 문법 사용 금지',
      '- 스크립트는 표준 Python 환경에서 실행됩니다',
    ].join('\n');
  }
  if (fqbn === 'lang:cpp') {
    return '\n' + [
      '언어: C++ (일반)',
      '- 표준 C++17 코드로 작성하세요. Arduino 전용 API 사용 금지',
    ].join('\n');
  }
  if (fqbn === 'lang:other') return '';

  // 하드웨어 보드: 공통 Arduino 규칙 + arch별 추가 규칙
  if (!arch) return '';
  const base = ['Arduino (C++) 코딩 규칙:', '- 언어: C++ (Arduino 스케치). PC 전용 앱이 필요하면 해당 언어 병행 가능'];
  const extra = [];

  if (arch === 'esp32') {
    extra.push('- analogWrite() 없음 → ledcAttach(pin, freq, res) + ledcWrite(pin, duty)');
    extra.push('- loop() 장시간 blocking → watchdog 리셋. delay() 또는 yield() 필수');
    extra.push('- SPIFFS 대신 LittleFS 권장 (esp32 3.x 코어)');
    if (usesWifi) extra.push(
      '- WiFi 내장 — #include <WiFi.h> 하나로 충분. SPI.h 추가 금지',
      '- WiFi.firmwareVersion() 없음 (WiFiNINA 전용)');
  } else if (arch === 'esp8266') {
    extra.push('- analogWrite() 있음 (PWM, 0-1023)');
    extra.push('- loop()에서 yield() 또는 delay() 필수 (watchdog 방지)');
    extra.push('- ledcAttach 등 ESP32 전용 API 사용 금지');
    if (usesWifi) extra.push(
      '- WiFi: #include <ESP8266WiFi.h>. #include <WiFi.h> 사용 금지',
      '- 암호화 상수: ENC_TYPE_NONE / ENC_TYPE_CCMP / ENC_TYPE_TKIP');
  } else if (arch === 'stm32') {
    extra.push('- 핀 이름: PB_3·PA_0 등 STM32 PinName 상수 사용');
    extra.push('- Serial = USART1 (PA9/PA10), Serial.begin(115200) 필수');
    extra.push('- analogWrite() 없음 → HardwareTimer + PWM 채널 사용');
    extra.push('- Wire(I2C1): SDA=PB7, SCL=PB6 / SPI1: MOSI=PA7, MISO=PA6, SCK=PA5');
  } else if (arch === 'avr') {
    if (usesWifi) extra.push('- WiFi 실드: #include <SPI.h> + #include <WiFiNINA.h>');
  }
  // sam, samd, megaavr 등은 base만 적용

  return '\n' + [...base, ...extra].join('\n');
}

async function csbCompileOnly() {
  if (!_csbSelBoard) { codeAiAppend('system', '⚠ 보드를 먼저 선택하세요.'); return; }
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !file.name.endsWith('.ino')) { codeAiAppend('system', '⚠ .ino 파일을 선택하세요.'); return; }
  const code = file.model?.getValue() || file.content || '';
  const btn = document.getElementById('code-compile-btn');
  if (btn) { btn.textContent = '⏳ 컴파일 중…'; btn.disabled = true; }
  codeAiAppend('system', `🔨 컴파일 중... [${_csbSelBoard.name}]`);
  try {
    const r = await fetch('/api/arduino/compile', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', ...authHeaders() },
      body: JSON.stringify({ code, fqbn: _csbSelBoard.fqbn }),
    });
    const data = await r.json();
    if (data.error) {
      sendCompileErrorToAI(data.error, file.name, code);
    } else {
      const kb = data.size ? (data.size / 1024).toFixed(1) : null;
      const extra = data.autoInstalled?.length ? `\n자동 설치된 라이브러리: ${data.autoInstalled.join(', ')}` : '';
      codeAiAppend('system', `✅ 컴파일 성공${kb ? ` (${kb} KB)` : ''} — 오류 없음.${extra}`);
      // 업로드 패널에서 재컴파일 없이 바로 업로드할 수 있도록 캐시
      _cupCompiledData = data;
      _cupCompiledForCode = code;
      _cupCompiledForFqbn = _csbSelBoard.fqbn;
      _cupCode = code; _cupFqbn = _csbSelBoard.fqbn;
      _cupBoardName = _csbSelBoard.name; _cupFname = file.name;
    }
  } catch (e) {
    codeAiAppend('system', `컴파일 오류: ${e.message}`);
  } finally {
    if (btn) { btn.textContent = '🔨 컴파일'; btn.disabled = false; }
  }
}

function sendCompileErrorToAI(error, filename, code) {
  const inp = document.getElementById('code-ai-input');
  if (!inp) return;
  const boardInfo = `대상 보드: ${_csbSelBoard.name} (FQBN: ${_csbSelBoard.fqbn})`;
  const hints = _boardSpecificHints(code);
  // Library conflict (redefinition) — not fixable by editing the .ino file
  if (/redefinition of/.test(error)) {
    const m = error.match(/\/sketch\/(\S+?\.h)/);
    const conflictHeader = m ? m[1] : 'unknown.h';
    inp.value = `아두이노 컴파일 오류: **라이브러리 충돌**입니다. ${boardInfo}${hints}\n\n원인: \`${conflictHeader}\`가 코어 내장 헤더와 중복 정의(redefinition) 충돌을 일으키고 있습니다. ${filename} 코드의 \`#include\` 방향을 조정하거나 외부 라이브러리를 교체해야 합니다.\n\n오류:\n\`\`\`\n${error}\n\`\`\`\n\n해결 방법을 설명해주세요. 파일 검색은 하지 않아도 됩니다.`;
  } else {
    inp.value = `아두이노 컴파일 오류가 발생했습니다. ${boardInfo}${hints}\n\nRead로 ${filename}을 읽은 뒤 Edit 또는 Write 도구로 파일을 직접 수정해줘.\n\n오류:\n\`\`\`\n${error}\n\`\`\``;
  }
  codeAiSend();
}

function codeSendSelectionToAI() {
  if (!monacoEditor) return;
  const sel = monacoEditor.getSelection();
  const selected = sel && !sel.isEmpty() ? monacoEditor.getModel().getValueInRange(sel) : monacoEditor.getValue();
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  const lang = file ? file.language : 'code';
  const prompt = `다음 ${lang} 코드를 분석해줘:\n\`\`\`${lang}\n${selected}\n\`\`\``;
  document.getElementById('code-ai-input').value = prompt;
  codeAiSend();
}

// ─── V2 Chat Live Code Streaming ────────────────────────────────────────────────
// Global state for streaming code into the editor during the main v2 chat.
const _v2LiveState = { inBlock: false, lang: '', fileId: null, originalContent: null, isDiff: false, diffAccumulated: null };
let codePendingQueue = [];   // [{fname, content, lang}] — queued when Monaco not ready

// Throttled Monaco model update — avoids freezing UI by limiting setValue calls to ~80ms intervals
let _monacoThrottleTimer = null;
let _monacoThrottleModel = null;
let _monacoThrottleValue = '';
function codeMonacoThrottle(model, value) {
  _monacoThrottleModel = model;
  _monacoThrottleValue = value;
  if (_monacoThrottleTimer) return;  // already scheduled
  _monacoThrottleTimer = setTimeout(() => {
    _monacoThrottleTimer = null;
    if (_monacoThrottleModel && _monacoThrottleValue !== undefined) {
      const _lines = _monacoThrottleValue.split('\n').length;
      _DBG && console.log(`[codeMonacoThrottle] setValue: ${_lines} lines`);
      _monacoThrottleModel.setValue(_monacoThrottleValue);
      // Don't null _monacoThrottleModel here — keep it alive for codeMonacoThrottleFlush.
      // The timer callback applies the latest throttled value, but a later flush
      // (called when streaming ends) must still be able to apply any final value
      // that arrived after this timer fired.
    }
  }, 80);
}
function codeMonacoThrottleFlush() {
  if (_monacoThrottleTimer) { clearTimeout(_monacoThrottleTimer); _monacoThrottleTimer = null; }
  if (_monacoThrottleModel && _monacoThrottleValue !== undefined) {
    _monacoThrottleModel.setValue(_monacoThrottleValue);
  }
  _monacoThrottleModel = null;
}

function codeFlushPendingQueue() {
  if (!monacoReady || !monacoEditor || !codePendingQueue.length) return;
  for (const item of codePendingQueue) {
    const existing = codeFiles.find(f => f.name === item.fname);
    if (existing) {
      const oldContent = existing.model ? existing.model.getValue() : existing.content;
      if (oldContent !== item.content) {
        switchCodeFile(existing.id);
        showCodeDiff(existing.id, oldContent, item.content);
      }
    } else {
      const id = 'cf_' + Math.random().toString(36).slice(2, 8);
      const model = monaco.editor.createModel(item.content, codeDetectLang(item.fname));
      codeFiles.push({ id, name: item.fname, content: item.content, language: codeDetectLang(item.fname), model });
      if (!_v2LiveState.fileId) _v2LiveState.fileId = id;
    }
  }
  codePendingQueue = [];
  if (_v2LiveState.fileId) switchCodeFile(_v2LiveState.fileId);
}

// ── Shared live-streaming parser ────────────────────────────────────────────
// Detects the last unclosed ```code block in a streaming reply and mirrors it
// into the editor: creates/reuses a tab, throttles model updates, and renames
// the tab once a real filename surfaces. `state` is a mutable holder
// { inBlock, lang, fileId } so each caller keeps its own streaming context.
function codeLiveStreamUpdate(fullReply, state) {
  if (typeof codeIsOpenable !== 'function') return;
  // Parse ALL code blocks using toggle: opening ```lang\n starts a block,
  // bare ``` closes it. This correctly pairs fences and excludes explanation
  // text between blocks. The model may split one file across multiple blocks
  // (e.g. 37 lines + explanation + continuation) — we concatenate all blocks
  // so the editor shows the complete program.
  //
  // CRITICAL: Only match ``` at the beginning of a line (with optional leading
  // whitespace). Without this check, ``` inside code (e.g. in comments like
  // `# ``` or strings) would be misinterpreted as a fence, causing the code
  // block to end prematurely and the editor to clear mid-stream.
  const fenceRe = /```([\w\-]*)[ \t]*\r?\n/g;
  const blocks = [];
  let inBlock = false, blockLang = '', blockStart = 0, m;
  while ((m = fenceRe.exec(fullReply)) !== null) {
    // Require ``` at start of line (only whitespace before it) — prevents
    // false matches inside code (comments, strings, etc.)
    const lineStart = m.index === 0 ? 0 : fullReply.lastIndexOf('\n', m.index - 1) + 1;
    const prefix = fullReply.slice(lineStart, m.index);
    if (prefix.trim() !== '') continue; // ``` is mid-line, skip
    if (!inBlock) {
      blockLang = m[1] || 'text';
      blockStart = m.index + m[0].length;
      inBlock = true;
    } else {
      blocks.push({ lang: blockLang, code: fullReply.slice(blockStart, m.index) });
      inBlock = false;
    }
  }
  if (inBlock) {
    // Unclosed block — still streaming
    blocks.push({ lang: blockLang, code: fullReply.slice(blockStart), streaming: true });
  }
  if (!blocks.length) { state.inBlock = false; return; }

  // Concatenate all code blocks (same or different language)
  let code = '';
  let lang = blocks[blocks.length - 1].lang || 'text';
  for (const block of blocks) {
    if (code) code += '\n';
    code += block.code;
    if (block.lang && block.lang !== 'text') lang = block.lang;
  }
  code = code.replace(/\n+$/, '');
  _DBG && console.log(`[codeLiveStream] blocks=${blocks.length} lines=${code.split('\n').length} inBlock=${state.inBlock} fileId=${state.fileId} lang=${lang}`);

  // ── Diff block handling ──────────────────────────────────────────────
  // When the language is 'diff', the block contains a unified diff that
  // should be applied to an existing file (not replace it entirely).
  if (lang === 'diff') {
    if (!state.inBlock) {
      state.inBlock = true;
      state.lang = lang;
      state.isDiff = true;
      // We'll accumulate the diff content and apply after streaming.
      // Priority: explicit filename in diff > active tab.
      // The model names the file it's editing in the diff header or filename comment —
      // that explicit name wins so the right tab gets focused automatically.
      const fname = codeDeriveName(code, lang)
        || code.match(/^(?:---|\+\+\+)\s+(?:[ab]\/)?(.+?)(?:\t|$)/m)?.[1]?.trim();
      const fnameFile = fname ? (
        codeFiles.find(f => f.name === fname) ||
        codeFiles.find(f => f.name.endsWith('/' + fname))
      ) : null;
      const existing = fnameFile
        || (state.targetFileId && codeFiles.find(f => f.id === state.targetFileId))
        || codeFiles.find(f => f.id === activeCodeFileId);
      if (existing) {
        state.originalContent = existing.model ? existing.model.getValue() : existing.content;
        state.fileId = existing.id;
        state.diffAccumulated = code;
        switchCodeFile(existing.id);
      } else {
        // No matching file found — create a placeholder
        const id = 'cf_' + Math.random().toString(36).slice(2, 8);
        const model = monacoReady ? monaco.editor.createModel(code, 'diff') : null;
        codeFiles.push({ id, name: fname || 'diff.patch', content: code, language: 'diff', model });
        state.fileId = id;
        state.originalContent = '';
        state.diffAccumulated = code;
        switchCodeFile(id);
      }
    } else if (state.isDiff && state.fileId) {
      // Continue accumulating diff content — keep the original file in the editor;
      // the diff will be applied when streaming completes (see codeLiveStreamUpdate end-of-stream)
      state.diffAccumulated = code;
    }
    return;
  }

  // ── Full code block handling ────────────────────────────────────────────
  // Detect if the model accidentally wrapped a diff in a non-diff code fence
  // (e.g. ```python with +prefix/-prefix lines) — treat it as a diff block instead.
  // Reuses _isDiffCode (the same +/-/@@ ratio heuristic).
  if (lang !== 'diff' && _isDiffCode(lang, code)) {
    // Model output diff content inside a non-diff code fence — redirect to diff handling
    state.inBlock = true;
    state.lang = 'diff';
    state.isDiff = true;
    // Diff content wrapped in a non-diff fence — target the active/context file too.
    const fname = codeDeriveName(code, lang);
    const existing = (state.targetFileId && codeFiles.find(f => f.id === state.targetFileId))
      || codeFiles.find(f => f.name === fname)
      || codeFiles.find(f => f.id === activeCodeFileId);
    if (existing) {
      state.originalContent = existing.model ? existing.model.getValue() : existing.content;
      state.fileId = existing.id;
      state.diffAccumulated = code;
      switchCodeFile(existing.id);
    } else {
      const id = 'cf_' + Math.random().toString(36).slice(2, 8);
      const model = monacoReady ? monaco.editor.createModel(code, codeDetectLang(fname)) : null;
      codeFiles.push({ id, name: fname, content: code, language: codeDetectLang(fname), model });
      state.fileId = id;
      state.originalContent = '';
      state.diffAccumulated = code;
      switchCodeFile(id);
    }
    return;
  }

  if (!state.inBlock) {
    // Wait until the block looks like a real file (not a short run-command snippet)
    if (!codeIsOpenable(code, lang)) return;
    state.inBlock = true;
    state.lang = lang;
    const fname = codeDeriveName(code, lang);
    _DBG && console.log(`[codeLiveStream] NEW BLOCK: fname=${fname} lines=${code.split('\n').length}`);
    if (monacoReady && monacoEditor) {
      // Reuse existing tab with same name instead of creating a duplicate
      const existing = codeFiles.find(f => f.name === fname);
      if (existing) {
        // Save original content so we can show a diff after streaming completes
        state.originalContent = existing.model ? existing.model.getValue() : existing.content;
        state.fileId = existing.id;
        // If editing existing file: keep original in editor, show streamed changes as decorations
        if (state.originalContent && state.originalContent.trim()) {
          state.streamingModifiedText = code;
          _updateStreamingDiffDecorations(state.fileId, state.originalContent, code);
        } else {
          switchCodeFile(existing.id);
        }
      } else {
        const id = 'cf_' + Math.random().toString(36).slice(2, 8);
        const model = monaco.editor.createModel(code, codeDetectLang(fname));
        codeFiles.push({ id, name: fname, content: code, language: codeDetectLang(fname), model });
        state.fileId = id;
        switchCodeFile(id);
      }
    } else {
      // Monaco not ready yet — queue and trigger init
      codePendingQueue = [{ fname, content: code, lang }];
      initCodeView();
    }
  } else if (state.fileId && !state.isDiff) {
    _DBG && console.log(`[codeLiveStream] UPDATE: fileId=${state.fileId} lines=${code.split('\n').length} origContent=${!!state.originalContent} diff=${state.isDiff}`);
    const file = codeFiles.find(f => f.id === state.fileId);
    if (file?.model) {
      // If editing existing file with original content: stream as diff decorations
      if (state.originalContent && state.originalContent.trim()) {
        state.streamingModifiedText = code;
        // Keep the original text in the editor — update streaming diff decorations
        _updateStreamingDiffDecorations(state.fileId, state.originalContent, code);
        // Don't call codeMonacoThrottle here — we keep original in editor
      } else {
        codeMonacoThrottle(file.model, code);
      }
      // Rename tab if a filename comment appears later in the stream
      const betterName = codeDeriveName(code, state.lang);
      if (betterName && !betterName.startsWith('ai_') && file.name.startsWith('ai_')) {
        file.name = betterName;
        file.language = codeDetectLang(betterName);
        renderCodeFileTabs();
      }
    }
  } else if (codePendingQueue.length) {
    // Monaco still loading — update queued content
    codePendingQueue[codePendingQueue.length - 1].content = code;
  }
}

// ── Real-time streaming diff decorations ──────────────────────────────────
// While the model streams code, compare original vs streamed content and
// highlight changed/added lines in green — without replacing the editor content.
// This is the VSCode Copilot approach: keep original, show changes as overlay.

// Throttled streaming diff to avoid excessive decoration updates
let _streamingDiffTimer = null;
let _streamingDiffFileId = null;
let _streamingDiffOriginal = '';
let _streamingDiffModified = '';

function _updateStreamingDiffDecorations(fileId, originalText, modifiedText) {
  _streamingDiffFileId = fileId;
  _streamingDiffOriginal = originalText;
  _streamingDiffModified = modifiedText;
  if (_streamingDiffTimer) return; // already scheduled
  _streamingDiffTimer = setTimeout(() => {
    _streamingDiffTimer = null;
    _applyStreamingDiffDecorations(_streamingDiffFileId, _streamingDiffOriginal, _streamingDiffModified);
  }, 120);
}

function _applyStreamingDiffDecorations(fileId, originalText, modifiedText) {
  if (!monacoReady || !monacoEditor || !window.monaco) return;
  const file = codeFiles.find(f => f.id === fileId);
  if (!file || file.id !== activeCodeFileId) return;

  // Make sure editor still shows original content
  const currentContent = file.model ? file.model.getValue() : file.content;
  if (currentContent !== originalText) {
    // Editor was changed externally — don't override
    return;
  }

  // Highlight changed regions while keeping the original text in the editor.
  // (We can't reliably place added/deleted lines until streaming completes, so we
  // only color the affected lines.)
  const origLines = originalText.split('\n');
  const hunks = computeDiffHunks(originalText, modifiedText);
  if (!hunks.length) {
    // No changes yet — remove any streaming decorations
    if (file.model && file._streamingDecos) {
      file.model.deltaDecorations(file._streamingDecos, []);
      file._streamingDecos = null;
    }
    return;
  }

  // We're keeping original text in editor. Show decorations on lines that have changes.
  // For "change" hunks: highlight the original lines that will be modified
  // For "add" hunks: highlight the line before where additions will appear
  // For "delete" hunks: highlight lines that will be removed with strikethrough-like style
  const streamingDecos = [];
  for (const hunk of hunks) {
    if (hunk.type === 'delete') {
      // Lines that will be removed
      for (let line = hunk.oldStart; line <= hunk.oldEnd && line <= origLines.length; line++) {
        streamingDecos.push({
          range: new monaco.Range(line, 1, line, 1),
          options: {
            className: 'inline-diff-streaming-delete',
            glyphMarginClassName: 'inline-diff-glyph-delete',
            isWholeLine: true,
            minimap: { color: '#dc354580', position: monaco.editor.MinimapPosition.Inline },
            overviewRuler: { color: '#dc354560', position: monaco.editor.OverviewRulerLane.Full },
          }
        });
      }
    } else if (hunk.type === 'add') {
      // New lines will appear after oldStart — highlight the line before
      const insertAfter = Math.max(1, hunk.oldStart - 1);
      streamingDecos.push({
        range: new monaco.Range(insertAfter, 1, insertAfter, 1),
        options: {
          className: 'inline-diff-streaming-add-marker',
          isWholeLine: true,
        }
      });
    } else {
      // Change: old lines will be replaced
      for (let line = hunk.oldStart; line <= hunk.oldEnd && line <= origLines.length; line++) {
        streamingDecos.push({
          range: new monaco.Range(line, 1, line, 1),
          options: {
            className: 'inline-diff-streaming-change',
            glyphMarginClassName: 'inline-diff-glyph-change',
            isWholeLine: true,
            minimap: { color: '#ffc10780', position: monaco.editor.MinimapPosition.Inline },
            overviewRuler: { color: '#ffc10760', position: monaco.editor.OverviewRulerLane.Full },
          }
        });
      }
    }
  }

  // Apply streaming decorations
  const oldDecos = file._streamingDecos || [];
  file._streamingDecos = file.model.deltaDecorations(oldDecos, streamingDecos);
}

// Apply a unified diff to original content and return the new content.
// Parses @@ -a,b +c,d @@ hunks and applies additions/removals.
function applyUnifiedDiff(originalContent, diffText) {
  const origLines = originalContent.split('\n');
  const diffLines = diffText.split('\n');
  const result = [];
  let origPos = 0; // 0-based cursor into origLines

  // Whitespace-insensitive compare. Models frequently emit @@ line numbers that
  // are a few lines off, or drop the leading marker space on context lines —
  // both desync origPos and make context lines pull the WRONG original line,
  // which shows up as corrupted indentation. We re-anchor on line content (not
  // position), so the authoritative original text (with its real indentation)
  // is always what gets emitted for unchanged/context lines.
  const norm = (s) => s.trim();

  // Try to move origPos to the original line matching `content`, scanning a small
  // window ahead. Any original lines skipped on the way were unchanged, so emit
  // them as context. Returns true when aligned.
  const realign = (content) => {
    if (origPos >= origLines.length) return false;
    if (norm(origLines[origPos]) === norm(content)) return true;
    for (let k = 1; k <= 5 && origPos + k < origLines.length; k++) {
      if (norm(origLines[origPos + k]) === norm(content)) {
        for (let j = 0; j < k; j++) result.push(origLines[origPos++]);
        return true;
      }
    }
    return false;
  };

  // Skip to first hunk header
  let i = 0;
  while (i < diffLines.length && !diffLines[i].startsWith('@@')) i++;
  if (i >= diffLines.length) {
    // No hunks found — try simple +/- line format (no @@ headers)
    return applySimpleDiff(originalContent, diffText);
  }

  // Walk each hunk in lock-step with the original: copy untouched lines up to the
  // hunk, then preserve context lines, drop '-' lines, and insert '+' lines in
  // order. Tracking origPos keeps multi-hunk patches aligned (the old splice
  // approach lost context lines and drifted on the 2nd hunk → corrupted output).
  while (i < diffLines.length) {
    if (!diffLines[i].startsWith('@@')) { i++; continue; }
    const hunkMatch = diffLines[i].match(/@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/);
    if (!hunkMatch) { i++; continue; }
    const oldStart = parseInt(hunkMatch[1], 10);
    i++; // Move past @@ line

    // Position origPos at the start of this hunk. The @@ line number is only a
    // hint — models routinely get it wrong. Prefer anchoring on the hunk's first
    // context/deletion line: find it in the original (forward from where we are)
    // and emit the skipped lines as unchanged. Only fall back to the @@ number for
    // pure-insertion hunks, which have no anchor line to search for.
    let anchor = null;
    for (let p = i; p < diffLines.length && !diffLines[p].startsWith('@@'); p++) {
      const L = diffLines[p];
      if (L.startsWith('\\') || L.startsWith('+++') || L.startsWith('---')) continue;
      const t = L[0];
      if (t === '+') continue;
      anchor = (t === ' ' || t === '-') ? L.slice(1) : L; // context or deletion (or bare context)
      break;
    }
    if (anchor !== null) {
      let found = -1;
      for (let q = origPos; q < origLines.length; q++) {
        if (origLines[q].trim() === anchor.trim()) { found = q; break; }
      }
      if (found >= 0) { while (origPos < found) result.push(origLines[origPos++]); }
      else { const hs = Math.max(0, oldStart - 1); while (origPos < hs && origPos < origLines.length) result.push(origLines[origPos++]); }
    } else {
      const hs = Math.max(0, oldStart - 1);
      while (origPos < hs && origPos < origLines.length) result.push(origLines[origPos++]);
    }

    // Apply hunk body
    while (i < diffLines.length && !diffLines[i].startsWith('@@')) {
      const line = diffLines[i];
      if (line.startsWith('\\')) { i++; continue; }                          // "\ No newline at end of file"
      if (line.startsWith('+++') || line.startsWith('---')) { i++; continue; } // file headers
      if (/^`{3}/.test(line)) { i++; continue; }                              // stray closing fence (no trailing \n on last stream token)
      const tag = line[0];
      const body = line.slice(1);                                            // line minus its 1-char marker
      if (tag === '+') {
        result.push(body);                                                   // added line — verbatim, keep its indentation
      } else if (tag === '-') {
        realign(body);                                                       // anchor to the line being removed
        origPos++;                                                           // removed — consume original
      } else if (tag === ' ') {
        realign(body);                                                       // anchor to the matching original line
        if (origPos < origLines.length) result.push(origLines[origPos++]);   // context — keep ORIGINAL text (true indentation)
        else result.push(body);
      } else {
        // No-prefix line: treat as context when it matches the original
        // (whitespace-insensitively — models often drop the leading space), else literal
        if (realign(line)) result.push(origLines[origPos++]);
        else result.push(line);
      }
      i++;
    }
  }

  // Copy any remaining original lines after the last hunk
  while (origPos < origLines.length) result.push(origLines[origPos++]);
  return result.join('\n');
}

// Fallback: simple +/- diff without @@ headers (e.g. model just outputs +added/-removed lines)
// Format: lines starting with '+ ' are additions, '- ' are deletions, ' ' (single space) are context.
// Lines with no prefix at all are ignored (filename comments, blank separators, etc.)
function applySimpleDiff(originalContent, diffText) {
  const origLines = originalContent.split('\n');
  const diffLines = diffText.split('\n');
  const result = [];
  let origPos = 0; // 0-based cursor into origLines
  const norm = (s) => s.trim();

  // Advance origPos to the first original line at/after origPos matching
  // `content` (whitespace-insensitive), emitting any skipped originals as
  // unchanged context. Returns that index (origPos left there), or -1 unmoved.
  // This anchors '-'/context/bare lines to the REAL original position instead of
  // assuming the diff starts at line 0 — without it a leading deletion consumed
  // the wrong line and insertions floated to the top (context mismatch).
  const seekAndEmit = (content) => {
    for (let q = origPos; q < origLines.length; q++) {
      if (norm(origLines[q]) === norm(content)) {
        while (origPos < q) result.push(origLines[origPos++]);
        return q;
      }
    }
    return -1;
  };

  for (const line of diffLines) {
    if (line === '') continue;                                      // blank separator noise
    if (line.startsWith('@@') || line.startsWith('\\')) continue;   // hunk header / "no newline"
    if (line.startsWith('+++') || line.startsWith('---')) continue; // file headers
    const tag = line[0];
    const body = line.slice(1);                                     // strip exactly ONE marker char
    if (tag === '+') {
      result.push(body);                                            // addition — verbatim, keep indentation
    } else if (tag === '-') {
      if (seekAndEmit(body) >= 0) origPos++;                        // delete the matched original
      // not found → stale/duplicate deletion, drop silently
    } else if (tag === ' ') {
      if (seekAndEmit(body) >= 0) result.push(origLines[origPos++]); // context — emit ORIGINAL (true indentation)
      // not found → context drifted; skip rather than corrupt
    } else {
      // Bare line: the model frequently drops the leading space on context lines.
      // Treat it as context ONLY when it matches an upcoming original — otherwise
      // it is a stray comment / "# filename:" / prose line and is ignored.
      if (seekAndEmit(line) >= 0) result.push(origLines[origPos++]);
    }
  }

  while (origPos < origLines.length) result.push(origLines[origPos++]);
  return result.length > 0 ? result.join('\n') : originalContent;
}

// Main v2-chat live streaming (used in the full app) — thin wrapper over the
// shared parser with its own module-level state.
function v2LiveCodeUpdate(fullReply) {
  codeLiveStreamUpdate(fullReply, _v2LiveState);
}

// ── /new-project 2-phase project creation ────────────────────────────────

// State variables






let _codeAiSending = false;

// Public entry. Guards against overlapping sends and doubles as a Stop control:
// while a generation is in flight, the 전송 button turns into ⏹ 중지 and a second
// click aborts the current request instead of starting a racing one.
async function codeAiSend() {
  if (_codeAiSending) {
    if (codeAiAbort) codeAiAbort.abort();
    return;
  }
  const inp = document.getElementById('code-ai-input');
  if (!inp || !inp.value.trim()) return;
  _codeAiSending = true;
  _setSendBtnBusy(true);
  try {
    await _codeAiSendImpl();
  } finally {
    _codeAiSending = false;
    _setSendBtnBusy(false);
  }
}

function _setSendBtnBusy(busy) {
  const btn = document.getElementById('code-ai-send-btn');
  if (!btn) return;
  btn.textContent = busy ? '⏹ 중지' : '전송';
  btn.classList.toggle('busy', busy);
}

async function _codeAiSendImpl() {
  const input = document.getElementById('code-ai-input');
  const message = input.value.trim();
  const attachedImages = [..._pendingImages];
  if (!message && !attachedImages.length) return;
  input.value = ''; input.style.height = '';
  _pendingImages = [];
  _codeAiRenderImagePreview();

  // @파일명 참조 처리 — 메시지에서 @xxx.js 패턴을 찾아 파일 내용 삽입
  let resolvedMessage = message;
  const atInlinedFiles = new Set(); // track files already inlined via @ref
  if (localDirHandle) {
    const atRefs = [...message.matchAll(/@([\w./-]+\.\w+)/g)];
    for (const m of atRefs) {
      const fname = activeProjectName ? `${activeProjectName}/${m[1]}` : m[1];
      const content = await localReadFile(fname) ?? await localReadFile(m[1]);
      if (content !== null) {
        const ext = m[1].split('.').pop() || '';
        resolvedMessage = resolvedMessage.replace(m[0],
          `\n[파일: ${m[1]}]\n\`\`\`${ext}\n${content}\n\`\`\`\n`);
        atInlinedFiles.add(m[1]); // bare name
        atInlinedFiles.add(fname); // project-prefixed name
      }
    }
  }

  // 프로젝트 내 모든 파일 내용을 컨텍스트에 포함 (현재 파일 제외, 별도 첨부)
  let otherFilesCtx = '';
  {
    const currentFileName = codeFiles.find(f => f.id === activeCodeFileId)?.name;
    const seen = new Set();
    const CTX_TOTAL_BYTES = 500 * 1024; // 500KB total cap for other-files section
    const SKIP_NAMES = /^(package-lock\.json|yarn\.lock|pnpm-lock\.yaml|\.DS_Store|thumbs\.db)$/i;
    const addFile = (rel, content) => {
      if (otherFilesCtx.length >= CTX_TOTAL_BYTES) return;
      const ext = rel.split('.').pop() || '';
      const chunk = `[파일: ${rel}]\n\`\`\`${ext}\n${content}\n\`\`\`\n`;
      if (otherFilesCtx.length + chunk.length > CTX_TOTAL_BYTES) {
        otherFilesCtx += `[나머지 파일 생략 — 컨텍스트 크기 초과]\n`;
      } else {
        otherFilesCtx += chunk;
      }
    };
    // 1. All other open tabs (no project prefix required — covers both prefixed and bare filenames)
    for (const f of codeFiles) {
      if (f.name === currentFileName) continue;
      // If activeProjectName set, only include files from same project.
      // 로컬 모드(localDirHandle 있음)에서는 탭이 베어 경로("src/main.py")로 저장될 수 있으므로
      // 첫 세그먼트가 알려진 다른 프로젝트 이름인 경우에만 제외한다.
      if (activeProjectName && f.name.includes('/')) {
        const isCurrentProjPrefix = f.name.startsWith(activeProjectName + '/');
        if (!isCurrentProjPrefix) {
          if (!localDirHandle) { continue; } // 서버 모드: 프로젝트 prefix 없으면 다른 프로젝트
          // 로컬 모드: 첫 세그먼트가 알려진 다른 프로젝트 이름이면 제외
          const firstSeg = f.name.split('/')[0];
          const knownProjects = _knownProjectsGet();
          if (knownProjects.includes(firstSeg) && firstSeg !== activeProjectName) continue;
        }
      }
      if (!isCodeFile(f.name)) continue; // skip .md, .txt etc.
      const bare = f.name.split('/').pop() || '';
      if (SKIP_NAMES.test(bare)) continue;
      seen.add(f.name);
      const rel = activeProjectName ? f.name.replace(activeProjectName + '/', '') : f.name;
      const content = f.model ? f.model.getValue() : f.content;
      if (!content) continue;
      addFile(rel, content);
    }
    // 1.5. Files Read by model in prior turns — inject full content (cross-turn context memory)
    for (const [cachedName, cachedContent] of Object.entries(_readFileCache)) {
      const currentBare = currentFileName ? _clientBareFileName(currentFileName) : '';
      if (cachedName === currentBare) continue;
      if (seen.has(cachedName) || seen.has(activeProjectName + '/' + cachedName)) continue;
      seen.add(cachedName);
      addFile(cachedName, cachedContent);
    }
    // 2. Files on disk not yet opened as tabs — manifest only (Claude Code 방식: 목록만 주고 필요 시 coder_read_file로 요청)
    if (localDirHandle) {
      try {
        const allFiles = await localListFiles(localDirHandle, '');
        const projFiles = activeProjectName
          ? allFiles.filter(f => f.startsWith(activeProjectName + '/'))
          : allFiles;
        const manifest = projFiles
          .filter(f => {
            const bare = activeProjectName ? f.slice(activeProjectName.length + 1) : f;
            return !seen.has(f) && !seen.has(bare) && f !== currentFileName
              && isCodeFile(f) && !SKIP_NAMES.test(f.split('/').pop() || '');
          })
          .map(f => activeProjectName ? f.slice(activeProjectName.length + 1) : f);
        if (manifest.length)
          otherFilesCtx += `[로컬 파일 (Read 툴로 요청 가능): ${manifest.join(', ')}]\n\n`;
      } catch {}
    }
  }

  // Include current file context (ask/code 모드 모두 포함)
  const currentFile = codeFiles.find(f => f.id === activeCodeFileId);
  // otherFilesCtx는 currentFile 유무와 무관하게 항상 contextMsg에 포함 (현재 파일 없어도 프로젝트 파일 보이게)
  let contextMsg = otherFilesCtx ? otherFilesCtx + resolvedMessage : resolvedMessage;
  // Add tech hint for the model
  const techHints = { html: '웹 (HTML/CSS/JS)', python: 'Python', node: 'Node.js/JavaScript', auto: '' };
  const techHint = techHints[codeAiTech] || '';
  if (techHint && !contextMsg.includes('[tech]')) {
    contextMsg = `[tech: ${techHint}] ${contextMsg}`;
  }
  if (currentFile && monacoEditor) {
    const content = monacoEditor.getValue();
    // Diff editing only makes sense against REAL existing code. A brand-new tab
    // seeded with a placeholder comment (e.g. "# 여기에 코드를 작성하세요") is not
    // editable code — asking for a diff there makes the model emit a whole program
    // as +lines, which then got saved verbatim ("+가 붙어 나옴"). Treat a file with
    // no substantive (non-comment, non-blank) lines as new → request full code.
    const hasRealCode = content.split('\n').some(l => {
      const t = l.trim();
      return t && !t.startsWith('#') && !t.startsWith('//') && !t.startsWith('/*') && !t.startsWith('*') && !t.startsWith('<!--');
    });
    if (content.trim() && currentFile.name !== 'untitled.py' && hasRealCode) {
      const ext = currentFile.name.split('.').pop() || '';
      const langHint = ext || currentFile.language || '';
      const lines = content.split('\n');
      let fileCtx, omitNote = '';
      if (lines.length <= 3000) {
        fileCtx = lines.map((l, i) => `${i + 1}: ${l}`).join('\n');
      } else {
        // Large file: always include header (first 80 lines) + cursor window + footer
        const errorMatch = message.match(/line\s+(\d+)/i) || message.match(/라인\s*(\d+)/) || message.match(/(\d+)\s*줄/) || message.match(/Line\s+(\d+)/i);
        let focusLine = (monacoEditor?.getPosition?.()?.lineNumber) || 1;
        if (errorMatch) focusLine = parseInt(errorMatch[1]);
        const headerEnd = Math.min(80, lines.length);
        const ctx = 80;
        const s = Math.max(headerEnd + 1, focusLine - ctx);
        const e = Math.min(lines.length, focusLine + ctx);
        const headerLines = lines.slice(0, headerEnd).map((l, i) => `${i + 1}: ${l}`).join('\n');
        const windowLines = s <= e ? lines.slice(s - 1, e).map((l, i) => `${s + i}: ${l}`).join('\n') : '';
        const structLines = [];
        for (let i = 0; i < lines.length; i++) {
          if (/^(class |def |async def |function |public |private |const |let |var |export )/i.test(lines[i].trimStart()))
            structLines.push(`${i + 1}: ${lines[i].trim()}`);
        }
        const overview = structLines.length ? `\n[구조]\n${structLines.join('\n')}\n` : '';
        const windowPart = windowLines && s > headerEnd + 1 ? `\n...(${s - headerEnd - 1}줄 생략)...\n${windowLines}` : (windowLines ? '\n' + windowLines : '');
        fileCtx = headerLines + windowPart;
        omitNote = ` (${lines.length}줄 중 앞 ${headerEnd}줄 + 커서 주변 표시)${overview}`;
      }
      // Byte safety net: a few-line minified/data file passes the line check but can be
      // tens of MB. Hard-cap the assembled context so /api/chat never gets a giant body.
      if (fileCtx.length > MAX_AI_FILE_BYTES) {
        fileCtx = fileCtx.slice(0, MAX_AI_FILE_BYTES) + `\n…[파일이 너무 커서 잘림 — 전체 ${Math.round(content.length / 1024)}KB]`;
        omitNote = omitNote || ` (대용량 ${Math.round(content.length / 1024)}KB — 앞부분만 표시)`;
      }
      // Use bare filename so model never sees the client project prefix
      const displayName = _clientBareFileName(currentFile.name);
      contextMsg = `${otherFilesCtx}[현재 파일: ${displayName}${omitNote}]\n\`\`\`${langHint}\n${fileCtx}\n\`\`\`\n\n${resolvedMessage}`;
    }
  }

  // 이미지 첨부 시 채팅 버블에 썸네일 표시
  const userBubble = codeAiAppend('user', message || '🖼️');
  if (attachedImages.length) {
    attachedImages.forEach(img => {
      const im = document.createElement('img');
      im.src = img.dataUrl;
      im.style.cssText = 'max-width:120px;max-height:90px;border-radius:4px;display:block;margin-top:4px';
      userBubble.appendChild(im);
    });
  }
  const historyEntry = currentFile ? `[파일: ${_clientBareFileName(currentFile.name)}] ${message}` : message;
  codeAiHistory.push({ role: 'user', content: historyEntry });
  try { updateSessionPanel(); } catch (_) {}

  if (codeAiAbort) codeAiAbort.abort();
  codeAiAbort = new AbortController();

  _codeAiAutoAccept = true;
  _autoAcceptTurn = true;
  const thinkEl = codeAiAppend('thinking', '생각 중');
  let _execSecs = 0;
  const _execTimer = setInterval(() => {
    if (!thinkEl.classList.contains('thinking')) { clearInterval(_execTimer); return; }
    _execSecs++;
    const base = thinkEl.dataset.status || '생각 중';
    const warn = _execSecs >= 60 ? '  ⚠️ 모델이 길게 생각 중' : '';
    thinkEl.textContent = `${base}  ${_execSecs}s${warn}`;
  }, 1000);
  _showLogBubble();

  // Full-file context (Edit tool needs exact text to match)
  let execContextMsg = contextMsg;
  if (currentFile && monacoEditor && localDirHandle) {
    const fullContent = monacoEditor.getValue();
    const ext = currentFile.name.split('.').pop() || '';
    const displayName = _clientBareFileName(currentFile.name);
    let numberedFull = fullContent.split('\n').map((l, i) => `${i + 1}: ${l}`).join('\n');
    let bigNote = '';
    if (numberedFull.length > MAX_AI_FILE_BYTES) {
      numberedFull = numberedFull.slice(0, MAX_AI_FILE_BYTES) + `\n…[파일이 너무 커서 잘림 — 전체 ${Math.round(fullContent.length / 1024)}KB]`;
      bigNote = ` — 대용량, 앞부분만`;
    }
    execContextMsg = `${otherFilesCtx}[현재 파일: ${displayName} (전체 ${fullContent.split('\n').length}줄${bigNote})]\n\`\`\`${ext}\n${numberedFull}\n\`\`\`\n\n${resolvedMessage}`;
  }

  try {
    if (codeAiAbort) codeAiAbort.abort();
    codeAiAbort = new AbortController();

    // Build messages for client-owned loop (Claude Code style)
    const _statusMove = (text) => { thinkEl.dataset.status = text; thinkEl.textContent = `${text}  ${_execSecs}s`; thinkEl.style.display = ''; const msgs = document.getElementById('code-ai-msgs'); if (msgs) msgs.appendChild(thinkEl); codeAiScrollBottom(); };
    const sysPrompt = _buildCodeSystemPrompt();
    // 이미지 첨부 시 content를 배열로 구성 (vision API 포맷)
    const userContent = attachedImages.length
      ? [
          { type: 'text', text: execContextMsg },
          ...attachedImages.map(img => ({ type: 'image_url', image_url: { url: img.dataUrl } })),
        ]
      : execContextMsg;
    let messages = [
      { role: 'system', content: sysPrompt },
      ..._histForAPI(codeAiHistory),
      { role: 'user', content: userContent },
    ];
    let finalReply = '', _firstToolSeen = false;
    let liveTextEl = null, segReply = '';
    _statusMove('분석 중');
    // Client-owned conversation loop (Claude Code style: Read/Write/Edit/Glob/Grep/Bash)

    while (true) {
      const { reply, toolCalls, usage } = await _codeAiOneRound(messages, (tok) => {
        segReply += tok;
        if (!liveTextEl) { liveTextEl = codeAiAppend('assistant', ''); liveTextEl.classList.add('streaming'); }
        liveTextEl.textContent = segReply; codeAiScrollBottom();
      });
      finalReply = reply || segReply;
      if (usage) _codeAiOnUsage(usage);
      if (!toolCalls.length) break;

      // Finalize pre-tool text bubble
      if (liveTextEl) {
        if (!segReply.trim()) liveTextEl.remove();
        else { liveTextEl.classList.remove('streaming'); codeAiRenderMarkdown(liveTextEl, segReply); }
        liveTextEl = null; segReply = '';
      }
      _firstToolSeen = true;

      // Execute each tool client-side
      const ollamaToolCalls = [], toolResultContents = [];
      for (const tc of toolCalls) {
        const { id, name, args } = tc;
        const shortFname = (args.file || args.filename || args.pattern || args.command || '').split('/').pop() || '';
        _statusMove(`${_TOOL_ICONS[name] || '🔧'} ${name}${shortFname ? ': ' + shortFname : ''} ...`);
        _showLogBubble();
        _codeAiToolAction(name, args, null, null);
        const { result, error } = await _executeToolLocal(name, args);
        _codeAiToolAction(name, null, result, error);
        if (!error && ['Write', 'Edit'].includes(name)) setTimeout(() => codeSbRefresh(), 200);
        ollamaToolCalls.push({ id: id || `call_${name}_${Date.now()}`, function: { name, arguments: args } });
        toolResultContents.push(result);
      }
      _statusMove('💭 다음 단계 분석 중...');

      // Append tool round to messages (Ollama native format)
      messages.push({ role: 'assistant', content: finalReply || '', tool_calls: ollamaToolCalls });
      for (const r of toolResultContents) messages.push({ role: 'tool', content: r });
    }

    // Finalize history and UI
    codeAiHistory.push({ role: 'assistant', content: _histEntry(finalReply) || '(응답 없음)' });
    _compressHistory(); // fire-and-forget: runs in background, saves after completion
    _autoSaveChatSession();
    if (activeProjectName) saveProjectSession(activeProjectName);
    try { updateSessionPanel(); } catch (_) {}
    thinkEl.classList.remove('streaming');
    if (_firstToolSeen) {
      thinkEl.remove();
      _hideLogBubble();
      if (liveTextEl) { liveTextEl.classList.remove('streaming'); codeAiRenderMarkdown(liveTextEl, segReply); }
      const doneEl = codeAiAppend('system', '✅ 완료');
      doneEl.style.cssText = 'font-weight:600;color:#4ade80;';
      setTimeout(() => codeSbRefresh(), 400);
    } else {
      _hideLogBubble();
      thinkEl.className = 'code-ai-msg assistant';
      if (!finalReply) { thinkEl.textContent = '(응답 없음)'; thinkEl.style.display = ''; }
      else { codeAiRenderMarkdown(thinkEl, finalReply); thinkEl.style.display = ''; }
    }
  } catch(e) {
    _hideLogBubble();
    if (!thinkEl.isConnected) { const msgs = document.getElementById('code-ai-msgs'); if (msgs) msgs.appendChild(thinkEl); }
    thinkEl.style.display = '';
    thinkEl.className = 'code-ai-msg thinking';
    const errMsg = (e.name === 'AbortError' || (e.message || '').includes('aborted'))
      ? '요청이 취소되었습니다. 다시 시도해주세요.'
      : (e.message || e);
    thinkEl.textContent = '오류: ' + errMsg;
    _autoAcceptTurn = false;
  } finally {
    clearInterval(_execTimer);
    _codeAiAutoAccept = false;
  }
}

// ── Live server log bubble ────────────────────────────────────────────────
let _logBubble = null;
let _logPollTimer = null;
let _logBubbleStartCount = 0;  // totalCount watermark — only show logs from after bubble appeared

function _showLogBubble() {
  if (_logBubble) return;
  const msgs = document.getElementById('code-ai-messages');
  if (!msgs) return;
  _logBubble = document.createElement('div');
  _logBubble.className = 'code-ai-log-bubble';
  _logBubble.innerHTML = '<span class="log-live-dot"></span><span class="log-lines"></span>';
  msgs.appendChild(_logBubble);
  codeAiScrollBottom();
  // Record current totalCount so we only show logs that arrive during AI processing
  fetch('/api/logs', { headers: authHeaders({}) })
    .then(r => r.json()).then(d => { _logBubbleStartCount = d.totalCount || 0; })
    .catch(() => {})
    .finally(() => { _logPollTimer = setInterval(_pollLogBubble, 800); });
}

async function _pollLogBubble() {
  if (!_logBubble) return;
  try {
    const r = await fetch('/api/logs', { headers: authHeaders({}) });
    if (!r.ok) return;
    const data = await r.json();
    const allEntries = data.entries || [];
    const newCount = Math.max(0, (data.totalCount || 0) - _logBubbleStartCount);
    const newEntries = newCount > 0 ? allEntries.slice(-Math.min(newCount, allEntries.length)) : [];
    const lines = newEntries.filter(e => !/^\[v\d\]|^\[task\]|^\[orch\]/.test(e.msg)).slice(-4).map(e => e.msg.slice(0, 90));
    const linesEl = _logBubble.querySelector('.log-lines');
    if (linesEl) linesEl.textContent = lines.join('\n');
    codeAiScrollBottom();
  } catch {}
}

function _hideLogBubble() {
  if (_logPollTimer) { clearInterval(_logPollTimer); _logPollTimer = null; }
  const b = _logBubble; _logBubble = null;
  if (b) { b.style.opacity = '0'; setTimeout(() => b.remove(), 400); }
}

// ── Tool action cards for Cline-style visibility ──────────────────────────
const _TOOL_ICONS = {
  Read: '📖', Write: '📄', Edit: '✏️', Glob: '🔍', Grep: '🔎', Bash: '▶️',
};
const _TOOL_COLORS = {
  Read: '#3b82f6', Write: '#22c55e', Edit: '#f59e0b', Glob: '#3b82f6', Grep: '#8b5cf6', Bash: '#f59e0b',
};
const _FILE_TOOLS = new Set(['Read', 'Write', 'Edit', 'Glob', 'Grep']);

function _codeAiToolAction(toolName, toolArgs, toolResult, toolError) {
  const msgs = document.getElementById('code-ai-messages');
  if (!msgs) return;
  const icon = _TOOL_ICONS[toolName] || '🔧';
  const color = _TOOL_COLORS[toolName] || '#6b7280';

  if (toolArgs !== null) {
    // Tool call event — show action card
    const card = document.createElement('div');
    card.className = 'code-ai-tool-card';
    card.dataset.tool = toolName;
    const _looksLikeFilename = (s) => s && typeof s === 'string' && s.length < 200 && !s.includes('\n') && !s.includes('\t');
    const fname = (_looksLikeFilename(toolArgs.file) ? toolArgs.file : _looksLikeFilename(toolArgs.filename) ? toolArgs.filename : toolArgs.name || '');
    const shortName = fname.replace(/^code\//, '').split('/').pop() || '';
    const isFile = _FILE_TOOLS.has(toolName);
    let detail;
    if (toolName === 'Write') {
      const lines = toolArgs.content ? toolArgs.content.split('\n').length : 0;
      detail = escHtml((shortName || fname) + (lines ? ` (${lines}줄)` : ''));
    } else if (isFile) {
      detail = escHtml(shortName || toolArgs.pattern || fname);
    } else {
      detail = escHtml((toolArgs.command || toolArgs.query || toolArgs.code || '').slice(0, 60));
    }
    card.innerHTML = `<span class="code-ai-tool-icon" style="color:${color}">${icon}</span> <span class="code-ai-tool-name">${escHtml(toolName)}</span> <span class="code-ai-tool-detail" style="color:var(--muted);font-size:11px">${detail}</span>`;
    msgs.appendChild(card);
    codeAiScrollBottom();
  } else if (toolResult !== null) {
    // Tool result event — update last matching card or append result
    const cards = msgs.querySelectorAll(`.code-ai-tool-card[data-tool="${toolName}"]`);
    const card = cards[cards.length - 1];
    if (card && !card.dataset.done) {
      card.dataset.done = '1';
      const resultIcon = toolError ? '❌' : '✅';
      const resultText = toolError ? escHtml((toolResult || 'Error').slice(0, 120)) : escHtml((toolResult || '').slice(0, 80));
      const resultEl = document.createElement('span');
      resultEl.className = 'code-ai-tool-result';
      resultEl.innerHTML = resultText ? `${resultIcon} ${resultText}` : resultIcon;
      card.appendChild(resultEl);
      if (toolError) card.style.borderLeftColor = '#f87171';
    }
    codeAiScrollBottom();
  }
}

// ── Client-owned tool execution (Read/Write/Edit/Glob/Grep/Bash) ──────────────

function _globMatch(pattern, filepath) {
  // Convert glob pattern to regex: ** → any path, * → non-slash chars, ? → one non-slash
  const re = pattern
    .replace(/[.+^${}()|[\]\\]/g, '\\$&')
    .replace(/\*\*/g, '__DOUBLESTAR__')
    .replace(/\*/g, '[^/]*')
    .replace(/\?/g, '[^/]')
    .replace(/__DOUBLESTAR__/g, '.*');
  return new RegExp('^' + re + '$').test(filepath);
}

async function _executeToolLocal(name, args) {
  try {
    switch (name) {
      case 'Read': {
        const fname = args.file || '';
        if (!fname) return { result: '오류: file 인수가 필요합니다', error: true };
        const raw = await localReadFile(_clientProjectPath(_clientBareFileName(fname)))
          ?? await localReadFile(_clientBareFileName(fname));
        if (raw === null) {
          const tab = codeFiles.find(f => f.name === fname || f.name.endsWith('/' + fname));
          if (tab) {
            const tc = tab.model ? tab.model.getValue() : tab.content;
            _readFileCache[_clientBareFileName(fname)] = tc;
            const lines = tc.split('\n');
            const offset = args.offset ? Math.max(0, (args.offset|0) - 1) : 0;
            const limit = args.limit ? (args.limit|0) : lines.length;
            return { result: lines.slice(offset, offset + limit).map((l, i) => `${offset + i + 1}: ${l}`).join('\n'), error: false };
          }
          return { result: `오류: ${fname} 파일을 찾을 수 없습니다`, error: true };
        }
        _readFileCache[_clientBareFileName(fname)] = raw;
        const lines = raw.split('\n');
        const offset = args.offset ? Math.max(0, (args.offset|0) - 1) : 0;
        const limit = args.limit ? (args.limit|0) : lines.length;
        const sliced = lines.slice(offset, offset + limit);
        return { result: sliced.map((l, i) => `${offset + i + 1}: ${l}`).join('\n'), error: false };
      }
      case 'Write': {
        const fname = args.file || '';
        const newContent = args.content ?? '';
        if (!fname) return { result: '오류: file 인수가 필요합니다', error: true };
        if (fname.startsWith('#!') || /^\//.test(fname)) return { result: `오류: 유효하지 않은 파일명: ${fname.slice(0, 60)}`, error: true };
        const bare = _clientBareFileName(fname);
        const diskPath = _clientProjectPath(bare);
        if (localDirHandle) await localWriteFile(diskPath, newContent);
        codeEditorWriteFile(bare, newContent);
        _readFileCache[bare] = newContent;
        return { result: `${bare} 저장 완료 (${newContent.split('\n').length}줄)`, error: false };
      }
      case 'Edit': {
        const fname = args.file || '';
        const oldStr = args.old_string ?? '';
        const newStr = args.new_string ?? '';
        if (!fname) return { result: '오류: file 인수가 필요합니다', error: true };
        if (fname.startsWith('#!') || /^\//.test(fname)) return { result: `오류: 유효하지 않은 파일명: ${fname.slice(0, 60)}`, error: true };
        const bare = _clientBareFileName(fname);
        const existing = await _codeAiReadLocalFile(bare);
        if (existing === null) return { result: `오류: ${bare}을(를) 찾을 수 없습니다`, error: true };
        if (!existing.includes(oldStr)) {
          const preview = oldStr.slice(0, 60).replace(/\n/g, '↵');
          return { result: `오류: old_string을 파일에서 찾을 수 없습니다\n검색: "${preview}…"`, error: true };
        }
        const updated = existing.replace(oldStr, newStr);
        const diskPath = _clientProjectPath(bare);
        if (localDirHandle) await localWriteFile(diskPath, updated);
        codeEditorWriteFile(bare, updated);
        _readFileCache[bare] = updated;
        return { result: `${bare} 수정 완료`, error: false };
      }
      case 'Glob': {
        const pattern = args.pattern || '**/*';
        if (!localDirHandle) return { result: '(로컬 폴더가 연결되지 않았습니다)', error: false };
        const allFiles = await localListFiles(localDirHandle, '');
        const matches = allFiles.filter(f => _globMatch(pattern, f));
        return { result: matches.length ? matches.join('\n') : '(매칭 파일 없음)', error: false };
      }
      case 'Grep': {
        const pattern = args.pattern || '';
        const searchPath = args.path || null;
        const ci = !!args.case_insensitive;
        if (!localDirHandle && !searchPath) return { result: '(로컬 폴더가 연결되지 않았습니다)', error: false };
        let files;
        if (searchPath) {
          files = [_clientBareFileName(searchPath)];
        } else {
          files = await localListFiles(localDirHandle, '');
          const CODE_EXTS_RE = /\.(js|ts|jsx|tsx|py|java|c|cpp|h|cs|go|rs|php|rb|swift|kt|html|css|json|yaml|yml|xml|md|sh|sql)$/i;
          files = files.filter(f => CODE_EXTS_RE.test(f));
        }
        let regex;
        try { regex = new RegExp(pattern, ci ? 'gi' : 'g'); } catch { regex = new RegExp(pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), ci ? 'gi' : 'g'); }
        const results = [];
        for (const f of files) {
          if (results.length >= 200) break;
          const fc = await localReadFile(_clientProjectPath(f)) ?? await localReadFile(f);
          if (!fc) continue;
          fc.split('\n').forEach((line, idx) => {
            if (regex.test(line)) results.push(`${f}:${idx + 1}: ${line.trim()}`);
            regex.lastIndex = 0;
          });
        }
        return { result: results.slice(0, 200).join('\n') || '(결과 없음)', error: false };
      }
      case 'Bash': {
        const cmd = args.command || '';
        if (!cmd) return { result: '오류: command 인수가 필요합니다', error: true };
        if (!localDirHandle) return { result: '⚠️ Bash를 사용하려면 로컬 폴더를 먼저 연결해주세요 (🖥️ 버튼)', error: true };
        if (!companionWs || companionWs.readyState !== WebSocket.OPEN) {
          return { result: '⚠️ companion.py가 연결되지 않았습니다. Bash 명령을 실행하려면 companion.py를 먼저 실행하세요.', error: true };
        }
        return await new Promise((resolve) => {
          const reqId = 'bash_' + Date.now();
          const timeout = setTimeout(() => resolve({ result: '오류: 명령 실행 시간 초과 (30s)', error: true }), 30000);
          const handler = (evt) => {
            try {
              const d = JSON.parse(evt.data);
              if (d.reqId === reqId) {
                clearTimeout(timeout);
                companionWs.removeEventListener('message', handler);
                resolve({ result: d.output ?? d.result ?? '', error: !!d.error });
              }
            } catch {}
          };
          companionWs.addEventListener('message', handler);
          companionWs.send(JSON.stringify({ type: 'exec', command: cmd, reqId }));
        });
      }
      default:
        return { result: `알 수 없는 툴: ${name}`, error: true };
    }
  } catch (e) {
    return { result: `오류: ${e?.message || e}`, error: true };
  }
}

async function _compressHistory() {
  const COMPRESS_AT = 24;
  const KEEP_RECENT = 8;
  if (codeAiHistory.length <= COMPRESS_AT) return;

  const compressEntries = codeAiHistory.slice(0, codeAiHistory.length - KEEP_RECENT);
  const keepEntries = codeAiHistory.slice(codeAiHistory.length - KEEP_RECENT);

  const prevSummary = _historySummary ? `[이전 요약]\n${_historySummary}\n\n` : '';
  const histText = compressEntries.map(m => {
    const role = m.role === 'user' ? '사용자' : 'AI';
    return `${role}: ${(m.content || '').slice(0, 600)}`;
  }).join('\n\n');

  const summaryMessages = [
    { role: 'system', content: '당신은 코딩 세션 요약 전문가입니다.' },
    { role: 'user', content: `${prevSummary}다음 코딩 대화를 요약하세요. 어떤 파일을 다뤘는지, 어떤 수정을 했는지, 해결된 문제와 현재 상태를 5~8문장으로 간결하게:\n\n${histText}` },
  ];

  try {
    const resp = await fetch('/api/code/round', {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify({ messages: summaryMessages, tools: [], sessionId: codeAiSessionId }),
    });
    if (!resp.ok) return;
    const reader = resp.body.getReader();
    const dec = new TextDecoder();
    let buf = '', summary = '';
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      buf += dec.decode(value, { stream: true });
      const lines = buf.split('\n'); buf = lines.pop() ?? '';
      for (const line of lines) {
        if (!line.startsWith('data:')) continue;
        try {
          const ev = JSON.parse(line.slice(5).trim());
          if (ev.type === 'done') summary = ev.reply || summary;
          else if (ev.type === 'token') summary += ev.text;
        } catch {}
      }
    }
    if (!summary.trim()) return;
    _historySummary = summary.trim();
    codeAiHistory = keepEntries;
    try { _autoSaveChatSession(); if (activeProjectName) saveProjectSession(activeProjectName); } catch {}
  } catch {}
}

async function _codeAiOneRound(messages, onToken) {
  const resp = await fetch('/api/code/round', {
    method: 'POST',
    headers: authHeaders({ 'Content-Type': 'application/json' }),
    signal: codeAiAbort?.signal,
    body: JSON.stringify({
      messages,
      tools: CLIENT_TOOL_DEFS,
      sessionId: codeAiSessionId,
      ...(codeAiModel ? { model: codeAiModel } : {}),
      ...(_csbSelBoard?.fqbn ? { boardContext: `${_csbSelBoard.name} (${_csbSelBoard.fqbn})` } : {}),
    }),
  });
  if (!resp.ok) throw new Error(`/api/code/round ${resp.status}: ${await resp.text()}`);
  const reader = resp.body.getReader();
  const dec = new TextDecoder();
  let buf = '', reply = '', usage = null, toolCalls = [];
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buf += dec.decode(value, { stream: true });
    const lines = buf.split('\n');
    buf = lines.pop() ?? '';
    for (const line of lines) {
      if (!line.startsWith('data:')) continue;
      const raw = line.slice(5).trim();
      if (raw === '[DONE]') continue;
      try {
        const ev = JSON.parse(raw);
        if (ev.type === 'token' && ev.text) { onToken(ev.text); reply += ev.text; }
        else if (ev.type === 'usage') { usage = ev; }
        else if (ev.type === 'done') {
          reply = ev.reply || reply;
          toolCalls = ev.toolCalls || [];
          usage = ev.usage || usage;
        } else if (ev.type === 'error') { throw new Error(ev.message || 'Server error'); }
      } catch (parseErr) {
        if (parseErr.message?.includes('Server error') || parseErr.message?.includes('/api/code/round')) throw parseErr;
      }
    }
  }
  return { reply, toolCalls, usage };
}

function _buildCodeSystemPrompt() {
  // 현재 에디터에 열린 파일 목록
  const openFiles = codeFiles.map(f => f.name).filter(Boolean);
  const activeFile = (() => { try { return codeFiles.find(f => f.id === activeCodeFileId)?.name || ''; } catch { return ''; } })();
  const summaryBlock = _historySummary ? `\n[이전 대화 요약]\n${_historySummary}\n` : '';
  const _activeCode = (() => { try { const f = codeFiles.find(f => f.id === activeCodeFileId); return f?.model?.getValue() || f?.content || ''; } catch { return ''; } })();
  const boardHints = _boardSpecificHints(_activeCode);
  const isLangOnly = _csbSelBoard?.fqbn?.startsWith('lang:');
  const libBlock = (!isLangOnly && _csbBoardLibs.length)
    ? `\n설치된 라이브러리: ${_csbBoardLibs.join(', ')}`
    : '';
  const boardBlock = _csbSelBoard?.fqbn
    ? `\n## ${isLangOnly ? '코딩 언어' : '대상 보드'}: ${_csbSelBoard.name}${isLangOnly ? '' : ` (${_csbSelBoard.fqbn})`}${boardHints}${libBlock}\n`
    : '';

  // 에디터 파일 컨텍스트 — 로컬 폴더와 분리하여 강조
  let editorNote = '';
  if (openFiles.length) {
    editorNote = `\n## 에디터 파일 (작업 대상)
현재 에디터에 열린 파일: ${openFiles.join(', ')}${activeFile ? `\n현재 활성 파일: **${activeFile}**` : ''}
⚠️ 코드 작업은 이 파일들을 대상으로 하세요. 로컬 폴더를 Glob/list해서 프로젝트를 파악하려 하지 마세요.\n`;
  }

  // 로컬 폴더 노트 (파일 저장 경로)
  const localNote = localDirHandle
    ? `로컬 폴더 "${localDirHandle.name}"이 파일 저장소로 연결되어 있습니다.`
    : '로컬 폴더가 연결되지 않았습니다.';

  const karpathyBlock = _karpathyMode ? `
## Karpathy 코딩 가이드라인 (필수)
1. Think Before Coding — 가정을 명시하고, 모호하면 질문하세요. 여러 해석 가능 시 제시 후 선택하세요.
2. Simplicity First — 최소한의 코드로 문제를 해결하세요. 요청받지 않은 기능, 단일 사용 추상화, 불필요한 에러 핸들링을 넣지 마세요.
3. Surgical Changes — 사용자 요청과 직접 관련 없는 코드는 건드리지 마세요. 기존 스타일을 그대로 따르세요. 내 변경으로 인한 고아 코드만 제거하세요.
4. Goal-Driven Execution — 작업을 검증 가능한 목표로 변환하세요. "버그 수정" → "재현 테스트 작성 → 통과".
` : '';
  return `당신은 전문 코드 어시스턴트입니다. ${localNote}${boardBlock}${editorNote}${summaryBlock}${karpathyBlock}

## 툴 사용 지침
- 파일을 수정하기 전에 반드시 Read로 현재 내용을 확인하세요.
- **Edit**: 1~2곳의 정밀 교체에만 사용. old_string은 파일 내용과 정확히 일치해야 합니다 (공백·들여쓰기 포함).
- **Write**: 수정이 3곳 이상이거나 전체 리팩토링·일괄 변경 시 사용. Read로 읽은 내용을 수정한 뒤 Write로 교체하세요. Edit 반복보다 훨씬 빠릅니다.
- Glob으로 파일 목록 검색, Grep으로 코드 내용 검색이 가능합니다.
- Bash는 companion.py 연결 시 터미널 명령을 실행합니다.
- **파일을 2번 검색해도 없으면 즉시 멈추세요.** 같은 패턴으로 반복 검색하지 말고, 파일이 없다는 사실을 사용자에게 설명한 뒤 다른 해결책을 제안하세요.

## 파일 경로 규칙 (중요)
- 파일 경로에 절대경로·Windows 경로를 절대 사용하지 마세요: Documents/, Desktop/, C:\\, /home/ 등 금지.
- 프로젝트 루트 기준 상대 경로만 사용하세요. 예: \`main.ino\`, \`src/utils.cpp\`, \`lib/helper.h\`
- 새 프로젝트를 만들면 해당 폴더가 루트입니다. 별도의 상위 폴더를 만들지 마세요.

## 회로도 파일 규칙 (중요)
- \`circuit.json\` (회로도)은 사용자가 **명시적으로 회로도 편집을 요청**할 때만 읽거나 수정하세요.
- "TFT 연결해줘", "회로도에 부품 추가해줘" 같이 회로도 편집을 직접 언급한 경우에만 해당.
- 코드 작성·분석·업로드 등 일반 작업 중에는 circuit.json을 열지 마세요.

## 응답 원칙
- **코드 변경은 반드시 Edit 또는 Write 도구로만** 하세요. 텍스트로 "수정했습니다", "수정 완료", 마크다운 코드 블록 출력으로 파일이 바뀌지 않습니다.
- 변경 사항은 도구 호출 후 한 줄로 간결하게 설명하세요.
- 여러 파일을 수정해야 한다면 순서대로 각각 처리하세요.`;
}



// Read a file from editor tabs (preferred) or local folder
async function _codeAiReadLocalFile(fname) {
  // Normalise: strip code/ prefix, then strip project prefix → bare name
  const bare = _clientBareFileName(fname.replace(/^code\//, ''));
  // Try editor tabs first (most up-to-date); tabs store bare names in client-local mode
  const tab = codeFiles.find(f => f.name === bare || f.name === fname || f.name.endsWith('/' + bare));
  if (tab) return tab.model ? tab.model.getValue() : tab.content;
  // Try client-local disk (scoped to project subfolder when applicable)
  if (localDirHandle) {
    const content = await localReadFile(_clientProjectPath(bare));
    if (content !== null) return content;
    // Fallback: bare path (covers root-level files when no activeProjectName)
    if (_clientProjectPath(bare) !== bare) {
      const c2 = await localReadFile(bare);
      if (c2 !== null) return c2;
    }
  }
  return null;
}

// Strip "123: " line-number prefixes the model copies from context (e.g. "42: def foo():")
function _stripLineNumbers(text) {
  // Only strip if EVERY non-empty line starts with a number prefix — avoids stripping real code
  const lines = text.split('\n');
  if (lines.every(l => !l.trim() || /^\d+: /.test(l))) {
    return lines.map(l => l.replace(/^\d+: /, '')).join('\n');
  }
  return text;
}

// Apply SEARCH/REPLACE blocks to content (client-side mirror of server coder_patch_file)
function _applySearchReplace(content, edits) {
  if (!edits || !content) return null;
  // Normalize line endings in both content and edits (\r\n / \r → \n)
  const normNl = s => s.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
  content = normNl(content);
  edits = normNl(edits);

  const srRegex = /------- SEARCH\n([\s\S]*?)\n=======\n([\s\S]*?)\n\+\+\+\+\+\+\+ REPLACE/g;
  let match;
  let result = content;
  let editCount = 0;
  while ((match = srRegex.exec(edits)) !== null) {
    // Strip line-number prefixes the model might have copied from numbered context
    const searchText = _stripLineNumbers(match[1]);
    const replaceText = _stripLineNumbers(match[2]);
    if (result.includes(searchText)) {
      result = result.replace(searchText, replaceText);
      editCount++;
    } else {
      // Fallback 1: trim trailing whitespace per line
      const trimEnd = s => s.split('\n').map(l => l.trimEnd()).join('\n');
      const trimmedResult = trimEnd(result);
      const trimmedSearch = trimEnd(searchText);
      if (trimmedResult.includes(trimmedSearch)) {
        const lines = result.split('\n');
        const searchLines = searchText.split('\n');
        const normLines = lines.map(l => l.trimEnd());
        const normSearch = searchLines.map(l => l.trimEnd());
        for (let i = 0; i <= normLines.length - normSearch.length; i++) {
          if (normLines.slice(i, i + normSearch.length).join('\n') === normSearch.join('\n')) {
            const originalText = lines.slice(i, i + searchLines.length).join('\n');
            result = result.replace(originalText, replaceText);
            editCount++;
            break;
          }
        }
      } else {
        // Fallback 2: ignore leading indentation (model sometimes guesses wrong indent)
        const stripIndent = s => s.split('\n').map(l => l.trimStart()).join('\n');
        const stripped = stripIndent(result);
        const strippedSearch = stripIndent(searchText);
        if (stripped.includes(strippedSearch)) {
          const lines = result.split('\n');
          const searchLines = searchText.split('\n');
          const normLines = lines.map(l => l.trimStart());
          const normSearch = searchLines.map(l => l.trimStart());
          for (let i = 0; i <= normLines.length - normSearch.length; i++) {
            if (normLines.slice(i, i + normSearch.length).join('\n') === normSearch.join('\n')) {
              // Detect the actual indentation from the first matching line and re-indent replaceText
              const actualIndent = lines[i].match(/^(\s*)/)?.[1] || '';
              const searchIndent = searchLines[0].match(/^(\s*)/)?.[1] || '';
              const reindented = replaceText.split('\n').map(l => {
                const trimmed = l.startsWith(searchIndent) ? l.slice(searchIndent.length) : l.trimStart();
                return actualIndent + trimmed;
              }).join('\n');
              const originalText = lines.slice(i, i + searchLines.length).join('\n');
              result = result.replace(originalText, reindented);
              editCount++;
              break;
            }
          }
        }
      }
    }
  }
  return editCount > 0 ? result : null;
}

function codeAiAppend(role, text) {
  const msgs = document.getElementById('code-ai-messages');
  if (!msgs) return null;
  const placeholder = msgs.querySelector('.code-ai-msg.thinking');
  if (placeholder && placeholder.textContent.includes('AI에게 전송')) placeholder.remove();
  const el = document.createElement('div');
  el.className = 'code-ai-msg ' + role;
  el.textContent = text;
  // Add streaming class during live token output
  if (role === 'thinking' || role === 'assistant') el.classList.add('streaming');
  msgs.appendChild(el);
  codeAiScrollBottom();
  return el;
}

// ── Inline markdown rendering (bold, italic, inline code, links) ──────────
function _renderInlineMarkdown(text) {
  // Escape HTML first
  let html = escHtml(text);
  // **bold**
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
  // *italic*
  html = html.replace(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, '<em>$1</em>');
  // `inline code`
  html = html.replace(/`([^`]+)`/g, '<code style="background:var(--panel-2);padding:1px 4px;border-radius:3px;font-family:IBM Plex Mono,monospace;font-size:11px;">$1</code>');
  // [link](url)
  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" style="color:var(--brand);">$1</a>');
  // Line breaks
  html = html.replace(/\n/g, '<br>');
  return html;
}

function _isDiffCode(lang, code) {
  if (lang === 'diff') return true;
  if (['text', 'sh', 'bash', 'shell', 'console'].includes(lang)) return false;
  const lines = code.split('\n');
  if (!lines.some(l => l.trim())) return false;
  // An @@ hunk header is an unambiguous diff signal.
  if (lines.some(l => l.startsWith('@@'))) return true;
  // Count single-char +/- markers. The old test required a space after the
  // marker (/^[+\-] /), which BOTH missed standard `+code`/`-code` diffs (no
  // space → markers leaked into the file as literal text) AND misfired on
  // markdown "- item" lists. Exclude +++/--- file headers and ++/-- runs.
  const plus  = lines.filter(l => /^\+(?!\+\+)/.test(l)).length;
  const minus = lines.filter(l => /^-(?!--)/.test(l)).length;
  if (plus === 0 && minus === 0) return false;
  // A two-sided change (both adds and removes) is unambiguously a diff.
  if (plus > 0 && minus > 0) return true;
  // Single-sided: only a diff if accompanied by real context lines. A diff
  // context line is " <code>" — a marker space then content that is NOT itself a
  // bullet ("- "/"* "/"+ "). This separates a unified-diff body from a plain
  // YAML/markdown list, whose items are bullets at any indent.
  const strongContext = lines.filter(l =>
    /^ /.test(l) && l.trim() && !/^[-*+]\s/.test(l.trim())).length;
  if (strongContext > 0) return true;
  // Note: we do NOT use filename comments as a diff indicator here.
  // `# filename:` comments appear in both diff blocks AND new-file blocks,
  // so using them to detect diffs causes false positives that break multi-file
  // extraction (new files get misclassified as diffs and silently dropped).
  return false;
}

// Render AI message with markdown code blocks parsed out
// Uses the same line-start fence detection as codeLiveStreamUpdate to avoid
// false matches on ``` inside code (comments, strings, etc.)
function codeAiRenderMarkdown(el, text) {
  el.innerHTML = '';
  // Detect explicit plan blocks: 📋 marker OR 3+ consecutive numbered items (1. / 1) )
  // Narrow enough to avoid false-positives on normal prose starting with → or ▶
  const planMarkerRe = /^📋\s*.+/m;
  const numberedListRe = /(?:^\d+[).]\s+.+\n){3,}/m;
  const isPlan = planMarkerRe.test(text) || numberedListRe.test(text);
  let remaining = text;
  if (isPlan) {
    const lines = text.split('\n');
    const planLines = [];
    let inPlan = false;
    for (const line of lines) {
      if (/^📋/.test(line) || /^\d+[).]\s+/.test(line)) { inPlan = true; planLines.push(line); }
      else if (inPlan && line.trim() === '') break;
      else if (inPlan) planLines.push(line);
    }
    if (planLines.length >= 2) {
      const planDiv = document.createElement('div');
      planDiv.className = 'code-ai-plan';
      // Only prepend 📋 계획 header if the first line isn't already a header/emoji title
      const firstLine = planLines[0].trim();
      const hasTitle = /^📋/.test(firstLine);
      const header = hasTitle ? '' : '<strong>📋 계획</strong><br>';
      planDiv.innerHTML = header + planLines.map(l => escHtml(l)).join('<br>');
      el.appendChild(planDiv);
      const lastPlanLine = planLines[planLines.length - 1];
      const planEnd = text.indexOf('\n', text.indexOf(lastPlanLine) + lastPlanLine.length);
      remaining = planEnd > 0 ? text.slice(planEnd + 1) : '';
    }
  }
  // Parse code blocks using line-start toggle parser (same as streaming)
  const fenceRe = /```([\w\-]*)[ \t]*\r?\n/g;
  const parts = []; // alternating: text, {lang, code}, text, {lang, code}, ...
  let lastEnd = 0, inBlock = false, blockLang = '', blockStart = 0, m;
  while ((m = fenceRe.exec(remaining)) !== null) {
    // Require ``` at start of line (only whitespace before it)
    const lineStart = m.index === 0 ? 0 : remaining.lastIndexOf('\n', m.index - 1) + 1;
    const prefix = remaining.slice(lineStart, m.index);
    if (prefix.trim() !== '') continue; // mid-line ```, skip
    if (!inBlock) {
      // Text before this opening fence
      if (m.index > lastEnd) parts.push({ type: 'text', content: remaining.slice(lastEnd, m.index) });
      blockLang = m[1] || 'text';
      blockStart = m.index + m[0].length;
      inBlock = true;
    } else {
      // Closing fence — emit the code block
      parts.push({ type: 'code', lang: blockLang, code: remaining.slice(blockStart, m.index) });
      lastEnd = m.index + m[0].length;
      inBlock = false;
    }
  }
  // Handle unclosed block (streaming or malformed).
  if (inBlock) {
    const rawCode = remaining.slice(blockStart).replace(/\n`{3}[\w-]*[ \t]*$/, '\n');
    parts.push({ type: 'code', lang: blockLang, code: rawCode });
    lastEnd = remaining.length;
  }
  // Trailing text after last block
  if (lastEnd < remaining.length) parts.push({ type: 'text', content: remaining.slice(lastEnd) });

  let codeCount = 0;
  const codeBlocks = [];
  _DBG && console.log(`[codeAiRenderMarkdown] parts=${parts.length} types=${parts.map(p=>p.type).join(',')}`);
  for (const part of parts) {
    if (part.type === 'code') {
      const lang = part.lang || 'text';
      const code = part.code;
      codeBlocks.push({ lang, code });
      const isDiff = _isDiffCode(lang, code);

      // Extract filename from '# filename: ...' comment if present
      let diffFilename = null;
      if (isDiff) {
        const m = code.match(/^#\s*filename:\s*(.+)/m);
        if (m) diffFilename = m[1].trim().split('/').pop();
      }

      const wrapper = document.createElement('div');
      wrapper.className = 'code-ai-code-block';
      const header = document.createElement('div');
      header.className = 'code-ai-code-header';
      const langLabel = document.createElement('span');
      langLabel.textContent = isDiff ? ('diff' + (diffFilename ? '  ' + diffFilename : '')) : (lang || 'code');
      header.appendChild(langLabel);

      let contentEl;
      if (isDiff) {
        contentEl = document.createElement('div');
        contentEl.className = 'diff-block';
        for (const line of code.split('\n')) {
          const span = document.createElement('span');
          span.className = 'diff-line' + (
            line.startsWith('+') ? ' diff-line-add' :
            line.startsWith('-') ? ' diff-line-del' :
            line.startsWith('@@') ? ' diff-line-hunk' :
            (line.startsWith('---') || line.startsWith('+++') || line.startsWith('#')) ? ' diff-line-file' : ''
          );
          span.textContent = line;
          contentEl.appendChild(span);
        }
      } else {
        contentEl = document.createElement('pre');
        contentEl.textContent = code;
      }

      wrapper.appendChild(header);
      wrapper.appendChild(contentEl);
      const actionBtn = document.createElement('button');
      actionBtn.className = 'code-ai-open-btn';
      if (isDiff) {
        actionBtn.textContent = '🔀 diff 적용';
        actionBtn.onclick = () => { codeAiApplyDiff(code); actionBtn.textContent = '✅ 적용됨'; actionBtn.disabled = true; };
      } else {
        actionBtn.textContent = '📂 에디터에서 열기';
        actionBtn.onclick = () => codeAiOpenInEditor(code, lang);
      }
      wrapper.appendChild(actionBtn);
      el.appendChild(wrapper);
      codeCount++;
    } else {
      const span = document.createElement('span');
      span.style.whiteSpace = 'pre-wrap';
      span.innerHTML = _renderInlineMarkdown(part.content || '');
      el.appendChild(span);
    }
  }
  // Code blocks were already streamed into the editor by codeLiveStreamUpdate,
  // so no auto-open here — just render the chat UI. The "📂 에디터에서 열기"
  // button above lets users manually re-open a block if needed.
}

const CODE_EXT_MAP = {
  // JavaScript / Node
  javascript:'js', js:'js', node:'js', nodejs:'js',
  typescript:'ts', ts:'ts', jsx:'jsx', tsx:'tsx',
  // Python
  python:'py', py:'py', python3:'py',
  // C family
  c:'c', 'c++':'cpp', cpp:'cpp', 'c#':'cs', csharp:'cs', cs:'cs',
  // JVM
  java:'java', kotlin:'kt', kt:'kt', scala:'scala', groovy:'groovy',
  // Systems / compiled
  rust:'rs', rs:'rs', go:'go', golang:'go', zig:'zig',
  // Web
  html:'html', css:'css', scss:'scss', less:'less', vue:'vue', svelte:'svelte',
  // Data / Config
  json:'json', yaml:'yml', yml:'yml', toml:'toml', xml:'xml', csv:'csv',
  // Shell
  shell:'sh', bash:'sh', sh:'sh', zsh:'sh', fish:'fish', powershell:'ps1', ps1:'ps1',
  // Database
  sql:'sql', sqlite:'sql', postgresql:'sql', mysql:'sql',
  // Mobile / Other
  swift:'swift', dart:'dart', lua:'lua', perl:'pl', r:'r',
  ruby:'rb', rb:'rb', php:'php', elixir:'ex', erlang:'erl',
  haskell:'hs', ocaml:'ml', fsharp:'fs',
  // Docs
  markdown:'md', md:'md', tex:'tex', latex:'tex',
};

// Decide whether a markdown code block is a real file worth opening in the editor.
// Filters out shell run-instructions (e.g. ```python code/tetris.py```) and tiny snippets.
function codeIsOpenable(code, lang) {
  const trimmed = (code || '').trim();
  if (!trimmed) return false;
  const lines = trimmed.split('\n').filter(l => l.trim());
  const l = (lang || '').toLowerCase();
  const isShellLang = ['', 'text', 'console', 'sh', 'bash', 'shell', 'zsh', 'powershell', 'ps1'].includes(l);
  const cmdRe = /^\s*[$#>]?\s*(python3?|pip3?|npm|npx|node|yarn|pnpm|deno|bun|cd|ls|dir|cat|echo|curl|wget|git|chmod|mkdir|rm|cp|mv|source|sudo|export|set|run|\.\/)\b/i;
  // Single line: skip shell langs and short command-looking lines
  if (lines.length <= 1) {
    if (isShellLang) return false;
    if (cmdRe.test(trimmed)) return false;
    if (trimmed.length < 40) return false;
  }
  // Short shell block where every line is a command → run instructions, not a file
  if (isShellLang && lines.length <= 3 && lines.every(ln => cmdRe.test(ln))) return false;
  return true;
}

// Derive a filename from an embedded `# filename:` hint, or infer from code content.
const GENERIC_NAMES = new Set(['init','main','app','index','test','run','start','setup','util','helper','config','handler','utils','helpers','main']);
function codeDeriveName(code, lang) {
  const m = (code || '').match(/(?:#|\/\/|--|\/\*|<!--)\s*(?:filename|file)\s*[:=]\s*(\S+)/i)
    || (code || '').match(/^(?:#|\/\/)\s*(\w+\.\w+)/m);
  if (m) return m[1].replace(/[*\/>]+$/, '');
  // Infer filename from code content when no explicit hint
  const l = (lang || '').toLowerCase();
  const ext = CODE_EXT_MAP[l] || ((l && l.length <= 6) ? l : 'txt');
  // Try multiple strategies to find a meaningful name
  // 1. HTML <title> tag
  const htmlTitleMatch = code.match(/<title>([^<]+)<\/title>/i);
  // 2. Class/struct/interface name
  const classMatch = code.match(/(?:class|struct|interface)\s+([A-Z]\w+)/);
  // 3. First function name that's not too generic
  const funcMatches = [...code.matchAll(/(?:def|function|func|fn)\s+([a-zA-Z_]\w*)/g)].map(m => m[1]);
  const specificFunc = funcMatches.find(f => !GENERIC_NAMES.has(f.toLowerCase()));
  // 4. Title/game/app comment
  const titleMatch = code.match(/(?:title|게임|프로그램|app|application)[:\s]+["']?([a-zA-Z0-9_가-힣]+)["']?/i);
  // 5. <h1> heading
  const h1Match = code.match(/<h[12][^>]*>([^<]{2,30})<\/h[12]>/i);
  const candidates = [
    htmlTitleMatch && htmlTitleMatch[1].replace(/[가-힣]/g, '').trim(),
    classMatch && classMatch[1],
    specificFunc,
    titleMatch && titleMatch[1].replace(/[가-힣]/g, ''),
    h1Match && h1Match[1].replace(/[가-힣]/g, '').trim(),
  ].filter(Boolean);
  // Pick the first specific (non-generic) name
  for (const name of candidates) {
    const cleaned = name.replace(/[^a-zA-Z0-9_]/g, '').toLowerCase();
    if (cleaned.length >= 3 && cleaned.length <= 30 && !GENERIC_NAMES.has(cleaned)) {
      return cleaned + '.' + ext;
    }
  }
  // Fallback: use any candidate even if generic, or random
  if (candidates.length > 0) {
    const fallback = candidates[0].replace(/[^a-zA-Z0-9_]/g, '').toLowerCase();
    if (fallback.length >= 2) return fallback + '.' + ext;
  }
  return `ai_${Math.random().toString(36).slice(2,7)}.${ext}`;
}

// Write an exact (filename, content) pair into the Monaco editor immediately,
// creating or updating the tab. Used to mirror the model's coder_write_file in real time.
function codeEditorWriteFile(fname, content) {
  if (!monacoReady || !monacoEditor) {
    codePendingQueue.push({ fname, content, lang: codeDetectLang(fname) });
    initCodeView();
    return;
  }
  const existing = codeFiles.find(f => f.name === fname);
  if (existing) {
    const oldContent = existing.model ? existing.model.getValue() : existing.content;
    if (oldContent !== content) {
      if (_codeAiAutoAccept) {
        // Auto-accept mode: show diff briefly with scroll preview, then auto-save
        switchCodeFile(existing.id);
        showCodeDiff(existing.id, oldContent, content);
        _scrollAndAcceptDiff(existing.id);
      } else {
        switchCodeFile(existing.id);
        showCodeDiff(existing.id, oldContent, content);
      }
    }
  } else {
    codeNewFile(fname, content);
  }
}

function codeAiApplyDiff(diffCode) {
  if (!monacoReady || !monacoEditor) return;

  // Extract target filename from diff headers
  let targetName = null;
  const filenameM = diffCode.match(/^#\s*filename:\s*(.+)/m);
  if (filenameM) targetName = filenameM[1].trim();
  if (!targetName) {
    const m = diffCode.match(/^diff --git a\/(\S+)/m) || diffCode.match(/^--- a\/(\S+)/m);
    if (m && !m[1].startsWith('/dev/null')) targetName = m[1];
  }

  let targetFile = null;
  if (targetName) {
    const basename = targetName.split('/').pop();
    targetFile = codeFiles.find(f => f.name === targetName) || codeFiles.find(f => f.name === basename);
    if (!targetFile) return; // 에디터에 없으면 적용 안 함
  } else {
    targetFile = codeFiles.find(f => f.id === activeCodeFileId);
  }
  if (!targetFile) return;

  // Skip if streaming already applied a diff for this file
  if (codeDiffState[targetFile.id]) return;

  const originalContent = targetFile.model ? targetFile.model.getValue() : (targetFile.content || '');
  const newContent = applyUnifiedDiff(originalContent, diffCode);
  if (originalContent === newContent) return;

  switchCodeFile(targetFile.id);
  showCodeDiff(targetFile.id, originalContent, newContent);
}

function codeAiOpenInEditor(code, lang) {
  _DBG && console.log(`[codeAiOpenInEditor] lang=${lang} lines=${code?.split('\n').length} openable=${codeIsOpenable(code, lang)} monacoReady=${monacoReady}`);
  if (!codeIsOpenable(code, lang)) { _DBG && console.log('[codeAiOpenInEditor] NOT openable, returning'); return; }
  if (!monacoReady || !monacoEditor) {
    const fname = codeDeriveName(code, lang);
    _DBG && console.log(`[codeAiOpenInEditor] Monaco not ready, queueing fname=${fname}`);
    codePendingQueue.push({ fname, content: code, lang });
    initCodeView();
    return;
  }
  const fname = codeDeriveName(code, lang);
  const existing = codeFiles.find(f => f.name === fname);
  if (existing) {
    const oldContent = existing.model ? existing.model.getValue() : existing.content;
    if (oldContent !== code && code.length > 0) {
      // Content differs — show an inline diff for review (line/block level) rather
      // than replacing wholesale, consistent with the streaming edit path.
      switchCodeFile(existing.id);
      showCodeDiff(existing.id, oldContent, code);
    } else {
      // Same content — just switch to the tab
      switchCodeFile(existing.id);
    }
  } else {
    codeNewFile(fname, code);
  }
}

// ── Code Diff View (Inline decorations, VSCode Copilot style) ────────────

// Compute diff hunks between original and modified text using LCS algorithm.
// Returns an array of hunks: [{ oldStart, oldEnd, newStart, newEnd, type }]
function computeDiffHunks(originalText, modifiedText) {
  const oldLines = (originalText || '').split('\n');
  const newLines = (modifiedText || '').split('\n');
  const m = oldLines.length, n = newLines.length;

  // The LCS table below is O(m*n) memory. Only collapse to a single coarse,
  // whole-file hunk when it would genuinely blow up — ~5000×5000 lines is still
  // only ~50MB of Uint16, so normal large files keep granular line-level hunks.
  // Beyond that we fall back rather than allocating gigabytes / freezing the tab.
  if (m * n > 25_000_000) {
    if (originalText === modifiedText) return [];
    const type = m === 0 ? 'add' : n === 0 ? 'delete' : 'change';
    return [{ oldStart: 1, oldEnd: m, newStart: 1, newEnd: n, type }];
  }

  // Build LCS table (full m×n; rows are Uint16Array to keep it compact)
  const dp = Array.from({ length: m + 1 }, () => new Uint16Array(n + 1));
  for (let i = m - 1; i >= 0; i--) {
    for (let j = n - 1; j >= 0; j--) {
      dp[i][j] = oldLines[i] === newLines[j] ? 1 + dp[i + 1][j + 1] : Math.max(dp[i + 1][j], dp[i][j + 1]);
    }
  }

  // Walk back to find matching lines
  const matchedOld = new Set(), matchedNew = new Set();
  let oi = 0, ni = 0;
  while (oi < m && ni < n) {
    if (oldLines[oi] === newLines[ni]) { matchedOld.add(oi); matchedNew.add(ni); oi++; ni++; }
    else if (dp[oi + 1][ni] >= dp[oi][ni + 1]) oi++;
    else ni++;
  }

  // Group consecutive changes into hunks (merge hunks within 3 lines)
  const hunks = [];
  oi = 0; ni = 0;
  while (oi < m || ni < n) {
    // Skip matching lines
    while (oi < m && ni < n && matchedOld.has(oi) && matchedNew.has(ni) && oldLines[oi] === newLines[ni]) { oi++; ni++; }
    if (oi >= m && ni >= n) break;
    const hOldStart = oi, hNewStart = ni;
    let hOldEnd = oi, hNewEnd = ni;
    // Collect changed lines, extending through nearby matches (within 3 lines)
    while ((oi < m && !matchedOld.has(oi)) || (ni < n && !matchedNew.has(ni))) {
      if (oi < m && !matchedOld.has(oi)) { hOldEnd = oi + 1; oi++; }
      else if (ni < n && !matchedNew.has(ni)) { hNewEnd = ni + 1; ni++; }
      else break;
      // Extend through matching lines if next change is within 3 lines
      let extended = true;
      while (extended) {
        extended = false;
        let matchCount = 0;
        while (oi < m && ni < n && matchedOld.has(oi) && matchedNew.has(ni) && oldLines[oi] === newLines[ni]) {
          hOldEnd = oi + 1; hNewEnd = ni + 1; oi++; ni++; matchCount++;
          // Check if next change is within 3 lines
          let peekO = oi, peekN = ni, hasNearChange = false;
          for (let k = 0; k < 3 && peekO < m && peekN < n; k++) {
            if ((peekO < m && !matchedOld.has(peekO)) || (peekN < n && !matchedNew.has(peekN))) { hasNearChange = true; break; }
            peekO++; peekN++;
          }
          if (hasNearChange) extended = true;
          else if (matchCount >= 3) break;
        }
      }
    }
    if (hOldEnd > hOldStart || hNewEnd > hNewStart) {
      const type = hOldEnd === hOldStart ? 'add' : hNewEnd === hNewStart ? 'delete' : 'change';
      hunks.push({ oldStart: hOldStart + 1, oldEnd: hOldEnd, newStart: hNewStart + 1, newEnd: hNewEnd, type });
    }
  }
  return hunks;
}

// Show inline diff decorations in the regular editor (VSCode Copilot style)
function showCodeDiff(fileId, originalText, modifiedText, onReject) {
  if (!monacoReady || !window.monaco || !monacoEditor) return;
  const file = codeFiles.find(f => f.id === fileId);
  if (!file) return;

  // If a pending (un-reviewed) diff already exists for this file, keep the user's
  // original baseline so that a sequence of AI edits collapses into one review.
  // e.g. coder_patch_file called 3× → user sees one combined diff, accepts once, saves once.
  const existingDs = codeDiffState[fileId];
  if (existingDs) {
    originalText = existingDs.originalText;
  }

  // Clean up any existing diff for this file
  cleanupCodeDiff(fileId);

  // Compute diff hunks
  const hunks = computeDiffHunks(originalText, modifiedText);
  if (!hunks.length) return; // No changes

  // Store diff state. `hunks` is computed ONCE here and stays stable for the
  // lifetime of the review — accept/reject only flip per-hunk decisions:
  //   resolved = hunks the user has decided on (accepted OR rejected)
  //   rejected = subset of resolved that was rejected (restore original lines)
  // The editor content is rebuilt from these decisions (see _rebuildDiffContent),
  // so an accepted hunk never reappears when a later hunk is rejected.
  codeDiffState[fileId] = {
    originalText, modifiedText, hunks,
    decorationIds: [], viewZoneIds: [],
    resolved: new Set(), rejected: new Set(), onReject: onReject || null
  };

  // Set model to modified text (the "new" version)
  if (file.model) file.model.setValue(modifiedText);
  else file.content = modifiedText;

  // Switch to this file and apply decorations
  switchCodeFile(fileId);
  _applyInlineDiffDecorations(fileId);
  _showDiffBar(fileId);
  renderCodeFileTabs();
}

// Rebuild the editor content from the current accept/reject decisions.
// Walks the stable hunks in order: unchanged lines come straight from the
// original, rejected hunks restore the original lines, accepted/pending hunks
// use the modified lines. Returns the assembled text plus, for each still-pending
// hunk, where it lands in that text (so decorations can be placed accurately).
function _rebuildDiffContent(ds) {
  const oldLines = ds.originalText.split('\n');
  const newLines = ds.modifiedText.split('\n');
  const out = [];
  const pendingRanges = [];
  let cursor = 0; // 0-based cursor into oldLines
  const ordered = ds.hunks.map((h, i) => ({ h, i })).sort((a, b) => a.h.oldStart - b.h.oldStart);
  for (const { h, i } of ordered) {
    // Unchanged original lines before this hunk
    while (cursor < h.oldStart - 1 && cursor < oldLines.length) out.push(oldLines[cursor++]);
    if (ds.rejected.has(i)) {
      // Rejected → keep the original lines
      for (let l = h.oldStart - 1; l < h.oldEnd && l < oldLines.length; l++) out.push(oldLines[l]);
    } else {
      // Accepted or pending → use the modified lines
      const phantomAfter = out.length; // rebuilt line number just above the new block
      for (let l = h.newStart - 1; l < h.newEnd && l < newLines.length; l++) out.push(newLines[l]);
      if (!ds.resolved.has(i)) {
        pendingRanges.push({ hunkIndex: i, hunk: h, greenStart: phantomAfter + 1, greenEnd: out.length, phantomAfter });
      }
    }
    cursor = h.oldEnd;
  }
  while (cursor < oldLines.length) out.push(oldLines[cursor++]);
  return { content: out.join('\n'), pendingRanges };
}

// Apply inline diff decorations to the editor for a given file
function _applyInlineDiffDecorations(fileId) {
  const ds = codeDiffState[fileId];
  if (!ds || !monacoEditor) return;
  const file = codeFiles.find(f => f.id === fileId);
  if (!file || file.id !== activeCodeFileId) return;

  // Remove old decorations, view zones, and widgets
  _removeInlineDiffDecorations(fileId);

  // Rebuild content reflecting current decisions, then decorate the pending hunks
  // at their rebuilt positions.
  const { content, pendingRanges } = _rebuildDiffContent(ds);
  if (file.model) { if (file.model.getValue() !== content) file.model.setValue(content); }
  else file.content = content;

  const contentLines = content.split('\n');
  const oldLines = ds.originalText.split('\n');
  const decorations = [];

  for (const pr of pendingRanges) {
    // Green highlight for added/changed lines
    for (let line = pr.greenStart; line <= pr.greenEnd && line <= contentLines.length; line++) {
      decorations.push({
        range: new monaco.Range(line, 1, line, 1),
        options: {
          className: 'inline-diff-added',
          glyphMarginClassName: 'inline-diff-glyph-added',
          isWholeLine: true,
          minimap: { color: '#28a74580', position: monaco.editor.MinimapPosition.Inline },
          overviewRuler: { color: '#28a74560', position: monaco.editor.OverviewRulerLane.Full },
        }
      });
    }

    // View zone for deleted lines (red "phantom" lines), placed directly ABOVE
    // the green block (phantomAfter is the line number just before it).
    if (pr.hunk.type === 'delete' || pr.hunk.type === 'change') {
      const deletedLines = oldLines.slice(pr.hunk.oldStart - 1, pr.hunk.oldEnd);
      if (deletedLines.length && monacoEditor.changeViewZones) {
        monacoEditor.changeViewZones(ca => {
          const div = document.createElement('div');
          div.className = 'inline-diff-deleted-zone';
          div.innerHTML = deletedLines.map(line =>
            '<div class="inline-diff-deleted-line">' + escHtml(line) + '</div>'
          ).join('');
          ds.viewZoneIds.push(ca.addZone({
            afterLineNumber: pr.phantomAfter,
            afterColumn: 1,
            heightInLines: Math.max(deletedLines.length, 1),
            domNode: div,
          }));
        });
      }
    }
  }

  // Apply decorations
  ds.decorationIds = monacoEditor.deltaDecorations([], decorations);

  // Add hunk action button overlays (anchor to the green block, or the gap for pure deletes)
  for (const pr of pendingRanges) {
    const anchor = pr.greenStart <= pr.greenEnd ? pr.greenStart : pr.phantomAfter + 1;
    const line = Math.min(Math.max(1, anchor), contentLines.length);
    _addHunkActionsWidget(fileId, pr.hunkIndex, line);
  }

  // Update diff bar info
  _updateDiffBarInfo(fileId);

  // Scroll to first pending hunk
  if (pendingRanges.length) {
    const pr = pendingRanges[0];
    const anchor = pr.greenStart <= pr.greenEnd ? pr.greenStart : pr.phantomAfter + 1;
    monacoEditor.revealLineInCenter(Math.min(Math.max(1, anchor), contentLines.length));
  }
}

// Remove all inline diff decorations, view zones, and widgets for a file
function _removeInlineDiffDecorations(fileId) {
  const ds = codeDiffState[fileId];
  if (!ds) return;

  // Remove decorations
  if (ds.decorationIds.length && monacoEditor) {
    monacoEditor.deltaDecorations(ds.decorationIds, []);
    ds.decorationIds = [];
  }

  // Remove view zones
  if (ds.viewZoneIds.length && monacoEditor.changeViewZones) {
    monacoEditor.changeViewZones(ca => {
      for (const id of ds.viewZoneIds) ca.removeZone(id);
    });
    ds.viewZoneIds = [];
  }

  // Remove hunk action button overlays from DOM
  document.querySelectorAll('.inline-diff-hunk-actions[data-file-id="' + fileId + '"]').forEach(el => el.remove());

  // Dispose disposables
  for (const key of Object.keys(ds)) {
    if (key.startsWith('_hunkDisposables_')) {
      const disposables = ds[key];
      if (Array.isArray(disposables)) disposables.forEach(d => { try { d.dispose(); } catch {} });
    }
  }
}

// Add hunk action buttons as a positioned overlay
function _addHunkActionsWidget(fileId, hunkIndex, line) {
  const ds = codeDiffState[fileId];
  if (!ds || !monacoEditor) return;

  const actions = document.createElement('div');
  actions.className = 'inline-diff-hunk-actions';
  actions.dataset.fileId = fileId;
  actions.dataset.hunkIndex = hunkIndex;
  // Per-hunk buttons accept/reject ALL hunks for the file (one-click UX)
  actions.innerHTML = '<button class="inline-diff-accept-btn" onclick="_acceptAllDiff(\'' + fileId + '\')" title="모두 적용">✅</button>' +
    '<button class="inline-diff-reject-btn" onclick="_rejectAllDiff(\'' + fileId + '\')" title="모두 취소">❌</button>';

  const editorContainer = document.getElementById('code-editor-container');
  if (editorContainer) editorContainer.appendChild(actions);

  // Position the widget at the line
  const updatePosition = () => {
    if (!monacoEditor || !document.body.contains(actions)) return;
    try {
      const lineTop = monacoEditor.getTopForLineNumber(line);
      const layoutInfo = monacoEditor.getLayoutInfo();
      const contentLeft = layoutInfo.contentLeft;
      const scrollTop = monacoEditor.getScrollTop();
      actions.style.top = (lineTop - scrollTop) + 'px';
      actions.style.left = contentLeft + 'px';
      actions.style.transform = 'translateY(-100%)';
    } catch {}
  };
  updatePosition();

  const scrollDisp = monacoEditor.onDidScrollChange(updatePosition);
  const layoutDisp = monacoEditor.onDidLayoutChange(updatePosition);
  ds['_hunkDisposables_' + hunkIndex] = [scrollDisp, layoutDisp];
}

// Show the diff action bar at the top
function _showDiffBar(fileId) {
  const bar = document.getElementById('code-diff-bar');
  const label = document.getElementById('code-diff-label');
  if (!bar || !label) return;

  const pendingCount = Object.keys(codeDiffState).length;
  const countNote = pendingCount > 1 ? ` (${pendingCount}개 파일 남음)` : '';
  label.textContent = '🔀 AI 제안 변경 사항' + countNote;
  const acceptBtn = document.getElementById('code-diff-accept');
  const rejectBtn = document.getElementById('code-diff-reject');
  // Capture fileId in the closure so clicking works regardless of activeCodeFileId
  if (acceptBtn) {
    acceptBtn.textContent = pendingCount > 1 ? '✅ 적용 →' : '✅ 모두 적용';
    acceptBtn.onclick = () => {
      const ds = codeDiffState[fileId];
      if (!ds) return;
      ds.hunks.forEach((_, i) => { ds.resolved.add(i); ds.rejected.delete(i); });
      _applyInlineDiffDecorations(fileId);
      finalizeInlineDiff(fileId, true);
    };
  }
  if (rejectBtn) {
    rejectBtn.textContent = '❌ 모두 취소';
    rejectBtn.onclick = () => {
      const ds = codeDiffState[fileId];
      if (!ds) return;
      ds.hunks.forEach((_, i) => { ds.resolved.add(i); ds.rejected.add(i); });
      _applyInlineDiffDecorations(fileId);
      if (ds.onReject) ds.onReject();
      finalizeInlineDiff(fileId, true);
    };
  }
  bar.style.display = 'flex';

  // Editor stays visible (no DiffEditor overlay)
  const editorEl = document.getElementById('code-editor-container');
  if (editorEl) editorEl.style.display = '';
}

// Update the diff bar with hunk count info
function _updateDiffBarInfo(fileId) {
  const ds = codeDiffState[fileId];
  if (!ds) return;
  const unresolved = ds.hunks.filter((_, i) => !ds.resolved.has(i)).length;
  const infoEl = document.getElementById('code-diff-hunk-info');
  if (infoEl) infoEl.textContent = unresolved > 0 ? (unresolved + '개 변경') : '모두 해결됨';
}

// Accept a single hunk — keep its modified lines. Decisions are just flags;
// the editor content is rebuilt from them, so accepting one hunk never disturbs
// the others.
function acceptHunk(fileId, hunkIndex) {
  const ds = codeDiffState[fileId];
  if (!ds || ds.resolved.has(hunkIndex)) return;
  ds.resolved.add(hunkIndex);
  ds.rejected.delete(hunkIndex);

  _applyInlineDiffDecorations(fileId);

  if (ds.resolved.size === ds.hunks.length) finalizeInlineDiff(fileId, true);
}

// Reject a single hunk — restore its original lines. Other hunks (including ones
// already accepted) keep their decisions because the rebuild is decision-driven.
function rejectHunk(fileId, hunkIndex) {
  const ds = codeDiffState[fileId];
  if (!ds || ds.resolved.has(hunkIndex)) return;
  ds.resolved.add(hunkIndex);
  ds.rejected.add(hunkIndex);

  _applyInlineDiffDecorations(fileId);

  if (ds.resolved.size === ds.hunks.length) finalizeInlineDiff(fileId, true);
}

// Auto-accept diff with scroll preview: reveal each changed hunk in sequence, then save.
async function _scrollAndAcceptDiff(fileId) {
  const ds = codeDiffState[fileId];
  if (!ds || !monacoEditor) { _acceptAllDiff(fileId); return; }

  const hunks = ds.hunks;
  if (!hunks.length) { _acceptAllDiff(fileId); return; }

  // Show preview label in the diff bar
  const label = document.getElementById('code-diff-label');
  if (label) label.textContent = `⏩ 편집 미리보기 (${hunks.length}개 변경)...`;
  const acceptBtn = document.getElementById('code-diff-accept');
  if (acceptBtn) acceptBtn.style.display = 'none'; // hide during preview

  // Time budget: 500ms per hunk, capped at 5 s total
  const perHunk = Math.min(500, Math.max(150, 5000 / hunks.length));

  for (let i = 0; i < hunks.length; i++) {
    if (!codeDiffState[fileId]) return; // diff cancelled by user or replaced
    const h = hunks[i];
    if (label) label.textContent = `⏩ 편집 미리보기 (${i + 1}/${hunks.length})...`;
    const targetLine = h.newStart || h.oldStart || 1;
    try { monacoEditor.revealLineInCenter(targetLine, 0 /* Smooth */); } catch {}
    await new Promise(r => setTimeout(r, perHunk));
  }

  if (!codeDiffState[fileId]) return;

  // Brief pause at the last hunk before auto-saving
  await new Promise(r => setTimeout(r, 200));

  _acceptAllDiff(fileId);
}

// Accept all hunks for a specific file (called by both per-hunk widgets and the bar button)
function _acceptAllDiff(fileId) {
  const ds = codeDiffState[fileId];
  if (!ds) return;
  ds.hunks.forEach((_, i) => { ds.resolved.add(i); ds.rejected.delete(i); });
  _applyInlineDiffDecorations(fileId);
  finalizeInlineDiff(fileId, true);
}

// Reject all hunks for a specific file
function _rejectAllDiff(fileId) {
  const ds = codeDiffState[fileId];
  if (!ds) return;
  ds.hunks.forEach((_, i) => { ds.resolved.add(i); ds.rejected.add(i); });
  _applyInlineDiffDecorations(fileId);
  if (ds.onReject) ds.onReject();
  finalizeInlineDiff(fileId, true);
}

// Fallback wrappers using activeCodeFileId (kept for HTML onclick= attributes)
function acceptAllHunks() {
  const fileId = activeCodeFileId || Object.keys(codeDiffState)[0];
  if (fileId) _acceptAllDiff(fileId);
}
function rejectAllHunks() {
  const fileId = activeCodeFileId || Object.keys(codeDiffState)[0];
  if (fileId) _rejectAllDiff(fileId);
}

// Show inline re-login form inside the AI chat when session expires (401)
function _codeAiShowRelogin() {
  const id = 'relogin_' + Date.now();
  const el = codeAiAppend('system', '');
  el.innerHTML = `<div style="display:flex;flex-direction:column;gap:8px;padding:4px 0">
    <span style="color:#f87">⚠️ 세션 만료 — 재로그인</span>
    <input id="${id}_u" placeholder="아이디" style="background:#1e1e1e;border:1px solid #444;color:#eee;padding:6px 8px;border-radius:4px;font-size:13px" />
    <input id="${id}_p" type="password" placeholder="비밀번호" style="background:#1e1e1e;border:1px solid #444;color:#eee;padding:6px 8px;border-radius:4px;font-size:13px" />
    <button onclick="_codeAiDoRelogin('${id}')" style="background:#2d6a2d;color:#eee;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px">로그인</button>
  </div>`;
  setTimeout(() => document.getElementById(id + '_u')?.focus(), 50);
}
async function _codeAiDoRelogin(id) {
  const u = document.getElementById(id + '_u')?.value?.trim();
  const p = document.getElementById(id + '_p')?.value;
  if (!u || !p) return;
  try {
    const r = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: u, password: p }) });
    const d = await r.json();
    if (d.token) {
      setAuthToken(d.token);
      const el = document.getElementById(id + '_u')?.closest('.code-ai-msg');
      if (el) el.remove();
      codeAiAppend('system', '✅ 로그인 완료 — 다시 메시지를 보내세요');
    } else {
      codeAiAppend('system', '❌ 로그인 실패: ' + (d.error || '아이디/비밀번호 확인'));
    }
  } catch (e) { codeAiAppend('system', '❌ 로그인 오류: ' + e.message); }
}

// Persist a specific file to workspace/code/ on disk. Accepting a diff only
// updated the Monaco model in memory — without this the .py file kept the old
// code, so re-running showed no change ("diff가 안 됨").
async function codeSaveFileById(fileId, hunkCount) {
  const file = codeFiles.find(f => f.id === fileId);
  if (!file) return;
  const content = (file.model ? file.model.getValue() : file.content) || '';
  file.content = content;
  if (!localDirHandle) {
    codeAiAppend('system', `⚠️ 폴더 미선택 — ${file.name} 저장 생략. 🖥️ 버튼으로 로컬 폴더를 선택해주세요.`);
    return;
  }
  const ok = await localWriteFile(_clientProjectPath(file.name), content);
  const bareName = _clientBareFileName(file.name);
  const countNote = hunkCount > 0 ? ` (${hunkCount}곳)` : '';
  if (ok) { codeAiAppend('system', `💾 저장: ${bareName}${countNote}`); codeSbRefresh(); }
  else codeAiAppend('system', `⚠️ 저장 실패: ${bareName}`);
}

// Finalize inline diff — clean up all decorations and state.
// `save` persists the accepted result to disk (true for accepts, false for rejects).
function finalizeInlineDiff(fileId, save) {
  const ds = codeDiffState[fileId];
  if (!ds) return;

  const hunkCount = ds.hunks.length;
  _removeInlineDiffDecorations(fileId);
  delete codeDiffState[fileId];

  // Auto-save accepted changes so the on-disk file matches the editor
  if (save) codeSaveFileById(fileId, hunkCount);

  renderCodeFileTabs();

  // If more files have pending diffs, switch to next one automatically
  const nextId = Object.keys(codeDiffState)[0];
  if (nextId) {
    switchCodeFile(nextId); // switchCodeFile calls _showDiffBar if codeDiffState[nextId] exists
    return;
  }

  // No more pending diffs — show completion message if this was an auto-accept turn
  if (save && _autoAcceptTurn) {
    _autoAcceptTurn = false;
    setTimeout(() => codeAiAppend('system', '✅ 완료'), 300);
  }

  // Hide bar and restore focus
  const bar = document.getElementById('code-diff-bar');
  if (bar) bar.style.display = 'none';

  const file = codeFiles.find(f => f.id === fileId);
  if (file && monacoEditor && file.id === activeCodeFileId) {
    monacoEditor.setModel(file.model);
    monacoEditor.focus();
  }
}

function cleanupCodeDiff(fileId) {
  finalizeInlineDiff(fileId);
}

// ── New file approval bar + queue (supports multiple files at once) ──────
let _fileApprovalQueue = []; // [{fileId, fileName}]

function _enqueueFileApproval(fileId, fileName) {
  _fileApprovalQueue.push({ fileId, fileName });
  if (_fileApprovalQueue.length === 1) _showNextApproval();
}

function _showNextApproval() {
  if (!_fileApprovalQueue.length) return;
  const { fileId, fileName } = _fileApprovalQueue[0];
  _showNewFileApproval(fileId, fileName);
}

function _showNewFileApproval(fileId, fileName) {
  const file = codeFiles.find(f => f.id === fileId);
  if (!file) { _fileApprovalQueue.shift(); _showNextApproval(); return; }
  // In local mode: auto-save directly, no approval popup needed
  if (localDirHandle) {
    const content = file.model ? file.model.getValue() : (file.content || '');
    localWriteFile(_clientProjectPath(file.name), content).then(ok => {
      if (ok) { codeSbRefresh(); codeAiAppend('system', `💾 저장: ${file.name}`); }
      else codeAiAppend('system', `⚠️ 저장 실패: ${file.name}`);
    });
    _fileApprovalQueue.shift();
    if (_fileApprovalQueue.length) setTimeout(_showNextApproval, 200);
    return;
  }
  switchCodeFile(fileId);

  const bar = document.getElementById('code-diff-bar');
  const label = document.getElementById('code-diff-label');
  if (!bar || !label) return;

  const remaining = _fileApprovalQueue.length;
  const queueNote = remaining > 1 ? ` (${remaining}개 중 1번째)` : '';
  label.textContent = '📝 새 파일: ' + fileName + queueNote;
  const acceptBtn = document.getElementById('code-diff-accept');
  const rejectBtn = document.getElementById('code-diff-reject');
  if (acceptBtn) {
    acceptBtn.textContent = remaining > 1 ? '✅ 만들기 →' : '✅ 만들기';
    acceptBtn.onclick = () => {
      bar.style.display = 'none';
      codeSaveFileById(fileId);
      _fileApprovalQueue.shift();
      if (_fileApprovalQueue.length) setTimeout(_showNextApproval, 200);
    };
  }
  if (rejectBtn) {
    rejectBtn.textContent = '❌ 취소';
    rejectBtn.onclick = () => {
      const idx = codeFiles.findIndex(f => f.id === fileId);
      if (idx >= 0) {
        if (codeFiles[idx].model) codeFiles[idx].model.dispose();
        codeFiles.splice(idx, 1);
      }
      if (codeDiffState[fileId]) cleanupCodeDiff(fileId);
      bar.style.display = 'none';
      if (codeFiles.length > 0) switchCodeFile(codeFiles[0].id);
      renderCodeFileTabs();
      _fileApprovalQueue.shift();
      if (_fileApprovalQueue.length) setTimeout(_showNextApproval, 200);
    };
  }
  bar.style.display = 'flex';
}

// Extract blocks that have an explicit `# filename:` / `// filename:` comment
function _getExplicitFilename(code) {
  const m = (code || '').match(/(?:#|\/\/|--|\/\*|<!--)\s*(?:filename|file)\s*[:=]\s*(\S+)/i);
  return m ? m[1].replace(/[*\/>]+$/, '') : null;
}

function _extractExplicitFileBlocks(text) {
  const fenceRe = /```([\w\-]*)[ \t]*\r?\n/g;
  const result = [];
  let inBlock = false, blockLang = '', blockStart = 0, m;
  while ((m = fenceRe.exec(text)) !== null) {
    const lineStart = m.index === 0 ? 0 : text.lastIndexOf('\n', m.index - 1) + 1;
    if (text.slice(lineStart, m.index).trim() !== '') continue;
    if (!inBlock) { blockLang = m[1] || 'text'; blockStart = m.index + m[0].length; inBlock = true; }
    else {
      const code = text.slice(blockStart, m.index);
      const fname = _getExplicitFilename(code);
      // Include BOTH diff and non-diff blocks with filenames.
      // Previously we excluded diffs here, which caused new files to be lost
      // when the AI outputs a diff (modify existing) + new-file blocks (create new).
      if (fname) result.push({ fname, code, lang: blockLang, isDiff: _isDiffCode(blockLang, code) });
      inBlock = false;
    }
  }
  if (inBlock) {
    const code = text.slice(blockStart);
    const fname = _getExplicitFilename(code);
    if (fname) result.push({ fname, code, lang: blockLang, isDiff: _isDiffCode(blockLang, code) });
  }
  return result;
}
function codeAiScrollBottom() {
  const msgs = document.getElementById('code-ai-messages');
  if (msgs) msgs.scrollTop = msgs.scrollHeight;
}

// ── Project session management ────────────────────────────────────────────
function saveProjectSession(projectName) {
  if (!projectName) return;
  localStorage.setItem('code_proj_session_' + projectName, codeAiSessionId);
  try { localStorage.setItem('code_proj_history_' + projectName, JSON.stringify(codeAiHistory.slice(-40))); } catch {}
}

function _knownProjectsGet() {
  try { return JSON.parse(localStorage.getItem('code_known_projects') || '[]'); } catch { return []; }
}
function _knownProjectsAdd(name) {
  if (!name) return;
  const list = _knownProjectsGet();
  if (!list.includes(name)) { list.push(name); localStorage.setItem('code_known_projects', JSON.stringify(list)); }
}
function _knownProjectsRemove(name) {
  if (!name) return;
  const list = _knownProjectsGet().filter(p => p !== name);
  localStorage.setItem('code_known_projects', JSON.stringify(list));
}

async function deleteActiveProject() {
  if (!activeProjectName) return;
  if (!confirm(`"${activeProjectName}" 프로젝트를 삭제할까요?\n(폴더와 파일이 모두 삭제됩니다)`)) return;
  const name = activeProjectName;
  // localStorage 정리
  _knownProjectsRemove(name);
  localStorage.removeItem('code_proj_session_' + name);
  localStorage.removeItem('code_proj_history_' + name);
  // 로컬 폴더 삭제
  if (localDirHandle) {
    try { await localDirHandle.removeEntry(name, { recursive: true }); } catch (e) { console.warn('[deleteProject]', e); }
  }
  // 탭 닫기 및 프로젝트 초기화
  codeFiles.forEach(f => { try { f.model?.dispose(); } catch {} });
  codeFiles.length = 0; activeCodeFileId = null; codeDiffState = {};
  renderCodeFileTabs();
  activeProjectName = null;
  localStorage.setItem('code_active_project', '');
  codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = '';
  _codeAiLastUsage = null;
  codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
  updateLocalModeUI();
  updateSessionPanel();
  codeSbRefresh();
  _renderSessionsList();
}

function switchProject(name) {
  _autoSaveChatSession(); // null 프로젝트 상태의 히스토리도 세션 목록에 보존
  if (activeProjectName) saveProjectSession(activeProjectName);
  activeProjectName = name || null;
  localStorage.setItem('code_active_project', activeProjectName || '');
  if (activeProjectName) {
    _knownProjectsAdd(activeProjectName);
    const savedId = localStorage.getItem('code_proj_session_' + activeProjectName);
    const savedHist = localStorage.getItem('code_proj_history_' + activeProjectName);
    codeAiSessionId = savedId || ('code_ai_' + Math.random().toString(36).slice(2, 10));
    try { codeAiHistory = savedHist ? JSON.parse(savedHist) : []; } catch { codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = ''; }
    _readFileCache = {}; _historySummary = '';
    saveProjectSession(activeProjectName);
  } else {
    codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
    codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = '';
  }
  updateLocalModeUI();
  updateSessionPanel();
  codeSbRefresh();
  localShellIds.forEach(shellId => _companionCdProject(shellId));
  // 채팅 패널 갱신: 히스토리가 있으면 그대로, 없으면 세션 목록
  const _msgs = document.getElementById('code-ai-messages');
  if (_msgs) {
    _msgs.innerHTML = '';
    if (codeAiHistory.length) {
      codeAiHistory.forEach(m => codeAiAppend(m.role === 'user' ? 'user' : 'assistant', m.content));
    } else {
      _renderSessionsList();
    }
  }
  // In client-local mode: close previous project's tabs and load new project files
  if (localDirHandle) _clientLoadProjectFiles();
}

function csbRenderProjectSelector(projects) {
  const sel = document.getElementById('csb-project-sel');
  const row = document.getElementById('csb-project-row');
  if (!sel || !row) return;
  if (!projects.length) { row.style.display = 'none'; return; }
  row.style.display = 'flex';
  const options = '<option value="">(전체)</option>' +
    projects.map(p => `<option value="${escHtml(p)}"${activeProjectName === p ? ' selected' : ''}>${escHtml(p)}</option>`).join('');
  sel.innerHTML = options;
  sel.value = activeProjectName || '';
}

// ── Session list (Cline style) ─────────────────────────────────────────────
const _SESS_KEY = 'code_chat_sessions_v2';
const _SESS_MAX = 30;

function _loadSessions() {
  try { return JSON.parse(localStorage.getItem(_SESS_KEY) || '[]'); } catch { return []; }
}
function _saveSessions(list) {
  try { localStorage.setItem(_SESS_KEY, JSON.stringify(list)); } catch {}
}

function _autoSaveChatSession() {
  if (!codeAiHistory.length) return;
  const list = _loadSessions();
  const firstUser = codeAiHistory.find(m => m.role === 'user')?.content || '';
  const title = firstUser.replace(/^\[파일:[^\]]+\]\s*/, '').slice(0, 50) || '(제목 없음)';
  const existing = list.findIndex(s => s.sessionId === codeAiSessionId);
  const entry = {
    id: existing >= 0 ? list[existing].id : ('sess_' + Math.random().toString(36).slice(2, 9)),
    sessionId: codeAiSessionId,
    title,
    project: activeProjectName || '',
    ts: Date.now(),
    msgCount: codeAiHistory.length,
    history: codeAiHistory.slice(-60),
  };
  if (existing >= 0) list[existing] = entry;
  else list.unshift(entry);
  if (list.length > _SESS_MAX) list.length = _SESS_MAX;
  _saveSessions(list);
}

function _backToSessionList() {
  _autoSaveChatSession();
  codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = '';
  _codeAiLastUsage = null;
  codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
  if (activeProjectName) saveProjectSession(activeProjectName);
  const msgs = document.getElementById('code-ai-messages');
  if (msgs) msgs.innerHTML = '';
  _renderSessionsList();
}

function _renderSessionsList() {
  const msgs = document.getElementById('code-ai-messages');
  if (!msgs) return;
  const list = _loadSessions();
  const proj = activeProjectName || '';
  const filtered = proj ? list.filter(s => s.project === proj || !s.project) : list;

  if (!filtered.length) {
    msgs.innerHTML = '<div class="code-ai-msg thinking" style="text-align:center;padding:24px 8px;color:var(--muted)">저장된 세션이 없습니다.<br>아래에 질문을 입력하면 새 세션이 시작됩니다.</div>';
    return;
  }

  const relTime = ts => {
    const d = (Date.now() - ts) / 1000;
    if (d < 60) return '방금';
    if (d < 3600) return Math.floor(d/60) + '분 전';
    if (d < 86400) return Math.floor(d/3600) + '시간 전';
    return Math.floor(d/86400) + '일 전';
  };

  msgs.innerHTML = `
    <div style="padding:8px 10px 4px;display:flex;justify-content:space-between;align-items:center">
      <span style="font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase">최근 세션</span>
      <button onclick="_deleteAllSessions(event)" style="font-size:10px;padding:1px 6px;border:1px solid #374151;background:none;color:#6b7280;border-radius:3px;cursor:pointer" onmouseover="this.style.borderColor='#f87171';this.style.color='#f87171'" onmouseout="this.style.borderColor='#374151';this.style.color='#6b7280'">전체 삭제</button>
    </div>
    <div style="padding:0 6px 6px;display:flex;flex-direction:column;gap:3px">
    ${filtered.map(s => `
      <div style="display:flex;align-items:center;gap:0;border-radius:5px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);transition:border-color .15s"
           onmouseover="this.style.borderColor='#3d6b4f'" onmouseout="this.style.borderColor='var(--line)'">
        <div onclick="_resumeSession('${s.id}')" style="flex:1;min-width:0;padding:5px 8px;cursor:pointer;border-left:2px solid #22c55e">
          <div style="display:flex;align-items:center;gap:5px;margin-bottom:2px">
            ${s.project ? `<span style="font-size:9px;padding:1px 5px;background:#0d2b1a;color:#22c55e;border-radius:3px;letter-spacing:.03em;flex-shrink:0">${escHtml(s.project)}</span>` : ''}
            <span style="font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(s.title)}</span>
          </div>
          <span style="font-size:10px;color:var(--muted)">${s.msgCount}개 · ${relTime(s.ts)}</span>
        </div>
        <button onclick="_deleteSession('${s.id}', event)" title="세션 삭제" style="flex-shrink:0;width:24px;height:100%;background:none;border:none;border-left:1px solid var(--line);color:#4b5563;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0" onmouseover="this.style.color='#f87171';this.style.background='rgba(248,113,113,0.08)'" onmouseout="this.style.color='#4b5563';this.style.background='none'">✕</button>
      </div>`).join('')}
    </div>`;
}

function _resumeSession(id) {
  const list = _loadSessions();
  const sess = list.find(s => s.id === id);
  if (!sess) return;
  _autoSaveChatSession(); // save current before switching
  codeAiHistory = sess.history || [];
  codeAiSessionId = sess.sessionId;
  if (activeProjectName) saveProjectSession(activeProjectName);
  const msgs = document.getElementById('code-ai-messages');
  if (msgs) {
    msgs.innerHTML = '';
    codeAiHistory.forEach(m => codeAiAppend(m.role === 'user' ? 'user' : 'assistant', m.content));
  }
  updateSessionPanel();
}

function _deleteSession(id, event) {
  if (event) { event.stopPropagation(); event.preventDefault(); }
  let list = _loadSessions();
  const sess = list.find(s => s.id === id);
  // If deleting current session, clear it
  if (sess && sess.sessionId === codeAiSessionId) {
    codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = '';
    codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
    if (activeProjectName) saveProjectSession(activeProjectName);
    const msgs = document.getElementById('code-ai-messages');
    if (msgs) msgs.innerHTML = '';
  }
  list = list.filter(s => s.id !== id);
  _saveSessions(list);
  // Also clear server-side history for this session
  if (sess) {
    fetch('/api/clear-history', {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify({ sessionId: sess.sessionId }),
    }).catch(() => {});
  }
  _renderSessionsList();
  updateSessionPanel();
}

function _deleteAllSessions(event) {
  if (event) { event.stopPropagation(); event.preventDefault(); }
  const list = _loadSessions();
  // Clear server-side history for all sessions
  for (const s of list) {
    fetch('/api/clear-history', {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify({ sessionId: s.sessionId }),
    }).catch(() => {});
  }
  _saveSessions([]);
  // Also clear project-specific session storage
  Object.keys(localStorage).filter(k => k.startsWith('code_proj_session_') || k.startsWith('code_proj_history_')).forEach(k => localStorage.removeItem(k));
  codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = '';
  codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
  if (activeProjectName) saveProjectSession(activeProjectName);
  const msgs = document.getElementById('code-ai-messages');
  if (msgs) msgs.innerHTML = '';
  _renderSessionsList();
  updateSessionPanel();
}

async function codeAiClear() {
  _autoSaveChatSession(); // 현재 세션 자동 저장
  if (activeProjectName) saveProjectSession(activeProjectName); // per-project store도 지우기 전에 저장
  fetch('/api/clear-history', {
    method: 'POST',
    headers: authHeaders({ 'Content-Type': 'application/json' }),
    body: JSON.stringify({ sessionId: codeAiSessionId }),
  }).catch(() => {});
  codeAiHistory = []; _prevTurnDoneTools = []; _readFileCache = {}; _historySummary = '';

  // In client-local mode: ask for a project name and create the folder
  if (localDirHandle) {
    const raw = prompt('새 프로젝트 이름:', '');
    const projName = (raw || '').trim().replace(/[^a-zA-Z0-9가-힣_-]/g, '_').replace(/^_+|_+$/g, '');
    if (projName) {
      await localDirHandle.getDirectoryHandle(projName, { create: true }).catch(() => {});
      switchProject(projName);
      codeAiAppend('system', `📁 프로젝트 "${projName}" 생성됨 (빈 폴더). 파일은 Write 툴로 만드세요. Bash는 companion 연결 시에만 사용 가능합니다. 어떤 걸 만들지 설명해주세요.`);
      return;
    }
  }

  codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
  if (activeProjectName) saveProjectSession(activeProjectName);
  updateSessionPanel();
  _renderSessionsList(); // 세션 목록으로 돌아가기
}


// ── Code sidebar panel ────────────────────────────────────────────────────
let codeSbCurrentTab = 'files';

function setCodeSbTab(tab) {
  codeSbCurrentTab = tab;
  ['files','settings','libraries'].forEach(t => {
    const btn = document.getElementById('csb-tab-' + t);
    if (btn) btn.classList.toggle('active', t === tab);
    const el = document.getElementById('csb-' + t);
    if (el) el.style.display = t === tab ? 'flex' : 'none';
  });
  if (tab === 'files') csbLoadModels();
  if (tab === 'libraries') {
    if (_csbArdSection === 'lib')   csbLibLoad();
    if (_csbArdSection === 'board') csbBoardLoad();
  }
}

// ── 라이브러리/보드 매니저 (code editor sidebar) ──────────────────────────────
let _csbLibCurrentTab = 'installed';
let _csbLibFilterMode = 'all'; // 'all' | 'compat' | 'incompat'
let _csbLibViewMode = 'flat';  // 'flat' | 'category'
let _csbLibArchFilter = '';    // '' = 전체, 'esp32' | 'esp8266' | 'avr' ...
let _csbLibCache = [];
let _csbArdSection = 'lib';

const _CAT_KO = {
  'Communication':      '통신',
  'Data Processing':    '데이터 처리',
  'Data Storage':       '데이터 저장',
  'Device Control':     '장치 제어',
  'Display':            '디스플레이',
  'Encryption':         '암호화',
  'Imaging':            '이미징',
  'Other':              '기타',
  'Sensors':            '센서',
  'Signal Input/Output':'신호 입출력',
  'Timing':             '타이밍',
  'Uncategorized':      '미분류',
};

function csbArdSection(sec) {
  _csbArdSection = sec;
  ['lib','board'].forEach(s => {
    const btn = document.getElementById('csb-ardsec-' + s);
    if (btn) btn.classList.toggle('active', s === sec);
    const el = document.getElementById('csb-ard-' + s);
    if (el) el.style.display = s === sec ? 'flex' : 'none';
  });
  if (sec === 'lib')   csbLibLoad();
  if (sec === 'board') csbBoardLoad();
}

function csbLibTab(tab) {
  _csbLibCurrentTab = tab;
  ['installed','search'].forEach(t => {
    const btn = document.getElementById('csb-libtab-' + t);
    if (btn) btn.classList.toggle('active', t === tab);
  });
  const sr = document.getElementById('csb-lib-search-row');
  if (sr) sr.style.display = tab === 'search' ? 'flex' : 'none';
  const fr = document.getElementById('csb-lib-filter-row');
  if (fr) fr.style.display = tab === 'installed' ? 'flex' : 'none';
  document.getElementById('csb-lib-status').textContent = '';
  if (tab === 'installed') csbLibLoad();
  else _csbLibListEl().innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">키워드를 입력하세요.</div>';
}

function csbLibFilter(mode) {
  _csbLibFilterMode = mode;
  ['all','compat','incompat'].forEach(m => {
    const btn = document.getElementById('csb-libf-' + m);
    if (!btn) return;
    const active = m === mode;
    btn.style.background = active ? 'var(--brand)' : 'var(--panel-2)';
    btn.style.color = active ? '#fff' : 'var(--muted)';
    btn.style.borderColor = active ? 'var(--brand)' : 'var(--line)';
  });
  _csbLibRenderInstalled(_csbLibCache);
}

function csbLibView(mode) {
  _csbLibViewMode = mode;
  ['flat','category'].forEach(m => {
    const btn = document.getElementById('csb-libv-' + m);
    if (!btn) return;
    const active = m === mode;
    btn.style.background = active ? 'var(--brand)' : 'var(--panel-2)';
    btn.style.color = active ? '#fff' : 'var(--muted)';
    btn.style.borderColor = active ? 'var(--brand)' : 'var(--line)';
  });
  _csbLibRenderInstalled(_csbLibCache);
}

function _csbLibSetArch(arch) {
  _csbLibArchFilter = arch;
  _csbLibUpdateArchChips(_csbLibCache);
  _csbLibRenderInstalled(_csbLibCache);
}

function _csbLibUpdateArchChips(libs) {
  const archRow = document.getElementById('csb-lib-arch-row');
  if (!archRow) return;
  // Count non-wildcard archs
  const archCount = {};
  for (const l of libs) {
    for (const a of (l.architectures || [])) {
      if (a !== '*') archCount[a] = (archCount[a] || 0) + 1;
    }
  }
  // Show archs with ≥2 libs, sorted by count desc
  const major = Object.entries(archCount).filter(([,c]) => c >= 2).sort((a,b) => b[1]-a[1]).map(([a]) => a);
  if (!major.length) { archRow.style.display = 'none'; return; }
  const all = ['', ...major];
  archRow.innerHTML = all.map(a => {
    const label = a ? a.toUpperCase() : '전체';
    const cnt = a ? (archCount[a] || 0) : libs.length;
    const active = _csbLibArchFilter === a;
    return `<button onclick="_csbLibSetArch('${a}')" style="font-size:9px;padding:1px 6px;border-radius:3px;border:1px solid ${active?'var(--brand)':'var(--line)'};background:${active?'var(--brand)':'var(--panel-2)'};color:${active?'#fff':'var(--muted)'};cursor:pointer;font-family:inherit" title="${cnt}개">${label}</button>`;
  }).join('');
  archRow.style.display = 'flex';
}

function _csbLibListEl() { return document.getElementById('csb-lib-list'); }
function _csbLibStatus(msg) { const el = document.getElementById('csb-lib-status'); if (el) el.textContent = msg; }
function _csbEsc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }

async function csbLibLoad() {
  _csbLibListEl().innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">불러오는 중...</div>';
  try {
    const fqbn = _csbSelBoard?.fqbn ? '&fqbn=' + encodeURIComponent(_csbSelBoard.fqbn) : '';
    const r = await fetch('/api/arduino/libs?all=1' + fqbn, { headers: authHeaders() });
    const data = await r.json();
    _csbLibCache = data.libs || [];
    _csbLibArchFilter = '';
    _csbLibUpdateArchChips(_csbLibCache);
    _csbLibRenderInstalled(_csbLibCache);
  } catch { _csbLibListEl().innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">오류</div>'; }
}

function _csbArchBadge(architectures) {
  const arch = _csbSelBoard.fqbn.split(':')[1] || '';
  const archs = architectures || [];
  const isAll = archs.includes('*') || archs.length === 0;
  const compat = isAll || archs.some(a => a === arch || a.startsWith(arch) || arch.startsWith(a));
  if (isAll) return `<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:#1a2a1a;color:#6ee7b7;border:1px solid #2d4a2d">모든 보드</span>`;
  const label = archs.slice(0,3).join(', ') + (archs.length>3?'…':'');
  const color = compat ? '#6ee7b7' : '#f87171';
  const bg    = compat ? '#1a2a1a' : '#2a1a1a';
  const bd    = compat ? '#2d4a2d' : '#4a2d2d';
  const icon  = compat ? '✓' : '✗';
  return `<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:${bg};color:${color};border:1px solid ${bd}" title="호환 아키텍처: ${archs.join(', ')}">${icon} ${_csbEsc(label)}</span>`;
}

function _csbIsCompat(l) {
  const arch = _csbSelBoard.fqbn.split(':')[1] || '';
  const archs = l.architectures || [];
  return archs.includes('*') || archs.length === 0 || archs.some(a => a === arch || a.startsWith(arch) || arch.startsWith(a));
}

function _csbLibRenderInstalled(libs) {
  const el = _csbLibListEl();
  if (!libs.length) { el.innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">설치된 라이브러리 없음</div>'; return; }

  // Apply board compat filter
  let filtered = libs;
  if (_csbLibFilterMode === 'compat')   filtered = libs.filter(l =>  _csbIsCompat(l));
  if (_csbLibFilterMode === 'incompat') filtered = libs.filter(l => !_csbIsCompat(l));

  // Apply architecture filter
  if (_csbLibArchFilter) {
    filtered = filtered.filter(l => {
      const archs = l.architectures || [];
      return archs.includes('*') || archs.length === 0 || archs.includes(_csbLibArchFilter) ||
             archs.some(a => a.startsWith(_csbLibArchFilter) || _csbLibArchFilter.startsWith(a));
    });
  }

  // Dedup by name when a specific arch or compat filter is active
  // Priority: user-installed > platform, specific arch > wildcard *, newer version
  if (_csbLibArchFilter || _csbLibFilterMode === 'compat') {
    const byName = new Map();
    for (const l of filtered) {
      if (!byName.has(l.name)) { byName.set(l.name, []); }
      byName.get(l.name).push(l);
    }
    filtered = [...byName.values()].map(group => group.reduce((best, l) => {
      if (l.location === 'user' && best.location !== 'user') return l;
      if (best.location === 'user' && l.location !== 'user') return best;
      const lWild = !(l.architectures||[]).length || (l.architectures||[]).includes('*');
      const bWild = !(best.architectures||[]).length || (best.architectures||[]).includes('*');
      if (!lWild && bWild) return l;
      if (lWild && !bWild) return best;
      return (l.version||'') >= (best.version||'') ? l : best;
    }));
  }

  // Sort: platform/core first, then compatible, then name
  filtered = [...filtered].sort((a, b) => {
    const pa = a.location === 'platform', pb = b.location === 'platform';
    if (pa && !pb) return -1;
    if (!pa && pb) return 1;
    const ca = _csbIsCompat(a), cb = _csbIsCompat(b);
    if (ca && !cb) return -1;
    if (!ca && cb) return 1;
    return a.name.localeCompare(b.name);
  });

  if (!filtered.length) {
    const msg = _csbLibFilterMode === 'compat' ? `${_csbSelBoard.name}과 호환되는 라이브러리 없음`
              : _csbLibArchFilter ? `${_csbLibArchFilter.toUpperCase()} 라이브러리 없음`
              : '비호환 라이브러리 없음';
    el.innerHTML = `<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">${msg}</div>`;
    return;
  }

  if (_csbLibViewMode === 'category') { _csbLibRenderGrouped(filtered); return; }

  const fqbn = _csbSelBoard?.fqbn || '';
  el.innerHTML = _csbBuiltinCard() + filtered.map(l => _csbLibCard(l, fqbn)).join('');
}

function _csbLibCard(l, fqbn) {
  const sid = 'csbex_' + l.name.replace(/\W/g,'_');
  const archs = l.architectures || [];
  const compat = _csbIsCompat(l);
  const isPlatform = l.location === 'platform';
  const incompatWarn = !compat ? `<div style="font-size:10px;color:#f87171;margin-top:3px">⚠ 현재 보드(${_csbEsc(_csbSelBoard.name)})와 호환되지 않을 수 있음</div>` : '';
  const platformBadge = isPlatform ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:#1a2a3a;color:#60a5fa;border:1px solid #2d4a6a">코어</span>` : '';
  const exRows = (l.examples||[]).map(ex =>
    `<div style="display:flex;align-items:center;padding:3px 0;gap:6px">
      <span style="font-size:10px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">📄 ${_csbEsc(ex)}</span>
      <button onclick="csbLibOpenExample('${_csbEsc(l.name)}','${_csbEsc(ex)}',${compat},'${_csbEsc(fqbn)}')"
        style="font-size:10px;padding:2px 7px;background:none;border:1px solid var(--line);color:${compat?'var(--brand)':'#f87171'};border-radius:4px;cursor:pointer;font-family:inherit;white-space:nowrap"
        title="${compat?'':'⚠ 비호환 예제 — 열면 AI가 자동으로 변환해드립니다'}">${compat?'열기':'열기 ⚠'}</button>
    </div>`).join('');
  const hasEx = l.examples?.length > 0;
  return `<div style="padding:8px 10px;border-bottom:1px solid var(--line)${!compat?';border-left:2px solid #7f1d1d':''}">
    <div style="display:flex;align-items:flex-start;gap:6px">
      <div style="flex:1;min-width:0">
        <div style="display:flex;align-items:center;gap:5px;flex-wrap:wrap">
          <span style="font-size:11px;font-weight:700;color:var(--text)">${_csbEsc(l.name)}</span>
          ${platformBadge}${_csbArchBadge(archs)}
        </div>
        <div style="font-size:10px;color:var(--muted);margin-top:1px">${_csbEsc(l.author||'')} · v${_csbEsc(l.version||'?')}${l.category?' · '+_csbEsc(l.category):''}</div>
        ${l.sentence?`<div style="font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${_csbEsc(l.sentence)}</div>`:''}
        ${incompatWarn}
      </div>
      <div style="display:flex;gap:4px;flex-shrink:0">
        ${hasEx?`<button onclick="document.getElementById('${sid}').style.display=document.getElementById('${sid}').style.display==='none'?'block':'none'"
          style="font-size:10px;padding:2px 7px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:4px;cursor:pointer;font-family:inherit">예제</button>`:''}
        ${isPlatform?'':`<button onclick="csbLibUninstall('${_csbEsc(l.name)}')"
          style="font-size:10px;padding:2px 7px;background:none;border:1px solid var(--line);color:#f87171;border-radius:4px;cursor:pointer;font-family:inherit">삭제</button>`}
      </div>
    </div>
    ${hasEx?`<div id="${sid}" style="display:none;margin-top:5px;padding:5px 8px;background:var(--panel-2);border-radius:5px">${exRows}</div>`:''}
  </div>`;
}

function _csbLibRenderGrouped(libs) {
  const el = _csbLibListEl();
  const fqbn = _csbSelBoard?.fqbn || '';
  // Group by category
  const groups = {};
  for (const l of libs) {
    const cat = l.category || 'Uncategorized';
    if (!groups[cat]) groups[cat] = [];
    groups[cat].push(l);
  }
  // Sort categories: put Uncategorized/Other last
  const last = new Set(['Uncategorized', 'Other', '']);
  const sorted = Object.keys(groups).sort((a,b) => {
    if (last.has(a) && !last.has(b)) return 1;
    if (!last.has(a) && last.has(b)) return -1;
    return a.localeCompare(b);
  });
  el.innerHTML = _csbBuiltinCard() + sorted.map(cat => {
    const ko = _CAT_KO[cat] || cat;
    const gid = 'csbg_' + cat.replace(/\W/g,'_');
    const cards = groups[cat].map(l => _csbLibCard(l, fqbn)).join('');
    const cnt = groups[cat].length;
    return `<div>
      <div onclick="const b=document.getElementById('${gid}');b.style.display=b.style.display==='none'?'block':'none'"
        style="display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;background:var(--panel-2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1">
        <span style="font-size:11px;font-weight:700;color:var(--text)">${_csbEsc(ko)}</span>
        ${cat !== ko ? `<span style="font-size:9px;color:var(--muted)">${_csbEsc(cat)}</span>` : ''}
        <span style="font-size:10px;color:var(--muted);margin-left:auto">${cnt}개</span>
      </div>
      <div id="${gid}">${cards}</div>
    </div>`;
  }).join('');
}

const _BUILTIN_EX = [
  { name:'Blink.ino', desc:'LED 깜빡이기', code:
`void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_BUILTIN, HIGH);
  delay(1000);
  digitalWrite(LED_BUILTIN, LOW);
  delay(1000);
}` },
  { name:'Button.ino', desc:'버튼으로 LED 제어', code:
`const int BTN = 0;
const int LED = LED_BUILTIN;

void setup() {
  pinMode(BTN, INPUT_PULLUP);
  pinMode(LED, OUTPUT);
}

void loop() {
  digitalWrite(LED, digitalRead(BTN) == LOW ? HIGH : LOW);
}` },
  { name:'AnalogRead.ino', desc:'아날로그 읽기', code:
`void setup() {
  Serial.begin(115200);
}

void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(200);
}` },
  { name:'Fade.ino', desc:'LED 밝기 조절 (PWM)', code:
`const int LED = LED_BUILTIN;
int brightness = 0, step = 5;

void setup() {
  pinMode(LED, OUTPUT);
}

void loop() {
  analogWrite(LED, brightness);
  brightness += step;
  if (brightness <= 0 || brightness >= 255) step = -step;
  delay(15);
}` },
  { name:'BlinkWithoutDelay.ino', desc:'딜레이 없는 깜빡이기', code:
`const int LED = LED_BUILTIN;
bool state = false;
unsigned long prev = 0;

void setup() {
  pinMode(LED, OUTPUT);
}

void loop() {
  unsigned long now = millis();
  if (now - prev >= 1000) {
    prev = now;
    state = !state;
    digitalWrite(LED, state);
  }
}` },
  { name:'SerialHello.ino', desc:'시리얼 출력', code:
`void setup() {
  Serial.begin(115200);
  Serial.println("Hello, World!");
}

void loop() {
  if (Serial.available()) {
    String s = Serial.readStringUntil('\\n');
    Serial.print("받음: ");
    Serial.println(s);
  }
}` },
];

function csbLibOpenBuiltin(idx) {
  const ex = _BUILTIN_EX[idx];
  if (!ex) return;
  codeNewFile(ex.name, ex.code);
  setCodeSbTab('files');
}

function _csbBuiltinCard() {
  const rows = _BUILTIN_EX.map((ex, i) =>
    `<div style="display:flex;align-items:center;padding:3px 0;gap:6px">
      <span style="font-size:10px;color:var(--muted);flex:1">📄 ${_csbEsc(ex.desc)}</span>
      <button onclick="csbLibOpenBuiltin(${i})"
        style="font-size:10px;padding:2px 7px;background:none;border:1px solid var(--line);color:var(--brand);border-radius:4px;cursor:pointer;font-family:inherit;white-space:nowrap">열기</button>
    </div>`).join('');
  return `<div style="padding:8px 10px;border-bottom:2px solid var(--line);border-left:3px solid #facc15">
    <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
      <span style="font-size:11px;font-weight:700;color:var(--text)">Arduino 기본 예제</span>
      <span style="font-size:9px;padding:1px 5px;border-radius:3px;background:#2a2010;color:#facc15;border:1px solid #4a3a10">기본</span>
    </div>
    <div style="margin-top:4px;padding:5px 8px;background:var(--panel-2);border-radius:5px">${rows}</div>
  </div>`;
}

async function csbLibOpenExample(libName, exName, isCompat = true, fqbn = '') {
  _csbLibStatus(`예제 로딩: ${exName}...`);
  try {
    const fqbnParam = (fqbn || _csbSelBoard?.fqbn || '');
    const r = await fetch(`/api/arduino/libs/example?lib=${encodeURIComponent(libName)}&example=${encodeURIComponent(exName)}&fqbn=${encodeURIComponent(fqbnParam)}`, { headers: authHeaders() });
    const data = await r.json();
    if (data.error) { _csbLibStatus('오류: ' + data.error); return; }
    _csbLibStatus('');
    codeNewFile(data.name, data.code);
    setCodeSbTab('files');
    if (!isCompat) {
      // Auto-send to AI for board adaptation
      const hints = _boardSpecificHints(data.code);
      const inp = document.getElementById('code-ai-input');
      if (inp) {
        inp.value = `이 예제는 ${libName} 라이브러리용이지만 현재 보드(${_csbSelBoard.name}, FQBN: ${_csbSelBoard.fqbn})와 호환되지 않을 수 있어.\n${hints}\n\nRead로 ${data.name}을 읽은 뒤 이 보드에서 동작하도록 코드를 수정해줘. 호환되지 않는 API는 이 보드에 맞는 방식으로 교체해.`;
        codeAiSend();
      }
    }
  } catch(e) { _csbLibStatus('오류: ' + e.message); }
}

async function csbLibSearch() {
  const q = (document.getElementById('csb-lib-q')?.value || '').trim();
  if (!q) return;
  _csbLibListEl().innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">검색 중...</div>';
  _csbLibStatus('');
  try {
    const r = await fetch('/api/arduino/libs/search?q=' + encodeURIComponent(q), { headers: authHeaders() });
    const data = await r.json();
    _csbLibRenderSearch(data.libs || []);
  } catch { _csbLibListEl().innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">오류</div>'; }
}

function _csbLibRenderSearch(libs) {
  const el = _csbLibListEl();
  if (!libs.length) { el.innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">검색 결과 없음</div>'; return; }
  el.innerHTML = libs.map(l => `
    <div style="padding:8px 10px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:6px">
      <div style="flex:1;min-width:0">
        <div style="display:flex;align-items:center;gap:5px;flex-wrap:wrap">
          <span style="font-size:11px;font-weight:700;color:var(--text)">${_csbEsc(l.name)}</span>
          ${l.category?`<span style="font-size:9px;padding:1px 5px;border:1px solid var(--line);border-radius:3px;color:var(--muted)">${_csbEsc(l.category)}</span>`:''}
          ${_csbArchBadge(l.architectures||[])}
        </div>
        <div style="font-size:10px;color:var(--muted);margin-top:1px">${_csbEsc(l.author||'')} · v${_csbEsc(l.version||'?')}</div>
        ${l.sentence?`<div style="font-size:10px;color:var(--muted);margin-top:2px">${_csbEsc(l.sentence)}</div>`:''}
      </div>
      <div style="flex-shrink:0;padding-top:2px">
        ${l.installed
          ? `<span style="font-size:10px;color:var(--brand);border:1px solid;border-radius:4px;padding:2px 6px">✅ 설치됨</span>`
          : `<button onclick="csbLibInstall('${_csbEsc(l.name)}',this)"
              style="font-size:10px;padding:3px 8px;background:var(--brand);color:#fff;border:none;border-radius:4px;cursor:pointer;font-family:inherit">설치</button>`}
      </div>
    </div>`).join('');
}

async function csbLibInstall(name, btn) {
  _csbLibStatus(`설치 중: ${name}...`);
  if (btn) { btn.disabled = true; btn.textContent = '...'; }
  try {
    const r = await fetch('/api/arduino/libs/install', {
      method: 'POST', headers: { ...authHeaders(), 'Content-Type': 'application/json' },
      body: JSON.stringify({ name }),
    });
    const data = await r.json();
    if (data.error) { _csbLibStatus('오류: ' + data.error.slice(0,100)); if(btn){btn.disabled=false;btn.textContent='설치';} return; }
    _csbLibStatus(`✅ ${name} 설치 완료`);
    if (btn) btn.outerHTML = `<span style="font-size:10px;color:var(--brand);border:1px solid;border-radius:4px;padding:2px 6px">✅ 설치됨</span>`;
  } catch(e) { _csbLibStatus('오류: ' + e.message); if(btn){btn.disabled=false;btn.textContent='설치';} }
}

async function csbLibUninstall(name) {
  if (!confirm(`"${name}" 을 삭제할까요?`)) return;
  _csbLibStatus(`삭제 중: ${name}...`);
  try {
    const r = await fetch('/api/arduino/libs/uninstall', {
      method: 'DELETE', headers: { ...authHeaders(), 'Content-Type': 'application/json' },
      body: JSON.stringify({ name }),
    });
    const data = await r.json();
    if (data.error) { _csbLibStatus('오류: ' + data.error.slice(0,100)); return; }
    _csbLibStatus(`✅ ${name} 삭제 완료`);
    csbLibLoad();
  } catch(e) { _csbLibStatus('오류: ' + e.message); }
}

// ── 보드 매니저 ───────────────────────────────────────────────────────────────
// ── 보드 선택기 ───────────────────────────────────────────────────────────────
const CSB_BOARD_DEFAULT = { fqbn: 'arduino:avr:uno', name: 'Arduino UNO' };
let _csbSelBoard = (() => {
  try { return JSON.parse(localStorage.getItem('csb_selected_board') || 'null') || CSB_BOARD_DEFAULT; }
  catch { return CSB_BOARD_DEFAULT; }
})();
let _csbSelAllBoards = [];
let _csbBoardLibs = [];      // 현재 보드의 설치된 라이브러리 캐시
let _csbBoardLibsFqbn = '';  // 캐시된 fqbn

async function _csbFetchLibs(fqbn) {
  if (!fqbn || fqbn.startsWith('lang:')) { _csbBoardLibs = []; _csbBoardLibsFqbn = fqbn; return; }
  if (fqbn === _csbBoardLibsFqbn) return;
  try {
    const data = await api('/api/arduino/libs?fqbn=' + encodeURIComponent(fqbn));
    _csbBoardLibs = (data.libs || []).map(l => l.name).filter(Boolean);
    _csbBoardLibsFqbn = fqbn;
  } catch { _csbBoardLibs = []; }
}

// 초기 로드 시 현재 보드 라이브러리 가져오기
_csbFetchLibs(_csbSelBoard.fqbn);

function _csbBoardSelSave(board) {
  _csbSelBoard = board;
  try { localStorage.setItem('csb_selected_board', JSON.stringify(board)); } catch {}
  _csbFetchLibs(board.fqbn);
  const el = document.getElementById('csb-board-sel-name');
  if (el) el.textContent = board.name;
  const badge = document.getElementById('csb-board-qemu-badge');
  if (badge) {
    if (board.qemu === 'esp8266-native') {
      badge.textContent = '🖥 Native'; badge.style.display = 'inline';
      badge.style.background = '#0c3a4a'; badge.style.color = '#67e8f9'; badge.style.borderColor = '#0e7490';
    } else if (board.qemu === 'renode') {
      badge.textContent = '🖥 Renode'; badge.style.display = 'inline';
      badge.style.background = '#1a0a3a'; badge.style.color = '#c084fc'; badge.style.borderColor = '#7c3aed';
    } else if (board.qemu) {
      badge.textContent = '🖥 QEMU'; badge.style.display = 'inline';
      badge.style.background = board.qemu === 'esp32s3' ? '#1a3a5a' : '#1a3a1a';
      badge.style.color = board.qemu === 'esp32s3' ? '#60a5fa' : '#22c55e';
      badge.style.borderColor = board.qemu === 'esp32s3' ? '#2a5a8a' : '#2a5a2a';
    } else {
      badge.style.display = 'none';
    }
  }
}

function csbBoardSelOpen() {
  const dd = document.getElementById('csb-board-sel-dropdown');
  if (!dd) return;
  const open = dd.style.display !== 'none';
  dd.style.display = open ? 'none' : 'flex';
  if (!open) {
    const q = document.getElementById('csb-board-sel-q');
    if (q) { q.value = ''; q.focus(); }
    csbBoardSelSearch();
  }
}

function csbBoardSelClose() {
  const dd = document.getElementById('csb-board-sel-dropdown');
  if (dd) dd.style.display = 'none';
}

const _LANG_BOARDS = [
  { fqbn: 'lang:python', name: '🐍 Python', desc: 'Python 스크립트' },
  { fqbn: 'lang:cpp',    name: '⚡ C++ (일반)', desc: '표준 C++, Arduino 아님' },
  { fqbn: 'lang:other',  name: '📝 기타 언어', desc: 'AI가 언어를 판단' },
];

async function csbBoardSelSearch() {
  const q = (document.getElementById('csb-board-sel-q')?.value || '').trim();
  const list = document.getElementById('csb-board-sel-list');
  if (!list) return;
  list.innerHTML = '<div style="padding:10px;color:var(--muted);font-size:11px;text-align:center">불러오는 중...</div>';
  try {
    // 언어 옵션 고정 섹션
    const langFiltered = q ? _LANG_BOARDS.filter(b => b.name.includes(q) || b.desc.includes(q)) : _LANG_BOARDS;
    const langHtml = langFiltered.length ? [
      `<div style="padding:4px 10px 2px;font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase">언어</div>`,
      ...langFiltered.map(b => {
        const sel = b.fqbn === _csbSelBoard.fqbn;
        return `<div data-fqbn="${_csbEsc(b.fqbn)}" data-name="${_csbEsc(b.name)}" data-qemu="" data-chip=""
          style="padding:6px 10px;cursor:pointer;font-size:11px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:1px;${sel?'background:var(--brand);color:#fff':''}">
          <span style="font-weight:600;${sel?'color:#fff':'color:var(--text)'}">${_csbEsc(b.name)}</span>
          <span style="font-size:10px;${sel?'color:rgba(255,255,255,.7)':'color:var(--muted)'}">${b.desc}</span>
        </div>`;
      }),
      `<div style="padding:4px 10px 2px;font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-top:1px solid var(--line)">보드</div>`,
    ].join('') : '';

    const data = await api('/api/arduino/boards/listall?q=' + encodeURIComponent(q));
    const boards = data.boards || [];
    if (!boards.length && !langFiltered.length) { list.innerHTML = '<div style="padding:10px;color:var(--muted);font-size:11px;text-align:center">검색 결과 없음</div>'; return; }
    list.innerHTML = langHtml + boards.map(b => {
      const sel = b.fqbn === _csbSelBoard.fqbn;
      const qemuBadge = b.qemu === 'esp8266-native'
        ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;background:#0c3a4a;color:#67e8f9;border:1px solid #0e7490">🖥 Native</span>`
        : b.qemu === 'renode'
          ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;background:#1a0a3a;color:#c084fc;border:1px solid #7c3aed">🖥 Renode</span>`
          : b.qemu
          ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;
              background:${b.qemu==='esp32s3'?'#1a3a5a':'#1a3a1a'};
              color:${b.qemu==='esp32s3'?'#60a5fa':'#22c55e'};
              border:1px solid ${b.qemu==='esp32s3'?'#2a5a8a':'#2a5a2a'}">🖥 QEMU</span>`
          : '';
      const varBadge = (b.variants > 1)
        ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)">+${b.variants-1}</span>`
        : '';
      return `<div data-fqbn="${_csbEsc(b.fqbn)}" data-name="${_csbEsc(b.name)}"
            data-qemu="${b.qemu||''}" data-chip="${b.chip||''}"
        style="padding:7px 10px;cursor:pointer;font-size:11px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;${sel?'background:var(--brand);color:#fff':''}">
        <span style="display:flex;align-items:center;flex-wrap:wrap;gap:0">
          <span style="font-weight:600;${sel?'color:#fff':'color:var(--text)'}">${_csbEsc(b.name)}</span>
          ${sel?'':qemuBadge}${sel?'':varBadge}
        </span>
        <span style="font-size:10px;${sel?'color:rgba(255,255,255,.75)':'color:var(--muted)'}">${_csbEsc(b.fqbn)}</span>
      </div>`;
    }).join('');
    list.querySelectorAll('[data-fqbn]').forEach(el => {
      el.addEventListener('click', () => {
        _csbBoardSelSave({ fqbn: el.dataset.fqbn, name: el.dataset.name,
          qemu: el.dataset.qemu || false, chip: el.dataset.chip || '' });
        csbBoardSelClose();
      });
      el.addEventListener('mouseenter', () => { if (el.dataset.fqbn !== _csbSelBoard.fqbn) el.style.background = 'var(--bg)'; });
      el.addEventListener('mouseleave', () => { if (el.dataset.fqbn !== _csbSelBoard.fqbn) el.style.background = ''; });
    });
  } catch(e) { list.innerHTML = `<div style="padding:10px;color:var(--muted);font-size:11px;text-align:center">오류: ${e.message}</div>`; }
}

function csbBoardSelKey(e) {
  if (e.key === 'Escape') csbBoardSelClose();
}

// 드롭다운 외부 클릭 시 닫기
document.addEventListener('click', e => {
  const display = document.getElementById('csb-board-sel-display');
  const dd = document.getElementById('csb-board-sel-dropdown');
  if (dd && display && !display.contains(e.target) && !dd.contains(e.target))
    dd.style.display = 'none';
});

// 초기 표시 업데이트
(function() {
  const el = document.getElementById('csb-board-sel-name');
  if (el) el.textContent = _csbSelBoard.name;
  // 저장된 보드에 qemu 정보가 있으면 배지 표시
  if (_csbSelBoard.qemu) _csbBoardSelSave(_csbSelBoard);
})();

let _csbBoardCurrentTab = 'installed';

function csbBoardTab(tab) {
  _csbBoardCurrentTab = tab;
  ['installed','search'].forEach(t => {
    const btn = document.getElementById('csb-boardtab-' + t);
    if (btn) btn.classList.toggle('active', t === tab);
  });
  const sr = document.getElementById('csb-board-search-row');
  if (sr) sr.style.display = tab === 'search' ? 'flex' : 'none';
  document.getElementById('csb-board-status').textContent = '';
  if (tab === 'installed') csbBoardLoad();
  else csbBoardSearch();
}

function _csbBoardStatus(msg) { const el = document.getElementById('csb-board-status'); if (el) el.textContent = msg; }

async function csbBoardLoad() {
  document.getElementById('csb-board-list').innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">불러오는 중...</div>';
  try {
    const data = await api('/api/arduino/cores');
    _csbBoardRenderInstalled(data.cores || []);
  } catch(e) { document.getElementById('csb-board-list').innerHTML = `<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">오류: ${e.message}</div>`; }
}

function _csbBoardRenderInstalled(cores) {
  const el = document.getElementById('csb-board-list');
  if (!cores.length) { el.innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">설치된 보드 없음</div>'; return; }
  el.innerHTML = cores.map(c => {
    const boardList = c.boards.slice(0,6).map(b => `<span style="font-size:10px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:1px 5px">${_csbEsc(b)}</span>`).join(' ');
    const more = c.boards.length > 6 ? `<span style="font-size:10px;color:var(--muted)">+${c.boards.length-6}개</span>` : '';
    return `<div style="padding:8px 10px;border-bottom:1px solid var(--line)">
      <div style="display:flex;align-items:flex-start;gap:6px">
        <div style="flex:1;min-width:0">
          <div style="font-size:11px;font-weight:700;color:var(--text)">${_csbEsc(c.name)}</div>
          <div style="font-size:10px;color:var(--muted);margin-top:1px">${_csbEsc(c.id)} · v${_csbEsc(c.version)} · ${_csbEsc(c.maintainer)}</div>
          <div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:5px">${boardList}${more}</div>
        </div>
        <button onclick="csbBoardUninstall('${_csbEsc(c.id)}')"
          style="font-size:10px;padding:2px 7px;background:none;border:1px solid var(--line);color:#f87171;border-radius:4px;cursor:pointer;font-family:inherit;flex-shrink:0">삭제</button>
      </div>
    </div>`;
  }).join('');
}

async function csbBoardSearch() {
  const q = (document.getElementById('csb-board-q')?.value || '').trim();
  document.getElementById('csb-board-list').innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">검색 중...</div>';
  _csbBoardStatus('');
  try {
    const data = await api('/api/arduino/cores/search?q=' + encodeURIComponent(q));
    _csbBoardRenderSearch(data.cores || []);
  } catch(e) { document.getElementById('csb-board-list').innerHTML = `<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">오류: ${e.message}</div>`; }
}

function _csbBoardRenderSearch(cores) {
  const el = document.getElementById('csb-board-list');
  if (!cores.length) { el.innerHTML = '<div style="padding:16px;color:var(--muted);font-size:11px;text-align:center">검색 결과 없음</div>'; return; }
  el.innerHTML = cores.map(c => {
    const boardList = c.boards.slice(0,4).map(b => `<span style="font-size:9px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:1px 4px">${_csbEsc(b)}</span>`).join(' ');
    return `<div style="padding:8px 10px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:6px">
      <div style="flex:1;min-width:0">
        <div style="font-size:11px;font-weight:700;color:var(--text)">${_csbEsc(c.name)}</div>
        <div style="font-size:10px;color:var(--muted);margin-top:1px">${_csbEsc(c.id)} · v${_csbEsc(c.version)}</div>
        <div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:4px">${boardList}${c.boards.length>4?`<span style="font-size:9px;color:var(--muted)">+${c.boards.length-4}개</span>`:''}</div>
      </div>
      <div style="flex-shrink:0;padding-top:2px">
        ${c.installed
          ? `<span style="font-size:10px;color:var(--brand);border:1px solid;border-radius:4px;padding:2px 6px">✅ 설치됨</span>`
          : `<button onclick="csbBoardInstall('${_csbEsc(c.id)}',this)"
              style="font-size:10px;padding:3px 8px;background:var(--brand);color:#fff;border:none;border-radius:4px;cursor:pointer;font-family:inherit">설치</button>`}
      </div>
    </div>`;
  }).join('');
}

async function csbBoardInstall(id, btn) {
  _csbBoardStatus(`설치 중: ${id} (수 분 소요)...`);
  if (btn) { btn.disabled = true; btn.textContent = '...'; }
  try {
    const data = await api('/api/arduino/cores/install', { method: 'POST', body: JSON.stringify({ id }) });
    if (data.error) { _csbBoardStatus('오류: ' + data.error.slice(0,150)); if(btn){btn.disabled=false;btn.textContent='설치';} return; }
    _csbBoardStatus(`✅ ${id} 설치 완료`);
    if (btn) btn.outerHTML = `<span style="font-size:10px;color:var(--brand);border:1px solid;border-radius:4px;padding:2px 6px">✅ 설치됨</span>`;
  } catch(e) { _csbBoardStatus('오류: ' + e.message); if(btn){btn.disabled=false;btn.textContent='설치';} }
}

async function csbBoardUninstall(id) {
  if (!confirm(`"${id}" 보드를 삭제할까요?`)) return;
  _csbBoardStatus(`삭제 중: ${id}...`);
  try {
    const data = await api('/api/arduino/cores/uninstall', { method: 'DELETE', body: JSON.stringify({ id }) });
    if (data.error) { _csbBoardStatus('오류: ' + data.error.slice(0,100)); return; }
    _csbBoardStatus(`✅ ${id} 삭제 완료`);
    csbBoardLoad();
  } catch(e) { _csbBoardStatus('오류: ' + e.message); }
}


let _codeAiCtxMaxCached = 200000; // default until server responds
let _codeAiCtxMaxFetchedFor = ''; // model name the cache is valid for
// Real token usage from the last turn (server 'usage' SSE). When present, the gauge
// shows actual prompt tokens / real context window instead of the char/4 estimate.
let _codeAiLastUsage = null; // { promptTokens, ctxWindow }

function _codeAiCtxMax() { return _codeAiCtxMaxCached; }

// Called from streaming loops when a 'usage' SSE arrives.
function _codeAiOnUsage(ev) {
  if (!ev || typeof ev.promptTokens !== 'number') return;
  _codeAiLastUsage = { promptTokens: ev.promptTokens, ctxWindow: ev.ctxWindow || _codeAiCtxMax() };
  try { updateSessionPanel(); } catch (_) {}
}

async function _fetchModelCtxMax(model) {
  const key = model || '';
  if (key === _codeAiCtxMaxFetchedFor) return; // already fetched for this model
  _codeAiCtxMaxFetchedFor = key;
  try {
    const url = '/api/model-context' + (key ? `?model=${encodeURIComponent(key)}` : '');
    const r = await fetch(url, { headers: authHeaders() });
    if (!r.ok) return;
    const d = await r.json();
    if (d.contextWindow) {
      _codeAiCtxMaxCached = d.contextWindow;
      updateSessionPanel();
    }
  } catch (_) {}
}


function updateSessionPanel() {
  const barProj  = document.getElementById('code-ai-session-bar-project');
  const barCount = document.getElementById('code-ai-session-bar-count');
  const backBtn  = document.getElementById('code-ai-back-btn');
  if (barProj)  barProj.textContent  = activeProjectName || '(전체)';
  if (barCount) barCount.textContent = codeAiHistory.length ? `${codeAiHistory.length}개` : '';
  if (backBtn)  backBtn.style.display = codeAiHistory.length ? '' : 'none';

  // Context usage estimate
  const ctxWrap  = document.getElementById('code-ai-ctx-wrap');
  const ctxLabel = document.getElementById('code-ai-ctx-label');
  const ctxFill  = document.getElementById('code-ai-ctx-fill');
  if (ctxWrap && ctxLabel && ctxFill) {
    // Fill = real prompt tokens from the last turn (fallback: char/4 estimate).
    // Max = the model's NATIVE context_length (true ceiling), not the per-turn num_ctx.
    const totalChars = codeAiHistory.reduce((s, m) => s + (m.content || '').length, 0);
    const estTokens = _codeAiLastUsage ? _codeAiLastUsage.promptTokens : Math.round(totalChars / 4);
    const maxTokens = _codeAiCtxMax();
    const pct = Math.min(100, Math.round(estTokens / maxTokens * 100));
    const kStr = estTokens >= 1000 ? `~${(estTokens/1000).toFixed(1)}k` : `${estTokens}`;
    const maxKStr = maxTokens >= 1000 ? `${(maxTokens/1000).toFixed(0)}k` : `${maxTokens}`;
    ctxLabel.textContent = `${kStr} / ${maxKStr}`;
    ctxFill.style.width = pct + '%';
    ctxFill.style.background = pct >= 80 ? '#ef4444' : pct >= 50 ? '#f59e0b' : '#22c55e';
    ctxWrap.style.display = 'flex';
  }
}

async function codeSbRefresh() {
  const tree = document.getElementById('csb-file-tree');
  if (!tree) return;
  tree.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:11px;text-align:center">로딩 중...</div>';
  if (!localDirHandle) {
    tree.innerHTML = `<div style="padding:14px 10px;font-size:11px;color:var(--muted);text-align:center">
      <div style="font-size:22px;margin-bottom:6px">🖥️</div>
      <div style="margin-bottom:10px">로컬 폴더를 선택하세요</div>
      <button onclick="openLocalFolder()" style="background:var(--brand);color:#fff;border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-size:11px;font-weight:700">📁 폴더 열기</button>
    </div>`;
    return;
  }
  try {
    const allFiles = await localListFiles(localDirHandle, '');

    // Build project list: dirs that contain code files + all known projects (persisted in localStorage)
    const projectSet = new Set(allFiles.filter(f => f.includes('/')).map(f => f.split('/')[0]));
    _knownProjectsGet().forEach(p => projectSet.add(p));
    if (activeProjectName) projectSet.add(activeProjectName);
    const projects = [...projectSet].sort();
    csbRenderProjectSelector(projects);

    const files = activeProjectName
      ? allFiles.filter(f => f.startsWith(activeProjectName + '/'))
      : allFiles;

    if (!files.length) {
      const emptyMsg = activeProjectName
        ? `<div style="padding:10px;font-size:11px;color:var(--muted)">
             <div style="font-weight:600;color:var(--text);margin-bottom:4px">📁 ${escHtml(activeProjectName)}/</div>
             <div style="padding-left:12px;color:var(--muted)">비어 있음 — + 버튼으로 파일 추가</div>
           </div>`
        : '<div style="padding:12px;color:var(--muted);font-size:11px;text-align:center">파일 없음<br><small>+ 버튼으로 추가</small></div>';
      tree.innerHTML = emptyMsg;
      return;
    }
    const extIcon = { py:'🐍', js:'⚡', ts:'🔷', cpp:'⚙️', c:'⚙️', cs:'💜',
      go:'🔵', rs:'🦀', java:'☕', html:'🌐', css:'🎨', sh:'💻', bash:'💻',
      kt:'🎯', swift:'🍎', rb:'💎', php:'🐘', sql:'🗃️', md:'📝', json:'📋',
      yaml:'📋', yml:'📋', txt:'📄' };

    // 트리 노드 구조 빌드 (leaf = 항상 전체 경로)
    const root = {};
    for (const f of files) {
      const parts = f.split('/');
      let node = root;
      for (let i = 0; i < parts.length - 1; i++) {
        if (!node[parts[i]]) node[parts[i]] = {};
        node = node[parts[i]];
      }
      node[parts[parts.length - 1]] = f; // leaf = full path string
    }

    // 프로젝트 선택 시: 해당 서브트리를 루트로, parentPath를 프로젝트명으로 시작
    const displayRoot = (activeProjectName && root[activeProjectName]) ? root[activeProjectName] : root;
    const startPath = activeProjectName || '';

    const openDirs = csbGetOpenDirs();
    function renderNode(node, depth, parentPath) {
      const indent = depth * 14;
      let html = '';
      // 디렉토리 먼저, 파일 나중
      const dirs = [], leafs = [];
      for (const [k, v] of Object.entries(node)) {
        if (typeof v === 'object') dirs.push([k, v]);
        else leafs.push([k, v]);
      }
      dirs.sort((a,b) => a[0].localeCompare(b[0]));
      leafs.sort((a,b) => a[0].localeCompare(b[0]));
      for (const [name, children] of dirs) {
        const dirId = 'csbdir_' + (parentPath+'/'+name).replace(/[^a-z0-9]/gi,'_');
        const isOpen = openDirs.has(dirId);
        const dirPath = (parentPath+'/'+name).replace(/^\//,'');
        const safeDirPath = dirPath.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
        html += `<div class="csb-file-item" data-dirpath="${escHtml(dirPath)}" style="padding-left:${indent+8}px;font-weight:600;color:var(--muted)"
          onclick="csbToggleDir('${dirId}')"
          oncontextmenu="csbCtxMenu(event,this,true)"
          ondragover="event.preventDefault();event.dataTransfer.dropEffect='move';this.classList.add('csb-drop-target')"
          ondragleave="this.classList.remove('csb-drop-target')"
          ondrop="csbDrop(event,this)">
          <span id="${dirId}_arrow" style="font-size:9px;transition:.15s;flex-shrink:0">${isOpen ? '▼' : '▶'}</span><span style="flex-shrink:0">📂</span>
          <span class="csb-item-name" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">${escHtml(name)}/</span>
          <button class="csb-add-btn" onclick="csbNewInDir(this.closest('[data-dirpath]').dataset.dirpath,event)" title="새 파일">+</button>
          <button class="csb-del" onclick="csbDeleteDir('${safeDirPath}',event)" title="디렉토리 삭제">✕</button>
        </div>
        <div id="${dirId}" style="display:${isOpen ? 'block' : 'none'}">
          ${renderNode(children, depth+1, parentPath+'/'+name)}
        </div>`;
      }
      for (const [name, fullPath] of leafs) {
        const ext = name.split('.').pop().toLowerCase();
        const icon = extIcon[ext] || '📄';
        const safe = fullPath.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
        html += `<div class="csb-file-item" data-path="${escHtml(fullPath)}" style="padding-left:${indent+8}px"
          draggable="true"
          ondragstart="event.dataTransfer.setData('text/plain',this.dataset.path);event.dataTransfer.effectAllowed='move'"
          oncontextmenu="csbCtxMenu(event,this,false)"
          onclick="csbOpenFile('${safe}')">
          <span style="flex-shrink:0">${icon}</span>
          <span class="csb-item-name" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1" title="${escHtml(fullPath)}">${escHtml(name)}</span>
          <button class="csb-del" onclick="csbDeleteFile('${safe}',event)" title="삭제">✕</button>
        </div>`;
      }
      return html;
    }

    tree.innerHTML = renderNode(displayRoot, 0, startPath);
  } catch {
    tree.innerHTML = '<div style="padding:12px;color:#f87171;font-size:11px;text-align:center">불러오기 실패</div>';
  }
}

function csbGetOpenDirs() {
  try { return new Set(JSON.parse(localStorage.getItem('csb_open_dirs') || '[]')); } catch { return new Set(); }
}
function csbSaveOpenDirs(set) {
  try { localStorage.setItem('csb_open_dirs', JSON.stringify([...set])); } catch {}
}
function csbToggleDir(id) {
  const el = document.getElementById(id);
  const arrow = document.getElementById(id + '_arrow');
  if (!el) return;
  const collapsed = el.style.display === 'none';
  el.style.display = collapsed ? 'block' : 'none';
  if (arrow) arrow.textContent = collapsed ? '▼' : '▶';
  const dirs = csbGetOpenDirs();
  if (collapsed) dirs.add(id); else dirs.delete(id);
  csbSaveOpenDirs(dirs);
}

async function csbOpenFile(filename) {
  if (!localDirHandle) return;
  try {
    const content = await localReadFile(filename);
    if (content === null) return;
    // In client-local+project mode, tabs use bare names; sidebar paths include the project prefix
    const bare = _clientBareFileName(filename);
    const existing = codeFiles.find(f => f.name === bare);
    if (existing) switchCodeFile(existing.id);
    else codeNewFile(bare, content);
  } catch {}
}

async function csbDeleteFile(filename, ev) {
  ev.stopPropagation();
  if (!localDirHandle || !confirm(`"${filename}" 삭제할까요?`)) return;
  try {
    const ok = await localDeleteFile(filename);
    if (ok) {
      const bare = _clientBareFileName(filename);
      const existing = codeFiles.find(f => f.name === bare);
      if (existing) closeCodeFile(existing.id);
      codeSbRefresh();
    }
  } catch {}
}

async function csbDeleteDir(dirPath, ev) {
  ev.stopPropagation();
  if (!localDirHandle || !confirm(`"${dirPath}" 디렉토리와 내부 파일을 모두 삭제할까요?`)) return;
  try {
    const parts = dirPath.split('/').filter(Boolean);
    let parent = localDirHandle;
    for (let i = 0; i < parts.length - 1; i++) parent = await parent.getDirectoryHandle(parts[i]);
    await parent.removeEntry(parts[parts.length - 1], { recursive: true });
    // 해당 디렉토리 아래 열려 있는 탭 모두 닫기
    const prefix = dirPath.endsWith('/') ? dirPath : dirPath + '/';
    for (const f of [...codeFiles]) {
      if (f.name === dirPath || f.name.startsWith(prefix)) closeCodeFile(f.id);
    }
    codeSbRefresh();
  } catch (e) {
    alert('삭제 실패: ' + e.message);
  }
}

// ── Context menu ─────────────────────────────────────────────────────────────
let _csbCtxTarget = null;

function csbCtxMenu(ev, el, isDir) {
  ev.preventDefault(); ev.stopPropagation();
  _csbCtxTarget = { path: el.dataset.path || el.dataset.dirpath, isDir };
  const menu = document.getElementById('csb-ctx');
  if (!menu) return;
  const items = isDir ? [
    { label: '📄 새 파일', action: 'newfile' },
    { label: '📁 새 폴더', action: 'newfolder' },
    { label: '✏️ 이름 바꾸기', action: 'rename' },
    { label: '🗑️ 삭제', action: 'delete' },
  ] : [
    { label: '✏️ 이름 바꾸기', action: 'rename' },
    { label: '🗑️ 삭제', action: 'delete' },
  ];
  menu.innerHTML = items.map(i => `<div class="csb-ctx-item" onclick="csbCtxAction('${i.action}')">${i.label}</div>`).join('');
  menu.style.display = 'block';
  const x = Math.min(ev.clientX, window.innerWidth - 160);
  const y = Math.min(ev.clientY, window.innerHeight - (items.length * 34) - 16);
  menu.style.left = x + 'px';
  menu.style.top = y + 'px';
}
function csbCtxClose() {
  const menu = document.getElementById('csb-ctx');
  if (menu) menu.style.display = 'none';
  _csbCtxTarget = null;
}
function csbCtxAction(action) {
  const target = _csbCtxTarget;
  csbCtxClose();
  if (!target) return;
  const { path, isDir } = target;
  if (action === 'rename') csbInlineRename(path, isDir);
  else if (action === 'delete') isDir ? csbDeleteDir(path, { stopPropagation: () => {} }) : csbDeleteFile(path, { stopPropagation: () => {} });
  else if (action === 'newfile') csbNewInDir(path, null);
  else if (action === 'newfolder') csbNewFolderAt(path);
}

// ── Inline rename ─────────────────────────────────────────────────────────────
function csbInlineRename(path, isDir) {
  const tree = document.getElementById('csb-file-tree');
  if (!tree) return;
  const attr = isDir ? 'data-dirpath' : 'data-path';
  const item = tree.querySelector(`[${attr}="${path.replace(/\\/g,'\\\\').replace(/"/g,'\\"')}"]`);
  if (!item) return;
  const nameEl = item.querySelector('.csb-item-name');
  if (!nameEl) return;
  const oldBase = path.split('/').pop();
  const inp = document.createElement('input');
  inp.value = oldBase;
  inp.style.cssText = 'flex:1;min-width:0;font-size:11px;padding:1px 4px;background:var(--panel);color:var(--text);border:1px solid var(--brand);border-radius:3px;outline:none;font-family:inherit';
  nameEl.replaceWith(inp);
  inp.focus(); inp.select();
  let done = false;
  const commit = async () => {
    if (done) return; done = true;
    const newName = inp.value.trim();
    if (newName && newName !== oldBase) await csbRenameExec(path, newName, isDir);
    else await codeSbRefresh();
  };
  inp.onblur = commit;
  inp.onkeydown = e => {
    if (e.key === 'Enter') { e.preventDefault(); commit(); }
    if (e.key === 'Escape') { done = true; codeSbRefresh(); }
  };
}

async function csbRenameExec(oldPath, newName, isDir) {
  if (!localDirHandle) return;
  const parts = oldPath.split('/');
  parts[parts.length - 1] = newName;
  const newPath = parts.join('/');
  try {
    if (!isDir) {
      const content = await localReadFile(oldPath);
      if (content === null) throw new Error('읽기 실패');
      await localWriteFile(newPath, content);
      await localDeleteFile(oldPath);
      const bare = _clientBareFileName(oldPath);
      const tab = codeFiles.find(f => f.name === bare);
      if (tab) { tab.name = _clientBareFileName(newPath); renderCodeFileTabs(); }
    } else {
      const allFiles = await localListFiles(localDirHandle, '');
      const prefix = oldPath + '/';
      for (const f of allFiles.filter(f => f.startsWith(prefix))) {
        const content = await localReadFile(f);
        if (content !== null) await localWriteFile(newPath + '/' + f.slice(prefix.length), content);
      }
      const ps = oldPath.split('/');
      let parent = localDirHandle;
      for (let i = 0; i < ps.length - 1; i++) parent = await parent.getDirectoryHandle(ps[i]);
      await parent.removeEntry(ps[ps.length - 1], { recursive: true });
      for (const f of codeFiles) {
        const disk = _clientProjectPath(f.name);
        if (disk.startsWith(prefix)) f.name = _clientBareFileName(newPath + '/' + disk.slice(prefix.length));
      }
      renderCodeFileTabs();
    }
    await codeSbRefresh();
  } catch (e) { alert('이름 바꾸기 실패: ' + (e.message || e)); await codeSbRefresh(); }
}

// ── New file/folder helpers ───────────────────────────────────────────────────
async function csbNewInDir(dirPath, ev) {
  if (ev) ev.stopPropagation();
  if (!localDirHandle) return;
  const name = prompt(`새 파일 이름 (${dirPath.split('/').pop()}/ 에 생성):`);
  if (!name?.trim()) return;
  const fullPath = dirPath + '/' + name.trim();
  await localWriteFile(fullPath, '');
  codeNewFile(_clientBareFileName(fullPath), '');
  codeSbRefresh();
}

async function csbNewFolderAt(parentPath, ev) {
  if (ev) ev.stopPropagation();
  if (!localDirHandle) return;
  const name = prompt(`새 폴더 이름 (${parentPath.split('/').pop()}/ 안에 생성):`);
  if (!name?.trim()) return;
  await localWriteFile(parentPath + '/' + name.trim() + '/.gitkeep', '');
  codeSbRefresh();
}

async function csbNewFolderRoot() {
  if (!localDirHandle) return;
  const base = activeProjectName ? activeProjectName + '/' : '';
  const name = prompt('새 폴더 이름:');
  if (!name?.trim()) return;
  await localWriteFile(base + name.trim() + '/.gitkeep', '');
  codeSbRefresh();
}

// ── Drag and drop ─────────────────────────────────────────────────────────────
function csbDrop(ev, el) {
  ev.preventDefault(); ev.stopPropagation();
  el.classList.remove('csb-drop-target');
  const srcPath = ev.dataTransfer.getData('text/plain');
  const dirPath = el.dataset.dirpath;
  if (!srcPath || !dirPath) return;
  const dstPath = dirPath + '/' + srcPath.split('/').pop();
  if (srcPath === dstPath) return;
  csbMoveFile(srcPath, dstPath);
}

async function csbMoveFile(srcPath, dstPath) {
  if (!localDirHandle) return;
  try {
    const content = await localReadFile(srcPath);
    if (content === null) { alert(`읽기 실패: ${srcPath}`); return; }
    await localWriteFile(dstPath, content);
    await localDeleteFile(srcPath);
    const tab = codeFiles.find(f => f.name === _clientBareFileName(srcPath));
    if (tab) { tab.name = _clientBareFileName(dstPath); renderCodeFileTabs(); }
    await codeSbRefresh();
  } catch (e) { alert('이동 실패: ' + (e.message || e)); }
}

async function csbLoadModels() {
  const sel = document.getElementById('csb-model-select');
  if (!sel) return;
  try {
    const [settingRes, ollamaRes] = await Promise.all([
      fetch('/api/settings/model', { headers: authHeaders() }),
      fetch('/api/ollama/models', { headers: authHeaders() }),
    ]);
    const setting = settingRes.ok ? await settingRes.json() : {};
    const ollamaData = ollamaRes.ok ? await ollamaRes.json() : {};
    const primaryModel = setting.primary || '설정 모델';
    const ollamaModels = (ollamaData.models || []).map(m => m.name);
    sel.innerHTML = `<option value="">기본 (${primaryModel})</option>`;
    const allModels = [...ollamaModels];
    if (codeAiModel && !allModels.includes(codeAiModel)) allModels.unshift(codeAiModel);
    for (const m of allModels) {
      const opt = document.createElement('option');
      opt.value = m; opt.textContent = m;
      if (m === codeAiModel) opt.selected = true;
      sel.appendChild(opt);
    }
    if (!codeAiModel) sel.value = '';
    updateCodeAiLabel();
  } catch {}
}

function csbModelChanged() {
  const sel = document.getElementById('csb-model-select');
  codeAiModel = sel ? sel.value : '';
  localStorage.setItem('codeAiModel', codeAiModel);
  updateCodeAiLabel();
  _codeAiCtxMaxFetchedFor = ''; // invalidate cache so next fetch runs
  _fetchModelCtxMax(codeAiModel);
}

function csbFontSize(val) {
  document.getElementById('csb-fontsize-label').textContent = val;
  if (monacoEditor) monacoEditor.updateOptions({ fontSize: parseInt(val) });
  localStorage.setItem('codeEditorFontSize', val);
}

function csbWordWrap(checked) {
  if (monacoEditor) monacoEditor.updateOptions({ wordWrap: checked ? 'on' : 'off' });
  localStorage.setItem('codeEditorWordWrap', checked ? '1' : '0');
}

function csbFontWeight(val) {
  localStorage.setItem('codeEditorFontWeight', val);
  if (monacoEditor) monacoEditor.updateOptions({ fontWeight: val });
}

function csbKarpathy(checked) {
  _karpathyMode = !!checked;
  localStorage.setItem('codeKarpathyMode', _karpathyMode ? '1' : '0');
  const btn = document.getElementById('code-opt-karpathy');
  if (btn) btn.classList.toggle('active', _karpathyMode);
}

// ── Chat image attach (paste / drag-drop) ────────────────────────────────────
function _codeAiAddImage(file) {
  if (!file || !file.type.startsWith('image/')) return;
  const reader = new FileReader();
  reader.onload = e => {
    _pendingImages.push({ dataUrl: e.target.result, mimeType: file.type });
    _codeAiRenderImagePreview();
  };
  reader.readAsDataURL(file);
}

function _codeAiPasteImage(e) {
  const items = e.clipboardData?.items;
  if (!items) return;
  for (const item of items) {
    if (item.kind === 'file' && item.type.startsWith('image/')) {
      e.preventDefault();
      _codeAiAddImage(item.getAsFile());
    }
  }
}

function _codeAiDropImage(e) {
  e.preventDefault();
  document.getElementById('code-ai-input-row')?.classList.remove('drag-over');
  for (const file of (e.dataTransfer?.files || [])) _codeAiAddImage(file);
}

function _codeAiRenderImagePreview() {
  const wrap = document.getElementById('code-ai-img-preview');
  if (!wrap) return;
  if (!_pendingImages.length) { wrap.style.display = 'none'; wrap.innerHTML = ''; return; }
  wrap.style.display = 'flex';
  wrap.innerHTML = '';
  _pendingImages.forEach((img, i) => {
    const thumb = document.createElement('div');
    thumb.className = 'code-ai-img-thumb';
    thumb.innerHTML = `<img src="${img.dataUrl}" style="max-width:80px;max-height:60px;border-radius:4px;display:block"><button onclick="_codeAiRemoveImage(${i})" title="제거" style="position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border:none;border-radius:50%;width:16px;height:16px;font-size:10px;cursor:pointer;line-height:1;padding:0">×</button>`;
    wrap.appendChild(thumb);
  });
}

function _codeAiRemoveImage(i) {
  _pendingImages.splice(i, 1);
  _codeAiRenderImagePreview();
}

let _hideBlankLines = false;
function csbHideBlankLines(checked) {
  _hideBlankLines = !!checked;
  localStorage.setItem('codeEditorHideBlank', _hideBlankLines ? '1' : '0');
  const btn = document.getElementById('code-opt-hideblank');
  if (btn) btn.classList.toggle('active', _hideBlankLines);
  _applyHideBlankLines();
}
function _applyHideBlankLines() {
  if (!monacoEditor) return;
  if (!_hideBlankLines) { try { monacoEditor.setHiddenAreas([]); } catch {} return; }
  const model = monacoEditor.getModel();
  if (!model) return;
  const n = model.getLineCount();
  const ranges = [];
  let start = -1;
  let inBlock = false, blockEnd = '';
  for (let i = 1; i <= n; i++) {
    const l = model.getLineContent(i).trim();
    let hide = false;
    if (inBlock) {
      hide = true;
      if (l.includes(blockEnd)) inBlock = false;
    } else if (l === '') {
      hide = true;
    } else if (/^(\/\/|--|;)/.test(l) || /^#(?!include|define|ifdef|ifndef|endif|else|elif|pragma|undef|error|warning)/.test(l)) {
      hide = true;
    } else if (l.startsWith('/*')) {
      hide = true;
      if (!l.slice(2).includes('*/')) { inBlock = true; blockEnd = '*/'; }
    } else if (l.startsWith('<!--')) {
      hide = true;
      if (!l.slice(4).includes('-->')) { inBlock = true; blockEnd = '-->'; }
    } else if (l.startsWith('"""') || l.startsWith("'''")) {
      const d = l.slice(0, 3);
      hide = true;
      if (!l.slice(3).includes(d)) { inBlock = true; blockEnd = d; }
    }
    if (hide) { if (start < 0) start = i; }
    else { if (start >= 0) { ranges.push({ startLineNumber: start, startColumn: 1, endLineNumber: i - 1, endColumn: 1 }); start = -1; } }
  }
  if (start >= 0) ranges.push({ startLineNumber: start, startColumn: 1, endLineNumber: n, endColumn: 1 });
  try { monacoEditor.setHiddenAreas(ranges); } catch {}
}

let _blockFlipFlop = false;
let _blockFFDecoIds = [];

function csbBlockFlipFlop(checked) {
  _blockFlipFlop = !!checked;
  localStorage.setItem('codeEditorBlockFF', _blockFlipFlop ? '1' : '0');
  const btn = document.getElementById('code-opt-blockff');
  if (btn) btn.classList.toggle('active', _blockFlipFlop);
  _applyBlockFlipFlop();
}

function _applyBlockFlipFlop() {
  if (!monacoEditor) return;
  const model = monacoEditor.getModel();
  if (!model) return;
  _blockFFDecoIds = monacoEditor.deltaDecorations(_blockFFDecoIds, []);
  if (!_blockFlipFlop) return;

  const n = model.getLineCount();
  const decos = [];

  // Detect top-level function/class/def declarations
  const declRe = /^(export\s+)?(default\s+)?(async\s+)?(function\b|class\b|def\b|async\s+def\b)|^(const|let|var)\s+\w+\s*=\s*(async\s+)?(function|\(|[A-Za-z_$]\w*\s*=>)/;
  const boundaries = [];
  for (let i = 1; i <= n; i++) {
    const line = model.getLineContent(i);
    if (line.match(/^(\s*)/)[1].length === 0 && declRe.test(line.trim())) {
      boundaries.push(i);
    }
  }

  const ffCls = (idx) => idx % 2 === 0 ? 'ff-block-even' : 'ff-block-odd';
  const ffRange = (from, to, idx) => ({ range: { startLineNumber: from, startColumn: 1, endLineNumber: to, endColumn: 1 }, options: { isWholeLine: true, className: ffCls(idx) } });

  if (boundaries.length >= 2) {
    // Declaration-based: alternate between declaration boundaries
    for (let b = 0; b < boundaries.length; b++) {
      const from = boundaries[b];
      const to = b + 1 < boundaries.length ? boundaries[b + 1] - 1 : n;
      decos.push(ffRange(from, to, b));
    }
  } else {
    // Fallback: blank-line-separated groups
    let phase = 0, blockStart = -1;
    for (let i = 1; i <= n; i++) {
      const blank = model.getLineContent(i).trim() === '';
      if (!blank && blockStart < 0) { blockStart = i; }
      else if (blank && blockStart >= 0) {
        decos.push(ffRange(blockStart, i - 1, phase));
        blockStart = -1; phase++;
      }
    }
    if (blockStart >= 0) decos.push(ffRange(blockStart, n, phase));
  }

  _blockFFDecoIds = monacoEditor.deltaDecorations([], decos);
}

const CODE_THEME_GROUPS = [
  { icon: '🌙', label: '다크', themes: [
    { v: 'github-dark', label: 'GitHub Dark', bg: '#0d1117' },
    { v: 'one-dark',    label: 'One Dark',    bg: '#282c34' },
    { v: 'dracula',     label: 'Dracula',     bg: '#282a36' },
    { v: 'nord',        label: 'Nord',        bg: '#2e3440' },
    { v: 'vs-dark',     label: 'VS Dark',     bg: '#1e1e1e' },
    { v: 'monokai',     label: 'Monokai',     bg: '#272822' },
  ]},
  { icon: '☀️', label: '라이트', themes: [
    { v: 'github-light', label: 'GitHub Light', bg: '#f6f8fa' },
    { v: 'vs',           label: 'VS Light',     bg: '#ffffff' },
  ]},
];
const CODE_THEMES = CODE_THEME_GROUPS.flatMap(g => g.themes);

function defineCodeThemes() {
  const d = monaco.editor.defineTheme.bind(monaco.editor);
  d('monokai', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'f92672'},{token:'string',foreground:'e6db74'},
    {token:'comment',foreground:'75715e',fontStyle:'italic'},{token:'number',foreground:'ae81ff'},
    {token:'type',foreground:'66d9ef'},{token:'function',foreground:'a6e22e'},
  ], colors:{'editor.background':'#272822','editor.foreground':'#f8f8f2','editor.selectionBackground':'#49483e','editorCursor.foreground':'#f8f8f0'}});
  d('dracula', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'ff79c6'},{token:'string',foreground:'f1fa8c'},
    {token:'comment',foreground:'6272a4',fontStyle:'italic'},{token:'number',foreground:'bd93f9'},
    {token:'type',foreground:'8be9fd'},{token:'function',foreground:'50fa7b'},
  ], colors:{'editor.background':'#282a36','editor.foreground':'#f8f8f2','editor.selectionBackground':'#44475a','editorCursor.foreground':'#f8f8f2','editor.lineHighlightBackground':'#44475a'}});
  d('one-dark', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'c678dd'},{token:'string',foreground:'98c379'},
    {token:'comment',foreground:'5c6370',fontStyle:'italic'},{token:'number',foreground:'d19a66'},
    {token:'type',foreground:'e5c07b'},{token:'function',foreground:'61afef'},
  ], colors:{'editor.background':'#282c34','editor.foreground':'#abb2bf','editor.selectionBackground':'#3e4451','editorCursor.foreground':'#528bff'}});
  d('nord', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'81a1c1'},{token:'string',foreground:'a3be8c'},
    {token:'comment',foreground:'4c566a',fontStyle:'italic'},{token:'number',foreground:'b48ead'},
    {token:'type',foreground:'8fbcbb'},{token:'function',foreground:'88c0d0'},
  ], colors:{'editor.background':'#2e3440','editor.foreground':'#d8dee9','editor.selectionBackground':'#3b4252','editorCursor.foreground':'#d8dee9','editor.lineHighlightBackground':'#3b4252'}});
  d('github-dark', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'ff7b72'},{token:'string',foreground:'a5d6ff'},
    {token:'comment',foreground:'8b949e',fontStyle:'italic'},{token:'number',foreground:'79c0ff'},
    {token:'type',foreground:'ffa657'},{token:'function',foreground:'d2a8ff'},
  ], colors:{'editor.background':'#0d1117','editor.foreground':'#c9d1d9','editor.selectionBackground':'#163b55','editorCursor.foreground':'#e6edf3'}});
  d('tomorrow-night', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'b294bb'},{token:'string',foreground:'b5bd68'},
    {token:'comment',foreground:'969896',fontStyle:'italic'},{token:'number',foreground:'de935f'},
    {token:'type',foreground:'81a2be'},{token:'function',foreground:'81a2be'},
  ], colors:{'editor.background':'#1d1f21','editor.foreground':'#c5c8c6','editor.selectionBackground':'#373b41','editorCursor.foreground':'#aeafad'}});
  d('solarized-dark', { base:'vs-dark', inherit:true, rules:[
    {token:'keyword',foreground:'859900'},{token:'string',foreground:'2aa198'},
    {token:'comment',foreground:'657b83',fontStyle:'italic'},{token:'number',foreground:'d33682'},
    {token:'type',foreground:'b58900'},{token:'function',foreground:'268bd2'},
  ], colors:{'editor.background':'#002b36','editor.foreground':'#839496','editor.selectionBackground':'#073642','editorCursor.foreground':'#839496'}});
  d('github-light', { base:'vs', inherit:true, rules:[
    {token:'keyword',foreground:'d73a49'},{token:'string',foreground:'032f62'},
    {token:'comment',foreground:'6a737d',fontStyle:'italic'},{token:'number',foreground:'005cc5'},
    {token:'type',foreground:'e36209'},{token:'function',foreground:'6f42c1'},
  ], colors:{'editor.background':'#f6f8fa','editor.foreground':'#24292e','editor.selectionBackground':'#c8c8fa','editorCursor.foreground':'#24292e'}});
  d('solarized-light', { base:'vs', inherit:true, rules:[
    {token:'keyword',foreground:'859900'},{token:'string',foreground:'2aa198'},
    {token:'comment',foreground:'93a1a1',fontStyle:'italic'},{token:'number',foreground:'d33682'},
    {token:'type',foreground:'b58900'},{token:'function',foreground:'268bd2'},
  ], colors:{'editor.background':'#fdf6e3','editor.foreground':'#657b83','editor.selectionBackground':'#eee8d5','editorCursor.foreground':'#657b83'}});
}

function renderThemeGrid() {
  const grid = document.getElementById('csb-theme-grid');
  if (!grid) return;
  const cur = localStorage.getItem('codeEditorTheme') ||
    (document.documentElement.getAttribute('data-theme') !== 'light' ? 'vs-dark' : 'vs');
  grid.className = 'code-theme-groups';
  grid.innerHTML = CODE_THEME_GROUPS.map(g =>
    `<div class="code-theme-row">
      <span class="code-theme-row-lbl">${g.icon} ${g.label}</span>
      ${g.themes.map(t =>
        `<div class="code-skin-sw${t.v===cur?' active':''}" data-v="${t.v}" title="${t.label}"
          style="background:${t.bg}" onclick="csbTheme('${t.v}')"></div>`
      ).join('')}
    </div>`
  ).join('');
}

function setCodePageTheme(name) {
  document.documentElement.setAttribute('data-theme', name);
  localStorage.setItem('code-page-theme', name);
  document.querySelectorAll('.code-theme-btn').forEach(b =>
    b.classList.toggle('active', b.id === 'ctbtn-' + name));
  // Monaco 에디터 테마도 연동
  if (window.monacoEditor && !localStorage.getItem('codeEditorTheme')) {
    const autoTheme = name === 'light' ? 'vs' : name === 'warm' ? 'solarized-light' : 'vs-dark';
    if (window.monaco) monaco.editor.setTheme(autoTheme);
  }
}
(function() {
  const t = localStorage.getItem('code-page-theme') || localStorage.getItem('cherryclaw_theme') || 'dark';
  setCodePageTheme(t);
})();

function csbTheme(theme) {
  if (window.monaco) {
    if (!['vs','vs-dark','hc-black','hc-light'].includes(theme)) defineCodeThemes();
    monaco.editor.setTheme(theme);
  }
  localStorage.setItem('codeEditorTheme', theme);
  const lbl = CODE_THEMES.find(t => t.v === theme);
  const el = document.getElementById('csb-theme-lbl');
  if (el) el.textContent = lbl ? lbl.label : theme;
  document.querySelectorAll('#csb-theme-grid .code-skin-sw').forEach(sw =>
    sw.classList.toggle('active', sw.dataset.v === theme));
}

function csbTabSize(val) {
  if (monacoEditor) monacoEditor.updateOptions({ tabSize: parseInt(val) });
  localStorage.setItem('codeEditorTabSize', val);
}

function csbMinimap(checked) {
  if (monacoEditor) monacoEditor.updateOptions({ minimap: { enabled: checked } });
  localStorage.setItem('codeEditorMinimap', checked ? '1' : '0');
}

function csbFontFamily(val) {
  localStorage.setItem('codeEditorFontFamily', val);
  if (monacoEditor) monacoEditor.updateOptions({ fontFamily: val === 'monospace' ? 'monospace' : `'${val}', monospace` });
}

// Restore editor settings from localStorage
function csbRestoreSettings() {
  const fs = localStorage.getItem('codeEditorFontSize');
  const ww = localStorage.getItem('codeEditorWordWrap');
  const th = localStorage.getItem('codeEditorTheme');
  const ts = localStorage.getItem('codeEditorTabSize');
  const mm = localStorage.getItem('codeEditorMinimap');
  const ff = localStorage.getItem('codeEditorFontFamily') || 'D2Coding';
  const fw = localStorage.getItem('codeEditorFontWeight') || '400';
  const hb = localStorage.getItem('codeEditorHideBlank');
  const bff = localStorage.getItem('codeEditorBlockFF');
  if (fs) { document.getElementById('csb-fontsize').value = fs; document.getElementById('csb-fontsize-label').textContent = fs; }
  if (ww !== null) document.getElementById('csb-wordwrap').checked = ww === '1';
  if (ts) document.getElementById('csb-tabsize').value = ts;
  if (mm !== null) document.getElementById('csb-minimap').checked = mm === '1';
  const ffEl = document.getElementById('csb-fontfamily'); if (ffEl) ffEl.value = ff;
  const fwEl = document.getElementById('csb-fontweight'); if (fwEl) fwEl.value = fw;
  _hideBlankLines = hb === '1';
  _blockFlipFlop = bff === '1';
  const kp = localStorage.getItem('codeKarpathyMode');
  _karpathyMode = kp === '1';
  const hbBtn = document.getElementById('code-opt-hideblank'); if (hbBtn) hbBtn.classList.toggle('active', _hideBlankLines);
  const bffBtn = document.getElementById('code-opt-blockff'); if (bffBtn) bffBtn.classList.toggle('active', _blockFlipFlop);
  const kpBtn = document.getElementById('code-opt-karpathy'); if (kpBtn) kpBtn.classList.toggle('active', _karpathyMode);
  if (monacoEditor) monacoEditor.updateOptions({
    fontSize: fs ? parseInt(fs) : 14,
    wordWrap: ww === '0' ? 'off' : 'on',
    tabSize: ts ? parseInt(ts) : 2,
    minimap: { enabled: mm !== '0' },
    fontFamily: ff === 'monospace' ? 'monospace' : `'${ff}', monospace`,
    fontWeight: fw,
  });
  if (_hideBlankLines) _applyHideBlankLines();
  if (_blockFlipFlop) _applyBlockFlipFlop();
  const activeTheme = th || (document.documentElement.getAttribute('data-theme') !== 'light' ? 'vs-dark' : 'vs');
  if (window.monaco) { defineCodeThemes(); monaco.editor.setTheme(activeTheme); }
  renderThemeGrid();
  const lbl = CODE_THEMES.find(t => t.v === activeTheme);
  const lblEl = document.getElementById('csb-theme-lbl');
  if (lblEl) lblEl.textContent = lbl ? lbl.label : activeTheme;
}

// ── Code folder browser ───────────────────────────────────────────────────
let codeFolderOpen = false;

function toggleCodeFolderBrowser(e) {
  const dd = document.getElementById('code-folder-dropdown');
  const btn = document.getElementById('code-folder-btn');
  if (!dd || !btn) return;
  codeFolderOpen = !codeFolderOpen;
  if (codeFolderOpen) {
    const r = btn.getBoundingClientRect();
    dd.style.top = (r.bottom + 4) + 'px';
    dd.style.left = r.left + 'px';
    dd.style.display = 'block';
    codeRefreshFolder();
  } else {
    dd.style.display = 'none';
  }
  if (e) e.stopPropagation();
}

async function codeRefreshFolder() {
  const list = document.getElementById('code-folder-list');
  if (!list) return;
  list.innerHTML = '<div style="padding:8px 12px;color:var(--muted);font-size:11px">로딩 중...</div>';
  try {
    const files = localDirHandle ? await localListFiles(localDirHandle, '') : [];
    if (!files.length) {
      list.innerHTML = '<div style="padding:8px 12px;color:var(--muted);font-size:11px">파일 없음</div>';
      return;
    }
    list.innerHTML = files.map(f => {
      const ext = f.split('.').pop().toLowerCase();
      const icon = { py:'🐍', js:'⚡', ts:'🔷', cpp:'⚙️', c:'⚙️', cs:'💜',
        go:'🔵', rs:'🦀', java:'☕', html:'🌐', css:'🎨', sh:'💻',
        kt:'🎯', swift:'🍎', rb:'💎', php:'🐘', sql:'🗃️', md:'📝',
      }[ext] || '📄';
      const safe = f.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
      return `<div class="code-folder-item">
        <span style="flex:1;display:flex;align-items:center;gap:7px;overflow:hidden;min-width:0"
          onclick="codeOpenFromFolder('${safe}')">
          ${icon} <span style="overflow:hidden;text-overflow:ellipsis">${escHtml(f)}</span>
        </span>
        <button class="code-folder-del" onclick="codeDeleteFromFolder('${safe}',event)" title="삭제">✕</button>
      </div>`;
    }).join('');
  } catch {
    list.innerHTML = '<div style="padding:8px 12px;color:#f00;font-size:11px">불러오기 실패</div>';
  }
}

async function codeOpenFromFolder(filename) {
  if (!localDirHandle) return;
  try {
    const content = await localReadFile(filename);
    if (content === null) return;
    const bare = _clientBareFileName(filename);
    const existing = codeFiles.find(f => f.name === bare);
    if (existing) switchCodeFile(existing.id);
    else codeNewFile(bare, content);
  } catch {}
  const dd = document.getElementById('code-folder-dropdown');
  if (dd) dd.style.display = 'none';
  codeFolderOpen = false;
}

async function codeDeleteFromFolder(filename, ev) {
  ev.stopPropagation();
  if (!localDirHandle || !confirm(`"${filename}" 파일을 삭제할까요?`)) return;
  try {
    const ok = await localDeleteFile(filename);
    if (ok) {
      const bare = _clientBareFileName(filename);
      const existing = codeFiles.find(f => f.name === bare);
      if (existing) closeCodeFile(existing.id);
      codeRefreshFolder();
    }
  } catch(e) {
    alert('삭제 실패: ' + e.message);
  }
}

// Close folder dropdown when clicking outside
document.addEventListener('click', e => {
  if (!codeFolderOpen) return;
  const dd = document.getElementById('code-folder-dropdown');
  const btn = document.getElementById('code-folder-btn');
  if (dd && !dd.contains(e.target) && btn && !btn.contains(e.target)) {
    dd.style.display = 'none'; codeFolderOpen = false;
  }
});

// ── Vertical resize handle between editor and AI panel ────────────────────
function setupCodeEditorDrop() {
  const container = document.getElementById('code-editor-container');
  if (!container) return;
  container.addEventListener('dragover', e => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; container.style.outline = '2px solid var(--brand)'; });
  container.addEventListener('dragleave', () => { container.style.outline = ''; });
  container.addEventListener('drop', e => {
    e.preventDefault();
    container.style.outline = '';
    const files = Array.from(e.dataTransfer.files);
    if (!files.length) return;
    files.forEach(file => {
      const reader = new FileReader();
      reader.onload = ev => {
        const content = ev.target.result;
        const existing = codeFiles.find(f => f.name === file.name);
        if (existing) { existing.model.setValue(content); switchCodeFile(existing.id); }
        else codeNewFile(file.name, content);
      };
      reader.readAsText(file);
    });
  });
}

function setupCodeVResize() {
  const handle = document.getElementById('code-vresize');
  const codeView = document.getElementById('code-view');
  const aiPanel = document.getElementById('code-ai-panel');
  if (!handle || !aiPanel || !codeView) return;
  let startX = 0, startW = 0;
  handle.addEventListener('mousedown', function(e) {
    startX = e.clientX; startW = aiPanel.offsetWidth;
    document.addEventListener('mousemove', onVMove);
    document.addEventListener('mouseup', onVUp);
    e.preventDefault();
  });
  function onVMove(e) {
    const dx = startX - e.clientX;
    const newW = Math.max(220, Math.min(window.innerWidth * 0.6, startW + dx));
    codeView.style.setProperty('--ai-panel-w', newW + 'px');
    if (monacoEditor) monacoEditor.layout();
  }
  function onVUp() {
    document.removeEventListener('mousemove', onVMove);
    document.removeEventListener('mouseup', onVUp);
  }
}


// ── Standalone bootstrap ────────────────────────────────────────────────────
// In the main app these are triggered by setMode('code') / setSidebarTab('code').
// BroadcastChannel: real-time code sync between code editor and emulator
const _esp32CodeChannel = new BroadcastChannel('esp32_code_sync');
let _esp32SyncBusy = false;
_esp32CodeChannel.onmessage = (e) => {
  if (e.data?.type !== 'code') return;
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !file.name.endsWith('.ino') || !monacoEditor) return;
  _esp32SyncBusy = true;
  const pos = monacoEditor.getPosition();
  if (file.model) file.model.setValue(e.data.code);
  if (pos) monacoEditor.setPosition(pos);
  _esp32SyncBusy = false;
};

// ── Upload Panel (⚡) ─────────────────────────────────────────────────────────
let _cupOpen = false;
let _cupPort = null;
let _cupBusy = false;
let _cupCode = '', _cupFqbn = '', _cupBoardName = '', _cupFname = '';
let _cupCompiledData = null;
let _cupCompiledForCode = '';
let _cupCompiledForFqbn = '';
let _cupBoardOptions = [];
let _cupSelOptions = {};
let _cupMonActive = false;
let _cupMonReader = null;
let _cupMonWriter = null;
let _cupMonBuf = '';
const _cupDecoder = new TextDecoder();

function toggleUploadPanel() {
  const panel = document.getElementById('code-upload-panel');
  if (!panel) return;
  _cupOpen = !_cupOpen;
  panel.style.display = _cupOpen ? 'flex' : 'none';
  const btn = document.getElementById('code-upload-btn');
  if (btn) btn.classList.toggle('active', _cupOpen);
  if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
}

function cupOpenWith(file) {
  _cupCode      = file.model ? file.model.getValue() : (file.content || '');
  _cupFqbn      = _csbSelBoard?.fqbn || 'arduino:avr:uno';
  _cupBoardName = _csbSelBoard?.name || _cupFqbn;
  _cupFname     = file.name;
  _cupSelOptions = {};
  const panel = document.getElementById('code-upload-panel');
  if (!_cupOpen) {
    _cupOpen = true;
    panel.style.display = 'flex';
    const btn = document.getElementById('code-upload-btn');
    if (btn) btn.classList.add('active');
    if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
  }
  cupTab('log');
  document.getElementById('cup-tab-log').innerHTML = '';
  const method = _cupGetUploadMethod(_cupFqbn);
  _cupUpdateInfoRows();
  document.getElementById('cup-stm32-hint').style.display = method === 'stm32-uart' ? '' : 'none';
  document.getElementById('cup-uf2-hint').style.display   = method === 'download-uf2' ? '' : 'none';
  document.getElementById('cup-port-name').textContent = _cupPort ? '✓ 포트 선택됨' : '포트 없음';
  document.getElementById('cup-btn-upload').disabled   = !_cupPort;
  document.getElementById('cup-btn-download').disabled = !_cupPort;
  cupLog(`보드: ${_cupBoardName}`, 'info');
  cupLog(`방식: ${_cupMethodLabel(method)}`, 'info');
  if (method === 'stm32-uart')            cupLog('STM32: BOOT0=HIGH 후 RESET → ⚡ 업로드', 'warn');
  else if (method === 'avr-stk500')       cupLog('AVR: 포트 선택 후 ⚡ 업로드 (자동 DTR 리셋)', 'info');
  else if (method === 'rp2040-emulator') cupLog('RP2040: ⚡ 업로드 버튼으로 에뮬레이터 실행 / ⬇ 다운로드로 UF2 파일 저장', 'info');
  else if (method === 'download-uf2' || method === 'download-bin') cupLog('이 보드는 ⬇ 다운로드 후 수동 복사 방식입니다.', 'warn');
  else if (method === 'esp32-flash')      cupLog('ESP32/ESP8266: 🔌 포트 선택 후 ⚡ 업로드\n  컴파일: 서버 | 플래싱: 브라우저 esptool-js', 'info');
  if (!navigator.serial) cupLog('⚠ WebSerial 미지원 브라우저입니다. Chrome/Edge를 사용하세요.', 'warn');
  _cupLoadBoardOptions();
}

function cupTab(name) {
  const tabs = { log: 'block', opts: 'block', mon: 'flex' };
  Object.keys(tabs).forEach(t => {
    const p = document.getElementById('cup-tab-' + t);
    const b = document.getElementById('cup-tbtn-' + t);
    if (p) p.style.display = t === name ? tabs[t] : 'none';
    if (b) { b.style.color = t === name ? '#e89040' : '#8a7050'; b.style.borderBottom = t === name ? '2px solid #e89040' : '2px solid transparent'; }
  });
}

function cupLog(msg, cls = 'info') {
  const out = document.getElementById('cup-tab-log');
  if (!out) return;
  const colors = { info: '#9aacb8', ok: '#5dc48a', err: '#e07070', prog: '#80a8e0', warn: '#e8c860' };
  const span = document.createElement('span');
  span.style.color = colors[cls] || '#6a7880';
  span.style.display = 'block';
  span.textContent = msg;
  out.appendChild(span);
  out.scrollTop = out.scrollHeight;
}

function _cupSetStatus(cls, text) {
  const el = document.getElementById('cup-status');
  if (!el) return;
  const styles = { idle:{ bg:'#2a1806', color:'#6a5030' }, ready:{ bg:'#1a3020', color:'#4d9e74' }, compiling:{ bg:'#2a1e08', color:'#ccaa50' }, uploading:{ bg:'#2a1208', color:'#c87d30' }, done:{ bg:'#1a3020', color:'#4d9e74' }, error:{ bg:'#2a1010', color:'#c46060' } };
  const s = styles[cls] || styles.idle;
  el.style.background = s.bg; el.style.color = s.color; el.textContent = text;
}

function _cupSetProgress(pct) {
  const bar = document.getElementById('cup-progress');
  if (!bar) return;
  if (pct == null) { bar.style.display = 'none'; return; }
  bar.style.display = 'block'; bar.value = pct;
}

function _cupGetUploadMethod(fqbn) {
  const arch = fqbn.split(':')[1] || '', vendor = fqbn.split(':')[0] || '';
  if (arch === 'avr') return 'avr-stk500';
  if (vendor === 'STMicroelectronics') return 'stm32-uart';
  if (arch === 'samd' || arch === 'sam') return 'download-bin';
  if (arch === 'mbed_rp2040' || arch === 'rp2040') return 'rp2040-emulator';
  if (arch === 'esp32' || arch === 'esp8266') return 'esp32-flash';
  return 'download-bin';
}

function _cupMethodLabel(m) {
  return { 'avr-stk500':'STK500 (WebSerial)', 'stm32-uart':'STM32 UART', 'download-bin':'.bin 다운로드', 'download-uf2':'UF2 드래그&드롭', 'rp2040-emulator':'RP2040 에뮬레이터', 'esp32-flash':'esptool-js (브라우저)' }[m] || m;
}

function _cupGetEffectiveFqbn() {
  const keys = Object.keys(_cupSelOptions);
  if (!keys.length) return _cupFqbn;
  return _cupFqbn + ':' + keys.map(k => k + '=' + _cupSelOptions[k]).join(',');
}

function _cupUpdateInfoRows() {
  const el = document.getElementById('cup-info-rows');
  if (!el) return;
  const method = _cupGetUploadMethod(_cupFqbn);
  el.innerHTML = [['방식', _cupMethodLabel(method)], ['보드', _cupBoardName], ['FQBN', _cupGetEffectiveFqbn()], ['파일', _cupFname]]
    .map(([k, v]) => `<div style="display:flex;gap:10px;font-size:13px"><span style="color:#907050;min-width:40px">${k}</span><span style="color:#c8a060;word-break:break-all">${v}</span></div>`).join('');
}

async function _cupLoadBoardOptions() {
  const baseFqbn = _cupFqbn.split(':').slice(0, 3).join(':');
  try {
    const r = await fetch(`/api/arduino/board/options?fqbn=${encodeURIComponent(baseFqbn)}`, { credentials: 'include', headers: authHeaders() });
    const d = await r.json();
    _cupBoardOptions = d.options || []; _cupSelOptions = {};
    _cupRenderBoardOptions();
  } catch {}
}

function _cupRenderBoardOptions() {
  const list = document.getElementById('cup-board-opts-list');
  if (!list) return;
  if (!_cupBoardOptions.length) { list.innerHTML = ''; return; }
  list.innerHTML = '<div style="font-size:12px;font-weight:700;color:#907050;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em">보드 옵션</div>' +
    _cupBoardOptions.map(o => {
      const sel = _cupSelOptions[o.id] ?? (o.values.find(v => v.selected)?.value ?? o.values[0]?.value ?? '');
      const opts = o.values.map(v => `<option value="${v.value}"${v.value === sel ? ' selected' : ''}>${v.label}</option>`).join('');
      const optId = JSON.stringify(o.id), defVal = o.values.find(v => v.selected)?.value ?? o.values[0]?.value ?? '';
      return `<div style="display:flex;align-items:center;gap:8px;padding:4px 0"><span style="color:#907050;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px" title="${o.label}">${o.label}</span><select style="background:#3a2818;border:1px solid #5a3820;color:#c8a060;border-radius:4px;padding:3px 6px;font-size:12px;font-family:'IBM Plex Mono',monospace;flex:1.4" onchange="if(this.value!==this.dataset.def)_cupSelOptions[${optId}]=this.value;else delete _cupSelOptions[${optId}];_cupUpdateInfoRows()" data-def="${defVal}">${opts}</select></div>`;
    }).join('');
}

async function cupSelectPort() {
  if (!navigator.serial) { cupLog('❌ WebSerial 미지원. Chrome/Edge를 사용하세요.', 'err'); return; }
  try {
    _cupPort = await navigator.serial.requestPort();
    const info = _cupPort.getInfo();
    const vid = info.usbVendorId ? `VID:0x${info.usbVendorId.toString(16).padStart(4,'0')}` : '';
    const pid = info.usbProductId ? `PID:0x${info.usbProductId.toString(16).padStart(4,'0')}` : '';
    const label = [vid, pid].filter(Boolean).join(' ') || '선택됨';
    document.getElementById('cup-port-name').textContent = '✓ ' + label;
    document.getElementById('cup-btn-upload').disabled   = false;
    document.getElementById('cup-btn-download').disabled = false;
    cupLog(`포트 선택됨: ${label}`, 'ok');
    _cupSetStatus('ready', '준비됨');
  } catch(e) { if (e.name !== 'NotFoundError') cupLog('포트 선택 오류: ' + e.message, 'err'); }
}

async function _cupCompile() {
  const arch = _cupFqbn.split(':')[1] || '';
  if (/ESP8266WiFi|ESP8266WebServer|ESP8266HTTPClient/i.test(_cupCode) && arch !== 'esp8266') {
    _cupFqbn = 'esp8266:esp8266:nodemcuv2'; _cupSelOptions = {};
    cupLog(`⚠ ESP8266 감지 → FQBN 자동 변경: ${_cupFqbn}`, 'warn'); _cupUpdateInfoRows(); _cupLoadBoardOptions();
  } else if (/^#include\s+<WiFi\.h>/m.test(_cupCode) && arch !== 'esp32' && arch !== 'esp8266') {
    _cupFqbn = 'esp32:esp32:esp32'; _cupSelOptions = {};
    cupLog(`⚠ ESP32 WiFi 감지 → FQBN 자동 변경: ${_cupFqbn}`, 'warn'); _cupUpdateInfoRows(); _cupLoadBoardOptions();
  }
  cupLog('서버에서 컴파일 중...', 'prog'); _cupSetStatus('compiling', '컴파일 중...');
  const r = await fetch('/api/arduino/compile', {
    method: 'POST', credentials: 'include',
    headers: { 'Content-Type': 'application/json', ...authHeaders() },
    body: JSON.stringify({ code: _cupCode, fqbn: _cupGetEffectiveFqbn() }),
  });
  const data = await r.json();
  if (data.error) { cupLog('컴파일 오류:\n' + data.error, 'err'); _cupSetStatus('error', '컴파일 실패'); return null; }
  const kb = data.size ? ` (${(data.size/1024).toFixed(1)} KB)` : '';
  cupLog(`✅ 컴파일 완료${kb}`, 'ok');
  _cupCompiledForCode = _cupCode;
  _cupCompiledForFqbn = _cupGetEffectiveFqbn();
  return data;
}

function _cupCacheHit() {
  return _cupCompiledData && _cupCompiledForCode === _cupCode && _cupCompiledForFqbn === _cupGetEffectiveFqbn();
}

async function cupDoDownload() {
  cupTab('log');
  let data;
  if (_cupCacheHit()) { data = _cupCompiledData; cupLog('캐시된 컴파일 결과 사용', 'info'); }
  else { data = await _cupCompile(); if (!data) return; }
  _cupCompiledData = data;
  const isHex = !!data.hex;
  const content = isHex ? data.hex : _cupBase64ToBytes(data.bin || data.merged);
  const ext = (data.boardType === 'uf2' || data.boardType === 'rp2040') ? '.uf2' : (isHex ? '.hex' : '.bin');
  const blob = new Blob([content], { type: isHex ? 'text/plain' : 'application/octet-stream' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = _cupFname.replace(/\.[^.]+$/, '') + ext;
  a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 5000);
  cupLog(`다운로드: ${a.download}`, 'ok'); _cupSetStatus('done', '다운로드됨');
}

async function cupDoUpload() {
  if (_cupBusy) return;
  if (!_cupPort) { cupLog('포트를 먼저 선택하세요 (🔌 포트 버튼)', 'err'); return; }
  cupTab('log');
  const method = _cupGetUploadMethod(_cupGetEffectiveFqbn());
  if (method === 'esp32-flash') { await _cupUploadESP32(); return; }
  if (method === 'rp2040-emulator') {
    let data;
    if (_cupCacheHit()) { data = _cupCompiledData; cupLog('캐시된 컴파일 결과 사용', 'info'); }
    else { data = await _cupCompile(); if (!data) return; _cupCompiledData = data; }
    if (!data) return;
    sessionStorage.setItem('arduino_uf2', data.bin);
    sessionStorage.setItem('arduino_sketch', _cupCode || '');
    _emuPanelLoad('/arduino-emulator.html', `RP2040 — ${_cupFname}`);
    return;
  }
  if (method === 'download-uf2' || method === 'download-bin') { await cupDoDownload(); return; }
  _cupBusy = true;
  document.getElementById('cup-btn-upload').disabled   = true;
  document.getElementById('cup-btn-download').disabled = true;
  document.getElementById('cup-tab-log').innerHTML = '';
  _cupSetProgress(0);
  try {
    let data;
    if (_cupCacheHit()) { data = _cupCompiledData; cupLog('캐시된 컴파일 결과 사용', 'info'); }
    else { data = await _cupCompile(); if (!data) return; _cupCompiledData = data; }
    cupLog(`\n--- 업로드 시작 [${_cupBoardName}] ---`, 'prog'); _cupSetStatus('uploading', '업로드 중...'); _cupSetProgress(5);
    if (method === 'avr-stk500')   await _cupUploadAVR(data.hex);
    else if (method === 'stm32-uart') await _cupUploadSTM32(_cupBase64ToBytes(data.bin));
  } catch(e) { cupLog('❌ 오류: ' + e.message, 'err'); _cupSetStatus('error', '업로드 실패'); _cupSetProgress(null); }
  finally { _cupBusy = false; document.getElementById('cup-btn-upload').disabled = false; document.getElementById('cup-btn-download').disabled = false; }
}

async function _cupUploadESP32() {
  _cupBusy = true;
  document.getElementById('cup-btn-upload').disabled   = true;
  document.getElementById('cup-btn-download').disabled = true;
  document.getElementById('cup-tab-log').innerHTML = '';
  _cupSetProgress(0);
  let transport = null, success = false;
  try {
    let data;
    if (_cupCacheHit()) { data = _cupCompiledData; cupLog('캐시된 컴파일 결과 사용', 'info'); }
    else { data = await _cupCompile(); if (!data) return; _cupCompiledData = data; }
    const b64 = data.merged || data.bin;
    if (!b64) throw new Error('컴파일 결과에 바이너리가 없습니다');
    cupLog('esptool-js 로딩 중...', 'prog');
    const { ESPLoader, Transport, HardReset } = await import('/esptool-bundle.js');
    cupLog('보드 연결 중 (자동 리셋)...', 'prog'); _cupSetStatus('uploading', '연결 중...');
    transport = new Transport(_cupPort, true);
    const terminal = { clean:()=>{}, writeLine:m=>{ if(m.trim()) cupLog(m,'info'); }, write:m=>{ if(m.trim()) cupLog(m,'info'); } };
    const esploader = new ESPLoader({ transport, baudrate:115200, romBaudrate:115200, enableTracing:false, terminal });
    let chip;
    try { chip = await esploader.main(); }
    catch(e) { cupLog('⚠ 자동 리셋 실패 — BOOT 누른채 RST → BOOT 놓기 후 재시도.', 'warn'); throw e; }
    cupLog(`칩 감지: ${chip}`, 'ok'); _cupSetProgress(10); _cupSetStatus('uploading', '업로드 중...');
    const binData = _cupBase64ToBytes(b64);
    let _t0 = Date.now(), _w0 = 0;
    await esploader.writeFlash({
      fileArray: [{ data: binData, address: 0x0 }],
      flashSize:'keep', flashMode:'keep', flashFreq:'keep', eraseAll:false, compress:true,
      reportProgress: (_fi, written, total) => {
        const pct = Math.round(written/total*100); _cupSetProgress(10 + pct*0.88);
        const now = Date.now();
        if (_w0===0 && written>0) { _t0=now; _w0=written; }
        const kbps = (now-_t0)>200 ? ((written-_w0)/1024/((now-_t0)/1000)).toFixed(1) : '...';
        document.getElementById('cup-port-name').textContent = `플래싱 ${(written/1024).toFixed(1)}/${(total/1024).toFixed(1)} KB (${pct}%) · ${kbps} KB/s`;
      },
    });
    try { await new HardReset(transport).reset(); } catch {}
    cupLog('✅ 업로드 완료! 보드가 재시작됩니다.', 'ok'); _cupSetStatus('done', '완료'); _cupSetProgress(100); success = true;
  } catch(e) { cupLog('❌ 오류: ' + e.message, 'err'); _cupSetStatus('error', '업로드 실패'); _cupSetProgress(null); }
  finally {
    try { if (transport) await transport.disconnect(); } catch {}
    _cupBusy = false;
    document.getElementById('cup-btn-upload').disabled   = false;
    document.getElementById('cup-btn-download').disabled = false;
    document.getElementById('cup-port-name').textContent = _cupPort ? '✓ 포트 선택됨' : '포트 없음';
    setTimeout(() => _cupSetProgress(null), 3000);
  }
  if (success) {
    cupTab('mon'); _cupMonAppendSys('[업로드 완료 — 시리얼 모니터 자동 연결 중...]');
    await new Promise(r => setTimeout(r, 1500));
    await cupMonOpen();
  }
}

function _cupBase64ToBytes(b64) {
  const raw = atob(b64), out = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
  return out;
}

function _cupParseIntelHex(hexText) {
  const pages = new Map(); let extAddr = 0;
  for (const line of hexText.split('\n')) {
    const t = line.trim();
    if (!t.startsWith(':') || t.length < 11) continue;
    const bytes = []; for (let i=1; i<t.length-1; i+=2) bytes.push(parseInt(t.substr(i,2),16));
    const len=bytes[0], addr=(bytes[1]<<8)|bytes[2], type=bytes[3];
    if (type===1) break; if (type===4) { extAddr=((bytes[4]<<8)|bytes[5])<<16; continue; } if (type!==0) continue;
    const fullAddr = extAddr+addr;
    for (let i=0; i<len; i++) { const a=fullAddr+i, pg=a>>7, off=a&0x7f; if (!pages.has(pg)) pages.set(pg,new Uint8Array(128).fill(0xff)); pages.get(pg)[off]=bytes[4+i]; }
  }
  return pages;
}

async function _cupWrite(writer, data) { await writer.write(data instanceof Uint8Array ? data : new Uint8Array(Array.isArray(data) ? data : [data])); }

async function _cupRead(reader, n, ms=5000) {
  const buf=new Uint8Array(n); let pos=0; const deadline=Date.now()+ms;
  while (pos<n) {
    if (Date.now()>deadline) throw new Error(`시리얼 타임아웃 (${n}B 중 ${pos}B)`);
    const {value,done} = await reader.read(); if (done) throw new Error('포트가 닫혔습니다');
    const take=Math.min(value.length,n-pos); buf.set(value.slice(0,take),pos); pos+=take;
  }
  return buf;
}

async function _cupUploadAVR(hexText) {
  const INSYNC=0x14,OK=0x10,EOP=0x20,CMD_SYNC=0x30,CMD_SET_DEV=0x42,CMD_ENTER=0x50,CMD_LEAVE=0x51,CMD_ADDR=0x55,CMD_PROG=0x64;
  await _cupPort.open({ baudRate:115200, dataBits:8, stopBits:1, parity:'none' });
  const reader=_cupPort.readable.getReader(), writer=_cupPort.writable.getWriter();
  const cmdOk = async (bytes,extra=0,ms=3000) => {
    await _cupWrite(writer, new Uint8Array([...bytes,EOP]));
    const r=await _cupRead(reader,2+extra,ms);
    if (r[0]!==INSYNC) throw new Error(`STK500: INSYNC 없음 (0x${r[0].toString(16)})`);
    if (r[1+extra]!==OK) throw new Error(`STK500: OK 없음 (0x${r[1+extra].toString(16)})`);
    return r.slice(1,1+extra);
  };
  try {
    if (_cupPort.setSignals) {
      await _cupPort.setSignals({ dataTerminalReady:false, requestToSend:false });
      await new Promise(r=>setTimeout(r,100));
      await _cupPort.setSignals({ dataTerminalReady:true, requestToSend:true });
      await new Promise(r=>setTimeout(r,50));
      await _cupPort.setSignals({ dataTerminalReady:false });
    }
    await new Promise(r=>setTimeout(r,250));
    cupLog('동기화 중...', 'prog');
    let synced=false;
    for (let i=0; i<12&&!synced; i++) { try { await _cupWrite(writer,[CMD_SYNC,EOP]); const r=await _cupRead(reader,2,300); if(r[0]===INSYNC&&r[1]===OK) synced=true; } catch {} }
    if (!synced) throw new Error('보드에 연결할 수 없습니다. 케이블/DTR 리셋을 확인하세요.');
    cupLog('✓ 동기화됨', 'ok');
    await cmdOk([CMD_SET_DEV,0x86,0x00,0x07,0x7f,0x83,0xff,0x00,0x01,0x01,0x01,0x01,0x03,0xff,0x00,0x80,0x04,0x00,0x00,0x00,0x80,0x00]);
    await cmdOk([CMD_ENTER]); cupLog('✓ 프로그래밍 모드 진입', 'ok');
    const pages=_cupParseIntelHex(hexText), sorted=[...pages.entries()].sort((a,b)=>a[0]-b[0]);
    let done=0;
    for (const [pg, pgData] of sorted) {
      const waddr=pg<<6; await cmdOk([CMD_ADDR,waddr&0xff,(waddr>>8)&0xff]); await cmdOk([CMD_PROG,0x00,0x80,0x46,...pgData]);
      done++; _cupSetProgress(5+Math.round(done/sorted.length*90));
      document.getElementById('cup-port-name').textContent = `업로드 중... ${done}/${sorted.length} 페이지`;
    }
    await cmdOk([CMD_LEAVE]); _cupSetProgress(100); cupLog(`✅ 업로드 완료! (${sorted.length} 페이지)`, 'ok');
    _cupSetStatus('done', '완료 ✓'); document.getElementById('cup-port-name').textContent = '✓ 포트 선택됨';
    await new Promise(r=>setTimeout(r,500)); _cupSetProgress(null);
  } finally { try{reader.releaseLock();}catch{} try{writer.releaseLock();}catch{} try{await _cupPort.close();}catch{} }
}

async function _cupUploadSTM32(binData) {
  const ACK=0x79;
  await _cupPort.open({ baudRate:115200, dataBits:8, stopBits:1, parity:'even' });
  const reader=_cupPort.readable.getReader(), writer=_cupPort.writable.getWriter();
  const w = async d=>_cupWrite(writer,d), readByte=async(ms=6000)=>(await _cupRead(reader,1,ms))[0];
  const waitAck = async(ms=12000)=>{ const b=await readByte(ms); if(b===ACK)return; if(b===0x1F)throw new Error('STM32 NACK'); throw new Error(`응답: 0x${b.toString(16)}`); };
  const xor4=a=>a[0]^a[1]^a[2]^a[3], addrPkt=addr=>{ const b=[(addr>>24)&0xff,(addr>>16)&0xff,(addr>>8)&0xff,addr&0xff]; return new Uint8Array([...b,xor4(b)]); };
  try {
    cupLog('STM32 동기화 중...', 'prog'); cupLog('(BOOT0=HIGH 상태에서 RESET 확인)', 'warn');
    let synced=false;
    for (let i=0; i<5&&!synced; i++) { try{await w([0x7F]);const b=await readByte(1200);if(b===ACK||b===0x1F)synced=true;}catch{} }
    if (!synced) throw new Error('동기화 실패 — BOOT0=HIGH 후 RESET 하세요.');
    cupLog('✓ 동기화됨', 'ok');
    await w([0x00,0xFF]); await waitAck(3000); const n=await readByte(); await _cupRead(reader,n+1,3000); await waitAck(3000);
    cupLog('플래시 지우는 중... (최대 30초)', 'prog'); _cupSetProgress(10);
    await w([0x44,0xBB]); await waitAck(5000); await w([0xFF,0xFF,0x00]); await waitAck(30000);
    cupLog('✓ 플래시 지움', 'ok'); _cupSetProgress(20);
    const START=0x08000000, CHUNK=256, total=Math.ceil(binData.length/CHUNK);
    cupLog(`${binData.length} 바이트 쓰는 중 (${total} 블록)...`, 'prog');
    for (let i=0; i<binData.length; i+=CHUNK) {
      const raw=binData.slice(i,i+CHUNK), padded=new Uint8Array(CHUNK).fill(0xff); padded.set(raw);
      await w([0x31,0xCE]); await waitAck(5000); await w(addrPkt(START+i)); await waitAck(5000);
      let ck=CHUNK-1; for(const b of padded)ck^=b;
      const pkt=new Uint8Array(CHUNK+2); pkt[0]=CHUNK-1; pkt.set(padded,1); pkt[CHUNK+1]=ck;
      await w(pkt); await waitAck(10000);
      const blk=Math.floor(i/CHUNK)+1; _cupSetProgress(20+Math.round(blk/total*75));
      document.getElementById('cup-port-name').textContent = `업로드 중... ${blk}/${total} 블록`;
    }
    _cupSetProgress(97); cupLog('실행 중...', 'prog');
    await w([0x21,0xDE]); await waitAck(5000); await w(addrPkt(START)); try{await waitAck(2000);}catch{}
    _cupSetProgress(100); cupLog('✅ 업로드 완료! BOOT0=GND 후 RESET 하세요.', 'ok');
    _cupSetStatus('done', '완료 ✓'); document.getElementById('cup-port-name').textContent = '✓ 포트 선택됨';
    await new Promise(r=>setTimeout(r,500)); _cupSetProgress(null);
  } finally { try{reader.releaseLock();}catch{} try{writer.releaseLock();}catch{} try{await _cupPort.close();}catch{} }
}

// ── Serial monitor ───────────────────────────────────────────────────────────
function _cupMonAppendSys(msg) {
  const out = document.getElementById('cup-mon-output'); if (!out) return;
  const div = document.createElement('div');
  div.style.color = '#907050'; div.style.fontStyle = 'italic'; div.textContent = msg;
  out.appendChild(div);
  if (document.getElementById('cup-mon-auto')?.checked) out.scrollTop = out.scrollHeight;
}

function cupMonAppend(text) {
  const out = document.getElementById('cup-mon-output'); if (!out) return;
  const showTs = document.getElementById('cup-mon-ts')?.checked;
  const autoScroll = document.getElementById('cup-mon-auto')?.checked;
  _cupMonBuf += text;
  const parts = _cupMonBuf.split('\n'); _cupMonBuf = parts.pop();
  for (const raw of parts) {
    const div = document.createElement('div'); div.style.color = '#c8e8c0';
    if (showTs) {
      const d=new Date(), ts=`${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}:${d.getSeconds().toString().padStart(2,'0')}.${d.getMilliseconds().toString().padStart(3,'0')}`;
      const s=document.createElement('span'); s.style.cssText='color:#907050;font-size:11px;margin-right:6px;opacity:.7;user-select:none'; s.textContent=ts;
      div.appendChild(s); div.appendChild(document.createTextNode(raw.replace(/\r/g,'')));
    } else { div.textContent = raw.replace(/\r/g,''); }
    out.appendChild(div);
  }
  if (autoScroll) out.scrollTop = out.scrollHeight;
}

async function _cupMonReadLoop() {
  while (_cupMonActive && _cupMonReader) {
    try { const {value,done}=await _cupMonReader.read(); if(done)break; cupMonAppend(_cupDecoder.decode(value,{stream:true})); }
    catch(e) { if (_cupMonActive) _cupMonAppendSys(`[오류: ${e.message}]`); break; }
  }
  if (_cupMonActive) cupMonClose();
}

async function cupMonToggle() { if (_cupMonActive) await cupMonClose(); else await cupMonOpen(); }

async function cupMonOpen() {
  if (!_cupPort) { _cupMonAppendSys('[포트를 먼저 선택하세요]'); return; }
  if (_cupBusy)  { _cupMonAppendSys('[업로드 중입니다. 완료 후 연결하세요]'); return; }
  const baud = parseInt(document.getElementById('cup-mon-baud')?.value) || 115200;
  try {
    await _cupPort.open({ baudRate: baud });
    _cupMonReader = _cupPort.readable.getReader();
    _cupMonWriter = _cupPort.writable.getWriter();
    _cupMonActive = true;
    const btn = document.getElementById('cup-mon-btn');
    if (btn) { btn.textContent='■ 연결 해제'; btn.style.color='#e87070'; btn.style.borderColor='color-mix(in srgb,#e87070 35%,#241a0e)'; }
    const inp = document.getElementById('cup-mon-input'); if (inp) inp.disabled = false;
    _cupMonAppendSys(`[연결됨 — ${baud} baud]`); _cupMonReadLoop();
  } catch(e) { _cupMonAppendSys(`[연결 실패: ${e.message}]`); }
}

async function cupMonClose() {
  _cupMonActive = false;
  try{await _cupMonReader?.cancel();}catch{} try{_cupMonReader?.releaseLock();}catch{}
  try{_cupMonWriter?.releaseLock();}catch{} try{await _cupPort?.close();}catch{}
  _cupMonReader=null; _cupMonWriter=null;
  const btn=document.getElementById('cup-mon-btn');
  if (btn) { btn.textContent='▶ 연결'; btn.style.color='#4ade80'; btn.style.borderColor='color-mix(in srgb,#4ade80 35%,#241a0e)'; }
  const inp=document.getElementById('cup-mon-input'); if(inp) inp.disabled=true;
  _cupMonAppendSys('[연결 해제됨]');
}

async function cupMonSend() {
  if (!_cupMonWriter) return;
  const input=document.getElementById('cup-mon-input'); if(!input) return;
  const endings={none:'',nl:'\n',cr:'\r',crnl:'\r\n'};
  const suffix=endings[document.getElementById('cup-mon-line-end')?.value]??'\r\n';
  const text=input.value+suffix; input.value='';
  try {
    await _cupMonWriter.write(new TextEncoder().encode(text));
    const div=document.createElement('div'); div.style.color='#94b0d8'; div.textContent=text.replace(/[\r\n]/g,'');
    document.getElementById('cup-mon-output')?.appendChild(div);
  } catch(e) { _cupMonAppendSys(`[전송 오류: ${e.message}]`); }
}

function cupMonClear() { const el=document.getElementById('cup-mon-output'); if(el) el.innerHTML=''; _cupMonBuf=''; }

// Emulator panel resize drag
document.addEventListener('DOMContentLoaded', function() {
  const drag  = document.getElementById('code-emu-drag');
  const panel = document.getElementById('code-emu-panel');
  if (!drag || !panel) return;
  let startY=0, startH=0;
  drag.addEventListener('mouseover', ()=>drag.style.background='rgba(34,197,94,.4)');
  drag.addEventListener('mousedown', e => {
    startY=e.clientY; startH=panel.offsetHeight; e.preventDefault();
    const iframe = document.getElementById('code-emu-iframe');
    if (iframe) iframe.style.pointerEvents = 'none';
    const onMove = e2 => { const dy=startY-e2.clientY; panel.style.height=Math.max(120,Math.min(window.innerHeight*.75,startH+dy))+'px'; };
    const onUp   = () => {
      document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp);
      drag.style.background='';
      if (iframe) iframe.style.pointerEvents = '';
    };
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
  });
});

// Upload panel resize drag
document.addEventListener('DOMContentLoaded', function() {
  const drag  = document.getElementById('code-upload-drag');
  const panel = document.getElementById('code-upload-panel');
  if (!drag || !panel) return;
  let startY=0, startH=0;
  drag.addEventListener('mousedown', e => {
    startY=e.clientY; startH=panel.offsetHeight; e.preventDefault();
    const onMove = e2 => { const dy=startY-e2.clientY; panel.style.height=Math.max(80,Math.min(window.innerHeight*.6,startH+dy))+'px'; };
    const onUp   = () => { document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp); drag.style.background=''; };
    drag.addEventListener('mouseover', ()=>drag.style.background='rgba(200,125,48,.4)');
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
  });
});

// Here we run them once the DOM is ready since this page IS the code view.
(function bootCodePage() {
  async function boot() {
    try { setCodeSbTab('files'); } catch (e) {}
    try { initCodeView(); } catch (e) { console.error('[code] initCodeView failed', e); }
    try { csbLoadModels(); } catch (e) {}
    try { csbLoadCodeDir(); } catch (e) {}
    try { updateLocalModeUI(); } catch (e) {}
    try { const inp = document.getElementById('csb-termpath'); if (inp && localTermPath) inp.value = localTermPath; } catch (e) {}
    try { await restoreLocalDirHandle(); } catch (e) {}
    try { updateSessionPanel(); } catch (e) {}
    try { _fetchModelCtxMax(codeAiModel); } catch (e) {}
    try { codeSbRefresh(); } catch (e) {}
    try { companionConnect(); } catch (e) {}
    // 히스토리 없으면 세션 목록 표시
    try { if (!codeAiHistory.length) _renderSessionsList(); } catch (e) {}
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot, { once: true });
  else boot();
})();