diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index 418f203..46b390e 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig, devices } from '@playwright/test'
 
-const baseURL = process.env.BASE_URL || 'http://localhost:3000'
+const baseURL = process.env.BASE_URL || 'http://localhost:3001'
 const isRemote = baseURL.startsWith('https://')
 
 export default defineConfig({
@@ -8,13 +8,14 @@ export default defineConfig({
   globalTeardown: './tests/global-teardown.ts',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 1,
   workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
+  reporter: [['html'], ['list']],
   use: {
     baseURL,
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
+    video: 'off',
   },
 
   projects: [
@@ -23,19 +24,25 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'mobile-chrome',
+      use: { ...devices['Pixel 5'] },
     },
+    ...(process.env.CI ? [
+      {
+        name: 'firefox',
+        use: { ...devices['Desktop Firefox'] },
+      },
+      {
+        name: 'webkit',
+        use: { ...devices['Desktop Safari'] },
+      },
+    ] : []),
   ],
 
   ...(isRemote ? {} : {
     webServer: {
       command: 'npm run dev',
-      url: 'http://localhost:3000',
+      url: 'http://localhost:3001',
       reuseExistingServer: !process.env.CI,
       timeout: 120 * 1000,
     },
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index aed1675..4fa494b 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -5,10 +5,9 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { useRouter } from 'next/navigation'
 import {
   FileText, Search, Upload, AlertTriangle, CheckCircle,
-  Clock, Database, Zap, ChevronRight, X, Loader2,
-  FileWarning, Shield, Network, TrendingUp, BarChart3,
-  Eye, PlayCircle, Pencil, Check, Activity,
-  MessageCircle, FileBarChart, Trash2, RotateCcw
+  Clock, ChevronRight, X, Loader2,
+  FileWarning, Shield, Network, BarChart3,
+  Eye, PlayCircle, Pencil, Check
 } from 'lucide-react'
 import { api, Document, AnalysisSummary } from '@/lib/api'
 import { useToast } from '@/lib/toast'
@@ -23,11 +22,11 @@ const riskColors: Record<RiskLevel, string> = {
   low: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
 }
 
-const riskGlow: Record<RiskLevel, string> = {
-  critical: 'shadow-[0_0_20px_rgba(239,68,68,0.3)]',
-  high: 'shadow-[0_0_15px_rgba(249,115,22,0.2)]',
-  medium: 'shadow-[0_0_10px_rgba(245,158,11,0.15)]',
-  low: 'shadow-none',
+const riskAccentBorder: Record<RiskLevel, string> = {
+  critical: 'border-l-red-500',
+  high: 'border-l-orange-500',
+  medium: 'border-l-amber-500',
+  low: 'border-l-emerald-500',
 }
 
 function formatRelativeTime(iso: string): string {
@@ -74,14 +73,6 @@ function DashboardContent() {
   const [renamingDoc, setRenamingDoc] = useState<string | null>(null)
   const [renameValue, setRenameValue] = useState('')
   const [dragOver, setDragOver] = useState(false)
-  const [activities, setActivities] = useState<Array<{
-    id: string
-    document_id: string | null
-    action: string
-    details: Record<string, unknown>
-    created_at: string
-    filename: string | null
-  }>>([])
   const fileInputRef = useRef<HTMLInputElement>(null)
   const renameInputRef = useRef<HTMLInputElement>(null)
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
@@ -89,14 +80,12 @@ function DashboardContent() {
 
   const loadData = useCallback(async () => {
     try {
-      const [docsResponse, statsResponse, activityResponse] = await Promise.all([
+      const [docsResponse, statsResponse] = await Promise.all([
         api.documents.list({ limit: 50 }),
         api.search.stats(),
-        api.activity.list(15).catch(() => ({ activities: [], total: 0 })),
       ])
       setDocuments(docsResponse.documents)
       setStats(statsResponse)
-      setActivities(activityResponse.activities)
 
       // Load analyses for all completed documents in parallel
       const completed = docsResponse.documents.filter(d => d.status === 'ready' || d.status === 'analyzed')
@@ -186,7 +175,7 @@ function DashboardContent() {
   }
 
   const handleSearch = async () => {
-    if (!searchQuery.trim()) return
+    if (!searchQuery.trim() || searching) return
     setSearching(true)
     try {
       const response = await api.search.query(searchQuery, { limit: 10 })
@@ -436,76 +425,45 @@ function DashboardContent() {
 
       <main id="main-content" className="max-w-[1920px] mx-auto px-4 sm:px-8 py-8">
         <h1 className="sr-only">Contract Dashboard</h1>
-        {/* Stats Row - Data Dense */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-5 mb-6 sm:mb-8"
+        {/* Portfolio Stats Strip */}
+        <div
+          className="grid grid-cols-3 divide-x divide-ink-800/40 border-b border-ink-800/40 mb-8"
           data-tour="stats"
         >
           {loading ? (
-            Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="card p-6">
-                <div className="flex items-start justify-between mb-3">
-                  <div className="skeleton w-10 h-10 rounded-xl" />
-                  <div className="skeleton w-4 h-4 rounded" />
-                </div>
-                <div className="mt-2 space-y-2">
-                  <div className="skeleton h-8 w-16 rounded" />
-                  <div className="skeleton h-4 w-32 rounded" />
-                  <div className="skeleton h-3 w-24 rounded" />
-                </div>
+            Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="px-3 sm:px-6 lg:px-8 py-4 sm:py-5 space-y-2">
+                <div className="skeleton h-6 sm:h-9 w-8 sm:w-12 rounded" />
+                <div className="skeleton h-3 sm:h-4 w-16 sm:w-28 rounded" />
               </div>
             ))
           ) : (
             <>
-              <StatCard
-                icon={<FileText className="w-5 h-5" />}
+              <PortfolioStat
                 value={stats?.documents_indexed ?? 0}
-                label="Documents Indexed"
-                sublabel="Ready for analysis"
-                delay={0}
-                onClick={() => router.push('/search')}
-              />
-              <StatCard
-                icon={<Database className="w-5 h-5" />}
-                value={stats?.chunks_with_embeddings ?? 0}
-                label="Text Chunks"
-                sublabel="Vector embeddings"
-                delay={0.05}
+                label="Contracts"
                 onClick={() => router.push('/search')}
               />
-              <StatCard
-                icon={<Zap className="w-5 h-5" />}
+              <PortfolioStat
                 value={stats?.clauses_extracted ?? 0}
-                label="Clauses Extracted"
-                sublabel="AI-powered analysis"
-                delay={0.1}
+                label="Clauses found"
                 onClick={() => {
                   const docWithClauses = documents.find(d => d.status === 'completed')
-                  if (docWithClauses) {
-                    router.push(`/documents/${docWithClauses.id}`)
-                  } else {
-                    router.push('/search')
-                  }
+                  if (docWithClauses) router.push(`/documents/${docWithClauses.id}`)
+                  else router.push('/search')
                 }}
               />
-              <StatCard
-                icon={<TrendingUp className="w-5 h-5" />}
+              <PortfolioStat
                 value={documents.filter(d => d.status === 'completed').length}
-                label="Ready for Review"
-                sublabel="Completed processing"
-                delay={0.15}
+                label="Ready to review"
                 onClick={() => {
                   const completed = documents.find(d => d.status === 'completed')
-                  if (completed) {
-                    loadAnalysis(completed.id)
-                  }
+                  if (completed) loadAnalysis(completed.id)
                 }}
               />
             </>
           )}
-        </motion.div>
+        </div>
 
         {/* Search Results */}
         <AnimatePresence>
@@ -520,7 +478,7 @@ function DashboardContent() {
                 <div className="flex items-center justify-between mb-5">
                   <div>
                     <h2 className="font-display text-xl font-semibold text-ink-50">Search Results</h2>
-                    <p className="text-xs text-ink-500 mt-0.5 font-mono">{searchResults.length} matches found</p>
+                    <p className="text-xs text-ink-500 mt-0.5">{searchResults.length} matches found</p>
                   </div>
                   <button
                     type="button"
@@ -543,8 +501,8 @@ function DashboardContent() {
                       <div className="flex items-center justify-between mb-2">
                         <span className="text-sm font-semibold text-accent">{result.document_name}</span>
                         <div className="flex items-center gap-2">
-                          <span className="text-[10px] text-ink-500 font-mono uppercase">Relevance</span>
-                          <span className="text-xs text-ink-300 font-mono bg-ink-800/50 px-2 py-0.5 rounded">
+                          <span className="text-[10px] text-ink-500">Relevance</span>
+                          <span className="text-xs text-ink-300 bg-ink-800/50 px-2 py-0.5 rounded">
                             {(result.combined_score * 100).toFixed(0)}%
                           </span>
                         </div>
@@ -563,25 +521,14 @@ function DashboardContent() {
           {/* Document List - Enhanced */}
           <div className="lg:col-span-2" data-tour="documents">
             <div className="card overflow-hidden">
-              <div className="px-4 sm:px-6 py-4 sm:py-5 border-b border-ink-800/50 bg-ink-925">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h2 className="font-display text-lg sm:text-xl font-semibold text-ink-50">Contract Portfolio</h2>
-                    <p className="text-[11px] text-ink-400 mt-1 font-mono">
-                      {documents.length} documents · Click to analyze
-                    </p>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => router.push('/search')}
-                    className="text-xs text-ink-400 hover:text-accent transition-colors flex items-center gap-1.5"
-                  >
-                    <BarChart3 className="w-3.5 h-3.5" />
-                    Advanced View
-                  </button>
+              {documents.length > 0 && (
+                <div className="px-4 sm:px-6 py-3 border-b border-ink-800/30">
+                  <p className="text-xs text-ink-500">
+                    {documents.length} {documents.length === 1 ? 'contract' : 'contracts'} · click to see risk
+                  </p>
                 </div>
-              </div>
-              <div className="divide-y divide-ink-800/30 max-h-[calc(100vh-320px)] overflow-y-auto">
+              )}
+              <div className="divide-y divide-ink-800/30 max-h-[60vh] sm:max-h-[calc(100vh-300px)] overflow-y-auto">
                 {loading ? (
                   <div className="divide-y divide-ink-800/30">
                     {Array.from({ length: 6 }).map((_, i) => (
@@ -612,9 +559,9 @@ function DashboardContent() {
                         </div>
                       </div>
 
-                      <h3 className="text-ink-200 font-semibold text-base">Upload your first contract</h3>
+                      <h3 className="text-ink-200 font-semibold text-base">Add your first contract</h3>
                       <p className="mt-2 text-ink-500 text-sm leading-relaxed">
-                        Drop a PDF here or click below. BrightClause will extract clauses, score risks, and build a searchable index automatically.
+                        Drop any PDF here. We read every clause, flag risky provisions, and surface what needs your attention - in minutes.
                       </p>
 
                       <button
@@ -626,23 +573,23 @@ function DashboardContent() {
                         Choose PDF
                       </button>
 
-                      {/* What happens next */}
+                      {/* Value outcome steps */}
                       <div className="mt-8 pt-6 border-t border-ink-800/40">
-                        <p className="text-[10px] text-ink-500 font-mono uppercase tracking-wider mb-3">What happens next</p>
+                        <p className="text-[10px] text-ink-500 mb-3">What you get</p>
                         <div className="flex items-center justify-center gap-3 text-[11px] text-ink-400">
                           <span className="flex items-center gap-1.5">
-                            <Zap className="w-3 h-3 text-amber-500/70" />
-                            Extract
+                            <FileText className="w-3 h-3 text-amber-500/70" />
+                            Every clause read
                           </span>
                           <ChevronRight className="w-3 h-3 text-ink-700" />
                           <span className="flex items-center gap-1.5">
                             <Shield className="w-3 h-3 text-orange-500/70" />
-                            Score
+                            Risk flagged
                           </span>
                           <ChevronRight className="w-3 h-3 text-ink-700" />
                           <span className="flex items-center gap-1.5">
                             <Search className="w-3 h-3 text-emerald-500/70" />
-                            Index
+                            Nothing missed
                           </span>
                         </div>
                       </div>
@@ -707,6 +654,26 @@ function DashboardContent() {
                                 <h3 className="font-medium text-ink-100 text-[15px] leading-snug truncate">
                                   {doc.filename}
                                 </h3>
+                                {analysisMap.has(doc.id) && (() => {
+                                  const a = analysisMap.get(doc.id)!
+                                  const risk = a.overall_risk as RiskLevel
+                                  const badge = {
+                                    critical: 'bg-red-500/15 text-red-400',
+                                    high: 'bg-orange-500/15 text-orange-400',
+                                    medium: 'bg-amber-500/15 text-amber-400',
+                                    low: 'bg-emerald-500/15 text-emerald-400',
+                                  }[risk]
+                                  return (
+                                    <motion.span
+                                      className={`shrink-0 text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${badge}`}
+                                      initial={{ opacity: 0, scale: 0.7 }}
+                                      animate={{ opacity: 1, scale: 1 }}
+                                      transition={{ duration: 0.2, ease: [0.25, 1, 0.5, 1] }}
+                                    >
+                                      {risk}
+                                    </motion.span>
+                                  )
+                                })()}
                                 <button
                                   type="button"
                                   onClick={(e) => {
@@ -722,7 +689,7 @@ function DashboardContent() {
                               </div>
                             )}
                             <div className="flex items-center gap-4 mt-2">
-                              <span className={`text-[11px] font-mono uppercase tracking-wide ${
+                              <span className={`text-xs ${
                                 doc.status === 'completed' ? 'text-ink-500'
                                 : doc.status === 'queued' ? 'text-blue-400'
                                 : doc.status === 'processing' ? 'text-amber-400'
@@ -739,15 +706,15 @@ function DashboardContent() {
                               {doc.chunk_count > 0 && (
                                 <>
                                   <span className="text-ink-700">·</span>
-                                  <span className="text-[11px] text-ink-400 font-mono uppercase tracking-wide">
-                                    {doc.chunk_count} chunks
+                                  <span className="text-xs text-ink-500">
+                                    {doc.chunk_count} sections
                                   </span>
                                 </>
                               )}
                               {doc.status === 'completed' && (
                                 <>
                                   <span className="text-ink-700">·</span>
-                                  <span className="text-[11px] text-emerald-500 font-mono uppercase tracking-wide">
+                                  <span className="text-xs text-emerald-500">
                                     Ready
                                   </span>
                                 </>
@@ -767,7 +734,7 @@ function DashboardContent() {
                               e.preventDefault()
                               navigateToDocument(doc.id)
                             }}
-                            className="p-2 bg-accent/10 text-accent hover:bg-accent/20 rounded-lg transition-colors"
+                            className="p-3 sm:p-2 min-w-[44px] sm:min-w-0 min-h-[44px] sm:min-h-0 flex items-center justify-center bg-accent/10 text-accent hover:bg-accent/20 rounded-lg transition-colors"
                             aria-label="View document details"
                             title="View Details"
                           >
@@ -798,14 +765,16 @@ function DashboardContent() {
                   {/* Header */}
                   <div className="px-6 py-5 border-b border-ink-800/50 bg-ink-925">
                     <h2 className="font-display text-xl font-semibold text-ink-50">Risk Assessment</h2>
-                    <p className="text-[11px] text-ink-400 mt-1 font-mono uppercase tracking-wide">
-                      {selectedAnalysis ? 'Document Analysis' : `Portfolio · ${portfolioRisk?.docCount} Documents`}
+                    <p className="text-xs text-ink-500 mt-1">
+                      {selectedAnalysis ? 'Document analysis' : `Portfolio · ${portfolioRisk?.docCount} contracts`}
                     </p>
                   </div>
 
                   {(() => {
                     const risk = selectedAnalysis ?? portfolioRisk!
-                    const overallRisk = selectedAnalysis ? selectedAnalysis.overall_risk as RiskLevel : portfolioRisk!.overall
+                    const validRiskLevels: RiskLevel[] = ['critical', 'high', 'medium', 'low']
+                    const rawRisk = selectedAnalysis ? selectedAnalysis.overall_risk : portfolioRisk!.overall
+                    const overallRisk: RiskLevel = validRiskLevels.includes(rawRisk as RiskLevel) ? rawRisk as RiskLevel : 'low'
                     const clauses = selectedAnalysis ? selectedAnalysis.clauses_extracted : portfolioRisk!.totalClauses
                     const riskCounts = selectedAnalysis
                       ? { critical: selectedAnalysis.risk_summary.critical || 0, high: selectedAnalysis.risk_summary.high || 0, medium: selectedAnalysis.risk_summary.medium || 0, low: selectedAnalysis.risk_summary.low || 0 }
@@ -813,12 +782,14 @@ function DashboardContent() {
                     const highlights = selectedAnalysis ? selectedAnalysis.high_risk_highlights : portfolioRisk!.highlights
                     return (
                       <div className="p-6 space-y-6">
-                        {/* Overall Risk - Prominent */}
-                        <div className={`p-5 rounded-xl border-2 ${riskGlow[overallRisk]} ${riskColors[overallRisk]}`}>
-                          <div className="text-center">
-                            <div className="text-[11px] text-ink-400 font-mono uppercase tracking-wide mb-2">
-                              Overall Risk Level
-                            </div>
+                        {/* Overall Risk - Left-border treatment */}
+                        <motion.div
+                          className={`flex items-center gap-4 pl-5 py-3 border-l-4 ${riskAccentBorder[overallRisk] ?? 'border-l-ink-600'}`}
+                          initial={{ opacity: 0, x: -8 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{ duration: 0.35, ease: [0.25, 1, 0.5, 1] }}
+                        >
+                          <div>
                             <div className={`text-3xl font-bold uppercase tracking-tight ${
                               overallRisk === 'critical' ? 'text-red-400' :
                               overallRisk === 'high' ? 'text-orange-400' :
@@ -826,46 +797,57 @@ function DashboardContent() {
                             }`}>
                               {overallRisk}
                             </div>
-                            <div className="mt-3 pt-3 border-t border-current/20">
-                              <div className="text-[10px] text-ink-500 font-mono uppercase">
-                                {clauses} Clauses Analyzed
-                              </div>
-                            </div>
+                            <div className="text-xs text-ink-400 mt-0.5">{clauses} clauses analyzed</div>
                           </div>
-                        </div>
+                        </motion.div>
 
-                        {/* Risk Distribution - Data Dense Grid */}
+                        {/* Risk Distribution - data row + stacked bar */}
                         <div>
-                          <h3 className="text-[11px] font-mono uppercase tracking-wide text-ink-400 mb-3">
-                            Risk Distribution
-                          </h3>
-                          <div className="grid grid-cols-2 gap-3">
-                            {(['critical', 'high', 'medium', 'low'] as RiskLevel[]).map((level) => (
-                              <div
+                          <p className="text-xs text-ink-500 mb-3">Risk breakdown</p>
+                          <div className="flex mb-3">
+                            {([
+                              { level: 'critical' as RiskLevel, color: 'text-red-400' },
+                              { level: 'high' as RiskLevel, color: 'text-orange-400' },
+                              { level: 'medium' as RiskLevel, color: 'text-amber-400' },
+                              { level: 'low' as RiskLevel, color: 'text-emerald-400' },
+                            ]).map(({ level, color }, idx) => (
+                              <motion.div
                                 key={level}
-                                className={`p-4 rounded-lg border ${riskColors[level]} text-center`}
+                                className="flex-1 text-center"
+                                initial={{ opacity: 0, y: 6 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: idx * 0.06, duration: 0.3, ease: [0.25, 1, 0.5, 1] }}
                               >
-                                <div className={`text-2xl font-bold font-mono ${
-                                  level === 'critical' ? 'text-red-400' :
-                                  level === 'high' ? 'text-orange-400' :
-                                  level === 'medium' ? 'text-amber-400' : 'text-emerald-400'
-                                }`}>
-                                  {riskCounts[level]}
-                                </div>
-                                <div className="text-[10px] uppercase font-mono tracking-wide text-ink-500 mt-1">
-                                  {level}
-                                </div>
-                              </div>
+                                <div className={`text-2xl font-bold tabular-nums ${color}`}>{riskCounts[level]}</div>
+                                <div className="text-[10px] text-ink-600 mt-0.5 capitalize">{level}</div>
+                              </motion.div>
                             ))}
                           </div>
+                          {clauses > 0 && (
+                            <div className="flex h-1 rounded-full overflow-hidden">
+                              {([
+                                { count: riskCounts.critical, color: 'bg-red-500' },
+                                { count: riskCounts.high, color: 'bg-orange-400' },
+                                { count: riskCounts.medium, color: 'bg-amber-400' },
+                                { count: riskCounts.low, color: 'bg-emerald-500' },
+                              ] as { count: number; color: string }[]).filter(s => s.count > 0).map((s, i) => (
+                                <motion.div
+                                  key={s.color}
+                                  className={s.color}
+                                  style={{ flex: s.count, originX: 0 }}
+                                  initial={{ scaleX: 0 }}
+                                  animate={{ scaleX: 1 }}
+                                  transition={{ delay: i * 0.07, duration: 0.5, ease: [0.25, 1, 0.5, 1] }}
+                                />
+                              ))}
+                            </div>
+                          )}
                         </div>
 
                         {/* High Risk Highlights */}
                         {highlights.length > 0 && (
                           <div>
-                            <h3 className="text-[11px] font-mono uppercase tracking-wide text-ink-400 mb-3">
-                              Attention Required
-                            </h3>
+                            <h3 className="text-xs text-ink-500 mb-3">Attention required</h3>
                             <div className="space-y-3">
                               {highlights.slice(0, 3).map((highlight, i) => (
                                 <motion.div
@@ -884,7 +866,7 @@ function DashboardContent() {
                                       highlight.risk_level === 'critical' ? 'text-red-400' : 'text-orange-400'
                                     }`} />
                                     <span className="font-semibold text-ink-100 text-xs uppercase tracking-wide">
-                                      {highlight.clause_type.replace(/_/g, ' ')}
+                                      {(highlight.clause_type ?? '').replace(/_/g, ' ')}
                                     </span>
                                   </div>
                                   <p className="text-ink-400 text-xs leading-relaxed line-clamp-3">
@@ -946,16 +928,16 @@ function DashboardContent() {
                 >
                   <div className="px-6 py-5 border-b border-ink-800/50 bg-ink-925">
                     <h2 className="font-display text-xl font-semibold text-ink-50">Risk Assessment</h2>
-                    <p className="text-[11px] text-ink-400 mt-1 font-mono uppercase tracking-wide">Not Yet Analyzed</p>
+                    <p className="text-xs text-ink-400 mt-1">Not yet analyzed</p>
                   </div>
-                  <div className="p-6 flex flex-col items-center text-center gap-6">
-                    <div className="mt-4 p-5 rounded-full bg-ink-800/60 border border-ink-700/50">
-                      <Shield className="w-10 h-10 text-ink-500" />
+                  <div className="p-6 flex flex-col items-center text-center gap-5">
+                    <div className="mt-2 p-4 rounded-full bg-ink-800/60 border border-ink-700/50">
+                      <Shield className="w-9 h-9 text-ink-500" />
                     </div>
                     <div>
-                      <p className="text-ink-200 font-medium mb-1">No analysis yet</p>
+                      <p className="text-ink-200 font-medium mb-1">Analyze this contract</p>
                       <p className="text-sm text-ink-400 leading-relaxed">
-                        Run AI analysis to extract clauses, assess risk levels, and identify key provisions in this document.
+                        We&apos;ll read every clause, identify the risky ones, and flag anything that needs your attention.
                       </p>
                     </div>
                     <button
@@ -974,133 +956,16 @@ function DashboardContent() {
                 <motion.div
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
-                  className="card overflow-hidden"
+                  className="card p-6 flex flex-col items-center justify-center text-center gap-3 min-h-[200px]"
                 >
-                  <div className="px-6 py-5 border-b border-ink-800/50 bg-ink-925">
-                    <h2 className="font-display text-xl font-semibold text-ink-50">Risk Assessment</h2>
-                    <p className="text-[11px] text-ink-400 mt-1 font-mono uppercase tracking-wide">
-                      Select a document
-                    </p>
-                  </div>
-                  <div className="p-6">
-                    {/* Preview of what the panel shows */}
-                    <div className="p-5 rounded-xl border border-ink-800/30 bg-ink-900/20 mb-5">
-                      <div className="text-center">
-                        <div className="text-[11px] text-ink-500 font-mono uppercase tracking-wide mb-2">
-                          Overall Risk Level
-                        </div>
-                        <div className="text-2xl font-bold text-ink-500 tracking-tight">
-                          — — —
-                        </div>
-                        <div className="mt-3 pt-3 border-t border-ink-800/30">
-                          <div className="text-[10px] text-ink-500 font-mono uppercase">
-                            No document selected
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Ghost risk grid */}
-                    <div className="grid grid-cols-2 gap-3 mb-5">
-                      {['Critical', 'High', 'Medium', 'Low'].map((level) => (
-                        <div key={level} className="p-3 rounded-lg border border-ink-800/20 bg-ink-900/10 text-center">
-                          <div className="text-lg font-bold font-mono text-ink-500">0</div>
-                          <div className="text-[10px] uppercase font-mono tracking-wide text-ink-500 mt-0.5">{level}</div>
-                        </div>
-                      ))}
-                    </div>
-
-                    {/* Guidance */}
-                    <div className="text-center py-4">
-                      <Shield className="w-10 h-10 text-ink-800 mx-auto mb-3" />
-                      <p className="text-sm text-ink-500">
-                        Click a contract from the portfolio to see its risk breakdown, flagged clauses, and recommended actions.
-                      </p>
-                    </div>
-                  </div>
+                  <Shield className="w-8 h-8 text-ink-700" />
+                  <p className="text-sm text-ink-500">Select a contract to see its risk breakdown</p>
                 </motion.div>
               )}
             </AnimatePresence>
           </div>
         </div>
 
-        {/* Activity Feed */}
-        {activities.length > 0 && (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="mt-6 sm:mt-8"
-          >
-            <div className="card overflow-hidden">
-              <div className="px-4 sm:px-6 py-4 sm:py-5 border-b border-ink-800/50 bg-ink-925">
-                <div className="flex items-center gap-2">
-                  <Activity className="w-4 h-4 text-accent" />
-                  <h2 className="font-display text-lg font-semibold text-ink-50">Recent Activity</h2>
-                  <span className="text-[11px] text-ink-400 font-mono ml-auto">{activities.length} events</span>
-                </div>
-              </div>
-              <div className="divide-y divide-ink-800/30 max-h-[400px] overflow-y-auto">
-                {activities.map((act, i) => (
-                  <motion.div
-                    key={act.id}
-                    initial={{ opacity: 0, x: -10 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ delay: i * 0.03 }}
-                    className="px-4 sm:px-6 py-3 flex items-start gap-3 hover:bg-ink-900/30 transition-colors"
-                  >
-                    <div className={`mt-0.5 p-1.5 rounded-lg shrink-0 ${
-                      act.action === 'uploaded' ? 'bg-emerald-500/10 text-emerald-400' :
-                      act.action === 'deleted' ? 'bg-red-500/10 text-red-400' :
-                      act.action === 'chat_question' ? 'bg-blue-500/10 text-blue-400' :
-                      act.action === 'extraction_started' ? 'bg-amber-500/10 text-amber-400' :
-                      act.action === 'report_generated' ? 'bg-purple-500/10 text-purple-400' :
-                      'bg-ink-800/50 text-ink-400'
-                    }`}>
-                      {act.action === 'uploaded' && <Upload className="w-3.5 h-3.5" />}
-                      {act.action === 'deleted' && <Trash2 className="w-3.5 h-3.5" />}
-                      {act.action === 'chat_question' && <MessageCircle className="w-3.5 h-3.5" />}
-                      {act.action === 'extraction_started' && <Zap className="w-3.5 h-3.5" />}
-                      {act.action === 'report_generated' && <FileBarChart className="w-3.5 h-3.5" />}
-                      {!['uploaded', 'deleted', 'chat_question', 'extraction_started', 'report_generated'].includes(act.action) && (
-                        <RotateCcw className="w-3.5 h-3.5" />
-                      )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm text-ink-200">
-                        <span className="font-medium text-ink-100 capitalize">{act.action.replace(/_/g, ' ')}</span>
-                        {act.filename && (
-                          <>
-                            {' — '}
-                            {act.document_id ? (
-                              <button
-                                type="button"
-                                onClick={() => router.push(`/documents/${act.document_id}`)}
-                                className="text-accent hover:text-accent-light transition-colors"
-                              >
-                                {act.filename}
-                              </button>
-                            ) : (
-                              <span className="text-ink-400">{act.filename}</span>
-                            )}
-                          </>
-                        )}
-                        {act.action === 'chat_question' && typeof act.details?.question === 'string' && (
-                          <span className="text-ink-400 ml-1 italic">
-                            &quot;{act.details.question.slice(0, 80)}{act.details.question.length > 80 ? '...' : ''}&quot;
-                          </span>
-                        )}
-                      </p>
-                      <p className="text-[11px] text-ink-400 font-mono mt-0.5">
-                        {formatRelativeTime(act.created_at)}
-                      </p>
-                    </div>
-                  </motion.div>
-                ))}
-              </div>
-            </div>
-          </motion.div>
-        )}
       </main>
 
       <WalkthroughOverlay
@@ -1116,46 +981,35 @@ function DashboardContent() {
   )
 }
 
-function StatCard({
-  icon,
+function PortfolioStat({
   value,
   label,
-  sublabel,
-  delay,
   onClick,
 }: {
-  icon: React.ReactNode
   value: number
   label: string
-  sublabel: string
-  delay: number
   onClick?: () => void
 }) {
-  const Wrapper = onClick ? motion.button : motion.div
-  return (
-    <Wrapper
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay, duration: 0.4 }}
-      onClick={onClick}
-      className={`card p-6 hover:border-accent/20 transition-all duration-300 group text-left
-                ${onClick ? 'cursor-pointer hover:scale-[1.02] active:scale-[0.98]' : ''}`}
-    >
-      <div className="flex items-start justify-between mb-3">
-        <div className="p-2.5 rounded-xl bg-accent/10 text-accent group-hover:bg-accent/20 transition-colors">
-          {icon}
-        </div>
-        {onClick && (
-          <ChevronRight className="w-4 h-4 text-ink-600 group-hover:text-accent transition-colors" />
-        )}
-      </div>
-      <div className="mt-2">
-        <p className="text-3xl font-bold font-mono text-ink-50 tracking-tight">
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="px-3 sm:px-6 lg:px-8 py-4 sm:py-5 text-left cursor-pointer hover:bg-ink-900/40 group transition-colors"
+      >
+        <span className="text-xl sm:text-3xl lg:text-4xl font-bold tabular-nums tracking-tight text-ink-50 group-hover:text-accent transition-colors block">
           {value.toLocaleString()}
-        </p>
-        <p className="text-sm font-semibold text-ink-300 mt-1">{label}</p>
-        <p className="text-[10px] text-ink-500 mt-1 font-mono uppercase tracking-wide">{sublabel}</p>
-      </div>
-    </Wrapper>
+        </span>
+        <p className="text-[11px] sm:text-sm text-ink-500 mt-0.5 sm:mt-1 leading-tight">{label}</p>
+      </button>
+    )
+  }
+  return (
+    <div className="px-3 sm:px-6 lg:px-8 py-4 sm:py-5">
+      <span className="text-xl sm:text-3xl lg:text-4xl font-bold tabular-nums tracking-tight text-ink-50 block">
+        {value.toLocaleString()}
+      </span>
+      <p className="text-[11px] sm:text-sm text-ink-500 mt-0.5 sm:mt-1 leading-tight">{label}</p>
+    </div>
   )
 }
diff --git a/frontend/src/app/documents/[id]/graph/page.tsx b/frontend/src/app/documents/[id]/graph/page.tsx
index 78e6702..4b92e4d 100644
--- a/frontend/src/app/documents/[id]/graph/page.tsx
+++ b/frontend/src/app/documents/[id]/graph/page.tsx
@@ -127,15 +127,36 @@ export default function GraphPage() {
 
   const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const pollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const elapsedIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const extractionStartRef = useRef<number | null>(null)
+  const [extractionElapsed, setExtractionElapsed] = useState(0)
 
   // Cleanup polling on unmount
   useEffect(() => {
     return () => {
       if (pollIntervalRef.current) clearInterval(pollIntervalRef.current)
       if (pollTimeoutRef.current) clearTimeout(pollTimeoutRef.current)
+      if (elapsedIntervalRef.current) clearInterval(elapsedIntervalRef.current)
     }
   }, [])
 
+  // Track elapsed time during extraction
+  useEffect(() => {
+    if (extracting) {
+      extractionStartRef.current = Date.now()
+      setExtractionElapsed(0)
+      elapsedIntervalRef.current = setInterval(() => {
+        setExtractionElapsed(Math.floor((Date.now() - (extractionStartRef.current ?? Date.now())) / 1000))
+      }, 1000)
+    } else {
+      if (elapsedIntervalRef.current) clearInterval(elapsedIntervalRef.current)
+      extractionStartRef.current = null
+    }
+    return () => {
+      if (elapsedIntervalRef.current) clearInterval(elapsedIntervalRef.current)
+    }
+  }, [extracting])
+
   const triggerExtraction = async () => {
     setExtracting(true)
     try {
@@ -813,10 +834,9 @@ export default function GraphPage() {
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="text-center">
                 <Network className="w-16 h-16 text-ink-700 mx-auto" />
-                <h3 className="font-display text-lg font-semibold mt-4">No Entities Extracted</h3>
+                <h3 className="font-display text-lg font-semibold mt-4">No knowledge graph yet</h3>
                 <p className="text-ink-500 mt-2 max-w-md">
-                  Extract entities and relationships from this document to visualize
-                  the knowledge graph.
+                  Build the graph for this contract - extract parties, dates, amounts, and the relationships between them.
                 </p>
                 <button
                   onClick={triggerExtraction}
@@ -826,12 +846,12 @@ export default function GraphPage() {
                   {extracting ? (
                     <>
                       <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                      Extracting...
+                      Analyzing{extractionElapsed > 0 ? ` · ${extractionElapsed}s` : '...'}
                     </>
                   ) : (
                     <>
                       <Network className="w-4 h-4 mr-2" />
-                      Extract Entities
+                      Build Knowledge Graph
                     </>
                   )}
                 </button>
diff --git a/frontend/src/app/documents/[id]/page.tsx b/frontend/src/app/documents/[id]/page.tsx
index 9d03675..68c9b3f 100644
--- a/frontend/src/app/documents/[id]/page.tsx
+++ b/frontend/src/app/documents/[id]/page.tsx
@@ -703,7 +703,7 @@ export default function DocumentDetailPage() {
                               <div>
                                 <div className="flex items-center gap-2">
                                   <span className="font-medium text-ink-100">
-                                    {clauseTypeLabels[clause.clause_type] || clause.clause_type.replace(/_/g, ' ')}
+                                    {clauseTypeLabels[clause.clause_type] || (clause.clause_type ?? '').replace(/_/g, ' ')}
                                   </span>
                                   <span className={`px-2 py-0.5 rounded-full text-xs font-medium uppercase ${risk.color} ${risk.bg}/10`}>
                                     {clause.risk_level}
@@ -930,7 +930,7 @@ export default function DocumentDetailPage() {
                                 {clause.risk_level}
                               </span>
                               <div>
-                                <span className="text-sm font-medium text-ink-200">{clause.clause_type}</span>
+                                <span className="text-sm font-medium text-ink-200">{clauseTypeLabels[clause.clause_type] || (clause.clause_type ?? '').replace(/_/g, ' ')}</span>
                                 <p className="text-xs text-ink-400 mt-0.5 line-clamp-2">{clause.summary}</p>
                               </div>
                             </div>
diff --git a/frontend/src/lib/navigation.tsx b/frontend/src/lib/navigation.tsx
index c83ee80..21f2c83 100644
--- a/frontend/src/lib/navigation.tsx
+++ b/frontend/src/lib/navigation.tsx
@@ -3,7 +3,7 @@
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 import Image from 'next/image'
-import { LayoutDashboard, BarChart3, GitCompareArrows, Search, Menu, X, Sun, Moon, ClipboardCheck, Briefcase } from 'lucide-react'
+import { LayoutDashboard, BarChart3, GitCompareArrows, Menu, X, Sun, Moon, ClipboardCheck, Briefcase } from 'lucide-react'
 import { useState } from 'react'
 import { useTheme } from '@/lib/theme'
 
@@ -13,7 +13,6 @@ const navLinks = [
   { href: '/compare', label: 'Compare', icon: GitCompareArrows },
   { href: '/obligations', label: 'Obligations', icon: ClipboardCheck },
   { href: '/deals', label: 'Deals', icon: Briefcase },
-  { href: '/search', label: 'Search', icon: Search },
 ]
 
 export function Navigation({ children }: { children?: React.ReactNode }) {
@@ -36,7 +35,7 @@ export function Navigation({ children }: { children?: React.ReactNode }) {
             />
             <div className="hidden sm:block">
               <span className="font-display text-xl font-bold tracking-tight text-ink-50">BrightClause</span>
-              <p className="text-[10px] text-ink-500 tracking-wide uppercase font-mono">Contract Intelligence</p>
+              <p className="text-[10px] text-ink-500 tracking-wide">Contract Intelligence</p>
             </div>
           </Link>
 
diff --git a/frontend/src/lib/walkthrough.tsx b/frontend/src/lib/walkthrough.tsx
index 4b21a02..83b3575 100644
--- a/frontend/src/lib/walkthrough.tsx
+++ b/frontend/src/lib/walkthrough.tsx
@@ -14,32 +14,32 @@ interface WalkthroughStep {
 const WALKTHROUGH_STEPS: WalkthroughStep[] = [
   {
     target: '[data-tour="stats"]',
-    title: 'Portfolio Overview',
-    description: 'Real-time statistics showing your indexed documents, text chunks with vector embeddings, extracted clauses, and documents ready for review.',
+    title: 'Your contract portfolio',
+    description: 'A live snapshot of every contract in your portfolio - how many you have, how many clauses have been found, and which ones are ready to review.',
     position: 'bottom',
   },
   {
     target: '[data-tour="search"]',
-    title: 'Semantic Search',
-    description: 'Search across all contracts using natural language. Our hybrid search combines AI semantic understanding with keyword matching for precise results.',
+    title: 'Search across all contracts',
+    description: 'Ask a question in plain English and find the answer across every contract at once. Try: "does any contract limit our liability to under $50k?"',
     position: 'bottom',
   },
   {
     target: '[data-tour="upload"]',
-    title: 'Upload Contracts',
-    description: 'Upload PDF contracts for automated processing. Documents are parsed, chunked, embedded, and analyzed by our AI pipeline.',
+    title: 'Add a contract',
+    description: 'Drop any PDF contract here. Within a few minutes, every clause is read, categorized by type, and given a risk rating - automatically.',
     position: 'bottom',
   },
   {
     target: '[data-tour="documents"]',
-    title: 'Contract Portfolio',
-    description: 'Click any document to view its AI risk assessment. Each contract is analyzed for clause types, risk levels, and key provisions.',
+    title: 'Click to see risk',
+    description: 'Click any contract to see its overall risk rating. Contracts with critical or high-risk clauses are flagged so you know where to focus first.',
     position: 'right',
   },
   {
     target: '[data-tour="analysis"]',
-    title: 'Risk Assessment Panel',
-    description: 'AI-powered analysis shows overall risk, risk distribution, and highlights clauses that need attention. Click "View Full Analysis" for detailed clause-by-clause review.',
+    title: 'Risk breakdown',
+    description: 'The risk panel shows the overall exposure and which specific clauses need attention. Click "View Full Analysis" to read each flagged clause with a plain-English explanation.',
     position: 'left',
   },
 ]
@@ -179,8 +179,8 @@ export function WalkthroughOverlay({
           <div className="px-5 py-4 border-b border-ink-800/50 flex items-center justify-between">
             <div className="flex items-center gap-2">
               <Sparkles className="w-4 h-4 text-accent" />
-              <span className="text-xs font-mono text-ink-300 uppercase tracking-wide">
-                Step {step + 1} of {totalSteps}
+              <span className="text-xs text-ink-400">
+                {step + 1} of {totalSteps}
               </span>
             </div>
             <button
diff --git a/frontend/tests/dashboard.spec.ts b/frontend/tests/dashboard.spec.ts
index d5b8ade..318c21e 100644
--- a/frontend/tests/dashboard.spec.ts
+++ b/frontend/tests/dashboard.spec.ts
@@ -1,152 +1,763 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 
-const FRONTEND_URL = process.env.BASE_URL || 'http://localhost:3000'
+// -----------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------
 
-test.describe('BrightClause Dashboard', () => {
-  test.beforeEach(async ({ page }) => {
+async function goDashboard(page: Page, skipWalkthrough = true) {
+  if (skipWalkthrough) {
     await page.addInitScript(() => {
       localStorage.setItem('bc_walkthrough_seen', 'true')
     })
-    await page.goto(`${FRONTEND_URL}/dashboard`, { waitUntil: 'domcontentloaded' })
-    await page.waitForTimeout(3000)
+  }
+  await page.goto('/dashboard', { waitUntil: 'domcontentloaded' })
+  // Wait for the stat strip to be visible - it always renders (even while loading)
+  await page.waitForSelector('[data-tour="stats"]', { timeout: 20000 })
+}
+
+// Mock helpers - intercept the documents list and stats APIs.
+// The app calls /api/documents, /api/search/stats, /api/analysis/{id}/summary.
+// All go through the Next.js proxy so URLs are relative to localhost:3001.
+
+async function mockEmptyState(page: Page) {
+  await page.route('**/api/documents*', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ documents: [], total: 0 }),
+    })
+  })
+  await page.route('**/api/search/stats*', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ documents_indexed: 0, chunks_with_embeddings: 0, clauses_extracted: 0 }),
+    })
+  })
+}
+
+// -----------------------------------------------------------------------
+// Navigation
+// -----------------------------------------------------------------------
+
+test.describe('Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await goDashboard(page)
   })
 
-  test('should load dashboard and display header correctly', async ({ page }) => {
-    // Navigation header with branding
+  test('shows BrightClause branding', async ({ page }) => {
     await expect(page.getByText('BrightClause').first()).toBeVisible()
+  })
+
+  test('has exactly 5 nav links', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    const links = nav.getByRole('link')
+    await expect(links).toHaveCount(5)
+  })
+
+  test('nav items are Dashboard, Analytics, Compare, Obligations, Deals', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    for (const label of ['Dashboard', 'Analytics', 'Compare', 'Obligations', 'Deals']) {
+      await expect(nav.getByRole('link', { name: label })).toBeVisible()
+    }
+  })
+
+  test('no Search nav item', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    await expect(nav.getByRole('link', { name: /^search$/i })).not.toBeVisible()
+  })
+
+  test('Dashboard link is active/highlighted', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    const dashLink = nav.getByRole('link', { name: 'Dashboard' })
+    await expect(dashLink).toHaveClass(/bg-accent/)
+  })
 
-    // Search input
+  test('Analytics link navigates to /analytics', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    await nav.getByRole('link', { name: 'Analytics' }).click()
+    await page.waitForURL(/\/analytics/, { timeout: 10000 })
+    expect(page.url()).toContain('/analytics')
+  })
+
+  test('Compare link navigates to /compare', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    await nav.getByRole('link', { name: 'Compare' }).click()
+    await page.waitForURL(/\/compare/, { timeout: 10000 })
+    expect(page.url()).toContain('/compare')
+  })
+
+  test('Obligations link navigates to /obligations', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    await nav.getByRole('link', { name: 'Obligations' }).click()
+    await page.waitForURL(/\/obligations/, { timeout: 10000 })
+    expect(page.url()).toContain('/obligations')
+  })
+
+  test('Deals link navigates to /deals', async ({ page }) => {
+    const nav = page.locator('nav[aria-label="Main navigation"]')
+    await nav.getByRole('link', { name: 'Deals' }).click()
+    await page.waitForURL(/\/deals/, { timeout: 10000 })
+    expect(page.url()).toContain('/deals')
+  })
+
+  test('inline search input is visible in header', async ({ page }) => {
     await expect(page.getByPlaceholder('Search...')).toBeVisible()
+  })
 
-    // Upload button
+  test('Upload button is visible in header', async ({ page }) => {
     await expect(page.getByRole('button', { name: /Upload/i })).toBeVisible()
   })
 
-  test('should display stats cards with correct data', async ({ page }) => {
-    await expect(page.locator('text=Documents Indexed').first()).toBeVisible()
-    await expect(page.locator('text=Text Chunks').first()).toBeVisible()
-    await expect(page.locator('text=Clauses Extracted').first()).toBeVisible()
+  test('Tour button is visible in header', async ({ page }) => {
+    // WalkthroughButton renders with title="Restart guided tour" and visible text "Tour"
+    // Match by title attribute since there's no aria-label
+    const tourBtn = page.locator('button[title="Restart guided tour"]')
+    await expect(tourBtn).toBeVisible()
   })
 
-  test('should display document list with correct structure', async ({ page }) => {
-    await page.waitForTimeout(2000)
+  test('theme toggle button is visible', async ({ page }) => {
+    const toggle = page.getByRole('button', { name: /Switch to (light|dark) mode/i })
+    await expect(toggle).toBeVisible()
+  })
+})
 
-    const pdfFiles = page.locator('h3').filter({ hasText: /\.pdf$/i })
-    const docCount = await pdfFiles.count()
+// -----------------------------------------------------------------------
+// Stat strip (3-column, grid-cols-3)
+// -----------------------------------------------------------------------
 
-    if (docCount > 0) {
-      await expect(pdfFiles.first()).toBeVisible()
-      const filename = await pdfFiles.first().textContent()
-      expect(filename).toMatch(/\.pdf$/i)
-    } else {
-      await expect(page.getByText(/No contracts uploaded yet|Upload your first/i)).toBeVisible()
-    }
+test.describe('Stat strip', () => {
+  test.beforeEach(async ({ page }) => {
+    await goDashboard(page)
+    // Wait until loading skeletons are gone (3 real stat buttons appear)
+    await page.waitForFunction(() => {
+      const strip = document.querySelector('[data-tour="stats"]')
+      return strip && strip.querySelectorAll('button').length >= 3
+    }, { timeout: 20000 })
   })
 
-  test('should handle document selection and show analysis panel', async ({ page }) => {
-    const pdfFiles = page.locator('h3').filter({ hasText: /\.pdf$/i })
-    const docCount = await pdfFiles.count()
+  test('renders 3 stats (not 4)', async ({ page }) => {
+    const strip = page.locator('[data-tour="stats"]')
+    const statButtons = strip.getByRole('button')
+    await expect(statButtons).toHaveCount(3)
+  })
 
-    if (docCount > 0) {
-      await pdfFiles.first().click()
-      await page.waitForTimeout(2000)
+  test('first stat label is Contracts', async ({ page }) => {
+    const strip = page.locator('[data-tour="stats"]')
+    await expect(strip.getByRole('button').nth(0)).toContainText('Contracts')
+  })
 
-      const hasAnalysis = await page.locator('text=Risk Assessment').isVisible().catch(() => false)
-      const hasProcessing = await page.locator('text=/queued|processing/i').count() > 0
-      expect(hasAnalysis || hasProcessing).toBeTruthy()
-    }
+  test('second stat label is Clauses found', async ({ page }) => {
+    const strip = page.locator('[data-tour="stats"]')
+    await expect(strip.getByRole('button').nth(1)).toContainText('Clauses found')
   })
 
-  test('should navigate to document detail when clicking View Details', async ({ page }) => {
-    const pdfFiles = page.locator('h3').filter({ hasText: /\.pdf$/i })
-    const docCount = await pdfFiles.count()
+  test('third stat label is Ready to review', async ({ page }) => {
+    const strip = page.locator('[data-tour="stats"]')
+    await expect(strip.getByRole('button').nth(2)).toContainText('Ready to review')
+  })
 
-    if (docCount > 0) {
-      await pdfFiles.first().click()
-      await page.waitForTimeout(2000)
+  test('no Documents Indexed label (old stat removed)', async ({ page }) => {
+    await expect(page.getByText('Documents Indexed')).not.toBeVisible()
+  })
 
-      const viewButton = page.getByRole('button', { name: /View Full Analysis|View Details/i }).first()
-      if (await viewButton.isVisible({ timeout: 3000 }).catch(() => false)) {
-        await viewButton.click()
-        await page.waitForURL(/\/documents\/[a-f0-9-]+/, { timeout: 10000 }).catch(() => {})
-        expect(page.url()).toMatch(/\/documents\/[a-f0-9-]+/)
-      }
-    }
+  test('no Text Chunks label (old stat removed)', async ({ page }) => {
+    await expect(page.getByText('Text Chunks')).not.toBeVisible()
   })
 
-  test('should navigate to knowledge graph when clicking graph button', async ({ page }) => {
-    const pdfFiles = page.locator('h3').filter({ hasText: /\.pdf$/i })
-    const docCount = await pdfFiles.count()
+  test('no Contract Portfolio heading (removed)', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /Contract Portfolio/i })).not.toBeVisible()
+  })
+
+  test('stat strip has grid-cols-3 class', async ({ page }) => {
+    const strip = page.locator('[data-tour="stats"]')
+    await expect(strip).toHaveClass(/grid-cols-3/)
+  })
+})
+
+// -----------------------------------------------------------------------
+// Empty state (no documents) - uses mocked API
+// -----------------------------------------------------------------------
 
-    if (docCount > 0) {
-      await pdfFiles.first().click()
-      await page.waitForTimeout(2000)
+test.describe('Empty state', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page)
+    // Wait for the empty-state CTA to appear
+    await page.waitForSelector('text=Add your first contract', { timeout: 15000 })
+  })
 
-      const graphButton = page.getByRole('button', { name: /Knowledge Graph/i }).first()
-      if (await graphButton.isVisible({ timeout: 3000 }).catch(() => false)) {
-        await graphButton.click()
-        await page.waitForURL(/\/documents\/[a-f0-9-]+\/graph/, { timeout: 10000 }).catch(() => {})
-        expect(page.url()).toMatch(/\/documents\/[a-f0-9-]+\/graph/)
-      }
+  test('stat strip shows 0 for all three counts', async ({ page }) => {
+    const strip = page.locator('[data-tour="stats"]')
+    await page.waitForFunction(() => {
+      const strip = document.querySelector('[data-tour="stats"]')
+      return strip && strip.querySelectorAll('button').length >= 3
+    }, { timeout: 15000 })
+    const buttons = strip.getByRole('button')
+    for (let i = 0; i < 3; i++) {
+      await expect(buttons.nth(i)).toContainText('0')
     }
   })
 
-  test('should perform search and display results', async ({ page }) => {
-    const searchInput = page.getByPlaceholder('Search...')
-    await searchInput.fill('business')
-    await searchInput.press('Enter')
-    await page.waitForTimeout(3000)
+  test('document list shows "Add your first contract" empty state', async ({ page }) => {
+    await expect(page.getByText('Add your first contract')).toBeVisible()
+  })
+
+  test('empty state has Choose PDF button', async ({ page }) => {
+    await expect(page.getByRole('button', { name: /Choose PDF/i })).toBeVisible()
+  })
+
+  test('no Activity Feed visible', async ({ page }) => {
+    await expect(page.getByText('Activity Feed')).not.toBeVisible()
+    await expect(page.getByRole('heading', { name: /Activity/i })).not.toBeVisible()
+  })
+
+  test('risk panel shows Shield icon and "Select a contract" hint', async ({ page }) => {
+    await expect(page.getByText(/Select a contract to see its risk breakdown/i)).toBeVisible()
+    const riskPanel = page.locator('[data-tour="analysis"]')
+    await expect(riskPanel).toBeVisible()
+  })
+
+  test('risk panel empty state is minimal (no Risk Assessment heading)', async ({ page }) => {
+    const riskPanel = page.locator('[data-tour="analysis"]')
+    await expect(riskPanel.getByRole('heading', { name: /Risk Assessment/i })).not.toBeVisible()
+  })
+})
+
+// -----------------------------------------------------------------------
+// Upload flow
+// -----------------------------------------------------------------------
+
+test.describe('Upload flow', () => {
+  test.beforeEach(async ({ page }) => {
+    await goDashboard(page)
+  })
+
+  test('file input accepts PDF only', async ({ page }) => {
+    const input = page.locator('input[type="file"][accept=".pdf"]')
+    await expect(input).toBeAttached()
+    await expect(input).toHaveAttribute('accept', '.pdf')
+  })
+
+  test('file input supports multiple', async ({ page }) => {
+    const input = page.locator('input[type="file"][accept=".pdf"]')
+    await expect(input).toHaveAttribute('multiple', '')
+  })
+
+  test('drag-over handler does not crash the page', async ({ page }) => {
+    // Dispatch a dragover event on the page container
+    await page.dispatchEvent('[data-tour="stats"]', 'dragover', {
+      bubbles: true,
+      cancelable: true,
+    })
+    await expect(page.locator('[data-tour="stats"]')).toBeVisible()
+  })
+})
+
+// -----------------------------------------------------------------------
+// Document list & risk panel interaction - uses mocked API
+// -----------------------------------------------------------------------
+
+test.describe('Document list and risk panel', () => {
+  const mockDocId = 'test-doc-1234'
+  const mockDoc = {
+    id: mockDocId,
+    filename: 'test-contract.pdf',
+    status: 'completed',
+    page_count: 12,
+    chunk_count: 48,
+    created_at: new Date().toISOString(),
+    metadata: {},
+  }
+  const mockAnalysis = {
+    clauses_extracted: 24,
+    overall_risk: 'high',
+    risk_summary: { critical: 1, high: 3, medium: 8, low: 12 },
+    high_risk_highlights: [
+      {
+        clause_type: 'indemnification',
+        risk_level: 'critical',
+        summary: 'Unlimited indemnification with no cap on liability.',
+      },
+      {
+        clause_type: 'non_compete',
+        risk_level: 'high',
+        summary: '36-month global non-compete with no geographic limits.',
+      },
+    ],
+  }
+
+  test.beforeEach(async ({ page }) => {
+    // Mock the documents list endpoint
+    await page.route('**/api/documents*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ documents: [mockDoc], total: 1 }),
+      })
+    })
+    // Mock the stats endpoint
+    await page.route('**/api/search/stats*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ documents_indexed: 1, chunks_with_embeddings: 48, clauses_extracted: 24 }),
+      })
+    })
+    // Mock the analysis summary endpoint (different route: /api/analysis/{id}/summary)
+    await page.route(`**/api/analysis/${mockDocId}/summary`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockAnalysis),
+      })
+    })
+    await goDashboard(page)
+    await page.waitForSelector('text=test-contract.pdf', { timeout: 15000 })
+  })
+
+  test('document filename appears in list', async ({ page }) => {
+    await expect(page.getByText('test-contract.pdf')).toBeVisible()
+  })
+
+  test('document list shows count header', async ({ page }) => {
+    await expect(page.getByText(/1 contract/i)).toBeVisible()
+  })
+
+  test('document list is scrollable (overflow-y-auto)', async ({ page }) => {
+    const list = page.locator('[data-tour="documents"] .overflow-y-auto')
+    await expect(list).toBeVisible()
+    const maxH = await list.evaluate((el) => window.getComputedStyle(el).maxHeight)
+    expect(maxH).not.toBe('none')
+  })
+
+  test('Eye button is visible on hover', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.hover()
+    const eyeLink = page.locator('[aria-label="View document details"]').first()
+    await expect(eyeLink).toBeVisible()
+  })
+
+  test('Eye button navigates to document detail', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.hover()
+    const eyeLink = page.locator('[aria-label="View document details"]').first()
+    await eyeLink.click()
+    await page.waitForURL(/\/documents\//, { timeout: 10000 })
+    expect(page.url()).toContain(`/documents/${mockDocId}`)
+  })
+
+  test('clicking document row loads risk panel', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    await expect(page.getByRole('heading', { name: /Risk Assessment/i })).toBeVisible({ timeout: 10000 })
+  })
+
+  test('risk panel shows overall risk level after selection', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    await page.waitForSelector('text=Risk Assessment', { timeout: 10000 })
+    // The risk level "high" should appear in the panel
+    const riskPanel = page.locator('[data-tour="analysis"]')
+    await expect(riskPanel.getByText(/^high$/i).first()).toBeVisible({ timeout: 8000 })
+  })
+
+  test('risk panel shows risk breakdown section after selection', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    await page.waitForSelector('text=Risk Assessment', { timeout: 10000 })
+    await expect(page.getByText('Risk breakdown')).toBeVisible({ timeout: 8000 })
+  })
+
+  test('risk panel shows View Full Analysis button after selection', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    await expect(page.getByRole('button', { name: /View Full Analysis/i })).toBeVisible({ timeout: 12000 })
+  })
+
+  test('View Full Analysis button navigates to document detail', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    const btn = page.getByRole('button', { name: /View Full Analysis/i })
+    await btn.waitFor({ timeout: 12000 })
+    await btn.click()
+    await page.waitForURL(/\/documents\//, { timeout: 10000 })
+    expect(page.url()).toContain(`/documents/${mockDocId}`)
+  })
+
+  test('risk panel shows Knowledge Graph button after selection', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    await expect(page.getByRole('button', { name: /Knowledge Graph/i })).toBeVisible({ timeout: 12000 })
+  })
+
+  test('Knowledge Graph button navigates to /graph', async ({ page }) => {
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    const btn = page.getByRole('button', { name: /Knowledge Graph/i })
+    await btn.waitFor({ timeout: 12000 })
+    await btn.click()
+    await page.waitForURL(/\/documents\/.*\/graph/, { timeout: 10000 })
+    expect(page.url()).toContain('/graph')
+  })
+
+  test('unknown risk level falls back to low (no render error)', async ({ page }) => {
+    // Override the analysis mock with unknown risk level
+    await page.unroute(`**/api/analysis/${mockDocId}/summary`)
+    await page.route(`**/api/analysis/${mockDocId}/summary`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ ...mockAnalysis, overall_risk: 'unknown_value' }),
+      })
+    })
+    await page.reload({ waitUntil: 'domcontentloaded' })
+    await page.waitForSelector('text=test-contract.pdf', { timeout: 15000 })
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    await expect(page.getByRole('heading', { name: /Risk Assessment/i })).toBeVisible({ timeout: 10000 })
+    // The fallback renders the unknown value mapped to 'low'
+    const riskPanel = page.locator('[data-tour="analysis"]')
+    await expect(riskPanel.getByText(/^low$/i).first()).toBeVisible({ timeout: 8000 })
+  })
+})
+
+// -----------------------------------------------------------------------
+// Inline search - uses mocked API
+// -----------------------------------------------------------------------
+
+test.describe('Inline search', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page)
+    await page.waitForSelector('text=Add your first contract', { timeout: 15000 })
+  })
+
+  test('search input has correct id', async ({ page }) => {
+    const input = page.locator('#search-input')
+    await expect(input).toBeVisible()
+  })
+
+  test('search input has accessible label', async ({ page }) => {
+    const label = page.locator('label[for="search-input"]')
+    await expect(label).toBeAttached()
+  })
+
+  test('typing in search does not navigate away', async ({ page }) => {
+    const input = page.getByPlaceholder('Search...')
+    await input.fill('termination')
+    expect(page.url()).toContain('/dashboard')
+  })
+
+  test('pressing Enter with empty search does nothing', async ({ page }) => {
+    const input = page.getByPlaceholder('Search...')
+    await input.press('Enter')
+    await page.waitForTimeout(500)
+    expect(page.url()).toContain('/dashboard')
+  })
+
+  test('search returns results section when API responds', async ({ page }) => {
+    await page.route('**/api/search?**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          results: [
+            {
+              chunk_id: 'chunk-1',
+              document_name: 'test-contract.pdf',
+              content: 'The party may terminate this agreement with 30 days notice.',
+              combined_score: 0.92,
+            },
+          ],
+        }),
+      })
+    })
+    const input = page.getByPlaceholder('Search...')
+    await input.fill('termination')
+    await input.press('Enter')
+    await expect(page.getByRole('heading', { name: /Search Results/i })).toBeVisible({ timeout: 10000 })
+    await expect(page.getByText('1 matches found')).toBeVisible()
+  })
 
-    // Check for search results section or document highlight
-    const hasResults = await page.locator('text=/results|matches|found/i').count() > 0
-    const hasDocs = await page.locator('h3').filter({ hasText: /\.pdf$/i }).count() > 0
-    expect(hasResults || hasDocs).toBeTruthy()
+  test('search results can be cleared with X button', async ({ page }) => {
+    await page.route('**/api/search?**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          results: [
+            {
+              chunk_id: 'chunk-1',
+              document_name: 'test-contract.pdf',
+              content: 'Termination clause content here.',
+              combined_score: 0.87,
+            },
+          ],
+        }),
+      })
+    })
+    const input = page.getByPlaceholder('Search...')
+    await input.fill('termination')
+    await input.press('Enter')
+    await page.waitForSelector('text=Search Results', { timeout: 10000 })
+    await page.getByRole('button', { name: /Clear search results/i }).click()
+    await expect(page.getByRole('heading', { name: /Search Results/i })).not.toBeVisible()
+  })
+
+  test('concurrent search guard - rapid searches do not crash UI', async ({ page }) => {
+    await page.route('**/api/search?**', async (route) => {
+      await new Promise(r => setTimeout(r, 200))
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [] }),
+      })
+    })
+    const input = page.getByPlaceholder('Search...')
+    await input.fill('a')
+    await input.press('Enter')
+    await input.fill('b')
+    await input.press('Enter')
+    await page.waitForTimeout(600)
+    await expect(page.locator('[data-tour="stats"]')).toBeVisible()
+  })
+})
+
+// -----------------------------------------------------------------------
+// Walkthrough
+// -----------------------------------------------------------------------
+
+test.describe('Walkthrough', () => {
+  test('walkthrough does NOT auto-start when localStorage flag is set', async ({ page }) => {
+    await goDashboard(page, true)
+    await page.waitForSelector('[data-tour="stats"]', { timeout: 20000 })
+    await page.waitForTimeout(2000)
+    // Walkthrough backdrop should not be visible
+    await expect(page.locator('.fixed.inset-0.bg-black\\/40')).not.toBeVisible()
+  })
+
+  test('walkthrough auto-starts on first visit (no localStorage flag)', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page, false)
+    // 1.5s delay in code + page load time = allow up to 15s (mocked API speeds load)
+    await page.waitForSelector('text=Your contract portfolio', { timeout: 15000 })
+    await expect(page.getByText('Your contract portfolio')).toBeVisible()
+  })
+
+  test('walkthrough shows step counter', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page, false)
+    await page.waitForSelector('text=1 of 5', { timeout: 15000 })
+    await expect(page.getByText('1 of 5')).toBeVisible()
+  })
+
+  test('walkthrough can be dismissed via Skip tour', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page, false)
+    await page.waitForSelector('text=Skip tour', { timeout: 15000 })
+    await page.getByText('Skip tour').click()
+    await expect(page.getByText('Your contract portfolio')).not.toBeVisible()
+  })
+
+  test('walkthrough can be dismissed via X button', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page, false)
+    // Wait for the walkthrough to appear (1.5s delay + render time)
+    await page.waitForSelector('[aria-label="Close walkthrough"]', { timeout: 15000 })
+    await page.getByRole('button', { name: /Close walkthrough/i }).click()
+    await expect(page.getByText('Your contract portfolio')).not.toBeVisible()
+  })
+
+  test('walkthrough advances on Next click', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page, false)
+    await page.waitForSelector('text=1 of 5', { timeout: 15000 })
+    await page.getByRole('button', { name: /^Next$/i }).click()
+    await expect(page.getByText('2 of 5')).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Tour button restarts walkthrough', async ({ page }) => {
+    await goDashboard(page, true)
+    // Wait until the page has fully loaded (stats visible with real values)
+    await page.waitForFunction(() => {
+      const strip = document.querySelector('[data-tour="stats"]')
+      return strip && strip.querySelectorAll('button').length >= 3
+    }, { timeout: 20000 })
+    // Click the Tour button by title attribute
+    await page.locator('button[title="Restart guided tour"]').click()
+    // The walkthrough appears synchronously (no delay when restarting)
+    await expect(page.getByText('1 of 5')).toBeVisible({ timeout: 8000 })
   })
 
-  test('should show file upload dialog when clicking upload button', async ({ page }) => {
-    const fileChooserPromise = page.waitForEvent('filechooser')
-    await page.getByRole('button', { name: /Upload/i }).click()
-    const fileChooser = await fileChooserPromise
-    expect(fileChooser).toBeTruthy()
+  test('dismissing walkthrough stores flag in localStorage', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page, false)
+    // Wait for the walkthrough overlay with the 1.5s delay + render
+    await page.waitForSelector('text=Skip tour', { timeout: 15000 })
+    await page.getByText('Skip tour').click()
+    const flag = await page.evaluate(() => localStorage.getItem('bc_walkthrough_seen'))
+    expect(flag).toBe('true')
   })
+})
 
-  test('should show hover states on document list items', async ({ page }) => {
-    const pdfFiles = page.locator('h3').filter({ hasText: /\.pdf$/i })
-    const docCount = await pdfFiles.count()
+// -----------------------------------------------------------------------
+// Mobile viewport
+// -----------------------------------------------------------------------
 
-    if (docCount > 0) {
-      const firstDoc = pdfFiles.first()
-      const docRow = firstDoc.locator('xpath=ancestor::div[contains(@class, "cursor-pointer")]')
-      await docRow.hover()
-      await page.waitForTimeout(500)
+test.describe('Mobile viewport', () => {
+  test.use({ viewport: { width: 390, height: 844 }, hasTouch: true })
 
-      const eyeButton = page.locator('[aria-label="View document details"]').first()
-      await expect(eyeButton).toBeVisible()
+  test('stat strip does not overflow on mobile', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page)
+    const strip = page.locator('[data-tour="stats"]')
+    const box = await strip.boundingBox()
+    expect(box).not.toBeNull()
+    if (box) {
+      expect(box.x + box.width).toBeLessThanOrEqual(400)
     }
   })
 
-  test('should display risk levels with correct styling', async ({ page }) => {
-    const pdfFiles = page.locator('h3').filter({ hasText: /\.pdf$/i })
-    const docCount = await pdfFiles.count()
+  test('overflow-y-auto scroll container is present on mobile', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page)
+    const list = page.locator('[data-tour="documents"] .overflow-y-auto')
+    await expect(list).toBeVisible()
+  })
+
+  test('mobile hamburger menu button is visible', async ({ page }) => {
+    await goDashboard(page)
+    const menuBtn = page.getByRole('button', { name: /Toggle menu/i })
+    await expect(menuBtn).toBeVisible()
+  })
+
+  test('mobile menu opens and shows all 5 nav links', async ({ page }) => {
+    await mockEmptyState(page)
+    await goDashboard(page)
+    // Wait for the page to be fully interactive before touching the nav
+    await page.waitForLoadState('networkidle', { timeout: 15000 })
+    const menuBtn = page.locator('button[aria-label="Toggle menu"]')
+    await menuBtn.waitFor({ state: 'visible', timeout: 10000 })
+    // Use tap() for a proper mobile touch interaction (dispatches touchstart/touchend)
+    await menuBtn.tap()
+    const mobileNav = page.locator('nav[aria-label="Mobile navigation"]')
+    // The nav is conditionally rendered via React state when mobileOpen=true
+    await mobileNav.waitFor({ state: 'attached', timeout: 10000 })
+    await mobileNav.waitFor({ state: 'visible', timeout: 5000 })
+    for (const label of ['Dashboard', 'Analytics', 'Compare', 'Obligations', 'Deals']) {
+      await expect(mobileNav.getByRole('link', { name: label })).toBeVisible()
+    }
+  })
 
-    if (docCount > 0) {
-      await pdfFiles.first().click()
-      await page.waitForTimeout(2000)
+  test('Eye button has adequate touch target on mobile', async ({ page }) => {
+    await page.route('**/api/documents*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          documents: [{
+            id: 'touch-doc',
+            filename: 'mobile-test.pdf',
+            status: 'completed',
+            page_count: 5,
+            chunk_count: 20,
+            created_at: new Date().toISOString(),
+            metadata: {},
+          }],
+          total: 1,
+        }),
+      })
+    })
+    await page.route('**/api/search/stats*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ documents_indexed: 1, chunks_with_embeddings: 20, clauses_extracted: 5 }),
+      })
+    })
+    await goDashboard(page)
+    await page.waitForSelector('text=mobile-test.pdf', { timeout: 15000 })
 
-      const hasRiskPanel = await page.locator('text=Risk Assessment').count() > 0
-      if (hasRiskPanel) {
-        const riskLevelCount = await page.locator('text=/^(critical|high|medium|low)$/i').count()
-        expect(riskLevelCount).toBeGreaterThanOrEqual(0)
-      }
+    const eyeBtn = page.locator('[aria-label="View document details"]').first()
+    await expect(eyeBtn).toBeVisible()
+    const box = await eyeBtn.boundingBox()
+    if (box) {
+      // min-w-[44px] min-h-[44px] on mobile
+      expect(box.width).toBeGreaterThanOrEqual(40)
+      expect(box.height).toBeGreaterThanOrEqual(40)
     }
   })
+})
+
+// -----------------------------------------------------------------------
+// Error and edge cases
+// -----------------------------------------------------------------------
+
+test.describe('Error states', () => {
+  test('API failure shows error toast', async ({ page }) => {
+    await page.route('**/api/documents*', async (route) => {
+      await route.fulfill({ status: 500, body: 'Internal Server Error' })
+    })
+    await page.route('**/api/search/stats*', async (route) => {
+      await route.fulfill({ status: 500, body: 'Internal Server Error' })
+    })
+    await goDashboard(page)
+    await expect(page.getByText(/Failed to connect|failed|error/i).first()).toBeVisible({ timeout: 10000 })
+  })
+
+  test('null clause_type in highlight renders without crash', async ({ page }) => {
+    const nullDocId = 'null-clause-doc'
+    await page.route('**/api/documents*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          documents: [{
+            id: nullDocId,
+            filename: 'null-clause.pdf',
+            status: 'completed',
+            page_count: 3,
+            chunk_count: 12,
+            created_at: new Date().toISOString(),
+            metadata: {},
+          }],
+          total: 1,
+        }),
+      })
+    })
+    await page.route('**/api/search/stats*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ documents_indexed: 1, chunks_with_embeddings: 12, clauses_extracted: 5 }),
+      })
+    })
+    await page.route(`**/api/analysis/${nullDocId}/summary`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          clauses_extracted: 5,
+          overall_risk: 'high',
+          risk_summary: { critical: 0, high: 1, medium: 2, low: 2 },
+          high_risk_highlights: [
+            { clause_type: null, risk_level: 'high', summary: 'Something risky.' },
+          ],
+        }),
+      })
+    })
 
-  test('should have accessible search input with label', async ({ page }) => {
-    const searchInput = page.getByPlaceholder('Search...')
-    await expect(searchInput).toBeVisible()
-    await expect(searchInput).toHaveAttribute('id', 'search-input')
+    const errors: string[] = []
+    page.on('pageerror', (err) => errors.push(err.message))
 
-    const searchLabel = page.locator('label[for="search-input"]')
-    await expect(searchLabel).toBeVisible()
+    await goDashboard(page)
+    await page.waitForSelector('text=null-clause.pdf', { timeout: 15000 })
+    const docRow = page.locator('[data-tour="documents"]').getByRole('button').first()
+    await docRow.click()
+    // Should render Risk Assessment panel without crashing
+    await expect(page.getByRole('heading', { name: /Risk Assessment/i })).toBeVisible({ timeout: 10000 })
+    await page.waitForTimeout(1000)
+    expect(errors.filter(e => e.toLowerCase().includes('typeerror'))).toHaveLength(0)
   })
 })
diff --git a/frontend/tests/global-teardown.ts b/frontend/tests/global-teardown.ts
index fc7eb86..b3905f2 100644
--- a/frontend/tests/global-teardown.ts
+++ b/frontend/tests/global-teardown.ts
@@ -3,7 +3,7 @@ import { request } from '@playwright/test'
 // Safety net: deletes any deals whose name starts with '__e2e__'
 // in case a test run fails before its afterAll cleanup runs.
 export default async function globalTeardown() {
-  const baseURL = process.env.BASE_URL || 'http://localhost:3000'
+  const baseURL = process.env.BASE_URL || 'http://localhost:3001'
   const ctx = await request.newContext({ baseURL })
 
   const res = await ctx.get('/api/deals')