Version 3.8 is the largest interface update since the extension launched. The horizontal tab strip that sat beneath the header is gone. In its place is a collapsible sidebar, a sticky top bar that consolidates every control that was previously scattered across three separate rows, and a full-screen command palette reachable from anywhere. Configuration also moves from a horizontal scrolling tab row to a structured vertical side-nav. Here is everything that changed.
Collapsible Sidebar Navigation
The horizontal hub-tab-shell tab strip has been replaced entirely by a 248px left sidebar.
- Collapses to a 48px icon-only rail; the expanded or collapsed state persists across sessions via localStorage.
- Hover-to-peek: hovering over a collapsed icon temporarily expands the rail to full width with a drop shadow so you can navigate without pinning it open.
- Nav groups display a colored dot, label, and a collapse chevron — individual groups can be toggled open or closed independently.
- Each view item shows an emoji icon, label, an optional "New" badge, and a lock icon when the item requires a higher plan tier.
- Configuration and Data Privacy links are pinned to the sidebar footer below a divider, always visible regardless of scroll position.
- An amber dot appears on the Configuration link whenever there are pending admin access requests.
- Below 900px viewport width the sidebar auto-collapses to icon-only mode so it never crowds the content area on smaller screens.
Sticky Top Header Bar
The old page header, subtitle, and separate toolbar row have been replaced by a single 48px sticky bar that stays at the top of the viewport as you scroll.
- A hamburger button on the left toggles the sidebar collapse state without leaving the current view.
- The Agile Analytics logo and brand name sit inline to the right of the hamburger.
- Project and Team dropdowns have moved from the toolbar row into the header (hidden on viewports below 900px where the sidebar is already collapsed).
- Right side of the bar: search trigger button ("Search pages… Ctrl+K"), Live Data status pill, tier badge, pricing link, Sprint Assistant button, and a compact theme toggle (☀ Light / ◐ Dark).
Breadcrumbs Bar
A thin bar below the sticky header now shows your current location in the format: Project / Group / Active View. The active view name is bolded so it is always clear where you are without reading the sidebar state.
Command Palette
A full-screen overlay command palette is now available from anywhere in the extension.
- Trigger with Ctrl+K or by clicking the search button in the header.
- Filters all visible nav items in real time as you type.
- Results are grouped by nav group; the currently active view is highlighted.
- Escape or clicking outside the overlay closes it immediately.
Configuration — Vertical Side-Nav Layout
The horizontal cfg-tabs scrolling row has been replaced with a two-column layout that scales cleanly on all screen sizes.
- Left column: a 200px vertical nav with grouped section labels — General, Data Pipeline, Rules & Alerts, Communications, and Admin.
- Right column: a content area with its own container-query context so layout breakpoints fire on the content width rather than the full viewport width.
- The Access Control tab now shows a pending request count badge using the same pill style as the rest of the UI.
Workflow Stage Cards
Each stage column in the workflow configuration grid now renders as a distinct card.
- White background, rounded corners, box shadow, and 12px inner padding per card.
- Color-coded 3px top border by pipeline position: New = slate, Queued = blue, In Progress = amber, Test = violet, Review = pink, Done = green.
- Subtle tinted card background for New (light gray), In Progress (warm yellow), and Done (light green).
- Field labels are now uppercase, bold, and slightly smaller (11px, tracked) to read as column headers.
- Inputs inside cards reset to normal case and weight so label styles do not cascade into form fields.
Stat Strip — Responsive Wrapping
The stat-cell row now uses flex-wrap with a min-width of 120px per cell. On narrow containers the cells wrap gracefully into multiple rows instead of overflowing or clipping.
Responsive Container Queries
Dashboard and configuration layouts now respond to the width of their own content container rather than the full browser viewport.
- hub-view and cfg-content are introduced as named CSS container contexts.
- Breakpoints for dashboard grids, scope grids, KPI rows, and tile grids now fire on the actual content width — which accounts for the 248px sidebar — rather than the full viewport width.
- This means a layout that previously broke at 900px viewport width will now correctly trigger at 900px of available content space, not 1148px.
Dark Mode Coverage
Every new element introduced in 3.8 has full dark-mode overrides matching the existing theme palette: sidebar, header bar, breadcrumbs bar, command palette, configuration side-nav, and workflow stage cards all switch correctly when Azure DevOps is set to the dark colour theme.
Update to 3.8 from the VS Marketplace to get the new navigation, command palette, and all layout improvements.