feat(usable): integrate current dbtool implementation snapshot

Co-Authored-By: Paperclip <noreply@paperclip.ing>

plans/20260331-160500-frontend-guided-workflow.md

@@ -0,0 +1,38 @@
+# Frontend Guided Workflow Review Plan
+
+- 日期：2026-03-31
+- 负责人：Senior Frontend Engineer
+
+## Goal
+
+在不引入正式前端工程的前提下，为 `gui/prototype` 增加更可验收的工作流引导，让 PM / QA 可以按 `connect -> inspect -> query -> export` 逐步评审当前最小可见界面。
+
+## Assessment
+
+- 当前仓库已经有 `gui/index.html`、`gui/prototype` 和 `gui/README.md`，前端入口与静态展示层基础成立。
+- 现有原型具备连接切换、schema search、查询状态预览、导出反馈和快捷操作面板。
+- 但当前界面对“我正在验证哪一步工作流”缺少显式提示，QA 主要依赖 README 和心智记忆来手动串联步骤。
+
+## Scope
+
+1. 在 `gui/prototype/index.html` 增加可点击的工作流轨道
+2. 在 `gui/prototype/app.js` 增加工作流步骤状态与快捷键
+3. 在 `gui/prototype/styles.css` 增加当前评审步骤和高亮样式
+4. 更新 `gui/README.md` 与入口说明，补充新的评审路径和快捷键
+
+## Out of Scope
+
+- 引入 React / Tailwind / shadcn 脚手架
+- 接入真实数据库、持久化 profile 或修改后端契约
+- 扩张到 dashboard、BI、AI 助手或多页面导航
+
+## Validation
+
+- `node --check gui/prototype/app.js`
+- `node --check gui/preview-server.mjs`
+
+## Expected Result
+
+- 原型内直接可见当前评审步骤
+- QA 可通过按钮或快捷键更快切换到 `connect / inspect / query / export`
+- 工作流状态、执行反馈和文档说明保持一致