${escapeHtml(item.post.title)}
${body}
+${commentThread(item.comments)}
+${escapeHtml(heading)}
+Exported from sideshow · ${escapeHtml(opts.generatedAt)}
+running
+`;
+
+test("a session exports to a self-contained HTML shell whose frames lay out and stay isolated", async ({
+ page,
+ server,
+}) => {
+ const consoleErrors: string[] = [];
+ page.on("console", (msg) => {
+ if (msg.type() === "error") consoleErrors.push(msg.text());
+ });
+
+ const first = await publishParts(server.url, {
+ title: "Probe card",
+ agent: "e2e",
+ parts: [{ kind: "html", html: PROBE }],
+ });
+ await publishParts(server.url, {
+ title: "Markdown card",
+ agent: "e2e",
+ session: first.sessionId,
+ parts: [{ kind: "markdown", markdown: MD }],
+ });
+
+ await page.goto(`${server.url}/api/sessions/${first.sessionId}/export`);
+
+ // Two cards, chronological: the probe first, the markdown second.
+ await expect(page.locator(".ss-card")).toHaveCount(2);
+
+ // Every embedded surface is sandboxed with no allow-same-origin.
+ await expect(page.locator("iframe.ss-frame:not(.mdframe)")).toHaveAttribute(
+ "sandbox",
+ "allow-scripts",
+ );
+ await expect(page.locator("iframe.mdframe")).toHaveAttribute("sandbox", "allow-scripts");
+
+ // (a) the markdown frame's bridge reports height, so it grows past the min.
+ await expect
+ .poll(async () => (await page.locator("iframe.mdframe").boundingBox())?.height ?? 0, {
+ timeout: 10_000,
+ })
+ .toBeGreaterThan(60);
+
+ // (b) the html surface's script cannot reach the shell — opaque origin holds.
+ const probe = page.frameLocator("iframe.ss-frame:not(.mdframe)").locator("#r");
+ await expect(probe).toHaveText("blocked", { timeout: 10_000 });
+ await expect(probe).not.toContainText("LEAKED");
+
+ // (c) no CSP / security console errors from the shell or its frames.
+ expect(consoleErrors.filter((e) => /content security policy|security|refused/i.test(e))).toEqual(
+ [],
+ );
+});
diff --git a/guide/AGENT_HOWTO.md b/guide/AGENT_HOWTO.md
index 9fe8e08..55576c9 100644
--- a/guide/AGENT_HOWTO.md
+++ b/guide/AGENT_HOWTO.md
@@ -81,6 +81,17 @@ Feedback reaches you four ways — prefer them in this order:
Comments attach to a post (`postId`); behavior is otherwise unchanged. When comments arrive, acknowledge briefly with `sideshow comment "..." --post Couldn’t render diff — ${escapeHtml(
- e instanceof Error ? e.message : "render error",
- )}
`,
- css: `.rich-error{color:var(--danger);font:13px/1.5 ui-monospace,monospace;padding:8px 12px;}`,
- }));
- return renderSandboxedPart({ body: rendered.body, css: rendered.css, origin, theme, mode });
- });
+ const doc = await cachedRender(cacheKey, () =>
+ renderSurfaceDocument(surface, { title, origin, themeId, mode }),
+ );
return c.html(doc);
};
app.get("/s/:id", renderPostPage); // legacy alias
diff --git a/server/base64.ts b/server/base64.ts
index fee7755..6a84944 100644
--- a/server/base64.ts
+++ b/server/base64.ts
@@ -12,3 +12,17 @@ export function decodeBase64(b64: string): Uint8Array {
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
return bytes;
}
+
+// bytes -> base64, runtime-agnostic (btoa is a global in Node and Workers, same
+// as the btoa server/types.ts already relies on for id generation). Chunked
+// String.fromCharCode: spreading a whole multi-megabyte asset in one call blows
+// the argument-count limit (RangeError), so build the binary string in 32 KiB
+// slices. No Buffer — that's Node-only and would break the Worker DO.
+export function encodeBase64(bytes: Uint8Array): string {
+ const CHUNK = 0x8000;
+ let bin = "";
+ for (let i = 0; i < bytes.length; i += CHUNK) {
+ bin += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+ }
+ return btoa(bin);
+}
diff --git a/server/exportPage.ts b/server/exportPage.ts
new file mode 100644
index 0000000..e1541cc
--- /dev/null
+++ b/server/exportPage.ts
@@ -0,0 +1,365 @@
+// Session HTML export — render a whole session into ONE self-contained,
+// shareable HTML document. Runtime-agnostic (no `node:` imports, no DOM
+// globals) so the Worker DO serves it too; enforced via the app.ts import chain
+// under tsconfig.workers.json.
+//
+// The core isolation rule holds INSIDE the exported file, opened from disk on a
+// teammate's machine where no server serves /s/:id: every surface that becomes
+// HTML is rendered with the EXACT same sandboxed-document dispatch /s/:id
+// serves (renderSurfaceDocument), then embedded as
+// ``;
+}
+
+// Render one surface to the HTML fragment that sits inside a card body. Sandboxed
+// kinds become srcdoc iframes of the same documents /s/:id serves; native kinds
+// (image/json/trace) become escaped, data-only markup. `postTitle` names the
+// html-surface document (matches renderPostPage passing post.title).
+async function exportSurface(
+ surface: Surface,
+ ctx: ExportContext,
+ postTitle: string,
+): PromiseImage asset ${escapeHtml(surface.assetId)} ${msg}
${escapeHtml(text)}`;
+ }
+
+ // trace: experimental kind stays out of the product surface (CLAUDE.md).
+ // Honest-but-omitted beats silently dropping it.
+ return `Trace surface omitted from export.
`; +} + +interface RenderedPost { + post: Post; + comments: Comment[]; + surfaces: string[]; +} + +// The shell script: the postMessage bridge (resize / open-link / copy) plus the +// per-iframe Chrome-149 srcdoc re-parse retry ported from commit 5e3f292. No +// agent behind a static file, so send-prompt/switch-session are dropped. +const SHELL_JS = ` +(function () { + var MIN = ${MIN_FRAME_H}, MAX = ${MAX_FRAME_H}; + function frameFor(source) { + var frames = document.querySelectorAll('iframe.ss-frame'); + for (var i = 0; i < frames.length; i++) { + if (frames[i].contentWindow === source) return frames[i]; + } + return null; + } + window.addEventListener('message', function (e) { + var d = e.data; + if (!d || d.__sideshow !== true) return; + // Attribute every message to a frame we actually embedded (contentWindow + // identity holds across the opaque-origin boundary) — the export's + // isOwnFrame. A frame can only ever resize itself. + var frame = frameFor(e.source); + if (!frame) return; + if (d.type === 'resize') { + frame.style.height = Math.min(Math.max(Number(d.height) || MIN, MIN), MAX) + 'px'; + } else if (d.type === 'open-link') { + var url; + try { url = new URL(String(d.url)); } catch (err) { return; } + if (url.protocol !== 'http:' && url.protocol !== 'https:') return; + // Same confirmation as the viewer (App.tsx): the request comes from an + // untrusted frame, so a disguised control could silently open any page — + // show the normalized destination and let the reader decide. + if (window.confirm('Open external link?\\n\\n' + url.href)) { + window.open(url.href, '_blank', 'noopener,noreferrer'); + } + } else if (d.type === 'copy') { + if (navigator.clipboard) navigator.clipboard.writeText(String(d.text)).catch(function () {}); + } + // send-prompt / switch-session: no-ops — a static file has no agent behind it. + }); + // Chrome 149 field trial breaks layout measurement in opaque-origin srcdoc + // iframes (scrollHeight/offsetHeight read 0), so the bridge reports only body + // padding and the frame sticks at min height. Re-setting srcdoc forces a + // re-parse that recovers layout; a no-op in unaffected browsers. (Ported from + // viewer/src/SandboxedPart.tsx at commit 5e3f292.) + var pending = document.querySelectorAll('iframe.ss-frame'); + for (var i = 0; i < pending.length; i++) { + (function (frame) { + setTimeout(function () { + if (frame.offsetHeight > MIN) return; + var doc = frame.getAttribute('srcdoc'); + if (doc == null) return; + frame.removeAttribute('srcdoc'); + requestAnimationFrame(function () { frame.setAttribute('srcdoc', doc); }); + }, 2000); + })(pending[i]); + } +})(); +`; + +// The shell's own chrome — a plain card column echoing the viewer's look, built +// from the derived theme vars so light/dark tracks the theme. No load-restricting +// CSP: srcdoc children inherit the parent document's CSP, so a policy here would +// break the CDN loads html/mermaid frames need. +function shellCss(theme: Theme, mode?: Mode): string { + return ` +${viewerThemeCss(theme, mode)} +${colorSchemeCss(mode)} +* { box-sizing: border-box; } +body { + margin: 0; padding: 24px 16px 64px; + background: var(--bg); color: var(--text); + font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} +.ss-shell { max-width: 820px; margin: 0 auto; } +.ss-header { margin: 0 0 24px; } +.ss-header h1 { font-size: 1.4em; margin: 0 0 4px; font-weight: 600; } +.ss-header .ss-sub { color: var(--muted); font-size: 0.85em; } +.ss-card { + background: var(--surface); border: 0.5px solid var(--border); + border-radius: 12px; margin: 0 0 20px; overflow: hidden; +} +.ss-card-head { + display: flex; align-items: baseline; gap: 10px; justify-content: space-between; + padding: 12px 16px; border-bottom: 0.5px solid var(--border); +} +.ss-card-head h2 { font-size: 1.05em; margin: 0; font-weight: 600; } +.ss-card-head .ss-meta { color: var(--faint); font-size: 0.78em; white-space: nowrap; } +.ss-frame { display: block; width: 100%; border: 0; height: ${MIN_FRAME_H}px; } +.ss-image { margin: 0; padding: 16px; } +.ss-image img { max-width: 100%; height: auto; border-radius: 8px; display: block; } +.ss-caption { color: var(--muted); font-size: 0.85em; margin-top: 8px; } +.ss-json { + margin: 0; padding: 14px 16px; overflow: auto; white-space: pre; + color: var(--text); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; +} +.ss-note { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 0.9em; font-style: italic; } +.ss-thread { border-top: 0.5px solid var(--border); padding: 8px 16px 12px; } +.ss-comment { padding: 8px 0; } +.ss-comment + .ss-comment { border-top: 0.5px solid var(--border); } +.ss-comment .ss-comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; } +.ss-comment .ss-author { font-weight: 600; font-size: 0.85em; } +.ss-comment .ss-time { color: var(--faint); font-size: 0.75em; } +.ss-comment p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } +.ss-empty { color: var(--muted); font-style: italic; } +`; +} + +function commentThread(comments: Comment[]): string { + if (comments.length === 0) return ""; + const rows = comments + .map( + (c) => + `This session has no posts yet.
`; + return ` + + + + +
${escapeHtml( + c.text, + )}