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):

<button class="w-7 h-7 rounded-full" @click="doThing">
  <svg class="w-4 h-4" ...></svg>
</button>

After (compliant):

<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):

<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