Implement Rich Text and Accurate Review Timing

LiveReview Pre-Commit Check: ran (iter:4, coverage:100%)

Author: shrsv

internal/appcore/review_state.go

@@ -21,7 +21,7 @@ type ReviewState struct {
 	FriendlyName   string    `json:"friendlyName"`
 	GeneratedTime  string    `json:"generatedTime"`
 	RepositoryPath string    `json:"repositoryPath,omitempty"`
-	StartedAt      time.Time `json:"-"`
+	StartedAt      time.Time `json:"startedAt"`
 
 	// Status
 	Status  string `json:"status"` // "in_progress", "completed", "failed", "blocked"

internal/staticserve/static/app.js

@@ -1023,6 +1023,16 @@ async function initApp() {
             }
         }, [slidesEnabled, slideShowOpen]);
 
+        useEffect(() => {
+            const startedAt = reviewData?.startedAt || reviewData?.StartedAt;
+            if (!startedAt) return;
+            const startedAtMs = new Date(startedAt).getTime();
+            if (isNaN(startedAtMs)) return;
+            const offsetMs = Date.now() - startedAtMs;
+            reviewStartMsRef.current = getPerformanceNow() - offsetMs;
+            setPerformanceNowMs(getPerformanceNow());
+        }, [reviewData?.startedAt, reviewData?.StartedAt]);
+
         useEffect(() => {
             if (status === 'completed' || status === 'failed') {
                 if (reviewCompletedMsRef.current === null) {

internal/staticserve/static/components/Quiz.js

@@ -5,6 +5,23 @@ import { waitForPreact } from './utils.js';
 
 const OPTION_LETTERS = ['A', 'B', 'C', 'D'];
 
+function escapeHTML(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+function renderQuizContent(text) {
+    if (!text) return '';
+    let result = escapeHTML(text);
+    result = result.replace(/```([\s\S]*?)```/g, (_, code) => {
+        return '<pre class="quiz-code-block"><code>' + code.trim() + '</code></pre>';
+    });
+    result = result.replace(/`([^`]+)`/g, '<code class="quiz-code-inline">$1</code>');
+    return result;
+}
+
 export async function createQuiz() {
     const { html, useState } = await waitForPreact();
 
@@ -45,7 +62,9 @@ export async function createQuiz() {
                 `}
                 ${quiz.map((q, qIdx) => html`
                     <div class="quiz-question" key=${qIdx}>
-                        <div class="quiz-question-text">${qIdx + 1}. ${q.question}</div>
+                        <div class="quiz-question-text">
+                            ${qIdx + 1 + '. '}<span dangerouslySetInnerHTML=${{ __html: renderQuizContent(q.question) }}></span>
+                        </div>
                         <div class="quiz-options">
                             ${(q.options || []).map((opt, oIdx) => {
                                 const isChosen = selected[qIdx] === oIdx;
@@ -61,13 +80,13 @@ export async function createQuiz() {
                                         disabled=${submitted}
                                     >
                                         <span class="quiz-option-letter">${OPTION_LETTERS[oIdx] || oIdx + 1}</span>
-                                        <span class="quiz-option-text">${opt}</span>
+                                        <span class="quiz-option-text" dangerouslySetInnerHTML=${{ __html: renderQuizContent(opt) }}></span>
                                     </button>
                                 `;
                             })}
                         </div>
                         ${submitted && q.explanation && html`
-                            <div class="quiz-explanation">${q.explanation}</div>
+                            <div class="quiz-explanation" dangerouslySetInnerHTML=${{ __html: renderQuizContent(q.explanation) }}></div>
                         `}
                     </div>
                 `)}

internal/staticserve/static/styles.css

@@ -4170,14 +4170,17 @@ body {
   margin-bottom: var(--space-md);
   border-bottom: 1px solid var(--border-subtle);
   overflow-x: auto;
+  scrollbar-width: thin;
 }
 
 .toolbar-performance {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
+  flex-wrap: nowrap;
+  gap: 6px;
   min-width: 0;
+  overflow: hidden;
+  flex-shrink: 1;
 }
 
 .performance-pill {
@@ -4188,6 +4191,8 @@ body {
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .performance-pill-label {
@@ -4208,6 +4213,7 @@ body {
   display: flex;
   gap: 8px;
   margin-left: auto;
+  flex-shrink: 0;
 }
 
 /* Standardized action button in toolbar */
@@ -4428,8 +4434,10 @@ body {
 
 .quiz-option.chosen {
   border-color: var(--accent-blue);
-  background: var(--bg-active);
-  color: var(--text-primary);
+  border-left: 3px solid var(--accent-blue);
+  background: linear-gradient(135deg, rgba(0, 120, 212, 0.2), rgba(0, 120, 212, 0.1));
+  color: #eaf6ff;
+  box-shadow: 0 0 12px rgba(0, 120, 212, 0.15);
 }
 
 .quiz-option.correct {
@@ -4463,6 +4471,33 @@ body {
   line-height: 1.4;
 }
 
+.quiz-code-inline {
+  display: inline;
+  padding: 1px 5px;
+  background: rgba(0, 120, 212, 0.15);
+  border: 1px solid rgba(0, 120, 212, 0.3);
+  border-radius: 3px;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  color: var(--accent-blue-light, #4fc3f7);
+  word-break: break-word;
+}
+
+.quiz-code-block {
+  display: block;
+  margin: 6px 0;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--border-medium);
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 0.88em;
+  color: var(--text-primary);
+  line-height: 1.45;
+}
+
 .quiz-explanation {
   margin-top: 10px;
   padding: 10px 12px;