chocomint 1.0.3 → 1.1.1

data/public/edit/edit.js

@@ -165,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: '🐳',
@@ -612,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'));
     }
   }
@@ -677,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;
   // 既に開いているファイルなら、そのタブへ切り替えるだけ (再フェッチしない)。
@@ -686,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
@@ -693,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) {
@@ -717,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 が渡されなければパスから探す)。
@@ -793,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; }
@@ -1166,7 +1460,23 @@ function addPendingMsg() {
   sp.textContent = SPINNER_FRAMES[0];
   head.appendChild(sp);
   head.appendChild(document.createTextNode(' AI 考え中...'));
+  // 経過時間をリアルタイム表示 (例: 30s)。1 秒ごとに更新する。
+  const elapsed = document.createElement('span');
+  elapsed.className = 'pending-elapsed';
+  head.appendChild(elapsed);
   b.appendChild(head);
+  const startedAt = Date.now();
+  const updateElapsed = () => {
+    elapsed.textContent = '(' + Math.floor((Date.now() - startedAt) / 1000) + 's)';
+  };
+  updateElapsed();
+  const elapsedTimer = setInterval(updateElapsed, 1000);
+  div._startedAt = startedAt;
+  // 経過秒 (実行時間) を確定して返す。タイマーも止める (二重停止は無害)。
+  div._finishElapsed = () => {
+    clearInterval(elapsedTimer);
+    return Math.round((Date.now() - startedAt) / 1000);
+  };
   // ツール実行の進捗行を並べるコンテナ (SSE の tool_start / tool_done で更新)。
   const tools = document.createElement('div');
   tools.className = 'pending-tools';
@@ -1178,6 +1488,7 @@ function addPendingMsg() {
   // remove 時に回転対象からも外す (ツール行のスピナーも含めて)。
   const origRemove = div.remove.bind(div);
   div.remove = () => {
+    clearInterval(elapsedTimer);
     spinnerTargets.delete(sp);
     tools.querySelectorAll('.pending-spinner').forEach(s => spinnerTargets.delete(s));
     origRemove();
@@ -1245,6 +1556,24 @@ function pendingToolDone(pending, ev) {
   chatLog.scrollTop = chatLog.scrollHeight;
 }
 
+// trace_id に対応する監査ログ (実行の詳細) の URL。エディタと同一オリジンで開ける。
+function traceLogHref(traceId) {
+  return '/logs?trace_id=' + encodeURIComponent(traceId);
+}
+
+// 完了マーク (✓/✕) とツール名を、その実行の監査ログへのリンクにする。
+// trace_id が判明した時点 (result 受信後) に呼ぶ。既にリンク済みなら href だけ更新する。
+function linkToolRow(row, traceId) {
+  if (!traceId) return;
+  const href = traceLogHref(traceId);
+  const title = 'この実行の監査ログを開く';
+  row.querySelectorAll('.ptool-mark, .ptool-label, .step-mark, .step-label').forEach(el => {
+    el.classList.add('log-link');
+    el.onclick = () => window.open(href, '_blank', 'noopener');
+    el.title = title;
+  });
+}
+
 // 軽量 Markdown → HTML 変換 (外部ライブラリ非依存 / オフライン用)。
 // XSS 防止のため、まず全体を HTML エスケープしてから Markdown 記法だけを HTML 化する。
 function escapeHtml(s) {
@@ -1335,12 +1664,19 @@ function addUserMsg(text) {
 }
 
 // AI 発言: 枠なしの地の文 (ラベルなし)。回答は Markdown として描画する。
-function addAiMsg(text) {
+// elapsedSec: 実行時間 (秒)。渡されれば発言の下に控えめに「実行時間 Ns」を添える。
+function addAiMsg(text, elapsedSec) {
   const div = document.createElement('div');
   div.className = 'msg ai';
   const b = document.createElement('div');
   b.className = 'bubble markdown';
   b.innerHTML = renderMarkdown(text);
+  if (elapsedSec != null) {
+    const meta = document.createElement('div');
+    meta.className = 'msg-elapsed';
+    meta.textContent = '実行時間 ' + elapsedSec + 's';
+    b.appendChild(meta);
+  }
   div.appendChild(b);
   chatLog.appendChild(div);
   chatLog.scrollTop = chatLog.scrollHeight;
@@ -1349,7 +1685,7 @@ function addAiMsg(text) {
 
 // 実行ステップ 1 件を「番号・ツールラベル・対象・成否・出力」の構造で描画する。
 // 生 JSON をそのまま出さず、人間が追える形にするのが目的。
-function renderStep(s, no) {
+function renderStep(s, no, traceId) {
   const st = document.createElement('div');
   st.className = 'step' + (s.status === 'PASS' ? '' : ' failed');
 
@@ -1383,6 +1719,9 @@ function renderStep(s, no) {
 
   st.appendChild(head);
 
+  // trace_id があれば、完了マークとツール名をこの実行の監査ログへのリンクにする。
+  if (traceId) linkToolRow(st, traceId);
+
   // 出力は改行を保った等幅ブロックで表示。空なら控えめに「(出力なし)」。
   const out = document.createElement('code');
   out.className = 'out';
@@ -1397,9 +1736,10 @@ function renderStep(s, no) {
 }
 
 // AI の実行結果 (ステータスバッジ + 返信 + 各ツールの出力) を描画する。
-function renderAiResult(data) {
+// elapsedSec: 実行時間 (秒)。渡されればバッジに「実行時間 Ns」を添える。
+function renderAiResult(data, elapsedSec) {
   // 会話応答 (ツール実行なし) は自然文だけを地の文として表示する。
-  if (data.reply) return addAiMsg(data.reply);
+  if (data.reply) return addAiMsg(data.reply, elapsedSec);
 
   const status = data.status || 'FAIL';
   const div = document.createElement('div');
@@ -1411,7 +1751,9 @@ function renderAiResult(data) {
   badge.className = 'badge';
   const statusText = status === 'PASS' ? '✓ 完了' : '✕ 失敗';
   // attempts は「LLM への試行回数」。1 回なら冗長なので添えない。
-  badge.textContent = statusText + (data.attempts > 1 ? ' · 試行 ' + data.attempts + ' 回' : '');
+  badge.textContent = statusText +
+    (data.attempts > 1 ? ' · 試行 ' + data.attempts + ' 回' : '') +
+    (elapsedSec != null ? ' · 実行時間 ' + elapsedSec + 's' : '');
   b.appendChild(badge);
 
   // AI による実行結果の要約 (Markdown)。生のツール出力より上に目立たせて表示。
@@ -1440,7 +1782,7 @@ function renderAiResult(data) {
   if (steps.length) {
     const wrap = document.createElement('div');
     wrap.className = 'steps';
-    steps.forEach((s, i) => wrap.appendChild(renderStep(s, i + 1)));
+    steps.forEach((s, i) => wrap.appendChild(renderStep(s, i + 1, data.trace_id)));
     // 要約があるときは実行の詳細を折りたたむ (まとめを主役にする)。
     if (data.summary) {
       const det = document.createElement('details');
@@ -1476,7 +1818,8 @@ function clearChat() {
 }
 
 // 現在のチャット表示テキストを AI に要約させ、ログを短い要約 1 件に畳み込む。
-// サーバー側は会話履歴を保持しないため、これは表示の圧縮のみ (AI の文脈には影響しない)。
+// 履歴は表示ログから毎回組み立てて送るため、これでログを畳めば次回送信の
+// history も要約後の短い文脈に置き換わる (肥大化を防ぐ)。
 async function compactChat() {
   const transcript = collectTranscript();
   if (!transcript.trim()) { clearChat(); return; }
@@ -1518,6 +1861,20 @@ function collectTranscript() {
   return lines.join('\n');
 }
 
+// これまでのチャットログを /edit/chat に渡す履歴配列に書き出す。
+// サーバーは会話履歴を保持しないため、送信のたびに表示済みログから組み立てて送る。
+function collectChatHistory() {
+  const history = [];
+  chatLog.querySelectorAll('.msg').forEach(m => {
+    // pending (AI 考え中) 行はまだ確定した発言ではないので含めない。
+    if (m.querySelector('.pending-head')) return;
+    const role = m.classList.contains('user') ? 'user' : 'assistant';
+    const text = (m.textContent || '').replace(/\s+/g, ' ').trim();
+    if (text) history.push({ role, content: text });
+  });
+  return history;
+}
+
 // /compact の結果 (これまでの会話のまとめ) を専用の見出し付きで表示する。
 function addCompactSummary(text) {
   const div = document.createElement('div');
@@ -1539,7 +1896,9 @@ 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);
@@ -1559,11 +1918,19 @@ function finalizePending(pending, data) {
   const badge = document.createElement('span');
   badge.className = 'badge';
   const statusText = status === 'PASS' ? '✓ 完了' : '✕ 失敗';
-  badge.textContent = statusText + (data.attempts > 1 ? ' · 試行 ' + data.attempts + ' 回' : '');
+  const elapsedSec = pending._finishElapsed ? pending._finishElapsed() : null;
+  badge.textContent = statusText +
+    (data.attempts > 1 ? ' · 試行 ' + data.attempts + ' 回' : '') +
+    (elapsedSec != null ? ' · 実行時間 ' + elapsedSec + 's' : '');
   if (head) head.replaceWith(badge); else b.insertBefore(badge, b.firstChild);
 
-  // 要約 (Markdown) はツール一覧の上に目立たせて置く。
+  // trace_id が判明したので、各ツール行 (完了マーク + ツール名) を監査ログへのリンクにする。
   const tools = pending._toolsEl;
+  if (data.trace_id && tools) {
+    tools.querySelectorAll('.ptool').forEach(row => linkToolRow(row, data.trace_id));
+  }
+
+  // 要約 (Markdown) はツール一覧の上に目立たせて置く。
   if (data.summary) {
     const sum = document.createElement('div');
     sum.className = 'summary markdown';
@@ -1599,8 +1966,10 @@ function handleChatEvent(pending, evName, dataStr) {
     // 会話応答 (reply) はツール実行が無いので、pending を消して地の文で表示。
     // ツール実行があった場合は、進捗表示を消さずにその場で仕上げる。
     if (data.reply || !pending._hadTool) {
+      // pending 破棄前に実行時間を確定して結果表示へ渡す。
+      const elapsedSec = pending._finishElapsed ? pending._finishElapsed() : null;
       pending.remove();
-      renderAiResult(data);
+      renderAiResult(data, elapsedSec);
     } else {
       finalizePending(pending, data);
     }
@@ -1610,8 +1979,9 @@ function handleChatEvent(pending, evName, dataStr) {
     if (pending._hadTool) {
       finalizePending(pending, { status: 'FAIL', error: data.error || 'エラー' });
     } else {
+      const elapsedSec = pending._finishElapsed ? pending._finishElapsed() : null;
       pending.remove();
-      renderAiResult({ status: 'FAIL', error: data.error || 'エラー' });
+      renderAiResult({ status: 'FAIL', error: data.error || 'エラー' }, elapsedSec);
     }
   }
 }
@@ -1621,6 +1991,8 @@ async function sendChat() {
   if (!instruction) return;
   // /clear /compact はローカルコマンド (AI へは送らない)。
   if (handleSlashCommand(instruction)) return;
+  // 今回の発言を DOM に足す前に、これまでのログを履歴として集めておく。
+  const history = collectChatHistory();
   chatInput.value = '';
   addUserMsg(instruction);
   chatForm.classList.add('busy');
@@ -1630,13 +2002,14 @@ async function sendChat() {
   try {
     const r = await fetch('/edit/chat', {
       method: 'POST', headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ path: currentPath || '', instruction, stream: true })
+      body: JSON.stringify({ path: currentPath || '', instruction, history, stream: true })
     });
     if (!r.ok || !r.body) {
       // SSE を開始できなかった場合は本文を JSON として読んでフォールバック。
       const data = await r.json().catch(() => ({ status: 'FAIL', error: r.status + ' error' }));
+      const elapsedSec = pending._finishElapsed ? pending._finishElapsed() : null;
       pending.remove();
-      renderAiResult(data);
+      renderAiResult(data, elapsedSec);
       applyResultSideEffects(data);
       return;
     }
@@ -1661,8 +2034,9 @@ async function sendChat() {
       }
     }
   } catch (err) {
+    const elapsedSec = pending._finishElapsed ? pending._finishElapsed() : null;
     pending.remove();
-    renderAiResult({ status: 'FAIL', error: 'エラー: ' + err.message });
+    renderAiResult({ status: 'FAIL', error: 'エラー: ' + err.message }, elapsedSec);
   } finally {
     stopSpinner();
     chatForm.classList.remove('busy');
@@ -2172,6 +2546,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 = () => {
@@ -2221,6 +2596,119 @@ remoteUrlInput.addEventListener('keydown', (e) => {
 });
 initDraggableWindow(remoteDialog);
 
+// ---- モデル選択 (ステータスバー) ----
+const modelDialog = document.getElementById('model-dialog');
+const modelNameEl = document.getElementById('statusbar-model-name');
+const modelOllamaSelect = document.getElementById('model-ollama-select');
+const modelOllamaEmpty = document.getElementById('model-ollama-empty');
+const modelOpenrouterInput = document.getElementById('model-openrouter-input');
+const modelOpenrouterReady = document.getElementById('model-openrouter-ready');
+const modelOpenrouterNokey = document.getElementById('model-openrouter-nokey');
+const modelError = document.getElementById('model-error');
+// ダイアログ内で選択中の provider ("ollama" | "openrouter")。
+let modelSelectedProvider = 'ollama';
+// /edit/models の直近の応答 (現在値と選択肢) を保持する。
+let modelInfo = null;
+
+// ステータスバーのモデル名を更新する (起動時と切り替え成功時に呼ぶ)。
+function updateModelStatus(provider, model) {
+  if (!modelNameEl) return;
+  modelNameEl.textContent = model || 'モデル未設定';
+  const btn = document.getElementById('statusbar-model');
+  if (btn) btn.title = `AI モデルを選択 (現在: ${provider} / ${model || '未設定'})`;
+}
+
+// 起動時に現在のモデルを取得してステータスバーに表示する。
+async function initModelStatus() {
+  try {
+    modelInfo = await gitFetch('/edit/models');
+    updateModelStatus(modelInfo.provider, modelInfo.model);
+  } catch {
+    // 取得に失敗しても致命的ではない。"—" 表示のままにする。
+  }
+}
+
+// provider タブを切り替えて対応ペインを表示する。
+function selectModelProvider(provider) {
+  modelSelectedProvider = provider;
+  modelError.textContent = '';
+  document.getElementById('model-tab-ollama').classList.toggle('active', provider === 'ollama');
+  document.getElementById('model-tab-openrouter').classList.toggle('active', provider === 'openrouter');
+  document.getElementById('model-pane-ollama').hidden = provider !== 'ollama';
+  document.getElementById('model-pane-openrouter').hidden = provider !== 'openrouter';
+}
+
+async function openModelDialog() {
+  modelError.textContent = '';
+  // 開くたびに最新の情報 (インストール済みモデル・OpenRouter 可否) を取り直す。
+  try {
+    modelInfo = await gitFetch('/edit/models');
+  } catch (err) {
+    modelInfo = modelInfo || { provider: 'ollama', model: '', ollama_models: [], openrouter_available: false };
+  }
+  updateModelStatus(modelInfo.provider, modelInfo.model);
+
+  // Ollama: インストール済みモデルを select に流し込み、現在値を選択する。
+  modelOllamaSelect.innerHTML = '';
+  const models = modelInfo.ollama_models || [];
+  models.forEach(name => {
+    const opt = document.createElement('option');
+    opt.value = name; opt.textContent = name;
+    modelOllamaSelect.appendChild(opt);
+  });
+  modelOllamaEmpty.hidden = models.length > 0;
+  modelOllamaSelect.hidden = models.length === 0;
+  if (modelInfo.provider === 'ollama' && modelInfo.model && models.includes(modelInfo.model)) {
+    modelOllamaSelect.value = modelInfo.model;
+  }
+
+  // OpenRouter: キーがあれば入力欄、無ければ案内を表示する。
+  const orAvailable = !!modelInfo.openrouter_available;
+  modelOpenrouterReady.hidden = !orAvailable;
+  modelOpenrouterNokey.hidden = orAvailable;
+  modelOpenrouterInput.value = modelInfo.provider === 'openrouter' ? (modelInfo.model || '') : '';
+
+  selectModelProvider(modelInfo.provider || 'ollama');
+  centerWindow(modelDialog);
+}
+
+function closeModelDialog() { modelDialog.hidden = true; }
+
+async function applyModel() {
+  modelError.textContent = '';
+  let model = '';
+  if (modelSelectedProvider === 'ollama') {
+    model = modelOllamaSelect.value;
+    if (!model) { modelError.textContent = 'モデルを選択してください'; return; }
+  } else {
+    model = modelOpenrouterInput.value.trim();
+    if (!model) { modelError.textContent = 'モデル ID を入力してください'; return; }
+  }
+  const okBtn = document.getElementById('model-ok');
+  okBtn.disabled = true;
+  try {
+    const data = await gitPost('/edit/model', { provider: modelSelectedProvider, model });
+    updateModelStatus(data.provider, data.model);
+    closeModelDialog();
+  } catch (err) {
+    modelError.textContent = err.message;
+  } finally {
+    okBtn.disabled = false;
+  }
+}
+
+document.getElementById('statusbar-model').onclick = () => openModelDialog();
+document.getElementById('model-tab-ollama').onclick = () => selectModelProvider('ollama');
+document.getElementById('model-tab-openrouter').onclick = () => selectModelProvider('openrouter');
+document.getElementById('model-ok').onclick = () => applyModel();
+document.getElementById('model-cancel').onclick = closeModelDialog;
+document.getElementById('model-close').onclick = closeModelDialog;
+modelOpenrouterInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') { e.preventDefault(); applyModel(); }
+  else if (e.key === 'Escape') { e.preventDefault(); closeModelDialog(); }
+});
+initDraggableWindow(modelDialog);
+
 // ---- 起動 ----
 refreshTree();
 initConsole();
@@ -2230,6 +2718,7 @@ initPanelView();
 initFilesTab();
 setAutoSave(autoSaveEnabled); // メニューのチェック表示を保存済み設定に合わせる
 refreshGitPanel();
+initModelStatus();
 
 // 自動保存 (debounce) が確定する前にタブを閉じようとした場合に警告する。
 window.addEventListener('beforeunload', (e) => {