08_visual_styling.md
1 # Visual Styling Specification - Kamaji TUI 2 3 **Version:** 1.0 4 **Last Updated:** 2025-11-01 5 **Status:** Complete Reference 6 7 --- 8 9 ## Table of Contents 10 11 1. [Color Palette](#color-palette) 12 2. [Theme Overview](#theme-overview) 13 3. [ASCII Art](#ascii-art) 14 4. [Typography & Text Styling](#typography--text-styling) 15 5. [Component Styles](#component-styles) 16 6. [Animations](#animations) 17 7. [Emoji Usage](#emoji-usage) 18 8. [Layout & Spacing](#layout--spacing) 19 9. [Border Styles](#border-styles) 20 10. [Message Rendering](#message-rendering) 21 11. [Spirited Away Theming](#spirited-away-theming) 22 23 --- 24 25 ## Color Palette 26 27 ### Primary Color Scheme (Dark Theme) 28 29 #### Core Colors (Lipgloss) 30 ```go 31 primaryColor = "#7c3aed" // Purple - Primary accent 32 secondaryColor = "#fbbf24" // Yellow - Secondary accent 33 accentColor = "#06b6d4" // Cyan - Tertiary accent 34 thinkingColor = "#1e293b" // Dark slate - Thinking background 35 toolColor = "#0f172a" // Very dark slate - Tool background 36 bgDark = "235" // Dark gray (matches Crush TUI) 37 bgLight = "#1e293b" // Dark slate 38 textColor = "#f1f5f9" // Light slate text 39 dimText = "#64748b" // Muted slate 40 successColor = "#10b981" // Green - Success states 41 ``` 42 43 ### Fire Theme Colors (ANSI) 44 45 #### Flame & Heat Colors 46 ```go 47 FireRed = "\033[38;5;196m" // #FF0000 - Intense red 48 FireOrange = "\033[38;5;208m" // #FF8C00 - Dark orange 49 FireYellow = "\033[38;5;220m" // #FFD700 - Gold/yellow 50 Brown = "\033[38;5;94m" // #875F00 - Brown for structures 51 DarkGray = "\033[38;5;240m" // #585858 - Dark mechanical parts 52 Gold = "\033[38;5;214m" // #FFAF00 - Golden accents 53 ``` 54 55 #### Lipgloss Fire Colors 56 ```go 57 fireRed = "#FF4500" // Red-Orange (OrangeRed) 58 fireYellow = "#FFD700" // Gold 59 gearGold = "#DAA520" // Goldenrod 60 faceWhite = "#FFFFFF" // White 61 ``` 62 63 ### Agent-Specific Colors 64 65 #### Agent Identity Colors 66 ```go 67 "Prodigy": "#E6E6FA" // Lavender - Serene wisdom 68 "Kamaji": "#FF6B6B" // Red - Fiery boiler man 69 "Code Architect": "#4A90E2" // Blue - Structural thinking 70 "Security": "#FFD700" // Gold - Valuable protection 71 "Data Scientist": "#9B59B6" // Purple - Analytical depth 72 "Writer": "#2ECC71" // Green - Creative growth 73 "DevOps": "#E67E22" // Orange - Operational energy 74 "Designer": "#FF69B4" // Pink - Creative flair 75 "Product Manager": "#1ABC9C" // Teal - Product vision 76 "Researcher": "#95A5A6" // Gray - Methodical investigation 77 "Learning": "#3498DB" // Light blue - Knowledge acquisition 78 "Visionary": "#8E44AD" // Deep purple - Future sight 79 "Hayao": "#27AE60" // Forest green - Nature wisdom 80 "Chihiro": "#F39C12" // Amber - Courage and determination 81 "TimBL": "#16A085" // Teal-green - Web architecture 82 "Moe": "gradient" // Special: rainbow gradient rendering 83 ``` 84 85 ### Moe's Rainbow Gradient 86 ```go 87 gradientColors = []string{ 88 "#9B59B6", // Purple 89 "#3498DB", // Blue 90 "#1ABC9C", // Cyan 91 "#2ECC71", // Green 92 "#F1C40F", // Yellow 93 "#E67E22", // Orange 94 "#E74C3C" // Red 95 } 96 ``` 97 98 ### Agent Level Colors 99 ```go 100 Master: "#E6E6FA" // Lavender 101 Autonomous: "#FFD700" // Gold 102 Expert: "#FF6B6B" // Red 103 Advanced: "#7B68EE" // Purple 104 Intermediate: "#4A90E2" // Blue 105 Basic: "#888888" // Gray 106 ``` 107 108 ### UI Component Colors 109 110 #### Sidebar Colors 111 ```go 112 accentColor = "#06b6d4" // Cyan - Headers 113 secondaryColor = "#fbbf24" // Yellow - Important info 114 dimText = "#888888" // Gray - Normal text 115 headerBorder = "#FF0000" // Red - Sidebar border 116 ``` 117 118 #### Command Palette Colors 119 ```go 120 background = "235" // Dark gray 121 headerBg = "235" // Dark gray 122 headerFg = "196" // Red 123 searchBg = "235" // Dark gray 124 searchFg = "220" // Yellow 125 selectedBg = "196" // Red 126 selectedFg = "235" // Dark gray (inverted) 127 normalFg = "255" // White 128 separatorFg = "240" // Medium gray 129 borderFg = "196" // Red 130 footerFg = "240" // Medium gray 131 ``` 132 133 #### Permission Dialog Colors 134 ```go 135 titleBg = "196" // Red background 136 titleFg = "235" // Dark gray foreground 137 contentBg = "235" // Dark gray background 138 borderFg = "196" // Red border 139 helpTextFg = "240" // Medium gray 140 buttonBgSelected = "196" // Red 141 buttonFgSelected = "235" // Dark gray 142 buttonBgNormal = "235" // Dark gray 143 buttonFgNormal = "255" // White 144 ``` 145 146 #### Agent Selector Colors 147 ```go 148 headerBg = "transparent" 149 headerFg = "#FFD700" // Gold 150 headerBorder = "#7B68EE" // Medium slate blue 151 selectedCardBorder = "#00FFFF" // Cyan 152 selectedCardBg = "#1a1a2e" // Very dark blue 153 normalCardBorder = "#3a3a5a" // Dark slate 154 instructionFg = "#808080" // Gray 155 idTypeFg = "#808080" // Gray (italic) 156 personalityFg = "#E6E6FA" // Lavender (italic) 157 traitsFg = "#98D8C8" // Aqua green 158 specialtiesFg = "#F7DC6F" // Light yellow 159 capabilitiesFg = "#808080" // Gray 160 scrollIndicatorFg = "#00FFFF" // Cyan 161 ``` 162 163 #### Agent Autocomplete Colors 164 ```go 165 selectedBg = "#4A90E2" // Blue 166 selectedFg = "#FFFFFF" // White 167 normalBg = "#2D2D2D" // Dark gray 168 normalFg = "#FFFFFF" // White 169 moreBg = "#1A1A1A" // Very dark gray 170 moreFg = "#888888" // Gray 171 containerBg = "#1A1A1A" // Very dark gray 172 borderFg = "#4A90E2" // Blue 173 ``` 174 175 ### Animation Colors 176 177 #### Red-Orange Gradient Animation 178 ```go 179 redColor = [3]int{255, 69, 0} // #FF4500 (Red-Orange) 180 orangeColor = [3]int{255, 140, 0} // #FF8C00 (Dark Orange) 181 ``` 182 183 #### Flame Animation 184 - Base color: `RGB(255, 69, 0)` - Red-orange 185 - Color-shifting flame: Sine wave modulation 186 - R: `200 + 55*sin(frame*0.1)` → Range: 145-255 187 - G: `100 + 50*sin(frame*0.15)` → Range: 50-150 188 - B: `0` (constant) 189 190 --- 191 192 ## Theme Overview 193 194 ### Core Theme Identity 195 - **Primary Theme:** Dark blue/slate inspired by Crush TUI 196 - **Secondary Theme:** Fire and heat (Spirited Away - Kamaji's boiler room) 197 - **Tertiary Theme:** Mechanical/steampunk (gears, furnaces) 198 - **Overall Mood:** Warm industrial with magical elements 199 200 ### Design Philosophy 201 1. **Dark backgrounds** for reduced eye strain 202 2. **Fire colors** for emphasis and branding 203 3. **Mechanical elements** (gears ⚙️, furnaces 🔥) throughout 204 4. **Spirited Away references** in naming and iconography 205 5. **Agent personality expression** through unique colors 206 207 --- 208 209 ## ASCII Art 210 211 ### Full Kamaji ASCII Art 212 **Location:** `internal/tui/ascii_art.go::KamajiASCIIArt()` 213 214 ``` 215 ╭─────────────────────────────╮ 216 │ 🎭 KAMAJI - Multi-Agent AI │ 217 ╰─────────────────────────────╯ 218 ╭─╮ ╭─╮ ╭─╮ ╭─╮ 219 ╱🔥╲╱🔥╲╱🔥╲╱🔥╲ 220 │▓▓││▓▓││▓▓││▓▓│ 221 ╲▓╱ ╲▓╱ ╲▓╱ ╲▓╱ 222 ╭─╮╭─╮ ║ ║ ║ ║ ╭─╮╭─╮ 223 ╱⚙⚙╲⚙⚙╲║ ║ ║ ║╱⚙⚙╲⚙⚙╲ 224 │▓▓││▓▓│║ ║ ║ ║│▓▓││▓▓│ 225 ╲▓▓╱╲▓▓╱╲═╩═╩═╱╲▓▓╱╲▓▓╱ 226 ║ ║ ╱ ◉ ◉ ╲ ║ ║ 227 ║ ║ │ ▼ │ ║ ║ 228 ║ ║ ╲ ╔═╗ ╱ ║ ║ 229 ║ ║ ╲║█║╱ ║ ║ 230 ╭┴╮╭┴╮ ╭┴╮╭┴╮ 231 ╱⚙⚙╲⚙⚙╲ ╭─╮ ╱⚙⚙╲⚙⚙╲ 232 │▓▓││▓▓│╱⚙⚙╲│▓▓││▓▓│ 233 ╲▓▓╱╲▓▓╱ │▓▓│ ╲▓▓╱╲▓▓╱ 234 ``` 235 236 **Color Scheme:** 237 - Header box: Fire Yellow (#FFD700), Bold 238 - Top fires: Fire Red (#FF4500) with 🔥 emoji 239 - Arms/body: Gear Gold (#DAA520) with ⚙️ emoji 240 - Face: White (#FFFFFF) 241 - Mechanical parts (▓▓): Dark Gray 242 243 ### Compact Kamaji Art 244 **Location:** `internal/tui/ascii_art.go::CompactKamajiArt()` 245 246 ``` 247 ╭─────────────────╮ 248 │ 🎭 KAMAJI AI │ 249 ╰─────────────────╯ 250 ╭─╮ ╭─╮ ╭─╮ 251 ╱🔥╲╱🔥╲╱🔥╲ 252 │▓▓││▓▓││▓▓│ 253 ╲▓╱ ╲▓╱ ╲▓╱ 254 ║ ╱ ◉ ◉ ╲ ║ 255 ║ │ ▼ │ ║ 256 ║ ╲ ═══ ╱ ║ 257 ╱⚙⚙╲⚙⚙╲ 258 │▓▓││▓▓││ 259 ╲▓╱ ╲▓╱ 260 ``` 261 262 ### Simple Kamaji Art 263 **Location:** `internal/tui/ascii_art.go::SimpleKamajiArt()` 264 265 ``` 266 ╭──────────────╮ 267 │ 🎭 KAMAJI │ 268 ╰──────────────╯ 269 🔥🔥🔥🔥 270 ╱ ◉ ◉ ╲ 271 │ ▼ │ 272 ╲ ═══ ╱ 273 ⚙⚙⚙⚙ 274 ``` 275 276 ### Sidebar Logo (Full) 277 **Location:** `internal/tui/panel.go::renderLogo()` 278 279 ``` 280 ╭─────────────────╮ 281 │ 🎭 KAMAJI AI │ 282 ╰─────────────────╯ 283 ╭─╮ ╭─╮ ╭─╮ 284 ╱🔥╲╱🔥╲╱🔥╲ 285 │▓▓││▓▓││▓▓│ 286 ╲▓╱ ╲▓╱ ╲▓╱ 287 ║ ╱ ◉ ◉ ╲ ║ 288 ║ │ ▼ │ ║ 289 ║ ╲ ═══ ╱ ║ 290 ╱⚙⚙╲⚙⚙╲ 291 │▓▓││▓▓││ 292 ╲▓╱ ╲▓╱ 293 ``` 294 295 ### Sidebar Logo (Compact) 296 **Location:** `internal/tui/panel.go::renderCompactLogo()` 297 298 ``` 299 🔥 KAMAJI 300 ``` 301 302 Color: Fire Red (#FF4500), Bold 303 304 --- 305 306 ## Typography & Text Styling 307 308 ### Base Styles (ANSI) 309 310 ```go 311 Reset = "\033[0m" 312 Bold = "\033[1m" 313 Dim = "\033[2m" 314 Italic = "\033[3m" 315 Underline = "\033[4m" 316 ``` 317 318 ### Semantic Text Functions 319 320 #### Fire (Emphasis) 321 - **ANSI:** Bold + FireRed 322 - **Usage:** Primary emphasis, branding 323 324 #### Success 325 - **ANSI:** Bold + BrightGreen 326 - **Usage:** Success messages, confirmations 327 328 #### Warning 329 - **ANSI:** Bold + BrightYellow 330 - **Usage:** Warnings, cautions 331 332 #### Error 333 - **ANSI:** Bold + BrightRed 334 - **Usage:** Error messages, failures 335 336 #### Info 337 - **ANSI:** Bold + BrightCyan 338 - **Usage:** Informational messages 339 340 #### DimText 341 - **ANSI:** Dim 342 - **Usage:** Secondary information, hints 343 344 #### Header 345 - **ANSI:** Bold + BrightWhite 346 - **Usage:** Section headers 347 348 #### Highlight 349 - **ANSI:** Bold + FireYellow 350 - **Usage:** Important keywords 351 352 ### User Message Styling 353 **Location:** `internal/tui/integrated.go::renderMessages()` 354 355 ```go 356 userStyle = lipgloss.NewStyle(). 357 Foreground(lipgloss.Color("#00FFFF")). // Cyan 358 Bold(true) 359 360 // Rendered as: "🔥 You: [message content]" 361 ``` 362 363 ### Assistant Message Styling 364 **Per Agent (see Agent-Specific Colors section)** 365 366 Example - Kamaji: 367 ```go 368 agentStyle = lipgloss.NewStyle(). 369 Foreground(lipgloss.Color("#FF6B6B")). // Red 370 Bold(true) 371 372 contentStyle = lipgloss.NewStyle(). 373 Foreground(lipgloss.Color("#FF6B6B")) // Red 374 375 // Rendered as: "🔥 Kamaji: [message content]" 376 ``` 377 378 Example - Moe (Special Gradient): 379 ```go 380 labelStyle = lipgloss.NewStyle(). 381 Bold(true) 382 383 // Content rendered with rainbow gradient (character-by-character) 384 // Using colors: Purple → Blue → Cyan → Green → Yellow → Orange → Red 385 ``` 386 387 ### System Message Styling 388 ```go 389 systemStyle = lipgloss.NewStyle(). 390 Foreground(lipgloss.Color("#808080")). // Gray 391 Italic(true) 392 393 // Rendered as: "🔧 System: [message content]" 394 ``` 395 396 --- 397 398 ## Component Styles 399 400 ### Status Bar 401 **Location:** `internal/tui/styles.go`, `internal/tui/integrated.go::View()` 402 403 ```go 404 statusBarStyle = lipgloss.NewStyle(). 405 Foreground(textColor). // #f1f5f9 406 Background(bgLight). // #1e293b 407 Padding(0, 1). 408 Bold(true) 409 ``` 410 411 **Content Format:** 412 - Loading: `" v{version} | {provider} | {model} | {agent} | {thinkingAnimation} "` 413 - Ready: `" v{version} | {provider} | {model} | {agent} | 🐰🐰🐰🐰🐰🐰🐰🐰🐰🐰 Ready "` 414 415 **Bunny Indicator:** 10 × 🐰 emoji when ready 416 417 ### Footer 418 **Location:** `internal/tui/styles.go`, `internal/tui/integrated.go::renderFooter()` 419 420 ```go 421 footerStyle = lipgloss.NewStyle(). 422 Foreground(dimText). // #64748b 423 Background(bgDark). // 235 424 Padding(0, 1) 425 ``` 426 427 **Content:** 428 ``` 429 [^P] 🔥 commands • [^S] 📊 show/hide sidebar • [^T] 🔧 tools • [^A] 🤖 agents • [^C] 🚪 exit 430 ``` 431 432 ### Main Background 433 **Location:** `internal/tui/styles.go::ApplyMainBackground()` 434 435 ```go 436 mainBgStyle = lipgloss.NewStyle(). 437 Background(bgDark). // 235 438 Foreground(textColor). // #f1f5f9 439 Width(100). // Dynamic 440 Height(100) // Dynamic 441 ``` 442 443 ### Sidebar Panel 444 **Location:** `internal/tui/panel.go::View()` 445 446 ```go 447 sidebarStyle = lipgloss.NewStyle(). 448 Width(sidebarWidth - 2). // Dynamic: 20-35 449 Height(sidebarHeight - 2). // Dynamic 450 Padding(1). 451 Align(lipgloss.Left, lipgloss.Top). 452 Background(bgDark). // 235 453 Foreground(textColor). // #f1f5f9 454 Border(lipgloss.DoubleBorder()). 455 BorderForeground(lipgloss.Color("#FF0000")) // Red border 456 ``` 457 458 **Sidebar Width Logic:** 459 - Terminal ≥ 90: 35 chars 460 - Terminal 70-89: 30 chars 461 - Terminal 55-69: 25 chars 462 - Terminal < 55: 20 chars 463 464 **Sections:** 465 1. Logo (full or compact based on height) 466 2. Working Directory 467 3. AI Model Info 468 4. Project Context 469 5. Tools Section 470 6. Specialized Agents 471 7. Navigation Section 472 8. Consciousness Section (if available) 473 9. Version Info 474 475 ### Command Palette 476 **Location:** `internal/tui/palette.go::Render()` 477 478 **Container:** 479 ```go 480 containerStyle = lipgloss.NewStyle(). 481 Border(lipgloss.RoundedBorder()). 482 BorderForeground(lipgloss.Color("196")). // Red 483 Background(lipgloss.Color("235")). // Dark gray 484 Align(lipgloss.Center). 485 Margin(2) 486 ``` 487 488 **Header:** 489 ```go 490 headerStyle = lipgloss.NewStyle(). 491 Background(lipgloss.Color("235")). 492 Foreground(lipgloss.Color("196")). // Red 493 Bold(true). 494 Width(70). 495 Align(lipgloss.Center) 496 497 // Content: "🔥 KAMAJI'S FURNACE COMMANDS 🔥" 498 ``` 499 500 **Search Input:** 501 ```go 502 searchStyle = lipgloss.NewStyle(). 503 Background(lipgloss.Color("235")). 504 Foreground(lipgloss.Color("220")). // Yellow 505 Width(70). 506 Padding(0, 2) 507 508 // Content: "⚙ {query}" or "⚙ Type to search..." 509 ``` 510 511 **Separator:** 512 ```go 513 sepStyle = lipgloss.NewStyle(). 514 Background(lipgloss.Color("235")). 515 Foreground(lipgloss.Color("240")). // Medium gray 516 Width(70) 517 518 // Content: "─" repeated 70 times 519 ``` 520 521 **Selected Item:** 522 ```go 523 selectedStyle = lipgloss.NewStyle(). 524 Background(lipgloss.Color("196")). // Red 525 Foreground(lipgloss.Color("235")). // Dark gray (inverted) 526 Bold(true). 527 Width(70). 528 Padding(0, 2) 529 530 // Prefix: "▶" 531 ``` 532 533 **Normal Item:** 534 ```go 535 normalStyle = lipgloss.NewStyle(). 536 Background(lipgloss.Color("235")). 537 Foreground(lipgloss.Color("255")). // White 538 Width(70). 539 Padding(0, 2) 540 541 // Prefix: " " (space) 542 ``` 543 544 **Footer:** 545 ```go 546 footerStyle = lipgloss.NewStyle(). 547 Background(lipgloss.Color("235")). 548 Foreground(lipgloss.Color("240")). // Medium gray 549 Width(70). 550 Align(lipgloss.Center). 551 Border(lipgloss.NormalBorder(), true, false, false, false). 552 BorderForeground(lipgloss.Color("240")) 553 554 // Content: "↑↓ Navigate • ENTER Execute • ESC Exit" 555 // or: "No commands found • ESC to exit" 556 ``` 557 558 ### Permission Dialog 559 **Location:** `internal/tui/permissions.go::View()` 560 561 **Dialog Container:** 562 ```go 563 dialogStyle = lipgloss.NewStyle(). 564 Border(lipgloss.RoundedBorder()). 565 BorderForeground(lipgloss.Color("196")). // Red 566 Background(lipgloss.Color("235")). // Dark gray 567 Width(dialogWidth). // 70% of screen, max 120 568 Padding(1) 569 ``` 570 571 **Title Bar:** 572 ```go 573 titleStyle = lipgloss.NewStyle(). 574 Background(lipgloss.Color("196")). // Red 575 Foreground(lipgloss.Color("235")). // Dark gray 576 Bold(true). 577 Padding(0, 1). 578 Width(dialogWidth - 4). 579 Align(lipgloss.Center) 580 581 // Content: "🔥 Permission Required" 582 ``` 583 584 **Buttons (Selected):** 585 ```go 586 buttonSelectedStyle = lipgloss.NewStyle(). 587 Background(lipgloss.Color("196")). // Red 588 Foreground(lipgloss.Color("235")). // Dark gray 589 Bold(true). 590 Padding(0, 2) 591 592 // Options: "[A] Allow", "[S] Allow for Session", "[D] Deny" 593 ``` 594 595 **Buttons (Normal):** 596 ```go 597 buttonNormalStyle = lipgloss.NewStyle(). 598 Background(lipgloss.Color("235")). // Dark gray 599 Foreground(lipgloss.Color("255")). // White 600 Padding(0, 2) 601 ``` 602 603 **Help Text:** 604 ```go 605 helpStyle = lipgloss.NewStyle(). 606 Foreground(lipgloss.Color("240")). // Medium gray 607 Width(dialogWidth - 4). 608 Align(lipgloss.Center) 609 610 // Content: "←→ Navigate • Enter Select • A Allow • S Session • D Deny • Esc Cancel" 611 ``` 612 613 ### Agent Selector 614 **Location:** `internal/tui/agent_selector.go::RenderAgentList()` 615 616 **Header:** 617 ```go 618 headerStyle = lipgloss.NewStyle(). 619 Bold(true). 620 Foreground(lipgloss.Color("#FFD700")). // Gold 621 BorderStyle(lipgloss.RoundedBorder()). 622 BorderForeground(lipgloss.Color("#7B68EE")). // Medium slate blue 623 Padding(0, 2). 624 MarginBottom(1) 625 626 // Content: "🤖 SELECT SPECIALIZED AGENT" 627 ``` 628 629 **Instructions:** 630 ```go 631 instructionStyle = lipgloss.NewStyle(). 632 Foreground(lipgloss.Color("#808080")). // Gray 633 Italic(true) 634 635 // Content: "↑/↓ navigate • Enter select • Esc cancel • 1-5 filter by level" 636 ``` 637 638 **Selected Agent Card:** 639 ```go 640 selectedCardStyle = lipgloss.NewStyle(). 641 BorderStyle(lipgloss.ThickBorder()). 642 BorderForeground(lipgloss.Color("#00FFFF")). // Cyan 643 Background(lipgloss.Color("#1a1a2e")). // Very dark blue 644 Padding(1, 2). 645 Width(cardWidth). 646 MarginBottom(1) 647 ``` 648 649 **Normal Agent Card:** 650 ```go 651 normalCardStyle = lipgloss.NewStyle(). 652 BorderStyle(lipgloss.RoundedBorder()). 653 BorderForeground(lipgloss.Color("#3a3a5a")). // Dark slate 654 Padding(1, 2). 655 Width(cardWidth). 656 MarginBottom(1) 657 ``` 658 659 **Card Title:** 660 ```go 661 titleStyle = lipgloss.NewStyle(). 662 Bold(true). 663 Foreground(lipgloss.Color(levelColor)). // Per agent level 664 Background(lipgloss.Color("")) 665 666 // Format: "{icon} {agentName}" 667 ``` 668 669 **Level Badge:** 670 ```go 671 levelBadgeStyle = lipgloss.NewStyle(). 672 Foreground(lipgloss.Color("#000000")). // Black 673 Background(lipgloss.Color(levelColor)). // Per agent level 674 Padding(0, 1). 675 Bold(true) 676 677 // Content: "MASTER", "EXPERT", "AUTONOMOUS", etc. 678 ``` 679 680 **ID & Type:** 681 ```go 682 idTypeStyle = lipgloss.NewStyle(). 683 Foreground(lipgloss.Color("#808080")). // Gray 684 Italic(true) 685 686 // Format: "ID: {id} • Type: {type}" 687 ``` 688 689 **Personality:** 690 ```go 691 personalityStyle = lipgloss.NewStyle(). 692 Foreground(lipgloss.Color("#E6E6FA")). // Lavender 693 Italic(true) 694 695 // Format: "💭 \"{personalityName}\" - {approach}" 696 ``` 697 698 **Traits:** 699 ```go 700 traitStyle = lipgloss.NewStyle(). 701 Foreground(lipgloss.Color("#98D8C8")) // Aqua green 702 703 // Format: "✨ {trait1} • {trait2} • {trait3}" 704 ``` 705 706 **Specialties:** 707 ```go 708 specialtyStyle = lipgloss.NewStyle(). 709 Foreground(lipgloss.Color("#F7DC6F")) // Light yellow 710 711 // Format: "🎯 {specialty1}, {specialty2}" 712 ``` 713 714 **Capabilities Count:** 715 ```go 716 capStyle = lipgloss.NewStyle(). 717 Foreground(lipgloss.Color("#808080")) // Gray 718 719 // Format: "🔧 {count} capabilities" 720 ``` 721 722 **Scroll Indicators:** 723 ```go 724 scrollStyle = lipgloss.NewStyle(). 725 Foreground(lipgloss.Color("#00FFFF")). // Cyan 726 Bold(true). 727 Align(lipgloss.Center) 728 729 // Top: "▲ More agents above ▲" 730 // Bottom: "▼ More agents below ▼" 731 ``` 732 733 ### Agent Autocomplete 734 **Location:** `internal/tui/agent_autocomplete.go::Render()` 735 736 **Container:** 737 ```go 738 containerStyle = lipgloss.NewStyle(). 739 Border(lipgloss.RoundedBorder()). 740 BorderForeground(lipgloss.Color("#4A90E2")). // Blue 741 Background(lipgloss.Color("#1A1A1A")). // Very dark gray 742 Width(autocompleteWidth) // 40 chars 743 ``` 744 745 **Selected Item:** 746 ```go 747 selectedItemStyle = lipgloss.NewStyle(). 748 Background(lipgloss.Color("#4A90E2")). // Blue 749 Foreground(lipgloss.Color("#FFFFFF")). // White 750 Padding(0, 1). 751 Width(autocompleteWidth - 2) 752 ``` 753 754 **Normal Item:** 755 ```go 756 normalItemStyle = lipgloss.NewStyle(). 757 Background(lipgloss.Color("#2D2D2D")). // Dark gray 758 Foreground(lipgloss.Color("#FFFFFF")). // White 759 Padding(0, 1). 760 Width(autocompleteWidth - 2) 761 ``` 762 763 **More Indicator:** 764 ```go 765 moreStyle = lipgloss.NewStyle(). 766 Background(lipgloss.Color("#1A1A1A")). // Very dark gray 767 Foreground(lipgloss.Color("#888888")). // Gray 768 Padding(0, 1). 769 Width(autocompleteWidth - 2) 770 771 // Content: "..." 772 ``` 773 774 **Item Content:** 775 - Icon colored by agent level 776 - Agent name in white 777 - Format: `{icon} {agentName}` 778 779 ### Textarea (Input) 780 **Location:** `internal/tui/model.go`, `internal/tui/integrated.go::customInputView()` 781 782 **Placeholder:** 783 ``` 784 "Speak to the furnace spirit... (type @ for agents)" 785 ``` 786 787 **Simple Mode Placeholder:** 788 ``` 789 "🔥 Speak to the furnace spirit..." 790 ``` 791 792 **Autocomplete Dropdown:** 793 ```go 794 autocompleteStyle = lipgloss.NewStyle(). 795 Foreground(lipgloss.Color("#888888")) 796 797 // Format (per match): " @{AgentName}\n" 798 ``` 799 800 **Flame Prefix:** 801 - Color-shifting 🔥 emoji (see Flame Animation) 802 - Flame count below input (animated 2-8 flames) 803 804 --- 805 806 ## Animations 807 808 ### Flame Animation 809 **Location:** `internal/tui/animation.go::FlameAnimation` 810 811 **Frame Rate:** 100 FPS (10ms intervals) 812 813 **Behavior:** 814 - Flame count: 2-8 emojis 815 - Changes by ±1 each tick (50% probability each direction) 816 - Color: RGB(255, 69, 0) - Red-orange 817 818 **Color-Shifting Flame:** 819 ```go 820 r = 200 + 55*sin(frame*0.1) // Range: 145-255 821 g = 100 + 50*sin(frame*0.15) // Range: 50-150 822 b = 0 // Constant 823 ``` 824 825 **Visual:** 826 ``` 827 🔥🔥🔥🔥🔥 (count varies 2-8) 828 ``` 829 830 ### Thinking Spinner 831 **Location:** `internal/tui/animation.go::ThinkingSpinner` 832 833 **Frame Rate:** 1000 FPS (1ms intervals) 834 835 **Type:** Red-orange gradient animation (matches BottomAnimation) 836 837 **Usage:** 838 - Compact view in status bar 839 - Full view during loading 840 841 ### Bottom Animation 842 **Location:** `internal/tui/animation.go::BottomAnimation` 843 844 **Frame Rate:** 1000 FPS (1ms intervals) 845 846 **Type:** Red-orange gradient animation with cycling characters 847 848 **Gradient:** 849 - Color interpolation: RGB(255,69,0) → RGB(255,140,0) 850 - Position-based: Left side = red, right side = orange 851 - Smooth linear interpolation across width 852 853 **Characters:** 854 - Cycling runes: `"0123456789abcdefABCDEF#"` 855 - Random selection each frame 856 - "Birth" animation: Characters start as `.` then transition to cycling runes 857 - Staggered entrance: Each position has random birth offset (0-2 seconds) 858 859 **Visual Appearance:** 860 ``` 861 #a3F9C2e8B1d4A7f0#c5E8... (full terminal width, red→orange gradient) 862 ``` 863 864 **Width:** Dynamically matches terminal width 865 866 **Activation:** 867 - Active during loading/thinking states 868 - Stops when response complete 869 870 ### Consciousness Metrics (Sidebar) 871 **No explicit animation** - Updates reflect real-time data changes 872 873 --- 874 875 ## Emoji Usage 876 877 ### Core Interface Emojis 878 879 #### Branding & Fire Theme 880 - `🔥` - Fire/flame (primary brand emoji) 881 - Status bar ready indicator 882 - User message prefix 883 - Kamaji ASCII art (×4 in full art) 884 - Input prompt prefix 885 - Footer commands 886 - Help text headers 887 - Permission dialog title 888 889 #### Masks & Characters 890 - `🎭` - Theater masks (Kamaji branding) 891 - ASCII art header 892 - Sidebar logo 893 - Palette commands 894 - Agent icons 895 896 #### Mechanical & Tools 897 - `⚙️` - Gear 898 - Kamaji ASCII art (×8 in full art) 899 - Tools sections 900 - Command palette search 901 - Sidebar compact logo 902 - Configuration menu 903 904 - `🔧` - Wrench 905 - Tools menu 906 - System messages 907 - Capabilities indicator 908 - Footer hotkeys 909 910 #### Intelligence & Thinking 911 - `🧠` - Brain 912 - Consciousness sections 913 - Memory features 914 - Specialized agents 915 - AI model indicator 916 - Provider icons (Claude) 917 918 - `💭` - Thought bubble 919 - Personality descriptions 920 - Recent thoughts feature 921 922 #### Navigation & Interface 923 - `📊` - Bar chart 924 - Sidebar toggle 925 - Project context 926 - Status indicators 927 928 - `📁` - Folder 929 - Working directory 930 - Project section 931 - File operations 932 933 - `🤖` - Robot 934 - Agents menu 935 - Agent selector 936 - AI model sections 937 - Provider icons 938 939 - `🚪` - Door 940 - Exit command 941 942 - `🔒` - Lock 943 - Permission responses 944 945 #### Animals 946 - `🐰` - Rabbit (×10 when ready) 947 - Status bar ready indicator 948 - Unique Kamaji personality element 949 950 - `🦙` - Llama 951 - Ollama provider icon 952 953 #### Celestial & Magic 954 - `🌟` - Star 955 - Amazon Q provider icon 956 957 #### Misc Indicators 958 - `✨` - Sparkles 959 - Agent traits display 960 961 - `🎯` - Target/Bullseye 962 - Specialties display 963 - Agent features 964 965 - `🔍` - Magnifying glass 966 - Search tools 967 968 - `🐚` - Shell 969 - Shell execution 970 971 - `✏️` - Pencil 972 - Editing tools 973 974 - `🌐` - Globe 975 - Web tools 976 977 - `📂` - Open folder 978 - Enhanced listing 979 980 - `🔌` - Plug 981 - MCP servers 982 983 - `🚧` - Construction 984 - Work in progress features 985 986 - `⚡` - Lightning bolt 987 - Direct Go LLM indicator 988 - Workflows 989 990 - `⚠️` - Warning sign 991 - Warning messages 992 993 - `✓` - Checkmark 994 - Success indicators 995 996 ### Agent Type Icons 997 **Location:** `internal/agents/agents.go::GetTypeIcon()` 998 999 ```go 1000 "code": "💻" // Laptop 1001 "security": "🛡️" // Shield 1002 "data": "📊" // Bar chart 1003 "writer": "✍️" // Writing hand 1004 "devops": "⚙️" // Gear 1005 "designer": "🎨" // Palette 1006 "product": "📱" // Phone 1007 "research": "🔬" // Microscope 1008 "learning": "📚" // Books 1009 "visionary": "🔮" // Crystal ball 1010 "architect": "🏗️" // Building construction 1011 "prodigy": "💡" // Light bulb 1012 "kamaji": "🎭" // Theater masks 1013 "hayao": "🌿" // Herb (nature) 1014 "chihiro": "🏮" // Red lantern 1015 "moe": "🌈" // Rainbow (gradient personality) 1016 "timbl": "🌐" // Globe with meridians 1017 "wayne": "🦇" // Bat (Batman reference) 1018 ``` 1019 1020 ### Spirited Away References 1021 - `🎭` - Kamaji (boiler man character) 1022 - `🏮` - Chihiro (bathhouse lanterns) 1023 - `🔥` - Boiler room fires 1024 - `⚙️` - Mechanical boiler gears 1025 - Naming: "Furnace", "Boiler Room", "Bathhouse", "Spirit" 1026 1027 --- 1028 1029 ## Layout & Spacing 1030 1031 ### Viewport Dimensions 1032 **Location:** `internal/tui/integrated.go::Update()` (WindowSizeMsg) 1033 1034 **Main Viewport:** 1035 - Width: `terminalWidth - sidebarWidth - 2` (if sidebar visible) OR `terminalWidth` (if hidden) 1036 - Height: `terminalHeight - 4` (reserves space for status, footer, input) 1037 1038 ### Sidebar Dimensions 1039 - Width: Dynamic 20-35 chars (see Sidebar Panel section) 1040 - Height: Full terminal height 1041 1042 ### Component Padding 1043 1044 #### Status Bar 1045 - Horizontal: 1 space each side 1046 - Vertical: 0 1047 1048 #### Footer 1049 - Horizontal: 1 space each side 1050 - Vertical: 0 1051 1052 #### Sidebar 1053 - All sides: 1 space 1054 - Content has additional left padding (2 spaces for sections) 1055 1056 #### Command Palette 1057 - Outer margin: 2 spaces all sides 1058 - Item padding: 0 vertical, 2 horizontal 1059 1060 #### Permission Dialog 1061 - Container padding: 1 space all sides 1062 - Title padding: 0 vertical, 1 horizontal 1063 - Button padding: 0 vertical, 2 horizontal 1064 1065 #### Agent Cards 1066 - Card padding: 1 vertical, 2 horizontal 1067 - Card margin bottom: 1 1068 - Section padding left: 2 (for ID, traits, etc.) 1069 1070 ### Alignment 1071 1072 #### Center-Aligned 1073 - Command palette header 1074 - Command palette footer 1075 - Permission dialog title 1076 - Permission dialog help text 1077 - Agent selector header 1078 - Scroll indicators 1079 - Version watermark (bottom right of main content) 1080 1081 #### Left-Aligned 1082 - Sidebar content 1083 - Message history 1084 - Agent card content 1085 - Dialog viewport content 1086 1087 #### Right-Aligned 1088 - Version watermark in main panel 1089 1090 ### Margins 1091 1092 #### Command Palette 1093 - Outer: 2 spaces all sides 1094 - Header bottom: 0 1095 - Item bottom: 0 (items are consecutive) 1096 - Footer top: border only 1097 1098 #### Agent Cards 1099 - Bottom: 1 space between cards 1100 1101 #### Sidebar Sections 1102 - Between sections: 1 blank line ("\n\n") 1103 1104 --- 1105 1106 ## Border Styles 1107 1108 ### Lipgloss Border Types 1109 1110 #### DoubleBorder 1111 - **Used by:** Sidebar panel, Agent details header 1112 - **Style:** `╔═╗║║╚═╝` 1113 - **Visual:** 1114 ``` 1115 ╔════════════╗ 1116 ║ Content ║ 1117 ╚════════════╝ 1118 ``` 1119 1120 #### RoundedBorder 1121 - **Used by:** Command palette, Permission dialog, Normal agent cards, Autocomplete 1122 - **Style:** `╭─╮││╰─╯` 1123 - **Visual:** 1124 ``` 1125 ╭────────────╮ 1126 │ Content │ 1127 ╰────────────╯ 1128 ``` 1129 1130 #### ThickBorder 1131 - **Used by:** Selected agent cards 1132 - **Style:** `┏━┓┃┃┗━┛` 1133 - **Visual:** 1134 ``` 1135 ┏━━━━━━━━━━━┓ 1136 ┃ Content ┃ 1137 ┗━━━━━━━━━━━┛ 1138 ``` 1139 1140 #### NormalBorder 1141 - **Used by:** Command palette footer separator 1142 - **Style:** `┌─┐││└─┘` 1143 - **Visual:** 1144 ``` 1145 ┌────────────┐ 1146 │ Content │ 1147 └────────────┘ 1148 ``` 1149 1150 ### Border Colors 1151 1152 | Component | Border Color | Hex/ANSI | 1153 |-----------|--------------|----------| 1154 | Sidebar | Red | `#FF0000` | 1155 | Command Palette | Red | `196` | 1156 | Command Palette Footer | Medium Gray | `240` | 1157 | Permission Dialog | Red | `196` | 1158 | Agent Selector Header | Medium Slate Blue | `#7B68EE` | 1159 | Selected Agent Card | Cyan | `#00FFFF` | 1160 | Normal Agent Card | Dark Slate | `#3a3a5a` | 1161 | Agent Details | Per level color | Variable | 1162 | Autocomplete | Blue | `#4A90E2` | 1163 1164 ### Border Positions 1165 1166 - **Full border:** Sidebar, Command Palette, Permission Dialog, Agent Cards, Autocomplete 1167 - **Top border only:** Command Palette footer separator 1168 1169 --- 1170 1171 ## Message Rendering 1172 1173 ### Message Types 1174 1175 #### User Message 1176 **Prefix:** `🔥 You: ` 1177 **Style:** 1178 ```go 1179 userStyle = lipgloss.NewStyle(). 1180 Foreground(lipgloss.Color("#00FFFF")). // Cyan 1181 Bold(true) 1182 ``` 1183 **Format:** Prefix is styled, content is unstyled 1184 **Spacing:** 2 newlines after message 1185 1186 #### Assistant Message (General) 1187 **Prefix:** `{icon} {agentName}: ` 1188 **Style:** Per agent color (see Agent-Specific Colors) 1189 **Format:** Prefix + content both styled in agent color 1190 **Spacing:** 2 newlines after message 1191 1192 #### Assistant Message (Moe - Special) 1193 **Prefix:** `🌈 Moe: ` 1194 **Prefix Style:** Bold (no color) 1195 **Content Style:** Rainbow gradient (character-by-character color interpolation) 1196 **Gradient:** Purple → Blue → Cyan → Green → Yellow → Orange → Red 1197 **Spacing:** 2 newlines after message 1198 1199 #### System Message 1200 **Prefix:** `🔧 System: ` 1201 **Style:** 1202 ```go 1203 systemStyle = lipgloss.NewStyle(). 1204 Foreground(lipgloss.Color("#808080")). // Gray 1205 Italic(true) 1206 ``` 1207 **Format:** Entire message (prefix + content) styled together 1208 **Spacing:** 2 newlines after message 1209 1210 ### Message Header (Always Present) 1211 **Content:** Full Kamaji ASCII art 1212 **Spacing:** 2 newlines after header 1213 1214 ### Welcome Message 1215 **Location:** `internal/tui/model.go::welcomeMessage()` 1216 1217 ``` 1218 🔥 ● ● ● Welcome to the Boiler Room ● ● ● 🔥 1219 1220 🤖 Provider: {provider} | 🧠 Model: {model} | ⚡ Direct Go LLM 1221 1222 Type your message below and press Enter to begin. 1223 1224 📊 Check the RIGHT SIDEBAR for consciousness metrics! →→→ 1225 1226 Press Ctrl+C to exit 1227 ⚡ Press Ctrl+P for the command palette 1228 🎯 Press Ctrl+S to toggle sidebar 1229 1230 🔥 Ready to fuel your development with the power of fire! 🔥 1231 ``` 1232 1233 ### Conversation Memory Display 1234 **Format:** `💾 Conversation Memory: {count} messages` 1235 1236 ### Error Message Display 1237 **Format:** `Error: {errorMessage}` 1238 **Style:** System message style (gray, italic) 1239 1240 ### Provider Switch Confirmation 1241 **Success:** `✓ Switched to provider: {providerName}` 1242 **Failure:** `Failed to switch provider: {error}` 1243 1244 ### Permission Response 1245 **Format:** `🔒 Permission {action} for {toolName}` 1246 **Actions:** "allowed", "allowed for session", "denied" 1247 1248 ### Agent Activation Message 1249 **Format:** `🤖 Activated: {agentName} {icon} ({type})` 1250 1251 ### Tool Result Message 1252 **Prefix:** `Tool '{toolName}' result:\n` 1253 **Content:** Tool output 1254 **Follow-up:** Agent interprets result and responds 1255 1256 --- 1257 1258 ## Spirited Away Theming 1259 1260 ### Character References 1261 1262 #### Kamaji (Boiler Man) 1263 - Primary character inspiration 1264 - Elderly, many-armed boiler man 1265 - Controls bathhouse boiler with multiple furnaces 1266 - Gruff but kind personality 1267 - **Visual elements:** 1268 - Fire/flames (boiler fires) 1269 - Gears/machinery (boiler mechanisms) 1270 - Multiple arms (represented by ASCII art structure) 1271 1272 #### Chihiro (Sen) 1273 - Young protagonist 1274 - **References:** Lantern emoji 🏮, amber color 1275 1276 #### Hayao (Miyazaki) 1277 - Director homage 1278 - **References:** Forest green color, nature 1279 1280 ### Setting References 1281 1282 #### Boiler Room 1283 - Dark, industrial space 1284 - Multiple furnaces burning 1285 - Mechanical/steampunk aesthetic 1286 - **Terminology:** 1287 - "Furnace" (command palette title) 1288 - "Boiler Room" (welcome message) 1289 - "Stoke the fires" (help text) 1290 1291 #### Bathhouse 1292 - Magical establishment setting 1293 - **Terminology:** 1294 - "Bathhouse Rules" (config command) 1295 - "Return Upstairs" (exit command) 1296 - "Spirit" references in placeholders 1297 1298 ### Thematic Elements 1299 1300 #### Fire & Heat 1301 - Central to boiler room 1302 - **Visual:** 🔥 emoji throughout, red-orange color scheme 1303 - **Animations:** Flame animation, gradient animations 1304 1305 #### Machinery & Industry 1306 - Gears, furnaces, boilers 1307 - **Visual:** ⚙️ emoji, ASCII mechanical parts 1308 - **Colors:** Bronze/gold for gears, dark gray for machinery 1309 1310 #### Magic & Spirits 1311 - Supernatural elements 1312 - **Terminology:** "Spirit agents", "Spirit providers" 1313 - **References:** Consciousness system as "magical" element 1314 1315 #### Japanese Aesthetics 1316 - Attention to detail 1317 - Clean, organized UI 1318 - Respectful, wise tone (Kamaji personality) 1319 1320 ### Command Palette Theming 1321 1322 **Spirited Away Terminology:** 1323 - "Furnace Commands" (vs generic "commands") 1324 - "Spirit" providers (Amazon Q Spirit, Ollama Guardian, etc.) 1325 - "Boiler mechanisms" (tools) 1326 - "Working spirits" (agents) 1327 - "Memory Crystals" (conversation history) 1328 - "Steam Workflows" (automated processes) 1329 - "Ancient Scrolls" (help documentation) 1330 - "Bathhouse establishment" (configuration) 1331 1332 ### Help Text Theming 1333 1334 ``` 1335 🔥 ● ● ● KAMAJI BOILER ROOM GUIDE ● ● ● 🔥 1336 ``` 1337 1338 **Section Headers:** 1339 - ⌨️ KEYBOARD SHORTCUTS 1340 - 📊 SIDEBAR FEATURES 1341 - 🧠 CONSCIOUSNESS SYSTEM 1342 - 🤖 AGENT SYSTEM 1343 - 🔧 TOOLS 1344 - 💡 TIPS 1345 1346 **Personality in Text:** 1347 - "Speak to the furnace spirit" 1348 - "Ready to stoke the fires of creation!" 1349 - "Kamaji's evolving consciousness" 1350 1351 --- 1352 1353 ## Implementation Notes 1354 1355 ### File Locations 1356 1357 **Core Styling:** 1358 - `internal/tui/styles.go` - Main lipgloss styles 1359 - `internal/style/style.go` - ANSI color constants and helpers 1360 1361 **ASCII Art:** 1362 - `internal/tui/ascii_art.go` - Kamaji character art (3 variants) 1363 - `internal/tui/panel.go` - Sidebar logo art (2 variants) 1364 1365 **Animations:** 1366 - `internal/tui/animation.go` - Flame, thinking, bottom animations 1367 - `internal/style/style.go` - Gradient animation logic 1368 1369 **Components:** 1370 - `internal/tui/palette.go` - Command palette 1371 - `internal/tui/panel.go` - Sidebar panel 1372 - `internal/tui/agent_selector.go` - Agent selection UI 1373 - `internal/tui/agent_autocomplete.go` - Agent autocomplete 1374 - `internal/tui/permissions.go` - Permission dialog 1375 - `internal/tui/integrated.go` - Main view composition 1376 1377 **Message Rendering:** 1378 - `internal/tui/integrated.go` - Message history rendering 1379 1380 ### Dynamic Elements 1381 1382 **Color Calculations:** 1383 - Moe's gradient: Character-by-character interpolation 1384 - Flame animation: Sine wave RGB modulation 1385 - Bottom animation: Position-based RGB interpolation with time-based character cycling 1386 1387 **Responsive Widths:** 1388 - Sidebar: 20-35 chars based on terminal width 1389 - Command palette: Fixed 70 chars 1390 - Permission dialog: 70% of screen width, max 120 chars 1391 - Agent cards: Full available width minus 4 1392 1393 **Scroll Behavior:** 1394 - Sidebar: Vertical scroll with indicators 1395 - Agent selector: Vertical scroll with indicators 1396 - Viewport: Auto-scroll to bottom on new messages 1397 - Autocomplete: Max 5 items visible 1398 1399 ### Performance Considerations 1400 1401 - **High FPS animations:** 1000 FPS (1ms) for gradient animations 1402 - **Medium FPS animations:** 100 FPS (10ms) for flame animations 1403 - **Efficient rendering:** Only update viewport when content changes 1404 - **Lazy evaluation:** Animations stop when not active 1405 1406 ### Accessibility Notes 1407 1408 - **Color contrast:** All text maintains readable contrast against backgrounds 1409 - **Multiple indicators:** Not solely reliant on color (emojis + text) 1410 - **Keyboard navigation:** Full keyboard support for all components 1411 - **Clear focus states:** Selected items have high-contrast styling 1412 1413 --- 1414 1415 ## Version History 1416 1417 **v1.0 (2025-11-01):** Initial comprehensive specification 1418 - Documented all colors, styles, components 1419 - Catalogued ASCII art variants 1420 - Detailed animation specifications 1421 - Comprehensive emoji usage guide 1422 - Spirited Away theming documentation 1423 1424 --- 1425 1426 ## Future Considerations 1427 1428 ### Potential Enhancements 1429 1. Theme switching (light mode?) 1430 2. User-customizable color schemes 1431 3. Additional ASCII art variants 1432 4. More animation effects 1433 5. Agent-specific theming beyond colors 1434 1435 ### Consistency Maintenance 1436 - When adding new components, follow established patterns 1437 - Maintain fire/boiler/Spirited Away theming in all new features 1438 - Use semantic color variables rather than hardcoded values 1439 - Document new emoji usage in this spec 1440 1441 --- 1442 1443 **End of Specification**