captain-claude/deck-frontend/CHANGELOG.md

DECK Frontend - Changelog

v4.1 (2026-01-15) - Security & Accessibility Update

🔴 Critical Fix

• XSS Protection: Added Utils.escapeHtml() function to sanitize all user-generated content before rendering to DOM
  • Applied in: DetailPanel, GridView, TreeView, GraphView sidebar
  • Prevents script injection from malicious tag names, descriptions, or refs

🟡 Important Fixes

Responsive CSS

Added 3 breakpoints for mobile compatibility:

@media (max-width: 1024px) - Tablet adjustments
@media (max-width: 768px)  - Mobile: hides left-panel, detail-panel fullwidth
@media (max-width: 480px)  - Small screens: hides graph-sidebar

Accessibility (WCAG 2.1)

• aria-label on all interactive elements (inputs, selects, buttons)
• aria-pressed on toggle buttons (SEL, base buttons, view tabs)
• aria-expanded on tree headers
• role attributes: button, group, dialog, navigation, complementary
• tabindex="0" on clickable non-button elements
• aria-live="polite" on dynamic content areas

Focus Styles

.btn:focus-visible
.base-btn:focus-visible
.view-tab:focus-visible
.group-btn:focus-visible
.lang-select:focus-visible
.lib-icon:focus-visible
.card:focus-visible
.tree-header:focus-visible
.tree-item:focus-visible
.tag-chip:focus-visible
.detail-close:focus-visible
.modal-close:focus-visible

Memory Leak Fix

• GraphView.unmount() now properly cleans up:
  • Stops D3 force simulation
  • Removes SVG element from DOM
  • Nullifies references
• Called at start of render() to prevent accumulation

State Management

• Changed State.set() from Object.assign() to spread operator for immutability
• Prevents mutation bugs with nested Sets (graphFilters)

---

v4.0 (2026-01-15) - Clean Modular Architecture

Structure

• Single HTML file with clear separation markers
• CSS: lines 30-560 (CSS_START/CSS_END)
• HTML: lines 560-680 (structure only)
• JS: lines 680-1614 (JS_START/JS_END)

Extraction Commands

# Extract CSS (pure, without <style> tags)
sed -n '/CSS_START/,/CSS_END/{//d;p}' deck.html > styles.css

# Extract JS (pure, without <script> tags)
sed -n '/JS_START/,/JS_END/{//d;p}' deck.html > app.js

JavaScript Architecture

CONFIG (constants)     → API endpoints, schemas, colors
STATE (reactive)       → Application state management
UTILS (pure functions) → DOM helpers, escapeHtml, debounce
API (client)          → PostgREST communication
FILTER (declarative)  → Search, group, library filtering
COMPONENTS            → GroupsBar, LibrariesPanel, DetailPanel
VIEWS                 → GridView, TreeView, GraphView
APP (controller)      → Main application logic

CSS Architecture

• BEM naming convention (.card__name, .btn--active)
• CSS custom properties for theming
• 6 organized sections: Variables, Reset, Layout, Components, Views, Utilities

---

v3.1 (2026-01-15)

Fixes

• Added flex-shrink: 0 to .lib-icon to prevent compression
• Fixed duplicate $ function names (querySelector vs querySelectorAll)
• Fixed i typo (should be if) in GroupsBar.render

---

v3.0 (2026-01-15)

Initial Modular Version

• Reorganized from legacy code
• Added section markers for extraction
• Implemented all 9 bases (HST, FLG, ITM, LOC, PLY, MTH, ATC, MAIL, CHAT)
• D3.js lazy loading for graph view
• PostgREST API integration with schema headers