slides-grab 1.1.6 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slides-grab",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PDF or experimental/unstable PPTX/Figma formats",
   "license": "MIT",
   "author": "vkehfdl1",

package/scripts/editor-server.js

@@ -3,7 +3,6 @@
 import { readdir, readFile, writeFile, mkdtemp, rm, mkdir } from 'node:fs/promises';
 import { watch as fsWatch } from 'node:fs';
 import { basename, dirname, join, resolve, relative, sep } from 'node:path';
-import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { tmpdir } from 'node:os';
 
@@ -18,6 +17,10 @@ import {
   scaleSelectionToScreenshot,
   writeAnnotatedScreenshot,
 } from '../src/editor/codex-edit.js';
+import {
+  parseEditTimeoutMs,
+  runEditSubprocess,
+} from '../src/editor/edit-subprocess.js';
 import { buildSlideRuntimeHtml } from '../src/image-contract.js';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -45,6 +48,7 @@ const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
 
 const MAX_RUNS = 200;
 const MAX_LOG_CHARS = 800_000;
+const EDIT_TIMEOUT_MS = parseEditTimeoutMs();
 
 function printUsage() {
   process.stdout.write(`Usage: slides-grab edit [options]\n\n`);
@@ -233,37 +237,24 @@ function randomRunId() {
   return `run-${ts}-${rand}`;
 }
 
+function mirrorRunLog(onLog) {
+  return (stream, chunk) => {
+    onLog(stream, chunk);
+    process[stream].write(chunk);
+  };
+}
+
 function spawnCodexEdit({ prompt, imagePath, model, cwd, onLog }) {
   const codexBin = process.env.PPT_AGENT_CODEX_BIN || 'codex';
   const args = buildCodexExecArgs({ prompt, imagePath, model });
-
-  return new Promise((resolvePromise, rejectPromise) => {
-    const child = spawn(codexBin, args, { cwd, stdio: 'pipe' });
-
-    let stdout = '';
-    let stderr = '';
-
-    child.stdout.on('data', (chunk) => {
-      const text = chunk.toString();
-      stdout += text;
-      onLog('stdout', text);
-      process.stdout.write(text);
-    });
-
-    child.stderr.on('data', (chunk) => {
-      const text = chunk.toString();
-      stderr += text;
-      onLog('stderr', text);
-      process.stderr.write(text);
-    });
-
-    child.on('close', (code) => {
-      resolvePromise({ code: code ?? 1, stdout, stderr });
-    });
-
-    child.on('error', (error) => {
-      rejectPromise(error);
-    });
+  return runEditSubprocess({
+    bin: codexBin,
+    args,
+    cwd,
+    stdio: 'pipe',
+    timeoutMs: EDIT_TIMEOUT_MS,
+    engineLabel: 'Codex',
+    onLog: mirrorRunLog(onLog),
   });
 }
 
@@ -275,37 +266,15 @@ function spawnClaudeEdit({ prompt, imagePath, model, cwd, onLog }) {
   const env = { ...process.env };
   delete env.CLAUDECODE;
 
-  return new Promise((resolvePromise, rejectPromise) => {
-    const child = spawn(claudeBin, args, {
-      cwd,
-      stdio: ['ignore', 'pipe', 'pipe'],
-      env,
-    });
-
-    let stdout = '';
-    let stderr = '';
-
-    child.stdout.on('data', (chunk) => {
-      const text = chunk.toString();
-      stdout += text;
-      onLog('stdout', text);
-      process.stdout.write(text);
-    });
-
-    child.stderr.on('data', (chunk) => {
-      const text = chunk.toString();
-      stderr += text;
-      onLog('stderr', text);
-      process.stderr.write(text);
-    });
-
-    child.on('close', (code) => {
-      resolvePromise({ code: code ?? 1, stdout, stderr });
-    });
-
-    child.on('error', (error) => {
-      rejectPromise(error);
-    });
+  return runEditSubprocess({
+    bin: claudeBin,
+    args,
+    cwd,
+    env,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    timeoutMs: EDIT_TIMEOUT_MS,
+    engineLabel: 'Claude',
+    onLog: mirrorRunLog(onLog),
   });
 }
 
@@ -674,7 +643,7 @@ async function startServer(opts) {
       const success = result.code === 0;
       const message = success
         ? `${engineLabel} edit completed.`
-        : `${engineLabel} exited with code ${result.code}.`;
+        : (result.timeoutMessage || `${engineLabel} exited with code ${result.code}.`);
 
       runStore.finishRun(runId, {
         status: success ? 'success' : 'failed',

package/skills/slides-grab-design/SKILL.md

@@ -23,21 +23,27 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 
 ## Workflow
 1. Read approved `slide-outline.md`.
-2. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
-3. If the deck needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), create the diagram in `tldraw`, export it with `slides-grab tldraw`, and treat the result as a local slide asset under `<slides-dir>/assets/`.
-4. Run `slides-grab validate --slides-dir <path>` after generation or edits.
-5. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
-6. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.
-7. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.
-8. Keep revising until user approves conversion stage.
+2. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles).
+3. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
+4. If the deck needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), create the diagram in `tldraw`, export it with `slides-grab tldraw`, and treat the result as a local slide asset under `<slides-dir>/assets/`.
+5. Run `slides-grab validate --slides-dir <path>` after generation or edits.
+6. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
+7. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.
+8. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
+9. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.
+10. Keep revising until user approves conversion stage.
 
 ## Rules
 - Keep slide size 720pt x 405pt.
 - Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).
 - Put local images under `<slides-dir>/assets/` and reference them as `./assets/<file>`.
 - Allow `data:` URLs when the slide must be fully self-contained.
-- Treat remote `https://` images as best-effort only, and never use absolute filesystem paths.
+- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
 - Prefer `<img>` for slide imagery and `data-image-placeholder` when no final asset exists.
+- Default to one job per slide, one dominant visual anchor, and copy that scans in seconds.
+- Treat opening slides and section dividers like posters, not dashboards.
+- Default to cardless layouts; only add a card when it improves structure or comprehension.
+- Use whitespace, alignment, scale, cropping, and contrast before adding decorative chrome.
 - Prefer `tldraw` for complex diagrams instead of recreating dense node/edge diagrams directly in HTML/CSS.
 - Use `slides-grab tldraw` plus `templates/diagram-tldraw.html` when that gives a cleaner, more export-friendly result.
 - Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.
@@ -48,4 +54,5 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 For full constraints and style system, follow:
 - `references/design-rules.md`
 - `references/detailed-design-rules.md`
+- `references/beautiful-slide-defaults.md` — slide-specific art direction defaults adapted from OpenAI's frontend design guidance
 - `references/design-system-full.md` — archived full design system, templates, and advanced pattern guidance

package/skills/slides-grab-design/references/beautiful-slide-defaults.md

@@ -0,0 +1,45 @@
+# Beautiful Slide Defaults
+
+Slide-specific art direction guidance adapted from OpenAI's frontend design guidance for GPT-5.4. Use it to make HTML slides feel deliberate, premium, and instantly scannable without breaking `slides-grab`'s export constraints.
+
+## Working Model
+
+Before building the deck, write two things:
+
+- **visual thesis** — one sentence describing the mood, material, energy, and imagery treatment
+- **content plan** — opener → support/proof → detail/story → close/CTA or decision
+
+If the style direction is still open, gather visual references or a mood board first. Define the core tokens early: `background`, `surface`, `primary text`, `muted text`, `accent`, plus typography roles for `display`, `headline`, `body`, and `caption`.
+
+## Beautiful Defaults for Slides
+
+- Start with composition, not components.
+- Treat the opening slide like a poster and make the title or brand the loudest text.
+- Give each slide one job, one primary takeaway, and one dominant visual anchor.
+- Keep copy short enough to scan in seconds.
+- Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
+- Limit the system by default: two typefaces max and one accent color.
+- Default to cardless layouts. Prefer sections, grids, media blocks, dividers, and strong negative space.
+- Use real imagery, product views, diagrams, or data as the main visual idea. Decorative gradients and abstract filler do not count.
+- Keep the first slide free of secondary clutter such as stat strips, metadata piles, or multiple competing callouts unless the brief explicitly demands them.
+
+## Narrative Sequence for Decks
+
+Use a narrative rhythm that feels intentional:
+
+1. **Opener** — identity, premise, or promise
+2. **Support / proof** — key evidence, context, or concrete value
+3. **Detail / story** — workflow, mechanism, or deeper explanation
+4. **Close / CTA** — decision, recommendation, next step, or final message
+
+Section dividers should reset the visual tempo. Alternate dense proof slides with simpler image-led or statement-led slides so the deck keeps breathing.
+
+## Review Litmus
+
+Before showing the deck, ask:
+
+- Can the audience grasp the main point of each slide in 3–5 seconds?
+- Does each slide have one dominant idea instead of multiple competing blocks?
+- Is there one real visual anchor, not just decoration?
+- Would this still feel premium without shadows, cards, or extra chrome?
+- Can any line of copy, badge, or callout be removed without losing meaning?

package/skills/slides-grab-design/references/design-rules.md

@@ -18,8 +18,10 @@ These are the packaged design rules for installable `slides-grab` skills.
 ## Asset rules
 - Store deck-local assets in `<slides-dir>/assets/`
 - Reference deck-local assets as `./assets/<file>`
+- If an image comes from the web, download it into `<slides-dir>/assets/` before referencing it
 - Use `tldraw`-generated local assets for complex diagrams when possible
 - Allow `data:` URLs only when the slide must be fully self-contained
+- Do not leave remote `http(s)://` image URLs in saved slide HTML
 - Never use absolute filesystem paths
 
 ## Package-published theme references

package/skills/slides-grab-design/references/design-system-full.md

@@ -461,11 +461,13 @@ Store the image at `<slides-dir>/assets/team-photo.png`.
 <img src="data:image/svg+xml;base64,..." alt="Illustration" style="width: 220pt; height: 140pt; object-fit: cover;">
 ```
 
-#### Remote URL (Best-Effort Only)
+#### Remote URL Source (Download Before Saving)
 ```html
 <img src="https://images.example.com/hero.png" alt="Hero image" style="width: 220pt; height: 140pt; object-fit: cover;">
 ```
 
+If the image source starts on the web, download it into `<slides-dir>/assets/` and change the saved slide HTML to `./assets/<file>`.
+
 #### Placeholder (Image Stand-In)
 ```html
 <div data-image-placeholder style="width: 220pt; height: 140pt; border: 1px dashed #c7c7c7; background: #f3f4f6; display: flex; align-items: center; justify-content: center;">
@@ -478,7 +480,7 @@ Rules:
 - Use `./assets/<file>` as the default image contract for slide HTML.
 - Keep slide assets in `<slides-dir>/assets/`.
 - `data:` URLs are allowed for fully self-contained slides.
-- Remote `https://` URLs are allowed but non-deterministic and should be treated as fallback only.
+- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
 - Do not use absolute filesystem paths in slide HTML.
 - Do not use non-body `background-image` for content imagery; use `<img>` instead.
 - Use `data-image-placeholder` to reserve space when no image is available yet.
@@ -573,6 +575,6 @@ This skill is **Stage 2**. It works from the `slide-outline.md` approved by the
 
 1. **CSS gradients**: Not supported in PowerPoint conversion — replace with background images
 2. **Webfonts**: Always include the Pretendard CDN link
-3. **Image paths**: Use `./assets/<file>` from each `slide-XX.html`; avoid absolute filesystem paths
+3. **Image paths**: Use `./assets/<file>` from each `slide-XX.html`; avoid absolute filesystem paths and do not leave remote `http(s)://` image URLs in saved slide HTML
 4. **Colors**: Always include `#` prefix in CSS
 5. **Text rules**: Never place text directly in div/span

package/skills/slides-grab-design/references/detailed-design-rules.md

@@ -11,7 +11,7 @@
 - Keep slide assets in `<slides-dir>/assets/`.
 - Use `tldraw`-generated assets for complex diagrams whenever possible.
 - `data:` URLs are allowed for fully self-contained slides.
-- Remote `https://` URLs are allowed but non-deterministic and fallback only.
+- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
 - Do not use absolute filesystem paths in slide HTML.
 - Do not use non-body `background-image` for content imagery; use `<img>` instead.
 - Use `data-image-placeholder` to reserve space when no image is available yet.

package/src/editor/codex-edit.js

@@ -9,13 +9,52 @@ export const SLIDE_SIZE = { width: 960, height: 540 };
 
 const PPT_DESIGN_SKILL_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'SKILL.md');
 const DETAILED_DESIGN_SKILL_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'references', 'detailed-design-rules.md');
+const BEAUTIFUL_SLIDE_DEFAULTS_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'references', 'beautiful-slide-defaults.md');
+const EDITOR_PPT_DESIGN_SECTION_HEADINGS = [
+  '## Workflow',
+  '## Rules',
+];
 const DETAILED_DESIGN_SECTION_HEADINGS = [
   '## Base Settings',
-  '### 4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)',
   '## Text Usage Rules',
   '## Workflow (Stage 2: Design + Human Review)',
   '## Important Notes',
 ];
+const BEAUTIFUL_SLIDE_DEFAULTS_SECTION_HEADINGS = [
+  '## Working Model',
+  '## Beautiful Defaults for Slides',
+  '## Narrative Sequence for Decks',
+  '## Review Litmus',
+];
+const EDITOR_PPT_DESIGN_DUPLICATE_PATTERNS = [
+  /visual thesis/i,
+  /content plan/i,
+  /dominant visual anchor/i,
+  /cardless layouts/i,
+  /whitespace, alignment, scale, cropping, and contrast/i,
+  /opening slides and section dividers like posters/i,
+];
+const EDITOR_PPT_DESIGN_SKILL_FALLBACK = [
+  '## Workflow',
+  '1. Read approved `slide-outline.md` or the existing slide before editing.',
+  '2. Run `slides-grab validate --slides-dir <path>` after generation or edits.',
+  '3. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.',
+  '4. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.',
+  '5. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.',
+  '6. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.',
+  '7. Keep revising until user approves conversion stage.',
+  '',
+  '## Rules',
+  '- Keep slide size 720pt x 405pt.',
+  '- Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).',
+  '- Put local images under `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
+  '- Allow `data:` URLs when the slide must be fully self-contained.',
+  '- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
+  '- Prefer `<img>` for slide imagery and `data-image-placeholder` when no final asset exists.',
+  '- Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.',
+  '- Do not start conversion before approval.',
+  '- Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.',
+].join('\n');
 const DETAILED_DESIGN_SKILL_FALLBACK = [
   '## Base Settings',
   '',
@@ -29,7 +68,7 @@ const DETAILED_DESIGN_SKILL_FALLBACK = [
   '- Use ./assets/<file> as the default image contract for slide HTML.',
   '- Keep slide assets in <slides-dir>/assets/.',
   '- data: URLs are allowed for fully self-contained slides.',
-  '- Remote https:// URLs are allowed but non-deterministic and fallback only.',
+  '- Do not leave remote http(s):// image URLs in saved slide HTML; download source images into <slides-dir>/assets/ and reference them as ./assets/<file>.',
   '- Do not use absolute filesystem paths in slide HTML.',
   '- Do not use non-body background-image for content imagery; use <img> instead.',
   '- Use data-image-placeholder to reserve space when no image is available yet.',
@@ -51,9 +90,38 @@ const DETAILED_DESIGN_SKILL_FALLBACK = [
   '- Always include # prefix in CSS colors.',
   '- Never place text directly in div/span.',
 ].join('\n');
+const BEAUTIFUL_SLIDE_DEFAULTS_FALLBACK = [
+  '## Working Model',
+  '',
+  'Before building the deck, write two things:',
+  '- **visual thesis** — one sentence describing the mood, material, energy, and imagery treatment.',
+  '- **content plan** — opener → support/proof → detail/story → close/CTA or decision.',
+  '- Define design tokens early: background, surface, primary text, muted text, accent, plus display/headline/body/caption roles.',
+  '',
+  '## Beautiful Defaults for Slides',
+  '- Start with composition, not components.',
+  '- Treat the opening slide like a poster and make the title or brand the loudest text.',
+  '- Give each slide one job, one primary takeaway, and one dominant visual anchor.',
+  '- Keep copy short enough to scan in seconds.',
+  '- Use whitespace, alignment, scale, cropping, and contrast before adding chrome.',
+  '- Limit the system by default: two typefaces max and one accent color.',
+  '- Default to cardless layouts unless a card improves structure or understanding.',
+  '',
+  '## Narrative Sequence for Decks',
+  '- Opener → support/proof → detail/story → close/CTA or decision.',
+  '- Section dividers should reset the visual tempo.',
+  '',
+  '## Review Litmus',
+  '- Can the audience grasp the main point of each slide in 3–5 seconds?',
+  '- Does the slide have one dominant idea instead of competing blocks?',
+  '- Is there one real visual anchor, not just decoration?',
+  '- Would this still feel premium without shadows, cards, or extra chrome?',
+].join('\n');
 
 let cachedPptDesignSkillPrompt = null;
-let cachedDetailedDesignSkillPrompt = null;
+let cachedEditorPptDesignSkillPrompt = null;
+let cachedStructuralDesignSkillPrompt = null;
+let cachedSlideArtDirectionPrompt = null;
 
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
@@ -142,6 +210,25 @@ export function getPptDesignSkillPrompt() {
   return cachedPptDesignSkillPrompt;
 }
 
+function getEditorPptDesignSkillPrompt() {
+  if (cachedEditorPptDesignSkillPrompt !== null) {
+    return cachedEditorPptDesignSkillPrompt;
+  }
+
+  const prompt = loadMarkdownSections(
+    PPT_DESIGN_SKILL_PATH,
+    EDITOR_PPT_DESIGN_SECTION_HEADINGS,
+    EDITOR_PPT_DESIGN_SKILL_FALLBACK,
+  );
+
+  cachedEditorPptDesignSkillPrompt = pruneDuplicateLines(
+    prompt,
+    EDITOR_PPT_DESIGN_DUPLICATE_PATTERNS,
+  );
+
+  return cachedEditorPptDesignSkillPrompt;
+}
+
 function extractMarkdownSection(markdown, heading) {
   const lines = markdown.split('\n');
   const startIndex = lines.findIndex((line) => line.trim() === heading.trim());
@@ -168,25 +255,74 @@ function extractMarkdownSection(markdown, heading) {
   return extracted.join('\n').trim();
 }
 
-export function getDetailedDesignSkillPrompt() {
-  if (cachedDetailedDesignSkillPrompt !== null) {
-    return cachedDetailedDesignSkillPrompt;
+function pruneDuplicateLines(markdown, patterns) {
+  const lines = markdown.split('\n');
+  const filtered = [];
+
+  for (const line of lines) {
+    if (patterns.some((pattern) => pattern.test(line))) {
+      continue;
+    }
+
+    const previousLine = filtered.at(-1) ?? '';
+    if (line.trim() === '' && previousLine.trim() === '') {
+      continue;
+    }
+
+    filtered.push(line);
   }
 
+  return filtered.join('\n').trim();
+}
+
+function loadMarkdownSections(markdownPath, headings, fallback) {
   try {
-    const markdown = readFileSync(DETAILED_DESIGN_SKILL_PATH, 'utf8');
-    const sections = DETAILED_DESIGN_SECTION_HEADINGS
+    const markdown = readFileSync(markdownPath, 'utf8');
+    const sections = headings
       .map((heading) => extractMarkdownSection(markdown, heading))
       .filter(Boolean);
 
-    cachedDetailedDesignSkillPrompt = sections.length > 0
+    return sections.length > 0
       ? sections.join('\n\n')
-      : DETAILED_DESIGN_SKILL_FALLBACK;
+      : fallback;
   } catch {
-    cachedDetailedDesignSkillPrompt = DETAILED_DESIGN_SKILL_FALLBACK;
+    return fallback;
   }
+}
 
-  return cachedDetailedDesignSkillPrompt;
+function getStructuralDesignSkillPrompt() {
+  if (cachedStructuralDesignSkillPrompt !== null) {
+    return cachedStructuralDesignSkillPrompt;
+  }
+
+  cachedStructuralDesignSkillPrompt = loadMarkdownSections(
+    DETAILED_DESIGN_SKILL_PATH,
+    DETAILED_DESIGN_SECTION_HEADINGS,
+    DETAILED_DESIGN_SKILL_FALLBACK,
+  );
+
+  return cachedStructuralDesignSkillPrompt;
+}
+
+function getSlideArtDirectionPrompt() {
+  if (cachedSlideArtDirectionPrompt !== null) {
+    return cachedSlideArtDirectionPrompt;
+  }
+
+  cachedSlideArtDirectionPrompt = loadMarkdownSections(
+    BEAUTIFUL_SLIDE_DEFAULTS_PATH,
+    BEAUTIFUL_SLIDE_DEFAULTS_SECTION_HEADINGS,
+    BEAUTIFUL_SLIDE_DEFAULTS_FALLBACK,
+  );
+
+  return cachedSlideArtDirectionPrompt;
+}
+
+export function getDetailedDesignSkillPrompt() {
+  return [
+    getStructuralDesignSkillPrompt(),
+    getSlideArtDirectionPrompt(),
+  ].filter(Boolean).join('\n\n');
 }
 
 export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selections = [] }) {
@@ -215,7 +351,7 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
     ];
   });
 
-  const pptDesignSkillPrompt = getPptDesignSkillPrompt();
+  const pptDesignSkillPrompt = getEditorPptDesignSkillPrompt();
   const skillLines = pptDesignSkillPrompt
     ? [
         'Project skill guidance (follow strictly):',
@@ -224,7 +360,7 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
         '',
       ]
     : [];
-  const detailedDesignSkillPrompt = getDetailedDesignSkillPrompt();
+  const detailedDesignSkillPrompt = getStructuralDesignSkillPrompt();
   const detailedSkillLines = detailedDesignSkillPrompt
     ? [
         'Detailed design/export guardrails (selected from the full design system):',
@@ -233,23 +369,37 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
         '',
       ]
     : [];
+  const slideArtDirectionPrompt = getSlideArtDirectionPrompt();
+  const slideArtDirectionLines = slideArtDirectionPrompt
+    ? [
+        'Slide art direction defaults (packaged guidance for beautiful HTML slides):',
+        `Primary source: ${BEAUTIFUL_SLIDE_DEFAULTS_PATH}`,
+        slideArtDirectionPrompt,
+        '',
+      ]
+    : [];
 
   return [
     `Edit ${normalizedSlidePath} only.`,
     '',
     ...skillLines,
     ...detailedSkillLines,
+    ...slideArtDirectionLines,
     'User edit request:',
     sanitizedPrompt,
     '',
     'Selected regions on slide (960x540 coordinate space):',
     ...selectionLines,
     'Rules:',
-    '- Modify only the requested slide file.',
+    '- Edit only the requested slide HTML file among slide-*.html files.',
+    '- Do not modify any other slide HTML files unless explicitly requested.',
     '- Keep existing structure/content unless the request requires a change.',
     '- Keep slide dimensions at 720pt x 405pt.',
     '- Keep text in semantic tags (<p>, <h1>-<h6>, <ul>, <ol>, <li>).',
+    '- You may add or update supporting files required for the requested slide, including local assets under <slides-dir>/assets/ and tldraw source/export files used to generate those assets.',
+    '- If you create or update a supporting asset, store it under <slides-dir>/assets/ and reference it from the requested slide as ./assets/<file>.',
     '- Keep local assets under ./assets/ and preserve portable relative paths.',
+    '- Do not modify unrelated assets, shared resources, or generated files that are not required for the requested slide.',
     '- Do not persist runtime-only editor/viewer injections such as <base>, debug scripts, or viewer wrapper markup into the slide file.',
     '- Return after applying the change.',
   ].join('\n');

package/src/editor/edit-subprocess.js

@@ -0,0 +1,97 @@
+import { spawn } from 'node:child_process';
+
+export const DEFAULT_EDIT_TIMEOUT_MS = 10 * 60 * 1000;
+export const EDIT_TIMEOUT_EXIT_CODE = 124;
+export const EDIT_TIMEOUT_ENV_VAR = 'PPT_AGENT_EDIT_TIMEOUT_MS';
+export const EDIT_TIMEOUT_KILL_SIGNAL = 'SIGTERM';
+export const EDIT_TIMEOUT_FORCE_KILL_AFTER_MS = 5_000;
+
+export function parseEditTimeoutMs(rawValue = process.env[EDIT_TIMEOUT_ENV_VAR]) {
+  if (rawValue == null || rawValue === '') {
+    return DEFAULT_EDIT_TIMEOUT_MS;
+  }
+
+  const timeoutMs = Number(rawValue);
+  if (!Number.isFinite(timeoutMs) || timeoutMs <= 0) {
+    return DEFAULT_EDIT_TIMEOUT_MS;
+  }
+
+  return Math.floor(timeoutMs);
+}
+
+export function buildEditTimeoutMessage({ engineLabel = 'Editor process', timeoutMs }) {
+  return `${engineLabel} edit timed out after ${timeoutMs}ms and was terminated.`;
+}
+
+export function runEditSubprocess({
+  bin,
+  args,
+  cwd,
+  env,
+  stdio = ['ignore', 'pipe', 'pipe'],
+  timeoutMs = DEFAULT_EDIT_TIMEOUT_MS,
+  engineLabel,
+  onLog = () => {},
+  spawnImpl = spawn,
+}) {
+  return new Promise((resolvePromise, rejectPromise) => {
+    const child = spawnImpl(bin, args, { cwd, env, stdio });
+
+    let stdout = '';
+    let stderr = '';
+    let timedOut = false;
+    let settled = false;
+    let forceKillTimer = null;
+
+    const timeoutMessage = buildEditTimeoutMessage({ engineLabel, timeoutMs });
+
+    const timeoutTimer = setTimeout(() => {
+      timedOut = true;
+      const messageLine = `${timeoutMessage}\n`;
+      stderr += messageLine;
+      onLog('stderr', messageLine);
+      child.kill(EDIT_TIMEOUT_KILL_SIGNAL);
+      forceKillTimer = setTimeout(() => {
+        child.kill('SIGKILL');
+      }, EDIT_TIMEOUT_FORCE_KILL_AFTER_MS);
+      forceKillTimer.unref?.();
+    }, timeoutMs);
+    timeoutTimer.unref?.();
+
+    child.stdout?.on('data', (chunk) => {
+      const text = chunk.toString();
+      stdout += text;
+      onLog('stdout', text);
+    });
+
+    child.stderr?.on('data', (chunk) => {
+      const text = chunk.toString();
+      stderr += text;
+      onLog('stderr', text);
+    });
+
+    child.on('close', (code, signal) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutTimer);
+      clearTimeout(forceKillTimer);
+      resolvePromise({
+        code: timedOut ? EDIT_TIMEOUT_EXIT_CODE : (code ?? 1),
+        stdout,
+        stderr,
+        signal: timedOut ? (signal || EDIT_TIMEOUT_KILL_SIGNAL) : signal,
+        timedOut,
+        timeoutMs: timedOut ? timeoutMs : null,
+        timeoutMessage: timedOut ? timeoutMessage : null,
+      });
+    });
+
+    child.on('error', (error) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutTimer);
+      clearTimeout(forceKillTimer);
+      rejectPromise(error);
+    });
+  });
+}

