Ely-GPUI-Components/tasks/ch21-30.md

# Chapters 21–30

## T21a Documents · Editing — `src/documents`

- [x] RichTextEditor
- [x] MarkdownEditor — visual, source, split
- [x] BlockEditor
- [x] Block types — paragraph, heading, list, todo, quote, code, divider, table, image, video, embed, math, callout, toggle, columns, synced; video and embed open as cards the app plays or shows
- [x] BlockHandle → the block editor's handle, a `menus::OverflowMenu` that drags its block
- [x] SlashMenu → `/` in `BlockEditor`
- [x] FloatingFormatToolbar → `overlays::FloatingToolbar`
- [x] FixedFormatToolbar
- [x] LinkEditor
- [x] MentionMenu → `@` in `RichTextEditor` and `BlockEditor`; `forms::MentionInput` in a field
- [x] EmojiAutocomplete → a colon and two letters in `RichTextEditor` and `BlockEditor`
- [x] TableEditor → the block editor's table: rows and columns added and removed, cells merged across
- [x] ImageEditorBlock → the block editor's picture: resized by its edges, aligned, captioned
- [x] MathEditor / LatexBlock → the block editor's math block over `typography::Latex`
- [x] MermaidBlock / DiagramBlock — host renders the SVG → `BlockEditor::diagrams`
- [x] CodeBlockEditor → the block editor's code block
- [x] TodoItem / Checklist
- [x] PlaceholderText → each kind's hint in `BlockEditor`
- [x] WordCount / CharacterCount → `WordCount`, with `limit` for characters
- [x] ReadingTime

## T21b Documents · Reading

- [x] MarkdownRenderer
- [x] DocumentViewer — host pages
- [x] PDFViewer — host pages; thumbnails, search, zoom, notes → `documents::DocumentViewer` with `thumbnails`, `find` (an `editor::FindWidget`) and `notes`
- [x] EpubReader — host chapters
- [x] OfficePreview — host pages → `documents::DocumentViewer`
- [x] PageThumbnailList
- [x] TableOfContents → `navigation::TableOfContents`; `MarkdownRenderer::sections` and `outline` feed it
- [x] DocumentOutline → `navigation::TableOfContents`
- [x] Footnote
- [x] Glossary / TooltipTerm
- [x] ReadingProgress
- [x] FocusMode / ZenMode → `documents::ZenMode`
- [x] PrintPreview — host pages

## T21c Documents · Knowledge

- [x] PageTree → `lists::Tree`, a page's emoji leading its label
- [x] Backlinks
- [x] GraphView → `charts::NetworkGraph`
- [x] PageCover / PageIcon
- [x] PageProperties → `data_display::PropertyGrid`
- [x] DatabaseView — table, board, gallery, calendar, timeline → lands with Project (T31): its board is the KanbanBoard, its calendar the CalendarMonthView (T30)
- [x] TemplatePicker
- [x] TrashBin
- [x] VersionHistory
- [x] PageHistoryDiff
- [x] Favorites / Pinned → `documents::Favorites`

## T22 Collaboration — `src/collab`

- [x] PresenceAvatars
- [x] RemoteCursor → over a `forms::TextInput`, placed where its offset sits as the field paints
- [x] RemoteSelection → over a `forms::TextInput`, from `TextInput::bounds_for_range`
- [x] CommentThread
- [x] CommentBubble / CommentMarker → `collab::CommentMarker`, its thread in an `overlays::Popover`
- [x] CommentSidebar
- [x] Reply / ReactionPicker
- [x] Reactions
- [x] Annotation / Highlight → `collab::AnnotatedText`; a plain mark is `typography::Highlight`
- [x] SuggestionMode → edits become suggestions through `collab::suggested`
- [x] TrackChanges
- [x] ShareDialog → with `collab::LinkAccess` for who the link lets in
- [x] PermissionSelect
- [x] InviteInput → a `forms::TagInput` that checks each address
- [x] AccessList
- [x] ActivityLog → `data_display::ActivityFeed`
- [x] FollowMode
- [x] LiveIndicator

