refactor: modularize app.js into ES module architecture #437

Closed
perplexity wants to merge 106 commits from claude/modularization-phase-1 into main
Member

Summary

Split the monolithic 5393-line app.js into 32 focused ES modules under modules/ with a thin ~330-line orchestrator. No bundler required — runs in-browser via the existing import map in index.html.

Module Architecture

Layer Modules Purpose
core/ scene, ticker, state, theme, audio Scene setup, animation loop, shared data bus, styling, Web Audio
data/ gitea, weather, bitcoin, loaders API polling & data fetching
terrain/ stars, clouds, island Star field, cloud shader, glass platform & island
effects/ matrix-rain, energy-beam, lightning, shockwave, rune-ring, gravity-zones Visual effects
panels/ heatmap, sigil, sovereignty, dual-brain, batcave, earth, agent-board, lora-panel Information panels
portals/ portal-system, commit-banners Portal warp system & floating banners
narrative/ bookshelves, oath, chat Story/interaction modules
utils/ perlin Procedural noise

Key Design Decisions

  • state.js data bus: All data modules write to a shared reactive state object; visual modules read from it
  • ticker.js subscriber pattern: Single RAF loop — modules subscribe rather than calling requestAnimationFrame directly
  • scene.js owns post-processing: EffectComposer, BokehPass, and WarpShader live in scene.js since they're tightly coupled with renderer setup
  • No new dependencies: Same THREE.js via import map, no bundler, no build step
  • ws-client.js import preserved: Line 57 of new app.js imports ws-client.js unchanged

Data Integrity Audit

Data Source Module Status
Gitea commits API data/gitea.js Preserved — same endpoints, tokens, polling intervals
Gitea agent status data/gitea.jspanels/agent-board.js Preserved — 5-min cache, same rendering
Gitea closed PRs data/gitea.jsnarrative/bookshelves.js Preserved
Open-Meteo weather data/weather.js Preserved — rain/snow particle systems intact
Blockstream Bitcoin data/bitcoin.js Preserved — 60s polling, star pulse on new block
sovereignty-status.json data/loaders.jspanels/sovereignty.js Preserved
portals.json portals/portal-system.js Preserved — health checks, warp trigger
SOUL.md narrative/oath.js Preserved
WebSocket (Hermes) ws-client.js (unchanged) Preserved
Heatmap zones data/gitea.js (HEATMAP_ZONES) Preserved — same 3 zones, same author regex

