zozul-cli 0.1.0 → 0.2.0

package/dist/dashboard/index.html

@@ -46,6 +46,16 @@
   .header h1 { font-size: 18px; font-weight: 600; }
   .header .subtitle { color: var(--text-dim); font-size: 13px; }
   .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+  .source-badge {
+    font-size: 11px;
+    font-family: var(--mono);
+    padding: 3px 8px;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+  }
+  .source-badge.remote { border-color: var(--green); color: var(--green); }
+  .source-badge.local { border-color: var(--blue); color: var(--blue); }
   .auto-btn {
     background: none;
     border: 1px solid var(--border);
@@ -73,38 +83,66 @@
     width: 9px; height: 9px;
   }
 
+  /* Navigation tabs */
+  .nav-tabs {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--border);
+    padding: 0 24px;
+    background: var(--bg);
+  }
+  .nav-tab {
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-dim);
+    cursor: pointer;
+    border: none;
+    background: none;
+    border-bottom: 2px solid transparent;
+    transition: all 0.15s;
+  }
+  .nav-tab:hover { color: var(--text); }
+  .nav-tab.active { color: var(--accent-light); border-bottom-color: var(--accent); }
+
   .container { max-width: 1280px; margin: 0 auto; padding: 24px; }
 
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 12px;
-    margin-bottom: 28px;
+  /* Time window selector */
+  .time-selector {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 24px;
+    align-items: center;
   }
