viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
beadboard/docs/plans/2026-02-13-timeline-ui-implementation.md
zenchantlive c7c3a25457 docs(beads): etch project history into memory bank and finalize skill-bb 
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.
2026-02-14 00:21:25 -08:00

2 KiB
Raw Blame History

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