Fix renderer overlay loading and modularize renderer

backlog/tasks/task-6 - Split-renderer.ts-into-focused-modules.md

@@ -1,9 +1,11 @@
 ---
 id: TASK-6
 title: Split renderer.ts into focused modules
-status: To Do
-assignee: []
+status: Done
+assignee:
+  - codex
 created_date: '2026-02-11 08:20'
+updated_date: '2026-02-11 20:45'
 labels:
   - refactor
   - renderer
@@ -46,10 +48,71 @@ Note: The renderer runs in Electron's renderer process, so module bundling consi
 
 ## Acceptance Criteria
 <!-- AC:BEGIN -->
-- [ ] #1 renderer.ts reduced to <400 lines (init + IPC wiring)
-- [ ] #2 Each modal UI in its own module
-- [ ] #3 Positioning logic extracted with helper functions replacing the 211-line mega function
-- [ ] #4 State centralized in a single object/module
-- [ ] #5 Platform-specific logic isolated behind abstractions
-- [ ] #6 All existing functionality preserved
+- [x] #1 renderer.ts reduced to <400 lines (init + IPC wiring)
+- [x] #2 Each modal UI in its own module
+- [x] #3 Positioning logic extracted with helper functions replacing the 211-line mega function
+- [x] #4 State centralized in a single object/module
+- [x] #5 Platform-specific logic isolated behind abstractions
+- [x] #6 All existing functionality preserved
 <!-- AC:END -->
+
+## Implementation Plan
+
+<!-- SECTION:PLAN:BEGIN -->
+1. Create shared renderer infrastructure modules (`state.ts`, `platform.ts`, `dom.ts`) and a typed context for cross-module dependencies.
+2. Extract subtitle render and secondary subtitle logic into `subtitle-render.ts` with behavior-preserving APIs.
+3. Extract invisible/visible subtitle positioning and offset edit logic into `positioning.ts`, splitting the mega layout function into helper functions.
+4. Extract each modal into separate modules: `modals/jimaku.ts`, `modals/kiku.ts`, `modals/runtime-options.ts`, `modals/subsync.ts`.
+5. Extract input and UI interaction logic into `handlers/keyboard.ts` and `handlers/mouse.ts`.
+6. Rewrite `renderer.ts` as entrypoint/orchestrator only (<400 lines), wire IPC listeners and module composition.
+7. Run `pnpm run build` and targeted tests; update task notes and acceptance checklist to reflect completion status.
+<!-- SECTION:PLAN:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+Reviewed src/renderer/renderer.ts structure and build wiring (tsc CommonJS output loaded by Electron). Confirmed renderer module splitting can be done safely without introducing a new bundler in this task.
+
+Implemented renderer modularization with a centralized `RendererState` and shared context (`src/renderer/state.ts`, `src/renderer/context.ts`).
+
+Extracted platform and DOM abstractions into `src/renderer/utils/platform.ts` and `src/renderer/utils/dom.ts`.
+
+Extracted subtitle render/style concerns to `src/renderer/subtitle-render.ts` and positioning/layout concerns to `src/renderer/positioning.ts`, including helperized invisible subtitle layout pipeline.
+
+Split modal UIs into dedicated modules: `src/renderer/modals/jimaku.ts`, `src/renderer/modals/kiku.ts`, `src/renderer/modals/runtime-options.ts`, `src/renderer/modals/subsync.ts`.
+
+Split interaction logic into `src/renderer/handlers/keyboard.ts` and `src/renderer/handlers/mouse.ts`.
+
+Reduced `src/renderer/renderer.ts` to entrypoint/orchestration (225 lines) with IPC wiring and module composition only.
+
+Validation: `pnpm run build` passed; `pnpm run test:core` passed (21/21).
+<!-- SECTION:NOTES:END -->
+
+## Final Summary
+
+<!-- SECTION:FINAL_SUMMARY:BEGIN -->
+Refactored the Electron renderer implementation from a monolithic file into focused modules while preserving runtime behavior and IPC integration.
+
+What changed:
+- Replaced ad hoc renderer globals with a centralized mutable state container in `src/renderer/state.ts`, wired through a shared renderer context (`src/renderer/context.ts`).
+- Isolated platform/environment detection and DOM element resolution into `src/renderer/utils/platform.ts` and `src/renderer/utils/dom.ts`.
+- Extracted subtitle rendering and subtitle style/secondary subtitle behavior into `src/renderer/subtitle-render.ts`.
+- Extracted subtitle positioning logic into `src/renderer/positioning.ts`, including breaking invisible subtitle layout into helper functions for scale, container layout, vertical alignment, and typography application.
+- Split each modal into its own module:
+  - `src/renderer/modals/jimaku.ts`
+  - `src/renderer/modals/kiku.ts`
+  - `src/renderer/modals/runtime-options.ts`
+  - `src/renderer/modals/subsync.ts`
+- Split user interaction concerns into handler modules:
+  - `src/renderer/handlers/keyboard.ts`
+  - `src/renderer/handlers/mouse.ts`
+- Rewrote `src/renderer/renderer.ts` to an initialization/orchestration entrypoint (225 lines), retaining IPC listeners and module composition only.
+
+Why:
+- Addressed architectural and maintainability issues in a large mixed-concern renderer file by enforcing concern boundaries and explicit dependencies.
+- Improved testability and future change safety by reducing hidden cross-function/module state coupling.
+
+Validation:
+- `pnpm run build` succeeded.
+- `pnpm run test:core` succeeded (21 passing tests).
+<!-- SECTION:FINAL_SUMMARY:END -->