initial: Hermes Glass UI personal fork + deployment memory

2026-04-21 11:33:43 +08:00
commit 2595306bcc
11 changed files with 8395 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+deploy/secrets/
+*.pem
+*.key
+*.htpasswd*
+.env
+.env.local
--- a/.memory/deployment-kang.md
+++ b/.memory/deployment-kang.md
@@ -0,0 +1,145 @@
+---
+name: Hermes Glass UI 个人版 · kang-kang.com 部署
+description: 从公司版 hermes.milejoy.com fork + 合规隔离重建的个人 VPS 部署完整细节
+type: project
+---
+
+# 架构
+
+```
+浏览器
+  ↓ https://hermes.kang-kang.com/
+Coolify Traefik (443, letsencrypt 自动签)
+  ↓ Host(`hermes.kang-kang.com`) → http://10.0.0.1:8088
+宿主 nginx 1.24 (listen 10.0.0.1:8088, /etc/nginx/sites-available/hermes.kang-kang.com)
+  ├─ /login.html + /_auth/verify + /_auth/logout   cookie 门禁
+  ├─ /                                              /var/www/hermes-kang/（Glass UI 静态）
+  ├─ /v1/ + /api/v1/(rewrite) + /api/jobs          注入 Bearer → LXC
+  ├─ /memory/ + /hermes-skills/ + /classic/        空目录占位
+  └─ /health                                        免门禁
+Incus LXC hermes-personal (10.3.73.137, Debian trixie, privileged + nesting)
+  └─ Docker 26.1.5 (hermes-agent container)
+      └─ Hermes Agent v0.7, gateway run, 0.0.0.0:8642
+          └─ OpenRouter → google/gemini-3.1-pro-preview
+```
+
+# 关键决策
+
+## 为什么用 Debian trixie 不用 Ubuntu 24.04
+- Ubuntu 24.04 + Docker 29 在非/特权 LXC 内启动容器报 `net.ipv4.ip_unprivileged_port_start: permission denied`
+- Debian trixie + Docker 26 没这个 bug（公司版 hermes-box 用的就是这个组合，直接照搬）
+- 也加了 `security.syscalls.intercept.mknod/setxattr=true`（跟公司版对齐）
+
+## 为什么宿主 nginx 听 10.0.0.1:8088 不是 127.0.0.1:8088
+- Coolify-proxy (Traefik) 跑在 docker coolify 网络，从容器内访问宿主要走 docker0 gateway
+- 宿主 docker0 IP 是 `10.0.0.1`（非标准，Coolify 自定义）
+- 127.0.0.1 从 Traefik 容器里访问是容器自己的 localhost，不是宿主
+- Traefik 容器 /etc/hosts 有 `10.0.0.1 host.docker.internal` —— 用宿主 docker0 IP 直连宿主 nginx
+
+## 为什么 gitea.yaml 和 notebooklm-mcp.yaml 被改了
+- Traefik watcher 解析 `dynamic/` 目录时遇到这两个文件里 `dialTimeout/responseHeaderTimeout` **不在 forwardingTimeouts 下**，报 `field not found`
+- 这个错误**阻止了整个 directory 的 reload**（不是 per-file 隔离），所以我新写的 hermes-kang.yaml 一直没被 pick up
+- 修复：把两个文件里的 `dialTimeout`/`responseHeaderTimeout` 包到 `forwardingTimeouts:` 下（Traefik v3 正确嵌套）
+- 备份：`gitea.yaml.bak-<ts>`, `notebooklm-mcp.yaml.bak-<ts>`
+- gitea/lobehub/notebooklm-mcp 都继续工作（verified via curl 200/302）
+
+## 为什么不用 Traefik basicauth middleware / forwardAuth sidecar
+- 保留公司版的自定义 Liquid Glass login.html + cookie 门禁体验
+- 单用户场景 Authelia sidecar 不划算
+- nginx 熟悉度高，排障快
+
+# 凭证
+
+存 `credentials.md` 不在本文件重复。
+
+# 文件清单
+
+## 宿主 76.13.31.179
+
+| 路径 | 作用 | 备注 |
+|---|---|---|
+| `/etc/nginx/sites-available/hermes.kang-kang.com` | nginx 站点，listen 10.0.0.1:8088 | sites-enabled 软链已建 |
+| `/etc/nginx/.htpasswd-hermes-kang` | bcrypt 密码 | 只 `kang` 一个用户 |
+| `/data/coolify/proxy/dynamic/hermes-kang.yaml` | Traefik 路由+letsencrypt | owner 9999:root, mode 700 |
+| `/var/www/hermes-kang/` | Glass UI 静态 | rsync 自本机个人版 src/ |
+| `/var/www/hermes-memory-kang/` | `/memory/` 路由空目录 | 自己以后填 |
+| `/var/www/hermes-skills-kang/` | `/hermes-skills/` 路由空目录 | 自己以后填 |
+| `/opt/hermes-build/` | 镜像 build 源码（rsync 自本机）| 32MB |
+| `/tmp/hermes-build.log` | build 过程 log | 留作参考 |
+
+## Incus LXC hermes-personal
+
+| 路径 | 作用 |
+|---|---|
+| `/opt/hermes-agent/docker-compose.yml` | compose |
+| `/opt/hermes-agent/config.yaml` | Hermes gateway 配置（OpenRouter + gemini-3.1-pro-preview）|
+| `/opt/hermes-agent/.env` | `OPENROUTER_API_KEY` + `API_SERVER_KEY`, mode 600 |
+| `/opt/hermes-agent/data/` | Hermes workspace（HERMES_HOME）|
+
+# 常用操作
+
+## 改前端代码后同步
+```bash
+cd ~/Projects/code/20260421-hermes-glass-ui-personal
+# 编辑 src/*
+rsync -az --delete src/ root@76.13.31.179:/var/www/hermes-kang/
+# sw.js 如需强刷：bump CACHE 版本号
+```
+
+## 改后端配置/模型
+```bash
+ssh root@76.13.31.179
+incus exec hermes-personal -- bash
+cd /opt/hermes-agent
+vi config.yaml           # 改模型
+vi .env                  # 改 key
+docker compose down && docker compose up -d
+# ⚠️ docker restart 不 reload env_file，必须 down + up
+```
+
+## 换 OpenRouter key
+```bash
+incus exec hermes-personal -- bash -c "sed -i 's|^OPENROUTER_API_KEY=.*|OPENROUTER_API_KEY=<新key>|' /opt/hermes-agent/.env && cd /opt/hermes-agent && docker compose down && docker compose up -d"
+```
+
+## 查日志
+```bash
+incus exec hermes-personal -- docker logs hermes-agent --tail 50
+ssh root@76.13.31.179 tail -f /var/log/nginx/error.log
+ssh root@76.13.31.179 docker logs coolify-proxy --since 2m 2>&1 | grep -i hermes
+```
+
+# 不破坏的约束
+
+- ✅ 不碰 Coolify 现有 22+ 容器 + Coolify-proxy 本体
+- ✅ 不碰 `/opt/lobechat-mirror/` 独立 docker compose
+- ✅ 不碰 `/opt/gitea/` `/opt/postgres/` `/opt/mysql/`
+- ✅ hermes-kang 走独立 LXC + 独立 nginx 站点 + 独立 Traefik dynamic file
+- ✅ 宿主 nginx 独自启动（systemd nginx.service 新启用）
+- ✅ 禁用了 sites-enabled/default 和 sites-enabled/styles.kang-kang.com（冲突 listen 80，且 styles 实际由 style-gallery-nginx docker 容器跑）
+
+# 与公司版的差异
+
+| 维度 | 公司版 hermes.milejoy.com | 个人版 hermes.kang-kang.com |
+|---|---|---|
+| 宿主 | 公司 VPS 2.24.28.41 | 个人 VPS 76.13.31.179 |
+| 入口 | 宿主 nginx 直听 443 | Coolify Traefik 443 → 宿主 nginx 10.0.0.1:8088 |
+| 证书 | certbot ai.milejoy.com 复用 | Traefik letsencrypt certresolver |
+| LXC | hermes-box, Debian trixie, 10.146.223.10 | hermes-personal, Debian trixie, 10.3.73.137 |
+| 模型 | Gemini 3 Pro Preview 直连（GOOGLE_API_KEY）| Gemini 3.1 Pro Preview via OpenRouter |
+| 认证 | basic auth boss/mile | basic auth kang |
+| Skills/Memory | 78 真实 skill + 同步真实 memory | 空目录（未来按需填充） |
+
+# 合规边界（离职场景）
+
+✅ **可搬**：
+- 个人编写的 Glass UI 前端源码（fork 到 `code/20260421-hermes-glass-ui-personal/`）
+- Hermes Agent 开源代码（NousResearch 上游）
+- 架构和 nginx/Traefik 配置思路
+
+❌ **未搬**：
+- 公司 API Server Key `ffd2f8af...`（重新用 openssl 生成新的）
+- 公司 GOOGLE_API_KEY（换 OpenRouter + 个人 key）
+- 公司 LXC 里的 memory/skills/sessions/对话历史（个人版从零起）
+- 公司 basic auth 账号 `boss/mile`（改 `kang` 单账号）
+- 公司 nginx 证书（letsencrypt 新签）
--- a/.project.json
+++ b/.project.json
@@ -0,0 +1,9 @@
+{
+  "name": "Hermes Glass UI · 个人版",
+  "description": "Fork from 20260414-hermes-glass-ui, 单用户个人 VPS 部署 (hermes.kang-kang.com)",
+  "created": "2026-04-21",
+  "kind": "app",
+  "status": "active",
+  "stack": ["HTML/CSS/JS", "Liquid Glass UI", "LXC", "OpenRouter"],
+  "urls": [{ "label": "个人 VPS", "url": "https://hermes.kang-kang.com" }]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,22 @@
+# Hermes Glass UI · 个人版
+
+基于 `business/20260414-hermes-glass-ui` fork,精简为个人单用户版本。
+
+## 部署
+
+- **线上**: https://hermes.kang-kang.com/
+- **宿主**: Hetzner VPS (`76.13.31.179`)
+- **入口**: Coolify Traefik (443) → 宿主 nginx (`127.0.0.1:8088`, cookie 门禁) → Incus LXC `hermes-personal` → Docker hermes-agent (8642)
+- **模型**: Google Gemini 3 Pro Preview (via OpenRouter)
+- **登录**: 单用户 `kang`
+
+## 与公司版的差异
+
+| 维度 | 公司版 (hermes.milejoy.com) | 个人版 (hermes.kang-kang.com) |
+|---|---|---|
+| 用户 | `boss` / `mile` 双账号 | `kang` 单账号 |
+| 后端 | Incus LXC hermes-box + Docker (Gemini 3 Pro via 直连) | Incus LXC hermes-personal + Docker (Gemini 3 Pro via OpenRouter) |
+| 入口 | 宿主 nginx 直听 443 | Coolify Traefik 443 → 宿主 nginx 内部 8088 |
+| 证书 | certbot (ai.milejoy.com 复用) | Traefik + letsencrypt certresolver |
+
+详见 `.memory/deployment-kang.md`。
--- a/src/app.js
+++ b/src/app.js
--- a/src/icon.svg
+++ b/src/icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff6900"/>
+      <stop offset="100%" stop-color="#ff8830"/>
+    </linearGradient>
+    <radialGradient id="shine" cx="30%" cy="28%" r="55%">
+      <stop offset="0%" stop-color="rgba(255,255,255,0.55)"/>
+      <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
+    </radialGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="url(#bg)"/>
+  <rect width="512" height="512" rx="112" fill="url(#shine)"/>
+  <text x="256" y="355" font-family="Didot, 'Bodoni 72', 'SF Pro Display', serif" font-size="300" font-weight="800" text-anchor="middle" fill="#1a0f08" letter-spacing="-10">H</text>
+  <text x="256" y="425" font-family="Didot, 'Bodoni 72', 'SF Pro Display', serif" font-size="42" font-weight="700" text-anchor="middle" fill="#1a0f08" letter-spacing="8" opacity="0.85">HERMÈS</text>
+</svg>
--- a/src/index.html
+++ b/src/index.html
--- a/src/login.html
+++ b/src/login.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#0c0e12">
+<title>爱马仕 AI · 登录</title>
+<link rel="icon" type="image/svg+xml" href="./icon.svg">
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --orange: #ff6900;
+  --orange-2: #ff8830;
+  --orange-3: #ffa85a;
+  --bg-0: #0c0e12;
+  --text: #f5f6f8;
+  --text-dim: rgba(245,246,248,0.72);
+  --text-dim2: rgba(245,246,248,0.48);
+  --text-dim3: rgba(245,246,248,0.28);
+  --line: rgba(255,255,255,0.10);
+  --line-strong: rgba(255,255,255,0.18);
+  --err: #ff5d7a;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+  color: var(--text);
+  background: var(--bg-0);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+/* ========== 背景 ========== */
+.bg {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  background:
+    radial-gradient(ellipse at 10% 10%, #1a2040 0%, var(--bg-0) 55%),
+    radial-gradient(ellipse at 90% 90%, #2a1030 0%, transparent 60%),
+    var(--bg-0);
+  overflow: hidden;
+}
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  mix-blend-mode: screen;
+  animation: float 60s ease-in-out infinite;
+}
+.b1 { width: 720px; height: 720px; top: -180px; left: -120px; background: #3b6eff; opacity: 0.55; }
+.b2 { width: 820px; height: 820px; bottom: -220px; right: -160px; background: #a33dff; opacity: 0.5; animation-delay: -15s; }
+.b3 { width: 480px; height: 480px; top: 35%; left: 58%; background: #ff6900; opacity: 0.22; animation-delay: -30s; }
+.b4 { width: 400px; height: 400px; bottom: 15%; left: 15%; background: #ff3d70; opacity: 0.3; animation-delay: -45s; }
+@keyframes float {
+  0%, 100% { transform: translate3d(0,0,0) scale(1); }
+  25% { transform: translate3d(70px,-50px,0) scale(1.08); }
+  50% { transform: translate3d(-40px,60px,0) scale(0.94); }
+  75% { transform: translate3d(50px,40px,0) scale(1.05); }
+}
+@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
+
+/* 网格噪点 */
+.grid-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
+}
+
+/* ========== 容器 ========== */
+.wrap {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+.card {
+  width: 100%;
+  max-width: 960px;
+  min-height: 560px;
+  display: grid;
+  grid-template-columns: 1.15fr 1fr;
+  background: rgba(255,255,255,0.045);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  backdrop-filter: blur(36px) saturate(1.35);
+  -webkit-backdrop-filter: blur(36px) saturate(1.35);
+  box-shadow:
+    0 40px 100px rgba(0,0,0,0.6),
+    0 0 0 1px rgba(255,255,255,0.04),
+    inset 0 1px 0 rgba(255,255,255,0.18),
+    inset 0 -1px 0 rgba(255,255,255,0.04);
+  overflow: hidden;
+  animation: cardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(16px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+
+/* ========== 左侧品牌区 ========== */
+.showcase {
+  position: relative;
+  padding: 56px 56px 48px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background:
+    radial-gradient(ellipse at 20% 30%, rgba(255,105,0,0.18) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 80%, rgba(255,105,0,0.08) 0%, transparent 60%);
+  border-right: 1px solid var(--line);
+  overflow: hidden;
+}
+.showcase::before {
+  content: "";
+  position: absolute;
+  top: -20%;
+  left: -20%;
+  width: 140%;
+  height: 140%;
+  background: radial-gradient(circle at 30% 40%, rgba(255,105,0,0.25) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+.mega-tag {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 52px 36px;
+  background: var(--orange);
+  color: #111;
+  border-radius: 10px;
+  line-height: 1;
+  font-family: "Didot", "Bodoni 72", "SF Pro Display", serif;
+  font-weight: 700;
+  box-shadow:
+    0 24px 70px rgba(255,105,0,0.55),
+    0 0 0 1px rgba(26,15,8,0.3),
+    inset 0 2px 0 rgba(255,255,255,0.35),
+    inset 0 -2px 0 rgba(0,0,0,0.18);
+  align-self: flex-start;
+}
+.mega-tag::before {
+  content: "";
+  position: absolute;
+  inset: 7px;
+  border: 1.5px solid rgba(26,15,8,0.42);
+  border-radius: 5px;
+  pointer-events: none;
+}
+.mega-tag .mt-top {
+  font-size: 52px;
+  letter-spacing: 8px;
+}
+.mega-tag .mt-mid {
+  font-size: 13px;
+  margin-top: 10px;
+  letter-spacing: 5.5px;
+  opacity: 0.78;
+}
+
+.showcase-text {
+  position: relative;
+  margin-top: 40px;
+}
+.mega-eyebrow {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 4px;
+  color: var(--orange-3);
+  margin-bottom: 14px;
+  text-transform: uppercase;
+}
+.mega-title {
+  font-size: 64px;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -2.5px;
+  background: linear-gradient(135deg, #fff 0%, #ffd8a0 60%, #ff8830 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-bottom: 10px;
+}
+.mega-title .mega-ai {
+  font-family: "Didot", "Bodoni 72", "SF Pro Display", serif;
+  font-weight: 700;
+  font-style: italic;
+  font-size: 0.88em;
+  background: linear-gradient(135deg, #ffa85a 0%, #ff6900 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  padding-left: 4px;
+}
+.mega-cn {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 16px;
+  letter-spacing: 0.5px;
+}
+.mega-sub {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-dim2);
+  line-height: 1.75;
+  max-width: 380px;
+}
+
+.showcase-foot {
+  position: relative;
+  display: flex;
+  gap: 24px;
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid var(--line);
+  font-size: 11px;
+  color: var(--text-dim3);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+.showcase-foot b { color: var(--orange-3); font-weight: 700; letter-spacing: 0.8px; }
+
+/* ========== 右侧表单区 ========== */
+.form-side {
+  padding: 56px 52px 48px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.form-title {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.3px;
+  margin-bottom: 6px;
+}
+.form-sub {
+  font-size: 13px;
+  color: var(--text-dim2);
+  margin-bottom: 36px;
+}
+
+.field { margin-bottom: 18px; }
+.field label {
+  display: block;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--text-dim);
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+.field input {
+  width: 100%;
+  padding: 15px 18px;
+  background: rgba(0,0,0,0.28);
+  border: 1px solid var(--line-strong);
+  color: var(--text);
+  border-radius: 13px;
+  font-size: 15px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+}
+.field input:focus {
+  border-color: var(--orange);
+  background: rgba(0,0,0,0.35);
+  box-shadow: 0 0 0 4px rgba(255,105,0,0.13);
+}
+.field input::placeholder { color: var(--text-dim3); }
+
+.err {
+  display: none;
+  margin: 6px 0 16px;
+  padding: 12px 16px;
+  background: rgba(255,93,122,0.1);
+  border: 1px solid rgba(255,93,122,0.32);
+  color: #ffb6c3;
+  font-size: 12.5px;
+  font-weight: 600;
+  border-radius: 11px;
+}
+.err.show { display: block; animation: shake 0.32s; }
+@keyframes shake {
+  0%,100% { transform: translateX(0); }
+  20%,60% { transform: translateX(-5px); }
+  40%,80% { transform: translateX(5px); }
+}
+
+.btn {
+  width: 100%;
+  padding: 17px;
+  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
+  color: #1a0f08;
+  border: 0;
+  border-radius: 13px;
+  font-size: 15px;
+  font-weight: 800;
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: 10px;
+  letter-spacing: 1px;
+  box-shadow:
+    0 12px 32px rgba(255,105,0,0.4),
+    inset 0 1px 0 rgba(255,255,255,0.4),
+    inset 0 -1px 0 rgba(0,0,0,0.15);
+  transition: transform 0.15s, box-shadow 0.2s;
+}
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 18px 40px rgba(255,105,0,0.5),
+    inset 0 1px 0 rgba(255,255,255,0.4),
+    inset 0 -1px 0 rgba(0,0,0,0.15);
+}
+.btn:active { transform: translateY(0); }
+.btn:disabled { opacity: 0.55; cursor: wait; transform: none; }
+
+.shortcuts {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid var(--line);
+}
+.shortcut-chip {
+  flex: 1;
+  padding: 9px 14px;
+  font-size: 11.5px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  transition: all 0.15s;
+}
+.shortcut-chip:hover {
+  background: rgba(255,105,0,0.12);
+  border-color: rgba(255,105,0,0.38);
+  color: var(--orange-3);
+}
+.shortcut-chip::before {
+  content: "@ ";
+  opacity: 0.6;
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 840px) {
+  .card {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+    min-height: 0;
+  }
+  .showcase {
+    padding: 44px 40px 36px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .mega-tag { padding: 24px 36px 28px; align-self: center; }
+  .mega-tag .mt-top { font-size: 38px; letter-spacing: 6px; }
+  .mega-tag .mt-mid { font-size: 11px; letter-spacing: 4px; }
+  .showcase-text { margin-top: 28px; text-align: center; }
+  .mega-title { font-size: 38px; }
+  .mega-sub { max-width: 100%; }
+  .showcase-foot { justify-content: center; flex-wrap: wrap; }
+  .form-side { padding: 40px 36px 36px; }
+}
+@media (max-width: 480px) {
+  .wrap { padding: 14px; }
+  .showcase { padding: 32px 24px 28px; }
+  .mega-tag { padding: 18px 28px 22px; }
+  .mega-tag .mt-top { font-size: 30px; letter-spacing: 5px; }
+  .mega-title { font-size: 30px; }
+  .form-side { padding: 32px 24px 28px; }
+}
+</style>
+</head>
+<body>
+
+<div class="bg">
+  <div class="blob b1"></div>
+  <div class="blob b2"></div>
+  <div class="blob b3"></div>
+  <div class="blob b4"></div>
+</div>
+<div class="grid-overlay"></div>
+
+<div class="wrap">
+  <div class="card">
+
+    <!-- 左侧品牌 showcase -->
+    <div class="showcase">
+      <div class="mega-tag">
+        <span class="mt-top">HERMÈS</span>
+        <span class="mt-mid">PARIS</span>
+      </div>
+
+      <div class="showcase-text">
+        <div class="mega-eyebrow">YOUR PRIVATE</div>
+        <div class="mega-title">爱马仕</div>
+        <div class="mega-cn">你的私人 AI 助手</div>
+        <div class="mega-sub">
+          多智能体 · Skill 编排 · 75 真实 Hermes 技能库<br>
+          私密对话不外发 · 24 小时单点登录
+        </div>
+      </div>
+
+      <div class="showcase-foot">
+        <span><b>Kang</b> · 个人版</span>
+        <span>Gemini 3 Pro</span>
+        <span>v0.3</span>
+      </div>
+    </div>
+
+    <!-- 右侧表单 -->
+    <div class="form-side">
+      <div class="form-title">欢迎回来</div>
+      <div class="form-sub">请输入你的账号和密码继续</div>
+
+      <form id="loginForm" autocomplete="on">
+        <div class="field">
+          <label for="user">账 号</label>
+          <input type="text" id="user" name="username" placeholder="kang" autocomplete="username" required autofocus>
+        </div>
+        <div class="field">
+          <label for="pass">密 码</label>
+          <input type="password" id="pass" name="password" placeholder="••••••••••" autocomplete="current-password" required>
+        </div>
+        <div class="err" id="err">账号或密码错误</div>
+        <button type="submit" class="btn" id="btn">登 录</button>
+      </form>
+
+      <div class="shortcuts">
+        <button type="button" class="shortcut-chip" onclick="document.getElementById('user').value='kang';document.getElementById('pass').focus()">kang</button>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+const form = document.getElementById("loginForm");
+const btn = document.getElementById("btn");
+const err = document.getElementById("err");
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  err.classList.remove("show");
+  btn.disabled = true;
+  btn.textContent = "验证中…";
+
+  const user = document.getElementById("user").value.trim();
+  const pass = document.getElementById("pass").value;
+
+  try {
+    const res = await fetch("/_auth/verify", {
+      method: "GET",
+      credentials: "same-origin",
+      headers: {
+        "Authorization": "Basic " + btoa(user + ":" + pass),
+      },
+    });
+
+    if (res.ok) {
+      btn.textContent = "登录成功 →";
+      setTimeout(() => { location.href = "/"; }, 220);
+    } else {
+      showError(res.status === 401 ? "账号或密码错误" : "HTTP " + res.status);
+    }
+  } catch (e) {
+    showError("网络错误: " + (e.message || e));
+  }
+});
+
+function showError(msg) {
+  err.textContent = msg;
+  err.classList.add("show");
+  btn.disabled = false;
+  btn.textContent = "登 录";
+  document.getElementById("pass").select();
+}
+
+if (document.cookie.split("; ").some(c => c.startsWith("hermes_auth="))) {
+  location.href = "/";
+}
+</script>
+
+</body>
+</html>
--- a/src/manifest.webmanifest
+++ b/src/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "name": "爱马仕 Hermes",
+  "short_name": "Hermes",
+  "description": "私人 AI 助手 · Liquid Glass UI · Gemini 3 Pro",
+  "start_url": "./",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0a0f1e",
+  "theme_color": "#0a0f1e",
+  "icons": [
+    { "src": "./icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" },
+    { "src": "./icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "./icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
+  ]
+}
--- a/src/styles.css
+++ b/src/styles.css
--- a/src/sw.js
+++ b/src/sw.js
@@ -0,0 +1,35 @@
+// 爱马仕 Hermes · 轻量 Service Worker
+// 只缓存静态壳,API 请求始终联网
+const CACHE = "hermes-ui-v6";
+const ASSETS = [
+  "./",
+  "./index.html",
+  "./styles.css",
+  "./app.js",
+  "./manifest.webmanifest",
+  "./icon.svg",
+];
+
+self.addEventListener("install", (e) => {
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(ASSETS)));
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (e) => {
+  e.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (e) => {
+  const url = new URL(e.request.url);
+  // API 请求直通
+  if (url.pathname.startsWith("/api/")) return;
+  // 其他静态资源走 cache-first
+  e.respondWith(
+    caches.match(e.request).then((hit) => hit || fetch(e.request))
+  );
+});