docs: add AI capture ratio planning and design specs

docs/superpowers/specs/2026-04-22-ai-capture-ratio-design.md

@@ -0,0 +1,83 @@
+# AI Capture Ratio Design
+
+## Summary
+
+Adjust the non-mobile AI capture composer so the text area and attachments panel use a `70 / 30` split instead of equal columns. Within the attachments panel, image previews should stack vertically with one preview per row. Example prompts should form a masonry-style cluster inside the composer footer rather than reading as a flat uniform row.
+
+## Goal
+
+Give the text composer more room for prompt entry while keeping attachments visible and useful as a clearly secondary surface.
+
+## Scope
+
+- Update the non-mobile `AIToolbar` layout only.
+- Keep mobile behavior unchanged.
+- Change the attachments preview layout so each image preview occupies its own full-width row.
+- Change the example prompt area so prompts form a masonry-style cluster within their parent.
+- Update tests that lock down the desktop layout contract.
+
+## Non-Goals
+
+- No changes to the page-level placement of the AI capture section.
+- No changes to mobile stacking behavior.
+- No changes to attachment upload behavior, image removal behavior, or summary behavior.
+- No visual redesign of the prompt footer, buttons, or copy.
+
+
+## Design
+
+### Main Composer Layout
+
+For every non-mobile width, the AI capture composer will use a two-column grid with this ratio:
+
+- Left column: `70%` equivalent width for the text composer
+- Right column: `30%` equivalent width for the attachments panel
+
+Implementation will use a Tailwind arbitrary grid template in the existing `useIsMobile()` branch inside `src/components/ai-toolbar.tsx`.
+
+### Attachments Preview Layout
+
+When image previews are present, the attachments panel will render them in a vertical list rather than a two-column thumbnail grid.
+
+Expected behavior:
+
+- Each preview takes the full available width of the attachments panel.
+- Previews stack top-to-bottom with consistent spacing.
+- Existing remove actions stay attached to each preview card.
+- Mobile can share the same one-per-row preview layout without introducing a separate preview treatment.
+
+### Example Prompt Layout
+
+The example prompt area below the textarea should feel denser and more editorial than a single flat row of chips.
+
+Expected behavior:
+
+- Prompts remain inside the existing composer footer area.
+- Prompt chips wrap into a masonry-style cluster rather than a rigid single-row strip.
+- Chip widths remain content-driven so the cluster feels packed and varied.
+- The prompt area should still read as secondary to the textarea itself.
+
+## Files Affected
+
+- `src/components/ai-toolbar.tsx`
+- `tests/ai-toolbar.test.ts`
+
+## Testing
+
+Add or update tests to verify:
+
+- non-mobile layout uses a `70 / 30` grid split
+- desktop/non-mobile preview layout is row-stacked instead of `grid-cols-2`
+- example prompts use a masonry-style clustered layout rather than a flat row contract
+
+Then run:
+
+- `bun test`
+- `bun run type:check`
+- `bun run lint`
+
+## Risks
+
+- A narrower attachments panel may make attachment copy feel dense, so only the layout ratio should change unless the implementation reveals a real readability issue.
+- A vertical preview list may increase panel height when many images are attached, but that is preferable to shrinking previews into a dense grid.
+- A masonry prompt cluster can become visually noisy if spacing is too tight, so the implementation should preserve clear separation from the textarea and maintain readable chip padding.