feat(vscode-ide-companion): support context left

.gitignore

@@ -23,7 +23,6 @@ package-lock.json
 .idea
 *.iml
 .cursor
-.qoder
 
 # OS metadata
 .DS_Store

docs/users/configuration/settings.md

@@ -381,7 +381,7 @@ Arguments passed directly when running the CLI can override other configurations
 | `--telemetry-otlp-protocol`  |       | Sets the OTLP protocol for telemetry (`grpc` or `http`).                                                                                                                                |                                        | Defaults to `grpc`. See [telemetry](../../developers/development/telemetry) for more information.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `--telemetry-log-prompts`    |       | Enables logging of prompts for telemetry.                                                                                                                                               |                                        | See [telemetry](../../developers/development/telemetry) for more information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `--checkpointing`            |       | Enables [checkpointing](../features/checkpointing).                                                                                                                                     |                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--acp`                      |       | Enables ACP mode (Agent Control Protocol). Useful for IDE/editor integrations like [Zed](../integration-zed).                                                                           |                                        | Stable. Replaces the deprecated `--experimental-acp` flag.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `--experimental-acp`         |       | Enables ACP mode (Agent Control Protocol). Useful for IDE/editor integrations like [Zed](../integration-zed).                                                                           |                                        | Experimental.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `--experimental-skills`      |       | Enables experimental [Agent Skills](../features/skills) (registers the `skill` tool and loads Skills from `.qwen/skills/` and `~/.qwen/skills/`).                                       |                                        | Experimental.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `--extensions`               | `-e`  | Specifies a list of extensions to use for the session.                                                                                                                                  | Extension names                        | If not provided, all available extensions are used. Use the special term `qwen -e none` to disable all extensions. Example: `qwen -e my-extension -e my-other-extension`                                                                                                                                                                                                                                                                                                                                                                                        |
 | `--list-extensions`          | `-l`  | Lists all available extensions and exits.                                                                                                                                               |                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

docs/users/integration-zed.md

@@ -32,7 +32,7 @@
 "Qwen Code": {
   "type": "custom",
   "command": "qwen",
-  "args": ["--acp"],
+  "args": ["--experimental-acp"],
   "env": {}
 }
 ```

docs/users/overview.md

@@ -1,6 +1,4 @@
 # Qwen Code overview
