# 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.