feat: init sproutclaw-web — Go+Gin backend + React frontend

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-13 20:16:09 +08:00
commit c33b143176
109 changed files with 18773 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist/
+dist-desketop/
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#f7f8fb" />
+    <meta name="description" content="树萌芽智能 AI 助手 Web 客户端" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="萌小芽" />
+    <title>萌小芽</title>
+    <link rel="icon" href="/logo.png" type="image/png" sizes="any" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "sproutclaw-webui-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "generate-icons": "node scripts/generate-icons.mjs",
+    "dev": "vite",
+    "build": "npm run generate-icons && tsc -b && vite build && vite build --mode desktop",
+    "build:web": "npm run generate-icons && tsc -b && vite build",
+    "build:desktop": "npm run generate-icons && tsc -b && vite build --mode desktop",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "highlight.js": "11.11.1",
+    "marked": "15.0.12",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-router-dom": "7.15.1"
+  },
+  "devDependencies": {
+    "@mogeko/maple-mono-cn": "7.9.0",
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "4.7.0",
+    "sharp": "0.34.5",
+    "typescript": "5.9.3",
+    "vite": "6.4.2",
+    "vite-plugin-pwa": "1.3.0"
+  }
+}
--- a/frontend/public/logo.png
+++ b/frontend/public/logo.png
--- a/frontend/public/logo192.png
+++ b/frontend/public/logo192.png
--- a/frontend/public/logo512.png
+++ b/frontend/public/logo512.png
--- a/frontend/scripts/generate-icons.mjs
+++ b/frontend/scripts/generate-icons.mjs
@@ -0,0 +1,22 @@
+import { existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import sharp from "sharp";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, "..", "public");
+const source = join(publicDir, "logo.png");
+
+if (!existsSync(source)) {
+	console.warn("[generate-icons] logo.png not found, skipping");
+	process.exit(0);
+}
+
+for (const size of [192, 512]) {
+	const out = join(publicDir, `logo${size}.png`);
+	await sharp(source)
+		.resize(size, size, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } })
+		.png()
+		.toFile(out);
+	console.log(`[generate-icons] wrote ${out}`);
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,28 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { PwaUpdatePrompt } from "./components/pwa/PwaUpdatePrompt";
+import { ChatLayout } from "./components/layout/ChatLayout";
+import { AvatarProvider } from "./context/AvatarContext";
+import { BootstrapProvider } from "./context/BootstrapContext";
+import { ChatProvider } from "./context/ChatContext";
+import { ChatPage } from "./routes/ChatPage";
+import { SettingsPage } from "./routes/SettingsPage";
+
+export function App() {
+	return (
+		<BrowserRouter>
+			<BootstrapProvider>
+				<AvatarProvider>
+					<ChatProvider>
+						<Routes>
+							<Route path="/" element={<ChatLayout />}>
+								<Route index element={<ChatPage />} />
+							</Route>
+							<Route path="/settings" element={<SettingsPage />} />
+						</Routes>
+						<PwaUpdatePrompt />
+					</ChatProvider>
+				</AvatarProvider>
+			</BootstrapProvider>
+		</BrowserRouter>
+	);
+}
--- a/frontend/src/api/base.ts
+++ b/frontend/src/api/base.ts
@@ -0,0 +1,13 @@
+const API_BASE = (import.meta.env.VITE_API_BASE ?? "").trim().replace(/\/$/, "");
+
+/** Resolve an API path. Empty base keeps same-origin relative paths for web `dist/`. */
+export function apiUrl(path: string): string {
+	if (!path.startsWith("/")) {
+		throw new Error(`API path must start with /: ${path}`);
+	}
+	return API_BASE ? `${API_BASE}${path}` : path;
+}
+
+export function getApiBase(): string {
+	return API_BASE;
+}
--- a/frontend/src/api/chat.ts
+++ b/frontend/src/api/chat.ts
@@ -0,0 +1,71 @@
+import { apiGet, apiPost } from "./client";
+import type { ImageContent, ModelInfo, SessionState } from "../types/message";
+import type { BashResult } from "../utils/bash";
+import type { NewSessionResponse } from "../types/session";
+
+export interface ChatResponse {
+	ok?: boolean;
+	accepted?: boolean;
+	slash?: boolean;
+	message?: string;
+	action?: "new_session" | "reload_messages" | "reload_sessions" | "copy";
+	sessionFile?: string;
+	error?: string;
+}
+
+export type SendMode = "prompt" | "steer" | "follow_up";
+
+export function sendChat(
+	message: string,
+	images?: ImageContent[],
+	options?: { streamingBehavior?: "steer" | "followUp" },
+): Promise<ChatResponse> {
+	return apiPost("/api/chat", { message, images, streamingBehavior: options?.streamingBehavior });
+}
+
+export function sendSteer(message: string, images?: ImageContent[]): Promise<{ ok: boolean }> {
+	return apiPost("/api/steer", { message, images });
+}
+
+export function sendFollowUp(message: string, images?: ImageContent[]): Promise<{ ok: boolean }> {
+	return apiPost("/api/follow-up", { message, images });
+}
+
+export function runBash(command: string, options?: { excludeFromContext?: boolean }): Promise<BashResult> {
+	return apiPost("/api/bash", { command, excludeFromContext: options?.excludeFromContext });
+}
+
+export function abortChat(): Promise<{ ok: boolean }> {
+	return apiPost("/api/abort");
+}
+
+export function abortRetry(): Promise<{ ok: boolean }> {
+	return apiPost("/api/abort-retry");
+}
+
+export function sendExtensionUiResponse(
+	id: string,
+	response: Record<string, unknown>,
+): Promise<{ ok: boolean }> {
+	return apiPost("/api/extension-ui-response", { id, response });
+}
+
+export function fetchSessionState(): Promise<SessionState> {
+	return apiGet("/api/session-state");
+}
+
+export function fetchModels(): Promise<{ models: ModelInfo[] }> {
+	return apiGet("/api/models");
+}
+
+export function setModel(provider: string, modelId: string): Promise<{ ok: boolean }> {
+	return apiPost("/api/model", { provider, modelId });
+}
+
+export function setThinkingLevel(level: string): Promise<{ ok: boolean }> {
+	return apiPost("/api/thinking", { level });
+}
+
+export function createNewSession(): Promise<NewSessionResponse> {
+	return apiPost("/api/new-session");
+}
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,32 @@
+import { apiUrl } from "./base";
+
+export class ApiError extends Error {
+	constructor(
+		message: string,
+		public status?: number,
+	) {
+		super(message);
+		this.name = "ApiError";
+	}
+}
+
+export async function apiFetch<T>(url: string, init?: RequestInit): Promise<T> {
+	const res = await fetch(apiUrl(url), init);
+	const data = (await res.json().catch(() => ({}))) as T & { error?: string };
+	if (!res.ok || (data && "error" in data && data.error)) {
+		throw new ApiError((data as { error?: string }).error || res.statusText, res.status);
+	}
+	return data;
+}
+
+export async function apiPost<T>(url: string, body?: unknown): Promise<T> {
+	return apiFetch<T>(url, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: body !== undefined ? JSON.stringify(body) : undefined,
+	});
+}
+
+export async function apiGet<T>(url: string): Promise<T> {
+	return apiFetch<T>(url);
+}
--- a/frontend/src/api/commands.ts
+++ b/frontend/src/api/commands.ts
@@ -0,0 +1,6 @@
+import { apiGet } from "./client";
+import type { SlashCommandsResponse } from "../types/commands";
+
+export function fetchSlashCommands(): Promise<SlashCommandsResponse> {
+	return apiGet("/api/commands");
+}
--- a/frontend/src/api/sessions.ts
+++ b/frontend/src/api/sessions.ts
@@ -0,0 +1,59 @@
+import { apiGet, apiPost } from "./client";
+import { apiUrl } from "./base";
+import type { SessionState } from "../types/message";
+import type { SessionHistoryPayload, SessionSummary } from "../types/session";
+
+export function fetchSessions(): Promise<{ sessions: SessionSummary[] }> {
+	return apiGet("/api/sessions");
+}
+
+export function fetchSessionHistory(path: string): Promise<SessionHistoryPayload> {
+	return apiPost("/api/sessions/history", { path });
+}
+
+export async function activateSessionBackend(path: string): Promise<SessionState | null> {
+	const activateRes = await fetch(apiUrl("/api/sessions/activate"), {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ path }),
+	});
+	const activateData = (await activateRes.json().catch(() => ({}))) as {
+		error?: string;
+		state?: SessionState;
+	};
+	if (activateRes.ok && !activateData.error) {
+		return activateData.state ?? null;
+	}
+
+	const activateError = activateData.error || activateRes.statusText || "Unknown error";
+	if (activateRes.status !== 404 && !/not found/i.test(activateError)) {
+		throw new Error(activateError);
+	}
+
+	const fallbackRes = await fetch(apiUrl("/api/sessions/load"), {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ path }),
+	});
+	const fallbackData = (await fallbackRes.json().catch(() => ({}))) as { error?: string };
+	if (!fallbackRes.ok || fallbackData.error) {
+		throw new Error(fallbackData.error || fallbackRes.statusText);
+	}
+	return null;
+}
+
+export function loadSession(path: string): Promise<{ ok?: boolean; error?: string }> {
+	return apiPost("/api/sessions/load", { path });
+}
+
+export function deleteSession(path: string): Promise<{ ok?: boolean }> {
+	return apiPost("/api/sessions/delete", { path });
+}
+
+export function renameSession(path: string, name: string): Promise<{ ok?: boolean }> {
+	return apiPost("/api/sessions/name", { path, name });
+}
+
+export function setSessionPinned(path: string, pinned: boolean): Promise<{ ok?: boolean; pinned?: boolean; pinnedPaths?: string[] }> {
+	return apiPost("/api/sessions/pin", { path, pinned });
+}
--- a/frontend/src/api/settings.ts
+++ b/frontend/src/api/settings.ts
@@ -0,0 +1,56 @@
+import { apiGet, apiPost } from "./client";
+import type { AvatarSettings, EnvironmentInfo, ExtensionInfo, McpServerInfo, McpToolInfo, SettingsData, SkillInfo } from "../types/events";
+
+export function fetchSettings(): Promise<SettingsData> {
+	return apiGet("/api/settings");
+}
+
+export function toggleSkill(path: string, enabled: boolean): Promise<{ ok?: boolean; skill?: SkillInfo }> {
+	return apiPost("/api/settings/skills/toggle", { path, enabled });
+}
+
+export function toggleExtension(
+	path: string,
+	enabled: boolean,
+): Promise<{ ok?: boolean; extension?: ExtensionInfo }> {
+	return apiPost("/api/settings/extensions/toggle", { path, enabled });
+}
+
+export function toggleMcpServer(
+	server: string,
+	enabled: boolean,
+): Promise<{ ok?: boolean; server?: McpServerInfo }> {
+	return apiPost("/api/settings/mcp/server/toggle", { server, enabled });
+}
+
+export function toggleMcpTool(
+	server: string,
+	tool: string,
+	enabled: boolean,
+): Promise<{ ok?: boolean; tool?: McpToolInfo }> {
+	return apiPost("/api/settings/mcp/tool/toggle", { server, tool, enabled });
+}
+
+export function fetchAvatars(): Promise<AvatarSettings> {
+	return apiGet("/api/avatars");
+}
+
+export function reloadSettings(): Promise<{ ok?: boolean }> {
+	return apiPost("/api/settings/reload");
+}
+
+export function saveSystemPrompt(systemPrompt: string): Promise<{ systemPromptPath?: string }> {
+	return apiPost("/api/settings/system-prompt", { systemPrompt });
+}
+
+export function saveModelsConfig(modelsConfig: string): Promise<{ modelsConfigPath?: string }> {
+	return apiPost("/api/settings/models-config", { modelsConfig });
+}
+
+export function saveAvatars(avatars: AvatarSettings): Promise<AvatarSettings & { ok?: boolean }> {
+	return apiPost("/api/settings/avatars", avatars);
+}
+
+export function fetchEnvironment(): Promise<EnvironmentInfo> {
+	return apiGet("/api/environment");
+}
--- a/frontend/src/api/webuiConfig.ts
+++ b/frontend/src/api/webuiConfig.ts
@@ -0,0 +1,25 @@
+import { apiGet, apiPost } from "./client";
+
+export interface WebuiConfigResponse {
+	config?: Record<string, string>;
+	dbPath?: string;
+	key?: string;
+	value?: string | null;
+}
+
+export function fetchWebuiConfig(key?: string): Promise<WebuiConfigResponse> {
+	const query = key ? `?key=${encodeURIComponent(key)}` : "";
+	return apiGet(`/api/webui/config${query}`);
+}
+
+export function saveWebuiConfig(key: string, value: string): Promise<{ ok?: boolean; key?: string; value?: string }> {
+	return apiPost("/api/webui/config", { key, value });
+}
+
+export function saveWebuiConfigMany(entries: Record<string, string>): Promise<{ ok?: boolean; config?: Record<string, string> }> {
+	return apiPost("/api/webui/config", { entries });
+}
+
+export function deleteWebuiConfig(key: string): Promise<{ ok?: boolean; deleted?: boolean; key?: string }> {
+	return apiPost("/api/webui/config/delete", { key });
+}
--- a/frontend/src/components/chat/BashOutputBlock.module.css
+++ b/frontend/src/components/chat/BashOutputBlock.module.css
@@ -0,0 +1,93 @@
+.block {
+  margin: 0;
+}
+
+.blockDim .header {
+  opacity: 0.75;
+}
+
+.blockDim .command,
+.blockDim .output {
+  color: #6b7280;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f8fafc;
+  border-bottom: 1px solid #e8ecf0;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.prompt {
+  font-family: var(--font-mono);
+  font-size: inherit;
+  font-weight: 600;
+  color: #6366f1;
+  flex-shrink: 0;
+}
+
+.command {
+  min-width: 0;
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: inherit;
+  color: #374151;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.output {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: var(--font-mono);
+  font-size: inherit;
+  line-height: inherit;
+  color: #4b5563;
+  background: #fff;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+  max-height: min(420px, 50vh);
+}
+
+.outputEmpty {
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.outputStreaming::after {
+  content: "▊";
+  animation: blink 0.8s step-end infinite;
+  color: #6366f1;
+  margin-left: 1px;
+}
+
+.exit {
+  padding: 6px 12px;
+  border-top: 1px solid #fecaca;
+  background: #fef2f2;
+  font-family: var(--font-mono);
+  font-size: inherit;
+  color: #b91c1c;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
--- a/frontend/src/components/chat/BashOutputBlock.tsx
+++ b/frontend/src/components/chat/BashOutputBlock.tsx
@@ -0,0 +1,41 @@
+import styles from "./BashOutputBlock.module.css";
+
+interface BashOutputBlockProps {
+	command?: string;
+	content: string;
+	exitCode?: number;
+	streaming?: boolean;
+	excludeFromContext?: boolean;
+}
+
+export function BashOutputBlock({
+	command,
+	content,
+	exitCode,
+	streaming,
+	excludeFromContext,
+}: BashOutputBlockProps) {
+	const hasOutput = Boolean(content.trim());
+	const showExit = exitCode !== undefined && exitCode !== 0 && !streaming;
+
+	return (
+		<div className={`${styles.block} ${excludeFromContext ? styles.blockDim : ""}`}>
+			<div className={styles.header}>
+				<span className={styles.icon} aria-hidden="true">
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<polyline points="4 17 10 11 4 5" />
+						<line x1="12" y1="19" x2="20" y2="19" />
+					</svg>
+				</span>
+				<span className={styles.prompt}>$</span>
+				<span className={styles.command}>{command || "shell"}</span>
+			</div>
+			<pre
+				className={`${styles.output} ${!hasOutput ? styles.outputEmpty : ""} ${streaming ? styles.outputStreaming : ""}`}
+			>
+				{hasOutput ? content : streaming ? "执行中..." : "(无输出)"}
+			</pre>
+			{showExit ? <div className={styles.exit}>退出码 {exitCode}</div> : null}
+		</div>
+	);
+}
--- a/frontend/src/components/chat/ChatInput.module.css
+++ b/frontend/src/components/chat/ChatInput.module.css
@@ -0,0 +1,153 @@
+.inputArea {
+  padding: 10px 16px 12px;
+  border-top: 1px solid #f0f0f0;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(10px);
+}
+
+.inputAreaDragOver {
+  background: rgba(239, 246, 255, 0.96);
+}
+
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 720px;
+  margin: 0 auto 8px;
+}
+
+.attachmentItem {
+  position: relative;
+  width: 72px;
+  height: 72px;
+}
+
+.attachmentThumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.attachmentRemove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.78);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.fileInput {
+  display: none;
+}
+
+.wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  max-width: 720px;
+  margin: 0 auto;
+  background: #f6f7fb;
+  border: 1px solid #e5e5e5;
+  border-radius: 14px;
+  padding: 4px 4px 4px 8px;
+  transition: border-color 0.15s;
+}
+
+.wrapper:focus-within {
+  border-color: #2563eb;
+  background: #fff;
+}
+
+.input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #1a1a1a;
+  padding: 8px 0;
+  font-size: 16px;
+  font-family: inherit;
+  resize: none;
+  outline: none;
+  min-height: 24px;
+  max-height: 120px;
+  line-height: 1.45;
+}
+
+.input::placeholder {
+  color: #bbb;
+}
+
+.attachBtn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 11px;
+  color: #64748b;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+.attachBtn:hover:not(:disabled) {
+  background: #eef2ff;
+  color: #2563eb;
+}
+
+.attachBtn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.sendBtn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #2563eb;
+  border: none;
+  border-radius: 11px;
+  color: #fff;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, opacity 0.15s;
+  touch-action: manipulation;
+}
+
+.sendBtn:hover {
+  background: #1d4ed8;
+}
+
+.sendBtn:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .inputArea {
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
+  }
+
+  .wrapper {
+    padding: 2px 2px 2px 10px;
+  }
+}
--- a/frontend/src/components/chat/ChatInput.tsx
+++ b/frontend/src/components/chat/ChatInput.tsx
@@ -0,0 +1,345 @@
+import { useEffect, useMemo, useRef, useState, type ClipboardEvent, type DragEvent, type KeyboardEvent } from "react";
+import { fetchSlashCommands } from "../../api/commands";
+import { useChatContext } from "../../context/ChatContext";
+import type { SlashCommand } from "../../types/commands";
+import type { ImageContent } from "../../types/message";
+import { isTouchLike } from "../../utils/format";
+import {
+	clipboardItemsToImages,
+	fileToImageContent,
+	imageToDataUrl,
+	MAX_CHAT_IMAGES,
+} from "../../utils/images";
+import { parseBashInput } from "../../utils/bash";
+import {
+	applySlashCompletion,
+	filterSlashCommands,
+	filterWebUiSlashCommands,
+	parseSlashCommandInput,
+} from "../../utils/slashCommands";
+import { SlashCommandMenu } from "./SlashCommandMenu";
+import styles from "./ChatInput.module.css";
+
+export function ChatInput() {
+	const {
+		isStreaming,
+		sendMessage,
+		runBashCommand,
+		addSystemMessage,
+		abortStream,
+		toggleToolsExpanded,
+	} = useChatContext();
+	const [value, setValue] = useState("");
+	const [pendingImages, setPendingImages] = useState<ImageContent[]>([]);
+	const [dragOver, setDragOver] = useState(false);
+	const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
+	const [selectedSlashIndex, setSelectedSlashIndex] = useState(0);
+	const inputRef = useRef<HTMLTextAreaElement>(null);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const touchLike = isTouchLike();
+
+	useEffect(() => {
+		let cancelled = false;
+		void fetchSlashCommands()
+			.then((data) => {
+				if (!cancelled) setSlashCommands(filterWebUiSlashCommands(data.commands || []));
+			})
+			.catch((err) => {
+				if (!cancelled) {
+					addSystemMessage(err instanceof Error ? err.message : String(err));
+				}
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [addSystemMessage]);
+
+	useEffect(() => {
+		const onKeyDown = (e: globalThis.KeyboardEvent) => {
+			if (!inputRef.current || document.activeElement !== inputRef.current) return;
+			if (e.key === "Escape" && isStreaming) {
+				e.preventDefault();
+				void abortStream();
+			}
+			if (e.key === "o" && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault();
+				toggleToolsExpanded();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [isStreaming, abortStream, toggleToolsExpanded]);
+
+	const slashContext = useMemo(() => parseSlashCommandInput(value), [value]);
+	const filteredSlashCommands = useMemo(
+		() => (slashContext ? filterSlashCommands(slashCommands, slashContext.query) : []),
+		[slashCommands, slashContext],
+	);
+	const slashMenuOpen = Boolean(slashContext && filteredSlashCommands.length > 0);
+
+	useEffect(() => {
+		setSelectedSlashIndex(0);
+	}, [value, slashMenuOpen]);
+
+	const canSend = value.trim().length > 0 || pendingImages.length > 0;
+
+	const applySlashSelection = (command: SlashCommand) => {
+		const nextValue = applySlashCompletion(value, command.name);
+		setValue(nextValue);
+		requestAnimationFrame(() => {
+			const el = inputRef.current;
+			if (!el) return;
+			el.focus();
+			el.setSelectionRange(nextValue.length, nextValue.length);
+			el.style.height = "auto";
+			el.style.height = `${Math.min(el.scrollHeight, 150)}px`;
+		});
+	};
+
+	const addImages = async (files: FileList | File[]) => {
+		const list = Array.from(files);
+		if (!list.length) return;
+
+		const remaining = MAX_CHAT_IMAGES - pendingImages.length;
+		if (remaining <= 0) {
+			addSystemMessage(`最多只能附加 ${MAX_CHAT_IMAGES} 张图片`);
+			return;
+		}
+
+		const next: ImageContent[] = [];
+		for (const file of list.slice(0, remaining)) {
+			try {
+				next.push(await fileToImageContent(file));
+			} catch (err) {
+				addSystemMessage(err instanceof Error ? err.message : String(err));
+			}
+		}
+		if (next.length) {
+			setPendingImages((prev) => [...prev, ...next].slice(0, MAX_CHAT_IMAGES));
+		}
+	};
+
+	const removePendingImage = (index: number) => {
+		setPendingImages((prev) => prev.filter((_, i) => i !== index));
+	};
+
+	const handleSend = async (mode: "prompt" | "steer" | "follow_up" = "prompt") => {
+		const text = value.trim();
+		if (!text && pendingImages.length === 0) return;
+
+		const images = pendingImages.length ? pendingImages : undefined;
+		setValue("");
+		setPendingImages([]);
+		if (inputRef.current) inputRef.current.style.height = "auto";
+
+		if (text.startsWith("!") && parseBashInput(text)) {
+			await runBashCommand(text);
+		} else {
+			const sendMode = isStreaming && mode === "prompt" ? "steer" : mode;
+			await sendMessage(text, images, { mode: sendMode });
+		}
+
+		if (touchLike) inputRef.current?.blur();
+	};
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+		if (e.nativeEvent.isComposing) return;
+
+		if (slashMenuOpen) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setSelectedSlashIndex((prev) => (prev + 1) % filteredSlashCommands.length);
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setSelectedSlashIndex(
+					(prev) => (prev - 1 + filteredSlashCommands.length) % filteredSlashCommands.length,
+				);
+				return;
+			}
+			if (e.key === "Tab") {
+				e.preventDefault();
+				const command = filteredSlashCommands[selectedSlashIndex];
+				if (command) applySlashSelection(command);
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault();
+				setValue((prev) => {
+					const trimmed = prev.trimStart();
+					if (!trimmed.startsWith("/")) return prev;
+					return prev.replace(/^\s*\//, "");
+				});
+				return;
+			}
+			if (e.key === "Enter" && !e.shiftKey) {
+				e.preventDefault();
+				const command = filteredSlashCommands[selectedSlashIndex];
+				if (command) applySlashSelection(command);
+				return;
+			}
+		}
+
+		if (e.key === "Enter" && e.shiftKey) {
+			e.preventDefault();
+			void handleSend("follow_up");
+			return;
+		}
+
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			void handleSend(isStreaming ? "steer" : "prompt");
+		}
+	};
+
+	const handleBeforeInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+		const native = e.nativeEvent as InputEvent;
+		if (touchLike && native.inputType === "insertLineBreak") {
+			e.preventDefault();
+			void handleSend(isStreaming ? "steer" : "prompt");
+		}
+	};
+
+	const handleInput = () => {
+		const el = inputRef.current;
+		if (!el) return;
+		el.style.height = "auto";
+		el.style.height = `${Math.min(el.scrollHeight, 150)}px`;
+	};
+
+	const handlePaste = (e: ClipboardEvent<HTMLElement>) => {
+		const items = e.clipboardData?.items;
+		if (!items) return;
+
+		const hasImage = Array.from(items).some((item) => item.type.startsWith("image/"));
+		if (!hasImage) return;
+
+		e.preventDefault();
+		void clipboardItemsToImages(items)
+			.then((images) => {
+				if (!images.length) return;
+				setPendingImages((prev) => {
+					const remaining = MAX_CHAT_IMAGES - prev.length;
+					if (remaining <= 0) {
+						addSystemMessage(`最多只能附加 ${MAX_CHAT_IMAGES} 张图片`);
+						return prev;
+					}
+					return [...prev, ...images.slice(0, remaining)];
+				});
+			})
+			.catch((err) => {
+				addSystemMessage(err instanceof Error ? err.message : String(err));
+			});
+	};
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const files = e.target.files;
+		if (files?.length) void addImages(files);
+		e.target.value = "";
+	};
+
+	const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+		if (!e.dataTransfer.types.includes("Files")) return;
+		e.preventDefault();
+		setDragOver(true);
+	};
+
+	const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+		if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+		setDragOver(false);
+	};
+
+	const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		setDragOver(false);
+		const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+		if (files.length) void addImages(files);
+	};
+
+	return (
+		<div
+			className={`${styles.inputArea} ${dragOver ? styles.inputAreaDragOver : ""}`}
+			onPaste={handlePaste}
+			onDragOver={handleDragOver}
+			onDragLeave={handleDragLeave}
+			onDrop={handleDrop}
+		>
+			{pendingImages.length > 0 ? (
+				<div className={styles.attachments}>
+					{pendingImages.map((img, index) => (
+						<div key={`${img.mimeType}-${index}`} className={styles.attachmentItem}>
+							<img className={styles.attachmentThumb} src={imageToDataUrl(img)} alt="" />
+							<button
+								type="button"
+								className={styles.attachmentRemove}
+								onClick={() => removePendingImage(index)}
+								aria-label="移除图片"
+							>
+								×
+							</button>
+						</div>
+					))}
+				</div>
+			) : null}
+			{slashMenuOpen ? (
+				<SlashCommandMenu
+					commands={filteredSlashCommands}
+					selectedIndex={selectedSlashIndex}
+					onSelect={applySlashSelection}
+				/>
+			) : null}
+			<div className={styles.wrapper}>
+				<input
+					ref={fileInputRef}
+					type="file"
+					accept="image/jpeg,image/png,image/gif,image/webp"
+					multiple
+					className={styles.fileInput}
+					onChange={handleFileChange}
+					tabIndex={-1}
+					aria-hidden
+				/>
+				<button
+					type="button"
+					className={styles.attachBtn}
+					onClick={() => fileInputRef.current?.click()}
+					disabled={pendingImages.length >= MAX_CHAT_IMAGES}
+					title="上传图片"
+					aria-label="上传图片"
+				>
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<rect x="3" y="3" width="18" height="18" rx="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<path d="M21 15l-5-5L5 21" />
+					</svg>
+				</button>
+				<textarea
+					ref={inputRef}
+					className={styles.input}
+					rows={1}
+					value={value}
+					onChange={(e) => setValue(e.target.value)}
+					onInput={handleInput}
+					onKeyDown={handleKeyDown}
+					onBeforeInput={handleBeforeInput}
+					placeholder={isStreaming ? "Enter 改方向，Shift+Enter 排队后续…" : "输入消息… (/ 命令, ! bash)"}
+					aria-label="消息输入框"
+					enterKeyHint="send"
+					inputMode="text"
+				/>
+				<button
+					className={styles.sendBtn}
+					type="button"
+					onClick={() => void handleSend(isStreaming ? "steer" : "prompt")}
+					disabled={!canSend}
+					aria-label="发送"
+				>
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/chat/CompactionSummaryBlock.module.css
+++ b/frontend/src/components/chat/CompactionSummaryBlock.module.css
@@ -0,0 +1,26 @@
+.summary {
+  margin: 0;
+}
+
+.toggle {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--text-secondary, #4b5563);
+  list-style: none;
+}
+
+.toggle::-webkit-details-marker {
+  display: none;
+}
+
+.body {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+  color: var(--text-primary, #111827);
+}
--- a/frontend/src/components/chat/CompactionSummaryBlock.tsx
+++ b/frontend/src/components/chat/CompactionSummaryBlock.tsx
@@ -0,0 +1,15 @@
+import styles from "./CompactionSummaryBlock.module.css";
+
+interface CompactionSummaryBlockProps {
+	content: string;
+	label?: string;
+}
+
+export function CompactionSummaryBlock({ content, label = "上下文已压缩" }: CompactionSummaryBlockProps) {
+	return (
+		<details className={styles.summary}>
+			<summary className={styles.toggle}>{label}</summary>
+			<div className={styles.body}>{content}</div>
+		</details>
+	);
+}
--- a/frontend/src/components/chat/ExportMenu.module.css
+++ b/frontend/src/components/chat/ExportMenu.module.css
@@ -0,0 +1,84 @@
+.wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 30px;
+  padding: 0 11px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 9px;
+  background: #fff;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.btn:hover:not(:disabled) {
+  background: #fff;
+  border-color: rgba(37, 99, 235, 0.22);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
+}
+
+.btn:disabled {
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+  background: rgba(248, 250, 252, 0.9);
+}
+
+.btnIcon {
+  width: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 168px;
+  padding: 6px;
+  border: 1px solid var(--toolbar-border);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
+  z-index: 120;
+}
+
+.menuItem {
+  display: block;
+  width: 100%;
+  padding: 9px 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.menuItem:hover {
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.menuItemDesc {
+  display: block;
+  margin-top: 3px;
+  font-size: 10px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .menu {
+    right: auto;
+    left: 0;
+  }
+}
--- a/frontend/src/components/chat/ExportMenu.tsx
+++ b/frontend/src/components/chat/ExportMenu.tsx
@@ -0,0 +1,164 @@
+import { useEffect, useRef, useState } from "react";
+import { fetchSessionHistory } from "../../api/sessions";
+import { useChatContext } from "../../context/ChatContext";
+import type { ChatMessage, ToolCallBlock } from "../../types/message";
+import { extractContent, extractThinking, formatToolCall, getToolCalls } from "../../utils/toolCall";
+import { nextMessageId } from "../../utils/format";
+import {
+	downloadTextFile,
+	messagesToMarkdown,
+	messagesToMinimalHtml,
+	safeExportFilename,
+} from "../../utils/exportConversation";
+import styles from "./ExportMenu.module.css";
+
+function historyToExportMessages(
+	messages: NonNullable<Awaited<ReturnType<typeof fetchSessionHistory>>["messages"]>,
+): ChatMessage[] {
+	const result: ChatMessage[] = [];
+	for (const m of messages) {
+		if (m.role === "user") {
+			result.push({ id: nextMessageId(), role: "user", content: extractContent(m.content) });
+		} else if (m.role === "assistant") {
+			if (Array.isArray(m.content)) {
+				for (const block of m.content) {
+					if (block.type === "thinking") {
+						const thinking = (block.thinking ?? "").trim();
+						if (thinking) {
+							result.push({ id: nextMessageId(), role: "thinking", content: thinking });
+						}
+					} else if (block.type === "text") {
+						const text = (block.text ?? "").trim();
+						if (text) {
+							result.push({ id: nextMessageId(), role: "assistant", content: text });
+						}
+					} else if (block.type === "toolCall") {
+						const tc = block as ToolCallBlock;
+						const tid = tc.toolCallId || tc.id;
+						result.push({
+							id: tid ? `tool-${tid}` : nextMessageId(),
+							role: "tool_call",
+							content: formatToolCall(tc),
+							toolCallId: tid ? String(tid) : undefined,
+						});
+					}
+				}
+			} else {
+				const thinking = extractThinking(m.content);
+				if (thinking) {
+					result.push({ id: nextMessageId(), role: "thinking", content: thinking });
+				}
+				const text = extractContent(m.content);
+				if (text) result.push({ id: nextMessageId(), role: "assistant", content: text });
+				for (const tc of getToolCalls(m.content)) {
+					const tid = tc.toolCallId || tc.id;
+					result.push({
+						id: tid ? `tool-${tid}` : nextMessageId(),
+						role: "tool_call",
+						content: formatToolCall(tc),
+						toolCallId: tid ? String(tid) : undefined,
+					});
+				}
+			}
+		}
+	}
+	return result;
+}
+
+export function ExportMenu({ compact = false }: { compact?: boolean }) {
+	const { headerTitle, messages, activeSessionPath, isStreaming, addSystemMessage } = useChatContext();
+	const [open, setOpen] = useState(false);
+	const [exporting, setExporting] = useState(false);
+	const wrapRef = useRef<HTMLDivElement>(null);
+
+	const hasMessages = messages.some((m) => !m.streaming && m.content.trim());
+	const canExport = hasMessages && !isStreaming && !exporting;
+
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event: MouseEvent) => {
+			if (!wrapRef.current?.contains(event.target as Node)) {
+				setOpen(false);
+			}
+		};
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("mousedown", onPointerDown);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", onPointerDown);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [open]);
+
+	const resolveExportMessages = async (): Promise<ChatMessage[]> => {
+		if (activeSessionPath) {
+			try {
+				const payload = await fetchSessionHistory(activeSessionPath);
+				if (payload.messages?.length) {
+					return historyToExportMessages(payload.messages);
+				}
+			} catch {
+				/* fallback to in-memory messages */
+			}
+		}
+		return messages;
+	};
+
+	const handleExport = async (format: "markdown" | "html") => {
+		if (!canExport) return;
+		setExporting(true);
+		setOpen(false);
+		try {
+			const exportMessages = await resolveExportMessages();
+			const filtered = exportMessages.filter((m) => !m.streaming && m.content.trim());
+			if (!filtered.length) {
+				addSystemMessage("当前对话没有可导出的内容");
+				return;
+			}
+			const title = headerTitle.trim() || "对话";
+			const base = safeExportFilename(title);
+			if (format === "markdown") {
+				downloadTextFile(`${base}.md`, messagesToMarkdown(title, filtered), "text/markdown");
+			} else {
+				downloadTextFile(`${base}.html`, messagesToMinimalHtml(title, filtered), "text/html");
+			}
+		} catch (err) {
+			addSystemMessage(`导出失败: ${err instanceof Error ? err.message : String(err)}`);
+		} finally {
+			setExporting(false);
+		}
+	};
+
+	return (
+		<div className={styles.wrap} ref={wrapRef}>
+			<button
+				type="button"
+				className={compact ? `${styles.btn} ${styles.btnIcon}` : styles.btn}
+				disabled={!canExport}
+				aria-expanded={open}
+				aria-haspopup="menu"
+				aria-label="导出对话"
+				onClick={() => setOpen((value) => !value)}
+			>
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+					<path d="M12 3v12M7 8l5 5 5-5M5 21h14" />
+				</svg>
+				{compact ? null : "导出"}
+			</button>
+			{open ? (
+				<div className={styles.menu} role="menu">
+					<button type="button" className={styles.menuItem} role="menuitem" onClick={() => void handleExport("markdown")}>
+						Markdown
+						<span className={styles.menuItemDesc}>.md 格式，保留 Markdown 结构</span>
+					</button>
+					<button type="button" className={styles.menuItem} role="menuitem" onClick={() => void handleExport("html")}>
+						HTML 超简洁文本
+						<span className={styles.menuItemDesc}>纯文本风格 HTML，便于阅读与分享</span>
+					</button>
+				</div>
+			) : null}
+		</div>
+	);
+}
--- a/frontend/src/components/chat/ExtensionDialogModal.module.css
+++ b/frontend/src/components/chat/ExtensionDialogModal.module.css
@@ -0,0 +1,80 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal {
+  width: min(420px, 100%);
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.message {
+  font-size: 14px;
+  color: var(--text-secondary, #4b5563);
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+}
+
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 12px;
+  font: inherit;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.optionBtn {
+  text-align: left;
+  border: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.btn {
+  border-radius: 8px;
+  padding: 6px 12px;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  cursor: pointer;
+}
+
+.btnPrimary {
+  border-radius: 8px;
+  padding: 6px 12px;
+  border: 1px solid #4f46e5;
+  background: #4f46e5;
+  color: #fff;
+  cursor: pointer;
+}
--- a/frontend/src/components/chat/ExtensionDialogModal.tsx
+++ b/frontend/src/components/chat/ExtensionDialogModal.tsx
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import type { ExtensionDialogState } from "../../types/events";
+import styles from "./ExtensionDialogModal.module.css";
+
+interface ExtensionDialogModalProps {
+	dialog: ExtensionDialogState;
+	onSubmit: (response: Record<string, unknown>) => void;
+	onDismiss: () => void;
+}
+
+export function ExtensionDialogModal({ dialog, onSubmit, onDismiss }: ExtensionDialogModalProps) {
+	const [value, setValue] = useState(dialog.prefill ?? "");
+
+	const submitValue = (payload: Record<string, unknown>) => {
+		onSubmit(payload);
+	};
+
+	return (
+		<div className={styles.overlay} role="presentation" onClick={onDismiss}>
+			<div className={styles.modal} role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+				<div className={styles.title}>{dialog.title}</div>
+				{dialog.message ? <div className={styles.message}>{dialog.message}</div> : null}
+
+				{dialog.method === "select" && dialog.options ? (
+					<div className={styles.options}>
+						{dialog.options.map((option) => (
+							<button
+								key={option}
+								type="button"
+								className={styles.optionBtn}
+								onClick={() => submitValue({ value: option })}
+							>
+								{option}
+							</button>
+						))}
+						<button type="button" className={styles.optionBtn} onClick={() => submitValue({ cancelled: true })}>
+							取消
+						</button>
+					</div>
+				) : null}
+
+				{dialog.method === "confirm" ? (
+					<div className={styles.actions}>
+						<button type="button" className={styles.btn} onClick={() => submitValue({ cancelled: true })}>
+							取消
+						</button>
+						<button type="button" className={styles.btnPrimary} onClick={() => submitValue({ confirmed: true })}>
+							确认
+						</button>
+					</div>
+				) : null}
+
+				{dialog.method === "input" || dialog.method === "editor" ? (
+					<>
+						<textarea
+							className={styles.input}
+							rows={dialog.method === "editor" ? 8 : 3}
+							value={value}
+							onChange={(e) => setValue(e.target.value)}
+						/>
+						<div className={styles.actions}>
+							<button type="button" className={styles.btn} onClick={() => submitValue({ cancelled: true })}>
+								取消
+							</button>
+							<button
+								type="button"
+								className={styles.btnPrimary}
+								onClick={() => submitValue({ value })}
+							>
+								确定
+							</button>
+						</div>
+					</>
+				) : null}
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/chat/ExtensionWidgetPanel.module.css
+++ b/frontend/src/components/chat/ExtensionWidgetPanel.module.css
@@ -0,0 +1,25 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--toolbar-border, #e8ecf0);
+  background: #fff;
+}
+
+.widget {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--text-secondary, #4b5563);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.widgetKey {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary, #9ca3af);
+  margin-bottom: 4px;
+}
--- a/frontend/src/components/chat/ExtensionWidgetPanel.tsx
+++ b/frontend/src/components/chat/ExtensionWidgetPanel.tsx
@@ -0,0 +1,21 @@
+import styles from "./ExtensionWidgetPanel.module.css";
+
+interface ExtensionWidgetPanelProps {
+	widgets: Record<string, string[]>;
+}
+
+export function ExtensionWidgetPanel({ widgets }: ExtensionWidgetPanelProps) {
+	const entries = Object.entries(widgets).filter(([, lines]) => lines.length > 0);
+	if (entries.length === 0) return null;
+
+	return (
+		<div className={styles.panel}>
+			{entries.map(([key, lines]) => (
+				<div key={key} className={styles.widget}>
+					<div className={styles.widgetKey}>{key}</div>
+					{lines.join("\n")}
+				</div>
+			))}
+		</div>
+	);
+}
--- a/frontend/src/components/chat/MessageBubble.tsx
+++ b/frontend/src/components/chat/MessageBubble.tsx
@@ -0,0 +1,204 @@
+import { useState } from "react";
+import type { ChatMessage } from "../../types/message";
+import { useAvatars } from "../../context/AvatarContext";
+import {
+	downloadTextFile,
+	messageMarkdownFilename,
+	singleAssistantMarkdown,
+} from "../../utils/exportConversation";
+import { renderMarkdown } from "../../utils/markdown";
+import { imageToDataUrl } from "../../utils/images";
+import { CompactionSummaryBlock } from "./CompactionSummaryBlock";
+import { ToolCallBlock } from "./ToolCallBlock";
+import { ThinkingBlock } from "./ThinkingBlock";
+import { BashOutputBlock } from "./BashOutputBlock";
+import styles from "./MessageList.module.css";
+
+interface MessageBubbleProps {
+	message: ChatMessage;
+	agentGutter?: "avatar" | "spacer" | "none";
+	toolsExpanded?: boolean;
+}
+
+function ChatAvatar({ src, className }: { src: string; className: string }) {
+	const [failed, setFailed] = useState(false);
+	if (!src || failed) return null;
+	return (
+		<img
+			className={className}
+			src={src}
+			width={32}
+			height={32}
+			alt=""
+			decoding="async"
+			referrerPolicy="no-referrer"
+			onError={() => setFailed(true)}
+		/>
+	);
+}
+
+function AgentSideGutter({ mode, avatarUrl }: { mode: "avatar" | "spacer"; avatarUrl: string }) {
+	if (mode === "spacer") {
+		return <div className={styles.assistantAvatarSpacer} aria-hidden="true" />;
+	}
+	return (
+		<div className={styles.assistantAvatarSlot}>
+			<ChatAvatar src={avatarUrl} className={styles.assistantAvatar} />
+		</div>
+	);
+}
+
+function AssistantActions({ content }: { content: string }) {
+	const [copied, setCopied] = useState(false);
+	const markdown = singleAssistantMarkdown(content);
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(markdown);
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1500);
+		} catch {
+			/* ignore */
+		}
+	};
+
+	const handleDownload = () => {
+		downloadTextFile(messageMarkdownFilename(content), markdown, "text/markdown");
+	};
+
+	return (
+		<div className={styles.assistantToolbar}>
+			<button
+				type="button"
+				className={`${styles.msgActionBtn} ${copied ? styles.msgActionBtnCopied : ""}`}
+				onClick={() => void handleCopy()}
+				title="复制 Markdown"
+			>
+				{copied ? "已复制" : "复制"}
+			</button>
+			<button
+				type="button"
+				className={styles.msgActionBtn}
+				onClick={handleDownload}
+				title="下载 Markdown"
+			>
+				下载
+			</button>
+		</div>
+	);
+}
+
+export function MessageBubble({
+	message,
+	agentGutter = "none",
+	toolsExpanded = false,
+}: MessageBubbleProps) {
+	const { userAvatarUrl, agentAvatarUrl } = useAvatars();
+	const gutter =
+		agentGutter === "avatar" || agentGutter === "spacer" ? (
+			<AgentSideGutter mode={agentGutter} avatarUrl={agentAvatarUrl} />
+		) : null;
+
+	if (message.role === "thinking") {
+		return (
+			<div className={styles.assistantRow}>
+				{gutter}
+				<div className={`${styles.msg} ${styles.thinking}`}>
+					<ThinkingBlock content={message.content} streaming={message.streaming} />
+				</div>
+			</div>
+		);
+	}
+
+	if (message.role === "tool_call") {
+		return (
+			<div className={styles.assistantRow}>
+				{gutter}
+				<div className={`${styles.msg} ${styles.toolCall}`}>
+					<ToolCallBlock content={message.content} forceOpen={toolsExpanded} />
+				</div>
+			</div>
+		);
+	}
+
+	if (message.role === "bash") {
+		return (
+			<div className={styles.assistantRow}>
+				{gutter}
+				<div className={`${styles.msg} ${styles.bash}`}>
+					<BashOutputBlock
+						command={message.bashCommand}
+						content={message.content}
+						exitCode={message.bashExitCode}
+						streaming={message.streaming}
+						excludeFromContext={message.bashExcludeFromContext}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	if (message.role === "compaction_summary") {
+		return (
+			<div className={`${styles.msg} ${styles.system}`}>
+				<CompactionSummaryBlock content={message.content} />
+			</div>
+		);
+	}
+
+	if (message.role === "branch_summary") {
+		return (
+			<div className={`${styles.msg} ${styles.system}`}>
+				<CompactionSummaryBlock content={message.content} label="分支摘要" />
+			</div>
+		);
+	}
+
+	const classNames = [styles.msg];
+	if (message.role === "user") classNames.push(styles.user);
+	if (message.role === "assistant") classNames.push(styles.assistant);
+	if (message.role === "system") classNames.push(styles.system);
+	if (message.streaming) classNames.push(styles.streaming);
+
+	if (message.role === "assistant") {
+		const showActions = !message.streaming && message.content.trim().length > 0;
+		return (
+			<div className={styles.assistantRow}>
+				{gutter}
+				<div className={classNames.join(" ")}>
+					{showActions ? <AssistantActions content={message.content} /> : null}
+					<div
+						className={styles.assistantBody}
+						dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	if (message.role === "user") {
+		return (
+			<div className={styles.userRow}>
+				<div className={classNames.join(" ")}>
+					{message.content ? <div>{message.content}</div> : null}
+					{message.images?.length ? (
+						<div className={styles.userImages}>
+							{message.images.map((img, index) => (
+								<img
+									key={`${img.mimeType}-${index}`}
+									className={styles.userImage}
+									src={imageToDataUrl(img)}
+									alt=""
+									loading="lazy"
+								/>
+							))}
+						</div>
+					) : null}
+				</div>
+				<ChatAvatar src={userAvatarUrl} className={styles.userAvatar} />
+			</div>
+		);
+	}
+
+	return <div className={classNames.join(" ")}>{message.content}</div>;
+}
--- a/frontend/src/components/chat/MessageList.module.css
+++ b/frontend/src/components/chat/MessageList.module.css
@@ -0,0 +1,434 @@
+.chat {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+}
+
+.chat::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 3px;
+}
+
+.chat::-webkit-scrollbar-thumb:hover {
+  background: #ccc;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: #bbb;
+  text-align: center;
+  gap: 8px;
+}
+
+.emptyIcon {
+  color: #ddd;
+}
+
+.empty p {
+  font-size: 13px;
+}
+
+.emptyHint {
+  font-size: 11px;
+  color: #ccc;
+}
+
+.msg {
+  padding: 10px 12px;
+  line-height: 1.4;
+  font-size: 16px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.user {
+  max-width: min(700px, 85%);
+  background: linear-gradient(180deg, #f0f7ff 0%, #eaf2ff 100%);
+  border: 1px solid #dbeafe;
+  border-radius: 14px 14px 4px 14px;
+  margin: 0;
+  color: #1a1a1a;
+}
+
+.userRow {
+  align-self: flex-end;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 10px;
+  width: 100%;
+  max-width: min(700px, 85%);
+  margin: 0 0 2px;
+}
+
+.userAvatar {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  margin-top: 8px;
+  object-fit: cover;
+  border-radius: 999px;
+}
+
+.userImages {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.userImages:first-child {
+  margin-top: 0;
+}
+
+.userImage {
+  max-width: min(280px, 100%);
+  max-height: 240px;
+  border-radius: 10px;
+  object-fit: contain;
+  border: 1px solid #dbeafe;
+  background: #fff;
+}
+
+.assistantRow {
+  align-self: flex-start;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  max-width: 100%;
+  margin: 0 0 2px;
+}
+
+.assistantAvatar {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  margin-top: 8px;
+  object-fit: cover;
+  border-radius: 999px;
+}
+
+.assistantAvatarSlot {
+  width: 32px;
+  flex-shrink: 0;
+}
+
+.assistantAvatarSpacer {
+  width: 32px;
+  flex-shrink: 0;
+}
+
+.assistant {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  padding: 10px 12px;
+  background: #fff;
+  border: 1px solid #e8ecf0;
+  border-radius: 14px 14px 14px 4px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  color: #1a1a1a;
+  line-height: 1.46;
+  white-space: normal;
+}
+
+.assistantToolbar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+  margin: -2px -2px 6px 0;
+  min-height: 22px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.assistant:hover .assistantToolbar,
+.assistant:focus-within .assistantToolbar {
+  opacity: 1;
+}
+
+.msgActionBtn {
+  height: 22px;
+  padding: 0 7px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.95);
+  color: #6b7280;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.msgActionBtn:hover {
+  background: #f3f4f6;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.msgActionBtnCopied {
+  color: #15803d;
+  border-color: #bbf7d0;
+  background: #f0fdf4;
+}
+
+.assistantBody {
+  min-width: 0;
+}
+
+.system {
+  align-self: center;
+  color: #aaa;
+  font-size: 11px;
+  text-align: center;
+  padding: 6px 10px;
+}
+
+.toolCall {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 16px;
+  line-height: 1.46;
+  color: #666;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e8ecf0;
+  border-radius: 14px 14px 14px 4px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.thinking {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 16px;
+  line-height: 1.46;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  background: #faf8fc;
+  border: 1px solid #ece6f5;
+  border-radius: 14px 14px 14px 4px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.bash {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 16px;
+  line-height: 1.46;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e8ecf0;
+  border-radius: 14px 14px 14px 4px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.streaming::after {
+  content: "▊";
+  animation: blink 0.8s step-end infinite;
+  color: #2563eb;
+  margin-left: 1px;
+}
+
+.assistantRow + .assistantRow {
+  margin-top: 2px;
+}
+
+.assistant :global(h1),
+.assistant :global(h2),
+.assistant :global(h3),
+.assistant :global(h4),
+.assistant :global(h5),
+.assistant :global(h6) {
+  margin: 0.78em 0 0.3em;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.assistant :global(h1) { font-size: 1.18em; }
+.assistant :global(h2) { font-size: 1.1em; }
+.assistant :global(h3) { font-size: 1.03em; }
+.assistant :global(h4) { font-size: 1em; }
+
+.assistant > :global(:first-child) { margin-top: 0; }
+.assistant > :global(:last-child) { margin-bottom: 0; }
+
+.assistant :global(p) {
+  margin: 0 0 0.46em;
+}
+
+.assistant :global(p + p) {
+  margin-top: 0.3em;
+}
+
+.assistant :global(strong) { font-weight: 600; }
+.assistant :global(em) { font-style: italic; }
+
+.assistant :global(a) {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.assistant :global(a:hover) { text-decoration: underline; }
+
+.assistant :global(ul),
+.assistant :global(ol) {
+  margin: 0.32em 0 0.48em;
+  padding-left: 1.18em;
+}
+
+.assistant :global(li) {
+  margin: 0.08em 0;
+  padding-left: 0.04em;
+}
+
+.assistant :global(li > p) {
+  margin: 0;
+}
+
+.assistant :global(blockquote) {
+  margin: 0.36em 0;
+  padding: 3px 9px;
+  border-left: 2px solid #e5e5e5;
+  color: #666;
+}
+
+.assistant :global(hr) {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 0.58em 0;
+}
+
+.assistant :global(table) {
+  border-collapse: collapse;
+  margin: 0.42em 0;
+  font-size: 13px;
+  width: 100%;
+}
+
+.assistant :global(th),
+.assistant :global(td) {
+  border: 1px solid #e5e5e5;
+  padding: 4px 7px;
+  text-align: left;
+}
+
+.assistant :global(th) {
+  background: #fafafa;
+  font-weight: 600;
+}
+
+.assistant :global(code:not(.hljs)) {
+  font-size: 0.9em;
+  background: #f5f5f5;
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: #d63384;
+  word-break: break-word;
+}
+
+.assistant :global(pre.assistant-pre) {
+  margin: 0.5em 0 0.6em;
+  padding: 0;
+  background: transparent;
+  border: 1px solid #e8edf2;
+  border-radius: 8px;
+  overflow-x: auto;
+  line-height: 1.48;
+}
+
+.assistant :global(pre.assistant-pre code.hljs) {
+  display: block;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1.48;
+  word-break: normal;
+  tab-size: 2;
+}
+
+.assistant :global(img) {
+  max-width: 100%;
+  border-radius: 8px;
+  margin: 0.42em 0;
+}
+
+@media (min-width: 769px) {
+  .assistantRow {
+    max-width: 66.6667%;
+    box-sizing: border-box;
+  }
+}
+
+@media (max-width: 768px) {
+  .chat {
+    padding: 10px 12px 8px;
+  }
+
+  .msg {
+    padding: 11px 12px;
+    font-size: 16px;
+  }
+
+  .userRow {
+    max-width: 88%;
+  }
+
+  .user {
+    max-width: 100%;
+  }
+
+  .assistantAvatarSpacer,
+  .assistantAvatarSlot {
+    width: 28px;
+  }
+
+  .assistantAvatar {
+    width: 28px;
+    height: 28px;
+    margin-top: 10px;
+  }
+
+  .userAvatar {
+    width: 28px;
+    height: 28px;
+    margin-top: 10px;
+  }
+
+  .assistantToolbar {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 480px) {
+  .userRow {
+    max-width: 92%;
+  }
+}
--- a/frontend/src/components/chat/MessageList.tsx
+++ b/frontend/src/components/chat/MessageList.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useRef } from "react";
+import { useChatContext } from "../../context/ChatContext";
+import type { MessageRole } from "../../types/message";
+import { MessageBubble } from "./MessageBubble";
+import styles from "./MessageList.module.css";
+
+const NEAR_BOTTOM_THRESHOLD = 96;
+
+function isNearBottom(el: HTMLElement): boolean {
+	return el.scrollHeight - el.scrollTop - el.clientHeight <= NEAR_BOTTOM_THRESHOLD;
+}
+
+function scrollToBottom(el: HTMLElement): void {
+	el.scrollTop = el.scrollHeight;
+}
+
+function isAgentSideRole(role: MessageRole): boolean {
+	return role === "assistant" || role === "thinking" || role === "tool_call" || role === "bash";
+}
+
+export function MessageList() {
+	const { messages, toolsExpanded } = useChatContext();
+	const chatRef = useRef<HTMLDivElement>(null);
+	const stickToBottomRef = useRef(true);
+	const prevMessageCountRef = useRef(0);
+
+	useEffect(() => {
+		const el = chatRef.current;
+		if (!el) return;
+
+		const onScroll = () => {
+			stickToBottomRef.current = isNearBottom(el);
+		};
+
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => el.removeEventListener("scroll", onScroll);
+	}, []);
+
+	useEffect(() => {
+		const el = chatRef.current;
+		if (!el) return;
+
+		const prevCount = prevMessageCountRef.current;
+		const messageCount = messages.length;
+		prevMessageCountRef.current = messageCount;
+
+		const lastMessage = messages[messageCount - 1];
+		const userJustSent = messageCount > prevCount && lastMessage?.role === "user";
+
+		if (userJustSent || prevCount === 0) {
+			stickToBottomRef.current = true;
+		}
+
+		if (!stickToBottomRef.current) return;
+
+		requestAnimationFrame(() => {
+			if (chatRef.current) scrollToBottom(chatRef.current);
+		});
+	}, [messages]);
+
+	if (messages.length === 0) {
+		return (
+			<div className={styles.chat} ref={chatRef}>
+				<div className={styles.empty}>
+					<div className={styles.emptyIcon}>
+						<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+							<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+						</svg>
+					</div>
+					<p>发送一条消息开始对话</p>
+					<p className={styles.emptyHint}>按 Enter 发送 · Shift+Enter 换行</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.chat} ref={chatRef}>
+			{messages.map((msg, index) => {
+				const prev = messages[index - 1];
+				const prevIsAgentSide = prev ? isAgentSideRole(prev.role) : false;
+				const isAgentSide = isAgentSideRole(msg.role);
+				const agentGutter = isAgentSide ? (prevIsAgentSide ? "spacer" : "avatar") : "none";
+
+				return (
+					<MessageBubble
+						key={msg.id}
+						message={msg}
+						agentGutter={agentGutter}
+						toolsExpanded={toolsExpanded}
+					/>
+				);
+			})}
+		</div>
+	);
+}
--- a/frontend/src/components/chat/PendingQueueBar.module.css
+++ b/frontend/src/components/chat/PendingQueueBar.module.css
@@ -0,0 +1,30 @@
+.pendingBar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--toolbar-border, #e8ecf0);
+  background: var(--surface-muted, #f3f4f6);
+  font-size: 12px;
+  color: var(--text-secondary, #4b5563);
+}
+
+.queueGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.queueLabel {
+  font-weight: 600;
+  color: var(--text-primary, #111827);
+}
+
+.queueItem {
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
--- a/frontend/src/components/chat/PendingQueueBar.tsx
+++ b/frontend/src/components/chat/PendingQueueBar.tsx
@@ -0,0 +1,35 @@
+import styles from "./PendingQueueBar.module.css";
+
+interface PendingQueueBarProps {
+	steering: string[];
+	followUp: string[];
+}
+
+export function PendingQueueBar({ steering, followUp }: PendingQueueBarProps) {
+	if (steering.length === 0 && followUp.length === 0) return null;
+
+	return (
+		<div className={styles.pendingBar}>
+			{steering.length > 0 ? (
+				<div className={styles.queueGroup}>
+					<span className={styles.queueLabel}>Steering</span>
+					{steering.map((item, i) => (
+						<div key={`steer-${i}`} className={styles.queueItem}>
+							{item}
+						</div>
+					))}
+				</div>
+			) : null}
+			{followUp.length > 0 ? (
+				<div className={styles.queueGroup}>
+					<span className={styles.queueLabel}>Follow-up</span>
+					{followUp.map((item, i) => (
+						<div key={`follow-${i}`} className={styles.queueItem}>
+							{item}
+						</div>
+					))}
+				</div>
+			) : null}
+		</div>
+	);
+}
--- a/frontend/src/components/chat/RunStatusBar.module.css
+++ b/frontend/src/components/chat/RunStatusBar.module.css
@@ -0,0 +1,47 @@
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--toolbar-border, #e8ecf0);
+  background: var(--toolbar-bg, #f8fafc);
+  font-size: 12px;
+  color: var(--text-secondary, #4b5563);
+}
+
+.statusText {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #6366f1;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.cancelBtn {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.cancelBtn:hover {
+  background: #f9fafb;
+}
+
+.retryMeta {
+  color: var(--text-tertiary, #9ca3af);
+}
--- a/frontend/src/components/chat/RunStatusBar.tsx
+++ b/frontend/src/components/chat/RunStatusBar.tsx
@@ -0,0 +1,56 @@
+import type { RetryState } from "../../types/events";
+import styles from "./RunStatusBar.module.css";
+
+interface RunStatusBarProps {
+	isStreaming: boolean;
+	isCompacting: boolean;
+	retryState: RetryState | null;
+	onAbort: () => void;
+	onAbortRetry: () => void;
+}
+
+export function RunStatusBar({
+	isStreaming,
+	isCompacting,
+	retryState,
+	onAbort,
+	onAbortRetry,
+}: RunStatusBarProps) {
+	const retryActive = retryState?.active;
+	if (!isStreaming && !isCompacting && !retryActive) return null;
+
+	let label = "";
+	if (retryActive) {
+		const attempt = retryState?.attempt ?? 1;
+		const max = retryState?.maxAttempts ?? attempt;
+		label = `自动重试中 (${attempt}/${max})`;
+	} else if (isCompacting) {
+		label = "整理上下文中…";
+	} else {
+		label = "生成中…";
+	}
+
+	return (
+		<div className={styles.bar}>
+			<div className={styles.statusText}>
+				<span className={styles.dot} aria-hidden="true" />
+				<span>{label}</span>
+				{retryActive && retryState?.errorMessage ? (
+					<span className={styles.retryMeta}>{retryState.errorMessage.slice(0, 80)}</span>
+				) : null}
+			</div>
+			<div className={styles.actions}>
+				{retryActive ? (
+					<button type="button" className={styles.cancelBtn} onClick={onAbortRetry}>
+						取消重试
+					</button>
+				) : null}
+				{isStreaming || isCompacting ? (
+					<button type="button" className={styles.cancelBtn} onClick={onAbort}>
+						中止
+					</button>
+				) : null}
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/chat/SessionContextBar.module.css
+++ b/frontend/src/components/chat/SessionContextBar.module.css
@@ -0,0 +1,45 @@
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ctxChip {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: #1e40af;
+  background: rgba(37, 99, 235, 0.08);
+  border: 1px solid rgba(37, 99, 235, 0.12);
+}
+
+.ctxWarn {
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.18);
+}
+
+.ctxDanger {
+  color: #b91c1c;
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.16);
+}
+
+@media (max-width: 768px) {
+  .bar {
+    justify-content: flex-start;
+  }
+
+  .ctxChip {
+    height: 22px;
+  }
+}
--- a/frontend/src/components/chat/SessionContextBar.tsx
+++ b/frontend/src/components/chat/SessionContextBar.tsx
@@ -0,0 +1,42 @@
+import { useChatContext } from "../../context/ChatContext";
+import { formatFooterTokens } from "../../utils/format";
+import styles from "./SessionContextBar.module.css";
+
+export function SessionContextBar() {
+	const { sessionState, isStreaming } = useChatContext();
+	const data = sessionState;
+
+	if (!data || data.error || !data.stats || !data.model) {
+		return null;
+	}
+
+	const liveStreaming = isStreaming || data.isStreaming;
+	if (liveStreaming || data.isCompacting) {
+		return null;
+	}
+
+	const cx = data.stats.contextUsage;
+	const cw = cx?.contextWindow ?? data.model.contextWindow ?? 0;
+	if (!cw) return null;
+
+	const pctRaw = cx?.percent;
+	const pctStr = pctRaw != null ? Number(pctRaw).toFixed(1) : "?";
+	const pctNum = pctRaw != null ? Number(pctRaw) : null;
+	const autoInd = data.autoCompactionEnabled ? " auto" : "";
+	const ctxTxt =
+		pctStr === "?"
+			? `?/${formatFooterTokens(cw)}${autoInd}`
+			: `${pctStr}%/${formatFooterTokens(cw)}${autoInd}`;
+
+	let ctxClass = styles.ctxChip;
+	if (pctNum != null) {
+		if (pctNum > 90) ctxClass = `${styles.ctxChip} ${styles.ctxDanger}`;
+		else if (pctNum > 70) ctxClass = `${styles.ctxChip} ${styles.ctxWarn}`;
+	}
+
+	return (
+		<div className={styles.bar}>
+			<span className={ctxClass} title="上下文占用">{ctxTxt}</span>
+		</div>
+	);
+}
--- a/frontend/src/components/chat/SlashCommandMenu.module.css
+++ b/frontend/src/components/chat/SlashCommandMenu.module.css
@@ -0,0 +1,67 @@
+.menu {
+  max-width: 720px;
+  margin: 0 auto 8px;
+}
+
+.list {
+  max-height: 240px;
+  overflow-y: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.item {
+  display: grid;
+  grid-template-columns: minmax(120px, auto) 1fr auto;
+  gap: 8px 12px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-bottom: 1px solid #f3f4f6;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.item:last-child {
+  border-bottom: none;
+}
+
+.item:hover,
+.itemActive {
+  background: #eff6ff;
+}
+
+.name {
+  color: #1d4ed8;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.description {
+  color: #64748b;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source {
+  color: #94a3b8;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .item {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .source {
+    justify-self: start;
+  }
+}
--- a/frontend/src/components/chat/SlashCommandMenu.tsx
+++ b/frontend/src/components/chat/SlashCommandMenu.tsx
@@ -0,0 +1,49 @@
+import { useEffect, useRef } from "react";
+import type { SlashCommand } from "../../types/commands";
+import { slashCommandSourceLabel } from "../../utils/slashCommands";
+import styles from "./SlashCommandMenu.module.css";
+
+interface SlashCommandMenuProps {
+	commands: SlashCommand[];
+	selectedIndex: number;
+	onSelect: (command: SlashCommand) => void;
+}
+
+export function SlashCommandMenu({ commands, selectedIndex, onSelect }: SlashCommandMenuProps) {
+	const listRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		const item = list.children[selectedIndex] as HTMLElement | undefined;
+		item?.scrollIntoView({ block: "nearest" });
+	}, [selectedIndex, commands.length]);
+
+	if (!commands.length) return null;
+
+	return (
+		<div className={styles.menu} role="listbox" aria-label="斜杠命令">
+			<div ref={listRef} className={styles.list}>
+				{commands.map((command, index) => (
+					<button
+						key={command.name}
+						type="button"
+						className={`${styles.item} ${index === selectedIndex ? styles.itemActive : ""}`}
+						role="option"
+						aria-selected={index === selectedIndex}
+						onMouseDown={(e) => {
+							e.preventDefault();
+							onSelect(command);
+						}}
+					>
+						<span className={styles.name}>/{command.name}</span>
+						{command.description ? (
+							<span className={styles.description}>{command.description}</span>
+						) : null}
+						<span className={styles.source}>{slashCommandSourceLabel(command.source)}</span>
+					</button>
+				))}
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/chat/ThinkingBlock.module.css
+++ b/frontend/src/components/chat/ThinkingBlock.module.css
@@ -0,0 +1,80 @@
+.block {
+  margin: 0;
+}
+
+.summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  user-select: none;
+  font-weight: 500;
+  color: #7c6a9a;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 5px solid #a894c6;
+  border-top: 3.5px solid transparent;
+  border-bottom: 3.5px solid transparent;
+  flex-shrink: 0;
+  transform: rotate(0deg);
+  transition: transform 0.15s ease;
+}
+
+.block[open] > .summary::before {
+  transform: rotate(90deg);
+}
+
+.summaryLabel {
+  flex-shrink: 0;
+  font-size: inherit;
+  letter-spacing: 0.02em;
+}
+
+.summaryText {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: italic;
+  color: #8b7aa8;
+}
+
+.detail {
+  margin: 0;
+  padding: 6px 10px 8px;
+  border-top: 1px solid #ece6f5;
+}
+
+.body {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: inherit;
+  line-height: inherit;
+  font-style: italic;
+  color: #6f5f8d;
+}
+
+.streaming::after {
+  content: "▊";
+  animation: blink 0.8s step-end infinite;
+  color: #8b6fd4;
+  margin-left: 1px;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
--- a/frontend/src/components/chat/ThinkingBlock.tsx
+++ b/frontend/src/components/chat/ThinkingBlock.tsx
@@ -0,0 +1,23 @@
+import { deriveThinkingSummary } from "../../utils/toolCall";
+import styles from "./ThinkingBlock.module.css";
+
+interface ThinkingBlockProps {
+	content: string;
+	streaming?: boolean;
+}
+
+export function ThinkingBlock({ content, streaming }: ThinkingBlockProps) {
+	const summary = deriveThinkingSummary(content);
+
+	return (
+		<details className={styles.block}>
+			<summary className={styles.summary}>
+				<span className={styles.summaryLabel}>思考</span>
+				<span className={styles.summaryText}>{summary}</span>
+			</summary>
+			<div className={styles.detail}>
+				<div className={`${styles.body} ${streaming ? styles.streaming : ""}`}>{content}</div>
+			</div>
+		</details>
+	);
+}
--- a/frontend/src/components/chat/ToolCallBlock.module.css
+++ b/frontend/src/components/chat/ToolCallBlock.module.css
@@ -0,0 +1,70 @@
+.collapsible {
+  margin: 0;
+}
+
+.summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  user-select: none;
+  font-weight: 500;
+  color: #555;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 5px solid #888;
+  border-top: 3.5px solid transparent;
+  border-bottom: 3.5px solid transparent;
+  flex-shrink: 0;
+  transform: rotate(0deg);
+  transition: transform 0.15s ease;
+}
+
+.collapsible[open] > .summary::before {
+  transform: rotate(90deg);
+}
+
+.summaryText {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail {
+  margin: 0;
+  padding: 6px 10px 8px;
+  border-top: 1px solid #eee;
+}
+
+.detailPre {
+  margin: 0;
+  padding: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.detailPre :global(.diffAdd) {
+  color: #15803d;
+}
+
+.detailPre :global(.diffDel) {
+  color: #b91c1c;
+}
+
+.detailPre :global(.diffMeta) {
+  color: #6b7280;
+}
--- a/frontend/src/components/chat/ToolCallBlock.tsx
+++ b/frontend/src/components/chat/ToolCallBlock.tsx
@@ -0,0 +1,31 @@
+import { deriveToolCallSummary, formatToolBodyHtml } from "../../utils/toolCall";
+import styles from "./ToolCallBlock.module.css";
+
+interface ToolCallBlockProps {
+	content: string;
+	forceOpen?: boolean;
+}
+
+export function ToolCallBlock({ content, forceOpen }: ToolCallBlockProps) {
+	const bodyStart = content.indexOf("\n");
+	const body = bodyStart >= 0 ? content.slice(bodyStart + 1) : "";
+	const hasDiff = body.includes("\n+") || body.includes("\n-") || body.startsWith("+") || body.startsWith("-");
+
+	return (
+		<details className={styles.collapsible} open={forceOpen}>
+			<summary className={styles.summary}>
+				<span className={styles.summaryText}>{deriveToolCallSummary(content)}</span>
+			</summary>
+			<div className={styles.detail}>
+				{hasDiff ? (
+					<pre
+						className={styles.detailPre}
+						dangerouslySetInnerHTML={{ __html: formatToolBodyHtml(body || content) }}
+					/>
+				) : (
+					<pre className={styles.detailPre}>{body || content}</pre>
+				)}
+			</div>
+		</details>
+	);
+}
--- a/frontend/src/components/layout/AppLayout.module.css
+++ b/frontend/src/components/layout/AppLayout.module.css
@@ -0,0 +1,32 @@
+.app {
+  display: flex;
+  height: var(--app-height);
+  min-height: 0;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: #fff;
+}
+
+.overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 99;
+}
+
+.overlayOpen {
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .app {
+    height: var(--app-height);
+  }
+}
--- a/frontend/src/components/layout/ChatLayout.tsx
+++ b/frontend/src/components/layout/ChatLayout.tsx
@@ -0,0 +1,22 @@
+import { Outlet } from "react-router-dom";
+import { useChatContext } from "../../context/ChatContext";
+import { Sidebar } from "./Sidebar";
+import layoutStyles from "./AppLayout.module.css";
+
+export function ChatLayout() {
+	const { sidebarOpen, toggleSidebar } = useChatContext();
+
+	return (
+		<div className={layoutStyles.app}>
+			<Sidebar />
+			<main className={layoutStyles.main}>
+				<Outlet />
+			</main>
+			<div
+				className={`${layoutStyles.overlay} ${sidebarOpen ? layoutStyles.overlayOpen : ""}`}
+				onClick={toggleSidebar}
+				role="presentation"
+			/>
+		</div>
+	);
+}
--- a/frontend/src/components/layout/Header.module.css
+++ b/frontend/src/components/layout/Header.module.css
@@ -0,0 +1,273 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 14px 8px;
+  border-bottom: 1px solid var(--header-border);
+  flex-shrink: 0;
+  background: var(--header-bg);
+  backdrop-filter: blur(14px);
+  box-shadow: var(--header-shadow);
+}
+
+.topRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.menuBtn {
+  display: none;
+  width: 34px;
+  height: 34px;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-muted);
+  border: 1px solid var(--toolbar-border);
+  border-radius: 10px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.menuBtn:hover {
+  background: #fff;
+  color: var(--text-primary);
+}
+
+.titleBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.title {
+  margin: 0;
+  min-width: 0;
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.meta {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.topActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.bottomRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--toolbar-border);
+  border-radius: 12px;
+  background: var(--toolbar-bg);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
+}
+
+.controls {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.fieldLabel {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  line-height: 1;
+  padding-left: 2px;
+}
+
+.selectWrap {
+  position: relative;
+  min-width: 0;
+}
+
+.selectWrap::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--text-tertiary);
+  transform: translateY(-35%);
+  pointer-events: none;
+}
+
+.select {
+  appearance: none;
+  height: 30px;
+  min-width: 120px;
+  max-width: 220px;
+  width: 100%;
+  padding: 0 24px 0 10px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 9px;
+  background: #fff;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-weight: 500;
+  outline: none;
+  cursor: pointer;
+}
+
+.selectModel {
+  min-width: 140px;
+  max-width: min(280px, 34vw);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.selectCompact {
+  min-width: 68px;
+  max-width: 88px;
+}
+
+.select:focus {
+  border-color: rgba(37, 99, 235, 0.35);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.select:disabled {
+  color: var(--text-tertiary);
+  background: rgba(248, 250, 252, 0.9);
+  cursor: not-allowed;
+}
+
+.statsWrap {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.statsWrap::before {
+  content: "";
+  width: 1px;
+  align-self: stretch;
+  min-height: 24px;
+  margin-right: 2px;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    rgba(15, 23, 42, 0.08) 18%,
+    rgba(15, 23, 42, 0.08) 82%,
+    transparent 100%
+  );
+  flex-shrink: 0;
+}
+
+.toolsToggleBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: var(--surface-muted);
+  border: 1px solid var(--toolbar-border);
+  border-radius: 9px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.toolsToggleBtn:hover {
+  background: #fff;
+  color: var(--text-primary);
+}
+
+@media (max-width: 768px) {
+  .header {
+    gap: 6px;
+    padding: 8px 10px 7px;
+  }
+
+  .menuBtn {
+    display: flex;
+  }
+
+  .title {
+    font-size: 14px;
+  }
+
+  .bottomRow {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    padding: 6px;
+  }
+
+  .controls {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 72px;
+    gap: 6px;
+    width: 100%;
+  }
+
+  .fieldLabel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .select {
+    height: 32px;
+    min-width: 0;
+    max-width: none;
+    font-size: 12px;
+  }
+
+  .selectModel,
+  .selectCompact {
+    min-width: 0;
+    max-width: none;
+  }
+
+  .statsWrap::before {
+    display: none;
+  }
+}
+
+@media (max-width: 420px) {
+  .title {
+    font-size: 13px;
+  }
+}
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -0,0 +1,166 @@
+import { useChatContext } from "../../context/ChatContext";
+import { modelKey, modelLabel, shortModelLabel } from "../../utils/sessionTitle";
+import { ExportMenu } from "../chat/ExportMenu";
+import { SessionContextBar } from "../chat/SessionContextBar";
+import styles from "./Header.module.css";
+
+function ModelControls({
+	availableModels,
+	currentModelKey,
+	currentModel,
+	thinkingLevel,
+	availableThinkingLevels,
+	isStreaming,
+	isApplyingModelSettings,
+	applyModelSelection,
+	applyThinkingSelection,
+}: {
+	availableModels: ReturnType<typeof useChatContext>["availableModels"];
+	currentModelKey: string;
+	currentModel: ReturnType<typeof useChatContext>["availableModels"][number] | undefined;
+	thinkingLevel: string;
+	availableThinkingLevels: ReturnType<typeof useChatContext>["availableThinkingLevels"];
+	isStreaming: boolean;
+	isApplyingModelSettings: boolean;
+	applyModelSelection: (key: string) => Promise<void>;
+	applyThinkingSelection: (level: string) => Promise<void>;
+}) {
+	return (
+		<div className={styles.controls}>
+			<label className={styles.field}>
+				<span className={styles.fieldLabel}>模型</span>
+				<div className={styles.selectWrap}>
+					<select
+						className={`${styles.select} ${styles.selectModel}`}
+						aria-label="选择模型"
+						title={currentModel ? modelLabel(currentModel) : "选择模型"}
+						value={currentModelKey}
+						disabled={isStreaming || isApplyingModelSettings}
+						onChange={(e) => void applyModelSelection(e.target.value)}
+					>
+						{availableModels.length === 0 ? (
+							<option value="">加载中…</option>
+						) : (
+							availableModels.map((m) => (
+								<option key={modelKey(m)} value={modelKey(m)} title={modelLabel(m)}>
+									{shortModelLabel(m)}
+								</option>
+							))
+						)}
+					</select>
+				</div>
+			</label>
+
+			<label className={styles.field}>
+				<span className={styles.fieldLabel}>推理</span>
+				<div className={styles.selectWrap}>
+					<select
+						className={`${styles.select} ${styles.selectCompact}`}
+						aria-label="选择推理强度"
+						title="推理强度"
+						value={
+							availableThinkingLevels.includes(thinkingLevel as typeof availableThinkingLevels[number])
+								? thinkingLevel
+								: availableThinkingLevels[0] || "off"
+						}
+						disabled={
+							!availableThinkingLevels.length ||
+							availableThinkingLevels.length === 1 ||
+							isStreaming ||
+							isApplyingModelSettings
+						}
+						onChange={(e) => void applyThinkingSelection(e.target.value)}
+					>
+						{availableThinkingLevels.map((level) => (
+							<option key={level} value={level}>
+								{level}
+							</option>
+						))}
+					</select>
+				</div>
+			</label>
+		</div>
+	);
+}
+
+function ToolsToggleButton({
+	expanded,
+	onClick,
+}: {
+	expanded: boolean;
+	onClick: () => void;
+}) {
+	return (
+		<button
+			type="button"
+			className={styles.toolsToggleBtn}
+			onClick={onClick}
+			title={expanded ? "折叠全部 tool (Ctrl+O)" : "展开全部 tool (Ctrl+O)"}
+			aria-label={expanded ? "折叠全部 tool" : "展开全部 tool"}
+		>
+			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+				<polyline points="6 9 12 15 18 9" />
+			</svg>
+		</button>
+	);
+}
+
+export function Header() {
+	const {
+		headerTitle,
+		headerMeta,
+		toggleSidebar,
+		toggleToolsExpanded,
+		toolsExpanded,
+		availableModels,
+		currentModelKey,
+		thinkingLevel,
+		availableThinkingLevels,
+		isStreaming,
+		isApplyingModelSettings,
+		applyModelSelection,
+		applyThinkingSelection,
+	} = useChatContext();
+
+	const currentModel = availableModels.find((m) => modelKey(m) === currentModelKey);
+	const controlProps = {
+		availableModels,
+		currentModelKey,
+		currentModel,
+		thinkingLevel,
+		availableThinkingLevels,
+		isStreaming,
+		isApplyingModelSettings,
+		applyModelSelection,
+		applyThinkingSelection,
+	};
+
+	return (
+		<header className={styles.header}>
+			<div className={styles.topRow}>
+				<button type="button" className={styles.menuBtn} onClick={toggleSidebar} aria-label="切换菜单">
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<path d="M3 12h18M3 6h18M3 18h18" />
+					</svg>
+				</button>
+				<div className={styles.titleBlock}>
+					<h1 className={styles.title} title={headerTitle}>
+						{headerTitle}
+					</h1>
+					{headerMeta ? <span className={styles.meta}>{headerMeta}</span> : null}
+				</div>
+				<div className={styles.topActions}>
+					<ToolsToggleButton expanded={toolsExpanded} onClick={toggleToolsExpanded} />
+					<ExportMenu compact />
+				</div>
+			</div>
+
+			<div className={styles.bottomRow}>
+				<ModelControls {...controlProps} />
+				<div className={styles.statsWrap}>
+					<SessionContextBar />
+				</div>
+			</div>
+		</header>
+	);
+}
--- a/frontend/src/components/layout/Sidebar.module.css
+++ b/frontend/src/components/layout/Sidebar.module.css
@@ -0,0 +1,170 @@
+.sidebar {
+  width: 236px;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(10px);
+  border-right: 1px solid #e5e5e5;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  z-index: 100;
+  transition: transform 0.25s ease;
+}
+
+.header {
+  padding: 18px 16px 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.logo {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: 17px;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: -0.3px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.sectionRefresh {
+  background: none;
+  border: none;
+  color: #bbb;
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 4px;
+  display: flex;
+  transition: color 0.15s, background 0.15s;
+}
+
+.sectionRefresh:hover {
+  color: #666;
+  background: #f0f0f0;
+}
+
+.actions {
+  padding: 8px 10px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.actionBtn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 10px;
+  color: #555;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  text-decoration: none;
+}
+
+.actionBtn:hover {
+  background: #f0f0f0;
+  color: #1a1a1a;
+}
+
+.actionBtn svg {
+  flex-shrink: 0;
+}
+
+.status {
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.statusRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #888;
+}
+
+.statusDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.connected {
+  background: #22c55e;
+}
+
+.streaming {
+  background: #f59e0b;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.disconnected {
+  background: #ef4444;
+}
+
+.statusModel {
+  font-size: 10px;
+  color: #bbb;
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.open {
+  transform: translateX(0);
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    transform: translateX(-100%);
+  }
+
+  .open {
+    transform: translateX(0);
+  }
+}
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,63 @@
+import { Link } from "react-router-dom";
+import { useChatContext } from "../../context/ChatContext";
+import { SessionList } from "../session/SessionList";
+import styles from "./Sidebar.module.css";
+
+export function Sidebar() {
+	const { connected, isStreaming, sidebarOpen, loadSessions, newSession } = useChatContext();
+
+	const statusDotClass = connected
+		? isStreaming
+			? `${styles.statusDot} ${styles.streaming}`
+			: `${styles.statusDot} ${styles.connected}`
+		: `${styles.statusDot} ${styles.disconnected}`;
+
+	const statusText = !connected ? "未连接" : isStreaming ? "输入中..." : "就绪";
+
+	return (
+		<aside className={`${styles.sidebar} ${sidebarOpen ? styles.open : ""}`}>
+			<div className={styles.header}>
+				<div className={styles.brand}>
+					<img className={styles.logo} src="/logo.png" width={36} height={36} alt="" decoding="async" />
+					<h2 className={styles.title}>萌小芽</h2>
+				</div>
+			</div>
+
+			<div className={styles.section}>
+				<div className={styles.sectionHeader}>
+					<span>历史会话</span>
+					<button type="button" className={styles.sectionRefresh} onClick={() => void loadSessions()} title="刷新">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+							<path d="M1 4v6h6M23 20v-6h-6" />
+							<path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
+						</svg>
+					</button>
+				</div>
+				<SessionList />
+			</div>
+
+			<div className={styles.actions}>
+				<button type="button" className={styles.actionBtn} onClick={newSession}>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<path d="M12 5v14M5 12h14" />
+					</svg>
+					新会话
+				</button>
+				<Link to="/settings" className={styles.actionBtn}>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<circle cx="12" cy="12" r="3" />
+						<path d="M19.4 15a1.7 1.7 0 00.3 1.9l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.9-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.9.3l-.1.1A2 2 0 014.2 17l.1-.1A1.7 1.7 0 004.6 15a1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.9L4.2 7A2 2 0 017 4.2l.1.1A1.7 1.7 0 009 4.6a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.9-.3l.1-.1A2 2 0 0119.8 7l-.1.1a1.7 1.7 0 00-.3 1.9 1.7 1.7 0 001.5 1h.1a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z" />
+					</svg>
+					设置
+				</Link>
+			</div>
+
+			<div className={styles.status}>
+				<div className={styles.statusRow}>
+					<span className={statusDotClass} />
+					<span>{statusText}</span>
+				</div>
+			</div>
+		</aside>
+	);
+}
--- a/frontend/src/components/pwa/PwaUpdatePrompt.module.css
+++ b/frontend/src/components/pwa/PwaUpdatePrompt.module.css
@@ -0,0 +1,74 @@
+.bar {
+  position: fixed;
+  left: 50%;
+  bottom: calc(16px + env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: min(92vw, 420px);
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
+  backdrop-filter: blur(10px);
+}
+
+.text {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: #374151;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.primary,
+.secondary {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.primary {
+  color: #fff;
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.primary:hover {
+  background: #1d4ed8;
+}
+
+.secondary {
+  color: #4b5563;
+  background: #fff;
+  border-color: #d1d5db;
+}
+
+.secondary:hover {
+  background: #f3f4f6;
+}
+
+@media (max-width: 480px) {
+  .bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .actions {
+    justify-content: flex-end;
+  }
+}
--- a/frontend/src/components/pwa/PwaUpdatePrompt.tsx
+++ b/frontend/src/components/pwa/PwaUpdatePrompt.tsx
@@ -0,0 +1,39 @@
+import { useRegisterSW } from "virtual:pwa-register/react";
+import styles from "./PwaUpdatePrompt.module.css";
+
+export function PwaUpdatePrompt() {
+	const {
+		needRefresh: [needRefresh, setNeedRefresh],
+		updateServiceWorker,
+	} = useRegisterSW({
+		onRegistered(registration) {
+			if (!registration) return;
+			window.setInterval(() => {
+				void registration.update();
+			}, 60 * 60 * 1000);
+		},
+		onRegisterError(error) {
+			console.error("[PWA] service worker registration failed:", error);
+		},
+	});
+
+	if (!needRefresh) return null;
+
+	return (
+		<div className={styles.bar} role="status" aria-live="polite">
+			<div className={styles.text}>发现新版本，更新后即可使用最新功能。</div>
+			<div className={styles.actions}>
+				<button type="button" className={styles.secondary} onClick={() => setNeedRefresh(false)}>
+					稍后
+				</button>
+				<button
+					type="button"
+					className={styles.primary}
+					onClick={() => void updateServiceWorker(true)}
+				>
+					立即更新
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/pwa/SplashScreen.module.css
+++ b/frontend/src/components/pwa/SplashScreen.module.css
@@ -0,0 +1,186 @@
+.splash {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.12), transparent 34%),
+    radial-gradient(circle at 82% 88%, rgba(34, 197, 94, 0.08), transparent 32%),
+    linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%);
+  opacity: 1;
+  transition: opacity 0.42s ease;
+}
+
+.splashExiting {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bgPulse {
+  position: absolute;
+  inset: -20%;
+  background:
+    radial-gradient(circle at 50% 45%, rgba(37, 99, 235, 0.14), transparent 42%),
+    radial-gradient(circle at 50% 55%, rgba(34, 197, 94, 0.1), transparent 48%);
+  animation: bgPulse 3.6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.bgGlow {
+  position: absolute;
+  width: min(72vw, 420px);
+  height: min(72vw, 420px);
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 68%);
+  filter: blur(8px);
+  animation: glowDrift 4.8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  padding: 24px;
+}
+
+.logoWrap {
+  position: relative;
+  width: 132px;
+  height: 132px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid rgba(37, 99, 235, 0.28);
+  opacity: 0;
+  animation: ringExpand 2.4s ease-out infinite;
+}
+
+.ring2 {
+  animation-delay: 0.8s;
+}
+
+.ring3 {
+  animation-delay: 1.6s;
+}
+
+.logo {
+  width: 96px;
+  height: 96px;
+  object-fit: contain;
+  border-radius: 22px;
+  box-shadow:
+    0 10px 28px rgba(37, 99, 235, 0.18),
+    0 2px 8px rgba(15, 23, 42, 0.08);
+  animation: logoFloat 2.8s ease-in-out infinite;
+}
+
+.titleBlock {
+  text-align: center;
+}
+
+.title {
+  font-size: clamp(28px, 6vw, 36px);
+  font-weight: 700;
+  letter-spacing: -0.4px;
+  color: #111827;
+  line-height: 1.15;
+}
+
+.subtitle {
+  margin-top: 6px;
+  font-size: 14px;
+  color: #6b7280;
+  letter-spacing: 0.2px;
+}
+
+.dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+  animation: dotPulse 1.2s ease-in-out infinite;
+}
+
+.dot2 {
+  animation-delay: 0.2s;
+}
+
+.dot3 {
+  animation-delay: 0.4s;
+}
+
+@keyframes bgPulse {
+  0%, 100% { transform: scale(1); opacity: 0.72; }
+  50% { transform: scale(1.06); opacity: 1; }
+}
+
+@keyframes glowDrift {
+  0%, 100% { transform: translateY(0) scale(1); }
+  50% { transform: translateY(-10px) scale(1.04); }
+}
+
+@keyframes logoFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+@keyframes ringExpand {
+  0% {
+    transform: scale(0.72);
+    opacity: 0.65;
+  }
+  70% {
+    opacity: 0.12;
+  }
+  100% {
+    transform: scale(1.45);
+    opacity: 0;
+  }
+}
+
+@keyframes dotPulse {
+  0%, 80%, 100% {
+    transform: scale(0.72);
+    opacity: 0.45;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bgPulse,
+  .bgGlow,
+  .logo,
+  .ring,
+  .dot {
+    animation: none !important;
+  }
+
+  .ring {
+    opacity: 0.2;
+  }
+}
--- a/frontend/src/components/pwa/SplashScreen.tsx
+++ b/frontend/src/components/pwa/SplashScreen.tsx
@@ -0,0 +1,31 @@
+import styles from "./SplashScreen.module.css";
+
+interface SplashScreenProps {
+	exiting?: boolean;
+}
+
+export function SplashScreen({ exiting = false }: SplashScreenProps) {
+	return (
+		<div className={`${styles.splash} ${exiting ? styles.splashExiting : ""}`} aria-hidden={exiting}>
+			<div className={styles.bgPulse} />
+			<div className={styles.bgGlow} />
+			<div className={styles.content}>
+				<div className={styles.logoWrap}>
+					<span className={styles.ring} />
+					<span className={`${styles.ring} ${styles.ring2}`} />
+					<span className={`${styles.ring} ${styles.ring3}`} />
+					<img className={styles.logo} src="/logo192.png" width={96} height={96} alt="" decoding="async" />
+				</div>
+				<div className={styles.titleBlock}>
+					<h1 className={styles.title}>萌小芽</h1>
+					<p className={styles.subtitle}>加载中</p>
+				</div>
+				<div className={styles.dots} aria-label="加载中">
+					<span className={styles.dot} />
+					<span className={`${styles.dot} ${styles.dot2}`} />
+					<span className={`${styles.dot} ${styles.dot3}`} />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/session/SessionList.module.css
+++ b/frontend/src/components/session/SessionList.module.css
@@ -0,0 +1,149 @@
+.list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px 6px;
+}
+
+.list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.list::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 2px;
+}
+
+.empty {
+  padding: 16px 10px;
+  color: #bbb;
+  font-size: 12px;
+  text-align: center;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-radius: 10px;
+  transition: background 0.15s;
+  margin-bottom: 3px;
+}
+
+.item:hover {
+  background: #f5f5f5;
+}
+
+.active {
+  background: #f0f7ff;
+}
+
+.pinned {
+  background: #fffbeb;
+}
+
+.pinned.active {
+  background: #fef3c7;
+}
+
+.main {
+  min-width: 0;
+  text-align: left;
+  padding: 8px 2px 8px 10px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+.name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1a1a1a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.titleRow .name {
+  flex: 1;
+  min-width: 0;
+}
+
+.renameInput {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1a1a1a;
+  padding: 2px 6px;
+  border: 1px solid #2563eb;
+  border-radius: 4px;
+  background: #fff;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+.meta {
+  font-size: 10px;
+  color: #bbb;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+  margin-top: 4px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-right: 2px;
+  flex-shrink: 0;
+}
+
+.pinBtn,
+.renameBtn,
+.deleteBtn {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: #bbb;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pinBtnActive {
+  color: #ca8a04;
+}
+
+.pinBtn:hover,
+.pinBtnActive:hover {
+  color: #ca8a04;
+  background: #fef9c3;
+}
+
+.renameBtn:hover {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.deleteBtn:hover {
+  color: #dc2626;
+  background: #fee2e2;
+}
--- a/frontend/src/components/session/SessionList.tsx
+++ b/frontend/src/components/session/SessionList.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { useChatContext } from "../../context/ChatContext";
+import { formatTimeAgo } from "../../utils/format";
+import { formatSessionTitle } from "../../utils/sessionTitle";
+import styles from "./SessionList.module.css";
+
+export function SessionList() {
+	const { sessions, activeSessionPath, loadSession, deleteSession, renameSession, toggleSessionPin } =
+		useChatContext();
+	const [editingPath, setEditingPath] = useState<string | null>(null);
+	const [editingValue, setEditingValue] = useState("");
+
+	const startEditing = (path: string, currentName: string) => {
+		setEditingPath(path);
+		setEditingValue(currentName);
+	};
+
+	const confirmRename = (path: string) => {
+		const trimmed = editingValue.trim();
+		if (trimmed) {
+			void renameSession(path, trimmed);
+		}
+		setEditingPath(null);
+		setEditingValue("");
+	};
+
+	const cancelEditing = () => {
+		setEditingPath(null);
+		setEditingValue("");
+	};
+
+	if (!sessions.length) {
+		return <div className={styles.empty}>暂无历史会话</div>;
+	}
+
+	return (
+		<div className={styles.list}>
+			{sessions.map((s) => {
+				const isActive = activeSessionPath === s.path;
+				const isPinned = Boolean(s.pinned);
+				const title = formatSessionTitle(s.name);
+				const isEditing = editingPath === s.path;
+				return (
+					<div
+						key={s.path}
+						className={`${styles.item} ${isActive ? styles.active : ""} ${isPinned ? styles.pinned : ""}`}
+					>
+						<button type="button" className={styles.main} onClick={() => void loadSession(s.path)}>
+							<div className={styles.titleRow}>
+								{isEditing ? (
+									<input
+										className={styles.renameInput}
+										value={editingValue}
+										onChange={(e) => setEditingValue(e.target.value)}
+										onKeyDown={(e) => {
+											if (e.key === "Enter") {
+												e.preventDefault();
+												confirmRename(s.path);
+											} else if (e.key === "Escape") {
+												cancelEditing();
+											}
+										}}
+										onBlur={() => confirmRename(s.path)}
+										onClick={(e) => e.stopPropagation()}
+										autoFocus
+									/>
+								) : (
+									<div className={styles.name}>{title}</div>
+								)}
+							</div>
+							<div className={styles.meta}>
+								{s.messageCount ?? 0} 条 · {formatTimeAgo(s.modified || s.created)}
+							</div>
+						</button>
+						<div className={styles.actions}>
+							<button
+								type="button"
+								className={`${styles.pinBtn} ${isPinned ? styles.pinBtnActive : ""}`}
+								title={isPinned ? "取消置顶" : "置顶会话"}
+								aria-label={isPinned ? `取消置顶 ${title}` : `置顶 ${title}`}
+								onClick={(e) => {
+									e.stopPropagation();
+									void toggleSessionPin(s.path, !isPinned);
+								}}
+							>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+									<path d="M12 17v5" />
+									<path d="M9 3h6l1 7h4l-5 6v4H9v-4L4 10h4l1-7z" />
+								</svg>
+							</button>
+							<button
+								type="button"
+								className={styles.renameBtn}
+								title="重命名会话"
+								aria-label={`重命名 ${title}`}
+								onClick={(e) => {
+									e.stopPropagation();
+									if (isEditing) {
+										cancelEditing();
+									} else {
+										startEditing(s.path, s.name || title);
+									}
+								}}
+							>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+									<path d="M12 20h9" />
+									<path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z" />
+								</svg>
+							</button>
+							<button
+								type="button"
+								className={styles.deleteBtn}
+								title="删除会话"
+								aria-label={`删除 ${title}`}
+								onClick={(e) => {
+									e.stopPropagation();
+									void deleteSession(s.path);
+								}}
+							>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+									<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
+								</svg>
+							</button>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
--- a/frontend/src/context/AvatarContext.tsx
+++ b/frontend/src/context/AvatarContext.tsx
@@ -0,0 +1,66 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+	type ReactNode,
+} from "react";
+import * as settingsApi from "../api/settings";
+import type { AvatarSettings } from "../types/events";
+
+interface AvatarContextValue extends AvatarSettings {
+	loaded: boolean;
+	refreshAvatars: () => Promise<void>;
+	updateAvatars: (next: AvatarSettings) => void;
+}
+
+const AvatarContext = createContext<AvatarContextValue | null>(null);
+
+export function AvatarProvider({ children }: { children: ReactNode }) {
+	const [userAvatarUrl, setUserAvatarUrl] = useState("");
+	const [agentAvatarUrl, setAgentAvatarUrl] = useState("");
+	const [loaded, setLoaded] = useState(false);
+
+	const refreshAvatars = useCallback(async () => {
+		try {
+			const data = await settingsApi.fetchAvatars();
+			setUserAvatarUrl(data.userAvatarUrl || "");
+			setAgentAvatarUrl(data.agentAvatarUrl || "");
+		} catch {
+			/* ignore */
+		} finally {
+			setLoaded(true);
+		}
+	}, []);
+
+	const updateAvatars = useCallback((next: AvatarSettings) => {
+		setUserAvatarUrl(next.userAvatarUrl || "");
+		setAgentAvatarUrl(next.agentAvatarUrl || "");
+		setLoaded(true);
+	}, []);
+
+	useEffect(() => {
+		void refreshAvatars();
+	}, [refreshAvatars]);
+
+	const value = useMemo(
+		(): AvatarContextValue => ({
+			userAvatarUrl,
+			agentAvatarUrl,
+			loaded,
+			refreshAvatars,
+			updateAvatars,
+		}),
+		[userAvatarUrl, agentAvatarUrl, loaded, refreshAvatars, updateAvatars],
+	);
+
+	return <AvatarContext.Provider value={value}>{children}</AvatarContext.Provider>;
+}
+
+export function useAvatars(): AvatarContextValue {
+	const ctx = useContext(AvatarContext);
+	if (!ctx) throw new Error("useAvatars must be used within AvatarProvider");
+	return ctx;
+}
--- a/frontend/src/context/BootstrapContext.tsx
+++ b/frontend/src/context/BootstrapContext.tsx
@@ -0,0 +1,89 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type ReactNode,
+} from "react";
+import { useLocation } from "react-router-dom";
+import { SplashScreen } from "../components/pwa/SplashScreen";
+
+const MIN_SPLASH_MS = 400;
+const SKIP_SPLASH_KEY = "sproutclaw-warm-boot";
+
+type BootstrapRoute = "chat" | "settings";
+
+interface BootstrapContextValue {
+	markRouteReady: (route: BootstrapRoute) => void;
+}
+
+const BootstrapContext = createContext<BootstrapContextValue | null>(null);
+
+export function BootstrapProvider({ children }: { children: ReactNode }) {
+	const location = useLocation();
+	const route: BootstrapRoute = location.pathname.startsWith("/settings") ? "settings" : "chat";
+	const [readyRoutes, setReadyRoutes] = useState<Record<BootstrapRoute, boolean>>({
+		chat: false,
+		settings: false,
+	});
+	const [splashVisible, setSplashVisible] = useState(true);
+	const [splashExiting, setSplashExiting] = useState(false);
+	const mountTime = useRef(Date.now());
+
+	const markRouteReady = useCallback((readyRoute: BootstrapRoute) => {
+		setReadyRoutes((prev) => (prev[readyRoute] ? prev : { ...prev, [readyRoute]: true }));
+	}, []);
+
+	useEffect(() => {
+		setReadyRoutes((prev) => ({ ...prev, [route]: false }));
+		setSplashVisible(true);
+		setSplashExiting(false);
+		mountTime.current = Date.now();
+	}, [route]);
+
+	useEffect(() => {
+		if (!readyRoutes[route]) return;
+
+		let warmBoot = false;
+		try {
+			warmBoot = sessionStorage.getItem(SKIP_SPLASH_KEY) === "1";
+			sessionStorage.setItem(SKIP_SPLASH_KEY, "1");
+		} catch {
+			/* ignore */
+		}
+
+		if (warmBoot) {
+			setSplashVisible(false);
+			setSplashExiting(false);
+			return;
+		}
+
+		const elapsed = Date.now() - mountTime.current;
+		const remaining = Math.max(0, MIN_SPLASH_MS - elapsed);
+
+		const timer = window.setTimeout(() => {
+			setSplashExiting(true);
+			window.setTimeout(() => setSplashVisible(false), 420);
+		}, remaining);
+
+		return () => window.clearTimeout(timer);
+	}, [readyRoutes, route]);
+
+	const value = useMemo(() => ({ markRouteReady }), [markRouteReady]);
+
+	return (
+		<BootstrapContext.Provider value={value}>
+			{children}
+			{splashVisible ? <SplashScreen exiting={splashExiting} /> : null}
+		</BootstrapContext.Provider>
+	);
+}
+
+export function useBootstrap(): BootstrapContextValue {
+	const ctx = useContext(BootstrapContext);
+	if (!ctx) throw new Error("useBootstrap must be used within BootstrapProvider");
+	return ctx;
+}
--- a/frontend/src/context/ChatContext.tsx
+++ b/frontend/src/context/ChatContext.tsx
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@mogeko/maple-mono-cn/dist/font/result.css";
+import { App } from "./App";
+import "./styles/global.css";
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
--- a/frontend/src/routes/ChatPage.tsx
+++ b/frontend/src/routes/ChatPage.tsx
@@ -0,0 +1,48 @@
+import { ChatInput } from "../components/chat/ChatInput";
+import { ExtensionDialogModal } from "../components/chat/ExtensionDialogModal";
+import { ExtensionWidgetPanel } from "../components/chat/ExtensionWidgetPanel";
+import { MessageList } from "../components/chat/MessageList";
+import { PendingQueueBar } from "../components/chat/PendingQueueBar";
+import { RunStatusBar } from "../components/chat/RunStatusBar";
+import { Header } from "../components/layout/Header";
+import { useChatContext } from "../context/ChatContext";
+
+export function ChatPage() {
+	const {
+		pendingSteering,
+		pendingFollowUp,
+		isStreaming,
+		isCompacting,
+		retryState,
+		extensionWidgets,
+		extensionDialog,
+		abortStream,
+		abortRetry,
+		respondExtensionDialog,
+		dismissExtensionDialog,
+	} = useChatContext();
+
+	return (
+		<>
+			<Header />
+			<MessageList />
+			<ExtensionWidgetPanel widgets={extensionWidgets} />
+			<PendingQueueBar steering={pendingSteering} followUp={pendingFollowUp} />
+			<RunStatusBar
+				isStreaming={isStreaming}
+				isCompacting={isCompacting}
+				retryState={retryState}
+				onAbort={() => void abortStream()}
+				onAbortRetry={() => void abortRetry()}
+			/>
+			<ChatInput />
+			{extensionDialog ? (
+				<ExtensionDialogModal
+					dialog={extensionDialog}
+					onSubmit={respondExtensionDialog}
+					onDismiss={dismissExtensionDialog}
+				/>
+			) : null}
+		</>
+	);
+}
--- a/frontend/src/routes/SettingsPage.module.css
+++ b/frontend/src/routes/SettingsPage.module.css
@@ -0,0 +1,857 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--app-height);
+  height: var(--app-height);
+  overflow: hidden;
+  background: #fff;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  padding: 0;
+}
+
+.pageHeader {
+  flex-shrink: 0;
+  width: 100%;
+  margin: 0;
+  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid #eef0f3;
+  background: #fafbfc;
+}
+
+.pageTitle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.logo {
+  width: 34px;
+  height: 34px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.pageTitle h1 {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.2;
+}
+
+.pageTitle p {
+  margin-top: 2px;
+  font-size: 12px;
+  color: #8b95a8;
+}
+
+.shell {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.sidebar {
+  flex-shrink: 0;
+  width: 220px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 12px;
+  padding-left: max(12px, env(safe-area-inset-left));
+  background: #f4f6f9;
+  border-right: 1px solid #e5e7eb;
+}
+
+.navBtn {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 11px 14px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #4b5563;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
+  touch-action: manipulation;
+}
+
+.navBtn:hover {
+  background: rgba(255, 255, 255, 0.72);
+  color: #111827;
+}
+
+.navBtnActive {
+  background: #fff;
+  color: #2563eb;
+  border-color: #e5e7eb;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.navBtn:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.45);
+  outline-offset: 2px;
+}
+
+.panes {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 14px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) 14px;
+}
+
+.pane {
+  flex: 1;
+  min-height: 0;
+  display: none;
+  flex-direction: column;
+}
+
+.paneActive {
+  display: flex;
+}
+
+.panel {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.panelHeader {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  row-gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid #eef0f3;
+  background: #fafbfc;
+}
+
+.panelHeader h2 {
+  font-size: 14px;
+  line-height: 1.3;
+  font-weight: 600;
+  color: #111827;
+}
+
+.panelHeader p {
+  margin-top: 3px;
+  font-size: 11px;
+  color: #8b95a8;
+  word-break: break-all;
+}
+
+.primaryBtn,
+.secondaryBtn,
+.linkBtn {
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+}
+
+.linkBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: #374151;
+  background: #fff;
+  border: 1px solid #d1d5db;
+}
+
+.linkBtn:hover {
+  background: #f3f4f6;
+}
+
+.primaryBtn {
+  color: #fff;
+  background: #2563eb;
+  border: 1px solid #2563eb;
+}
+
+.primaryBtn:hover {
+  background: #1d4ed8;
+  border-color: #1d4ed8;
+}
+
+.primaryBtn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.secondaryBtn {
+  color: #374151;
+  background: #fff;
+  border: 1px solid #d1d5db;
+}
+
+.secondaryBtn:hover {
+  background: #f3f4f6;
+}
+
+.textarea {
+  display: block;
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 14px;
+  border: none;
+  outline: none;
+  resize: none;
+  color: #111827;
+  background: #fff;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre;
+  overflow: auto;
+}
+
+.textarea:focus {
+  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.18);
+}
+
+.formBody {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.fieldLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.textInput {
+  width: 100%;
+  height: 38px;
+  padding: 0 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: #fff;
+  color: #111827;
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.textInput:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.fieldHint {
+  margin: 0;
+  font-size: 12px;
+  color: #8b95a8;
+  line-height: 1.5;
+}
+
+.avatarPreviewRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.avatarPreview {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 999px;
+  border: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.previewHint {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.status {
+  flex-shrink: 0;
+  min-height: 30px;
+  padding: 7px 14px 9px;
+  border-top: 1px solid #eef0f3;
+  color: #8b95a8;
+  font-size: 12px;
+}
+
+.statusOk {
+  color: #15803d;
+}
+
+.statusError {
+  color: #b91c1c;
+}
+
+.list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.empty {
+  padding: 20px 10px;
+  color: #9ca3af;
+  font-size: 12px;
+  text-align: center;
+}
+
+.emptyCompact {
+  padding: 10px 4px 2px;
+  text-align: left;
+}
+
+.skillItem,
+.mcpServerItem,
+.extensionItem {
+  padding: 10px 10px 9px;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.skillItem + .skillItem,
+.mcpServerItem + .mcpServerItem,
+.extensionItem + .extensionItem {
+  margin-top: 7px;
+}
+
+.extensionGroup + .extensionGroup {
+  margin-top: 16px;
+}
+
+.extensionGroupHeader {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.extensionGroupHeader h3 {
+  margin: 0;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.extensionGroupHeader span {
+  color: #9ca3af;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.extensionGroupList {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 7px;
+}
+
+@media (max-width: 960px) {
+  .extensionGroupList {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .extensionGroupList {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.envGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.envRow {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 9px 14px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.envRow:last-child {
+  border-bottom: none;
+}
+
+.envRow:nth-child(even) {
+  background: #fafbfc;
+}
+
+.envLabel {
+  flex-shrink: 0;
+  width: 100px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.envValue {
+  flex: 1;
+  min-width: 0;
+  font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
+  font-size: 12px;
+  color: #111827;
+  word-break: break-all;
+  background: none;
+}
+
+@media (max-width: 480px) {
+  .extensionGroupList {
+    grid-template-columns: 1fr;
+  }
+}
+
+.extensionHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.extensionTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.extensionItem .itemName {
+  flex: 1;
+  min-width: 0;
+}
+
+.extensionSubtitle {
+  color: #9ca3af;
+  font-size: 10px;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.extensionGroupList .extensionItem + .extensionItem {
+  margin-top: 0;
+}
+
+.skillItemDisabled {
+  opacity: 0.72;
+  background: #fafbfc;
+}
+
+.skillActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.skillToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.skillToggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.skillToggleUi {
+  position: relative;
+  width: 38px;
+  height: 22px;
+  border-radius: 999px;
+  background: #cbd5e1;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+
+.skillToggleUi::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
+  transition: transform 0.15s;
+}
+
+.skillToggle input:checked + .skillToggleUi {
+  background: #2563eb;
+}
+
+.skillToggle input:checked + .skillToggleUi::after {
+  transform: translateX(16px);
+}
+
+.skillToggle input:disabled + .skillToggleUi {
+  opacity: 0.55;
+}
+
+.skillToggleLabel {
+  font-size: 12px;
+  color: #64748b;
+  min-width: 42px;
+}
+
+.titleRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.itemName {
+  min-width: 0;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemMeta {
+  flex-shrink: 0;
+  color: #9ca3af;
+  font-size: 10px;
+}
+
+.itemDesc {
+  margin-top: 5px;
+  color: #4b5563;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.itemPath {
+  margin-top: 6px;
+  color: #9ca3af;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.4;
+  word-break: break-all;
+}
+
+.mcpToolList {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 8px;
+}
+
+@media (max-width: 960px) {
+  .mcpToolList {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .mcpToolList {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .mcpToolList {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mcpServerHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.mcpServerMain {
+  min-width: 0;
+}
+
+.mcpServerSub {
+  margin-top: 3px;
+  color: #9ca3af;
+  font-size: 10px;
+}
+
+.mcpServerBadges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 5px;
+  flex-shrink: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: 19px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #6b7280;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.mcpToolItem {
+  min-width: 0;
+  padding: 7px 8px;
+  border: 1px solid #f1f3f6;
+  border-radius: 7px;
+  background: #fbfcfe;
+}
+
+.mcpToolItem[open] {
+  background: #fff;
+}
+
+.mcpToolSummary {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.mcpToolSummaryActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.mcpToolItemDisabled {
+  opacity: 0.72;
+  background: #fafbfc;
+}
+
+.mcpToolSummary::-webkit-details-marker {
+  display: none;
+}
+
+.mcpToolName {
+  color: #111827;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.mcpToolDesc {
+  margin-top: 6px;
+  color: #6b7280;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.mcpParamList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 6px;
+}
+
+.mcpParamList code {
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: #fff;
+  border: 1px solid #edf0f4;
+  color: #374151;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  word-break: break-all;
+}
+
+.extensionCounts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 7px;
+}
+
+.extensionCounts span {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #4b5563;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.extensionDetails {
+  margin-top: 8px;
+  border-top: 1px solid #f1f3f6;
+  padding-top: 7px;
+}
+
+.extensionDetails > summary {
+  cursor: pointer;
+  color: #6b7280;
+  font-size: 11px;
+  user-select: none;
+}
+
+.extensionDetails > summary:hover {
+  color: #2563eb;
+}
+
+.nameList {
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  font-size: 11px;
+  color: #8b95a8;
+}
+
+.nameList > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  min-width: 0;
+}
+
+.nameList code {
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: #f8fafc;
+  border: 1px solid #edf0f4;
+  color: #374151;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  word-break: break-all;
+}
+
+@media (max-width: 768px) {
+  .pageHeader {
+    align-items: flex-start;
+    padding-top: max(12px, env(safe-area-inset-top));
+    padding-bottom: 12px;
+    padding-left: max(12px, env(safe-area-inset-left));
+    padding-right: max(12px, env(safe-area-inset-right));
+  }
+
+  .layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 8px;
+    padding: 10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right));
+    border-right: none;
+    border-bottom: 1px solid #e5e7eb;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .sidebar::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+  }
+
+  .navBtn {
+    flex: 1 1 0;
+    min-width: 0;
+    justify-content: center;
+    text-align: center;
+    padding: 12px 8px;
+    font-size: 13px;
+  }
+
+  .panes {
+    flex: 1;
+    min-height: 0;
+    padding: 10px max(10px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
+  }
+
+  .textarea {
+    font-size: 12px;
+  }
+}
--- a/frontend/src/routes/SettingsPage.tsx
+++ b/frontend/src/routes/SettingsPage.tsx
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,56 @@
+@import "./variables.css";
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  font-family: var(--font-family);
+  letter-spacing: var(--font-letter-spacing);
+}
+
+body {
+  font-family: inherit;
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%),
+    linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%);
+  color: #1a1a1a;
+  height: var(--app-height);
+  overflow: hidden;
+}
+
+button,
+input,
+textarea,
+select,
+optgroup {
+  font-family: inherit;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: inherit;
+}
+
+.hljs,
+pre code.hljs,
+code.hljs {
+  font-family: inherit !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
--- a/frontend/src/styles/variables.css
+++ b/frontend/src/styles/variables.css
@@ -0,0 +1,26 @@
+:root {
+  --app-height: 100vh;
+  --font-family: "Maple Mono CN", ui-monospace, monospace;
+  --font-letter-spacing: -0.05em;
+  --font-ui: var(--font-family);
+  --font-mono: var(--font-family);
+
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --text-tertiary: #9ca3af;
+  --surface-muted: #f3f4f6;
+  --header-bg: rgba(255, 255, 255, 0.9);
+  --header-border: rgba(15, 23, 42, 0.06);
+  --header-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.04);
+  --toolbar-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(241, 245, 249, 0.96) 100%);
+  --toolbar-border: rgba(15, 23, 42, 0.07);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
--- a/frontend/src/types/commands.ts
+++ b/frontend/src/types/commands.ts
@@ -0,0 +1,11 @@
+export type SlashCommandSource = "builtin" | "extension" | "prompt" | "skill";
+
+export interface SlashCommand {
+	name: string;
+	description?: string;
+	source: SlashCommandSource;
+}
+
+export interface SlashCommandsResponse {
+	commands: SlashCommand[];
+}
--- a/frontend/src/types/events.ts
+++ b/frontend/src/types/events.ts
@@ -0,0 +1,248 @@
+import type { RpcMessage } from "./message";
+
+export interface AgentStartEvent {
+	type: "agent_start";
+}
+
+export interface AgentEndEvent {
+	type: "agent_end";
+}
+
+export interface MessageStartEvent {
+	type: "message_start";
+	message: RpcMessage;
+}
+
+export interface MessageUpdateEvent {
+	type: "message_update";
+	message: RpcMessage;
+}
+
+export interface MessageEndEvent {
+	type: "message_end";
+	message: RpcMessage;
+}
+
+export interface ToolExecutionStartEvent {
+	type: "tool_execution_start";
+	toolCallId?: string;
+	toolName: string;
+	args?: unknown;
+}
+
+export interface ToolExecutionUpdateEvent {
+	type: "tool_execution_update";
+	toolCallId?: string;
+	toolName: string;
+	partialResult?: { content?: unknown };
+}
+
+export interface ToolExecutionEndEvent {
+	type: "tool_execution_end";
+	toolCallId?: string;
+	toolName: string;
+	isError?: boolean;
+	result?: { content?: unknown };
+}
+
+export interface CompactionStartEvent {
+	type: "compaction_start";
+	reason?: string;
+}
+
+export interface CompactionEndEvent {
+	type: "compaction_end";
+	reason?: string;
+	aborted?: boolean;
+	errorMessage?: string;
+	willRetry?: boolean;
+	result?: { tokensBefore?: number; summary?: string };
+}
+
+export interface QueueUpdateEvent {
+	type: "queue_update";
+	steering?: string[];
+	followUp?: string[];
+}
+
+export interface AutoRetryStartEvent {
+	type: "auto_retry_start";
+	attempt?: number;
+	maxAttempts?: number;
+	delayMs?: number;
+	errorMessage?: string;
+}
+
+export interface AutoRetryEndEvent {
+	type: "auto_retry_end";
+	success?: boolean;
+	attempt?: number;
+	finalError?: string;
+}
+
+export interface ExtensionErrorEvent {
+	type: "extension_error";
+	extensionPath?: string;
+	event?: string;
+	error?: string;
+}
+
+export interface BashUpdateEvent {
+	type: "bash_update";
+	command?: string;
+	partialOutput?: string;
+}
+
+export interface ExtensionUiRequestEvent {
+	type: "extension_ui_request";
+	id: string;
+	method: string;
+	title?: string;
+	message?: string;
+	options?: string[];
+	notifyType?: "info" | "warning" | "error";
+	statusKey?: string;
+	statusText?: string;
+	widgetKey?: string;
+	widgetLines?: string[];
+	prefill?: string;
+	[key: string]: unknown;
+}
+
+/** Agent stream events replayed on SSE reconnect (excludes connected / prompt_rejected). */
+export type StreamSseEvent =
+	| AgentStartEvent
+	| AgentEndEvent
+	| MessageStartEvent
+	| MessageUpdateEvent
+	| MessageEndEvent
+	| ToolExecutionStartEvent
+	| ToolExecutionUpdateEvent
+	| ToolExecutionEndEvent
+	| CompactionStartEvent
+	| CompactionEndEvent
+	| QueueUpdateEvent
+	| AutoRetryStartEvent
+	| AutoRetryEndEvent
+	| ExtensionErrorEvent
+	| BashUpdateEvent
+	| ExtensionUiRequestEvent;
+
+export interface ConnectedEvent {
+	type: "connected";
+	isStreaming?: boolean;
+	replay?: StreamSseEvent[];
+}
+
+export interface PromptRejectedEvent {
+	type: "prompt_rejected";
+	error: string;
+}
+
+export type SseEvent = ConnectedEvent | PromptRejectedEvent | StreamSseEvent;
+
+export interface SkillInfo {
+	name?: string;
+	command?: string;
+	description?: string;
+	path?: string;
+	scope?: string;
+	source?: string;
+	enabled?: boolean;
+	toggleable?: boolean;
+}
+
+export interface McpToolInfo {
+	server?: string;
+	name?: string;
+	description?: string;
+	parameters?: string[];
+	required?: string[];
+	enabled?: boolean;
+}
+
+export interface McpServerInfo {
+	name?: string;
+	configured?: boolean;
+	enabled?: boolean;
+	cached?: boolean;
+	toolCount?: number;
+	enabledToolCount?: number;
+	resourceCount?: number;
+	cachedAt?: string;
+	tools?: McpToolInfo[];
+}
+
+export interface ExtensionInfo {
+	name?: string;
+	path?: string;
+	resolvedPath?: string;
+	kind?: string;
+	category?: "local" | "npm";
+	scope?: string;
+	source?: string;
+	location?: string;
+	version?: string;
+	enabled?: boolean;
+	commands?: string[];
+	tools?: string[];
+	handlers?: string[];
+	flags?: string[];
+	shortcuts?: string[];
+}
+
+export interface SettingsData {
+	systemPrompt?: string;
+	systemPromptPath?: string;
+	modelsConfig?: string;
+	modelsConfigPath?: string;
+	userAvatarUrl?: string;
+	agentAvatarUrl?: string;
+	skills?: SkillInfo[];
+	mcpTools?: McpServerInfo[];
+	mcpConfigPath?: string;
+	mcpCachePath?: string;
+	extensions?: ExtensionInfo[];
+	extensionsPath?: string;
+	error?: string;
+}
+
+export interface AvatarSettings {
+	userAvatarUrl: string;
+	agentAvatarUrl: string;
+}
+
+export type SettingsPaneId = "prompt" | "models" | "skills" | "mcp" | "extensions" | "other" | "env";
+
+export interface EnvironmentInfo {
+	nodeVersion?: string;
+	platform?: string;
+	arch?: string;
+	osType?: string;
+	osRelease?: string;
+	hostname?: string;
+	pid?: number;
+	cwd?: string;
+	uptime?: number;
+	totalMemMb?: number;
+	freeMemMb?: number;
+	execPath?: string;
+}
+
+export interface RetryState {
+	active: boolean;
+	attempt?: number;
+	maxAttempts?: number;
+	delayMs?: number;
+	startedAt?: number;
+	errorMessage?: string;
+}
+
+export interface ExtensionDialogState {
+	id: string;
+	method: "select" | "confirm" | "input" | "editor";
+	title: string;
+	message?: string;
+	options?: string[];
+	prefill?: string;
+}
--- a/frontend/src/types/message.ts
+++ b/frontend/src/types/message.ts
@@ -0,0 +1,116 @@
+export type MessageRole =
+	| "user"
+	| "assistant"
+	| "system"
+	| "tool_call"
+	| "bash"
+	| "thinking"
+	| "compaction_summary"
+	| "branch_summary";
+
+export interface ContentBlock {
+	type: string;
+	text?: string;
+	thinking?: string;
+	data?: string;
+	mimeType?: string;
+	toolName?: string;
+	name?: string;
+	id?: string;
+	toolCallId?: string;
+	arguments?: unknown;
+	args?: unknown;
+	input?: unknown;
+}
+
+export interface ImageContent {
+	type: "image";
+	data: string;
+	mimeType: string;
+}
+
+export interface RpcMessage {
+	role: string;
+	content?: string | ContentBlock[];
+	command?: string;
+	output?: string;
+	exitCode?: number;
+	cancelled?: boolean;
+	truncated?: boolean;
+	excludeFromContext?: boolean;
+	summary?: string;
+	toolCallId?: string;
+}
+
+export interface ToolCallBlock {
+	type: "toolCall";
+	toolName?: string;
+	name?: string;
+	id?: string;
+	toolCallId?: string;
+	arguments?: unknown;
+	args?: unknown;
+	input?: unknown;
+}
+
+export interface ChatMessage {
+	id: string;
+	role: MessageRole;
+	content: string;
+	images?: ImageContent[];
+	toolCallId?: string;
+	bashCommand?: string;
+	bashExitCode?: number;
+	bashExcludeFromContext?: boolean;
+	streaming?: boolean;
+}
+
+export interface ModelInfo {
+	provider: string;
+	id: string;
+	reasoning?: boolean;
+	contextWindow?: number;
+	thinkingLevelMap?: Record<string, string | null>;
+}
+
+export interface SessionSummary {
+	path: string;
+	name?: string;
+	firstMessage?: string;
+	messageCount?: number;
+	modified?: string;
+	created?: string;
+}
+
+export interface SessionHistoryPayload {
+	session?: { id?: string | number; name?: string };
+	messages?: RpcMessage[];
+	error?: string;
+}
+
+export interface SessionState {
+	error?: string;
+	sessionId?: string | number;
+	sessionName?: string;
+	sessionFile?: string;
+	model?: ModelInfo;
+	thinkingLevel?: string;
+	stats?: {
+		tokens?: {
+			input?: number;
+			output?: number;
+			cacheRead?: number;
+			cacheWrite?: number;
+		};
+		cost?: number;
+		contextUsage?: { percent?: number; contextWindow?: number };
+	};
+	autoCompactionEnabled?: boolean;
+	isStreaming?: boolean;
+	isCompacting?: boolean;
+	turnIndex?: number;
+}
+
+export type ThinkingLevel = "off" | "minimal" | "low" | "medium" | "high" | "xhigh";
+
+export const THINKING_LEVELS: ThinkingLevel[] = ["off", "minimal", "low", "medium", "high", "xhigh"];
--- a/frontend/src/types/session.ts
+++ b/frontend/src/types/session.ts
@@ -0,0 +1,22 @@
+import type { RpcMessage } from "./message";
+
+export interface SessionSummary {
+	path: string;
+	name?: string;
+	firstMessage?: string;
+	messageCount?: number;
+	modified?: string;
+	created?: string;
+	pinned?: boolean;
+}
+
+export interface SessionHistoryPayload {
+	session?: { id?: string | number; name?: string };
+	messages?: RpcMessage[];
+	error?: string;
+}
+
+export interface NewSessionResponse {
+	sessionFile?: string;
+	error?: string;
+}
--- a/frontend/src/utils/bash.ts
+++ b/frontend/src/utils/bash.ts
@@ -0,0 +1,39 @@
+export interface BashResult {
+	output: string;
+	exitCode?: number;
+	cancelled?: boolean;
+	truncated?: boolean;
+	fullOutputPath?: string;
+}
+
+export interface ParsedBashInput {
+	command: string;
+	display: string;
+	excludeFromContext: boolean;
+}
+
+export function parseBashInput(text: string): ParsedBashInput | null {
+	const trimmed = text.trim();
+	if (!trimmed.startsWith("!")) return null;
+
+	const excludeFromContext = trimmed.startsWith("!!");
+	const command = (excludeFromContext ? trimmed.slice(2) : trimmed.slice(1)).trim();
+	if (!command) return null;
+
+	return {
+		command,
+		display: trimmed,
+		excludeFromContext,
+	};
+}
+
+export function formatBashOutput(result: BashResult): string {
+	if (result.cancelled) return "(已取消)";
+	if (result.output?.trim()) {
+		let output = result.output;
+		if (result.truncated) output += "\n...(输出已截断)";
+		return output;
+	}
+	if (result.exitCode === 0) return "(无输出)";
+	return "(无输出)";
+}
--- a/frontend/src/utils/exportConversation.ts
+++ b/frontend/src/utils/exportConversation.ts
@@ -0,0 +1,123 @@
+import type { ChatMessage } from "../types/message";
+import { escHtml } from "./format";
+
+function roleLabel(role: ChatMessage["role"]): string {
+	switch (role) {
+		case "user":
+			return "用户";
+		case "assistant":
+			return "助手";
+		case "thinking":
+			return "思考";
+		case "tool_call":
+			return "工具";
+		case "system":
+			return "系统";
+		case "bash":
+			return "Shell";
+		case "compaction_summary":
+			return "压缩摘要";
+		case "branch_summary":
+			return "分支摘要";
+		default:
+			return "消息";
+	}
+}
+
+function exportableMessages(messages: ChatMessage[]): ChatMessage[] {
+	return messages.filter((m) => !m.streaming && m.content.trim());
+}
+
+export function messagesToMarkdown(title: string, messages: ChatMessage[]): string {
+	const lines = [`# ${title}`, ""];
+	for (const m of exportableMessages(messages)) {
+		switch (m.role) {
+			case "user":
+				lines.push("## 用户", "", m.content, "");
+				break;
+			case "assistant":
+				lines.push("## 助手", "", m.content, "");
+				break;
+			case "thinking":
+				lines.push("## 思考", "", m.content, "");
+				break;
+			case "tool_call":
+				lines.push("## 工具", "", "```", m.content, "```", "");
+				break;
+			case "system":
+				lines.push(`> ${m.content}`, "");
+				break;
+			case "bash": {
+				const cmd = m.bashCommand ? `$ ${m.bashCommand}` : "Shell";
+				lines.push(`## Shell (${cmd})`, "", "```", m.content, "```", "");
+				break;
+			}
+			case "compaction_summary":
+				lines.push("## 压缩摘要", "", m.content, "");
+				break;
+			case "branch_summary":
+				lines.push("## 分支摘要", "", m.content, "");
+				break;
+		}
+	}
+	return `${lines.join("\n").trimEnd()}\n`;
+}
+
+export function messagesToMinimalHtml(title: string, messages: ChatMessage[]): string {
+	const sections = exportableMessages(messages)
+		.map((m) => {
+			const label = roleLabel(m.role);
+			return `<section class="block"><h2>${escHtml(label)}</h2><pre>${escHtml(m.content)}</pre></section>`;
+		})
+		.join("\n");
+
+	return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escHtml(title)}</title>
+<style>
+body{font-family:"Maple Mono CN",ui-monospace,monospace;letter-spacing:-0.05em;max-width:720px;margin:2rem auto;padding:0 1rem;line-height:1.55;color:#111;background:#fff}
+h1{font-size:1.25rem;font-weight:600;margin:0 0 1.25rem}
+.block{margin:0 0 1rem}
+h2{font-size:.75rem;font-weight:600;color:#6b7280;margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.04em}
+pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:.9375rem;font-family:inherit}
+</style>
+</head>
+<body>
+<h1>${escHtml(title)}</h1>
+${sections}
+</body>
+</html>
+`;
+}
+
+export function safeExportFilename(title: string): string {
+	const cleaned = title.replace(/[\\/:*?"<>|]/g, "_").trim();
+	return cleaned || "conversation";
+}
+
+export function downloadTextFile(filename: string, content: string, mime: string): void {
+	const blob = new Blob([content], { type: `${mime};charset=utf-8` });
+	const url = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = filename;
+	anchor.click();
+	URL.revokeObjectURL(url);
+}
+
+export function singleAssistantMarkdown(content: string): string {
+	return content.trimEnd() + (content.endsWith("\n") ? "" : "\n");
+}
+
+export function messageMarkdownFilename(content: string): string {
+	const snippet =
+		content
+			.replace(/\s+/g, " ")
+			.trim()
+			.slice(0, 24)
+			.replace(/[\\/:*?"<>|]/g, "_") || "message";
+	return `${snippet}.md`;
+}
--- a/frontend/src/utils/format.ts
+++ b/frontend/src/utils/format.ts
@@ -0,0 +1,63 @@
+export function formatFooterTokens(count: number | undefined): string {
+	const n = Number(count) || 0;
+	if (n <= 0) return "0";
+	if (n < 1000) return String(Math.round(n));
+	if (n < 10000) return `${(n / 1000).toFixed(1)}k`;
+	if (n < 1_000_000) return `${Math.round(n / 1000)}k`;
+	if (n < 10_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	return `${Math.round(n / 1_000_000)}M`;
+}
+
+/** Strip TUI/terminal ANSI and orphaned CSI color codes for web display. */
+export function stripAnsi(text: string): string {
+	return text
+		.replace(/\u001b\][^\u0007]*(?:\u0007|\u001b\\)/g, "")
+		.replace(/\u001b\[[0-9;]*[A-Za-z]/g, "")
+		.replace(/\[(?:\d{1,3};)*\d{0,3}m/g, "")
+		.replace(/\s+/g, " ")
+		.trim();
+}
+
+export function truncateText(text: string, maxLen: number): string {
+	const trimmed = text.trim();
+	if (trimmed.length <= maxLen) return trimmed;
+	return `${trimmed.slice(0, Math.max(0, maxLen - 1))}…`;
+}
+
+export function formatTimeAgo(isoStr: string | undefined): string {
+	if (!isoStr) return "";
+	const d = new Date(isoStr);
+	const now = new Date();
+	const diffMs = now.getTime() - d.getTime();
+	const mins = Math.floor(diffMs / 60000);
+	if (mins < 1) return "刚刚";
+	if (mins < 60) return `${mins} 分钟前`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours} 小时前`;
+	const days = Math.floor(hours / 24);
+	if (days < 30) return `${days} 天前`;
+	return d.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
+}
+
+export function escHtml(s: string): string {
+	return s
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+}
+
+export function syncViewportHeight(): void {
+	const viewportHeight = window.visualViewport?.height || window.innerHeight;
+	document.documentElement.style.setProperty("--app-height", `${viewportHeight}px`);
+}
+
+export function isTouchLike(): boolean {
+	return window.matchMedia("(max-width: 768px)").matches || navigator.maxTouchPoints > 0;
+}
+
+let messageIdCounter = 0;
+export function nextMessageId(): string {
+	messageIdCounter += 1;
+	return `msg-${Date.now()}-${messageIdCounter}`;
+}
--- a/frontend/src/utils/historyMessages.ts
+++ b/frontend/src/utils/historyMessages.ts
@@ -0,0 +1,117 @@
+import type { ChatMessage, SessionHistoryPayload, ToolCallBlock } from "../types/message";
+import { nextMessageId } from "./format";
+import {
+	extractContent,
+	extractImages,
+	extractThinking,
+	formatToolCall,
+	formatToolResult,
+	getToolCalls,
+} from "./toolCall";
+
+function appendAssistantBlocks(m: { content?: string | unknown[] }, result: ChatMessage[]): void {
+	if (Array.isArray(m.content)) {
+		for (const block of m.content) {
+			const b = block as { type?: string; thinking?: string; text?: string };
+			if (b.type === "thinking") {
+				const thinking = (b.thinking ?? "").trim();
+				if (thinking) {
+					result.push({ id: nextMessageId(), role: "thinking", content: thinking });
+				}
+			} else if (b.type === "text") {
+				const text = (b.text ?? "").trim();
+				if (text) {
+					const last = result[result.length - 1];
+					if (last?.role === "assistant") {
+						last.content += text;
+					} else {
+						result.push({ id: nextMessageId(), role: "assistant", content: text });
+					}
+				}
+			} else if (b.type === "toolCall") {
+				const tc = block as ToolCallBlock;
+				const tid = tc.toolCallId || tc.id;
+				result.push({
+					id: tid ? `tool-${tid}` : nextMessageId(),
+					role: "tool_call",
+					content: formatToolCall(tc),
+					toolCallId: tid ? String(tid) : undefined,
+				});
+			}
+		}
+		return;
+	}
+	const text = extractContent(m.content as string | undefined);
+	if (text) {
+		result.push({ id: nextMessageId(), role: "assistant", content: text });
+	}
+	for (const tc of getToolCalls(m.content as string | undefined)) {
+		const tid = tc.toolCallId || tc.id;
+		result.push({
+			id: tid ? `tool-${tid}` : nextMessageId(),
+			role: "tool_call",
+			content: formatToolCall(tc),
+			toolCallId: tid ? String(tid) : undefined,
+		});
+	}
+}
+
+export function buildHistoryMessages(payload: SessionHistoryPayload): ChatMessage[] {
+	const result: ChatMessage[] = [];
+	for (const m of payload.messages || []) {
+		if (m.role === "user") {
+			const text = extractContent(m.content);
+			const images = extractImages(m.content);
+			if (text || images.length) {
+				result.push({
+					id: nextMessageId(),
+					role: "user",
+					content: text,
+					...(images.length ? { images } : {}),
+				});
+			}
+		} else if (m.role === "assistant") {
+			appendAssistantBlocks(m, result);
+		} else if (m.role === "toolResult" || m.role === "tool") {
+			const text = formatToolResult({ content: m.content });
+			if (text.trim()) {
+				result.push({
+					id: m.toolCallId ? `tool-${m.toolCallId}` : nextMessageId(),
+					role: "tool_call",
+					content: `✅ tool\n${text}`,
+					toolCallId: m.toolCallId ? String(m.toolCallId) : undefined,
+				});
+			}
+		} else if (m.role === "bashExecution") {
+			const output = typeof m.output === "string" ? m.output : "";
+			result.push({
+				id: nextMessageId(),
+				role: "user",
+				content: m.excludeFromContext ? `!!${m.command}` : `!${m.command}`,
+			});
+			result.push({
+				id: nextMessageId(),
+				role: "bash",
+				content: output,
+				bashCommand: m.command,
+				bashExitCode: m.exitCode,
+				bashExcludeFromContext: m.excludeFromContext,
+			});
+		} else if (m.role === "compactionSummary") {
+			const summary = typeof m.summary === "string" ? m.summary : extractContent(m.content);
+			if (summary.trim()) {
+				result.push({ id: nextMessageId(), role: "compaction_summary", content: summary });
+			}
+		} else if (m.role === "branchSummary") {
+			const summary = typeof m.summary === "string" ? m.summary : extractContent(m.content);
+			if (summary.trim()) {
+				result.push({ id: nextMessageId(), role: "branch_summary", content: summary });
+			}
+		}
+	}
+	return result;
+}
+
+export function extractThinkingFromMessage(m: { content?: string | unknown[] }): string {
+	return extractThinking(m.content as string | undefined);
+}
--- a/frontend/src/utils/images.ts
+++ b/frontend/src/utils/images.ts
@@ -0,0 +1,58 @@
+export interface ImageContent {
+	type: "image";
+	data: string;
+	mimeType: string;
+}
+
+export const MAX_CHAT_IMAGES = 8;
+export const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+export const ALLOWED_IMAGE_MIME = new Set(["image/jpeg", "image/png", "image/gif", "image/webp"]);
+
+export function imageToDataUrl(image: ImageContent): string {
+	return `data:${image.mimeType};base64,${image.data}`;
+}
+
+export async function fileToImageContent(file: File): Promise<ImageContent> {
+	if (!ALLOWED_IMAGE_MIME.has(file.type)) {
+		throw new Error(`不支持的图片类型: ${file.type || "unknown"}`);
+	}
+	if (file.size > MAX_IMAGE_BYTES) {
+		throw new Error(`图片过大（最大 ${Math.round(MAX_IMAGE_BYTES / 1024 / 1024)}MB）`);
+	}
+
+	const dataUrl = await new Promise<string>((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(new Error("读取图片失败"));
+		reader.readAsDataURL(file);
+	});
+
+	const match = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+	if (!match) throw new Error("无效图片数据");
+	return { type: "image", mimeType: match[1], data: match[2] };
+}
+
+export async function clipboardItemsToImages(items: DataTransferItemList): Promise<ImageContent[]> {
+	const images: ImageContent[] = [];
+	for (const item of items) {
+		if (!item.type.startsWith("image/")) continue;
+		const file = item.getAsFile();
+		if (!file) continue;
+		images.push(await fileToImageContent(file));
+	}
+	return images;
+}
+
+export function validateImagePayload(image: ImageContent): ImageContent {
+	if (image.type !== "image") throw new Error("无效图片对象");
+	if (!ALLOWED_IMAGE_MIME.has(image.mimeType)) {
+		throw new Error(`不支持的图片类型: ${image.mimeType}`);
+	}
+	if (!image.data) throw new Error("图片数据为空");
+	const padding = image.data.endsWith("==") ? 2 : image.data.endsWith("=") ? 1 : 0;
+	const size = Math.floor((image.data.length * 3) / 4) - padding;
+	if (size > MAX_IMAGE_BYTES) {
+		throw new Error(`图片过大（最大 ${Math.round(MAX_IMAGE_BYTES / 1024 / 1024)}MB）`);
+	}
+	return { type: "image", mimeType: image.mimeType, data: image.data };
+}
--- a/frontend/src/utils/markdown.ts
+++ b/frontend/src/utils/markdown.ts
@@ -0,0 +1,67 @@
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import python from "highlight.js/lib/languages/python";
+import bash from "highlight.js/lib/languages/bash";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import css from "highlight.js/lib/languages/css";
+import xml from "highlight.js/lib/languages/xml";
+import { Marked, type Tokens } from "marked";
+import "highlight.js/styles/github.min.css";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("html", xml);
+
+function escapeMarkdownCode(raw: string): string {
+	return String(raw)
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+}
+
+function renderAssistantCodeBlock(token: Tokens.Code): string {
+	const langSlug = (((token.lang || "").match(/^\S+/) || [""])[0]).trim().toLowerCase();
+	const codeRaw = String(token.text ?? "").replace(/\n+$/, "");
+	const skipHl = !!token.escaped;
+
+	let innerHtml: string;
+	if (skipHl) {
+		innerHtml = codeRaw;
+	} else {
+		try {
+			if (langSlug && hljs.getLanguage(langSlug)) {
+				innerHtml = hljs.highlight(codeRaw, { language: langSlug }).value;
+			} else {
+				innerHtml = hljs.highlightAuto(codeRaw).value;
+			}
+		} catch {
+			innerHtml = escapeMarkdownCode(codeRaw);
+		}
+	}
+
+	const safeLangSlug = /^[a-z][a-z0-9_-]*$/i.test(langSlug) ? langSlug : "";
+	const codeClass = safeLangSlug ? `hljs language-${safeLangSlug}` : "hljs";
+	return `<pre class="assistant-pre"><code class="${codeClass}">${innerHtml}</code></pre>\n`;
+}
+
+const marked = new Marked({
+	breaks: true,
+	gfm: true,
+	renderer: {
+		code: renderAssistantCodeBlock,
+	},
+});
+
+export function renderMarkdown(text: string): string {
+	if (!text) return "";
+	return marked.parse(text) as string;
+}
--- a/frontend/src/utils/sessionTitle.ts
+++ b/frontend/src/utils/sessionTitle.ts
@@ -0,0 +1,50 @@
+export function formatSessionTitle(title: string | undefined): string {
+	const text = typeof title === "string" ? title.trim() : "";
+	return text || "未命名";
+}
+
+/** 与服务端一致的机器标签（会话 id、纯 hex 段等），不写进界面标题 */
+export function isMachineSessionLabel(text: string | undefined, headerId: string): boolean {
+	const t = (text ?? "").trim();
+	if (!t) return true;
+	if (headerId && t === headerId) return true;
+	if (/^[0-9a-f]{8,}$/i.test(t)) return true;
+	if (/^[0-9]{10,}$/.test(t)) return true;
+	return false;
+}
+
+/** 首句截取（侧边栏兜底与顶栏回填，需与 backend/services/sessions.ts 保持一致逻辑） */
+export function titleFromFirstUserMessage(text: string | undefined, maxChars = 56): string {
+	const cleaned = String(text ?? "").replace(/\s+/g, " ").trim();
+	if (!cleaned) return "";
+	const sentenceMatch = cleaned.match(/^(.+?[。！？.!?])(\s|$)/);
+	let candidate = sentenceMatch?.[1] ? sentenceMatch[1].trim() : cleaned;
+	if (candidate.length > maxChars) {
+		candidate = `${candidate.slice(0, maxChars).trimEnd()}…`;
+	}
+	return candidate;
+}
+
+export function modelKey(model: { provider: string; id: string } | undefined): string {
+	return model ? `${model.provider}/${model.id}` : "";
+}
+
+export function modelLabel(model: { provider: string; id: string } | undefined): string {
+	if (!model) return "";
+	return `${model.provider}/${model.id}`;
+}
+
+/** 顶栏模型下拉展示：[渠道名]模型id，避免同名模型无法区分 */
+export function shortModelLabel(model: { provider: string; id: string } | undefined, maxChars = 52): string {
+	if (!model) return "";
+	const provider = model.provider.trim();
+	const id = model.id.trim();
+	if (!provider) return id;
+	if (!id) return `[${provider}]`;
+	const prefix = `[${provider}]`;
+	const combined = `${prefix}${id}`;
+	if (combined.length <= maxChars) return combined;
+	const idBudget = Math.max(12, maxChars - prefix.length);
+	const clippedId = id.length <= idBudget ? id : id.slice(0, idBudget);
+	return `${prefix}${clippedId}`;
+}
--- a/frontend/src/utils/slashCommands.ts
+++ b/frontend/src/utils/slashCommands.ts
@@ -0,0 +1,64 @@
+import type { SlashCommand } from "../types/commands";
+
+/** Keep in sync with backend/slash/dispatch.ts WEBUI_BUILTIN_SLASH_NAMES */
+const WEBUI_BUILTIN_SLASH_NAMES = new Set([
+	"compact",
+	"new",
+	"reload",
+	"clone",
+	"name",
+	"model",
+	"session",
+	"export",
+	"copy",
+]);
+
+export function isWebUiSlashCommand(command: SlashCommand): boolean {
+	if (command.source === "extension" || command.source === "prompt" || command.source === "skill") {
+		return true;
+	}
+	return WEBUI_BUILTIN_SLASH_NAMES.has(command.name);
+}
+
+export function filterWebUiSlashCommands(commands: SlashCommand[]): SlashCommand[] {
+	return commands.filter(isWebUiSlashCommand);
+}
+
+export function parseSlashCommandInput(text: string): { query: string } | null {
+	const trimmed = text.trimStart();
+	if (!trimmed.startsWith("/")) return null;
+	if (trimmed.includes(" ")) return null;
+	return { query: trimmed.slice(1) };
+}
+
+export function filterSlashCommands(commands: SlashCommand[], query: string): SlashCommand[] {
+	const normalized = query.trim().toLowerCase();
+	if (!normalized) return commands;
+
+	return commands
+		.filter((command) => command.name.toLowerCase().includes(normalized))
+		.sort((a, b) => {
+			const aStarts = a.name.toLowerCase().startsWith(normalized);
+			const bStarts = b.name.toLowerCase().startsWith(normalized);
+			if (aStarts !== bStarts) return aStarts ? -1 : 1;
+			return a.name.localeCompare(b.name);
+		});
+}
+
+export function applySlashCompletion(current: string, commandName: string): string {
+	const leadingSpaces = current.match(/^\s*/)?.[0] ?? "";
+	return `${leadingSpaces}/${commandName} `;
+}
+
+export function slashCommandSourceLabel(source: SlashCommand["source"]): string {
+	switch (source) {
+		case "builtin":
+			return "内置";
+		case "extension":
+			return "扩展";
+		case "prompt":
+			return "指令";
+		case "skill":
+			return "技能";
+	}
+}
--- a/frontend/src/utils/toolCall.ts
+++ b/frontend/src/utils/toolCall.ts
@@ -0,0 +1,126 @@
+import type { ContentBlock, ImageContent, ToolCallBlock } from "../types/message";
+
+export function extractContent(content: string | ContentBlock[] | undefined): string {
+	if (!content) return "";
+	if (typeof content === "string") return content;
+	if (Array.isArray(content)) {
+		return content
+			.filter((c) => c.type === "text")
+			.map((c) => c.text ?? "")
+			.join("");
+	}
+	return String(content);
+}
+
+export function extractThinking(content: string | ContentBlock[] | undefined): string {
+	if (!content) return "";
+	if (typeof content === "string") return "";
+	if (!Array.isArray(content)) return "";
+	return content
+		.filter((c) => c.type === "thinking")
+		.map((c) => c.thinking ?? "")
+		.join("\n\n")
+		.trim();
+}
+
+export function deriveThinkingSummary(content: string, maxLen = 56): string {
+	const oneLine = String(content || "").replace(/\s+/g, " ").trim();
+	if (!oneLine) return "思考中…";
+	if (oneLine.length <= maxLen) return oneLine;
+	return `${oneLine.slice(0, maxLen).trimEnd()}…`;
+}
+
+export function extractImages(content: string | ContentBlock[] | undefined): ImageContent[] {
+	if (!Array.isArray(content)) return [];
+	return content
+		.filter((c): c is ImageContent => c.type === "image" && typeof c.data === "string" && !!c.mimeType)
+		.map((c) => ({ type: "image", data: c.data, mimeType: c.mimeType }));
+}
+
+export function getToolCalls(content: string | ContentBlock[] | undefined): ToolCallBlock[] {
+	if (!Array.isArray(content)) return [];
+	return content.filter((c): c is ToolCallBlock => c.type === "toolCall");
+}
+
+export function formatToolCall(tc: ToolCallBlock): string {
+	const name = tc.toolName || tc.name || "tool";
+	const args = tc.arguments ?? tc.args ?? tc.input ?? {};
+	let text = `${name}(${JSON.stringify(args)})`;
+	const shortId = tc.toolCallId || tc.id;
+	if (shortId) text = `# ${String(shortId).slice(0, 8)}\n${text}`;
+	return text;
+}
+
+export function formatToolResult(tr: { content?: unknown }): string {
+	let text = "";
+	const content = tr.content;
+	if (typeof content === "string") text = content;
+	else if (Array.isArray(content)) {
+		text = content.map((c) => (c && typeof c === "object" && "text" in c ? String(c.text) : JSON.stringify(c))).join("\n");
+	} else if (content && typeof content === "object" && "text" in content) {
+		text = String((content as { text: string }).text);
+	} else {
+		text = JSON.stringify(content || tr, null, 2);
+	}
+	return text.length > 800 ? `${text.slice(0, 800)}\n… (已截断)` : text;
+}
+
+export function formatToolBodyHtml(content: string): string {
+	const lines = content.split("\n");
+	let inDiff = false;
+	const htmlLines = lines.map((line) => {
+		if (/^(\+\+\+|---|@@)/.test(line.trim())) {
+			inDiff = true;
+			return `<span class="diffMeta">${escapeHtml(line)}</span>`;
+		}
+		if (inDiff && line.startsWith("+")) {
+			return `<span class="diffAdd">${escapeHtml(line)}</span>`;
+		}
+		if (inDiff && line.startsWith("-")) {
+			return `<span class="diffDel">${escapeHtml(line)}</span>`;
+		}
+		return escapeHtml(line);
+	});
+	return htmlLines.join("\n");
+}
+
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;");
+}
+
+export function deriveToolCallSummary(fullText: string): string {
+	const raw = String(fullText || "").trim();
+	if (!raw) return "tool";
+	let icon = "";
+	if (raw.startsWith("🔧")) icon = "🔧";
+	else if (raw.startsWith("✅")) icon = "✅";
+	else if (raw.startsWith("❌")) icon = "❌";
+	const rest = icon ? raw.slice(icon.length).trimStart() : raw;
+	const idLine = rest.split("\n").find((l) => l.trimStart().startsWith("# "));
+	const idPart = idLine ? idLine.replace(/^\s*#\s*/, "").trim().split(/\s/)[0] : "";
+	const oneLine = rest.replace(/\s+/g, " ");
+	const nameMatch = oneLine.match(/(\w+)\s*\(/);
+	const name = nameMatch ? nameMatch[1] : "tool";
+	let label = idPart ? `${name} · ${idPart}` : name;
+	if (icon) label = `${icon} ${label}`;
+	return label;
+}
+
+export function buildToolCallUpdateText(
+	ev: { toolName: string; partialResult?: { content?: unknown }; result?: { content?: unknown } },
+	isError?: boolean,
+): string {
+	const icon = isError === undefined ? "🔧" : isError ? "❌" : "✅";
+	let detail = "";
+	if (ev.partialResult?.content) {
+		detail = `\n${formatToolResult(ev.partialResult)}`;
+	}
+	if (isError !== undefined) {
+		const resultText = ev.result?.content ? `\n${formatToolResult(ev.result)}` : "";
+		return `${icon} ${ev.toolName}${resultText || detail}`;
+	}
+	return `${icon} ${ev.toolName}${detail}`;
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_API_BASE?: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,80 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+
+const DESKTOP_API_ORIGIN = "https://sproutclaw.shumengya.top";
+
+export default defineConfig(({ mode }) => {
+	const isDesktop = mode === "desktop";
+
+	return {
+		plugins: [
+			react(),
+			VitePWA({
+				registerType: "prompt",
+				includeAssets: ["logo.png", "logo192.png", "logo512.png"],
+				manifest: {
+					name: "萌小芽",
+					short_name: "萌小芽",
+					description: "树萌芽智能 AI 助手 Web 客户端",
+					theme_color: "#f7f8fb",
+					background_color: "#f7f8fb",
+					display: "standalone",
+					orientation: "portrait-primary",
+					scope: "/",
+					start_url: "/",
+					lang: "zh-CN",
+					icons: [
+						{
+							src: "logo192.png",
+							sizes: "192x192",
+							type: "image/png",
+						},
+						{
+							src: "logo512.png",
+							sizes: "512x512",
+							type: "image/png",
+						},
+						{
+							src: "logo512.png",
+							sizes: "512x512",
+							type: "image/png",
+							purpose: "maskable",
+						},
+					],
+				},
+				workbox: {
+					navigateFallback: "index.html",
+					globPatterns: ["**/*.{js,css,html,png,ico,woff2}"],
+					runtimeCaching: isDesktop
+						? [
+								{
+									urlPattern: new RegExp(
+										`^${DESKTOP_API_ORIGIN.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/api/`,
+									),
+									handler: "NetworkOnly",
+								},
+							]
+						: [
+								{
+									urlPattern: /^\/api\//,
+									handler: "NetworkOnly",
+								},
+							],
+				},
+				devOptions: {
+					enabled: false,
+				},
+			}),
+		],
+		build: {
+			outDir: isDesktop ? "dist-desketop" : "dist",
+			emptyOutDir: true,
+		},
+		server: {
+			proxy: {
+				"/api": "http://localhost:19133",
+			},
+		},
+	};
+});