feat: content header with collapse toggle + realtime indicator

- New SidebarProvider context for shared collapse state
- ContentHeader visible on desktop: collapse icon left, "Live" right
- Collapse button removed from sidebar bottom (moved to header)
- Keyboard shortcut [ handled by context, not sidebar
- Realtime indicator polls every 5s, ticks every 1s for freshness

components/dashboard/ContentHeader.tsx

@@ -1,21 +1,67 @@
 'use client'
 
-import { MenuIcon } from '@ciphera-net/ui'
+import { useState, useEffect, useRef } from 'react'
+import { MenuIcon, CollapseLeftIcon, formatUpdatedAgo } from '@ciphera-net/ui'
+import { useSidebar } from '@/lib/sidebar-context'
+import { useRealtime } from '@/lib/swr/dashboard'
 
 export default function ContentHeader({
+  siteId,
   onMobileMenuOpen,
 }: {
+  siteId: string
   onMobileMenuOpen: () => void
 }) {
+  const { collapsed, toggle } = useSidebar()
+  const { data: realtime } = useRealtime(siteId)
+  const lastUpdatedRef = useRef<number | null>(null)
+  const [, setTick] = useState(0)
+
+  // Track when realtime data last changed
+  useEffect(() => {
+    if (realtime) lastUpdatedRef.current = Date.now()
+  }, [realtime])
+
+  // Tick every second to keep "X seconds ago" fresh
+  useEffect(() => {
+    if (lastUpdatedRef.current == null) return
+    const timer = setInterval(() => setTick((t) => t + 1), 1000)
+    return () => clearInterval(timer)
+  }, [realtime])
+
   return (
-    <div className="shrink-0 flex items-center border-b border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-800/60 px-3 py-2">
-      <button
+      {/* Left — mobile hamburger or desktop collapse toggle */}
-        onClick={onMobileMenuOpen}
+      <div className="flex items-center">
-        className="p-2 -ml-2 text-neutral-400 hover:text-white"
+        {/* Mobile hamburger */}
-        aria-label="Open navigation"
+        <button
-      >
+          onClick={onMobileMenuOpen}
-        <MenuIcon className="w-5 h-5" />
+          className="p-2 text-neutral-400 hover:text-white md:hidden"
-      </button>
+          aria-label="Open navigation"
+        >
+          <MenuIcon className="w-5 h-5" />
+        </button>
+
+        {/* Desktop collapse toggle */}
+        <button
+          onClick={toggle}
+          className="hidden md:flex items-center justify-center p-2 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${collapsed ? 'rotate-180' : ''}`} />
+        </button>
+      </div>
+
+      {/* Right — realtime indicator */}
+      {lastUpdatedRef.current != null && (
+        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+          </span>
+          Live · {formatUpdatedAgo(lastUpdatedRef.current)}
+        </div>
+      )}
     </div>
   )
 }

components/dashboard/DashboardShell.tsx

@@ -2,13 +2,12 @@
 
 import { useState, useCallback } from 'react'
 import dynamic from 'next/dynamic'
+import { SidebarProvider } from '@/lib/sidebar-context'
 import ContentHeader from './ContentHeader'
 
 // Load sidebar only on the client — prevents SSR flash
 const Sidebar = dynamic(() => import('./Sidebar'), {
   ssr: false,
-  // Placeholder reserves the sidebar's space in the server HTML
-  // so page content never occupies the sidebar zone
   loading: () => (
     <div
       className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
@@ -31,20 +30,21 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
+    <SidebarProvider>
-      <Sidebar
+      <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
-        siteId={siteId}
+        <Sidebar
-        mobileOpen={mobileOpen}
+          siteId={siteId}
-        onMobileClose={closeMobile}
+          mobileOpen={mobileOpen}
-        onMobileOpen={openMobile}
+          onMobileClose={closeMobile}
-      />
+          onMobileOpen={openMobile}
-      {/* Content panel — rounded corners, inset from edges. The left border doubles as the sidebar's right edge. */}
+        />
-      <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
+        <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
-        <ContentHeader onMobileMenuOpen={openMobile} />
+          <ContentHeader siteId={siteId} onMobileMenuOpen={openMobile} />
-        <main className="flex-1 overflow-y-auto pt-4">
+          <main className="flex-1 overflow-y-auto pt-4">
-          {children}
+            {children}
-        </main>
+          </main>
+        </div>
       </div>
-    </div>
+    </SidebarProvider>
   )
 }

components/dashboard/Sidebar.tsx

@@ -8,6 +8,7 @@ import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
+import { useSidebar } from '@/lib/sidebar-context'
 // `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
@@ -23,8 +24,6 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
-  CollapseLeftIcon,
-  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
@@ -61,7 +60,6 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
 const EXPANDED = 256
 const COLLAPSED = 64
 
@@ -342,7 +340,6 @@ interface SidebarContentProps {
   onMobileClose: () => void
   onExpand: () => void
   onCollapse: () => void
-  onToggle: () => void
   wasCollapsed: React.MutableRefObject<boolean>
   pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
   auth: ReturnType<typeof useAuth>
@@ -353,7 +350,7 @@ interface SidebarContentProps {
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
+  onNavigate, onMobileClose, onExpand, onCollapse,
   wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
 }: SidebarContentProps) {
   const router = useRouter()
@@ -446,28 +443,6 @@ function SidebarContent({
             )}
           </div>
         </div>
-
-        {/* Settings + Collapse */}
-        <div className="space-y-0.5">
-          {!isMobile && (
-            <div className="relative group/collapse">
-              <button
-                onClick={onToggle}
-                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-white/[0.06] w-full overflow-hidden"
-              >
-                <span className="w-7 h-7 flex items-center justify-center shrink-0">
-                  <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
-                </span>
-                <Label collapsed={c}>{c ? 'Expand' : 'Collapse'}</Label>
-              </button>
-              {c && (
-                <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/collapse:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                  Expand (press [)
-                </span>
-              )}
-            </div>
-          )}
-        </div>
       </div>
     </div>
   )
@@ -492,10 +467,7 @@ export default function Sidebar({
   const [mobileClosing, setMobileClosing] = useState(false)
   const wasCollapsedRef = useRef(false)
   const pickerOpenCallbackRef = useRef<(() => void) | null>(null)
-  // Safe to read localStorage directly — this component is loaded with ssr:false
+  const { collapsed, toggle, expand, collapse } = useSidebar()
-  const [collapsed, setCollapsed] = useState(() => {
-    return localStorage.getItem(SIDEBAR_KEY) !== 'false'
-  })
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
   useEffect(() => {
@@ -519,31 +491,6 @@ export default function Sidebar({
   }
   useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
 
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement)?.tagName
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
-      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        e.preventDefault(); toggle()
-      }
-      // `,` shortcut is handled globally by UnifiedSettingsModal — not here
-    }
-    document.addEventListener('keydown', handler)
-    return () => document.removeEventListener('keydown', handler)
-  }, [collapsed])
-
-  const toggle = useCallback(() => {
-    setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
-  }, [])
-
-  const expand = useCallback(() => {
-    setCollapsed(false); localStorage.setItem(SIDEBAR_KEY, 'false')
-  }, [])
-
-  const collapse = useCallback(() => {
-    setCollapsed(true); localStorage.setItem(SIDEBAR_KEY, 'true')
-  }, [])
-
   const handleMobileClose = useCallback(() => {
     setMobileClosing(true)
     setTimeout(() => {
@@ -578,7 +525,7 @@ export default function Sidebar({
           onMobileClose={onMobileClose}
           onExpand={expand}
           onCollapse={collapse}
-          onToggle={toggle}
+
           wasCollapsed={wasCollapsedRef}
           pickerOpenCallbackRef={pickerOpenCallbackRef}
           auth={auth}
@@ -621,7 +568,7 @@ export default function Sidebar({
               onMobileClose={handleMobileClose}
               onExpand={expand}
               onCollapse={collapse}
-              onToggle={toggle}
+    
               wasCollapsed={wasCollapsedRef}
               pickerOpenCallbackRef={pickerOpenCallbackRef}
               auth={auth}

lib/sidebar-context.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { createContext, useContext, useState, useCallback, useEffect } from 'react'
+
+const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
+
+interface SidebarState {
+  collapsed: boolean
+  toggle: () => void
+  expand: () => void
+  collapse: () => void
+}
+
+const SidebarContext = createContext<SidebarState>({
+  collapsed: true,
+  toggle: () => {},
+  expand: () => {},
+  collapse: () => {},
+})
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return true
+    return localStorage.getItem(SIDEBAR_KEY) !== 'false'
+  })
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev
+      localStorage.setItem(SIDEBAR_KEY, String(next))
+      return next
+    })
+  }, [])
+
+  const expand = useCallback(() => {
+    setCollapsed(false)
+    localStorage.setItem(SIDEBAR_KEY, 'false')
+  }, [])
+
+  const collapse = useCallback(() => {
+    setCollapsed(true)
+    localStorage.setItem(SIDEBAR_KEY, 'true')
+  }, [])
+
+  // Keyboard shortcut: [ to toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault()
+        toggle()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [toggle])
+
+  return (
+    <SidebarContext.Provider value={{ collapsed, toggle, expand, collapse }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export function useSidebar() {
+  return useContext(SidebarContext)
+}