# Todofile This is a "to do next" file, particularly useful to keep the human and a coding assistant in sync. The format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile). The structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact. *** ## [Unreleased] - *Active Vibe-Coding State* πŸ’‘ This section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks. **πŸ—οΈ MAJOR ARCHITECTURE REFACTORING (2025-11-03)**: Critical architecture issues identified requiring comprehensive JavaScript refactoring: **PROBLEMS IDENTIFIED**: 1. **Monolithic Architecture**: Single 5,188-line `editor.js` file violates separation of concerns 2. **Server-Side Debug Generation**: Debug messages captured during Python HTML generation instead of client-side interaction 3. **Architectural Boundary Violations**: JavaScript editing infrastructure affecting Python md-render code 4. **Tight Coupling**: UI components interdependent and untestable independently 5. **Generic Editor Compromise**: Debug system entangled with rendering instead of being purely client-side **SOLUTION**: Modular JavaScript Architecture with component separation and proper client-side debugging. **πŸ“Š PREVIOUS STATUS (2025-11-02)**: Systematic JavaScript functionality recovery using TDD methodology had made excellent progress. **5 major features** were successfully implemented and tested: 1. **Advanced EditState Management** βœ… - Implemented enum-based state tracking with pending changes preservation 2. **Keyboard Shortcuts** βœ… - Added Ctrl+Enter (accept) and Escape (cancel) functionality 3. **Section Splitting** βœ… - Restored dynamic heading detection with automatic section reorganization 4. **Real-time Status Tracking** βœ… - Implemented periodic updates with visual status panel (2-second intervals) 5. **Intelligent Filename Generation** βœ… - Added 4-method fallback system (optionsβ†’titleβ†’URLβ†’headingβ†’timestamp) All implementations include comprehensive TDD test suites and are fully integrated into the existing codebase. The recovery approach has proven highly effective for restoring sophisticated lost functionality. ## πŸ—οΈ JAVASCRIPT ARCHITECTURE REFACTORING ROADMAP ### **Phase 1: Preparation & Backup (CRITICAL)** * 🚧 Update TODO.md with comprehensive refactoring plan - IN PROGRESS * ⏳ Commit current monolithic state for rollback safety - PENDING * ⏳ Create modular directory structure `markitect/static/js/` - PENDING * ⏳ Set up component template files with proper exports/imports - PENDING ### **Phase 2: Core System Extraction (HIGH)** * ⏳ Extract SectionManager to `core/section-manager.js` - PENDING * ⏳ Extract EventSystem to `core/event-system.js` - PENDING * ⏳ Create EditorCore orchestrator in `core/editor-core.js` - PENDING ### **Phase 3: Component Separation (HIGH)** * ⏳ Document Controls β†’ `components/document-controls.js` - PENDING * ⏳ Status Panel β†’ `components/status-panel.js` - PENDING * ⏳ Debug Panel β†’ `components/debug-panel.js` (pure client-side) - PENDING * ⏳ Floating Menu β†’ `components/floating-menu.js` - PENDING * ⏳ Text/Image Editors β†’ separate component files - PENDING ### **Phase 4: Testing Infrastructure (MEDIUM)** * ⏳ Standalone test runner that doesn't require md-render - PENDING * ⏳ Component unit tests for individual functionality - PENDING * ⏳ Integration tests for component interaction - PENDING * ⏳ Browser-based test runner for direct UI testing - PENDING ### **Phase 5: Integration & Cleanup (MEDIUM)** * ⏳ Update HTML template to load modular components - PENDING * ⏳ Remove monolithic editor.js - PENDING * ⏳ Ensure Python code unchanged - no md-render modifications - PENDING * ⏳ Validate all functionality works with new architecture - PENDING ### **Directory Structure Plan:** ``` markitect/static/js/ β”œβ”€β”€ core/ β”‚ β”œβ”€β”€ editor-core.js # Main editor initialization β”‚ β”œβ”€β”€ section-manager.js # Section state management β”‚ └── event-system.js # Event handling system β”œβ”€β”€ components/ β”‚ β”œβ”€β”€ document-controls.js # Document controls panel β”‚ β”œβ”€β”€ status-panel.js # Status display component β”‚ β”œβ”€β”€ debug-panel.js # Debug panel (client-side only) β”‚ β”œβ”€β”€ floating-menu.js # Generic floating menu system β”‚ β”œβ”€β”€ text-editor.js # Text section editor β”‚ └── image-editor.js # Image section editor β”œβ”€β”€ utils/ β”‚ β”œβ”€β”€ dom-utils.js # DOM manipulation utilities β”‚ └── positioning.js # Layout positioning logic └── tests/ β”œβ”€β”€ test-runner.js # Standalone test framework β”œβ”€β”€ component-tests.js # UI component tests └── integration-tests.js # Full workflow tests ``` ### **PREVIOUS COMPLETED FEATURES (Now requiring refactoring):** * **To Add:** * βœ… Advanced state management with EditState enum and pending changes (CRITICAL) - COMPLETED * βœ… Keyboard shortcuts (Ctrl+Enter accept, Escape cancel) (CRITICAL) - COMPLETED * βœ… Section splitting functionality for dynamic heading detection (HIGH) - COMPLETED * βœ… Real-time status tracking with periodic updates (HIGH) - COMPLETED * βœ… Intelligent save filename generation with 4-method fallback (MEDIUM) - COMPLETED * πŸ”„ Professional message system with color-coded positioning (MEDIUM) - NEEDS REFACTORING * πŸ”„ Multiple concurrent editing sessions support (MEDIUM) - NEEDS REFACTORING * πŸ”„ Enhanced DOM event system with 6 event types (LOW) - NEEDS REFACTORING * πŸ”„ Automatic section type detection (heading, code, list, etc) (LOW) - NEEDS REFACTORING * πŸ”„ Sophisticated section ID generation with hash-based algorithm (LOW) - NEEDS REFACTORING * **To Fix:** * Comprehensive status reporting dialog with detailed stats (HIGH) * Floating global control panel with professional styling (MEDIUM) * Enhanced setupSectionElement with comprehensive styling (LOW) * **To Refactor:** * βœ… stopEditing method with state preservation (CRITICAL) - COMPLETED * βœ… getAllSections method for section collection management (MEDIUM) - COMPLETED * βœ… hasChanges detection for unsaved modifications (HIGH) - COMPLETED * βœ… updateGlobalStatus method with 2-second interval updates (MEDIUM) - COMPLETED * βœ… handleSectionSplit for dynamic section reorganization (LOW) - COMPLETED * βœ… checkForSectionSplits automatic heading detection (LOW) - COMPLETED * **To Remove:** * None currently identified *** ## Completed Tasks **Asset Shipping for md-render - COMPLETED βœ…**: - βœ… Implemented automatic asset copying when rendering markdown to different output directories - βœ… Added asset discovery functionality parsing markdown for image/link references - βœ… Implemented timestamp-based asset copying (only copy if source newer than destination) - βœ… Added `--ship-assets` and `--no-ship-assets` CLI flags for explicit control - βœ… Added `MARKITECT_OUTPUT_DIR` environment variable support for default output directory - βœ… Smart defaults: assets ship automatically when output is directory, disabled for specific files - βœ… Preserved relative path structure in output directory maintaining markdown link compatibility - βœ… Graceful handling of missing assets with warning messages - βœ… Full backward compatibility with existing md-render workflows - βœ… Comprehensive TDD test suite covering all functionality and edge cases **Feature Capabilities**: - Environment variable priority: CLI `--output` > `MARKITECT_OUTPUT_DIR` > input file directory - Automatic asset discovery from standard markdown syntax: `![alt](path)` and `[text](path)` - Timestamp-based incremental copying prevents unnecessary file operations - Directory structure preservation maintains working relative links in output HTML - Support for images, documents, and other asset types referenced in markdown **CHANGELOG.md Enhancement - COMPLETED βœ…**: - βœ… Added missing version entries for 0.1.0, 0.2.0, and 0.3.0 - βœ… Added standard Keep a Changelog header with proper format - βœ… Included Unreleased section - βœ… Research completed for all historical versions using git log analysis - βœ… All entries follow Keep a Changelog categories (Added, Changed, Fixed) - βœ… Chronological order maintained with latest versions first - βœ… Appropriate release dates included based on git commit timestamps **Version Details Added**: - v0.1.0 (2025-10-15): Development infrastructure, TDD workspace, issue management - v0.2.0 (2025-10-20): Advanced Markdown Engine with GraphQL, search, plugins - v0.3.0 (2025-10-25): Architectural improvements with kaizen-agentic integration