issue-hub-ai/docs/design/browser-smoke.md

Browser Smoke Verification

This project includes a dependency-free browser smoke runner for the implemented Issue Hub AI screens.

Command

npm run smoke:browser

The runner will:

• reuse http://127.0.0.1:5174 when a dev server is already running;
• otherwise serve the existing dist/ build on 127.0.0.1:5174; run npm run build before smoke when no service is already running;
• launch headless Chrome through the Chrome DevTools Protocol;
• start a lightweight local mock sync server for /api/health, /api/v1/sync/push, and /api/v1/sync/pull;
• allow sync preflight headers for Authorization, X-Issue-Hub-Role, and X-Issue-Hub-Permissions;
• start a lightweight local mock AI server for /chat/completions;
• clear the demo local storage state;
• verify issue pool pagination, page size, CSV export metadata, status, priority, department, source, submitter, SLA and created-time filters, submitter-filtered export row counts, search empty state and empty bulk dispatch feedback;
• verify the global sidebar sync status and local-mode sync feedback;
• save sync settings, pass the sync health check, run push/pull with role permission headers, and verify a remote issue plus timeline is merged locally;
• open the global settings panel, save sync settings, save/check/clear the AI API Key, save notification settings and verify the persisted reminder policy, persist permission role changes, and verify permission route blocking plus recovery;
• configure the AI base URL to the mock AI server, run center-dashboard AI retriage, and verify the returned recommendation plus timeline event;
• refresh the client workbench task list, verify top status tab feedback for 待接单 and restore 全部, apply priority filtering and SLA sorting, verify pagination and page-size feedback, expand AI analysis details, open top and bottom more actions, copy a handler link, persist a followed issue, switch detail tabs, open row actions, and collapse the detail panel back to the list;
• select an issue in the issue pool, verify bulk AI dispatch persistence, open bulk governance, and import a tag;
• open center-dashboard filter panel, verify current-page, next-page and page-size feedback, open the row dispatch action panel, verify AI basis / return-info / close controls, confirm bulk dispatch, and accept an AI dispatch;
• verify department queue status, priority, SLA and created-time filter feedback, open department queue settings, verify cancel does not persist, save settings, reload and restore the saved checkbox state, expand AI dispatch analysis details, open member workload details, filter members by skill, sort by response speed, assign from the detail row, verify pagination and page-size feedback, and assign the issue from the department queue;
• run handler actions for detail tab switching, customer/internal comment target switching, comment tool feedback, accept, collaboration request, more action menu, process CSV export metadata, internal comment, linked task, detail expansion, full AI report, attachment download, transfer and resolve;
• sort and filter submitter tracking records, expand submitter issue details, download attachments, and run submitter actions for reopen and approval;
• scan SLA reminders, verify reminder policy text, event channels, delivery status, reminder/escalation/review feedback, and mark a reminder handled;
• submit from the mobile preview, verify save-draft feedback, attachment selection, non-default impact scope/source/system/expected-hours persistence, focus missing supplemental fields, contact/reminder feedback, supplemental attachment selection, and submit supplemental information;
• verify the mobile narrow layout and submit flow at 390x920;
• apply an AI precheck supplement to the submit form, open AI category candidates, write a selected category into the form, open/close dispatch rule details, apply a rich-text editor tool, verify desktop attachment upload feedback, select source, system, expected hours, impact scope and severity controls, submit a client issue, and verify the submitter tracking route plus persisted issue, impact scope, severity, SLA minutes, timeline, rich editor content and AI triage data;
• open the knowledge review settings panel, save settings, verify persisted localStorage values and restored controls, open the filter panel, verify selected filter feedback, verify pagination and page-size feedback, generate and edit a knowledge draft summary, merge it, mark an issue as no-draft, and verify the knowledge timeline events;
• save a rule automation mode change, add a condition placeholder, add an AND condition group, remove a rule condition, save a rule draft, open the audit log, run rule test preview and publish rule configuration;
• filter the analytics board by range, department and risk focus, verify design-scale overview display, filter feedback, fixed-date feedback and trend range switching, open AI insight details, export a CSV report for the active range, open real-data department / repeat / SLA / AI insight drilldowns, verify drilldown records, customize visible widgets, save the layout, verify hidden widgets disappear, refresh the board, and verify widget layout plus view-state persistence.

Implementation Screenshot Refresh

npm run capture:pages

This uses the same dependency-free CDP runner to refresh the 12 desktop implementation screenshots and 3 mobile viewport screenshots under docs/design/implementation-screenshots/.

Artifacts

Screenshots are written to:

docs/design/interaction-smoke/

Current expected files:

• center-ai-dispatch-accepted.png：中心调度台行级派发面板和批量采纳 AI 派发流程
• center-ai-live-triage.png
• client-workbench-detail-tabs.png
• department-assigned-handler.png：部门队列成员负载明细筛选、明细分派和主按钮分派处理人
• escalation-marked-handled.png
• escalation-sla-scanned.png：SLA 扫描按提醒策略生成事件，展示重复间隔、渠道和投递状态
• global-sync-local-mode.png
• global-notifications-panel.png：全局通知中心展示未处理升级、策略驱动 SLA 风险、渠道状态和待补充统计，并支持关闭回到原页面
• global-help-panel.png：全局帮助面板展示角色流程、常用操作和快速跳转入口
• handler-comment-task-linked.png：处理人详情评论保留处理链路、关联任务、SLA 查看记录、处理链接复制记录、催办协作人时间线和处理记录导出元数据
• handler-detail-expanded-report.png
• handler-resolved.png
• handler-tabs-comment-tools.png：处理人详情 tab、评论对象切换、评论工具附件 / 图片 / 链接插入反馈，并断言 commentTools 本地记录和问题附件列表
• issue-pool-bulk-dispatched.png
• issue-pool-bulk-tagged.png
• issue-pool-empty-search.png
• knowledge-draft-generated.png
• knowledge-draft-merged.png
• knowledge-settings-saved.png：知识复盘设置保存、localStorage 持久化和重新打开恢复
• knowledge-summary-edited.png
• knowledge-no-draft-marked.png
• mobile-narrow-submit.png
• mobile-narrow-submitted.png
• mobile-submit-attachment-selected.png
• mobile-submitted-tracking.png
• mobile-supplement-missing-upload.png
• mobile-supplement-submitted.png：提交补充后断言补充文本、订单截图.zip 附件和“提交人补充信息”时间线持久化；同一链路还覆盖“联系处理人”“催办”写入时间线。
• analytics-filtered.png
• analytics-custom-layout-saved.png
• rule-config-condition-removed.png
• rule-config-audit-log.png
• rule-config-tested.png
• settings-panel-configured.png
• settings-permission-roles.png
• settings-sync-success.png
• submit-issue-editor-attachment.png：提交页 AI 重新检测、预检查审计记录、分类候选、流转规则详情、AI 补充、富文本工具和附件上传
• submitter-approved.png
• submitter-detail-expanded-download.png
• submitter-reopened.png
• submitter-tracking-after-submit.png
• rule-config-published.png

Notes

Set CHROME_BIN when Chrome is not installed in a standard location. Set SMOKE_APP_ORIGIN to target another local origin.