-  .stat-card {
+  .time-btn {
     background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 14px 16px;
+    color: var(--text-dim);
+    padding: 5px 14px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: var(--mono);
+    transition: all 0.15s;
   }
-  .stat-card .label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
-  .stat-card .value { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; font-family: var(--mono); }
+  .time-btn:hover { border-color: var(--accent); color: var(--text); }
+  .time-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
 
-  .charts-grid {
+  .stats-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin-bottom: 28px;
   }
-  .chart-card.full-width { grid-column: 1 / -1; }
-  .chart-card {
+  .stat-card {
     background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 16px;
+    border-radius: 10px;
+    padding: 20px 24px;
   }
-  .chart-card h3 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
-  .chart-card canvas { width: 100% !important; }
+  .stat-card .label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
+  .stat-card .value { font-size: 28px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; font-family: var(--mono); }
+  .stat-card.hero .value { font-size: 36px; }
 
   .panel {
     background: var(--surface);
@@ -156,6 +194,51 @@
   tr:last-child td { border-bottom: none; }
   tr.clickable:hover td { background: rgba(124, 110, 240, 0.05); cursor: pointer; }
 
+  .tag-pill {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    font-family: var(--mono);
+    background: rgba(124, 110, 240, 0.12);
+    color: var(--accent-light);
+    margin-right: 4px;
+    margin-bottom: 2px;
+  }
+  .tag-pill.untagged {
+    background: rgba(139, 143, 163, 0.12);
+    color: var(--text-dim);
+  }
+
+  .badge {
+    display: inline-block;
+    padding: 2px 7px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    font-family: var(--mono);
+  }
+  .badge-cost { background: rgba(255, 152, 0, 0.12); color: var(--orange); }
+  .badge-tokens { background: rgba(124, 110, 240, 0.12); color: var(--accent-light); }
+
+  .empty { padding: 40px; text-align: center; color: var(--text-dim); font-size: 13px; }
+
+  .back-btn {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    padding: 5px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    margin-bottom: 16px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .back-btn:hover { border-color: var(--accent); color: var(--text); }
+
   .session-id {
     font-family: var(--mono);
     font-size: 12px;
@@ -168,6 +251,7 @@
   .session-id:hover { color: var(--accent-light); }
   .copy-icon { opacity: 0; font-size: 10px; transition: opacity 0.15s; }
   .session-id:hover .copy-icon { opacity: 1; }
+
   .copied-toast {
     position: fixed;
     bottom: 24px;
@@ -186,22 +270,8 @@
   }
   .copied-toast.show { opacity: 1; transform: translateY(0); }
 
-  .session-detail { display: none; }
-  .session-detail.active { display: block; }
-  .back-btn {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    color: var(--text-dim);
-    padding: 5px 12px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 12px;
-    margin-bottom: 16px;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-  .back-btn:hover { border-color: var(--accent); color: var(--text); }
+  .view { display: none; }
+  .view.active { display: block; }
 
   .turn { border-bottom: 1px solid var(--border); }
   .turn:last-child { border-bottom: none; }
@@ -271,107 +341,83 @@
     line-height: 1.5;
   }
 
-  .empty { padding: 40px; text-align: center; color: var(--text-dim); font-size: 13px; }
-  .badge {
-    display: inline-block;
-    padding: 2px 7px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 500;
-    font-family: var(--mono);
-  }
-  .badge-cost { background: rgba(255, 152, 0, 0.12); color: var(--orange); }
-  .badge-tokens { background: rgba(124, 110, 240, 0.12); color: var(--accent-light); }
-
-  .range-picker {
+  .pagination {
     display: flex;
-    gap: 4px;
-    margin-bottom: 8px;
-    flex-wrap: wrap;
+    gap: 6px;
     align-items: center;
+    justify-content: center;
+    padding: 12px 16px;
+    border-top: 1px solid var(--border);
+  }
+
+  th.sortable { cursor: pointer; user-select: none; }
+  th.sortable:hover { color: var(--text); }
+  th.sortable::after {
+    content: '\2195';
+    margin-left: 4px;
+    font-size: 10px;
+    opacity: 0.3;
   }
-  .range-btn {
+  th.sortable.asc::after { content: '\2191'; opacity: 1; }
+  th.sortable.desc::after { content: '\2193'; opacity: 1; }
+
+  .chart-card {
     background: var(--surface);
     border: 1px solid var(--border);
-    color: var(--text-dim);
-    padding: 4px 12px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 12px;
-    font-family: var(--mono);
-    transition: all 0.15s;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 20px;
   }
-  .range-btn:hover { border-color: var(--accent); color: var(--text); }
-  .range-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
-  .range-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
+  .chart-card h3 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
+  .chart-card canvas { width: 100% !important; }
 
-  .custom-range {
-    display: none;
+  .project-list { list-style: none; }
+  .project-item {
+    display: flex;
     align-items: center;
-    gap: 8px;
-    margin-bottom: 16px;
-    flex-wrap: wrap;
-  }
-  .custom-range.visible { display: flex; }
-  .custom-range label {
-    font-size: 11px;
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
   }
-  .custom-range input[type="datetime-local"],
-  .custom-range select {
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: 5px;
-    color: var(--text);
-    font-size: 12px;
+  .project-item:last-child { border-bottom: none; }
+  .project-name {
     font-family: var(--mono);
-    padding: 4px 8px;
-    outline: none;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    margin-right: 16px;
+  }
+  .project-bar-wrap {
+    width: 120px;
+    height: 6px;
+    background: var(--surface2);
+    border-radius: 3px;
+    margin-right: 12px;
+    flex-shrink: 0;
   }
-  .custom-range input[type="datetime-local"]:focus,
-  .custom-range select:focus { border-color: var(--accent); }
-  .custom-range select { cursor: pointer; }
-  .apply-btn {
+  .project-bar {
+    height: 100%;
+    border-radius: 3px;
     background: var(--accent);
-    border: none;
-    color: #fff;
-    padding: 5px 14px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 12px;
-    font-family: var(--mono);
-    font-weight: 600;
-    transition: opacity 0.15s;
   }
-  .apply-btn:hover { opacity: 0.85; }
-
-  .tag-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 5px;
-    padding: 3px 10px;
-    font-size: 11px;
+  .project-cost {
     font-family: var(--mono);
-    color: var(--text-dim);
-    cursor: pointer;
-    user-select: none;
-    transition: all 0.15s;
+    font-size: 12px;
+    color: var(--orange);
+    white-space: nowrap;
+    min-width: 70px;
+    text-align: right;
   }
-  .tag-chip:hover { border-color: var(--accent); color: var(--text); }
-  .tag-chip.selected { background: rgba(124,110,240,0.15); border-color: var(--accent); color: var(--accent-light); }
-  .tag-chip input { display: none; }
 
   :not(button)[title] { cursor: help; }
 
   @media (max-width: 800px) {
-    .charts-grid { grid-template-columns: 1fr; }
-    .stats-grid { grid-template-columns: repeat(2, 1fr); }
+    .stats-grid { grid-template-columns: 1fr 1fr; }
     .panel-filter { width: 150px; }
+    .stat-card .value { font-size: 22px; }
+    .stat-card.hero .value { font-size: 28px; }
   }
 </style>
 </head>
@@ -381,121 +427,153 @@
   <h1>zozul</h1>
   <span class="subtitle">Agent Observability</span>
   <div class="header-right">
-    <button class="auto-btn" onclick="manualRefresh()" title="Auto-refresh every 10s — click to refresh now">
+    <span class="source-badge" id="source-badge" style="display:none">Local</span>
+    <button class="auto-btn" onclick="manualRefresh()" title="Auto-refresh every 10s">
       <span class="live-dot"></span>
       Auto
     </button>
   </div>
 </div>
 
+<div class="nav-tabs">
+  <button class="nav-tab active" data-view="summary">Summary</button>
+  <button class="nav-tab" data-view="tasks">Tasks</button>
+  <button class="nav-tab" data-view="tags">Tags</button>
+  <button class="nav-tab" data-view="sessions">Sessions</button>
+</div>
+
 <div class="container">
-  <!-- Main view -->
-  <div id="main-view">
-    <div class="stats-grid" id="stats-grid"></div>
-    <div class="range-picker" id="range-picker">
-      <button class="range-btn" data-range="1h">1h</button>
-      <button class="range-btn" data-range="6h">6h</button>
-      <button class="range-btn" data-range="24h">24h</button>
-      <button class="range-btn active" data-range="7d">7d</button>
-      <button class="range-btn" data-range="30d">30d</button>
-      <button class="range-btn" data-range="90d">90d</button>
-      <span class="range-divider"></span>
-      <button class="range-btn" id="custom-range-toggle">Custom</button>
+  <!-- Summary View -->
+  <div id="view-summary" class="view active">
+    <div class="stats-grid" id="summary-stats"></div>
+    <div class="chart-card"><h3>Daily Cost (30d)</h3><canvas id="chart-daily-cost"></canvas></div>
+    <div class="panel">
+      <div class="panel-header"><span>Cost by Project</span></div>
+      <ul class="project-list" id="project-breakdown"></ul>
     </div>
-    <div class="custom-range" id="custom-range">
-      <label for="range-from">From</label>
-      <input type="datetime-local" id="range-from">
-      <label for="range-to">To</label>
-      <input type="datetime-local" id="range-to">
-      <label for="range-step">Resolution</label>
-      <select id="range-step">
-        <option value="auto">Auto</option>
-        <option value="1m">1 min</option>
-        <option value="5m">5 min</option>
-        <option value="15m">15 min</option>
-        <option value="1h">1 hour</option>
-        <option value="6h">6 hours</option>
-        <option value="1d">1 day</option>
-      </select>
-      <button class="apply-btn" id="apply-custom">Apply</button>
+  </div>
+
+  <!-- Sessions View -->
+  <div id="view-sessions" class="view">
+    <div class="panel">
+      <div class="panel-header">
+        <span>Sessions <span id="sessions-count" style="font-weight:400"></span></span>
+        <input class="panel-filter" id="session-filter" placeholder="filter by id or project..." oninput="filterSessions(this.value)">
+      </div>
+      <table>
+        <thead><tr>
+          <th class="sortable" data-sort="sessions:id">Session ID</th>
+          <th class="sortable" data-sort="sessions:project_path">Project</th>
+          <th class="sortable" data-sort="sessions:started_at">Started</th>
+          <th class="sortable" data-sort="sessions:total_duration_ms">Duration</th>
+          <th class="sortable" data-sort="sessions:total_turns">Turns</th>
+          <th class="sortable desc" data-sort="sessions:total_cost_usd">Cost</th>
+          <th class="sortable" data-sort="sessions:model">Model</th>
+        </tr></thead>
+        <tbody id="sessions-table"></tbody>
+      </table>
+      <div id="load-more-row" style="display:none;padding:12px 16px;text-align:center;border-top:1px solid var(--border)">
+        <button class="time-btn" onclick="loadMoreSessions()">Load more</button>
+        <span id="sessions-shown" style="font-size:12px;color:var(--text-dim);margin-left:12px"></span>
+      </div>
     </div>
-    <div class="charts-grid">
-      <div class="chart-card full-width"><h3 id="tokens-label">Tokens &amp; Cost (7d)</h3><canvas id="chart-tokens"></canvas></div>
+  </div>
+
+  <!-- Task View -->
+  <div id="view-tasks" class="view">
+    <div class="panel">
+      <div class="panel-header">
+        <span>Tasks</span>
+        <input class="panel-filter" id="task-filter" placeholder="filter tasks..." oninput="filterTaskTable(this.value)">
+      </div>
+      <table>
+        <thead><tr>
+          <th class="sortable" data-sort="tasks:tags">Task</th>
+          <th class="sortable" data-sort="tasks:total_duration_ms">Process Time</th>
+          <th class="sortable desc" data-sort="tasks:total_cost_usd">Cost</th>
+          <th class="sortable" data-sort="tasks:human_interventions">Human Interventions</th>
+          <th class="sortable" data-sort="tasks:last_seen">Last Active</th>
+        </tr></thead>
+        <tbody id="task-table"></tbody>
+      </table>
     </div>
-    <div class="panel" id="tasks-panel" style="display:none">
+  </div>
+
+  <!-- Tag View -->
+  <div id="view-tags" class="view">
+    <div class="panel">
       <div class="panel-header">
-        <span>Tasks <span id="active-context" style="font-weight:400;font-size:11px;font-family:var(--mono)"></span></span>
-        <div style="display:flex;gap:8px;align-items:center">
-          <input class="panel-filter" id="task-search" placeholder="search tags…" oninput="filterTagChips(this.value)" style="width:140px">
-          <select class="panel-filter" id="task-time-range" onchange="onTaskTimeRange()" style="width:100px">
-            <option value="">All time</option>
-            <option value="1h">1h</option>
-            <option value="6h">6h</option>
-            <option value="24h">24h</option>
-            <option value="7d">7d</option>
-            <option value="30d">30d</option>
-          </select>
-        </div>
+        <span>Tags</span>
       </div>
-      <div style="padding:12px 16px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border)" id="task-chips"></div>
-      <div id="task-stats-grid" class="stats-grid" style="padding:16px;margin-bottom:0"></div>
-      <div id="turns-section" style="display:none">
-        <div class="panel-header">
-          <span>Turns <span id="turns-count" style="font-weight:400;font-size:11px;color:var(--text-dim)"></span></span>
-          <div style="display:flex;gap:6px;align-items:center" id="turns-pagination"></div>
-        </div>
-        <table>
-          <thead><tr>
-            <th>Time</th>
-            <th>Prompt</th>
-            <th>Tags</th>
-            <th>Duration</th>
-            <th>Tokens</th>
-            <th>Cost</th>
-          </tr></thead>
-          <tbody id="turns-table"></tbody>
-        </table>
+      <table>
+        <thead><tr>
+          <th class="sortable" data-sort="tags:tag">Tag</th>
+          <th class="sortable" data-sort="tags:total_duration_ms">Total Time</th>
+          <th class="sortable desc" data-sort="tags:total_cost_usd">Total Cost</th>
+          <th class="sortable" data-sort="tags:human_interventions">Human Interventions</th>
+          <th class="sortable" data-sort="tags:last_seen">Last Active</th>
+        </tr></thead>
+        <tbody id="tag-table"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Tag Detail View (drill-down from Tag View) -->
+  <div id="view-tag-detail" class="view">
+    <button class="back-btn" onclick="showView('tags')">&#8592; Tags <span style="font-size:10px;margin-left:4px;color:var(--text-dim)">[Esc]</span></button>
+    <div class="stats-grid" id="tag-detail-stats"></div>
+    <div class="panel">
+      <div class="panel-header">
+        <span>Turns <span id="tag-turns-count" style="font-weight:400;font-size:11px;color:var(--text-dim)"></span></span>
+        <div id="tag-turns-pagination" style="display:flex;gap:6px;align-items:center"></div>
       </div>
+      <table>
+        <thead><tr>
+          <th>Time</th>
+          <th>Prompt</th>
+          <th>Session</th>
+          <th>Cost</th>
+        </tr></thead>
+        <tbody id="tag-turns-table"></tbody>
+      </table>
     </div>
+  </div>
+
+  <!-- Task Group Detail View (drill-down from Task View) -->
+  <div id="view-task-detail" class="view">
+    <button class="back-btn" onclick="showView('tasks')">&#8592; Tasks <span style="font-size:10px;margin-left:4px;color:var(--text-dim)">[Esc]</span></button>
+    <div class="stats-grid" id="task-detail-stats"></div>
     <div class="panel">
       <div class="panel-header">
-        <span>Sessions <span id="sessions-count" style="font-weight:400"></span></span>
-        <input class="panel-filter" id="session-filter" placeholder="filter by id or project…" oninput="filterSessions(this.value)">
+        <span>Turns <span id="task-turns-count" style="font-weight:400;font-size:11px;color:var(--text-dim)"></span></span>
+        <div id="task-turns-pagination" style="display:flex;gap:6px;align-items:center"></div>
       </div>
       <table>
         <thead><tr>
-          <th>Session ID</th>
-          <th>Project</th>
-          <th>Started</th>
+          <th>Time</th>
+          <th>Prompt</th>
           <th>Duration</th>
-          <th>Turns</th>
-          <th>In Tokens</th>
-          <th>Out Tokens</th>
+          <th>Tokens</th>
           <th>Cost</th>
-          <th>Model</th>
         </tr></thead>
-        <tbody id="sessions-table"></tbody>
+        <tbody id="task-turns-table"></tbody>
       </table>
-      <div id="load-more-row" style="display:none;padding:12px 16px;text-align:center;border-top:1px solid var(--border)">
-        <button class="range-btn" onclick="loadMoreSessions()">Load more</button>
-        <span id="sessions-shown" style="font-size:12px;color:var(--text-dim);margin-left:12px"></span>
-      </div>
     </div>
   </div>
 
-  <!-- Session detail view -->
-  <div id="detail-view" class="session-detail">
-    <button class="back-btn" onclick="showMain()">&#8592; Sessions <span style="font-size:10px;margin-left:4px;color:var(--text-dim)">[Esc]</span></button>
-    <div class="stats-grid" id="detail-stats"></div>
+  <!-- Session Detail View -->
+  <div id="view-session-detail" class="view">
+    <button class="back-btn" id="session-back-btn" onclick="showView('tasks')">&#8592; Back <span style="font-size:10px;margin-left:4px;color:var(--text-dim)">[Esc]</span></button>
+    <div class="stats-grid" id="session-detail-stats"></div>
     <div class="panel">
       <div class="panel-header">Conversation</div>
-      <div id="detail-turns"></div>
+      <div id="session-detail-turns"></div>
     </div>
   </div>
 
-  <!-- Turn detail view -->
-  <div id="turn-detail-view" class="session-detail">
-    <button class="back-btn" onclick="showMain()">&#8592; Turns <span style="font-size:10px;margin-left:4px;color:var(--text-dim)">[Esc]</span></button>
+  <!-- Turn Block Detail View -->
+  <div id="view-turn-detail" class="view">
+    <button class="back-btn" id="turn-back-btn" onclick="goBackFromTurn()">&#8592; Back <span style="font-size:10px;margin-left:4px;color:var(--text-dim)">[Esc]</span></button>
     <div class="stats-grid" id="turn-detail-stats"></div>
     <div class="panel">
       <div class="panel-header">Conversation</div>
@@ -507,45 +585,131 @@
 <div class="copied-toast" id="copied-toast">Copied!</div>
 
 <script>
-let chartInstances = {};
+// ── State ──
+
+let dataSource = 'local';
+let autoRefreshTimer = null;
+let currentView = 'summary';
+let previousView = 'tasks';
+let allTaskGroups = [];
+let allTagStats = [];
+let sortState = {
+  tasks: { key: 'total_cost_usd', dir: 'desc' },
+  tags: { key: 'total_cost_usd', dir: 'desc' },
+  sessions: { key: 'started_at', dir: 'desc' },
+};
 let allSessions = [];
 let sessionsTotal = 0;
 let sessionsOffset = 0;
 const SESSIONS_PAGE = 50;
-let autoRefreshTimer = null;
-let currentRange = '7d';
-let customFrom = null;
-let customTo = null;
-let customStep = 'auto';
-
-function chartQueryString() {
-  if (customFrom && customTo) {
-    const qs = 'from=' + encodeURIComponent(customFrom) + '&to=' + encodeURIComponent(customTo);
-    return customStep !== 'auto' ? qs + '&step=' + customStep : qs;
+let chartInstances = {};
+let tagDetailName = '';
+let tagDetailOffset = 0;
+let taskDetailTags = [];
+let taskDetailOffset = 0;
+const PAGE_SIZE = 20;
+const AUTO_REFRESH_INTERVAL = 10_000;
+
+// ── Data source auto-detection ──
+
+async function detectDataSource() {
+  const badge = document.getElementById('source-badge');
+  if (typeof ZOZUL_CONFIG === 'undefined') {
+    dataSource = 'local';
+    badge.textContent = 'Local';
+    badge.className = 'source-badge local';
+    badge.style.display = '';
+    return;
   }
-  return 'range=' + currentRange;
-}
 
-function chartLabel() {
-  if (customFrom && customTo) {
-    const f = new Date(customFrom);
-    const t = new Date(customTo);
-    const fmt = d => d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
-    return fmt(f) + ' \u2013 ' + fmt(t);
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 3000);
+    const healthUrl = ZOZUL_CONFIG.remote.baseUrl + '/health';
+    const res = await fetch(healthUrl, {
+      signal: controller.signal,
+      headers: { 'X-API-Key': ZOZUL_CONFIG.remote.apiKey },
+    });
+    clearTimeout(timeout);
+    if (res.ok) {
+      dataSource = 'remote';
+      badge.textContent = 'Remote';
+      badge.className = 'source-badge remote';
+    } else {
+      dataSource = 'local';
+      badge.textContent = 'Local';
+      badge.className = 'source-badge local';
+    }
+  } catch {
+    dataSource = 'local';
+    badge.textContent = 'Local';
+    badge.className = 'source-badge local';
   }
-  return currentRange;
+  badge.style.display = '';
 }
 
 async function fetchJson(path) {
+  if (dataSource === 'remote' && typeof ZOZUL_CONFIG !== 'undefined') {
+    try {
+      const url = ZOZUL_CONFIG.remote.baseUrl + path.replace('/api/', '/');
+      const res = await fetch(url, { headers: { 'X-API-Key': ZOZUL_CONFIG.remote.apiKey } });
+      if (res.ok) return res.json();
+    } catch {}
+    // Remote failed — fall back to local for this request
+  }
   const res = await fetch(path);
   if (!res.ok) throw new Error(res.status + ' ' + path);
   return res.json();
 }
 
+// ── Client-side proportional cost ──
+
+const sessionCache = {};
+
+async function fetchSessionCached(sessionId) {
+  if (sessionCache[sessionId]) return sessionCache[sessionId];
+  const session = await fetchJson('/api/sessions/' + sessionId);
+  sessionCache[sessionId] = session;
+  return session;
+}
+
+function proportionalCost(session, turn) {
+  const hasCache = turn.cache_read !== undefined && turn.cache_read !== null;
+  const sessionTotal = (session.total_input_tokens || 0) + (session.total_output_tokens || 0)
+    + (hasCache ? (session.total_cache_read_tokens || 0) + (session.total_cache_creation_tokens || 0) : 0);
+  if (sessionTotal === 0 || !session.total_cost_usd) return 0;
+  const turnTotal = (turn.input || 0) + (turn.output || 0)
+    + (hasCache ? (turn.cache_read || 0) + (turn.cache_creation || 0) : 0);
+  return session.total_cost_usd * turnTotal / sessionTotal;
+}
+
+async function enrichTurnsWithCost(turns) {
+  const ids = [...new Set(turns.map(t => t.session_id).filter(Boolean))];
+  await Promise.all(ids.map(fetchSessionCached));
+  for (const t of turns) {
+    const s = sessionCache[t.session_id];
+    if (!s) continue;
+    t.estimated_cost_usd = proportionalCost(s, {
+      input: t.input_tokens, output: t.output_tokens,
+      cache_read: t.cache_read_tokens, cache_creation: t.cache_creation_tokens,
+    });
+    if (t.block_input_tokens !== undefined) {
+      t.block_cost_usd = proportionalCost(s, {
+        input: t.block_input_tokens, output: t.block_output_tokens,
+        cache_read: t.block_cache_read_tokens, cache_creation: t.block_cache_creation_tokens,
+      });
+    }
+  }
+  return turns;
+}
+
 // ── Formatting ──
 
 function fmtNum(n) { return (n ?? 0).toLocaleString(); }
-function fmtCost(n) { return '$' + (n ?? 0).toFixed(4); }
+function fmtCost(n) {
+  const v = n ?? 0;
+  return v >= 1 ? '$' + v.toFixed(2) : '$' + v.toFixed(4);
+}
 function fmtDuration(ms) {
   if (!ms || ms <= 0) return '\u2014';
   const s = Math.floor(ms / 1000);
@@ -570,6 +734,18 @@ function fmtAbsolute(s) {
   if (!s) return '';
   try { return new Date(s).toLocaleString(); } catch { return s; }
 }
+// SQLite datetime() returns "YYYY-MM-DD HH:MM:SS" with no timezone — append Z to parse as UTC
+function sqliteUtcToLocal(s) {
+  return new Date(s.replace(' ', 'T') + 'Z');
+}
+function fmtChartTs(s, span) {
+  const d = sqliteUtcToLocal(s);
+  if (span && span <= 24 * 3600000) {
+    return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+  }
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' +
+         d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
 function shortId(s) { return s ? s.slice(0, 8) : '\u2014'; }
 function basename(p) {
   if (!p) return '\u2014';
@@ -581,8 +757,6 @@ function escHtml(s) {
   return d.innerHTML;
 }
 
-// ── Copy to clipboard ──
-
 function copyText(text) {
   navigator.clipboard.writeText(text).then(() => {
     const toast = document.getElementById('copied-toast');
@@ -591,280 +765,521 @@ function copyText(text) {
   });
 }
 
-// ── Dashboard load ──
+// ── Navigation ──
 
-async function loadDashboard() {
-  const btn = document.querySelector('.auto-btn');
-  btn?.classList.add('loading');
-  const minSpinner = new Promise(r => setTimeout(r, 400));
-  try {
-    const qs = chartQueryString();
-    const [stats, sessionsResp, tokens, cost, tasks, activeCtx] = await Promise.all([
-      fetchJson('/api/stats'),
-      fetchJson('/api/sessions?limit=' + SESSIONS_PAGE + '&offset=0'),
-      fetchJson('/api/metrics/tokens?' + qs),
-      fetchJson('/api/metrics/cost?' + qs),
-      fetchJson('/api/tasks'),
-      fetchJson('/api/context'),
-    ]);
-    // Handle both paginated { sessions, total } and legacy plain-array responses
-    const sessionsArr = Array.isArray(sessionsResp) ? sessionsResp : sessionsResp.sessions;
-    allSessions = sessionsArr;
-    sessionsTotal = Array.isArray(sessionsResp) ? sessionsArr.length : sessionsResp.total;
-    sessionsOffset = allSessions.length;
-    renderStats(stats);
-    renderTasks(tasks, activeCtx);
-    renderSessions(allSessions);
-    updateLoadMore();
-    renderTokenCostChart(tokens, cost);
-  } catch (e) {
-    console.error('load failed', e);
-  } finally {
-    await minSpinner;
-    btn?.classList.remove('loading');
+function showView(name) {
+  currentView = name;
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  const el = document.getElementById('view-' + name);
+  if (el) el.classList.add('active');
+
+  // Update tab highlight for main views
+  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+  const mainView = ['summary', 'sessions', 'tasks', 'tags'].includes(name) ? name : null;
+  if (mainView) {
+    const tab = document.querySelector('.nav-tab[data-view="' + mainView + '"]');
+    if (tab) tab.classList.add('active');
   }
 }
 
-function manualRefresh() {
-  if (autoRefreshTimer) { clearTimeout(autoRefreshTimer); autoRefreshTimer = null; }
-  loadDashboard().then(scheduleAutoRefresh);
+document.querySelector('.nav-tabs').addEventListener('click', e => {
+  const tab = e.target.closest('.nav-tab');
+  if (!tab) return;
+  const view = tab.dataset.view;
+  showView(view);
+  loadViewData(view);
+});
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    if (['tag-detail', 'task-detail'].includes(currentView)) {
+      showView(previousView || 'tasks');
+    } else if (['session-detail', 'turn-detail'].includes(currentView)) {
+      goBackFromTurn();
+    }
+  }
+});
+
+document.addEventListener('click', e => {
+  const th = e.target.closest('th.sortable');
+  if (th) {
+    const [table, key] = th.dataset.sort.split(':');
+    const state = sortState[table];
+    if (state.key === key) {
+      state.dir = state.dir === 'asc' ? 'desc' : 'asc';
+    } else {
+      state.key = key;
+      state.dir = key === 'tags' || key === 'tag' ? 'asc' : 'desc';
+    }
+    // Update header indicators
+    th.closest('thead').querySelectorAll('th.sortable').forEach(h => {
+      h.classList.remove('asc', 'desc');
+      const [t, k] = h.dataset.sort.split(':');
+      if (k === state.key) h.classList.add(state.dir);
+    });
+    if (table === 'tasks') renderTaskTable(sortData(allTaskGroups, state));
+    else if (table === 'tags') renderTagTable(sortData(allTagStats, state));
+    else if (table === 'sessions') renderSessionsTable(sortData(allSessions, state));
+    return;
+  }
+});
+
+function sortData(arr, state) {
+  const { key, dir } = state;
+  return [...arr].sort((a, b) => {
+    let va = a[key], vb = b[key];
+    if (typeof va === 'string' && typeof vb === 'string') {
+      va = va.toLowerCase(); vb = vb.toLowerCase();
+      return dir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
+    }
+    va = va ?? 0; vb = vb ?? 0;
+    return dir === 'asc' ? va - vb : vb - va;
+  });
 }
 
-async function loadMoreSessions() {
+// ── Summary View ──
+
+async function loadSummary() {
   try {
-    const resp = await fetchJson('/api/sessions?limit=' + SESSIONS_PAGE + '&offset=' + sessionsOffset);
-    const page = Array.isArray(resp) ? resp : resp.sessions;
-    allSessions = allSessions.concat(page);
-    sessionsTotal = Array.isArray(resp) ? allSessions.length : resp.total;
-    sessionsOffset = allSessions.length;
-    const q = document.getElementById('session-filter').value;
-    q ? filterSessions(q) : renderSessions(allSessions);
-    updateLoadMore();
+    const [stats, tasks, costSeries, sessionsResp] = await Promise.all([
+      fetchJson('/api/stats'),
+      fetchJson('/api/tasks'),
+      fetchJson('/api/metrics/cost?range=30d'),
+      fetchJson('/api/sessions?limit=500&offset=0'),
+    ]);
+    renderSummaryStats({
+      totalCost: stats.total_cost_usd ?? 0,
+      totalSessions: stats.total_sessions ?? 0,
+      totalTasks: tasks.length ?? 0,
+    });
+    renderDailyCostChart(costSeries);
+    const sessions = Array.isArray(sessionsResp) ? sessionsResp : sessionsResp.sessions;
+    renderProjectBreakdown(sessions);
   } catch (e) {
-    console.error('load more failed', e);
+    console.error('summary load failed', e);
   }
 }
 
-function updateLoadMore() {
-  const row = document.getElementById('load-more-row');
-  const shown = document.getElementById('sessions-shown');
-  const count = document.getElementById('sessions-count');
-  count.textContent = '(' + sessionsTotal + ')';
-  if (sessionsTotal > sessionsOffset) {
-    row.style.display = '';
-    shown.textContent = sessionsOffset + ' of ' + sessionsTotal + ' shown';
-  } else {
-    row.style.display = 'none';
-  }
-}
+function renderDailyCostChart(costData) {
+  if (!costData || !costData.length) return;
+  const labels = costData.map(d => {
+    const dt = new Date(d.timestamp);
+    return dt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  });
+  const data = costData.map(d => d.cost);
 
-const AUTO_REFRESH_INTERVAL = 10_000; // ms
+  const existing = chartInstances['chart-daily-cost'];
+  if (existing) {
+    existing.data.labels = labels;
+    existing.data.datasets[0].data = data;
+    existing.update('none');
+    return;
+  }
 
-function scheduleAutoRefresh() {
-  autoRefreshTimer = setTimeout(async () => {
-    await loadDashboard();
-    scheduleAutoRefresh();
-  }, AUTO_REFRESH_INTERVAL);
+  const ctx = document.getElementById('chart-daily-cost');
+  if (!ctx) return;
+  const chart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [{
+        label: 'Cost (USD)',
+        data,
+        backgroundColor: 'rgba(255,152,0,0.3)',
+        borderColor: '#ff9800',
+        borderWidth: 1,
+        borderRadius: 3,
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: { callbacks: { label: ctx => '$' + ctx.parsed.y.toFixed(4) } },
+      },
+      scales: {
+        x: { ticks: { color: '#8b8fa3', font: { family: '"JetBrains Mono", monospace', size: 10 } } },
+        y: { ticks: { color: '#8b8fa3', font: { family: '"JetBrains Mono", monospace', size: 10 }, callback: v => '$' + v.toFixed(2) } },
+      }
+    }
+  });
+  chartInstances['chart-daily-cost'] = chart;
 }
 
-// ── Stats ──
+function renderProjectBreakdown(sessions) {
+  const el = document.getElementById('project-breakdown');
+  if (!sessions || !sessions.length) {
+    el.innerHTML = '<li class="empty">No sessions.</li>';
+    return;
+  }
+  // Group by project
+  const byProject = {};
+  for (const s of sessions) {
+    const proj = s.project_path || 'Unknown';
+    if (!byProject[proj]) byProject[proj] = 0;
+    byProject[proj] += s.total_cost_usd || 0;
+  }
+  const sorted = Object.entries(byProject).sort((a, b) => b[1] - a[1]);
+  const maxCost = sorted[0]?.[1] || 1;
+
+  el.innerHTML = sorted.slice(0, 10).map(([proj, cost]) => {
+    const pct = Math.round(cost / maxCost * 100);
+    return '<li class="project-item">' +
+      '<span class="project-name" title="' + escHtml(proj) + '">' + escHtml(basename(proj)) + '</span>' +
+      '<div class="project-bar-wrap"><div class="project-bar" style="width:' + pct + '%"></div></div>' +
+      '<span class="project-cost">' + fmtCost(cost) + '</span>' +
+    '</li>';
+  }).join('');
+}
 
-function renderStats(s) {
-  const grid = document.getElementById('stats-grid');
+function renderSummaryStats(s) {
+  const grid = document.getElementById('summary-stats');
   grid.innerHTML = [
-    { label: 'Sessions',       value: fmtNum(s.total_sessions) },
-    { label: 'User Prompts',   value: fmtNum(s.total_user_prompts),   title: 'UserPromptSubmit hook events' },
-    { label: 'Interruptions',  value: fmtNum(s.total_interruptions),  title: 'Times user stopped Claude mid-run' },
-    { label: 'Input Tokens',   value: fmtNum(s.total_input_tokens) },
-    { label: 'Output Tokens',  value: fmtNum(s.total_output_tokens) },
-    { label: 'Cache Read',     value: fmtNum(s.total_cache_read_tokens) },
-    { label: 'Total Cost',     value: fmtCost(s.total_cost_usd) },
+    { label: 'Total Cost', value: fmtCost(s.totalCost), hero: true },
+    { label: 'Total Sessions', value: fmtNum(s.totalSessions), hero: true },
+    { label: 'Total Tasks', value: fmtNum(s.totalTasks), hero: true },
   ].map(c =>
-    '<div class="stat-card"' + (c.title ? ' title="' + c.title + '"' : '') + '>' +
+    '<div class="stat-card' + (c.hero ? ' hero' : '') + '">' +
       '<div class="label">' + c.label + '</div>' +
       '<div class="value">' + c.value + '</div>' +
     '</div>'
   ).join('');
 }
 
-// ── Tasks ──
-
-let allTasks = [];
-let selectedTags = new Set();
-let taskTurnsOffset = 0;
-const TURNS_PAGE = 10;
+// ── Task View ──
 
-function getTaskTimeRange() {
-  const val = document.getElementById('task-time-range').value;
-  if (!val) return {};
-  const now = new Date();
-  const ms = val.endsWith('h') ? parseInt(val) * 3600000 : parseInt(val) * 86400000;
-  return { from: new Date(now.getTime() - ms).toISOString(), to: now.toISOString() };
-}
+async function loadTasks() {
+  try {
+    const [stats, tasks] = await Promise.all([
+      fetchJson('/api/stats'),
+      fetchJson('/api/tasks'),
+    ]);
+    if (!tasks.length) { allTaskGroups = []; renderTaskTable([]); return; }
 
-async function renderTasks(tasks, activeCtx) {
-  const panel = document.getElementById('tasks-panel');
-  const ctxEl = document.getElementById('active-context');
+    // Discover tag combinations by sampling one turn per tag
+    const samples = await Promise.all(
+      tasks.map(t => fetchJson('/api/tasks/turns?tags=' + encodeURIComponent(t.task) + '&mode=any&limit=1')
+        .then(turns => turns[0]?.tags || t.task)
+        .catch(() => t.task)
+      )
+    );
+    // Deduplicate: normalize each combo to sorted pipe-separated
+    const combos = [...new Set(samples.map(s => s.split(', ').sort().join('|')))];
+
+    // Fetch stats for each unique combo
+    const comboStats = await Promise.all(
+      combos.map(combo => {
+        const tags = combo.split('|');
+        const qs = 'tags=' + tags.map(encodeURIComponent).join(',') + '&mode=all';
+        return fetchJson('/api/tasks/stats?' + qs)
+          .then(s => ({ ...s, tags: combo }))
+          .catch(() => ({ tags: combo, total_turns: 0, user_turns: 0, total_duration_ms: 0, total_cost_usd: 0 }));
+      })
+    );
+
+    let taskGroups = comboStats.map(s => ({
+      tags: s.tags,
+      turn_count: s.total_turns ?? 0,
+      human_interventions: s.user_turns ?? 0,
+      total_duration_ms: s.total_duration_ms ?? 0,
+      total_cost_usd: s.total_cost_usd ?? 0,
+      last_seen: s.last_seen ?? null,
+    }));
+
+    // Add cost gap to the Untagged row so task costs sum to total
+    const attributedCost = taskGroups.reduce((s, g) => s + (g.total_cost_usd || 0), 0);
+    const totalCost = stats.total_cost_usd || 0;
+    const gap = totalCost - attributedCost;
+    if (gap > 0.01) {
+      const untagged = taskGroups.find(g => g.tags === 'Untagged');
+      if (untagged) {
+        untagged.total_cost_usd = (untagged.total_cost_usd || 0) + gap;
+      } else {
+        taskGroups.push({
+          tags: 'Untagged',
+          turn_count: 0,
+          human_interventions: 0,
+          total_duration_ms: 0,
+          total_cost_usd: gap,
+          last_seen: null,
+        });
+      }
+    }
 
-  if (activeCtx && activeCtx.active) {
-    const tags = Array.isArray(activeCtx.active) ? activeCtx.active : [activeCtx.active];
-    ctxEl.innerHTML = tags.map(t =>
-      '<span style="display:inline-block;background:rgba(124,110,240,0.15);color:var(--accent-light);padding:1px 8px;border-radius:4px;margin-left:4px;font-size:11px">' + escHtml(t) + '</span>'
-    ).join('');
-  } else {
-    ctxEl.textContent = '';
+    allTaskGroups = taskGroups;
+    renderTaskTable(sortData(taskGroups, sortState.tasks));
+  } catch (e) {
+    console.error('tasks load failed', e);
   }
+}
 
-  if (!tasks.length) {
-    panel.style.display = 'none';
+function renderTaskTable(groups) {
+  const tbody = document.getElementById('task-table');
+  if (!groups.length) {
+    tbody.innerHTML = '<tr><td colspan="5" class="empty">No tasks yet. Tag turns with <code>zozul tag</code> to see them here.</td></tr>';
     return;
   }
-
-  panel.style.display = '';
-  allTasks = tasks;
-  renderTagChips('');
-  await loadTaskData();
-}
-
-function renderTagChips(search) {
-  const chipsEl = document.getElementById('task-chips');
-  const q = search.toLowerCase();
-  const filtered = q ? allTasks.filter(t => t.task.toLowerCase().includes(q)) : allTasks;
-  chipsEl.innerHTML = filtered.map(t => {
-    const sel = selectedTags.has(t.task) ? ' selected' : '';
-    return '<label class="tag-chip' + sel + '" data-tag="' + escHtml(t.task) + '" onclick="toggleTag(this)">' +
-      escHtml(t.task) + ' <span style="color:var(--text-dim);font-size:10px">(' + t.turn_count + ')</span></label>';
+  tbody.innerHTML = groups.map(g => {
+    const tags = g.tags.split('|');
+    const pills = tags.map(t =>
+      '<span class="tag-pill' + (t === 'Untagged' ? ' untagged' : '') + '">' + escHtml(t) + '</span>'
+    ).join('');
+    return '<tr class="clickable" onclick="showTaskDetail(\'' + escHtml(g.tags).replace(/'/g, "\\'") + '\')">' +
+      '<td>' + pills + '</td>' +
+      '<td>' + fmtDuration(g.total_duration_ms) + '</td>' +
+      '<td><span class="badge badge-cost">' + fmtCost(g.total_cost_usd) + '</span></td>' +
+      '<td>' + fmtNum(g.human_interventions) + '</td>' +
+      '<td title="' + fmtAbsolute(g.last_seen) + '">' + fmtRelative(g.last_seen) + '</td>' +
+      '</tr>';
   }).join('');
 }
 
-function filterTagChips(q) { renderTagChips(q); }
-
-function toggleTag(el) {
-  const tag = el.dataset.tag;
-  if (selectedTags.has(tag)) {
-    selectedTags.delete(tag);
-    el.classList.remove('selected');
-  } else {
-    selectedTags.add(tag);
-    el.classList.add('selected');
-  }
-  loadTaskData();
+function filterTaskTable(q) {
+  q = q.toLowerCase();
+  const filtered = q
+    ? allTaskGroups.filter(g => g.tags.toLowerCase().includes(q))
+    : allTaskGroups;
+  renderTaskTable(sortData(filtered, sortState.tasks));
 }
 
-function onTaskTimeRange() { loadTaskData(); }
+// ── Task Group Detail ──
 
-function taskQueryParams() {
-  const selected = Array.from(selectedTags);
-  const tags = selected.length > 0 ? selected : allTasks.map(t => t.task);
-  const mode = selected.length > 0 ? 'all' : 'any';
-  const { from, to } = getTaskTimeRange();
-  let qs = 'tags=' + tags.map(encodeURIComponent).join(',') + '&mode=' + mode;
-  if (from && to) qs += '&from=' + encodeURIComponent(from) + '&to=' + encodeURIComponent(to);
-  return { qs, tags, label: selected.length === 0 ? 'All tags' : selected.join(' + ') };
-}
+async function showTaskDetail(tagSet) {
+  previousView = 'tasks';
+  showView('task-detail');
 
-async function loadTaskData() {
-  taskTurnsOffset = 0;
-  const { qs, tags, label } = taskQueryParams();
-  if (tags.length === 0) return;
+  const tags = tagSet.split('|');
+  taskDetailTags = tags;
+  taskDetailOffset = 0;
 
-  const selected = Array.from(selectedTags);
-  const fetches = [fetchJson('/api/tasks/stats?' + qs)];
-  // Only fetch turns if specific tags are selected
-  if (selected.length > 0) {
-    fetches.push(fetchJson('/api/tasks/turns?' + qs + '&limit=' + TURNS_PAGE + '&offset=0'));
-  }
-  const [stats, turns] = await Promise.all(fetches);
+  const statsEl = document.getElementById('task-detail-stats');
+  const pills = tags.map(t =>
+    '<span class="tag-pill' + (t === 'Untagged' ? ' untagged' : '') + '">' + escHtml(t) + '</span>'
+  ).join(' ');
+  statsEl.innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Loading...</div></div>';
 
-  renderTaskStats(stats, label);
-  if (selected.length > 0 && turns) {
-    renderTurnsTable(turns, false);
-    taskTurnsOffset = turns.length;
-  } else {
-    document.getElementById('turns-section').style.display = 'none';
+  if (tags.length === 1 && tags[0] === 'Untagged') {
+    statsEl.innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Task</div><div class="value" style="font-size:16px">' + pills + '</div></div>';
+    document.getElementById('task-turns-table').innerHTML = '<tr><td colspan="5" class="empty">Untagged turns cannot be drilled into.</td></tr>';
+    document.getElementById('task-turns-pagination').innerHTML = '';
+    return;
   }
-}
 
-function renderTaskStats(stats, label) {
-  const grid = document.getElementById('task-stats-grid');
-  grid.innerHTML = [
-    { label: 'Selected',           value: '<span style="font-size:13px;font-family:var(--mono)">' + escHtml(label) + '</span>' },
-    { label: 'Total Turns',        value: fmtNum(stats.total_turns) },
-    { label: 'User Interventions', value: fmtNum(stats.user_turns), title: 'Number of real user prompts' },
-    { label: 'Duration',           value: fmtDuration(stats.total_duration_ms), title: 'Total Claude processing time' },
-    { label: 'Input Tokens',       value: fmtNum(stats.total_input_tokens) },
-    { label: 'Output Tokens',      value: fmtNum(stats.total_output_tokens) },
-    { label: 'Cost',               value: fmtCost(stats.total_cost_usd) },
-  ].map(c =>
-    '<div class="stat-card"' + (c.title ? ' title="' + c.title + '"' : '') + '>' +
-      '<div class="label">' + c.label + '</div>' +
-      '<div class="value">' + c.value + '</div>' +
-    '</div>'
-  ).join('');
+  const qs = 'tags=' + tags.map(encodeURIComponent).join(',') + '&mode=all';
+
+  try {
+    const [stats, rawTurns] = await Promise.all([
+      fetchJson('/api/tasks/stats?' + qs),
+      fetchJson('/api/tasks/turns?' + qs + '&limit=' + PAGE_SIZE + '&offset=0'),
+    ]);
+    const turns = await enrichTurnsWithCost(rawTurns);
+
+    statsEl.innerHTML = [
+      { label: 'Task', value: '<span style="font-size:14px">' + pills + '</span>' },
+      { label: 'Total Turns', value: fmtNum(stats.total_turns) },
+      { label: 'Human Interventions', value: fmtNum(stats.user_turns) },
+      { label: 'Duration', value: fmtDuration(stats.total_duration_ms) },
+      { label: 'Cost', value: fmtCost(stats.total_cost_usd) },
+    ].map(c =>
+      '<div class="stat-card"><div class="label">' + c.label + '</div><div class="value" style="font-size:16px">' + c.value + '</div></div>'
+    ).join('');
+
+    renderTaskDetailTurns(turns);
+    taskDetailOffset = turns.length;
+  } catch (e) {
+    console.error('task detail load failed', e);
+    document.getElementById('task-detail-stats').innerHTML =
+      '<div class="stat-card" style="grid-column:1/-1"><div class="label" style="color:var(--red)">Error: ' + escHtml(String(e)) + '</div></div>';
+  }
 }
 
-function renderTurnsTable(turns, append) {
-  const section = document.getElementById('turns-section');
-  const tbody = document.getElementById('turns-table');
-  const countEl = document.getElementById('turns-count');
-  const paginationEl = document.getElementById('turns-pagination');
+function renderTaskDetailTurns(turns) {
+  const tbody = document.getElementById('task-turns-table');
+  const paginationEl = document.getElementById('task-turns-pagination');
 
-  if (!turns.length && !append) {
-    section.style.display = 'none';
+  if (!turns.length && taskDetailOffset === 0) {
+    tbody.innerHTML = '<tr><td colspan="5" class="empty">No turns found.</td></tr>';
+    paginationEl.innerHTML = '';
     return;
   }
 
-  section.style.display = '';
-  const page = Math.floor(taskTurnsOffset / TURNS_PAGE);
-  const hasMore = turns.length >= TURNS_PAGE;
-  countEl.textContent = '';
+  const page = Math.floor(taskDetailOffset / PAGE_SIZE);
+  const hasMore = turns.length >= PAGE_SIZE;
   paginationEl.innerHTML =
-    (page > 0 ? '<button class="range-btn" onclick="turnsPrevPage()">\u2190 Prev</button>' : '') +
+    (page > 0 ? '<button class="time-btn" onclick="taskDetailPrev()">Prev</button>' : '') +
     '<span style="font-size:11px;color:var(--text-dim);font-family:var(--mono)">Page ' + (page + 1) + '</span>' +
-    (hasMore ? '<button class="range-btn" onclick="turnsNextPage()">Next \u2192</button>' : '');
+    (hasMore ? '<button class="time-btn" onclick="taskDetailNext()">Next</button>' : '');
 
-  const html = turns.map(t => {
-    const tags = t.tags ? t.tags.split(', ').map(tag =>
-      '<span style="display:inline-block;background:rgba(124,110,240,0.12);color:var(--accent-light);padding:0 6px;border-radius:3px;font-size:10px;font-family:var(--mono)">' + escHtml(tag) + '</span>'
-    ).join(' ') : '';
+  tbody.innerHTML = turns.map(t => {
     const preview = t.content_text ? escHtml(t.content_text.slice(0, 80)) + (t.content_text.length > 80 ? '\u2026' : '') : '\u2014';
     const tokens = fmtNum((t.block_input_tokens || 0) + (t.block_output_tokens || 0));
-
-    return '<tr class="clickable" onclick="showTurnBlock(' + t.id + ')">' +
+    return '<tr class="clickable" onclick="showTurnBlock(' + t.id + ', \'task-detail\')">' +
       '<td title="' + fmtAbsolute(t.timestamp) + '" style="white-space:nowrap">' + fmtRelative(t.timestamp) + '</td>' +
       '<td style="font-family:var(--mono);font-size:12px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + preview + '</td>' +
-      '<td>' + tags + '</td>' +
       '<td>' + fmtDuration(t.duration_ms) + '</td>' +
       '<td><span class="badge badge-tokens">' + tokens + '</span></td>' +
       '<td><span class="badge badge-cost">' + fmtCost(t.block_cost_usd) + '</span></td>' +
       '</tr>';
   }).join('');
+}
 
-  if (append) {
-    tbody.innerHTML += html;
-  } else {
-    tbody.innerHTML = html;
+async function taskDetailNext() {
+  taskDetailOffset += PAGE_SIZE;
+  const qs = 'tags=' + taskDetailTags.map(encodeURIComponent).join(',') + '&mode=all&limit=' + PAGE_SIZE + '&offset=' + taskDetailOffset;
+  const turns = await enrichTurnsWithCost(await fetchJson('/api/tasks/turns?' + qs));
+  renderTaskDetailTurns(turns);
+}
+
+async function taskDetailPrev() {
+  taskDetailOffset = Math.max(0, taskDetailOffset - PAGE_SIZE);
+  const qs = 'tags=' + taskDetailTags.map(encodeURIComponent).join(',') + '&mode=all&limit=' + PAGE_SIZE + '&offset=' + taskDetailOffset;
+  const turns = await enrichTurnsWithCost(await fetchJson('/api/tasks/turns?' + qs));
+  renderTaskDetailTurns(turns);
+}
+
+// ── Tag View ──
+
+async function loadTags() {
+  try {
+    const tasks = await fetchJson('/api/tasks');
+    if (!tasks.length) { allTagStats = []; renderTagTable([]); return; }
+    const statsList = await Promise.all(
+      tasks.map(t => fetchJson('/api/tasks/stats?tags=' + encodeURIComponent(t.task) + '&mode=any')
+        .then(s => ({ ...s, tag: t.task, last_seen: t.last_tagged }))
+        .catch(() => ({ tag: t.task, turn_count: t.turn_count, human_interventions: 0, total_duration_ms: 0, total_cost_usd: 0, last_seen: t.last_tagged }))
+      )
+    );
+    allTagStats = statsList.map(s => ({
+      tag: s.tag,
+      turn_count: s.total_turns ?? s.turn_count ?? 0,
+      human_interventions: s.user_turns ?? s.human_interventions ?? 0,
+      total_duration_ms: s.total_duration_ms ?? 0,
+      total_cost_usd: s.total_cost_usd ?? 0,
+      last_seen: s.last_seen,
+    }));
+    renderTagTable(sortData(allTagStats, sortState.tags));
+  } catch (e) {
+    console.error('tags load failed', e);
+  }
+}
+
+function renderTagTable(stats) {
+  const tbody = document.getElementById('tag-table');
+  if (!stats.length) {
+    tbody.innerHTML = '<tr><td colspan="5" class="empty">No tags yet. Tag turns with <code>zozul tag</code> to see them here.</td></tr>';
+    return;
   }
+  tbody.innerHTML = stats.map(t =>
+    '<tr class="clickable" onclick="showTagDetail(\'' + escHtml(t.tag).replace(/'/g, "\\'") + '\')">' +
+      '<td><span class="tag-pill">' + escHtml(t.tag) + '</span></td>' +
+      '<td>' + fmtDuration(t.total_duration_ms) + '</td>' +
+      '<td><span class="badge badge-cost">' + fmtCost(t.total_cost_usd) + '</span></td>' +
+      '<td>' + fmtNum(t.human_interventions) + '</td>' +
+      '<td title="' + fmtAbsolute(t.last_seen) + '">' + fmtRelative(t.last_seen) + '</td>' +
+    '</tr>'
+  ).join('');
+}
+
+// ── Tag Detail ──
+
+async function showTagDetail(tagName) {
+  previousView = 'tags';
+  showView('tag-detail');
+  tagDetailName = tagName;
+  tagDetailOffset = 0;
+
+  const statsEl = document.getElementById('tag-detail-stats');
+  statsEl.innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Loading...</div></div>';
+
+  try {
+    const tagQs = 'tags=' + encodeURIComponent(tagName) + '&mode=any';
+    const [stats, rawTurns] = await Promise.all([
+      fetchJson('/api/tasks/stats?' + tagQs),
+      fetchJson('/api/tasks/turns?' + tagQs + '&limit=' + PAGE_SIZE + '&offset=0'),
+    ]);
+    const turns = await enrichTurnsWithCost(rawTurns);
+
+    statsEl.innerHTML = [
+      { label: 'Tag', value: '<span class="tag-pill" style="font-size:14px;padding:4px 12px">' + escHtml(tagName) + '</span>' },
+      { label: 'Total Turns', value: fmtNum(stats.total_turns) },
+      { label: 'Human Interventions', value: fmtNum(stats.user_turns) },
+      { label: 'Duration', value: fmtDuration(stats.total_duration_ms) },
+      { label: 'Cost', value: fmtCost(stats.total_cost_usd) },
+    ].map(c =>
+      '<div class="stat-card"><div class="label">' + c.label + '</div><div class="value" style="font-size:16px">' + c.value + '</div></div>'
+    ).join('');
+
+    renderTagDetailTurns(turns);
+    tagDetailOffset = turns.length;
+  } catch (e) {
+    console.error('tag detail load failed', e);
+    document.getElementById('tag-detail-stats').innerHTML =
+      '<div class="stat-card" style="grid-column:1/-1"><div class="label" style="color:var(--red)">Error: ' + escHtml(String(e)) + '</div></div>';
+  }
+}
+
+function renderTagDetailTurns(turns) {
+  const tbody = document.getElementById('tag-turns-table');
+  const paginationEl = document.getElementById('tag-turns-pagination');
+
+  if (!turns.length && tagDetailOffset === 0) {
+    tbody.innerHTML = '<tr><td colspan="4" class="empty">No turns found.</td></tr>';
+    paginationEl.innerHTML = '';
+    return;
+  }
+
+  const page = Math.floor(tagDetailOffset / PAGE_SIZE);
+  const hasMore = turns.length >= PAGE_SIZE;
+  paginationEl.innerHTML =
+    (page > 0 ? '<button class="time-btn" onclick="tagDetailPrev()">Prev</button>' : '') +
+    '<span style="font-size:11px;color:var(--text-dim);font-family:var(--mono)">Page ' + (page + 1) + '</span>' +
+    (hasMore ? '<button class="time-btn" onclick="tagDetailNext()">Next</button>' : '');
+
+  tbody.innerHTML = turns.map(t => {
+    const preview = t.content_text ? escHtml(t.content_text.slice(0, 100)) + (t.content_text.length > 100 ? '\u2026' : '') : '\u2014';
+    return '<tr class="clickable" onclick="showTurnBlock(' + t.id + ', \'tag-detail\')">' +
+      '<td title="' + fmtAbsolute(t.timestamp) + '" style="white-space:nowrap">' + fmtRelative(t.timestamp) + '</td>' +
+      '<td style="font-family:var(--mono);font-size:12px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + preview + '</td>' +
+      '<td><span class="session-id" onclick="event.stopPropagation();copyText(\'' + t.session_id + '\')" title="Click to copy">' +
+        shortId(t.session_id) + '<span class="copy-icon">&#x2398;</span></span></td>' +
+      '<td><span class="badge badge-cost">' + fmtCost(t.block_cost_usd ?? t.estimated_cost_usd ?? 0) + '</span></td>' +
+      '</tr>';
+  }).join('');
 }
 
-async function showTurnBlock(turnId) {
-  document.getElementById('main-view').style.display = 'none';
-  document.getElementById('detail-view').classList.remove('active');
-  const view = document.getElementById('turn-detail-view');
-  view.classList.add('active');
+async function tagDetailNext() {
+  tagDetailOffset += PAGE_SIZE;
+  const tagQs = 'tags=' + encodeURIComponent(tagDetailName) + '&mode=any';
+  const turns = await enrichTurnsWithCost(await fetchJson('/api/tasks/turns?' + tagQs + '&limit=' + PAGE_SIZE + '&offset=' + tagDetailOffset));
+  renderTagDetailTurns(turns);
+}
+
+async function tagDetailPrev() {
+  tagDetailOffset = Math.max(0, tagDetailOffset - PAGE_SIZE);
+  const tagQs = 'tags=' + encodeURIComponent(tagDetailName) + '&mode=any';
+  const turns = await enrichTurnsWithCost(await fetchJson('/api/tasks/turns?' + tagQs + '&limit=' + PAGE_SIZE + '&offset=' + tagDetailOffset));
+  renderTagDetailTurns(turns);
+}
+
+// ── Turn Block Detail ──
+
+let turnDetailReturnView = 'tasks';
+
+async function showTurnBlock(turnId, returnTo) {
+  turnDetailReturnView = returnTo || 'tasks';
+  showView('turn-detail');
 
   const statsEl = document.getElementById('turn-detail-stats');
   const content = document.getElementById('turn-detail-content');
-  statsEl.innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Loading\u2026</div></div>';
+  statsEl.innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Loading...</div></div>';
   content.innerHTML = '';
 
-  const block = await fetchJson('/api/turns/' + turnId + '/block');
+  const block = await enrichTurnsWithCost(await fetchJson('/api/turns/' + turnId + '/block'));
   if (!block.length) { content.innerHTML = '<div class="empty">No data</div>'; return; }
 
-  // Aggregate block stats
   const totalIn = block.reduce((s, t) => s + (t.input_tokens || 0), 0);
   const totalOut = block.reduce((s, t) => s + (t.output_tokens || 0), 0);
-  const totalCost = block.reduce((s, t) => s + (t.cost_usd || 0), 0);
+  const totalCost = block.reduce((s, t) => s + (t.estimated_cost_usd || 0), 0);
   const duration = block[0].duration_ms || 0;
   const prompt = block[0].content_text ? block[0].content_text.slice(0, 100) : '\u2014';
 
@@ -879,367 +1294,228 @@ async function showTurnBlock(turnId) {
     '<div class="stat-card"><div class="label">' + c.label + '</div><div class="value" style="font-size:14px">' + c.value + '</div></div>'
   ).join('');
 
-  content.innerHTML = block.map((t, i) => {
-    const roleClass = t.role === 'assistant' ? 'assistant' : 'user';
-    const roleLabel = t.role === 'assistant' ? 'Assistant' : 'User';
-    const meta = [];
-    if (t.input_tokens)  meta.push(fmtNum(t.input_tokens) + ' in');
-    if (t.output_tokens) meta.push(fmtNum(t.output_tokens) + ' out');
-    if (t.cost_usd)      meta.push(fmtCost(t.cost_usd));
-    if (t.duration_ms)   meta.push(fmtDuration(t.duration_ms));
-
-    const text = t.content_text
-      ? '<div class="turn-content">' + escHtml(t.content_text) + '</div>'
-      : '';
-
-    let toolsHtml = '';
-    if (t.tool_calls) {
-      try {
-        const calls = JSON.parse(t.tool_calls);
-        toolsHtml = '<div class="tool-calls">' + calls.map((c, ci) => {
-          const uid = 'tb-' + turnId + '-' + i + '-' + ci;
-          const inputJson = JSON.stringify(c.toolInput, null, 2);
-          const resultHtml = c.toolResult
-            ? '<div class="tool-section-label">Result</div><div class="tool-json">' + escHtml(c.toolResult) + '</div>'
-            : '';
-          return '<div class="tool-call" id="' + uid + '">' +
-            '<div class="tool-call-header" onclick="toggleTool(\'' + uid + '\')">' +
-              '<span class="tool-name">' + escHtml(c.toolName) + '</span>' +
-              '<span class="tool-chevron">&#9658;</span>' +
-            '</div>' +
-            '<div class="tool-body">' +
-              '<div class="tool-section-label">Input</div>' +
-              '<div class="tool-json">' + escHtml(inputJson) + '</div>' +
-              resultHtml +
-            '</div>' +
-          '</div>';
-        }).join('') + '</div>';
-      } catch {}
-    }
-
-    return '<div class="turn">' +
-      '<div class="turn-header">' +
-        '<span class="turn-role ' + roleClass + '">' + roleLabel + '</span>' +
-        (meta.length ? '<span class="turn-meta">' + meta.join(' \u00b7 ') + '</span>' : '') +
-        '<span class="turn-ts" title="' + fmtAbsolute(t.timestamp) + '">' + fmtRelative(t.timestamp) + '</span>' +
-      '</div>' +
-      text +
-      toolsHtml +
-    '</div>';
-  }).join('');
-}
-
-async function turnsNextPage() {
-  taskTurnsOffset += TURNS_PAGE;
-  const { qs } = taskQueryParams();
-  const turns = await fetchJson('/api/tasks/turns?' + qs + '&limit=' + TURNS_PAGE + '&offset=' + taskTurnsOffset);
-  renderTurnsTable(turns, false);
-}
-
-async function turnsPrevPage() {
-  taskTurnsOffset = Math.max(0, taskTurnsOffset - TURNS_PAGE);
-  const { qs } = taskQueryParams();
-  const turns = await fetchJson('/api/tasks/turns?' + qs + '&limit=' + TURNS_PAGE + '&offset=' + taskTurnsOffset);
-  renderTurnsTable(turns, false);
-}
-
-// ── Sessions table ──
-
-function renderSessions(sessions) {
-  const tbody = document.getElementById('sessions-table');
-  if (!sessions.length) {
-    tbody.innerHTML = '<tr><td colspan="9" class="empty">No sessions yet. Use Claude Code then run <code>zozul ingest</code>.</td></tr>';
-    return;
-  }
-  tbody.innerHTML = sessions.map(s => {
-    const proj = basename(s.project_path);
-    const projAttr = s.project_path ? ' title="' + escHtml(s.project_path) + '"' : '';
-    return '<tr class="clickable" onclick="showSession(\'' + s.id + '\')">' +
-      '<td><span class="session-id" onclick="event.stopPropagation();copyText(\'' + s.id + '\')" title="Click to copy full ID">' +
-        shortId(s.id) + '<span class="copy-icon">&#x2398;</span></span></td>' +
-      '<td' + projAttr + '>' + escHtml(proj) + '</td>' +
-      '<td title="' + fmtAbsolute(s.started_at) + '">' + fmtRelative(s.started_at) + '</td>' +
-      '<td>' + fmtDuration(s.total_duration_ms) + '</td>' +
-      '<td>' + (s.total_turns ?? 0) + '</td>' +
-      '<td><span class="badge badge-tokens">' + fmtNum(s.total_input_tokens) + '</span></td>' +
-      '<td><span class="badge badge-tokens">' + fmtNum(s.total_output_tokens) + '</span></td>' +
-      '<td><span class="badge badge-cost">' + fmtCost(s.total_cost_usd) + '</span></td>' +
-      '<td style="font-family:var(--mono);font-size:11px;color:var(--text-dim)">' + escHtml(s.model ?? '\u2014') + '</td>' +
-      '</tr>';
-  }).join('');
-}
-
-function filterSessions(q) {
-  q = q.toLowerCase();
-  const filtered = q
-    ? allSessions.filter(s =>
-        (s.id && s.id.toLowerCase().includes(q)) ||
-        (s.project_path && s.project_path.toLowerCase().includes(q)) ||
-        (s.model && s.model.toLowerCase().includes(q))
-      )
-    : allSessions;
-  renderSessions(filtered);
-  // Hide load-more while filtering (results are client-side only)
-  document.getElementById('load-more-row').style.display = q ? 'none' : (sessionsTotal > sessionsOffset ? '' : 'none');
+  content.innerHTML = block.map((t, i) => renderTurnHtml(t, 'tb-' + turnId + '-' + i)).join('');
 }
 
-// ── Charts ──
-
-function makeChart(id, config) {
-  const existing = chartInstances[id];
-  if (existing) {
-    const newHash = JSON.stringify(config.data);
-    if (existing._dataHash === newHash) return;
-    existing._dataHash = newHash;
-    existing.data = config.data;
-    existing.update('none');
-    return;
+function goBackFromTurn() {
+  if (currentView === 'turn-detail') {
+    showView(turnDetailReturnView);
+  } else if (currentView === 'session-detail') {
+    showView(previousView || 'tasks');
   }
-  const ctx = document.getElementById(id);
-  if (!ctx) return;
-  const chart = new Chart(ctx, config);
-  chart._dataHash = JSON.stringify(config.data);
-  chartInstances[id] = chart;
 }
 
-const COLORS = ['#7c6ef0','#4caf50','#42a5f5','#ff9800','#ef5350','#ab47bc','#26a69a','#8d6e63','#78909c','#d4e157'];
-const TICK = { color: '#8b8fa3', font: { family: '"JetBrains Mono", monospace', size: 10 } };
-const LEGEND = { labels: { color: '#8b8fa3', font: { family: '"JetBrains Mono", monospace', size: 10 } } };
-
-function renderTokenCostChart(tokens, cost) {
-  const labels = tokens.map(d => d.timestamp);
-  const costByTs = Object.fromEntries(cost.map(d => [d.timestamp, d.cost]));
-  makeChart('chart-tokens', {
-    type: 'bar',
-    data: {
-      labels,
-      datasets: [
-        { label: 'Cost (USD)', data: labels.map(ts => costByTs[ts] ?? 0),
-          backgroundColor: 'rgba(255,152,0,0.25)', borderColor: '#ff9800', borderWidth: 1,
-          yAxisID: 'yCost', order: 2 },
-        { label: 'Input',  data: tokens.map(d => d.input),
-          type: 'line', borderColor: '#7c6ef0', borderWidth: 2, tension: 0.3, pointRadius: 2,
-          yAxisID: 'yTokens', order: 1 },
-        { label: 'Output', data: tokens.map(d => d.output),
-          type: 'line', borderColor: '#4caf50', borderWidth: 2, tension: 0.3, pointRadius: 2,
-          yAxisID: 'yTokens', order: 1 },
-      ]
-    },
-    options: {
-      responsive: true,
-      plugins: {
-        legend: LEGEND,
-        tooltip: {
-          callbacks: {
-            afterLabel: (ctx) => {
-              if (ctx.dataset.label !== 'Output') return undefined;
-              const cr = tokens[ctx.dataIndex]?.cache_read ?? 0;
-              const inp = tokens[ctx.dataIndex]?.input ?? 0;
-              if (cr <= 0) return undefined;
-              const pct = inp + cr > 0 ? Math.round(cr / (inp + cr) * 100) : 0;
-              return `  Cache read: ${cr.toLocaleString()} (${pct}% of input)`;
-            }
-          }
-        }
-      },
-      scales: {
-        x:       { ticks: TICK },
-        yTokens: { position: 'left',  ticks: TICK, title: { display: true, text: 'Tokens', color: '#8b8fa3', font: { size: 10 } } },
-        yCost:   { position: 'right', grid: { drawOnChartArea: false },
-                   ticks: { ...TICK, callback: v => '$' + v.toFixed(3) },
-                   title: { display: true, text: 'Cost (USD)', color: '#ff9800', font: { size: 10 } } },
-      }
-    }
-  });
-}
+// ── Session Detail ──
 
-// ── Session detail ──
+async function showSession(id, returnTo) {
+  previousView = returnTo || 'tasks';
+  showView('session-detail');
 
-async function showSession(id) {
-  document.getElementById('main-view').style.display = 'none';
-  const view = document.getElementById('detail-view');
-  view.classList.add('active');
-  document.getElementById('detail-stats').innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Loading\u2026</div></div>';
-  document.getElementById('detail-turns').innerHTML = '';
+  document.getElementById('session-detail-stats').innerHTML = '<div class="stat-card" style="grid-column:1/-1"><div class="label">Loading...</div></div>';
+  document.getElementById('session-detail-turns').innerHTML = '';
 
   const [session, turns] = await Promise.all([
     fetchJson('/api/sessions/' + id),
     fetchJson('/api/sessions/' + id + '/turns'),
   ]);
 
-  document.getElementById('detail-stats').innerHTML = [
-    { label: 'Session ID',     value: '<span class="session-id" onclick="copyText(\'' + session.id + '\')" title="Click to copy">' + shortId(session.id) + ' <span class="copy-icon">&#x2398;</span></span>' },
-    { label: 'Project',        value: '<span title="' + escHtml(session.project_path ?? '') + '">' + escHtml(basename(session.project_path)) + '</span>' },
-    { label: 'Model',          value: '<span style="font-family:var(--mono);font-size:13px">' + escHtml(session.model ?? '\u2014') + '</span>' },
-    { label: 'Started',        value: '<span title="' + fmtAbsolute(session.started_at) + '">' + fmtRelative(session.started_at) + '</span>' },
-    { label: 'Duration',       value: fmtDuration(session.total_duration_ms) },
-    { label: 'Turns',          value: session.total_turns },
-    { label: 'Input Tokens',   value: fmtNum(session.total_input_tokens) },
-    { label: 'Output Tokens',  value: fmtNum(session.total_output_tokens) },
-    { label: 'Cost',           value: fmtCost(session.total_cost_usd) },
+  document.getElementById('session-detail-stats').innerHTML = [
+    { label: 'Session ID', value: '<span class="session-id" onclick="copyText(\'' + session.id + '\')" title="Click to copy">' + shortId(session.id) + ' <span class="copy-icon">&#x2398;</span></span>' },
+    { label: 'Project', value: '<span title="' + escHtml(session.project_path ?? '') + '">' + escHtml(basename(session.project_path)) + '</span>' },
+    { label: 'Model', value: '<span style="font-family:var(--mono);font-size:13px">' + escHtml(session.model ?? '\u2014') + '</span>' },
+    { label: 'Duration', value: fmtDuration(session.total_duration_ms) },
+    { label: 'Turns', value: session.total_turns },
+    { label: 'Input Tokens', value: fmtNum(session.total_input_tokens) },
+    { label: 'Output Tokens', value: fmtNum(session.total_output_tokens) },
+    { label: 'Cost', value: fmtCost(session.total_cost_usd) },
   ].map(c =>
-    '<div class="stat-card">' +
-      '<div class="label">' + c.label + '</div>' +
-      '<div class="value" style="font-size:14px">' + c.value + '</div>' +
-    '</div>'
+    '<div class="stat-card"><div class="label">' + c.label + '</div><div class="value" style="font-size:14px">' + c.value + '</div></div>'
   ).join('');
 
-  const turnsDiv = document.getElementById('detail-turns');
+  const turnsDiv = document.getElementById('session-detail-turns');
   if (!turns.length) {
-    turnsDiv.innerHTML = '<div class="empty">No turns recorded. Run <code>zozul ingest</code> to parse transcript files.</div>';
+    turnsDiv.innerHTML = '<div class="empty">No turns recorded.</div>';
     return;
   }
+  turnsDiv.innerHTML = turns.map((t, i) => renderTurnHtml(t, 'tc-' + i)).join('');
+}
 
-  turnsDiv.innerHTML = turns.map((t, i) => {
-    const roleClass = t.role === 'assistant' ? 'assistant' : 'user';
-    const roleLabel = t.role === 'assistant' ? 'Assistant' : 'User';
-
-    const meta = [];
-    if (t.input_tokens)  meta.push(fmtNum(t.input_tokens)  + ' in');
-    if (t.output_tokens) meta.push(fmtNum(t.output_tokens) + ' out');
-    if (t.cost_usd)      meta.push(fmtCost(t.cost_usd));
-    if (t.duration_ms)   meta.push(fmtDuration(t.duration_ms));
-
-    const content = t.content_text
-      ? '<div class="turn-content">' + escHtml(t.content_text) + '</div>'
-      : '';
-
-    let toolsHtml = '';
-    if (t.tool_calls) {
-      try {
-        const calls = JSON.parse(t.tool_calls);
-        toolsHtml = '<div class="tool-calls">' + calls.map((c, ci) => {
-          const uid = 'tc-' + i + '-' + ci;
-          const inputJson = JSON.stringify(c.toolInput, null, 2);
-          const resultHtml = c.toolResult
-            ? '<div class="tool-section-label">Result</div><div class="tool-json">' + escHtml(c.toolResult) + '</div>'
-            : '';
-          return '<div class="tool-call" id="' + uid + '">' +
-            '<div class="tool-call-header" onclick="toggleTool(\'' + uid + '\')">' +
-              '<span class="tool-name">' + escHtml(c.toolName) + '</span>' +
-              '<span class="tool-chevron">&#9658;</span>' +
-            '</div>' +
-            '<div class="tool-body">' +
-              '<div class="tool-section-label">Input</div>' +
-              '<div class="tool-json">' + escHtml(inputJson) + '</div>' +
-              resultHtml +
-            '</div>' +
-          '</div>';
-        }).join('') + '</div>';
-      } catch {}
-    }
+// ── Shared turn rendering ──
+
+function renderTurnHtml(t, idPrefix) {
+  const roleClass = t.role === 'assistant' ? 'assistant' : 'user';
+  const roleLabel = t.role === 'assistant' ? 'Assistant' : 'User';
+  const meta = [];
+  if (t.input_tokens)  meta.push(fmtNum(t.input_tokens) + ' in');
+  if (t.output_tokens) meta.push(fmtNum(t.output_tokens) + ' out');
+  if (t.estimated_cost_usd || t.cost_usd) meta.push(fmtCost(t.estimated_cost_usd || t.cost_usd));
+  if (t.duration_ms)   meta.push(fmtDuration(t.duration_ms));
+
+  const text = t.content_text
+    ? '<div class="turn-content">' + escHtml(t.content_text) + '</div>'
+    : '';
+
+  let toolsHtml = '';
+  if (t.tool_calls) {
+    try {
+      const calls = JSON.parse(t.tool_calls);
+      toolsHtml = '<div class="tool-calls">' + calls.map((c, ci) => {
+        const uid = idPrefix + '-' + ci;
+        const inputJson = JSON.stringify(c.toolInput, null, 2);
+        const resultHtml = c.toolResult
+          ? '<div class="tool-section-label">Result</div><div class="tool-json">' + escHtml(c.toolResult) + '</div>'
+          : '';
+        return '<div class="tool-call" id="' + uid + '">' +
+          '<div class="tool-call-header" onclick="toggleTool(\'' + uid + '\')">' +
+            '<span class="tool-name">' + escHtml(c.toolName) + '</span>' +
+            '<span class="tool-chevron">&#9658;</span>' +
+          '</div>' +
+          '<div class="tool-body">' +
+            '<div class="tool-section-label">Input</div>' +
+            '<div class="tool-json">' + escHtml(inputJson) + '</div>' +
+            resultHtml +
+          '</div>' +
+        '</div>';
+      }).join('') + '</div>';
+    } catch {}
+  }
 
-    return '<div class="turn">' +
-      '<div class="turn-header">' +
-        '<span class="turn-role ' + roleClass + '">' + roleLabel + '</span>' +
-        (meta.length ? '<span class="turn-meta">' + meta.join(' \u00b7 ') + '</span>' : '') +
-        '<span class="turn-ts" title="' + fmtAbsolute(t.timestamp) + '">' + fmtRelative(t.timestamp) + '</span>' +
-      '</div>' +
-      content +
-      toolsHtml +
-    '</div>';
-  }).join('');
+  return '<div class="turn">' +
+    '<div class="turn-header">' +
+      '<span class="turn-role ' + roleClass + '">' + roleLabel + '</span>' +
+      (meta.length ? '<span class="turn-meta">' + meta.join(' \u00b7 ') + '</span>' : '') +
+      '<span class="turn-ts" title="' + fmtAbsolute(t.timestamp) + '">' + fmtRelative(t.timestamp) + '</span>' +
+    '</div>' +
+    text +
+    toolsHtml +
+  '</div>';
 }
 
 function toggleTool(uid) {
   document.getElementById(uid).classList.toggle('open');
 }
 
-function showMain() {
-  document.getElementById('detail-view').classList.remove('active');
-  document.getElementById('turn-detail-view').classList.remove('active');
-  document.getElementById('main-view').style.display = '';
-}
+// ── Sessions View ──
 
-// ── Keyboard ──
+async function loadSessions() {
+  try {
+    const resp = await fetchJson('/api/sessions?limit=' + SESSIONS_PAGE + '&offset=0');
+    const sessions = Array.isArray(resp) ? resp : resp.sessions;
+    allSessions = sessions;
+    sessionsTotal = Array.isArray(resp) ? sessions.length : resp.total;
+    sessionsOffset = sessions.length;
+    renderSessionsTable(sortData(sessions, sortState.sessions));
+    updateLoadMore();
+  } catch (e) {
+    console.error('sessions load failed', e);
+  }
+}
 
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') {
-    if (document.getElementById('detail-view').classList.contains('active') ||
-        document.getElementById('turn-detail-view').classList.contains('active')) {
-      showMain();
-    }
+async function loadMoreSessions() {
+  try {
+    const resp = await fetchJson('/api/sessions?limit=' + SESSIONS_PAGE + '&offset=' + sessionsOffset);
+    const page = Array.isArray(resp) ? resp : resp.sessions;
+    allSessions = allSessions.concat(page);
+    sessionsTotal = Array.isArray(resp) ? allSessions.length : resp.total;
+    sessionsOffset = allSessions.length;
+    const q = document.getElementById('session-filter').value;
+    const display = q ? allSessions.filter(s => sessionMatches(s, q)) : allSessions;
+    renderSessionsTable(sortData(display, sortState.sessions));
+    updateLoadMore();
+  } catch (e) {
+    console.error('load more failed', e);
   }
-});
+}
 
-// ── Range picker ──
-
-function setActivePreset(range) {
-  currentRange = range;
-  customFrom = null;
-  customTo = null;
-  document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
-  const btn = document.querySelector('.range-btn[data-range="' + range + '"]');
-  if (btn) btn.classList.add('active');
-  document.getElementById('custom-range').classList.remove('visible');
-  updateChartLabels();
-  loadCharts();
+function updateLoadMore() {
+  const row = document.getElementById('load-more-row');
+  const shown = document.getElementById('sessions-shown');
+  const count = document.getElementById('sessions-count');
+  count.textContent = '(' + sessionsTotal + ')';
+  if (sessionsTotal > sessionsOffset) {
+    row.style.display = '';
+    shown.textContent = sessionsOffset + ' of ' + sessionsTotal + ' shown';
+  } else {
+    row.style.display = 'none';
+  }
 }
 
-function updateChartLabels() {
-  document.getElementById('tokens-label').textContent = 'Tokens & Cost (' + chartLabel() + ')';
+function sessionMatches(s, q) {
+  q = q.toLowerCase();
+  return (s.id && s.id.toLowerCase().includes(q)) ||
+    (s.project_path && s.project_path.toLowerCase().includes(q)) ||
+    (s.model && s.model.toLowerCase().includes(q));
 }
 
-document.getElementById('range-picker').addEventListener('click', e => {
-  const btn = e.target.closest('.range-btn[data-range]');
-  if (!btn) return;
-  setActivePreset(btn.dataset.range);
-});
+function filterSessions(q) {
+  const filtered = q ? allSessions.filter(s => sessionMatches(s, q)) : allSessions;
+  renderSessionsTable(sortData(filtered, sortState.sessions));
+  document.getElementById('load-more-row').style.display = q ? 'none' : (sessionsTotal > sessionsOffset ? '' : 'none');
+}
 
-// ── Custom range ──
+function renderSessionsTable(sessions) {
+  const tbody = document.getElementById('sessions-table');
+  if (!sessions.length) {
+    tbody.innerHTML = '<tr><td colspan="7" class="empty">No sessions yet.</td></tr>';
+    return;
+  }
+  tbody.innerHTML = sessions.map(s => {
+    const proj = basename(s.project_path);
+    const projAttr = s.project_path ? ' title="' + escHtml(s.project_path) + '"' : '';
+    return '<tr class="clickable" onclick="showSession(\'' + s.id + '\', \'sessions\')">' +
+      '<td><span class="session-id" onclick="event.stopPropagation();copyText(\'' + s.id + '\')" title="Click to copy full ID">' +
+        shortId(s.id) + '<span class="copy-icon">&#x2398;</span></span></td>' +
+      '<td' + projAttr + '>' + escHtml(proj) + '</td>' +
+      '<td title="' + fmtAbsolute(s.started_at) + '">' + fmtRelative(s.started_at) + '</td>' +
+      '<td>' + fmtDuration(s.total_duration_ms) + '</td>' +
+      '<td>' + (s.total_turns ?? 0) + '</td>' +
+      '<td><span class="badge badge-cost">' + fmtCost(s.total_cost_usd) + '</span></td>' +
+      '<td style="font-family:var(--mono);font-size:11px;color:var(--text-dim)">' + escHtml(s.model ?? '\u2014') + '</td>' +
+      '</tr>';
+  }).join('');
+}
 
-const customRangeEl = document.getElementById('custom-range');
-const customToggle = document.getElementById('custom-range-toggle');
+// ── Loading orchestration ──
 
-function initCustomDefaults() {
-  const now = new Date();
-  const yesterday = new Date(now.getTime() - 24 * 3600000);
-  const toLocal = d => {
-    const pad = n => String(n).padStart(2, '0');
-    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
-  };
-  document.getElementById('range-from').value = toLocal(yesterday);
-  document.getElementById('range-to').value = toLocal(now);
+async function loadViewData(view) {
+  if (view === 'summary') await loadSummary();
+  else if (view === 'sessions') await loadSessions();
+  else if (view === 'tasks') await loadTasks();
+  else if (view === 'tags') await loadTags();
 }
 
-customToggle.addEventListener('click', (e) => {
-  e.stopPropagation();
-  const isOpen = customRangeEl.classList.contains('visible');
-  if (isOpen) {
-    customRangeEl.classList.remove('visible');
-    customToggle.classList.remove('active');
-    var last = document.querySelector('.range-btn[data-range="' + currentRange + '"]');
-    if (last) last.classList.add('active');
-  } else {
-    initCustomDefaults();
-    customRangeEl.classList.add('visible');
-    document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
-    customToggle.classList.add('active');
+async function loadDashboard() {
+  const btn = document.querySelector('.auto-btn');
+  btn?.classList.add('loading');
+  const minSpinner = new Promise(r => setTimeout(r, 400));
+  try {
+    await loadViewData(currentView);
+  } catch (e) {
+    console.error('load failed', e);
+  } finally {
+    await minSpinner;
+    btn?.classList.remove('loading');
   }
-});
+}
 
-document.getElementById('apply-custom').addEventListener('click', () => {
-  const fromVal = document.getElementById('range-from').value;
-  const toVal = document.getElementById('range-to').value;
-  if (!fromVal || !toVal) return;
-  customFrom = new Date(fromVal).toISOString();
-  customTo = new Date(toVal).toISOString();
-  customStep = document.getElementById('range-step').value;
-  document.querySelectorAll('.range-btn[data-range]').forEach(b => b.classList.remove('active'));
-  updateChartLabels();
-  loadCharts();
-});
+function manualRefresh() {
+  if (autoRefreshTimer) { clearTimeout(autoRefreshTimer); autoRefreshTimer = null; }
+  loadDashboard().then(scheduleAutoRefresh);
+}
 
-async function loadCharts() {
-  const qs = chartQueryString();
-  const [tokens, cost] = await Promise.all([
-    fetchJson('/api/metrics/tokens?' + qs),
-    fetchJson('/api/metrics/cost?' + qs),
-  ]);
-  renderTokenCostChart(tokens, cost);
+function scheduleAutoRefresh() {
+  autoRefreshTimer = setTimeout(async () => {
+    // Only auto-refresh main views, not detail views
+    if (['summary', 'sessions', 'tasks', 'tags'].includes(currentView)) {
+      await loadDashboard();
+    }
+    scheduleAutoRefresh();
+  }, AUTO_REFRESH_INTERVAL);
 }
 
-loadDashboard().then(scheduleAutoRefresh);
+// ── Init ──
+
+detectDataSource().then(() => loadDashboard()).then(scheduleAutoRefresh);
 </script>
 </body>
 </html>