Files
Mauricio Barragan 5d84df3e25 feat(pwa): installable PWA + responsive mobile dashboard
- Add Web App Manifest + ArbPulse icons (192/512/maskable/apple-touch) under
  web/public/; no service worker (real-time honesty: never serve stale data).
- Add mobile/install metadata to index.html (theme-color, viewport-fit=cover,
  apple-mobile-web-app-*, manifest + apple-touch-icon links).
- Responsive layout: PriceMatrix stacked per-venue cards below sm, StatsBar
  reflow, ~44px touch targets in Controls/ConfigPanel, safe-area top inset.
- scripts/gen-icons.ps1 derives icon sizes from the master (no new deps).
- openspec: add-pwa-mobile change (proposal/design/specs/tasks).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-16 15:21:13 -06:00

59 lines
2.7 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## ADDED Requirements
### Requirement: Installable to the home screen
The dashboard SHALL be installable to a device home screen via a Web App Manifest
served over HTTPS, without requiring a service worker.
#### Scenario: Manifest is present and valid
- **WHEN** the dashboard is loaded over HTTPS
- **THEN** a linked `manifest.webmanifest` is served that includes `name`,
`short_name`, `start_url` in scope, `display: standalone`, `theme_color`,
`background_color`, and at least 192px and 512px PNG icons
#### Scenario: User installs from the browser
- **WHEN** a user chooses "Install app" / "Add to Home Screen" from the browser menu
- **THEN** the app is added with the ArbPulse icon and launches in a standalone,
full-window mode at `start_url`
### Requirement: No offline mode and no stale data
The app SHALL NOT register a service worker and SHALL NOT cache market data, so it
never presents stale or fake data (real-time honesty rule).
#### Scenario: No service worker is registered
- **WHEN** the dashboard runs in any environment
- **THEN** no service worker is registered and no application cache stores `/api`
responses or the SSE stream
#### Scenario: Disconnected device shows a clear non-data state
- **WHEN** the device has no working connection to the engine
- **THEN** the UI shows its reconnecting/offline indicator and does not display
cached market figures as if they were live
### Requirement: Responsive mobile layout
The dashboard SHALL be usable on phone-sized viewports (~360430px wide) without
horizontal overflow of primary widgets, while the desktop layout is unchanged.
#### Scenario: Order book fits a phone screen
- **WHEN** the viewport is narrower than the `sm` breakpoint
- **THEN** the order-book (`PriceMatrix`) is presented as per-venue stacked cards
showing bid, ask, quantities, and spread without horizontal scrolling
#### Scenario: Stats and controls remain readable and tappable
- **WHEN** the dashboard is viewed on a phone
- **THEN** the stats bar reflows without clipping and interactive controls have
touch targets of at least ~44px
#### Scenario: Desktop layout is preserved
- **WHEN** the viewport is at the `lg` breakpoint or wider
- **THEN** the existing multi-column layout and table order book render as before
### Requirement: Mobile and install metadata
The `index.html` head SHALL include the metadata needed for correct mobile rendering
and home-screen installation on Android and iOS.
#### Scenario: Head includes mobile/install tags
- **WHEN** the page is served
- **THEN** the head contains a `theme-color`, `viewport-fit=cover` in the viewport
meta, a link to the manifest, an `apple-touch-icon`, and the
`apple-mobile-web-app-*` tags for standalone iOS launch