0xWheatyz
c0342a9796
Wire the mobile app to the real Handler API instead of the transcribed prototype data: - src/api/client.ts: typed client ported from frontend/lib/api.ts (bearer auth, AuthError/ApiError, base URL param, allow401 for admin-only resume) - src/api/format.ts: relative-time + status label/tone/color helpers - src/state/ServerConfig.tsx: endpoint+token persisted to AsyncStorage - src/screens/ConnectScreen.tsx: first-open config, validated via /health then /projects - src/state/AppState.tsx: data-driven store polling projects -> agents -> checkmarks -> logs every 10s with per-item failure isolation; derives fleet counts, waiting list, recent checkmarks, merged log; answer+resume, spawn, kill mutations; 401 routes back to ConnectScreen - screens render live data; detail meta is Started/Status/Tests/Build; Pause removed (no endpoint); Kill confirms; log filters are per-project - delete src/data/mock.ts tsc clean; Hermes bundle builds (200).
Handler — mobile app
A remote control for Handler: run many Claude Code agents across many projects, each isolated, each leaving a checkmark (current state) and an entry in the global log.
This is the React Native + Expo (iOS) implementation of the
Handler Mobile.dc.html design (turn 2a, the version the user committed to:
"Commit to 1a, wire-up the real screens"). It reproduces the interactive
prototype as a real app — six wired screens with the exact state logic from
the design.
Run it
cd app
npm install
npm run ios # opens the iOS simulator (requires Xcode)
# or: npm start then scan the QR code with Expo Go on a device
Screens
| Screen | File | What it does |
|---|---|---|
| Fleet (home) | src/screens/FleetScreen.tsx |
Stat cards, "Waiting on you" list → Answer, "Recent checkmarks" → detail |
| Agent detail | src/screens/AgentDetailScreen.tsx |
Checkmark / Log segmented control, meta table, Answer / Pause / Kill |
| Answer | src/screens/AnswerScreen.tsx |
Question, tappable quick replies, reply field + Send & resume |
| Spawn | src/screens/SpawnScreen.tsx |
Project select, task field, two toggles, Spawn |
| Log | src/screens/LogScreen.tsx |
All / handler / Errors filters over the global feed |
| Settings | src/screens/SettingsScreen.tsx |
Server info, notification toggles, Sign out |
The prototype navigates by swapping a single screen value (with working back
/ close controls) rather than a native stack, mirroring the design. Answering
agt-7a1d flips it Waiting → Running everywhere and clears it from the
Fleet waiting list — that cross-screen behavior lives in one shared store
(src/state/AppState.tsx, a direct port of the design's renderVals()).
Design system
The Leeworks tokens (project/_ds/.../tokens/*.css) are ported to typed RN
values in src/theme/tokens.ts; the components used by these screens
(Button, Badge, Icon, Switch, Select, Input, segmented control,
chip) are reimplemented in src/components/ from the design-system bundle.
- Fonts: Outfit (display), Figtree (body), Spline Sans Mono (data) via
@expo-google-fonts/*. - Colors: the warm-neutral ink ramp + muted status colors, light and dark.
Intentional deviations from the HTML prototype
The prototype drew a phone frame to make an HTML mock look like a device. A real iOS app is the device, so:
- The fake status bar (
9:41, signal, battery) and the home-indicator pill are dropped — the OS draws those. Screens use safe-area insets andexpo-status-barinstead. - Dark mode was a design-time prop; here it follows the system appearance
(
useColorScheme,userInterfaceStyle: "automatic"). - The
Selectuses a bottom-sheet picker (native<select>has no cross-platform styling in RN) — same field, real picking behavior.
All copy, spacing, colors, and interactions otherwise match the 2a design.