diff --git a/eslint.config.js b/eslint.config.js
index a896c241..1b3807e7 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -74,6 +74,8 @@ export default tseslint.config(
       },
     },
     rules: {
+      // We use TypeScript for React components; prop-types are unnecessary
+      'react/prop-types': 'off',
       // General Best Practice Rules (subset adapted for flat config)
       '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
       'arrow-body-style': ['error', 'as-needed'],
diff --git a/packages/vscode-ide-companion/src/webview/components/InputForm.tsx b/packages/vscode-ide-companion/src/webview/components/InputForm.tsx
index 819cdd25..17559cb7 100644
--- a/packages/vscode-ide-companion/src/webview/components/InputForm.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/InputForm.tsx
@@ -123,20 +123,9 @@ export const InputForm: React.FC<InputFormProps> = ({
       style={{ backgroundColor: 'var(--app-primary-background)' }}
     >
       <div className="block">
-        <form
-          className="relative flex flex-col rounded-large border border-[var(--app-input-border)] shadow-sm transition-colors duration-200 focus-within:border-[var(--app-input-highlight)] focus-within:[box-shadow:0_1px_2px_color-mix(in_srgb,var(--app-input-highlight),transparent_80%)]"
-          style={{
-            backgroundColor:
-              'var(--app-input-secondary-background, var(--app-input-background))',
-            color: 'var(--app-input-foreground)',
-          }}
-          onSubmit={onSubmit}
-        >
+        <form className="composer-form" onSubmit={onSubmit}>
           {/* Inner background layer */}
-          <div
-            className="absolute inset-0 rounded-large z-0"
-            style={{ backgroundColor: 'var(--app-input-background)' }}
-          />
+          <div className="composer-overlay" />
 
           {/* Banner area */}
           <div className="input-banner" />
@@ -161,11 +150,7 @@ export const InputForm: React.FC<InputFormProps> = ({
             <div
               ref={inputFieldRef}
               contentEditable="plaintext-only"
-              className="c flex-1 self-stretch p-2.5 px-3.5 outline-none font-inherit leading-relaxed overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-none rounded-none overflow-x-hidden break-words whitespace-pre-wrap empty:before:content-[attr(data-placeholder)] empty:before:absolute empty:before:pointer-events-none disabled:text-gray-400 disabled:cursor-not-allowed"
-              style={{
-                color: 'var(--app-input-foreground)',
-                fontSize: 'var(--vscode-chat-font-size, 13px)',
-              }}
+              className="composer-input"
               role="textbox"
               aria-label="Message input"
               aria-multiline="true"
@@ -181,41 +166,31 @@ export const InputForm: React.FC<InputFormProps> = ({
             />
           </div>
 
-          {/* Actions row */}
-          <div
-            className="flex items-center p-1.5 gap-1.5 min-w-0 z-[1]"
-            style={{
-              color: 'var(--app-secondary-foreground)',
-              borderTop: '0.5px solid var(--app-input-border)',
-            }}
-          >
+          {/* Actions row (compact, Claude-style) */}
+          <div className="composer-actions">
             {/* Edit mode button */}
             <button
               type="button"
-              className="flex items-center gap-1.5 px-2.5 py-1.5 h-8 bg-transparent border border-transparent rounded-small cursor-pointer text-xs transition-colors duration-150 hover:bg-[var(--app-ghost-button-hover-background)] min-w-0 flex-shrink overflow-hidden [&>svg]:w-4 [&>svg]:h-4 [&>svg]:flex-shrink-0"
-              style={{ color: 'var(--app-primary-foreground)' }}
+              className="btn-text-compact btn-text-compact--primary"
               title={editModeInfo.title}
               onClick={onToggleEditMode}
             >
               {editModeInfo.icon}
               {/* Let the label truncate with ellipsis; hide on very small screens */}
-              <span className="min-w-0 truncate hidden sm:inline">
-                {editModeInfo.text}
-              </span>
+              <span className="hidden sm:inline">{editModeInfo.text}</span>
             </button>
 
             {/* Active file indicator */}
             {activeFileName && (
               <button
                 type="button"
-                className="flex items-center gap-1.5 px-2.5 py-1.5 h-8 bg-transparent border border-transparent rounded-small cursor-pointer text-xs transition-colors duration-150 hover:bg-[var(--app-ghost-button-hover-background)] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:flex-shrink-0 max-w-[200px] flex-shrink min-w-0 overflow-hidden"
-                style={{ color: 'var(--app-primary-foreground)' }}
+                className="btn-text-compact btn-text-compact--primary"
                 title={`Showing Qwen Code your current file selection: ${activeFileName}${activeSelection ? `#${activeSelection.startLine}-${activeSelection.endLine}` : ''}`}
                 onClick={onFocusActiveEditor}
               >
                 <CodeBracketsIcon />
                 {/* Truncate file path/selection; hide label on very small screens */}
-                <span className="min-w-0 truncate hidden sm:inline">
+                <span className="hidden sm:inline">
                   {activeFileName}
                   {activeSelection &&
                     ` #${activeSelection.startLine}${activeSelection.startLine !== activeSelection.endLine ? `-${activeSelection.endLine}` : ''}`}
@@ -225,7 +200,7 @@ export const InputForm: React.FC<InputFormProps> = ({
 
             {/* Divider */}
             <div
-              className="w-px h-6 mx-0.5 flex-shrink-0"
+              className="w-px h-[26px] mx-0.5 flex-shrink-0"
               style={{
                 backgroundColor: 'var(--app-transparent-inner-border)',
               }}
@@ -237,19 +212,7 @@ export const InputForm: React.FC<InputFormProps> = ({
             {/* Thinking button */}
             <button
               type="button"
-              className={`flex items-center justify-center w-8 h-8 p-0 bg-transparent border border-transparent rounded-small cursor-pointer transition-all duration-150 flex-shrink-0 hover:bg-[var(--app-ghost-button-hover-background)] [&>svg]:w-4 [&>svg]:h-4 ${
-                thinkingEnabled
-                  ? 'bg-qwen-clay-orange text-qwen-ivory [&>svg]:stroke-qwen-ivory [&>svg]:fill-qwen-ivory'
-                  : ''
-              }`}
-              style={{
-                color: thinkingEnabled
-                  ? 'var(--app-qwen-ivory)'
-                  : 'var(--app-secondary-foreground)',
-                backgroundColor: thinkingEnabled
-                  ? 'var(--app-qwen-clay-button-orange)'
-                  : undefined,
-              }}
+              className={`btn-icon-compact ${thinkingEnabled ? 'btn-icon-compact--active' : ''}`}
               title={thinkingEnabled ? 'Thinking on' : 'Thinking off'}
               onClick={onToggleThinking}
             >
@@ -259,8 +222,7 @@ export const InputForm: React.FC<InputFormProps> = ({
             {/* Command button */}
             <button
               type="button"
-              className="flex items-center justify-center w-8 h-8 p-0 bg-transparent border border-transparent rounded-small cursor-pointer transition-all duration-150 flex-shrink-0 hover:bg-[var(--app-ghost-button-hover-background)] hover:text-[var(--app-primary-foreground)] [&>svg]:w-4 [&>svg]:h-4"
-              style={{ color: 'var(--app-secondary-foreground)' }}
+              className="btn-icon-compact hover:text-[var(--app-primary-foreground)]"
               title="Show command menu (/)"
               onClick={onShowCommandMenu}
             >
@@ -270,8 +232,7 @@ export const InputForm: React.FC<InputFormProps> = ({
             {/* Attach button */}
             <button
               type="button"
-              className="flex items-center justify-center w-8 h-8 p-0 bg-transparent border border-transparent rounded-small cursor-pointer transition-all duration-150 flex-shrink-0 hover:bg-[var(--app-ghost-button-hover-background)] hover:text-[var(--app-primary-foreground)] [&>svg]:w-4 [&>svg]:h-4"
-              style={{ color: 'var(--app-secondary-foreground)' }}
+              className="btn-icon-compact hover:text-[var(--app-primary-foreground)]"
               title="Attach context (Cmd/Ctrl + /)"
               onClick={onAttachContext}
             >
@@ -281,11 +242,7 @@ export const InputForm: React.FC<InputFormProps> = ({
             {/* Send button */}
             <button
               type="submit"
-              className="flex items-center justify-center w-8 h-8 p-0 border border-transparent rounded-small cursor-pointer transition-all duration-150 ml-auto flex-shrink-0 hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed [&>svg]:w-5 [&>svg]:h-5"
-              style={{
-                backgroundColor: 'var(--app-qwen-clay-button-orange)',
-                color: 'var(--app-qwen-ivory)',
-              }}
+              className="btn-send-compact [&>svg]:w-5 [&>svg]:h-5"
               disabled={isStreaming || !inputText.trim()}
             >
               <ArrowUpIcon />
diff --git a/packages/vscode-ide-companion/src/webview/components/Timeline.css b/packages/vscode-ide-companion/src/webview/components/Timeline.css
deleted file mode 100644
index 44fea9ee..00000000
--- a/packages/vscode-ide-companion/src/webview/components/Timeline.css
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Timeline.css - 时间线布局样式
- * 统一展示消息、工具调用、输出等
- */
-
-.timeline-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 16px 20px;
-}
-
-.timeline-item {
-  position: relative;
-  display: grid;
-  grid-template-columns: 20px 1fr;
-  gap: 12px;
-  padding-bottom: 16px;
-}
-
-.timeline-item.last {
-  padding-bottom: 0;
-}
-
-/* 时间线连接线 - 暂时禁用 */
-/*
-.timeline-line {
-  position: absolute;
-  left: 9px;
-  top: 20px;
-  bottom: 0;
-  width: 2px;
-  background: var(--app-transparent-inner-border);
-  opacity: 0.3;
-}
-
-.timeline-item.last .timeline-line {
-  display: none;
-}
-*/
-
-/* 状态圆点 */
-.timeline-dot {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-top: 2px;
-  z-index: 1;
-}
-
-.dot-inner {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: block;
-}
-
-/* 不同类型的圆点颜色 */
-.timeline-dot.blue .dot-inner {
-  background-color: var(--vscode-terminal-ansiBlue, #4fc3f7);
-}
-
-.timeline-dot.gray .dot-inner {
-  background-color: var(--app-secondary-foreground);
-  opacity: 0.5;
-}
-
-.timeline-dot.green .dot-inner {
-  background-color: var(--app-qwen-green, #6bcf7f);
-}
-
-.timeline-dot.purple .dot-inner {
-  background-color: var(--vscode-terminal-ansiMagenta, #ba68c8);
-}
-
-/* 内容区域 */
-.timeline-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-}
-
-/* 标签 */
-.timeline-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--app-secondary-foreground);
-  opacity: 0.6;
-}
-
-/* 内容主体 */
-.timeline-body {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--app-primary-foreground);
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-/* 折叠/展开按钮 */
-.timeline-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px 4px 4px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--app-secondary-foreground);
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 0.15s;
-  align-self: flex-start;
-}
-
-.timeline-toggle:hover {
-  background: var(--app-ghost-button-hover-background);
-}
-
-.timeline-toggle-icon {
-  font-size: 10px;
-  line-height: 1;
-  transition: transform 0.15s;
-}
-
-.timeline-toggle-text {
-  font-weight: 500;
-}
-
-/* 工具输出的特殊样式 */
-.timeline-item.tool-output .timeline-body {
-  background: var(--app-secondary-background);
-  border: 1px solid var(--app-transparent-inner-border);
-  border-radius: 6px;
-  padding: 12px;
-  font-family: var(
-    --vscode-editor-font-family,
-    'Monaco',
-    'Courier New',
-    monospace
-  );
-  font-size: 12px;
-  color: var(--app-secondary-foreground);
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-/* 工具调用的特殊样式 */
-.timeline-item.tool-call .timeline-body {
-  background: var(--app-secondary-background);
-  border: 1px solid var(--app-transparent-inner-border);
-  border-radius: 6px;
-  padding: 12px;
-}
-
-/* 用户消息样式 */
-.timeline-item.user-message .timeline-body {
-  background: var(--app-qwen-clay-button-orange);
-  border: 1px solid var(--app-transparent-inner-border);
-  border-radius: 8px;
-  padding: 10px 14px;
-}
-
-/* 思考消息样式 */
-.timeline-item.thinking .timeline-body {
-  color: var(--app-secondary-foreground);
-  opacity: 0.7;
-  font-style: italic;
-}
-
-/* 滚动条样式 */
-.timeline-item.tool-output .timeline-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.timeline-item.tool-output .timeline-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.timeline-item.tool-output .timeline-body::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-}
-
-.timeline-item.tool-output .timeline-body::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-/* 动画 */
-@keyframes timelineFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.timeline-item {
-  animation: timelineFadeIn 0.3s ease-out;
-}
diff --git a/packages/vscode-ide-companion/src/webview/components/Timeline.tsx b/packages/vscode-ide-companion/src/webview/components/Timeline.tsx
deleted file mode 100644
index 7f121eb6..00000000
--- a/packages/vscode-ide-companion/src/webview/components/Timeline.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { useState } from 'react';
-import './Timeline.css';
-
-export type TimelineItemType =
-  | 'user-message'
-  | 'assistant-message'
-  | 'tool-call'
-  | 'tool-output'
-  | 'thinking';
-
-export interface TimelineItemProps {
-  type: TimelineItemType;
-  children: React.ReactNode;
-  /** Whether collapsible (mainly for tool output) */
-  collapsible?: boolean;
-  /** Default expanded */
-  defaultExpanded?: boolean;
-  /** Custom title (used for display when collapsed) */
-  title?: string;
-  /** Whether it is the last item */
-  isLast?: boolean;
-}
-
-/**
- * Timeline item component - Unified display of messages and tool calls
- */
-export const TimelineItem: React.FC<TimelineItemProps> = ({
-  type,
-  children,
-  collapsible = false,
-  defaultExpanded = true,
-  title,
-  isLast = false,
-}) => {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-
-  const getDotColor = (): string => {
-    switch (type) {
-      case 'user-message':
-        return 'blue'; // User message - Blue
-      case 'assistant-message':
-        return 'gray'; // LLM output - Gray
-      case 'tool-call':
-        return 'green'; // Tool call - Green
-      case 'tool-output':
-        return 'gray'; // Tool output - Gray
-      case 'thinking':
-        return 'purple'; // Thinking - Purple
-      default:
-        return 'gray';
-    }
-  };
-
-  const getItemLabel = (): string | null => {
-    switch (type) {
-      case 'user-message':
-        return 'You';
-      case 'assistant-message':
-        return 'Qwen';
-      case 'tool-call':
-        return 'Tool Call';
-      case 'tool-output':
-        return 'Output';
-      case 'thinking':
-        return 'Thinking';
-      default:
-        return null;
-    }
-  };
-
-  const dotColor = getDotColor();
-  const itemLabel = getItemLabel();
-
-  return (
-    <div className={`timeline-item ${type} ${isLast ? 'last' : ''}`}>
-      {/* Timeline connecting line - Temporarily disabled */}
-      {/* {!isLast && <div className="timeline-line" />} */}
-
-      {/* Status dot */}
-      <div className={`timeline-dot ${dotColor}`}>
-        <span className="dot-inner" />
-      </div>
-
-      {/* Content area */}
-      <div className="timeline-content">
-        {/* Label (optional) */}
-        {itemLabel && <div className="timeline-label">{itemLabel}</div>}
-
-        {/* Collapsible content */}
-        {collapsible ? (
-          <>
-            <button
-              className="timeline-toggle"
-              onClick={() => setExpanded(!expanded)}
-              aria-expanded={expanded}
-            >
-              <span className="timeline-toggle-icon">
-                {expanded ? '▼' : '▶'}
-              </span>
-              <span className="timeline-toggle-text">
-                {title || (expanded ? 'Hide details' : 'Show details')}
-              </span>
-            </button>
-            {expanded && <div className="timeline-body">{children}</div>}
-          </>
-        ) : (
-          <div className="timeline-body">{children}</div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-/**
- * Timeline container component
- */
-export const Timeline: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => <div className="timeline-container">{children}</div>;
diff --git a/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx b/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx
index 086e7e08..0f1711d8 100644
--- a/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx
@@ -18,27 +18,22 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
   onLoadSessions,
   onNewSession,
 }) => (
-  <div
-    className="chat-header flex items-center select-none py-1.5 px-2.5 w-full"
-    style={{
-      backgroundColor: 'var(--app-header-background)',
-    }}
-  >
+  <div className="chat-header flex items-center select-none w-full border-b border-[var(--app-primary-border-color)] bg-[var(--app-header-background)] py-1.5 px-2">
     <button
-      className="btn-ghost btn-md px-2 flex items-center outline-none font-medium max-w-[70%] min-w-0 overflow-hidden rounded hover:bg-[var(--app-ghost-button-hover-background)] h-6 leading-6"
+      className="flex items-center gap-1.5 py-0.5 px-2 bg-transparent border-none rounded cursor-pointer outline-none min-w-0 max-w-[300px] overflow-hidden text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)] hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
       onClick={onLoadSessions}
       title="Past conversations"
     >
-      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 mr-1">
+      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
         {currentSessionTitle}
       </span>
-      <ChevronDownIcon className="w-4 h-4 flex-shrink-0 ml-1" />
+      <ChevronDownIcon className="w-4 h-4 flex-shrink-0" />
     </button>
 
-    <div className="flex-1 min-w-2"></div>
+    <div className="flex-1 min-w-1"></div>
 
     <button
-      className="btn-ghost btn-sm flex items-center justify-center outline-none rounded hover:bg-[var(--app-ghost-button-hover-background)] p-1 leading-6"
+      className="flex items-center justify-center p-1.5 bg-transparent border-none rounded cursor-pointer outline-none hover:bg-[var(--app-ghost-button-hover-background)]"
       onClick={onNewSession}
       title="New Session"
     >
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css
index f1ac2853..9f485804 100644
--- a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css
+++ b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  *
  * AssistantMessage Component Styles
- * Only pseudo-elements (::before) for bullet points
+ * Pseudo-elements (::before) for bullet points and (::after) for timeline connectors
  */
 
 /* Bullet point indicator using ::before pseudo-element */
@@ -58,3 +58,32 @@
     opacity: 0.5;
   }
 }
+
+/* Timeline connector line using ::after pseudo-element */
+/* Default: full height connector for middle items */
+.assistant-message-container::after {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--app-primary-border-color);
+  opacity: 0.4;
+  z-index: 0;
+}
+
+/* First item: connector starts from bullet point position */
+.assistant-message-container:first-child::after {
+  top: 12px; /* Start from around the bullet point position (8px padding + 4px offset) */
+}
+
+/* Last item: connector ends at bullet point position */
+.assistant-message-container:last-child::after {
+  bottom: 12px; /* End at around the bullet point position */
+}
+
+/* First and last are the same item (single item): no connector */
+.assistant-message-container:first-child:last-child::after {
+  content: none;
+}
diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx
index 4bf0a16c..7e3906ba 100644
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx
@@ -6,7 +6,7 @@
  * Edit tool call component - specialized for file editing operations
  */
 
-import type React from 'react';
+import { useEffect, useCallback } from 'react';
 import type { BaseToolCallProps } from './shared/types.js';
 import { ToolCallContainer } from './shared/LayoutComponents.js';
 import { DiffDisplay } from './shared/DiffDisplay.js';
@@ -45,22 +45,46 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
   // Group content by type
   const { errors, diffs } = groupContent(content);
 
-  const handleOpenDiff = (
-    path: string | undefined,
-    oldText: string | null | undefined,
-    newText: string | undefined,
-  ) => {
-    if (path) {
-      vscode.postMessage({
-        type: 'openDiff',
-        data: { path, oldText: oldText || '', newText: newText || '' },
-      });
-    }
-  };
+  const handleOpenDiff = useCallback(
+    (
+      path: string | undefined,
+      oldText: string | null | undefined,
+      newText: string | undefined,
+    ) => {
+      if (path) {
+        vscode.postMessage({
+          type: 'openDiff',
+          data: { path, oldText: oldText || '', newText: newText || '' },
+        });
+      }
+    },
+    [vscode],
+  );
 
   // Extract filename from path
   const getFileName = (path: string): string => path.split('/').pop() || path;
 
+  // Automatically trigger openDiff when diff content is detected (Claude Code style)
+  useEffect(() => {
+    // Only auto-open if there are diffs and we have the required data
+    if (diffs.length > 0) {
+      const firstDiff = diffs[0];
+      const path = firstDiff.path || (locations && locations[0]?.path) || '';
+
+      if (
+        path &&
+        firstDiff.oldText !== undefined &&
+        firstDiff.newText !== undefined
+      ) {
+        // Add a small delay to ensure the component is fully rendered
+        const timer = setTimeout(() => {
+          handleOpenDiff(path, firstDiff.oldText, firstDiff.newText);
+        }, 100);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [diffs, locations, handleOpenDiff]);
+
   // Error case: show error
   if (errors.length > 0) {
     const path = diffs[0]?.path || locations?.[0]?.path || '';
@@ -98,14 +122,10 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
     return (
       <div>
         <div
-          className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)]"
+          className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)] toolcall-container toolcall-status-success"
           onClick={openFirstDiff}
           title="Open diff in VS Code"
         >
-          {/* Center the bullet vertically like the shared container */}
-          <span className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] leading-none text-[#74c991]">
-            ●
-          </span>
           {/* Keep content within overall width: pl-[30px] provides the bullet indent; */}
           {/* IMPORTANT: Always include min-w-0/max-w-full on inner wrappers to prevent overflow. */}
           <div className="toolcall-edit-content flex flex-col gap-1 pl-[30px] min-w-0 max-w-full">
diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.css b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.css
new file mode 100644
index 00000000..57c59e9f
--- /dev/null
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.css
@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * LayoutComponents.css - Tool call layout styles with timeline support
+ */
+
+/* ToolCallContainer with timeline support */
+.toolcall-container {
+  position: relative;
+  padding-left: 30px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  user-select: text;
+  align-items: flex-start;
+}
+
+/* Timeline connector line using ::after pseudo-element */
+/* Default: full height connector for middle items */
+.toolcall-container::after {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--app-primary-border-color);
+  opacity: 0.4;
+  z-index: 0;
+}
+
+/* First item: connector starts from bullet point position */
+.toolcall-container:first-child::after {
+  top: 12px; /* Start from around the bullet point position (8px padding + 4px offset) */
+}
+
+/* Last item: connector ends at bullet point position */
+.toolcall-container:last-child::after {
+  bottom: 12px; /* End at around the bullet point position */
+}
+
+/* First and last are the same item (single item): no connector */
+.toolcall-container:first-child:last-child::after {
+  content: none;
+}
+
+/* Status-specific styles using ::before pseudo-element for bullet points */
+.toolcall-container.toolcall-status-default::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: var(--app-secondary-foreground);
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-success::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: #74c991;
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-error::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: #c74e39;
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-warning::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: #e1c08d;
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-loading::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: var(--app-secondary-foreground);
+  background-color: var(--app-secondary-background);
+  animation: toolcallPulse 1s linear infinite;
+  z-index: 1;
+}
+
+/* Loading animation */
+@keyframes toolcallPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Content wrapper */
+.toolcall-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Legacy card styles */
+.toolcall-card {
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-medium);
+  background: var(--app-input-background);
+  border: 1px solid var(--app-input-border);
+  border-radius: var(--border-radius-medium);
+  padding: var(--spacing-large);
+  margin: var(--spacing-medium) 0;
+  align-items: start;
+  animation: fadeIn 0.2s ease-in;
+}
+
+/* Legacy row styles */
+.toolcall-row {
+  grid-template-columns: 80px 1fr;
+  gap: var(--spacing-medium);
+  min-width: 0;
+}
+
+.toolcall-row-label {
+  font-size: var(--font-size-xs);
+  color: var(--app-secondary-foreground);
+  font-weight: 500;
+  padding-top: 2px;
+}
+
+.toolcall-row-content {
+  color: var(--app-primary-foreground);
+  min-width: 0;
+  word-break: break-word;
+}
+
+/* Locations list */
+.toolcall-locations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
index a92ce69b..2ba6a295 100644
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
@@ -9,6 +9,7 @@
 
 import type React from 'react';
 import { FileLink } from '../../ui/FileLink.js';
+import './LayoutComponents.css';
 
 /**
  * Props for ToolCallContainer - Claude Code style layout
@@ -26,28 +27,12 @@ interface ToolCallContainerProps {
   labelSuffix?: React.ReactNode;
 }
 
-/**
- * Get bullet point color classes based on status
- */
-const getBulletColorClass = (
-  status: 'success' | 'error' | 'warning' | 'loading' | 'default',
-): string => {
-  switch (status) {
-    case 'success':
-      return 'text-[#74c991]';
-    case 'error':
-      return 'text-[#c74e39]';
-    case 'warning':
-      return 'text-[#e1c08d]';
-    case 'loading':
-      return 'text-[var(--app-secondary-foreground)] animate-pulse';
-    default:
-      return 'text-[var(--app-secondary-foreground)]';
-  }
-};
+// NOTE: We previously computed a bullet color class in JS, but the current
+// implementation uses CSS classes (e.g. `.toolcall-status-success`) with
+// pseudo-elements. Remove the unused helper to satisfy ESLint.
 
 /**
- * Main container with Claude Code style bullet point
+ * Main container with Claude Code style bullet point and timeline
  */
 export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
   label,
@@ -56,19 +41,12 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
   toolCallId: _toolCallId,
   labelSuffix,
 }) => (
-  <div className="relative pl-[30px] py-2 select-text toolcall-container">
+  <div
+    className={`relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
+  >
+    {/* Timeline connector line using ::after pseudo-element */}
     <div className="toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
       <div className="flex items-center gap-2 relative min-w-0">
-        {/* Status icon (bullet), vertically centered with header row */}
-        <span
-          aria-hidden
-          className={`absolute -left-[20px] top-1/2 -translate-y-1/2 text-[10px] leading-none ${getBulletColorClass(
-            status,
-          )}`}
-        >
-          ●
-        </span>
-
         <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
           {label}
         </span>
diff --git a/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css b/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css
index 1887b156..21876a1f 100644
--- a/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css
+++ b/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css
@@ -10,7 +10,6 @@
 /* Import component styles */
 @import '../components/EmptyState.css';
 @import '../components/PlanDisplay.css';
-@import '../components/Timeline.css';
 @import '../components/toolcalls/shared/DiffDisplay.css';
 @import '../components/messages/AssistantMessage.css';
 
diff --git a/packages/vscode-ide-companion/src/webview/styles/tailwind.css b/packages/vscode-ide-companion/src/webview/styles/tailwind.css
index 8e55cfcb..82811298 100644
--- a/packages/vscode-ide-companion/src/webview/styles/tailwind.css
+++ b/packages/vscode-ide-companion/src/webview/styles/tailwind.css
@@ -35,4 +35,123 @@
   .icon-sm {
     @apply w-4 h-4;
   }
-}
\ No newline at end of file
+
+  /* Composer: root container anchored to bottom (Claude-style) */
+  .composer-root {
+    @apply absolute bottom-4 left-4 right-4 flex flex-col z-20;
+  }
+
+  /* Composer: form wrapper */
+  .composer-form {
+    @apply relative flex flex-col max-w-[680px] mx-auto rounded-large border shadow-sm transition-colors duration-200;
+    background: var(--app-input-secondary-background);
+    border-color: var(--app-input-border);
+    color: var(--app-input-foreground);
+  }
+  .composer-form:focus-within {
+    /* match existing highlight behavior */
+    border-color: var(--app-input-highlight);
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--app-input-highlight), transparent 80%);
+  }
+
+  /* Composer: input editable area */
+  .composer-input {
+    /* Use plain CSS for font-family inheritance; Tailwind has no `font-inherit` utility */
+    @apply flex-1 self-stretch py-2.5 px-3.5 outline-none overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-0 rounded-none overflow-x-hidden break-words whitespace-pre-wrap;
+    font-family: inherit;
+    font-size: var(--vscode-chat-font-size, 13px);
+    color: var(--app-input-foreground);
+  }
+  .composer-input:empty:before {
+    content: attr(data-placeholder);
+    color: var(--app-input-placeholder-foreground);
+    pointer-events: none;
+    position: absolute;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 28px);
+  }
+  .composer-input:focus {
+    outline: none;
+  }
+  .composer-input:disabled,
+  .composer-input[contenteditable="false"] {
+    color: #999;
+    cursor: not-allowed;
+  }
+
+  /* Composer: actions row (more compact) */
+  .composer-actions {
+    @apply flex items-center gap-1 min-w-0 z-[1];
+    padding: 5px; /* Claude: padding: 5px */
+    color: var(--app-secondary-foreground);
+    border-top: 0.5px solid var(--app-input-border);
+  }
+
+  /* Text button (icon + label), compact like Claude `.s` */
+  .btn-text-compact {
+    @apply inline-flex items-center gap-1 px-1 py-0.5 rounded-[2px] cursor-pointer appearance-none bg-transparent border-0 min-w-0 shrink text-[0.85em] transition-colors duration-150;
+    color: var(--app-secondary-foreground);
+  }
+  .btn-text-compact--primary {
+    color: var(--app-primary-foreground);
+  }
+  .btn-text-compact:hover {
+    background-color: var(--app-ghost-button-hover-background);
+  }
+  .btn-text-compact:active:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .btn-text-compact > svg {
+    height: 1em; /* match font size */
+    flex-shrink: 0;
+  }
+  .btn-text-compact > span {
+    display: inline-block;
+    min-width: 0;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+
+  @media screen and (max-width: 300px) {
+    .btn-text-compact > svg { display: none; }
+  }
+
+  /* Icon-only button, compact square (26x26) */
+  .btn-icon-compact {
+    @apply inline-flex items-center justify-center w-[26px] h-[26px] p-0 rounded-small bg-transparent border border-transparent cursor-pointer shrink-0 transition-all duration-150;
+    color: var(--app-secondary-foreground);
+  }
+  .btn-icon-compact:hover {
+    background-color: var(--app-ghost-button-hover-background);
+  }
+  .btn-icon-compact > svg {
+    @apply w-4 h-4;
+  }
+  /* Active/primary state for icon button (e.g., Thinking on) */
+  .btn-icon-compact--active {
+    background-color: var(--app-qwen-clay-button-orange);
+    color: var(--app-qwen-ivory);
+  }
+  .btn-icon-compact--active > svg {
+    stroke: var(--app-qwen-ivory);
+    fill: var(--app-qwen-ivory);
+  }
+
+  /* Optional: overlay background layer matching Claude `.si` */
+  .composer-overlay {
+    @apply absolute inset-0 rounded-large z-0;
+    background: var(--app-input-background);
+  }
+
+  /* Optional: send button variant */
+  .btn-send-compact {
+    @apply btn-icon-compact ml-auto hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed;
+    background-color: var(--app-qwen-clay-button-orange);
+    color: var(--app-qwen-ivory);
+  }
+}