@ammduncan/easel 0.2.13 → 0.2.15

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.2.15 — 2026-05-23
+
+### Fixed
+- **PDF exports were enormous (300+ MB for a single-page card).** Two stacking causes: (1) the iframe always rasterised at `pixelRatio: 4` regardless of target, producing huge bitmaps for tall cards; (2) the parent then embedded the result into jsPDF as a `PNG`, which PDFs store using Flate compression — far less efficient than the DCT compression PDFs natively use for JPEGs. A tall card at DPR 4 → ~6000×10000 pixel PNG → ~300 MB PDF wrapper.
+- Fix: for PDF targets only, the iframe now rasterises as JPEG at `quality: 0.92` and `pixelRatio: 2`, and the parent embeds with `'JPEG'` format + `'FAST'` compression flag + `compress: true` at the document level. PNG exports stay at lossless PNG + pixelRatio 4 — no quality loss for the standalone PNG download.
+- Expected sizes for a typical card: ~3–8 MB (down from ~300 MB), text still crisp on screen and in print.
+
+## 0.2.14 — 2026-05-23
+
+### Changed
+- **First-push auto-open is now actually the only trigger.** 0.2.10 moved the MCP-side auto-open from "first tool call" to "first push when no tab is alive". But Claude Code launches were still opening a tab because `easel setup` also installed a `SessionStart` hook that ran `easel open --quiet`. Two changes:
+  - `easel setup` no longer installs the `easel open --quiet` SessionStart block, and actively strips any pre-existing one from `~/.claude/settings.json`. The `idCaptureBlock` (which writes the per-PPID session-id file) stays — it's needed for PPID → session correlation and has no UI side effect.
+  - `mcp.ts` `autoOpenIfNeeded` drops the `hookHasFiredForThisPpid()` short-circuit. That check was a proxy for "the hook already opened a tab"; now that the hook doesn't open tabs, `sessionTabs > 0` is the truthful signal.
+- After upgrading, run `easel update` once so setup re-runs and cleans your existing `~/.claude/settings.json`.
+
 ## 0.2.13 — 2026-05-23
 
 ### Added

package/dist/cli.js

@@ -124,7 +124,8 @@ function cmdSetup() {
     const hooks = settings.hooks ?? {};
     let sessionStart = hooks.SessionStart ?? [];
     // Drop legacy entries from prior versions (the old bash hook, paths under the
-    // claude-display name) before re-adding the current Node-based hook.
+    // claude-display name) AND the prior autoOpenBlock (which opened a tab at
+    // SessionStart — replaced by MCP-side auto-open on first push as of 0.2.14).
     const isLegacy = (block) => {
         const inner = block?.hooks ?? [block];
         if (!Array.isArray(inner))
@@ -135,16 +136,16 @@ function cmdSetup() {
                 return false;
             return (cmd.includes("claude-display-session-id.sh") ||
                 cmd.includes("easel-session-id.sh") ||
-                cmd.includes("bin/claude-display "));
+                cmd.includes("bin/claude-display ") ||
+                // Prior `easel open --quiet` SessionStart hook — superseded by
+                // MCP-side first-push auto-open.
+                (cmd.includes("easel") && cmd.includes("open --quiet")));
         });
     };
     sessionStart = sessionStart.filter((b) => !isLegacy(b));
     const idCaptureBlock = {
         hooks: [{ type: "command", command: `node ${hookScript}` }],
     };
