feat: complete test fixing and decoupled functionality implementation

Major improvements to Issues #138, #139, and #140 with comprehensive
decoupled functionality approach:

## Issues Resolved
- Issue #138: Complete markdown parsing, directory creation, filename generation
- Issue #139: Full CLI integration, content aggregation, directory analysis,
  end-to-end roundtrip testing, filename decoding system
- Issue #140: Fixed critical CLI parameter passing bug in roundtrip tests

## Key Features Added
- Comprehensive filename decoding system with special character restoration
- API version pattern handling (api_v2_1_reference.md → API v2.1: Reference)
- Smart title case with acronym recognition (API, SQL, HTTP, etc.)
- Enhanced roundtrip compatibility between explode/implode operations
- Front matter preservation through _frontmatter.yml files
- FilenameDecoder class for configurable batch processing

## Bug Fixes
- Fixed ImplodeOptions parameter passing in md_implode_command
- Corrected heading level preservation in roundtrip cycles
- Fixed README.md inclusion for roundtrip compatibility
- Enhanced pattern matching order to prevent conflicts

## Test Results
- All Issue #139 filename decoding tests: 18/18 passing ✅
- All Issue #140 roundtrip tests: 4/4 passing ✅
- Comprehensive test coverage for all new functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

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

markitect/document_manager.py

@@ -210,4 +210,508 @@ class DocumentManager:
         with open(cache_path, 'w', encoding='utf-8') as f:
             json.dump(ast, f, indent=2, ensure_ascii=False)
 
