style(brand): dim AgentV wordmark middle letters

apps/cli/src/commands/eval/html-writer.ts

@@ -76,7 +76,9 @@ ${STYLES}
 <body>
     <header class="header">
         <div class="header-left">
-            <h1 class="header-title">AgentV</h1>
+            <h1 class="header-title" aria-label="AgentV">
+                <span class="brand-letter" aria-hidden="true">A</span><span class="brand-middle" aria-hidden="true">GENT</span><span class="brand-letter" aria-hidden="true">V</span>
+            </h1>
             <span class="header-subtitle">Evaluation Report</span>
         </div>
         <div class="header-right">${liveIndicator}</div>
@@ -110,7 +112,7 @@ const STYLES = `
 *{margin:0;padding:0;box-sizing:border-box}
 :root{
   --bg:#f6f8fa;--surface:#fff;--border:#d0d7de;--border-light:#e8ebee;
-  --text:#1f2328;--text-muted:#656d76;
+  --text:#1f2328;--text-muted:#656d76;--brand-middle:#656d76;
   --primary:#0969da;--primary-bg:#ddf4ff;
   --success:#1a7f37;--success-bg:#dafbe1;
   --danger:#cf222e;--danger-bg:#ffebe9;
@@ -126,6 +128,8 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:
 .header{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
 .header-left{display:flex;align-items:baseline;gap:12px}
 .header-title{font-size:18px;font-weight:600}
+.brand-letter{color:var(--primary)}
+.brand-middle{color:var(--brand-middle)}
 .header-subtitle{font-size:14px;color:var(--text-muted)}
 .live-badge{color:var(--success);font-size:12px;font-weight:600;animation:pulse 2s infinite}
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

apps/cli/test/commands/results/report.test.ts

@@ -135,6 +135,8 @@ describe('results report', () => {
     expect(html).toContain('contains');
     expect(html).toContain('regex');
     expect(html).toContain('AgentV Evaluation Report');
+    expect(html).toContain('class="brand-wordmark" aria-label="AgentV"');
+    expect(html).toContain('class="brand-middle" aria-hidden="true">GENT</span>');
     expect(html).not.toContain('<th>Progress</th>');
     expect(html).not.toContain('metric-stack');
     expect(html).toContain('<span class="pass-rate-track">');

apps/dashboard/src/components/BrandName.tsx

@@ -7,11 +7,13 @@ export function BrandName({ appName }: { appName: string }) {
 
   return (
     <span className="av-brand-name" aria-label="AgentV">
-      <span className="text-cyan-400" aria-hidden="true">
+      <span className="av-brand-name__letter" aria-hidden="true">
         A
       </span>
-      <span aria-hidden="true">GENT</span>
-      <span className="text-cyan-400" aria-hidden="true">
+      <span className="av-brand-name__middle" aria-hidden="true">
+        GENT
+      </span>
+      <span className="av-brand-name__letter" aria-hidden="true">
         V
       </span>
     </span>

apps/dashboard/src/styles/globals.css

@@ -16,6 +16,14 @@ body {
   white-space: nowrap;
 }
 
+.av-brand-name__letter {
+  @apply text-cyan-400;
+}
+
+.av-brand-name__middle {
+  @apply text-gray-300;
+}
+
 /* Scrollbar styling for dark theme */
 ::-webkit-scrollbar {
   @apply w-2;

apps/web/src/components/BrandWordmark.astro

@@ -8,7 +8,7 @@ const className = Astro.props.class;
 
 <span class:list={['av-brand-wordmark', className]} aria-label="AgentV" translate="no">
   <span class="av-brand-wordmark__letter" aria-hidden="true">A</span>
-  <span aria-hidden="true">GENT</span>
+  <span class="av-brand-wordmark__middle" aria-hidden="true">GENT</span>
   <span class="av-brand-wordmark__letter" aria-hidden="true">V</span>
 </span>
 
@@ -36,6 +36,14 @@ const className = Astro.props.class;
     color: var(--av-brand-letter-color, #06b6d4);
   }
 
+  .av-brand-wordmark__middle {
+    color: var(--av-brand-middle-color, hsl(240, 5%, 42%));
+  }
+
+  :global(:root[data-theme="dark"]) .av-brand-wordmark {
+    --av-brand-middle-color: hsl(0, 0%, 85%);
+  }
+
   .av-brand-wordmark--inline {
     display: inline-flex;
     font-size: inherit;