Phone bot UI — Duet + Grok Bot parity
Research of both apps and our phone mode, then 5 screens of one standard
Lead: Bots home and project home stay as they are today and share one layout. In a bot, the composer's top deck holds Chat · Threads · Bot. The top-right icons stay, so Computer and Edit bot are not deck tabs. Avatars keep their own art and motion; the Duet strokes are gone.
What they do that we don't
| Pattern | Claude Duet | Grok Bot | Our phone mode today |
|---|---|---|---|
| Bot face at the top | Live avatar in a glass circle, centre of header; a white stroke draws a new glyph per state | Big blob avatars with eyes, top row | Avatar is a small FAB, bottom right; header is a text title |
| Live status words | Pill under face: #channel + "Searching the web / Thinking it through / Writing / Setting up a payment" |
Online dot only | None on the thread screen |
| Home list | Threads inside one channel | Messages-style list: avatar, name, last line, time, unread dot | Bordered cards, no avatars, no unread |
| Orchestrator | One proactive agent spawns tasks | "Office" bot takes every order, hands to Dev/Task/Meeting/Slack, reports back | Chief/Al coordinator exists, not the front door on phone |
| Task inside chat | "↳ ◌ Pick viral candies…" chip, opens a task page with "What Claude is doing" steps | Checklist icon in preview line | Thread rows only; steps live in desktop panes |
| Approvals | Inline card ("$16.49 · Approve in Link") → full sheet with Decline / Approve | Bot asks before deploy/store submit | In Bot Home list, not in the thread |
| Bottom bar | Composer + 3-icon pill (Chat · Tasks · Notes) + search circle | Search pill + grid button | No composer on Bot Home |
| Voice | Mic in composer | Always-on call with Office bot | Voice stage, but shows A:// pixels, not the bot |
What we keep, reshape, add
Rule for this redesign
Duet and Grok Bot lend the layout and the motion. Everything that makes Allternit bots ours stays, and stays one tap away.
| What we have today | Keep / reshape | Where it lives in the new phone UI |
|---|---|---|
| A://TERNIT wordmark, drawer = mode wheel (Home · Bots · Code · ACI) | Keep | ☰ in every header opens the same drawer; Bots home keeps "A://TERNIT BOTS" |
| Each bot's own avatar pack (Gizzi, Dot Friends, Clawd Crew, Duet Carry, photo sprites) with idle / working / speaking / done art | Keep | Plays its own art and living motion. No strokes drawn over any face. The status word sits in the top pill |
| Live bot stage (ai #712): bot full screen, drop files on it, plan it first, montage | Keep | Chat tab: the bot beside its conversation; drop files on the bot as today |
| Bot Home tabs: Chat + threads · Routines · Memory · Computer · Performance · Settings | Reshape | Top deck Chat · Threads · Bot. Bot = today's Bot Home top + Routines · Memory · Performance. Computer = monitor icon. Settings = gear (Edit bot). No tab is lost |
| Each bot has its own computer (agent watch, avatar cursor, take over) | Keep — our edge | Monitor icon top right opens it as a side pane (desktop) or full screen (phone) |
| Projects + threads, picked-back-up rule, Al coordinator, team templates, @mentions | Keep | Bots home and project home share one layout; threads live in the Threads tab and the top pill |
| Runs on any brain (Claude, GPT, Grok, Kimi, local) | Keep | Shown on the Bot page under the name |
| Channels: bots on Telegram, email, phone numbers (digital twin) | Keep | Bot page → Channels |
| Approvals live in Bot Home, no Inbox tab | Keep | Inline cards in the thread + one approval sheet; still no Inbox tab |
| Our composer: card, model picker, Agent mode · Plugins, Incognito ask, mic, voice | Keep as is | Same on every tab, desktop and phone |
| Thread top bar: Gem · thread ▾, Resolve, bell, gear, computer, panel | Keep | Gains the status word under the name. The Bot / Chat switch goes |
| Graphite dark, white light, tan accent, coral core cell | Keep | Same tokens in every mockup |
| Threads made from one chat | Add | Threads tab; Main chat starts a thread per request (Duet's task idea, on our threads) |
| Live status words under the avatar | Add | New: extends stage-status.ts |
What Duet looks like
What Grok Bot looks like
Duet in use: one thread, auto tasks
You talk in one thread. Duet turns each request into a task thread on a list, works them in parallel, and proposes tasks of its own for a go-ahead.
- Bottom bar: labelled glass pill — Chat · Tasks · Make. A coral + button floats above it on Tasks.
- Tasks tab: big "Active / Up next" tabs, sort + search, "Ready for review 6 · Updated 6 min ago". Each row: checkbox, task title, green "Ready for review" + the bot's open question.
- Chat: a task appears inline as a chip (eye icon + task name) that opens it. Images sit in the chat. Composer reads "Message #null-district", with mic and a separate voice-mode button.
- Header: the same live avatar; the pill is the channel with a mail icon (the channel has an email address). Content scrolls under a frosted header.
Our app today
The design: desktop and phone
| Your note | What changed |
|---|---|
| Remove the strokes across the agent's face | Gone. Each avatar keeps its own pack art and living motion (lean, glance, bob) |
| Keep Bots home as it is; project home the same overall | Bots home unchanged. Project home uses the same layout: heading, To: deck (project · Al), composer, roster, cards |
| Bot tab = today's bot view top and background | Bot tab shows today's Bot Home band, avatar, name, chips, Open phone, Edit bot; then Routines · Memory · Performance |
| Chat = the one suggested | Chat is the bot beside its conversation (Bot-view-redesign option 1). The Bot / Chat switch is gone |
| Threads were not accounted for | New Threads tab: every thread this bot has, grouped Needs you / Working / Ready for review / Up next, with Stale and Resolved folded. Main chat starts threads as you ask; New thread is still there; the top pill still switches threads |
| Task text too big | Smaller: 12 px titles, 10.5 px status lines, 9.5 px group labels |
| Keep our top-right icons; they overlap the deck | Kept: Resolve · bell · gear · computer · panel. Computer left the deck (monitor icon opens it, as today). Gear = Edit bot; deck Bot = bot detail view |
How it maps to what we have
| Piece | Built on (on main) | New work |
|---|---|---|
| Bots home | FabricBotMode launch, To: deck, roster |
None |
| Project home | ProjectHomeView (Al chat, Team, Threads, Artifacts, Routines) |
Same launch layout as Bots home; its sections become the cards under the composer |
| Top deck tabs | ChatComposer top-deck slot (like CoworkTopDeck) |
BotThreadTopDeck: Chat · Threads · Bot |
| Chat | BotLiveStage (#712), thread transcript |
Bot beside its conversation (Bot-view-redesign option 1); remove Bot / Chat switch |
| Threads | bot_threads, thread groups, Stale fold, New thread |
Main chat starts a thread per request; group by Needs you / Working / Ready / Up next |
| Bot | BotHomeView header + tabs |
Show header + Routines · Memory · Performance |
| Computer, Edit bot | Top-right icons as today | None |
All three surfaces in one PR: Desktop, ai.allternit.com on phones, m.allternit.com. Docs in the same PR.
What happens with these edits
Nothing in the product has changed yet
Only this page changed. No app code, no PR, no deploy. The app changes after you pick below and say build.
- The other session's Bot-view-redesign page asks the same Chat question (option 1 or 2). One answer covers both pages.
- Merge first: ai #713 + platform #1756 (Duet pack, still open).
- Your go-ahead each time: merging, the m.allternit.com deploy and the Desktop update.