diff --git a/packages/webui/.storybook/main.ts b/packages/webui/.storybook/main.ts
index 69c9da990..56d9c536c 100644
--- a/packages/webui/.storybook/main.ts
+++ b/packages/webui/.storybook/main.ts
@@ -27,5 +27,18 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-onboarding'),
   ],
   framework: getAbsolutePath('@storybook/react-vite'),
+  // Set ChatViewer Playground as default story when Storybook opens
+  managerHead: (head) => `
+    ${head}
+    <script>
+      // Redirect to ChatViewer Playground if on root path
+      if (window.location.pathname === '/' || window.location.pathname === '/iframe.html') {
+        const targetPath = '/?path=/story/chat-chatviewer--playground';
+        if (!window.location.search.includes('path=')) {
+          window.history.replaceState(null, '', targetPath);
+        }
+      }
+    </script>
+  `,
 };
 export default config;
diff --git a/packages/webui/.storybook/preview.css b/packages/webui/.storybook/preview.css
index 1514fc9fd..f62d143ed 100644
--- a/packages/webui/.storybook/preview.css
+++ b/packages/webui/.storybook/preview.css
@@ -6,6 +6,9 @@
 
 /* Import CSS variables BEFORE Tailwind so they're available */
 @import '../src/styles/variables.css';
+/* Import component styles */
+@import '../src/styles/components.css';
+@import '../src/styles/timeline.css';
 
 @tailwind base;
 @tailwind components;
@@ -14,4 +17,26 @@
 /* Ensure text color is inherited properly in Storybook */
 body {
   color: var(--app-primary-foreground);
+  margin: 0;
+  padding: 0;
+}
+
+/* Storybook container styling */
+.storybook-container {
+  box-sizing: border-box;
+}
+
+/* Fix Storybook iframe height for full-height stories */
+#storybook-root {
+  height: 100%;
+}
+
+/* Ensure stories with large content don't overflow awkwardly */
+.sb-show-main.sb-main-padded {
+  padding: 0 !important;
+}
+
+/* Full height stories should fill the iframe */
+[data-story-block='true'] {
+  height: 100%;
 }
diff --git a/packages/webui/.storybook/preview.ts b/packages/webui/.storybook/preview.ts
index 47686b067..8a9ad79cb 100644
--- a/packages/webui/.storybook/preview.ts
+++ b/packages/webui/.storybook/preview.ts
@@ -23,22 +23,42 @@ const preview: Preview = {
         { name: 'light', value: '#ffffff' },
       ],
     },
+    layout: 'fullscreen',
+    options: {
+      // Set ChatViewer Playground as the default story
+      storySort: {
+        order: ['Chat', ['ChatViewer', ['Playground', '*']], '*'],
+      },
+    },
   },
   decorators: [
-    (Story) =>
-      React.createElement(
+    (Story, context) => {
+      // For ChatViewer stories, use full height container
+      const isFullHeight =
+        context.title?.includes('ChatViewer') ||
+        context.parameters?.fullHeight === true;
+
+      return React.createElement(
         'div',
         {
+          className: 'storybook-container',
           style: {
             backgroundColor: 'var(--app-background)',
             color: 'var(--app-primary-foreground)',
-            minHeight: '100px',
-            padding: '16px',
+            height: isFullHeight ? '100vh' : 'auto',
+            minHeight: isFullHeight ? '100vh' : '100px',
+            padding: isFullHeight ? '0' : '16px',
+            overflow: isFullHeight ? 'hidden' : 'visible',
           },
         },
         React.createElement(Story),
-      ),
+      );
+    },
   ],
+  // Set initial path to ChatViewer Playground
+  initialGlobals: {
+    backgrounds: { value: 'dark' },
+  },
 };
 
 export default preview;
diff --git a/packages/webui/README.md b/packages/webui/README.md
index 0558d6d4f..d69937b42 100644
--- a/packages/webui/README.md
+++ b/packages/webui/README.md
@@ -1,4 +1,4 @@
-# @anthropic/webui
+# @qwen-code/webui
 
 A shared React component library for Qwen Code applications, providing cross-platform UI components with consistent styling and behavior.
 
@@ -13,14 +13,14 @@ A shared React component library for Qwen Code applications, providing cross-pla
 ## Installation
 
 ```bash
-npm install @anthropic/webui
+npm install @qwen-code/webui
 ```
 
 ## Quick Start
 
 ```tsx
-import { Button, Input, Tooltip } from '@anthropic/webui';
-import { PlatformProvider } from '@anthropic/webui/context';
+import { Button, Input, Tooltip } from '@qwen-code/webui';
+import { PlatformProvider } from '@qwen-code/webui/context';
 
 function App() {
   return (
@@ -40,7 +40,7 @@ function App() {
 #### Button
 
 ```tsx
-import { Button } from '@anthropic/webui';
+import { Button } from '@qwen-code/webui';
 
 <Button variant="primary" size="md" loading={false}>
   Submit
@@ -59,7 +59,7 @@ import { Button } from '@anthropic/webui';
 #### Input
 
 ```tsx
-import { Input } from '@anthropic/webui';
+import { Input } from '@qwen-code/webui';
 
 <Input
   label="Email"
@@ -82,7 +82,7 @@ import { Input } from '@anthropic/webui';
 #### Tooltip
 
 ```tsx
-import { Tooltip } from '@anthropic/webui';
+import { Tooltip } from '@qwen-code/webui';
 
 <Tooltip content="Helpful tip">
   <span>Hover me</span>
@@ -92,7 +92,7 @@ import { Tooltip } from '@anthropic/webui';
 ### Icons
 
 ```tsx
-import { FileIcon, FolderIcon, CheckIcon } from '@anthropic/webui/icons';
+import { FileIcon, FolderIcon, CheckIcon } from '@qwen-code/webui/icons';
 
 <FileIcon size={16} className="text-gray-500" />;
 ```
