现在我清楚了整体结构。需要做以下改造：

1. AI 对话流程改为多步骤：问题类型选择 → 终端设备确认（含自动显示 IP、查询台账）→ 故障描述（含常见问题大类）
2. 页面 state 需要管理当前诊断步骤（step）
3. 右侧文档面板 根据步骤切换显示内容（如何查 IP/MAC/序列号、常见问题解决方式）
4. API 路由 需要更新系统提示以支持多阶段流程，并支持传递设备上下文信息

现在重写 chat-panel.tsx，支持多阶段流程、设备信息卡片显示：

现在重写 doc-panel.tsx，支持根据阶段切换文档内容：

最后更新 page.tsx，引入新的 stage 状态管理和模拟 IP 获取：

整个多阶段诊断流程已完整实现。对话侧现在按三个阶段推进：① AI 先推送"终端设备问题 / 网络连接问题 / 不确定"快捷选项；② 选择终端问题后自动展示台账设备卡片（含 IP、主机名、型号、SN、部门），用户可确认或输入新 IP/MAC 查询其他设备；③ 确认设备后进入故障描述阶段，AI 提供蓝屏/软件/硬件等常见问题大类供点选。文档侧会跟随阶段自动切换：阶段1显示问题类型对比、阶段2显示如何查 IP/MAC/SN 的操作指引、阶段3显示常见故障的自助排查步骤。

现在我完全了解了代码结构和问题。核心诉求是：整个流程不依赖 AI（因为没有有效的 AI Gateway 配置），改为纯前端状态机驱动的卡片式对话流程。三个阶段：

1. 阶段一：卡片选择终端/网络问题
2. 阶段二（终端）：展示设备台账卡片确认，可输入新IP/MAC重新查询
3. 阶段三：自助排查（故障大类选择）

这样完全脱离 AI 依赖，交互更清晰可靠。

现在同步更新文档面板——阶段三要能根据用户选择的故障大类高亮对应内容：

现在更新 page.tsx，添加 selectedFault 状态透传给 DocPanel，并把 onStageChange 正确对接：

整个流程已完全改为纯前端状态机驱动，不再依赖 AI Gateway，彻底解决了信用卡报错问题。三个阶段清晰串联：

• 阶段一 — 对话框内嵌三张选择卡片（终端/网络/不确定），点击即推进
• 阶段二（终端问题） — 自动弹出台账查询卡片（含使用者、部门、型号、SN、IP），支持"确认"或"重新查询"，输入新 IP/MAC 后再次渲染台账卡片；右侧文档同步切换为 IP/MAC/SN 查询指引
• 阶段三 — 展示六个故障大类网格选择（系统崩溃/软件/硬件等），点选后右侧文档高亮对应排查步骤，并显示"工单已提交"结论卡片