From 44f9ef8b2407e0d0d09c7d8b3859f813c7df3e5b Mon Sep 17 00:00:00 2001
From: Dave Onkels <dave@onk.io>
Date: Wed, 28 Jan 2026 20:14:10 -0800
Subject: [PATCH] feat(ui): clarify debug toggle with bug icon and extended
 filtering

The "Show Thinking" toggle was unclear - users thought it controlled
LLM reasoning mode. This change:

1. Changes icon from brain to bug (clearer for debug output)
2. Updates tooltip to "Show/hide debug info (tool calls, heartbeats)"
3. Extends filtering to also hide heartbeat system messages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ui/src/ui/app-render.helpers.ts |  4 ++--
 ui/src/ui/views/chat.test.ts    | 40 +++++++++++++++++++++++++++++++++
 ui/src/ui/views/chat.ts         | 33 ++++++++++++++++++++++++++-
 3 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/ui/src/ui/app-render.helpers.ts b/ui/src/ui/app-render.helpers.ts
index 22f8d90db..817984258 100644
--- a/ui/src/ui/app-render.helpers.ts
+++ b/ui/src/ui/app-render.helpers.ts
@@ -107,9 +107,9 @@ export function renderChatControls(state: AppViewState) {
         aria-pressed=${showThinking}
         title=${disableThinkingToggle
           ? "Disabled during onboarding"
-          : "Toggle assistant thinking/working output"}
+          : "Show/hide debug info (tool calls, heartbeats)"}
       >
-        ${icons.brain}
+        ${icons.bug}
       </button>
       <button
         class="btn btn--sm btn--icon ${focusActive ? "active" : ""}"
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
index ac68f2494..a245ea8a2 100644
--- a/ui/src/ui/views/chat.test.ts
+++ b/ui/src/ui/views/chat.test.ts
@@ -93,4 +93,44 @@ describe("chat view", () => {
     expect(onNewSession).toHaveBeenCalledTimes(1);
     expect(container.textContent).not.toContain("Stop");
   });
+
+  it("filters debug messages when showThinking is false", () => {
+    const container = document.createElement("div");
+    render(
+      renderChat(
+        createProps({
+          showThinking: false,
+          messages: [
+            { role: "user", content: "hello", timestamp: 1 },
+            { role: "toolresult", content: "debug info", timestamp: 2 },
+            { role: "assistant", content: "world", timestamp: 3 },
+          ],
+        }),
+      ),
+      container,
+    );
+
+    expect(container.textContent).toContain("hello");
+    expect(container.textContent).toContain("world");
+    expect(container.textContent).not.toContain("debug info");
+  });
+
+  it("shows debug messages when showThinking is true", () => {
+    const container = document.createElement("div");
+    render(
+      renderChat(
+        createProps({
+          showThinking: true,
+          messages: [
+            { role: "user", content: "hello", timestamp: 1 },
+            { role: "toolresult", content: "debug info", timestamp: 2 },
+          ],
+        }),
+      ),
+      container,
+    );
+
+    expect(container.textContent).toContain("hello");
+    expect(container.textContent).toContain("debug info");
+  });
 });
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
index f5fb6e80b..fcaf5f5d6 100644
--- a/ui/src/ui/views/chat.ts
+++ b/ui/src/ui/views/chat.ts
@@ -434,7 +434,7 @@ function buildChatItems(props: ChatProps): Array<ChatItem | MessageGroup> {
     const msg = history[i];
     const normalized = normalizeMessage(msg);
 
-    if (!props.showThinking && normalized.role.toLowerCase() === "toolresult") {
+    if (!props.showThinking && isDebugMessage(msg)) {
       continue;
     }
 
@@ -484,3 +484,34 @@ function messageKey(message: unknown, index: number): string {
   if (timestamp != null) return `msg:${role}:${timestamp}:${index}`;
   return `msg:${role}:${index}`;
 }
+
+function extractTextContent(m: Record<string, unknown>): string {
+  if (typeof m.content === "string") return m.content;
+  if (Array.isArray(m.content)) {
+    return m.content
+      .filter((c: unknown) => (c as Record<string, unknown>).type === "text")
+      .map((c: unknown) => (c as Record<string, string>).text ?? "")
+      .join(" ");
+  }
+  return "";
+}
+
+function isDebugMessage(message: unknown): boolean {
+  const m = message as Record<string, unknown>;
+  const role = typeof m.role === "string" ? m.role.toLowerCase() : "";
+
+  // Filter tool results
+  if (role === "toolresult" || role === "tool_result" || role === "tool") {
+    return true;
+  }
+
+  // Filter system debug messages (heartbeats, context compaction, etc.)
+  if (role === "system") {
+    const content = extractTextContent(m);
+    if (/heartbeat|scheduled|context (compacted|trimmed)/i.test(content)) {
+      return true;
+    }
+  }
+
+  return false;
+}