## T23a AI Chat · Messages — `src/chat`

- [x] ChatContainer
- [x] MessageList — virtualized, stick to bottom, new-message hint
- [x] MessageBubble — user, assistant, system, error
- [x] MessageAvatar
- [x] MessageHeader
- [x] MessageFooter
- [x] StreamingText
- [x] StreamingMarkdown
- [x] StreamingCursor
- [x] CodeBlock — language, copy, download, run, fold, apply
- [x] MathBlock → `typography::Latex`
- [x] TableBlock → `documents::MarkdownRenderer`
- [x] MermaidRenderer → the host draws the SVG; `chat::ImageMessage` shows it
- [x] ImageMessage / ImageGrid
- [x] FileMessage
- [x] AudioMessage
- [x] VideoMessage — host frames
- [x] LinkPreviewCard
- [x] QuoteReply
- [x] MessageActions
- [x] MessageEditor
- [x] BranchNavigator
- [x] RegenerateButton → `chat::regenerate_button`
- [x] StopGeneratingButton → `chat::stop_button`
- [x] ContinueButton → `chat::continue_button`
- [x] ErrorMessage / RetryMessage → `chat::ErrorMessage`, over `feedback::Alert`
- [x] RateLimitNotice
- [x] FeedbackForm
- [x] ScrollToBottomButton
- [x] DateSeparator
- [x] ThinkingBlock / ReasoningPanel → `chat::ThinkingBlock`
- [x] ThinkingIndicator
- [x] ThinkingDuration

## T23b AI Chat · Citations

- [x] CitationBadge / InlineCitation → `chat::CitationBadge`, set after the words it cites
- [x] SourceCard
- [x] SourceList / SourcesPanel → `chat::SourceList`
- [x] SearchProgress
- [x] WebResultCard
- [x] DocumentChunkPreview

## T23c AI Chat · Input

- [x] PromptInput / Composer → `chat::PromptInput`
- [x] AttachmentButton
- [x] AttachmentChip / AttachmentPreview → `chat::AttachmentChip`, a picture's thumbnail or a file's icon
- [x] PasteImagePreview → a pasted picture as an `AttachmentChip`
- [x] DragDropOverlay
- [x] VoiceInputButton
- [x] VoiceWaveform / RecordingIndicator → `chat::VoiceWaveform`, a red dot and the time with the bars
- [x] SlashCommandMenu → `/` at the start of `chat::PromptInput`, over `forms::Suggestions`
- [x] PromptTemplateMenu → `menus::DropdownMenu` of saved prompts
- [x] ContextMentionMenu → `@` in `chat::PromptInput`
- [x] ContextChips
- [x] ModelSelector → `forms::Select`, a note on each model
- [x] ModeSelector → `buttons::SegmentedControl`
- [x] ToolToggleMenu → `menus::DropdownMenu` with check rows
- [x] TemperatureSlider / ParameterPanel → `chat::ParameterPanel`
- [x] SystemPromptEditor
- [x] TokenCounter
- [x] ContextWindowMeter → `data_display::UsageBar`
- [x] CostEstimator
- [x] SendButton
- [x] InputHint

## T23d AI Chat · Conversations

- [x] ConversationList
- [x] ConversationItem
- [x] ConversationSearch → `forms::SearchInput` over `chat::ConversationList::query`
- [x] NewChatButton → `chat::new_chat_button`, a `buttons::Button`
- [x] FolderList / ProjectList → `chat::ProjectList`
- [x] ProjectKnowledgePanel
- [x] SharedConversationView
- [x] ConversationExport

## T23e AI Chat · Welcome

