Frontend UI Shell & Components

Relevant source files

The following files were used as context for generating this wiki page:

• src/app/shell/Sidebar.tsx
• src/features/workspace/ui/SurfaceTabs.tsx
• src/shared/ui/Modal.tsx
• src/shared/ui/Popover.tsx
• src/features/sessions/ui/AgentMarkdown.tsx
• src/features/source-control/ui/GitChangesPanel.tsx
• index.html
• src/features/skills/ui/SkillPicker.tsx
• src/features/settings/ui/SettingsView.test.ts

The Rebase frontend UI shell provides a desktop-optimized workspace for agent interaction, source control management, and document previewing. It implements a modular layout consisting of a global sidebar, tabbed editor surfaces, and contextual panels that facilitate complex developer workflows through a unified React-based interface.

The system relies on a central theming engine and a specialized Markdown rendering pipeline to display agent outputs, code snippets, and interactive diagrams. Key UI elements include the Git Changes panel, Skill Pickers, and the Settings view, which allow you to configure agent behavior and workspace appearance.

Core Layout and Theming

The application initializes its visual state via an inline script in the entry HTML file to prevent flashing during the boot process. This script reads configuration from localStorage to apply theme colors, sidebar opacity, and platform-specific classes.

Theme Initialization Flow

The following diagram illustrates how the shell applies user preferences before the React application mounts:

Theming Variables

The shell defines a set of HSL-based CSS variables that allow for dynamic color adjustments:

Variable	Description	Default
--theme-hue	Controls the base color tint of the UI	240
--theme-saturation	Sets the intensity of the theme color	0%
--sidebar-opacity	Determines the transparency of the navigation rail	0.85
--background-lightness	Adjusts the primary background shade	9% (Dark)

Sources: index.html:56-66

Markdown Rendering System

The AgentMarkdown component handles the display of assistant replies. It uses the Streamdown library to process text into semantic blocks while applying custom plugins for workspace integration.

Rendering Pipeline

1. Remark Processing: Transforms text into a syntax tree, resolving workspace-specific file links using remarkWorkspaceFileLinks.
2. Rehype Sanitization: Sanitizes HTML and applies the harden plugin to enforce security policies on images and links.
3. Component Mapping: Maps standard Markdown tags to custom React components like MarkdownLink, MarkdownCode, and MarkdownImage.

Specialized Content Blocks

• Code Fences: Renders code with Shiki highlighting and includes a "Copy Code" button. It automatically detects languages from file names (e.g., rs to rust). Sources: src/features/sessions/ui/AgentMarkdown.tsx:433-470
• Mermaid Diagrams: Renders mermaid code blocks into interactive SVG diagrams using a lazy-loaded Mermaid plugin. Sources: src/features/sessions/ui/AgentMarkdown.tsx:889-918
• Inline File Links: Converts file paths in backticks into clickable links that open the file in the Rebase editor or reveal it in the OS file explorer. Sources: src/features/sessions/ui/AgentMarkdown.tsx:389-415

Source Control and Workspace Panels

The GitChangesPanel provides a high-density interface for managing repository state. It integrates terminal commands into a visual flow for staging, committing, and synchronization.

Interface Components

• Pane Header: Displays the current branch, sync status (ahead/behind counts), and a menu for branch actions like "Pull". Sources: src/features/source-control/ui/GitChangesPanel.tsx:135-188
• Change List: Groups uncommitted files into "Staged" and "Changes" sections. You can view these as a flat list or a hierarchical directory tree. Sources: src/features/source-control/ui/GitChangesPanel.tsx:454-490
• Commit Area: Includes a text area for commit messages and a "Wand" icon to generate messages using the configured agent. Sources: src/features/source-control/ui/GitChangesPanel.tsx:555-595

Git Integration Logic

The component maintains a GitDiffIndex using a polling mechanism (every 2 seconds) and listens for filesystem events to trigger reloads. It provides visual indicators for file status:

• U (Untracked): Sky blue.
• A (Added): Green.
• D (Deleted): Red.
• M (Modified): Amber.

Sources: src/features/source-control/ui/GitChangesPanel.tsx:882-940, src/features/source-control/ui/GitChangesPanel.tsx:1078-1090

Settings and Configuration

The SettingsView is a multi-section modal for application-wide configuration. It uses a search-indexed structure to help you locate specific settings across different categories.

Settings Sections

Section	Focus Area
General	File tab modes, animations, and feature toggles (e.g., Board, Notes).
Appearance	Theme hue, UI scaling, and background effects (e.g., Dither, Haze).
Providers	API account management, usage tracking, and binary path overrides for Agent CLIs.
Keybindings	Customization of keyboard shortcuts and command recording.

Sources: src/features/settings/ui/SettingsView.test.ts:28-35, src/features/settings/ui/SettingsView.test.ts:380-410

Interaction Patterns

The settings UI implements specific focus management patterns:

1. Search: Typing in the search bar filters the index and highlights the matching row on the relevant page. Sources: src/features/settings/ui/SettingsView.test.ts:854-870
2. Shortcuts: You can record new keybindings by clicking a key cell and pressing the desired combination. Sources: src/features/settings/ui/SettingsView.test.ts:907-930
3. Account Privacy: Emails in the providers section are blurred by default, requiring a click to reveal. Sources: src/features/settings/ui/SettingsView.test.ts:110-135

Workspace Interactivity

Components like the SkillPicker provide contextual overlays for command invocation. The SkillPicker filters available skills and built-in commands as you type, supporting keyboard navigation (Arrow keys/Enter) and the creation of new portable skills through a dedicated form. Sources: src/features/skills/ui/SkillPicker.tsx:88-140