fix(ui/usage): replace undefined --text-muted CSS variable with --muted

The usage tab styles referenced var(--text-muted) which is not defined
anywhere in the CSS. This resolved to transparent/initial, making text
invisible in dark mode. The correct variable is var(--muted) (#71717a),
which is used throughout the rest of the UI (85+ occurrences).

47 occurrences fixed across 3 style files.

ui/src/ui/views/usage-styles/usageStyles-part1.ts

@@ -10,7 +10,7 @@ export const usageStylesPart1 = `
   }
   .usage-page-subtitle {
     font-size: 13px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin: 0 0 12px;
   }
   /* ===== FILTERS & HEADER ===== */
@@ -257,7 +257,7 @@ export const usageStylesPart1 = `
   }
   .usage-filter-badge {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-filter-popover {
     position: absolute;
@@ -296,7 +296,7 @@ export const usageStylesPart1 = `
   }
   .usage-query-hint {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-query-chips {
     display: flex;
@@ -317,7 +317,7 @@ export const usageStylesPart1 = `
   .usage-query-chip button {
     background: none;
     border: none;
-    color: var(--text-muted);
+    color: var(--muted);
     cursor: pointer;
     padding: 0;
     line-height: 1;
@@ -378,7 +378,7 @@ export const usageStylesPart1 = `
     border: 1px solid var(--border);
     background: transparent;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-metric-badge strong {
     font-size: 12px;
@@ -498,7 +498,7 @@ export const usageStylesPart1 = `
   }
   .usage-mosaic-sub {
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-mosaic-grid {
     display: grid;
@@ -569,7 +569,7 @@ export const usageStylesPart1 = `
     gap: 6px;
     margin-top: 8px;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-hour-legend {
     display: flex;
@@ -577,7 +577,7 @@ export const usageStylesPart1 = `
     align-items: center;
     margin-top: 10px;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-hour-legend span {
     display: inline-block;
@@ -592,7 +592,7 @@ export const usageStylesPart1 = `
     grid-template-columns: repeat(7, minmax(10px, 1fr));
     gap: 6px;
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-bottom: 6px;
   }
   .usage-calendar {
@@ -612,7 +612,7 @@ export const usageStylesPart1 = `
   }
   .usage-summary-title {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-bottom: 6px;
     display: inline-flex;
     align-items: center;
@@ -629,7 +629,7 @@ export const usageStylesPart1 = `
     border: 1px solid var(--border);
     background: var(--bg);
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     cursor: help;
   }
   .usage-summary-value {
@@ -648,7 +648,7 @@ export const usageStylesPart1 = `
   }
   .usage-summary-hint {
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     cursor: help;
     border: 1px solid var(--border);
     border-radius: 999px;
@@ -661,7 +661,7 @@ export const usageStylesPart1 = `
   }
   .usage-summary-sub {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-top: 4px;
   }
   .usage-list {
@@ -686,7 +686,7 @@ export const usageStylesPart1 = `
   }
   .usage-list-sub {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-list-item.button {
     border: none;

ui/src/ui/views/usage-styles/usageStyles-part2.ts

@@ -23,7 +23,7 @@ export const usageStylesPart2 = `
   .usage-error-sub {
     grid-column: 1 / -1;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .usage-badges {
     display: flex;
@@ -54,7 +54,7 @@ export const usageStylesPart2 = `
     font-size: 12px;
   }
   .usage-meta-item span {
-    color: var(--text-muted);
+    color: var(--muted);
     font-size: 11px;
   }
   .usage-insights-grid {
@@ -76,7 +76,7 @@ export const usageStylesPart2 = `
   }
   .usage-insight-subtitle {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-top: 6px;
   }
   /* ===== CHART TOGGLE ===== */
@@ -92,7 +92,7 @@ export const usageStylesPart2 = `
     font-size: 13px;
     background: transparent;
     border: none;
-    color: var(--text-muted);
+    color: var(--muted);
     cursor: pointer;
     transition: all 0.15s;
   }
@@ -170,7 +170,7 @@ export const usageStylesPart2 = `
     position: absolute;
     bottom: -28px;
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     white-space: nowrap;
     text-align: center;
     transform: rotate(-35deg);
@@ -182,7 +182,7 @@ export const usageStylesPart2 = `
     left: 50%;
     transform: translateX(-50%);
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     white-space: nowrap;
   }
   .daily-bar-tooltip {
@@ -253,7 +253,7 @@ export const usageStylesPart2 = `
   .cost-breakdown-total {
     margin-top: 10px;
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .legend-item {
     display: flex;
@@ -296,7 +296,7 @@ export const usageStylesPart2 = `
   .cost-breakdown-note {
     margin-top: 10px;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     line-height: 1.4;
   }
 
@@ -344,7 +344,7 @@ export const usageStylesPart2 = `
   }
   .session-bar-meta {
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     font-weight: 400;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -369,7 +369,7 @@ export const usageStylesPart2 = `
     text-align: right;
     font-size: 12px;
     font-family: var(--font-mono);
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .session-bar-actions {
     display: inline-flex;
@@ -385,7 +385,7 @@ export const usageStylesPart2 = `
     background: var(--bg-secondary);
     font-size: 11px;
     font-weight: 600;
-    color: var(--text-muted);
+    color: var(--muted);
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s, color 0.15s;
   }
@@ -428,7 +428,7 @@ export const usageStylesPart2 = `
   }
   .timeseries-svg .axis-label {
     font-size: 10px;
-    fill: var(--text-muted);
+    fill: var(--muted);
   }
   .timeseries-svg .ts-area {
     fill: #ff4d4d;
@@ -460,7 +460,7 @@ export const usageStylesPart2 = `
   .timeseries-summary {
     margin-top: 12px;
     font-size: 13px;
-    color: var(--text-muted);
+    color: var(--muted);
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
@@ -468,7 +468,7 @@ export const usageStylesPart2 = `
   .timeseries-loading {
     padding: 24px;
     text-align: center;
-    color: var(--text-muted);
+    color: var(--muted);
   }
 
   /* ===== SESSION LOGS ===== */
@@ -491,7 +491,7 @@ export const usageStylesPart2 = `
   .session-logs-loading {
     padding: 24px;
     text-align: center;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .session-logs-list {
     max-height: 400px;
@@ -519,7 +519,7 @@ export const usageStylesPart2 = `
     gap: 8px;
     align-items: center;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     flex-wrap: wrap;
   }
   .session-log-role {
@@ -536,7 +536,7 @@ export const usageStylesPart2 = `
     color: var(--accent);
   }
   .session-log-entry.assistant .session-log-role {
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .session-log-content {
     font-size: 13px;
@@ -567,7 +567,7 @@ export const usageStylesPart2 = `
   }
   .context-weight-desc {
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin: 0 0 12px 0;
   }
   .context-stacked-bar {
@@ -603,7 +603,7 @@ export const usageStylesPart2 = `
     margin-top: 10px;
     font-size: 12px;
     font-weight: 600;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .context-details {
     margin-top: 12px;
@@ -632,7 +632,7 @@ export const usageStylesPart2 = `
     padding: 8px 14px;
     font-size: 11px;
     text-transform: uppercase;
-    color: var(--text-muted);
+    color: var(--muted);
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border);
   }
@@ -651,7 +651,7 @@ export const usageStylesPart2 = `
     color: var(--text);
   }
   .context-list-item .muted {
-    color: var(--text-muted);
+    color: var(--muted);
     font-family: var(--font-mono);
   }
 
@@ -662,7 +662,7 @@ export const usageStylesPart2 = `
     background: var(--bg-secondary);
     border-radius: 8px;
     font-size: 13px;
-    color: var(--text-muted);
+    color: var(--muted);
     line-height: 1.5;
   }
 

ui/src/ui/views/usage-styles/usageStyles-part3.ts

@@ -49,7 +49,7 @@ export const usageStylesPart3 = `
   }
   .sessions-card-count {
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .sessions-card-meta {
     display: flex;
@@ -58,7 +58,7 @@ export const usageStylesPart3 = `
     gap: 12px;
     margin: 8px 0 10px;
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .sessions-card-stats {
     display: inline-flex;
@@ -69,7 +69,7 @@ export const usageStylesPart3 = `
     align-items: center;
     gap: 6px;
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .sessions-sort select {
     padding: 4px 8px;
@@ -95,7 +95,7 @@ export const usageStylesPart3 = `
   }
   .sessions-card-hint {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-bottom: 8px;
   }
   .sessions-card .session-bars {
@@ -162,7 +162,7 @@ export const usageStylesPart3 = `
   }
   .session-detail-empty-desc {
     font-size: 13px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-bottom: 16px;
     line-height: 1.5;
   }
@@ -177,7 +177,7 @@ export const usageStylesPart3 = `
     align-items: center;
     gap: 6px;
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .session-detail-empty-feature .icon {
     font-size: 16px;
@@ -232,7 +232,7 @@ export const usageStylesPart3 = `
     display: flex;
     gap: 10px;
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--muted);
   }
   .session-detail-stats strong {
     color: var(--text);
@@ -255,7 +255,7 @@ export const usageStylesPart3 = `
   }
   .session-summary-title {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-bottom: 4px;
   }
   .session-summary-value {
@@ -264,7 +264,7 @@ export const usageStylesPart3 = `
   }
   .session-summary-meta {
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-top: 4px;
   }
   .session-detail-row {
@@ -329,7 +329,7 @@ export const usageStylesPart3 = `
   }
   .context-breakdown-more {
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--muted);
     margin-top: 4px;
   }
   .context-breakdown-header {
@@ -341,7 +341,7 @@ export const usageStylesPart3 = `
   .context-expand-btn {
     border: 1px solid var(--border);
     background: var(--bg-secondary);
-    color: var(--text-muted);
+    color: var(--muted);
     font-size: 11px;
     padding: 4px 8px;
     border-radius: 999px;