feat(insight): integrate JSONL file reading utility and enhance base CSS styles

- Add HTML template for insights display.
- Create JavaScript application logic for rendering insights.
- Introduce CSS styles for layout and design.
- Develop a test generator for validating the static insight generator.
- Define TypeScript interfaces for structured insight data.
- Refactor insight command to generate insights and open in browser.
- Remove the need for a server process by generating static files directly.

.github/workflows/release-vscode-companion.yml

@@ -0,0 +1,207 @@
+name: 'Release VSCode IDE Companion'
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'The version to release (e.g., v0.1.11). Required for manual patch releases.'
+        required: false
+        type: 'string'
+      ref:
+        description: 'The branch or ref (full git sha) to release from.'
+        required: true
+        type: 'string'
+        default: 'main'
+      dry_run:
+        description: 'Run a dry-run of the release process; no branches, vsix packages or GitHub releases will be created.'
+        required: true
+        type: 'boolean'
+        default: true
+      create_preview_release:
+        description: 'Auto apply the preview release tag, input version is ignored.'
+        required: false
+        type: 'boolean'
+        default: false
+      force_skip_tests:
+        description: 'Select to skip the "Run Tests" step in testing. Prod releases should run tests'
+        required: false
+        type: 'boolean'
+        default: false
+
+concurrency:
+  group: '${{ github.workflow }}'
+  cancel-in-progress: false
+
+jobs:
+  release-vscode-companion:
+    runs-on: 'ubuntu-latest'
+    environment:
+      name: 'production-release'
+      url: '${{ github.server_url }}/${{ github.repository }}/releases/tag/vscode-companion-${{ steps.version.outputs.RELEASE_TAG }}'
+    if: |-
+      ${{ github.repository == 'QwenLM/qwen-code' }}
+    permissions:
+      contents: 'read'
+      issues: 'write'
+
+    steps:
+      - name: 'Checkout'
+        uses: 'actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8' # ratchet:actions/checkout@v5
+        with:
+          ref: '${{ github.event.inputs.ref || github.sha }}'
+          fetch-depth: 0
+
+      - name: 'Set booleans for simplified logic'
+        env:
+          CREATE_PREVIEW_RELEASE: '${{ github.event.inputs.create_preview_release }}'
+          DRY_RUN_INPUT: '${{ github.event.inputs.dry_run }}'
+        id: 'vars'
+        run: |-
+          is_preview="false"
+          if [[ "${CREATE_PREVIEW_RELEASE}" == "true" ]]; then
+            is_preview="true"
+          fi
+          echo "is_preview=${is_preview}" >> "${GITHUB_OUTPUT}"
+
+          is_dry_run="false"
+          if [[ "${DRY_RUN_INPUT}" == "true" ]]; then
+            is_dry_run="true"
+          fi
+          echo "is_dry_run=${is_dry_run}" >> "${GITHUB_OUTPUT}"
+
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020' # ratchet:actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: 'package-lock.json'
+
+      - name: 'Install Dependencies'
+        env:
+          NPM_CONFIG_PREFER_OFFLINE: 'true'
+        run: |-
+          npm ci
+
+      - name: 'Install VSCE and OVSX'
+        run: |-
+          npm install -g @vscode/vsce
+          npm install -g ovsx
+
+      - name: 'Get the version'
+        id: 'version'
+        working-directory: 'packages/vscode-ide-companion'
+        run: |
+          # Get the base version from package.json regardless of scenario
+          BASE_VERSION=$(node -p "require('./package.json').version")
+
+          if [[ "${IS_PREVIEW}" == "true" ]]; then
+            # Generate preview version with timestamp based on actual package version
+            TIMESTAMP=$(date +%Y%m%d%H%M%S)
+            PREVIEW_VERSION="${BASE_VERSION}-preview.${TIMESTAMP}"
+            RELEASE_TAG="preview.${TIMESTAMP}"
+
+            echo "RELEASE_TAG=${RELEASE_TAG}" >> "$GITHUB_OUTPUT"
+            echo "RELEASE_VERSION=${PREVIEW_VERSION}" >> "$GITHUB_OUTPUT"
+            echo "VSCODE_TAG=preview" >> "$GITHUB_OUTPUT"
+          else
+            # Use specified version or get from package.json
+            if [[ -n "${MANUAL_VERSION}" ]]; then
+              RELEASE_VERSION="${MANUAL_VERSION#v}" # Remove 'v' prefix if present
+              RELEASE_TAG="${MANUAL_VERSION#v}" # Remove 'v' prefix if present
+            else
+              RELEASE_VERSION="${BASE_VERSION}"
+              RELEASE_TAG="${BASE_VERSION}"
+            fi
+
+            echo "RELEASE_TAG=${RELEASE_TAG}" >> "$GITHUB_OUTPUT"
+            echo "RELEASE_VERSION=${RELEASE_VERSION}" >> "$GITHUB_OUTPUT"
+            echo "VSCODE_TAG=latest" >> "$GITHUB_OUTPUT"
+          fi
+        env:
+          IS_PREVIEW: '${{ steps.vars.outputs.is_preview }}'
+          MANUAL_VERSION: '${{ inputs.version }}'
+
+      - name: 'Update package version (for preview releases)'
+        if: '${{ steps.vars.outputs.is_preview == ''true'' }}'
+        working-directory: 'packages/vscode-ide-companion'
+        env:
+          RELEASE_VERSION: '${{ steps.version.outputs.RELEASE_VERSION }}'
+        run: |-
+          # Update package.json with preview version
+          npm version "${RELEASE_VERSION}" --no-git-tag-version --allow-same-version
+
+      - name: 'Run Tests'
+        if: |-
+          ${{ github.event.inputs.force_skip_tests != 'true' }}
+        working-directory: 'packages/vscode-ide-companion'
+        run: |
+          npm run test:ci
+        env:
+          OPENAI_API_KEY: '${{ secrets.OPENAI_API_KEY }}'
+          OPENAI_BASE_URL: '${{ secrets.OPENAI_BASE_URL }}'
+          OPENAI_MODEL: '${{ secrets.OPENAI_MODEL }}'
+
+      - name: 'Prepare VSCode Extension'
+        run: |
+          # Build and stage the extension + bundled CLI once.
+          npm --workspace=qwen-code-vscode-ide-companion run prepackage
+
+      - name: 'Package VSIX (dry run)'
+        if: '${{ steps.vars.outputs.is_dry_run == ''true'' }}'
+        working-directory: 'packages/vscode-ide-companion'
+        run: |-
+          if [[ "${{ steps.vars.outputs.is_preview }}" == "true" ]]; then
+            vsce package --pre-release --out ../qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix
+          else
+            vsce package --out ../qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix
+          fi
+
+      - name: 'Upload VSIX Artifact (dry run)'
+        if: '${{ steps.vars.outputs.is_dry_run == ''true'' }}'
+        uses: 'actions/upload-artifact@v4'
+        with:
+          name: 'qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix'
+          path: 'packages/qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix'
+          if-no-files-found: 'error'
+
+      - name: 'Publish to Microsoft Marketplace'
+        if: '${{ steps.vars.outputs.is_dry_run == ''false'' }}'
+        working-directory: 'packages/vscode-ide-companion'
+        env:
+          VSCE_PAT: '${{ secrets.VSCE_PAT }}'
+          VSCODE_TAG: '${{ steps.version.outputs.VSCODE_TAG }}'
+        run: |-
+          if [[ "${{ steps.vars.outputs.is_preview }}" == "true" ]]; then
+            echo "Skipping Microsoft Marketplace for preview release"
+          else
+            vsce publish --pat "${VSCE_PAT}" --tag "${VSCODE_TAG}"
+          fi
+
+      - name: 'Publish to OpenVSX'
+        if: '${{ steps.vars.outputs.is_dry_run == ''false'' }}'
+        working-directory: 'packages/vscode-ide-companion'
+        env:
+          OVSX_TOKEN: '${{ secrets.OVSX_TOKEN }}'
+          VSCODE_TAG: '${{ steps.version.outputs.VSCODE_TAG }}'
+        run: |-
+          if [[ "${{ steps.vars.outputs.is_preview }}" == "true" ]]; then
+            # For preview releases, publish with preview tag
+            # First package the extension for preview
+            vsce package --pre-release --out ../qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix
+            ovsx publish ../qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix --pat "${OVSX_TOKEN}" --pre-release
+          else
+            # Package and publish normally
+            vsce package --out ../qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix
+            ovsx publish ../qwen-code-vscode-companion-${{ steps.version.outputs.RELEASE_VERSION }}.vsix --pat "${OVSX_TOKEN}" --tag "${VSCODE_TAG}"
+          fi
+
+      - name: 'Create Issue on Failure'
+        if: |-
+          ${{ failure() }}
+        env:
+          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+          DETAILS_URL: '${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+        run: |-
+          gh issue create \
+            --title "VSCode IDE Companion Release Failed for ${{ steps.version.outputs.RELEASE_VERSION }} on $(date +'%Y-%m-%d')" \
+            --body "The VSCode IDE Companion release workflow failed. See the full run for details: ${DETAILS_URL}"

README.md

