Files
handler/app
Claude c3e3d1627e feat(app): full management surface + email sign-in
Settings → Manage now opens the entire admin control surface on the
phone, mirroring the web dashboard page for page:

- Models: full CRUD for model backends incl. write-only API keys
  (set/clear), harness selection (claude/pi), enable toggles.
- Skills: create, toggle, delete, expand to read SKILL.md, and
  install-from-prompt driven through the command queue.
- Connectors: stdio/http/sse MCP servers with args/env/header parsing.
- Plugins: marketplace plugins pinned to their repo.
- Permissions: default mode + allow/deny/ask rules over the read-only
  env baseline.
- Repositories: register in git-server or manual mode (incl. the
  mise-init bootstrap), sync, delete.
- Git servers: forge hosts with encrypted tokens and generated deploy
  keys (public half selectable for copying).
- Approvals: record operator approve/reject verdicts per branch.
- Shared context: browse and set the cross-agent key/value store.
- Users: invite (with shareable invite links), promote/disable, mint
  reset links, delete — the user-accounts feature that just landed.
- Claude login: drive the worker's claude /login flow from the phone.
- Account (Settings): who you're signed in as, change password,
  sign out with server-side session revocation.

The connect screen gains the matching gate: email sign-in via
/auth/login (session token stored like the legacy env token),
first-run setup when the server has zero accounts, forgot-password,
and the API-token method as fallback (auto-selected for pre-accounts
servers). Memory gains note authoring + deletion via a new
reloadMemory hook.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01731mKtVzsfeT4Vi3TvkR48
2026-08-13 13:55:18 +00:00
..

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 / Events / Log segmented control, live headless run event stream, meta table (incl. model backend + worker), Answer / Kill
Answer src/screens/AnswerScreen.tsx Question, tappable quick replies, reply field + Send & resume
Spawn src/screens/SpawnScreen.tsx Project select, model backend select, task field, Spawn
Schedules src/screens/SchedulesScreen.tsx Recurring agent spawns: list, create (interval / role / model), pause, delete
Memory src/screens/MemoryScreen.tsx Read view over the agent-memory note graph, kind filters, expandable notes
Log src/screens/LogScreen.tsx All / per-project / 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 and expo-status-bar instead.
  • Dark mode was a design-time prop; here it follows the system appearance (useColorScheme, userInterfaceStyle: "automatic").
  • The Select uses 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.