diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f341d4..c8565c9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -42,5 +42,18 @@
     ".ktmage/instructions": true,
     ".ktmage/project/instructions": true
   },
-  "chat.agent.maxRequests": 100
+  "chat.agent.maxRequests": 100,
+  "accessibility.signalOptions.volume": 70,
+  "accessibility.signals.chatEditModifiedFile": {
+    "sound": "on"
+  },
+  "accessibility.signals.chatRequestSent": {
+    "sound": "on"
+  },
+  "accessibility.signals.chatResponseReceived": {
+    "sound": "on"
+  },
+  "accessibility.signals.chatUserActionRequired": {
+    "sound": "on"
+  }
 }
diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index c12e4d0..b834a50 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -95,6 +95,28 @@ SOFTWARE.
 
 ---
 
+## DOMPurify
+
+- **Version:** 3.3.1
+- **License:** Apache-2.0 OR MPL-2.0 (distributed under Apache-2.0)
+- **Source:** https://github.com/cure53/DOMPurify
+
+Copyright 2025 Dr.-Ing. Mario Heiderich, Cure53
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+---
+
 ## Marked
 
 - **Version:** 17.0.3
diff --git a/package-lock.json b/package-lock.json
index ac45229..114a42b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
-        "@opencode-ai/sdk": "^1.2.10"
+        "@opencode-ai/sdk": "^1.2.10",
+        "@types/dompurify": "^3.0.5",
+        "dompurify": "^3.3.1"
       },
       "devDependencies": {
-        "@biomejs/biome": "^2.4.4",
+        "@biomejs/biome": "2.4.4",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
@@ -2245,6 +2247,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2299,6 +2310,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@types/vscode": {
       "version": "1.109.0",
       "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.109.0.tgz",
@@ -3533,6 +3550,15 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
diff --git a/package.json b/package.json
index bbc82e9..33ea5e7 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,8 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@opencode-ai/sdk": "^1.2.10"
+    "@opencode-ai/sdk": "^1.2.10",
+    "@types/dompurify": "^3.0.5",
+    "dompurify": "^3.3.1"
   }
 }
diff --git a/vitest.config.ts b/vitest.config.ts
index f19162e..0d2b4b4 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -7,7 +7,12 @@ export default defineConfig({
     environment: "jsdom",
     root: "webview",
     setupFiles: ["./__tests__/setup.ts"],
-    include: ["./__tests__/**/*.test.tsx"],
+    include: ["./__tests__/**/*.test.{ts,tsx}"],
     globals: true,
+    css: {
+      modules: {
+        classNameStrategy: "non-scoped",
+      },
+    },
   },
 });
diff --git a/webview/App.tsx b/webview/App.tsx
index f7eed0f..9f01436 100644
--- a/webview/App.tsx
+++ b/webview/App.tsx
@@ -1,36 +1,34 @@
-import type { Event, Message, Part, Permission, Provider, Session } from "@opencode-ai/sdk";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ChatHeader } from "./components/ChatHeader";
-import { EmptyState } from "./components/EmptyState";
-import { InputArea } from "./components/InputArea";
-import { MessagesArea } from "./components/MessagesArea";
-import { SessionList } from "./components/SessionList";
-import { TodoHeader } from "./components/TodoHeader";
-import type { TodoItem } from "./components/ToolPartView";
-import { parseTodos } from "./components/ToolPartView";
-import type { LocaleSetting } from "./locales";
-import { getStrings, LocaleProvider, resolveLocale } from "./locales";
-import type { AllProvidersData, ExtToWebviewMessage, FileAttachment } from "./vscode-api";
-import { getPersistedState, postMessage, setPersistedState } from "./vscode-api";
+import type { Event } from "@opencode-ai/sdk";
+import { useCallback, useEffect, useState } from "react";
+import { EmptyState } from "./components/molecules/EmptyState";
+import { TodoHeader } from "./components/molecules/TodoHeader";
+import { ChatHeader } from "./components/organisms/ChatHeader";
+import { InputArea } from "./components/organisms/InputArea";
+import { MessagesArea } from "./components/organisms/MessagesArea";
+import { SessionList } from "./components/organisms/SessionList";
+import { AppContextProvider, type AppContextValue } from "./contexts/AppContext";
+import { useLocale } from "./hooks/useLocale";
+import { useMessages } from "./hooks/useMessages";
+import { usePermissions } from "./hooks/usePermissions";
+import { useProviders } from "./hooks/useProviders";
+import { useSession } from "./hooks/useSession";
+import { LocaleProvider } from "./locales";
+import type { ExtToWebviewMessage, FileAttachment } from "./vscode-api";
+import { postMessage } from "./vscode-api";
 
-export type MessageWithParts = { info: Message; parts: Part[] };
+// re-export for consumers that import from App.tsx
+export type { MessageWithParts } from "./hooks/useMessages";
 
 export function App() {
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [activeSession, setActiveSession] = useState<Session | null>(null);
-  const [messages, setMessages] = useState<MessageWithParts[]>([]);
-  const [showSessionList, setShowSessionList] = useState(false);
-  const [sessionBusy, setSessionBusy] = useState(false);
-  // パーミッションリクエストを messageID でグルーピングして管理する
-  const [permissions, setPermissions] = useState<Map<string, Permission>>(new Map());
-  const [providers, setProviders] = useState<Provider[]>([]);
-  const [allProvidersData, setAllProvidersData] = useState<AllProvidersData | null>(null);
-  const [selectedModel, setSelectedModel] = useState<{ providerID: string; modelID: string } | null>(null);
+  const session = useSession();
+  const msg = useMessages();
+  const prov = useProviders();
+  const perm = usePermissions();
+  const locale = useLocale();
+
+  // Extension Host → Webview メッセージでのみ更新される単純なステート
   const [openEditors, setOpenEditors] = useState<FileAttachment[]>([]);
   const [workspaceFiles, setWorkspaceFiles] = useState<FileAttachment[]>([]);
-  // チェックポイントからの復元時にテキストを入力欄にプリフィルするためのステート
-  const [prefillText, setPrefillText] = useState("");
-  // 設定パネル用のステート
   const [openCodePaths, setOpenCodePaths] = useState<{
     home: string;
     config: string;
@@ -38,151 +36,55 @@ export function App() {
     directory: string;
   } | null>(null);
 
-  // ロケール管理
-  const [localeSetting, setLocaleSetting] = useState<LocaleSetting>(
-    () => (getPersistedState()?.localeSetting as LocaleSetting) ?? "auto",
-  );
-  const [vscodeLanguage, setVscodeLanguage] = useState("en");
-  const resolvedLocale = useMemo(() => resolveLocale(localeSetting, vscodeLanguage), [localeSetting, vscodeLanguage]);
-  const strings = useMemo(() => getStrings(resolvedLocale), [resolvedLocale]);
-
-  const handleLocaleSettingChange = useCallback((setting: LocaleSetting) => {
-    setLocaleSetting(setting);
-    setPersistedState({ ...getPersistedState(), localeSetting: setting });
+  const handleOpenConfigFile = useCallback((filePath: string) => {
+    postMessage({ type: "openConfigFile", filePath });
   }, []);
 
-  // messages から StepFinishPart のトークン使用量を導出する（圧縮でメッセージが減ると自動的に反映される）
-  const inputTokens = useMemo(() => {
-    let total = 0;
-    for (const m of messages) {
-      for (const p of m.parts) {
-        if (p.type === "step-finish" && p.tokens) {
-          total += p.tokens.input;
-        }
-      }
-    }
-    return total;
-  }, [messages]);
-
-  // 選択中のモデルのコンテキストリミットを算出
-  const contextLimit = useMemo(() => {
-    if (!selectedModel) return 0;
-    const provider = providers.find((p) => p.id === selectedModel.providerID);
-    if (!provider) return 0;
-    const model = provider.models[selectedModel.modelID];
-    return model?.limit?.context ?? 0;
-  }, [providers, selectedModel]);
-
-  const handleEvent = useCallback((event: Event) => {
-    switch (event.type) {
-      case "message.updated": {
-        const info = event.properties.info;
-        setMessages((prev) => {
-          const idx = prev.findIndex((m) => m.info.id === info.id);
-          if (idx >= 0) {
-            const updated = [...prev];
-            updated[idx] = { ...updated[idx], info };
-            return updated;
-          }
-          return [...prev, { info, parts: [] }];
-        });
-        break;
-      }
-      case "message.part.updated": {
-        const part = event.properties.part;
-        setMessages((prev) => {
-          const idx = prev.findIndex((m) => m.info.id === part.messageID);
-          if (idx < 0) return prev;
-          const updated = [...prev];
-          const msg = { ...updated[idx] };
-          const partIdx = msg.parts.findIndex((p) => p.id === part.id);
-          if (partIdx >= 0) {
-            msg.parts = [...msg.parts];
-            msg.parts[partIdx] = part;
-          } else {
-            msg.parts = [...msg.parts, part];
-          }
-          updated[idx] = msg;
-          return updated;
-        });
-        break;
-      }
-      case "session.status": {
-        setSessionBusy(event.properties.status.type === "busy");
-        break;
-      }
-      case "permission.updated": {
-        const permission = event.properties;
-        setPermissions((prev) => {
-          const next = new Map(prev);
-          next.set(permission.id, permission);
-          return next;
-        });
-        break;
-      }
-      case "permission.replied": {
-        const permissionID = event.properties.permissionID;
-        setPermissions((prev) => {
-          const next = new Map(prev);
-          next.delete(permissionID);
-          return next;
-        });
-        break;
-      }
-      case "message.removed": {
-        // 圧縮時にメッセージが削除される → messages から除去すると inputTokens も自動的に再計算される
-        const { messageID } = event.properties;
-        setMessages((prev) => prev.filter((m) => m.info.id !== messageID));
-        break;
-      }
-      case "session.updated": {
-        const info = event.properties.info;
-        setSessions((prev) => prev.map((s) => (s.id === info.id ? info : s)));
-        setActiveSession((prev) => (prev?.id === info.id ? info : prev));
-        break;
-      }
-      case "session.created": {
-        setSessions((prev) => [event.properties.info, ...prev]);
-        break;
-      }
-      case "session.deleted": {
-        const deletedId = event.properties.info.id;
-        setSessions((prev) => prev.filter((s) => s.id !== deletedId));
-        break;
-      }
-    }
+  const handleOpenTerminal = useCallback(() => {
+    postMessage({ type: "openTerminal" });
   }, []);
 
+  // SSE event handler — dispatches to domain-specific hooks
+  const handleEvent = useCallback(
+    (event: Event) => {
+      session.handleSessionEvent(event);
+      msg.handleMessageEvent(event);
+      perm.handlePermissionEvent(event);
+    },
+    [session.handleSessionEvent, msg.handleMessageEvent, perm.handlePermissionEvent],
+  );
+
+  // Extension Host → Webview message listener
   useEffect(() => {
     const handler = (e: MessageEvent<ExtToWebviewMessage>) => {
-      const msg = e.data;
-      switch (msg.type) {
+      const data = e.data;
+      switch (data.type) {
         case "sessions":
-          setSessions(msg.sessions);
+          session.setSessions(data.sessions);
           break;
         case "messages":
-          if (msg.sessionId === activeSession?.id) {
-            setMessages(msg.messages);
+          if (data.sessionId === session.activeSession?.id) {
+            msg.setMessages(data.messages);
           }
           break;
         case "activeSession":
-          setActiveSession(msg.session);
-          if (msg.session) {
-            postMessage({ type: "getMessages", sessionId: msg.session.id });
+          session.setActiveSession(data.session);
+          if (data.session) {
+            postMessage({ type: "getMessages", sessionId: data.session.id });
           } else {
-            setMessages([]);
+            msg.setMessages([]);
           }
           break;
         case "event":
-          handleEvent(msg.event);
+          handleEvent(data.event);
           break;
         case "providers": {
-          setProviders(msg.providers);
-          setAllProvidersData(msg.allProviders);
+          prov.setProviders(data.providers);
+          prov.setAllProvidersData(data.allProviders);
           // サーバーのモデル設定を反映する（config.model → default の順でフォールバック）
-          setSelectedModel(() => {
+          prov.setSelectedModel(() => {
             const modelStr =
-              msg.configModel || msg.default.general || msg.default.code || Object.values(msg.default)[0];
+              data.configModel || data.default.general || data.default.code || Object.values(data.default)[0];
             if (!modelStr) return null;
             const slashIndex = modelStr.indexOf("/");
             if (slashIndex < 0) return null;
@@ -194,23 +96,23 @@ export function App() {
           break;
         }
         case "openEditors":
-          setOpenEditors(msg.files);
+          setOpenEditors(data.files);
           break;
         case "workspaceFiles":
-          setWorkspaceFiles(msg.files);
+          setWorkspaceFiles(data.files);
           break;
         case "toolConfig":
-          setOpenCodePaths(msg.paths);
+          setOpenCodePaths(data.paths);
           break;
         case "locale":
-          setVscodeLanguage(msg.vscodeLanguage);
+          locale.setVscodeLanguage(data.vscodeLanguage);
           break;
         case "modelUpdated": {
-          const slashIndex = msg.model.indexOf("/");
+          const slashIndex = data.model.indexOf("/");
           if (slashIndex >= 0) {
-            setSelectedModel({
-              providerID: msg.model.slice(0, slashIndex),
-              modelID: msg.model.slice(slashIndex + 1),
+            prov.setSelectedModel({
+              providerID: data.model.slice(0, slashIndex),
+              modelID: data.model.slice(slashIndex + 1),
             });
           }
           break;
@@ -221,191 +123,188 @@ export function App() {
     postMessage({ type: "ready" });
     postMessage({ type: "getOpenEditors" });
     return () => window.removeEventListener("message", handler);
-  }, [activeSession?.id, handleEvent]);
+  }, [
+    session.activeSession?.id,
+    handleEvent,
+    locale.setVscodeLanguage,
+    msg.setMessages,
+    prov.setAllProvidersData,
+    prov.setProviders,
+    prov.setSelectedModel,
+    session.setActiveSession,
+    session.setSessions,
+  ]);
+
+  // Cross-cutting action handlers (span multiple hooks)
 
   const handleSend = useCallback(
     (text: string, files: FileAttachment[]) => {
-      if (!activeSession) return;
+      if (!session.activeSession) return;
       postMessage({
         type: "sendMessage",
-        sessionId: activeSession.id,
+        sessionId: session.activeSession.id,
         text,
-        model: selectedModel ?? undefined,
+        model: prov.selectedModel ?? undefined,
         files: files.length > 0 ? files : undefined,
       });
     },
-    [activeSession, selectedModel],
+    [session.activeSession, prov.selectedModel],
   );
 
-  const handleNewSession = useCallback(() => {
-    postMessage({ type: "createSession" });
-    setShowSessionList(false);
-  }, []);
-
-  const handleSelectSession = useCallback((sessionId: string) => {
-    postMessage({ type: "selectSession", sessionId });
-    setShowSessionList(false);
-  }, []);
-
-  const handleDeleteSession = useCallback((sessionId: string) => {
-    postMessage({ type: "deleteSession", sessionId });
-  }, []);
-
-  const handleModelSelect = useCallback((model: { providerID: string; modelID: string }) => {
-    setSelectedModel(model);
-    postMessage({ type: "setModel", model: `${model.providerID}/${model.modelID}` });
-  }, []);
-
   const handleAbort = useCallback(() => {
-    if (!activeSession) return;
-    postMessage({ type: "abort", sessionId: activeSession.id });
-  }, [activeSession]);
+    if (!session.activeSession) return;
+    postMessage({ type: "abort", sessionId: session.activeSession.id });
+  }, [session.activeSession]);
 
   const handleCompress = useCallback(() => {
-    if (!activeSession) return;
+    if (!session.activeSession) return;
     postMessage({
       type: "compressSession",
-      sessionId: activeSession.id,
-      model: selectedModel ?? undefined,
+      sessionId: session.activeSession.id,
+      model: prov.selectedModel ?? undefined,
     });
-  }, [activeSession, selectedModel]);
-
-  const handleOpenConfigFile = useCallback((filePath: string) => {
-    postMessage({ type: "openConfigFile", filePath });
-  }, []);
-
-  const handleOpenTerminal = useCallback(() => {
-    postMessage({ type: "openTerminal" });
-  }, []);
+  }, [session.activeSession, prov.selectedModel]);
 
   // ユーザーメッセージを編集して再送信する
   const handleEditAndResend = useCallback(
     (messageId: string, text: string) => {
-      if (!activeSession) return;
+      if (!session.activeSession) return;
       // messageId は編集対象のユーザーメッセージ。
       // その直前のメッセージまで巻き戻し、編集後のテキストを送信する。
-      const msgIndex = messages.findIndex((m) => m.info.id === messageId);
+      const msgIndex = msg.messages.findIndex((m) => m.info.id === messageId);
       if (msgIndex < 0) return;
       if (msgIndex === 0) {
         // 最初のメッセージの場合: 新規セッションを作成して送信する方がクリーン
         // ただし revert API のフォールバックとして、messageId 自体で revert
         postMessage({
           type: "editAndResend",
-          sessionId: activeSession.id,
+          sessionId: session.activeSession.id,
           messageId,
           text,
-          model: selectedModel ?? undefined,
+          model: prov.selectedModel ?? undefined,
         });
       } else {
         // 直前のメッセージまで巻き戻して再送信
-        const prevMessageId = messages[msgIndex - 1].info.id;
+        const prevMessageId = msg.messages[msgIndex - 1].info.id;
         postMessage({
           type: "editAndResend",
-          sessionId: activeSession.id,
+          sessionId: session.activeSession.id,
           messageId: prevMessageId,
           text,
-          model: selectedModel ?? undefined,
+          model: prov.selectedModel ?? undefined,
         });
       }
     },
-    [activeSession, messages, selectedModel],
+    [session.activeSession, msg.messages, prov.selectedModel],
   );
 
   // チェックポイントまで巻き戻す + ユーザーメッセージのテキストを入力欄に復元
   const handleRevertToCheckpoint = useCallback(
     (assistantMessageId: string, userText: string | null) => {
-      if (!activeSession) return;
+      if (!session.activeSession) return;
       postMessage({
         type: "revertToMessage",
-        sessionId: activeSession.id,
+        sessionId: session.activeSession.id,
         messageId: assistantMessageId,
       });
       // ユーザーメッセージのテキストを入力欄にプリフィルする
-      setPrefillText(userText ?? "");
+      msg.setPrefillText(userText ?? "");
     },
-    [activeSession],
+    [session.activeSession, msg],
   );
 
-  // メッセージから最新の ToDo リストを導出（todowrite/todoread ツールの最新の出力）
-  const latestTodos = useMemo<TodoItem[]>(() => {
-    for (let mi = messages.length - 1; mi >= 0; mi--) {
-      const parts = messages[mi].parts;
-      for (let pi = parts.length - 1; pi >= 0; pi--) {
-        const p = parts[pi];
-        if (p.type !== "tool") continue;
-        if (p.tool !== "todowrite" && p.tool !== "todoread") continue;
-        const st = p.state;
-        if (st.status === "completed" && st.output) {
-          const parsed = parseTodos(st.output);
-          if (parsed) return parsed;
-        }
-        if (st.status !== "pending") {
-          const input = st.input as Record<string, unknown> | undefined;
-          if (input) {
-            const parsed = parseTodos(input.todos ?? input);
-            if (parsed) return parsed;
-          }
-        }
-      }
-    }
-    return [];
-  }, [messages]);
+  const contextValue: AppContextValue = {
+    sessions: session.sessions,
+    activeSession: session.activeSession,
+    sessionBusy: session.sessionBusy,
+    showSessionList: session.showSessionList,
+    onNewSession: session.handleNewSession,
+    onSelectSession: session.handleSelectSession,
+    onDeleteSession: session.handleDeleteSession,
+    onToggleSessionList: session.toggleSessionList,
+    messages: msg.messages,
+    inputTokens: msg.inputTokens,
+    latestTodos: msg.latestTodos,
+    prefillText: msg.prefillText,
+    onPrefillConsumed: msg.consumePrefill,
+    providers: prov.providers,
+    allProvidersData: prov.allProvidersData,
+    selectedModel: prov.selectedModel,
+    onModelSelect: prov.handleModelSelect,
+    contextLimit: prov.contextLimit,
+    permissions: perm.permissions,
+    openEditors,
+    workspaceFiles,
+    onSend: handleSend,
+    onAbort: handleAbort,
+    onCompress: handleCompress,
+    isCompressing: !!session.activeSession?.time?.compacting,
+    onEditAndResend: handleEditAndResend,
+    onRevertToCheckpoint: handleRevertToCheckpoint,
+    openCodePaths,
+    onOpenConfigFile: handleOpenConfigFile,
+    onOpenTerminal: handleOpenTerminal,
+    localeSetting: locale.localeSetting,
+    onLocaleSettingChange: locale.handleLocaleSettingChange,
+  };
 
   return (
-    <LocaleProvider value={strings}>
-      <div className="chat-container">
-        <ChatHeader
-          activeSession={activeSession}
-          onNewSession={handleNewSession}
-          onToggleSessionList={() => setShowSessionList((s) => !s)}
-        />
-        {showSessionList && (
-          <SessionList
-            sessions={sessions}
-            activeSessionId={activeSession?.id ?? null}
-            onSelect={handleSelectSession}
-            onDelete={handleDeleteSession}
-            onClose={() => setShowSessionList(false)}
+    <LocaleProvider value={locale.strings}>
+      <AppContextProvider value={contextValue}>
+        <div className="chat-container">
+          <ChatHeader
+            activeSession={session.activeSession}
+            onNewSession={session.handleNewSession}
+            onToggleSessionList={session.toggleSessionList}
           />
-        )}
-        {activeSession ? (
-          <>
-            <MessagesArea
-              messages={messages}
-              sessionBusy={sessionBusy}
-              activeSessionId={activeSession.id}
-              permissions={permissions}
-              onEditAndResend={handleEditAndResend}
-              onRevertToCheckpoint={handleRevertToCheckpoint}
-            />
-            {latestTodos.length > 0 && <TodoHeader todos={latestTodos} />}
-            <InputArea
-              onSend={handleSend}
-              onAbort={handleAbort}
-              isBusy={sessionBusy}
-              providers={providers}
-              allProvidersData={allProvidersData}
-              selectedModel={selectedModel}
-              onModelSelect={handleModelSelect}
-              openEditors={openEditors}
-              workspaceFiles={workspaceFiles}
-              inputTokens={inputTokens}
-              contextLimit={contextLimit}
-              onCompress={handleCompress}
-              isCompressing={!!activeSession?.time?.compacting}
-              prefillText={prefillText}
-              onPrefillConsumed={() => setPrefillText("")}
-              openCodePaths={openCodePaths}
-              onOpenConfigFile={handleOpenConfigFile}
-              onOpenTerminal={handleOpenTerminal}
-              localeSetting={localeSetting}
-              onLocaleSettingChange={handleLocaleSettingChange}
+          {session.showSessionList && (
+            <SessionList
+              sessions={session.sessions}
+              activeSessionId={session.activeSession?.id ?? null}
+              onSelect={session.handleSelectSession}
+              onDelete={session.handleDeleteSession}
+              onClose={session.toggleSessionList}
             />
-          </>
-        ) : (
-          <EmptyState onNewSession={handleNewSession} />
-        )}
-      </div>
+          )}
+          {session.activeSession ? (
+            <>
+              <MessagesArea
+                messages={msg.messages}
+                sessionBusy={session.sessionBusy}
+                activeSessionId={session.activeSession.id}
+                permissions={perm.permissions}
+                onEditAndResend={handleEditAndResend}
+                onRevertToCheckpoint={handleRevertToCheckpoint}
+              />
+              {msg.latestTodos.length > 0 && <TodoHeader todos={msg.latestTodos} />}
+              <InputArea
+                onSend={handleSend}
+                onAbort={handleAbort}
+                isBusy={session.sessionBusy}
+                providers={prov.providers}
+                allProvidersData={prov.allProvidersData}
+                selectedModel={prov.selectedModel}
+                onModelSelect={prov.handleModelSelect}
+                openEditors={openEditors}
+                workspaceFiles={workspaceFiles}
+                inputTokens={msg.inputTokens}
+                contextLimit={prov.contextLimit}
+                onCompress={handleCompress}
+                isCompressing={!!session.activeSession?.time?.compacting}
+                prefillText={msg.prefillText}
+                onPrefillConsumed={msg.consumePrefill}
+                openCodePaths={openCodePaths}
+                onOpenConfigFile={handleOpenConfigFile}
+                onOpenTerminal={handleOpenTerminal}
+                localeSetting={locale.localeSetting}
+                onLocaleSettingChange={locale.handleLocaleSettingChange}
+              />
+            </>
+          ) : (
+            <EmptyState onNewSession={session.handleNewSession} />
+          )}
+        </div>
+      </AppContextProvider>
     </LocaleProvider>
   );
 }
diff --git a/webview/__tests__/components/atoms/ActionButton.test.tsx b/webview/__tests__/components/atoms/ActionButton.test.tsx
new file mode 100644
index 0000000..c3d9c8d
--- /dev/null
+++ b/webview/__tests__/components/atoms/ActionButton.test.tsx
@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ActionButton } from "../../../components/atoms/ActionButton";
+
+describe("ActionButton", () => {
+  // renders a button element
+  context("デフォルトの描画の場合", () => {
+    // renders a <button> element with type="button"
+    it('<button type="button"> をレンダリングすること', () => {
+      render(<ActionButton>OK</ActionButton>);
+      const btn = screen.getByRole("button");
+      expect(btn).toHaveAttribute("type", "button");
+    });
+
+    // applies root class
+    it("root クラスを持つこと", () => {
+      render(<ActionButton>OK</ActionButton>);
+      expect(screen.getByRole("button")).toHaveClass("root");
+    });
+
+    // does not apply variant or size modifier classes
+    it("variant / size 修飾クラスを持たないこと", () => {
+      render(<ActionButton>OK</ActionButton>);
+      expect(screen.getByRole("button").className).toBe("root");
+    });
+
+    // renders children
+    it("children を描画すること", () => {
+      render(<ActionButton>Click me</ActionButton>);
+      expect(screen.getByRole("button")).toHaveTextContent("Click me");
+    });
+  });
+
+  // variant="secondary"
+  context('variant="secondary" の場合', () => {
+    // applies secondary class
+    it("secondary クラスを持つこと", () => {
+      render(<ActionButton variant="secondary">X</ActionButton>);
+      expect(screen.getByRole("button")).toHaveClass("root", "secondary");
+    });
+  });
+
+  // variant="ghost"
+  context('variant="ghost" の場合', () => {
+    // applies ghost class
+    it("ghost クラスを持つこと", () => {
+      render(<ActionButton variant="ghost">X</ActionButton>);
+      expect(screen.getByRole("button")).toHaveClass("root", "ghost");
+    });
+  });
+
+  // size="sm"
+  context('size="sm" の場合', () => {
+    // applies sm class
+    it("sm クラスを持つこと", () => {
+      render(<ActionButton size="sm">X</ActionButton>);
+      expect(screen.getByRole("button")).toHaveClass("root", "sm");
+    });
+  });
+
+  // combined variant + size + className
+  context("variant, size, className をすべて指定した場合", () => {
+    // applies all classes
+    it("すべてのクラスが結合されること", () => {
+      render(
+        <ActionButton variant="ghost" size="sm" className="custom">
+          X
+        </ActionButton>,
+      );
+      const btn = screen.getByRole("button");
+      expect(btn).toHaveClass("root", "ghost", "sm", "custom");
+    });
+  });
+
+  // onClick handler
+  context("クリックした場合", () => {
+    // fires onClick handler
+    it("onClick が呼ばれること", () => {
+      const onClick = vi.fn();
+      render(<ActionButton onClick={onClick}>X</ActionButton>);
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // disabled state
+  context("disabled の場合", () => {
+    // renders disabled attribute
+    it("disabled 属性を持つこと", () => {
+      render(<ActionButton disabled>X</ActionButton>);
+      expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    // does not fire onClick when disabled
+    it("クリックしても onClick が呼ばれないこと", () => {
+      const onClick = vi.fn();
+      render(
+        <ActionButton disabled onClick={onClick}>
+          X
+        </ActionButton>,
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/ContextIndicator.test.tsx b/webview/__tests__/components/atoms/ContextIndicator.test.tsx
new file mode 100644
index 0000000..65e5c95
--- /dev/null
+++ b/webview/__tests__/components/atoms/ContextIndicator.test.tsx
@@ -0,0 +1,103 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ContextIndicator, formatTokenCount } from "../../../components/atoms/ContextIndicator";
+
+describe("formatTokenCount", () => {
+  // when value is less than 1000
+  context("1000 未満の場合", () => {
+    // returns the number as-is
+    it("数値をそのまま文字列で返すこと", () => {
+      expect(formatTokenCount(500)).toBe("500");
+    });
+  });
+
+  // when value is in thousands
+  context("1000 以上 100 万未満の場合", () => {
+    // returns K notation
+    it("K 表記で返すこと", () => {
+      expect(formatTokenCount(1500)).toBe("1.5K");
+    });
+  });
+
+  // when value is in millions
+  context("100 万以上の場合", () => {
+    // returns M notation
+    it("M 表記で返すこと", () => {
+      expect(formatTokenCount(2_500_000)).toBe("2.5M");
+    });
+  });
+});
+
+describe("ContextIndicator", () => {
+  const defaultProps = {
+    inputTokens: 5000,
+    contextLimit: 10000,
+    onCompress: vi.fn(),
+    isCompressing: false,
+  };
+
+  // when contextLimit is 0 or less
+  context("contextLimit が 0 以下の場合", () => {
+    // renders nothing
+    it("何もレンダリングしないこと", () => {
+      const { container } = render(<ContextIndicator {...defaultProps} contextLimit={0} />);
+      expect(container.innerHTML).toBe("");
+    });
+  });
+
+  // when usage is 0%
+  context("使用率が 0% の場合", () => {
+    // renders nothing
+    it("何もレンダリングしないこと", () => {
+      const { container } = render(<ContextIndicator {...defaultProps} inputTokens={0} />);
+      expect(container.innerHTML).toBe("");
+    });
+  });
+
+  // when usage is above 0%
+  context("使用率が 0% より大きい場合", () => {
+    // renders an SVG progress ring
+    it("SVG プログレスリングをレンダリングすること", () => {
+      const { container } = render(<ContextIndicator {...defaultProps} />);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+    });
+
+    // renders the indicator button
+    it("インジケーターボタンをレンダリングすること", () => {
+      const { container } = render(<ContextIndicator {...defaultProps} />);
+      expect(container.querySelector(".button")).toBeInTheDocument();
+    });
+  });
+
+  // when the button is clicked
+  context("ボタンをクリックした場合", () => {
+    // shows the popup
+    it("ポップアップを表示すること", () => {
+      const { container } = render(<ContextIndicator {...defaultProps} />);
+      fireEvent.click(container.querySelector(".button")!);
+      expect(container.querySelector(".popup")).toBeInTheDocument();
+    });
+  });
+
+  // when compress button is clicked in the popup
+  context("ポップアップ内の圧縮ボタンをクリックした場合", () => {
+    // calls onCompress
+    it("onCompress が呼ばれること", () => {
+      const onCompress = vi.fn();
+      const { container } = render(<ContextIndicator {...defaultProps} onCompress={onCompress} />);
+      fireEvent.click(container.querySelector(".button")!);
+      fireEvent.click(container.querySelector(".compressButton")!);
+      expect(onCompress).toHaveBeenCalledOnce();
+    });
+  });
+
+  // when isCompressing is true
+  context("isCompressing が true の場合", () => {
+    // disables the compress button
+    it("圧縮ボタンが無効化されること", () => {
+      const { container } = render(<ContextIndicator {...defaultProps} isCompressing={true} />);
+      fireEvent.click(container.querySelector(".button")!);
+      expect(container.querySelector(".compressButton")).toBeDisabled();
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/IconButton.test.tsx b/webview/__tests__/components/atoms/IconButton.test.tsx
new file mode 100644
index 0000000..8ef46d9
--- /dev/null
+++ b/webview/__tests__/components/atoms/IconButton.test.tsx
@@ -0,0 +1,116 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { IconButton } from "../../../components/atoms/IconButton";
+
+describe("IconButton", () => {
+  // renders a button element
+  context("デフォルトの描画の場合", () => {
+    // renders a <button> element with type="button"
+    it('<button type="button"> をレンダリングすること', () => {
+      render(<IconButton>X</IconButton>);
+      const btn = screen.getByRole("button");
+      expect(btn).toHaveAttribute("type", "button");
+    });
+
+    // applies root class
+    it("root クラスを持つこと", () => {
+      render(<IconButton>X</IconButton>);
+      expect(screen.getByRole("button")).toHaveClass("root");
+    });
+
+    // does not apply variant or size modifier classes
+    it("variant / size 修飾クラスを持たないこと", () => {
+      render(<IconButton>X</IconButton>);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toBe("root");
+    });
+
+    // renders children
+    it("children を描画すること", () => {
+      render(<IconButton>ICON</IconButton>);
+      expect(screen.getByRole("button")).toHaveTextContent("ICON");
+    });
+  });
+
+  // variant="muted"
+  context('variant="muted" の場合', () => {
+    // applies muted class
+    it("muted クラスを持つこと", () => {
+      render(<IconButton variant="muted">X</IconButton>);
+      expect(screen.getByRole("button")).toHaveClass("root", "muted");
+    });
+  });
+
+  // variant="outlined"
+  context('variant="outlined" の場合', () => {
+    // applies outlined class
+    it("outlined クラスを持つこと", () => {
+      render(<IconButton variant="outlined">X</IconButton>);
+      expect(screen.getByRole("button")).toHaveClass("root", "outlined");
+    });
+  });
+
+  // size="sm"
+  context('size="sm" の場合', () => {
+    // applies sm class
+    it("sm クラスを持つこと", () => {
+      render(<IconButton size="sm">X</IconButton>);
+      expect(screen.getByRole("button")).toHaveClass("root", "sm");
+    });
+  });
+
+  // combined variant + size + className
+  context("variant, size, className をすべて指定した場合", () => {
+    // applies all classes
+    it("すべてのクラスが結合されること", () => {
+      render(
+        <IconButton variant="muted" size="sm" className="custom">
+          X
+        </IconButton>,
+      );
+      const btn = screen.getByRole("button");
+      expect(btn).toHaveClass("root", "muted", "sm", "custom");
+    });
+  });
+
+  // onClick handler
+  context("クリックした場合", () => {
+    // fires onClick handler
+    it("onClick が呼ばれること", () => {
+      const onClick = vi.fn();
+      render(<IconButton onClick={onClick}>X</IconButton>);
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // disabled state
+  context("disabled の場合", () => {
+    // renders disabled attribute
+    it("disabled 属性を持つこと", () => {
+      render(<IconButton disabled>X</IconButton>);
+      expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    // does not fire onClick when disabled
+    it("クリックしても onClick が呼ばれないこと", () => {
+      const onClick = vi.fn();
+      render(
+        <IconButton disabled onClick={onClick}>
+          X
+        </IconButton>,
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  // title attribute
+  context("title を指定した場合", () => {
+    // passes title attribute
+    it("title 属性が設定されること", () => {
+      render(<IconButton title="my-title">X</IconButton>);
+      expect(screen.getByRole("button")).toHaveAttribute("title", "my-title");
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/LinkButton.test.tsx b/webview/__tests__/components/atoms/LinkButton.test.tsx
new file mode 100644
index 0000000..5fb44e9
--- /dev/null
+++ b/webview/__tests__/components/atoms/LinkButton.test.tsx
@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { LinkButton } from "../../../components/atoms/LinkButton";
+
+describe("LinkButton", () => {
+  // renders a button element
+  context("デフォルトの描画の場合", () => {
+    // renders a <button> element with type="button"
+    it('<button type="button"> をレンダリングすること', () => {
+      render(<LinkButton>Link</LinkButton>);
+      const btn = screen.getByRole("button");
+      expect(btn).toHaveAttribute("type", "button");
+    });
+
+    // applies root class
+    it("root クラスを持つこと", () => {
+      render(<LinkButton>Link</LinkButton>);
+      expect(screen.getByRole("button")).toHaveClass("root");
+    });
+
+    // renders children
+    it("children を描画すること", () => {
+      render(<LinkButton>Open File</LinkButton>);
+      expect(screen.getByRole("button")).toHaveTextContent("Open File");
+    });
+  });
+
+  // className prop
+  context("className を指定した場合", () => {
+    // merges custom className
+    it("カスタムクラスが結合されること", () => {
+      render(<LinkButton className="custom">Link</LinkButton>);
+      const btn = screen.getByRole("button");
+      expect(btn).toHaveClass("root", "custom");
+    });
+  });
+
+  // onClick handler
+  context("クリックした場合", () => {
+    // fires onClick handler
+    it("onClick が呼ばれること", () => {
+      const onClick = vi.fn();
+      render(<LinkButton onClick={onClick}>Link</LinkButton>);
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // title attribute
+  context("title を指定した場合", () => {
+    // passes title attribute
+    it("title 属性が設定されること", () => {
+      render(<LinkButton title="my-title">Link</LinkButton>);
+      expect(screen.getByRole("button")).toHaveAttribute("title", "my-title");
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/ListItem.test.tsx b/webview/__tests__/components/atoms/ListItem.test.tsx
new file mode 100644
index 0000000..05b8eaa
--- /dev/null
+++ b/webview/__tests__/components/atoms/ListItem.test.tsx
@@ -0,0 +1,58 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ListItem } from "../../../components/atoms/ListItem";
+
+describe("ListItem", () => {
+  // when rendered with defaults
+  context("デフォルトの描画の場合", () => {
+    // renders the title
+    it("タイトルを表示すること", () => {
+      const { container } = render(<ListItem title="index.ts" />);
+      expect(container.querySelector(".title")?.textContent).toBe("index.ts");
+    });
+
+    // has the root class
+    it("root クラスを持つこと", () => {
+      const { container } = render(<ListItem title="index.ts" />);
+      expect(container.querySelector(".root")).toBeInTheDocument();
+    });
+  });
+
+  // when description is provided
+  context("description が指定された場合", () => {
+    // renders the description
+    it("説明テキストを表示すること", () => {
+      const { container } = render(<ListItem title="index.ts" description="/src/index.ts" />);
+      expect(container.querySelector(".description")?.textContent).toBe("/src/index.ts");
+    });
+  });
+
+  // when description is omitted
+  context("description が未指定の場合", () => {
+    // does not render description element
+    it("description 要素を表示しないこと", () => {
+      const { container } = render(<ListItem title="index.ts" />);
+      expect(container.querySelector(".description")).toBeNull();
+    });
+  });
+
+  // when clicked
+  context("クリックした場合", () => {
+    // calls onClick
+    it("onClick が呼ばれること", () => {
+      const onClick = vi.fn();
+      const { container } = render(<ListItem title="index.ts" onClick={onClick} />);
+      fireEvent.click(container.querySelector(".root")!);
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+  });
+
+  // when className is provided
+  context("className が指定された場合", () => {
+    // applies the custom class
+    it("カスタムクラスが付与されること", () => {
+      const { container } = render(<ListItem title="index.ts" className="custom" />);
+      expect(container.querySelector(".root")?.classList.contains("custom")).toBe(true);
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/StatusItem.test.tsx b/webview/__tests__/components/atoms/StatusItem.test.tsx
new file mode 100644
index 0000000..324b4fd
--- /dev/null
+++ b/webview/__tests__/components/atoms/StatusItem.test.tsx
@@ -0,0 +1,83 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { StatusItem } from "../../../components/atoms/StatusItem";
+
+describe("StatusItem", () => {
+  // when rendered with basic props
+  context("基本のプロパティで描画した場合", () => {
+    // renders the indicator
+    it("インジケータを表示すること", () => {
+      const { container } = render(<StatusItem indicator="○" content="Task A" />);
+      expect(container.querySelector(".indicator")?.textContent).toBe("○");
+    });
+
+    // renders the content
+    it("コンテンツを表示すること", () => {
+      const { container } = render(<StatusItem indicator="○" content="Task A" />);
+      expect(container.querySelector(".content")?.textContent).toBe("Task A");
+    });
+
+    // does not have the done class
+    it("done クラスを持たないこと", () => {
+      const { container } = render(<StatusItem indicator="○" content="Task A" />);
+      expect(container.querySelector(".root")?.classList.contains("done")).toBe(false);
+    });
+  });
+
+  // when isDone is true
+  context("isDone が true の場合", () => {
+    // has the done class
+    it("done クラスを持つこと", () => {
+      const { container } = render(<StatusItem indicator="✓" content="Done" isDone />);
+      expect(container.querySelector(".root")?.classList.contains("done")).toBe(true);
+    });
+  });
+
+  // when badge is provided with danger variant
+  context("badge が danger バリアントで指定された場合", () => {
+    // renders the badge label
+    it("バッジラベルを表示すること", () => {
+      const { container } = render(
+        <StatusItem indicator="○" content="Urgent" badge={{ label: "high", variant: "danger" }} />,
+      );
+      expect(container.querySelector(".badge")?.textContent).toBe("high");
+    });
+
+    // has the danger class on the badge
+    it("バッジに danger クラスを持つこと", () => {
+      const { container } = render(
+        <StatusItem indicator="○" content="Urgent" badge={{ label: "high", variant: "danger" }} />,
+      );
+      expect(container.querySelector(".badge")?.classList.contains("danger")).toBe(true);
+    });
+  });
+
+  // when badge is provided with muted variant
+  context("badge が muted バリアントで指定された場合", () => {
+    // has the muted class on the badge
+    it("バッジに muted クラスを持つこと", () => {
+      const { container } = render(
+        <StatusItem indicator="○" content="Later" badge={{ label: "low", variant: "muted" }} />,
+      );
+      expect(container.querySelector(".badge")?.classList.contains("muted")).toBe(true);
+    });
+  });
+
+  // when no badge is set
+  context("badge が未設定の場合", () => {
+    // does not render badge element
+    it("バッジ要素を表示しないこと", () => {
+      const { container } = render(<StatusItem indicator="○" content="Task" />);
+      expect(container.querySelector(".badge")).toBeNull();
+    });
+  });
+
+  // when className is provided
+  context("className が指定された場合", () => {
+    // applies the custom class
+    it("カスタムクラスが付与されること", () => {
+      const { container } = render(<StatusItem indicator="○" content="Task" className="custom" />);
+      expect(container.querySelector(".root")?.classList.contains("custom")).toBe(true);
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/StreamingIndicator.test.tsx b/webview/__tests__/components/atoms/StreamingIndicator.test.tsx
new file mode 100644
index 0000000..0b22ae2
--- /dev/null
+++ b/webview/__tests__/components/atoms/StreamingIndicator.test.tsx
@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { StreamingIndicator } from "../../../components/atoms/StreamingIndicator";
+
+describe("StreamingIndicator", () => {
+  // when rendered
+  context("レンダリングした場合", () => {
+    // renders the root container
+    it("root コンテナをレンダリングすること", () => {
+      const { container } = render(<StreamingIndicator />);
+      expect(container.querySelector("[data-testid='streaming-indicator']")).toBeInTheDocument();
+    });
+
+    // renders exactly 3 dots
+    it("ドットを 3 つレンダリングすること", () => {
+      const { container } = render(<StreamingIndicator />);
+      expect(container.querySelectorAll(".dot")).toHaveLength(3);
+    });
+  });
+});
diff --git a/webview/__tests__/components/atoms/icons.test.tsx b/webview/__tests__/components/atoms/icons.test.tsx
new file mode 100644
index 0000000..fbfa45e
--- /dev/null
+++ b/webview/__tests__/components/atoms/icons.test.tsx
@@ -0,0 +1,212 @@
+import { render } from "@testing-library/react";
+import type { FC } from "react";
+import { describe, expect, it } from "vitest";
+import type { IconProps } from "../../../components/atoms/icons";
+import {
+  AddIcon,
+  CheckboxIcon,
+  ChevronRightIcon,
+  ClipIcon,
+  CloseIcon,
+  DeleteIcon,
+  EditActionIcon,
+  EditIcon,
+  ErrorCircleIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FileIcon,
+  GearIcon,
+  InfoCircleIcon,
+  ListIcon,
+  PlusIcon,
+  ReadActionIcon,
+  RevertIcon,
+  RunActionIcon,
+  SearchActionIcon,
+  SendIcon,
+  SpinnerIcon,
+  StopIcon,
+  TerminalIcon,
+  ToolIcon,
+  WriteActionIcon,
+} from "../../../components/atoms/icons";
+
+function describeIconComponent(Icon: FC<IconProps>, defaultW: number, defaultH: number) {
+  // when rendered with default props
+  context("デフォルトの描画の場合", () => {
+    // renders an <svg> element
+    it("<svg> 要素をレンダリングすること", () => {
+      const { container } = render(<Icon />);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+    });
+
+    // has aria-hidden attribute
+    it("aria-hidden 属性を持つこと", () => {
+      const { container } = render(<Icon />);
+      expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+    });
+
+    // has correct default width
+    it(`デフォルトの幅が ${defaultW} であること`, () => {
+      const { container } = render(<Icon />);
+      expect(container.querySelector("svg")!.getAttribute("width")).toBe(String(defaultW));
+    });
+
+    // has correct default height
+    it(`デフォルトの高さが ${defaultH} であること`, () => {
+      const { container } = render(<Icon />);
+      expect(container.querySelector("svg")!.getAttribute("height")).toBe(String(defaultH));
+    });
+  });
+
+  // when custom props are passed
+  context("カスタム props を指定した場合", () => {
+    // accepts custom width
+    it("カスタム width が反映されること", () => {
+      const { container } = render(<Icon width={24} height={24} />);
+      expect(container.querySelector("svg")!.getAttribute("width")).toBe("24");
+    });
+
+    // accepts custom height
+    it("カスタム height が反映されること", () => {
+      const { container } = render(<Icon width={24} height={24} />);
+      expect(container.querySelector("svg")!.getAttribute("height")).toBe("24");
+    });
+
+    // passes className through
+    it("className が SVG 要素に反映されること", () => {
+      const { container } = render(<Icon className="custom-class" />);
+      expect(container.querySelector("svg")).toHaveClass("custom-class");
+    });
+
+    // spreads arbitrary SVG attributes
+    it("任意の SVG 属性がスプレッドされること", () => {
+      const { container } = render(<Icon data-testid="icon" />);
+      expect(container.querySelector("svg")).toHaveAttribute("data-testid", "icon");
+    });
+  });
+}
+
+describe("ListIcon", () => {
+  describeIconComponent(ListIcon, 16, 16);
+});
+
+describe("AddIcon", () => {
+  describeIconComponent(AddIcon, 16, 16);
+});
+
+describe("PlusIcon", () => {
+  describeIconComponent(PlusIcon, 12, 12);
+});
+
+describe("ChevronRightIcon", () => {
+  describeIconComponent(ChevronRightIcon, 12, 12);
+});
+
+describe("FileIcon", () => {
+  describeIconComponent(FileIcon, 12, 12);
+});
+
+describe("ClipIcon", () => {
+  describeIconComponent(ClipIcon, 14, 14);
+});
+
+describe("CloseIcon", () => {
+  describeIconComponent(CloseIcon, 14, 14);
+});
+
+describe("DeleteIcon", () => {
+  describeIconComponent(DeleteIcon, 14, 14);
+});
+
+describe("EditIcon", () => {
+  describeIconComponent(EditIcon, 14, 14);
+});
+
+describe("SendIcon", () => {
+  describeIconComponent(SendIcon, 16, 16);
+});
+
+describe("StopIcon", () => {
+  describeIconComponent(StopIcon, 16, 16);
+});
+
+describe("RevertIcon", () => {
+  describeIconComponent(RevertIcon, 12, 12);
+});
+
+describe("TerminalIcon", () => {
+  describeIconComponent(TerminalIcon, 16, 16);
+});
+
+describe("GearIcon", () => {
+  describeIconComponent(GearIcon, 16, 16);
+});
+
+describe("SpinnerIcon", () => {
+  describeIconComponent(SpinnerIcon, 16, 16);
+
+  context("SpinnerIcon 固有の描画の場合", () => {
+    // uses fill='none' (stroke-based rendering)
+    it("fill が 'none' であること（ストローク描画）", () => {
+      const { container } = render(<SpinnerIcon />);
+      expect(container.querySelector("svg")!.getAttribute("fill")).toBe("none");
+    });
+
+    // contains a circle element for the track
+    it("トラック用の circle 要素を含むこと", () => {
+      const { container } = render(<SpinnerIcon />);
+      expect(container.querySelector("circle")).toBeInTheDocument();
+    });
+
+    // contains a path element for the spinner arc
+    it("スピナーアーク用の path 要素を含むこと", () => {
+      const { container } = render(<SpinnerIcon />);
+      expect(container.querySelector("path")).toBeInTheDocument();
+    });
+  });
+});
+
+describe("ErrorCircleIcon", () => {
+  describeIconComponent(ErrorCircleIcon, 16, 16);
+});
+
+describe("InfoCircleIcon", () => {
+  describeIconComponent(InfoCircleIcon, 14, 14);
+});
+
+describe("CheckboxIcon", () => {
+  describeIconComponent(CheckboxIcon, 14, 14);
+});
+
+describe("ReadActionIcon", () => {
+  describeIconComponent(ReadActionIcon, 14, 14);
+});
+
+describe("EditActionIcon", () => {
+  describeIconComponent(EditActionIcon, 14, 14);
+});
+
+describe("WriteActionIcon", () => {
+  describeIconComponent(WriteActionIcon, 14, 14);
+});
+
+describe("RunActionIcon", () => {
+  describeIconComponent(RunActionIcon, 14, 14);
+});
+
+describe("SearchActionIcon", () => {
+  describeIconComponent(SearchActionIcon, 14, 14);
+});
+
+describe("ToolIcon", () => {
+  describeIconComponent(ToolIcon, 14, 14);
+});
+
+describe("EyeIcon", () => {
+  describeIconComponent(EyeIcon, 14, 14);
+});
+
+describe("EyeOffIcon", () => {
+  describeIconComponent(EyeOffIcon, 14, 14);
+});
diff --git a/webview/__tests__/components/molecules/DiffView.test.tsx b/webview/__tests__/components/molecules/DiffView.test.tsx
new file mode 100644
index 0000000..d8b9dc7
--- /dev/null
+++ b/webview/__tests__/components/molecules/DiffView.test.tsx
@@ -0,0 +1,50 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { DiffView } from "../../../components/molecules/DiffView";
+
+describe("DiffView", () => {
+  // when there are additions and removals
+  context("追加行と削除行がある場合", () => {
+    // renders add count
+    it("追加行数を表示すること", () => {
+      const { container } = render(<DiffView oldStr="hello" newStr="world" />);
+      expect(container.querySelector(".statAdd")).toBeInTheDocument();
+    });
+
+    // renders remove count
+    it("削除行数を表示すること", () => {
+      const { container } = render(<DiffView oldStr="hello" newStr="world" />);
+      expect(container.querySelector(".statRemove")).toBeInTheDocument();
+    });
+
+    // renders diff lines
+    it("差分行をレンダリングすること", () => {
+      const { container } = render(<DiffView oldStr="hello" newStr="world" />);
+      expect(container.querySelectorAll(".line").length).toBeGreaterThan(0);
+    });
+  });
+
+  // when strings are identical
+  context("文字列が同一の場合", () => {
+    // does not show add stat
+    it("追加行数を表示しないこと", () => {
+      const { container } = render(<DiffView oldStr="same" newStr="same" />);
+      expect(container.querySelector(".statAdd")).not.toBeInTheDocument();
+    });
+
+    // does not show remove stat
+    it("削除行数を表示しないこと", () => {
+      const { container } = render(<DiffView oldStr="same" newStr="same" />);
+      expect(container.querySelector(".statRemove")).not.toBeInTheDocument();
+    });
+  });
+
+  // when only additions exist
+  context("追加行のみの場合", () => {
+    // renders add stat
+    it("追加行数のみを表示すること", () => {
+      const { container } = render(<DiffView oldStr="" newStr="new line" />);
+      expect(container.querySelector(".statAdd")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/EmptyState.test.tsx b/webview/__tests__/components/molecules/EmptyState.test.tsx
new file mode 100644
index 0000000..1985c43
--- /dev/null
+++ b/webview/__tests__/components/molecules/EmptyState.test.tsx
@@ -0,0 +1,37 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { EmptyState } from "../../../components/molecules/EmptyState";
+
+describe("EmptyState", () => {
+  // when rendered
+  context("レンダリングした場合", () => {
+    // renders the title
+    it("タイトルを表示すること", () => {
+      const { container } = render(<EmptyState onNewSession={vi.fn()} />);
+      expect(container.querySelector(".title")).toBeInTheDocument();
+    });
+
+    // renders the description
+    it("説明文を表示すること", () => {
+      const { container } = render(<EmptyState onNewSession={vi.fn()} />);
+      expect(container.querySelector(".description")).toBeInTheDocument();
+    });
+
+    // renders the new chat button
+    it("新規チャットボタンを表示すること", () => {
+      const { container } = render(<EmptyState onNewSession={vi.fn()} />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+    });
+  });
+
+  // when new chat button is clicked
+  context("新規チャットボタンをクリックした場合", () => {
+    // calls onNewSession
+    it("onNewSession が呼ばれること", () => {
+      const onNewSession = vi.fn();
+      const { container } = render(<EmptyState onNewSession={onNewSession} />);
+      fireEvent.click(container.querySelector("button")!);
+      expect(onNewSession).toHaveBeenCalledOnce();
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/FileAttachmentBar.test.tsx b/webview/__tests__/components/molecules/FileAttachmentBar.test.tsx
new file mode 100644
index 0000000..275762b
--- /dev/null
+++ b/webview/__tests__/components/molecules/FileAttachmentBar.test.tsx
@@ -0,0 +1,97 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FileAttachmentBar } from "../../../components/molecules/FileAttachmentBar";
+import type { FileAttachment } from "../../../vscode-api";
+
+const file1: FileAttachment = { fileName: "app.tsx", filePath: "/src/app.tsx" };
+const file2: FileAttachment = { fileName: "index.ts", filePath: "/src/index.ts" };
+
+function createRef() {
+  return { current: null } as React.RefObject<HTMLDivElement | null>;
+}
+
+const defaultProps = {
+  attachedFiles: [] as FileAttachment[],
+  activeEditorFile: null,
+  isActiveAttached: false,
+  showFilePicker: false,
+  filePickerQuery: "",
+  pickerFiles: [] as FileAttachment[],
+  onClipClick: vi.fn(),
+  onFilePickerSearch: vi.fn(),
+  onAddFile: vi.fn(),
+  onRemoveFile: vi.fn(),
+  filePickerRef: createRef(),
+};
+
+describe("FileAttachmentBar", () => {
+  // when rendered with default props
+  context("デフォルト props の場合", () => {
+    // renders clip button
+    it("クリップボタンをレンダリングすること", () => {
+      const { container } = render(<FileAttachmentBar {...defaultProps} />);
+      expect(container.querySelector(".outlined")).toBeInTheDocument();
+    });
+  });
+
+  // when clip button is clicked
+  context("クリップボタンをクリックした場合", () => {
+    // calls onClipClick
+    it("onClipClick が呼ばれること", () => {
+      const onClipClick = vi.fn();
+      const { container } = render(<FileAttachmentBar {...defaultProps} onClipClick={onClipClick} />);
+      fireEvent.click(container.querySelector(".outlined")!);
+      expect(onClipClick).toHaveBeenCalledOnce();
+    });
+  });
+
+  // when files are attached
+  context("ファイルが添付されている場合", () => {
+    // renders attached file chips
+    it("添付ファイルチップをレンダリングすること", () => {
+      const { container } = render(<FileAttachmentBar {...defaultProps} attachedFiles={[file1, file2]} />);
+      expect(container.querySelectorAll(".chip")).toHaveLength(2);
+    });
+
+    // calls onRemoveFile when remove button is clicked
+    it("削除ボタンクリックで onRemoveFile が呼ばれること", () => {
+      const onRemoveFile = vi.fn();
+      const { container } = render(
+        <FileAttachmentBar {...defaultProps} attachedFiles={[file1]} onRemoveFile={onRemoveFile} />,
+      );
+      fireEvent.click(container.querySelector(".chipRemove")!);
+      expect(onRemoveFile).toHaveBeenCalledWith(file1.filePath);
+    });
+  });
+
+  // when activeEditorFile is set and not attached
+  context("アクティブエディタファイルが設定され未添付の場合", () => {
+    // renders quick-add button
+    it("quick-add ボタンをレンダリングすること", () => {
+      const { container } = render(
+        <FileAttachmentBar {...defaultProps} activeEditorFile={file1} isActiveAttached={false} />,
+      );
+      expect(container.querySelector(".fileButton")).toBeInTheDocument();
+    });
+  });
+
+  // when activeEditorFile is already attached
+  context("アクティブエディタファイルが既に添付済みの場合", () => {
+    // does not render quick-add button
+    it("quick-add ボタンをレンダリングしないこと", () => {
+      const { container } = render(
+        <FileAttachmentBar {...defaultProps} activeEditorFile={file1} isActiveAttached={true} />,
+      );
+      expect(container.querySelector(".fileButton")).not.toBeInTheDocument();
+    });
+  });
+
+  // when file picker is open
+  context("ファイルピッカーが開いている場合", () => {
+    // renders the dropdown
+    it("ドロップダウンをレンダリングすること", () => {
+      const { container } = render(<FileAttachmentBar {...defaultProps} showFilePicker={true} pickerFiles={[file1]} />);
+      expect(container.querySelector(".pickerDropdown")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/FileCreateView.test.tsx b/webview/__tests__/components/molecules/FileCreateView.test.tsx
new file mode 100644
index 0000000..6505013
--- /dev/null
+++ b/webview/__tests__/components/molecules/FileCreateView.test.tsx
@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { FileCreateView } from "../../../components/molecules/FileCreateView";
+
+describe("FileCreateView", () => {
+  // when content has a few lines
+  context("少数行のコンテンツの場合", () => {
+    // renders all lines as add lines
+    it("すべての行を追加行として表示すること", () => {
+      const content = "line1\nline2\nline3";
+      const { container } = render(<FileCreateView content={content} />);
+      expect(container.querySelectorAll(".lineAdd")).toHaveLength(3);
+    });
+
+    // shows add lines count in stats
+    it("追加行数を stats に表示すること", () => {
+      const content = "line1\nline2";
+      const { container } = render(<FileCreateView content={content} />);
+      expect(container.querySelector(".statAdd")).toBeInTheDocument();
+    });
+  });
+
+  // when content exceeds 30 lines
+  context("コンテンツが 30 行を超える場合", () => {
+    // truncates to 31 display lines (30 + more indicator)
+    it("表示行を 31 行に切り詰めること", () => {
+      const lines = Array.from({ length: 50 }, (_, i) => `line${i + 1}`);
+      const content = lines.join("\n");
+      const { container } = render(<FileCreateView content={content} />);
+      expect(container.querySelectorAll(".lineAdd")).toHaveLength(31);
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/HashFilePopup.test.tsx b/webview/__tests__/components/molecules/HashFilePopup.test.tsx
new file mode 100644
index 0000000..7d63821
--- /dev/null
+++ b/webview/__tests__/components/molecules/HashFilePopup.test.tsx
@@ -0,0 +1,43 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { HashFilePopup } from "../../../components/molecules/HashFilePopup";
+import type { FileAttachment } from "../../../vscode-api";
+
+const file1: FileAttachment = { fileName: "app.tsx", filePath: "/src/app.tsx" };
+const file2: FileAttachment = { fileName: "index.ts", filePath: "/src/index.ts" };
+
+function createRef() {
+  return { current: null } as React.RefObject<HTMLDivElement | null>;
+}
+
+describe("HashFilePopup", () => {
+  // when files are available
+  context("ファイル候補がある場合", () => {
+    // renders file items
+    it("ファイルアイテムをレンダリングすること", () => {
+      const { container } = render(
+        <HashFilePopup hashFiles={[file1, file2]} onAddFile={vi.fn()} hashPopupRef={createRef()} />,
+      );
+      expect(container.querySelectorAll("[data-testid='hash-popup'] > div")).toHaveLength(2);
+    });
+
+    // calls onAddFile when item is clicked
+    it("アイテムクリックで onAddFile が呼ばれること", () => {
+      const onAddFile = vi.fn();
+      const { container } = render(
+        <HashFilePopup hashFiles={[file1]} onAddFile={onAddFile} hashPopupRef={createRef()} />,
+      );
+      fireEvent.click(container.querySelector("[data-testid='hash-popup'] > div")!);
+      expect(onAddFile).toHaveBeenCalledWith(file1);
+    });
+  });
+
+  // when no files match
+  context("ファイル候補がない場合", () => {
+    // renders empty message
+    it("空メッセージを表示すること", () => {
+      const { container } = render(<HashFilePopup hashFiles={[]} onAddFile={vi.fn()} hashPopupRef={createRef()} />);
+      expect(container.querySelector(".empty")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/ModelSelector.test.tsx b/webview/__tests__/components/molecules/ModelSelector.test.tsx
new file mode 100644
index 0000000..2c6085a
--- /dev/null
+++ b/webview/__tests__/components/molecules/ModelSelector.test.tsx
@@ -0,0 +1,63 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ModelSelector } from "../../../components/molecules/ModelSelector";
+import { createProvider } from "../../factories";
+
+const defaultProps = {
+  providers: [
+    createProvider("openai", {
+      "gpt-4": { id: "gpt-4", name: "GPT-4", limit: { context: 128000, output: 4096 } },
+    }),
+  ],
+  allProvidersData: null,
+  selectedModel: { providerID: "openai", modelID: "gpt-4" },
+  onSelect: vi.fn(),
+};
+
+describe("ModelSelector", () => {
+  // when rendered
+  context("レンダリングした場合", () => {
+    // renders the selector button
+    it("セレクターボタンをレンダリングすること", () => {
+      const { container } = render(<ModelSelector {...defaultProps} />);
+      expect(container.querySelector(".button")).toBeInTheDocument();
+    });
+
+    // shows selected model name
+    it("選択中のモデル名を表示すること", () => {
+      const { container } = render(<ModelSelector {...defaultProps} />);
+      expect(container.querySelector(".label")?.textContent).toBe("GPT-4");
+    });
+  });
+
+  // when button is clicked
+  context("ボタンをクリックした場合", () => {
+    // opens the model panel
+    it("モデルパネルを開くこと", () => {
+      const { container } = render(<ModelSelector {...defaultProps} />);
+      fireEvent.click(container.querySelector(".button")!);
+      expect(container.querySelector(".panel")).toBeInTheDocument();
+    });
+  });
+
+  // when a model is selected
+  context("モデルを選択した場合", () => {
+    // calls onSelect with the model
+    it("onSelect が呼ばれること", () => {
+      const onSelect = vi.fn();
+      const { container } = render(<ModelSelector {...defaultProps} onSelect={onSelect} />);
+      fireEvent.click(container.querySelector(".button")!);
+      fireEvent.click(container.querySelector(".item")!);
+      expect(onSelect).toHaveBeenCalledWith({ providerID: "openai", modelID: "gpt-4" });
+    });
+  });
+
+  // when no model is selected
+  context("モデルが未選択の場合", () => {
+    // shows placeholder text
+    it("プレースホルダーテキストを表示すること", () => {
+      const { container } = render(<ModelSelector {...defaultProps} selectedModel={null} />);
+      expect(container.querySelector(".label")?.textContent).toBeTruthy();
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/TextPartView.test.tsx b/webview/__tests__/components/molecules/TextPartView.test.tsx
new file mode 100644
index 0000000..12339ae
--- /dev/null
+++ b/webview/__tests__/components/molecules/TextPartView.test.tsx
@@ -0,0 +1,71 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TextPartView } from "../../../components/molecules/TextPartView";
+import { createTextPart } from "../../factories";
+
+describe("TextPartView", () => {
+  // when rendered with a text part
+  context("テキストパートを渡した場合", () => {
+    // renders HTML content
+    it("HTML コンテンツをレンダリングすること", () => {
+      const part = createTextPart("Hello world");
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.querySelector("span")).toBeInTheDocument();
+    });
+
+    // renders the text
+    it("テキストを表示すること", () => {
+      const part = createTextPart("Hello world");
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.textContent).toContain("Hello world");
+    });
+  });
+
+  // when text changes
+  context("テキストが異なる場合", () => {
+    // renders updated text
+    it("更新されたテキストを表示すること", () => {
+      const part = createTextPart("Updated text");
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.textContent).toContain("Updated text");
+    });
+  });
+
+  // XSS protection via DOMPurify
+  context("悪意のある HTML を含むテキストの場合", () => {
+    // strips <script> tags
+    it("<script> タグが除去されること", () => {
+      const part = createTextPart('<script>alert("xss")</script>');
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.querySelector("script")).toBeNull();
+    });
+
+    // strips onerror attributes
+    it("onerror 属性が除去されること", () => {
+      const part = createTextPart('<img src="x" onerror="alert(1)">');
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.innerHTML).not.toContain("onerror");
+    });
+
+    // strips javascript: URLs
+    it("javascript: URL が除去されること", () => {
+      const part = createTextPart('<a href="javascript:alert(1)">click</a>');
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.innerHTML).not.toContain("javascript:");
+    });
+
+    // strips <iframe> tags
+    it("<iframe> タグが除去されること", () => {
+      const part = createTextPart('<iframe src="https://evil.com"></iframe>');
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.querySelector("iframe")).toBeNull();
+    });
+
+    // preserves safe HTML content
+    it("安全な HTML コンテンツは保持されること", () => {
+      const part = createTextPart("safe <b>bold</b> text");
+      const { container } = render(<TextPartView part={part} />);
+      expect(container.textContent).toContain("safe bold text");
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/TodoHeader.test.tsx b/webview/__tests__/components/molecules/TodoHeader.test.tsx
new file mode 100644
index 0000000..19d4afa
--- /dev/null
+++ b/webview/__tests__/components/molecules/TodoHeader.test.tsx
@@ -0,0 +1,63 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TodoHeader } from "../../../components/molecules/TodoHeader";
+import type { TodoItem } from "../../../utils/todo";
+
+const sampleTodos: TodoItem[] = [
+  { content: "Task 1", status: "completed", priority: undefined },
+  { content: "Task 2", status: "in_progress", priority: "high" },
+  { content: "Task 3", status: "pending", priority: undefined },
+];
+
+describe("TodoHeader", () => {
+  // when rendered
+  context("レンダリングした場合", () => {
+    // renders the header bar
+    it("ヘッダーバーをレンダリングすること", () => {
+      const { container } = render(<TodoHeader todos={sampleTodos} />);
+      expect(container.querySelector(".bar")).toBeInTheDocument();
+    });
+
+    // shows completion count
+    it("完了数を表示すること", () => {
+      const { container } = render(<TodoHeader todos={sampleTodos} />);
+      expect(container.querySelector(".count")?.textContent).toBe("1/3");
+    });
+
+    // renders progress bar
+    it("プログレスバーをレンダリングすること", () => {
+      const { container } = render(<TodoHeader todos={sampleTodos} />);
+      expect(container.querySelector(".progress")).toBeInTheDocument();
+    });
+  });
+
+  // when header is clicked
+  context("ヘッダーをクリックした場合", () => {
+    // expands the todo list
+    it("todo リストを展開すること", () => {
+      const { container } = render(<TodoHeader todos={sampleTodos} />);
+      fireEvent.click(container.querySelector(".bar")!);
+      expect(container.querySelector(".list")).toBeInTheDocument();
+    });
+
+    // shows all todo items
+    it("全ての todo アイテムを表示すること", () => {
+      const { container } = render(<TodoHeader todos={sampleTodos} />);
+      fireEvent.click(container.querySelector(".bar")!);
+      expect(container.querySelectorAll("li")).toHaveLength(3);
+    });
+  });
+
+  // when all todos are completed
+  context("全 todo が完了している場合", () => {
+    // shows full completion count
+    it("全完了数を表示すること", () => {
+      const allDone: TodoItem[] = [
+        { content: "Done 1", status: "completed", priority: undefined },
+        { content: "Done 2", status: "done", priority: undefined },
+      ];
+      const { container } = render(<TodoHeader todos={allDone} />);
+      expect(container.querySelector(".count")?.textContent).toBe("2/2");
+    });
+  });
+});
diff --git a/webview/__tests__/components/molecules/TodoView.test.tsx b/webview/__tests__/components/molecules/TodoView.test.tsx
new file mode 100644
index 0000000..a7dd911
--- /dev/null
+++ b/webview/__tests__/components/molecules/TodoView.test.tsx
@@ -0,0 +1,59 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TodoView } from "../../../components/molecules/TodoView";
+import type { TodoItem } from "../../../utils/todo";
+
+const sampleTodos: TodoItem[] = [
+  { content: "Task 1", status: "completed", priority: undefined },
+  { content: "Task 2", status: "in_progress", priority: "high" },
+  { content: "Task 3", status: "pending", priority: "low" },
+];
+
+describe("TodoView", () => {
+  // when todos are provided
+  context("todo リストがある場合", () => {
+    // renders all todo items
+    it("全ての todo アイテムをレンダリングすること", () => {
+      const { container } = render(<TodoView todos={sampleTodos} />);
+      expect(container.querySelectorAll("li")).toHaveLength(3);
+    });
+
+    // shows completion summary
+    it("完了数サマリーを表示すること", () => {
+      const { container } = render(<TodoView todos={sampleTodos} />);
+      expect(container.querySelector(".summary")).toBeInTheDocument();
+    });
+
+    // marks completed items with check mark
+    it("完了アイテムにチェックマークを表示すること", () => {
+      const { container } = render(<TodoView todos={sampleTodos} />);
+      const checks = container.querySelectorAll(".indicator");
+      expect(checks[0]?.textContent).toBe("✓");
+    });
+
+    // marks incomplete items with circle
+    it("未完了アイテムに丸を表示すること", () => {
+      const { container } = render(<TodoView todos={sampleTodos} />);
+      const checks = container.querySelectorAll(".indicator");
+      expect(checks[1]?.textContent).toBe("○");
+    });
+  });
+
+  // when a todo has priority
+  context("todo に priority がある場合", () => {
+    // renders priority badge
+    it("priority バッジを表示すること", () => {
+      const { container } = render(<TodoView todos={sampleTodos} />);
+      expect(container.querySelectorAll(".badge").length).toBeGreaterThan(0);
+    });
+  });
+
+  // when todos list is empty
+  context("todo リストが空の場合", () => {
+    // renders no items
+    it("アイテムをレンダリングしないこと", () => {
+      const { container } = render(<TodoView todos={[]} />);
+      expect(container.querySelectorAll("li")).toHaveLength(0);
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/ChatHeader.test.tsx b/webview/__tests__/components/organisms/ChatHeader.test.tsx
new file mode 100644
index 0000000..f9ac58e
--- /dev/null
+++ b/webview/__tests__/components/organisms/ChatHeader.test.tsx
@@ -0,0 +1,61 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatHeader } from "../../../components/organisms/ChatHeader";
+import { createSession } from "../../factories";
+
+describe("ChatHeader", () => {
+  const defaultProps = {
+    activeSession: createSession({ title: "Test Session" }),
+    onNewSession: vi.fn(),
+    onToggleSessionList: vi.fn(),
+  };
+
+  // when rendered with an active session
+  context("アクティブセッションがある場合", () => {
+    // renders the session title
+    it("セッションタイトルを表示すること", () => {
+      const { container } = render(<ChatHeader {...defaultProps} />);
+      expect(container.querySelector(".title")?.textContent).toBe("Test Session");
+    });
+
+    // renders the session list button
+    it("セッションリストボタンをレンダリングすること", () => {
+      const { container } = render(<ChatHeader {...defaultProps} />);
+      expect(container.querySelectorAll("button").length).toBeGreaterThan(0);
+    });
+  });
+
+  // when new session button is clicked
+  context("新規セッションボタンをクリックした場合", () => {
+    // calls onNewSession
+    it("onNewSession が呼ばれること", () => {
+      const onNewSession = vi.fn();
+      const { container } = render(<ChatHeader {...defaultProps} onNewSession={onNewSession} />);
+      const buttons = container.querySelectorAll("button");
+      // New chat button is the last icon-button
+      fireEvent.click(buttons[buttons.length - 1]!);
+      expect(onNewSession).toHaveBeenCalledOnce();
+    });
+  });
+
+  // when session list button is clicked
+  context("セッションリストボタンをクリックした場合", () => {
+    // calls onToggleSessionList
+    it("onToggleSessionList が呼ばれること", () => {
+      const onToggleSessionList = vi.fn();
+      const { container } = render(<ChatHeader {...defaultProps} onToggleSessionList={onToggleSessionList} />);
+      const buttons = container.querySelectorAll("button");
+      fireEvent.click(buttons[0]!);
+      expect(onToggleSessionList).toHaveBeenCalledOnce();
+    });
+  });
+
+  // when activeSession is null
+  context("アクティブセッションが null の場合", () => {
+    // renders fallback title
+    it("フォールバックタイトルを表示すること", () => {
+      const { container } = render(<ChatHeader {...defaultProps} activeSession={null} />);
+      expect(container.querySelector(".title")?.textContent).toBeTruthy();
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/MessageItem.test.tsx b/webview/__tests__/components/organisms/MessageItem.test.tsx
new file mode 100644
index 0000000..ed8df7e
--- /dev/null
+++ b/webview/__tests__/components/organisms/MessageItem.test.tsx
@@ -0,0 +1,74 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { MessageWithParts } from "../../../App";
+import { MessageItem } from "../../../components/organisms/MessageItem";
+import { createMessage, createTextPart, createToolPart } from "../../factories";
+
+describe("MessageItem", () => {
+  const defaultProps = {
+    activeSessionId: "session-1",
+    permissions: new Map(),
+    onEditAndResend: vi.fn(),
+  };
+
+  // when rendered with a user message
+  context("ユーザーメッセージの場合", () => {
+    const userMsg: MessageWithParts = {
+      info: createMessage({ role: "user" }),
+      parts: [createTextPart("Hello")],
+    };
+
+    // renders as user message
+    it("ユーザーメッセージとしてレンダリングすること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      expect(container.querySelector(".user")).toBeInTheDocument();
+    });
+
+    // renders user text
+    it("ユーザーテキストを表示すること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      expect(container.querySelector(".content")?.textContent).toBe("Hello");
+    });
+
+    // shows edit icon
+    it("編集アイコンを表示すること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      expect(container.querySelector(".editIcon")).toBeInTheDocument();
+    });
+  });
+
+  // when user message bubble is clicked
+  context("ユーザーメッセージバブルをクリックした場合", () => {
+    const userMsg: MessageWithParts = {
+      info: createMessage({ role: "user" }),
+      parts: [createTextPart("Hello")],
+    };
+
+    // enters edit mode
+    it("編集モードに入ること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      fireEvent.click(container.querySelector(".userBubble")!);
+      expect(container.querySelector(".editTextarea")).toBeInTheDocument();
+    });
+  });
+
+  // when rendered with an assistant message
+  context("アシスタントメッセージの場合", () => {
+    const assistantMsg: MessageWithParts = {
+      info: createMessage({ role: "assistant" }),
+      parts: [createTextPart("Response"), createToolPart("file_read")],
+    };
+
+    // renders as assistant message
+    it("アシスタントメッセージとしてレンダリングすること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={assistantMsg} />);
+      expect(container.querySelector(".assistant")).toBeInTheDocument();
+    });
+
+    // renders text and tool parts
+    it("テキストとツールパートをレンダリングすること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={assistantMsg} />);
+      expect(container.querySelector(".root")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/MessagesArea.test.tsx b/webview/__tests__/components/organisms/MessagesArea.test.tsx
new file mode 100644
index 0000000..133fe6d
--- /dev/null
+++ b/webview/__tests__/components/organisms/MessagesArea.test.tsx
@@ -0,0 +1,66 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { MessageWithParts } from "../../../App";
+import { MessagesArea } from "../../../components/organisms/MessagesArea";
+import { createMessage, createTextPart } from "../../factories";
+
+const userMsg: MessageWithParts = {
+  info: createMessage({ role: "user" }),
+  parts: [createTextPart("Hello")],
+};
+
+const assistantMsg: MessageWithParts = {
+  info: createMessage({ role: "assistant" }),
+  parts: [createTextPart("Hi there")],
+};
+
+const defaultProps = {
+  messages: [userMsg, assistantMsg],
+  sessionBusy: false,
+  activeSessionId: "session-1",
+  permissions: new Map(),
+  onEditAndResend: vi.fn(),
+  onRevertToCheckpoint: vi.fn(),
+};
+
+describe("MessagesArea", () => {
+  // when rendered with messages
+  context("メッセージがある場合", () => {
+    // renders message items
+    it("メッセージアイテムをレンダリングすること", () => {
+      const { container } = render(<MessagesArea {...defaultProps} />);
+      expect(container.querySelectorAll(".message").length).toBeGreaterThan(0);
+    });
+  });
+
+  // when session is busy
+  context("セッションが busy の場合", () => {
+    // renders streaming indicator
+    it("StreamingIndicator をレンダリングすること", () => {
+      const { container } = render(<MessagesArea {...defaultProps} sessionBusy={true} />);
+      expect(container.querySelector("[data-testid='streaming-indicator']")).toBeInTheDocument();
+    });
+  });
+
+  // when session is not busy
+  context("セッションが busy でない場合", () => {
+    // does not render streaming indicator
+    it("StreamingIndicator をレンダリングしないこと", () => {
+      const { container } = render(<MessagesArea {...defaultProps} sessionBusy={false} />);
+      expect(container.querySelector("[data-testid='streaming-indicator']")).not.toBeInTheDocument();
+    });
+  });
+
+  // when messages have checkpoint dividers
+  context("アシスタント→ユーザーの連続メッセージの場合", () => {
+    // renders checkpoint divider
+    it("チェックポイント区切り線をレンダリングすること", () => {
+      const msgs: MessageWithParts[] = [
+        { info: createMessage({ role: "assistant" }), parts: [createTextPart("Reply")] },
+        { info: createMessage({ role: "user" }), parts: [createTextPart("Follow up")] },
+      ];
+      const { container } = render(<MessagesArea {...defaultProps} messages={msgs} />);
+      expect(container.querySelector(".checkpointDivider")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/PermissionView.test.tsx b/webview/__tests__/components/organisms/PermissionView.test.tsx
new file mode 100644
index 0000000..87c925d
--- /dev/null
+++ b/webview/__tests__/components/organisms/PermissionView.test.tsx
@@ -0,0 +1,64 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PermissionView } from "../../../components/organisms/PermissionView";
+import { postMessage } from "../../../vscode-api";
+import { createPermission } from "../../factories";
+
+describe("PermissionView", () => {
+  const defaultProps = {
+    permission: createPermission({ title: "Allow file write?" }),
+    activeSessionId: "session-1",
+  };
+
+  // when rendered
+  context("レンダリングした場合", () => {
+    // renders the permission title
+    it("パーミッションタイトルを表示すること", () => {
+      const { container } = render(<PermissionView {...defaultProps} />);
+      expect(container.querySelector(".title")?.textContent).toBe("Allow file write?");
+    });
+
+    // renders three action buttons
+    it("3 つのアクションボタンをレンダリングすること", () => {
+      const { container } = render(<PermissionView {...defaultProps} />);
+      expect(container.querySelectorAll(".actions button")).toHaveLength(3);
+    });
+  });
+
+  // when Allow button is clicked
+  context("Allow ボタンをクリックした場合", () => {
+    // sends always response
+    it("always レスポンスを送信すること", () => {
+      const { container } = render(<PermissionView {...defaultProps} />);
+      const buttons = container.querySelectorAll(".actions button");
+      fireEvent.click(buttons[0]!);
+      expect(postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({ type: "replyPermission", response: "always" }),
+      );
+    });
+  });
+
+  // when Once button is clicked
+  context("Once ボタンをクリックした場合", () => {
+    // sends once response
+    it("once レスポンスを送信すること", () => {
+      const { container } = render(<PermissionView {...defaultProps} />);
+      const buttons = container.querySelectorAll(".actions button");
+      fireEvent.click(buttons[1]!);
+      expect(postMessage).toHaveBeenCalledWith(expect.objectContaining({ type: "replyPermission", response: "once" }));
+    });
+  });
+
+  // when Deny button is clicked
+  context("Deny ボタンをクリックした場合", () => {
+    // sends reject response
+    it("reject レスポンスを送信すること", () => {
+      const { container } = render(<PermissionView {...defaultProps} />);
+      const buttons = container.querySelectorAll(".actions button");
+      fireEvent.click(buttons[2]!);
+      expect(postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({ type: "replyPermission", response: "reject" }),
+      );
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/SessionList.test.tsx b/webview/__tests__/components/organisms/SessionList.test.tsx
new file mode 100644
index 0000000..23d0aa6
--- /dev/null
+++ b/webview/__tests__/components/organisms/SessionList.test.tsx
@@ -0,0 +1,118 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { formatRelativeTime, SessionList } from "../../../components/organisms/SessionList";
+import { en } from "../../../locales/en";
+import { ja } from "../../../locales/ja";
+import { createSession } from "../../factories";
+
+const sessions = [createSession({ id: "s1", title: "Session 1" }), createSession({ id: "s2", title: "Session 2" })];
+
+const defaultProps = {
+  sessions,
+  activeSessionId: "s1",
+  onSelect: vi.fn(),
+  onDelete: vi.fn(),
+  onClose: vi.fn(),
+};
+
+describe("SessionList", () => {
+  // when rendered with sessions
+  context("セッションがある場合", () => {
+    // renders all session items
+    it("全セッションアイテムをレンダリングすること", () => {
+      const { container } = render(<SessionList {...defaultProps} />);
+      expect(container.querySelectorAll(".item")).toHaveLength(2);
+    });
+
+    // highlights the active session
+    it("アクティブセッションをハイライトすること", () => {
+      const { container } = render(<SessionList {...defaultProps} />);
+      expect(container.querySelector(".item.active")).toBeInTheDocument();
+    });
+  });
+
+  // when a session is clicked
+  context("セッションをクリックした場合", () => {
+    // calls onSelect
+    it("onSelect が呼ばれること", () => {
+      const onSelect = vi.fn();
+      const { container } = render(<SessionList {...defaultProps} onSelect={onSelect} />);
+      fireEvent.click(container.querySelectorAll(".item")[1]!);
+      expect(onSelect).toHaveBeenCalledWith("s2");
+    });
+  });
+
+  // when delete button is clicked
+  context("削除ボタンをクリックした場合", () => {
+    // calls onDelete
+    it("onDelete が呼ばれること", () => {
+      const onDelete = vi.fn();
+      const { container } = render(<SessionList {...defaultProps} onDelete={onDelete} />);
+      fireEvent.click(container.querySelector(".itemDelete")!);
+      expect(onDelete).toHaveBeenCalledWith("s1");
+    });
+  });
+
+  // when there are no sessions
+  context("セッションがない場合", () => {
+    // renders empty message
+    it("空メッセージを表示すること", () => {
+      const { container } = render(<SessionList {...defaultProps} sessions={[]} />);
+      expect(container.querySelector(".item")).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe("formatRelativeTime", () => {
+  // when timestamp is less than 60 seconds ago
+  context("60秒未満前の場合", () => {
+    // returns "now" in English
+    it('英語で "now" を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 30_000, en)).toBe("now");
+    });
+
+    // returns "今" in Japanese
+    it('日本語で "今" を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 30_000, ja)).toBe("今");
+    });
+  });
+
+  // when timestamp is minutes ago
+  context("数分前の場合", () => {
+    // returns minutes in English format
+    it('英語で "5m" 形式を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 5 * 60_000, en)).toBe("5m");
+    });
+
+    // returns minutes in Japanese format
+    it('日本語で "5分" 形式を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 5 * 60_000, ja)).toBe("5分");
+    });
+  });
+
+  // when timestamp is hours ago
+  context("数時間前の場合", () => {
+    // returns hours in English format
+    it('英語で "3h" 形式を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 3 * 3_600_000, en)).toBe("3h");
+    });
+
+    // returns hours in Japanese format
+    it('日本語で "3時間" 形式を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 3 * 3_600_000, ja)).toBe("3時間");
+    });
+  });
+
+  // when timestamp is days ago
+  context("数日前の場合", () => {
+    // returns days in English format
+    it('英語で "2d" 形式を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 2 * 86_400_000, en)).toBe("2d");
+    });
+
+    // returns days in Japanese format
+    it('日本語で "2日" 形式を返すこと', () => {
+      expect(formatRelativeTime(Date.now() - 2 * 86_400_000, ja)).toBe("2日");
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/ToolConfigPanel.test.tsx b/webview/__tests__/components/organisms/ToolConfigPanel.test.tsx
new file mode 100644
index 0000000..4e66f98
--- /dev/null
+++ b/webview/__tests__/components/organisms/ToolConfigPanel.test.tsx
@@ -0,0 +1,52 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ToolConfigPanel } from "../../../components/organisms/ToolConfigPanel";
+
+const defaultProps = {
+  paths: { home: "/home", config: "/config", state: "/state", directory: "/project" },
+  onOpenConfigFile: vi.fn(),
+  onClose: vi.fn(),
+  localeSetting: "auto" as const,
+  onLocaleSettingChange: vi.fn(),
+};
+
+describe("ToolConfigPanel", () => {
+  // when rendered
+  context("レンダリングした場合", () => {
+    // renders the panel
+    it("パネルをレンダリングすること", () => {
+      const { container } = render(<ToolConfigPanel {...defaultProps} />);
+      expect(container.querySelector(".root")).toBeInTheDocument();
+    });
+
+    // renders close button
+    it("閉じるボタンをレンダリングすること", () => {
+      const { container } = render(<ToolConfigPanel {...defaultProps} />);
+      expect(container.querySelector(".muted.sm")).toBeInTheDocument();
+    });
+
+    // renders language options
+    it("言語オプションをレンダリングすること", () => {
+      const { container } = render(<ToolConfigPanel {...defaultProps} />);
+      expect(container.querySelectorAll("input[name='locale']")).toHaveLength(3);
+    });
+  });
+
+  // when paths are provided
+  context("paths が提供されている場合", () => {
+    // renders config file links
+    it("設定ファイルリンクをレンダリングすること", () => {
+      const { container } = render(<ToolConfigPanel {...defaultProps} />);
+      expect(container.querySelectorAll(".footer button")).toHaveLength(2);
+    });
+  });
+
+  // when paths are null
+  context("paths が null の場合", () => {
+    // does not render config file links
+    it("設定ファイルリンクをレンダリングしないこと", () => {
+      const { container } = render(<ToolConfigPanel {...defaultProps} paths={null} />);
+      expect(container.querySelector(".footer")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/ToolPartView.test.tsx b/webview/__tests__/components/organisms/ToolPartView.test.tsx
new file mode 100644
index 0000000..e018ef4
--- /dev/null
+++ b/webview/__tests__/components/organisms/ToolPartView.test.tsx
@@ -0,0 +1,103 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ToolPartView } from "../../../components/organisms/ToolPartView";
+import { createToolPart } from "../../factories";
+
+describe("ToolPartView", () => {
+  // when rendered with a completed tool part
+  context("completed 状態のツールパートの場合", () => {
+    // renders the tool part header
+    it("ツールパートヘッダーをレンダリングすること", () => {
+      const part = createToolPart("file_read");
+      const { container } = render(<ToolPartView part={part} />);
+      expect(container.querySelector(".header")).toBeInTheDocument();
+    });
+
+    // renders the action icon
+    it("アクションアイコンをレンダリングすること", () => {
+      const part = createToolPart("file_read");
+      const { container } = render(<ToolPartView part={part} />);
+      expect(container.querySelector(".icon")).toBeInTheDocument();
+    });
+
+    // renders the action label
+    it("アクションラベルをレンダリングすること", () => {
+      const part = createToolPart("file_read");
+      const { container } = render(<ToolPartView part={part} />);
+      expect(container.querySelector(".action")).toBeInTheDocument();
+    });
+  });
+
+  // when header is clicked
+  context("ヘッダーをクリックした場合", () => {
+    // shows the body
+    it("ボディを表示すること", () => {
+      const part = createToolPart("file_read", {
+        state: { status: "completed", title: "test", input: {}, output: "result" },
+      } as any);
+      const { container } = render(<ToolPartView part={part} />);
+      fireEvent.click(container.querySelector(".header")!);
+      expect(container.querySelector(".body")).toBeInTheDocument();
+    });
+  });
+
+  // when tool is in running state
+  context("running 状態の場合", () => {
+    // renders the spinner icon
+    it("スピナーアイコンをレンダリングすること", () => {
+      const part = createToolPart("bash", {
+        state: { status: "running", title: "running...", input: {} },
+      } as any);
+      const { container } = render(<ToolPartView part={part} />);
+      expect(container.querySelector(".spinner")).toBeInTheDocument();
+    });
+  });
+
+  // when tool is in error state
+  context("error 状態の場合", () => {
+    // renders error icon
+    it("エラーアイコンをレンダリングすること", () => {
+      const part = createToolPart("bash", {
+        state: { status: "error", title: "failed", input: {}, error: "something went wrong" },
+      } as any);
+      const { container } = render(<ToolPartView part={part} />);
+      expect(container.querySelector(".icon svg")).toBeInTheDocument();
+    });
+  });
+
+  // when expanded and has file edit input
+  context("展開中でファイル編集入力がある場合", () => {
+    // renders DiffView
+    it("DiffView をレンダリングすること", () => {
+      const part = createToolPart("file_edit", {
+        state: {
+          status: "completed",
+          title: "test.ts",
+          input: { oldString: "old", newString: "new", filePath: "test.ts" },
+          output: "ok",
+        },
+      } as any);
+      const { container } = render(<ToolPartView part={part} />);
+      fireEvent.click(container.querySelector(".header")!);
+      expect(container.querySelector("[data-testid='diff-view']")).toBeInTheDocument();
+    });
+  });
+
+  // when expanded and has file create input
+  context("展開中でファイル作成入力がある場合", () => {
+    // renders FileCreateView
+    it("FileCreateView をレンダリングすること", () => {
+      const part = createToolPart("file_write", {
+        state: {
+          status: "completed",
+          title: "new.ts",
+          input: { content: "new content", filePath: "new.ts" },
+          output: "ok",
+        },
+      } as any);
+      const { container } = render(<ToolPartView part={part} />);
+      fireEvent.click(container.querySelector(".header")!);
+      expect(container.querySelector("[data-testid='diff-view']")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/webview/__tests__/hooks/useClickOutside.test.ts b/webview/__tests__/hooks/useClickOutside.test.ts
new file mode 100644
index 0000000..fb9043b
--- /dev/null
+++ b/webview/__tests__/hooks/useClickOutside.test.ts
@@ -0,0 +1,160 @@
+import { act, renderHook } from "@testing-library/react";
+import { createRef, type RefObject } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { useClickOutside } from "../../hooks/useClickOutside";
+
+/** mousedown イベントを指定ターゲットで発火するヘルパー */
+function fireMousedown(target: EventTarget) {
+  const event = new MouseEvent("mousedown", { bubbles: true });
+  Object.defineProperty(event, "target", { value: target });
+  document.dispatchEvent(event);
+}
+
+/** ダミー DOM 要素を作成し、contains を制御できるようにする */
+function createMockElement(containsTarget: boolean): Element {
+  const el = document.createElement("div");
+  vi.spyOn(el, "contains").mockReturnValue(containsTarget);
+  return el;
+}
+
+describe("useClickOutside", () => {
+  // single ref — click outside fires callback
+  context("単一 ref で外側をクリックした場合", () => {
+    // fires callback on outside click
+    it("コールバックが呼ばれること", () => {
+      const callback = vi.fn();
+      const ref = createRef<Element>() as RefObject<Element | null>;
+      (ref as { current: Element }).current = createMockElement(false);
+
+      renderHook(() => useClickOutside(ref, callback));
+      act(() => fireMousedown(document.body));
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // single ref — click inside does not fire callback
+  context("単一 ref で内側をクリックした場合", () => {
+    // does not fire callback on inside click
+    it("コールバックが呼ばれないこと", () => {
+      const callback = vi.fn();
+      const ref = createRef<Element>() as RefObject<Element | null>;
+      (ref as { current: Element }).current = createMockElement(true);
+
+      renderHook(() => useClickOutside(ref, callback));
+      act(() => fireMousedown(document.body));
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  // enabled = false — does not fire callback
+  context("enabled が false の場合", () => {
+    // does not register listener when disabled
+    it("コールバックが呼ばれないこと", () => {
+      const callback = vi.fn();
+      const ref = createRef<Element>() as RefObject<Element | null>;
+      (ref as { current: Element }).current = createMockElement(false);
+
+      renderHook(() => useClickOutside(ref, callback, false));
+      act(() => fireMousedown(document.body));
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  // enabled toggles — registers and unregisters listener
+  context("enabled が true から false に変わった場合", () => {
+    // unregisters listener when disabled
+    it("リスナーが解除されコールバックが呼ばれないこと", () => {
+      const callback = vi.fn();
+      const ref = createRef<Element>() as RefObject<Element | null>;
+      (ref as { current: Element }).current = createMockElement(false);
+
+      const { rerender } = renderHook(({ enabled }) => useClickOutside(ref, callback, enabled), {
+        initialProps: { enabled: true },
+      });
+
+      // 有効時: 外部クリックで発火
+      act(() => fireMousedown(document.body));
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // 無効に切り替え
+      rerender({ enabled: false });
+      act(() => fireMousedown(document.body));
+
+      // 追加で呼ばれていないこと
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // multiple refs — click outside all refs fires callback
+  context("複数 ref で全要素の外側をクリックした場合", () => {
+    // fires callback when outside all refs
+    it("コールバックが呼ばれること", () => {
+      const callback = vi.fn();
+      const ref1 = createRef<Element>() as RefObject<Element | null>;
+      const ref2 = createRef<Element>() as RefObject<Element | null>;
+      (ref1 as { current: Element }).current = createMockElement(false);
+      (ref2 as { current: Element }).current = createMockElement(false);
+
+      renderHook(() => useClickOutside([ref1, ref2], callback));
+      act(() => fireMousedown(document.body));
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // multiple refs — click inside one ref does not fire callback
+  context("複数 ref でいずれかの要素の内側をクリックした場合", () => {
+    // does not fire callback when inside one of the refs
+    it("コールバックが呼ばれないこと", () => {
+      const callback = vi.fn();
+      const ref1 = createRef<Element>() as RefObject<Element | null>;
+      const ref2 = createRef<Element>() as RefObject<Element | null>;
+      (ref1 as { current: Element }).current = createMockElement(false);
+      (ref2 as { current: Element }).current = createMockElement(true); // inside ref2
+
+      renderHook(() => useClickOutside([ref1, ref2], callback));
+      act(() => fireMousedown(document.body));
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  // ref.current is null — fires callback (element not mounted)
+  context("ref.current が null の場合", () => {
+    // treats null ref as outside
+    it("コールバックが呼ばれること", () => {
+      const callback = vi.fn();
+      const ref = createRef<Element>() as RefObject<Element | null>;
+      // ref.current is null by default
+
+      renderHook(() => useClickOutside(ref, callback));
+      act(() => fireMousedown(document.body));
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // callback update is picked up without re-subscribing
+  context("コールバックが更新された場合", () => {
+    // uses the latest callback
+    it("最新のコールバックが呼ばれること", () => {
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+      const ref = createRef<Element>() as RefObject<Element | null>;
+      (ref as { current: Element }).current = createMockElement(false);
+
+      const { rerender } = renderHook(({ cb }) => useClickOutside(ref, cb), {
+        initialProps: { cb: callback1 },
+      });
+
+      rerender({ cb: callback2 });
+      act(() => fireMousedown(document.body));
+
+      expect(callback1).not.toHaveBeenCalled();
+      expect(callback2).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/webview/__tests__/hooks/useLocale.test.ts b/webview/__tests__/hooks/useLocale.test.ts
new file mode 100644
index 0000000..f7be8f1
--- /dev/null
+++ b/webview/__tests__/hooks/useLocale.test.ts
@@ -0,0 +1,62 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useLocale } from "../../hooks/useLocale";
+
+describe("useLocale", () => {
+  // initial state
+  context("初期状態の場合", () => {
+    // localeSetting defaults to "auto"
+    it("localeSetting が 'auto' であること", () => {
+      const { result } = renderHook(() => useLocale());
+      expect(result.current.localeSetting).toBe("auto");
+    });
+
+    // vscodeLanguage defaults to "en"
+    it("vscodeLanguage が 'en' であること", () => {
+      const { result } = renderHook(() => useLocale());
+      expect(result.current.vscodeLanguage).toBe("en");
+    });
+
+    // strings is an object (locale strings loaded)
+    it("strings がオブジェクトであること", () => {
+      const { result } = renderHook(() => useLocale());
+      expect(typeof result.current.strings).toBe("object");
+    });
+  });
+
+  // handleLocaleSettingChange
+  context("handleLocaleSettingChange を呼んだ場合", () => {
+    // updates localeSetting
+    it("localeSetting が更新されること", () => {
+      const { result } = renderHook(() => useLocale());
+      act(() => result.current.handleLocaleSettingChange("ja"));
+      expect(result.current.localeSetting).toBe("ja");
+    });
+
+    // changes resolved strings when set to "ja"
+    it("strings が日本語に切り替わること", () => {
+      const { result } = renderHook(() => useLocale());
+      act(() => result.current.handleLocaleSettingChange("ja"));
+      // resolvedLocale should be "ja"
+      expect(result.current.resolvedLocale).toBe("ja");
+    });
+  });
+
+  // setVscodeLanguage
+  context("setVscodeLanguage で言語を設定した場合", () => {
+    // updates vscodeLanguage
+    it("vscodeLanguage が更新されること", () => {
+      const { result } = renderHook(() => useLocale());
+      act(() => result.current.setVscodeLanguage("ja"));
+      expect(result.current.vscodeLanguage).toBe("ja");
+    });
+
+    // resolves auto setting to vscodeLanguage
+    it("localeSetting が auto の場合に vscodeLanguage に基づいてロケールを解決すること", () => {
+      const { result } = renderHook(() => useLocale());
+      // localeSetting is "auto" by default
+      act(() => result.current.setVscodeLanguage("ja"));
+      expect(result.current.resolvedLocale).toBe("ja");
+    });
+  });
+});
diff --git a/webview/__tests__/hooks/useMessages.test.ts b/webview/__tests__/hooks/useMessages.test.ts
new file mode 100644
index 0000000..85ed6b8
--- /dev/null
+++ b/webview/__tests__/hooks/useMessages.test.ts
@@ -0,0 +1,180 @@
+import type { Event } from "@opencode-ai/sdk";
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { type MessageWithParts, useMessages } from "../../hooks/useMessages";
+
+describe("useMessages", () => {
+  // initial state
+  context("初期状態の場合", () => {
+    // messages is empty
+    it("messages が空配列であること", () => {
+      const { result } = renderHook(() => useMessages());
+      expect(result.current.messages).toEqual([]);
+    });
+
+    // inputTokens is 0
+    it("inputTokens が 0 であること", () => {
+      const { result } = renderHook(() => useMessages());
+      expect(result.current.inputTokens).toBe(0);
+    });
+
+    // latestTodos is empty
+    it("latestTodos が空配列であること", () => {
+      const { result } = renderHook(() => useMessages());
+      expect(result.current.latestTodos).toEqual([]);
+    });
+
+    // prefillText is empty
+    it("prefillText が空文字であること", () => {
+      const { result } = renderHook(() => useMessages());
+      expect(result.current.prefillText).toBe("");
+    });
+  });
+
+  // setMessages
+  context("setMessages で直接設定した場合", () => {
+    // sets messages
+    it("messages が設定されること", () => {
+      const { result } = renderHook(() => useMessages());
+      const msg = { info: { id: "m1" }, parts: [] } as unknown as MessageWithParts;
+      act(() => result.current.setMessages([msg]));
+      expect(result.current.messages).toHaveLength(1);
+    });
+  });
+
+  // inputTokens derivation
+  context("messages に step-finish パートがある場合", () => {
+    // sums input tokens from step-finish parts
+    it("inputTokens がトークン合計値を返すこと", () => {
+      const { result } = renderHook(() => useMessages());
+      const msgs: MessageWithParts[] = [
+        {
+          info: { id: "m1" } as any,
+          parts: [
+            { id: "p1", type: "step-finish", tokens: { input: 100, output: 50 } } as any,
+            { id: "p2", type: "step-finish", tokens: { input: 200, output: 80 } } as any,
+          ],
+        },
+      ];
+      act(() => result.current.setMessages(msgs));
+      expect(result.current.inputTokens).toBe(300);
+    });
+  });
+
+  // prefill management
+  context("setPrefillText で値を設定した場合", () => {
+    // consumePrefill clears the text
+    it("consumePrefill で空文字にリセットされること", () => {
+      const { result } = renderHook(() => useMessages());
+      act(() => result.current.setPrefillText("hello"));
+      act(() => result.current.consumePrefill());
+      expect(result.current.prefillText).toBe("");
+    });
+  });
+
+  // handleMessageEvent for message.updated
+  context("message.updated イベントを受信した場合", () => {
+    // adds new message when not existing
+    it("新しいメッセージを追加すること", () => {
+      const { result } = renderHook(() => useMessages());
+      const event = {
+        type: "message.updated",
+        properties: { info: { id: "m1", role: "user" } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect(result.current.messages).toHaveLength(1);
+    });
+
+    // updates existing message info
+    it("既存メッセージの info を更新すること", () => {
+      const { result } = renderHook(() => useMessages());
+      const msg: MessageWithParts = { info: { id: "m1", role: "user" } as any, parts: [] };
+      act(() => result.current.setMessages([msg]));
+      const event = {
+        type: "message.updated",
+        properties: { info: { id: "m1", role: "user", metadata: { summary: "updated" } } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect((result.current.messages[0].info as any).metadata.summary).toBe("updated");
+    });
+  });
+
+  // handleMessageEvent for message.part.updated
+  context("message.part.updated イベントを受信した場合", () => {
+    // adds new part to existing message
+    it("既存メッセージに新しいパートを追加すること", () => {
+      const { result } = renderHook(() => useMessages());
+      const msg: MessageWithParts = { info: { id: "m1" } as any, parts: [] };
+      act(() => result.current.setMessages([msg]));
+      const event = {
+        type: "message.part.updated",
+        properties: { part: { id: "p1", messageID: "m1", type: "text", text: "hello" } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect(result.current.messages[0].parts).toHaveLength(1);
+    });
+
+    // updates existing part in message
+    it("既存パートを更新すること", () => {
+      const { result } = renderHook(() => useMessages());
+      const msg: MessageWithParts = {
+        info: { id: "m1" } as any,
+        parts: [{ id: "p1", messageID: "m1", type: "text", text: "old" } as any],
+      };
+      act(() => result.current.setMessages([msg]));
+      const event = {
+        type: "message.part.updated",
+        properties: { part: { id: "p1", messageID: "m1", type: "text", text: "new" } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect((result.current.messages[0].parts[0] as any).text).toBe("new");
+    });
+  });
+
+  // handleMessageEvent for message.removed
+  context("message.removed イベントを受信した場合", () => {
+    // removes the message
+    it("該当メッセージを削除すること", () => {
+      const { result } = renderHook(() => useMessages());
+      const msgs: MessageWithParts[] = [
+        { info: { id: "m1" } as any, parts: [] },
+        { info: { id: "m2" } as any, parts: [] },
+      ];
+      act(() => result.current.setMessages(msgs));
+      const event = {
+        type: "message.removed",
+        properties: { messageID: "m1" },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect(result.current.messages).toHaveLength(1);
+    });
+  });
+
+  // latestTodos derivation
+  context("messages に todowrite ツールの完了出力がある場合", () => {
+    // parses todos from completed tool output
+    it("latestTodos にパース結果を返すこと", () => {
+      const { result } = renderHook(() => useMessages());
+      const msgs: MessageWithParts[] = [
+        {
+          info: { id: "m1" } as any,
+          parts: [
+            {
+              id: "p1",
+              messageID: "m1",
+              type: "tool",
+              tool: "todowrite",
+              state: {
+                status: "completed",
+                output: JSON.stringify([{ content: "task1", status: "done" }]),
+                input: {},
+              },
+            } as any,
+          ],
+        },
+      ];
+      act(() => result.current.setMessages(msgs));
+      expect(result.current.latestTodos).toEqual([{ content: "task1", status: "done" }]);
+    });
+  });
+});
diff --git a/webview/__tests__/hooks/usePermissions.test.ts b/webview/__tests__/hooks/usePermissions.test.ts
new file mode 100644
index 0000000..fd1fe3e
--- /dev/null
+++ b/webview/__tests__/hooks/usePermissions.test.ts
@@ -0,0 +1,73 @@
+import type { Event } from "@opencode-ai/sdk";
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { usePermissions } from "../../hooks/usePermissions";
+
+describe("usePermissions", () => {
+  // initial state
+  context("初期状態の場合", () => {
+    // permissions is empty
+    it("permissions が空の Map であること", () => {
+      const { result } = renderHook(() => usePermissions());
+      expect(result.current.permissions.size).toBe(0);
+    });
+  });
+
+  // permission.updated
+  context("permission.updated イベントを受信した場合", () => {
+    // adds permission to the map
+    it("permissions に追加されること", () => {
+      const { result } = renderHook(() => usePermissions());
+      const event = {
+        type: "permission.updated",
+        properties: { id: "perm1", title: "allow bash" },
+      } as unknown as Event;
+      act(() => result.current.handlePermissionEvent(event));
+      expect(result.current.permissions.has("perm1")).toBe(true);
+    });
+
+    // stores the permission data
+    it("permission のデータが保持されること", () => {
+      const { result } = renderHook(() => usePermissions());
+      const permission = { id: "perm1", title: "allow bash" };
+      const event = { type: "permission.updated", properties: permission } as unknown as Event;
+      act(() => result.current.handlePermissionEvent(event));
+      expect(result.current.permissions.get("perm1")).toEqual(permission);
+    });
+  });
+
+  // permission.replied
+  context("permission.replied イベントを受信した場合", () => {
+    // removes permission from the map
+    it("permissions から削除されること", () => {
+      const { result } = renderHook(() => usePermissions());
+      // first add
+      const addEvent = {
+        type: "permission.updated",
+        properties: { id: "perm1", title: "allow bash" },
+      } as unknown as Event;
+      act(() => result.current.handlePermissionEvent(addEvent));
+      // then reply
+      const replyEvent = {
+        type: "permission.replied",
+        properties: { permissionID: "perm1" },
+      } as unknown as Event;
+      act(() => result.current.handlePermissionEvent(replyEvent));
+      expect(result.current.permissions.has("perm1")).toBe(false);
+    });
+  });
+
+  // unrelated events
+  context("無関係なイベントを受信した場合", () => {
+    // does not change permissions
+    it("permissions が変わらないこと", () => {
+      const { result } = renderHook(() => usePermissions());
+      const event = {
+        type: "session.updated",
+        properties: { id: "session1" },
+      } as unknown as Event;
+      act(() => result.current.handlePermissionEvent(event));
+      expect(result.current.permissions.size).toBe(0);
+    });
+  });
+});
diff --git a/webview/__tests__/hooks/useProviders.test.ts b/webview/__tests__/hooks/useProviders.test.ts
new file mode 100644
index 0000000..1bf1f37
--- /dev/null
+++ b/webview/__tests__/hooks/useProviders.test.ts
@@ -0,0 +1,99 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useProviders } from "../../hooks/useProviders";
+import { postMessage } from "../../vscode-api";
+
+describe("useProviders", () => {
+  // initial state
+  context("初期状態の場合", () => {
+    // providers is empty
+    it("providers が空配列であること", () => {
+      const { result } = renderHook(() => useProviders());
+      expect(result.current.providers).toEqual([]);
+    });
+
+    // selectedModel is null
+    it("selectedModel が null であること", () => {
+      const { result } = renderHook(() => useProviders());
+      expect(result.current.selectedModel).toBeNull();
+    });
+
+    // allProvidersData is null
+    it("allProvidersData が null であること", () => {
+      const { result } = renderHook(() => useProviders());
+      expect(result.current.allProvidersData).toBeNull();
+    });
+
+    // contextLimit is 0
+    it("contextLimit が 0 であること", () => {
+      const { result } = renderHook(() => useProviders());
+      expect(result.current.contextLimit).toBe(0);
+    });
+  });
+
+  // handleModelSelect
+  context("handleModelSelect を呼んだ場合", () => {
+    // updates selectedModel
+    it("selectedModel が更新されること", () => {
+      const { result } = renderHook(() => useProviders());
+      const model = { providerID: "openai", modelID: "gpt-4" };
+      act(() => result.current.handleModelSelect(model));
+      expect(result.current.selectedModel).toEqual(model);
+    });
+
+    // sends setModel message
+    it("setModel メッセージを送信すること", () => {
+      const { result } = renderHook(() => useProviders());
+      const model = { providerID: "openai", modelID: "gpt-4" };
+      act(() => result.current.handleModelSelect(model));
+      expect(postMessage).toHaveBeenCalledWith({ type: "setModel", model: "openai/gpt-4" });
+    });
+  });
+
+  // contextLimit derivation
+  context("providers と selectedModel が設定されている場合", () => {
+    // calculates context limit from provider model
+    it("モデルのコンテキストリミットを返すこと", () => {
+      const { result } = renderHook(() => useProviders());
+      const providers = [
+        {
+          id: "openai",
+          models: {
+            "gpt-4": { limit: { context: 128000 } },
+          },
+        },
+      ] as any[];
+      act(() => {
+        result.current.setProviders(providers);
+        result.current.setSelectedModel({ providerID: "openai", modelID: "gpt-4" });
+      });
+      expect(result.current.contextLimit).toBe(128000);
+    });
+  });
+
+  // setters
+  context("setters でステートを更新する場合", () => {
+    // setProviders updates providers
+    it("setProviders で providers を設定できること", () => {
+      const { result } = renderHook(() => useProviders());
+      const providers = [{ id: "anthropic", models: {} }] as any[];
+      act(() => result.current.setProviders(providers));
+      expect(result.current.providers).toEqual(providers);
+    });
+
+    // setAllProvidersData updates allProvidersData
+    it("setAllProvidersData で allProvidersData を設定できること", () => {
+      const { result } = renderHook(() => useProviders());
+      const data = { anthropic: { name: "Anthropic", models: {} } } as any;
+      act(() => result.current.setAllProvidersData(data));
+      expect(result.current.allProvidersData).toEqual(data);
+    });
+
+    // setSelectedModel with function updater
+    it("setSelectedModel に関数を渡してモデルを設定できること", () => {
+      const { result } = renderHook(() => useProviders());
+      act(() => result.current.setSelectedModel(() => ({ providerID: "openai", modelID: "gpt-4o" })));
+      expect(result.current.selectedModel).toEqual({ providerID: "openai", modelID: "gpt-4o" });
+    });
+  });
+});
diff --git a/webview/__tests__/hooks/useSession.test.ts b/webview/__tests__/hooks/useSession.test.ts
new file mode 100644
index 0000000..700abd7
--- /dev/null
+++ b/webview/__tests__/hooks/useSession.test.ts
@@ -0,0 +1,157 @@
+import type { Event } from "@opencode-ai/sdk";
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useSession } from "../../hooks/useSession";
+import { postMessage } from "../../vscode-api";
+
+describe("useSession", () => {
+  // session list management
+  context("セッション一覧を管理する場合", () => {
+    // sets sessions via setSessions
+    it("setSessions でセッション一覧を設定できること", () => {
+      const { result } = renderHook(() => useSession());
+      const session = { id: "s1" } as any;
+      act(() => result.current.setSessions([session]));
+      expect(result.current.sessions).toEqual([session]);
+    });
+
+    // sets activeSession via setActiveSession
+    it("setActiveSession でアクティブセッションを設定できること", () => {
+      const { result } = renderHook(() => useSession());
+      const session = { id: "s1" } as any;
+      act(() => result.current.setActiveSession(session));
+      expect(result.current.activeSession).toEqual(session);
+    });
+  });
+
+  // handleNewSession action
+  context("handleNewSession を呼んだ場合", () => {
+    // sends createSession message
+    it("createSession メッセージを送信すること", () => {
+      const { result } = renderHook(() => useSession());
+      act(() => result.current.handleNewSession());
+      expect(postMessage).toHaveBeenCalledWith({ type: "createSession" });
+    });
+
+    // closes session list
+    it("セッションリストを閉じること", () => {
+      const { result } = renderHook(() => useSession());
+      act(() => result.current.toggleSessionList());
+      act(() => result.current.handleNewSession());
+      expect(result.current.showSessionList).toBe(false);
+    });
+  });
+
+  // handleSelectSession action
+  context("handleSelectSession を呼んだ場合", () => {
+    // sends selectSession message
+    it("selectSession メッセージを送信すること", () => {
+      const { result } = renderHook(() => useSession());
+      act(() => result.current.handleSelectSession("s1"));
+      expect(postMessage).toHaveBeenCalledWith({ type: "selectSession", sessionId: "s1" });
+    });
+
+    // closes session list
+    it("セッションリストを閉じること", () => {
+      const { result } = renderHook(() => useSession());
+      act(() => result.current.toggleSessionList());
+      act(() => result.current.handleSelectSession("s1"));
+      expect(result.current.showSessionList).toBe(false);
+    });
+  });
+
+  // handleDeleteSession action
+  context("handleDeleteSession を呼んだ場合", () => {
+    // sends deleteSession message
+    it("deleteSession メッセージを送信すること", () => {
+      const { result } = renderHook(() => useSession());
+      act(() => result.current.handleDeleteSession("s1"));
+      expect(postMessage).toHaveBeenCalledWith({ type: "deleteSession", sessionId: "s1" });
+    });
+  });
+
+  // toggleSessionList action
+  context("toggleSessionList を呼んだ場合", () => {
+    // toggles showSessionList
+    it("showSessionList をトグルすること", () => {
+      const { result } = renderHook(() => useSession());
+      expect(result.current.showSessionList).toBe(false);
+      act(() => result.current.toggleSessionList());
+      expect(result.current.showSessionList).toBe(true);
+    });
+  });
+
+  // handleSessionEvent for session.status
+  context("session.status イベントを受信した場合", () => {
+    // sets sessionBusy to true when busy
+    it("busy のとき sessionBusy が true になること", () => {
+      const { result } = renderHook(() => useSession());
+      const event = { type: "session.status", properties: { status: { type: "busy" } } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(event));
+      expect(result.current.sessionBusy).toBe(true);
+    });
+
+    // sets sessionBusy to false when idle
+    it("idle のとき sessionBusy が false になること", () => {
+      const { result } = renderHook(() => useSession());
+      const busyEvent = { type: "session.status", properties: { status: { type: "busy" } } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(busyEvent));
+      const idleEvent = { type: "session.status", properties: { status: { type: "idle" } } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(idleEvent));
+      expect(result.current.sessionBusy).toBe(false);
+    });
+  });
+
+  // handleSessionEvent for session.updated
+  context("session.updated イベントを受信した場合", () => {
+    // updates matching session in sessions list
+    it("sessions 内の該当セッションを更新すること", () => {
+      const { result } = renderHook(() => useSession());
+      const s1 = { id: "s1", title: "old" } as any;
+      act(() => result.current.setSessions([s1]));
+      const updated = { id: "s1", title: "new" } as any;
+      const event = { type: "session.updated", properties: { info: updated } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(event));
+      expect(result.current.sessions[0].title).toBe("new");
+    });
+
+    // updates activeSession if it matches
+    it("アクティブセッションが該当する場合は更新すること", () => {
+      const { result } = renderHook(() => useSession());
+      const s1 = { id: "s1", title: "old" } as any;
+      act(() => result.current.setActiveSession(s1));
+      const updated = { id: "s1", title: "new" } as any;
+      const event = { type: "session.updated", properties: { info: updated } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(event));
+      expect(result.current.activeSession?.title).toBe("new");
+    });
+  });
+
+  // handleSessionEvent for session.created
+  context("session.created イベントを受信した場合", () => {
+    // prepends new session to sessions list
+    it("sessions の先頭に新しいセッションを追加すること", () => {
+      const { result } = renderHook(() => useSession());
+      const existing = { id: "s1" } as any;
+      act(() => result.current.setSessions([existing]));
+      const newSession = { id: "s2" } as any;
+      const event = { type: "session.created", properties: { info: newSession } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(event));
+      expect(result.current.sessions[0].id).toBe("s2");
+    });
+  });
+
+  // handleSessionEvent for session.deleted
+  context("session.deleted イベントを受信した場合", () => {
+    // removes the deleted session from sessions list
+    it("sessions から該当セッションを削除すること", () => {
+      const { result } = renderHook(() => useSession());
+      const s1 = { id: "s1" } as any;
+      const s2 = { id: "s2" } as any;
+      act(() => result.current.setSessions([s1, s2]));
+      const event = { type: "session.deleted", properties: { info: { id: "s1" } } } as unknown as Event;
+      act(() => result.current.handleSessionEvent(event));
+      expect(result.current.sessions).toHaveLength(1);
+    });
+  });
+});
diff --git a/webview/__tests__/scenarios/03-messaging.test.tsx b/webview/__tests__/scenarios/03-messaging.test.tsx
index d78cbf7..b4d75b4 100644
--- a/webview/__tests__/scenarios/03-messaging.test.tsx
+++ b/webview/__tests__/scenarios/03-messaging.test.tsx
@@ -118,7 +118,7 @@ describe("メッセージング", () => {
 
     // StreamingIndicator shows 3 dots
     it("StreamingIndicator のドットが3つ表示されること", () => {
-      const dots = document.querySelectorAll(".streaming-dot");
+      const dots = document.querySelectorAll(".dot");
       expect(dots.length).toBe(3);
     });
 
diff --git a/webview/__tests__/scenarios/07-file-context.test.tsx b/webview/__tests__/scenarios/07-file-context.test.tsx
index 8c0ab7d..17b12c5 100644
--- a/webview/__tests__/scenarios/07-file-context.test.tsx
+++ b/webview/__tests__/scenarios/07-file-context.test.tsx
@@ -44,6 +44,7 @@ describe("ファイルコンテキスト", () => {
     expect(screen.getByPlaceholderText("Search files...")).toBeInTheDocument();
   });
 
+  // Selecting a file shows a chip and closes the picker
   // Selecting a file shows a chip and closes the picker
   context("ファイルを選択した場合", () => {
     beforeEach(async () => {
@@ -51,14 +52,14 @@ describe("ファイルコンテキスト", () => {
       const user = userEvent.setup();
       await user.click(screen.getByTitle("Add context"));
       const items = screen.getAllByText("main.ts");
-      const clickTarget = items.find((el) => el.closest(".file-picker-item"))?.closest(".file-picker-item");
-      if (!clickTarget) throw new Error("file-picker-item not found");
+      const clickTarget = items.find((el) => el.closest(".pickerList > div"))?.closest(".pickerList > div");
+      if (!clickTarget) throw new Error("list-item not found");
       await user.click(clickTarget);
     });
 
     // Chip is shown
     it("チップが表示されること", () => {
-      const chips = document.querySelectorAll(".attached-file-chip");
+      const chips = document.querySelectorAll(".chip");
       expect(chips.length).toBe(1);
     });
 
@@ -76,18 +77,18 @@ describe("ファイルコンテキスト", () => {
     // ファイルを添付
     await user.click(screen.getByTitle("Add context"));
     const items = screen.getAllByText("main.ts");
-    const clickTarget = items.find((el) => el.closest(".file-picker-item"))?.closest(".file-picker-item");
-    if (!clickTarget) throw new Error("file-picker-item not found");
+    const clickTarget = items.find((el) => el.closest(".pickerList > div"))?.closest(".pickerList > div");
+    if (!clickTarget) throw new Error("list-item not found");
     await user.click(clickTarget);
 
     // チップが表示される
-    expect(document.querySelectorAll(".attached-file-chip").length).toBe(1);
+    expect(document.querySelectorAll(".chip").length).toBe(1);
 
     // 削除ボタンをクリック
     await user.click(screen.getByTitle("Remove"));
 
     // チップが消える
-    expect(document.querySelectorAll(".attached-file-chip").length).toBe(0);
+    expect(document.querySelectorAll(".chip").length).toBe(0);
   });
 
   // # trigger shows file candidate popup
@@ -99,7 +100,7 @@ describe("ファイルコンテキスト", () => {
     await user.type(textarea, "#");
 
     // ハッシュポップアップが表示される
-    const popup = document.querySelector(".hash-popup");
+    const popup = document.querySelector("[data-testid='hash-popup']");
     expect(popup).toBeTruthy();
   });
 
@@ -126,8 +127,8 @@ describe("ファイルコンテキスト", () => {
       const user = userEvent.setup();
       textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
       await user.type(textarea, "Look at #");
-      const popup = document.querySelector(".hash-popup");
-      const popupItem = popup?.querySelector(".hash-popup-item");
+      const popup = document.querySelector("[data-testid='hash-popup']");
+      const popupItem = popup?.querySelector(":scope > div");
       await user.click(popupItem!);
     });
 
@@ -138,7 +139,7 @@ describe("ファイルコンテキスト", () => {
 
     // File chip is shown
     it("ファイルチップが表示されること", () => {
-      expect(document.querySelectorAll(".attached-file-chip").length).toBe(1);
+      expect(document.querySelectorAll(".chip").length).toBe(1);
     });
   });
 
@@ -150,8 +151,8 @@ describe("ファイルコンテキスト", () => {
     // ファイルを添付
     await user.click(screen.getByTitle("Add context"));
     const items = screen.getAllByText("main.ts");
-    const clickTarget = items.find((el) => el.closest(".file-picker-item"))?.closest(".file-picker-item");
-    if (!clickTarget) throw new Error("file-picker-item not found");
+    const clickTarget = items.find((el) => el.closest(".pickerList > div"))?.closest(".pickerList > div");
+    if (!clickTarget) throw new Error("list-item not found");
     await user.click(clickTarget);
 
     // メッセージ送信
@@ -180,7 +181,7 @@ describe("ファイルコンテキスト", () => {
     await user.click(quickAdd);
 
     // チップが表示される
-    const chips = document.querySelectorAll(".attached-file-chip");
+    const chips = document.querySelectorAll(".chip");
     expect(chips.length).toBe(1);
   });
 
@@ -191,13 +192,13 @@ describe("ファイルコンテキスト", () => {
 
     // quick-add で main.ts を添付
     await user.click(screen.getByTitle("Add src/main.ts"));
-    expect(document.querySelectorAll(".attached-file-chip").length).toBe(1);
+    expect(document.querySelectorAll(".chip").length).toBe(1);
 
     // ファイルピッカーからもう一度 main.ts を選択しようとする
     await user.click(screen.getByTitle("Add context"));
 
     // main.ts は既に添付済みなのでピッカーのリストに表示されない（フィルタされている）
-    const pickerItems = document.querySelectorAll(".file-picker-item");
+    const pickerItems = document.querySelectorAll(".pickerList > div");
     const mainInPicker = Array.from(pickerItems).find((el) => el.textContent?.includes("main.ts"));
     expect(mainInPicker).toBeFalsy();
   });
@@ -211,11 +212,11 @@ describe("ファイルコンテキスト", () => {
     await user.type(textarea, "#");
 
     // ポップアップが開いている
-    expect(document.querySelector(".hash-popup")).toBeTruthy();
+    expect(document.querySelector("[data-testid='hash-popup']")).toBeTruthy();
 
     // Escape で閉じる
     await user.keyboard("{Escape}");
-    expect(document.querySelector(".hash-popup")).toBeFalsy();
+    expect(document.querySelector("[data-testid='hash-popup']")).toBeFalsy();
   });
 
   // Space input during # trigger terminates the trigger
@@ -227,6 +228,6 @@ describe("ファイルコンテキスト", () => {
     await user.type(textarea, "#test ");
 
     // スペースを入力したのでポップアップが閉じる
-    expect(document.querySelector(".hash-popup")).toBeFalsy();
+    expect(document.querySelector("[data-testid='hash-popup']")).toBeFalsy();
   });
 });
diff --git a/webview/__tests__/scenarios/08-context-compression.test.tsx b/webview/__tests__/scenarios/08-context-compression.test.tsx
index 5ac9e14..d3e69f7 100644
--- a/webview/__tests__/scenarios/08-context-compression.test.tsx
+++ b/webview/__tests__/scenarios/08-context-compression.test.tsx
@@ -150,8 +150,8 @@ describe("コンテキストとコンプレッション", () => {
     await sendExtMessage({ type: "activeSession", session: createSession({ id: "s1" }) });
 
     // トークン 0 → ContextIndicator ボタンが存在しない
-    const button = document.querySelector(".context-indicator-button");
-    expect(button).toBeFalsy();
+    const indicator = document.querySelector(".container > .button");
+    expect(indicator).toBeFalsy();
   });
 
   // Warning color is applied at 80%+ usage
diff --git a/webview/__tests__/scenarios/10-tool-display.test.tsx b/webview/__tests__/scenarios/10-tool-display.test.tsx
index 8e64be2..fe1eca5 100644
--- a/webview/__tests__/scenarios/10-tool-display.test.tsx
+++ b/webview/__tests__/scenarios/10-tool-display.test.tsx
@@ -79,7 +79,7 @@ describe("ツール表示", () => {
     it("展開すると差分行が表示されること", async () => {
       const user = userEvent.setup();
       await user.click(screen.getByTitle("Toggle details"));
-      const diffLines = document.querySelectorAll(".tool-diff-line");
+      const diffLines = document.querySelectorAll(".line");
       expect(diffLines.length).toBeGreaterThan(0);
     });
   });
@@ -114,7 +114,7 @@ describe("ツール表示", () => {
     it("展開すると全行が add の差分が表示されること", async () => {
       const user = userEvent.setup();
       await user.click(screen.getByTitle("Toggle details"));
-      const addLines = document.querySelectorAll(".tool-diff-line-add");
+      const addLines = document.querySelectorAll(".lineAdd");
       expect(addLines.length).toBeGreaterThan(0);
     });
   });
@@ -256,7 +256,7 @@ describe("ツール表示", () => {
     });
 
     // スピナー SVG が存在する
-    const spinner = document.querySelector(".tool-part-spinner");
+    const spinner = document.querySelector(".spinner");
     expect(spinner).toBeTruthy();
   });
 
@@ -312,7 +312,7 @@ describe("ツール表示", () => {
       },
     });
 
-    const spinner = document.querySelector(".tool-part-spinner");
+    const spinner = document.querySelector(".spinner");
     expect(spinner).toBeTruthy();
   });
 
diff --git a/webview/__tests__/scenarios/12-reasoning-display.test.tsx b/webview/__tests__/scenarios/12-reasoning-display.test.tsx
index 08425ca..ff5ef4c 100644
--- a/webview/__tests__/scenarios/12-reasoning-display.test.tsx
+++ b/webview/__tests__/scenarios/12-reasoning-display.test.tsx
@@ -34,7 +34,7 @@ describe("思考表示（ReasoningPartView）", () => {
 
     beforeEach(async () => {
       await setupWithReasoningPart({ time: { created: Date.now() } });
-      part = screen.getByText("Thinking\u2026").closest(".reasoning-part");
+      part = screen.getByText("Thinking\u2026").closest(".reasoningPart");
     });
 
     // Shows Thinking label
@@ -43,13 +43,13 @@ describe("思考表示（ReasoningPartView）", () => {
     });
 
     // Has active class
-    it("active クラスが付与されること", () => {
-      expect(part).toHaveClass("active");
+    it("reasoningActive クラスが付与されること", () => {
+      expect(part).toHaveClass("reasoningActive");
     });
 
     // Shows spinner
     it("スピナーが表示されること", () => {
-      expect(part?.querySelector(".tool-part-spinner")).toBeInTheDocument();
+      expect(part?.querySelector(".spinner")).toBeInTheDocument();
     });
   });
 
@@ -59,7 +59,7 @@ describe("思考表示（ReasoningPartView）", () => {
 
     beforeEach(async () => {
       await setupWithReasoningPart({ time: { created: Date.now(), end: Date.now() } });
-      part = screen.getByText("Thought").closest(".reasoning-part");
+      part = screen.getByText("Thought").closest(".reasoningPart");
     });
 
     // Shows Thought label
@@ -67,14 +67,14 @@ describe("思考表示（ReasoningPartView）", () => {
       expect(screen.getByText("Thought")).toBeInTheDocument();
     });
 
-    // Has complete class
-    it("complete クラスが付与されること", () => {
-      expect(part).toHaveClass("complete");
+    // Has no active class (complete state)
+    it("reasoningActive クラスが付与されないこと", () => {
+      expect(part).not.toHaveClass("reasoningActive");
     });
 
     // No spinner
     it("スピナーが表示されないこと", () => {
-      expect(part?.querySelector(".tool-part-spinner")).not.toBeInTheDocument();
+      expect(part?.querySelector(".spinner")).not.toBeInTheDocument();
     });
   });
 
diff --git a/webview/__tests__/utils/diff.test.ts b/webview/__tests__/utils/diff.test.ts
new file mode 100644
index 0000000..2a954cd
--- /dev/null
+++ b/webview/__tests__/utils/diff.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+import { computeLineDiff, type DiffLine } from "../../utils/diff";
+
+describe("computeLineDiff", () => {
+  // when both strings are identical
+  context("同一文字列の場合", () => {
+    it("変更行を含まないこと", () => {
+      const result = computeLineDiff("hello\nworld", "hello\nworld");
+      expect(result.every((l) => l.type === "context")).toBe(true);
+    });
+  });
+
+  // when a line is added
+  context("行が追加された場合", () => {
+    it("add タイプの行を含むこと", () => {
+      const result = computeLineDiff("a", "a\nb");
+      expect(result.some((l) => l.type === "add" && l.text === "b")).toBe(true);
+    });
+  });
+
+  // when a line is removed
+  context("行が削除された場合", () => {
+    it("remove タイプの行を含むこと", () => {
+      const result = computeLineDiff("a\nb", "a");
+      expect(result.some((l) => l.type === "remove" && l.text === "b")).toBe(true);
+    });
+  });
+
+  // when a line is changed
+  context("行が変更された場合", () => {
+    it("remove タイプの行を含むこと", () => {
+      const result = computeLineDiff("hello", "world");
+      expect(result.some((l) => l.type === "remove")).toBe(true);
+    });
+
+    it("add タイプの行を含むこと", () => {
+      const result = computeLineDiff("hello", "world");
+      expect(result.some((l) => l.type === "add")).toBe(true);
+    });
+  });
+
+  // when context lines are near changes
+  context("変更行の近くにコンテキスト行がある場合", () => {
+    it("変更行の前後2行以内のコンテキスト行を含むこと", () => {
+      const old = "1\n2\n3\n4\n5";
+      const new_ = "1\n2\nX\n4\n5";
+      const result = computeLineDiff(old, new_);
+      const contextLines = result.filter((l) => l.type === "context");
+      expect(contextLines.length).toBeGreaterThan(0);
+    });
+  });
+
+  // when context lines are far from changes
+  context("変更行から離れたコンテキスト行がある場合", () => {
+    it("遠いコンテキスト行を除外すること", () => {
+      const lines = Array.from({ length: 20 }, (_, i) => String(i));
+      const oldStr = lines.join("\n");
+      const newLines = [...lines];
+      newLines[0] = "changed";
+      const newStr = newLines.join("\n");
+      const result = computeLineDiff(oldStr, newStr);
+      // line "10" is far from the change at index 0
+      expect(result.some((l) => l.type === "context" && l.text === "10")).toBe(false);
+    });
+  });
+
+  // when input exceeds 500 lines
+  context("入力が500行を超える場合", () => {
+    it("全行を remove/add としてフォールバックすること", () => {
+      const oldStr = Array.from({ length: 501 }, (_, i) => `old${i}`).join("\n");
+      const newStr = Array.from({ length: 501 }, (_, i) => `new${i}`).join("\n");
+      const result = computeLineDiff(oldStr, newStr);
+      const removes = result.filter((l) => l.type === "remove");
+      const adds = result.filter((l) => l.type === "add");
+      expect(removes.length + adds.length).toBe(1002);
+    });
+  });
+
+  // when one string is empty
+  context("片方が空文字列の場合", () => {
+    it("空→テキストの場合、新しい行が add として含まれること", () => {
+      const result = computeLineDiff("", "a\nb");
+      expect(result.some((l) => l.type === "add" && l.text === "a")).toBe(true);
+    });
+
+    it("テキスト→空の場合、元の行が remove として含まれること", () => {
+      const result = computeLineDiff("a\nb", "");
+      expect(result.some((l) => l.type === "remove" && l.text === "a")).toBe(true);
+    });
+  });
+});
diff --git a/webview/__tests__/utils/todo.test.ts b/webview/__tests__/utils/todo.test.ts
new file mode 100644
index 0000000..0ad97a0
--- /dev/null
+++ b/webview/__tests__/utils/todo.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { parseTodos, type TodoItem } from "../../utils/todo";
+
+describe("parseTodos", () => {
+  // when given a valid JSON string
+  context("有効な JSON 文字列の場合", () => {
+    it("TodoItem 配列を返すこと", () => {
+      const json = JSON.stringify([{ content: "task1" }, { content: "task2", status: "done" }]);
+      const result = parseTodos(json);
+      expect(result).toEqual([{ content: "task1" }, { content: "task2", status: "done" }]);
+    });
+  });
+
+  // when given an object array directly
+  context("オブジェクト配列を直接渡した場合", () => {
+    it("TodoItem 配列を返すこと", () => {
+      const arr = [{ content: "task1", priority: "high" }];
+      expect(parseTodos(arr)).toEqual(arr);
+    });
+  });
+
+  // when given a wrapper object with "todos" key
+  context("todos キーを持つラッパーオブジェクトの場合", () => {
+    it("todos 配列を返すこと", () => {
+      const data = { todos: [{ content: "a" }] };
+      expect(parseTodos(data)).toEqual([{ content: "a" }]);
+    });
+  });
+
+  // when given a wrapper object with "items" key
+  context("items キーを持つラッパーオブジェクトの場合", () => {
+    it("items 配列を返すこと", () => {
+      const data = { items: [{ content: "b" }] };
+      expect(parseTodos(data)).toEqual([{ content: "b" }]);
+    });
+  });
+
+  // when given an empty array
+  context("空配列の場合", () => {
+    it("null を返すこと", () => {
+      expect(parseTodos([])).toBeNull();
+    });
+  });
+
+  // when given items without "content" property
+  context("content プロパティを持たないアイテムの場合", () => {
+    it("null を返すこと", () => {
+      expect(parseTodos([{ title: "no content" }])).toBeNull();
+    });
+  });
+
+  // when given invalid JSON string
+  context("不正な JSON 文字列の場合", () => {
+    it("null を返すこと", () => {
+      expect(parseTodos("{invalid")).toBeNull();
+    });
+  });
+
+  // when given null
+  context("null の場合", () => {
+    it("null を返すこと", () => {
+      expect(parseTodos(null)).toBeNull();
+    });
+  });
+
+  // when given a number
+  context("数値の場合", () => {
+    it("null を返すこと", () => {
+      expect(parseTodos(42)).toBeNull();
+    });
+  });
+});
diff --git a/webview/__tests__/utils/tool-categories.test.ts b/webview/__tests__/utils/tool-categories.test.ts
new file mode 100644
index 0000000..97fc258
--- /dev/null
+++ b/webview/__tests__/utils/tool-categories.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { CATEGORY_LABEL_KEYS, getCategory, TOOL_CATEGORIES, type ToolCategory } from "../../utils/tool-categories";
+
+describe("TOOL_CATEGORIES", () => {
+  it("全エントリが有効な ToolCategory 値を持つこと", () => {
+    const validCategories: ToolCategory[] = ["read", "edit", "write", "run", "search", "other"];
+    for (const value of Object.values(TOOL_CATEGORIES)) {
+      expect(validCategories).toContain(value);
+    }
+  });
+});
+
+describe("CATEGORY_LABEL_KEYS", () => {
+  it("全 ToolCategory に対応するラベルキーを持つこと", () => {
+    const categories: ToolCategory[] = ["read", "edit", "write", "run", "search", "other"];
+    for (const cat of categories) {
+      expect(CATEGORY_LABEL_KEYS[cat]).toBeDefined();
+    }
+  });
+});
+
+describe("getCategory", () => {
+  // when tool name exactly matches
+  context("ツール名が完全一致する場合", () => {
+    it("対応するカテゴリを返すこと", () => {
+      expect(getCategory("read")).toBe("read");
+    });
+
+    it("bash は run を返すこと", () => {
+      expect(getCategory("bash")).toBe("run");
+    });
+
+    it("grep は search を返すこと", () => {
+      expect(getCategory("grep")).toBe("search");
+    });
+
+    it("write は write を返すこと", () => {
+      expect(getCategory("write")).toBe("write");
+    });
+  });
+
+  // when tool name has a prefix (MCP tools)
+  context("プレフィクス付きのツール名の場合", () => {
+    it("アンダースコア区切りの末尾でマッチすること", () => {
+      expect(getCategory("mcp_read")).toBe("read");
+    });
+
+    it("スラッシュ区切りの末尾でマッチすること", () => {
+      expect(getCategory("server/bash")).toBe("run");
+    });
+  });
+
+  // when tool name is unknown
+  context("未知のツール名の場合", () => {
+    it("other を返すこと", () => {
+      expect(getCategory("unknown_tool_xyz")).toBe("other");
+    });
+  });
+});
diff --git a/webview/components/ChatHeader.tsx b/webview/components/ChatHeader.tsx
deleted file mode 100644
index 8573b10..0000000
--- a/webview/components/ChatHeader.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Session } from "@opencode-ai/sdk";
-import { useLocale } from "../locales";
-
-type Props = {
-  activeSession: Session | null;
-  onNewSession: () => void;
-  onToggleSessionList: () => void;
-};
-
-export function ChatHeader({ activeSession, onNewSession, onToggleSessionList }: Props) {
-  const t = useLocale();
-  return (
-    <div className="chat-header">
-      <button type="button" className="btn-icon" onClick={onToggleSessionList} title={t["header.sessions"]}>
-        {/* Codicon: list-unordered */}
-        <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M2 3h1v1H2V3zm3 0h9v1H5V3zM2 7h1v1H2V7zm3 0h9v1H5V7zm-3 4h1v1H2v-1zm3 0h9v1H5v-1z" />
-        </svg>
-      </button>
-      <span className="chat-header-title">{activeSession?.title || t["header.title.fallback"]}</span>
-      <div className="chat-header-actions">
-        <button type="button" className="btn-icon" onClick={onNewSession} title={t["header.newChat"]}>
-          {/* Codicon: add */}
-          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M8 1v7H1v1h7v7h1V9h7V8H9V1H8z" />
-          </svg>
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/webview/components/EmptyState.tsx b/webview/components/EmptyState.tsx
deleted file mode 100644
index 3c00141..0000000
--- a/webview/components/EmptyState.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useLocale } from "../locales";
-
-type Props = {
-  onNewSession: () => void;
-};
-
-export function EmptyState({ onNewSession }: Props) {
-  const t = useLocale();
-  return (
-    <div className="empty-state">
-      <div className="empty-state-title">{t["empty.title"]}</div>
-      <div className="empty-state-description">{t["empty.description"]}</div>
-      <button type="button" className="btn" onClick={onNewSession}>
-        {t["empty.newChat"]}
-      </button>
-    </div>
-  );
-}
diff --git a/webview/components/PermissionView.tsx b/webview/components/PermissionView.tsx
deleted file mode 100644
index 4278d52..0000000
--- a/webview/components/PermissionView.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Permission } from "@opencode-ai/sdk";
-import { useLocale } from "../locales";
-import { postMessage } from "../vscode-api";
-
-type Props = {
-  permission: Permission;
-  activeSessionId: string;
-};
-
-export function PermissionView({ permission, activeSessionId }: Props) {
-  const t = useLocale();
-  const reply = (response: "once" | "always" | "reject") => {
-    postMessage({
-      type: "replyPermission",
-      sessionId: activeSessionId,
-      permissionId: permission.id,
-      response,
-    });
-  };
-
-  return (
-    <div className="permission-request">
-      <div className="permission-title">{permission.title}</div>
-      <div className="permission-actions">
-        <button type="button" className="btn" onClick={() => reply("always")}>
-          {t["permission.allow"]}
-        </button>
-        <button type="button" className="btn btn-secondary" onClick={() => reply("once")}>
-          {t["permission.once"]}
-        </button>
-        <button type="button" className="btn btn-secondary" onClick={() => reply("reject")}>
-          {t["permission.deny"]}
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/webview/components/StreamingIndicator.tsx b/webview/components/StreamingIndicator.tsx
deleted file mode 100644
index 26c8127..0000000
--- a/webview/components/StreamingIndicator.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export function StreamingIndicator() {
-  return (
-    <div className="streaming-indicator">
-      <span className="streaming-dot" />
-      <span className="streaming-dot" />
-      <span className="streaming-dot" />
-    </div>
-  );
-}
diff --git a/webview/components/TodoHeader.tsx b/webview/components/TodoHeader.tsx
deleted file mode 100644
index 535534f..0000000
--- a/webview/components/TodoHeader.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useState } from "react";
-import { useLocale } from "../locales";
-import type { TodoItem } from "./ToolPartView";
-
-type Props = {
-  todos: TodoItem[];
-};
-
-export function TodoHeader({ todos }: Props) {
-  const t = useLocale();
-  const [expanded, setExpanded] = useState(false);
-
-  const completed = todos.filter((t) => t.status === "completed" || t.status === "done").length;
-  const total = todos.length;
-
-  return (
-    <div className="todo-header">
-      <div className="todo-header-bar" onClick={() => setExpanded((s) => !s)} title={t["todo.toggleList"]}>
-        <svg
-          aria-hidden="true"
-          className="todo-header-icon"
-          width="14"
-          height="14"
-          viewBox="0 0 16 16"
-          fill="currentColor"
-        >
-          <path d="M3.5 2h9A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 12.5v-9A1.5 1.5 0 0 1 3.5 2zm0 1a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-9zM6.5 6L5 7.5 7 9.5l4-4L9.5 4 7 6.5 6.5 6z" />
-        </svg>
-        <span className="todo-header-label">{t["todo.label"]}</span>
-        <span className="todo-header-count">
-          {completed}/{total}
-        </span>
-        <span className="todo-header-progress">
-          <span
-            className="todo-header-progress-fill"
-            style={{ width: `${total > 0 ? (completed / total) * 100 : 0}%` }}
-          />
-        </span>
-        <span className={`todo-header-chevron ${expanded ? "expanded" : ""}`}>
-          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
-          </svg>
-        </span>
-      </div>
-      {expanded && (
-        <ul className="todo-header-list">
-          {todos.map((todo, i) => {
-            const isDone = todo.status === "completed" || todo.status === "done";
-            const priorityClass = todo.priority === "high" ? "high" : todo.priority === "low" ? "low" : "";
-            return (
-              <li key={i} className={`todo-header-item ${isDone ? "done" : ""}`}>
-                <span className="todo-header-item-check">{isDone ? "✓" : "○"}</span>
-                <span className="todo-header-item-content">{todo.content}</span>
-                {todo.priority && <span className={`todo-header-item-priority ${priorityClass}`}>{todo.priority}</span>}
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
-  );
-}
diff --git a/webview/components/ToolConfigPanel.tsx b/webview/components/ToolConfigPanel.tsx
deleted file mode 100644
index c6e132d..0000000
--- a/webview/components/ToolConfigPanel.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { LocaleSetting } from "../locales";
-import { useLocale } from "../locales";
-
-type Props = {
-  paths: { home: string; config: string; state: string; directory: string } | null;
-  onOpenConfigFile: (filePath: string) => void;
-  onClose: () => void;
-  localeSetting: LocaleSetting;
-  onLocaleSettingChange: (setting: LocaleSetting) => void;
-};
-
-export function ToolConfigPanel({ paths, onOpenConfigFile, onClose, localeSetting, onLocaleSettingChange }: Props) {
-  const t = useLocale();
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onClose]);
-
-  return (
-    <div className="tool-config-panel" ref={panelRef}>
-      <div className="tool-config-header">
-        <span className="tool-config-title">{t["config.title"]}</span>
-        <button type="button" className="tool-config-close" onClick={onClose} title={t["config.close"]}>
-          <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.708.708L7.293 8l-3.647 3.646.708.708L8 8.707z" />
-          </svg>
-        </button>
-      </div>
-
-      <div className="tool-config-body">
-        {/* Language Setting */}
-        <div className="tool-config-section">
-          <div className="tool-config-section-title">{t["config.language"]}</div>
-          <div className="tool-config-locale-options">
-            {(["auto", "en", "ja"] as const).map((opt) => {
-              const label =
-                opt === "auto" ? t["config.langAuto"] : opt === "en" ? t["config.langEn"] : t["config.langJa"];
-              return (
-                <label key={opt} className="tool-config-toggle tool-config-tool-item">
-                  <input
-                    type="radio"
-                    name="locale"
-                    checked={localeSetting === opt}
-                    onChange={() => onLocaleSettingChange(opt)}
-                  />
-                  <span className="tool-config-tool-name">{label}</span>
-                </label>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-
-      {/* 設定ファイルへのリンク */}
-      {paths && (
-        <div className="tool-config-footer">
-          <button
-            type="button"
-            className="tool-config-link"
-            onClick={() => onOpenConfigFile(`${paths.directory}/opencode.json`)}
-          >
-            <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M13.71 4.29l-3-3A1 1 0 0 0 10 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-.29-.71zM12 14H4V2h5v3a1 1 0 0 0 1 1h3v8z" />
-            </svg>
-            {t["config.projectConfig"]}
-          </button>
-          <button
-            type="button"
-            className="tool-config-link"
-            onClick={() => onOpenConfigFile(`${paths.config}/opencode.json`)}
-          >
-            <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M13.71 4.29l-3-3A1 1 0 0 0 10 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-.29-.71zM12 14H4V2h5v3a1 1 0 0 0 1 1h3v8z" />
-            </svg>
-            {t["config.globalConfig"]}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/webview/components/ToolPartView.tsx b/webview/components/ToolPartView.tsx
deleted file mode 100644
index c4c6844..0000000
--- a/webview/components/ToolPartView.tsx
+++ /dev/null
@@ -1,388 +0,0 @@
-import type { ToolPart } from "@opencode-ai/sdk";
-import { useMemo, useState } from "react";
-import { useLocale } from "../locales";
-
-type Props = {
-  part: ToolPart;
-};
-
-// --- ツール種別からアクションラベルとアイコンを決定 ---
-
-type ToolCategory = "read" | "edit" | "write" | "run" | "search" | "other";
-
-const TOOL_CATEGORIES: Record<string, ToolCategory> = {
-  read: "read",
-  edit: "edit",
-  multiedit: "edit",
-  write: "write",
-  apply_patch: "edit",
-  bash: "run",
-  glob: "search",
-  grep: "search",
-  list: "search",
-  codesearch: "search",
-  websearch: "search",
-  webfetch: "read",
-  lsp: "read",
-  todowrite: "write",
-  todoread: "read",
-  task: "run",
-  batch: "run",
-  question: "other",
-  skill: "run",
-  plan_enter: "other",
-  plan_exit: "other",
-};
-
-const CATEGORY_LABEL_KEYS: Record<
-  ToolCategory,
-  "tool.read" | "tool.edit" | "tool.create" | "tool.run" | "tool.search" | "tool.tool"
-> = {
-  read: "tool.read",
-  edit: "tool.edit",
-  write: "tool.create",
-  run: "tool.run",
-  search: "tool.search",
-  other: "tool.tool",
-};
-
-function getCategory(toolName: string): ToolCategory {
-  // 完全一致
-  if (TOOL_CATEGORIES[toolName]) return TOOL_CATEGORIES[toolName];
-  // MCP ツールなど: プレフィクスを除去して再チェック
-  const parts = toolName.split(/[_/]/);
-  const last = parts[parts.length - 1];
-  if (TOOL_CATEGORIES[last]) return TOOL_CATEGORIES[last];
-  return "other";
-}
-
-/** タイトル（ファイルパスなど）をフォーマット */
-function formatTitle(part: ToolPart): string | null {
-  const { state, tool } = part;
-  const title = state.status === "completed" ? state.title : state.status === "running" ? state.title : null;
-  if (!title) return null;
-  // bash の場合はコマンド説明
-  if (tool === "bash" || tool === "task") return title;
-  return title;
-}
-
-/** ファイルパスの末尾ファイル名を取得 */
-function _basename(p: string): string {
-  return p.split("/").pop() ?? p;
-}
-
-/** input からファイルパスを抽出 */
-function getFilePath(input: Record<string, unknown>): string | null {
-  const fp = input.filePath ?? input.file ?? input.path ?? input.filename;
-  if (typeof fp === "string") return fp;
-  return null;
-}
-
-function isFileEditInput(input: Record<string, unknown>): boolean {
-  return typeof input.oldString === "string" && typeof input.newString === "string";
-}
-
-function isFileCreateInput(input: Record<string, unknown>): boolean {
-  return typeof input.content === "string" && getFilePath(input) !== null && typeof input.oldString !== "string";
-}
-
-// --- Diff 計算 ---
-
-type DiffLine = { type: "context" | "add" | "remove"; text: string };
-
-function computeLineDiff(oldStr: string, newStr: string): DiffLine[] {
-  const oldLines = oldStr.split("\n");
-  const newLines = newStr.split("\n");
-  const result: DiffLine[] = [];
-
-  const n = oldLines.length;
-  const m = newLines.length;
-  if (n > 500 || m > 500) {
-    for (const line of oldLines) result.push({ type: "remove", text: line });
-    for (const line of newLines) result.push({ type: "add", text: line });
-    return result;
-  }
-
-  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
-  for (let i = 1; i <= n; i++) {
-    for (let j = 1; j <= m; j++) {
-      if (oldLines[i - 1] === newLines[j - 1]) {
-        dp[i][j] = dp[i - 1][j - 1] + 1;
-      } else {
-        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
-      }
-    }
-  }
-
-  const raw: DiffLine[] = [];
-  let i = n,
-    j = m;
-  while (i > 0 || j > 0) {
-    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
-      raw.push({ type: "context", text: oldLines[i - 1] });
-      i--;
-      j--;
-    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
-      raw.push({ type: "add", text: newLines[j - 1] });
-      j--;
-    } else {
-      raw.push({ type: "remove", text: oldLines[i - 1] });
-      i--;
-    }
-  }
-  raw.reverse();
-
-  const hasChange = (idx: number) => raw[idx]?.type !== "context";
-  for (let k = 0; k < raw.length; k++) {
-    if (raw[k].type !== "context") {
-      result.push(raw[k]);
-    } else {
-      let nearChange = false;
-      for (let d = -2; d <= 2; d++) {
-        if (hasChange(k + d)) {
-          nearChange = true;
-          break;
-        }
-      }
-      if (nearChange) result.push(raw[k]);
-    }
-  }
-
-  return result;
-}
-
-// --- ToDo ---
-
-export type TodoItem = { content: string; status?: string; priority?: string };
-
-/** JSON文字列からToDoアイテムを抽出 */
-export function parseTodos(raw: unknown): TodoItem[] | null {
-  try {
-    const data = typeof raw === "string" ? JSON.parse(raw) : raw;
-    const arr = Array.isArray(data) ? data : (data?.todos ?? data?.items ?? null);
-    if (!Array.isArray(arr) || arr.length === 0) return null;
-    if (!arr.every((item: unknown) => typeof item === "object" && item !== null && "content" in item)) return null;
-    return arr as TodoItem[];
-  } catch {
-    return null;
-  }
-}
-
-function TodoView({ todos }: { todos: TodoItem[] }) {
-  const t = useLocale();
-  const completed = todos.filter((td) => td.status === "completed" || td.status === "done").length;
-  const total = todos.length;
-
-  return (
-    <div className="tool-todo">
-      <div className="tool-todo-summary">{t["tool.completed"](completed, total)}</div>
-      <ul className="tool-todo-list">
-        {todos.map((todo, i) => {
-          const isDone = todo.status === "completed" || todo.status === "done";
-          const priorityClass = todo.priority === "high" ? "high" : todo.priority === "low" ? "low" : "";
-          return (
-            <li key={i} className={`tool-todo-item ${isDone ? "done" : ""} ${priorityClass}`}>
-              <span className="tool-todo-check">{isDone ? "✓" : "○"}</span>
-              <span className="tool-todo-content">{todo.content}</span>
-              {todo.priority && <span className={`tool-todo-priority ${priorityClass}`}>{todo.priority}</span>}
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-// --- サブコンポーネント ---
-
-function DiffView({ oldStr, newStr }: { oldStr: string; newStr: string }) {
-  const lines = useMemo(() => computeLineDiff(oldStr, newStr), [oldStr, newStr]);
-  const addCount = lines.filter((l) => l.type === "add").length;
-  const removeCount = lines.filter((l) => l.type === "remove").length;
-
-  return (
-    <div className="tool-diff">
-      <div className="tool-diff-stats">
-        {addCount > 0 && <span className="tool-diff-stat-add">+{addCount}</span>}
-        {removeCount > 0 && <span className="tool-diff-stat-remove">−{removeCount}</span>}
-      </div>
-      <div className="tool-diff-lines">
-        {lines.map((line, i) => (
-          <div key={i} className={`tool-diff-line tool-diff-line-${line.type}`}>
-            <span className="tool-diff-line-marker">
-              {line.type === "add" ? "+" : line.type === "remove" ? "−" : " "}
-            </span>
-            <span className="tool-diff-line-text">{line.text || "\u00A0"}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function FileCreateView({ content }: { content: string }) {
-  const t = useLocale();
-  const lines = content.split("\n");
-  const displayLines = lines.length > 30 ? [...lines.slice(0, 30), t["tool.moreLines"](lines.length - 30)] : lines;
-  return (
-    <div className="tool-diff">
-      <div className="tool-diff-stats">
-        <span className="tool-diff-stat-add">{t["tool.addLines"](lines.length)}</span>
-      </div>
-      <div className="tool-diff-lines">
-        {displayLines.map((line, i) => (
-          <div key={i} className="tool-diff-line tool-diff-line-add">
-            <span className="tool-diff-line-marker">+</span>
-            <span className="tool-diff-line-text">{line || "\u00A0"}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// --- アクションアイコン ---
-
-function ActionIcon({ category }: { category: ToolCategory }) {
-  switch (category) {
-    case "read":
-      return (
-        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M1.5 1h11l1.5 2v10.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 13.5V2.5A1.5 1.5 0 0 1 1.5 1zm0 1a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V3.5L12 2H1.5zM3 5h8v1H3V5zm0 3h8v1H3V8zm0 3h5v1H3v-1z" />
-        </svg>
-      );
-    case "edit":
-      return (
-        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z" />
-        </svg>
-      );
-    case "write":
-      return (
-        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M9 1h4.5a1.5 1.5 0 0 1 1.5 1.5v11a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5V2.5A1.5 1.5 0 0 1 2.5 1H7v1H2.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V2.5a.5.5 0 0 0-.5-.5H9V1zM8 4l4 4H9v4H7V8H4l4-4z" />
-        </svg>
-      );
-    case "run":
-      return (
-        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M2 2.5A1.5 1.5 0 0 1 3.5 1h9A1.5 1.5 0 0 1 14 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5v-11zM3.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-9zM5 6l4 2.5L5 11V6z" />
-        </svg>
-      );
-    case "search":
-      return (
-        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M15.25 11.8l-3.5-3.5a5.51 5.51 0 1 0-1.45 1.45l3.5 3.5a1.028 1.028 0 0 0 1.45-1.45zM6.5 10A3.5 3.5 0 1 1 10 6.5 3.504 3.504 0 0 1 6.5 10z" />
-        </svg>
-      );
-    default:
-      return (
-        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zM10 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5h-3V1z" />
-        </svg>
-      );
-  }
-}
-
-// --- メインコンポーネント ---
-
-export function ToolPartView({ part }: Props) {
-  const t = useLocale();
-  const [expanded, setExpanded] = useState(false);
-  const { state } = part;
-
-  const isActive = state.status === "running" || state.status === "pending";
-  const isCompleted = state.status === "completed";
-  const isError = state.status === "error";
-
-  const category = getCategory(part.tool);
-  const actionLabel = t[CATEGORY_LABEL_KEYS[category]];
-  const title = formatTitle(part);
-
-  const input = (state.status !== "pending" ? state.input : null) as Record<string, unknown> | null;
-  const isEdit = input ? isFileEditInput(input) : false;
-  const isCreate = input ? isFileCreateInput(input) : false;
-
-  // ToDo ツール判定 & パース
-  const isTodoTool = part.tool === "todowrite" || part.tool === "todoread";
-  const todos = useMemo(() => {
-    if (!isTodoTool) return null;
-    // outputから試す（todoread, todowrite完了後）
-    if (isCompleted && state.output) {
-      const fromOutput = parseTodos(state.output);
-      if (fromOutput) return fromOutput;
-    }
-    // inputから試す（todowrite）
-    if (input) {
-      const fromInput = parseTodos(input.todos ?? input);
-      if (fromInput) return fromInput;
-    }
-    return null;
-  }, [isTodoTool, isCompleted, state, input]);
-
-  // タイトル表示: todoツールの場合は件数を正しく表示
-  const displayTitle = useMemo(() => {
-    if (isTodoTool && todos) {
-      const done = todos.filter((td) => td.status === "completed" || td.status === "done").length;
-      return t["tool.todos"](done, todos.length);
-    }
-    return title;
-  }, [isTodoTool, todos, title, t["tool.todos"]]);
-
-  return (
-    <div className={`tool-part ${state.status}`}>
-      <div className="tool-part-header" onClick={() => setExpanded((s) => !s)} title={t["tool.toggleDetails"]}>
-        <span className="tool-part-icon">
-          {isActive ? (
-            <svg
-              aria-hidden="true"
-              className="tool-part-spinner"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-            >
-              <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" opacity="0.3" />
-              <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-            </svg>
-          ) : isError ? (
-            <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z" />
-              <path d="M7.25 4h1.5v5h-1.5V4zm0 6h1.5v1.5h-1.5V10z" />
-            </svg>
-          ) : (
-            <ActionIcon category={category} />
-          )}
-        </span>
-        <span className={`tool-part-action tool-part-action-${category}`}>{actionLabel}</span>
-        {displayTitle && (
-          <span className="tool-part-title" title={displayTitle}>
-            {displayTitle}
-          </span>
-        )}
-        <span className={`tool-part-chevron ${expanded ? "expanded" : ""}`}>
-          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
-          </svg>
-        </span>
-      </div>
-      {expanded && (
-        <div className="tool-part-body">
-          {todos ? (
-            <TodoView todos={todos} />
-          ) : isEdit && input ? (
-            <DiffView oldStr={input.oldString as string} newStr={input.newString as string} />
-          ) : isCreate && input ? (
-            <FileCreateView content={input.content as string} />
-          ) : (
-            <>
-              {isCompleted && state.output && <pre className="tool-part-output">{state.output}</pre>}
-              {isError && <pre className="tool-part-output tool-part-error">{state.error}</pre>}
-              {isActive && input && <pre className="tool-part-output">{JSON.stringify(input, null, 2)}</pre>}
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/webview/components/atoms/ActionButton/ActionButton.module.css b/webview/components/atoms/ActionButton/ActionButton.module.css
new file mode 100644
index 0000000..1da481c
--- /dev/null
+++ b/webview/components/atoms/ActionButton/ActionButton.module.css
@@ -0,0 +1,48 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-family: var(--vscode-font-family);
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  color: var(--vscode-button-foreground);
+  background-color: var(--vscode-button-background);
+}
+
+.root:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+.root:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.secondary {
+  color: var(--vscode-button-secondaryForeground);
+  background-color: var(--vscode-button-secondaryBackground);
+}
+
+.secondary:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
+.ghost {
+  background: none;
+  border: 1px solid var(--vscode-input-border);
+  color: var(--vscode-descriptionForeground);
+}
+
+.ghost:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+  color: var(--vscode-foreground);
+}
+
+.sm {
+  padding: 3px 10px;
+  font-size: 11px;
+  border-radius: 4px;
+}
diff --git a/webview/components/atoms/ActionButton/ActionButton.tsx b/webview/components/atoms/ActionButton/ActionButton.tsx
new file mode 100644
index 0000000..9b146ff
--- /dev/null
+++ b/webview/components/atoms/ActionButton/ActionButton.tsx
@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import styles from "./ActionButton.module.css";
+
+type Props = {
+  /** 色のバリエーション */
+  variant?: "primary" | "secondary" | "ghost";
+  /** サイズ */
+  size?: "sm" | "md";
+  /** ボタン内容（テキスト等） */
+  children: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">;
+
+/**
+ * 背景色ありのアクションボタン。
+ * テキスト表示用。Primary（青）/ Secondary（グレー）/ Ghost（枠線のみ）の3バリエーション。
+ */
+export function ActionButton({ variant = "primary", size = "md", className, children, ...rest }: Props) {
+  const classes = [styles.root, variant !== "primary" && styles[variant], size !== "md" && styles[size], className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button type="button" className={classes} {...rest}>
+      {children}
+    </button>
+  );
+}
diff --git a/webview/components/atoms/ActionButton/index.ts b/webview/components/atoms/ActionButton/index.ts
new file mode 100644
index 0000000..2fd0e00
--- /dev/null
+++ b/webview/components/atoms/ActionButton/index.ts
@@ -0,0 +1 @@
+export { ActionButton } from "./ActionButton";
diff --git a/webview/components/atoms/ContextIndicator/ContextIndicator.module.css b/webview/components/atoms/ContextIndicator/ContextIndicator.module.css
new file mode 100644
index 0000000..61336ec
--- /dev/null
+++ b/webview/components/atoms/ContextIndicator/ContextIndicator.module.css
@@ -0,0 +1,62 @@
+.container {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.button {
+  gap: 4px;
+  line-height: 1;
+}
+
+.button:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.popup {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 6px;
+  min-width: 220px;
+  padding: 10px 12px;
+  background-color: var(--vscode-quickInput-background);
+  border: 1px solid var(--vscode-dropdown-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  z-index: 100;
+}
+
+.popupTitle {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  margin-bottom: 8px;
+}
+
+.popupRow {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  margin-bottom: 4px;
+}
+
+.bar {
+  height: 4px;
+  background-color: var(--vscode-input-border);
+  border-radius: 2px;
+  margin: 8px 0;
+  overflow: hidden;
+}
+
+.barFill {
+  height: 100%;
+  background-color: var(--vscode-progressBar-background);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.compressButton {
+  width: 100%;
+  margin-top: 4px;
+}
diff --git a/webview/components/ContextIndicator.tsx b/webview/components/atoms/ContextIndicator/ContextIndicator.tsx
similarity index 67%
rename from webview/components/ContextIndicator.tsx
rename to webview/components/atoms/ContextIndicator/ContextIndicator.tsx
index 5d2d5b9..af5da20 100644
--- a/webview/components/ContextIndicator.tsx
+++ b/webview/components/atoms/ContextIndicator/ContextIndicator.tsx
@@ -1,5 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useLocale } from "../locales";
+import { useCallback, useRef, useState } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside";
+import { useLocale } from "../../../locales";
+import { ActionButton } from "../ActionButton";
+import { IconButton } from "../IconButton";
+import styles from "./ContextIndicator.module.css";
 
 type Props = {
   inputTokens: number;
@@ -8,7 +12,7 @@ type Props = {
   isCompressing: boolean;
 };
 
-function formatTokenCount(n: number): string {
+export function formatTokenCount(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
   return String(n);
@@ -19,17 +23,7 @@ export function ContextIndicator({ inputTokens, contextLimit, onCompress, isComp
   const [showPopup, setShowPopup] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  // 外部クリックでポップアップを閉じる
-  useEffect(() => {
-    if (!showPopup) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setShowPopup(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [showPopup]);
+  useClickOutside(containerRef, () => setShowPopup(false), showPopup);
 
   const handleClick = useCallback(() => {
     setShowPopup((s) => !s);
@@ -54,10 +48,11 @@ export function ContextIndicator({ inputTokens, contextLimit, onCompress, isComp
   const color = percent >= 80 ? "var(--vscode-editorWarning-foreground)" : "var(--vscode-textLink-foreground)";
 
   return (
-    <div className="context-indicator-container" ref={containerRef}>
-      <button
-        type="button"
-        className="context-indicator-button"
+    <div className={styles.container} ref={containerRef}>
+      <IconButton
+        variant="muted"
+        size="sm"
+        className={styles.button}
         onClick={handleClick}
         title={t["context.title"](percent)}
       >
@@ -86,25 +81,26 @@ export function ContextIndicator({ inputTokens, contextLimit, onCompress, isComp
             transform={`rotate(-90 ${size / 2} ${size / 2})`}
           />
         </svg>
-      </button>
+      </IconButton>
 
       {showPopup && (
-        <div className="context-indicator-popup">
-          <div className="context-indicator-popup-title">{t["context.windowUsage"]}</div>
-          <div className="context-indicator-popup-row">
+        <div className={styles.popup}>
+          <div className={styles.popupTitle}>{t["context.windowUsage"]}</div>
+          <div className={styles.popupRow}>
             <span>{t["context.inputTokens"]}</span>
             <span>{formatTokenCount(inputTokens)}</span>
           </div>
-          <div className="context-indicator-popup-row">
+          <div className={styles.popupRow}>
             <span>{t["context.contextLimit"]}</span>
             <span>{formatTokenCount(contextLimit)}</span>
           </div>
-          <div className="context-indicator-popup-bar">
-            <div className="context-indicator-popup-bar-fill" style={{ width: `${percent}%` }} />
+          <div className={styles.bar}>
+            <div className={styles.barFill} style={{ width: `${percent}%` }} />
           </div>
-          <button
-            type="button"
-            className="context-indicator-compress-button"
+          <ActionButton
+            variant="secondary"
+            size="sm"
+            className={styles.compressButton}
             onClick={() => {
               onCompress();
               setShowPopup(false);
@@ -112,7 +108,7 @@ export function ContextIndicator({ inputTokens, contextLimit, onCompress, isComp
             disabled={isCompressing}
           >
             {isCompressing ? t["context.compressing"] : t["context.compress"]}
-          </button>
+          </ActionButton>
         </div>
       )}
     </div>
diff --git a/webview/components/atoms/ContextIndicator/index.ts b/webview/components/atoms/ContextIndicator/index.ts
new file mode 100644
index 0000000..ff6ec1f
--- /dev/null
+++ b/webview/components/atoms/ContextIndicator/index.ts
@@ -0,0 +1 @@
+export { ContextIndicator, formatTokenCount } from "./ContextIndicator";
diff --git a/webview/components/atoms/IconButton/IconButton.module.css b/webview/components/atoms/IconButton/IconButton.module.css
new file mode 100644
index 0000000..61e598b
--- /dev/null
+++ b/webview/components/atoms/IconButton/IconButton.module.css
@@ -0,0 +1,42 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: none;
+  border: none;
+  color: var(--vscode-icon-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.root:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.root:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.muted {
+  color: var(--vscode-descriptionForeground);
+}
+
+.muted:hover {
+  color: var(--vscode-foreground);
+}
+
+.outlined {
+  color: var(--vscode-descriptionForeground);
+  border: 1px solid var(--vscode-input-border);
+}
+
+.outlined:hover {
+  color: var(--vscode-foreground);
+  border-color: var(--vscode-foreground);
+}
+
+.sm {
+  padding: 2px;
+}
diff --git a/webview/components/atoms/IconButton/IconButton.tsx b/webview/components/atoms/IconButton/IconButton.tsx
new file mode 100644
index 0000000..29b4e0a
--- /dev/null
+++ b/webview/components/atoms/IconButton/IconButton.tsx
@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import styles from "./IconButton.module.css";
+
+type Props = {
+  /** 色のバリエーション */
+  variant?: "default" | "muted" | "outlined";
+  /** サイズ */
+  size?: "sm" | "md";
+  /** ボタン内容（アイコン等） */
+  children: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">;
+
+/**
+ * アイコンを表示する透明背景のボタン。
+ * デザインはコンポーネントに内包され、レイアウト調整のみ `className` で行う。
+ */
+export function IconButton({ variant = "default", size = "md", className, children, ...rest }: Props) {
+  const classes = [styles.root, variant !== "default" && styles[variant], size !== "md" && styles[size], className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button type="button" className={classes} {...rest}>
+      {children}
+    </button>
+  );
+}
diff --git a/webview/components/atoms/IconButton/index.ts b/webview/components/atoms/IconButton/index.ts
new file mode 100644
index 0000000..c62ce98
--- /dev/null
+++ b/webview/components/atoms/IconButton/index.ts
@@ -0,0 +1 @@
+export { IconButton } from "./IconButton";
diff --git a/webview/components/atoms/LinkButton/LinkButton.module.css b/webview/components/atoms/LinkButton/LinkButton.module.css
new file mode 100644
index 0000000..870eda5
--- /dev/null
+++ b/webview/components/atoms/LinkButton/LinkButton.module.css
@@ -0,0 +1,18 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--vscode-textLink-foreground);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 3px;
+  user-select: none;
+}
+
+.root:hover {
+  color: var(--vscode-textLink-activeForeground);
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
diff --git a/webview/components/atoms/LinkButton/LinkButton.tsx b/webview/components/atoms/LinkButton/LinkButton.tsx
new file mode 100644
index 0000000..98557a3
--- /dev/null
+++ b/webview/components/atoms/LinkButton/LinkButton.tsx
@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import styles from "./LinkButton.module.css";
+
+type Props = {
+  /** ボタン内容（icon + テキスト等） */
+  children: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">;
+
+/**
+ * リンクスタイルのボタン。
+ * テキストリンク色・背景なし・icon + text の組み合わせで使用する。
+ */
+export function LinkButton({ className, children, ...rest }: Props) {
+  const classes = [styles.root, className].filter(Boolean).join(" ");
+
+  return (
+    <button type="button" className={classes} {...rest}>
+      {children}
+    </button>
+  );
+}
diff --git a/webview/components/atoms/LinkButton/index.ts b/webview/components/atoms/LinkButton/index.ts
new file mode 100644
index 0000000..774ce0d
--- /dev/null
+++ b/webview/components/atoms/LinkButton/index.ts
@@ -0,0 +1 @@
+export { LinkButton } from "./LinkButton";
diff --git a/webview/components/atoms/ListItem/ListItem.module.css b/webview/components/atoms/ListItem/ListItem.module.css
new file mode 100644
index 0000000..c16fedc
--- /dev/null
+++ b/webview/components/atoms/ListItem/ListItem.module.css
@@ -0,0 +1,23 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.root:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.title {
+  color: var(--vscode-foreground);
+}
+
+.description {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/webview/components/atoms/ListItem/ListItem.tsx b/webview/components/atoms/ListItem/ListItem.tsx
new file mode 100644
index 0000000..60346e9
--- /dev/null
+++ b/webview/components/atoms/ListItem/ListItem.tsx
@@ -0,0 +1,22 @@
+import styles from "./ListItem.module.css";
+
+type Props = {
+  title: string;
+  description?: string;
+  onClick?: () => void;
+  className?: string;
+};
+
+/**
+ * タイトル + 説明テキストを縦積みで表示する汎用リスト行。
+ */
+export function ListItem({ title, description, onClick, className }: Props) {
+  const classes = [styles.root, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} onClick={onClick}>
+      <span className={styles.title}>{title}</span>
+      {description && <span className={styles.description}>{description}</span>}
+    </div>
+  );
+}
diff --git a/webview/components/atoms/ListItem/index.ts b/webview/components/atoms/ListItem/index.ts
new file mode 100644
index 0000000..fe0e47c
--- /dev/null
+++ b/webview/components/atoms/ListItem/index.ts
@@ -0,0 +1 @@
+export { ListItem } from "./ListItem";
diff --git a/webview/components/atoms/StatusItem/StatusItem.module.css b/webview/components/atoms/StatusItem/StatusItem.module.css
new file mode 100644
index 0000000..77c7fd5
--- /dev/null
+++ b/webview/components/atoms/StatusItem/StatusItem.module.css
@@ -0,0 +1,53 @@
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 2px 0;
+  font-size: 12px;
+  color: var(--vscode-foreground);
+  line-height: 1.4;
+}
+
+.done {
+  opacity: 0.6;
+}
+
+.done .content {
+  text-decoration: line-through;
+}
+
+.indicator {
+  flex-shrink: 0;
+  width: 16px;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.done .indicator {
+  color: var(--vscode-testing-iconPassed, #73c991);
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.badge {
+  flex-shrink: 0;
+  font-size: 10px;
+  padding: 0 4px;
+  border-radius: 3px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.danger {
+  color: var(--vscode-editorError-foreground, #f44747);
+  background-color: color-mix(in srgb, var(--vscode-editorError-foreground, #f44747) 12%, transparent);
+}
+
+.muted {
+  color: var(--vscode-descriptionForeground);
+  background-color: color-mix(in srgb, var(--vscode-descriptionForeground) 12%, transparent);
+}
diff --git a/webview/components/atoms/StatusItem/StatusItem.tsx b/webview/components/atoms/StatusItem/StatusItem.tsx
new file mode 100644
index 0000000..e38696f
--- /dev/null
+++ b/webview/components/atoms/StatusItem/StatusItem.tsx
@@ -0,0 +1,34 @@
+import styles from "./StatusItem.module.css";
+
+export type BadgeVariant = "danger" | "muted";
+
+type Props = {
+  /** 先頭に表示するインジケータ文字（例: "✓", "○"） */
+  indicator: string;
+  /** メインコンテンツテキスト */
+  content: string;
+  /** オプショナルバッジ（ラベル + バリアント） */
+  badge?: { label: string; variant?: BadgeVariant };
+  /** 完了状態（opacity 低下 + 取り消し線） */
+  isDone?: boolean;
+  className?: string;
+};
+
+/**
+ * ステータスインジケータ + コンテンツ + オプショナルバッジの読み取り専用行。
+ */
+export function StatusItem({ indicator, content, badge, isDone, className }: Props) {
+  const classes = [styles.root, isDone && styles.done, className].filter(Boolean).join(" ");
+
+  return (
+    <li className={classes}>
+      <span className={styles.indicator}>{indicator}</span>
+      <span className={styles.content}>{content}</span>
+      {badge && (
+        <span className={[styles.badge, badge.variant && styles[badge.variant]].filter(Boolean).join(" ")}>
+          {badge.label}
+        </span>
+      )}
+    </li>
+  );
+}
diff --git a/webview/components/atoms/StatusItem/index.ts b/webview/components/atoms/StatusItem/index.ts
new file mode 100644
index 0000000..9420820
--- /dev/null
+++ b/webview/components/atoms/StatusItem/index.ts
@@ -0,0 +1 @@
+export { type BadgeVariant, StatusItem } from "./StatusItem";
diff --git a/webview/components/atoms/StreamingIndicator/StreamingIndicator.module.css b/webview/components/atoms/StreamingIndicator/StreamingIndicator.module.css
new file mode 100644
index 0000000..413f9b5
--- /dev/null
+++ b/webview/components/atoms/StreamingIndicator/StreamingIndicator.module.css
@@ -0,0 +1,35 @@
+.root {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+  margin-left: 4px;
+}
+
+.dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--vscode-progressBar-background);
+  animation: pulse 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes pulse {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
diff --git a/webview/components/atoms/StreamingIndicator/StreamingIndicator.tsx b/webview/components/atoms/StreamingIndicator/StreamingIndicator.tsx
new file mode 100644
index 0000000..cc5d2ea
--- /dev/null
+++ b/webview/components/atoms/StreamingIndicator/StreamingIndicator.tsx
@@ -0,0 +1,11 @@
+import styles from "./StreamingIndicator.module.css";
+
+export function StreamingIndicator() {
+  return (
+    <div className={styles.root} data-testid="streaming-indicator">
+      <span className={styles.dot} />
+      <span className={styles.dot} />
+      <span className={styles.dot} />
+    </div>
+  );
+}
diff --git a/webview/components/atoms/StreamingIndicator/index.ts b/webview/components/atoms/StreamingIndicator/index.ts
new file mode 100644
index 0000000..8410827
--- /dev/null
+++ b/webview/components/atoms/StreamingIndicator/index.ts
@@ -0,0 +1 @@
+export { StreamingIndicator } from "./StreamingIndicator";
diff --git a/webview/components/atoms/icons/icons.tsx b/webview/components/atoms/icons/icons.tsx
new file mode 100644
index 0000000..324c773
--- /dev/null
+++ b/webview/components/atoms/icons/icons.tsx
@@ -0,0 +1,264 @@
+import type { SVGProps } from "react";
+
+// Common props for all icon components.
+// Consumers can override width, height, className, and any standard SVG attribute.
+export type IconProps = SVGProps<SVGSVGElement>;
+
+// ─── Navigation / Header ─────────────────────────────────────────────
+
+/** Codicon: list-unordered */
+export function ListIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M2 3h1v1H2V3zm3 0h9v1H5V3zM2 7h1v1H2V7zm3 0h9v1H5V7zm-3 4h1v1H2v-1zm3 0h9v1H5v-1z" />
+    </svg>
+  );
+}
+
+/** Codicon: add (16px plus) */
+export function AddIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 1v7H1v1h7v7h1V9h7V8H9V1H8z" />
+    </svg>
+  );
+}
+
+/** Small plus icon (12px) used for quick-add buttons */
+export function PlusIcon({ width = 12, height = 12, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z" />
+    </svg>
+  );
+}
+
+/** Chevron right arrow — used for expand/collapse toggles */
+export function ChevronRightIcon({ width = 12, height = 12, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
+    </svg>
+  );
+}
+
+// ─── File / Document ──────────────────────────────────────────────────
+
+/** Codicon: file */
+export function FileIcon({ width = 12, height = 12, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M13.71 4.29l-3-3A1 1 0 0 0 10 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-.29-.71zM12 14H4V2h5v3a1 1 0 0 0 1 1h3v8z" />
+    </svg>
+  );
+}
+
+/** Codicon: paperclip / attach */
+export function ClipIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M10.97 2.29a1.625 1.625 0 0 0-2.298 0L3.836 7.126a2.813 2.813 0 0 0 3.977 3.977l4.837-4.836-.707-.708-4.837 4.837a1.813 1.813 0 0 1-2.563-2.563L9.38 2.997a.625.625 0 0 1 .884.884L5.427 8.718a.313.313 0 0 0 .442.442l4.837-4.837-.707-.707-4.837 4.837a1.313 1.313 0 0 1-1.856-1.856l4.836-4.837a1.625 1.625 0 0 1 2.298 0 1.625 1.625 0 0 1 0 2.298l-4.837 4.837a2.813 2.813 0 0 1-3.977-3.977L7.63 1.285l-.707-.707L1.285 6.214a3.813 3.813 0 0 0 5.391 5.391l4.837-4.837a2.625 2.625 0 0 0 0-3.712 2.625 2.625 0 0 0-.543-.356z" />
+    </svg>
+  );
+}
+
+// ─── Action ───────────────────────────────────────────────────────────
+
+/** Codicon: close (×) */
+export function CloseIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.708.708L7.293 8l-3.647 3.646.708.708L8 8.707z" />
+    </svg>
+  );
+}
+
+/** Codicon: trash / delete */
+export function DeleteIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M10 3h3v1h-1v9a1 1 0 01-1 1H5a1 1 0 01-1-1V4H3V3h3V2a1 1 0 011-1h2a1 1 0 011 1v1zM5 4v9h6V4H5zm2-1V2H7v1h2V2H9v1z" />
+    </svg>
+  );
+}
+
+/** Codicon: edit / pencil */
+export function EditIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z" />
+    </svg>
+  );
+}
+
+/** Codicon: send arrow */
+export function SendIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M1 1.5l14 6.5-14 6.5V9l8-1-8-1V1.5z" />
+    </svg>
+  );
+}
+
+/** Codicon: stop (square) */
+export function StopIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <rect x="3" y="3" width="10" height="10" rx="1" />
+    </svg>
+  );
+}
+
+/** Revert / retry arrows — used for checkpoint revert */
+export function RevertIcon({ width = 12, height = 12, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M2.006 8.267L.78 9.5 3.28 12l2.5-2.5L4.56 8.28l-1.054 1.06a5.001 5.001 0 0 1 8.98-3.89l1.054-.98A6.002 6.002 0 0 0 3.507 7.21L2.006 8.267zM13.994 7.733L15.22 6.5 12.72 4l-2.5 2.5 1.22 1.22 1.054-1.06a5.001 5.001 0 0 1-8.98 3.89l-1.054.98a6.002 6.002 0 0 0 10.007-1.566l1.527-2.231z" />
+    </svg>
+  );
+}
+
+// ─── Input Area Actions ───────────────────────────────────────────────
+
+/** Codicon: terminal */
+export function TerminalIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M1 3.5l4.5 4.5L1 12.5l1 1 5.5-5.5L2 2.5l-1 1zM8 13h7v-1H8v1z" />
+    </svg>
+  );
+}
+
+/** Codicon: gear / settings */
+export function GearIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M14.773 7.308l-1.394-.461a5.543 5.543 0 0 0-.476-1.147l.646-1.32a.249.249 0 0 0-.046-.283l-.87-.87a.249.249 0 0 0-.283-.046l-1.32.646a5.543 5.543 0 0 0-1.147-.476l-.461-1.394A.249.249 0 0 0 9.184 1.8H8.016a.249.249 0 0 0-.238.157l-.461 1.394a5.543 5.543 0 0 0-1.147.476l-1.32-.646a.249.249 0 0 0-.283.046l-.87.87a.249.249 0 0 0-.046.283l.646 1.32a5.543 5.543 0 0 0-.476 1.147l-1.394.461A.249.249 0 0 0 2.27 7.546v1.168c0 .103.064.196.157.238l1.394.461c.11.4.27.784.476 1.147l-.646 1.32a.249.249 0 0 0 .046.283l.87.87c.073.073.18.096.283.046l1.32-.646c.363.206.747.366 1.147.476l.461 1.394c.042.093.135.157.238.157h1.168c.103 0 .196-.064.238-.157l.461-1.394a5.543 5.543 0 0 0 1.147-.476l1.32.646a.249.249 0 0 0 .283-.046l.87-.87a.249.249 0 0 0 .046-.283l-.646-1.32c.206-.363.366-.747.476-1.147l1.394-.461a.249.249 0 0 0 .157-.238V7.546a.249.249 0 0 0-.157-.238zM8.6 10.9a2.3 2.3 0 1 1 0-4.6 2.3 2.3 0 0 1 0 4.6z" />
+    </svg>
+  );
+}
+
+// ─── Tool / Status ────────────────────────────────────────────────────
+
+/** Loading spinner — animated rotating arc */
+export function SpinnerIcon({ width = 16, height = 16, className, ...props }: IconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" opacity="0.3" />
+      <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/** Error circle with exclamation mark */
+export function ErrorCircleIcon({ width = 16, height = 16, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z" />
+      <path d="M7.25 4h1.5v5h-1.5V4zm0 6h1.5v1.5h-1.5V10z" />
+    </svg>
+  );
+}
+
+/** Info circle — used for completed reasoning/thought indicator */
+export function InfoCircleIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z" />
+      <path d="M7.5 4.5h1v4h-1zM7.5 10h1v1.5h-1z" />
+    </svg>
+  );
+}
+
+/** Checkbox with checkmark */
+export function CheckboxIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M3.5 2h9A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 12.5v-9A1.5 1.5 0 0 1 3.5 2zm0 1a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-9zM6.5 6L5 7.5 7 9.5l4-4L9.5 4 7 6.5 6.5 6z" />
+    </svg>
+  );
+}
+
+// ─── Tool Action Category Icons ───────────────────────────────────────
+
+/** Read action icon — open file/document */
+export function ReadActionIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M1.5 1h11l1.5 2v10.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 13.5V2.5A1.5 1.5 0 0 1 1.5 1zm0 1a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V3.5L12 2H1.5zM3 5h8v1H3V5zm0 3h8v1H3V8zm0 3h5v1H3v-1z" />
+    </svg>
+  );
+}
+
+/** Edit action icon — pencil (same path as EditIcon) */
+export function EditActionIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z" />
+    </svg>
+  );
+}
+
+/** Write/create action icon — file upload */
+export function WriteActionIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M9 1h4.5a1.5 1.5 0 0 1 1.5 1.5v11a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5V2.5A1.5 1.5 0 0 1 2.5 1H7v1H2.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V2.5a.5.5 0 0 0-.5-.5H9V1zM8 4l4 4H9v4H7V8H4l4-4z" />
+    </svg>
+  );
+}
+
+/** Run action icon — play button in terminal */
+export function RunActionIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M2 2.5A1.5 1.5 0 0 1 3.5 1h9A1.5 1.5 0 0 1 14 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5v-11zM3.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-9zM5 6l4 2.5L5 11V6z" />
+    </svg>
+  );
+}
+
+/** Search action icon — magnifying glass */
+export function SearchActionIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M15.25 11.8l-3.5-3.5a5.51 5.51 0 1 0-1.45 1.45l3.5 3.5a1.028 1.028 0 0 0 1.45-1.45zM6.5 10A3.5 3.5 0 1 1 10 6.5 3.504 3.504 0 0 1 6.5 10z" />
+    </svg>
+  );
+}
+
+/** Generic tool/file icon — default for uncategorized tools */
+export function ToolIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zM10 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5h-3V1z" />
+    </svg>
+  );
+}
+
+// ─── Visibility ───────────────────────────────────────────────────────
+
+/** Eye icon — visible / show */
+export function EyeIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 3C4.5 3 1.7 5.1 0.5 8c1.2 2.9 4 5 7.5 5s6.3-2.1 7.5-5c-1.2-2.9-4-5-7.5-5zm0 8.5C5.5 11.5 3.5 10 2.2 8 3.5 6 5.5 4.5 8 4.5S12.5 6 13.8 8c-1.3 2-3.3 3.5-5.8 3.5zM8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 4a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" />
+    </svg>
+  );
+}
+
+/** Eye-off icon — hidden / hide */
+export function EyeOffIcon({ width = 14, height = 14, ...props }: IconProps) {
+  return (
+    <svg aria-hidden="true" width={width} height={height} viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 3C4.5 3 1.7 5.1 0.5 8c.5 1.2 1.3 2.3 2.3 3.1l1-1c-.7-.6-1.3-1.3-1.7-2.1C3.5 6 5.5 4.5 8 4.5c.8 0 1.6.2 2.3.4l1.1-1.1C10.4 3.3 9.2 3 8 3zm4.9 1.9l-1 1c.7.6 1.3 1.3 1.7 2.1-1.3 2-3.3 3.5-5.8 3.5-.8 0-1.5-.1-2.2-.4l-1.1 1.1c1 .5 2.1.8 3.3.8 3.5 0 6.3-2.1 7.5-5-.6-1.3-1.4-2.4-2.4-3.1zM2.3 1.3L1 2.6l2.5 2.5C2 6.2 1 7 0.5 8c1.2 2.9 4 5 7.5 5 1.1 0 2.2-.2 3.1-.6l2.3 2.3 1.3-1.3L2.3 1.3zM8 11.5c-2.5 0-4.5-1.5-5.8-3.5.5-.9 1.2-1.7 2-2.3l1.5 1.5c-.1.3-.2.5-.2.8a2.5 2.5 0 003.3 2.3l1.1 1.1c-.6.1-1.2.1-1.9.1z" />
+    </svg>
+  );
+}
diff --git a/webview/components/atoms/icons/index.ts b/webview/components/atoms/icons/index.ts
new file mode 100644
index 0000000..6ef8d54
--- /dev/null
+++ b/webview/components/atoms/icons/index.ts
@@ -0,0 +1 @@
+export * from "./icons";
diff --git a/webview/components/molecules/DiffView/DiffView.module.css b/webview/components/molecules/DiffView/DiffView.module.css
new file mode 100644
index 0000000..299cb84
--- /dev/null
+++ b/webview/components/molecules/DiffView/DiffView.module.css
@@ -0,0 +1,83 @@
+.root {
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  overflow: hidden;
+  font-size: 11px;
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+
+.stats {
+  display: flex;
+  gap: 8px;
+  padding: 3px 8px;
+  font-size: 11px;
+  background-color: var(--vscode-editor-background);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.statAdd {
+  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
+}
+
+.statRemove {
+  color: var(--vscode-gitDecoration-deletedResourceForeground, #f85149);
+}
+
+.lines {
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: var(--vscode-editor-background);
+}
+
+.line {
+  display: flex;
+  line-height: 1.45;
+  min-height: 18px;
+}
+
+.lineMarker {
+  width: 20px;
+  flex-shrink: 0;
+  text-align: center;
+  user-select: none;
+  color: var(--vscode-descriptionForeground);
+}
+
+.lineText {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-all;
+  padding-right: 8px;
+}
+
+.lineRemove {
+  background-color: color-mix(in srgb, var(--vscode-gitDecoration-deletedResourceForeground, #f85149) 15%, transparent);
+}
+
+.lineRemove .lineMarker {
+  color: var(--vscode-gitDecoration-deletedResourceForeground, #f85149);
+}
+
+.lineRemove .lineText {
+  color: var(--vscode-gitDecoration-deletedResourceForeground, #f85149);
+}
+
+.lineAdd {
+  background-color: color-mix(in srgb, var(--vscode-gitDecoration-addedResourceForeground, #2ea043) 15%, transparent);
+}
+
+.lineAdd .lineMarker {
+  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
+}
+
+.lineAdd .lineText {
+  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
+}
+
+.lineContext {
+  background-color: transparent;
+}
+
+.lineContext .lineText {
+  color: var(--vscode-descriptionForeground);
+}
diff --git a/webview/components/molecules/DiffView/DiffView.tsx b/webview/components/molecules/DiffView/DiffView.tsx
new file mode 100644
index 0000000..34bac79
--- /dev/null
+++ b/webview/components/molecules/DiffView/DiffView.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { computeLineDiff } from "../../../utils/diff";
+import styles from "./DiffView.module.css";
+
+type LineType = "add" | "remove" | "keep";
+const lineTypeClass: Record<LineType, string> = {
+  add: styles.lineAdd,
+  remove: styles.lineRemove,
+  keep: styles.lineContext,
+};
+
+type Props = {
+  oldStr: string;
+  newStr: string;
+};
+
+export function DiffView({ oldStr, newStr }: Props) {
+  const lines = useMemo(() => computeLineDiff(oldStr, newStr), [oldStr, newStr]);
+  const addCount = lines.filter((l) => l.type === "add").length;
+  const removeCount = lines.filter((l) => l.type === "remove").length;
+
+  return (
+    <div className={styles.root} data-testid="diff-view">
+      <div className={styles.stats}>
+        {addCount > 0 && <span className={styles.statAdd}>+{addCount}</span>}
+        {removeCount > 0 && <span className={styles.statRemove}>−{removeCount}</span>}
+      </div>
+      <div className={styles.lines}>
+        {lines.map((line, i) => (
+          <div key={i} className={`${styles.line} ${lineTypeClass[line.type as LineType] ?? styles.lineContext}`}>
+            <span className={styles.lineMarker}>{line.type === "add" ? "+" : line.type === "remove" ? "−" : " "}</span>
+            <span className={styles.lineText}>{line.text || "\u00A0"}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/webview/components/molecules/DiffView/index.ts b/webview/components/molecules/DiffView/index.ts
new file mode 100644
index 0000000..39693ff
--- /dev/null
+++ b/webview/components/molecules/DiffView/index.ts
@@ -0,0 +1 @@
+export { DiffView } from "./DiffView";
diff --git a/webview/components/molecules/EmptyState/EmptyState.module.css b/webview/components/molecules/EmptyState/EmptyState.module.css
new file mode 100644
index 0000000..f6dbc66
--- /dev/null
+++ b/webview/components/molecules/EmptyState/EmptyState.module.css
@@ -0,0 +1,22 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  color: var(--vscode-descriptionForeground);
+  text-align: center;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--vscode-foreground);
+}
+
+.description {
+  font-size: 12px;
+  margin-bottom: 16px;
+}
diff --git a/webview/components/molecules/EmptyState/EmptyState.tsx b/webview/components/molecules/EmptyState/EmptyState.tsx
new file mode 100644
index 0000000..d757f6a
--- /dev/null
+++ b/webview/components/molecules/EmptyState/EmptyState.tsx
@@ -0,0 +1,18 @@
+import { useLocale } from "../../../locales";
+import { ActionButton } from "../../atoms/ActionButton";
+import styles from "./EmptyState.module.css";
+
+type Props = {
+  onNewSession: () => void;
+};
+
+export function EmptyState({ onNewSession }: Props) {
+  const t = useLocale();
+  return (
+    <div className={styles.root}>
+      <div className={styles.title}>{t["empty.title"]}</div>
+      <div className={styles.description}>{t["empty.description"]}</div>
+      <ActionButton onClick={onNewSession}>{t["empty.newChat"]}</ActionButton>
+    </div>
+  );
+}
diff --git a/webview/components/molecules/EmptyState/index.ts b/webview/components/molecules/EmptyState/index.ts
new file mode 100644
index 0000000..aac2d4d
--- /dev/null
+++ b/webview/components/molecules/EmptyState/index.ts
@@ -0,0 +1 @@
+export { EmptyState } from "./EmptyState";
diff --git a/webview/components/molecules/FileAttachmentBar/FileAttachmentBar.module.css b/webview/components/molecules/FileAttachmentBar/FileAttachmentBar.module.css
new file mode 100644
index 0000000..968663a
--- /dev/null
+++ b/webview/components/molecules/FileAttachmentBar/FileAttachmentBar.module.css
@@ -0,0 +1,117 @@
+.left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.clipContainer {
+  position: relative;
+}
+
+.fileButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: none;
+  border: 1px dashed var(--vscode-input-border);
+  color: var(--vscode-descriptionForeground);
+  font-family: var(--vscode-font-family);
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.fileButton:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+  color: var(--vscode-foreground);
+  border-color: var(--vscode-foreground);
+}
+
+.pickerDropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  min-width: 280px;
+  max-width: 400px;
+  max-height: 300px;
+  background-color: var(--vscode-quickInput-background);
+  border: 1px solid var(--vscode-dropdown-border);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+}
+
+.pickerSearch {
+  width: 100%;
+  padding: 6px 10px;
+  background-color: var(--vscode-input-background);
+  border: none;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  color: var(--vscode-input-foreground);
+  font-family: var(--vscode-font-family);
+  font-size: 12px;
+  outline: none;
+}
+
+.pickerSearch::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+
+.pickerList {
+  overflow-y: auto;
+  max-height: 250px;
+}
+
+.pickerEmpty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding-bottom: 4px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-foreground);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.chipName {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--vscode-badge-foreground);
+  cursor: pointer;
+  border-radius: 2px;
+  opacity: 0.7;
+}
+
+.chipRemove:hover {
+  opacity: 1;
+}
diff --git a/webview/components/molecules/FileAttachmentBar/FileAttachmentBar.tsx b/webview/components/molecules/FileAttachmentBar/FileAttachmentBar.tsx
new file mode 100644
index 0000000..f452614
--- /dev/null
+++ b/webview/components/molecules/FileAttachmentBar/FileAttachmentBar.tsx
@@ -0,0 +1,99 @@
+import { useLocale } from "../../../locales";
+import type { FileAttachment } from "../../../vscode-api";
+import { IconButton } from "../../atoms/IconButton";
+import { ClipIcon, CloseIcon, PlusIcon } from "../../atoms/icons";
+import { ListItem } from "../../atoms/ListItem";
+import styles from "./FileAttachmentBar.module.css";
+
+type Props = {
+  attachedFiles: FileAttachment[];
+  activeEditorFile: FileAttachment | null;
+  isActiveAttached: boolean;
+  showFilePicker: boolean;
+  filePickerQuery: string;
+  pickerFiles: FileAttachment[];
+  onClipClick: () => void;
+  onFilePickerSearch: (query: string) => void;
+  onAddFile: (file: FileAttachment) => void;
+  onRemoveFile: (filePath: string) => void;
+  filePickerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export function FileAttachmentBar({
+  attachedFiles,
+  activeEditorFile,
+  isActiveAttached,
+  showFilePicker,
+  filePickerQuery,
+  pickerFiles,
+  onClipClick,
+  onFilePickerSearch,
+  onAddFile,
+  onRemoveFile,
+  filePickerRef,
+}: Props) {
+  const t = useLocale();
+
+  return (
+    <div className={styles.left}>
+      {/* クリップボタン */}
+      <div className={styles.clipContainer} ref={filePickerRef}>
+        <IconButton variant="outlined" size="sm" onClick={onClipClick} title={t["input.addContext"]}>
+          <ClipIcon />
+        </IconButton>
+        {showFilePicker && (
+          <div className={styles.pickerDropdown}>
+            <input
+              className={styles.pickerSearch}
+              placeholder={t["input.searchFiles"]}
+              value={filePickerQuery}
+              onChange={(e) => onFilePickerSearch(e.target.value)}
+            />
+            <div className={styles.pickerList}>
+              {pickerFiles.length > 0 ? (
+                pickerFiles
+                  .slice(0, 15)
+                  .map((file) => (
+                    <ListItem
+                      key={file.filePath}
+                      title={file.fileName}
+                      description={file.filePath}
+                      onClick={() => onAddFile(file)}
+                    />
+                  ))
+              ) : (
+                <div className={styles.pickerEmpty}>{t["input.noFiles"]}</div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {/* 添付されたファイルチップ (インライン) */}
+      {attachedFiles.map((file) => (
+        <div key={file.filePath} className={styles.chip}>
+          <span className={styles.chipName}>{file.fileName}</span>
+          <button
+            type="button"
+            className={styles.chipRemove}
+            onClick={() => onRemoveFile(file.filePath)}
+            title={t["input.remove"]}
+          >
+            <CloseIcon width={12} height={12} />
+          </button>
+        </div>
+      ))}
+      {/* 現在開いているファイルの quick-add ボタン */}
+      {activeEditorFile && !isActiveAttached && (
+        <button
+          type="button"
+          className={styles.fileButton}
+          onClick={() => onAddFile(activeEditorFile)}
+          title={t["input.addFile"](activeEditorFile.filePath)}
+        >
+          <PlusIcon />
+          <span>{activeEditorFile.fileName}</span>
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/webview/components/molecules/FileAttachmentBar/index.ts b/webview/components/molecules/FileAttachmentBar/index.ts
new file mode 100644
index 0000000..604053a
--- /dev/null
+++ b/webview/components/molecules/FileAttachmentBar/index.ts
@@ -0,0 +1 @@
+export { FileAttachmentBar } from "./FileAttachmentBar";
diff --git a/webview/components/molecules/FileCreateView/FileCreateView.tsx b/webview/components/molecules/FileCreateView/FileCreateView.tsx
new file mode 100644
index 0000000..36a1de7
--- /dev/null
+++ b/webview/components/molecules/FileCreateView/FileCreateView.tsx
@@ -0,0 +1,27 @@
+import { useLocale } from "../../../locales";
+import styles from "../DiffView/DiffView.module.css";
+
+type Props = {
+  content: string;
+};
+
+export function FileCreateView({ content }: Props) {
+  const t = useLocale();
+  const lines = content.split("\n");
+  const displayLines = lines.length > 30 ? [...lines.slice(0, 30), t["tool.moreLines"](lines.length - 30)] : lines;
+  return (
+    <div className={styles.root} data-testid="diff-view">
+      <div className={styles.stats}>
+        <span className={styles.statAdd}>{t["tool.addLines"](lines.length)}</span>
+      </div>
+      <div className={styles.lines}>
+        {displayLines.map((line, i) => (
+          <div key={i} className={`${styles.line} ${styles.lineAdd}`}>
+            <span className={styles.lineMarker}>+</span>
+            <span className={styles.lineText}>{line || "\u00A0"}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/webview/components/molecules/FileCreateView/index.ts b/webview/components/molecules/FileCreateView/index.ts
new file mode 100644
index 0000000..e5726b6
--- /dev/null
+++ b/webview/components/molecules/FileCreateView/index.ts
@@ -0,0 +1 @@
+export { FileCreateView } from "./FileCreateView";
diff --git a/webview/components/molecules/HashFilePopup/HashFilePopup.module.css b/webview/components/molecules/HashFilePopup/HashFilePopup.module.css
new file mode 100644
index 0000000..f8ba5c0
--- /dev/null
+++ b/webview/components/molecules/HashFilePopup/HashFilePopup.module.css
@@ -0,0 +1,21 @@
+.root {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  min-width: 240px;
+  max-width: 360px;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: var(--vscode-quickInput-background);
+  border: 1px solid var(--vscode-dropdown-border);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+}
+
+.empty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
diff --git a/webview/components/molecules/HashFilePopup/HashFilePopup.tsx b/webview/components/molecules/HashFilePopup/HashFilePopup.tsx
new file mode 100644
index 0000000..3634909
--- /dev/null
+++ b/webview/components/molecules/HashFilePopup/HashFilePopup.tsx
@@ -0,0 +1,31 @@
+import { useLocale } from "../../../locales";
+import type { FileAttachment } from "../../../vscode-api";
+import { ListItem } from "../../atoms/ListItem";
+import styles from "./HashFilePopup.module.css";
+
+type Props = {
+  hashFiles: FileAttachment[];
+  onAddFile: (file: FileAttachment) => void;
+  hashPopupRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export function HashFilePopup({ hashFiles, onAddFile, hashPopupRef }: Props) {
+  const t = useLocale();
+
+  return (
+    <div className={styles.root} ref={hashPopupRef} data-testid="hash-popup">
+      {hashFiles.length > 0 ? (
+        hashFiles.map((file) => (
+          <ListItem
+            key={file.filePath}
+            title={file.fileName}
+            description={file.filePath}
+            onClick={() => onAddFile(file)}
+          />
+        ))
+      ) : (
+        <div className={styles.empty}>{t["input.noFiles"]}</div>
+      )}
+    </div>
+  );
+}
diff --git a/webview/components/molecules/HashFilePopup/index.ts b/webview/components/molecules/HashFilePopup/index.ts
new file mode 100644
index 0000000..4d7d8fa
--- /dev/null
+++ b/webview/components/molecules/HashFilePopup/index.ts
@@ -0,0 +1 @@
+export { HashFilePopup } from "./HashFilePopup";
diff --git a/webview/components/molecules/ModelSelector/ModelSelector.module.css b/webview/components/molecules/ModelSelector/ModelSelector.module.css
new file mode 100644
index 0000000..e91753c
--- /dev/null
+++ b/webview/components/molecules/ModelSelector/ModelSelector.module.css
@@ -0,0 +1,200 @@
+.root {
+  position: relative;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: none;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  font-family: var(--vscode-font-family);
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.button:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+  color: var(--vscode-foreground);
+}
+
+.label {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.chevron.expanded {
+  transform: rotate(90deg);
+}
+
+.panel {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  min-width: 280px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
+  border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.panelBody {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: 4px 0;
+}
+
+.panelBody::-webkit-scrollbar {
+  width: 6px;
+}
+
+.panelBody::-webkit-scrollbar-thumb {
+  background-color: var(--vscode-scrollbarSlider-background);
+  border-radius: 3px;
+}
+
+.section {
+  /* wrapper for provider group */
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  cursor: pointer;
+  user-select: none;
+}
+
+.sectionTitle:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.sectionTitle.disconnected {
+  opacity: 0.6;
+}
+
+.sectionName {
+  flex: 1;
+}
+
+.sectionBadge {
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: none;
+  color: var(--vscode-editorWarning-foreground, #ff9800);
+  flex-shrink: 0;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--vscode-foreground);
+}
+
+.item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.item.active {
+  color: var(--vscode-textLink-foreground);
+}
+
+.item.disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.item.disabled:hover {
+  background-color: transparent;
+}
+
+.itemCheck {
+  width: 14px;
+  font-size: 12px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.itemName {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.itemBadge {
+  font-size: 9px;
+  padding: 0 4px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.itemBadge.beta {
+  color: var(--vscode-editorInfo-foreground, #3794ff);
+  background-color: color-mix(in srgb, var(--vscode-editorInfo-foreground, #3794ff) 15%, transparent);
+}
+
+.itemBadge.alpha {
+  color: var(--vscode-editorWarning-foreground, #ff9800);
+  background-color: color-mix(in srgb, var(--vscode-editorWarning-foreground, #ff9800) 15%, transparent);
+}
+
+.itemBadge.deprecated {
+  color: var(--vscode-errorForeground);
+  background-color: color-mix(in srgb, var(--vscode-errorForeground) 15%, transparent);
+}
+
+.itemMeta {
+  display: flex;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+  flex-shrink: 0;
+}
+
+.itemContext {
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+
+.footer {
+  display: flex;
+  gap: 4px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--vscode-panel-border);
+  flex-shrink: 0;
+}
diff --git a/webview/components/ModelSelector.tsx b/webview/components/molecules/ModelSelector/ModelSelector.tsx
similarity index 57%
rename from webview/components/ModelSelector.tsx
rename to webview/components/molecules/ModelSelector/ModelSelector.tsx
index 0893159..4d8dad5 100644
--- a/webview/components/ModelSelector.tsx
+++ b/webview/components/molecules/ModelSelector/ModelSelector.tsx
@@ -1,7 +1,11 @@
 import type { Provider } from "@opencode-ai/sdk";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useLocale } from "../locales";
-import type { AllProvidersData, ModelInfo, ProviderInfo } from "../vscode-api";
+import { useMemo, useRef, useState } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside";
+import { useLocale } from "../../../locales";
+import type { AllProvidersData, ModelInfo, ProviderInfo } from "../../../vscode-api";
+import { ChevronRightIcon, EyeIcon, EyeOffIcon } from "../../atoms/icons";
+import { LinkButton } from "../../atoms/LinkButton";
+import styles from "./ModelSelector.module.css";
 
 type Props = {
   providers: Provider[];
@@ -20,6 +24,12 @@ function statusBadge(status?: string): string | null {
   return status;
 }
 
+const badgeClass: Record<string, string> = {
+  beta: styles.beta,
+  alpha: styles.alpha,
+  deprecated: styles.deprecated,
+};
+
 export function ModelSelector({ providers, allProvidersData, selectedModel, onSelect }: Props) {
   const t = useLocale();
   const [open, setOpen] = useState(false);
@@ -27,16 +37,7 @@ export function ModelSelector({ providers, allProvidersData, selectedModel, onSe
   const [showAll, setShowAll] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
+  useClickOutside(containerRef, () => setOpen(false), open);
 
   // 表示用プロバイダーリスト: allProvidersData があればそちらを使い、なければ従来の providers を使う
   const allDisplayProviders = useMemo(() => {
@@ -97,41 +98,30 @@ export function ModelSelector({ providers, allProvidersData, selectedModel, onSe
   };
 
   return (
-    <div className="model-selector" ref={containerRef}>
-      <button
-        type="button"
-        className="model-selector-button"
-        onClick={() => setOpen((s) => !s)}
-        title={t["model.selectModel"]}
-      >
-        <span className="model-selector-label">{selectedModelName}</span>
-        <span className={`chevron-icon ${open ? "expanded" : ""}`}>
-          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
-          </svg>
+    <div className={styles.root} ref={containerRef}>
+      <button type="button" className={styles.button} onClick={() => setOpen((s) => !s)} title={t["model.selectModel"]}>
+        <span className={styles.label}>{selectedModelName}</span>
+        <span className={`${styles.chevron} ${open ? styles.expanded : ""}`}>
+          <ChevronRightIcon />
         </span>
       </button>
       {open && (
-        <div className="model-panel">
-          <div className="model-panel-body">
+        <div className={styles.panel}>
+          <div className={styles.panelBody}>
             {displayProviders.map((provider) => {
               if (provider.models.length === 0) return null;
               const isCollapsed = collapsedProviders.has(provider.id);
               return (
-                <div key={provider.id} className="model-panel-section">
+                <div key={provider.id} className={styles.section}>
                   <div
-                    className={`model-panel-section-title ${!provider.connected ? "disconnected" : ""}`}
+                    className={`${styles.sectionTitle} ${!provider.connected ? styles.disconnected : ""}`}
                     onClick={() => toggleProvider(provider.id)}
                   >
-                    <span className={`chevron-icon ${isCollapsed ? "" : "expanded"}`}>
-                      <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                        <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
-                      </svg>
+                    <span className={`${styles.chevron} ${isCollapsed ? "" : styles.expanded}`}>
+                      <ChevronRightIcon />
                     </span>
-                    <span className="model-panel-section-name">{provider.name}</span>
-                    {!provider.connected && (
-                      <span className="model-panel-section-badge">{t["model.notConnected"]}</span>
-                    )}
+                    <span className={styles.sectionName}>{provider.name}</span>
+                    {!provider.connected && <span className={styles.sectionBadge}>{t["model.notConnected"]}</span>}
                   </div>
                   {!isCollapsed &&
                     provider.models.map((model) => {
@@ -142,21 +132,23 @@ export function ModelSelector({ providers, allProvidersData, selectedModel, onSe
                       return (
                         <div
                           key={model.id}
-                          className={`model-panel-item${isSelected ? " active" : ""}${disabled ? " disabled" : ""}`}
+                          className={[styles.item, isSelected && styles.active, disabled && styles.disabled]
+                            .filter(Boolean)
+                            .join(" ")}
                           onClick={() => {
                             if (disabled) return;
                             onSelect({ providerID: provider.id, modelID: model.id });
                             setOpen(false);
                           }}
                         >
-                          <span className="model-panel-item-check">{isSelected ? "✓" : ""}</span>
-                          <span className="model-panel-item-name">
+                          <span className={styles.itemCheck}>{isSelected ? "✓" : ""}</span>
+                          <span className={styles.itemName}>
                             {model.name || model.id}
-                            {badge && <span className={`model-panel-item-badge ${badge}`}>{badge}</span>}
+                            {badge && <span className={`${styles.itemBadge} ${badgeClass[badge] ?? ""}`}>{badge}</span>}
                           </span>
                           {model.limit && (
-                            <span className="model-panel-item-meta">
-                              <span className="model-panel-item-context">{formatContextK(model.limit.context)}</span>
+                            <span className={styles.itemMeta}>
+                              <span className={styles.itemContext}>{formatContextK(model.limit.context)}</span>
                             </span>
                           )}
                         </div>
@@ -167,22 +159,14 @@ export function ModelSelector({ providers, allProvidersData, selectedModel, onSe
             })}
           </div>
           {hasDisconnected && (
-            <div className="model-panel-footer">
-              <button
-                type="button"
-                className="model-panel-link"
+            <div className={styles.footer}>
+              <LinkButton
                 onClick={() => setShowAll((s) => !s)}
                 title={showAll ? t["model.hideDisconnected"] : t["model.showAll"]}
               >
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                  {showAll ? (
-                    <path d="M8 3C4.5 3 1.7 5.1 0.5 8c1.2 2.9 4 5 7.5 5s6.3-2.1 7.5-5c-1.2-2.9-4-5-7.5-5zm0 8.5C5.5 11.5 3.5 10 2.2 8 3.5 6 5.5 4.5 8 4.5S12.5 6 13.8 8c-1.3 2-3.3 3.5-5.8 3.5zM8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 4a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" />
-                  ) : (
-                    <path d="M8 3C4.5 3 1.7 5.1 0.5 8c.5 1.2 1.3 2.3 2.3 3.1l1-1c-.7-.6-1.3-1.3-1.7-2.1C3.5 6 5.5 4.5 8 4.5c.8 0 1.6.2 2.3.4l1.1-1.1C10.4 3.3 9.2 3 8 3zm4.9 1.9l-1 1c.7.6 1.3 1.3 1.7 2.1-1.3 2-3.3 3.5-5.8 3.5-.8 0-1.5-.1-2.2-.4l-1.1 1.1c1 .5 2.1.8 3.3.8 3.5 0 6.3-2.1 7.5-5-.6-1.3-1.4-2.4-2.4-3.1zM2.3 1.3L1 2.6l2.5 2.5C2 6.2 1 7 0.5 8c1.2 2.9 4 5 7.5 5 1.1 0 2.2-.2 3.1-.6l2.3 2.3 1.3-1.3L2.3 1.3zM8 11.5c-2.5 0-4.5-1.5-5.8-3.5.5-.9 1.2-1.7 2-2.3l1.5 1.5c-.1.3-.2.5-.2.8a2.5 2.5 0 003.3 2.3l1.1 1.1c-.6.1-1.2.1-1.9.1z" />
-                  )}
-                </svg>
+                {showAll ? <EyeIcon /> : <EyeOffIcon />}
                 <span>{showAll ? t["model.connectedOnly"] : t["model.showAll"]}</span>
-              </button>
+              </LinkButton>
             </div>
           )}
         </div>
diff --git a/webview/components/molecules/ModelSelector/index.ts b/webview/components/molecules/ModelSelector/index.ts
new file mode 100644
index 0000000..fad7c20
--- /dev/null
+++ b/webview/components/molecules/ModelSelector/index.ts
@@ -0,0 +1 @@
+export { ModelSelector } from "./ModelSelector";
diff --git a/webview/components/TextPartView.tsx b/webview/components/molecules/TextPartView/TextPartView.tsx
similarity index 51%
rename from webview/components/TextPartView.tsx
rename to webview/components/molecules/TextPartView/TextPartView.tsx
index a114831..853124a 100644
--- a/webview/components/TextPartView.tsx
+++ b/webview/components/molecules/TextPartView/TextPartView.tsx
@@ -1,8 +1,9 @@
 import type { TextPart } from "@opencode-ai/sdk";
+import DOMPurify from "dompurify";
 import { marked } from "marked";
 import { useMemo } from "react";
 
-// marked のデフォルト設定: XSS 対策のため HTML タグをエスケープする
+// marked のデフォルト設定
 marked.setOptions({
   breaks: true,
 });
@@ -13,9 +14,10 @@ type Props = {
 
 export function TextPartView({ part }: Props) {
   const html = useMemo(() => {
-    return marked.parse(part.text, { async: false }) as string;
+    const raw = marked.parse(part.text, { async: false }) as string;
+    return DOMPurify.sanitize(raw);
   }, [part.text]);
 
-  // biome-ignore lint/security/noDangerouslySetInnerHtml: marked v17 はデフォルトで HTML タグをエスケープするため、sanitize 済み HTML の描画に使用する
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: DOMPurify でサニタイズ済みの HTML を描画する
   return <span dangerouslySetInnerHTML={{ __html: html }} />;
 }
diff --git a/webview/components/molecules/TextPartView/index.ts b/webview/components/molecules/TextPartView/index.ts
new file mode 100644
index 0000000..b669f76
--- /dev/null
+++ b/webview/components/molecules/TextPartView/index.ts
@@ -0,0 +1 @@
+export { TextPartView } from "./TextPartView";
diff --git a/webview/components/molecules/TodoHeader/TodoHeader.module.css b/webview/components/molecules/TodoHeader/TodoHeader.module.css
new file mode 100644
index 0000000..115a6cb
--- /dev/null
+++ b/webview/components/molecules/TodoHeader/TodoHeader.module.css
@@ -0,0 +1,70 @@
+.root {
+  border-top: 1px solid var(--vscode-panel-border);
+  background-color: var(--vscode-sideBar-background);
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+}
+
+.bar:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.icon {
+  flex-shrink: 0;
+  color: var(--vscode-textLink-foreground);
+}
+
+.label {
+  font-weight: 600;
+  font-size: 11px;
+  color: var(--vscode-foreground);
+}
+
+.count {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+
+.progress {
+  flex: 1;
+  height: 3px;
+  background-color: var(--vscode-input-border);
+  border-radius: 2px;
+  overflow: hidden;
+  max-width: 80px;
+}
+
+.progressFill {
+  display: block;
+  height: 100%;
+  background-color: var(--vscode-testing-iconPassed, #73c991);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground);
+  transition: transform 0.15s;
+}
+
+.chevron.expanded {
+  transform: rotate(90deg);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0 12px 8px 12px;
+}
diff --git a/webview/components/molecules/TodoHeader/TodoHeader.tsx b/webview/components/molecules/TodoHeader/TodoHeader.tsx
new file mode 100644
index 0000000..1ae6ea5
--- /dev/null
+++ b/webview/components/molecules/TodoHeader/TodoHeader.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { useLocale } from "../../../locales";
+import type { TodoItem } from "../../../utils/todo";
+import { CheckboxIcon, ChevronRightIcon } from "../../atoms/icons";
+import type { BadgeVariant } from "../../atoms/StatusItem";
+import { StatusItem } from "../../atoms/StatusItem";
+import styles from "./TodoHeader.module.css";
+
+type Props = {
+  todos: TodoItem[];
+};
+
+export function TodoHeader({ todos }: Props) {
+  const t = useLocale();
+  const [expanded, setExpanded] = useState(false);
+
+  const completed = todos.filter((t) => t.status === "completed" || t.status === "done").length;
+  const total = todos.length;
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.bar} onClick={() => setExpanded((s) => !s)} title={t["todo.toggleList"]}>
+        <CheckboxIcon className={styles.icon} />
+        <span className={styles.label}>{t["todo.label"]}</span>
+        <span className={styles.count}>
+          {completed}/{total}
+        </span>
+        <span className={styles.progress}>
+          <span className={styles.progressFill} style={{ width: `${total > 0 ? (completed / total) * 100 : 0}%` }} />
+        </span>
+        <span className={`${styles.chevron} ${expanded ? styles.expanded : ""}`}>
+          <ChevronRightIcon />
+        </span>
+      </div>
+      {expanded && (
+        <ul className={styles.list}>
+          {todos.map((todo, i) => {
+            const isDone = todo.status === "completed" || todo.status === "done";
+            const badge = todo.priority
+              ? { label: todo.priority, variant: (todo.priority === "high" ? "danger" : "muted") as BadgeVariant }
+              : undefined;
+            return (
+              <StatusItem key={i} indicator={isDone ? "✓" : "○"} content={todo.content} isDone={isDone} badge={badge} />
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/webview/components/molecules/TodoHeader/index.ts b/webview/components/molecules/TodoHeader/index.ts
new file mode 100644
index 0000000..effa6b8
--- /dev/null
+++ b/webview/components/molecules/TodoHeader/index.ts
@@ -0,0 +1 @@
+export { TodoHeader } from "./TodoHeader";
diff --git a/webview/components/molecules/TodoView/TodoView.module.css b/webview/components/molecules/TodoView/TodoView.module.css
new file mode 100644
index 0000000..7acc769
--- /dev/null
+++ b/webview/components/molecules/TodoView/TodoView.module.css
@@ -0,0 +1,18 @@
+.root {
+  padding: 8px 12px;
+}
+
+.summary {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  margin-bottom: 6px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
diff --git a/webview/components/molecules/TodoView/TodoView.tsx b/webview/components/molecules/TodoView/TodoView.tsx
new file mode 100644
index 0000000..1b33f1a
--- /dev/null
+++ b/webview/components/molecules/TodoView/TodoView.tsx
@@ -0,0 +1,32 @@
+import { useLocale } from "../../../locales";
+import type { TodoItem } from "../../../utils/todo";
+import type { BadgeVariant } from "../../atoms/StatusItem";
+import { StatusItem } from "../../atoms/StatusItem";
+import styles from "./TodoView.module.css";
+
+type Props = {
+  todos: TodoItem[];
+};
+
+export function TodoView({ todos }: Props) {
+  const t = useLocale();
+  const completed = todos.filter((td) => td.status === "completed" || td.status === "done").length;
+  const total = todos.length;
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.summary}>{t["tool.completed"](completed, total)}</div>
+      <ul className={styles.list}>
+        {todos.map((todo, i) => {
+          const isDone = todo.status === "completed" || todo.status === "done";
+          const badge = todo.priority
+            ? { label: todo.priority, variant: (todo.priority === "high" ? "danger" : "muted") as BadgeVariant }
+            : undefined;
+          return (
+            <StatusItem key={i} indicator={isDone ? "✓" : "○"} content={todo.content} isDone={isDone} badge={badge} />
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/webview/components/molecules/TodoView/index.ts b/webview/components/molecules/TodoView/index.ts
new file mode 100644
index 0000000..f28ba14
--- /dev/null
+++ b/webview/components/molecules/TodoView/index.ts
@@ -0,0 +1 @@
+export { TodoView } from "./TodoView";
diff --git a/webview/components/organisms/ChatHeader/ChatHeader.module.css b/webview/components/organisms/ChatHeader/ChatHeader.module.css
new file mode 100644
index 0000000..69cfa5e
--- /dev/null
+++ b/webview/components/organisms/ChatHeader/ChatHeader.module.css
@@ -0,0 +1,23 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  min-height: 28px;
+}
+
+.title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--vscode-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.actions {
+  display: flex;
+  gap: 4px;
+}
diff --git a/webview/components/organisms/ChatHeader/ChatHeader.tsx b/webview/components/organisms/ChatHeader/ChatHeader.tsx
new file mode 100644
index 0000000..bc0d30f
--- /dev/null
+++ b/webview/components/organisms/ChatHeader/ChatHeader.tsx
@@ -0,0 +1,28 @@
+import type { Session } from "@opencode-ai/sdk";
+import { useLocale } from "../../../locales";
+import { IconButton } from "../../atoms/IconButton";
+import { AddIcon, ListIcon } from "../../atoms/icons";
+import styles from "./ChatHeader.module.css";
+
+type Props = {
+  activeSession: Session | null;
+  onNewSession: () => void;
+  onToggleSessionList: () => void;
+};
+
+export function ChatHeader({ activeSession, onNewSession, onToggleSessionList }: Props) {
+  const t = useLocale();
+  return (
+    <div className={styles.root}>
+      <IconButton onClick={onToggleSessionList} title={t["header.sessions"]}>
+        <ListIcon />
+      </IconButton>
+      <span className={styles.title}>{activeSession?.title || t["header.title.fallback"]}</span>
+      <div className={styles.actions}>
+        <IconButton onClick={onNewSession} title={t["header.newChat"]}>
+          <AddIcon />
+        </IconButton>
+      </div>
+    </div>
+  );
+}
diff --git a/webview/components/organisms/ChatHeader/index.ts b/webview/components/organisms/ChatHeader/index.ts
new file mode 100644
index 0000000..04b0f33
--- /dev/null
+++ b/webview/components/organisms/ChatHeader/index.ts
@@ -0,0 +1 @@
+export { ChatHeader } from "./ChatHeader";
diff --git a/webview/components/organisms/InputArea/InputArea.module.css b/webview/components/organisms/InputArea/InputArea.module.css
new file mode 100644
index 0000000..98bf839
--- /dev/null
+++ b/webview/components/organisms/InputArea/InputArea.module.css
@@ -0,0 +1,80 @@
+.root {
+  border-top: 1px solid var(--vscode-panel-border);
+  padding: 8px 12px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-input-background);
+  border: 1px solid var(--vscode-input-border);
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.wrapper:focus-within {
+  border-color: var(--vscode-focusBorder);
+}
+
+.contextBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 4px;
+}
+
+.textareaContainer {
+  position: relative;
+}
+
+.textarea {
+  flex: 1;
+  width: 100%;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--vscode-input-foreground);
+  font-family: var(--vscode-font-family);
+  font-size: 13px;
+  line-height: 1.4;
+  resize: none;
+  max-height: 120px;
+  min-height: 20px;
+}
+
+.textarea::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 4px;
+  position: relative;
+}
+
+.actionsLeft {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+}
+
+.sendButton {
+  flex-shrink: 0;
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.expanded {
+  transform: rotate(90deg);
+}
diff --git a/webview/components/InputArea.tsx b/webview/components/organisms/InputArea/InputArea.tsx
similarity index 54%
rename from webview/components/InputArea.tsx
rename to webview/components/organisms/InputArea/InputArea.tsx
index 2c6c952..14ae7b7 100644
--- a/webview/components/InputArea.tsx
+++ b/webview/components/organisms/InputArea/InputArea.tsx
@@ -1,12 +1,18 @@
 import type { Provider } from "@opencode-ai/sdk";
 import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";
-import type { LocaleSetting } from "../locales";
-import { useLocale } from "../locales";
-import type { AllProvidersData, FileAttachment } from "../vscode-api";
-import { postMessage } from "../vscode-api";
-import { ContextIndicator } from "./ContextIndicator";
-import { ModelSelector } from "./ModelSelector";
-import { ToolConfigPanel } from "./ToolConfigPanel";
+import { useClickOutside } from "../../../hooks/useClickOutside";
+import type { LocaleSetting } from "../../../locales";
+import { useLocale } from "../../../locales";
+import type { AllProvidersData, FileAttachment } from "../../../vscode-api";
+import { postMessage } from "../../../vscode-api";
+import { ContextIndicator } from "../../atoms/ContextIndicator";
+import { IconButton } from "../../atoms/IconButton";
+import { ChevronRightIcon, GearIcon, SendIcon, StopIcon, TerminalIcon } from "../../atoms/icons";
+import { FileAttachmentBar } from "../../molecules/FileAttachmentBar";
+import { HashFilePopup } from "../../molecules/HashFilePopup";
+import { ModelSelector } from "../../molecules/ModelSelector";
+import { ToolConfigPanel } from "../../organisms/ToolConfigPanel";
+import styles from "./InputArea.module.css";
 
 type Props = {
   onSend: (text: string, files: FileAttachment[]) => void;
@@ -130,34 +136,17 @@ export function InputArea({
   }, []);
 
   // 外部クリックでファイルピッカーを閉じる
-  useEffect(() => {
-    if (!showFilePicker) return;
-    const handler = (e: MouseEvent) => {
-      if (filePickerRef.current && !filePickerRef.current.contains(e.target as Node)) {
-        setShowFilePicker(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [showFilePicker]);
+  useClickOutside(filePickerRef, () => setShowFilePicker(false), showFilePicker);
 
-  // 外部クリックで # ポップアップを閉じる
-  useEffect(() => {
-    if (!hashTrigger.active) return;
-    const handler = (e: MouseEvent) => {
-      if (
-        hashPopupRef.current &&
-        !hashPopupRef.current.contains(e.target as Node) &&
-        textareaRef.current &&
-        !textareaRef.current.contains(e.target as Node)
-      ) {
-        setHashTrigger({ active: false, startIndex: -1 });
-        setHashQuery("");
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [hashTrigger.active]);
+  // 外部クリックで # ポップアップを閉じる（textarea 内のクリックは除外）
+  useClickOutside(
+    [hashPopupRef, textareaRef],
+    () => {
+      setHashTrigger({ active: false, startIndex: -1 });
+      setHashQuery("");
+    },
+    hashTrigger.active,
+  );
 
   // # トリガー: ワークスペースファイルを検索する
   useEffect(() => {
@@ -272,77 +261,23 @@ export function InputArea({
     : false;
 
   return (
-    <div className="input-area">
-      <div className="input-wrapper">
+    <div className={styles.root}>
+      <div className={styles.wrapper}>
         {/* コンテキストバー: クリップボタン + 添付ファイルチップ + quick-add を1行に */}
-        <div className="context-bar">
-          <div className="context-bar-left">
-            {/* クリップボタン */}
-            <div className="context-clip-container" ref={filePickerRef}>
-              <button
-                type="button"
-                className="context-clip-button"
-                onClick={handleClipClick}
-                title={t["input.addContext"]}
-              >
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                  <path d="M10.97 2.29a1.625 1.625 0 0 0-2.298 0L3.836 7.126a2.813 2.813 0 0 0 3.977 3.977l4.837-4.836-.707-.708-4.837 4.837a1.813 1.813 0 0 1-2.563-2.563L9.38 2.997a.625.625 0 0 1 .884.884L5.427 8.718a.313.313 0 0 0 .442.442l4.837-4.837-.707-.707-4.837 4.837a1.313 1.313 0 0 1-1.856-1.856l4.836-4.837a1.625 1.625 0 0 1 2.298 0 1.625 1.625 0 0 1 0 2.298l-4.837 4.837a2.813 2.813 0 0 1-3.977-3.977L7.63 1.285l-.707-.707L1.285 6.214a3.813 3.813 0 0 0 5.391 5.391l4.837-4.837a2.625 2.625 0 0 0 0-3.712 2.625 2.625 0 0 0-.543-.356z" />
-                </svg>
-              </button>
-              {showFilePicker && (
-                <div className="file-picker-dropdown">
-                  <input
-                    className="file-picker-search"
-                    placeholder={t["input.searchFiles"]}
-                    value={filePickerQuery}
-                    onChange={(e) => handleFilePickerSearch(e.target.value)}
-                  />
-                  <div className="file-picker-list">
-                    {pickerFiles.length > 0 ? (
-                      pickerFiles.slice(0, 15).map((file) => (
-                        <div key={file.filePath} className="file-picker-item" onClick={() => addFile(file)}>
-                          <span className="file-picker-item-name">{file.fileName}</span>
-                          <span className="file-picker-item-path">{file.filePath}</span>
-                        </div>
-                      ))
-                    ) : (
-                      <div className="file-picker-empty">{t["input.noFiles"]}</div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-            {/* 添付されたファイルチップ (インライン) */}
-            {attachedFiles.map((file) => (
-              <div key={file.filePath} className="attached-file-chip">
-                <span className="attached-file-name">{file.fileName}</span>
-                <button
-                  type="button"
-                  className="attached-file-remove"
-                  onClick={() => removeFile(file.filePath)}
-                  title={t["input.remove"]}
-                >
-                  <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                    <path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.708.708L7.293 8l-3.647 3.646.708.708L8 8.707z" />
-                  </svg>
-                </button>
-              </div>
-            ))}
-            {/* 現在開いているファイルの quick-add ボタン */}
-            {activeEditorFile && !isActiveAttached && (
-              <button
-                type="button"
-                className="context-file-button"
-                onClick={() => addFile(activeEditorFile)}
-                title={t["input.addFile"](activeEditorFile.filePath)}
-              >
-                <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                  <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z" />
-                </svg>
-                <span>{activeEditorFile.fileName}</span>
-              </button>
-            )}
-          </div>
+        <div className={styles.contextBar}>
+          <FileAttachmentBar
+            attachedFiles={attachedFiles}
+            activeEditorFile={activeEditorFile}
+            isActiveAttached={isActiveAttached}
+            showFilePicker={showFilePicker}
+            filePickerQuery={filePickerQuery}
+            pickerFiles={pickerFiles}
+            onClipClick={handleClipClick}
+            onFilePickerSearch={handleFilePickerSearch}
+            onAddFile={addFile}
+            onRemoveFile={removeFile}
+            filePickerRef={filePickerRef}
+          />
           {/* コンテキストウィンドウ使用率インジケーター (右側) */}
           {contextLimit > 0 && (
             <ContextIndicator
@@ -355,10 +290,10 @@ export function InputArea({
         </div>
 
         {/* テキスト入力エリア（# ポップアップ付き） */}
-        <div className="textarea-container">
+        <div className={styles.textareaContainer}>
           <textarea
             ref={textareaRef}
-            className="input-textarea"
+            className={styles.textarea}
             placeholder={t["input.placeholder"]}
             value={text}
             onChange={handleTextChange}
@@ -374,54 +309,27 @@ export function InputArea({
           />
           {/* # トリガー ファイル候補ポップアップ */}
           {hashTrigger.active && (
-            <div className="hash-popup" ref={hashPopupRef}>
-              {hashFiles.length > 0 ? (
-                hashFiles.map((file) => (
-                  <div key={file.filePath} className="hash-popup-item" onClick={() => addFile(file)}>
-                    <span className="hash-popup-item-name">{file.fileName}</span>
-                    <span className="hash-popup-item-path">{file.filePath}</span>
-                  </div>
-                ))
-              ) : (
-                <div className="hash-popup-empty">{t["input.noFiles"]}</div>
-              )}
-            </div>
+            <HashFilePopup hashFiles={hashFiles} onAddFile={addFile} hashPopupRef={hashPopupRef} />
           )}
         </div>
 
-        <div className="input-actions">
-          <div className="input-actions-left">
+        <div className={styles.actions}>
+          <div className={styles.actionsLeft}>
             <ModelSelector
               providers={providers}
               allProvidersData={allProvidersData}
               selectedModel={selectedModel}
               onSelect={onModelSelect}
             />
-            <button
-              type="button"
-              className="tool-config-button"
-              onClick={onOpenTerminal}
-              title={t["input.openTerminal"]}
-            >
-              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M1 3.5l4.5 4.5L1 12.5l1 1 5.5-5.5L2 2.5l-1 1zM8 13h7v-1H8v1z" />
-              </svg>
-            </button>
-            <button
-              type="button"
-              className="tool-config-button"
-              onClick={() => setShowToolConfig((s) => !s)}
-              title={t["input.settings"]}
-            >
-              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M14.773 7.308l-1.394-.461a5.543 5.543 0 0 0-.476-1.147l.646-1.32a.249.249 0 0 0-.046-.283l-.87-.87a.249.249 0 0 0-.283-.046l-1.32.646a5.543 5.543 0 0 0-1.147-.476l-.461-1.394A.249.249 0 0 0 9.184 1.8H8.016a.249.249 0 0 0-.238.157l-.461 1.394a5.543 5.543 0 0 0-1.147.476l-1.32-.646a.249.249 0 0 0-.283.046l-.87.87a.249.249 0 0 0-.046.283l.646 1.32a5.543 5.543 0 0 0-.476 1.147l-1.394.461A.249.249 0 0 0 2.27 7.546v1.168c0 .103.064.196.157.238l1.394.461c.11.4.27.784.476 1.147l-.646 1.32a.249.249 0 0 0 .046.283l.87.87c.073.073.18.096.283.046l1.32-.646c.363.206.747.366 1.147.476l.461 1.394c.042.093.135.157.238.157h1.168c.103 0 .196-.064.238-.157l.461-1.394a5.543 5.543 0 0 0 1.147-.476l1.32.646a.249.249 0 0 0 .283-.046l.87-.87a.249.249 0 0 0 .046-.283l-.646-1.32c.206-.363.366-.747.476-1.147l1.394-.461a.249.249 0 0 0 .157-.238V7.546a.249.249 0 0 0-.157-.238zM8.6 10.9a2.3 2.3 0 1 1 0-4.6 2.3 2.3 0 0 1 0 4.6z" />
-              </svg>
-              <span className={`chevron-icon ${showToolConfig ? "expanded" : ""}`}>
-                <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                  <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
-                </svg>
+            <IconButton variant="muted" onClick={onOpenTerminal} title={t["input.openTerminal"]}>
+              <TerminalIcon />
+            </IconButton>
+            <IconButton variant="muted" onClick={() => setShowToolConfig((s) => !s)} title={t["input.settings"]}>
+              <GearIcon />
+              <span className={`${styles.chevron} ${showToolConfig ? styles.expanded : ""}`}>
+                <ChevronRightIcon />
               </span>
-            </button>
+            </IconButton>
             {showToolConfig && (
               <ToolConfigPanel
                 paths={openCodePaths}
@@ -433,23 +341,18 @@ export function InputArea({
             )}
           </div>
           {isBusy ? (
-            <button type="button" className="send-button" onClick={onAbort} title={t["input.stop"]}>
-              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <rect x="3" y="3" width="10" height="10" rx="1" />
-              </svg>
-            </button>
+            <IconButton className={styles.sendButton} onClick={onAbort} title={t["input.stop"]}>
+              <StopIcon />
+            </IconButton>
           ) : (
-            <button
-              type="button"
-              className="send-button"
+            <IconButton
+              className={styles.sendButton}
               onClick={handleSend}
               disabled={!text.trim()}
               title={t["input.send"]}
             >
-              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M1 1.5l14 6.5-14 6.5V9l8-1-8-1V1.5z" />
-              </svg>
-            </button>
+              <SendIcon />
+            </IconButton>
           )}
         </div>
       </div>
diff --git a/webview/components/organisms/InputArea/index.ts b/webview/components/organisms/InputArea/index.ts
new file mode 100644
index 0000000..cc0d098
--- /dev/null
+++ b/webview/components/organisms/InputArea/index.ts
@@ -0,0 +1 @@
+export { InputArea } from "./InputArea";
diff --git a/webview/components/organisms/MessageItem/MessageItem.module.css b/webview/components/organisms/MessageItem/MessageItem.module.css
new file mode 100644
index 0000000..052d7e9
--- /dev/null
+++ b/webview/components/organisms/MessageItem/MessageItem.module.css
@@ -0,0 +1,224 @@
+.message {
+  margin-bottom: 16px;
+}
+
+.assistant .content {
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.user {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.userBubble {
+  max-width: 85%;
+  background-color: var(--vscode-input-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  position: relative;
+}
+
+.userBubble:hover {
+  border-color: var(--vscode-focusBorder);
+}
+
+.userBubble:hover .editIcon {
+  opacity: 1;
+}
+
+.editIcon {
+  position: absolute;
+  top: 6px;
+  right: -24px;
+  opacity: 0;
+  color: var(--vscode-descriptionForeground);
+  transition: opacity 0.15s;
+}
+
+.editContainer {
+  width: 100%;
+  max-width: 85%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-self: flex-end;
+}
+
+.editTextarea {
+  width: 100%;
+  padding: 8px 12px;
+  background-color: var(--vscode-input-background);
+  border: 1px solid var(--vscode-focusBorder);
+  border-radius: 10px;
+  color: var(--vscode-input-foreground);
+  font-family: var(--vscode-font-family);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.editActions {
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.userBubble .content {
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.userFiles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+  justify-content: flex-end;
+}
+
+.userFileChip {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+}
+
+/* --- Markdown in messages --- */
+
+.content code {
+  font-family: var(--vscode-editor-font-family);
+  font-size: var(--vscode-editor-font-size);
+  background-color: var(--vscode-textCodeBlock-background);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.content pre {
+  background-color: var(--vscode-textCodeBlock-background);
+  padding: 8px 12px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.content pre code {
+  padding: 0;
+  background: none;
+}
+
+.content ul,
+.content ol {
+  padding-left: 1.5em;
+  margin: 2px 0;
+}
+
+.content li {
+  margin: 0;
+  padding: 0;
+  line-height: 1.4;
+}
+
+.content li + li {
+  margin-top: 1px;
+}
+
+.content li > p {
+  margin: 0;
+}
+
+.content p {
+  margin: 4px 0;
+}
+
+/* --- Reasoning part (Thinking) --- */
+
+.reasoningPart {
+  margin: 4px 0;
+  border-radius: 6px;
+}
+
+.reasoningHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  border-radius: 6px;
+  user-select: none;
+}
+
+.reasoningHeader:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.reasoningIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground);
+}
+
+.reasoningActive .reasoningIcon {
+  color: var(--vscode-progressBar-background);
+}
+
+.reasoningLabel {
+  flex: 1;
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+
+.reasoningActive .reasoningLabel {
+  color: var(--vscode-foreground);
+}
+
+.reasoningBody {
+  padding: 4px 8px 6px 30px;
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* --- Shared spinner & chevron (used by ReasoningPartView) --- */
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground);
+  transition: transform 0.15s;
+}
+
+.expanded {
+  transform: rotate(90deg);
+}
diff --git a/webview/components/MessageItem.tsx b/webview/components/organisms/MessageItem/MessageItem.tsx
similarity index 61%
rename from webview/components/MessageItem.tsx
rename to webview/components/organisms/MessageItem/MessageItem.tsx
index 92fe859..b8f7d8e 100644
--- a/webview/components/MessageItem.tsx
+++ b/webview/components/organisms/MessageItem/MessageItem.tsx
@@ -1,10 +1,13 @@
 import type { Permission, ReasoningPart as ReasoningPartType, TextPart } from "@opencode-ai/sdk";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { MessageWithParts } from "../App";
-import { useLocale } from "../locales";
-import { PermissionView } from "./PermissionView";
-import { TextPartView } from "./TextPartView";
-import { ToolPartView } from "./ToolPartView";
+import type { MessageWithParts } from "../../../App";
+import { useLocale } from "../../../locales";
+import { ActionButton } from "../../atoms/ActionButton";
+import { ChevronRightIcon, EditIcon, InfoCircleIcon, SpinnerIcon } from "../../atoms/icons";
+import { TextPartView } from "../../molecules/TextPartView";
+import { PermissionView } from "../PermissionView";
+import { ToolPartView } from "../ToolPartView";
+import styles from "./MessageItem.module.css";
 
 type Props = {
   message: MessageWithParts;
@@ -82,14 +85,14 @@ export function MessageItem({ message, activeSessionId, permissions, onEditAndRe
   );
 
   return (
-    <div className={`message ${isUser ? "message-user" : "message-assistant"}`}>
+    <div className={`${styles.message} ${isUser ? styles.user : styles.assistant}`}>
       {isUser ? (
         <>
           {editing ? (
-            <div className="message-edit-container">
+            <div className={styles.editContainer}>
               <textarea
                 ref={editRef}
-                className="message-edit-textarea"
+                className={styles.editTextarea}
                 value={editText}
                 onChange={(e) => {
                   setEditText(e.target.value);
@@ -99,34 +102,27 @@ export function MessageItem({ message, activeSessionId, permissions, onEditAndRe
                 onKeyDown={handleEditKeyDown}
                 rows={1}
               />
-              <div className="message-edit-actions">
-                <button type="button" className="message-edit-cancel" onClick={() => setEditing(false)}>
+              <div className={styles.editActions}>
+                <ActionButton variant="ghost" size="sm" onClick={() => setEditing(false)}>
                   {t["message.cancel"]}
-                </button>
-                <button
-                  type="button"
-                  className="message-edit-submit"
-                  onClick={handleEditSubmit}
-                  disabled={!editText.trim()}
-                >
+                </ActionButton>
+                <ActionButton size="sm" onClick={handleEditSubmit} disabled={!editText.trim()}>
                   {t["message.send"]}
-                </button>
+                </ActionButton>
               </div>
             </div>
           ) : (
-            <div className="message-user-bubble" onClick={handleStartEdit} title={t["message.clickToEdit"]}>
-              <div className="message-content">{userText}</div>
-              <div className="message-edit-icon">
-                <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                  <path d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z" />
-                </svg>
+            <div className={styles.userBubble} onClick={handleStartEdit} title={t["message.clickToEdit"]}>
+              <div className={styles.content}>{userText}</div>
+              <div className={styles.editIcon}>
+                <EditIcon width={12} height={12} />
               </div>
             </div>
           )}
           {userFiles.length > 0 && (
-            <div className="message-user-files">
+            <div className={styles.userFiles}>
               {userFiles.map((name, i) => (
-                <span key={i} className="message-user-file-chip">
+                <span key={i} className={styles.userFileChip}>
                   {name}
                 </span>
               ))}
@@ -134,7 +130,7 @@ export function MessageItem({ message, activeSessionId, permissions, onEditAndRe
           )}
         </>
       ) : (
-        <div className="message-content">
+        <div className={styles.content}>
           {parts.map((part) => {
             switch (part.type) {
               case "text":
@@ -163,36 +159,17 @@ function ReasoningPartView({ part }: { part: ReasoningPartType }) {
   const isComplete = !!part.time?.end;
 
   return (
-    <div className={`reasoning-part ${isComplete ? "complete" : "active"}`}>
-      <div className="reasoning-part-header" onClick={() => setExpanded((s) => !s)} title={t["message.toggleThought"]}>
-        <span className="reasoning-part-icon">
-          {isComplete ? (
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z" />
-              <path d="M7.5 4.5h1v4h-1zM7.5 10h1v1.5h-1z" />
-            </svg>
-          ) : (
-            <svg
-              aria-hidden="true"
-              className="tool-part-spinner"
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-            >
-              <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" opacity="0.3" />
-              <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-            </svg>
-          )}
+    <div className={`${styles.reasoningPart} ${isComplete ? "" : styles.reasoningActive}`}>
+      <div className={styles.reasoningHeader} onClick={() => setExpanded((s) => !s)} title={t["message.toggleThought"]}>
+        <span className={styles.reasoningIcon}>
+          {isComplete ? <InfoCircleIcon /> : <SpinnerIcon className={styles.spinner} width={14} height={14} />}
         </span>
-        <span className="reasoning-part-label">{isComplete ? t["message.thought"] : t["message.thinking"]}</span>
-        <span className={`tool-part-chevron ${expanded ? "expanded" : ""}`}>
-          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.3-5.3 5.4z" />
-          </svg>
+        <span className={styles.reasoningLabel}>{isComplete ? t["message.thought"] : t["message.thinking"]}</span>
+        <span className={`${styles.chevron} ${expanded ? styles.expanded : ""}`}>
+          <ChevronRightIcon />
         </span>
       </div>
-      {expanded && <div className="reasoning-part-body">{part.text}</div>}
+      {expanded && <div className={styles.reasoningBody}>{part.text}</div>}
     </div>
   );
 }
diff --git a/webview/components/organisms/MessageItem/index.ts b/webview/components/organisms/MessageItem/index.ts
new file mode 100644
index 0000000..53b2ea3
--- /dev/null
+++ b/webview/components/organisms/MessageItem/index.ts
@@ -0,0 +1 @@
+export { MessageItem } from "./MessageItem";
diff --git a/webview/components/organisms/MessagesArea/MessagesArea.module.css b/webview/components/organisms/MessagesArea/MessagesArea.module.css
new file mode 100644
index 0000000..d05b332
--- /dev/null
+++ b/webview/components/organisms/MessagesArea/MessagesArea.module.css
@@ -0,0 +1,67 @@
+.root {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.root::-webkit-scrollbar {
+  width: 6px;
+}
+
+.root::-webkit-scrollbar-thumb {
+  background-color: var(--vscode-scrollbarSlider-background);
+  border-radius: 3px;
+}
+
+.root::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+
+.checkpointDivider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  margin: 2px 0;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.root:hover .checkpointDivider {
+  opacity: 0.6;
+}
+
+.checkpointDivider:hover {
+  opacity: 1;
+}
+
+.checkpointLine {
+  flex: 1;
+  height: 0;
+  border-top: 1px dashed var(--vscode-panel-border);
+}
+
+.checkpointDivider:hover .checkpointLine {
+  border-color: var(--vscode-focusBorder);
+}
+
+.checkpointButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: none;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  font-family: var(--vscode-font-family);
+  font-size: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 3px;
+}
+
+.checkpointDivider:hover .checkpointButton {
+  color: var(--vscode-foreground);
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
diff --git a/webview/components/MessagesArea.tsx b/webview/components/organisms/MessagesArea/MessagesArea.tsx
similarity index 74%
rename from webview/components/MessagesArea.tsx
rename to webview/components/organisms/MessagesArea/MessagesArea.tsx
index 40d9260..1ca8c62 100644
--- a/webview/components/MessagesArea.tsx
+++ b/webview/components/organisms/MessagesArea/MessagesArea.tsx
@@ -1,9 +1,11 @@
 import type { Permission } from "@opencode-ai/sdk";
 import { useEffect, useRef } from "react";
-import type { MessageWithParts } from "../App";
-import { useLocale } from "../locales";
-import { MessageItem } from "./MessageItem";
-import { StreamingIndicator } from "./StreamingIndicator";
+import type { MessageWithParts } from "../../../App";
+import { useLocale } from "../../../locales";
+import { RevertIcon } from "../../atoms/icons";
+import { StreamingIndicator } from "../../atoms/StreamingIndicator";
+import { MessageItem } from "../MessageItem";
+import styles from "./MessagesArea.module.css";
 
 type Props = {
   messages: MessageWithParts[];
@@ -30,7 +32,7 @@ export function MessagesArea({
   }, []);
 
   return (
-    <div className="messages-area">
+    <div className={styles.root}>
       {messages.map((msg, index) => {
         // アシスタントメッセージの直後にチェックポイント区切り線を表示する
         // ただし最後のメッセージの後、busy 中、次がユーザーメッセージの場合のみ
@@ -48,7 +50,7 @@ export function MessagesArea({
             />
             {showCheckpoint && (
               <div
-                className="checkpoint-divider"
+                className={styles.checkpointDivider}
                 onClick={() => {
                   // 次のユーザーメッセージのテキストを取得して入力欄に戻す
                   const userMsg = nextMsg;
@@ -62,14 +64,12 @@ export function MessagesArea({
                 }}
                 title={t["checkpoint.revertTitle"]}
               >
-                <div className="checkpoint-line" />
-                <button type="button" className="checkpoint-button">
-                  <svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                    <path d="M2.006 8.267L.78 9.5 3.28 12l2.5-2.5L4.56 8.28l-1.054 1.06a5.001 5.001 0 0 1 8.98-3.89l1.054-.98A6.002 6.002 0 0 0 3.507 7.21L2.006 8.267zM13.994 7.733L15.22 6.5 12.72 4l-2.5 2.5 1.22 1.22 1.054-1.06a5.001 5.001 0 0 1-8.98 3.89l-1.054.98a6.002 6.002 0 0 0 10.007-1.566l1.527-2.231z" />
-                  </svg>
+                <div className={styles.checkpointLine} />
+                <button type="button" className={styles.checkpointButton}>
+                  <RevertIcon />
                   <span>{t["checkpoint.retryFromHere"]}</span>
                 </button>
-                <div className="checkpoint-line" />
+                <div className={styles.checkpointLine} />
               </div>
             )}
           </div>
diff --git a/webview/components/organisms/MessagesArea/index.ts b/webview/components/organisms/MessagesArea/index.ts
new file mode 100644
index 0000000..aaa1320
--- /dev/null
+++ b/webview/components/organisms/MessagesArea/index.ts
@@ -0,0 +1 @@
+export { MessagesArea } from "./MessagesArea";
diff --git a/webview/components/organisms/PermissionView/PermissionView.module.css b/webview/components/organisms/PermissionView/PermissionView.module.css
new file mode 100644
index 0000000..053a612
--- /dev/null
+++ b/webview/components/organisms/PermissionView/PermissionView.module.css
@@ -0,0 +1,18 @@
+.root {
+  margin: 8px 0;
+  padding: 10px;
+  border: 1px solid var(--vscode-inputValidation-warningBorder);
+  border-radius: 4px;
+  background-color: var(--vscode-inputValidation-warningBackground);
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.actions {
+  display: flex;
+  gap: 6px;
+}
diff --git a/webview/components/organisms/PermissionView/PermissionView.tsx b/webview/components/organisms/PermissionView/PermissionView.tsx
new file mode 100644
index 0000000..5fd49c7
--- /dev/null
+++ b/webview/components/organisms/PermissionView/PermissionView.tsx
@@ -0,0 +1,37 @@
+import type { Permission } from "@opencode-ai/sdk";
+import { useLocale } from "../../../locales";
+import { postMessage } from "../../../vscode-api";
+import { ActionButton } from "../../atoms/ActionButton";
+import styles from "./PermissionView.module.css";
+
+type Props = {
+  permission: Permission;
+  activeSessionId: string;
+};
+
+export function PermissionView({ permission, activeSessionId }: Props) {
+  const t = useLocale();
+  const reply = (response: "once" | "always" | "reject") => {
+    postMessage({
+      type: "replyPermission",
+      sessionId: activeSessionId,
+      permissionId: permission.id,
+      response,
+    });
+  };
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.title}>{permission.title}</div>
+      <div className={styles.actions}>
+        <ActionButton onClick={() => reply("always")}>{t["permission.allow"]}</ActionButton>
+        <ActionButton variant="secondary" onClick={() => reply("once")}>
+          {t["permission.once"]}
+        </ActionButton>
+        <ActionButton variant="secondary" onClick={() => reply("reject")}>
+          {t["permission.deny"]}
+        </ActionButton>
+      </div>
+    </div>
+  );
+}
diff --git a/webview/components/organisms/PermissionView/index.ts b/webview/components/organisms/PermissionView/index.ts
new file mode 100644
index 0000000..7dbe35d
--- /dev/null
+++ b/webview/components/organisms/PermissionView/index.ts
@@ -0,0 +1 @@
+export { PermissionView } from "./PermissionView";
diff --git a/webview/components/organisms/SessionList/SessionList.module.css b/webview/components/organisms/SessionList/SessionList.module.css
new file mode 100644
index 0000000..43d9c71
--- /dev/null
+++ b/webview/components/organisms/SessionList/SessionList.module.css
@@ -0,0 +1,104 @@
+.root {
+  position: absolute;
+  top: 36px;
+  left: 0;
+  right: 0;
+  background-color: var(--vscode-quickInput-background);
+  border: 1px solid var(--vscode-panel-border);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 10;
+  padding: 2px 0;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.active {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
+.itemContent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.itemTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.itemMeta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.active .itemMeta {
+  color: var(--vscode-list-activeSelectionForeground);
+  opacity: 0.7;
+}
+
+.itemTime {
+  white-space: nowrap;
+}
+
+.itemStats {
+  display: flex;
+  gap: 3px;
+  white-space: nowrap;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 10px;
+}
+
+.itemFiles {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.itemAdditions {
+  color: var(--vscode-gitDecoration-addedResourceForeground, #4caf50);
+}
+
+.itemDeletions {
+  color: var(--vscode-gitDecoration-deletedResourceForeground, #f44336);
+}
+
+.active .itemFiles,
+.active .itemAdditions,
+.active .itemDeletions {
+  color: inherit;
+}
+
+.itemDelete {
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.item:hover .itemDelete {
+  opacity: 1;
+}
diff --git a/webview/components/SessionList.tsx b/webview/components/organisms/SessionList/SessionList.tsx
similarity index 51%
rename from webview/components/SessionList.tsx
rename to webview/components/organisms/SessionList/SessionList.tsx
index 9979594..2520ea2 100644
--- a/webview/components/SessionList.tsx
+++ b/webview/components/organisms/SessionList/SessionList.tsx
@@ -1,5 +1,9 @@
 import type { Session } from "@opencode-ai/sdk";
-import { useLocale } from "../locales";
+import { useLocale } from "../../../locales";
+import type { en } from "../../../locales/en";
+import { IconButton } from "../../atoms/IconButton";
+import { DeleteIcon, FileIcon } from "../../atoms/icons";
+import styles from "./SessionList.module.css";
 
 type Props = {
   sessions: Session[];
@@ -9,17 +13,17 @@ type Props = {
   onClose: () => void;
 };
 
-function formatRelativeTime(timestamp: number): string {
+export function formatRelativeTime(timestamp: number, t: typeof en): string {
   const now = Date.now();
   const diff = now - timestamp;
   const seconds = Math.floor(diff / 1000);
-  if (seconds < 60) return "now";
+  if (seconds < 60) return t["time.now"];
   const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
+  if (minutes < 60) return t["time.minutes"](minutes);
   const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h`;
+  if (hours < 24) return t["time.hours"](hours);
   const days = Math.floor(hours / 24);
-  return `${days}d`;
+  return t["time.days"](days);
 }
 
 export function SessionList({ sessions, activeSessionId, onSelect, onDelete, onClose }: Props) {
@@ -28,7 +32,7 @@ export function SessionList({ sessions, activeSessionId, onSelect, onDelete, onC
     <>
       {/* Backdrop to close session list on outside click */}
       <div style={{ position: "fixed", inset: 0, zIndex: 9 }} onClick={onClose} />
-      <div className="session-list">
+      <div className={styles.root}>
         {sessions.length === 0 ? (
           <div style={{ padding: "12px", fontSize: 12, color: "var(--vscode-descriptionForeground)" }}>
             {t["session.noSessions"]}
@@ -40,41 +44,36 @@ export function SessionList({ sessions, activeSessionId, onSelect, onDelete, onC
             return (
               <div
                 key={session.id}
-                className={`session-item ${session.id === activeSessionId ? "active" : ""}`}
+                className={`${styles.item} ${session.id === activeSessionId ? styles.active : ""}`}
                 onClick={() => onSelect(session.id)}
                 title={session.title || t["session.select"]}
               >
-                <div className="session-item-content">
-                  <span className="session-item-title">{session.title || t["session.untitled"]}</span>
-                  <span className="session-item-meta">
-                    <span className="session-item-time">{formatRelativeTime(session.time.updated)}</span>
+                <div className={styles.itemContent}>
+                  <span className={styles.itemTitle}>{session.title || t["session.untitled"]}</span>
+                  <span className={styles.itemMeta}>
+                    <span className={styles.itemTime}>{formatRelativeTime(session.time.updated, t)}</span>
                     {hasSummary && (
-                      <span className="session-item-stats">
-                        <span className="session-item-files">
-                          <svg aria-hidden="true" width="10" height="10" viewBox="0 0 16 16" fill="currentColor">
-                            <path d="M13.71 4.29l-3-3A1 1 0 0010 1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V5a1 1 0 00-.29-.71zM12 14H4V2h5v3a1 1 0 001 1h3v8z" />
-                          </svg>
+                      <span className={styles.itemStats}>
+                        <span className={styles.itemFiles}>
+                          <FileIcon width={10} height={10} />
                           {summary.files}
                         </span>
-                        <span className="session-item-additions">+{summary.additions}</span>
-                        <span className="session-item-deletions">-{summary.deletions}</span>
+                        <span className={styles.itemAdditions}>+{summary.additions}</span>
+                        <span className={styles.itemDeletions}>-{summary.deletions}</span>
                       </span>
                     )}
                   </span>
                 </div>
-                <button
-                  type="button"
-                  className="btn-icon session-item-delete"
+                <IconButton
+                  className={styles.itemDelete}
                   onClick={(e) => {
                     e.stopPropagation();
                     onDelete(session.id);
                   }}
                   title={t["session.delete"]}
                 >
-                  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                    <path d="M10 3h3v1h-1v9a1 1 0 01-1 1H5a1 1 0 01-1-1V4H3V3h3V2a1 1 0 011-1h2a1 1 0 011 1v1zM5 4v9h6V4H5zm2-1V2H7v1h2V2H9v1z" />
-                  </svg>
-                </button>
+                  <DeleteIcon />
+                </IconButton>
               </div>
             );
           })
diff --git a/webview/components/organisms/SessionList/index.ts b/webview/components/organisms/SessionList/index.ts
new file mode 100644
index 0000000..dadcf68
--- /dev/null
+++ b/webview/components/organisms/SessionList/index.ts
@@ -0,0 +1 @@
+export { formatRelativeTime, SessionList } from "./SessionList";
diff --git a/webview/components/organisms/ToolConfigPanel/ToolConfigPanel.module.css b/webview/components/organisms/ToolConfigPanel/ToolConfigPanel.module.css
new file mode 100644
index 0000000..7792f34
--- /dev/null
+++ b/webview/components/organisms/ToolConfigPanel/ToolConfigPanel.module.css
@@ -0,0 +1,88 @@
+.root {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  width: 300px;
+  max-height: 400px;
+  background-color: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
+  border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+}
+
+.body {
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.section {
+  padding: 4px 0;
+}
+
+.sectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 12px;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  user-select: none;
+}
+
+.toggle:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.toggle input[type="radio"] {
+  flex-shrink: 0;
+  accent-color: var(--vscode-checkbox-background);
+}
+
+.toolItem {
+  padding: 3px 12px;
+}
+
+.toolName {
+  flex: 1;
+  color: var(--vscode-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.footer {
+  display: flex;
+  gap: 4px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--vscode-panel-border);
+  flex-shrink: 0;
+}
diff --git a/webview/components/organisms/ToolConfigPanel/ToolConfigPanel.tsx b/webview/components/organisms/ToolConfigPanel/ToolConfigPanel.tsx
new file mode 100644
index 0000000..7bf9d70
--- /dev/null
+++ b/webview/components/organisms/ToolConfigPanel/ToolConfigPanel.tsx
@@ -0,0 +1,72 @@
+import { useRef } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside";
+import type { LocaleSetting } from "../../../locales";
+import { useLocale } from "../../../locales";
+import { IconButton } from "../../atoms/IconButton";
+import { CloseIcon, FileIcon } from "../../atoms/icons";
+import { LinkButton } from "../../atoms/LinkButton";
+import styles from "./ToolConfigPanel.module.css";
+
+type Props = {
+  paths: { home: string; config: string; state: string; directory: string } | null;
+  onOpenConfigFile: (filePath: string) => void;
+  onClose: () => void;
+  localeSetting: LocaleSetting;
+  onLocaleSettingChange: (setting: LocaleSetting) => void;
+};
+
+export function ToolConfigPanel({ paths, onOpenConfigFile, onClose, localeSetting, onLocaleSettingChange }: Props) {
+  const t = useLocale();
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(panelRef, onClose);
+
+  return (
+    <div className={styles.root} ref={panelRef}>
+      <div className={styles.header}>
+        <span className={styles.title}>{t["config.title"]}</span>
+        <IconButton variant="muted" size="sm" onClick={onClose} title={t["config.close"]}>
+          <CloseIcon />
+        </IconButton>
+      </div>
+
+      <div className={styles.body}>
+        {/* Language Setting */}
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>{t["config.language"]}</div>
+          <div>
+            {(["auto", "en", "ja"] as const).map((opt) => {
+              const label =
+                opt === "auto" ? t["config.langAuto"] : opt === "en" ? t["config.langEn"] : t["config.langJa"];
+              return (
+                <label key={opt} className={`${styles.toggle} ${styles.toolItem}`}>
+                  <input
+                    type="radio"
+                    name="locale"
+                    checked={localeSetting === opt}
+                    onChange={() => onLocaleSettingChange(opt)}
+                  />
+                  <span className={styles.toolName}>{label}</span>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* 設定ファイルへのリンク */}
+      {paths && (
+        <div className={styles.footer}>
+          <LinkButton onClick={() => onOpenConfigFile(`${paths.directory}/opencode.json`)}>
+            <FileIcon />
+            {t["config.projectConfig"]}
+          </LinkButton>
+          <LinkButton onClick={() => onOpenConfigFile(`${paths.config}/opencode.json`)}>
+            <FileIcon />
+            {t["config.globalConfig"]}
+          </LinkButton>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/webview/components/organisms/ToolConfigPanel/index.ts b/webview/components/organisms/ToolConfigPanel/index.ts
new file mode 100644
index 0000000..5ed58bc
--- /dev/null
+++ b/webview/components/organisms/ToolConfigPanel/index.ts
@@ -0,0 +1 @@
+export { ToolConfigPanel } from "./ToolConfigPanel";
diff --git a/webview/components/organisms/ToolPartView/ToolPartView.module.css b/webview/components/organisms/ToolPartView/ToolPartView.module.css
new file mode 100644
index 0000000..159323f
--- /dev/null
+++ b/webview/components/organisms/ToolPartView/ToolPartView.module.css
@@ -0,0 +1,140 @@
+.root {
+  margin: 2px 0;
+  border-radius: 6px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  border-radius: 6px;
+  user-select: none;
+}
+
+.header:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.completed .icon {
+  color: var(--vscode-descriptionForeground);
+}
+
+.running .icon,
+.pending .icon {
+  color: var(--vscode-progressBar-background);
+}
+
+.error .icon {
+  color: var(--vscode-errorForeground);
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* アクション種別ラベル */
+
+.action {
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border-radius: 3px;
+}
+
+.actionRead {
+  color: var(--vscode-textLink-foreground);
+  background-color: color-mix(in srgb, var(--vscode-textLink-foreground) 12%, transparent);
+}
+
+.actionEdit {
+  color: var(--vscode-editorWarning-foreground, #ff9800);
+  background-color: color-mix(in srgb, var(--vscode-editorWarning-foreground, #ff9800) 12%, transparent);
+}
+
+.actionWrite {
+  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
+  background-color: color-mix(in srgb, var(--vscode-gitDecoration-addedResourceForeground, #2ea043) 12%, transparent);
+}
+
+.actionRun {
+  color: var(--vscode-terminal-ansiMagenta, #bc3fbc);
+  background-color: color-mix(in srgb, var(--vscode-terminal-ansiMagenta, #bc3fbc) 12%, transparent);
+}
+
+.actionSearch {
+  color: var(--vscode-terminal-ansiCyan, #11a8cd);
+  background-color: color-mix(in srgb, var(--vscode-terminal-ansiCyan, #11a8cd) 12%, transparent);
+}
+
+.actionOther {
+  color: var(--vscode-descriptionForeground);
+  background-color: color-mix(in srgb, var(--vscode-descriptionForeground) 12%, transparent);
+}
+
+.title {
+  flex: 1;
+  color: var(--vscode-descriptionForeground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+}
+
+.error .title {
+  color: var(--vscode-errorForeground);
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground);
+  transition: transform 0.15s;
+}
+
+.expanded {
+  transform: rotate(90deg);
+}
+
+.body {
+  padding: 0 8px 6px 30px;
+}
+
+.output {
+  margin: 0;
+  padding: 6px 8px;
+  font-size: 11px;
+  font-family: var(--vscode-editor-font-family, monospace);
+  background-color: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 200px;
+  overflow-y: auto;
+  color: var(--vscode-descriptionForeground);
+}
+
+.outputError {
+  color: var(--vscode-errorForeground);
+}
diff --git a/webview/components/organisms/ToolPartView/ToolPartView.tsx b/webview/components/organisms/ToolPartView/ToolPartView.tsx
new file mode 100644
index 0000000..7378205
--- /dev/null
+++ b/webview/components/organisms/ToolPartView/ToolPartView.tsx
@@ -0,0 +1,165 @@
+import type { ToolPart } from "@opencode-ai/sdk";
+import { useMemo, useState } from "react";
+import { useLocale } from "../../../locales";
+import { parseTodos } from "../../../utils/todo";
+import { CATEGORY_LABEL_KEYS, getCategory, type ToolCategory } from "../../../utils/tool-categories";
+import {
+  ChevronRightIcon,
+  EditActionIcon,
+  ErrorCircleIcon,
+  ReadActionIcon,
+  RunActionIcon,
+  SearchActionIcon,
+  SpinnerIcon,
+  ToolIcon,
+  WriteActionIcon,
+} from "../../atoms/icons";
+import { DiffView } from "../../molecules/DiffView";
+import { FileCreateView } from "../../molecules/FileCreateView";
+import { TodoView } from "../../molecules/TodoView";
+import styles from "./ToolPartView.module.css";
+
+type Props = {
+  part: ToolPart;
+};
+
+/** タイトル（ファイルパスなど）をフォーマット */
+function formatTitle(part: ToolPart): string | null {
+  const { state } = part;
+  const title = state.status === "completed" ? state.title : state.status === "running" ? state.title : null;
+  return title ?? null;
+}
+
+/** input からファイルパスを抽出 */
+function getFilePath(input: Record<string, unknown>): string | null {
+  const fp = input.filePath ?? input.file ?? input.path ?? input.filename;
+  if (typeof fp === "string") return fp;
+  return null;
+}
+
+function isFileEditInput(input: Record<string, unknown>): boolean {
+  return typeof input.oldString === "string" && typeof input.newString === "string";
+}
+
+function isFileCreateInput(input: Record<string, unknown>): boolean {
+  return typeof input.content === "string" && getFilePath(input) !== null && typeof input.oldString !== "string";
+}
+
+function ActionIcon({ category }: { category: ToolCategory }) {
+  switch (category) {
+    case "read":
+      return <ReadActionIcon />;
+    case "edit":
+      return <EditActionIcon />;
+    case "write":
+      return <WriteActionIcon />;
+    case "run":
+      return <RunActionIcon />;
+    case "search":
+      return <SearchActionIcon />;
+    default:
+      return <ToolIcon />;
+  }
+}
+
+export function ToolPartView({ part }: Props) {
+  const t = useLocale();
+  const [expanded, setExpanded] = useState(false);
+  const { state } = part;
+
+  const isActive = state.status === "running" || state.status === "pending";
+  const isCompleted = state.status === "completed";
+  const isError = state.status === "error";
+
+  const category = getCategory(part.tool);
+  const actionLabel = t[CATEGORY_LABEL_KEYS[category]];
+  const title = formatTitle(part);
+
+  const input = (state.status !== "pending" ? state.input : null) as Record<string, unknown> | null;
+  const isEdit = input ? isFileEditInput(input) : false;
+  const isCreate = input ? isFileCreateInput(input) : false;
+
+  // ToDo ツール判定 & パース
+  const isTodoTool = part.tool === "todowrite" || part.tool === "todoread";
+  const todos = useMemo(() => {
+    if (!isTodoTool) return null;
+    // outputから試す（todoread, todowrite完了後）
+    if (isCompleted && state.output) {
+      const fromOutput = parseTodos(state.output);
+      if (fromOutput) return fromOutput;
+    }
+    // inputから試す（todowrite）
+    if (input) {
+      const fromInput = parseTodos(input.todos ?? input);
+      if (fromInput) return fromInput;
+    }
+    return null;
+  }, [isTodoTool, isCompleted, state, input]);
+
+  // タイトル表示: todoツールの場合は件数を正しく表示
+  const displayTitle = useMemo(() => {
+    if (isTodoTool && todos) {
+      const done = todos.filter((td) => td.status === "completed" || td.status === "done").length;
+      return t["tool.todos"](done, todos.length);
+    }
+    return title;
+  }, [isTodoTool, todos, title, t["tool.todos"]]);
+
+  const statusClass: Record<string, string> = {
+    running: styles.running,
+    pending: styles.pending,
+    completed: styles.completed,
+    error: styles.error,
+  };
+
+  const actionClass: Record<string, string> = {
+    read: styles.actionRead,
+    edit: styles.actionEdit,
+    write: styles.actionWrite,
+    run: styles.actionRun,
+    search: styles.actionSearch,
+    other: styles.actionOther,
+  };
+
+  return (
+    <div className={`${styles.root} ${statusClass[state.status] ?? ""}`}>
+      <div className={styles.header} onClick={() => setExpanded((s) => !s)} title={t["tool.toggleDetails"]}>
+        <span className={styles.icon}>
+          {isActive ? (
+            <SpinnerIcon className={styles.spinner} />
+          ) : isError ? (
+            <ErrorCircleIcon />
+          ) : (
+            <ActionIcon category={category} />
+          )}
+        </span>
+        <span className={`${styles.action} ${actionClass[category] ?? ""}`}>{actionLabel}</span>
+        {displayTitle && (
+          <span className={styles.title} title={displayTitle}>
+            {displayTitle}
+          </span>
+        )}
+        <span className={`${styles.chevron} ${expanded ? styles.expanded : ""}`}>
+          <ChevronRightIcon />
+        </span>
+      </div>
+      {expanded && (
+        <div className={styles.body}>
+          {todos ? (
+            <TodoView todos={todos} />
+          ) : isEdit && input ? (
+            <DiffView oldStr={input.oldString as string} newStr={input.newString as string} />
+          ) : isCreate && input ? (
+            <FileCreateView content={input.content as string} />
+          ) : (
+            <>
+              {isCompleted && state.output && <pre className={styles.output}>{state.output}</pre>}
+              {isError && <pre className={`${styles.output} ${styles.outputError}`}>{state.error}</pre>}
+              {isActive && input && <pre className={styles.output}>{JSON.stringify(input, null, 2)}</pre>}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/webview/components/organisms/ToolPartView/index.ts b/webview/components/organisms/ToolPartView/index.ts
new file mode 100644
index 0000000..dd668c9
--- /dev/null
+++ b/webview/components/organisms/ToolPartView/index.ts
@@ -0,0 +1 @@
+export { ToolPartView } from "./ToolPartView";
diff --git a/webview/contexts/AppContext.tsx b/webview/contexts/AppContext.tsx
new file mode 100644
index 0000000..3beb9b5
--- /dev/null
+++ b/webview/contexts/AppContext.tsx
@@ -0,0 +1,68 @@
+import type { Permission, Provider, Session } from "@opencode-ai/sdk";
+import { createContext, useContext } from "react";
+import type { MessageWithParts } from "../hooks/useMessages";
+import type { LocaleSetting } from "../locales";
+import type { TodoItem } from "../utils/todo";
+import type { AllProvidersData, FileAttachment } from "../vscode-api";
+
+export type AppContextValue = {
+  // Session
+  sessions: Session[];
+  activeSession: Session | null;
+  sessionBusy: boolean;
+  showSessionList: boolean;
+  onNewSession: () => void;
+  onSelectSession: (sessionId: string) => void;
+  onDeleteSession: (sessionId: string) => void;
+  onToggleSessionList: () => void;
+
+  // Messages
+  messages: MessageWithParts[];
+  inputTokens: number;
+  latestTodos: TodoItem[];
+  prefillText: string;
+  onPrefillConsumed: () => void;
+
+  // Providers & Model
+  providers: Provider[];
+  allProvidersData: AllProvidersData | null;
+  selectedModel: { providerID: string; modelID: string } | null;
+  onModelSelect: (model: { providerID: string; modelID: string }) => void;
+  contextLimit: number;
+
+  // Permissions
+  permissions: Map<string, Permission>;
+
+  // Files
+  openEditors: FileAttachment[];
+  workspaceFiles: FileAttachment[];
+
+  // Actions
+  onSend: (text: string, files: FileAttachment[]) => void;
+  onAbort: () => void;
+  onCompress: () => void;
+  isCompressing: boolean;
+  onEditAndResend: (messageId: string, text: string) => void;
+  onRevertToCheckpoint: (assistantMessageId: string, userText: string | null) => void;
+
+  // Settings
+  openCodePaths: { home: string; config: string; state: string; directory: string } | null;
+  onOpenConfigFile: (filePath: string) => void;
+  onOpenTerminal: () => void;
+  localeSetting: LocaleSetting;
+  onLocaleSettingChange: (setting: LocaleSetting) => void;
+};
+
+// Context は AppProvider 内でのみ使用される想定。
+// Provider 外で useAppContext() を呼んだ場合はランタイムエラーで即座に気づけるよう null を初期値とする。
+const AppContext = createContext<AppContextValue | null>(null);
+
+export const AppContextProvider = AppContext.Provider;
+
+export function useAppContext(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useAppContext must be used within AppContextProvider");
+  }
+  return ctx;
+}
diff --git a/webview/css-modules.d.ts b/webview/css-modules.d.ts
new file mode 100644
index 0000000..96ac9c7
--- /dev/null
+++ b/webview/css-modules.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
diff --git a/webview/hooks/useClickOutside.ts b/webview/hooks/useClickOutside.ts
new file mode 100644
index 0000000..00f98f5
--- /dev/null
+++ b/webview/hooks/useClickOutside.ts
@@ -0,0 +1,35 @@
+import { type RefObject, useEffect, useRef } from "react";
+
+/**
+ * 指定した ref 要素群の外側がクリックされたときにコールバックを呼ぶ。
+ *
+ * @param refs     監視対象の ref（単一 or 配列）。配列の場合、すべての要素の外側をクリックしたときのみ発火する。
+ * @param callback 外部クリック時に呼ばれるコールバック。
+ * @param enabled  リスナーを有効にするかどうか（デフォルト: true）。
+ */
+export function useClickOutside(
+  refs: RefObject<Element | null> | RefObject<Element | null>[],
+  callback: () => void,
+  enabled = true,
+): void {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  const refsRef = useRef(refs);
+  refsRef.current = refs;
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handler = (e: MouseEvent) => {
+      const refArray = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
+      const isOutside = refArray.every((r) => !r.current || !r.current.contains(e.target as Node));
+      if (isOutside) {
+        callbackRef.current();
+      }
+    };
+
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [enabled]);
+}
diff --git a/webview/hooks/useLocale.ts b/webview/hooks/useLocale.ts
new file mode 100644
index 0000000..0b28060
--- /dev/null
+++ b/webview/hooks/useLocale.ts
@@ -0,0 +1,28 @@
+import { useCallback, useMemo, useState } from "react";
+import type { LocaleSetting } from "../locales";
+import { getStrings, resolveLocale } from "../locales";
+import { getPersistedState, setPersistedState } from "../vscode-api";
+
+export function useLocale() {
+  const [localeSetting, setLocaleSetting] = useState<LocaleSetting>(
+    () => (getPersistedState()?.localeSetting as LocaleSetting) ?? "auto",
+  );
+  const [vscodeLanguage, setVscodeLanguage] = useState("en");
+
+  const resolvedLocale = useMemo(() => resolveLocale(localeSetting, vscodeLanguage), [localeSetting, vscodeLanguage]);
+  const strings = useMemo(() => getStrings(resolvedLocale), [resolvedLocale]);
+
+  const handleLocaleSettingChange = useCallback((setting: LocaleSetting) => {
+    setLocaleSetting(setting);
+    setPersistedState({ ...getPersistedState(), localeSetting: setting });
+  }, []);
+
+  return {
+    localeSetting,
+    vscodeLanguage,
+    setVscodeLanguage,
+    resolvedLocale,
+    strings,
+    handleLocaleSettingChange,
+  } as const;
+}
diff --git a/webview/hooks/useMessages.ts b/webview/hooks/useMessages.ts
new file mode 100644
index 0000000..0a2ccfb
--- /dev/null
+++ b/webview/hooks/useMessages.ts
@@ -0,0 +1,120 @@
+import type { Event, Message, Part } from "@opencode-ai/sdk";
+import { useCallback, useMemo, useState } from "react";
+import type { TodoItem } from "../utils/todo";
+import { parseTodos } from "../utils/todo";
+
+export type MessageWithParts = { info: Message; parts: Part[] };
+
+/** メッセージ情報を追加または更新する */
+function upsertMessage(prev: MessageWithParts[], info: Message): MessageWithParts[] {
+  const idx = prev.findIndex((m) => m.info.id === info.id);
+  if (idx >= 0) {
+    const updated = [...prev];
+    updated[idx] = { ...updated[idx], info };
+    return updated;
+  }
+  return [...prev, { info, parts: [] }];
+}
+
+/** パートを追加または更新する */
+function upsertPart(prev: MessageWithParts[], part: Part): MessageWithParts[] {
+  const idx = prev.findIndex((m) => m.info.id === part.messageID);
+  if (idx < 0) return prev;
+  const updated = [...prev];
+  const msg = { ...updated[idx] };
+  const partIdx = msg.parts.findIndex((p) => p.id === part.id);
+  if (partIdx >= 0) {
+    msg.parts = [...msg.parts];
+    msg.parts[partIdx] = part;
+  } else {
+    msg.parts = [...msg.parts, part];
+  }
+  updated[idx] = msg;
+  return updated;
+}
+
+/** メッセージを削除する */
+function removeMessage(prev: MessageWithParts[], messageID: string): MessageWithParts[] {
+  return prev.filter((m) => m.info.id !== messageID);
+}
+
+/**
+ * チャットメッセージの状態管理フック。
+ *
+ * メッセージの実体はサーバー側が保持しているが、AI の応答中はテキストやツール呼び出しの
+ * パートが SSE で細かく差分配信されるため、Webview 側でも配列を保持して差分マージすることで
+ * ストリーミング表示をリアルタイムに実現している。
+ * また、この配列から inputTokens（コンテキスト使用量）や latestTodos を導出している。
+ */
+export function useMessages() {
+  const [messages, setMessages] = useState<MessageWithParts[]>([]);
+  const [prefillText, setPrefillText] = useState("");
+
+  // messages から StepFinishPart のトークン使用量を導出する（圧縮でメッセージが減ると自動的に反映される）
+  const inputTokens = useMemo(() => {
+    let total = 0;
+    for (const m of messages) {
+      for (const p of m.parts) {
+        if (p.type === "step-finish" && p.tokens) {
+          total += p.tokens.input;
+        }
+      }
+    }
+    return total;
+  }, [messages]);
+
+  // メッセージから最新の ToDo リストを導出（todowrite/todoread ツールの最新の出力）
+  const latestTodos = useMemo<TodoItem[]>(() => {
+    for (let mi = messages.length - 1; mi >= 0; mi--) {
+      const parts = messages[mi].parts;
+      for (let pi = parts.length - 1; pi >= 0; pi--) {
+        const p = parts[pi];
+        if (p.type !== "tool") continue;
+        if (p.tool !== "todowrite" && p.tool !== "todoread") continue;
+        const st = p.state;
+        if (st.status === "completed" && st.output) {
+          const parsed = parseTodos(st.output);
+          if (parsed) return parsed;
+        }
+        if (st.status !== "pending") {
+          const input = st.input as Record<string, unknown> | undefined;
+          if (input) {
+            const parsed = parseTodos(input.todos ?? input);
+            if (parsed) return parsed;
+          }
+        }
+      }
+    }
+    return [];
+  }, [messages]);
+
+  const consumePrefill = useCallback(() => {
+    setPrefillText("");
+  }, []);
+
+  // SSE event handler for message-related events
+  const handleMessageEvent = useCallback((event: Event) => {
+    switch (event.type) {
+      case "message.updated":
+        setMessages((prev) => upsertMessage(prev, event.properties.info));
+        break;
+      case "message.part.updated":
+        setMessages((prev) => upsertPart(prev, event.properties.part));
+        break;
+      case "message.removed":
+        setMessages((prev) => removeMessage(prev, event.properties.messageID));
+        break;
+    }
+  }, []);
+
+  return {
+    messages,
+    setMessages,
+    prefillText,
+    setPrefillText,
+    inputTokens,
+    latestTodos,
+    consumePrefill,
+    handleMessageEvent,
+  } as const;
+}
diff --git a/webview/hooks/usePermissions.ts b/webview/hooks/usePermissions.ts
new file mode 100644
index 0000000..192844f
--- /dev/null
+++ b/webview/hooks/usePermissions.ts
@@ -0,0 +1,48 @@
+import type { Event, Permission } from "@opencode-ai/sdk";
+import { useCallback, useState } from "react";
+
+/**
+ * ツール実行時の許可リクエスト（Allow / Once / Deny）の状態管理フック。
+ *
+ * AI がツールを使おうとすると permission.updated で許可リクエストが届き、
+ * ユーザーが回答すると permission.replied で解消される。
+ * Map が空でなければ未回答のリクエストがあり、PermissionView が表示される。
+ */
+export function usePermissions() {
+  const [permissions, setPermissions] = useState<Map<string, Permission>>(new Map());
+
+  const addPermission = useCallback((permission: Permission) => {
+    setPermissions((prev) => {
+      const next = new Map(prev);
+      next.set(permission.id, permission);
+      return next;
+    });
+  }, []);
+
+  const removePermission = useCallback((permissionID: string) => {
+    setPermissions((prev) => {
+      const next = new Map(prev);
+      next.delete(permissionID);
+      return next;
+    });
+  }, []);
+
+  const handlePermissionEvent = useCallback(
+    (event: Event) => {
+      switch (event.type) {
+        case "permission.updated":
+          addPermission(event.properties);
+          break;
+        case "permission.replied":
+          removePermission(event.properties.permissionID);
+          break;
+      }
+    },
+    [addPermission, removePermission],
+  );
+
+  return {
+    permissions,
+    handlePermissionEvent,
+  } as const;
+}
diff --git a/webview/hooks/useProviders.ts b/webview/hooks/useProviders.ts
new file mode 100644
index 0000000..4f6ec3a
--- /dev/null
+++ b/webview/hooks/useProviders.ts
@@ -0,0 +1,35 @@
+import type { Provider } from "@opencode-ai/sdk";
+import { useCallback, useMemo, useState } from "react";
+import type { AllProvidersData } from "../vscode-api";
+import { postMessage } from "../vscode-api";
+
+export function useProviders() {
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [allProvidersData, setAllProvidersData] = useState<AllProvidersData | null>(null);
+  const [selectedModel, setSelectedModel] = useState<{ providerID: string; modelID: string } | null>(null);
+
+  // 選択中のモデルのコンテキストリミットを算出
+  const contextLimit = useMemo(() => {
+    if (!selectedModel) return 0;
+    const provider = providers.find((p) => p.id === selectedModel.providerID);
+    if (!provider) return 0;
+    const model = provider.models[selectedModel.modelID];
+    return model?.limit?.context ?? 0;
+  }, [providers, selectedModel]);
+
+  const handleModelSelect = useCallback((model: { providerID: string; modelID: string }) => {
+    setSelectedModel(model);
+    postMessage({ type: "setModel", model: `${model.providerID}/${model.modelID}` });
+  }, []);
+
+  return {
+    providers,
+    setProviders,
+    allProvidersData,
+    setAllProvidersData,
+    selectedModel,
+    setSelectedModel,
+    contextLimit,
+    handleModelSelect,
+  } as const;
+}
diff --git a/webview/hooks/useSession.ts b/webview/hooks/useSession.ts
new file mode 100644
index 0000000..da638a8
--- /dev/null
+++ b/webview/hooks/useSession.ts
@@ -0,0 +1,67 @@
+import type { Event, Session } from "@opencode-ai/sdk";
+import { useCallback, useState } from "react";
+import { postMessage } from "../vscode-api";
+
+export function useSession() {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [activeSession, setActiveSession] = useState<Session | null>(null);
+  const [sessionBusy, setSessionBusy] = useState(false);
+  const [showSessionList, setShowSessionList] = useState(false);
+
+  const handleNewSession = useCallback(() => {
+    postMessage({ type: "createSession" });
+    setShowSessionList(false);
+  }, []);
+
+  const handleSelectSession = useCallback((sessionId: string) => {
+    postMessage({ type: "selectSession", sessionId });
+    setShowSessionList(false);
+  }, []);
+
+  const handleDeleteSession = useCallback((sessionId: string) => {
+    postMessage({ type: "deleteSession", sessionId });
+  }, []);
+
+  const toggleSessionList = useCallback(() => {
+    setShowSessionList((s) => !s);
+  }, []);
+
+  // SSE event handler for session-related events
+  const handleSessionEvent = useCallback((event: Event) => {
+    switch (event.type) {
+      case "session.status": {
+        setSessionBusy(event.properties.status.type === "busy");
+        break;
+      }
+      case "session.updated": {
+        const info = event.properties.info;
+        setSessions((prev) => prev.map((s) => (s.id === info.id ? info : s)));
+        setActiveSession((prev) => (prev?.id === info.id ? info : prev));
+        break;
+      }
+      case "session.created": {
+        setSessions((prev) => [event.properties.info, ...prev]);
+        break;
+      }
+      case "session.deleted": {
+        const deletedId = event.properties.info.id;
+        setSessions((prev) => prev.filter((s) => s.id !== deletedId));
+        break;
+      }
+    }
+  }, []);
+
+  return {
+    sessions,
+    setSessions,
+    activeSession,
+    setActiveSession,
+    sessionBusy,
+    showSessionList,
+    toggleSessionList,
+    handleNewSession,
+    handleSelectSession,
+    handleDeleteSession,
+    handleSessionEvent,
+  } as const;
+}
diff --git a/webview/locales/en.ts b/webview/locales/en.ts
index 3b170f4..870db43 100644
--- a/webview/locales/en.ts
+++ b/webview/locales/en.ts
@@ -45,6 +45,12 @@ export const en = {
   "session.delete": "Delete",
   "session.select": "Select session",
 
+  // Time (relative)
+  "time.now": "now",
+  "time.minutes": (n: number) => `${n}m`,
+  "time.hours": (n: number) => `${n}h`,
+  "time.days": (n: number) => `${n}d`,
+
   // ToolPartView - category labels
   "tool.read": "Read",
   "tool.edit": "Edit",
diff --git a/webview/locales/ja.ts b/webview/locales/ja.ts
index f9268d9..a61d4b7 100644
--- a/webview/locales/ja.ts
+++ b/webview/locales/ja.ts
@@ -47,6 +47,12 @@ export const ja: typeof en = {
   "session.delete": "削除",
   "session.select": "セッションを選択",
 
+  // Time (relative)
+  "time.now": "今",
+  "time.minutes": (n: number) => `${n}分`,
+  "time.hours": (n: number) => `${n}時間`,
+  "time.days": (n: number) => `${n}日`,
+
   // ToolPartView - category labels
   "tool.read": "読み取り",
   "tool.edit": "編集",
diff --git a/webview/styles.css b/webview/styles.css
index 71bebee..a9ab91c 100644
--- a/webview/styles.css
+++ b/webview/styles.css
@@ -27,1769 +27,3 @@ body {
   flex-direction: column;
   height: 100%;
 }
-
-/* --- Header --- */
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--vscode-panel-border);
-  min-height: 28px;
-}
-
-.chat-header-title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--vscode-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-header-actions {
-  display: flex;
-  gap: 4px;
-}
-
-/* --- Messages area --- */
-
-.messages-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.messages-area::-webkit-scrollbar {
-  width: 6px;
-}
-
-.messages-area::-webkit-scrollbar-thumb {
-  background-color: var(--vscode-scrollbarSlider-background);
-  border-radius: 3px;
-}
-
-.messages-area::-webkit-scrollbar-thumb:hover {
-  background-color: var(--vscode-scrollbarSlider-hoverBackground);
-}
-
-/* --- Message --- */
-
-.message {
-  margin-bottom: 16px;
-}
-
-.message-assistant .message-content {
-  font-size: 13px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* --- User message: right-aligned bubble --- */
-
-.message-user {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.message-user-bubble {
-  max-width: 85%;
-  background-color: var(--vscode-input-background);
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 10px;
-  padding: 8px 12px;
-  cursor: pointer;
-  position: relative;
-}
-
-.message-user-bubble:hover {
-  border-color: var(--vscode-focusBorder);
-}
-
-.message-user-bubble:hover .message-edit-icon {
-  opacity: 1;
-}
-
-.message-edit-icon {
-  position: absolute;
-  top: 6px;
-  right: -24px;
-  opacity: 0;
-  color: var(--vscode-descriptionForeground);
-  transition: opacity 0.15s;
-}
-
-/* --- Message edit mode --- */
-
-.message-edit-container {
-  width: 100%;
-  max-width: 85%;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-self: flex-end;
-}
-
-.message-edit-textarea {
-  width: 100%;
-  padding: 8px 12px;
-  background-color: var(--vscode-input-background);
-  border: 1px solid var(--vscode-focusBorder);
-  border-radius: 10px;
-  color: var(--vscode-input-foreground);
-  font-family: var(--vscode-font-family);
-  font-size: 13px;
-  line-height: 1.5;
-  resize: none;
-  outline: none;
-  box-sizing: border-box;
-}
-
-.message-edit-actions {
-  display: flex;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.message-edit-cancel {
-  padding: 3px 10px;
-  background: none;
-  border: 1px solid var(--vscode-input-border);
-  border-radius: 4px;
-  color: var(--vscode-descriptionForeground);
-  font-family: var(--vscode-font-family);
-  font-size: 11px;
-  cursor: pointer;
-}
-
-.message-edit-cancel:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-  color: var(--vscode-foreground);
-}
-
-.message-edit-submit {
-  padding: 3px 10px;
-  background-color: var(--vscode-button-background);
-  border: none;
-  border-radius: 4px;
-  color: var(--vscode-button-foreground);
-  font-family: var(--vscode-font-family);
-  font-size: 11px;
-  cursor: pointer;
-}
-
-.message-edit-submit:hover:not(:disabled) {
-  background-color: var(--vscode-button-hoverBackground);
-}
-
-.message-edit-submit:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-/* --- Checkpoint divider --- */
-
-.checkpoint-divider {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-  margin: 2px 0;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.messages-area:hover .checkpoint-divider {
-  opacity: 0.6;
-}
-
-.checkpoint-divider:hover {
-  opacity: 1;
-}
-
-.checkpoint-line {
-  flex: 1;
-  height: 0;
-  border-top: 1px dashed var(--vscode-panel-border);
-}
-
-.checkpoint-divider:hover .checkpoint-line {
-  border-color: var(--vscode-focusBorder);
-}
-
-.checkpoint-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  background: none;
-  border: none;
-  color: var(--vscode-descriptionForeground);
-  font-family: var(--vscode-font-family);
-  font-size: 10px;
-  cursor: pointer;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-
-.checkpoint-divider:hover .checkpoint-button {
-  color: var(--vscode-foreground);
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.message-user-bubble .message-content {
-  font-size: 13px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-.message-user-files {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 4px;
-  justify-content: flex-end;
-}
-
-.message-user-file-chip {
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: 11px;
-  background: transparent;
-  color: var(--vscode-descriptionForeground);
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-}
-
-/* --- Markdown in messages --- */
-
-.message-content code {
-  font-family: var(--vscode-editor-font-family);
-  font-size: var(--vscode-editor-font-size);
-  background-color: var(--vscode-textCodeBlock-background);
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-.message-content pre {
-  background-color: var(--vscode-textCodeBlock-background);
-  padding: 8px 12px;
-  border-radius: 4px;
-  overflow-x: auto;
-  margin: 8px 0;
-}
-
-.message-content pre code {
-  padding: 0;
-  background: none;
-}
-
-.message-content ul,
-.message-content ol {
-  padding-left: 1.5em;
-  margin: 2px 0;
-}
-
-.message-content li {
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-}
-
-.message-content li + li {
-  margin-top: 1px;
-}
-
-.message-content li > p {
-  margin: 0;
-}
-
-.message-content p {
-  margin: 4px 0;
-}
-
-/* --- Tool part (collapsible) --- */
-
-.tool-part {
-  margin: 2px 0;
-  border-radius: 6px;
-}
-
-.tool-part-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 8px;
-  cursor: pointer;
-  font-size: 12px;
-  border-radius: 6px;
-  user-select: none;
-}
-
-.tool-part-header:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.tool-part-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.tool-part.completed .tool-part-icon {
-  color: var(--vscode-descriptionForeground);
-}
-
-.tool-part.running .tool-part-icon,
-.tool-part.pending .tool-part-icon {
-  color: var(--vscode-progressBar-background);
-}
-
-.tool-part.error .tool-part-icon {
-  color: var(--vscode-errorForeground);
-}
-
-.tool-part-spinner {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* アクション種別ラベル（Read, Edit, Create, Run, Search） */
-.tool-part-action {
-  font-size: 11px;
-  font-weight: 600;
-  flex-shrink: 0;
-  padding: 0 5px;
-  border-radius: 3px;
-}
-
-.tool-part-action-read {
-  color: var(--vscode-textLink-foreground);
-  background-color: color-mix(in srgb, var(--vscode-textLink-foreground) 12%, transparent);
-}
-
-.tool-part-action-edit {
-  color: var(--vscode-editorWarning-foreground, #ff9800);
-  background-color: color-mix(in srgb, var(--vscode-editorWarning-foreground, #ff9800) 12%, transparent);
-}
-
-.tool-part-action-write {
-  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
-  background-color: color-mix(in srgb, var(--vscode-gitDecoration-addedResourceForeground, #2ea043) 12%, transparent);
-}
-
-.tool-part-action-run {
-  color: var(--vscode-terminal-ansiMagenta, #bc3fbc);
-  background-color: color-mix(in srgb, var(--vscode-terminal-ansiMagenta, #bc3fbc) 12%, transparent);
-}
-
-.tool-part-action-search {
-  color: var(--vscode-terminal-ansiCyan, #11a8cd);
-  background-color: color-mix(in srgb, var(--vscode-terminal-ansiCyan, #11a8cd) 12%, transparent);
-}
-
-.tool-part-action-other {
-  color: var(--vscode-descriptionForeground);
-  background-color: color-mix(in srgb, var(--vscode-descriptionForeground) 12%, transparent);
-}
-
-/* タイトル（ファイルパスやコマンド説明） */
-.tool-part-title {
-  flex: 1;
-  color: var(--vscode-descriptionForeground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--vscode-editor-font-family, monospace);
-  font-size: 11px;
-}
-
-.tool-part.error .tool-part-title {
-  color: var(--vscode-errorForeground);
-}
-
-.tool-part-chevron {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--vscode-descriptionForeground);
-  transition: transform 0.15s;
-}
-
-.tool-part-chevron.expanded {
-  transform: rotate(90deg);
-}
-
-.tool-part-body {
-  padding: 0 8px 6px 30px;
-}
-
-.tool-part-output {
-  margin: 0;
-  padding: 6px 8px;
-  font-size: 11px;
-  font-family: var(--vscode-editor-font-family, monospace);
-  background-color: var(--vscode-editor-background);
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  max-height: 200px;
-  overflow-y: auto;
-  color: var(--vscode-descriptionForeground);
-}
-
-.tool-part-error {
-  color: var(--vscode-errorForeground);
-}
-
-/* --- Tool part: inline diff view --- */
-
-.tool-diff {
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-  overflow: hidden;
-  font-size: 11px;
-  font-family: var(--vscode-editor-font-family, monospace);
-}
-
-.tool-diff-stats {
-  display: flex;
-  gap: 8px;
-  padding: 3px 8px;
-  font-size: 11px;
-  background-color: var(--vscode-editor-background);
-  border-bottom: 1px solid var(--vscode-panel-border);
-}
-
-.tool-diff-stat-add {
-  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
-}
-
-.tool-diff-stat-remove {
-  color: var(--vscode-gitDecoration-deletedResourceForeground, #f85149);
-}
-
-.tool-diff-lines {
-  max-height: 300px;
-  overflow-y: auto;
-  background-color: var(--vscode-editor-background);
-}
-
-.tool-diff-line {
-  display: flex;
-  line-height: 1.45;
-  min-height: 18px;
-}
-
-.tool-diff-line-marker {
-  width: 20px;
-  flex-shrink: 0;
-  text-align: center;
-  user-select: none;
-  color: var(--vscode-descriptionForeground);
-}
-
-.tool-diff-line-text {
-  flex: 1;
-  white-space: pre-wrap;
-  word-break: break-all;
-  padding-right: 8px;
-}
-
-.tool-diff-line-remove {
-  background-color: color-mix(in srgb, var(--vscode-gitDecoration-deletedResourceForeground, #f85149) 15%, transparent);
-}
-
-.tool-diff-line-remove .tool-diff-line-marker {
-  color: var(--vscode-gitDecoration-deletedResourceForeground, #f85149);
-}
-
-.tool-diff-line-remove .tool-diff-line-text {
-  color: var(--vscode-gitDecoration-deletedResourceForeground, #f85149);
-}
-
-.tool-diff-line-add {
-  background-color: color-mix(in srgb, var(--vscode-gitDecoration-addedResourceForeground, #2ea043) 15%, transparent);
-}
-
-.tool-diff-line-add .tool-diff-line-marker {
-  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
-}
-
-.tool-diff-line-add .tool-diff-line-text {
-  color: var(--vscode-gitDecoration-addedResourceForeground, #2ea043);
-}
-
-.tool-diff-line-context {
-  background-color: transparent;
-}
-
-.tool-diff-line-context .tool-diff-line-text {
-  color: var(--vscode-descriptionForeground);
-}
-
-/* --- ToDo view --- */
-
-.tool-todo {
-  padding: 8px 12px;
-}
-
-.tool-todo-summary {
-  font-size: 11px;
-  color: var(--vscode-descriptionForeground);
-  margin-bottom: 6px;
-}
-
-.tool-todo-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.tool-todo-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 3px 0;
-  font-size: 12px;
-  color: var(--vscode-foreground);
-  line-height: 1.4;
-}
-
-.tool-todo-item.done {
-  opacity: 0.65;
-}
-
-.tool-todo-item.done .tool-todo-content {
-  text-decoration: line-through;
-}
-
-.tool-todo-check {
-  flex-shrink: 0;
-  width: 16px;
-  text-align: center;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.tool-todo-item.done .tool-todo-check {
-  color: var(--vscode-testing-iconPassed, #73c991);
-}
-
-.tool-todo-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.tool-todo-priority {
-  flex-shrink: 0;
-  font-size: 10px;
-  padding: 0 4px;
-  border-radius: 3px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.tool-todo-priority.high {
-  color: var(--vscode-editorError-foreground, #f44747);
-  background-color: color-mix(in srgb, var(--vscode-editorError-foreground, #f44747) 12%, transparent);
-}
-
-.tool-todo-priority.low {
-  color: var(--vscode-descriptionForeground);
-  background-color: color-mix(in srgb, var(--vscode-descriptionForeground) 12%, transparent);
-}
-
-/* --- Reasoning part (Thinking) --- */
-
-.reasoning-part {
-  margin: 4px 0;
-  border-radius: 6px;
-}
-
-.reasoning-part-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  cursor: pointer;
-  font-size: 12px;
-  border-radius: 6px;
-  user-select: none;
-}
-
-.reasoning-part-header:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.reasoning-part-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--vscode-descriptionForeground);
-}
-
-.reasoning-part.active .reasoning-part-icon {
-  color: var(--vscode-progressBar-background);
-}
-
-.reasoning-part-label {
-  flex: 1;
-  color: var(--vscode-descriptionForeground);
-  font-style: italic;
-}
-
-.reasoning-part.active .reasoning-part-label {
-  color: var(--vscode-foreground);
-}
-
-.reasoning-part-body {
-  padding: 4px 8px 6px 30px;
-  font-size: 12px;
-  color: var(--vscode-descriptionForeground);
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* --- Permission --- */
-
-.permission-request {
-  margin: 8px 0;
-  padding: 10px;
-  border: 1px solid var(--vscode-inputValidation-warningBorder);
-  border-radius: 4px;
-  background-color: var(--vscode-inputValidation-warningBackground);
-}
-
-.permission-title {
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.permission-actions {
-  display: flex;
-  gap: 6px;
-}
-
-/* --- Buttons --- */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-family: var(--vscode-font-family);
-  border: none;
-  border-radius: 2px;
-  cursor: pointer;
-  color: var(--vscode-button-foreground);
-  background-color: var(--vscode-button-background);
-}
-
-.btn:hover {
-  background-color: var(--vscode-button-hoverBackground);
-}
-
-.btn-secondary {
-  color: var(--vscode-button-secondaryForeground);
-  background-color: var(--vscode-button-secondaryBackground);
-}
-
-.btn-secondary:hover {
-  background-color: var(--vscode-button-secondaryHoverBackground);
-}
-
-.btn-icon {
-  padding: 4px;
-  background: none;
-  border: none;
-  color: var(--vscode-icon-foreground);
-  cursor: pointer;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-icon:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-/* --- ToDo header (above input area) --- */
-
-.todo-header {
-  border-top: 1px solid var(--vscode-panel-border);
-  background-color: var(--vscode-sideBar-background);
-}
-
-.todo-header-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 12px;
-}
-
-.todo-header-bar:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.todo-header-icon {
-  flex-shrink: 0;
-  color: var(--vscode-textLink-foreground);
-}
-
-.todo-header-label {
-  font-weight: 600;
-  font-size: 11px;
-  color: var(--vscode-foreground);
-}
-
-.todo-header-count {
-  font-size: 11px;
-  color: var(--vscode-descriptionForeground);
-  font-family: var(--vscode-editor-font-family, monospace);
-}
-
-.todo-header-progress {
-  flex: 1;
-  height: 3px;
-  background-color: var(--vscode-input-border);
-  border-radius: 2px;
-  overflow: hidden;
-  max-width: 80px;
-}
-
-.todo-header-progress-fill {
-  display: block;
-  height: 100%;
-  background-color: var(--vscode-testing-iconPassed, #73c991);
-  border-radius: 2px;
-  transition: width 0.3s ease;
-}
-
-.todo-header-chevron {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--vscode-descriptionForeground);
-  transition: transform 0.15s;
-}
-
-.todo-header-chevron.expanded {
-  transform: rotate(90deg);
-}
-
-.todo-header-list {
-  list-style: none;
-  margin: 0;
-  padding: 0 12px 8px 12px;
-}
-
-.todo-header-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 2px 0;
-  font-size: 12px;
-  color: var(--vscode-foreground);
-  line-height: 1.4;
-}
-
-.todo-header-item.done {
-  opacity: 0.6;
-}
-
-.todo-header-item.done .todo-header-item-content {
-  text-decoration: line-through;
-}
-
-.todo-header-item-check {
-  flex-shrink: 0;
-  width: 16px;
-  text-align: center;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.todo-header-item.done .todo-header-item-check {
-  color: var(--vscode-testing-iconPassed, #73c991);
-}
-
-.todo-header-item-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.todo-header-item-priority {
-  flex-shrink: 0;
-  font-size: 10px;
-  padding: 0 4px;
-  border-radius: 3px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.todo-header-item-priority.high {
-  color: var(--vscode-editorError-foreground, #f44747);
-  background-color: color-mix(in srgb, var(--vscode-editorError-foreground, #f44747) 12%, transparent);
-}
-
-.todo-header-item-priority.low {
-  color: var(--vscode-descriptionForeground);
-  background-color: color-mix(in srgb, var(--vscode-descriptionForeground) 12%, transparent);
-}
-
-/* --- Input area --- */
-
-.input-area {
-  border-top: 1px solid var(--vscode-panel-border);
-  padding: 8px 12px;
-}
-
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--vscode-input-background);
-  border: 1px solid var(--vscode-input-border);
-  border-radius: 4px;
-  padding: 4px 8px;
-}
-
-.input-wrapper:focus-within {
-  border-color: var(--vscode-focusBorder);
-}
-
-.input-textarea {
-  flex: 1;
-  width: 100%;
-  background: none;
-  border: none;
-  outline: none;
-  color: var(--vscode-input-foreground);
-  font-family: var(--vscode-font-family);
-  font-size: 13px;
-  line-height: 1.4;
-  resize: none;
-  max-height: 120px;
-  min-height: 20px;
-}
-
-.input-textarea::placeholder {
-  color: var(--vscode-input-placeholderForeground);
-}
-
-.send-button {
-  padding: 4px;
-  background: none;
-  border: none;
-  color: var(--vscode-icon-foreground);
-  cursor: pointer;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.send-button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.send-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-/* --- Empty state --- */
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 24px;
-  color: var(--vscode-descriptionForeground);
-  text-align: center;
-}
-
-.empty-state-title {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: var(--vscode-foreground);
-}
-
-.empty-state-description {
-  font-size: 12px;
-  margin-bottom: 16px;
-}
-
-/* --- Streaming indicator --- */
-
-.streaming-indicator {
-  display: inline-flex;
-  gap: 3px;
-  align-items: center;
-  margin-left: 4px;
-}
-
-.streaming-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: var(--vscode-progressBar-background);
-  animation: streaming-pulse 1.4s infinite ease-in-out both;
-}
-
-.streaming-dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.streaming-dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-@keyframes streaming-pulse {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.6);
-    opacity: 0.4;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* --- Session list --- */
-
-.session-list {
-  position: absolute;
-  top: 36px;
-  left: 0;
-  right: 0;
-  background-color: var(--vscode-quickInput-background);
-  border: 1px solid var(--vscode-panel-border);
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 10;
-  padding: 2px 0;
-}
-
-.session-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  padding: 4px 8px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.session-item:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.session-item.active {
-  background-color: var(--vscode-list-activeSelectionBackground);
-  color: var(--vscode-list-activeSelectionForeground);
-}
-
-.session-item-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  flex: 1;
-}
-
-.session-item-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  min-width: 0;
-}
-
-.session-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  font-size: 11px;
-  color: var(--vscode-descriptionForeground);
-}
-
-.session-item.active .session-item-meta {
-  color: var(--vscode-list-activeSelectionForeground);
-  opacity: 0.7;
-}
-
-.session-item-time {
-  white-space: nowrap;
-}
-
-.session-item-stats {
-  display: flex;
-  gap: 3px;
-  white-space: nowrap;
-  font-family: var(--vscode-editor-font-family, monospace);
-  font-size: 10px;
-}
-
-.session-item-files {
-  display: inline-flex;
-  align-items: center;
-  gap: 1px;
-  color: var(--vscode-descriptionForeground);
-}
-
-.session-item-additions {
-  color: var(--vscode-gitDecoration-addedResourceForeground, #4caf50);
-}
-
-.session-item-deletions {
-  color: var(--vscode-gitDecoration-deletedResourceForeground, #f44336);
-}
-
-.session-item.active .session-item-files,
-.session-item.active .session-item-additions,
-.session-item.active .session-item-deletions {
-  color: inherit;
-}
-
-.session-item-delete {
-  opacity: 0;
-  transition: opacity 0.15s;
-  flex-shrink: 0;
-}
-
-.session-item:hover .session-item-delete {
-  opacity: 1;
-}
-
-/* --- Input actions row --- */
-
-.input-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding-top: 4px;
-  position: relative;
-}
-
-.input-actions-left {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  position: relative;
-}
-
-/* --- Model selector --- */
-
-.model-selector {
-  position: relative;
-}
-
-.model-selector-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
-  background: none;
-  border: none;
-  color: var(--vscode-descriptionForeground);
-  font-family: var(--vscode-font-family);
-  font-size: 11px;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.model-selector-button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-  color: var(--vscode-foreground);
-}
-
-.model-selector-label {
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-panel {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  min-width: 280px;
-  max-height: 400px;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
-  border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  z-index: 100;
-  overflow: hidden;
-}
-
-.model-panel-body {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
-  padding: 4px 0;
-}
-
-.model-panel-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.model-panel-body::-webkit-scrollbar-thumb {
-  background-color: var(--vscode-scrollbarSlider-background);
-  border-radius: 3px;
-}
-
-.model-panel-section {
-  /* wrapper for provider group */
-}
-
-.model-panel-section-title {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px 4px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--vscode-descriptionForeground);
-  text-transform: uppercase;
-  cursor: pointer;
-  user-select: none;
-}
-
-.model-panel-section-title:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.model-panel-section-title.disconnected {
-  opacity: 0.6;
-}
-
-/* --- Shared chevron icon --- */
-
-.chevron-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  flex-shrink: 0;
-  transition: transform 0.15s ease;
-}
-
-.chevron-icon.expanded {
-  transform: rotate(90deg);
-}
-
-.model-panel-section-name {
-  flex: 1;
-}
-
-.model-panel-section-badge {
-  font-size: 10px;
-  font-weight: 400;
-  text-transform: none;
-  color: var(--vscode-editorWarning-foreground, #ff9800);
-  flex-shrink: 0;
-}
-
-.model-panel-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--vscode-foreground);
-}
-
-.model-panel-item:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.model-panel-item.active {
-  color: var(--vscode-textLink-foreground);
-}
-
-.model-panel-item.disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.model-panel-item.disabled:hover {
-  background-color: transparent;
-}
-
-.model-panel-item-check {
-  width: 14px;
-  font-size: 12px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.model-panel-item-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.model-panel-item-badge {
-  font-size: 9px;
-  padding: 0 4px;
-  border-radius: 3px;
-  text-transform: uppercase;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.model-panel-item-badge.beta {
-  color: var(--vscode-editorInfo-foreground, #3794ff);
-  background-color: color-mix(in srgb, var(--vscode-editorInfo-foreground, #3794ff) 15%, transparent);
-}
-
-.model-panel-item-badge.alpha {
-  color: var(--vscode-editorWarning-foreground, #ff9800);
-  background-color: color-mix(in srgb, var(--vscode-editorWarning-foreground, #ff9800) 15%, transparent);
-}
-
-.model-panel-item-badge.deprecated {
-  color: var(--vscode-errorForeground);
-  background-color: color-mix(in srgb, var(--vscode-errorForeground) 15%, transparent);
-}
-
-.model-panel-item-meta {
-  display: flex;
-  gap: 6px;
-  font-size: 10px;
-  color: var(--vscode-descriptionForeground);
-  flex-shrink: 0;
-}
-
-.model-panel-item-context {
-  font-family: var(--vscode-editor-font-family, monospace);
-}
-
-.model-panel-footer {
-  display: flex;
-  gap: 4px;
-  padding: 6px 12px;
-  border-top: 1px solid var(--vscode-panel-border);
-  flex-shrink: 0;
-}
-
-.model-panel-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  color: var(--vscode-textLink-foreground);
-  font-size: 11px;
-  cursor: pointer;
-  padding: 2px 4px;
-  border-radius: 3px;
-  user-select: none;
-}
-
-.model-panel-link:hover {
-  color: var(--vscode-textLink-activeForeground);
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-/* --- Context bar --- */
-
-.context-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 4px;
-}
-
-.context-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.context-clip-container {
-  position: relative;
-}
-
-.context-clip-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 4px;
-  background: none;
-  border: 1px solid var(--vscode-input-border);
-  color: var(--vscode-descriptionForeground);
-  cursor: pointer;
-  border-radius: 4px;
-  line-height: 1;
-}
-
-.context-clip-button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-  color: var(--vscode-foreground);
-  border-color: var(--vscode-foreground);
-}
-
-.context-file-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  background: none;
-  border: 1px dashed var(--vscode-input-border);
-  color: var(--vscode-descriptionForeground);
-  font-family: var(--vscode-font-family);
-  font-size: 11px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.context-file-button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-  color: var(--vscode-foreground);
-  border-color: var(--vscode-foreground);
-}
-
-/* --- File picker dropdown --- */
-
-.file-picker-dropdown {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  min-width: 280px;
-  max-width: 400px;
-  max-height: 300px;
-  background-color: var(--vscode-quickInput-background);
-  border: 1px solid var(--vscode-dropdown-border);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-}
-
-.file-picker-search {
-  width: 100%;
-  padding: 6px 10px;
-  background-color: var(--vscode-input-background);
-  border: none;
-  border-bottom: 1px solid var(--vscode-panel-border);
-  color: var(--vscode-input-foreground);
-  font-family: var(--vscode-font-family);
-  font-size: 12px;
-  outline: none;
-}
-
-.file-picker-search::placeholder {
-  color: var(--vscode-input-placeholderForeground);
-}
-
-.file-picker-list {
-  overflow-y: auto;
-  max-height: 250px;
-}
-
-.file-picker-item {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 10px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.file-picker-item:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.file-picker-item-name {
-  color: var(--vscode-foreground);
-}
-
-.file-picker-item-path {
-  font-size: 10px;
-  color: var(--vscode-descriptionForeground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-picker-empty {
-  padding: 8px 10px;
-  font-size: 12px;
-  color: var(--vscode-descriptionForeground);
-}
-
-/* --- Attached file chips --- */
-
-.attached-files {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding-bottom: 4px;
-}
-
-.attached-file-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  background-color: var(--vscode-input-background);
-  color: var(--vscode-foreground);
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-  font-size: 11px;
-}
-
-.attached-file-name {
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.attached-file-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--vscode-badge-foreground);
-  cursor: pointer;
-  border-radius: 2px;
-  opacity: 0.7;
-}
-
-.attached-file-remove:hover {
-  opacity: 1;
-}
-
-/* --- Textarea container with # popup --- */
-
-.textarea-container {
-  position: relative;
-}
-
-.hash-popup {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  min-width: 240px;
-  max-width: 360px;
-  max-height: 200px;
-  overflow-y: auto;
-  background-color: var(--vscode-quickInput-background);
-  border: 1px solid var(--vscode-dropdown-border);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-}
-
-.hash-popup-item {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 10px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.hash-popup-item:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.hash-popup-item-name {
-  color: var(--vscode-foreground);
-}
-
-.hash-popup-item-path {
-  font-size: 10px;
-  color: var(--vscode-descriptionForeground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hash-popup-empty {
-  padding: 8px 10px;
-  font-size: 12px;
-  color: var(--vscode-descriptionForeground);
-}
-
-/* --- Context indicator --- */
-
-.context-indicator-container {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.context-indicator-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  color: var(--vscode-descriptionForeground);
-  cursor: pointer;
-  padding: 2px;
-  border-radius: 4px;
-  line-height: 1;
-}
-
-.context-indicator-button:hover {
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.context-indicator-popup {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 6px;
-  min-width: 220px;
-  padding: 10px 12px;
-  background-color: var(--vscode-quickInput-background);
-  border: 1px solid var(--vscode-dropdown-border);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-  z-index: 100;
-}
-
-.context-indicator-popup-title {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--vscode-foreground);
-  margin-bottom: 8px;
-}
-
-.context-indicator-popup-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-  color: var(--vscode-descriptionForeground);
-  margin-bottom: 4px;
-}
-
-.context-indicator-popup-bar {
-  height: 4px;
-  background-color: var(--vscode-input-border);
-  border-radius: 2px;
-  margin: 8px 0;
-  overflow: hidden;
-}
-
-.context-indicator-popup-bar-fill {
-  height: 100%;
-  background-color: var(--vscode-progressBar-background);
-  border-radius: 2px;
-  transition: width 0.3s ease;
-}
-
-.context-indicator-compress-button {
-  width: 100%;
-  padding: 5px 10px;
-  margin-top: 4px;
-  background-color: var(--vscode-button-secondaryBackground);
-  color: var(--vscode-button-secondaryForeground);
-  border: none;
-  border-radius: 4px;
-  font-family: var(--vscode-font-family);
-  font-size: 11px;
-  cursor: pointer;
-}
-
-.context-indicator-compress-button:hover:not(:disabled) {
-  background-color: var(--vscode-button-secondaryHoverBackground);
-}
-
-.context-indicator-compress-button:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-/* --- Tool Config Button & Panel --- */
-
-.tool-config-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  color: var(--vscode-descriptionForeground);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-}
-
-.tool-config-button:hover {
-  color: var(--vscode-foreground);
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.tool-config-panel {
-  position: absolute;
-  bottom: calc(100% + 4px);
-  left: 0;
-  width: 300px;
-  max-height: 400px;
-  background-color: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
-  border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.tool-config-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--vscode-panel-border);
-  flex-shrink: 0;
-}
-
-.tool-config-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--vscode-foreground);
-}
-
-.tool-config-close {
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  color: var(--vscode-descriptionForeground);
-  cursor: pointer;
-  padding: 2px;
-  border-radius: 4px;
-}
-
-.tool-config-close:hover {
-  color: var(--vscode-foreground);
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.tool-config-body {
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.tool-config-section {
-  padding: 4px 0;
-}
-
-.tool-config-section-title {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--vscode-descriptionForeground);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding: 4px 12px;
-}
-
-.tool-config-toggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 12px;
-  cursor: pointer;
-  font-size: 12px;
-  user-select: none;
-}
-
-.tool-config-toggle:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.tool-config-toggle input[type="radio"] {
-  flex-shrink: 0;
-  accent-color: var(--vscode-checkbox-background);
-}
-
-.tool-config-tool-item {
-  padding: 3px 12px;
-}
-
-.tool-config-tool-name {
-  flex: 1;
-  color: var(--vscode-foreground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-}
-
-.tool-config-footer {
-  display: flex;
-  gap: 4px;
-  padding: 6px 12px;
-  border-top: 1px solid var(--vscode-panel-border);
-  flex-shrink: 0;
-}
-
-.tool-config-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  color: var(--vscode-textLink-foreground);
-  font-size: 11px;
-  cursor: pointer;
-  padding: 2px 4px;
-  border-radius: 3px;
-}
-
-.tool-config-link:hover {
-  color: var(--vscode-textLink-activeForeground);
-  background-color: var(--vscode-toolbar-hoverBackground);
-}
diff --git a/webview/utils/diff.ts b/webview/utils/diff.ts
new file mode 100644
index 0000000..6208c97
--- /dev/null
+++ b/webview/utils/diff.ts
@@ -0,0 +1,62 @@
+export type DiffLine = { type: "context" | "add" | "remove"; text: string };
+
+export function computeLineDiff(oldStr: string, newStr: string): DiffLine[] {
+  const oldLines = oldStr.split("\n");
+  const newLines = newStr.split("\n");
+  const result: DiffLine[] = [];
+
+  const n = oldLines.length;
+  const m = newLines.length;
+  if (n > 500 || m > 500) {
+    for (const line of oldLines) result.push({ type: "remove", text: line });
+    for (const line of newLines) result.push({ type: "add", text: line });
+    return result;
+  }
+
+  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i = 1; i <= n; i++) {
+    for (let j = 1; j <= m; j++) {
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  const raw: DiffLine[] = [];
+  let i = n,
+    j = m;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      raw.push({ type: "context", text: oldLines[i - 1] });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      raw.push({ type: "add", text: newLines[j - 1] });
+      j--;
+    } else {
+      raw.push({ type: "remove", text: oldLines[i - 1] });
+      i--;
+    }
+  }
+  raw.reverse();
+
+  const hasChange = (idx: number) => raw[idx]?.type !== "context";
+  for (let k = 0; k < raw.length; k++) {
+    if (raw[k].type !== "context") {
+      result.push(raw[k]);
+    } else {
+      let nearChange = false;
+      for (let d = -2; d <= 2; d++) {
+        if (hasChange(k + d)) {
+          nearChange = true;
+          break;
+        }
+      }
+      if (nearChange) result.push(raw[k]);
+    }
+  }
+
+  return result;
+}
diff --git a/webview/utils/todo.ts b/webview/utils/todo.ts
new file mode 100644
index 0000000..7ad4f0a
--- /dev/null
+++ b/webview/utils/todo.ts
@@ -0,0 +1,13 @@
+export type TodoItem = { content: string; status?: string; priority?: string };
+
+export function parseTodos(raw: unknown): TodoItem[] | null {
+  try {
+    const data = typeof raw === "string" ? JSON.parse(raw) : raw;
+    const arr = Array.isArray(data) ? data : (data?.todos ?? data?.items ?? null);
+    if (!Array.isArray(arr) || arr.length === 0) return null;
+    if (!arr.every((item: unknown) => typeof item === "object" && item !== null && "content" in item)) return null;
+    return arr as TodoItem[];
+  } catch {
+    return null;
+  }
+}
diff --git a/webview/utils/tool-categories.ts b/webview/utils/tool-categories.ts
new file mode 100644
index 0000000..6d6eb7d
--- /dev/null
+++ b/webview/utils/tool-categories.ts
@@ -0,0 +1,47 @@
+export type ToolCategory = "read" | "edit" | "write" | "run" | "search" | "other";
+
+export const TOOL_CATEGORIES: Record<string, ToolCategory> = {
+  read: "read",
+  edit: "edit",
+  multiedit: "edit",
+  write: "write",
+  apply_patch: "edit",
+  bash: "run",
+  glob: "search",
+  grep: "search",
+  list: "search",
+  codesearch: "search",
+  websearch: "search",
+  webfetch: "read",
+  lsp: "read",
+  todowrite: "write",
+  todoread: "read",
+  task: "run",
+  batch: "run",
+  question: "other",
+  skill: "run",
+  plan_enter: "other",
+  plan_exit: "other",
+};
+
+export const CATEGORY_LABEL_KEYS: Record<
+  ToolCategory,
+  "tool.read" | "tool.edit" | "tool.create" | "tool.run" | "tool.search" | "tool.tool"
+> = {
+  read: "tool.read",
+  edit: "tool.edit",
+  write: "tool.create",
+  run: "tool.run",
+  search: "tool.search",
+  other: "tool.tool",
+};
+
+export function getCategory(toolName: string): ToolCategory {
+  // exact match
+  if (TOOL_CATEGORIES[toolName]) return TOOL_CATEGORIES[toolName];
+  // MCP tools etc: strip prefix and re-check
+  const parts = toolName.split(/[_/]/);
+  const last = parts[parts.length - 1];
+  if (TOOL_CATEGORIES[last]) return TOOL_CATEGORIES[last];
+  return "other";
+}