StarCraft God Mode UI

This skill implements a Real-Time Strategy (RTS) game-inspired interface for orchestrating autonomous systems. The design philosophy draws from StarCraft 2's proven patterns for managing complexity through spatial awareness, resource visualization, and hierarchical command structures.

ADAM Install Base Overview

The ADAM (Autonomous Discovery and Advanced Manufacturing) platform will onboard a distributed network of 3D printers:

• 215 sites across the United States
• 378 printer installations (Studio: 243, InnX: 79, Shop: 56)
• Priority tiers: Tier A (highest), Tier B, Tier C for phased rollout
• Product lines: Shop System, Studio System, InnoventX

The Global Network Map (D3.js) enables visualization and selection of sites for onboarding. See references/d3-global-map.md for complete implementation and assets/install-base-sample.json for data structure.

Core Philosophy: God's-Eye UX

RTS interfaces excel at autonomous system orchestration because they solve the same fundamental problem: managing many independent units/agents performing parallel tasks while maintaining situational awareness and issuing contextual commands.

Key Principles

1. Spatial Awareness: Agents/units positioned on a tactical map, clustered by function
2. Resource Dashboards: Real-time metrics displayed as consumable resources (like lumber/gold → tokens/compute/jobs)
3. Units as Agents: Each autonomous agent represented as a selectable unit with status, capabilities, and commands
4. Command Panel: Context-sensitive actions based on current selection
5. Event Stream: Chronological feed of system events with filtering
6. Hierarchical Control: Select one, select many, issue orders to groups

Visual Design System

Color Palette

:root {
  /* Primary dark theme */
  --bg-primary: #0a0e14;
  --bg-secondary: #121a24;
  --bg-tertiary: #1a2532;
  --bg-panel: rgba(10, 20, 30, 0.95);
  
  /* Accent colors - faction-inspired */
  --accent-primary: #00d4ff;      /* Cyan - Protoss */
  --accent-secondary: #00ff88;    /* Green - success/online */
  --accent-warning: #ffaa00;      /* Orange - caution */
  --accent-danger: #ff3366;       /* Red - error/critical */
  --accent-purple: #aa44ff;       /* Purple - AI/autonomous */
  
  /* Glows and effects */
  --glow-primary: 0 0 20px rgba(0, 212, 255, 0.4);
  --glow-success: 0 0 20px rgba(0, 255, 136, 0.4);
  --glow-warning: 0 0 20px rgba(255, 170, 0, 0.4);
  
  /* Text hierarchy */
  --text-primary: #e4e8ed;
  --text-secondary: #8899aa;
  --text-muted: #556677;
  
  /* Borders */
  --border-subtle: rgba(0, 212, 255, 0.2);
  --border-active: rgba(0, 212, 255, 0.6);
}

Typography

/* Use monospace for data, tech-style display fonts for headers */
--font-display: 'Orbitron', 'Audiowide', 'Rajdhani', sans-serif;
--font-body: 'Exo 2', 'Titillium Web', 'Roboto Condensed', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;

Border Treatments with Augmented-UI

Install augmented-ui for sci-fi clipped corners:

npm install augmented-ui

@import 'augmented-ui/augmented-ui.min.css';

.panel {
  --aug-border-all: 1px;
  --aug-border-bg: var(--accent-primary);
  --aug-tl: 12px;
  --aug-br: 12px;
}

<div class="panel" data-augmented-ui="tl-clip br-clip border">
  Panel content
</div>

Layout Architecture

Screen Regions

┌────────────────────────────────────────────────────────────────────┐
│                         RESOURCE BAR                                │
│  [Compute: ████░░ 67%] [Jobs: 14/50] [Agents: 8 Online] [Tokens: 2.3M]│
├──────────────────────────────────────────────────────┬─────────────┤
│                                                      │             │
│                                                      │   MINIMAP   │
│                    MAIN VIEWPORT                     │  (System    │
│                  (Tactical Map or                    │   Overview) │
│                   Detail View)                       │             │
│                                                      ├─────────────┤
│                                                      │  SELECTION  │
│                                                      │    INFO     │
├──────────────────────────────────────────────────────┼─────────────┤
│              EVENT LOG / CONSOLE                     │  COMMAND    │
│  [12:34:01] Job X25-001 completed                   │   PANEL     │
│  [12:34:05] Agent Nova analyzing results            │  [Actions]  │
└──────────────────────────────────────────────────────┴─────────────┘

React Component Structure

