Fix top-bar menu stacking; soften pane separators

- Project and LLM dropdowns move to z-50: the chat header (z-20) was
  painting its 'New session' label and + button over open menus,
  which read as a transparent dropdown.
- The border token becomes a low-alpha blue-grey in both themes, the
  sidebar's doubled right border is removed, and pane resize handles
  are invisible until hovered instead of 4px solid bars — seams recede
  while floating surfaces keep their definition.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: jherforth

packages/web-ui/src/App.tsx

@@ -647,7 +647,7 @@ export default function App() {
           {/* Code Editor — has its own toggle, independent of the file-tree sidebar */}
           {!editorCollapsed && (
             <>
-              <PanelResizeHandle className="w-1 bg-monastery-dark-border hover:bg-monastery-lantern transition-colors cursor-col-resize" />
+              <PanelResizeHandle className="w-1 bg-transparent hover:bg-monastery-lantern/50 transition-colors cursor-col-resize" />
               <Panel
                 defaultSize={previewCollapsed ? 100 - paneLayout.chat : paneLayout.editor}
                 minSize={20}
@@ -689,7 +689,7 @@ export default function App() {
           {/* Preview Pane — slides in/out */}
           {!previewCollapsed && (
             <>
-              <PanelResizeHandle className="w-1 bg-monastery-dark-border hover:bg-monastery-lantern transition-colors cursor-col-resize" />
+              <PanelResizeHandle className="w-1 bg-transparent hover:bg-monastery-lantern/50 transition-colors cursor-col-resize" />
               <Panel
                 defaultSize={paneLayout.preview}
                 minSize={15}

packages/web-ui/src/components/Sidebar.tsx

@@ -225,7 +225,9 @@ export function Sidebar({
   }, [showCreateMenu]);
 
   return (
-    <aside className="w-64 bg-monastery-dark-bg border-r border-monastery-dark-border flex flex-col shrink-0">
+    // No border-r on the aside — the sidebar wrapper in App.tsx already draws the pane
+    // seam, and the two together rendered a doubled line.
+    <aside className="w-64 bg-monastery-dark-bg flex flex-col shrink-0">
       {/* The sidebar is the file tree — sessions live in the chat header, agent roles in the
           composer, and connections in Settings. */}
       <div className="flex-1 overflow-y-auto py-2">

packages/web-ui/src/components/TopBar.tsx

@@ -177,14 +177,15 @@ export function TopBar({ availableProjects = [], endpoints = [], onRefreshProjec
                 <ChevronDown size={12} className="text-monastery-text-muted" />
               </button>
 
-              {/* Project Dropdown */}
+              {/* Project Dropdown — z-50 so pane chrome (e.g. the chat header) can never
+                  paint over an open top-bar menu */}
               {projectDropdownOpen && (
                 <>
                   <div
-                    className="fixed inset-0 z-10"
+                    className="fixed inset-0 z-40"
                     onClick={() => setProjectDropdownOpen(false)}
                   />
-                  <div className="absolute top-full left-0 mt-1 w-64 bg-monastery-dark-surface border border-monastery-dark-border rounded-lg shadow-xl z-20 py-1 max-h-72 overflow-y-auto">
+                  <div className="absolute top-full left-0 mt-1 w-64 bg-monastery-dark-surface border border-monastery-dark-border rounded-lg shadow-xl z-50 py-1 max-h-72 overflow-y-auto">
                     {availableProjects.length === 0 && (
                       <div className="px-3 py-2 text-xs text-monastery-text-muted">No projects yet — create one below.</div>
                     )}
@@ -269,8 +270,8 @@ export function TopBar({ availableProjects = [], endpoints = [], onRefreshProjec
 
               {llmDropdownOpen && endpoints.length > 1 && (
                 <>
-                  <div className="fixed inset-0 z-10" onClick={() => setLlmDropdownOpen(false)} />
-                  <div className="absolute top-full right-0 mt-1 w-64 bg-monastery-dark-surface border border-monastery-dark-border rounded-lg shadow-xl z-20 py-1">
+                  <div className="fixed inset-0 z-40" onClick={() => setLlmDropdownOpen(false)} />
+                  <div className="absolute top-full right-0 mt-1 w-64 bg-monastery-dark-surface border border-monastery-dark-border rounded-lg shadow-xl z-50 py-1">
                     {endpoints.map((ep) => (
                       <button
                         key={ep.id}

packages/web-ui/src/index.css

@@ -11,11 +11,13 @@
   --color-lantern: #F4A460;
   --color-amber: #FFBF00;
 
-  /* Dark mode base — deep navy blue */
+  /* Dark mode base — deep navy blue. The border is a low-alpha blue-grey rather than a
+     solid color: it reads as definition on raised surfaces (menus, cards) but recedes on
+     flat chrome, so pane seams stop looking like ruled lines. */
   --bg-primary: #0A1628;
   --bg-secondary: #0F1D32;
   --bg-tertiary: #162744;
-  --border-color: #1A2D4A;
+  --border-color: rgba(148, 166, 196, 0.14);
   --text-primary: #E6EDF3;
   --text-secondary: #8B949E;
   --text-muted: #6E7681;
@@ -35,7 +37,7 @@
   --bg-primary: #F0F4FA;
   --bg-secondary: #FFFFFF;
   --bg-tertiary: #F5F8FC;
-  --border-color: #D0D8E4;
+  --border-color: rgba(20, 40, 70, 0.12);
   --text-primary: #0A1628;
   --text-secondary: #3A4A5C;
   --text-muted: #6B7B8D;
@@ -82,7 +84,9 @@ code, pre, .monaco-editor {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--border-color);
+  /* Slightly stronger than --border-color so the thumb stays findable now that the
+     border token is low-alpha. */
+  background: rgba(148, 166, 196, 0.28);
   border-radius: 4px;
 }