タスクを時間軸に並べるガントタブを追加

薄いバーで開始〜終了の全体、濃い部分で応答が動いていた区間を重ねて描く。
放置していた時間や、セッションを並行して動かしていた時間が見える。

- /api/timeline: セッションごとに全体の範囲と応答中の区間 (spans) を返す
  (隙間 1 秒以内のターンは結合、期間指定 days= / 全期間、CSV も可)
- ガントタブ: 1日/3日/7日/14日/30日/全期間の切替、1〜3日では時刻目盛りに
  自動で切替、土日の帯・日境界線・現在時刻の点線、横断時はプロジェクト別の色
- 行のホバーで内訳、クリックでそのタスクのやりとりを開く
- ラベル列とバーの行を22pxで揃え、時間軸ヘッダは縦スクロール中も固定
- ペイン幅に応じてラベル幅を詰め、横スクロールを出さない

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

web/style.css

@@ -213,3 +213,51 @@ table { width: 100%; border-collapse: collapse; }
 #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; }
+
+/* ガント */
+.sum.flat { position: static; }
+.gantt { padding: 4px 14px 0; }
+.gantt .g-head {
+  display: flex;
+  align-items: flex-end;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--bg);
+  border-bottom: 1px solid var(--line);
+}
+.gantt .g-lab-h {
+  width: var(--labw);
+  flex: none;
+  color: var(--dim);
+  font-size: 10.5px;
+  padding-bottom: 5px;
+}
+.gantt .g-body { display: flex; }
+.gantt .g-labels { width: var(--labw); flex: none; }
+.gantt .g-lab-row {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-right: 8px;
+  font-size: 11px;
+  cursor: pointer;
+  overflow: hidden;
+}
+.gantt .g-lab-row:nth-child(even) { background: rgba(255, 255, 255, .02); }
+.gantt .g-lab-row:hover { background: var(--pane2); }
+.gantt .g-lab-row.sel { box-shadow: inset 3px 0 var(--accent); }
+.gantt .g-lab-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
+.gantt .g-when { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.gantt .g-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.gantt svg text.ax { fill: var(--dim); font-size: 10px; }
+.gantt svg text.ax.hi { fill: var(--fg); }
+.gantt svg line.grid { stroke: var(--line); stroke-width: 1; }
+.gantt svg line.day { stroke: var(--line); stroke-width: 1; }
+.gantt svg line.now { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; }
+.gantt svg rect.wk { fill: #ffffff; opacity: .028; }
+.gantt svg rect.stripe { fill: #ffffff; opacity: .02; }
+.gantt svg rect.g-hit { fill: transparent; cursor: pointer; }
+.gantt svg rect.g-hit:hover { fill: #ffffff; opacity: .07; }