Plan the Components for the Pipeline Dashboard Page

Problem Description

The product team has signed off on a new Pipeline Dashboard page for the platform. This page will give users an at-a-glance view of all their data pipelines: their current status, recent run history, and quick-access actions like triggering a run or viewing logs. The engineering team wants to move quickly but needs a solid component architecture before anyone writes code — bad decisions made at the planning stage (duplicated logic, incorrect reuse, tangled dependencies) are expensive to fix once implementation is underway.

You have been given a design specification (below) describing the layout and key UI elements of the page. The codebase already has some shared components in src/components/ that may be relevant. Your job is to analyze the design and produce a structured component breakdown that the engineering team can use as a build guide.

The plan should identify which existing components can be reused or extended, classify every new component that needs to be created, show the component hierarchy, and recommend a build order. The team will use this document to divide work among developers.

Output Specification

Write the component plan to a file named component-plan.md. The document should be detailed enough that a developer who hasn't seen the design can understand what to build and in what order.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/design-spec.md ===============

Pipeline Dashboard — Design Specification

Page URL

/workspaces/:workspaceId/pipelines

Layout Overview

The page is a full-width dashboard with a top toolbar and a scrollable content area. The content area contains two sections stacked vertically:

1. Summary Bar — A horizontal row of 4 summary stat cards at the top. Each card shows a numeric count and a label (e.g., "12 Active", "3 Failed", "47 Completed", "2 Paused"). Each card has a distinct status color accent on its left border.

2. Pipeline List — Below the summary bar is a vertically stacked list of pipeline rows. Each row represents one pipeline.

Toolbar

The toolbar spans the full page width and contains:

• Page title: "Pipelines" (large heading)
• A search input on the right side for filtering pipelines by name
• A "New Pipeline" button next to the search input

The toolbar has a bottom border separating it from the content area.

Summary Stat Cards

Each card:

• White/subtle background with a colored left border (color depends on status type)
• Large number (heading size) showing the count
• Small label text below showing the status name
• Hoverable — slight background change on hover
• Fixed width, cards sit in a horizontal row with equal spacing

Pipeline Row

Each row in the pipeline list shows:

• Pipeline name (bold, prominent)
• Status badge (e.g., "Active", "Failed", "Pending") — colored based on status
• Last run time (relative timestamp, e.g., "3 hours ago")
• Duration of last run (e.g., "2m 34s")
• A "Run Now" action button (outline style)
• A "View Logs" action link

Rows have a bottom border, subtle hover background, and are clickable to navigate to a detail page.

Empty State

If there are no pipelines, the list area is replaced with a centered empty state showing:

• An icon (abstract graphic)
• "No pipelines yet" heading
• "Create your first pipeline to get started" subtext
• A "New Pipeline" button

Existing Shared Components (already in codebase)

The following components already exist and may be relevant:

• src/components/StatusBadge/StatusBadge.tsx — shows a colored badge for status values (active, pending, failed, paused, completed, unknown)
• src/components/SearchInput/SearchInput.tsx — a styled search input with icon and clear button
• src/components/EmptyState/EmptyState.tsx — generic empty state with icon, heading, subtext, and optional CTA button
• src/components/ui/Provider.tsx — Chakra theme provider with custom semantic tokens