@oh-my-pi/pi-coding-agent 15.11.8 → 15.12.1

package/src/export/html/index.ts

@@ -1,14 +1,47 @@
+import * as fs from "node:fs/promises";
 import * as path from "node:path";
 import type { AgentState } from "@oh-my-pi/pi-agent-core";
 import { APP_NAME, isEnoent } from "@oh-my-pi/pi-utils";
 import { getResolvedThemeColors, getThemeExportColors } from "../../modes/theme/theme";
-import { type SessionEntry, type SessionHeader, SessionManager } from "../../session/session-manager";
-// Pre-generated template (created by scripts/generate-template.ts at publish time)
-import { TEMPLATE } from "./template.generated";
+import {
+	loadEntriesFromFile,
+	type SessionEntry,
+	type SessionHeader,
+	SessionManager,
+} from "../../session/session-manager";
+import templateCss from "./template.css" with { type: "text" };
+import templateHtml from "./template.html" with { type: "text" };
+import templateJs from "./template.js" with { type: "text" };
+// Pre-built React tool renderers: built by `bun --cwd=packages/collab-web run build:tool-views`,
+// run automatically by root `prepare` on install and by `prepack` at publish.
+import toolViewsJs from "./tool-views.generated.js" with { type: "text" };
+
+let cachedTemplate: string | undefined;
+
+/** Compose the standalone export template: minified CSS, tool renderers, and viewer JS inlined. */
+export function getTemplate(): string {
+	if (cachedTemplate) return cachedTemplate;
+	const minifiedCss = templateCss
+		.replace(/\/\*[\s\S]*?\*\//g, "")
+		.replace(/\s+/g, " ")
+		.replace(/\s*([{}:;,])\s*/g, "$1")
+		.trim();
+	// Function replacements so `$'`, `$&`, `$$`, etc. inside the embedded
+	// CSS/JS are not interpreted as substitution patterns. The cast is safe:
+	// `with { type: "text" }` yields a string at runtime; bun-types just types
+	// every *.html import as HTMLBundle (TS can't vary types by import attribute).
+	cachedTemplate = (templateHtml as unknown as string)
+		.replace("<template-css/>", () => `<style>${minifiedCss}</style>`)
+		.replace("<template-tool-views/>", () => `<script>${toolViewsJs}</script>`)
+		.replace("<template-js/>", () => `<script>${templateJs}</script>`);
+	return cachedTemplate;
+}
 
 export interface ExportOptions {
 	outputPath?: string;
 	themeName?: string;
+	/** Embed subagent session transcripts found next to the session file (default true). */
+	includeSubSessions?: boolean;
 }
 
 /** Parse a color string to RGB values. */
@@ -71,8 +104,8 @@ function deriveExportColors(baseColor: string): { pageBg: string; cardBg: string
 	};
 }
 