src/
├── layouts/
│   └── GodModeLayout.tsx        # Main layout container
├── components/
│   ├── ResourceBar/
│   │   ├── ResourceBar.tsx      # Top resource metrics
│   │   ├── ResourceGauge.tsx    # Individual resource display
│   │   └── ResourceBar.css
│   ├── TacticalMap/
│   │   ├── TacticalMap.tsx      # Main viewport with unit positions
│   │   ├── UnitMarker.tsx       # Individual unit/agent marker
│   │   ├── SelectionBox.tsx     # Drag-select rectangle
│   │   └── TacticalMap.css
│   ├── Minimap/
│   │   ├── Minimap.tsx          # System overview minimap
│   │   └── Minimap.css
│   ├── SelectionPanel/
│   │   ├── SelectionPanel.tsx   # Info about selected units
│   │   ├── UnitCard.tsx         # Single unit detail card
│   │   └── SelectionPanel.css
│   ├── CommandPanel/
│   │   ├── CommandPanel.tsx     # Context-sensitive actions
│   │   ├── CommandButton.tsx    # Individual action button
│   │   └── CommandPanel.css
│   ├── EventLog/
│   │   ├── EventLog.tsx         # Scrolling event stream
│   │   ├── EventEntry.tsx       # Single event row
│   │   └── EventLog.css
│   └── shared/
│       ├── Panel.tsx            # Reusable augmented panel
│       ├── StatusIndicator.tsx  # Online/offline/busy dots
│       ├── ProgressBar.tsx      # Styled progress bars
│       └── GlowButton.tsx       # Sci-fi styled button
└── hooks/
    ├── useSelection.ts          # Multi-select state management
    ├── useKeyboardShortcuts.ts  # Hotkey bindings
    └── useRealTimeData.ts       # WebSocket data subscription

Component Implementation Patterns

1. Resource Bar

Displays system resources like RTS lumber/gold:

interface Resource {
  id: string;
  label: string;
  current: number;
  max: number;
  unit?: string;
  status: 'normal' | 'warning' | 'critical';
}

const ResourceBar: React.FC<{ resources: Resource[] }> = ({ resources }) => (
  <div className="resource-bar" data-augmented-ui="bl-clip br-clip border">
    {resources.map(r => (
      <ResourceGauge key={r.id} {...r} />
    ))}
  </div>
);

.resource-bar {
  display: flex;
  gap: 2rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-panel);
  --aug-border-all: 1px;
  --aug-border-bg: var(--border-subtle);
  --aug-bl: 8px;
  --aug-br: 8px;
}

.resource-gauge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
}

.resource-gauge__bar {
  width: 120px;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.resource-gauge__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width 0.3s ease;
  box-shadow: var(--glow-primary);
}

.resource-gauge--warning .resource-gauge__fill {
  background: var(--accent-warning);
  box-shadow: var(--glow-warning);
}

2. Tactical Map with Selectable Units

interface Agent {
  id: string;
  name: string;
  type: 'printer' | 'orchestrator' | 'analyzer' | 'worker';
  position: { x: number; y: number };
  status: 'idle' | 'working' | 'error' | 'offline';
  currentTask?: string;
}

const TacticalMap: React.FC<{
  agents: Agent[];
  selectedIds: Set<string>;
  onSelect: (ids: string[]) => void;
}> = ({ agents, selectedIds, onSelect }) => {
  const [selectionBox, setSelectionBox] = useState<Rect | null>(null);
  
  return (
    <div 
      className="tactical-map"
      onMouseDown={handleDragStart}
      onMouseMove={handleDragMove}
      onMouseUp={handleDragEnd}
    >
      {/* Grid overlay for spatial reference */}
      <svg className="tactical-map__grid">
        <defs>
          <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
            <path d="M 50 0 L 0 0 0 50" fill="none" stroke="var(--border-subtle)" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>
      
      {/* Agent markers */}
      {agents.map(agent => (
        <UnitMarker
          key={agent.id}
          agent={agent}
          isSelected={selectedIds.has(agent.id)}
          onClick={() => onSelect([agent.id])}
        />
      ))}
      
      {/* Selection box */}
      {selectionBox && <SelectionBox rect={selectionBox} />}
    </div>
  );
};

.tactical-map {
  position: relative;
  flex: 1;
  background: 
    radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
    var(--bg-primary);
  overflow: hidden;
}

.unit-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.unit-marker:hover {
  transform: scale(1.1);
}

