Add raw JSON toggle to event chat

Author: k0ngk0ng

web/src/components/EventLogModal.tsx

@@ -607,6 +607,7 @@ function BodyView({ raw, kind }: { raw: string; kind: "request" | "response" })
             text: streamToMarkdown(stream),
             encrypted: stream.encrypted,
             hiddenType: stream.hiddenType,
+            raw,
           },
 	        ],
 	        label: "stream",
@@ -623,6 +624,7 @@ function BodyView({ raw, kind }: { raw: string; kind: "request" | "response" })
             text: streamToMarkdown(json),
             encrypted: json.encrypted,
             hiddenType: json.hiddenType,
+            raw,
           },
 	        ],
 	        label: "json",
@@ -755,7 +757,7 @@ function finalChatTurns(requestRaw: string, responseRaw: string): Turn[] {
   if (requestTurns?.length) {
     turns.push(...requestTurns);
   } else if (requestRaw.trim()) {
-    turns.push({ role: "user", text: fenceMarkdown(requestRaw.trim()) });
+    turns.push({ role: "user", text: fenceMarkdown(requestRaw.trim()), raw: requestRaw });
   }
 
   const responseTurn = responseToTurn(responseRaw);
@@ -772,6 +774,7 @@ function responseToTurn(raw: string): Turn | null {
       text: streamToMarkdown(stream),
       encrypted: stream.encrypted,
       hiddenType: stream.hiddenType,
+      raw,
     };
   }
   const json = extractResponseJSON(raw);
@@ -781,9 +784,10 @@ function responseToTurn(raw: string): Turn | null {
       text: streamToMarkdown(json),
       encrypted: json.encrypted,
       hiddenType: json.hiddenType,
+      raw,
     };
   }
