PAP-53 · Wireframes
Information Architecture — left nav & related views
Low-fidelity wireframes for the proposed left-navigation restructure and the two new list views (Projects, Agents). Monochrome and structural only — color, spacing, and final iconography are intentionally not represented. Click any wireframe to zoom.
Revised v2 · per board feedback
5 screens
Desktop + mobile
Lo-fi · monochrome
Plan: PAP-53 plan doc
Overview
What this set covers
Revised after board review. Nav structure, ordering, and the open questions are now locked per the board's direction.
- Top level (no section label): Conference room, New Task, Dashboard, Inbox.
- Work (exact order): Tasks, Routines, Goals, Workspaces, Artifacts, Projects.
- Conference room — new placeholder top-level item, chat-bubble icon, empty page for now (screen 1).
- New Issue → New Task — renamed; standard nav label color (screen 1).
- Issues → Tasks — renamed globally across the frontend (nav item, page, all references).
- Artifacts — new Work item; Projects — new Work item at the bottom of Work, opens the projects list view (screens 1 & 2).
- Removed — the old collapsible PROJECTS section (per-project rows in the sidebar) is deleted (screen 1).
- Project tiles — neutral gray rounded rectangle + folder icon; color-only customization this phase, folder icon fixed (screens 2 & 5).
- Agents section — active agents only when any are running; otherwise up to 5 recently-active + "See all agents" → agents list view with per-row key actions (screens 3 & 4).
Screen 1 · Navigation
1.Left navigation (redesigned)
The full sidebar with every nav change applied. Numbered callouts map to the change list.
01-sidebar.svg1280×800 · desktop
mobile375×812
Annotations
- 1 — Conference room: new top-level item, chat-bubble icon.
- 2 — New Issue → New Task; standard nav label color.
- 3 — Issues → Tasks (renamed globally).
- 4 — Artifacts: new Work item.
- 5 — Projects: new Work item (bottom of Work), opens the list view.
- 6 — Removed: the old collapsible PROJECTS section.
- 7 — Agents: active/recent + "See all agents" (screen 4).
Why this changes: Locks the nav to the board's specified structure and order. Work becomes the single home for cross-cutting views; per-project rows leave the sidebar entirely (you reach a project via Projects → list → detail). On mobile the sidebar is a full-height drawer; the bottom tab bar is unchanged.
Screen 2 · Projects
2.Projects list view
Opened from the new "Projects" Work nav item. Each project is a row with an at-a-glance summary; clicking a row opens today's project detail view unchanged.
02-projects-list.svg1280×800 · desktop
mobile375×812
Reference — today's project detailfrom PAP-53
Annotations
- 1 — Gray folder tile (same primitive as the sidebar).
- 2 — Overview = project description, one line, truncated.
- 3 — Task count + budget + status per row.
Why this changes: Gives projects a real index page instead of only the sidebar list. On mobile each row reflows to a card with the metrics on a second line. Task count and budget are not on the Project type today — the board approved adding a lightweight count + budget lookup for these rows.
Screen 3 · Agents
3.Agents list view ("See all")
Opened from "See all" in the Agents sidebar section. Each row carries the key actions from the agent detail page; clicking a row opens today's agent detail unchanged.
03-agents-list.svg1280×800 · desktop
mobile375×812
Reference — detail page key actionsfrom PAP-53
Annotations
- 1 — Identity: icon, name, role, budget spent/limit, last active.
- 2 — Key actions inline: Assign Task, Run Heartbeat, Pause/Resume, status, ⋯.
- 3 — Entry point: "See all" link in the sidebar Agents section.
Why this changes: Surfaces the actions you'd otherwise have to open each agent to reach. On mobile the action buttons wrap to a second line within the card. Pause vs Resume toggles on the agent's current status.
Screen 4 · Agents (diagnostic)
4.Agents section — active vs. recently-active
How the sidebar Agents section chooses what to show. Desktop-only diagnostic.
04-agents-states.svg1280×800
Rule: If any agent has a live run → show only those (state A). If none are running → show up to 5 recently-active agents sorted by last heartbeat, plus "See all" (state B). "See all" always opens the full agents list view (screen 3).
Screen 5 · Projects (detail)
5.Project tile — customize icon & color
Default neutral tile and the color picker opened by clicking it. Color-only this phase; the folder icon is fixed. Desktop-only overlay.
05-project-customize.svg1280×800
Why this changes: Per board direction, build color only first — every tile keeps a folder icon (custom-icon picker deferred). Default tiles are neutral gray. Since the per-project sidebar list is removed, tiles live in the Projects list rows and the project detail header, so the color control attaches to the project itself.
project.color already exists — no new field needed this phase.Board answers
Resolved decisions
- Terminology — Issues → Tasks, renamed globally on the frontend.
- Conference room — Placeholder only, empty page for now. Confirmed.
- Projects: dual presence — No. Delete the existing collapsible PROJECTS section; projects are reached only via the Projects list view.
- Row data — Yes, add a lightweight task-count + budget lookup for the list rows.
- Project icon — Color only first. Keep a fixed folder icon for every tile; defer custom-icon picker.
- Work order — Tasks · Routines · Goals · Workspaces · Artifacts · Projects.
Nesting confirmed: Projects (nav) → projects list in the main pane → row → project detail. "See all agents" → agents list in the main pane → row → agent detail.