pi-web-ui 0.77.0 → 0.79.0

package/CHANGELOG.md

@@ -8,9 +8,49 @@
 每个版本的内容按"实际合入该版本发布的提交"归档（以 `package.json` 的 version 变更提交为准），
 而不是按提交日期聚类——连续快速发布的 patch 版本以此为准最准确。
 
-## [Unreleased]
+## [0.79.0] — 2026-09-11
 
-暂无未发布内容。
+### Added
+
+- 聊天消息支持渲染 LaTeX 公式（issue #116）：`$...$` 行内、`$$...$$` 独立行块走 KaTeX 渲染（`remark-math + rehype-katex`，字体随包离线可用）；代码围栏/行内 code 不受影响，公式写坏了只显示红色源码不打断整条消息。
+- 排队/插队气泡新增「撤回」按钮 ↩（#118）：点一下把该条消息从队列取回、文字落回输入框（输入框非空时追加到末尾，绝不覆盖正在打的字），改完直接重发；连续撤回多条按序追加。队列里只存文本，撤回只回文字（附件不恢复）。
+- 新增 paper（暖纸）/ mist（雾蓝灰）/ sakura（樱粉）三套浅色主题：主题切换器与 `make-light-theme.mjs` 生成器同步增强，终端配色跟随主题；`vscode-editor` / `db-client` 插件同步跟随亮色（见下 Fixed）。
+
+### Fixed
+
+- `vscode-editor` 插件跟随亮色主题：之前文件树/标签栏/弹窗底色引用了主应用不存在的 `--bg-elev0/1` 变量，亮色下永远回退到深色硬编码值；编辑器（CodeMirror `oneDark`）与底部 SSH 终端配色也是写死的深色。现在底色改走 `--bg/--bg-elev`，编辑器亮色用跟随 `--bg/--text/--accent` 的浅色壳（暗色仍是 `oneDark`，Compartment 热切换），终端读 `--term-*` 调色板；主应用切换主题时（`pi-web-ui:theme-change`）已打开的编辑器与存活终端一起换肤，无需重载。
+- `db-client` 插件跟随亮色主题：同上，文件树/主区/表头/弹窗输入框底色引用的 `--bg-elev0/1` 改走 `--bg/--bg-elev`（该插件无自绘深色组件，一次变量映射即完整跟随）。
+
+<!-- auto-i18n:start -->
+### i18n
+
+- 前端新增 key（1）：`queueRecallTip`
+<!-- auto-i18n:end -->
+
+## [0.78.0] — 2026-09-11
+
+### Added
+
+- 文件预览支持渲染 HTML（`README.html` 这类文件不再只看到源码）：打开 `.html` / `.htm` / `.xhtml` 默认是**渲染视图**，工具栏的 👁/`</>` 与 Markdown 一样一键切源码，进编辑态自动落到源码。渲染走**沙箱 iframe**，页面里的 JavaScript 默认**不执行**（工具条显示「🛡 脚本已禁用（静态预览）」），要跑脚本得对**当前这个文件**点「启用脚本」显式放开（切文件即复位、不持久化、不写进任何配置）；无论开关如何，iframe 一律**不带 `allow-same-origin`** —— 页面拿不到本应用的同源/DOM/cookie/存储，表单提交与顶层跳转同样被挡（脚本开时工具条换成「⚠ 脚本已启用」并说明后果）。渲染地址是新增的目录映射路由，页面里的**相对引用**（`<link href="../web/src/styles.css">`、`./app.js`、图片…）按浏览器正常语义解析加载：
+  - `/api/preview/<工作区相对路径>`（机器浏览的绝对路径用 `__abs__/` 前缀），各路径段 URI 编码；`.html` 文档下发 `Content-Security-Policy: sandbox`（`?allowJs=1` 时 `sandbox allow-scripts`，**永不**加 `allow-same-origin`）与 `X-Content-Type-Options: nosniff`，其余子资源按真实 content-type 直送；`..` 越界由 `workspacePath()` 拒绝（400 `path outside workspace`）。
+  - `/api/file` 直出的 HTML 也带上 `sandbox` CSP——把预览地址单独在新标签页打开，一样拿不到应用源。
+
+### Fixed
+
+- 重试与提示词模板「直发」补记模型使用次数：这两个入口都是「沿用当前模型再发一轮」，之前不计入 `model-usage`，模型下拉的「按使用次数排序」会漏掉这部分（现在与正常发送一致；模板直发记的是当前模型）。
+- `vscode-editor` 插件中止上传时临时文件可能残留（Windows）：`abortUploadEntry` 旧写法是 `void fh.close()` 后立刻 `unlink` 并把错误吞掉，而 close 是异步的 —— 句柄还没关就删会 `EBUSY/EPERM`，目标目录里就留下 `.vsc-upload-*.part`。现在改成 `await close()` → `await unlink()`，且 `upload_abort` 等清理完再回响应（客户端随后就会去核验目录）；定时清扫与 `deactivate` 两条路径改为不等（`void`）。
+
+### Changed
+
+- 排队/插队消息改成和正式用户消息**同一套气泡**（`MessageList.tsx` 的 `QueuedMessage` 复用 `.msg-user` 结构）：Markdown 渲染（代码块/列表/链接等不再是一坨纯文本）、角色行显示「你」、状态 tag（插队/排队）与移除 ✕ 排在同一行；未发送仍用**虚线边框 + 0.75 透明度**区分，服务端真正下发后直接变成正常消息气泡（外观不再跳变）。`styles.css` 里旧的 `.queued-bubble` / `.queued-text` / `.queued-remove` 一套样式一并删除。
+- 官方插件做手机竖屏（≤640px）适配，桌面端表现不变：`db-client`（连接侧栏变左滑抽屉、库表树变可折叠面板、结果表格在容器内横滑、Redis 键列表改上下排、触摸目标加大、输入框提到 16px 防 iOS 聚焦缩放）、`vscode-editor`（文件树变抽屉 + 顶栏 ☰、选中文件自动收起）、`run-trace`（三段改上下堆叠、时间轴压到 200px、回放条允许换行、触屏色块热区加大）、`webmail`、`demo-mailbox`。
+- `docs/architecture-attachments.md` 的文件预览协议补一节「HTML 渲染走目录映射的 HTTP」（沙箱策略与相对引用语义）。
+
+<!-- auto-i18n:start -->
+### i18n
+
+- 前端新增 key（8）：`showHtmlSource`、`showHtmlPreview`、`htmlJsOff`、`htmlJsOffTip`、`htmlJsOn`、`htmlJsOnTip`、`htmlEnableJs`、`htmlDisableJs`
+<!-- auto-i18n:end -->
 
 ## [0.77.0] — 2026-09-11
 
