archy/loop/plan.md

Overnight Plan — iOS HIG Compliance & Continued Hardening

Format: - [ ] = pending, - [x] = done. Make at least 30 attempts on any difficult task before moving on. Loop reads this file. After each phase, commit and push.

Phase 1: Input & Text Foundation (Prevent iOS Zoom + Readability)

• T1 — Fix all input/textarea font sizes to prevent iOS auto-zoom. Every <input>, <textarea>, and <select> must use text-base (16px) minimum. Files to fix: ChatInput.vue (main message textarea uses text-sm), ChatSearch.vue (search input), SettingsModal.vue (memory inputs use text-xs), PersonaSelector.vue, MemoryPanel.vue, PluginSettingsForm.vue, ShareToNostr.vue, AdvancedSettings.vue, PromptPalette.vue. Search for all <input and <textarea tags across packages/app/src/ and verify each has at least text-base. Do NOT change the visual design — only increase font size on the form elements themselves.

• T2 — Replace all text-[10px] with text-xs (12px) across the entire app. There are ~301 instances. Use find-and-replace but verify each file still looks correct. The main offenders: ChatMessage.vue (timestamps, token counts, edit labels), SettingsModal.vue (section headers), ContentPanel.vue (tab labels), all *Detail.vue and *Grid.vue files. Run grep -r 'text-\[10px\]' packages/app/src/ to find all instances. Replace with text-xs. This is the single biggest compliance fix.

• T3 — Replace all text-[9px] and text-[8px] with text-[11px] (iOS absolute minimum). There are ~100 instances. These are used in badges, version numbers, metadata labels. Files: PluginMarketplace.vue, NostrGrid.vue, DesignSystemDetail.vue, DesignSystemGrid.vue, settings components. Search with grep -r 'text-\[9px\]\|text-\[8px\]' packages/app/src/. Replace with text-[11px].

• T4 — Replace all text-[11px] with text-xs (12px). There are ~76 instances plus the new ones from T3. These are in SettingsModal.vue, BranchSwitcher.vue, DesignSystemGrid.vue. After T3 creates new text-[11px] instances, this task bumps them all to text-xs. Search with grep -r 'text-\[11px\]' packages/app/src/. Replace with text-xs.

• TEST:P1 — Run pnpm typecheck && pnpm lint && pnpm test. Fix all failures. Commit and push.

Phase 2: Touch Targets — Chat Interface (44×44px Minimum)

• T5 — Fix ChatMessage.vue action buttons. The edit/reply/branch/feedback buttons use w-7 h-7 (28px). Change the button wrapper to min-w-[44px] min-h-[44px] with flex items-center justify-center while keeping the inner SVG icon at w-4 h-4 or w-5 h-5. This makes the tap target 44px but the visual icon stays the same size. Also fix the gap-0.5 (2px) between action buttons to gap-2 (8px). Apply to all button rows in this file.

• T6 — Fix ChatHeader.vue toolbar buttons. All 9 buttons use w-8 h-8 or w-9 h-9 (32-36px). Wrap each in a 44px touch target: min-w-[44px] min-h-[44px] flex items-center justify-center. Keep the visual icon sizes unchanged. Fix any gap-1 between toolbar buttons to gap-2.

• T7 — Fix ChatInput.vue buttons. The image attach button (w-8 h-8), close reply button (w-5 h-5), and send button need 44px minimum touch targets. Also fix the send button row gap to 8px minimum between targets.

• T8 — Fix ChatSearch.vue navigation buttons. Previous/Next/Close buttons use w-6 h-6 (24px). Expand to 44px touch targets with padding.

• T9 — Fix ArticleReader.vue and PdfViewer.vue controls. Close/navigation buttons use w-8 h-8 (32px). Expand to 44px. Fix button gaps.

• TEST:P2 — Run pnpm typecheck && pnpm lint && pnpm test. Commit and push.

Phase 3: Touch Targets — Content & Settings Components

• T10 — Fix all content detail view buttons. Search for w-7 h-7, w-6 h-6, w-5 h-5 button patterns in: BookDetail.vue, FilmDetail.vue, TVSeriesDetail.vue, SongDetail.vue, PodcastDetail.vue, PlaceDetail.vue, ImageDetail.vue, AppDetail.vue, MagazineSectionDetail.vue, NostrGrid.vue. Expand all interactive buttons to 44px minimum touch targets. Keep icon sizes unchanged.