-    const autoOpenBlock = {
-        hooks: [{ type: "command", command: `${cliEntry} open --quiet` }],
-    };
     const containsBlockMatching = (substr) => sessionStart.some((block) => {
         const inner = block?.hooks ?? [block];
         return (Array.isArray(inner) ? inner : []).some((h) => typeof h === "object" &&
@@ -155,9 +156,6 @@ function cmdSetup() {
     if (!containsBlockMatching("easel-session-id.mjs")) {
         sessionStart.push(idCaptureBlock);
     }
-    if (!containsBlockMatching("easel") || !containsBlockMatching("open --quiet")) {
-        sessionStart.push(autoOpenBlock);
-    }
     hooks.SessionStart = sessionStart;
     settings.hooks = hooks;
     mkdirSync(dirname(settingsPath), { recursive: true });

package/dist/client/viewer.js

@@ -196,8 +196,12 @@
   }
 
   /**
-   * Embed a PNG dataURL into a single-page PDF sized to the image's pixel
-   * dimensions, producing a continuous (no page-breaks) document, then save.
+   * Embed a rasterised dataURL into a single-page PDF sized to the image's
+   * pixel dimensions, producing a continuous (no page-breaks) document, then
+   * save. The iframe sends a JPEG dataURL for PDF targets — PDFs natively use
+   * DCT compression for JPEGs, so embedding stays compact (vs PNGs which
+   * balloon the file). We detect format from the dataURL prefix; PNG still
+   * works as a fallback for any legacy caller that sends one.
    */
   function downloadAsPdf(dataUrl, filename) {
     return new Promise((resolve, reject) => {
@@ -206,6 +210,8 @@
         reject(new Error("jsPDF not loaded"));
         return;
       }
+      const isJpeg = dataUrl.startsWith("data:image/jpeg") || dataUrl.startsWith("data:image/jpg");
+      const imageType = isJpeg ? "JPEG" : "PNG";
       const img = new Image();
       img.onload = () => {
         try {
@@ -216,8 +222,9 @@
             format: [w, h],
             orientation: w > h ? "landscape" : "portrait",
             hotfixes: ["px_scaling"],
+            compress: true,
           });
-          pdf.addImage(dataUrl, "PNG", 0, 0, w, h);
+          pdf.addImage(dataUrl, imageType, 0, 0, w, h, undefined, "FAST");
           pdf.save(filename);
           resolve();
         } catch (err) {
@@ -859,13 +866,20 @@ ${body}
           document.documentElement.scrollHeight,
           document.body ? document.body.scrollHeight : 0,
         );
-        window.htmlToImage.toPng(document.documentElement, {
+        // PNG target → lossless PNG @ pixelRatio 4 for crisp standalone files.
+        // PDF target → JPEG @ quality 0.92 + pixelRatio 2. PDFs natively use
+        // DCT compression for embedded images, so JPEG-in-PDF stays small;
+        // PNG-in-PDF balloons (a tall card at DPR 4 produces 300+ MB PDFs).
+        var rasterFn = format === "pdf" ? window.htmlToImage.toJpeg : window.htmlToImage.toPng;
+        var rasterOpts = {
           backgroundColor: bgColor,
-          pixelRatio: 4,
+          pixelRatio: format === "pdf" ? 2 : 4,
           cacheBust: true,
           width: width,
           height: height,
-        }).then(function(dataUrl){
+        };
+        if (format === "pdf") rasterOpts.quality = 0.92;
+        rasterFn(document.documentElement, rasterOpts).then(function(dataUrl){
           parent.postMessage({ type: "easel:image-ready", pushId: pushId, dataUrl: dataUrl, filename: filename, format: format }, "*");
         }).catch(function(err){
           console.error("[easel] export failed", err);
@@ -889,7 +903,7 @@ ${body}
     const configScript =
       "<script src='https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.js'></script><script>(function(){function a(c){if(!c)return;if(c.theme==='light'||c.theme==='dark'){document.documentElement.setAttribute('data-theme',c.theme);window.__claudeDisplayTheme=c.theme}if(c.preset==='paper'||c.preset==='aurora'||c.preset==='slate'){document.documentElement.setAttribute('data-preset',c.preset);window.__claudeDisplayPreset=c.preset}if(c.density==='carded'||c.density==='flat'){document.documentElement.setAttribute('data-density',c.density);window.__claudeDisplayDensity=c.density}}a(" +
       JSON.stringify({ theme, preset, density }) +
-      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:config')a(e.data);if(e.data.type==='easel:theme')a({theme:e.data.theme});if(e.data.type==='easel:print'){try{window.print()}catch(_){}}if(e.data.type==='easel:image'){var pid=e.data.pushId;var fn=e.data.filename||'push.png';var fmt=e.data.format==='pdf'?'pdf':'png';var bg=e.data.bgColor||'#ffffff';if(!window.htmlToImage)return;window.htmlToImage.toPng(document.body,{backgroundColor:bg,pixelRatio:4,cacheBust:true}).then(function(u){parent.postMessage({type:'easel:image-ready',pushId:pid,dataUrl:u,filename:fn,format:fmt},'*')}).catch(function(err){console.error(err);parent.postMessage({type:'easel:image-error',pushId:pid,format:fmt,message:(err&&err.message)?err.message:String(err)},'*')})}})})();</script>";
+      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:config')a(e.data);if(e.data.type==='easel:theme')a({theme:e.data.theme});if(e.data.type==='easel:print'){try{window.print()}catch(_){}}if(e.data.type==='easel:image'){var pid=e.data.pushId;var fn=e.data.filename||'push.png';var fmt=e.data.format==='pdf'?'pdf':'png';var bg=e.data.bgColor||'#ffffff';if(!window.htmlToImage)return;var rfn=fmt==='pdf'?window.htmlToImage.toJpeg:window.htmlToImage.toPng;var ropts={backgroundColor:bg,pixelRatio:fmt==='pdf'?2:4,cacheBust:true};if(fmt==='pdf')ropts.quality=0.92;rfn(document.body,ropts).then(function(u){parent.postMessage({type:'easel:image-ready',pushId:pid,dataUrl:u,filename:fn,format:fmt},'*')}).catch(function(err){console.error(err);parent.postMessage({type:'easel:image-error',pushId:pid,format:fmt,message:(err&&err.message)?err.message:String(err)},'*')})}})})();</script>";
     const measureScript = "<script>" + selfMeasureScript(pushId) + "</script>";
     const combined = configScript + measureScript;
     if (/<\/body>/i.test(html)) return html.replace(/<\/body>/i, combined + "</body>");

package/dist/mcp.js

@@ -3,11 +3,8 @@ import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import { spawn } from "node:child_process";
-import { existsSync } from "node:fs";
-import { join } from "node:path";
 import { ensureHttpServer } from "./server-manager.js";
 import { resolveClaudeSessionId } from "./session-id.js";
-import { HOOK_DIR } from "./paths.js";
 function openUrlInBrowser(url) {
     const platform = process.platform;
     const cmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
@@ -24,14 +21,6 @@ const TOOL_PUSH = "push";
 const TOOL_OPEN = "open";
 const TOOL_CONFIG = "config";
 const TOOL_LABEL = "label";
-/**
- * True if a SessionStart hook (e.g. Claude Code's) has already written a
- * session-id file for this MCP child's PPID. Tells us a hook-aware client is
- * managing tab lifecycle, so the MCP server should NOT also auto-open.
- */
-function hookHasFiredForThisPpid() {
-    return existsSync(join(HOOK_DIR, `cc-session-${process.ppid}.txt`));
-}
 // One-shot guard: only auto-open once per MCP-child lifetime. If the user
 // closes the tab afterwards, subsequent pushes won't re-open it — the user
 // closing the tab is treated as an explicit dismissal we should respect.
@@ -43,10 +32,16 @@ let autoOpenAttempted = false;
  * - `otherTabs > 0`: easel is open, but on a different session. Don't surprise
  *   the user with another window — return "other-session" so the caller can
  *   tell the agent to ask whether to use the topbar switcher or open a new tab.
- * - both 0 + no hook-managed tab: auto-open one tab.
+ * - both 0: auto-open one tab.
  *
  * One-shot per MCP child lifetime. Closing the tab counts as dismissal;
  * subsequent pushes won't re-open.
+ *
+ * Note: until 0.2.13, this also short-circuited when the Claude Code
+ * SessionStart hook had fired (`hookHasFiredForThisPpid`), because the hook
+ * itself opened a tab. As of 0.2.14 `easel setup` no longer installs that
+ * hook, so the MCP-side decision is reactive to actual tab presence only —
+ * `sessionTabs` is the truthful signal.
  */
 function autoOpenIfNeeded(url, sessionTabs, otherTabs) {
     if (autoOpenAttempted)
@@ -60,11 +55,6 @@ function autoOpenIfNeeded(url, sessionTabs, otherTabs) {
         autoOpenAttempted = true;
         return { kind: "other-session" };
     }
-    if (hookHasFiredForThisPpid()) {
-        // Claude Code's SessionStart hook handled it (or tried to).
-        autoOpenAttempted = true;
-        return { kind: "noop" };
-    }
     autoOpenAttempted = true;
     openUrlInBrowser(url);
     return { kind: "opened" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ammduncan/easel",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "A live browser tab for every Claude Code (and MCP) session. The push MCP tool appends HTML cards to a scrolling feed you keep open in split-screen.",
   "type": "module",
   "license": "MIT",