feat: show actual tokens in log viewer header for CLI sessions

Add session-level actual token count to SessionLogData so the log
viewer can display it in the header when per-turn actual data is
unavailable (e.g. Copilot CLI sessions where actual totals come from
session.shutdown rather than individual turn events).

- types.ts: add actualTokens? to SessionLogData
- extension.ts: populate actualTokens from cache in getSessionLogData
- logviewer/main.ts: add actualTokens? to local type; show '✅ Actual
  Tokens' card when hasSessionActualOnly (CLI sessions); also rename
  per-turn actual card label to '✅ Actual Tokens' for consistency

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: rajbos

vscode-extension/src/extension.ts

@@ -4319,6 +4319,8 @@ class CopilotTokenTracker implements vscode.Disposable {
 			this.warn(`Error loading usage analysis for ${sessionFile}: ${usageError}`);
 		}
 
+		const sessionCache = this.getCachedSessionData(sessionFile);
+
 		return {
 			file: details.file,
 			title: details.title || null,
@@ -4331,7 +4333,8 @@ class CopilotTokenTracker implements vscode.Disposable {
 			firstInteraction: details.firstInteraction,
 			lastInteraction: details.lastInteraction,
 			turns,
-			usageAnalysis
+			usageAnalysis,
+			actualTokens: sessionCache?.actualTokens || 0
 		};
 	}
 

vscode-extension/src/types.ts

@@ -372,6 +372,8 @@ export interface SessionLogData {
   lastInteraction: string | null;
   turns: ChatTurn[];
   usageAnalysis?: SessionUsageAnalysis;
+  /** Session-level actual token count from LLM API (e.g. session.shutdown in CLI format). 0 when unavailable. */
+  actualTokens?: number;
 }
 
 // Local summary type for customization files (mirrors webview/shared/contextRefUtils.ts)

vscode-extension/src/webview/logviewer/main.ts

@@ -1,4 +1,4 @@
-// Log Viewer webview - displays session file details and chat turns
+// Log Viewer webview - displays session file details and chat turns
 import { ContextReferenceUsage, getTotalContextRefs, getImplicitContextRefs, getExplicitContextRefs, getContextRefsSummary } from '../shared/contextRefUtils';
 import { formatCompact, setCompactNumbers } from '../shared/formatUtils';
 // CSS imported as text via esbuild
@@ -60,6 +60,8 @@ type SessionLogData = {
 	lastInteraction: string | null;
 	turns: ChatTurn[];
 	usageAnalysis?: SessionUsageAnalysis;
+	/** Session-level actual token count from LLM API (e.g. CLI session.shutdown). 0 when unavailable. */
+	actualTokens?: number;
 	compactNumbers?: boolean;
 };
 
@@ -561,6 +563,10 @@ function renderLayout(data: SessionLogData): void {
 	const actualPromptTotal = turnsWithActual.reduce((s, t) => s + (t.actualUsage?.promptTokens || 0), 0);
 	const actualCompletionTotal = turnsWithActual.reduce((s, t) => s + (t.actualUsage?.completionTokens || 0), 0);
 	const actualTotal = actualPromptTotal + actualCompletionTotal;
+
+	// Session-level actual tokens (from session.shutdown in CLI sessions) when no per-turn data
+	const sessionActualTokens = data.actualTokens || 0;
+	const hasSessionActualOnly = !hasAnyActualUsage && sessionActualTokens > 0;
 
 	// Aggregate prompt breakdown across all turns
 	const aggregatedBreakdown: { [key: string]: { category: string; label: string; totalTokens: number; totalPct: number; count: number } } = {};
@@ -624,10 +630,16 @@ function renderLayout(data: SessionLogData): void {
 				</div>
 				${hasAnyActualUsage ? `
 				<div class="summary-card actual-usage-card">
-					<div class="summary-label">📊 Actual Tokens</div>
+					<div class="summary-label">✅ Actual Tokens</div>
 					<div class="summary-value">${formatCompact(actualTotal)}</div>
 					<div class="summary-sub">↑${formatCompact(actualPromptTotal)} prompt, ↓${formatCompact(actualCompletionTotal)} completion</div>
 				</div>
+				` : hasSessionActualOnly ? `
+				<div class="summary-card actual-usage-card">
+					<div class="summary-label">✅ Actual Tokens</div>
+					<div class="summary-value">${formatCompact(sessionActualTokens)}</div>
+					<div class="summary-sub">Total from session shutdown event</div>
+				</div>
 				` : ''}
 				${totalThinkingTokens > 0 ? `<div class="summary-card">
 					<div class="summary-label">🧠 Thinking Tokens</div>