abbyswag/qwen-code
1
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-19 09:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(vscode-ide-companion): bash toolcall

Browse Source
This commit is contained in:
yiliang114
2025-12-04 00:23:19 +08:00
parent b9b3b6d62e
commit 35f98723ca
4 changed files with 43 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ import {
ArrowUpIcon, ArrowUpIcon,
} from './icons/index.js'; } from './icons/index.js';
import { CompletionMenu } from './ui/CompletionMenu.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'; type EditMode = 'ask' | 'auto' | 'plan';

30
packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.css → packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.css
View File

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

48
packages/vscode-ide-companion/src/webview/components/toolcalls/ExecuteToolCall.tsx → packages/vscode-ide-companion/src/webview/components/toolcalls/Bash/Bash.tsx
View File

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

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

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