Merge pull request #36 from loryanstrant/copilot/fix-batch-files-extension

Fix batch file extensions for markdown output, add in-browser markdown rendering, and improve job details UX

Author: loryanstrant

src/backup_analyzer.py

@@ -397,7 +397,8 @@ def _process_batch(self, doc_type: str, files: List[str], output_dir: str) -> Li
             # Save batch documentation
             timestamp = datetime.now().isoformat()
             timestamp_safe = timestamp.replace(':', '-').replace('.', '-')
-            batch_filename = f"batch_{doc_type}_{timestamp_safe}.html"
+            file_ext = '.html' if self.config.OUTPUT_FORMAT.lower() == 'html' else '.md'
+            batch_filename = f"batch_{doc_type}_{timestamp_safe}{file_ext}"
             batch_path = os.path.join(output_dir, batch_filename)
 
             # Convert documentation to HTML if needed

src/web_server.py

@@ -3,12 +3,14 @@
 """
 import os
 import json
+import re
 import logging
 from datetime import datetime
 import pytz
 from pathlib import Path
 from typing import Dict, List, Optional
-from flask import Flask, render_template, jsonify, send_from_directory
+from flask import Flask, render_template, jsonify, send_from_directory, abort
+from werkzeug.security import safe_join
 from threading import Lock
 
 from .config import Config
@@ -25,6 +27,29 @@ def _get_now_tz(config):
         return datetime.now()
 
 
+def _get_display_name(filename: str) -> str:
+    """Convert a filename like 'batch_users_2026-02-15T13-45-32-698994.md' to a human-readable name."""
+    name = filename
+    # Remove extension
+    name = re.sub(r'\.(html|md)$', '', name)
+    # Handle known special files
+    if name == 'SUMMARY':
+        return '📊 Summary Analysis'
+    if name == 'INDEX':
+        return '📑 Documentation Index'
+    # Handle batch files: batch_<type>_<timestamp>
+    match = re.match(r'^batch_([a-zA-Z]+(?:_[a-zA-Z]+)*)_(\d.+)$', name)
+    if match:
+        doc_type = match.group(1).replace('_', ' ').title()
+        return f'📄 {doc_type} Configuration Batch'
+    # Handle doc files: doc_<hash>
+    match = re.match(r'^doc_([a-f0-9]+)$', name)
+    if match:
+        return f'📄 Document {match.group(1)}'
+    # Fallback: clean up the name
+    return f'📄 {name.replace("_", " ").title()}'
+
+
 class ProgressTracker:
     """Thread-safe progress tracking for analysis jobs"""
 
@@ -137,6 +162,7 @@ def get_job(job_id):
 
         # Get output files if job is completed
         files = []
+        summary_content = None
         if job['status'] == 'completed' and job.get('output_dir'):
             analysis_dir = os.path.join(job['output_dir'], 'analysis')
             if os.path.exists(analysis_dir):
@@ -145,11 +171,20 @@ def get_job(job_id):
                         file_path = os.path.join(analysis_dir, file)
                         files.append({
                             'name': file,
+                            'display_name': _get_display_name(file),
                             'size': os.path.getsize(file_path),
                             'modified': datetime.fromtimestamp(os.path.getmtime(file_path)).isoformat()
                         })
+                # Read summary file if it exists
+                summary_path = os.path.join(analysis_dir, 'SUMMARY.md')
+                if os.path.exists(summary_path):
+                    try:
+                        with open(summary_path, 'r', encoding='utf-8') as f:
+                            summary_content = f.read()
+                    except Exception as e:
+                        logger.warning(f"Failed to read summary file: {e}")
 
-        return render_template('job_details.html', job=job, files=files)
+        return render_template('job_details.html', job=job, files=files, summary_content=summary_content)
 
     @app.route('/api/job/<job_id>')
     def get_job_api(job_id):
@@ -180,13 +215,35 @@ def get_job_api(job_id):
 
     @app.route('/view/<job_id>/<filename>')
     def view_file(job_id, filename):
-        """View analysis file"""
+        """View analysis file - renders markdown in the browser"""
         jobs = progress_tracker.get_jobs_history()
         job = next((j for j in jobs if j['id'] == job_id), None)
         if not job or not job.get('output_dir'):
             return "Job not found", 404
 
         analysis_dir = os.path.join(job['output_dir'], 'analysis')
+        file_path = safe_join(analysis_dir, filename)
+        if file_path is None:
+            abort(400)
+        
+        if not os.path.isfile(file_path):
+            return "File not found", 404
+        
+        # Render markdown files in the browser instead of downloading
+        if filename.endswith('.md'):
+            try:
+                with open(file_path, 'r', encoding='utf-8') as f:
+                    content = f.read()
+                display_name = _get_display_name(filename)
+                return render_template('markdown_view.html',
+                                       content=content,
+                                       filename=filename,
+                                       display_name=display_name,
+                                       job=job)
+            except Exception as e:
+                logger.warning(f"Failed to render markdown file: {e}")
+                return send_from_directory(analysis_dir, filename)
+        
         return send_from_directory(analysis_dir, filename)
 
     @app.route('/download/<job_id>/<filename>')

templates/job_details.html

@@ -36,6 +36,52 @@
         .nav-link:hover {
             text-decoration: underline;
         }
+        .summary-card {
+            background: white;
+            padding: 20px 30px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            border-left: 4px solid #667eea;
+        }
+        .summary-card h2 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+        .summary-actions {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .summary-preview {
+            background: #f8f9fa;
+            padding: 15px 20px;
+            border-radius: 8px;
+            color: #333;
+            line-height: 1.6;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .summary-preview h1, .summary-preview h2, .summary-preview h3 {
+            margin-top: 10px;
+            margin-bottom: 5px;
+        }
+        .summary-preview table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 10px 0;
+        }
+        .summary-preview th {
+            background: #667eea;
+            color: white;
+            padding: 8px;
+            text-align: left;
+        }
+        .summary-preview td {
+            padding: 8px;
+            border-bottom: 1px solid #e0e0e0;
+        }
         .job-info {
             background: white;
             padding: 20px 30px;
@@ -96,9 +142,15 @@
         .file-info {
             flex: 1;
         }
-        .file-name {
+        .file-display-name {
             font-weight: 600;
             color: #333;
+            margin-bottom: 3px;
+        }
+        .file-name {
+            font-size: 0.8em;
+            color: #888;
+            font-family: 'Courier New', monospace;
             margin-bottom: 5px;
         }
         .file-meta {
@@ -132,6 +184,13 @@
         .btn-secondary:hover {
             background: #5a6268;
         }
+        .btn-summary {
+            background: #667eea;
+            color: white;
+        }
+        .btn-summary:hover {
+            background: #5568d3;
+        }
         .status-badge {
             display: inline-block;
             padding: 5px 12px;
@@ -165,6 +224,17 @@ <h1>Job {{ job.id }} Details</h1>
             <a href="/" class="nav-link">← Back to Dashboard</a>
         </div>
 
+        {% if summary_content %}
+        <div class="summary-card">
+            <h2>📊 Summary Analysis</h2>
+            <div class="summary-actions">
+                <a href="/view/{{ job.id }}/SUMMARY.md" class="btn btn-summary">View Full Summary</a>
+                <a href="/download/{{ job.id }}/SUMMARY.md" class="btn btn-secondary">⬇ Download</a>
+            </div>
+            <div class="summary-preview" id="summary-preview"></div>
+        </div>
+        {% endif %}
+
         <div class="job-info">
             <h2>Job Information</h2>
             <div class="info-grid">
@@ -202,7 +272,8 @@ <h2>Generated Files ({{ files|length }})</h2>
                     {% for file in files %}
                     <div class="file-card">
                         <div class="file-info">
-                            <div class="file-name">📄 {{ file.name }}</div>
+                            <div class="file-display-name">{{ file.display_name }}</div>
+                            <div class="file-name">{{ file.name }}</div>
                             <div class="file-meta">
                                 Size: {{ "%.2f"|format(file.size / 1024) }} KB | 
                                 Modified: {{ file.modified }}
@@ -226,5 +297,54 @@ <h2>Generated Files ({{ files|length }})</h2>
             {% endif %}
         </div>
     </div>
+
+    {% if summary_content %}
+    <script>
+        // Simple markdown to HTML renderer for summary preview
+        function renderMarkdown(text) {
+            let html = text
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+            html = html.replace(/^---[\s\S]*?---\n*/m, '');
+            html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function(match, lang, code) {
+                return '<pre><code>' + code.trimEnd() + '</code></pre>';
+            });
+            html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+            html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+            html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+            html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+            html = html.replace(/^---$/gm, '<hr>');
+            html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+            html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+            html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+            html = html.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)*)/gm, function(match, hdr, sep, body) {
+                let hs = hdr.split('|').filter(c => c.trim());
+                let rs = body.trim().split('\n');
+                let t = '<table><thead><tr>';
+                hs.forEach(h => t += '<th>' + h.trim() + '</th>');
+                t += '</tr></thead><tbody>';
+                rs.forEach(r => {
+                    let cs = r.split('|').filter(c => c.trim());
+                    t += '<tr>';
+                    cs.forEach(c => t += '<td>' + c.trim() + '</td>');
+                    t += '</tr>';
+                });
+                return t + '</tbody></table>';
+            });
+            html = html.replace(/^(\d+)\. (.+)$/gm, '<oli>$2</oli>');
+            html = html.replace(/((?:<oli>.*<\/oli>\n?)+)/g, function(match) {
+                return '<ol>' + match.replace(/<\/?oli>/g, function(t) { return t.replace('oli', 'li'); }) + '</ol>';
+            });
+            html = html.replace(/^[\s]*[-*] (.+)$/gm, '<li>$1</li>');
+            html = html.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+            html = html.replace(/^(?!<[a-z]|$)(.+)$/gm, '<p>$1</p>');
+            html = html.replace(/<p>\s*<\/p>/g, '');
+            return html;
+        }
+        const summaryContent = {{ summary_content | tojson }};
+        document.getElementById('summary-preview').innerHTML = renderMarkdown(summaryContent);
+    </script>
+    {% endif %}
 </body>
 </html>