From 027ba8725e98211e04ce28d7515644d13493c580 Mon Sep 17 00:00:00 2001
From: kim <kim@applecherry.net>
Date: Thu, 4 Jun 2026 18:08:45 +0900
Subject: [PATCH] =?UTF-8?q?Release=202.9.7:=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=EB=A1=9C=EC=BB=AC=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EC=8B=9C=EC=8A=A4=ED=85=9C=20+=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=EC=A0=9D=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 코드 에디터 저장: 서버 API → File System Access API로 전환
  - codeSaveFileById에 저장 성공/실패/폴더미선택 피드백 메시지 추가
- 프로젝트 생성 형식: project-files JSON → @@FILE/@@ENDFILE 델리미터로 변경
  - JSON 이스케이프 오류(Unterminated string) 근본 해결
- 계획 단계 시스템 프롬프트 강화: JSON 출력 절대 금지 명시
- 프로젝트 생성 세션 ID: 계획 세션 재사용 (서버가 history 파라미터 무시하므로)
- _projFileCreated async화: 파일 쓰기 완료 후 사이드바 리프레시
- 헤더/드롭다운 폴더명 표시 동적 업데이트 (workspace/code/ 하드코딩 제거)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json     |    2 +-
 web-ui/code.html |   66 ++-
 web-ui/code.js   | 1430 +++++++++++++++++++++++++++++++++++++---------
 3 files changed, 1203 insertions(+), 295 deletions(-)

diff --git a/package.json b/package.json
index 77507ed..d997cc3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smallclaw",
-  "version": "2.9.6",
+  "version": "2.9.7",
   "description": "Local AI agent framework powered by Ollama - OpenClaw alternative",
   "main": "dist/index.js",
   "bin": {
diff --git a/web-ui/code.html b/web-ui/code.html
index 8c093de..85c65c1 100644
--- a/web-ui/code.html
+++ b/web-ui/code.html
@@ -20,14 +20,26 @@
 <!-- Monaco loader (AMD). Hide define.amd first so any stray UMD lib does not call Monaco's anonymous define(). -->
 <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
 <script>
-  // Apply the saved theme before paint so the page chrome matches the main app.
   try {
-    var _t = localStorage.getItem('cherryclaw_theme');
-    document.documentElement.setAttribute('data-theme', _t === 'dark' ? 'dark' : 'light');
+    var _t = localStorage.getItem('code-page-theme') || localStorage.getItem('cherryclaw_theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', _t);
   } catch (e) {}
 </script>
 <style>
   html, body { height: 100%; }
+  :root[data-theme="warm"] {
+    --bg:#f5f0e8;--bg-soft:#ede8dc;--panel:#fffdf7;--panel-2:#ede8dc;
+    --line:#d6ccbb;--text:#2c2318;--muted:#7a6e5e;--brand:#7c5c2e;--brand2:#a07840;
+  }
+  .code-theme-btn{background:none;border:1.5px solid var(--line);border-radius:6px;padding:3px 9px;font-size:12px;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap;}
+  .code-theme-btn.active{border-color:var(--brand);color:var(--brand2);}
+  .code-theme-btn:hover{border-color:var(--brand);color:var(--brand2);}
+  .code-theme-groups{display:flex;flex-direction:column;gap:5px;margin-top:5px;}
+  .code-theme-row{display:flex;align-items:center;gap:5px;}
+  .code-theme-row-lbl{font-size:12px;width:52px;flex-shrink:0;color:var(--text);}
+  .code-skin-sw{width:20px;height:20px;border-radius:4px;cursor:pointer;border:2px solid var(--line);transition:.15s;box-sizing:border-box;flex-shrink:0;}
+  .code-skin-sw.active{border-color:var(--brand) !important;box-shadow:0 0 0 2px var(--brand);transform:scale(1.15);}
+  .code-skin-sw:hover{transform:scale(1.1);}
   body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Nanum Gothic', system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
   .code-page-header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0; }
   .code-page-header h1 { font-size: 14px; font-weight: 700; margin: 0; }
@@ -44,7 +56,12 @@
 <div class="code-page-header">
   <span style="font-size:16px">💻</span>
   <h1>코드 에디터</h1>
-  <span class="sub">workspace/code/</span>
+  <span class="sub" id="code-header-dir">폴더 없음</span>
+  <div style="display:flex;gap:4px;margin-left:8px">
+    <button class="code-theme-btn" id="ctbtn-dark"  onclick="setCodePageTheme('dark')">🌙 다크</button>
+    <button class="code-theme-btn" id="ctbtn-light" onclick="setCodePageTheme('light')">☀️ 라이트</button>
+    <button class="code-theme-btn" id="ctbtn-warm"  onclick="setCodePageTheme('warm')">🌿 웜</button>
+  </div>
 </div>
 
 <div class="code-layout">
@@ -62,8 +79,9 @@
       <!-- 파일 탭 -->
       <div id="csb-files" style="display:flex;flex-direction:column;flex:1;min-height:0">
         <div style="display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--line);flex-shrink:0">
-          <span style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">workspace/code/</span>
+          <span id="csb-folder-label" style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">workspace/code/</span>
           <div style="display:flex;gap:4px">
+            <button id="code-local-btn" onclick="openLocalFolder()" title="로컬 폴더 열기" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:0 3px">🖥️</button>
             <button onclick="codeNewFile()" title="새 파일" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:0 3px">+</button>
             <button onclick="codeSbRefresh()" title="새로고침" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:0 3px">↺</button>
           </div>
@@ -89,6 +107,15 @@
 
       <!-- 설정 탭 -->
       <div id="csb-settings" style="display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:14px 12px;gap:14px">
+        <div>
+          <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">터미널 시작 경로</div>
+          <div style="display:flex;align-items:center;gap:6px">
+            <input type="text" id="csb-termpath" placeholder="/home/kim/projects/mygame"
+              style="flex:1;font-size:12px;padding:6px 8px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;font-family:'IBM Plex Mono',monospace">
+            <button onclick="csbTermPathSave()" style="background:var(--brand);color:#fff;border:none;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap">저장</button>
+          </div>
+          <div style="font-size:10px;color:var(--muted);margin-top:4px">새 터미널 탭 열면 이 경로로 자동 이동</div>
+        </div>
         <div>
           <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">코드 저장 디렉토리</div>
           <div style="display:flex;align-items:center;gap:6px">
@@ -115,13 +142,8 @@
           </label>
         </div>
         <div>
-          <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">에디터 테마</div>
-          <select id="csb-theme" onchange="csbTheme(this.value)"
-            style="width:100%;font-size:12px;padding:6px 8px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;cursor:pointer">
-            <option value="vs-dark">Dark (기본)</option>
-            <option value="vs">Light</option>
-            <option value="hc-black">High Contrast</option>
-          </select>
+          <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px">에디터 테마 <span id="csb-theme-lbl" style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text)"></span></div>
+          <div class="code-skin-grid" id="csb-theme-grid"></div>
         </div>
         <div>
           <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">탭 크기</div>
@@ -156,11 +178,12 @@
           📁 <span>workspace/code/</span> ▾
         </button>
         <button class="code-tool-btn btn-ai" onclick="codeSendSelectionToAI()" title="선택 영역을 AI에게 전송">💬 AI에게 전송</button>
-        <div id="code-run-dropdown" style="position:relative;display:inline-flex">
+        <div id="code-run-dropdown" style="position:relative;display:inline-flex;align-items:center">
           <button class="code-tool-btn btn-run" onclick="codeRunDefault()" title="실행">
             <span id="code-run-icon">▶</span> <span id="code-run-label">실행</span>
           </button>
           <button class="code-tool-btn btn-run" onclick="codeToggleRunMenu()" title="실행 방법 선택" style="padding:6px 4px;margin-left:-1px;border-left:1px solid rgba(34,197,94,.3)">▾</button>
+          <span id="companion-dot" onclick="companionConnect()" style="width:8px;height:8px;border-radius:50%;background:#6b7280;display:inline-block;cursor:pointer;margin-left:6px;flex-shrink:0" title="Python companion 미연결 — 클릭해서 재연결"></span>
           <div id="code-run-menu" style="display:none;position:absolute;top:100%;right:0;z-index:99;min-width:180px;background:#1a2e1a;border:1px solid #2d5a3a;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.5);margin-top:2px;overflow:hidden">
           </div>
         </div>
@@ -172,11 +195,21 @@
     </div>
     <!-- Editor + AI panel -->
     <div class="code-body">
