refactor: 迁移前端到 React 19 + Zustand + Tailwind CSS v4

- 将 vanilla TS 单文件 (app.ts 395行) 拆分为 React 组件化架构
- 引入 Zustand 管理全局状态 (连接/录音/预览/历史/toast)
- 自定义 hooks 封装 WebSocket 连接和音频录制管线
- CSS 全面 Tailwind 化，style.css 从 234 行精简到 114 行 (仅保留 tokens + keyframes)
- 新增依赖: react, react-dom, zustand, @vitejs/plugin-react
- Go 后端 embed 路径 web/dist 不变，无需改动

web/src/components/PreviewBox.tsx

@@ -0,0 +1,25 @@
+import { useAppStore } from "../stores/app-store";
+
+export function PreviewBox() {
+	const text = useAppStore((s) => s.previewText);
+	const active = useAppStore((s) => s.previewActive);
+	const hasText = text.length > 0;
+
+	return (
+		<section className="shrink-0 pb-3">
+			<div
+				className={`scrollbar-thin max-h-40 min-h-20 overflow-y-auto rounded-card border px-[18px] py-4 transition-all duration-300 ${
+					active
+						? "border-accent/40 bg-linear-to-b from-accent/[0.03] to-surface shadow-[0_0_0_1px_rgba(99,102,241,0.2),0_4px_24px_-4px_rgba(99,102,241,0.15)]"
+						: "border-edge bg-surface"
+				}`}
+			>
+				<p
+					className={`break-words text-base leading-relaxed ${hasText ? "" : "text-fg-dim"}`}
+				>
+					{hasText ? text : "\u6309\u4f4f\u8bf4\u8bdd\u2026"}
+				</p>
+			</div>
+		</section>
+	);
+}