headquarter/openspec/changes/mobile-app-usability/proposal.md at e8d5b16accc9534482f547ef0d6de981bb54320c

Files

T

Fusion adaedb70ef feat: implement mobile app usability improvements

Mobile Navigation:
- Add MobileNav component with bottom tab bar
- Show mobile nav on small screens, hide desktop sidebar
- Add session count badge to Sessions tab
- Add safe area padding for notched devices

Session Management:
- Redesign SessionCard for mobile with action menu
- Add MobileActionSheet for session actions
- Keep primary action prominent

Forms & Dialogs:
- Stack form fields vertically on mobile
- Ensure 44px minimum touch targets
- Update dialogs for 320px viewport

Responsive Layout:
- Add MobilePageHeader with back button
- Reduce page padding on mobile
- Stack multi-column grids vertically

Touch & Interaction:
- Add active states to interactive elements
- Ensure 8px spacing between touch targets

Complex Pages:
- Update Repo Workspace for mobile
- Update Tool Workshop and Config Profiles

Build: TypeScript check passes, production build succeeds

2026-05-25 11:20:25 +02:00

2.3 KiB

Raw Blame History

Why

The Headquarter web app is currently unusable on mobile devices. Critical workflows—starting and stopping sessions, viewing instance status, and making small configuration adjustments—are blocked by desktop-oriented layouts, missing touch targets, and broken responsive behavior. Since users perform real work through terminal sessions (already mobile-optimized) and session management, the core app shell and key pages must be at least functional on phones.

What Changes

Mobile navigation: Replace horizontal scroll nav with bottom tab bar on mobile breakpoints
Session management mobile layout: Redesign session cards for touch, add swipe actions, ensure all controls are reachable
Dashboard mobile view: Simplify summary cards, optimize quick actions for touch
Responsive forms: Stack multi-column forms vertically on mobile, ensure touch targets ≥ 44px
Mobile-optimized dialogs: Ensure all dialogs fit within 320px viewport, add scroll when needed
Page headers: Add consistent back buttons and contextual action bars on mobile
Touch feedback: Add active states and loading indicators for all interactive elements
Graceful degradation: Complex admin pages (Tool Workshop, Config Profiles) get read-first mobile views with edit capability

Capabilities

New Capabilities

mobile-navigation: Bottom tab bar, page transitions, and mobile-specific navigation patterns
mobile-session-management: Touch-optimized session cards, swipe actions, and mobile session controls
mobile-responsive-layouts: Breakpoint system, touch targets, and form stacking for mobile viewports

Modified Capabilities

frontend-foundation: Add mobile breakpoint system and responsive grid utilities
session-lifecycle-ux: Extend session management UX with mobile-specific interactions
tool-instances: Ensure instance controls (start/stop/restart) are usable on mobile

Impact

Frontend: Major CSS changes to AppShell, page layouts, form components, and card patterns
Components: New MobileNav component, updates to SessionCard, CreateSessionForm, and all page components
User Experience: Significantly improved mobile usability without reducing desktop functionality
No API changes: Purely frontend/CSS work

2.3 KiB Raw Blame History

Why