.unit-marker--selected {
  filter: drop-shadow(var(--glow-primary));
}

.unit-marker__icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--accent-primary);
  border-radius: 4px;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.unit-marker--selected .unit-marker__icon {
  border-color: var(--accent-secondary);
  box-shadow: var(--glow-success);
}

.unit-marker__health {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  margin-top: 4px;
}

.unit-marker__health-fill {
  height: 100%;
  background: var(--accent-secondary);
}

3. Command Panel (Context-Sensitive)

interface Command {
  id: string;
  label: string;
  icon: React.ReactNode;
  hotkey?: string;
  disabled?: boolean;
  variant?: 'primary' | 'danger' | 'warning';
}

const CommandPanel: React.FC<{
  selection: Agent[];
  onCommand: (commandId: string, targets: Agent[]) => void;
}> = ({ selection, onCommand }) => {
  const commands = useMemo(() => getCommandsForSelection(selection), [selection]);
  
  return (
    <div className="command-panel" data-augmented-ui="tl-clip tr-clip border">
      <div className="command-panel__header">
        COMMANDS {selection.length > 0 && `(${selection.length})`}
      </div>
      <div className="command-panel__grid">
        {commands.map(cmd => (
          <CommandButton
            key={cmd.id}
            command={cmd}
            onClick={() => onCommand(cmd.id, selection)}
          />
        ))}
      </div>
    </div>
  );
};

.command-panel {
  --aug-tl: 8px;
  --aug-tr: 8px;
  --aug-border-all: 1px;
  --aug-border-bg: var(--border-subtle);
  background: var(--bg-panel);
  padding: 0.75rem;
}

.command-panel__header {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.command-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.command-button {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.7rem;
}

.command-button:hover:not(:disabled) {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-primary);
}

.command-button__hotkey {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

4. Event Log / Console

interface SystemEvent {
  id: string;
  timestamp: Date;
  level: 'info' | 'success' | 'warning' | 'error';
  source: string;
  message: string;
}

const EventLog: React.FC<{ events: SystemEvent[] }> = ({ events }) => {
  const logRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    // Auto-scroll to bottom on new events
    logRef.current?.scrollTo({ top: logRef.current.scrollHeight });
  }, [events.length]);
  
  return (
    <div className="event-log" data-augmented-ui="tl-clip border">
      <div className="event-log__header">
        <span>EVENT LOG</span>
        <div className="event-log__filters">
          {/* Filter toggles */}
        </div>
      </div>
      <div className="event-log__content" ref={logRef}>
        {events.map(e => (
          <EventEntry key={e.id} event={e} />
        ))}
      </div>
    </div>
  );
};

.event-log {
  --aug-tl: 8px;
  --aug-border-all: 1px;
  --aug-border-bg: var(--border-subtle);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.event-log__content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.event-entry {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.event-entry__time {
  color: var(--text-muted);
  flex-shrink: 0;
}

.event-entry__source {
  color: var(--accent-primary);
  flex-shrink: 0;
  min-width: 80px;
}

.event-entry--error { color: var(--accent-danger); }
.event-entry--warning { color: var(--accent-warning); }
.event-entry--success { color: var(--accent-secondary); }

5. Minimap

const Minimap: React.FC<{
  agents: Agent[];
  viewportBounds: Rect;
  onNavigate: (position: Point) => void;
}> = ({ agents, viewportBounds, onNavigate }) => (
  <div 
    className="minimap" 
    data-augmented-ui="tl-clip br-clip border"
    onClick={handleClick}
  >
    <div className="minimap__viewport" style={viewportStyle} />
    {agents.map(a => (
      <div 
        key={a.id}
        className={`minimap__dot minimap__dot--${a.status}`}
        style={{ left: `${a.position.x}%`, top: `${a.position.y}%` }}
      />
    ))}
  </div>
);

Animations and Effects

Scan Line Effect

.scan-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 212, 255, 0.03) 50%,
    transparent 100%
  );
  animation: scan 4s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

Panel Entrance Animation

.panel-enter {
  animation: panelReveal 0.4s ease-out forwards;
}

@keyframes panelReveal {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

Glowing Pulse for Active Elements

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px var(--accent-primary); }
  50% { box-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-primary); }
}

Keyboard Shortcuts Pattern

const useKeyboardShortcuts = (commands: Map<string, () => void>) => {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      // Ignore if typing in input
      if (e.target instanceof HTMLInputElement) return;
      
      const key = e.key.toUpperCase();
      const command = commands.get(key);
      if (command) {
        e.preventDefault();
        command();
      }
    };
    
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [commands]);
};

