diff --git a/lib/utils.ts b/lib/utils.ts
index 365058c..4f4f00f 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function getArchetypeDisplayChar(archetype: { icon?: string; name: string }): string {
+    return archetype.icon || archetype.name.charAt(0) || '?';
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 7b02e5d..0b2a89c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,16 +4,16 @@
 
 :root {
   /* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */
-  --ui-bg-app: #070d16;
-  --ui-bg-shell: #0c1420;
-  --ui-bg-panel: #111c2a;
+  --ui-bg-app: #0a0908;
+  --ui-bg-shell: #12100e;
+  --ui-bg-panel: #1a1714;
   --ui-bg-card: #1a2431;
 
-  --ui-border-soft: rgba(153, 171, 190, 0.2);
-  --ui-border-strong: rgba(153, 171, 190, 0.34);
+  --ui-border-soft: rgba(185, 171, 153, 0.15);
+  --ui-border-strong: rgba(185, 171, 153, 0.25);
 
-  --ui-text-primary: #e8edf5;
-  --ui-text-muted: #8f9caf;
+  --ui-text-primary: #f0ece1;
+  --ui-text-muted: #9e9589;
 
   --ui-accent-ready: #35d98f;
   --ui-accent-blocked: #ff4c72;
@@ -37,9 +37,9 @@
   --color-accent-teal: var(--ui-accent-info);
 
   --color-text-primary: var(--ui-text-primary);
-  --color-text-secondary: #c4cfdb;
+  --color-text-secondary: #c9c4be;
   --color-text-muted: var(--ui-text-muted);
-  --color-text-on-primary: #10161d;
+  --color-text-on-primary: #12100e;
 
   --color-border-default: var(--ui-border-strong);
   --color-border-subtle: var(--ui-border-soft);
@@ -321,19 +321,19 @@ body {
 
 .ui-shell-topbar {
   background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-panel) 92%, black), var(--ui-bg-shell));
-  border-bottom: 1px solid color-mix(in srgb, var(--ui-accent-info) 22%, var(--ui-border-soft));
+  border-bottom: 1px solid color-mix(in srgb, var(--ui-accent-warning) 15%, var(--ui-border-soft));
   box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.9);
 }
 
 .ui-shell-middle {
   background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-app) 74%, black), color-mix(in srgb, var(--ui-bg-app) 90%, black));
-  border-left: 1px solid color-mix(in srgb, var(--ui-accent-info) 20%, var(--ui-border-soft));
-  border-right: 1px solid color-mix(in srgb, var(--ui-accent-info) 20%, var(--ui-border-soft));
+  border-left: 1px solid color-mix(in srgb, var(--ui-accent-warning) 12%, var(--ui-border-soft));
+  border-right: 1px solid color-mix(in srgb, var(--ui-accent-warning) 12%, var(--ui-border-soft));
 }
 
 .ui-shell-panel {
   background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-shell) 86%, black), color-mix(in srgb, var(--ui-bg-panel) 84%, black));
-  border-left: 1px solid color-mix(in srgb, var(--ui-accent-info) 30%, var(--ui-border-soft));
+  border-left: 1px solid color-mix(in srgb, var(--ui-accent-warning) 20%, var(--ui-border-soft));
 }
 
 .ui-tabular-nums {
diff --git a/src/components/activity/swarm-command-feed.tsx b/src/components/activity/swarm-command-feed.tsx
index 1bf416a..5976f14 100644
--- a/src/components/activity/swarm-command-feed.tsx
+++ b/src/components/activity/swarm-command-feed.tsx
@@ -5,7 +5,7 @@ import type { BeadIssue } from '../../lib/types';
 import type { ActivityEvent } from '../../lib/activity';
 import { useArchetypes } from '../../hooks/use-archetypes';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
+import { cn, getArchetypeDisplayChar } from '@/lib/utils';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { getEventTone, formatRelativeTime, getInitials } from './activity-panel';
 
@@ -100,8 +100,8 @@ export function SwarmCommandFeed({ epicId, issues, projectRoot }: SwarmCommandFe
                                 <div className="relative">
                                     <div className="absolute -inset-0.5 rounded-full blur-[2px] opacity-70 bg-emerald-500/20" />
                                     <Avatar className="h-9 w-9 relative z-10 ring-2 ring-emerald-500/40">
-                                        <AvatarFallback className="text-[10px] font-bold" style={{ backgroundColor: agent.archetype?.color ? `\${agent.archetype.color}20` : '#252525', color: agent.archetype?.color || '#fff' }}>
-                                            {getInitials(agent.assignee)}
+                                        <AvatarFallback className="text-[10px] font-bold" style={{ backgroundColor: agent.archetype?.color ? `${agent.archetype.color}20` : '#252525', color: agent.archetype?.color || '#fff' }}>
+                                            {agent.archetype ? getArchetypeDisplayChar(agent.archetype) : getInitials(agent.assignee)}
                                         </AvatarFallback>
                                     </Avatar>
                                 </div>
diff --git a/src/components/swarm/telemetry-grid.tsx b/src/components/swarm/telemetry-grid.tsx
index 4b81901..44b916b 100644
--- a/src/components/swarm/telemetry-grid.tsx
+++ b/src/components/swarm/telemetry-grid.tsx
@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { Loader2, AlertCircle, Bot, Zap } from 'lucide-react';
 import type { BeadIssue } from '../../lib/types';
 import type { AgentArchetype } from '../../lib/types-swarm';
+import { getArchetypeDisplayChar } from '../../lib/utils';
 
 import { WorkflowGraph } from '../shared/workflow-graph';
 
@@ -190,7 +191,7 @@ export function TelemetryGrid({ epicId, issues, archetypes }: TelemetryGridProps
                                         className="h-8 w-8 rounded flex-shrink-0 flex items-center justify-center font-bold text-sm border"
                                         style={{ backgroundColor: `${r.archetype?.color || '#888'}15`, color: r.archetype?.color || '#888', borderColor: `${r.archetype?.color || '#888'}30` }}
                                     >
-                                        {r.assignee.charAt(0).toUpperCase()}
+                                        {r.archetype ? getArchetypeDisplayChar(r.archetype) : r.assignee.charAt(0).toUpperCase()}
                                     </div>
                                     <div className="min-w-0 flex-1">
                                         <div className="text-xs font-bold text-[var(--ui-text-primary)] truncate">{r.assignee}</div>
diff --git a/test-watcher.ts b/test-watcher.ts
index c0b1d03..5739d4e 100644
--- a/test-watcher.ts
+++ b/test-watcher.ts
@@ -1,5 +1,5 @@
-import { readIssuesFromDisk } from './src/lib/read-issues.ts';
-import { runBdCommand } from './src/lib/bridge.ts';
+import { readIssuesFromDisk } from './src/lib/read-issues';
+import { runBdCommand } from './src/lib/bridge';
 
 const projectRoot = 'C:\\Users\\Zenchant\\codex\\beadboard';