feat(index): colors, remove checks, degraded

.gitignore

@@ -1,8 +1,6 @@
 dist/
 
-# NPM
+# Node
-package-lock.json
-package.json
 node_modules/
 
 # Database

build/tailwind.config.js

@@ -6,5 +6,29 @@ module.exports = {
     },
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    // https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = "") {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey];
+          const cssVariable =
+            colorKey === "DEFAULT"
+              ? `--color${colorGroup}`
+              : `--color${colorGroup}-${colorKey}`;
+
+          const newVars =
+            typeof value === "string"
+              ? { [cssVariable]: value }
+              : extractColorVars(value, `-${colorKey}`);
+
+          return { ...vars, ...newVars };
+        }, {});
+      }
+
+      addBase({
+        ":root": extractColorVars(theme("colors")),
+      });
+    },
+  ],
 };

deploy.just

@@ -0,0 +1,20 @@
+# Deploy the application to fly.io
+deploy-fly:
+  fly deploy --ha=false -c deploy/fly.toml -i {{DOCKER_IMAGE}}
+
+# Read local jwt key and set it as fly secret
+deploy-fly-set-jwt-key-secrets:
+  #!/bin/bash
+  # https://github.com/superfly/flyctl/issues/589
+  cat <<EOF | fly secrets import -c deploy/fly.toml
+  JWT_PRIVATE_KEY="""{{JWT_PRIVATE_KEY}}"""
+  JWT_PUBLIC_KEY="""{{JWT_PUBLIC_KEY}}"""
+  EOF
+
+# Deploy locally with docker compose
+deploy-docker:
+  cd deploy && docker compose up
+
+# Build the application
+build:
+  docker build -f build/Dockerfile -t {{DOCKER_IMAGE}} .

devbox.json

@@ -1,9 +1,7 @@
 {
   "packages": [
     "go@1.21",
-    "temporal-cli@latest",
     "watchexec@latest",
-    "tailwindcss@latest",
     "flyctl@latest",
     "just@latest",
     "nodePackages.npm@latest",

devbox.lock

@@ -115,46 +115,6 @@
         }
       }
     },
