🧩 Blueprint

Status: Deep Production (~3,753 LOC Vanilla JS) | Confidence: 95%

🎯 Executive Briefing

Security:
- critical: exposed API key in config.js (P1)
- solution: environment variables and config abstraction
Structure:
- refactor: split massive index.html (1,588 LOC) into component modules (P2)
- solution: extract layout and styling into separate templates
Consistency:
- standardize: consolidate duplicate API configurations in api.js vs index.html (P3)
- solution: single source of truth config pattern
Cleanup:
- remove: purge console debugging statements (P4)

Architecture map:
- index.html: 1,588 LOC monolithic entry point containing 94% of layout
- src/styles/: 1,213 LOC modular CSS containing main.css, themes.css, components.css
- src/scripts/: 952 LOC JavaScript modules containing api.js, tree.js, ui.js, utils.js
- src/scripts/config.js: gitignored API key configuration
Core technologies:
- frontend: vanilla JavaScript (ES6+), D3.js v7, html2canvas, jsPDF
- intelligence: OpenRouter API (Claude 3 Haiku)
- fonts and iconography: Google Fonts, Material Icons
Quality benchmarks:
- organization: 8.5/10 (modular code separation)
- documentation: 9.0/10 (comprehensive guides)
- accessibility: 9.0/10 (keyboard navigation, ARIA states)
- UX flow: 8.5/10 (interactive panning, folding memory)
- performance: 8.0/10 (native ESM, cached assets)
- maintainability: 7.0/10 (large HTML file size debt)
- security: 6.0/10 (exposed credentials)

API key vulnerability (P1):
- location: src/scripts/config.js
- risk: billing abuse, key exposure in source control
- fix: shift to environment variables and configuration wrapper (2 hours)
Monolithic structure (P2):
- location: index.html
- impact: poor scaling, compilation bottlenecks
- fix: extract UI elements to component modules (8 hours)
Configuration duplication (P3):
- location: api.js and index.html
- impact: drift in api endpoints and models
- fix: unify API properties into single configuration module (3 hours)
Production pollution (P4):
- location: various console.log statements
- impact: verbose logs in production environment
- fix: remove console statements (1 hour)

Developer setup:
- task: copy config.js.example to config.js
- task: inject OpenRouter credentials
- task: start local server for ESM support
User interaction flow:
- process: enter topic query -> submit -> API fetches nodes -> D3 renders tree -> explore with keyboard/mouse -> export output
Pain points:
- configuration: manual config setup required
- tooling: absence of build system or hot module reloading
- scale: monolithic index.html limits iteration speed
- dependency: manual CDN asset loading with no bundling

Current architecture:
- dependencies: index.html directly links api.js, tree.js, ui.js, and utils.js
- coupling: tightly bound to global browser window properties
Recommended enhancement:
- config: central config manager to resolve env variables
- rendering: separate D3 visualization component
- panels: unified panel manager for settings, nodes, and debug components
- export: dedicated export module for PDF/PNG/MD generation
- styling: CSS variables dynamically switching themes

Phase 1 (Week 1):
- targets: resolve API key exposure, componentize index.html, unify config settings
Phase 2 (Weeks 2-3):
- targets: enhance vanilla JS modules, improve state management, refine UI/UX
Phase 3 (Month 2):
- targets: real-time multi-user editing, cloud synchronization, pre-built templates

Development stack:
- bundler: none (pure Vanilla ES modules)
- tests: native browser testing, manual QA
- linting: ESLint and Prettier
Security enhancements:
- keys: Dotenv configuration
- limit: Client-side request throttling
- rules: Strict Content Security Policy
- input: Strict HTML/JS input sanitization
KPIs:
- security score: 95%+
- setup time: under 5 minutes
- bundle size: under 500KB