-[![@qwen-code/qwen-code downloads](https://img.shields.io/npm/dw/@qwen-code/qwen-code.svg)](https://npm-compare.com/@qwen-code/qwen-code) 
-[![@qwen-code/qwen-code version](https://img.shields.io/npm/v/@qwen-code/qwen-code.svg)](https://www.npmjs.com/package/@qwen-code/qwen-code)
 
 > Learn about Qwen Code, Qwen's agentic coding tool that lives in your terminal and helps you turn ideas into code faster than ever before.
 
@@ -48,7 +46,7 @@ You'll be prompted to log in on first use. That's it! [Continue with Quickstart
 
 > [!note]
 >
-> **New VS Code Extension (Beta)**: Prefer a graphical interface? Our new **VS Code extension** provides an easy-to-use native IDE experience without requiring terminal familiarity. Simply install from the marketplace and start coding with Qwen Code directly in your sidebar. Download and install the [Qwen Code Companion](https://marketplace.visualstudio.com/items?itemName=qwenlm.qwen-code-vscode-ide-companion) now.
+> **New VS Code Extension (Beta)**: Prefer a graphical interface? Our new **VS Code extension** provides an easy-to-use native IDE experience without requiring terminal familiarity. Simply install from the marketplace and start coding with Qwen Code directly in your sidebar. You can search for **Qwen Code** in the VS Code Marketplace and download it.
 
 ## What Qwen Code does for you
 

integration-tests/acp-integration.test.ts

@@ -80,11 +80,10 @@ type PermissionHandler = (
 
 /**
  * Sets up an ACP test environment with all necessary utilities.
- * @param useNewFlag - If true, uses --acp; if false, uses --experimental-acp (for backward compatibility testing)
  */
 function setupAcpTest(
   rig: TestRig,
-  options?: { permissionHandler?: PermissionHandler; useNewFlag?: boolean },
+  options?: { permissionHandler?: PermissionHandler },
 ) {
   const pending = new Map<number, PendingRequest>();
   let nextRequestId = 1;
@@ -96,13 +95,9 @@ function setupAcpTest(
   const permissionHandler =
     options?.permissionHandler ?? (() => ({ optionId: 'proceed_once' }));
 
-  // Use --acp by default, but allow testing with --experimental-acp for backward compatibility
-  const acpFlag =
-    options?.useNewFlag !== false ? '--acp' : '--experimental-acp';
-
   const agent = spawn(
     'node',
-    [rig.bundlePath, acpFlag, '--no-chat-recording'],
+    [rig.bundlePath, '--experimental-acp', '--no-chat-recording'],
     {
       cwd: rig.testDir!,
       stdio: ['pipe', 'pipe', 'pipe'],
@@ -626,99 +621,3 @@ function setupAcpTest(
     }
   });
 });
-
-(IS_SANDBOX ? describe.skip : describe)(
-  'acp flag backward compatibility',
-  () => {
-    it('should work with deprecated --experimental-acp flag and show warning', async () => {
-      const rig = new TestRig();
-      rig.setup('acp backward compatibility');
-
-      const { sendRequest, cleanup, stderr } = setupAcpTest(rig, {
-        useNewFlag: false,
-      });
-
-      try {
-        const initResult = await sendRequest('initialize', {
-          protocolVersion: 1,
-          clientCapabilities: {
-            fs: { readTextFile: true, writeTextFile: true },
-          },
-        });
-        expect(initResult).toBeDefined();
-
-        // Verify deprecation warning is shown
-        const stderrOutput = stderr.join('');
-        expect(stderrOutput).toContain('--experimental-acp is deprecated');
-        expect(stderrOutput).toContain('Please use --acp instead');
-
-        await sendRequest('authenticate', { methodId: 'openai' });
-
-        const newSession = (await sendRequest('session/new', {
-          cwd: rig.testDir!,
-          mcpServers: [],
-        })) as { sessionId: string };
-        expect(newSession.sessionId).toBeTruthy();
-
-        // Verify functionality still works
-        const promptResult = await sendRequest('session/prompt', {
-          sessionId: newSession.sessionId,
-          prompt: [{ type: 'text', text: 'Say hello.' }],
-        });
-        expect(promptResult).toBeDefined();
-      } catch (e) {
-        if (stderr.length) {
-          console.error('Agent stderr:', stderr.join(''));
-        }
-        throw e;
-      } finally {
-        await cleanup();
-      }
-    });
-
-    it('should work with new --acp flag without warnings', async () => {
-      const rig = new TestRig();
-      rig.setup('acp new flag');
-
-      const { sendRequest, cleanup, stderr } = setupAcpTest(rig, {
-        useNewFlag: true,
-      });
-
-      try {
-        const initResult = await sendRequest('initialize', {
-          protocolVersion: 1,
-          clientCapabilities: {
-            fs: { readTextFile: true, writeTextFile: true },
-          },
-        });
-        expect(initResult).toBeDefined();
-
-        // Verify no deprecation warning is shown
-        const stderrOutput = stderr.join('');
-        expect(stderrOutput).not.toContain('--experimental-acp is deprecated');
-
-        await sendRequest('authenticate', { methodId: 'openai' });
-
-        const newSession = (await sendRequest('session/new', {
-          cwd: rig.testDir!,
-          mcpServers: [],
-        })) as { sessionId: string };
-        expect(newSession.sessionId).toBeTruthy();
-
-        // Verify functionality works
-        const promptResult = await sendRequest('session/prompt', {
-          sessionId: newSession.sessionId,
-          prompt: [{ type: 'text', text: 'Say hello.' }],
-        });
-        expect(promptResult).toBeDefined();
-      } catch (e) {
-        if (stderr.length) {
-          console.error('Agent stderr:', stderr.join(''));
-        }
-        throw e;
-      } finally {
-        await cleanup();
-      }
-    });
-  },
-);

integration-tests/file-system.test.ts

@@ -5,6 +5,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
+import { existsSync } from 'node:fs';
+import * as path from 'node:path';
 import { TestRig, printDebugInfo, validateModelOutput } from './test-helper.js';
 
 describe('file-system', () => {
@@ -243,5 +245,12 @@ describe('file-system', () => {
       successfulReplace,
       'A successful replace should not have occurred',
     ).toBeUndefined();
+
+    // Final verification: ensure the file was not created.
+    const filePath = path.join(rig.testDir!, fileName);
+    const fileExists = existsSync(filePath);
+    expect(fileExists, 'The non-existent file should not be created').toBe(
+      false,
+    );
   });
 });

packages/cli/src/acp-integration/acpAgent.ts

@@ -19,6 +19,7 @@ import {
   type Config,
   type ConversationRecord,
   type DeviceAuthorizationData,
+  tokenLimit,
 } from '@qwen-code/qwen-code-core';
 import type { ApprovalModeValue } from './schema.js';
 import * as acp from './acp.js';
@@ -165,9 +166,30 @@ class GeminiAgent {
     this.setupFileSystem(config);
 
     const session = await this.createAndStoreSession(config);
+    const configuredModel = (
+      config.getModel() ||
+      this.config.getModel() ||
+      ''
+    ).trim();
+    const modelId = configuredModel || 'default';
+    const modelName = configuredModel || modelId;
 
     return {
       sessionId: session.getId(),
+      models: {
+        currentModelId: modelId,
+        availableModels: [
+          {
+            modelId,
+            name: modelName,
+            description: null,
+            _meta: {
+              contextLimit: tokenLimit(modelId),
+            },
+          },
+        ],
+        _meta: null,
+      },
     };
   }
 

packages/cli/src/acp-integration/schema.ts

@@ -93,6 +93,7 @@ export type ModeInfo = z.infer<typeof modeInfoSchema>;
 export type ModesData = z.infer<typeof modesDataSchema>;
 
 export type AgentInfo = z.infer<typeof agentInfoSchema>;
+export type ModelInfo = z.infer<typeof modelInfoSchema>;
 
 export type PromptCapabilities = z.infer<typeof promptCapabilitiesSchema>;
 
@@ -254,8 +255,26 @@ export const authenticateUpdateSchema = z.object({
 
 export type AuthenticateUpdate = z.infer<typeof authenticateUpdateSchema>;
 
+export const acpMetaSchema = z.record(z.unknown()).nullable().optional();
+
+export const modelIdSchema = z.string();
+
+export const modelInfoSchema = z.object({
+  _meta: acpMetaSchema,
+  description: z.string().nullable().optional(),
+  modelId: modelIdSchema,
+  name: z.string(),
+});
+
+export const sessionModelStateSchema = z.object({
+  _meta: acpMetaSchema,
+  availableModels: z.array(modelInfoSchema),
+  currentModelId: modelIdSchema,
+});
+
 export const newSessionResponseSchema = z.object({
   sessionId: z.string(),
+  models: sessionModelStateSchema,
 });
 
 export const loadSessionResponseSchema = z.null();
@@ -514,6 +533,13 @@ export const currentModeUpdateSchema = z.object({
 
 export type CurrentModeUpdate = z.infer<typeof currentModeUpdateSchema>;
 
+export const currentModelUpdateSchema = z.object({
+  sessionUpdate: z.literal('current_model_update'),
+  model: modelInfoSchema,
+});
+
+export type CurrentModelUpdate = z.infer<typeof currentModelUpdateSchema>;
+
 export const sessionUpdateSchema = z.union([
   z.object({
     content: contentBlockSchema,
@@ -555,6 +581,7 @@ export const sessionUpdateSchema = z.union([
     sessionUpdate: z.literal('plan'),
   }),
   currentModeUpdateSchema,
+  currentModelUpdateSchema,
   availableCommandsUpdateSchema,
 ]);
 

packages/cli/src/config/config.ts

@@ -111,7 +111,6 @@ export interface CliArgs {
   telemetryOutfile: string | undefined;
   allowedMcpServerNames: string[] | undefined;
   allowedTools: string[] | undefined;
-  acp: boolean | undefined;
   experimentalAcp: boolean | undefined;
   experimentalSkills: boolean | undefined;
   extensions: string[] | undefined;
@@ -305,15 +304,9 @@ export async function parseArguments(settings: Settings): Promise<CliArgs> {
           description: 'Enables checkpointing of file edits',
           default: false,
         })
-        .option('acp', {
-          type: 'boolean',
-          description: 'Starts the agent in ACP mode',
-        })
         .option('experimental-acp', {
           type: 'boolean',
-          description:
-            'Starts the agent in ACP mode (deprecated, use --acp instead)',
-          hidden: true,
+          description: 'Starts the agent in ACP mode',
         })
         .option('experimental-skills', {
           type: 'boolean',
@@ -596,19 +589,8 @@ export async function parseArguments(settings: Settings): Promise<CliArgs> {
   // The import format is now only controlled by settings.memoryImportFormat
   // We no longer accept it as a CLI argument
 
-  // Handle deprecated --experimental-acp flag
-  if (result['experimentalAcp']) {
-    console.warn(
-      '\x1b[33m⚠ Warning: --experimental-acp is deprecated and will be removed in a future release. Please use --acp instead.\x1b[0m',
-    );
-    // Map experimental-acp to acp if acp is not explicitly set
-    if (!result['acp']) {
-      (result as Record<string, unknown>)['acp'] = true;
-    }
-  }
-
-  // Apply ACP fallback: if acp or experimental-acp is present but no explicit --channel, treat as ACP
-  if ((result['acp'] || result['experimentalAcp']) && !result['channel']) {
+  // Apply ACP fallback: if experimental-acp is present but no explicit --channel, treat as ACP
+  if (result['experimentalAcp'] && !result['channel']) {
     (result as Record<string, unknown>)['channel'] = 'ACP';
   }
 
@@ -999,7 +981,7 @@ export async function loadCliConfig(
     sessionTokenLimit: settings.model?.sessionTokenLimit ?? -1,
     maxSessionTurns:
       argv.maxSessionTurns ?? settings.model?.maxSessionTurns ?? -1,
-    experimentalZedIntegration: argv.acp || argv.experimentalAcp || false,
+    experimentalZedIntegration: argv.experimentalAcp || false,
     experimentalSkills: argv.experimentalSkills || false,
     listExtensions: argv.listExtensions || false,
     extensions: allExtensions,

packages/cli/src/gemini.test.tsx

@@ -460,7 +460,6 @@ describe('gemini.tsx main function kitty protocol', () => {
       telemetryOutfile: undefined,
       allowedMcpServerNames: undefined,
       allowedTools: undefined,
-      acp: undefined,
       experimentalAcp: undefined,
       experimentalSkills: undefined,
       extensions: undefined,

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

@@ -95,7 +95,7 @@ export class AcpConnection {
     const spawnCommand: string = process.execPath;
     const spawnArgs: string[] = [
       cliEntryPath,
-      '--acp',
+      '--experimental-acp',
       '--channel=VSCode',
       ...extraArgs,
     ];
@@ -146,6 +146,8 @@ export class AcpConnection {
       console.error(
         `[ACP qwen] Process exited with code: ${code}, signal: ${signal}`,
       );
+      // Clear pending requests when process exits
+      this.pendingRequests.clear();
     });
 
     // Wait for process to start

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

@@ -8,6 +8,7 @@ import type {
   AcpSessionUpdate,
   AcpPermissionRequest,
   AuthenticateUpdateNotification,
+  ModelInfo,
 } from '../types/acpTypes.js';
 import type { ApprovalModeValue } from '../types/approvalModeValueTypes.js';
 import { QwenSessionReader, type QwenSession } from './qwenSessionReader.js';
@@ -17,6 +18,7 @@ import type {
   PlanEntry,
   ToolCallUpdateData,
   QwenAgentCallbacks,
+  UsageStatsPayload,
 } from '../types/chatTypes.js';
 import {
   QwenConnectionHandler,
@@ -24,6 +26,7 @@ import {
 } from '../services/qwenConnectionHandler.js';
 import { QwenSessionUpdateHandler } from './qwenSessionUpdateHandler.js';
 import { authMethod } from '../types/acpTypes.js';
+import { extractModelInfoFromNewSessionResult } from '../utils/acpModelInfo.js';
 import { isAuthenticationRequiredError } from '../utils/authErrors.js';
 import { handleAuthenticateUpdate } from '../utils/authNotificationHandler.js';
 
@@ -195,12 +198,16 @@ export class QwenAgentManager {
     options?: AgentConnectOptions,
   ): Promise<QwenConnectionResult> {
     this.currentWorkingDir = workingDir;
-    return this.connectionHandler.connect(
+    const res = await this.connectionHandler.connect(
       this.connection,
       workingDir,
       cliEntryPath,
       options,
     );
+    if (res.modelInfo && this.callbacks.onModelInfo) {
+      this.callbacks.onModelInfo(res.modelInfo);
+    }
+    return res;
   }
 
   /**
@@ -1091,9 +1098,10 @@ export class QwenAgentManager {
 
     this.sessionCreateInFlight = (async () => {
       try {
+        let newSessionResult: unknown;
         // Try to create a new ACP session. If Qwen asks for auth, let it handle authentication.
         try {
-          await this.connection.newSession(workingDir);
+          newSessionResult = await this.connection.newSession(workingDir);
         } catch (err) {
           const requiresAuth = isAuthenticationRequiredError(err);
 
@@ -1115,7 +1123,7 @@ export class QwenAgentManager {
               );
               // Add a slight delay to ensure auth state is settled
               await new Promise((resolve) => setTimeout(resolve, 300));
-              await this.connection.newSession(workingDir);
+              newSessionResult = await this.connection.newSession(workingDir);
             } catch (reauthErr) {
               console.error(
                 '[QwenAgentManager] Re-authentication failed:',
@@ -1127,6 +1135,13 @@ export class QwenAgentManager {
             throw err;
           }
         }
+
+        const modelInfo =
+          extractModelInfoFromNewSessionResult(newSessionResult);
+        if (modelInfo && this.callbacks.onModelInfo) {
+          this.callbacks.onModelInfo(modelInfo);
+        }
+
         const newSessionId = this.connection.currentSessionId;
         console.log(
           '[QwenAgentManager] New session created with ID:',
@@ -1257,6 +1272,22 @@ export class QwenAgentManager {
     this.sessionUpdateHandler.updateCallbacks(this.callbacks);
   }
 
+  /**
+   * Register callback for usage metadata updates
+   */
+  onUsageUpdate(callback: (stats: UsageStatsPayload) => void): void {
+    this.callbacks.onUsageUpdate = callback;
+    this.sessionUpdateHandler.updateCallbacks(this.callbacks);
+  }
+
+  /**
+   * Register callback for model info updates
+   */
+  onModelInfo(callback: (info: ModelInfo) => void): void {
+    this.callbacks.onModelInfo = callback;
+    this.sessionUpdateHandler.updateCallbacks(this.callbacks);
+  }
+
   /**
    * Disconnect
    */

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

@@ -13,10 +13,13 @@
 import type { AcpConnection } from './acpConnection.js';
 import { isAuthenticationRequiredError } from '../utils/authErrors.js';
 import { authMethod } from '../types/acpTypes.js';
+import { extractModelInfoFromNewSessionResult } from '../utils/acpModelInfo.js';
+import type { ModelInfo } from '../types/acpTypes.js';
 
 export interface QwenConnectionResult {
   sessionCreated: boolean;
   requiresAuth: boolean;
+  modelInfo?: ModelInfo;
 }
 
 /**
@@ -44,6 +47,7 @@ export class QwenConnectionHandler {
     const autoAuthenticate = options?.autoAuthenticate ?? true;
     let sessionCreated = false;
     let requiresAuth = false;
+    let modelInfo: ModelInfo | undefined;
 
     // Build extra CLI arguments (only essential parameters)
     const extraArgs: string[] = [];
@@ -66,13 +70,15 @@ export class QwenConnectionHandler {
         console.log(
           '[QwenAgentManager] Creating new session (letting CLI handle authentication)...',
         );
-        await this.newSessionWithRetry(
+        const newSessionResult = await this.newSessionWithRetry(
           connection,
           workingDir,
           3,
           authMethod,
           autoAuthenticate,
         );
+        modelInfo =
+          extractModelInfoFromNewSessionResult(newSessionResult) || undefined;
         console.log('[QwenAgentManager] New session created successfully');
         sessionCreated = true;
       } catch (sessionError) {
@@ -99,7 +105,7 @@ export class QwenConnectionHandler {
     console.log(`\n========================================`);
     console.log(`[QwenAgentManager] ✅ CONNECT() COMPLETED SUCCESSFULLY`);
     console.log(`========================================\n`);
-    return { sessionCreated, requiresAuth };
+    return { sessionCreated, requiresAuth, modelInfo };
   }
 
   /**
@@ -115,15 +121,15 @@ export class QwenConnectionHandler {
     maxRetries: number,
     authMethod: string,
     autoAuthenticate: boolean,
-  ): Promise<void> {
+  ): Promise<unknown> {
     for (let attempt = 1; attempt <= maxRetries; attempt++) {
       try {
         console.log(
           `[QwenAgentManager] Creating session (attempt ${attempt}/${maxRetries})...`,
         );
-        await connection.newSession(workingDir);
+        const res = await connection.newSession(workingDir);
         console.log('[QwenAgentManager] Session created successfully');
-        return;
+        return res;
       } catch (error) {
         const errorMessage =
           error instanceof Error ? error.message : String(error);
@@ -155,11 +161,11 @@ export class QwenConnectionHandler {
               '[QwenAgentManager] newSessionWithRetry Authentication successful',
             );
             // Retry immediately after successful auth
-            await connection.newSession(workingDir);
+            const res = await connection.newSession(workingDir);
             console.log(
               '[QwenAgentManager] Session created successfully after auth',
             );
-            return;
+            return res;
           } catch (authErr) {
             console.error(
               '[QwenAgentManager] Re-authentication failed:',
@@ -180,5 +186,7 @@ export class QwenConnectionHandler {
         await new Promise((resolve) => setTimeout(resolve, delay));
       }
     }
+
+    throw new Error('Session creation failed unexpectedly');
   }
 }

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

@@ -10,9 +10,12 @@
  * Handles session updates from ACP and dispatches them to appropriate callbacks
  */
 
-import type { AcpSessionUpdate } from '../types/acpTypes.js';
+import type { AcpSessionUpdate, SessionUpdateMeta } from '../types/acpTypes.js';
 import type { ApprovalModeValue } from '../types/approvalModeValueTypes.js';
-import type { QwenAgentCallbacks } from '../types/chatTypes.js';
+import type {
+  QwenAgentCallbacks,
+  UsageStatsPayload,
+} from '../types/chatTypes.js';
 
 /**
  * Qwen Session Update Handler class
@@ -57,6 +60,7 @@ export class QwenSessionUpdateHandler {
         if (update.content?.text && this.callbacks.onStreamChunk) {
           this.callbacks.onStreamChunk(update.content.text);
         }
+        this.emitUsageMeta(update._meta);
         break;
 
       case 'agent_thought_chunk':
@@ -71,6 +75,7 @@ export class QwenSessionUpdateHandler {
             this.callbacks.onStreamChunk(update.content.text);
           }
         }
+        this.emitUsageMeta(update._meta);
         break;
 
       case 'tool_call': {
@@ -160,4 +165,17 @@ export class QwenSessionUpdateHandler {
         break;
     }
   }
+
+  private emitUsageMeta(meta?: SessionUpdateMeta): void {
+    if (!meta || !this.callbacks.onUsageUpdate) {
+      return;
+    }
+
+    const payload: UsageStatsPayload = {
+      usage: meta.usage || undefined,
+      durationMs: meta.durationMs ?? undefined,
+    };
+
+    this.callbacks.onUsageUpdate(payload);
+  }
 }

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

@@ -48,6 +48,35 @@ export interface ContentBlock {
   uri?: string;
 }
 
+export interface UsageMetadata {
+  promptTokens?: number | null;
+  completionTokens?: number | null;
+  thoughtsTokens?: number | null;
+  totalTokens?: number | null;
+  cachedTokens?: number | null;
+}
+
+export interface SessionUpdateMeta {
+  usage?: UsageMetadata | null;
+  durationMs?: number | null;
+}
+
+export type AcpMeta = Record<string, unknown>;
+export type ModelId = string;
+
+export interface ModelInfo {
+  _meta?: AcpMeta | null;
+  description?: string | null;
+  modelId: ModelId;
+  name: string;
+}
+
+export interface SessionModelState {
+  _meta?: AcpMeta | null;
+  availableModels: ModelInfo[];
+  currentModelId: ModelId;
+}
+
 export interface UserMessageChunkUpdate extends BaseSessionUpdate {
   update: {
     sessionUpdate: 'user_message_chunk';
@@ -59,6 +88,7 @@ export interface AgentMessageChunkUpdate extends BaseSessionUpdate {
   update: {
     sessionUpdate: 'agent_message_chunk';
     content: ContentBlock;
+    _meta?: SessionUpdateMeta;
   };
 }
 
@@ -66,6 +96,7 @@ export interface AgentThoughtChunkUpdate extends BaseSessionUpdate {
   update: {
     sessionUpdate: 'agent_thought_chunk';
     content: ContentBlock;
+    _meta?: SessionUpdateMeta;
   };
 }
 

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

@@ -3,7 +3,7 @@
  * Copyright 2025 Qwen Team
  * SPDX-License-Identifier: Apache-2.0
  */
-import type { AcpPermissionRequest } from './acpTypes.js';
+import type { AcpPermissionRequest, ModelInfo } from './acpTypes.js';
 import type { ApprovalModeValue } from './approvalModeValueTypes.js';
 
 export interface ChatMessage {
@@ -28,6 +28,18 @@ export interface ToolCallUpdateData {
   locations?: Array<{ path: string; line?: number | null }>;
 }
 
+export interface UsageStatsPayload {
+  usage?: {
+    promptTokens?: number | null;
+    completionTokens?: number | null;
+    thoughtsTokens?: number | null;
+    totalTokens?: number | null;
+    cachedTokens?: number | null;
+  } | null;
+  durationMs?: number | null;
+  tokenLimit?: number | null;
+}
+
 export interface QwenAgentCallbacks {
   onMessage?: (message: ChatMessage) => void;
   onStreamChunk?: (chunk: string) => void;
@@ -45,6 +57,8 @@ export interface QwenAgentCallbacks {
     }>;
   }) => void;
   onModeChanged?: (modeId: ApprovalModeValue) => void;
+  onUsageUpdate?: (stats: UsageStatsPayload) => void;
+  onModelInfo?: (info: ModelInfo) => void;
 }
 
 export interface ToolCallUpdate {

packages/vscode-ide-companion/src/utils/acpModelInfo.test.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, it } from 'vitest';
+import { extractModelInfoFromNewSessionResult } from './acpModelInfo.js';
+
+describe('extractModelInfoFromNewSessionResult', () => {
+  it('extracts from NewSessionResponse.models (SessionModelState)', () => {
+    expect(
+      extractModelInfoFromNewSessionResult({
+        sessionId: 's',
+        models: {
+          currentModelId: 'qwen3-coder-plus',
+          availableModels: [
+            {
+              modelId: 'qwen3-coder-plus',
+              name: 'Qwen3 Coder Plus',
+              description: null,
+              _meta: { contextLimit: 123 },
+            },
+          ],
+        },
+      }),
+    ).toEqual({
+      modelId: 'qwen3-coder-plus',
+      name: 'Qwen3 Coder Plus',
+      description: null,
+      _meta: { contextLimit: 123 },
+    });
+  });
+
+  it('skips invalid model entries and returns first valid one', () => {
+    expect(
+      extractModelInfoFromNewSessionResult({
+        models: {
+          currentModelId: 'ok',
+          availableModels: [
+            { name: '', modelId: '' },
+            { name: 'Ok', modelId: 'ok', _meta: { contextLimit: null } },
+          ],
+        },
+      }),
+    ).toEqual({ name: 'Ok', modelId: 'ok', _meta: { contextLimit: null } });
+  });
+
+  it('falls back to single `model` object', () => {
+    expect(
+      extractModelInfoFromNewSessionResult({
+        model: {
+          name: 'Single',
+          modelId: 'single',
+          _meta: { contextLimit: 999 },
+        },
+      }),
+    ).toEqual({
+      name: 'Single',
+      modelId: 'single',
+      _meta: { contextLimit: 999 },
+    });
+  });
+
+  it('falls back to legacy `modelInfo`', () => {
+    expect(
+      extractModelInfoFromNewSessionResult({
+        modelInfo: { name: 'legacy' },
+      }),
+    ).toEqual({ name: 'legacy', modelId: 'legacy' });
+  });
+
+  it('returns null when missing', () => {
+    expect(extractModelInfoFromNewSessionResult({})).toBeNull();
+    expect(extractModelInfoFromNewSessionResult(null)).toBeNull();
+  });
+});

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

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { AcpMeta, ModelInfo } from '../types/acpTypes.js';
+
+const asMeta = (value: unknown): AcpMeta | null | undefined => {
+  if (value === null) {
+    return null;
+  }
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return value as AcpMeta;
+  }
+  return undefined;
+};
+
+const normalizeModelInfo = (value: unknown): ModelInfo | null => {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+
+  const obj = value as Record<string, unknown>;
+  const nameRaw = obj['name'];
+  const modelIdRaw = obj['modelId'];
+  const descriptionRaw = obj['description'];
+
+  const name = typeof nameRaw === 'string' ? nameRaw.trim() : '';
+  const modelId =
+    typeof modelIdRaw === 'string' && modelIdRaw.trim().length > 0
+      ? modelIdRaw.trim()
+      : name;
+
+  if (!modelId || modelId.trim().length === 0 || !name) {
+    return null;
+  }
+
+  const description =
+    typeof descriptionRaw === 'string' || descriptionRaw === null
+      ? descriptionRaw
+      : undefined;
+
+  const metaFromWire = asMeta(obj['_meta']);
+
+  // Back-compat: older implementations used `contextLimit` at the top-level.
+  const legacyContextLimit = obj['contextLimit'];
+  const contextLimit =
+    typeof legacyContextLimit === 'number' || legacyContextLimit === null
+      ? legacyContextLimit
+      : undefined;
+
+  let mergedMeta: AcpMeta | null | undefined = metaFromWire;
+  if (typeof contextLimit !== 'undefined') {
+    if (mergedMeta === null) {
+      mergedMeta = { contextLimit };
+    } else if (typeof mergedMeta === 'undefined') {
+      mergedMeta = { contextLimit };
+    } else {
+      mergedMeta = { ...mergedMeta, contextLimit };
+    }
+  }
+
+  return {
+    modelId,
+    name,
+    ...(typeof description !== 'undefined' ? { description } : {}),
+    ...(typeof mergedMeta !== 'undefined' ? { _meta: mergedMeta } : {}),
+  };
+};
+
+/**
+ * Extract model info from ACP `session/new` result.
+ *
+ * Per Agent Client Protocol draft schema, NewSessionResponse includes `models`.
+ * We also accept legacy shapes for compatibility.
+ */
+export const extractModelInfoFromNewSessionResult = (
+  result: unknown,
+): ModelInfo | null => {
+  if (!result || typeof result !== 'object') {
+    return null;
+  }
+
+  const obj = result as Record<string, unknown>;
+
+  const models = obj['models'];
+
+  // ACP draft: NewSessionResponse.models is a SessionModelState object.
+  if (models && typeof models === 'object' && !Array.isArray(models)) {
+    const state = models as Record<string, unknown>;
+    const availableModels = state['availableModels'];
+    const currentModelId = state['currentModelId'];
+    if (Array.isArray(availableModels)) {
+      const normalizedModels = availableModels
+        .map(normalizeModelInfo)
+        .filter((m): m is ModelInfo => Boolean(m));
+      if (normalizedModels.length > 0) {
+        if (typeof currentModelId === 'string' && currentModelId.length > 0) {
+          const selected = normalizedModels.find(
+            (m) => m.modelId === currentModelId,
+          );
+          if (selected) {
+            return selected;
+          }
+        }
+        return normalizedModels[0];
+      }
+    }
+  }
+
+  // Legacy: some implementations returned `models` as a raw array.
+  if (Array.isArray(models)) {
+    for (const entry of models) {
+      const normalized = normalizeModelInfo(entry);
+      if (normalized) {
+        return normalized;
+      }
+    }
+  }
+
+  // Some implementations may return a single model object.
+  const model = normalizeModelInfo(obj['model']);
+  if (model) {
+    return model;
+  }
+
+  // Legacy: modelInfo on initialize; allow as a fallback.
+  const legacy = normalizeModelInfo(obj['modelInfo']);
+  if (legacy) {
+    return legacy;
+  }
+
+  return null;
+};

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

@@ -45,7 +45,12 @@ import { SessionSelector } from './components/layout/SessionSelector.js';
 import { FileIcon, UserIcon } from './components/icons/index.js';
 import { ApprovalMode, NEXT_APPROVAL_MODE } from '../types/acpTypes.js';
 import type { ApprovalModeValue } from '../types/approvalModeValueTypes.js';
-import type { PlanEntry } from '../types/chatTypes.js';
+import type { PlanEntry, UsageStatsPayload } from '../types/chatTypes.js';
+import type { ModelInfo } from '../types/acpTypes.js';
+import {
+  DEFAULT_TOKEN_LIMIT,
+  tokenLimit,
+} from '@qwen-code/qwen-code-core/src/core/tokenLimits.js';
 
 export const App: React.FC = () => {
   const vscode = useVSCode();
@@ -70,6 +75,8 @@ export const App: React.FC = () => {
   const [planEntries, setPlanEntries] = useState<PlanEntry[]>([]);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true); // Track if we're still initializing/loading
+  const [modelInfo, setModelInfo] = useState<ModelInfo | null>(null);
+  const [usageStats, setUsageStats] = useState<UsageStatsPayload | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(
     null,
   ) as React.RefObject<HTMLDivElement>;
@@ -160,6 +167,48 @@ export const App: React.FC = () => {
 
   const completion = useCompletionTrigger(inputFieldRef, getCompletionItems);
 
+  const contextUsage = useMemo(() => {
+    if (!usageStats && !modelInfo) {
+      return null;
+    }
+
+    const modelName =
+      modelInfo?.modelId && typeof modelInfo.modelId === 'string'
+        ? modelInfo.modelId
+        : modelInfo?.name && typeof modelInfo.name === 'string'
+          ? modelInfo.name
+          : undefined;
+
+    const derivedLimit =
+      modelName && modelName.length > 0 ? tokenLimit(modelName) : undefined;
+
+    const metaLimitRaw = modelInfo?._meta?.['contextLimit'];
+    const metaLimit =
+      typeof metaLimitRaw === 'number' || metaLimitRaw === null
+        ? metaLimitRaw
+        : undefined;
+
+    const limit =
+      usageStats?.tokenLimit ??
+      metaLimit ??
+      derivedLimit ??
+      DEFAULT_TOKEN_LIMIT;
+
+    const used = usageStats?.usage?.promptTokens ?? 0;
+    if (typeof limit !== 'number' || limit <= 0 || used < 0) {
+      return null;
+    }
+    const percentLeft = Math.max(
+      0,
+      Math.min(100, Math.round(((limit - used) / limit) * 100)),
+    );
+    return {
+      percentLeft,
+      usedTokens: used,
+      tokenLimit: limit,
+    };
+  }, [usageStats, modelInfo]);
+
   // Track a lightweight signature of workspace files to detect content changes even when length is unchanged
   const workspaceFilesSignature = useMemo(
     () =>
@@ -248,6 +297,10 @@ export const App: React.FC = () => {
     setInputText,
     setEditMode,
     setIsAuthenticated,
+    setUsageStats: (stats) => setUsageStats(stats ?? null),
+    setModelInfo: (info) => {
+      setModelInfo(info);
+    },
   });
 
   // Auto-scroll handling: keep the view pinned to bottom when new content arrives,
@@ -760,6 +813,7 @@ export const App: React.FC = () => {
           activeFileName={fileContext.activeFileName}
           activeSelection={fileContext.activeSelection}
           skipAutoActiveContext={skipAutoActiveContext}
+          contextUsage={contextUsage}
           onInputChange={setInputText}
           onCompositionStart={() => setIsComposing(true)}
           onCompositionEnd={() => setIsComposing(false)}

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

@@ -118,6 +118,20 @@ export class WebViewProvider {
       });
     });
 
+    this.agentManager.onUsageUpdate((stats) => {
+      this.sendMessageToWebView({
+        type: 'usageStats',
+        data: stats,
+      });
+    });
+
+    this.agentManager.onModelInfo((info) => {
+      this.sendMessageToWebView({
+        type: 'modelInfo',
+        data: info,
+      });
+    });
+
     // Setup end-turn handler from ACP stopReason notifications
     this.agentManager.onEndTurn((reason) => {
       // Ensure WebView exits streaming state even if no explicit streamEnd was emitted elsewhere

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

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface TooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  position = 'top',
+}) => (
+  <div className="relative inline-block">
+    <div className="group relative">
+      {children}
+      <div
+        className={`
+          absolute z-50 px-2 py-1 text-xs rounded-md shadow-lg
+          bg-[var(--app-primary-background)] border border-[var(--app-input-border)]
+          text-[var(--app-primary-foreground)] whitespace-nowrap
+          opacity-0 group-hover:opacity-100 transition-opacity duration-150
+          -translate-x-1/2 left-1/2
+          ${
+            position === 'top'
+              ? '-translate-y-1 bottom-full mb-1'
+              : position === 'bottom'
+                ? 'translate-y-1 top-full mt-1'
+                : position === 'left'
+                  ? '-translate-x-full left-0 translate-y-[-50%] top-1/2'
+                  : 'translate-x-0 right-0 translate-y-[-50%] top-1/2'
+          }
+          pointer-events-none
+        `}
+      >
+        {content}
+        <div
+          className={`
+            absolute w-2 h-2 bg-[var(--app-primary-background)] border-l border-b border-[var(--app-input-border)]
+            -rotate-45
+            ${
+              position === 'top'
+                ? 'top-full left-1/2 -translate-x-1/2 -translate-y-1/2'
+                : position === 'bottom'
+                  ? 'bottom-full left-1/2 -translate-x-1/2 translate-y-1/2'
+                  : position === 'left'
+                    ? 'right-full top-1/2 translate-x-1/2 -translate-y-1/2'
+                    : 'left-full top-1/2 -translate-x-1/2 -translate-y-1/2'
+            }
+          `}
+        />
+      </div>
+    </div>
+  </div>
+);

packages/vscode-ide-companion/src/webview/components/layout/ContextIndicator.tsx

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Tooltip } from '../Tooltip.js';
+
+interface ContextUsage {
+  percentLeft: number;
+  usedTokens: number;
+  tokenLimit: number;
+}
+
+interface ContextIndicatorProps {
+  contextUsage: ContextUsage | null;
+}
+
+export const ContextIndicator: React.FC<ContextIndicatorProps> = ({
+  contextUsage,
+}) => {
+  if (!contextUsage) {
+    return null;
+  }
+
+  // Calculate used percentage for the progress indicator
+  // contextUsage.percentLeft is the percentage remaining, so 100 - percentLeft = percent used
+  const percentUsed = 100 - contextUsage.percentLeft;
+  const percentFormatted = Math.max(0, Math.min(100, Math.round(percentUsed)));
+  const radius = 9;
+  const circumference = 2 * Math.PI * radius;
+  // To show the used portion, we need to offset the unused portion
+  // If 20% is used, we want to show 20% filled, so offset the remaining 80%
+  const dashOffset = ((100 - percentUsed) / 100) * circumference;
+  const formatNumber = (value: number) => {
+    if (value >= 1000) {
+      return `${(Math.round((value / 1000) * 10) / 10).toFixed(1)}k`;
+    }
+    return Math.round(value).toLocaleString();
+  };
+
+  // Create tooltip content with proper formatting
+  const tooltipContent = (
+    <div className="flex flex-col gap-1">
+      <div className="font-medium">
+        {percentFormatted}% • {formatNumber(contextUsage.usedTokens)} /{' '}
+        {formatNumber(contextUsage.tokenLimit)} context used
+      </div>
+    </div>
+  );
+
+  return (
+    <Tooltip content={tooltipContent} position="top">
+      <button
+        className="btn-icon-compact"
+        aria-label={`${percentFormatted}% • ${formatNumber(contextUsage.usedTokens)} / ${formatNumber(contextUsage.tokenLimit)} context used`}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true" role="presentation">
+          <circle
+            className="context-indicator__track"
+            cx="12"
+            cy="12"
+            r={radius}
+            fill="none"
+            stroke="currentColor"
+            opacity="0.2"
+          />
+          <circle
+            className="context-indicator__progress"
+            cx="12"
+            cy="12"
+            r={radius}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeDasharray={circumference}
+            strokeDashoffset={dashOffset}
+            style={{
+              transform: 'rotate(-90deg)',
+              transformOrigin: '50% 50%',
+            }}
+          />
+        </svg>
+      </button>
+    </Tooltip>
+  );
+};

packages/vscode-ide-companion/src/webview/components/layout/InputForm.tsx

@@ -21,6 +21,7 @@ import { CompletionMenu } from '../layout/CompletionMenu.js';
 import type { CompletionItem } from '../../../types/completionItemTypes.js';
 import { getApprovalModeInfoFromString } from '../../../types/acpTypes.js';
 import type { ApprovalModeValue } from '../../../types/approvalModeValueTypes.js';
+import { ContextIndicator } from './ContextIndicator.js';
 
 interface InputFormProps {
   inputText: string;
@@ -36,6 +37,11 @@ interface InputFormProps {
   activeSelection: { startLine: number; endLine: number } | null;
   // Whether to auto-load the active editor selection/path into context
   skipAutoActiveContext: boolean;
+  contextUsage: {
+    percentLeft: number;
+    usedTokens: number;
+    tokenLimit: number;
+  } | null;
   onInputChange: (text: string) => void;
   onCompositionStart: () => void;
   onCompositionEnd: () => void;
@@ -96,6 +102,7 @@ export const InputForm: React.FC<InputFormProps> = ({
   activeFileName,
   activeSelection,
   skipAutoActiveContext,
+  contextUsage,
   onInputChange,
   onCompositionStart,
   onCompositionEnd,
@@ -240,6 +247,9 @@ export const InputForm: React.FC<InputFormProps> = ({
             {/* Spacer */}
             <div className="flex-1 min-w-0" />
 
+            {/* Context usage indicator */}
+            <ContextIndicator contextUsage={contextUsage} />
+
             {/* @yiliang114. closed temporarily */}
             {/* Thinking button */}
             {/* <button

packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.ts

@@ -11,9 +11,13 @@ import type {
   PermissionOption,
   ToolCall as PermissionToolCall,
 } from '../components/PermissionDrawer/PermissionRequest.js';
-import type { ToolCallUpdate } from '../../types/chatTypes.js';
+import type {
+  ToolCallUpdate,
+  UsageStatsPayload,
+} from '../../types/chatTypes.js';
 import type { ApprovalModeValue } from '../../types/approvalModeValueTypes.js';
 import type { PlanEntry } from '../../types/chatTypes.js';
+import type { ModelInfo } from '../../types/acpTypes.js';
 
 const FORCE_CLEAR_STREAM_END_REASONS = new Set([
   'user_cancelled',
@@ -119,6 +123,10 @@ interface UseWebViewMessagesProps {
   setEditMode?: (mode: ApprovalModeValue) => void;
   // Authentication state setter
   setIsAuthenticated?: (authenticated: boolean | null) => void;
+  // Usage stats setter
+  setUsageStats?: (stats: UsageStatsPayload | undefined) => void;
+  // Model info setter
+  setModelInfo?: (info: ModelInfo | null) => void;
 }
 
 /**
@@ -137,12 +145,15 @@ export const useWebViewMessages = ({
   setInputText,
   setEditMode,
   setIsAuthenticated,
+  setUsageStats,
+  setModelInfo,
 }: UseWebViewMessagesProps) => {
   // VS Code API for posting messages back to the extension host
   const vscode = useVSCode();
   // Track active long-running tool calls (execute/bash/command) so we can
   // keep the bottom "waiting" message visible until all of them complete.
   const activeExecToolCallsRef = useRef<Set<string>>(new Set());
+  const modelInfoRef = useRef<ModelInfo | null>(null);
   // Use ref to store callbacks to avoid useEffect dependency issues
   const handlersRef = useRef({
     sessionManagement,
@@ -153,6 +164,8 @@ export const useWebViewMessages = ({
     setPlanEntries,
     handlePermissionRequest,
     setIsAuthenticated,
+    setUsageStats,
+    setModelInfo,
   });
 
   // Track last "Updated Plan" snapshot toolcall to support merge/dedupe
@@ -198,6 +211,8 @@ export const useWebViewMessages = ({
       setPlanEntries,
       handlePermissionRequest,
       setIsAuthenticated,
+      setUsageStats,
+      setModelInfo,
     };
   });
 
@@ -230,6 +245,42 @@ export const useWebViewMessages = ({
           break;
         }
 
+        case 'usageStats': {
+          const stats = message.data as UsageStatsPayload | undefined;
+          handlers.setUsageStats?.(stats);
+          break;
+        }
+
+        case 'modelInfo': {
+          const info = message.data as Partial<ModelInfo> | undefined;
+          if (
+            info &&
+            typeof info.name === 'string' &&
+            info.name.trim().length > 0
+          ) {
+            const modelId =
+              typeof info.modelId === 'string' && info.modelId.trim().length > 0
+                ? info.modelId.trim()
+                : info.name.trim();
+            const normalized: ModelInfo = {
+              modelId,
+              name: info.name.trim(),
+              ...(typeof info.description !== 'undefined'
+                ? { description: info.description ?? null }
+                : {}),
+              ...(typeof info._meta !== 'undefined'
+                ? { _meta: info._meta }
+                : {}),
+            };
+            modelInfoRef.current = normalized;
+            handlers.setModelInfo?.(normalized);
+          } else {
+            modelInfoRef.current = null;
+            handlers.setModelInfo?.(null);
+          }
+          break;
+        }
+
         case 'loginSuccess': {
           // Clear loading state and show a short assistant notice
           handlers.messageHandling.clearWaitingForResponse();

packages/vscode-ide-companion/src/webview/styles/tailwind.css

@@ -151,6 +151,28 @@
     fill: var(--app-qwen-ivory);
   }
 
+  .context-indicator {
+    @apply inline-flex items-center gap-1 px-1 py-0.5 rounded-small text-[0.8em] select-none;
+    color: var(--app-secondary-foreground);
+  }
+  .context-indicator svg {
+    width: 20px;
+    height: 20px;
+  }
+  .context-indicator__track,
+  .context-indicator__progress {
+    fill: none;
+    stroke-width: 2.5;
+  }
+  .context-indicator__track {
+    stroke: var(--app-secondary-foreground);
+    opacity: 0.35;
+  }
+  .context-indicator__progress {
+    stroke: var(--app-secondary-foreground);
+    stroke-linecap: round;
+  }
+
   .composer-overlay {
     @apply absolute inset-0 rounded-large z-0;
     background: var(--app-input-background);