chocomint 1.1.0 → 1.1.2

data/public/edit/edit.js

@@ -1460,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';
@@ -1472,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();
@@ -1539,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) {
@@ -1551,14 +1586,24 @@ function renderMarkdown(src) {
     codeBlocks.push(code.replace(/^\n/, ''));
     return ' CB' + (codeBlocks.length - 1) + ' ';
   });
+  // ローカル LLM は番号付きリストを改行せず「1. … 2. … 3. …」と 1 行で返すことがある。
+  // 行頭以外に現れる番号マーカー ( "2." など。前が空白/全角空白) の直前で改行して、
+  // 各項目を独立した行に分割する (箇条書きとして描画できるようにするため)。
+  text = text.replace(/[ 　]+(?=\d+\.[ 　])/g, '\n');
+
   const lines = text.split('\n');
   let html = '';
-  let inList = false;
-  const closeList = () => { if (inList) { html += '</ul>'; inList = false; } };
+  let listTag = null; // 開いているリストの種類 ('ul' / 'ol' / null)
+  const closeList = () => { if (listTag) { html += '</' + listTag + '>'; listTag = null; } };
+  const openList = (tag) => {
+    if (listTag !== tag) { closeList(); html += '<' + tag + '>'; listTag = tag; }
+  };
   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+(.*)$/);
+    // 番号付きリスト: 「1. 内容」「2) 内容」など。
+    const oli = line.match(/^\s*\d+[.)][ 　]+(.*)$/);
     // GFM テーブル: 「| 見出し |」+ 次行が区切り (|---|---|) なら表として処理。
     if (isTableRow(line) && i + 1 < lines.length && isTableDivider(lines[i + 1])) {
       closeList();
@@ -1572,8 +1617,11 @@ function renderMarkdown(src) {
       const lvl = h[1].length;
       html += '<h' + lvl + '>' + inline(h[2]) + '</h' + lvl + '>';
     } else if (li) {
-      if (!inList) { html += '<ul>'; inList = true; }
+      openList('ul');
       html += '<li>' + inline(li[1]) + '</li>';
+    } else if (oli) {
+      openList('ol');
+      html += '<li>' + inline(oli[1]) + '</li>';
     } else if (line.trim() === '') {
       closeList();
     } else if (/^ CB\d+ $/.test(line)) {
@@ -1629,12 +1677,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;
@@ -1643,7 +1698,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');
 
@@ -1677,6 +1732,9 @@ function renderStep(s, no) {
 
   st.appendChild(head);
 
+  // trace_id があれば、完了マークとツール名をこの実行の監査ログへのリンクにする。
+  if (traceId) linkToolRow(st, traceId);
+
   // 出力は改行を保った等幅ブロックで表示。空なら控えめに「(出力なし)」。
   const out = document.createElement('code');
   out.className = 'out';
@@ -1691,9 +1749,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');
@@ -1705,7 +1764,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)。生のツール出力より上に目立たせて表示。
@@ -1734,7 +1795,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');
@@ -1770,7 +1831,8 @@ function clearChat() {
 }
 
 // 現在のチャット表示テキストを AI に要約させ、ログを短い要約 1 件に畳み込む。
-// サーバー側は会話履歴を保持しないため、これは表示の圧縮のみ (AI の文脈には影響しない)。
+// 履歴は表示ログから毎回組み立てて送るため、これでログを畳めば次回送信の
+// history も要約後の短い文脈に置き換わる (肥大化を防ぐ)。
 async function compactChat() {
   const transcript = collectTranscript();
   if (!transcript.trim()) { clearChat(); return; }
@@ -1800,18 +1862,41 @@ async function compactChat() {
   }
 }
 
+// メッセージ要素から「発言そのもの」のテキストだけを取り出す。
+// 実行時間 (.msg-elapsed) やステータスバッジ (.badge) などの UI 注記は
+// AI への履歴・要約に混ぜたくないので、複製から取り除いてから textContent を取る。
+function messageText(m) {
+  const clone = m.cloneNode(true);
+  clone.querySelectorAll('.msg-elapsed, .badge').forEach(el => el.remove());
+  return (clone.textContent || '').replace(/\s+/g, ' ').trim();
+}
+
 // チャットログを 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();
+    const text = messageText(m);
     if (text) lines.push(role + ': ' + text);
   });
   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 = messageText(m);
