pi-web-ui 0.27.0 → 0.27.1

package/README.md

@@ -190,7 +190,7 @@ Any CSS file dropped into your **data-dir themes folder** shows up in the theme
 
 Easiest way to write one: copy `themes/light.css` (or the bundled dark `web/src/styles.css` from the source repo) and change the `:root` colors plus any hardcoded values — the file must be **self-contained**. Notes:
 
-- The **xterm terminal canvas keeps its dark palette** in every theme (`TERM_THEME` in `TermXterm.tsx`); keep the terminal's container background matching it so the canvas blends.
+- The **terminal follows the theme** — set the `--term-*` variables (terminal ANSI palette + `--term-bg`) in your `:root` and both the xterm canvas and its padded container adapt automatically (see the defaults in `styles.css` and the light values in `themes/light.css`).
 - Syntax-highlight colors (`highlight.js`'s `github-dark.css` is bundled) must be overridden in your theme file or code will be unreadable — see the `.hljs` overrides at the bottom of `themes/light.css` for the pattern.
 - Theme ids must match `^[A-Za-z0-9_-]+$` (no dots/slashes — path-traversal guard on the server).
 
@@ -204,7 +204,7 @@ Want your theme shipped to everyone? Open a pull request at [github.com/xing-shu
 4. If you only changed colors in `styles.css` and want the bundled light theme updated too, regenerate it with `node make-light-theme.mjs`.
 5. Commit (`git add themes/<id>.css`) and open the PR. The `themes/` folder is already in the npm package `files` whitelist, so once merged and released, `npm i -g pi-web-ui` will ship your theme to everyone.
 
-Rules for merged themes: the file must be a single self-contained CSS file, be a full standalone theme (no imports of the base `styles.css`), keep the xterm area dark, and override `.hljs` syntax colors for readable code.
+Rules for merged themes: the file must be a single self-contained CSS file, be a full standalone theme (no imports of the base `styles.css`), set the `--term-*` variables for a readable terminal, and override `.hljs` syntax colors for readable code.
 
 ## Security
 

package/README.zh-CN.md

@@ -185,7 +185,7 @@ pi-web-ui server unquiesce                  # 解除排空，恢复接收新工
 
 最容易的写法：复制 `themes/light.css`（或源码仓库里内置的深色 `web/src/styles.css`），改 `:root` 颜色和必要的硬编码值即可 —— 文件必须**自包含**。注意：
 
-- **xterm 终端画布在所有主题下都保持深色**（`TermXterm.tsx` 的 `TERM_THEME`）；终端容器背景要与其保持一致，画布才能自然融合。
+- **终端跟随主题** —— 在你的 `:root` 里设置 `--term-*` 变量（终端 ANSI 配色 + `--term-bg`），xterm 画布和它的内边距容器都会自动适配（默认值见 `styles.css`，亮色值见 `themes/light.css`）。
 - 代码高亮色（打包自带 `highlight.js` 的 `github-dark.css`）必须在你的主题文件里覆盖，否则代码会看不清 —— 参照 `themes/light.css` 末尾的 `.hljs` 覆盖写法。
 - 主题 id 必须匹配 `^[A-Za-z0-9_-]+$`（不能有点和斜杠 —— 服务端有路径穿越防护）。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-ui",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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",
   "type": "module",

package/themes/light.css

@@ -17,6 +17,28 @@
 	--red: #dc2626;
 	--red-soft: rgba(220, 38, 38, 0.1);
 	--amber: #d97706;
+	/* Terminal ANSI palette — light: canvas + padded area both light. */
+	--term-bg: #f5f6fa;
+	--term-fg: #1c2030;
+	--term-cursor: #7c3aed;
+	--term-cursor-accent: #f5f6fa;
+	--term-selection: rgba(124, 58, 237, 0.3);
+	--term-black: #e8eaf0;
+	--term-red: #dc2626;
+	--term-green: #059669;
+	--term-yellow: #d97706;
+	--term-blue: #2563eb;
+	--term-magenta: #9333ea;
+	--term-cyan: #0e7490;
+	--term-white: #1c2030;
+	--term-bright-black: #8a91a3;
+	--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: #000000;
 	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
 	--sans:
 		-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
@@ -1142,7 +1164,7 @@ body {
 	flex-direction: column;
 	min-width: 0;
 	min-height: 0;
-	background: #0b0d12;
+	background: var(--term-bg);
 	/* Padding lives here (not on .term-xterm): FitAddon measures the xterm's
 	   parent element and only subtracts the xterm's own padding, so padding on
 	   .term-xterm made it compute rows for more space than is actually visible
@@ -1166,7 +1188,7 @@ body {
    background so it blends with the terminal content (three-class selector
    beats the injected xterm.css rule). */
 .term-xterm .xterm .xterm-viewport {
-	background-color: #0b0d12;
+	background-color: var(--term-bg);
 }
 
 .term-empty {
@@ -5344,6 +5366,10 @@ body {
 	padding: 28px;
 }
 
+.fp-overlay.fullscreen {
+	padding: 0;
+}
+
 .fp {
 	display: flex;
 	flex-direction: column;
@@ -5357,6 +5383,16 @@ body {
 	overflow: hidden;
 }
 
+.fp.fullscreen {
+	width: 100vw;
+	height: 100vh;
+	max-width: none;
+	max-height: none;
+	border-radius: 0;
+	border-left: 0;
+	border-right: 0;
+}
+
 .fp-head {
 	display: flex;
 	align-items: center;
@@ -5426,7 +5462,11 @@ body {
 .fp-attach.wrap:hover,
 .fp-attach.wrap.on,
 .fp-attach.edit:hover,
-.fp-attach.edit.on {
+.fp-attach.edit.on,
+.fp-attach.zoom-in:hover,
+.fp-attach.zoom-out:hover,
+.fp-attach.full:hover,
+.fp-attach.full.on {
 	background: var(--accent);
 	border-color: var(--accent);
 	color: #fff;
@@ -5465,6 +5505,30 @@ body {
 	opacity: 1;
 }
 
+/* Zoom control in the header: [-] 100% [+], % resets to 100. */
+.fp-zoom {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+.fp-zoom-val {
+	min-width: 42px;
+	height: 26px;
+	padding: 0 4px;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	background: var(--bg-elev);
+	color: var(--text-dim);
+	font-size: 10.5px;
+	line-height: 1;
+	text-align: center;
+	cursor: pointer;
+}
+.fp-zoom-val:hover {
+	border-color: var(--accent);
+	color: var(--text);
+}
+
 .fp-close {
 	display: inline-flex;
 	align-items: center;
@@ -5516,7 +5580,7 @@ body {
 	padding: 12px 14px;
 	background: rgba(0, 0, 0, 0.22);
 	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-	font-size: 12px;
+	font-size: calc(12px * var(--fp-zoom, 1));
 	line-height: 1.55;
 	color: var(--text-dim);
 	white-space: pre;
@@ -5528,7 +5592,7 @@ body {
 	overflow: auto;
 	background: rgba(0, 0, 0, 0.22);
 	font-family: var(--mono);
-	font-size: 12px;
+	font-size: calc(12px * var(--fp-zoom, 1));
 	line-height: 1.6;
 	padding: 6px 0;
 	user-select: none;
@@ -5552,7 +5616,12 @@ body {
 	word-break: break-word;
 	overflow-wrap: anywhere;
 }
-.fp-markdown .md {
+/* Markdown typography uses fixed px/clamp sizes, so scale the whole body with
+   CSS zoom (a zoom-out can leave side whitespace — acceptable). */
+.fp-markdown-zoom {
+	zoom: var(--fp-zoom, 1);
+}
+.fp-markdown-zoom > .md {
 	width: 100%;
 	max-width: 860px;
 	min-width: 0;
@@ -5768,7 +5837,7 @@ body {
 	background: rgba(0, 0, 0, 0.22);
 	color: var(--text);
 	font-family: var(--mono);
-	font-size: 12px;
+	font-size: calc(12px * var(--fp-zoom, 1));
 	line-height: 1.6;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;