Frontend: fix Agent Chat JSON rendering for model outputs

frontend/src/components/agents/agent-chat-view.tsx

@@ -51,15 +51,93 @@ type MessageSegment =
   | { type: "markdown"; content: string }
   | { type: "json"; data: unknown };
 
+function normalizeLikelyJson(text: string): string {
+  return text
+    .trim()
+    .replace(/^\uFEFF/, "")
+    .replace(/[\u00A0\u1680\u2000-\u200B\u202F\u205F\u3000]/g, " ")
+    .replace(/[\u200E\u200F\u202A-\u202E]/g, "")
+    .replace(/[“”]/g, "\"")
+    .replace(/[‘’]/g, "'")
+    .replace(/,\s*([}\]])/g, "$1");
+}
+
+function extractLikelyJsonBody(text: string): string | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+
+  for (let start = 0; start < trimmed.length; start += 1) {
+    const opener = trimmed[start];
+    if (opener !== "{" && opener !== "[") continue;
+
+    const closer = opener === "{" ? "}" : "]";
+    let depth = 0;
+    let inString = false;
+    let escaped = false;
+
+    for (let i = start; i < trimmed.length; i += 1) {
+      const ch = trimmed[i];
+      if (inString) {
+        if (escaped) {
+          escaped = false;
+          continue;
+        }
+        if (ch === "\\") {
+          escaped = true;
+          continue;
+        }
+        if (ch === "\"") {
+          inString = false;
+        }
+        continue;
+      }
+
+      if (ch === "\"") {
+        inString = true;
+        continue;
+      }
+
+      if (ch === opener) {
+        depth += 1;
+      } else if (ch === closer) {
+        depth -= 1;
+        if (depth === 0) {
+          return trimmed.slice(start, i + 1);
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
 function tryParseJson(text: string): unknown | null {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return null;
+  const candidates = [text];
+  const extracted = extractLikelyJsonBody(text);
+  if (extracted && extracted !== text) {
+    candidates.push(extracted);
+  }
+
+  for (const candidate of candidates) {
+    try {
+      return JSON.parse(candidate);
+    } catch {
+      // Fallback for common LLM JSON quirks.
+      try {
+        return JSON.parse(normalizeLikelyJson(candidate));
+      } catch {
+        // Keep trying.
+      }
+    }
   }
+
+  return null;
 }
 
 function splitMessageSegments(content: string): MessageSegment[] {
+  const parsedWhole = tryParseJson(content.trim());
+  if (parsedWhole !== null) return [{ type: "json", data: parsedWhole }];
+
   const fenceRegex = /```([a-zA-Z0-9_-]*)\s*\n([\s\S]*?)```/g;
   const chunks: MessageSegment[] = [];
   let lastIndex = 0;
@@ -90,11 +168,7 @@ function splitMessageSegments(content: string): MessageSegment[] {
     chunks.push({ type: "markdown", content: content.slice(lastIndex) });
   }
 
-  if (chunks.length === 0) {
-    const parsedWhole = tryParseJson(content.trim());
-    if (parsedWhole !== null) return [{ type: "json", data: parsedWhole }];
-    return [{ type: "markdown", content }];
-  }
+  if (chunks.length === 0) return [{ type: "markdown", content }];
 
   return chunks.filter((chunk) => chunk.type === "json" || chunk.content.trim().length > 0);
 }