chocomint 1.0.2 → 1.1.0

data/public/edit/edit.js

@@ -121,35 +121,6 @@ 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: '🐍',
@@ -194,12 +165,35 @@ const FILE_ICONS = {
   jpg: '🖼️',
   jpeg: '🖼️',
   gif: '🖼️',
+  webp: '🖼️',
+  bmp: '🖼️',
   svg: '🖼️',
   ico: '🖼️',
+  avif: '🖼️',
+  tif: '🖼️',
+  tiff: '🖼️',
   pdf: '📕',
+  mp4: '🎬',
+  m4v: '🎬',
+  webm: '🎬',
+  mkv: '🎬',
+  mov: '🎬',
+  avi: '🎬',
+  ogv: '🎬',
+  mp3: '🎵',
+  wav: '🎵',
+  ogg: '🎵',
+  m4a: '🎵',
+  aac: '🎵',
+  flac: '🎵',
+  opus: '🎵',
   zip: '📦',
   gz: '📦',
   tar: '📦',
+  tgz: '📦',
+  bz2: '📦',
+  tbz: '📦',
+  tbz2: '📦',
   lock: '🔒',
   gitignore: '🚫',
   dockerfile: '🐳',
@@ -215,51 +209,128 @@ function fileIcon(name) {
   return FILE_ICONS[ext] || '📄';
 }
 
-// ツリーノードを <ul> にレンダリング。prefix は現ディレクトリの相対パス。
-function renderTree(node, prefix) {
+// ---- 遅延展開ツリー -------------------------------------------------------
+// ツリー全体を一括取得すると巨大ホーム (C:\Users\<name> 等) で壊れるため、
+// 1 階層ずつ /edit/dir?path= で取得して描画する。フォルダを開いたときに初めて
+// その中身を取得する。
+
+// 各展開済みディレクトリの「直下 entries の署名」(変化検知用)。dir 相対パス → 署名文字列。
+// ルートは "" をキーにする。ポーリング/更新時に署名が変わった階層だけ描き直す。
+const dirSigs = new Map();
+
+// /edit/dir?path=dir を取得して { entries, capped, absRoot } を返す。失敗時は null。
+async function fetchDir(dir) {
+  try {
+    const q = dir ? '?path=' + encodeURIComponent(dir) : '';
+    const r = await fetch('/edit/dir' + q);
+    if (!r.ok) return null;
+    const data = await r.json();
+    if (data.abs_root) absRoot = data.abs_root;
+    return data;
+  } catch (e) { return null; } // ポーリング中の一時的な失敗は無視する。
+}
+
+// entries の署名 (name+dir をソート結合)。直下の顔ぶれが変わったかだけを見る。
+function entriesSig(entries) {
+  return (entries || []).map(e => (e.dir ? 'd:' : 'f:') + e.name).sort().join('\n');
+}
+
+// 1 階層分の entries を <ul> に描画して返す。dir は親ディレクトリの相対パス ("" ならルート)。
+// ディレクトリは (openDirs に含まれれば) 展開状態で子 <ul> も再帰的に埋める。
+function renderEntries(entries, dir) {
   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);
-  });
+  for (const ent of entries) {
+    if (ent.dir) ul.appendChild(makeDirLi(ent));
+    else ul.appendChild(makeFileLi(ent));
+  }
   return ul;
 }
 
