ui: air: support markdown formatting of the full output

Signed-off-by: Jakub Kicinski <[email protected]>

Author: kuba-moo

ui/ai-review.html

@@ -6,6 +6,7 @@
     <title>AI Review Results</title>
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="nipa.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         :root {
             --bg-primary: #ffffff;
@@ -242,6 +243,92 @@
             text-align: center;
         }
 
+        .review-markdown {
+            padding: 15px;
+            border-radius: 4px;
+            border: 1px solid var(--border-color);
+            background-color: var(--review-text-bg);
+            color: var(--review-text-color);
+            line-height: 1.6;
+            overflow-x: auto;
+        }
+
+        .review-markdown h1,
+        .review-markdown h2,
+        .review-markdown h3,
+        .review-markdown h4 {
+            color: var(--heading-color);
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 0.3em;
+        }
+
+        .review-markdown h4 {
+            border-bottom: none;
+        }
+
+        .review-markdown p {
+            margin: 0.5em 0;
+        }
+
+        .review-markdown code {
+            background-color: var(--bg-secondary);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+        }
+
+        .review-markdown pre {
+            background-color: var(--bg-secondary);
+            padding: 12px;
+            border-radius: 4px;
+            overflow-x: auto;
+            border: 1px solid var(--border-color);
+        }
+
+        .review-markdown pre code {
+            background: none;
+            padding: 0;
+        }
+
+        .review-markdown ul,
+        .review-markdown ol {
+            padding-left: 1.5em;
+            margin: 0.5em 0;
+        }
+
+        .review-markdown blockquote {
+            border-left: 3px solid var(--accent-primary);
+            margin: 0.5em 0;
+            padding: 0.5em 1em;
+            color: var(--text-secondary);
+            background-color: var(--bg-secondary);
+            border-radius: 0 4px 4px 0;
+        }
+
+        .review-markdown a {
+            color: var(--accent-primary);
+        }
+
+        .review-markdown table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 0.5em 0;
+        }
+
+        .review-markdown th,
+        .review-markdown td {
+            border: 1px solid var(--border-color);
+            padding: 6px 12px;
+            text-align: left;
+        }
+
+        .review-markdown th {
+            background-color: var(--bg-secondary);
+        }
+
         .controls-bar {
             display: flex;
             justify-content: space-between;
@@ -525,6 +612,9 @@ <h2>Review Information <span style="font-family: monospace; font-size: 0.75em; f
                     <option value="markup">Full output</option>
                     <option value="metadata">Metadata</option>
                 </select>
+                <label style="margin-left: 10px; cursor: pointer;">
+                    <input type="checkbox" id="render-markdown" checked onchange="changeFormat()"> Render Markdown
+                </label>
             </div>
         </div>
 
@@ -976,8 +1066,14 @@ <h2>Review Information <span style="font-family: monospace; font-size: 0.75em; f
                     contentDiv.className = 'patch-content';
 
                     const reviewDiv = document.createElement('div');
-                    reviewDiv.className = 'review-text';
-                    reviewDiv.textContent = review;
+                    const renderMarkdown = document.getElementById('render-markdown');
+                    if (currentFormat === 'markup' && renderMarkdown && renderMarkdown.checked) {
+                        reviewDiv.className = 'review-markdown';
+                        reviewDiv.innerHTML = marked.parse(review);
+                    } else {
+                        reviewDiv.className = 'review-text';
+                        reviewDiv.textContent = review;
+                    }
                     contentDiv.appendChild(reviewDiv);
 
                     patchDiv.appendChild(contentDiv);

ui/air.html

@@ -1238,7 +1238,6 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                 // Update charts with filtered data
                 updateReviewChart(filteredReviews);
                 updateAveragesChart(filteredReviews);
-                updateVolumeChart(filteredReviews);
                 updateFeedbackChart(filteredReviews);
             } catch (error) {
                 console.error('Error loading charts:', error);