epic: Homepage Redesign

[Mbeaulne]

Summary

Redesign the homepage to surface useful aggregate information at a glance and provide a more complete browsing experience for runs, pipelines, and components.

Layout Vision

┌──────────────────────────────────────────────────────┐
│  STATS ROW                                           │
│  [22 Runs] [10 Succeeded] [10 Failed] [2 Cancelled] │
│  ████████████████████████░░░░░░░░░▓▓▓  (status bar) │
│  [25 Pipelines]                                      │
├──────────────────────────────────────────────────────┤
│  RECENTLY OPENED                                     │
│  [Pipeline A] [Run #42] [Pipeline B] [Run #39]      │
├──────────────────────────────────────────────────────┤
│  FAVORITES                                           │
│  ★ Pipeline X   ★ Run #17   ★ Pipeline Y            │
├──────────────────────────────────────────────────────┤
│  [Runs]  [Pipelines]  [Components]     ← tabs       │
│  ┌────────────────────────────────────────────────┐  │
│  │ Filtered list based on active tab + any stat   │  │
│  │ card clicked above                             │  │
│  └────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────┘

Stats cards respond to the active filters — if you filter by date range + "created by me", the cards update to show counts for that filtered view. Clicking a stat card (e.g., "10 Failed") applies that status filter to the Runs tab.

Issues

Backend (TangleML/tangle)

• feat: [BE] Add pipeline run stats endpoint with caching tangle#177 — Stats endpoint: GET /api/pipeline_runs/stats with filter_query support and caching
• feat: [BE] Add pagination to published components endpoint tangle#179 — Components pagination: Add pagination to published components endpoint
• feat: [BE] Add filter_query support to published components endpoint tangle#180 — Component filtering: Add filter_query support to published components endpoint
• feat: [BE] Add page_size param to pipeline runs list endpoint tangle#188 — page_size param: Add page_size query param to GET /api/pipeline_runs/

Frontend (TangleML/tangle-ui)

• feat: [FE] Add /dashboard route with beta flag #1965 — Dashboard route: New /dashboard route with beta flag to enable/disable
• feat: [FE] Add stats cards and status bar to homepage #1960 — Stats cards & status bar: Clickable stats cards + horizontal status bar (depends on tangle#177)
• feat: [FE] Add recently opened section to homepage #1961 — Recently opened: Last 4 opened pipelines/runs as cards
• feat: [FE] Add favorites section to homepage #1962 — Favorites: Star/favorite pipelines and runs, dedicated homepage section
• feat: [FE] Add tabbed Runs/Pipelines/Components list to homepage #1963 — Tabbed list: Replace 2-tab layout with Runs / Pipelines / Components tabs
• feat: [FE] Move component search filtering to backend #1966 — Component search backend integration: Move client-side component filtering to use backend query
  params (depends on tangle#180)
• Dashboard runs: use page_size param once backend supports it #2016 — Use page_size in RunSection: Pass page_size to the API once backend supports it (depends on tangle#188)

Related existing issues

These pre-existing issues overlap with or feed into this epic:

Issue	Relationship
TangleML/tangle#38 — Stats API for execution node states	Superseded by TangleML/tangle#177
TangleML/tangle#39 — Stats API for container execution statuses	Superseded by TangleML/tangle#177
TangleML/tangle#24 — Search pipeline runs by name substring	Already implemented via filter_query (value_contains on system/pipeline_run.name), used by TangleML/tangle#177
TangleML/tangle#44 — Run list search by run name	Same as TangleML/tangle#24
TangleML/tangle#59 — PublishedComponents search by publisher annotation	Related to TangleML/tangle#180 (same endpoint, different scope)
TangleML/tangle#83 — Include annotations in pipeline runs list response	Useful for enriching the Runs tab in #1963
TangleML/tangle#87 — Add has_ended to pipeline runs list response	Useful for run status display in #1963

Dependency Graph & Suggested Order

#1965 (Dashboard route + beta flag)  ← do this first
        │
tangle#177 (Backend stats) ──→ #1960 (Stats cards UI)
                                        │
#1961 (Recently opened)                │  ← independent
#1962 (Favorites)                      │  ← independent
                                        ▼
tangle#179 (Backend pagination) ──→ #1963 (Tabbed list + components tab)
tangle#180 (Backend filtering) ──→ #1966 (FE component search) ──→ #1963

Recommended order:

1. feat: [FE] Add /dashboard route with beta flag #1965 (dashboard route scaffold — unblocks all frontend work)
2. tangle#177 → feat: [FE] Add stats cards and status bar to homepage #1960 (stats pipeline — highest impact)
3. feat: [FE] Add recently opened section to homepage #1961 + feat: [FE] Add favorites section to homepage #1962 (recently opened + favorites — independent, can parallel)
4. tangle#179 + tangle#180 → feat: [FE] Move component search filtering to backend #1966 → feat: [FE] Add tabbed Runs/Pipelines/Components list to homepage #1963 (components tab with backend search + pagination)

[yuechao-qin]

What does 25 pipelines in the stats mean? Total pipelines the user has created locally?

[Mbeaulne]

What does 25 pipelines in the stats mean? Total pipelines the user has created locally?

Correct. I won't need anything from the backend, unless we officially move pipelines to the backend.

[yuechao-qin]

@Mbeaulne I have reviewed all three of your backend requests and I believe they are all a good candidate for Experimental APIs feature. I still have to 1) create a design doc for this API and review it with the team, 2) implement it and then 3) roll out your backend features iteratively.

I'm thinking 1 -> 2 will need about mid April to complete. Then 3 will by days/(a few weeks) afterwards. Does the timeline sound fine to you? For 3, what is the priority for the 3 items so I know the order to roll them out in?

Adding this link for reference on the ultimate picture/goal
https://oasis.shopify.io/dashboard?tophat_location=03-25-adds_new_dashboard_view%2Fe2084b7 (enable beta flag Dashboard)

[Mbeaulne]

New issues added: page_size support for runs pagination

The Dashboard's dynamic row count currently over-fetches from the backend and slices client-side. Two new issues to track the proper fix:

Backend (TangleML/tangle)

• feat: [BE] Add page_size param to pipeline runs list endpoint tangle#188 — page_size param: Add page_size query param to GET /api/pipeline_runs/

Frontend (TangleML/tangle-ui)

• Dashboard runs: use page_size param once backend supports it #2016 — Use page_size in RunSection: Pass page_size to the API once backend supports it (depends on tangle#188)