+// ディレクトリ <li> を作る。展開中 (openDirs) なら子 <ul> を非同期に埋める。
+function makeDirLi(ent) {
+  const dirPath = ent.path;
+  const li = document.createElement('li');
+  li.className = 'dir';
+  li.dataset.path = dirPath;
+  const row = document.createElement('div');
+  row.className = 'row';
+  row.innerHTML = '<span class="twist">▶</span><span class="icon">📁</span>';
+  const nameSpan = document.createElement('span');
+  nameSpan.className = 'name';
+  nameSpan.textContent = ent.name;
+  row.appendChild(nameSpan);
+  row.onclick = (e) => {
+    if (e.ctrlKey || e.metaKey || e.shiftKey) { handleMultiSelectClick(e, dirPath); return; }
+    if (openDirs.has(dirPath)) collapseDir(li, dirPath);
+    else expandDir(li, dirPath);
+    selectDir(dirPath);
+  };
+  row.oncontextmenu = (e) => showContextMenu(e, dirPath, true);
+  li.appendChild(row);
+  // 子を入れる <ul> を用意しておく (閉じているときは空)。
+  const childUl = document.createElement('ul');
+  childUl.className = 'children';
+  li.appendChild(childUl);
+  // 描画時点で開いている扱いなら、その場で中身を取得して展開する。
+  if (openDirs.has(dirPath)) {
+    li.classList.add('open');
+    fillDirChildren(li, dirPath);
+  }
+  return li;
+}
+
+// ファイル <li> を作る。
+function makeFileLi(ent) {
+  const li = document.createElement('li');
+  li.className = 'file';
+  li.dataset.path = ent.path;
+  const row = document.createElement('div');
+  row.className = 'row';
+  row.innerHTML = `<span class="twist"></span><span class="icon">${fileIcon(ent.name)}</span>`;
+  const nameSpan = document.createElement('span');
+  nameSpan.className = 'name';
+  nameSpan.textContent = ent.name;
+  row.appendChild(nameSpan);
+  row.onclick = (e) => {
+    if (e.ctrlKey || e.metaKey || e.shiftKey) { handleMultiSelectClick(e, ent.path); return; }
+    openFile(ent.path, li);
+  };
+  row.oncontextmenu = (e) => showContextMenu(e, ent.path, false);
+  li.appendChild(row);
+  return li;
+}
+
+// li.children (子 <ul>) を /edit/dir で取得して描画する。dir は li の相対パス。
+async function fillDirChildren(li, dir) {
+  const data = await fetchDir(dir);
+  const childUl = li.querySelector(':scope > ul.children');
+  if (!childUl) return; // 取得中に折りたたまれた等
+  if (!data) { childUl.replaceChildren(); dirSigs.delete(dir); return; }
+  dirSigs.set(dir, entriesSig(data.entries));
+  const fresh = renderEntries(data.entries, dir);
+  childUl.replaceChildren(...fresh.childNodes);
+  restoreHighlights();
+}
+
+// ディレクトリを展開する。openDirs に加え、子 <ul> を取得して埋める。
+function expandDir(li, dir) {
+  openDirs.add(dir);
+  li.classList.add('open');
+  fillDirChildren(li, dir);
+}
+
+// ディレクトリを折りたたむ。子 <ul> を空にして状態を捨てる。
+function collapseDir(li, dir) {
+  openDirs.delete(dir);
+  li.classList.remove('open');
+  const childUl = li.querySelector(':scope > ul.children');
+  if (childUl) childUl.replaceChildren();
+  // 配下の署名も破棄する (再展開時は取り直す)。
+  for (const key of [...dirSigs.keys()]) {
+    if (key === dir || key.startsWith(dir + '/')) dirSigs.delete(key);
+  }
+}
+
 // ディレクトリを「新規作成の基準」として選択状態にする (ファイル選択のハイライトは解除する)。
 function selectDir(dirPath) {
   selectedDir = dirPath;
@@ -326,52 +397,95 @@ function handleMultiSelectClick(e, path) {
   renderMultiSelection();
 }
 
-// 直近に描画したファイル一覧の署名 (変化検知用)。ポーリングで無駄な再描画を避ける。
-let lastFilesSig = null;
-// workspace ルートの絶対パス (「絶対パスをコピー」用)。/edit/files のたびに更新する。
+// workspace ルートの絶対パス (「絶対パスをコピー」用)。/edit/dir のたびに更新する。
 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;
-
+// 再描画後、単一選択・複数選択のハイライトを DOM に復元する。
+// 消えたパスは複数選択からも取り除く。遅延展開では階層描画のたびに呼ぶ。
+function restoreHighlights() {
   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) {
+  }
+  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();
 }
 