// Usage
useKeyboardShortcuts(new Map([
  ['A', () => selectAll()],
  ['S', () => stopSelected()],
  ['Q', () => executeCommand('queue')],
  ['ESCAPE', () => clearSelection()],
]));

ADAM Platform Integration Notes

For integrating with the ADAM platform's existing React 19 + TypeScript + Vite stack:

1. WebSocket Integration: Connect EventLog and ResourceBar to existing WebSocket gateway for real-time updates
2. Agent Mapping: Map Desktop Metal printers (X25 Pro, Shop System, etc.) as "units" on the tactical map
3. Nova Orchestrator: Display Nova's AI decisions in the event log with --accent-purple styling
4. INTERSECT Events: Subscribe to MQTT topics for instrument status updates
5. Experiment Campaigns: Show active campaigns as "mission objectives" in a sidebar panel

Dependencies

{
  "dependencies": {
    "augmented-ui": "^2.0.0",
    "framer-motion": "^11.0.0",
    "lucide-react": "^0.400.0",
    "d3": "^7.9.0",
    "topojson-client": "^3.1.0"
  },
  "devDependencies": {
    "@types/d3": "^7.4.0",
    "@types/topojson-client": "^3.1.0"
  }
}

Global Network Map (D3.js)

The ADAM platform includes a global visualization of the entire printer install base. This D3.js-powered map enables operators to visualize, filter, and select sites for onboarding into the autonomous manufacturing network.

Map Architecture

┌──────────────────────────────────────────────────────────────────────┐
│  ADAM GLOBAL NETWORK                           [Filter] [Search]     │
├──────────────────────────────────────────────────────────────────────┤
│                                                                      │
│     ┌─────────────────────────────────────────────────────────┐     │
│     │                                                         │     │
│     │                    D3.js US/World Map                   │     │
│     │                                                         │     │
│     │        ◆ Tier A (Gold)    ● Tier B (Cyan)              │     │
│     │        ○ Tier C (Gray)    ◇ Selected (Green)           │     │
│     │                                                         │     │
│     └─────────────────────────────────────────────────────────┘     │
│                                                                      │
├────────────────────────────────────┬─────────────────────────────────┤
│  SITE DETAILS                      │  SELECTION QUEUE               │
│  ┌────────────────────────────┐    │  ┌───────────────────────────┐ │
│  │ Anduril Industries         │    │  │ 3 sites selected          │ │
│  │ Irvine, CA                 │    │  │ 7 printers total          │ │
│  │ 2 installations (Shop)     │    │  │                           │ │
│  │ Priority: B                │    │  │ [Onboard to ADAM]         │ │
│  │ Contact: mdiaz@anduril.com │    │  └───────────────────────────┘ │
│  └────────────────────────────┘    │                                 │
└────────────────────────────────────┴─────────────────────────────────┘

Dependencies

npm install d3 @types/d3 topojson-client @types/topojson-client

Core Map Component

// components/GlobalMap/GlobalMap.tsx
import { useEffect, useRef, useState } from 'react';
import * as d3 from 'd3';
import * as topojson from 'topojson-client';
import type { Topology, GeometryCollection } from 'topojson-specification';
import './GlobalMap.css';

interface Site {
  id: string;
  name: string;
  city: string;
  state: string;
  lat: number;
  lng: number;
  installations: number;
  productLines: string[];
  priorityTier: 'A' | 'B' | 'C';
  priorityScore: number;
  contactName?: string;
  contactEmail?: string;
  hasShop: boolean;
  hasStudio: boolean;
  hasInnX: boolean;
}

interface GlobalMapProps {
  sites: Site[];
  selectedIds: Set<string>;
  onSiteSelect: (siteId: string, additive?: boolean) => void;
  onSiteHover: (site: Site | null) => void;
  filters: {
    productLines: string[];
    priorityTiers: string[];
    states: string[];
  };
}

const TIER_COLORS = {
  A: '#ffd700',  // Gold
  B: '#00d4ff',  // Cyan
  C: '#556677',  // Muted gray
};