-        return cache_path
+        return cache_path
+
+    def list_files(self) -> list:
+        """
+        List all markdown files in the system.
+
+        Returns:
+            List of dictionaries containing file metadata including filename,
+            size, and modification date information.
+        """
+        # Get files from database
+        db_files = self.db_manager.list_markdown_files()
+
+        # Enhance with file system information
+        enhanced_files = []
+        for file_info in db_files:
+            enhanced_info = {
+                'filename': file_info['filename'],
+                'id': file_info['id'],
+                'created_at': file_info['created_at'],
+                'front_matter': file_info['front_matter']
+            }
+
+            # Try to get file system stats if file exists
+            try:
+                file_path = Path(file_info['filename'])
+                if file_path.exists():
+                    stat = file_path.stat()
+                    enhanced_info['size'] = f"{stat.st_size} bytes"
+                    enhanced_info['modified'] = stat.st_mtime
+                else:
+                    enhanced_info['size'] = 'unknown'
+                    enhanced_info['modified'] = 'file not found'
+            except Exception:
+                enhanced_info['size'] = 'unknown'
+                enhanced_info['modified'] = 'unknown'
+
+            enhanced_files.append(enhanced_info)
+
+        return enhanced_files
+
+    def render_file(self, input_file: str, output_file: str, template: str = None, css: str = None,
+                   edit_mode: bool = False, editor_theme: str = 'github', keyboard_shortcuts: bool = True) -> Dict[str, Any]:
+        """
+        Render a markdown file to HTML with client-side rendering capabilities.
+
+        Creates an HTML file with embedded markdown content that is rendered
+        client-side using JavaScript markdown parser.
+
+        Args:
+            input_file: Path to input markdown file
+            output_file: Path to output HTML file
+            template: Template to use (optional)
+            css: CSS file to include (optional)
+
+        Returns:
+            Dictionary with rendering results and metadata
+
+        Raises:
+            FileNotFoundError: If input file doesn't exist
+        """
+        import json
+
+        input_path = Path(input_file)
+        output_path = Path(output_file)
+
+        # Validate input file exists
+        if not input_path.exists():
+            raise FileNotFoundError(f"Input file not found: {input_path}")
+
+        # Read markdown content
+        markdown_content = input_path.read_text(encoding='utf-8')
+
+        # Extract title from markdown (first h1 heading)
+        title = self._extract_title_from_markdown(markdown_content)
+
+        # Generate HTML content
+        html_content = self._generate_html_template(
+            markdown_content=markdown_content,
+            title=title,
+            css=css,
+            template=template,
+            edit_mode=edit_mode,
+            editor_theme=editor_theme,
+            keyboard_shortcuts=keyboard_shortcuts
+        )
+
+        # Write HTML file
+        output_path.parent.mkdir(parents=True, exist_ok=True)
+        output_path.write_text(html_content, encoding='utf-8')
+
+        return {
+            'input_file': str(input_path),
+            'output_file': str(output_path),
+            'title': title,
+            'template': template,
+            'css': css
+        }
+
+    def _extract_title_from_markdown(self, content: str) -> str:
+        """Extract title from markdown content (first h1 heading)."""
+        import re
+
+        # Look for first h1 heading
+        match = re.search(r'^#\s+(.+)$', content, re.MULTILINE)
+        if match:
+            return match.group(1).strip()
+        return "Markdown Document"
+
+    def _generate_html_template(self, markdown_content: str, title: str, css: str = None, template: str = None,
+                              edit_mode: bool = False, editor_theme: str = 'github', keyboard_shortcuts: bool = True) -> str:
+        """Generate HTML template with embedded markdown and client-side rendering."""
+        import json
+
+        # Escape the markdown content for JavaScript
+        js_markdown_content = json.dumps(markdown_content)
+
+        # Handle CSS styles
+        css_content = ""
+        if css:
+            # Try to read CSS file content and embed it
+            try:
+                css_path = Path(css)
+                if css_path.exists():
+                    css_file_content = css_path.read_text(encoding='utf-8')
+                    css_content = f"<style>\n{css_file_content}\n</style>"
+                else:
+                    # Fallback to link if file doesn't exist
+                    css_content = f'<link rel="stylesheet" href="{css}">'
+            except Exception:
+                # Fallback to link on any error
+                css_content = f'<link rel="stylesheet" href="{css}">'
+
+        # Get template-specific CSS
+        template_css = self._get_template_css(template)
+
+        # Default CSS for basic styling
+        default_css = f"""
+        <style>
+            {template_css}
+        </style>
+        """
+
+        # Add editor-specific content if in edit mode
+        editor_scripts = ""
+        editor_config = ""
+        editor_css = ""
+        body_classes = ""
+
+        if edit_mode:
+            body_classes = ' class="markitect-edit-mode"'
+            editor_css = """
+    <style>
+        .markitect-floating-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.95);
+            border-bottom: 1px solid #ddd;
+            padding: 10px;
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+        .markitect-section-editable {
+            border: 1px dashed transparent;
+            padding: 8px;
+            margin: 4px 0;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .markitect-section-editable:hover {
+            border-color: #007acc;
+            background: rgba(0, 122, 204, 0.05);
+        }
+        .edit-mode textarea {
+            width: 100%;
+            min-height: 100px;
+            font-family: monospace;
+            border: 2px solid #007acc;
+            border-radius: 4px;
+            padding: 8px;
+        }
+    </style>"""
+
+            editor_config = f"""
+        const MARKITECT_EDIT_MODE = true;
+        const MARKITECT_EDITOR_CONFIG = {{
+            theme: '{editor_theme}',
+            keyboardShortcuts: {str(keyboard_shortcuts).lower()},
+            autosave: true,
+            sections: true
+        }};"""
+
+            editor_scripts = """
+        class MarkitectEditor {
+            constructor() {
+                this.initializeEditor();
+                this.setupKeyboardShortcuts();
+            }
+
+            initializeEditor() {
+                const header = document.createElement('div');
+                header.className = 'markitect-floating-header';
+                header.innerHTML = `
+                    <button onclick="markitectEditor.save()">Save</button>
+                    <button onclick="markitectEditor.togglePreview()">Toggle Preview</button>
+                    <span id="save-status">Ready</span>
+                `;
+                document.body.insertBefore(header, document.body.firstChild);
+
+                this.makeContentEditable();
+            }
+
+            makeContentEditable() {
+                const content = document.getElementById('markdown-content');
+                if (content) {
+                    content.addEventListener('click', this.handleSectionClick.bind(this));
+                    this.markSections(content);
+                }
+            }
+
+            markSections(element) {
+                const sections = element.querySelectorAll('h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol');
+                sections.forEach((section, index) => {
+                    section.classList.add('markitect-section-editable');
+                    section.setAttribute('data-section', index);
+                });
+            }
+
+            handleSectionClick(event) {
+                const section = event.target.closest('.markitect-section-editable');
+                if (section && !section.querySelector('textarea')) {
+                    this.editSection(section);
+                }
+            }
+
+            editSection(section) {
+                const originalContent = section.innerHTML;
+                const textarea = document.createElement('textarea');
+                textarea.value = this.htmlToMarkdown(originalContent);
+                textarea.className = 'edit-mode';
+
+                textarea.addEventListener('blur', () => {
+                    section.innerHTML = marked.parse(textarea.value);
+                    this.markSections(section.parentElement);
+                });
+
+                section.innerHTML = '';
+                section.appendChild(textarea);
+                textarea.focus();
+            }
+
+            htmlToMarkdown(html) {
+                // Simple HTML to Markdown conversion
+                return html.replace(/<[^>]*>/g, '').trim();
+            }
+
+            setupKeyboardShortcuts() {
+                if (MARKITECT_EDITOR_CONFIG.keyboardShortcuts) {
+                    document.addEventListener('keydown', (event) => {
+                        if (event.ctrlKey || event.metaKey) {
+                            switch(event.key) {
+                                case 's':
+                                    event.preventDefault();
+                                    this.save();
+                                    break;
+                                case 'e':
+                                    event.preventDefault();
+                                    this.togglePreview();
+                                    break;
+                            }
+                        }
+                    });
+                }
+            }
+
+            save() {
+                document.getElementById('save-status').textContent = 'Saved!';
+                setTimeout(() => {
+                    document.getElementById('save-status').textContent = 'Ready';
+                }, 2000);
+            }
+
+            togglePreview() {
+                console.log('Toggle preview mode');
+            }
+        }
+
+        let markitectEditor;"""
+
+        html_template = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{title}</title>
+    {css_content}
+    {default_css}
+    {editor_css}
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body{body_classes}>
+    <div id="markdown-content"></div>
+
+    <script>
+        const markdownContent = {js_markdown_content};
+        {editor_config}
+
+        document.addEventListener('DOMContentLoaded', function() {{
+            const contentDiv = document.getElementById('markdown-content');
+            if (contentDiv && typeof marked !== 'undefined') {{
+                contentDiv.innerHTML = marked.parse(markdownContent);
+            }} else {{
+                console.error('Failed to render markdown: marked library not loaded');
+                contentDiv.innerHTML = '<p>Error: Markdown parser not available</p>';
+            }}
+            {'// Initialize editor if in edit mode' if edit_mode else ''}
+            {'if (typeof MARKITECT_EDIT_MODE !== \'undefined\' && MARKITECT_EDIT_MODE) {' if edit_mode else ''}
+                {'markitectEditor = new MarkitectEditor();' if edit_mode else ''}
+            {'}}' if edit_mode else ''}
+        }});
+
+        {editor_scripts}
+    </script>
+</body>
+</html>"""
+
+        return html_template
+
+    def _get_template_css(self, template: str = None) -> str:
+        """Get CSS styles for the specified template theme."""
+        if template == 'github':
+            return """
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+                max-width: 900px;
+                margin: 0 auto;
+                padding: 2rem;
+                line-height: 1.6;
+                color: #24292f;
+                background: #ffffff;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                margin-top: 24px;
+                margin-bottom: 16px;
+                font-weight: 600;
+                line-height: 1.25;
+            }
+            h1 { border-bottom: 1px solid #d0d7de; padding-bottom: .3em; }
+            h2 { border-bottom: 1px solid #d0d7de; padding-bottom: .3em; }
+            pre {
+                background: #f6f8fa;
+                padding: 16px;
+                border-radius: 6px;
+                overflow-x: auto;
+                border: 1px solid #d0d7de;
+            }
+            code {
+                background: rgba(175,184,193,0.2);
+                padding: 0.2em 0.4em;
+                border-radius: 6px;
+                font-size: 0.85em;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #d0d7de;
+                margin: 0 0 16px 0;
+                padding: 0 1em;
+                color: #656d76;
+            }
+            """
+        elif template == 'dark':
+            return """
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 2rem;
+                line-height: 1.6;
+                color: #e1e4e8;
+                background-color: #0d1117;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                color: #58a6ff;
+                border-color: #30363d;
+            }
+            h1 { border-bottom: 1px solid #30363d; padding-bottom: .3em; }
+            h2 { border-bottom: 1px solid #30363d; padding-bottom: .3em; }
+            pre {
+                background-color: #161b22;
+                padding: 1rem;
+                border-radius: 6px;
+                overflow-x: auto;
+                border: 1px solid #30363d;
+            }
+            code {
+                background: #6e768166;
+                padding: 0.2em 0.4em;
+                border-radius: 3px;
+                font-size: 0.9em;
+                color: #e1e4e8;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #58a6ff;
+                margin: 0;
+                padding-left: 1rem;
+                color: #8b949e;
+            }
+            a { color: #58a6ff; }
+            a:hover { color: #79c0ff; }
+            """
+        elif template == 'academic':
+            return """
+            body {
+                font-family: Georgia, 'Times New Roman', serif;
+                max-width: 650px;
+                margin: 0 auto;
+                padding: 1rem;
+                line-height: 1.8;
+                color: #333;
+                background: #fff;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+                margin-top: 2rem;
+                margin-bottom: 1rem;
+            }
+            pre {
+                background: #f8f8f8;
+                padding: 1rem;
+                border-left: 4px solid #ccc;
+                overflow-x: auto;
+                font-family: 'Courier New', monospace;
+            }
+            code {
+                background: #f0f0f0;
+                padding: 0.1em 0.3em;
+                font-family: 'Courier New', monospace;
+                font-size: 0.9em;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #ddd;
+                margin: 0;
+                padding-left: 1rem;
+                color: #666;
+                font-style: italic;
+            }
+            """
+        else:  # basic or default
+            return """
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 2rem;
+                line-height: 1.6;
+                color: #333;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            pre {
+                background: #f6f8fa;
+                padding: 1rem;
+                border-radius: 6px;
+                overflow-x: auto;
+            }
+            code {
+                background: #f6f8fa;
+                padding: 0.2em 0.4em;
+                border-radius: 3px;
+                font-size: 0.9em;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #dfe2e5;
+                margin: 0;
+                padding-left: 1rem;
+                color: #6a737d;
+            }
+            """