-// 作業ディレクトリの内容を定期的に監視し、変化があれば一覧を更新する。
+// ルート階層を取得して #file-list を描き直す。openDirs に残っている階層は
+// renderEntries → makeDirLi 内で再帰的に取得・展開される。
+async function renderRoot() {
+  const container = document.getElementById('file-list');
+  const data = await fetchDir('');
+  if (!data) return;
+  dirSigs.set('', entriesSig(data.entries));
+  const fresh = renderEntries(data.entries, '');
+  container.replaceChildren(...fresh.childNodes);
+  // 空白部の右クリックは workspace ルートへの新規作成メニューを出す。
+  container.oncontextmenu = (e) => {
+    if (e.target === container) showContextMenu(e, '', true);
+  };
+  restoreHighlights();
+}
+
+// ルートから描き直し、開いている階層も取り直す (更新ボタン・fs 操作・AI 実行後・初回)。
+async function refreshTree() {
+  await renderRoot();
+}
+
+// dir の階層だけを取り直して差し替える (fs 操作後の局所更新)。
+// dir が現在展開中 (ルート or openDirs) でなければ何もしない。
+async function refreshDir(dir) {
+  const container = document.getElementById('file-list');
+  if (dir === '' || dir == null) { await renderRoot(); return; }
+  if (!openDirs.has(dir)) return; // 閉じている階層は描画対象外。
+  const li = container.querySelector('li.dir[data-path="' + cssEscape(dir) + '"]');
+  if (li) await fillDirChildren(li, dir);
+}
+
+// 展開中の各階層 (ルート + openDirs) を再取得し、直下の顔ぶれ (署名) が変わった階層だけ
+// 描き直す。外部からのファイル追加/削除を自動反映しつつ、巨大ホームでも軽い。
+async function refreshOpenDirs() {
+  const container = document.getElementById('file-list');
+  // ルート
+  const rootData = await fetchDir('');
+  if (rootData) {
+    const sig = entriesSig(rootData.entries);
+    if (sig !== dirSigs.get('')) {
+      dirSigs.set('', sig);
+      const fresh = renderEntries(rootData.entries, '');
+      container.replaceChildren(...fresh.childNodes);
+      restoreHighlights();
+      return; // ルートを描き直すと配下も makeDirLi 経由で取り直されるため以降は不要。
+    }
+  }
+  // 開いている各サブディレクトリ (浅い順に処理して親の再描画で子を巻き込まない)。
+  const openList = [...openDirs].sort((a, b) => a.split('/').length - b.split('/').length);
+  for (const dir of openList) {
+    const li = container.querySelector('li.dir[data-path="' + cssEscape(dir) + '"]');
+    if (!li) continue; // 親が閉じている等で DOM 上に無い。
+    const data = await fetchDir(dir);
+    if (!data) continue;
+    const sig = entriesSig(data.entries);
+    if (sig === dirSigs.get(dir)) continue; // 変化なし。
+    dirSigs.set(dir, sig);
+    const childUl = li.querySelector(':scope > ul.children');
+    if (childUl) {
+      const fresh = renderEntries(data.entries, dir);
+      childUl.replaceChildren(...fresh.childNodes);
+    }
+  }
+  restoreHighlights();
+}
+
+// 作業ディレクトリの内容を定期的に監視し、変化があれば展開中の階層だけ更新する。
 const FILES_POLL_MS = 3000;
-setInterval(() => loadFiles(false), FILES_POLL_MS);
+setInterval(() => refreshOpenDirs(), FILES_POLL_MS);
 
 // querySelector 用に属性値をエスケープ (パスに特殊文字が入っても安全に)。
 function cssEscape(s) {
@@ -460,7 +574,7 @@ async function createEntry(dir, isDir) {
   try {
     await fsPost(isDir ? '/edit/fs/mkdir' : '/edit/fs/touch', { path });
     if (dir) openDirs.add(dir); // 作成先を開いて見せる
-    await loadFiles();
+    await refreshDir(dir); // 作成先の階層だけ描き直す (dir="" ならルート)
     if (!isDir) openFileByPath(path); // 作ったファイルを開く
   } catch (err) { alert(err.message); }
 }
@@ -483,7 +597,11 @@ async function renameEntry(path) {
     }
     if (selectedDir === path) selectedDir = to;
     renderEditorTabs();
-    await loadFiles();
+    // 移動元・移動先の親階層を描き直す (同じ親なら1回で済む)。
+    const fromParent = parentDir(path);
+    const toParent = parentDir(to);
+    await refreshDir(fromParent);
+    if (toParent !== fromParent) await refreshDir(toParent);
   } catch (err) { alert(err.message); }
 }
 
@@ -494,7 +612,7 @@ async function deleteEntry(path, isDir) {
   try {
     await fsPost('/edit/fs/delete', { path });
     forgetDeletedPath(path);
-    await loadFiles();
+    await refreshDir(parentDir(path)); // 削除対象の親階層だけ描き直す
   } catch (err) { alert(err.message); }
 }
 
