feat(KB-232): swap pace indicator colors and icons in UsageIndicator

- Swap CSS color assignments for slow/fast pace indicators in styles.css
- Swap CheckCircle2 and AlertCircle icons in UsageIndicator component
- Add changeset for the pace indicator color/icon swap
- Remove 2 lines from dashboard README

.changeset/swap-pace-indicator-colors.md

@@ -0,0 +1,9 @@
+---
+"@dustinbyrne/kb": patch
+---
+
+Swap pace indicator colors and icons for over/under pace states
+
+- "Ahead" (over pace) now shows AlertTriangle icon in red/error color
+- "Behind" (under pace) now shows TrendingUp icon in green/success color
+- Fixes visual semantics to correctly convey that under pace is good, over pace is a concern

packages/dashboard/app/components/UsageIndicator.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { X, RefreshCw, Activity, TrendingUp, CheckCircle, Info } from "lucide-react";
+import { X, RefreshCw, Activity, TrendingUp, CheckCircle, AlertTriangle } from "lucide-react";
 import type { ProviderUsage, UsageWindow } from "../api";
 import { useUsageData } from "../hooks/useUsageData";
 import { ProviderIcon } from "./ProviderIcon";
@@ -90,13 +90,13 @@ function UsageWindowRow({ window, viewMode }: UsageWindowRowProps) {
         <div className="usage-pace-row" data-testid="pace-row">
           {isAhead && (
             <>
-              <TrendingUp size={14} className="pace-icon pace-ahead" />
+              <AlertTriangle size={14} className="pace-icon pace-ahead" />
               <span className="pace-text pace-ahead">{pace.message}</span>
             </>
           )}
           {isBehind && (
             <>
-              <Info size={14} className="pace-icon pace-behind" />
+              <TrendingUp size={14} className="pace-icon pace-behind" />
               <span className="pace-text pace-behind">{pace.message}</span>
             </>
           )}

packages/dashboard/app/styles.css

@@ -7643,9 +7643,9 @@ html .column.drag-over * {
   font-weight: 500;
 }
 
-/* ahead = consuming faster than expected (now shown in info color) */
+/* ahead = over pace, consuming faster than expected (warning - red) */
 .pace-ahead {
-  color: #3b82f6; /* blue - was var(--color-error) */
+  color: var(--color-error);
 }
 
 /* on-track = good/expected usage (unchanged) */
@@ -7653,9 +7653,9 @@ html .column.drag-over * {
   color: var(--color-success);
 }
 
-/* behind = consuming slower than expected (now shown in warning color) */
+/* behind = under pace, consuming slower than expected (positive - green) */
 .pace-behind {
-  color: var(--color-error); /* red - was #3b82f6 */
+  color: var(--color-success);
 }
 
 /* Empty state */