- [x] WelcomeScreen / Greeting → `chat::WelcomeScreen`, a greeting for the hour
- [x] SuggestionChips / StarterPrompts → `chat::SuggestionChips`
- [x] PromptLibrary → `documents::TemplatePicker` over saved prompts
- [x] FollowUpSuggestions
- [x] CapabilityCards

## T24a Agent · Tool calls — `src/agent`

- [x] ToolCallCard
- [x] ToolCallGroup
- [x] ToolApprovalDialog
- [x] PermissionPrompt

## T24b Agent · Progress

- [x] AgentStepList / TaskTimeline → `agent::AgentStepList`, over `data_display::Timeline`
- [x] AgentPlan / TodoList → `agent::AgentPlan`, marks that pop in as items finish
- [x] AgentStatus
- [x] AgentProgress
- [x] SubAgentTree → `lists::Tree`, a node per agent with its state as note and tone

## T24c Agent · Changes

- [x] FileChangeCard
- [x] MultiFileDiff Review → `agent::MultiFileDiffReview`, verdicts as `collab::Decision`
- [x] CommandExecutionCard → `terminal::CommandBlock`

## T24d Agent · Previews

- [x] BrowserPreview / ScreenshotStream — host frames → `agent::BrowserPreview`, the frames so far along its foot
- [x] ComputerUseViewer — host frames
- [x] ArtifactPanel
- [x] ArtifactVersionSwitcher → `chat::BranchNavigator`, in `agent::ArtifactPanel`
- [x] LivePreview — host content

## T24e Agent · Environment

- [x] SandboxStatus
- [x] MCPServerList / ConnectorList → `agent::McpServerList`
- [x] ToolRegistry Panel → `agent::ToolRegistry`
- [x] MemoryPanel
- [x] CheckpointList / Rewind → `agent::CheckpointList`, Rewind on each point but the current

## T24f Agent · Control and cost

- [x] InterruptButton → `chat::stop_button`
- [x] HumanInputRequest
- [x] TokenUsageChart → `charts::BarChart` (stacked)
- [x] CostBreakdown
- [x] TraceViewer → `debug::TimelineProfiler` (a track per depth)
- [x] EvalResultTable → `tables::DataTable` (Tag and Progress cells)

## T25a Generative · Prompt and settings — `src/generative`

- [x] ImageGenerationPanel → `forms::Form` of the fields below; Cmd-Enter generates
- [x] PromptEnhancer
- [x] NegativePromptInput → `forms::TagInput`
- [x] StylePresetPicker
- [x] SeedInput
- [x] AspectRatioPicker

## T25b Generative · Queue and results

- [x] GenerationQueue
- [x] GenerationGrid
- [x] VariationPicker
- [x] ImageCompare → `data_display::BeforeAfter`
- [x] ABCompareView

## T25c Generative · Canvas

- [x] InpaintCanvas
- [x] MaskBrush

## T25d Generative · Sound and motion

- [x] AudioGenerationPlayer
- [x] VideoGenerationTimeline
- [x] TTSVoicePicker

## T25e Generative · Models

- [x] ModelCard
- [x] ModelDownloadManager
- [x] ModelStatus
- [x] HardwareMonitor
- [x] FineTuneJobCard

## T25f Generative · Data and prompts

- [x] DatasetViewer → `tables::DataTable`, with row detail
- [x] EmbeddingVisualizer — 2D, 3D projection
- [x] PromptPlayground
- [x] PromptDiff / PromptVersionHistory

## T26a Media · Images — `src/media`

- [x] ImageViewer — zoom, pan, rotate, fit
- [x] ImageThumbnail
- [x] Lightbox / Gallery Viewer → `overlays::Lightbox`

## T26b Media · Crop and annotate

- [x] ImageCropper — also T06e ImageUpload
- [x] ImageAnnotator

## T26c Media · Video

- [x] VideoPlayer — host frames
- [x] VideoTimeline / Scrubber
- [x] VideoThumbnailStrip
- [x] SubtitleEditor

## T26d Media · Audio and controls