@@ -517,18 +635,22 @@ function removeTab(path) {
   const wasActive = currentPath === path;
   if (wasActive && autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
   openTabs.splice(idx, 1);
-  tab.model.dispose();
+  // メディアタブは Monaco モデルを持たない (model=null)。テキスト/バイナリのみ破棄する。
+  if (tab.model) tab.model.dispose();
   if (wasActive) {
     currentPath = null;
     const next = openTabs[idx] || openTabs[idx - 1];
     if (next) {
       activateEditorTab(next.path);
     } else {
+      hideMediaView();
+      hideArchiveView();
       editor.setModel(null);
       document.getElementById('app').classList.add('no-tabs');
       setPathLabel('(ファイル未選択)');
       setDirty(false);
       setSaveStatus('');
+      updateEolStatus();
       document.querySelectorAll('#file-list li.file.active').forEach(x => x.classList.remove('active'));
     }
   }
@@ -545,16 +667,21 @@ async function deleteSelectedPaths(paths) {
   if (!ok) return;
 
   const errors = [];
+  const parents = new Set();
   for (const path of paths) {
     try {
       await fsPost('/edit/fs/delete', { path });
       forgetDeletedPath(path);
+      parents.add(parentDir(path));
     } catch (err) {
       errors.push(path + ': ' + err.message);
     }
   }
   clearMultiSelection();
-  await loadFiles();
+  // 影響した親階層を浅い順に描き直す (親を描き直すと子は取り直されるため重複しても安全)。
+  for (const dir of [...parents].sort((a, b) => a.split('/').length - b.split('/').length)) {
+    await refreshDir(dir);
+  }
   if (errors.length > 0) alert('一部の削除に失敗しました:\n' + errors.join('\n'));
 }
 
@@ -577,6 +704,199 @@ function openFileByPath(path) {
   return openFile(path, li);
 }
 
+// ---- メディアプレビュー (画像 / PDF / 動画 / 音声) ----
+// メディアタブがアクティブなときだけ #media-view を表示し、Monaco を隠す。
+// 生ファイルは /edit/raw?path= から取得する (種別ごとの Content-Type / Range 対応)。
+
+// 現在 #media-view に載せている <video>/<audio> を止めるために保持する。
+let currentMediaEl = null;
+
+function rawUrl(path) {
+  return '/edit/raw?path=' + encodeURIComponent(path);
+}
+
+function showMediaView(tab) {
+  const app = document.getElementById('app');
+  const view = document.getElementById('media-view');
+  stopCurrentMedia();
+  view.innerHTML = '';
+  app.classList.add('show-media');
+  // PDF は縁まで使いたいので専用クラスで padding を外す (CSS 側で制御)。
+  app.classList.toggle('media-pdf', tab.media === 'pdf');
+
+  const url = rawUrl(tab.path);
+  const name = tab.path.split('/').pop();
+  let el;
+  switch (tab.media) {
+    case 'image':
+      el = document.createElement('img');
+      el.className = 'media-image';
+      el.alt = name;
+      el.src = url;
+      el.onerror = () => showMediaError(view, '画像を読み込めませんでした');
+      view.appendChild(el);
+      break;
+    case 'pdf':
+      el = document.createElement('iframe');
+      el.className = 'media-pdf';
+      el.title = name;
+      el.src = url;
+      view.appendChild(el);
+      break;
+    case 'video':
+      el = document.createElement('video');
+      el.className = 'media-video';
+      el.src = url;
+      el.controls = true;
+      el.onerror = () => showMediaError(view,
+        'この動画はブラウザで再生できない形式の可能性があります (' + name + ')');
+      view.appendChild(el);
+      currentMediaEl = el;
+      break;
+    case 'audio': {
+      const card = document.createElement('div');
+      card.className = 'media-audio-card';
+      const label = document.createElement('div');
+      label.className = 'media-audio-name';
+      label.textContent = '🎵 ' + name;
+      el = document.createElement('audio');
+      el.className = 'media-audio';
+      el.src = url;
+      el.controls = true;
+      el.onerror = () => showMediaError(view,
+        'この音声はブラウザで再生できない形式の可能性があります (' + name + ')');
+      card.appendChild(label);
+      card.appendChild(el);
+      view.appendChild(card);
+      currentMediaEl = el;
+      break;
+    }
+    default:
+      showMediaError(view, 'このファイルはプレビューできません');
+  }
+}
+
+function showMediaError(view, message) {
+  const p = document.createElement('div');
+  p.className = 'media-error';
+  p.textContent = message;
+  view.appendChild(p);
+}
+
+// 再生中のメディアを止める (タブ切り替え/クローズ時に音が鳴り続けないように)。
+function stopCurrentMedia() {
+  if (currentMediaEl) {
+    try { currentMediaEl.pause(); } catch (e) { /* 既に破棄済み等は無視 */ }
+    currentMediaEl = null;
+  }
+}
+
+function hideMediaView() {
+  const app = document.getElementById('app');
+  if (!app.classList.contains('show-media')) return;
+  stopCurrentMedia();
+  app.classList.remove('show-media', 'media-pdf');
+  document.getElementById('media-view').innerHTML = '';
+}
+
+// ---- アーカイブプレビュー (zip / tar / tar.gz / bz2 等) ----
+// 第一階層 (トップレベル) のエントリとメタデータを /edit/archive?path= から取得して表示する。
+
+// バイト数を人間可読 (KB/MB 等) に整形する。null/未定義は空文字。
+function formatBytes(n) {
+  if (n == null || isNaN(n)) return '';
+  if (n < 1024) return n + ' B';
+  const units = ['KB', 'MB', 'GB', 'TB'];
+  let v = n / 1024, i = 0;
+  while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
+  return (v < 10 ? v.toFixed(1) : Math.round(v)) + ' ' + units[i];
+}
+
+// アーカイブ形式のバッジ表示名。
+const ARCHIVE_KIND_LABELS = {
+  tar_or_zip: 'ARCHIVE', gz: 'GZIP', bz2: 'BZIP2'
+};
+
+async function showArchiveView(tab) {
+  const app = document.getElementById('app');
+  const view = document.getElementById('archive-view');
+  app.classList.add('show-archive');
+  const name = tab.path.split('/').pop();
+  view.innerHTML = '<div class="archive-empty">読み込み中…</div>';
+
+  let data;
+  try {
+    const r = await fetch('/edit/archive?path=' + encodeURIComponent(tab.path));
+    data = await r.json();
+    if (!r.ok) throw new Error(data.error || 'アーカイブを読み取れませんでした');
+  } catch (err) {
+    // 取得中にタブが切り替わっていたら描画しない。
+    if (currentPath !== tab.path) return;
+    view.innerHTML = '';
+    view.appendChild(el('div', 'archive-error', '⚠ ' + err.message));
+    return;
+  }
+  if (currentPath !== tab.path) return; // 取得中に別タブへ切り替わっていたら破棄。
+  renderArchive(view, name, data);
+}
+
+// 単純な要素生成ヘルパ (class と textContent 付き)。
+function el(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+}
+
+function renderArchive(view, name, data) {
+  view.innerHTML = '';
+
+  // ヘッダー (ファイル名 + 形式バッジ)。
+  const head = el('div', 'archive-head');
+  head.appendChild(el('span', 'archive-name', '📦 ' + name));
+  head.appendChild(el('span', 'archive-kind', ARCHIVE_KIND_LABELS[data.archive] || 'ARCHIVE'));
+  view.appendChild(head);
+
+  // メタデータ行 (エントリ数 / 合計サイズ / 圧縮サイズ)。
+  const meta = el('div', 'archive-meta');
+  const entryCount = data.total_entries != null ? data.total_entries : (data.entries || []).length;
+  meta.appendChild(el('span', null, entryCount + ' エントリ'));
+  if (data.total_size != null) meta.appendChild(el('span', null, '展開後 ' + formatBytes(data.total_size)));
+  if (data.compressed_size != null) meta.appendChild(el('span', null, '圧縮 ' + formatBytes(data.compressed_size)));
+  if (data.capped) meta.appendChild(el('span', 'archive-capped', '(一部のみ表示)'));
+  view.appendChild(meta);
+
+  // エントリ一覧 (第一階層)。
+  const entries = data.entries || [];
+  if (entries.length === 0) {
+    view.appendChild(el('div', 'archive-empty', '（エントリがありません）'));
+    return;
+  }
+  const ul = el('ul', 'archive-list');
+  for (const ent of entries) {
+    const li = el('li');
+    li.appendChild(el('span', 'a-icon', ent.dir ? '📁' : fileIcon(ent.name)));
+    li.appendChild(el('span', 'a-name', ent.name + (ent.dir ? '/' : '')));
+    // ディレクトリは配下件数、ファイルはサイズを右側に添える。
+    let sub = '';
+    if (ent.dir) {
+      if (ent.child_count != null) sub = ent.child_count + ' 項目';
+    } else if (ent.size != null) {
+      sub = formatBytes(ent.size);
+    }
+    if (sub) li.appendChild(el('span', 'a-sub', sub));
+    ul.appendChild(li);
+  }
+  view.appendChild(ul);
+}
+
+function hideArchiveView() {
+  const app = document.getElementById('app');
+  if (!app.classList.contains('show-archive')) return;
+  app.classList.remove('show-archive');
+  document.getElementById('archive-view').innerHTML = '';
+}
+
 async function openFile(path, li) {
   if (!editor) return;
   // 既に開いているファイルなら、そのタブへ切り替えるだけ (再フェッチしない)。
@@ -586,6 +906,24 @@ async function openFile(path, li) {
   const data = await r.json();
   if (!r.ok) { alert(data.error || 'open failed'); return; }
 
+  // 画像 / PDF / 動画 / 音声はメディアタブとして開く (Monaco モデルは持たない)。
+  if (data.media) {
+    const tab = { path, model: null, viewState: null, dirty: false,
+                  binary: false, media: data.media, archive: false };
+    openTabs.push(tab);
+    activateEditorTab(path, li);
+    return;
+  }
+
+  // zip / tar 等のアーカイブは第一階層一覧タブとして開く (Monaco モデルは持たない)。
+  if (data.archive) {
+    const tab = { path, model: null, viewState: null, dirty: false,
+                  binary: false, media: null, archive: true };
+    openTabs.push(tab);
+    activateEditorTab(path, li);
+    return;
+  }
+
   // 新しいモデルを作ってタブに紐づける (以後このモデルが内容・undo 履歴を保持する)。
   const binary = !!data.binary;
   const content = binary
@@ -593,11 +931,45 @@ async function openFile(path, li) {
     : (data.content || '');
   const lang = binary ? 'plaintext' : langOf(path);
   const model = monaco.editor.createModel(content, lang);
-  const tab = { path, model, viewState: null, dirty: false, binary };
+  // 元ファイルの改行コードをモデルへ反映する (Monaco は既定で LF に正規化してしまうため、
+  // CRLF のファイルを開いて保存すると LF に化ける。開いた時点の実際の改行を尊重する)。
+  if (!binary) {
+    const crlf = /\r\n/.test(content);
+    model.setEOL(crlf ? monaco.editor.EndOfLineSequence.CRLF
+                      : monaco.editor.EndOfLineSequence.LF);
+  }
+  const tab = { path, model, viewState: null, dirty: false, binary, media: null, archive: false };
   openTabs.push(tab);
   activateEditorTab(path, li);
 }
 
+// ステータスバーの改行コード表示を更新する。テキストを編集できるタブ (通常タブ) の
+// ときだけ CRLF/LF を表示し、それ以外 (未選択・メディア・アーカイブ・バイナリ) では隠す。
+function updateEolStatus() {
+  const btn = document.getElementById('statusbar-eol');
+  const nameEl = document.getElementById('statusbar-eol-name');
+  if (!btn || !nameEl) return;
+  const tab = currentPath ? findTab(currentPath) : null;
+  const editable = tab && tab.model && !tab.media && !tab.archive && !tab.binary;
+  if (!editable) { btn.hidden = true; return; }
+  btn.hidden = false;
+  nameEl.textContent = tab.model.getEOL() === '\r\n' ? 'CRLF' : 'LF';
+}
+
+// ステータスバーの改行コードをクリックしたときに CRLF ⇄ LF を切り替える。
+// 切り替えは内容の編集にあたるので dirty 扱いにし、自動保存の有無はエディタ設定に従う
+// (setDirty → scheduleAutoSave。自動保存が OFF なら手動 Ctrl+S まで保存されない)。
+function toggleEol() {
+  const tab = currentPath ? findTab(currentPath) : null;
+  if (!tab || !tab.model || tab.media || tab.archive || tab.binary) return;
+  const toCrlf = tab.model.getEOL() !== '\r\n';
+  tab.model.setEOL(toCrlf ? monaco.editor.EndOfLineSequence.CRLF
+                          : monaco.editor.EndOfLineSequence.LF);
+  updateEolStatus();
+  setDirty(true);
+  scheduleAutoSave();
+}
+
 // 指定パスのエディタタブをアクティブにする。Monaco のモデルを差し替え、ビュー状態を復元する。
 // (ターミナルタブ用の activateTab とは別関数なので名前を分けている)
 function activateEditorTab(path, li) {
@@ -617,15 +989,34 @@ function activateEditorTab(path, li) {
   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();
+  if (tab.media) {
+    // メディアタブ: Monaco はモデルを外して隠し、メディアビューアを表示する。
+    hideArchiveView();
+    suppressChangeEvent = true;
+    editor.setModel(null);
+    suppressChangeEvent = false;
+    showMediaView(tab);
+  } else if (tab.archive) {
+    // アーカイブタブ: Monaco を隠し、第一階層一覧を表示する。
+    hideMediaView();
+    suppressChangeEvent = true;
+    editor.setModel(null);
+    suppressChangeEvent = false;
+    showArchiveView(tab);
+  } else {
+    hideMediaView();
+    hideArchiveView();
+    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('');
+  updateEolStatus();
   renderEditorTabs();
 
   // ファイル一覧側のハイライトを同期する (li が渡されなければパスから探す)。
@@ -693,6 +1084,9 @@ async function saveCurrent(opts) {
   // ファイル未選択で手動保存 (Ctrl+S / メニュー) されたときは、保存先を尋ねる
   // ダイアログを開く (自動保存はそもそも未選択時は動かないので auto では出さない)。
   if (!currentPath) { if (!auto) openSaveAsDialog(); return; }
+  // メディア/アーカイブタブは編集対象ではないので保存しない。
+  const cur = findTab(currentPath);
+  if (cur && (cur.media || cur.archive)) return;
   // バイナリ表示中 (readOnly) は保存しない (プレースホルダで上書きしないため)。
   if (editor.getRawOptions && editor.getRawOptions().readOnly) return;
   if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
@@ -764,7 +1158,7 @@ async function confirmSaveAs() {
     return;
   }
   closeSaveAsDialog();
-  await loadFiles(true);
+  await refreshTree();
   // 新規タブとして開く (currentPath/パス表示/dirty は openFile 内で設定される)。
   await openFileByPath(path);
   setSaveStatus('saved');
@@ -892,7 +1286,7 @@ 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-reload').onclick = () => refreshTree();
 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); };
@@ -1439,12 +1833,14 @@ function addCompactSummary(text) {
 
 // 最終結果に伴うエディタ反映とファイル一覧更新 (描画とは分離した副作用処理)。
 function applyResultSideEffects(data) {
-  if (data.content != null && editor && currentPath) {
+  const curTab = currentPath ? findTab(currentPath) : null;
+  // メディア/アーカイブタブ表示中は Monaco にモデルが無いので content を流し込まない。
+  if (data.content != null && editor && currentPath && !(curTab && (curTab.media || curTab.archive))) {
     if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
     setEditorValue(data.content); // AI が編集した最新内容を反映 (既にディスクへ保存済みなので dirty にはしない)
     setDirty(false);
   }
-  loadFiles(true); // AI 実行後は確実に反映する (新規ファイルが増えている可能性)
+  refreshTree(); // AI 実行後は確実に反映する (新規ファイルが増えている可能性)
 }
 
 // pending 行に既にツール実行の進捗が描画済みのとき、それを消さずにそのまま
@@ -2072,6 +2468,7 @@ async function gitCheckout(branch, create) {
 }
 
 document.getElementById('statusbar-branch').onclick = () => openBranchDialog();
+document.getElementById('statusbar-eol').onclick = () => toggleEol();
 document.getElementById('branch-cancel').onclick = closeBranchDialog;
 document.getElementById('branch-close').onclick = closeBranchDialog;
 document.getElementById('branch-create').onclick = () => {
@@ -2122,7 +2519,7 @@ remoteUrlInput.addEventListener('keydown', (e) => {
 initDraggableWindow(remoteDialog);
 
 // ---- 起動 ----
-loadFiles(true);
+refreshTree();
 initConsole();
 initResizers();
 initMenu();