+    if (text) history.push({ role, content: text });
+  });
+  return history;
+}
+
 // /compact の結果 (これまでの会話のまとめ) を専用の見出し付きで表示する。
 function addCompactSummary(text) {
   const div = document.createElement('div');
@@ -1855,11 +1940,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';
@@ -1895,8 +1988,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);
     }
@@ -1906,8 +2001,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);
     }
   }
 }
@@ -1917,6 +2013,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');
@@ -1926,13 +2024,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;
     }
@@ -1957,8 +2056,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');
@@ -2518,6 +2618,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();
@@ -2527,6 +2740,7 @@ initPanelView();
 initFilesTab();
 setAutoSave(autoSaveEnabled); // メニューのチェック表示を保存済み設定に合わせる
 refreshGitPanel();
+initModelStatus();
 
 // 自動保存 (debounce) が確定する前にタブを閉じようとした場合に警告する。
 window.addEventListener('beforeunload', (e) => {

data/public/edit/index.html

@@ -146,6 +146,10 @@
       <button id="statusbar-eol" type="button" title="改行コードを切り替え" hidden>
         <span id="statusbar-eol-name">LF</span>
       </button>
+      <!-- モデル選択。現在の LLM モデル名を表示し、クリックでモデル設定ダイアログを開く。 -->
+      <button id="statusbar-model" type="button" title="AI モデルを選択">
+        <span class="statusbar-model-icon">◇</span><span id="statusbar-model-name">—</span>
+      </button>
     </div>
   </div>
   <div id="ctx-menu"></div>
@@ -250,6 +254,53 @@
     </div>
   </div>
 
+  <!-- モデル設定ダイアログ。ステータスバーのモデル名クリックで開く。
+       Ollama はインストール済みモデルから選択、OpenRouter はモデル ID を手入力する。-->
+  <div id="model-dialog" class="vwin" hidden>
+    <div class="vwin-titlebar">
+      <span class="vwin-title">AI モデル設定</span>
+      <button type="button" class="vwin-close" id="model-close" title="キャンセル" aria-label="キャンセル">×</button>
+    </div>
+    <div class="vwin-body">
+      <div class="model-tabs" role="tablist">
+        <button type="button" class="model-tab" id="model-tab-ollama" data-provider="ollama" role="tab">Ollama</button>
+        <button type="button" class="model-tab" id="model-tab-openrouter" data-provider="openrouter" role="tab">OpenRouter</button>
+      </div>
+
+      <!-- Ollama: インストール済みモデルから選ぶ。-->
+      <div class="model-pane" id="model-pane-ollama">
+        <label for="model-ollama-select">インストール済みモデル</label>
+        <select id="model-ollama-select"></select>
+        <p class="model-hint" id="model-ollama-empty" hidden>
+          Ollama に接続できないか、モデルが 1 つもインストールされていません。
+        </p>
+      </div>
+
+      <!-- OpenRouter: API キーがあればモデル ID を手入力。無ければ案内のみ表示。-->
+      <div class="model-pane" id="model-pane-openrouter" hidden>
+        <div id="model-openrouter-ready" hidden>
+          <label for="model-openrouter-input">モデル ID</label>
+          <input type="text" id="model-openrouter-input" autocomplete="off"
+                 placeholder="例: anthropic/claude-3.5-sonnet">
+          <p class="model-hint">
+            OpenRouter のモデル ID を入力してください
+            (<a href="https://openrouter.ai/models" target="_blank" rel="noopener">モデル一覧</a>)。
+          </p>
+        </div>
+        <p class="model-hint model-warn" id="model-openrouter-nokey" hidden>
+          環境変数 <code>OPENROUTER_API_KEY</code> が設定されていません。
+          設定してからサーバーを再起動すると OpenRouter が使えるようになります。
+        </p>
+      </div>
+
+      <div class="vwin-error" id="model-error"></div>
+    </div>
+    <div class="vwin-actions">
+      <button type="button" class="vwin-btn" id="model-cancel">キャンセル</button>
+      <button type="button" class="vwin-btn primary" id="model-ok">このモデルを使う</button>
+    </div>
+  </div>
+
   <script src="/edit/assets/xterm/xterm.js"></script>
   <script src="/edit/assets/xterm/addon-fit.js"></script>
   <script>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chocomint
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.1.2
 platform: ruby
 authors:
 - ひかり (Himeyama)