jinzd-ai-cli 0.4.214 → 0.4.216

package/dist/web/client/app.js

@@ -27,6 +27,11 @@ let inputHistory = []; // Previous user inputs for ↑/↓ navigation
 let historyIndex = -1; // -1 = not browsing history
 let savedInputDraft = ''; // Saved current input when entering history mode
 let toolTimers = new Map(); // callId → { startTime, intervalId }
+let latestStatus = null;
+let pendingApprovals = new Map(); // requestId -> approval metadata
+let lastToolResults = [];
+let replayCurrentMessages = [];
+let replayCurrentFilter = 'all';
 
 // ── Multi-Tab state (P2-1) ────────────────────────────────────────
 // Each "tab" represents an open session within the single page.
@@ -60,6 +65,8 @@ let cachedSessions = [];
 let cachedToolsData = null;
 const sessionTabsListEl = document.getElementById('session-tabs-list');
 const btnAddTab = document.getElementById('btn-add-tab');
+const dashboardPanel = document.getElementById('dashboard-panel');
+const btnDashboardRefresh = document.getElementById('btn-dashboard-refresh');
 
 // ── Configure marked.js ────────────────────────────────────────────
 
@@ -283,6 +290,9 @@ function handleToolCallStart(msg) {
 }
 
 function handleToolCallResult(msg) {
+  lastToolResults.push({ toolName: msg.toolName, content: msg.content || '', isError: !!msg.isError, timestamp: Date.now() });
+  if (lastToolResults.length > 30) lastToolResults.shift();
+  renderDashboard();
   // Stop live timer
   const timer = toolTimers.get(msg.callId);
   if (timer) {
@@ -325,6 +335,8 @@ function handleToolCallResult(msg) {
 }
 
 function handleConfirmRequest(msg) {
+  pendingApprovals.set(msg.requestId, { kind: 'tool', requestId: msg.requestId, toolName: msg.toolName, args: msg.args, dangerLevel: msg.dangerLevel, diff: msg.diff, timestamp: Date.now() });
+  renderDashboard();
   const isDestructive = msg.dangerLevel === 'destructive';
   const el = document.createElement('div');
   el.className = `confirm-card ${isDestructive ? 'tool-border-destructive' : 'tool-border-write'} my-1`;
@@ -334,7 +346,7 @@ function handleConfirmRequest(msg) {
       <span class="badge ${isDestructive ? 'badge-error' : 'badge-warning'} badge-sm">${isDestructive ? '⚠ DESTRUCTIVE' : '✎ Write'}</span>
       <span class="text-sm font-semibold">${escapeHtml(msg.toolName)}</span>
     </div>
-    ${msg.diff ? `<div class="confirm-diff w-full">${renderDiffHtml(msg.diff)}</div>` : ''}
+    ${msg.diff ? `<div class="flex justify-end mb-1"><button class="btn btn-xs btn-ghost" data-action="copy-confirm-diff" data-diff="${escapeHtml(msg.diff)}">Copy patch</button></div><div class="confirm-diff w-full">${renderDiffHtml(msg.diff)}</div>` : ''}
     <div class="flex gap-2 mt-2">
       <button class="btn btn-success btn-sm btn-outline" data-action="confirm-response" data-request-id="${msg.requestId}" data-approved="true">✓ Approve</button>
       <button class="btn btn-error btn-sm btn-outline" data-action="confirm-response" data-request-id="${msg.requestId}" data-approved="false">✗ Deny</button>
@@ -345,15 +357,21 @@ function handleConfirmRequest(msg) {
 }
 
 function handleBatchConfirmRequest(msg) {
+  pendingApprovals.set(msg.requestId, { kind: 'batch', requestId: msg.requestId, files: msg.files, dangerLevel: 'write', timestamp: Date.now() });
+  renderDashboard();
   const el = document.createElement('div');
   el.className = 'confirm-card tool-border-write my-1 batch-confirm';
   el.setAttribute('data-request-id', msg.requestId);
 
-  const fileListHtml = msg.files.map(f => `
-    <div class="file-item">
-      <input type="checkbox" checked class="checkbox checkbox-sm checkbox-primary" data-index="${f.index}">
-      <span class="opacity-80">${escapeHtml(f.filePath)} <span class="badge badge-ghost badge-xs">${escapeHtml(f.toolName)}</span></span>
-    </div>
+  const fileListHtml = msg.files.map((f, idx) => `
+    <details class="diff-file-details" ${idx === 0 ? 'open' : ''}>
+      <summary class="flex items-center gap-2">
+        <input type="checkbox" checked class="checkbox checkbox-sm checkbox-primary" data-index="${f.index}" onclick="event.stopPropagation()">
+        <span class="truncate flex-1">${escapeHtml(f.filePath)} <span class="badge badge-ghost badge-xs">${escapeHtml(f.toolName)}</span></span>
+        ${f.diff ? `<button class="btn btn-xs btn-ghost" data-action="copy-confirm-diff" data-diff="${escapeHtml(f.diff)}" onclick="event.stopPropagation()">Copy</button>` : ''}
+      </summary>
+      ${f.diff ? `<div class="confirm-diff w-full">${renderDiffHtml(f.diff)}</div>` : '<div class="text-xs opacity-50 p-2">No diff preview.</div>'}
+    </details>
   `).join('');
 
   el.innerHTML = `
@@ -372,6 +390,8 @@ function handleBatchConfirmRequest(msg) {
 }
 
 function handleAskUserRequest(msg) {
+  pendingApprovals.set(msg.requestId, { kind: 'ask_user', requestId: msg.requestId, toolName: 'ask_user', dangerLevel: 'safe', question: msg.question, timestamp: Date.now() });
+  renderDashboard();
   const el = document.createElement('div');
   el.className = 'confirm-card tool-border-safe my-1';
   el.innerHTML = `
@@ -548,9 +568,9 @@ function handleStatus(msg) {
     // Active tab: full UI reflection
     btnThink.classList.toggle('btn-active-toggle', msg.thinkingMode);
     btnPlan.classList.toggle('btn-active-toggle', msg.planMode);
-    const runningAgents = Array.isArray(msg.agents) ? msg.agents.filter(a => a.status === 'running').length : 0;
-    const failedAgents = Array.isArray(msg.agents) ? msg.agents.filter(a => a.status === 'error').length : 0;
-    const agentStatus = (runningAgents ? ' · agents:' + runningAgents : '') + (failedAgents ? ' · agent-errors:' + failedAgents : '');
+    const runningAgents = Array.isArray(msg.agents) ? msg.agents.filter(a => a.status === 'running').length : 0;
+    const failedAgents = Array.isArray(msg.agents) ? msg.agents.filter(a => a.status === 'error').length : 0;
+    const agentStatus = (runningAgents ? ' · agents:' + runningAgents : '') + (failedAgents ? ' · agent-errors:' + failedAgents : '');
     statusSession.textContent = '📋 ' + (msg.sessionId?.slice(0, 8) || '—') + ' (' + msg.messageCount + ' msgs) · ' + (msg.permissionProfile || 'legacy') + (msg.networkPolicyEnabled ? ' · net:on' : '') + (msg.autoMode ? ' · auto:on' : '') + (msg.pendingHookTrustCount ? ' · hooks:' + msg.pendingHookTrustCount : '') + agentStatus;
     if (msg.tokenUsage) {
       const u = msg.tokenUsage;
@@ -573,16 +593,98 @@ function handleStatus(msg) {
     targetTab.isProcessing = processing;
     const title = msg.sessionTitle || msg.sessionId?.slice(0, 8) || 'New Session';
     document.title = `ai-cli — ${title}`;
+    latestStatus = msg;
+    renderDashboard();
   }
 
   renderTabBar();
   saveTabState();
 }
 
+
+function renderDashboard() {
+  if (!dashboardPanel) return;
+  const s = latestStatus || {};
+  const agents = Array.isArray(s.agents) ? s.agents : [];
+  const runningAgents = agents.filter(a => a.status === 'running');
+  const erroredAgents = agents.filter(a => a.status === 'error');
+  const pending = [...pendingApprovals.values()];
+  const tokens = s.tokenUsage || {};
+  const totalTokens = (tokens.inputTokens || 0) + (tokens.outputTokens || 0) + (tokens.cacheCreationTokens || 0) + (tokens.cacheReadTokens || 0);
+  const cost = typeof s.costUsd === 'number'
+    ? (s.costUsd === 0 ? '$0' : s.costUsd < 0.01 ? `$${s.costUsd.toFixed(4)}` : s.costUsd < 1 ? `$${s.costUsd.toFixed(3)}` : `$${s.costUsd.toFixed(2)}`)
+    : 'unknown';
+  const recentTests = lastToolResults.filter(r => r.toolName === 'run_tests').slice(-3).reverse();
+  const recentToolErrors = lastToolResults.filter(r => r.isError).slice(-3).reverse();
+
+  dashboardPanel.innerHTML = `
+    <section class="dashboard-section">
+      <div class="dashboard-section-title">Current Session</div>
+      ${dashRow('Session', s.sessionTitle || (s.sessionId ? s.sessionId.slice(0, 8) : '-'))}
+      ${dashRow('Provider', `${s.provider || '-'} / ${s.model || '-'}`)}
+      ${dashRow('Messages', String(s.messageCount ?? 0))}
+      ${dashRow('Mode', `${s.planMode ? 'plan' : 'execute'}${s.thinkingMode ? ' · thinking' : ''}${s.autoMode ? ' · auto' : ''}`)}
+    </section>
+    <section class="dashboard-section">
+      <div class="dashboard-section-title">Approvals <span class="confirm-queue-count">${pending.length}</span></div>
+      ${pending.length ? pending.map(renderDashboardApproval).join('') : '<div class="dashboard-empty">No pending approvals.</div>'}
+    </section>
+    <section class="dashboard-section">
+      <div class="dashboard-section-title">Sub-Agents</div>
+      ${dashRow('Running', String(runningAgents.length))}
+      ${dashRow('Errors', String(erroredAgents.length))}
+      ${agents.length ? agents.slice(0, 5).map(renderDashboardAgent).join('') : '<div class="dashboard-empty">No agent runs yet.</div>'}
+      <div class="dashboard-actions"><button class="btn btn-xs btn-ghost" data-dashboard-command="agent summary">summary</button><button class="btn btn-xs btn-ghost" data-dashboard-command="agent list">list</button></div>
+    </section>
+    <section class="dashboard-section">
+      <div class="dashboard-section-title">Permissions & Cost</div>
+      ${dashRow('Profile', s.permissionProfile || 'legacy')}
+      ${dashRow('Network', s.networkPolicyEnabled ? 'enabled' : 'off')}
+      ${dashRow('Hooks', String(s.pendingHookTrustCount || 0))}
+      ${dashRow('Tokens', totalTokens.toLocaleString())}
+      ${dashRow('Cost', cost)}
+    </section>
+    <section class="dashboard-section">
+      <div class="dashboard-section-title">Recent Tests / Errors</div>
+      ${recentTests.length ? recentTests.map(renderDashboardToolResult).join('') : '<div class="dashboard-empty">No recent run_tests result.</div>'}
+      ${recentToolErrors.length ? '<div class="dashboard-section-title mt-2">Tool Errors</div>' + recentToolErrors.map(renderDashboardToolResult).join('') : ''}
+    </section>
+  `;
+
+  dashboardPanel.querySelectorAll('[data-dashboard-command]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const parts = btn.dataset.dashboardCommand.split(/\s+/);
+      send({ type: 'command', name: parts[0], args: parts.slice(1) });
+    });
+  });
+}
+
+function dashRow(label, value) {
+  return `<div class="dashboard-row"><span class="label">${escapeHtml(label)}</span><span class="value" title="${escapeHtml(value)}">${escapeHtml(value)}</span></div>`;
+}
+
+function renderDashboardApproval(item) {
+  const label = item.kind === 'batch' ? `${item.files?.length || 0} file batch` : item.toolName;
+  return `<div class="dashboard-item running"><div class="font-semibold truncate">${escapeHtml(label || item.kind)}</div><div class="text-xs opacity-60 truncate">${escapeHtml(item.dangerLevel || item.kind)} · ${escapeHtml(item.requestId)}</div></div>`;
+}
+
+function renderDashboardAgent(agent) {
+  const cls = agent.status || 'ok';
+  const task = agent.task || '';
+  return `<div class="dashboard-item ${escapeHtml(cls)}"><div class="font-semibold truncate">${escapeHtml(agent.agentName || 'agent')} · ${escapeHtml(cls)}</div><div class="text-xs opacity-60 truncate" title="${escapeHtml(task)}">${escapeHtml(task || '(no task)')}</div>${agent.summary ? `<div class="text-xs opacity-80 truncate">${escapeHtml(agent.summary)}</div>` : ''}</div>`;
+}
+
+function renderDashboardToolResult(result) {
+  const cls = result.isError ? 'error' : 'ok';
+  const content = result.content || '';
+  return `<div class="dashboard-item ${cls}"><div class="font-semibold truncate">${escapeHtml(result.toolName || 'tool')} · ${result.isError ? 'error' : 'ok'}</div><div class="text-xs opacity-60 truncate" title="${escapeHtml(content)}">${escapeHtml(content.slice(0, 120))}</div></div>`;
+}
 // ── Response helpers ───────────────────────────────────────────────
 
 window.respondConfirm = function(requestId, approved) {
   send({ type: 'confirm_response', requestId, approved });
+  pendingApprovals.delete(requestId);
+  renderDashboard();
   const el = document.querySelector(`[data-request-id="${requestId}"]`);
   if (el) {
     el.className = `confirm-card ${approved ? 'tool-border-safe' : 'tool-border-destructive'} my-1 opacity-60`;
@@ -594,7 +696,7 @@ window.respondBatchConfirm = function(requestId, btn) {
   const dialog = btn.closest('.batch-confirm');
   const checks = dialog.querySelectorAll('input[type="checkbox"]');
   const selected = [];
-  checks.forEach(c => { if (c.checked) selected.push(parseInt(c.dataset.index)); });
+  checks.forEach(c => { if (c.checked) selected.push(parseInt(c.dataset.index, 10)); });
 
   if (selected.length === checks.length) {
     send({ type: 'batch_confirm_response', requestId, decision: 'all' });
@@ -603,12 +705,16 @@ window.respondBatchConfirm = function(requestId, btn) {
   } else {
     send({ type: 'batch_confirm_response', requestId, decision: selected });
   }
+  pendingApprovals.delete(requestId);
+  renderDashboard();
   dialog.className = 'confirm-card tool-border-safe my-1 opacity-60';
   dialog.innerHTML = `<span class="text-sm text-success">✓ Approved ${selected.length}/${checks.length} files</span>`;
 };
 
 window.respondBatchDeny = function(requestId, btn) {
   send({ type: 'batch_confirm_response', requestId, decision: 'none' });
+  pendingApprovals.delete(requestId);
+  renderDashboard();
   const dialog = btn.closest('.batch-confirm');
   dialog.className = 'confirm-card tool-border-destructive my-1 opacity-60';
   dialog.innerHTML = `<span class="text-sm text-error">✗ All rejected</span>`;
@@ -618,6 +724,8 @@ window.respondAskUser = function(requestId) {
   const input = document.getElementById(`ask-input-${requestId}`);
   const answer = input ? input.value : '';
   send({ type: 'ask_user_response', requestId, answer: answer || null });
+  pendingApprovals.delete(requestId);
+  renderDashboard();
   const dialog = input?.closest('.confirm-card');
   if (dialog) {
     dialog.className = 'confirm-card tool-border-safe my-1 opacity-60';
@@ -649,6 +757,16 @@ window.respondAutoPause = function(requestId, action) {
   }
 };
 
+
+window.copyConfirmDiff = function(el) {
+  const diff = el?.dataset?.diff || '';
+  if (!diff) return;
+  navigator.clipboard.writeText(diff).then(() => {
+    const old = el.textContent;
+    el.textContent = 'Copied';
+    setTimeout(() => { el.textContent = old || 'Copy'; }, 1200);
+  }).catch(() => addInfoMessage('Could not copy patch.'));
+};
 // DaisyUI light themes → highlight.js light stylesheet; others → dark
 const LIGHT_DAISYUI_THEMES = new Set(['light', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'garden', 'lofi', 'pastel', 'fantasy', 'wireframe', 'cmyk', 'autumn', 'acid', 'lemonade', 'winter', 'nord']);
 // v0.4.153: vendored locally (was cdn.jsdelivr.net) — see index.html.
@@ -1124,7 +1242,11 @@ function renderReplay(session, metaEl, usageEl, timelineEl) {
     `<span class="badge badge-sm badge-ghost">cache-read ${tu.cacheReadTokens || 0}</span>`;
 
   const messages = Array.isArray(session.messages) ? session.messages : [];
+  replayCurrentMessages = messages;
+  replayCurrentFilter = 'all';
   timelineEl.innerHTML = messages.map((m, i) => renderReplayStep(m, i)).join('');
+  wireReplayFilters();
+  applyReplayFilter();
 
   // Wire 🌿 fork-from-here buttons.
   timelineEl.querySelectorAll('.replay-fork-btn').forEach((btn) => {
@@ -1159,6 +1281,9 @@ function renderReplayStep(m, idx) {
   const role = m.role || 'user';
   const ts = m.timestamp ? new Date(m.timestamp).toLocaleTimeString() : '';
   const isError = !!m.isError;
+  const hasToolCalls = Array.isArray(m.toolCalls) && m.toolCalls.length > 0;
+  const isAgentRelated = (hasToolCalls && m.toolCalls.some(tc => (tc.name || tc.function?.name || '').includes('agent'))) || String(m.toolName || '').includes('agent');
+  const isCostRelated = !!(m.usage || m.tokenUsage) || /token|cost|usage/i.test(String(m.content || ''));
   const cls = 'replay-step role-' + role + (isError ? ' error' : '');
   const roleTag = role + (m.toolName ? ' · ' + m.toolName : '') + (isError ? ' · ERROR' : '');
 
@@ -1197,7 +1322,7 @@ function renderReplayStep(m, idx) {
     body += `<details class="replay-tool-block"><summary class="opacity-70">💭 reasoning</summary><pre>${escapeHtml(m.reasoningContent)}</pre></details>`;
   }
 
-  return `<div class="${cls}">
+  return `<div class="${cls}" data-has-tools="${hasToolCalls || role === 'tool' ? '1' : '0'}" data-is-agent="${isAgentRelated ? '1' : '0'}" data-is-error="${isError ? '1' : '0'}" data-is-cost="${isCostRelated ? '1' : '0'}">
     <div class="replay-step-header">
       <span class="opacity-50">#${idx + 1}</span>
       <span class="role-tag">${escapeHtml(roleTag)}</span>
@@ -1209,6 +1334,40 @@ function renderReplayStep(m, idx) {
   </div>`;
 }
 
+
+function wireReplayFilters() {
+  document.querySelectorAll('[data-replay-filter]').forEach(btn => {
+    const active = btn.dataset.replayFilter === replayCurrentFilter;
+    btn.classList.toggle('btn-primary', active);
+    btn.classList.toggle('btn-outline', active);
+    btn.classList.toggle('btn-ghost', !active);
+    if (btn.dataset.replayFilterWired === '1') return;
+    btn.dataset.replayFilterWired = '1';
+    btn.addEventListener('click', () => {
+      replayCurrentFilter = btn.dataset.replayFilter || 'all';
+      document.querySelectorAll('[data-replay-filter]').forEach(b => {
+        const active = b.dataset.replayFilter === replayCurrentFilter;
+        b.classList.toggle('btn-primary', active);
+        b.classList.toggle('btn-outline', active);
+        b.classList.toggle('btn-ghost', !active);
+      });
+      applyReplayFilter();
+    });
+  });
+}
+
+
+function applyReplayFilter() {
+  const steps = document.querySelectorAll('#replay-timeline .replay-step');
+  steps.forEach(step => {
+    let show = true;
+    if (replayCurrentFilter === 'tools') show = step.dataset.hasTools === '1';
+    else if (replayCurrentFilter === 'agents') show = step.dataset.isAgent === '1';
+    else if (replayCurrentFilter === 'errors') show = step.dataset.isError === '1';
+    else if (replayCurrentFilter === 'cost') show = step.dataset.isCost === '1';
+    step.classList.toggle('hidden-by-filter', !show);
+  });
+}
 // ── B2: Branch sidebar panel ─────────────────────────────
 let _cachedBranches = [];
 let _cachedActiveBranchId = 'main';
@@ -1574,11 +1733,16 @@ function switchSidebarTab(tabName) {
     fileTreeLoaded = true;
     initFileTree();
   }
+  if (tabName === 'dashboard') renderDashboard();
 }
 
 document.querySelectorAll('.sidebar-tab').forEach(btn => {
   btn.addEventListener('click', () => switchSidebarTab(btn.dataset.tab));
 });
+btnDashboardRefresh?.addEventListener('click', () => {
+  send({ type: 'command', name: 'status', args: [] });
+  renderDashboard();
+});
 
 // ── Tools list rendering ──────────────────────────────────────────────
 
@@ -2853,7 +3017,7 @@ function renderMemoryHits(msg) {
   const header = `
     <div class="flex items-center gap-1 text-xs pb-1 mb-1 border-b border-base-content/10">
       <span class="opacity-60 flex-1">${msg.hits.length} hit(s) for "${escapeHtml(msg.query)}"</span>
-      <button class="btn btn-xs btn-primary btn-outline" id="btn-memory-inject-top3" title="Inject top 3 hits into chat input as a quoted context block">➕ Inject top 3</button>
+      <button class="btn btn-xs btn-primary btn-outline" id="btn-memory-inject-top3" title="Manually approve injecting top 3 hits into chat input">Approve top 3</button>
     </div>
   `;
 
@@ -2865,13 +3029,18 @@ function renderMemoryHits(msg) {
     return `
       <div class="memory-hit card bg-base-100 border border-base-content/10 p-2 hover:border-primary/40"
            data-hit-id="${escapeHtml(h.id)}">
+        <div class="memory-meta-badges">
+          <span class="badge badge-xs badge-ghost">scope: chat</span>
+          <span class="badge badge-xs badge-ghost">source: ${escapeHtml(h.sessionId.slice(0, 8))}</span>
+          <span class="badge badge-xs badge-ghost">manual inject</span>
+        </div>
         <div class="flex items-center gap-1 text-xs opacity-70 mb-1">
           <span class="font-semibold truncate flex-1">${escapeHtml(title)}</span>
           <span class="badge badge-xs">${score}</span>
         </div>
         <div class="text-xs opacity-50 mb-1 flex items-center gap-2">
           <span class="flex-1">${ts} · session ${escapeHtml(h.sessionId.slice(0, 8))}</span>
-          <button class="btn btn-xs btn-ghost memory-hit-inject" title="Inject this hit into chat input">➕</button>
+          <button class="btn btn-xs btn-ghost memory-hit-inject" title="Manually approve injecting this hit into chat input">Approve inject</button>
           <button class="btn btn-xs btn-ghost memory-hit-load" title="Load this session in current tab">↗</button>
         </div>
         <div class="text-xs whitespace-pre-wrap leading-snug opacity-90" style="max-height: 8em; overflow: hidden;">${escapeHtml(preview)}</div>

package/dist/web/client/index.html

@@ -108,15 +108,26 @@
       <aside id="sidebar" class="sidebar bg-base-200 border-r border-base-content/10 flex flex-col flex-shrink-0 overflow-hidden">
         <!-- Sidebar tabs -->
         <div class="flex border-b border-base-content/10 flex-shrink-0">
-          <button class="sidebar-tab active flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="sessions">📋 Sessions</button>
+          <button class="sidebar-tab active flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="dashboard" title="Agent control dashboard">⌘ Dash</button>
+          <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="sessions">📋 Sessions</button>
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="branches" title="Conversation branches (B2)">🌿 Branches</button>
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="tools">🔧 Tools</button>
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="files">📁 Files</button>
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="memory" title="Chat memory semantic recall (B4, v0.4.90)">🧠 Memory</button>
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="hub" title="Multi-agent brainstorm room (P4)">🏛 Hub</button>
         </div>
+        <!-- Dashboard tab (Phase 6) -->
+        <div id="tab-dashboard" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden">
+          <div class="p-2 border-b border-base-content/10 flex items-center gap-1">
+            <span class="text-xs font-semibold flex-1">Agent Console</span>
+            <button id="btn-dashboard-refresh" class="btn btn-xs btn-ghost" title="Refresh dashboard">↻</button>
+          </div>
+          <div id="dashboard-panel" class="dashboard-panel flex-1 overflow-y-auto p-2 text-sm">
+            <div class="text-xs opacity-40 text-center py-4">Waiting for status…</div>
+          </div>
+        </div>
         <!-- Sessions tab -->
-        <div id="tab-sessions" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden">
+        <div id="tab-sessions" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden hidden">
           <div class="p-2 border-b border-base-content/10 flex items-center justify-between gap-1">
             <input id="session-search" type="text" class="input input-xs input-bordered flex-1 min-w-0" placeholder="Search...">
             <button id="btn-batch-select" class="btn btn-xs btn-ghost flex-shrink-0" title="Select multiple" data-action="toggle-batch-select">☑</button>
@@ -332,7 +343,14 @@
         <form method="dialog"><button class="btn btn-sm btn-ghost">✕</button></form>
       </div>
       <div id="replay-meta" class="text-xs opacity-70 mb-2"></div>
-      <div id="replay-usage" class="text-xs mb-3"></div>
+      <div id="replay-usage" class="text-xs mb-2"></div>
+      <div id="replay-filters" class="replay-filters flex flex-wrap gap-1 mb-3">
+        <button class="btn btn-xs btn-primary btn-outline" data-replay-filter="all">All</button>
+        <button class="btn btn-xs btn-ghost" data-replay-filter="tools">Tools</button>
+        <button class="btn btn-xs btn-ghost" data-replay-filter="agents">Agents</button>
+        <button class="btn btn-xs btn-ghost" data-replay-filter="errors">Errors</button>
+        <button class="btn btn-xs btn-ghost" data-replay-filter="cost">Cost</button>
+      </div>
       <div id="replay-timeline" class="flex flex-col gap-2 max-h-[70vh] overflow-y-auto pr-2"></div>
     </div>
     <form method="dialog" class="modal-backdrop"><button>close</button></form>

package/dist/web/client/style.css

@@ -989,3 +989,65 @@ button, a, .session-item, .file-tree-row, .template-item, .tool-item, .mcp-serve
   font-size: 0.72rem;
   white-space: pre;
 }
+
+/* ── Phase 6 Dashboard ─────────────────────────────── */
+.dashboard-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.dashboard-section {
+  border: 1px solid oklch(var(--bc) / 0.1);
+  border-radius: 0.5rem;
+  background: oklch(var(--b1));
+  padding: 0.55rem;
+}
+.dashboard-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.65;
+  margin-bottom: 0.4rem;
+}
+.dashboard-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  padding: 0.18rem 0;
+  font-size: 0.78rem;
+}
+.dashboard-row .label { opacity: 0.55; min-width: 4.2rem; }
+.dashboard-row .value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dashboard-item {
+  border-left: 2px solid oklch(var(--bc) / 0.15);
+  padding: 0.35rem 0.45rem;
+  margin-top: 0.3rem;
+  background: oklch(var(--b2));
+  border-radius: 0.35rem;
+}
+.dashboard-item.running { border-left-color: oklch(var(--wa)); }
+.dashboard-item.ok { border-left-color: oklch(var(--su)); }
+.dashboard-item.error { border-left-color: oklch(var(--er)); }
+.dashboard-item.stopped { border-left-color: oklch(var(--bc) / 0.35); }
+.dashboard-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
+.dashboard-empty { font-size: 0.75rem; opacity: 0.45; padding: 0.35rem 0; }
+.confirm-queue-count { font-weight: 700; color: oklch(var(--wa)); }
+.diff-file-details {
+  border: 1px solid oklch(var(--bc) / 0.1);
+  border-radius: 0.4rem;
+  margin: 0.35rem 0;
+  overflow: hidden;
+}
+.diff-file-details summary {
+  padding: 0.35rem 0.45rem;
+  cursor: pointer;
+  background: oklch(var(--b3));
+}
+.diff-file-details .confirm-diff { margin: 0; border-radius: 0; max-height: 180px; }
+.memory-meta-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.35rem; }
+.replay-step.hidden-by-filter { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jinzd-ai-cli",
-  "version": "0.4.214",
+  "version": "0.4.216",
   "description": "Cross-platform REPL-style AI CLI with multi-provider support",
   "type": "module",
   "main": "./dist/index.js",