UI: render half-block QR output in web chat (#93869)

vincentkoc · emg110 · web-flow · commit f5482efbd75e · 2026-06-28T23:12:28.000-07:00
Co-authored-by: MG &lt;1900448+emg110@users.noreply.github.com&gt;
diff --git a/ui/src/styles/chat/sidebar.css b/ui/src/styles/chat/sidebar.css
@@ -697,6 +697,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 14px 16px;
+  font-family: var(--mono);
   overflow-x: auto;
   margin-top: 0.75em;
 }
@@ -705,14 +706,33 @@
   background: rgba(0, 0, 0, 0.04);
 }
 
+.sidebar-markdown pre:has(> code.markdown-block-art) {
+  background: var(--bg);
+}
+
 .sidebar-markdown :where(pre code) {
   background: none;
   border: none;
   padding: 0;
+  font-family: inherit;
   font-size: 12.5px;
   line-height: 1.55;
 }
 
+.sidebar-markdown :where(pre code.markdown-block-art) {
+  display: block;
+  min-width: 100%;
+  width: max-content;
+  color: var(--text);
+  font-size: 12px;
+  font-variant-ligatures: none;
+  letter-spacing: 0;
+  line-height: 0.86;
+  overflow-wrap: normal;
+  white-space: pre;
+  word-break: normal;
+}
+
 /* ── Blockquotes ── */
 
 .sidebar-markdown :where(blockquote) {
diff --git a/ui/src/styles/chat/text.css b/ui/src/styles/chat/text.css
@@ -112,11 +112,30 @@
   overflow-x: auto;
 }
 
+.chat-text :where(pre:has(> code.markdown-block-art)) {
+  background: var(--bg);
+}
+
 .chat-text :where(pre code) {
   background: none;
   padding: 0;
 }
 
+.chat-text :where(pre code.markdown-block-art) {
+  display: block;
+  min-width: 100%;
+  width: max-content;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-variant-ligatures: none;
+  letter-spacing: 0;
+  line-height: 0.86;
+  overflow-wrap: normal;
+  white-space: pre;
+  word-break: normal;
+}
+
 .chat-text :where(blockquote) {
   border-left: 3px solid var(--border-strong);
   padding-left: 12px;
diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css
@@ -471,6 +471,25 @@
   word-break: inherit;
 }
 
