@narumitw/pi-image-drop 0.25.0 → 0.30.0

package/README.md

@@ -4,7 +4,7 @@
 
 `@narumitw/pi-image-drop` adds one `/image-drop` command to the latest [Pi Coding Agent](https://pi.dev). It serves a private loopback page where you can paste, drop, choose, preview, reorder, retry, and remove local images. The ordered batch is attached to your next non-empty interactive Pi message.
 
-The page never contains a prompt or Attach button: Pi remains the only place where messages are written and sent.
+The page never contains a prompt or Attach button: Pi remains the only place where messages are written and sent. Its React and TypeScript frontend uses Radix Themes, Primitives, Colors, and Icons, and ships as local bundled assets with no CDN or runtime build step.
 
 ## ✨ Features
 
@@ -14,6 +14,7 @@ The page never contains a prompt or Attach button: Pi remains the only place whe
 - Supports PNG, JPEG, WebP, GIF, BMP, TIFF, HEIC/HEIF, and AVIF input.
 - Applies orientation, strips private metadata, and enforces Pi-compatible image limits.
 - Keeps bounded sent-image history for explicit re-attachment during the live session.
+- Uses Radix UI for an adaptive light/dark design system, accessible dialogs and disclosures, semantic colors, and consistent action icons.
 - Reports batch state above Pi's editor and can start automatically with each session.
 
 ## 📦 Install
@@ -139,14 +140,19 @@ Then open the unchanged `http://127.0.0.1:45678/...` link locally. Image Drop do
 ## 🗂️ Package layout
 
 ```text
-src/image-drop.ts       Pi extension entrypoint
+src/index.ts            Pi package entrypoint
+src/image-drop.ts       extension registration and command orchestration
 src/runtime.ts          Pi lifecycle and message orchestration
 src/batch.ts            in-memory draft and sent-history state machine
 src/images.ts           bounded image processing
 src/server.ts           authenticated loopback HTTP/SSE server
 src/settings.ts         extension settings
 src/pi-settings.ts      effective Pi image settings adapter
-src/web/                framework-free browser page
+src/web/ui/             authored React and TypeScript browser source
+src/web/app.js           generated bundled React application
+src/web/state.js         generated compatibility helper module
+src/web/styles.css       generated Radix Themes, Colors, and local styles
+src/web/index.html       minimal authenticated React shell
 ```
 
 ## 🧪 Development
@@ -154,13 +160,14 @@ src/web/                framework-free browser page
 From the repository root:
 
 ```bash
+npm --workspace @narumitw/pi-image-drop run build:web
 npm --workspace @narumitw/pi-image-drop run check
 npm test
 just try image-drop
 just pack image-drop
 ```
 
-The dry-run package must contain the manifest, license, README, TypeScript sources, and static web assets, but no tests, fixtures, image bytes, or `node_modules`.
+Edit browser code under `src/web/ui/`, then run `build:web`. The package typecheck runs `check:web`, which rebuilds in a temporary directory and rejects stale generated assets. The dry-run package must contain the manifest, license, README, TypeScript/TSX sources, and bundled static web assets, but no tests, fixtures, image bytes, build scripts, or `node_modules`.
 
 ## 🚀 Publishing
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-image-drop",
-	"version": "0.25.0",
+	"version": "0.30.0",
 	"description": "Pi extension for staging browser images and attaching them to the next message.",
 	"type": "module",
 	"license": "MIT",
@@ -20,17 +20,25 @@
 	],
 	"pi": {
 		"extensions": [
-			"./src/image-drop.ts"
+			"./src/index.ts"
 		]
 	},
 	"scripts": {
-		"check": "biome check . && npm run typecheck",
-		"format": "biome check --write .",
-		"typecheck": "tsc --noEmit"
+		"build:web": "node scripts/build-web.mjs",
+		"check": "biome check --vcs-use-ignore-file=false src/*.ts src/web/index.html src/web/ui 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/*.ts src/web/index.html src/web/ui 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": {
@@ -41,6 +49,9 @@
 		"@biomejs/biome": "2.5.3",
 		"@earendil-works/pi-ai": "0.80.3",
 		"@earendil-works/pi-coding-agent": "0.80.3",
+		"@types/react": "19.2.17",
+		"@types/react-dom": "19.2.3",
+		"esbuild": "0.25.12",
 		"typescript": "6.0.3"
 	},
 	"repository": {

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from "./image-drop.js";

package/src/runtime.ts

@@ -248,10 +248,7 @@ export class ImageDropRuntime {
 		if (generation !== this.generation) return false;
 		if (batch.publicState().phase !== "ready") {
 			this.restoreEditor(ctx, text);
-			ctx.ui.notify(
-				"Images could not be updated for the current auto-resize setting.",
-				"warning",
-			);
+			ctx.ui.notify("Images could not be updated for the current auto-resize setting.", "warning");
 			this.updateWidget(ctx);
 			return false;
 		}

package/src/server.ts

@@ -11,6 +11,7 @@ import type { ImageDropSettings } from "./settings.js";
 
 const JSON_LIMIT = 64 * 1024;
 const CLIENT_ID = /^[A-Za-z0-9_-]{1,80}$/;
+const CSP_NONCE_PLACEHOLDER = "__PI_CSP_NONCE__";
 
 export interface ImageDropServerOptions {
 	batch: BatchStore;
@@ -47,6 +48,7 @@ export class ImageDropServer {
 	readonly origin: string;
 	private bootstrapToken?: string;
 	private readonly sessionSecret = token();
+	private readonly cspNonce = token();
 	private readonly cookieName = `pi_image_drop_${randomBytes(8).toString("hex")}`;
 	private readonly abortController = new AbortController();
 	private readonly sockets = new Set<Socket>();
@@ -463,7 +465,11 @@ export class ImageDropServer {
 	}
 
 	private async asset(response: ServerResponse, name: string, contentType: string): Promise<void> {
-		const data = await readAsset(name);
+		const asset = await readAsset(name);
+		const data =
+			name === "index.html"
+				? Buffer.from(asset.toString("utf8").replaceAll(CSP_NONCE_PLACEHOLDER, this.cspNonce))
+				: asset;
 		response.setHeader("Content-Type", contentType);
 		response.setHeader("Content-Length", data.byteLength);
 		response.writeHead(200).end(data);
@@ -473,7 +479,7 @@ export class ImageDropServer {
 		response.setHeader("Cache-Control", "no-store");
 		response.setHeader(
 			"Content-Security-Policy",
-			"default-src 'self'; img-src 'self' blob:; script-src 'self'; style-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'",
+			`default-src 'self'; img-src 'self' blob:; script-src 'self'; style-src 'self' 'nonce-${this.cspNonce}'; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'`,
 		);
 		response.setHeader("Referrer-Policy", "no-referrer");
 		response.setHeader("X-Content-Type-Options", "nosniff");