PWA Bot Mode rail and sheet-up motion
Answer me with artifact · 2026-10-23 12:57

New version 0.5.7

You have 0.5.5. Found when this page was made.

What's new:

Run in a terminal:

npx skills update answer-me-with-html -y

Or tell your agent:

Update answer-me-with-html
See what's new

PWA Bot Mode rail and sheet-up motion

Rail fixed in a branch. Sheet-up standard drafted, waiting on 3 picks.

branchfeat/pwa-bot-rail-drawers

Bot Mode on the phone now uses the Desktop rail component itself. Anything opened from a session, the top-right icons or the composer rises as one bottom sheet. It uses one spring and one dismiss gesture.

A

Rail: today vs fixed

built, not merged · sample bots, real avatar packs
Today on m.allternit.com Fixed (Desktop rail)
Today: phone-only Grok-style list Fixed: the Desktop Bots rail, light
Today, dark Fixed, dark
  • The phone had its own Grok-style rail (`PhoneBotsRail`, ai #783). It now renders the Desktop `ShellRail mode="bot"`: Home, big main bot tile with crown, Promote row, Projects, Bots, Group chats.
  • Group chats are pinned above the floating footer. Before, they were hidden under it.
  • Arrows bug (whole app): a rule in `src/design/theme.css` turned every caret inside an open drawer, sheet or popover upside down. Removed.
  • Checks: typecheck clean, phone + bots vitest 478/478.
B

Today: four motions for the same job

Opened from Example Today
Session Artifact, file card, Thread inspector, Computer instant full-screen overlay
Session Needs-you, agent canvas sheets Arc BottomSheet
Top right ⋯ menu, panes menu fade-in dropdown
Top right Switch thread fake sheet, no motion, no drag
Top right Overview, search, mini-app instant overlay
Top right Inbox Arc BottomSheet
Composer Model pill, Agent mode, Plugins, starters popover, slide 4px
Composer Artifacts ▾, Design system, bot + popover / dropdown
Composer Chat + own sheet (useSheetGestures)

Two spring systems run side by side: gestures/springs.ts (400/30) and Arc motion-tokens (smooth 0.4 s).

C

The standard: one sheet, three sizes

Size Height Used for
Menu content height, max 60% ⋯, panes, Agent mode, Plugins, Design system, bot +, Artifacts ▾
List 55% → drag to 92% model picker, switch thread, Inbox, Needs-you, canvas comments
Full 94% with grabber + header artifact, file, Thread inspector, Computer, overview, search, mini-app
  • Enter: rises from the bottom edge, Arc spring.smooth (0.4 s, no bounce). The scrim fades with the sheet height.
  • Leave: drag down or flick (320 px/s), tap the scrim, or Back. Exit uses the same spring at 0.3 s.
  • Reduced motion: 120 ms fade, no movement.
  • Stays as is: ☰ rail slides from the left; Settings pages push from the right; the image lightbox zooms from the thumbnail; voice stays full screen.
  • One primitive: Arc BottomSheet gets size="menu|list|full". QuietMenu, CascadeMenu and Popover render as a menu sheet on phone, so most composer and header menus change in one place. useSheetGestures sheets move onto it. Spring tokens become one set.
D

Feel it

React · Sheet-up motion (spring 0.4 s, no bounce), drag down to close
E

Build order

  1. Arc BottomSheet sizes, plus menu primitives as sheets on phone (covers B rows 3, 7, 8).
  2. Full-size sheets for the instant overlays (artifact, pane host, overview, search, mini-app).
  3. Switch thread, model picker, Chat + onto the one sheet. Remove useSheetGestures duplicates.
  4. One spring token set. Frame strips (strip.mjs) of each size, interrupt and reduced motion.
  5. Docs: phone motion guide in surfaces/docs. One ai PR + one docs PR.
F

Your picks

Desktop: keep popovers and panes, sheets on phone only?
Small menus (⋯, Agent mode, Plugins) as sheets too?
Ship the rail fix now, before the sheet work?