@@ -5,6 +5,8 @@
 [![Node.js Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen.svg)](https://nodejs.org/)
 [![Downloads](https://img.shields.io/npm/dm/@qwen-code/qwen-code.svg)](https://www.npmjs.com/package/@qwen-code/qwen-code)
 
+<a href="https://trendshift.io/repositories/15287" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15287" alt="QwenLM%2Fqwen-code | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+
 **An open-source AI agent that lives in your terminal.**
 
 <a href="https://qwenlm.github.io/qwen-code-docs/zh/users/overview">中文</a> |

packages/cli/src/commands/extensions/utils.test.ts

@@ -5,7 +5,8 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { getExtensionManager } from './utils.js';
+import { getExtensionManager, extensionToOutputString } from './utils.js';
+import type { Extension, ExtensionManager } from '@qwen-code/qwen-code-core';
 
 const mockRefreshCache = vi.fn();
 const mockExtensionManagerInstance = {
@@ -64,3 +65,70 @@ describe('getExtensionManager', () => {
     );
   });
 });
+
+describe('extensionToOutputString', () => {
+  const mockIsEnabled = vi.fn();
+  const mockExtensionManager = {
+    isEnabled: mockIsEnabled,
+  } as unknown as ExtensionManager;
+
+  const createMockExtension = (overrides = {}): Extension => ({
+    id: 'test-ext-id',
+    name: 'test-extension',
+    version: '1.0.0',
+    isActive: true,
+    path: '/path/to/extension',
+    contextFiles: [],
+    config: { name: 'test-extension', version: '1.0.0' },
+    ...overrides,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockIsEnabled.mockReturnValue(true);
+  });
+
+  it('should include status icon when inline is false', () => {
+    const extension = createMockExtension();
+    const result = extensionToOutputString(
+      extension,
+      mockExtensionManager,
+      '/workspace',
+      false,
+    );
+
+    // Should contain either ✓ or ✗ (with ANSI color codes)
+    expect(result).toMatch(/test-extension/);
+    expect(result).toContain('(1.0.0)');
+  });
+
+  it('should exclude status icon when inline is true', () => {
+    const extension = createMockExtension();
+    const result = extensionToOutputString(
+      extension,
+      mockExtensionManager,
+      '/workspace',
+      true,
+    );
+
+    // Should start with extension name (after stripping potential whitespace)
+    expect(result.trim()).toMatch(/^test-extension/);
+  });
+
+  it('should default inline to false', () => {
+    const extension = createMockExtension();
+    const resultWithoutInline = extensionToOutputString(
+      extension,
+      mockExtensionManager,
+      '/workspace',
+    );
+    const resultWithInlineFalse = extensionToOutputString(
+      extension,
+      mockExtensionManager,
+      '/workspace',
+      false,
+    );
+
+    expect(resultWithoutInline).toEqual(resultWithInlineFalse);
+  });
+});

packages/cli/src/commands/extensions/utils.ts

@@ -32,6 +32,7 @@ export function extensionToOutputString(
   extension: Extension,
   extensionManager: ExtensionManager,
   workspaceDir: string,
+  inline = false,
 ): string {
   const cwd = workspaceDir;
   const userEnabled = extensionManager.isEnabled(
@@ -44,7 +45,7 @@ export function extensionToOutputString(
   );
 
   const status = workspaceEnabled ? chalk.green('✓') : chalk.red('✗');
-  let output = `${status} ${extension.config.name} (${extension.config.version})`;
+  let output = `${inline ? '' : status} ${extension.config.name} (${extension.config.version})`;
   output += `\n Path: ${extension.path}`;
   if (extension.installMetadata) {
     output += `\n Source: ${extension.installMetadata.source} (Type: ${extension.installMetadata.type})`;

packages/cli/src/commands/mcp/add.ts

@@ -139,7 +139,7 @@ export const addCommand: CommandModule = {
   describe: 'Add a server',
   builder: (yargs) =>
     yargs
-      .usage('Usage: gemini mcp add [options] <name> <commandOrUrl> [args...]')
+      .usage('Usage: qwen mcp add [options] <name> <commandOrUrl> [args...]')
       .parserConfiguration({
         'unknown-options-as-args': true, // Pass unknown options as server args
         'populate--': true, // Populate server args after -- separator

packages/cli/src/services/BuiltinCommandLoader.ts

@@ -39,6 +39,7 @@ import { themeCommand } from '../ui/commands/themeCommand.js';
 import { toolsCommand } from '../ui/commands/toolsCommand.js';
 import { vimCommand } from '../ui/commands/vimCommand.js';
 import { setupGithubCommand } from '../ui/commands/setupGithubCommand.js';
+import { insightCommand } from '../ui/commands/insightCommand.js';
 
 /**
  * Loads the core, hard-coded slash commands that are an integral part
@@ -88,6 +89,7 @@ export class BuiltinCommandLoader implements ICommandLoader {
       vimCommand,
       setupGithubCommand,
       terminalSetupCommand,
+      insightCommand,
     ];
 
     return allDefinitions.filter((cmd): cmd is SlashCommand => cmd !== null);

packages/cli/src/services/insight/generators/DataProcessor.ts

@@ -0,0 +1,324 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { read as readJsonlFile } from '@qwen-code/qwen-code-core';
+import type {
+  InsightData,
+  HeatMapData,
+  TokenUsageData,
+  AchievementData,
+  StreakData,
+} from '../types/StaticInsightTypes.js';
+import type { ChatRecord } from '@qwen-code/qwen-code-core';
+
+export class DataProcessor {
+  // Helper function to format date as YYYY-MM-DD
+  private formatDate(date: Date): string {
+    return date.toISOString().split('T')[0];
+  }
+
+  // Calculate streaks from activity dates
+  private calculateStreaks(dates: string[]): StreakData {
+    if (dates.length === 0) {
+      return { currentStreak: 0, longestStreak: 0, dates: [] };
+    }
+
+    // Convert string dates to Date objects and sort them
+    const dateObjects = dates.map((dateStr) => new Date(dateStr));
+    dateObjects.sort((a, b) => a.getTime() - b.getTime());
+
+    let currentStreak = 1;
+    let maxStreak = 1;
+    let currentDate = new Date(dateObjects[0]);
+    currentDate.setHours(0, 0, 0, 0); // Normalize to start of day
+
+    for (let i = 1; i < dateObjects.length; i++) {
+      const nextDate = new Date(dateObjects[i]);
+      nextDate.setHours(0, 0, 0, 0); // Normalize to start of day
+
+      // Calculate difference in days
+      const diffDays = Math.floor(
+        (nextDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24),
+      );
+
+      if (diffDays === 1) {
+        // Consecutive day
+        currentStreak++;
+        maxStreak = Math.max(maxStreak, currentStreak);
+      } else if (diffDays > 1) {
+        // Gap in streak
+        currentStreak = 1;
+      }
+      // If diffDays === 0, same day, so streak continues
+
+      currentDate = nextDate;
+    }
+
+    // Check if the streak is still ongoing (if last activity was yesterday or today)
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    if (
+      currentDate.getTime() === today.getTime() ||
+      currentDate.getTime() === yesterday.getTime()
+    ) {
+      // The streak might still be active, so we don't reset it
+    }
+
+    return {
+      currentStreak,
+      longestStreak: maxStreak,
+      dates,
+    };
+  }
+
+  // Calculate achievements based on user behavior
+  private calculateAchievements(
+    activeHours: { [hour: number]: number },
+    heatmap: HeatMapData,
+    _tokenUsage: TokenUsageData,
+  ): AchievementData[] {
+    const achievements: AchievementData[] = [];
+
+    // Total activities
+    const totalActivities = Object.values(heatmap).reduce(
+      (sum, count) => sum + count,
+      0,
+    );
+
+    // Total sessions
+    const totalSessions = Object.keys(heatmap).length;
+
+    // Calculate percentage of activity per hour
+    const totalHourlyActivity = Object.values(activeHours).reduce(
+      (sum, count) => sum + count,
+      0,
+    );
+
+    if (totalHourlyActivity > 0) {
+      // Midnight debugger: 20% of sessions happen between 12AM-5AM
+      const midnightActivity =
+        (activeHours[0] || 0) +
+        (activeHours[1] || 0) +
+        (activeHours[2] || 0) +
+        (activeHours[3] || 0) +
+        (activeHours[4] || 0) +
+        (activeHours[5] || 0);
+
+      if (midnightActivity / totalHourlyActivity >= 0.2) {
+        achievements.push({
+          id: 'midnight-debugger',
+          name: 'Midnight Debugger',
+          description: '20% of your sessions happen between 12AM-5AM',
+        });
+      }
+
+      // Morning coder: 20% of sessions happen between 6AM-9AM
+      const morningActivity =
+        (activeHours[6] || 0) +
+        (activeHours[7] || 0) +
+        (activeHours[8] || 0) +
+        (activeHours[9] || 0);
+
+      if (morningActivity / totalHourlyActivity >= 0.2) {
+        achievements.push({
+          id: 'morning-coder',
+          name: 'Morning Coder',
+          description: '20% of your sessions happen between 6AM-9AM',
+        });
+      }
+    }
+
+    // Patient king: average conversation length >= 10 exchanges
+    if (totalSessions > 0) {
+      const avgExchanges = totalActivities / totalSessions;
+      if (avgExchanges >= 10) {
+        achievements.push({
+          id: 'patient-king',
+          name: 'Patient King',
+          description: 'Your average conversation length is 10+ exchanges',
+        });
+      }
+    }
+
+    // Quick finisher: 70% of sessions have <= 2 exchanges
+    let quickSessions = 0;
+    // Since we don't have per-session exchange counts easily available,
+    // we'll estimate based on the distribution of activities
+    if (totalSessions > 0) {
+      // This is a simplified calculation - in a real implementation,
+      // we'd need to count exchanges per session
+      const avgPerSession = totalActivities / totalSessions;
+      if (avgPerSession <= 2) {
+        // Estimate based on low average
+        quickSessions = Math.floor(totalSessions * 0.7);
+      }
+
+      if (quickSessions / totalSessions >= 0.7) {
+        achievements.push({
+          id: 'quick-finisher',
+          name: 'Quick Finisher',
+          description: '70% of your sessions end in 2 exchanges or fewer',
+        });
+      }
+    }
+
+    // Explorer: for users with insufficient data or default
+    if (achievements.length === 0) {
+      achievements.push({
+        id: 'explorer',
+        name: 'Explorer',
+        description: 'Getting started with Qwen Code',
+      });
+    }
+
+    return achievements;
+  }
+
+  // Process chat files from all projects in the base directory and generate insights
+  async generateInsights(baseDir: string): Promise<InsightData> {
+    // Initialize data structures
+    const heatmap: HeatMapData = {};
+    const tokenUsage: TokenUsageData = {};
+    const activeHours: { [hour: number]: number } = {};
+    const sessionStartTimes: { [sessionId: string]: Date } = {};
+    const sessionEndTimes: { [sessionId: string]: Date } = {};
+
+    try {
+      // Get all project directories in the base directory
+      const projectDirs = await fs.readdir(baseDir);
+
+      // Process each project directory
+      for (const projectDir of projectDirs) {
+        const projectPath = path.join(baseDir, projectDir);
+        const stats = await fs.stat(projectPath);
+
+        // Only process if it's a directory
+        if (stats.isDirectory()) {
+          const chatsDir = path.join(projectPath, 'chats');
+
+          let chatFiles: string[] = [];
+          try {
+            // Get all chat files in the chats directory
+            const files = await fs.readdir(chatsDir);
+            chatFiles = files.filter((file) => file.endsWith('.jsonl'));
+          } catch (error) {
+            if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+              console.log(
+                `Error reading chats directory for project ${projectDir}: ${error}`,
+              );
+            }
+            // Continue to next project if chats directory doesn't exist
+            continue;
+          }
+
+          // Process each chat file in this project
+          for (const file of chatFiles) {
+            const filePath = path.join(chatsDir, file);
+            const records = await readJsonlFile<ChatRecord>(filePath);
+
+            // Process each record
+            for (const record of records) {
+              const timestamp = new Date(record.timestamp);
+              const dateKey = this.formatDate(timestamp);
+              const hour = timestamp.getHours();
+
+              // Update heatmap (count of interactions per day)
+              heatmap[dateKey] = (heatmap[dateKey] || 0) + 1;
+
+              // Update active hours
+              activeHours[hour] = (activeHours[hour] || 0) + 1;
+
+              // Update token usage
+              if (record.usageMetadata) {
+                const usage = tokenUsage[dateKey] || {
+                  input: 0,
+                  output: 0,
+                  total: 0,
+                };
+
+                usage.input += record.usageMetadata.promptTokenCount || 0;
+                usage.output += record.usageMetadata.candidatesTokenCount || 0;
+                usage.total += record.usageMetadata.totalTokenCount || 0;
+
+                tokenUsage[dateKey] = usage;
+              }
+
+              // Track session times
+              if (!sessionStartTimes[record.sessionId]) {
+                sessionStartTimes[record.sessionId] = timestamp;
+              }
+              sessionEndTimes[record.sessionId] = timestamp;
+            }
+          }
+        }
+      }
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        // Base directory doesn't exist, return empty insights
+        console.log(`Base directory does not exist: ${baseDir}`);
+      } else {
+        console.log(`Error reading base directory: ${error}`);
+      }
+    }
+
+    // Calculate streak data
+    const streakData = this.calculateStreaks(Object.keys(heatmap));
+
+    // Calculate longest work session
+    let longestWorkDuration = 0;
+    let longestWorkDate: string | null = null;
+    for (const sessionId in sessionStartTimes) {
+      const start = sessionStartTimes[sessionId];
+      const end = sessionEndTimes[sessionId];
+      const durationMinutes = Math.round(
+        (end.getTime() - start.getTime()) / (1000 * 60),
+      );
+
+      if (durationMinutes > longestWorkDuration) {
+        longestWorkDuration = durationMinutes;
+        longestWorkDate = this.formatDate(start);
+      }
+    }
+
+    // Calculate latest active time
+    let latestActiveTime: string | null = null;
+    let latestTimestamp = new Date(0);
+    for (const dateStr in heatmap) {
+      const date = new Date(dateStr);
+      if (date > latestTimestamp) {
+        latestTimestamp = date;
+        latestActiveTime = date.toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+        });
+      }
+    }
+
+    // Calculate achievements
+    const achievements = this.calculateAchievements(
+      activeHours,
+      heatmap,
+      tokenUsage,
+    );
+
+    return {
+      heatmap,
+      tokenUsage,
+      currentStreak: streakData.currentStreak,
+      longestStreak: streakData.longestStreak,
+      longestWorkDate,
+      longestWorkDuration,
+      activeHours,
+      latestActiveTime,
+      achievements,
+    };
+  }
+}

packages/cli/src/services/insight/generators/StaticInsightGenerator.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { DataProcessor } from './DataProcessor.js';
+import { TemplateRenderer } from './TemplateRenderer.js';
+import type { InsightData } from '../types/StaticInsightTypes.js';
+
+export class StaticInsightGenerator {
+  private dataProcessor: DataProcessor;
+  private templateRenderer: TemplateRenderer;
+
+  constructor() {
+    this.dataProcessor = new DataProcessor();
+    this.templateRenderer = new TemplateRenderer();
+  }
+
+  // Ensure the output directory exists
+  private async ensureOutputDirectory(): Promise<string> {
+    const outputDir = path.join(os.homedir(), '.qwen', 'insights');
+    await fs.mkdir(outputDir, { recursive: true });
+    return outputDir;
+  }
+
+  // Generate the static insight HTML file
+  async generateStaticInsight(baseDir: string): Promise<string> {
+    try {
+      // Process data
+      console.log('Processing insight data...');
+      const insights: InsightData =
+        await this.dataProcessor.generateInsights(baseDir);
+
+      // Render HTML
+      console.log('Rendering HTML template...');
+      const html = await this.templateRenderer.renderInsightHTML(insights);
+
+      // Ensure output directory exists
+      const outputDir = await this.ensureOutputDirectory();
+      const outputPath = path.join(outputDir, 'insight.html');
+
+      // Write the HTML file
+      console.log(`Writing HTML file to: ${outputPath}`);
+      await fs.writeFile(outputPath, html, 'utf-8');
+
+      console.log('Static insight generation completed successfully');
+      return outputPath;
+    } catch (error) {
+      console.log(`Error generating static insight: ${error}`);
+      throw error;
+    }
+  }
+}

packages/cli/src/services/insight/generators/TemplateRenderer.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import fs from 'fs/promises';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import type { InsightData } from '../types/StaticInsightTypes.js';
+
+export class TemplateRenderer {
+  private templateDir: string;
+
+  constructor() {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    this.templateDir = path.join(__dirname, '..', 'templates');
+  }
+
+  // Load template files
+  private async loadTemplate(): Promise<string> {
+    const templatePath = path.join(this.templateDir, 'insight-template.html');
+    return await fs.readFile(templatePath, 'utf-8');
+  }
+
+  private async loadStyles(): Promise<string> {
+    const stylesPath = path.join(this.templateDir, 'styles', 'base.css');
+    return await fs.readFile(stylesPath, 'utf-8');
+  }
+
+  private async loadScripts(): Promise<string> {
+    const scriptsPath = path.join(
+      this.templateDir,
+      'scripts',
+      'insight-app.js',
+    );
+    return await fs.readFile(scriptsPath, 'utf-8');
+  }
+
+  // Render the complete HTML file
+  async renderInsightHTML(insights: InsightData): Promise<string> {
+    const template = await this.loadTemplate();
+    const styles = await this.loadStyles();
+    const scripts = await this.loadScripts();
+
+    // Replace all placeholders
+    let html = template;
+    html = html.replace('{{STYLES_PLACEHOLDER}}', styles);
+    html = html.replace('{{DATA_PLACEHOLDER}}', JSON.stringify(insights));
+    html = html.replace('{{SCRIPTS_PLACEHOLDER}}', scripts);
+
+    return html;
+  }
+}

packages/cli/src/services/insight/templates/insight-template.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qwen Code Insights</title>
+    <style>
+      {{STYLES_PLACEHOLDER}}
+    </style>
+  </head>
+  <body>
+    <div class="min-h-screen" id="container">
+      <div class="mx-auto max-w-6xl px-6 py-10 md:py-12">
+        <header class="mb-8 space-y-3 text-center">
+          <p
+            class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500"
+          >
+            Insights
+          </p>
+          <h1 class="text-3xl font-semibold text-slate-900 md:text-4xl">
+            Qwen Code Insights
+          </h1>
+          <p class="text-sm text-slate-600">
+            Your personalized coding journey and patterns
+          </p>
+        </header>
+
+        <!-- React App Mount Point -->
+        <div id="react-root"></div>
+      </div>
+    </div>
+
+    <!-- React CDN -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <!-- CDN Libraries -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+
+    <!-- Application Data -->
+    <script type="text/babel">
+      window.INSIGHT_DATA = {{DATA_PLACEHOLDER}};
+      {{SCRIPTS_PLACEHOLDER}}
+    </script>
+  </body>
+</html>

packages/cli/src/services/insight/templates/scripts/insight-app.js

@@ -0,0 +1,510 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-undef */
+// React-based implementation of the insight app
+// Converts the vanilla JavaScript implementation to React
+
+const { useState, useRef, useEffect } = React;
+
+// Main App Component
+function InsightApp({ data }) {
+  if (!data) {
+    return (
+      <div className="text-center text-slate-600">
+        No insight data available
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <DashboardCards insights={data} />
+      <HeatmapSection heatmap={data.heatmap} />
+      <TokenUsageSection tokenUsage={data.tokenUsage} />
+      <AchievementsSection achievements={data.achievements} />
+      <ExportButton />
+    </div>
+  );
+}
+
+// Dashboard Cards Component
+function DashboardCards({ insights }) {
+  const cardClass = 'glass-card p-6';
+  const sectionTitleClass =
+    'text-lg font-semibold tracking-tight text-slate-900';
+  const captionClass = 'text-sm font-medium text-slate-500';
+
+  return (
+    <div className="grid gap-4 md:grid-cols-3 md:gap-6">
+      <StreakCard
+        currentStreak={insights.currentStreak}
+        longestStreak={insights.longestStreak}
+        cardClass={cardClass}
+        captionClass={captionClass}
+      />
+      <ActiveHoursChart
+        activeHours={insights.activeHours}
+        cardClass={cardClass}
+        sectionTitleClass={sectionTitleClass}
+      />
+      <WorkSessionCard
+        longestWorkDuration={insights.longestWorkDuration}
+        longestWorkDate={insights.longestWorkDate}
+        latestActiveTime={insights.latestActiveTime}
+        cardClass={cardClass}
+        sectionTitleClass={sectionTitleClass}
+      />
+    </div>
+  );
+}
+
+// Streak Card Component
+function StreakCard({ currentStreak, longestStreak, cardClass, captionClass }) {
+  return (
+    <div className={`${cardClass} h-full`}>
+      <div className="flex items-start justify-between">
+        <div>
+          <p className={captionClass}>Current Streak</p>
+          <p className="mt-1 text-4xl font-bold text-slate-900">
+            {currentStreak}
+            <span className="ml-2 text-base font-semibold text-slate-500">
+              days
+            </span>
+          </p>
+        </div>
+        <span className="rounded-full bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700">
+          Longest {longestStreak}d
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// Active Hours Chart Component
+function ActiveHoursChart({ activeHours, cardClass, sectionTitleClass }) {
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.destroy();
+    }
+
+    const canvas = chartRef.current;
+    if (!canvas || !window.Chart) return;
+
+    const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+    const data = labels.map((_, i) => activeHours[i] || 0);
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    chartInstance.current = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels,
+        datasets: [
+          {
+            label: 'Activity per Hour',
+            data,
+            backgroundColor: 'rgba(52, 152, 219, 0.7)',
+            borderColor: 'rgba(52, 152, 219, 1)',
+            borderWidth: 1,
+          },
+        ],
+      },
+      options: {
+        indexAxis: 'y',
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            beginAtZero: true,
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+      },
+    });
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, [activeHours]);
+
+  return (
+    <div className={`${cardClass} h-full`}>
+      <div className="flex items-center justify-between">
+        <h3 className={sectionTitleClass}>Active Hours</h3>
+        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
+          24h
+        </span>
+      </div>
+      <div className="mt-4 h-56 w-full">
+        <canvas ref={chartRef} className="w-full h-56" />
+      </div>
+    </div>
+  );
+}
+
+// Work Session Card Component
+function WorkSessionCard({
+  longestWorkDuration,
+  longestWorkDate,
+  latestActiveTime,
+  cardClass,
+  sectionTitleClass,
+}) {
+  return (
+    <div className={`${cardClass} h-full space-y-3`}>
+      <h3 className={sectionTitleClass}>Work Session</h3>
+      <div className="grid grid-cols-2 gap-3 text-sm text-slate-700">
+        <div className="rounded-xl bg-slate-50 px-3 py-2">
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+            Longest
+          </p>
+          <p className="mt-1 text-lg font-semibold text-slate-900">
+            {longestWorkDuration}m
+          </p>
+        </div>
+        <div className="rounded-xl bg-slate-50 px-3 py-2">
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+            Date
+          </p>
+          <p className="mt-1 text-lg font-semibold text-slate-900">
+            {longestWorkDate || '-'}
+          </p>
+        </div>
+        <div className="col-span-2 rounded-xl bg-slate-50 px-3 py-2">
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+            Last Active
+          </p>
+          <p className="mt-1 text-lg font-semibold text-slate-900">
+            {latestActiveTime || '-'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Heatmap Section Component
+function HeatmapSection({ heatmap }) {
+  const cardClass = 'glass-card p-6';
+  const sectionTitleClass =
+    'text-lg font-semibold tracking-tight text-slate-900';
+
+  return (
+    <div className={`${cardClass} mt-4 space-y-4 md:mt-6`}>
+      <div className="flex items-center justify-between">
+        <h3 className={sectionTitleClass}>Activity Heatmap</h3>
+        <span className="text-xs font-semibold text-slate-500">Past year</span>
+      </div>
+      <div className="heatmap-container">
+        <div className="min-w-[720px] rounded-xl border border-slate-100 bg-white/70 p-4 shadow-inner shadow-slate-100">
+          <ActivityHeatmap heatmapData={heatmap} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Activity Heatmap Component
+function ActivityHeatmap({ heatmapData }) {
+  const width = 1000;
+  const height = 150;
+  const cellSize = 14;
+  const cellPadding = 2;
+
+  const today = new Date();
+  const oneYearAgo = new Date(today);
+  oneYearAgo.setFullYear(today.getFullYear() - 1);
+
+  // Generate all dates for the past year
+  const dates = [];
+  const currentDate = new Date(oneYearAgo);
+  while (currentDate <= today) {
+    dates.push(new Date(currentDate));
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+
+  const colorLevels = [0, 2, 4, 10, 20];
+  const colors = ['#e2e8f0', '#a5d8ff', '#74c0fc', '#339af0', '#1c7ed6'];
+
+  function getColor(value) {
+    if (value === 0) return colors[0];
+    for (let i = colorLevels.length - 1; i >= 1; i--) {
+      if (value >= colorLevels[i]) return colors[i];
+    }
+    return colors[1];
+  }
+
+  const weeksInYear = Math.ceil(dates.length / 7);
+  const startX = 50;
+  const startY = 20;
+
+  const months = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+
+  // Generate month labels
+  const monthLabels = [];
+  let currentMonth = oneYearAgo.getMonth();
+  let monthX = startX;
+
+  for (let week = 0; week < weeksInYear; week++) {
+    const weekDate = new Date(oneYearAgo);
+    weekDate.setDate(weekDate.getDate() + week * 7);
+
+    if (weekDate.getMonth() !== currentMonth) {
+      currentMonth = weekDate.getMonth();
+      monthLabels.push({
+        x: monthX,
+        text: months[currentMonth],
+      });
+      monthX = startX + week * (cellSize + cellPadding);
+    }
+  }
+
+  return (
+    <svg
+      className="heatmap-svg"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      {/* Render heatmap cells */}
+      {dates.map((date, index) => {
+        const week = Math.floor(index / 7);
+        const day = index % 7;
+
+        const x = startX + week * (cellSize + cellPadding);
+        const y = startY + day * (cellSize + cellPadding);
+
+        const dateKey = date.toISOString().split('T')[0];
+        const value = heatmapData[dateKey] || 0;
+        const color = getColor(value);
+
+        return (
+          <rect
+            key={dateKey}
+            className="heatmap-day"
+            x={x}
+            y={y}
+            width={cellSize}
+            height={cellSize}
+            rx="2"
+            fill={color}
+            data-date={dateKey}
+            data-count={value}
+          >
+            <title>
+              {dateKey}: {value} activities
+            </title>
+          </rect>
+        );
+      })}
+
+      {/* Render month labels */}
+      {monthLabels.map((label, index) => (
+        <text key={index} x={label.x} y="15" fontSize="12" fill="#64748b">
+          {label.text}
+        </text>
+      ))}
+
+      {/* Render legend */}
+      <text x={startX} y={height - 40} fontSize="12" fill="#64748b">
+        Less
+      </text>
+      {colors.map((color, index) => {
+        const legendX = startX + 40 + index * (cellSize + 2);
+        return (
+          <rect
+            key={index}
+            x={legendX}
+            y={height - 30}
+            width="10"
+            height="10"
+            rx="2"
+            fill={color}
+          />
+        );
+      })}
+      <text
+        x={startX + 40 + colors.length * (cellSize + 2) + 5}
+        y={height - 21}
+        fontSize="12"
+        fill="#64748b"
+      >
+        More
+      </text>
+    </svg>
+  );
+}
+
+// Token Usage Section Component
+function TokenUsageSection({ tokenUsage }) {
+  const cardClass = 'glass-card p-6';
+  const sectionTitleClass =
+    'text-lg font-semibold tracking-tight text-slate-900';
+
+  function calculateTotalTokens(tokenUsage, type) {
+    return Object.values(tokenUsage).reduce(
+      (acc, usage) => acc + usage[type],
+      0,
+    );
+  }
+
+  return (
+    <div className={`${cardClass} mt-4 md:mt-6`}>
+      <div className="space-y-3">
+        <h3 className={sectionTitleClass}>Token Usage</h3>
+        <div className="grid grid-cols-3 gap-3">
+          <TokenUsageCard
+            label="Input"
+            value={calculateTotalTokens(tokenUsage, 'input').toLocaleString()}
+          />
+          <TokenUsageCard
+            label="Output"
+            value={calculateTotalTokens(tokenUsage, 'output').toLocaleString()}
+          />
+          <TokenUsageCard
+            label="Total"
+            value={calculateTotalTokens(tokenUsage, 'total').toLocaleString()}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Token Usage Card Component
+function TokenUsageCard({ label, value }) {
+  return (
+    <div className="rounded-xl bg-slate-50 px-4 py-3">
+      <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+        {label}
+      </p>
+      <p className="mt-1 text-2xl font-bold text-slate-900">{value}</p>
+    </div>
+  );
+}
+
+// Achievements Section Component
+function AchievementsSection({ achievements }) {
+  const cardClass = 'glass-card p-6';
+  const sectionTitleClass =
+    'text-lg font-semibold tracking-tight text-slate-900';
+
+  return (
+    <div className={`${cardClass} mt-4 space-y-4 md:mt-6`}>
+      <div className="flex items-center justify-between">
+        <h3 className={sectionTitleClass}>Achievements</h3>
+        <span className="text-xs font-semibold text-slate-500">
+          {achievements.length} total
+        </span>
+      </div>
+      {achievements.length === 0 ? (
+        <p className="text-sm text-slate-600">
+          No achievements yet. Keep coding!
+        </p>
+      ) : (
+        <div className="divide-y divide-slate-200">
+          {achievements.map((achievement, index) => (
+            <AchievementItem key={index} achievement={achievement} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Achievement Item Component
+function AchievementItem({ achievement }) {
+  return (
+    <div className="flex flex-col gap-1 py-3 text-left">
+      <span className="text-base font-semibold text-slate-900">
+        {achievement.name}
+      </span>
+      <p className="text-sm text-slate-600">{achievement.description}</p>
+    </div>
+  );
+}
+
+// Export Button Component
+function ExportButton() {
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExport = async () => {
+    const container = document.getElementById('container');
+
+    if (!container || !window.html2canvas) {
+      alert('Export functionality is not available.');
+      return;
+    }
+
+    setIsExporting(true);
+
+    try {
+      const canvas = await html2canvas(container, {
+        scale: 2,
+        useCORS: true,
+        logging: false,
+      });
+
+      const imgData = canvas.toDataURL('image/png');
+      const link = document.createElement('a');
+      link.href = imgData;
+      link.download = `qwen-insights-${new Date().toISOString().slice(0, 10)}.png`;
+      link.click();
+    } catch (error) {
+      console.error('Export error:', error);
+      alert('Failed to export image. Please try again.');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <div className="mt-6 flex justify-center">
+      <button
+        onClick={handleExport}
+        disabled={isExporting}
+        className="group inline-flex items-center gap-2 rounded-full bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-soft transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 hover:-translate-y-[1px] hover:shadow-lg active:translate-y-[1px] disabled:opacity-50"
+      >
+        {isExporting ? 'Exporting...' : 'Export as Image'}
+        <span className="text-slate-200 transition group-hover:translate-x-0.5">
+          →
+        </span>
+      </button>
+    </div>
+  );
+}
+
+// App Initialization - Mount React app when DOM is ready
+const container = document.getElementById('react-root');
+if (container && window.INSIGHT_DATA && window.ReactDOM) {
+  const root = ReactDOM.createRoot(container);
+  root.render(React.createElement(InsightApp, { data: window.INSIGHT_DATA }));
+} else {
+  console.error('Failed to mount React app:', {
+    container: !!container,
+    data: !!window.INSIGHT_DATA,
+    ReactDOM: !!window.ReactDOM,
+  });
+}

packages/cli/src/services/insight/templates/styles/base.css

@@ -0,0 +1,610 @@
+/* Tailwind CSS Base Styles extracted from index-CV6J1oXz.css */
+*,
+:before,
+:after,
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #3b82f680;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
+}
+
+*,
+:before,
+:after {
+  box-sizing: border-box;
+  border: 0 solid #e5e7eb;
+}
+
+:before,
+:after {
+  --tw-content: "";
+}
+
+html,
+:host {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+}
+
+body {
+  line-height: inherit;
+  margin: 0;
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
+  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-text-opacity: 1;
+  min-height: 100vh;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Glass Card Effect */
+.glass-card {
+  --tw-border-opacity: 1;
+  border-width: 1px;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+  --tw-shadow: 0 10px 40px #0f172a14;
+  --tw-shadow-colored: 0 10px 40px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-backdrop-blur: blur(8px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  background-color: #ffffff99;
+  border-radius: 1rem;
+}
+
+/* Utility Classes */
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-56 {
+  height: 14rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.min-w-\[720px\] {
+  min-width: 720px;
+}
+
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.space-y-3> :not([hidden])~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4> :not([hidden])~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.divide-y> :not([hidden])~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-slate-200> :not([hidden])~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-xl {
+  border-radius: 1.25rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-slate-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
+}
+
+.bg-emerald-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
+}
+
+.bg-white\/70 {
+  background-color: #ffffff73;
+}
+
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.from-slate-50 {
+  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
+  --tw-gradient-to: #f8fafc00 var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-white {
+  --tw-gradient-to: #ffffff00 var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-slate-100 {
+  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.tracking-\[0\.2em\] {
+  letter-spacing: 0.2em;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
+}
+
+.text-rose-700 {
+  --tw-text-opacity: 1;
+  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-200 {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 #0000000d;
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-soft {
+  --tw-shadow: 0 10px 40px #0f172a14;
+  --tw-shadow-colored: 0 10px 40px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-slate-100 {
+  --tw-shadow-color: #f1f5f9;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover\:-translate-y-\[1px\]:hover {
+  --tw-translate-y: -1px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus-visible\:outline:focus-visible {
+  outline-style: solid;
+}
+
+.focus-visible\:outline-2:focus-visible {
+  outline-width: 2px;
+}
+
+.focus-visible\:outline-offset-2:focus-visible {
+  outline-offset: 2px;
+}
+
+.focus-visible\:outline-slate-400:focus-visible {
+  outline-color: #94a3b8;
+}
+
+.active\:translate-y-\[1px\]:active {
+  --tw-translate-y: 1px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:translate-x-0\.5 {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@media (min-width: 768px) {
+  .md\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .md\:gap-6 {
+    gap: 1.5rem;
+  }
+
+  .md\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+/* Heat map specific styles */
+.heatmap-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.heatmap-svg {
+  min-width: 720px;
+}
+
+.heatmap-day {
+  cursor: pointer;
+}
+
+.heatmap-day:hover {
+  stroke: #00000024;
+  stroke-width: 1px;
+}
+
+.heatmap-legend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 8px;
+}
+
+.heatmap-legend-item {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}

packages/cli/src/services/insight/types/StaticInsightTypes.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface UsageMetadata {
+  input: number;
+  output: number;
+  total: number;
+}
+
+export interface HeatMapData {
+  [date: string]: number;
+}
+
+export interface TokenUsageData {
+  [date: string]: UsageMetadata;
+}
+
+export interface AchievementData {
+  id: string;
+  name: string;
+  description: string;
+}
+
+export interface InsightData {
+  heatmap: HeatMapData;
+  tokenUsage: TokenUsageData;
+  currentStreak: number;
+  longestStreak: number;
+  longestWorkDate: string | null;
+  longestWorkDuration: number; // in minutes
+  activeHours: { [hour: number]: number };
+  latestActiveTime: string | null;
+  achievements: AchievementData[];
+}
+
+export interface StreakData {
+  currentStreak: number;
+  longestStreak: number;
+  dates: string[];
+}
+
+export interface StaticInsightTemplateData {
+  styles: string;
+  content: string;
+  data: InsightData;
+  scripts: string;
+  generatedTime: string;
+}

packages/cli/src/ui/commands/extensionsCommand.test.ts

@@ -777,4 +777,87 @@ describe('extensionsCommand', () => {
       );
     });
   });
+
+  describe('detail', () => {
+    const detailAction = extensionsCommand.subCommands?.find(
+      (cmd) => cmd.name === 'detail',
+    )?.action;
+
+    if (!detailAction) {
+      throw new Error('Detail action not found');
+    }
+
+    let realMockExtensionManager: ExtensionManager;
+
+    beforeEach(() => {
+      vi.resetAllMocks();
+      realMockExtensionManager = Object.create(ExtensionManager.prototype);
+      realMockExtensionManager.getLoadedExtensions = mockGetLoadedExtensions;
+
+      mockContext = createMockCommandContext({
+        invocation: {
+          raw: '/extensions detail',
+          name: 'detail',
+          args: '',
+        },
+        services: {
+          config: {
+            getExtensions: mockGetExtensions,
+            getWorkingDir: () => '/test/dir',
+            getExtensionManager: () => realMockExtensionManager,
+          },
+        },
+        ui: {
+          dispatchExtensionStateUpdate: vi.fn(),
+        },
+      });
+    });
+
+    it('should show usage if no name is provided', async () => {
+      await detailAction(mockContext, '');
+      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
+        {
+          type: MessageType.ERROR,
+          text: 'Usage: /extensions detail <extension-name>',
+        },
+        expect.any(Number),
+      );
+    });
+
+    it('should show error if extension not found', async () => {
+      mockGetExtensions.mockReturnValue([]);
+      await detailAction(mockContext, 'nonexistent-extension');
+      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
+        {
+          type: MessageType.ERROR,
+          text: 'Extension "nonexistent-extension" not found.',
+        },
+        expect.any(Number),
+      );
+    });
+
+    it('should show extension details when found', async () => {
+      const extension: Extension = {
+        id: 'test-ext',
+        name: 'test-ext',
+        version: '1.0.0',
+        isActive: true,
+        path: '/test/dir/test-ext',
+        contextFiles: [],
+        config: { name: 'test-ext', version: '1.0.0' },
+      };
+      mockGetExtensions.mockReturnValue([extension]);
+      realMockExtensionManager.isEnabled = vi.fn().mockReturnValue(true);
+
+      await detailAction(mockContext, 'test-ext');
+
+      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
+        {
+          type: MessageType.INFO,
+          text: expect.stringContaining('test-ext'),
+        },
+        expect.any(Number),
+      );
+    });
+  });
 });

packages/cli/src/ui/commands/extensionsCommand.ts

@@ -20,6 +20,7 @@ import {
 } from '@qwen-code/qwen-code-core';
 import { SettingScope } from '../../config/settings.js';
 import open from 'open';
+import { extensionToOutputString } from '../../commands/extensions/utils.js';
 
 const EXTENSION_EXPLORE_URL = {
   Gemini: 'https://geminicli.com/extensions/',
@@ -475,6 +476,53 @@ async function enableAction(context: CommandContext, args: string) {
   }
 }
 
+async function detailAction(context: CommandContext, args: string) {
+  const extensionManager = context.services.config?.getExtensionManager();
+  if (!(extensionManager instanceof ExtensionManager)) {
+    console.error(
+      `Cannot ${context.invocation?.name} extensions in this environment`,
+    );
+    return;
+  }
+
+  const name = args.trim();
+  if (!name) {
+    context.ui.addItem(
+      {
+        type: MessageType.ERROR,
+        text: t('Usage: /extensions detail <extension-name>'),
+      },
+      Date.now(),
+    );
+    return;
+  }
+
+  const extensions = context.services.config!.getExtensions();
+  const extension = extensions.find((extension) => extension.name === name);
+  if (!extension) {
+    context.ui.addItem(
+      {
+        type: MessageType.ERROR,
+        text: t('Extension "{{name}}" not found.', { name }),
+      },
+      Date.now(),
+    );
+    return;
+  }
+  context.ui.addItem(
+    {
+      type: MessageType.INFO,
+      text: extensionToOutputString(
+        extension,
+        extensionManager,
+        process.cwd(),
+        true,
+      ),
+    },
+    Date.now(),
+  );
+}
+
 export async function completeExtensions(
   context: CommandContext,
   partialArg: string,
@@ -495,7 +543,10 @@ export async function completeExtensions(
     name.startsWith(partialArg),
   );
 
-  if (context.invocation?.name !== 'uninstall') {
+  if (
+    context.invocation?.name !== 'uninstall' &&
+    context.invocation?.name !== 'detail'
+  ) {
     if ('--all'.startsWith(partialArg) || 'all'.startsWith(partialArg)) {
       suggestions.unshift('--all');
     }
@@ -594,6 +645,16 @@ const uninstallCommand: SlashCommand = {
   completion: completeExtensions,
 };
 
+const detailCommand: SlashCommand = {
+  name: 'detail',
+  get description() {
+    return t('Get detail of an extension');
+  },
+  kind: CommandKind.BUILT_IN,
+  action: detailAction,
+  completion: completeExtensions,
+};
+
 export const extensionsCommand: SlashCommand = {
   name: 'extensions',
   get description() {
@@ -608,6 +669,7 @@ export const extensionsCommand: SlashCommand = {
     installCommand,
     uninstallCommand,
     exploreExtensionsCommand,
+    detailCommand,
   ],
   action: (context, args) =>
     // Default to list if no subcommand is provided

packages/cli/src/ui/commands/insightCommand.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { CommandContext, SlashCommand } from './types.js';
+import { CommandKind } from './types.js';
+import { MessageType } from '../types.js';
+import { t } from '../../i18n/index.js';
+import { join } from 'path';
+import os from 'os';
+import { StaticInsightGenerator } from '../../services/insight/generators/StaticInsightGenerator.js';
+
+// Open file in default browser
+async function openFileInBrowser(filePath: string): Promise<void> {
+  const { exec } = await import('child_process');
+  const { promisify } = await import('util');
+  const execAsync = promisify(exec);
+
+  // Convert to file:// URL for cross-platform compatibility
+  const fileUrl = `file://${filePath.replace(/\\/g, '/')}`;
+
+  try {
+    switch (process.platform) {
+      case 'darwin': // macOS
+        await execAsync(`open "${fileUrl}"`);
+        break;
+      case 'win32': // Windows
+        await execAsync(`start "" "${fileUrl}"`);
+        break;
+      default: // Linux and others
+        await execAsync(`xdg-open "${fileUrl}"`);
+    }
+  } catch (_error) {
+    // If opening fails, try with local file path
+    switch (process.platform) {
+      case 'darwin': // macOS
+        await execAsync(`open "${filePath}"`);
+        break;
+      case 'win32': // Windows
+        await execAsync(`start "" "${filePath}"`);
+        break;
+      default: // Linux and others
+        await execAsync(`xdg-open "${filePath}"`);
+    }
+  }
+}
+
+export const insightCommand: SlashCommand = {
+  name: 'insight',
+  get description() {
+    return t(
+      'generate personalized programming insights from your chat history',
+    );
+  },
+  kind: CommandKind.BUILT_IN,
+  action: async (context: CommandContext) => {
+    try {
+      context.ui.setDebugMessage(t('Generating insights...'));
+
+      const projectsDir = join(os.homedir(), '.qwen', 'projects');
+      const insightGenerator = new StaticInsightGenerator();
+
+      context.ui.addItem(
+        {
+          type: MessageType.INFO,
+          text: t('Processing your chat history...'),
+        },
+        Date.now(),
+      );
+
+      // Generate the static insight HTML file
+      const outputPath =
+        await insightGenerator.generateStaticInsight(projectsDir);
+
+      context.ui.addItem(
+        {
+          type: MessageType.INFO,
+          text: t('Insight report generated successfully!'),
+        },
+        Date.now(),
+      );
+
+      // Open the file in the default browser
+      try {
+        await openFileInBrowser(outputPath);
+
+        context.ui.addItem(
+          {
+            type: MessageType.INFO,
+            text: t('Opening insights in your browser: {{path}}', {
+              path: outputPath,
+            }),
+          },
+          Date.now(),
+        );
+      } catch (browserError) {
+        console.error('Failed to open browser automatically:', browserError);
+
+        context.ui.addItem(
+          {
+            type: MessageType.INFO,
+            text: t(
+              'Insights generated at: {{path}}. Please open this file in your browser.',
+              {
+                path: outputPath,
+              },
+            ),
+          },
+          Date.now(),
+        );
+      }
+
+      context.ui.setDebugMessage(t('Insights ready.'));
+    } catch (error) {
+      context.ui.addItem(
+        {
+          type: MessageType.ERROR,
+          text: t('Failed to generate insights: {{error}}', {
+            error: (error as Error).message,
+          }),
+        },
+        Date.now(),
+      );
+
+      console.error('Insight generation error:', error);
+    }
+  },
+};

packages/core/src/core/anthropicContentGenerator/anthropicContentGenerator.ts

@@ -28,6 +28,7 @@ type RawMessageStreamEvent = Anthropic.RawMessageStreamEvent;
 import { RequestTokenEstimator } from '../../utils/request-tokenizer/index.js';
 import { safeJsonParse } from '../../utils/safeJsonParse.js';
 import { AnthropicContentConverter } from './converter.js';
+import { buildRuntimeFetchOptions } from '../../utils/runtimeFetchOptions.js';
 
 type StreamingBlockState = {
   type: string;
@@ -54,6 +55,9 @@ export class AnthropicContentGenerator implements ContentGenerator {
   ) {
     const defaultHeaders = this.buildHeaders();
     const baseURL = contentGeneratorConfig.baseUrl;
+    // Configure runtime options to ensure user-configured timeout works as expected
+    // bodyTimeout is always disabled (0) to let Anthropic SDK timeout control the request
+    const runtimeOptions = buildRuntimeFetchOptions('anthropic');
 
     this.client = new Anthropic({
       apiKey: contentGeneratorConfig.apiKey,
@@ -61,6 +65,7 @@ export class AnthropicContentGenerator implements ContentGenerator {
       timeout: contentGeneratorConfig.timeout,
       maxRetries: contentGeneratorConfig.maxRetries,
       defaultHeaders,
+      ...runtimeOptions,
     });
 
     this.converter = new AnthropicContentConverter(

packages/core/src/core/openaiContentGenerator/provider/dashscope.test.ts

@@ -19,6 +19,8 @@ import type { ContentGeneratorConfig } from '../../contentGenerator.js';
 import { AuthType } from '../../contentGenerator.js';
 import type { ChatCompletionToolWithCache } from './types.js';
 import { DEFAULT_TIMEOUT, DEFAULT_MAX_RETRIES } from '../constants.js';
+import { buildRuntimeFetchOptions } from '../../../utils/runtimeFetchOptions.js';
+import type { OpenAIRuntimeFetchOptions } from '../../../utils/runtimeFetchOptions.js';
 
 // Mock OpenAI
 vi.mock('openai', () => ({
@@ -32,6 +34,10 @@ vi.mock('openai', () => ({
   })),
 }));
 
+vi.mock('../../../utils/runtimeFetchOptions.js', () => ({
+  buildRuntimeFetchOptions: vi.fn(),
+}));
+
 describe('DashScopeOpenAICompatibleProvider', () => {
   let provider: DashScopeOpenAICompatibleProvider;
   let mockContentGeneratorConfig: ContentGeneratorConfig;
@@ -39,6 +45,11 @@ describe('DashScopeOpenAICompatibleProvider', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    const mockedBuildRuntimeFetchOptions =
+      buildRuntimeFetchOptions as unknown as MockedFunction<
+        (sdkType: 'openai') => OpenAIRuntimeFetchOptions
+      >;
+    mockedBuildRuntimeFetchOptions.mockReturnValue(undefined);
 
     // Mock ContentGeneratorConfig
     mockContentGeneratorConfig = {
@@ -185,18 +196,20 @@ describe('DashScopeOpenAICompatibleProvider', () => {
     it('should create OpenAI client with DashScope configuration', () => {
       const client = provider.buildClient();
 
-      expect(OpenAI).toHaveBeenCalledWith({
-        apiKey: 'test-api-key',
-        baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
-        timeout: 60000,
-        maxRetries: 2,
-        defaultHeaders: {
-          'User-Agent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
-          'X-DashScope-CacheControl': 'enable',
-          'X-DashScope-UserAgent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
-          'X-DashScope-AuthType': AuthType.QWEN_OAUTH,
-        },
-      });
+      expect(OpenAI).toHaveBeenCalledWith(
+        expect.objectContaining({
+          apiKey: 'test-api-key',
+          baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+          timeout: 60000,
+          maxRetries: 2,
+          defaultHeaders: {
+            'User-Agent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
+            'X-DashScope-CacheControl': 'enable',
+            'X-DashScope-UserAgent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
+            'X-DashScope-AuthType': AuthType.QWEN_OAUTH,
+          },
+        }),
+      );
 
       expect(client).toBeDefined();
     });
@@ -207,13 +220,15 @@ describe('DashScopeOpenAICompatibleProvider', () => {
 
       provider.buildClient();
 
-      expect(OpenAI).toHaveBeenCalledWith({
-        apiKey: 'test-api-key',
-        baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
-        timeout: DEFAULT_TIMEOUT,
-        maxRetries: DEFAULT_MAX_RETRIES,
-        defaultHeaders: expect.any(Object),
-      });
+      expect(OpenAI).toHaveBeenCalledWith(
+        expect.objectContaining({
+          apiKey: 'test-api-key',
+          baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+          timeout: DEFAULT_TIMEOUT,
+          maxRetries: DEFAULT_MAX_RETRIES,
+          defaultHeaders: expect.any(Object),
+        }),
+      );
     });
   });
 

packages/core/src/core/openaiContentGenerator/provider/dashscope.ts

@@ -16,6 +16,7 @@ import type {
   ChatCompletionContentPartWithCache,
   ChatCompletionToolWithCache,
 } from './types.js';
+import { buildRuntimeFetchOptions } from '../../../utils/runtimeFetchOptions.js';
 
 export class DashScopeOpenAICompatibleProvider
   implements OpenAICompatibleProvider
@@ -68,12 +69,16 @@ export class DashScopeOpenAICompatibleProvider
       maxRetries = DEFAULT_MAX_RETRIES,
     } = this.contentGeneratorConfig;
     const defaultHeaders = this.buildHeaders();
+    // Configure fetch options to ensure user-configured timeout works as expected
+    // bodyTimeout is always disabled (0) to let OpenAI SDK timeout control the request
+    const fetchOptions = buildRuntimeFetchOptions('openai');
     return new OpenAI({
       apiKey,
       baseURL: baseUrl,
       timeout,
       maxRetries,
       defaultHeaders,
+      ...(fetchOptions ? { fetchOptions } : {}),
     });
   }
 

packages/core/src/core/openaiContentGenerator/provider/default.test.ts

@@ -17,6 +17,8 @@ import { DefaultOpenAICompatibleProvider } from './default.js';
 import type { Config } from '../../../config/config.js';
 import type { ContentGeneratorConfig } from '../../contentGenerator.js';
 import { DEFAULT_TIMEOUT, DEFAULT_MAX_RETRIES } from '../constants.js';
+import { buildRuntimeFetchOptions } from '../../../utils/runtimeFetchOptions.js';
+import type { OpenAIRuntimeFetchOptions } from '../../../utils/runtimeFetchOptions.js';
 
 // Mock OpenAI
 vi.mock('openai', () => ({
@@ -30,6 +32,10 @@ vi.mock('openai', () => ({
   })),
 }));
 
+vi.mock('../../../utils/runtimeFetchOptions.js', () => ({
+  buildRuntimeFetchOptions: vi.fn(),
+}));
+
 describe('DefaultOpenAICompatibleProvider', () => {
   let provider: DefaultOpenAICompatibleProvider;
   let mockContentGeneratorConfig: ContentGeneratorConfig;
@@ -37,6 +43,11 @@ describe('DefaultOpenAICompatibleProvider', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    const mockedBuildRuntimeFetchOptions =
+      buildRuntimeFetchOptions as unknown as MockedFunction<
+        (sdkType: 'openai') => OpenAIRuntimeFetchOptions
+      >;
+    mockedBuildRuntimeFetchOptions.mockReturnValue(undefined);
 
     // Mock ContentGeneratorConfig
     mockContentGeneratorConfig = {
@@ -112,15 +123,17 @@ describe('DefaultOpenAICompatibleProvider', () => {
     it('should create OpenAI client with correct configuration', () => {
       const client = provider.buildClient();
 
-      expect(OpenAI).toHaveBeenCalledWith({
-        apiKey: 'test-api-key',
-        baseURL: 'https://api.openai.com/v1',
-        timeout: 60000,
-        maxRetries: 2,
-        defaultHeaders: {
-          'User-Agent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
-        },
-      });
+      expect(OpenAI).toHaveBeenCalledWith(
+        expect.objectContaining({
+          apiKey: 'test-api-key',
+          baseURL: 'https://api.openai.com/v1',
+          timeout: 60000,
+          maxRetries: 2,
+          defaultHeaders: {
+            'User-Agent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
+          },
+        }),
+      );
 
       expect(client).toBeDefined();
     });
@@ -131,15 +144,17 @@ describe('DefaultOpenAICompatibleProvider', () => {
 
       provider.buildClient();
 
-      expect(OpenAI).toHaveBeenCalledWith({
-        apiKey: 'test-api-key',
-        baseURL: 'https://api.openai.com/v1',
-        timeout: DEFAULT_TIMEOUT,
-        maxRetries: DEFAULT_MAX_RETRIES,
-        defaultHeaders: {
-          'User-Agent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
-        },
-      });
+      expect(OpenAI).toHaveBeenCalledWith(
+        expect.objectContaining({
+          apiKey: 'test-api-key',
+          baseURL: 'https://api.openai.com/v1',
+          timeout: DEFAULT_TIMEOUT,
+          maxRetries: DEFAULT_MAX_RETRIES,
+          defaultHeaders: {
+            'User-Agent': `QwenCode/1.0.0 (${process.platform}; ${process.arch})`,
+          },
+        }),
+      );
     });
 
     it('should include custom headers from buildHeaders', () => {

packages/core/src/core/openaiContentGenerator/provider/default.ts

@@ -4,6 +4,7 @@ import type { Config } from '../../../config/config.js';
 import type { ContentGeneratorConfig } from '../../contentGenerator.js';
 import { DEFAULT_TIMEOUT, DEFAULT_MAX_RETRIES } from '../constants.js';
 import type { OpenAICompatibleProvider } from './types.js';
+import { buildRuntimeFetchOptions } from '../../../utils/runtimeFetchOptions.js';
 
 /**
  * Default provider for standard OpenAI-compatible APIs
@@ -43,12 +44,16 @@ export class DefaultOpenAICompatibleProvider
       maxRetries = DEFAULT_MAX_RETRIES,
     } = this.contentGeneratorConfig;
     const defaultHeaders = this.buildHeaders();
+    // Configure fetch options to ensure user-configured timeout works as expected
+    // bodyTimeout is always disabled (0) to let OpenAI SDK timeout control the request
+    const fetchOptions = buildRuntimeFetchOptions('openai');
     return new OpenAI({
       apiKey,
       baseURL: baseUrl,
       timeout,
       maxRetries,
       defaultHeaders,
+      ...(fetchOptions ? { fetchOptions } : {}),
     });
   }
 

packages/core/src/extension/extensionManager.test.ts

@@ -218,6 +218,30 @@ describe('extension tests', () => {
       ]);
     });
 
+    it('should use default QWEN.md when contextFileName is empty array', async () => {
+      const extDir = path.join(userExtensionsDir, 'ext-empty-context');
+      fs.mkdirSync(extDir, { recursive: true });
+      fs.writeFileSync(
+        path.join(extDir, EXTENSIONS_CONFIG_FILENAME),
+        JSON.stringify({
+          name: 'ext-empty-context',
+          version: '1.0.0',
+          contextFileName: [],
+        }),
+      );
+      fs.writeFileSync(path.join(extDir, 'QWEN.md'), 'context content');
+
+      const manager = createExtensionManager();
+      await manager.refreshCache();
+      const extensions = manager.getLoadedExtensions();
+
+      expect(extensions).toHaveLength(1);
+      const ext = extensions.find((e) => e.config.name === 'ext-empty-context');
+      expect(ext?.contextFiles).toEqual([
+        path.join(userExtensionsDir, 'ext-empty-context', 'QWEN.md'),
+      ]);
+    });
+
     it('should skip extensions with invalid JSON and log a warning', async () => {
       const consoleSpy = vi
         .spyOn(console, 'error')
@@ -694,13 +718,14 @@ describe('extension tests', () => {
         expect(() => validateName('UPPERCASE')).not.toThrow();
       });
 
+      it('should accept names with underscores and dots', () => {
+        expect(() => validateName('my_extension')).not.toThrow();
+        expect(() => validateName('my.extension')).not.toThrow();
+        expect(() => validateName('my_ext.v1')).not.toThrow();
+        expect(() => validateName('ext_1.2.3')).not.toThrow();
+      });
+
       it('should reject names with invalid characters', () => {
-        expect(() => validateName('my_extension')).toThrow(
-          'Invalid extension name',
-        );
-        expect(() => validateName('my.extension')).toThrow(
-          'Invalid extension name',
-        );
         expect(() => validateName('my extension')).toThrow(
           'Invalid extension name',
         );

packages/core/src/extension/extensionManager.ts

@@ -190,7 +190,7 @@ function filterMcpConfig(original: MCPServerConfig): MCPServerConfig {
 }
 
 function getContextFileNames(config: ExtensionConfig): string[] {
-  if (!config.contextFileName) {
+  if (!config.contextFileName || config.contextFileName.length === 0) {
     return ['QWEN.md'];
   } else if (!Array.isArray(config.contextFileName)) {
     return [config.contextFileName];
@@ -1244,9 +1244,9 @@ export function hashValue(value: string): string {
 }
 
 export function validateName(name: string) {
-  if (!/^[a-zA-Z0-9-]+$/.test(name)) {
+  if (!/^[a-zA-Z0-9-_.]+$/.test(name)) {
     throw new Error(
-      `Invalid extension name: "${name}". Only letters (a-z, A-Z), numbers (0-9), and dashes (-) are allowed.`,
+      `Invalid extension name: "${name}". Only letters (a-z, A-Z), numbers (0-9), underscores (_), dots (.), and dashes (-) are allowed.`,
     );
   }
 }

packages/core/src/extension/github.test.ts

@@ -117,6 +117,51 @@ describe('git extension helpers', () => {
         'Failed to clone Git repository from http://my-repo.com',
       );
     });
+
+    it('should use marketplace source for marketplace type extensions', async () => {
+      const installMetadata = {
+        source: 'marketplace:my-plugin',
+        type: 'marketplace' as const,
+        marketplace: {
+          pluginName: 'my-plugin',
+          marketplaceSource: 'https://github.com/marketplace/my-plugin',
+        },
+      };
+      const destination = '/dest';
+      mockGit.getRemotes.mockResolvedValue([
+        {
+          name: 'origin',
+          refs: { fetch: 'https://github.com/marketplace/my-plugin' },
+        },
+      ]);
+
+      await cloneFromGit(installMetadata, destination);
+
+      expect(mockGit.clone).toHaveBeenCalledWith(
+        'https://github.com/marketplace/my-plugin',
+        './',
+        ['--depth', '1'],
+      );
+    });
+
+    it('should use source for marketplace type without marketplace metadata', async () => {
+      const installMetadata = {
+        source: 'http://fallback-repo.com',
+        type: 'marketplace' as const,
+      };
+      const destination = '/dest';
+      mockGit.getRemotes.mockResolvedValue([
+        { name: 'origin', refs: { fetch: 'http://fallback-repo.com' } },
+      ]);
+
+      await cloneFromGit(installMetadata, destination);
+
+      expect(mockGit.clone).toHaveBeenCalledWith(
+        'http://fallback-repo.com',
+        './',
+        ['--depth', '1'],
+      );
+    });
   });
 
   describe('checkForExtensionUpdate', () => {

packages/core/src/extension/github.ts

@@ -53,7 +53,10 @@ export async function cloneFromGit(
 ): Promise<void> {
   try {
     const git = simpleGit(destination);
-    let sourceUrl = installMetadata.source;
+    let sourceUrl =
+      installMetadata.type === 'marketplace' && installMetadata.marketplace
+        ? installMetadata.marketplace.marketplaceSource
+        : installMetadata.source;
     const token = getGitHubToken();
     if (token) {
       try {

packages/core/src/index.ts

@@ -78,6 +78,7 @@ export * from './utils/promptIdContext.js';
 export * from './utils/thoughtUtils.js';
 export * from './utils/toml-to-markdown-converter.js';
 export * from './utils/yaml-parser.js';
+export * from './utils/jsonl-utils.js';
 
 // Config resolution utilities
 export * from './utils/configResolver.js';

packages/core/src/utils/runtimeFetchOptions.ts

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EnvHttpProxyAgent } from 'undici';
+
+/**
+ * JavaScript runtime type
+ */
+export type Runtime = 'node' | 'bun' | 'unknown';
+
+/**
+ * Detect the current JavaScript runtime
+ */
+export function detectRuntime(): Runtime {
+  if (typeof process !== 'undefined' && process.versions?.['bun']) {
+    return 'bun';
+  }
+  if (typeof process !== 'undefined' && process.versions?.node) {
+    return 'node';
+  }
+  return 'unknown';
+}
+
+/**
+ * Runtime fetch options for OpenAI SDK
+ */
+export type OpenAIRuntimeFetchOptions =
+  | {
+      dispatcher?: EnvHttpProxyAgent;
+      timeout?: false;
+    }
+  | undefined;
+
+/**
+ * Runtime fetch options for Anthropic SDK
+ */
+export type AnthropicRuntimeFetchOptions = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  httpAgent?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fetch?: any;
+};
+
+/**
+ * SDK type identifier
+ */
+export type SDKType = 'openai' | 'anthropic';
+
+/**
+ * Build runtime-specific fetch options for OpenAI SDK
+ */
+export function buildRuntimeFetchOptions(
+  sdkType: 'openai',
+): OpenAIRuntimeFetchOptions;
+/**
+ * Build runtime-specific fetch options for Anthropic SDK
+ */
+export function buildRuntimeFetchOptions(
+  sdkType: 'anthropic',
+): AnthropicRuntimeFetchOptions;
+/**
+ * Build runtime-specific fetch options based on the detected runtime and SDK type
+ * This function applies runtime-specific configurations to handle timeout differences
+ * across Node.js and Bun, ensuring user-configured timeout works as expected.
+ *
+ * @param sdkType - The SDK type ('openai' or 'anthropic') to determine return type
+ * @returns Runtime-specific options compatible with the specified SDK
+ */
+export function buildRuntimeFetchOptions(
+  sdkType: SDKType,
+): OpenAIRuntimeFetchOptions | AnthropicRuntimeFetchOptions {
+  const runtime = detectRuntime();
+
+  // Always disable bodyTimeout (set to 0) to let SDK's timeout parameter
+  // control the total request time. bodyTimeout only monitors intervals between
+  // data chunks, not the total request time, so we disable it to ensure user-configured
+  // timeout works as expected for both streaming and non-streaming requests.
+
+  switch (runtime) {
+    case 'bun': {
+      if (sdkType === 'openai') {
+        // Bun: Disable built-in 300s timeout to let OpenAI SDK timeout control
+        // This ensures user-configured timeout works as expected without interference
+        return {
+          timeout: false,
+        };
+      } else {
+        // Bun: Use custom fetch to disable built-in 300s timeout
+        // This allows Anthropic SDK timeout to control the request
+        // Note: Bun's fetch automatically uses proxy settings from environment variables
+        // (HTTP_PROXY, HTTPS_PROXY, NO_PROXY), so proxy behavior is preserved
+        const bunFetch: typeof fetch = async (
+          input: RequestInfo | URL,
+          init?: RequestInit,
+        ) => {
+          const bunFetchOptions: RequestInit = {
+            ...init,
+            // @ts-expect-error - Bun-specific timeout option
+            timeout: false,
+          };
+          return fetch(input, bunFetchOptions);
+        };
+        return {
+          fetch: bunFetch,
+        };
+      }
+    }
+
+    case 'node': {
+      // Node.js: Use EnvHttpProxyAgent to configure proxy and disable bodyTimeout
+      // EnvHttpProxyAgent automatically reads proxy settings from environment variables
+      // (HTTP_PROXY, HTTPS_PROXY, NO_PROXY, etc.) to preserve proxy functionality
+      // bodyTimeout is always 0 (disabled) to let SDK timeout control the request
+      try {
+        const agent = new EnvHttpProxyAgent({
+          bodyTimeout: 0, // Disable to let SDK timeout control total request time
+        });
+
+        if (sdkType === 'openai') {
+          return {
+            dispatcher: agent,
+          };
+        } else {
+          return {
+            httpAgent: agent,
+          };
+        }
+      } catch {
+        // If undici is not available, return appropriate default
+        if (sdkType === 'openai') {
+          return undefined;
+        } else {
+          return {};
+        }
+      }
+    }
+
+    default: {
+      // Unknown runtime: Try to use EnvHttpProxyAgent if available
+      // EnvHttpProxyAgent automatically reads proxy settings from environment variables
+      try {
+        const agent = new EnvHttpProxyAgent({
+          bodyTimeout: 0, // Disable to let SDK timeout control total request time
+        });
+
+        if (sdkType === 'openai') {
+          return {
+            dispatcher: agent,
+          };
+        } else {
+          return {
+            httpAgent: agent,
+          };
+        }
+      } catch {
+        if (sdkType === 'openai') {
+          return undefined;
+        } else {
+          return {};
+        }
+      }
+    }
+  }
+}

packages/vscode-ide-companion/src/types/webviewMessageTypes.ts

@@ -1,14 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export interface PermissionResponsePayload {
-  optionId: string;
-}
-
-export interface PermissionResponseMessage {
-  type: string;
-  data: PermissionResponsePayload;
-}

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

@@ -431,7 +431,6 @@ export const App: React.FC = () => {
         type: 'permissionResponse',
         data: { optionId },
       });
-
       setPermissionRequest(null);
     },
     [vscode],

packages/vscode-ide-companion/src/webview/MessageHandler.ts

@@ -6,7 +6,6 @@
 
 import type { QwenAgentManager } from '../services/qwenAgentManager.js';
 import type { ConversationStore } from '../services/conversationStore.js';
-import type { PermissionResponseMessage } from '../types/webviewMessageTypes.js';
 import { MessageRouter } from './handlers/MessageRouter.js';
 
 /**
@@ -56,7 +55,7 @@ export class MessageHandler {
    * Set permission handler
    */
   setPermissionHandler(
-    handler: (message: PermissionResponseMessage) => void,
+    handler: (message: { type: string; data: { optionId: string } }) => void,
   ): void {
     this.router.setPermissionHandler(handler);
   }

packages/vscode-ide-companion/src/webview/WebViewProvider.ts

@@ -8,7 +8,6 @@ import * as vscode from 'vscode';
 import { QwenAgentManager } from '../services/qwenAgentManager.js';
 import { ConversationStore } from '../services/conversationStore.js';
 import type { AcpPermissionRequest } from '../types/acpTypes.js';
-import type { PermissionResponseMessage } from '../types/webviewMessageTypes.js';
 import { PanelManager } from '../webview/PanelManager.js';
 import { MessageHandler } from '../webview/MessageHandler.js';
 import { WebViewContent } from '../webview/WebViewContent.js';
@@ -252,7 +251,10 @@ export class WebViewProvider {
               }
             }
           };
-          const handler = (message: PermissionResponseMessage) => {
+          const handler = (message: {
+            type: string;
+            data: { optionId: string };
+          }) => {
             if (message.type !== 'permissionResponse') {
               return;
             }
@@ -268,16 +270,6 @@ export class WebViewProvider {
               optionId.toLowerCase().includes('reject');
 
             if (isCancel) {
-              // Close any open qwen-diff editors first
-              try {
-                void vscode.commands.executeCommand('qwen.diff.closeAll');
-              } catch (err) {
-                console.warn(
-                  '[WebViewProvider] Failed to close diffs after reject:',
-                  err,
-                );
-              }
-
               // Fire and forget – do not block the ACP resolve
               (async () => {
                 try {
@@ -304,6 +296,7 @@ export class WebViewProvider {
                   const title =
                     (request.toolCall as { title?: string } | undefined)
                       ?.title || '';
+                  // Normalize kind for UI – fall back to 'execute'
                   let kind = ((
                     request.toolCall as { kind?: string } | undefined
                   )?.kind || 'execute') as string;
@@ -326,6 +319,7 @@ export class WebViewProvider {
                       title,
                       kind,
                       status: 'failed',
+                      // Best-effort pass-through (used by UI hints)
                       rawInput: (request.toolCall as { rawInput?: unknown })
                         ?.rawInput,
                       locations: (

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

@@ -24,7 +24,10 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
   onClose,
 }) => {
   const [focusedIndex, setFocusedIndex] = useState(0);
+  const [customMessage, setCustomMessage] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
+  // Correct the ref type for custom input to HTMLInputElement to avoid subsequent forced casting
+  const customInputRef = useRef<HTMLInputElement>(null);
 
   console.log('PermissionDrawer rendered with isOpen:', isOpen, toolCall);
   // Prefer file name from locations, fall back to content[].path if present
@@ -91,7 +94,10 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
 
       // Number keys 1-9 for quick select
       const numMatch = e.key.match(/^[1-9]$/);
-      if (numMatch) {
+      if (
+        numMatch &&
+        !customInputRef.current?.contains(document.activeElement)
+      ) {
         const index = parseInt(e.key, 10) - 1;
         if (index < options.length) {
           e.preventDefault();
@@ -103,10 +109,7 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
       // Arrow keys for navigation
       if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
         e.preventDefault();
-        if (options.length === 0) {
-          return;
-        }
-        const totalItems = options.length;
+        const totalItems = options.length + 1; // +1 for custom input
         if (e.key === 'ArrowDown') {
           setFocusedIndex((prev) => (prev + 1) % totalItems);
         } else {
@@ -115,7 +118,10 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
       }
 
       // Enter to select
-      if (e.key === 'Enter') {
+      if (
+        e.key === 'Enter' &&
+        !customInputRef.current?.contains(document.activeElement)
+      ) {
         e.preventDefault();
         if (focusedIndex < options.length) {
           onResponse(options[focusedIndex].optionId);
@@ -228,6 +234,28 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
               </button>
             );
           })}
+
+          {/* Custom message input (extracted component) */}
+          {(() => {
+            const isFocused = focusedIndex === options.length;
+            const rejectOptionId = options.find((o) =>
+              o.kind.includes('reject'),
+            )?.optionId;
+            return (
+              <CustomMessageInputRow
+                isFocused={isFocused}
+                customMessage={customMessage}
+                setCustomMessage={setCustomMessage}
+                onFocusRow={() => setFocusedIndex(options.length)}
+                onSubmitReject={() => {
+                  if (rejectOptionId) {
+                    onResponse(rejectOptionId);
+                  }
+                }}
+                inputRef={customInputRef}
+              />
+            );
+          })()}
         </div>
       </div>
 
@@ -235,3 +263,50 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
     </div>
   );
 };
+
+/**
+ * CustomMessageInputRow: Reusable custom input row component (without hooks)
+ */
+interface CustomMessageInputRowProps {
+  isFocused: boolean;
+  customMessage: string;
+  setCustomMessage: (val: string) => void;
+  onFocusRow: () => void; // Set focus when mouse enters or input box is focused
+  onSubmitReject: () => void; // Triggered when Enter is pressed (selecting reject option)
+  inputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+const CustomMessageInputRow: React.FC<CustomMessageInputRowProps> = ({
+  isFocused,
+  customMessage,
+  setCustomMessage,
+  onFocusRow,
+  onSubmitReject,
+  inputRef,
+}) => (
+  <div
+    className={`flex items-center gap-2 px-2 py-1.5 text-left w-full box-border rounded-[4px] border-0 shadow-[inset_0_0_0_1px_var(--app-transparent-inner-border)] cursor-text text-[var(--app-primary-foreground)] ${
+      isFocused ? 'text-[var(--app-list-active-foreground)]' : ''
+    }`}
+    onMouseEnter={onFocusRow}
+    onClick={() => inputRef.current?.focus()}
+  >
+    <input
+      ref={inputRef as React.LegacyRef<HTMLInputElement> | undefined}
+      type="text"
+      placeholder="Tell Qwen what to do instead"
+      spellCheck={false}
+      className="flex-1 bg-transparent border-0 outline-none text-sm placeholder:opacity-70"
+      style={{ color: 'var(--app-input-foreground)' }}
+      value={customMessage}
+      onChange={(e) => setCustomMessage(e.target.value)}
+      onFocus={onFocusRow}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey && customMessage.trim()) {
+          e.preventDefault();
+          onSubmitReject();
+        }
+      }}
+    />
+  </div>
+);

packages/vscode-ide-companion/src/webview/handlers/MessageRouter.ts

@@ -7,7 +7,6 @@
 import type { IMessageHandler } from './BaseMessageHandler.js';
 import type { QwenAgentManager } from '../../services/qwenAgentManager.js';
 import type { ConversationStore } from '../../services/conversationStore.js';
-import type { PermissionResponseMessage } from '../../types/webviewMessageTypes.js';
 import { SessionMessageHandler } from './SessionMessageHandler.js';
 import { FileMessageHandler } from './FileMessageHandler.js';
 import { EditorMessageHandler } from './EditorMessageHandler.js';
@@ -23,7 +22,7 @@ export class MessageRouter {
   private authHandler: AuthMessageHandler;
   private currentConversationId: string | null = null;
   private permissionHandler:
-    | ((message: PermissionResponseMessage) => void)
+    | ((message: { type: string; data: { optionId: string } }) => void)
     | null = null;
 
   constructor(
@@ -81,7 +80,9 @@ export class MessageRouter {
     // Handle permission response specially
     if (message.type === 'permissionResponse') {
       if (this.permissionHandler) {
-        this.permissionHandler(message as PermissionResponseMessage);
+        this.permissionHandler(
+          message as { type: string; data: { optionId: string } },
+        );
       }
       return;
     }
@@ -130,7 +131,7 @@ export class MessageRouter {
    * Set permission handler
    */
   setPermissionHandler(
-    handler: (message: PermissionResponseMessage) => void,
+    handler: (message: { type: string; data: { optionId: string } }) => void,
   ): void {
     this.permissionHandler = handler;
   }

scripts/copy_files.js

@@ -49,7 +49,10 @@ function copyFilesRecursive(source, target, rootSourceDir) {
       const normalizedPath = relativePath.replace(/\\/g, '/');
       const isLocaleJs =
         ext === '.js' && normalizedPath.startsWith('i18n/locales/');
-      if (extensionsToCopy.includes(ext) || isLocaleJs) {
+      const isInsightTemplate = normalizedPath.startsWith(
+        'services/insight/templates/',
+      );
+      if (extensionsToCopy.includes(ext) || isLocaleJs || isInsightTemplate) {
         fs.copyFileSync(sourcePath, targetPath);
       }
     }