fix(ambient-ui): sidebar z-index overlap, URL state, mobile layout

- Main content area clips overflow so sticky header can't bleed into sidebar
- Sidebar gets z-20 to always render above main content
- Sidebar session ID persisted in URL (?chat=<id>) — survives reload
- Active tab persisted in URL (?tab=logs) — survives reload
- Sidebar goes full-screen on mobile widths (max-md breakpoint)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jsell-rh

components/ambient-ui/src/app/(dashboard)/[projectId]/fleet/[sessionId]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useParams } from 'next/navigation'
+import { useParams, useSearchParams } from 'next/navigation'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useSession } from '@/queries/use-sessions'
@@ -11,8 +11,16 @@ import { ChatTab } from './_components/chat-tab'
 
 export default function SessionDetailPage() {
   const { sessionId } = useParams<{ projectId: string; sessionId: string }>()
+  const searchParams = useSearchParams()
+  const activeTab = searchParams.get('tab') ?? 'phase'
   const { data: session, isLoading, error } = useSession(sessionId)
 
+  const handleTabChange = (value: string) => {
+    const url = new URL(window.location.href)
+    url.searchParams.set('tab', value)
+    window.history.replaceState({}, '', url.toString())
+  }
+
   if (error) {
     return (
       <p className="text-sm text-destructive">
@@ -33,7 +41,7 @@ export default function SessionDetailPage() {
   return (
     <div className="space-y-6">
       <SessionHeader session={session} />
-      <Tabs defaultValue="phase">
+      <Tabs defaultValue={activeTab} onValueChange={handleTabChange}>
         <TabsList className="w-full *:flex-1">
           <TabsTrigger value="phase">Phase</TabsTrigger>
           <TabsTrigger value="logs">Logs</TabsTrigger>

components/ambient-ui/src/app/(dashboard)/layout.tsx

@@ -36,7 +36,7 @@ export default function DashboardLayout({
     <ChatSidebarProvider>
       <SidebarProvider>
         <AppSidebar projectId={projectId} />
-        <SidebarInset className="min-w-0 flex-1">
+        <SidebarInset className="min-w-0 flex-1 overflow-x-clip">
           <NavHeader
             projectId={projectId}
             projectName={project?.name ?? null}

components/ambient-ui/src/components/chat-sidebar-context.tsx

@@ -5,9 +5,11 @@ import {
   useContext,
   useState,
   useCallback,
+  useEffect,
   useMemo,
   type ReactNode,
 } from 'react'
+import { useSearchParams, useRouter, usePathname } from 'next/navigation'
 
 type ChatSidebarState = {
   openSessionId: string | null
@@ -18,15 +20,29 @@ type ChatSidebarState = {
 
 const ChatSidebarContext = createContext<ChatSidebarState | null>(null)
 
+function updateChatParam(sessionId: string | null) {
+  const url = new URL(window.location.href)
+  if (sessionId) {
+    url.searchParams.set('chat', sessionId)
+  } else {
+    url.searchParams.delete('chat')
+  }
+  window.history.replaceState({}, '', url.toString())
+}
+
 export function ChatSidebarProvider({ children }: { children: ReactNode }) {
-  const [openSessionId, setOpenSessionId] = useState<string | null>(null)
+  const searchParams = useSearchParams()
+  const initialChat = searchParams.get('chat')
+  const [openSessionId, setOpenSessionId] = useState<string | null>(initialChat)
 
   const openSidebar = useCallback((sessionId: string) => {
     setOpenSessionId(sessionId)
+    updateChatParam(sessionId)
   }, [])
 
   const closeSidebar = useCallback(() => {
     setOpenSessionId(null)
+    updateChatParam(null)
   }, [])
 
   const value = useMemo<ChatSidebarState>(

components/ambient-ui/src/components/chat-sidebar.tsx

@@ -151,7 +151,7 @@ export function ChatSidebar() {
 
   return (
     <aside
-      className="flex-shrink-0 border-l bg-background flex flex-col relative h-screen sticky top-0"
+      className="flex-shrink-0 border-l bg-background flex flex-col relative h-screen sticky top-0 z-20 max-md:!w-screen max-md:fixed max-md:inset-0 max-md:border-l-0"
       style={{ width }}
       aria-label={`Chat sidebar for session ${sessionName}`}
       role="complementary"