-  return { role: "assistant", text: fenceMarkdown(raw.trim()) };
+  return { role: "assistant", text: fenceMarkdown(raw.trim()), raw };
 }
 
 function finalResponseBody(entry: EventLogEntry): string {
@@ -836,6 +840,7 @@ function ToggleButton({
 
 function ChatView({ turns }: { turns: Turn[] }) {
   const [expandedTools, setExpandedTools] = useState<Set<number>>(() => new Set());
+  const [expandedRaw, setExpandedRaw] = useState<Set<number>>(() => new Set());
   const toggleTool = (index: number) => {
     setExpandedTools((current) => {
       const next = new Set(current);
@@ -844,12 +849,23 @@ function ChatView({ turns }: { turns: Turn[] }) {
       return next;
     });
   };
+  const toggleRaw = (index: number) => {
+    setExpandedRaw((current) => {
+      const next = new Set(current);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
 
   return (
     <div className="bg-panel border border-border rounded p-3 chat-view">
       {turns.map((turn, index) => {
         const isTool = isToolTurn(turn);
         const collapsed = isTool && !expandedTools.has(index);
+        const rawText = turnRawText(turn);
+        const rawExpanded = rawText != null && expandedRaw.has(index);
+        const hasActions = isTool || rawText != null;
         const bubbleClass = isTool ? "chat-bubble-tool" : chatBubbleClass(turn.role);
         return (
           <div
@@ -865,13 +881,29 @@ function ChatView({ turns }: { turns: Turn[] }) {
                   {turn.role}
                 </span>
                 <span className="chat-turn">#{index + 1}</span>
-                {isTool && (
-                  <button className="chat-toggle" onClick={() => toggleTool(index)}>
-                    {collapsed ? "Expand" : "Collapse"}
-                  </button>
+                {hasActions && (
+                  <div className="chat-actions">
+                    {isTool && (
+                      <button className="chat-toggle" onClick={() => toggleTool(index)}>
+                        {collapsed ? "Expand" : "Collapse"}
+                      </button>
+                    )}
+                    {rawText != null && (
+                      <button
+                        className={clsx("chat-toggle", rawExpanded && "chat-toggle-active")}
+                        onClick={() => toggleRaw(index)}
+                        aria-pressed={rawExpanded}
+                        title="Show original JSON"
+                      >
+                        {rawExpanded ? "Hide" : "JSON"}
+                      </button>
+                    )}
+                  </div>
                 )}
               </div>
-              {collapsed ? (
+              {rawExpanded ? (
+                <pre className="chat-raw-json">{rawText}</pre>
+              ) : collapsed ? (
                 <div className="chat-preview">{chatPreview(turn)}</div>
               ) : (
                 <>
@@ -897,6 +929,24 @@ function ChatView({ turns }: { turns: Turn[] }) {
   );
 }
 
+function turnRawText(turn: Turn): string | null {
+  if (!Object.prototype.hasOwnProperty.call(turn, "raw")) return null;
+  return rawValueText(turn.raw);
+}
+
+function rawValueText(value: unknown): string {
+  if (typeof value === "string") {
+    const pretty = tryPrettyJson(value);
+    return pretty || JSON.stringify(value);
+  }
+  if (value === undefined) return "undefined";
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
 function isToolTurn(turn: Turn): boolean {
   if (turn.role.toLowerCase() === "tool") return true;
   const text = turnText(turn).trimStart();

web/src/lib/protocol.ts

@@ -19,6 +19,7 @@ export interface Turn {
   attachments?: string[];
   encrypted?: boolean;
   hiddenType?: string;
+  raw?: unknown;
 }
 
 export function extractRequestTurns(rawJson: string): Turn[] | null {
@@ -33,11 +34,11 @@ export function extractRequestTurns(rawJson: string): Turn[] | null {
 
   const turns: Turn[] = [];
 
-  appendInstructionTurn(turns, "system", o.system);
-  appendInstructionTurn(turns, "system", o.instructions);
-  appendInstructionTurn(turns, "system", o.systemInstruction);
-  appendInstructionTurn(turns, "system", o.system_instruction);
-  appendInstructionTurn(turns, "developer", o.developer);
+  appendInstructionTurn(turns, "system", "system", o.system);
+  appendInstructionTurn(turns, "system", "instructions", o.instructions);
+  appendInstructionTurn(turns, "system", "systemInstruction", o.systemInstruction);
+  appendInstructionTurn(turns, "system", "system_instruction", o.system_instruction);
+  appendInstructionTurn(turns, "developer", "developer", o.developer);
 
   if (Array.isArray(o.messages)) {
     for (const m of o.messages) turns.push(messageToTurn(m));
@@ -68,9 +69,9 @@ export function extractRequestToolDeclarations(rawJson: string): Turn | null {
   return toolDeclarationTurn(o.tools);
 }
 
-function appendInstructionTurn(turns: Turn[], role: string, raw: unknown) {
+function appendInstructionTurn(turns: Turn[], role: string, key: string, raw: unknown) {
   const text = instructionToText(raw);
-  if (text.trim()) turns.push({ role, text });
+  if (text.trim()) turns.push({ role, text, raw: { [key]: raw } });
 }
 
 function instructionToText(raw: unknown): string {
@@ -150,9 +151,9 @@ function messageToTurn(raw: unknown): Turn {
   }
   if (!text && attachments.length === 0) {
     const fallback = messageFallbackMarkdown(m, type || "message");
-    if (fallback) return { role, text: fallback };
+    if (fallback) return { role, text: fallback, raw };
   }
-  return { role, text, attachments: attachments.length ? attachments : undefined };
+  return { role, text, attachments: attachments.length ? attachments : undefined, raw };
 }
 
 function isImagePartType(type: string): boolean {
@@ -203,6 +204,7 @@ function toolDeclarationTurn(raw: unknown): Turn | null {
   return {
     role: "tool",
     text: toolDeclarationsMarkdown(raw),
+    raw,
   };
 }
 
@@ -404,6 +406,7 @@ function responsesInputToTurn(raw: unknown): Turn {
     return {
       role: "assistant",
       text: toolUseMarkdown(name, m.call_id, json, "json"),
+      raw: m,
     };
   }
   if (type === "custom_tool_call") {
@@ -412,13 +415,15 @@ function responsesInputToTurn(raw: unknown): Turn {
     return {
       role: "assistant",
       text: toolUseMarkdown(name, m.call_id, input, customToolLanguage(name, input)),
+      raw: m,
     };
   }
   if (type === "function_call_output" || type === "custom_tool_call_output") {
     const out = typeof m.output === "string" ? m.output : JSON.stringify(m.output ?? "", null, 2);
     return {
       role: "tool",
       text: toolResultMarkdown(m.call_id, out),
+      raw: m,
     };
   }
   if (type === "reasoning") {
@@ -430,17 +435,18 @@ function responsesInputToTurn(raw: unknown): Turn {
       : "";
     if (summary) {
       const quoted = summary.split("\n").map((l) => "> " + l).join("\n");
-      return { role: "assistant", text: "_thinking_\n" + quoted };
+      return { role: "assistant", text: "_thinking_\n" + quoted, raw: m };
     }
     if (hasEncryptedReasoning(m)) {
-      return { role: "assistant", text: hiddenTypeText(type), encrypted: true, hiddenType: type };
+      return { role: "assistant", text: hiddenTypeText(type), encrypted: true, hiddenType: type, raw: m };
     }
-    return { role: "assistant", text: "", attachments: ["reasoning"] };
+    return { role: "assistant", text: "", attachments: ["reasoning"], raw: m };
   }
   if (type === "web_search_call") {
     return {
       role: "assistant",
       text: webSearchCallMarkdown(m),
+      raw: m,
     };
   }
   return typedItemToTurn(m, type);
@@ -450,6 +456,7 @@ function typedItemToTurn(item: Record<string, unknown>, type: string): Turn {
   return {
     role: type,
     text: typedItemMarkdown(item, type),
+    raw: item,
   };
 }
 
@@ -570,7 +577,7 @@ function geminiContentToTurn(raw: unknown): Turn {
     else if (o.functionResponse) attachments.push("function_response");
     else attachments.push(Object.keys(o).join(",") || "part");
   }
-  return { role, text, attachments: attachments.length ? attachments : undefined };
+  return { role, text, attachments: attachments.length ? attachments : undefined, raw };
 }
 
 

web/src/styles.css

@@ -98,17 +98,29 @@ body {
 .chat-turn {
   color: #8a93a3; font-family: "JetBrains Mono", Menlo, Consolas, monospace; font-size: 10px;
 }
+.chat-actions {
+  margin-left: auto; display: flex; align-items: center; gap: 0.35rem;
+}
 .chat-toggle {
-  margin-left: auto; color: #c9d0dc; border: 1px solid #3b4454; border-radius: 4px;
+  color: #c9d0dc; border: 1px solid #3b4454; border-radius: 4px;
   padding: 0.1rem 0.4rem; font-size: 10px; line-height: 1.2;
 }
 .chat-toggle:hover {
   color: #e7eaf0; background: #2a3140;
 }
+.chat-toggle-active {
+  color: #e7eaf0; background: #2a3140;
+}
 .chat-preview {
   color: #c9d0dc; font-family: "JetBrains Mono", Menlo, Consolas, monospace;
   font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
+.chat-raw-json {
+  max-height: 360px; overflow: auto; margin: 0; padding: 0.6rem 0.75rem;
+  color: #c9d0dc; background: #0b0d11; border: 1px solid #343c4d; border-radius: 4px;
+  font-family: "JetBrains Mono", Menlo, Consolas, monospace; font-size: 11px;
+  line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
+}
 .chat-body.prose-md {
   font-size: 12px;
 }