cachethq · jbrooksuk · Aug 25, 2026 · Aug 25, 2026
diff --git a/resources/views/components/about.blade.php b/resources/views/components/about.blade.php
@@ -1,13 +1,13 @@
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_ABOUT_BEFORE) }}
 
 @if ($showSiteName || ($showAbout && $about !== ''))
-    <div class="flex flex-col gap-3">
+    <section data-component="about" class="flex flex-col gap-3">
         @if ($showSiteName)
-            <h1 class="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-2xl">{{ $title }}</h1>
+            <h1 data-slot="title" class="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-2xl">{{ $title }}</h1>
         @endif
 
         @if ($showAbout && $about !== '')
-            <div class="prose prose-zinc max-w-none dark:prose-invert
+            <div data-slot="description" class="prose prose-zinc max-w-none dark:prose-invert
                         prose-headings:tracking-tight prose-headings:text-zinc-900 dark:prose-headings:text-zinc-100
                         prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-300
                         prose-a:font-medium prose-a:text-accent-content prose-a:underline prose-a:underline-offset-2
@@ -16,7 +16,7 @@
                 {!! $about !!}
             </div>
         @endif
-    </div>
+    </section>
 @endif
 
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_ABOUT_AFTER) }}
diff --git a/resources/views/components/badge.blade.php b/resources/views/components/badge.blade.php
@@ -1,3 +1,3 @@
-<x-filament::badge :color="$color" :icon="$icon">
+<x-filament::badge data-component="badge" :color="$color" :icon="$icon">
     {{ $label }}
 </x-filament::badge>
diff --git a/resources/views/components/cachet.blade.php b/resources/views/components/cachet.blade.php
@@ -47,7 +47,7 @@
             {!! $cachet_css !!}
         </style>
     </head>
-    <body class="flex min-h-screen flex-col items-stretch antialiased">
+    <body data-page="{{ $page }}" class="flex min-h-screen flex-col items-stretch antialiased">
         {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_BODY_BEFORE) }}
         {{ $slot }}
 

diff --git a/resources/views/components/component-group.blade.php b/resources/views/components/component-group.blade.php
@@ -2,30 +2,30 @@
 
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_COMPONENT_GROUPS_BEFORE) }}
 @php($showComponentGroupStatus = app(\Cachet\Settings\AppSettings::class)->show_component_group_status)
-<li x-data x-disclosure @if ($componentGroup->isExpanded(auth()->user())) default-open @endif>
-    <button x-disclosure:button class="relative flex w-full flex-col items-start gap-2 py-4 pl-6 pr-4 text-left transition hover:bg-zinc-50/60 dark:hover:bg-white/[0.02] sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:py-5 sm:pl-6 sm:pr-6">
-    <span class="absolute left-2 top-7 -translate-y-1/2 text-zinc-400 dark:text-zinc-500 sm:top-1/2">
+<li data-component="component-group" data-component-group-id="{{ $componentGroup->getKey() }}" x-data x-disclosure @if ($componentGroup->isExpanded(auth()->user())) default-open @endif>
+    <button data-slot="trigger" x-disclosure:button class="relative flex w-full flex-col items-start gap-2 py-4 pl-6 pr-4 text-left transition hover:bg-zinc-50/60 dark:hover:bg-white/[0.02] sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:py-5 sm:pl-6 sm:pr-6">
+    <span data-slot="indicator" class="absolute left-2 top-7 -translate-y-1/2 text-zinc-400 dark:text-zinc-500 sm:top-1/2">
             <x-heroicon-m-chevron-right ::class="$disclosure.isOpen && 'rotate-90'" class="size-3.5 transition" />
         </span>
 
-        <h2 class="min-w-0 truncate font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+        <h2 data-slot="title" class="min-w-0 truncate font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
             {{ $componentGroup->name }}
         </h2>
 
         @if ($showComponentGroupStatus)
             @php($groupStatus = $componentGroup->worstComponentStatus())
-            <span class="shrink-0 text-sm font-semibold tracking-tight {{ $groupStatus->getTextColorClasses() }}">
+            <span data-slot="status" class="shrink-0 text-sm font-semibold tracking-tight {{ $groupStatus->getTextColorClasses() }}">
                 {{ $groupStatus->getLabel() }}
             </span>
         @else
-            <span class="shrink-0 text-sm font-semibold tracking-tight text-zinc-600 dark:text-zinc-300">
+            <span data-slot="status" class="shrink-0 text-sm font-semibold tracking-tight text-zinc-600 dark:text-zinc-300">
                 {{ trans_choice('cachet::component_group.incident_count', $componentGroup->openIncidentCount()) }}
             </span>
         @endif
     </button>
 
