fix(vscode-ide-companion): fix blank screen in VS Code 0.14.1 webview (#2959)

* fix(vscode-ide-companion): avoid pulling Node.js modules into webview bundle

- Add wildcard to esbuild external config to exclude deep sub-path imports
- Inline isSupportedImageMimeType to remove core package dependency
- Create browser-safe tokenLimits.ts to avoid dynamic require at runtime
- Update App.tsx to use local tokenLimits module

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

* chore(vscode-ide-companion): bump version to 0.14.2

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

---------

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

packages/vscode-ide-companion/esbuild.js

@@ -179,7 +179,12 @@ async function main() {
     // Since @qwen-code/webui marks it as external in its own Vite build, the
     // browser bundle must also mark it external to avoid bundling Node.js-only
     // modules (undici, @grpc/grpc-js, fs, stream, etc.) into the webview.
-    external: ['@qwen-code/qwen-code-core'],
+    // The wildcard ensures deep sub-path imports (e.g.
+    // '@qwen-code/qwen-code-core/src/core/tokenLimits.js') are also excluded;
+    // without it esbuild only matches the bare package name and attempts to
+    // bundle the sub-path, which triggers "Dynamic require is not supported"
+    // at runtime in the browser.
+    external: ['@qwen-code/qwen-code-core', '@qwen-code/qwen-code-core/*'],
     logLevel: 'silent',
     plugins: [reactDedupPlugin, cssInjectPlugin, esbuildProblemMatcherPlugin],
     jsx: 'automatic', // Use new JSX transform (React 17+)

packages/vscode-ide-companion/package.json

@@ -2,7 +2,7 @@
   "name": "qwen-code-vscode-ide-companion",
   "displayName": "Qwen Code Companion",
   "description": "Enable Qwen Code with direct access to your VS Code workspace.",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "publisher": "qwenlm",
   "icon": "assets/icon.png",
   "repository": {

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

@@ -4,8 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { isSupportedImageMimeType } from '@qwen-code/qwen-code-core/src/utils/request-tokenizer/supportedImageFormats.js';
-
 // ---------- Types ----------
 
 export interface ImageAttachment {
@@ -61,6 +59,31 @@ export function unescapePath(filePath: string): string {
   );
 }
 
+// ---------- Supported image MIME types ----------
+// Inlined from @qwen-code/qwen-code-core to avoid pulling Node.js-only modules
+// into the browser webview bundle (esbuild marks core as external, but deep
+// sub-path imports like core/src/utils/... bypass the external filter and cause
+// "Dynamic require is not supported" at runtime).
+
+const SUPPORTED_IMAGE_MIME_TYPES: readonly string[] = [
+  'image/bmp',
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/tiff',
+  'image/webp',
+  'image/heic',
+];
+
+/**
+ * Check whether a MIME type is supported for pasted-image processing.
+ * @param mimeType - The MIME type string to validate
+ * @returns `true` when the type is in the supported list
+ */
+function isSupportedImageMimeType(mimeType: string): boolean {
+  return SUPPORTED_IMAGE_MIME_TYPES.includes(mimeType);
+}
+
 // ---------- Image format detection ----------
 
 const PASTED_IMAGE_MIME_TO_EXTENSION: Record<string, string> = {

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

@@ -0,0 +1,196 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Browser-safe subset of @qwen-code/qwen-code-core tokenLimits.
+ *
+ * The webview bundle (IIFE, platform: browser) cannot `require` Node.js
+ * packages. This module replicates the constants and logic the webview
+ * actually uses so that the core package never needs to be pulled into the
+ * browser bundle.
+ *
+ * Keep this file in sync with:
+ *   packages/core/src/core/tokenLimits.ts
+ */
+
+type TokenCount = number;
+
+// ---------------------------------------------------------------------------
+// Public constants
+// ---------------------------------------------------------------------------
+
+/** Default input context window size: 128 K tokens (power-of-two). */
+export const DEFAULT_TOKEN_LIMIT: TokenCount = 131_072;
+
+// ---------------------------------------------------------------------------
+// Token limit types
+// ---------------------------------------------------------------------------
+
+export type TokenLimitType = 'input' | 'output';
+
+// ---------------------------------------------------------------------------
+// Internal constants
+// ---------------------------------------------------------------------------
+
+const LIMITS = {
+  '32k': 32_768,
+  '64k': 65_536,
+  '128k': 131_072,
+  '192k': 196_608,
+  '200k': 200_000,
+  '256k': 262_144,
+  '272k': 272_000,
+  '400k': 400_000,
+  '512k': 524_288,
+  '1m': 1_000_000,
+  '4k': 4_096,
+  '8k': 8_192,
+  '16k': 16_384,
+} as const;
+
+const DEFAULT_OUTPUT_TOKEN_LIMIT: TokenCount = 32_000;
+
+// ---------------------------------------------------------------------------
+// Model name normaliser
+// ---------------------------------------------------------------------------
+
+/**
+ * Robust normaliser: strips provider prefixes, pipes/colons, date/version
+ * suffixes, quantisation markers, etc.
+ * @param model - Raw model identifier string
+ * @returns Normalised lowercase model name
+ */
+function normalize(model: string): string {
+  let s = (model ?? '').toLowerCase().trim();
+
+  s = s.replace(/^.*\//, '');
+  s = s.split('|').pop() ?? s;
+  s = s.split(':').pop() ?? s;
+  s = s.replace(/\s+/g, '-');
+  s = s.replace(/-preview/g, '');
+
+  if (
+    !s.match(/^qwen-(?:plus|flash|vl-max)-latest$/) &&
+    !s.match(/^kimi-k2-\d{4}$/)
+  ) {
+    s = s.replace(
+      /-(?:\d{4,}|\d+x\d+b|v\d+(?:\.\d+)*|(?<=-[^-]+-)\d+(?:\.\d+)+|latest|exp)$/g,
+      '',
+    );
+  }
+
+  s = s.replace(/-(?:\d?bit|int[48]|bf16|fp16|q[45]|quantized)$/g, '');
+  return s;
+}
+
+// ---------------------------------------------------------------------------
+// Input context-window patterns (most specific → most general)
+// ---------------------------------------------------------------------------
+
+const INPUT_PATTERNS: Array<[RegExp, TokenCount]> = [
+  // Google Gemini
+  [/^gemini-3/, LIMITS['1m']],
+  [/^gemini-/, LIMITS['1m']],
+
+  // OpenAI
+  [/^gpt-5/, LIMITS['272k']],
+  [/^gpt-/, LIMITS['128k']],
+  [/^o\d/, LIMITS['200k']],
+
+  // Anthropic Claude
+  [/^claude-/, LIMITS['200k']],
+
+  // Alibaba / Qwen
+  [/^qwen3-coder-plus/, LIMITS['1m']],
+  [/^qwen3-coder-flash/, LIMITS['1m']],
+  [/^qwen3\.\d/, LIMITS['1m']],
+  [/^qwen-plus-latest$/, LIMITS['1m']],
+  [/^qwen-flash-latest$/, LIMITS['1m']],
+  [/^coder-model$/, LIMITS['1m']],
+  [/^qwen3-max/, LIMITS['256k']],
+  [/^qwen3-coder-/, LIMITS['256k']],
+  [/^qwen/, LIMITS['256k']],
+
+  // DeepSeek
+  [/^deepseek/, LIMITS['128k']],
+
+  // Zhipu GLM
+  [/^glm-5/, 202_752 as TokenCount],
+  [/^glm-/, 202_752 as TokenCount],
+
+  // MiniMax
+  [/^minimax-m2\.5/i, LIMITS['192k']],
+  [/^minimax-/i, LIMITS['200k']],
+
+  // Moonshot / Kimi
+  [/^kimi-/, LIMITS['256k']],
+
+  // ByteDance Seed-OSS
+  [/^seed-oss/, LIMITS['512k']],
+];
+
+// ---------------------------------------------------------------------------
+// Output token-limit patterns
+// ---------------------------------------------------------------------------
+
+const OUTPUT_PATTERNS: Array<[RegExp, TokenCount]> = [
+  [/^gemini-3/, LIMITS['64k']],
+  [/^gemini-/, LIMITS['8k']],
+
+  [/^gpt-5/, LIMITS['128k']],
+  [/^gpt-/, LIMITS['16k']],
+  [/^o\d/, LIMITS['128k']],
+
+  [/^claude-opus-4-6/, LIMITS['128k']],
+  [/^claude-sonnet-4-6/, LIMITS['64k']],
+  [/^claude-/, LIMITS['64k']],
+
+  [/^qwen3\.\d/, LIMITS['64k']],
+  [/^coder-model$/, LIMITS['64k']],
+  [/^qwen/, LIMITS['32k']],
+
+  [/^deepseek-reasoner/, LIMITS['64k']],
+  [/^deepseek-r1/, LIMITS['64k']],
+  [/^deepseek-chat/, LIMITS['8k']],
+
+  [/^glm-5/, LIMITS['16k']],
+  [/^glm-4\.7/, LIMITS['16k']],
+
+  [/^minimax-m2\.5/i, LIMITS['64k']],
+
+  [/^kimi-k2\.5/, LIMITS['32k']],
+];
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Return the token limit for a given model name.
+ *
+ * This is a browser-safe mirror of `tokenLimit()` in
+ * `@qwen-code/qwen-code-core`. The webview only calls this as a fallback
+ * when `modelInfo._meta.contextLimit` is unavailable.
+ *
+ * @param model - The model identifier string
+ * @param type  - 'input' for context window, 'output' for generation limit
+ * @returns Maximum token count for the model and type
+ */
+export function tokenLimit(
+  model: string,
+  type: TokenLimitType = 'input',
+): TokenCount {
+  const norm = normalize(model);
+  const patterns = type === 'output' ? OUTPUT_PATTERNS : INPUT_PATTERNS;
+
+  for (const [regex, limit] of patterns) {
+    if (regex.test(norm)) {
+      return limit;
+    }
+  }
+
+  return type === 'output' ? DEFAULT_OUTPUT_TOKEN_LIMIT : DEFAULT_TOKEN_LIMIT;
+}

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

@@ -52,10 +52,7 @@ import type { ApprovalModeValue } from '../types/approvalModeValueTypes.js';
 import type { PlanEntry, UsageStatsPayload } from '../types/chatTypes.js';
 import type { ModelInfo, AvailableCommand } from '@agentclientprotocol/sdk';
 import type { Question } from '../types/acpTypes.js';
-import {
-  DEFAULT_TOKEN_LIMIT,
-  tokenLimit,
-} from '@qwen-code/qwen-code-core/src/core/tokenLimits.js';
+import { DEFAULT_TOKEN_LIMIT, tokenLimit } from '../utils/tokenLimits.js';
 import { useImagePaste, type WebViewImageMessage } from './hooks/useImage.js';
 
 export const App: React.FC = () => {