| topic | agents |
|---|---|
| type | design-guide |
| status | research-complete |
| last-validated | 2026-05-21 |
| original-query | UX patterns for ZOE dashboard as chat-based command center, mobile-first design for agent orchestration (reconstructed) |
| tier | production |
Date: 2026-04-06 Status: Research Complete Tags: ZOE, dashboard, chat UX, command center, mobile-first, agents, quick actions Related: Doc 288 (Agent Squad Monitoring Dashboards)
Actionable UX patterns for zoe.zaoos.com — a mobile-first personal dashboard where Zaal chats with ZOE (the AI orchestrator) who manages 8 agents. This doc covers: command palette patterns, chat quick actions, mobile gestures, contextual suggestions, and multi-agent routing UI. Every pattern includes what to build.
- Single hotkey activation — Cmd+K opens everything. On mobile: a persistent floating action button (FAB) or pull-down gesture.
- Favorites with hotkeys — Cmd+1 through Cmd+9 for your most-used commands. ZOE equivalent: pin your top 9 actions as numbered quick-action chips.
- AI mode toggle — Hit Tab to switch from "search" to "ask AI." ZOE equivalent: the input always goes to ZOE, but a mode toggle could switch between "chat" (conversational) and "command" (slash commands that execute immediately).
- Extensions as first-class — Every action is a plugin. ZOE equivalent: each agent (ZOEY, WALLET, etc.) registers its own actions into the command palette.
- Cmd+K is the single source of truth — every action lives here, including ones that don't have UI buttons. ZOE equivalent:
/slash commands should be the exhaustive action list, with the chip bar showing only the top 6-8. - Shortcut learning — when you use Cmd+K to find "archive," it shows you the shortcut (E) so you learn it. ZOE equivalent: when a user types a common request, ZOE could respond with "Done. Tip: you can also say
/statusfor this." - Swipe gestures on mobile — swipe right = archive, swipe left = snooze, L-gesture = open command. ZOE equivalent: swipe gestures on message bubbles for quick reactions (pin, forward to agent, mark as task).
- Triage bar — a persistent bar of the most common actions (archive, snooze, reply). ZOE equivalent: a persistent action bar above the chat input.
- Scoped search with prefixes —
@for people,#for projects,:for line numbers. ZOE equivalent:@zoeyroutes to ZOEY,@walletroutes to WALLET,#contactssearches contacts,#eventssearches events. - Contextual palette — the palette shows different actions depending on what's selected. ZOE equivalent: quick action chips change based on the last message (see Part 5).
- Ask on Page — query the current context. ZOE equivalent: when viewing an agent's output, a "Ask about this" action that scopes ZOE to that context.
- Inline AI writing — AI lives in the text field, not a separate panel. ZOE equivalent: the chat IS the interface. No separate dashboards or panels — everything flows through conversation.
- Multiple access points — slash command, highlight text, sparkle icon, block menu. ZOE equivalent: provide 3 ways to trigger the same action: (1) type it, (2) tap a chip, (3) long-press a message for contextual actions.
- Slash commands as first-class —
/aitriggers AI, other slashes trigger blocks. ZOE equivalent:/opens the command palette inline, showing all available slash commands grouped by agent.
- Persistent personal AI — integrates with notes, docs, external knowledge. Not just Q&A but a "second brain."
- Scheduled automations — "Summarize Hacker News top 5 every morning at 8am" delivered to email. ZOE already does this with HEARTBEAT. Surface automation status in the chat: "Your 3 active automations ran today. 1 needs attention."
- Mini chat (Khoj Mini) — a quick-pull desktop module for fast answers. ZOE mobile equivalent: a notification-shade widget or lock-screen widget for quick ZOE queries.
- Custom agents — user-created agents with custom persona + knowledge + tools. ZOE equivalent: the 8 agents are pre-configured but users should see which agent is handling their request.
- Workspace-based — different workspaces for different document collections. ZOE equivalent: conversation threads per domain (music, governance, contacts, agents).
- Slash commands for text injection —
/injects pre-written prompts. ZOE equivalent:/morninginjects the morning briefing prompt,/standupinjects the standup format. - Thumbs up/down feedback — on every response. ZOE should have this — it trains the system and gives Zaal a fast way to signal quality.
- Voice input/output — TTS built in. ZOE should support voice, especially on mobile.
- Flowchat visualization — conversations rendered as flowcharts showing branching. ZOE equivalent: when a request fans out to multiple agents, show a mini flow diagram of which agents were invoked.
- Parallel Multiverse Chats — compare responses from different models side by side. ZOE equivalent: when ZOE routes to multiple agents, show their responses in parallel cards before synthesizing.
- Switch models mid-chat — zero lock-in. ZOE equivalent: switch which agent handles the thread with
@agent-name.
- Code execution in chat — run Python/JS directly from conversation. ZOE equivalent: agent task outputs (deploy results, API responses, cron logs) rendered inline as rich cards, not just text.
- Ready-made components: Thread, Composer, ActionBar, BranchPicker, AttachmentUI, SuggestedActions.
- Slash commands built in.
- @-mentions for tools in the composer — maps perfectly to
@agent-namerouting. - Message actions: copy, edit, reload, speak, feedback (thumbs).
- Generative UI — tool outputs render as custom React components, not just text. This is critical for ZOE: agent status cards, contact cards, event cards should all be custom components.
- React Native support — same components work on mobile.
Verdict: assistant-ui is the strongest candidate for ZOE's chat component library.
- Up to 3 quick reply buttons below a message. When tapped, the button text is sent as a message.
- Higher response rates than free-text — WhatsApp confirmed this in testing.
- ZOE equivalent: after ZOE asks a clarifying question, show 2-3 tap-to-reply chips: "Yes, do it" / "Show me options" / "Cancel"
- Inline buttons below messages — actions in context with the message (not floating above keyboard).
- Keyboard overlay buttons — a custom keyboard replaces the system keyboard for structured input.
- ZOE equivalent: after an agent report, inline buttons: "Approve" / "Edit" / "Forward to [agent]" / "Schedule follow-up"
- Tapback reactions — long-press any message for quick reactions (thumbs up, heart, etc.).
- App drawer above keyboard — a horizontal scrollable strip of app icons (camera, photos, stickers, etc.).
- ZOE equivalent: the app drawer becomes the agent drawer — horizontal strip of agent avatars above the keyboard. Tap to route next message to that agent.
Four chip types map to ZOE actions:
- Assist chips — "Get directions," "Call" — contextual next actions. ZOE: "Check agents" / "Morning brief"
- Filter chips — narrow results. ZOE: "Show only ZOEY tasks" / "This week only"
- Input chips — represent entered info (like tags). ZOE: selected contacts, events, agents as removable chips in the composer.
- Suggestion chips — predicted next actions. ZOE: ML-driven suggestions based on time of day, recent conversation, and agent status.
- Multiline expansion — input grows vertically as you type. Essential.
- Relevant keyboard — show voice button prominently, URL keyboard for links, number pad for amounts.
- Persistent action bar — camera, voice, attachments always visible next to the input. ZOE: microphone, slash command trigger, agent selector always visible.
Based on all patterns analyzed, here is the specific quick action bar design for ZOE:
┌─────────────────────────────────────┐
│ [message bubbles...] │
│ │
├─────────────────────────────────────┤
│ ◀ 🟢ZOE 👩ZOEY 💰WALLET ⚡QUICK ▶│ ← Agent strip (scroll)
├─────────────────────────────────────┤
│ [Status] [Tasks] [Contacts] [Events]│ ← Context chips (change)
├─────────────────────────────────────┤
│ [/] [🎤] Type a message... [Send] │ ← Input bar
└─────────────────────────────────────┘
A horizontal scrollable row of agent avatars with status indicators:
- ZOE (green dot = active) — orchestrator, default route
- ZOEY (green dot) — content + social agent
- WALLET (green dot) — financial agent
- Other agents with status: idle (grey), working (pulse animation), error (red), sleeping (zzz)
Tap an agent to route your next message to them specifically. Long-press for agent details (last active, current task, recent output).
Default state (morning):
[Morning Brief] [Agent Status] [Today's Tasks] [Check Calendar]
Default state (evening):
[Day Summary] [Tomorrow's Plan] [Agent Logs] [Wind Down]
After asking about contacts:
[Add Contact] [Search Contacts] [Send Message] [View Recent]
After asking about events:
[Create Event] [This Week] [Invite People] [Set Reminder]
After agent error:
[Retry] [Show Logs] [Switch Agent] [Escalate to ZOE]
After receiving a task list:
[Mark Done] [Delegate] [Reschedule] [Add Note]
/button — opens slash command palette (full-screen overlay on mobile)- Microphone — voice input (hold to talk, release to send)
- Text field — auto-expands, supports
@agentmentions and#topictags - Send button — changes to Stop when ZOE is generating
| Action | Gesture | What it does |
|---|---|---|
| Copy | Long-press → tap | Copy text to clipboard |
| Pin | Swipe right | Pin to a "Pinned" section at top of chat |
| Forward | Swipe right (further) | Send to a specific agent or thread |
| React | Long-press → tapback | Thumbs up/down (feeds quality signal) |
| Branch | Long-press → "Ask more" | Start a sub-thread on this message |
| Task | Long-press → "Make task" | Convert into a tracked task |
| Share | Long-press → share | Share via system share sheet |
When an agent reports status, the card has inline buttons:
┌──────────────────────────────────┐
│ 🟢 ZOEY completed: Posted to FC │
│ "New track drop from @zaalmusic" │
│ │
│ [View Post] [Edit] [Boost] [Undo]│
└──────────────────────────────────┘
┌──────────────────────────────────┐
│ 🔴 WALLET failed: Gas too high │
│ Estimated: 0.008 ETH ($22) │
│ │
│ [Retry When Cheap] [Force] [Skip]│
└──────────────────────────────────┘
All commands start with / and are grouped by domain:
/status — Full squad status
/status zoey — Single agent status
/morning — Morning briefing
/tasks — Today's task list
/tasks add [text] — Create task
/contacts [name] — Search contacts
/contacts add — Start add-contact flow
/events — This week's events
/events create — Start event creation flow
/agents — Agent fleet overview
/agents restart [x] — Restart an agent
/cost — Token cost summary
/logs [agent] — Recent agent logs
/schedule [text] — Create automation
/send [agent] [msg] — Direct message to agent
/help — Show all commands
Full-screen overlay on mobile:
- Search bar at top (fuzzy matching)
- Grouped by category: Quick, Agents, Contacts, Events, Tasks, System
- Recent commands section at top
- Each command shows: icon, name, description, keyboard shortcut (desktop)
- Tap to execute, or continue typing to pass arguments
This is the core UX tension in every AI command center. Here's how the best tools solve it, and what ZOE should do:
| Tool | How It Works |
|---|---|
| Superhuman | Command palette = actions. Chat = questions. Separate modes. |
| Raycast | Tab toggles between search (find things) and AI (ask things). |
| Notion | / = structured commands. Free text = AI conversation. |
| Arc | Command bar = navigation. "Ask" = conversational. |
| Linear | Cmd+K = actions only. No chat mode. |
ZOE should use a single input that handles both, with these rules:
- Starts with
/→ Execute command immediately (action mode) - Starts with
@agent→ Route to specific agent (directed mode) - Everything else → ZOE interprets intent (conversational mode)
- Confirmation for destructive actions → "I'll restart ZOEY. Confirm?" with [Yes] [No] chips
The key insight from Superhuman: always show the shortcut after the conversational version. When someone types "what are my agents doing?" ZOE responds with the status AND says "Tip: /status does this instantly."
┌─ Agent Status ─────────────────────┐
│ 🟢 ZOE orchestrator idle │
│ 🟢 ZOEY content posting │
│ 💤 WALLET financial sleeping │
│ 🔴 CASTER social error │
│ │
│ [Details] [Restart CASTER] [Logs] │
└────────────────────────────────────┘
┌─ Contact ──────────────────────────┐
│ 👤 Steve Peer │
│ Ellsworth drummer, ZAO Stock │
│ Last contact: 3 days ago │
│ │
│ [Message] [Call] [Add Note] [View] │
└────────────────────────────────────┘
┌─ Event ────────────────────────────┐
│ 📅 ZAO Stock │
│ Oct 3 2026, Franklin St Parklet │
│ Budget: $5-25K | Status: Planning │
│ │
│ [Edit] [Invite] [Tasks] [Share] │
└────────────────────────────────────┘
┌─ Task ─────────────────────────────┐
│ ☐ Pitch Steve Peer for ZAO Stock │
│ Due: Apr 15 | Agent: ZOEY │
│ Priority: High │
│ │
│ [Done] [Snooze] [Delegate] [Edit] │
└────────────────────────────────────┘
┌─ Morning Brief ────────────────────┐
│ Good morning, Zaal. │
│ │
│ 🟢 7/8 agents active │
│ 📋 3 tasks due today │
│ 📅 1 event this week │
│ 💰 $4.22 spent on agents yesterday │
│ 📨 2 messages need response │
│ │
│ [Show Tasks] [Agent Detail] [Costs]│
└────────────────────────────────────┘
┌─────────────────────────────────┐
│ ← ZOE ⚙️ 🔔 │ ← Header: back, title, settings, notifications
├─────────────────────────────────┤
│ │
│ [pinned messages if any] │
│ │
│ [conversation messages] │
│ [scrollable, newest at bottom] │
│ │
│ [agent status cards] │
│ [task cards] │
│ [contact cards] │
│ │
├─────────────────────────────────┤
│ ◀ 🟢ZOE 👩ZOEY 💰WAL ⚡QCK ▶ │ ← Agent strip
├─────────────────────────────────┤
│ [Chip1] [Chip2] [Chip3] [Chip4] │ ← Context chips
├─────────────────────────────────┤
│ [/] [🎤] Message ZOE... [Send] │ ← Input
└─────────────────────────────────┘
- Keyboard open — agent strip and context chips collapse to save space. Only input bar remains.
- Scroll up — loads older messages. Header becomes translucent with blur.
- Pull down from top — refresh agent status.
- Swipe from left edge — back to conversation list (if multi-thread).
- Tap agent avatar — routes next message. Double-tap opens agent detail sheet (bottom drawer).
- Long-press message — contextual action menu (pin, forward, task, react).
- Haptic feedback — subtle vibration on send, on agent response arrival, on error.
- Sidebar with conversation threads list
- Cmd+K command palette overlay
- Keyboard shortcuts for all actions
- Agent strip becomes a persistent sidebar panel
- Split view: chat left, agent details/cards right
- Chat input with
/command support — the core interaction - Agent strip — visual agent routing
- Context chips — dynamic quick actions
- Rich message cards — agent status, tasks, contacts, events
- Slash command palette — full-screen overlay
- Message actions — long-press, swipe, reactions
- Voice input — microphone button
- Automations UI — scheduled task management
- Desktop enhancements — Cmd+K, sidebar, split view
| Layer | Tool | Why |
|---|---|---|
| Chat components | assistant-ui | React + React Native, slash commands, @mentions, generative UI, message actions built in |
| Styling | Tailwind CSS v4 | Already in ZAO OS |
| State | React Query + Context | Already in ZAO OS |
| Real-time | WebSocket or SSE | Agent status updates, message streaming |
| Mobile | React Native (Expo) or PWA | assistant-ui supports both |
| Command palette | cmdk (pacocoursey) | The standard Cmd+K library, works with assistant-ui |
| Rich cards | Custom components | Register via assistant-ui's generative UI system |
- Unified input with smart routing — single text field,
/for commands,@for agents, free text for conversation - Dynamic context chips — time-of-day defaults + conversation-aware suggestions
- Agent status indicators — real-time dots showing agent state
- Inline action buttons on cards — every rich card has contextual actions
- Confirmation for destructive actions — chip-based confirm/cancel
- Superhuman: How to Build a Remarkable Command Palette
- Maggie Appleton: Command K Bars
- Destiner: Designing a Command Palette
- UX Patterns: AI Chat Interface Pattern
- GroovyWeb: UI/UX Design Trends for AI-First Apps 2026
- assistant-ui React Library
- CopilotKit Agentic Chat UI
- Khoj AI Features
- AnythingLLM Chat UI
- Msty AI
- Material Design 3: Chips
- CometChat: Chat App Design Best Practices
- Raycast AI
- Arc Max
- Notion Slash Commands
- Linear Shortcuts
- Vercel Chatbot: SuggestedActions Component
- WhatsApp Interactive Buttons
- Superhuman Swipes & Triage Bar
- AWS Multi-Agent Orchestrator UI
- The Orchestrator Pattern
- Medium: Command Palette UX Patterns
- Mobbin: Command Palette UI Design