Project, event, and time-away blocks

Present different types of commitment using the shared time axis and appropriate content.

On this page

Purpose and usage

Present different types of commitment using the shared time axis and appropriate content.

Use the actual project/event/time-away components inside AgendaTimeline. Do not approximate them with unrelated cards.

Anatomy

Anatomy
Part	Contract
Project block	Space, project, time, current task, and supporting task context.
Event block	Event title and relevant project/detail text.
Time away	Distinct treatment and reason for unavailable time.
Editing controls	Expand, remove, drag and resize affordances where available.

Variants and configuration

Variants and configuration
Configuration	Behavior
Density	Compact and thin layouts use less content.
prominent	Emphasizes a focused project when no tasks have been completed today.
readOnly	Disables mutation for past days.
Identity	Project fill and border follow the chosen color.

State coverage

State coverage
State	Implemented behavior
Normal	Full next-action context.
Short duration	Thin layout for very short entries.
Completed task	Task leaves the active group and appears as completed.
Filtered	Relevant entry types follow AgendaFilterProvider visibility.

Interaction and responsive behavior

Render a short-duration entry with its supported compact layout rather than hiding time information.
Do not let hidden filters remove the scheduled record.
Keep time-away blocks semantically distinct from unfinished work.

Accessibility contract

Each exposed action needs a name tied to its block.
Task completion uses labeled controls and announcements.
Time and project text should remain available despite color changes.

Known gaps and readiness

Some block task handling is local UI state. Persistence parity with project task completion must be audited before treating every agenda action as production-ready.

Composition example

<InteractiveProjectTimeBlock
  project="Atlas customer portal" area="Product" color="teal"
  time="8:00 – 9:30 AM" top={156} height={234}
  focusedTask="Review the account settings prototype"
  completedTasks={[]} upcomingTasks={[]} />

Source references

Source references
File	Responsibility
app/components/interactive-project-time-block.tsx	Project next-action block
app/components/agenda-time-blocks.tsx	Event, inbox, and time-away blocks
app/components/agenda-project-summary.tsx	Expanded project task summary
app/components/agenda-block-styles.ts	Project color properties