fix(frontend): tighten the nav rail and make the app shell lines continuous

The collapsed sidebar was 80px wide around 14-16px icons, and the rail
painted two different greys because the antd menu drew its own
background over the middle. The frame lines were nearly invisible, so
the rail edge and the top bars never read as one frame.

- Rail is 48px collapsed, one flat colour, darker than the content in
  dark mode and white in light mode.
- New shell tokens (rail background, frame line, scroll thumb) so the
  rail edge, the breadcrumb bar and the playground header share one line.
- Workflow sidebar header rows are 45px, so the rail's lines land on the
  same y as the content's and carry straight across.
- The agent picker loses its own border inside the framed row.
- Configuration panel gets a quiet scrollbar: gutter always reserved, so
  no content shift, thumb only on hover or focus.

Author: mmabrouk

web/oss/src/components/Layout/assets/styles.ts

@@ -27,7 +27,7 @@ export const useStyles = createUseStyles((theme: JSSTheme) => ({
         justifyContent: "space-between",
         width: "100%",
         padding: "8px 1.5rem",
-        borderBottom: `1px solid ${theme.colorBorderSecondary}`,
+        borderBottom: "1px solid var(--ag-shell-line)",
     },
     topRightBar: {
         display: "flex",

web/oss/src/components/Playground/Components/MainLayout/index.tsx

@@ -384,7 +384,8 @@ const PlaygroundMainView = ({
                                 ref={setConfigPanelRef}
                                 className={clsx([
                                     {
-                                        "grow w-full min-h-0 overflow-y-auto": !isComparisonView,
+                                        "ag-scroll-quiet grow w-full min-h-0 overflow-y-auto":
+                                            !isComparisonView,
                                         "grow w-full min-h-0 overflow-x-auto flex [&::-webkit-scrollbar]:w-0":
                                             isComparisonView,
                                     },

web/oss/src/components/Playground/Components/PlaygroundHeader/index.tsx

@@ -633,7 +633,7 @@ const PlaygroundHeader: React.FC<PlaygroundHeaderProps> = ({className, ...divPro
         <>
             <div
                 className={clsx(
-                    "flex items-center justify-between gap-4 px-2.5 py-2 bg-[var(--ag-surface-raised)] border-0 border-b border-solid border-[var(--ag-surface-divider)]",
+                    "flex items-center justify-between gap-4 px-2.5 py-2 bg-[var(--ag-surface-raised)] border-0 border-b border-solid border-[var(--ag-shell-line)]",
                     className,
                 )}
                 {...divProps}

web/oss/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -32,8 +32,8 @@ const BootShell = memo(function BootShell({shell}: {shell: "app" | "blank"}) {
         <div className="flex h-dvh w-full">
             <div
                 className={clsx(
-                    "h-full shrink-0 border-0 border-r border-solid border-[var(--ag-surface-divider)] bg-[var(--ag-sidebar-bg)]",
-                    collapsed ? "w-[80px]" : "w-[236px]",
+                    "h-full shrink-0 border-0 border-r border-solid border-[var(--ag-shell-line)] bg-[var(--ag-sidebar-bg)]",
+                    collapsed ? "w-[48px]" : "w-[236px]",
                 )}
             />
             <div className="grow" />

web/oss/src/components/Sidebar/components/SidebarSkeletonLoader.tsx

@@ -14,7 +14,7 @@ const SidebarSkeletonLoader = () => {
             className={clsx(
                 "flex flex-col justify-between h-screen border border-r border-solid border-gray-100",
                 {
-                    "w-[80px] items-center": collapsed,
+                    "w-[48px] items-center": collapsed,
                     "w-[236px]": !collapsed,
                 },
             )}

web/oss/src/components/Sidebar/components/WorkflowPicker.tsx

@@ -45,9 +45,9 @@ const WorkflowPicker = memo(({collapsed}: WorkflowPickerProps) => {
                 aria-label="Switch workflow"
                 className={clsx(
                     "flex items-center justify-between overflow-hidden transition-[width,height,padding,gap,border-color] duration-300 ease-in-out",
-                    collapsed
-                        ? "!w-8 !h-8 !p-1 gap-0"
-                        : "w-full pl-2 pr-3 py-3 h-12 gap-2 border border-solid border-gray-200",
+                    // No border when expanded: the header row it sits in is already
+                    // framed by the rail's own line, so a box inside a box reads wrong.
+                    collapsed ? "!w-8 !h-8 !p-1 gap-0" : "w-full h-full pl-1.5 pr-2 gap-2",
                 )}
             >
                 <WorkflowIdentity

web/oss/src/components/Sidebar/engine/SidebarShell.tsx

@@ -12,6 +12,14 @@ const {Sider} = Layout
 const MENU_CLASS_NAME =
     "border-r-0 overflow-y-auto relative [&_.ant-menu-item-selected]:font-medium"
 
+// The menu paints its own container background, which would break the rail into two
+// shades. Transparent lets the rail colour run edge to edge.
+const MENU_SURFACE_CLASS_NAME = "!bg-transparent"
+
+// antd hardcodes a 80px width on collapsed inline menus; the rail is narrower than that,
+// so let the menu fill the rail and keep antd's own centering math working off that width.
+const COLLAPSED_MENU_CLASS_NAME = "[&.ant-menu-inline-collapsed]:!w-full"
+
 class SidebarErrorBoundary extends React.Component<React.PropsWithChildren, {hasError: boolean}> {
     state = {hasError: false}
 
@@ -247,7 +255,13 @@ const SidebarShell: React.FC<SidebarShellProps> = ({
                 {renderSlot(section.before, collapsed)}
                 <SidebarMenu
                     menuProps={{
-                        className: isBottomSection ? "" : MENU_CLASS_NAME,
+                        className: [
+                            isBottomSection ? "" : MENU_CLASS_NAME,
+                            MENU_SURFACE_CLASS_NAME,
+                            COLLAPSED_MENU_CLASS_NAME,
+                        ]
+                            .filter(Boolean)
+                            .join(" "),
                         selectedKeys,
                         ...(isInlineSection
                             ? {
@@ -280,18 +294,18 @@ const SidebarShell: React.FC<SidebarShellProps> = ({
     const bottomSections = visibleSections.filter((section) => section.placement === "bottom")
 
     return (
-        <div className="border-0 border-r border-solid border-[var(--ag-surface-divider)]">
+        <div className="border-0 border-r border-solid border-[var(--ag-shell-line)]">
             <Sider
                 theme={theme}
                 className="sticky top-0 bottom-0 h-screen bg-[var(--ag-sidebar-bg)]"
                 collapsible
-                width={collapsed ? 80 : 236}
+                width={collapsed ? 48 : 236}
                 trigger={null}
             >
                 <div
                     className={[
                         "flex flex-col h-full transition-all duration-300",
-                        collapsed ? "w-[80px]" : "w-[236px]",
+                        collapsed ? "w-[48px]" : "w-[236px]",
                     ].join(" ")}
                 >
                     {renderSlot(scope.header, collapsed, scope.lastPath)}

web/oss/src/components/Sidebar/scopes/workflowScope.tsx

@@ -1,7 +1,5 @@
 import {useMemo} from "react"
 
-import {Divider} from "antd"
-
 import SidebarBackButton from "../components/SidebarBackButton"
 import WorkflowPicker from "../components/WorkflowPicker"
 import type {SidebarScope, SidebarSection, SidebarSlotContext} from "../engine/types"
@@ -14,21 +12,27 @@ interface WorkflowScopeOptions {
     lastPath?: string
 }
 
+// The two header rows are 45px tall so the rail's lines land on the same y as the
+// breadcrumb bar's and the playground header's, and read as one line across the app.
 const WorkflowSidebarHeader = ({collapsed, lastPath}: SidebarSlotContext) => (
     <>
         <div
             className={[
-                "w-full h-[48px] flex items-center",
-                collapsed ? "justify-center" : "mx-1.5",
+                "w-full h-[45px] shrink-0 flex items-center border-0 border-b border-solid border-[var(--ag-shell-line)]",
+                collapsed ? "justify-center" : "px-1.5",
             ].join(" ")}
         >
             <SidebarBackButton collapsed={collapsed} lastPath={lastPath} />
         </div>
 
-        <div className={collapsed ? "flex w-full justify-center p-2" : "px-2 pt-1 pb-2"}>
+        <div
+            className={[
+                "flex h-[45px] shrink-0 items-center border-0 border-b border-solid border-[var(--ag-shell-line)]",
+                collapsed ? "w-full justify-center" : "px-2",
+            ].join(" ")}
+        >
             <WorkflowPicker collapsed={collapsed} />
         </div>
-        <Divider className="mb-1 mt-0" />
     </>
 )
 

web/oss/src/styles/globals.css

@@ -896,3 +896,43 @@ body {
 .ag-icon-segmented .ant-segmented-item-label svg {
     display: block;
 }
+
+/* Quiet scrollbars. The gutter is reserved at the thumb's width whether or not the
+   content overflows, so revealing the thumb never shifts the content, and the thumb
+   only appears while the pointer or focus is inside the scroller. */
+.ag-scroll-quiet {
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.ag-scroll-quiet:hover,
+.ag-scroll-quiet:focus-within {
+    scrollbar-color: var(--ag-scroll-thumb) transparent;
+}
+
+.ag-scroll-quiet::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.ag-scroll-quiet::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.ag-scroll-quiet::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    background-clip: content-box;
+    border: 2px solid transparent;
+    border-radius: 999px;
+    transition: background-color 150ms ease;
+}
+
+.ag-scroll-quiet:hover::-webkit-scrollbar-thumb,
+.ag-scroll-quiet:focus-within::-webkit-scrollbar-thumb {
+    background-color: var(--ag-scroll-thumb);
+}
+
+.ag-scroll-quiet::-webkit-scrollbar-thumb:hover {
+    background-color: var(--ag-scroll-thumb-hover);
+}

web/oss/src/styles/theme-variables.css

@@ -197,7 +197,11 @@
     --ag-strip-card-border: #eaeff5;
     --ag-strip-card-border-hover: #bdc7d1;
     --ag-strip-card-hover-shadow: 0 2px 8px -2px rgba(28, 44, 61, 0.12);
-    --ag-sidebar-bg: var(--ag-surface-raised);
+    --ag-shell-rail-bg: #ffffff;
+    --ag-shell-line: #e3e5e9;
+    --ag-scroll-thumb: rgba(15, 23, 42, 0.22);
+    --ag-scroll-thumb-hover: rgba(15, 23, 42, 0.38);
+    --ag-sidebar-bg: var(--ag-shell-rail-bg);
 
     /* --- legacy --ag-c-* shim (light = original hex) --- */
     --ag-c-051729: #051729;
@@ -507,7 +511,11 @@
     --ag-strip-card-border: #232327;
     --ag-strip-card-border-hover: #3a3a40;
     --ag-strip-card-hover-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
-    --ag-sidebar-bg: var(--ag-surface-raised);
+    --ag-shell-rail-bg: #121316;
+    --ag-shell-line: #2b2d32;
+    --ag-scroll-thumb: rgba(255, 255, 255, 0.20);
+    --ag-scroll-thumb-hover: rgba(255, 255, 255, 0.34);
+    --ag-sidebar-bg: var(--ag-shell-rail-bg);
 
     /* --- legacy --ag-c-* shim (dark aliased to roles where possible) --- */
     --ag-c-051729: rgba(255, 255, 255, 0.88);