-    <div x-disclosure:panel x-collapse class="border-t border-zinc-900/10 dark:border-white/15">
-        <ul class="divide-y divide-zinc-900/10 dark:divide-white/15">
+    <div data-slot="content" x-disclosure:panel x-collapse class="border-t border-zinc-900/10 dark:border-white/15">
+        <ul data-slot="list" class="divide-y divide-zinc-900/10 dark:divide-white/15">
             @foreach ($componentGroup->components as $component)
                 <x-cachet::component :component="$component" :nested="true" />
             @endforeach

diff --git a/resources/views/components/component-groups.blade.php b/resources/views/components/component-groups.blade.php
@@ -1,6 +1,6 @@
 @if ($componentGroups->isNotEmpty() || $ungroupedComponents->isNotEmpty())
-    <div class="status-components group relative">
-        <ul class="divide-y divide-zinc-900/10 dark:divide-white/15">
+    <div data-component="component-list" class="status-components group relative">
+        <ul data-slot="list" class="divide-y divide-zinc-900/10 dark:divide-white/15">
             @foreach ($componentGroups as $componentGroup)
                 <x-cachet::component-group :component-group="$componentGroup" />
             @endforeach

diff --git a/resources/views/components/component-ungrouped.blade.php b/resources/views/components/component-ungrouped.blade.php
@@ -1,9 +1,9 @@
 @props(['component' => null])
 
-<div class="group relative overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-zinc-900/10 dark:bg-zinc-900 dark:ring-white/15">
+<div data-component="component-list" class="group relative overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-zinc-900/10 dark:bg-zinc-900 dark:ring-white/15">
     <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent/40 to-transparent" aria-hidden="true"></div>
 
-    <ul>
+    <ul data-slot="list">
         <x-cachet::component :component="$component" />
     </ul>
 </div>
diff --git a/resources/views/components/component.blade.php b/resources/views/components/component.blade.php
@@ -1,17 +1,17 @@
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_COMPONENTS_BEFORE) }}
-<li class="relative px-4 py-4 transition hover:bg-zinc-50/60 dark:hover:bg-white/[0.02] sm:px-6 sm:py-5">
-    <div class="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+<li data-component="component" data-component-id="{{ $component->getKey() }}" class="relative px-4 py-4 transition hover:bg-zinc-50/60 dark:hover:bg-white/[0.02] sm:px-6 sm:py-5">
+    <div data-slot="content" class="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
         <div class="flex min-w-0 items-center gap-1.5">
             @if ($nested ?? false)
-                <h3 class="truncate tracking-tight text-zinc-600 dark:text-zinc-300">
+                <h3 data-slot="title" class="truncate tracking-tight text-zinc-600 dark:text-zinc-300">
                     @if($component->formattedLink())
                         <a href="{{ $component->formattedLink() }}" target="_blank" rel="nofollow noopener" class="before:absolute before:inset-0 before:content-['']">{{ $component->name }}</a>
                     @else
                         {{ $component->name }}
                     @endif
                 </h3>
             @else
-                <h2 class="truncate font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+                <h2 data-slot="title" class="truncate font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
                     @if($component->formattedLink())
                         <a href="{{ $component->formattedLink() }}" target="_blank" rel="nofollow noopener" class="before:absolute before:inset-0 before:content-['']">{{ $component->name }}</a>
                     @else
@@ -21,7 +21,7 @@
             @endif
 
             @if($component->description)
-                <div x-data x-popover class="relative flex shrink-0 items-center">
+                <div data-slot="description" x-data x-popover class="relative flex shrink-0 items-center">
                     <button type="button" x-ref="anchor" x-popover:button aria-label="{{ __('cachet::component.description_label', ['component' => $component->name]) }}" class="flex size-10 items-center justify-center rounded-full text-zinc-400 transition hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-200">
                         <x-heroicon-o-information-circle class="size-4" />
                     </button>
@@ -33,7 +33,7 @@
             @endif
 
             @if (app(\Cachet\Settings\AppSettings::class)->show_component_tags && $component->tags->isNotEmpty())
-                <div class="mt-2 flex flex-wrap gap-1.5">
+                <div data-slot="tags" class="mt-2 flex flex-wrap gap-1.5">
                     @foreach ($component->tags as $tag)
                         <span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">{{ $tag->name }}</span>
                     @endforeach
@@ -47,6 +47,7 @@
                  @mouseleave="tooltipOpen = false"
                  @focusin="tooltipOpen = true"
                  @focusout="tooltipOpen = false"
+                 data-slot="status"
                  class="relative shrink-0">
                 <div x-ref="badgeAnchor">
                     @if ($component->impacting_incident)

diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
@@ -1,8 +1,10 @@
-@if ($showSupport || $showTimezone)
-    <footer class="mt-auto border-t border-zinc-900/10 dark:border-white/15">
-        <div class="container mx-auto flex max-w-5xl flex-col items-center justify-center gap-3 px-4 py-8 text-center text-xs text-zinc-500 dark:text-zinc-400 sm:px-6 lg:px-8">
+@php($footerHook = \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::FOOTER))
+
+@if ($showSupport || $showTimezone || (string) $footerHook !== '')
+    <footer data-component="footer" class="mt-auto border-t border-zinc-900/10 dark:border-white/15">
+        <div data-slot="content" class="container mx-auto flex max-w-5xl flex-col items-center justify-center gap-3 px-4 py-8 text-center text-xs text-zinc-500 dark:text-zinc-400 sm:px-6 lg:px-8">
             @if($showSupport)
-                <div class="inline-flex items-center gap-2 tracking-tight">
+                <div data-slot="support" class="inline-flex items-center gap-2 tracking-tight">
                     <span>{{ __('cachet::cachet.powered_by') }}</span>
                     <a href="https://cachethq.io" title="{{ __('cachet::cachet.open_source_status_page') }}" rel="noopener" class="inline-flex items-center gap-2 font-semibold text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100">
                         <x-cachet::logo class="hidden h-4 w-auto sm:block" />
@@ -14,7 +16,7 @@
                 </div>
             @endif
             @if($showTimezone)
-                <div id="cachet-footer-timezone" data-timezone="{{ $timezone }}" data-label="" class="text-[11px] tracking-tight text-zinc-400 dark:text-zinc-500"></div>
+                <div id="cachet-footer-timezone" data-slot="timezone" data-timezone="{{ $timezone }}" data-label="" class="text-[11px] tracking-tight text-zinc-400 dark:text-zinc-500"></div>
                 <script defer async>
                     document.addEventListener('DOMContentLoaded', function () {
                         const timeZoneLabel = '{!! preg_replace(
@@ -30,6 +32,8 @@
                     });
                 </script>
             @endif
+
+            {{ $footerHook }}
         </div>
     </footer>
 @endif
diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
@@ -1,34 +1,35 @@
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_NAVIGATION_BEFORE) }}
-<header class="status-header">
-    <div class="container mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
-        <a href="{{ route('cachet.status-page') }}" aria-label="{{ __('cachet::navigation.resources.items.status_page') }}" class="inline-flex items-center transition hover:opacity-80">
+<header data-component="header" class="status-header">
+    <div data-slot="content" class="container mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
+        <a data-slot="brand" href="{{ route('cachet.status-page') }}" aria-label="{{ __('cachet::navigation.resources.items.status_page') }}" class="inline-flex items-center transition hover:opacity-80">
             @if($appBanner)
                 <img src="{{ Storage::disk(config('cachet.uploads.disk', 'public'))->url($appBanner) }}" alt="{{ $siteName }}" class="h-8 w-auto" />
             @else
                 <x-cachet::logo class="h-8 w-auto" />
             @endif
         </a>
 
-        <div class="flex items-center gap-3 sm:gap-4">
+        <nav data-slot="navigation" class="flex items-center gap-3 sm:gap-4">
             @if ($allowSubscribers)
-                <a href="{{ route('cachet.subscribers.create') }}" class="inline-flex min-h-10 items-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-semibold text-accent-content ring-1 ring-inset ring-accent/40 transition hover:bg-accent/10">
+                <a data-slot="subscribe" href="{{ route('cachet.subscribers.create') }}" class="inline-flex min-h-10 items-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-semibold text-accent-content ring-1 ring-inset ring-accent/40 transition hover:bg-accent/10">
                     {{ __('cachet::subscriber.status_page.subscribe.button_label') }}
                 </a>
             @endif
             @if ($dashboardLoginLink)
-                <a href="{{ Cachet\Cachet::dashboardPath() }}" class="inline-flex min-h-10 items-center whitespace-nowrap rounded-md bg-accent px-3 py-1.5 text-sm font-semibold text-accent-foreground shadow-sm ring-1 ring-accent/30 transition hover:opacity-90">
+                <a data-slot="dashboard" href="{{ Cachet\Cachet::dashboardPath() }}" class="inline-flex min-h-10 items-center whitespace-nowrap rounded-md bg-accent px-3 py-1.5 text-sm font-semibold text-accent-foreground shadow-sm ring-1 ring-accent/30 transition hover:opacity-90">
                     {{ __('filament-panels::pages/dashboard.title') }}
                 </a>
                 @auth
