# 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

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

## T26d Media · Audio and controls

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

## T26e Media · Capture and devices

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

## T27 Files — `src/files`

- [ ] FileExplorer — list, icons, columns
- [ ] FileGrid
- [ ] FileList
- [ ] FileItem
- [ ] FileIcon
- [ ] FilePreview / QuickLook
- [ ] FileBreadcrumb / PathBar → `navigation::Breadcrumb`
- [ ] FolderTree → `lists::FileTree`
- [ ] FileContextMenu → `menus::ContextMenu`
- [ ] RenameInline → `forms::InlineEdit`
- [ ] DragDropFiles → `forms::DropZone`
- [ ] FileOperationProgress
- [ ] TransferQueue
- [ ] DownloadManager
- [ ] StorageUsage → `data_display::UsageBar`
- [ ] RecentFiles
- [ ] Favorites / Bookmarks → `documents::Favorites`
- [ ] FileSearch
- [ ] DuplicateFinder
- [ ] ArchiveViewer — host entries
- [ ] HexViewer → `debug::HexViewer`

## T28 Messaging — `src/messaging`

- [ ] ChannelList / ChatList
- [ ] ChannelItem
- [ ] DirectMessageItem
- [ ] MessageThread
- [ ] ThreadPanel
- [ ] ChatMessage
- [ ] UnreadDivider
- [ ] MessageReactions → `collab::Reactions`
- [ ] ReadReceipt
- [ ] TypingIndicator → `motion::TypingIndicator`
- [ ] MemberList
- [ ] UserProfileCard
- [ ] OnlineStatus
- [ ] StatusSetter
- [ ] VoiceCallBar
- [ ] VideoCallGrid — host frames
- [ ] ScreenShareView — host frames
- [ ] CallControls
- [ ] ParticipantTile
- [ ] IncomingCallDialog
- [ ] StickerPicker
- [ ] GifPicker — host images
- [ ] PinnedMessages
- [ ] ChannelHeader
- [ ] HuddleIndicator

## T29 Mail — `src/mail`

- [ ] MailboxList / FolderList
- [ ] MailList
- [ ] MailItem
- [ ] MailReader
- [ ] MailComposer
- [ ] RecipientInput
- [ ] MailThreadView
- [ ] QuotedText
- [ ] SignatureEditor
- [ ] LabelPicker
- [ ] SnoozePicker
- [ ] ScheduleSend
- [ ] InboxZeroState

## T30 Calendar — `src/calendar`

- [ ] CalendarMonthView
- [ ] CalendarWeekView
- [ ] CalendarDayView
- [ ] AgendaView
- [ ] YearView
- [ ] MiniCalendar → `forms::Calendar`
- [ ] EventCard / EventChip
- [ ] EventEditor
- [ ] EventPopover
- [ ] TimeGrid — drag to create, resize
- [ ] AllDayRow
- [ ] CurrentTimeIndicator
- [ ] RecurrenceEditor
- [ ] AvailabilityPicker
- [ ] TimezoneOverlay
- [ ] ReminderPicker
- [ ] AttendeeList