@@ -126,7 +126,7 @@ Available icon categories:
 The Platform Context provides an abstraction layer for platform-specific capabilities:
 
 ```tsx
-import { PlatformProvider, usePlatform } from '@anthropic/webui/context';
+import { PlatformProvider, usePlatform } from '@qwen-code/webui/context';
 
 const platformContext = {
   postMessage: (message) => vscode.postMessage(message),
@@ -161,7 +161,7 @@ Use the shared Tailwind preset for consistent styling:
 ```js
 // tailwind.config.js
 module.exports = {
-  presets: [require('@anthropic/webui/tailwind.preset.cjs')],
+  presets: [require('@qwen-code/webui/tailwind.preset.cjs')],
   // your customizations
 };
 ```
diff --git a/packages/webui/docs/Adapter-README.md b/packages/webui/docs/Adapter-README.md
new file mode 100644
index 000000000..d8d7f7008
--- /dev/null
+++ b/packages/webui/docs/Adapter-README.md
@@ -0,0 +1,306 @@
+# Data Adapter Layer
+
+This document describes the data transformation flow between different data sources and the webui components.
+
+## Overview
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                           Data Sources                                       │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  ACP Protocol (vscode-ide-companion)    │    JSONL Files (ChatViewer)       │
+│  - Real-time streaming                  │    - Static file format            │
+│  - Session updates via WebSocket        │    - Array of messages             │
+└─────────────────────────┬───────────────┴──────────────────┬────────────────┘
+                          │                                   │
+                          ▼                                   ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                        Adapter Layer (normalize)                             │
+│  - ACPAdapter: ACP messages → UnifiedMessage                                │
+│  - JSONLAdapter: JSONL format → UnifiedMessage                              │
+└─────────────────────────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                        Unified Message Format                                │
+│  UnifiedMessage {                                                            │
+│    id: string                                                                │
+│    type: 'user' | 'assistant' | 'tool_call' | 'thinking'                    │
+│    timestamp: number                                                         │
+│    content?: string                                                          │
+│    toolCall?: ToolCallData                                                   │
+│    isFirst?: boolean  // timeline position                                   │
+│    isLast?: boolean   // timeline position                                   │
+│  }                                                                           │
+└─────────────────────────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                        WebUI Components                                      │
+│  - UserMessage                                                               │
+│  - AssistantMessage                                                          │
+│  - ThinkingMessage                                                           │
+│  - ToolCall (Read/Write/Edit/Shell/Search/...)                              │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+## Data Structures
+
+### 1. ACP Protocol Format (vscode-ide-companion)
+
+ACP messages come through WebSocket session updates:
+
+```typescript
+// Session update types
+type AcpSessionUpdate = {
+  sessionUpdate:
+    | 'user_message_chunk'
+    | 'agent_message_chunk'
+    | 'agent_thought_chunk'
+    | 'tool_call'
+    | 'tool_call_update';
+  content?: { text?: string };
+  toolCallId?: string;
+  kind?: string;
+  title?: string;
+  status?: string;
+  rawInput?: unknown;
+  locations?: Array<{ path: string; line?: number | null }>;
+};
+```
+
+**Flow:**
+
+1. `qwenSessionUpdateHandler.ts` receives ACP messages
+2. Converts to internal format and calls callbacks
+3. `WebViewProvider.ts` sends to webview
+4. `useToolCalls.ts` manages tool call state
+5. `App.tsx` combines into `allMessages` array
+
+### 2. JSONL Format (ChatViewer)
+
+Static JSON array with explicit message types:
+
+```typescript
+interface ChatMessageData {
+  uuid: string;
+  timestamp: string; // ISO timestamp
+  type: 'user' | 'assistant' | 'tool_call';
+  message?: {
+    role?: string;
+    parts?: Array<{ text: string }>; // Qwen format
+    content?: string; // Claude format
+  };
+  toolCall?: ToolCallData;
+}
+```
+
+### 3. ToolCallData (Shared)
+
+```typescript
+interface ToolCallData {
+  toolCallId: string;
+  kind: string; // 'read' | 'write' | 'edit' | 'bash' | 'grep' | ...
+  title: string | object;
+  status: 'pending' | 'in_progress' | 'completed' | 'failed';
+  rawInput?: string | object;
+  content?: ToolCallContent[];
+  locations?: Array<{ path: string; line?: number | null }>;
+}
+
+interface ToolCallContent {
+  type: 'content' | 'diff';
+  content?: { type: string; text?: string; error?: unknown };
+  path?: string;
+  oldText?: string | null;
+  newText?: string;
+}
+```
+
+## Adapter Implementation
+
+### ACPAdapter
+
+```typescript
+// packages/webui/src/adapters/ACPAdapter.ts
+
+import type { UnifiedMessage, ToolCallData } from './types';
+
+export interface ACPMessage {
+  type: 'message' | 'in-progress-tool-call' | 'completed-tool-call';
+  data: unknown;
+}
+
+export function adaptACPMessages(messages: ACPMessage[]): UnifiedMessage[] {
+  return messages.map((item, index, arr) => {
+    const prev = arr[index - 1];
+    const next = arr[index + 1];
+
+    // Calculate timeline position
+    const isUserMessage = (m: ACPMessage | undefined) =>
+      m?.type === 'message' && (m.data as any)?.role === 'user';
+    const isFirst = !prev || isUserMessage(prev);
+    const isLast = !next || isUserMessage(next);
+
+    switch (item.type) {
+      case 'message': {
+        const msg = item.data as {
+          role: string;
+          content: string;
+          timestamp?: number;
+        };
+        return {
+          id: `msg-${index}`,
+          type:
+            msg.role === 'user'
+              ? 'user'
+              : msg.role === 'thinking'
+                ? 'thinking'
+                : 'assistant',
+          timestamp: msg.timestamp || Date.now(),
+          content: msg.content,
+          isFirst,
+          isLast,
+        };
+      }
+
+      case 'in-progress-tool-call':
+      case 'completed-tool-call': {
+        const toolCall = item.data as ToolCallData;
+        return {
+          id: `tool-${toolCall.toolCallId}`,
+          type: 'tool_call',
+          timestamp: Date.now(),
+          toolCall,
+          isFirst,
+          isLast,
+        };
+      }
+
+      default:
+        throw new Error(`Unknown message type: ${item.type}`);
+    }
+  });
+}
+```
+
+### JSONLAdapter
+
+```typescript
+// packages/webui/src/adapters/JSONLAdapter.ts
+
+import type { UnifiedMessage, ChatMessageData } from './types';
+
+export function adaptJSONLMessages(
+  messages: ChatMessageData[],
+): UnifiedMessage[] {
+  // Sort by timestamp
+  const sorted = [...messages].sort(
+    (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+  );
+
+  return sorted.map((msg, index, arr) => {
+    const prev = arr[index - 1];
+    const next = arr[index + 1];
+
+    // User messages break the AI sequence
+    const isUserType = (m: ChatMessageData | undefined) =>
+      !m || m.type === 'user';
+    const isFirst = isUserType(prev);
+    const isLast = isUserType(next);
+
+    // Extract content from different formats
+    const extractContent = (message?: {
+      parts?: Array<{ text: string }>;
+      content?: string;
+    }) => {
+      if (!message) return '';
+      if (message.parts?.length) {
+        return message.parts.map((p) => p.text).join('');
+      }
+      return message.content || '';
+    };
+
+    return {
+      id: msg.uuid,
+      type:
+        msg.type === 'tool_call'
+          ? 'tool_call'
+          : msg.message?.role === 'thinking'
+            ? 'thinking'
+            : msg.type,
+      timestamp: new Date(msg.timestamp).getTime(),
+      content: extractContent(msg.message),
+      toolCall: msg.toolCall,
+      isFirst,
+      isLast,
+    };
+  });
+}
+```
+
+## Usage
+
+### In ChatViewer (JSONL)
+
+```tsx
+import { adaptJSONLMessages } from '../adapters/JSONLAdapter';
+
+const ChatViewer = ({ messages }: { messages: ChatMessageData[] }) => {
+  const unifiedMessages = useMemo(
+    () => adaptJSONLMessages(messages),
+    [messages],
+  );
+
+  return (
+    <div className="chat-viewer-messages">
+      {unifiedMessages.map((msg) => renderMessage(msg))}
+    </div>
+  );
+};
+```
+
+### In vscode-ide-companion (ACP)
+
+```tsx
+import { adaptACPMessages } from '@qwen-code/webui/adapters';
+
+const App = () => {
+  const { allMessages } = useWebViewMessages();
+
+  const unifiedMessages = useMemo(
+    () => adaptACPMessages(allMessages),
+    [allMessages],
+  );
+
+  return (
+    <div className="chat-messages">
+      {unifiedMessages.map((msg) => renderMessage(msg))}
+    </div>
+  );
+};
+```
+
+## Timeline Position Calculation
+
+The `isFirst` and `isLast` flags control timeline connector rendering:
+
+- **isFirst=true**: Line starts from bullet point (no line above)
+- **isLast=true**: Line ends at bullet point (no line below)
+- **Both true**: No timeline connector (single message)
+- **Both false**: Full height connector (middle of sequence)
+
+```
+User Message (no timeline)
+│
+├── Assistant Message [isFirst=true]
+│   │ (line starts here)
+├── Tool Call
+│   │
+├── Tool Call
+│   │
+├── Assistant Message [isLast=true]
+│   (line ends here)
+│
+User Message (no timeline)
+```
diff --git a/packages/webui/docs/WEBUI_MIGRATION_PLAN_ZH.md b/packages/webui/docs/WEBUI_MIGRATION_PLAN_ZH.md
deleted file mode 100644
index 1e46a3998..000000000
--- a/packages/webui/docs/WEBUI_MIGRATION_PLAN_ZH.md
+++ /dev/null
@@ -1,428 +0,0 @@
-# WebUI 组件库抽离计划
-
-## 一、背景与目标
-
-### 1.1 背景
-
-`packages/vscode-ide-companion` 是一个 VSCode 插件，其核心内容是一个 WebView 页面，大量 UI 部分由 React 组件提供。随着产品线扩展，越来越多的场景需要构建包含 Web UI 的产品：
-
-- **Chrome 浏览器扩展** - 侧边栏聊天界面
-- **Web 端聊天页面** - 纯 Web 应用
-- **对话分享页面** - 将对话渲染为静态 HTML
-
-对于优秀的软件工程架构，我们需要让 UI 做到统一且可复用。
-
-### 1.2 目标
-
-1. 将 `vscode-ide-companion/src/webview/` 中的组件抽离到独立的 `@qwen-code/webui` 包
-2. 建立分层架构：纯 UI 组件 + 业务 UI 组件
-3. 使用 Vite + Storybook 进行开发和组件展示
-4. 通过 Platform Context 抽象平台能力，实现跨平台复用
-5. 提供 Tailwind CSS 预设，保证多产品 UI 一致性
-
----
-
-## 二、现状分析
-
-### 2.1 当前代码结构
-
-`packages/vscode-ide-companion/src/webview/` 包含 77 个文件：
-
-```
-webview/
-├── App.tsx                    # 主入口
-├── components/
-│   ├── icons/                 # 8 个图标组件
-│   ├── layout/                # 8 个布局组件
-│   │   ├── ChatHeader.tsx
-│   │   ├── InputForm.tsx
-│   │   ├── SessionSelector.tsx
-│   │   ├── EmptyState.tsx
-│   │   ├── Onboarding.tsx
-│   │   └── ...
-│   ├── messages/              # 消息展示组件
-│   │   ├── UserMessage.tsx
-│   │   ├── Assistant/
-│   │   ├── MarkdownRenderer/
-│   │   ├── ThinkingMessage.tsx
-│   │   ├── Waiting/
-│   │   └── toolcalls/         # 16 个工具调用组件
-│   ├── PermissionDrawer/      # 权限请求抽屉
-│   └── Tooltip.tsx
-├── hooks/                     # 自定义 hooks
-├── handlers/                  # 消息处理器
-├── styles/                    # CSS 样式
-└── utils/                     # 工具函数
-```
-
-### 2.2 关键依赖分析
-
-**平台耦合点：**
-
-- `useVSCode` hook - 调用 `acquireVsCodeApi()` 进行消息通信
-- `handlers/` - 处理 VSCode 消息协议
-- 部分类型定义来自 `../types/` 目录
-
-```
-┌─────────────────────────────────────────────────────────┐
-│                    App.tsx (入口)                        │
-├─────────────────────────────────────────────────────────┤
-│  hooks/          │  handlers/       │  components/      │
-│  ├─useVSCode ◄───┼──────────────────┼──────────────────┤
-│  ├─useSession    │  ├─MessageRouter │  ├─icons/        │
-│  ├─useFileContext│  ├─AuthHandler   │  ├─layout/       │
-│  └─...           │  └─...           │  ├─messages/     │
-│                  │                  │  └─PermDrawer/   │
-├─────────────────────────────────────────────────────────┤
-│            VSCode API (acquireVsCodeApi)                │
-└─────────────────────────────────────────────────────────┘
-```
-
----
-
-## 三、目标架构
-
-### 3.1 分层架构设计
-
-```
-┌─────────────────────────────────────────────────────────┐
-│              Layer 3: Platform Adapters                 │
-│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐    │
-│  │VSCode Adapter│ │Chrome Adapter│ │ Web Adapter  │    │
-│  └──────┬───────┘ └──────┬───────┘ └──────┬───────┘    │
-├─────────┼────────────────┼────────────────┼────────────┤
-│         │                │                │             │
-│         ▼                ▼                ▼             │
-│  ┌─────────────────────────────────────────────────┐   │
-│  │           Platform Context Provider              │   │
-│  └─────────────────────────────────────────────────┘   │
-├─────────────────────────────────────────────────────────┤
-│              Layer 2: Chat Components                   │
-│  ┌────────────┐ ┌────────────┐ ┌────────────┐          │
-│  │ MessageList│ │ ChatHeader │ │ InputForm  │          │
-│  └────────────┘ └────────────┘ └────────────┘          │
-├─────────────────────────────────────────────────────────┤
-│              Layer 1: Primitives (纯 UI)                │
-│  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐          │
-│  │ Button │ │ Input  │ │ Icons  │ │Tooltip │          │
-│  └────────┘ └────────┘ └────────┘ └────────┘          │
-└─────────────────────────────────────────────────────────┘
-```
-
-### 3.2 Platform Context 设计
-
-```typescript
-// @qwen-code/webui/src/context/PlatformContext.ts
-interface PlatformContext {
-  // 消息通信
-  postMessage: (message: unknown) => void;
-  onMessage: (handler: (message: unknown) => void) => () => void;
-
-  // 文件操作
-  openFile?: (path: string) => void;
-  attachFile?: () => void;
-
-  // 认证
-  login?: () => void;
-
-  // 平台信息
-  platform: 'vscode' | 'chrome' | 'web' | 'share';
-}
-```
-
----
-
-## 四、技术方案
-
-### 4.1 构建配置（Vite Library Mode）
-
-**输出格式：**
-
-- ESM (`dist/index.js`) - 主要格式
-- CJS (`dist/index.cjs`) - 兼容性
-- TypeScript 声明 (`dist/index.d.ts`)
-
-```javascript
-// vite.config.ts
-export default defineConfig({
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'cjs'],
-      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`,
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom'],
-    },
-  },
-});
-```
-
-### 4.2 Tailwind 预设方案
-
-```javascript
-// @qwen-code/webui/tailwind.preset.js
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        'app-primary': 'var(--app-primary)',
-        'app-background': 'var(--app-primary-background)',
-        'app-foreground': 'var(--app-primary-foreground)',
-      },
-    },
-  },
-};
-
-// 消费方 tailwind.config.js
-module.exports = {
-  presets: [require('@qwen-code/webui/tailwind.preset')],
-  content: [
-    './src/**/*.{ts,tsx}',
-    './node_modules/@qwen-code/webui/dist/**/*.js',
-  ],
-};
-```
-
-### 4.3 Storybook 配置
-
-```
-packages/webui/
-├── .storybook/
-│   ├── main.ts      # Storybook 配置
-│   ├── preview.ts   # 全局装饰器
-│   └── manager.ts   # UI 配置
-└── src/
-    └── stories/     # Story 文件
-```
-
----
-
-## 五、组件迁移分类
-
-### 5.1 第一批：无依赖组件（可立即迁移）
-
-| 组件               | 来源路径                 | 复杂度 | 说明                 |
-| ------------------ | ------------------------ | ------ | -------------------- |
-| Icons              | `components/icons/`      | 低     | 8 个图标组件，纯 SVG |
-| Tooltip            | `components/Tooltip.tsx` | 低     | 纯 UI                |
-| WaitingMessage     | `messages/Waiting/`      | 低     | 加载状态展示         |
-| InterruptedMessage | `messages/Waiting/`      | 低     | 中断状态展示         |
-
-### 5.2 第二批：轻度依赖组件（需要抽象 props）
-
-| 组件             | 来源路径                       | 依赖        | 改造方式        |
-| ---------------- | ------------------------------ | ----------- | --------------- |
-| UserMessage      | `messages/UserMessage.tsx`     | onFileClick | 通过 props 注入 |
-| AssistantMessage | `messages/Assistant/`          | onFileClick | 通过 props 注入 |
-| ThinkingMessage  | `messages/ThinkingMessage.tsx` | onFileClick | 通过 props 注入 |
-| MarkdownRenderer | `messages/MarkdownRenderer/`   | 无          | 直接迁移        |
-| EmptyState       | `layout/EmptyState.tsx`        | 无          | 直接迁移        |
-| ChatHeader       | `layout/ChatHeader.tsx`        | callbacks   | 通过 props 注入 |
-
-### 5.3 第三批：中度依赖组件（需要 Context）
-
-| 组件             | 来源路径                     | 依赖           | 改造方式        |
-| ---------------- | ---------------------------- | -------------- | --------------- |
-| InputForm        | `layout/InputForm.tsx`       | 多个 callbacks | Context + Props |
-| SessionSelector  | `layout/SessionSelector.tsx` | session 数据   | Props 注入      |
-| CompletionMenu   | `layout/CompletionMenu.tsx`  | items 数据     | Props 注入      |
-| PermissionDrawer | `PermissionDrawer/`          | 回调函数       | Context + Props |
-| ToolCall 组件    | `messages/toolcalls/`        | 多种工具展示   | 分模块迁移      |
-
-### 5.4 第四批：重度依赖（保留在平台包）
-
-| 组件/模块  | 说明                     |
-| ---------- | ------------------------ |
-| App.tsx    | 总入口，包含业务编排逻辑 |
-| hooks/     | 大部分需要平台适配       |
-| handlers/  | VSCode 消息处理          |
-| Onboarding | 认证相关，平台特定       |
-
----
-
-## 六、渐进式迁移策略
-
-### 6.1 迁移原则
-
-1. **双向兼容**：迁移期间，vscode-ide-companion 可以同时从 webui 和本地导入
-2. **逐个替换**：每迁移一个组件，在 VSCode 插件中替换导入路径并验证
-3. **不破坏现有功能**：确保每次迁移后插件可正常构建和运行
-
-### 6.2 迁移流程
-
-```
-开发者 ──► @qwen-code/webui ──► vscode-ide-companion
-  │              │                      │
-  │   1. 复制组件到 webui               │
-  │   2. 添加 Story 验证                │
-  │   3. 从 index.ts 导出               │
-  │              │                      │
-  │              └──────────────────────┤
-  │                                     │
-  │                      4. 更新 import 路径
-  │                      5. 删除原组件文件
-  │                      6. 构建测试验证
-```
-
-### 6.3 示例：迁移 Icons
-
-```typescript
-// Before: vscode-ide-companion/src/webview/components/icons/index.ts
-export { FileIcon } from './FileIcons.js';
-
-// After: 修改导入
-import { FileIcon } from '@qwen-code/webui';
-// 或 import { FileIcon } from '@qwen-code/webui/icons';
-```
-
----
-
-## 七、任务拆分
-
-### Phase 0: 基础设施搭建（前置任务）
-
-- [ ] **T0-1**: Vite 构建配置
-- [ ] **T0-2**: Storybook 配置
-- [ ] **T0-3**: Tailwind 预设创建
-- [ ] **T0-4**: Platform Context 定义
-- [ ] **T0-5**: 类型定义迁移（共享 types）
-
-### Phase 1: 纯 UI 组件迁移
-
-- [ ] **T1-1**: Icons 组件迁移（8 个文件）
-- [ ] **T1-2**: Tooltip 组件迁移
-- [ ] **T1-3**: WaitingMessage / InterruptedMessage 迁移
-- [ ] **T1-4**: 基础 Button/Input 组件完善
-
-### Phase 2: 消息组件迁移
-
-- [ ] **T2-1**: MarkdownRenderer 迁移
-- [ ] **T2-2**: UserMessage 迁移
-- [ ] **T2-3**: AssistantMessage 迁移
-- [ ] **T2-4**: ThinkingMessage 迁移
-
-### Phase 3: 布局组件迁移
-
-- [ ] **T3-1**: ChatHeader 迁移
-- [ ] **T3-2**: EmptyState 迁移
-- [ ] **T3-3**: InputForm 迁移（需要 Context）
-- [ ] **T3-4**: SessionSelector 迁移
-- [ ] **T3-5**: CompletionMenu 迁移
-
-### Phase 4: 复杂组件迁移
-
-- [ ] **T4-1**: PermissionDrawer 迁移
-- [ ] **T4-2**: ToolCall 系列组件迁移（16 个文件）
-
-### Phase 5: 平台适配器
-
-- [ ] **T5-1**: VSCode Adapter 实现
-- [ ] **T5-2**: Chrome Extension Adapter
-- [ ] **T5-3**: Web/Share Page Adapter
-
----
-
-## 八、风险与注意事项
-
-### 8.1 常见坑点
-
-1. **Tailwind 类名 Tree Shaking**
-   - 问题：组件库打包后 Tailwind 类名可能被移除
-   - 解决：消费方的 `content` 配置需要包含 `node_modules/@qwen-code/webui`
-
-2. **CSS 变量作用域**
-   - 问题：`var(--app-primary)` 等变量需要在消费方定义
-   - 解决：提供默认 CSS 变量文件，或在 Tailwind 预设中定义 fallback
-
-3. **React 版本兼容**
-   - 当前 vscode-ide-companion 使用 React 19，webui 的 peerDependencies 是 React 18
-   - 需要更新 peerDependencies 为 `"react": "^18.0.0 || ^19.0.0"`
-
-4. **ESM/CJS 兼容**
-   - VSCode 扩展可能需要 CJS 格式
-   - Vite 需要配置双格式输出
-
-### 8.2 业界参考
-
-- **Radix UI**: 纯 Headless 组件，样式完全由消费方控制
-- **shadcn/ui**: 复制组件到项目中，而非作为依赖引入
-- **Ant Design**: 完整的组件库，通过 ConfigProvider 进行定制
-
-### 8.3 验收标准
-
-每个迁移任务完成后需要：
-
-1. 组件有对应的 Storybook Story
-2. vscode-ide-companion 中的导入已更新
-3. 插件可正常构建 (`npm run build:vscode`)
-4. 插件功能正常（手动测试或已有测试通过）
-
----
-
-## 九、预估时间
-
-| 阶段    | 任务数 | 预估人天 | 可并行     |
-| ------- | ------ | -------- | ---------- |
-| Phase 0 | 5      | 2-3 天   | 部分可并行 |
-| Phase 1 | 4      | 1-2 天   | 全部可并行 |
-| Phase 2 | 4      | 2-3 天   | 全部可并行 |
-| Phase 3 | 5      | 3-4 天   | 部分可并行 |
-| Phase 4 | 2      | 3-4 天   | 可并行     |
-| Phase 5 | 3      | 2-3 天   | 可并行     |
-
-**总计**：约 13-19 人天（单人顺序执行），如果多人并行可缩短至 1-2 周
-
----
-
-## 十、开发与调试流程
-
-### 10.1 组件开发流程
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│                       开发工作流程                                │
-├─────────────────────────────────────────────────────────────────┤
-│                                                                  │
-│  1. 开发/修改组件                                                 │
-│     └── 在 @qwen-code/webui/src/ 中编辑文件                      │
-│                                                                  │
-│  2. 使用 Storybook 调试                                          │
-│     └── npm run storybook (端口 6006)                            │
-│     └── 独立查看组件                                              │
-│     └── 测试不同的 props/状态                                     │
-│                                                                  │
-│  3. 构建组件库                                                    │
-│     └── npm run build                                            │
-│     └── 输出: dist/index.js, dist/index.cjs, dist/index.d.ts    │
-│                                                                  │
-│  4. 在 VSCode 插件中使用                                          │
-│     └── import { Component } from '@qwen-code/webui'             │
-│     └── vscode-ide-companion 中不再修改 UI 代码                   │
-│                                                                  │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-### 10.2 调试命令
-
-```bash
-# 启动 Storybook 进行组件开发
-cd packages/webui
-npm run storybook
-
-# 监听模式进行库开发
-npm run dev
-
-# 构建生产版本
-npm run build
-
-# 类型检查
-npm run typecheck
-```
-
-### 10.3 核心原则
-
-1. **单一数据源**: 所有 UI 组件都在 `@qwen-code/webui` 中
-2. **Storybook 优先**: 在集成前先在 Storybook 中调试和验证组件
-3. **消费方不修改 UI 代码**: `vscode-ide-companion` 只导入和使用组件
-4. **平台抽象**: 使用 `PlatformContext` 处理平台特定行为
diff --git a/packages/webui/docs/WEBUI_PLATFORM_ADAPTER_GUIDE.md b/packages/webui/docs/WEBUI_PLATFORM_ADAPTER_GUIDE.md
new file mode 100644
index 000000000..6dadf6ecf
--- /dev/null
+++ b/packages/webui/docs/WEBUI_PLATFORM_ADAPTER_GUIDE.md
@@ -0,0 +1,122 @@
+## WebUI Platform Adapter Guide (Chrome / Web / Share)
+
+This guide is for extending `@qwen-code/webui` to new runtime platforms (e.g., Chrome Extension, pure Web pages, Share pages).
+
+For VSCode adapter implementation reference, see:
+`packages/vscode-ide-companion/src/webview/context/VSCodePlatformProvider.tsx`
+
+---
+
+### 1. Core Goals
+
+- Reuse WebUI **without modifying UI components**.
+- Inject platform capabilities via `PlatformProvider` (messaging, files, login, clipboard, etc.).
+- Provide **fallback solutions** or mark `features` for missing capabilities.
+
+---
+
+### 2. PlatformContext Key Points (Minimum Implementation)
+
+Required fields:
+
+- `platform`: `'chrome' | 'web' | 'share'`
+- `postMessage`: Send messages to host
+- `onMessage`: Subscribe to host messages
+
+Optional capabilities (by platform support):
+
+- `openFile`
+- `openDiff`
+- `openTempFile`
+- `attachFile`
+- `login`
+- `copyToClipboard`
+- `getResourceUrl`
+- `features` (mark capability availability)
+
+Type definitions location:
+`packages/webui/src/context/PlatformContext.tsx`
+
+---
+
+### 3. Adaptation Steps (Recommended Flow)
+
+1. **Set up message channel**
+   - Chrome Extension: `chrome.runtime.sendMessage` + `chrome.runtime.onMessage`
+   - Web/Share: `window.postMessage` + `message` event, or custom event bus
+
+2. **Implement PlatformProvider**
+   - Map platform APIs to `PlatformContextValue`
+   - Return `undefined` for missing capabilities and set `features`
+
+3. **Application entry integration**
+   - Wrap with `<PlatformProvider value={platformValue}>` at platform entry
+   - Ensure all UI components are within the Provider
+
+4. **Styles and themes**
+   - Import `@qwen-code/webui/styles.css`
+   - Define CSS variables on platform side (can copy initial values from `packages/webui/src/styles/variables.css`)
+
+5. **Build and dependencies**
+   - Tailwind uses `@qwen-code/webui/tailwind.preset`
+   - `content` must include `node_modules/@qwen-code/webui/dist/**/*.js`
+
+6. **Feature validation**
+   - Message send/receive works (`postMessage`/`onMessage`)
+   - Clicking file/diff output doesn't throw errors (can fallback)
+   - `@`/`/` completion and input box interactions work
+
+---
+
+### 4. Reference Implementation (Web Platform Example)
+
+```tsx
+import type React from 'react';
+import { PlatformProvider } from '@qwen-code/webui';
+import type { PlatformContextValue } from '@qwen-code/webui';
+
+const platformValue: PlatformContextValue = {
+  platform: 'web',
+  postMessage: (message) => {
+    window.postMessage(message, '*');
+  },
+  onMessage: (handler) => {
+    const listener = (event: MessageEvent) => handler(event.data);
+    window.addEventListener('message', listener);
+    return () => window.removeEventListener('message', listener);
+  },
+  copyToClipboard: async (text) => navigator.clipboard.writeText(text),
+  features: {
+    canCopy: true,
+  },
+};
+
+export const WebPlatformProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <PlatformProvider value={platformValue}>{children}</PlatformProvider>;
+```
+
+---
+
+### 5. Chrome Extension Suggested Mapping
+
+- `postMessage` -> `chrome.runtime.sendMessage`
+- `onMessage` -> `chrome.runtime.onMessage.addListener`
+- `openFile`/`openDiff` -> Trigger background script to open tab / side panel
+- `attachFile` -> `chrome.tabs` or `<input type="file">`
+
+---
+
+### 6. Web/Share Scenario Fallback Strategies
+
+- `openFile/openDiff`: Display content in new window/modal
+- `openTempFile`: Generate `Blob` and open or download
+- `login`: Redirect to login URL or popup login window
+
+---
+
+### 7. Common Pitfalls
+
+- Tailwind styles not working: `content` missing `@qwen-code/webui`
+- Theme colors not working: `styles.css` not loaded or CSS variables not set
+- `postMessage` no response: Host side hasn't registered corresponding message channel
diff --git a/packages/webui/docs/WEBUI_PLATFORM_ADAPTER_GUIDE_ZH.md b/packages/webui/docs/WEBUI_PLATFORM_ADAPTER_GUIDE_ZH.md
deleted file mode 100644
index 3be71a22b..000000000
--- a/packages/webui/docs/WEBUI_PLATFORM_ADAPTER_GUIDE_ZH.md
+++ /dev/null
@@ -1,121 +0,0 @@
-## WebUI 平台适配指引（Chrome / Web / Share）
-
-本指引用于后续扩展 `@qwen-code/webui` 到新的运行平台（例如 Chrome 扩展、纯 Web 页、分享页）。
-VSCode 的适配实现可参考：
-`packages/vscode-ide-companion/src/webview/context/VSCodePlatformProvider.tsx`
-
----
-
-### 1. 核心目标
-
-- 在 **不改 UI 组件** 的前提下复用 WebUI。
-- 用 `PlatformProvider` 注入平台能力（消息、文件、登录、剪贴板等）。
-- 针对缺失能力，提供**降级方案**或标记 `features`。
-
----
-
-### 2. PlatformContext 要点（最小实现）
-
-必需字段：
-
-- `platform`: `'chrome' | 'web' | 'share'`
-- `postMessage`: 发送消息到宿主
-- `onMessage`: 订阅宿主消息
-
-可选能力（按平台支持）：
-
-- `openFile`
-- `openDiff`
-- `openTempFile`
-- `attachFile`
-- `login`
-- `copyToClipboard`
-- `getResourceUrl`
-- `features`（标记能力可用性）
-
-类型定义位置：
-`packages/webui/src/context/PlatformContext.tsx`
-
----
-
-### 3. 适配步骤（建议流程）
-
-1. **搭建消息通道**
-   - Chrome 扩展：`chrome.runtime.sendMessage` + `chrome.runtime.onMessage`
-   - Web/Share：`window.postMessage` + `message` 事件，或自定义事件总线
-
-2. **实现 PlatformProvider**
-   - 将平台 API 映射到 `PlatformContextValue`
-   - 缺失能力返回 `undefined`，并设置 `features`
-
-3. **应用入口接入**
-   - 在平台入口包裹 `<PlatformProvider value={platformValue}>`
-   - 确保所有 UI 组件处于 Provider 内
-
-4. **样式与主题**
-   - 引入 `@qwen-code/webui/styles.css`
-   - 在平台侧定义 CSS 变量（可从 `packages/webui/src/styles/variables.css` 复制初始值）
-
-5. **构建与依赖**
-   - Tailwind 使用 `@qwen-code/webui/tailwind.preset`
-   - `content` 需要包含 `node_modules/@qwen-code/webui/dist/**/*.js`
-
-6. **功能验收**
-   - 消息收发正常（`postMessage`/`onMessage`）
-   - 点击文件/差异输出不报错（可降级）
-   - `@`/`/` 补全与输入框交互正常
-
----
-
-### 4. 参考实现（Web 平台示例）
-
-```tsx
-import type React from 'react';
-import { PlatformProvider } from '@qwen-code/webui';
-import type { PlatformContextValue } from '@qwen-code/webui';
-
-const platformValue: PlatformContextValue = {
-  platform: 'web',
-  postMessage: (message) => {
-    window.postMessage(message, '*');
-  },
-  onMessage: (handler) => {
-    const listener = (event: MessageEvent) => handler(event.data);
-    window.addEventListener('message', listener);
-    return () => window.removeEventListener('message', listener);
-  },
-  copyToClipboard: async (text) => navigator.clipboard.writeText(text),
-  features: {
-    canCopy: true,
-  },
-};
-
-export const WebPlatformProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => <PlatformProvider value={platformValue}>{children}</PlatformProvider>;
-```
-
----
-
-### 5. Chrome 扩展建议映射
-
-- `postMessage` -> `chrome.runtime.sendMessage`
-- `onMessage` -> `chrome.runtime.onMessage.addListener`
-- `openFile`/`openDiff` -> 触发 background 脚本打开 tab / side panel
-- `attachFile` -> `chrome.tabs` 或 `<input type="file">`
-
----
-
-### 6. Web/Share 场景的降级策略
-
-- `openFile/openDiff`：用新窗口/模态框展示内容
-- `openTempFile`：生成 `Blob` 并打开或下载
-- `login`：跳转到登录 URL 或弹出登录窗口
-
----
-
-### 7. 常见坑
-
-- Tailwind 样式未生效：`content` 缺少 `@qwen-code/webui`
-- 主题色失效：未加载 `styles.css` 或未设置 CSS 变量
-- `postMessage` 无响应：宿主侧未注册对应消息通道
diff --git a/packages/webui/example/ExampleComponent.tsx b/packages/webui/example/ExampleComponent.tsx
deleted file mode 100644
index c554f2b6a..000000000
--- a/packages/webui/example/ExampleComponent.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Example of how to use shared UI components
-// This would typically be integrated into existing components
-
-import React, { useState } from 'react';
-import {
-  Button,
-  Input,
-  Message,
-  PermissionDrawer,
-  Tooltip,
-} from '@qwen-code/webui';
-
-const ExampleComponent: React.FC = () => {
-  const [inputValue, setInputValue] = useState('');
-  const [showPermissionDrawer, setShowPermissionDrawer] = useState(false);
-
-  const handleConfirmPermission = () => {
-    console.log('Permissions confirmed');
-    setShowPermissionDrawer(false);
-  };
-
-  return (
-    <div className="p-4">
-      <h2 className="text-lg font-bold mb-4">Shared Components Demo</h2>
-
-      {/* Example of using shared Button component */}
-      <div className="mb-4">
-        <Button
-          variant="primary"
-          size="md"
-          onClick={() => setShowPermissionDrawer(true)}
-        >
-          Show Permission Drawer
-        </Button>
-      </div>
-
-      {/* Example of using shared Input component */}
-      <div className="mb-4">
-        <Input
-          value={inputValue}
-          onChange={setInputValue}
-          placeholder="Type something..."
-        />
-      </div>
-
-      {/* Example of using shared Message component */}
-      <div className="mb-4">
-        <Message
-          id="demo-message"
-          content="This is a shared message component"
-          sender="system"
-          timestamp={new Date()}
-        />
-      </div>
-
-      {/* Example of using shared Tooltip component */}
-      <div className="mb-4">
-        <Tooltip content="This is a helpful tooltip" position="top">
-          <Button variant="secondary">Hover for tooltip</Button>
-        </Tooltip>
-      </div>
-
-      {/* Example of using shared PermissionDrawer component */}
-      <PermissionDrawer
-        isOpen={showPermissionDrawer}
-        onClose={() => setShowPermissionDrawer(false)}
-        onConfirm={handleConfirmPermission}
-        permissions={[
-          'Access browser history',
-          'Read current page',
-          'Capture screenshots',
-        ]}
-      />
-    </div>
-  );
-};
-
-export default ExampleComponent;
diff --git a/packages/webui/src/components/PermissionDrawer.css b/packages/webui/src/components/PermissionDrawer.css
new file mode 100644
index 000000000..734676905
--- /dev/null
+++ b/packages/webui/src/components/PermissionDrawer.css
@@ -0,0 +1,249 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * PermissionDrawer component styles
+ * These classes can be used instead of inline styles
+ */
+
+/* Permission Request Card */
+.permission-request-card {
+  background: var(--app-input-background);
+  border: 1px solid var(--app-primary, #3b82f6);
+  border-radius: var(--app-radius-md, 6px);
+  margin: var(--app-spacing-medium, 8px) 0;
+  margin-bottom: var(--app-spacing-lg, 16px);
+  overflow: visible;
+  animation: fadeIn 0.2s ease-in;
+}
+
+.permission-card-body {
+  padding: var(--app-spacing-lg, 12px);
+  min-height: fit-content;
+  height: auto;
+}
+
+.permission-header {
+  display: flex;
+  align-items: center;
+  gap: var(--app-spacing-lg, 12px);
+  margin-bottom: var(--app-spacing-lg, 12px);
+}
+
+.permission-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: var(--app-radius-md, 6px);
+  flex-shrink: 0;
+}
+
+.permission-icon {
+  font-size: 20px;
+}
+
+.permission-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.permission-title {
+  font-weight: 600;
+  color: var(--app-primary-foreground);
+  margin-bottom: 2px;
+}
+
+.permission-subtitle {
+  font-size: 12px;
+  color: var(--app-secondary-foreground);
+}
+
+.permission-command-section {
+  margin-bottom: var(--app-spacing-lg, 12px);
+}
+
+.permission-command-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--app-secondary-foreground);
+  margin-bottom: var(--app-spacing-sm, 4px);
+  text-transform: uppercase;
+}
+
+.permission-command-code {
+  display: block;
+  font-family: var(--app-font-mono);
+  font-size: var(--app-monospace-font-size, 13px);
+  color: var(--app-primary-foreground);
+  background: var(--app-primary-background);
+  padding: var(--app-spacing-medium, 8px);
+  border-radius: var(--app-radius-sm, 4px);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.permission-locations-section {
+  margin-bottom: var(--app-spacing-lg, 12px);
+}
+
+.permission-locations-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--app-secondary-foreground);
+  margin-bottom: var(--app-spacing-sm, 4px);
+  text-transform: uppercase;
+}
+
+.permission-location-item {
+  display: flex;
+  align-items: center;
+  gap: var(--app-spacing-sm, 4px);
+  padding: var(--app-spacing-sm, 4px) 0;
+  font-size: 12px;
+}
+
+.permission-location-icon {
+  flex-shrink: 0;
+}
+
+.permission-location-path {
+  color: var(--app-primary-foreground);
+  font-family: var(--app-font-mono);
+}
+
+.permission-location-line {
+  color: var(--app-secondary-foreground);
+}
+
+.permission-options-section {
+  margin-top: var(--app-spacing-lg, 12px);
+}
+
+.permission-options-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--app-primary-foreground);
+  margin-bottom: var(--app-spacing-medium, 8px);
+}
+
+.permission-options-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--app-spacing-sm, 4px);
+}
+
+.permission-option {
+  display: flex;
+  align-items: center;
+  gap: var(--app-spacing-medium, 8px);
+  padding: var(--app-spacing-medium, 8px) var(--app-spacing-lg, 12px);
+  background: var(--app-primary-background);
+  border: 1px solid var(--app-input-border);
+  border-radius: var(--app-radius-sm, 4px);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.permission-option:hover {
+  background: var(--app-list-hover-background);
+  border-color: var(--app-primary, #3b82f6);
+}
+
+.permission-option.selected {
+  border-color: var(--app-primary, #3b82f6);
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.permission-radio {
+  flex-shrink: 0;
+}
+
+.permission-option-content {
+  display: flex;
+  align-items: center;
+  gap: var(--app-spacing-sm, 4px);
+  flex: 1;
+}
+
+.permission-option-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--app-secondary-foreground);
+  background-color: var(--app-list-hover-background);
+  border-radius: 4px;
+  margin-right: 4px;
+}
+
+.permission-option.selected .permission-option-number {
+  color: white;
+  background-color: var(--app-primary, #3b82f6);
+}
+
+.permission-always-badge {
+  font-size: 12px;
+}
+
+.permission-no-options {
+  text-align: center;
+  padding: var(--app-spacing-lg, 12px);
+  color: var(--app-secondary-foreground);
+}
+
+.permission-actions {
+  margin-top: var(--app-spacing-lg, 12px);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.permission-confirm-button {
+  padding: var(--app-spacing-medium, 8px) var(--app-spacing-lg, 16px);
+  background: var(--app-primary, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: var(--app-radius-sm, 4px);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+
+.permission-confirm-button:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.permission-confirm-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.permission-success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--app-spacing-medium, 8px);
+  padding: var(--app-spacing-lg, 12px);
+  background: rgba(16, 185, 129, 0.1);
+  border-radius: var(--app-radius-sm, 4px);
+  margin-top: var(--app-spacing-lg, 12px);
+}
+
+.permission-success-icon {
+  color: var(--app-success, #10b981);
+  font-weight: bold;
+}
+
+.permission-success-text {
+  color: var(--app-success, #10b981);
+  font-size: 13px;
+}