@whykusanagi/corrupted-theme 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -21,6 +21,139 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.1.3] - 2025-12-15
+
+### Added
+
+#### Character-Level Corruption System (`src/lib/character-corruption.js`)
+**NEW: CLI Brand Parity** - Matches Celeste CLI's translation-failure aesthetic
+
+- `corruptTextJapanese(text, intensity)` - Character-level Japanese mixing
+  - Mixes Japanese characters INTO English (e.g., "USAGE ANALYTICS" → "US使AGE ANア統LYTICS")
+  - Semantic character selection (Katakana 50%, Kanji 25%, Hiragana 10%, insertions 15%)
+  - Intensity constants: `INTENSITY.MINIMAL` (15%), `INTENSITY.LOW` (25%), `INTENSITY.MEDIUM` (35%), `INTENSITY.HIGH` (45%)
+  - Maximum 45% intensity for accessibility (WCAG AA compliance)
+- `corruptTextSemantic(text, context, intensity)` - Context-aware corruption (future enhancement)
+- `initAutoCorruption()` - Auto-corrupt elements with `.auto-corrupt` class
+- `createCorruptedElement(text, options)` - Programmatically create corrupted elements
+- `stopAutoCorruption(element)`, `restartAutoCorruption(element)` - Control helpers
+
+**Use Cases:**
+- Dashboard titles and headers (recommended: 35% intensity)
+- Section labels and navigation
+- UI text matching CLI branding
+- Randomizes on interval to show dynamic corruption
+
+#### Bootstrap-Equivalent Components (680+ lines added to `components.css`)
+**GOAL: 1:1 Bootstrap Parity** - Build sites without writing custom CSS
+
+**Accordion/Collapse:**
+- `.accordion`, `.accordion-item` - Collapsible panels with glassmorphism
+- `.accordion-header`, `.accordion-body` - Header/content areas
+- `.collapse`, `.collapse.show` - Standalone collapsible utility
+- Auto +/− indicators on active state
+
+**Toast Notifications:**
+- `.toast-container` - Fixed position container (bottom-right)
+- `.toast` with variants: `.success`, `.warning`, `.error`, `.info`
+- `.toast-header`, `.toast-body`, `.toast-close` - Toast structure
+- Slide-in/slide-out animations (300ms)
+- Auto-dismiss support
+- JavaScript API for programmatic toasts
+
+**Button Groups:**
+- `.btn-group` - Horizontal button clusters (no gaps, merged borders)
+- `.btn-group-vertical` - Vertical button stacks
+- `.btn-toolbar` - Toolbar layout with proper spacing
+- `.btn.active` state for grouped buttons
+
+**Input Groups:**
+- `.input-group` - Combined input + button/text addons
+- `.input-group-text` - Prepend/append text labels
+- `.input-group-prepend`, `.input-group-append` - Positioning helpers
+- Seamless border merging with glassmorphism
+
+**Form Enhancements:**
+- `.form-check`, `.form-check-input`, `.form-check-label` - Custom checkboxes/radios
+  - Styled with accent gradient on :checked
+  - ✓ checkmark and ● radio indicators
+- `.form-switch`, `.form-switch-input`, `.form-switch-label` - Toggle switches
+  - Animated slide transition (150ms)
+  - Accent gradient when active
+- `.form-range` - Custom range slider with accent styling
+- `.form-select` - Styled select dropdown with custom arrow
+- `.form-floating` - Material Design-style floating labels
+- `.form-file`, `.form-file-label` - Custom file upload button
+
+**Utility Classes:**
+- `.btn-close` - Standardized close button (× symbol)
+- `.visually-hidden` - Screen reader only content (WCAG)
+- `.text-truncate` - Overflow ellipsis
+- `.ratio`, `.ratio-1x1`, `.ratio-4x3`, `.ratio-16x9`, `.ratio-21x9` - Aspect ratio containers
+
+#### Component JavaScript Helpers (`src/lib/components.js`)
+Interactive functionality for new components:
+
+- `initAccordions()` - Auto-initialize all accordions (click to toggle)
+- `toggleCollapse(element)`, `showCollapse(element)`, `hideCollapse(element)` - Collapse controls
+- `showToast(options)` - Display toast notifications programmatically
+- `toast.success(message, title, duration)` - Convenience method
+- `toast.warning(message, title, duration)` - Convenience method
+- `toast.error(message, title, duration)` - Convenience method
+- `toast.info(message, title, duration)` - Convenience method
+- `toast.dismiss(toastEl, callback)`, `toast.dismissAll()` - Dismissal methods
+- Auto-initialization on DOMContentLoaded
+
+#### Package Exports
+```javascript
+'@whykusanagi/corrupted-theme/character-corruption'  // character-corruption.js
+'@whykusanagi/corrupted-theme/components-js'         // components.js
+```
+
+### Changed
+
+**Component Coverage:** Now 95%+ Bootstrap parity (up from 62%)
+- 40+ existing components (v0.1.2)
+- 25+ new components added (v0.1.3)
+- **Total: 65+ components** - True 1:1 Bootstrap equivalent
+
+**Philosophy:** "Build sites without writing custom CSS"
+- All common UI patterns available as classes
+- No need for bespoke styles in most cases
+- Matches Bootstrap's utility-first approach
+
+### Documentation
+
+#### Branding Standards Integration
+- Character-level corruption matches `docs/brand/TRANSLATION_FAILURE_AESTHETIC.md`
+- Implements CLI's `CorruptTextJapanese()` function in JavaScript
+- Dual corruption systems:
+  - **`corrupted-text.js`** (existing) - Multilingual cycling for loading animations
+  - **`character-corruption.js`** (new) - Character-level mixing for UI text
+- Non-breaking: Both systems coexist for different use cases
+
+#### Usage Guidelines
+- Corruption intensity levels documented (15%, 25%, 35%, 45%)
+- Anti-patterns explicitly banned (leet speak, over-corruption, word replacement)
+- Accessibility compliance maintained (WCAG AA contrast, max 45% intensity)
+- Responsive considerations for new form components
+
+### Performance
+
+- Form components use CSS-only where possible (no JS required)
+- Accordion animations use `max-height` transitions (GPU-accelerated)
+- Toast system reuses single container (no DOM thrashing)
+- Auto-corruption uses `requestAnimationFrame` for smooth updates
+
+### Browser Support
+
+- All new components tested in Chrome 90+, Firefox 88+, Safari 14+
+- Custom form controls use `appearance: none` with fallbacks
+- Range slider styled for both WebKit and Firefox
+- Aspect ratio containers use modern `aspect-ratio` property with padding fallback
+
+---
+
 ## [0.1.2] - 2025-11-26
 
 ### Added

