Components

Built on React with Tailwind CSS and shadcn/ui.

UI Components (src/components/ui/)

shadcn Components (21):

Component	Purpose
`alert`	Alert messages and notifications
`badge`	Status badges and labels
`button`	Standard button component
`card`	Card container layout
`checkbox`	Checkbox input
`combobox`	Searchable select / autocomplete combo box
`dialog`	Modal dialog windows
`dropdown-menu`	Dropdown menu component
`input`	Text input field
`label`	Form labels
`menubar`	Application menu bar
`scroll-area`	Custom scrollable container
`select`	Select dropdown
`skeleton`	Loading placeholder skeleton
`slider`	Range slider input
`sonner`	Toast notifications (Sonner wrapper)
`switch`	Toggle switch
`table`	Data table
`tabs`	Tab navigation
`textarea`	Multiline text input
`tooltip`	Hover tooltips

Custom Components (12):

Component	Purpose
`activity-indicator`	macOS-style circular spinner with 8 animated bars
`activity-indicator-with-label`	Spinner with text label showing processing state
`aqua-checkbox`	Aqua-themed checkbox with colored check indicator
`audio-bars`	Real-time audio frequency visualization bars
`audio-input-button`	Mic button with recording, transcription, and waveform
`dial`	Rotary knob control for synthesizer parameters
`empty-state`	Empty-state placeholder for lists and panels
`playback-bars`	Animated equalizer bars for playback indication
`right-click-menu`	Context menu wrapper using DropdownMenu
`search-input`	Theme-aware pill search input field
`selectable-list-item`	Selectable list row primitive
`toolbar-button`	Toolbar icon button (and button group) primitive

Component	Purpose
`src/components/layout/WindowFrame.tsx`	Window chrome/container
`src/components/layout/MenuBar.tsx`	System menu/taskbar
`src/components/layout/Desktop.tsx`	Desktop icon management
`src/components/layout/Dock.tsx`	macOS dock
`src/components/layout/StartMenu.tsx`	Windows Start menu
`src/components/layout/AppleMenu.tsx`	Apple menu launcher for macOS/System 7 themes
`src/components/layout/AppMenu.tsx`	Foreground app menu rendering and actions
`src/components/layout/AppSidebarPanel.tsx`	Shared themed app sidebar panel surface
`src/components/layout/AppSwitcher.tsx`	Alt/Option+Tab app switcher overlay
`src/components/layout/ExposeView.tsx`	Mission Control / Expose window overview
`src/components/layout/SpotlightSearch.tsx`	Global app/file search modal

Component	Purpose
`ClockWidget.tsx`	Clock widget
`CalendarWidget.tsx`	Calendar widget
`WeatherWidget.tsx`	Weather widget
`StocksWidget.tsx`	Stocks widget
`CurrencyWidget.tsx`	Currency converter widget
`IpodWidget.tsx`	iPod controller widget
`TranslationWidget.tsx`	Translation widget
`DictionaryWidget.tsx`	Dictionary widget
`StickyNoteWidget.tsx`	Sticky note widget
`AquariumWidget.tsx`	Emoji aquarium widget
`TerrariumWidget.tsx`	Emoji terrarium widget
`WidgetChrome.tsx`	Widget chrome/container shared wrapper

Component	Purpose
`src/components/AirDropListener.tsx`	Listens for incoming AirDrop file transfers
`src/components/Webcam.tsx`	Webcam video stream component

Component	Purpose
`ScreenSaverOverlay.tsx`	Screensaver activation overlay
`Starfield.tsx`	Starfield screensaver
`BouncingLogo.tsx`	Bouncing logo screensaver
`Matrix.tsx`	Matrix digital rain screensaver
`Pipes.tsx`	3D pipes screensaver
`Maze.tsx`	Maze screensaver
`FlyingToasters.tsx`	Classic flying toasters screensaver

Component	Purpose
`ListenSessionBadge.tsx`	Session status badge
`ListenSessionInvite.tsx`	Invite dialog for listen sessions
`ListenSessionToolbar.tsx`	Session toolbar controls
`JoinSessionDialog.tsx`	Join session dialog
`ReactionOverlay.tsx`	Emoji reaction overlay for sessions

Component	Purpose
`src/components/shared/AmbientBackground.tsx`	Animated ambient gradient background
`src/components/shared/EmojiAquarium.tsx`	Animated emoji aquarium display
`src/components/shared/EmojiTerrarium.tsx`	Dashboard terrarium: land-biome emoji scene
`src/components/shared/FullscreenPlayerControls.tsx`	Media player controls for fullscreen mode
`src/components/shared/GalaxyBackground.tsx`	Animated galaxy shader background
`src/components/shared/HtmlPreview.tsx`	HTML/applet preview with code view
`src/components/shared/ImageAttachment.tsx`	Chat image attachment rendering
`src/components/shared/LandscapeVideoBackground.tsx`	Responsive landscape video background wrapper
`src/components/shared/LinkPreview.tsx`	YouTube/media link preview cards
`src/components/shared/LyricsSyncMode.tsx`	Lyrics timing sync interface
`src/components/shared/MeshGradientBackground.tsx`	Mesh gradient animated background
`src/components/shared/PrefetchToast.tsx`	Asset prefetch progress toast
`src/components/shared/ThemedTabs.tsx`	Theme-aware tab controls
`src/components/shared/ThemedIcon.tsx`	Theme-aware icon rendering
`src/components/shared/ToolInvocationMessage.tsx`	AI tool call display in chat
`src/components/shared/TrafficLightButton.tsx`	macOS window control buttons
`src/components/shared/WaterBackground.tsx`	Water-themed animated background

Component	Purpose
`src/components/errors/ErrorBoundaries.tsx`	App-level (`AppErrorBoundary`) and desktop-level (`DesktopErrorBoundary`) boundaries with a themed crash dialog (`CrashDialog`) for relaunch/quit/reload recovery actions