DearBot — Mock Pages

Click any page to preview. These are static mocks for the frontend engineer to refine into production views.

Page Flow & Route Map

Interactive visualization of all DearBot pages, routes, and transitions. Click any page to see incoming/outgoing connections, triggers, and implementation status. Use this as a developer reference for the complete product flow.

Office View (5 scenarios)

The main RPG-style game view with HUD, party bar, and dialogs. Includes 5 sub-scenarios: Working Day, Coworking, Idle/Self-Directed, Group Meeting, and Report Meeting — each showing a different office state with appropriate overlays.

CEO Dashboard

High-level overview for non-technical CEOs. Shows all agents with their current activity, task queues, daily schedules, completion forecasts, performance metrics, and cost per agent. Helps decide whether to hire more or fire underperformers.

Report Meeting

CEO starts a report meeting. Agents line up and report progress one by one — what they worked on, what they accomplished, any blockers. CEO can resolve blocks, give feedback, assign new tasks, or close items.

1:1 Meeting

CEO pulls a single agent into a private conversation. Can ask for status updates, teach the agent how to do something, give new tasks, or debug issues together. A chat interface with the agent's screen visible.

Hire Agent

Hiring flow for a new AI employee. Pick a role (Marketing, Developer, Researcher, etc.), define responsibilities, assign tools/browser access, and confirm the ~$100/month cost. Agent appears at a new desk after hiring.

Agent Screen Peek

Live view of an agent's computer. Shows a browser screenshot (via BrowserFabric), current tab URL, what the agent is doing (browsing, typing, running commands), and recent file activity. CEO can watch agents work in real time.

Escalations & Notifications

When agents are blocked (need login credentials, policy clarification, API keys), they escalate to the CEO. This view shows pending escalations with urgency, which agent is blocked, what they need, and quick-resolve actions.

Concept Video (1 min)

Animated concept introduction — auto-playing 1-minute walkthrough of DearBot. Shows: title, office with agents, hiring flow, agents working with screen peek, team meeting, report meeting, CEO dashboard, and closing. Play/pause controls + scene markers.