# Chunk 4: Recent Activity

**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)  
**Previous:** [Chunk 3: Routing Framework](./chunk-3-routing-framework.md)  
**Next:** [Chunk 5: Build Status](./chunk-5-build-status.md)

## Overview

Implement the dashboard home page showing recent build activity and system status with real-time updates via polling.

## Scope

### In Scope
- Recent build requests display
- Active builds count and status
- Recent partition builds
- System health indicators
- Basic polling for real-time updates
- Tailwind + DaisyUI styling

### Out of Scope
- Complex filtering or searching
- Historical data beyond recent activity
- Advanced visualizations
- User preferences/settings

## Technical Approach

### Data Sources
From Build Graph Service API:
- Recent build requests (from event log)
- Active builds count
- Recent partition builds
- System status

### Component Structure
```typescript
const RecentActivity = {
  oninit: () => {
    // Start polling for updates
    this.pollInterval = setInterval(this.loadData, 5000);
    this.loadData();
  },
  
  onremove: () => {
    // Clean up polling
    clearInterval(this.pollInterval);
  },
  
  view: () => [
    m('.dashboard-header', [
      m('h1', 'DataBuild Dashboard'),
      m('.stats', [
        m('.stat-item', `Active Builds: ${this.activeBuilds}`),
        m('.stat-item', `Recent Builds: ${this.recentBuilds.length}`),
      ])
    ]),
    
    m('.dashboard-content', [
      m('.recent-builds', [
        m('h2', 'Recent Build Requests'),
        m('table', this.recentBuilds.map(build => 
          m('tr', [
            m('td', m('a', { href: `/builds/${build.id}` }, build.id)),
            m('td', build.status),
            m('td', formatTime(build.created_at)),
          ])
        ))
      ]),
      
      m('.recent-partitions', [
        m('h2', 'Recent Partition Builds'),
        m('table', this.recentPartitions.map(partition =>
          m('tr', [
            m('td', m('a', { 
              href: `/partitions/${encodePartitionRef(partition.ref)}` 
            }, partition.ref)),
            m('td', partition.status),
            m('td', formatTime(partition.updated_at)),
          ])
        ))
      ])
    ])
  ]
};
```

### Polling Strategy
- Poll every 5 seconds for updates
- Use Page Visibility API to pause when tab inactive
- Show loading states during updates
- Handle connection errors gracefully

### Styling
- Use DaisyUI stat components for metrics
- Table layout for recent items
- Responsive grid for dashboard sections
- Status badges for build states

## Implementation Strategy

1. **Create Data Layer**
   - API calls for recent activity data
   - Polling manager with visibility detection
   - Error handling and retries

2. **Build UI Components**
   - Dashboard header with metrics
   - Recent builds table
   - Recent partitions table
   - Loading and error states

3. **Implement Real-time Updates**
   - Set up polling with proper cleanup
   - Page Visibility API integration
   - Optimistic updates for better UX

4. **Add Styling**
   - DaisyUI components for consistent look
   - Responsive layout
   - Status indicators and badges

## Deliverables

- [ ] Dashboard home page with recent activity
- [ ] Real-time polling with visibility detection
- [ ] Recent build requests table with links
- [ ] Recent partition builds display
- [ ] System metrics and health indicators
- [ ] Responsive styling with DaisyUI

## Success Criteria

- Page loads and displays recent activity
- Real-time updates work correctly
- Links navigate to appropriate detail pages
- Polling stops when tab is inactive
- Layout is responsive and well-styled
- Error states are handled gracefully

## Testing

- Verify recent builds and partitions display
- Test real-time updates with running builds
- Validate links to build and partition detail pages
- Check polling behavior with tab visibility changes
- Test error handling with service unavailable
- Verify responsive layout on different screen sizes