+ {
+ sessionManagement.handleSwitchSession(sessionId);
+ sessionManagement.setSessionSearchQuery('');
+ }}
+ onClose={() => sessionManagement.setShowSessionSelector(false)}
+ hasMore={sessionManagement.hasMore}
+ isLoading={sessionManagement.isLoading}
+ onLoadMore={sessionManagement.handleLoadMoreSessions}
+ />
+
+ setIsComposing(true)}
+ onCompositionEnd={() => setIsComposing(false)}
+ onKeyDown={() => {}}
+ onSubmit={handleSubmit.handleSubmit}
+ onCancel={handleCancel}
+ onToggleEditMode={handleToggleEditMode}
+ onToggleThinking={handleToggleThinking}
+ onFocusActiveEditor={fileContext.focusActiveEditor}
+ onToggleSkipAutoActiveContext={() =>
+ setSkipAutoActiveContext((v) => !v)
+ }
+ onShowCommandMenu={async () => {
+ if (inputFieldRef.current) {
+ inputFieldRef.current.focus();
+
+ const selection = window.getSelection();
+ let position = { top: 0, left: 0 };
+
+ if (selection && selection.rangeCount > 0) {
+ try {
+ const range = selection.getRangeAt(0);
+ const rangeRect = range.getBoundingClientRect();
+ if (rangeRect.top > 0 && rangeRect.left > 0) {
+ position = {
+ top: rangeRect.top,
+ left: rangeRect.left,
+ };
+ } else {
+ const inputRect =
+ inputFieldRef.current.getBoundingClientRect();
+ position = { top: inputRect.top, left: inputRect.left };
+ }
+ } catch (error) {
+ console.error('[App] Error getting cursor position:', error);
+ const inputRect = inputFieldRef.current.getBoundingClientRect();
+ position = { top: inputRect.top, left: inputRect.left };
+ }
+ } else {
+ const inputRect = inputFieldRef.current.getBoundingClientRect();
+ position = { top: inputRect.top, left: inputRect.left };
+ }
+
+ await completion.openCompletion('/', '', position);
+ }
+ }}
+ onAttachContext={handleAttachContextClick}
+ completionIsOpen={completion.isOpen}
+ completionItems={completion.items}
+ onCompletionSelect={handleCompletionSelect}
+ onCompletionClose={completion.closeCompletion}
+ />
+
+ {permissionRequest && (
+ setPermissionRequest(null)}
+ />
+ )}
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/MessageHandler.ts b/packages/vscode-ide-companion/src/webview/MessageHandler.ts
new file mode 100644
index 00000000..1eca4a20
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/MessageHandler.ts
@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { QwenAgentManager } from '../services/qwenAgentManager.js';
+import type { ConversationStore } from '../services/conversationStore.js';
+import { MessageRouter } from './handlers/MessageRouter.js';
+
+/**
+ * MessageHandler (Refactored Version)
+ * This is a lightweight wrapper class that internally uses MessageRouter and various sub-handlers
+ * Maintains interface compatibility with the original code
+ */
+export class MessageHandler {
+ private router: MessageRouter;
+
+ constructor(
+ agentManager: QwenAgentManager,
+ conversationStore: ConversationStore,
+ currentConversationId: string | null,
+ sendToWebView: (message: unknown) => void,
+ ) {
+ this.router = new MessageRouter(
+ agentManager,
+ conversationStore,
+ currentConversationId,
+ sendToWebView,
+ );
+ }
+
+ /**
+ * Route messages to the corresponding handler
+ */
+ async route(message: { type: string; data?: unknown }): Promise
+ {!hasContent ? (
+
+
+
+ {messageHandling.isWaitingForResponse &&
+ messageHandling.loadingMessage && (
+
+
+
+
+ )}
+
+ {/* Main container */}
+
+ );
+};
+
+/**
+ * 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
+ {/* Background layer */}
+
+
+ {/* Title + Description (from toolCall.title) */}
+
+
+ {/* Moved slide-up keyframes to Tailwind theme (tailwind.config.js) */}
+
+
+
+ {/* Options */}
+
+ {getTitle()}
+
+ {(toolCall.kind === 'edit' ||
+ toolCall.kind === 'write' ||
+ toolCall.kind === 'read' ||
+ toolCall.kind === 'execute' ||
+ toolCall.kind === 'bash') &&
+ toolCall.title && (
+
+ {toolCall.title}
+
+ )}
+
+ {options.map((option, index) => {
+ const isFocused = focusedIndex === index;
+
+ return (
+
+ );
+ })}
+
+ {/* Custom message input (extracted component) */}
+ {(() => {
+ const isFocused = focusedIndex === options.length;
+ const rejectOptionId = options.find((o) =>
+ o.kind.includes('reject'),
+ )?.optionId;
+ return (
+ setFocusedIndex(options.length)}
+ onSubmitReject={() => {
+ if (rejectOptionId) {
+ onResponse(rejectOptionId);
+ }
+ }}
+ inputRef={customInputRef}
+ />
+ );
+ })()}
+
+ inputRef.current?.focus()}
+ >
+ | 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();
+ }
+ }}
+ />
+
+);
diff --git a/packages/vscode-ide-companion/src/webview/components/PermissionDrawer/PermissionRequest.tsx b/packages/vscode-ide-companion/src/webview/components/PermissionDrawer/PermissionRequest.tsx
new file mode 100644
index 00000000..a7b7356c
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/PermissionDrawer/PermissionRequest.tsx
@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface PermissionOption {
+ name: string;
+ kind: string;
+ optionId: string;
+}
+
+export interface ToolCall {
+ title?: string;
+ kind?: string;
+ toolCallId?: string;
+ rawInput?: {
+ command?: string;
+ description?: string;
+ [key: string]: unknown;
+ };
+ content?: Array<{
+ type: string;
+ [key: string]: unknown;
+ }>;
+ locations?: Array<{
+ path: string;
+ line?: number | null;
+ }>;
+ status?: string;
+}
+
+export interface PermissionRequestProps {
+ options: PermissionOption[];
+ toolCall: ToolCall;
+ onResponse: (optionId: string) => void;
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/icons/EditIcons.tsx b/packages/vscode-ide-companion/src/webview/components/icons/EditIcons.tsx
new file mode 100644
index 00000000..f5e12b33
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/icons/EditIcons.tsx
@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Edit mode related icons
+ */
+
+import type React from 'react';
+import type { IconProps } from './types.js';
+
+/**
+ * Edit pencil icon (16x16)
+ * Used for "Ask before edits" mode
+ */
+export const EditPencilIcon: React.FC
+
+
+
+
+
+
+);
diff --git a/packages/vscode-ide-companion/src/webview/components/layout/CompletionMenu.tsx b/packages/vscode-ide-companion/src/webview/components/layout/CompletionMenu.tsx
new file mode 100644
index 00000000..167a376d
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/layout/CompletionMenu.tsx
@@ -0,0 +1,172 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { CompletionItem } from '../../../types/completionItemTypes.js';
+
+interface CompletionMenuProps {
+ items: CompletionItem[];
+ onSelect: (item: CompletionItem) => void;
+ onClose: () => void;
+ title?: string;
+ selectedIndex?: number;
+}
+
+export const CompletionMenu: React.FC
+ {/* Optional top spacer for visual separation from the input */}
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/layout/EmptyState.tsx b/packages/vscode-ide-companion/src/webview/components/layout/EmptyState.tsx
new file mode 100644
index 00000000..081352b8
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/layout/EmptyState.tsx
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { generateIconUrl } from '../../utils/resourceUrl.js';
+
+export const EmptyState: React.FC = () => {
+ // Generate icon URL using the utility function
+ const iconUri = generateIconUrl('icon.png');
+
+ return (
+
+ {title && (
+
+
+ {title}
+
+ )}
+ {items.map((item, index) => {
+ const isActive = index === selected;
+ return (
+ onSelect(item)}
+ onMouseEnter={() => setSelected(index)}
+ className={[
+ // Semantic
+ 'completion-menu-item',
+ // Hit area
+ 'mx-1 cursor-pointer rounded-[var(--app-list-border-radius)]',
+ 'p-[var(--app-list-item-padding)]',
+ // Active background
+ isActive ? 'bg-[var(--app-list-active-background)]' : '',
+ ].join(' ')}
+ >
+
+ );
+ })}
+
+ {item.icon && (
+
+ {item.icon}
+
+ )}
+
+ {item.label}
+
+ {item.description && (
+
+ {item.description}
+
+ )}
+
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/layout/FileLink.tsx b/packages/vscode-ide-companion/src/webview/components/layout/FileLink.tsx
new file mode 100644
index 00000000..356ffaf4
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/layout/FileLink.tsx
@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * FileLink component - Clickable file path links
+ * Supports clicking to open files and jump to specified line and column numbers
+ */
+
+import type React from 'react';
+import { useVSCode } from '../../hooks/useVSCode.js';
+// Tailwind rewrite: styles from FileLink.css are now expressed as utility classes
+
+/**
+ * Props for FileLink
+ */
+interface FileLinkProps {
+ /** File path */
+ path: string;
+ /** Optional line number (starting from 1) */
+ line?: number | null;
+ /** Optional column number (starting from 1) */
+ column?: number | null;
+ /** Whether to show full path, default false (show filename only) */
+ showFullPath?: boolean;
+ /** Optional custom class name */
+ className?: string;
+ /** Whether to disable click behavior (use when parent element handles clicks) */
+ disableClick?: boolean;
+}
+
+/**
+ * Extract filename from full path
+ * @param path File path
+ * @returns Filename
+ */
+function getFileName(path: string): string {
+ const segments = path.split(/[/\\]/);
+ return segments[segments.length - 1] || path;
+}
+
+/**
+ * FileLink component - Clickable file link
+ *
+ * Features:
+ * - Click to open file
+ * - Support line and column number navigation
+ * - Hover to show full path
+ * - Optional display mode (full path vs filename only)
+ *
+ * @example
+ * ```tsx
+ *
+ {/* Qwen Logo */}
+
+
+ 
+
+
+
+
+ What to do first? Ask about this codebase or we can start writing
+ code.
+
+
+ >;
+ currentSessionId: string | null;
+ searchQuery: string;
+ onSearchChange: (query: string) => void;
+ onSelectSession: (sessionId: string) => void;
+ onClose: () => void;
+ hasMore?: boolean;
+ isLoading?: boolean;
+ onLoadMore?: () => void;
+}
+
+/**
+ * Session selector component
+ * Display session list and support search and selection
+ */
+export const SessionSelector: React.FC = ({
+ visible,
+ sessions,
+ currentSessionId,
+ searchQuery,
+ onSearchChange,
+ onSelectSession,
+ onClose,
+ hasMore = false,
+ isLoading = false,
+ onLoadMore,
+}) => {
+ if (!visible) {
+ return null;
+ }
+
+ const hasNoSessions = sessions.length === 0;
+
+ return (
+ <>
+
+ = ({
+ content,
+ timestamp: _timestamp,
+ onFileClick,
+ status = 'default',
+ hideStatusIcon = false,
+}) => {
+ // Empty content not rendered directly, avoid poor visual experience from only showing ::before dot
+ if (!content || content.trim().length === 0) {
+ return null;
+ }
+
+ // Map status to CSS class (only for ::before pseudo-element)
+ const getStatusClass = () => {
+ if (hideStatusIcon) {
+ return '';
+ }
+ switch (status) {
+ case 'success':
+ return 'assistant-message-success';
+ case 'error':
+ return 'assistant-message-error';
+ case 'warning':
+ return 'assistant-message-warning';
+ case 'loading':
+ return 'assistant-message-loading';
+ default:
+ return 'assistant-message-default';
+ }
+ };
+
+ return (
+ = ({
+ content,
+ onFileClick,
+ enableFileLinks = true,
+}) => {
+ /**
+ * Initialize markdown-it with plugins
+ */
+ const getMarkdownInstance = (): MarkdownIt => {
+ // Create markdown-it instance with options
+ const md = new MarkdownIt({
+ html: false, // Disable HTML for security
+ xhtmlOut: false,
+ breaks: true,
+ linkify: true,
+ typographer: true,
+ } as MarkdownItOptions);
+
+ return md;
+ };
+
+ /**
+ * Render markdown content to HTML
+ */
+ const renderMarkdown = (): string => {
+ try {
+ const md = getMarkdownInstance();
+
+ // Process the markdown content
+ let html = md.render(content);
+
+ // Post-process to add file path click handlers unless disabled
+ if (enableFileLinks) {
+ html = processFilePaths(html);
+ }
+
+ return html;
+ } catch (error) {
+ console.error('Error rendering markdown:', error);
+ // Fallback to plain text if markdown rendering fails
+ return escapeHtml(content);
+ }
+ };
+
+ /**
+ * Escape HTML characters for security
+ */
+ const escapeHtml = (unsafe: string): string =>
+ unsafe
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+
+ /**
+ * Process file paths in HTML to make them clickable
+ */
+ const processFilePaths = (html: string): string => {
+ // If DOM is not available, bail out to avoid breaking SSR
+ if (typeof document === 'undefined') {
+ return html;
+ }
+
+ // Build non-global variants to avoid .test() statefulness
+ const FILE_PATH_NO_G = new RegExp(
+ FILE_PATH_REGEX.source,
+ FILE_PATH_REGEX.flags.replace('g', ''),
+ );
+ const FILE_PATH_WITH_LINES_NO_G = new RegExp(
+ FILE_PATH_WITH_LINES_REGEX.source,
+ FILE_PATH_WITH_LINES_REGEX.flags.replace('g', ''),
+ );
+ // Match a bare file name like README.md (no leading slash)
+ const BARE_FILE_REGEX =
+ /[\w\-. ]+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|ya?ml|toml|xml|html|vue|svelte)/i;
+
+ // Parse HTML into a DOM tree so we don't replace inside attributes
+ const container = document.createElement('div');
+ container.innerHTML = html;
+
+ const union = new RegExp(
+ `${FILE_PATH_WITH_LINES_REGEX.source}|${FILE_PATH_REGEX.source}|${BARE_FILE_REGEX.source}`,
+ 'gi',
+ );
+
+ // Convert a "path#fragment" into VS Code friendly "path:line" (we only keep the start line)
+ const normalizePathAndLine = (
+ raw: string,
+ ): { displayText: string; dataPath: string } => {
+ const displayText = raw;
+ let base = raw;
+ // Extract hash fragment like #12, #L12 or #12-34 and keep only the first number
+ const hashIndex = raw.indexOf('#');
+ if (hashIndex >= 0) {
+ const frag = raw.slice(hashIndex + 1);
+ // Accept L12, 12 or 12-34
+ const m = frag.match(/^L?(\d+)(?:-\d+)?$/i);
+ if (m) {
+ const line = parseInt(m[1], 10);
+ base = raw.slice(0, hashIndex);
+ return { displayText, dataPath: `${base}:${line}` };
+ }
+ }
+ return { displayText, dataPath: base };
+ };
+
+ const makeLink = (text: string) => {
+ const link = document.createElement('a');
+ // Pass base path (with optional :line) to the handler; keep the full text as label
+ const { dataPath } = normalizePathAndLine(text);
+ link.className = 'file-path-link';
+ link.textContent = text;
+ link.setAttribute('href', '#');
+ link.setAttribute('title', `Open ${text}`);
+ // Carry file path via data attribute; click handled by event delegation
+ link.setAttribute('data-file-path', dataPath);
+ return link;
+ };
+
+ const upgradeAnchorIfFilePath = (a: HTMLAnchorElement) => {
+ const href = a.getAttribute('href') || '';
+ const text = (a.textContent || '').trim();
+
+ // Helper: identify dot-chained code refs (e.g. vscode.commands.register)
+ // but DO NOT treat filenames/paths as code refs.
+ const isCodeReference = (str: string): boolean => {
+ if (BARE_FILE_REGEX.test(str)) {
+ return false; // looks like a filename
+ }
+ if (/[/\\]/.test(str)) {
+ return false; // contains a path separator
+ }
+ const codeRefPattern = /^[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)+$/;
+ return codeRefPattern.test(str);
+ };
+
+ // If linkify turned a bare filename (e.g. README.md) into http://, convert it back
+ const httpMatch = href.match(/^https?:\/\/(.+)$/i);
+ if (httpMatch) {
+ try {
+ const url = new URL(href);
+ const host = url.hostname || '';
+ const pathname = url.pathname || '';
+ const noPath = pathname === '' || pathname === '/';
+
+ // Case 1: anchor text itself is a bare filename and equals the host (e.g. README.md)
+ if (
+ noPath &&
+ BARE_FILE_REGEX.test(text) &&
+ host.toLowerCase() === text.toLowerCase()
+ ) {
+ const { dataPath } = normalizePathAndLine(text);
+ a.classList.add('file-path-link');
+ a.setAttribute('href', '#');
+ a.setAttribute('title', `Open ${text}`);
+ a.setAttribute('data-file-path', dataPath);
+ return;
+ }
+
+ // Case 2: host itself looks like a filename (rare but happens), use it
+ if (noPath && BARE_FILE_REGEX.test(host)) {
+ const { dataPath } = normalizePathAndLine(host);
+ a.classList.add('file-path-link');
+ a.setAttribute('href', '#');
+ a.setAttribute('title', `Open ${text || host}`);
+ a.setAttribute('data-file-path', dataPath);
+ return;
+ }
+ } catch {
+ // fall through; unparseable URL
+ }
+ }
+
+ // Ignore other external protocols
+ if (/^(https?|mailto|ftp|data):/i.test(href)) {
+ return;
+ }
+
+ const candidate = href || text;
+
+ // Skip if it looks like a code reference
+ if (isCodeReference(candidate)) {
+ return;
+ }
+
+ if (
+ FILE_PATH_WITH_LINES_NO_G.test(candidate) ||
+ FILE_PATH_NO_G.test(candidate)
+ ) {
+ const { dataPath } = normalizePathAndLine(candidate);
+ a.classList.add('file-path-link');
+ a.setAttribute('href', '#');
+ a.setAttribute('title', `Open ${text || href}`);
+ a.setAttribute('data-file-path', dataPath);
+ return;
+ }
+
+ // Bare file name or relative path (e.g. README.md or docs/README.md)
+ if (BARE_FILE_REGEX.test(candidate)) {
+ const { dataPath } = normalizePathAndLine(candidate);
+ a.classList.add('file-path-link');
+ a.setAttribute('href', '#');
+ a.setAttribute('title', `Open ${text || href}`);
+ a.setAttribute('data-file-path', dataPath);
+ }
+ };
+
+ // Helper: identify dot-chained code refs (e.g. vscode.commands.register)
+ // but DO NOT treat filenames/paths as code refs.
+ const isCodeReference = (str: string): boolean => {
+ if (BARE_FILE_REGEX.test(str)) {
+ return false; // looks like a filename
+ }
+ if (/[/\\]/.test(str)) {
+ return false; // contains a path separator
+ }
+ const codeRefPattern = /^[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)+$/;
+ return codeRefPattern.test(str);
+ };
+
+ const walk = (node: Node) => {
+ // Do not transform inside existing anchors
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ const el = node as HTMLElement;
+ if (el.tagName.toLowerCase() === 'a') {
+ upgradeAnchorIfFilePath(el as HTMLAnchorElement);
+ return; // Don't descend into
+ }
+ // Avoid transforming inside code/pre blocks
+ const tag = el.tagName.toLowerCase();
+ if (tag === 'code' || tag === 'pre') {
+ return;
+ }
+ }
+
+ for (let child = node.firstChild; child; ) {
+ const next = child.nextSibling; // child may be replaced
+ if (child.nodeType === Node.TEXT_NODE) {
+ const text = child.nodeValue || '';
+ union.lastIndex = 0;
+ const hasMatch = union.test(text);
+ union.lastIndex = 0;
+ if (hasMatch) {
+ const frag = document.createDocumentFragment();
+ let lastIndex = 0;
+ let m: RegExpExecArray | null;
+ while ((m = union.exec(text))) {
+ const matchText = m[0];
+ const idx = m.index;
+
+ // Skip if it looks like a code reference
+ if (isCodeReference(matchText)) {
+ // Just add the text as-is without creating a link
+ if (idx > lastIndex) {
+ frag.appendChild(
+ document.createTextNode(text.slice(lastIndex, idx)),
+ );
+ }
+ frag.appendChild(document.createTextNode(matchText));
+ lastIndex = idx + matchText.length;
+ continue;
+ }
+
+ if (idx > lastIndex) {
+ frag.appendChild(
+ document.createTextNode(text.slice(lastIndex, idx)),
+ );
+ }
+ frag.appendChild(makeLink(matchText));
+ lastIndex = idx + matchText.length;
+ }
+ if (lastIndex < text.length) {
+ frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+ }
+ node.replaceChild(frag, child);
+ }
+ } else if (child.nodeType === Node.ELEMENT_NODE) {
+ walk(child);
+ }
+ child = next;
+ }
+ };
+
+ walk(container);
+ return container.innerHTML;
+ };
+
+ // Event delegation: intercept clicks on generated file-path links
+ const handleContainerClick = (
+ e: React.MouseEvent,
+ ) => {
+ // If file links disabled, do nothing
+ if (!enableFileLinks) {
+ return;
+ }
+ const target = e.target as HTMLElement | null;
+ if (!target) {
+ return;
+ }
+
+ // Find nearest anchor with our marker class
+ const anchor = (target.closest &&
+ target.closest('a.file-path-link')) as HTMLAnchorElement | null;
+ if (anchor) {
+ const filePath = anchor.getAttribute('data-file-path');
+ if (!filePath) {
+ return;
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ onFileClick?.(filePath);
+ return;
+ }
+
+ // Fallback: intercept "http://README.md" style links that slipped through
+ const anyAnchor = (target.closest &&
+ target.closest('a')) as HTMLAnchorElement | null;
+ if (!anyAnchor) {
+ return;
+ }
+
+ const href = anyAnchor.getAttribute('href') || '';
+ if (!/^https?:\/\//i.test(href)) {
+ return;
+ }
+ try {
+ const url = new URL(href);
+ const host = url.hostname || '';
+ const path = url.pathname || '';
+ const noPath = path === '' || path === '/';
+
+ // Basic bare filename heuristic on the host part (e.g. README.md)
+ if (noPath && /\.[a-z0-9]+$/i.test(host)) {
+ // Prefer the readable text content if it looks like a file
+ const text = (anyAnchor.textContent || '').trim();
+ const candidate = /\.[a-z0-9]+$/i.test(text) ? text : host;
+ e.preventDefault();
+ e.stopPropagation();
+ onFileClick?.(candidate);
+ }
+ } catch {
+ // ignore
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/MessageContent.tsx b/packages/vscode-ide-companion/src/webview/components/messages/MessageContent.tsx
new file mode 100644
index 00000000..3381e90d
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/MessageContent.tsx
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MarkdownRenderer } from './MarkdownRenderer/MarkdownRenderer.js';
+
+interface MessageContentProps {
+ content: string;
+ onFileClick?: (filePath: string) => void;
+ enableFileLinks?: boolean;
+}
+
+export const MessageContent: React.FC = ({
+ content,
+ onFileClick,
+ enableFileLinks,
+}) => (
+ = ({
+ content,
+ timestamp: _timestamp,
+ onFileClick,
+}) => (
+ = ({
+ content,
+ timestamp: _timestamp,
+ onFileClick,
+ fileContext,
+}) => {
+ // Generate display text for file context
+ const getFileContextDisplay = () => {
+ if (!fileContext) {
+ return null;
+ }
+ const { fileName, startLine, endLine } = fileContext;
+ if (startLine && endLine) {
+ return startLine === endLine
+ ? `${fileName}#${startLine}`
+ : `${fileName}#${startLine}-${endLine}`;
+ }
+ return fileName;
+ };
+
+ const fileContextDisplay = getFileContextDisplay();
+
+ return (
+ = ({
+ text = 'Interrupted',
+}) => (
+ = ({
+ loadingMessage,
+}) => {
+ // Build a phrase list that starts with the provided message (if any), then witty fallbacks
+ const phrases = useMemo(() => {
+ const set = new Set();
+ const list: string[] = [];
+ if (loadingMessage && loadingMessage.trim()) {
+ list.push(loadingMessage);
+ set.add(loadingMessage);
+ }
+ for (const p of WITTY_LOADING_PHRASES) {
+ if (!set.has(p)) {
+ list.push(p);
+ }
+ }
+ return list;
+ }, [loadingMessage]);
+
+ const [index, setIndex] = useState(0);
+
+ // Reset to the first phrase whenever the incoming message changes
+ useEffect(() => {
+ setIndex(0);
+ }, [phrases]);
+
+ // Periodically rotate to a different phrase
+ useEffect(() => {
+ if (phrases.length <= 1) {
+ return;
+ }
+ const id = setInterval(() => {
+ setIndex((prev) => {
+ // pick a different random index to avoid immediate repeats
+ let next = Math.floor(Math.random() * phrases.length);
+ if (phrases.length > 1) {
+ let guard = 0;
+ while (next === prev && guard < 5) {
+ next = Math.floor(Math.random() * phrases.length);
+ guard++;
+ }
+ }
+ return next;
+ });
+ }, ROTATE_INTERVAL_MS);
+ return () => clearInterval(id);
+ }, [phrases]);
+
+ return (
+ = ({ toolCall }) => {
+ const { title, content, rawInput, toolCallId } = toolCall;
+ const commandText = safeTitle(title);
+ const vscode = useVSCode();
+
+ // Group content by type
+ const { textOutputs, errors } = groupContent(content);
+
+ // Extract command from rawInput if available
+ let inputCommand = commandText;
+ if (rawInput && typeof rawInput === 'object') {
+ const inputObj = rawInput as { command?: string };
+ inputCommand = inputObj.command || commandText;
+ } else if (typeof rawInput === 'string') {
+ inputCommand = rawInput;
+ }
+
+ // Handle click on IN section
+ const handleInClick = () => {
+ createAndOpenTempFile(
+ vscode.postMessage,
+ inputCommand,
+ 'bash-input',
+ '.sh',
+ );
+ };
+
+ // Handle click on OUT section
+ const handleOutClick = () => {
+ if (textOutputs.length > 0) {
+ const output = textOutputs.join('\n');
+ createAndOpenTempFile(vscode.postMessage, output, 'bash-output', '.txt');
+ }
+ };
+
+ // Map tool status to container status for proper bullet coloring
+ const containerStatus:
+ | 'success'
+ | 'error'
+ | 'warning'
+ | 'loading'
+ | 'default' =
+ errors.length > 0
+ ? 'error'
+ : toolCall.status === 'in_progress' || toolCall.status === 'pending'
+ ? 'loading'
+ : 'success';
+
+ // Error case
+ if (errors.length > 0) {
+ return (
+
+ {/* Branch connector summary */}
+
+ );
+ }
+
+ // Success with output
+ if (textOutputs.length > 0) {
+ const output = textOutputs.join('\n');
+ const truncatedOutput =
+ output.length > 500 ? output.substring(0, 500) + '...' : output;
+
+ return (
+
+ {/* Branch connector summary */}
+
+ );
+ }
+
+ // Success without output: show command with branch connector
+ return (
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Edit/EditToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Edit/EditToolCall.tsx
new file mode 100644
index 00000000..a8485316
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Edit/EditToolCall.tsx
@@ -0,0 +1,196 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Edit tool call component - specialized for file editing operations
+ */
+
+import { useMemo } from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import {
+ groupContent,
+ mapToolStatusToContainerStatus,
+} from '../shared/utils.js';
+import { FileLink } from '../../../layout/FileLink.js';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+
+export const ToolCallContainer: React.FC = ({
+ label,
+ status = 'success',
+ children,
+ toolCallId: _toolCallId,
+ labelSuffix,
+ className: _className,
+}) => (
+ = ({ toolCall }) => {
+ const { content, locations, toolCallId } = toolCall;
+
+ // Group content by type; memoize to avoid new array identities on every render
+ const { errors, diffs } = useMemo(() => groupContent(content), [content]);
+
+ // Failed case: show explicit failed message and render inline diffs
+ if (toolCall.status === 'failed') {
+ const firstDiff = diffs[0];
+ const path = firstDiff?.path || locations?.[0]?.path || '';
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ return (
+ = ({
+ label,
+ status = 'success',
+ children,
+ toolCallId: _toolCallId,
+ labelSuffix,
+ className: _className,
+}) => (
+ = ({ toolCall }) => {
+ const { title, content, rawInput, toolCallId } = toolCall;
+ const commandText = safeTitle(
+ (rawInput as Record)?.description || title,
+ );
+
+ // Group content by type
+ const { textOutputs, errors } = groupContent(content);
+
+ // Extract command from rawInput if available
+ let inputCommand = commandText;
+ if (rawInput && typeof rawInput === 'object') {
+ const inputObj = rawInput as Record;
+ inputCommand = (inputObj.command as string | undefined) || commandText;
+ } else if (typeof rawInput === 'string') {
+ inputCommand = rawInput;
+ }
+
+ // Map tool status to container status for proper bullet coloring
+ const containerStatus:
+ | 'success'
+ | 'error'
+ | 'warning'
+ | 'loading'
+ | 'default' =
+ errors.length > 0 || toolCall.status === 'failed'
+ ? 'error'
+ : toolCall.status === 'in_progress' || toolCall.status === 'pending'
+ ? 'loading'
+ : 'success';
+
+ // Error case
+ if (errors.length > 0) {
+ return (
+
+ {/* Branch connector summary */}
+
+ );
+ }
+
+ // Success with output
+ if (textOutputs.length > 0) {
+ const output = textOutputs.join('\n');
+ const truncatedOutput =
+ output.length > 500 ? output.substring(0, 500) + '...' : output;
+
+ return (
+
+ {/* Branch connector summary */}
+
+ );
+ }
+
+ // Success without output: show command with branch connector
+ return (
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/GenericToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/GenericToolCall.tsx
new file mode 100644
index 00000000..50e88443
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/GenericToolCall.tsx
@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Generic tool call component - handles all tool call types as fallback
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from './shared/types.js';
+import {
+ ToolCallContainer,
+ ToolCallCard,
+ ToolCallRow,
+ LocationsList,
+} from './shared/LayoutComponents.js';
+import { safeTitle, groupContent } from './shared/utils.js';
+
+/**
+ * Generic tool call component that can display any tool call type
+ * Used as fallback for unknown tool call kinds
+ * Minimal display: show description and outcome
+ */
+export const GenericToolCall: React.FC = ({ toolCall }) => {
+ const { kind, title, content, locations, toolCallId } = toolCall;
+ const operationText = safeTitle(title);
+
+ // Group content by type
+ const { textOutputs, errors } = groupContent(content);
+
+ // Error case: show operation + error in card layout
+ if (errors.length > 0) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ // Success with output: use card for long output, compact for short
+ if (textOutputs.length > 0) {
+ const output = textOutputs.join('\n');
+ const isLong = output.length > 150;
+
+ if (isLong) {
+ const truncatedOutput =
+ output.length > 300 ? output.substring(0, 300) + '...' : output;
+
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ // Short output - compact format
+ const statusFlag: 'success' | 'error' | 'warning' | 'loading' | 'default' =
+ toolCall.status === 'in_progress' || toolCall.status === 'pending'
+ ? 'loading'
+ : 'success';
+ return (
+
+ {operationText || output}
+
+ );
+ }
+
+ // Success with files: show operation + file list in compact format
+ if (locations && locations.length > 0) {
+ const statusFlag: 'success' | 'error' | 'warning' | 'loading' | 'default' =
+ toolCall.status === 'in_progress' || toolCall.status === 'pending'
+ ? 'loading'
+ : 'success';
+ return (
+
+
+ );
+ }
+
+ // No output - show just the operation
+ if (operationText) {
+ const statusFlag: 'success' | 'error' | 'warning' | 'loading' | 'default' =
+ toolCall.status === 'in_progress' || toolCall.status === 'pending'
+ ? 'loading'
+ : 'success';
+ return (
+
+ {operationText}
+
+ );
+ }
+
+ return null;
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Read/ReadToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Read/ReadToolCall.tsx
new file mode 100644
index 00000000..fcd1576c
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Read/ReadToolCall.tsx
@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Read tool call component - specialized for file reading operations
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import {
+ groupContent,
+ mapToolStatusToContainerStatus,
+} from '../shared/utils.js';
+import { FileLink } from '../../../layout/FileLink.js';
+import { useVSCode } from '../../../../hooks/useVSCode.js';
+import { handleOpenDiff } from '../../../../utils/diffUtils.js';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+
+export const ToolCallContainer: React.FC = ({
+ label,
+ status = 'success',
+ children,
+ toolCallId: _toolCallId,
+ labelSuffix,
+ className: _className,
+}) => (
+ = ({ toolCall }) => {
+ const { content, locations, toolCallId } = toolCall;
+ const vscode = useVSCode();
+
+ // Group content by type; memoize to avoid new array identities on every render
+ const { errors, diffs } = useMemo(() => groupContent(content), [content]);
+
+ // Post a message to the extension host to open a VS Code diff tab
+ const handleOpenDiffInternal = useCallback(
+ (
+ path: string | undefined,
+ oldText: string | null | undefined,
+ newText: string | undefined,
+ ) => {
+ handleOpenDiff(vscode, path, oldText, newText);
+ },
+ [vscode],
+ );
+
+ // Auto-open diff when a read call returns diff content.
+ // Only trigger once per toolCallId so we don't spam as in-progress updates stream in.
+ useEffect(() => {
+ if (diffs.length > 0) {
+ const firstDiff = diffs[0];
+ const path = firstDiff.path || (locations && locations[0]?.path) || '';
+
+ if (
+ path &&
+ firstDiff.oldText !== undefined &&
+ firstDiff.newText !== undefined
+ ) {
+ const timer = setTimeout(() => {
+ handleOpenDiffInternal(path, firstDiff.oldText, firstDiff.newText);
+ }, 100);
+ return () => timer && clearTimeout(timer);
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [toolCallId]);
+
+ // Compute container status based on toolCall.status (pending/in_progress -> loading)
+ const containerStatus:
+ | 'success'
+ | 'error'
+ | 'warning'
+ | 'loading'
+ | 'default' = mapToolStatusToContainerStatus(toolCall.status);
+
+ // Error case: show error
+ if (errors.length > 0) {
+ const path = locations?.[0]?.path || '';
+ return (
+ = ({
+ toolCall,
+ isFirst,
+ isLast,
+}) => {
+ const { title, content, locations } = toolCall;
+ const queryText = safeTitle(title);
+
+ // Group content by type
+ const { errors, textOutputs } = groupContent(content);
+
+ // Error case: show search query + error in card layout
+ if (errors.length > 0) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ // Success case with results: show search query + file list
+ if (locations && locations.length > 0) {
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ // If multiple results, use card layout; otherwise use compact format
+ if (locations.length > 1) {
+ return (
+
+
+
+
+
+
+ );
+ }
+ // Single result - compact format
+ return (
+
+ →
+
+ );
+ }
+
+ // Show content text if available (e.g., "Listed 4 item(s).")
+ if (textOutputs.length > 0) {
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ return (
+
+
+ );
+ }
+
+ // No results - show query only
+ if (queryText) {
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ return (
+
+ {queryText}
+
+ );
+ }
+
+ return null;
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Think/ThinkToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Think/ThinkToolCall.tsx
new file mode 100644
index 00000000..4c49b2cc
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Think/ThinkToolCall.tsx
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Think tool call component - specialized for thinking/reasoning operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import {
+ ToolCallContainer,
+ ToolCallCard,
+ ToolCallRow,
+} from '../shared/LayoutComponents.js';
+import { groupContent } from '../shared/utils.js';
+
+/**
+ * Specialized component for Think tool calls
+ * Optimized for displaying AI reasoning and thought processes
+ * Minimal display: just show the thoughts (no context)
+ */
+export const ThinkToolCall: React.FC = ({ toolCall }) => {
+ const { content } = toolCall;
+
+ // Group content by type
+ const { textOutputs, errors } = groupContent(content);
+
+ // Error case (rare for thinking)
+ if (errors.length > 0) {
+ return (
+
+ {errors.join('\n')}
+
+ );
+ }
+
+ // Show thoughts - use card for long content, compact for short
+ if (textOutputs.length > 0) {
+ const thoughts = textOutputs.join('\n\n');
+ const isLong = thoughts.length > 200;
+
+ if (isLong) {
+ const truncatedThoughts =
+ thoughts.length > 500 ? thoughts.substring(0, 500) + '...' : thoughts;
+
+ return (
+
+
+
+
+ );
+ }
+
+ // Short thoughts - compact format
+ const status =
+ toolCall.status === 'pending' || toolCall.status === 'in_progress'
+ ? 'loading'
+ : 'default';
+ return (
+
+ {thoughts}
+
+ );
+ }
+
+ // Empty thoughts
+ return null;
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/ToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/ToolCall.tsx
new file mode 100644
index 00000000..6cda54a2
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/ToolCall.tsx
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Main ToolCall component - uses factory pattern to route to specialized components
+ *
+ * This file serves as the public API for tool call rendering.
+ * It re-exports the router and types from the toolcalls module.
+ */
+
+import type React from 'react';
+import { ToolCallRouter } from './index.js';
+
+// Re-export types from the toolcalls module for backward compatibility
+export type {
+ ToolCallData,
+ BaseToolCallProps as ToolCallProps,
+} from './shared/types.js';
+
+// Re-export the content type for external use
+export type { ToolCallContent } from './shared/types.js';
+export const ToolCall: React.FC<{
+ toolCall: import('./shared/types.js').ToolCallData;
+ isFirst?: boolean;
+ isLast?: boolean;
+}> = ({ toolCall, isFirst, isLast }) => (
+ = ({
+ checked = false,
+ indeterminate = false,
+ disabled = true,
+ className = '',
+ style,
+ title,
+}) => {
+ // Render as a span (not ) so we can draw a checkmark with CSS.
+ // Pseudo-elements do not reliably render on in Chromium (VS Code webviews),
+ // which caused the missing icon. This version is font-free and uses borders.
+ const showCheck = !!checked && !indeterminate;
+ const showInProgress = !!indeterminate;
+
+ return (
+
+ {showCheck ? (
+
+ ) : null}
+ {showInProgress ? (
+
+ *
+
+ ) : null}
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/UpdatedPlan/UpdatedPlanToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/UpdatedPlan/UpdatedPlanToolCall.tsx
new file mode 100644
index 00000000..70e38bd7
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/UpdatedPlan/UpdatedPlanToolCall.tsx
@@ -0,0 +1,166 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * UpdatedPlan tool call component - specialized for plan update operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+import { groupContent, safeTitle } from '../shared/utils.js';
+import { CheckboxDisplay } from './CheckboxDisplay.js';
+import type { PlanEntry } from '../../../../../types/chatTypes.js';
+
+type EntryStatus = 'pending' | 'in_progress' | 'completed';
+
+export const ToolCallContainer: React.FC = ({
+ label,
+ status = 'success',
+ children,
+ toolCallId: _toolCallId,
+ labelSuffix,
+ className: _className,
+}) => (
+ = ({
+ toolCall,
+}) => {
+ const { content, status } = toolCall;
+ const { errors, textOutputs } = groupContent(content);
+
+ // Error-first display
+ if (errors.length > 0) {
+ return (
+
+ {errors.join('\n')}
+
+ );
+ }
+
+ const entries = parsePlanEntries(textOutputs);
+
+ const label = safeTitle(toolCall.title) || 'Updated Plan';
+
+ return (
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Write/WriteToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Write/WriteToolCall.tsx
new file mode 100644
index 00000000..d0e6307b
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Write/WriteToolCall.tsx
@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Write tool call component - specialized for file writing operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import { ToolCallContainer } from '../shared/LayoutComponents.js';
+import {
+ groupContent,
+ mapToolStatusToContainerStatus,
+} from '../shared/utils.js';
+import { FileLink } from '../../../layout/FileLink.js';
+
+/**
+ * Specialized component for Write tool calls
+ * Shows: Write filename + error message + content preview
+ */
+export const WriteToolCall: React.FC = ({ toolCall }) => {
+ const { content, locations, rawInput, toolCallId } = toolCall;
+
+ // Group content by type
+ const { errors, textOutputs } = groupContent(content);
+
+ // Extract filename from path
+ // const getFileName = (path: string): string => path.split('/').pop() || path;
+
+ // Extract content to write from rawInput
+ let writeContent = '';
+ if (rawInput && typeof rawInput === 'object') {
+ const inputObj = rawInput as { content?: string };
+ writeContent = inputObj.content || '';
+ } else if (typeof rawInput === 'string') {
+ writeContent = rawInput;
+ }
+
+ // Error case: show filename + error message + content preview
+ if (errors.length > 0) {
+ const path = locations?.[0]?.path || '';
+ const errorMessage = errors.join('\n');
+
+ // Truncate content preview
+ const truncatedContent =
+ writeContent.length > 200
+ ? writeContent.substring(0, 200) + '...'
+ : writeContent;
+
+ return (
+
+ {textOutputs.join('\n')}
+
+ );
+ }
+
+ // No output, don't show anything
+ return null;
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/index.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/index.tsx
new file mode 100644
index 00000000..3f7a2bc0
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/index.tsx
@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Tool call component factory - routes to specialized components by kind
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from './shared/types.js';
+import { shouldShowToolCall } from './shared/utils.js';
+import { GenericToolCall } from './GenericToolCall.js';
+import { ReadToolCall } from './Read/ReadToolCall.js';
+import { WriteToolCall } from './Write/WriteToolCall.js';
+import { EditToolCall } from './Edit/EditToolCall.js';
+import { ExecuteToolCall as BashExecuteToolCall } from './Bash/Bash.js';
+import { ExecuteToolCall } from './Execute/Execute.js';
+import { UpdatedPlanToolCall } from './UpdatedPlan/UpdatedPlanToolCall.js';
+import { SearchToolCall } from './Search/SearchToolCall.js';
+import { ThinkToolCall } from './Think/ThinkToolCall.js';
+
+/**
+ * Factory function that returns the appropriate tool call component based on kind
+ */
+export const getToolCallComponent = (
+ kind: string,
+): React.FC => {
+ const normalizedKind = kind.toLowerCase();
+
+ // Route to specialized components
+ switch (normalizedKind) {
+ case 'read':
+ return ReadToolCall;
+
+ case 'write':
+ return WriteToolCall;
+
+ case 'edit':
+ return EditToolCall;
+
+ case 'execute':
+ return ExecuteToolCall;
+
+ case 'bash':
+ case 'command':
+ return BashExecuteToolCall;
+
+ case 'updated_plan':
+ case 'updatedplan':
+ case 'todo_write':
+ case 'update_todos':
+ case 'todowrite':
+ return UpdatedPlanToolCall;
+
+ case 'search':
+ case 'grep':
+ case 'glob':
+ case 'find':
+ return SearchToolCall;
+
+ case 'think':
+ case 'thinking':
+ return ThinkToolCall;
+
+ default:
+ // Fallback to generic component
+ return GenericToolCall;
+ }
+};
+
+/**
+ * Main tool call component that routes to specialized implementations
+ */
+export const ToolCallRouter: React.FC<
+ BaseToolCallProps & { isFirst?: boolean; isLast?: boolean }
+> = ({ toolCall, isFirst, isLast }) => {
+ // Check if we should show this tool call (hide internal ones)
+ if (!shouldShowToolCall(toolCall.kind)) {
+ return null;
+ }
+
+ // Get the appropriate component for this kind
+ const Component = getToolCallComponent(toolCall.kind);
+
+ // Render the specialized component
+ return = ({
+ label,
+ status = 'success',
+ children,
+ toolCallId: _toolCallId,
+ labelSuffix,
+ className: _className,
+}) => (
+ = ({
+ icon: _icon,
+ children,
+}) => (
+ = ({
+ label,
+ children,
+}) => (
+ = ({
+ status,
+ text,
+}) => (
+ = ({ children }) => (
+ = ({ locations }) => (
+ = {
+ edit: '✏️',
+ write: '✏️',
+ read: '📖',
+ execute: '⚡',
+ fetch: '🌐',
+ delete: '🗑️',
+ move: '📦',
+ search: '🔍',
+ think: '💭',
+ diff: '📝',
+ };
+ return kindMap[kind.toLowerCase()] || '🔧';
+};
+
+/**
+ * Check if a tool call should be displayed
+ * Hides internal tool calls
+ */
+export const shouldShowToolCall = (kind: string): boolean =>
+ !kind.includes('internal');
+
+/**
+ * Check if a tool call has actual output to display
+ * Returns false for tool calls that completed successfully but have no visible output
+ */
+export const hasToolCallOutput = (
+ toolCall: import('./types.js').ToolCallData,
+): boolean => {
+ // Always show failed tool calls (even without content)
+ if (toolCall.status === 'failed') {
+ return true;
+ }
+
+ // Always show execute/bash/command tool calls (they show the command in title)
+ const kind = toolCall.kind.toLowerCase();
+ if (kind === 'execute' || kind === 'bash' || kind === 'command') {
+ // But only if they have a title
+ if (
+ toolCall.title &&
+ typeof toolCall.title === 'string' &&
+ toolCall.title.trim()
+ ) {
+ return true;
+ }
+ }
+
+ // Show if there are locations (file paths)
+ if (toolCall.locations && toolCall.locations.length > 0) {
+ return true;
+ }
+
+ // Show if there is content
+ if (toolCall.content && toolCall.content.length > 0) {
+ const grouped = groupContent(toolCall.content);
+ // Has any meaningful content?
+ if (
+ grouped.textOutputs.length > 0 ||
+ grouped.errors.length > 0 ||
+ grouped.diffs.length > 0 ||
+ grouped.otherData.length > 0
+ ) {
+ return true;
+ }
+ }
+
+ // Show if there's a meaningful title for generic tool calls
+ if (
+ toolCall.title &&
+ typeof toolCall.title === 'string' &&
+ toolCall.title.trim()
+ ) {
+ return true;
+ }
+
+ // No output, don't show
+ return false;
+};
+
+/**
+ * Group tool call content by type to avoid duplicate labels
+ */
+export const groupContent = (content?: ToolCallContent[]): GroupedContent => {
+ const textOutputs: string[] = [];
+ const errors: string[] = [];
+ const diffs: ToolCallContent[] = [];
+ const otherData: unknown[] = [];
+
+ content?.forEach((item) => {
+ if (item.type === 'diff') {
+ diffs.push(item);
+ } else if (item.content) {
+ const contentObj = item.content;
+
+ // Handle error content
+ if (contentObj.type === 'error' || 'error' in contentObj) {
+ // Try to extract meaningful error message
+ let errorMsg = '';
+
+ // Check if error is a string
+ if (typeof contentObj.error === 'string') {
+ errorMsg = contentObj.error;
+ }
+ // Check if error has a message property
+ else if (
+ contentObj.error &&
+ typeof contentObj.error === 'object' &&
+ 'message' in contentObj.error
+ ) {
+ errorMsg = (contentObj.error as { message: string }).message;
+ }
+ // Try text field
+ else if (contentObj.text) {
+ errorMsg = formatValue(contentObj.text);
+ }
+ // Format the error object itself
+ else if (contentObj.error) {
+ errorMsg = formatValue(contentObj.error);
+ }
+ // Fallback
+ else {
+ errorMsg = 'An error occurred';
+ }
+
+ errors.push(errorMsg);
+ }
+ // Handle text content
+ else if (contentObj.text) {
+ textOutputs.push(formatValue(contentObj.text));
+ }
+ // Handle other content
+ else {
+ otherData.push(contentObj);
+ }
+ }
+ });
+
+ return { textOutputs, errors, diffs, otherData };
+};
+
+/**
+ * Map a tool call status to a ToolCallContainer status (bullet color)
+ * - pending/in_progress -> loading
+ * - completed -> success
+ * - failed -> error
+ * - default fallback
+ */
+export const mapToolStatusToContainerStatus = (
+ status: ToolCallStatus,
+): 'success' | 'error' | 'warning' | 'loading' | 'default' => {
+ switch (status) {
+ case 'pending':
+ case 'in_progress':
+ return 'loading';
+ case 'failed':
+ return 'error';
+ case 'completed':
+ return 'success';
+ default:
+ return 'default';
+ }
+};
diff --git a/packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts b/packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts
new file mode 100644
index 00000000..ab4b70b2
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts
@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode';
+import { BaseMessageHandler } from './BaseMessageHandler.js';
+
+/**
+ * Auth message handler
+ * Handles all authentication-related messages
+ */
+export class AuthMessageHandler extends BaseMessageHandler {
+ private loginHandler: (() => Promise) | null = null;
+
+ canHandle(messageType: string): boolean {
+ return ['login'].includes(messageType);
+ }
+
+ async handle(message: { type: string; data?: unknown }): Promise {
+ switch (message.type) {
+ case 'login':
+ await this.handleLogin();
+ break;
+
+ default:
+ console.warn(
+ '[AuthMessageHandler] Unknown message type:',
+ message.type,
+ );
+ break;
+ }
+ }
+
+ /**
+ * Set login handler
+ */
+ setLoginHandler(handler: () => Promise): void {
+ this.loginHandler = handler;
+ }
+
+ /**
+ * Handle login request
+ */
+ private async handleLogin(): Promise {
+ try {
+ console.log('[AuthMessageHandler] Login requested');
+ console.log(
+ '[AuthMessageHandler] Login handler available:',
+ !!this.loginHandler,
+ );
+
+ // Direct login without additional confirmation
+ if (this.loginHandler) {
+ console.log('[AuthMessageHandler] Calling login handler');
+ await this.loginHandler();
+ console.log(
+ '[AuthMessageHandler] Login handler completed successfully',
+ );
+ } else {
+ console.log('[AuthMessageHandler] Using fallback login method');
+ // Fallback: show message and use command
+ vscode.window.showInformationMessage(
+ 'Please wait while we connect to Qwen Code...',
+ );
+ await vscode.commands.executeCommand('qwen-code.login');
+ }
+ } catch (error) {
+ console.error('[AuthMessageHandler] Login failed:', error);
+ console.error(
+ '[AuthMessageHandler] Error stack:',
+ error instanceof Error ? error.stack : 'N/A',
+ );
+ this.sendToWebView({
+ type: 'loginError',
+ data: {
+ message: `Login failed: ${error instanceof Error ? error.message : String(error)}`,
+ },
+ });
+ }
+ }
+}
diff --git a/packages/vscode-ide-companion/src/webview/handlers/BaseMessageHandler.ts b/packages/vscode-ide-companion/src/webview/handlers/BaseMessageHandler.ts
new file mode 100644
index 00000000..4d01fd02
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/handlers/BaseMessageHandler.ts
@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { QwenAgentManager } from '../../services/qwenAgentManager.js';
+import type { ConversationStore } from '../../services/conversationStore.js';
+
+/**
+ * Base message handler interface
+ * All sub-handlers should implement this interface
+ */
+export interface IMessageHandler {
+ /**
+ * Handle message
+ * @param message - Message object
+ * @returns Promise
+ */
+ handle(message: { type: string; data?: unknown }): Promise;
+
+ /**
+ * Check if this handler can handle the message type
+ * @param messageType - Message type
+ * @returns boolean
+ */
+ canHandle(messageType: string): boolean;
+}
+
+/**
+ * Base message handler class
+ * Provides common dependency injection and helper methods
+ */
+export abstract class BaseMessageHandler implements IMessageHandler {
+ constructor(
+ protected agentManager: QwenAgentManager,
+ protected conversationStore: ConversationStore,
+ protected currentConversationId: string | null,
+ protected sendToWebView: (message: unknown) => void,
+ ) {}
+
+ abstract handle(message: { type: string; data?: unknown }): Promise;
+ abstract canHandle(messageType: string): boolean;
+
+ /**
+ * Update current conversation ID
+ */
+ setCurrentConversationId(id: string | null): void {
+ this.currentConversationId = id;
+ }
+
+ /**
+ * Get current conversation ID
+ */
+ getCurrentConversationId(): string | null {
+ return this.currentConversationId;
+ }
+}
diff --git a/packages/vscode-ide-companion/src/webview/handlers/EditorMessageHandler.ts b/packages/vscode-ide-companion/src/webview/handlers/EditorMessageHandler.ts
new file mode 100644
index 00000000..7d82315d
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/handlers/EditorMessageHandler.ts
@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode';
+import { BaseMessageHandler } from './BaseMessageHandler.js';
+import { getFileName } from '../utils/webviewUtils.js';
+
+/**
+ * Editor message handler
+ * Handles all editor state-related messages
+ */
+export class EditorMessageHandler extends BaseMessageHandler {
+ canHandle(messageType: string): boolean {
+ return ['getActiveEditor', 'focusActiveEditor'].includes(messageType);
+ }
+
+ async handle(message: { type: string; data?: unknown }): Promise {
+ switch (message.type) {
+ case 'getActiveEditor':
+ await this.handleGetActiveEditor();
+ break;
+
+ case 'focusActiveEditor':
+ await this.handleFocusActiveEditor();
+ break;
+
+ default:
+ console.warn(
+ '[EditorMessageHandler] Unknown message type:',
+ message.type,
+ );
+ break;
+ }
+ }
+
+ /**
+ * Get current active editor info
+ */
+ private async handleGetActiveEditor(): Promise {
+ try {
+ const activeEditor = vscode.window.activeTextEditor;
+
+ if (activeEditor) {
+ const filePath = activeEditor.document.uri.fsPath;
+ const fileName = getFileName(filePath);
+
+ let selectionInfo = null;
+ if (!activeEditor.selection.isEmpty) {
+ const selection = activeEditor.selection;
+ selectionInfo = {
+ startLine: selection.start.line + 1,
+ endLine: selection.end.line + 1,
+ };
+ }
+
+ this.sendToWebView({
+ type: 'activeEditorChanged',
+ data: { fileName, filePath, selection: selectionInfo },
+ });
+ } else {
+ this.sendToWebView({
+ type: 'activeEditorChanged',
+ data: { fileName: null, filePath: null, selection: null },
+ });
+ }
+ } catch (error) {
+ console.error(
+ '[EditorMessageHandler] Failed to get active editor:',
+ error,
+ );
+ }
+ }
+
+ /**
+ * Focus on active editor
+ */
+ private async handleFocusActiveEditor(): Promise
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/layout/SessionSelector.tsx b/packages/vscode-ide-companion/src/webview/components/layout/SessionSelector.tsx
new file mode 100644
index 00000000..ab7f6d51
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/layout/SessionSelector.tsx
@@ -0,0 +1,154 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { groupSessionsByDate } from '../../utils/sessionGrouping.js';
+import { getTimeAgo } from '../../utils/timeUtils.js';
+import { SearchIcon } from '../icons/index.js';
+
+interface SessionSelectorProps {
+ visible: boolean;
+ sessions: Array e.stopPropagation()}
+ >
+ {/* Search Box */}
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/Assistant/AssistantMessage.css b/packages/vscode-ide-companion/src/webview/components/messages/Assistant/AssistantMessage.css
new file mode 100644
index 00000000..56946662
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/Assistant/AssistantMessage.css
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * AssistantMessage Component Styles
+ * Pseudo-elements (::before) for bullet points and (::after) for timeline connectors
+ */
+
+/* Bullet point indicator using ::before pseudo-element */
+.assistant-message-container.assistant-message-default::before,
+.assistant-message-container.assistant-message-success::before,
+.assistant-message-container.assistant-message-error::before,
+.assistant-message-container.assistant-message-warning::before,
+.assistant-message-container.assistant-message-loading::before {
+ content: '\25cf';
+ position: absolute;
+ left: 8px;
+ padding-top: 2px;
+ font-size: 10px;
+ z-index: 1;
+}
+
+/* Default state - secondary foreground color */
+.assistant-message-container.assistant-message-default::before {
+ color: var(--app-secondary-foreground);
+}
+
+/* Success state - green bullet (maps to .ge) */
+.assistant-message-container.assistant-message-success::before {
+ color: #74c991;
+}
+
+/* Error state - red bullet (maps to .be) */
+.assistant-message-container.assistant-message-error::before {
+ color: #c74e39;
+}
+
+/* Warning state - yellow/orange bullet (maps to .ue) */
+.assistant-message-container.assistant-message-warning::before {
+ color: #e1c08d;
+}
+
+/* Loading state - static bullet (maps to .he) */
+.assistant-message-container.assistant-message-loading::before {
+ color: var(--app-secondary-foreground);
+ background-color: var(--app-secondary-background);
+}
+
+.assistant-message-container.assistant-message-loading::after {
+ display: none
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/Assistant/AssistantMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/Assistant/AssistantMessage.tsx
new file mode 100644
index 00000000..ed8badcc
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/Assistant/AssistantMessage.tsx
@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+import './AssistantMessage.css';
+
+interface AssistantMessageProps {
+ content: string;
+ timestamp: number;
+ onFileClick?: (path: string) => void;
+ status?: 'default' | 'success' | 'error' | 'warning' | 'loading';
+ // When true, render without the left status bullet (no ::before dot)
+ hideStatusIcon?: boolean;
+}
+
+/**
+ * AssistantMessage component - renders AI responses with Qwen Code styling
+ * Supports different states: default, success, error, warning, loading
+ */
+export const AssistantMessage: React.FC
+
+
+ {/* Session List with Grouping */}
+ {
+ const el = e.currentTarget;
+ const distanceToBottom =
+ el.scrollHeight - (el.scrollTop + el.clientHeight);
+ if (distanceToBottom < 48 && hasMore && !isLoading) {
+ onLoadMore?.();
+ }
+ }}
+ >
+ {hasNoSessions ? (
+
+
+ ))
+ )}
+ {hasMore && (
+
+
+ {searchQuery ? 'No matching sessions' : 'No sessions available'}
+
+ ) : (
+ groupSessionsByDate(sessions).map((group) => (
+
+ {group.label}
+
+
+ {group.sessions.map((session) => {
+ const sessionId =
+ (session.id as string) ||
+ (session.sessionId as string) ||
+ '';
+ const title =
+ (session.title as string) ||
+ (session.name as string) ||
+ 'Untitled';
+ const lastUpdated =
+ (session.lastUpdated as string) ||
+ (session.startTime as string) ||
+ '';
+ const isActive = sessionId === currentSessionId;
+
+ return (
+
+ );
+ })}
+
+
+ {isLoading ? 'Loading…' : ''}
+
+ )}
+
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/MarkdownRenderer/MarkdownRenderer.css b/packages/vscode-ide-companion/src/webview/components/messages/MarkdownRenderer/MarkdownRenderer.css
new file mode 100644
index 00000000..37a3485a
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/MarkdownRenderer/MarkdownRenderer.css
@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Styles for MarkdownRenderer component
+ */
+
+.markdown-content {
+ /* Base styles for markdown content */
+ line-height: 1.6;
+ color: var(--app-primary-foreground);
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
+ font-weight: 600;
+}
+
+.markdown-content h1 {
+ font-size: 1.75em;
+ border-bottom: 1px solid var(--app-primary-border-color);
+ padding-bottom: 0.3em;
+}
+
+.markdown-content h2 {
+ font-size: 1.5em;
+ border-bottom: 1px solid var(--app-primary-border-color);
+ padding-bottom: 0.3em;
+}
+
+.markdown-content h3 {
+ font-size: 1.25em;
+}
+
+.markdown-content h4 {
+ font-size: 1.1em;
+}
+
+.markdown-content h5,
+.markdown-content h6 {
+ font-size: 1em;
+}
+
+.markdown-content p {
+ margin-top: 0;
+ /* margin-bottom: 1em; */
+}
+
+.markdown-content ul,
+.markdown-content ol {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-left: 2em;
+}
+
+/* Ensure list markers are visible even with global CSS resets */
+.markdown-content ul {
+ list-style-type: disc;
+ list-style-position: outside;
+}
+
+.markdown-content ol {
+ list-style-type: decimal;
+ list-style-position: outside;
+}
+
+/* Nested list styles */
+.markdown-content ul ul {
+ list-style-type: circle;
+}
+
+.markdown-content ul ul ul {
+ list-style-type: square;
+}
+
+.markdown-content ol ol {
+ list-style-type: lower-alpha;
+}
+
+.markdown-content ol ol ol {
+ list-style-type: lower-roman;
+}
+
+/* Style the marker explicitly so themes don't hide it */
+.markdown-content li::marker {
+ color: var(--app-secondary-foreground);
+}
+
+.markdown-content li {
+ margin-bottom: 0.25em;
+}
+
+.markdown-content li > p {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+
+.markdown-content blockquote {
+ margin: 0 0 1em;
+ padding: 0 1em;
+ border-left: 0.25em solid var(--app-primary-border-color);
+ color: var(--app-secondary-foreground);
+}
+
+.markdown-content a {
+ color: var(--app-link-foreground, #007acc);
+ text-decoration: none;
+}
+
+.markdown-content a:hover {
+ color: var(--app-link-active-foreground, #005a9e);
+ text-decoration: underline;
+}
+
+.markdown-content code {
+ font-family: var(
+ --app-monospace-font-family,
+ 'SF Mono',
+ Monaco,
+ 'Cascadia Code',
+ 'Roboto Mono',
+ Consolas,
+ 'Courier New',
+ monospace
+ );
+ font-size: 0.9em;
+ background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
+ border: 1px solid var(--app-primary-border-color);
+ border-radius: var(--corner-radius-small, 4px);
+ padding: 0.2em 0.4em;
+ white-space: pre-wrap; /* Support automatic line wrapping */
+ word-break: break-word; /* Break words when necessary */
+}
+
+.markdown-content pre {
+ margin: 1em 0;
+ padding: 1em;
+ overflow-x: auto;
+ background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
+ border: 1px solid var(--app-primary-border-color);
+ border-radius: var(--corner-radius-small, 4px);
+ font-family: var(
+ --app-monospace-font-family,
+ 'SF Mono',
+ Monaco,
+ 'Cascadia Code',
+ 'Roboto Mono',
+ Consolas,
+ 'Courier New',
+ monospace
+ );
+ font-size: 0.9em;
+ line-height: 1.5;
+}
+
+.markdown-content pre code {
+ background: none;
+ border: none;
+ padding: 0;
+ white-space: pre-wrap; /* Support automatic line wrapping */
+ word-break: break-word; /* Break words when necessary */
+}
+
+.markdown-content .file-path-link {
+ background: transparent;
+ border: none;
+ padding: 0;
+ font-family: var(
+ --app-monospace-font-family,
+ 'SF Mono',
+ Monaco,
+ 'Cascadia Code',
+ 'Roboto Mono',
+ Consolas,
+ 'Courier New',
+ monospace
+ );
+ font-size: 0.95em;
+ color: var(--app-link-foreground, #007acc);
+ text-decoration: underline;
+ cursor: pointer;
+ transition: color 0.1s ease;
+}
+
+.markdown-content .file-path-link:hover {
+ color: var(--app-link-active-foreground, #005a9e);
+}
+
+.markdown-content hr {
+ border: none;
+ border-top: 1px solid var(--app-primary-border-color);
+ margin: 1.5em 0;
+}
+
+.markdown-content img {
+ max-width: 100%;
+ height: auto;
+}
+
+.markdown-content table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1em 0;
+}
+
+.markdown-content th,
+.markdown-content td {
+ padding: 0.5em 1em;
+ border: 1px solid var(--app-primary-border-color);
+ text-align: left;
+}
+
+.markdown-content th {
+ background-color: var(--app-secondary-background);
+ font-weight: 600;
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/MarkdownRenderer/MarkdownRenderer.tsx b/packages/vscode-ide-companion/src/webview/components/messages/MarkdownRenderer/MarkdownRenderer.tsx
new file mode 100644
index 00000000..11246420
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/MarkdownRenderer/MarkdownRenderer.tsx
@@ -0,0 +1,392 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * MarkdownRenderer component - renders markdown content with syntax highlighting and clickable file paths
+ */
+
+import type React from 'react';
+import MarkdownIt from 'markdown-it';
+import type { Options as MarkdownItOptions } from 'markdown-it';
+import './MarkdownRenderer.css';
+
+interface MarkdownRendererProps {
+ content: string;
+ onFileClick?: (filePath: string) => void;
+ /** When false, do not convert file paths into clickable links. Default: true */
+ enableFileLinks?: boolean;
+}
+
+/**
+ * Regular expressions for parsing content
+ */
+// Match absolute file paths like: /path/to/file.ts or C:\path\to\file.ts
+const FILE_PATH_REGEX =
+ /(?:[a-zA-Z]:)?[/\\](?:[\w\-. ]+[/\\])+[\w\-. ]+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)/gi;
+// Match file paths with optional line numbers like: /path/to/file.ts#7-14 or C:\path\to\file.ts#7
+const FILE_PATH_WITH_LINES_REGEX =
+ /(?:[a-zA-Z]:)?[/\\](?:[\w\-. ]+[/\\])+[\w\-. ]+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)#(\d+)(?:-(\d+))?/gi;
+
+/**
+ * MarkdownRenderer component - renders markdown content with enhanced features
+ */
+export const MarkdownRenderer: React.FC
+
+
+
+
+);
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
new file mode 100644
index 00000000..1014736a
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from './MessageContent.js';
+
+interface FileContext {
+ fileName: string;
+ filePath: string;
+ startLine?: number;
+ endLine?: number;
+}
+
+interface UserMessageProps {
+ content: string;
+ timestamp: number;
+ onFileClick?: (path: string) => void;
+ fileContext?: FileContext;
+}
+
+export const UserMessage: React.FC
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/Waiting/InterruptedMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/Waiting/InterruptedMessage.tsx
new file mode 100644
index 00000000..0c0e4c8d
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/Waiting/InterruptedMessage.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface InterruptedMessageProps {
+ text?: string;
+}
+
+// A lightweight status line similar to WaitingMessage but without the left status icon.
+export const InterruptedMessage: React.FC
+ {/* For user messages, do NOT convert filenames to clickable links */}
+
+
+ {/* File context indicator */}
+ {fileContextDisplay && (
+
+
+ )}
+ fileContext && onFileClick?.(fileContext.filePath)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ fileContext && onFileClick?.(fileContext.filePath);
+ }
+ }}
+ >
+
+
+ {fileContextDisplay}
+
+
+
+);
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/Waiting/WaitingMessage.css b/packages/vscode-ide-companion/src/webview/components/messages/Waiting/WaitingMessage.css
new file mode 100644
index 00000000..9a109a08
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/Waiting/WaitingMessage.css
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import url('../Assistant/AssistantMessage.css');
+
+/* Subtle shimmering highlight across the loading text */
+@keyframes waitingMessageShimmer {
+ 0% {
+ background-position: -200% 0;
+ }
+ 100% {
+ background-position: 200% 0;
+ }
+}
+
+.loading-text-shimmer {
+ /* Use the theme foreground as the base color, with a moving light band */
+ background-image: linear-gradient(
+ 90deg,
+ var(--app-secondary-foreground) 0%,
+ var(--app-secondary-foreground) 40%,
+ rgba(255, 255, 255, 0.95) 50%,
+ var(--app-secondary-foreground) 60%,
+ var(--app-secondary-foreground) 100%
+ );
+ background-size: 200% 100%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent; /* text color comes from the gradient */
+ animation: waitingMessageShimmer 1.6s linear infinite;
+}
+
+.interrupted-item::after {
+ display: none;
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/Waiting/WaitingMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/Waiting/WaitingMessage.tsx
new file mode 100644
index 00000000..68aceac8
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/Waiting/WaitingMessage.tsx
@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import './WaitingMessage.css';
+import { WITTY_LOADING_PHRASES } from '../../../../constants/loadingMessages.js';
+
+interface WaitingMessageProps {
+ loadingMessage: string;
+}
+
+// Rotate message every few seconds while waiting
+const ROTATE_INTERVAL_MS = 3000; // rotate every 3s per request
+
+export const WaitingMessage: React.FC
+ {text}
+
+
+ {/* Use the same left status icon (pseudo-element) style as assistant-message-container */}
+
+ );
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/index.tsx b/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
new file mode 100644
index 00000000..2ec06e87
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { UserMessage } from './UserMessage.js';
+export { AssistantMessage } from './Assistant/AssistantMessage.js';
+export { ThinkingMessage } from './ThinkingMessage.js';
+export { WaitingMessage } from './Waiting/WaitingMessage.js';
+export { InterruptedMessage } from './Waiting/InterruptedMessage.js';
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Bash/Bash.css b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Bash/Bash.css
new file mode 100644
index 00000000..bbd8080d
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Bash/Bash.css
@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call styles - Enhanced styling with semantic class names
+ */
+
+/* Root container for execute tool call output */
+.bash-toolcall-card {
+ border: 0.5px solid var(--app-input-border);
+ border-radius: 5px;
+ background: var(--app-tool-background);
+ margin: 8px 0;
+ max-width: 100%;
+ font-size: 1em;
+ align-items: start;
+}
+
+/* Content wrapper inside the card */
+.bash-toolcall-content {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ padding: 4px;
+}
+
+/* Individual input/output row */
+.bash-toolcall-row {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ border-top: 0.5px solid var(--app-input-border);
+ padding: 4px;
+}
+
+/* First row has no top border */
+.bash-toolcall-row:first-child {
+ border-top: none;
+}
+
+/* Row label (IN/OUT/ERROR) */
+.bash-toolcall-label {
+ grid-column: 1;
+ color: var(--app-secondary-foreground);
+ text-align: left;
+ opacity: 50%;
+ padding: 4px 8px 4px 4px;
+ font-family: var(--app-monospace-font-family);
+ font-size: 0.85em;
+}
+
+/* Row content area */
+.bash-toolcall-row-content {
+ grid-column: 2;
+ white-space: pre-wrap;
+ word-break: break-word;
+ margin: 0;
+ padding: 4px;
+}
+
+/* Truncated content styling */
+.bash-toolcall-row-content:not(.bash-toolcall-full) {
+ max-height: 60px;
+ mask-image: linear-gradient(
+ to bottom,
+ var(--app-primary-background) 40px,
+ transparent 60px
+ );
+ overflow: hidden;
+}
+
+/* Preformatted content */
+.bash-toolcall-pre {
+ margin-block: 0;
+ overflow: hidden;
+ font-family: var(--app-monospace-font-family);
+ font-size: 0.85em;
+}
+
+/* Code content */
+.bash-toolcall-code {
+ margin: 0;
+ padding: 0;
+ font-family: var(--app-monospace-font-family);
+ font-size: 0.85em;
+}
+
+/* Output content with subtle styling */
+.bash-toolcall-output-subtle {
+ background-color: var(--app-code-background);
+ white-space: pre;
+ overflow-x: auto;
+ max-width: 100%;
+ min-width: 0;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+/* Error content styling */
+.bash-toolcall-error-content {
+ color: #c74e39;
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Bash/Bash.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Bash/Bash.tsx
new file mode 100644
index 00000000..acd1fe26
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Bash/Bash.tsx
@@ -0,0 +1,180 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call component - specialized for command execution operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import { ToolCallContainer } from '../shared/LayoutComponents.js';
+import { safeTitle, groupContent } from '../shared/utils.js';
+import { useVSCode } from '../../../../hooks/useVSCode.js';
+import { createAndOpenTempFile } from '../../../../utils/tempFileManager.js';
+import './Bash.css';
+
+/**
+ * Specialized component for Execute/Bash tool calls
+ * Shows: Bash bullet + description + IN/OUT card
+ */
+export const ExecuteToolCall: React.FC
+
+ {phrases[index]}
+
+
+
+ ⎿
+ {commandText}
+
+ {/* Error card - semantic DOM + Tailwind styles */}
+
+
+
+ {/* IN row */}
+
+
+
+
+ {/* ERROR row */}
+ IN
+
+
+ {inputCommand}
+
+
+ Error
+
+
+
+ {errors.join('\n')}
+
+
+ ⎿
+ {commandText}
+
+ {/* Output card - semantic DOM + Tailwind styles */}
+
+
+
+ {/* IN row */}
+
+
+
+
+ {/* OUT row */}
+ IN
+
+
+ {inputCommand}
+
+
+ OUT
+
+
+
+
+ {truncatedOutput}
+
+ ⎿
+ {commandText}
+
+
+
+);
+
+/**
+ * Calculate diff summary (added/removed lines)
+ */
+const getDiffSummary = (
+ oldText: string | null | undefined,
+ newText: string | undefined,
+): string => {
+ const oldLines = oldText ? oldText.split('\n').length : 0;
+ const newLines = newText ? newText.split('\n').length : 0;
+ const diff = newLines - oldLines;
+
+ if (diff > 0) {
+ return `+${diff} lines`;
+ } else if (diff < 0) {
+ return `${diff} lines`;
+ } else {
+ return 'Modified';
+ }
+};
+
+/**
+ * Specialized component for Edit tool calls
+ * Optimized for displaying file editing operations with diffs
+ */
+export const EditToolCall: React.FC
+
+
+
+ {label}
+
+
+ {labelSuffix}
+
+
+ {children && (
+ {children}
+ )}
+
+
+ );
+ }
+
+ // Error case: show error
+ if (errors.length > 0) {
+ const path = diffs[0]?.path || locations?.[0]?.path || '';
+ return (
+
+
+
+
+ {/* Failed state text (replace summary) */}
+
+
+ Edit
+
+ {path && (
+
+
+ edit failed
+
+
+
+ );
+ }
+
+ // Success case without diff: show file in compact format
+ if (locations && locations.length > 0) {
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ return (
+
+
+
+
+
+ {/* Align the inline Edit label styling with shared toolcall label: larger + bold */}
+
+ Edit
+
+ {path && (
+
+
+ ⎿
+ {summary}
+
+
+ ⎿
+
+
+ );
+ }
+
+ // No output, don't show anything
+ return null;
+};
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Execute/Execute.css b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Execute/Execute.css
new file mode 100644
index 00000000..97a561c5
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Execute/Execute.css
@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call styles - Enhanced styling with semantic class names
+ */
+
+/* Root container for execute tool call output */
+.execute-toolcall-card {
+ border: 0.5px solid var(--app-input-border);
+ border-radius: 5px;
+ background: var(--app-tool-background);
+ margin: 8px 0;
+ max-width: 100%;
+ font-size: 1em;
+ align-items: start;
+}
+
+/* Content wrapper inside the card */
+.execute-toolcall-content {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ padding: 4px;
+}
+
+/* Individual input/output row */
+.execute-toolcall-row {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ border-top: 0.5px solid var(--app-input-border);
+ padding: 4px;
+}
+
+/* First row has no top border */
+.execute-toolcall-row:first-child {
+ border-top: none;
+}
+
+/* Row label (IN/OUT/ERROR) */
+.execute-toolcall-label {
+ grid-column: 1;
+ color: var(--app-secondary-foreground);
+ text-align: left;
+ opacity: 50%;
+ padding: 4px 8px 4px 4px;
+ font-family: var(--app-monospace-font-family);
+ font-size: 0.85em;
+}
+
+/* Row content area */
+.execute-toolcall-row-content {
+ grid-column: 2;
+ white-space: pre-wrap;
+ word-break: break-word;
+ margin: 0;
+ padding: 4px;
+}
+
+/* Truncated content styling */
+.execute-toolcall-row-content:not(.execute-toolcall-full) {
+ max-height: 60px;
+ mask-image: linear-gradient(
+ to bottom,
+ var(--app-primary-background) 40px,
+ transparent 60px
+ );
+ overflow: hidden;
+}
+
+/* Preformatted content */
+.execute-toolcall-pre {
+ margin-block: 0;
+ overflow: hidden;
+ font-family: var(--app-monospace-font-family);
+ font-size: 0.85em;
+}
+
+/* Code content */
+.execute-toolcall-code {
+ margin: 0;
+ padding: 0;
+ font-family: var(--app-monospace-font-family);
+ font-size: 0.85em;
+}
+
+/* Output content with subtle styling */
+.execute-toolcall-output-subtle {
+ background-color: var(--app-code-background);
+ white-space: pre;
+ overflow-x: auto;
+ max-width: 100%;
+ min-width: 0;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+/* Error content styling */
+.execute-toolcall-error-content {
+ color: #c74e39;
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Execute/Execute.tsx b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Execute/Execute.tsx
new file mode 100644
index 00000000..1a2f2754
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/Execute/Execute.tsx
@@ -0,0 +1,173 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Execute tool call component - specialized for command execution operations
+ */
+
+import type React from 'react';
+import type { BaseToolCallProps } from '../shared/types.js';
+import { safeTitle, groupContent } from '../shared/utils.js';
+import './Execute.css';
+import type { ToolCallContainerProps } from '../shared/LayoutComponents.js';
+
+export const ToolCallContainer: React.FC
+
+);
+
+/**
+ * Specialized component for Execute tool calls
+ * Shows: Execute bullet + description + IN/OUT card
+ */
+export const ExecuteToolCall: React.FC
+
+
+
+ {label}
+
+
+ {labelSuffix}
+
+
+ {children && (
+ {children}
+ )}
+
+ ⎿
+ {commandText}
+
+ {/* Error card - semantic DOM + Tailwind styles */}
+
+
+
+ {/* IN row */}
+
+
+
+
+ {/* ERROR row */}
+ IN
+
+
+ {inputCommand}
+
+
+ Error
+
+
+
+ {errors.join('\n')}
+
+
+ ⎿
+ {commandText}
+
+ {/* Output card - semantic DOM + Tailwind styles */}
+
+
+
+ {/* IN row */}
+
+
+
+
+ {/* OUT row */}
+ IN
+
+
+ {inputCommand}
+
+
+ OUT
+
+
+
+
+ {truncatedOutput}
+
+ ⎿
+ {commandText}
+
+ {operationText}
+ {errors.join('\n')}
+ {operationText}
+
+ {truncatedOutput}
+
+
+
+);
+
+/**
+ * Specialized component for Read tool calls
+ * Optimized for displaying file reading operations
+ * Shows: Read filename (no content preview)
+ */
+export const ReadToolCall: React.FC
+
+
+
+ {label}
+
+
+ {labelSuffix}
+
+
+ {children && (
+
+ {children}
+
+ )}
+
+ {/* timeline vertical line */}
+
+
+ );
+};
+
+// Local card layout for multi-result or error display
+const SearchCard: React.FC<{
+ status: 'success' | 'error' | 'warning' | 'loading' | 'default';
+ children: React.ReactNode;
+ isFirst?: boolean;
+ isLast?: boolean;
+}> = ({ status, children, isFirst, isLast }) => {
+ const beforeStatusClass =
+ status === 'success'
+ ? 'before:text-qwen-success'
+ : status === 'error'
+ ? 'before:text-qwen-error'
+ : status === 'warning'
+ ? 'before:text-qwen-warning'
+ : 'before:text-qwen-loading before:opacity-70 before:animate-pulse-slow';
+ const lineCropTop = isFirst ? 'top-[24px]' : 'top-0';
+ const lineCropBottom = isLast
+ ? 'bottom-auto h-[calc(100%-24px)]'
+ : 'bottom-0';
+ return (
+
+
+
+
+ Search
+
+ {labelSuffix ? (
+
+ {labelSuffix}
+
+ ) : null}
+
+ {children ? (
+
+ {children}
+
+ ) : null}
+
+ {/* timeline vertical line */}
+
+
+ );
+};
+
+const SearchRow: React.FC<{ label: string; children: React.ReactNode }> = ({
+ label,
+ children,
+}) => (
+
+
+ {children}
+
+
+);
+
+const LocationsListLocal: React.FC<{
+ locations: Array<{ path: string; line?: number | null }>;
+}> = ({ locations }) => (
+
+ {label}
+
+
+ {children}
+
+
+ {locations.map((loc, idx) => (
+
+);
+
+export const SearchToolCall: React.FC{queryText}
+ {errors.join('\n')}
+ {queryText}
+
+ {textOutputs.map((text, index) => (
+
+
+ ⎿
+ {text}
+
+ ))}
+
+ {truncatedThoughts}
+
+
+
+);
+
+const mapToolStatusToBullet = (
+ status: import('../shared/types.js').ToolCallStatus,
+): 'success' | 'error' | 'warning' | 'loading' | 'default' => {
+ switch (status) {
+ case 'completed':
+ return 'success';
+ case 'failed':
+ return 'error';
+ case 'in_progress':
+ return 'warning';
+ case 'pending':
+ return 'loading';
+ default:
+ return 'default';
+ }
+};
+
+// Parse plan entries with - [ ] / - [x] from text as much as possible
+const parsePlanEntries = (textOutputs: string[]): PlanEntry[] => {
+ const text = textOutputs.join('\n');
+ const lines = text.split(/\r?\n/);
+ const entries: PlanEntry[] = [];
+
+ // Accept [ ], [x]/[X] and in-progress markers [-] or [*]
+ const todoRe = /^(?:\s*(?:[-*]|\d+[.)])\s*)?\[( |x|X|-|\*)\]\s+(.*)$/;
+ for (const line of lines) {
+ const m = line.match(todoRe);
+ if (m) {
+ const mark = m[1];
+ const title = m[2].trim();
+ const status: EntryStatus =
+ mark === 'x' || mark === 'X'
+ ? 'completed'
+ : mark === '-' || mark === '*'
+ ? 'in_progress'
+ : 'pending';
+ if (title) {
+ entries.push({ content: title, status });
+ }
+ }
+ }
+
+ // If no match is found, fall back to treating non-empty lines as pending items
+ if (entries.length === 0) {
+ for (const line of lines) {
+ const title = line.trim();
+ if (title) {
+ entries.push({ content: title, status: 'pending' });
+ }
+ }
+ }
+
+ return entries;
+};
+
+/**
+ * Specialized component for UpdatedPlan tool calls
+ * Optimized for displaying plan update operations
+ */
+export const UpdatedPlanToolCall: React.FC
+
+
+
+ {label}
+
+
+ {labelSuffix}
+
+
+ {children && (
+
+ {children}
+
+ )}
+ -
+ {entries.map((entry, idx) => {
+ const isDone = entry.status === 'completed';
+ const isIndeterminate = entry.status === 'in_progress';
+ return (
+
-
+
+
+ + {entry.content} ++
+ );
+ })}
+
+ ⎿
+ {errorMessage}
+
+ {truncatedContent && (
+
+
+ )}
+
+ );
+ }
+
+ // Success case: show filename + line count
+ if (locations && locations.length > 0) {
+ const path = locations[0].path;
+ const lineCount = writeContent.split('\n').length;
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ return (
+
+ {truncatedContent}
+
+
+ ⎿
+ {lineCount} lines
+
+
+ );
+ }
+
+ // Fallback: show generic success
+ if (textOutputs.length > 0) {
+ const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
+ return (
+
+
+);
+
+interface ToolCallCardProps {
+ icon: string;
+ children: React.ReactNode;
+}
+
+/**
+ * Legacy card wrapper - kept for backward compatibility with complex layouts like diffs
+ */
+export const ToolCallCard: React.FC
+
+
+
+ {label}
+
+
+ {labelSuffix}
+
+
+ {children && (
+
+ {children}
+
+ )}
+
+
+);
+
+interface ToolCallRowProps {
+ label: string;
+ children: React.ReactNode;
+}
+
+/**
+ * A single row in the tool call grid (legacy - for complex layouts)
+ */
+export const ToolCallRow: React.FC{children}
+
+
+);
+
+/**
+ * Props for StatusIndicator
+ */
+interface StatusIndicatorProps {
+ status: 'pending' | 'in_progress' | 'completed' | 'failed';
+ text: string;
+}
+
+/**
+ * Get status color class
+ */
+const getStatusColorClass = (
+ status: 'pending' | 'in_progress' | 'completed' | 'failed',
+): string => {
+ switch (status) {
+ case 'pending':
+ return 'bg-[#ffc107]';
+ case 'in_progress':
+ return 'bg-[#2196f3]';
+ case 'completed':
+ return 'bg-[#4caf50]';
+ case 'failed':
+ return 'bg-[#f44336]';
+ default:
+ return 'bg-gray-500';
+ }
+};
+
+/**
+ * Status indicator with colored dot
+ */
+export const StatusIndicator: React.FC
+ {label}
+
+
+ {children}
+
+
+
+ {text}
+
+);
+
+interface CodeBlockProps {
+ children: string;
+}
+
+/**
+ * Code block for displaying formatted code or output
+ */
+export const CodeBlock: React.FC
+ {children}
+
+);
+
+/**
+ * Props for LocationsList
+ */
+interface LocationsListProps {
+ locations: Array<{
+ path: string;
+ line?: number | null;
+ }>;
+}
+
+/**
+ * List of file locations with clickable links
+ */
+export const LocationsList: React.FC
+ {locations.map((loc, idx) => (
+
+);
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/shared/types.ts b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/shared/types.ts
new file mode 100644
index 00000000..0fccb186
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/shared/types.ts
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Shared types for tool call components
+ */
+
+/**
+ * Tool call content types
+ */
+export interface ToolCallContent {
+ type: 'content' | 'diff';
+ // For content type
+ content?: {
+ type: string;
+ text?: string;
+ error?: unknown;
+ [key: string]: unknown;
+ };
+ // For diff type
+ path?: string;
+ oldText?: string | null;
+ newText?: string;
+}
+
+/**
+ * Tool call location type
+ */
+export interface ToolCallLocation {
+ path: string;
+ line?: number | null;
+}
+
+/**
+ * Tool call status type
+ */
+export type ToolCallStatus = 'pending' | 'in_progress' | 'completed' | 'failed';
+
+/**
+ * Base tool call data interface
+ */
+export interface ToolCallData {
+ toolCallId: string;
+ kind: string;
+ title: string | object;
+ status: ToolCallStatus;
+ rawInput?: string | object;
+ content?: ToolCallContent[];
+ locations?: ToolCallLocation[];
+ timestamp?: number; // Add a timestamp field for message sorting
+}
+
+/**
+ * Base props for all tool call components
+ */
+export interface BaseToolCallProps {
+ toolCall: ToolCallData;
+ // Optional timeline flags for rendering connector line cropping
+ isFirst?: boolean;
+ isLast?: boolean;
+}
+
+/**
+ * Grouped content structure for rendering
+ */
+export interface GroupedContent {
+ textOutputs: string[];
+ errors: string[];
+ diffs: ToolCallContent[];
+ otherData: unknown[];
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/shared/utils.ts b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/shared/utils.ts
new file mode 100644
index 00000000..4ae9efd6
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/messages/toolcalls/shared/utils.ts
@@ -0,0 +1,229 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Shared utility functions for tool call components
+ */
+
+import type {
+ ToolCallContent,
+ GroupedContent,
+ ToolCallStatus,
+} from './types.js';
+
+/**
+ * Format any value to a string for display
+ */
+export const formatValue = (value: unknown): string => {
+ if (value === null || value === undefined) {
+ return '';
+ }
+ if (typeof value === 'string') {
+ // TODO: Trying to take out the Output part from the string
+ try {
+ value = (JSON.parse(value) as { output?: unknown }).output ?? value;
+ } catch (_error) {
+ // ignore JSON parse errors
+ }
+ return value as string;
+ }
+ // Handle Error objects specially
+ if (value instanceof Error) {
+ return value.message || value.toString();
+ }
+ // Handle error-like objects with message property
+ if (typeof value === 'object' && value !== null && 'message' in value) {
+ const errorObj = value as { message?: string; stack?: string };
+ return errorObj.message || String(value);
+ }
+ if (typeof value === 'object') {
+ try {
+ return JSON.stringify(value, null, 2);
+ } catch (_e) {
+ return String(value);
+ }
+ }
+ return String(value);
+};
+
+/**
+ * Safely convert title to string, handling object types
+ * Returns empty string if no meaningful title
+ */
+export const safeTitle = (title: unknown): string => {
+ if (typeof title === 'string' && title.trim()) {
+ return title;
+ }
+ if (title && typeof title === 'object') {
+ return JSON.stringify(title);
+ }
+ return '';
+};
+
+/**
+ * Get icon emoji for a given tool kind
+ */
+export const getKindIcon = (kind: string): string => {
+ const kindMap: Record