@@ -108,7 +108,7 @@ if (positionals[0] === 'export' || positionals[0] === 'spec') {
 }
 // Fingerprint of this code. A canvas left running from older code gets replaced (see ensureCanvas).
 const VERSION = createHash('sha1')
-  .update(['bin/giotto.js', 'public/app.html', 'lib/edit.js', 'lib/render.js', 'lib/styles.js', 'lib/blocks.js', 'lib/scenes.js', 'lib/animate.js', 'lib/video.js', 'lib/history.js', 'lib/page.js', 'public/index.html'].map((f) => readFileSync(path.join(root, f))).join('\0'))
+  .update(['bin/giotto.js', 'public/app.html', 'lib/edit.js', 'lib/render.js', 'lib/styles.js', 'lib/blocks.js', 'lib/scenes.js', 'lib/animate.js', 'lib/video.js', 'lib/frame-worker.js', 'lib/emoji.js', 'lib/render-job.js', 'lib/history.js', 'lib/page.js', 'public/index.html'].map((f) => readFileSync(path.join(root, f))).join('\0'))
   .digest('hex')
   .slice(0, 12);
 const dir = path.resolve(opts.dir);
@@ -326,8 +326,7 @@ function serve() {
         const job = String(nextJob++), file = path.join(os.tmpdir(), `giotto-${process.pid}-${job}.mp4`);
         const rate = [24, 30, 60].includes(+fps) ? +fps : 24;
         jobs.set(job, { job, id, name: String(name || id), size, fps: rate, seconds: timeline(doc).total / 1000, started: Date.now(), progress: 0, done: false, error: null, file });
-        import('../lib/video.js')
-          .then(({ toMp4 }) => toMp4(doc, style, file, { dark: !!dark, styles, size, fps: rate, onProgress: (p) => (jobs.get(job) && (jobs.get(job).progress = p)) }))
+        toMp4Isolated(doc, style, file, { dark: !!dark, styles, size, fps: rate }, (p) => jobs.get(job) && (jobs.get(job).progress = p))
           .then(async () => { const j = jobs.get(job); if (j) Object.assign(j, { done: true, progress: 1, bytes: (await fs.stat(file)).size, finished: Date.now() }); },
             (e) => jobs.get(job) && (jobs.get(job).error = e.message));
         return send(200, { job });
@@ -356,8 +355,9 @@ function serve() {
         return res.end(png);
       }
       if (route === 'POST /api/png') {
+        const png = await toPng((await body()).svg); // rendered first, so a failure is a proper error
         res.writeHead(200, { 'content-type': 'image/png' });
-        return res.end(await toPng((await body()).svg));
+        return res.end(png);
       }
       send(404, { error: 'not found' });
     } catch (e) {
@@ -499,21 +499,49 @@ Pages export as png (drawn by Chrome, which must be installed) or html (one self
 const linkTo = (id) => (opts.cloud ? null : `${url}/#${id}`);
 const seeIt = (id) => (opts.cloud ? '' : ` Give the user this link: ${id === undefined ? url : linkTo(id)}`);
 
-// PNG is drawn here from the exact SVG, so it never depends on a browser being open.
-let Resvg;
-async function toPng(svg) {
-  if (!Resvg) {
+// PNG and video are drawn from the exact SVG, so they never depend on a browser being open. Each runs in a
+// process of its own (lib/render-job.js): resvg aborts the process it runs in on some drawings, and that must
+// not take this server (the canvas, or the agent's MCP connection) down with it.
+let rendererReady = false;
+async function renderJob(job, onLine) {
+  if (!rendererReady) {
     // Installs that updated from before this dependency existed won't have it yet: fetch it once.
-    const load = async () => (await import('@resvg/resvg-js')).Resvg;
-    Resvg = await load().catch(() => {
+    await import('@resvg/resvg-js').catch(() => {
       log('installing the PNG renderer (one time)...');
       execFileSync('npm', ['install', '--omit=dev', '--no-audit', '--no-fund', '--silent'], { cwd: root, stdio: ['ignore', 'ignore', 'inherit'] });
-      return load();
     });
+    rendererReady = true;
   }
-  const font = { loadSystemFonts: true };
-  const { emojify } = await import('../lib/emoji.js'); // resvg can't draw color emoji: they go in as pictures
-  return new Resvg(emojify(svg, Resvg, font, 'Arial'), { fitTo: { mode: 'zoom', value: 2 }, font }).render().asPng();
+  return new Promise((resolve, reject) => {
+    const child = spawn(process.execPath, [path.join(root, 'lib', 'render-job.js')], { stdio: ['pipe', 'pipe', 'pipe'] });
+    const out = [], err = [];
+    let partial = '';
+    child.stdout.on('data', (d) => {
+      if (!onLine) return out.push(d);
+      partial += d;
+      const lines = partial.split('\n');
+      partial = lines.pop();
+      lines.forEach(onLine);
+    });
+    child.stderr.on('data', (d) => err.push(d));
+    child.on('error', reject);
+    child.on('close', (code) => {
+      if (code === 0) return resolve(Buffer.concat(out));
+      const why = Buffer.concat(err).toString();
+      reject(new Error(/panicked|fatal runtime error/.test(why) ? 'The renderer (resvg) crashed on this drawing; Giotto is fine. Something clipped may lie entirely outside the picture.' : why.trim().split('\n').slice(-3).join(' ') || `render failed (${code})`));
+    });
+    child.stdin.end(JSON.stringify(job));
+  });
+}
+const toPng = (svg) => renderJob({ kind: 'png', svg });
+// A video, with progress (0..1) as it renders; resolves to toMp4's summary.
+async function toMp4Isolated(doc, style, out, options, onProgress) {
+  let summary = null;
+  await renderJob({ kind: 'mp4', doc, style, out, options }, (line) => {
+    if (line.startsWith('progress ')) onProgress?.(+line.slice(9));
+    else if (line.startsWith('done ')) summary = JSON.parse(line.slice(5));
+  });
+  return summary;
 }
 
 // Pages are HTML, so their PNG comes from a headless Chrome. First choice: chrome-headless-shell, if Playwright or
@@ -671,8 +699,7 @@ async function callTool(name, a = {}) {
     const out = path.resolve(a.path || `${a.id ? slugify(doc.title || a.id, new Set()) : 'sample'}.${ext}`);
     let made = '';
     if (format === 'mp4') {
-      const { toMp4 } = await import('../lib/video.js');
-      const r = await toMp4(played, style, out, { dark, styles: await listStyles() });
+      const r = await toMp4Isolated(played, style, out, { dark, styles: await listStyles() });
       made = ` (${r.seconds.toFixed(1)}s, ${r.frames} frames)`;
     } else await fs.writeFile(out, format === 'svg' ? svg : format === 'png' ? png : toAnimatedSvg(played, style, { dark, styles: await listStyles() }));
     const warnings = typeof a.style === 'object' && a.style ? styleWarnings(a.style) : [];
 
@@ -24,7 +24,7 @@ export function blocksOf(e) {
     const bullet = /^\s*[-•*]\s+/.exec(line);
     if (bullet && out.at(-1)?.type === 'list' && out.at(-1)._fromLines) out.at(-1).items.push(line.slice(bullet[0].length));
     else if (bullet) out.push({ type: 'list', items: [line.slice(bullet[0].length)], _fromLines: true });
-    else out.push({ type: 'text', text: line });
+    else out.push({ type: 'text', text: line, _fromLines: true });
   }
   if (e.tags?.length) out.push({ type: 'chips', items: e.tags });
   return out;
@@ -116,6 +116,21 @@ function pills(items, room, S) {
   return { rows: used, h: used.length ? used.length * (h + 5) - 5 : 0, w: Math.max(0, ...used.map((r) => r.at(-1).x + r.at(-1).w)), pill: h, size };
 }
 
+// Lines an agent broke by hand at some other width read ragged once wrapped again ("…the" / "cheapest" /
+// "evidence…"). When a line would wrap anyway, and the break falls mid-sentence (the line doesn't end a
+// sentence and the next starts lowercase), the two become one paragraph and wrap as one. Lines that fit stay
+// as written.
+function reflow(lines, room, size, S) {
+  const fits = (t) => String(t).length * size * S.charWidth <= room;
+  const out = [];
+  for (const line of lines) {
+    const prev = out.at(-1);
+    if (prev != null && prev.trim() && line.trim() && !/[.!?:]\s*$/.test(prev) && /^\s*[a-z]/.test(line) && (!fits(prev) || !fits(line))) out[out.length - 1] = `${prev.trimEnd()} ${line.trimStart()}`;
+    else out.push(line);
+  }
+  return out;
+}
+
 function measureBlock(b, room, size, S, align) {
   const lh = size * LINE;
   const at = (x, width, w) => (align === 'center' ? x + width / 2 : x);
@@ -127,7 +142,7 @@ function measureBlock(b, room, size, S, align) {
         draw: (x, y, width, color) => lines.map((l, i) => richLine(l, at(x, width), y + ts * LINE * (i + 0.5), ts, color, anchor, S, { bold: true })).join('') };
     }
     case 'text': {
-      const lines = wrapRich(b.text, room, size, S);
+      const lines = wrapRich(reflow(String(b.text ?? '').split('\n'), room, size, S).join('\n'), room, size, S);
       return { w: Math.max(0, ...lines.map((l) => l.w)), h: lines.length * lh,
         draw: (x, y, width, color) => lines.map((l, i) => richLine(l, at(x, width), y + lh * (i + 0.5), size, color, anchor, S)).join('') };
     }
@@ -279,7 +294,17 @@ function measureBlock(b, room, size, S, align) {
 
 // All blocks of a box, stacked: returns the size they need and a draw(x, y, width, color).
 export function measureBlocks(blocks, room, S, { align = 'left', size = S.fontSize } = {}) {
-  const parts = blocks.map((b) => measureBlock(b, room, size, S, align)).filter((p) => p.h > 0);
+  // A label's lines (each a text block) join up where they were broken by hand mid-sentence (see reflow).
+  const joined = [];
+  for (const b of blocks) {
+    const prev = joined.at(-1);
+    if (b._fromLines && prev?._fromLines) {
+      const r = reflow([prev.text, b.text], room, size, S);
+      if (r.length === 1) { joined[joined.length - 1] = { ...prev, text: r[0] }; continue; }
+    }
+    joined.push(b);
+  }
+  const parts = joined.map((b) => measureBlock(b, room, size, S, align)).filter((p) => p.h > 0);
   return {
     w: Math.max(0, ...parts.map((p) => p.w)),
     h: parts.reduce((s, p) => s + p.h, 0) + GAP * Math.max(0, parts.length - 1),
 
@@ -0,0 +1,18 @@
+// One render job (a PNG, or a video) in a process of its own. resvg aborts the whole process on some drawings
+// (anything clipped or masked that lies entirely outside the picture, in every resvg version so far), and that
+// must not take the canvas or the MCP server down with it. Reads the job as JSON on stdin.
+//   {kind: "png", svg, zoom?}  -> the PNG on stdout
+//   {kind: "mp4", doc, style, out, options}  -> "progress <0..1>" lines on stdout, then "done <json>"
+let input = '';
+for await (const chunk of process.stdin) input += chunk;
+const job = JSON.parse(input);
+
+if (job.kind === 'png') {
+  const [{ Resvg }, { emojify }] = await Promise.all([import('@resvg/resvg-js'), import('./emoji.js')]);
+  const font = { loadSystemFonts: true };
+  process.stdout.write(new Resvg(emojify(job.svg, Resvg, font, 'Arial'), { fitTo: { mode: 'zoom', value: job.zoom ?? 2 }, font }).render().asPng());
+} else if (job.kind === 'mp4') {
+  const { toMp4 } = await import('./video.js');
+  const r = await toMp4(job.doc, job.style, job.out, { ...job.options, onProgress: (p) => process.stdout.write(`progress ${p}\n`) });
+  process.stdout.write(`done ${JSON.stringify(r)}\n`);
+}