style(vscode-ide-companion): bash toolcall

packages/vscode-ide-companion/src/webview/components/InputForm.tsx

@@ -16,7 +16,7 @@ import {
   ArrowUpIcon,
 } from './icons/index.js';
 import { CompletionMenu } from './ui/CompletionMenu.js';
-import type { CompletionItem } from './CompletionTypes.js';
+import type { CompletionItem } from '../types/CompletionTypes.js';
 
 type EditMode = 'ask' | 'auto' | 'plan';
 

packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.css

@@ -7,7 +7,7 @@
  */
 
 /* Root container for execute tool call output */
-.execute-toolcall-card {
+.bash-toolcall-card {
   border: 0.5px solid var(--app-input-border);
   border-radius: 5px;
   background: var(--app-tool-background);
@@ -18,7 +18,7 @@
 }
 
 /* Content wrapper inside the card */
-.execute-toolcall-content {
+.bash-toolcall-content {
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -26,7 +26,7 @@
 }
 
 /* Individual input/output row */
-.execute-toolcall-row {
+.bash-toolcall-row {
   display: grid;
   grid-template-columns: max-content 1fr;
   border-top: 0.5px solid var(--app-input-border);
@@ -34,12 +34,12 @@
 }
 
 /* First row has no top border */
-.execute-toolcall-row:first-child {
+.bash-toolcall-row:first-child {
   border-top: none;
 }
 
 /* Row label (IN/OUT/ERROR) */
-.execute-toolcall-label {
+.bash-toolcall-label {
   grid-column: 1;
   color: var(--app-secondary-foreground);
   text-align: left;
@@ -50,7 +50,7 @@
 }
 
 /* Row content area */
-.execute-toolcall-row-content {
+.bash-toolcall-row-content {
   grid-column: 2;
   white-space: pre-wrap;
   word-break: break-word;
@@ -59,14 +59,18 @@
 }
 
 /* Truncated content styling */
-.execute-toolcall-row-content:not(.execute-toolcall-full) {
+.bash-toolcall-row-content:not(.bash-toolcall-full) {
   max-height: 60px;
-  mask-image: linear-gradient(to bottom, var(--app-primary-background) 40px, transparent 60px);
+  mask-image: linear-gradient(
+    to bottom,
+    var(--app-primary-background) 40px,
+    transparent 60px
+  );
   overflow: hidden;
 }
 
 /* Preformatted content */
-.execute-toolcall-pre {
+.bash-toolcall-pre {
   margin-block: 0;
   overflow: hidden;
   font-family: var(--app-monospace-font-family);
@@ -74,7 +78,7 @@
 }
 
 /* Code content */
-.execute-toolcall-code {
+.bash-toolcall-code {
   margin: 0;
   padding: 0;
   font-family: var(--app-monospace-font-family);
@@ -82,7 +86,7 @@
 }
 
 /* Output content with subtle styling */
-.execute-toolcall-output-subtle {
+.bash-toolcall-output-subtle {
   background-color: var(--app-code-background);
   white-space: pre;
   overflow-x: auto;
@@ -93,6 +97,6 @@
 }
 
 /* Error content styling */
-.execute-toolcall-error-content {
+.bash-toolcall-error-content {
   color: #c74e39;
 }

packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.tsx

@@ -7,9 +7,9 @@
  */
 
 import type React from 'react';
-import type { BaseToolCallProps } from './shared/types.js';
-import { ToolCallContainer } from './shared/LayoutComponents.js';
-import { safeTitle, groupContent } from './shared/utils.js';
+import type { BaseToolCallProps } from '../shared/types.js';
+import { ToolCallContainer } from '../shared/LayoutComponents.js';
+import { safeTitle, groupContent } from '../shared/utils.js';
 import './ExecuteToolCall.css';
 
 /**
@@ -42,21 +42,21 @@ export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
           <span className="flex-shrink-0 w-full">{commandText}</span>
         </div>
         {/* Error card - semantic DOM + Tailwind styles */}
-        <div className="execute-toolcall-card">
-          <div className="execute-toolcall-content">
+        <div className="bash-toolcall-card">
+          <div className="bash-toolcall-content">
             {/* IN row */}
-            <div className="execute-toolcall-row">
-              <div className="execute-toolcall-label">IN</div>
-              <div className="execute-toolcall-row-content">
-                <pre className="execute-toolcall-pre">{inputCommand}</pre>
+            <div className="bash-toolcall-row">
+              <div className="bash-toolcall-label">IN</div>
+              <div className="bash-toolcall-row-content">
+                <pre className="bash-toolcall-pre">{inputCommand}</pre>
               </div>
             </div>
 
             {/* ERROR row */}
-            <div className="execute-toolcall-row">
-              <div className="execute-toolcall-label">Error</div>
-              <div className="execute-toolcall-row-content">
-                <pre className="execute-toolcall-pre execute-toolcall-error-content">
+            <div className="bash-toolcall-row">
+              <div className="bash-toolcall-label">Error</div>
+              <div className="bash-toolcall-row-content">
+                <pre className="bash-toolcall-pre bash-toolcall-error-content">
                   {errors.join('\n')}
                 </pre>
               </div>
@@ -81,22 +81,22 @@ export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
           <span className="flex-shrink-0 w-full">{commandText}</span>
         </div>
         {/* Output card - semantic DOM + Tailwind styles */}
-        <div className="execute-toolcall-card">
-          <div className="execute-toolcall-content">
+        <div className="bash-toolcall-card">
+          <div className="bash-toolcall-content">
             {/* IN row */}
-            <div className="execute-toolcall-row">
-              <div className="execute-toolcall-label">IN</div>
-              <div className="execute-toolcall-row-content">
-                <pre className="execute-toolcall-pre">{inputCommand}</pre>
+            <div className="bash-toolcall-row">
+              <div className="bash-toolcall-label">IN</div>
+              <div className="bash-toolcall-row-content">
+                <pre className="bash-toolcall-pre">{inputCommand}</pre>
               </div>
             </div>
 
             {/* OUT row */}
-            <div className="execute-toolcall-row">
-              <div className="execute-toolcall-label">OUT</div>
-              <div className="execute-toolcall-row-content">
-                <div className="execute-toolcall-output-subtle">
-                  <pre className="execute-toolcall-pre">{truncatedOutput}</pre>
+            <div className="bash-toolcall-row">
+              <div className="bash-toolcall-label">OUT</div>
+              <div className="bash-toolcall-row-content">
+                <div className="bash-toolcall-output-subtle">
+                  <pre className="bash-toolcall-pre">{truncatedOutput}</pre>
                 </div>
               </div>
             </div>

packages/vscode-ide-companion/src/webview/components/toolcalls/index.tsx

@@ -13,7 +13,7 @@ import { GenericToolCall } from './GenericToolCall.js';
 import { ReadToolCall } from './ReadToolCall.js';
 import { WriteToolCall } from './WriteToolCall.js';
 import { EditToolCall } from './EditToolCall.js';
-import { ExecuteToolCall } from './ExecuteToolCall.js';
+import { ExecuteToolCall } from './Bash/Bash.js';
 import { SearchToolCall } from './SearchToolCall.js';
 import { ThinkToolCall } from './ThinkToolCall.js';
 import { TodoWriteToolCall } from './TodoWriteToolCall.js';