From 9c1525a0f987fddc604b9f1e500396ecf4c916d0 Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Sat, 11 Apr 2026 11:01:17 +0000
Subject: [PATCH] refactor(nexus): apply Task 1 code-quality fixes to IconRail
 (phase 8)

Addresses two Important findings from the Task 1 code-quality review:

1. Swap literal #faff69 hex for the text-primary / bg-primary token
   (4 sites). The --primary CSS variable is already wired to volt via
   MIGRATION-PLAN.md phases 1-3, and 50+ existing files use the token.
   The original Task 1 commit landed on literal hex as a self-
   documenting placeholder; moving to the token aligns with the rest
   of the codebase and makes theme swaps a single-file change.

2. Add focus-visible styles to the Nexus mark link and each
   DestinationLink. Previously the component relied on browser-default
   outline, which on pure-black canvas + volt icons is both off-palette
   and visually weak. Now uses a volt ring with background offset for
   clear keyboard focus indication.

No behavior change. All 7 IconRail tests still pass.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/frame/IconRail.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/frame/IconRail.tsx b/ui/src/components/frame/IconRail.tsx
index 9eaf15cc..7c83dfc1 100644
--- a/ui/src/components/frame/IconRail.tsx
+++ b/ui/src/components/frame/IconRail.tsx
@@ -90,7 +90,7 @@ export function IconRail({ companyPrefix }: IconRailProps) {
       <Link
         to={companyPrefix ? `/${companyPrefix}/assistant` : "/"}
         aria-label="Nexus home"
-        className="mb-4 flex h-8 w-8 items-center justify-center rounded-[4px] text-[#faff69]"
+        className="mb-4 flex h-8 w-8 items-center justify-center rounded-[4px] text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
       >
         <NexusMark className="h-5 w-5" />
       </Link>
@@ -140,7 +140,8 @@ function DestinationLink({
         className={cn(
           "flex h-10 w-10 items-center justify-center rounded-[4px]",
           "transition-colors duration-100 ease-out",
-          active ? "text-[#faff69]" : "text-muted-foreground hover:text-[#faff69]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          active ? "text-primary" : "text-muted-foreground hover:text-primary",
         )}
       >
         <Icon className="h-5 w-5" strokeWidth={1.5} />
@@ -149,7 +150,7 @@ function DestinationLink({
       {active && (
         <span
           aria-hidden="true"
-          className="absolute right-0 top-1/2 h-5 w-[2px] -translate-y-1/2 bg-[#faff69]"
+          className="absolute right-0 top-1/2 h-5 w-[2px] -translate-y-1/2 bg-primary"
         />
       )}
     </li>