diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 13efbeb42..2041cd194 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -860,7 +860,7 @@ function App() {
                     <button
                       type="button"
                       onClick={() => aiChatStore.toggle()}
-                      class="fixed right-0 top-1/2 -translate-y-1/2 z-40 flex items-center gap-1.5 pl-2 pr-1.5 py-3 rounded-l-xl bg-gradient-to-r from-purple-600 to-purple-700 text-white shadow-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-200 group"
+                      class="fixed right-0 top-1/2 -translate-y-1/2 z-40 flex items-center gap-1.5 pl-2 pr-1.5 py-3 rounded-l-xl bg-gradient-to-r from-purple-600 to-purple-700 text-white shadow-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-200 group sm:top-1/2 sm:translate-y-[-50%] top-auto bottom-20 translate-y-0"
                       title={aiChatStore.context.context?.name ? `AI Assistant - ${aiChatStore.context.context.name}` : 'AI Assistant (⌘K)'}
                       aria-label="Expand AI Assistant"
                     >
@@ -1285,7 +1285,7 @@ function AppLayout(props: {
               const isActive = () => getActiveTab() === platform.id;
               const disabled = () => !platform.enabled;
               const baseClasses =
-                'tab relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium flex items-center gap-1 sm:gap-1.5 rounded-t border border-transparent transition-colors whitespace-nowrap cursor-pointer';
+                'tab relative px-1.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium flex items-center gap-1 sm:gap-1.5 rounded-t border border-transparent transition-colors whitespace-nowrap cursor-pointer';
 
               const className = () => {
                 if (isActive()) {
@@ -1311,19 +1311,20 @@ function AppLayout(props: {
                   title={title()}
                 >
                   {platform.icon}
-                  <span>{platform.label}</span>
+                  <span class="hidden xs:inline">{platform.label}</span>
+                  <span class="xs:hidden">{platform.label.charAt(0)}</span>
                 </div>
               );
             }}
           </For>
         </div>
-        <div class="flex items-end gap-2 ml-auto" role="group" aria-label="System">
-          <div class="flex items-end gap-1 pl-3 sm:pl-4">
+        <div class="flex items-end gap-1 ml-auto" role="group" aria-label="System">
+          <div class="flex items-end gap-1 pl-1 sm:pl-4">
             <For each={utilityTabs()}>
               {(tab) => {
                 const isActive = () => getActiveTab() === tab.id;
                 const baseClasses =
-                  'tab relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium flex items-center gap-1 sm:gap-1.5 rounded-t border border-transparent transition-colors whitespace-nowrap cursor-pointer';
+                  'tab relative px-1.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium flex items-center gap-1 sm:gap-1.5 rounded-t border border-transparent transition-colors whitespace-nowrap cursor-pointer';
 
                 const className = () => {
                   if (isActive()) {
@@ -1341,8 +1342,9 @@ function AppLayout(props: {
                     title={tab.tooltip}
                   >
                     {tab.icon}
-                    <span class="flex items-center gap-1.5">
-                      <span>{tab.label}</span>
+                    <span class="flex items-center gap-1">
+                      <span class="hidden xs:inline">{tab.label}</span>
+                      <span class="xs:hidden">{tab.label.charAt(0)}</span>
                       {tab.id === 'alerts' && (() => {
                         const total = tab.count ?? 0;
                         if (total <= 0) {
diff --git a/frontend-modern/src/components/Backups/BackupsFilter.tsx b/frontend-modern/src/components/Backups/BackupsFilter.tsx
index 72eecbb88..423907b3b 100644
--- a/frontend-modern/src/components/Backups/BackupsFilter.tsx
+++ b/frontend-modern/src/components/Backups/BackupsFilter.tsx
@@ -146,13 +146,13 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
                 commitSearchToHistory(e.currentTarget.value);
               }
             }}
-            class="w-full pl-9 pr-20 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg 
+            class="w-full pl-8 sm:pl-9 pr-14 sm:pr-20 py-1.5 sm:py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg 
                    bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500
                    focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
             title="Search backups by name, VMID, or filter by node"
           />
           <svg
-            class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500"
+            class="absolute left-2.5 sm:left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -167,7 +167,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
           <Show when={props.search()}>
             <button
               type="button"
-              class="absolute right-14 top-1/2 -translate-y-1/2 transform p-1 rounded-full 
+              class="absolute right-12 sm:right-14 top-1/2 -translate-y-1/2 transform p-1 rounded-full 
                      bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-300 
                      hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/50 dark:hover:text-red-400 
                      transition-all duration-150 active:scale-90"
@@ -297,7 +297,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
         </div>
 
         {/* Row 2: Filters - Compact horizontal layout */}
-        <div class="flex flex-wrap items-center gap-2">
+        <div class="flex flex-wrap items-center gap-1.5 sm:gap-2">
           {/* Source Filter */}
           <div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
             <button
diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index e4b7fce7f..935ffb7d8 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -171,9 +171,9 @@ const UnifiedBackups: Component = () => {
     { id: 'node', label: 'Node', priority: 'essential' },
     { id: 'owner', label: 'Owner', priority: 'secondary', toggleable: true },
     { id: 'backupTime', label: 'Time', priority: 'essential' },
-    { id: 'size', label: 'Size', priority: 'secondary', toggleable: true },
+    { id: 'size', label: 'Size', priority: 'primary', toggleable: true },
     { id: 'backupType', label: 'Backup Type', priority: 'essential' },
-    { id: 'storage', label: 'Location', priority: 'secondary', toggleable: true },
+    { id: 'storage', label: 'Location', priority: 'primary', toggleable: true },
     { id: 'verified', label: 'Verified', priority: 'secondary', toggleable: true },
     { id: 'comment', label: 'Comment', priority: 'supplementary', toggleable: true },
     { id: 'details', label: 'Details', priority: 'essential' },
@@ -2100,58 +2100,58 @@ const UnifiedBackups: Component = () => {
                 {/* Mobile Card View removed in favor of scrollable table */}
 
                 {/* Desktop Table View */}
-                <table class="backup-table" style={{ "min-width": "1200px" }}>
+                <table class="backup-table" style={{ "min-width": "900px" }}>
                   <thead>
                     <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('vmid')}
                       >
                         {hasHostBackups() ? 'ID' : 'VMID'}{' '}
                         {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('type')}
                       >
                         Type {sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('name')}
                       >
                         Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('node')}
                       >
                         Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <Show when={isColumnVisible('owner') && (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote')}>
                         <th
-                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('owner')}
                         >
                           Owner {sortKey() === 'owner' && (sortDirection() === 'asc' ? '▲' : '▼')}
                         </th>
                       </Show>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('backupTime')}
                       >
                         Time {sortKey() === 'backupTime' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <Show when={isColumnVisible('size') && backupTypeFilter() !== 'snapshot'}>
                         <th
-                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('size')}
                         >
                           Size {sortKey() === 'size' && (sortDirection() === 'asc' ? '▲' : '▼')}
                         </th>
                       </Show>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('backupType')}
                       >
                         Backup{' '}
@@ -2159,7 +2159,7 @@ const UnifiedBackups: Component = () => {
                       </th>
                       <Show when={isColumnVisible('storage') && backupTypeFilter() !== 'snapshot'}>
                         <th
-                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-1.5 sm:px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('storage')}
                         >
                           Location{' '}
@@ -2209,8 +2209,8 @@ const UnifiedBackups: Component = () => {
                           <For each={group.items}>
                             {(item) => (
                               <tr class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/30">
-                                <td class="p-0.5 pl-5 pr-1.5 text-sm align-middle">{item.vmid}</td>
-                                <td class="p-0.5 px-1.5 align-middle">
+                                <td class="p-0.5 pl-3 sm:pl-5 pr-1 sm:pr-1.5 text-xs sm:text-sm align-middle">{item.vmid}</td>
+                                <td class="p-0.5 px-1 sm:px-1.5 align-middle">
                                   <span
                                     class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.type === 'VM'
                                       ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
@@ -2247,7 +2247,7 @@ const UnifiedBackups: Component = () => {
                                     {item.size ? formatBytes(item.size) : '-'}
                                   </td>
                                 </Show>
-                                <td class="p-0.5 px-1.5 align-middle">
+                                <td class="p-0.5 px-1 sm:px-1.5 align-middle">
                                   <div class="flex items-center gap-1">
                                     <span
                                       class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.backupType === 'snapshot'
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 95535a462..d3c1c0397 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -1098,7 +1098,7 @@ export function Dashboard(props: DashboardProps) {
         <ComponentErrorBoundary name="Guest Table">
           <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
             <div class="overflow-x-auto">
-              <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "900px" }}>
+              <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "800px" : "900px" }}>
                 <thead>
                   <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
                     <For each={visibleColumns()}>
diff --git a/frontend-modern/src/components/Dashboard/DashboardFilter.tsx b/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
index ef573cf62..7bcca0239 100644
--- a/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
+++ b/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
@@ -138,7 +138,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
                   commitSearchToHistory(e.currentTarget.value);
                 }
               }}
-              class={`w-full pl-9 pr-16 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg
+              class={`w-full pl-8 sm:pl-9 pr-14 sm:pr-16 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg
                      bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500
                      focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all`}
             />
@@ -158,7 +158,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
             <Show when={props.search()}>
               <button
                 type="button"
-                class="absolute right-[4.5rem] top-1/2 -translate-y-1/2 transform p-1 rounded-full 
+                class="absolute right-[3.5rem] sm:right-[4.5rem] top-1/2 -translate-y-1/2 transform p-1 rounded-full 
                        bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-300 
                        hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/50 dark:hover:text-red-400 
                        transition-all duration-150 active:scale-90"
@@ -301,7 +301,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
         </div>
 
         {/* Row 2: Filters - grouped for logical wrapping */}
-        <div class="flex flex-wrap items-center gap-x-2 gap-y-2">
+        <div class="flex flex-wrap items-center gap-x-1.5 sm:gap-x-2 gap-y-2">
           {/* Problems Toggle - Prominent "Show me issues" button */}
           <button
             type="button"
@@ -427,7 +427,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
         {/* End Primary Filters Group */}
 
         {/* Secondary Controls Group: Grouping, View, Columns, Reset */}
-        <div class="flex flex-wrap items-center gap-2">
+        <div class="flex flex-wrap items-center gap-x-1.5 sm:gap-x-2 gap-y-2">
 
           {/* Grouping Mode Toggle */}
           <div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 091e5c7c0..b9e451d6b 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -2806,7 +2806,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
       >
         <Card padding="none" tone="glass" class="overflow-hidden">
           <div class="overflow-x-auto">
-            <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "800px" }}>
+            <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": "800px" }}>
               <thead>
                 <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 text-[11px] sm:text-xs font-medium uppercase tracking-wider sticky top-0 z-20">
                   <For each={DOCKER_COLUMNS}>
diff --git a/frontend-modern/src/components/Hosts/HostsOverview.tsx b/frontend-modern/src/components/Hosts/HostsOverview.tsx
index 131fa8af6..dddbaf5fc 100644
--- a/frontend-modern/src/components/Hosts/HostsOverview.tsx
+++ b/frontend-modern/src/components/Hosts/HostsOverview.tsx
@@ -856,7 +856,7 @@ export const HostsOverview: Component = () => {
                 <Card padding="none" tone="glass" class="overflow-hidden">
                   <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
                     <style>{`.overflow-x-auto::-webkit-scrollbar { display: none; }`}</style>
-                    <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "900px" }}>
+                    <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": "800px" }}>
                       <thead>
                         <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
                           {/* Essential columns */}
@@ -1168,7 +1168,7 @@ const HostRow: Component<HostRowProps> = (props) => {
               <EnhancedCPUBar
                 usage={cpuPercent}
                 loadAverage={host.loadAverage?.[0]}
-                cores={host.cpuCount}
+                cores={props.isMobile() ? undefined : host.cpuCount}
               />
             </Show>
           </td>
diff --git a/frontend-modern/src/components/Proxmox/ProxmoxSectionNav.tsx b/frontend-modern/src/components/Proxmox/ProxmoxSectionNav.tsx
index bdcbf05b2..2400a1546 100644
--- a/frontend-modern/src/components/Proxmox/ProxmoxSectionNav.tsx
+++ b/frontend-modern/src/components/Proxmox/ProxmoxSectionNav.tsx
@@ -60,17 +60,19 @@ export const ProxmoxSectionNav: Component<ProxmoxSectionNavProps> = (props) => {
     const hasCeph = state.cephClusters && state.cephClusters.length > 0;
     const hasReplication = state.replicationJobs && state.replicationJobs.length > 0;
     return allSections.filter((section) =>
-      (section.id !== 'mail' || hasPMG) &&
-      (section.id !== 'ceph' || hasCeph) &&
-      (section.id !== 'replication' || hasReplication)
+      section.id === props.current || (
+        (section.id !== 'mail' || hasPMG) &&
+        (section.id !== 'ceph' || hasCeph) &&
+        (section.id !== 'replication' || hasReplication)
+      )
     );
   });
 
   const baseClasses =
-    'inline-flex items-center px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900';
+    'inline-flex items-center px-1.5 sm:px-3 py-1 text-[11px] sm:text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900';
 
   return (
-    <div class={`flex flex-wrap items-center gap-3 sm:gap-4 ${props.class ?? ''}`} aria-label="Proxmox sections">
+    <div class={`flex flex-wrap items-center gap-1.5 sm:gap-4 ${props.class ?? ''}`} aria-label="Proxmox sections">
       <For each={sections()}>{(section) => {
         const isActive = section.id === props.current;
         const classes = isActive
diff --git a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
index 31044a42f..17e0f2338 100644
--- a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
+++ b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
@@ -292,7 +292,7 @@ const findMatchingHostAgent = (
 export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
   return (
     <Card padding="none" tone="glass" class="overflow-x-auto rounded-lg">
-      <table class="min-w-[800px] divide-y divide-gray-200 dark:divide-gray-700 text-sm">
+      <table class="min-w-[900px] divide-y divide-gray-200 dark:divide-gray-700 text-sm">
         <thead class="bg-gray-50 dark:bg-gray-800/70">
           <tr>
             <th scope="col" class="py-2 pl-4 pr-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
@@ -594,7 +594,7 @@ const resolvePbsStatusMeta = (
 export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
   return (
     <Card padding="none" tone="glass" class="overflow-x-auto rounded-lg">
-      <table class="min-w-[800px] divide-y divide-gray-200 dark:divide-gray-700 text-sm">
+      <table class="min-w-[900px] divide-y divide-gray-200 dark:divide-gray-700 text-sm">
         <thead class="bg-gray-50 dark:bg-gray-800/70">
           <tr>
             <th scope="col" class="py-2 pl-4 pr-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
@@ -790,7 +790,7 @@ const resolvePmgStatusMeta = (
 export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
   return (
     <Card padding="none" tone="glass" class="overflow-x-auto rounded-lg">
-      <table class="min-w-[800px] divide-y divide-gray-200 dark:divide-gray-700 text-sm">
+      <table class="min-w-[900px] divide-y divide-gray-200 dark:divide-gray-700 text-sm">
         <thead class="bg-gray-50 dark:bg-gray-800/70">
           <tr>
             <th scope="col" class="py-2 pl-4 pr-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index 0fa786e52..5d4c6afd7 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -2406,7 +2406,7 @@ const Settings: Component<SettingsProps> = (props) => {
             <Show when={flatTabs.length > 0}>
               <div class="lg:hidden border-b border-gray-200 dark:border-gray-700">
                 <div
-                  class="flex gap-1 px-2 py-1 w-full overflow-x-auto scrollbar-hide"
+                  class="flex gap-1 px-2 py-1 w-full overflow-x-auto"
                   style="-webkit-overflow-scrolling: touch;"
                 >
                   <For each={flatTabs}>
@@ -2489,9 +2489,9 @@ const Settings: Component<SettingsProps> = (props) => {
                       </div>
                     </Show>
                     <Show when={initialLoadComplete()}>
-                      <Card padding="lg">
-                        <div class="space-y-4">
-                          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                      <Card padding="none" tone="glass">
+                        <div class="px-3 py-4 sm:px-6 sm:py-6 space-y-4">
+                          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                             <h4 class="text-base font-semibold text-gray-900 dark:text-gray-100">
                               Proxmox VE nodes
                             </h4>
@@ -2779,9 +2779,9 @@ const Settings: Component<SettingsProps> = (props) => {
                       </div>
                     </Show>
                     <Show when={initialLoadComplete()}>
-                      <Card padding="lg">
-                        <div class="space-y-4">
-                          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                      <Card padding="none" tone="glass">
+                        <div class="px-3 py-4 sm:px-6 sm:py-6 space-y-4">
+                          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                             <h4 class="text-base font-semibold text-gray-900 dark:text-gray-100">
                               Proxmox Backup Server nodes
                             </h4>
@@ -2909,7 +2909,7 @@ const Settings: Component<SettingsProps> = (props) => {
                                 No PBS nodes configured
                               </p>
                               <p class="text-sm text-gray-500 dark:text-gray-400">
-                                Add a Proxmox Backup Server to monitor your backup infrastructure
+                                Add a Proxmox Backup Server to monitor your backups
                               </p>
                             </div>
                           </Show>
@@ -3066,9 +3066,9 @@ const Settings: Component<SettingsProps> = (props) => {
                     </Show>
 
                     <Show when={initialLoadComplete()}>
-                      <Card padding="lg">
-                        <div class="space-y-4">
-                          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                      <Card padding="none" tone="glass">
+                        <div class="px-3 py-4 sm:px-6 sm:py-6 space-y-4">
+                          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                             <h4 class="text-base font-semibold text-gray-900 dark:text-gray-100">
                               Proxmox Mail Gateway nodes
                             </h4>
@@ -3174,7 +3174,7 @@ const Settings: Component<SettingsProps> = (props) => {
                               globalTemperatureMonitoringEnabled={temperatureMonitoringEnabled()}
                               onTestConnection={testNodeConnection}
                               onEdit={(node) => {
-                                setEditingNode(nodes().find((n) => n.id === node.id) ?? null);
+                                setEditingNode(node);
                                 setCurrentNodeType('pmg');
                                 setModalResetKey((prev) => prev + 1);
                                 setShowNodeModal(true);
@@ -3192,8 +3192,7 @@ const Settings: Component<SettingsProps> = (props) => {
                                 No PMG nodes configured
                               </p>
                               <p class="text-sm text-gray-500 dark:text-gray-400">
-                                Add a Proxmox Mail Gateway to monitor mail queue and quarantine
-                                metrics
+                                Add a Proxmox Mail Gateway node to start monitoring
                               </p>
                             </div>
                           </Show>
@@ -3515,7 +3514,7 @@ const Settings: Component<SettingsProps> = (props) => {
                 <DiagnosticsPanel />
               </Show>
             </div>
-          </div>
+          </div >
         </Card >
       </div >
 
@@ -3793,7 +3792,7 @@ const Settings: Component<SettingsProps> = (props) => {
       </Show >
 
       {/* Update Confirmation Modal */}
-      <UpdateConfirmationModal
+      < UpdateConfirmationModal
         isOpen={showUpdateConfirmation()}
         onClose={() => setShowUpdateConfirmation(false)}
         onConfirm={handleConfirmUpdate}
diff --git a/frontend-modern/src/components/Settings/SettingsSectionNav.tsx b/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
index ea1c62754..f390c051b 100644
--- a/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
+++ b/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
@@ -17,29 +17,29 @@ const allSections: Array<{
   label: string;
   icon: typeof Server;
 }> = [
-  {
-    id: 'pve',
-    label: 'Virtual Environment',
-    icon: Server,
-  },
-  {
-    id: 'pbs',
-    label: 'Backup Server',
-    icon: HardDrive,
-  },
-  {
-    id: 'pmg',
-    label: 'Mail Gateway',
-    icon: Mail,
-  },
-];
+    {
+      id: 'pve',
+      label: 'Virtual Environment',
+      icon: Server,
+    },
+    {
+      id: 'pbs',
+      label: 'Backup Server',
+      icon: HardDrive,
+    },
+    {
+      id: 'pmg',
+      label: 'Mail Gateway',
+      icon: Mail,
+    },
+  ];
 
 export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) => {
   const baseClasses =
     'inline-flex items-center gap-2 px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900';
 
   return (
-    <div class={`flex flex-wrap items-center gap-3 sm:gap-4 ${props.class ?? ''}`} aria-label="Settings sections">
+    <div class={`flex flex-wrap items-center gap-2 sm:gap-4 ${props.class ?? ''}`} aria-label="Settings sections">
       <For each={allSections}>
         {(section) => {
           const isActive = section.id === props.current;
@@ -56,8 +56,8 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
               onClick={() => props.onSelect(section.id)}
               aria-pressed={isActive}
             >
-              <Icon size={16} stroke-width={2} />
-              <span>{section.label}</span>
+              <Icon size={14} stroke-width={2} class="sm:w-4 sm:h-4" />
+              <span class="whitespace-nowrap">{section.label}</span>
             </button>
           );
         }}
diff --git a/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx b/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx
index d59b91565..6417abd55 100644
--- a/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx
+++ b/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx
@@ -55,7 +55,7 @@ export function EnhancedStorageBar(props: EnhancedStorageBarProps) {
     };
 
     return (
-        <div ref={containerRef} class="metric-text w-full h-4 flex items-center justify-center">
+        <div ref={containerRef} class="metric-text w-full h-5 flex items-center justify-center">
             <div
                 class="relative w-full max-w-[150px] h-full overflow-hidden bg-gray-200 dark:bg-gray-600 rounded"
                 onMouseEnter={handleMouseEnter}
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 710b0ab26..af7501041 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -4,6 +4,7 @@ import { useWebSocket } from '@/App';
 import { getAlertStyles } from '@/utils/alerts';
 import { formatBytes, formatPercent } from '@/utils/format';
 import type { Storage as StorageType, CephCluster } from '@/types/api';
+import { StatusDot } from '@/components/shared/StatusDot';
 import { ComponentErrorBoundary } from '@/components/ErrorBoundary';
 import { UnifiedNodeSelector } from '@/components/shared/UnifiedNodeSelector';
 import { StorageFilter } from './StorageFilter';
@@ -809,7 +810,7 @@ const Storage: Component = () => {
                 <style>{`
                 .overflow-x-auto::-webkit-scrollbar { display: none; }
               `}</style>
-                <table class="w-full" style={{ "min-width": "750px" }}>
+                <table class="w-full" style={{ "min-width": "800px" }}>
                   <thead>
                     <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
                       <th class="px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto">
@@ -826,16 +827,16 @@ const Storage: Component = () => {
                         </th>
                       </Show>
                       <Show when={isColumnVisible('status')}>
-                        <th class="px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
+                        <th class="px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] min-w-[70px]">
                           Status
                         </th>
                       </Show>
                       <Show when={viewMode() === 'node' && isColumnVisible('shared')}>
-                        <th class="px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%]">
+                        <th class="hidden sm:table-cell px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%]">
                           Shared
                         </th>
                       </Show>
-                      <th class="px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] min-w-[120px]">
+                      <th class="px-1.5 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] min-w-[130px]">
                         Usage
                       </th>
                       <Show when={isColumnVisible('free')}>
@@ -1187,9 +1188,16 @@ const Storage: Component = () => {
                                       </td>
                                       <Show when={isColumnVisible('type')}>
                                         <td class="p-0.5 px-1.5">
-                                          <span class="inline-block px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
-                                            {storage.type}
-                                          </span>
+                                          <div class="flex items-center gap-1.5">
+                                            <span class="inline-block px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+                                              {storage.type}
+                                            </span>
+                                            <Show when={storage.shared}>
+                                              <svg class="h-3 w-3 text-blue-500 sm:hidden" fill="currentColor" viewBox="0 0 20 20">
+                                                <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd" />
+                                              </svg>
+                                            </Show>
+                                          </div>
                                         </td>
                                       </Show>
                                       <Show when={isColumnVisible('content')}>
@@ -1204,18 +1212,24 @@ const Storage: Component = () => {
                                       </Show>
                                       <Show when={isColumnVisible('status')}>
                                         <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
-                                          <span
-                                            class={`${storage.status === 'available'
-                                              ? 'text-green-600 dark:text-green-400'
-                                              : 'text-red-600 dark:text-red-400'
-                                              }`}
-                                          >
-                                            {storage.status || 'unknown'}
-                                          </span>
+                                          <div class="flex items-center gap-1.5">
+                                            <StatusDot
+                                              variant={storage.status === 'available' ? 'success' : 'danger'}
+                                              size="xs"
+                                            />
+                                            <span
+                                              class={`${storage.status === 'available'
+                                                ? 'text-green-600 dark:text-green-400'
+                                                : 'text-red-600 dark:text-red-400'
+                                                }`}
+                                            >
+                                              {storage.status || 'unknown'}
+                                            </span>
+                                          </div>
                                         </td>
                                       </Show>
                                       <Show when={viewMode() === 'node' && isColumnVisible('shared')}>
-                                        <td class="p-0.5 px-1.5">
+                                        <td class="hidden sm:table-cell p-0.5 px-1.5">
                                           <span class="text-xs text-gray-600 dark:text-gray-400">
                                             {storage.shared ? '✓' : '-'}
                                           </span>
diff --git a/frontend-modern/src/components/Storage/StorageFilter.tsx b/frontend-modern/src/components/Storage/StorageFilter.tsx
index f4f374798..a88fdc392 100644
--- a/frontend-modern/src/components/Storage/StorageFilter.tsx
+++ b/frontend-modern/src/components/Storage/StorageFilter.tsx
@@ -146,7 +146,7 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
                 commitSearchToHistory(e.currentTarget.value);
               }
             }}
-            class="w-full pl-9 pr-20 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg 
+            class="w-full pl-8 sm:pl-9 pr-14 sm:pr-20 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg 
                    bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500
                    focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
             title="Search storage by name or filter by node"
@@ -167,7 +167,7 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
           <Show when={props.search()}>
             <button
               type="button"
-              class="absolute right-14 top-1/2 -translate-y-1/2 transform p-1 rounded-full 
+              class="absolute right-[3.5rem] sm:right-14 top-1/2 -translate-y-1/2 transform p-1 rounded-full 
                      bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-300 
                      hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/50 dark:hover:text-red-400 
                      transition-all duration-150 active:scale-90"
@@ -297,7 +297,7 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
         </div>
 
         {/* Row 2: Filters - Compact horizontal layout */}
-        <div class="flex flex-wrap items-center gap-x-2 gap-y-2">
+        <div class="flex flex-wrap items-center gap-x-1.5 sm:gap-x-2 gap-y-2">
           {/* Group By Filter */}
           <Show when={props.groupBy && props.setGroupBy}>
             <div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index d89e5bb5e..2e2476d65 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -348,7 +348,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
   return (
     <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
       <div class="overflow-x-auto">
-        <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "800px" }}>
+        <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": "800px" }}>
           <thead>
             <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
               <th
@@ -360,13 +360,13 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
               <th class={thClass} style={{ "min-width": '80px' }} onClick={() => handleSort('uptime')}>
                 Uptime {renderSortIndicator('uptime')}
               </th>
-              <th class={thClass} style={isMobile() ? { "min-width": "60px" } : { width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('cpu')}>
+              <th class={thClass} style={isMobile() ? { "min-width": "80px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }} onClick={() => handleSort('cpu')}>
                 CPU {renderSortIndicator('cpu')}
               </th>
-              <th class={thClass} style={isMobile() ? { "min-width": "60px" } : { width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('memory')}>
+              <th class={thClass} style={isMobile() ? { "min-width": "80px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }} onClick={() => handleSort('memory')}>
                 Memory {renderSortIndicator('memory')}
               </th>
-              <th class={thClass} style={isMobile() ? { "min-width": "60px" } : { width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('disk')}>
+              <th class={thClass} style={isMobile() ? { "min-width": "80px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }} onClick={() => handleSort('disk')}>
                 Disk {renderSortIndicator('disk')}
               </th>
               <Show when={hasAnyTemperatureData()}>
@@ -483,7 +483,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                 return (
                   <tr
                     class={rowClass()}
-                    style={{ ...rowStyle(), height: '29px', 'max-height': '29px' }}
+                    style={{ ...rowStyle(), 'min-height': '36px' }}
                     onClick={() => props.onNodeClick(nodeId, isPVEItem ? 'pve' : 'pbs')}
                   >
                     {/* Name */}
@@ -575,8 +575,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* CPU */}
-                    <td class={tdClass} style={isMobile() ? { "min-width": "60px" } : metricColumnStyle}>
-                      <div class="h-4">
+                    <td class={tdClass} style={isMobile() ? { "min-width": "80px" } : metricColumnStyle}>
+                      <div class="h-5">
                         <EnhancedCPUBar
                           usage={cpuPercentValue}
                           loadAverage={isPVEItem ? node!.loadAverage?.[0] : undefined}
@@ -588,8 +588,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* Memory */}
-                    <td class={tdClass} style={isMobile() ? { "min-width": "60px" } : metricColumnStyle}>
-                      <div class="h-4">
+                    <td class={tdClass} style={isMobile() ? { "min-width": "80px" } : metricColumnStyle}>
+                      <div class="h-5">
                         <Show when={isPVEItem} fallback={
                           <ResponsiveMetricCell
                             value={memoryPercentValue}
@@ -626,8 +626,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* Disk */}
-                    <td class={tdClass} style={isMobile() ? { "min-width": "60px" } : metricColumnStyle}>
-                      <div class="h-4">
+                    <td class={tdClass} style={isMobile() ? { "min-width": "80px" } : metricColumnStyle}>
+                      <div class="h-5">
                         <Show when={isPVEItem} fallback={
                           <ResponsiveMetricCell
                             value={diskPercentValue}
diff --git a/frontend-modern/src/hooks/useBreakpoint.ts b/frontend-modern/src/hooks/useBreakpoint.ts
index 639b8b49e..93b92734a 100644
--- a/frontend-modern/src/hooks/useBreakpoint.ts
+++ b/frontend-modern/src/hooks/useBreakpoint.ts
@@ -5,7 +5,7 @@ import { createSignal, onMount, onCleanup, createMemo, Accessor } from 'solid-js
  * These match Tailwind's default breakpoints
  */
 export const BREAKPOINTS = {
-  xs: 0,
+  xs: 400,
   sm: 640,
   md: 768,
   lg: 1024,
diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx
index 8b7d54195..048f41d43 100644
--- a/frontend-modern/src/pages/Alerts.tsx
+++ b/frontend-modern/src/pages/Alerts.tsx
@@ -1987,7 +1987,7 @@ export function Alerts() {
                         return (
                           <button
                             type="button"
-                            class={`flex-1 px-3 py-2 text-xs font-medium rounded-md transition-all whitespace-nowrap ${activeTab() === tab.id
+                            class={`px-3 py-1.5 sm:px-4 sm:py-2 text-[11px] sm:text-xs font-medium rounded-md transition-all whitespace-nowrap ${activeTab() === tab.id
                               ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
                               : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
                               } ${disabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}`}
@@ -2009,7 +2009,7 @@ export function Alerts() {
             </Show>
 
             {/* Tab Content */}
-            <div class="p-3 sm:p-6">
+            <div class="p-2 sm:p-6">
               <Show when={activeTab() === 'overview'}>
                 <OverviewTab
                   overrides={overrides()}
@@ -2580,15 +2580,15 @@ function OverviewTab(props: {
   const [overviewSubTab, setOverviewSubTab] = createSignal<OverviewSubTab>(getInitialSubTab());
 
   return (
-    <div class="space-y-6">
+    <div class="space-y-4 sm:space-y-6">
       {/* Stats Cards - only show cards not duplicated in sub-tabs */}
-      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3">
+      <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4">
 
         <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Acknowledged</p>
-              <p class="text-xl sm:text-2xl font-semibold text-yellow-600 dark:text-yellow-400">
+              <p class="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 uppercase tracking-wider sm:normal-case">Acknowledged</p>
+              <p class="text-lg sm:text-2xl font-semibold text-yellow-600 dark:text-yellow-400">
                 {alertStats().acknowledged}
               </p>
             </div>
@@ -2612,8 +2612,8 @@ function OverviewTab(props: {
         <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Last 24 Hours</p>
-              <p class="text-xl sm:text-2xl font-semibold text-gray-700 dark:text-gray-300">
+              <p class="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 uppercase tracking-wider sm:normal-case">Last 24 Hours</p>
+              <p class="text-lg sm:text-2xl font-semibold text-gray-700 dark:text-gray-300">
                 {alertStats().total24h}
               </p>
             </div>
@@ -2637,8 +2637,8 @@ function OverviewTab(props: {
         <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
-              <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Guest Overrides</p>
-              <p class="text-xl sm:text-2xl font-semibold text-blue-600 dark:text-blue-400">
+              <p class="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 uppercase tracking-wider sm:normal-case">Guest Overrides</p>
+              <p class="text-lg sm:text-2xl font-semibold text-blue-600 dark:text-blue-400">
                 {alertStats().overrides}
               </p>
             </div>
@@ -2660,1512 +2660,1515 @@ function OverviewTab(props: {
         </Card>
       </div>
 
-      {/* Sub-tabs for AI Insights vs Active Alerts */}
-      {/* Show tabs when patrol is enabled OR when there are legacy findings to clear */}
-      <Show when={patrolStatus()?.enabled || aiFindings().length > 0}>
-        <div class="flex items-center gap-1 border-b border-gray-200 dark:border-gray-700/50 pb-1">
-          <button
-            class={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${overviewSubTab() === 'active-alerts'
-              ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-b-0 border-gray-200 dark:border-gray-700'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
-              }`}
-            onClick={() => setOverviewSubTab('active-alerts')}
-          >
-            Active Alerts
-            <Show when={alertStats().active > 0}>
-              <span class="ml-2 px-1.5 py-0.5 text-xs font-medium rounded bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300">
-                {alertStats().active}
-              </span>
-            </Show>
-          </button>
-          <button
-            class={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${overviewSubTab() === 'ai-insights'
-              ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-b-0 border-gray-200 dark:border-gray-700'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
-              }`}
-            onClick={() => setOverviewSubTab('ai-insights')}
-          >
-            AI Insights
-            <Show when={aiFindings().length > 0}>
-              <span class="ml-2 px-1.5 py-0.5 text-xs font-medium rounded bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300">
-                {aiFindings().length}
-              </span>
-            </Show>
-          </button>
-        </div>
-      </Show>
+      <div class="space-y-4 sm:space-y-6">
 
-      {/* AI Insights Section - show when AI tab selected and patrol enabled OR has findings to clear */}
-      <Show when={overviewSubTab() === 'ai-insights' && (patrolStatus()?.enabled || aiFindings().length > 0)}>
-        <div>
-          <div class="flex items-center justify-between mb-3">
-            <SectionHeader
-              title="AI Insights"
-              size="md"
-              class="mb-0"
-            />
-            <div class="flex items-center gap-2">
+        {/* Sub-tabs for AI Insights vs Active Alerts */}
+        {/* Show tabs when patrol is enabled OR when there are legacy findings to clear */}
+        <Show when={patrolStatus()?.enabled || aiFindings().length > 0}>
+          <div class="flex items-center gap-1 border-b border-gray-200 dark:border-gray-700/50 pb-1">
+            <button
+              class={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${overviewSubTab() === 'active-alerts'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-b-0 border-gray-200 dark:border-gray-700'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+                }`}
+              onClick={() => setOverviewSubTab('active-alerts')}
+            >
+              Active Alerts
+              <Show when={alertStats().active > 0}>
+                <span class="ml-2 px-1.5 py-0.5 text-xs font-medium rounded bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300">
+                  {alertStats().active}
+                </span>
+              </Show>
+            </button>
+            <button
+              class={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${overviewSubTab() === 'ai-insights'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-b-0 border-gray-200 dark:border-gray-700'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+                }`}
+              onClick={() => setOverviewSubTab('ai-insights')}
+            >
+              AI Insights
               <Show when={aiFindings().length > 0}>
-                <button
-                  class="px-3 py-1.5 text-xs font-medium rounded-lg transition-all bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700"
-                  onClick={async () => {
-                    if (confirm(`Clear all ${aiFindings().length} AI findings?\n\nThis will remove all current insights. New issues will be detected on the next patrol run.`)) {
-                      try {
-                        const result = await clearAllFindings();
-                        notificationStore.success(result.message || `Cleared ${result.cleared} findings`);
-                        fetchAiData();
-                      } catch (err) {
-                        logger.error('Failed to clear findings:', err);
-                        notificationStore.error('Failed to clear findings');
+                <span class="ml-2 px-1.5 py-0.5 text-xs font-medium rounded bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300">
+                  {aiFindings().length}
+                </span>
+              </Show>
+            </button>
+          </div>
+        </Show>
+
+        {/* AI Insights Section - show when AI tab selected and patrol enabled OR has findings to clear */}
+        <Show when={overviewSubTab() === 'ai-insights' && (patrolStatus()?.enabled || aiFindings().length > 0)}>
+          <div class="space-y-3 sm:space-y-4">
+            <div class="flex items-center justify-between mb-2">
+              <SectionHeader
+                title="AI Insights"
+                size="md"
+                class="mb-0"
+              />
+              <div class="flex items-center gap-2">
+                <Show when={aiFindings().length > 0}>
+                  <button
+                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition-all bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    onClick={async () => {
+                      if (confirm(`Clear all ${aiFindings().length} AI findings?\n\nThis will remove all current insights. New issues will be detected on the next patrol run.`)) {
+                        try {
+                          const result = await clearAllFindings();
+                          notificationStore.success(result.message || `Cleared ${result.cleared} findings`);
+                          fetchAiData();
+                        } catch (err) {
+                          logger.error('Failed to clear findings:', err);
+                          notificationStore.error('Failed to clear findings');
+                        }
                       }
-                    }
-                  }}
-                  title="Clear all AI findings"
+                    }}
+                    title="Clear all AI findings"
+                  >
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                      Clear All
+                    </span>
+                  </button>
+                </Show>
+                <button
+                  class="px-3 py-1.5 text-xs font-medium rounded-lg transition-all bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300 border border-purple-300 dark:border-purple-700 hover:bg-purple-200 dark:hover:bg-purple-900/60 disabled:opacity-50 disabled:cursor-not-allowed"
+                  onClick={() => handleForcePatrol(true)}
+                  disabled={forcePatrolLoading() || patrolStatus()?.running || patrolRequiresLicense()}
+                  title={patrolRequiresLicense()
+                    ? 'Pulse Pro required to run AI Patrol'
+                    : (patrolStatus()?.running ? 'Patrol in progress - see table below' : 'Run a patrol check now')}
                 >
                   <span class="flex items-center gap-1.5">
                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                    Clear All
+                    Run Patrol
                   </span>
                 </button>
-              </Show>
-              <button
-                class="px-3 py-1.5 text-xs font-medium rounded-lg transition-all bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300 border border-purple-300 dark:border-purple-700 hover:bg-purple-200 dark:hover:bg-purple-900/60 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={() => handleForcePatrol(true)}
-                disabled={forcePatrolLoading() || patrolStatus()?.running || patrolRequiresLicense()}
-                title={patrolRequiresLicense()
-                  ? 'Pulse Pro required to run AI Patrol'
-                  : (patrolStatus()?.running ? 'Patrol in progress - see table below' : 'Run a patrol check now')}
-              >
-                <span class="flex items-center gap-1.5">
-                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  Run Patrol
-                </span>
-              </button>
+              </div>
             </div>
-          </div>
 
-          <Show when={patrolRequiresLicense()}>
-            <div class="mb-4 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3">
-              <div class="flex items-start gap-3">
-                <svg class="w-4 h-4 text-amber-600 dark:text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11V7a4 4 0 00-8 0v4m12 0a2 2 0 012 2v6a2 2 0 01-2 2H8a2 2 0 01-2-2v-6a2 2 0 012-2h8z" />
-                </svg>
-                <div class="flex-1">
-                  <p class="text-sm font-medium text-amber-800 dark:text-amber-200">Pulse Pro required</p>
-                  <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
-                    {patrolLicenseNote() || 'AI Patrol insights require Pulse Pro.'}
-                  </p>
-                  <a
-                    class="inline-flex items-center gap-1 mt-2 text-xs font-medium text-amber-800 dark:text-amber-200 hover:underline"
-                    href={patrolUpgradeURL()}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Upgrade to Pulse Pro
-                  </a>
+            <Show when={patrolRequiresLicense()}>
+              <div class="mb-4 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3">
+                <div class="flex items-start gap-3">
+                  <svg class="w-4 h-4 text-amber-600 dark:text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11V7a4 4 0 00-8 0v4m12 0a2 2 0 012 2v6a2 2 0 01-2 2H8a2 2 0 01-2-2v-6a2 2 0 012-2h8z" />
+                  </svg>
+                  <div class="flex-1">
+                    <p class="text-sm font-medium text-amber-800 dark:text-amber-200">Pulse Pro required</p>
+                    <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
+                      {patrolLicenseNote() || 'AI Patrol insights require Pulse Pro.'}
+                    </p>
+                    <a
+                      class="inline-flex items-center gap-1 mt-2 text-xs font-medium text-amber-800 dark:text-amber-200 hover:underline"
+                      href={patrolUpgradeURL()}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Upgrade to Pulse Pro
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-          </Show>
+            </Show>
 
 
 
 
-          <Show when={patrolRequiresLicense()}>
-            <div class="space-y-2">
-              <div class="flex items-center justify-between text-[11px] text-gray-500 dark:text-gray-400">
-                <span>Preview findings (details locked)</span>
-                <span>{aiFindings().length} detected</span>
-              </div>
-              <Show
-                when={aiFindings().length > 0}
-                fallback={
-                  <div class="text-sm text-gray-500 dark:text-gray-400 italic">
-                    No preview findings yet. Enable Patrol to generate a preview.
-                  </div>
-                }
-              >
-                <For each={aiFindings().slice(0, 3)}>
-                  {(finding) => (
-                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800/40">
-                      <div class="flex items-center gap-2 px-3 pt-3">
-                        <span class="px-2 py-0.5 text-[10px] rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 capitalize">
-                          {finding.severity}
-                        </span>
-                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                          {finding.title || 'Potential issue detected'}
-                        </span>
-                        <span class="ml-auto text-[10px] text-amber-600 dark:text-amber-300 uppercase tracking-wide">Locked</span>
-                      </div>
-                      <div class="relative px-3 pb-3 pt-2">
-                        <div class="blur-sm text-xs text-gray-600 dark:text-gray-400">
-                          {finding.description || 'Upgrade to view full analysis.'}
-                        </div>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                          <a
-                            class="text-[11px] font-medium text-amber-700 dark:text-amber-200 underline decoration-dotted"
-                            href={patrolUpgradeURL()}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            Upgrade to view details
-                          </a>
-                        </div>
-                      </div>
+            <Show when={patrolRequiresLicense()}>
+              <div class="space-y-2">
+                <div class="flex items-center justify-between text-[11px] text-gray-500 dark:text-gray-400">
+                  <span>Preview findings (details locked)</span>
+                  <span>{aiFindings().length} detected</span>
+                </div>
+                <Show
+                  when={aiFindings().length > 0}
+                  fallback={
+                    <div class="text-sm text-gray-500 dark:text-gray-400 italic">
+                      No preview findings yet. Enable Patrol to generate a preview.
                     </div>
-                  )}
-                </For>
-                <Show when={aiFindings().length > 3}>
-                  <div class="text-[11px] text-gray-500 dark:text-gray-400">
-                    +{aiFindings().length - 3} more findings hidden
-                  </div>
-                </Show>
-              </Show>
-            </div>
-          </Show>
-          <Show when={!patrolRequiresLicense()}>
-            <div class="space-y-2">
-              <Show
-                when={aiFindings().length > 0}
-                fallback={
-                  <div class="text-center py-6 border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 rounded-lg">
-                    <div class="flex justify-center mb-2">
-                      <svg class="w-10 h-10 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4" />
-                      </svg>
-                    </div>
-                    <p class="text-sm font-medium text-green-700 dark:text-green-400">All Systems Healthy</p>
-                    <p class="text-xs text-green-600 dark:text-green-500 mt-1">AI patrol found no issues to report</p>
-                  </div>
-                }
-              >
-                <For each={aiFindings().filter(f => !pendingFixFindings().has(f.id))}>
-                  {(finding) => {
-                    const colors = severityColors[finding.severity];
-                    const isExpanded = () => expandedFindingIds().has(finding.id);
-                    const toggleExpanded = () => {
-                      setExpandedFindingIds((prev) => {
-                        const next = new Set(prev);
-                        if (next.has(finding.id)) {
-                          next.delete(finding.id);
-                        } else {
-                          next.add(finding.id);
-                          // Load remediations when expanding (if not already loaded)
-                          if (remediationsByFinding()[finding.id] === undefined && !remediationLoadingByFinding()[finding.id]) {
-                            void loadRemediationsForFinding(finding.id);
-                          }
-                        }
-                        return next;
-                      });
-                    };
-                    return (
-                      <div
-                        class="border rounded-lg transition-all"
-                        style={{
-                          'background-color': colors.bg,
-                          'border-color': colors.border,
-                        }}
-                      >
-                        {/* Compact header - always visible, clickable */}
-                        <div
-                          class="flex items-center gap-3 p-3 cursor-pointer hover:opacity-80"
-                          onClick={toggleExpanded}
-                        >
-                          {/* Expand chevron */}
-                          <svg
-                            class={`w-4 h-4 text-gray-500 transition-transform flex-shrink-0 ${isExpanded() ? 'rotate-90' : ''}`}
-                            fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                          >
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                          </svg>
-                          {/* Severity badge */}
-                          <span
-                            class="px-2 py-0.5 text-xs rounded capitalize font-medium flex-shrink-0"
-                            style={{ 'background-color': colors.border, color: colors.text }}
-                          >
+                  }
+                >
+                  <For each={aiFindings().slice(0, 3)}>
+                    {(finding) => (
+                      <div class="border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800/40">
+                        <div class="flex items-center gap-2 px-3 pt-3">
+                          <span class="px-2 py-0.5 text-[10px] rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 capitalize">
                             {finding.severity}
                           </span>
-                          {/* Title (main info) */}
-                          <span class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate flex-1">
-                            {finding.title}
-                          </span>
-                          {/* Recurrence badge - show if raised multiple times */}
-                          <Show when={finding.times_raised > 1}>
-                            <span
-                              class="text-[10px] px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 flex-shrink-0"
-                              title={`This issue has been detected ${finding.times_raised} times`}
-                            >
-                              ×{finding.times_raised}
-                            </span>
-                          </Show>
-                          {/* Dismissed status badge */}
-                          <Show when={finding.dismissed_reason}>
-                            <span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 flex-shrink-0">
-                              {finding.dismissed_reason === 'not_an_issue' && '✓ Dismissed'}
-                              {finding.dismissed_reason === 'expected_behavior' && '✓ Expected'}
-                              {finding.dismissed_reason === 'will_fix_later' && '⏱ Noted'}
-                            </span>
-                          </Show>
-                          {/* Suppressed badge */}
-                          <Show when={finding.suppressed}>
-                            <span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 flex-shrink-0">
-                              🔇 Suppressed
-                            </span>
-                          </Show>
-                          {/* Alert-triggered badge - shows when finding came from alert-triggered analysis */}
-                          <Show when={finding.alert_id}>
-                            <span
-                              class="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex-shrink-0"
-                              title="This finding was discovered by alert-triggered analysis"
-                            >
-                              ⚡ Alert
-                            </span>
-                          </Show>
-                          {/* Resource name pill */}
-                          <span class="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex-shrink-0 hidden sm:inline">
-                            {finding.resource_name}
-                          </span>
-                          {/* AI badge */}
-                          <span
-                            class="inline-flex items-center justify-center w-5 h-5 rounded text-[9px] font-bold flex-shrink-0"
-                            style={{ 'background-color': colors.border, color: colors.text }}
-                          >
-                            AI
+                          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            {finding.title || 'Potential issue detected'}
                           </span>
+                          <span class="ml-auto text-[10px] text-amber-600 dark:text-amber-300 uppercase tracking-wide">Locked</span>
                         </div>
+                        <div class="relative px-3 pb-3 pt-2">
+                          <div class="blur-sm text-xs text-gray-600 dark:text-gray-400">
+                            {finding.description || 'Upgrade to view full analysis.'}
+                          </div>
+                          <div class="absolute inset-0 flex items-center justify-center">
+                            <a
+                              class="text-[11px] font-medium text-amber-700 dark:text-amber-200 underline decoration-dotted"
+                              href={patrolUpgradeURL()}
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              Upgrade to view details
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                  <Show when={aiFindings().length > 3}>
+                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
+                      +{aiFindings().length - 3} more findings hidden
+                    </div>
+                  </Show>
+                </Show>
+              </div>
+            </Show>
+            <Show when={!patrolRequiresLicense()}>
+              <div class="space-y-2 sm:space-y-3">
+                <Show
+                  when={aiFindings().length > 0}
+                  fallback={
+                    <div class="text-center py-4 sm:py-6 border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 rounded-lg">
+                      <div class="flex justify-center mb-2">
+                        <svg class="w-10 h-10 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4" />
+                        </svg>
+                      </div>
+                      <p class="text-sm font-medium text-green-700 dark:text-green-400">All Systems Healthy</p>
+                      <p class="text-xs text-green-600 dark:text-green-500 mt-1">AI patrol found no issues to report</p>
+                    </div>
+                  }
+                >
+                  <For each={aiFindings().filter(f => !pendingFixFindings().has(f.id))}>
+                    {(finding) => {
+                      const colors = severityColors[finding.severity];
+                      const isExpanded = () => expandedFindingIds().has(finding.id);
+                      const toggleExpanded = () => {
+                        setExpandedFindingIds((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(finding.id)) {
+                            next.delete(finding.id);
+                          } else {
+                            next.add(finding.id);
+                            // Load remediations when expanding (if not already loaded)
+                            if (remediationsByFinding()[finding.id] === undefined && !remediationLoadingByFinding()[finding.id]) {
+                              void loadRemediationsForFinding(finding.id);
+                            }
+                          }
+                          return next;
+                        });
+                      };
+                      return (
+                        <div
+                          class="border rounded-lg transition-all"
+                          style={{
+                            'background-color': colors.bg,
+                            'border-color': colors.border,
+                          }}
+                        >
+                          {/* Compact header - always visible, clickable */}
+                          <div
+                            class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 cursor-pointer hover:opacity-80"
+                            onClick={toggleExpanded}
+                          >
+                            {/* Expand chevron */}
+                            <svg
+                              class={`w-4 h-4 text-gray-500 transition-transform flex-shrink-0 ${isExpanded() ? 'rotate-90' : ''}`}
+                              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                            >
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                            </svg>
+                            {/* Severity badge */}
+                            <span
+                              class="px-2 py-0.5 text-xs rounded capitalize font-medium flex-shrink-0"
+                              style={{ 'background-color': colors.border, color: colors.text }}
+                            >
+                              {finding.severity}
+                            </span>
+                            {/* Title (main info) */}
+                            <span class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate flex-1">
+                              {finding.title}
+                            </span>
+                            {/* Recurrence badge - show if raised multiple times */}
+                            <Show when={finding.times_raised > 1}>
+                              <span
+                                class="text-[10px] px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 flex-shrink-0"
+                                title={`This issue has been detected ${finding.times_raised} times`}
+                              >
+                                ×{finding.times_raised}
+                              </span>
+                            </Show>
+                            {/* Dismissed status badge */}
+                            <Show when={finding.dismissed_reason}>
+                              <span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 flex-shrink-0">
+                                {finding.dismissed_reason === 'not_an_issue' && '✓ Dismissed'}
+                                {finding.dismissed_reason === 'expected_behavior' && '✓ Expected'}
+                                {finding.dismissed_reason === 'will_fix_later' && '⏱ Noted'}
+                              </span>
+                            </Show>
+                            {/* Suppressed badge */}
+                            <Show when={finding.suppressed}>
+                              <span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 flex-shrink-0">
+                                🔇 Suppressed
+                              </span>
+                            </Show>
+                            {/* Alert-triggered badge - shows when finding came from alert-triggered analysis */}
+                            <Show when={finding.alert_id}>
+                              <span
+                                class="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex-shrink-0"
+                                title="This finding was discovered by alert-triggered analysis"
+                              >
+                                ⚡ Alert
+                              </span>
+                            </Show>
+                            {/* Resource name pill */}
+                            <span class="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex-shrink-0 hidden sm:inline">
+                              {finding.resource_name}
+                            </span>
+                            {/* AI badge */}
+                            <span
+                              class="inline-flex items-center justify-center w-5 h-5 rounded text-[9px] font-bold flex-shrink-0"
+                              style={{ 'background-color': colors.border, color: colors.text }}
+                            >
+                              AI
+                            </span>
+                          </div>
 
-                        {/* Expanded details */}
-                        <Show when={isExpanded()}>
-                          <div class="px-4 pb-4 pt-1 border-t" style={{ 'border-color': colors.border }}>
-                            {/* Resource and category info */}
-                            <div class="flex flex-wrap items-center gap-2 mb-2">
-                              <span class="text-sm font-medium" style={{ color: colors.text }}>
-                                {finding.resource_name}
-                              </span>
-                              <span class="text-xs text-gray-600 dark:text-gray-400">
-                                ({finding.category})
-                              </span>
-                              <Show when={finding.node}>
-                                <span class="text-xs text-gray-500 dark:text-gray-500">
-                                  on {finding.node}
+                          {/* Expanded details */}
+                          <Show when={isExpanded()}>
+                            <div class="px-3 sm:px-4 pb-3 sm:pb-4 pt-1 border-t" style={{ 'border-color': colors.border }}>
+                              {/* Resource and category info */}
+                              <div class="flex flex-wrap items-center gap-2 mb-2">
+                                <span class="text-sm font-medium" style={{ color: colors.text }}>
+                                  {finding.resource_name}
                                 </span>
-                              </Show>
-                            </div>
-
-                            {/* Description */}
-                            <p class="text-sm text-gray-600 dark:text-gray-400">
-                              {finding.description}
-                            </p>
-
-                            {/* Recommendation */}
-                            <Show when={finding.recommendation}>
-                              <p class="text-xs text-gray-500 dark:text-gray-500 mt-2 italic">
-                                Suggested: {finding.recommendation}
-                              </p>
-                            </Show>
-
-                            {/* User note if present */}
-                            <Show when={finding.user_note}>
-                              <div class="mt-2 p-2 rounded bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
-                                <p class="text-xs text-blue-700 dark:text-blue-300">
-                                  <span class="font-medium">Your note:</span> {finding.user_note}
-                                </p>
+                                <span class="text-xs text-gray-600 dark:text-gray-400">
+                                  ({finding.category})
+                                </span>
+                                <Show when={finding.node}>
+                                  <span class="text-xs text-gray-500 dark:text-gray-500">
+                                    on {finding.node}
+                                  </span>
+                                </Show>
                               </div>
-                            </Show>
 
-                            {/* Footer with time and actions */}
-                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
-                              <p class="text-xs text-gray-500 dark:text-gray-500">
-                                Detected: {formatTimestamp(finding.detected_at)}
+                              {/* Description */}
+                              <p class="text-sm text-gray-600 dark:text-gray-400">
+                                {finding.description}
                               </p>
-                              <div class="flex items-center gap-2">
-                                {/* Get Help with AI button */}
-                                <button
-                                  class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-700 hover:bg-purple-100 dark:hover:bg-purple-900/50 flex items-center gap-1.5"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    aiChatStore.openWithPrompt(
-                                      `Help me fix this issue on ${finding.resource_name}: ${finding.title}\n\nDescription: ${finding.description}\n\nSuggested fix: ${finding.recommendation || 'None provided'}\n\nPlease guide me through applying this fix. When you've successfully fixed the issue, use the resolve_finding tool to mark it as resolved.`,
-                                      { findingId: finding.id }
-                                    );
-                                  }}
-                                >
-                                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                                  </svg>
-                                  Get Help
-                                </button>
-                                {/* Runbook button removed - feature was removed */}
 
-                                <button
-                                  class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-300 dark:border-green-700 hover:bg-green-100 dark:hover:bg-green-900/50 flex items-center gap-1.5"
-                                  onClick={async (e) => {
-                                    e.stopPropagation();
-                                    // Immediately hide the finding locally
-                                    setPendingFixFindings(prev => {
-                                      const next = new Set(prev);
-                                      next.add(finding.id);
-                                      return next;
-                                    });
-                                    try {
-                                      await resolveFinding(finding.id);
-                                      notificationStore.success('✓ Fixed! Issue cleared from insights.');
-                                      fetchAiData();
-                                    } catch (_err) {
-                                      // Still keep it hidden locally since user said they fixed it
-                                      notificationStore.error('Failed to mark as fixed on server');
-                                    }
-                                  }}
-                                  title="Mark as fixed - the next patrol will verify"
-                                >
-                                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                                  </svg>
-                                  I Fixed It
-                                </button>
-                                {/* Not an Issue dropdown - LLM memory system */}
-                                <div class="relative group">
+                              {/* Recommendation */}
+                              <Show when={finding.recommendation}>
+                                <p class="text-xs text-gray-500 dark:text-gray-500 mt-2 italic">
+                                  Suggested: {finding.recommendation}
+                                </p>
+                              </Show>
+
+                              {/* User note if present */}
+                              <Show when={finding.user_note}>
+                                <div class="mt-2 p-2 rounded bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+                                  <p class="text-xs text-blue-700 dark:text-blue-300">
+                                    <span class="font-medium">Your note:</span> {finding.user_note}
+                                  </p>
+                                </div>
+                              </Show>
+
+                              {/* Footer with time and actions */}
+                              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
+                                <p class="text-xs text-gray-500 dark:text-gray-500">
+                                  Detected: {formatTimestamp(finding.detected_at)}
+                                </p>
+                                <div class="flex items-center gap-2">
+                                  {/* Get Help with AI button */}
                                   <button
-                                    class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5"
-                                    onClick={(e) => e.stopPropagation()}
-                                    title="Dismiss this finding - AI won't re-raise it"
+                                    class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-700 hover:bg-purple-100 dark:hover:bg-purple-900/50 flex items-center gap-1.5"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      aiChatStore.openWithPrompt(
+                                        `Help me fix this issue on ${finding.resource_name}: ${finding.title}\n\nDescription: ${finding.description}\n\nSuggested fix: ${finding.recommendation || 'None provided'}\n\nPlease guide me through applying this fix. When you've successfully fixed the issue, use the resolve_finding tool to mark it as resolved.`,
+                                        { findingId: finding.id }
+                                      );
+                                    }}
                                   >
                                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                                    </svg>
-                                    Dismiss
-                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                                     </svg>
+                                    Get Help
                                   </button>
-                                  {/* Dropdown menu - pt-2 creates visual gap while maintaining hover area */}
-                                  <div class="absolute right-0 top-full pt-1 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
-                                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
-                                      <button
-                                        class="w-full px-3 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg transition-colors"
-                                        onClick={async (e) => {
-                                          e.stopPropagation();
-                                          try {
-                                            await dismissFinding(finding.id, 'not_an_issue');
-                                            notificationStore.success('Dismissed - AI will not raise this again');
-                                            fetchAiData();
-                                          } catch (_err) {
-                                            notificationStore.error('Failed to dismiss finding');
-                                          }
-                                        }}
-                                      >
-                                        <span class="font-medium text-gray-700 dark:text-gray-300">Not an Issue</span>
-                                        <p class="text-gray-500 dark:text-gray-500 mt-0.5">This isn't actually a problem</p>
-                                      </button>
-                                      <button
-                                        class="w-full px-3 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                                        onClick={async (e) => {
-                                          e.stopPropagation();
-                                          const note = prompt('Why is this expected? (optional - helps AI understand your environment)');
-                                          try {
-                                            await dismissFinding(finding.id, 'expected_behavior', note || undefined);
-                                            notificationStore.success('Dismissed - AI will not raise this again');
-                                            fetchAiData();
-                                          } catch (_err) {
-                                            notificationStore.error('Failed to dismiss finding');
-                                          }
-                                        }}
-                                      >
-                                        <span class="font-medium text-gray-700 dark:text-gray-300">Expected Behavior</span>
-                                        <p class="text-gray-500 dark:text-gray-500 mt-0.5">This is intentional/by design</p>
-                                      </button>
-                                      <button
-                                        class="w-full px-3 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                                        onClick={async (e) => {
-                                          e.stopPropagation();
-                                          try {
-                                            await dismissFinding(finding.id, 'will_fix_later');
-                                            notificationStore.success('Acknowledged - AI will check again later');
-                                            fetchAiData();
-                                          } catch (_err) {
-                                            notificationStore.error('Failed to dismiss finding');
-                                          }
-                                        }}
-                                      >
-                                        <span class="font-medium text-gray-700 dark:text-gray-300">Will Fix Later</span>
-                                        <p class="text-gray-500 dark:text-gray-500 mt-0.5">I know about it, will address</p>
-                                      </button>
-                                      <div class="border-t border-gray-200 dark:border-gray-700">
+                                  {/* Runbook button removed - feature was removed */}
+
+                                  <button
+                                    class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-300 dark:border-green-700 hover:bg-green-100 dark:hover:bg-green-900/50 flex items-center gap-1.5"
+                                    onClick={async (e) => {
+                                      e.stopPropagation();
+                                      // Immediately hide the finding locally
+                                      setPendingFixFindings(prev => {
+                                        const next = new Set(prev);
+                                        next.add(finding.id);
+                                        return next;
+                                      });
+                                      try {
+                                        await resolveFinding(finding.id);
+                                        notificationStore.success('✓ Fixed! Issue cleared from insights.');
+                                        fetchAiData();
+                                      } catch (_err) {
+                                        // Still keep it hidden locally since user said they fixed it
+                                        notificationStore.error('Failed to mark as fixed on server');
+                                      }
+                                    }}
+                                    title="Mark as fixed - the next patrol will verify"
+                                  >
+                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    I Fixed It
+                                  </button>
+                                  {/* Not an Issue dropdown - LLM memory system */}
+                                  <div class="relative group">
+                                    <button
+                                      class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5"
+                                      onClick={(e) => e.stopPropagation()}
+                                      title="Dismiss this finding - AI won't re-raise it"
+                                    >
+                                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                                      </svg>
+                                      Dismiss
+                                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                                      </svg>
+                                    </button>
+                                    {/* Dropdown menu - pt-2 creates visual gap while maintaining hover area */}
+                                    <div class="absolute right-0 top-full pt-1 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
+                                      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
                                         <button
-                                          class="w-full px-3 py-2 text-left text-xs hover:bg-red-50 dark:hover:bg-red-900/30 rounded-b-lg transition-colors text-red-600 dark:text-red-400"
+                                          class="w-full px-3 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg transition-colors"
                                           onClick={async (e) => {
                                             e.stopPropagation();
-                                            if (confirm('Permanently suppress this type of finding for this resource?\n\nThe AI will never raise this issue again.')) {
-                                              try {
-                                                await suppressFinding(finding.id);
-                                                notificationStore.success('Suppressed - AI will never raise this again');
-                                                fetchAiData();
-                                              } catch (_err) {
-                                                notificationStore.error('Failed to suppress finding');
-                                              }
+                                            try {
+                                              await dismissFinding(finding.id, 'not_an_issue');
+                                              notificationStore.success('Dismissed - AI will not raise this again');
+                                              fetchAiData();
+                                            } catch (_err) {
+                                              notificationStore.error('Failed to dismiss finding');
                                             }
                                           }}
                                         >
-                                          <span class="font-medium">Never Alert Again</span>
-                                          <p class="text-red-500/80 dark:text-red-400/80 mt-0.5">Permanently suppress for this resource</p>
+                                          <span class="font-medium text-gray-700 dark:text-gray-300">Not an Issue</span>
+                                          <p class="text-gray-500 dark:text-gray-500 mt-0.5">This isn't actually a problem</p>
                                         </button>
+                                        <button
+                                          class="w-full px-3 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                                          onClick={async (e) => {
+                                            e.stopPropagation();
+                                            const note = prompt('Why is this expected? (optional - helps AI understand your environment)');
+                                            try {
+                                              await dismissFinding(finding.id, 'expected_behavior', note || undefined);
+                                              notificationStore.success('Dismissed - AI will not raise this again');
+                                              fetchAiData();
+                                            } catch (_err) {
+                                              notificationStore.error('Failed to dismiss finding');
+                                            }
+                                          }}
+                                        >
+                                          <span class="font-medium text-gray-700 dark:text-gray-300">Expected Behavior</span>
+                                          <p class="text-gray-500 dark:text-gray-500 mt-0.5">This is intentional/by design</p>
+                                        </button>
+                                        <button
+                                          class="w-full px-3 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                                          onClick={async (e) => {
+                                            e.stopPropagation();
+                                            try {
+                                              await dismissFinding(finding.id, 'will_fix_later');
+                                              notificationStore.success('Acknowledged - AI will check again later');
+                                              fetchAiData();
+                                            } catch (_err) {
+                                              notificationStore.error('Failed to dismiss finding');
+                                            }
+                                          }}
+                                        >
+                                          <span class="font-medium text-gray-700 dark:text-gray-300">Will Fix Later</span>
+                                          <p class="text-gray-500 dark:text-gray-500 mt-0.5">I know about it, will address</p>
+                                        </button>
+                                        <div class="border-t border-gray-200 dark:border-gray-700">
+                                          <button
+                                            class="w-full px-3 py-2 text-left text-xs hover:bg-red-50 dark:hover:bg-red-900/30 rounded-b-lg transition-colors text-red-600 dark:text-red-400"
+                                            onClick={async (e) => {
+                                              e.stopPropagation();
+                                              if (confirm('Permanently suppress this type of finding for this resource?\n\nThe AI will never raise this issue again.')) {
+                                                try {
+                                                  await suppressFinding(finding.id);
+                                                  notificationStore.success('Suppressed - AI will never raise this again');
+                                                  fetchAiData();
+                                                } catch (_err) {
+                                                  notificationStore.error('Failed to suppress finding');
+                                                }
+                                              }
+                                            }}
+                                          >
+                                            <span class="font-medium">Never Alert Again</span>
+                                            <p class="text-red-500/80 dark:text-red-400/80 mt-0.5">Permanently suppress for this resource</p>
+                                          </button>
+                                        </div>
                                       </div>
                                     </div>
                                   </div>
                                 </div>
+
+                                {/* Runbook Execution section removed - feature was removed */}
+
+
+
+                                {/* Fix Receipts section removed - was showing "No fixes logged" without runbooks */}
+
                               </div>
-
-                              {/* Runbook Execution section removed - feature was removed */}
-
-
-
-                              {/* Fix Receipts section removed - was showing "No fixes logged" without runbooks */}
-
                             </div>
-                          </div>
-                        </Show>
-                      </div>
-                    );
-                  }}
-                </For>
-              </Show>
-            </div>
-          </Show>
-
-          <Show when={!patrolRequiresLicense()}>
-            {/* Suppression Rules - What's being ignored */}
-            <div class="mt-6">
-              <div class="flex items-center justify-between">
-                <button
-                  class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
-                  onClick={() => setShowSuppressionRules(!showSuppressionRules())}
-                >
-                  <svg
-                    class={`w-4 h-4 transition-transform ${showSuppressionRules() ? 'rotate-90' : ''}`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                  </svg>
-                  🔇 Suppression Rules ({suppressionRules().length} active)
-                </button>
-                <button
-                  class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
-                  onClick={() => setShowAddRuleForm(!showAddRuleForm())}
-                >
-                  + Add Rule
-                </button>
-              </div>
-
-              {/* Add rule form */}
-              <Show when={showAddRuleForm()}>
-                <div class="mt-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-                  <p class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-3">
-                    Add a suppression rule to prevent alerts
-                  </p>
-                  <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
-                    <input
-                      type="text"
-                      class="px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                      placeholder="Resource ID (or leave empty for any)"
-                      value={newRuleResource()}
-                      onInput={(e) => setNewRuleResource(e.currentTarget.value)}
-                    />
-                    <select
-                      class="px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                      value={newRuleCategory()}
-                      onChange={(e) => setNewRuleCategory(e.currentTarget.value)}
-                    >
-                      <option value="">Any category</option>
-                      <option value="performance">Performance</option>
-                      <option value="capacity">Capacity</option>
-                      <option value="reliability">Reliability</option>
-                      <option value="backup">Backup</option>
-                      <option value="security">Security</option>
-                      <option value="general">General</option>
-                    </select>
-                    <input
-                      type="text"
-                      class="px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                      placeholder="Reason (e.g., 'Dev container runs hot')"
-                      value={newRuleDescription()}
-                      onInput={(e) => setNewRuleDescription(e.currentTarget.value)}
-                    />
-                  </div>
-                  <div class="flex gap-2">
-                    <button
-                      class="px-3 py-1.5 text-sm font-medium rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50"
-                      disabled={!newRuleDescription()}
-                      onClick={async () => {
-                        try {
-                          await addSuppressionRule(
-                            newRuleResource(),
-                            newRuleResource() || 'Any resource',
-                            (newRuleCategory() as 'performance' | 'capacity' | 'reliability' | 'backup' | 'security' | 'general' | ''),
-                            newRuleDescription()
-                          );
-                          notificationStore.success('Suppression rule created');
-                          setShowAddRuleForm(false);
-                          setNewRuleResource('');
-                          setNewRuleCategory('');
-                          setNewRuleDescription('');
-                          fetchAiData();
-                        } catch (_err) {
-                          notificationStore.error('Failed to create rule');
-                        }
-                      }}
-                    >
-                      Create Rule
-                    </button>
-                    <button
-                      class="px-3 py-1.5 text-sm font-medium rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-                      onClick={() => setShowAddRuleForm(false)}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </Show>
-
-              {/* Rules list */}
-              <Show when={showSuppressionRules()}>
-                <div class="mt-3 space-y-2">
-                  <Show when={suppressionRules().length === 0}>
-                    <p class="text-sm text-gray-500 dark:text-gray-500 italic">
-                      No suppression rules. Dismiss findings or add rules to prevent unwanted alerts.
-                    </p>
-                  </Show>
-                  <For each={suppressionRules()}>
-                    {(rule) => (
-                      <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
-                        <div class="flex-1 min-w-0">
-                          <div class="flex items-center gap-2 text-sm">
-                            <span class="font-medium text-gray-800 dark:text-gray-200">
-                              {rule.resource_name || rule.resource_id || 'Any resource'}
-                            </span>
-                            <Show when={rule.category}>
-                              <span class="px-2 py-0.5 text-xs rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-                                {categoryLabels[rule.category!] || rule.category}
-                              </span>
-                            </Show>
-                            <Show when={!rule.category}>
-                              <span class="px-2 py-0.5 text-xs rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-                                Any category
-                              </span>
-                            </Show>
-                            <span class="px-1.5 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
-                              {rule.created_from === 'finding' ? 'From Finding' : 'Manual'}
-                            </span>
-                          </div>
-                          <p class="text-xs text-gray-500 dark:text-gray-500 mt-1 truncate">
-                            {rule.description || 'No description'}
-                          </p>
-                        </div>
-                        <button
-                          class="ml-3 px-2 py-1 text-xs text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors"
-                          onClick={async () => {
-                            try {
-                              await deleteSuppressionRule(rule.id);
-                              notificationStore.success('Rule deleted');
-                              fetchAiData();
-                            } catch (_err) {
-                              notificationStore.error('Failed to delete rule');
-                            }
-                          }}
-                          title="Delete this rule"
-                        >
-                          Delete
-                        </button>
-                      </div>
-                    )}
-                  </For>
-                </div>
-              </Show>
-            </div>
-          </Show>
-
-          <Show when={!patrolRequiresLicense()}>
-            {/* Patrol Check History */}
-            <div class="mt-6">
-              <div class="flex items-center justify-between">
-                <button
-                  class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
-                  onClick={() => setShowRunHistory(!showRunHistory())}
-                >
-                  <svg
-                    class={`w-4 h-4 transition-transform ${showRunHistory() ? 'rotate-90' : ''}`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                  </svg>
-                  Patrol Check History ({filteredPatrolHistory().length} runs)
-                  <Show when={patrolRunHistory().length > 0 && patrolRunHistory()[0].status !== 'healthy'}>
-                    <span class="ml-1 px-1.5 py-0.5 text-[10px] bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 rounded">Issues Found</span>
-                  </Show>
-                </button>
-
-                {/* Next Patrol Timer */}
-                <Show when={nextPatrolIn()}>
-                  <span class="text-xs text-gray-500 dark:text-gray-400">
-                    Next patrol in <span class="font-mono font-medium text-purple-600 dark:text-purple-400">{nextPatrolIn()}</span>
-                  </span>
-                </Show>
-              </div>
-
-              <Show when={showRunHistory()}>
-                <div class="mt-3">
-                  {/* Time Filter + Mini Health Chart */}
-                  <div class="flex flex-wrap items-center gap-3 mb-3">
-                    <div class="flex gap-1">
-                      <button
-                        class={`px-2 py-1 text-xs rounded transition-colors ${historyTimeFilter() === '24h' ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
-                        onClick={() => setHistoryTimeFilter('24h')}
-                      >
-                        24h
-                      </button>
-                      <button
-                        class={`px-2 py-1 text-xs rounded transition-colors ${historyTimeFilter() === '7d' ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
-                        onClick={() => setHistoryTimeFilter('7d')}
-                      >
-                        7d
-                      </button>
-                      <button
-                        class={`px-2 py-1 text-xs rounded transition-colors ${historyTimeFilter() === 'all' ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
-                        onClick={() => setHistoryTimeFilter('all')}
-                      >
-                        All
-                      </button>
-                    </div>
-
-                    {/* Mini Health Chart */}
-                    <Show when={filteredPatrolHistory().length > 0}>
-                      <div class="flex items-center gap-0.5 h-4">
-                        <For each={filteredPatrolHistory().slice(0, 20).reverse()}>
-                          {(run) => (
-                            <div
-                              class={`w-1.5 h-full rounded-sm transition-all hover:opacity-75 ${run.status === 'healthy' ? 'bg-green-400 dark:bg-green-500' :
-                                run.status === 'critical' || run.status === 'error' ? 'bg-red-400 dark:bg-red-500' :
-                                  'bg-yellow-400 dark:bg-yellow-500'
-                                }`}
-                              title={`${formatTimestamp(run.completed_at)}: ${run.findings_summary}`}
-                            />
-                          )}
-                        </For>
-                        <span class="ml-1.5 text-[10px] text-gray-400">← newest</span>
-                      </div>
-                    </Show>
-                  </div>
-
-                  <Show
-                    when={filteredPatrolHistory().length > 0}
-                    fallback={
-                      <p class="text-sm text-gray-500 dark:text-gray-400 italic py-4">No patrol runs in selected time range.</p>
-                    }
-                  >
-                    <div class="border border-gray-200 dark:border-gray-700 rounded overflow-x-auto">
-                      <table class="w-full min-w-[600px] text-xs sm:text-sm">
-                        <thead>
-                          <tr class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
-                            <th class="p-1.5 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-4"></th>
-                            <th class="p-1.5 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">When</th>
-                            <th class="p-1.5 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">Result</th>
-                            <th class="p-1.5 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">Resources</th>
-                            <th class="p-1.5 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">Duration</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {/* Show "Currently Running" row when patrol is in progress */}
-                          <Show when={patrolStatus()?.running}>
-                            <tr
-                              class="border-b border-gray-200 dark:border-gray-600 bg-purple-50 dark:bg-purple-900/20 cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/30"
-                              onClick={() => setExpandedLiveStream(!expandedLiveStream())}
-                            >
-                              <td class="p-1.5 px-2 text-purple-500">
-                                <svg class={`w-3 h-3 transition-transform ${expandedLiveStream() ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                                </svg>
-                              </td>
-                              <td class="p-1.5 px-2 text-purple-600 dark:text-purple-400 font-mono whitespace-nowrap">
-                                <div class="flex items-center gap-1.5">
-                                  <svg class="w-3 h-3 animate-spin" viewBox="0 0 24 24" fill="none">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                                  </svg>
-                                  Now
-                                </div>
-                              </td>
-                              <td class="p-1.5 px-2 text-center">
-                                <span class="text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">
-                                  Running
-                                </span>
-                              </td>
-                              <td class="p-1.5 px-2 text-center" colspan="3">
-                                <span class="text-xs text-purple-600 dark:text-purple-400">
-                                  {expandedLiveStream() ? 'Click to collapse' : 'Click to view live AI analysis'}
-                                </span>
-                              </td>
-                            </tr>
-                            {/* Expanded Live Stream Row */}
-                            <Show when={expandedLiveStream()}>
-                              <tr class="bg-purple-50 dark:bg-purple-900/10 border-b border-gray-200 dark:border-gray-600">
-                                <td colspan="5" class="p-3">
-                                  <div class="flex items-center justify-between mb-3">
-                                    <span class="text-[10px] text-purple-500 dark:text-purple-400 uppercase tracking-wider flex items-center gap-1.5">
-                                      <svg class="w-3 h-3 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                                      </svg>
-                                      Live AI Analysis
-                                    </span>
-                                    <span class="text-[9px] text-purple-400 dark:text-purple-500">
-                                      Streaming in real-time...
-                                    </span>
-                                  </div>
-                                  {/* Sequential blocks display - like AI chat */}
-                                  <div class="space-y-2 max-h-80 overflow-y-auto">
-                                    {/* Rendered blocks */}
-                                    <For each={liveStreamBlocks()}>
-                                      {(block) => (
-                                        <Show
-                                          when={block.type === 'phase'}
-                                          fallback={
-                                            /* Thinking block */
-                                            <div class="px-3 py-2 text-xs bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 rounded-lg border-l-2 border-blue-400 whitespace-pre-wrap font-mono leading-relaxed">
-                                              {block.text.length > 800 ? block.text.substring(0, 800) + '...' : block.text}
-                                            </div>
-                                          }
-                                        >
-                                          {/* Phase marker */}
-                                          <div class="flex items-center gap-2 px-2 py-1">
-                                            <Show
-                                              when={block.text === 'Analysis complete'}
-                                              fallback={
-                                                <svg class="w-3 h-3 animate-spin text-purple-500" viewBox="0 0 24 24" fill="none">
-                                                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                                                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                                                </svg>
-                                              }
-                                            >
-                                              <svg class="w-3 h-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                                              </svg>
-                                            </Show>
-                                            <span class="text-[10px] font-medium text-purple-600 dark:text-purple-400">
-                                              {block.text}
-                                            </span>
-                                          </div>
-                                        </Show>
-                                      )}
-                                    </For>
-                                    {/* Currently streaming content */}
-                                    <Show when={currentThinking()}>
-                                      <div class="px-3 py-2 text-xs bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 rounded-lg border-l-2 border-blue-400 whitespace-pre-wrap font-mono leading-relaxed">
-                                        {currentThinking().length > 500 ? currentThinking().substring(0, 500) + '...' : currentThinking()}
-                                        <span class="inline-block w-1.5 h-3 bg-blue-500 ml-0.5 animate-pulse" />
-                                      </div>
-                                    </Show>
-                                    {/* Empty state */}
-                                    <Show when={liveStreamBlocks().length === 0 && !currentThinking()}>
-                                      <div class="flex items-center gap-2 px-2 py-3 text-xs text-gray-500 dark:text-gray-400">
-                                        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
-                                          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                                          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                                        </svg>
-                                        <span class="italic">Waiting for AI response...</span>
-                                      </div>
-                                    </Show>
-                                  </div>
-                                </td>
-                              </tr>
-                            </Show>
                           </Show>
-                          <For each={filteredPatrolHistory()}>
-                            {(run) => {
-                              const statusStyles = {
-                                healthy: 'bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300',
-                                issues_found: 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300',
-                                critical: 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300',
-                                error: 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300',
-                              };
-                              const statusStyle = statusStyles[run.status] || statusStyles.healthy;
-                              const hasDetails = run.finding_ids && run.finding_ids.length > 0;
-
-                              return (
-                                <>
-                                  <tr
-                                    class={`border-b border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 ${hasDetails ? 'cursor-pointer' : ''}`}
-                                    onClick={() => hasDetails && setExpandedRunId(expandedRunId() === run.id ? null : run.id)}
-                                  >
-                                    <td class="p-1.5 px-2 text-gray-400">
-                                      <Show when={hasDetails}>
-                                        <svg class={`w-3 h-3 transition-transform ${expandedRunId() === run.id ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                                        </svg>
-                                      </Show>
-                                    </td>
-                                    <td class="p-1.5 px-2 text-gray-600 dark:text-gray-400 font-mono whitespace-nowrap">
-                                      {formatTimestamp(run.completed_at)}
-                                    </td>
-                                    <td class="p-1.5 px-2">
-                                      <span class={`text-[10px] px-1.5 py-0.5 rounded font-medium ${statusStyle}`}>
-                                        {run.findings_summary}
-                                      </span>
-                                    </td>
-                                    <td class="p-1.5 px-2 text-center text-gray-700 dark:text-gray-300">
-                                      {run.resources_checked}
-                                    </td>
-                                    <td class="p-1.5 px-2 text-center text-gray-500 dark:text-gray-400 font-mono">
-                                      {(() => {
-                                        const totalSeconds = Math.round(run.duration_ms / 1000000000);
-                                        if (totalSeconds < 60) {
-                                          return `${totalSeconds}s`;
-                                        }
-                                        const minutes = Math.floor(totalSeconds / 60);
-                                        const seconds = totalSeconds % 60;
-                                        return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-                                      })()}
-                                    </td>
-                                  </tr>
-                                  {/* Expanded Details Row */}
-                                  <Show when={expandedRunId() === run.id}>
-                                    <tr class="bg-gray-50 dark:bg-gray-800/50">
-                                      <td colspan="5" class="p-4">
-                                        {(() => {
-                                          const findingsMap = allFindingsMap();
-
-                                          // Categorize ALL findings from this run (not just warning+)
-                                          const criticalFindings: Finding[] = [];
-                                          const warningFindings: Finding[] = [];
-                                          const infoFindings: Finding[] = [];
-                                          const resolvedFindings: Finding[] = [];
-
-                                          (run.finding_ids || []).forEach(id => {
-                                            const finding = findingsMap.get(id);
-                                            if (finding) {
-                                              if (finding.resolved_at) {
-                                                resolvedFindings.push(finding);
-                                              } else {
-                                                switch (finding.severity) {
-                                                  case 'critical':
-                                                    criticalFindings.push(finding);
-                                                    break;
-                                                  case 'warning':
-                                                    warningFindings.push(finding);
-                                                    break;
-                                                  default:
-                                                    infoFindings.push(finding);
-                                                }
-                                              }
-                                            }
-                                          });
-
-                                          const hasActionableFindings = criticalFindings.length > 0 || warningFindings.length > 0;
-                                          const hasAnyFindings = hasActionableFindings || infoFindings.length > 0 || resolvedFindings.length > 0;
-
-                                          return (
-                                            <div class="space-y-4">
-                                              {/* Resource Breakdown & Stats Row */}
-                                              <div class="flex flex-wrap gap-4 text-xs text-gray-600 dark:text-gray-400">
-                                                <div class="flex items-center gap-1.5">
-                                                  <svg class="w-3.5 h-3.5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
-                                                  </svg>
-                                                  <span class="font-medium">{run.nodes_checked || 0}</span> nodes
-                                                </div>
-                                                <Show when={run.guests_checked > 0}>
-                                                  <div class="flex items-center gap-1.5">
-                                                    <svg class="w-3.5 h-3.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-                                                    </svg>
-                                                    <span class="font-medium">{run.guests_checked}</span> VMs/CTs
-                                                  </div>
-                                                </Show>
-                                                <Show when={run.docker_checked > 0}>
-                                                  <div class="flex items-center gap-1.5">
-                                                    <svg class="w-3.5 h-3.5 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-                                                    </svg>
-                                                    <span class="font-medium">{run.docker_checked}</span> Docker
-                                                  </div>
-                                                </Show>
-                                                <Show when={run.storage_checked > 0}>
-                                                  <div class="flex items-center gap-1.5">
-                                                    <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
-                                                    </svg>
-                                                    <span class="font-medium">{run.storage_checked}</span> storage
-                                                  </div>
-                                                </Show>
-                                                <Show when={run.hosts_checked > 0}>
-                                                  <div class="flex items-center gap-1.5">
-                                                    <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                                                    </svg>
-                                                    <span class="font-medium">{run.hosts_checked}</span> hosts
-                                                  </div>
-                                                </Show>
-                                                {/* Token usage for transparency */}
-                                                <Show when={run.output_tokens}>
-                                                  <div class="flex items-center gap-1.5 ml-auto text-gray-400 dark:text-gray-500">
-                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                                                    </svg>
-                                                    <span>{((run.input_tokens || 0) / 1000).toFixed(0)}k in / {((run.output_tokens || 0) / 1000).toFixed(1)}k out tokens</span>
-                                                  </div>
-                                                </Show>
-                                              </div>
-
-                                              {/* Critical & Warning Findings - Always show prominently */}
-                                              <Show when={criticalFindings.length > 0 || warningFindings.length > 0}>
-                                                <div class="space-y-2">
-                                                  <span class="text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wider font-medium">
-                                                    Findings Requiring Attention
-                                                  </span>
-                                                  <div class="space-y-1.5">
-                                                    <For each={[...criticalFindings, ...warningFindings]}>
-                                                      {(finding) => (
-                                                        <div class="flex items-start gap-2 text-xs p-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
-                                                          <span class={`flex-shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium ${finding.severity === 'critical'
-                                                            ? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300'
-                                                            : 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300'
-                                                            }`}>
-                                                            {finding.severity}
-                                                          </span>
-                                                          <div class="flex-1 min-w-0">
-                                                            <div class="font-medium text-gray-800 dark:text-gray-200">{finding.title}</div>
-                                                            <div class="text-gray-500 dark:text-gray-400 mt-0.5">
-                                                              {finding.resource_name}
-                                                              <Show when={finding.description}>
-                                                                <span class="mx-1">·</span>
-                                                                <span class="text-gray-400 dark:text-gray-500">{finding.description.substring(0, 100)}{finding.description.length > 100 ? '...' : ''}</span>
-                                                              </Show>
-                                                            </div>
-                                                          </div>
-                                                        </div>
-                                                      )}
-                                                    </For>
-                                                  </div>
-                                                </div>
-                                              </Show>
-
-                                              {/* Info/Watch Findings - Show with lower emphasis */}
-                                              <Show when={infoFindings.length > 0}>
-                                                <div class="space-y-2">
-                                                  <span class="text-[10px] text-blue-600 dark:text-blue-400 uppercase tracking-wider font-medium flex items-center gap-1">
-                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                                    </svg>
-                                                    Observations ({infoFindings.length})
-                                                  </span>
-                                                  <div class="space-y-1">
-                                                    <For each={infoFindings}>
-                                                      {(finding) => (
-                                                        <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 py-1">
-                                                          <span class="px-1.5 py-0.5 rounded text-[10px] bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
-                                                            {finding.severity}
-                                                          </span>
-                                                          <span>{finding.title}</span>
-                                                          <span class="text-gray-400 dark:text-gray-500">on {finding.resource_name}</span>
-                                                        </div>
-                                                      )}
-                                                    </For>
-                                                  </div>
-                                                </div>
-                                              </Show>
-
-                                              {/* Resolved findings */}
-                                              <Show when={resolvedFindings.length > 0}>
-                                                <div class="space-y-2">
-                                                  <span class="text-[10px] text-green-600 dark:text-green-400 uppercase tracking-wider font-medium flex items-center gap-1">
-                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                                                    </svg>
-                                                    Resolved Since Last Patrol ({resolvedFindings.length})
-                                                  </span>
-                                                  <div class="space-y-1">
-                                                    <For each={resolvedFindings}>
-                                                      {(finding) => (
-                                                        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-500 py-1">
-                                                          <span class="px-1.5 py-0.5 rounded text-[10px] bg-green-100 dark:bg-green-900/40 text-green-600 dark:text-green-400">
-                                                            ✓ fixed
-                                                          </span>
-                                                          <span class="line-through opacity-70">{finding.title}</span>
-                                                          <span class="opacity-50">on {finding.resource_name}</span>
-                                                        </div>
-                                                      )}
-                                                    </For>
-                                                  </div>
-                                                </div>
-                                              </Show>
-
-                                              {/* No findings case - show AI summary */}
-                                              <Show when={!hasAnyFindings}>
-                                                <div class="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
-                                                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                                  </svg>
-                                                  <span class="font-medium">All clear!</span>
-                                                  <span class="text-gray-500 dark:text-gray-400">No issues detected in this patrol run.</span>
-                                                </div>
-                                              </Show>
-
-                                              {/* AI Analysis Summary - Collapsible for long content */}
-                                              <Show when={run.ai_analysis}>
-                                                {(() => {
-                                                  const [showFullAnalysis, setShowFullAnalysis] = createSignal(false);
-                                                  const analysis = run.ai_analysis || '';
-                                                  // Extract summary (first paragraph or first 300 chars)
-                                                  const summaryMatch = analysis.match(/^([^]*?)(?:\n\n|\[FINDING\]|$)/);
-                                                  const summary = summaryMatch ? summaryMatch[1].trim() : analysis.substring(0, 300);
-                                                  const hasMore = analysis.length > summary.length + 50;
-
-                                                  return (
-                                                    <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
-                                                      <div class="flex items-center justify-between mb-2">
-                                                        <span class="text-[10px] text-purple-600 dark:text-purple-400 uppercase tracking-wider font-medium flex items-center gap-1">
-                                                          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                                                          </svg>
-                                                          AI Analysis
-                                                        </span>
-                                                        <Show when={hasMore}>
-                                                          <button
-                                                            class="text-[10px] text-purple-600 dark:text-purple-400 hover:underline"
-                                                            onClick={(e) => {
-                                                              e.stopPropagation();
-                                                              setShowFullAnalysis(!showFullAnalysis());
-                                                            }}
-                                                          >
-                                                            {showFullAnalysis() ? 'Show less' : 'Show full analysis'}
-                                                          </button>
-                                                        </Show>
-                                                      </div>
-                                                      <div class={`text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap ${showFullAnalysis() ? 'max-h-96 overflow-y-auto' : ''}`}>
-                                                        {showFullAnalysis() ? analysis.replace(/\[FINDING\][\s\S]*?\[\/FINDING\]/g, '').trim() : summary}
-                                                        <Show when={hasMore && !showFullAnalysis()}>
-                                                          <span class="text-gray-400">...</span>
-                                                        </Show>
-                                                      </div>
-                                                    </div>
-                                                  );
-                                                })()}
-                                              </Show>
-                                            </div>
-                                          );
-                                        })()}
-                                      </td>
-                                    </tr>
-                                  </Show>
-                                </>
-                              );
-                            }}
-                          </For>
-                        </tbody>
-                      </table>
-                    </div>
-                  </Show>
-                </div>
-              </Show>
-            </div>
-          </Show>
-        </div>
-      </Show >
-
-      {/* Active Alerts - show when alerts tab selected OR when patrol is disabled AND no legacy findings (no sub-tabs) */}
-      < Show when={overviewSubTab() === 'active-alerts' || (!patrolStatus()?.enabled && aiFindings().length === 0)
-      }>
-        <div>
-          <SectionHeader title="Active Alerts" size="md" class="mb-3" />
-          <Show when={showAIAlertsUpgrade()}>
-            <div class="mb-3 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3 text-sm text-amber-800 dark:text-amber-200">
-              <p class="font-medium">AI alert investigation requires Pulse Pro</p>
-              <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
-                Upgrade to unlock one-click AI analysis for active alerts.
-              </p>
-              <a
-                class="inline-flex items-center gap-1 mt-2 text-xs font-medium text-amber-800 dark:text-amber-200 hover:underline"
-                href={aiAlertsUpgradeURL()}
-                target="_blank"
-                rel="noreferrer"
-              >
-                View Pulse Pro plans
-              </a>
-            </div>
-          </Show>
-          <Show
-            when={Object.keys(props.activeAlerts).length > 0}
-            fallback={
-              <div class="text-center py-8 text-gray-500 dark:text-gray-400">
-                <div class="flex justify-center mb-3">
-                  <svg class="w-12 h-12 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4" />
-                  </svg>
-                </div>
-                <p class="text-sm">No active alerts</p>
-                <p class="text-xs mt-1">Alerts will appear here when thresholds are exceeded</p>
-              </div>
-            }
-          >
-            <Show when={alertStats().acknowledged > 0 || alertStats().active > 0}>
-              <div class="flex flex-wrap items-center justify-between gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-t-lg border border-gray-200 dark:border-gray-700">
-                <Show when={alertStats().acknowledged > 0}>
-                  <button
-                    onClick={() => props.setShowAcknowledged(!props.showAcknowledged())}
-                    class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
-                  >
-                    {props.showAcknowledged() ? 'Hide' : 'Show'} acknowledged
-                  </button>
-                </Show>
-                <Show when={alertStats().active > 0}>
-                  <button
-                    type="button"
-                    class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-lg border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/40 text-blue-700 dark:text-blue-200 transition-colors hover:bg-blue-100 dark:hover:bg-blue-900/60 disabled:opacity-60 disabled:cursor-not-allowed"
-                    disabled={bulkAckProcessing()}
-                    onClick={async () => {
-                      if (bulkAckProcessing()) return;
-                      const pending = unacknowledgedAlerts();
-                      if (pending.length === 0) {
-                        return;
-                      }
-                      setBulkAckProcessing(true);
-                      try {
-                        const result = await AlertsAPI.bulkAcknowledge(pending.map((alert) => alert.id));
-                        const successes = result.results.filter((r) => r.success);
-                        const failures = result.results.filter((r) => !r.success);
-
-                        successes.forEach((res) => {
-                          props.updateAlert(res.alertId, {
-                            acknowledged: true,
-                            ackTime: new Date().toISOString(),
-                          });
-                        });
-
-                        if (successes.length > 0) {
-                          notificationStore.success(
-                            `Acknowledged ${successes.length} ${successes.length === 1 ? 'alert' : 'alerts'}.`,
-                          );
-                        }
-
-                        if (failures.length > 0) {
-                          notificationStore.error(
-                            `Failed to acknowledge ${failures.length} ${failures.length === 1 ? 'alert' : 'alerts'}.`,
-                          );
-                        }
-                      } catch (error) {
-                        logger.error('Bulk acknowledge failed', error);
-                        notificationStore.error('Failed to acknowledge alerts');
-                      } finally {
-                        setBulkAckProcessing(false);
-                      }
+                        </div>
+                      );
                     }}
-                  >
-                    {bulkAckProcessing()
-                      ? 'Acknowledging…'
-                      : `Acknowledge all (${alertStats().active})`}
-                  </button>
+                  </For>
                 </Show>
               </div>
             </Show>
-            <div class="space-y-2">
-              <Show when={filteredAlerts().length === 0}>
-                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
-                  {props.showAcknowledged() ? 'No active alerts' : 'No unacknowledged alerts'}
-                </div>
-              </Show>
-              <For each={filteredAlerts()}>
-                {(alert) => (
-                  <div
-                    class={`border rounded-lg p-4 transition-all ${processingAlerts().has(alert.id) ? 'opacity-50' : ''
-                      } ${alert.acknowledged
-                        ? 'opacity-60 border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/20'
-                        : alert.level === 'critical'
-                          ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/20'
-                          : 'border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20'
-                      }`}
+
+            <Show when={!patrolRequiresLicense()}>
+              {/* Suppression Rules - What's being ignored */}
+              <div class="mt-6">
+                <div class="flex items-center justify-between">
+                  <button
+                    class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
+                    onClick={() => setShowSuppressionRules(!showSuppressionRules())}
                   >
-                    <div class="flex flex-col sm:flex-row sm:items-start">
-                      <div class="flex items-start flex-1">
-                        {/* Status icon */}
-                        <div
-                          class={`mr-3 mt-0.5 transition-all ${alert.acknowledged
-                            ? 'text-green-600 dark:text-green-400'
-                            : alert.level === 'critical'
-                              ? 'text-red-600 dark:text-red-400'
-                              : 'text-yellow-600 dark:text-yellow-400'
-                            }`}
-                        >
-                          {alert.acknowledged ? (
-                            // Checkmark for acknowledged
-                            <svg
-                              class="w-5 h-5"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                              />
-                            </svg>
-                          ) : (
-                            // Warning/Alert icon
-                            <svg
-                              class="w-5 h-5"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                              />
-                            </svg>
-                          )}
-                        </div>
-                        <div class="flex-1 min-w-0">
-                          <div class="flex flex-wrap items-center gap-2">
-                            <span
-                              class={`text-sm font-medium truncate ${alert.level === 'critical'
-                                ? 'text-red-700 dark:text-red-400'
-                                : 'text-yellow-700 dark:text-yellow-400'
-                                }`}
-                            >
-                              {alert.resourceName}
-                            </span>
-                            <span class="text-xs text-gray-600 dark:text-gray-400">
-                              ({alert.type})
-                            </span>
-                            <Show when={alert.node}>
-                              <span class="text-xs text-gray-500 dark:text-gray-500">
-                                on {alert.node}
-                              </span>
-                            </Show>
-                            <Show when={alert.acknowledged}>
-                              <span class="px-2 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded">
-                                Acknowledged
-                              </span>
-                            </Show>
-                          </div>
-                          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1 break-words">
-                            {alert.message}
-                          </p>
-                          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                            Started: {new Date(alert.startTime).toLocaleString()}
-                          </p>
-                        </div>
-                      </div>
-                      <div class="flex gap-2 mt-3 sm:mt-0 sm:ml-4 self-end sm:self-start">
-                        <button
-                          class={`px-3 py-1.5 text-xs font-medium border rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed ${alert.acknowledged
-                            ? 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'
-                            : 'bg-white dark:bg-gray-700 text-yellow-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900/20'
-                            }`}
-                          disabled={processingAlerts().has(alert.id)}
-                          onClick={async (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
+                    <svg
+                      class={`w-4 h-4 transition-transform ${showSuppressionRules() ? 'rotate-90' : ''}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                    🔇 Suppression Rules ({suppressionRules().length} active)
+                  </button>
+                  <button
+                    class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                    onClick={() => setShowAddRuleForm(!showAddRuleForm())}
+                  >
+                    + Add Rule
+                  </button>
+                </div>
 
-                            // Prevent double-clicks
-                            if (processingAlerts().has(alert.id)) return;
-
-                            setProcessingAlerts((prev) => new Set(prev).add(alert.id));
-
-                            // Store current state to avoid race conditions
-                            const wasAcknowledged = alert.acknowledged;
-
-                            try {
-                              if (wasAcknowledged) {
-                                // Call API first, only update local state if successful
-                                await AlertsAPI.unacknowledge(alert.id);
-                                // Only update local state after successful API call
-                                props.updateAlert(alert.id, {
-                                  acknowledged: false,
-                                  ackTime: undefined,
-                                  ackUser: undefined,
-                                });
-                                notificationStore.success('Alert restored');
-                              } else {
-                                // Call API first, only update local state if successful
-                                await AlertsAPI.acknowledge(alert.id);
-                                // Only update local state after successful API call
-                                props.updateAlert(alert.id, {
-                                  acknowledged: true,
-                                  ackTime: new Date().toISOString(),
-                                });
-                                notificationStore.success('Alert acknowledged');
-                              }
-                            } catch (err) {
-                              logger.error(
-                                `Failed to ${wasAcknowledged ? 'unacknowledge' : 'acknowledge'} alert:`,
-                                err,
-                              );
-                              notificationStore.error(
-                                `Failed to ${wasAcknowledged ? 'restore' : 'acknowledge'} alert`,
-                              );
-                              // Don't update local state on error - let WebSocket keep the correct state
-                            } finally {
-                              // Keep button disabled for longer to prevent race conditions with WebSocket updates
-                              setTimeout(() => {
-                                setProcessingAlerts((prev) => {
-                                  const next = new Set(prev);
-                                  next.delete(alert.id);
-                                  return next;
-                                });
-                              }, 1500); // 1.5 seconds to allow server to process and WebSocket to sync
-                            }
-                          }}
-                        >
-                          {processingAlerts().has(alert.id)
-                            ? 'Processing...'
-                            : alert.acknowledged
-                              ? 'Unacknowledge'
-                              : 'Acknowledge'}
-                        </button>
-                        <button
-                          class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
-                          onClick={() => {
-                            void toggleIncidentTimeline(alert.id, alert.startTime);
-                          }}
-                        >
-                          {expandedIncidents().has(alert.id) ? 'Hide Timeline' : 'Timeline'}
-                        </button>
-                        <InvestigateAlertButton
-                          alert={alert}
-                          variant="text"
-                          size="sm"
-                          licenseLocked={!hasAIAlertsFeature() && !licenseLoading()}
-                        />
-                      </div>
+                {/* Add rule form */}
+                <Show when={showAddRuleForm()}>
+                  <div class="mt-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+                    <p class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-3">
+                      Add a suppression rule to prevent alerts
+                    </p>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
+                      <input
+                        type="text"
+                        class="px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                        placeholder="Resource ID (or leave empty for any)"
+                        value={newRuleResource()}
+                        onInput={(e) => setNewRuleResource(e.currentTarget.value)}
+                      />
+                      <select
+                        class="px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                        value={newRuleCategory()}
+                        onChange={(e) => setNewRuleCategory(e.currentTarget.value)}
+                      >
+                        <option value="">Any category</option>
+                        <option value="performance">Performance</option>
+                        <option value="capacity">Capacity</option>
+                        <option value="reliability">Reliability</option>
+                        <option value="backup">Backup</option>
+                        <option value="security">Security</option>
+                        <option value="general">General</option>
+                      </select>
+                      <input
+                        type="text"
+                        class="px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                        placeholder="Reason (e.g., 'Dev container runs hot')"
+                        value={newRuleDescription()}
+                        onInput={(e) => setNewRuleDescription(e.currentTarget.value)}
+                      />
                     </div>
-                    <Show when={expandedIncidents().has(alert.id)}>
-                      <div class="mt-3 border-t border-gray-200 dark:border-gray-700 pt-3">
-                        <Show when={incidentLoading()[alert.id]}>
-                          <p class="text-xs text-gray-500 dark:text-gray-400">Loading timeline...</p>
-                        </Show>
-                        <Show when={!incidentLoading()[alert.id]}>
-                          <Show when={incidentTimelines()[alert.id]}>
-                            {(timeline) => (
-                              <div class="space-y-3">
-                                <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-                                  <span class="font-medium text-gray-700 dark:text-gray-200">Incident</span>
-                                  <span>{timeline().status}</span>
-                                  <Show when={timeline().acknowledged}>
-                                    <span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
-                                      acknowledged
-                                    </span>
-                                  </Show>
-                                  <Show when={timeline().openedAt}>
-                                    <span>opened {new Date(timeline().openedAt).toLocaleString()}</span>
-                                  </Show>
-                                  <Show when={timeline().closedAt}>
-                                    <span>closed {new Date(timeline().closedAt as string).toLocaleString()}</span>
-                                  </Show>
-                                </div>
-                                {(() => {
-                                  const events = timeline().events || [];
-                                  const filteredEvents = filterIncidentEvents(events, incidentEventFilters());
-                                  return (
-                                    <>
-                                      <Show when={events.length > 0}>
-                                        <IncidentEventFilters
-                                          filters={incidentEventFilters}
-                                          setFilters={setIncidentEventFilters}
-                                        />
-                                      </Show>
-                                      <Show when={filteredEvents.length > 0}>
-                                        <div class="space-y-2">
-                                          <For each={filteredEvents}>
-                                            {(event) => (
-                                              <div class="rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/30 p-2">
-                                                <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-                                                  <span class="font-medium text-gray-800 dark:text-gray-200">
-                                                    {event.summary}
-                                                  </span>
-                                                  <span>{new Date(event.timestamp).toLocaleString()}</span>
-                                                </div>
-                                                <Show when={event.details && (event.details as { note?: string }).note}>
-                                                  <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
-                                                    {(event.details as { note?: string }).note}
-                                                  </p>
-                                                </Show>
-                                                <Show when={event.details && (event.details as { command?: string }).command}>
-                                                  <p class="text-xs text-gray-700 dark:text-gray-300 mt-1 font-mono">
-                                                    {(event.details as { command?: string }).command}
-                                                  </p>
-                                                </Show>
-                                                <Show when={event.details && (event.details as { output_excerpt?: string }).output_excerpt}>
-                                                  <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                                                    {(event.details as { output_excerpt?: string }).output_excerpt}
-                                                  </p>
-                                                </Show>
+                    <div class="flex gap-2">
+                      <button
+                        class="px-3 py-1.5 text-sm font-medium rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50"
+                        disabled={!newRuleDescription()}
+                        onClick={async () => {
+                          try {
+                            await addSuppressionRule(
+                              newRuleResource(),
+                              newRuleResource() || 'Any resource',
+                              (newRuleCategory() as 'performance' | 'capacity' | 'reliability' | 'backup' | 'security' | 'general' | ''),
+                              newRuleDescription()
+                            );
+                            notificationStore.success('Suppression rule created');
+                            setShowAddRuleForm(false);
+                            setNewRuleResource('');
+                            setNewRuleCategory('');
+                            setNewRuleDescription('');
+                            fetchAiData();
+                          } catch (_err) {
+                            notificationStore.error('Failed to create rule');
+                          }
+                        }}
+                      >
+                        Create Rule
+                      </button>
+                      <button
+                        class="px-3 py-1.5 text-sm font-medium rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                        onClick={() => setShowAddRuleForm(false)}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                </Show>
+
+                {/* Rules list */}
+                <Show when={showSuppressionRules()}>
+                  <div class="mt-3 space-y-2">
+                    <Show when={suppressionRules().length === 0}>
+                      <p class="text-sm text-gray-500 dark:text-gray-500 italic">
+                        No suppression rules. Dismiss findings or add rules to prevent unwanted alerts.
+                      </p>
+                    </Show>
+                    <For each={suppressionRules()}>
+                      {(rule) => (
+                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
+                          <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2 text-sm">
+                              <span class="font-medium text-gray-800 dark:text-gray-200">
+                                {rule.resource_name || rule.resource_id || 'Any resource'}
+                              </span>
+                              <Show when={rule.category}>
+                                <span class="px-2 py-0.5 text-xs rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                                  {categoryLabels[rule.category!] || rule.category}
+                                </span>
+                              </Show>
+                              <Show when={!rule.category}>
+                                <span class="px-2 py-0.5 text-xs rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                                  Any category
+                                </span>
+                              </Show>
+                              <span class="px-1.5 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
+                                {rule.created_from === 'finding' ? 'From Finding' : 'Manual'}
+                              </span>
+                            </div>
+                            <p class="text-xs text-gray-500 dark:text-gray-500 mt-1 truncate">
+                              {rule.description || 'No description'}
+                            </p>
+                          </div>
+                          <button
+                            class="ml-3 px-2 py-1 text-xs text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors"
+                            onClick={async () => {
+                              try {
+                                await deleteSuppressionRule(rule.id);
+                                notificationStore.success('Rule deleted');
+                                fetchAiData();
+                              } catch (_err) {
+                                notificationStore.error('Failed to delete rule');
+                              }
+                            }}
+                            title="Delete this rule"
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      )}
+                    </For>
+                  </div>
+                </Show>
+              </div>
+            </Show>
+
+            <Show when={!patrolRequiresLicense()}>
+              {/* Patrol Check History */}
+              <div class="mt-6">
+                <div class="flex items-center justify-between">
+                  <button
+                    class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
+                    onClick={() => setShowRunHistory(!showRunHistory())}
+                  >
+                    <svg
+                      class={`w-4 h-4 transition-transform ${showRunHistory() ? 'rotate-90' : ''}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                    Patrol Check History ({filteredPatrolHistory().length} runs)
+                    <Show when={patrolRunHistory().length > 0 && patrolRunHistory()[0].status !== 'healthy'}>
+                      <span class="ml-1 px-1.5 py-0.5 text-[10px] bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 rounded">Issues Found</span>
+                    </Show>
+                  </button>
+
+                  {/* Next Patrol Timer */}
+                  <Show when={nextPatrolIn()}>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">
+                      Next patrol in <span class="font-mono font-medium text-purple-600 dark:text-purple-400">{nextPatrolIn()}</span>
+                    </span>
+                  </Show>
+                </div>
+
+                <Show when={showRunHistory()}>
+                  <div class="mt-3">
+                    {/* Time Filter + Mini Health Chart */}
+                    <div class="flex flex-wrap items-center gap-3 mb-3">
+                      <div class="flex gap-1">
+                        <button
+                          class={`px-2 py-1 text-xs rounded transition-colors ${historyTimeFilter() === '24h' ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
+                          onClick={() => setHistoryTimeFilter('24h')}
+                        >
+                          24h
+                        </button>
+                        <button
+                          class={`px-2 py-1 text-xs rounded transition-colors ${historyTimeFilter() === '7d' ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
+                          onClick={() => setHistoryTimeFilter('7d')}
+                        >
+                          7d
+                        </button>
+                        <button
+                          class={`px-2 py-1 text-xs rounded transition-colors ${historyTimeFilter() === 'all' ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
+                          onClick={() => setHistoryTimeFilter('all')}
+                        >
+                          All
+                        </button>
+                      </div>
+
+                      {/* Mini Health Chart */}
+                      <Show when={filteredPatrolHistory().length > 0}>
+                        <div class="flex items-center gap-0.5 h-4">
+                          <For each={filteredPatrolHistory().slice(0, 20).reverse()}>
+                            {(run) => (
+                              <div
+                                class={`w-1.5 h-full rounded-sm transition-all hover:opacity-75 ${run.status === 'healthy' ? 'bg-green-400 dark:bg-green-500' :
+                                  run.status === 'critical' || run.status === 'error' ? 'bg-red-400 dark:bg-red-500' :
+                                    'bg-yellow-400 dark:bg-yellow-500'
+                                  }`}
+                                title={`${formatTimestamp(run.completed_at)}: ${run.findings_summary}`}
+                              />
+                            )}
+                          </For>
+                          <span class="ml-1.5 text-[10px] text-gray-400">← newest</span>
+                        </div>
+                      </Show>
+                    </div>
+
+                    <Show
+                      when={filteredPatrolHistory().length > 0}
+                      fallback={
+                        <p class="text-sm text-gray-500 dark:text-gray-400 italic py-4">No patrol runs in selected time range.</p>
+                      }
+                    >
+                      <div class="border border-gray-200 dark:border-gray-700 rounded overflow-x-auto">
+                        <table class="w-full min-w-[380px] sm:min-w-[600px] text-[11px] sm:text-sm">
+                          <thead>
+                            <tr class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
+                              <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-4"></th>
+                              <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-24 sm:w-32">When</th>
+                              <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">Result</th>
+                              <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider w-16 sm:w-20">Resources</th>
+                              <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider w-16 sm:w-20">Duration</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {/* Show "Currently Running" row when patrol is in progress */}
+                            <Show when={patrolStatus()?.running}>
+                              <tr
+                                class="border-b border-gray-200 dark:border-gray-600 bg-purple-50 dark:bg-purple-900/20 cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/30"
+                                onClick={() => setExpandedLiveStream(!expandedLiveStream())}
+                              >
+                                <td class="p-1.5 px-2 text-purple-500">
+                                  <svg class={`w-3 h-3 transition-transform ${expandedLiveStream() ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                                  </svg>
+                                </td>
+                                <td class="p-1.5 px-2 text-purple-600 dark:text-purple-400 font-mono whitespace-nowrap">
+                                  <div class="flex items-center gap-1.5">
+                                    <svg class="w-3 h-3 animate-spin" viewBox="0 0 24 24" fill="none">
+                                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                                    </svg>
+                                    Now
+                                  </div>
+                                </td>
+                                <td class="p-1.5 px-2 text-center">
+                                  <span class="text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">
+                                    Running
+                                  </span>
+                                </td>
+                                <td class="p-1.5 px-2 text-center" colspan="3">
+                                  <span class="text-xs text-purple-600 dark:text-purple-400">
+                                    {expandedLiveStream() ? 'Click to collapse' : 'Click to view live AI analysis'}
+                                  </span>
+                                </td>
+                              </tr>
+                              {/* Expanded Live Stream Row */}
+                              <Show when={expandedLiveStream()}>
+                                <tr class="bg-purple-50 dark:bg-purple-900/10 border-b border-gray-200 dark:border-gray-600">
+                                  <td colspan="5" class="p-3">
+                                    <div class="flex items-center justify-between mb-3">
+                                      <span class="text-[10px] text-purple-500 dark:text-purple-400 uppercase tracking-wider flex items-center gap-1.5">
+                                        <svg class="w-3 h-3 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                                        </svg>
+                                        Live AI Analysis
+                                      </span>
+                                      <span class="text-[9px] text-purple-400 dark:text-purple-500">
+                                        Streaming in real-time...
+                                      </span>
+                                    </div>
+                                    {/* Sequential blocks display - like AI chat */}
+                                    <div class="space-y-2 max-h-80 overflow-y-auto">
+                                      {/* Rendered blocks */}
+                                      <For each={liveStreamBlocks()}>
+                                        {(block) => (
+                                          <Show
+                                            when={block.type === 'phase'}
+                                            fallback={
+                                              /* Thinking block */
+                                              <div class="px-3 py-2 text-xs bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 rounded-lg border-l-2 border-blue-400 whitespace-pre-wrap font-mono leading-relaxed">
+                                                {block.text.length > 800 ? block.text.substring(0, 800) + '...' : block.text}
                                               </div>
-                                            )}
-                                          </For>
+                                            }
+                                          >
+                                            {/* Phase marker */}
+                                            <div class="flex items-center gap-2 px-2 py-1">
+                                              <Show
+                                                when={block.text === 'Analysis complete'}
+                                                fallback={
+                                                  <svg class="w-3 h-3 animate-spin text-purple-500" viewBox="0 0 24 24" fill="none">
+                                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                                                  </svg>
+                                                }
+                                              >
+                                                <svg class="w-3 h-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                                </svg>
+                                              </Show>
+                                              <span class="text-[10px] font-medium text-purple-600 dark:text-purple-400">
+                                                {block.text}
+                                              </span>
+                                            </div>
+                                          </Show>
+                                        )}
+                                      </For>
+                                      {/* Currently streaming content */}
+                                      <Show when={currentThinking()}>
+                                        <div class="px-3 py-2 text-xs bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 rounded-lg border-l-2 border-blue-400 whitespace-pre-wrap font-mono leading-relaxed">
+                                          {currentThinking().length > 500 ? currentThinking().substring(0, 500) + '...' : currentThinking()}
+                                          <span class="inline-block w-1.5 h-3 bg-blue-500 ml-0.5 animate-pulse" />
                                         </div>
                                       </Show>
-                                      <Show when={events.length > 0 && filteredEvents.length === 0}>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400">
-                                          No timeline events match the selected filters.
-                                        </p>
+                                      {/* Empty state */}
+                                      <Show when={liveStreamBlocks().length === 0 && !currentThinking()}>
+                                        <div class="flex items-center gap-2 px-2 py-3 text-xs text-gray-500 dark:text-gray-400">
+                                          <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                                          </svg>
+                                          <span class="italic">Waiting for AI response...</span>
+                                        </div>
                                       </Show>
-                                      <Show when={events.length === 0}>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400">No timeline events yet.</p>
-                                      </Show>
-                                    </>
-                                  );
-                                })()}
-                                <div class="flex flex-col gap-2">
-                                  <textarea
-                                    class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 p-2 text-xs text-gray-800 dark:text-gray-200"
-                                    rows={2}
-                                    placeholder="Add a note for this incident..."
-                                    value={incidentNoteDrafts()[alert.id] || ''}
-                                    onInput={(e) => {
-                                      const value = e.currentTarget.value;
-                                      setIncidentNoteDrafts((prev) => ({ ...prev, [alert.id]: value }));
-                                    }}
-                                  />
-                                  <div class="flex justify-end">
-                                    <button
-                                      class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                                      disabled={incidentNoteSaving().has(alert.id) || !(incidentNoteDrafts()[alert.id] || '').trim()}
-                                      onClick={() => {
-                                        void saveIncidentNote(alert.id, alert.startTime);
-                                      }}
+                                    </div>
+                                  </td>
+                                </tr>
+                              </Show>
+                            </Show>
+                            <For each={filteredPatrolHistory()}>
+                              {(run) => {
+                                const statusStyles = {
+                                  healthy: 'bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300',
+                                  issues_found: 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300',
+                                  critical: 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300',
+                                  error: 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300',
+                                };
+                                const statusStyle = statusStyles[run.status] || statusStyles.healthy;
+                                const hasDetails = run.finding_ids && run.finding_ids.length > 0;
+
+                                return (
+                                  <>
+                                    <tr
+                                      class={`border-b border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 ${hasDetails ? 'cursor-pointer' : ''}`}
+                                      onClick={() => hasDetails && setExpandedRunId(expandedRunId() === run.id ? null : run.id)}
                                     >
-                                      {incidentNoteSaving().has(alert.id) ? 'Saving...' : 'Save Note'}
-                                    </button>
-                                  </div>
-                                </div>
-                              </div>
-                            )}
-                          </Show>
-                          <Show when={!incidentTimelines()[alert.id]}>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">No incident timeline available.</p>
-                          </Show>
-                        </Show>
+                                      <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-gray-400">
+                                        <Show when={hasDetails}>
+                                          <svg class={`w-3 h-3 transition-transform ${expandedRunId() === run.id ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                                          </svg>
+                                        </Show>
+                                      </td>
+                                      <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-gray-600 dark:text-gray-400 font-mono whitespace-nowrap">
+                                        {formatTimestamp(run.completed_at)}
+                                      </td>
+                                      <td class="p-1 sm:p-1.5 px-1 sm:px-2">
+                                        <span class={`text-[10px] px-1.5 py-0.5 rounded font-medium ${statusStyle}`}>
+                                          {run.findings_summary}
+                                        </span>
+                                      </td>
+                                      <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-gray-700 dark:text-gray-300">
+                                        {run.resources_checked}
+                                      </td>
+                                      <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-gray-500 dark:text-gray-400 font-mono">
+                                        {(() => {
+                                          const totalSeconds = Math.round(run.duration_ms / 1000000000);
+                                          if (totalSeconds < 60) {
+                                            return `${totalSeconds}s`;
+                                          }
+                                          const minutes = Math.floor(totalSeconds / 60);
+                                          const seconds = totalSeconds % 60;
+                                          return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+                                        })()}
+                                      </td>
+                                    </tr>
+                                    {/* Expanded Details Row */}
+                                    <Show when={expandedRunId() === run.id}>
+                                      <tr class="bg-gray-50 dark:bg-gray-800/50">
+                                        <td colspan="5" class="p-4">
+                                          {(() => {
+                                            const findingsMap = allFindingsMap();
+
+                                            // Categorize ALL findings from this run (not just warning+)
+                                            const criticalFindings: Finding[] = [];
+                                            const warningFindings: Finding[] = [];
+                                            const infoFindings: Finding[] = [];
+                                            const resolvedFindings: Finding[] = [];
+
+                                            (run.finding_ids || []).forEach(id => {
+                                              const finding = findingsMap.get(id);
+                                              if (finding) {
+                                                if (finding.resolved_at) {
+                                                  resolvedFindings.push(finding);
+                                                } else {
+                                                  switch (finding.severity) {
+                                                    case 'critical':
+                                                      criticalFindings.push(finding);
+                                                      break;
+                                                    case 'warning':
+                                                      warningFindings.push(finding);
+                                                      break;
+                                                    default:
+                                                      infoFindings.push(finding);
+                                                  }
+                                                }
+                                              }
+                                            });
+
+                                            const hasActionableFindings = criticalFindings.length > 0 || warningFindings.length > 0;
+                                            const hasAnyFindings = hasActionableFindings || infoFindings.length > 0 || resolvedFindings.length > 0;
+
+                                            return (
+                                              <div class="space-y-2.5">
+                                                {/* Resource Breakdown & Stats Row */}
+                                                <div class="flex flex-wrap gap-2 text-xs text-gray-600 dark:text-gray-400">
+                                                  <div class="flex items-center gap-1.5">
+                                                    <svg class="w-3.5 h-3.5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+                                                    </svg>
+                                                    <span class="font-medium">{run.nodes_checked || 0}</span> nodes
+                                                  </div>
+                                                  <Show when={run.guests_checked > 0}>
+                                                    <div class="flex items-center gap-1.5">
+                                                      <svg class="w-3.5 h-3.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                                                      </svg>
+                                                      <span class="font-medium">{run.guests_checked}</span> VMs/CTs
+                                                    </div>
+                                                  </Show>
+                                                  <Show when={run.docker_checked > 0}>
+                                                    <div class="flex items-center gap-1.5">
+                                                      <svg class="w-3.5 h-3.5 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                                                      </svg>
+                                                      <span class="font-medium">{run.docker_checked}</span> Docker
+                                                    </div>
+                                                  </Show>
+                                                  <Show when={run.storage_checked > 0}>
+                                                    <div class="flex items-center gap-1.5">
+                                                      <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+                                                      </svg>
+                                                      <span class="font-medium">{run.storage_checked}</span> storage
+                                                    </div>
+                                                  </Show>
+                                                  <Show when={run.hosts_checked > 0}>
+                                                    <div class="flex items-center gap-1.5">
+                                                      <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                                      </svg>
+                                                      <span class="font-medium">{run.hosts_checked}</span> hosts
+                                                    </div>
+                                                  </Show>
+                                                  {/* Token usage for transparency */}
+                                                  <Show when={run.output_tokens}>
+                                                    <div class="flex items-center gap-1.5 ml-auto text-gray-400 dark:text-gray-500">
+                                                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                                      </svg>
+                                                      <span>{((run.input_tokens || 0) / 1000).toFixed(0)}k in / {((run.output_tokens || 0) / 1000).toFixed(1)}k out tokens</span>
+                                                    </div>
+                                                  </Show>
+                                                </div>
+
+                                                {/* Critical & Warning Findings - Always show prominently */}
+                                                <Show when={criticalFindings.length > 0 || warningFindings.length > 0}>
+                                                  <div class="space-y-1.5">
+                                                    <span class="text-[9px] sm:text-[10px] text-gray-500 dark:text-gray-500 uppercase tracking-wider font-bold">
+                                                      Findings Requiring Attention
+                                                    </span>
+                                                    <div class="space-y-1">
+                                                      <For each={[...criticalFindings, ...warningFindings]}>
+                                                        {(finding) => (
+                                                          <div class="flex items-start gap-2 text-xs p-1.5 sm:p-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                                                            <span class={`flex-shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium ${finding.severity === 'critical'
+                                                              ? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300'
+                                                              : 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300'
+                                                              }`}>
+                                                              {finding.severity}
+                                                            </span>
+                                                            <div class="flex-1 min-w-0">
+                                                              <div class="font-medium text-gray-800 dark:text-gray-200">{finding.title}</div>
+                                                              <div class="text-gray-500 dark:text-gray-400 mt-0.5">
+                                                                {finding.resource_name}
+                                                                <Show when={finding.description}>
+                                                                  <span class="mx-1">·</span>
+                                                                  <span class="text-gray-400 dark:text-gray-500">{finding.description.substring(0, 200)}{finding.description.length > 200 ? '...' : ''}</span>
+                                                                </Show>
+                                                              </div>
+                                                            </div>
+                                                          </div>
+                                                        )}
+                                                      </For>
+                                                    </div>
+                                                  </div>
+                                                </Show>
+
+                                                {/* Info/Watch Findings - Show with lower emphasis */}
+                                                <Show when={infoFindings.length > 0}>
+                                                  <div class="space-y-2">
+                                                    <span class="text-[10px] text-blue-600 dark:text-blue-400 uppercase tracking-wider font-medium flex items-center gap-1">
+                                                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                                      </svg>
+                                                      Observations ({infoFindings.length})
+                                                    </span>
+                                                    <div class="space-y-1">
+                                                      <For each={infoFindings}>
+                                                        {(finding) => (
+                                                          <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 py-1">
+                                                            <span class="px-1.5 py-0.5 rounded text-[10px] bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
+                                                              {finding.severity}
+                                                            </span>
+                                                            <span>{finding.title}</span>
+                                                            <span class="text-gray-400 dark:text-gray-500">on {finding.resource_name}</span>
+                                                          </div>
+                                                        )}
+                                                      </For>
+                                                    </div>
+                                                  </div>
+                                                </Show>
+
+                                                {/* Resolved findings */}
+                                                <Show when={resolvedFindings.length > 0}>
+                                                  <div class="space-y-2">
+                                                    <span class="text-[10px] text-green-600 dark:text-green-400 uppercase tracking-wider font-medium flex items-center gap-1">
+                                                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                                      </svg>
+                                                      Resolved Since Last Patrol ({resolvedFindings.length})
+                                                    </span>
+                                                    <div class="space-y-1">
+                                                      <For each={resolvedFindings}>
+                                                        {(finding) => (
+                                                          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-500 py-1">
+                                                            <span class="px-1.5 py-0.5 rounded text-[10px] bg-green-100 dark:bg-green-900/40 text-green-600 dark:text-green-400">
+                                                              ✓ fixed
+                                                            </span>
+                                                            <span class="line-through opacity-70">{finding.title}</span>
+                                                            <span class="opacity-50">on {finding.resource_name}</span>
+                                                          </div>
+                                                        )}
+                                                      </For>
+                                                    </div>
+                                                  </div>
+                                                </Show>
+
+                                                {/* No findings case - show AI summary */}
+                                                <Show when={!hasAnyFindings}>
+                                                  <div class="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
+                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                                    </svg>
+                                                    <span class="font-medium">All clear!</span>
+                                                    <span class="text-gray-500 dark:text-gray-400">No issues detected in this patrol run.</span>
+                                                  </div>
+                                                </Show>
+
+                                                {/* AI Analysis Summary - Collapsible for long content */}
+                                                <Show when={run.ai_analysis}>
+                                                  {(() => {
+                                                    const [showFullAnalysis, setShowFullAnalysis] = createSignal(false);
+                                                    const analysis = run.ai_analysis || '';
+                                                    // Extract summary (first paragraph or first 300 chars)
+                                                    const summaryMatch = analysis.match(/^([^]*?)(?:\n\n|\[FINDING\]|$)/);
+                                                    const summary = summaryMatch ? summaryMatch[1].trim() : analysis.substring(0, 300);
+                                                    const hasMore = analysis.length > summary.length + 50;
+
+                                                    return (
+                                                      <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
+                                                        <div class="flex items-center justify-between mb-2">
+                                                          <span class="text-[10px] text-purple-600 dark:text-purple-400 uppercase tracking-wider font-medium flex items-center gap-1">
+                                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                                                            </svg>
+                                                            AI Analysis
+                                                          </span>
+                                                          <Show when={hasMore}>
+                                                            <button
+                                                              class="text-[10px] text-purple-600 dark:text-purple-400 hover:underline"
+                                                              onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                setShowFullAnalysis(!showFullAnalysis());
+                                                              }}
+                                                            >
+                                                              {showFullAnalysis() ? 'Show less' : 'Show full analysis'}
+                                                            </button>
+                                                          </Show>
+                                                        </div>
+                                                        <div class={`text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap ${showFullAnalysis() ? 'max-h-96 overflow-y-auto' : ''}`}>
+                                                          {showFullAnalysis() ? analysis.replace(/\[FINDING\][\s\S]*?\[\/FINDING\]/g, '').trim() : summary}
+                                                          <Show when={hasMore && !showFullAnalysis()}>
+                                                            <span class="text-gray-400">...</span>
+                                                          </Show>
+                                                        </div>
+                                                      </div>
+                                                    );
+                                                  })()}
+                                                </Show>
+                                              </div>
+                                            );
+                                          })()}
+                                        </td>
+                                      </tr>
+                                    </Show>
+                                  </>
+                                );
+                              }}
+                            </For>
+                          </tbody>
+                        </table>
                       </div>
                     </Show>
                   </div>
-                )}
-              </For>
-            </div>
-          </Show>
-        </div>
-      </Show >
+                </Show>
+              </div>
+            </Show>
+          </div>
+        </Show >
+
+        {/* Active Alerts - show when alerts tab selected OR when patrol is disabled AND no legacy findings (no sub-tabs) */}
+        < Show when={overviewSubTab() === 'active-alerts' || (!patrolStatus()?.enabled && aiFindings().length === 0)
+        }>
+          <div>
+            <SectionHeader title="Active Alerts" size="md" class="mb-3" />
+            <Show when={showAIAlertsUpgrade()}>
+              <div class="mb-3 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3 text-sm text-amber-800 dark:text-amber-200">
+                <p class="font-medium">AI alert investigation requires Pulse Pro</p>
+                <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
+                  Upgrade to unlock one-click AI analysis for active alerts.
+                </p>
+                <a
+                  class="inline-flex items-center gap-1 mt-2 text-xs font-medium text-amber-800 dark:text-amber-200 hover:underline"
+                  href={aiAlertsUpgradeURL()}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  View Pulse Pro plans
+                </a>
+              </div>
+            </Show>
+            <Show
+              when={Object.keys(props.activeAlerts).length > 0}
+              fallback={
+                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                  <div class="flex justify-center mb-3">
+                    <svg class="w-12 h-12 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4" />
+                    </svg>
+                  </div>
+                  <p class="text-sm">No active alerts</p>
+                  <p class="text-xs mt-1">Alerts will appear here when thresholds are exceeded</p>
+                </div>
+              }
+            >
+              <Show when={alertStats().acknowledged > 0 || alertStats().active > 0}>
+                <div class="flex flex-wrap items-center justify-between gap-1.5 p-1.5 bg-gray-50 dark:bg-gray-800 rounded-t-lg border border-gray-200 dark:border-gray-700">
+                  <Show when={alertStats().acknowledged > 0}>
+                    <button
+                      onClick={() => props.setShowAcknowledged(!props.showAcknowledged())}
+                      class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+                    >
+                      {props.showAcknowledged() ? 'Hide' : 'Show'} acknowledged
+                    </button>
+                  </Show>
+                  <Show when={alertStats().active > 0}>
+                    <button
+                      type="button"
+                      class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-lg border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/40 text-blue-700 dark:text-blue-200 transition-colors hover:bg-blue-100 dark:hover:bg-blue-900/60 disabled:opacity-60 disabled:cursor-not-allowed"
+                      disabled={bulkAckProcessing()}
+                      onClick={async () => {
+                        if (bulkAckProcessing()) return;
+                        const pending = unacknowledgedAlerts();
+                        if (pending.length === 0) {
+                          return;
+                        }
+                        setBulkAckProcessing(true);
+                        try {
+                          const result = await AlertsAPI.bulkAcknowledge(pending.map((alert) => alert.id));
+                          const successes = result.results.filter((r) => r.success);
+                          const failures = result.results.filter((r) => !r.success);
+
+                          successes.forEach((res) => {
+                            props.updateAlert(res.alertId, {
+                              acknowledged: true,
+                              ackTime: new Date().toISOString(),
+                            });
+                          });
+
+                          if (successes.length > 0) {
+                            notificationStore.success(
+                              `Acknowledged ${successes.length} ${successes.length === 1 ? 'alert' : 'alerts'}.`,
+                            );
+                          }
+
+                          if (failures.length > 0) {
+                            notificationStore.error(
+                              `Failed to acknowledge ${failures.length} ${failures.length === 1 ? 'alert' : 'alerts'}.`,
+                            );
+                          }
+                        } catch (error) {
+                          logger.error('Bulk acknowledge failed', error);
+                          notificationStore.error('Failed to acknowledge alerts');
+                        } finally {
+                          setBulkAckProcessing(false);
+                        }
+                      }}
+                    >
+                      {bulkAckProcessing()
+                        ? 'Acknowledging…'
+                        : `Acknowledge all (${alertStats().active})`}
+                    </button>
+                  </Show>
+                </div>
+              </Show>
+              <div class="space-y-2">
+                <Show when={filteredAlerts().length === 0}>
+                  <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                    {props.showAcknowledged() ? 'No active alerts' : 'No unacknowledged alerts'}
+                  </div>
+                </Show>
+                <For each={filteredAlerts()}>
+                  {(alert) => (
+                    <div
+                      class={`border rounded-lg p-3 sm:p-4 transition-all ${processingAlerts().has(alert.id) ? 'opacity-50' : ''
+                        } ${alert.acknowledged
+                          ? 'opacity-60 border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/20'
+                          : alert.level === 'critical'
+                            ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/20'
+                            : 'border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20'
+                        }`}
+                    >
+                      <div class="flex flex-col sm:flex-row sm:items-start">
+                        <div class="flex items-start flex-1">
+                          {/* Status icon */}
+                          <div
+                            class={`mr-3 mt-0.5 transition-all ${alert.acknowledged
+                              ? 'text-green-600 dark:text-green-400'
+                              : alert.level === 'critical'
+                                ? 'text-red-600 dark:text-red-400'
+                                : 'text-yellow-600 dark:text-yellow-400'
+                              }`}
+                          >
+                            {alert.acknowledged ? (
+                              // Checkmark for acknowledged
+                              <svg
+                                class="w-5 h-5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                              </svg>
+                            ) : (
+                              // Warning/Alert icon
+                              <svg
+                                class="w-5 h-5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                                />
+                              </svg>
+                            )}
+                          </div>
+                          <div class="flex-1 min-w-0">
+                            <div class="flex flex-wrap items-center gap-2">
+                              <span
+                                class={`text-sm font-medium truncate ${alert.level === 'critical'
+                                  ? 'text-red-700 dark:text-red-400'
+                                  : 'text-yellow-700 dark:text-yellow-400'
+                                  }`}
+                              >
+                                {alert.resourceName}
+                              </span>
+                              <span class="text-xs text-gray-600 dark:text-gray-400">
+                                ({alert.type})
+                              </span>
+                              <Show when={alert.node}>
+                                <span class="text-xs text-gray-500 dark:text-gray-500">
+                                  on {alert.node}
+                                </span>
+                              </Show>
+                              <Show when={alert.acknowledged}>
+                                <span class="px-2 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded">
+                                  Acknowledged
+                                </span>
+                              </Show>
+                            </div>
+                            <p class="text-sm text-gray-700 dark:text-gray-300 mt-1 break-words">
+                              {alert.message}
+                            </p>
+                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                              Started: {new Date(alert.startTime).toLocaleString()}
+                            </p>
+                          </div>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-3 sm:mt-0 sm:ml-4 self-end sm:self-start justify-end">
+                          <button
+                            class={`px-3 py-1.5 text-xs font-medium border rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed ${alert.acknowledged
+                              ? 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'
+                              : 'bg-white dark:bg-gray-700 text-yellow-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900/20'
+                              }`}
+                            disabled={processingAlerts().has(alert.id)}
+                            onClick={async (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+
+                              // Prevent double-clicks
+                              if (processingAlerts().has(alert.id)) return;
+
+                              setProcessingAlerts((prev) => new Set(prev).add(alert.id));
+
+                              // Store current state to avoid race conditions
+                              const wasAcknowledged = alert.acknowledged;
+
+                              try {
+                                if (wasAcknowledged) {
+                                  // Call API first, only update local state if successful
+                                  await AlertsAPI.unacknowledge(alert.id);
+                                  // Only update local state after successful API call
+                                  props.updateAlert(alert.id, {
+                                    acknowledged: false,
+                                    ackTime: undefined,
+                                    ackUser: undefined,
+                                  });
+                                  notificationStore.success('Alert restored');
+                                } else {
+                                  // Call API first, only update local state if successful
+                                  await AlertsAPI.acknowledge(alert.id);
+                                  // Only update local state after successful API call
+                                  props.updateAlert(alert.id, {
+                                    acknowledged: true,
+                                    ackTime: new Date().toISOString(),
+                                  });
+                                  notificationStore.success('Alert acknowledged');
+                                }
+                              } catch (err) {
+                                logger.error(
+                                  `Failed to ${wasAcknowledged ? 'unacknowledge' : 'acknowledge'} alert:`,
+                                  err,
+                                );
+                                notificationStore.error(
+                                  `Failed to ${wasAcknowledged ? 'restore' : 'acknowledge'} alert`,
+                                );
+                                // Don't update local state on error - let WebSocket keep the correct state
+                              } finally {
+                                // Keep button disabled for longer to prevent race conditions with WebSocket updates
+                                setTimeout(() => {
+                                  setProcessingAlerts((prev) => {
+                                    const next = new Set(prev);
+                                    next.delete(alert.id);
+                                    return next;
+                                  });
+                                }, 1500); // 1.5 seconds to allow server to process and WebSocket to sync
+                              }
+                            }}
+                          >
+                            {processingAlerts().has(alert.id)
+                              ? 'Processing...'
+                              : alert.acknowledged
+                                ? 'Unacknowledge'
+                                : 'Acknowledge'}
+                          </button>
+                          <button
+                            class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+                            onClick={() => {
+                              void toggleIncidentTimeline(alert.id, alert.startTime);
+                            }}
+                          >
+                            {expandedIncidents().has(alert.id) ? 'Hide Timeline' : 'Timeline'}
+                          </button>
+                          <InvestigateAlertButton
+                            alert={alert}
+                            variant="text"
+                            size="sm"
+                            licenseLocked={!hasAIAlertsFeature() && !licenseLoading()}
+                          />
+                        </div>
+                      </div>
+                      <Show when={expandedIncidents().has(alert.id)}>
+                        <div class="mt-3 border-t border-gray-200 dark:border-gray-700 pt-3">
+                          <Show when={incidentLoading()[alert.id]}>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">Loading timeline...</p>
+                          </Show>
+                          <Show when={!incidentLoading()[alert.id]}>
+                            <Show when={incidentTimelines()[alert.id]}>
+                              {(timeline) => (
+                                <div class="space-y-3">
+                                  <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+                                    <span class="font-medium text-gray-700 dark:text-gray-200">Incident</span>
+                                    <span>{timeline().status}</span>
+                                    <Show when={timeline().acknowledged}>
+                                      <span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
+                                        acknowledged
+                                      </span>
+                                    </Show>
+                                    <Show when={timeline().openedAt}>
+                                      <span>opened {new Date(timeline().openedAt).toLocaleString()}</span>
+                                    </Show>
+                                    <Show when={timeline().closedAt}>
+                                      <span>closed {new Date(timeline().closedAt as string).toLocaleString()}</span>
+                                    </Show>
+                                  </div>
+                                  {(() => {
+                                    const events = timeline().events || [];
+                                    const filteredEvents = filterIncidentEvents(events, incidentEventFilters());
+                                    return (
+                                      <>
+                                        <Show when={events.length > 0}>
+                                          <IncidentEventFilters
+                                            filters={incidentEventFilters}
+                                            setFilters={setIncidentEventFilters}
+                                          />
+                                        </Show>
+                                        <Show when={filteredEvents.length > 0}>
+                                          <div class="space-y-2">
+                                            <For each={filteredEvents}>
+                                              {(event) => (
+                                                <div class="rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/30 p-2">
+                                                  <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+                                                    <span class="font-medium text-gray-800 dark:text-gray-200">
+                                                      {event.summary}
+                                                    </span>
+                                                    <span>{new Date(event.timestamp).toLocaleString()}</span>
+                                                  </div>
+                                                  <Show when={event.details && (event.details as { note?: string }).note}>
+                                                    <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
+                                                      {(event.details as { note?: string }).note}
+                                                    </p>
+                                                  </Show>
+                                                  <Show when={event.details && (event.details as { command?: string }).command}>
+                                                    <p class="text-xs text-gray-700 dark:text-gray-300 mt-1 font-mono">
+                                                      {(event.details as { command?: string }).command}
+                                                    </p>
+                                                  </Show>
+                                                  <Show when={event.details && (event.details as { output_excerpt?: string }).output_excerpt}>
+                                                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                                                      {(event.details as { output_excerpt?: string }).output_excerpt}
+                                                    </p>
+                                                  </Show>
+                                                </div>
+                                              )}
+                                            </For>
+                                          </div>
+                                        </Show>
+                                        <Show when={events.length > 0 && filteredEvents.length === 0}>
+                                          <p class="text-xs text-gray-500 dark:text-gray-400">
+                                            No timeline events match the selected filters.
+                                          </p>
+                                        </Show>
+                                        <Show when={events.length === 0}>
+                                          <p class="text-xs text-gray-500 dark:text-gray-400">No timeline events yet.</p>
+                                        </Show>
+                                      </>
+                                    );
+                                  })()}
+                                  <div class="flex flex-col gap-2">
+                                    <textarea
+                                      class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 p-2 text-xs text-gray-800 dark:text-gray-200"
+                                      rows={2}
+                                      placeholder="Add a note for this incident..."
+                                      value={incidentNoteDrafts()[alert.id] || ''}
+                                      onInput={(e) => {
+                                        const value = e.currentTarget.value;
+                                        setIncidentNoteDrafts((prev) => ({ ...prev, [alert.id]: value }));
+                                      }}
+                                    />
+                                    <div class="flex justify-end">
+                                      <button
+                                        class="px-3 py-1.5 text-xs font-medium border rounded-lg transition-all bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                                        disabled={incidentNoteSaving().has(alert.id) || !(incidentNoteDrafts()[alert.id] || '').trim()}
+                                        onClick={() => {
+                                          void saveIncidentNote(alert.id, alert.startTime);
+                                        }}
+                                      >
+                                        {incidentNoteSaving().has(alert.id) ? 'Saving...' : 'Save Note'}
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </Show>
+                            <Show when={!incidentTimelines()[alert.id]}>
+                              <p class="text-xs text-gray-500 dark:text-gray-400">No incident timeline available.</p>
+                            </Show>
+                          </Show>
+                        </div>
+                      </Show>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </Show>
+          </div>
+        </Show >
+      </div>
     </div >
   );
 }
@@ -7020,38 +7023,38 @@ function HistoryTab() {
           >
             {/* Table */}
             <div class="mb-2 border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
-              <ScrollableTable minWidth="1000px">
-                <table class="w-full min-w-[1000px] text-xs sm:text-sm">
+              <ScrollableTable minWidth="800px">
+                <table class="w-full min-w-[800px] text-[11px] sm:text-sm">
                   <thead>
                     <tr class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
-                      <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Timestamp
                       </th>
-                      <th class="p-1 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Source
                       </th>
-                      <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Resource
                       </th>
-                      <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Type
                       </th>
-                      <th class="p-1 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Severity
                       </th>
-                      <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Message
                       </th>
-                      <th class="p-1 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Duration
                       </th>
-                      <th class="p-1 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Status
                       </th>
-                      <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Node
                       </th>
-                      <th class="p-1 px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-[10px] sm:text-xs font-medium uppercase tracking-wider">
                         Actions
                       </th>
                     </tr>
@@ -7095,7 +7098,7 @@ function HistoryTab() {
                                       }`}
                                   >
                                     {/* Timestamp */}
-                                    <td class="p-1 px-2 text-gray-600 dark:text-gray-400 font-mono">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-gray-600 dark:text-gray-400 font-mono whitespace-nowrap">
                                       {new Date(alert.startTime).toLocaleTimeString('en-US', {
                                         hour: '2-digit',
                                         minute: '2-digit',
@@ -7103,7 +7106,7 @@ function HistoryTab() {
                                     </td>
 
                                     {/* Source */}
-                                    <td class="p-1 px-2 text-center">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center">
                                       <span
                                         class={`text-[10px] px-1.5 py-0.5 rounded font-medium ${alert.source === 'ai'
                                           ? 'bg-violet-100 dark:bg-violet-900/50 text-violet-700 dark:text-violet-300'
@@ -7115,12 +7118,12 @@ function HistoryTab() {
                                     </td>
 
                                     {/* Resource */}
-                                    <td class="p-1 px-2 font-medium text-gray-900 dark:text-gray-100 truncate max-w-[150px]">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 font-medium text-gray-900 dark:text-gray-100 truncate max-w-[150px]">
                                       {alert.resourceName}
                                     </td>
 
                                     {/* Type */}
-                                    <td class="p-1 px-2">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2">
                                       <span
                                         class={`text-xs px-1 py-0.5 rounded ${alert.resourceType === 'VM'
                                           ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300'
@@ -7138,7 +7141,7 @@ function HistoryTab() {
                                     </td>
 
                                     {/* Severity */}
-                                    <td class="p-1 px-2 text-center">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center">
                                       <span
                                         class={`text-xs px-2 py-0.5 rounded font-medium ${alert.level === 'critical'
                                           ? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300'
@@ -7151,19 +7154,19 @@ function HistoryTab() {
 
                                     {/* Message */}
                                     <td
-                                      class="p-1 px-2 text-gray-700 dark:text-gray-300 truncate max-w-[300px]"
+                                      class="p-1 sm:p-1.5 px-1 sm:px-2 text-gray-700 dark:text-gray-300 truncate max-w-[300px]"
                                       title={alert.message}
                                     >
                                       {alert.message}
                                     </td>
 
                                     {/* Duration */}
-                                    <td class="p-1 px-2 text-center text-gray-600 dark:text-gray-400">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center text-gray-600 dark:text-gray-400">
                                       {alert.duration}
                                     </td>
 
                                     {/* Status */}
-                                    <td class="p-1 px-2 text-center">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center">
                                       <span
                                         class={`text-xs px-2 py-0.5 rounded ${alert.status === 'active'
                                           ? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 font-medium'
@@ -7177,12 +7180,12 @@ function HistoryTab() {
                                     </td>
 
                                     {/* Node */}
-                                    <td class="p-1 px-2 text-gray-600 dark:text-gray-400 truncate">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-gray-600 dark:text-gray-400 truncate">
                                       {alert.node || '—'}
                                     </td>
 
                                     {/* Actions */}
-                                    <td class="p-1 px-2 text-center">
+                                    <td class="p-1 sm:p-1.5 px-1 sm:px-2 text-center">
                                       <div class="flex items-center justify-center gap-1">
                                         <Show when={alert.source === 'alert'}>
                                           <button
diff --git a/frontend-modern/tailwind.config.js b/frontend-modern/tailwind.config.js
index f2cf47d5a..eebf89f5c 100644
--- a/frontend-modern/tailwind.config.js
+++ b/frontend-modern/tailwind.config.js
@@ -7,6 +7,14 @@ export default {
   ],
   darkMode: 'class',
   theme: {
+    screens: {
+      'xs': '400px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
     extend: {
       colors: {
         gray: {