Test Plan

  • node --check app.js passes (verified)
  • node --check passes on all 32 module files (verified)
  • Page loads without console errors
  • Matrix rain canvas renders behind 3D scene
  • Star field and constellation lines visible and rotating
  • Glass platform and floating island render correctly
  • Sovereignty meter displays score arc
  • Tab toggles overview mode (bird's-eye)
  • P toggles photo mode with orbit controls
  • [ ] adjusts focus distance in photo mode
  • Double-click zooms to object
  • Typing 'sovereignty' triggers gold star flash
  • Portals load from portals.json, health checks run
  • Walking into portal triggers warp shader
  • Audio toggle starts/stops ambient soundtrack
  • Commit banners float and cycle
  • Agent board shows agent status panels
  • Bookshelves display merged PRs as books
  • O key opens oath reading overlay
  • L key starts timelapse replay
  • Chat events trigger speech bubbles
  • Weather particles (rain/snow) render when appropriate
  • Energy beam intensity tethered to active agent count
  • Lightning crystals float and arc
  • Rune ring orbits with Elder Futhark glyphs
  • Gravity zones have rising particles
  • Heatmap floor shows activity zones
  • Earth hologram rotates with activity-tethered speed
  • Batcave CubeCamera reflection probe updates
  • Dual-brain panel shows scan line animation
  • LoRA panel renders honest empty state

🤖 Generated with Claude Code

## Summary Split the monolithic 5393-line `app.js` into **32 focused ES modules** under `modules/` with a thin ~330-line orchestrator. No bundler required — runs in-browser via the existing import map in `index.html`. ### Module Architecture | Layer | Modules | Purpose | |-------|---------|--------| | `core/` | scene, ticker, state, theme, audio | Scene setup, animation loop, shared data bus, styling, Web Audio | | `data/` | gitea, weather, bitcoin, loaders | API polling & data fetching | | `terrain/` | stars, clouds, island | Star field, cloud shader, glass platform & island | | `effects/` | matrix-rain, energy-beam, lightning, shockwave, rune-ring, gravity-zones | Visual effects | | `panels/` | heatmap, sigil, sovereignty, dual-brain, batcave, earth, agent-board, lora-panel | Information panels | | `portals/` | portal-system, commit-banners | Portal warp system & floating banners | | `narrative/` | bookshelves, oath, chat | Story/interaction modules | | `utils/` | perlin | Procedural noise | ### Key Design Decisions - **`state.js` data bus**: All data modules write to a shared reactive state object; visual modules read from it - **`ticker.js` subscriber pattern**: Single RAF loop — modules subscribe rather than calling requestAnimationFrame directly - **`scene.js` owns post-processing**: EffectComposer, BokehPass, and WarpShader live in scene.js since they're tightly coupled with renderer setup - **No new dependencies**: Same THREE.js via import map, no bundler, no build step - **`ws-client.js` import preserved**: Line 57 of new app.js imports ws-client.js unchanged ## Data Integrity Audit | Data Source | Module | Status | |------------|--------|--------| | Gitea commits API | `data/gitea.js` | Preserved — same endpoints, tokens, polling intervals | | Gitea agent status | `data/gitea.js` → `panels/agent-board.js` | Preserved — 5-min cache, same rendering | | Gitea closed PRs | `data/gitea.js` → `narrative/bookshelves.js` | Preserved | | Open-Meteo weather | `data/weather.js` | Preserved — rain/snow particle systems intact | | Blockstream Bitcoin | `data/bitcoin.js` | Preserved — 60s polling, star pulse on new block | | sovereignty-status.json | `data/loaders.js` → `panels/sovereignty.js` | Preserved | | portals.json | `portals/portal-system.js` | Preserved — health checks, warp trigger | | SOUL.md | `narrative/oath.js` | Preserved | | WebSocket (Hermes) | `ws-client.js` (unchanged) | Preserved | | Heatmap zones | `data/gitea.js` (HEATMAP_ZONES) | Preserved — same 3 zones, same author regex | ## Test Plan - [ ] `node --check app.js` passes (verified) - [ ] `node --check` passes on all 32 module files (verified) - [ ] Page loads without console errors - [ ] Matrix rain canvas renders behind 3D scene - [ ] Star field and constellation lines visible and rotating - [ ] Glass platform and floating island render correctly - [ ] Sovereignty meter displays score arc - [ ] Tab toggles overview mode (bird's-eye) - [ ] P toggles photo mode with orbit controls - [ ] [ ] adjusts focus distance in photo mode - [ ] Double-click zooms to object - [ ] Typing 'sovereignty' triggers gold star flash - [ ] Portals load from portals.json, health checks run - [ ] Walking into portal triggers warp shader - [ ] Audio toggle starts/stops ambient soundtrack - [ ] Commit banners float and cycle - [ ] Agent board shows agent status panels - [ ] Bookshelves display merged PRs as books - [ ] O key opens oath reading overlay - [ ] L key starts timelapse replay - [ ] Chat events trigger speech bubbles - [ ] Weather particles (rain/snow) render when appropriate - [ ] Energy beam intensity tethered to active agent count - [ ] Lightning crystals float and arc - [ ] Rune ring orbits with Elder Futhark glyphs - [ ] Gravity zones have rising particles - [ ] Heatmap floor shows activity zones - [ ] Earth hologram rotates with activity-tethered speed - [ ] Batcave CubeCamera reflection probe updates - [ ] Dual-brain panel shows scan line animation - [ ] LoRA panel renders honest empty state 🤖 Generated with [Claude Code](https://claude.com/claude-code)
perplexity added 1 commit 2026-03-24 18:13:33 +00:00
refactor: modularize app.js into ES module architecture
All checks were successful
CI / validate (pull_request) Successful in 14s
CI / auto-merge (pull_request) Successful in 0s
675b61d65e
Split the monolithic 5393-line app.js into 32 focused ES modules under
modules/ with a thin ~330-line orchestrator. No bundler required — runs
in-browser via import maps.

Module structure:
  core/     — scene, ticker, state, theme, audio
  data/     — gitea, weather, bitcoin, loaders
  terrain/  — stars, clouds, island
  effects/  — matrix-rain, energy-beam, lightning, shockwave, rune-ring, gravity-zones
  panels/   — heatmap, sigil, sovereignty, dual-brain, batcave, earth, agent-board, lora-panel
  portals/  — portal-system, commit-banners
  narrative/ — bookshelves, oath, chat
  utils/    — perlin

All files pass node --check. No new dependencies.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner

Excellent modularization work! Architecture looks solid. However, merge conflicts are preventing merge. Please rebase against main and resolve conflicts.

Excellent modularization work! Architecture looks solid. However, merge conflicts are preventing merge. Please rebase against main and resolve conflicts.
Timmy closed this pull request 2026-03-24 18:30:09 +00:00
All checks were successful
CI / validate (pull_request) Successful in 14s
CI / auto-merge (pull_request) Successful in 0s

Pull request closed

Sign in to join this conversation.