-/** Generate CSS custom properties for theme. */
-async function generateThemeVars(themeName?: string): Promise<string> {
+/** Generate CSS custom properties for theme. Exported for the share-viewer build script. */
+export async function generateThemeVars(themeName?: string): Promise<string> {
 	const colors = await getResolvedThemeColors(themeName);
 	const lines: string[] = [];
 	for (const [key, value] of Object.entries(colors)) {
@@ -90,12 +123,83 @@ async function generateThemeVars(themeName?: string): Promise<string> {
 	return lines.join(" ");
 }
 
-interface SessionData {
+/** Embedded subagent session transcript, keyed by slash-joined agent path in `SessionData.subSessions`. */
+export interface SubSession {
+	/** Bare agent id (session file stem), e.g. "ToolAsk". */
+	agentId: string;
+	/** Key of the parent sub-session, or null when spawned by the main session. */
+	parent: string | null;
+	header: SessionHeader | null;
+	entries: SessionEntry[];
+	leafId: string | null;
+}
+
+export interface SessionData {
 	header: SessionHeader | null;
 	entries: SessionEntry[];
 	leafId: string | null;
 	systemPrompt?: string;
 	tools?: { name: string; description: string }[];
+	subSessions?: Record<string, SubSession>;
+}
+
+/** Snapshot the session (plus optional agent state) into the JSON shape the viewer renders. */
+export function buildSessionData(sm: SessionManager, state?: AgentState): SessionData {
+	return {
+		header: sm.getHeader(),
+		entries: sm.getEntries(),
+		leafId: sm.getLeafId(),
+		systemPrompt: state?.systemPrompt.join("\n\n"),
+		tools: state?.tools?.map(t => ({ name: t.name, description: t.description })),
+	};
+}
+
+/**
+ * Collect subagent session transcripts stored next to a session file.
+ *
+ * A session at `<dir>/<name>.jsonl` keeps its subagent sessions at `<dir>/<name>/<AgentId>.jsonl`;
+ * each subagent's own children nest the same way under `<dir>/<name>/<AgentId>/`. Keys in the
+ * returned record are slash-joined ids relative to the main session ("ToolAsk", "ToolAsk/Helper").
+ * Corrupt or empty files are skipped silently.
+ */
+export async function collectSubSessions(sessionFile: string): Promise<Record<string, SubSession>> {
+	const result: Record<string, SubSession> = {};
+	if (!sessionFile.endsWith(".jsonl")) return result;
+	await collectSubSessionsFromDir(sessionFile.slice(0, -6), null, result);
+	return result;
+}
+
+async function collectSubSessionsFromDir(
+	dir: string,
+	parentKey: string | null,
+	out: Record<string, SubSession>,
+): Promise<void> {
+	let names: string[];
+	try {
+		names = await fs.readdir(dir);
+	} catch (err) {
+		if (isEnoent(err)) return;
+		throw err;
+	}
+	for (const name of names) {
+		if (!name.endsWith(".jsonl") || name.includes(".bak")) continue;
+		const agentId = name.slice(0, -6);
+		const key = parentKey ? `${parentKey}/${agentId}` : agentId;
+		const fileEntries = await loadEntriesFromFile(path.join(dir, name));
+		// Empty/corrupt files (no valid session header) load as [] — skip silently.
+		if (fileEntries.length > 0) {
+			const header = (fileEntries.find(e => e.type === "session") as SessionHeader | undefined) ?? null;
+			const entries = fileEntries.filter((e): e is SessionEntry => e.type !== "session");
+			out[key] = {
+				agentId,
+				parent: parentKey,
+				header,
+				entries,
+				leafId: entries.length > 0 ? entries[entries.length - 1].id : null,
+			};
+		}
+		await collectSubSessionsFromDir(path.join(dir, agentId), key, out);
+	}
 }
 
 /** Generate HTML from bundled template with runtime substitutions. */
@@ -106,10 +210,9 @@ async function generateHtml(sessionData: SessionData, themeName?: string): Promi
 	// Use function replacements so `$'`, `$&`, `$$`, `$n`, etc. in the
 	// substituted CSS/base64 are not interpreted as substitution patterns
 	// (see https://mdn.io/String.replace).
-	return TEMPLATE.replace("<theme-vars/>", () => `<style>:root { ${themeVars} }</style>`).replace(
-		"{{SESSION_DATA}}",
-		() => sessionDataBase64,
-	);
+	return getTemplate()
+		.replace("<theme-vars/>", () => `<style>:root { ${themeVars} }</style>`)
+		.replace("{{SESSION_DATA}}", () => sessionDataBase64);
 }
 
 /** Export session to HTML using SessionManager and AgentState. */
@@ -123,13 +226,11 @@ export async function exportSessionToHtml(
 	const sessionFile = sm.getSessionFile();
 	if (!sessionFile) throw new Error("Cannot export in-memory session to HTML");
 
-	const sessionData: SessionData = {
-		header: sm.getHeader(),
-		entries: sm.getEntries(),
-		leafId: sm.getLeafId(),
-		systemPrompt: state?.systemPrompt.join("\n\n"),
-		tools: state?.tools?.map(t => ({ name: t.name, description: t.description })),
-	};
+	const sessionData = buildSessionData(sm, state);
+	if (opts.includeSubSessions !== false) {
+		const subSessions = await collectSubSessions(sessionFile);
+		if (Object.keys(subSessions).length > 0) sessionData.subSessions = subSessions;
+	}
 
 	const html = await generateHtml(sessionData, opts.themeName);
 	const outputPath = opts.outputPath || `${APP_NAME}-session-${path.basename(sessionFile, ".jsonl")}.html`;
@@ -155,6 +256,10 @@ export async function exportFromFile(inputPath: string, options?: ExportOptions
 		entries: sm.getEntries(),
 		leafId: sm.getLeafId(),
 	};
+	if (opts.includeSubSessions !== false) {
+		const subSessions = await collectSubSessions(inputPath);
+		if (Object.keys(subSessions).length > 0) sessionData.subSessions = subSessions;
+	}
 
 	const html = await generateHtml(sessionData, opts.themeName);
 	const outputPath = opts.outputPath || `${APP_NAME}-session-${path.basename(inputPath, ".jsonl")}.html`;

package/src/export/html/share-loader.js

@@ -0,0 +1,102 @@
+    (function() {
+      'use strict';
+
+      // ============================================================
+      // SHARE VIEWER BOOTSTRAP
+      // ============================================================
+      //
+      // Served by the omp relay at /s/<id>; the AES-256-GCM key rides in the
+      // URL fragment and never leaves the browser. Resolves the session JSON
+      // and hands it to template.js via `window.__OMP_SESSION_DATA__`:
+      //   1. hex ids -> secret GitHub gist holding base64(sealed blob)
+      //   2. anything else -> relay blob store at /s/<id>/raw
+      // Sealed layout: [12B IV][AES-256-GCM(gzip(session JSON))].
+
+      var GIST_ID_RE = /^[0-9a-f]{20,64}$/;
+      var SHARE_PATH_RE = /\/s\/([A-Za-z0-9_-]{10,64})\/?$/;
+
+      function decodeBase64(text) {
+        var binary = atob(text);
+        var bytes = new Uint8Array(binary.length);
+        for (var i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+        return bytes;
+      }
+
+      function decodeBase64Url(text) {
+        var b64 = text.replace(/-/g, '+').replace(/_/g, '/');
+        while (b64.length % 4) b64 += '=';
+        return decodeBase64(b64);
+      }
+
+      async function fetchGistBlob(id) {
+        var res = await fetch('https://api.github.com/gists/' + id, {
+          headers: { Accept: 'application/vnd.github+json' },
+        });
+        if (res.status === 404) throw new Error('This share no longer exists (gist deleted?).');
+        if (!res.ok) throw new Error('Gist fetch failed: HTTP ' + res.status);
+        var gist = await res.json();
+        var files = Object.values(gist.files || {});
+        var file = files.find(function(f) { return /\.ompshare\.txt$/.test(f.filename); }) || files[0];
+        if (!file) throw new Error('Gist has no files.');
+        var text = file.content;
+        if (!text || file.truncated) {
+          var raw = await fetch(file.raw_url);
+          if (!raw.ok) throw new Error('Gist raw fetch failed: HTTP ' + raw.status);
+          text = await raw.text();
+        }
+        return decodeBase64(text.replace(/\s+/g, ''));
+      }
+
+      async function fetchServerBlob(id) {
+        var res = await fetch('/s/' + id + '/raw');
+        if (res.status === 404 || res.status === 410) {
+          throw new Error('This share no longer exists (expired or deleted).');
+        }
+        if (!res.ok) throw new Error('Share fetch failed: HTTP ' + res.status);
+        return new Uint8Array(await res.arrayBuffer());
+      }
+
+      async function load() {
+        var match = SHARE_PATH_RE.exec(location.pathname);
+        if (!match) throw new Error('Bad share URL; expected /s/<id>.');
+        var keyText = location.hash.replace(/^#/, '');
+        if (!keyText) throw new Error('Share link is missing its #key fragment; paste the full link.');
+        var keyBytes;
+        try {
+          keyBytes = decodeBase64Url(keyText);
+        } catch (_err) {
+          throw new Error('Share key is not valid base64url.');
+        }
+        if (keyBytes.length !== 32) throw new Error('Share key must decode to 32 bytes.');
+
+        var id = match[1];
+        var sealed = await (GIST_ID_RE.test(id) ? fetchGistBlob(id) : fetchServerBlob(id));
+        if (sealed.length <= 12) throw new Error('Sealed session blob is truncated.');
+
+        var key = await crypto.subtle.importKey('raw', keyBytes, 'AES-GCM', false, ['decrypt']);
+        var plain;
+        try {
+          plain = await crypto.subtle.decrypt(
+            { name: 'AES-GCM', iv: sealed.subarray(0, 12) },
+            key,
+            sealed.subarray(12)
+          );
+        } catch (_err) {
+          throw new Error('Decryption failed: wrong or corrupted #key.');
+        }
+
+        var data = await new Response(
+          new Blob([plain]).stream().pipeThrough(new DecompressionStream('gzip'))
+        ).json();
+        if (data && data.header && data.header.title) {
+          document.title = data.header.title + ' — omp session';
+        }
+        return data;
+      }
+
+      var pending = load();
+      // template.js surfaces the failure in-page; swallow the duplicate here
+      // so the console does not report an unhandled rejection.
+      pending.catch(function() {});
+      window.__OMP_SESSION_DATA__ = pending;
+    })();