# Chunk 3: Routing Framework

**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)  
**Previous:** [Chunk 2: Hello World App](./chunk-2-hello-world-app.md)  
**Next:** [Chunk 4: Recent Activity](./chunk-4-recent-activity.md)

## Overview

Implement multi-page routing using Mithril's routing system, create the base layout with navigation, and handle URL encoding/decoding for partition references.

## Scope

### In Scope
- Mithril routing for all planned dashboard pages
- Base layout with navigation header
- URL encoding/decoding for partition references
- Initial page scaffolding for all routes
- Basic Tailwind + DaisyUI styling setup

### Out of Scope
- Full page implementations (handled in subsequent chunks)
- Complex state management
- Advanced styling (minimal styling only)

## Technical Approach

### Routing Structure
```typescript
const routes = {
  '/': RecentActivity,
  '/builds/:id': BuildStatus,
  '/partitions': PartitionsList,
  '/partitions/:base64_ref': PartitionStatus,
  '/jobs': JobsList,
  '/jobs/:label': JobMetrics,
  '/analyze': GraphAnalysis,
};
```

### URL Encoding Utilities
```typescript
// Partition reference URL encoding
function encodePartitionRef(ref: string): string {
  return btoa(ref).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}

function decodePartitionRef(encoded: string): string {
  // Add padding if needed
  const padded = encoded.replace(/-/g, '+').replace(/_/g, '/');
  return atob(padded);
}
```

### Base Layout
```typescript
const Layout = {
  view: (vnode: any) => [
    m('header.navbar', [
      m('nav', [
        m('a[href="/"]', 'Dashboard'),
        m('a[href="/partitions"]', 'Partitions'),
        m('a[href="/jobs"]', 'Jobs'),
        m('a[href="/analyze"]', 'Analyze'),
      ])
    ]),
    m('main', vnode.children)
  ]
};
```

### Page Scaffolding
Create placeholder components for each route:
- `RecentActivity` - Dashboard home
- `BuildStatus` - Build request status
- `PartitionsList` - Partition listing
- `PartitionStatus` - Individual partition status
- `JobsList` - Jobs listing
- `JobMetrics` - Job metrics and history
- `GraphAnalysis` - Graph analysis tool

## Implementation Strategy

1. **Set Up Routing**
   - Configure Mithril routing
   - Create route definitions
   - Implement navigation handlers

2. **Create Base Layout**
   - Navigation header with links
   - Main content area
   - Basic responsive design

3. **Implement URL Encoding**
   - Partition reference encoding/decoding
   - URL parameter handling
   - Error handling for invalid refs

4. **Add Tailwind + DaisyUI**
   - Configure build system for CSS processing
   - Add basic styling to layout
   - Set up design tokens

5. **Create Page Scaffolds**
   - Placeholder components for each route
   - Basic page structure
   - Navigation between pages

## Deliverables

- [ ] Working multi-page routing system
- [ ] Base layout with navigation
- [ ] URL encoding/decoding for partition refs
- [ ] Scaffold pages for all planned routes
- [ ] Basic Tailwind + DaisyUI styling setup

## Success Criteria

- All routes load without errors
- Navigation between pages works correctly
- Partition reference encoding/decoding handles edge cases
- Layout is responsive and functional
- Ready for page implementations in subsequent chunks

## Testing

- Navigate to all routes and verify they load
- Test partition reference encoding/decoding with various inputs
- Verify browser back/forward navigation works
- Test responsive layout on different screen sizes
- Validate URL parameter handling