@narumitw/pi-webui 0.28.0 → 0.29.2

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@narumitw/pi-webui)](https://www.npmjs.com/package/@narumitw/pi-webui) [![Pi extension](https://img.shields.io/badge/Pi-extension-blue)](https://pi.dev) [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
 
-`@narumitw/pi-webui` adds a private, lightweight browser companion to the current terminal-owned [Pi Coding Agent](https://pi.dev) session. It displays Pi's semantic conversation and tool activity as they happen and can send text or sanitized images back into that same session.
+`@narumitw/pi-webui` adds a private, focused browser companion to the current terminal-owned [Pi Coding Agent](https://pi.dev) session. It displays Pi's semantic conversation and tool activity as they happen and can send text or sanitized images back into that same session.
 
 This package is intentionally different from the broader, separately maintained `@narumitw/pi-web` application. WebUI has one current-session chat page and no session manager, shell, file browser, git UI, control room, or task board.
 
@@ -16,7 +16,7 @@ This package is intentionally different from the broader, separately maintained
 - Accepts pasted, dropped, or selected PNG, JPEG, WebP, GIF, BMP, TIFF, HEIC/HEIF, and AVIF images, strips metadata server-side, applies Pi-compatible size limits, and provides ordered thumbnails plus an enlarged preview.
 - Reconnects from an ordered event cursor and replaces state from an authoritative snapshot after a gap.
 - Keeps a failed browser draft and prevents rapid duplicate submission with request IDs.
-- Uses no frontend framework, build step, browser storage, remote service, or automatically launched browser.
+- Uses React with Radix Primitives, Themes, Colors, and Icons for accessible controls, disclosures, overlays, adaptive color, and consistent iconography. Published browser assets are bundled locally; runtime use needs no CDN, remote service, browser storage, or automatically launched browser.
 
 ## 📦 Install
 
@@ -168,7 +168,10 @@ src/server.ts        authenticated loopback HTTP/SSE server and raw attachment p
 src/image-limits.ts  shared configurable defaults, ceilings, and provider constraints
 src/images.ts        bounded provider-ready image processing
 src/pi-settings.ts   effective Pi image settings reader
-src/web/             framework-free browser page
+src/web/ui/          React source using Radix UI and the browser protocol client
+src/web/app.js        generated, bundled browser application
+src/web/app.css       generated Radix Themes, Colors, and local presentation styles
+src/web/index.html    minimal authenticated browser shell
 ```
 
 ## 🧪 Development
@@ -176,13 +179,14 @@ src/web/             framework-free browser page
 From the repository root:
 
 ```bash
+npm --workspace @narumitw/pi-webui run build:web
 npm --workspace @narumitw/pi-webui run check
 npm test
 just try webui
 just pack webui
 ```
 
-The package preview must contain its manifest, license, README, TypeScript source, and static web assets, but no tests, fixtures, cache, or `node_modules`.
+Edit browser code under `src/web/ui/`, then run `build:web`; `check:web` (included in the package typecheck) rejects stale generated assets. The package preview must contain its manifest, license, README, TypeScript and browser source, and bundled static assets, but no tests, fixtures, cache, build scripts, or `node_modules`.
 
 ## 🔎 Keywords
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@narumitw/pi-webui",
-	"version": "0.28.0",
-	"description": "Lightweight local web companion for the current Pi terminal session.",
+	"version": "0.29.2",
+	"description": "Local Radix UI web companion for the current Pi terminal session.",
 	"type": "module",
 	"license": "MIT",
 	"private": false,
@@ -24,13 +24,21 @@
 		]
 	},
 	"scripts": {
-		"check": "biome check --vcs-use-ignore-file=false src test package.json tsconfig.json && npm run typecheck",
-		"format": "biome check --write --vcs-use-ignore-file=false src test package.json tsconfig.json",
-		"typecheck": "tsc --noEmit"
+		"build:web": "node scripts/build-web.mjs",
+		"check": "biome check --vcs-use-ignore-file=false src test scripts package.json tsconfig.json && npm run typecheck",
+		"check:web": "node scripts/build-web.mjs --check",
+		"format": "biome check --write --vcs-use-ignore-file=false src test scripts package.json tsconfig.json && npm run build:web",
+		"typecheck": "npm run check:web && tsc --noEmit"
 	},
 	"dependencies": {
+		"@radix-ui/colors": "^3.0.0",
+		"@radix-ui/react-icons": "^1.3.2",
+		"@radix-ui/themes": "^3.3.0",
 		"bmp-js": "^0.1.0",
 		"heic-decode": "^2.1.0",
+		"radix-ui": "1.6.6",
+		"react": "^19.2.8",
+		"react-dom": "^19.2.8",
 		"sharp": "^0.35.3"
 	},
 	"peerDependencies": {
@@ -43,6 +51,7 @@
 		"@earendil-works/pi-ai": "0.80.10",
 		"@earendil-works/pi-coding-agent": "0.80.10",
 		"@earendil-works/pi-tui": "0.80.10",
+		"esbuild": "^0.25.12",
 		"typescript": "7.0.2"
 	},
 	"repository": {

package/src/server.ts

@@ -23,6 +23,7 @@ const REQUEST_ID = /^[A-Za-z0-9_-]{1,120}$/;
 const MAX_REQUESTS = 128;
 const DEFAULT_MAX_DRAFT_TEXT_BYTES = 1024 * 1024;
 const SSE_FLUSH_TIMEOUT_MS = 250;
+const CSP_NONCE_PLACEHOLDER = "__PI_CSP_NONCE__";
 
 export interface WebSendRequest {
 	requestId: string;
@@ -80,6 +81,7 @@ export class WebUIServer {
 	readonly origin: string;
 	private bootstrapToken?: string;
 	private readonly sessionSecret = token();
+	private readonly cspNonce = token();
 	private readonly cookieName = `pi_webui_${randomBytes(8).toString("hex")}`;
 	private readonly sockets = new Set<Socket>();
 	private readonly sseClients = new Set<SseClient>();
@@ -231,17 +233,12 @@ export class WebUIServer {
 				await this.asset(response, "index.html", "text/html; charset=utf-8");
 				return;
 			}
-			if (
-				request.method === "GET" &&
-				["/app.js", "/state.js", "/markdown.js", "/transcript.js", "/image-drag.js"].includes(
-					url.pathname,
-				)
-			) {
-				await this.asset(response, url.pathname.slice(1), "text/javascript; charset=utf-8");
+			if (request.method === "GET" && url.pathname === "/app.js") {
+				await this.asset(response, "app.js", "text/javascript; charset=utf-8");
 				return;
 			}
-			if (request.method === "GET" && url.pathname === "/styles.css") {
-				await this.asset(response, "styles.css", "text/css; charset=utf-8");
+			if (request.method === "GET" && url.pathname === "/app.css") {
+				await this.asset(response, "app.css", "text/css; charset=utf-8");
 				return;
 			}
 			if (request.method === "GET" && url.pathname === "/api/state") {
@@ -745,7 +742,11 @@ export class WebUIServer {
 	}
 
 	private async asset(response: ServerResponse, name: string, contentType: string): Promise<void> {
-		const content = await readAsset(name);
+		const asset = await readAsset(name);
+		const content =
+			name === "index.html"
+				? Buffer.from(asset.toString("utf8").replaceAll(CSP_NONCE_PLACEHOLDER, this.cspNonce))
+				: asset;
 		response.writeHead(200, { "Content-Type": contentType, "Content-Length": content.byteLength });
 		response.end(content);
 	}
@@ -754,7 +755,7 @@ export class WebUIServer {
 		response.setHeader("Cache-Control", "no-store");
 		response.setHeader(
 			"Content-Security-Policy",
-			"default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'",
+			`default-src 'self'; script-src 'self'; style-src 'self' 'nonce-${this.cspNonce}'; img-src 'self' data: blob:; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'`,
 		);
 		response.setHeader("Referrer-Policy", "no-referrer");
 		response.setHeader("X-Content-Type-Options", "nosniff");