ccboard-web 0.9.0

Web frontend for ccboard using Leptos + Axum
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

# ccboard-web

Web frontend for ccboard using Leptos (CSR) + Axum backend.

## Architecture

- **Backend**: Axum server serving API endpoints + HTML shell
- **Frontend**: Leptos CSR app compiled to WASM
- **Router**: Leptos Router for SPA navigation
- **Build**: Trunk for WASM compilation

## Development

### Prerequisites

Install Trunk for WASM builds:

```bash
cargo install trunk
rustup target add wasm32-unknown-unknown
```

### Build WASM

```bash
cd crates/ccboard-web
trunk build --release
```

This generates:
- `dist/index.html` - HTML shell with WASM loader
- `dist/ccboard-web-*.wasm` - Compiled WASM binary
- `dist/ccboard-web-*.js` - WASM bindings

### Run Development Server

Option 1: Trunk dev server (frontend only, mocked API):

```bash
cd crates/ccboard-web
trunk serve
# Opens http://localhost:8080
```

Option 2: Full stack (Axum backend + WASM frontend):

```bash
# Build WASM first
cd crates/ccboard-web && trunk build --release && cd ../..

# Run Axum server
cargo run -- web --port 3333
# Opens http://localhost:3333
```

## Structure

```
ccboard-web/
├── src/
│   ├── app.rs           # Main App component + Router
│   ├── components/      # Reusable UI components
│   │   ├── header.rs
│   │   └── sidebar.rs
│   ├── pages/           # Page components
│   │   ├── dashboard.rs
│   │   ├── sessions.rs
│   │   └── analytics.rs
│   ├── router.rs        # Axum backend routes
│   ├── sse.rs           # Server-Sent Events
│   ├── lib.rs           # Library exports
│   └── main.rs          # WASM entry point
├── index.html           # Trunk template
├── Trunk.toml           # Trunk config
└── static/              # Static assets
```

## Routes

### Frontend (SPA)

- `/` - Dashboard
- `/sessions` - Sessions Explorer
- `/analytics` - Analytics
- `/config` - Config (stub)
- `/history` - History (stub)

### Backend (API)

- `/api/stats` - Stats JSON
- `/api/sessions` - Sessions JSON
- `/api/health` - Health check
- `/api/events` - SSE stream

## Status (W1.1 Complete)

- ✅ Leptos App structure
- ✅ SPA Router with 5 routes
- ✅ Header + Sidebar components
- ✅ Page stubs (Dashboard, Sessions, Analytics)
- ✅ Axum backend serving HTML shell
- ✅ Build configuration (Trunk + Cargo)

## Next Steps (W1.2)

- Fetch `/api/stats` on Dashboard mount
- Display stats cards with real data
- Add loading states + error handling