The Agent Color Challenge
When a terminal application supports multiple agents (AI assistants, terminal sessions, or any indexed entities), each agent needs a visually distinct color:┌─────────────────────────────────────────────────────────────────────────────┐
│ THE AGENT COLOR CHALLENGE │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ PROBLEM: │
│ ──────── │
│ Generate N unique colors where: │
│ 1. Each color is visually distinct from all others │
│ 2. No two adjacent colors look similar │
│ 3. Colors remain distinguishable as N grows │
│ 4. All colors have equal perceptual brightness │
│ 5. Colors work on both dark and light backgrounds │
│ │
│ NAIVE SOLUTIONS (AND THEIR FAILURES): │
│ ───────────────────────────────────── │
│ │
│ 1. Sequential Hue Division: │
│ hue = (index * 360 / totalAgents) │
│ Problem: Colors cluster at similar hues as N changes │
│ │
│ 2. Random Colors: │
│ hue = random() │
│ Problem: Adjacent agents may get similar colors │
│ │
│ 3. Predefined Palette: │
│ colors = [red, blue, green, ...] │
│ Problem: Limited to palette size, doesn't scale │
│ │
│ SOLUTION: GOLDEN ANGLE ROTATION │
│ ─────────────────────────────── │
│ hue = (baseHue + index * GOLDEN_ANGLE) % 360 │
│ │
│ This mathematically guarantees maximum distribution at ANY N! │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Golden Angle as Frame Drag Interference Minimizer
┌─────────────────────────────────────────────────────────────────────────────┐
│ GOLDEN ANGLE: MINIMIZING FRAME DRAG INTERFERENCE │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ THE PHYSICS METAPHOR: │
│ ──────────────────── │
│ │
│ Core Colors create "gravity wells" (Frame Drag anchors) that pull nearby │
│ colors toward them. When generating agent colors, we face a challenge: │
│ │
│ If agent colors are placed too close together on the hue wheel: │
│ │
│ Agent 1 Agent 2 Agent 3 │
│ * * * │
│ \ /│\ / │
│ \─────────────/ │ \───────────/ │
│ │ │
│ ┌──────*──────┐ │
│ │ COLLISION │ Frame Drag fields OVERLAP │
│ │ ZONE │ Colors look "the same" │
│ └─────────────┘ │
│ │
│ THE GOLDEN ANGLE SOLUTION: │
│ ───────────────────────── │
│ │
│ The golden angle (137.5) is mathematically proven to create MAXIMUM │
│ spacing between successive points on a circle. For agents, we use 27.5 │
│ (1/5 of golden angle) for HARMONIOUS separation while avoiding overlap. │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Golden Angle = 137.5 = 360 / phi² │ │
│ │ │ │
│ │ This is the angle that NEVER creates regular patterns. │ │
│ │ No matter how many agents you add, they will always be spaced │ │
│ │ to MINIMIZE GRAVITY FIELD OVERLAP (Frame Drag interference). │ │
│ │ │ │
│ │ For agents, we use 27.5 = 137.5 / 5 to create: │ │
│ │ - Harmonious progression (agents feel "related") │ │
│ │ - Sufficient separation (agents are still distinct) │ │
│ │ - No gravity field collision (Frame Drag fields don't overlap) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Two Golden Angles in Monolex
┌───────────────────────────────────────────────────────────────────────┐
│ TWO GOLDEN ANGLE CONSTANTS │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ GOLDEN_ANGLE = 137.5077640500378 │
│ │ │
│ └──► 360 / phi² (phi = golden ratio = 1.618...) │
│ Used for: file types, syntax colors (MAXIMUM separation) │
│ │
│ AGENT_GOLDEN_ANGLE = 27.5 │
│ │ │
│ └──► 137.5 / 5 (one-fifth of golden angle) │
│ Used for: agent colors (HARMONIOUS progression) │
│ │
│ WHY TWO VALUES? │
│ ─────────────── │
│ 137.5° - Colors JUMP across wheel (max isolation, distinct types) │
│ 27.5° - Colors PROGRESS smoothly (related agents, grouped feel) │
│ │
└───────────────────────────────────────────────────────────────────────┘
/** Golden angle for maximum color distribution */
export const GOLDEN_ANGLE = 137.5077640500378;
/** Agent color golden angle (smaller for subtle variation) */
export const AGENT_GOLDEN_ANGLE = 27.5;
┌─────────────────────────────────────────────────────────────────────────────┐
│ TWO GOLDEN ANGLES EXPLAINED │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ GOLDEN_ANGLE = 137.5077640500378 │
│ ──────────────────────────────── │
│ Derived from: 360 / phi² where phi = (1 + sqrt(5)) / 2 │
│ Purpose: Maximum possible hue separation (Frame Drag ISOLATION) │
│ Use case: File types, syntax highlighting (need VERY distinct colors) │
│ Physics: Creates individual gravity wells with maximum separation │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Hue distribution with 137.5 (MAXIMUM ISOLATION): │ │
│ │ │ │
│ │ File 1: 0 + 137.5 = 137.5 (cyan-green) │ │
│ │ File 2: 0 + 275.0 = 275.0 (blue-violet) │ │
│ │ File 3: 0 + 412.5 = 52.5 (yellow-orange) │ │
│ │ File 4: 0 + 550.0 = 190.0 (cyan) │ │
│ │ File 5: 0 + 687.5 = 327.5 (magenta-pink) │ │
│ │ │ │
│ │ Colors JUMP across the wheel - maximum Frame Drag isolation! │ │
│ │ Each file type is in its OWN gravity zone. │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ AGENT_GOLDEN_ANGLE = 27.5 │
│ ───────────────────────── │
│ Derived from: 137.5 / 5 = 27.5 (fifth of golden angle) │
│ Purpose: Subtle, harmonious variation (Frame Drag HARMONY) │
│ Use case: Terminal sessions, agent tabs (grouped, related entities) │
│ Physics: Creates overlapping but distinct gravity fields (Gestalt group) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Hue distribution with 27.5 (from base 180): │ │
│ │ │ │
│ │ Agent 1: 180 + 27.5 = 207.5 (blue-cyan) │ │
│ │ Agent 2: 180 + 55.0 = 235.0 (blue) │ │
│ │ Agent 3: 180 + 82.5 = 262.5 (blue-violet) │ │
│ │ Agent 4: 180 + 110 = 290.0 (violet) │ │
│ │ Agent 5: 180 + 137.5 = 317.5 (magenta) │ │
│ │ │ │
│ │ Colors PROGRESS smoothly - agents feel related but distinct! │ │
│ │ This is Gestalt COMMON FATE: moving in the same direction. │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Agent Color Generation Function
getAgentColorOklch Implementation
┌───────────────────────────────────────────────────────────────────────┐
│ getAgentColorOklch() ALGORITHM FLOW │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ ─────── │
│ index: Agent number (1-based: 1, 2, 3, ...) │
│ baseHue: Starting hue angle (default: 180 = cyan) │
│ isDark: Dark theme flag │
│ │
│ STEP 1: Calculate Hue │
│ ───────────────────────── │
│ hue = (baseHue + index × 27.5) % 360 │
│ │
│ Example (baseHue=180): │
│ Agent 1: (180 + 1×27.5) % 360 = 207.5 (blue-cyan) │
│ Agent 2: (180 + 2×27.5) % 360 = 235.0 (blue) │
│ Agent 3: (180 + 3×27.5) % 360 = 262.5 (blue-violet) │
│ │
│ STEP 2: Select Lightness & Chroma │
│ ────────────────────────────────── │
│ isDark = true → L = 70%, C = 0.10 (light on dark bg) │
│ isDark = false → L = 40%, C = 0.12 (dark on light bg) │
│ │
│ OUTPUT: { l: lightness, c: chroma, h: hue } │
│ │
└───────────────────────────────────────────────────────────────────────┘
/**
* Generate unique agent color using OKLCH
* Uses golden angle rotation for maximum visual distinction
* Frame Drag: Each agent gets its own gravity zone
*
* @param index Agent number (1-based)
* @param baseHue Starting hue (from theme)
* @param isDark Dark theme mode
*/
export function getAgentColorOklch(
index: number,
baseHue: number = 180,
isDark: boolean = true
): OKLCH {
// Rotate hue by golden angle - minimizes Frame Drag interference
const hue = (baseHue + index * AGENT_GOLDEN_ANGLE) % 360;
// OKLCH provides uniform perceived lightness
const lightness = isDark ? 70 : 40;
const chroma = isDark ? 0.1 : 0.12;
return { l: lightness, c: chroma, h: hue };
}
┌─────────────────────────────────────────────────────────────────────────────┐
│ getAgentColorOklch() ALGORITHM │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: │
│ ────── │
│ index: Agent number (1-based) │
│ baseHue: Starting hue angle (default: 180 = cyan) │
│ isDark: Dark theme flag │
│ │
│ STEP 1: Calculate Hue (Frame Drag Zone Assignment) │
│ ─────────────────────────────────────────────────── │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ hue = (baseHue + index * AGENT_GOLDEN_ANGLE) % 360 │ │
│ │ │ │
│ │ PHYSICS: This assigns each agent to its own GRAVITY ZONE. │ │
│ │ The 27.5 spacing ensures no two agents share a gravity field. │ │
│ │ │ │
│ │ Example (baseHue = 180, AGENT_GOLDEN_ANGLE = 27.5): │ │
│ │ │ │
│ │ index=1: (180 + 1 × 27.5) % 360 = 207.5 ← Gravity Zone 1 │ │
│ │ index=2: (180 + 2 × 27.5) % 360 = 235.0 ← Gravity Zone 2 │ │
│ │ index=3: (180 + 3 × 27.5) % 360 = 262.5 ← Gravity Zone 3 │ │
│ │ index=4: (180 + 4 × 27.5) % 360 = 290.0 ← Gravity Zone 4 │ │
│ │ index=5: (180 + 5 × 27.5) % 360 = 317.5 ← Gravity Zone 5 │ │
│ │ index=6: (180 + 6 × 27.5) % 360 = 345.0 ← Gravity Zone 6 │ │
│ │ index=7: (180 + 7 × 27.5) % 360 = 12.5 ← Gravity Zone 7 │ │
│ │ │ │
│ │ Each zone is 27.5° wide - just enough to avoid Frame Drag. │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ STEP 2: Select Lightness & Chroma (Gravity Field Strength) │
│ ─────────────────────────────────────────────────────────── │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Theme Lightness Chroma Frame Drag Interpretation │ │
│ │ ─────────────────────────────────────────────────────────────── │ │
│ │ Dark 70% 0.10 Weaker field (subtle pull) │ │
│ │ Light 40% 0.12 Stronger field (vibrant) │ │
│ │ │ │
│ │ LOW CHROMA (0.10-0.12) = WEAK GRAVITY FIELDS: │ │
│ │ - Agent colors don't "pull" other colors strongly │ │
│ │ - They exist in "free space" between Core Color anchors │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Six Color Modes
The ThemeColorSystemAutoUnique class supports six modes for agent colors:┌─────────────────────────────────────────────────────────────────────────────┐
│ SIX AGENT COLOR MODES (Frame Drag Perspective) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ MODE DESCRIPTION FRAME DRAG BEHAVIOR │
│ ─────────────────────────────────────────────────────────────────────── │
│ │
│ "hue" Pure hue rotation Creates individual zones│
│ Uses golden angle (27.5) No field overlap │
│ HSL output Weak gravity (HSL issue)│
│ │
│ "sat" Fixed hue, varying saturation Single zone, depth vary │
│ Blue hue family only Shallow to deep fields │
│ Max 4 agents Limited utilization │
│ │
│ "sat-hue" Saturation first, then hue Groups share zones │
│ Groups of 4 sats, then rotate Zone + depth variation │
│ Supports 50+ agents Complex field topology │
│ │
│ "sat-hue-primary" Same as sat-hue but uses Theme anchor inheritance│
│ background hue as base Zones near Core Color │
│ │
│ "oklch" OKLCH with golden angle RECOMMENDED: │
│ Perceptually uniform - Uniform field strength│
│ oklch() CSS output - True zone independence│
│ - No Frame Drag bleeding│
│ │
│ "oklch-primary" OKLCH using theme primary Theme-aware zones │
│ as base hue Zones orbit Core anchor │
│ oklch() CSS output Harmonious alignment │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ RECOMMENDATION: │ │
│ │ │ │
│ │ For new code, prefer "oklch" or "oklch-primary" modes. │ │
│ │ They provide perceptually uniform colors, ensuring all agents │ │
│ │ appear equally prominent regardless of hue. │ │
│ │ │ │
│ │ FRAME DRAG BENEFIT: OKLCH ensures uniform "gravity field strength" │ │
│ │ across all hues. A yellow agent won't appear "brighter" than blue. │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
OKLCH vs OKLCH_PRIMARY Mode
┌─────────────────────────────────────────────────────────────────────────────┐
│ OKLCH vs OKLCH_PRIMARY MODE (Frame Drag View) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ OKLCH MODE (Standard): │
│ ────────────────────── │
│ Base hue: 180 (fixed, cyan) │
│ Pattern: 180 + (index × 27.5) │
│ Frame Drag: Agents orbit around a NEUTRAL zone (no Core Color anchor) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Theme: Any │ │
│ │ │ │
│ │ ┌── Agent zones start at 180 (cyan) ──┐ │ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ Agent 1: 207.5 Agent 2: 235.0 Agent 3: 262.5 │ │
│ │ **** **** **** │ │
│ │ (blue) (blue) (violet) │ │
│ │ │ │
│ │ Zones are INDEPENDENT of theme - no Core anchor influence. │ │
│ │ Good for: app-wide agent identification (consistent across themes) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ OKLCH_PRIMARY MODE (Theme-Aware): │
│ ───────────────────────────────── │
│ Base hue: Extracted from theme background + offset │
│ Pattern: bgHue + offset + (index × 27.5) │
│ Frame Drag: Agents ORBIT near the theme's Core Color anchor │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Theme: "orange-pro-ansi" (Core anchor H = 30) │ │
│ │ │ │
│ │ ┌── Agents orbit near Core anchor (H=30) ──┐ │ │
│ │ │ │ │ │
│ │ ▼ ▼ ▼ │ │
│ │ Agent 1: 57.5 Agent 2: 85.0 Agent 3: 112.5 │ │
│ │ **** **** **** │ │
│ │ (orange) (yellow) (green) │ │
│ │ │ │
│ │ Agents are "pulled" toward the theme's gravity center! │ │
│ │ Good for: theme-harmonized agents (feel "part of" the theme) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ GESTALT PRINCIPLE: │
│ ────────────────── │
│ OKLCH_PRIMARY leverages the PROXIMITY principle - agents near the Core │
│ anchor feel like they "belong" to the theme, while OKLCH mode agents are │
│ independent entities that work across any theme. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Generated CSS Output
/* ======================================== */
/* OKLCH Mode: Perceptually Uniform Colors */
/* Frame Drag: Each agent has its own zone */
/* ======================================== */
.agent-color-oklch-1 {
color: oklch(70.00% 0.100 207.50); /* Zone 1: Blue-Cyan */
}
.agent-color-oklch-2 {
color: oklch(70.00% 0.100 235.00); /* Zone 2: Blue */
}
.agent-color-oklch-3 {
color: oklch(70.00% 0.100 262.50); /* Zone 3: Blue-Violet */
}
/* ... up to 30 */
/* OKLCH mode with data attributes (first 30) */
[data-agent-mode="oklch"][data-agent-number="1"] .agent-label {
color: oklch(70.00% 0.100 207.50);
}
[data-agent-mode="oklch"][data-agent-number="2"] .agent-label {
color: oklch(70.00% 0.100 235.00);
}
/* ... up to 30 */
/* OKLCH Primary mode with data attributes (first 20) */
[data-agent-mode="oklch-primary"][data-agent-number="1"] .agent-label {
color: oklch(70.00% 0.100 {theme-dependent}); /* Orbits Core anchor */
}
/* ... up to 20 */
Hue Distribution Visualization
┌─────────────────────────────────────────────────────────────────────────────┐
│ AGENT HUE DISTRIBUTION (First 13 Agents - Frame Drag Zones) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Base Hue: 180 (Cyan) │
│ Golden Angle: 27.5 (Zone width - minimizes Frame Drag interference) │
│ │
│ Agent # Calculation Hue Frame Drag Zone │
│ ─────────────────────────────────────────────────────────────────────── │
│ 1 180 + (1 × 27.5) = 207.5 207.5 Zone 1: Blue-Cyan│
│ 2 180 + (2 × 27.5) = 235.0 235.0 Zone 2: Blue │
│ 3 180 + (3 × 27.5) = 262.5 262.5 Zone 3: Blue-Vio │
│ 4 180 + (4 × 27.5) = 290.0 290.0 Zone 4: Violet │
│ 5 180 + (5 × 27.5) = 317.5 317.5 Zone 5: Magenta │
│ 6 180 + (6 × 27.5) = 345.0 345.0 Zone 6: Pink-Red │
│ 7 180 + (7 × 27.5) = 372.5 → 12.5 12.5 Zone 7: Red-Org │
│ 8 180 + (8 × 27.5) = 400.0 → 40.0 40.0 Zone 8: Orange │
│ 9 180 + (9 × 27.5) = 427.5 → 67.5 67.5 Zone 9: Yellow │
│ 10 180 + (10 × 27.5) = 455.0 → 95.0 95.0 Zone 10: Yel-Grn │
│ 11 180 + (11 × 27.5) = 482.5 → 122.5 122.5 Zone 11: Green │
│ 12 180 + (12 × 27.5) = 510.0 → 150.0 150.0 Zone 12: Grn-Cyn │
│ 13 180 + (13 × 27.5) = 537.5 → 177.5 177.5 Zone 13: Cyan │
│ │
│ COLOR WHEEL VISUALIZATION (Frame Drag Zones): │
│ │
│ 0/360 (Red) │
│ 7* ^ │
│ 6* │ *8 │
│ / │ \ │
│ 5*──────────────┼──────────────*9 │
│ \ │ / │
│ 4* │ *10 │
│ 3* │ *11 │
│ 2* │ *12 │
│ 1* *13 │
│ 180 │
│ (Cyan) │
│ │
│ Each * represents an agent's GRAVITY ZONE (Frame Drag field). │
│ The 27.5° spacing ensures no two agents' fields overlap. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Usage Patterns
┌─────────────────────────────────────────────────────────────────────────────┐
│ AGENT COLOR USAGE PATTERNS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ PATTERN 1: CSS Class (Agents 1-30 for OKLCH) │
│ ──────────────────────────────────────────── │
│ <span class="agent-label agent-color-oklch-5">Agent 5</span> │
│ │
│ Generated CSS: │
│ .agent-color-oklch-5 { color: oklch(70.00% 0.100 317.50); } │
│ │
│ PATTERN 2: Data Attributes │
│ ────────────────────────── │
│ <div data-agent-mode="oklch" data-agent-number="5"> │
│ <span class="agent-label">Agent 5</span> │
│ </div> │
│ │
│ PATTERN 3: Inline Style (Agents > 30) │
│ ───────────────────────────────────── │
│ const style = window.themeColorAutoUnique.getAgentOklchStyle(35, 'oklch');│
│ // Returns: "color: oklch(70.00% 0.100 142.50);" │
│ │
│ CHOOSING THE RIGHT PATTERN: │
│ ─────────────────────────── │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Agent Number Recommendation Reason │ │
│ │ ───────────────────────────────────────────────────────────────── │ │
│ │ 1-20 CSS class Pre-generated, fast │ │
│ │ 21-30 CSS class (OKLCH only) Extended range for OKLCH │ │
│ │ 31+ Inline style Use getAgentOklchStyle() │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
THE CENTER
How Agent Colors Help Humans Parse Information Flow
Connection to Core-Flow:
├── Multiple agents/sessions produce streams of text
├── Without color, humans must READ to identify source
├── With Golden Angle distribution:
│ ├── Agent 1 is ALWAYS blue-cyan (H=207.5)
│ ├── Agent 5 is ALWAYS magenta (H=317.5)
│ └── Pattern is consistent, predictable
└── Human-AI collaboration benefit:
├── "Which AI said this?" → Instant color recognition
├── "Which terminal tab?" → Color-coded before reading
└── Cognitive load reduced: color parses BEFORE text
Quick Reference
┌─────────────────────────────────────────────────────────────────────────────┐
│ AGENT COLOR QUICK REFERENCE (Frame Drag Zones) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ RECOMMENDED MODE: "oklch" (uniform Frame Drag field strength) │
│ │
│ OKLCH FORMULA (Zone Assignment): │
│ ──────────────────────────────── │
│ zone_hue = (180 + index × 27.5) % 360 │
│ lightness = isDark ? 70 : 40 // Equal field strength │
│ chroma = isDark ? 0.10 : 0.12 // Weak individual fields │
│ │
│ FIRST 10 AGENTS (OKLCH with Frame Drag Zones): │
│ ────────────────────────────────────────────── │
│ Agent 1: oklch(70% 0.10 207.5) Zone 1: Blue-Cyan │
│ Agent 2: oklch(70% 0.10 235.0) Zone 2: Blue │
│ Agent 3: oklch(70% 0.10 262.5) Zone 3: Blue-Violet │
│ Agent 4: oklch(70% 0.10 290.0) Zone 4: Violet │
│ Agent 5: oklch(70% 0.10 317.5) Zone 5: Magenta │
│ Agent 6: oklch(70% 0.10 345.0) Zone 6: Pink-Red │
│ Agent 7: oklch(70% 0.10 12.5) Zone 7: Red-Orange (wraps) │
│ Agent 8: oklch(70% 0.10 40.0) Zone 8: Orange │
│ Agent 9: oklch(70% 0.10 67.5) Zone 9: Yellow │
│ Agent 10: oklch(70% 0.10 95.0) Zone 10: Yellow-Green │
│ │
│ GESTALT PRINCIPLES IN ACTION: │
│ ───────────────────────────── │
│ - PROXIMITY: Agents near each other on wheel feel related │
│ - SIMILARITY: Equal L/C makes all agents equally prominent │
│ - COMMON FATE: Golden angle creates orderly progression │
│ - CLOSURE: 13 agents complete the circle, pattern continues │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
File Type Colors
Learn how the Syntax Spectrum provides unique colors for file extensions