+      <div id="code-diff-bar" style="display:none">
+        <span id="code-diff-label">🔀 AI 제안 변경 사항</span>
+        <span id="code-diff-hunk-info" style="font-size:11px;color:var(--muted)"></span>
+        <button id="code-diff-accept" onclick="acceptAllHunks()">✅ 모두 적용</button>
+        <button id="code-diff-reject" onclick="rejectAllHunks()">❌ 모두 취소</button>
+      </div>
       <div id="code-editor-container"></div>
       <div class="code-vresize" id="code-vresize"></div>
       <div id="code-ai-panel">
         <div class="code-ai-header">
           <span id="code-ai-title">💻 Coder AI</span>
+          <div class="code-ai-mode-selector">
+            <button class="code-ai-mode-btn active" id="code-ai-mode-code" onclick="setCodeAiMode('code')">💻 Code</button>
+            <button class="code-ai-mode-btn" id="code-ai-mode-ask" onclick="setCodeAiMode('ask')">💬 Ask</button>
+          </div>
         </div>
         <div id="code-ai-messages">
           <div class="code-ai-msg thinking">코드를 선택하고 "AI에게 전송"을 누르거나, 아래에 질문을 입력하세요.</div>
@@ -193,7 +226,8 @@
       <div id="code-term-drag" style="position:absolute;top:0;left:0;right:0;height:5px;cursor:ns-resize;z-index:2;transition:background .15s"></div>
       <div style="display:flex;align-items:center;height:28px;background:#0d1f1a;border-bottom:1px solid #1a4a35;flex-shrink:0;overflow-x:auto;padding-left:2px">
         <div id="code-term-tabs" style="display:flex;align-items:stretch;height:100%;flex:1"></div>
-        <button onclick="addCodeTermShell()" title="새 쉘" style="background:none;border:none;color:#3d6b4f;cursor:pointer;font-size:16px;padding:0 8px;line-height:1;flex-shrink:0">+</button>
+        <button onclick="addLocalShell()" id="local-shell-btn" title="로컬 터미널 (companion.py 필요)" style="background:none;border:none;color:#6b7280;cursor:pointer;font-size:12px;padding:0 6px;line-height:1;flex-shrink:0">🖥️</button>
+        <button onclick="addCodeTermShell()" title="새 터미널 (+)" style="background:none;border:none;color:#3d6b4f;cursor:pointer;font-size:16px;padding:0 8px;line-height:1;flex-shrink:0">+</button>
         <button onclick="toggleCodeTerminal()" title="닫기" style="background:none;border:none;color:#3d6b4f;cursor:pointer;font-size:14px;padding:0 8px;line-height:1;flex-shrink:0">&times;</button>
       </div>
       <div id="code-term-container" style="flex:1;min-height:0;position:relative;overflow:hidden"></div>
@@ -209,7 +243,7 @@
   box-shadow:0 8px 32px rgba(0,0,0,0.35);padding:4px 0">
   <div style="padding:6px 12px;font-size:10px;font-weight:700;color:rgba(34,197,94,0.9);
     border-bottom:1px solid rgba(34,197,94,0.2);display:flex;justify-content:space-between;align-items:center">
-    <span>📁 workspace/code/</span>
+    <span id="code-dropdown-dir">📁 폴더 없음</span>
     <span onclick="codeRefreshFolder()" style="cursor:pointer;opacity:0.7;font-size:13px" title="새로고침">↺</span>
   </div>
   <div id="code-folder-list" style="padding:2px 0">
@@ -217,6 +251,6 @@
   </div>
 </div>
 
-<script src="code.js"></script>
+<script src="code.js?v=20260604s"></script>
 </body>
 </html>
diff --git a/web-ui/code.js b/web-ui/code.js
index 64bab8a..79d4312 100644
--- a/web-ui/code.js
+++ b/web-ui/code.js
@@ -55,7 +55,7 @@ let codeAiAbort = null;
 let codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
 let codeAiModel = localStorage.getItem('codeAiModel') ?? 'glm-5.1:cloud';
 let codeAiMode = localStorage.getItem('codeAiMode') ?? 'code'; // 'code' or 'ask'
-let codeDiffState = {};  // { fileId: { originalText, modifiedText, hunks, decorationIds, viewZoneIds, widgetIds, resolved, onReject } }
+let codeDiffState = {};  // { fileId: { originalText, modifiedText, hunks, decorationIds, viewZoneIds, resolved, rejected, onReject } }
 
 const CODE_LANG_MAP = {
   js:'javascript', ts:'typescript', jsx:'javascript', tsx:'typescript',
@@ -75,7 +75,7 @@ function updateCodeAiLabel() {
   const title = document.getElementById('code-ai-title');
   if (title) title.textContent = '💻 Coder-' + label;
   const input = document.getElementById('code-ai-input');
-  if (input) input.placeholder = (codeAiMode === 'ask' ? 'Ask-' : 'Coder-') + label + '에게 질문...';
+  if (input) input.placeholder = (codeAiMode === 'ask' ? 'Ask-' : 'Coder-') + label + '에게 질문... (예: 게임 만들어줘)';
 }
 
 function setCodeAiMode(mode) {
@@ -191,47 +191,208 @@ function renderCodeFileTabs() {
 
 let codeDirLabel = 'code';
 
-function csbCodeDirChanged(val) { /* preview only, saved on button click */ }
-async function csbCodeDirSave() {
-  const input = document.getElementById('csb-codedir');
-  const val = (input?.value || '').trim() || 'code';
-  try {
-    await api('/api/settings/paths', { method: 'POST', body: JSON.stringify({ code_dir: val }) });
-    codeDirLabel = val;
-    const folderBtn = document.getElementById('code-folder-btn');
-    if (folderBtn) folderBtn.querySelector('span').textContent = `workspace/${val}/`;
-    const headerLabel = document.querySelector('#csb-files span[style*="uppercase"]');
-    if (headerLabel) headerLabel.textContent = `workspace/${val}/`;
-    codeSbRefresh();
-  } catch {}
+// ── 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 csbLoadCodeDir() {
+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 data = await api('/api/settings/paths');
-    const dir = data.code_dir || 'code';
-    codeDirLabel = dir;
-    const input = document.getElementById('csb-codedir');
-    if (input) input.value = dir;
-    const folderBtn = document.getElementById('code-folder-btn');
-    if (folderBtn) folderBtn.querySelector('span').textContent = `workspace/${dir}/`;
-    const headerLabel = document.querySelector('#csb-files span[style*="uppercase"]');
-    if (headerLabel) headerLabel.textContent = `workspace/${dir}/`;
+    const handle = await idbHandleGet();
+    if (!handle) return;
+    const perm = await handle.queryPermission({ mode: 'readwrite' });
+    if (perm === 'granted') {
+      localDirHandle = handle;
+      updateLocalModeUI();
+      codeSbRefresh();
+    }
   } catch {}
 }
 
-function codeSaveFile() {
+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();
+  } 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 ? folderName : '폴더 없음';
+  const dd = document.getElementById('code-dropdown-dir');
+  if (dd) dd.textContent = localDirHandle ? `📁 ${folderName}` : '📁 폴더 없음';
+}
+
+async function localListFiles(dirHandle, prefix) {
+  const files = [];
+  try {
+    for await (const [name, handle] of dirHandle.entries()) {
+      if (name.startsWith('.')) continue;
+      const rel = prefix ? `${prefix}/${name}` : name;
+      if (handle.kind === 'directory') 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; }
+}
+
+// ── Companion WebSocket (local Python execution) ───────────────────────────
+let companionWs = null;
+let companionConnected = false;
+const COMPANION_URL = 'ws://127.0.0.1:9000';
+let companionShellId = null;   // code terminal shell ID backed by companion PTY
+const localShellIds = new Set(); // shell IDs routed to companion instead of server PTY
+
+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; updateCompanionStatus(true); };
+  companionWs.onclose = () => {
+    companionConnected = false; companionWs = null;
+    companionShellId = null;  // 재연결 시 이전 셸 상태 초기화
+    updateCompanionStatus(false);
+    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 → local shell tab; run messages → active code terminal
+  const isShellMsg = msg.type === 'shell_output' || msg.type === 'shell_ready' || msg.type === 'shell_exit';
+  const targetId = isShellMsg && companionShellId ? companionShellId : 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') s.term.write('\x1b[32m🖥️ 로컬 셸\x1b[0m\r\n');
+    else if (msg.type === 'shell_output') s.term.write(msg.data);
+    else if (msg.type === 'shell_exit') { s.term.write(`\r\n\x1b[33m[셸 종료 ${msg.code}]\x1b[0m\r\n`); companionShellId = null; }
+    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'));
+    else if (msg.type === 'exit') s.term.write(`\r\n\x1b[33m[exit ${msg.code}]\x1b[0m\r\n`);
+    else if (msg.type === 'error') s.term.write(`\r\n\x1b[31m오류: ${msg.data}\x1b[0m\r\n`);
+    else if (msg.type === 'killed') s.term.write(`\r\n\x1b[31m[강제 종료]\x1b[0m\r\n`);
+  }, codeTermOpen ? 0 : 500);
+}
+
+function companionKill() {
+  if (companionWs && companionConnected) companionWs.send(JSON.stringify({ type: 'kill' }));
+}
+
+function csbCodeDirChanged(val) {}
+function csbCodeDirSave() {}
+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();
-  api('/api/code/save', {
-    method: 'POST',
-    body: JSON.stringify({ filename: file.name, content: file.content }),
-  })
-    .then(r => {
-      if (r.success) codeAiAppend('system', `💾 저장됨: ${r.path}`);
-      else throw new Error(r.error);
-    })
-    .catch(e => codeAiAppend('system', `⚠️ 저장 실패: ${e.message || e}`));
+  if (!localDirHandle) { codeAiAppend('system', '⚠️ 폴더를 먼저 선택해주세요 (🖥️ 버튼)'); return; }
+  const ok = await localWriteFile(file.name, file.content);
+  codeAiAppend('system', ok ? `💾 저장: ${file.name}` : '⚠️ 저장 실패');
 }
 
 // ── Terminal infrastructure (PTY over WebSocket) ─────────────────────────