package/src/image-contract.js

@@ -66,9 +66,9 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
 
     if (classification.kind === 'remote-url') {
       issues.push({
-        severity: 'warning',
+        severity: 'critical',
         code: 'remote-image-url',
-        message: 'Remote image URL is best-effort only and may break deterministic exports.',
+        message: 'Remote image URLs are unsupported in saved slide HTML. Download the image into ./assets/<file> instead.',
         slide: slideFile,
         ...entry,
       });
@@ -77,9 +77,9 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
 
     if (classification.kind === 'remote-url-insecure') {
       issues.push({
-        severity: 'warning',
+        severity: 'critical',
         code: 'remote-image-url-insecure',
-        message: 'Insecure http:// image URL is discouraged. Prefer ./assets/<file> or data: URLs.',
+        message: 'Remote http:// image URLs are unsupported in saved slide HTML. Download the image into ./assets/<file> instead.',
         slide: slideFile,
         ...entry,
       });
@@ -183,11 +183,11 @@ export function buildSlideRuntimeHtml(html, { baseHref, slideFile }) {
       const src = (image.getAttribute('src') || '').trim();
       if (!src || src.startsWith('data:')) continue;
       if (src.startsWith('https://')) {
-        warn('remote image is best-effort only', { src });
+        fail('remote image URL is unsupported in saved slides; download it into ./assets/<file>', { src });
         continue;
       }
       if (src.startsWith('http://')) {
-        warn('insecure remote image is discouraged', { src });
+        fail('remote http:// image URL is unsupported in saved slides; download it into ./assets/<file>', { src });
         continue;
       }
       if (absolutePathRe.test(src) || src.startsWith('/')) {

package/src/validation/core.js

@@ -622,6 +622,10 @@ const EXPORT_BLOCKING_IMAGE_CONTRACT_CODES = new Set([
   'absolute-filesystem-image-path',
   'missing-local-asset',
   'missing-local-background-asset',
+  'remote-background-image-url',
+  'remote-background-image-url-insecure',
+  'remote-image-url',
+  'remote-image-url-insecure',
   'root-relative-image-path',
   'unsupported-background-image',
 ]);