• T11 — Fix SettingsModal.vue and SettingsPanel.vue buttons. Close button (w-7 h-7), color picker buttons (w-8 h-8), edit/delete buttons (w-5 h-5). All need 44px. Fix all gap-0.5 to gap-2.

• T12 — Fix MemoryPanel.vue, PersonaSelector.vue, and PluginMarketplace.vue buttons. Edit/delete memory buttons (w-5 h-5), persona buttons, plugin action buttons. All need 44px touch targets with 8px gaps.

• T13 — Fix MapRenderer.vue fullscreen button, BranchSwitcher.vue buttons, and any remaining small buttons found by searching for w-5 h-5, w-6 h-6, w-7 h-7, w-8 h-8 on clickable elements across all .vue files. Each interactive element needs 44px minimum.

• TEST:P3 — Run pnpm typecheck && pnpm lint && pnpm test. Commit and push.

Phase 4: Touch Target Gaps & ContentPanel Tab Bar

• T14 — Fix ContentPanel.vue tab bar. Tab buttons likely have gap-1 (4px) between them. Increase to gap-2 (8px). Ensure each tab button has at least 44px height. The tab labels should use text-xs minimum (from Phase 1 fixes). The tab bar should be horizontally scrollable on mobile with sufficient padding.

• T15 — Audit and fix ALL remaining gap-0.5 and gap-1 between clickable elements. Search all .vue files for gap-0.5 and gap-1. For each result, check if the container holds clickable elements (buttons, links, tabs). If so, increase to gap-2 (8px). Leave non-clickable layout gaps (like text spacing) unchanged.

• T16 — Fix grid card touch targets. In all *Grid.vue components, verify that cards have sufficient tap area. Cards themselves are usually fine (full-width), but action buttons within cards (favorite, play, expand) need 44px targets. Check: FilmGrid.vue, SongGrid.vue, BookGrid.vue, TVSeriesGrid.vue, PodcastGrid.vue, AppsGrid.vue, ArchyAppsGrid.vue, ImageGrid.vue, PlaceGrid.vue.

• TEST:P4 — Run pnpm typecheck && pnpm lint && pnpm test. Commit and push.

Phase 5: Glass Button System & Utility Classes

• T17 — Update .glass-button and .glass-button-sm in packages/app/src/styles/main.css to enforce 44px minimum height on mobile. Add a responsive rule: on screens ≤ 768px, .glass-button gets min-height: 48px and .glass-button-sm gets min-height: 44px. This catches all uses of these classes automatically. On desktop they stay as-is.

• T18 — Audit all !h-7 !min-h-0 overrides. These force 28px height, defeating the glass button minimum. Search all .vue files for !h-7 and !min-h-0. Replace with mobile-responsive approach: keep desktop size but ensure 44px minimum on mobile using min-h-[44px] md:min-h-0.

• T19 — Add a .touch-target utility class to main.css: .touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }. Then refactor at least 15 icon buttons across the app to use this class instead of manual min-w/min-h. This creates a reusable pattern for future development.

• TEST:P5 — Run pnpm typecheck && pnpm lint && pnpm test. Commit and push.

Phase 6: Modals, Dialogs & Overlays

• T20 — Fix PassphraseDialog.vue. Submit button uses h-10 (40px, 4px short). Change to h-11 (44px). Verify input field is text-base. Ensure the dialog has proper padding for mobile.

• T21 — Audit all modal/overlay/dialog components for mobile compliance. Check: ArticleOverlay.vue, ShareToNostr.vue, ConversationExport.vue, ComparisonMode.vue, NostrProfileEditor.vue, NostrRelayManager.vue. Each should have: 44px button touch targets, 16px input text, 8px button gaps, proper padding on mobile.

• T22 — Fix the sidebar/conversation list touch targets. ConversationList.vue or sidebar entries should have at least 44px height per item. Delete/rename buttons within list items need 44px targets.

• TEST:P6 — Run pnpm typecheck && pnpm lint && pnpm test. Commit and push.

Phase 7: Comprehensive Verification

• T23 — Run a final grep audit to verify NO remaining violations:

  • text-[10px], text-[9px], text-[8px] — should return 0 results in packages/app/src/
  • text-[11px] — should return 0 results (all bumped to text-xs)
  • gap-0.5 between clickable elements — should be 0
  • All inputs have text-base minimum Fix any remaining violations found.

• T24 — Run pnpm test (all tests pass), pnpm typecheck (no errors), pnpm lint (0 errors). Final commit with summary message. Push to remote.