Application Chrome
Relevant source files
The following files were used as context for generating this wiki page:
Application Chrome refers to the non-grid shell of the Termul workspace. It encompasses the surrounding interface elements that facilitate project organization, navigation, and state monitoring, including the sidebar, tab bar, and status bar. The chrome remains distinct from the Terminal Grid, which is the cell surface of the terminal panes.
Sources: CONTEXT.md:88-91, README.md:68-68
Core Components and Layout
The Application Chrome utilizes a responsive layout that adapts between desktop and mobile environments. On desktop, it features a persistent sidebar and a custom title bar with window controls. On mobile devices, the chrome transitions to a dedicated mobile shell that replaces desktop-specific elements like the Activity Rail and Status Bar with mobile-optimized affordances such as project switchers and menu buttons.
Sources: README.md:68-68, src/renderer/layouts/WorkspaceLayout.mobile-breakpoint.test.tsx:235-255
Workspace Structure
The layout architecture organizes components into clear functional zones:
| Component | Description |
|---|---|
| Title Bar | A desktop-native bar containing window controls, sidebar toggles, and settings navigation. |
| Project Sidebar | A navigable list of projects allowing for quick switching and project creation. |
| Tab Bar | A Windows Terminal-style interface for managing terminal, editor, and browser tabs via drag-and-drop. |
| Status Bar | Displays contextual information such as the current Git branch, working directory, and exit codes. |
| Activity Rail | A VSCode-style vertical bar for global actions and navigation. |
Sources: README.md:63-68, README.md:25-30, CHANGELOG.md:64-64
Visual Identity and Theming
The chrome follows a "dark-first" design philosophy. It uses semantic OKLCH tokens rather than hardcoded hex values or Tailwind palette primitives. This ensures consistent contrast and accessibility across different bundled themes.
Sources: DESIGN.md:3-5, DESIGN.md:9-11
Color Tokens and Surfaces
The Application Chrome maintains specific color relationships to differentiate between UI shell elements and the workspace content:
The Terminal Grid shares the same color as the Application Background. However, the Status Bar can utilize project-specific fills derived from the active project's color configuration.
Sources: CONTEXT.md:93-95, DESIGN.md:14-14, src/renderer/lib/themes/apply-color-theme.test.ts:200-210
Responsive Behavior and Breakpoints
The Application Chrome dynamically adjusts based on the viewport width. The system defines a specific breakpoint (767px) to switch between the desktop IDE chrome and the mobile web shell.
Sources: src/renderer/layouts/WorkspaceLayout.mobile-breakpoint.test.tsx:28-35, src/renderer/layouts/WorkspaceLayout.mobile-breakpoint.test.tsx:285-295
The mobile shell specifically uses flex-col wrappers and flex-1 for the main workspace to prevent height collapse in mobile browsers. It also ensures fixed chrome elements like the header use shrink-0 to maintain visibility.
Sources: src/renderer/layouts/WorkspaceLayout.mobile-breakpoint.test.tsx:246-255
Platform Specifics (macOS)
On macOS, the Application Chrome includes a specific macos-titlebar-strip. This component is 8 pixels in height (h-8) and hosts panel-visibility toggles that were relocated from other parts of the UI to accommodate native platform "traffic light" window controls. When a project is active, this strip also displays the active project name in uppercase.
Sources: src/renderer/layouts/WorkspaceLayout.test.tsx:343-355, src/renderer/layouts/WorkspaceLayout.test.tsx:365-370
Animation and Visibility
Panel visibility for components like the Sidebar and File Explorer is managed through reveal wrappers powered by framer-motion. These wrappers use overflow-hidden and animate width to "auto" with a duration of 250ms or less. When the user enables "reduced motion," these transitions become instant with zero duration.
Sources: src/renderer/layouts/WorkspaceLayout.test.tsx:572-585, src/renderer/layouts/WorkspaceLayout.test.tsx:610-620
Summary
Application Chrome provides the structural framework for Termul, separating administrative and organizational UI from the primary terminal and editor workspace. By leveraging a responsive, token-based design system, it ensures functional parity and visual consistency across desktop and mobile platforms while respecting platform-specific design patterns on macOS.