-    "tailwindcss@latest": {
-      "last_modified": "2024-01-27T14:55:31Z",
-      "resolved": "github:NixOS/nixpkgs/160b762eda6d139ac10ae081f8f78d640dd523eb#tailwindcss",
-      "source": "devbox-search",
-      "version": "3.4.1",
-      "systems": {
-        "aarch64-darwin": {
-          "store_path": "/nix/store/dii6r8cwfav7r8kd779f3ma5bs71ny54-tailwindcss-3.4.1"
-        },
-        "aarch64-linux": {
-          "store_path": "/nix/store/b83zqgln5z5wpxiiccrlcmzgvgqj24wq-tailwindcss-3.4.1"
-        },
-        "x86_64-darwin": {
-          "store_path": "/nix/store/lpgbpk0lpiqp8my34l0agcz26qcdlshq-tailwindcss-3.4.1"
-        },
-        "x86_64-linux": {
-          "store_path": "/nix/store/xag8bx7ld2k2ixg52yw5c9knbqw5a3bs-tailwindcss-3.4.1"
-        }
-      }
-    },
-    "temporal-cli@latest": {
-      "last_modified": "2024-02-05T02:15:44Z",
-      "resolved": "github:NixOS/nixpkgs/0a254180b4cad6be45aa46dce896bdb8db5d2930#temporal-cli",
-      "source": "devbox-search",
-      "version": "1.18.0",
-      "systems": {
-        "aarch64-darwin": {
-          "store_path": "/nix/store/6897s8ww6fhkiqvqdwfiji7497gvcxj6-temporal-cli-1.18.0"
-        },
-        "aarch64-linux": {
-          "store_path": "/nix/store/d0lvc4fq5y9cql0fshy32285ldzyvhjz-temporal-cli-1.18.0"
-        },
-        "x86_64-darwin": {
-          "store_path": "/nix/store/dxwlx019wah1pj0hr3j50skrbdlb3x9g-temporal-cli-1.18.0"
-        },
-        "x86_64-linux": {
-          "store_path": "/nix/store/v6z5knwsyxymnsk1gfmlnm51j22gf1df-temporal-cli-1.18.0"
-        }
-      }
-    },
     "watchexec@latest": {
       "last_modified": "2024-01-27T14:55:31Z",
       "resolved": "github:NixOS/nixpkgs/160b762eda6d139ac10ae081f8f78d640dd523eb#watchexec",

internal/server/handlers/index.go

@@ -12,19 +12,28 @@ import (
 	"github.com/mentos1386/zdravko/web/templates/components"
 )
 
+type HistoryOutcome string
+
+const (
+	HistoryOutcomeHealthy  HistoryOutcome = "HEALTHY"
+	HistoryOutcomeDegraded HistoryOutcome = "DEGRADED"
+	HistoryOutcomeUnknown  HistoryOutcome = "UNKNOWN"
+	HistoryOutcomeDown     HistoryOutcome = "DOWN"
+)
+
 type IndexData struct {
 	*components.Base
 	Targets       map[string]TargetsAndStatus
 	TargetsLength int
 	TimeRange     string
-	Status        models.TargetStatus
+	Outcome       HistoryOutcome
 }
 
 type Target struct {
 	Name       string
 	Visibility models.TargetVisibility
 	Group      string
-	Status     models.TargetStatus
+	Outcome    HistoryOutcome
 	History    []*HistoryItem
 	Uptime     float64
 }
@@ -35,7 +44,7 @@ type History struct {
 }
 
 type HistoryItem struct {
-	Status       models.TargetStatus
+	Outcome      HistoryOutcome
 	StatusCounts map[models.TargetStatus]int
 	Counts       int
 	Date         time.Time
@@ -53,7 +62,7 @@ type HistoryItemCheck struct {
 }
 
 type TargetsAndStatus struct {
-	Status  models.TargetStatus
+	Outcome HistoryOutcome
 	Targets []*Target
 }
 
@@ -61,6 +70,17 @@ func getDateString(date time.Time) string {
 	return date.UTC().Format("2006-01-02T15:04:05")
 }
 
+func TargetStatusToHistoryOutcome(status models.TargetStatus) HistoryOutcome {
+	switch status {
+	case models.TargetStatusSuccess:
+		return HistoryOutcomeHealthy
+	case models.TargetStatusFailure:
+		return HistoryOutcomeDown
+	default:
+		return HistoryOutcomeUnknown
+	}
+}
+
 func getHistory(history []*services.TargetHistory, period time.Duration, buckets int) *History {
 	historyMap := map[string]*HistoryItem{}
 	numOfSuccess := 0.0
@@ -74,7 +94,7 @@ func getHistory(history []*services.TargetHistory, period time.Duration, buckets
 		mapKeys[i] = dateString
 
 		historyMap[dateString] = &HistoryItem{
-			Status:       models.TargetStatusUnknown,
+			Outcome:      HistoryOutcomeUnknown,
 			StatusCounts: map[models.TargetStatus]int{},
 			Date:         date,
 			Checks:       []*HistoryItemCheck{},
@@ -95,15 +115,6 @@ func getHistory(history []*services.TargetHistory, period time.Duration, buckets
 			numOfSuccess++
 		}
 
-		if entry.Status == models.TargetStatusUnknown {
-			entry.Status = _history.Status
-		}
-
-		// If not yet failure, and failing check. Mark as failing.
-		if _history.Status == models.TargetStatusFailure && entry.Status != models.TargetStatusFailure {
-			entry.Status = models.TargetStatusFailure
-		}
-
 		entry.StatusCounts[_history.Status]++
 		entry.Counts++
 		entry.SuccessRate = 100.0 * float64(entry.StatusCounts[models.TargetStatusSuccess]) / float64(entry.Counts)
@@ -146,6 +157,14 @@ func getHistory(history []*services.TargetHistory, period time.Duration, buckets
 			})
 		}
 
+		if entry.SuccessRate == 100.0 {
+			entry.Outcome = HistoryOutcomeHealthy
+		} else if entry.SuccessRate == 0.0 {
+			entry.Outcome = HistoryOutcomeDown
+		} else {
+			entry.Outcome = HistoryOutcomeDegraded
+		}
+
 		historyMap[dateString] = entry
 	}
 
@@ -196,8 +215,8 @@ func (h *BaseHandler) Index(c echo.Context) error {
 		timeBuckets = 90
 	}
 
-	overallStatus := models.TargetStatusUnknown
+	overallOutcome := HistoryOutcomeUnknown
-	statusByGroup := make(map[string]models.TargetStatus)
+	outcomeByGroup := make(map[string]HistoryOutcome)
 
 	targetsWithHistory := make([]*Target, len(targets))
 	for i, target := range targets {
@@ -208,29 +227,29 @@ func (h *BaseHandler) Index(c echo.Context) error {
 
 		historyResult := getHistory(history, timeInterval, timeBuckets)
 
-		if statusByGroup[target.Group] == "" {
+		if outcomeByGroup[target.Group] == "" {
-			statusByGroup[target.Group] = models.TargetStatusUnknown
+			outcomeByGroup[target.Group] = HistoryOutcomeUnknown
 		}
 
 		status := historyResult.List[len(historyResult.List)-1]
-		if status.Status == models.TargetStatusSuccess {
+		if status.Outcome == HistoryOutcomeHealthy {
-			if overallStatus == models.TargetStatusUnknown {
+			if overallOutcome == HistoryOutcomeUnknown {
-				overallStatus = status.Status
+				overallOutcome = status.Outcome
 			}
-			if statusByGroup[target.Group] == models.TargetStatusUnknown {
+			if outcomeByGroup[target.Group] == HistoryOutcomeUnknown {
-				statusByGroup[target.Group] = status.Status
+				outcomeByGroup[target.Group] = status.Outcome
 			}
 		}
-		if status.Status != models.TargetStatusSuccess && status.Status != models.TargetStatusUnknown {
+		if status.Outcome != HistoryOutcomeHealthy && status.Outcome != HistoryOutcomeUnknown {
-			overallStatus = status.Status
+			overallOutcome = status.Outcome
-			statusByGroup[target.Group] = status.Status
+			outcomeByGroup[target.Group] = status.Outcome
 		}
 
 		targetsWithHistory[i] = &Target{
 			Name:       target.Name,
 			Visibility: target.Visibility,
 			Group:      target.Group,
-			Status:     status.Status,
+			Outcome:    status.Outcome,
 			History:    historyResult.List,
 			Uptime:     historyResult.Uptime,
 		}
@@ -239,7 +258,7 @@ func (h *BaseHandler) Index(c echo.Context) error {
 	targetsByGroup := map[string]TargetsAndStatus{}
 	for _, target := range targetsWithHistory {
 		targetsByGroup[target.Group] = TargetsAndStatus{
-			Status:  statusByGroup[target.Group],
+			Outcome: outcomeByGroup[target.Group],
 			Targets: append(targetsByGroup[target.Group].Targets, target),
 		}
 	}
@@ -253,6 +272,6 @@ func (h *BaseHandler) Index(c echo.Context) error {
 		},
 		Targets:   targetsByGroup,
 		TimeRange: timeRangeQuery,
-		Status:    overallStatus,
+		Outcome:   overallOutcome,
 	})
 }

justfile

@@ -3,6 +3,8 @@ set shell := ["devbox", "run"]
 # Load dotenv
 set dotenv-load
 
+import 'deploy.just'
+
 # Load public and private keys
 export JWT_PRIVATE_KEY := `cat jwt.private.pem || echo ""`
 export JWT_PUBLIC_KEY := `cat jwt.public.pem || echo ""`
@@ -16,7 +18,7 @@ _default:
 
 # Run full development environment
 run:
-  watchexec -r -e tmpl,css just _tailwindcss-build | sed -e 's/^/tailwind: /;' &
+  watchexec -r -e tmpl,css just tailwindcss | sed -e 's/^/tailwind: /;' &
   sleep 1
   just run-temporal | sed -e 's/^/temporal: /;' &
   sleep 1
@@ -24,18 +26,15 @@ run:
 
 # Start worker
 run-worker:
-  go build -o dist/zdravko cmd/zdravko/main.go
+  go run cmd/zdravko/main.go --worker
-  ./dist/zdravko --worker
 
 # Start server
 run-server:
-  go build -o dist/zdravko cmd/zdravko/main.go
+  go run cmd/zdravko/main.go --server
-  ./dist/zdravko --server
 
 # Start temporal
 run-temporal:
-  go build -o dist/zdravko cmd/zdravko/main.go
+  go run cmd/zdravko/main.go --temporal
-  ./dist/zdravko --temporal
 
 # Test
 test:
@@ -46,27 +45,6 @@ generate-jwt-key:
   openssl genrsa -out jwt.private.pem 2048
   openssl rsa -pubout -in jwt.private.pem -out jwt.public.pem
 
-# Deploy the application to fly.io
-deploy-fly:
-  fly deploy --ha=false -c deploy/fly.toml -i {{DOCKER_IMAGE}}
-
-# Read local jwt key and set it as fly secret
-deploy-fly-set-jwt-key-secrets:
-  #!/bin/bash
-  # https://github.com/superfly/flyctl/issues/589
-  cat <<EOF | fly secrets import -c deploy/fly.toml
-  JWT_PRIVATE_KEY="""{{JWT_PRIVATE_KEY}}"""
-  JWT_PUBLIC_KEY="""{{JWT_PUBLIC_KEY}}"""
-  EOF
-
-# Deploy locally with docker compose
-deploy-docker:
-  cd deploy && docker compose up
-
-# Build the application
-build:
-  docker build -f build/Dockerfile -t {{DOCKER_IMAGE}} .
-
 # Run Docker application.
 run-docker:
   docker run -p 8080:8080 \
@@ -103,22 +81,27 @@ migration-new name:
   echo "Created migration file: $FILENAME"
 
 # Generate and download all external dependencies.
-generate: _tailwindcss-build _htmx-download _monaco-download _feather-icons-download
+generate: static
   go generate ./...
 
-_tailwindcss-build:
+tailwindcss:
-  tailwindcss build -c build/tailwind.config.js -i {{STATIC_DIR}}/css/main.css -o {{STATIC_DIR}}/css/tailwind.css
+  mkdir -p {{STATIC_DIR}}/css
+  npx tailwindcss build -c build/tailwind.config.js -i {{STATIC_DIR}}/css/main.css -o {{STATIC_DIR}}/css/tailwind.css
 
-_htmx-download:
+static:
-  mkdir -p  {{STATIC_DIR}}/js
+  npm install
-  curl -sLo {{STATIC_DIR}}/js/htmx.min.js https://unpkg.com/htmx.org/dist/htmx.min.js
+  # Clean up static directory
+  find {{STATIC_DIR}} -type f -not -path '{{STATIC_DIR}}/static.go' -not -path '{{STATIC_DIR}}/css/*' -exec rm -f {} \;
 
-_monaco-download:
+  # Tailwind CSS
-  rm -rf {{STATIC_DIR}}/monaco
+  just tailwindcss
-  npm install monaco-editor@0.46.0
-  mv node_modules/monaco-editor/min {{STATIC_DIR}}/monaco
-  rm -rf node_modules
 
+  # HTMX
+  mkdir -p {{STATIC_DIR}}/js
+  cp node_modules/htmx.org/dist/htmx.min.js {{STATIC_DIR}}/js/htmx.min.js
+
+  # Monaco
+  cp -r node_modules/monaco-editor/min/* {{STATIC_DIR}}/monaco
   # We only care about javascript language
   find {{STATIC_DIR}}/monaco/vs/basic-languages/ \
     -type d \
@@ -128,6 +111,6 @@ _monaco-download:
     -not -name 'basic-languages' \
     -prune -exec rm -rf {} \;
 
-_feather-icons-download:
+  # Feather Icons
   mkdir -p {{STATIC_DIR}}/icons
-  curl -sLo {{STATIC_DIR}}/icons/feather-sprite.svg https://unpkg.com/feather-icons/dist/feather-sprite.svg
+  cp node_modules/feather-icons/dist/feather-sprite.svg {{STATIC_DIR}}/icons/feather-sprite.svg

package.json

@@ -0,0 +1,11 @@
+{
+  "devDependencies": {
+    "caniuse-lite": "^1.0.30001624",
+    "feather-icons": "^4.29.2",
+    "htmx.org": "^1.9.12",
+    "monaco-editor": "^0.49.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-go-template": "^0.0.15",
+    "tailwindcss": "^3.4.3"
+  }
+}

web/static/css/main.css

@@ -51,81 +51,127 @@ code {
   @apply shadow;
 }
 
-.sidebar a {
+#page-index .targets .time-range > a {
-  @apply w-full block rounded-lg px-4 py-2  focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700;
-}
-.sidebar a:focus {
-  @apply outline-none ring-2 ring-blue-700 text-blue-700;
-}
-.sidebar a:hover {
-  @apply shadow-inner bg-gray-200 text-blue-700;
-}
-.sidebar a.active {
-  @apply bg-blue-700 text-white;
-}
-
-.targets .time-range > a {
   @apply font-medium text-sm px-2.5 py-1 rounded-lg;
   @apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400;
 }
-.targets .time-range > a.active {
+#page-index .targets .time-range > a.active {
   @apply bg-white hover:bg-gray-300 shadow;
 }
 
-.settings {
+#page-index .history > .bar {
-  @apply grid grid-cols-1 gap-5 grid-rows-[min-content] h-fit;
+  @apply h-full self-end;
 }
-.settings section {
+#page-index .history.healthy > .bar {
+  @apply bg-green-400 hover:bg-green-500;
+}
+#page-index .history.unknown > .bar {
+  @apply bg-gray-200 h-1/3;
+}
+#page-index .history.unknown:hover > .bar {
+  @apply h-full bg-gray-300;
+}
+#page-index .history.down > .bar {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-red-300),
+    var(--color-red-300) 20%,
+    var(--color-red-400) 20%,
+    var(--color-red-400) 40%
+  );
+}
+#page-index .history.down:hover > .bar {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-red-400),
+    var(--color-red-400) 20%,
+    var(--color-red-500) 20%,
+    var(--color-red-500) 40%
+  );
+}
+#page-index .history.degraded > .bar {
+  background: repeating-linear-gradient(
+    0deg,
+    var(--color-orange-300),
+    var(--color-orange-300) 20%,
+    var(--color-orange-400) 20%,
+    var(--color-orange-400) 40%
+  );
+}
+#page-index .history.degraded:hover > .bar {
+  background: repeating-linear-gradient(
+    0deg,
+    var(--color-orange-400),
+    var(--color-orange-400) 20%,
+    var(--color-orange-500) 20%,
+    var(--color-orange-500) 40%
+  );
+}
+
+#page-settings .sidebar a {
+  @apply w-full block rounded-lg px-4 py-2  focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700;
+}
+#page-settings .sidebar a:focus {
+  @apply outline-none ring-2 ring-blue-700 text-blue-700;
+}
+#page-settings .sidebar a:hover {
+  @apply shadow-inner bg-gray-200 text-blue-700;
+}
+#page-settings .sidebar a.active {
+  @apply bg-blue-700 text-white;
+}
+
+#page-settings section {
   @apply relative overflow-x-auto shadow-md sm:rounded-lg text-gray-700 bg-white h-min;
 }
 
-.settings section h2 {
+#page-settings section h2 {
   @apply text-lg font-semibold text-gray-900;
 }
 
-.settings section form {
+#page-settings section form {
   @apply grid gap-4 grid-cols-1 sm:grid-cols-[2fr_1fr];
 }
-.settings section form select,
+#page-settings section form select,
-.settings section form input {
+#page-settings section form input {
   @apply h-min bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
 }
-.settings section form label {
+#page-settings section form label {
   @apply sm:col-span-2 block text-sm font-medium text-gray-900;
 }
-.settings section form p {
+#page-settings section form p {
   @apply text-sm font-normal text-gray-500;
 }
-.settings section form button[type="submit"] {
+#page-settings section form button[type="submit"] {
   @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
   @apply sm:col-span-2;
 }
 
-.settings section table {
+#page-settings section table {
   @apply w-full text-sm text-left rtl:text-right text-gray-500;
 }
-.settings section table caption {
+#page-settings section table caption {
   @apply p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white;
 }
-.settings section table caption p {
+#page-settings section table caption p {
   @apply mt-1 text-sm font-normal text-gray-700;
 }
-.settings section table thead {
+#page-settings section table thead {
   @apply text-xs text-gray-700 uppercase bg-gray-50;
 }
-.settings section table thead th {
+#page-settings section table thead th {
   @apply px-6 py-4 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider;
 }
-.settings section table tbody tr {
+#page-settings section table tbody tr {
   @apply odd:bg-white even:bg-gray-50;
 }
-.settings section table tbody tr th {
+#page-settings section table tbody tr th {
   @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-center;
 }
-.settings section table tbody tr td {
+#page-settings section table tbody tr td {
   @apply px-6 py-4 text-center whitespace-nowrap;
 }
-.settings section table tbody tr.row-special {
+#page-settings section table tbody tr.row-special {
   @apply bg-gray-100;
   @apply font-semibold text-xs uppercase tracking-wider;
 }

web/static/css/tailwind.css

@@ -22,7 +22,7 @@ summary {
   list-style: none;
 }
 
-/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
+/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -233,6 +233,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -256,9 +258,9 @@ select {
 */
 
 button,
-[type='button'],
+input:where([type='button']),
-[type='reset'],
+input:where([type='reset']),
-[type='submit'] {
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -466,6 +468,256 @@ video {
   display: none;
 }
 
+:root {
+  --color-inherit: inherit;
+  --color-current: currentColor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -514,6 +766,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -564,6 +820,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .container {
@@ -817,6 +1077,10 @@ video {
   grid-template-columns: auto min-content;
 }
 
+.grid-rows-\[min-content\] {
+  grid-template-rows: min-content;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -857,6 +1121,10 @@ video {
   gap: 1rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -957,11 +1225,6 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -977,9 +1240,9 @@ video {
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
 
-.bg-green-400 {
+.bg-orange-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
 }
 
 .bg-orange-300 {
@@ -1002,11 +1265,6 @@ video {
   background-color: rgb(252 165 165 / var(--tw-bg-opacity));
 }
 
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
 .bg-red-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
@@ -1226,6 +1484,11 @@ video {
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
 
+.text-orange-800 {
+  --tw-text-opacity: 1;
+  color: rgb(154 52 18 / var(--tw-text-opacity));
+}
+
 .text-purple-800 {
   --tw-text-opacity: 1;
   color: rgb(107 33 168 / var(--tw-text-opacity));
@@ -1383,46 +1646,7 @@ code {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.sidebar a {
+#page-index .targets .time-range > a {
-  display: block;
-  width: 100%;
-  border-radius: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.sidebar a:focus {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
-}
-
-.sidebar a:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.sidebar a.active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.targets .time-range > a {
   border-radius: 0.5rem;
   padding-left: 0.625rem;
   padding-right: 0.625rem;
@@ -1437,12 +1661,12 @@ code {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.targets .time-range > a:hover {
+#page-index .targets .time-range > a:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
-.targets .time-range > a:focus {
+#page-index .targets .time-range > a:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1452,7 +1676,7 @@ code {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-.targets .time-range > a.active {
+#page-index .targets .time-range > a.active {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -1460,21 +1684,118 @@ code {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.targets .time-range > a.active:hover {
+#page-index .targets .time-range > a.active:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
-.settings {
+#page-index .history > .bar {
-  display: grid;
+  height: 100%;
-  height: -moz-fit-content;
+  align-self: flex-end;
-  height: fit-content;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  grid-template-rows: min-content;
-  gap: 1.25rem;
 }
 
-.settings section {
+#page-index .history.healthy > .bar {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
+#page-index .history.healthy > .bar:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+#page-index .history.unknown > .bar {
+  height: 33.333333%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+#page-index .history.unknown:hover > .bar {
+  height: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+#page-index .history.down > .bar {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-red-300),
+    var(--color-red-300) 20%,
+    var(--color-red-400) 20%,
+    var(--color-red-400) 40%
+  );
+}
+
+#page-index .history.down:hover > .bar {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-red-400),
+    var(--color-red-400) 20%,
+    var(--color-red-500) 20%,
+    var(--color-red-500) 40%
+  );
+}
+
+#page-index .history.degraded > .bar {
+  background: repeating-linear-gradient(
+    0deg,
+    var(--color-orange-300),
+    var(--color-orange-300) 20%,
+    var(--color-orange-400) 20%,
+    var(--color-orange-400) 40%
+  );
+}
+
+#page-index .history.degraded:hover > .bar {
+  background: repeating-linear-gradient(
+    0deg,
+    var(--color-orange-400),
+    var(--color-orange-400) 20%,
+    var(--color-orange-500) 20%,
+    var(--color-orange-500) 40%
+  );
+}
+
+#page-settings .sidebar a {
+  display: block;
+  width: 100%;
+  border-radius: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+#page-settings .sidebar a:focus {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
+}
+
+#page-settings .sidebar a:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+#page-settings .sidebar a.active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+#page-settings section {
   position: relative;
   height: -moz-min-content;
   height: min-content;
@@ -1489,12 +1810,12 @@ code {
 }
 
 @media (min-width: 640px) {
-  .settings section {
+  #page-settings section {
     border-radius: 0.5rem;
   }
 }
 
-.settings section h2 {
+#page-settings section h2 {
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
@@ -1502,20 +1823,20 @@ code {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.settings section form {
+#page-settings section form {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
 }
 
 @media (min-width: 640px) {
-  .settings section form {
+  #page-settings section form {
     grid-template-columns: 2fr 1fr;
   }
 }
 
-.settings section form select,
+#page-settings section form select,
-.settings section form input {
+#page-settings section form input {
   display: block;
   height: -moz-min-content;
   height: min-content;
@@ -1533,15 +1854,15 @@ code {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.settings section form select:focus,
+#page-settings section form select:focus,
-.settings section form input:focus {
+#page-settings section form input:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
-.settings section form label {
+#page-settings section form label {
   display: block;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1551,12 +1872,12 @@ code {
 }
 
 @media (min-width: 640px) {
-  .settings section form label {
+  #page-settings section form label {
     grid-column: span 2 / span 2;
   }
 }
 
-.settings section form p {
+#page-settings section form p {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
@@ -1564,7 +1885,7 @@ code {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.settings section form button[type="submit"] {
+#page-settings section form button[type="submit"] {
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -1580,12 +1901,12 @@ code {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.settings section form button[type="submit"]:hover {
+#page-settings section form button[type="submit"]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
 }
 
-.settings section form button[type="submit"]:focus {
+#page-settings section form button[type="submit"]:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1596,12 +1917,12 @@ code {
 }
 
 @media (min-width: 640px) {
-  .settings section form button[type="submit"] {
+  #page-settings section form button[type="submit"] {
     grid-column: span 2 / span 2;
   }
 }
 
-.settings section table {
+#page-settings section table {
   width: 100%;
   text-align: left;
   font-size: 0.875rem;
@@ -1610,11 +1931,11 @@ code {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.settings section table:where([dir="rtl"], [dir="rtl"] *) {
+#page-settings section table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 
-.settings section table caption {
+#page-settings section table caption {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding: 1.25rem;
@@ -1626,11 +1947,11 @@ code {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.settings section table caption:where([dir="rtl"], [dir="rtl"] *) {
+#page-settings section table caption:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 
-.settings section table caption p {
+#page-settings section table caption p {
   margin-top: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1639,7 +1960,7 @@ code {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.settings section table thead {
+#page-settings section table thead {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
   font-size: 0.75rem;
@@ -1649,7 +1970,7 @@ code {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.settings section table thead th {
+#page-settings section table thead th {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   padding-top: 1rem;
@@ -1664,17 +1985,17 @@ code {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.settings section table tbody tr:nth-child(odd) {
+#page-settings section table tbody tr:nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.settings section table tbody tr:nth-child(even) {
+#page-settings section table tbody tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.settings section table tbody tr th {
+#page-settings section table tbody tr th {
   white-space: nowrap;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1686,7 +2007,7 @@ code {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.settings section table tbody tr td {
+#page-settings section table tbody tr td {
   white-space: nowrap;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1695,7 +2016,7 @@ code {
   text-align: center;
 }
 
-.settings section table tbody tr.row-special {
+#page-settings section table tbody tr.row-special {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   font-size: 0.75rem;
@@ -1728,21 +2049,6 @@ code {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-red-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(153 27 27 / var(--tw-bg-opacity));

web/static/monaco/vs/base/common/worker/simpleWorker.nls.de.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.de",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["Array","Boolescher Wert","Klasse","Konstante","Konstruktor","Enumeration","Enumerationsmember","Ereignis","Feld","Datei","Funktion","Schnittstelle","Schl\xFCssel","Methode","Modul","Namespace","NULL","Zahl","Objekt","Operator","Paket","Eigenschaft","Zeichenfolge","Struktur","Typparameter","Variable","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.es.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.es",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["matriz","booleano","clase","constante","constructor","enumeraci\xF3n","miembro de la enumeraci\xF3n","evento","campo","archivo","funci\xF3n","interfaz","clave","m\xE9todo","m\xF3dulo","espacio de nombres","NULL","n\xFAmero","objeto","operador","paquete","propiedad","cadena","estructura","par\xE1metro de tipo","variable","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.fr.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.fr",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["tableau","bool\xE9en","classe","constante","constructeur","\xE9num\xE9ration","membre d'\xE9num\xE9ration","\xE9v\xE9nement","champ","fichier","fonction","interface","cl\xE9","m\xE9thode","module","espace de noms","NULL","nombre","objet","op\xE9rateur","package","propri\xE9t\xE9","cha\xEEne","struct","param\xE8tre de type","variable","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.it.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.it",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["matrice","valore booleano","classe","costante","costruttore","enumerazione","membro di enumerazione","evento","campo","file","funzione","interfaccia","chiave","metodo","modulo","spazio dei nomi","Null","numero","oggetto","operatore","pacchetto","propriet\xE0","stringa","struct","parametro di tipo","variabile","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.ja.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.ja",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\u914D\u5217","\u30D6\u30FC\u30EB\u5024","\u30AF\u30E9\u30B9","\u5B9A\u6570","\u30B3\u30F3\u30B9\u30C8\u30E9\u30AF\u30BF\u30FC","\u5217\u6319\u578B","\u5217\u6319\u578B\u30E1\u30F3\u30D0\u30FC","\u30A4\u30D9\u30F3\u30C8","\u30D5\u30A3\u30FC\u30EB\u30C9","\u30D5\u30A1\u30A4\u30EB","\u95A2\u6570","\u30A4\u30F3\u30BF\u30FC\u30D5\u30A7\u30A4\u30B9","\u30AD\u30FC","\u30E1\u30BD\u30C3\u30C9","\u30E2\u30B8\u30E5\u30FC\u30EB","\u540D\u524D\u7A7A\u9593","NULL","\u6570\u5024","\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8","\u6F14\u7B97\u5B50","\u30D1\u30C3\u30B1\u30FC\u30B8","\u30D7\u30ED\u30D1\u30C6\u30A3","\u6587\u5B57\u5217","\u69CB\u9020\u4F53","\u578B\u30D1\u30E9\u30E1\u30FC\u30BF\u30FC","\u5909\u6570","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["array","boolean","class","constant","constructor","enumeration","enumeration member","event","field","file","function","interface","key","method","module","namespace","null","number","object","operator","package","property","string","struct","type parameter","variable","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.ko.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.ko",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\uBC30\uC5F4","\uBD80\uC6B8","\uD074\uB798\uC2A4","\uC0C1\uC218","\uC0DD\uC131\uC790","\uC5F4\uAC70\uD615","\uC5F4\uAC70\uD615 \uBA64\uBC84","\uC774\uBCA4\uD2B8","\uD544\uB4DC","\uD30C\uC77C","\uD568\uC218","\uC778\uD130\uD398\uC774\uC2A4","\uD0A4","\uBA54\uC11C\uB4DC","\uBAA8\uB4C8","\uB124\uC784\uC2A4\uD398\uC774\uC2A4","Null","\uC22B\uC790","\uAC1C\uCCB4","\uC5F0\uC0B0\uC790","\uD328\uD0A4\uC9C0","\uC18D\uC131","\uBB38\uC790\uC5F4","\uAD6C\uC870\uCCB4","\uD615\uC2DD \uB9E4\uAC1C \uBCC0\uC218","\uBCC0\uC218","{0}({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.ru.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.ru",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\u043C\u0430\u0441\u0441\u0438\u0432","\u043B\u043E\u0433\u0438\u0447\u0435\u0441\u043A\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435","\u043A\u043B\u0430\u0441\u0441","\u043A\u043E\u043D\u0441\u0442\u0430\u043D\u0442\u0430","\u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440","\u043F\u0435\u0440\u0435\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u0435","\u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u043F\u0435\u0440\u0435\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F","\u0441\u043E\u0431\u044B\u0442\u0438\u0435","\u043F\u043E\u043B\u0435","\u0444\u0430\u0439\u043B","\u0444\u0443\u043D\u043A\u0446\u0438\u044F","\u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441","\u043A\u043B\u044E\u0447","\u043C\u0435\u0442\u043E\u0434","\u043C\u043E\u0434\u0443\u043B\u044C","\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0441\u0442\u0432\u043E \u0438\u043C\u0435\u043D","NULL","\u0447\u0438\u0441\u043B\u043E","\u043E\u0431\u044A\u0435\u043A\u0442","\u043E\u043F\u0435\u0440\u0430\u0442\u043E\u0440","\u043F\u0430\u043A\u0435\u0442","\u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E","\u0441\u0442\u0440\u043E\u043A\u0430","\u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0430","\u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u0442\u0438\u043F\u0430","\u041F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u0430\u044F","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.zh-cn.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.zh-cn",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\u6570\u7EC4","\u5E03\u5C14\u503C","\u7C7B","\u5E38\u6570","\u6784\u9020\u51FD\u6570","\u679A\u4E3E","\u679A\u4E3E\u6210\u5458","\u4E8B\u4EF6","\u5B57\u6BB5","\u6587\u4EF6","\u51FD\u6570","\u63A5\u53E3","\u952E","\u65B9\u6CD5","\u6A21\u5757","\u547D\u540D\u7A7A\u95F4","Null","\u6570\u5B57","\u5BF9\u8C61","\u8FD0\u7B97\u7B26","\u5305","\u5C5E\u6027","\u5B57\u7B26\u4E32","\u7ED3\u6784","\u7C7B\u578B\u53C2\u6570","\u53D8\u91CF","{0} ({1})"]});

web/static/monaco/vs/base/common/worker/simpleWorker.nls.zh-tw.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/vscode/blob/main/LICENSE.txt
  *-----------------------------------------------------------*/define("vs/base/common/worker/simpleWorker.nls.zh-tw",{"vs/base/common/platform":["_"],"vs/editor/common/languages":["\u9663\u5217","\u5E03\u6797\u503C","\u985E\u5225","\u5E38\u6578","\u5EFA\u69CB\u51FD\u5F0F","\u5217\u8209","\u5217\u8209\u6210\u54E1","\u4E8B\u4EF6","\u6B04\u4F4D","\u6A94\u6848","\u51FD\u5F0F","\u4ECB\u9762","\u7D22\u5F15\u9375","\u65B9\u6CD5","\u6A21\u7D44","\u547D\u540D\u7A7A\u9593","null","\u6578\u5B57","\u7269\u4EF6","\u904B\u7B97\u5B50","\u5957\u4EF6","\u5C6C\u6027","\u5B57\u4E32","\u7D50\u69CB","\u578B\u5225\u53C3\u6578","\u8B8A\u6578","{0} ({1})"]});

web/static/monaco/vs/basic-languages/javascript/javascript.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/basic-languages/typescript/typescript.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/basic-languages/yaml/yaml.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/css/cssMode.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/css/cssWorker.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/html/htmlMode.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/html/htmlWorker.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/json/jsonMode.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/json/jsonWorker.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/typescript/tsMode.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/monaco/vs/language/typescript/tsWorker.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
- * Version: 0.46.0(21007360cad28648bdf46282a2592cb47c3a7a6f)
+ * Version: 0.49.0(383fdf3fc0e1e1a024068b8d0fd4f3dcbae74d04)
  * Released under the MIT license
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
  *-----------------------------------------------------------------------------*/

web/static/static.go

@@ -4,8 +4,6 @@ import (
 	"embed"
 )
 
-//go:generate just _tailwindcss-build
+//go:generate just static
-//go:generate just _htmx-download
-//go:generate just _feather-icons-download
 //go:embed *
 var Static embed.FS

web/templates/components/settings.tmpl

@@ -8,6 +8,7 @@
 
 
   <div
+    id="page-settings"
     class="md:px-4 lg:px-8 mx-auto mt-8 w-full max-w-screen-xl lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8"
   >
     <ul
@@ -63,7 +64,7 @@
         </li>
       {{ end }}
     </ul>
-    <div class="settings">
+    <div class="grid grid-cols-1 gap-5 grid-rows-[min-content] h-fit">
       <nav
         aria-label="Breadcrumb"
         class="mx-8 lg:mx-0 grid justify-center lg:justify-start"

web/templates/pages/index.tmpl

@@ -1,5 +1,8 @@
 {{ define "main" }}
-  <div class="container max-w-screen-md flex flex-col mt-20 gap-20">
+  <div
+    id="page-index"
+    class="container max-w-screen-md flex flex-col mt-20 gap-20"
+  >
     {{ $length := len .Targets }}
     {{ if eq $length 0 }}
       <section>
@@ -29,7 +32,7 @@
         </div>
       </section>
     {{ else }}
-      {{ if or (eq .Status "UNKNOWN") (eq .Status "SUCCESS") }}
+      {{ if or (eq .Outcome "UNKNOWN") (eq .Outcome "HEALTHY") }}
         <div class="flex flex-col items-center">
           <svg
             class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"
@@ -42,27 +45,27 @@
             {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
           </p>
         </div>
-      {{ else if eq .Status "INCIDENT" }}
+      {{ else if eq .Outcome "DOWN" }}
         <div class="flex flex-col items-center">
           <svg
             class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"
           >
             <use href="/static/icons/feather-sprite.svg#alert-triangle" />
           </svg>
-          <h1 class="text-gray-700 mt-4">Incident in progress</h1>
+          <h1 class="text-gray-700 mt-4">Some services are down</h1>
           <p class="text-gray-700 text-sm">
             Last updated on
             {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
           </p>
         </div>
-      {{ else }}
+      {{ else if eq .Outcome "DEGRADED" }}
         <div class="flex flex-col items-center">
           <svg
             class="feather h-20 w-20 rounded-full bg-orange-300 p-4 overflow-visible"
           >
             <use href="/static/icons/feather-sprite.svg#alert-triangle" />
           </svg>
-          <h1 class="text-gray-700 mt-4">Degraded performance</h1>
+          <h1 class="text-gray-700 mt-4">Degraded services</h1>
           <p class="text-gray-700 text-sm">
             Last updated on
             {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
@@ -103,14 +106,16 @@
             >
               <span
                 class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
-                {{ if eq $targetsAndStatus.Status "SUCCESS" }}
+                {{ if eq $targetsAndStatus.Outcome "HEALTHY" }}
                   bg-green-100 text-green-800
-                {{ else if eq $targetsAndStatus.Status "FAILURE" }}
+                {{ else if eq $targetsAndStatus.Outcome "DOWN" }}
                   bg-red-100 text-red-800
+                {{ else if eq $targetsAndStatus.Outcome "DEGRADED" }}
+                  bg-orange-100 text-orange-800
                 {{ else }}
                   bg-gray-100 text-gray-800
                 {{ end }}"
-                >{{ .Status }}</span
+                >{{ .Outcome }}</span
               >
               <h2 class="flex-1 font-semibold capitalize">
                 {{ $group }}
@@ -128,14 +133,16 @@
                 <div class="flex items-center gap-2">
                   <span
                     class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
-                    {{ if eq .Status "SUCCESS" }}
+                    {{ if eq .Outcome "HEALTHY" }}
                       bg-green-100 text-green-800
-                    {{ else if eq .Status "FAILURE" }}
+                    {{ else if eq .Outcome "DOWN" }}
                       bg-red-100 text-red-800
+                    {{ else if eq .Outcome "DEGRADED" }}
+                      bg-orange-100 text-orange-800
                     {{ else }}
                       bg-gray-100 text-gray-800
                     {{ end }}"
-                    >{{ .Status }}</span
+                    >{{ .Outcome }}</span
                   >
                   <h4>
                     {{ .Name }}
@@ -163,32 +170,28 @@
                 <div class="justify-self-end text-sm">
                   {{ printf "%.2f" .Uptime }}% uptime
                 </div>
+
                 <div
                   class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"
                 >
                   {{ range .History }}
                     <div
-                      class="has-tooltip [&_.tooltip]:hover:flex [&_.tooltip]:hover:visible flex"
+                      class="has-tooltip [&_.tooltip]:hover:flex [&_.tooltip]:hover:visible flex
-                    >
+                          {{ if eq .Outcome "HEALTHY" }}
-                      {{ if eq .Status "SUCCESS" }}
+                        history healthy
-                        <div
+                      {{ else if eq .Outcome "DOWN" }}
-                          class="bg-green-400 hover:bg-green-500 flex-auto"
+                        history down
-                        ></div>
+                      {{ else if eq .Outcome "DEGRADED" }}
-                      {{ else if eq .Status "FAILURE" }}
+                        history degraded
-                        <div
-                          class="bg-red-400 hover:bg-red-500 flex-auto"
-                        ></div>
                       {{ else }}
-                        <div
+                        history unknown
-                          class="bg-gray-200 hover:bg-gray-300 flex-auto"
+                      {{ end }}"
-                        ></div>
+                    >
-                      {{ end }}
+                      <div class="flex-auto bar"></div>
                       <div
                         class="tooltip flex flex-col gap-2 bg-white border border-gray-200 rounded p-2 shadow-lg hidden z-50 absolute mt-10 -ml-4 flex-row text-xs"
                       >
-                        <div
+                        <div class="flex flex-row gap-2 justify-between">
-                          class="flex flex-row gap-2 justify-between pb-2 border-b border-gray-200"
-                        >
                           {{ if eq $.TimeRange "90days" }}
                             {{ .Date.Format "Jan 02" }}
                           {{ else if eq $.TimeRange "48hours" }}
@@ -198,42 +201,23 @@
                           {{ end }}
                           <span
                             class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
-                              {{ if eq .Status "SUCCESS" }}
+                              {{ if eq .Outcome "HEALTHY" }}
                               bg-green-100 text-green-800
-                            {{ else if eq .Status "FAILURE" }}
+                            {{ else if eq .Outcome "DOWN" }}
                               bg-red-100 text-red-800
+                            {{ else if eq .Outcome "DEGRADED" }}
+                              bg-orange-100 text-orange-800
                             {{ else }}
                               bg-gray-100 text-gray-800
                             {{ end }}"
-                            >{{ .Status }}
+                            >{{ .Outcome }}
-                            ({{ printf "%.2f" .SuccessRate }}%)
                           </span>
                         </div>
-
-                        {{ range .Checks }}
-                          <div class="flex flex-row gap-2 justify-between">
-                            <p>
-                              {{ .Name }} on
-                              {{ .WorkerGroupName }}
-                            </p>
-                            <span
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
-                              {{ if eq .Status "SUCCESS" }}
-                                bg-green-100 text-green-800
-                              {{ else if eq .Status "FAILURE" }}
-                                bg-red-100 text-red-800
-                              {{ else }}
-                                bg-gray-100 text-gray-800
-                              {{ end }}"
-                              >{{ .Status }}
-                              ({{ printf "%.2f" .SuccessRate }}%)
-                            </span>
-                          </div>
-                        {{ end }}
                       </div>
                     </div>
                   {{ end }}
                 </div>
+
                 <div
                   class="text-slate-500 justify-self-start text-xs tracking-wider"
                 >