プロジェクト横断のタスク一覧と日別集計グラフを追加

左ペインに「すべてのプロジェクト」を追加し、全プロジェクトのタスクを1つの
一覧で扱えるようにした。あわせて右ペインに日別集計タブを設けた。

- /api/all: 全プロジェクトのタスクを開始日時順に返す (CSVはプロジェクト列付き)
- /api/daily: ターンをローカル日付で集計し、活動のない日も0で埋めて返す
  (プロジェクト別の内訳・期間指定 days= / 全期間・横持ちCSV)
- 日別集計タブ: 作業時間の棒グラフ (横断時はプロジェクト別の積み上げ、
  上位7件+その他)、14/30/90日・全期間の切替、日別テーブル、SVG手書きで
  外部ライブラリなし
- 再読込で横断モードの選択が先頭プロジェクトに戻る問題を修正
  (未選択と横断モードを state.project の undefined / null で区別)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app.js

@@ -1,7 +1,23 @@
 'use strict';
 
 const $ = (sel) => document.querySelector(sel);
-const state = { project: null, session: null, sessions: [], detail: null, relative: false };
+// project: null = プロジェクト横断モード, undefined = 未選択 / view: turns=やりとり, daily=日別集計
+const state = {
+  project: undefined,
+  projects: [],
+  sessionProject: null,
+  session: null,
+  sessions: [],
+  detail: null,
+  relative: false,
+  view: 'turns',
+  days: 30,
+  daily: null,
+};
+
+const PALETTE = ['#7aa2f7', '#9ece6a', '#e0af68', '#bb9af7', '#7dcfff', '#f7768e', '#73daca'];
+const OTHER_COLOR = '#565f73';
+const DOW = ['月', '火', '水', '木', '金', '土', '日'];
 
 // ---------------------------------------------------------------- 表示ヘルパ
 
