Merge pull request #562 from rajbos/fix/auto-label-dark-theme-contrast

fix: use badge colors for "auto" label to improve dark theme readability

Author: rajbos

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

@@ -260,7 +260,7 @@ function renderToolsTable(byTool: { [key: string]: number }, limit = 10, nameRes
 		const friendly = escapeHtml(nameResolver(tool));
 		const idEscaped = escapeHtml(tool);
 		const autoBadge = AUTOMATIC_TOOL_SET_WV.has(tool)
-			? `<span title="Automatic tool — Copilot uses this internally and it does not count toward fluency scoring" style="margin-left:6px; padding:1px 5px; font-size:10px; border-radius:3px; background:var(--bg-secondary); color:var(--text-muted); border:1px solid var(--border-subtle); vertical-align:middle;">auto</span>`
+			? `<span class="auto-badge" title="Automatic tool — Copilot uses this internally and it does not count toward fluency scoring">auto</span>`
 			: '';
 		return `
 		    <tr>

vscode-extension/src/webview/usage/styles.css

@@ -354,4 +354,17 @@ background: var(--list-hover-bg);
 color: var(--text-primary);
 border-bottom-color: var(--link-color);
 background: var(--bg-tertiary);
+}
+
+.auto-badge {
+	display: inline-block;
+	margin-left: 6px;
+	padding: 1px 5px;
+	font-size: 10px;
+	border-radius: 3px;
+	border: 1px solid var(--text-primary);
+	color: var(--text-primary);
+	background: transparent;
+	vertical-align: middle;
+	line-height: 1.4;
 }