From 35f98723ca11031b8cfa9c39849efd87438e6c29 Mon Sep 17 00:00:00 2001 From: yiliang114 <1204183885@qq.com> Date: Thu, 4 Dec 2025 00:23:19 +0800 Subject: [PATCH] style(vscode-ide-companion): bash toolcall --- .../src/webview/components/InputForm.tsx | 2 +- .../{ExecuteToolCall.css => Bash/Bash.css} | 30 +++++++----- .../{ExecuteToolCall.tsx => Bash/Bash.tsx} | 48 +++++++++---------- .../webview/components/toolcalls/index.tsx | 2 +- 4 files changed, 43 insertions(+), 39 deletions(-) rename packages/vscode-ide-companion/src/webview/components/toolcalls/{ExecuteToolCall.css => Bash/Bash.css} (79%) rename packages/vscode-ide-companion/src/webview/components/toolcalls/{ExecuteToolCall.tsx => Bash/Bash.tsx} (68%) diff --git a/packages/vscode-ide-companion/src/webview/components/InputForm.tsx b/packages/vscode-ide-companion/src/webview/components/InputForm.tsx index 17559cb7..61c5f7b3 100644 --- a/packages/vscode-ide-companion/src/webview/components/InputForm.tsx +++ b/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'; diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.css b/packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.css similarity index 79% rename from packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.css rename to packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.css index dfdeefef..bbd8080d 100644 --- a/packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.css +++ b/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; -} \ No newline at end of file +} diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.tsx similarity index 68% rename from packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.tsx rename to packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.tsx index aa7d9247..78dc1972 100644 --- a/packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.tsx +++ b/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 = ({ toolCall }) => { {commandText} {/* Error card - semantic DOM + Tailwind styles */} -
-
+
+
{/* IN row */} -
-
IN
-
- 
{inputCommand}
+
+
IN
+
+ 
{inputCommand}
{/* ERROR row */} -
-
Error
-
- 
+            

+              
Error

+              

+                
                   {errors.join('\n')}
                 

               

@@ -81,22 +81,22 @@ export const ExecuteToolCall: React.FC = ({ toolCall }) => {
           {commandText}
         

         {/* Output card - semantic DOM + Tailwind styles */}
-        

-          

+        

+          

             {/* IN row */}
-            

-              
IN

-              

-                
{inputCommand}

+            

+              
IN

+              

+                
{inputCommand}

               

             

 
             {/* OUT row */}
-            

-              
OUT

-              

-                

-                  
{truncatedOutput}

+            

+              
OUT

+              

+                

+                  
{truncatedOutput}

                 

               

             

diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/index.tsx b/packages/vscode-ide-companion/src/webview/components/toolcalls/index.tsx
index 1c7783a9..17dadd99 100644
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/index.tsx
+++ b/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';