remove comments

Reviewed-on: #7

src/assets/scss/_global.scss

@@ -234,6 +234,15 @@ body {
   color: $text-secondary;
 }
 
+// Ensure stat-chip shows primary-dark outline on hover and when active
+.stat-chip {
+  &:hover:not(:disabled),
+  &.active {
+    border-color: $primary-dark;
+    box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
+  }
+}
+
 // Results count
 .results-count {
   text-align: center;

src/assets/scss/_mixins.scss

@@ -23,11 +23,98 @@
 // Card style
 @mixin card {
   background: $bg-primary;
-  border-radius: $radius-lg;
   box-shadow: $shadow-md;
   padding: $spacing-xl;
 }
 
+// Ensure cards occupy consistent vertical space and can stretch horizontally
+@mixin card-dimensions($min-width: 320px, $min-height: 180px) {
+  min-width: $min-width;
+  min-height: $min-height;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/// Standard vertical stack for card-style list rows (dashboard recent apps, server detail apps, etc.)
+@mixin card-list-vertical($gap: $spacing-md) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+/// Hover lift used by dashboard list cards, server grid cards, and similar surfaces
+@mixin card-hover-lift($translate-y: -2px, $hover-shadow: $shadow-lg) {
+  transition: transform $transition-base, box-shadow $transition-base;
+
+  &:hover {
+    transform: translateY($translate-y);
+    box-shadow: $hover-shadow;
+  }
+}
+
+/// Card shell with horizontal scroll (e.g. data tables)
+@mixin scrollable-card {
+  @include card;
+  overflow-x: auto;
+}
+
+/// Header block inside a card: title area with a bottom rule (server cards, etc.)
+@mixin card-header-rule {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $spacing-lg;
+  padding-bottom: $spacing-md;
+  border-bottom: 2px solid $bg-secondary;
+}
+
+/// Primary title + muted monospace/meta line (server cards, resource headers)
+@mixin card-title-stack(
+  $title-size: $font-size-xl,
+  $title-weight: $font-weight-bold,
+  $meta-size: $font-size-sm
+) {
+  h3 {
+    margin: 0 0 $spacing-xs;
+    font-size: $title-size;
+    color: $text-primary;
+    font-weight: $title-weight;
+  }
+
+  .server-host {
+    font-size: $meta-size;
+    color: $text-muted;
+    font-family: monospace;
+  }
+}
+
+/// Label + value row inside a card body (server stats, etc.)
+@mixin card-stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-sm 0;
+  border-bottom: 1px solid $bg-secondary;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+/// Full-width edge bleed for highlighted rows inside padded cards (matches card horizontal padding)
+@mixin card-row-highlight-bleed($clear-bottom-border: true) {
+  padding: $spacing-sm $spacing-md;
+  margin: $spacing-sm (-$spacing-xl);
+  padding-left: calc($spacing-xl + $spacing-md);
+  padding-right: calc($spacing-xl + $spacing-md);
+
+  @if $clear-bottom-border {
+    border-bottom: none;
+  }
+}
+
 // Button base
 @mixin button-base {
   padding: $spacing-sm $spacing-lg;
@@ -63,4 +150,63 @@
   font-weight: $font-weight-semibold;
   background-color: rgba($color, 0.1);
   // color: darken($color, 20%);
+}
+
+// Compact chip used for stat chips and small interactive chips
+@mixin chip(
+  $bg: white,
+  $border-color: $border-color,
+  $radius: $radius-md,
+  $padding: $spacing-md $spacing-lg,
+  $gap: $spacing-md,
+  $hover-translate: -2px,
+  $hover-shadow: $shadow-sm,
+  $font-size: $font-size-base
+) {
+  display: flex;
+  align-items: center;
+  gap: $gap;
+  padding: $padding;
+  background: $bg;
+  border: 2px solid $border-color;
+  border-radius: $radius;
+  cursor: pointer;
+  transition: all $transition-base;
+  font-size: $font-size;
+
+  &:hover:not(:disabled) {
+    border-color: $primary;
+    transform: translateY($hover-translate);
+    box-shadow: $hover-shadow;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Reusable action button styles; accepts border width and radius
+@mixin action-btn($border-width: 1px, $radius: $radius-sm, $padding: $spacing-xs $spacing-md, $font-size: $font-size-sm) {
+  background: none;
+  border: $border-width solid $border-color;
+  padding: $padding;
+  border-radius: $radius;
+  cursor: pointer;
+  font-size: $font-size;
+  color: $text-primary;
+  font-weight: $font-weight-medium;
+  transition: all $transition-base;
+
+  &:hover {
+    background-color: rgba($primary, 0.05);
+    color: $text-primary;
+    transform: translateY(-1px);
+    border-color: $primary;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 }

src/routes/Apps/App.scss

@@ -47,25 +47,7 @@
 
 // Action buttons
 .action-btn {
-  padding: $spacing-sm $spacing-lg;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  cursor: pointer;
-  transition: all $transition-base;
-  background: white;
-  color: $text-primary;
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: $shadow-md;
-  }
+  @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
 
   &.primary {
     background: $primary;
@@ -137,39 +119,39 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: $spacing-lg;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-xs;
-
-  label {
-    font-size: $font-size-xs;
-    color: $text-secondary;
-    font-weight: $font-weight-medium;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  span {
-    font-size: $font-size-base;
-    color: $text-primary;
-  }
-
-  .no-value {
-    color: $text-muted;
-    font-style: italic;
-  }
-
-  .chaos-active {
-    color: darken($info, 10%);
-    font-weight: $font-weight-medium;
+  
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+    
+    label {
+      font-size: $font-size-xs;
+      color: $text-secondary;
+      font-weight: $font-weight-medium;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    
+    span {
+      font-size: $font-size-base;
+      color: $text-primary;
+    }
+    
+    .no-value {
+      color: $text-muted;
+      font-style: italic;
+    }
+    
+    .chaos-active {
+      color: darken($info, 10%);
+      font-weight: $font-weight-medium;
+    }
   }
 }
 
 .domain-link {
-  color: $primary;
+  color: $primary-dark;
   text-decoration: none;
   font-size: $font-size-base;
   transition: color $transition-base;
@@ -183,7 +165,7 @@
 .server-link {
   background: none;
   border: none;
-  color: $primary;
+  color: $primary-dark;
   cursor: pointer;
   padding: 0;
   font-size: $font-size-base;

src/routes/Apps/App.tsx

@@ -158,7 +158,7 @@ export const AppDetail: React.FC = () => {
               <span className="recipe-badge">{app.recipe}</span>
               <span className={`status-badge status-${app.status}`}>{app.status}</span>
               {app.chaos === 'true' && (
-                <span className="chaos-badge" title="Chaos mode enabled">🔬 Chaos</span>
+                <span className="chaos-badge" title="Chaos mode enabled"> Chaos</span>
               )}
             </div>
           </div>
@@ -236,7 +236,7 @@ export const AppDetail: React.FC = () => {
                 <div className="info-item">
                   <label>Chaos Mode</label>
                   <span className={app.chaos === 'true' ? 'chaos-active' : ''}>
-                    {app.chaos === 'true' ? '🔬 Enabled' : 'Disabled'}
+                    {app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
                   </span>
                 </div>
               </div>

src/routes/Apps/Apps.scss

@@ -21,31 +21,12 @@
 }
 
 .stat-chip {
-  display: flex;
-  align-items: center;
-  gap: $spacing-sm;
-  padding: $spacing-sm $spacing-md;
-  background: white;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  cursor: pointer;
-  transition: all $transition-base;
-  font-size: $font-size-base;
-
-  &:hover:not(:disabled) {
-    border-color: $primary;
-    transform: translateY(-2px);
-    box-shadow: $shadow-sm;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+  @include chip();
 
   &.active {
-    border-color: $primary;
-    background: rgba($primary, 0.05);
+    border-color: $primary-dark;
+    background: $bg-primary;
+    box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
   }
 
   .stat-label {
@@ -63,28 +44,11 @@
   }
 }
 
-.reset-filters-btn {
-  padding: $spacing-sm $spacing-md;
-  background: $bg-secondary;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  cursor: pointer;
-  transition: all $transition-base;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  color: $text-secondary;
-
-  &:hover {
-    background: white;
-    color: $text-primary;
-    border-color: $primary;
-  }
-}
+/* reset-filters-btn removed — outline on stat-chip indicates active filters */
 
 // Apps table specific styles
 .apps-table-container {
-  @include card;
-  overflow-x: auto;
+  @include scrollable-card;
   margin-bottom: $spacing-lg;
 }
 
@@ -141,19 +105,19 @@
     font-weight: $font-weight-medium;
     color: $text-primary;
   }
-}
-
-.domain-link {
-  color: $primary;
-  text-decoration: none;
-  transition: color $transition-base;
-
-  &:hover {
-    color: $primary-light;
-    text-decoration: underline;
+  .domain-link {
+    color: $primary-dark;
+    text-decoration: none;
+    transition: color $transition-base;
+  
+    &:hover {
+      color: $primary-light;
+      text-decoration: underline;
+    }
   }
 }
 
+
 .no-domain {
   color: $text-muted;
   font-style: italic;
@@ -182,15 +146,7 @@
   gap: $spacing-sm;
 
   .action-btn {
-    background: none;
-    border: 1px solid $border-color;
-    padding: $spacing-xs $spacing-md;
-    border-radius: $radius-sm;
-    cursor: pointer;
-    font-size: $font-size-sm;
-    color: $text-primary;
-    font-weight: $font-weight-medium;
-    transition: all $transition-base;
+    @include action-btn(1px, $radius-sm, $spacing-xs $spacing-md, $font-size-sm);
 
     &:hover {
       background-color: $primary;

src/routes/Apps/Apps.tsx

@@ -1,3 +1,8 @@
+
+// TODOS:
+// make the two filters non-exlusive
+
+
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
@@ -12,7 +17,6 @@ export const Apps: React.FC = () => {
   const [error, setError] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
   const [filterServer, setFilterServer] = useState<string>('all');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
   const [showChaosOnly, setShowChaosOnly] = useState(false);
   
@@ -60,7 +64,7 @@ export const Apps: React.FC = () => {
     return Object.keys(appsData);
   }, [appsData]);
 
-  // Filter apps
+  // Filter apps (additive filters: upgrades AND chaos can be applied together)
   const filteredApps = useMemo(() => {
     return allApps.filter(app => {
       const matchesSearch = 
@@ -69,14 +73,12 @@ export const Apps: React.FC = () => {
         (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
       
       const matchesServer = filterServer === 'all' || app.server === filterServer;
-      const matchesChaos = filterStatus === 'all' || 
-        (filterStatus === 'chaos' && app.chaos === 'true') ||
-        (filterStatus === 'stable' && app.chaos === 'false');
+      const matchesChaos = !showChaosOnly || app.chaos === 'true';
       const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
 
       return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
     });
-  }, [allApps, searchTerm, filterServer, filterStatus, showUpgradesOnly]);
+  }, [allApps, searchTerm, filterServer, showUpgradesOnly, showChaosOnly]);
 
   const stats = useMemo(() => {
     const total = allApps.length;
@@ -87,28 +89,9 @@ export const Apps: React.FC = () => {
     return { total, needsUpgrade, chaosApps, totalServers };
   }, [allApps, servers]);
 
-  const resetFilters = () => {
-    setSearchTerm('');
-    setFilterServer('all');
-    setShowChaosOnly(false);
-    setShowUpgradesOnly(false);
-  };
-
   const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
   const toggleChaos = () => setShowChaosOnly(prev => !prev);
 
-  // Show only apps that need upgrades
-  const filterByUpgrades = () => {
-    setShowUpgradesOnly(true);
-    setFilterStatus('all');
-  };
- 
-  // Show only chaos apps
-  const filterByChaos = () => {
-    setFilterStatus('chaos');
-    setShowUpgradesOnly(false);
-  };
-
   if (loading) {
     return (
       <div className="apps-page">
@@ -142,15 +125,6 @@ export const Apps: React.FC = () => {
 
         {/* Compact Stats Overview */}
         <div className="stats-row">
-          <button
-            className="stat-chip"
-            onClick={resetFilters}
-            title="Click to show all apps"
-            > 
-            <span className="stat-label">Apps</span>
-            <span className="stat-value">{stats.total}</span>
-          </button>
-          
           <button
             className="stat-chip"
             onClick={() => navigate('/servers')}

src/routes/Dashboard/_Dashboard.scss

@@ -23,29 +23,21 @@
 }
 
 .apps-list {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-md;
+  @include card-list-vertical;
 }
 
 .app-item {
   @include card;
+  @include card-hover-lift(-2px, $shadow-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: transform $transition-base, box-shadow $transition-base;
   cursor: pointer;
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: $shadow-lg;
-  }
-
   .app-info {
     flex: 1;
 
     h4 {
-      margin: 0 0 $spacing-xs;
       font-size: $font-size-lg;
       color: $text-primary;
       font-weight: $font-weight-semibold;

src/routes/Recipes/Recipes.scss

@@ -14,7 +14,7 @@
 // Servers grid
 .recipes-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: $spacing-xl;
   margin-bottom: $spacing-xl;
 
@@ -26,6 +26,7 @@
 // Server card
 .recipe-card {
   @include card;
+  @include card-dimensions(320px, 180px);
   display: grid;
   grid-template-rows: 1fr 2fr auto 0.9fr;
   transition: transform $transition-base, box-shadow $transition-base;
@@ -110,21 +111,7 @@
     gap: $spacing-sm;
     .action-btn {
       flex: 1;
-      padding: $spacing-sm $spacing-md;
-      border: 2px solid $border-color;
-      background: none;
-      color: $text-primary;
-      border-radius: $radius-md;
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      cursor: pointer;
-      transition: all $transition-base;
-
-      &:hover {
-        background-color: rgba($primary, 0.1);
-        border-color: $primary;
-        transform: translateY(-1px);
-      }
+      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
         background-color: $primary;

src/routes/Servers/Server.scss

@@ -47,25 +47,7 @@
 
 // Action buttons (shared with App view, could be moved to global)
 .action-btn {
-  padding: $spacing-sm $spacing-lg;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  cursor: pointer;
-  transition: all $transition-base;
-  background: white;
-  color: $text-primary;
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: $shadow-md;
-  }
+  @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
 
   &.primary {
     background: $primary;
@@ -212,9 +194,7 @@
 }
 
 .apps-list {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-md;
+  @include card-list-vertical;
 }
 
 .app-item {

src/routes/Servers/Server.tsx

@@ -280,7 +280,7 @@ export const Server: React.FC = () => {
                             {app.status}
                           </span>
                           {app.chaos === 'true' && (
-                            <span className="chaos-badge">🔬</span>
+                            <span className="chaos-badge">☠️</span>
                           )}
                           {app.upgrade !== 'latest' && (
                             <span className="upgrade-badge">⬆️</span>
@@ -335,7 +335,7 @@ export const Server: React.FC = () => {
                   onClick={() => handleAction('upgrade-all')}
                   disabled={!!actionLoading || server.upgradeCount === 0}
                 >
-                  <span className="action-text">⬆Upgrade All Apps</span>
+                  <span className="action-text">Upgrade All Apps</span>
                 </button>
               </div>
             </section>

src/routes/Servers/Servers.scss

@@ -14,10 +14,12 @@
 // Servers grid
 .servers-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: $spacing-xl;
   margin-bottom: $spacing-xl;
 
+  align-items: stretch;
+
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
   }
@@ -26,38 +28,18 @@
 // Server card
 .server-card {
   @include card;
+  @include card-hover-lift(-4px, $shadow-xl);
+  @include card-dimensions(320px, 180px);
   display: flex;
   flex-direction: column;
-  transition: transform $transition-base, box-shadow $transition-base;
   position: relative;
   overflow: hidden;
 
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: $shadow-xl;
-  }
-
   .server-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: $spacing-lg;
-    padding-bottom: $spacing-md;
-    border-bottom: 2px solid $bg-secondary;
+    @include card-header-rule;
 
     .server-title {
-      h3 {
-        margin: 0 0 $spacing-xs;
-        font-size: $font-size-xl;
-        color: $text-primary;
-        font-weight: $font-weight-bold;
-      }
-
-      .server-host {
-        font-size: $font-size-sm;
-        color: $text-muted;
-        font-family: monospace;
-      }
+      @include card-title-stack;
     }
 
     .server-status {
@@ -80,24 +62,12 @@
     margin-bottom: $spacing-lg;
 
     .stat-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: $spacing-sm 0;
-      border-bottom: 1px solid $bg-secondary;
-
-      &:last-child {
-        border-bottom: none;
-      }
+      @include card-stat-row;
 
       // Highlighted rows
       &.highlight {
+        @include card-row-highlight-bleed;
         background-color: rgba($warning, 0.05);
-        padding: $spacing-sm $spacing-md;
-        margin: $spacing-sm (-$spacing-xl);
-        padding-left: calc($spacing-xl + $spacing-md);
-        padding-right: calc($spacing-xl + $spacing-md);
-        border-bottom: none;
 
         .stat-label {
           font-weight: $font-weight-semibold;
@@ -109,11 +79,8 @@
       }
 
       &.chaos-row {
+        @include card-row-highlight-bleed(false);
         background-color: rgba($info, 0.05);
-        padding: $spacing-sm $spacing-md;
-        margin: $spacing-sm (-$spacing-xl);
-        padding-left: calc($spacing-xl + $spacing-md);
-        padding-right: calc($spacing-xl + $spacing-md);
 
         .stat-label {
           font-weight: $font-weight-semibold;
@@ -152,21 +119,7 @@
 
     .action-btn {
       flex: 1;
-      padding: $spacing-sm $spacing-md;
-      border: 2px solid $border-color;
-      background: none;
-      color: $text-primary;
-      border-radius: $radius-md;
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      cursor: pointer;
-      transition: all $transition-base;
-
-      &:hover {
-        background-color: rgba($primary, 0.1);
-        border-color: $primary;
-        transform: translateY(-1px);
-      }
+      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
         background-color: $primary;

src/routes/Servers/Servers.tsx

@@ -21,6 +21,7 @@ export const Servers: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
+  const [showChaosOnly, setShowChaosOnly] = useState(false);
 
   const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
@@ -79,14 +80,15 @@ export const Servers: React.FC = () => {
     return { totalServers, totalApps, totalUpgrades, totalChaos };
   }, [servers]);
 
-  // Filter and sort servers
+  // Filter and sort servers (additive filters allowed)
   const filteredServers = useMemo(() => {
   const filtered = servers.filter(server => {
     const matchesSearch =
       server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
       server.host.toLowerCase().includes(searchTerm.toLowerCase());
     const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
-    return matchesSearch && matchesUpgrades;
+    const matchesChaos = !showChaosOnly || server.chaosCount > 0;
+    return matchesSearch && matchesUpgrades && matchesChaos;
   });
 
   filtered.sort((a, b) => {
@@ -102,12 +104,6 @@ export const Servers: React.FC = () => {
   return filtered;
 }, [servers, searchTerm, sortBy, showUpgradesOnly]);
 
-const resetFilters = () => {
-  setSearchTerm('');
-  setSortBy('name');
-  setShowUpgradesOnly(false);
-};
-
   if (loading) {
     return (
       <div className="servers-page">
@@ -141,15 +137,6 @@ const resetFilters = () => {
 
         {/* Compact Stats Row */}
         <div className="stats-row">
-          <button
-            className="stat-chip"
-            onClick={resetFilters}
-            title="Click to reset filters"
-          >
-            <span className="stat-label">Servers</span>
-            <span className="stat-value">{stats.totalServers}</span>
-          </button>
-
           <button
             className="stat-chip"
             onClick={() => navigate('/apps')}
@@ -170,22 +157,16 @@ const resetFilters = () => {
           </button>
 
           <button
-            className={`stat-chip ${sortBy === 'apps' ? 'active' : ''}`}
-            onClick={() => setSortBy(sortBy === 'apps' ? 'name' : 'apps')}
-            title="Click to sort by app count"
+            className={`stat-chip ${showChaosOnly ? 'active' : ''}`}
+            onClick={() => setShowChaosOnly(prev => !prev)}
+            title="Click to filter servers with chaos apps"
+            disabled={stats.totalChaos === 0}
           >
             <span className="stat-label">Chaos</span>
             <span className="stat-value">{stats.totalChaos}</span>
           </button>
 
-          {(searchTerm || sortBy !== 'name' || showUpgradesOnly) && (
-            <button
-              className="reset-filters-btn"
-              onClick={resetFilters}
-            >
-              Clear filters
-            </button>
-          )}
+          {/* Clear filters button removed — use stat-chip outlines for active filters */}
         </div>
 
         {/* Filters */}