Components
Agenda timeline and time marker
Translate time into a shared spatial layout while keeping the current day and overlapping commitments readable.
On this page
Purpose and usage
Translate time into a shared spatial layout while keeping the current day and overlapping commitments readable.
Use for daily planning and schedule visualization, not a generic sortable list.
Anatomy
| Part | Contract |
|---|---|
| Time axis | 7:00 to 20:00 by default. |
| Scale | 156px per hour. |
| Placed entry | Vertical start and height from time values. |
| Time marker | Current time indicator and initial scroll target. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| Day types | Current, future planning, and locked history. |
| Entry groups | Projects, events, inbox blocks, time away. |
| Overlap | Placement permits at most two simultaneous blocks. |
State coverage
| State | Implemented behavior |
|---|---|
| Loading | Day request pending. |
| Populated | Positioned entries visible. |
| Past | Read-only controls. |
| Moving/resizing | 15-minute snapping with minimum 15-minute duration. |
Interaction and responsive behavior
- Reuse the exported timeline constants so pointer math matches the display.
- Start/end are fractional hours in UI models; server action data uses minutes.
- The placement algorithm checks interval segments and rejects more than two overlapping blocks.
- Do not infer project task persistence from visual completion within a local block.
Accessibility contract
- Time must remain available as text, not only position.
- A pointer-driven block manipulation needs an equivalent nonpointer path.
- The source has polite announcements for changes, but a complete keyboard move/resize model is not established.
Known gaps and readiness
Error/loading/retry patterns are not fully standardized. End-to-end backend scheduling validation and nonpointer parity are outside the isolated capture verification.
Composition example
const top = (start - DEFAULT_AGENDA_START_HOUR)
* DEFAULT_AGENDA_HOUR_HEIGHT;
const height = (end - start)
* DEFAULT_AGENDA_HOUR_HEIGHT;Source references
| File | Responsibility |
|---|---|
| app/components/agenda-timeline.tsx | Time grid and positions |
| app/components/radar-calendar.tsx | Day orchestration, snapping, overlap rules |
| app/components/current-time-marker.tsx | Current time and scroll targeting |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1