@@ -425,7 +465,9 @@
 - 0.35.1（2026-08-27）：编辑重问保留附件（#18）+ 全窗口拖放（#19）。
 - 0.29.0（2026-08-23）：全局搜索弹窗（Ctrl+K）+ 消息列表惰性窗口化。
 
-[Unreleased]: https://github.com/xing-shuyin/pi-web-ui/compare/v0.77.0...main
+[Unreleased]: https://github.com/xing-shuyin/pi-web-ui/compare/v0.79.0...main
+[0.79.0]: https://github.com/xing-shuyin/pi-web-ui/releases/tag/v0.79.0
+[0.78.0]: https://github.com/xing-shuyin/pi-web-ui/releases/tag/v0.78.0
 [0.77.0]: https://github.com/xing-shuyin/pi-web-ui/releases/tag/v0.77.0
 [0.76.0]: https://github.com/xing-shuyin/pi-web-ui/releases/tag/v0.76.0
 [0.75.0]: https://github.com/xing-shuyin/pi-web-ui/releases/tag/v0.75.0

package/dist/server/index.js

@@ -236,7 +236,12 @@ app.get("/api/file", async (req, res) => {
         const name = basename(abs);
         const kind = previewKind(name);
         const isDownload = req.query.download === "1";
-        if (!isDownload && kind !== "image" && kind !== "video") {
+        // HTML files preview through a sandboxed <iframe> in the file modal
+        // (FilePreview.tsx). They are text as far as previewKind goes, so
+        // allowlist them explicitly here.
+        const lower = name.toLowerCase();
+        const isHtmlPreview = lower.endsWith(".html") || lower.endsWith(".htm") || lower.endsWith(".xhtml");
+        if (!isDownload && kind !== "image" && kind !== "video" && !isHtmlPreview) {
             res.status(400).end("not a previewable media file");
             return;
         }
@@ -251,6 +256,20 @@ app.get("/api/file", async (req, res) => {
             res.download(abs, name);
         }
         else {
+            if (isHtmlPreview) {
+                // Sandbox even a top-level navigation to this URL: a workspace
+                // HTML file must never get our origin (it could otherwise read
+                // the token cookie). The modal iframe carries its own sandbox
+                // attribute as well (defense in depth).
+                //
+                // ?allowJs=1 is the explicit per-file opt-in from the preview
+                // modal ("启用脚本"): scripts run, but still in an opaque
+                // origin — no DOM/cookie/storage access to our app, no forms,
+                // no top-navigation. NEVER add allow-same-origin here.
+                const allowJs = req.query.allowJs === "1";
+                res.setHeader("Content-Security-Policy", allowJs ? "sandbox allow-scripts" : "sandbox");
+                res.setHeader("X-Content-Type-Options", "nosniff");
+            }
             res.sendFile(abs);
         }
     }
@@ -258,6 +277,68 @@ app.get("/api/file", async (req, res) => {
         res.status(404).end("not found");
     }
 });
+/**
+ * Directory-mapped preview: serves a workspace file at a URL that mirrors its
+ * directory location, so an HTML preview's RELATIVE subresources
+ * (<link href="../web/src/styles.css">, <img src="./x.png">, <script
+ * src="./app.js">, …) resolve and load with normal browser semantics. The
+ * iframe document URL itself carries the file's directory — no HTML rewriting.
+ *
+ *   /api/preview/<workspace-rel-path>?clientId=…[&allowJs=1]
+ *   /api/preview/__abs__/<absolute-wire-path>?clientId=…[&allowJs=1]
+ *   (each path segment URI-encoded; ".." is normalized by the browser before
+ *   the request is sent, workspace containment is still re-checked here)
+ *
+ * Same footing as /api/file: workspace containment enforced, HTML documents
+ * get a sandboxed CSP (?allowJs=1 relaxes scripts only — never same-origin),
+ * everything else streams with its real content type.
+ */
+app.get("/api/preview/*", async (req, res) => {
+    try {
+        const captured = String(req.params[0] ?? "");
+        const ABS_MARKER = "__abs__/";
+        const cid = typeof req.query.clientId === "string" ? req.query.clientId : "";
+        const cs = cid ? service.get(cid) : undefined;
+        const root = cs?.cwd ?? CWD;
+        // Express decodes %XX in the wildcard, so this is back to the wire
+        // form (filenames never contain "/", so per-segment encoding from
+        // the client round-trips exactly).
+        let abs;
+        if (captured === "__abs__" || captured.startsWith(ABS_MARKER)) {
+            // Machine browsing: absolute wire path ("C:/..." / "/...").
+            const wire = captured.slice(ABS_MARKER.length);
+            if (!isAbsoluteWirePath(wire)) {
+                res.status(400).end("bad absolute preview path");
+                return;
+            }
+            abs = wireToAbs(wire);
+        }
+        else {
+            const wp = workspacePath(root, captured);
+            if (!wp) {
+                res.status(400).end("path outside workspace");
+                return;
+            }
+            abs = wp.abs;
+        }
+        const name = basename(abs);
+        const st = await stat(abs);
+        if (!st.isFile()) {
+            res.status(400).end("not a file");
+            return;
+        }
+        res.setHeader("X-Content-Type-Options", "nosniff");
+        const lower = name.toLowerCase();
+        if (lower.endsWith(".html") || lower.endsWith(".htm") || lower.endsWith(".xhtml")) {
+            const allowJs = req.query.allowJs === "1";
+            res.setHeader("Content-Security-Policy", allowJs ? "sandbox allow-scripts" : "sandbox");
+        }
+        res.sendFile(abs);
+    }
+    catch {
+        res.status(404).end("not found");
+    }
+});
 // Production: serve the built frontend from web/dist. Resolve relative to this
 // module so it works when installed as a package (global/npx/Docker), not just
 // from the repo root. In dev, Vite serves the UI on :5173 and proxies /ws.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-web-ui",
-	"version": "0.77.0",
+	"version": "0.79.0",
 	"description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
 	"license": "MIT",
 	"author": {
@@ -83,15 +83,18 @@
 		"compression": "^1.8.1",
 		"express": "^4.21.2",
 		"highlight.js": "^11.10.0",
+		"katex": "^0.16.47",
 		"node-pty": "^1.1.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.7.0",
 		"react-markdown": "^9.0.1",
 		"rehype-highlight": "^7.0.1",
+		"rehype-katex": "^7.0.1",
 		"rehype-raw": "^7.0.0",
 		"remark-breaks": "^4.0.0",
 		"remark-gfm": "^4.0.0",
+		"remark-math": "^6.0.0",
 		"typebox": "^1.3.14",
 		"ws": "^8.18.0"
 	},

package/themes/mist.css

@@ -0,0 +1,179 @@
+/* theme-name: 雾蓝灰 */
+/* theme-name-en: Misty Blue Gray */
+:root {
+	color-scheme: light;
+	--bg: #e9eef4;
+	--bg-elev: #f8fafc;
+	--bg-elev2: #dde5ec;
+	--border: #cbd5e1;
+	--border-soft: #dde5ec;
+	--text: #1e293b;
+	--text-dim: #475569;
+	--text-faint: #94a3b8;
+	--accent: #0284c7;
+	--accent-soft: rgba(2, 132, 199, 0.12);
+	--green: #059669;
+	--green-soft: rgba(5, 150, 105, 0.12);
+	--red: #dc2626;
+	--red-soft: rgba(220, 38, 38, 0.1);
+	--amber: #d97706;
+	--term-bg: #f8fafc;
+	--term-fg: #1e293b;
+	--term-cursor: #0284c7;
+	--term-cursor-accent: #ffffff;
+	--term-selection: rgba(2, 132, 199, 0.28);
+	--term-black: #dbe3ec;
+	--term-red: #dc2626;
+	--term-green: #059669;
+	--term-yellow: #d97706;
+	--term-blue: #2563eb;
+	--term-magenta: #9333ea;
+	--term-cyan: #0e7490;
+	--term-white: #1e293b;
+	--term-bright-black: #94a3b8;
+	--term-bright-red: #dc2626;
+	--term-bright-green: #059669;
+	--term-bright-yellow: #d97706;
+	--term-bright-blue: #2563eb;
+	--term-bright-magenta: #9333ea;
+	--term-bright-cyan: #0e7490;
+	--term-bright-white: #020617;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--mermaid-font-size: 12px;
+	--tooltip-bg: #ffffff;
+	--code-bg: #dde5ec;
+	--code-text: #1e293b;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #dc2626;
+	--red-text: #dc2626;
+	--amber-text: #b45309;
+	--info-blue: #2563eb;
+	--link: #0284c7;
+	--link-hover: #0369a1;
+	--link-soft: #0284c7;
+	--md-strong: #0f172a;
+	--skill-blue: #0284c7;
+	--plugin-purple: #b58cff;
+	--auth-green: #059669;
+	--scroll-thumb: #b6c2d1;
+	--scroll-thumb-hover: #94a3b8;
+	--notice-err-bg: #f9dee0;
+	--notice-warn-bg: #f0e6cb;
+	--notice-info-bg: #d9e6f5;
+	--notice-err-border: #dc2626;
+	--notice-warn-border: #b45309;
+	--notice-info-border: #2563eb;
+	--send-blue: #0284c7;
+	--send-blue-hover: #0369a1;
+	--brand-grad-a: #38bdf8;
+	--brand-grad-b: #0284c7;
+	--on-amber: #1a1a1a;
+	--search-active-fg: #1a1d26;
+	--switch-knob: #ffffff;
+	--bg-elev3: rgba(30, 58, 95, 0.05);
+	--glow-015: rgba(30, 58, 95, 0.02);
+	--glow-025: rgba(30, 58, 95, 0.02);
+	--glow-03: rgba(30, 58, 95, 0.02);
+	--glow-04: rgba(30, 58, 95, 0.03);
+	--glow-05: rgba(30, 58, 95, 0.03);
+	--glow-12: rgba(30, 58, 95, 0.08);
+	--glow-18: rgba(30, 58, 95, 0.12);
+	--glow-22: rgba(30, 58, 95, 0.15);
+	--glow-38: rgba(30, 58, 95, 0.25);
+	--control-fg: #475569;
+	--control-bg: #dde5ec;
+	--control-border: #cbd5e1;
+	--bg-image: none;
+	--bg-image-dim: 0.78;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 62%;
+	--topbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--statusbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--panel-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--card-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--chip-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
+	--msgs-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--inputbox-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
+	--menu-bg: var(--bg-elev2);
+}
+
+/* ---- syntax highlighting (overrides static github-dark import) ---- */
+.hljs {
+	color: #1e293b;
+	background: #dde5ec;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+	color: #cf222e;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+	color: #8250df;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+	color: #0550ae;
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+	color: #0a3069;
+}
+.hljs-built_in,
+.hljs-symbol {
+	color: #953800;
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+	color: #7c8da0;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+	color: #116329;
+}
+.hljs-subst {
+	color: #1e293b;
+}
+.hljs-section {
+	color: #0550ae;
+	font-weight: 700;
+}
+.hljs-bullet {
+	color: #0550ae;
+}
+.hljs-emphasis {
+	color: #1e293b;
+	font-style: italic;
+}
+.hljs-strong {
+	color: #1e293b;
+	font-weight: 700;
+}
+.hljs-addition {
+	color: #116329;
+	background: #d7e9db;
+}
+.hljs-deletion {
+	color: #82071e;
+	background: #f2d3d6;
+}

package/themes/paper.css

@@ -0,0 +1,179 @@
+/* theme-name: 暖纸 */
+/* theme-name-en: Warm Paper */
+:root {
+	color-scheme: light;
+	--bg: #f7f1e3;
+	--bg-elev: #fffdf6;
+	--bg-elev2: #efe7d3;
+	--border: #ddcfae;
+	--border-soft: #e7dcc2;
+	--text: #3f372c;
+	--text-dim: #6f6250;
+	--text-faint: #a2937a;
+	--accent: #b45309;
+	--accent-soft: rgba(180, 83, 9, 0.12);
+	--green: #15803d;
+	--green-soft: rgba(21, 128, 61, 0.12);
+	--red: #b91c1c;
+	--red-soft: rgba(185, 28, 28, 0.1);
+	--amber: #d97706;
+	--term-bg: #f7f1e3;
+	--term-fg: #3f372c;
+	--term-cursor: #b45309;
+	--term-cursor-accent: #fffdf6;
+	--term-selection: rgba(180, 83, 9, 0.28);
+	--term-black: #e2d5b8;
+	--term-red: #b91c1c;
+	--term-green: #15803d;
+	--term-yellow: #a16207;
+	--term-blue: #1d4ed8;
+	--term-magenta: #9333ea;
+	--term-cyan: #0e7490;
+	--term-white: #3f372c;
+	--term-bright-black: #a2937a;
+	--term-bright-red: #b91c1c;
+	--term-bright-green: #15803d;
+	--term-bright-yellow: #a16207;
+	--term-bright-blue: #1d4ed8;
+	--term-bright-magenta: #9333ea;
+	--term-bright-cyan: #0e7490;
+	--term-bright-white: #1c1917;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--mermaid-font-size: 12px;
+	--tooltip-bg: #fffdf6;
+	--code-bg: #efe7d3;
+	--code-text: #43382c;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #b91c1c;
+	--red-text: #b91c1c;
+	--amber-text: #92400e;
+	--info-blue: #1d4ed8;
+	--link: #9a3412;
+	--link-hover: #7c2d12;
+	--link-soft: #9a3412;
+	--md-strong: #292019;
+	--skill-blue: #b45309;
+	--plugin-purple: #b58cff;
+	--auth-green: #15803d;
+	--scroll-thumb: #d3c4a3;
+	--scroll-thumb-hover: #b8a67f;
+	--notice-err-bg: #f5dcd2;
+	--notice-warn-bg: #f0e5c8;
+	--notice-info-bg: #e6dfc9;
+	--notice-err-border: #b91c1c;
+	--notice-warn-border: #b45309;
+	--notice-info-border: #57534e;
+	--send-blue: #b45309;
+	--send-blue-hover: #92400e;
+	--brand-grad-a: #d97706;
+	--brand-grad-b: #b45309;
+	--on-amber: #1a1a1a;
+	--search-active-fg: #1a1d26;
+	--switch-knob: #ffffff;
+	--bg-elev3: rgba(120, 90, 30, 0.06);
+	--glow-015: rgba(120, 90, 30, 0.02);
+	--glow-025: rgba(120, 90, 30, 0.02);
+	--glow-03: rgba(120, 90, 30, 0.02);
+	--glow-04: rgba(120, 90, 30, 0.03);
+	--glow-05: rgba(120, 90, 30, 0.03);
+	--glow-12: rgba(120, 90, 30, 0.08);
+	--glow-18: rgba(120, 90, 30, 0.12);
+	--glow-22: rgba(120, 90, 30, 0.15);
+	--glow-38: rgba(120, 90, 30, 0.25);
+	--control-fg: #6f6250;
+	--control-bg: #efe7d3;
+	--control-border: #ddcfae;
+	--bg-image: none;
+	--bg-image-dim: 0.78;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 62%;
+	--topbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--statusbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--panel-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--card-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--chip-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
+	--msgs-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
+	--inputbox-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
+	--menu-bg: var(--bg-elev2);
+}
+
+/* ---- syntax highlighting (overrides static github-dark import) ---- */
+.hljs {
+	color: #3f372c;
+	background: #efe7d3;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+	color: #cf222e;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+	color: #8250df;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+	color: #0550ae;
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+	color: #0a3069;
+}
+.hljs-built_in,
+.hljs-symbol {
+	color: #953800;
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+	color: #8a7d64;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+	color: #116329;
+}
+.hljs-subst {
+	color: #3f372c;
+}
+.hljs-section {
+	color: #0550ae;
+	font-weight: 700;
+}
+.hljs-bullet {
+	color: #0550ae;
+}
+.hljs-emphasis {
+	color: #3f372c;
+	font-style: italic;
+}
+.hljs-strong {
+	color: #3f372c;
+	font-weight: 700;
+}
+.hljs-addition {
+	color: #116329;
+	background: #dfe8cf;
+}
+.hljs-deletion {
+	color: #82071e;
+	background: #f0d4c4;
+}