feat(chat): add syntax highlighting to command input in EditToolViewer and SkillReviewDialog

- Implemented syntax highlighting for command inputs in the EditToolViewer component, enhancing readability.
- Updated the renderInput function in renderHelpers to utilize the highlightLines utility for improved command display.
- Added syntaxHighlight prop to SkillReviewDialog for consistent styling across components.

src/renderer/components/chat/items/linkedTool/EditToolViewer.tsx

@@ -36,6 +36,7 @@ export const EditToolViewer: React.FC<EditToolViewerProps> = ({ linkedTool, stat
         oldString={oldString}
         newString={newString}
         tokenCount={linkedTool.callTokens}
+        syntaxHighlight
       />
 
       {/* Show result status if available */}

src/renderer/components/chat/items/linkedTool/renderHelpers.tsx

@@ -12,6 +12,7 @@ import {
   DIFF_ADDED_TEXT,
   DIFF_REMOVED_TEXT,
 } from '@renderer/constants/cssVariables';
+import { highlightLines } from '@renderer/utils/syntaxHighlighter';
 
 /**
  * Renders the input section based on tool type with theme-aware styling.
@@ -58,6 +59,7 @@ export function renderInput(toolName: string, input: Record<string, unknown>): R
   if (toolName === 'Bash') {
     const command = input.command as string | undefined;
     const description = input.description as string | undefined;
+    const highlighted = command ? highlightLines(command, 'command.sh') : null;
 
     return (
       <div className="space-y-2">
@@ -66,11 +68,13 @@ export function renderInput(toolName: string, input: Record<string, unknown>): R
             {description}
           </div>
         )}
-        {command && (
+        {highlighted ? (
-          <code className="whitespace-pre-wrap break-all" style={{ color: COLOR_TEXT }}>
+          <code className="hljs block whitespace-pre-wrap break-all">
-            {command}
+            {highlighted.map((html, i) => (
+              <div key={i} dangerouslySetInnerHTML={{ __html: html || ' ' }} />
+            ))}
           </code>
-        )}
+        ) : null}
       </div>
     );
   }

src/renderer/components/extensions/skills/SkillReviewDialog.tsx

@@ -126,6 +126,7 @@ export const SkillReviewDialog = ({
                             oldString={change.oldContent ?? ''}
                             newString={change.newContent ?? ''}
                             maxHeight="max-h-80"
+                            syntaxHighlight
                           />
                         </div>
                       )}