Proposal

Monitor
on mobile

Redesigning the monitor dashboard for phone-first
use. Max's primary device.

Context

Max uses this on his phone

The monitor dashboard was built desktop-first. Mobile is a responsive afterthought — hamburger menu, hidden sidebar, cramped content. But Max primarily uses it on his phone. Terminal is his most-used section. Chat is hard to use. This proposal flips the priority.

Problems

What's broken on mobile

1
Hamburger hides everything

The entire nav is behind a hamburger. Every navigation action requires: tap hamburger → wait for drawer → find item → tap → drawer closes. Two taps minimum to get anywhere. Mobile nav research consistently shows bottom tab bars outperform hamburger menus for discoverability.1

2
Chat input is at the top

Colony chat has its input field in the standard desktop position — reachable on desktop, unreachable on phone. The thumb zone on mobile is the bottom 40% of the screen. Chat input should be bottom-anchored.2

3
Terminal is tiny

Terminal iframe gets the full viewport minus the header bar, but at 375px wide it's cramped. The current zoom hack (0.7x scale) helps but text is small. Terminal is Max's most-used section — it needs to be optimized, not just scaled down.

4
Bot detail is split awkwardly

On mobile, BotPage has a Terminal/Status segmented toggle. You can see one or the other, never both. The status dock (context %, uptime) disappears when viewing terminal. Critical info shouldn't require a mode switch.

5
Overview cards overflow

Bot status cards use CSS grid but at mobile width they stack into a long vertical scroll. System health cards get cramped. No information hierarchy — everything has equal weight.

6
Sub-tabs are hard to tap

The segmented control tabs (Messages, Proposals, Tools, etc.) are small touch targets. The minimum recommended tap target is 44px.3 Current tabs are ~36px height with 13px text.

Proposed

Bottom tab bar

Replace the hamburger with a persistent bottom tab bar. Research shows bottom navigation increases feature discoverability by 20-30% vs hamburger menus.1 Max's feedback: terminal is most-used, don't hide it.

Overview 11 bots online
maexbot 30%
cronus 45%
forge 12%
designer 32%
67%Mem
34%Disk
1.2Load
42dUp
◉
Overview
▩
Terminal
✉
Colony
⋯
More
A

4 bottom tabs. Overview, Terminal, Colony, More. Terminal gets a dedicated tab — it's the most-used feature. "More" opens Queue, Knowledge, Infrastructure.

B

Compact bot list. Overview shows bots as a dense list (dot + name + context %) instead of large cards. Fits 6-8 bots without scrolling.

C

Inline system health. Four stat pills in a row — memory, disk, load, uptime. Always visible, no scrolling needed.

Terminal

The most-used view

Max said terminal is his most-used section. The current approach (0.7x zoom, full iframe) works but wastes screen space on the header. Proposed changes:

Change
Minimal header on terminal view. When terminal tab is active, collapse the header to just bot name + status dot + context %. Save 40px of vertical space for terminal content.
Change
Swipe between bots. Horizontal swipe on the terminal switches between bot terminals. No need to go back to a list view — the tab bar stays, you swipe the content. Bot name in the minimal header updates.
Keep
Terminal zoom at 0.7x. The current zoom hack actually works well on mobile. Keep it — text is small but readable, and it shows more columns.
Change
Pull-down status dock. Instead of a mode toggle (Terminal vs Status), add a pull-down panel from the minimal header. Drag down to reveal status/context/uptime/actions, release to snap back. Status info is accessible without leaving terminal view.
Colony Chat

Chat that works with thumbs

Chat is the hardest mobile problem. The current layout is desktop-native — scrolling message list with top-positioned controls. Research on mobile messaging UX points to three key patterns:2

Research-driven
Bottom-anchored input. Move the message input to the bottom of the screen, above the tab bar. This is where every major messaging app puts it (iMessage, WhatsApp, Slack mobile). The thumb zone is the bottom 40% of the screen.2
Research-driven
Filters replace sub-tabs. Instead of 5 sub-tabs (Messages, Proposals, Tools, Audit, Inbox), use a horizontal pill filter bar. Scrollable, same row, larger tap targets (44px+). Active filter highlighted in ember.3
Design instinct
Message grouping. Group consecutive messages from the same sender — show avatar/name once, then stack messages. Reduces visual noise and scrolling by 20-30% in dense conversations.
Design instinct
Swipe actions. Swipe right on a message to reply, swipe left to copy. No more long-press menus. Gesture-based access for the two most common actions.
Bot Detail

Per-bot view on mobile

Currently: segmented toggle between Terminal and Status. You lose one to see the other. Max's feedback: he wants tabs to switch between status block and terminal. Proposed:

Research-validated
Keep the segmented toggle but add a third option: Logs. Three segments: Terminal | Status | Logs. Currently logs are desktop-only — bring them to mobile as a read-only scrollable view. Terminal is inherently hard on mobile but logs are easy to read.4
Change
Status bar always visible. A thin 28px bar below the segment toggle showing: status dot + bot name + context % + uptime. Always present regardless of which segment is active. Eliminates the "switch to Status just to check context %" problem.
Design instinct
Quick actions in status bar. Long-press the status bar to reveal restart/clear-context buttons. No dedicated controls page needed on mobile — actions live in context.
Sources

References

1 Hamburger Menus and Hidden Navigation — bottom tabs outperform for discoverability nngroup.com 2 The Thumb Zone — designing for mobile users, bottom 40% reachability smashingmagazine.com 3 Apple HIG — 44pt minimum tap targets, tab bar guidelines developer.apple.com 4 Material Design — mobile navigation patterns, bottom navigation material.io