Field Notes Post Generator

Produce four polished social images that pair the user's photos with a timeline of what SAM agents accomplished, rendered from branded HTML templates via Playwright.

Output

Four PNG images (rendered at 2x device scale):

Template	Size	Format	Use
format-a.html	1200x675	Landscape "grid" — timeline column + 2x2 photo grid + centered map medallion	X / LinkedIn link-style card
format-b.html	1080x1350	Portrait "timeline" — header + map card, 4 photo+card rows on a connector rail	X / LinkedIn portrait (4:5)
format-c.html	1200x675	Landscape "hero" — one full-bleed photo, headline, 4 glass cards, map inset	X / LinkedIn hero card
format-d.html	1080x1920	Vertical "story" — full-bleed photo, headline, map + stats, stop rail (9:16)	Stories / Reels / Shorts covers

All templates live in templates/ next to this file, plus map.html (Leaflet pin map) and render.cjs (Playwright renderer).

Workflow

Work in a scratch dir: .tmp/field-notes-post/ with an assets/ and out/ subfolder.

1. Gather inputs

• Photos: locate the uploaded photos (task library or attachments). Extract timestamps with exiftool -DateTimeOriginal -OffsetTimeOriginal <files>. GPS EXIF is usually stripped by messaging apps — expect to geolocate visually.
• Agent activity: use SAM MCP tools (list_sessions, get_session_messages, list_tasks, get_task_details) to reconstruct what agents were doing at each photo timestamp. Session timestamps are epoch ms — convert to the user's local timezone (use the photo EXIF offset).
• Verify claims: any stat used in copy ("N PRs merged") must be verified against git log / gh pr list before it goes in an image.

2. Pick the story

Choose ~4 photos that span the day and pair each with a concrete agent milestone (kickoff, debugging, parallel work, deploy green). Each stop gets: HH:MM · Place name + one line of copy with a single <b>bold</b> highlight.

Copy rule — never use em dashes. Absolutely no em dashes (—) in any copy across all four images (headlines, subtitles, stats, stop copy). Rewrite the sentence or use a period, comma, or colon instead.

3. Prepare assets into assets/

• Photos: magick <src> -auto-orient -resize 1600x1600 -quality 85 assets/<name>.jpg
• Brand font: copy apps/www/public/fonts/Chillax-Variable.woff2
• Logo: copy apps/www/public/favicon.png
• Map: edit map.html — set the ~4 numbered pins to the identified landmarks (lat/lng from visual identification), and the dashed walk polyline through all known waypoints. Render it first (map:800x800), save as assets/map.png.

4. Fill the templates

Copy the four format-*.html templates into the scratch dir. Per-run replacements (everything else is fixed brand chrome):

• Badge text: Field notes · <City> · <Mon D>
• Headline (<h1>, keep the .grad gradient span on the key phrase)
• Subtitle / stats lines
• The 4 stops: time, place, copy (times/places appear in stop cards, photo time chips, and card metas)
• Photo src attributes and object-position crops
• Footer stays: favicon + SAM wordmark + simple-agent-manager.org

Brand tokens are baked into the templates (from apps/www/src/styles/global.css): bg #070d0b, fg #e6f2ee, muted #9fb7ae, accent #16a34a→#22c55e, Chillax display font, mono uppercase labels, glass cards.

5. Render

Playwright setup (once per environment):

npx playwright install chromium-headless-shell
sudo npx playwright install-deps chromium   # if shared libs are missing

Render (from the scratch dir; NODE_PATH points at the npx playwright cache if playwright isn't installed locally — find it with ls ~/.npm/_npx/*/node_modules/playwright 2>/dev/null):

NODE_PATH=<playwright-node_modules> node render.cjs \
  format-a:1200x675 format-b:1080x1350 format-c:1200x675 format-d:1080x1920

6. Visual audit (mandatory, loop until clean)

Read every rendered PNG and check:

• Text legible over photos — strengthen scrim gradient stops if not
• No truncated, overlapping, or awkwardly wrapped text (map insets and brand chips are frequent offenders)
• Photo crops show the subject, not sky/canopy — tune object-position
• Numbers/claims match verified facts
• Brand look: dark green glassmorphism, gradient headline span, mono labels

Fix the HTML and re-render until all four pass.

7. Deliver

Upload each PNG via upload_to_library (directory like /marketing/<slug>/, tags marketing, social-post, draft), then show them with display_from_library with a short caption per format. Ask the user which format(s) they want to post.

Notes

• Templates are the source of truth for layout — prefer editing copy/photos/pins over restructuring CSS.
• Photos with faces or private info: confirm with the user before including.
• map.html uses Leaflet + CARTO dark_all tiles; wait for networkidle + 3s (render.cjs does this) so tiles finish loading.