export const GlobalMap: React.FC<GlobalMapProps> = ({
  sites,
  selectedIds,
  onSiteSelect,
  onSiteHover,
  filters,
}) => {
  const svgRef = useRef<SVGSVGElement>(null);
  const [dimensions, setDimensions] = useState({ width: 960, height: 600 });

  useEffect(() => {
    if (!svgRef.current) return;

    const svg = d3.select(svgRef.current);
    svg.selectAll('*').remove();

    // US Albers projection optimized for continental US
    const projection = d3.geoAlbersUsa()
      .scale(1200)
      .translate([dimensions.width / 2, dimensions.height / 2]);

    const path = d3.geoPath().projection(projection);

    // Load US TopoJSON
    d3.json<Topology>('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json')
      .then((us) => {
        if (!us) return;

        const states = topojson.feature(
          us,
          us.objects.states as GeometryCollection
        );

        // Draw state boundaries
        const g = svg.append('g').attr('class', 'map-layer');

        g.selectAll('path.state')
          .data(states.features)
          .join('path')
          .attr('class', 'state')
          .attr('d', path)
          .attr('fill', 'var(--bg-secondary)')
          .attr('stroke', 'var(--border-subtle)')
          .attr('stroke-width', 0.5);

        // Filter sites based on current filters
        const filteredSites = sites.filter((site) => {
          if (filters.states.length && !filters.states.includes(site.state)) {
            return false;
          }
          if (filters.priorityTiers.length && !filters.priorityTiers.includes(site.priorityTier)) {
            return false;
          }
          if (filters.productLines.length) {
            const hasMatch = filters.productLines.some((pl) =>
              site.productLines.includes(pl)
            );
            if (!hasMatch) return false;
          }
          return true;
        });

        // Draw site markers
        const markers = svg.append('g').attr('class', 'markers-layer');

        markers
          .selectAll('circle.site-marker')
          .data(filteredSites)
          .join('circle')
          .attr('class', (d) => `site-marker ${selectedIds.has(d.id) ? 'selected' : ''}`)
          .attr('cx', (d) => {
            const coords = projection([d.lng, d.lat]);
            return coords ? coords[0] : 0;
          })
          .attr('cy', (d) => {
            const coords = projection([d.lng, d.lat]);
            return coords ? coords[1] : 0;
          })
          .attr('r', (d) => Math.max(6, Math.sqrt(d.installations) * 6))
          .attr('fill', (d) => selectedIds.has(d.id) 
            ? 'var(--accent-secondary)' 
            : TIER_COLORS[d.priorityTier]
          )
          .attr('stroke', (d) => selectedIds.has(d.id) 
            ? 'var(--accent-secondary)' 
            : 'var(--bg-primary)'
          )
          .attr('stroke-width', 2)
          .style('cursor', 'pointer')
          .on('click', (event, d) => {
            onSiteSelect(d.id, event.shiftKey || event.ctrlKey);
          })
          .on('mouseenter', (_, d) => onSiteHover(d))
          .on('mouseleave', () => onSiteHover(null));

        // Add glow filter for selected markers
        const defs = svg.append('defs');
        const filter = defs.append('filter').attr('id', 'glow');
        filter
          .append('feGaussianBlur')
          .attr('stdDeviation', '3')
          .attr('result', 'coloredBlur');
        const feMerge = filter.append('feMerge');
        feMerge.append('feMergeNode').attr('in', 'coloredBlur');
        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
      });
  }, [sites, selectedIds, filters, dimensions, onSiteSelect, onSiteHover]);

  return (
    <div className="global-map" data-augmented-ui="tl-clip br-clip border">
      <svg
        ref={svgRef}
        width={dimensions.width}
        height={dimensions.height}
        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
      />
    </div>
  );
};

Map Styles

/* GlobalMap.css */
.global-map {
  --aug-tl: 12px;
  --aug-br: 12px;
  --aug-border-all: 1px;
  --aug-border-bg: var(--border-subtle);
  background: var(--bg-primary);
  overflow: hidden;
}

.global-map svg {
  display: block;
}

.global-map .state {
  transition: fill 0.2s;
}

.global-map .state:hover {
  fill: var(--bg-tertiary);
}

