c7c3a25457
We completed the 'Deep Metadata Etch' today, transforming our Beads issues from simple trackers into a permanent narrative of our collaboration. Triumphs: - Exhaustively updated all epic and sub-task descriptions with technical implementation reports and 'Execution Tales'. - Finalized the 'bb' agent CLI skill (bb.ps1), providing a reliable, path-safe interface for cross-agent communication. - Published ADR-001 and RFC-001 to document our coordination protocols. - Fixed the 'missing closed issues' bug across all pages by enforcing --all and --limit 0 in read-issues.ts. Raw Honest Moment: We realized our 'Memory Bank' was initially too shallow. We went back and re-wrote descriptions for over 15 beads to ensure that future AI agents (and human maintainers) understand not just *what* we built, but *why* we chose specific architectural trade-offs. This commit represents our commitment to documentation as a first-class citizen of engineering.
53 lines
No EOL
2 KiB
Markdown
53 lines
No EOL
2 KiB
Markdown
# Implementation Plan: Timeline UI (bb-xhm.3)
|
|
|
|
## Approach
|
|
We will build a dedicated `/timeline` page that consumes `ActivityEvent` streams via SSE and displays them in a grouped, filterable feed. To support data persistence across page refreshes (without DB), we will implement an in-memory ring buffer for events on the server.
|
|
|
|
## Steps
|
|
|
|
1. **Backend History Buffer** (20 min)
|
|
- Modify `src/lib/realtime.ts` to keep last 100 events in `ActivityEventBus`.
|
|
- Create `src/app/api/activity/route.ts` to serve this history.
|
|
|
|
2. **Scaffold Timeline Route & Store** (15 min)
|
|
- Create `src/app/timeline/page.tsx`.
|
|
- Create `src/components/timeline/timeline-store.ts` (Zustand).
|
|
- Create `src/components/timeline/timeline-layout.tsx`.
|
|
|
|
3. **Implement Event Card Components** (30 min)
|
|
- Create `src/components/timeline/event-card.tsx`: Polymorphic component.
|
|
- Styles: Aero Chrome "glass" panels, status glows, diff formatting.
|
|
- **Variants:**
|
|
- `StatusEvent`: Status changes with color-coded badges.
|
|
- `CommentEvent`: Text bubble style.
|
|
- `DiffEvent`: Field-level changes.
|
|
- `LifecycleEvent`: Created/Closed/Reopened.
|
|
|
|
4. **Implement Feed Container & Grouping** (20 min)
|
|
- Create `src/components/timeline/timeline-feed.tsx`.
|
|
- Logic: Group `ActivityEvent[]` by `YYYY-MM-DD`.
|
|
- Visual: Sticky date headers.
|
|
|
|
5. **Wire Real-time SSE & Filters** (20 min)
|
|
- Fetch initial history from `/api/activity`.
|
|
- Connect `useTimelineStore` to `activityEventBus` (via SSE).
|
|
- Implement `TimelineControls`.
|
|
|
|
6. **Integration & Polish** (15 min)
|
|
- Add navigation links to Kanban (`?focus=bead-id`).
|
|
- Verify responsive layout.
|
|
|
|
7. **Testing** (20 min)
|
|
- Unit tests for store/grouping.
|
|
- Component tests for cards.
|
|
- Integration test for history API.
|
|
|
|
## Timeline
|
|
| Phase | Duration |
|
|
|-------|----------|
|
|
| Backend | 20 min |
|
|
| Scaffolding | 15 min |
|
|
| UI Components | 50 min |
|
|
| Integration | 35 min |
|
|
| Testing | 20 min |
|
|
| **Total** | **2.5 hours** | |