fix: use actual API token count in diagnostics; add sortable columns

- Use actualTokens (real LLM API count) when available, falling back to
  estimated tokens — fixes vastly under-reported counts in the table
- Make Size, Tokens, Interactions, and Context Refs columns sortable
  (click to sort desc/asc, indicator arrow shows active sort)

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

Author: rajbos

vscode-extension/src/extension.ts

@@ -3138,13 +3138,14 @@ class CopilotTokenTracker implements vscode.Disposable {
 			lastInteraction = stat.mtime.toISOString();
 		}
 
-		// Reconstruct SessionFileDetails from cache
+		// Reconstruct SessionFileDetails from cache.
+		// Prefer actualTokens (real API count) when available; fall back to estimated tokens.
 		const details: SessionFileDetails = {
 			file: sessionFile,
 			size: cached.size || stat.size,
 			modified: stat.mtime.toISOString(),
 			interactions: cached.interactions,
-			tokens: cached.tokens || 0,
+			tokens: cached.actualTokens || cached.tokens || 0,
 			contextReferences: cached.usageAnalysis.contextReferences,
 			firstInteraction: cached.firstInteraction || null,
 			lastInteraction: lastInteraction,
@@ -3171,8 +3172,9 @@ class CopilotTokenTracker implements vscode.Disposable {
 		// Get existing cache entry if available
 		const existingCache = this.getCachedSessionData(sessionFile);
 
-		// Enrich details with token count from existing cache (populated by main stats calculation)
-		details.tokens = existingCache?.tokens || 0;
+		// Enrich details with token count from existing cache (populated by main stats calculation).
+		// Prefer actualTokens (real API count) when available; fall back to estimated tokens.
+		details.tokens = existingCache?.actualTokens || existingCache?.tokens || 0;
 
 		// Create or update cache entry
 		const cacheEntry: SessionFileCache = {

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

@@ -103,7 +103,7 @@ const vscode = acquireVsCodeApi<DiagnosticsViewState>();
 const initialData = window.__INITIAL_DIAGNOSTICS__;
 
 // Sorting and filtering state
-let currentSortColumn: "lastInteraction" = "lastInteraction";
+let currentSortColumn: "lastInteraction" | "size" | "tokens" | "interactions" | "contextRefs" = "lastInteraction";
 let currentSortDirection: "asc" | "desc" = "desc";
 let currentEditorFilter: string | null = null; // null = show all
 let currentContextRefFilter: keyof ContextReferenceUsage | null = null; // null = show all
@@ -418,28 +418,38 @@ function getEditorIcon(editor: string): string {
 
 function sortSessionFiles(files: SessionFileDetails[]): SessionFileDetails[] {
   return [...files].sort((a, b) => {
-    const aVal = a.lastInteraction;
-    const bVal = b.lastInteraction;
-
-    // Handle null values - push them to the end
-    if (!aVal && !bVal) {
+    let aNum: number;
+    let bNum: number;
+
+    if (currentSortColumn === "lastInteraction") {
+      const aVal = a.lastInteraction;
+      const bVal = b.lastInteraction;
+      if (!aVal && !bVal) { return 0; }
+      if (!aVal) { return 1; }
+      if (!bVal) { return -1; }
+      aNum = new Date(aVal).getTime();
+      bNum = new Date(bVal).getTime();
+    } else if (currentSortColumn === "size") {
+      aNum = a.size || 0;
+      bNum = b.size || 0;
+    } else if (currentSortColumn === "tokens") {
+      aNum = a.tokens || 0;
+      bNum = b.tokens || 0;
+    } else if (currentSortColumn === "interactions") {
+      aNum = a.interactions || 0;
+      bNum = b.interactions || 0;
+    } else if (currentSortColumn === "contextRefs") {
+      aNum = getTotalContextRefs(a.contextReferences);
+      bNum = getTotalContextRefs(b.contextReferences);
+    } else {
       return 0;
     }
-    if (!aVal) {
-      return 1;
-    }
-    if (!bVal) {
-      return -1;
-    }
-
-    const aTime = new Date(aVal).getTime();
-    const bTime = new Date(bVal).getTime();
 
-    return currentSortDirection === "desc" ? bTime - aTime : aTime - bTime;
+    return currentSortDirection === "desc" ? bNum - aNum : aNum - bNum;
   });
 }
 
-function getSortIndicator(column: "lastInteraction"): string {
+function getSortIndicator(column: typeof currentSortColumn): string {
   if (currentSortColumn !== column) {
     return "";
   }
@@ -634,10 +644,10 @@ function renderSessionTable(
 						<th>Editor</th>
 						<th>Title</th>
 						<th>Repository</th>
-						<th>Size</th>
-						<th>Tokens</th>
-						<th>Interactions</th>
-						<th>Context Refs</th>
+						<th class="sortable" data-sort="size">Size${getSortIndicator("size")}</th>
+						<th class="sortable" data-sort="tokens">Tokens${getSortIndicator("tokens")}</th>
+						<th class="sortable" data-sort="interactions">Interactions${getSortIndicator("interactions")}</th>
+						<th class="sortable" data-sort="contextRefs">Context Refs${getSortIndicator("contextRefs")}</th>
 						<th class="sortable" data-sort="lastInteraction">Last Interaction${getSortIndicator("lastInteraction")}</th>
 						<th>Actions</th>
 					</tr>
@@ -1575,7 +1585,7 @@ function renderLayout(data: DiagnosticsData): void {
       header.addEventListener("click", () => {
         const sortColumn = (header as HTMLElement).getAttribute(
           "data-sort",
-        ) as "lastInteraction";
+        ) as typeof currentSortColumn;
         if (sortColumn) {
           // Toggle direction if same column, otherwise default to desc
           if (currentSortColumn === sortColumn) {