From 81d8fb4537c115f3c8482d4e917309e5352b285e Mon Sep 17 00:00:00 2001
From: Hank Zhang <hankzhang@Hanks-MacBook-Pro.local>
Date: Wed, 17 Jun 2026 12:00:41 +0800
Subject: [PATCH] feat: add line numbers and horizontal scroll to code blocks

- AgentMarkdown: enable showLineNumbers (for multi-line blocks),
  wrapLines, line number styling (dimmed, non-selectable), and
  codeTagProps with whiteSpace:pre for proper horizontal scroll
- main.css: add overflow-x:auto to .chat-code-block and code block
  pre/div containers, add .linenumber styling
---
 src/renderer/src/assets/main.css              | 11 +++++++++++
 src/renderer/src/components/AgentMarkdown.tsx | 15 +++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index a1585ad6a..4f7437141 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -2920,6 +2920,7 @@ body {
 .chat-code-block {
   border-radius: 6px;
   overflow: hidden;
+  overflow-x: auto;
   margin: 6px 0 !important;
 }
 
@@ -2965,6 +2966,16 @@ body {
   margin: 0 !important;
   padding: 12px !important;
   background: var(--code-bg) !important;
+  overflow-x: auto;
+}
+
+/* Line numbers inside code blocks */
+.chat-code-block .linenumber {
+  min-width: 2.5em;
+  padding-right: 1em;
+  color: #636d83;
+  user-select: none;
+  text-align: right;
 }
 
 .chat-code-block span[class*="token"] {
diff --git a/src/renderer/src/components/AgentMarkdown.tsx b/src/renderer/src/components/AgentMarkdown.tsx
index c15682cbe..fe5e7abe6 100644
--- a/src/renderer/src/components/AgentMarkdown.tsx
+++ b/src/renderer/src/components/AgentMarkdown.tsx
@@ -108,12 +108,27 @@ function CodeBlock({
           style={_oneDark}
           language={language || "text"}
           PreTag="div"
+          showLineNumbers={code.split("\n").length > 1}
+          wrapLines={true}
+          lineNumberStyle={{
+            minWidth: "2.5em",
+            paddingRight: "1em",
+            color: "#636d83",
+            userSelect: "none",
+            textAlign: "right",
+          }}
           customStyle={{
             margin: 0,
             borderRadius: 0,
             fontSize: "13px",
             padding: "12px",
             background: "transparent",
+            overflowX: "auto",
+          }}
+          codeTagProps={{
+            style: {
+              whiteSpace: "pre",
+            },
           }}
         >
           {code}