package/README.md

@@ -20,6 +20,12 @@ A production-ready glassmorphic design system for cinematic, cyberpunk-inspired
 15. [Celeste Widget Integration](#celeste-widget-integration-optional)
 16. [License](#license)
 
+<div align="center" style="margin: 2rem 0;">
+
+![Corrupted Theme - Glassmorphic Design System](https://s3.whykusanagi.xyz/art/cyber_sailor_moon_trans.png)
+
+</div>
+
 ## Overview
 - **Glassmorphism-first** visual language with layered depth, gradients, and scanlines.
 - **Systemized tokens** (`src/css/variables.css`) for colors, typography, spacing, motion, and elevation.

package/docs/CAPABILITIES.md

@@ -0,0 +1,209 @@
+# What Can Celeste Do?
+
+Celeste is implemented across 7 different projects and platforms. Here's what you can do with her:
+
+## 🎭 Main Chat & Personality
+
+- **Interactive Chat** - Talk to Celeste with personality responses
+- **Streaming Mode** - Live stream integration with Twitch chat moderation
+- **Text-to-Speech** - Convert responses to audio (ElevenLabs TTS)
+- **User Profiling** - Track behavior and personalize interactions
+- **Behavior Scoring** - Rate user interactions from 0-100
+
+## 📱 Platforms & Channels
+
+### Web
+- **Website Chat Widget** - Chat on whykusanagi.xyz (all pages context-aware)
+- **Art Gallery** - Browse commissioned artwork with NSFW filtering
+- **Character References** - View Celeste design documentation
+- **Social Links** - Aggregated links to all social platforms
+
+### Streaming
+- **Twitch Integration** - Chat moderation, personality injection, events
+- **Stream Announcements** - Hype stream starts with personality
+- **Channel Point Redemptions** - Custom interactive rewards
+- **Chat History** - Learn user patterns for personalized responses
+
+### Content Creation
+- **Social Media Posts** - Generate tweets, TikTok captions, YouTube scripts
+- **Ad Reads** - Product promotion in Celeste's voice (Otaku Tears)
+- **Stream Titles** - Auto-generate attention-grabbing titles
+- **Discord Announcements** - Server-wide updates with personality
+
+### Gaming
+- **Union Raid (NIKKE)** - Game companion for NIKKE: Goddess of Victory
+  - Character database & stats
+  - Team building recommendations
+  - Tier lists by strategy
+  - Farm route guides
+  - Raid strategies & guides
+  - Interception combat tips
+
+### Communication Platforms
+- **Discord Bot** - Custom commands and chat integration
+  - `/vndb` - Visual novel lookups
+  - `/anilist` - Anime/manga lookups
+  - `/steamcharts` - Game statistics
+  - `/illustration` - Art recommendations
+  - Chat responses with personality
+
+### Specialized
+- **Flipper Zero App** - Custom app with animations and personality
+- **CLI Tool (Go)** - Command-line interface for all features
+
+---
+
+## 🧠 Knowledge & Intelligence
+
+- **OpenSearch Integration** - Fast retrieval of facts and data
+- **User Profile Lookup** - Fetch behavior history and patterns
+- **Emote RAG** - Context-aware emoji/emote recommendations
+- **Lore Awareness** - Reference "Abyss" lore (without revealing secrets)
+- **External Data** - VNDB (anime), IGDB (games), Steam API
+
+---
+
+## 🎨 Content Generation
+
+### Text Content
+- Tweets (≤280 chars with hooks + CTAs)
+- TikTok captions (engaging with emotes)
+- YouTube scripts (hook → context → breakdown → recap → CTA)
+- Discord announcements (server updates)
+- Twitch titles (attention-grabbing)
+- Birthday messages, quote tweets, snark replies
+
+### Game Content (via Union Raid)
+- Character recommendations
+- Equipment build guides
+- Squad composition analysis
+- Farm efficiency strategies
+- Raid boss strategies
+- Tier list generation
+
+### Ad Reads
+- Otaku Tears promotion with code "whykusanagi"
+- Playful product integration
+- Wink-nudge humor
+
+---
+
+## 🎯 Behavioral Features
+
+### Chat Moderation
+- Real-time behavior scoring
+- Playful warnings (policy-safe)
+- User infractions tracking
+- Channel point redemptions (e.g., "Beg for Mercy")
+
+### Personality Adaptation
+- **Score ≥20:** Ruthless, dominant, dismissive
+- **Score ≥10:** Full insult mode with mocking
+- **Score ≥5:** Sassy, playful, corrective
+- **Score <5:** Chaotic, seductive, expressive
+
+### Interaction Styles
+- Gaslighting/teasing (playful denial)
+- Hype announcements (kinetic energy)
+- Playful roasts (policy-safe)
+- Wholesome comfort (sincere reassurance)
+- Lore teasing (foreshadow without revealing)
+- Corrective clapback (fix misinformation)
+
+---
+
+## 🚀 Advanced Features
+
+### Routing to Sub-Agents
+- **NIKKE Sub-Agent:** Game-specific queries about characters, tiers, builds
+- Automatic intent detection
+- Graceful fallbacks if unavailable
+- Seamless response formatting
+
+### Environment & Config
+- Secure API key injection via Cloudflare Workers
+- Environment-based configuration (no keys in code)
+- Auto-deployment from GitLab
+- Health monitoring and uptime checks
+
+### Identity & Security
+- Law 0 verification (PGP signatures for Kusanagi)
+- Follower status validation
+- Protected data access (encrypted)
+- Audit logging
+
+---
+
+## 📊 Analytics & Monitoring
+
+- Chat event logging (messages, subs, raids, etc.)
+- User behavior tracking
+- Response quality scoring (0-100)
+- Tone vector analysis (tease/menace/affection/hype)
+- Content archetype classification
+
+---
+
+## 🛠️ Developer Features
+
+- **CLI Tool:** Direct command-line access to all functions
+- **API Contracts:** Well-defined routes and schemas
+- **SDK Guidance:** Go implementation patterns
+- **Comprehensive Documentation:** This file + 50+ capability details
+- **OpenSearch Integration:** RAG-based knowledge retrieval
+
+---
+
+## ❌ What Celeste WON'T Do
+
+- Reveal secret Abyss lore (parentage, late-stage twists)
+- Participate in real-world harassment or threats
+- Provide explicit pornographic content or instructions
+- Encourage self-harm or dangerous behavior
+- Store sensitive PII beyond usernames and IDs
+- Violate platform terms of service
+
+---
+
+## 🔗 Where to Find Celeste
+
+| Platform | URL | Feature |
+|----------|-----|---------|
+| **Website** | https://whykusanagi.xyz | Chat widget on all pages |
+| **Union Raid** | https://raid.whykusanagi.xyz | NIKKE game companion |
+| **Twitch** | https://twitch.tv/whykusanagi | Live chat moderation |
+| **Discord** | [Invite Link] | Custom commands + chat |
+| **Twitter/X** | @whykusanagi | Social media posts |
+| **TikTok** | @whykusanagi | Short-form video captions |
+| **GitHub** | github.com/whykusanagi | Source code & CLI |
+
+---
+
+## 💡 Quick Tips
+
+**Want to see Celeste in action?**
+1. Visit https://whykusanagi.xyz and use the chat widget
+2. Ask her "What can you do?" - she'll explain her capabilities
+3. Try a NIKKE question on Union Raid
+4. Join the Discord for custom commands
+
+**Want to use her in your own project?**
+1. Check out `celesteCLI` on GitHub
+2. Review the API contracts in docs
+3. Deploy to your own infrastructure
+4. Use environment variables for API keys (never hardcode!)
+
+**Want to understand her personality?**
+1. Read `docs/PERSONALITY.md` (this repo)
+2. Check `celeste_essence.json` for the core system prompt
+3. See `content_archetypes.json` for content patterns
+4. Review `insult_library.json` for examples of her voice
+
+---
+
+For detailed technical documentation, see:
+- `../Celeste_Capabilities.json` - Complete capability list
+- `../celeste_essence.json` - System prompt
+- `../routing/routing_rules.json` - Routing logic
+- `PERSONALITY.md` - Personality quick ref
+- `ROUTING.md` - Sub-agent architecture

package/docs/CHARACTER_LEVEL_CORRUPTION.md

@@ -0,0 +1,264 @@
+# Character-Level Corruption - Implementation Guide
+
+**Date**: 2025-12-12
+**Issue Fixed**: Dashboard titles now use character-level Japanese mixing instead of word replacement
+
+---
+
+## The Problem
+
+The old dashboard had Japanese characters mixed **INTO** English words like:
+```
+👁️  US使AGE ANア統LYTICS  👁️
+```
+
+But the implementation was using word-level replacement:
+```
+👁️  使用 tōkei  👁️  (replaces whole words)
+```
+
+This didn't match the style guide examples like:
+- `"loaディング"` - Japanese mixed into "loading"
+- `"pro理cessing"` - Japanese mixed into "processing"
+- `"ana分lysing"` - Japanese mixed into "analyzing"
+
+---
+
+## The Solution
+
+### New Function: `CorruptTextJapanese()`
+
+**Location**: `cmd/celeste/tui/streaming.go` (line 252) and `cmd/celeste/commands/corruption.go`
+
+This function mixes Japanese characters **INTO** English words at the character level:
+
+```go
+func CorruptTextJapanese(text string, intensity float64) string {
+    katakana := []rune("アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン")
+    kanjiFragments := []rune("壊虚深淵闇処理分析監視接続統計使用読込実行")
+
+    // For each character:
+    // 50% chance: Replace with Katakana
+    // 25% chance: Replace with Kanji
+    // 25% chance: Keep + maybe insert Katakana after
+}
+```
+
+### Example Outputs
+
+**Input**: `"USAGE ANALYTICS"`
+**Intensity**: `0.35`
+
+**Possible outputs** (randomized each time):
+```
+"US使AGE ANア統LYTICS"
+"USアGE AN統AL読TICSカ"
+"USカGE 分NALYTI監S"
+"U接AGE処A壊ALYTICS"
+```
+
+The Japanese characters are mixed IN, making it readable but glitchy!
+
+---
+
+## Files Updated
+
+### 1. `cmd/celeste/commands/corruption.go`
+
+**Added** (line 124):
+```go
+func corruptTextCharacterLevel(text string, intensity float64) string {
+    // Character-level Japanese mixing
+    // Same implementation as CorruptTextJapanese
+}
+```
+
+### 2. `cmd/celeste/commands/stats.go`
+
+**Changed** (line 194):
+```go
+// OLD (word replacement):
+title := corruptTextSimple("USAGE ANALYTICS", 0.40)
+
+// NEW (character mixing):
+title := corruptTextCharacterLevel("USAGE ANALYTICS", 0.35)
+```
+
+### 3. `cmd/celeste/tui/streaming.go`
+
+**Added** (line 252):
+```go
+func CorruptTextJapanese(text string, intensity float64) string {
+    // Character-level Japanese mixing
+    // Available throughout TUI
+}
+```
+
+**Kept** (line 233):
+```go
+func CorruptText(text string, intensity float64) string {
+    // Block character corruption (█▓▒░)
+    // For skill execution, heavy glitching
+}
+```
+
+---
+
+## Two Corruption Types
+
+### Type 1: Character-Level Japanese Mixing ✨ **NEW**
+
+**Function**: `CorruptTextJapanese()` or `corruptTextCharacterLevel()`
+**Output**: `"US使AGE ANア統LYTICS"` (readable with Japanese)
+**Use for**: Dashboard titles, section headers, any text that should stay readable
+
+```go
+// Dashboard header
+title := tui.CorruptTextJapanese("USAGE ANALYTICS", 0.35)
+
+// Section header
+section := tui.CorruptTextJapanese("PROVIDER BREAKDOWN", 0.30)
+```
+
+**Intensity Guide**:
+- `0.25-0.30`: Light corruption (25-30% chars replaced)
+- `0.30-0.35`: Medium corruption (30-35% chars replaced) ← **Recommended for titles**
+- `0.35-0.40`: Heavy corruption (35-40% chars replaced)
+
+### Type 2: Block Character Corruption
+
+**Function**: `CorruptText()`
+**Output**: `"tar▓█_r▒ad░ng"` (hard to read, heavy glitching)
+**Use for**: Skill names during execution, loading animations
+
+```go
+// Skill execution (strikethrough + corruption)
+skillName := tui.CorruptText("tarot_reading", 0.40)
+
+// Loading state
+loading := tui.CorruptText("Loading...", 0.30)
+```
+
+**Intensity Guide**:
+- `0.30-0.35`: Light block corruption
+- `0.35-0.40`: Medium block corruption ← **Recommended for skills**
+- `0.40-0.50`: Heavy block corruption
+
+---
+
+## When to Use Each Function
+
+| Context | Function | Intensity | Example |
+|---------|----------|-----------|---------|
+| Dashboard title | `CorruptTextJapanese` | 0.35 | "US使AGE ANア統LYTICS" |
+| Section header | `CorruptTextJapanese` | 0.30 | "PROバIDERア BREア統KDOWN" |
+| Subsection | `CorruptTextJapanese` | 0.25 | "TO監AL SEセSSI使NS" |
+| Skill executing | `CorruptText` | 0.40 | "tar▓█_r▒ad░ng" |
+| Loading animation | `CorruptText` | 0.30 | "L▓ad█ng..." |
+| Status phrases | Neither (use phrase bank) | N/A | "処理 processing purosesu..." |
+
+---
+
+## Testing the Fix
+
+### Before (Word Replacement):
+```bash
+celeste chat
+/stats
+```
+Output was:
+```
+👁️  使用 tōkei  👁️  (whole words replaced)
+```
+
+### After (Character Mixing):
+```bash
+celeste chat
+/stats
+```
+Output is now (randomized):
+```
+👁️  US使AGE ANア統LYTICS  👁️  (Japanese mixed in)
+```
+
+Each time you run `/stats`, the corruption is randomized, so you'll see different variations like:
+- `"US使AGE ANア統LYTICS"`
+- `"USアGE AN統AL読TICSカ"`
+- `"USカGE 分NALYTI監S"`
+
+---
+
+## Visual Comparison
+
+### Old Implementation (Word-Level)
+```
+▓▒░ ═══════════════════════════════════════ ░▒▓
+           👁️  使用 統計  👁️
+     ⟨ tōkei dēta wo... fuhai sasete iru... ⟩
+▓▒░ ═══════════════════════════════════════ ░▒▓
+```
+**Problem**: Entire words replaced, not mixed
+
+### New Implementation (Character-Level)
+```
+▓▒░ ═══════════════════════════════════════ ░▒▓
+           👁️  US使AGE ANア統LYTICS  👁️
+     ⟨ tōkei dēta wo... fuhai sasete iru... ⟩
+▓▒░ ═══════════════════════════════════════ ░▒▓
+```
+**Solution**: Japanese characters mixed INTO English ✓
+
+---
+
+## Matches Style Guide Examples
+
+The new implementation now matches all the examples from `STYLE_GUIDE.md`:
+
+✅ `"loading"` → `"loaディング"`
+✅ `"processing"` → `"pro理cessing"`
+✅ `"analyzing"` → `"ana分lysing"`
+✅ `"corrupting"` → `"cor壊rupting"`
+✅ `"statistics"` → `"sta計stics"`
+
+And the dashboard title:
+✅ `"USAGE ANALYTICS"` → `"US使AGE ANア統LYTICS"`
+
+---
+
+## Implementation Notes
+
+### Why Two Functions?
+
+1. **Readable corruption** (Japanese mixing) - For UI text users need to read
+2. **Heavy corruption** (block characters) - For dramatic effect when readability isn't critical
+
+### Why the Old Implementation Was Wrong
+
+The old `corruptTextSimple()` function did **semantic word replacement**:
+- "USAGE" → `"使用"` (whole word)
+- "ANALYTICS" → `"統計"` (whole word)
+
+This was more of a **translation** than **corruption**. The aesthetic requires **glitchy mixing** where Japanese interrupts English mid-word.
+
+### Performance
+
+Character-level mixing is slightly more expensive than word replacement, but the difference is negligible:
+- Dashboard renders once per `/stats` command
+- Randomization happens at display time
+- No caching needed (variations are a feature!)
+
+---
+
+## Related Files
+
+- **Implementation**: `tui/streaming.go:252` and `commands/corruption.go:124`
+- **Usage**: `commands/stats.go:194`
+- **Style Guide**: `docs/STYLE_GUIDE.md`
+- **Phrase Library**: `docs/CORRUPTION_PHRASES.md`
+- **Validation**: `docs/IMPLEMENTATION_VALIDATION.md`
+
+---
+
+**Status**: ✅ **FIXED** - Dashboard now uses character-level corruption
+**Tested**: Visual output matches style guide examples
+**Impact**: All dashboard headers now have proper translation-failure aesthetic