feat: define page structure and information architecture #766
Description
Summary
Define the page structure, navigation hierarchy, and information architecture for the v0.5.0 web dashboard redesign. This issue proposes a concrete starting hypothesis (not open questions) that gets validated during the design exploration phase (#765).
1. Proposed Page Structure
Hypothesis to validate during design exploration:
Primary navigation (always visible in sidebar)
| Page | Purpose |
|---|---|
| Dashboard | Org overview, health indicators, recent activity, budget snapshot |
| Org Chart | Living org visualization + department/team management |
| Task Board | Kanban + list view of all tasks |
| Budget | P&L dashboard, forecasts, breakdowns |
| Approvals | Pending decisions queue |
Secondary navigation (collapsible section or submenu)
| Page | Purpose |
|---|---|
| Agents | Agent profiles list, click-through to detail |
| Messages | Org-wide message feed with channel filtering |
| Meetings | Meeting history and trigger |
| Providers | LLM provider management |
| Settings | System configuration |
Merged/removed pages
- Company page MERGES INTO Org Chart -- both show org structure. Company's department/agent CRUD becomes Org Chart's edit mode.
- AgentProfiles + AgentDetail MERGE into Agents -- list page with slide-in detail panel, not two separate pages.
- Artifacts stays as a page but only if feat: implement artifact and project persistence #612 backend lands; otherwise removed entirely (no "Coming Soon" stubs).
- Login is a standalone full-page (not in sidebar nav).
- Setup Wizard is a standalone full-page flow (not in sidebar nav).
New potential pages/panels
- Command palette (Cmd+K) as global overlay, not a page.
- Notifications panel (slide-in drawer, not a page) -- aggregates approval urgency, stagnation alerts, budget warnings.
- Activity feed could be a global drawer OR part of Dashboard -- decide during design exploration.
2. Navigation Hierarchy Proposal
Sidebar (220px, collapsible to 56px icon rail):
[Logo/wordmark]
[Cmd+K search trigger]
---
Dashboard (home icon)
Org Chart (sitemap icon)
Task Board (kanban icon)
Budget (chart icon)
Approvals (shield icon) [badge: count]
---
Agents (users icon)
Messages (chat icon) [badge: unread]
Meetings (calendar icon)
---
Providers (server icon)
Settings (gear icon)
---
[Connection status]
[User/logout]
Primary/secondary split uses visual separators (divider lines). Primary items are the high-frequency destinations. Secondary items are important but visited less often.
3. Responsive Scope Proposal
Desktop-first with tablet breakpoint (768px+). No mobile for v0.5.0.
Rationale:
- SynthOrg is an operations dashboard -- primary use case is desktop monitors.
- Tablet support is low-effort with Tailwind responsive utilities.
- Mobile is a separate concern tracked in feat: implement mobile app #252.
4. URL Routing Map
| Route | Page | Notes |
|---|---|---|
/ |
Redirect | To /dashboard or /setup if not configured |
/login |
Login | Standalone full-page |
/setup |
Setup Wizard | Multi-step standalone flow |
/dashboard |
Dashboard | Main dashboard |
/org-chart |
Org Chart | Org chart with dept/agent management |
/tasks |
Task Board | Kanban default, list toggle |
/budget |
Budget | P&L dashboard |
/approvals |
Approvals | Approval queue |
/agents |
Agents | Agent profiles list |
/agents/:name |
Agent Detail | Same page with slide-in panel |
/messages |
Messages | Message feed |
/messages/:channel |
Messages (filtered) | Filtered by channel |
/meetings |
Meetings | Meeting history |
/meetings/:id |
Meeting Detail | Meeting detail view |
/providers |
Providers | Provider management |
/settings |
Settings | System settings |
/settings/:namespace |
Settings (filtered) | Filtered by namespace |
/artifacts |
Artifacts | Artifact browser (only if #612 lands) |
5. WebSocket Channel Map
Which pages subscribe to which real-time channels:
| Page | Channels |
|---|---|
| Dashboard | tasks, budget, approvals, agents (all channels) |
| Org Chart | agents (status changes) |
| Task Board | tasks |
| Budget | budget |
| Approvals | approvals |
| Agents | agents |
| Messages | messages |
| Meetings | meetings |
| All pages | system (connection status, shutdown notices) |
6. Validation Method
The design exploration (#765) builds Dashboard + Agent Profile mockups. The page structure hypothesis here gets validated by seeing whether the navigation makes sense in those mockups. Adjustments feed back into this issue before Phase 1 implementation begins.
7. Dependencies
Blocked by #765 -- identity direction informs chrome treatment, sidebar style, and navigation density.
8. Open Questions (genuine unknowns, not hypotheses)
These need resolution during design exploration:
- Should the activity feed be part of Dashboard or a persistent global element (like Slack's sidebar)?
- Should Messages have its own page or be a persistent drawer (like Intercom)?
- Should Org Chart and Company truly merge, or does edit mode on a graph view create too much complexity?