-                    <form action="{{ \Cachet\Cachet::dashboardPath() }}/logout" method="POST">
+                    <form data-slot="logout" action="{{ \Cachet\Cachet::dashboardPath() }}/logout" method="POST">
                         @csrf
                         <button class="text-sm font-medium text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100">
                             {{ __('filament-panels::layout.actions.logout.label') }}
                         </button>
                     </form>
                 @endauth
             @endif
-        </div>
+        </nav>
     </div>
 </header>
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_NAVIGATION_AFTER) }}
+{{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_BANNER) }}
diff --git a/resources/views/components/incident-timeline.blade.php b/resources/views/components/incident-timeline.blade.php
@@ -1,10 +1,11 @@
-<div class="flex flex-col gap-4">
-    <div class="flex flex-col justify-between gap-3 md:flex-row md:items-center md:gap-0">
-        <h2 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+{{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_INCIDENT_TIMELINE_BEFORE) }}
+<section data-component="incident-timeline" class="flex flex-col gap-4">
+    <div data-slot="header" class="flex flex-col justify-between gap-3 md:flex-row md:items-center md:gap-0">
+        <h2 data-slot="title" class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
             {{ $recentIncidentsOnly ? __('cachet::incident.timeline.recent_incidents_header') : __('cachet::incident.timeline.past_incidents_header') }}
         </h2>
 
-        <fieldset aria-label="{{ __('cachet::incident.timeline.date_range_label') }}" class="grid grid-cols-2 gap-3 text-sm text-zinc-500 dark:text-zinc-400">
+        <fieldset data-slot="filters" aria-label="{{ __('cachet::incident.timeline.date_range_label') }}" class="grid grid-cols-2 gap-3 text-sm text-zinc-500 dark:text-zinc-400">
             <label class="flex flex-col gap-1">
                 <span class="text-xs font-medium">{{ __('cachet::incident.timeline.from_label') }}</span>
                 <x-filament::input.wrapper disabled>
@@ -34,22 +35,22 @@
         </fieldset>
     </div>
 
-    <div class="flex w-full flex-col gap-8">
+    <div data-slot="list" class="flex w-full flex-col gap-8">
         @if ($stickiedIncidents->isNotEmpty())
             <x-cachet::incident :date="$from" :incidents="$stickiedIncidents" :with-date="false" />
         @endif
 
         @forelse ($timeline as $date => $day)
             <x-cachet::incident :date="$date" :incidents="$day['incidents']" :schedules="$day['schedules']" />
         @empty
-            <p class="text-sm text-zinc-500 dark:text-zinc-400">
+            <p data-slot="empty" class="text-sm text-zinc-500 dark:text-zinc-400">
                 {{ __('cachet::incident.timeline.no_incidents_reported_between', ['from' => $from, 'to' => $to]) }}
             </p>
         @endforelse
     </div>
 
     @if ($canPageBackward || $canPageForward)
-        <div class="flex justify-center">
+        <nav data-slot="navigation" class="flex justify-center">
             <div class="inline-flex items-center gap-0.5 rounded-lg bg-zinc-100 p-0.5 ring-1 ring-zinc-900/10 dark:bg-zinc-800/80 dark:ring-white/15">
                 @if ($canPageBackward)
                     <a href="{{ route('cachet.status-page', ['from' => $nextPeriodFrom]) }}"
@@ -72,6 +73,7 @@ class="inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium
                     </a>
                 @endif
             </div>
-        </div>
+        </nav>
     @endif
-</div>
+</section>
+{{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_INCIDENT_TIMELINE_AFTER) }}
diff --git a/resources/views/components/incident-update-status.blade.php b/resources/views/components/incident-update-status.blade.php
@@ -1,12 +1,12 @@
-<div {{ $attributes->style([
+<div {{ $attributes->merge(['data-component' => 'incident-update-status'])->style([
     Illuminate\Support\Arr::toCssStyles([
         \Filament\Support\get_color_css_variables(
             $color,
             shades: [200, 400, 700, 900],
         ),
     ]),
 ])->merge(['title' => $title]) }}>
-    <div class="absolute -left-[59px] top-5 hidden h-7 w-7 items-center justify-center rounded-full bg-custom-200 text-custom-700 shadow-sm ring-1 ring-custom-400/30 isolate dark:bg-custom-200/80 dark:ring-custom-400/20 lg:flex">
+    <div data-slot="indicator" class="absolute -left-[59px] top-5 hidden h-7 w-7 items-center justify-center rounded-full bg-custom-200 text-custom-700 shadow-sm ring-1 ring-custom-400/30 isolate dark:bg-custom-200/80 dark:ring-custom-400/20 lg:flex">
         @svg($icon, 'size-5')
     </div>
 </div>