Dashboard: Hierarchical navigation redesign (Projects → Worktrees → Artifacts) #207

New issue

Closed

opened 2026-02-19 14:57:04 +00:00 by mprihoda · 1 comment

mprihoda commented

2026-02-19 14:57:04 +00:00

(Migrated from github.com)

Overview

Restructure the dashboard from a flat single-page layout into a hierarchical navigation model with four levels:

Projects Overview (/)
  └── Project Details (/projects/:name)
        └── Worktree Details (/worktrees/:issueId)
              └── Artifact Details (/worktrees/:issueId/artifacts/:path)

Current state

The dashboard is a single page with two flat sections:

Main Projects row — one card per discovered project (name + create button)
Worktree List grid — all worktrees from all projects mixed together

There is no drill-down, no per-project view, and no dedicated worktree page.

Target state

Level 1: Projects Overview (`/`) — #205

Top-level page showing one card per project with summary info (name, tracker, active worktree count, attention badges). Click to drill into project.

Level 2: Project Details (`/projects/:name`) — #206

Per-project page showing all worktree cards for that project. Create worktree button. Auto-refresh. Click a worktree to see its details.

Level 3: Worktree Details (`/worktrees/:issueId`) — #188

Dedicated page for a single worktree. Shows issue info, git status, progress, PR link, review state, artifacts, workflow actions. Auto-refresh.

Level 4: Artifact Details — #77, #116

Drill into a specific artifact to read it. Markdown rendering for review packets/analysis (#77). Code viewing with syntax highlighting and diffs (#116).

Breadcrumb navigation across all levels. Optional persistent sidebar for quick worktree switching.

Implementation path

Suggested order (each level adds value independently):

#206 — Project details page: Create per-project view with worktree list. Can coexist with the current flat root page during development.
#205 — Projects overview: Restructure the root page to show only project cards, linking to #206. This completes the top two levels.
#188 — Worktree detail page: Add dedicated worktree view. Worktree cards in #206 link here.
#119 — Navigation: Add breadcrumbs and shared layout across all levels.
#77, #116 — Artifact views: Add artifact rendering accessible from worktree details.

#197 — Card loses information after HTMX refresh (may be simplified by dedicated pages)
#175 — Cards jump around during refresh (fewer cards per page = less jumping)
#148 — Track main projects independently (prerequisite for projects overview showing empty projects)

#47 — Workflow-defined actions (within worktree detail page)
#200 — Artifact ordering (within artifact list on worktree detail page)
#75 — Markdown rendering (within artifact detail views)
#152 — Mermaid diagram rendering (within artifact detail views)
#100 — Incorrect phase count (within worktree detail progress section)

## Overview Restructure the dashboard from a flat single-page layout into a hierarchical navigation model with four levels: ``` Projects Overview (/) └── Project Details (/projects/:name) └── Worktree Details (/worktrees/:issueId) └── Artifact Details (/worktrees/:issueId/artifacts/:path) ``` ## Current state The dashboard is a single page with two flat sections: 1. **Main Projects** row — one card per discovered project (name + create button) 2. **Worktree List** grid — all worktrees from all projects mixed together There is no drill-down, no per-project view, and no dedicated worktree page. ## Target state ### Level 1: Projects Overview (`/`) — #205 Top-level page showing one card per project with summary info (name, tracker, active worktree count, attention badges). Click to drill into project. ### Level 2: Project Details (`/projects/:name`) — #206 Per-project page showing all worktree cards for that project. Create worktree button. Auto-refresh. Click a worktree to see its details. ### Level 3: Worktree Details (`/worktrees/:issueId`) — #188 Dedicated page for a single worktree. Shows issue info, git status, progress, PR link, review state, artifacts, workflow actions. Auto-refresh. ### Level 4: Artifact Details — #77, #116 Drill into a specific artifact to read it. Markdown rendering for review packets/analysis (#77). Code viewing with syntax highlighting and diffs (#116). ### Navigation — #119 Breadcrumb navigation across all levels. Optional persistent sidebar for quick worktree switching. ## Implementation path Suggested order (each level adds value independently): 1. **#206 — Project details page**: Create per-project view with worktree list. Can coexist with the current flat root page during development. 2. **#205 — Projects overview**: Restructure the root page to show only project cards, linking to #206. This completes the top two levels. 3. **#188 — Worktree detail page**: Add dedicated worktree view. Worktree cards in #206 link here. 4. **#119 — Navigation**: Add breadcrumbs and shared layout across all levels. 5. **#77, #116 — Artifact views**: Add artifact rendering accessible from worktree details. ## Related issues (bugs that may be resolved by the redesign) - #197 — Card loses information after HTMX refresh (may be simplified by dedicated pages) - #175 — Cards jump around during refresh (fewer cards per page = less jumping) - #148 — Track main projects independently (prerequisite for projects overview showing empty projects) ## Related issues (features that fit within the hierarchy) - #47 — Workflow-defined actions (within worktree detail page) - #200 — Artifact ordering (within artifact list on worktree detail page) - #75 — Markdown rendering (within artifact detail views) - #152 — Mermaid diagram rendering (within artifact detail views) - #100 — Incorrect phase count (within worktree detail progress section)

mprihoda commented

2026-04-15 08:45:21 +00:00

(Migrated from github.com)

Superseded by #343 (Dashboard as Primary Control Plane). The hierarchical navigation redesign is covered by #350 (sidebar navigation).