headquarter/openspec/changes/mobile-app-usability/tasks.md

1. Mobile Navigation

• 1.1 Create MobileNav component with bottom tab bar
• 1.2 Add mobile breakpoint detection to AppShell
• 1.3 Implement tab bar with Home, Projects, Sessions, Tools, Settings tabs
• 1.4 Add session count badge to Sessions tab
• 1.5 Add safe area padding for notched devices
• 1.6 Hide desktop sidebar on mobile, show bottom nav
• 1.7 Ensure tab bar stays visible during page transitions

2. Session Management Mobile Layout

• 2.1 Redesign SessionCard for mobile (touch targets, action menu)
• 2.2 Create mobile action sheet/dropdown for session actions
• 2.3 Ensure primary action (Open/Terminal) remains prominent
• 2.4 Update Sessions page layout for mobile
• 2.5 Update Dashboard session list for mobile
• 2.6 Add loading states for async session operations
• 2.7 Ensure session list scrolls smoothly on mobile

3. Forms & Dialogs

• 3.1 Stack CreateSessionForm fields vertically on mobile
• 3.2 Ensure all form inputs have min-height 44px
• 3.3 Update all dialogs to fit within 320px viewport
• 3.4 Make dialog content scrollable when needed
• 3.5 Update confirmation dialogs with vertical button layout
• 3.6 Audit all forms for mobile usability

4. Responsive Layout System

• 4.1 Add mobile breakpoint utilities (max-width: 767px)
• 4.2 Stack multi-column grids vertically on mobile
• 4.3 Reduce page padding on mobile (16px or less)
• 4.4 Ensure no horizontal scrolling on any page
• 4.5 Add consistent mobile page headers with back buttons
• 4.6 Implement back button navigation logic

5. Touch & Interaction

• 5.1 Audit all buttons for 44px minimum touch target
• 5.2 Add active states to all interactive elements
• 5.3 Add loading indicators for async operations
• 5.4 Ensure 8px minimum spacing between adjacent touch targets
• 5.5 Test touch feedback on iOS Safari and Android Chrome

6. Complex Pages (Read-First Pattern)

• 6.1 Update Repo Workspace for mobile (file tree primary view)
• 6.2 Update Tool Workshop with mobile list view
• 6.3 Update Config Profiles with mobile summary view
• 6.4 Add "Edit" flow that opens full-screen on mobile
• 6.5 Ensure complex forms are usable on mobile (or show desktop prompt)

7. Testing & Polish

• 7.1 Test all pages at 320px width (iPhone SE)
• 7.2 Test all pages at 375px width (iPhone standard)
• 7.3 Test on actual iOS Safari device
• 7.4 Test on actual Android Chrome device
• 7.5 Verify no console errors on mobile
• 7.6 Run npm run typecheck
• 7.7 Run npm run lint
• 7.8 Run npm run build