Show a draft's figures, embeds and videos, and let drafts use them

[egeozin]

What and why

Page bundles, part 1b: the experience. It builds on #311 (the contract), so merge #311 first. Plan: https://with.md/s/6bxvmfrh

#311 lets an article draft carry figures and embeds and have them approved with the article. This PR shows them to the founder exactly as they'll ship, says what a draft carries in Decisions, and turns the feature on for the two article workflows.

Reader

• render_markdown(markdown, asset_folder=…): with an article's assets folder, its blocks render as placeholders the viewer fills in. Every other document renders as before, except that > [!NOTE] quotes now become callouts everywhere.
  • Figures (![alt](./<folder>/x.svg "caption")) render without a URL. The viewer loads them with the member's session through the raw file endpoint, and an SVG becomes an inert data: image, as Files already does.
  • Embeds (a tin-embed fenced block) run in an <iframe sandbox="allow-scripts" srcdoc> with a Content-Security-Policy meta tag injected first: default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:. That gives an opaque origin with no Tin cookies, storage or page, and no network. A src outside the folder stays a code block.
  • Videos (a tin-video fenced block):
    • YouTube (privacy-enhanced domain), Vimeo, Loom and Mux play in their own player;
    • a video file (.mp4, .webm, .m4v, .mov) plays in place with preload="none", which suits a 97 MB trailer;
    • any other address stays a link, and non-http(s) addresses stay code.
  • Callouts: > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] and [!CAUTION] become a soft labelled panel, with no colored edge.
  • Left-out files: a note under the title names any file Tin left out and why, e.g. "unsafe.svg was left out: the SVG contains script, event handlers or outside references."
• Endpoints: the run document endpoint returns the kept assets (from the published checkpoint) and asset_notes. The Files document endpoint returns the referenced files that exist at that revision, so the same article reads the same in Files.

Decisions

The review explanation says what the draft carries besides its words, e.g. "With 2 figures, 1 interactive piece and 1 video." Diagrams count as figures.

Drafts

• Versions: content.public_article 1.9.0 and content.generate 1.10.0 declare an assets folder (12 files, 2 MB).
• A new page-figures skill in both packages:
  • add a figure only where it shows what the words can't;
  • Mermaid for diagrams, in the brand's colours;
  • SVG figures with no script or outside references;
  • interactive pieces as self-contained HTML with no network;
  • only videos that already exist at a public address, never invented;
  • one or two callouts at most;
  • keep the figures of an existing page instead of describing them;
  • list every figure in Generation notes.
• content.generate applies it to articles only. Answer pages and page refreshes keep their strict formats.

Rollout

1. Merge and deploy Let article drafts carry figures and embeds, approved with the article #311.
2. Rebuild the Codex sandbox templates. Without the rebuild, a draft run with an assets folder stops at --check-assets before any model call. The rebuild also activates Finish runs instead of crashing on recoverable checks, and write down how to fail well #298's task-bridge fix.
3. Deploy this PR.

Delivery doesn't carry bundles yet; that's plan PR 2 (content.deliver and website.change map the blocks to the site's components). Until it lands, an approved draft with figures delivers its words, and its figures stay in Tin. So I'd ship plan PR 2 soon after, or hold delivering bundle drafts until then.

No migration and no Temporal change. Runs keep the versions they pinned.

Verification

• tests/test_page_assets.py, new here:
  • Server rendering of every block: escaping, the height clamp, a folder escape and a javascript: URL kept as code, both callout forms, and other documents unchanged.
  • Through the real endpoints on the bundle fixture: the run document returns the kept assets, the notes for the two left-out files and the placeholders, and Files returns the same assets.
  • The Decisions explanation reads "With 1 figure and 1 interactive piece."
• web/page-bundles.browser.test.js, in Chromium:
  • The SVG figure becomes a data: image with its caption, and a missing one shows its placeholder.
  • The embed's own script reports that it can't read Tin's page, cookies or storage. Its fetch is blocked, and neither the fetch nor the tracking image reaches the server.
  • YouTube plays from the privacy-enhanced domain, the film never preloads, and an unknown host stays a link.
  • The callout and the note render, and the screenshot was reviewed by eye.
• Pins updated: the version pins for both workflows. The shared draft fixture's historical contracts drop the assets folder, as they never had one.
• Python suite: 5,283 passed, 22 skipped against a disposable Postgres. The 2 macOS-only localtime tests fail as on main.
• Browser suite: 129 of 129. ruff, format, lint-imports and dump_catalog.py --check are clean.

A real run comes after the template rebuild: a draft with figures, a diagram, an embed and a video, reviewed in Tin.

🤖 Generated with Claude Code