From d5826c2dc7bd626eadc00a9743a38bf2ab363fbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=A2=E5=A5=8B=E7=8C=AB?= <kangfenmao@qq.com>
Date: Sun, 9 Nov 2025 12:27:15 +0800
Subject: [PATCH] fix(ui): truncate long Bash command in tag with popover
 (#11200)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 fix(ui): truncate long Bash command in tag with popover

Add automatic truncation for Bash commands exceeding 200 characters in the tag display. When truncated, users can hover over the tag to view the full command in a popover.

- Add MAX_TAG_LENGTH constant (200 chars)
- Implement command truncation logic
- Add Popover component for full command display on hover
- Prevent UI overflow issues with long commands

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* ♻️ refactor(ui): reduce MAX_TAG_LENGTH to 100 for smaller screens

Reduce the command truncation threshold from 200 to 100 characters to better support smaller screen sizes and improve readability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* docs: remove emoji requirement from conventional commits

Update commit message guidelines to use standard Conventional Commit format without emoji prefixes for better compatibility and consistency.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 CLAUDE.md                                     |  3 +--
 .../Tools/MessageAgentTools/BashTool.tsx      | 21 +++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 0728605824..372bff256c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -10,8 +10,7 @@ This file provides guidance to AI coding assistants when working with code in th
 - **Log centrally**: Route all logging through `loggerService` with the right context—no `console.log`.
 - **Research via subagent**: Lean on `subagent` for external docs, APIs, news, and references.
 - **Always propose before executing**: Before making any changes, clearly explain your planned approach and wait for explicit user approval to ensure alignment and prevent unwanted modifications.
-- **Write conventional commits with emoji**: Commit small, focused changes using emoji-prefixed Conventional Commit messages (e.g., `✨ feat:`, `🐛 fix:`, `♻️ refactor:`, `
-📝 docs:`).
+- **Write conventional commits**: Commit small, focused changes using Conventional Commit messages (e.g., `feat:`, `fix:`, `refactor:`, `docs:`).
 
 ## Development Commands
 
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
index d92b6461a4..9b9d98054d 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
@@ -1,10 +1,12 @@
 import type { CollapseProps } from 'antd'
-import { Tag } from 'antd'
+import { Popover, Tag } from 'antd'
 import { Terminal } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { BashToolInput as BashToolInputType, BashToolOutput as BashToolOutputType } from './types'
 
+const MAX_TAG_LENGTH = 100
+
 export function BashTool({
   input,
   output
@@ -15,6 +17,13 @@ export function BashTool({
   // 如果有输出，计算输出行数
   const outputLines = output ? output.split('\n').length : 0
 
+  // 处理命令字符串的截断
+  const command = input.command
+  const needsTruncate = command.length > MAX_TAG_LENGTH
+  const displayCommand = needsTruncate ? `${command.slice(0, MAX_TAG_LENGTH)}...` : command
+
+  const tagContent = <Tag className="whitespace-pre-wrap break-all font-mono">{displayCommand}</Tag>
+
   return {
     key: 'tool',
     label: (
@@ -26,7 +35,15 @@ export function BashTool({
           stats={output ? `${outputLines} ${outputLines === 1 ? 'line' : 'lines'}` : undefined}
         />
         <div className="mt-1">
-          <Tag className="whitespace-pre-wrap break-all font-mono">{input.command}</Tag>
+          {needsTruncate ? (
+            <Popover
+              content={<div className="max-w-xl whitespace-pre-wrap break-all font-mono">{command}</div>}
+              trigger="hover">
+              {tagContent}
+            </Popover>
+          ) : (
+            tagContent
+          )}
         </div>
       </>
     ),