pipane 0.1.0

package/dist/server/shared/jsonl-sync.js

@@ -0,0 +1,141 @@
+/**
+ * JSONL sync protocol: hash-verified text diffs.
+ *
+ * The server maintains a canonical JSON string representing the full session state.
+ * It sends diffs (patches) to the client, which applies them and verifies integrity
+ * via SHA-256 hashes.
+ *
+ * Patch format: array of operations that transform the old string into the new one.
+ * Each operation is { offset, deleteCount, insert } applied sequentially.
+ *
+ * This module is isomorphic — works in both Node.js and browser.
+ */
+// ── Hashing ────────────────────────────────────────────────────────────────
+/**
+ * Compute a hex SHA-256 hash of a string.
+ * Works in both Node.js (crypto) and browser (SubtleCrypto).
+ */
+export async function computeHash(data) {
+    if (typeof globalThis.crypto?.subtle?.digest === "function") {
+        // Browser or Node 20+
+        const encoded = new TextEncoder().encode(data);
+        const hashBuffer = await globalThis.crypto.subtle.digest("SHA-256", encoded);
+        const hashArray = new Uint8Array(hashBuffer);
+        return Array.from(hashArray).map(b => b.toString(16).padStart(2, "0")).join("");
+    }
+    // Node.js fallback
+    const { createHash } = await import("node:crypto");
+    return createHash("sha256").update(data, "utf8").digest("hex");
+}
+// Note: computeHashSync is NOT in this shared module because it depends on
+// node:crypto which is stubbed in the client Vite build. It lives in
+// session-jsonl.ts (server-only).
+// ── Diffing ────────────────────────────────────────────────────────────────
+/**
+ * Compute patches to transform `oldStr` into `newStr`.
+ *
+ * Uses a simple but effective approach:
+ * 1. Find common prefix
+ * 2. Find common suffix (after prefix)
+ * 3. The middle part is a single replace operation
+ *
+ * This is O(n) and produces at most one patch, which is ideal for our use case
+ * where changes are typically appended (streaming) or localized (tool updates).
+ *
+ * For cases where the strings are identical, returns an empty array.
+ */
+export function computePatches(oldStr, newStr) {
+    if (oldStr === newStr)
+        return [];
+    // Find common prefix length
+    const minLen = Math.min(oldStr.length, newStr.length);
+    let prefixLen = 0;
+    while (prefixLen < minLen && oldStr[prefixLen] === newStr[prefixLen]) {
+        prefixLen++;
+    }
+    // Find common suffix length (don't overlap with prefix)
+    let suffixLen = 0;
+    const maxSuffix = minLen - prefixLen;
+    while (suffixLen < maxSuffix &&
+        oldStr[oldStr.length - 1 - suffixLen] === newStr[newStr.length - 1 - suffixLen]) {
+        suffixLen++;
+    }
+    const deleteCount = oldStr.length - prefixLen - suffixLen;
+    const insert = newStr.slice(prefixLen, newStr.length - suffixLen);
+    // If nothing to delete and nothing to insert, strings must be equal (shouldn't happen)
+    if (deleteCount === 0 && insert.length === 0)
+        return [];
+    return [{ offset: prefixLen, deleteCount, insert }];
+}
+// ── Patching ───────────────────────────────────────────────────────────────
+/**
+ * Apply patches to a string.
+ * Patches are applied sequentially (each operates on the result of the previous).
+ */
+export function applyPatches(str, patches) {
+    let result = str;
+    for (const patch of patches) {
+        result =
+            result.slice(0, patch.offset) +
+                patch.insert +
+                result.slice(patch.offset + patch.deleteCount);
+    }
+    return result;
+}
+// ── Sync helpers ───────────────────────────────────────────────────────────
+/**
+ * Server-side: compute a SyncOp to send to the client.
+ *
+ * If the client's baseHash doesn't match (or is empty), sends a full sync.
+ * Otherwise computes patches.
+ *
+ * @param oldStr - The previous string the client has (empty if first sync)
+ * @param newStr - The new string to sync to
+ * @param oldHash - Hash of oldStr (client's current hash)
+ * @param newHash - Pre-computed hash of newStr
+ * @returns The sync operation to send
+ */
+export function computeSyncOp(oldStr, newStr, oldHash, newHash) {
+    if (!oldHash || oldStr.length === 0) {
+        return { op: "full", data: newStr, hash: newHash };
+    }
+    const patches = computePatches(oldStr, newStr);
+    // If the delta is larger than 80% of the full string, just send full
+    const deltaSize = patches.reduce((sum, p) => sum + p.insert.length + 20, 0);
+    if (deltaSize > newStr.length * 0.8) {
+        return { op: "full", data: newStr, hash: newHash };
+    }
+    return { op: "delta", patches, hash: newHash, baseHash: oldHash };
+}
+/**
+ * Client-side: apply a SyncOp to the current state.
+ *
+ * Returns the new string and hash, or null if verification failed
+ * (caller should request a full sync).
+ */
+export async function applySyncOp(currentStr, currentHash, op) {
+    if (op.op === "full") {
+        // Verify the full data matches the declared hash
+        const actualHash = await computeHash(op.data);
+        if (actualHash !== op.hash) {
+            console.error("[jsonl-sync] Full sync hash mismatch", { expected: op.hash, actual: actualHash });
+            return null;
+        }
+        return { data: op.data, hash: op.hash };
+    }
+    // Delta sync
+    if (op.baseHash !== currentHash) {
+        console.warn("[jsonl-sync] Base hash mismatch, need full sync", {
+            expected: op.baseHash,
+            actual: currentHash,
+        });
+        return null;
+    }
+    const newStr = applyPatches(currentStr, op.patches);
+    const actualHash = await computeHash(newStr);
+    if (actualHash !== op.hash) {
+        console.error("[jsonl-sync] Post-patch hash mismatch", { expected: op.hash, actual: actualHash });
+        return null;
+    }
+    return { data: newStr, hash: op.hash };
+}

