From fd7e444c241df5c2db2d5c2bad556beae9533cb8 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Sat, 18 Jul 2026 17:32:28 +0100
Subject: [PATCH] improve(ui): syntax-highlight JSON dumps on the debug page
 and config issues callout (#110806)

---
 ui/src/pages/config/view.ts |  5 ++++-
 ui/src/pages/debug/view.ts  | 13 +++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/config/view.ts b/ui/src/pages/config/view.ts
index 6aedc7b69b57..4977460ae718 100644
--- a/ui/src/pages/config/view.ts
+++ b/ui/src/pages/config/view.ts
@@ -2,6 +2,7 @@
 import "../../styles/lobster-pet.css";
 import { truncateUtf16Safe } from "@openclaw/normalization-core/utf16-slice";
 import { html, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { QueueMode } from "../../../../src/auto-reply/reply/queue/types.js";
 import type { ConfigUiHints } from "../../api/types.ts";
 import type { NativeNotificationsPermission } from "../../app/native-notifications.ts";
@@ -39,6 +40,7 @@ import {
   canonicalLobsterLook,
   renderLobsterSvg,
 } from "../../components/lobster-pet.ts";
+import { highlightJsonHtml } from "../../components/markdown.ts";
 import {
   renderSettingsRow,
   renderSettingsSegmented,
@@ -2026,7 +2028,8 @@ export function renderConfig(props: ConfigProps) {
               })()}
       ${props.issues.length > 0
         ? html`<div class="callout danger" style="margin-top: 12px;">
-            <pre class="code-block">${JSON.stringify(props.issues, null, 2)}</pre>
+            <pre class="code-block">
+${unsafeHTML(highlightJsonHtml(JSON.stringify(props.issues, null, 2)))}</pre>
           </div>`
         : nothing}
     </div>
diff --git a/ui/src/pages/debug/view.ts b/ui/src/pages/debug/view.ts
index b286c1a72d4d..188967559b47 100644
--- a/ui/src/pages/debug/view.ts
+++ b/ui/src/pages/debug/view.ts
@@ -1,6 +1,8 @@
 // Control UI view renders debug screen content.
 import { html, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { EventLogEntry } from "../../api/event-log.ts";
+import { highlightJsonHtml } from "../../components/markdown.ts";
 import {
   renderSettingsEmpty,
   renderSettingsPage,
@@ -34,7 +36,8 @@ function renderJsonRow(title: unknown, value: unknown) {
   return renderSettingsRow({
     title,
     stacked: true,
-    control: html`<pre class="code-block">${JSON.stringify(value ?? {}, null, 2)}</pre>`,
+    control: html`<pre class="code-block">
+${unsafeHTML(highlightJsonHtml(JSON.stringify(value ?? {}, null, 2)))}</pre>`,
   });
 }
 
@@ -74,7 +77,8 @@ function renderEventRow(evt: EventLogEntry) {
     title: evt.event,
     description: formatTimeMs(evt.ts, undefined, ""),
     stacked: true,
-    control: html`<pre class="code-block">${formatEventPayload(evt.payload)}</pre>`,
+    control: html`<pre class="code-block">
+${unsafeHTML(highlightJsonHtml(formatEventPayload(evt.payload)))}</pre>`,
   });
 }
 
@@ -147,7 +151,7 @@ export function renderDebug(props: DebugProps) {
         ? html`
             <div class="settings-row settings-row--stacked">
               ${renderSettingsStatus({ kind: "ok", label: t("common.ok") })}
-              <pre class="code-block">${props.callResult}</pre>
+              <pre class="code-block">${unsafeHTML(highlightJsonHtml(props.callResult))}</pre>
             </div>
           `
         : nothing}
@@ -158,7 +162,8 @@ export function renderDebug(props: DebugProps) {
     { title: t("debug.modelsTitle"), description: t("debug.modelsSubtitle") },
     html`
       <div class="settings-row settings-row--stacked">
-        <pre class="code-block">${JSON.stringify(props.models ?? [], null, 2)}</pre>
+        <pre class="code-block">
+${unsafeHTML(highlightJsonHtml(JSON.stringify(props.models ?? [], null, 2)))}</pre>
       </div>
     `,
   );