---
description: Nexus 前端规范 — Tailwind v4 + Alpine.js；api.js JWT；禁止 XSS
globs: web/app/**
alwaysApply: false
---

# Nexus 前端 (Tailwind + Alpine.js)

## 页面结构

- 业务页先引入：`/app/api.js` → `/app/layout.js`（侧栏、搜索、移动端 overlay）
- 15 个 HTML 页面同级放在 `web/app/`，保持导航一致

## API 调用

- 一律 `apiFetch()` / `apiHeadersJSON()`，禁止手写裸 `fetch` 漏 Authorization
- Token 存 `localStorage`：`access_token`、`refresh_token`、`token_expires`
- 到期前 2 分钟自动 refresh；401 重试一次后 `_logout()`
- 8 小时无活动会话超时（与后端 JWT `updated_at` 对齐）

## WebSocket

- 仪表盘 `/ws/alerts?token=...`（JWT 查询参数，ADR-011）
- 收到 `alert` / `recovery` 刷新 stats，勿阻塞 UI 线程

## 安全（XSS）

- 禁止 `${userInput}` 直接插入 `innerHTML` 或 Alpine `x-html`
- 用户/服务器名等用 `textContent` 或 Alpine 文本绑定

## WebSSH

- `terminal.html`：xterm.js + Koko 协议；resize 随窗口
- 关闭码 4003 = 凭据/授权失败

## 验收

改 UI 后浏览器实机验证：Console 无报错、Network 无 404/500、登录→核心流程可走通。