@@ -71,9 +87,21 @@ async function api(path) {
 
 async function loadProjects() {
   const data = await api('/api/projects');
+  state.projects = data.projects;
   $('#root').textContent = data.root;
   const ul = $('#project-list');
   ul.innerHTML = '';
+
+  const all = document.createElement('li');
+  all.dataset.id = '';
+  all.className = 'all';
+  const totalSessions = data.projects.reduce((a, p) => a + p.sessions, 0);
+  const totalBytes = data.projects.reduce((a, p) => a + p.bytes, 0);
+  all.innerHTML = `<div class="p-path">すべてのプロジェクト</div>
+    <div class="p-meta">${totalSessions} タスク · ${fmtBytes(totalBytes)} · ${data.projects.length} プロジェクト</div>`;
+  all.onclick = () => selectProject(null);
+  ul.appendChild(all);
+
   data.projects.forEach((p) => {
     const li = document.createElement('li');
     li.dataset.id = p.id;
@@ -82,17 +110,22 @@ async function loadProjects() {
     li.onclick = () => selectProject(p.id);
     ul.appendChild(li);
   });
-  if (data.projects.length) selectProject(state.project && data.projects.some((p) => p.id === state.project) ? state.project : data.projects[0].id);
+
+  // 再読込では選択を保つ (null = 横断モードもそのまま)
+  if (state.project === undefined) state.project = data.projects.length ? data.projects[0].id : null;
+  else if (state.project && !data.projects.some((p) => p.id === state.project)) state.project = null;
+  selectProject(state.project);
 }
 
 async function selectProject(id) {
   state.project = id;
-  document.querySelectorAll('#project-list li').forEach((li) => li.classList.toggle('sel', li.dataset.id === id));
-  $('#csv-sessions').href = `/api/sessions?project=${encodeURIComponent(id)}&format=csv`;
+  document.querySelectorAll('#project-list li').forEach((li) => li.classList.toggle('sel', li.dataset.id === (id ?? '')));
+  $('#csv-sessions').href = id ? `/api/sessions?project=${encodeURIComponent(id)}&format=csv` : '/api/all?format=csv';
   const tbody = $('#session-table tbody');
   tbody.innerHTML = '<tr><td class="loading">解析中…</td></tr>';
+  if (state.view === 'daily') loadDaily();
   try {
-    const data = await api(`/api/sessions?project=${encodeURIComponent(id)}`);
+    const data = await api(id ? `/api/sessions?project=${encodeURIComponent(id)}` : '/api/all');
     state.sessions = data.sessions;
     renderSessions();
   } catch (e) {
@@ -103,7 +136,7 @@ async function selectProject(id) {
 function renderSessions() {
   const q = $('#filter').value.trim().toLowerCase();
   const rows = state.sessions.filter(
-    (s) => !q || (s.title + ' ' + s.firstPrompt + ' ' + s.lastPrompt).toLowerCase().includes(q)
+    (s) => !q || (s.title + ' ' + s.firstPrompt + ' ' + s.lastPrompt + ' ' + (s.projectPath || '')).toLowerCase().includes(q)
   );
   $('#sessions-title').textContent = `タスク ${rows.length}/${state.sessions.length}`;
   const tbody = $('#session-table tbody');
@@ -112,12 +145,14 @@ function renderSessions() {
     tbody.innerHTML = '<tr><td class="empty">該当なし</td></tr>';
     return;
   }
+  const cross = !state.project;
   rows.forEach((s) => {
     const tr = document.createElement('tr');
     tr.dataset.id = s.id;
     tr.className = s.id === state.session ? 'sel' : '';
     tr.innerHTML = `
       <td>
+        ${cross ? `<div class="s-proj" title="${esc(s.projectPath || '')}">${esc(shortPath(s.projectPath))}</div>` : ''}
         <div class="s-title">${esc(s.title)}</div>
         <div class="s-meta">
           <span class="s-when">${fmtDateTime(s.start)}</span>
@@ -127,20 +162,29 @@ function renderSessions() {
           ${s.gitBranch ? `<span>⑂ ${esc(s.gitBranch)}</span>` : ''}
         </div>
       </td>`;
-    tr.onclick = () => selectSession(s.id);
+    tr.onclick = () => selectSession(s.project || state.project, s.id);
     tbody.appendChild(tr);
   });
 }
 
+function shortPath(path) {
+  if (!path) return '(不明)';
+  const parts = String(path).split(/[\\/]/).filter(Boolean);
+  return parts.length > 2 ? '…' + parts.slice(-2).join('\\') : path;
+}
+
 // ---------------------------------------------------------------- 詳細
 
-async function selectSession(id) {
+async function selectSession(project, id) {
+  state.sessionProject = project;
   state.session = id;
+  state.view = 'turns';
+  syncTabs();
   document.querySelectorAll('#session-table tr').forEach((tr) => tr.classList.toggle('sel', tr.dataset.id === id));
-  $('#csv-turns').href = `/api/session?project=${encodeURIComponent(state.project)}&id=${encodeURIComponent(id)}&format=csv`;
+  updateCsv();
   $('#detail-body').innerHTML = '<p class="loading">読み込み中…</p>';
   try {
-    state.detail = await api(`/api/session?project=${encodeURIComponent(state.project)}&id=${encodeURIComponent(id)}`);
+    state.detail = await api(`/api/session?project=${encodeURIComponent(project)}&id=${encodeURIComponent(id)}`);
     renderDetail();
   } catch (e) {
     $('#detail-body').innerHTML = `<p class="err">${esc(e.message)}</p>`;
@@ -149,7 +193,11 @@ async function selectSession(id) {
 
 function renderDetail() {
   const d = state.detail;
-  if (!d) return;
+  if (!d) {
+    $('#detail-title').textContent = 'やりとりの時刻';
+    $('#detail-body').innerHTML = '<p class="empty">左のタスクを選んでください。</p>';
+    return;
+  }
   $('#detail-title').textContent = d.title;
 
   const maxSpan = Math.max(1, ...d.turns.map((t) => (t.idleMs || 0) + (t.durMs || 0)));
@@ -226,20 +274,236 @@ function renderDetail() {
   });
 }
 
+// ---------------------------------------------------------------- 日別集計
+
+function syncTabs() {
+  $('#tab-turns').classList.toggle('sel', state.view === 'turns');
+  $('#tab-daily').classList.toggle('sel', state.view === 'daily');
+}
+
+function dailyQuery(extra) {
+  const q = new URLSearchParams({ days: String(state.days), ...extra });
+  if (state.project) q.set('project', state.project);
+  return q.toString();
+}
+
+function updateCsv() {
+  const link = $('#csv-turns');
+  if (state.view === 'daily') {
+    link.href = '/api/daily?' + dailyQuery({ format: 'csv' });
+    link.title = '日別集計を CSV 出力';
+  } else if (state.session) {
+    link.href = `/api/session?project=${encodeURIComponent(state.sessionProject)}&id=${encodeURIComponent(state.session)}&format=csv`;
+    link.title = 'ターン一覧を CSV 出力';
+  } else {
+    link.removeAttribute('href');
+  }
+}
+
+function setView(view) {
+  state.view = view;
+  syncTabs();
+  updateCsv();
+  if (view === 'daily') loadDaily();
+  else renderDetail();
+}
+
+async function loadDaily() {
+  $('#detail-title').textContent = '日別集計';
+  $('#detail-body').innerHTML = '<p class="loading">集計中…</p>';
+  try {
+    state.daily = await api('/api/daily?' + dailyQuery());
+    renderDaily();
+  } catch (e) {
+    $('#detail-body').innerHTML = `<p class="err">${esc(e.message)}</p>`;
+  }
+}
+
+const STEPS = [5, 10, 15, 30, 60, 120, 180, 360, 720, 1440, 2880].map((m) => m * 60000);
+
+function niceStep(maxMs) {
+  return STEPS.find((s) => maxMs / s <= 5) || STEPS[STEPS.length - 1];
+}
+
+function fmtAxis(ms) {
+  if (!ms) return '0';
+  const m = Math.round(ms / 60000);
+  if (m < 60) return `${m}分`;
+  const h = Math.floor(m / 60);
+  return h + '時間' + (m % 60 ? `${m % 60}分` : '');
+}
+
+function projectPathOf(id) {
+  const hit = state.projects.find((p) => p.id === id) || (state.daily && state.daily.projects.find((p) => p.id === id));
+  return hit ? hit.path : id;
+}
+
+function renderDaily() {
+  const d = state.daily;
+  if (!d) return;
+  const cross = !state.project;
+  const rows = d.days;
+  const t = d.totals;
+  $('#detail-title').textContent = '日別集計 — ' + (cross ? '全プロジェクト' : shortPath(projectPathOf(state.project)));
+
+  const legend = d.projects.slice(0, PALETTE.length);
+  const colorOf = new Map(legend.map((p, i) => [p.id, PALETTE[i]]));
+  const otherMs = d.projects.slice(PALETTE.length).reduce((a, p) => a + p.activeMs, 0);
+  const tip = (r) => {
+    const lines = [`${r.date}（${DOW[r.dow]}）`, `作業 ${fmtDur(r.activeMs)} · ${r.turns} 往復 · ${r.sessions} タスク`];
+    if (cross) {
+      Object.entries(r.byProject)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 5)
+        .forEach(([id, v]) => lines.push(`  ${shortPath(projectPathOf(id))}  ${fmtDur(v)}`));
+    }
+    return lines.join('\n');
+  };
+
+  const W = Math.max(380, $('#detail-body').clientWidth - 30);
+  const H = 258;
+  const padL = 64;
+  const padR = 12;
+  const padT = 12;
+  const padB = 38;
+  const plotW = W - padL - padR;
+  const plotH = H - padT - padB;
+  const n = Math.max(1, rows.length);
+  const slot = plotW / n;
+  const bw = Math.max(1, Math.min(30, slot * 0.78));
+  const maxMs = Math.max(1, ...rows.map((r) => r.activeMs));
+  const step = niceStep(maxMs);
+  const topMs = Math.max(step, Math.ceil(maxMs / step) * step);
+  const yOf = (ms) => padT + plotH - (ms / topMs) * plotH;
+  const every = Math.max(1, Math.ceil(n / 14));
+
+  const svg = [];
+  for (let v = 0; v <= topMs; v += step) {
+    const y = yOf(v).toFixed(1);
+    svg.push(`<line class="grid" x1="${padL}" y1="${y}" x2="${padL + plotW}" y2="${y}"/>`);
+    svg.push(`<text class="ax" x="${padL - 8}" y="${(yOf(v) + 3.5).toFixed(1)}" text-anchor="end">${fmtAxis(v)}</text>`);
+  }
+  rows.forEach((r, i) => {
+    const x = padL + i * slot;
+    if (r.dow >= 5) svg.push(`<rect class="wk" x="${x.toFixed(1)}" y="${padT}" width="${slot.toFixed(1)}" height="${plotH}"/>`);
+  });
+  rows.forEach((r, i) => {
+    const segs = [];
+    if (cross) {
+      legend.forEach((p) => {
+        if (r.byProject[p.id]) segs.push([colorOf.get(p.id), r.byProject[p.id]]);
+      });
+      const rest = Object.keys(r.byProject)
+        .filter((id) => !colorOf.has(id))
+        .reduce((a, id) => a + r.byProject[id], 0);
+      if (rest) segs.push([OTHER_COLOR, rest]);
+    } else if (r.activeMs) {
+      segs.push([PALETTE[1], r.activeMs]);
+    }
+    const bx = padL + i * slot + (slot - bw) / 2;
+    let acc = 0;
+    segs.forEach(([color, v]) => {
+      const y1 = yOf(acc + v);
+      const y0 = yOf(acc);
+      acc += v;
+      svg.push(`<rect x="${bx.toFixed(1)}" y="${y1.toFixed(1)}" width="${bw.toFixed(1)}" height="${Math.max(1, y0 - y1).toFixed(1)}" fill="${color}"/>`);
+    });
+  });
+  svg.push(`<line class="axis" x1="${padL}" y1="${yOf(0).toFixed(1)}" x2="${padL + plotW}" y2="${yOf(0).toFixed(1)}"/>`);
+  rows.forEach((r, i) => {
+    const cx = padL + i * slot + slot / 2;
+    if ((n - 1 - i) % every === 0) {
+      const label = r.date.slice(5).replace('-', '/');
+      svg.push(`<text class="ax" x="${cx.toFixed(1)}" y="${padT + plotH + 15}" text-anchor="middle">${label}</text>`);
+      svg.push(`<text class="ax${r.dow >= 5 ? ' we' : ''}" x="${cx.toFixed(1)}" y="${padT + plotH + 27}" text-anchor="middle">${DOW[r.dow]}</text>`);
+    }
+    // 空の日もツールチップを出すため、スロット全体に当たり判定を重ねる
+    svg.push(`<rect class="hit" x="${(padL + i * slot).toFixed(1)}" y="${padT}" width="${slot.toFixed(1)}" height="${plotH}"><title>${esc(tip(r))}</title></rect>`);
+  });
+
+  const ranges = [14, 30, 90, 0]
+    .map((v) => `<button class="rng${v === state.days ? ' sel' : ''}" data-days="${v}">${v ? v + '日' : '全期間'}</button>`)
+    .join('');
+
+  const active = rows.filter((r) => r.activeMs || r.turns).reverse();
+  const table = active.length
+    ? `<table id="daily-table">
+        <thead><tr><th>日付</th><th class="n">作業時間</th><th class="n">往復</th><th class="n">タスク</th>${cross ? '<th>プロジェクト</th>' : ''}</tr></thead>
+        <tbody>${active
+          .map(
+            (r) => `<tr>
+            <td class="time${r.dow >= 5 ? ' we' : ''}">${r.date.slice(5).replace('-', '/')} <span class="d">${DOW[r.dow]}</span></td>
+            <td class="num">${fmtDur(r.activeMs)}</td>
+            <td class="num">${r.turns}</td>
+            <td class="num">${r.sessions}</td>
+            ${cross
+              ? `<td class="pj">${Object.entries(r.byProject)
+                  .sort((a, b) => b[1] - a[1])
+                  .map(
+                    ([id, v]) =>
+                      `<span class="pj-i" title="${esc(projectPathOf(id))}"><i style="background:${colorOf.get(id) || OTHER_COLOR}"></i>${esc(shortPath(projectPathOf(id)))} ${fmtDur(v)}</span>`
+                  )
+                  .join('')}</td>`
+              : ''}
+          </tr>`
+          )
+          .join('')}</tbody></table>`
+    : '<p class="empty">この期間の記録はありません。</p>';
+
+  $('#detail-body').innerHTML = `
+    <div class="sum">
+      <div><span class="k">期間</span><span class="v">${rows.length ? `${rows[0].date} → ${rows[rows.length - 1].date}` : '–'}</span></div>
+      <div><span class="k">稼働日</span><span class="v">${t.activeDays} / ${rows.length} 日</span></div>
+      <div><span class="k">作業時間合計</span><span class="v">${fmtDur(t.activeMs)}</span></div>
+      <div><span class="k">1稼働日あたり</span><span class="v">${t.activeDays ? fmtDur(Math.round(t.activeMs / t.activeDays)) : '–'}</span></div>
+      <div><span class="k">往復</span><span class="v">${t.turns}</span></div>
+      <div><span class="k">タスク</span><span class="v">${t.sessions}</span></div>
+      <div><span class="k">最も長い日</span><span class="v">${t.busiestDate ? `${t.busiestDate.slice(5).replace('-', '/')} ${fmtDur(t.busiestMs)}` : '–'}</span></div>
+    </div>
+    <div class="chart-bar">
+      <span class="rngs">${ranges}</span>
+      <span class="note">棒＝その日の応答時間の合計。セッションを並行して動かした日は 24 時間を超えることがあります。</span>
+    </div>
+    <div class="chart"><svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}">${svg.join('')}</svg></div>
+    ${cross
+      ? `<div class="legend">${legend
+          .map((p, i) => `<span class="lg" title="${esc(p.path)}"><i style="background:${PALETTE[i]}"></i>${esc(shortPath(p.path))} <b>${fmtDur(p.activeMs)}</b></span>`)
+          .join('')}${otherMs ? `<span class="lg"><i style="background:${OTHER_COLOR}"></i>その他 ${d.projects.length - legend.length} 件 <b>${fmtDur(otherMs)}</b></span>` : ''}</div>`
+      : ''}
+    ${table}`;
+
+  document.querySelectorAll('#detail-body .rng').forEach((btn) => {
+    btn.onclick = () => {
+      state.days = Number(btn.dataset.days);
+      updateCsv();
+      loadDaily();
+    };
+  });
+}
+
 // ---------------------------------------------------------------- 起動
 
 $('#filter').oninput = renderSessions;
 $('#relative').onchange = (e) => {
   state.relative = e.target.checked;
-  renderDetail();
+  if (state.view === 'turns') renderDetail();
 };
+$('#tab-turns').onclick = () => setView('turns');
+$('#tab-daily').onclick = () => setView('daily');
 $('#reload').onclick = async () => {
   await fetch('/api/reload');
-  const keepSession = state.session;
+  const keep = { project: state.sessionProject, session: state.session, view: state.view };
   await loadProjects();
-  if (keepSession) selectSession(keepSession).catch(() => {});
+  if (keep.view === 'turns' && keep.session) selectSession(keep.project, keep.session).catch(() => {});
 };
 
+let resizeTimer = null;
+window.addEventListener('resize', () => {
+  if (state.view !== 'daily') return;
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => state.daily && renderDaily(), 150);
+});
+
 loadProjects().catch((e) => {
   $('#project-list').innerHTML = `<li class="err">${esc(e.message)}</li>`;
 });

web/index.html

@@ -33,6 +33,10 @@
   <section id="detail" class="pane">
     <div class="pane-head">
       <span id="detail-title">やりとりの時刻</span>
+      <span class="tabs">
+        <button class="tab sel" id="tab-turns">やりとり</button>
+        <button class="tab" id="tab-daily">日別集計</button>
+      </span>
       <a id="csv-turns" class="btn" href="#" download>CSV</a>
     </div>
     <div class="scroll" id="detail-body">

web/style.css

@@ -72,6 +72,7 @@ main { flex: 1; display: flex; min-height: 0; }
   border-bottom: 1px solid var(--line);
 }
 .pane-head > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#detail-title { text-transform: none; }  /* タイトルやパスをそのまま出す */
 #filter {
   flex: 1 1 120px;
   min-width: 80px;
@@ -162,3 +163,53 @@ table { width: 100%; border-collapse: collapse; }
 .bar .b-idle { background: var(--idle); }
 .bar .b-wait { background: var(--user); }
 .bar .b-work { background: var(--work); }
+
+/* プロジェクト横断モード */
+#project-list li.all { border-bottom: 2px solid var(--line); }
+#project-list li.all .p-path::before { content: "▦ "; color: var(--dim); }
+.s-proj { color: var(--dim); font-size: 10.5px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* 日別集計 */
+.tabs { display: flex; gap: 4px; flex: none; }
+.tab { padding: 2px 9px; font-size: 11px; letter-spacing: normal; text-transform: none; }
+.tab.sel { color: var(--accent); border-color: var(--accent); }
+
+.chart-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px 0;
+  flex-wrap: wrap;
+}
+.rngs { display: flex; gap: 4px; }
+.rng { font-size: 11px; padding: 2px 8px; }
+.rng.sel { color: var(--accent); border-color: var(--accent); }
+.chart-bar .note { color: var(--dim); font-size: 10.5px; }
+
+.chart { padding: 4px 14px 0; overflow-x: auto; }
+.chart svg text.ax { fill: var(--dim); font-size: 10px; }
+.chart svg text.ax.we { fill: var(--warn); }
+.chart svg line.grid { stroke: var(--line); stroke-width: 1; }
+.chart svg line.axis { stroke: var(--dim); stroke-width: 1; opacity: .5; }
+.chart svg rect.wk { fill: #ffffff; opacity: .028; }
+.chart svg rect.hit { fill: transparent; }
+.chart svg rect.hit:hover { fill: #ffffff; opacity: .06; }
+
+.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px 2px; font-size: 11px; color: var(--dim); }
+.legend .lg { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
+.legend .lg i, .pj-i i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
+.legend .lg b { color: var(--fg); font-weight: 500; }
+
+#daily-table { margin-top: 8px; }
+#daily-table th {
+  position: sticky; top: 0; background: var(--pane); border-bottom: 1px solid var(--line);
+  color: var(--dim); font-weight: 500; font-size: 11px; text-align: left; padding: 6px 10px; white-space: nowrap; z-index: 1;
+}
+#daily-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+#daily-table tr:hover td { background: var(--pane2); }
+#daily-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+#daily-table .time { font-variant-numeric: tabular-nums; white-space: nowrap; }
+#daily-table .time.we { color: var(--warn); }
+#daily-table .d { color: var(--dim); font-size: 11px; }
+#daily-table .pj { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--dim); }
+.pj-i { display: flex; align-items: center; gap: 4px; white-space: nowrap; }