Intro

The UI shell serves as a centralized user interface hub, designed to streamline user interactions and boost productivity. It is the starting point for users to initiate conversations with Joule, providing a platform for intuitive and natural communication. The UI shell encompasses adaptable workspaces, known as spaces, which cater to various tasks and support collaboration. It also integrates jobs, allowing users to automate routine processes while maintaining control over crucial decisions. Bringing these elements together, the UI shell creates a cohesive digital environment that meets diverse workflow needs efficiently.

UI shell

Anatomy

UI Shell

1. Main Navigation: Provides access to all core experiences. It appears on every page and lets users navigate to each core experience’s entry page. It supports responsive layouts across breakpoints.

2. Pane Bar: Manages layout by letting users toggle the left and right panes. It also hosts experience‑specific actions provided by each core experience.

UI shell anatomy

Main Navigation

Behavior and Interaction

Main Navigation

Users navigate the UI shell through the main navigation located on the left side. The Joule Work logo serves as a link to initiate a new conversation with Joule. The main navigation is organized into a primary section, where users access core experiences, and a secondary section, which includes notifications, the user menu, and options to collapse or expand the navigation. Users can customize the displayed core experiences in the primary section via account settings. Hovering over icons reveals menu item titles, while expanding the main navigation consistently shows the items with their icons, titles, and any applicable create actions. In the primary section, core experiences display their content across up to three panes on the right, while secondary items, such as notifications and the user menu, trigger an anchored popover. Only one core experience remains active at any time.

Pane Management of the Core Experiences

When users navigate to a core experience, the content is organized into three panes. The left pane typically displays a list of created conversations, spaces, jobs, or solutions. Selecting an item from this list opens it in the central focus pane, which occupies most of the screen width. The right pane allows users to either engage in conversation with Joule (for spaces, jobs, or development) or view details selected in the focus pane, such as from a space or conversation. When the right pane is closed, a floating Joule input appears in the bottom center of the focus pane, allowing users to enter prompts. Upon entering a prompt, the right conversation pane opens automatically to continue the dialogue. Users may also access this pane using the conversation icon button located in the focus pane bar (header section). If the right pane is displaying a conversation, it remains open even as users navigate to a different core experience.

Pane bar to open and close side panes

Pane management view with three open panes

Pane management view with two open panes and the left pane closed

Each pane features a dedicated pane bar that offers orientation and pane-level controls. The leading slot consistently displays context with a title and, when necessary, breadcrumbs. The trailing slot, which is optional, contains actions that impact the entire pane's content. Pane bars are used for wayfinding and high-level controls, such as opening or closing adjacent panes, switching the right pane between conversation and details modes, or initiating actions on the currently focused entity, like creating or renaming items. Avoid placing body content, inline editors, or list/grid filters that belong in the pane content, as well as global shell or account settings, in a pane bar. Actions should not span multiple panes. The left pane bar reflects hierarchy and list utilities; the focus pane bar represents the active object or workspace and may display its immediate actions, noting that the focus pane itself cannot be closed. The right pane bar, which supports either conversation or details, should only contain controls pertinent to that side pane, excluding primary workflow commands. Bars are layout-managed and responsive. Keep actions concise and organized, with identity on the left and secondary actions on the right, deferring any lengthy or task-specific elements to the pane content or an in-pane menu.

Notifications

Events from core experiences can trigger a fly-in notification. These notifications are listed in the notifications popover, which can be accessed from the main navigation. In collapsed mode, a dot indicator signals new notifications, while in expanded mode, a counter badge provides the alert. Users can click on notification items to navigate to the related event, such as inspecting a newly created space or addressing a job that requires attention, or to clear the notifications.

Notifications list

User Menu

The user menu includes profile information (avatar, email address, account), settings, AI notice, help, and log-in/log-out function.

User menu

Settings

When users access the settings, they open in the left pane as a list and the focus pane as content. The UI Shell offers basic settings related to appearance, such as dark or light themes, language selection, and accessibility features like keyboard shortcuts. Any additional settings for core experiences are directly implemented.

Settings page showing keyboard shortcuts for accessibility