Files
Ely-GPUI-Components/tasks/ch21-30.md
T
ZacharyZhang-NYandClaude Opus 5.5 d0175edb7b T26c Media: video
Scrubber shows what has loaded, what has played and its chapters, names
the time under the pointer, seeks by press and gpui's drag, and steps by
the slider's keys; over_media lights it for a dark layer. VideoPlayer
shows the host's frame in its shape with a caption and a control bar over
it: the scrubber, play, the time, speed, captions, picture in picture and
full screen, each only with its handler; the bar rests after a still
pointer while it plays, on one wake from the executor's timer. Keys:
Space and K, J and L, the arrows, C and F. VideoThumbnailStrip lays frames
along the length under a playhead with a trim whose handles drag and whose
ends I and O set. SubtitleEditor edits cues in place: times as mm:ss.mmm,
kept in order, a time that does not read kept out with the reason shown.

InlineEdit is a Tab stop with the ring; it hands focus back after Enter or
Escape and keeps its text on Enter's release. overlays::media_button is
shared by the lightbox and the player's bar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-26 17:07:26 -04:00

377 lines
12 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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
- [ ] 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