pi-design-deck 0.3.2 → 0.3.4

package/README.md

@@ -4,7 +4,7 @@
 
 # Design Deck
 
-A tool for [Pi coding agent](https://github.com/badlogic/pi-mono/) that presents multi-slide visual decision decks in the browser. Each slide shows 2-4 high-fidelity previews — code diffs, architecture diagrams, UI mockups — and you pick one per slide. The agent gets back a clean selection map and moves on to implementation.
+A tool for [Pi coding agent](https://github.com/badlogic/pi-mono/) that presents multi-slide visual decision decks. On macOS, uses [Glimpse](https://github.com/nicobailon/glimpseui) to render in a native WKWebView window; falls back to a browser tab on other platforms. Each slide shows 2-4 high-fidelity previews — code diffs, architecture diagrams, UI mockups — and you pick one per slide. The agent gets back a clean selection map and moves on to implementation.
 
 <img width="1340" alt="Design Deck screenshot" src="https://github.com/user-attachments/assets/20864ac6-9223-4e2e-ba3c-db3eaae0abd8" />
 
@@ -41,6 +41,7 @@ Restart pi to load the extension and the bundled `design-deck` skill.
 
 **Requirements:**
 - pi-agent v0.35.0 or later (extensions API)
+- For native macOS window: `pi install npm:glimpseui` (optional, falls back to browser if not installed)
 
 https://github.com/user-attachments/assets/aff1bac6-8bc2-461a-8828-f588ce655f7f
 
@@ -110,7 +111,7 @@ The browser opens, the user picks "JWT + Refresh Tokens", and the agent receives
 
 ## How It Works
 
-1. Agent calls `design_deck()` with slides JSON — local HTTP server starts, browser opens
+1. Agent calls `design_deck()` with slides JSON — local HTTP server starts, opens in Glimpse on macOS when available, otherwise opens in the browser
 2. User navigates slides, picks one option per slide
 3. Optionally clicks "Generate N options" — agent generates and pushes via `add-options`, deck stays open
 4. User submits — selections returned to agent as `{ slideId: "selected label" }`

package/form/css/controls.css

@@ -579,6 +579,10 @@
   .options.cols-3 { grid-template-columns: repeat(2, 1fr); }
 }
 
+@media (max-width: 1100px) {
+  .deck-key { display: none; }
+}
+
 @media (max-width: 900px) {
   .options.cols-3 { grid-template-columns: 1fr; }
   .options.cols-2 { grid-template-columns: 1fr; }
@@ -586,6 +590,12 @@
   .summary-grid { grid-template-columns: 1fr; }
   .pv-layout-sidebar { grid-template-columns: 120px 1fr; }
   .deck-save-status { display: none; }
+  .deck-footer { padding: 10px 16px; }
+}
+
+@media (max-width: 600px) {
+  .layout-toggle { display: none; }
+  .deck-header { padding: 0 16px; }
 }
 
 /* ─────────────────────────────────────────────────────────────

package/form/css/layout.css

@@ -367,12 +367,12 @@ body {
 
 .deck-footer {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 32px;
+  gap: 12px; padding: 12px 32px;
   border-top: 1px solid rgba(var(--dk-ink),0.12);
   flex-shrink: 0;
 }
 
-.deck-keys { display: flex; gap: 14px; }
+.deck-keys { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; justify-content: center; overflow: hidden; }
 .deck-key { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dk-text-hint); }
 .deck-key kbd {
   display: inline-flex; align-items: center; justify-content: center;
@@ -385,7 +385,7 @@ body {
 .btn-nav {
   padding: 8px 20px; border-radius: 6px; font-size: 12px; font-weight: 600;
   border: 1px solid rgba(var(--dk-ink),0.14); background: var(--dk-elevated);
-  color: var(--dk-text); transition: all 0.15s;
+  color: var(--dk-text); transition: all 0.15s; flex-shrink: 0; white-space: nowrap;
 }
 .btn-nav:hover { background: var(--dk-elevated-hover); color: var(--dk-text-label); border-color: rgba(var(--dk-ink),0.12); }
 .btn-nav:disabled { opacity: 0.3; cursor: not-allowed; }

package/index.ts

@@ -5,6 +5,8 @@ import * as path from "node:path";
 import * as os from "node:os";
 import * as fs from "node:fs";
 import { randomUUID } from "node:crypto";
+import { execFileSync } from "node:child_process";
+import { createRequire } from "node:module";
 import { loadSettings } from "./settings.js";
 import { getDefaultSnapshotDir, startDeckServer, type DeckServerHandle, type ModelInfo } from "./deck-server.js";
 import { deriveDeckStatusFromFolderName, isDeckOption, validateDeckConfig, validateSavedDeck, type SavedDeckData, type SavedDeckStatus } from "./deck-schema.js";
@@ -12,6 +14,15 @@ import { buildGenerateMoreResult, buildRegenerateResult } from "./generate-promp
 import { generateWithModel } from "./model-runner.js";
 import { buildStandaloneDeckHtml } from "./export-html.js";
 
+interface GlimpseWindow {
+	on(event: "closed", handler: () => void): void;
+	on(event: "error", handler: (err: Error) => void): void;
+	close(): void;
+}
+
+let glimpseOpen: ((html: string, opts: Record<string, unknown>) => GlimpseWindow) | null | undefined;
+let activeGlimpseWin: GlimpseWindow | null = null;
+
 async function openUrl(pi: ExtensionAPI, url: string, browser?: string): Promise<void> {
 	const platform = os.platform();
 	let result;
@@ -144,6 +155,68 @@ function resolveSnapshotDir(snapshotDir?: string): string {
 	return snapshotDir ? expandHome(snapshotDir) : getDefaultSnapshotDir();
 }
 
+function escapeHtml(str: string): string {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function findGlimpseMjs(): string | null {
+	// Local node_modules
+	try {
+		const req = createRequire(import.meta.url);
+		return req.resolve("glimpseui");
+	} catch {}
+	// Global npm install
+	try {
+		const globalRoot = execFileSync("npm", ["root", "-g"], { encoding: "utf-8" }).trim();
+		const entry = path.join(globalRoot, "glimpseui", "src", "glimpse.mjs");
+		if (fs.existsSync(entry)) return entry;
+	} catch {}
+	return null;
+}
+
+async function getGlimpseOpen() {
+	if (glimpseOpen !== undefined) return glimpseOpen;
+	const resolved = findGlimpseMjs();
+	if (resolved) {
+		try {
+			glimpseOpen = (await import(resolved)).open;
+			return glimpseOpen;
+		} catch {}
+	}
+	glimpseOpen = null;
+	return glimpseOpen;
+}
+
+function openInGlimpse(
+	open: (html: string, opts: Record<string, unknown>) => GlimpseWindow,
+	url: string,
+	title?: string,
+): GlimpseWindow {
+	const safeTitle = escapeHtml(title || "Design Deck");
+	const shellHtml = `<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>${safeTitle}</title></head>
+<body style="margin:0; background:#18181e;">
+  <script>window.location.replace(${JSON.stringify(url)});</script>
+</body>
+</html>`;
+
+	return open(shellHtml, {
+		width: 1100,
+		height: 800,
+		title: title || "Design Deck",
+	});
+}
+
+function closeActiveGlimpseWindow(): void {
+	if (!activeGlimpseWin) return;
+	const win = activeGlimpseWin;
+	activeGlimpseWin = null;
+	try {
+		win.close();
+	} catch {}
+}
+
 function listSavedDecks(snapshotDir: string): { decks: SavedDeckListItem[]; warnings: string[] } {
 	if (!fs.existsSync(snapshotDir)) {
 		return { decks: [], warnings: [] };
@@ -253,6 +326,7 @@ function cleanupActiveDeck(reason?: string): void {
 		restoreDeckThinking();
 		restoreDeckThinking = null;
 	}
+	closeActiveGlimpseWindow();
 	if (!activeDeckServer) return;
 	try {
 		activeDeckServer.handle.close(reason);
@@ -332,6 +406,7 @@ export default function (pi: ExtensionAPI) {
 		label: "Design Deck",
 		description:
 			"Present a multi-slide design deck with visual options for decisions. " +
+			"On macOS, opens in a native window (Glimpse); falls back to a browser tab elsewhere. " +
 			"Slides JSON: { title?, slides: [{ id, title, context?, columns?, options }] }. " +
 			"When the user requests more options, tool returns generate-more instructions — " +
 			'call design_deck with action:"add-options" to push all new options at once. ' +
@@ -341,6 +416,16 @@ export default function (pi: ExtensionAPI) {
 		async execute(_toolCallId, params, signal, onUpdate, ctx) {
 			const p = params as Record<string, unknown>;
 
+			if (!p.action && typeof p.slides === "string") {
+				try {
+					const parsed = JSON.parse(p.slides);
+					if (parsed && typeof parsed === "object" && !Array.isArray(parsed) && typeof parsed.action === "string") {
+						Object.assign(p, parsed);
+						delete p.slides;
+					}
+				} catch {}
+			}
+
 			if (!ctx.hasUI && p.action !== "list" && p.action !== "export") {
 				throw new Error(
 					"design_deck requires interactive mode with browser support. " +
@@ -889,12 +974,28 @@ export default function (pi: ExtensionAPI) {
 				});
 			}
 
-			try {
-				await openUrl(pi, serverHandle.url, settings.browser);
-			} catch (err) {
-				cleanupActiveDeck();
-				const message = err instanceof Error ? err.message : String(err);
-				throw new Error(`Failed to open browser: ${message}`);
+			const glimpseOpenFn = os.platform() === "darwin" ? await getGlimpseOpen() : null;
+			if (glimpseOpenFn) {
+				try {
+					const thisWindow = openInGlimpse(glimpseOpenFn, serverHandle.url, config.title || "Design Deck");
+					activeGlimpseWin = thisWindow;
+					thisWindow.on("error", () => {});
+					thisWindow.on("closed", () => {
+						if (activeGlimpseWin !== thisWindow) return;
+						activeGlimpseWin = null;
+						handleCancel("user");
+					});
+				} catch {}
+			}
+
+			if (!activeGlimpseWin) {
+				try {
+					await openUrl(pi, serverHandle.url, settings.browser);
+				} catch (err) {
+					cleanupActiveDeck();
+					const message = err instanceof Error ? err.message : String(err);
+					throw new Error(`Failed to open browser: ${message}`);
+				}
 			}
 
 			return blockOnDeck();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-design-deck",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Visual design deck for presenting multi-slide options with high-fidelity previews",
   "author": "Nico Bailon",
   "license": "MIT",