feat(ui): pretty-print and syntax-highlight JSON gold answers

frontend/leaderboard.html

@@ -620,6 +620,78 @@
         .modal-content {
             animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
+
+        .json-render-block {
+            white-space: pre-wrap;
+            word-break: break-word;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 11px;
+            line-height: 1.55;
+            border-radius: 0.75rem;
+            border: 1px solid #dbe4f0;
+            background:
+                linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.96)),
+                linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(16, 185, 129, 0.04));
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+            padding: 0.65rem 0.8rem;
+        }
+
+        .dark .json-render-block {
+            border-color: #243047;
+            background:
+                linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98)),
+                linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(52, 211, 153, 0.05));
+            box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
+        }
+
+        .json-token-punctuation {
+            color: #64748b;
+        }
+
+        .json-token-key {
+            color: #0f766e;
+        }
+
+        .json-token-string {
+            color: #b45309;
+        }
+
+        .json-token-number {
+            color: #1d4ed8;
+        }
+
+        .json-token-boolean {
+            color: #7c3aed;
+        }
+
+        .json-token-null {
+            color: #be185d;
+            font-style: italic;
+        }
+
+        .dark .json-token-punctuation {
+            color: #94a3b8;
+        }
+
+        .dark .json-token-key {
+            color: #5eead4;
+        }
+
+        .dark .json-token-string {
+            color: #fdba74;
+        }
+
+        .dark .json-token-number {
+            color: #93c5fd;
+        }
+
+        .dark .json-token-boolean {
+            color: #c4b5fd;
+        }
+
+        .dark .json-token-null {
+            color: #f9a8d4;
+        }
     </style>
  
     <!-- Header & Search -->
@@ -1018,11 +1090,26 @@
                     const s = String(v).trim();
                     return s ? s : "Unknown";
                 };
+                const tryFormatJsonString = (value) => {
+                    const s = String(value ?? "").trim();
+                    if (!s) return null;
+                    const looksLikeJson = (
+                        (s.startsWith("{") && s.endsWith("}")) ||
+                        (s.startsWith("[") && s.endsWith("]"))
+                    );
+                    if (!looksLikeJson) return null;
+                    try {
+                        return JSON.stringify(JSON.parse(s), null, 2);
+                    } catch {
+                        return null;
+                    }
+                };
                 const formatDetailValue = (v, emptyAsUnknown = true) => {
                     if (v === undefined || v === null) return emptyAsUnknown ? "Unknown" : "";
                     if (typeof v === "string") {
                         const s = v.trim();
-                        return s ? s : (emptyAsUnknown ? "Unknown" : "");
+                        if (!s) return emptyAsUnknown ? "Unknown" : "";
+                        return tryFormatJsonString(s) || s;
                     }
                     if (Array.isArray(v)) {
                         if (!v.length) return emptyAsUnknown ? "Unknown" : "";
@@ -1057,17 +1144,57 @@
                     .replace(/\"/g, "&quot;")
                     .replace(/'/g, "&#039;");
                 const DETAIL_CELL_LIMIT = 260;
+                const JSON_TOKEN_RE = /"(?:\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(?=\s*:)|"(?:\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"|\btrue\b|\bfalse\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?|[{}\[\],:]/g;
+                const isPrettyJsonText = (value) => {
+                    const s = String(value ?? "").trim();
+                    if (!s) return false;
+                    return (
+                        (s.startsWith("{") && s.endsWith("}")) ||
+                        (s.startsWith("[") && s.endsWith("]"))
+                    );
+                };
+                const syntaxHighlightJson = (text) => {
+                    let html = "";
+                    let lastIndex = 0;
+                    for (const match of text.matchAll(JSON_TOKEN_RE)) {
+                        const token = match[0];
+                        const idx = match.index ?? 0;
+                        html += escapeHtml(text.slice(lastIndex, idx));
+                        let cls = "json-token-punctuation";
+                        if (token.startsWith('"')) {
+                            const nextChar = text.slice(idx + token.length).trimStart().charAt(0);
+                            cls = nextChar === ":" ? "json-token-key" : "json-token-string";
+                        } else if (token === "true" || token === "false") {
+                            cls = "json-token-boolean";
+                        } else if (token === "null") {
+                            cls = "json-token-null";
+                        } else if (/^-?\d/.test(token)) {
+                            cls = "json-token-number";
+                        }
+                        html += `<span class="${cls}">${escapeHtml(token)}</span>`;
+                        lastIndex = idx + token.length;
+                    }
+                    html += escapeHtml(text.slice(lastIndex));
+                    return html;
+                };
+                const renderDetailText = (text, isJson) => (
+                    isJson ? syntaxHighlightJson(text) : escapeHtml(text)
+                );
                 const expandableTextHtml = (value, idBase, limit = DETAIL_CELL_LIMIT) => {
                     const raw = String(value ?? "");
                     if (!raw) return "";
+                    const isJson = isPrettyJsonText(raw);
+                    const contentClass = isJson
+                        ? "json-render-block"
+                        : "whitespace-pre-wrap break-words";
                     if (raw.length <= limit) {
-                        return `<div class="whitespace-pre-wrap break-words">${escapeHtml(raw)}</div>`;
+                        return `<div class="${contentClass}">${renderDetailText(raw, isJson)}</div>`;
                     }
                     const short = `${raw.slice(0, limit).trimEnd()}...`;
                     return `
                         <div>
-                            <div id="${idBase}-short" class="whitespace-pre-wrap break-words">${escapeHtml(short)}</div>
-                            <div id="${idBase}-full" class="hidden whitespace-pre-wrap break-words">${escapeHtml(raw)}</div>
+                            <div id="${idBase}-short" class="${contentClass}">${renderDetailText(short, isJson)}</div>
+                            <div id="${idBase}-full" class="hidden ${contentClass}">${renderDetailText(raw, isJson)}</div>
                             <button type="button" onclick="window.toggleExpandText('${idBase}', this)" class="mt-2 inline-flex items-center gap-1 px-2 py-1 rounded-md border border-indigo-300 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 text-xs font-bold text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors">Expand</button>
                         </div>
                     `;
@@ -2286,4 +2413,4 @@ window.toggleExpandText = function (idBase, btn) {
 
 </body>
  
-</html>
+</html>