# Colony Sessions Dashboard — Spec ## Layout One persistent shell. Three zones that never change shape: ``` +----------+---------------------------+-----------+ | | | | | SIDEBAR | MAIN AREA | RIGHT | | 260px | flex: 1 | PANEL | | | | 296px | | fixed | scrolls independently | fixed | | | | | +----------+---------------------------+-----------+ ``` The sidebar and right panel are ALWAYS present. Only the main area content changes based on what you're looking at. ## Sidebar (260px, always visible) Persistent navigation. Never changes between views. ``` +------------------------+ | Colony [+] | <- brand + new session |------------------------| | [search.............] | <- filter sessions |------------------------| | v concierge (2) | <- bot accordion, session count | Signal inbox check | <- session title, clickable | Colony heartbeat | | | | > cronus (1) | <- collapsed bot | | | > designer (3) | | | | > historian (0) | +------------------------+ ``` Each bot row: - Status dot (green pulsing = running, amber = awaiting, grey = idle) - Bot name in mono - Session count badge - "+" button on hover to start new session for that bot - Click to expand/collapse session list Each session row: - Title (haiku summary or truncated prompt) - Timestamp + "live" indicator if running - Archive X on hover - Click selects session in main area Active session highlighted. ## Main Area — Two States ### State A: Feed (no session selected) Default view. Activity feed showing recent sessions as cards. ``` +-------------------------------------------+ | | | +-------------------------------------+ | | | [C] concierge Signal inbox check | | | | 7 tools . 24s . 3m ago | | | | | | | | "Found 3 new messages from Ruby..." | | | +-------------------------------------+ | | | | +-------------------------------------+ | | | [K] cronus Harness improvements | | | | 94 tools . 3m 43s . 6m ago | | | | | | | | "Added systemd service, message..." | | | +-------------------------------------+ | | | +-------------------------------------------+ ``` Cards centered, max-width 680px. Each card: - Bot avatar (colored circle, single letter) + bot name (bold) + session title - Meta line: tool count, duration, relative time - Preview: first 2 lines of last assistant response, in a subtle bg box - Click anywhere on the card = select that session (transitions to State B) Feed is the SAME data as the sidebar — just a different presentation. Clicking a card highlights the corresponding session in the sidebar and transitions to State B. ### State B: Session Detail (session selected) Replaces the feed content. Back to feed via clicking sidebar brand or deselecting. ``` +-------------------------------------------+ | cronus [tag] Running . Auto: OFF Stop | <- session header |-------------------------------------------| | | | 01 MAX | | Check the request queue for work... | | | | Read cmd-req.ts | | Bash bun run cmd-req.ts next 0.8s | | Read /home/max/dev/colony-... 0.2s | | | | 02 +----------------------------------+ | | | Request #62 is done. Here's the | | | | summary: No new pretext API is | | | | needed. LayoutLine already... | | | +----------------------------------+ | | | | 03 MAX | | Good, what's next? | | | | [Send a message... ] [Send] | +-------------------------------------------+ ``` Turn display: - Numbered (01, 02...) in left gutter, mono, muted - User messages: small "MAX" label, text at 16-17px, understated - Assistant messages: white card with subtle border, 16px, line-height 1.75 - Tool calls: compact rows between turns. Tool name (mono pill) + args (truncated) + duration + status icon. NOT collapsed into batches — visible as individual rows, which is what mockup-1 and convergence-mvp-2 both do. - max-bot messages: like user but "max-bot" label, slight green tint Chat input sticky at bottom. Session header: bot tag (colored), title, status, auto-responder toggle + directive, stop button. ## Right Panel (296px, always visible) Tabs that change content based on context. ### When feed is showing (no session selected): - **Overview tab**: bot status cards — each bot with status, model, last session title, session count - **Activity tab**: chronological tool call/event log across all bots ### When session is selected: - **Summary tab**: session title, prompt, progress checklist (done/doing/todo) - **Changes tab**: files modified with +/- diff counts - **Activity tab**: tool call timeline for this session with timestamps and durations ``` +------------------------+ | Summary | Changes | Act| <- tabs |------------------------| | SESSION INFO | | Bot: cronus | | Started: 10:44 AM | | Duration: 3m 43s | | | | PROGRESS | | [x] Check request #62 | | [~] Investigate API | | [ ] Implement fix | | | | DESCRIPTION | | Working on colony... | +------------------------+ ``` ## Sizing System Everything derives from a base scale: - 10px: mono metadata (timestamps, durations, badge counts) - 11px: labels (uppercase section headers, tool names) - 12px: secondary UI text (sidebar sessions, meta lines) - 13px: sidebar bot names, session titles - 14px: minimum readable body (never go below this) - 16px: primary body text, user messages, assistant text - 20px: page/section titles Line heights: 1.4 for compact UI, 1.6 for body, 1.75 for assistant messages. Spacing: 8px base unit. Padding in multiples of 8 (8, 12, 16, 20, 24, 32). Border radius: 4px for pills/badges, 8px for inputs/buttons, 10px for message cards, 16px for feed cards. ## Typography - Primary: Plus Jakarta Sans (400, 500, 600, 700) - Mono: JetBrains Mono (400, 500) for tool names, code, timestamps, bot names ## Colors - Background: #F5F5F0 - Surface: #FFFFFF - Border: #E8E6E1 - Text: #1A1A1A - Text secondary: #6B6B6B - Text muted: #9B9B9B - Bot: concierge=#5B4AE4, forge=#E4584A, cronus=#8B7355, historian=#4AB8E4, designer=#2D8A55, curator=#8A7560 ## State Transitions 1. Page load -> fetch bots + sessions -> render sidebar + feed (State A) + right panel overview 2. Click feed card OR sidebar session -> highlight in sidebar, swap main to State B, right panel switches to session tabs 3. Click sidebar brand "Colony" -> deselect session, swap main to State A, right panel back to overview 4. Click "+" on bot -> blank chat in main area (State B without a session ID), input focused 5. Type + enter in blank chat -> POST /bots/:name/run -> load new session in State B 6. Session finishes -> refresh sidebar, update right panel ## API Integration Same endpoints as current. SSE with named events for live sessions. Chat input injects into running sessions (POST /sessions/:id/send) or starts new ones. ## What This Spec Doesn't Include (Future) - Spatial cards view (round5) - Multi-panel grid (round4-session-dense) - Bot profile pages - Timeline view - Chain/relay visualization