Merge pull request #1345 from QwenLM/feat/vscode-ida-companion-bash-toolcall-click-2

feat(vscode-ide-companion): in/output part in the bash toolcall can be clicked to open a temporary file

Author: tanzhenxin

packages/vscode-ide-companion/src/extension.test.ts

@@ -50,6 +50,9 @@ vi.mock('vscode', () => ({
     registerTextDocumentContentProvider: vi.fn(),
     onDidChangeWorkspaceFolders: vi.fn(),
     onDidGrantWorkspaceTrust: vi.fn(),
+    registerFileSystemProvider: vi.fn(() => ({
+      dispose: vi.fn(),
+    })),
   },
   commands: {
     registerCommand: vi.fn(),

packages/vscode-ide-companion/src/extension.ts

@@ -16,6 +16,7 @@ import {
 } from '@qwen-code/qwen-code-core/src/ide/detect-ide.js';
 import { WebViewProvider } from './webview/WebViewProvider.js';
 import { registerNewCommands } from './commands/index.js';
+import { ReadonlyFileSystemProvider } from './services/readonlyFileSystemProvider.js';
 
 const CLI_IDE_COMPANION_IDENTIFIER = 'qwenlm.qwen-code-vscode-ide-companion';
 const INFO_MESSAGE_SHOWN_KEY = 'qwenCodeInfoMessageShown';
@@ -110,6 +111,19 @@ export async function activate(context: vscode.ExtensionContext) {
 
   checkForUpdates(context, log);
 
+  // Create and register readonly file system provider
+  // The provider registers itself as a singleton in the constructor
+  const readonlyProvider = new ReadonlyFileSystemProvider();
+  context.subscriptions.push(
+    vscode.workspace.registerFileSystemProvider(
+      ReadonlyFileSystemProvider.getScheme(),
+      readonlyProvider,
+      { isCaseSensitive: true, isReadonly: true },
+    ),
+    readonlyProvider,
+  );
+  log('Readonly file system provider registered');
+
   const diffContentProvider = new DiffContentProvider();
   const diffManager = new DiffManager(
     log,

packages/vscode-ide-companion/src/ide-server.test.ts

@@ -38,6 +38,10 @@ vi.mock('node:os', async (importOriginal) => {
   };
 });
 
+vi.mock('@qwen-code/qwen-code-core/src/ide/detect-ide.js', () => ({
+  detectIdeFromEnv: vi.fn(() => ({ name: 'vscode', displayName: 'VS Code' })),
+}));
+
 const vscodeMock = vi.hoisted(() => ({
   workspace: {
     workspaceFolders: [

packages/vscode-ide-companion/src/services/readonlyFileSystemProvider.ts

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode';
+
+/**
+ * Readonly file system provider for temporary files
+ * Uses custom URI scheme to create readonly documents in VS Code
+ */
+export class ReadonlyFileSystemProvider
+  implements vscode.FileSystemProvider, vscode.Disposable
+{
+  private static readonly scheme = 'qwen-readonly';
+  private static instance: ReadonlyFileSystemProvider | null = null;
+
+  private readonly files = new Map<string, Uint8Array>();
+  private readonly emitter = new vscode.EventEmitter<
+    vscode.FileChangeEvent[]
+  >();
+  private readonly disposables: vscode.Disposable[] = [];
+
+  readonly onDidChangeFile = this.emitter.event;
+
+  constructor() {
+    // Ensure only one instance exists
+    if (ReadonlyFileSystemProvider.instance !== null) {
+      console.warn(
+        '[ReadonlyFileSystemProvider] Instance already exists, replacing with new instance',
+      );
+    }
+    this.disposables.push(this.emitter);
+    // Register as global singleton
+    ReadonlyFileSystemProvider.instance = this;
+  }
+
+  static getScheme(): string {
+    return ReadonlyFileSystemProvider.scheme;
+  }
+
+  /**
+   * Get the global singleton instance
+   * Returns null if not initialized yet
+   */
+  static getInstance(): ReadonlyFileSystemProvider | null {
+    return ReadonlyFileSystemProvider.instance;
+  }
+
+  /**
+   * Create a URI for a readonly temporary file (static version)
+   */
+  static createUri(fileName: string, content: string): vscode.Uri {
+    // For tool-call related filenames, keep the URI stable so repeated clicks focus the same document.
+    // Note: toolCallId can include underscores (e.g. "call_..."), so match everything after the prefix.
+    const isToolCallFile =
+      /^(bash-input|bash-output|execute-input|execute-output)-.+$/.test(
+        fileName,
+      );
+
+    if (isToolCallFile) {
+      return vscode.Uri.from({
+        scheme: ReadonlyFileSystemProvider.scheme,
+        path: `/${fileName}`,
+      });
+    }
+
+    // For other cases, keep the original approach with timestamp to avoid collisions.
+    const timestamp = Date.now();
+    const hash = Buffer.from(content.substring(0, 100)).toString('base64url');
+    const uniqueId = `${timestamp}-${hash.substring(0, 8)}`;
+    return vscode.Uri.from({
+      scheme: ReadonlyFileSystemProvider.scheme,
+      path: `/${fileName}-${uniqueId}`,
+    });
+  }
+
+  /**
+   * Create a URI for a readonly temporary file (instance method)
+   */
+  createUri(fileName: string, content: string): vscode.Uri {
+    return ReadonlyFileSystemProvider.createUri(fileName, content);
+  }
+
+  /**
+   * Set content for a URI
+   */
+  setContent(uri: vscode.Uri, content: string): void {
+    const buffer = Buffer.from(content, 'utf8');
+    const key = uri.toString();
+    const existed = this.files.has(key);
+    this.files.set(key, buffer);
+    this.emitter.fire([
+      {
+        type: existed
+          ? vscode.FileChangeType.Changed
+          : vscode.FileChangeType.Created,
+        uri,
+      },
+    ]);
+  }
+
+  /**
+   * Get content for a URI
+   */
+  getContent(uri: vscode.Uri): string | undefined {
+    const buffer = this.files.get(uri.toString());
+    return buffer ? Buffer.from(buffer).toString('utf8') : undefined;
+  }
+
+  // FileSystemProvider implementation
+
+  watch(): vscode.Disposable {
+    // No watching needed for readonly files
+    return new vscode.Disposable(() => {});
+  }
+
+  stat(uri: vscode.Uri): vscode.FileStat {
+    const buffer = this.files.get(uri.toString());
+    if (!buffer) {
+      throw vscode.FileSystemError.FileNotFound(uri);
+    }
+
+    return {
+      type: vscode.FileType.File,
+      ctime: Date.now(),
+      mtime: Date.now(),
+      size: buffer.byteLength,
+    };
+  }
+
+  readDirectory(): Array<[string, vscode.FileType]> {
+    // Not needed for our use case
+    return [];
+  }
+
+  createDirectory(): void {
+    throw vscode.FileSystemError.NoPermissions('Readonly file system');
+  }
+
+  readFile(uri: vscode.Uri): Uint8Array {
+    const buffer = this.files.get(uri.toString());
+    if (!buffer) {
+      throw vscode.FileSystemError.FileNotFound(uri);
+    }
+    return buffer;
+  }
+
+  writeFile(
+    uri: vscode.Uri,
+    content: Uint8Array,
+    options: { create: boolean; overwrite: boolean },
+  ): void {
+    // Check if file exists
+    const exists = this.files.has(uri.toString());
+
+    // For readonly files, only allow creation, not modification
+    if (exists && !options.overwrite) {
+      throw vscode.FileSystemError.FileExists(uri);
+    }
+    if (!exists && !options.create) {
+      throw vscode.FileSystemError.FileNotFound(uri);
+    }
+
+    this.files.set(uri.toString(), content);
+    this.emitter.fire([
+      {
+        type: exists
+          ? vscode.FileChangeType.Changed
+          : vscode.FileChangeType.Created,
+        uri,
+      },
+    ]);
+  }
+
+  delete(uri: vscode.Uri): void {
+    if (!this.files.has(uri.toString())) {
+      throw vscode.FileSystemError.FileNotFound(uri);
+    }
+    this.files.delete(uri.toString());
+    this.emitter.fire([{ type: vscode.FileChangeType.Deleted, uri }]);
+  }
+
+  rename(): void {
+    throw vscode.FileSystemError.NoPermissions('Readonly file system');
+  }
+
+  /**
+   * Clear all cached files
+   */
+  clear(): void {
+    this.files.clear();
+  }
+
+  dispose(): void {
+    this.clear();
+    this.disposables.forEach((d) => d.dispose());
+    // Clear global instance on dispose
+    if (ReadonlyFileSystemProvider.instance === this) {
+      ReadonlyFileSystemProvider.instance = null;
+    }
+  }
+}

packages/vscode-ide-companion/src/utils/editorGroupUtils.ts

@@ -53,11 +53,40 @@ export function findLeftGroupOfChatWebview(): vscode.ViewColumn | undefined {
   }
 }
 
+/**
+ * Wait for a condition to become true, driven by tab-group change events.
+ * Falls back to a timeout to avoid hanging forever.
+ */
+function waitForTabGroupsCondition(
+  condition: () => boolean,
+  timeout: number = 2000,
+): Promise<boolean> {
+  if (condition()) {
+    return Promise.resolve(true);
+  }
+
+  return new Promise<boolean>((resolve) => {
+    const subscription = vscode.window.tabGroups.onDidChangeTabGroups(() => {
+      if (!condition()) {
+        return;
+      }
+      clearTimeout(timeoutHandle);
+      subscription.dispose();
+      resolve(true);
+    });
+
+    const timeoutHandle = setTimeout(() => {
+      subscription.dispose();
+      resolve(false);
+    }, timeout);
+  });
+}
+
 /**
  * Ensure there is an editor group directly to the left of the Qwen chat webview.
  * - If one exists, return its ViewColumn.
  * - If none exists, focus the chat panel and create a new group on its left,
- *   then return the new group's ViewColumn (which equals the chat's previous column).
+ *   then return the new group's ViewColumn.
  * - If the chat webview cannot be located, returns undefined.
  */
 export async function ensureLeftGroupOfChatWebview(): Promise<
@@ -87,7 +116,7 @@ export async function ensureLeftGroupOfChatWebview(): Promise<
     return undefined;
   }
 
-  const previousChatColumn = webviewGroup.viewColumn;
+  const initialGroupCount = vscode.window.tabGroups.all.length;
 
   // Make the chat group active by revealing the panel
   try {
@@ -104,13 +133,30 @@ export async function ensureLeftGroupOfChatWebview(): Promise<
     return undefined;
   }
 
+  // Wait for the new group to actually be created (check that group count increased)
+  const groupCreated = await waitForTabGroupsCondition(
+    () => vscode.window.tabGroups.all.length > initialGroupCount,
+    1000, // 1 second timeout
+  );
+
+  if (!groupCreated) {
+    // Fallback if group creation didn't complete in time
+    return vscode.ViewColumn.One;
+  }
+
+  // After creating a new group to the left, the new group takes ViewColumn.One
+  // and all existing groups shift right. So the new left group is always ViewColumn.One.
+  // However, to be safe, let's query for it again.
+  const newLeftGroup = findLeftGroupOfChatWebview();
+
   // Restore focus to chat (optional), so we don't disturb user focus
   try {
     await vscode.commands.executeCommand(openChatCommand);
   } catch {
     // Ignore
   }
 
-  // The new left group's column equals the chat's previous column
-  return previousChatColumn;
+  // If we successfully found the new left group, return it
+  // Otherwise, fallback to ViewColumn.One (the newly created group should be first)
+  return newLeftGroup ?? vscode.ViewColumn.One;
 }

packages/vscode-ide-companion/src/webview/App.tsx

@@ -27,7 +27,7 @@ import type { TextMessage } from './hooks/message/useMessageHandling.js';
 import type { ToolCallData } from './components/messages/toolcalls/ToolCall.js';
 import { PermissionDrawer } from './components/PermissionDrawer/PermissionDrawer.js';
 import { ToolCall } from './components/messages/toolcalls/ToolCall.js';
-import { hasToolCallOutput } from './components/messages/toolcalls/shared/utils.js';
+import { hasToolCallOutput } from './utils/utils.js';
 import { EmptyState } from './components/layout/EmptyState.js';
 import { Onboarding } from './components/layout/Onboarding.js';
 import { type CompletionItem } from '../types/completionItemTypes.js';

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

@@ -3,10 +3,10 @@
  * Copyright 2025 Qwen Team
  * SPDX-License-Identifier: Apache-2.0
  *
- * Execute tool call styles - Enhanced styling with semantic class names
+ * Bash tool call styles - Enhanced styling with semantic class names
  */
 
-/* Root container for execute tool call output */
+/* Root container for bash tool call output */
 .bash-toolcall-card {
   border: 0.5px solid var(--app-input-border);
   border-radius: 5px;
@@ -100,3 +100,9 @@
 .bash-toolcall-error-content {
   color: #c74e39;
 }
+
+/* Row with copy button */
+.bash-toolcall-row-with-copy {
+  position: relative;
+  grid-template-columns: max-content 1fr max-content;
+}