- [x] AudioPlayer — host playback
- [x] AudioWaveform
- [x] AudioSpectrum / Visualizer
- [x] VolumeControl
- [x] PlaybackSpeedControl
- [x] MediaControls
- [x] Playlist

## T26e Media · Capture and devices

- [x] ScreenRecorderControls
- [x] CameraPreview — host frames
- [x] MicLevelMeter
- [x] DeviceSelector
- [x] 3DModelViewer — host frames, orbit input

## T27a Files · Items — `src/files`

- [x] FileIcon — one map from name to icon, in `primitives`
- [x] FileItem
- [x] FileList → `lists::DirectoryListing`
- [x] FileGrid

## T27b Files · Explorer

- [x] FileExplorer — list, icons, columns
- [x] FileBreadcrumb / PathBar → `navigation::Breadcrumb`
- [x] FolderTree → `lists::FileTree`
- [x] FileContextMenu → `menus::ContextMenu`
- [x] RenameInline → `forms::InlineEdit`
- [x] DragDropFiles → `forms::DropZone`

## T27c Files · Find and look

- [x] FilePreview / QuickLook
- [x] RecentFiles
- [x] Favorites / Bookmarks → `documents::Favorites`
- [x] FileSearch
- [x] DuplicateFinder
- [x] ArchiveViewer — host entries
- [x] HexViewer → `debug::HexViewer`

## T27d Files · Transfers

- [x] FileOperationProgress
- [x] TransferQueue
- [x] DownloadManager
- [x] StorageUsage → `data_display::UsageBar`

## T28a Messaging · Channels — `src/messaging`

- [x] ChannelList / ChatList
- [x] ChannelItem
- [x] DirectMessageItem
- [x] ChannelHeader
- [x] PinnedMessages

## T28b Messaging · Messages

- [x] ChatMessage
- [x] MessageThread
- [x] ThreadPanel
- [x] UnreadDivider
- [x] MessageReactions → `collab::Reactions`
- [x] ReadReceipt
- [x] TypingIndicator → `motion::TypingIndicator`

## T28c Messaging · People

- [x] MemberList
- [x] UserProfileCard
- [x] OnlineStatus
- [x] StatusSetter

## T28d Messaging · Calls

- [x] CallControls
- [x] ParticipantTile
- [x] VideoCallGrid — host frames
- [x] ScreenShareView — host frames
- [x] VoiceCallBar
- [x] IncomingCallDialog
- [x] HuddleIndicator

## T28e Messaging · Stickers and GIFs

- [x] StickerPicker
- [x] GifPicker — host images

## T29a Mail · Boxes and lists — `src/mail`

- [x] MailboxList / FolderList
- [x] MailList
- [x] MailItem
- [x] InboxZeroState → `feedback::EmptyState`

## T29b Mail · Reading

- [x] MailReader
- [x] MailThreadView
- [x] QuotedText

## T29c Mail · Writing

- [x] MailComposer
- [x] RecipientInput → `forms::TagInput`, its suggestions and an address check
- [x] SignatureEditor
- [x] ScheduleSend

## T29d Mail · Sorting

- [x] LabelPicker
- [x] SnoozePicker

## T30a Calendar · Months — `src/calendar`

- [x] CalendarMonthView
- [x] YearView
- [x] MiniCalendar → `forms::Calendar`
- [x] EventCard / EventChip

## T30b Calendar · Time grid

- [x] CalendarWeekView
- [x] CalendarDayView
- [x] TimeGrid — drag to create, resize
- [x] AllDayRow
- [x] CurrentTimeIndicator
- [x] TimezoneOverlay

## T30c Calendar · Agenda and people

- [x] AgendaView
- [x] EventPopover
- [x] AttendeeList

## T30d Calendar · Editing

- [ ] EventEditor
- [ ] RecurrenceEditor
- [ ] ReminderPicker
- [ ] AvailabilityPicker