@@ -248,7 +409,7 @@ function termWsConnect() {
   termWs.onopen = () => {
     termWsConnected = true;
     for (const [shellId, inst] of xtermInstances) {
-      if (!inst.ptyReady) { inst.ptyReady = true; termWsSend({ type: 'pty_spawn', shellId, cols: inst.term.cols, rows: inst.term.rows }); }
+      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) => {
@@ -283,7 +444,7 @@ function createXtermShell(container, shellId) {
       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','Courier New',monospace",
+    fontFamily: "'IBM Plex Mono', 'D2Coding', 'NanumGothicCoding', 'Malgun Gothic', 'AppleGothic', monospace",
     fontSize: 13, lineHeight: 1.4, cursorBlink: true, scrollback: 5000,
   });
   const fitAddon = new FitAddon.FitAddon();
@@ -292,9 +453,21 @@ function createXtermShell(container, shellId) {
   term.open(sub); fitAddon.fit();
   const inst = { term, fitAddon, ptyReady: false };
   xtermInstances.set(id, inst);
-  term.onData(data => { if (termWsConnected && inst.ptyReady) termWsSend({ type: 'pty_input', shellId: id, data }); });
-  term.onResize(({ cols, rows }) => { if (termWsConnected && inst.ptyReady) termWsSend({ type: 'pty_resize', shellId: id, cols, rows }); });
-  if (termWsConnected) { inst.ptyReady = true; termWsSend({ type: 'pty_spawn', shellId: id, cols: term.cols, rows: term.rows }); }
+  term.onData(data => {
+    if (localShellIds.has(id)) {
+      if (companionConnected && companionWs) companionWs.send(JSON.stringify({ type: 'input', 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', 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 };
 }
 
@@ -395,16 +568,54 @@ 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>
-      bash${codeTermShells.length>1?` <span onclick="closeCodeTermShell('${s.id}',event)" style="color:#3d6b4f;margin-left:3px">&times;</span>`:''}
+      ${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 (companionShellId) companionKill();
+  companionShellId = id;
+  if (!codeTermOpen) toggleCodeTerminal();
+  switchCodeTermShell(id);
+  setTimeout(() => {
+    const shell = codeTermShells.find(s => s.id === id);
+    if (companionConnected && companionWs && shell?.term) {
+      companionWs.send(JSON.stringify({ type: 'shell', rows: shell.term.rows, cols: shell.term.cols }));
+    }
+  }, 300);
+}
 function addCodeTermShell() {
   const id = 'cdt_' + Math.random().toString(36).slice(2,8);
   codeTermShells.push({ id, name:'bash', ptyReady:false, term:null, fitAddon:null });
   switchCodeTermShell(id);
+  if (localTermPath) {
+    setTimeout(() => {
+      const s = codeTermShells.find(s => s.id === id);
+      if (s && s.ptyReady) termWsSend({ type: 'pty_input', shellId: id, data: `cd ${JSON.stringify(localTermPath)}\r` });
+      else setTimeout(() => {
+        const s2 = codeTermShells.find(s => s.id === id);
+        if (s2 && s2.ptyReady) termWsSend({ type: 'pty_input', shellId: id, data: `cd ${JSON.stringify(localTermPath)}\r` });
+      }, 800);
+    }, 400);
+  }
+}
+
+function csbTermPathSave() {
+  const inp = document.getElementById('csb-termpath');
+  localTermPath = (inp?.value || '').trim();
+  localStorage.setItem('code_local_term_path', localTermPath);
+  codeAiAppend('system', localTermPath ? `✅ 터미널 경로 설정: ${localTermPath}` : '터미널 경로 초기화됨');
 }
 function switchCodeTermShell(id) {
   const cur = codeTermShells.find(s => s.id === activeCodeTermShellId);
@@ -424,7 +635,12 @@ function closeCodeTermShell(id, ev) {
   if (ev) ev.stopPropagation();
   const idx = codeTermShells.findIndex(s => s.id === id);
   if (idx === -1 || codeTermShells.length <= 1) return;
-  termWsSend({ type:'pty_kill', shellId:id });
+  if (localShellIds.has(id)) {
+    localShellIds.delete(id);
+    if (companionShellId === id) { companionKill(); companionShellId = null; }
+  } 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);
@@ -471,8 +687,9 @@ const CODE_RUN_MODES = {
   ],
   htm: 'html',
   py: [
-    { id: 'pyodide',  icon: '🐍', label: 'Pyodide',       desc: '브라우저에서 실행' },
-    { id: 'terminal', icon: '⌨',  label: 'python3',      desc: '터미널에서 실행' },
+    { id: 'companion', icon: '🖥️', label: '로컬 실행',    desc: 'companion.py (pygame 지원)' },
+    { id: 'pyodide',   icon: '🐍', label: 'Pyodide',      desc: '브라우저에서 실행' },
+    { id: 'terminal',  icon: '⌨',  label: 'python3',     desc: '서버 터미널에서 실행' },
   ],
   js: [
     { id: 'terminal', icon: '⌨',  label: 'node',          desc: '터미널에서 실행' },
@@ -563,17 +780,34 @@ function codeRunWith(mode) {
 
   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') {
-    api('/api/code/save', { method: 'POST', body: JSON.stringify({ filename: file.name, content: file.content }) })
-      .then(r => {
-        if (r.success) {
-          const w = window.open(`${location.origin}/code-serve/${codeDirLabel}/${file.name}`, '_blank');
-          if (!w) codeAiAppend('system', '⚠️ 팝업 차단됨 — 브라우저에서 팝업을 허용해주세요');
-        }
-      });
+    const ext = file.name.split('.').pop().toLowerCase();
+    const mime = ext === 'html' || ext === 'htm' ? 'text/html' : ext === 'css' ? 'text/css' : '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 (!codeTermOpen) toggleCodeTerminal();
+    setTimeout(() => {
+      companionWs.send(JSON.stringify({ type: 'run', code: file.content, filename: file.name }));
+    }, codeTermOpen ? 0 : 500);
     return;
   }
 
@@ -587,6 +821,7 @@ function codeRunWith(mode) {
 
   // terminal modes
   const ext = file.name.split('.').pop().toLowerCase();
+
   let cmd;
   if (mode === 'terminal') {
     cmd = ext === 'py' ? `python3 ${fpath}` :
@@ -766,20 +1001,9 @@ function codeLiveStreamUpdate(fullReply, state) {
 
   // ── 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
-  const _looksLikeDiff = (code) => {
-    const lines = code.split('\n');
-    let diffLineCount = 0;
-    for (const line of lines) {
-      // Only count + and - lines (not space-prefixed context lines — those match Python indentation)
-      if (/^[+\-] /.test(line) || line.startsWith('@@')) diffLineCount++;
-    }
-    // If more than 30% of non-empty lines look like diff markers, it's a diff
-    const nonEmpty = lines.filter(l => l.trim()).length;
-    return nonEmpty > 0 && diffLineCount / nonEmpty > 0.3;
-  };
-
-  if (lang !== 'diff' && _looksLikeDiff(code)) {
+  // (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';
@@ -900,67 +1124,10 @@ function _applyStreamingDiffDecorations(fileId, originalText, modifiedText) {
     return;
   }
 
-  // Compute simple line-level diff: find which lines in original are changed
+  // 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 modLines = modifiedText.split('\n');
-
-  // Use a fast LCS-like comparison to find added/changed lines
-  // While streaming, we only show "added/changed" lines in green.
-  // We can't show deleted lines until streaming completes (we don't know
-  // if the model will output them later or if they're truly deleted).
-  const decorations = [];
-
-  // Simple line-by-line diff: for each line in modified that differs from original
-  let oi = 0, mi = 0;
-  while (oi < origLines.length && mi < modLines.length) {
-    if (origLines[oi] === modLines[mi]) {
-      // Lines match — unchanged
-      oi++; mi++;
-    } else {
-      // Check if this is an insertion (next orig line matches current mod line)
-      let matchAhead = false;
-      for (let look = 1; look <= 3 && oi + look < origLines.length; look++) {
-        if (origLines[oi + look] === modLines[mi]) {
-          // Lines ahead match — lines oi..oi+look-1 are deleted, modLines[mi] is context
-          // Mark deleted lines (we'll skip this in streaming since we keep original)
-          // Just advance pointers
-          for (let k = 0; k < look; k++) {
-            // Original lines that were removed — we can't show this during streaming
-            // because the model might still output them
-          }
-          oi += look;
-          matchAhead = true;
-          break;
-        }
-      }
-      if (!matchAhead) {
-        // Check if this is a modification (mod line is new/changed)
-        let matchBehind = false;
-        for (let look = 1; look <= 3 && mi + look < modLines.length; look++) {
-          if (origLines[oi] === modLines[mi + look]) {
-            // Lines mi..mi+look-1 are new additions
-            for (let k = 0; k < look; k++) {
-              // We can't show added lines in the original editor during streaming
-              // because we're keeping the original content
-            }
-            mi += look;
-            matchBehind = true;
-            break;
-          }
-        }
-        if (!matchBehind) {
-          // Both lines differ — this is a change
-          oi++; mi++;
-        }
-      }
-    }
-  }
-
-  // The approach above is too complex for real-time. Instead, use a simpler method:
-  // Show a subtle "AI is editing..." indicator on lines that are different.
-  // We do this by computing a quick diff and highlighting changed regions.
-
-  // Quick diff: find the longest common subsequence alignment
   const hunks = computeDiffHunks(originalText, modifiedText);
   if (!hunks.length) {
     // No changes yet — remove any streaming decorations
@@ -1031,6 +1198,29 @@ function applyUnifiedDiff(originalContent, diffText) {
   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++;
@@ -1050,9 +1240,31 @@ function applyUnifiedDiff(originalContent, diffText) {
     const oldStart = parseInt(hunkMatch[1], 10);
     i++; // Move past @@ line
 
-    // Copy untouched original lines up to where this hunk begins
-    const hunkStart = Math.max(0, oldStart - 1);
-    while (origPos < hunkStart && origPos < origLines.length) result.push(origLines[origPos++]);
+    // 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('@@')) {
@@ -1060,16 +1272,20 @@ function applyUnifiedDiff(originalContent, diffText) {
       if (line.startsWith('\\')) { i++; continue; }                          // "\ No newline at end of file"
       if (line.startsWith('+++') || line.startsWith('---')) { i++; continue; } // file headers
       const tag = line[0];
+      const body = line.slice(1);                                            // line minus its 1-char marker
       if (tag === '+') {
-        result.push(line.slice(1));                                          // added line
+        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 === ' ') {
-        if (origPos < origLines.length) result.push(origLines[origPos]); else result.push(line.slice(1));
-        origPos++;                                                           // context — keep original text
+        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, else literal
-        if (origPos < origLines.length && origLines[origPos] === line) { result.push(origLines[origPos]); origPos++; }
+        // 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++;
@@ -1082,6 +1298,8 @@ function applyUnifiedDiff(originalContent, diffText) {
 }
 
 // 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');
@@ -1089,26 +1307,31 @@ function applySimpleDiff(originalContent, diffText) {
 
   let origIdx = 0;
   for (const line of diffLines) {
-    if (line.startsWith('+') && !line.startsWith('+++')) {
+    const tag = line[0];
+    // Strip exactly ONE marker char. Stripping the conventional "+ " as two
+    // chars ate a leading space off indented additions → off-by-one indentation.
+    if (tag === '+') {
       resultLines.push(line.slice(1));
-    } else if (line.startsWith('-') && !line.startsWith('---')) {
+    } else if (tag === '-') {
       origIdx++; // Skip original line
-    } else if (line.startsWith(' ')) {
-      // Context line
-      resultLines.push(line.slice(1));
-      origIdx++;
-    } else {
-      // Plain line (no prefix) or header — skip diff headers
-      if (!line.startsWith('diff ') && !line.startsWith('index ') && !line.startsWith('---') && !line.startsWith('+++')) {
-        resultLines.push(line);
+    } else if (tag === ' ') {
+      // Context line. Accept any space-prefixed line, but only when it actually
+      // matches the next original (whitespace-insensitively) — guards against
+      // bare indented code being mistaken for context. Emit the ORIGINAL text so
+      // the real indentation is preserved.
+      const content = line.slice(1);
+      if (origIdx < origLines.length && origLines[origIdx].trim() === content.trim()) {
+        resultLines.push(origLines[origIdx]);
+        origIdx++;
       }
+      // else: skip — indented code mistaken for context
     }
+    // All other lines (no prefix, headers, comments) are ignored
   }
 
   // Append any remaining original lines
   while (origIdx < origLines.length) {
-    resultLines.push(origLines[origIdx]);
-    origIdx++;
+    resultLines.push(origLines[origIdx++]);
   }
 
   return resultLines.length > 0 ? resultLines.join('\n') : originalContent;
@@ -1120,12 +1343,368 @@ function v2LiveCodeUpdate(fullReply) {
   codeLiveStreamUpdate(fullReply, _v2LiveState);
 }
 
+// ── /new-project 2-phase project creation ────────────────────────────────
+
+// State variables
+let _projMode = false;       // 파일 생성 진행 중
+let _projEl = null;          // 진행 표시용 DOM 요소
+let _projFileCount = 0;      // 생성된 파일 수
+let _projPhase = null;       // 'plan' | null
+let _projHistory = [];       // 계획 대화 히스토리
+let _projSessionId = null;   // 계획 세션 ID
+
+const _PROJ_PLAN_SYSTEM = `당신은 소프트웨어 프로젝트 설계 도우미입니다.
+사용자가 원하는 프로젝트를 분석하고 아래 마크다운 형식으로 답하세요.
+
+🔧 기술 스택: 언어, 라이브러리, 프레임워크 나열
+
+📁 파일 구조:
+- 파일명: 역할 설명
+(5~10개)
+
+✨ 핵심 기능:
+1. 기능 설명
+(3~5가지)
+
+중요: JSON 출력 절대 금지. 코드 블록 출력 금지. 코드 생성 금지.
+반드시 위의 마크다운 텍스트 형식만 사용하세요.
+
+답변 마지막에 반드시 이 한 줄을 추가하세요:
+진행하려면 "만들어줘" 라고 입력하거나, 수정 사항을 알려주세요.`;
+
+const _PROJ_GEN_SYSTEM = `당신은 새 프로젝트 파일을 생성하는 어시스턴트입니다.
+도구를 사용하지 말고, 반드시 아래 형식으로 각 파일을 출력하세요. 다른 텍스트 없음.
+
+@@FILE: 프로젝트명/파일명.확장자
+파일 내용 (이스케이프 불필요, 있는 그대로)
+@@ENDFILE
+
+예시:
+@@FILE: tetris-game/index.html
+<!DOCTYPE html>
+<html lang="ko">
+<head><title>테트리스</title></head>
+<body>...</body>
+</html>
+@@ENDFILE
+
+@@FILE: tetris-game/README.md
+## 실행 방법
+index.html을 브라우저에서 열어주세요.
+@@ENDFILE
+
+규칙:
+- path: 영문 슬러그 폴더명/파일명 (예: tetris-game/index.html)
+- 실행 진입점 필수 (main.py / index.html / app.py 등)
+- README.md 필수 (마지막)
+- 파일 내용에 @@FILE: 또는 @@ENDFILE 문자열 사용 금지
+- 각 파일에 완전한 동작 코드
+- 웹 게임(테트리스, 뱀, 퍼즐 등)은 index.html 단일 파일로 (모든 CSS/JS를 <style>/<script>에 인라인). 별도 .js/.css 파일 금지`;
+
+function _isProjConfirm(msg) {
+  return /^(만들어|만들어줘|만들어주세요|진행|진행해|진행해줘|좋아|좋아요|ok|ㅇㅋ|ㅇㅇ|응|예|네|yes|그래|그래줘|go|시작|시작해|시작해줘)[\s!.]*$/i.test(msg.trim());
+}
+
+function _isNewProjectIntent(msg) {
+  if (!msg || msg.length > 200) return false;
+  const m = msg;
+  const hasCreate = /만들(어|자|어줘|어주|고\s*싶|어\s*주|어보자|어봐|어봐줘)|짜(줘|자|봐|봐줘)|개발(해|하자|해줘|해봐)|작성(해|하자|해줘)|생성(해|하자|해줘)|구현(해|하자|해줘)|코딩(해|해줘)|제작(해|하자|해줘)/.test(m);
+  const hasProject = /게임|앱|app\b|프로그램|프로젝트|웹사이트|웹\s*앱|서버|봇|bot\b|스크립트|도구|툴|플러그인|시스템|대시보드|크롤러|계산기|타이머|채팅|클론|api\s*서버/.test(m);
+  return hasCreate && hasProject;
+}
+
+function _projStartGenerate() {
+  _projMode = true;
+  _projFileCount = 0;
+
+  const el = codeAiAppend('assistant', '');
+  el.classList.remove('streaming');
+  _projEl = el;
+
+  const hdr = document.createElement('div');
+  hdr.style.cssText = 'font-weight:600;color:var(--brand,#7c3aed);margin-bottom:8px;font-size:13px;';
+  hdr.textContent = '🔨 파일 생성 중...';
+  el.appendChild(hdr);
+  el._hdr = hdr;
+
+  const list = document.createElement('div');
+  list.style.cssText = 'font-size:11px;font-family:monospace;';
+  el.appendChild(list);
+  el._list = list;
+  codeAiScrollBottom();
+}
+
+async function _projFileCreated(filename, content) {
+  if (!_projEl) return;
+  _projFileCount++;
+
+  const row = document.createElement('div');
+  row.style.cssText = 'padding:2px 0;display:flex;align-items:center;gap:6px;';
+
+  const statusSpan = document.createElement('span');
+  statusSpan.textContent = '✅';
+  statusSpan.style.flexShrink = '0';
+
+  const pathSpan = document.createElement('span');
+  pathSpan.style.cssText = 'color:var(--text,#ccc);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+  pathSpan.textContent = filename;
+
+  row.appendChild(statusSpan);
+  row.appendChild(pathSpan);
+
+  if (content?.trim()) {
+    const toggleBtn = document.createElement('button');
+    toggleBtn.style.cssText = 'background:transparent;border:1px solid var(--border,#333);color:var(--muted,#888);border-radius:3px;padding:0 6px;font-size:10px;cursor:pointer;flex-shrink:0;line-height:18px;';
+    toggleBtn.textContent = '보기';
+    row.appendChild(toggleBtn);
+
+    const preview = document.createElement('div');
+    preview.style.cssText = 'display:none;background:var(--panel-2,#1e1e2e);border:1px solid var(--border,#333);border-radius:5px;padding:8px;margin:3px 0 3px 22px;max-height:180px;overflow-y:auto;';
+    const pre = document.createElement('pre');
+    pre.style.cssText = 'margin:0;font-size:11px;white-space:pre-wrap;word-break:break-all;color:var(--text,#ccc);';
+    pre.textContent = content;
+    preview.appendChild(pre);
+    toggleBtn.onclick = () => {
+      const hidden = preview.style.display === 'none';
+      preview.style.display = hidden ? 'block' : 'none';
+      toggleBtn.textContent = hidden ? '닫기' : '보기';
+    };
+    _projEl._list.appendChild(row);
+    _projEl._list.appendChild(preview);
+  } else {
+    _projEl._list.appendChild(row);
+  }
+
+  // 로컬 폴더에 저장
+  if (localDirHandle) await localWriteFile(filename, content ?? '');
+
+  // 에디터 탭에 추가
+  _npAddTab(filename, content ?? '');
+  renderCodeFileTabs();
+  codeAiScrollBottom();
+}
+
+function _projDone() {
+  _projMode = false;
+  if (!_projEl) return;
+
+  if (_projEl._hdr) _projEl._hdr.textContent = `📁 프로젝트 생성 완료`;
+
+  const doneDiv = document.createElement('div');
+  doneDiv.style.cssText = 'margin-top:10px;padding-top:10px;border-top:1px solid var(--border,#333);display:flex;gap:8px;align-items:center;flex-wrap:wrap;';
+
+  const info = document.createElement('span');
+  info.style.cssText = 'font-size:12px;color:var(--green,#4ade80);font-weight:600;';
+  info.textContent = `✅ ${_projFileCount}개 파일 생성 완료!`;
+  doneDiv.appendChild(info);
+
+  if (localDirHandle) {
+    const sbBtn = document.createElement('button');
+    sbBtn.style.cssText = 'background:var(--brand,#7c3aed);color:#fff;border:none;border-radius:5px;padding:4px 12px;font-size:11px;font-weight:600;cursor:pointer;';
+    sbBtn.textContent = '📂 파일 탐색기';
+    sbBtn.onclick = () => { const b = document.getElementById('code-folder-btn'); if (b) b.click(); };
+    doneDiv.appendChild(sbBtn);
+  }
+
+  _projEl.appendChild(doneDiv);
+  _projEl = null;
+  codeSbRefresh();
+  codeAiScrollBottom();
+}
+
+async function _projStreamSSE(sessionId, message, systemPrompt, history, onChunk) {
+  const res = await fetch('/api/chat', {
+    method: 'POST',
+    signal: codeAiAbort.signal,
+    headers: authHeaders({ 'Content-Type': 'application/json', 'Accept': 'text/event-stream' }),
+    body: JSON.stringify({
+      message,
+      pinnedMessages: [{ role: 'system', content: systemPrompt }],
+      history: history || [],
+      sessionId,
+      direct: true,
+      ...(codeAiModel ? { model: codeAiModel } : {}),
+    }),
+  });
+  if (!res.ok) throw new Error('HTTP ' + res.status);
+  const reader = res.body.getReader();
+  const dec = new TextDecoder();
+  let buf = '', fullText = '';
+  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);
+        let chunk = '';
+        if (ev.type === 'token') chunk = ev.content || ev.text || '';
+        else if (ev.type === 'text_delta') chunk = ev.delta || '';
+        else if (ev.type === 'final' || ev.type === 'done') {
+          const reply = ev.text || ev.content || ev.reply || '';
+          if (reply.length > fullText.length) fullText = reply;
+        }
+        if (chunk) { fullText += chunk; onChunk?.(chunk); }
+      } catch {}
+    }
+  }
+  return fullText;
+}
+
+async function _projPlanChat(message) {
+  if (codeAiAbort) codeAiAbort.abort();
+  codeAiAbort = new AbortController();
+  try {
+    // 스트리밍 말풍선 생성
+    const bubble = codeAiAppend('assistant', '');
+    bubble.classList.add('streaming');
+    const mdDiv = document.createElement('div');
+    mdDiv.className = 'md-content';
+    bubble.appendChild(mdDiv);
+    codeAiScrollBottom();
+
+    let accumulated = '';
+    const fullText = await _projStreamSSE(
+      _projSessionId, message, _PROJ_PLAN_SYSTEM, _projHistory,
+      chunk => {
+        accumulated += chunk;
+        mdDiv.innerHTML = _renderInlineMarkdown(accumulated);
+        codeAiScrollBottom();
+      }
+    );
+    bubble.classList.remove('streaming');
+    const text = fullText || accumulated;
+    mdDiv.innerHTML = _renderInlineMarkdown(text);
+
+    // 히스토리에 추가
+    _projHistory.push({ role: 'user', content: message });
+    _projHistory.push({ role: 'assistant', content: text });
+
+    // 진행 버튼
+    const btnRow = document.createElement('div');
+    btnRow.style.cssText = 'margin-top:10px;display:flex;gap:6px;';
+    const goBtn = document.createElement('button');
+    goBtn.style.cssText = 'background:var(--brand,#7c3aed);color:#fff;border:none;border-radius:6px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;';
+    goBtn.textContent = '🔨 진행';
+    goBtn.onclick = () => { btnRow.remove(); _projGenerate(); };
+    btnRow.appendChild(goBtn);
+    bubble.appendChild(btnRow);
+    codeAiScrollBottom();
+  } catch (e) {
+    if (e.name !== 'AbortError')
+      codeAiAppend('system', '❌ 오류: ' + (e.message || e));
+  }
+}
+
+async function _projGenerate() {
+  if (codeAiAbort) codeAiAbort.abort();
+  codeAiAbort = new AbortController();
+  _projPhase = null;
+  _projStartGenerate();
+  try {
+    if (_projEl?._hdr) _projEl._hdr.textContent = '🤔 코드 생성 중...';
+    // 계획 세션 재사용 — 서버가 history 파라미터를 무시하고 세션 ID로 히스토리를 로드하므로
+    // 새 세션을 쓰면 "위 계획대로"가 뭔지 모델이 알 수 없음
+    const genSessionId = _projSessionId || ('proj-gen-' + Date.now());
+    let genChars = 0;
+    const fullText = await _projStreamSSE(
+      genSessionId, '위 계획대로 각 파일을 @@FILE / @@ENDFILE 형식으로 생성해주세요.',
+      _PROJ_GEN_SYSTEM, _projHistory,
+      chunk => {
+        genChars += chunk.length;
+        if (_projEl?._hdr) _projEl._hdr.textContent = `🤔 코드 생성 중... (${genChars}자)`;
+      }
+    );
+
+    // @@FILE / @@ENDFILE 델리미터 파싱 (JSON 이스케이프 문제 없음)
+    const fileRe = /@@FILE:\s*(.+?)\r?\n([\s\S]*?)@@ENDFILE/g;
+    const files = [];
+    let fm;
+    while ((fm = fileRe.exec(fullText)) !== null) {
+      files.push({ path: fm[1].trim(), content: fm[2] });
+    }
+    if (files.length === 0) {
+      const preview = fullText ? `\n\n모델 출력 (앞 400자):\n${fullText.slice(0, 400)}` : ' (응답 없음)';
+      codeAiAppend('system', '❌ 파일 블록을 찾지 못했습니다. 다시 시도해주세요.' + preview);
+      return;
+    }
+
+    if (_projEl?._hdr) _projEl._hdr.textContent = '🔨 파일 저장 중...';
+    for (const f of files) {
+      if (f.path && f.content !== undefined)
+        await _projFileCreated(f.path, String(f.content));
+    }
+
+    const allNames = files.map(f => f.path);
+    const slug = (allNames[0] || '').split('/')[0];
+    const mainPath = _npMainFile(files.map(f => ({ path: f.path.replace(slug + '/', '') })), slug);
+    if (mainPath) switchCodeFile(codeFiles.find(f => f.name === mainPath)?.id);
+  } catch (e) {
+    if (e.name !== 'AbortError')
+      codeAiAppend('system', '❌ 프로젝트 생성 오류: ' + (e.message || e));
+  } finally {
+    _projHistory = [];
+    _projSessionId = null;
+    _projDone();
+  }
+}
+
+// 탭 추가만, switchCodeFile 없이 (나중에 메인 파일로 한 번만 포커스)
+function _npAddTab(name, content) {
+  const existing = codeFiles.find(f => f.name === name);
+  if (existing) {
+    if (existing.model) existing.model.setValue(content);
+    else existing.content = content;
+    return existing.id;
+  }
+  const id = 'cf_' + Math.random().toString(36).slice(2, 8);
+  const lang = codeDetectLang(name);
+  const model = monacoReady ? monaco.editor.createModel(content, lang) : null;
+  codeFiles.push({ id, name, content, language: lang, model });
+  return id;
+}
+
+// 메인 진입 파일 추정 (main > app > index > server > 첫 번째)
+function _npMainFile(files, slug) {
+  const priority = /^(main|app|index|server)\.(py|js|ts|jsx|tsx|go|rs|java|rb|php)$/i;
+  const f = files.find(f => priority.test(f.path.split('/').pop()))
+    || files.find(f => !/\.(md|txt|json|yaml|yml|toml|cfg|ini|env)$/i.test(f.path))
+    || files[0];
+  return f ? `${slug}/${f.path}`.replace(/\/+/g, '/') : null;
+}
+
+
 async function codeAiSend() {
   const input = document.getElementById('code-ai-input');
   const message = input.value.trim();
   if (!message) return;
   input.value = ''; input.style.height = '';
 
+  // 프로젝트 계획 단계 중 → 확인 메시지면 생성, 아니면 계획 계속
+  if (_projPhase === 'plan') {
+    codeAiAppend('user', message);
+    if (_isProjConfirm(message)) {
+      await _projGenerate();
+    } else {
+      await _projPlanChat(message);
+    }
+    return;
+  }
+
+  // 새 프로젝트 의도 감지 → 계획 단계 시작
+  if (_isNewProjectIntent(message)) {
+    codeAiAppend('user', message);
+    _projPhase = 'plan';
+    _projHistory = [];
+    _projSessionId = 'proj-plan-' + Date.now();
+    await _projPlanChat(message);
+    return;
+  }
+
   // Include current file context so the model knows what to edit (Code mode only)
   const currentFile = codeFiles.find(f => f.id === activeCodeFileId);
   let contextMsg = message;
@@ -1188,7 +1767,7 @@ async function codeAiSend() {
       method: 'POST',
       headers: authHeaders({ 'Content-Type': 'application/json', 'Accept': 'text/event-stream' }),
       signal: codeAiAbort.signal,
-      body: JSON.stringify({ message: contextMsg, history: historyForAPI, useTools: true, sessionId: codeAiSessionId, codeAiMode: codeAiMode, ...(codeAiModel ? { model: codeAiModel } : {}) }),
+      body: JSON.stringify({ message: contextMsg, history: historyForAPI, useTools: false, direct: true, sessionId: codeAiSessionId, codeAiMode: codeAiMode, ...(codeAiModel ? { model: codeAiModel } : {}) }),
     });
     if (!res.ok) throw new Error('HTTP ' + res.status);
     const reader = res.body.getReader();
@@ -1329,6 +1908,16 @@ function _renderInlineMarkdown(text) {
   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');
+  const nonEmpty = lines.filter(l => l.trim()).length;
+  if (nonEmpty === 0) return false;
+  const diffLines = lines.filter(l => /^[+\-] /.test(l) || l.startsWith('@@')).length;
+  return diffLines / nonEmpty > 0.3;
+}
+
 // 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.)
@@ -1372,22 +1961,55 @@ function codeAiRenderMarkdown(el, text) {
       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 = lang || 'code';
+      langLabel.textContent = isDiff ? ('diff' + (diffFilename ? '  ' + diffFilename : '')) : (lang || 'code');
       header.appendChild(langLabel);
-      const pre = document.createElement('pre');
-      pre.textContent = code;
-      const openBtn = document.createElement('button');
-      openBtn.className = 'code-ai-open-btn';
-      openBtn.textContent = '📂 에디터에서 열기';
-      openBtn.onclick = () => codeAiOpenInEditor(code, lang);
+
+      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(pre);
-      wrapper.appendChild(openBtn);
+      wrapper.appendChild(contentEl);
+      if (isDiff) {
+        // Auto-apply diff to editor; no button needed
+        setTimeout(() => codeAiApplyDiff(code), 0);
+      } else {
+        const openBtn = document.createElement('button');
+        openBtn.className = 'code-ai-open-btn';
+        openBtn.textContent = '📂 에디터에서 열기';
+        openBtn.onclick = () => codeAiOpenInEditor(code, lang);
+        wrapper.appendChild(openBtn);
+      }
       el.appendChild(wrapper);
       codeCount++;
     } else {
@@ -1509,12 +2131,45 @@ function codeEditorWriteFile(fname, content) {
       switchCodeFile(existing.id);
       showCodeDiff(existing.id, oldContent, content);
     }
-    // Don't update the model yet — acceptCodeDiff() will do it
+    // The diff bar's accept/reject (acceptAllHunks/rejectAllHunks) commits the model
   } 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; }
@@ -1530,10 +2185,10 @@ function codeAiOpenInEditor(code, lang) {
   if (existing) {
     const oldContent = existing.model ? existing.model.getValue() : existing.content;
     if (oldContent !== code && code.length > 0) {
-      // Content differs — replace content directly (diff can cause indentation issues)
-      if (existing.model) existing.model.setValue(code);
-      else existing.content = code;
+      // 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);
@@ -1552,7 +2207,17 @@ function computeDiffHunks(originalText, modifiedText) {
   const newLines = (modifiedText || '').split('\n');
   const m = oldLines.length, n = newLines.length;
 
-  // Build LCS table (space-optimized: only need 2 rows)
+  // 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--) {
@@ -1622,11 +2287,16 @@ function showCodeDiff(fileId, originalText, modifiedText, onReject) {
   const hunks = computeDiffHunks(originalText, modifiedText);
   if (!hunks.length) return; // No changes
 
-  // Store diff state
+  // 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: [], widgetIds: [],
-    resolved: new Set(), onReject: onReject || null
+    decorationIds: [], viewZoneIds: [],
+    resolved: new Set(), rejected: new Set(), onReject: onReject || null
   };
 
   // Set model to modified text (the "new" version)
@@ -1640,6 +2310,38 @@ function showCodeDiff(fileId, originalText, modifiedText, onReject) {
   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];
@@ -1650,16 +2352,19 @@ function _applyInlineDiffDecorations(fileId) {
   // Remove old decorations, view zones, and widgets
   _removeInlineDiffDecorations(fileId);
 
-  const newLines = ds.modifiedText.split('\n');
+  // 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 (let hi = 0; hi < ds.hunks.length; hi++) {
-    if (ds.resolved.has(hi)) continue;
-    const hunk = ds.hunks[hi];
-
+  for (const pr of pendingRanges) {
     // Green highlight for added/changed lines
-    for (let line = hunk.newStart; line <= hunk.newEnd && line <= newLines.length; line++) {
+    for (let line = pr.greenStart; line <= pr.greenEnd && line <= contentLines.length; line++) {
       decorations.push({
         range: new monaco.Range(line, 1, line, 1),
         options: {
@@ -1672,12 +2377,11 @@ function _applyInlineDiffDecorations(fileId) {
       });
     }
 
-    // View zone for deleted lines (red "phantom" lines)
-    if (hunk.type === 'delete' || hunk.type === 'change') {
-      const deletedLines = oldLines.slice(hunk.oldStart - 1, hunk.oldEnd);
-      const insertAfter = Math.min(hunk.newStart, newLines.length);
-      const zoneId = 'dz-' + fileId + '-' + hi;
-      if (monacoEditor.changeViewZones) {
+    // 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';
@@ -1685,7 +2389,7 @@ function _applyInlineDiffDecorations(fileId) {
             '<div class="inline-diff-deleted-line">' + escHtml(line) + '</div>'
           ).join('');
           ds.viewZoneIds.push(ca.addZone({
-            afterLineNumber: insertAfter,
+            afterLineNumber: pr.phantomAfter,
             afterColumn: 1,
             heightInLines: Math.max(deletedLines.length, 1),
             domNode: div,
@@ -1698,23 +2402,21 @@ function _applyInlineDiffDecorations(fileId) {
   // Apply decorations
   ds.decorationIds = monacoEditor.deltaDecorations([], decorations);
 
-  // Add hunk action button overlays
-  for (let hi = 0; hi < ds.hunks.length; hi++) {
-    if (ds.resolved.has(hi)) continue;
-    const hunk = ds.hunks[hi];
-    const line = hunk.newStart;
-    if (line <= newLines.length) {
-      _addHunkActionsWidget(fileId, hi, line);
-    }
+  // 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 unresolved hunk
-  const firstUnresolved = ds.hunks.findIndex((_, i) => !ds.resolved.has(i));
-  if (firstUnresolved !== -1) {
-    monacoEditor.revealLineInCenter(ds.hunks[firstUnresolved].newStart);
+  // 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));
   }
 }
 
@@ -1811,50 +2513,31 @@ function _updateDiffBarInfo(fileId) {
   if (infoEl) infoEl.textContent = unresolved > 0 ? (unresolved + '개 변경') : '모두 해결됨';
 }
 
-// Accept a single hunk
+// 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);
 
-  // For accepted hunks, the modified text is already in the model.
-  // Just remove decorations and re-apply.
   _applyInlineDiffDecorations(fileId);
 
   if (ds.resolved.size === ds.hunks.length) finalizeInlineDiff(fileId, true);
 }
 
-// Reject a single hunk — restore original lines for this hunk
+// 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);
 
-  const file = codeFiles.find(f => f.id === fileId);
-  if (!file || !file.model) return;
-
-  const hunk = ds.hunks[hunkIndex];
-  const oldLines = ds.originalText.split('\n');
-  const currentLines = file.model.getValue().split('\n');
-
-  // Replace the hunk's new lines with the original lines
-  const before = currentLines.slice(0, hunk.newStart - 1);
-  const after = currentLines.slice(hunk.newEnd);
-  const originalLines = oldLines.slice(hunk.oldStart - 1, hunk.oldEnd);
-  const newContent = [...before, ...originalLines, ...after].join('\n');
-
-  file.model.setValue(newContent);
-
-  // Recompute hunks based on new content vs original
-  const newHunks = computeDiffHunks(ds.originalText, newContent);
-  ds.hunks = newHunks;
-  ds.resolved = new Set();
-
-  // Remove overlays and re-apply
-  document.querySelectorAll('.inline-diff-hunk-actions[data-file-id="' + fileId + '"]').forEach(el => el.remove());
   _applyInlineDiffDecorations(fileId);
 
-  if (newHunks.length === 0) finalizeInlineDiff(fileId, true);
+  if (ds.resolved.size === ds.hunks.length) finalizeInlineDiff(fileId, true);
 }
 
 // Accept all hunks — keep the modified text as-is
@@ -1862,7 +2545,8 @@ function acceptAllHunks() {
   const fileId = activeCodeFileId;
   const ds = codeDiffState[fileId];
   if (!ds) return;
-  ds.hunks.forEach((_, i) => ds.resolved.add(i));
+  ds.hunks.forEach((_, i) => { ds.resolved.add(i); ds.rejected.delete(i); });
+  _applyInlineDiffDecorations(fileId); // rebuild model to the fully-accepted content
   finalizeInlineDiff(fileId, true);
 }
 
@@ -1871,11 +2555,8 @@ function rejectAllHunks() {
   const fileId = activeCodeFileId;
   const ds = codeDiffState[fileId];
   if (!ds) return;
-  const file = codeFiles.find(f => f.id === fileId);
-  if (file) {
-    if (file.model) file.model.setValue(ds.originalText);
-    else file.content = ds.originalText;
-  }
+  ds.hunks.forEach((_, i) => { ds.resolved.add(i); ds.rejected.add(i); });
+  _applyInlineDiffDecorations(fileId); // rebuild model back to the original content
   if (ds.onReject) ds.onReject();
   finalizeInlineDiff(fileId, true);
 }
@@ -1883,17 +2564,18 @@ function rejectAllHunks() {
 // 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가 안 됨").
-function codeSaveFileById(fileId) {
+async function codeSaveFileById(fileId) {
   const file = codeFiles.find(f => f.id === fileId);
   if (!file) return;
   const content = (file.model ? file.model.getValue() : file.content) || '';
   file.content = content;
-  api('/api/code/save', {
-    method: 'POST',
-    body: JSON.stringify({ filename: file.name, content }),
-  })
-    .then(r => { if (r.success) codeAiAppend('system', `💾 저장됨: ${r.path}`); else throw new Error(r.error); })
-    .catch(e => codeAiAppend('system', `⚠️ 저장 실패: ${e.message || e}`));
+  if (!localDirHandle) {
+    codeAiAppend('system', `⚠️ 폴더 미선택 — ${file.name} 저장 생략. 🖥️ 버튼으로 로컬 폴더를 선택해주세요.`);
+    return;
+  }
+  const ok = await localWriteFile(file.name, content);
+  if (ok) codeAiAppend('system', `💾 저장: ${file.name}`);
+  else codeAiAppend('system', `⚠️ 저장 실패: ${file.name}`);
 }
 
 // Finalize inline diff — clean up all decorations and state.
@@ -1921,17 +2603,6 @@ function finalizeInlineDiff(fileId, save) {
   renderCodeFileTabs();
 }
 
-// Backward-compatible wrappers
-function acceptCodeDiff() { acceptAllHunks(); }
-function rejectCodeDiff() { rejectAllHunks(); }
-
-function _showDiffUI(show) {
-  // Now a no-op for editor visibility — editor stays visible.
-  // Only toggles the diff bar.
-  const bar = document.getElementById('code-diff-bar');
-  if (bar) bar.style.display = show ? 'flex' : 'none';
-}
-
 function cleanupCodeDiff(fileId) {
   finalizeInlineDiff(fileId);
 }
@@ -1997,9 +2668,16 @@ 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 data = await api('/api/code/files');
-    const files = data.files || [];
+    const files = await localListFiles(localDirHandle, '');
     if (!files.length) {
       tree.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:11px;text-align:center">파일 없음<br><small>+ 버튼으로 추가</small></div>';
       return;
@@ -2008,38 +2686,99 @@ async function codeSbRefresh() {
       go:'🔵', rs:'🦀', java:'☕', html:'🌐', css:'🎨', sh:'💻', bash:'💻',
       kt:'🎯', swift:'🍎', rb:'💎', php:'🐘', sql:'🗃️', md:'📝', json:'📋',
       yaml:'📋', yml:'📋', txt:'📄' };
-    tree.innerHTML = files.map(f => {
-      const ext = f.split('.').pop().toLowerCase();
-      const icon = extIcon[ext] || '📄';
-      const safe = f.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
-      return `<div class="csb-file-item" onclick="csbOpenFile('${safe}')">
-        <span style="flex-shrink:0">${icon}</span>
-        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">${escHtml(f)}</span>
-        <button class="csb-del" onclick="csbDeleteFile('${safe}',event)" title="삭제">✕</button>
-      </div>`;
-    }).join('');
+
+    // 트리 노드 구조 빌드
+    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
+    }
+
+    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" style="padding-left:${indent+8}px;font-weight:600;color:var(--muted)" onclick="csbToggleDir('${dirId}')">
+          <span id="${dirId}_arrow" style="font-size:9px;transition:.15s;flex-shrink:0">${isOpen ? '▼' : '▶'}</span><span style="flex-shrink:0">📂</span>
+          <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">${escHtml(name)}/</span>
+          <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" style="padding-left:${indent+8}px" onclick="csbOpenFile('${safe}')">
+          <span style="flex-shrink:0">${icon}</span>
+          <span 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(root, 0, '');
   } 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 data = await api(`/api/code/file?name=${encodeURIComponent(filename)}`);
-    if (data.success) {
-      const existing = codeFiles.find(f => f.name === filename);
-      if (existing) switchCodeFile(existing.id);
-      else codeNewFile(filename, data.content);
-    }
+    const content = await localReadFile(filename);
+    if (content === null) return;
+    const existing = codeFiles.find(f => f.name === filename);
+    if (existing) switchCodeFile(existing.id);
+    else codeNewFile(filename, content);
   } catch {}
 }
 
 async function csbDeleteFile(filename, ev) {
   ev.stopPropagation();
-  if (!confirm(`"${filename}" 삭제할까요?`)) return;
+  if (!localDirHandle || !confirm(`"${filename}" 삭제할까요?`)) return;
   try {
-    const r = await api(`/api/code/file?name=${encodeURIComponent(filename)}`, { method: 'DELETE' });
-    if (r.success) {
+    const ok = await localDeleteFile(filename);
+    if (ok) {
       const existing = codeFiles.find(f => f.name === filename);
       if (existing) closeCodeFile(existing.id);
       codeSbRefresh();
@@ -2047,6 +2786,25 @@ async function csbDeleteFile(filename, ev) {
   } 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);
+  }
+}
+
 async function csbLoadModels() {
   const sel = document.getElementById('csb-model-select');
   if (!sel) return;
@@ -2091,9 +2849,121 @@ function csbWordWrap(checked) {
   localStorage.setItem('codeEditorWordWrap', checked ? '1' : '0');
 }
 
+const CODE_THEME_GROUPS = [
+  { icon: '🌙', label: '다크', themes: [
+    { v: 'vs-dark',        label: 'VS Dark',       bg: '#1e1e1e' },
+    { v: 'one-dark',       label: 'One Dark',      bg: '#282c34' },
+    { v: 'nord',           label: 'Nord',          bg: '#2e3440' },
+    { v: 'github-dark',    label: 'GitHub Dark',   bg: '#0d1117' },
+    { v: 'tomorrow-night', label: 'Tomorrow Night',bg: '#1d1f21' },
+    { v: 'hc-black',       label: 'High Contrast', bg: '#000000' },
+  ]},
+  { icon: '☀️', label: '라이트', themes: [
+    { v: 'vs',           label: 'VS Light',    bg: '#ffffff' },
+    { v: 'github-light', label: 'GitHub Light',bg: '#f6f8fa' },
+  ]},
+  { icon: '🌿', label: '웜', themes: [
+    { v: 'monokai',         label: 'Monokai',        bg: '#272822' },
+    { v: 'dracula',         label: 'Dracula',        bg: '#282a36' },
+    { v: 'solarized-dark',  label: 'Solarized Dark', bg: '#002b36' },
+    { v: 'solarized-light', label: 'Solarized Light',bg: '#fdf6e3' },
+  ]},
+];
+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) monaco.editor.setTheme(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) {
@@ -2115,7 +2985,6 @@ function csbRestoreSettings() {
   const mm = localStorage.getItem('codeEditorMinimap');
   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 (th) document.getElementById('csb-theme').value = th;
   if (ts) document.getElementById('csb-tabsize').value = ts;
   if (mm !== null) document.getElementById('csb-minimap').checked = mm === '1';
   if (monacoEditor) monacoEditor.updateOptions({
@@ -2124,7 +2993,12 @@ function csbRestoreSettings() {
     tabSize: ts ? parseInt(ts) : 2,
     minimap: { enabled: mm !== '0' },
   });
-  if (th && window.monaco) monaco.editor.setTheme(th);
+  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 ───────────────────────────────────────────────────
@@ -2152,8 +3026,7 @@ async function codeRefreshFolder() {
   if (!list) return;
   list.innerHTML = '<div style="padding:8px 12px;color:var(--muted);font-size:11px">로딩 중...</div>';
   try {
-    const data = await api('/api/code/files');
-    const files = data.files || [];
+    const files = localDirHandle ? await localListFiles(localDirHandle, '') : [];
     if (!files.length) {
       list.innerHTML = '<div style="padding:8px 12px;color:var(--muted);font-size:11px">파일 없음</div>';
       return;
@@ -2179,13 +3052,13 @@ async function codeRefreshFolder() {
 }
 
 async function codeOpenFromFolder(filename) {
+  if (!localDirHandle) return;
   try {
-    const data = await api(`/api/code/file?name=${encodeURIComponent(filename)}`);
-    if (data.success) {
-      const existing = codeFiles.find(f => f.name === filename);
-      if (existing) { switchCodeFile(existing.id); }
-      else { codeNewFile(filename, data.content); }
-    }
+    const content = await localReadFile(filename);
+    if (content === null) return;
+    const existing = codeFiles.find(f => f.name === filename);
+    if (existing) switchCodeFile(existing.id);
+    else codeNewFile(filename, content);
   } catch {}
   const dd = document.getElementById('code-folder-dropdown');
   if (dd) dd.style.display = 'none';
@@ -2194,16 +3067,13 @@ async function codeOpenFromFolder(filename) {
 
 async function codeDeleteFromFolder(filename, ev) {
   ev.stopPropagation();
-  if (!confirm(`"${filename}" 파일을 삭제할까요?`)) return;
+  if (!localDirHandle || !confirm(`"${filename}" 파일을 삭제할까요?`)) return;
   try {
-    const r = await api(`/api/code/file?name=${encodeURIComponent(filename)}`, { method: 'DELETE' });
-    if (r.success) {
-      // 열려있는 탭도 닫기
+    const ok = await localDeleteFile(filename);
+    if (ok) {
       const existing = codeFiles.find(f => f.name === filename);
       if (existing) closeCodeFile(existing.id);
       codeRefreshFolder();
-    } else {
-      alert('삭제 실패: ' + (r.error || ''));
     }
   } catch(e) {
     alert('삭제 실패: ' + e.message);
@@ -2272,12 +3142,16 @@ function setupCodeVResize() {
 // In the main app these are triggered by setMode('code') / setSidebarTab('code').
 // Here we run them once the DOM is ready since this page IS the code view.
 (function bootCodePage() {
-  function boot() {
+  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 { codeSbRefresh(); } catch (e) {}
+    try { companionConnect(); } catch (e) {}
   }
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot, { once: true });
   else boot();