.global-map .site-marker {
  transition: all 0.2s;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.global-map .site-marker:hover {
  filter: drop-shadow(0 0 8px currentColor);
  transform-origin: center;
}

.global-map .site-marker.selected {
  filter: url(#glow) drop-shadow(0 0 10px var(--accent-secondary));
  animation: markerPulse 2s ease-in-out infinite;
}

@keyframes markerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

Filter Panel Component

// components/GlobalMap/MapFilters.tsx
interface MapFiltersProps {
  filters: {
    productLines: string[];
    priorityTiers: string[];
    states: string[];
  };
  onFiltersChange: (filters: MapFiltersProps['filters']) => void;
  availableStates: string[];
}

export const MapFilters: React.FC<MapFiltersProps> = ({
  filters,
  onFiltersChange,
  availableStates,
}) => {
  const toggleFilter = (
    category: keyof typeof filters,
    value: string
  ) => {
    const current = filters[category];
    const updated = current.includes(value)
      ? current.filter((v) => v !== value)
      : [...current, value];
    onFiltersChange({ ...filters, [category]: updated });
  };

  return (
    <div className="map-filters" data-augmented-ui="tl-clip border">
      <div className="map-filters__section">
        <h4>Product Lines</h4>
        <div className="map-filters__buttons">
          {['Shop', 'Studio', 'InnX'].map((pl) => (
            <button
              key={pl}
              className={`filter-btn ${filters.productLines.includes(pl) ? 'active' : ''}`}
              onClick={() => toggleFilter('productLines', pl)}
            >
              {pl}
            </button>
          ))}
        </div>
      </div>

      <div className="map-filters__section">
        <h4>Priority Tier</h4>
        <div className="map-filters__buttons">
          {['A', 'B', 'C'].map((tier) => (
            <button
              key={tier}
              className={`filter-btn tier-${tier} ${filters.priorityTiers.includes(tier) ? 'active' : ''}`}
              onClick={() => toggleFilter('priorityTiers', tier)}
            >
              Tier {tier}
            </button>
          ))}
        </div>
      </div>

      <div className="map-filters__section">
        <h4>Region</h4>
        <select
          multiple
          value={filters.states}
          onChange={(e) => {
            const selected = Array.from(e.target.selectedOptions, (o) => o.value);
            onFiltersChange({ ...filters, states: selected });
          }}
          className="state-select"
        >
          {availableStates.map((st) => (
            <option key={st} value={st}>{st}</option>
          ))}
        </select>
      </div>
    </div>
  );
};

Site Detail Panel

// components/GlobalMap/SiteDetailPanel.tsx
interface SiteDetailPanelProps {
  site: Site | null;
  isSelected: boolean;
  onSelect: () => void;
  onDeselect: () => void;
}

export const SiteDetailPanel: React.FC<SiteDetailPanelProps> = ({
  site,
  isSelected,
  onSelect,
  onDeselect,
}) => {
  if (!site) {
    return (
      <div className="site-detail-panel empty" data-augmented-ui="tl-clip br-clip border">
        <p className="text-muted">Hover over a site to view details</p>
      </div>
    );
  }

  return (
    <div 
      className={`site-detail-panel ${isSelected ? 'selected' : ''}`} 
      data-augmented-ui="tl-clip br-clip border"
    >
      <div className="site-detail-panel__header">
        <span className={`tier-badge tier-${site.priorityTier}`}>
          Tier {site.priorityTier}
        </span>
        <span className="priority-score">Score: {site.priorityScore}</span>
      </div>

      <h3 className="site-detail-panel__name">{site.name}</h3>
      <p className="site-detail-panel__location">
        {site.city}, {site.state}
      </p>

      <div className="site-detail-panel__stats">
        <div className="stat">
          <span className="stat__value">{site.installations}</span>
          <span className="stat__label">Printers</span>
        </div>
        <div className="stat">
          <span className="stat__value">{site.productLines.join(', ')}</span>
          <span className="stat__label">Product Lines</span>
        </div>
      </div>

      <div className="site-detail-panel__products">
        {site.hasShop && <span className="product-badge shop">Shop</span>}
        {site.hasStudio && <span className="product-badge studio">Studio</span>}
        {site.hasInnX && <span className="product-badge innx">InnX</span>}
      </div>

      {site.contactEmail && (
        <div className="site-detail-panel__contact">
          <p><strong>Contact:</strong> {site.contactName}</p>
          <p><a href={`mailto:${site.contactEmail}`}>{site.contactEmail}</a></p>
        </div>
      )}

      <button
        className={`onboard-btn ${isSelected ? 'selected' : ''}`}
        onClick={isSelected ? onDeselect : onSelect}
        data-augmented-ui="tl-clip br-clip border"
      >
        {isSelected ? 'Remove from Selection' : 'Add to ADAM Network'}
      </button>
    </div>
  );
};

Selection Queue Panel

// components/GlobalMap/SelectionQueue.tsx
interface SelectionQueueProps {
  selectedSites: Site[];
  onRemoveSite: (siteId: string) => void;
  onClearAll: () => void;
  onOnboardSelected: () => void;
}

export const SelectionQueue: React.FC<SelectionQueueProps> = ({
  selectedSites,
  onRemoveSite,
  onClearAll,
  onOnboardSelected,
}) => {
  const totalPrinters = selectedSites.reduce((sum, s) => sum + s.installations, 0);

  return (
    <div className="selection-queue" data-augmented-ui="tl-clip tr-clip border">
      <div className="selection-queue__header">
        <h4>ONBOARDING QUEUE</h4>
        {selectedSites.length > 0 && (
          <button className="clear-btn" onClick={onClearAll}>Clear All</button>
        )}
      </div>

      <div className="selection-queue__summary">
        <div className="summary-stat">
          <span className="summary-stat__value">{selectedSites.length}</span>
          <span className="summary-stat__label">Sites</span>
        </div>
        <div className="summary-stat">
          <span className="summary-stat__value">{totalPrinters}</span>
          <span className="summary-stat__label">Printers</span>
        </div>
      </div>

      <div className="selection-queue__list">
        {selectedSites.map((site) => (
          <div key={site.id} className="queue-item">
            <div className="queue-item__info">
              <span className="queue-item__name">{site.name}</span>
              <span className="queue-item__meta">
                {site.city}, {site.state} • {site.installations} units
              </span>
            </div>
            <button
              className="queue-item__remove"
              onClick={() => onRemoveSite(site.id)}
            >
              ×
            </button>
          </div>
        ))}
      </div>

      {selectedSites.length > 0 && (
        <button
          className="onboard-all-btn"
          onClick={onOnboardSelected}
          data-augmented-ui="tl-clip br-clip border"
        >
          <span className="btn-icon">⚡</span>
          Onboard {selectedSites.length} Sites to ADAM
        </button>
      )}
    </div>
  );
};

Geocoding Utility

Since the install base data may not have coordinates, include a geocoding utility:

// utils/geocoding.ts

// US State centroid coordinates for approximate positioning
export const STATE_CENTROIDS: Record<string, [number, number]> = {
  AL: [-86.9023, 32.3182], AK: [-153.4937, 64.2008], AZ: [-111.0937, 34.0489],
  AR: [-92.3731, 35.2010], CA: [-119.4179, 36.7783], CO: [-105.3111, 39.0598],
  CT: [-72.7554, 41.6032], DE: [-75.5277, 38.9108], FL: [-81.5158, 27.6648],
  GA: [-82.9071, 32.1656], HI: [-155.5828, 19.8968], ID: [-114.7420, 44.0682],
  IL: [-89.3985, 40.6331], IN: [-86.1349, 40.2672], IA: [-93.0977, 41.8780],
  KS: [-98.4842, 39.0119], KY: [-84.2700, 37.8393], LA: [-91.9623, 30.9843],
  ME: [-69.4455, 45.2538], MD: [-76.6413, 39.0458], MA: [-71.3824, 42.4072],
  MI: [-85.6024, 44.3148], MN: [-94.6859, 46.7296], MS: [-89.3985, 32.3547],
  MO: [-91.8318, 37.9643], MT: [-110.3626, 46.8797], NE: [-99.9018, 41.4925],
  NV: [-116.4194, 38.8026], NH: [-71.5724, 43.1939], NJ: [-74.4057, 40.0583],
  NM: [-105.8701, 34.5199], NY: [-75.4999, 43.2994], NC: [-79.0193, 35.7596],
  ND: [-101.0020, 47.5515], OH: [-82.9071, 40.4173], OK: [-97.0929, 35.0078],
  OR: [-120.5542, 43.8041], PA: [-77.1945, 41.2033], RI: [-71.4774, 41.5801],
  SC: [-81.1637, 33.8361], SD: [-99.9018, 43.9695], TN: [-86.5804, 35.5175],
  TX: [-99.9018, 31.9686], UT: [-111.0937, 39.3210], VT: [-72.5778, 44.5588],
  VA: [-78.6569, 37.4316], WA: [-120.7401, 47.7511], WV: [-80.4549, 38.5976],
  WI: [-89.6165, 43.7844], WY: [-107.2903, 43.0760], DC: [-77.0369, 38.9072],
};

// Major US cities with coordinates
export const CITY_COORDINATES: Record<string, [number, number]> = {
  'new york|ny': [-74.006, 40.7128],
  'los angeles|ca': [-118.2437, 34.0522],
  'chicago|il': [-87.6298, 41.8781],
  'houston|tx': [-95.3698, 29.7604],
  'phoenix|az': [-112.074, 33.4484],
  'philadelphia|pa': [-75.1652, 39.9526],
  'san antonio|tx': [-98.4936, 29.4241],
  'san diego|ca': [-117.1611, 32.7157],
  'dallas|tx': [-96.797, 32.7767],
  'san jose|ca': [-121.8863, 37.3382],
  'austin|tx': [-97.7431, 30.2672],
  'boston|ma': [-71.0589, 42.3601],
  'seattle|wa': [-122.3321, 47.6062],
  'denver|co': [-104.9903, 39.7392],
  'detroit|mi': [-83.0458, 42.3314],
  'irvine|ca': [-117.8265, 33.6846],
  'cupertino|ca': [-122.0322, 37.323],
  'fremont|ca': [-121.9886, 37.5485],
  'pittsburgh|pa': [-79.9959, 40.4406],
  'cleveland|oh': [-81.6944, 41.4993],
  'cincinnati|oh': [-84.512, 39.1031],
  'columbus|oh': [-82.9988, 39.9612],
  'dayton|oh': [-84.1916, 39.7589],
  'salt lake city|ut': [-111.891, 40.7608],
  'albuquerque|nm': [-106.6504, 35.0844],
  'knoxville|tn': [-83.9207, 35.9606],
};

export function geocodeSite(city: string, state: string): [number, number] | null {
  // Try exact city match first
  const cityKey = `${city.toLowerCase()}|${state.toLowerCase()}`;
  if (CITY_COORDINATES[cityKey]) {
    return CITY_COORDINATES[cityKey];
  }

  // Fall back to state centroid with random jitter
  if (STATE_CENTROIDS[state]) {
    const [lng, lat] = STATE_CENTROIDS[state];
    // Add small random offset to prevent overlapping markers
    const jitter = () => (Math.random() - 0.5) * 2;
    return [lng + jitter(), lat + jitter()];
  }

  return null;
}

Data Loading Hook

// hooks/useInstallBaseData.ts
import { useState, useEffect } from 'react';
import { geocodeSite } from '../utils/geocoding';

interface RawSiteData {
  'Site Key': string;
  'Site Name': string;
  City: string;
  ST: string;
  Installations: number;
  'Product Lines': string;
  'Priority Tier': string;
  'Priority Score': number;
  'Contact Name'?: string;
  'Contact Email'?: string;
  'Has Shop': number;
  'Has Studio': number;
  'Has InnX': number;
}

export function useInstallBaseData(dataUrl: string) {
  const [sites, setSites] = useState<Site[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch(dataUrl)
      .then((res) => res.json())
      .then((data: RawSiteData[]) => {
        const processed = data
          .map((raw): Site | null => {
            const coords = geocodeSite(raw.City, raw.ST);
            if (!coords) return null;

            return {
              id: raw['Site Key'],
              name: raw['Site Name'],
              city: raw.City,
              state: raw.ST,
              lat: coords[1],
              lng: coords[0],
              installations: raw.Installations || 0,
              productLines: raw['Product Lines']?.split(',').map((s) => s.trim()) || [],
              priorityTier: (raw['Priority Tier'] as 'A' | 'B' | 'C') || 'C',
              priorityScore: raw['Priority Score'] || 0,
              contactName: raw['Contact Name'],
              contactEmail: raw['Contact Email'],
              hasShop: raw['Has Shop'] === 1,
              hasStudio: raw['Has Studio'] === 1,
              hasInnX: raw['Has InnX'] === 1,
            };
          })
          .filter((s): s is Site => s !== null);

        setSites(processed);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [dataUrl]);

  return { sites, loading, error };
}

Quick Start Checklist

1. Install augmented-ui and add CSS import
2. Create GodModeLayout with grid regions
3. Implement ResourceBar with system metrics
4. Build TacticalMap with selectable unit markers
5. Add CommandPanel with context-sensitive actions
6. Create EventLog with real-time WebSocket subscription
7. Add keyboard shortcut bindings
8. Apply scan-line and glow effects for sci-fi polish
9. Connect to ADAM's existing WebSocket gateway
10. Map printer fleet to unit positions on tactical map
11. Install D3.js and topojson-client for global map
12. Create GlobalMap component with US projection
13. Implement site filtering by product line, tier, state
14. Build selection queue for ADAM onboarding workflow
15. Load and geocode install base data from spreadsheet