+.chat-tool-card__block-content:has(> code.markdown-block-art) {
+  background: var(--bg);
+}
+
+.chat-tool-card__block-content code.markdown-block-art {
+  display: block;
+  min-width: 100%;
+  width: max-content;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-variant-ligatures: none;
+  letter-spacing: 0;
+  line-height: 0.86;
+  overflow-wrap: normal;
+  white-space: pre;
+  word-break: normal;
+}
+
 .chat-tool-card__inline {
   margin-top: 10px;
   white-space: pre-wrap;
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
@@ -2210,13 +2210,35 @@
 .code-block-wrapper {
   position: relative;
   border-radius: var(--radius-sm);
-  overflow: hidden;
+  overflow: visible;
   margin-top: 0.75em;
 }
 
 .code-block-wrapper pre {
   margin: 0;
   border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  overflow-x: auto;
+}
+
+.code-block-wrapper pre:has(> code.markdown-block-art),
+.chat-text :where(pre:has(> code.markdown-block-art)),
+.sidebar-markdown :where(pre:has(> code.markdown-block-art)) {
+  background: var(--bg);
+}
+
+:is(.code-block-wrapper, .chat-text, .sidebar-markdown) :where(pre code.markdown-block-art) {
+  display: block;
+  min-width: 100%;
+  width: max-content;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-variant-ligatures: none;
+  letter-spacing: 0;
+  line-height: 0.86;
+  overflow-wrap: normal;
+  white-space: pre;
+  word-break: normal;
 }
 
 .code-block-header {
diff --git a/ui/src/ui/chat/code-block-copy-payload.ts b/ui/src/ui/chat/code-block-copy-payload.ts
@@ -0,0 +1,21 @@
+const blockArtCopyPayloadPrefix = "openclaw:block-art-code:";
+export const blockArtCodeBlockCopyPayloadEncoding = "block-art-json";
+
+export function encodeBlockArtCodeBlockCopyPayload(value: string): string {
+  return `${blockArtCopyPayloadPrefix}${JSON.stringify(value)}`;
+}
+
+export function decodeCodeBlockCopyPayload(value: string, encoding?: string): string {
+  if (
+    encoding !== blockArtCodeBlockCopyPayloadEncoding ||
+    !value.startsWith(blockArtCopyPayloadPrefix)
+  ) {
+    return value;
+  }
+  try {
+    const decoded = JSON.parse(value.slice(blockArtCopyPayloadPrefix.length));
+    return typeof decoded === "string" ? decoded : value;
+  } catch {
+    return value;
+  }
+}
diff --git a/ui/src/ui/chat/grouped-render.test.ts b/ui/src/ui/chat/grouped-render.test.ts
@@ -32,6 +32,7 @@ vi.mock("../../local-storage.ts", () => ({
 }));
 
 vi.mock("../markdown.ts", () => ({
+  isMarkdownBlockArtText: () => false,
   toSanitizedMarkdownHtml: markdownRenderMock,
   toStreamingMarkdownHtml: streamingMarkdownRenderMock,
   toStreamingPlainTextHtml: streamingTextRenderMock,
diff --git a/ui/src/ui/chat/tool-cards.test.ts b/ui/src/ui/chat/tool-cards.test.ts
@@ -252,6 +252,7 @@ describe("tool-cards", () => {
     expect(rawToggle!.getAttribute("aria-expanded")).toBe("true");
     expect(rawBody!.hidden).toBe(false);
     expect(rawBody!.querySelector(".chat-tool-card__block-label")?.textContent).toBe("Tool output");
+    expect(rawBody!.querySelector("code.markdown-block-art")).toBeNull();
     expect(JSON.parse(rawBody!.querySelector("code")?.textContent ?? "{}")).toEqual({
       kind: "canvas",
       presentation: {
@@ -267,6 +268,36 @@ describe("tool-cards", () => {
     });
   });
 
+  it("marks expanded raw block-art output so QR whitespace uses block-art rendering", () => {
+    const container = document.createElement("div");
+    const blockArt = "  ▄▄▄▄▄▄▄  \n  █ ▄▄▄ █  \n  █▄▄▄▄▄█  ";
+    render(
+      renderToolCard(
+        {
+          id: "msg:view:block-art",
+          name: "canvas_render",
+          outputText: blockArt,
+          preview: {
+            kind: "canvas",
+            surface: "assistant_message",
+            render: "url",
+            viewId: "qr_preview",
+            url: "/__openclaw__/canvas/documents/qr_preview/index.html",
+          },
+        },
+        { expanded: true, onToggleExpanded: vi.fn() },
+      ),
+      container,
+    );
+
+    const rawToggle = container.querySelector<HTMLButtonElement>(".chat-tool-card__raw-toggle");
+    rawToggle!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    const code = container.querySelector("code.markdown-block-art");
+    expect(code).not.toBeNull();
+    expect(code?.textContent).toBe(blockArt);
+  });
+
   it("opens assistant-surface canvas payloads in the sidebar when explicitly requested", () => {
     const container = document.createElement("div");
     const onOpenSidebar = vi.fn();
diff --git a/ui/src/ui/chat/tool-cards.ts b/ui/src/ui/chat/tool-cards.ts
@@ -6,6 +6,7 @@ import { t } from "../../i18n/index.ts";
 import { resolveCanvasIframeUrl } from "../canvas-url.ts";
 import { resolveEmbedSandbox, type EmbedSandboxMode } from "../embed-sandbox.ts";
 import { icons } from "../icons.ts";
+import { isMarkdownBlockArtText } from "../markdown.ts";
 import type { SidebarContent } from "../sidebar-content.ts";
 import { formatToolDetail, resolveToolDisplay } from "../tool-display.ts";
 import type { ToolCard } from "../types/chat-types.ts";
@@ -550,6 +551,7 @@ function renderToolDataBlock(params: {
   empty?: boolean;
 }) {
   const { label, text, expanded, empty } = params;
+  const codeClass = isMarkdownBlockArtText(text) ? "markdown-block-art" : "";
   return html`
     <div class="chat-tool-card__block ${expanded ? "chat-tool-card__block--expanded" : ""}">
       <div class="chat-tool-card__block-header">
@@ -559,7 +561,9 @@ function renderToolDataBlock(params: {
       ${empty
         ? html`<div class="chat-tool-card__block-empty muted">${text}</div>`
         : expanded
-          ? html`<pre class="chat-tool-card__block-content"><code>${text}</code></pre>`
+          ? html`<pre
+              class="chat-tool-card__block-content"
+            ><code class=${codeClass}>${text}</code></pre>`
           : html`<div class="chat-tool-card__block-preview mono">
               ${getTruncatedPreview(text)}
             </div>`}
diff --git a/ui/src/ui/chat/tool-helpers.test.ts b/ui/src/ui/chat/tool-helpers.test.ts
@@ -60,6 +60,15 @@ describe("tool-helpers", () => {
       expect(result).toBe("This is plain text output");
     });
 
+    it("wraps block art output in a fence while preserving quiet-zone whitespace", () => {
+      const input = "  ▀▀▀▀  \n  ▄▄▄▄  \n  ████  ";
+      const result = formatToolOutputForSidebar(input);
+
+      expect(result).toBe(`\`\`\`
+${input}
+\`\`\``);
+    });
+
     it("returns as-is for invalid JSON starting with {", () => {
       const input = "{not valid json";
       const result = formatToolOutputForSidebar(input);
diff --git a/ui/src/ui/chat/tool-helpers.ts b/ui/src/ui/chat/tool-helpers.ts
@@ -2,13 +2,18 @@
  * Helper functions for tool card rendering.
  */
 
+import { isMarkdownBlockArtText } from "../markdown.ts";
 import { PREVIEW_MAX_CHARS, PREVIEW_MAX_LINES } from "./constants.ts";
 
 /**
  * Format tool output content for display in the sidebar.
- * Detects JSON and wraps it in a code block with formatting.
+ * Detects block art and JSON, wrapping content in code blocks when needed.
  */
 export function formatToolOutputForSidebar(text: string): string {
+  if (isMarkdownBlockArtText(text)) {
+    return "```\n" + text + "\n```";
+  }
+
   const trimmed = text.trim();
   // Try to detect and format JSON
   if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
diff --git a/ui/src/ui/markdown.test.ts b/ui/src/ui/markdown.test.ts
diff --git a/ui/src/ui/markdown.ts b/ui/src/ui/markdown.ts
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
