chocomint 1.0.0

data/public/edit/edit.js

@@ -0,0 +1,2137 @@
+let currentPath = null; // アクティブなタブのパス (未選択時 null)。既存コードとの互換のため維持する。
+// 新規作成の基準ディレクトリ。ファイル選択時はその親、ディレクトリクリック時はそのディレクトリ自体 ('' はルート)。
+let selectedDir = '';
+let editor = null;
+let isDirty = false; // 現在開いているファイルに未保存の変更があるか
+let suppressChangeEvent = false; // setValue によるプログラム的な変更中は onDidChangeModelContent を無視する
+let autoSaveTimer = null;
+const AUTO_SAVE_DELAY_MS = 1500;
+
+// ---- タブ管理 ----
+// Monaco エディタは 1 インスタンスだけ使い回し、開いているファイルごとに ITextModel を
+// 1 つ保持する。タブ切り替えは editor.setModel() でモデルを差し替えるだけ。モデルには
+// 内容・undo 履歴・カーソル/スクロール位置が紐づくため、切り替えても状態が保たれる。
+// tab = { path, model, viewState, dirty, binary }
+const openTabs = [];
+function findTab(path) { return openTabs.find(t => t.path === path); }
+
+// 自動保存の ON/OFF。localStorage に永続化し、リロード後も維持する (既定: ON)。
+const AUTOSAVE_PREF_KEY = 'chocomint.edit.autosave';
+let autoSaveEnabled = localStorage.getItem(AUTOSAVE_PREF_KEY) !== 'off';
+
+// 保存状態インジケーターの表示を切り替える。
+// state: '' (非表示) | 'saving' | 'saved' | 'error'
+let savedFlashTimer = null;
+function setSaveStatus(state, message) {
+  const el = document.getElementById('save-status');
+  if (!el) return;
+  if (savedFlashTimer) { clearTimeout(savedFlashTimer); savedFlashTimer = null; }
+  el.className = 'save-status' + (state ? ' ' + state : '');
+  const label = message || {
+    saving: '保存中…', saved: '✓ 保存しました', error: '⚠ 保存に失敗'
+  }[state] || '';
+  el.textContent = label;
+  // 「保存しました」は主張しすぎないよう数秒で自然に消す。
+  if (state === 'saved') {
+    savedFlashTimer = setTimeout(() => {
+      if (!isDirty) { el.className = 'save-status'; el.textContent = ''; }
+    }, 2000);
+  }
+}
+
+// dirty 状態を反映する。表示はアクティブタブの●で行うので、ここではフラグと
+// タブ状態の更新だけを担う。
+function setDirty(v) {
+  isDirty = v;
+  const tab = currentPath ? findTab(currentPath) : null;
+  if (tab) { tab.dirty = v; renderEditorTabs(); }
+  // 未保存に変わったら、直前の「保存しました」表示は用済みなので消す。
+  if (v) setSaveStatus('');
+}
+
+// 現在のファイル名/パスの表示先はエディタのタブなので、ヘッダー側では何もしない。
+// (呼び出し側の互換のために関数は残す。)
+function setPathLabel(_text) {}
+
+// 編集のたびに呼ばれ、一定時間操作が止まったら自動保存する (debounce)。
+// 自動保存が OFF のときは何もしない (未保存のまま。手動 Ctrl+S で保存)。
+function scheduleAutoSave() {
+  if (!autoSaveEnabled) return;
+  if (autoSaveTimer) clearTimeout(autoSaveTimer);
+  autoSaveTimer = setTimeout(() => { autoSaveTimer = null; saveCurrent({ auto: true }); }, AUTO_SAVE_DELAY_MS);
+}
+
+// 自動保存の ON/OFF を切り替える (メニューのチェック表示と localStorage を更新)。
+// ON に切り替えたとき未保存の変更があれば、すぐ保存をスケジュールする。
+function setAutoSave(enabled) {
+  autoSaveEnabled = enabled;
+  localStorage.setItem(AUTOSAVE_PREF_KEY, enabled ? 'on' : 'off');
+  const btn = document.getElementById('btn-autosave');
+  if (btn) {
+    btn.setAttribute('aria-checked', String(enabled));
+    btn.classList.toggle('checked', enabled);
+  }
+  if (enabled && isDirty) scheduleAutoSave();
+}
+
+// setValue でエディタ内容をプログラム的に書き換える (dirty イベントを発生させない)。
+function setEditorValue(value) {
+  suppressChangeEvent = true;
+  editor.setValue(value);
+  suppressChangeEvent = false;
+}
+
+// ---- Monaco 読み込み (AMD loader) ----
+const loaderScript = document.createElement('script');
+loaderScript.src = '/edit/assets/monaco/vs/loader.js';
+loaderScript.onload = () => {
+  require.config({ paths: { vs: '/edit/assets/monaco/vs' } });
+  require(['vs/editor/editor.main'], () => {
+    editor = monaco.editor.create(document.getElementById('editor'), {
+      // model は開いたファイルごとに差し替える。初期状態はタブ無し (プレースホルダー表示)。
+      model: null, theme: 'vs',
+      automaticLayout: true, minimap: { enabled: false }
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, saveCurrent);
+    editor.onDidChangeModelContent(() => {
+      if (suppressChangeEvent) return; // setValue によるプログラム的な変更は無視する
+      setDirty(true);
+      scheduleAutoSave();
+    });
+    document.getElementById('app').classList.add('no-tabs');
+  });
+};
+document.head.appendChild(loaderScript);
+
+// ---- 言語推定 ----
+function langOf(path) {
+  const ext = (path.split('.').pop() || '').toLowerCase();
+  const map = { rb:'ruby', js:'javascript', ts:'typescript', py:'python',
+    json:'json', md:'markdown', html:'html', css:'css', yml:'yaml', yaml:'yaml',
+    sh:'shell', txt:'plaintext', c:'c', cpp:'cpp', go:'go', rs:'rust' };
+  return map[ext] || 'plaintext';
+}
+
+// ---- ファイル一覧 (ディレクトリを入れ子ツリーで表示) ----
+let openDirs = new Set(); // 展開中ディレクトリの相対パス (再描画で状態維持)
+
+// Ctrl/Shift 修飾クリックによる複数選択 (ファイル/ディレクトリ問わず相対パスを保持)。
+// 通常クリックでは常に空になり、単一選択 (currentPath / selectedDir) のみで動作する。
+let selectedPaths = new Set();
+// Shift 範囲選択の起点 (直前に通常/Ctrl/Shift クリックした行)。
+let lastClickedPath = null;
+
+// フラットな相対パス配列を { dirs, files } のツリーに組み立てる。
+// emptyDirPaths: 中身が空 (または空ディレクトリのみ) のディレクトリの相対パス。
+// ファイルパスからは辿り着けないため、明示的にノードを掘る。
+function buildTree(paths, emptyDirPaths) {
+  const root = { dirs: new Map(), files: [] };
+  const ensureDir = (path) => {
+    const parts = path.split('/');
+    let node = root;
+    parts.forEach(part => {
+      if (!node.dirs.has(part)) node.dirs.set(part, { dirs: new Map(), files: [] });
+      node = node.dirs.get(part);
+    });
+  };
+  paths.forEach(p => {
+    const parts = p.split('/');
+    let node = root;
+    parts.forEach((part, i) => {
+      if (i === parts.length - 1) {
+        node.files.push({ name: part, path: p });
+      } else {
+        if (!node.dirs.has(part)) node.dirs.set(part, { dirs: new Map(), files: [] });
+        node = node.dirs.get(part);
+      }
+    });
+  });
+  (emptyDirPaths || []).forEach(ensureDir);
+  return root;
+}
+
+// 拡張子ごとのファイルアイコン (絵文字)。未知の拡張子は汎用の📄。
+const FILE_ICONS = {
+  py: '🐍',
+  rb: '💎',
+  js: '📜',
+  mjs: '📜',
+  cjs: '📜',
+  ts: '📘',
+  tsx: '📘',
+  jsx: '📜',
+  json: '🗂️',
+  html: '🌐',
+  htm: '🌐',
+  css: '🎨',
+  scss: '🎨',
+  sass: '🎨',
+  md: '📝',
+  markdown: '📝',
+  txt: '📄',
+  yml: '⚙️',
+  yaml: '⚙️',
+  toml: '⚙️',
+  ini: '⚙️',
+  env: '⚙️',
+  sh: '🐚',
+  bash: '🐚',
+  zsh: '🐚',
+  ps1: '💻',
+  bat: '💻',
+  cmd: '💻',
+  go: '🐹',
+  rs: '🦀',
+  java: '☕',
+  c: '🔧',
+  h: '🔧',
+  cpp: '🔧',
+  hpp: '🔧',
+  cs: '🔷',
+  php: '🐘',
+  sql: '🗃️',
+  png: '🖼️',
+  jpg: '🖼️',
+  jpeg: '🖼️',
+  gif: '🖼️',
+  svg: '🖼️',
+  ico: '🖼️',
+  pdf: '📕',
+  zip: '📦',
+  gz: '📦',
+  tar: '📦',
+  lock: '🔒',
+  gitignore: '🚫',
+  dockerfile: '🐳',
+};
+
+function fileIcon(name) {
+  const lower = name.toLowerCase();
+  if (lower === 'dockerfile') return FILE_ICONS.dockerfile;
+  if (lower === '.gitignore') return FILE_ICONS.gitignore;
+  const dot = lower.lastIndexOf('.');
+  if (dot === -1) return '📄';
+  const ext = lower.slice(dot + 1);
+  return FILE_ICONS[ext] || '📄';
+}
+
+// ツリーノードを <ul> にレンダリング。prefix は現ディレクトリの相対パス。
+function renderTree(node, prefix) {
+  const ul = document.createElement('ul');
+  // ディレクトリを名前順に先に、その後ファイルを名前順に並べる。
+  [...node.dirs.keys()].sort().forEach(name => {
+    const dirPath = prefix ? prefix + '/' + name : name;
+    const li = document.createElement('li');
+    li.className = 'dir';
+    li.dataset.path = dirPath;
+    if (openDirs.has(dirPath)) li.classList.add('open');
+    const row = document.createElement('div');
+    row.className = 'row';
+    row.innerHTML = '<span class="twist">▶</span><span class="icon">📁</span>';
+    row.appendChild(document.createTextNode(name));
+    row.onclick = (e) => {
+      if (e.ctrlKey || e.metaKey || e.shiftKey) { handleMultiSelectClick(e, dirPath); return; }
+      if (openDirs.has(dirPath)) openDirs.delete(dirPath);
+      else openDirs.add(dirPath);
+      li.classList.toggle('open');
+      selectDir(dirPath);
+    };
+    row.oncontextmenu = (e) => showContextMenu(e, dirPath, true);
+    li.appendChild(row);
+    li.appendChild(renderTree(node.dirs.get(name), dirPath));
+    ul.appendChild(li);
+  });
+  node.files.sort((a, b) => a.name.localeCompare(b.name)).forEach(f => {
+    const li = document.createElement('li');
+    li.className = 'file';
+    li.dataset.path = f.path;
+    const row = document.createElement('div');
+    row.className = 'row';
+    row.innerHTML = `<span class="twist"></span><span class="icon">${fileIcon(f.name)}</span>`;
+    row.appendChild(document.createTextNode(f.name));
+    row.onclick = (e) => {
+      if (e.ctrlKey || e.metaKey || e.shiftKey) { handleMultiSelectClick(e, f.path); return; }
+      openFile(f.path, li);
+    };
+    row.oncontextmenu = (e) => showContextMenu(e, f.path, false);
+    li.appendChild(row);
+    ul.appendChild(li);
+  });
+  return ul;
+}
+
+// ディレクトリを「新規作成の基準」として選択状態にする (ファイル選択のハイライトは解除する)。
+function selectDir(dirPath) {
+  selectedDir = dirPath;
+  clearMultiSelection();
+  lastClickedPath = dirPath;
+  document.querySelectorAll('#file-list li.file.active').forEach(x => x.classList.remove('active'));
+  document.querySelectorAll('#file-list li.dir.selected').forEach(x => x.classList.remove('selected'));
+  const container = document.getElementById('file-list');
+  const li = dirPath
+    ? container.querySelector('li.dir[data-path="' + cssEscape(dirPath) + '"]')
+    : null;
+  if (li) li.classList.add('selected');
+}
+
+// ---- 複数選択 (Ctrl/Shift クリック) ----
+
+// 現在ツリーに描画されている行を DOM 表示順 (= 見た目の上から下) でフラットに列挙する。
+// Shift 範囲選択の範囲決定に使う。折りたたまれた子は非表示だが DOM 上には存在するため、
+// 表示中の行だけに絞る (offsetParent で非表示判定)。
+function visibleTreeRows() {
+  return [...document.querySelectorAll('#file-list li[data-path]')]
+    .filter(li => li.offsetParent !== null)
+    .map(li => ({ path: li.dataset.path, isDir: li.classList.contains('dir') }));
+}
+
+function clearMultiSelection() {
+  if (selectedPaths.size === 0) return;
+  selectedPaths.clear();
+  document.querySelectorAll('#file-list li.multi-selected').forEach(x => x.classList.remove('multi-selected'));
+}
+
+function renderMultiSelection() {
+  const container = document.getElementById('file-list');
+  container.querySelectorAll('li.multi-selected').forEach(x => x.classList.remove('multi-selected'));
+  selectedPaths.forEach(p => {
+    const li = container.querySelector('li[data-path="' + cssEscape(p) + '"]');
+    if (li) li.classList.add('multi-selected');
+  });
+}
+
+// Ctrl(+Shift)/Shift 修飾クリックの複数選択処理。通常クリック (開く/展開) は呼び出し元で処理済み。
+function handleMultiSelectClick(e, path) {
+  // 複数選択中は「単一選択のハイライト」と混同しないよう解除する
+  // (currentPath/selectedDir 自体は新規作成の基準として保持し続ける)。
+  document.querySelectorAll('#file-list li.file.active').forEach(x => x.classList.remove('active'));
+  document.querySelectorAll('#file-list li.dir.selected').forEach(x => x.classList.remove('selected'));
+
+  if (e.shiftKey && lastClickedPath) {
+    const rows = visibleTreeRows();
+    const from = rows.findIndex(r => r.path === lastClickedPath);
+    const to = rows.findIndex(r => r.path === path);
+    if (from !== -1 && to !== -1) {
+      const [lo, hi] = from < to ? [from, to] : [to, from];
+      for (let i = lo; i <= hi; i++) selectedPaths.add(rows[i].path);
+    } else {
+      selectedPaths.add(path);
+    }
+  } else {
+    // Ctrl(+クリック): 個別トグル。
+    if (selectedPaths.has(path)) selectedPaths.delete(path);
+    else selectedPaths.add(path);
+    lastClickedPath = path;
+  }
+  renderMultiSelection();
+}
+
+// 直近に描画したファイル一覧の署名 (変化検知用)。ポーリングで無駄な再描画を避ける。
+let lastFilesSig = null;
+// workspace ルートの絶対パス (「絶対パスをコピー」用)。/edit/files のたびに更新する。
+let absRoot = null;
+
+// force=true なら署名が同じでも必ず再描画する (初回・手動更新用)。
+async function loadFiles(force) {
+  let data;
+  try {
+    const r = await fetch('/edit/files');
+    if (!r.ok) return;
+    data = await r.json();
+  } catch (e) { return; } // ポーリング中の一時的な失敗は無視する。
+
+  absRoot = data.abs_root || null;
+  const files = data.files || [];
+  const emptyDirs = data.dirs || [];
+  const sig = files.join('\n') + '\n\0\n' + emptyDirs.join('\n');
+  if (!force && sig === lastFilesSig) return; // 変化なし: 何もしない。
+  lastFilesSig = sig;
+
+  const container = document.getElementById('file-list');
+  container.innerHTML = '';
+  const tree = buildTree(files, emptyDirs);
+  container.appendChild(renderTree(tree, ''));
+  // 空白部の右クリックは workspace ルートへの新規作成メニューを出す。
+  container.oncontextmenu = (e) => {
+    if (e.target === container) showContextMenu(e, '', true);
+  };
+  // 再描画後も選択中ファイル/ディレクトリのハイライトを維持する。
+  if (currentPath) {
+    const active = container.querySelector('li.file[data-path="' + cssEscape(currentPath) + '"]');
+    if (active) active.classList.add('active');
+  } else if (selectedDir) {
+    const selected = container.querySelector('li.dir[data-path="' + cssEscape(selectedDir) + '"]');
+    if (selected) selected.classList.add('selected');
+  }
+  // 消えたパスは複数選択からも取り除いてから、残りのハイライトを復元する。
+  const stillExists = (p) => container.querySelector('li[data-path="' + cssEscape(p) + '"]') != null;
+  [...selectedPaths].forEach(p => { if (!stillExists(p)) selectedPaths.delete(p); });
+  renderMultiSelection();
+}
+
+// 作業ディレクトリの内容を定期的に監視し、変化があれば一覧を更新する。
+const FILES_POLL_MS = 3000;
+setInterval(() => loadFiles(false), FILES_POLL_MS);
+
+// querySelector 用に属性値をエスケープ (パスに特殊文字が入っても安全に)。
+function cssEscape(s) {
+  return (window.CSS && CSS.escape) ? CSS.escape(s) : s.replace(/["\\]/g, '\\$&');
+}
+
+// ---- 右クリックのコンテキストメニュー ----
+const ctxMenu = document.getElementById('ctx-menu');
+
+function hideContextMenu() { ctxMenu.classList.remove('open'); }
+document.addEventListener('click', hideContextMenu);
+document.addEventListener('scroll', hideContextMenu, true);
+window.addEventListener('blur', hideContextMenu);
+
+// path: 対象の相対パス ('' は workspace ルート)。isDir: ディレクトリか。
+function showContextMenu(e, path, isDir) {
+  e.preventDefault();
+  e.stopPropagation();
+  // 複数選択に含まれていない項目を右クリックしたときは、Explorer 等と同様その項目単独の選択に切り替える。
+  if (path !== '' && !selectedPaths.has(path)) clearMultiSelection();
+  // 新規作成は「対象がディレクトリならその中、ファイルなら同じ親」に作る。
+  const baseDir = isDir ? path : parentDir(path);
+
+  const items = [];
+  items.push({ label: '📄 新規ファイル…', fn: () => createEntry(baseDir, false) });
+  items.push({ label: '📁 新規ディレクトリ…', fn: () => createEntry(baseDir, true) });
+  if (path !== '') {
+    items.push({ sep: true });
+    // 右クリックした対象がすでに複数選択に含まれていれば選択全体をまとめて削除する
+    // (Explorer 等と同様、含まれていなければ単一選択扱いに切り替えてそれだけ削除する)。
+    const inMultiSelection = selectedPaths.has(path) && selectedPaths.size > 1;
+    if (!inMultiSelection) {
+      items.push({ label: '✏️ 名前を変更…', fn: () => renameEntry(path) });
+      items.push({ label: '📋 パスをコピー', fn: () => copyPath(path) });
+      items.push({ label: '📋 絶対パスをコピー', fn: () => copyPath(absRoot ? absRoot + '/' + path : path) });
+      items.push({ sep: true });
+    }
+    const deleteLabel = inMultiSelection ? `🗑 選択した ${selectedPaths.size} 件を削除` : '🗑 削除';
+    items.push({
+      label: deleteLabel, danger: true,
+      fn: () => inMultiSelection ? deleteSelectedPaths([...selectedPaths]) : deleteEntry(path, isDir)
+    });
+  }
+
+  ctxMenu.innerHTML = '';
+  items.forEach(it => {
+    if (it.sep) { const s = document.createElement('div'); s.className = 'sep'; ctxMenu.appendChild(s); return; }
+    const d = document.createElement('div');
+    d.className = 'item' + (it.danger ? ' danger' : '');
+    d.textContent = it.label;
+    d.onclick = (ev) => { ev.stopPropagation(); hideContextMenu(); it.fn(); };
+    ctxMenu.appendChild(d);
+  });
+
+  // 画面外にはみ出さない位置に表示する。
+  ctxMenu.classList.add('open');
+  const mw = ctxMenu.offsetWidth, mh = ctxMenu.offsetHeight;
+  const x = Math.min(e.clientX, window.innerWidth - mw - 4);
+  const y = Math.min(e.clientY, window.innerHeight - mh - 4);
+  ctxMenu.style.left = x + 'px';
+  ctxMenu.style.top = y + 'px';
+}
+
+function parentDir(path) {
+  const i = path.lastIndexOf('/');
+  return i < 0 ? '' : path.slice(0, i);
+}
+function joinPath(dir, name) { return dir ? dir + '/' + name : name; }
+
+async function fsPost(url, body) {
+  const r = await fetch(url, {
+    method: 'POST', headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body)
+  });
+  const data = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error(data.error || (r.status + ' error'));
+  return data;
+}
+
+// 新規ファイル/ディレクトリ作成。dir は作成先ディレクトリ (相対)。
+async function createEntry(dir, isDir) {
+  const name = await showPrompt(isDir ? '新規ディレクトリ' : '新規ファイル',
+                                isDir ? 'ディレクトリ名' : 'ファイル名');
+  if (!name) return;
+  const path = joinPath(dir, name.trim());
+  try {
+    await fsPost(isDir ? '/edit/fs/mkdir' : '/edit/fs/touch', { path });
+    if (dir) openDirs.add(dir); // 作成先を開いて見せる
+    await loadFiles();
+    if (!isDir) openFileByPath(path); // 作ったファイルを開く
+  } catch (err) { alert(err.message); }
+}
+
+async function renameEntry(path) {
+  const cur = path.split('/').pop();
+  const name = await showPrompt('名前を変更', '新しい名前', cur);
+  if (!name || name.trim() === cur) return;
+  const to = joinPath(parentDir(path), name.trim());
+  try {
+    await fsPost('/edit/fs/rename', { from: path, to });
+    // リネーム対象 (自身 or 配下) に該当する開きタブのパスを付け替える。
+    for (const tab of openTabs) {
+      if (tab.path === path) tab.path = to;
+      else if (tab.path.startsWith(path + '/')) tab.path = to + tab.path.slice(path.length);
+    }
+    if (currentPath === path) { currentPath = to; setPathLabel(to); }
+    else if (currentPath && currentPath.startsWith(path + '/')) {
+      currentPath = to + currentPath.slice(path.length); setPathLabel(currentPath);
+    }
+    if (selectedDir === path) selectedDir = to;
+    renderEditorTabs();
+    await loadFiles();
+  } catch (err) { alert(err.message); }
+}
+
+async function deleteEntry(path, isDir) {
+  const what = isDir ? 'ディレクトリ (中身ごと)' : 'ファイル';
+  const ok = await showConfirm('削除の確認', what + ' を削除しますか?\n' + path);
+  if (!ok) return;
+  try {
+    await fsPost('/edit/fs/delete', { path });
+    forgetDeletedPath(path);
+    await loadFiles();
+  } catch (err) { alert(err.message); }
+}
+
+// 削除されたパス (自身またはその配下) を参照しているタブと選択状態をクリアする。
+function forgetDeletedPath(path) {
+  // 削除対象 (自身 or 配下) に該当する開きタブをすべて閉じる。
+  const affected = openTabs.filter(t => t.path === path || t.path.startsWith(path + '/'));
+  for (const tab of affected) removeTab(tab.path);
+  if (selectedDir && (selectedDir === path || selectedDir.startsWith(path + '/'))) {
+    selectedDir = '';
+  }
+}
+
+// 確認なしでタブを閉じてモデルを破棄する (削除/リネームに伴う内部操作用)。
+// アクティブタブが消えた場合の後始末は closeTab と同様。
+function removeTab(path) {
+  const idx = openTabs.findIndex(t => t.path === path);
+  if (idx === -1) return;
+  const tab = openTabs[idx];
+  const wasActive = currentPath === path;
+  if (wasActive && autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
+  openTabs.splice(idx, 1);
+  tab.model.dispose();
+  if (wasActive) {
+    currentPath = null;
+    const next = openTabs[idx] || openTabs[idx - 1];
+    if (next) {
+      activateEditorTab(next.path);
+    } else {
+      editor.setModel(null);
+      document.getElementById('app').classList.add('no-tabs');
+      setPathLabel('(ファイル未選択)');
+      setDirty(false);
+      setSaveStatus('');
+      document.querySelectorAll('#file-list li.file.active').forEach(x => x.classList.remove('active'));
+    }
+  }
+  renderEditorTabs();
+}
+
+// 複数選択 (Ctrl/Shift クリックで集めたパス、または Delete キー押下時) を一括削除する。
+// 親子関係にあるパスが混在していても、それぞれ個別に削除を試みて構わない
+// (子が先に消えても親の rm_rf で結局まとめて消えるだけで、エラーにはならない)。
+async function deleteSelectedPaths(paths) {
+  if (paths.length === 0) return;
+  const label = paths.length === 1 ? paths[0] : `${paths.length} 件`;
+  const ok = await showConfirm('削除の確認', `選択した ${label} を削除しますか?\n` + paths.join('\n'));
+  if (!ok) return;
+
+  const errors = [];
+  for (const path of paths) {
+    try {
+      await fsPost('/edit/fs/delete', { path });
+      forgetDeletedPath(path);
+    } catch (err) {
+      errors.push(path + ': ' + err.message);
+    }
+  }
+  clearMultiSelection();
+  await loadFiles();
+  if (errors.length > 0) alert('一部の削除に失敗しました:\n' + errors.join('\n'));
+}
+
+async function copyPath(path) {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(path);
+    } else {
+      // 非セキュアコンテキスト用フォールバック。
+      const ta = document.createElement('textarea');
+      ta.value = path; document.body.appendChild(ta); ta.select();
+      document.execCommand('copy'); ta.remove();
+    }
+  } catch (err) { alert('コピーに失敗: ' + err.message); }
+}
+
+// 相対パスから該当する li を探して開く (一覧再描画後の選択用)。
+function openFileByPath(path) {
+  const li = document.querySelector('#file-list li.file[data-path="' + cssEscape(path) + '"]');
+  return openFile(path, li);
+}
+
+async function openFile(path, li) {
+  if (!editor) return;
+  // 既に開いているファイルなら、そのタブへ切り替えるだけ (再フェッチしない)。
+  if (findTab(path)) { activateEditorTab(path, li); return; }
+
+  const r = await fetch('/edit/file?path=' + encodeURIComponent(path));
+  const data = await r.json();
+  if (!r.ok) { alert(data.error || 'open failed'); return; }
+
+  // 新しいモデルを作ってタブに紐づける (以後このモデルが内容・undo 履歴を保持する)。
+  const binary = !!data.binary;
+  const content = binary
+    ? '（このファイルはバイナリのため表示・編集できません: ' + path + '）'
+    : (data.content || '');
+  const lang = binary ? 'plaintext' : langOf(path);
+  const model = monaco.editor.createModel(content, lang);
+  const tab = { path, model, viewState: null, dirty: false, binary };
+  openTabs.push(tab);
+  activateEditorTab(path, li);
+}
+
+// 指定パスのエディタタブをアクティブにする。Monaco のモデルを差し替え、ビュー状態を復元する。
+// (ターミナルタブ用の activateTab とは別関数なので名前を分けている)
+function activateEditorTab(path, li) {
+  const tab = findTab(path);
+  if (!tab || !editor) return;
+
+  // 別ファイルに切り替える前に、直前のファイルの保留中の自動保存があれば即座に確定し、
+  // 現在のビュー状態 (カーソル/スクロール位置) を退避しておく。
+  if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; if (isDirty) saveCurrent(); }
+  const prev = currentPath ? findTab(currentPath) : null;
+  if (prev && prev !== tab) prev.viewState = editor.saveViewState();
+
+  currentPath = path;
+  selectedDir = parentDir(path);
+  clearMultiSelection();
+  lastClickedPath = path;
+  setPathLabel(path);
+
+  document.getElementById('app').classList.remove('no-tabs');
+  suppressChangeEvent = true;
+  editor.setModel(tab.model);
+  suppressChangeEvent = false;
+  if (tab.viewState) editor.restoreViewState(tab.viewState);
+  editor.updateOptions({ readOnly: tab.binary });
+  editor.focus();
+
+  isDirty = tab.dirty;
+  setSaveStatus('');
+  renderEditorTabs();
+
+  // ファイル一覧側のハイライトを同期する (li が渡されなければパスから探す)。
+  if (!li) li = document.querySelector('#file-list li.file[data-path="' + cssEscape(path) + '"]');
+  document.querySelectorAll('#file-list li.file').forEach(x => x.classList.remove('active'));
+  document.querySelectorAll('#file-list li.dir.selected').forEach(x => x.classList.remove('selected'));
+  if (li) li.classList.add('active');
+}
+
+// タブを閉じる。未保存の変更があれば確認する。閉じた結果アクティブタブが消えたら
+// 隣のタブへ切り替える (無ければ空状態へ)。
+async function closeEditorTab(path) {
+  const tab = findTab(path);
+  if (!tab) return;
+  if (tab.dirty) {
+    const ok = await showConfirm('未保存の変更', tab.path + ' には未保存の変更があります。閉じますか?');
+    if (!ok) return;
+  }
+  removeTab(path);
+}
+
+// エディタのタブバーを再描画する。
+function renderEditorTabs() {
+  const bar = document.getElementById('editor-tabs');
+  if (!bar) return;
+  bar.innerHTML = '';
+  for (const tab of openTabs) {
+    const name = tab.path.split('/').pop();
+    const el = document.createElement('div');
+    el.className = 'editor-tab' + (tab.path === currentPath ? ' active' : '') + (tab.dirty ? ' dirty' : '');
+    el.title = tab.path;
+    el.setAttribute('role', 'tab');
+
+    const dot = document.createElement('span');
+    dot.className = 'editor-tab-dot';
+    dot.textContent = '●';
+
+    const nameEl = document.createElement('span');
+    nameEl.className = 'editor-tab-name';
+    nameEl.textContent = name;
+
+    const close = document.createElement('span');
+    close.className = 'editor-tab-close';
+    close.textContent = '×';
+    close.title = '閉じる';
+    close.onclick = (e) => { e.stopPropagation(); closeEditorTab(tab.path); };
+
+    el.appendChild(nameEl);
+    el.appendChild(dot);
+    el.appendChild(close);
+    el.onclick = () => activateEditorTab(tab.path);
+    // 中クリックでも閉じる (ブラウザのタブ操作に倣う)。
+    el.onauxclick = (e) => { if (e.button === 1) { e.preventDefault(); closeEditorTab(tab.path); } };
+    bar.appendChild(el);
+  }
+}
+
+// ---- 保存 ----
+// opts.auto=true は自動保存 (debounce 経由)。失敗しても alert で作業を止めず、
+// ヘッダーのインジケーターにエラーを出すだけにする。手動保存 (Ctrl+S / メニュー) は
+// 失敗を alert で明示する。
+async function saveCurrent(opts) {
+  const auto = opts && opts.auto;
+  if (!editor) return;
+  // ファイル未選択で手動保存 (Ctrl+S / メニュー) されたときは、保存先を尋ねる
+  // ダイアログを開く (自動保存はそもそも未選択時は動かないので auto では出さない)。
+  if (!currentPath) { if (!auto) openSaveAsDialog(); return; }
+  // バイナリ表示中 (readOnly) は保存しない (プレースホルダで上書きしないため)。
+  if (editor.getRawOptions && editor.getRawOptions().readOnly) return;
+  if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
+  const path = currentPath;
+  const content = editor.getValue();
+  setSaveStatus('saving');
+  let r, data;
+  try {
+    r = await fetch('/edit/save', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path, content })
+    });
+    data = await r.json();
+  } catch (err) {
+    // 通信自体の失敗 (サーバー停止など)。dirty のまま残し、後で再試行できるようにする。
+    setSaveStatus('error', '⚠ 保存できません (通信エラー)');
+    if (!auto) alert('保存に失敗しました: ' + err.message);
+    return;
+  }
+  if (!r.ok) {
+    setSaveStatus('error', '⚠ ' + (data.error || '保存に失敗'));
+    if (!auto) alert(data.error || 'save failed');
+    return;
+  }
+  // 保存中にファイルが切り替わっていなければ dirty 表示を解除し、保存済みを示す。
+  if (currentPath === path) { setDirty(false); setSaveStatus('saved'); }
+}
+
+// ---- 「名前を付けて保存」ダイアログ (ファイル未選択で Ctrl+S / 保存メニュー時) ----
+// ブラウザ内で完結する仮想ウィンドウ。タイトルバーをドラッグして移動できる。
+// 保存先は実際の作業ディレクトリ (path_guard の allowed_dirs) 基準の相対パス。
+const saveAsDialog = document.getElementById('save-as-dialog');
+const saveAsPathInput = document.getElementById('save-as-path');
+const saveAsError = document.getElementById('save-as-error');
+
+function openSaveAsDialog() {
+  saveAsError.textContent = '';
+  saveAsPathInput.value = '';
+  saveAsDialog.hidden = false;
+  // 中央寄せ (初回・毎回開くたびに)。ドラッグ後の位置は次回開いたときリセットされる。
+  const w = saveAsDialog.offsetWidth, h = saveAsDialog.offsetHeight;
+  saveAsDialog.style.left = Math.max(0, (window.innerWidth - w) / 2) + 'px';
+  saveAsDialog.style.top = Math.max(0, (window.innerHeight - h) / 3) + 'px';
+  saveAsPathInput.focus();
+}
+
+function closeSaveAsDialog() {
+  saveAsDialog.hidden = true;
+}
+
+async function confirmSaveAs() {
+  const path = saveAsPathInput.value.trim();
+  if (!path) { saveAsError.textContent = '保存先パスを入力してください'; return; }
+  const content = editor ? editor.getValue() : '';
+  saveAsError.textContent = '';
+  let r, data;
+  try {
+    r = await fetch('/edit/save', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path, content })
+    });
+    data = await r.json().catch(() => ({}));
+  } catch (err) {
+    saveAsError.textContent = '保存できません (通信エラー): ' + err.message;
+    return;
+  }
+  if (!r.ok) {
+    saveAsError.textContent = data.error || '保存に失敗しました';
+    return;
+  }
+  closeSaveAsDialog();
+  await loadFiles(true);
+  // 新規タブとして開く (currentPath/パス表示/dirty は openFile 内で設定される)。
+  await openFileByPath(path);
+  setSaveStatus('saved');
+}
+
+document.getElementById('save-as-ok').onclick = confirmSaveAs;
+document.getElementById('save-as-cancel').onclick = closeSaveAsDialog;
+document.getElementById('save-as-close').onclick = closeSaveAsDialog;
+saveAsPathInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') { e.preventDefault(); confirmSaveAs(); }
+  else if (e.key === 'Escape') { e.preventDefault(); closeSaveAsDialog(); }
+});
+
+// タイトルバーのドラッグで仮想ウィンドウを移動する (initResizers と同様のドラッグ実装)。
+function initDraggableWindow(win) {
+  const bar = win.querySelector('.vwin-titlebar');
+  bar.addEventListener('mousedown', (e) => {
+    if (e.target.closest('.vwin-close')) return;
+    e.preventDefault();
+    const startX = e.clientX, startY = e.clientY;
+    const rect = win.getBoundingClientRect();
+    const startLeft = rect.left, startTop = rect.top;
+    document.body.style.userSelect = 'none';
+    const move = (ev) => {
+      const nx = clamp(startLeft + (ev.clientX - startX), 0, window.innerWidth - win.offsetWidth);
+      const ny = clamp(startTop + (ev.clientY - startY), 0, window.innerHeight - win.offsetHeight);
+      win.style.left = nx + 'px';
+      win.style.top = ny + 'px';
+    };
+    const up = () => {
+      document.body.style.userSelect = '';
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  });
+}
+function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+initDraggableWindow(saveAsDialog);
+
+// 仮想ウィンドウを画面中央寄りに配置して表示する (毎回開くたびに位置をリセット)。
+function centerWindow(win) {
+  win.hidden = false;
+  const w = win.offsetWidth, h = win.offsetHeight;
+  win.style.left = Math.max(0, (window.innerWidth - w) / 2) + 'px';
+  win.style.top = Math.max(0, (window.innerHeight - h) / 3) + 'px';
+}
+
+// ---- 汎用の入力ダイアログ (新規作成 / 名前変更で共用)。Promise<string|null> を返す。 ----
+const promptDialog = document.getElementById('prompt-dialog');
+const promptTitle = document.getElementById('prompt-title');
+const promptLabel = document.getElementById('prompt-label');
+const promptInput = document.getElementById('prompt-input');
+const promptError = document.getElementById('prompt-error');
+let promptResolve = null;
+
+function showPrompt(title, label, defaultValue) {
+  promptTitle.textContent = title;
+  promptLabel.textContent = label;
+  promptInput.value = defaultValue || '';
+  promptError.textContent = '';
+  centerWindow(promptDialog);
+  promptInput.focus();
+  promptInput.select();
+  return new Promise(resolve => { promptResolve = resolve; });
+}
+
+function closePrompt(result) {
+  promptDialog.hidden = true;
+  if (promptResolve) { const r = promptResolve; promptResolve = null; r(result); }
+}
+
+document.getElementById('prompt-ok').onclick = () => {
+  const v = promptInput.value.trim();
+  if (!v) { promptError.textContent = '入力してください'; return; }
+  closePrompt(v);
+};
+document.getElementById('prompt-cancel').onclick = () => closePrompt(null);
+document.getElementById('prompt-close').onclick = () => closePrompt(null);
+promptInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') { e.preventDefault(); document.getElementById('prompt-ok').click(); }
+  else if (e.key === 'Escape') { e.preventDefault(); closePrompt(null); }
+});
+initDraggableWindow(promptDialog);
+
+// ---- 汎用の確認ダイアログ (削除確認で使用)。Promise<boolean> を返す。 ----
+const confirmDialog = document.getElementById('confirm-dialog');
+const confirmTitle = document.getElementById('confirm-title');
+const confirmMessage = document.getElementById('confirm-message');
+let confirmResolve = null;
+
+function showConfirm(title, message) {
+  confirmTitle.textContent = title;
+  confirmMessage.textContent = message;
+  centerWindow(confirmDialog);
+  return new Promise(resolve => { confirmResolve = resolve; });
+}
+
+function closeConfirm(result) {
+  confirmDialog.hidden = true;
+  if (confirmResolve) { const r = confirmResolve; confirmResolve = null; r(result); }
+}
+
+document.getElementById('confirm-ok').onclick = () => closeConfirm(true);
+document.getElementById('confirm-cancel').onclick = () => closeConfirm(false);
+document.getElementById('confirm-close').onclick = () => closeConfirm(false);
+initDraggableWindow(confirmDialog);
+
+// ---- 汎用のエラーダイアログ (操作失敗を知らせる。alert の代わりに使う)。 ----
+const errorDialog = document.getElementById('error-dialog');
+const errorMessage = document.getElementById('error-message');
+
+function showError(message, title) {
+  document.getElementById('error-title').textContent = title || 'エラー';
+  errorMessage.textContent = message;
+  centerWindow(errorDialog);
+}
+
+function closeErrorDialog() { errorDialog.hidden = true; }
+
+document.getElementById('error-ok').onclick = closeErrorDialog;
+document.getElementById('error-close').onclick = closeErrorDialog;
+initDraggableWindow(errorDialog);
+
+document.getElementById('btn-save').onclick = () => { closeAllMenus(); saveCurrent(); };
+document.getElementById('btn-autosave').onclick = () => { closeAllMenus(); setAutoSave(!autoSaveEnabled); };
+document.getElementById('btn-reload').onclick = () => loadFiles(true);
+document.getElementById('btn-new-file').onclick = () => createEntry(selectedDir, false);
+document.getElementById('btn-new-dir').onclick = () => createEntry(selectedDir, true);
+document.getElementById('btn-menu-new-file').onclick = () => { closeAllMenus(); createEntry(selectedDir, false); };
+document.getElementById('btn-menu-new-dir').onclick = () => { closeAllMenus(); createEntry(selectedDir, true); };
+
+// WORKING DIRECTORY で選択中のファイル/ディレクトリを Delete キーで削除する。
+// テキスト入力欄・Monaco エディタにフォーカスがあるときは、通常の文字削除を優先し何もしない。
+document.addEventListener('keydown', (e) => {
+  if (e.key !== 'Delete') return;
+  const active = document.activeElement;
+  const tag = active && active.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || (active && active.isContentEditable)) return;
+  if (active && active.closest('.monaco-editor')) return;
+
+  let paths = selectedPaths.size > 0 ? [...selectedPaths] : [];
+  if (paths.length === 0 && currentPath) paths = [currentPath];
+  else if (paths.length === 0 && selectedDir) paths = [selectedDir];
+  if (paths.length === 0) return;
+  e.preventDefault();
+  deleteSelectedPaths(paths);
+});
+
+// ---- メニューバー (ファイル/編集/…/ヘルプ のドロップダウン) ----
+let closeAllMenus = () => {}; // initMenu で実装を差し替える (他関数から閉じられるように)
+
+function initMenu() {
+  const items = [...document.querySelectorAll('#menu .menu-item')];
+
+  closeAllMenus = () => items.forEach(it => it.classList.remove('open'));
+
+  items.forEach(item => {
+    const btn = item.querySelector('.menu-btn');
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const wasOpen = item.classList.contains('open');
+      closeAllMenus();
+      if (!wasOpen) item.classList.add('open');
+    });
+    // メニューを開いた状態で隣に移ると、クリックせずとも追従して切り替わる (VSCode 同様の挙動)。
+    item.addEventListener('mouseenter', () => {
+      if (items.some(it => it.classList.contains('open'))) {
+        closeAllMenus();
+        item.classList.add('open');
+      }
+    });
+    // ドロップダウン内のクリックはメニューを閉じてから処理させる。
+    item.querySelector('.menu-dropdown').addEventListener('click', () => closeAllMenus());
+  });
+
+  document.addEventListener('click', closeAllMenus);
+  window.addEventListener('blur', closeAllMenus);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeAllMenus(); });
+}
+
+// ---- 「表示」メニュー: パネル (WORKING DIRECTORY / ターミナル / AI チャット) の表示切替 ----
+// 状態は localStorage に永続化し、リロード後も維持する (既定: すべて表示)。
+const PANEL_VIEW_PREFS = [
+  { key: 'chocomint.edit.view.files', cls: 'hide-files', btnId: 'btn-view-files' },
+  { key: 'chocomint.edit.view.console', cls: 'hide-console', btnId: 'btn-view-console' },
+  { key: 'chocomint.edit.view.chat', cls: 'hide-chat', btnId: 'btn-view-chat' }
+];
+
+function setPanelVisible(pref, visible) {
+  const app = document.getElementById('app');
+  localStorage.setItem(pref.key, visible ? 'on' : 'off');
+  app.classList.toggle(pref.cls, !visible);
+  const btn = document.getElementById(pref.btnId);
+  if (btn) {
+    btn.setAttribute('aria-checked', String(visible));
+    btn.classList.toggle('checked', visible);
+  }
+  // 非表示パネル分をエディタ/ターミナルが埋めるため、レイアウト再計算が必要。
+  if (editor) editor.layout();
+  if (termFit) termFit();
+}
+
+function initPanelView() {
+  PANEL_VIEW_PREFS.forEach(pref => {
+    const visible = localStorage.getItem(pref.key) !== 'off';
+    setPanelVisible(pref, visible);
+    const btn = document.getElementById(pref.btnId);
+    if (btn) {
+      btn.onclick = () => {
+        closeAllMenus();
+        const isHidden = document.getElementById('app').classList.contains(pref.cls);
+        setPanelVisible(pref, isHidden);
+      };
+    }
+  });
+}
+
+// ---- WORKING DIRECTORY (ファイルツリー) と ソース管理 (Git パネル) の排他表示 ----
+// 「表示」メニューの 2 項目は排他: 一方を ON にするともう一方は自動で OFF になる。
+// #app に show-git を付けている間だけ Git パネルを表示する (CSS 側で切り替え)。
+const PANEL_VIEW_TAB_KEY = 'chocomint.edit.view.filesTab'; // 'files' | 'git'
+
+function setFilesTab(tab) {
+  const app = document.getElementById('app');
+  localStorage.setItem(PANEL_VIEW_TAB_KEY, tab);
+  app.classList.toggle('show-git', tab === 'git');
+
+  const filesBtn = document.getElementById('btn-view-files');
+  const gitBtn = document.getElementById('btn-view-git');
+  filesBtn.setAttribute('aria-checked', String(tab === 'files'));
+  filesBtn.classList.toggle('checked', tab === 'files');
+  gitBtn.setAttribute('aria-checked', String(tab === 'git'));
+  gitBtn.classList.toggle('checked', tab === 'git');
+
+  if (tab === 'git') refreshGitPanel();
+}
+
+function initFilesTab() {
+  const saved = localStorage.getItem(PANEL_VIEW_TAB_KEY);
+  setFilesTab(saved === 'git' ? 'git' : 'files');
+
+  document.getElementById('btn-view-files').onclick = () => {
+    closeAllMenus();
+    // WORKING DIRECTORY 側は既存の表示/非表示トグルの意味も兼ねる。
+    // 現在 Git パネル表示中ならツリー表示に戻すだけ、既にツリー表示中なら
+    // 従来どおりパネル自体の表示/非表示を切り替える。
+    const app = document.getElementById('app');
+    if (app.classList.contains('show-git')) { setFilesTab('files'); return; }
+    const pref = PANEL_VIEW_PREFS.find(p => p.btnId === 'btn-view-files');
+    const isHidden = app.classList.contains(pref.cls);
+    setPanelVisible(pref, isHidden);
+  };
+  document.getElementById('btn-view-git').onclick = () => {
+    closeAllMenus();
+    const app = document.getElementById('app');
+    const filesPref = PANEL_VIEW_PREFS.find(p => p.btnId === 'btn-view-files');
+    // パネル自体が非表示なら先に表示する (中身が見えない状態を避ける)。
+    if (app.classList.contains(filesPref.cls)) setPanelVisible(filesPref, true);
+    setFilesTab(app.classList.contains('show-git') ? 'files' : 'git');
+  };
+}
+
+// ---- AI チャット ----
+const chatLog = document.getElementById('chat-log');
+const chatForm = document.getElementById('chat-form');
+const chatInput = document.getElementById('chat-input');
+const chatSend = document.getElementById('chat-send');
+const spinnerEl = chatSend.querySelector('.send-spinner');
+
+// 点字ブロックによる回転スピナー。busy の間だけ、登録された全要素を同期して回す。
+const SPINNER_FRAMES = ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏'];
+let spinnerTimer = null;
+const spinnerTargets = new Set([spinnerEl]);
+function startSpinner() {
+  let i = 0;
+  spinnerTargets.forEach(el => { el.textContent = SPINNER_FRAMES[0]; });
+  spinnerTimer = setInterval(() => {
+    i = (i + 1) % SPINNER_FRAMES.length;
+    spinnerTargets.forEach(el => { el.textContent = SPINNER_FRAMES[i]; });
+  }, 80);
+}
+function stopSpinner() {
+  if (spinnerTimer) { clearInterval(spinnerTimer); spinnerTimer = null; }
+}
+
+// 「(点字スピナー) AI 考え中...」の pending 行を作る。スピナー部分は回転対象に登録。
+// ツール実行の進捗行 (SSE) を差し込めるよう、行を追加する API を返り値に生やす。
+function addPendingMsg() {
+  const div = document.createElement('div');
+  div.className = 'msg ai';
+  const b = document.createElement('div');
+  b.className = 'bubble';
+  const head = document.createElement('div');
+  head.className = 'pending-head';
+  const sp = document.createElement('span');
+  sp.className = 'pending-spinner';
+  sp.textContent = SPINNER_FRAMES[0];
+  head.appendChild(sp);
+  head.appendChild(document.createTextNode(' AI 考え中...'));
+  b.appendChild(head);
+  // ツール実行の進捗行を並べるコンテナ (SSE の tool_start / tool_done で更新)。
+  const tools = document.createElement('div');
+  tools.className = 'pending-tools';
+  b.appendChild(tools);
+  div.appendChild(b);
+  chatLog.appendChild(div);
+  chatLog.scrollTop = chatLog.scrollHeight;
+  spinnerTargets.add(sp);
+  // remove 時に回転対象からも外す (ツール行のスピナーも含めて)。
+  const origRemove = div.remove.bind(div);
+  div.remove = () => {
+    spinnerTargets.delete(sp);
+    tools.querySelectorAll('.pending-spinner').forEach(s => spinnerTargets.delete(s));
+    origRemove();
+  };
+  div._toolsEl = tools;
+  return div;
+}
+
+// pending 行に「実行中のツール」を追加する。step 番号で行を識別し、
+// 実行中は点字スピナー、完了後は ✓ / ✕ に差し替える。
+function pendingToolStart(pending, ev) {
+  const tools = pending._toolsEl;
+  if (!tools) return;
+  let row = tools.querySelector('.ptool[data-step="' + ev.step + '"]');
+  if (!row) {
+    row = document.createElement('div');
+    row.className = 'ptool';
+    row.dataset.step = ev.step;
+    const mark = document.createElement('span');
+    mark.className = 'ptool-mark pending-spinner';
+    mark.textContent = SPINNER_FRAMES[0];
+    const label = document.createElement('span');
+    label.className = 'ptool-label';
+    const tgt = document.createElement('code');
+    tgt.className = 'ptool-target';
+    row.appendChild(mark);
+    row.appendChild(label);
+    row.appendChild(tgt);
+    tools.appendChild(row);
+    spinnerTargets.add(mark); // 実行中は回転対象に加える。
+  }
+  row.querySelector('.ptool-label').textContent = ev.label || ev.tool;
+  row.querySelector('.ptool-target').textContent = ev.target || '';
+  chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+// 実行中ツール行を完了状態 (✓ / ✕) に切り替え、スピナーを止める。
+// 実行結果 (output) があれば、その行の下に等幅ブロックで都度表示する。
+function pendingToolDone(pending, ev) {
+  const tools = pending._toolsEl;
+  if (!tools) return;
+  const row = tools.querySelector('.ptool[data-step="' + ev.step + '"]');
+  if (!row) return;
+  const mark = row.querySelector('.ptool-mark');
+  spinnerTargets.delete(mark);
+  mark.classList.remove('pending-spinner');
+  const ok = !!ev.ok;
+  mark.classList.add(ok ? 'ok' : 'ng');
+  mark.textContent = ok ? '✓' : ('✕' + (ev.exit_code ? ' (' + ev.exit_code + ')' : ''));
+
+  // ツール出力を行の直後に表示 (renderStep の .out と同じ体裁)。
+  let out = row.nextElementSibling;
+  if (!out || !out.classList.contains('ptool-out')) {
+    out = document.createElement('code');
+    out.className = 'ptool-out';
+    row.after(out);
+  }
+  if (ev.output && String(ev.output).trim() !== '') {
+    out.textContent = ev.output;
+    out.classList.remove('empty');
+  } else {
+    out.textContent = '(出力なし)';
+    out.classList.add('empty');
+  }
+  chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+// 軽量 Markdown → HTML 変換 (外部ライブラリ非依存 / オフライン用)。
+// XSS 防止のため、まず全体を HTML エスケープしてから Markdown 記法だけを HTML 化する。
+function escapeHtml(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function renderMarkdown(src) {
+  const codeBlocks = [];
+  // ``` フェンスコードブロックを先に退避 (中身は変換しない)。
+  let text = escapeHtml(src).replace(/```([\s\S]*?)```/g, (_m, code) => {
+    codeBlocks.push(code.replace(/^\n/, ''));
+    return ' CB' + (codeBlocks.length - 1) + ' ';
+  });
+  const lines = text.split('\n');
+  let html = '';
+  let inList = false;
+  const closeList = () => { if (inList) { html += '</ul>'; inList = false; } };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    const li = line.match(/^\s*[-*]\s+(.*)$/);
+    // GFM テーブル: 「| 見出し |」+ 次行が区切り (|---|---|) なら表として処理。
+    if (isTableRow(line) && i + 1 < lines.length && isTableDivider(lines[i + 1])) {
+      closeList();
+      const body = [];
+      let j = i + 2;
+      while (j < lines.length && isTableRow(lines[j])) { body.push(lines[j]); j++; }
+      html += renderTable(line, body);
+      i = j - 1;
+    } else if (h) {
+      closeList();
+      const lvl = h[1].length;
+      html += '<h' + lvl + '>' + inline(h[2]) + '</h' + lvl + '>';
+    } else if (li) {
+      if (!inList) { html += '<ul>'; inList = true; }
+      html += '<li>' + inline(li[1]) + '</li>';
+    } else if (line.trim() === '') {
+      closeList();
+    } else if (/^ CB\d+ $/.test(line)) {
+      // コードブロックのプレースホルダは段落で包まず、そのまま出す。
+      closeList();
+      html += line;
+    } else {
+      closeList();
+      html += '<p>' + inline(line) + '</p>';
+    }
+  }
+  closeList();
+  // 退避したコードブロックを戻す。
+  html = html.replace(/ CB(\d+) /g, (_m, i) => '<pre><code>' + codeBlocks[+i] + '</code></pre>');
+  return html;
+}
+// インライン記法: 太字 / 斜体 / インラインコード / リンク。
+function inline(s) {
+  return s
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>')
+    .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
+             '<a href="$2" target="_blank" rel="noopener">$1</a>');
+}
+// GFM テーブル対応 ----
+function isTableRow(line) { return line.indexOf('|') !== -1 && line.trim() !== ''; }
+function isTableDivider(line) {
+  return /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|?\s*$/.test(line);
+}
+// 1 行を | でセル分割する (先頭・末尾の | は除去し、各セルはインライン変換)。
+function tableCells(line) {
+  return line.trim().replace(/^\||\|$/g, '').split('|').map(c => inline(c.trim()));
+}
+function renderTable(header, bodyLines) {
+  const head = tableCells(header).map(c => '<th>' + c + '</th>').join('');
+  const rows = bodyLines.map(l =>
+    '<tr>' + tableCells(l).map(c => '<td>' + c + '</td>').join('') + '</tr>').join('');
+  return '<table><thead><tr>' + head + '</tr></thead><tbody>' + rows + '</tbody></table>';
+}
+
+// ユーザー発言: 吹き出しのみ (ラベルなし)。
+function addUserMsg(text) {
+  const div = document.createElement('div');
+  div.className = 'msg user';
+  const b = document.createElement('div');
+  b.className = 'bubble';
+  b.textContent = text;
+  div.appendChild(b);
+  chatLog.appendChild(div);
+  chatLog.scrollTop = chatLog.scrollHeight;
+  return div;
+}
+
+// AI 発言: 枠なしの地の文 (ラベルなし)。回答は Markdown として描画する。
+function addAiMsg(text) {
+  const div = document.createElement('div');
+  div.className = 'msg ai';
+  const b = document.createElement('div');
+  b.className = 'bubble markdown';
+  b.innerHTML = renderMarkdown(text);
+  div.appendChild(b);
+  chatLog.appendChild(div);
+  chatLog.scrollTop = chatLog.scrollHeight;
+  return div;
+}
+
+// 実行ステップ 1 件を「番号・ツールラベル・対象・成否・出力」の構造で描画する。
+// 生 JSON をそのまま出さず、人間が追える形にするのが目的。
+function renderStep(s, no) {
+  const st = document.createElement('div');
+  st.className = 'step' + (s.status === 'PASS' ? '' : ' failed');
+
+  const head = document.createElement('div');
+  head.className = 'step-head';
+
+  const num = document.createElement('span');
+  num.className = 'step-no';
+  num.textContent = no;
+  head.appendChild(num);
+
+  const label = document.createElement('span');
+  label.className = 'step-label';
+  label.textContent = s.label || s.tool;
+  head.appendChild(label);
+
+  // 対象 (ファイル名 / コマンド等) があれば等幅で添える。
+  if (s.target) {
+    const tgt = document.createElement('code');
+    tgt.className = 'step-target';
+    tgt.textContent = s.target;
+    head.appendChild(tgt);
+  }
+
+  // 成否バッジ (✓ / ✕)。exit_code があれば失敗時に添える。
+  const ok = s.status === 'PASS' && (s.exit_code == null || s.exit_code === 0);
+  const mark = document.createElement('span');
+  mark.className = 'step-mark ' + (ok ? 'ok' : 'ng');
+  mark.textContent = ok ? '✓' : ('✕' + (s.exit_code ? ' (' + s.exit_code + ')' : ''));
+  head.appendChild(mark);
+
+  st.appendChild(head);
+
+  // 出力は改行を保った等幅ブロックで表示。空なら控えめに「(出力なし)」。
+  const out = document.createElement('code');
+  out.className = 'out';
+  if (s.output && s.output.trim() !== '') {
+    out.textContent = s.output;
+  } else {
+    out.classList.add('empty');
+    out.textContent = '(出力なし)';
+  }
+  st.appendChild(out);
+  return st;
+}
+
+// AI の実行結果 (ステータスバッジ + 返信 + 各ツールの出力) を描画する。
+function renderAiResult(data) {
+  // 会話応答 (ツール実行なし) は自然文だけを地の文として表示する。
+  if (data.reply) return addAiMsg(data.reply);
+
+  const status = data.status || 'FAIL';
+  const div = document.createElement('div');
+  div.className = 'msg ai status-' + status;
+  const b = document.createElement('div');
+  b.className = 'bubble';
+
+  const badge = document.createElement('span');
+  badge.className = 'badge';
+  const statusText = status === 'PASS' ? '✓ 完了' : '✕ 失敗';
+  // attempts は「LLM への試行回数」。1 回なら冗長なので添えない。
+  badge.textContent = statusText + (data.attempts > 1 ? ' · 試行 ' + data.attempts + ' 回' : '');
+  b.appendChild(badge);
+
+  // AI による実行結果の要約 (Markdown)。生のツール出力より上に目立たせて表示。
+  if (data.summary) {
+    const sum = document.createElement('div');
+    sum.className = 'summary markdown';
+    sum.innerHTML = renderMarkdown(data.summary);
+    b.appendChild(sum);
+  }
+
+  if (data.error) {
+    const err = document.createElement('div');
+    err.textContent = data.error;
+    b.appendChild(err);
+  }
+
+  // 未完了の可能性など、要約とは別に添える注記 (控えめに表示)。
+  if (data.note) {
+    const note = document.createElement('div');
+    note.className = 'result-note';
+    note.textContent = '⚠ ' + data.note;
+    b.appendChild(note);
+  }
+
+  const steps = data.steps || [];
+  if (steps.length) {
+    const wrap = document.createElement('div');
+    wrap.className = 'steps';
+    steps.forEach((s, i) => wrap.appendChild(renderStep(s, i + 1)));
+    // 要約があるときは実行の詳細を折りたたむ (まとめを主役にする)。
+    if (data.summary) {
+      const det = document.createElement('details');
+      const sm = document.createElement('summary');
+      sm.textContent = '実行の詳細 (' + steps.length + ' ステップ)';
+      det.appendChild(sm);
+      det.appendChild(wrap);
+      b.appendChild(det);
+    } else {
+      b.appendChild(wrap);
+    }
+  }
+
+  div.appendChild(b);
+  chatLog.appendChild(div);
+  chatLog.scrollTop = chatLog.scrollHeight;
+  return div;
+}
+
+// チャットのスラッシュコマンド。入力欄の中身が /clear /compact だけの行なら、
+// AI へは送らずローカルで処理する。true を返したら送信を打ち切る。
+function handleSlashCommand(text) {
+  const cmd = text.replace(/\s+/g, ' ').trim().toLowerCase();
+  if (cmd === '/clear') { clearChat(); return true; }
+  if (cmd === '/compact') { compactChat(); return true; }
+  return false;
+}
+
+// チャットログを全消去する。
+function clearChat() {
+  chatLog.innerHTML = '';
+  chatInput.value = '';
+}
+
+// 現在のチャット表示テキストを AI に要約させ、ログを短い要約 1 件に畳み込む。
+// サーバー側は会話履歴を保持しないため、これは表示の圧縮のみ (AI の文脈には影響しない)。
+async function compactChat() {
+  const transcript = collectTranscript();
+  if (!transcript.trim()) { clearChat(); return; }
+  chatInput.value = '';
+  chatForm.classList.add('busy');
+  chatSend.disabled = true;
+  const pending = addPendingMsg();
+  startSpinner();
+  try {
+    const r = await fetch('/edit/compact', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ transcript })
+    });
+    const data = await r.json();
+    pending.remove();
+    if (!r.ok) { renderAiResult({ status: 'FAIL', error: data.error || '要約に失敗しました' }); return; }
+    // ログを一掃し、要約 1 件だけを「これまでの会話のまとめ」として残す。
+    chatLog.innerHTML = '';
+    addCompactSummary(data.summary || '');
+  } catch (err) {
+    pending.remove();
+    renderAiResult({ status: 'FAIL', error: 'エラー: ' + err.message });
+  } finally {
+    stopSpinner();
+    chatForm.classList.remove('busy');
+    chatSend.disabled = false;
+  }
+}
+
+// チャットログを AI へ渡す 1 本のプレーンテキストに書き出す (要約入力用)。
+// ユーザー発言 / AI 発言 / 実行要約 を role 付きの行にして連結する。
+function collectTranscript() {
+  const lines = [];
+  chatLog.querySelectorAll('.msg').forEach(m => {
+    const role = m.classList.contains('user') ? 'ユーザー' : 'アシスタント';
+    const text = (m.textContent || '').replace(/\s+/g, ' ').trim();
+    if (text) lines.push(role + ': ' + text);
+  });
+  return lines.join('\n');
+}
+
+// /compact の結果 (これまでの会話のまとめ) を専用の見出し付きで表示する。
+function addCompactSummary(text) {
+  const div = document.createElement('div');
+  div.className = 'msg ai compact-summary';
+  const b = document.createElement('div');
+  b.className = 'bubble';
+  const head = document.createElement('div');
+  head.className = 'compact-head';
+  head.textContent = '🗜 これまでの会話のまとめ';
+  b.appendChild(head);
+  const body = document.createElement('div');
+  body.className = 'markdown';
+  body.innerHTML = renderMarkdown(text);
+  b.appendChild(body);
+  div.appendChild(b);
+  chatLog.appendChild(div);
+  chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+// 最終結果に伴うエディタ反映とファイル一覧更新 (描画とは分離した副作用処理)。
+function applyResultSideEffects(data) {
+  if (data.content != null && editor && currentPath) {
+    if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
+    setEditorValue(data.content); // AI が編集した最新内容を反映 (既にディスクへ保存済みなので dirty にはしない)
+    setDirty(false);
+  }
+  loadFiles(true); // AI 実行後は確実に反映する (新規ファイルが増えている可能性)
+}
+
+// pending 行に既にツール実行の進捗が描画済みのとき、それを消さずにそのまま
+// 「完了した実行結果」として仕上げる。ツール行と各出力は残したまま、
+// 「AI 考え中」ヘッダーをステータスバッジに差し替え、要約/注記/エラーを追記する。
+function finalizePending(pending, data) {
+  const b = pending.querySelector('.bubble');
+  const head = pending.querySelector('.pending-head');
+  const status = data.status || 'PASS';
+  pending.classList.add('status-' + status);
+  // ヘッダーをステータスバッジに置き換える (スピナーはもう不要)。
+  const badge = document.createElement('span');
+  badge.className = 'badge';
+  const statusText = status === 'PASS' ? '✓ 完了' : '✕ 失敗';
+  badge.textContent = statusText + (data.attempts > 1 ? ' · 試行 ' + data.attempts + ' 回' : '');
+  if (head) head.replaceWith(badge); else b.insertBefore(badge, b.firstChild);
+
+  // 要約 (Markdown) はツール一覧の上に目立たせて置く。
+  const tools = pending._toolsEl;
+  if (data.summary) {
+    const sum = document.createElement('div');
+    sum.className = 'summary markdown';
+    sum.innerHTML = renderMarkdown(data.summary);
+    b.insertBefore(sum, tools);
+  }
+  if (data.error) {
+    const err = document.createElement('div');
+    err.textContent = data.error;
+    b.insertBefore(err, tools);
+  }
+  if (data.note) {
+    const note = document.createElement('div');
+    note.className = 'result-note';
+    note.textContent = '⚠ ' + data.note;
+    b.appendChild(note);
+  }
+  chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+// SSE の 1 イベント ({ event, data }) を処理する。data は JSON 文字列。
+// pending 行はツール進捗の描画先。result / error を受けたら最終描画する。
+// _hadTool は「この応答でツール実行が 1 つでもあったか」を pending に記録する。
+function handleChatEvent(pending, evName, dataStr) {
+  let data;
+  try { data = dataStr ? JSON.parse(dataStr) : {}; } catch (e) { return; }
+  if (evName === 'tool_start') {
+    pending._hadTool = true;
+    pendingToolStart(pending, data);
+  } else if (evName === 'tool_done') {
+    pendingToolDone(pending, data);
+  } else if (evName === 'result') {
+    // 会話応答 (reply) はツール実行が無いので、pending を消して地の文で表示。
+    // ツール実行があった場合は、進捗表示を消さずにその場で仕上げる。
+    if (data.reply || !pending._hadTool) {
+      pending.remove();
+      renderAiResult(data);
+    } else {
+      finalizePending(pending, data);
+    }
+    applyResultSideEffects(data);
+  } else if (evName === 'error') {
+    // ツール実行済みなら進捗を残してエラーを添える。未実行なら通常のエラー表示。
+    if (pending._hadTool) {
+      finalizePending(pending, { status: 'FAIL', error: data.error || 'エラー' });
+    } else {
+      pending.remove();
+      renderAiResult({ status: 'FAIL', error: data.error || 'エラー' });
+    }
+  }
+}
+
+async function sendChat() {
+  const instruction = chatInput.value.trim();
+  if (!instruction) return;
+  // /clear /compact はローカルコマンド (AI へは送らない)。
+  if (handleSlashCommand(instruction)) return;
+  chatInput.value = '';
+  addUserMsg(instruction);
+  chatForm.classList.add('busy');
+  chatSend.disabled = true;
+  const pending = addPendingMsg();
+  startSpinner();
+  try {
+    const r = await fetch('/edit/chat', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path: currentPath || '', instruction, stream: true })
+    });
+    if (!r.ok || !r.body) {
+      // SSE を開始できなかった場合は本文を JSON として読んでフォールバック。
+      const data = await r.json().catch(() => ({ status: 'FAIL', error: r.status + ' error' }));
+      pending.remove();
+      renderAiResult(data);
+      applyResultSideEffects(data);
+      return;
+    }
+    // SSE ストリームを読み、イベント境界 (空行) ごとにパースして処理する。
+    const reader = r.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = '';
+    for (;;) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buf += decoder.decode(value, { stream: true });
+      let sep;
+      while ((sep = buf.indexOf('\n\n')) !== -1) {
+        const chunk = buf.slice(0, sep);
+        buf = buf.slice(sep + 2);
+        let evName = 'message', dataStr = '';
+        chunk.split('\n').forEach(line => {
+          if (line.startsWith('event:')) evName = line.slice(6).trim();
+          else if (line.startsWith('data:')) dataStr += line.slice(5).trim();
+        });
+        handleChatEvent(pending, evName, dataStr);
+      }
+    }
+  } catch (err) {
+    pending.remove();
+    renderAiResult({ status: 'FAIL', error: 'エラー: ' + err.message });
+  } finally {
+    stopSpinner();
+    chatForm.classList.remove('busy');
+    chatSend.disabled = false;
+  }
+}
+
+chatForm.onsubmit = (e) => { e.preventDefault(); sendChat(); };
+// Enter で送信、Shift+Enter で改行 (IME 変換確定中の Enter は無視)。
+chatInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+    e.preventDefault();
+    sendChat();
+  }
+});
+
+// Base64 文字列を UTF-8 バイト列 (Uint8Array) に変換する。
+function b64ToBytes(b64) {
+  const bin = atob(b64);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+
+// ---- コンソール (xterm + WebSocket、複数タブ + タブ内 1 回の左右分割) ----
+// tab = { id, label, panes: [pane, ...] } / pane = { id, term, fit, ws, el }
+let terminals = [];
+let activeTabId = null;
+let nextTermSeq = 1;
+
+function newTermId() { return 'term-' + (nextTermSeq++); }
+
+// 1 ペイン (xterm + WebSocket 接続) を作り、DOM に差し込む。
+// tab を渡すと、シェルが exit した際にそのペインを自動で閉じる (分割解除)。
+function createPane(container, tab) {
+  const wrap = document.createElement('div');
+  wrap.className = 'term-pane';
+  const xtermEl = document.createElement('div');
+  xtermEl.className = 'xterm-wrap';
+  wrap.appendChild(xtermEl);
+  container.appendChild(wrap);
+
+  const term = new Terminal({ fontSize: 13, cursorBlink: true,
+    fontFamily: '"Cascadia Code", "Noto Sans JP", monospace',
+    theme: { background: '#1e1e1e' } });
+  const fit = new FitAddon.FitAddon();
+  term.loadAddon(fit);
+  term.open(xtermEl);
+
+  const pane = { id: newTermId(), term, fit, ws: null, el: wrap };
+
+  if (!WS_CONFIG) {
+    term.write('\r\n[コンソールは無効です (ws_port 未設定)]\r\n');
+    return pane;
+  }
+  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+  let url = proto + '://' + location.hostname + ':' + WS_CONFIG.port + '/';
+  if (WS_CONFIG.token) url += '?token=' + encodeURIComponent(WS_CONFIG.token);
+  const ws = new WebSocket(url);
+  pane.ws = ws;
+
+  ws.onopen = () => {
+    const send = () => ws.send(JSON.stringify(
+      { type: 'resize', cols: term.cols, rows: term.rows }));
+    send();
+    term.onData(d => ws.send(JSON.stringify({ type: 'input', data: d })));
+    pane.sendResize = send;
+  };
+  ws.onmessage = (ev) => {
+    const msg = JSON.parse(ev.data);
+    // 出力は UTF-8 バイト列。atob の結果を文字列で渡すと Latin-1 扱いになり
+    // 日本語が âââ に化けるため、Uint8Array に変換して xterm へ渡す
+    // (xterm は Uint8Array を UTF-8 としてデコードする)。
+    if (msg.type === 'output') term.write(b64ToBytes(msg.data));
+    else if (msg.type === 'exit') { term.write('\r\n[プロセス終了: ' + msg.code + ']\r\n'); if (tab) onPaneExited(tab, pane); }
+    else if (msg.type === 'error') term.write('\r\n[エラー: ' + msg.message + ']\r\n');
+  };
+  ws.onclose = () => term.write('\r\n[接続が閉じられました]\r\n');
+
+  return pane;
+}
+
+// シェルが exit したペインを片付ける。分割中 (2 ペイン) ならそのペインだけ閉じて分割解除、
+// 単独ペインならタブごと閉じる。
+function onPaneExited(tab, pane) {
+  const idx = tab.panes.indexOf(pane);
+  if (idx === -1) return;
+  closePane(pane);
+  tab.panes.splice(idx, 1);
+  pane.el.remove();
+  if (tab.panes.length === 0) {
+    closeTab(tab.id);
+  } else if (tab.id === activeTabId) {
+    fitActiveTab();
+  }
+}
+
+function closePane(pane) {
+  try { pane.ws && pane.ws.close(); } catch (e) {}
+  try { pane.term.dispose(); } catch (e) {}
+}
+
+// 新しいタブ (ペイン 1 つ) を作って表示する。
+function createTerminalTab() {
+  const row = document.createElement('div');
+  row.className = 'term-pane-row';
+  document.getElementById('term-panes').appendChild(row);
+
+  const tab = { id: newTermId(), label: 'ターミナル ' + (terminals.length + 1), panes: [], row };
+  tab.panes.push(createPane(row, tab));
+  terminals.push(tab);
+  activateTab(tab.id);
+  renderTermTabs();
+  fitActiveTab();
+}
+
+// アクティブなタブを現在のペイン構成のまま「左右 2 ペイン」に分割する (既に 2 ペインなら何もしない)。
+function splitActiveTerminal() {
+  const tab = terminals.find(t => t.id === activeTabId);
+  if (!tab || tab.panes.length >= 2) return;
+  const pane = createPane(tab.row, tab);
+  tab.panes.push(pane);
+  fitActiveTab();
+}
+
+function activateTab(id) {
+  activeTabId = id;
+  terminals.forEach(t => t.row.classList.toggle('active', t.id === id));
+  renderTermTabs();
+  fitActiveTab();
+}
+
+function closeTab(id) {
+  const idx = terminals.findIndex(t => t.id === id);
+  if (idx === -1) return;
+  const tab = terminals[idx];
+  tab.panes.forEach(closePane);
+  tab.row.remove();
+  terminals.splice(idx, 1);
+  if (activeTabId === id) {
+    const next = terminals[idx] || terminals[idx - 1];
+    activeTabId = next ? next.id : null;
+  }
+  renderTermTabs();
+  if (activeTabId) { terminals.forEach(t => t.row.classList.toggle('active', t.id === activeTabId)); fitActiveTab(); }
+}
+
+function renderTermTabs() {
+  const bar = document.getElementById('term-tabs');
+  bar.innerHTML = '';
+  terminals.forEach(t => {
+    const el = document.createElement('div');
+    el.className = 'term-tab' + (t.id === activeTabId ? ' active' : '');
+    el.textContent = t.label;
+    el.onclick = () => activateTab(t.id);
+    // 中クリックでも閉じる (ブラウザのタブ操作に倣う)。mousedown 側でも既定動作
+    // (中ボタンのオートスクロール) を抑止しておく。
+    el.onmousedown = (e) => { if (e.button === 1) e.preventDefault(); };
+    el.onauxclick = (e) => { if (e.button === 1) { e.preventDefault(); closeTab(t.id); } };
+    const close = document.createElement('span');
+    close.className = 'term-tab-close';
+    close.textContent = '×';
+    close.title = 'ターミナルを閉じる';
+    close.onclick = (e) => { e.stopPropagation(); closeTab(t.id); };
+    el.appendChild(close);
+    bar.appendChild(el);
+  });
+
+  const add = document.createElement('button');
+  add.id = 'term-tab-add';
+  add.type = 'button';
+  add.title = '新しいターミナル';
+  add.setAttribute('aria-label', '新しいターミナル');
+  add.textContent = '+';
+  add.onclick = () => createTerminalTab();
+  bar.appendChild(add);
+}
+
+// アクティブタブの全ペインを fit() し、リサイズを WebSocket へ伝える。
+function fitActiveTab() {
+  const tab = terminals.find(t => t.id === activeTabId);
+  if (!tab) return;
+  tab.panes.forEach(p => {
+    try { p.fit.fit(); } catch (e) {}
+    if (p.sendResize) p.sendResize();
+  });
+}
+
+function initConsole() {
+  document.getElementById('btn-term-new').onclick = () => { closeAllMenus(); createTerminalTab(); };
+  document.getElementById('btn-term-split').onclick = () => { closeAllMenus(); splitActiveTerminal(); };
+  createTerminalTab();
+  window.addEventListener('resize', fitActiveTab);
+}
+
+// ---- パネルのリサイズ (境界ドラッグ) ----
+let termFit = fitActiveTab; // initResizers から呼ぶ (リサイザードラッグ時に全ペインを fit)
+
+function initResizers() {
+  const app = document.getElementById('app');
+
+  // ドラッグ中に xterm を追従させる。window resize を発火して
+  // initConsole 内の fit+send ハンドラも同時に呼ぶ。
+  const reflow = () => {
+    if (termFit) termFit();
+    window.dispatchEvent(new Event('resize'));
+  };
+
+  // 汎用ドラッグ: axis='x' は列幅、'y' は行高を CSS 変数へ書き込む。
+  function drag(handle, axis, apply) {
+    handle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      handle.classList.add('active');
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = axis === 'x' ? 'col-resize' : 'row-resize';
+      const move = (ev) => apply(ev);
+      const up = () => {
+        handle.classList.remove('active');
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        window.removeEventListener('mousemove', move);
+        window.removeEventListener('mouseup', up);
+        reflow();
+      };
+      window.addEventListener('mousemove', move);
+      window.addEventListener('mouseup', up);
+    });
+  }
+
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+
+  // files 幅: app 左端からマウス X までを files-w にする。
+  drag(document.getElementById('rc-l'), 'x', (ev) => {
+    const r = app.getBoundingClientRect();
+    const w = clamp(ev.clientX - r.left, 120, r.width - 400);
+    app.style.setProperty('--files-w', w + 'px');
+    reflow();
+  });
+
+  // chat 幅: app 右端からマウス X までを chat-w にする。
+  drag(document.getElementById('rc-r'), 'x', (ev) => {
+    const r = app.getBoundingClientRect();
+    const w = clamp(r.right - ev.clientX, 200, r.width - 400);
+    app.style.setProperty('--chat-w', w + 'px');
+    reflow();
+  });
+
+  // editor/console 高さ: editor 行の上端からマウス Y までを editor-h にする。
+  drag(document.getElementById('rr'), 'y', (ev) => {
+    const top = document.getElementById('editor').getBoundingClientRect().top;
+    const bottom = document.getElementById('console-wrap').getBoundingClientRect().bottom;
+    const h = clamp(ev.clientY - top, 80, bottom - top - 80);
+    app.style.setProperty('--editor-h', h + 'px');
+    reflow();
+  });
+}
+
+// ---- Git (ステージング / コミット / push / ブランチ切り替え) ----
+
+async function gitFetch(url, opts) {
+  const r = await fetch(url, opts);
+  const data = await r.json().catch(() => ({}));
+  if (!r.ok) {
+    const err = new Error(data.error || (r.status + ' error'));
+    // サーバーが reason (例: "no_remote") を返した場合はエラーオブジェクトに引き継ぎ、
+    // 呼び出し側でエラーダイアログ以外の分岐 (入力ダイアログなど) をできるようにする。
+    if (data.reason) err.reason = data.reason;
+    throw err;
+  }
+  return data;
+}
+
+async function gitPost(url, body) {
+  return gitFetch(url, {
+    method: 'POST', headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body || {})
+  });
+}
+
+// git status のステータス文字 (M/A/D/R/?) を CSS クラスと表示ラベルに変換する。
+function gitStatusInfo(status) {
+  const map = {
+    M: { cls: 'status-M', label: 'M' },
+    A: { cls: 'status-A', label: 'A' },
+    D: { cls: 'status-D', label: 'D' },
+    R: { cls: 'status-R', label: 'R' },
+    '?': { cls: 'status-untracked', label: 'U' }
+  };
+  return map[status] || { cls: 'status-M', label: status };
+}
+
+// actions: [{ label, icon, fn, danger? }, ...] を左から順にボタンとして並べる。
+function renderGitFileList(container, files, actions) {
+  container.innerHTML = '';
+  if (!files.length) {
+    const li = document.createElement('li');
+    li.className = 'git-empty';
+    li.textContent = '(なし)';
+    container.appendChild(li);
+    return;
+  }
+  files.forEach(f => {
+    const li = document.createElement('li');
+    li.className = 'git-file-row';
+    const info = gitStatusInfo(f.status);
+    const st = document.createElement('span');
+    st.className = 'git-file-status ' + info.cls;
+    st.textContent = info.label;
+    const path = document.createElement('span');
+    path.className = 'git-file-path';
+    path.textContent = f.path;
+    path.title = f.path;
+    li.appendChild(st);
+    li.appendChild(path);
+    actions.forEach(action => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'git-file-toggle' + (action.danger ? ' danger' : '');
+      btn.title = action.label;
+      btn.setAttribute('aria-label', action.label);
+      btn.textContent = action.icon;
+      btn.onclick = () => action.fn(f.path);
+      li.appendChild(btn);
+    });
+    container.appendChild(li);
+  });
+}
+
+async function refreshGitPanel() {
+  let data;
+  try {
+    data = await gitFetch('/edit/git/status');
+  } catch (err) {
+    return; // ポーリング中の一時的な失敗は無視する。
+  }
+
+  const uninit = document.getElementById('git-uninit');
+  const initView = document.getElementById('git-init-view');
+  const branchName = document.getElementById('statusbar-branch-name');
+
+  if (!data.initialized) {
+    uninit.hidden = false;
+    initView.hidden = true;
+    branchName.textContent = '(Git 未初期化)';
+    return;
+  }
+
+  uninit.hidden = true;
+  initView.hidden = false;
+  branchName.textContent = data.branch || '(不明)';
+
+  const staged = data.staged || [];
+  const unstaged = data.unstaged || [];
+  document.getElementById('git-staged-count').textContent = staged.length ? String(staged.length) : '';
+  document.getElementById('git-unstaged-count').textContent = unstaged.length ? String(unstaged.length) : '';
+
+  renderGitFileList(document.getElementById('git-staged-list'), staged,
+    [{ label: 'ステージを取り消す', icon: '−', fn: gitUnstage }]);
+  renderGitFileList(document.getElementById('git-unstaged-list'), unstaged,
+    [{ label: '変更を破棄', icon: '↺', fn: gitDiscard, danger: true },
+     { label: 'ステージに追加', icon: '+', fn: gitStage }]);
+}
+
+async function gitStage(path) {
+  try {
+    await gitPost('/edit/git/stage', { path });
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, 'ステージに失敗しました'); }
+}
+
+async function gitUnstage(path) {
+  try {
+    await gitPost('/edit/git/unstage', { path });
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, 'ステージ取り消しに失敗しました'); }
+}
+
+async function gitStageAll() {
+  try {
+    await gitPost('/edit/git/stage_all');
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, 'ステージに失敗しました'); }
+}
+
+async function gitUnstageAll() {
+  try {
+    await gitPost('/edit/git/unstage_all');
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, 'ステージ取り消しに失敗しました'); }
+}
+
+// 変更の破棄は元に戻せない (未追跡ファイルは削除される) ため確認を挟む。
+async function gitDiscard(path) {
+  const ok = await showConfirm('変更を破棄', 'この変更を破棄しますか? この操作は元に戻せません。\n' + path);
+  if (!ok) return;
+  try {
+    await gitPost('/edit/git/discard', { path });
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, '変更の破棄に失敗しました'); }
+}
+
+async function gitDiscardAll() {
+  const unstaged = [...document.querySelectorAll('#git-unstaged-list .git-file-path')]
+    .map(el => el.textContent);
+  if (!unstaged.length) return;
+  const ok = await showConfirm('すべての変更を破棄',
+    'すべての変更 (' + unstaged.length + ' 件) を破棄しますか? この操作は元に戻せません。');
+  if (!ok) return;
+  try {
+    await gitPost('/edit/git/discard', { paths: unstaged });
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, '変更の破棄に失敗しました'); }
+}
+
+async function gitInit() {
+  try {
+    await gitPost('/edit/git/init');
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, 'Git の初期化に失敗しました'); }
+}
+
+async function gitCommit() {
+  const input = document.getElementById('git-commit-message');
+  const message = input.value.trim();
+  if (!message) { showError('コミットメッセージを入力してください', 'コミットできません'); return; }
+  try {
+    await gitPost('/edit/git/commit', { message });
+    input.value = '';
+    await refreshGitPanel();
+  } catch (err) { showError(err.message, 'コミットに失敗しました'); }
+}
+
+async function gitPush() {
+  const btn = document.getElementById('btn-git-push');
+  btn.disabled = true;
+  try {
+    await gitPost('/edit/git/push');
+  } catch (err) {
+    // リモート/上流ブランチ未設定はエラーダイアログではなく URL 入力ダイアログを開く。
+    if (err.reason === 'no_remote') { openRemoteDialog(); return; }
+    showError(err.message, 'プッシュに失敗しました');
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+document.getElementById('btn-git-refresh').onclick = () => refreshGitPanel();
+document.getElementById('btn-git-init').onclick = () => gitInit();
+document.getElementById('git-commit-form').onsubmit = (e) => { e.preventDefault(); gitCommit(); };
+document.getElementById('btn-git-push').onclick = () => gitPush();
+document.getElementById('btn-git-stage-all').onclick = () => gitStageAll();
+document.getElementById('btn-git-unstage-all').onclick = () => gitUnstageAll();
+document.getElementById('btn-git-discard-all').onclick = () => gitDiscardAll();
+
+// 作業ディレクトリの Git 状態を定期的に監視する (ファイル一覧のポーリングと同様)。
+const GIT_POLL_MS = 3000;
+setInterval(refreshGitPanel, GIT_POLL_MS);
+
+// ---- ブランチ切り替え/作成ダイアログ ----
+const branchDialog = document.getElementById('branch-dialog');
+const branchList = document.getElementById('branch-list');
+const branchNewName = document.getElementById('branch-new-name');
+const branchError = document.getElementById('branch-error');
+
+async function openBranchDialog() {
+  branchError.textContent = '';
+  branchNewName.value = '';
+  branchList.innerHTML = '';
+  centerWindow(branchDialog);
+  branchNewName.focus();
+  try {
+    const data = await gitFetch('/edit/git/branches');
+    renderBranchList(data.branches || [], data.current);
+  } catch (err) {
+    branchError.textContent = err.message;
+  }
+}
+
+function renderBranchList(branches, current) {
+  branchList.innerHTML = '';
+  branches.forEach(name => {
+    const li = document.createElement('li');
+    li.className = 'branch-item' + (name === current ? ' current' : '');
+    const check = document.createElement('span');
+    check.className = 'branch-check';
+    check.textContent = name === current ? '✓' : '';
+    const label = document.createElement('span');
+    label.textContent = name;
+    li.appendChild(check);
+    li.appendChild(label);
+    li.onclick = () => gitCheckout(name, false);
+    branchList.appendChild(li);
+  });
+}
+
+function closeBranchDialog() { branchDialog.hidden = true; }
+
+async function gitCheckout(branch, create) {
+  branchError.textContent = '';
+  try {
+    await gitPost('/edit/git/checkout', { branch, create });
+    closeBranchDialog();
+    await refreshGitPanel();
+  } catch (err) {
+    branchError.textContent = err.message;
+  }
+}
+
+document.getElementById('statusbar-branch').onclick = () => openBranchDialog();
+document.getElementById('branch-cancel').onclick = closeBranchDialog;
+document.getElementById('branch-close').onclick = closeBranchDialog;
+document.getElementById('branch-create').onclick = () => {
+  const name = branchNewName.value.trim();
+  if (!name) { branchError.textContent = '新しいブランチ名を入力してください'; return; }
+  gitCheckout(name, true);
+};
+branchNewName.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') { e.preventDefault(); document.getElementById('branch-create').click(); }
+  else if (e.key === 'Escape') { e.preventDefault(); closeBranchDialog(); }
+});
+initDraggableWindow(branchDialog);
+
+// ---- リモート URL 入力ダイアログ (プッシュ先未設定時に開く) ----
+const remoteDialog = document.getElementById('remote-dialog');
+const remoteUrlInput = document.getElementById('remote-url');
+const remoteError = document.getElementById('remote-error');
+
+function openRemoteDialog() {
+  remoteError.textContent = '';
+  remoteUrlInput.value = '';
+  centerWindow(remoteDialog);
+  remoteUrlInput.focus();
+}
+
+function closeRemoteDialog() { remoteDialog.hidden = true; }
+
+async function confirmRemoteSet() {
+  const url = remoteUrlInput.value.trim();
+  if (!url) { remoteError.textContent = 'リモート URL を入力してください'; return; }
+  remoteError.textContent = '';
+  try {
+    await gitPost('/edit/git/remote', { url });
+    closeRemoteDialog();
+    await refreshGitPanel();
+  } catch (err) {
+    remoteError.textContent = err.message;
+  }
+}
+
+document.getElementById('remote-ok').onclick = () => confirmRemoteSet();
+document.getElementById('remote-cancel').onclick = closeRemoteDialog;
+document.getElementById('remote-close').onclick = closeRemoteDialog;
+remoteUrlInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') { e.preventDefault(); confirmRemoteSet(); }
+  else if (e.key === 'Escape') { e.preventDefault(); closeRemoteDialog(); }
+});
+initDraggableWindow(remoteDialog);
+
+// ---- 起動 ----
+loadFiles(true);
+initConsole();
+initResizers();
+initMenu();
+initPanelView();
+initFilesTab();
+setAutoSave(autoSaveEnabled); // メニューのチェック表示を保存済み設定に合わせる
+refreshGitPanel();
+
+// 自動保存 (debounce) が確定する前にタブを閉じようとした場合に警告する。
+window.addEventListener('beforeunload', (e) => {
+  if (isDirty) { e.preventDefault(); e.returnValue = ''; }
+});