feat: add BashToolViewer with collapsible output and expanded syntax highlighting

src/renderer/components/chat/items/LinkedToolItem.tsx

@@ -14,6 +14,7 @@ import {
   getToolContextTokens,
   getToolStatus,
   getToolSummary,
+  hasBashContent,
   hasEditContent,
   hasReadContent,
   hasSkillInstructions,
@@ -31,6 +32,7 @@ import { Wrench } from 'lucide-react';
 import { BaseItem, StatusDot } from './BaseItem';
 import { formatDuration } from './baseItemHelpers';
 import {
+  BashToolViewer,
   DefaultToolViewer,
   EditToolViewer,
   ReadToolViewer,
@@ -139,7 +141,9 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = React.memo(function
   const useWriteViewer =
     linkedTool.name === 'Write' && hasWriteContent(linkedTool) && !linkedTool.result?.isError;
   const useSkillViewer = linkedTool.name === 'Skill' && hasSkillInstructions(linkedTool);
-  const useDefaultViewer = !useReadViewer && !useEditViewer && !useWriteViewer && !useSkillViewer;
+  const useBashViewer = linkedTool.name === 'Bash' && hasBashContent(linkedTool);
+  const useDefaultViewer =
+    !useReadViewer && !useEditViewer && !useWriteViewer && !useSkillViewer && !useBashViewer;
 
   // Check if we should show error display for Read/Write tools
   const showReadError = linkedTool.name === 'Read' && linkedTool.result?.isError;
@@ -177,6 +181,9 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = React.memo(function
         {/* Skill tool with instructions */}
         {useSkillViewer && <SkillToolViewer linkedTool={linkedTool} />}
 
+        {/* Bash tool with syntax-highlighted command */}
+        {useBashViewer && <BashToolViewer linkedTool={linkedTool} status={status} />}
+
         {/* Default rendering for other tools */}
         {useDefaultViewer && <DefaultToolViewer linkedTool={linkedTool} status={status} />}
 

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

@@ -0,0 +1,52 @@
+/**
+ * BashToolViewer
+ *
+ * Renders Bash tool calls with syntax-highlighted command input
+ * via CodeBlockViewer and collapsible output section.
+ */
+
+import React from 'react';
+
+import { CodeBlockViewer } from '@renderer/components/chat/viewers';
+
+import { type ItemStatus } from '../BaseItem';
+
+import { CollapsibleOutputSection } from './CollapsibleOutputSection';
+import { renderOutput } from './renderHelpers';
+
+import type { LinkedToolItem } from '@renderer/types/groups';
+
+interface BashToolViewerProps {
+  linkedTool: LinkedToolItem;
+  status: ItemStatus;
+}
+
+export const BashToolViewer: React.FC<BashToolViewerProps> = ({ linkedTool, status }) => {
+  const command = linkedTool.input.command as string;
+  const description = linkedTool.input.description as string | undefined;
+
+  // Use the description (truncated) as the file name label, or fallback to "bash"
+  const fileName = description
+    ? description.length > 60
+      ? description.slice(0, 57) + '...'
+      : description
+    : 'bash';
+
+  return (
+    <>
+      {/* Input Section — Syntax-highlighted command */}
+      <CodeBlockViewer
+        fileName={fileName}
+        content={command}
+        language="bash"
+      />
+
+      {/* Output Section — Collapsible */}
+      {!linkedTool.isOrphaned && linkedTool.result && (
+        <CollapsibleOutputSection status={status}>
+          {renderOutput(linkedTool.result.content)}
+        </CollapsibleOutputSection>
+      )}
+    </>
+  );
+};

src/renderer/components/chat/items/linkedTool/index.ts

@@ -4,6 +4,7 @@
  * Exports all specialized tool viewer components.
  */
 
+export { BashToolViewer } from './BashToolViewer';
 export { CollapsibleOutputSection } from './CollapsibleOutputSection';
 export { DefaultToolViewer } from './DefaultToolViewer';
 export { EditToolViewer } from './EditToolViewer';