feat: 拆解单文件 Demo 为 Vite + React 前端工程

- 保留根目录 index.html 作为 v1 单文件原型（不参与构建）
- app/ 下新建 Vite + React 工程（vite.config root 指向 app/，两版互不干扰）
- 状态收敛到 useAppStore（表单/消息/串行确认/一键发品 + 4 条异步编排流）
- 生成卡片重构为结构化数据驱动渲染，按钮为真实 React 事件
- 6 大表单模块卡片化；Agent 意图解析与偏好学习抽为独立 lib
- 功能与视觉与 v1 完全一致，浏览器端全流程回归通过

app/src/components/TaskCardView.jsx

@@ -0,0 +1,33 @@
+import { useStore } from '../store/context'
+
+/** Agent 任务清单卡片：8 步/多步执行状态实时更新 */
+export default function TaskCardView({ task }) {
+  const { setAutoConfirm, autoConfirmMode } = useStore()
+  return (
+    <div className="agent-card">
+      <div className="ag-head">{task.title}</div>
+      <div className="ag-ctx">{task.ctxLine}</div>
+      <div className="ag-mode-row">
+        <span className="ag-mode-label">确认模式</span>
+        <button
+          className={'ag-mt-btn' + (autoConfirmMode ? ' active' : '')}
+          onClick={() => setAutoConfirm(true)}
+        >⚡ 自动确认</button>
+        <button
+          className={'ag-mt-btn' + (!autoConfirmMode ? ' active' : '')}
+          onClick={() => setAutoConfirm(false)}
+        >✋ 手动确认</button>
+      </div>
+      <div className="ag-steps">
+        {task.steps.map((s, i) => (
+          <div key={i} className={'ag-step ' + s.status}>
+            <span className="ag-ico">{s.status === 'done' ? '✓' : s.status === 'doing' ? '↻' : '·'}</span>
+            <span className="ag-lbl">{s.label}</span>
+            <span className="ag-note">{s.note}</span>
+          </div>
+        ))}
+      </div>
+      <div className="ag-foot">💡 每个工具生成后展示卡片，自动模式 5s 后自动确认填入，手动模式需您点击确认。可随时切换模式。</div>
+    </div>
+  )
+}