# Chunk 5: Build Status

**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)  
**Previous:** [Chunk 4: Recent Activity](./chunk-4-recent-activity.md)  
**Next:** [Chunk 6: Partition Pages](./chunk-6-partition-pages.md)

## Overview

Implement the core operational build request status page with real-time updates, job/partition status visualization, and execution logs.

## Scope

### In Scope
- Build request status display with real-time updates
- Job and partition status visualization
- Execution timeline and logs from build events
- Delegation indicators for shared builds
- Auto-refresh with Page Visibility API
- Expandable job details

### Out of Scope
- Complex graph visualizations (simple status indicators)
- Historical build comparisons
- Advanced filtering of events
- User interactions beyond viewing

## Technical Approach

### Data Sources
From Build Graph Service API `/api/v1/builds/:id`:
- Build request metadata (ID, status, timestamps)
- Requested partitions
- Build events with job execution details
- Delegation information

### Component Structure
```typescript
const BuildStatus = {
  oninit: (vnode) => {
    this.buildId = vnode.attrs.id;
    this.build = null;
    this.pollInterval = null;
    this.loadBuild();
    this.startPolling();
  },
  
  onremove: () => {
    this.stopPolling();
  },
  
  view: () => [
    m('.build-header', [
      m('h1', `Build ${this.buildId}`),
      m('.build-meta', [
        m('.badge', this.build?.status),
        m('.timestamp', formatTime(this.build?.created_at)),
        m('.partitions', `${this.build?.requested_partitions.length} partitions`),
      ])
    ]),
    
    m('.build-content', [
      m('.partition-status', [
        m('h2', 'Partition Status'),
        m('.partition-grid', 
          this.build?.requested_partitions.map(partition =>
            m('.partition-card', [
              m('.partition-ref', partition),
              m('.partition-status', this.getPartitionStatus(partition)),
              m('.partition-job', this.getPartitionJob(partition)),
            ])
          )
        )
      ]),
      
      m('.execution-timeline', [
        m('h2', 'Execution Timeline'),
        m('.timeline', this.build?.events.map(event =>
          m('.timeline-item', [
            m('.timestamp', formatTime(event.timestamp)),
            m('.event-type', event.event_type),
            m('.message', event.message),
            this.isJobEvent(event) ? m('.expandable-logs', [
              m('button', { onclick: () => this.toggleLogs(event) }, 'Show Logs'),
              this.logsExpanded[event.event_id] ? 
                m('.logs', this.formatJobLogs(event)) : null
            ]) : null
          ])
        ))
      ])
    ])
  ]
};
```

### Real-time Updates
- Poll every 2 seconds when build is active
- Poll every 10 seconds when build is completed
- Stop polling when tab is not visible
- Visual indicators for live updates

### Status Visualization
- Color-coded status badges (green/yellow/red)
- Progress indicators for running builds
- Delegation indicators with links to other builds
- Timeline visualization for build events

## Implementation Strategy

1. **Create Data Layer**
   - API integration for build status
   - Event parsing and categorization
   - Polling manager with different intervals

2. **Build Status Components**
   - Build header with metadata
   - Partition status grid
   - Execution timeline
   - Expandable log sections

3. **Real-time Updates**
   - Intelligent polling based on build state
   - Page Visibility API integration
   - Loading states and error handling

4. **Status Visualization**
   - Color-coded status indicators
   - Progress bars for active builds
   - Timeline layout for events
   - Delegation indicators

## Deliverables

- [ ] Build request status page with real-time updates
- [ ] Partition status grid with visual indicators
- [ ] Execution timeline with build events
- [ ] Expandable job logs and details
- [ ] Auto-refresh with visibility detection
- [ ] Delegation indicators and links

## Success Criteria

- Real-time updates show build progress accurately
- All partition statuses are clearly displayed
- Job logs are accessible and readable
- Polling behaves correctly based on build state
- Delegation to other builds is clearly indicated
- Page is responsive and performs well

## Testing

- Test with running builds to verify real-time updates
- Verify partition status changes are reflected
- Test job log expansion and readability
- Validate polling behavior with tab visibility
- Test with delegated builds
- Verify error handling with invalid build IDs
- Check performance with large build requests