The state pills and the agent select sat 10px apart, and the pill row was
sliced mid-chip at the viewport edge with nothing to say it scrolled.
- New `ScrollRow`: fades whichever edge still has content behind it, so a
clipped chip reads as "scroll for more" instead of as a broken layout.
Reused for the admin and connect-modal tab strips.
- Drop scroll-snap from the pill row. It clamped the resting scrollLeft to the
container's 12px padding, so the first chip sat flush against the screen edge
with no gutter; flick-snapping through short chips felt wrong regardless.
- Breathing room: pills to select 10px -> 14px, filters to list 16px -> 20px.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Reworks the frontend around phone-first interaction patterns and makes the
app installable to a home screen.
Shell
- Bottom tab bar (Home / Requests / Agents / Alerts / Settings) below `md`,
with the unread badge moved onto the Alerts tab; the bell stays on desktop.
- Account menu opens as a bottom sheet on phones, dropdown on desktop.
- Safe-area insets throughout: `viewport-fit=cover` plus `env(safe-area-inset-*)`
on the sticky header, tab bar and sheet footers.
Sheets
- New `Sheet` primitive: drag-to-dismiss bottom sheet on phones, centred dialog
from `sm` up. `Modal` now delegates to it, so every dialog inherits the
gesture, the scroll lock and the safe-area padding.
- Portalled to `<body>` — an ancestor with a transform (the page fade-in) was
otherwise becoming the containing block and displacing the fixed overlay.
- Scroll lock pins `<body>` and restores position, which iOS needs; plain
`overflow: hidden` still rubber-bands there.
- `ConfirmSheet` replaces `window.confirm` for destructive actions.
Screens
- Request detail gets a sticky decision bar above the tab bar; the sidebar
decision card is now desktop-only.
- Requests state filter becomes a swipeable pill row instead of a select.
- Agent cards show two primary actions plus an overflow sheet on phones.
- Diffs and code blocks contain their horizontal overscroll so a sideways swipe
no longer triggers browser back; diffs gain a line-wrap toggle.
- `min-w-0` on grid tracks — items default to `min-width: auto`, so truncated
meta lines were widening columns past the viewport at 320px.
Touch and input
- 44px minimum touch targets, `:active` press feedback, no tap highlight.
- 16px inputs on coarse pointers so iOS stops zooming on focus.
- autocomplete/inputmode hints so password managers and keyboards behave.
- `overscroll-behavior-y: none` disables pull-to-refresh; motion respects
`prefers-reduced-motion`.
PWA
- Manifest, generated app icons (192/512/apple-touch) and standalone display
metadata, so the app installs to a home screen without browser chrome.
- Backend serves `.webmanifest` as `application/manifest+json`; rjweb's type
map has no entry for it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- AgentFormModal: sync form state to current agent values when the modal
opens (useEffect on open/agent), so edit always shows the agent's
current name, description, website, icon URL, and max-pending value.
- Modal: add optional onSubmit prop; Ctrl+Enter (or ⌘+Enter) fires it,
covering AgentFormModal, DecisionModal, and both Settings modals
(disable 2FA, delete account) without breaking textarea newlines or
text-input behaviour.
- README: substantially expanded — purpose, capabilities, architecture,
quick-start with Docker Compose, dev setup, testing, agent integration
(OpenClaw, generic MCP, REST), and privacy notes.
- TODO.md: remove three completed items (prefill modal, Ctrl+Enter, human
readme).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
space
luna
Space-Banane