Dashboard

One-Liner

The Dashboard provides an at-a-glance overview of your project's workflow status, statistics, and recent activity through an intuitive widget-based interface.

---

Pain Points Solved

Pain Point	Current State	Dashboard Solution
No project visibility	Can't see overall project health	Project info banner with tech stack and development index
Scattered metrics	Stats across multiple locations	Centralized statistics with sparklines
Unknown workflow status	Hard to track session progress	Pie chart with status breakdown
Lost in recent work	No quick access to active sessions	Session carousel with task details
Indexing status unclear	Don't know if code is indexed	Real-time index status indicator

---

Overview

Location: ccw/frontend/src/pages/HomePage.tsx

Purpose: Dashboard home page providing project overview, statistics, workflow status, and recent activity monitoring.

Access: Navigation → Dashboard (default home page at /)

Layout:

+--------------------------------------------------------------------------+
|  Dashboard Header (title + refresh)                                      |
+--------------------------------------------------------------------------+
|  WorkflowTaskWidget (Combined Card)                                      |
|  +--------------------------------------------------------------------+  |
|  | Project Info Banner (expandable)                                   |  |
|  | - Project name, description, tech stack badges                      |  |
|  | - Quick stats (features, bugfixes, enhancements)                    |  |
|  | - Index status indicator                                           |  |
|  +----------------------------------+---------------------------------+  |
|  | Stats Section | Workflow Status |  Task Details (Carousel)     |  |
|  | - 6 mini cards | - Pie chart     | - Session nav                 |  |
|  | - Sparklines   | - Legend       | - Task list (2 columns)       |  |
|  +----------------+-----------------+-------------------------------+  |
+--------------------------------------------------------------------------+
|  RecentSessionsWidget                                                     |
|  +--------------------------------------------------------------------+  |
|  | Tabs: All Tasks | Workflow | Lite Tasks                           |  |
|  | +---------------+---------------+-------------------------------+ |  |
|  | | Task cards with status, progress, tags, time                     | |  |
|  | +---------------------------------------------------------------+ |  |
+--------------------------------------------------------------------------+

---

Live Demo

DashboardOverview

加载中...

demo MiniStatCards #MiniStatCards.tsx :::

Project Info Banner Demo

ProjectInfoBanner

加载中...

demo SessionCarousel #SessionCarousel.tsx :::

---

Accessibility

• Keyboard Navigation:

  • Tab - Navigate through interactive elements
  • Enter/Space - Activate buttons and cards
  • Arrow keys - Navigate carousel sessions

• ARIA Attributes:

  • aria-label on navigation buttons
  • aria-expanded on expandable sections
  • aria-live regions for real-time updates

• Screen Reader Support:

  • All charts have text descriptions
  • Status indicators include text labels
  • Navigation is announced properly

---

Related Links

• Sessions - View and manage all sessions
• Terminal Dashboard - Terminal-first monitoring interface
• Queue - Issue execution queue management
• Memory - Persistent memory management
• Settings - Global application settings