Capture screenshots referenced from docs and the chrome extension

[AimTune]

The new docs structure references screenshots throughout but the actual PNGs are not yet committed. Once they are dropped in, the markdown links resolve automatically — filenames are pinned in docs/assets/screenshots/README.md.

Required artwork

Hero (used by README + landing docs)

docs/assets/screenshots/hero/

Filename	Where it's used	What it should show
hero-closed-open.png	README, docs/getting-started.md	Widget closed (launcher) on the left, open with a sample conversation on the right. Light bg, default theme.
architecture.png	docs/architecture.md	Hexagonal architecture diagram exported from Figma/draw.io (or a PNG of the existing mermaid diagram).
window-modes.png	docs/theming.md#window-modes	Four panels side by side: popup, side-panel, fullscreen, inline.

Sandbox

docs/assets/screenshots/sandbox/

• overview.png — full sandbox view with the customisation panel + injected widget visible.
• survey-screen.png — survey overlay (mode: "screen").
• multi-conversation.png — conversation list view inside the popup.

Built-in message types

docs/assets/screenshots/message-types/

One file per type, used in docs/message-types/built-in.md:

text.png, image.png, card.png, buttons.png, quick-reply.png, carousel.png, file.png, video.png.

GenUI components

docs/assets/screenshots/genui/

One file per built-in component, used in docs/genui/built-in.md:

form.png, card.png, table.png, chart.png, alert.png, quick-replies.png, list.png, rating.png, progress.png, steps.png, image-gallery.png, typewriter.png, date-picker.png.

Chrome extension

docs/assets/screenshots/extension/

• popup.png — the popup with the customisation form visible.
• load-unpacked.png — chrome://extensions after Load Unpacked.
• inject.png — popup on one side, host page with injected widget on the other.

Chrome extension — toolbar icons (shipped inside the build)

apps/chrome-extension/public/icons/

• icon-16.png (16 × 16) — toolbar icon.
• icon-32.png (32 × 32) — high-DPI toolbar.
• icon-48.png (48 × 48) — chrome://extensions listing.
• icon-128.png (128 × 128) — Web Store listing + install dialog.

The Vite plugin in apps/chrome-extension/vite.config.ts copies them to dist/icons/ automatically once they exist.

Optional

• public/og-cover.png (1280 × 640) — GitHub social card / OG share image.

Acceptance criteria

• All filenames listed above exist with the correct dimensions.
• pnpm -F @chativa/chrome-extension build produces dist/icons/icon-{16,32,48,128}.png.
• Verify a docs page (e.g. docs/genui/built-in.md) renders the embedded images on GitHub.

---

Spun out of todos.md.