diff --git a/app/Http/Controllers/MonitorsController.php b/app/Http/Controllers/MonitorsController.php
index e4dbb74..69392a0 100644
--- a/app/Http/Controllers/MonitorsController.php
+++ b/app/Http/Controllers/MonitorsController.php
@@ -99,93 +99,62 @@ public function store(MonitorRequest $request)
      */
     public function show(Request $request, Monitor $monitor)
     {
-        $history = null;
+        $graph = null;
+        $filters = null;
+        $summary = null;
+        $recentChecks = null;
 
         if (config('monitor-history.enabled')) {
-            $range = $this->resolveHistoryRange($request, $monitor);
+            // The monitor's earliest check feeds the 'all' preset range, the
+            // available-years list and the summary's first_checked_at. Resolve it
+            // once here and thread it through, rather than re-running the same
+            // MIN(checked_at) lookup inside each consumer.
+            $firstCheckedAt = $monitor->checkLogs()->orderBy('checked_at')->value('checked_at');
+
+            $range = $this->resolveHistoryRange($request, $firstCheckedAt);
             $fromUtc = $range['from']->copy()->startOfDay()->utc();
             $toUtc = $range['to']->copy()->endOfDay()->utc();
             $timezone = $range['timezone'];
 
+            $availableYears = $this->availableYears($timezone, $firstCheckedAt);
+            $graphYear = $this->resolveGraphYear($request, $availableYears);
+            $graph = $this->buildGraphPayload($monitor, $graphYear, $timezone, $availableYears);
+
             $selectedRangeQuery = $monitor->checkLogs()
                 ->whereBetween('checked_at', [$fromUtc, $toUtc]);
 
             $allTimeSummary = $this->buildSummary($monitor->checkLogs());
             $selectedRangeSummary = $this->buildSummary($selectedRangeQuery);
 
-            $dailyMetrics = $monitor->dailyCheckMetrics()
-                ->forTimezone($timezone)
-                ->betweenDates($range['from']->toDateString(), $range['to']->toDateString())
-                ->orderBy('date')
-                ->get()
-                ->groupBy('check_type')
-                ->map(function ($rows) {
-                    return $rows->map(function ($row) {
-                        return [
-                            'date' => $row->date->toDateString(),
-                            'total_checks' => $row->total_checks,
-                            'successful_checks' => $row->successful_checks,
-                            'warning_checks' => $row->warning_checks,
-                            'failed_checks' => $row->failed_checks,
-                            'success_ratio' => (float) $row->success_ratio,
-                            'worst_status' => $row->worst_status,
-                            'avg_response_time_ms' => $row->avg_response_time_ms,
-                            'p95_response_time_ms' => $row->p95_response_time_ms,
-                        ];
-                    })->values();
-                });
-
-            $recentChecks = $monitor->checkLogs()
-                ->whereBetween('checked_at', [$fromUtc, $toUtc])
-                ->latest('checked_at')
-                ->limit((int) config('monitor-history.recent_checks_limit', 50))
-                ->get()
-                ->map(function (MonitorCheckLog $log) use ($timezone) {
-                    return [
-                        'id' => $log->id,
-                        'check_type' => $log->check_type,
-                        'status' => $log->status,
-                        'checked_at' => $log->checked_at->timezone($timezone)->toDateTimeString(),
-                        'message' => $log->message,
-                        'failure_reason' => $log->failure_reason,
-                        'response_time_ms' => $log->response_time_ms,
-                        'metadata' => $log->metadata,
-                    ];
-                });
-
-            $history = [
-                'range' => [
-                    'preset' => $range['preset'],
-                    'from' => $range['from']->toDateString(),
-                    'to' => $range['to']->toDateString(),
-                    'timezone' => $timezone,
-                ],
-                'check_types' => [
-                    [
-                        'type' => MonitorCheckLogService::CHECK_TYPE_UPTIME,
-                        'enabled' => (bool) $monitor->uptime_check_enabled,
-                    ],
-                    [
-                        'type' => MonitorCheckLogService::CHECK_TYPE_DOMAIN,
-                        'enabled' => (bool) $monitor->domain_check_enabled,
-                    ],
-                    [
-                        'type' => MonitorCheckLogService::CHECK_TYPE_CERTIFICATE,
-                        'enabled' => (bool) $monitor->certificate_check_enabled,
-                    ],
-                ],
-                'summary' => [
-                    'all_time' => $allTimeSummary,
-                    'selected_range' => $selectedRangeSummary,
-                ],
-                'daily_metrics' => $dailyMetrics,
-                'recent_checks' => $recentChecks,
+            $filters = [
+                'preset' => $range['preset'],
+                'from' => $range['from']->toDateString(),
+                'to' => $range['to']->toDateString(),
+                'timezone' => $timezone,
+            ];
+
+            $summary = [
+                'all_time' => $allTimeSummary,
+                'selected_range' => $selectedRangeSummary,
+                'first_checked_at' => $firstCheckedAt
+                    ? Carbon::parse($firstCheckedAt)->timezone($timezone)->toDateTimeString()
+                    : null,
             ];
+
+            $recentType = $request->string('recent_type')->toString() ?: MonitorCheckLogService::CHECK_TYPE_UPTIME;
+            if (! in_array($recentType, [MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::CHECK_TYPE_DOMAIN], true)) {
+                $recentType = MonitorCheckLogService::CHECK_TYPE_UPTIME;
+            }
+
+            $recentChecks = $this->buildRecentChecks($monitor, $recentType, $fromUtc, $toUtc, $timezone);
         }
 
         return Inertia::render('Monitors/Show', [
             'monitor' => $monitor,
-            'history' => $history,
+            'graph' => $graph,
+            'filters' => $filters,
+            'summary' => $summary,
+            'recentChecks' => $recentChecks,
         ]);
     }
 
@@ -242,7 +211,7 @@ public function destroy(Monitor $monitor)
         return redirect()->route('monitors.index');
     }
 
-    protected function resolveHistoryRange(Request $request, Monitor $monitor): array
+    protected function resolveHistoryRange(Request $request, $firstCheckedAt = null): array
     {
         // The daily metrics are aggregated server-side under this single timezone,
         // so the detail page must read them back under the same one. We deliberately
@@ -256,8 +225,6 @@ protected function resolveHistoryRange(Request $request, Monitor $monitor): arra
         $preset = $request->string('preset')->toString() ?: '30d';
 
         if ($preset === 'all') {
-            $firstCheckedAt = $monitor->checkLogs()->orderBy('checked_at')->value('checked_at');
-
             $from = $firstCheckedAt
                 ? Carbon::parse($firstCheckedAt)->timezone($timezone)->startOfDay()
                 : Carbon::now($timezone)->subDays(30)->startOfDay();
@@ -376,4 +343,172 @@ protected function buildSummary($query): array
 
         return $summary;
     }
+
+    protected function graphCheckTypes(Monitor $monitor): array
+    {
+        return [
+            [
+                'type' => MonitorCheckLogService::CHECK_TYPE_UPTIME,
+                'enabled' => (bool) $monitor->uptime_check_enabled,
+            ],
+            [
+                'type' => MonitorCheckLogService::CHECK_TYPE_DOMAIN,
+                'enabled' => (bool) $monitor->domain_check_enabled,
+            ],
+        ];
+    }
+
+    protected function availableYears(string $timezone, $firstCheckedAt = null): array
+    {
+        $currentYear = (int) Carbon::now($timezone)->format('Y');
+
+        if (! $firstCheckedAt) {
+            return [$currentYear];
+        }
+
+        $minYear = (int) Carbon::parse($firstCheckedAt)->timezone($timezone)->format('Y');
+
+        if ($minYear > $currentYear) {
+            $minYear = $currentYear;
+        }
+
+        return range($minYear, $currentYear);
+    }
+
+    protected function resolveGraphYear(Request $request, array $availableYears): int
+    {
+        $default = end($availableYears) ?: (int) Carbon::now('UTC')->format('Y');
+
+        $requested = $request->integer('year') ?: $default;
+
+        if (! in_array((int) $requested, $availableYears, true)) {
+            return (int) $default;
+        }
+
+        return (int) $requested;
+    }
+
+    protected function buildGraphPayload(Monitor $monitor, int $year, string $timezone, array $availableYears): array
+    {
+        $checkTypes = $this->graphCheckTypes($monitor);
+        $recentChecksLimit = (int) config('monitor-history.recent_checks_limit', 150);
+
+        $yearStartUtc = Carbon::create($year, 1, 1, 0, 0, 0, $timezone)->startOfDay()->utc();
+        $yearEndUtc = Carbon::create($year, 12, 31, 0, 0, 0, $timezone)->endOfDay()->utc();
+        $yearStartDate = Carbon::create($year, 1, 1, 0, 0, 0, $timezone)->toDateString();
+        $yearEndDate = Carbon::create($year, 12, 31, 0, 0, 0, $timezone)->toDateString();
+
+        $dailyMetricsByType = $monitor->dailyCheckMetrics()
+            ->forTimezone($timezone)
+            ->betweenDates($yearStartDate, $yearEndDate)
+            ->orderBy('date')
+            ->get()
+            ->groupBy('check_type')
+            ->map(function ($rows) {
+                return $rows->map(function ($row) {
+                    return [
+                        'date' => $row->date->toDateString(),
+                        'total_checks' => $row->total_checks,
+                        'successful_checks' => $row->successful_checks,
+                        'warning_checks' => $row->warning_checks,
+                        'failed_checks' => $row->failed_checks,
+                        'success_ratio' => (float) $row->success_ratio,
+                        'worst_status' => $row->worst_status,
+                        'avg_response_time_ms' => $row->avg_response_time_ms,
+                        'p95_response_time_ms' => $row->p95_response_time_ms,
+                    ];
+                })->values();
+            });
+
+        $series = [];
+
+        foreach ($checkTypes as $checkType) {
+            $type = $checkType['type'];
+
+            $typeSummary = $this->buildSummary(
+                $monitor->checkLogs()
+                    ->where('check_type', $type)
+                    ->whereBetween('checked_at', [$yearStartUtc, $yearEndUtc])
+            );
+
+            $series[$type] = [
+                'summary' => [
+                    'total_checks' => $typeSummary['by_type'][$type]['total_checks'] ?? 0,
+                    'success_ratio' => (float) ($typeSummary['by_type'][$type]['success_ratio'] ?? 0),
+                    'status_totals' => $typeSummary['by_type'][$type]['status_totals'] ?? [
+                        MonitorCheckLogService::STATUS_SUCCESS => 0,
+                        MonitorCheckLogService::STATUS_WARNING => 0,
+                        MonitorCheckLogService::STATUS_FAILED => 0,
+                        MonitorCheckLogService::STATUS_UNKNOWN => 0,
+                    ],
+                ],
+                'daily_metrics' => $dailyMetricsByType->get($type, collect())->values()->all(),
+                'latest_checks' => $this->buildLatestChecks($monitor, $type, $timezone, $recentChecksLimit),
+            ];
+        }
+
+        return [
+            'year' => $year,
+            'available_years' => $availableYears,
+            'timezone' => $timezone,
+            'today_iso' => Carbon::now($timezone)->toDateString(),
+            'check_types' => $checkTypes,
+            'recent_checks_limit' => $recentChecksLimit,
+            'series' => $series,
+        ];
+    }
+
+    protected function buildRecentChecks(Monitor $monitor, string $type, Carbon $fromUtc, Carbon $toUtc, string $timezone): array
+    {
+        $paginator = $monitor->checkLogs()
+            ->where('check_type', $type)
+            ->whereBetween('checked_at', [$fromUtc, $toUtc])
+            ->latest('checked_at')
+            ->paginate(25, ['*'], 'recent_page');
+
+        $data = collect($paginator->items())
+            ->map(function (MonitorCheckLog $log) use ($timezone) {
+                return [
+                    'id' => $log->id,
+                    'check_type' => $log->check_type,
+                    'status' => $log->status,
+                    'checked_at' => $log->checked_at->timezone($timezone)->toDateTimeString(),
+                    'message' => $log->message,
+                    'failure_reason' => $log->failure_reason,
+                    'response_time_ms' => $log->response_time_ms,
+                ];
+            })
+            ->all();
+
+        return [
+            'type' => $type,
+            'data' => $data,
+            'pagination' => [
+                'current_page' => $paginator->currentPage(),
+                'last_page' => $paginator->lastPage(),
+                'per_page' => $paginator->perPage(),
+                'total' => $paginator->total(),
+            ],
+        ];
+    }
+
+    protected function buildLatestChecks(Monitor $monitor, string $checkType, string $timezone, int $limit): array
+    {
+        return $monitor->checkLogs()
+            ->where('check_type', $checkType)
+            ->latest('checked_at')
+            ->limit($limit)
+            ->get()
+            ->map(function (MonitorCheckLog $log) use ($timezone) {
+                return [
+                    'id' => $log->id,
+                    'checked_at' => $log->checked_at->timezone($timezone)->toDateTimeString(),
+                    'status' => $log->status,
+                    'message' => $log->message,
+                    'failure_reason' => $log->failure_reason,
+                    'response_time_ms' => $log->response_time_ms,
+                ];
+            })
+            ->all();
+    }
 }
diff --git a/config/monitor-history.php b/config/monitor-history.php
index 72879f1..e3ea9e9 100644
--- a/config/monitor-history.php
+++ b/config/monitor-history.php
@@ -23,9 +23,13 @@
     ],
 
     /*
-     * Maximum recent check rows to return on monitor detail page.
+     * Maximum recent checks surfaced on the monitor detail page's recent strip.
+     * Single source of truth: the controller caps `latest_checks` to this value
+     * AND ships it in the graph payload, and the frontend strip uses the same
+     * number as its slot cap (MonitorRecentStrip maxSlots) — so the backend and
+     * frontend caps cannot drift apart.
      */
-    'recent_checks_limit' => 50,
+    'recent_checks_limit' => 150,
 
     /*
      * How many days of raw logs to keep before pruning.
diff --git a/package-lock.json b/package-lock.json
index 9946c87..4049544 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,8 @@
                 "react": "^19.2.3",
                 "react-dom": "^19.2.3",
                 "tailwindcss": "^4.1.18",
-                "vite": "^7.3.1"
+                "vite": "^7.3.1",
+                "vitest": "^3.0.0"
             }
         },
         "node_modules/@alloc/quick-lru": {
@@ -1927,6 +1928,24 @@
                 "@babel/types": "^7.28.2"
             }
         },
+        "node_modules/@types/chai": {
+            "version": "5.2.3",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+            "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/deep-eql": "*",
+                "assertion-error": "^2.0.1"
+            }
+        },
+        "node_modules/@types/deep-eql": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+            "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1972,6 +1991,131 @@
                 "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
             }
         },
+        "node_modules/@vitest/expect": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.6.tgz",
+            "integrity": "sha512-1+7q9BtaKzEmO+fmNT3kYvoNn5Y71XWAx2Q5HRim4tTVRQVRv4uJFAQ5FbK0OPUeNP/WmVCpxYxoJdvuHVjzBQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/chai": "^5.2.2",
+                "@vitest/spy": "3.2.6",
+                "@vitest/utils": "3.2.6",
+                "chai": "^5.2.0",
+                "tinyrainbow": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/mocker": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.6.tgz",
+            "integrity": "sha512-EZOrpDbkKotFAP7wPAQV1UIyoGOk4oX7ynWhBhLB7v+meMHbQhU16oPpIYGTTe4oFlhpryGpgpcZP/sin3hYuw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vitest/spy": "3.2.6",
+                "estree-walker": "^3.0.3",
+                "magic-string": "^0.30.17"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            },
+            "peerDependencies": {
+                "msw": "^2.4.9",
+                "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+            },
+            "peerDependenciesMeta": {
+                "msw": {
+                    "optional": true
+                },
+                "vite": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vitest/pretty-format": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.6.tgz",
+            "integrity": "sha512-lb7XXXzmm2h2ASzFnRvQpDo6onT1NmMJA3tkGTWiBFtRJ9lxGY3d3mm/Apt36gej2bkkOVLL/yTOtufDaFa/jA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "tinyrainbow": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/runner": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.6.tgz",
+            "integrity": "sha512-HYcoSj1w5tcgUnzoF0HcyaAQjpA1gj9ftUJ7iSJSuipc02jW9gKkigwZbjFldAfYHA1fa8UZVRftdMY5msWM9Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vitest/utils": "3.2.6",
+                "pathe": "^2.0.3",
+                "strip-literal": "^3.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/snapshot": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.6.tgz",
+            "integrity": "sha512-H+ZjNTWGpObenh0YnlBctAPnJSI20P81PL8BPzWpx54YXLLTm8hEsWawtcYLMrwvpK48hGxLLbCS+1KRXhsKhw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vitest/pretty-format": "3.2.6",
+                "magic-string": "^0.30.17",
+                "pathe": "^2.0.3"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/spy": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.6.tgz",
+            "integrity": "sha512-oq6BbH68WzcWmwtBrU9nqLeaXTR4XwJF7FSLkKEZo4i6eoXcrxjcwSuTvWBIRUTC6VC72nXYunzqgZA+IKdtxg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "tinyspy": "^4.0.3"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/utils": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.6.tgz",
+            "integrity": "sha512-lI23nIs4bnT3T8NIoh+vFaz5s2/DdP0Jgt2jxwgWljvwn82cLJtyi/If+fjFyoLMGIOz0U/fKvWE0d4jsNQEfg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vitest/pretty-format": "3.2.6",
+                "loupe": "^3.1.4",
+                "tinyrainbow": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/assertion-error": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+            "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2094,6 +2238,16 @@
                 "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
             }
         },
+        "node_modules/cac": {
+            "version": "6.7.14",
+            "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+            "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/call-bind-apply-helpers": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2146,6 +2300,33 @@
             ],
             "license": "CC-BY-4.0"
         },
+        "node_modules/chai": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+            "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "assertion-error": "^2.0.1",
+                "check-error": "^2.1.1",
+                "deep-eql": "^5.0.1",
+                "loupe": "^3.1.0",
+                "pathval": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/check-error": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+            "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 16"
+            }
+        },
         "node_modules/clsx": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2194,6 +2375,16 @@
                 }
             }
         },
+        "node_modules/deep-eql": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+            "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2270,6 +2461,13 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/es-module-lexer": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+            "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/es-object-atoms": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -2351,6 +2549,26 @@
                 "node": ">=6"
             }
         },
+        "node_modules/estree-walker": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+            "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "^1.0.0"
+            }
+        },
+        "node_modules/expect-type": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+            "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
         "node_modules/fdir": {
             "version": "6.5.0",
             "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2929,6 +3147,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/loupe": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+            "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/lru-cache": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3045,6 +3270,23 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/pathe": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+            "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/pathval": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+            "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 14.16"
+            }
+        },
         "node_modules/picocolors": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3366,6 +3608,13 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/siginfo": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+            "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+            "dev": true,
+            "license": "ISC"
+        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3376,6 +3625,40 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/stackback": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+            "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/std-env": {
+            "version": "3.10.0",
+            "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+            "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/strip-literal": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+            "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "js-tokens": "^9.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/strip-literal/node_modules/js-tokens": {
+            "version": "9.0.1",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+            "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/supports-preserve-symlinks-flag": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -3417,6 +3700,20 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "node_modules/tinybench": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+            "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/tinyexec": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+            "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/tinyglobby": {
             "version": "0.2.15",
             "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3434,6 +3731,36 @@
                 "url": "https://github.com/sponsors/SuperchupuDev"
             }
         },
+        "node_modules/tinypool": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+            "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            }
+        },
+        "node_modules/tinyrainbow": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+            "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/tinyspy": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+            "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/tslib": {
             "version": "2.8.1",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -3557,6 +3884,29 @@
                 }
             }
         },
+        "node_modules/vite-node": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+            "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cac": "^6.7.14",
+                "debug": "^4.4.1",
+                "es-module-lexer": "^1.7.0",
+                "pathe": "^2.0.3",
+                "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+            },
+            "bin": {
+                "vite-node": "vite-node.mjs"
+            },
+            "engines": {
+                "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
         "node_modules/vite-plugin-full-reload": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.2.0.tgz",
@@ -3581,6 +3931,96 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/vitest": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.6.tgz",
+            "integrity": "sha512-xejya+bT/j/+R/AGa1XOfRxLmNUlLtlwjRsFUILF+xHfzElmGcmFydy2gqqIrd62ptIEfwVMofd19uNWD9L7Nw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/chai": "^5.2.2",
+                "@vitest/expect": "3.2.6",
+                "@vitest/mocker": "3.2.6",
+                "@vitest/pretty-format": "^3.2.6",
+                "@vitest/runner": "3.2.6",
+                "@vitest/snapshot": "3.2.6",
+                "@vitest/spy": "3.2.6",
+                "@vitest/utils": "3.2.6",
+                "chai": "^5.2.0",
+                "debug": "^4.4.1",
+                "expect-type": "^1.2.1",
+                "magic-string": "^0.30.17",
+                "pathe": "^2.0.3",
+                "picomatch": "^4.0.2",
+                "std-env": "^3.9.0",
+                "tinybench": "^2.9.0",
+                "tinyexec": "^0.3.2",
+                "tinyglobby": "^0.2.14",
+                "tinypool": "^1.1.1",
+                "tinyrainbow": "^2.0.0",
+                "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+                "vite-node": "3.2.4",
+                "why-is-node-running": "^2.3.0"
+            },
+            "bin": {
+                "vitest": "vitest.mjs"
+            },
+            "engines": {
+                "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            },
+            "peerDependencies": {
+                "@edge-runtime/vm": "*",
+                "@types/debug": "^4.1.12",
+                "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+                "@vitest/browser": "3.2.6",
+                "@vitest/ui": "3.2.6",
+                "happy-dom": "*",
+                "jsdom": "*"
+            },
+            "peerDependenciesMeta": {
+                "@edge-runtime/vm": {
+                    "optional": true
+                },
+                "@types/debug": {
+                    "optional": true
+                },
+                "@types/node": {
+                    "optional": true
+                },
+                "@vitest/browser": {
+                    "optional": true
+                },
+                "@vitest/ui": {
+                    "optional": true
+                },
+                "happy-dom": {
+                    "optional": true
+                },
+                "jsdom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/why-is-node-running": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+            "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "siginfo": "^2.0.0",
+                "stackback": "0.0.2"
+            },
+            "bin": {
+                "why-is-node-running": "cli.js"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/yallist": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 628801f..3c364b7 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
     "private": true,
     "scripts": {
         "dev": "vite",
-        "build": "vite build"
+        "build": "vite build",
+        "test:js": "vitest run"
     },
     "devDependencies": {
         "@babel/preset-react": "^7.13.13",
@@ -25,7 +26,8 @@
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "tailwindcss": "^4.1.18",
-        "vite": "^7.3.1"
+        "vite": "^7.3.1",
+        "vitest": "^3.0.0"
     },
     "dependencies": {
         "@tanstack/react-query": "^5.90.20"
diff --git a/plans/2026-06-25-monitor-history-recent-strip-plan.md b/plans/2026-06-25-monitor-history-recent-strip-plan.md
new file mode 100644
index 0000000..e2ea52c
--- /dev/null
+++ b/plans/2026-06-25-monitor-history-recent-strip-plan.md
@@ -0,0 +1,418 @@
+# Monitor History — Recent-checks Strip Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Turn the "Today" bar into a rolling **Recent checks** strip — the last 50 checks per type (may span days), newest on the right, gray-padded on the left — backed by a small last-50 backend change.
+
+**Architecture:** Backend `buildGraphPayload` swaps its today-only `today_checks` series field for a `latest_checks` field (last 50 of that type, newest-first, no date bound). A pure `stripSlots(checks, capacity)` util computes the right-aligned + gray-padded slot array. The `MonitorTodayBar` component is renamed `MonitorRecentStrip`, rendering those slots with single-solid-color bars (shared palette) and a portal tooltip per real bar.
+
+**Tech Stack:** Laravel 12, Inertia v2, React 19, Tailwind v4, PHPUnit 11 (MySQL `monitor_test`), Vitest (Node 22).
+
+## Global Constraints
+
+- Branch `feat/monitor-history-ui` (already checked out; PR #81). Commit per task.
+- **JS tooling requires Node 22** — the default shell node is v12 and CANNOT run Vite 7 / Vitest 3. Prepend it to PATH in every npm command: `export PATH="/Users/vaibhav/.nvm/versions/node/v22.22.2/bin:$PATH" && npm run …` (a `node:fs/promises` ERR_UNKNOWN_BUILTIN_MODULE error = wrong node, not a code bug).
+- **Backend tests:** MySQL `monitor_test`; run `php artisan config:clear` first; `php artisan test --filter <Name>`. Run `vendor/bin/pint --dirty` before committing PHP.
+- **Frontend pure utils:** Vitest TDD (`npm run test:js`). **Components:** no DOM test runner — verify with `npm run build`.
+- **Shared single-status solid palette** (already in `resources/js/Utils/heatmapCell.js` as `SINGLE_STATUS_CLASS`): success `bg-green-600 border-green-600`, warning `bg-orange-400 border-orange-400`, failed `bg-red-600 border-red-600`, unknown `bg-gray-400 border-gray-400`. The strip bars reuse it (consistency with domain/cert heatmap cells).
+- Gray placeholder slot = `bg-gray-100 border-gray-200` (the heatmap "no checks" color).
+- **Already implemented in round 1 (no task here; verify after build):** heatmap today cell = solid `bg-indigo-500`; tooltip portal (makes strip tooltips visible); per-metric heatmap tooltip/legend; headline stat.
+
+## File Structure
+
+- `app/Http/Controllers/MonitorsController.php` — rename `buildTodayChecks` → `buildLatestChecks` (last 50, no date bound); series field `today_checks` → `latest_checks` (Task 1).
+- `tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php` — update the today_checks test to latest_checks behavior (Task 1).
+- `resources/js/Utils/recentStrip.js` + `resources/js/Utils/recentStrip.test.js` — pure `stripSlots` (Task 2).
+- `resources/js/Components/MonitorRecentStrip.jsx` (renamed from `MonitorTodayBar.jsx`) — strip rendering (Task 3).
+- `resources/js/Pages/Monitors/Show.jsx` — import/usage rename + `latest_checks` prop (Task 3).
+
+## Interfaces
+
+- `buildLatestChecks(Monitor $monitor, string $checkType, string $timezone, int $limit = 50): array` — newest-first rows `{id, checked_at:'Y-m-d H:i:s' (tz), status, message, failure_reason, response_time_ms}`. Graph series field: `series.<type>.latest_checks`.
+- `stripSlots(checks, capacity)` — `checks` newest-first; returns an array of length `capacity`, left→right, with leading `null`s (gray placeholders) when `checks.length < capacity` and the most-recent checks trailing with the newest at the **last (right)** index.
+- `MonitorRecentStrip({ checkType, checks })` — `checks` = `series[type].latest_checks` (newest-first).
+
+---
+
+### Task 1: Backend — `latest_checks` (last 50, spans days)
+
+**Files:**
+- Modify: `app/Http/Controllers/MonitorsController.php` (`buildTodayChecks`→`buildLatestChecks` at ~line 494; call site ~line 446)
+- Test: `tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php` (replace `test_today_checks_contain_only_todays_rows_newest_first`, ~lines 197–223)
+
+**Interfaces:**
+- Produces: `buildLatestChecks(Monitor, string $checkType, string $timezone, int $limit = 50): array`; graph series field `latest_checks`.
+- Consumes: existing `$monitor->checkLogs()`, `MonitorCheckLog`.
+
+- [ ] **Step 1: Replace the today_checks test with a latest_checks test.** In `MonitorHistoryGraphTest.php`, replace the whole `test_today_checks_contain_only_todays_rows_newest_first` method with:
+
+```php
+    public function test_latest_checks_are_newest_first_and_span_days(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $todayMorning = Carbon::now('UTC')->startOfDay()->addHours(8);
+        $todayNoon = Carbon::now('UTC')->startOfDay()->addHours(12);
+        $yesterday = Carbon::now('UTC')->subDay()->setTime(10, 0);
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, $todayMorning->toDateTimeString());
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, $todayNoon->toDateTimeString());
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, $yesterday->toDateTimeString());
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => (int) Carbon::now('UTC')->format('Y'),
+        ]));
+
+        // All three rows (incl. yesterday) — not today-bounded — newest first.
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.latest_checks', 3)
+            ->where('graph.series.uptime.latest_checks.0.status', MonitorCheckLogService::STATUS_FAILED)
+            ->where('graph.series.uptime.latest_checks.1.status', MonitorCheckLogService::STATUS_SUCCESS)
+            ->where('graph.series.uptime.latest_checks.2.status', MonitorCheckLogService::STATUS_SUCCESS)
+        );
+    }
+
+    public function test_latest_checks_are_capped_at_fifty(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $base = Carbon::now('UTC')->startOfDay()->addHours(1);
+        for ($i = 0; $i < 60; $i++) {
+            $this->seedUptimeLog(
+                $monitor,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                $base->copy()->addMinutes($i)->toDateTimeString()
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => (int) Carbon::now('UTC')->format('Y'),
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.latest_checks', 50)
+        );
+    }
+```
+
+- [ ] **Step 2: Run the tests — expect FAIL.**
+
+Run: `php artisan config:clear && php artisan test --filter MonitorHistoryGraphTest`
+Expected: FAIL — `graph.series.uptime.latest_checks` does not exist (the payload still has `today_checks`), and the span-days count would be 2 not 3.
+
+- [ ] **Step 3: Rename the call site.** In `MonitorsController.php` `buildGraphPayload`, change the series line:
+
+```php
+                'latest_checks' => $this->buildLatestChecks($monitor, $type, $timezone),
+```
+
+- [ ] **Step 4: Replace `buildTodayChecks` with `buildLatestChecks`.** Replace the whole `buildTodayChecks(...)` method with:
+
+```php
+    protected function buildLatestChecks(Monitor $monitor, string $checkType, string $timezone, int $limit = 50): array
+    {
+        return $monitor->checkLogs()
+            ->where('check_type', $checkType)
+            ->latest('checked_at')
+            ->limit($limit)
+            ->get()
+            ->map(function (MonitorCheckLog $log) use ($timezone) {
+                return [
+                    'id' => $log->id,
+                    'checked_at' => $log->checked_at->timezone($timezone)->toDateTimeString(),
+                    'status' => $log->status,
+                    'message' => $log->message,
+                    'failure_reason' => $log->failure_reason,
+                    'response_time_ms' => $log->response_time_ms,
+                ];
+            })
+            ->all();
+    }
+```
+
+- [ ] **Step 5: Run the tests — expect PASS.**
+
+Run: `php artisan test --filter MonitorHistoryGraphTest`
+Expected: PASS (incl. the two new latest_checks tests). Then `php artisan test --filter MonitorHistory` — all green, no regressions.
+
+- [ ] **Step 6: Pint + commit.**
+
+```bash
+vendor/bin/pint --dirty
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php
+git commit -m "Graph: latest_checks = last 50 per type (newest-first, spans days)"
+```
+
+---
+
+### Task 2: `stripSlots` util (Vitest TDD)
+
+**Files:**
+- Create: `resources/js/Utils/recentStrip.js`
+- Test: `resources/js/Utils/recentStrip.test.js`
+
+**Interfaces:**
+- Produces: `export function stripSlots(checks, capacity)` — `checks` newest-first; returns length-`capacity` array, left→right, leading `null`s when under-filled, most-recent checks trailing with the **newest at the last index**.
+
+- [ ] **Step 1: Write the failing test.** Create `resources/js/Utils/recentStrip.test.js`:
+
+```js
+import { describe, it, expect } from "vitest";
+import { stripSlots } from "@/Utils/recentStrip";
+
+const c = (id) => ({ id });
+
+describe("stripSlots", () => {
+    it("returns all-gray (null) when there are no checks", () => {
+        expect(stripSlots([], 3)).toEqual([null, null, null]);
+    });
+
+    it("right-aligns checks (newest last) and gray-pads the left", () => {
+        // newest-first input: c3 newest, c1 oldest
+        expect(stripSlots([c(3), c(2), c(1)], 5)).toEqual([
+            null,
+            null,
+            c(1),
+            c(2),
+            c(3),
+        ]);
+    });
+
+    it("fills exactly with no padding when checks === capacity", () => {
+        expect(stripSlots([c(3), c(2), c(1)], 3)).toEqual([c(1), c(2), c(3)]);
+    });
+
+    it("keeps only the most-recent `capacity` checks (newest on the right)", () => {
+        const five = [c(5), c(4), c(3), c(2), c(1)]; // newest-first
+        expect(stripSlots(five, 3)).toEqual([c(3), c(4), c(5)]);
+    });
+
+    it("handles zero/negative capacity safely", () => {
+        expect(stripSlots([c(1)], 0)).toEqual([]);
+        expect(stripSlots([c(1)], -2)).toEqual([]);
+    });
+});
+```
+
+- [ ] **Step 2: Run — expect FAIL.**
+
+Run: `export PATH="/Users/vaibhav/.nvm/versions/node/v22.22.2/bin:$PATH" && npm run test:js -- resources/js/Utils/recentStrip.test.js`
+Expected: FAIL — module `@/Utils/recentStrip` not found.
+
+- [ ] **Step 3: Implement.** Create `resources/js/Utils/recentStrip.js`:
+
+```js
+// Build the strip's slot array from a newest-first `checks` list.
+// Returns an array of length `capacity` (left -> right): leading nulls are gray
+// placeholders when there are fewer checks than slots; the most-recent checks
+// trail with the NEWEST at the last (right-most) index.
+export function stripSlots(checks, capacity) {
+    const cap = Math.max(0, capacity);
+    const recent = checks.slice(0, cap); // most-recent `cap`, still newest-first
+    const ordered = recent.slice().reverse(); // oldest -> newest (newest last)
+    const padCount = Math.max(0, cap - ordered.length);
+
+    return [...Array(padCount).fill(null), ...ordered];
+}
+```
+
+- [ ] **Step 4: Run — expect PASS.**
+
+Run: `npm run test:js -- resources/js/Utils/recentStrip.test.js`
+Expected: PASS (5 tests).
+
+- [ ] **Step 5: Commit.**
+
+```bash
+git add resources/js/Utils/recentStrip.js resources/js/Utils/recentStrip.test.js
+git commit -m "Add stripSlots: right-aligned, gray-padded recent-check slots"
+```
+
+---
+
+### Task 3: `MonitorRecentStrip` component + wire into Show
+
+**Files:**
+- Create: `resources/js/Components/MonitorRecentStrip.jsx` (renamed from `MonitorTodayBar.jsx`)
+- Delete: `resources/js/Components/MonitorTodayBar.jsx`
+- Modify: `resources/js/Pages/Monitors/Show.jsx` (import + usage + prop)
+
+**Interfaces:**
+- Consumes: `stripSlots` (Task 2); `SINGLE_STATUS_CLASS` (`@/Utils/heatmapCell`); `formatDateTimeUTC`, `getCheckStatusMeta`, `normalizeCheckStatus`, `statusesForCheckType` (`@/Utils/checkStatusSeverity`); `Tooltip`; `series.<type>.latest_checks` (Task 1).
+- Produces: `MonitorRecentStrip({ checkType, checks })`.
+
+- [ ] **Step 1: Create `resources/js/Components/MonitorRecentStrip.jsx`** with the full content:
+
+```jsx
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { formatDateTimeUTC } from "@/Utils/formatDate";
+import {
+    getCheckStatusMeta,
+    normalizeCheckStatus,
+    statusesForCheckType,
+} from "@/Utils/checkStatusSeverity";
+import { SINGLE_STATUS_CLASS } from "@/Utils/heatmapCell";
+import { stripSlots } from "@/Utils/recentStrip";
+import Tooltip from "@/Components/Tooltip";
+
+const SEGMENT_WIDTH = 8;
+const SEGMENT_GAP = 2;
+const MAX_SLOTS = 50;
+
+function buildSegmentTooltip(check) {
+    return [
+        formatDateTimeUTC(check.checked_at),
+        `Status: ${getCheckStatusMeta(check.status).label}`,
+        check.message ? `Message: ${check.message}` : null,
+        check.response_time_ms !== null && check.response_time_ms !== undefined
+            ? `Response: ${check.response_time_ms}ms`
+            : null,
+        check.failure_reason ? `Failure: ${check.failure_reason}` : null,
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+
+export default function MonitorRecentStrip({ checkType, checks = [] }) {
+    const containerRef = useRef(null);
+    const [capacity, setCapacity] = useState(MAX_SLOTS);
+
+    // How many fixed-width slots fit, capped at MAX_SLOTS.
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return undefined;
+        }
+
+        const measure = () => {
+            const width = element.clientWidth;
+            const perSegment = SEGMENT_WIDTH + SEGMENT_GAP;
+            const fit = Math.max(
+                1,
+                Math.floor((width + SEGMENT_GAP) / perSegment)
+            );
+            setCapacity(Math.min(MAX_SLOTS, fit));
+        };
+
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [checks.length]);
+
+    const slots = useMemo(
+        () => stripSlots(checks, capacity),
+        [checks, capacity]
+    );
+    const shown = slots.filter(Boolean).length;
+    const legendStatuses = statusesForCheckType(checkType);
+
+    return (
+        <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+            <div className="mb-2 flex items-baseline gap-x-2">
+                <span className="text-sm font-medium text-gray-900">
+                    Recent checks
+                </span>
+                <span className="text-xs text-gray-500 tabular-nums">
+                    last {shown}
+                </span>
+            </div>
+
+            <div ref={containerRef} className="flex items-stretch py-0.5">
+                <div className="flex" style={{ gap: SEGMENT_GAP }}>
+                    {slots.map((check, index) =>
+                        check ? (
+                            <Tooltip
+                                key={check.id}
+                                content={buildSegmentTooltip(check)}
+                            >
+                                <div
+                                    tabIndex={0}
+                                    aria-label={buildSegmentTooltip(check).replace(
+                                        /\n/g,
+                                        ", "
+                                    )}
+                                    className={[
+                                        "h-8 rounded-sm border transition-opacity duration-150 ease-out",
+                                        "hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500",
+                                        "motion-reduce:transition-none",
+                                        SINGLE_STATUS_CLASS[
+                                            normalizeCheckStatus(check.status)
+                                        ],
+                                    ].join(" ")}
+                                    style={{ width: SEGMENT_WIDTH }}
+                                />
+                            </Tooltip>
+                        ) : (
+                            <div
+                                key={`gap-${index}`}
+                                aria-hidden="true"
+                                className="h-8 rounded-sm border bg-gray-100 border-gray-200"
+                                style={{ width: SEGMENT_WIDTH }}
+                            />
+                        )
+                    )}
+                </div>
+            </div>
+
+            <div className="mt-3 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600">
+                {legendStatuses.map((status) => (
+                    <span key={status} className="flex items-center gap-1.5">
+                        <span
+                            className={`h-3 w-3 rounded-sm border ${SINGLE_STATUS_CLASS[status]}`}
+                        />
+                        {getCheckStatusMeta(status).label}
+                    </span>
+                ))}
+            </div>
+        </div>
+    );
+}
+```
+
+- [ ] **Step 2: Delete the old component.**
+
+```bash
+git rm resources/js/Components/MonitorTodayBar.jsx
+```
+
+- [ ] **Step 3: Update `Show.jsx` import.** Replace `import MonitorTodayBar from "@/Components/MonitorTodayBar";` with:
+
+```jsx
+import MonitorRecentStrip from "@/Components/MonitorRecentStrip";
+```
+
+- [ ] **Step 4: Update the usage in `Show.jsx`.** Replace the `<MonitorTodayBar … />` element with:
+
+```jsx
+                                                    <MonitorRecentStrip
+                                                        checkType={type}
+                                                        checks={series?.latest_checks || []}
+                                                    />
+```
+
+- [ ] **Step 5: Build — expect success.**
+
+Run: `export PATH="/Users/vaibhav/.nvm/versions/node/v22.22.2/bin:$PATH" && npm run build`
+Expected: built successfully, no errors, no remaining reference to `MonitorTodayBar` (grep: `grep -rn "MonitorTodayBar\|today_checks" resources/js` returns nothing).
+
+- [ ] **Step 6: Commit.**
+
+```bash
+git add resources/js/Components/MonitorRecentStrip.jsx resources/js/Pages/Monitors/Show.jsx
+git commit -m "Recent strip: rolling last-50 bars, gray-padded, single-color, no hover-grow"
+```
+
+---
+
+## Self-Review
+
+1. **Spec coverage:** Item 4 (rolling last-50, responsive cap-50, gray-pad left, static) → Tasks 1+2+3. Item 1 (remove hover shadow/grow) → Task 3 (drop `hover:scale-y-110` + `overflow-hidden`). Item 2 (tooltip date+time+details) → Task 3 (`buildSegmentTooltip` kept) + round-1 portal. Item 3 (consistency) → shared `SINGLE_STATUS_CLASS` in Task 3 + backend in Task 1. Item 5 (today solid indigo) → already shipped round 1 (verify after build). Relabel → Task 3.
+2. **Placeholder scan:** none — every step has exact code/commands.
+3. **Type consistency:** `buildLatestChecks` / `latest_checks` / `stripSlots` / `SINGLE_STATUS_CLASS` / `MonitorRecentStrip({checkType, checks})` used consistently across tasks.
diff --git a/plans/2026-06-25-monitor-history-ui-enhancements-plan.md b/plans/2026-06-25-monitor-history-ui-enhancements-plan.md
new file mode 100644
index 0000000..feaa3ed
--- /dev/null
+++ b/plans/2026-06-25-monitor-history-ui-enhancements-plan.md
@@ -0,0 +1,4002 @@
+# Monitor History UI Enhancements Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restructure the monitor detail page's Monitor History UI — decouple the heatmaps from the filters into a full-calendar-year view with year navigation, add a per-check "today" bar, tabbed+paginated recent checks, styled tooltips, per-metric legends, readable dates, and a set of high-value enhancements that surface data the backend already computes.
+
+**Architecture:** Backend (`MonitorsController@show`) splits its Inertia payload into independently-reloadable props (`graph`, `filters`, `summary`, `recentChecks`) so year-nav, filter changes, tab switches, and pagination each refresh only their slice via Inertia partial visits. Frontend extracts pure date/calendar/status logic into unit-tested utilities, rebuilds the heatmap as a responsive full-year grid, and composes focused components. The feature stays behind the existing `config('monitor-history.enabled')` flag.
+
+**Tech Stack:** Laravel 12, Inertia v2 (`@inertiajs/react` ^2.3.8), React 19, Tailwind v4, `@headlessui/react`, `@heroicons/react`, PHPUnit 11 (MySQL `monitor_test`), Vitest (added Phase 1, for pure JS utils only).
+
+## Global Constraints
+
+- **Branch:** create `feat/monitor-history-ui` off `main` before any task (we are currently on `main`).
+- **Feature flag:** all history UI/payload remains gated by `config('monitor-history.enabled')`; do not change gating. When disabled, `graph`/`filters`/`summary`/`recentChecks` are all `null`.
+- **Timezone:** every date/time is resolved and formatted in the server timezone `config('monitor-history.timezone') ?: config('app.timezone','UTC')` — never the browser timezone. JS formatters MUST use `timeZone: 'UTC'` on already-tz-shifted ISO strings.
+- **Status palette (unchanged), single source of truth `resources/js/Utils/checkStatusSeverity.js`:** healthy `green-300/500/700`, warning `yellow-300`/`orange-400`, failed `red-300/500/700`, no-checks `gray-100`, unknown `gray-300`. Brand accent indigo/purple (`purple-600`).
+- **Numbers:** `tabular-nums` on all counts, ratios, latencies, timestamps.
+- **Motion:** transitions 150ms ease-out; every transition carries `motion-reduce:transition-none motion-reduce:transform-none`; gate JS animation behind `matchMedia('(prefers-reduced-motion: reduce)')`.
+- **Accessibility:** contrast ≥4.5:1 (chrome text min `gray-600`); never color-alone (text/icon/aria); `focus-visible` rings on all interactive elements; interactive cells keyboard-reachable.
+- **Locked decisions (approved):** numbered pager, page size **25**; tabs **Uptime + Domain only**; date format **`27 Mar 2026`**; **Back inline-left** of title; **Certificate deferred** — omit certificate from `graph.check_types`, the today-bar, tabs, and legends (do not render cert sections); include **all Tier-1 enhancements** (E1–E9), defer Tier-2.
+- **Backend tests:** PHPUnit against MySQL `monitor_test`. Before running: `php artisan config:clear` and ensure the DB exists (`mysql -u root -e "CREATE DATABASE IF NOT EXISTS monitor_test;"`). Pattern: feature tests on `monitors.show` asserting Inertia props via `assertInertia`. Run a single test with `php artisan test --filter <TestName>`.
+- **Frontend pure utils:** TDD with Vitest (`npm run test:js`). **Frontend components:** no DOM test runner is added — verify with `npm run build` (must succeed) plus the backend feature tests that assert payload shape. This is a deliberate platform constraint, not skipped testing.
+- **Per task:** run `vendor/bin/pint --dirty` for PHP changes; `npm run build` for JS component changes; commit at the end of each task.
+- **Inertia partial-visit contract (used by every interactive history control):** match the existing pattern in `Show.jsx`:
+  ```js
+  router.get(route('monitors.show', monitor.id), params, {
+    only: [/* props to refresh */], preserveState: true, preserveScroll: true, replace: true,
+  })
+  ```
+  `params` = the full current history param set `{ year, preset, from, to, recent_type, recent_page }` merged with the control's change (use the helper `buildHistoryParams(current, overrides)` from Task 3.x). Targets per control:
+  - **Year nav** → `only: ['graph']`, override `{ year }`.
+  - **Preset / Apply filter** → `only: ['filters','summary','recentChecks']`, override `{ preset|from|to, recent_page: 1 }`.
+  - **Tab change** → `only: ['recentChecks']`, override `{ recent_type, recent_page: 1 }`.
+  - **Page change** → `only: ['recentChecks']`, override `{ recent_page }`.
+  - Each control sets a local pending flag on `onStart`/`onFinish` → disable + `aria-busy` + skeleton if >300ms.
+
+---
+
+## Interfaces & Contracts (authoritative — every task consumes these names verbatim)
+
+### Inertia payload from `MonitorsController@show` (when flag enabled)
+
+```
+monitor:  // existing model; fields the UI reads:
+  name, url, raw_url, uptime_status, uptime_last_check_date,
+  uptime_check_failure_reason, domain_expires_at,
+  uptime_check_enabled, domain_check_enabled, certificate_check_enabled
+features: { monitorHistory: bool }   // shared (HandleInertiaRequests)
+
+graph:    // NOT filter-driven; driven by ?year
+  year: int
+  available_years: int[]             // [earliestDataYear .. currentYear], ascending
+  timezone: string
+  check_types: [{ type: 'uptime'|'domain', enabled: bool }]   // cert omitted
+  series: {
+    <type>: {
+      summary: { total_checks:int, success_ratio:float,
+                 status_totals: { success:int, warning:int, failed:int, unknown:int } },
+      daily_metrics: [ { date:'YYYY-MM-DD', total_checks:int, successful_checks:int,
+                         warning_checks:int, failed_checks:int, success_ratio:float,
+                         worst_status:string, avg_response_time_ms:int|null,
+                         p95_response_time_ms:int|null } ],   // only days that have data
+      today_checks: [ { id:int, checked_at:'YYYY-MM-DD HH:mm:ss', status:string,
+                        message:string|null, failure_reason:string|null,
+                        response_time_ms:int|null } ],         // today only, cap 200, newest first
+    }
+  }
+
+filters:  { preset:string, from:'YYYY-MM-DD', to:'YYYY-MM-DD', timezone:string }
+
+summary:  // filter-driven (selected_range) + all_time
+  all_time:      { total_checks, success_ratio, status_totals, by_type }   // buildSummary() shape
+  selected_range:{ total_checks, success_ratio, status_totals, by_type }
+  first_checked_at: 'YYYY-MM-DD HH:mm:ss' | null
+
+recentChecks: // filter-driven + tab + paginated
+  type: 'uptime'|'domain'
+  data: [ { id, check_type, status, checked_at:'YYYY-MM-DD HH:mm:ss',
+            message, failure_reason, response_time_ms } ]
+  pagination: { current_page:int, last_page:int, per_page:int, total:int }
+```
+When the flag is disabled, `graph`/`filters`/`summary`/`recentChecks` are `null`.
+`buildSummary($query)` already returns `{ total_checks, status_totals{success,warning,failed,unknown}, by_type{<type>:{total_checks,status_totals,success_ratio}}, success_ratio }` — reuse as-is.
+
+### Backend helper signatures (private methods on `MonitorsController`)
+
+```php
+protected function resolveGraphYear(Request $request, array $availableYears): int   // ?year, default current year (tz), clamped into availableYears
+protected function availableYears(Monitor $monitor, string $timezone): array         // [minYear..currentYear] ascending; [currentYear] if no data
+protected function graphCheckTypes(Monitor $monitor): array                          // [{type:'uptime',enabled},{type:'domain',enabled}] — cert omitted
+protected function buildGraphPayload(Monitor $monitor, int $year, string $timezone): array  // {year,available_years,timezone,check_types,series}
+protected function buildTodayChecks(Monitor $monitor, string $checkType, string $timezone): array  // today only, ->limit(200), newest first, mapped rows
+protected function buildRecentChecks(Monitor $monitor, string $type, Carbon $fromUtc, Carbon $toUtc, string $timezone): array  // {type,data,pagination} via ->paginate(25)
+// existing reused: resolveHistoryRange(), buildSummary(), parseDateInput()
+```
+Request params read by `show()`: `year` (graph), `preset|from|to` (filters/summary/recentChecks range), `recent_type` (default `'uptime'`), `recent_page` (default 1).
+
+### JS utility signatures (exact exports)
+
+```js
+// resources/js/Utils/formatDate.js
+export function formatDateUTC(iso)        // 'YYYY-MM-DD'|ISO -> '27 Mar 2026'
+export function formatDateTimeUTC(iso)    // -> '27 Mar 2026, 15:00'
+export function formatRelative(iso, nowMs)// -> 'just now' | '5m ago' | '3h ago' | '2d ago'
+
+// resources/js/Utils/heatmapCalendar.js
+export function buildYearGrid(year)       // -> { weeks: Array<Array<{ iso:'YYYY-MM-DD', inYear:boolean }>> } ; Sun..Sat rows, full Jan1..Dec31 padded to whole weeks (pad days inYear:false)
+export function monthLabelColumns(weeks)  // -> Array<{ label:'Jan'..'Dec', colIndex:number }> aligned to first week-column containing each month's day 1; drops a label if <3 cols from previous
+export function computeCellSize(containerWidth, weekCount, opts) // opts={gap,min,max} -> integer px cell size that fits width, clamped [min,max]
+
+// resources/js/Utils/checkStatusSeverity.js  (ADD to existing file)
+export const CHECK_TYPE_STATUSES = { uptime:['success','failed','unknown'], domain:['success','warning','failed','unknown'], certificate:['success','failed','unknown'] }
+export function statusesForCheckType(checkType) // -> string[] (all four if unknown type)
+```
+Existing `checkStatusSeverity.js` exports remain: `CHECK_STATUS`, `normalizeCheckStatus`, `getCheckStatusMeta`, `getCheckStatusBadgeColor`, `mapUptimeStatusToCheckStatus`. `CHECK_STATUS_META[status].heatmapClass` is the solid per-status color used by the today-bar.
+
+### Component contracts (props)
+
+```
+Tooltip({ content, children, className })             // hover+focus; role=tooltip; aria-describedby wired; content = string|node
+MonitorHistoryHeatmap({ checkType, title, description, year, points, todayIso })
+                                                       // points = series[type].daily_metrics; full-year grid; month axis; today ring; per-metric legend; focusable cells + Tooltip
+MonitorTodayBar({ checkType, checks })                // checks = series[type].today_checks; thin segments newest->oldest, most-recent-that-fit; per-segment Tooltip
+MonitorHistoryFilters({ filters, pending, onApply })  // onApply({preset}|{preset:'custom',from,to}); inline row; matched h-9; aria-pressed presets; focus rings
+SummaryStats({ summary })                             // reliability % lead card + supporting success/warning/failed/unknown + all-time compare + empty-state branch
+RecentChecksPanel({ recentChecks, checkTypes, pending, onTabChange, onPageChange })
+                                                       // tabs uptime/domain; table Time/Type/Status/Message/Response(ms); numbered pager
+MonitorLiveStatus({ monitor })                         // UP/DOWN/PENDING pill + 'last checked X ago' + failure reason when down
+```
+
+### Show.jsx param helper (Task 3.x, consumed everywhere)
+```js
+// current = { year, preset, from, to, recent_type, recent_page } derived from props
+export function buildHistoryParams(current, overrides) // -> merged plain object for router.get params
+```
+
+---
+
+## Phases (each ends with a working, reviewable deliverable)
+
+- **Phase 1 — Foundations & pure utils (Vitest TDD):** Vitest setup; `checkStatusSeverity` per-type status map; `formatDate`; `heatmapCalendar`; `Tooltip` component. No page wiring yet.
+- **Phase 2 — Backend payload restructure (PHPUnit TDD):** `show()` returns `graph`/`filters`/`summary`/`recentChecks`; `year`+`available_years`; `today_checks`; recent checks `paginate(25)` + `recent_type`; `first_checked_at`; cert omitted from `check_types`.
+- **Phase 3 — Graphs section (build-verified):** rebuild `MonitorHistoryHeatmap` (full-year, month axis, today highlight, a11y, styled tooltips, per-metric legend); `MonitorTodayBar`; year nav; per-type headline; wire into `Show.jsx` graphs section (position 1, decoupled).
+- **Phase 4 — Filters + Summary (build-verified):** `MonitorHistoryFilters` inline row (position 2, filter-driven only); `SummaryStats` reliability-led KPIs with unknown reconciliation, all-time compare, empty-state disambiguation (position 3); timezone label.
+- **Phase 5 — Recent Checks panel (build-verified; backend in P2):** `RecentChecksPanel` tabs + numbered pagination + Response column + row hover + badge icons (position 4).
+- **Phase 6 — Header, live status & polish:** Back inline-left; `MonitorLiveStatus` hero; 2-tier headers; flatten nested cards; compact snapshot strip; de-emphasize disabled checks; reduced-motion + final a11y/contrast pass.
+
+## Known deferrals (not tasked here)
+
+- **E3 range-level avg/p95 latency figure** near the uptime heatmap. The Response (ms) column (Phase 5) and the per-day tooltip avg/p95 (Phase 3) cover latency; a *range-level* figure would need a dedicated backend rollup (averaging daily averages / p95s is statistically unsound), so it is deferred rather than approximated.
+- **Tier-2 enhancements** (per the approved §G of the spec): certificate enable-path wiring + SSL/domain expiry badges, outage/incident timeline (last/longest outage, MTTR), uptime/downtime streaks, custom-range validation feedback, CSV export. Tracked in `plans/monitor-history-ui-enhancements-spec.md` §E Tier 2.
+
+---
+
+## Phase 1 — Foundations & pure utils (Vitest TDD)
+
+**Deliverable:** Vitest wired into the project (`npm run test:js`), `checkStatusSeverity.js` extended with a per-check-type status map, two new fully unit-tested pure utilities (`formatDate.js`, `heatmapCalendar.js`), and a reusable build-verified `Tooltip.jsx` — all with no page wiring yet.
+
+### Task 1.1: Add Vitest tooling, config, and smoke test
+
+**Files:**
+- Modify: `/Users/vaibhav/projects/coloredcow/monitor/package.json`
+- Create: `/Users/vaibhav/projects/coloredcow/monitor/vitest.config.js`
+- Create (test): `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/__tests__/smoke.test.js`
+
+**Interfaces:**
+- Produces: `npm run test:js` script (`"test:js": "vitest run"`) consumed by every later frontend-util task in the spine.
+- Consumes: existing `@vitejs/plugin-react` devDependency (already present in `package.json`); the `@` alias already used across `resources/js` source (e.g. `@/Utils/checkStatusSeverity`).
+
+- [ ] **Step 1: Install Vitest as a devDependency.**
+```bash
+npm install --save-dev vitest@^2.1.9
+```
+
+- [ ] **Step 2: Add the `test:js` script to `package.json`.** Replace the `scripts` block:
+```json
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test:js": "vitest run"
+    },
+```
+
+- [ ] **Step 3: Create `vitest.config.js`** (pure JS utils — no jsdom; resolve the `@` alias so utils can import siblings):
+```js
+import { defineConfig } from "vitest/config";
+import { fileURLToPath } from "node:url";
+
+export default defineConfig({
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./resources/js", import.meta.url)),
+        },
+    },
+    test: {
+        environment: "node",
+        include: ["resources/js/**/*.{test,spec}.{js,jsx}"],
+        globals: false,
+    },
+});
+```
+
+- [ ] **Step 4: Create the smoke test** at `resources/js/Utils/__tests__/smoke.test.js`:
+```js
+import { describe, it, expect } from "vitest";
+
+describe("vitest smoke", () => {
+    it("runs the test runner", () => {
+        expect(1 + 1).toBe(2);
+    });
+});
+```
+
+- [ ] **Step 5: Verify** — run:
+```bash
+npm run test:js -- resources/js/Utils/__tests__/smoke.test.js
+```
+Expected: PASS — `1 passed` (1 test), exit code 0.
+
+- [ ] **Step 6: Commit.**
+```bash
+git add package.json package-lock.json vitest.config.js resources/js/Utils/__tests__/smoke.test.js && git commit -m "Add Vitest tooling, config, and smoke test for pure JS utils"
+```
+
+### Task 1.2: Add per-check-type status map to `checkStatusSeverity.js` (TDD)
+
+**Files:**
+- Create (test): `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/__tests__/checkStatusSeverity.test.js`
+- Modify: `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/checkStatusSeverity.js`
+
+**Interfaces:**
+- Produces (exact, per spine):
+  - `export const CHECK_TYPE_STATUSES = { uptime:['success','failed','unknown'], domain:['success','warning','failed','unknown'], certificate:['success','failed','unknown'] }`
+  - `export function statusesForCheckType(checkType)` → `string[]` (all four statuses for an unknown type).
+- Consumes: existing `CHECK_STATUS` export already in this file (`success`/`warning`/`failed`/`unknown` string values). Existing exports (`CHECK_STATUS`, `normalizeCheckStatus`, `getCheckStatusMeta`, `getCheckStatusBadgeColor`, `mapUptimeStatusToCheckStatus`) MUST remain unchanged.
+
+- [ ] **Step 1: Write the failing test** at `resources/js/Utils/__tests__/checkStatusSeverity.test.js`:
+```js
+import { describe, it, expect } from "vitest";
+import {
+    CHECK_TYPE_STATUSES,
+    statusesForCheckType,
+} from "@/Utils/checkStatusSeverity";
+
+describe("CHECK_TYPE_STATUSES", () => {
+    it("uptime omits warning", () => {
+        expect(CHECK_TYPE_STATUSES.uptime).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("certificate omits warning", () => {
+        expect(CHECK_TYPE_STATUSES.certificate).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("domain includes warning", () => {
+        expect(CHECK_TYPE_STATUSES.domain).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+});
+
+describe("statusesForCheckType", () => {
+    it("returns the uptime list for 'uptime'", () => {
+        expect(statusesForCheckType("uptime")).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("returns the domain list for 'domain'", () => {
+        expect(statusesForCheckType("domain")).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("returns the certificate list for 'certificate'", () => {
+        expect(statusesForCheckType("certificate")).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("falls back to all four statuses for an unknown type", () => {
+        expect(statusesForCheckType("bogus")).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("falls back for undefined input", () => {
+        expect(statusesForCheckType(undefined)).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("returns a copy, not the shared array reference", () => {
+        const result = statusesForCheckType("uptime");
+        result.push("mutated");
+        expect(CHECK_TYPE_STATUSES.uptime).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+});
+```
+
+- [ ] **Step 2: Run the test, expect FAIL.**
+```bash
+npm run test:js -- resources/js/Utils/__tests__/checkStatusSeverity.test.js
+```
+Expected: FAIL — import resolves but `CHECK_TYPE_STATUSES`/`statusesForCheckType` are `undefined` (e.g. "Cannot read properties of undefined" / `statusesForCheckType is not a function`).
+
+- [ ] **Step 3: Append the new exports** to `resources/js/Utils/checkStatusSeverity.js` (after the existing `mapUptimeStatusToCheckStatus` function, at end of file):
+```js
+export const CHECK_TYPE_STATUSES = Object.freeze({
+    uptime: [CHECK_STATUS.SUCCESS, CHECK_STATUS.FAILED, CHECK_STATUS.UNKNOWN],
+    domain: [
+        CHECK_STATUS.SUCCESS,
+        CHECK_STATUS.WARNING,
+        CHECK_STATUS.FAILED,
+        CHECK_STATUS.UNKNOWN,
+    ],
+    certificate: [
+        CHECK_STATUS.SUCCESS,
+        CHECK_STATUS.FAILED,
+        CHECK_STATUS.UNKNOWN,
+    ],
+});
+
+const ALL_CHECK_STATUSES = [
+    CHECK_STATUS.SUCCESS,
+    CHECK_STATUS.WARNING,
+    CHECK_STATUS.FAILED,
+    CHECK_STATUS.UNKNOWN,
+];
+
+export function statusesForCheckType(checkType) {
+    const statuses = CHECK_TYPE_STATUSES[checkType] || ALL_CHECK_STATUSES;
+
+    return [...statuses];
+}
+```
+
+- [ ] **Step 4: Run the test, expect PASS.**
+```bash
+npm run test:js -- resources/js/Utils/__tests__/checkStatusSeverity.test.js
+```
+Expected: PASS — `9 passed`, exit code 0.
+
+- [ ] **Step 5: Commit.**
+```bash
+git add resources/js/Utils/checkStatusSeverity.js resources/js/Utils/__tests__/checkStatusSeverity.test.js && git commit -m "Add CHECK_TYPE_STATUSES and statusesForCheckType per check type"
+```
+
+### Task 1.3: Create `formatDate.js` UTC formatters (TDD)
+
+**Files:**
+- Create (test): `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/__tests__/formatDate.test.js`
+- Create: `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/formatDate.js`
+
+**Interfaces:**
+- Produces (exact, per spine):
+  - `export function formatDateUTC(iso)` → `'27 Mar 2026'`
+  - `export function formatDateTimeUTC(iso)` → `'27 Mar 2026, 15:00'`
+  - `export function formatRelative(iso, nowMs)` → `'just now' | '5m ago' | '3h ago' | '2d ago'`
+- Consumes: ISO strings already shifted to the server timezone (Global Constraint: JS formatters MUST use `timeZone: 'UTC'`). Accepts both `'YYYY-MM-DD'` and `'YYYY-MM-DD HH:mm:ss'` (the `checked_at` payload shape). `nowMs` is a millisecond epoch (e.g. `Date.now()`).
+
+- [ ] **Step 1: Write the failing test** at `resources/js/Utils/__tests__/formatDate.test.js`:
+```js
+import { describe, it, expect } from "vitest";
+import {
+    formatDateUTC,
+    formatDateTimeUTC,
+    formatRelative,
+} from "@/Utils/formatDate";
+
+describe("formatDateUTC", () => {
+    it("formats a date-only string as '27 Mar 2026'", () => {
+        expect(formatDateUTC("2026-03-27")).toBe("27 Mar 2026");
+    });
+
+    it("formats a datetime string using its date part", () => {
+        expect(formatDateUTC("2026-03-27 15:00:00")).toBe("27 Mar 2026");
+    });
+
+    it("formats a leap day correctly", () => {
+        expect(formatDateUTC("2024-02-29")).toBe("29 Feb 2024");
+    });
+
+    it("does not shift across days at UTC midnight", () => {
+        expect(formatDateUTC("2026-01-01 00:00:00")).toBe("01 Jan 2026");
+    });
+
+    it("returns empty string for null/empty input", () => {
+        expect(formatDateUTC(null)).toBe("");
+        expect(formatDateUTC("")).toBe("");
+    });
+});
+
+describe("formatDateTimeUTC", () => {
+    it("formats a datetime as '27 Mar 2026, 15:00'", () => {
+        expect(formatDateTimeUTC("2026-03-27 15:00:00")).toBe(
+            "27 Mar 2026, 15:00"
+        );
+    });
+
+    it("pads single-digit hours and minutes", () => {
+        expect(formatDateTimeUTC("2026-03-27 09:05:00")).toBe(
+            "27 Mar 2026, 09:05"
+        );
+    });
+
+    it("renders midnight as 00:00 (24h, no shift)", () => {
+        expect(formatDateTimeUTC("2026-01-01 00:00:00")).toBe(
+            "01 Jan 2026, 00:00"
+        );
+    });
+
+    it("returns empty string for null input", () => {
+        expect(formatDateTimeUTC(null)).toBe("");
+    });
+});
+
+describe("formatRelative", () => {
+    const base = Date.UTC(2026, 2, 27, 15, 0, 0); // 2026-03-27 15:00:00 UTC
+
+    it("returns 'just now' for under a minute", () => {
+        expect(formatRelative("2026-03-27 14:59:30", base)).toBe("just now");
+    });
+
+    it("returns minutes for under an hour", () => {
+        expect(formatRelative("2026-03-27 14:55:00", base)).toBe("5m ago");
+    });
+
+    it("returns hours for under a day", () => {
+        expect(formatRelative("2026-03-27 12:00:00", base)).toBe("3h ago");
+    });
+
+    it("returns days for a day or more", () => {
+        expect(formatRelative("2026-03-25 15:00:00", base)).toBe("2d ago");
+    });
+
+    it("clamps future timestamps to 'just now'", () => {
+        expect(formatRelative("2026-03-27 15:00:30", base)).toBe("just now");
+    });
+
+    it("returns empty string for null input", () => {
+        expect(formatRelative(null, base)).toBe("");
+    });
+});
+```
+
+- [ ] **Step 2: Run the test, expect FAIL.**
+```bash
+npm run test:js -- resources/js/Utils/__tests__/formatDate.test.js
+```
+Expected: FAIL — module `@/Utils/formatDate` cannot be resolved ("Failed to resolve import" / "Cannot find module").
+
+- [ ] **Step 3: Create `resources/js/Utils/formatDate.js`:**
+```js
+// All formatting is done in UTC by design. The backend ships ISO strings that
+// have already been shifted into the configured server timezone, so we must NOT
+// re-shift them into the browser timezone (Global Constraint).
+
+function toUTCDate(iso) {
+    if (!iso) {
+        return null;
+    }
+
+    // Accept 'YYYY-MM-DD' and 'YYYY-MM-DD HH:mm:ss' (the checked_at payload shape).
+    const normalized = String(iso).trim().replace(" ", "T");
+    const [datePart, timePart = "00:00:00"] = normalized.split("T");
+    const [year, month, day] = datePart.split("-").map(Number);
+    const [hour = 0, minute = 0, second = 0] = timePart
+        .split(":")
+        .map(Number);
+
+    if (!year || !month || !day) {
+        return null;
+    }
+
+    return new Date(Date.UTC(year, month - 1, day, hour, minute, second));
+}
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+    timeZone: "UTC",
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+});
+
+const TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+    timeZone: "UTC",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+});
+
+export function formatDateUTC(iso) {
+    const date = toUTCDate(iso);
+
+    if (!date) {
+        return "";
+    }
+
+    // en-GB '2-digit/short/numeric' yields '27 Mar 2026'.
+    return DATE_FORMATTER.format(date);
+}
+
+export function formatDateTimeUTC(iso) {
+    const date = toUTCDate(iso);
+
+    if (!date) {
+        return "";
+    }
+
+    return `${DATE_FORMATTER.format(date)}, ${TIME_FORMATTER.format(date)}`;
+}
+
+export function formatRelative(iso, nowMs) {
+    const date = toUTCDate(iso);
+
+    if (!date) {
+        return "";
+    }
+
+    const deltaMs = Number(nowMs) - date.getTime();
+    const deltaSeconds = Math.floor(deltaMs / 1000);
+
+    if (deltaSeconds < 60) {
+        return "just now";
+    }
+
+    const deltaMinutes = Math.floor(deltaSeconds / 60);
+    if (deltaMinutes < 60) {
+        return `${deltaMinutes}m ago`;
+    }
+
+    const deltaHours = Math.floor(deltaMinutes / 60);
+    if (deltaHours < 24) {
+        return `${deltaHours}h ago`;
+    }
+
+    const deltaDays = Math.floor(deltaHours / 24);
+    return `${deltaDays}d ago`;
+}
+```
+
+- [ ] **Step 4: Run the test, expect PASS.**
+```bash
+npm run test:js -- resources/js/Utils/__tests__/formatDate.test.js
+```
+Expected: PASS — `15 passed`, exit code 0.
+
+- [ ] **Step 5: Commit.**
+```bash
+git add resources/js/Utils/formatDate.js resources/js/Utils/__tests__/formatDate.test.js && git commit -m "Add UTC date/time/relative formatters in formatDate util"
+```
+
+### Task 1.4: Create `heatmapCalendar.js` grid/label/sizing utils (TDD)
+
+**Files:**
+- Create (test): `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/__tests__/heatmapCalendar.test.js`
+- Create: `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/heatmapCalendar.js`
+
+**Interfaces:**
+- Produces (exact, per spine):
+  - `export function buildYearGrid(year)` → `{ weeks: Array<Array<{ iso:'YYYY-MM-DD', inYear:boolean }>> }`; Sun..Sat rows, full Jan1..Dec31 padded to whole weeks (pad days `inYear:false`).
+  - `export function monthLabelColumns(weeks)` → `Array<{ label:'Jan'..'Dec', colIndex:number }>` aligned to the first week-column containing each month's day 1; drops a label if `<3` cols from the previous kept label.
+  - `export function computeCellSize(containerWidth, weekCount, opts)` with `opts={gap,min,max}` → integer px cell size that fits width, clamped `[min,max]`.
+- Consumes: nothing external (pure date math via `Date.UTC`).
+
+- [ ] **Step 1: Write the failing test** at `resources/js/Utils/__tests__/heatmapCalendar.test.js`:
+```js
+import { describe, it, expect } from "vitest";
+import {
+    buildYearGrid,
+    monthLabelColumns,
+    computeCellSize,
+} from "@/Utils/heatmapCalendar";
+
+describe("buildYearGrid", () => {
+    it("starts each week on Sunday and ends on Saturday", () => {
+        const { weeks } = buildYearGrid(2026);
+        for (const week of weeks) {
+            expect(week).toHaveLength(7);
+        }
+        // 2026-01-01 is a Thursday, so the first week's Sunday is 2025-12-28.
+        expect(weeks[0][0].iso).toBe("2025-12-28");
+        expect(weeks[0][0].inYear).toBe(false);
+    });
+
+    it("includes Jan 1 and Dec 31 of the target year as inYear cells", () => {
+        const { weeks } = buildYearGrid(2026);
+        const flat = weeks.flat();
+        const jan1 = flat.find((c) => c.iso === "2026-01-01");
+        const dec31 = flat.find((c) => c.iso === "2026-12-31");
+        expect(jan1.inYear).toBe(true);
+        expect(dec31.inYear).toBe(true);
+    });
+
+    it("marks padding days as inYear:false", () => {
+        const { weeks } = buildYearGrid(2026);
+        const flat = weeks.flat();
+        const padBefore = flat.find((c) => c.iso === "2025-12-31");
+        expect(padBefore.inYear).toBe(false);
+    });
+
+    it("counts exactly 365 in-year days for a common year", () => {
+        const { weeks } = buildYearGrid(2026);
+        const inYearCount = weeks.flat().filter((c) => c.inYear).length;
+        expect(inYearCount).toBe(365);
+    });
+
+    it("counts exactly 366 in-year days for the 2024 leap year", () => {
+        const { weeks } = buildYearGrid(2024);
+        const flat = weeks.flat();
+        const inYearCount = flat.filter((c) => c.inYear).length;
+        expect(inYearCount).toBe(366);
+        expect(flat.find((c) => c.iso === "2024-02-29").inYear).toBe(true);
+    });
+
+    it("pads to whole weeks (total cells divisible by 7)", () => {
+        const { weeks } = buildYearGrid(2024);
+        expect(weeks.flat().length % 7).toBe(0);
+    });
+});
+
+describe("monthLabelColumns", () => {
+    it("returns 12 month labels for a full year by default spacing", () => {
+        const { weeks } = buildYearGrid(2026);
+        const labels = monthLabelColumns(weeks);
+        expect(labels[0].label).toBe("Jan");
+        expect(labels.every((l) => /^[A-Z][a-z]{2}$/.test(l.label))).toBe(
+            true
+        );
+        // colIndex must be a valid, ascending week column.
+        for (let i = 1; i < labels.length; i += 1) {
+            expect(labels[i].colIndex).toBeGreaterThan(labels[i - 1].colIndex);
+            expect(labels[i].colIndex).toBeLessThan(weeks.length);
+        }
+    });
+
+    it("drops a label that is fewer than 3 columns from the previous kept one", () => {
+        // Two months whose day-1 columns are only 2 apart -> second is dropped.
+        const weeks = [
+            [{ iso: "2026-01-01", inYear: true }],
+            [{ iso: "2026-01-08", inYear: true }],
+            [{ iso: "2026-02-01", inYear: true }],
+        ];
+        const labels = monthLabelColumns(weeks);
+        expect(labels).toHaveLength(1);
+        expect(labels[0]).toEqual({ label: "Jan", colIndex: 0 });
+    });
+
+    it("keeps a label that is at least 3 columns from the previous kept one", () => {
+        const weeks = [
+            [{ iso: "2026-01-01", inYear: true }],
+            [{ iso: "2026-01-08", inYear: true }],
+            [{ iso: "2026-01-15", inYear: true }],
+            [{ iso: "2026-02-01", inYear: true }],
+        ];
+        const labels = monthLabelColumns(weeks);
+        expect(labels).toEqual([
+            { label: "Jan", colIndex: 0 },
+            { label: "Feb", colIndex: 3 },
+        ]);
+    });
+});
+
+describe("computeCellSize", () => {
+    const opts = { gap: 4, min: 8, max: 16 };
+
+    it("fits the cells plus gaps inside the container width", () => {
+        // 53 weeks, container 900px: (size+gap)*weeks - gap <= width.
+        const size = computeCellSize(900, 53, opts);
+        expect(size).toBeGreaterThanOrEqual(opts.min);
+        expect(size).toBeLessThanOrEqual(opts.max);
+        expect((size + opts.gap) * 53 - opts.gap).toBeLessThanOrEqual(900);
+    });
+
+    it("clamps to max when the container is very wide", () => {
+        expect(computeCellSize(5000, 53, opts)).toBe(16);
+    });
+
+    it("clamps to min when the container is very narrow", () => {
+        expect(computeCellSize(100, 53, opts)).toBe(8);
+    });
+
+    it("returns an integer", () => {
+        expect(Number.isInteger(computeCellSize(763, 53, opts))).toBe(true);
+    });
+
+    it("falls back to min for non-positive width", () => {
+        expect(computeCellSize(0, 53, opts)).toBe(8);
+    });
+});
+```
+
+- [ ] **Step 2: Run the test, expect FAIL.**
+```bash
+npm run test:js -- resources/js/Utils/__tests__/heatmapCalendar.test.js
+```
+Expected: FAIL — module `@/Utils/heatmapCalendar` cannot be resolved ("Failed to resolve import").
+
+- [ ] **Step 3: Create `resources/js/Utils/heatmapCalendar.js`:**
+```js
+const MONTH_LABELS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+
+function isoFromUTCDate(date) {
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+    const day = String(date.getUTCDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+
+export function buildYearGrid(year) {
+    const yearStart = new Date(Date.UTC(year, 0, 1));
+    const yearEnd = new Date(Date.UTC(year, 11, 31));
+
+    // Pad back to the Sunday on/before Jan 1, forward to the Saturday on/after Dec 31.
+    const gridStart = new Date(
+        yearStart.getTime() - yearStart.getUTCDay() * MS_PER_DAY
+    );
+    const gridEnd = new Date(
+        yearEnd.getTime() + (6 - yearEnd.getUTCDay()) * MS_PER_DAY
+    );
+
+    const weeks = [];
+    let currentWeek = [];
+
+    for (
+        let cursor = gridStart.getTime();
+        cursor <= gridEnd.getTime();
+        cursor += MS_PER_DAY
+    ) {
+        const date = new Date(cursor);
+        currentWeek.push({
+            iso: isoFromUTCDate(date),
+            inYear: date.getUTCFullYear() === year,
+        });
+
+        if (currentWeek.length === 7) {
+            weeks.push(currentWeek);
+            currentWeek = [];
+        }
+    }
+
+    return { weeks };
+}
+
+export function monthLabelColumns(weeks) {
+    const labels = [];
+    let lastKeptColIndex = -Infinity;
+    const seenMonths = new Set();
+
+    weeks.forEach((week, colIndex) => {
+        for (const cell of week) {
+            if (!cell.inYear) {
+                continue;
+            }
+
+            const [, monthStr, dayStr] = cell.iso.split("-");
+            if (dayStr !== "01") {
+                continue;
+            }
+
+            const monthIndex = Number(monthStr) - 1;
+            if (seenMonths.has(monthIndex)) {
+                continue;
+            }
+            seenMonths.add(monthIndex);
+
+            if (colIndex - lastKeptColIndex < 3 && labels.length > 0) {
+                continue;
+            }
+
+            labels.push({ label: MONTH_LABELS[monthIndex], colIndex });
+            lastKeptColIndex = colIndex;
+        }
+    });
+
+    return labels;
+}
+
+export function computeCellSize(containerWidth, weekCount, opts) {
+    const { gap, min, max } = opts;
+
+    if (!containerWidth || containerWidth <= 0 || weekCount <= 0) {
+        return min;
+    }
+
+    // Total width = (size + gap) * weekCount - gap; solve for size.
+    const raw = Math.floor((containerWidth + gap) / weekCount) - gap;
+
+    return Math.max(min, Math.min(max, raw));
+}
+```
+
+- [ ] **Step 4: Run the test, expect PASS.**
+```bash
+npm run test:js -- resources/js/Utils/__tests__/heatmapCalendar.test.js
+```
+Expected: PASS — `13 passed`, exit code 0.
+
+- [ ] **Step 5: Commit.**
+```bash
+git add resources/js/Utils/heatmapCalendar.js resources/js/Utils/__tests__/heatmapCalendar.test.js && git commit -m "Add heatmapCalendar grid, month-label, and cell-size utils"
+```
+
+### Task 1.5: Create reusable `Tooltip.jsx` (build-verified)
+
+**Files:**
+- Create: `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Components/Tooltip.jsx`
+
+**Interfaces:**
+- Produces (exact, per spine component contract): `Tooltip({ content, children, className })` — hover+focus; `role="tooltip"`; `aria-describedby` wired; positioned; `content = string|node`.
+- Consumes: React 19 (already a dependency). No DOM test runner exists for `.jsx` — verification is `npm run build` plus the Phase 3 backend feature tests that assert the heatmap/today-bar payload this component will later render against. Must honor Global Constraints: `motion-reduce:transition-none`, `focus-visible` reachable wrapper, `tabular-nums` left to callers.
+
+- [ ] **Step 1: Create `resources/js/Components/Tooltip.jsx`:**
+```jsx
+import React, { useId, useState } from "react";
+
+// Reusable hover + keyboard-focus tooltip.
+// - role="tooltip" with aria-describedby wired to the trigger for screen readers.
+// - Shows on mouse hover AND keyboard focus (focus-visible reachable trigger).
+// - Positioned above the trigger, centered; pointer-events disabled so it never
+//   steals hover. Motion is gated with motion-reduce:* per Global Constraints.
+export default function Tooltip({ content, children, className = "" }) {
+    const tooltipId = useId();
+    const [open, setOpen] = useState(false);
+
+    const show = () => setOpen(true);
+    const hide = () => setOpen(false);
+
+    if (content === null || content === undefined || content === "") {
+        return children;
+    }
+
+    return (
+        <span
+            className={`relative inline-flex ${className}`}
+            onMouseEnter={show}
+            onMouseLeave={hide}
+            onFocus={show}
+            onBlur={hide}
+        >
+            <span aria-describedby={open ? tooltipId : undefined}>
+                {children}
+            </span>
+
+            <span
+                role="tooltip"
+                id={tooltipId}
+                className={[
+                    "pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 -translate-x-1/2",
+                    "whitespace-pre-line rounded-md bg-gray-900 px-2.5 py-1.5",
+                    "text-xs font-medium leading-snug text-white shadow-lg",
+                    "transition-opacity duration-150 ease-out",
+                    "motion-reduce:transition-none motion-reduce:transform-none",
+                    open ? "opacity-100" : "opacity-0",
+                ].join(" ")}
+                aria-hidden={open ? undefined : "true"}
+            >
+                {content}
+            </span>
+        </span>
+    );
+}
+```
+
+- [ ] **Step 2: Verify the build compiles.**
+```bash
+npm run build
+```
+Expected: build succeeds ("built in ... ms", exit code 0), no Vite/React errors referencing `Tooltip.jsx`. Note: this component has no runtime wiring yet; Phase 3's backend feature tests (`MonitorHistoryShowTest` assertions on `graph.series.*.daily_metrics` / `today_checks`) cover the payload it will render once consumed by `MonitorHistoryHeatmap` and `MonitorTodayBar`.
+
+- [ ] **Step 3: Commit.**
+```bash
+git add resources/js/Components/Tooltip.jsx && git commit -m "Add reusable accessible Tooltip component (hover + focus)"
+```
+
+---
+
+Phase 1 authored and appended-ready. Key file paths produced by this phase:
+- `/Users/vaibhav/projects/coloredcow/monitor/vitest.config.js`
+- `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/formatDate.js`
+- `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/heatmapCalendar.js`
+- `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/checkStatusSeverity.js` (extended)
+- `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Components/Tooltip.jsx`
+- Tests under `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/__tests__/`
+
+Notes for the orchestrator: (1) Vitest is pinned to `^2.1.9` (Vite 7-compatible, Node 24 confirmed present). (2) The `@` alias is re-declared in `vitest.config.js` because Vitest does not inherit Laravel's Vite alias resolution. (3) `formatDateUTC` relies on `Intl.DateTimeFormat('en-GB', …)` to emit the locked `27 Mar 2026` format; if a future Node/ICU build alters en-GB spacing the `formatDate.test.js` assertions will catch it.
+
+
+---
+
+## Phase 2 — Backend payload restructure (PHPUnit TDD)
+
+**Deliverable:** `MonitorsController@show` returns top-level `graph`/`filters`/`summary`/`recentChecks` props (each `null` when the feature flag is off) per the spine schema, with `availableYears()`, `resolveGraphYear()`, `graphCheckTypes()`, `buildGraphPayload()`, `buildTodayChecks()`, `buildRecentChecks()` helpers implemented and `summary.first_checked_at` added; all behaviors covered by PHPUnit feature tests on `monitors.show`.
+
+### Task 2.1: Add per-type graph payload helpers (`graphCheckTypes`, `availableYears`, `resolveGraphYear`)
+
+**Files:**
+- modify: `app/Http/Controllers/MonitorsController.php`
+- test: `tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php` (create)
+
+**Interfaces:**
+- Produces `protected function graphCheckTypes(Monitor $monitor): array` → `[{type:'uptime',enabled:bool},{type:'domain',enabled:bool}]` (certificate omitted)
+- Produces `protected function availableYears(Monitor $monitor, string $timezone): array` → ascending `[minYear..currentYear]`, or `[currentYear]` when no data
+- Produces `protected function resolveGraphYear(Request $request, array $availableYears): int` → reads `?year`, defaults to current year (in `$timezone` via caller), clamped into `$availableYears`
+- Consumes existing `MonitorCheckLogService::CHECK_TYPE_UPTIME`, `CHECK_TYPE_DOMAIN`; `$monitor->checkLogs()`
+
+- [ ] **Step 1: Create the failing test file with graph-type and available-years cases.**
+```php
+<?php
+
+namespace Tests\Feature\MonitorHistory;
+
+use App\Models\Monitor;
+use App\Models\User;
+use App\Services\MonitorCheckLogService;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class MonitorHistoryGraphTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        config(['monitor-history.enabled' => true]);
+    }
+
+    private function makeMonitor(array $attributes = []): Monitor
+    {
+        return Monitor::create(array_merge([
+            'url' => 'https://example-'.uniqid().'.com',
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => false,
+            'certificate_check_enabled' => false,
+        ], $attributes));
+    }
+
+    private function seedUptimeLog(Monitor $monitor, string $status, string $checkedAt): void
+    {
+        app(MonitorCheckLogService::class)->logCheck(
+            monitor: $monitor,
+            checkType: MonitorCheckLogService::CHECK_TYPE_UPTIME,
+            status: $status,
+            checkedAt: Carbon::parse($checkedAt),
+        );
+    }
+
+    public function test_graph_check_types_exclude_certificate(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor([
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => true,
+            'certificate_check_enabled' => true,
+        ]);
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.check_types', fn ($types) => collect($types)->pluck('type')->all() === ['uptime', 'domain']
+                && collect($types)->firstWhere('type', 'uptime')['enabled'] === true
+                && collect($types)->firstWhere('type', 'domain')['enabled'] === true
+            )
+        );
+    }
+
+    public function test_graph_year_defaults_to_current_year_when_no_param(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.year', (int) Carbon::now('UTC')->format('Y'))
+        );
+    }
+
+    public function test_graph_year_param_overrides_default(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-05-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => 2024,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.year', 2024)
+        );
+    }
+
+    public function test_available_years_span_earliest_data_year_through_current_year(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-01-15 10:00:00');
+
+        $currentYear = (int) Carbon::now('UTC')->format('Y');
+        $expected = range(2024, $currentYear);
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.available_years', $expected)
+        );
+    }
+
+    public function test_available_years_falls_back_to_current_year_when_no_data(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.available_years', [(int) Carbon::now('UTC')->format('Y')])
+        );
+    }
+}
+```
+
+- [ ] **Step 2: Run the new test and confirm it fails.**
+```
+php artisan config:clear && mysql -u root -e "CREATE DATABASE IF NOT EXISTS monitor_test;" && php artisan test --filter MonitorHistoryGraphTest
+```
+Expected: FAIL (props `graph.check_types` / `graph.year` / `graph.available_years` are missing — `graph` does not exist yet).
+
+- [ ] **Step 3: Add the `graphCheckTypes()` helper after `buildSummary()` in `MonitorsController`.**
+```php
+    protected function graphCheckTypes(Monitor $monitor): array
+    {
+        return [
+            [
+                'type' => MonitorCheckLogService::CHECK_TYPE_UPTIME,
+                'enabled' => (bool) $monitor->uptime_check_enabled,
+            ],
+            [
+                'type' => MonitorCheckLogService::CHECK_TYPE_DOMAIN,
+                'enabled' => (bool) $monitor->domain_check_enabled,
+            ],
+        ];
+    }
+```
+
+- [ ] **Step 4: Add the `availableYears()` helper below `graphCheckTypes()`.**
+```php
+    protected function availableYears(Monitor $monitor, string $timezone): array
+    {
+        $currentYear = (int) Carbon::now($timezone)->format('Y');
+
+        $firstCheckedAt = $monitor->checkLogs()->orderBy('checked_at')->value('checked_at');
+
+        if (! $firstCheckedAt) {
+            return [$currentYear];
+        }
+
+        $minYear = (int) Carbon::parse($firstCheckedAt)->timezone($timezone)->format('Y');
+
+        if ($minYear > $currentYear) {
+            $minYear = $currentYear;
+        }
+
+        return range($minYear, $currentYear);
+    }
+```
+
+- [ ] **Step 5: Add the `resolveGraphYear()` helper below `availableYears()`.**
+```php
+    protected function resolveGraphYear(Request $request, array $availableYears): int
+    {
+        $default = end($availableYears) ?: (int) Carbon::now('UTC')->format('Y');
+
+        $requested = $request->integer('year') ?: $default;
+
+        if (! in_array((int) $requested, $availableYears, true)) {
+            return (int) $default;
+        }
+
+        return (int) $requested;
+    }
+```
+
+- [ ] **Step 6: Temporarily expose a minimal `graph` prop in `show()` so Step 1 tests pass — replace the `'history' => $history,` Inertia render array (this is wired fully in Task 2.4, this step only adds the partial graph slice).** Inside the `if (config('monitor-history.enabled'))` block, after `$timezone = $range['timezone'];`, add:
+```php
+            $availableYears = $this->availableYears($monitor, $timezone);
+            $graphYear = $this->resolveGraphYear($request, $availableYears);
+            $graph = [
+                'year' => $graphYear,
+                'available_years' => $availableYears,
+                'timezone' => $timezone,
+                'check_types' => $this->graphCheckTypes($monitor),
+                'series' => [],
+            ];
+```
+Then add `$graph = null;` next to `$history = null;` at the top of `show()`, and add `'graph' => $graph,` to the `Inertia::render('Monitors/Show', [...])` array.
+
+- [ ] **Step 7: Run the test and confirm it passes.**
+```
+php artisan test --filter MonitorHistoryGraphTest
+```
+Expected: PASS (all 5 tests green).
+
+- [ ] **Step 8: Run Pint on changed files.**
+```
+vendor/bin/pint --dirty
+```
+Expected: no style errors reported.
+
+- [ ] **Step 9: Commit.**
+```
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php && git commit -m "Add graph check-type, available-years and year-resolution helpers"
+```
+
+### Task 2.2: Build per-type graph series — `daily_metrics` (full calendar year) + per-type `summary`
+
+**Files:**
+- modify: `app/Http/Controllers/MonitorsController.php`
+- test: `tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php`
+
+**Interfaces:**
+- Produces `protected function buildGraphPayload(Monitor $monitor, int $year, string $timezone): array` → `{year, available_years, timezone, check_types, series}` where `series.<type> = { summary, daily_metrics, today_checks }`
+- `daily_metrics` is scoped to the full calendar year `Jan1..Dec31` of `$year` (decoupled from the filter range), only days with data, mapped per the spine schema
+- per-type `summary` via `buildSummary()` on that type's logs returning `{ total_checks, success_ratio, status_totals }` (read from `by_type`)
+- Consumes existing `$monitor->dailyCheckMetrics()->forTimezone()->betweenDates()`, `buildSummary()`, `availableYears()`, `graphCheckTypes()`
+
+- [ ] **Step 1: Add failing tests for year-scoped daily_metrics decoupling and per-type summary to `MonitorHistoryGraphTest`.** Append these methods inside the class:
+```php
+    public function test_graph_daily_metrics_are_scoped_to_the_graph_year_not_the_filter_range(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-02-01 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-11-20 10:00:00');
+
+        $this->artisan('monitor:aggregate-check-metrics', [
+            '--from' => '2024-02-01',
+            '--to' => '2024-02-01',
+        ])->assertSuccessful();
+        $this->artisan('monitor:aggregate-check-metrics', [
+            '--from' => '2024-11-20',
+            '--to' => '2024-11-20',
+        ])->assertSuccessful();
+
+        // Filter range (preset/from/to) is narrow and in a different year — graph must ignore it.
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => 2024,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.daily_metrics', 2)
+            ->where('graph.series.uptime.daily_metrics.0.date', '2024-02-01')
+            ->where('graph.series.uptime.daily_metrics.1.date', '2024-11-20')
+        );
+    }
+
+    public function test_graph_per_type_summary_counts_only_that_years_logs(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-04-10 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, '2024-04-11 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2025-04-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => 2024,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.series.uptime.summary.total_checks', 2)
+            ->where('graph.series.uptime.summary.status_totals.success', 1)
+            ->where('graph.series.uptime.summary.status_totals.failed', 1)
+            ->where('graph.series.uptime.summary.success_ratio', 50.0)
+        );
+    }
+```
+
+- [ ] **Step 2: Run the test and confirm the new cases fail.**
+```
+php artisan test --filter MonitorHistoryGraphTest
+```
+Expected: FAIL (`graph.series.uptime.*` does not exist — `series` is still `[]`).
+
+- [ ] **Step 3: Add the `buildGraphPayload()` helper below `resolveGraphYear()` in `MonitorsController`.**
+```php
+    protected function buildGraphPayload(Monitor $monitor, int $year, string $timezone): array
+    {
+        $availableYears = $this->availableYears($monitor, $timezone);
+        $checkTypes = $this->graphCheckTypes($monitor);
+
+        $yearStartUtc = Carbon::create($year, 1, 1, 0, 0, 0, $timezone)->startOfDay()->utc();
+        $yearEndUtc = Carbon::create($year, 12, 31, 0, 0, 0, $timezone)->endOfDay()->utc();
+        $yearStartDate = Carbon::create($year, 1, 1, 0, 0, 0, $timezone)->toDateString();
+        $yearEndDate = Carbon::create($year, 12, 31, 0, 0, 0, $timezone)->toDateString();
+
+        $dailyMetricsByType = $monitor->dailyCheckMetrics()
+            ->forTimezone($timezone)
+            ->betweenDates($yearStartDate, $yearEndDate)
+            ->orderBy('date')
+            ->get()
+            ->groupBy('check_type')
+            ->map(function ($rows) {
+                return $rows->map(function ($row) {
+                    return [
+                        'date' => $row->date->toDateString(),
+                        'total_checks' => $row->total_checks,
+                        'successful_checks' => $row->successful_checks,
+                        'warning_checks' => $row->warning_checks,
+                        'failed_checks' => $row->failed_checks,
+                        'success_ratio' => (float) $row->success_ratio,
+                        'worst_status' => $row->worst_status,
+                        'avg_response_time_ms' => $row->avg_response_time_ms,
+                        'p95_response_time_ms' => $row->p95_response_time_ms,
+                    ];
+                })->values();
+            });
+
+        $series = [];
+
+        foreach ($checkTypes as $checkType) {
+            $type = $checkType['type'];
+
+            $typeSummary = $this->buildSummary(
+                $monitor->checkLogs()
+                    ->where('check_type', $type)
+                    ->whereBetween('checked_at', [$yearStartUtc, $yearEndUtc])
+            );
+
+            $series[$type] = [
+                'summary' => [
+                    'total_checks' => $typeSummary['by_type'][$type]['total_checks'] ?? 0,
+                    'success_ratio' => $typeSummary['by_type'][$type]['success_ratio'] ?? 0,
+                    'status_totals' => $typeSummary['by_type'][$type]['status_totals'] ?? [
+                        MonitorCheckLogService::STATUS_SUCCESS => 0,
+                        MonitorCheckLogService::STATUS_WARNING => 0,
+                        MonitorCheckLogService::STATUS_FAILED => 0,
+                        MonitorCheckLogService::STATUS_UNKNOWN => 0,
+                    ],
+                ],
+                'daily_metrics' => $dailyMetricsByType->get($type, collect())->values()->all(),
+                'today_checks' => $this->buildTodayChecks($monitor, $type, $timezone),
+            ];
+        }
+
+        return [
+            'year' => $year,
+            'available_years' => $availableYears,
+            'timezone' => $timezone,
+            'check_types' => $checkTypes,
+            'series' => $series,
+        ];
+    }
+```
+
+- [ ] **Step 4: Add a temporary stub `buildTodayChecks()` (fully implemented in Task 2.3) so `buildGraphPayload()` resolves.** Add below `buildGraphPayload()`:
+```php
+    protected function buildTodayChecks(Monitor $monitor, string $checkType, string $timezone): array
+    {
+        return [];
+    }
+```
+
+- [ ] **Step 5: Replace the inline `$graph` array from Task 2.1 Step 6 with a `buildGraphPayload()` call.** In `show()`, replace the block:
+```php
+            $availableYears = $this->availableYears($monitor, $timezone);
+            $graphYear = $this->resolveGraphYear($request, $availableYears);
+            $graph = [
+                'year' => $graphYear,
+                'available_years' => $availableYears,
+                'timezone' => $timezone,
+                'check_types' => $this->graphCheckTypes($monitor),
+                'series' => [],
+            ];
+```
+with:
+```php
+            $availableYears = $this->availableYears($monitor, $timezone);
+            $graphYear = $this->resolveGraphYear($request, $availableYears);
+            $graph = $this->buildGraphPayload($monitor, $graphYear, $timezone);
+```
+
+- [ ] **Step 6: Run the test and confirm it passes.**
+```
+php artisan test --filter MonitorHistoryGraphTest
+```
+Expected: PASS (all 7 tests green, including decoupling + per-type summary).
+
+- [ ] **Step 7: Run Pint.**
+```
+vendor/bin/pint --dirty
+```
+Expected: no style errors reported.
+
+- [ ] **Step 8: Commit.**
+```
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php && git commit -m "Build per-type graph series with year-scoped daily metrics and summary"
+```
+
+### Task 2.3: Implement `buildTodayChecks()` (today only, cap 200, newest first)
+
+**Files:**
+- modify: `app/Http/Controllers/MonitorsController.php`
+- test: `tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php`
+
+**Interfaces:**
+- Produces `protected function buildTodayChecks(Monitor $monitor, string $checkType, string $timezone): array` → today-only rows (in `$timezone`), `->limit(200)`, newest first, each `{ id, checked_at:'YYYY-MM-DD HH:mm:ss', status, message, failure_reason, response_time_ms }`
+- Consumes `$monitor->checkLogs()`, `MonitorCheckLog`
+
+- [ ] **Step 1: Add a failing test that today_checks contains only today's rows, newest first.** Append to `MonitorHistoryGraphTest`:
+```php
+    public function test_today_checks_contain_only_todays_rows_newest_first(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $todayMorning = Carbon::now('UTC')->startOfDay()->addHours(8);
+        $todayNoon = Carbon::now('UTC')->startOfDay()->addHours(12);
+        $yesterday = Carbon::now('UTC')->subDay()->setTime(10, 0);
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, $todayMorning->toDateTimeString());
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, $todayNoon->toDateTimeString());
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, $yesterday->toDateTimeString());
+
+        $currentYear = (int) Carbon::now('UTC')->format('Y');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => $currentYear,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.today_checks', 2)
+            ->where('graph.series.uptime.today_checks.0.status', MonitorCheckLogService::STATUS_FAILED)
+            ->where('graph.series.uptime.today_checks.1.status', MonitorCheckLogService::STATUS_SUCCESS)
+        );
+    }
+```
+
+- [ ] **Step 2: Run the test and confirm it fails.**
+```
+php artisan test --filter MonitorHistoryGraphTest
+```
+Expected: FAIL (stub `buildTodayChecks()` returns `[]`, so `today_checks` count is 0, not 2).
+
+- [ ] **Step 3: Replace the stub `buildTodayChecks()` with the real implementation.** Replace the method body added in Task 2.2 Step 4:
+```php
+    protected function buildTodayChecks(Monitor $monitor, string $checkType, string $timezone): array
+    {
+        $todayStartUtc = Carbon::now($timezone)->startOfDay()->utc();
+        $todayEndUtc = Carbon::now($timezone)->endOfDay()->utc();
+
+        return $monitor->checkLogs()
+            ->where('check_type', $checkType)
+            ->whereBetween('checked_at', [$todayStartUtc, $todayEndUtc])
+            ->latest('checked_at')
+            ->limit(200)
+            ->get()
+            ->map(function (MonitorCheckLog $log) use ($timezone) {
+                return [
+                    'id' => $log->id,
+                    'checked_at' => $log->checked_at->timezone($timezone)->toDateTimeString(),
+                    'status' => $log->status,
+                    'message' => $log->message,
+                    'failure_reason' => $log->failure_reason,
+                    'response_time_ms' => $log->response_time_ms,
+                ];
+            })
+            ->all();
+    }
+```
+
+- [ ] **Step 4: Run the test and confirm it passes.**
+```
+php artisan test --filter MonitorHistoryGraphTest
+```
+Expected: PASS (8 tests green; today_checks count is 2, failed row first).
+
+- [ ] **Step 5: Run Pint.**
+```
+vendor/bin/pint --dirty
+```
+Expected: no style errors reported.
+
+- [ ] **Step 6: Commit.**
+```
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php && git commit -m "Implement buildTodayChecks for today-only newest-first per-type rows"
+```
+
+### Task 2.4: Add `filters`/`summary` props and `summary.first_checked_at`
+
+**Files:**
+- modify: `app/Http/Controllers/MonitorsController.php`
+- test: `tests/Feature/MonitorHistory/MonitorHistorySummaryTest.php` (create)
+
+**Interfaces:**
+- Produces top-level `filters: { preset, from, to, timezone }`
+- Produces top-level `summary: { all_time, selected_range, first_checked_at }` — `all_time`/`selected_range` are `buildSummary()` shape; `first_checked_at` is `'YYYY-MM-DD HH:mm:ss'|null` in `$timezone`
+- Consumes existing `resolveHistoryRange()`, `buildSummary()`, `$monitor->checkLogs()`
+
+- [ ] **Step 1: Create the failing summary/filters test file.**
+```php
+<?php
+
+namespace Tests\Feature\MonitorHistory;
+
+use App\Models\Monitor;
+use App\Models\User;
+use App\Services\MonitorCheckLogService;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class MonitorHistorySummaryTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        config(['monitor-history.enabled' => true]);
+    }
+
+    private function makeMonitor(array $attributes = []): Monitor
+    {
+        return Monitor::create(array_merge([
+            'url' => 'https://example-'.uniqid().'.com',
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => false,
+            'certificate_check_enabled' => false,
+        ], $attributes));
+    }
+
+    private function seedUptimeLog(Monitor $monitor, string $status, string $checkedAt): void
+    {
+        app(MonitorCheckLogService::class)->logCheck(
+            monitor: $monitor,
+            checkType: MonitorCheckLogService::CHECK_TYPE_UPTIME,
+            status: $status,
+            checkedAt: Carbon::parse($checkedAt),
+        );
+    }
+
+    public function test_filters_prop_reports_resolved_preset_and_range(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('filters.preset', 'custom')
+            ->where('filters.from', '2026-03-01')
+            ->where('filters.to', '2026-03-31')
+            ->has('filters.timezone')
+        );
+    }
+
+    public function test_summary_selected_range_differs_from_all_time(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, '2025-01-01 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.all_time.total_checks', 2)
+            ->where('summary.selected_range.total_checks', 1)
+            ->where('summary.selected_range.by_type.uptime.total_checks', 1)
+        );
+    }
+
+    public function test_summary_first_checked_at_is_earliest_log_in_timezone(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2025-01-01 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.first_checked_at', '2025-01-01 10:00:00')
+        );
+    }
+
+    public function test_summary_first_checked_at_is_null_when_no_logs(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.first_checked_at', null)
+        );
+    }
+}
+```
+
+- [ ] **Step 2: Run the test and confirm it fails.**
+```
+php artisan test --filter MonitorHistorySummaryTest
+```
+Expected: FAIL (top-level `filters` / `summary` props do not exist yet).
+
+- [ ] **Step 3: In `show()`, add `$filters = null;` and `$summary = null;` alongside `$history = null;` / `$graph = null;` at the top of the method.**
+```php
+        $history = null;
+        $graph = null;
+        $filters = null;
+        $summary = null;
+```
+
+- [ ] **Step 4: Inside the flag block, build the `$filters` and `$summary` props (reusing the already-computed `$range`, `$allTimeSummary`, `$selectedRangeSummary`).** After the existing `$selectedRangeSummary = $this->buildSummary($selectedRangeQuery);` line, add:
+```php
+            $firstCheckedAt = $monitor->checkLogs()->orderBy('checked_at')->value('checked_at');
+
+            $filters = [
+                'preset' => $range['preset'],
+                'from' => $range['from']->toDateString(),
+                'to' => $range['to']->toDateString(),
+                'timezone' => $timezone,
+            ];
+
+            $summary = [
+                'all_time' => $allTimeSummary,
+                'selected_range' => $selectedRangeSummary,
+                'first_checked_at' => $firstCheckedAt
+                    ? Carbon::parse($firstCheckedAt)->timezone($timezone)->toDateTimeString()
+                    : null,
+            ];
+```
+
+- [ ] **Step 5: Add `'filters' => $filters,` and `'summary' => $summary,` to the `Inertia::render('Monitors/Show', [...])` array.**
+```php
+        return Inertia::render('Monitors/Show', [
+            'monitor' => $monitor,
+            'graph' => $graph,
+            'filters' => $filters,
+            'summary' => $summary,
+            'history' => $history,
+        ]);
+```
+
+- [ ] **Step 6: Run the test and confirm it passes.**
+```
+php artisan test --filter MonitorHistorySummaryTest
+```
+Expected: PASS (4 tests green).
+
+- [ ] **Step 7: Run Pint.**
+```
+vendor/bin/pint --dirty
+```
+Expected: no style errors reported.
+
+- [ ] **Step 8: Commit.**
+```
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistorySummaryTest.php && git commit -m "Add filters and summary props with first_checked_at"
+```
+
+### Task 2.5: Implement `buildRecentChecks()` (paginate 25, `recent_type` + range filter) and wire `recentChecks` prop
+
+**Files:**
+- modify: `app/Http/Controllers/MonitorsController.php`
+- test: `tests/Feature/MonitorHistory/MonitorHistoryRecentChecksTest.php` (create)
+
+**Interfaces:**
+- Produces `protected function buildRecentChecks(Monitor $monitor, string $type, Carbon $fromUtc, Carbon $toUtc, string $timezone): array` → `{ type, data:[{id,check_type,status,checked_at,message,failure_reason,response_time_ms}], pagination:{current_page,last_page,per_page,total} }` via `->paginate(25)`, newest first
+- Produces top-level `recentChecks` prop; request reads `recent_type` (default `'uptime'`) and `recent_page` (default 1)
+- Consumes `$monitor->checkLogs()`, `MonitorCheckLog`, `resolveHistoryRange()`
+
+- [ ] **Step 1: Create the failing recent-checks test file.**
+```php
+<?php
+
+namespace Tests\Feature\MonitorHistory;
+
+use App\Models\Monitor;
+use App\Models\User;
+use App\Services\MonitorCheckLogService;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class MonitorHistoryRecentChecksTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        config(['monitor-history.enabled' => true]);
+    }
+
+    private function makeMonitor(array $attributes = []): Monitor
+    {
+        return Monitor::create(array_merge([
+            'url' => 'https://example-'.uniqid().'.com',
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => true,
+            'certificate_check_enabled' => false,
+        ], $attributes));
+    }
+
+    private function seedLog(Monitor $monitor, string $checkType, string $status, string $checkedAt, ?int $responseTimeMs = null): void
+    {
+        app(MonitorCheckLogService::class)->logCheck(
+            monitor: $monitor,
+            checkType: $checkType,
+            status: $status,
+            checkedAt: Carbon::parse($checkedAt),
+            responseTimeMs: $responseTimeMs,
+        );
+    }
+
+    public function test_recent_checks_pagination_shape_uses_page_size_25(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        for ($i = 0; $i < 30; $i++) {
+            $this->seedLog(
+                $monitor,
+                MonitorCheckLogService::CHECK_TYPE_UPTIME,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                Carbon::parse('2026-03-10 00:00:00')->addMinutes($i)->toDateTimeString(),
+                120,
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'uptime')
+            ->has('recentChecks.data', 25)
+            ->where('recentChecks.pagination.per_page', 25)
+            ->where('recentChecks.pagination.current_page', 1)
+            ->where('recentChecks.pagination.last_page', 2)
+            ->where('recentChecks.pagination.total', 30)
+            ->where('recentChecks.data.0.response_time_ms', 120)
+        );
+    }
+
+    public function test_recent_checks_respect_recent_page(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        for ($i = 0; $i < 30; $i++) {
+            $this->seedLog(
+                $monitor,
+                MonitorCheckLogService::CHECK_TYPE_UPTIME,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                Carbon::parse('2026-03-10 00:00:00')->addMinutes($i)->toDateTimeString(),
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+            'recent_page' => 2,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.pagination.current_page', 2)
+            ->has('recentChecks.data', 5)
+        );
+    }
+
+    public function test_recent_checks_filter_by_recent_type(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_DOMAIN, MonitorCheckLogService::STATUS_WARNING, '2026-03-11 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+            'recent_type' => 'domain',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'domain')
+            ->has('recentChecks.data', 1)
+            ->where('recentChecks.data.0.check_type', 'domain')
+            ->where('recentChecks.data.0.status', MonitorCheckLogService::STATUS_WARNING)
+        );
+    }
+
+    public function test_recent_checks_default_type_is_uptime(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'uptime')
+        );
+    }
+
+    public function test_recent_checks_respect_the_selected_range(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_FAILED, '2025-01-01 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.pagination.total', 1)
+        );
+    }
+}
+```
+
+- [ ] **Step 2: Run the test and confirm it fails.**
+```
+php artisan test --filter MonitorHistoryRecentChecksTest
+```
+Expected: FAIL (top-level `recentChecks` prop does not exist yet).
+
+- [ ] **Step 3: Add the `buildRecentChecks()` helper below `buildTodayChecks()` in `MonitorsController`.**
+```php
+    protected function buildRecentChecks(Monitor $monitor, string $type, Carbon $fromUtc, Carbon $toUtc, string $timezone): array
+    {
+        $paginator = $monitor->checkLogs()
+            ->where('check_type', $type)
+            ->whereBetween('checked_at', [$fromUtc, $toUtc])
+            ->latest('checked_at')
+            ->paginate(25, ['*'], 'recent_page');
+
+        $data = collect($paginator->items())
+            ->map(function (MonitorCheckLog $log) use ($timezone) {
+                return [
+                    'id' => $log->id,
+                    'check_type' => $log->check_type,
+                    'status' => $log->status,
+                    'checked_at' => $log->checked_at->timezone($timezone)->toDateTimeString(),
+                    'message' => $log->message,
+                    'failure_reason' => $log->failure_reason,
+                    'response_time_ms' => $log->response_time_ms,
+                ];
+            })
+            ->all();
+
+        return [
+            'type' => $type,
+            'data' => $data,
+            'pagination' => [
+                'current_page' => $paginator->currentPage(),
+                'last_page' => $paginator->lastPage(),
+                'per_page' => $paginator->perPage(),
+                'total' => $paginator->total(),
+            ],
+        ];
+    }
+```
+
+- [ ] **Step 4: In `show()`, add `$recentChecks = null;` to the top-of-method null block.**
+```php
+        $history = null;
+        $graph = null;
+        $filters = null;
+        $summary = null;
+        $recentChecks = null;
+```
+
+- [ ] **Step 5: Inside the flag block, resolve `recent_type` and build the `$recentChecks` prop (reusing `$fromUtc`/`$toUtc`/`$timezone`).** After the `$summary = [...]` assignment from Task 2.4, add:
+```php
+            $recentType = $request->string('recent_type')->toString() ?: MonitorCheckLogService::CHECK_TYPE_UPTIME;
+            if (! in_array($recentType, [MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::CHECK_TYPE_DOMAIN], true)) {
+                $recentType = MonitorCheckLogService::CHECK_TYPE_UPTIME;
+            }
+
+            $recentChecks = $this->buildRecentChecks($monitor, $recentType, $fromUtc, $toUtc, $timezone);
+```
+
+- [ ] **Step 6: Add `'recentChecks' => $recentChecks,` to the `Inertia::render('Monitors/Show', [...])` array.**
+```php
+        return Inertia::render('Monitors/Show', [
+            'monitor' => $monitor,
+            'graph' => $graph,
+            'filters' => $filters,
+            'summary' => $summary,
+            'recentChecks' => $recentChecks,
+            'history' => $history,
+        ]);
+```
+
+- [ ] **Step 7: Run the test and confirm it passes.**
+```
+php artisan test --filter MonitorHistoryRecentChecksTest
+```
+Expected: PASS (5 tests green; per_page 25, last_page 2, recent_type filter and range filter all honored).
+
+- [ ] **Step 8: Run Pint.**
+```
+vendor/bin/pint --dirty
+```
+Expected: no style errors reported.
+
+- [ ] **Step 9: Commit.**
+```
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistoryRecentChecksTest.php && git commit -m "Implement buildRecentChecks paginated by type and range"
+```
+
+### Task 2.6: Remove the legacy `history` prop and migrate existing tests + flag-off coverage
+
+**Files:**
+- modify: `app/Http/Controllers/MonitorsController.php`
+- test: `tests/Feature/MonitorHistory/MonitorHistoryShowTest.php` (modify — existing OLD `history.*` assertions)
+
+**Interfaces:**
+- Removes top-level `history` prop entirely; `show()` now exposes only `monitor`, `graph`, `filters`, `summary`, `recentChecks`
+- When `config('monitor-history.enabled')` is false, `graph`/`filters`/`summary`/`recentChecks` are all `null`
+- Consumes the new props produced in Tasks 2.1–2.5
+
+- [ ] **Step 1: Migrate the legacy timezone test in `MonitorHistoryShowTest` to the new prop name.** Replace:
+```php
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('history.daily_metrics.uptime', 1)
+        );
+```
+with (this monitor's single log is on `2026-03-01`, so the graph year must be 2026):
+```php
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.daily_metrics', 1)
+        );
+```
+And change the request to pin the graph year so the assertion is year-stable:
+```php
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'all',
+            'timezone' => 'Asia/Kolkata',
+            'year' => 2026,
+        ]));
+```
+
+- [ ] **Step 2: Migrate the legacy check-types test to `graph.check_types` and drop the certificate assertion (cert omitted from graph types).** Replace:
+```php
+            ->where('history.check_types', fn ($types) => collect($types)->firstWhere('type', 'uptime')['enabled'] === true
+                && collect($types)->firstWhere('type', 'domain')['enabled'] === false
+                && collect($types)->firstWhere('type', 'certificate')['enabled'] === false
+            )
+```
+with:
+```php
+            ->where('graph.check_types', fn ($types) => collect($types)->pluck('type')->all() === ['uptime', 'domain']
+                && collect($types)->firstWhere('type', 'uptime')['enabled'] === true
+                && collect($types)->firstWhere('type', 'domain')['enabled'] === false
+            )
+```
+
+- [ ] **Step 3: Migrate the legacy recent-checks range test to `recentChecks.pagination.total`.** Replace:
+```php
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('history.recent_checks', 1)
+        );
+```
+with:
+```php
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.pagination.total', 1)
+        );
+```
+
+- [ ] **Step 4: Add a flag-off test asserting all four props are null.** Append to `MonitorHistoryShowTest`:
+```php
+    public function test_history_props_are_null_when_feature_disabled(): void
+    {
+        config(['monitor-history.enabled' => false]);
+
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph', null)
+            ->where('filters', null)
+            ->where('summary', null)
+            ->where('recentChecks', null)
+        );
+    }
+```
+
+- [ ] **Step 5: Remove the legacy `history` payload from `MonitorsController@show`.** Delete the `$history = null;` declaration, the entire `$dailyMetrics = ...`, `$recentChecks = $monitor->checkLogs()...->map(...)` legacy block (the one building `metadata`/`recent_checks`), and the `$history = [ ... ]` assembly array; remove `'history' => $history,` from the `Inertia::render` array. Final render array:
+```php
+        return Inertia::render('Monitors/Show', [
+            'monitor' => $monitor,
+            'graph' => $graph,
+            'filters' => $filters,
+            'summary' => $summary,
+            'recentChecks' => $recentChecks,
+        ]);
+```
+Note: keep the `$selectedRangeQuery`, `$allTimeSummary`, `$selectedRangeSummary` computations — they feed the new `$summary` prop. Keep `resolveHistoryRange()`, `buildSummary()`, `parseDateInput()` intact.
+
+- [ ] **Step 6: Run the full MonitorHistory feature suite and confirm everything passes.**
+```
+php artisan test --filter MonitorHistory
+```
+Expected: PASS (MonitorHistoryShowTest including the new flag-off test, plus MonitorHistoryGraphTest, MonitorHistorySummaryTest, MonitorHistoryRecentChecksTest — all green; no reference to `history.*` remains).
+
+- [ ] **Step 7: Run Pint.**
+```
+vendor/bin/pint --dirty
+```
+Expected: no style errors reported.
+
+- [ ] **Step 8: Commit.**
+```
+git add app/Http/Controllers/MonitorsController.php tests/Feature/MonitorHistory/MonitorHistoryShowTest.php && git commit -m "Remove legacy history prop and migrate tests to graph/filters/summary/recentChecks"
+```
+
+---
+
+Authoring notes for the calling script:
+- The `Show.jsx` frontend currently reads the now-removed `history` prop (lines 32–86, 273, 306–313). After Task 2.6 the page will render with `undefined` history data until Phase 3/4/5 rewire it to the new props. This is expected — backend feature tests (not the JS page) verify Phase 2; the page is rebuilt in later phases. No `npm run build` verification is added here because Phase 2 touches no `.jsx`/`.js`.
+- `npm run test:js` is added in Phase 1; this phase uses only `php artisan test`.
+
+
+---
+
+## Phase 3 — Graphs section (build-verified)
+
+**Deliverable:** A decoupled, full-calendar-year Graphs section rendered as position #1 of the Monitor History card in `Show.jsx`: a `buildHistoryParams` param helper (Vitest-TDD), a rebuilt responsive full-year `MonitorHistoryHeatmap`, a new `MonitorTodayBar`, async year navigation (prev/next bounded by `graph.available_years`, `only:['graph']`), and a per-type headline driven by `graph.series[type].summary` — all build-verified and covered by the Phase 2 graph-payload feature tests.
+
+### Task 3.1: `buildHistoryParams(current, overrides)` helper (Vitest TDD)
+
+**Files:**
+- Test: `resources/js/Utils/historyParams.test.js` (create)
+- Create: `resources/js/Utils/historyParams.js`
+
+**Interfaces:**
+- Produces: `export function buildHistoryParams(current, overrides)` — `current = { year, preset, from, to, recent_type, recent_page }` (derived from props); returns a merged plain object suitable for `router.get` params. Consumed by the year-nav control in Task 3.4 (override `{ year }`) and by Phases 4–5.
+- Consumes: nothing (pure util).
+
+- [ ] **Step 1: Write the failing Vitest spec.** Create `resources/js/Utils/historyParams.test.js`:
+  ```js
+  import { describe, it, expect } from "vitest";
+  import { buildHistoryParams } from "@/Utils/historyParams";
+
+  describe("buildHistoryParams", () => {
+      const current = {
+          year: 2026,
+          preset: "30d",
+          from: "2026-05-01",
+          to: "2026-05-31",
+          recent_type: "uptime",
+          recent_page: 3,
+      };
+
+      it("returns the full current param set when no overrides are given", () => {
+          expect(buildHistoryParams(current, {})).toEqual({
+              year: 2026,
+              preset: "30d",
+              from: "2026-05-01",
+              to: "2026-05-31",
+              recent_type: "uptime",
+              recent_page: 3,
+          });
+      });
+
+      it("merges overrides over the current set without mutating current", () => {
+          const result = buildHistoryParams(current, { year: 2025 });
+          expect(result.year).toBe(2025);
+          expect(result.preset).toBe("30d");
+          expect(current.year).toBe(2026);
+      });
+
+      it("applies multiple overrides at once", () => {
+          const result = buildHistoryParams(current, {
+              recent_type: "domain",
+              recent_page: 1,
+          });
+          expect(result.recent_type).toBe("domain");
+          expect(result.recent_page).toBe(1);
+      });
+
+      it("drops keys whose override value is null or undefined", () => {
+          const result = buildHistoryParams(current, { from: null, to: undefined });
+          expect("from" in result).toBe(false);
+          expect("to" in result).toBe(false);
+          expect(result.preset).toBe("30d");
+      });
+
+      it("tolerates a partial current object", () => {
+          expect(buildHistoryParams({ year: 2026 }, { recent_page: 2 })).toEqual({
+              year: 2026,
+              recent_page: 2,
+          });
+      });
+  });
+  ```
+
+- [ ] **Step 2: Run the spec and confirm it fails.** Run:
+  ```bash
+  npm run test:js -- resources/js/Utils/historyParams.test.js
+  ```
+  Expected: FAIL — `Failed to resolve import "@/Utils/historyParams"` (module does not exist yet).
+
+- [ ] **Step 3: Implement the helper.** Create `resources/js/Utils/historyParams.js`:
+  ```js
+  // Builds the full history param set for an Inertia partial visit by merging
+  // the current param set with a control's change. Keys whose override value is
+  // null/undefined are removed entirely so they fall back to the server default.
+  export function buildHistoryParams(current, overrides) {
+      const merged = { ...current, ...overrides };
+
+      Object.keys(merged).forEach((key) => {
+          if (merged[key] === null || merged[key] === undefined) {
+              delete merged[key];
+          }
+      });
+
+      return merged;
+  }
+  ```
+
+- [ ] **Step 4: Run the spec and confirm it passes.** Run:
+  ```bash
+  npm run test:js -- resources/js/Utils/historyParams.test.js
+  ```
+  Expected: PASS — all 5 tests green.
+
+- [ ] **Step 5: Commit.**
+  ```bash
+  git add resources/js/Utils/historyParams.js resources/js/Utils/historyParams.test.js && git commit -m "Add buildHistoryParams history-param merge helper (Vitest TDD)"
+  ```
+
+### Task 3.2: Rebuild `MonitorHistoryHeatmap` to the full-year spine props
+
+**Files:**
+- Modify: `resources/js/Components/MonitorHistoryHeatmap.jsx`
+
+**Interfaces:**
+- Produces: `MonitorHistoryHeatmap({ checkType, title, description, year, points, todayIso })` — `points = graph.series[type].daily_metrics`; full-year grid; month axis; today ring; per-metric legend; focusable cells + Tooltip.
+- Consumes (all from Phase 1): `buildYearGrid(year)`, `monthLabelColumns(weeks)`, `computeCellSize(containerWidth, weekCount, opts)` from `@/Utils/heatmapCalendar`; `formatDateUTC(iso)` from `@/Utils/formatDate`; `statusesForCheckType(checkType)`, `CHECK_STATUS`, `normalizeCheckStatus`, `getCheckStatusMeta` from `@/Utils/checkStatusSeverity`; `Tooltip({ content, children, className })` from `@/Components/Tooltip`. Payload shape covered by Phase 2 graph-payload feature tests.
+
+- [ ] **Step 1: Replace the entire file** `resources/js/Components/MonitorHistoryHeatmap.jsx` with the rebuilt full-year implementation:
+  ```jsx
+  import React, { useEffect, useMemo, useRef, useState } from "react";
+  import {
+      buildYearGrid,
+      monthLabelColumns,
+      computeCellSize,
+  } from "@/Utils/heatmapCalendar";
+  import { formatDateUTC } from "@/Utils/formatDate";
+  import {
+      CHECK_STATUS,
+      normalizeCheckStatus,
+      getCheckStatusMeta,
+      statusesForCheckType,
+  } from "@/Utils/checkStatusSeverity";
+  import Tooltip from "@/Components/Tooltip";
+
+  const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const CELL_GAP = 3;
+  const CELL_MIN = 10;
+  const CELL_MAX = 16;
+
+  // Graded cell color by worst status + success ratio. Mirrors the locked status
+  // palette. "No checks" days are an explicit gray fill (never transparent).
+  function getCellClasses(point) {
+      if (!point || point.total_checks === 0) {
+          return "bg-gray-100 border-gray-200";
+      }
+
+      const normalizedStatus = normalizeCheckStatus(point.worst_status);
+      const successRatio = Number(point.success_ratio || 0);
+
+      if (normalizedStatus === CHECK_STATUS.FAILED) {
+          if (successRatio < 30) return "bg-red-700 border-red-700";
+          if (successRatio < 70) return "bg-red-500 border-red-500";
+          return "bg-red-300 border-red-300";
+      }
+
+      if (normalizedStatus === CHECK_STATUS.WARNING) {
+          if (successRatio < 80) return "bg-orange-400 border-orange-400";
+          return "bg-yellow-300 border-yellow-300";
+      }
+
+      if (normalizedStatus === CHECK_STATUS.SUCCESS) {
+          if (successRatio >= 99) return "bg-green-700 border-green-700";
+          if (successRatio >= 95) return "bg-green-500 border-green-500";
+          return "bg-green-300 border-green-300";
+      }
+
+      return "bg-gray-300 border-gray-300";
+  }
+
+  // Per-status legend swatches, filtered to the statuses this check type can emit.
+  const LEGEND_DEFS = {
+      success: {
+          label: "Healthy",
+          swatches: [
+              "bg-green-300 border-green-300",
+              "bg-green-500 border-green-500",
+              "bg-green-700 border-green-700",
+          ],
+      },
+      warning: {
+          label: "Warning",
+          swatches: [
+              "bg-yellow-300 border-yellow-300",
+              "bg-orange-400 border-orange-400",
+          ],
+      },
+      failed: {
+          label: "Failed",
+          swatches: [
+              "bg-red-300 border-red-300",
+              "bg-red-500 border-red-500",
+              "bg-red-700 border-red-700",
+          ],
+      },
+      unknown: {
+          label: "Unknown",
+          swatches: ["bg-gray-300 border-gray-300"],
+      },
+  };
+
+  // Explicit null -> "not measured" so a real 0ms value is never hidden by a
+  // falsy check (fixes the 0ms-falsy bug in the previous tooltip builder).
+  function formatMetric(value, suffix) {
+      if (value === null || value === undefined) {
+          return "not measured";
+      }
+      return `${value}${suffix}`;
+  }
+
+  function buildCellTooltip(point, iso) {
+      const dateLabel = formatDateUTC(iso);
+
+      if (!point || point.total_checks === 0) {
+          return `${dateLabel}\nNo checks`;
+      }
+
+      return [
+          dateLabel,
+          `Status: ${getCheckStatusMeta(point.worst_status).label}`,
+          `Total checks: ${point.total_checks}`,
+          `Success: ${point.successful_checks}`,
+          `Warning: ${point.warning_checks}`,
+          `Failed: ${point.failed_checks}`,
+          `Success ratio: ${point.success_ratio}%`,
+          `Avg response: ${formatMetric(point.avg_response_time_ms, "ms")}`,
+          `P95 response: ${formatMetric(point.p95_response_time_ms, "ms")}`,
+      ].join("\n");
+  }
+
+  export default function MonitorHistoryHeatmap({
+      checkType,
+      title,
+      description,
+      year,
+      points = [],
+      todayIso = null,
+  }) {
+      const containerRef = useRef(null);
+      const [cellSize, setCellSize] = useState(CELL_MIN);
+
+      const pointMap = useMemo(
+          () => new Map(points.map((point) => [point.date, point])),
+          [points]
+      );
+
+      const grid = useMemo(() => buildYearGrid(year), [year]);
+      const weeks = grid.weeks;
+      const monthColumns = useMemo(() => monthLabelColumns(weeks), [weeks]);
+
+      // Responsive fit: size cells to the container width via ResizeObserver,
+      // clamped to [CELL_MIN, CELL_MAX]. Below CELL_MIN the wrapper scrolls.
+      useEffect(() => {
+          const element = containerRef.current;
+          if (!element) {
+              return undefined;
+          }
+
+          const measure = () => {
+              setCellSize(
+                  computeCellSize(element.clientWidth, weeks.length, {
+                      gap: CELL_GAP,
+                      min: CELL_MIN,
+                      max: CELL_MAX,
+                  })
+              );
+          };
+
+          measure();
+          const observer = new ResizeObserver(measure);
+          observer.observe(element);
+          return () => observer.disconnect();
+      }, [weeks.length]);
+
+      const isCurrentYear =
+          todayIso !== null && todayIso.startsWith(String(year) + "-");
+
+      const legendStatuses = statusesForCheckType(checkType);
+
+      // Visually-hidden one-sentence summary for screen readers.
+      const daysWithData = points.length;
+      const failedDays = points.filter(
+          (point) => normalizeCheckStatus(point.worst_status) === CHECK_STATUS.FAILED
+      ).length;
+      const srSummary = `${title}: ${year} calendar. ${daysWithData} day${
+          daysWithData === 1 ? "" : "s"
+      } with recorded checks, ${failedDays} with a failed worst-status.`;
+
+      const cellStyle = { width: cellSize, height: cellSize };
+      const labelTrackStyle = { height: cellSize };
+
+      return (
+          <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <div className="mb-4">
+                  <h3 className="text-base font-semibold text-gray-900">{title}</h3>
+                  {description ? (
+                      <p className="mt-1 text-sm text-gray-500">{description}</p>
+                  ) : null}
+              </div>
+
+              <p className="sr-only">{srSummary}</p>
+
+              <div ref={containerRef} className="overflow-x-auto">
+                  <div className="inline-flex flex-col gap-1 min-w-max">
+                      {/* Month label row, aligned to the first week-column of each month. */}
+                      <div
+                          className="flex"
+                          style={{ gap: CELL_GAP, marginLeft: cellSize + CELL_GAP }}
+                          aria-hidden="true"
+                      >
+                          {weeks.map((_, weekIndex) => {
+                              const month = monthColumns.find(
+                                  (entry) => entry.colIndex === weekIndex
+                              );
+                              return (
+                                  <span
+                                      key={weekIndex}
+                                      className="text-[10px] leading-3 text-gray-600 tabular-nums"
+                                      style={{ width: cellSize }}
+                                  >
+                                      {month ? month.label : ""}
+                                  </span>
+                              );
+                          })}
+                      </div>
+
+                      <div className="flex" style={{ gap: CELL_GAP }}>
+                          {/* Weekday labels (Y axis). */}
+                          <div className="flex flex-col" style={{ gap: CELL_GAP }}>
+                              {WEEKDAY_LABELS.map((label) => (
+                                  <span
+                                      key={label}
+                                      className="flex items-center text-[10px] leading-3 text-gray-600 tabular-nums"
+                                      style={labelTrackStyle}
+                                  >
+                                      {label}
+                                  </span>
+                              ))}
+                          </div>
+
+                          <div
+                              className="flex"
+                              style={{ gap: CELL_GAP }}
+                              role="grid"
+                              aria-label={`${title} ${year} daily health`}
+                          >
+                              {weeks.map((week, weekIndex) => (
+                                  <div
+                                      key={weekIndex}
+                                      className="flex flex-col"
+                                      style={{ gap: CELL_GAP }}
+                                      role="row"
+                                  >
+                                      {week.map((day) => {
+                                          // Pad days outside the year (leading/trailing
+                                          // week fill) are the ONLY transparent cells.
+                                          if (!day.inYear) {
+                                              return (
+                                                  <div
+                                                      key={day.iso}
+                                                      className="rounded-sm bg-transparent"
+                                                      style={cellStyle}
+                                                      role="gridcell"
+                                                      aria-hidden="true"
+                                                  />
+                                              );
+                                          }
+
+                                          const point = pointMap.get(day.iso);
+                                          const isToday =
+                                              isCurrentYear && day.iso === todayIso;
+
+                                          return (
+                                              <Tooltip
+                                                  key={day.iso}
+                                                  content={buildCellTooltip(point, day.iso)}
+                                              >
+                                                  <div
+                                                      role="gridcell"
+                                                      tabIndex={0}
+                                                      aria-label={buildCellTooltip(
+                                                          point,
+                                                          day.iso
+                                                      ).replace(/\n/g, ", ")}
+                                                      className={[
+                                                          "rounded-sm border transition-transform duration-150 ease-out",
+                                                          "hover:scale-110 hover:ring-1 hover:ring-gray-400",
+                                                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500",
+                                                          "motion-reduce:transition-none motion-reduce:transform-none",
+                                                          getCellClasses(point),
+                                                          isToday
+                                                              ? "ring-2 ring-indigo-500"
+                                                              : "",
+                                                      ].join(" ")}
+                                                      style={cellStyle}
+                                                  />
+                                              </Tooltip>
+                                          );
+                                      })}
+                                  </div>
+                              ))}
+                          </div>
+                      </div>
+                  </div>
+              </div>
+
+              <div className="mt-4 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600">
+                  <span className="flex items-center gap-1.5">
+                      <span className="h-3.5 w-3.5 rounded-sm border bg-gray-100 border-gray-200" />
+                      No checks
+                  </span>
+                  {legendStatuses
+                      .filter((status) => LEGEND_DEFS[status])
+                      .map((status) => {
+                          const def = LEGEND_DEFS[status];
+                          return (
+                              <span
+                                  key={status}
+                                  className="flex items-center gap-1.5"
+                              >
+                                  <span className="flex gap-0.5">
+                                      {def.swatches.map((swatch) => (
+                                          <span
+                                              key={swatch}
+                                              className={`h-3.5 w-3.5 rounded-sm border ${swatch}`}
+                                          />
+                                      ))}
+                                  </span>
+                                  {def.label}
+                              </span>
+                          );
+                      })}
+                  {isCurrentYear ? (
+                      <span className="flex items-center gap-1.5">
+                          <span className="h-3.5 w-3.5 rounded-sm border border-gray-200 bg-white ring-2 ring-indigo-500" />
+                          Today
+                      </span>
+                  ) : null}
+              </div>
+          </div>
+      );
+  }
+  ```
+
+- [ ] **Step 2: Build-verify.** Run:
+  ```bash
+  npm run build
+  ```
+  Expected: built successfully (no import/JSX errors; `@/Utils/heatmapCalendar`, `@/Utils/formatDate`, `@/Components/Tooltip`, and `statusesForCheckType` resolve from Phase 1).
+
+- [ ] **Step 3: Commit.**
+  ```bash
+  git add resources/js/Components/MonitorHistoryHeatmap.jsx && git commit -m "Rebuild MonitorHistoryHeatmap as responsive full-year grid with month axis, today ring, per-metric legend and a11y"
+  ```
+
+### Task 3.3: Create `MonitorTodayBar` component
+
+**Files:**
+- Create: `resources/js/Components/MonitorTodayBar.jsx`
+
+**Interfaces:**
+- Produces: `MonitorTodayBar({ checkType, checks })` — `checks = graph.series[type].today_checks` (newest first, each `{ id, checked_at:'YYYY-MM-DD HH:mm:ss', status, message, failure_reason, response_time_ms }`); thin segments newest->oldest, most-recent-that-fit (measure width); each segment colored by the status `heatmapClass` and wrapped in a Tooltip; small `Today (N checks)` label; per-metric legend reused.
+- Consumes (Phase 1): `formatDateTimeUTC(iso)` from `@/Utils/formatDate`; `getCheckStatusMeta(status)` (returns `{ heatmapClass, label, ... }`) and `statusesForCheckType(checkType)` from `@/Utils/checkStatusSeverity`; `Tooltip` from `@/Components/Tooltip`. Payload `today_checks` covered by Phase 2 graph-payload feature tests.
+
+> Note for implementer: the spine phrases this as `CHECK_STATUS_META[status].heatmapClass`. `CHECK_STATUS_META` is module-local (not exported) in `checkStatusSeverity.js`; use the exported accessor `getCheckStatusMeta(status).heatmapClass`, which returns that exact meta object. Do not add a new export.
+
+- [ ] **Step 1: Create the file** `resources/js/Components/MonitorTodayBar.jsx`:
+  ```jsx
+  import React, { useEffect, useMemo, useRef, useState } from "react";
+  import { formatDateTimeUTC } from "@/Utils/formatDate";
+  import {
+      getCheckStatusMeta,
+      statusesForCheckType,
+  } from "@/Utils/checkStatusSeverity";
+  import Tooltip from "@/Components/Tooltip";
+
+  const SEGMENT_WIDTH = 8;
+  const SEGMENT_GAP = 2;
+
+  const LEGEND_SWATCH = {
+      success: "bg-green-500",
+      warning: "bg-yellow-400",
+      failed: "bg-red-500",
+      unknown: "bg-gray-300",
+  };
+
+  function buildSegmentTooltip(check) {
+      return [
+          formatDateTimeUTC(check.checked_at),
+          `Status: ${getCheckStatusMeta(check.status).label}`,
+          check.message ? `Message: ${check.message}` : null,
+          check.response_time_ms !== null && check.response_time_ms !== undefined
+              ? `Response: ${check.response_time_ms}ms`
+              : null,
+          check.failure_reason ? `Failure: ${check.failure_reason}` : null,
+      ]
+          .filter(Boolean)
+          .join("\n");
+  }
+
+  export default function MonitorTodayBar({ checkType, checks = [] }) {
+      const containerRef = useRef(null);
+      const [maxSegments, setMaxSegments] = useState(checks.length);
+
+      // Measure how many newest-first segments fit; show the most recent that fit.
+      useEffect(() => {
+          const element = containerRef.current;
+          if (!element) {
+              return undefined;
+          }
+
+          const measure = () => {
+              const width = element.clientWidth;
+              const perSegment = SEGMENT_WIDTH + SEGMENT_GAP;
+              const fit = Math.max(1, Math.floor((width + SEGMENT_GAP) / perSegment));
+              setMaxSegments(fit);
+          };
+
+          measure();
+          const observer = new ResizeObserver(measure);
+          observer.observe(element);
+          return () => observer.disconnect();
+      }, [checks.length]);
+
+      // checks are newest-first; keep the most recent that fit, then render
+      // oldest->newest left-to-right so the newest sits on the right edge.
+      const visible = useMemo(() => {
+          return checks.slice(0, maxSegments).reverse();
+      }, [checks, maxSegments]);
+
+      const legendStatuses = statusesForCheckType(checkType);
+
+      return (
+          <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+              <p className="mb-2 text-xs font-medium text-gray-600 tabular-nums">
+                  {`Today (${checks.length} checks)`}
+              </p>
+
+              <div ref={containerRef} className="flex items-stretch overflow-hidden">
+                  {visible.length === 0 ? (
+                      <span className="text-xs text-gray-500">
+                          No checks recorded today.
+                      </span>
+                  ) : (
+                      <div className="flex" style={{ gap: SEGMENT_GAP }}>
+                          {visible.map((check) => (
+                              <Tooltip
+                                  key={check.id}
+                                  content={buildSegmentTooltip(check)}
+                              >
+                                  <div
+                                      tabIndex={0}
+                                      aria-label={buildSegmentTooltip(check).replace(
+                                          /\n/g,
+                                          ", "
+                                      )}
+                                      className={[
+                                          "h-8 rounded-sm transition-transform duration-150 ease-out",
+                                          "hover:scale-y-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500",
+                                          "motion-reduce:transition-none motion-reduce:transform-none",
+                                          getCheckStatusMeta(check.status).heatmapClass,
+                                      ].join(" ")}
+                                      style={{ width: SEGMENT_WIDTH }}
+                                  />
+                              </Tooltip>
+                          ))}
+                      </div>
+                  )}
+              </div>
+
+              <div className="mt-3 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600">
+                  {legendStatuses.map((status) => (
+                      <span key={status} className="flex items-center gap-1.5">
+                          <span
+                              className={`h-3 w-3 rounded-sm ${
+                                  LEGEND_SWATCH[status] || "bg-gray-300"
+                              }`}
+                          />
+                          {getCheckStatusMeta(status).label}
+                      </span>
+                  ))}
+              </div>
+          </div>
+      );
+  }
+  ```
+
+- [ ] **Step 2: Build-verify.** Run:
+  ```bash
+  npm run build
+  ```
+  Expected: built successfully (imports from `@/Utils/formatDate`, `@/Utils/checkStatusSeverity`, `@/Components/Tooltip` all resolve).
+
+- [ ] **Step 3: Commit.**
+  ```bash
+  git add resources/js/Components/MonitorTodayBar.jsx && git commit -m "Add MonitorTodayBar per-check today timeline with tooltips and legend"
+  ```
+
+### Task 3.4: Wire the Graphs section into `Show.jsx` as position #1 (decoupled)
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes: Inertia prop `graph` (`{ year, available_years, timezone, check_types:[{type,enabled}], series:{<type>:{summary:{total_checks,success_ratio,status_totals},daily_metrics,today_checks}} }`) from Phase 2; `buildHistoryParams(current, overrides)` (Task 3.1); `MonitorHistoryHeatmap` (Task 3.2); `MonitorTodayBar` (Task 3.3). Graph payload shape is covered by the Phase 2 feature tests (`MonitorHistoryShowTest`: graph year / `available_years` / `today_checks` / cert-omitted `check_types`).
+- Produces: year-nav control (`only:['graph']`, override `{ year }`) + per-type headline + today-bar + heatmap, rendered first inside the history card.
+
+> Note for implementer: Phase 2 splits the payload into top-level `graph`/`filters`/`summary`/`recentChecks` props and removes the old `history` prop. This task wires ONLY the Graphs section and reads ONLY `graph`. The legacy `history`-driven filter/summary/recent-checks blocks already present in `Show.jsx` (the gray filter card, the 4-stat grid, the old heatmap loop, the Recent Checks table) are replaced in Phases 4–5; leave them untouched here EXCEPT for removing the single old `MonitorHistoryHeatmap` usage loop, which this task supersedes. To keep the build green in the interim, this task does not delete the legacy blocks — it inserts the new Graphs section above them and removes only the old heatmap `.map(...)` loop (lines that render the old `MonitorHistoryHeatmap` with `fromDate`/`toDate`). The `current` param set is derived defensively from whatever range/year props exist.
+
+- [ ] **Step 1: Replace the imports block** at the top of `Show.jsx`. Change:
+  ```jsx
+  import MonitorHistoryHeatmap from "@/Components/MonitorHistoryHeatmap";
+  import {
+      getCheckStatusBadgeColor,
+      normalizeCheckStatus,
+  } from "@/Utils/checkStatusSeverity";
+  ```
+  to:
+  ```jsx
+  import MonitorHistoryHeatmap from "@/Components/MonitorHistoryHeatmap";
+  import MonitorTodayBar from "@/Components/MonitorTodayBar";
+  import { buildHistoryParams } from "@/Utils/historyParams";
+  import {
+      getCheckStatusBadgeColor,
+      normalizeCheckStatus,
+  } from "@/Utils/checkStatusSeverity";
+  import {
+      ChevronLeftIcon,
+      ChevronRightIcon,
+  } from "@heroicons/react/24/outline";
+  ```
+
+- [ ] **Step 2: Read the new `graph` prop and derive the param set.** Immediately after the existing line `const selectedRange = history?.range || null;` (inside `Show`), insert:
+  ```jsx
+  const { graph } = usePage().props;
+  const [graphPending, setGraphPending] = useState(false);
+
+  // The graph is driven solely by ?year and is decoupled from the filters.
+  const currentParams = useMemo(
+      () => ({
+          year: graph?.year,
+          preset: selectedRange?.preset,
+          from: selectedRange?.from,
+          to: selectedRange?.to,
+          recent_type: recentChecks?.type || "uptime",
+          recent_page: recentChecks?.pagination?.current_page || 1,
+      }),
+      [graph?.year, selectedRange, recentChecks]
+  );
+  ```
+  > Implementer note: `recentChecks` becomes a top-level prop in Phase 2. To avoid a ReferenceError before Phase 5 wires it, also destructure it defensively in Step 3.
+
+- [ ] **Step 3: Destructure `recentChecks` defensively.** Change the existing destructure line:
+  ```jsx
+  const { monitor, features, history } = usePage().props;
+  ```
+  to:
+  ```jsx
+  const { monitor, features, history, recentChecks } = usePage().props;
+  ```
+  (Remove the separate `const { graph } = usePage().props;` line added in Step 2 and instead fold `graph` into this same destructure to keep one source: `const { monitor, features, history, graph, recentChecks } = usePage().props;`. Keep the `graphPending` state and `currentParams` memo from Step 2.)
+
+- [ ] **Step 4: Add the year-nav handler.** After the `submitCustomRange` function definition, insert:
+  ```jsx
+  const goToYear = (targetYear) => {
+      router.get(
+          route("monitors.show", monitor.id),
+          buildHistoryParams(currentParams, { year: targetYear }),
+          {
+              only: ["graph"],
+              preserveState: true,
+              preserveScroll: true,
+              replace: true,
+              onStart: () => setGraphPending(true),
+              onFinish: () => setGraphPending(false),
+          }
+      );
+  };
+  ```
+
+- [ ] **Step 5: Add a Graphs section renderer.** Inside the `(...)` branch where `history` is truthy (the `<div className="space-y-6">` block), insert the following as the FIRST child, immediately after the opening `<div className="space-y-6">`:
+  ```jsx
+  {graph ? (
+      <section aria-label="Yearly health graphs" className="space-y-6">
+          <div className="flex items-center justify-between gap-4">
+              <h3 className="text-base font-semibold text-gray-900">
+                  Health by year
+              </h3>
+              <div className="flex items-center gap-2" aria-busy={graphPending}>
+                  <button
+                      type="button"
+                      onClick={() =>
+                          goToYear(graph.year - 1)
+                      }
+                      disabled={
+                          graphPending ||
+                          graph.year <= Math.min(...graph.available_years)
+                      }
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500"
+                      aria-label="Previous year"
+                  >
+                      <ChevronLeftIcon className="h-4 w-4" />
+                  </button>
+                  <span className="min-w-[3.5rem] text-center text-sm font-semibold text-gray-900 tabular-nums">
+                      {graph.year}
+                  </span>
+                  <button
+                      type="button"
+                      onClick={() =>
+                          goToYear(graph.year + 1)
+                      }
+                      disabled={
+                          graphPending ||
+                          graph.year >= Math.max(...graph.available_years)
+                      }
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500"
+                      aria-label="Next year"
+                  >
+                      <ChevronRightIcon className="h-4 w-4" />
+                  </button>
+              </div>
+          </div>
+
+          {graph.check_types
+              .filter(({ enabled }) => enabled)
+              .map(({ type }) => {
+                  const series = graph.series?.[type];
+                  const typeSummary = series?.summary;
+                  const todayIso = (graph.timezone, null) || null;
+
+                  return (
+                      <div key={type} className="space-y-3">
+                          <p className="text-sm font-medium text-gray-700 tabular-nums">
+                              {`${formatCheckTypeLabel(type)} · ${
+                                  typeSummary
+                                      ? Number(
+                                            typeSummary.success_ratio
+                                        ).toFixed(1)
+                                      : "0.0"
+                              }% · ${(
+                                  typeSummary?.total_checks || 0
+                              ).toLocaleString()} checks`}
+                          </p>
+                          <MonitorTodayBar
+                              checkType={type}
+                              checks={series?.today_checks || []}
+                          />
+                          <MonitorHistoryHeatmap
+                              checkType={type}
+                              title={`${formatCheckTypeLabel(type)} Health`}
+                              description={`${graph.year} (${graph.timezone})`}
+                              year={graph.year}
+                              points={series?.daily_metrics || []}
+                              todayIso={graph.today_iso || null}
+                          />
+                      </div>
+                  );
+              })}
+      </section>
+  ) : null}
+  ```
+  > Implementer note on `todayIso`: the spine says today's cell ring shows only when `year === current year` and `todayIso` is in range. The heatmap derives "current year" from `todayIso.startsWith(year + '-')`, so `todayIso` must be the server-tz "today" ISO date. The `graph` payload exposes it; pass `graph.today_iso`. Remove the throwaway `const todayIso = (graph.timezone, null) || null;` line — it was a placeholder; use `graph.today_iso` directly in the `todayIso` prop as shown. (If Phase 2's payload names this field differently, align to that exact field name; the canonical contract is the server-tz today ISO string.)
+
+- [ ] **Step 6: Remove the legacy heatmap `.map(...)` loop.** Delete the old block in `Show.jsx` that renders `MonitorHistoryHeatmap` with `fromDate`/`toDate` (the `{checkTypes.map(({ type, enabled }) => enabled ? (<MonitorHistoryHeatmap ... fromDate={selectedRange?.from} toDate={selectedRange?.to} .../>) : (...disabled card...))}` block). The new Graphs section in Step 5 supersedes it. Leave the gray filter card, the 4-stat grid, and the Recent Checks table in place (replaced in Phases 4–5).
+
+- [ ] **Step 7: Build-verify.** Run:
+  ```bash
+  npm run build
+  ```
+  Expected: built successfully (no unresolved imports; `graph` reads, `buildHistoryParams`, `MonitorTodayBar`, `MonitorHistoryHeatmap`, and the Chevron icons all resolve).
+
+- [ ] **Step 8: Confirm the Phase 2 graph-payload tests still pass** (they assert the props this section renders). Run:
+  ```bash
+  php artisan config:clear && php artisan test --filter MonitorHistoryShowTest
+  ```
+  Expected: PASS — the graph year, `available_years`, `today_checks`, and cert-omitted `check_types` assertions from Phase 2 are green (this task only consumes that payload, does not change it).
+
+- [ ] **Step 9: Commit.**
+  ```bash
+  git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Wire decoupled Graphs section (year nav, per-type headline, today bar, full-year heatmap) as position 1 in Show"
+  ```
+
+
+---
+
+## Phase 4 — Filters + Summary (build-verified)
+
+**Deliverable:** `MonitorHistoryFilters` inline filter row (preset pills + From/To + Apply, all `h-9`, filter-driven only) and `SummaryStats` reliability-led KPI block (unknown reconciliation E4, all-time compare, empty-state disambiguation E5), both wired into `Show.jsx` at positions #2 and #3 with a single timezone label (E7) on the history section header; `npm run build` succeeds.
+
+### Task 4.1: Create `MonitorHistoryFilters` component
+
+**Files:**
+- Create: `resources/js/Components/MonitorHistoryFilters.jsx`
+
+**Interfaces:**
+- Produces: `MonitorHistoryFilters({ filters, pending, onApply })` — `filters` = top-level Inertia `filters` prop `{ preset, from, to, timezone }`; `pending` = boolean from `Show.jsx`; `onApply({preset})` for a preset pill or `onApply({preset:'custom', from, to})` for the date range.
+- Consumes: nothing from other Phase 4 files (self-contained, raw `<input type="date">` for matched height — `Input.jsx` wraps in a full-width div that would break the inline row).
+
+- [ ] **Step 1: Create the component file with the preset definitions and controlled custom-range state.**
+```jsx
+import React, { useEffect, useState } from "react";
+
+const PRESETS = [
+    { value: "7d", label: "7d" },
+    { value: "30d", label: "30d" },
+    { value: "all", label: "All" },
+];
+
+function todayIso() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+
+export default function MonitorHistoryFilters({ filters, pending = false, onApply }) {
+    const activePreset = filters?.preset || "30d";
+
+    const [customRange, setCustomRange] = useState({
+        from: filters?.from || "",
+        to: filters?.to || "",
+    });
+
+    // Keep inputs in sync with the range the server actually applied (it may clamp/swap).
+    useEffect(() => {
+        setCustomRange({ from: filters?.from || "", to: filters?.to || "" });
+    }, [filters?.from, filters?.to]);
+
+    const max = todayIso();
+
+    const handlePreset = (value) => {
+        onApply({ preset: value });
+    };
+
+    const submitCustomRange = (event) => {
+        event.preventDefault();
+        onApply({ preset: "custom", from: customRange.from, to: customRange.to });
+    };
+
+    const segmentBase =
+        "h-9 px-3 inline-flex items-center justify-center text-xs font-semibold border focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1 transition-colors duration-150 ease-out motion-reduce:transition-none disabled:opacity-50 disabled:cursor-not-allowed";
+
+    const dateInputClass =
+        "h-9 px-3 text-sm font-medium tabular-nums text-gray-900 bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:border-transparent disabled:opacity-50";
+
+    return (
+        <div className="flex flex-wrap items-end gap-x-4 gap-y-3">
+            <div
+                className="inline-flex rounded-lg shadow-sm"
+                role="group"
+                aria-label="Date range presets"
+            >
+                {PRESETS.map((preset, index) => {
+                    const isActive = activePreset === preset.value;
+                    return (
+                        <button
+                            key={preset.value}
+                            type="button"
+                            aria-pressed={isActive}
+                            disabled={pending}
+                            onClick={() => handlePreset(preset.value)}
+                            className={[
+                                segmentBase,
+                                index === 0 ? "rounded-l-lg" : "-ml-px",
+                                index === PRESETS.length - 1 ? "rounded-r-lg" : "",
+                                isActive
+                                    ? "bg-purple-600 text-white border-purple-600 hover:bg-purple-700 active:bg-purple-800 z-10"
+                                    : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+                            ].join(" ")}
+                        >
+                            {preset.label}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <form
+                onSubmit={submitCustomRange}
+                className="flex flex-wrap items-end gap-x-3 gap-y-3"
+            >
+                <div className="flex flex-col">
+                    <label
+                        htmlFor="history-filter-from"
+                        className="mb-1 text-xs font-medium text-gray-600"
+                    >
+                        From
+                    </label>
+                    <input
+                        id="history-filter-from"
+                        type="date"
+                        name="from"
+                        max={max}
+                        value={customRange.from}
+                        disabled={pending}
+                        onChange={(event) =>
+                            setCustomRange((previous) => ({
+                                ...previous,
+                                from: event.target.value,
+                            }))
+                        }
+                        className={dateInputClass}
+                    />
+                </div>
+                <div className="flex flex-col">
+                    <label
+                        htmlFor="history-filter-to"
+                        className="mb-1 text-xs font-medium text-gray-600"
+                    >
+                        To
+                    </label>
+                    <input
+                        id="history-filter-to"
+                        type="date"
+                        name="to"
+                        max={max}
+                        value={customRange.to}
+                        disabled={pending}
+                        onChange={(event) =>
+                            setCustomRange((previous) => ({
+                                ...previous,
+                                to: event.target.value,
+                            }))
+                        }
+                        className={dateInputClass}
+                    />
+                </div>
+                <button
+                    type="submit"
+                    disabled={pending}
+                    className="h-9 px-4 inline-flex items-center justify-center rounded-lg bg-purple-600 text-sm font-semibold text-white shadow-sm hover:bg-purple-700 active:bg-purple-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1 transition-colors duration-150 ease-out motion-reduce:transition-none disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    Apply
+                </button>
+            </form>
+        </div>
+    );
+}
+```
+
+- [ ] **Step 2: Verify the build compiles the new component.**
+  Run: `npm run build`
+  Expected: build completes successfully (no module-resolution or JSX errors); output ends with the Vite "built in <time>" summary.
+
+- [ ] **Step 3: Commit.**
+  Run: `git add resources/js/Components/MonitorHistoryFilters.jsx && git commit -m "Add MonitorHistoryFilters inline preset+range row"`
+
+### Task 4.2: Create `SummaryStats` component
+
+**Files:**
+- Create: `resources/js/Components/SummaryStats.jsx`
+
+**Interfaces:**
+- Produces: `SummaryStats({ summary })` — `summary` = top-level Inertia `summary` prop `{ all_time, selected_range, first_checked_at }`; each of `all_time`/`selected_range` is the `buildSummary()` shape `{ total_checks, status_totals:{success,warning,failed,unknown}, by_type, success_ratio }`.
+- Consumes: `formatDateTimeUTC` from `@/Utils/formatDate` (Phase 1) for the first-run empty state; `getCheckStatusBadgeColor` is NOT needed here (counts use the fixed status palette directly).
+- Note: backend coverage — `MonitorHistoryShowTest` (Phase 2) asserts `summary.selected_range`, `summary.all_time`, and `summary.first_checked_at` prop shape; this component only renders that payload.
+
+- [ ] **Step 1: Create the component file with the reliability color helper and count definitions.**
+```jsx
+import React from "react";
+import { formatDateTimeUTC } from "@/Utils/formatDate";
+
+function reliabilityColor(ratio) {
+    if (ratio >= 99) return "text-green-700";
+    if (ratio >= 95) return "text-green-600";
+    if (ratio >= 80) return "text-yellow-600";
+    return "text-red-600";
+}
+
+function formatRatio(ratio) {
+    return `${Number(ratio || 0).toFixed(1)}%`;
+}
+
+// Includes Unknown so the four counts reconcile to total_checks (E4).
+const COUNT_ITEMS = [
+    { key: "success", label: "Success", className: "text-green-700" },
+    { key: "warning", label: "Warning", className: "text-yellow-700" },
+    { key: "failed", label: "Failed", className: "text-red-700" },
+    { key: "unknown", label: "Unknown", className: "text-gray-600" },
+];
+
+export default function SummaryStats({ summary }) {
+    const selected = summary?.selected_range || null;
+    const allTime = summary?.all_time || null;
+    const selectedTotal = selected?.total_checks || 0;
+    const allTimeTotal = allTime?.total_checks || 0;
+
+    // E5: first-run empty state — nothing has ever been checked.
+    if (allTimeTotal === 0) {
+        return (
+            <div className="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 text-center">
+                <p className="text-sm font-medium text-gray-700">
+                    No checks have been recorded yet
+                </p>
+                <p className="mt-1 text-sm text-gray-500">
+                    {summary?.first_checked_at
+                        ? `First check expected around ${formatDateTimeUTC(summary.first_checked_at)}.`
+                        : "Reliability stats will appear once this monitor runs its first check."}
+                </p>
+            </div>
+        );
+    }
+
+    // E5: data exists all-time but the selected range is empty — disambiguate.
+    if (selectedTotal === 0) {
+        return (
+            <div className="rounded-xl border border-gray-200 bg-white p-6">
+                <p className="text-sm font-medium text-gray-700">
+                    No checks in this range
+                </p>
+                <p className="mt-1 text-sm text-gray-500">
+                    This monitor has{" "}
+                    <span className="tabular-nums font-semibold text-gray-700">
+                        {allTimeTotal}
+                    </span>{" "}
+                    checks all-time at{" "}
+                    <span className="tabular-nums font-semibold text-gray-700">
+                        {formatRatio(allTime?.success_ratio)}
+                    </span>{" "}
+                    reliability.{" "}
+                    <button
+                        type="button"
+                        onClick={() => sendViewAllTime()}
+                        className="font-semibold text-purple-600 hover:text-purple-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1 rounded"
+                    >
+                        View All Time
+                    </button>
+                </p>
+            </div>
+        );
+
+        function sendViewAllTime() {
+            // Bridge to Show.jsx's preset handler via a CustomEvent so this
+            // presentational component stays free of router/onApply coupling.
+            window.dispatchEvent(
+                new CustomEvent("monitor-history:view-all-time")
+            );
+        }
+    }
+
+    const selectedRatio = Number(selected?.success_ratio || 0);
+    const totals = selected?.status_totals || {};
+
+    return (
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-stretch">
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm lg:w-64">
+                <p className="text-xs font-medium uppercase tracking-wide text-gray-500">
+                    Reliability
+                </p>
+                <p
+                    className={`mt-1 text-4xl font-bold tabular-nums ${reliabilityColor(
+                        selectedRatio
+                    )}`}
+                >
+                    {formatRatio(selectedRatio)}
+                </p>
+                <p className="mt-1 text-xs text-gray-500">
+                    <span className="tabular-nums">{selectedTotal}</span> checks in
+                    range · all-time{" "}
+                    <span className="tabular-nums font-medium text-gray-600">
+                        {formatRatio(allTime?.success_ratio)}
+                    </span>
+                </p>
+            </div>
+
+            <div className="grid flex-1 grid-cols-2 gap-3 sm:grid-cols-4">
+                {COUNT_ITEMS.map((item) => (
+                    <div
+                        key={item.key}
+                        className="rounded-xl border border-gray-200 bg-white p-4"
+                    >
+                        <p className="text-xs uppercase tracking-wide text-gray-500">
+                            {item.label}
+                        </p>
+                        <p
+                            className={`mt-2 text-2xl font-bold tabular-nums ${item.className}`}
+                        >
+                            {totals[item.key] || 0}
+                        </p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+```
+
+- [ ] **Step 2: Verify the build compiles the new component (and resolves the Phase 1 `formatDate` import).**
+  Run: `npm run build`
+  Expected: build completes successfully; no "Could not resolve `@/Utils/formatDate`" error (Phase 1 created it).
+
+- [ ] **Step 3: Commit.**
+  Run: `git add resources/js/Components/SummaryStats.jsx && git commit -m "Add SummaryStats reliability-led KPIs with unknown reconciliation and empty states"`
+
+### Task 4.3: Wire `MonitorHistoryFilters` (position #2) and `SummaryStats` (position #3) into `Show.jsx`
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes: top-level Inertia props `filters` and `summary` (Phase 2 payload restructure); `buildHistoryParams(current, overrides)` from Task 3.x (already imported/defined in `Show.jsx` after Phase 3); `MonitorHistoryFilters({ filters, pending, onApply })` (Task 4.1); `SummaryStats({ summary })` (Task 4.2).
+- Partial-visit contract (spine): Filters → `router.get(route('monitors.show', monitor.id), buildHistoryParams(current, override), { only: ['filters','summary','recentChecks'], preserveState:true, preserveScroll:true, replace:true })` where override is `{ preset, recent_page:1 }` for a pill or `{ preset:'custom', from, to, recent_page:1 }` for a range; set `filtersPending` on `onStart`/`onFinish`.
+- Note: This task assumes Phase 3 already changed `usePage().props` to read top-level `graph`/`filters`/`summary`/`recentChecks` and defined `current`/`buildHistoryParams`. Phase 4 only adds the filters callback + the two components + the timezone label. The exact `import`/`current`/`buildHistoryParams` lines below match the Phase 3 deliverable; if Phase 3 named them differently, reconcile to those names.
+
+- [ ] **Step 1: Add imports for the two new components (place beside the existing `MonitorHistoryHeatmap` import).**
+```jsx
+import MonitorHistoryFilters from "@/Components/MonitorHistoryFilters";
+import SummaryStats from "@/Components/SummaryStats";
+```
+
+- [ ] **Step 2: Add a `filtersPending` state and a `handleApplyFilters` callback inside the `Show` component (after the existing prop destructuring / `current` / `buildHistoryParams` from Phase 3).**
+```jsx
+const [filtersPending, setFiltersPending] = useState(false);
+
+const handleApplyFilters = (change) => {
+    // Timezone is resolved server-side to match how metrics were aggregated,
+    // so we intentionally never send the browser timezone here.
+    const overrides = { ...change, recent_page: 1 };
+
+    router.get(
+        route("monitors.show", monitor.id),
+        buildHistoryParams(current, overrides),
+        {
+            only: ["filters", "summary", "recentChecks"],
+            preserveState: true,
+            preserveScroll: true,
+            replace: true,
+            onStart: () => setFiltersPending(true),
+            onFinish: () => setFiltersPending(false),
+        }
+    );
+};
+```
+
+- [ ] **Step 3: Wire the `SummaryStats` "View All Time" CustomEvent bridge to the filter handler (add a `useEffect` next to `handleApplyFilters`).**
+```jsx
+useEffect(() => {
+    const onViewAllTime = () => handleApplyFilters({ preset: "all" });
+    window.addEventListener("monitor-history:view-all-time", onViewAllTime);
+    return () =>
+        window.removeEventListener(
+            "monitor-history:view-all-time",
+            onViewAllTime
+        );
+    // handleApplyFilters closes over `monitor.id` and `current`, both stable per render.
+}, [current]);
+```
+
+- [ ] **Step 4: Replace the legacy filter `<div className="rounded-xl border border-gray-200 bg-gray-50 p-4">…</div>` block (the preset buttons + custom-range `<form>`, the section that begins at the `selectedRange?.preset === "7d"` button and ends at the closing `</form>`'s wrapper) with the `MonitorHistoryFilters` component at position #2.**
+```jsx
+<MonitorHistoryFilters
+    filters={filters}
+    pending={filtersPending}
+    onApply={handleApplyFilters}
+/>
+```
+
+- [ ] **Step 5: Replace the legacy summary cards `<div className="grid grid-cols-1 md:grid-cols-4 gap-4">…</div>` block (the Total/Success/Warning/Failed cards) with the `SummaryStats` component at position #3.**
+```jsx
+<SummaryStats summary={summary} />
+```
+
+- [ ] **Step 6: Add the single timezone label (E7) to the "Monitor History" section header. Replace the existing header `<h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase mb-2">Monitor History</h2>` with a flex row that appends "All times in <timezone>".**
+```jsx
+<div className="mb-2 flex items-baseline justify-between gap-4">
+    <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
+        Monitor History
+    </h2>
+    {filters?.timezone ? (
+        <span className="text-xs text-gray-500">
+            All times in {filters.timezone}
+        </span>
+    ) : null}
+</div>
+```
+
+- [ ] **Step 7: Verify the build compiles the rewired page.**
+  Run: `npm run build`
+  Expected: build completes successfully; no unresolved imports and no references to the now-removed `customRange`/`submitCustomRange`/`applyRange`/`statusTotals`/`totalChecks` locals (if any remain orphaned after Phase 3, remove them — the page must compile clean).
+
+- [ ] **Step 8: Commit.**
+  Run: `git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Wire MonitorHistoryFilters and SummaryStats into Show with timezone label"`
+
+
+---
+
+## Phase 5 — Recent Checks panel (build-verified; backend covered in Phase 2)
+
+**Deliverable:** A `RecentChecksPanel` component with Uptime/Domain tabs (ARIA tablist, arrow-key nav, purple active underline), a Time/Type/Status/Message/Response(ms) table whose status cells reuse `Badge` with per-status heroicons + Title-case labels, a numbered prev/next pager driven by `recentChecks.pagination` (per_page 25), pending-aware disabled controls (`aria-busy`), row hover, and an empty state — wired into `Show.jsx` at position #4, driven entirely by the Phase 2 `recentChecks` partial-reload prop.
+
+### Task 5.1: Create `RecentChecksPanel` component
+
+**Files:**
+- Create: `resources/js/Components/RecentChecksPanel.jsx`
+
+**Interfaces:**
+- Consumes (from spine, Inertia `recentChecks` prop produced in Phase 2):
+  - `recentChecks: { type:'uptime'|'domain', data: [{ id, check_type, status, checked_at:'YYYY-MM-DD HH:mm:ss', message, failure_reason, response_time_ms }], pagination:{ current_page:int, last_page:int, per_page:int, total:int } }`
+  - `checkTypes: [{ type:'uptime'|'domain', enabled:bool }]` (cert omitted upstream)
+  - `pending: boolean`
+  - `onTabChange(type:'uptime'|'domain'): void`
+  - `onPageChange(page:int): void`
+- Consumes JS utils (Phase 1 / existing):
+  - `formatDateTimeUTC(iso) -> '27 Mar 2026, 15:00'` from `@/Utils/formatDate`
+  - `normalizeCheckStatus(status)`, `getCheckStatusBadgeColor(status)`, `getCheckStatusMeta(status)` from `@/Utils/checkStatusSeverity` (`getCheckStatusMeta(status).label` gives Title-case label: Healthy/Warning/Failed/Unknown)
+  - `Badge({ text, icon, color })` from `@/Components/Badge`
+- Produces: `export default function RecentChecksPanel({ recentChecks, checkTypes, pending, onTabChange, onPageChange })`
+
+- [ ] **Step 1: Create the file with imports and the per-status icon map.**
+```jsx
+import React, { useRef } from "react";
+import {
+    CheckCircleIcon,
+    ExclamationTriangleIcon,
+    XCircleIcon,
+    QuestionMarkCircleIcon,
+} from "@heroicons/react/24/outline";
+import Badge from "@/Components/Badge";
+import { formatDateTimeUTC } from "@/Utils/formatDate";
+import {
+    normalizeCheckStatus,
+    getCheckStatusBadgeColor,
+    getCheckStatusMeta,
+} from "@/Utils/checkStatusSeverity";
+
+const CHECK_TYPE_LABELS = {
+    uptime: "Uptime",
+    domain: "Domain",
+};
+
+const STATUS_ICONS = {
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    failed: XCircleIcon,
+    unknown: QuestionMarkCircleIcon,
+};
+
+function StatusBadge({ status }) {
+    const normalized = normalizeCheckStatus(status);
+    const Icon = STATUS_ICONS[normalized] || QuestionMarkCircleIcon;
+
+    return (
+        <Badge
+            text={getCheckStatusMeta(normalized).label}
+            color={getCheckStatusBadgeColor(normalized)}
+            icon={<Icon className="h-3.5 w-3.5" aria-hidden="true" />}
+        />
+    );
+}
+```
+
+- [ ] **Step 2: Add the `buildPageList` helper that produces the numbered pager sequence with ellipses.**
+```jsx
+function buildPageList(currentPage, lastPage) {
+    if (lastPage <= 7) {
+        return Array.from({ length: lastPage }, (_, index) => index + 1);
+    }
+
+    const pages = new Set([1, lastPage, currentPage]);
+    if (currentPage - 1 >= 1) pages.add(currentPage - 1);
+    if (currentPage + 1 <= lastPage) pages.add(currentPage + 1);
+
+    const sorted = Array.from(pages).sort((a, b) => a - b);
+    const withGaps = [];
+    let previous = 0;
+    for (const page of sorted) {
+        if (previous && page - previous > 1) {
+            withGaps.push(`gap-${previous}`);
+        }
+        withGaps.push(page);
+        previous = page;
+    }
+
+    return withGaps;
+}
+```
+
+- [ ] **Step 3: Add the tablist with arrow-key navigation.** Open the component, derive the active type from `recentChecks.type`, render a `role="tablist"` of the two `checkTypes`, each a `role="tab"` button with `aria-selected`, purple active underline, and arrow-key handler.
+```jsx
+export default function RecentChecksPanel({
+    recentChecks,
+    checkTypes,
+    pending,
+    onTabChange,
+    onPageChange,
+}) {
+    const tabRefs = useRef({});
+    const tabs = (checkTypes || []).filter(
+        (entry) => entry.type === "uptime" || entry.type === "domain"
+    );
+    const activeType = recentChecks?.type || tabs[0]?.type || "uptime";
+    const rows = recentChecks?.data || [];
+    const pagination = recentChecks?.pagination || {
+        current_page: 1,
+        last_page: 1,
+        per_page: 25,
+        total: 0,
+    };
+
+    const handleTabKeyDown = (event) => {
+        if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") {
+            return;
+        }
+        event.preventDefault();
+        const index = tabs.findIndex((entry) => entry.type === activeType);
+        const delta = event.key === "ArrowRight" ? 1 : -1;
+        const nextIndex = (index + delta + tabs.length) % tabs.length;
+        const nextType = tabs[nextIndex]?.type;
+        if (nextType) {
+            tabRefs.current[nextType]?.focus();
+            onTabChange(nextType);
+        }
+    };
+
+    return (
+        <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+            <h3 className="text-base font-semibold text-gray-900">
+                Recent Checks
+            </h3>
+
+            <div
+                role="tablist"
+                aria-label="Recent checks by check type"
+                className="mt-4 flex items-center gap-6 border-b border-gray-200"
+                onKeyDown={handleTabKeyDown}
+            >
+                {tabs.map(({ type }) => {
+                    const isActive = type === activeType;
+
+                    return (
+                        <button
+                            key={type}
+                            type="button"
+                            role="tab"
+                            id={`recent-checks-tab-${type}`}
+                            aria-selected={isActive}
+                            aria-controls="recent-checks-panel"
+                            tabIndex={isActive ? 0 : -1}
+                            ref={(node) => {
+                                tabRefs.current[type] = node;
+                            }}
+                            disabled={pending}
+                            onClick={() => {
+                                if (!isActive) {
+                                    onTabChange(type);
+                                }
+                            }}
+                            className={[
+                                "-mb-px border-b-2 px-1 pb-2 text-sm font-medium transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:rounded-sm disabled:cursor-not-allowed disabled:opacity-60",
+                                isActive
+                                    ? "border-purple-600 text-purple-700"
+                                    : "border-transparent text-gray-500 hover:text-gray-700",
+                            ].join(" ")}
+                        >
+                            {CHECK_TYPE_LABELS[type] || type}
+                        </button>
+                    );
+                })}
+            </div>
+```
+
+- [ ] **Step 4: Add the tabpanel with the table (overflow-x-auto wrapper, hover rows, right-aligned tabular-nums Response column, empty-state row).**
+```jsx
+            <div
+                role="tabpanel"
+                id="recent-checks-panel"
+                aria-labelledby={`recent-checks-tab-${activeType}`}
+                aria-busy={pending}
+                className="mt-4 overflow-x-auto"
+            >
+                <table className="min-w-full text-sm">
+                    <thead>
+                        <tr className="text-left text-gray-600 border-b border-gray-200">
+                            <th className="py-2 pr-4 font-medium">Time</th>
+                            <th className="py-2 pr-4 font-medium">Type</th>
+                            <th className="py-2 pr-4 font-medium">Status</th>
+                            <th className="py-2 pr-4 font-medium">Message</th>
+                            <th className="py-2 pl-4 font-medium text-right">
+                                Response (ms)
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.length === 0 ? (
+                            <tr>
+                                <td
+                                    className="py-4 text-gray-500"
+                                    colSpan={5}
+                                >
+                                    No checks recorded for this range.
+                                </td>
+                            </tr>
+                        ) : (
+                            rows.map((check) => (
+                                <tr
+                                    key={check.id}
+                                    className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors duration-150 motion-reduce:transition-none"
+                                >
+                                    <td className="py-2 pr-4 text-gray-700 whitespace-nowrap tabular-nums">
+                                        {formatDateTimeUTC(check.checked_at)}
+                                    </td>
+                                    <td className="py-2 pr-4 text-gray-700">
+                                        {CHECK_TYPE_LABELS[check.check_type] ||
+                                            check.check_type}
+                                    </td>
+                                    <td className="py-2 pr-4">
+                                        <StatusBadge status={check.status} />
+                                    </td>
+                                    <td className="py-2 pr-4 text-gray-700">
+                                        {check.message ||
+                                            check.failure_reason ||
+                                            "No details"}
+                                    </td>
+                                    <td className="py-2 pl-4 text-right text-gray-700 tabular-nums whitespace-nowrap">
+                                        {check.response_time_ms ?? "—"}
+                                    </td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+```
+
+- [ ] **Step 5: Add the numbered pager (prev/next + page numbers), pending-aware, closing the component.**
+```jsx
+            {pagination.last_page > 1 ? (
+                <nav
+                    aria-label="Recent checks pagination"
+                    className="mt-4 flex items-center justify-center gap-1"
+                >
+                    <button
+                        type="button"
+                        disabled={pending || pagination.current_page <= 1}
+                        onClick={() =>
+                            onPageChange(pagination.current_page - 1)
+                        }
+                        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Prev
+                    </button>
+
+                    {buildPageList(
+                        pagination.current_page,
+                        pagination.last_page
+                    ).map((page) =>
+                        typeof page === "string" ? (
+                            <span
+                                key={page}
+                                className="px-2 py-1.5 text-sm text-gray-400"
+                                aria-hidden="true"
+                            >
+                                …
+                            </span>
+                        ) : (
+                            <button
+                                key={page}
+                                type="button"
+                                aria-current={
+                                    page === pagination.current_page
+                                        ? "page"
+                                        : undefined
+                                }
+                                disabled={pending}
+                                onClick={() => onPageChange(page)}
+                                className={[
+                                    "min-w-[2.25rem] rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+                                    page === pagination.current_page
+                                        ? "border-purple-600 bg-purple-600 text-white"
+                                        : "border-gray-300 text-gray-700 hover:bg-gray-50",
+                                ].join(" ")}
+                            >
+                                {page}
+                            </button>
+                        )
+                    )}
+
+                    <button
+                        type="button"
+                        disabled={
+                            pending ||
+                            pagination.current_page >= pagination.last_page
+                        }
+                        onClick={() =>
+                            onPageChange(pagination.current_page + 1)
+                        }
+                        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Next
+                    </button>
+                </nav>
+            ) : null}
+        </div>
+    );
+}
+```
+
+- [ ] **Step 6: Verify the build.** Run:
+```
+npm run build
+```
+Expected: build completes successfully (no errors). Payload shape rendered here (`recentChecks.type`, `recentChecks.data[]`, `recentChecks.pagination`) is asserted by the Phase 2 backend feature tests in `tests/Feature/MonitorHistory/` (the recent-checks pagination + `recent_type` tab tests).
+
+- [ ] **Step 7: Commit.**
+```
+git add resources/js/Components/RecentChecksPanel.jsx && git commit -m "Add RecentChecksPanel component with tabs and numbered pagination"
+```
+
+### Task 5.2: Wire `RecentChecksPanel` into `Show.jsx` at position #4
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes (Phase 2 Inertia props): `recentChecks`, `graph` (for `graph.check_types`), and the `buildHistoryParams(current, overrides)` helper from Task 3.x.
+- Consumes the partial-visit contract (spine): Tab change → `only:['recentChecks']`, override `{ recent_type, recent_page: 1 }`; Page change → `only:['recentChecks']`, override `{ recent_page }`. Uses the existing `router.get(route('monitors.show', monitor.id), params, { only, preserveState:true, preserveScroll:true, replace:true })` pattern already in `Show.jsx`.
+- Produces: `RecentChecksPanel` rendered as the 4th history section, fed by `recentChecks`, with a local `recentPending` flag toggled on `onStart`/`onFinish`.
+
+> Note: Phase 3 introduces `buildHistoryParams` and the `current` param object derived from props, and Phase 3/4 already replace the legacy `history.*` reads with the split `graph`/`filters`/`summary`/`recentChecks` props. This task only adds the recent-checks slice; reuse the `current` object and `buildHistoryParams` exactly as established in Phase 3.
+
+- [ ] **Step 1: Import `RecentChecksPanel`.** Add the import alongside the existing `MonitorHistoryHeatmap` import near the top of `Show.jsx`.
+```jsx
+import RecentChecksPanel from "@/Components/RecentChecksPanel";
+```
+
+- [ ] **Step 2: Read the `recentChecks` prop.** In the destructure of `usePage().props`, add `recentChecks` (it already exposes `monitor`, `features`, and the Phase 3/4 split props):
+```jsx
+const { monitor, features, graph, filters, summary, recentChecks } =
+    usePage().props;
+```
+
+- [ ] **Step 3: Add a local pending flag for the recent-checks slice.** Place this with the other `useState` hooks:
+```jsx
+const [recentPending, setRecentPending] = useState(false);
+```
+
+- [ ] **Step 4: Add the tab- and page-change handlers using `buildHistoryParams` and the partial-visit contract.** Place these alongside the other history control handlers (after the Phase 3 `current`/`buildHistoryParams` wiring):
+```jsx
+const reloadRecentChecks = (overrides) => {
+    router.get(
+        route("monitors.show", monitor.id),
+        buildHistoryParams(current, overrides),
+        {
+            only: ["recentChecks"],
+            preserveState: true,
+            preserveScroll: true,
+            replace: true,
+            onStart: () => setRecentPending(true),
+            onFinish: () => setRecentPending(false),
+        }
+    );
+};
+
+const handleRecentTabChange = (type) => {
+    reloadRecentChecks({ recent_type: type, recent_page: 1 });
+};
+
+const handleRecentPageChange = (page) => {
+    reloadRecentChecks({ recent_page: page });
+};
+```
+
+- [ ] **Step 5: Replace the legacy inline Recent Checks table block with `RecentChecksPanel`.** Remove the existing `<div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm"> ... Recent Checks ... </table></div>` block (the one rendering `history.recent_checks`) and render the panel as the 4th section, passing `graph.check_types` so the tabs match the cert-omitted set:
+```jsx
+<RecentChecksPanel
+    recentChecks={recentChecks}
+    checkTypes={graph?.check_types || []}
+    pending={recentPending}
+    onTabChange={handleRecentTabChange}
+    onPageChange={handleRecentPageChange}
+/>
+```
+
+- [ ] **Step 6: Verify the build.** Run:
+```
+npm run build
+```
+Expected: build completes successfully (no errors). The wired `recentChecks` prop, its `recent_type` tab selection, and `paginate(25)` pagination are covered by the Phase 2 backend feature tests in `tests/Feature/MonitorHistory/` that assert `recentChecks.type`, `recentChecks.data`, and `recentChecks.pagination` via `assertInertia`.
+
+- [ ] **Step 7: Commit.**
+```
+git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Wire RecentChecksPanel into monitor Show page at position 4"
+```
+```
+
+Authored Phase 5 above. Relevant absolute file paths for this phase:
+- Create: `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Components/RecentChecksPanel.jsx`
+- Modify: `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Pages/Monitors/Show.jsx`
+- Plan being appended to: `/Users/vaibhav/projects/coloredcow/monitor/plans/2026-06-25-monitor-history-ui-enhancements-plan.md`
+
+Notes carried from source review that shaped the tasks: `Badge` accepts `{ text, icon, color }` and renders the icon inline before the text, so the per-status heroicon is passed via the `icon` prop; `getCheckStatusMeta(status).label` already yields the Title-case labels (Healthy/Warning/Failed/Unknown) so no separate label map is needed; heroicons are imported from `@heroicons/react/24/outline` (matching the codebase convention); the existing `Show.jsx` `router.get` call uses `preserveState/preserveScroll/replace`, which the new partial-visit handlers extend with `only: ['recentChecks']` plus `onStart`/`onFinish` pending toggling. The current `MonitorHistoryShowTest.php` asserts the legacy `history.recent_checks`/`history.daily_metrics` shape — those assertions are migrated to the `recentChecks` prop in Phase 2, which is why Phase 5 is build-verified and references (does not author) those backend tests.
+
+
+---
+
+## Phase 6 — Header, live status & polish (build-verified)
+
+**Deliverable:** Show.jsx header has Back inline-left and a `MonitorLiveStatus` pill near the URL; the page applies a consistent 2-tier header system, a flattened (border-divided) History card, a compact lower-emphasis Monitor Snapshot strip, and disabled check types collapsed to one slim muted line; every new transition carries `motion-reduce` variants, all chrome text is `gray-600`+, and all interactive controls have `focus-visible` rings.
+
+### Task 6.1: Create `MonitorLiveStatus` (E1) live-status pill
+
+**Files:**
+- Create: `resources/js/Components/MonitorLiveStatus.jsx`
+- Test (covering payload): `tests/Feature/MonitorHistory/MonitorHistoryShowTest.php` (existing — `monitor` model fields `uptime_status`, `uptime_last_check_date`, `uptime_check_failure_reason` already serialized by `show()`; no new backend test required)
+
+**Interfaces:**
+- Consumes (spine): `MonitorLiveStatus({ monitor })` — `monitor.uptime_status`, `monitor.uptime_last_check_date`, `monitor.uptime_check_failure_reason`.
+- Consumes (spine): `mapUptimeStatusToCheckStatus(uptimeStatus)`, `CHECK_STATUS`, `getCheckStatusMeta(status)` from `@/Utils/checkStatusSeverity`; `formatRelative(iso, nowMs)` from `@/Utils/formatDate` (Phase 1).
+- Produces: default-exported React component rendering a UP/DOWN/PENDING pill + `last checked X ago` + inline failure reason when down.
+
+- [ ] **Step 1: Create the component file with imports and the pill-label/severity mapping.**
+```jsx
+import React from "react";
+import {
+    CHECK_STATUS,
+    getCheckStatusMeta,
+    mapUptimeStatusToCheckStatus,
+} from "@/Utils/checkStatusSeverity";
+import { formatRelative } from "@/Utils/formatDate";
+
+// Maps the raw monitor.uptime_status string to the user-facing live pill label.
+// Anything that is not a definite up/down is shown as PENDING (e.g. "not yet checked").
+const LIVE_STATUS_LABELS = {
+    [CHECK_STATUS.SUCCESS]: "UP",
+    [CHECK_STATUS.FAILED]: "DOWN",
+    [CHECK_STATUS.WARNING]: "PENDING",
+    [CHECK_STATUS.UNKNOWN]: "PENDING",
+};
+
+// Solid dot + soft pill background per severity, reusing the locked status palette.
+const LIVE_STATUS_PILL = {
+    [CHECK_STATUS.SUCCESS]: "bg-green-50 text-green-700 border-green-200",
+    [CHECK_STATUS.FAILED]: "bg-red-50 text-red-700 border-red-200",
+    [CHECK_STATUS.WARNING]: "bg-yellow-50 text-yellow-700 border-yellow-200",
+    [CHECK_STATUS.UNKNOWN]: "bg-gray-50 text-gray-600 border-gray-200",
+};
+
+const LIVE_STATUS_DOT = {
+    [CHECK_STATUS.SUCCESS]: "bg-green-500",
+    [CHECK_STATUS.FAILED]: "bg-red-500",
+    [CHECK_STATUS.WARNING]: "bg-yellow-400",
+    [CHECK_STATUS.UNKNOWN]: "bg-gray-300",
+};
+```
+
+- [ ] **Step 2: Add the component body — pill, relative last-checked text, and down-only failure reason.**
+```jsx
+export default function MonitorLiveStatus({ monitor }) {
+    const severity = mapUptimeStatusToCheckStatus(monitor?.uptime_status);
+    const label = LIVE_STATUS_LABELS[severity] || "PENDING";
+    const isDown = severity === CHECK_STATUS.FAILED;
+
+    const lastChecked = monitor?.uptime_last_check_date
+        ? formatRelative(monitor.uptime_last_check_date, Date.now())
+        : null;
+
+    const failureReason = isDown ? monitor?.uptime_check_failure_reason : null;
+
+    return (
+        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+            <span
+                className={[
+                    "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5",
+                    "text-xs font-semibold tracking-wide",
+                    LIVE_STATUS_PILL[severity] || LIVE_STATUS_PILL[CHECK_STATUS.UNKNOWN],
+                ].join(" ")}
+            >
+                <span
+                    aria-hidden="true"
+                    className={[
+                        "h-2 w-2 rounded-full",
+                        LIVE_STATUS_DOT[severity] || LIVE_STATUS_DOT[CHECK_STATUS.UNKNOWN],
+                    ].join(" ")}
+                />
+                {label}
+            </span>
+
+            {lastChecked ? (
+                <span className="text-xs text-gray-600 tabular-nums">
+                    last checked {lastChecked}
+                </span>
+            ) : null}
+
+            {failureReason ? (
+                <span className="text-xs font-medium text-red-700">
+                    {failureReason}
+                </span>
+            ) : null}
+        </div>
+    );
+}
+```
+
+- [ ] **Step 3: Verify the build.** Run:
+```
+npm run build
+```
+Expected: `built successfully` (Vite completes with no errors). The `monitor` fields this renders (`uptime_status`, `uptime_last_check_date`, `uptime_check_failure_reason`) are already serialized in the `monitors.show` payload, covered by the existing `MonitorHistoryShowTest` payload assertions; no new feature test is required.
+
+- [ ] **Step 4: Commit.** Run:
+```
+git add resources/js/Components/MonitorLiveStatus.jsx && git commit -m "Add MonitorLiveStatus live-status pill (E1)"
+```
+
+### Task 6.2: Move Back inline-left and mount `MonitorLiveStatus` in the header (Change 8)
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes (spine): `MonitorLiveStatus({ monitor })` (Task 6.1); locked decision **Back inline-left of title**.
+- Produces: a left-aligned header (no `justify-between`) where the Back link sits to the left of the name/URL block, and the live-status pill renders beneath the URL.
+
+- [ ] **Step 1: Add the `MonitorLiveStatus` import alongside the existing component imports in `Show.jsx`.** Insert directly after the `MonitorHistoryHeatmap` import:
+```jsx
+import MonitorLiveStatus from "@/Components/MonitorLiveStatus";
+```
+
+- [ ] **Step 2: Replace the entire `PageHeader` block** (the `<PageHeader>…</PageHeader>` element, currently the `flex items-center justify-between` layout with Back on the right) with a left-aligned layout placing Back first and the live pill under the URL:
+```jsx
+            <PageHeader>
+                <div className="flex items-start gap-4">
+                    <Link
+                        href={route("monitors.index")}
+                        className="mt-1 inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors duration-150 ease-out hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 motion-reduce:transition-none"
+                    >
+                        <ArrowLeftIcon className="h-4 w-4" />
+                        Back
+                    </Link>
+                    <div className="min-w-0">
+                        <h1 className="text-2xl font-bold text-gray-900 tracking-tight">
+                            {monitor.name}
+                        </h1>
+                        <div className="mt-1 flex items-center gap-1 text-sm text-gray-600">
+                            <span className="truncate max-w-[35rem]">
+                                {monitor.raw_url}
+                            </span>
+                            <a
+                                href={monitor.raw_url}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="rounded text-gray-600 transition-colors duration-150 ease-out hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 motion-reduce:transition-none"
+                                title="Open monitor URL"
+                            >
+                                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+                            </a>
+                        </div>
+                        <MonitorLiveStatus monitor={monitor} />
+                    </div>
+                </div>
+            </PageHeader>
+```
+
+- [ ] **Step 3: Verify the build.** Run:
+```
+npm run build
+```
+Expected: `built successfully`. Header now renders Back to the left of the name/URL block with no `justify-between`, and the live pill below the URL.
+
+- [ ] **Step 4: Commit.** Run:
+```
+git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Move Back inline-left and mount MonitorLiveStatus in header (Change 8)"
+```
+
+### Task 6.3: Compact lower-emphasis Monitor Snapshot strip (E9)
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes (spine): 2-tier header system (quiet uppercase eyebrow), `gray-600`+ chrome contrast, status palette unchanged.
+- Produces: the Monitor Snapshot rendered as a single slim card (reduced padding, eyebrow label, inline icon row) instead of a full-height KPI-style card.
+
+- [ ] **Step 1: Replace the Monitor Snapshot card** (the `<div className="bg-white rounded-xl p-6 …">` containing the `Monitor Snapshot` heading and the icon row) with a compact strip using the quiet uppercase eyebrow and tighter padding:
+```jsx
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-gray-200 bg-white px-5 py-3 shadow-sm">
+                    <span className="text-xs font-semibold uppercase tracking-wide text-gray-600">
+                        Snapshot
+                    </span>
+                    <div className="flex items-center gap-2.5 flex-wrap">
+                        <MonitorUptimeIcon monitor={monitor} />
+                        <MonitorCheckIntervalIcon monitor={monitor} />
+                        <MonitorDomainIcon monitor={monitor} />
+                    </div>
+                </div>
+```
+
+- [ ] **Step 2: Verify the build.** Run:
+```
+npm run build
+```
+Expected: `built successfully`. Snapshot now renders as a single compact horizontal strip with an inline eyebrow label.
+
+- [ ] **Step 3: Commit.** Run:
+```
+git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Make Monitor Snapshot a compact lower-emphasis strip (E9)"
+```
+
+### Task 6.4: 2-tier headers + flatten History card with border-t dividers (E9)
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes (spine): 2-tier header system — loud dark section titles (`text-lg font-semibold text-gray-900`) vs quiet uppercase eyebrows (`text-xs font-semibold uppercase tracking-wide text-gray-600`); `gray-600`+ chrome contrast.
+- Produces: the History card with a single loud section title, and its inner blocks (graphs section, filters/summary section, recent checks section) separated by `border-t` dividers instead of nested card-in-card wrappers.
+
+- [ ] **Step 1: Promote the History card heading to a loud Tier-1 section title.** Replace the existing `Monitor History` heading line:
+```jsx
+                    <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase mb-2">
+                        Monitor History
+                    </h2>
+```
+with:
+```jsx
+                    <h2 className="text-lg font-semibold text-gray-900 mb-4">
+                        Monitor History
+                    </h2>
+```
+
+- [ ] **Step 2: Flatten the enabled-history block to border-divided sections.** Replace the outer `<div className="space-y-6">` that wraps the filters block, summary block, heatmaps, and recent-checks block with a divider-based container so the child sections (composed in Phases 3–5) are separated by top borders rather than each living in its own card. Change the opening wrapper:
+```jsx
+                        <div className="space-y-6">
+```
+to:
+```jsx
+                        <div className="divide-y divide-gray-200 [&>*]:py-6 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+```
+
+- [ ] **Step 3: Update the contrast on the two disabled/empty history messages** (the `History view is disabled.` and `History is enabled, but no history payload…` paragraphs). Change each `text-sm text-gray-600` — they are already `gray-600`, so confirm no `gray-500`/`gray-400` remains. If either still reads `text-gray-500`, replace it with `text-gray-600`. (No structural change; contrast confirmation only.)
+
+- [ ] **Step 4: Verify the build.** Run:
+```
+npm run build
+```
+Expected: `built successfully`. The History card shows one loud title; its inner sections are separated by `border-t` dividers with consistent vertical padding and no card-in-card nesting.
+
+- [ ] **Step 5: Commit.** Run:
+```
+git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Apply 2-tier headers and flatten History card with dividers (E9)"
+```
+
+### Task 6.5: Collapse disabled check types into one slim muted line (E9)
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+
+**Interfaces:**
+- Consumes (spine): `check_types` array `[{type:'uptime'|'domain', enabled}]` (cert omitted); `MonitorHistoryHeatmap({ checkType, title, description, year, points, todayIso })`; `formatCheckTypeLabel(checkType)` (existing local helper in `Show.jsx`).
+- Produces: enabled check types render full heatmaps; all disabled check types collapse into a single slim muted line instead of one dashed card per type.
+
+- [ ] **Step 1: Replace the `checkTypes.map(...)` graphs block** — the segment that currently renders a `MonitorHistoryHeatmap` when enabled and a dashed `border-dashed` card when disabled — with: render the enabled types as heatmaps, then a single muted summary line for the disabled ones. Use this structure (the heatmap props match the Phase-3 contract; the surrounding `graph`/`series` props are wired by Phase 3 — keep whatever enabled-branch props Phase 3 already produced and only replace the *disabled* branch handling):
+```jsx
+                            {checkTypes
+                                .filter(({ enabled }) => enabled)
+                                .map(({ type }) => (
+                                    <MonitorHistoryHeatmap
+                                        key={type}
+                                        checkType={type}
+                                        title={`${formatCheckTypeLabel(type)} Health`}
+                                        year={graph?.year}
+                                        points={graph?.series?.[type]?.daily_metrics || []}
+                                        todayIso={todayIso}
+                                    />
+                                ))}
+
+                            {checkTypes.some(({ enabled }) => !enabled) ? (
+                                <p className="text-xs text-gray-600">
+                                    {checkTypes
+                                        .filter(({ enabled }) => !enabled)
+                                        .map(({ type }) => formatCheckTypeLabel(type))
+                                        .join(", ")}{" "}
+                                    {checkTypes.filter(({ enabled }) => !enabled)
+                                        .length === 1
+                                        ? "check is"
+                                        : "checks are"}{" "}
+                                    not enabled for this monitor.
+                                </p>
+                            ) : null}
+```
+
+- [ ] **Step 2: Confirm `todayIso` and `graph` are in scope.** If Phase 3 already derives `const graph = usePage().props.graph` (and a `todayIso`), reuse them verbatim. If Phase 3 named the today value differently, substitute that exact name in Step 1. Do not introduce a new derivation if one already exists.
+
+- [ ] **Step 3: Verify the build.** Run:
+```
+npm run build
+```
+Expected: `built successfully`. Disabled check types now render as a single muted `text-xs text-gray-600` line rather than full dashed cards. The `check_types` enabled flags this reads are asserted by `test_payload_advertises_each_check_type_with_its_enabled_flag` in `MonitorHistoryShowTest`.
+
+- [ ] **Step 4: Commit.** Run:
+```
+git add resources/js/Pages/Monitors/Show.jsx && git commit -m "Collapse disabled check types into one slim muted line (E9)"
+```
+
+### Task 6.6: Final motion-reduce, contrast & focus-visible polish pass
+
+**Files:**
+- Modify: `resources/js/Pages/Monitors/Show.jsx`
+- Modify: `resources/js/Components/MonitorHistoryHeatmap.jsx`
+
+**Interfaces:**
+- Consumes (spine Global Constraints): every transition carries `motion-reduce:transition-none motion-reduce:transform-none`; chrome text min `gray-600`; `focus-visible` rings on all interactive elements; status palette unchanged.
+- Produces: all new/edited transitions guarded for reduced motion, no remaining `gray-400`/`gray-500` chrome text, and focus rings on every interactive control touched in Phase 6.
+
+- [ ] **Step 1: Guard the heatmap cell transition for reduced motion.** In `MonitorHistoryHeatmap.jsx`, the cell `className` includes `transition-transform`. Replace that token:
+```jsx
+                                                "h-3.5 w-3.5 rounded-sm border transition-transform",
+```
+with:
+```jsx
+                                                "h-3.5 w-3.5 rounded-sm border transition-transform duration-150 ease-out motion-reduce:transition-none motion-reduce:transform-none",
+```
+
+- [ ] **Step 2: Bump the heatmap weekday-label contrast.** In `MonitorHistoryHeatmap.jsx`, the weekday labels use `text-gray-400`. Replace:
+```jsx
+                                className="h-3.5 text-[10px] text-gray-400 leading-3"
+```
+with:
+```jsx
+                                className="h-3.5 text-[10px] text-gray-600 leading-3"
+```
+
+- [ ] **Step 3: Bump the heatmap legend contrast.** In `MonitorHistoryHeatmap.jsx`, the legend wrapper uses `text-gray-500`. Replace:
+```jsx
+            <div className="mt-4 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-500">
+```
+with:
+```jsx
+            <div className="mt-4 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600">
+```
+
+- [ ] **Step 4: Add a reduced-motion policy note above the heatmap component.** Insert this comment directly above `export default function MonitorHistoryHeatmap({` in `MonitorHistoryHeatmap.jsx`:
+```jsx
+// Reduced-motion policy: this component animates only via CSS transitions, each of
+// which carries `motion-reduce:transition-none motion-reduce:transform-none`. There is
+// no JS-driven animation here, so no `matchMedia('(prefers-reduced-motion: reduce)')`
+// gate is required — the CSS variants fully satisfy the prefers-reduced-motion contract.
+```
+
+- [ ] **Step 5: Sweep `Show.jsx` for residual low-contrast chrome text.** Run a check for any remaining `text-gray-400` or `text-gray-500` chrome (label/caption) classes that Phase 6 edits left behind:
+```
+grep -nE "text-gray-(400|500)" /Users/vaibhav/projects/coloredcow/monitor/resources/js/Pages/Monitors/Show.jsx
+```
+Expected: no output. If any line is reported, replace its `text-gray-400`/`text-gray-500` with `text-gray-600` via an Edit so the constraint (chrome text min `gray-600`) holds, then re-run the grep until it returns nothing.
+
+- [ ] **Step 6: Verify the build.** Run:
+```
+npm run build
+```
+Expected: `built successfully`. The heatmap cell transition is reduced-motion guarded, weekday/legend chrome is `gray-600`, and `Show.jsx` has no sub-`gray-600` chrome text remaining.
+
+- [ ] **Step 7: Commit.** Run:
+```
+git add resources/js/Pages/Monitors/Show.jsx resources/js/Components/MonitorHistoryHeatmap.jsx && git commit -m "Final motion-reduce, contrast and focus-visible polish pass"
+```
+
+Files referenced (all absolute): `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Components/MonitorLiveStatus.jsx` (created), `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Pages/Monitors/Show.jsx`, `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Components/MonitorHistoryHeatmap.jsx`, `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/checkStatusSeverity.js`, `/Users/vaibhav/projects/coloredcow/monitor/resources/js/Utils/formatDate.js` (Phase 1), `/Users/vaibhav/projects/coloredcow/monitor/tests/Feature/MonitorHistory/MonitorHistoryShowTest.php`.
+
+Note for the plan integrator: Tasks 6.4 and 6.5 assume the Phase 3–5 structure (e.g. `graph`/`series` derivation, `todayIso`, the `RecentChecksPanel`/`SummaryStats`/`MonitorHistoryFilters` sections living inside the History card). The disabled-branch and divider edits target the post-Phase-5 `Show.jsx`; if Phase 3 named the today value or `graph` prop differently, substitute that exact name in Task 6.5 Step 1/2.
+
diff --git a/plans/monitor-history-ui-enhancements-spec.md b/plans/monitor-history-ui-enhancements-spec.md
new file mode 100644
index 0000000..3d6eb22
--- /dev/null
+++ b/plans/monitor-history-ui-enhancements-spec.md
@@ -0,0 +1,167 @@
+# Monitor History — UI Enhancements Spec
+
+Status: **DRAFT for review** (no code written yet). Source of requirements: `UI_CHANGES_LOG.md` (changes 1–8) + UI/UX design review (ui-ux-pro-max) + 5-lens enhancement review of the existing UI.
+
+Scope: the monitor **detail page** (`resources/js/Pages/Monitors/Show.jsx`), the heatmap (`resources/js/Components/MonitorHistoryHeatmap.jsx`), status helpers (`resources/js/Utils/checkStatusSeverity.js`), a new today-bar + tooltip + tabs components, and `MonitorsController@show` (payload restructure).
+
+Design direction (from ui-ux-pro-max): **data-dense operations dashboard** — status palette green/yellow/orange/red, indigo/purple brand accent, gray neutrals; tabular figures for numbers; WCAG AA; hover tooltips + row-hover; skeletons for async; numeric legend with labels.
+
+---
+
+## A. Cross-cutting design foundations (apply everywhere)
+
+1. **Status colors (unchanged):** healthy `green-300/500/700`, warning `yellow-300`/`orange-400`, failed `red-300/500/700`, no-checks `gray-100`, unknown `gray-300`. Single source of truth in `checkStatusSeverity.js`.
+2. **Brand accent:** indigo/purple (existing `purple-600` active state) for selected/active/today affordances.
+3. **Numbers:** `tabular-nums` on every count, ratio, latency, and timestamp so digits don't jitter and columns align.
+4. **Motion:** transitions 150ms ease-out; gate every transition/skeleton behind `motion-reduce:*` (and `matchMedia` for any JS animation).
+5. **Async feedback:** all Inertia partial reloads (year nav, tab switch, pagination, filter apply) set a local pending flag → dim/disable controls + `aria-busy`; show a skeleton if the wait exceeds ~300ms. Never show stale data as live.
+6. **Accessibility baseline:** contrast ≥4.5:1 (bump `gray-400` chrome text to `gray-600/700`); never color-alone (add text/icon/aria); `focus-visible` rings on all interactive elements; keyboard reachable.
+7. **Headers — 2-tier system:** loud dark title (`text-base font-semibold text-gray-900`) for true sections; quiet uppercase eyebrow (`text-sm font-semibold uppercase text-gray-500`) for sub-blocks. Fix the current inversion where "Recent Checks" outweighs its parent "Monitor History".
+
+---
+
+## B. Target layout (Monitor History card)
+
+Per Change 5, reorder and decouple. Flatten one card level (avoid card-in-card-in-card; use header + `border-t` dividers between blocks):
+
+```
+PageHeader:  [← Back]  Expiring Domain                         (Change 8: all left-aligned)
+             https://… ↗   [live status pill + last-checked]   (enhancement E1, optional)
+
+Monitor Snapshot   (compact strip — de-emphasized vs History)
+
+Monitor History
+ ├─ 1. GRAPHS  (NOT filter-driven)
+ │     • year nav  ‹ 2026 ›   (async; bounded earliest-data-year … current year)
+ │     • per chart type (uptime, domain[, cert]):
+ │         – per-type headline:  "Uptime · 99.2% · 1,440 checks"   (enhancement E2)
+ │         – today bar (Change 6a): thin per-check segments, most-recent-that-fit
+ │         – full calendar-year heatmap (Change 4b/5): Jan→Dec, every day incl. future,
+ │           month labels on X, weekday labels on Y, today highlighted (6b)
+ │         – per-metric legend (Change 3)
+ ├─ 2. FILTERS  (Change 1: pills + From/To + Apply on one row, matched heights)
+ ├─ 3. TOTAL COUNTS  (filter-driven; lead with Reliability % — E2)
+ └─ 4. RECENT CHECKS  (filter-driven; tabs + pagination — Change 2)
+```
+
+---
+
+## C. Requested changes (1–8) — detailed spec
+
+### Change 1 — Inline filter row
+- One row: `[7d][30d][All]  From [date] To [date]  [Apply]`. Wraps gracefully < ~640px.
+- **Match heights:** all controls `h-9` (36px) to match the quick-filter pills (currently the date inputs are taller). Compact padding `px-3`.
+- Presets are a **segmented toggle**: `aria-pressed`, `focus-visible` ring (`ring-2 ring-purple-500`), `hover`/`active:scale-[0.97]`, `transition-colors 150ms`.
+- Date inputs: branded focus ring (`focus:ring-2 focus:ring-purple-500/40`), `max=<today>`.
+- Filters drive **only** totals + recent checks (see Change 5).
+
+### Change 2 — Recent Checks: tabs + pagination
+- **Tabs:** Uptime / Domain (+ Certificate only if cert becomes real — see §F). Accessible: `role=tablist/tab/tabpanel`, `aria-selected`, arrow-key nav, active underline in brand accent.
+- **Pagination:** server-side via Laravel paginator, fetched with Inertia partial reload (`only:['recentChecks']`, `preserveState`, `preserveScroll`). **Default page size 25** (proposed). Style: **numbered pager** with prev/next (proposed) — or "Load more" (open decision Q1).
+- Query params: `recent_type=<uptime|domain>&recent_page=<n>` (independent of graph `year`).
+- Table polish: `overflow-x-auto` wrapper; row `hover:bg-gray-50`; **add right-aligned `Response (ms)` column** (`tabular-nums`; data already shipped — E5); status badges get a heroicon + Title-case label (E-a11y).
+
+### Change 3 — Per-metric legends
+- Add a per-check-type applicable-status map in `checkStatusSeverity.js`:
+  - `uptime → [success, failed, unknown]`, `domain → [success, warning, failed, unknown]`, `certificate → [success, failed, unknown]`.
+- Heatmap + today-bar legends filter to the applicable set (always include "No checks"). **Uptime & Certificate drop Warning.** `getCellClasses` unchanged (impossible colors never render).
+- Legend a11y: text contrast `gray-600+`; each swatch carries a text label (already does).
+
+### Change 4a — Human-readable dates (UTC)
+- Shared `formatDate(iso)` → `27 Mar 2026` and `formatDateTime(iso)` → `27 Mar 2026, 15:00` via `Intl.DateTimeFormat` with **`timeZone: 'UTC'`** (must stay UTC — browser-local reintroduces the off-by-one bug). `tabular-nums`.
+- Apply to heatmap header range, tooltips, and the Recent Checks `Time` column.
+
+### Change 4b — Month X-axis labels (GitHub-style)
+- Month labels row above the week columns, each aligned to the first week-column that contains that month's day-1. Weekday labels stay on Y (contrast bumped to `gray-600`).
+- Compute month→column from the year grid; skip a label if a month's column would collide with the previous (< ~3 columns apart).
+
+### Change 5 — Decouple graphs from filters; full calendar-year + year nav
+- **Graphs are not filter-driven.** Default = **current calendar year** (Jan 1 – Dec 31).
+- **Full-year grid:** render **every day Jan→Dec including future dates**; no-check days (past gaps and all future days) use the gray "No checks" color — never transparent/omitted. Always 365/366 cells.
+- **Year nav:** prev/next arrows, bounded `[earliest-data-year … current year]` (disable beyond). Async via Inertia partial reload (`only:['graph']`, `preserveState`, `preserveScroll`). One control governs all charts.
+- **Responsive fit (no scroll at width):** week-columns flex to fill the container (cell size derived from available width, capped to a sensible max). Below a min cell size, wrap the grid in `overflow-x-auto` so it scrolls only on small screens.
+- **Layout order:** Graphs → Filters → Totals → Recent Checks.
+
+### Change 6 — Per-check "today" bar + highlight today
+- **6a Today bar (all chart types):** thin vertical segments, one per check, colored by status via `CHECK_STATUS_META[*].heatmapClass`. Shows today's checks; if more than fit, the **most recent X that fit** the row width (responsive). Per-segment tooltip (Change 7). Per-metric legend reused. Domain/cert (daily) will typically show one segment — accepted.
+- **6b Highlight today in grid:** indigo **ring/outline** on today's cell (so the status fill still reads through) + a **"Today"** legend entry. Only when the displayed year === current year. Mark today as **provisional** in its tooltip ("Today — partial, updates on next aggregation") since daily metrics are aggregated hourly (E-state).
+- Backend: today's raw checks per type (capped ~200), in the graph payload, independent of filters.
+
+### Change 7 — Styled hover/focus tooltips
+- One reusable `Tooltip` (hover **and** keyboard focus; positioned div; `role=tooltip`). Replaces the native `title` on heatmap cells and powers the thin today-bar segments (native `title` can't target few-px segments).
+- **Per-day cell:** human-readable date, day status label, total/success/warning/failed counts, success ratio, avg/p95 — render "not measured" when null and **fix the `0ms` falsy bug** (use explicit null checks, not truthiness).
+- **Per-check segment:** date+time, status, message, response time, failure reason (if failed).
+- Reuse `CHECK_STATUS_META` labels/colors + shared UTC formatter.
+
+### Change 8 — Back button left
+- Drop `justify-between`; place **Back inline to the left** of the name/URL block; whole header left-aligned, nothing pinned right. (Alt: "← Back" breadcrumb above the title — open decision Q4.)
+
+---
+
+## D. Backend / architecture changes (`MonitorsController@show`)
+
+1. **Split graph vs filter data.** Restructure the Inertia payload so partial reloads can target each independently (`only:` works at prop granularity). Proposed top-level props:
+   - `graph` = `{ year, available_years, check_types[], per_type: { daily_metrics[], today_checks[], summary } }` (driven by `year`, full calendar year).
+   - `filters` = the resolved range; `summary` = filter-range totals (+ all-time + by-type); `recentChecks` = paginated, tab-filtered.
+2. **New query params:** `year` (default current year, UTC-resolved like the existing timezone handling) for the graph; `recent_type` + `recent_page` for the table; existing `preset/from/to` for filters.
+3. **`available_years`:** min(checked_at) year … current year, to bound year nav.
+4. **Recent checks → `paginate(25)`** (new pattern for the repo; the only Laravel paginator usage).
+5. Surface already-computed-but-dropped data (no new queries): `summary.selected_range.success_ratio`, `summary.all_time`, `summary.by_type`, `recent_checks[].response_time_ms`, `uptime_check_failure_reason`.
+
+---
+
+## E. Recommended additional enhancements (beyond your 8 — opt in/out)
+
+Curated from the 5-lens review. Grouped by tier. The recurring theme: **most of these surface data the backend already computes but the UI drops** → high value, low effort.
+
+### Tier 1 — Strongly recommended (low effort, mostly "show what we already compute")
+- **E1. Live status hero.** UP/DOWN/PENDING pill + "last checked 2m ago" in the header; show `uptime_check_failure_reason` inline when DOWN. Answers "is it up right now?" (data already on `monitor`).
+- **E2. Reliability % as the lead KPI.** Promote `success_ratio` to the primary card ("Reliability 99.4% · last 30 days"), demote raw counts to a supporting row; add per-type headline on each heatmap ("Uptime · 99.2% · 1,440 checks"). Add a small "all-time 98.7%" comparison (`summary.all_time`, currently ignored).
+- **E3. Response (ms) column + range latency.** Add the column to Recent Checks (data shipped, dropped) and an "Avg 312ms / P95 540ms" figure near the uptime heatmap.
+- **E4. Unknown-status reconciliation.** Counts currently don't add up to Total when any check is `unknown`. Add an Unknown card or "Total N (incl. X unknown)".
+- **E5. Empty-state disambiguation.** Distinguish "never monitored" from "no checks in this range"; when range is empty but all-time has data, show "No checks in this range — [View All Time]" with the first-check date.
+- **E6. A11y must-haves on the heatmap.** Non-color channel (per-cell `aria-label` with status + glyph/pattern option), keyboard-focusable cells with focus ring + focus-triggered tooltip, a visually-hidden per-heatmap summary ("X healthy, Y warning, Z failed, N no-check days"), `role=grid` semantics, contrast bumps, `aria-pressed` on presets.
+- **E7. Timezone label made explicit.** One clear "All times in <tz>" label on the history header / Time column (currently buried in each heatmap description).
+- **E8. Micro-interaction polish.** Real cell hover lift/ring (the `transition-transform` is dead code today), row hover, button hover/active/focus states, reduced-motion policy.
+- **E9. Visual hierarchy cleanups.** 2-tier headers; flatten nested cards (dividers, not card-in-card); de-emphasize disabled-check placeholders to a slim muted line; make Snapshot a compact strip vs the dominant History section.
+
+### Tier 2 — Higher value, higher effort (opt-in)
+- **E10. SSL/cert + domain expiry countdown badges** in Snapshot ("SSL valid 42 days", red < 7). (Cert depends on §F.)
+- **E11. Outage timeline.** "Last outage: 3 days ago (12m)", "Longest outage", "Incidents: N" — needs server-side derivation from `checkLogs` status transitions. Highest-value net-new for incident review.
+- **E12. Uptime/downtime streak.** "Operational for 14 days" / "Down 8m" next to the live-status pill.
+- **E13. Custom-range validation feedback.** `max=today`, `from<=to`, and an inline "Adjusted to <from>–<to>" note when the server clamps/swaps (today it silently changes the inputs).
+- **E14. CSV export** of the range's checks (deferred unless wanted).
+
+---
+
+## F. Important finding — certificate check is dead UI
+
+`certificate_check_enabled` is **never written** by `store`/`update`, and the create/edit forms expose only Uptime + Domain toggles. So for real user monitors the certificate heatmap/tab/today-bar always render "not enabled."
+**Recommendation / decision (Q5):** either (a) wire a Certificate toggle into the form + controller (small, makes cert real and unlocks E10), or (b) drop certificate from the tabs/today-bar/graphs for now and only render it if a monitor actually has it enabled. Until decided, cert-specific UI (Change 2 tab, Change 6 bar, Change 3 legend) stays dormant.
+
+---
+
+## G. Open decisions to confirm
+
+- **Q1.** Recent Checks pagination: numbered pager (proposed) vs "Load more"/infinite. Page size 25 ok?
+- **Q2.** Recent Checks tabs: Uptime + Domain only, or include Certificate (see §F)?
+- **Q3.** Change 4a date format: `27 Mar 2026` (proposed) vs `Mar 27, 2026` vs other?
+- **Q4.** Change 8: Back inline-left of the title (proposed) vs "← Back" breadcrumb above it?
+- **Q5.** Certificate (§F): wire it up, or defer/hide cert UI?
+- **Q6.** Which Tier-1 / Tier-2 enhancements to include in this pass? (Tier-1 are cheap, high-value; recommend taking all of Tier-1.)
+
+---
+
+## H. Proposed implementation phases (after approval)
+
+Branch off `main` first. Each phase verified (build + targeted tests where backend logic changes).
+
+1. **Foundations:** `checkStatusSeverity.js` per-type status map; shared UTC date formatters; reusable `Tooltip`; status→color/label helpers. (Changes 3, 4a, 7 groundwork)
+2. **Backend payload split:** `graph` vs `filters/summary/recentChecks`; `year` + `available_years`; recent-checks `paginate` + `recent_type`; surface dropped fields. Tests for the new payload shape + pagination + year scoping. (Change 5, 2 backend; E2–E5 data)
+3. **Graphs section:** full-year responsive heatmap, month axis, today highlight, today bar, per-metric legend, tooltips, year nav. (Changes 4b, 5, 6, 3, 7)
+4. **Filters + Totals:** inline filter row, decoupled from graph; reliability-led KPI cards; unknown reconciliation; empty states. (Changes 1; E2, E4, E5)
+5. **Recent Checks:** tabs + pagination + response column + row hover + badge icons (async partial reloads). (Change 2; E3)
+6. **Header + polish:** Back button left, live-status hero, snapshot/hierarchy cleanup, a11y pass, micro-interactions, reduced-motion, timezone label. (Change 8; E1, E6–E9)
+7. **(Optional Tier 2):** cert wiring/decision, outage timeline, streak, custom-range validation.
+
+Frontend verified via `npm run build` (no JS test runner); backend via `php artisan test` against `monitor_test`.
diff --git a/plans/monitor-history-ui-fixes-spec.md b/plans/monitor-history-ui-fixes-spec.md
new file mode 100644
index 0000000..7490d8a
--- /dev/null
+++ b/plans/monitor-history-ui-fixes-spec.md
@@ -0,0 +1,68 @@
+# Monitor History — Recent-checks strip redesign + heatmap/tooltip polish (spec)
+
+Rewritten from scratch. Branch: `feat/monitor-history-ui` (PR #81). Produced via superpowers brainstorming + the ui-ux-pro-max tool. Frontend + one small backend change. No change to the feature flag or the filter-driven `summary`/`recentChecks` table.
+
+## Status / context
+
+Round 1 of review fixes is already implemented and pushed (commits …`68d7936`): tooltip portal, per-metric heatmap tooltip, per-metric legend, **solid-indigo today cell**, heatmap hover-clip padding, prominent per-type headline stat, and single-solid-color domain/certificate cells.
+
+Several round-2 reports are artifacts of a build not yet pulled/rebuilt, and are **already addressed** by round 1 — documented here for completeness, to be re-verified after rebuild (Node 22):
+
+- The "shadow on hover" on a today bar (item 1) was the **old tooltip being clipped** by the strip's `overflow-hidden`; the round-1 Tooltip portal fix renders it to `<body>` instead. We additionally remove the bar's odd `hover:scale-y-110` grow (below).
+- Tooltips on the strip bars (item 2) **already exist** (date+time via `formatDateTimeUTC`, status, message, response, failure) — they were just invisible behind `overflow-hidden`. Now visible via the portal.
+- Today's heatmap cell showing green-with-a-ring (item 5) is pre-round-1; it is now **solid indigo**.
+
+The genuinely new work this round is the **strip behavior (item 4)** plus a relabel and a color-consistency pass.
+
+## Confirmed decisions (item 4 + related)
+
+- **Window:** rolling **last 50 checks** per check type, **may span days**, newest on the right.
+- **Capacity:** **responsive** — as many fixed-width slots as fit the container, capped at 50. Unfilled capacity is gray-padded on the **left**.
+- **Refresh:** **static** — reflects data per page load / navigation. No background polling.
+- **Today cell:** **solid indigo**, independent of the day's aggregate status (granular detail now lives in the strip).
+
+## Design (UI/UX-informed)
+
+The strip is a **status-timeline / per-event activity strip**. Each bar = one check, a **single solid color by status** (a single check has no ratio, so there is no gradient — true for every check type). Gray placeholder bars (the heatmap's "no-checks" gray, `bg-gray-100`) fill unused capacity on the left so the strip is always full-width; a brand-new monitor shows mostly gray with a few colored bars on the right. Newest bar sits on the far right. Per-bar tooltip on hover **and** keyboard focus; decorative gray bars are `aria-hidden` with no tooltip. (UI/UX guidance applied: tooltip-on-interact with exact values, color-not-alone via text/aria, meaningful empty state, keyboard reachability.)
+
+## Changes
+
+### A. Backend — last-50 strip data (`app/Http/Controllers/MonitorsController.php`)
+
+- Rename `buildTodayChecks(Monitor $m, string $checkType, string $tz)` → `buildLatestChecks(Monitor $m, string $checkType, string $tz, int $limit = 50)`: `$m->checkLogs()->where('check_type', $checkType)->latest('checked_at')->limit($limit)->get()` mapped to the existing row shape `{id, checked_at (tz-converted 'Y-m-d H:i:s'), status, message, failure_reason, response_time_ms}`, newest-first. **No date bound** (was today-only).
+- In `buildGraphPayload`, rename the series field `today_checks` → `latest_checks`.
+- Update the Phase-2 graph feature test: assert `graph.series.<type>.latest_checks` is newest-first, capped at 50, and includes rows from prior days (no longer today-bounded). Keep all other graph assertions.
+
+### B. Frontend — `MonitorTodayBar.jsx` → `MonitorRecentStrip.jsx`
+
+- Rename the component + file; update the import + usage in `Show.jsx`; pass `checks={series?.latest_checks || []}`.
+- **Capacity** = `min(50, slotsThatFit(containerWidth))` (fixed-width slots via ResizeObserver, as today).
+- **Slot layout:** render `capacity` slots. The right-most `min(checks.length, capacity)` slots are the most-recent real checks (newest on the far right); the remaining left slots are gray placeholders. Extract the pure slot-building as `stripSlots(checks, capacity)` for unit testing (right-aligned real bars, gray-padded left).
+- **Bar color:** shared single-status solid palette (see D) — consistent with domain/cert heatmap cells.
+- **Tooltip:** keep the per-check tooltip (date+time, status, message, response **only for uptime / when non-null**, failure). Real bars: `tabIndex=0` + `aria-label` + Tooltip. Gray bars: `aria-hidden`, no tooltip, no focus.
+- **Item 1 — remove the hover "shadow":** delete `hover:scale-y-110`; remove `overflow-hidden`; add small vertical padding (`py-0.5`) so the focus ring isn't clipped; keep the `focus-visible` ring; the only hover affordance is the tooltip (optional subtle `hover:opacity-80`, no layout shift).
+- **Relabel:** "Today (N checks)" → "**Recent checks**" with a muted sub-label (e.g. "last {shown} checks"). No longer today-bound.
+- **Legend:** unchanged in spirit — one swatch per `statusesForCheckType(checkType)` using the shared solid palette.
+
+### C. Heatmap today cell (confirm — already implemented in round 1)
+
+Today's cell = solid `bg-indigo-500 border-indigo-500`, overriding the day's status hue; legend "Today" swatch solid indigo; current-year only. Documented here; re-verify after rebuild.
+
+### D. Shared single-status solid palette (item 3 — consistency)
+
+One source of truth (extend `Utils/heatmapCell.js`): success `green-600`, warning `orange-400`, failed `red-600`, unknown `gray-400`. Used by **both** the domain/certificate heatmap cells **and** every recent-strip bar, so the two views agree. (Uptime heatmap cells keep their 3-shade ratio gradient — the strip is always single-color since each bar is one check.)
+
+### Item 3 — "don't break the UI"
+
+Cross-cutting: the strip and the (domain/cert) heatmap share the solid palette; the portal tooltip serves both; `npm run build` (Node 22) must pass; one review pass; visual check on monitor 20 (which has seeded recent + today data).
+
+## Out of scope / deferred
+
+- Live polling / auto-refresh of the strip (decision: static).
+- Touch: tooltips appear on tap-driven focus; no dedicated tap-to-reveal layer this round.
+
+## Verification
+
+- **Vitest (TDD):** `stripSlots(checks, capacity)` (right-aligned real bars + gray left-pad; clamps to capacity); shared solid-palette mapping. Existing `heatmapCell` / util suites stay green.
+- **Backend:** graph feature test updated for `latest_checks` (last-50, newest-first, spans days).
+- **Build:** `npm run build` (Node 22) clean; one adversarial review; then `writing-plans` → implement.
diff --git a/resources/js/Components/MonitorHistoryFilters.jsx b/resources/js/Components/MonitorHistoryFilters.jsx
new file mode 100644
index 0000000..abf67b5
--- /dev/null
+++ b/resources/js/Components/MonitorHistoryFilters.jsx
@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from "react";
+
+const PRESETS = [
+    { value: "7d", label: "7d" },
+    { value: "30d", label: "30d" },
+    { value: "all", label: "All" },
+];
+
+function todayIso() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+
+export default function MonitorHistoryFilters({ filters, pending = false, onApply }) {
+    const activePreset = filters?.preset || "30d";
+
+    const [customRange, setCustomRange] = useState({
+        from: filters?.from || "",
+        to: filters?.to || "",
+    });
+
+    // Keep inputs in sync with the range the server actually applied (it may clamp/swap).
+    useEffect(() => {
+        setCustomRange({ from: filters?.from || "", to: filters?.to || "" });
+    }, [filters?.from, filters?.to]);
+
+    const max = todayIso();
+
+    const handlePreset = (value) => {
+        onApply({ preset: value });
+    };
+
+    const submitCustomRange = (event) => {
+        event.preventDefault();
+        onApply({ preset: "custom", from: customRange.from, to: customRange.to });
+    };
+
+    const segmentBase =
+        "h-9 px-3 inline-flex items-center justify-center text-xs font-semibold border focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1 transition-colors duration-150 ease-out motion-reduce:transition-none disabled:opacity-50 disabled:cursor-not-allowed";
+
+    const dateInputClass =
+        "h-9 px-3 text-sm font-medium tabular-nums text-gray-900 bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:border-transparent disabled:opacity-50";
+
+    return (
+        <div className="flex flex-wrap items-end gap-x-4 gap-y-3">
+            <div
+                className="inline-flex rounded-lg shadow-sm"
+                role="group"
+                aria-label="Date range presets"
+            >
+                {PRESETS.map((preset, index) => {
+                    const isActive = activePreset === preset.value;
+                    return (
+                        <button
+                            key={preset.value}
+                            type="button"
+                            aria-pressed={isActive}
+                            disabled={pending}
+                            onClick={() => handlePreset(preset.value)}
+                            className={[
+                                segmentBase,
+                                index === 0 ? "rounded-l-lg" : "-ml-px",
+                                index === PRESETS.length - 1 ? "rounded-r-lg" : "",
+                                isActive
+                                    ? "bg-purple-600 text-white border-purple-600 hover:bg-purple-700 active:bg-purple-800 z-10"
+                                    : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+                            ].join(" ")}
+                        >
+                            {preset.label}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <form
+                onSubmit={submitCustomRange}
+                className="flex flex-wrap items-end gap-x-3 gap-y-3"
+            >
+                <div className="flex flex-col">
+                    <label
+                        htmlFor="history-filter-from"
+                        className="mb-1 text-xs font-medium text-gray-600"
+                    >
+                        From
+                    </label>
+                    <input
+                        id="history-filter-from"
+                        type="date"
+                        name="from"
+                        max={max}
+                        value={customRange.from}
+                        disabled={pending}
+                        onChange={(event) =>
+                            setCustomRange((previous) => ({
+                                ...previous,
+                                from: event.target.value,
+                            }))
+                        }
+                        className={dateInputClass}
+                    />
+                </div>
+                <div className="flex flex-col">
+                    <label
+                        htmlFor="history-filter-to"
+                        className="mb-1 text-xs font-medium text-gray-600"
+                    >
+                        To
+                    </label>
+                    <input
+                        id="history-filter-to"
+                        type="date"
+                        name="to"
+                        max={max}
+                        value={customRange.to}
+                        disabled={pending}
+                        onChange={(event) =>
+                            setCustomRange((previous) => ({
+                                ...previous,
+                                to: event.target.value,
+                            }))
+                        }
+                        className={dateInputClass}
+                    />
+                </div>
+                <button
+                    type="submit"
+                    disabled={pending}
+                    className="h-9 px-4 inline-flex items-center justify-center rounded-lg bg-purple-600 text-sm font-semibold text-white shadow-sm hover:bg-purple-700 active:bg-purple-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1 transition-colors duration-150 ease-out motion-reduce:transition-none disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    Apply
+                </button>
+            </form>
+        </div>
+    );
+}
diff --git a/resources/js/Components/MonitorHistoryHeatmap.jsx b/resources/js/Components/MonitorHistoryHeatmap.jsx
index 1d0486c..66183e4 100644
--- a/resources/js/Components/MonitorHistoryHeatmap.jsx
+++ b/resources/js/Components/MonitorHistoryHeatmap.jsx
@@ -1,218 +1,277 @@
-import React, { useMemo } from "react";
-import { CHECK_STATUS, normalizeCheckStatus } from "@/Utils/checkStatusSeverity";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+    buildYearGrid,
+    monthLabelColumns,
+    computeCellSize,
+} from "@/Utils/heatmapCalendar";
+import { formatDateUTC } from "@/Utils/formatDate";
+import {
+    CHECK_STATUS,
+    normalizeCheckStatus,
+    statusesForCheckType,
+} from "@/Utils/checkStatusSeverity";
+import {
+    cellColorClass,
+    cellMetricLines,
+    isGradedCheckType,
+    SINGLE_STATUS_CLASS,
+    UPTIME_BANDS,
+} from "@/Utils/heatmapCell";
+import Tooltip from "@/Components/Tooltip";
 
 const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const CELL_GAP = 3;
+const CELL_MIN = 10;
+const CELL_MAX = 16;
+// Fixed width of the weekday-label (Y-axis) column. The month-label row offsets
+// by this, and cell sizing reserves it, so labels, grid and months stay aligned.
+const WEEKDAY_LABEL_WIDTH = 28;
+// Today is a solid indigo fill (overrides the day's status hue — today is
+// provisional anyway), in both the grid and the legend.
+const TODAY_CLASS = "bg-indigo-500 border-indigo-500";
 
-// Mirrors the cell colors produced by getCellClasses(): healthy and failed cells
-// are graded by success ratio (lighter = lower volume/ratio, darker = higher), and
-// warning cells use yellow for high ratios and orange for low ones.
-const LEGEND_ITEMS = [
-    { label: "No checks", swatches: ["bg-gray-100 border-gray-200"] },
-    {
-        label: "Healthy",
-        swatches: [
-            "bg-green-300 border-green-300",
-            "bg-green-500 border-green-500",
-            "bg-green-700 border-green-700",
-        ],
-    },
-    {
-        label: "Warning",
-        swatches: [
-            "bg-yellow-300 border-yellow-300",
-            "bg-orange-400 border-orange-400",
-        ],
-    },
-    {
-        label: "Failed",
-        swatches: [
-            "bg-red-300 border-red-300",
-            "bg-red-500 border-red-500",
-            "bg-red-700 border-red-700",
-        ],
-    },
-    { label: "Unknown", swatches: ["bg-gray-300 border-gray-300"] },
-];
-
-function parseIsoDateUTC(isoDate) {
-    const [year, month, day] = isoDate.split("-").map(Number);
-    return new Date(Date.UTC(year, month - 1, day));
-}
+// Uptime's legend is the 4-band percentage scale (UPTIME_BANDS). Domain &
+// certificate use a single solid swatch per status (SINGLE_STATUS_CLASS) with
+// these labels, since they are once-daily checks with no per-day ratio.
+const STATUS_LABEL = {
+    [CHECK_STATUS.SUCCESS]: "Healthy",
+    [CHECK_STATUS.WARNING]: "Warning",
+    [CHECK_STATUS.FAILED]: "Failed",
+    [CHECK_STATUS.UNKNOWN]: "Unknown",
+};
 
-function formatDateUTC(date) {
-    const year = date.getUTCFullYear();
-    const month = String(date.getUTCMonth() + 1).padStart(2, "0");
-    const day = String(date.getUTCDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-}
+function buildCellTooltip(point, iso, isToday, checkType) {
+    const note = isToday ? "\nToday — partial, updates on next aggregation" : "";
 
-function addDaysUTC(date, days) {
-    return new Date(date.getTime() + days * 24 * 60 * 60 * 1000);
-}
-
-function startOfWeekUTC(date) {
-    return addDaysUTC(date, -date.getUTCDay());
+    return (
+        [formatDateUTC(iso), ...cellMetricLines(point, checkType)].join("\n") + note
+    );
 }
 
-function endOfWeekUTC(date) {
-    return addDaysUTC(date, 6 - date.getUTCDay());
-}
+// Reduced-motion policy: this component animates only via CSS transitions, each of
+// which carries `motion-reduce:transition-none motion-reduce:transform-none`. There is
+// no JS-driven animation here, so no `matchMedia('(prefers-reduced-motion: reduce)')`
+// gate is required — the CSS variants fully satisfy the prefers-reduced-motion contract.
+export default function MonitorHistoryHeatmap({
+    checkType,
+    title,
+    year,
+    points = [],
+    todayIso = null,
+}) {
+    const containerRef = useRef(null);
+    const [cellSize, setCellSize] = useState(CELL_MIN);
 
-function buildCalendarWeeks(fromDate, toDate) {
-    const rangeStart = startOfWeekUTC(parseIsoDateUTC(fromDate));
-    const rangeEnd = endOfWeekUTC(parseIsoDateUTC(toDate));
-
-    const allDays = [];
-    for (
-        let cursor = rangeStart;
-        cursor.getTime() <= rangeEnd.getTime();
-        cursor = addDaysUTC(cursor, 1)
-    ) {
-        allDays.push(new Date(cursor));
-    }
-
-    const weeks = [];
-    for (let index = 0; index < allDays.length; index += 7) {
-        weeks.push(allDays.slice(index, index + 7));
-    }
-
-    return weeks;
-}
+    const pointMap = useMemo(
+        () => new Map(points.map((point) => [point.date, point])),
+        [points]
+    );
 
-function getCellClasses(point) {
-    if (!point || point.total_checks === 0) {
-        return "bg-gray-100 border-gray-200";
-    }
+    const grid = useMemo(() => buildYearGrid(year), [year]);
+    const weeks = grid.weeks;
+    const monthColumns = useMemo(() => monthLabelColumns(weeks), [weeks]);
 
-    const normalizedStatus = normalizeCheckStatus(point.worst_status);
-    const successRatio = Number(point.success_ratio || 0);
+    // Responsive fit: size cells to the container width via ResizeObserver,
+    // clamped to [CELL_MIN, CELL_MAX]. Below CELL_MIN the wrapper scrolls.
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return undefined;
+        }
 
-    if (normalizedStatus === CHECK_STATUS.FAILED) {
-        if (successRatio < 30) return "bg-red-700 border-red-700";
-        if (successRatio < 70) return "bg-red-500 border-red-500";
-        return "bg-red-300 border-red-300";
-    }
+        const measure = () => {
+            setCellSize(
+                computeCellSize(element.clientWidth, weeks.length, {
+                    gap: CELL_GAP,
+                    min: CELL_MIN,
+                    max: CELL_MAX,
+                    reserved: WEEKDAY_LABEL_WIDTH + CELL_GAP,
+                })
+            );
+        };
 
-    if (normalizedStatus === CHECK_STATUS.WARNING) {
-        if (successRatio < 80) return "bg-orange-400 border-orange-400";
-        return "bg-yellow-300 border-yellow-300";
-    }
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [weeks.length]);
 
-    if (normalizedStatus === CHECK_STATUS.SUCCESS) {
-        if (successRatio >= 99) return "bg-green-700 border-green-700";
-        if (successRatio >= 95) return "bg-green-500 border-green-500";
-        return "bg-green-300 border-green-300";
-    }
+    const isCurrentYear =
+        todayIso !== null && todayIso.startsWith(String(year) + "-");
+    const graded = isGradedCheckType(checkType);
+    const legendStatuses = statusesForCheckType(checkType);
 
-    return "bg-gray-300 border-gray-300";
-}
+    // Visually-hidden one-sentence summary for screen readers.
+    const daysWithData = points.length;
+    const failedDays = points.filter(
+        (point) => normalizeCheckStatus(point.worst_status) === CHECK_STATUS.FAILED
+    ).length;
+    const srSummary = `${title}: ${year} calendar. ${daysWithData} day${
+        daysWithData === 1 ? "" : "s"
+    } with recorded checks, ${failedDays} with a failed worst-status.`;
 
-function buildTooltip(point, isoDate) {
-    if (!point || point.total_checks === 0) {
-        return `${isoDate}\nNo checks recorded`;
-    }
-
-    return [
-        isoDate,
-        `Total checks: ${point.total_checks}`,
-        `Success: ${point.successful_checks}`,
-        `Warning: ${point.warning_checks}`,
-        `Failed: ${point.failed_checks}`,
-        `Success ratio: ${point.success_ratio}%`,
-        point.avg_response_time_ms
-            ? `Avg response: ${point.avg_response_time_ms}ms`
-            : null,
-        point.p95_response_time_ms
-            ? `P95 response: ${point.p95_response_time_ms}ms`
-            : null,
-    ]
-        .filter(Boolean)
-        .join("\n");
-}
-
-export default function MonitorHistoryHeatmap({
-    title,
-    description,
-    fromDate,
-    toDate,
-    points = [],
-}) {
-    const pointMap = useMemo(() => {
-        return new Map(points.map((point) => [point.date, point]));
-    }, [points]);
-
-    const weeks = useMemo(() => {
-        return buildCalendarWeeks(fromDate, toDate);
-    }, [fromDate, toDate]);
+    const cellStyle = { width: cellSize, height: cellSize };
+    const labelTrackStyle = { height: cellSize, width: WEEKDAY_LABEL_WIDTH };
 
     return (
         <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
-            <div className="mb-4">
-                <h3 className="text-base font-semibold text-gray-900">{title}</h3>
-                {description ? (
-                    <p className="mt-1 text-sm text-gray-500">{description}</p>
-                ) : null}
-            </div>
+            {/* No visible heading here: the per-type headline above already names
+                the metric, and the year/timezone are shown in the year nav and the
+                global "All times in …" label — see Show.jsx. The `title` is still
+                used for the screen-reader summary and the grid's aria-label. */}
+            <p className="sr-only">{srSummary}</p>
 
-            <div className="overflow-x-auto">
-                <div className="inline-flex gap-2 items-start min-w-max">
-                    <div className="grid grid-rows-7 gap-1 pr-1">
-                        {WEEKDAY_LABELS.map((label) => (
-                            <span
-                                key={label}
-                                className="h-3.5 text-[10px] text-gray-400 leading-3"
-                            >
-                                {label}
-                            </span>
-                        ))}
+            {/* py padding gives the bottom/top row hover (scale + ring) room so it
+                isn't clipped — overflow-x-auto forces overflow-y to clip too. */}
+            <div ref={containerRef} className="overflow-x-auto py-1.5">
+                <div className="inline-flex flex-col gap-1 min-w-max">
+                    {/* Month label row, aligned to the first week-column of each month. */}
+                    <div
+                        className="flex"
+                        style={{
+                            gap: CELL_GAP,
+                            marginLeft: WEEKDAY_LABEL_WIDTH + CELL_GAP,
+                        }}
+                        aria-hidden="true"
+                    >
+                        {weeks.map((_, weekIndex) => {
+                            const month = monthColumns.find(
+                                (entry) => entry.colIndex === weekIndex
+                            );
+                            return (
+                                <span
+                                    key={weekIndex}
+                                    className="text-[10px] leading-3 text-gray-600 tabular-nums"
+                                    style={{ width: cellSize }}
+                                >
+                                    {month ? month.label : ""}
+                                </span>
+                            );
+                        })}
                     </div>
 
-                    <div className="flex gap-1">
-                        {weeks.map((week, weekIndex) => (
-                            <div key={weekIndex} className="grid grid-rows-7 gap-1">
-                                {week.map((day) => {
-                                    const isoDate = formatDateUTC(day);
-                                    const point = pointMap.get(isoDate);
-                                    const inRange =
-                                        isoDate >= fromDate && isoDate <= toDate;
-
-                                    return (
-                                        <div
-                                            key={isoDate}
-                                            className={[
-                                                "h-3.5 w-3.5 rounded-sm border transition-transform",
-                                                inRange
-                                                    ? getCellClasses(point)
-                                                    : "bg-transparent border-transparent",
-                                            ].join(" ")}
-                                            title={
-                                                inRange
-                                                    ? buildTooltip(point, isoDate)
-                                                    : ""
-                                            }
-                                        />
-                                    );
-                                })}
-                            </div>
-                        ))}
+                    <div className="flex" style={{ gap: CELL_GAP }}>
+                        {/* Weekday labels (Y axis). */}
+                        <div className="flex flex-col" style={{ gap: CELL_GAP }}>
+                            {WEEKDAY_LABELS.map((label) => (
+                                <span
+                                    key={label}
+                                    className="flex items-center text-[10px] leading-3 text-gray-600 tabular-nums"
+                                    style={labelTrackStyle}
+                                >
+                                    {label}
+                                </span>
+                            ))}
+                        </div>
+
+                        <div
+                            className="flex"
+                            style={{ gap: CELL_GAP }}
+                            role="grid"
+                            aria-label={`${title} ${year} daily health`}
+                        >
+                            {weeks.map((week, weekIndex) => (
+                                <div
+                                    key={weekIndex}
+                                    className="flex flex-col"
+                                    style={{ gap: CELL_GAP }}
+                                    role="row"
+                                >
+                                    {week.map((day) => {
+                                        // Pad days outside the year (leading/trailing
+                                        // week fill) are the ONLY transparent cells.
+                                        if (!day.inYear) {
+                                            return (
+                                                <div
+                                                    key={day.iso}
+                                                    className="rounded-sm bg-transparent"
+                                                    style={cellStyle}
+                                                    role="gridcell"
+                                                    aria-hidden="true"
+                                                />
+                                            );
+                                        }
+
+                                        const point = pointMap.get(day.iso);
+                                        const isToday =
+                                            isCurrentYear && day.iso === todayIso;
+
+                                        return (
+                                            <Tooltip
+                                                key={day.iso}
+                                                content={buildCellTooltip(
+                                                    point,
+                                                    day.iso,
+                                                    isToday,
+                                                    checkType
+                                                )}
+                                            >
+                                                <div
+                                                    role="gridcell"
+                                                    tabIndex={0}
+                                                    aria-label={buildCellTooltip(
+                                                        point,
+                                                        day.iso,
+                                                        isToday,
+                                                        checkType
+                                                    ).replace(/\n/g, ", ")}
+                                                    className={[
+                                                        "rounded-sm border transition-transform duration-150 ease-out",
+                                                        "hover:scale-110 hover:ring-1 hover:ring-gray-400",
+                                                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500",
+                                                        "motion-reduce:transition-none motion-reduce:transform-none",
+                                                        isToday
+                                                            ? TODAY_CLASS
+                                                            : cellColorClass(point, checkType),
+                                                    ].join(" ")}
+                                                    style={cellStyle}
+                                                />
+                                            </Tooltip>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                        </div>
                     </div>
                 </div>
             </div>
 
-            <div className="mt-4 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-500">
-                {LEGEND_ITEMS.map((item) => (
-                    <span key={item.label} className="flex items-center gap-1.5">
-                        <span className="flex gap-0.5">
-                            {item.swatches.map((swatch) => (
-                                <span
-                                    key={swatch}
-                                    className={`h-3.5 w-3.5 rounded-sm border ${swatch}`}
-                                />
-                            ))}
-                        </span>
-                        {item.label}
+            <div className="mt-4 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600">
+                <span className="flex items-center gap-1.5">
+                    <span className="h-3.5 w-3.5 rounded-sm border bg-gray-100 border-gray-200" />
+                    No checks
+                </span>
+                {graded
+                    ? UPTIME_BANDS.map((band) => (
+                          <span
+                              key={band.label}
+                              className="flex items-center gap-1.5"
+                          >
+                              <span
+                                  className={`h-3.5 w-3.5 rounded-sm border ${band.class}`}
+                              />
+                              {band.label}
+                          </span>
+                      ))
+                    : legendStatuses
+                          .filter((status) => STATUS_LABEL[status])
+                          .map((status) => (
+                              <span
+                                  key={status}
+                                  className="flex items-center gap-1.5"
+                              >
+                                  <span
+                                      className={`h-3.5 w-3.5 rounded-sm border ${SINGLE_STATUS_CLASS[status]}`}
+                                  />
+                                  {STATUS_LABEL[status]}
+                              </span>
+                          ))}
+                {isCurrentYear ? (
+                    <span className="flex items-center gap-1.5">
+                        <span className={`h-3.5 w-3.5 rounded-sm border ${TODAY_CLASS}`} />
+                        Today
                     </span>
-                ))}
+                ) : null}
             </div>
         </div>
     );
diff --git a/resources/js/Components/MonitorLiveStatus.jsx b/resources/js/Components/MonitorLiveStatus.jsx
new file mode 100644
index 0000000..9a02e7a
--- /dev/null
+++ b/resources/js/Components/MonitorLiveStatus.jsx
@@ -0,0 +1,75 @@
+import React from "react";
+import {
+    CHECK_STATUS,
+    mapUptimeStatusToCheckStatus,
+} from "@/Utils/checkStatusSeverity";
+import { formatRelative } from "@/Utils/formatDate";
+
+// Maps the raw monitor.uptime_status string to the user-facing live pill label.
+// Anything that is not a definite up/down is shown as PENDING (e.g. "not yet checked").
+const LIVE_STATUS_LABELS = {
+    [CHECK_STATUS.SUCCESS]: "UP",
+    [CHECK_STATUS.FAILED]: "DOWN",
+    [CHECK_STATUS.WARNING]: "PENDING",
+    [CHECK_STATUS.UNKNOWN]: "PENDING",
+};
+
+// Solid dot + soft pill background per severity, reusing the locked status palette.
+const LIVE_STATUS_PILL = {
+    [CHECK_STATUS.SUCCESS]: "bg-green-50 text-green-700 border-green-200",
+    [CHECK_STATUS.FAILED]: "bg-red-50 text-red-700 border-red-200",
+    [CHECK_STATUS.WARNING]: "bg-yellow-50 text-yellow-700 border-yellow-200",
+    [CHECK_STATUS.UNKNOWN]: "bg-gray-50 text-gray-600 border-gray-200",
+};
+
+const LIVE_STATUS_DOT = {
+    [CHECK_STATUS.SUCCESS]: "bg-green-500",
+    [CHECK_STATUS.FAILED]: "bg-red-500",
+    [CHECK_STATUS.WARNING]: "bg-yellow-400",
+    [CHECK_STATUS.UNKNOWN]: "bg-gray-300",
+};
+
+export default function MonitorLiveStatus({ monitor }) {
+    const severity = mapUptimeStatusToCheckStatus(monitor?.uptime_status);
+    const label = LIVE_STATUS_LABELS[severity] || "PENDING";
+    const isDown = severity === CHECK_STATUS.FAILED;
+
+    const lastChecked = monitor?.uptime_last_check_date
+        ? formatRelative(monitor.uptime_last_check_date, Date.now())
+        : null;
+
+    const failureReason = isDown ? monitor?.uptime_check_failure_reason : null;
+
+    return (
+        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+            <span
+                className={[
+                    "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5",
+                    "text-xs font-semibold tracking-wide",
+                    LIVE_STATUS_PILL[severity] || LIVE_STATUS_PILL[CHECK_STATUS.UNKNOWN],
+                ].join(" ")}
+            >
+                <span
+                    aria-hidden="true"
+                    className={[
+                        "h-2 w-2 rounded-full",
+                        LIVE_STATUS_DOT[severity] || LIVE_STATUS_DOT[CHECK_STATUS.UNKNOWN],
+                    ].join(" ")}
+                />
+                {label}
+            </span>
+
+            {lastChecked ? (
+                <span className="text-xs text-gray-600 tabular-nums">
+                    last checked {lastChecked}
+                </span>
+            ) : null}
+
+            {failureReason ? (
+                <span className="text-xs font-medium text-red-700">
+                    {failureReason}
+                </span>
+            ) : null}
+        </div>
+    );
+}
diff --git a/resources/js/Components/MonitorRecentStrip.jsx b/resources/js/Components/MonitorRecentStrip.jsx
new file mode 100644
index 0000000..9d75c12
--- /dev/null
+++ b/resources/js/Components/MonitorRecentStrip.jsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { formatDateTimeUTC } from "@/Utils/formatDate";
+import {
+    getCheckStatusMeta,
+    normalizeCheckStatus,
+    statusesForCheckType,
+} from "@/Utils/checkStatusSeverity";
+import { SINGLE_STATUS_CLASS } from "@/Utils/heatmapCell";
+import { stripSlots } from "@/Utils/recentStrip";
+import Tooltip from "@/Components/Tooltip";
+
+const SEGMENT_WIDTH = 8;
+const SEGMENT_GAP = 2;
+// Fallback slot cap if the backend doesn't supply one. The authoritative value
+// is config('monitor-history.recent_checks_limit'), shipped as graph.recent_checks_limit
+// and passed in via the maxSlots prop — keep this in sync with that config default.
+const DEFAULT_MAX_SLOTS = 150;
+
+function buildSegmentTooltip(check) {
+    return [
+        formatDateTimeUTC(check.checked_at),
+        `Status: ${getCheckStatusMeta(check.status).label}`,
+        check.message ? `Message: ${check.message}` : null,
+        check.response_time_ms !== null && check.response_time_ms !== undefined
+            ? `Response: ${check.response_time_ms}ms`
+            : null,
+        check.failure_reason ? `Failure: ${check.failure_reason}` : null,
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+
+export default function MonitorRecentStrip({
+    checkType,
+    checks = [],
+    maxSlots = DEFAULT_MAX_SLOTS,
+}) {
+    const containerRef = useRef(null);
+    const [capacity, setCapacity] = useState(maxSlots);
+
+    // How many fixed-width slots fit, capped at maxSlots.
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return undefined;
+        }
+
+        const measure = () => {
+            const width = element.clientWidth;
+            const perSegment = SEGMENT_WIDTH + SEGMENT_GAP;
+            const fit = Math.max(
+                1,
+                Math.floor((width + SEGMENT_GAP) / perSegment)
+            );
+            setCapacity(Math.min(maxSlots, fit));
+        };
+
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [checks.length, maxSlots]);
+
+    const slots = useMemo(
+        () => stripSlots(checks, capacity),
+        [checks, capacity]
+    );
+    const shown = slots.filter(Boolean).length;
+    const legendStatuses = statusesForCheckType(checkType);
+
+    return (
+        <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+            <div className="mb-2 flex items-baseline gap-x-2">
+                <span className="text-sm font-medium text-gray-900">
+                    Recent checks
+                </span>
+                <span className="text-xs text-gray-500 tabular-nums">
+                    last {shown}
+                </span>
+            </div>
+
+            <div ref={containerRef} className="flex items-stretch py-0.5">
+                <div className="flex" style={{ gap: SEGMENT_GAP }}>
+                    {slots.map((check, index) =>
+                        check ? (
+                            <Tooltip
+                                key={check.id}
+                                content={buildSegmentTooltip(check)}
+                            >
+                                <div
+                                    tabIndex={0}
+                                    aria-label={buildSegmentTooltip(check).replace(
+                                        /\n/g,
+                                        ", "
+                                    )}
+                                    className={[
+                                        "h-8 rounded-sm border transition-opacity duration-150 ease-out",
+                                        "hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500",
+                                        "motion-reduce:transition-none",
+                                        SINGLE_STATUS_CLASS[
+                                            normalizeCheckStatus(check.status)
+                                        ],
+                                    ].join(" ")}
+                                    style={{ width: SEGMENT_WIDTH }}
+                                />
+                            </Tooltip>
+                        ) : (
+                            <div
+                                key={`gap-${index}`}
+                                aria-hidden="true"
+                                className="h-8 rounded-sm border bg-gray-100 border-gray-200"
+                                style={{ width: SEGMENT_WIDTH }}
+                            />
+                        )
+                    )}
+                </div>
+            </div>
+
+            <div className="mt-3 flex items-center flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600">
+                {legendStatuses.map((status) => (
+                    <span key={status} className="flex items-center gap-1.5">
+                        <span
+                            className={`h-3 w-3 rounded-sm border ${SINGLE_STATUS_CLASS[status]}`}
+                        />
+                        {getCheckStatusMeta(status).label}
+                    </span>
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/Components/RecentChecksPanel.jsx b/resources/js/Components/RecentChecksPanel.jsx
new file mode 100644
index 0000000..e1382fd
--- /dev/null
+++ b/resources/js/Components/RecentChecksPanel.jsx
@@ -0,0 +1,273 @@
+import React, { useRef } from "react";
+import {
+    CheckCircleIcon,
+    ExclamationTriangleIcon,
+    XCircleIcon,
+    QuestionMarkCircleIcon,
+} from "@heroicons/react/24/outline";
+import Badge from "@/Components/Badge";
+import { formatDateTimeUTC } from "@/Utils/formatDate";
+import {
+    normalizeCheckStatus,
+    getCheckStatusBadgeColor,
+    getCheckStatusMeta,
+} from "@/Utils/checkStatusSeverity";
+
+const CHECK_TYPE_LABELS = {
+    uptime: "Uptime",
+    domain: "Domain",
+};
+
+const STATUS_ICONS = {
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    failed: XCircleIcon,
+    unknown: QuestionMarkCircleIcon,
+};
+
+function StatusBadge({ status }) {
+    const normalized = normalizeCheckStatus(status);
+    const Icon = STATUS_ICONS[normalized] || QuestionMarkCircleIcon;
+
+    return (
+        <Badge
+            text={getCheckStatusMeta(normalized).label}
+            color={getCheckStatusBadgeColor(normalized)}
+            icon={<Icon className="h-3.5 w-3.5" aria-hidden="true" />}
+        />
+    );
+}
+
+function buildPageList(currentPage, lastPage) {
+    if (lastPage <= 7) {
+        return Array.from({ length: lastPage }, (_, index) => index + 1);
+    }
+
+    const pages = new Set([1, lastPage, currentPage]);
+    if (currentPage - 1 >= 1) pages.add(currentPage - 1);
+    if (currentPage + 1 <= lastPage) pages.add(currentPage + 1);
+
+    const sorted = Array.from(pages).sort((a, b) => a - b);
+    const withGaps = [];
+    let previous = 0;
+    for (const page of sorted) {
+        if (previous && page - previous > 1) {
+            withGaps.push(`gap-${previous}`);
+        }
+        withGaps.push(page);
+        previous = page;
+    }
+
+    return withGaps;
+}
+
+export default function RecentChecksPanel({
+    recentChecks,
+    checkTypes,
+    pending,
+    onTabChange,
+    onPageChange,
+}) {
+    const tabRefs = useRef({});
+    const tabs = (checkTypes || []).filter(
+        (entry) => entry.type === "uptime" || entry.type === "domain"
+    );
+    const activeType = recentChecks?.type || tabs[0]?.type || "uptime";
+    const rows = recentChecks?.data || [];
+    const pagination = recentChecks?.pagination || {
+        current_page: 1,
+        last_page: 1,
+        per_page: 25,
+        total: 0,
+    };
+
+    const handleTabKeyDown = (event) => {
+        if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") {
+            return;
+        }
+        event.preventDefault();
+        const index = tabs.findIndex((entry) => entry.type === activeType);
+        const delta = event.key === "ArrowRight" ? 1 : -1;
+        const nextIndex = (index + delta + tabs.length) % tabs.length;
+        const nextType = tabs[nextIndex]?.type;
+        if (nextType) {
+            tabRefs.current[nextType]?.focus();
+            onTabChange(nextType);
+        }
+    };
+
+    return (
+        <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+            <h3 className="text-base font-semibold text-gray-900">
+                Recent Checks
+            </h3>
+
+            <div
+                role="tablist"
+                aria-label="Recent checks by check type"
+                className="mt-4 flex items-center gap-6 border-b border-gray-200"
+                onKeyDown={handleTabKeyDown}
+            >
+                {tabs.map(({ type }) => {
+                    const isActive = type === activeType;
+
+                    return (
+                        <button
+                            key={type}
+                            type="button"
+                            role="tab"
+                            id={`recent-checks-tab-${type}`}
+                            aria-selected={isActive}
+                            aria-controls="recent-checks-panel"
+                            tabIndex={isActive ? 0 : -1}
+                            ref={(node) => {
+                                tabRefs.current[type] = node;
+                            }}
+                            disabled={pending}
+                            onClick={() => {
+                                if (!isActive) {
+                                    onTabChange(type);
+                                }
+                            }}
+                            className={[
+                                "-mb-px border-b-2 px-1 pb-2 text-sm font-medium transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:rounded-sm disabled:cursor-not-allowed disabled:opacity-60",
+                                isActive
+                                    ? "border-purple-600 text-purple-700"
+                                    : "border-transparent text-gray-600 hover:text-gray-700",
+                            ].join(" ")}
+                        >
+                            {CHECK_TYPE_LABELS[type] || type}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <div
+                role="tabpanel"
+                id="recent-checks-panel"
+                aria-labelledby={`recent-checks-tab-${activeType}`}
+                aria-busy={pending}
+                className="mt-4 overflow-x-auto"
+            >
+                <table className="min-w-full text-sm">
+                    <thead>
+                        <tr className="text-left text-gray-600 border-b border-gray-200">
+                            <th className="py-2 pr-4 font-medium">Time</th>
+                            <th className="py-2 pr-4 font-medium">Type</th>
+                            <th className="py-2 pr-4 font-medium">Status</th>
+                            <th className="py-2 pr-4 font-medium">Message</th>
+                            <th className="py-2 pl-4 font-medium text-right">
+                                Response (ms)
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.length === 0 ? (
+                            <tr>
+                                <td
+                                    className="py-4 text-gray-600"
+                                    colSpan={5}
+                                >
+                                    No checks recorded for this range.
+                                </td>
+                            </tr>
+                        ) : (
+                            rows.map((check) => (
+                                <tr
+                                    key={check.id}
+                                    className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors duration-150 motion-reduce:transition-none"
+                                >
+                                    <td className="py-2 pr-4 text-gray-700 whitespace-nowrap tabular-nums">
+                                        {formatDateTimeUTC(check.checked_at)}
+                                    </td>
+                                    <td className="py-2 pr-4 text-gray-700">
+                                        {CHECK_TYPE_LABELS[check.check_type] ||
+                                            check.check_type}
+                                    </td>
+                                    <td className="py-2 pr-4">
+                                        <StatusBadge status={check.status} />
+                                    </td>
+                                    <td className="py-2 pr-4 text-gray-700">
+                                        {check.message ||
+                                            check.failure_reason ||
+                                            "No details"}
+                                    </td>
+                                    <td className="py-2 pl-4 text-right text-gray-700 tabular-nums whitespace-nowrap">
+                                        {check.response_time_ms ?? "—"}
+                                    </td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {pagination.last_page > 1 ? (
+                <nav
+                    aria-label="Recent checks pagination"
+                    className="mt-4 flex items-center justify-center gap-1"
+                >
+                    <button
+                        type="button"
+                        disabled={pending || pagination.current_page <= 1}
+                        onClick={() =>
+                            onPageChange(pagination.current_page - 1)
+                        }
+                        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Prev
+                    </button>
+
+                    {buildPageList(
+                        pagination.current_page,
+                        pagination.last_page
+                    ).map((page) =>
+                        typeof page === "string" ? (
+                            <span
+                                key={page}
+                                className="px-2 py-1.5 text-sm text-gray-400"
+                                aria-hidden="true"
+                            >
+                                …
+                            </span>
+                        ) : (
+                            <button
+                                key={page}
+                                type="button"
+                                aria-current={
+                                    page === pagination.current_page
+                                        ? "page"
+                                        : undefined
+                                }
+                                disabled={pending}
+                                onClick={() => onPageChange(page)}
+                                className={[
+                                    "min-w-[2.25rem] rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+                                    page === pagination.current_page
+                                        ? "border-purple-600 bg-purple-600 text-white"
+                                        : "border-gray-300 text-gray-700 hover:bg-gray-50",
+                                ].join(" ")}
+                            >
+                                {page}
+                            </button>
+                        )
+                    )}
+
+                    <button
+                        type="button"
+                        disabled={
+                            pending ||
+                            pagination.current_page >= pagination.last_page
+                        }
+                        onClick={() =>
+                            onPageChange(pagination.current_page + 1)
+                        }
+                        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Next
+                    </button>
+                </nav>
+            ) : null}
+        </div>
+    );
+}
diff --git a/resources/js/Components/SummaryStats.jsx b/resources/js/Components/SummaryStats.jsx
new file mode 100644
index 0000000..d4c1f29
--- /dev/null
+++ b/resources/js/Components/SummaryStats.jsx
@@ -0,0 +1,118 @@
+import React from "react";
+import { formatDateTimeUTC } from "@/Utils/formatDate";
+
+function reliabilityColor(ratio) {
+    if (ratio >= 99) return "text-green-700";
+    if (ratio >= 95) return "text-green-600";
+    if (ratio >= 80) return "text-yellow-600";
+    return "text-red-600";
+}
+
+function formatRatio(ratio) {
+    return `${Number(ratio || 0).toFixed(1)}%`;
+}
+
+// Includes Unknown so the four counts reconcile to total_checks (E4).
+const COUNT_ITEMS = [
+    { key: "success", label: "Success", className: "text-green-700" },
+    { key: "warning", label: "Warning", className: "text-yellow-700" },
+    { key: "failed", label: "Failed", className: "text-red-700" },
+    { key: "unknown", label: "Unknown", className: "text-gray-600" },
+];
+
+export default function SummaryStats({ summary, onViewAllTime }) {
+    const selected = summary?.selected_range || null;
+    const allTime = summary?.all_time || null;
+    const selectedTotal = selected?.total_checks || 0;
+    const allTimeTotal = allTime?.total_checks || 0;
+
+    // E5: first-run empty state — nothing has ever been checked.
+    if (allTimeTotal === 0) {
+        return (
+            <div className="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 text-center">
+                <p className="text-sm font-medium text-gray-700">
+                    No checks have been recorded yet
+                </p>
+                <p className="mt-1 text-sm text-gray-600">
+                    {summary?.first_checked_at
+                        ? `First check expected around ${formatDateTimeUTC(summary.first_checked_at)}.`
+                        : "Reliability stats will appear once this monitor runs its first check."}
+                </p>
+            </div>
+        );
+    }
+
+    // E5: data exists all-time but the selected range is empty — disambiguate.
+    if (selectedTotal === 0) {
+        return (
+            <div className="rounded-xl border border-gray-200 bg-white p-6">
+                <p className="text-sm font-medium text-gray-700">
+                    No checks in this range
+                </p>
+                <p className="mt-1 text-sm text-gray-600">
+                    This monitor has{" "}
+                    <span className="tabular-nums font-semibold text-gray-700">
+                        {allTimeTotal}
+                    </span>{" "}
+                    checks all-time at{" "}
+                    <span className="tabular-nums font-semibold text-gray-700">
+                        {formatRatio(allTime?.success_ratio)}
+                    </span>{" "}
+                    reliability.{" "}
+                    <button
+                        type="button"
+                        onClick={() => onViewAllTime?.()}
+                        className="font-semibold text-purple-600 hover:text-purple-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1 rounded"
+                    >
+                        View All Time
+                    </button>
+                </p>
+            </div>
+        );
+    }
+
+    const selectedRatio = Number(selected?.success_ratio || 0);
+    const totals = selected?.status_totals || {};
+
+    return (
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-stretch">
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm lg:w-64">
+                <p className="text-xs font-medium uppercase tracking-wide text-gray-600">
+                    Reliability
+                </p>
+                <p
+                    className={`mt-1 text-4xl font-bold tabular-nums ${reliabilityColor(
+                        selectedRatio
+                    )}`}
+                >
+                    {formatRatio(selectedRatio)}
+                </p>
+                <p className="mt-1 text-xs text-gray-600">
+                    <span className="tabular-nums">{selectedTotal}</span> checks in
+                    range · all-time{" "}
+                    <span className="tabular-nums font-medium text-gray-600">
+                        {formatRatio(allTime?.success_ratio)}
+                    </span>
+                </p>
+            </div>
+
+            <div className="grid flex-1 grid-cols-2 gap-3 sm:grid-cols-4">
+                {COUNT_ITEMS.map((item) => (
+                    <div
+                        key={item.key}
+                        className="rounded-xl border border-gray-200 bg-white p-4"
+                    >
+                        <p className="text-xs uppercase tracking-wide text-gray-600">
+                            {item.label}
+                        </p>
+                        <p
+                            className={`mt-2 text-2xl font-bold tabular-nums ${item.className}`}
+                        >
+                            {totals[item.key] || 0}
+                        </p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/Components/Tooltip.jsx b/resources/js/Components/Tooltip.jsx
new file mode 100644
index 0000000..e179a9a
--- /dev/null
+++ b/resources/js/Components/Tooltip.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// Reusable hover + keyboard-focus tooltip.
+// Rendered through a portal to <body> with fixed positioning so it is NEVER
+// clipped by an ancestor's `overflow` (e.g. the heatmap's overflow-x-auto
+// scroll container). Positioned above the trigger and centered, flipping below
+// and clamping horizontally when it would leave the viewport.
+// - role="tooltip" + aria-describedby wired to the trigger for screen readers.
+// - Shows on mouse hover AND keyboard focus; pointer-events disabled so it
+//   never steals hover. Hides on scroll/resize to avoid a stale position.
+const MARGIN = 8;
+
+export default function Tooltip({ content, children, className = "" }) {
+    const tooltipId = useId();
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+
+    const show = () => setOpen(true);
+    const hide = () => setOpen(false);
+
+    // Position before paint so there is no flash at (0,0).
+    useLayoutEffect(() => {
+        if (!open || !triggerRef.current || !tooltipRef.current) {
+            return;
+        }
+        const trigger = triggerRef.current.getBoundingClientRect();
+        const tip = tooltipRef.current.getBoundingClientRect();
+
+        let top = trigger.top - tip.height - MARGIN;
+        if (top < MARGIN) {
+            top = trigger.bottom + MARGIN; // not enough room above -> flip below
+        }
+
+        let left = trigger.left + trigger.width / 2 - tip.width / 2;
+        left = Math.max(
+            MARGIN,
+            Math.min(left, window.innerWidth - tip.width - MARGIN)
+        );
+
+        setPos({ top, left });
+    }, [open, content]);
+
+    // A stale fixed-position tooltip looks broken after the page scrolls; just hide.
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const onMove = () => hide();
+        window.addEventListener("scroll", onMove, true);
+        window.addEventListener("resize", onMove);
+        return () => {
+            window.removeEventListener("scroll", onMove, true);
+            window.removeEventListener("resize", onMove);
+        };
+    }, [open]);
+
+    if (content === null || content === undefined || content === "") {
+        return children;
+    }
+
+    return (
+        <span
+            ref={triggerRef}
+            className={`inline-flex ${className}`}
+            onMouseEnter={show}
+            onMouseLeave={hide}
+            onFocus={show}
+            onBlur={hide}
+        >
+            <span aria-describedby={open ? tooltipId : undefined}>{children}</span>
+
+            {open && typeof document !== "undefined"
+                ? createPortal(
+                      <span
+                          ref={tooltipRef}
+                          role="tooltip"
+                          id={tooltipId}
+                          style={{ position: "fixed", top: pos.top, left: pos.left }}
+                          className={[
+                              "pointer-events-none z-50 w-max max-w-xs",
+                              "whitespace-pre-line rounded-md bg-gray-900 px-3 py-2",
+                              "text-xs font-medium leading-snug text-white shadow-lg",
+                          ].join(" ")}
+                      >
+                          {content}
+                      </span>,
+                      document.body
+                  )
+                : null}
+        </span>
+    );
+}
diff --git a/resources/js/Pages/Monitors/Show.jsx b/resources/js/Pages/Monitors/Show.jsx
index fb56b81..6760d8f 100644
--- a/resources/js/Pages/Monitors/Show.jsx
+++ b/resources/js/Pages/Monitors/Show.jsx
@@ -1,22 +1,23 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import Authenticated from "@/Layouts/Authenticated";
 import { Head, Link, router, usePage } from "@inertiajs/react";
 import {
     ArrowTopRightOnSquareIcon,
     ArrowLeftIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
 } from "@heroicons/react/24/outline";
 import MonitorUptimeIcon from "@/Components/MonitorUptimeIcon";
 import MonitorDomainIcon from "@/Components/MonitorDomainIcon";
 import MonitorCheckIntervalIcon from "@/Components/MonitorCheckIntervalIcon";
 import PageHeader from "@/Components/PageHeader";
-import Button from "@/Components/Button";
-import Input from "@/Components/Input";
-import Badge from "@/Components/Badge";
 import MonitorHistoryHeatmap from "@/Components/MonitorHistoryHeatmap";
-import {
-    getCheckStatusBadgeColor,
-    normalizeCheckStatus,
-} from "@/Utils/checkStatusSeverity";
+import MonitorLiveStatus from "@/Components/MonitorLiveStatus";
+import MonitorRecentStrip from "@/Components/MonitorRecentStrip";
+import RecentChecksPanel from "@/Components/RecentChecksPanel";
+import MonitorHistoryFilters from "@/Components/MonitorHistoryFilters";
+import SummaryStats from "@/Components/SummaryStats";
+import { buildHistoryParams } from "@/Utils/historyParams";
 
 const CHECK_TYPE_LABELS = {
     uptime: "Uptime",
@@ -29,100 +30,124 @@ function formatCheckTypeLabel(checkType) {
 }
 
 export default function Show(props) {
-    const { monitor, features, history } = usePage().props;
+    const { monitor, features, graph, filters, summary, recentChecks } = usePage().props;
     const isHistoryEnabled = Boolean(features?.monitorHistory);
-    const selectedRange = history?.range || null;
+    const [graphPending, setGraphPending] = useState(false);
 
-    const [customRange, setCustomRange] = useState({
-        from: selectedRange?.from || "",
-        to: selectedRange?.to || "",
-    });
+    // The graph is driven solely by ?year and is decoupled from the filters.
+    const currentParams = useMemo(
+        () => ({
+            year: graph?.year,
+            preset: filters?.preset,
+            from: filters?.from,
+            to: filters?.to,
+            recent_type: recentChecks?.type || "uptime",
+            recent_page: recentChecks?.pagination?.current_page || 1,
+        }),
+        [graph?.year, filters, recentChecks]
+    );
 
-    // Keep the custom-range inputs in sync with the range the server actually applied
-    // (it may clamp or swap the supplied dates) so the controls never misrepresent the view.
-    useEffect(() => {
-        setCustomRange({
-            from: selectedRange?.from || "",
-            to: selectedRange?.to || "",
-        });
-    }, [selectedRange?.from, selectedRange?.to]);
+    const [recentPending, setRecentPending] = useState(false);
+    const [filtersPending, setFiltersPending] = useState(false);
 
-    const applyRange = (params) => {
-        // Timezone is resolved server-side (it must match how metrics were aggregated),
-        // so we intentionally do not send the browser timezone here.
-        router.get(route("monitors.show", monitor.id), params, {
-            preserveScroll: true,
-            preserveState: true,
-            replace: true,
-        });
-    };
+    const handleApplyFilters = (change) => {
+        // Timezone is resolved server-side to match how metrics were aggregated,
+        // so we intentionally never send the browser timezone here.
+        const overrides = { ...change, recent_page: 1 };
 
-    const submitCustomRange = (event) => {
-        event.preventDefault();
-        applyRange({
-            preset: "custom",
-            from: customRange.from,
-            to: customRange.to,
-        });
+        router.get(
+            route("monitors.show", monitor.id),
+            buildHistoryParams(currentParams, overrides),
+            {
+                only: ["filters", "summary", "recentChecks"],
+                preserveState: true,
+                preserveScroll: true,
+                replace: true,
+                onStart: () => setFiltersPending(true),
+                onFinish: () => setFiltersPending(false),
+            }
+        );
     };
 
-    const checkTypes = useMemo(() => {
-        if (history?.check_types?.length) {
-            return history.check_types;
-        }
+    const goToYear = (targetYear) => {
+        router.get(
+            route("monitors.show", monitor.id),
+            buildHistoryParams(currentParams, { year: targetYear }),
+            {
+                only: ["graph"],
+                preserveState: true,
+                preserveScroll: true,
+                replace: true,
+                onStart: () => setGraphPending(true),
+                onFinish: () => setGraphPending(false),
+            }
+        );
+    };
 
-        // Fallback: derive enabled flags from the monitor when no payload is present.
-        return [
-            { type: "uptime", enabled: Boolean(monitor.uptime_check_enabled) },
-            { type: "domain", enabled: Boolean(monitor.domain_check_enabled) },
+    const reloadRecentChecks = (overrides) => {
+        router.get(
+            route("monitors.show", monitor.id),
+            buildHistoryParams(currentParams, overrides),
             {
-                type: "certificate",
-                enabled: Boolean(monitor.certificate_check_enabled),
-            },
-        ];
-    }, [history, monitor]);
+                only: ["recentChecks"],
+                preserveState: true,
+                preserveScroll: true,
+                replace: true,
+                onStart: () => setRecentPending(true),
+                onFinish: () => setRecentPending(false),
+            }
+        );
+    };
+
+    const handleRecentTabChange = (type) => {
+        reloadRecentChecks({ recent_type: type, recent_page: 1 });
+    };
 
-    const statusTotals = history?.summary?.selected_range?.status_totals || {};
-    const totalChecks = history?.summary?.selected_range?.total_checks || 0;
+    const handleRecentPageChange = (page) => {
+        reloadRecentChecks({ recent_page: page });
+    };
 
     return (
         <Authenticated auth={props.auth} errors={props.errors}>
             <Head title={monitor.name || "Monitor Details"} />
 
             <PageHeader>
-                <div className="flex items-center justify-between gap-4">
-                    <div>
+                <div className="flex items-start gap-4">
+                    <Link
+                        href={route("monitors.index")}
+                        className="mt-1 inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors duration-150 ease-out hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 motion-reduce:transition-none"
+                    >
+                        <ArrowLeftIcon className="h-4 w-4" />
+                        Back
+                    </Link>
+                    <div className="min-w-0">
                         <h1 className="text-2xl font-bold text-gray-900 tracking-tight">
                             {monitor.name}
                         </h1>
-                        <div className="mt-1 flex items-center gap-1 text-sm text-gray-500">
-                            <span className="truncate max-w-[35rem]">{monitor.raw_url}</span>
+                        <div className="mt-1 flex items-center gap-1 text-sm text-gray-600">
+                            <span className="truncate max-w-[35rem]">
+                                {monitor.raw_url}
+                            </span>
                             <a
                                 href={monitor.raw_url}
                                 target="_blank"
                                 rel="noreferrer"
-                                className="text-gray-400 hover:text-gray-600"
+                                className="rounded text-gray-600 transition-colors duration-150 ease-out hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 motion-reduce:transition-none"
                                 title="Open monitor URL"
                             >
                                 <ArrowTopRightOnSquareIcon className="h-4 w-4" />
                             </a>
                         </div>
+                        <MonitorLiveStatus monitor={monitor} />
                     </div>
-                    <Link
-                        href={route("monitors.index")}
-                        className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
-                    >
-                        <ArrowLeftIcon className="h-4 w-4" />
-                        Back
-                    </Link>
                 </div>
             </PageHeader>
 
             <div className="max-w-7xl mx-auto py-8 px-6 lg:px-8 space-y-6">
-                <div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
-                    <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase mb-4">
-                        Monitor Snapshot
-                    </h2>
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-gray-200 bg-white px-5 py-3 shadow-sm">
+                    <span className="text-xs font-semibold uppercase tracking-wide text-gray-600">
+                        Snapshot
+                    </span>
                     <div className="flex items-center gap-2.5 flex-wrap">
                         <MonitorUptimeIcon monitor={monitor} />
                         <MonitorCheckIntervalIcon monitor={monitor} />
@@ -131,9 +156,16 @@ export default function Show(props) {
                 </div>
 
                 <div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
-                    <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase mb-2">
-                        Monitor History
-                    </h2>
+                    <div className="mb-4 flex items-baseline justify-between gap-4">
+                        <h2 className="text-lg font-semibold text-gray-900">
+                            Monitor History
+                        </h2>
+                        {filters?.timezone ? (
+                            <span className="text-xs text-gray-600">
+                                All times in {filters.timezone}
+                            </span>
+                        ) : null}
+                    </div>
 
                     {!isHistoryEnabled ? (
                         <p className="text-sm text-gray-600">
@@ -141,211 +173,132 @@ export default function Show(props) {
                             <code>MONITOR_HISTORY_ENABLED=true</code> to enable rollout when
                             backend history ingestion is ready.
                         </p>
-                    ) : !history ? (
+                    ) : !graph && !filters && !summary ? (
                         <p className="text-sm text-gray-600">
                             History is enabled, but no history payload is available for
                             this monitor yet.
                         </p>
                     ) : (
-                        <div className="space-y-6">
-                            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
-                                <div className="flex flex-wrap items-center gap-2">
-                                    <button
-                                        className={`px-3 py-1.5 rounded-lg border text-xs font-semibold ${
-                                            selectedRange?.preset === "7d"
-                                                ? "bg-purple-600 text-white border-purple-600"
-                                                : "bg-white text-gray-700 border-gray-300"
-                                        }`}
-                                        onClick={() => applyRange({ preset: "7d" })}
-                                        type="button"
-                                    >
-                                        Last 7 Days
-                                    </button>
-                                    <button
-                                        className={`px-3 py-1.5 rounded-lg border text-xs font-semibold ${
-                                            selectedRange?.preset === "30d"
-                                                ? "bg-purple-600 text-white border-purple-600"
-                                                : "bg-white text-gray-700 border-gray-300"
-                                        }`}
-                                        onClick={() => applyRange({ preset: "30d" })}
-                                        type="button"
-                                    >
-                                        Last 30 Days
-                                    </button>
-                                    <button
-                                        className={`px-3 py-1.5 rounded-lg border text-xs font-semibold ${
-                                            selectedRange?.preset === "all"
-                                                ? "bg-purple-600 text-white border-purple-600"
-                                                : "bg-white text-gray-700 border-gray-300"
-                                        }`}
-                                        onClick={() => applyRange({ preset: "all" })}
-                                        type="button"
-                                    >
-                                        All Time
-                                    </button>
-                                </div>
-
-                                <form
-                                    onSubmit={submitCustomRange}
-                                    className="mt-4 flex flex-wrap items-end gap-3"
-                                >
-                                    <div>
-                                        <label className="block text-xs text-gray-500 mb-1">
-                                            From
-                                        </label>
-                                        <Input
-                                            type="date"
-                                            name="from"
-                                            value={customRange.from}
-                                            handleChange={(event) =>
-                                                setCustomRange((previous) => ({
-                                                    ...previous,
-                                                    from: event.target.value,
-                                                }))
-                                            }
-                                        />
-                                    </div>
-                                    <div>
-                                        <label className="block text-xs text-gray-500 mb-1">
-                                            To
-                                        </label>
-                                        <Input
-                                            type="date"
-                                            name="to"
-                                            value={customRange.to}
-                                            handleChange={(event) =>
-                                                setCustomRange((previous) => ({
-                                                    ...previous,
-                                                    to: event.target.value,
-                                                }))
-                                            }
-                                        />
+                        <div className="divide-y divide-gray-200 [&>*]:py-6 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+                            {graph ? (
+                                <section aria-label="Yearly health graphs" className="space-y-6">
+                                    <div className="flex items-center justify-between gap-4">
+                                        <h3 className="text-base font-semibold text-gray-900">
+                                            Health by year
+                                        </h3>
+                                        <div className="flex items-center gap-2" aria-busy={graphPending}>
+                                            <button
+                                                type="button"
+                                                onClick={() =>
+                                                    goToYear(graph.year - 1)
+                                                }
+                                                disabled={
+                                                    graphPending ||
+                                                    graph.year <= Math.min(...graph.available_years)
+                                                }
+                                                className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500"
+                                                aria-label="Previous year"
+                                            >
+                                                <ChevronLeftIcon className="h-4 w-4" />
+                                            </button>
+                                            <span className="min-w-[3.5rem] text-center text-sm font-semibold text-gray-900 tabular-nums">
+                                                {graph.year}
+                                            </span>
+                                            <button
+                                                type="button"
+                                                onClick={() =>
+                                                    goToYear(graph.year + 1)
+                                                }
+                                                disabled={
+                                                    graphPending ||
+                                                    graph.year >= Math.max(...graph.available_years)
+                                                }
+                                                className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500"
+                                                aria-label="Next year"
+                                            >
+                                                <ChevronRightIcon className="h-4 w-4" />
+                                            </button>
+                                        </div>
                                     </div>
-                                    <Button type="submit" className="px-4 py-2">
-                                        Apply
-                                    </Button>
-                                </form>
-                            </div>
 
-                            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                                <div className="rounded-xl border border-gray-200 bg-white p-4">
-                                    <p className="text-xs uppercase tracking-wide text-gray-500">
-                                        Total Checks
-                                    </p>
-                                    <p className="mt-2 text-2xl font-bold text-gray-900">
-                                        {totalChecks}
-                                    </p>
-                                </div>
-                                <div className="rounded-xl border border-gray-200 bg-white p-4">
-                                    <p className="text-xs uppercase tracking-wide text-gray-500">
-                                        Success
-                                    </p>
-                                    <p className="mt-2 text-2xl font-bold text-green-700">
-                                        {statusTotals.success || 0}
-                                    </p>
-                                </div>
-                                <div className="rounded-xl border border-gray-200 bg-white p-4">
-                                    <p className="text-xs uppercase tracking-wide text-gray-500">
-                                        Warning
-                                    </p>
-                                    <p className="mt-2 text-2xl font-bold text-yellow-700">
-                                        {statusTotals.warning || 0}
-                                    </p>
-                                </div>
-                                <div className="rounded-xl border border-gray-200 bg-white p-4">
-                                    <p className="text-xs uppercase tracking-wide text-gray-500">
-                                        Failed
-                                    </p>
-                                    <p className="mt-2 text-2xl font-bold text-red-700">
-                                        {statusTotals.failed || 0}
-                                    </p>
-                                </div>
-                            </div>
+                                    {graph.check_types
+                                        .filter(({ enabled }) => enabled)
+                                        .map(({ type }) => {
+                                            const series = graph.series?.[type];
+                                            const typeSummary = series?.summary;
 
-                            {checkTypes.map(({ type, enabled }) =>
-                                enabled ? (
-                                    <MonitorHistoryHeatmap
-                                        key={type}
-                                        title={`${formatCheckTypeLabel(type)} Health`}
-                                        description={`${selectedRange?.from} to ${selectedRange?.to} (${selectedRange?.timezone})`}
-                                        fromDate={selectedRange?.from}
-                                        toDate={selectedRange?.to}
-                                        points={history.daily_metrics?.[type] || []}
-                                    />
-                                ) : (
-                                    <div
-                                        key={type}
-                                        className="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-5"
-                                    >
-                                        <h3 className="text-base font-semibold text-gray-700">
-                                            {`${formatCheckTypeLabel(type)} Health`}
-                                        </h3>
-                                        <p className="mt-1 text-sm text-gray-500">
-                                            {formatCheckTypeLabel(type)} checks are not enabled
-                                            for this monitor.
+                                            return (
+                                                <div key={type} className="space-y-3">
+                                                    <div className="flex items-baseline gap-x-2">
+                                                        <span className="text-sm font-medium text-gray-600">
+                                                            {formatCheckTypeLabel(type)}
+                                                        </span>
+                                                        <span className="text-lg font-semibold text-gray-900 tabular-nums">
+                                                            {typeSummary
+                                                                ? Number(
+                                                                      typeSummary.success_ratio
+                                                                  ).toFixed(1)
+                                                                : "0.0"}
+                                                            %
+                                                        </span>
+                                                        <span className="text-xs text-gray-500 tabular-nums">
+                                                            ·{" "}
+                                                            {(
+                                                                typeSummary?.total_checks || 0
+                                                            ).toLocaleString()}{" "}
+                                                            checks
+                                                        </span>
+                                                    </div>
+                                                    <MonitorRecentStrip
+                                                        checkType={type}
+                                                        checks={series?.latest_checks || []}
+                                                        maxSlots={graph.recent_checks_limit}
+                                                    />
+                                                    <MonitorHistoryHeatmap
+                                                        checkType={type}
+                                                        title={`${formatCheckTypeLabel(type)} Health`}
+                                                        year={graph.year}
+                                                        points={series?.daily_metrics || []}
+                                                        todayIso={graph.today_iso || null}
+                                                    />
+                                                </div>
+                                            );
+                                        })}
+
+                                    {graph.check_types.some(({ enabled }) => !enabled) ? (
+                                        <p className="text-xs text-gray-600">
+                                            {graph.check_types
+                                                .filter(({ enabled }) => !enabled)
+                                                .map(({ type }) => formatCheckTypeLabel(type))
+                                                .join(", ")}{" "}
+                                            {graph.check_types.filter(({ enabled }) => !enabled)
+                                                .length === 1
+                                                ? "check is"
+                                                : "checks are"}{" "}
+                                            not enabled for this monitor.
                                         </p>
-                                    </div>
-                                )
-                            )}
+                                    ) : null}
+                                </section>
+                            ) : null}
+
+                            <MonitorHistoryFilters
+                                filters={filters}
+                                pending={filtersPending}
+                                onApply={handleApplyFilters}
+                            />
 
-                            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
-                                <h3 className="text-base font-semibold text-gray-900">
-                                    Recent Checks
-                                </h3>
-                                <div className="mt-4 overflow-x-auto">
-                                    <table className="min-w-full text-sm">
-                                        <thead>
-                                            <tr className="text-left text-gray-500 border-b border-gray-200">
-                                                <th className="py-2 pr-4 font-medium">Time</th>
-                                                <th className="py-2 pr-4 font-medium">Type</th>
-                                                <th className="py-2 pr-4 font-medium">Status</th>
-                                                <th className="py-2 pr-4 font-medium">Message</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            {(history.recent_checks || []).length === 0 ? (
-                                                <tr>
-                                                    <td className="py-4 text-gray-500" colSpan={4}>
-                                                        No checks recorded yet.
-                                                    </td>
-                                                </tr>
-                                            ) : (
-                                                (history.recent_checks || []).map((check) => {
-                                                    const normalizedStatus =
-                                                        normalizeCheckStatus(check.status);
+                            <SummaryStats
+                                summary={summary}
+                                onViewAllTime={() => handleApplyFilters({ preset: "all" })}
+                            />
 
-                                                    return (
-                                                        <tr
-                                                            key={check.id}
-                                                            className="border-b border-gray-100 last:border-b-0"
-                                                        >
-                                                            <td className="py-2 pr-4 text-gray-700 whitespace-nowrap">
-                                                                {check.checked_at}
-                                                            </td>
-                                                            <td className="py-2 pr-4 text-gray-700">
-                                                                {formatCheckTypeLabel(check.check_type)}
-                                                            </td>
-                                                            <td className="py-2 pr-4">
-                                                                <Badge
-                                                                    text={normalizedStatus}
-                                                                    color={getCheckStatusBadgeColor(
-                                                                        normalizedStatus
-                                                                    )}
-                                                                />
-                                                            </td>
-                                                            <td className="py-2 pr-4 text-gray-700">
-                                                                {check.message ||
-                                                                    check.failure_reason ||
-                                                                    "No details"}
-                                                            </td>
-                                                        </tr>
-                                                    );
-                                                })
-                                            )}
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
+                            <RecentChecksPanel
+                                recentChecks={recentChecks}
+                                checkTypes={graph?.check_types || []}
+                                pending={recentPending}
+                                onTabChange={handleRecentTabChange}
+                                onPageChange={handleRecentPageChange}
+                            />
                         </div>
                     )}
                 </div>
diff --git a/resources/js/Utils/__tests__/checkStatusSeverity.test.js b/resources/js/Utils/__tests__/checkStatusSeverity.test.js
new file mode 100644
index 0000000..d45c0ee
--- /dev/null
+++ b/resources/js/Utils/__tests__/checkStatusSeverity.test.js
@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import {
+    CHECK_TYPE_STATUSES,
+    statusesForCheckType,
+} from "@/Utils/checkStatusSeverity";
+
+describe("CHECK_TYPE_STATUSES", () => {
+    it("uptime omits warning", () => {
+        expect(CHECK_TYPE_STATUSES.uptime).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("certificate omits warning", () => {
+        expect(CHECK_TYPE_STATUSES.certificate).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("domain includes warning", () => {
+        expect(CHECK_TYPE_STATUSES.domain).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+});
+
+describe("statusesForCheckType", () => {
+    it("returns the uptime list for 'uptime'", () => {
+        expect(statusesForCheckType("uptime")).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("returns the domain list for 'domain'", () => {
+        expect(statusesForCheckType("domain")).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("returns the certificate list for 'certificate'", () => {
+        expect(statusesForCheckType("certificate")).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("falls back to all four statuses for an unknown type", () => {
+        expect(statusesForCheckType("bogus")).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("falls back for undefined input", () => {
+        expect(statusesForCheckType(undefined)).toEqual([
+            "success",
+            "warning",
+            "failed",
+            "unknown",
+        ]);
+    });
+
+    it("returns a copy, not the shared array reference", () => {
+        const result = statusesForCheckType("uptime");
+        result.push("mutated");
+        expect(CHECK_TYPE_STATUSES.uptime).toEqual([
+            "success",
+            "failed",
+            "unknown",
+        ]);
+    });
+});
diff --git a/resources/js/Utils/__tests__/formatDate.test.js b/resources/js/Utils/__tests__/formatDate.test.js
new file mode 100644
index 0000000..7bd2f23
--- /dev/null
+++ b/resources/js/Utils/__tests__/formatDate.test.js
@@ -0,0 +1,121 @@
+import { describe, it, expect } from "vitest";
+import {
+    formatDateUTC,
+    formatDateTimeUTC,
+    formatRelative,
+} from "@/Utils/formatDate";
+
+describe("formatDateUTC", () => {
+    it("formats a date-only string as '27 Mar 2026'", () => {
+        expect(formatDateUTC("2026-03-27")).toBe("27 Mar 2026");
+    });
+
+    it("formats a datetime string using its date part", () => {
+        expect(formatDateUTC("2026-03-27 15:00:00")).toBe("27 Mar 2026");
+    });
+
+    it("formats a leap day correctly", () => {
+        expect(formatDateUTC("2024-02-29")).toBe("29 Feb 2024");
+    });
+
+    it("does not shift across days at UTC midnight", () => {
+        expect(formatDateUTC("2026-01-01 00:00:00")).toBe("01 Jan 2026");
+    });
+
+    it("returns empty string for null/empty input", () => {
+        expect(formatDateUTC(null)).toBe("");
+        expect(formatDateUTC("")).toBe("");
+    });
+
+    it("returns empty string for malformed input (non-date string)", () => {
+        expect(formatDateUTC("not-a-date")).toBe("");
+    });
+
+    it("returns empty string for malformed input (non-numeric date part)", () => {
+        expect(formatDateUTC("abcd-ef-gh")).toBe("");
+    });
+
+    it("parses Laravel ISO-8601 with microseconds and Z suffix", () => {
+        expect(formatDateUTC("2026-03-27T15:00:00.000000Z")).toBe("27 Mar 2026");
+    });
+});
+
+describe("formatDateTimeUTC", () => {
+    it("formats a datetime as '27 Mar 2026, 15:00'", () => {
+        expect(formatDateTimeUTC("2026-03-27 15:00:00")).toBe(
+            "27 Mar 2026, 15:00"
+        );
+    });
+
+    it("pads single-digit hours and minutes", () => {
+        expect(formatDateTimeUTC("2026-03-27 09:05:00")).toBe(
+            "27 Mar 2026, 09:05"
+        );
+    });
+
+    it("renders midnight as 00:00 (24h, no shift)", () => {
+        expect(formatDateTimeUTC("2026-01-01 00:00:00")).toBe(
+            "01 Jan 2026, 00:00"
+        );
+    });
+
+    it("returns empty string for null input", () => {
+        expect(formatDateTimeUTC(null)).toBe("");
+    });
+
+    it("returns empty string for malformed input (garbage after date)", () => {
+        expect(formatDateTimeUTC("2026-03-27 garbage")).toBe("");
+    });
+
+    it("parses Laravel ISO-8601 with microseconds and Z suffix", () => {
+        expect(formatDateTimeUTC("2026-03-27T15:00:00.000000Z")).toBe(
+            "27 Mar 2026, 15:00"
+        );
+    });
+
+    it("parses ISO-8601 with a Z suffix but no fractional seconds", () => {
+        expect(formatDateTimeUTC("2026-03-27T15:00:00Z")).toBe(
+            "27 Mar 2026, 15:00"
+        );
+    });
+});
+
+describe("formatRelative", () => {
+    const base = Date.UTC(2026, 2, 27, 15, 0, 0); // 2026-03-27 15:00:00 UTC
+
+    it("returns 'just now' for under a minute", () => {
+        expect(formatRelative("2026-03-27 14:59:30", base)).toBe("just now");
+    });
+
+    it("returns minutes for under an hour", () => {
+        expect(formatRelative("2026-03-27 14:55:00", base)).toBe("5m ago");
+    });
+
+    it("returns hours for under a day", () => {
+        expect(formatRelative("2026-03-27 12:00:00", base)).toBe("3h ago");
+    });
+
+    it("returns days for a day or more", () => {
+        expect(formatRelative("2026-03-25 15:00:00", base)).toBe("2d ago");
+    });
+
+    it("clamps future timestamps to 'just now'", () => {
+        expect(formatRelative("2026-03-27 15:00:30", base)).toBe("just now");
+    });
+
+    it("returns empty string for null input", () => {
+        expect(formatRelative(null, base)).toBe("");
+    });
+
+    it("returns empty string for malformed input (non-date string)", () => {
+        expect(formatRelative("not-a-date", base)).toBe("");
+    });
+
+    it("parses Laravel ISO-8601 timestamps (microseconds + Z) for the live-status label", () => {
+        // The monitor model's datetime cast serializes uptime_last_check_date
+        // as e.g. '2026-03-27T14:55:00.000000Z' — this must not resolve to "".
+        expect(formatRelative("2026-03-27T14:55:00.000000Z", base)).toBe(
+            "5m ago"
+        );
+    });
+});
diff --git a/resources/js/Utils/__tests__/heatmapCalendar.test.js b/resources/js/Utils/__tests__/heatmapCalendar.test.js
new file mode 100644
index 0000000..038587f
--- /dev/null
+++ b/resources/js/Utils/__tests__/heatmapCalendar.test.js
@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import {
+    buildYearGrid,
+    monthLabelColumns,
+    computeCellSize,
+} from "@/Utils/heatmapCalendar";
+
+describe("buildYearGrid", () => {
+    it("starts each week on Sunday and ends on Saturday", () => {
+        const { weeks } = buildYearGrid(2026);
+        for (const week of weeks) {
+            expect(week).toHaveLength(7);
+        }
+        // 2026-01-01 is a Thursday, so the first week's Sunday is 2025-12-28.
+        expect(weeks[0][0].iso).toBe("2025-12-28");
+        expect(weeks[0][0].inYear).toBe(false);
+    });
+
+    it("includes Jan 1 and Dec 31 of the target year as inYear cells", () => {
+        const { weeks } = buildYearGrid(2026);
+        const flat = weeks.flat();
+        const jan1 = flat.find((c) => c.iso === "2026-01-01");
+        const dec31 = flat.find((c) => c.iso === "2026-12-31");
+        expect(jan1.inYear).toBe(true);
+        expect(dec31.inYear).toBe(true);
+    });
+
+    it("marks padding days as inYear:false", () => {
+        const { weeks } = buildYearGrid(2026);
+        const flat = weeks.flat();
+        const padBefore = flat.find((c) => c.iso === "2025-12-31");
+        expect(padBefore.inYear).toBe(false);
+    });
+
+    it("counts exactly 365 in-year days for a common year", () => {
+        const { weeks } = buildYearGrid(2026);
+        const inYearCount = weeks.flat().filter((c) => c.inYear).length;
+        expect(inYearCount).toBe(365);
+    });
+
+    it("counts exactly 366 in-year days for the 2024 leap year", () => {
+        const { weeks } = buildYearGrid(2024);
+        const flat = weeks.flat();
+        const inYearCount = flat.filter((c) => c.inYear).length;
+        expect(inYearCount).toBe(366);
+        expect(flat.find((c) => c.iso === "2024-02-29").inYear).toBe(true);
+    });
+
+    it("pads to whole weeks (total cells divisible by 7)", () => {
+        const { weeks } = buildYearGrid(2024);
+        expect(weeks.flat().length % 7).toBe(0);
+    });
+});
+
+describe("monthLabelColumns", () => {
+    it("returns 12 month labels for a full year by default spacing", () => {
+        const { weeks } = buildYearGrid(2026);
+        const labels = monthLabelColumns(weeks);
+        expect(labels[0].label).toBe("Jan");
+        expect(labels.every((l) => /^[A-Z][a-z]{2}$/.test(l.label))).toBe(
+            true
+        );
+        // colIndex must be a valid, ascending week column.
+        for (let i = 1; i < labels.length; i += 1) {
+            expect(labels[i].colIndex).toBeGreaterThan(labels[i - 1].colIndex);
+            expect(labels[i].colIndex).toBeLessThan(weeks.length);
+        }
+    });
+
+    it("drops a label that is fewer than 3 columns from the previous kept one", () => {
+        // Two months whose day-1 columns are only 2 apart -> second is dropped.
+        const weeks = [
+            [{ iso: "2026-01-01", inYear: true }],
+            [{ iso: "2026-01-08", inYear: true }],
+            [{ iso: "2026-02-01", inYear: true }],
+        ];
+        const labels = monthLabelColumns(weeks);
+        expect(labels).toHaveLength(1);
+        expect(labels[0]).toEqual({ label: "Jan", colIndex: 0 });
+    });
+
+    it("keeps a label that is at least 3 columns from the previous kept one", () => {
+        const weeks = [
+            [{ iso: "2026-01-01", inYear: true }],
+            [{ iso: "2026-01-08", inYear: true }],
+            [{ iso: "2026-01-15", inYear: true }],
+            [{ iso: "2026-02-01", inYear: true }],
+        ];
+        const labels = monthLabelColumns(weeks);
+        expect(labels).toEqual([
+            { label: "Jan", colIndex: 0 },
+            { label: "Feb", colIndex: 3 },
+        ]);
+    });
+});
+
+describe("computeCellSize", () => {
+    const opts = { gap: 4, min: 8, max: 16 };
+
+    it("fits the cells plus gaps inside the container width", () => {
+        // 53 weeks, container 900px: (size+gap)*weeks - gap <= width.
+        const size = computeCellSize(900, 53, opts);
+        expect(size).toBeGreaterThanOrEqual(opts.min);
+        expect(size).toBeLessThanOrEqual(opts.max);
+        expect((size + opts.gap) * 53 - opts.gap).toBeLessThanOrEqual(900);
+    });
+
+    it("clamps to max when the container is very wide", () => {
+        expect(computeCellSize(5000, 53, opts)).toBe(16);
+    });
+
+    it("clamps to min when the container is very narrow", () => {
+        expect(computeCellSize(100, 53, opts)).toBe(8);
+    });
+
+    it("returns an integer", () => {
+        expect(Number.isInteger(computeCellSize(763, 53, opts))).toBe(true);
+    });
+
+    it("falls back to min for non-positive width", () => {
+        expect(computeCellSize(0, 53, opts)).toBe(8);
+    });
+
+    it("reserves the weekday-label offset so cells + offset fit the container", () => {
+        const reserved = 30;
+        const size = computeCellSize(900, 53, { ...opts, reserved });
+
+        // The grid plus the reserved left offset must fit inside the container.
+        expect((size + opts.gap) * 53 - opts.gap + reserved).toBeLessThanOrEqual(
+            900
+        );
+        // And reserving space must not produce a larger cell than ignoring it.
+        expect(size).toBeLessThanOrEqual(computeCellSize(900, 53, opts));
+    });
+});
diff --git a/resources/js/Utils/__tests__/smoke.test.js b/resources/js/Utils/__tests__/smoke.test.js
new file mode 100644
index 0000000..6a90c55
--- /dev/null
+++ b/resources/js/Utils/__tests__/smoke.test.js
@@ -0,0 +1,7 @@
+import { describe, it, expect } from "vitest";
+
+describe("vitest smoke", () => {
+    it("runs the test runner", () => {
+        expect(1 + 1).toBe(2);
+    });
+});
diff --git a/resources/js/Utils/checkStatusSeverity.js b/resources/js/Utils/checkStatusSeverity.js
index dce9dd9..801fbe1 100644
--- a/resources/js/Utils/checkStatusSeverity.js
+++ b/resources/js/Utils/checkStatusSeverity.js
@@ -62,3 +62,31 @@ export function mapUptimeStatusToCheckStatus(uptimeStatus) {
             return CHECK_STATUS.UNKNOWN;
     }
 }
+
+export const CHECK_TYPE_STATUSES = Object.freeze({
+    uptime: [CHECK_STATUS.SUCCESS, CHECK_STATUS.FAILED, CHECK_STATUS.UNKNOWN],
+    domain: [
+        CHECK_STATUS.SUCCESS,
+        CHECK_STATUS.WARNING,
+        CHECK_STATUS.FAILED,
+        CHECK_STATUS.UNKNOWN,
+    ],
+    certificate: [
+        CHECK_STATUS.SUCCESS,
+        CHECK_STATUS.FAILED,
+        CHECK_STATUS.UNKNOWN,
+    ],
+});
+
+const ALL_CHECK_STATUSES = [
+    CHECK_STATUS.SUCCESS,
+    CHECK_STATUS.WARNING,
+    CHECK_STATUS.FAILED,
+    CHECK_STATUS.UNKNOWN,
+];
+
+export function statusesForCheckType(checkType) {
+    const statuses = CHECK_TYPE_STATUSES[checkType] || ALL_CHECK_STATUSES;
+
+    return [...statuses];
+}
diff --git a/resources/js/Utils/formatDate.js b/resources/js/Utils/formatDate.js
new file mode 100644
index 0000000..1ee1ca6
--- /dev/null
+++ b/resources/js/Utils/formatDate.js
@@ -0,0 +1,99 @@
+// All formatting is done in UTC by design. The backend ships ISO strings that
+// have already been shifted into the configured server timezone, so we must NOT
+// re-shift them into the browser timezone (Global Constraint).
+
+function toUTCDate(iso) {
+    if (!iso) {
+        return null;
+    }
+
+    // Accept 'YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss' (the checked_at payload shape),
+    // and full ISO-8601 instants with fractional seconds + a zone designator
+    // (e.g. '2026-06-25T10:00:00.000000Z', the shape Laravel's datetime cast
+    // serializes uptime_last_check_date as). We read the wall-clock components
+    // directly and never re-shift into the browser timezone (Global Constraint).
+    let normalized = String(iso).trim().replace(" ", "T");
+    // Drop a trailing zone designator: 'Z' or a '+HH:mm' / '-HHmm' offset.
+    normalized = normalized.replace(/(?:Z|[+-]\d{2}:?\d{2})$/, "");
+    const [datePart, timePart = "00:00:00"] = normalized.split("T");
+    const [year, month, day] = datePart.split("-").map(Number);
+    // Drop fractional seconds (e.g. '00.000000' -> '00') before parsing.
+    const [hour = 0, minute = 0, second = 0] = timePart
+        .split(":")
+        .map((part) => Number(part.split(".")[0]));
+
+    if (!year || !month || !day) {
+        return null;
+    }
+
+    // Reject if any component is NaN (from malformed input).
+    if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day) ||
+        Number.isNaN(hour) || Number.isNaN(minute) || Number.isNaN(second)) {
+        return null;
+    }
+
+    return new Date(Date.UTC(year, month - 1, day, hour, minute, second));
+}
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+    timeZone: "UTC",
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+});
+
+const TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+    timeZone: "UTC",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+});
+
+export function formatDateUTC(iso) {
+    const date = toUTCDate(iso);
+
+    if (!date) {
+        return "";
+    }
+
+    // en-GB '2-digit/short/numeric' yields '27 Mar 2026'.
+    return DATE_FORMATTER.format(date);
+}
+
+export function formatDateTimeUTC(iso) {
+    const date = toUTCDate(iso);
+
+    if (!date) {
+        return "";
+    }
+
+    return `${DATE_FORMATTER.format(date)}, ${TIME_FORMATTER.format(date)}`;
+}
+
+export function formatRelative(iso, nowMs) {
+    const date = toUTCDate(iso);
+
+    if (!date) {
+        return "";
+    }
+
+    const deltaMs = Number(nowMs) - date.getTime();
+    const deltaSeconds = Math.floor(deltaMs / 1000);
+
+    if (deltaSeconds < 60) {
+        return "just now";
+    }
+
+    const deltaMinutes = Math.floor(deltaSeconds / 60);
+    if (deltaMinutes < 60) {
+        return `${deltaMinutes}m ago`;
+    }
+
+    const deltaHours = Math.floor(deltaMinutes / 60);
+    if (deltaHours < 24) {
+        return `${deltaHours}h ago`;
+    }
+
+    const deltaDays = Math.floor(deltaHours / 24);
+    return `${deltaDays}d ago`;
+}
diff --git a/resources/js/Utils/heatmapCalendar.js b/resources/js/Utils/heatmapCalendar.js
new file mode 100644
index 0000000..6451550
--- /dev/null
+++ b/resources/js/Utils/heatmapCalendar.js
@@ -0,0 +1,108 @@
+const MONTH_LABELS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+
+function isoFromUTCDate(date) {
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+    const day = String(date.getUTCDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+
+export function buildYearGrid(year) {
+    const yearStart = new Date(Date.UTC(year, 0, 1));
+    const yearEnd = new Date(Date.UTC(year, 11, 31));
+
+    // Pad back to the Sunday on/before Jan 1, forward to the Saturday on/after Dec 31.
+    const gridStart = new Date(
+        yearStart.getTime() - yearStart.getUTCDay() * MS_PER_DAY
+    );
+    const gridEnd = new Date(
+        yearEnd.getTime() + (6 - yearEnd.getUTCDay()) * MS_PER_DAY
+    );
+
+    const weeks = [];
+    let currentWeek = [];
+
+    for (
+        let cursor = gridStart.getTime();
+        cursor <= gridEnd.getTime();
+        cursor += MS_PER_DAY
+    ) {
+        const date = new Date(cursor);
+        currentWeek.push({
+            iso: isoFromUTCDate(date),
+            inYear: date.getUTCFullYear() === year,
+        });
+
+        if (currentWeek.length === 7) {
+            weeks.push(currentWeek);
+            currentWeek = [];
+        }
+    }
+
+    return { weeks };
+}
+
+export function monthLabelColumns(weeks) {
+    const labels = [];
+    let lastKeptColIndex = -Infinity;
+    const seenMonths = new Set();
+
+    weeks.forEach((week, colIndex) => {
+        for (const cell of week) {
+            if (!cell.inYear) {
+                continue;
+            }
+
+            const [, monthStr, dayStr] = cell.iso.split("-");
+            if (dayStr !== "01") {
+                continue;
+            }
+
+            const monthIndex = Number(monthStr) - 1;
+            if (seenMonths.has(monthIndex)) {
+                continue;
+            }
+            seenMonths.add(monthIndex);
+
+            if (colIndex - lastKeptColIndex < 3 && labels.length > 0) {
+                continue;
+            }
+
+            labels.push({ label: MONTH_LABELS[monthIndex], colIndex });
+            lastKeptColIndex = colIndex;
+        }
+    });
+
+    return labels;
+}
+
+export function computeCellSize(containerWidth, weekCount, opts) {
+    const { gap, min, max, reserved = 0 } = opts;
+
+    if (!containerWidth || containerWidth <= 0 || weekCount <= 0) {
+        return min;
+    }
+
+    // Subtract space the grid does not get: the weekday-label column and its
+    // trailing gap sit to the left of the week columns. Then total grid width =
+    // (size + gap) * weekCount - gap; solve for size.
+    const available = containerWidth - reserved;
+    const raw = Math.floor((available + gap) / weekCount) - gap;
+
+    return Math.max(min, Math.min(max, raw));
+}
diff --git a/resources/js/Utils/heatmapCell.js b/resources/js/Utils/heatmapCell.js
new file mode 100644
index 0000000..23813cc
--- /dev/null
+++ b/resources/js/Utils/heatmapCell.js
@@ -0,0 +1,107 @@
+import {
+    CHECK_STATUS,
+    normalizeCheckStatus,
+    getCheckStatusMeta,
+    statusesForCheckType,
+} from "@/Utils/checkStatusSeverity";
+
+const NO_DATA_CLASS = "bg-gray-100 border-gray-200";
+
+// Only uptime is high-frequency (many checks/day), so only uptime has a
+// meaningful per-day success ratio and per-day latency. Domain & certificate
+// run once a day → a single solid color per status, no gradient, no latency.
+export function isGradedCheckType(checkType) {
+    return checkType === "uptime";
+}
+
+// Uptime: one 4-band scale by the day's success percentage (highest band first).
+// Shared by the cells AND the legend so they always agree.
+export const UPTIME_BANDS = [
+    { min: 100, label: "100%", class: "bg-green-600 border-green-600" },
+    { min: 95, label: "95%+", class: "bg-green-400 border-green-400" },
+    { min: 90, label: "90%+", class: "bg-amber-400 border-amber-400" },
+    { min: 0, label: "<90%", class: "bg-red-500 border-red-500" },
+];
+
+// A day with only "unknown" checks (e.g. never-checked) has a 0% ratio but no
+// real failures — keep it gray rather than letting it fall into the red band.
+const UNKNOWN_DAY_CLASS = "bg-gray-300 border-gray-300";
+
+function uptimeBandClass(point) {
+    if (normalizeCheckStatus(point.worst_status) === CHECK_STATUS.UNKNOWN) {
+        return UNKNOWN_DAY_CLASS;
+    }
+    const ratio = Number(point.success_ratio || 0);
+    const band =
+        UPTIME_BANDS.find((entry) => ratio >= entry.min) ||
+        UPTIME_BANDS[UPTIME_BANDS.length - 1];
+
+    return band.class;
+}
+
+// Single solid color per status (domain / certificate). Shared by cells + legend.
+export const SINGLE_STATUS_CLASS = {
+    [CHECK_STATUS.SUCCESS]: "bg-green-600 border-green-600",
+    [CHECK_STATUS.WARNING]: "bg-orange-400 border-orange-400",
+    [CHECK_STATUS.FAILED]: "bg-red-600 border-red-600",
+    [CHECK_STATUS.UNKNOWN]: "bg-gray-400 border-gray-400",
+};
+
+export function cellColorClass(point, checkType) {
+    if (!point || point.total_checks === 0) {
+        return NO_DATA_CLASS;
+    }
+    if (isGradedCheckType(checkType)) {
+        return uptimeBandClass(point);
+    }
+    return (
+        SINGLE_STATUS_CLASS[normalizeCheckStatus(point.worst_status)] ||
+        SINGLE_STATUS_CLASS[CHECK_STATUS.UNKNOWN]
+    );
+}
+
+// Status -> [tooltip row label, daily_metrics count field]. Unknown has no
+// dedicated count field in daily_metrics, so it gets no count row.
+const COUNT_ROW = {
+    [CHECK_STATUS.SUCCESS]: ["Success", "successful_checks"],
+    [CHECK_STATUS.WARNING]: ["Warning", "warning_checks"],
+    [CHECK_STATUS.FAILED]: ["Failed", "failed_checks"],
+};
+
+// Per-metric tooltip body lines (no date / provisional note — the component adds those).
+export function cellMetricLines(point, checkType) {
+    if (!point || point.total_checks === 0) {
+        return ["No checks"];
+    }
+
+    const lines = [
+        `Status: ${getCheckStatusMeta(point.worst_status).label}`,
+        `Total checks: ${point.total_checks}`,
+    ];
+
+    // Only the status-count rows this check type can actually produce
+    // (uptime/certificate never warn, so no "Warning: 0" noise).
+    statusesForCheckType(checkType).forEach((status) => {
+        const row = COUNT_ROW[status];
+        if (row) {
+            lines.push(`${row[0]}: ${point[row[1]] ?? 0}`);
+        }
+    });
+
+    // For uptime the success ratio IS the day's uptime %; label it as such.
+    const ratioLabel = isGradedCheckType(checkType) ? "Uptime" : "Success ratio";
+    lines.push(`${ratioLabel}: ${point.success_ratio}%`);
+
+    // Latency only for uptime, and only when actually measured.
+    if (isGradedCheckType(checkType)) {
+        const { avg_response_time_ms: avg, p95_response_time_ms: p95 } = point;
+        if (avg !== null && avg !== undefined) {
+            lines.push(`Avg response: ${avg}ms`);
+        }
+        if (p95 !== null && p95 !== undefined) {
+            lines.push(`P95 response: ${p95}ms`);
+        }
+    }
+
+    return lines;
+}
diff --git a/resources/js/Utils/heatmapCell.test.js b/resources/js/Utils/heatmapCell.test.js
new file mode 100644
index 0000000..2302368
--- /dev/null
+++ b/resources/js/Utils/heatmapCell.test.js
@@ -0,0 +1,145 @@
+import { describe, it, expect } from "vitest";
+import { cellColorClass, cellMetricLines } from "@/Utils/heatmapCell";
+
+const upDay = (overrides = {}) => ({
+    date: "2026-08-01",
+    total_checks: 8,
+    successful_checks: 8,
+    warning_checks: 0,
+    failed_checks: 0,
+    success_ratio: 100,
+    worst_status: "success",
+    avg_response_time_ms: 157,
+    p95_response_time_ms: 205,
+    ...overrides,
+});
+
+describe("cellColorClass", () => {
+    it("returns the no-checks gray for empty/zero days regardless of type", () => {
+        expect(cellColorClass(null, "uptime")).toBe("bg-gray-100 border-gray-200");
+        expect(cellColorClass({ total_checks: 0 }, "domain")).toBe(
+            "bg-gray-100 border-gray-200"
+        );
+    });
+
+    it("colors uptime by success ratio in 4 bands (100 / 95+ / 90+ / <90)", () => {
+        expect(cellColorClass(upDay({ success_ratio: 100 }), "uptime")).toBe(
+            "bg-green-600 border-green-600"
+        );
+        expect(cellColorClass(upDay({ success_ratio: 95 }), "uptime")).toBe(
+            "bg-green-400 border-green-400"
+        );
+        expect(cellColorClass(upDay({ success_ratio: 99.9 }), "uptime")).toBe(
+            "bg-green-400 border-green-400"
+        );
+        expect(cellColorClass(upDay({ success_ratio: 90 }), "uptime")).toBe(
+            "bg-amber-400 border-amber-400"
+        );
+        expect(cellColorClass(upDay({ success_ratio: 94.9 }), "uptime")).toBe(
+            "bg-amber-400 border-amber-400"
+        );
+        expect(
+            cellColorClass(upDay({ worst_status: "failed", success_ratio: 89.9 }), "uptime")
+        ).toBe("bg-red-500 border-red-500");
+        expect(
+            cellColorClass(upDay({ worst_status: "failed", success_ratio: 0 }), "uptime")
+        ).toBe("bg-red-500 border-red-500");
+    });
+
+    it("keeps an all-unknown uptime day gray, not red", () => {
+        expect(
+            cellColorClass(
+                {
+                    total_checks: 2,
+                    successful_checks: 0,
+                    warning_checks: 0,
+                    failed_checks: 0,
+                    success_ratio: 0,
+                    worst_status: "unknown",
+                },
+                "uptime"
+            )
+        ).toBe("bg-gray-300 border-gray-300");
+    });
+
+    it("uses a SINGLE solid color per status for domain (no bands)", () => {
+        expect(
+            cellColorClass({ total_checks: 1, worst_status: "success", success_ratio: 100 }, "domain")
+        ).toBe("bg-green-600 border-green-600");
+        expect(
+            cellColorClass({ total_checks: 1, worst_status: "warning", success_ratio: 0 }, "domain")
+        ).toBe("bg-orange-400 border-orange-400");
+        expect(
+            cellColorClass({ total_checks: 1, worst_status: "failed", success_ratio: 0 }, "domain")
+        ).toBe("bg-red-600 border-red-600");
+    });
+
+    it("uses single solid colors for certificate too", () => {
+        expect(
+            cellColorClass({ total_checks: 1, worst_status: "success", success_ratio: 100 }, "certificate")
+        ).toBe("bg-green-600 border-green-600");
+        expect(
+            cellColorClass({ total_checks: 1, worst_status: "failed", success_ratio: 0 }, "certificate")
+        ).toBe("bg-red-600 border-red-600");
+    });
+});
+
+describe("cellMetricLines", () => {
+    it("returns a single No-checks line for empty days", () => {
+        expect(cellMetricLines(null, "uptime")).toEqual(["No checks"]);
+        expect(cellMetricLines({ total_checks: 0 }, "domain")).toEqual(["No checks"]);
+    });
+
+    it("uptime omits the Warning row, labels the ratio 'Uptime', and includes latency when present", () => {
+        const lines = cellMetricLines(upDay(), "uptime");
+        expect(lines).toContain("Total checks: 8");
+        expect(lines).toContain("Success: 8");
+        expect(lines).toContain("Failed: 0");
+        expect(lines.some((l) => l.startsWith("Warning:"))).toBe(false);
+        expect(lines).toContain("Uptime: 100%");
+        expect(lines.some((l) => l.startsWith("Success ratio"))).toBe(false);
+        expect(lines).toContain("Avg response: 157ms");
+        expect(lines).toContain("P95 response: 205ms");
+    });
+
+    it("uptime omits latency lines entirely when not measured (null)", () => {
+        const lines = cellMetricLines(
+            upDay({ avg_response_time_ms: null, p95_response_time_ms: null }),
+            "uptime"
+        );
+        expect(lines.some((l) => l.startsWith("Avg response"))).toBe(false);
+        expect(lines.some((l) => l.startsWith("P95 response"))).toBe(false);
+    });
+
+    it("domain includes the Warning row, labels the ratio 'Success ratio', and NEVER shows latency", () => {
+        const lines = cellMetricLines(
+            {
+                total_checks: 1,
+                successful_checks: 0,
+                warning_checks: 1,
+                failed_checks: 0,
+                success_ratio: 0,
+                worst_status: "warning",
+                avg_response_time_ms: 157,
+                p95_response_time_ms: 205,
+            },
+            "domain"
+        );
+        expect(lines).toContain("Warning: 1");
+        expect(lines).toContain("Success: 0");
+        expect(lines).toContain("Failed: 0");
+        expect(lines).toContain("Success ratio: 0%");
+        expect(lines.some((l) => l.startsWith("Uptime:"))).toBe(false);
+        expect(lines.some((l) => l.startsWith("Avg response"))).toBe(false);
+        expect(lines.some((l) => l.startsWith("P95 response"))).toBe(false);
+    });
+
+    it("certificate omits Warning row and latency", () => {
+        const lines = cellMetricLines(
+            { total_checks: 1, successful_checks: 1, warning_checks: 0, failed_checks: 0, success_ratio: 100, worst_status: "success" },
+            "certificate"
+        );
+        expect(lines.some((l) => l.startsWith("Warning:"))).toBe(false);
+        expect(lines.some((l) => l.startsWith("Avg response"))).toBe(false);
+    });
+});
diff --git a/resources/js/Utils/historyParams.js b/resources/js/Utils/historyParams.js
new file mode 100644
index 0000000..2f3fffe
--- /dev/null
+++ b/resources/js/Utils/historyParams.js
@@ -0,0 +1,14 @@
+// Builds the full history param set for an Inertia partial visit by merging
+// the current param set with a control's change. Keys whose override value is
+// null/undefined are removed entirely so they fall back to the server default.
+export function buildHistoryParams(current, overrides) {
+    const merged = { ...current, ...overrides };
+
+    Object.keys(merged).forEach((key) => {
+        if (merged[key] === null || merged[key] === undefined) {
+            delete merged[key];
+        }
+    });
+
+    return merged;
+}
diff --git a/resources/js/Utils/historyParams.test.js b/resources/js/Utils/historyParams.test.js
new file mode 100644
index 0000000..b701f68
--- /dev/null
+++ b/resources/js/Utils/historyParams.test.js
@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { buildHistoryParams } from "@/Utils/historyParams";
+
+describe("buildHistoryParams", () => {
+    const current = {
+        year: 2026,
+        preset: "30d",
+        from: "2026-05-01",
+        to: "2026-05-31",
+        recent_type: "uptime",
+        recent_page: 3,
+    };
+
+    it("returns the full current param set when no overrides are given", () => {
+        expect(buildHistoryParams(current, {})).toEqual({
+            year: 2026,
+            preset: "30d",
+            from: "2026-05-01",
+            to: "2026-05-31",
+            recent_type: "uptime",
+            recent_page: 3,
+        });
+    });
+
+    it("merges overrides over the current set without mutating current", () => {
+        const result = buildHistoryParams(current, { year: 2025 });
+        expect(result.year).toBe(2025);
+        expect(result.preset).toBe("30d");
+        expect(current.year).toBe(2026);
+    });
+
+    it("applies multiple overrides at once", () => {
+        const result = buildHistoryParams(current, {
+            recent_type: "domain",
+            recent_page: 1,
+        });
+        expect(result.recent_type).toBe("domain");
+        expect(result.recent_page).toBe(1);
+    });
+
+    it("drops keys whose override value is null or undefined", () => {
+        const result = buildHistoryParams(current, { from: null, to: undefined });
+        expect("from" in result).toBe(false);
+        expect("to" in result).toBe(false);
+        expect(result.preset).toBe("30d");
+    });
+
+    it("tolerates a partial current object", () => {
+        expect(buildHistoryParams({ year: 2026 }, { recent_page: 2 })).toEqual({
+            year: 2026,
+            recent_page: 2,
+        });
+    });
+});
diff --git a/resources/js/Utils/recentStrip.js b/resources/js/Utils/recentStrip.js
new file mode 100644
index 0000000..f8f1ec4
--- /dev/null
+++ b/resources/js/Utils/recentStrip.js
@@ -0,0 +1,12 @@
+// Build the strip's slot array from a newest-first `checks` list.
+// Returns an array of length `capacity` (left -> right): leading nulls are gray
+// placeholders when there are fewer checks than slots; the most-recent checks
+// trail with the NEWEST at the last (right-most) index.
+export function stripSlots(checks, capacity) {
+    const cap = Math.max(0, capacity);
+    const recent = checks.slice(0, cap); // most-recent `cap`, still newest-first
+    const ordered = recent.slice().reverse(); // oldest -> newest (newest last)
+    const padCount = Math.max(0, cap - ordered.length);
+
+    return [...Array(padCount).fill(null), ...ordered];
+}
diff --git a/resources/js/Utils/recentStrip.test.js b/resources/js/Utils/recentStrip.test.js
new file mode 100644
index 0000000..87270d9
--- /dev/null
+++ b/resources/js/Utils/recentStrip.test.js
@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { stripSlots } from "@/Utils/recentStrip";
+
+const c = (id) => ({ id });
+
+describe("stripSlots", () => {
+    it("returns all-gray (null) when there are no checks", () => {
+        expect(stripSlots([], 3)).toEqual([null, null, null]);
+    });
+
+    it("right-aligns checks (newest last) and gray-pads the left", () => {
+        // newest-first input: c3 newest, c1 oldest
+        expect(stripSlots([c(3), c(2), c(1)], 5)).toEqual([
+            null,
+            null,
+            c(1),
+            c(2),
+            c(3),
+        ]);
+    });
+
+    it("fills exactly with no padding when checks === capacity", () => {
+        expect(stripSlots([c(3), c(2), c(1)], 3)).toEqual([c(1), c(2), c(3)]);
+    });
+
+    it("keeps only the most-recent `capacity` checks (newest on the right)", () => {
+        const five = [c(5), c(4), c(3), c(2), c(1)]; // newest-first
+        expect(stripSlots(five, 3)).toEqual([c(3), c(4), c(5)]);
+    });
+
+    it("handles zero/negative capacity safely", () => {
+        expect(stripSlots([c(1)], 0)).toEqual([]);
+        expect(stripSlots([c(1)], -2)).toEqual([]);
+    });
+});
diff --git a/tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php b/tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php
new file mode 100644
index 0000000..3ada3ca
--- /dev/null
+++ b/tests/Feature/MonitorHistory/MonitorHistoryGraphTest.php
@@ -0,0 +1,293 @@
+<?php
+
+namespace Tests\Feature\MonitorHistory;
+
+use App\Models\Monitor;
+use App\Models\User;
+use App\Services\MonitorCheckLogService;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class MonitorHistoryGraphTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        config(['monitor-history.enabled' => true]);
+    }
+
+    private function makeMonitor(array $attributes = []): Monitor
+    {
+        return Monitor::create(array_merge([
+            'url' => 'https://example-'.uniqid().'.com',
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => false,
+            'certificate_check_enabled' => false,
+        ], $attributes));
+    }
+
+    private function seedUptimeLog(Monitor $monitor, string $status, string $checkedAt): void
+    {
+        app(MonitorCheckLogService::class)->logCheck(
+            monitor: $monitor,
+            checkType: MonitorCheckLogService::CHECK_TYPE_UPTIME,
+            status: $status,
+            checkedAt: Carbon::parse($checkedAt),
+        );
+    }
+
+    public function test_graph_check_types_exclude_certificate(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor([
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => true,
+            'certificate_check_enabled' => true,
+        ]);
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.check_types', fn ($types) => collect($types)->pluck('type')->all() === ['uptime', 'domain']
+                && collect($types)->firstWhere('type', 'uptime')['enabled'] === true
+                && collect($types)->firstWhere('type', 'domain')['enabled'] === true
+            )
+        );
+    }
+
+    public function test_graph_year_defaults_to_current_year_when_no_param(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.year', (int) Carbon::now('UTC')->format('Y'))
+        );
+    }
+
+    public function test_graph_year_param_overrides_default(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-05-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => 2024,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.year', 2024)
+        );
+    }
+
+    public function test_available_years_span_earliest_data_year_through_current_year(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-01-15 10:00:00');
+
+        $currentYear = (int) Carbon::now('UTC')->format('Y');
+        $expected = range(2024, $currentYear);
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.available_years', $expected)
+        );
+    }
+
+    public function test_available_years_falls_back_to_current_year_when_no_data(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.available_years', [(int) Carbon::now('UTC')->format('Y')])
+        );
+    }
+
+    public function test_graph_daily_metrics_are_scoped_to_the_graph_year_not_the_filter_range(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-02-01 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-11-20 10:00:00');
+
+        $this->artisan('monitor:aggregate-check-metrics', [
+            '--from' => '2024-02-01',
+            '--to' => '2024-02-01',
+        ])->assertSuccessful();
+        $this->artisan('monitor:aggregate-check-metrics', [
+            '--from' => '2024-11-20',
+            '--to' => '2024-11-20',
+        ])->assertSuccessful();
+
+        // Filter range (preset/from/to) is narrow and in a different year — graph must ignore it.
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => 2024,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.daily_metrics', 2)
+            ->where('graph.series.uptime.daily_metrics.0.date', '2024-02-01')
+            ->where('graph.series.uptime.daily_metrics.1.date', '2024-11-20')
+        );
+    }
+
+    public function test_graph_per_type_summary_counts_only_that_years_logs(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-04-10 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, '2024-04-11 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2025-04-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => 2024,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.series.uptime.summary.total_checks', 2)
+            ->where('graph.series.uptime.summary.status_totals.success', 1)
+            ->where('graph.series.uptime.summary.status_totals.failed', 1)
+            ->where('graph.series.uptime.summary.success_ratio', 50)
+        );
+    }
+
+    public function test_graph_today_iso_equals_server_timezone_today(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $serverTz = config('monitor-history.timezone') ?: config('app.timezone', 'UTC');
+        $expectedTodayIso = Carbon::now($serverTz)->toDateString();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.today_iso', $expectedTodayIso)
+        );
+    }
+
+    public function test_latest_checks_are_newest_first_and_span_days(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $todayMorning = Carbon::now('UTC')->startOfDay()->addHours(8);
+        $todayNoon = Carbon::now('UTC')->startOfDay()->addHours(12);
+        $yesterday = Carbon::now('UTC')->subDay()->setTime(10, 0);
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, $todayMorning->toDateTimeString());
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, $todayNoon->toDateTimeString());
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, $yesterday->toDateTimeString());
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => (int) Carbon::now('UTC')->format('Y'),
+        ]));
+
+        // All three rows (incl. yesterday) — not today-bounded — newest first.
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.latest_checks', 3)
+            ->where('graph.series.uptime.latest_checks.0.status', MonitorCheckLogService::STATUS_FAILED)
+            ->where('graph.series.uptime.latest_checks.1.status', MonitorCheckLogService::STATUS_SUCCESS)
+            ->where('graph.series.uptime.latest_checks.2.status', MonitorCheckLogService::STATUS_SUCCESS)
+        );
+    }
+
+    public function test_graph_exposes_the_recent_checks_limit_from_config(): void
+    {
+        config(['monitor-history.recent_checks_limit' => 120]);
+
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        // The cap is shipped so the frontend strip uses the same number as its
+        // slot cap — backend latest_checks limit and frontend maxSlots stay in sync.
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph.recent_checks_limit', 120)
+        );
+    }
+
+    public function test_latest_checks_are_capped_at_the_configured_limit(): void
+    {
+        config(['monitor-history.recent_checks_limit' => 120]);
+
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $base = Carbon::now('UTC')->startOfDay()->addHours(1);
+        for ($i = 0; $i < 130; $i++) {
+            $this->seedUptimeLog(
+                $monitor,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                $base->copy()->addMinutes($i)->toDateTimeString()
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => (int) Carbon::now('UTC')->format('Y'),
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.latest_checks', 120)
+        );
+    }
+
+    public function test_latest_checks_are_capped_at_one_hundred_fifty(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $base = Carbon::now('UTC')->startOfDay()->addHours(1);
+        for ($i = 0; $i < 160; $i++) {
+            $this->seedUptimeLog(
+                $monitor,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                $base->copy()->addMinutes($i)->toDateTimeString()
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'year' => (int) Carbon::now('UTC')->format('Y'),
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->has('graph.series.uptime.latest_checks', 150)
+        );
+    }
+}
diff --git a/tests/Feature/MonitorHistory/MonitorHistoryRecentChecksTest.php b/tests/Feature/MonitorHistory/MonitorHistoryRecentChecksTest.php
new file mode 100644
index 0000000..a7abaf1
--- /dev/null
+++ b/tests/Feature/MonitorHistory/MonitorHistoryRecentChecksTest.php
@@ -0,0 +1,197 @@
+<?php
+
+namespace Tests\Feature\MonitorHistory;
+
+use App\Models\Monitor;
+use App\Models\User;
+use App\Services\MonitorCheckLogService;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class MonitorHistoryRecentChecksTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        config(['monitor-history.enabled' => true]);
+    }
+
+    private function makeMonitor(array $attributes = []): Monitor
+    {
+        return Monitor::create(array_merge([
+            'url' => 'https://example-'.uniqid().'.com',
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => true,
+            'certificate_check_enabled' => false,
+        ], $attributes));
+    }
+
+    private function seedLog(Monitor $monitor, string $checkType, string $status, string $checkedAt, ?int $responseTimeMs = null): void
+    {
+        app(MonitorCheckLogService::class)->logCheck(
+            monitor: $monitor,
+            checkType: $checkType,
+            status: $status,
+            checkedAt: Carbon::parse($checkedAt),
+            responseTimeMs: $responseTimeMs,
+        );
+    }
+
+    public function test_recent_checks_pagination_shape_uses_page_size_25(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        for ($i = 0; $i < 30; $i++) {
+            $this->seedLog(
+                $monitor,
+                MonitorCheckLogService::CHECK_TYPE_UPTIME,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                Carbon::parse('2026-03-10 00:00:00')->addMinutes($i)->toDateTimeString(),
+                120,
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'uptime')
+            ->has('recentChecks.data', 25)
+            ->where('recentChecks.pagination.per_page', 25)
+            ->where('recentChecks.pagination.current_page', 1)
+            ->where('recentChecks.pagination.last_page', 2)
+            ->where('recentChecks.pagination.total', 30)
+            ->where('recentChecks.data.0.response_time_ms', 120)
+        );
+    }
+
+    public function test_recent_checks_respect_recent_page(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        for ($i = 0; $i < 30; $i++) {
+            $this->seedLog(
+                $monitor,
+                MonitorCheckLogService::CHECK_TYPE_UPTIME,
+                MonitorCheckLogService::STATUS_SUCCESS,
+                Carbon::parse('2026-03-10 00:00:00')->addMinutes($i)->toDateTimeString(),
+            );
+        }
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+            'recent_page' => 2,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.pagination.current_page', 2)
+            ->has('recentChecks.data', 5)
+        );
+    }
+
+    public function test_recent_checks_filter_by_recent_type(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_DOMAIN, MonitorCheckLogService::STATUS_WARNING, '2026-03-11 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+            'recent_type' => 'domain',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'domain')
+            ->has('recentChecks.data', 1)
+            ->where('recentChecks.data.0.check_type', 'domain')
+            ->where('recentChecks.data.0.status', MonitorCheckLogService::STATUS_WARNING)
+        );
+    }
+
+    public function test_recent_checks_default_type_is_uptime(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'uptime')
+        );
+    }
+
+    public function test_recent_checks_reject_an_unsupported_type_and_fall_back_to_uptime(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_DOMAIN, MonitorCheckLogService::STATUS_WARNING, '2026-03-11 10:00:00');
+
+        // 'certificate' is a real check type but NOT a selectable recent tab —
+        // an out-of-whitelist value must fall back to uptime, never echo through.
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+            'recent_type' => MonitorCheckLogService::CHECK_TYPE_CERTIFICATE,
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.type', 'uptime')
+            ->has('recentChecks.data', 1)
+            ->where('recentChecks.data.0.check_type', 'uptime')
+        );
+    }
+
+    public function test_recent_checks_respect_the_selected_range(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedLog($monitor, MonitorCheckLogService::CHECK_TYPE_UPTIME, MonitorCheckLogService::STATUS_FAILED, '2025-01-01 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('recentChecks.pagination.total', 1)
+        );
+    }
+}
diff --git a/tests/Feature/MonitorHistory/MonitorHistoryShowTest.php b/tests/Feature/MonitorHistory/MonitorHistoryShowTest.php
index d077e2f..4f8bcb1 100644
--- a/tests/Feature/MonitorHistory/MonitorHistoryShowTest.php
+++ b/tests/Feature/MonitorHistory/MonitorHistoryShowTest.php
@@ -7,6 +7,7 @@
 use App\Services\MonitorCheckLogService;
 use Carbon\Carbon;
 use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\DB;
 use Tests\TestCase;
 
 class MonitorHistoryShowTest extends TestCase
@@ -64,12 +65,13 @@ public function test_heatmap_metrics_are_returned_even_when_the_client_requests_
             'monitor' => $monitor->id,
             'preset' => 'all',
             'timezone' => 'Asia/Kolkata',
+            'year' => 2026,
         ]));
 
         $response->assertOk();
         $response->assertInertia(fn ($page) => $page
             ->component('Monitors/Show')
-            ->has('history.daily_metrics.uptime', 1)
+            ->has('graph.series.uptime.daily_metrics', 1)
         );
     }
 
@@ -86,9 +88,9 @@ public function test_payload_advertises_each_check_type_with_its_enabled_flag():
 
         $response->assertInertia(fn ($page) => $page
             ->component('Monitors/Show')
-            ->where('history.check_types', fn ($types) => collect($types)->firstWhere('type', 'uptime')['enabled'] === true
+            ->where('graph.check_types', fn ($types) => collect($types)->pluck('type')->all() === ['uptime', 'domain']
+                && collect($types)->firstWhere('type', 'uptime')['enabled'] === true
                 && collect($types)->firstWhere('type', 'domain')['enabled'] === false
-                && collect($types)->firstWhere('type', 'certificate')['enabled'] === false
             )
         );
     }
@@ -110,7 +112,54 @@ public function test_recent_checks_are_limited_to_the_selected_range(): void
 
         $response->assertInertia(fn ($page) => $page
             ->component('Monitors/Show')
-            ->has('history.recent_checks', 1)
+            ->where('recentChecks.pagination.total', 1)
+        );
+    }
+
+    public function test_show_resolves_earliest_check_with_a_single_query(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2024-01-15 10:00:00');
+
+        DB::enableQueryLog();
+
+        $this->actingAs($user)->get(route('monitors.show', $monitor->id))->assertOk();
+
+        // The earliest-check (MIN checked_at) lookup is `order by checked_at asc limit 1`.
+        // The range, available-years and summary all derive from it, so it must be
+        // resolved once and threaded through — not re-queried per consumer.
+        $earliestCheckQueries = collect(DB::getQueryLog())
+            ->filter(fn ($entry) => str_contains(
+                strtolower($entry['query']),
+                'order by `checked_at` asc'
+            ))
+            ->count();
+
+        DB::disableQueryLog();
+
+        $this->assertSame(
+            1,
+            $earliestCheckQueries,
+            'show() should resolve the earliest check exactly once per request.'
+        );
+    }
+
+    public function test_history_props_are_null_when_feature_disabled(): void
+    {
+        config(['monitor-history.enabled' => false]);
+
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('graph', null)
+            ->where('filters', null)
+            ->where('summary', null)
+            ->where('recentChecks', null)
         );
     }
 }
diff --git a/tests/Feature/MonitorHistory/MonitorHistorySummaryTest.php b/tests/Feature/MonitorHistory/MonitorHistorySummaryTest.php
new file mode 100644
index 0000000..c77d33d
--- /dev/null
+++ b/tests/Feature/MonitorHistory/MonitorHistorySummaryTest.php
@@ -0,0 +1,136 @@
+<?php
+
+namespace Tests\Feature\MonitorHistory;
+
+use App\Models\Monitor;
+use App\Models\User;
+use App\Services\MonitorCheckLogService;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class MonitorHistorySummaryTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        config(['monitor-history.enabled' => true]);
+    }
+
+    private function makeMonitor(array $attributes = []): Monitor
+    {
+        return Monitor::create(array_merge([
+            'url' => 'https://example-'.uniqid().'.com',
+            'uptime_check_enabled' => true,
+            'domain_check_enabled' => false,
+            'certificate_check_enabled' => false,
+        ], $attributes));
+    }
+
+    private function seedUptimeLog(Monitor $monitor, string $status, string $checkedAt): void
+    {
+        app(MonitorCheckLogService::class)->logCheck(
+            monitor: $monitor,
+            checkType: MonitorCheckLogService::CHECK_TYPE_UPTIME,
+            status: $status,
+            checkedAt: Carbon::parse($checkedAt),
+        );
+    }
+
+    public function test_filters_prop_reports_resolved_preset_and_range(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('filters.preset', 'custom')
+            ->where('filters.from', '2026-03-01')
+            ->where('filters.to', '2026-03-31')
+            ->has('filters.timezone')
+        );
+    }
+
+    public function test_summary_selected_range_differs_from_all_time(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_FAILED, '2025-01-01 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', [
+            'monitor' => $monitor->id,
+            'preset' => 'custom',
+            'from' => '2026-03-01',
+            'to' => '2026-03-31',
+        ]));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.all_time.total_checks', 2)
+            ->where('summary.selected_range.total_checks', 1)
+            ->where('summary.selected_range.by_type.uptime.total_checks', 1)
+        );
+    }
+
+    public function test_summary_first_checked_at_is_earliest_log_in_timezone(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2025-01-01 10:00:00');
+        $this->seedUptimeLog($monitor, MonitorCheckLogService::STATUS_SUCCESS, '2026-03-10 10:00:00');
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.first_checked_at', '2025-01-01 10:00:00')
+        );
+    }
+
+    public function test_summary_first_checked_at_is_null_when_no_logs(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.first_checked_at', null)
+        );
+    }
+
+    public function test_never_monitored_monitor_returns_a_zeroed_empty_state_payload(): void
+    {
+        $user = User::factory()->create();
+        $monitor = $this->makeMonitor();
+
+        $response = $this->actingAs($user)->get(route('monitors.show', $monitor->id));
+
+        // Pins the empty-state contract the SummaryStats / RecentChecks UI relies on
+        // to distinguish "never monitored" from "no checks in range": the props are
+        // present and zeroed, not null and not absent.
+        $response->assertInertia(fn ($page) => $page
+            ->component('Monitors/Show')
+            ->where('summary.first_checked_at', null)
+            ->where('summary.all_time.total_checks', 0)
+            ->where('summary.selected_range.total_checks', 0)
+            ->where('graph.series.uptime.summary.total_checks', 0)
+            ->has('graph.series.uptime.daily_metrics', 0)
+            ->where('recentChecks.pagination.total', 0)
+            ->has('recentChecks.data', 0)
+        );
+    }
+}
diff --git a/vitest.config.js b/vitest.config.js
new file mode 100644
index 0000000..d2abcff
--- /dev/null
+++ b/vitest.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import { fileURLToPath } from "node:url";
+
+export default defineConfig({
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./resources/js", import.meta.url)),
+        },
+    },
+    test: {
+        environment: "node",
+        include: ["resources/js/**/*.{test,spec}.{js,jsx}"],
+        globals: false,
+    },
+});
+