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: `` 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 ``` **After (compliant):** ```html ``` Or use the utility class (after T19): ```html ``` ## 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