archy/loop/prompt.md

You are making the AIUI app compliant with iOS Human Interface Guidelines (HIG) for font sizes, touch targets, and button hitboxes — WITHOUT changing the visual design. Read these files first:

1. `loop/plan.md` — Your task checklist (mark items `- [x]` as you complete them)
2. `CLAUDE.md` — Project conventions, design system rules, and coding standards

## Key Principle

**Same design, better accessibility.** The app should look identical but be properly tappable and readable on mobile. All changes are about sizing minimums, not visual redesign.

## iOS HIG Requirements

1. **Font Sizes:**
   - Body text: 17px (but we use 14px base — OK, it's a dense app)
   - Footnote: 13px minimum
   - Caption: 11px ABSOLUTE minimum (nothing smaller than 11px ever)
   - Form inputs: 16px minimum (prevents iOS auto-zoom on focus)

2. **Touch Targets:**
   - All interactive elements: 44×44px minimum tappable area
   - The VISUAL icon can be smaller (e.g., 20px SVG), but the tappable wrapper must be 44×44px
   - Pattern: `<button class="min-w-[44px] min-h-[44px] flex items-center justify-center"><svg class="w-5 h-5" ...></button>`

3. **Gaps Between Targets:**
   - Minimum 8px (gap-2) between any two tappable elements
   - `gap-0.5` (2px) and `gap-1` (4px) between buttons is a violation

## Current Violations Found (from audit)

- **301× `text-[10px]`** — timestamps, labels, metadata throughout app
- **76× `text-[11px]`** — settings, branch switcher, design system
- **100× `text-[9px]` / `text-[8px]`** — badges, version numbers, plugin metadata
- **40+ buttons below 44×44px** — `w-7 h-7` (28px), `w-8 h-8` (32px), `w-6 h-6` (24px), `w-5 h-5` (20px)
- **20+ locations with gap < 8px** between clickable elements
- **9+ inputs below 16px** — ChatInput textarea, settings inputs, search

## Key Files

- `packages/app/src/styles/main.css` — Glass button system, utility classes
- `packages/app/src/components/chat/ChatMessage.vue` — Message actions, timestamps
- `packages/app/src/components/chat/ChatInput.vue` — Main input, send button
- `packages/app/src/components/chat/ChatHeader.vue` — Toolbar buttons
- `packages/app/src/components/chat/ChatSearch.vue` — Search nav buttons
- `packages/app/src/components/chat/SettingsModal.vue` — Settings UI
- `packages/app/src/components/content/ContentPanel.vue` — Tab bar
- `packages/app/src/components/content/*Grid.vue` — All content grids
- `packages/app/src/components/content/*Detail.vue` — All detail views
- `packages/app/src/components/settings/` — Settings components
- `packages/app/src/components/ui/` — Shared UI components

## Design System Rules (must follow for every file you touch)

- **Glass morphism only** — use `.glass`, `.glass-card`, `.glass-button`, `.glass-button-sm` from `src/styles/main.css`
- **No light-mode conditionals** — never use `isDark ?` pattern. The app is dark-only.
- **No `bg-gray-*` or `bg-white`** — use `bg-white/5`, `bg-white/10`, `bg-black/35` etc.
- **Text opacity scale** — `text-white/25` → `/40` → `/60` → `/70` → `/80` → `/90` → `/96` → `text-white`
- **Accent colour** — `text-accent` (`#F7931A`), `bg-accent/15`, `border-accent/30`
- **Animations** — `animate-scale-in`, `animate-fade-up`, `animate-fade-in` from design system only

## How to Fix Touch Targets (Pattern)

**Before (violation):**
```html
<button class="w-7 h-7 rounded-full" @click="doThing">
  <svg class="w-4 h-4" ...></svg>
</button>
```

**After (compliant):**
```html
<button class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-full" @click="doThing">
  <svg class="w-4 h-4" ...></svg>
</button>
```

Or use the utility class (after T19):
```html
<button class="touch-target rounded-full" @click="doThing">
  <svg class="w-4 h-4" ...></svg>
</button>
```

## For each task in loop/plan.md:

1. Find the first unchecked `- [ ]` item
2. Read the task description carefully
3. Read the relevant source files before making changes
4. Make the change — keep visual design identical, only adjust sizing
5. Run `pnpm typecheck && pnpm lint` — fix all errors
6. Run `pnpm test` — fix any failing tests
7. Commit: `type(scope): description` (conventional commits)
8. Mark it done `- [x]` in `loop/plan.md`
9. Move to the next unchecked task immediately

## Rules

- Never skip a testing gate — if tests fail, fix them before moving on
- If a task is proving difficult, keep trying different approaches. Make at least 30 genuine attempts.
- Always run typecheck + lint after every code change
- The visual design must NOT change — same colors, same layout, same glass morphism
- Only sizes of tappable areas, font minimums, and gaps change
- Do not stop until all tasks are checked or you are rate limited
- Commit and push after each TEST: task