feat: add command palette search, dashboard rewrite, and shell height fixes (Phase C)

- Add ⌘K command palette with debounced search across flows and sessions
- Rewrite QuickStartPage as dashboard with stats, filters, sessions panel
- Fix h-[calc(100vh-4rem)] → h-full across all pages for CSS Grid shell
- Add active session count badge to sidebar Sessions nav item

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/admin/AdminLayout.tsx

@@ -34,7 +34,7 @@ export function AdminLayout() {
   }, [mobileOpen, handleKeyDown])
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]">
+    <div className="flex h-full">
       {/* Desktop sidebar */}
       <div className="hidden w-60 flex-shrink-0 border-r border-white/[0.06] bg-black md:block">
         <AdminSidebar />

frontend/src/components/layout/CommandPalette.tsx

@@ -0,0 +1,217 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Search, Loader2, ArrowRight, FileText, Clock } from 'lucide-react'
+import { treesApi } from '@/api/trees'
+import { sessionsApi } from '@/api/sessions'
+import type { TreeListItem } from '@/types'
+import type { Session } from '@/types/session'
+import { getTreeNavigatePath } from '@/lib/routing'
+import { cn } from '@/lib/utils'
+
+interface CommandPaletteProps {
+  open: boolean
+  onClose: () => void
+}
+
+interface ResultItem {
+  id: string
+  type: 'tree' | 'session'
+  title: string
+  subtitle?: string
+  icon: 'tree' | 'session'
+  path: string
+}
+
+export function CommandPalette({ open, onClose }: CommandPaletteProps) {
+  const navigate = useNavigate()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<ResultItem[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setResults([])
+      setSelectedIndex(0)
+      // Slight delay to ensure modal is rendered
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open, onClose])
+
+  // Debounced search
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    if (query.length < 2) {
+      setResults([])
+      setIsSearching(false)
+      return
+    }
+    setIsSearching(true)
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const [trees, sessions] = await Promise.all([
+          treesApi.search(query, 6),
+          sessionsApi.list({ size: 5 }).catch(() => [] as Session[]),
+        ])
+
+        const treeResults: ResultItem[] = trees.map((t: TreeListItem) => ({
+          id: t.id,
+          type: 'tree' as const,
+          title: t.name,
+          subtitle: t.description || undefined,
+          icon: 'tree' as const,
+          path: getTreeNavigatePath(t.id, t.tree_type),
+        }))
+
+        // Filter sessions by tree name matching query
+        const sessionResults: ResultItem[] = sessions
+          .filter((s: Session) =>
+            s.tree_snapshot?.name?.toLowerCase().includes(query.toLowerCase())
+          )
+          .slice(0, 3)
+          .map((s: Session) => ({
+            id: s.id,
+            type: 'session' as const,
+            title: s.tree_snapshot?.name || 'Session',
+            subtitle: s.completed_at ? 'Completed' : 'In progress',
+            icon: 'session' as const,
+            path: `/sessions/${s.id}`,
+          }))
+
+        setResults([...treeResults, ...sessionResults])
+      } catch {
+        setResults([])
+      } finally {
+        setIsSearching(false)
+      }
+    }, 250)
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+  }, [query])
+
+  const handleSelect = useCallback((item: ResultItem) => {
+    onClose()
+    navigate(item.path)
+  }, [navigate, onClose])
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && results[selectedIndex]) {
+      e.preventDefault()
+      handleSelect(results[selectedIndex])
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh]">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
+        onClick={onClose}
+      />
+
+      {/* Palette */}
+      <div className="relative w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-border px-4 py-3">
+          <Search size={18} className="shrink-0 text-muted-foreground" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={e => { setQuery(e.target.value); setSelectedIndex(0) }}
+            onKeyDown={handleKeyDown}
+            placeholder="Search flows, sessions…"
+            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+          />
+          <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-72 overflow-y-auto">
+          {isSearching ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : query.length >= 2 && results.length === 0 ? (
+            <div className="px-4 py-8 text-center text-sm text-muted-foreground">
+              No results for &ldquo;{query}&rdquo;
+            </div>
+          ) : results.length > 0 ? (
+            <div className="p-1">
+              {results.map((item, i) => (
+                <button
+                  key={item.id}
+                  onClick={() => handleSelect(item)}
+                  onMouseEnter={() => setSelectedIndex(i)}
+                  className={cn(
+                    'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
+                    i === selectedIndex
+                      ? 'bg-accent text-foreground'
+                      : 'text-muted-foreground hover:bg-accent/50'
+                  )}
+                >
+                  {item.type === 'tree' ? (
+                    <FileText size={16} className="shrink-0 opacity-60" />
+                  ) : (
+                    <Clock size={16} className="shrink-0 opacity-60" />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium truncate">{item.title}</p>
+                    {item.subtitle && (
+                      <p className="text-[0.6875rem] text-muted-foreground truncate">{item.subtitle}</p>
+                    )}
+                  </div>
+                  {i === selectedIndex && (
+                    <ArrowRight size={14} className="shrink-0 opacity-40" />
+                  )}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              Type to search flows and sessions
+            </div>
+          )}
+        </div>
+
+        {/* Footer hints */}
+        {results.length > 0 && (
+          <div className="flex items-center gap-4 border-t border-border px-4 py-2">
+            <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
+              <kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
+              Navigate
+            </span>
+            <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
+              <kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
+              Open
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/layout/Sidebar.tsx

@@ -6,7 +6,7 @@ import { WorkspaceSwitcher } from '@/components/workspace/WorkspaceSwitcher'
 import { CategoryList } from '@/components/workspace/CategoryList'
 import { TagCloud } from '@/components/workspace/TagCloud'
 import { NavItem } from './NavItem'
-import { categoriesApi, tagsApi } from '@/api'
+import { categoriesApi, tagsApi, sessionsApi } from '@/api'
 
 interface CategoryItem {
   id: string
@@ -24,14 +24,16 @@ export function Sidebar() {
   const [tags, setTags] = useState<string[]>([])
   const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
   const [activeTags, setActiveTags] = useState<string[]>([])
+  const [activeSessionCount, setActiveSessionCount] = useState(0)
 
-  // Fetch categories and tags when workspace changes
+  // Fetch categories, tags, and active session count when workspace changes
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [cats, tagList] = await Promise.all([
+        const [cats, tagList, activeSessions] = await Promise.all([
           categoriesApi.list(),
           tagsApi.list().catch(() => []),
+          sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
         ])
         setCategories(cats.map(c => ({
           id: c.id,
@@ -40,6 +42,7 @@ export function Sidebar() {
           count: c.tree_count || 0,
         })))
         setTags(tagList.map((t: { name: string }) => t.name).slice(0, 15))
+        setActiveSessionCount(activeSessions.length)
       } catch {
         // Silently handle errors
       }
@@ -65,7 +68,7 @@ export function Sidebar() {
         <NavItem href="/" icon={LayoutGrid} label="Dashboard" />
         <NavItem href="/trees" icon={Box} label={labels.allItems} matchPaths={['/trees', '/flows']} />
         <NavItem href="/my-trees" icon={PenLine} label={labels.editor} />
-        <NavItem href="/sessions" icon={Clock} label="Sessions" />
+        <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
         <NavItem href="/shares" icon={FileText} label="Exports" />
         <NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
       </div>

frontend/src/components/layout/TopBar.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Search, Zap, Bell, LogOut, User, Shield, Settings } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
@@ -6,6 +6,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 import { useWorkspaceStore } from '@/store/workspaceStore'
 import { getWorkspaceLabels } from '@/constants/workspaceLabels'
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { CommandPalette } from './CommandPalette'
 import { cn } from '@/lib/utils'
 
 export function TopBar() {
@@ -16,6 +17,7 @@ export function TopBar() {
   const labels = getWorkspaceLabels(activeWorkspace?.slug)
 
   const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
   const handleLogout = async () => {
@@ -34,111 +36,131 @@ export function TopBar() {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [userMenuOpen])
 
+  // ⌘K / Ctrl+K global shortcut
+  const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      setCommandPaletteOpen(prev => !prev)
+    }
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleGlobalKeyDown)
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown)
+  }, [handleGlobalKeyDown])
+
   const initials = user?.name
     ? user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
     : user?.email?.[0]?.toUpperCase() || '?'
 
   return (
-    <header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
-      {/* Logo area */}
-      <Link to="/" className="flex items-center gap-2.5 pr-4" style={{ width: 'calc(260px - 40px)' }}>
-        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
-          <BrandLogo size="sm" className="h-4 w-4" />
-        </div>
-        <span className="text-sm font-heading font-bold tracking-tight">
-          <span className="text-foreground">Resolution</span>
-          <span className="text-gradient-brand">Flow</span>
-        </span>
-      </Link>
+    <>
+      <header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
+        {/* Logo area */}
+        <Link to="/" className="flex items-center gap-2.5 pr-4" style={{ width: 'calc(260px - 40px)' }}>
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
+            <BrandLogo size="sm" className="h-4 w-4" />
+          </div>
+          <span className="text-sm font-heading font-bold tracking-tight">
+            <span className="text-foreground">Resolution</span>
+            <span className="text-gradient-brand">Flow</span>
+          </span>
+        </Link>
 
-      {/* Search bar */}
-      <div className="relative flex-1" style={{ maxWidth: '480px' }}>
-        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
-        <input
-          type="text"
-          placeholder={labels.searchPlaceholder}
-          className="w-full rounded-lg border border-border bg-card py-2 pl-9 pr-14 text-[0.8125rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-        />
-        <span className="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
-          ⌘K
-        </span>
-      </div>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Action buttons */}
-      <div className="flex items-center gap-1">
-        <button className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors" title="Quick Launch">
-          <Zap size={18} />
-        </button>
-        <button className="relative rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors" title="Notifications">
-          <Bell size={18} />
+        {/* Search trigger */}
+        <button
+          onClick={() => setCommandPaletteOpen(true)}
+          className="relative flex-1 text-left"
+          style={{ maxWidth: '480px' }}
+        >
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <div className="w-full rounded-lg border border-border bg-card py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer hover:border-primary/30 transition-colors">
+            {labels.searchPlaceholder}
+          </div>
+          <span className="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
+            ⌘K
+          </span>
         </button>
 
-        {/* User avatar & menu */}
-        <div className="relative ml-2" ref={menuRef}>
-          <button
-            onClick={() => setUserMenuOpen(!userMenuOpen)}
-            className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
-            title={user?.name || user?.email || 'User'}
-          >
-            {initials}
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-1">
+          <button className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors" title="Quick Launch">
+            <Zap size={18} />
+          </button>
+          <button className="relative rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors" title="Notifications">
+            <Bell size={18} />
           </button>
 
-          {userMenuOpen && (
-            <div className="absolute right-0 z-50 mt-2 w-56 rounded-lg border border-border bg-card p-1 shadow-xl animate-scale-in">
-              <div className="border-b border-border px-3 py-2.5 mb-1">
-                <p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
-                {effectiveRole && effectiveRole !== 'engineer' && (
-                  <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
-                    <Shield size={10} />
-                    {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
-                  </span>
-                )}
-              </div>
-              <Link
-                to="/account"
-                onClick={() => setUserMenuOpen(false)}
-                className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                <User size={14} />
-                Account
-              </Link>
-              <Link
-                to="/account"
-                onClick={() => setUserMenuOpen(false)}
-                className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                <Settings size={14} />
-                Settings
-              </Link>
-              {isSuperAdmin && (
+          {/* User avatar & menu */}
+          <div className="relative ml-2" ref={menuRef}>
+            <button
+              onClick={() => setUserMenuOpen(!userMenuOpen)}
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
+              title={user?.name || user?.email || 'User'}
+            >
+              {initials}
+            </button>
+
+            {userMenuOpen && (
+              <div className="absolute right-0 z-50 mt-2 w-56 rounded-lg border border-border bg-card p-1 shadow-xl animate-scale-in">
+                <div className="border-b border-border px-3 py-2.5 mb-1">
+                  <p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
+                  {effectiveRole && effectiveRole !== 'engineer' && (
+                    <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
+                      <Shield size={10} />
+                      {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
+                    </span>
+                  )}
+                </div>
                 <Link
-                  to="/admin"
+                  to="/account"
                   onClick={() => setUserMenuOpen(false)}
                   className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <Shield size={14} />
-                  Admin Panel
+                  <User size={14} />
+                  Account
                 </Link>
-              )}
-              <div className="border-t border-border mt-1 pt-1">
-                <button
-                  onClick={handleLogout}
-                  className={cn(
-                    'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm',
-                    'text-muted-foreground hover:bg-accent hover:text-foreground'
-                  )}
+                <Link
+                  to="/account"
+                  onClick={() => setUserMenuOpen(false)}
+                  className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <LogOut size={14} />
-                  Logout
-                </button>
+                  <Settings size={14} />
+                  Settings
+                </Link>
+                {isSuperAdmin && (
+                  <Link
+                    to="/admin"
+                    onClick={() => setUserMenuOpen(false)}
+                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                  >
+                    <Shield size={14} />
+                    Admin Panel
+                  </Link>
+                )}
+                <div className="border-t border-border mt-1 pt-1">
+                  <button
+                    onClick={handleLogout}
+                    className={cn(
+                      'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm',
+                      'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    )}
+                  >
+                    <LogOut size={14} />
+                    Logout
+                  </button>
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
+
+      {/* Command Palette */}
+      <CommandPalette open={commandPaletteOpen} onClose={() => setCommandPaletteOpen(false)} />
+    </>
   )
 }

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -330,7 +330,7 @@ export function ProceduralNavigationPage() {
   const currentStepState = currentStep ? stepStates.get(currentStep.id) : undefined
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col">
+    <div className="flex h-full flex-col">
       {/* Top bar */}
       <div className="border-b border-white/[0.06] px-4 py-3 sm:px-6">
         <div className="flex items-center justify-between gap-4">

frontend/src/pages/QuickStartPage.tsx

@@ -1,12 +1,19 @@
 import { useState, useEffect, useRef } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
-import { Search, Clock, ArrowRight, Play, Loader2, Sparkles } from 'lucide-react'
+import { Search, Plus, Loader2 } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
 import type { Session } from '@/types/session'
 import { getTreeNavigatePath } from '@/lib/routing'
-
+import { useWorkspaceStore } from '@/store/workspaceStore'
+import { getWorkspaceLabels } from '@/constants/workspaceLabels'
+import { usePermissions } from '@/hooks/usePermissions'
+import { QuickStats } from '@/components/dashboard/QuickStats'
+import { FiltersBar } from '@/components/dashboard/FiltersBar'
+import { SectionGroup } from '@/components/dashboard/SectionGroup'
+import { SessionsPanel } from '@/components/dashboard/SessionsPanel'
+import { TreeListItem as TreeListItemComponent } from '@/components/dashboard/TreeListItem'
 
 function timeAgo(dateStr: string): string {
   const now = Date.now()
@@ -18,48 +25,44 @@ function timeAgo(dateStr: string): string {
   const hours = Math.floor(minutes / 60)
   if (hours < 24) return `${hours}h ago`
   const days = Math.floor(hours / 24)
+  if (days === 1) return 'Yesterday'
   return `${days}d ago`
 }
 
 export function QuickStartPage() {
   const navigate = useNavigate()
+  const { canCreateTrees } = usePermissions()
+  const activeWorkspace = useWorkspaceStore(s => s.getActiveWorkspace())
+  const labels = getWorkspaceLabels(activeWorkspace?.slug)
+
   const [query, setQuery] = useState('')
   const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
   const [isSearching, setIsSearching] = useState(false)
   const [showResults, setShowResults] = useState(false)
-  const [activeSessions, setActiveSessions] = useState<Session[]>([])
-  const [recentTrees, setRecentTrees] = useState<{ tree_id: string; name: string; lastUsed: string; tree_type?: string }[]>([])
-  const [isLoading, setIsLoading] = useState(true)
   const searchRef = useRef<HTMLDivElement>(null)
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Load sessions on mount
+  const [trees, setTrees] = useState<TreeListItem[]>([])
+  const [activeSessions, setActiveSessions] = useState<Session[]>([])
+  const [allSessions, setAllSessions] = useState<Session[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  const [activeFilter, setActiveFilter] = useState('all')
+
+  // Load data on mount
   useEffect(() => {
     async function loadData() {
       try {
-        const [active, recent] = await Promise.all([
+        const [treeList, active, recent] = await Promise.all([
+          treesApi.list({ sort_by: 'updated_at' }),
           sessionsApi.list({ completed: false, size: 5 }),
           sessionsApi.list({ size: 10 }),
         ])
-        setActiveSessions(active.slice(0, 3))
-
-        // Deduplicate recent sessions by tree_id, max 5
-        const seen = new Set<string>()
-        const deduped: { tree_id: string; name: string; lastUsed: string; tree_type?: string }[] = []
-        for (const s of recent) {
-          if (!seen.has(s.tree_id) && deduped.length < 5) {
-            seen.add(s.tree_id)
-            deduped.push({
-              tree_id: s.tree_id,
-              name: s.tree_snapshot?.name || 'Unnamed Tree',
-              lastUsed: s.started_at,
-              tree_type: s.tree_snapshot?.tree_type,
-            })
-          }
-        }
-        setRecentTrees(deduped)
+        setTrees(treeList)
+        setActiveSessions(active)
+        setAllSessions(recent)
       } catch (err) {
-        console.error('Failed to load sessions:', err)
+        console.error('Failed to load dashboard data:', err)
       } finally {
         setIsLoading(false)
       }
@@ -70,31 +73,25 @@ export function QuickStartPage() {
   // Debounced search
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current)
-
     if (query.length < 2) {
       setSearchResults([])
       setShowResults(false)
       setIsSearching(false)
       return
     }
-
     setIsSearching(true)
     setShowResults(true)
     debounceRef.current = setTimeout(async () => {
       try {
         const results = await treesApi.search(query, 8)
         setSearchResults(results)
-      } catch (err) {
-        console.error('Search failed:', err)
+      } catch {
         setSearchResults([])
       } finally {
         setIsSearching(false)
       }
     }, 300)
-
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-    }
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
   }, [query])
 
   // Close dropdown on outside click
@@ -108,213 +105,154 @@ export function QuickStartPage() {
     return () => document.removeEventListener('mousedown', handleClick)
   }, [])
 
+  // Compute stats
+  const totalTrees = trees.length
+  const openSessions = activeSessions.length
+  const todaySessions = allSessions.filter(s => {
+    const d = new Date(s.started_at)
+    const now = new Date()
+    return d.toDateString() === now.toDateString()
+  }).length
+  const completedSessions = allSessions.filter(s => s.completed_at).length
+
+  // Filter trees
+  const filteredTrees = activeFilter === 'all'
+    ? trees
+    : activeFilter === 'recent'
+      ? trees.slice(0, 10)
+      : trees
+
+  // Map sessions for SessionsPanel
+  const recentSessionItems = allSessions.slice(0, 5).map(s => ({
+    id: s.id,
+    treeName: s.tree_snapshot?.name || 'Unknown',
+    status: (s.completed_at ? 'completed' : 'in_progress') as 'completed' | 'in_progress',
+    ticketNumber: s.ticket_number || undefined,
+    timeAgo: timeAgo(s.started_at),
+  }))
+
+  const filters = [
+    { id: 'all', label: 'All' },
+    { id: 'recent', label: 'Recently Used' },
+    { id: 'my', label: 'My Flows' },
+    { id: 'team', label: 'Team Flows' },
+  ]
+
   return (
-    <div className="container mx-auto px-4 py-12">
-      {/* Hero Section */}
-      <div className="mb-16 text-center max-w-4xl mx-auto">
-        {/* Badge */}
-        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
-          <Sparkles className="w-4 h-4 text-white/50" />
-          <span className="text-sm text-white/70 font-medium">DECISION TREE PLATFORM</span>
+    <div className="p-6 space-y-6">
+      {/* Page Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="font-heading text-[1.375rem] font-bold tracking-tight text-foreground">
+            Dashboard
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Welcome back. Here&apos;s what&apos;s happening in your workspace.
+          </p>
         </div>
-
-        {/* Main heading */}
-        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tight leading-tight">
-          What are you<br />
-          <span className="text-white/60">troubleshooting?</span>
-        </h1>
-
-        {/* Description */}
-        <p className="text-lg text-white/40 mb-10 max-w-2xl mx-auto leading-relaxed">
-          Search our library of proven flows or continue where you left off
-        </p>
-
-        {/* Search Bar */}
-        <div ref={searchRef} className="relative max-w-2xl mx-auto group">
-          <div className="absolute inset-0 bg-white/5 rounded-2xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
-          <div className="relative glass-card rounded-2xl p-1">
-            <div className="flex items-center bg-black/50 rounded-xl">
-              <Search className="ml-5 w-5 h-5 text-white/40" />
-              <input
-                type="text"
-                autoFocus
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                onFocus={() => query.length >= 2 && setShowResults(true)}
-                placeholder="Paste ticket subject or search for a flow..."
-                className="flex-1 bg-transparent py-4 px-4 text-white placeholder:text-white/30 focus:outline-none"
-              />
-              {isSearching && (
-                <Loader2 className="mr-4 h-5 w-5 animate-spin text-white/30" />
-              )}
-            </div>
-          </div>
-
-          {/* Search Results Dropdown */}
-          {showResults && (
-            <div className="absolute z-10 mt-2 w-full glass-card rounded-2xl shadow-[0_0_40px_rgba(0,0,0,0.5)] overflow-hidden">
-              {isSearching ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="h-5 w-5 animate-spin text-white/40" />
-                </div>
-              ) : searchResults.length === 0 ? (
-                <div className="px-4 py-8 text-center text-sm text-white/40">
-                  No results found
-                </div>
-              ) : (
-                <ul className="max-h-80 overflow-y-auto py-1">
-                  {searchResults.map((tree) => (
-                    <li key={tree.id}>
-                      <button
-                        onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
-                        className="w-full px-5 py-3.5 text-left transition-all hover:bg-white/[0.06]"
-                      >
-                        <div className="text-sm font-medium text-white">
-                          {tree.name}
-                        </div>
-                        {tree.description && (
-                          <div className="mt-0.5 line-clamp-1 text-xs text-white/40">
-                            {tree.description}
-                          </div>
-                        )}
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
+        <div className="flex items-center gap-2">
+          {canCreateTrees && (
+            <Link
+              to={activeWorkspace?.slug === 'procedures' ? '/flows/new' : '/trees/new'}
+              className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
+            >
+              <Plus size={16} />
+              {labels.newItem}
+            </Link>
           )}
         </div>
       </div>
 
-      {/* Continue Session Section */}
-      {activeSessions.length > 0 && (
-        <div className="mx-auto max-w-4xl mb-12">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold text-white">Active Sessions</h2>
-          </div>
+      {/* Quick Stats */}
+      <QuickStats
+        stats={[
+          { label: 'Active Flows', value: totalTrees, gradient: true },
+          { label: 'Sessions Today', value: todaySessions, color: '#f59e0b' },
+          { label: 'Open Sessions', value: openSessions, meta: `${completedSessions} completed` },
+          { label: 'Docs Generated', value: completedSessions },
+        ]}
+      />
 
-          {/* Primary active session — Bright Glow card */}
-          <div className="glass-card-glow backdrop-blur-xl rounded-2xl p-8 mb-4">
-            <div className="flex items-start justify-between">
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-12 h-12 rounded-xl bg-white/15 border border-white/30 flex items-center justify-center">
-                  <Play className="w-6 h-6 text-white/50" />
-                </div>
-                <div>
-                  <div className="text-xs text-white/70 font-semibold uppercase tracking-wider mb-1">
-                    Active Session
-                  </div>
-                  <h3 className="text-xl font-bold text-white">
-                    {activeSessions[0].tree_snapshot?.name || 'Unnamed Tree'}
-                  </h3>
-                </div>
+      {/* Filters */}
+      <FiltersBar filters={filters} activeFilter={activeFilter} onFilterChange={setActiveFilter} />
+
+      {/* Search (inline, not hero) */}
+      <div ref={searchRef} className="relative">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onFocus={() => query.length >= 2 && setShowResults(true)}
+          placeholder={labels.searchPlaceholder}
+          className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+        />
+        {showResults && (
+          <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
+            {isSearching ? (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
               </div>
-              <button
-                onClick={() =>
-                  navigate(getTreeNavigatePath(activeSessions[0].tree_id, activeSessions[0].tree_snapshot?.tree_type), {
-                    state: { sessionId: activeSessions[0].id },
-                  })
-                }
-                className="px-5 py-2.5 bg-white text-black rounded-xl font-semibold hover:bg-white/90 transition-all hover:scale-105"
-              >
-                Continue
-              </button>
-            </div>
-            <p className="text-sm text-white/50 mt-1">
-              {[activeSessions[0].ticket_number, activeSessions[0].client_name]
-                .filter(Boolean)
-                .join(' \u2022 ')}
-              {activeSessions[0].started_at && ` \u2022 Started ${timeAgo(activeSessions[0].started_at)}`}
-            </p>
-          </div>
-
-          {/* Additional active sessions */}
-          {activeSessions.length > 1 && (
-            <div className="grid gap-3 sm:grid-cols-2">
-              {activeSessions.slice(1).map((session) => (
-                <button
-                  key={session.id}
-                  onClick={() =>
-                    navigate(getTreeNavigatePath(session.tree_id, session.tree_snapshot?.tree_type), {
-                      state: { sessionId: session.id },
-                    })
-                  }
-                  className="glass-card hover:glass-card-hover rounded-2xl p-5 text-left transition-all hover:scale-[1.02] cursor-pointer"
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-sm font-bold text-white">
-                        {session.tree_snapshot?.name || 'Unnamed Tree'}
-                      </div>
-                      {(session.ticket_number || session.client_name) && (
-                        <div className="mt-1 truncate text-xs text-white/40">
-                          {[session.ticket_number, session.client_name]
-                            .filter(Boolean)
-                            .join(' - ')}
-                        </div>
+            ) : searchResults.length === 0 ? (
+              <div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
+            ) : (
+              <ul className="max-h-72 overflow-y-auto py-1">
+                {searchResults.map((tree) => (
+                  <li key={tree.id}>
+                    <button
+                      onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
+                      className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
+                    >
+                      <div className="text-sm font-medium text-foreground">{tree.name}</div>
+                      {tree.description && (
+                        <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
                       )}
-                    </div>
-                    <Play className="mt-0.5 h-4 w-4 flex-shrink-0 text-white/50" />
-                  </div>
-                  <div className="mt-3 flex items-center gap-1.5 text-xs text-white/30">
-                    <Clock className="h-3.5 w-3.5" />
-                    <span>{timeAgo(session.started_at)}</span>
-                  </div>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
 
-      {/* Recent Trees Section */}
-      {!isLoading && recentTrees.length > 0 && (
-        <div className="mx-auto max-w-4xl mb-12">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold text-white">Recent Flows</h2>
+      {/* Recent Sessions */}
+      <SessionsPanel sessions={recentSessionItems} delay={150} />
+
+      {/* Tree/Flow List */}
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <SectionGroup
+          title={labels.allItems}
+          count={filteredTrees.length}
+          delay={200}
+        >
+          {filteredTrees.slice(0, 20).map(tree => (
+            <TreeListItemComponent
+              key={tree.id}
+              id={tree.id}
+              name={tree.name}
+              description={tree.description}
+              treeType={tree.tree_type || 'troubleshooting'}
+              category={tree.category_info ? { name: tree.category_info.name, color: undefined } : null}
+              tags={tree.tags}
+              usageCount={tree.usage_count}
+              updatedAt={tree.updated_at}
+            />
+          ))}
+          {filteredTrees.length > 20 && (
             <Link
               to="/trees"
-              className="text-sm text-white/60 hover:text-white font-medium transition-colors"
+              className="block rounded-lg border border-border bg-card px-4 py-3 text-center text-sm text-muted-foreground hover:text-foreground hover:border-border/80 transition-colors"
             >
-              View all
+              View all {filteredTrees.length} flows →
             </Link>
-          </div>
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {recentTrees.map((tree) => (
-              <button
-                key={tree.tree_id}
-                onClick={() => navigate(getTreeNavigatePath(tree.tree_id, tree.tree_type))}
-                className="glass-card hover:glass-card-hover rounded-2xl p-5 text-left transition-all hover:scale-[1.02] cursor-pointer"
-              >
-                <div className="flex items-start justify-between mb-3">
-                  <div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center">
-                    <Search className="w-5 h-5 text-white/40" />
-                  </div>
-                </div>
-                <div className="truncate text-sm font-bold text-white mb-2">
-                  {tree.name}
-                </div>
-                <div className="flex items-center gap-1.5 text-xs text-white/30">
-                  <Clock className="h-3.5 w-3.5" />
-                  <span>Last used {timeAgo(tree.lastUsed)}</span>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
+          )}
+        </SectionGroup>
       )}
-
-      {/* Footer */}
-      <div className="mx-auto max-w-4xl text-center">
-        <Link
-          to="/trees"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-white/10 border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 transition-all"
-        >
-          Browse All Flows
-          <ArrowRight className="h-4 w-4" />
-        </Link>
-      </div>
     </div>
   )
 }

frontend/src/pages/TreeEditorPage.tsx

@@ -353,7 +353,7 @@ export function TreeEditorPage() {
   // Mobile gate: show read-only message
   if (isMobile) {
     return (
-      <div className="flex h-[calc(100vh-4rem)] flex-col items-center justify-center px-6 text-center">
+      <div className="flex h-full flex-col items-center justify-center px-6 text-center">
         <Monitor className="mb-4 h-12 w-12 text-white/50" />
         <h2 className="mb-2 text-xl font-semibold text-white">Desktop Required</h2>
         <p className="mb-6 max-w-sm text-sm text-white/40">
@@ -373,7 +373,7 @@ export function TreeEditorPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col">
+    <div className="flex h-full flex-col">
 
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (

frontend/src/pages/TreeLibraryPage.tsx

@@ -251,7 +251,7 @@ export function TreeLibraryPage() {
     selectedCategoryId || selectedTags.length > 0 || searchQuery || selectedFolderId
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]">
+    <div className="flex h-full">
       {/* Folder Sidebar */}
       <FolderSidebar
         selectedFolderId={selectedFolderId}

frontend/src/pages/TreeNavigationPage.tsx

@@ -609,7 +609,7 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="h-[calc(100vh-4rem)]">
+    <div className="h-full">
       {/* Main Content */}
       <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
       <div className="mx-auto max-w-4xl">