refactor: migrate CEODashboard, ViewTabs, HallOfFame to Design System V2 tokens

- bg-black → bg-base, bg-zinc-900 → bg-surface-1
- border-zinc-800 → border-border-default
- hover:bg-zinc-800 → hover:bg-surface-2
- divide-zinc-800 → divide-border-default
- bg-zinc-800 → bg-surface-4
- ViewTabs: bg-zinc-950 → bg-base, text-zinc-500 → text-text-tertiary

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: sonpiaz

app/agents/page.tsx

@@ -13,8 +13,8 @@ import { HallOfFame } from "@/components/evox/HallOfFame";
 
 export default function HallOfFamePage() {
   return (
-    <div className="min-h-screen bg-black text-white">
-      <header className="flex items-center gap-3 px-4 sm:px-6 py-4 border-b border-zinc-800/60">
+    <div className="min-h-screen bg-base text-white">
+      <header className="flex items-center gap-3 px-4 sm:px-6 py-4 border-b border-border-default">
         <Link href="/?view=team" className="text-zinc-600 hover:text-zinc-400 text-sm transition-colors">
           &larr; Dashboard
         </Link>

components/evox/CEODashboard.tsx

@@ -118,9 +118,9 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
   const isLoading = !dataLoaded;
 
   return (
-    <div className="min-h-screen bg-black text-white">
+    <div className="min-h-screen bg-base text-white">
       {/* ─── Header ─── */}
-      <header className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-zinc-800/60">
+      <header className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-border-default">
         <h1 className="text-lg font-bold tracking-tight">
           EVOX
         </h1>
@@ -144,7 +144,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
         {/* ─── Metric Cards ─── */}
         <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
           {/* Velocity */}
-          <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
+          <div className="bg-surface-1 border border-border-default rounded-xl p-4">
             <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">
               Velocity
             </div>
@@ -169,7 +169,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
           </div>
 
           {/* Commits */}
-          <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
+          <div className="bg-surface-1 border border-border-default rounded-xl p-4">
             <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">
               Commits
             </div>
@@ -180,7 +180,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
           </div>
 
           {/* Team */}
-          <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
+          <div className="bg-surface-1 border border-border-default rounded-xl p-4">
             <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">
               Team
             </div>
@@ -191,7 +191,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
           </div>
 
           {/* Today */}
-          <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
+          <div className="bg-surface-1 border border-border-default rounded-xl p-4">
             <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">
               Today
             </div>
@@ -207,7 +207,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
           </div>
 
           {/* Success Rate (merged from Health) */}
-          <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
+          <div className="bg-surface-1 border border-border-default rounded-xl p-4">
             <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">
               Success Rate
             </div>
@@ -245,7 +245,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
           </div>
 
           {/* Errors (merged from Health) */}
-          <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
+          <div className="bg-surface-1 border border-border-default rounded-xl p-4">
             <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">
               Errors
             </div>
@@ -266,7 +266,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
                       key={i}
                       className={cn(
                         "flex-1 rounded-sm min-h-[2px]",
-                        d.value > 0 ? "bg-red-500/60" : "bg-zinc-800"
+                        d.value > 0 ? "bg-red-500/60" : "bg-surface-4"
                       )}
                       style={{ height: `${(d.value / max) * 100}%`, minHeight: d.value > 0 ? "4px" : "2px" }}
                       title={`${d.label}: ${d.value}`}
@@ -297,7 +297,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
             <Link
               key={agent.name}
               href={`/agents/${agent.name.toLowerCase()}`}
-              className="flex items-center gap-1.5 px-2.5 py-1.5 shrink-0 hover:bg-zinc-800/30 rounded-lg transition-colors"
+              className="flex items-center gap-1.5 px-2.5 py-1.5 shrink-0 hover:bg-surface-2 rounded-lg transition-colors"
             >
               <span className="text-xs font-medium text-zinc-300">
                 {agent.name}
@@ -309,13 +309,13 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
         {/* ─── Activity + Commits (2-col desktop) ─── */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {/* Live Activity */}
-          <div className="bg-zinc-900/40 border border-zinc-800/60 rounded-xl overflow-hidden">
-            <div className="px-4 py-2.5 border-b border-zinc-800/40">
+          <div className="bg-surface-1 border border-border-default rounded-xl overflow-hidden">
+            <div className="px-4 py-2.5 border-b border-border-default">
               <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">
                 Live Activity
               </span>
             </div>
-            <div className="divide-y divide-zinc-800/30">
+            <div className="divide-y divide-border-default">
               {liveFeed && liveFeed.length > 0 ? (
                 liveFeed.map((item) => (
                   <div key={item.id} className="px-4 py-2.5 flex items-start gap-2.5">
@@ -342,13 +342,13 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
           </div>
 
           {/* Recent Commits */}
-          <div className="bg-zinc-900/40 border border-zinc-800/60 rounded-xl overflow-hidden">
-            <div className="px-4 py-2.5 border-b border-zinc-800/40">
+          <div className="bg-surface-1 border border-border-default rounded-xl overflow-hidden">
+            <div className="px-4 py-2.5 border-b border-border-default">
               <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">
                 Recent Commits
               </span>
             </div>
-            <div className="divide-y divide-zinc-800/30">
+            <div className="divide-y divide-border-default">
               {commits && commits.length > 0 ? (
                 commits.slice(0, 5).map((commit) => (
                   <div key={commit._id} className="px-4 py-2.5 flex items-start gap-2.5">
@@ -373,13 +373,13 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
         </div>
 
         {/* ─── Agent Comms ─── */}
-        <div className="bg-zinc-900/40 border border-zinc-800/60 rounded-xl overflow-hidden">
-          <div className="px-4 py-2.5 border-b border-zinc-800/40">
+        <div className="bg-surface-1 border border-border-default rounded-xl overflow-hidden">
+          <div className="px-4 py-2.5 border-b border-border-default">
             <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">
               Agent Comms
             </span>
           </div>
-          <div className="divide-y divide-zinc-800/30">
+          <div className="divide-y divide-border-default">
             {comms && comms.length > 0 ? (
               comms.slice(0, 5).map((msg, i) => (
                 <div key={msg._id || i} className="px-4 py-2.5">
@@ -412,7 +412,7 @@ export function CEODashboard({ className }: CEODashboardProps = {}) {
                               ? "bg-emerald-500/20 text-emerald-400"
                               : /blocked|failed/i.test(kw)
                               ? "bg-red-500/20 text-red-400"
-                              : "bg-zinc-800 text-zinc-500"
+                              : "bg-surface-4 text-zinc-500"
                           )}
                         >
                           {kw}

components/evox/HallOfFame.tsx

@@ -78,7 +78,7 @@ export function HallOfFame({ className }: HallOfFameProps) {
                   key={agent.name}
                   href={`/agents/${agent.name.toLowerCase()}`}
                   className={cn(
-                    "border rounded-xl p-4 text-center transition-colors hover:bg-zinc-800/30",
+                    "border rounded-xl p-4 text-center transition-colors hover:bg-surface-2",
                     style.border, style.bg,
                     agent.rank === 1 && "sm:order-first"
                   )}
@@ -100,7 +100,7 @@ export function HallOfFame({ className }: HallOfFameProps) {
                   {agent.badges.length > 0 && (
                     <div className="flex flex-wrap justify-center gap-1 mt-3">
                       {agent.badges.map((b) => (
-                        <span key={b} className={cn("text-[9px] px-1.5 py-0.5 rounded", BADGE_COLORS[b] ?? "bg-zinc-800 text-zinc-400")}>
+                        <span key={b} className={cn("text-[9px] px-1.5 py-0.5 rounded", BADGE_COLORS[b] ?? "bg-surface-4 text-text-secondary")}>
                           {b}
                         </span>
                       ))}
@@ -133,16 +133,16 @@ export function HallOfFame({ className }: HallOfFameProps) {
         )}
 
         {/* Leaderboard Table */}
-        <div className="bg-zinc-900/40 border border-zinc-800/60 rounded-xl overflow-hidden">
-          <div className="px-4 py-2.5 border-b border-zinc-800/40">
+        <div className="bg-surface-1 border border-border-default rounded-xl overflow-hidden">
+          <div className="px-4 py-2.5 border-b border-border-default">
             <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">
               Leaderboard
             </span>
           </div>
           <div className="overflow-x-auto">
             <table className="w-full text-xs">
               <thead>
-                <tr className="text-[10px] uppercase text-zinc-600 border-b border-zinc-800/30">
+                <tr className="text-[10px] uppercase text-zinc-600 border-b border-border-default">
                   <th className="text-left px-4 py-2 font-medium w-8">#</th>
                   <th className="text-left px-3 py-2 font-medium">Agent</th>
                   <th className="text-right px-3 py-2 font-medium">Tasks</th>
@@ -152,9 +152,9 @@ export function HallOfFame({ className }: HallOfFameProps) {
                   <th className="text-left px-4 py-2 font-medium">Badges</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-zinc-800/20">
+              <tbody className="divide-y divide-border-default">
                 {leaderboard.map((agent) => (
-                  <tr key={agent.name} className="hover:bg-zinc-800/20 transition-colors">
+                  <tr key={agent.name} className="hover:bg-surface-2 transition-colors">
                     <td className="px-4 py-2.5 tabular-nums text-zinc-500">{agent.rank}</td>
                     <td className="px-3 py-2.5">
                       <Link
@@ -174,7 +174,7 @@ export function HallOfFame({ className }: HallOfFameProps) {
                     <td className="px-4 py-2.5">
                       <div className="flex gap-1 flex-wrap">
                         {agent.badges.map((b) => (
-                          <span key={b} className={cn("text-[9px] px-1.5 py-0.5 rounded", BADGE_COLORS[b] ?? "bg-zinc-800 text-zinc-400")}>
+                          <span key={b} className={cn("text-[9px] px-1.5 py-0.5 rounded", BADGE_COLORS[b] ?? "bg-surface-4 text-text-secondary")}>
                             {b}
                           </span>
                         ))}

components/evox/ViewTabs.tsx

@@ -27,7 +27,7 @@ export function ViewTabs({ activeTab, onTabChange, className }: ViewTabsProps) {
   return (
     <div
       className={cn(
-        "flex items-center border-b border-zinc-800 bg-zinc-950 px-4 overflow-x-auto scrollbar-hide",
+        "flex items-center border-b border-border-default bg-base px-4 overflow-x-auto scrollbar-hide",
         className
       )}
       role="tablist"
@@ -46,8 +46,8 @@ export function ViewTabs({ activeTab, onTabChange, className }: ViewTabsProps) {
           className={cn(
             "relative px-3 py-2.5 text-sm transition-colors whitespace-nowrap shrink-0",
             activeTab === tab.id
-              ? "text-white"
-              : "text-zinc-500 hover:text-zinc-300"
+              ? "text-text-primary"
+              : "text-text-tertiary hover:text-text-secondary"
           )}
         >
           {tab.label}