package/extensions/canvas.ts

@@ -0,0 +1,57 @@
+/**
+ * Canvas tool extension for pipane.
+ *
+ * Registers a `canvas` tool that the LLM can call to display markdown
+ * content in a side panel. Accepts either inline content or a file path.
+ */
+
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import { Type } from "@sinclair/typebox";
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+export default function (pi: ExtensionAPI) {
+	pi.registerTool({
+		name: "canvas",
+		label: "Canvas",
+		description:
+			"Display markdown content in a side panel for the user. Use for long-form artifacts like documents, guides, code, HTML previews, essays, reports, etc. Only one canvas is visible at a time; calling this replaces the previous. Accepts either inline markdown via `content` or a `filePath` to read from disk.",
+		parameters: Type.Object({
+			title: Type.String({ description: "Short title for the canvas panel header" }),
+			content: Type.Optional(
+				Type.String({ description: "Markdown content to display in the canvas panel" }),
+			),
+			filePath: Type.Optional(
+				Type.String({ description: "Path to a markdown file to display in the canvas panel" }),
+			),
+		}),
+
+		async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
+			let markdown = params.content ?? "";
+
+			if (params.filePath) {
+				try {
+					const resolved = resolve(ctx.cwd, params.filePath);
+					markdown = await readFile(resolved, "utf-8");
+				} catch (err: any) {
+					return {
+						content: [{ type: "text" as const, text: `Error reading file: ${err.message}` }],
+						isError: true,
+					};
+				}
+			}
+
+			if (!markdown) {
+				return {
+					content: [{ type: "text" as const, text: "Error: provide either `content` or `filePath`." }],
+					isError: true,
+				};
+			}
+
+			return {
+				content: [{ type: "text" as const, text: "Canvas displayed to user." }],
+				details: { title: params.title, markdown },
+			};
+		},
+	});
+}

package/package.json

@@ -0,0 +1,82 @@
+{
+	"name": "pipane",
+	"version": "0.1.0",
+	"description": "A clean web interface for the pi coding agent — chat UI with real-time tool calls, streaming output, session management, and model picker",
+	"private": false,
+	"type": "module",
+	"license": "MIT",
+	"author": "Mike Heunher",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/mike-heunher/pipane.git"
+	},
+	"bugs": {
+		"url": "https://github.com/mike-heunher/pipane/issues"
+	},
+	"homepage": "https://github.com/mike-heunher/pipane#readme",
+	"keywords": [
+		"pi",
+		"coding-agent",
+		"web-ui",
+		"chat",
+		"llm",
+		"ai",
+		"cli",
+		"developer-tools"
+	],
+	"engines": {
+		"node": ">=20.0.0"
+	},
+	"bin": {
+		"pipane": "bin/pipane.js"
+	},
+	"files": [
+		"dist/",
+		"bin/",
+		"extensions/",
+		"patches/",
+		"LICENSE",
+		"README.md"
+	],
+	"scripts": {
+		"postinstall": "patch-package",
+		"dev": "./dev.sh",
+		"dev:server": "tsx watch src/server/server.ts",
+		"dev:client": "vite",
+		"build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && vite build && tsc -p tsconfig.server.json",
+		"start": "NODE_ENV=production node dist/server/server/server.js",
+		"prod": "./prod.sh",
+		"check": "tsc --noEmit",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:screenshots": "node node_modules/@playwright/test/cli.js test -c playwright.config.ts e2e/ui-screenshots.e2e.ts",
+		"test:screenshots:update": "node node_modules/@playwright/test/cli.js test -c playwright.config.ts e2e/ui-screenshots.e2e.ts --update-snapshots",
+		"bench:sessions": "tsx scripts/bench-sessions.ts",
+		"prepack": "npm run build"
+	},
+	"dependencies": {
+		"@mariozechner/mini-lit": "^0.2.0",
+		"@mariozechner/pi-agent-core": "0.55.3",
+		"@mariozechner/pi-ai": "0.55.3",
+		"@mariozechner/pi-coding-agent": "0.55.3",
+		"@mariozechner/pi-web-ui": "0.55.3",
+		"@tailwindcss/vite": "^4.1.17",
+		"express": "^5.1.0",
+		"lit": "^3.3.1",
+		"lucide": "^0.544.0",
+		"patch-package": "^8.0.1",
+		"ws": "^8.18.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.58.2",
+		"@types/express": "^5.0.0",
+		"@types/ws": "^8.5.10",
+		"concurrently": "^9.0.0",
+		"happy-dom": "^20.7.0",
+		"tsx": "^4.19.0",
+		"typescript": "^5.7.3",
+		"vite": "^7.1.6",
+		"vitest": "^3.2.4"
+	},
+	"packageManager": "npm@11.3.0"
+}