diff --git a/.env b/.env
deleted file mode 100644
index a6031fd24..000000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-VITE_AUTH_ENABLED=false
diff --git a/README.md b/README.md
index ad93a8119..f3586df82 100644
--- a/README.md
+++ b/README.md
@@ -34,16 +34,49 @@ Set it in the runtime config files to mount the SPA below a subpath such as `/ud
 .public/config.json
 ```
 {
-   "OAUTH_DOMAIN": "oauth domain",
+   "AUTH_ENABLED": false,
+   "OAUTH_DOMAIN": "https://your-instance.zitadel.cloud",
    "OAUTH_CLIENTID": "xxx",
-   "OAUTH_AUDIENCE": "http://localhost:8080/api",
+   "OAUTH_SCOPE": "openid profile email offline_access urn:zitadel:iam:org:project:id:PROJECT_ID:aud",
    "API_BASE_URL": "/api",
-   "APP_BASE_PATH": "/udash/"
+   "APP_BASE_PATH": "/udash/",
+   "MAX_HISTORY_DAYS": 30
 }
 ```
 
 The app bootstraps from `config.json` before loading the Vue bundle, then exposes the same values on `window.config`.
 
+`MAX_HISTORY_DAYS` caps how far back the interface looks: it sets how far the dashboard
+date filter reaches and the window of the activity chart on the home page. It defaults to
+`30` when unset and is capped at the API's own maximum of `366`.
+
+Raising it does not change how much work the backend does by default — the date filter
+still starts on the last day whatever the maximum, so a wider range is only ever queried
+when someone explicitly asks for one. Lower it on instances where a large report history
+makes the wider queries expensive.
+
+#### Authentication (OIDC)
+
+Authentication uses the standards-based OpenID Connect Authorization Code + PKCE
+flow via [`oidc-client-ts`](https://github.com/authts/oidc-client-ts), and works
+with any compliant provider (the reference deployment uses [Zitadel](https://zitadel.com)).
+It is toggled and configured entirely at runtime through `config.json`, so the same
+image serves both authenticated and open deployments:
+
+- `AUTH_ENABLED` — set to `true` to require authentication. Defaults to `false`.
+- `OAUTH_DOMAIN` — the provider's issuer URL (e.g. `https://your-instance.zitadel.cloud`).
+- `OAUTH_CLIENTID` — the SPA application's client ID.
+- `OAUTH_SCOPE` — requested scopes. Include `openid profile email offline_access`
+  (`offline_access` enables silent token refresh). For Zitadel, add the project
+  audience scope `urn:zitadel:iam:org:project:id:<PROJECT_ID>:aud` so the access
+  token is accepted by the API. Defaults to `openid profile email offline_access`
+  when omitted.
+
+Register the app in the provider as a **User Agent / SPA** application with
+**PKCE**, and add the app's base URL (the value of `APP_BASE_PATH` resolved
+against the deployment origin) as both an allowed **redirect URI** and
+**post-logout redirect URI**.
+
 For the local development environment, the runtime config file must be located at `public/config.json`.
 A `.gitignore` rule ensures this file is not committed to the git repository.
 
diff --git a/docker/config.json b/docker/config.json
index 5c0195d42..2b762c28b 100644
--- a/docker/config.json
+++ b/docker/config.json
@@ -1,7 +1,9 @@
 {
-   "OAUTH_DOMAIN": "https://oauth.domain",
+   "AUTH_ENABLED": false,
+   "OAUTH_DOMAIN": "https://your-instance.zitadel.cloud",
    "OAUTH_CLIENTID": "client_id",
-   "OAUTH_AUDIENCE": "http://localhost:8080/api",
+   "OAUTH_SCOPE": "openid profile email offline_access urn:zitadel:iam:org:project:id:PROJECT_ID:aud",
    "API_BASE_URL": "/api",
-   "APP_BASE_PATH": "/"
+   "APP_BASE_PATH": "/",
+   "MAX_HISTORY_DAYS": 30
 }
diff --git a/package-lock.json b/package-lock.json
index 847221a9c..49abc9b27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,13 @@
       "name": "udash",
       "version": "0.1.0",
       "dependencies": {
-        "@auth0/auth0-vue": "^2.9.0",
         "@mdi/font": "^7.4.47",
         "axios": "^1.19.0",
         "chart.js": "^4.5.1",
         "core-js": "^3.49.0",
         "highlight.js": "^11.11.1",
         "js-yaml": "^5.2.3",
+        "oidc-client-ts": "^3.5.0",
         "roboto-fontface": "^0.10.0",
         "vue": "^3.5.40",
         "vue-chartjs": "^5.3.4",
@@ -68,46 +68,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@auth0/auth0-auth-js": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@auth0/auth0-auth-js/-/auth0-auth-js-1.11.0.tgz",
-      "integrity": "sha512-hy5knYIPKECTLCPCZKolHsdOkjZhCAc59pga4Y3dp8q7E1uVSKYI7BUhzukNVykUshJRmcgPwOiBtsn2JjUo6w==",
-      "license": "MIT",
-      "dependencies": {
-        "jose": "^6.0.8",
-        "openid-client": "^6.8.0"
-      }
-    },
-    "node_modules/@auth0/auth0-spa-js": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.23.0.tgz",
-      "integrity": "sha512-fRiPlTIMLahes6eXq5C4CF8zFi9vLxUtii8e7CESmzWBJGSa3jRrnjgQVAPSaox2x+CwzTFcJbt4mR+UiVMk1Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@auth0/auth0-auth-js": "^1.10.0",
-        "browser-tabs-lock": "^1.3.0",
-        "dpop": "^2.1.1",
-        "es-cookie": "~1.3.2"
-      }
-    },
-    "node_modules/@auth0/auth0-vue": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/@auth0/auth0-vue/-/auth0-vue-2.9.0.tgz",
-      "integrity": "sha512-1q1OexmB1UR+Xxo1HNQZi4ZF88sbvDCdBhI4cdPQxmL8gF7bInV8CfxsYX3eDHD6Vs74wCNVRSFy4wnuh3Pm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@auth0/auth0-spa-js": "^2.23.0",
-        "vue": "^3.5.21"
-      },
-      "peerDependencies": {
-        "vue-router": "^4.0.12 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "vue-router": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -302,12 +262,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
-      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.29.7"
+        "@babel/types": "^7.29.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -351,9 +311,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
-      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.29.7",
@@ -375,37 +335,6 @@
       "integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==",
       "license": "Apache-2.0"
     },
-    "node_modules/@emnapi/core": {
-      "version": "2.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-2.0.0-alpha.3.tgz",
-      "integrity": "sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "2.0.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "2.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-2.0.0-alpha.3.tgz",
-      "integrity": "sha512-hFPAhMUjJD9BSyCANEISPOogeXC9Zo9ZQl7L6vKnaVsMkCtzznaW/naYypeyl0Gv5rYfWYsZbpixTMpjDJzQeA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-2.0.1.tgz",
-      "integrity": "sha512-9DsSk+o5NBX0CCJT8s0EROGSGxjR/tKu6aBTaVyq+SjAEQH4XcdcRxPBRzsBLizTTJ49MJjF+jgu3qnO9GLQcQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -736,27 +665,6 @@
         "@chevrotain/types": "~11.1.2"
       }
     },
-    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.2.2.tgz",
-      "integrity": "sha512-JfB4kuJQjaoHuCTseIINHtHWeJnvgEcxjwA5t/Y00ZgaOO1Crz3fjT/p8kT28zA/Caz7oiUMn3d6H2yOVCVwuw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@tybys/wasm-util": "^0.10.3"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Brooooooklyn"
-      },
-      "peerDependencies": {
-        "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.3",
-        "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.3"
-      }
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -767,9 +675,9 @@
       }
     },
     "node_modules/@oxc-project/types": {
-      "version": "0.142.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.142.0.tgz",
-      "integrity": "sha512-7W+2q5AKQVU36fkaryontrHn3YDt1RyUYXatw9i5H8ocYe2sPKSFB6eS8WNPeRKiN1qAWWZUPm7gwFzJGrccqQ==",
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.143.0.tgz",
+      "integrity": "sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==",
       "devOptional": true,
       "license": "MIT",
       "funding": {
@@ -1073,9 +981,9 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.1.tgz",
-      "integrity": "sha512-02hOeOSryYxVrOIphmLAsqnCJWxwlzFk+pEt/N/i6OgT3lShHO7xGCU5cpgchRDHboAEbSjzgGh+O/u1GswQmA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.3.tgz",
+      "integrity": "sha512-zrJtHDcaZJ1Fp7xf4hNl+7seH9Cn/N5TwLYkhgXREtBwAd/jaqW3uqeHxpDugJLVICWg4eW44kOQEGJ1r6jCGw==",
       "cpu": [
         "arm64"
       ],
@@ -1089,9 +997,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.1.tgz",
-      "integrity": "sha512-fMsTOnN0OjFm3CyppWPitKnc8UlliVARUULW6cfU6AIqjdtgmSFWSk9vecHzZduv/yMWIHDlRhM1e8Iff9uAfA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-ieIiibVCp0tX7TLu2cafoNPv8wJyYi01ekXpbf8q2j7F4rGAhhXb/eQh7ge9DRBY78GwmRQtvjZDux7EDbA8kA==",
       "cpu": [
         "arm64"
       ],
@@ -1105,9 +1013,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.1.tgz",
-      "integrity": "sha512-1wjKdz/XLGKHaTNHjQveQ/B23TKx4ItAqm1JbyVuvNPc4Ze0Fb48s49TAd/2zcplPl8okE/UbTgmlVfwT7eFeQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Zh9tCon19eDXJoihx0rqKhMUlMYqzwj3aPsSuHmI4RWZh62dWUL+DJN4C5YQya5TcQBJU/Fe8+rY0jhXTQITqA==",
       "cpu": [
         "x64"
       ],
@@ -1121,9 +1029,9 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.1.tgz",
-      "integrity": "sha512-Fa0jHR07E7YBN4vOEsbVf2briYNsuOowfLJaXULZM0ldMlaCaj2LJgLMbMe4iacRyZmvR8efFhgR9wKuGclQUg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.3.tgz",
+      "integrity": "sha512-nGbJWewA1wrXXZiQhjAT5rhibGfns5ZNkDVqxsO6zJ3f3YvpoDNNmGMSbbhLuXKjNScaBJVOAboztAWVespQMg==",
       "cpu": [
         "x64"
       ],
@@ -1137,9 +1045,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.1.tgz",
-      "integrity": "sha512-pzkgu1SSHGgRRyRZ4fbmSgmajbVt+epaLP99NDjFft69v/ypfTi6swBMiVdh2EkQ0OSnHE1lZDM7DRGkyAzUpA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.3.tgz",
+      "integrity": "sha512-QNniJr5Kml0kDEB98jiDOJjXNroxIIi0IXIbdYzY26Xt1pVbeP62+KnoIZLwirOymX/0jDk/2gI/bNUv7A7OIw==",
       "cpu": [
         "arm"
       ],
@@ -1153,9 +1061,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.1.tgz",
-      "integrity": "sha512-QI5SEDY8cbiYWHx0VO4vIc3UlS6a32vXHjU8Qy/17adEmZIPuByJg13UEvo9c/UCiUkdcVWY83C+b+JrwnNyUg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.3.tgz",
+      "integrity": "sha512-TkqEAcmmvH3I/q4114NB4RVt6241Dao48pF45uLcFGrwAaIn0iITgTAKP/dLjbN0R4buJjGb91+UHSoFmpgIWw==",
       "cpu": [
         "arm64"
       ],
@@ -1169,9 +1077,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.1.tgz",
-      "integrity": "sha512-Sm41FyCeXqmYcERoYOCbGIL5hNfd8w9LQ7Y61Bev48HkcjaJqV/iiVOaiDxjVTRMS+QKrZmD8cfPt4uMVnvM+A==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.3.tgz",
+      "integrity": "sha512-NHqjnxpsndf4MPymxteFAWHHfkTL8HjWh1KB7z23ofZ6QO2euONuxDXjat69dKZRALnGypg8k8SsK8vZJoXv1Q==",
       "cpu": [
         "arm64"
       ],
@@ -1185,9 +1093,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.1.tgz",
-      "integrity": "sha512-2x+WhXTGl9yJYPbltW/BSEPTVz9OIWQyER4N+gJEDWkkn904eRcBzELqh/Hf7K0w/ubGbKNMv0ZC+94QK/IFEg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.3.tgz",
+      "integrity": "sha512-6tbrbwfz5GB9DQ4Jwo6hy9v+vR31xZlvzZ6n5Xut6Hhx5PvrA9q/HsK8KMaYQp063iqZGXwNvZtYNLD7EM/x0w==",
       "cpu": [
         "ppc64"
       ],
@@ -1201,9 +1109,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.1.tgz",
-      "integrity": "sha512-eEjmQpuRQayHPWWnywaWHkFT3ToPbP3RYy42VVd/B9aBGDA+Ol25EIWHxKQST3IiWJjikCWUF7KtbfqwZrzVwQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.3.tgz",
+      "integrity": "sha512-oyuXxXmoZHjXC917IAPFAAv4wWAa0cM9afk8nx1+9/jNNOX1uPf8yDA6p7G0RypOfw/X0PQt5IfoquY1um+zSg==",
       "cpu": [
         "s390x"
       ],
@@ -1217,9 +1125,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.1.tgz",
-      "integrity": "sha512-/Orga1fZYkLc/56jBICcHrKchl8Z2UKdDSr3LG9ToWO1lQ6a4Livk9Xz+9WN91zsz5QR3XQz2NNoSDEvP6qadw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.3.tgz",
+      "integrity": "sha512-TytMwF2KVGqP2tgd0I1OY0PAv78dZRAYcF5ssDzjM34SUXCED3uXvSd5+lHoC0bTD6eEdFz7LdQNCO1y0oVk9w==",
       "cpu": [
         "x64"
       ],
@@ -1233,9 +1141,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.1.tgz",
-      "integrity": "sha512-xxBJRL+0q0Kce7orznGWLuylHDY65vuARXZRpX+hPdv+DqK2c3NlCsVA98tlWzWNEE7yPqA/1NQ5nnCrj49Y5A==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.3.tgz",
+      "integrity": "sha512-/E9m3qstrJFVPoULV25mVQblSNExY2+kBsYe4sy0Tn0yOOgJ8wZbZt3KnRbF/XeU2Gl1STKUQnDNTqhIE5MD4A==",
       "cpu": [
         "x64"
       ],
@@ -1249,9 +1157,9 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.1.tgz",
-      "integrity": "sha512-M6AdXIXw3s+/8XpKMzdGDEXGS1S7kwUsy+rcTIUIOx5Ge4nXKCtAFHFV9YKkXvGcC5WMoTjAteLzlsQROVI0Yw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.3.tgz",
+      "integrity": "sha512-Kr0OcsoQI816i6HOl3vFHpd1K0eZyh76zgfj4c1nTyaTsd5r2Mj1lwM4R90y/qaCfmTn9eHy0SKwi98eitRxug==",
       "cpu": [
         "arm64"
       ],
@@ -1264,25 +1172,10 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
-    "node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.2.1.tgz",
-      "integrity": "sha512-/TX0SoRGojHzSAHpfVBbavRVSazg5U3h3Y3VXfcc0cdugq6kxdqw8LPGFiPr+/7gE/60zRcsOY2Vi9b9eT0jww==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "2.0.0-alpha.3",
-        "@emnapi/runtime": "2.0.0-alpha.3",
-        "@napi-rs/wasm-runtime": "^1.2.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
-      }
-    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.1.tgz",
-      "integrity": "sha512-EvRrivJieyHG+AO9lleZWgq+g0+S7oV2C51yuqlcyU/R9net+sI4Pj0F+lUoP2bEr6TWX3SqFaaS0SzfLxSzkw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.3.tgz",
+      "integrity": "sha512-hOtMwTqnME+/gJcH/PCZ0wn0zPUjiWOgkHpxbSJpfGKMezHltx1S7/k1SitzVa7Ww2cqrDDaFbZEhcJZO8o+Jw==",
       "cpu": [
         "arm64"
       ],
@@ -1296,9 +1189,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.1.tgz",
-      "integrity": "sha512-Z4eCmn5QJ/5+azF9knpLWKfVd9aidn0mAe9TpJgvBLId9Ax3t0+JVxBmT25Bv7NBbVW1TZyKjQjQReouMeH5UQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.3.tgz",
+      "integrity": "sha512-ekcqMMkI2PlhYnfzQnB/cEdYUVVJViWvoUyLrbzgDoi3Snfc1mVBwdnc306ufA5ejy8JSPjT2RlW1nQSjW7efg==",
       "cpu": [
         "x64"
       ],
@@ -1318,16 +1211,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/@tybys/wasm-util": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
-      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -1676,39 +1559,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.40.tgz",
-      "integrity": "sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
+      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.29.7",
-        "@vue/shared": "3.5.40",
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.41",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
-      "integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
+      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.40",
-        "@vue/shared": "3.5.40"
+        "@vue/compiler-core": "3.5.41",
+        "@vue/shared": "3.5.41"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.40.tgz",
-      "integrity": "sha512-gIf497P4kpuALcvs5n3AEg1Vdn0pSY4XbjASIfHNYF1/MP3T2Mf2STERTubysBxCRxzJGJYtF/O7vwJrxFB3Vw==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
+      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.29.7",
-        "@vue/compiler-core": "3.5.40",
-        "@vue/compiler-dom": "3.5.40",
-        "@vue/compiler-ssr": "3.5.40",
-        "@vue/shared": "3.5.40",
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.41",
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/shared": "3.5.41",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.19",
@@ -1716,13 +1599,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.40.tgz",
-      "integrity": "sha512-rrE5xiXG663+vHCHa3J9p2z5OcBRjXmoqenprJxAFQxg5pSshzeBiCE6pu46axapRJ2Adk0YDA2BRZVjiHXnhg==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
+      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.40",
-        "@vue/shared": "3.5.40"
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1753,51 +1636,51 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.40.tgz",
-      "integrity": "sha512-B7ot9UlUZOi1zbq61/LvE88ZLTV8IlajTdiZTAEiDQgrnIMIZoPr9kGw0Zw46ObW62O9+H/Be3kMbfb7kYPQZA==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
+      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.40"
+        "@vue/shared": "3.5.41"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.40.tgz",
-      "integrity": "sha512-KAZLweuZ6uUJPK1PMSQPgBU5gCjgrrfjUhSglmU9NhH+Zjepa8cnwSydPWDWHDwOgY4g3VcZ+PljbiHlURNCbw==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
+      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.40",
-        "@vue/shared": "3.5.40"
+        "@vue/reactivity": "3.5.41",
+        "@vue/shared": "3.5.41"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.40.tgz",
-      "integrity": "sha512-ZfrX8ssZQds900L9pr8AuK05ddnMsR4MPMZr8cPN9GoqoPWcXLhjvvbIA2SMv+7a97sJ1vv9pj/zxK0Cq/eEFQ==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
+      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.40",
-        "@vue/runtime-core": "3.5.40",
-        "@vue/shared": "3.5.40",
+        "@vue/reactivity": "3.5.41",
+        "@vue/runtime-core": "3.5.41",
+        "@vue/shared": "3.5.41",
         "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.40.tgz",
-      "integrity": "sha512-XNJym9WpevhTVt1HuwOrCRJ5Q+9z4BjTMrDtjTrvx74SmUll8spNTw6whWJa9mEkO4PKn5TihI/bm/8ds2QVJw==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
+      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.40",
-        "@vue/runtime-dom": "3.5.40",
-        "@vue/shared": "3.5.40"
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.40.tgz",
-      "integrity": "sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
+      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
       "license": "MIT"
     },
     "node_modules/@vuetify/loader-shared": {
@@ -1967,16 +1850,6 @@
         "concat-map": "0.0.1"
       }
     },
-    "node_modules/browser-tabs-lock": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.3.0.tgz",
-      "integrity": "sha512-g6nHaobTiT0eMZ7jh16YpD2kcjAp+PInbiVq3M1x6KKaEIVhT4v9oURNIpZLOZ3LQbQ3XYfNhMAb/9hzNLIWrw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "lodash": ">=4.17.21"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
@@ -2760,15 +2633,6 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
-    "node_modules/dpop": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/dpop/-/dpop-2.1.1.tgz",
-      "integrity": "sha512-J0Of2JTiM4h5si0tlbPQ/lkqfZ5wAEVkKYBhkwyyANnPJfWH4VsR5uIkZ+T+OSPIwDYUg1fbd5Mmodd25HjY1w==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2802,12 +2666,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/es-cookie": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz",
-      "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==",
-      "license": "MIT"
-    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -3467,9 +3325,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "17.8.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-17.8.0.tgz",
-      "integrity": "sha512-Zz/LMDZScFmkakeL2cTHzf+PbWKdpU3uclqkZT7TjDG58j5WPt0PpA+n9uPI24fZtlw07q0OtEi84K+umsRzqQ==",
+      "version": "17.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.10.0.tgz",
+      "integrity": "sha512-V0kztuWST2k8A/VbxAY8+L+7+Rgo3fyA24IHRLrZp7HOzJjV0gHSaZUjK9lpP/IrBSNite2tZ1prhRkinRu1CA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3575,9 +3433,9 @@
       }
     },
     "node_modules/immutable": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
-      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz",
+      "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==",
       "devOptional": true,
       "license": "MIT"
     },
@@ -3642,15 +3500,6 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
-    "node_modules/jose": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
-      "integrity": "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3722,6 +3571,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.47",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
@@ -4045,12 +3903,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
-      "license": "MIT"
-    },
     "node_modules/lodash-es": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
@@ -4222,9 +4074,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.16",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
-      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "funding": [
         {
           "type": "github",
@@ -4280,26 +4132,16 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/oauth4webapi": {
-      "version": "3.8.6",
-      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.8.6.tgz",
-      "integrity": "sha512-iwemM91xz8nryHti2yTmg5fhyEMVOkOXwHNqbvcATjyajb5oQxCQzrNOA6uElRHuMhQQTKUyFKV9y/CNyg25BQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
-    "node_modules/openid-client": {
-      "version": "6.8.4",
-      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-6.8.4.tgz",
-      "integrity": "sha512-QSw0BA08piujetEwfZsHoTrDpMEha7GDZDicQqVwX4u0ChCjefvjDB++TZ8BTg76UpwhzIQgdvvfgfl3HpCSAw==",
-      "license": "MIT",
+    "node_modules/oidc-client-ts": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.5.0.tgz",
+      "integrity": "sha512-l2q8l9CTCTOlbX+AnK4p3M+4CEpKpyQhle6blQkdFhm0IsBqsxm15bYaSa11G7pWdsYr6epdsRZxJpCyCRbT8A==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "jose": "^6.2.2",
-        "oauth4webapi": "^3.8.5"
+        "jwt-decode": "^4.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/optionator": {
@@ -4418,9 +4260,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.25",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.25.tgz",
-      "integrity": "sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==",
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4437,7 +4279,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.16",
+        "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -4446,9 +4288,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz",
-      "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==",
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.5.tgz",
+      "integrity": "sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4537,13 +4379,13 @@
       "license": "Unlicense"
     },
     "node_modules/rolldown": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.1.tgz",
-      "integrity": "sha512-4FKJhg8d3OiyQOA6Q1Q0hoFFpW9/OoX+VsHzpECsdsIZoOArrAK90gl59YK/Z+gnDel45bgJZK03ozH/9bCqEw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.3.tgz",
+      "integrity": "sha512-rn9wpmxplLf7NLNyCk9FyWh3FM43DbY8jOzCdEPzH7uflhTftRbCEpqi6Ly2osgoU8OwObtmavMbWLaWy4LX7A==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.142.0",
+        "@oxc-project/types": "=0.143.0",
         "@rolldown/pluginutils": "^1.0.0"
       },
       "bin": {
@@ -4553,21 +4395,20 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.2.1",
-        "@rolldown/binding-darwin-arm64": "1.2.1",
-        "@rolldown/binding-darwin-x64": "1.2.1",
-        "@rolldown/binding-freebsd-x64": "1.2.1",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.2.1",
-        "@rolldown/binding-linux-arm64-gnu": "1.2.1",
-        "@rolldown/binding-linux-arm64-musl": "1.2.1",
-        "@rolldown/binding-linux-ppc64-gnu": "1.2.1",
-        "@rolldown/binding-linux-s390x-gnu": "1.2.1",
-        "@rolldown/binding-linux-x64-gnu": "1.2.1",
-        "@rolldown/binding-linux-x64-musl": "1.2.1",
-        "@rolldown/binding-openharmony-arm64": "1.2.1",
-        "@rolldown/binding-wasm32-wasi": "1.2.1",
-        "@rolldown/binding-win32-arm64-msvc": "1.2.1",
-        "@rolldown/binding-win32-x64-msvc": "1.2.1"
+        "@rolldown/binding-android-arm64": "1.2.3",
+        "@rolldown/binding-darwin-arm64": "1.2.3",
+        "@rolldown/binding-darwin-x64": "1.2.3",
+        "@rolldown/binding-freebsd-x64": "1.2.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.3",
+        "@rolldown/binding-linux-arm64-musl": "1.2.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.3",
+        "@rolldown/binding-linux-x64-gnu": "1.2.3",
+        "@rolldown/binding-linux-x64-musl": "1.2.3",
+        "@rolldown/binding-openharmony-arm64": "1.2.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.3",
+        "@rolldown/binding-win32-x64-msvc": "1.2.3"
       }
     },
     "node_modules/roughjs": {
@@ -4725,13 +4566,6 @@
         "node": ">=6.10"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4892,16 +4726,16 @@
       }
     },
     "node_modules/vite": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.0.tgz",
-      "integrity": "sha512-pn+CFpM0lwDeKwmOq1ZaBK/9sjorZcgqxki6MbY/jPEVd9vichIlmlD4HmQ5wdP5EgqQCFRaACBxMC7uEGc6lQ==",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.1.tgz",
+      "integrity": "sha512-EU/eS7BH3XROHh2YnBefjM6DBKA6ZeMZEYQbj7NLWg5wHYlhB8B/Mayd5XsgWq+NFYccDOTemRpdETWR6Ka/lw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.5",
-        "postcss": "^8.5.23",
-        "rolldown": "~1.2.0",
+        "postcss": "^8.5.25",
+        "rolldown": "~1.2.1",
         "tinyglobby": "^0.2.17"
       },
       "bin": {
@@ -4990,16 +4824,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.40.tgz",
-      "integrity": "sha512-+8PJ4SJXdn/cHGImF4CKdxlWHIN5Dkt7DoufRREM6h6uVCx2m7QxgcEQmmzyOK8A9mcafg7sFbJFYsdFVubTig==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
+      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.40",
-        "@vue/compiler-sfc": "3.5.40",
-        "@vue/runtime-dom": "3.5.40",
-        "@vue/server-renderer": "3.5.40",
-        "@vue/shared": "3.5.40"
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-sfc": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/server-renderer": "3.5.41",
+        "@vue/shared": "3.5.41"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -5268,9 +5102,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.1.7.tgz",
-      "integrity": "sha512-07qxu0S1oxPjmknP/Yn5276PtIhlCvHnpcp7HuOKEHni89/6BGiM2aVdKlEGeyM5RfytDkiv0SNieabGT2D8qQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.1.8.tgz",
+      "integrity": "sha512-003D/8b5462uZCD5CMRTZF3smADmOn47mzthNY0aP/xkslovR5yIc1qXjPdFN0LHcu+p3GEAVmMQabldaIQ5pg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -5279,7 +5113,7 @@
       "peerDependencies": {
         "typescript": ">=4.7",
         "vite-plugin-vuetify": ">=2.1.0",
-        "vue": "^3.5.0",
+        "vue": "^3.5.0 || ^3.6.0-0",
         "webpack-plugin-vuetify": ">=3.1.0"
       },
       "peerDependenciesMeta": {
diff --git a/package.json b/package.json
index af62b1960..3feb6dc5a 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,13 @@
     "lint": "eslint --fix src/"
   },
   "dependencies": {
-    "@auth0/auth0-vue": "^2.9.0",
     "@mdi/font": "^7.4.47",
     "axios": "^1.19.0",
     "chart.js": "^4.5.1",
     "core-js": "^3.49.0",
     "highlight.js": "^11.11.1",
     "js-yaml": "^5.2.3",
+    "oidc-client-ts": "^3.5.0",
     "roboto-fontface": "^0.10.0",
     "vue": "^3.5.40",
     "vue-chartjs": "^5.3.4",
diff --git a/src/App.vue b/src/App.vue
index 083049bd4..ce4b645b4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,27 @@
 <template>
-  <router-view/>
+  <v-app>
+    <HeadNavigation/>
+    <SideNavigation/>
+
+    <v-main>
+      <router-view/>
+    </v-main>
+
+    <ReleaseFooter/>
+  </v-app>
 </template>
+
+<script>
+import ReleaseFooter from './components/ReleaseFooter.vue';
+import SideNavigation from './components/SideNavigation.vue';
+import HeadNavigation from './components/HeadNavigation.vue';
+
+export default {
+  name: 'App',
+  components: {
+    ReleaseFooter,
+    SideNavigation,
+    HeadNavigation,
+  },
+}
+</script>
diff --git a/src/components/GetStartedSteps.vue b/src/components/GetStartedSteps.vue
new file mode 100644
index 000000000..5d20ec5ed
--- /dev/null
+++ b/src/components/GetStartedSteps.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div v-for="(step, index) in configSteps" :key="index" class="mb-8">
+      <h3 class="text-h6 mb-2">{{ index + 1 }}. {{ step.title }}</h3>
+      <div class="mb-3" v-html="step.description"></div>
+
+      <!-- Step with mutually-exclusive methods (Authenticate) -->
+      <template v-if="step.methods">
+        <v-tabs v-model="authMethod" density="comfortable" class="mb-4">
+          <v-tab
+            v-for="(method, mIndex) in step.methods"
+            :key="mIndex"
+            :value="mIndex"
+          >
+            {{ method.label }}
+          </v-tab>
+        </v-tabs>
+        <v-window v-model="authMethod">
+          <v-window-item
+            v-for="(method, mIndex) in step.methods"
+            :key="mIndex"
+            :value="mIndex"
+          >
+            <p class="mb-3 text-medium-emphasis">{{ method.description }}</p>
+            <div class="code-block mb-3">
+              <v-btn
+                class="copy-btn"
+                :icon="copiedKey === `auth-${mIndex}` ? 'mdi-check' : 'mdi-content-copy'"
+                size="small"
+                variant="text"
+                :aria-label="`Copy ${method.label} command`"
+                @click="copyCode(methodCode(method), `auth-${mIndex}`)"
+              ></v-btn>
+              <pre class="overflow-x-auto"><code v-highlight class="language-bash">{{ methodCode(method) }}</code></pre>
+            </div>
+          </v-window-item>
+        </v-window>
+      </template>
+
+      <!-- Single-command step -->
+      <div v-else-if="step.code" class="code-block mb-3">
+        <v-btn
+          class="copy-btn"
+          :icon="copiedKey === `step-${index}` ? 'mdi-check' : 'mdi-content-copy'"
+          size="small"
+          variant="text"
+          :aria-label="`Copy ${step.title} command`"
+          @click="copyCode(getStepCode(step), `step-${index}`)"
+        ></v-btn>
+        <pre class="overflow-x-auto"><code v-highlight class="language-bash">{{ getStepCode(step) }}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDashboardUrl } from '@/composables/runtime';
+import { getApiBaseUrl } from '@/composables/api';
+
+export default {
+  name: 'GetStartedSteps',
+  data: () => ({
+    authMethod: 0,
+    copiedKey: null,
+
+    configSteps: [
+      {
+        title: "Install Updatecli",
+        description: "The snippet below uses Homebrew (macOS). <a class=\"text-info\" href=\"https://www.updatecli.io/docs/prologue/installation/\" target=\"_blank\" rel=\"noopener noreferrer\">See all install options</a> for Linux, Windows, and binaries.",
+        code: `brew tap updatecli/updatecli\nbrew install updatecli`
+      },
+      {
+        title: "Authenticate",
+        description: "Connect Updatecli to Udash. Pick the method that fits your environment — you only need one.",
+        methods: [
+          {
+            label: "Method A – Config file",
+            description: "Stores the token locally — convenient and secure for local development.",
+            code: (apiUrl, dashUrl) => `updatecli udash login --experimental --api-url "${apiUrl}" "${dashUrl}"`
+          },
+          {
+            label: "Method B – Environment variables",
+            description: "Better for CI/CD pipelines and containers.",
+            code: (apiUrl, dashUrl) => `export UPDATECLI_UDASH_API_URL="${apiUrl}"\nexport UPDATECLI_UDASH_URL="${dashUrl}"\nexport UPDATECLI_UDASH_ACCESS_TOKEN="your_token_here"  # Only if required by your Udash instance`
+          }
+        ]
+      },
+      {
+        title: "Run Updatecli",
+        description: "Execute Updatecli with the --experimental flag to send reports to Udash.",
+        code: `updatecli diff --experimental`
+      },
+    ]
+  }),
+  computed: {
+    apiBaseUrl() {
+      return getApiBaseUrl()
+    },
+    dashboardUrl() {
+      return getDashboardUrl()
+    }
+  },
+  methods: {
+    getStepCode(step) {
+      if (step.codeTemplate && typeof step.code === 'function') {
+        return step.code(this.apiBaseUrl, this.dashboardUrl)
+      }
+      return step.code || ''
+    },
+    methodCode(method) {
+      if (typeof method.code === 'function') {
+        return method.code(this.apiBaseUrl, this.dashboardUrl)
+      }
+      return method.code || ''
+    },
+    copyCode(text, key) {
+      if (!navigator.clipboard) {
+        return
+      }
+      navigator.clipboard.writeText(text).then(() => {
+        this.copiedKey = key
+        setTimeout(() => {
+          if (this.copiedKey === key) {
+            this.copiedKey = null
+          }
+        }, 1500)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Position the copy button in the top-right corner of each code block. */
+.code-block {
+  position: relative;
+  min-width: 0;
+}
+
+/* Guarantee long commands scroll inside the block instead of widening the
+   page on a narrow viewport (pairs with the pre's overflow-x-auto). */
+.code-block pre {
+  max-width: 100%;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+}
+</style>
diff --git a/src/components/HeadNavigation.vue b/src/components/HeadNavigation.vue
index dd87fd8b9..25cf3143d 100644
--- a/src/components/HeadNavigation.vue
+++ b/src/components/HeadNavigation.vue
@@ -1,94 +1,74 @@
 <template>
-    <v-system-bar color="background" window app>
+  <v-system-bar color="background" window class="mr-2">
 
-      <v-spacer></v-spacer>
-      <v-btn
-        v-if="!isAuthenticated && !isLoading && isAuthEnabled"
-        density="compact"
-        variant="flat"
-        @click.prevent="login"
-      >
-        Login
-      </v-btn>
+    <v-spacer></v-spacer>
+    <v-btn v-if="!isAuthenticated && !isLoading && isAuthEnabled" density="compact" variant="flat"
+      @click.prevent="login">
+      Login
+    </v-btn>
 
-      <v-menu
-        class="text-center"
-        v-if="isAuthenticated && isAuthEnabled"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn density="compact" icon="mdi-account" v-bind="props"></v-btn>
-        </template>
-        <v-list>
-          <v-list-item>
-            <img
-              :src="user.picture"
-              alt="User's profile picture"
-              class="nav-user-profile rounded-circle"
-              width="50"
-            />
-          </v-list-item>
-          <v-list-item
-            prepend-icon="mdi-account"
-            title="Profile"
-            to="/profile"
-            value="profile"
-          ></v-list-item>
-          <v-list-item
-            prepend-icon="mdi-logout"
-            title="Logout"
-            value="logout"
-            @click.prevent="logout"
-          ></v-list-item>
-        </v-list>
-      </v-menu>
-      <v-spacer></v-spacer>
-      <ThemeSwitcher/>
-    </v-system-bar>
+    <v-menu v-if="isAuthenticated && isAuthEnabled">
+      <template v-slot:activator="{ props }">
+        <v-btn density="compact" variant="flat" icon="mdi-account" aria-label="Account menu" v-bind="props"></v-btn>
+      </template>
+      <v-list>
+        <v-list-item>
+          <v-avatar size="50" color="surface-variant" class="d-block mx-auto">
+            <v-img v-if="user?.picture" :src="user.picture" alt="User's profile picture" cover></v-img>
+            <v-icon v-else icon="mdi-account"></v-icon>
+          </v-avatar>
+        </v-list-item>
+        <v-list-item prepend-icon="mdi-account" title="Profile" to="/profile" value="profile"></v-list-item>
+        <v-list-item prepend-icon="mdi-logout" title="Logout" value="logout" @click.prevent="logout"></v-list-item>
+      </v-list>
+    </v-menu>
+    <ThemeSwitcher />
+  </v-system-bar>
 </template>
 
 <script>
-    import { useAuth0 } from '@auth0/auth0-vue';
-    import { getAppBaseUrl, isAuthEnabled } from '@/composables/runtime';
-    import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
+import { useRoute } from 'vue-router';
+import { useAuth } from '@/composables/auth';
+import { isAuthEnabled } from '@/composables/runtime';
+import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
 
-    export default {
-      name: 'HeadNavigation',
-      components: {
-        ThemeSwitcher: ThemeSwitcher,
-      },
-      setup() {
-        if (isAuthEnabled) {
-          const auth0 = useAuth0();
+export default {
+  name: 'HeadNavigation',
+  components: {
+    ThemeSwitcher,
+  },
+  setup() {
+    // With auth disabled neither the login button nor the account menu renders,
+    // so there is no auth state for the template to read.
+    if (!isAuthEnabled) {
+      return { isAuthEnabled };
+    }
 
-          return {
-            isAuthEnabled: isAuthEnabled,
-            isAuthenticated: auth0.isAuthenticated,
-            isLoading: auth0.isLoading,
-            user: auth0.user,
-            login() {
-              auth0.loginWithRedirect();
-            },
-            logout() {
-              auth0.logout({
-                logoutParams: {
-                  returnTo: getAppBaseUrl()
-                }
-              });
-            }
-          }
-        }
+    const auth = useAuth();
+    const route = useRoute();
 
-        return {
-          isAuthEnabled: isAuthEnabled,
-          isAuthenticated: true,
-          isLoading: false,
-          user: {
-            picture: 'https://cdn.vuetifyjs.com/images'
-          },
+    return {
+      isAuthEnabled,
+      isAuthenticated: auth.isAuthenticated,
+      isLoading: auth.isLoading,
+      user: auth.user,
+      // Carry the current route through the identity provider round trip so the
+      // user lands back where they were; main.js replays it via consumeReturnTo().
+      async login() {
+        try {
+          await auth.login(route.fullPath);
+        } catch (err) {
+          console.error('Login redirect failed', err);
         }
-
       },
-      data: () => ({
-      }),
-    }
+      async logout() {
+        try {
+          await auth.logout();
+        } catch (err) {
+          console.error('Logout redirect failed', err);
+        }
+      },
+    };
+  },
+}
 </script>
diff --git a/src/components/SideNavigation.vue b/src/components/SideNavigation.vue
index 084e52ff3..ad2dafede 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -30,16 +30,17 @@
             prepend-icon="mdi-view-dashboard"
             title="Dashboard"
             to="/scm/dashboard"
-            value="scmSummary"></v-list-item>
+            value="scmDashboard"></v-list-item>
           <v-list-item
             prepend-icon="mdi-book-open-variant"
             v-if="isAuthenticated"
             title="Reports"
             to="/pipeline/reports"
             value="reports"></v-list-item>
+          <!-- Public route, so the link is shown to anonymous visitors too: it is the
+               only path to the project's licence and attribution details. -->
           <v-list-item
             prepend-icon="mdi-information"
-            v-if="isAuthenticated"
             title="About"
             to="/about"
             value="about"></v-list-item>
@@ -49,7 +50,7 @@
 </template>
 
 <script>
-    import { useAuth0 } from '@auth0/auth0-vue';
+    import { useAuth } from '@/composables/auth';
     import { isAuthEnabled } from '@/composables/runtime';
     import { getAppBaseUrl } from '@/composables/runtime';
 
@@ -57,10 +58,10 @@
         name: 'SideNavigation',
         setup() {
           if (isAuthEnabled) {
-            const auth0 = useAuth0();
+            const auth = useAuth();
             return {
-              isAuthenticated: auth0.isAuthenticated,
-              isLoading: auth0.isLoading,
+              isAuthenticated: auth.isAuthenticated,
+              isLoading: auth.isLoading,
             }
           }
 
diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
index 9cd3931af..7a21c213e 100644
--- a/src/components/ThemeSwitcher.vue
+++ b/src/components/ThemeSwitcher.vue
@@ -1,38 +1,20 @@
 <template>
   <v-menu>
     <template #activator="{ props }">
-      <v-btn
-        class="mt-5 mr-5"
-        icon="mdi-theme-light-dark"
-        v-bind="props"
-        variant="flat"
-        density="comfortable"
-      />
+      <v-btn icon="mdi-theme-light-dark" v-bind="props" variant="flat" density="compact" />
     </template>
 
     <v-list>
-      <v-list-item
-        title="Light"
-        prepend-icon="mdi-weather-sunny"
-        @click="setTheme('light')"
-      />
-      <v-list-item
-        title="Dark"
-        prepend-icon="mdi-weather-night"
-        @click="setTheme('dark')"
-      />
-      <v-list-item
-        title="System"
-        prepend-icon="mdi-monitor"
-        @click="setTheme('system')"
-      />
+      <v-list-item title="Light" prepend-icon="mdi-weather-sunny" @click="setTheme('light')" />
+      <v-list-item title="Dark" prepend-icon="mdi-weather-night" @click="setTheme('dark')" />
+      <v-list-item title="System" prepend-icon="mdi-monitor" @click="setTheme('system')" />
     </v-list>
   </v-menu>
 </template>
 
 <script setup>
 
-import { ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import { useTheme } from 'vuetify'
 import { getStorageKey } from '@/composables/runtime';
 
@@ -67,4 +49,21 @@ watch(mode, value => {
   immediate: true,
 })
 
-</script>
\ No newline at end of file
+// In 'system' mode the OS preference is only read when applyTheme runs, so without
+// this listener the theme would freeze at whatever the OS was set to when the
+// component mounted. It used to be re-read by accident, because every navigation
+// remounted the whole app shell; now that the shell lives in App.vue and mounts
+// once, tracking the change has to be explicit.
+function onSystemThemeChange() {
+  if (mode.value === 'system') {
+    applyTheme('system')
+  }
+}
+
+systemDark.addEventListener('change', onSystemThemeChange)
+
+onBeforeUnmount(() => {
+  systemDark.removeEventListener('change', onSystemThemeChange)
+})
+
+</script>
diff --git a/src/components/pipeline/activityChart.vue b/src/components/pipeline/activityChart.vue
new file mode 100644
index 000000000..e056bb2cc
--- /dev/null
+++ b/src/components/pipeline/activityChart.vue
@@ -0,0 +1,690 @@
+<template>
+  <!-- While the first request is in flight we only reserve the plot height, so the
+       host does not have to know anything about the loading state. -->
+  <div
+    v-if="loading && !summary"
+    class="d-flex align-center justify-center"
+    :style="{ height }"
+  >
+    <v-progress-circular indeterminate color="primary" size="32" />
+  </div>
+
+  <!-- Nothing is rendered when the request failed or returned no report at all:
+       a host page stays exactly as it would be without this component. -->
+  <div v-else-if="hasData" class="activity-chart" :class="{ 'activity-chart--refreshing': loading }">
+    <p v-if="showStats" class="text-body-2 text-medium-emphasis mb-3">
+      <span class="font-weight-medium text-high-emphasis">{{ formatCount(stats.total) }}</span>
+      {{ stats.total === 1 ? 'report' : 'reports' }}
+      &middot;
+      <span class="font-weight-medium text-high-emphasis">{{ stats.successRate }}%</span>
+      success
+      &middot;
+      <span class="font-weight-medium text-high-emphasis">{{ formatCount(stats.failures) }}</span>
+      {{ stats.failures === 1 ? 'failure' : 'failures' }}
+    </p>
+
+    <div v-if="canPlot" :style="{ height }">
+      <Bar :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+
+  <!-- A refused request is reported where the plot would be. Everything else still
+       renders nothing, so a host page stays exactly as it would be without this
+       component. -->
+  <p v-else-if="error" class="text-caption text-medium-emphasis mb-0">
+    {{ error }}
+  </p>
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+
+import {
+  Chart as ChartJS,
+  BarController,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+} from 'chart.js'
+
+import { apiFetch } from '@/composables/api';
+
+// Register chart parts and plugin
+ChartJS.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend)
+
+// RESULT_SERIES lists every result the summary endpoint reports, in stack order:
+// the first entry sits on the baseline. Errors go first because only the segment
+// anchored to the axis can be compared accurately from one bar to the next.
+//
+// It is used in both modes: "results" stacks one dataset per entry, and "volume"
+// still borrows its order and labels for the tooltip breakdown.
+//
+// The colours are the ones _summary.vue already uses for its doughnuts, so both
+// charts read as one system. They are used solid rather than at 0.7 alpha:
+// compositing them over the page background drops green and amber below the 3:1
+// contrast floor. Red and amber stay close under deuteranopia, which is why every
+// label carries its result glyph — identity is never left to colour alone.
+//
+// The success bucket is split in two. A pipeline which had nothing to change reports a
+// success even when the change it would have made is already waiting in a pull request
+// nobody merged, so lumping both together buries the ones needing a human under the ones
+// which are genuinely up to date. The split is drawn below plain success, next to the
+// other results worth acting on, in the blue forges use for an open pull request — a hue
+// none of the other segments occupies.
+const RESULT_SERIES = Object.freeze([
+    { key: '✗',       label: '✗ Error',   color: '#dc2626' }, // Red
+    { key: '⚠',       label: '⚠ Warning', color: '#f59e0b' }, // Amber
+    { key: '✔:open',  label: '✔ Waiting to be merged', color: '#3b82f6', result: '✔', openAction: true }, // Blue
+    { key: '✔',       label: '✔ Success', color: '#10b981', result: '✔', openAction: false }, // Green
+    { key: '-',       label: '- Skipped', color: '#6b7280' }, // Gray
+    { key: 'unknown', label: '? Unknown', color: '#8b5cf6' }, // Purple
+]);
+
+// seriesCount reads what a series contributes to a bucket. open_actions is a breakdown of
+// results rather than an addition to it, so the plain success segment is what is left once
+// the ones waiting on a pull request are taken out, and the two together still add up to
+// the success count the API reported.
+function seriesCount(entry, resultSeries) {
+    const total = entry?.results?.[resultSeries.result || resultSeries.key] || 0;
+
+    if (resultSeries.openAction === undefined) {
+        return total;
+    }
+
+    const open = entry?.open_actions?.[resultSeries.result] || 0;
+
+    return resultSeries.openAction ? open : Math.max(total - open, 0);
+}
+
+// VOLUME_COLOR is pinned rather than read from the theme. It is the light theme's
+// primary, and it is the one step that clears every check against *both* chart
+// surfaces; the dark theme's own primary (#39FFB6) passes contrast but is far too
+// light to carry a large filled mark without glowing.
+const VOLUME_COLOR = '#0E9F6E';
+
+// MIN_PLOT_BUCKETS is how many buckets a window must cover before the bars are worth
+// drawing. Below it there is no shape to read — two columns are a comparison, not a
+// trend — so the plot is dropped and the summary line carries the window on its own.
+const MIN_PLOT_BUCKETS = 3;
+
+// Thresholds for granularity: 'auto' picks the bucket size that keeps the number of
+// bars readable for the requested span. Two days is where hourly stops: it keeps the
+// filter's default window (the last day) at 24 bars, and 48 is still readable under
+// the axis thinning below.
+const AUTO_GRANULARITY_HOUR_MAX_DAYS = 2;
+const AUTO_GRANULARITY_DAY_MAX_DAYS = 60;
+const AUTO_GRANULARITY_WEEK_MAX_DAYS = 180;
+
+// GRANULARITY_LADDER runs from the finest bucket to the coarsest. It is both the order
+// 'auto' walks and the order the bucket guard falls back along.
+const GRANULARITY_LADDER = ['hour', 'day', 'week', 'month'];
+
+// GRANULARITY_DAYS is the length of a bucket in days, used to estimate how many buckets
+// a span produces. A month is counted as its shortest possible length so the estimate
+// errs high and never lets through a request the API would then reject.
+const GRANULARITY_DAYS = Object.freeze({
+    hour: 1 / 24,
+    day: 1,
+    week: 7,
+    month: 28,
+});
+
+// MAX_SUMMARY_BUCKETS mirrors the API's own maxSummaryBuckets. Exceeding it is a 400,
+// and with hourly buckets an ordinary filter selection can reach it — a 60 day window
+// is 1441 hours. Coarsening here rather than sending the request follows what
+// getMaxHistoryDays already does with the API's day ceiling.
+const MAX_SUMMARY_BUCKETS = 1000;
+
+// hexToRgba fades a theme colour so grid lines and ticks stay recessive against
+// the surface in both themes.
+function hexToRgba(hex, alpha) {
+    const value = String(hex || '').replace('#', '');
+    if (value.length !== 3 && value.length !== 6) {
+        return `rgba(128, 128, 128, ${alpha})`;
+    }
+
+    const full = value.length === 3
+        ? value.split('').map((c) => c + c).join('')
+        : value;
+
+    const int = parseInt(full, 16);
+
+    return `rgba(${(int >> 16) & 255}, ${(int >> 8) & 255}, ${int & 255}, ${alpha})`;
+}
+
+export default {
+    name: 'PipelineActivityChart',
+
+    components: {
+        Bar,
+    },
+
+    props: {
+        // mode picks what the bars encode:
+        //   volume  - one bar per bucket showing how many reports arrived. Answers
+        //             "are reports coming in?", and a bucket with none is a visible
+        //             hole in the series.
+        //   results - the same buckets stacked by Updatecli result. Use it where the
+        //             mix matters more than the volume, e.g. next to a filter.
+        mode: {
+            type: String,
+            default: 'volume',
+            validator: (value) => ['volume', 'results'].includes(value),
+        },
+
+        // days is the size of the window to summarize, today included. Ignored when
+        // hours is set, and by the backend when startTime and endTime are both provided.
+        days: {
+            type: Number,
+            default: 7,
+        },
+
+        // hours is the size of the window in hours, the current hour included. It takes
+        // precedence over days, which the API refuses to receive alongside it. Use it
+        // for windows shorter than a day rather than a fractional days value.
+        hours: {
+            type: Number,
+            default: 0,
+        },
+
+        // granularity is the size of the time buckets: hour, day, week or month, or
+        // "auto" to derive it from the requested span so a long window does not turn
+        // into hundreds of bars. Whatever is asked for, it is coarsened when the span
+        // would produce more buckets than the API returns.
+        granularity: {
+            type: String,
+            default: 'day',
+        },
+
+        // startTime and endTime must be provided together, formatted the way
+        // stepToISO in @/composables/date builds them.
+        startTime: {
+            type: String,
+            default: '',
+        },
+
+        endTime: {
+            type: String,
+            default: '',
+        },
+
+        scmid: {
+            type: String,
+            default: '',
+        },
+
+        labels: {
+            type: Object,
+            default: null,
+        },
+
+        // results restricts the summary to those pipeline results. In "results" mode
+        // the plot keeps stacking, with only the selected results left to stack.
+        results: {
+            type: Array,
+            default: null,
+        },
+
+        // openAction restricts the summary to the pipelines carrying an action left open,
+        // such as a pull request still waiting to be merged, when true, or to the ones
+        // without when false. Null leaves both in, which is what makes the success bucket
+        // splittable: the breakdown is reported whether or not it is filtered on.
+        openAction: {
+            type: Boolean,
+            default: null,
+        },
+
+        // showStats toggles the summary line above the plot. It is what makes a
+        // handful of failures readable when they are too few to occupy a pixel.
+        showStats: {
+            type: Boolean,
+            default: true,
+        },
+
+        // compact strips the axes and grid so the bars read as a sparkline. Use it
+        // where the chart is a detail inside a denser layout and the shape matters
+        // more than the exact values, which the tooltip still carries.
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+
+        height: {
+            type: String,
+            default: '240px',
+        },
+    },
+
+    emits: ['loaded'],
+
+    data: () => ({
+        summary: null,
+        loading: false,
+        error: null,
+        currentRequestId: 0,
+    }),
+
+    computed: {
+        entries() {
+            return this.summary?.data || [];
+        },
+
+        hasData() {
+            return this.entries.length > 0 && (this.summary?.total_count || 0) > 0;
+        },
+
+        // canPlot decides whether the bars are drawn. A narrow window still produces a
+        // useful summary line, so the stats stay and only the plot is dropped.
+        canPlot() {
+            return this.entries.length >= MIN_PLOT_BUCKETS;
+        },
+
+        // resolvedGranularity turns "auto" into a real bucket size, then holds whatever
+        // was asked for to the API's bucket ceiling.
+        resolvedGranularity() {
+            const spanDays = this.requestedSpanDays;
+
+            const preferred = this.granularity === 'auto'
+                ? this.autoGranularity(spanDays)
+                : this.granularity;
+
+            return this.withinBucketLimit(preferred, spanDays);
+        },
+
+        // requestedSpanDays is the width of the window in days. Explicit ranges yield a
+        // fractional count, which is what lets a six hour window resolve to hourly.
+        requestedSpanDays() {
+            if (!this.startTime || !this.endTime) {
+                return this.hours > 0 ? this.hours / 24 : this.days;
+            }
+
+            // The times arrive as "YYYY-MM-DD HH:mm:ss±HH:MM"; swapping the space for a
+            // T makes them valid ISO 8601, which Date parses consistently.
+            const start = new Date(this.startTime.replace(' ', 'T'));
+            const end = new Date(this.endTime.replace(' ', 'T'));
+
+            if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+                return null;
+            }
+
+            return Math.abs(end - start) / (1000 * 60 * 60 * 24);
+        },
+
+        // activeSeries drops the results that never occurred over the whole range.
+        // Most instances only ever emit ✔, ⚠ and ✗, and "unknown" only shows up for
+        // reports stored before the result column was backfilled — keeping those in
+        // the legend costs clarity and buys nothing. Colour is bound to the result
+        // key rather than to a position, so dropping one never repaints the others.
+        activeSeries() {
+            return RESULT_SERIES.filter(
+                (resultSeries) => this.entries.some((entry) => seriesCount(entry, resultSeries) > 0)
+            );
+        },
+
+        stats() {
+            const total = this.summary?.total_count || 0;
+
+            let success = 0;
+            let failures = 0;
+
+            this.entries.forEach((entry) => {
+                success += entry.results?.['✔'] || 0;
+                failures += entry.results?.['✗'] || 0;
+            });
+
+            return {
+                total,
+                failures,
+                successRate: total > 0 ? Math.round((success / total) * 100) : 0,
+            };
+        },
+
+        chartData() {
+            const labels = this.entries.map((entry) => this.formatBucketDate(entry.date));
+
+            if (this.mode === 'volume') {
+                return {
+                    labels,
+                    datasets: [{
+                        label: 'Reports',
+                        // entry.total comes from the API rather than being summed from
+                        // results, so the bar and the tooltip breakdown can never disagree.
+                        data: this.entries.map((entry) => entry.total || 0),
+                        backgroundColor: VOLUME_COLOR,
+                        borderRadius: { topLeft: 4, topRight: 4 },
+                        borderSkipped: false,
+                        // No surface gap here: nothing is stacked, and neighbouring bars
+                        // are already held apart by the bar/category spacing.
+                        barPercentage: 0.7,
+                        categoryPercentage: 0.8,
+                        maxBarThickness: 24,
+                    }],
+                };
+            }
+
+            const series = this.activeSeries;
+            const surface = this.themeColors.surface;
+
+            return {
+                labels,
+                datasets: series.map((resultSeries, index) => ({
+                    label: resultSeries.label,
+                    data: this.entries.map((entry) => seriesCount(entry, resultSeries)),
+                    backgroundColor: resultSeries.color,
+                    stack: 'results',
+                    // A 2px slice of the surface separates the segments instead of a
+                    // border drawn around them.
+                    borderColor: surface,
+                    borderWidth: { top: 2 },
+                    borderSkipped: false,
+                    // Only the top of the stack is rounded, so the bar reads as one
+                    // mark with a single rounded end rather than a pile of pills.
+                    borderRadius: index === series.length - 1
+                        ? { topLeft: 4, topRight: 4 }
+                        : 0,
+                    barPercentage: 0.7,
+                    categoryPercentage: 0.8,
+                    maxBarThickness: 24,
+                })),
+            };
+        },
+
+        chartOptions() {
+            const { grid, tick } = this.themeColors;
+            const stacked = this.mode === 'results';
+
+            return {
+                responsive: true,
+                maintainAspectRatio: false,
+                // A sparkline gives its whole height to the bars: with a strip this
+                // short an axis band would leave the marks a few pixels to live in.
+                layout: this.compact ? { padding: { top: 2, bottom: 2 } } : {},
+                scales: {
+                    x: {
+                        stacked,
+                        display: !this.compact,
+                        grid: { display: false },
+                        border: { color: grid },
+                        // A long window would otherwise collide or clip its date labels;
+                        // thinning them keeps the axis readable and the tooltip carries
+                        // the days that lose their tick.
+                        ticks: {
+                            color: tick,
+                            autoSkip: true,
+                            maxTicksLimit: 8,
+                            maxRotation: 0,
+                        },
+                    },
+                    y: {
+                        stacked,
+                        display: !this.compact,
+                        beginAtZero: true,
+                        grid: { color: grid },
+                        border: { display: false },
+                        ticks: { color: tick, precision: 0 },
+                    },
+                },
+                plugins: {
+                    legend: {
+                        // A single series needs no legend: the section heading already
+                        // names what is plotted, and a one-swatch box just restates it.
+                        display: stacked,
+                        position: 'bottom',
+                        labels: {
+                            color: tick,
+                            usePointStyle: true,
+                            boxWidth: 8,
+                            boxHeight: 8,
+                        },
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        callbacks: stacked ? {} : {
+                            label: (ctx) => {
+                                const count = ctx.parsed.y || 0;
+                                return ` ${count.toLocaleString()} ${count === 1 ? 'report' : 'reports'}`;
+                            },
+                            // Volume mode drops the per-result stack, so the breakdown
+                            // moves here — at no cost in chart chrome. Zero results are
+                            // skipped so a clean day shows one line rather than five.
+                            afterBody: (items) => {
+                                const entry = this.entries[items[0]?.dataIndex];
+                                if (!entry) return '';
+
+                                const parts = RESULT_SERIES
+                                    .filter((resultSeries) => seriesCount(entry, resultSeries) > 0)
+                                    .map((resultSeries) => `${resultSeries.key} ${seriesCount(entry, resultSeries)}`);
+
+                                return parts.length ? parts.join('  ') : '';
+                            },
+                        },
+                    },
+                },
+            };
+        },
+
+        // themeColors follows ThemeSwitcher rather than hard-coding light-mode chrome.
+        themeColors() {
+            const colors = this.$vuetify.theme.current.colors;
+            const ink = colors['on-background'] || colors['on-surface'] || '#000000';
+
+            return {
+                surface: colors.background,
+                grid: hexToRgba(ink, 0.12),
+                tick: hexToRgba(ink, 0.6),
+            };
+        },
+    },
+
+    watch: {
+        days: 'fetchSummary',
+        hours: 'fetchSummary',
+        granularity: 'fetchSummary',
+        startTime: 'fetchSummary',
+        endTime: 'fetchSummary',
+        scmid: 'fetchSummary',
+        labels: {
+            handler: 'fetchSummary',
+            deep: true,
+        },
+        results: {
+            handler: 'fetchSummary',
+            deep: true,
+        },
+        openAction: 'fetchSummary',
+    },
+
+    mounted() {
+        this.fetchSummary();
+    },
+
+    methods: {
+        formatCount(value) {
+            return Number(value || 0).toLocaleString();
+        },
+
+        // autoGranularity picks the bucket size that keeps a span readable. A null span
+        // means the window is not known here, so it keeps the previous default.
+        autoGranularity(spanDays) {
+            if (spanDays === null) {
+                return 'day';
+            }
+
+            if (spanDays <= AUTO_GRANULARITY_HOUR_MAX_DAYS) {
+                return 'hour';
+            }
+
+            if (spanDays <= AUTO_GRANULARITY_DAY_MAX_DAYS) {
+                return 'day';
+            }
+
+            return spanDays <= AUTO_GRANULARITY_WEEK_MAX_DAYS ? 'week' : 'month';
+        },
+
+        // withinBucketLimit steps a granularity coarser until the span fits the number of
+        // buckets the API is willing to return. An unknown value is left alone so it
+        // still reaches the API, which names it in its error.
+        withinBucketLimit(granularity, spanDays) {
+            let index = GRANULARITY_LADDER.indexOf(granularity);
+
+            if (index < 0 || spanDays === null) {
+                return granularity;
+            }
+
+            // The API walks its buckets inclusively, so a span covers one more bucket
+            // than it spans bucket lengths.
+            while (index < GRANULARITY_LADDER.length - 1
+                && (spanDays / GRANULARITY_DAYS[GRANULARITY_LADDER[index]]) + 1 > MAX_SUMMARY_BUCKETS) {
+                index += 1;
+            }
+
+            return GRANULARITY_LADDER[index];
+        },
+
+        // formatBucketDate turns a bucket start into an axis label. Every bucket arrives
+        // as RFC3339 in UTC ("2026-08-04T13:00:00Z") whatever the granularity, because
+        // the time of day is what keeps hourly buckets distinct from one another.
+        formatBucketDate(date) {
+            // The response echoes the granularity it actually used, which is the
+            // authoritative answer when "auto" was requested.
+            const granularity = this.summary?.granularity || this.resolvedGranularity;
+
+            const parsed = new Date(date);
+            if (Number.isNaN(parsed.getTime())) {
+                return date;
+            }
+
+            // An hour bucket marks a moment rather than a calendar unit, so it reads in
+            // the viewer's own zone: activity "at 15:00" should mean their 15:00. Zones
+            // offset by a fraction of an hour land on :30 or :45, which is where the
+            // bucket really falls for them and not a rounding error to correct.
+            if (granularity === 'hour') {
+                return parsed.toLocaleTimeString('en-US', {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                });
+            }
+
+            // Days, weeks and months are calendar units the API already resolved in UTC.
+            // Rendering them in the viewer's zone would move every label to the previous
+            // day for anyone west of UTC.
+            if (granularity === 'month') {
+                return parsed.toLocaleDateString('en-US', {
+                    month: 'short',
+                    year: 'numeric',
+                    timeZone: 'UTC',
+                });
+            }
+
+            const day = parsed.toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                timeZone: 'UTC',
+            });
+
+            return granularity === 'week' ? `Week of ${day}` : day;
+        },
+
+        buildRequestBody() {
+            const body = {
+                metric: 'result',
+                granularity: this.resolvedGranularity,
+            };
+
+            // Exactly one window travels with the request: the backend rejects a
+            // half-specified range, and rejects days and hours arriving together.
+            if (this.startTime && this.endTime) {
+                body.start_time = this.startTime;
+                body.end_time = this.endTime;
+            } else if (this.hours > 0) {
+                body.hours = this.hours;
+            } else {
+                body.days = this.days;
+            }
+
+            if (this.scmid) {
+                body.scmid = this.scmid;
+            }
+
+            if (this.labels && typeof this.labels === 'object' && !Array.isArray(this.labels)) {
+                const labels = {};
+                Object.entries(this.labels).forEach(([key, value]) => {
+                    if (typeof key === 'string' && value !== undefined && value !== null) {
+                        labels[key] = String(value);
+                    }
+                });
+
+                if (Object.keys(labels).length > 0) {
+                    body.labels = labels;
+                }
+            }
+
+            if (Array.isArray(this.results) && this.results.length > 0) {
+                body.results = this.results;
+            }
+
+            // Tri-state: an unset filter has to stay absent from the body rather than be
+            // sent as false, which would drop every pipeline with an open pull request.
+            if (typeof this.openAction === 'boolean') {
+                body.open_action = this.openAction;
+            }
+
+            return body;
+        },
+
+        async fetchSummary() {
+            this.currentRequestId += 1;
+            const requestId = this.currentRequestId;
+
+            this.loading = true;
+            this.error = null;
+
+            try {
+                // apiFetch surfaces the sentence the API puts in the body of a rejection.
+                // Now that a window and a granularity can be refused together, that
+                // sentence is the only thing telling the reader why the plot is missing.
+                const responseData = await apiFetch('/pipeline/reports/summary', {
+                    method: 'POST',
+                    body: this.buildRequestBody(),
+                });
+
+                // Discard stale results if the props changed while fetching
+                if (requestId !== this.currentRequestId) return;
+
+                this.summary = responseData;
+                this.$emit('loaded', this.hasData ? responseData : null);
+            } catch (error) {
+                if (requestId !== this.currentRequestId) return;
+
+                // A summary is still supporting information, so the host keeps rendering
+                // and is told there is no data. The reason is shown in place of the plot
+                // rather than only logged: a blank strip reads as "no activity", which is
+                // the wrong conclusion when the window was simply refused.
+                console.error('fetching pipeline reports summary:', error);
+                this.error = error.message || 'summary unavailable';
+                this.summary = null;
+                this.$emit('loaded', null);
+            } finally {
+                if (requestId === this.currentRequestId) {
+                    this.loading = false;
+                }
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+/* On a refetch the previous chart is held at reduced opacity rather than being
+   replaced by a spinner, so the surrounding layout never jumps. */
+.activity-chart--refreshing {
+    opacity: 0.5;
+}
+
+.activity-chart {
+    transition: opacity 0.2s ease;
+}
+</style>
diff --git a/src/components/pipeline/configs/_linkedReports.vue b/src/components/pipeline/configs/_linkedReports.vue
index 419fe7e0e..14361c382 100644
--- a/src/components/pipeline/configs/_linkedReports.vue
+++ b/src/components/pipeline/configs/_linkedReports.vue
@@ -94,8 +94,7 @@ import { toYAML } from '@/composables/yaml'
 import GitRepositorySection from './GitRepositorySection.vue'
 import ReportCard from './ReportCard.vue'
 
-import { getApiBaseURL } from '@/composables/api';
-import { isAuthEnabled } from '@/composables/runtime';
+import { apiFetch } from '@/composables/api';
 import { getStartTimeFromStorage, getEndTimeFromStorage } from '@/composables/date';
 
 export default {
@@ -334,28 +333,11 @@ export default {
       this.$emit('loaded', false)
 
       try {
-        const queryURL = `${getApiBaseURL()}/pipeline/config/${this.configType}s/search`;
-
-        const jsonReqBody = { id: this.configID }
-        const headers = { 'Content-Type': 'application/json' }
-
-        if (isAuthEnabled) {
-          const token = await this.$auth0.getAccessTokenSilently()
-          headers.Authorization = `Bearer ${token}`
-        }
-
-        const response = await fetch(queryURL, {
-          body: JSON.stringify(jsonReqBody),
+        const data = await apiFetch(`/pipeline/config/${this.configType}s/search`, {
           method: 'POST',
-          headers
+          body: { id: this.configID }
         })
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`)
-        }
-
-        const data = await response.json()
-
         if (data.configs?.length > 0) {
           this.configData = data.configs[0]
         } else {
@@ -375,8 +357,6 @@ export default {
       }
 
       try {
-        const queryURL = `${getApiBaseURL()}/pipeline/reports/search`
-
         const jsonReqBody = {
           latest: true
         }
@@ -402,23 +382,11 @@ export default {
 
         jsonReqBody[field] = this.configID
 
-        const headers = { 'Content-Type': 'application/json' }
-        if (isAuthEnabled) {
-          const token = await this.$auth0.getAccessTokenSilently()
-          headers.Authorization = `Bearer ${token}`
-        }
-
-        const response = await fetch(queryURL, {
+        const data = await apiFetch('/pipeline/reports/search', {
           method: 'POST',
-          body: JSON.stringify(jsonReqBody),
-          headers
+          body: jsonReqBody
         })
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`)
-        }
-
-        const data = await response.json()
         this.reportsData = data.data || []
 
         // Remove current pipeline ID from reportsData if pipelineUUID prop is provided
diff --git a/src/components/pipeline/report.vue b/src/components/pipeline/report.vue
index 08efbe42c..645f21056 100644
--- a/src/components/pipeline/report.vue
+++ b/src/components/pipeline/report.vue
@@ -1,317 +1,369 @@
 <template>
+  <!-- The report is on its way. -->
   <v-container
-    v-if="pipeline"
+    v-if="isLoading"
+    class="d-flex justify-center align-center loading-container"
   >
-      <v-overlay
-      :model-value="isLoading"
-      class="align-center justify-center"
-      :disabled="true"
-      :eager="true"
-      :no-click-animation="true"
-      :persistent="true"
-      :opacity="0"
-    >
-      <v-progress-circular
-        color="black"
-        indeterminate
-        size="64"
-      ></v-progress-circular>
-    </v-overlay>
-
-    <v-row>
-      <v-col
-        class="text-right"
-        cols="auto"
-        lg="8"
-        md="8"
-        sm="12"
-      >
-        <h1>
-          Report <v-icon icon="mdi-book-open-variant"></v-icon>
-        </h1>
-      </v-col>
-      <v-col class="text-center">
+    <v-progress-circular
+      color="primary"
+      indeterminate
+      size="64"
+    ></v-progress-circular>
+  </v-container>
 
+  <!-- The request never came back with a report. Saying so beats an empty page: the
+       reader otherwise has no way to tell a broken API from a report with no content. -->
+  <v-container v-else-if="loadError">
+    <v-card variant="outlined">
+      <v-card-title>
         <v-icon
-          :icon="getStatusIcon(pipeline.Pipeline.Result)"
-          :color="getStatusColor(pipeline.Pipeline.Result)"
-          size="80"
-          ></v-icon>
-      </v-col>
-    </v-row>
+          icon="mdi-alert-circle"
+          color="error"
+          class="mr-2"
+        ></v-icon>
+        Could not load this report
+      </v-card-title>
+
+      <v-card-text>
+        <p>{{ loadError }}</p>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn
+          variant="flat"
+          prepend-icon="mdi-refresh"
+          @click="getPipelineReportData"
+        >
+          Retry
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </v-container>
-  <v-container
-    v-if="pipeline"
-  >
-    <!-- Show metadata -->
-    <v-row>
-      <v-col>
-        <v-card
+
+  <!-- The API answered fine, it just has nothing under that id. -->
+  <v-container v-else-if="!pipeline">
+    <v-card variant="outlined">
+      <v-card-title>
+        <v-icon
+          icon="mdi-help-circle"
+          color="grey"
+          class="mr-2"
+        ></v-icon>
+        Report not found
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          No report exists with the id <code>{{ pipelineUUID }}</code>.
+          It may have been removed since this link was created.
+        </p>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn
           variant="flat"
+          prepend-icon="mdi-arrow-left"
+          to="/pipeline/reports"
         >
-          <v-card-text>
-            <v-table density="compact">
-              <thead>
-                <tr>
-                  <th>Status</th>
-                  <th>Executed</th>
-                  <th>Pipeline</th>
-                  <th>CI</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    {{ getStatusText(pipeline.Pipeline.Result) }}
-                  </td>
-                  <td>{{ formatDate(pipeline.Updated_at) }}</td>
-                  <td>{{ pipeline.Pipeline.Name }}</td>
-                  <td>
-                    <template v-if="pipelinePrimaryURL">
-                      <v-btn
-                        :href="pipelinePrimaryURL"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        size="small"
-                        variant="outlined"
-                        prepend-icon="mdi-open-in-new"
+          Back to reports
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+
+  <template v-else>
+    <v-container>
+      <v-row>
+        <v-col
+          class="text-right"
+          cols="auto"
+          lg="8"
+          md="8"
+          sm="12"
+        >
+          <h1>
+            Report <v-icon icon="mdi-book-open-variant"></v-icon>
+          </h1>
+        </v-col>
+        <v-col class="text-center">
+
+          <v-icon
+            :icon="getStatusIcon(pipeline.Pipeline.Result)"
+            :color="getStatusColor(pipeline.Pipeline.Result)"
+            size="80"
+            ></v-icon>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container>
+      <!-- Show metadata -->
+      <v-row>
+        <v-col>
+          <v-card
+            variant="flat"
+          >
+            <v-card-text>
+              <v-table density="compact">
+                <thead>
+                  <tr>
+                    <th>Status</th>
+                    <th>Executed</th>
+                    <th>Pipeline</th>
+                    <th>CI</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      {{ getStatusText(pipeline.Pipeline.Result) }}
+                    </td>
+                    <td>{{ formatDate(pipeline.Updated_at) }}</td>
+                    <td>{{ pipeline.Pipeline.Name }}</td>
+                    <td>
+                      <template v-if="pipelinePrimaryURL">
+                        <v-btn
+                          :href="pipelinePrimaryURL"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          size="small"
+                          variant="outlined"
+                          prepend-icon="mdi-open-in-new"
+                        >
+                          View Job
+                        </v-btn>
+                      </template>
+                      <span
+                        v-else
+                        class="text-grey"
                       >
-                        View Job
-                      </v-btn>
-                    </template>
-                    <span
-                      v-else
-                      class="text-grey"
-                    >
-                      N/A
-                    </span>
-                    <span
-                      v-if="hasMultiplePipelineURLs"
-                      class="text-warning text-caption ci-warning"
+                        N/A
+                      </span>
+                      <span
+                        v-if="hasMultiplePipelineURLs"
+                        class="text-warning text-caption ci-warning"
+                      >
+                        Multiple CI URLs detected. Using the first one.
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </v-table>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <!-- Show labels -->
+      <v-row v-if="sortedLabels.length > 0">
+        <v-col>
+          <v-card variant="flat">
+            <v-card-text class="labels-card">
+              <div class="labels-header">Labels</div>
+              <div class="labels-list">
+                <div
+                  v-for="([key, value]) in sortedLabels"
+                  :key="key"
+                  class="label-row"
+                >
+                  <div class="label-key-wrap">
+                    <v-icon
+                      size="18"
+                      color="grey-darken-1"
+                      class="label-icon"
                     >
-                      Multiple CI URLs detected. Using the first one.
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </v-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- Show labels -->
-    <v-row v-if="pipeline.Pipeline.Labels && Object.keys(pipeline.Pipeline.Labels).length > 0">
-      <v-col>
-        <v-card variant="flat">
-          <v-card-text class="labels-card">
-            <div class="labels-header">Labels</div>
-            <div class="labels-list">
-              <div
-                v-for="([key, value]) in sortedLabels"
-                :key="key"
-                class="label-row"
-              >
-                <div class="label-key-wrap">
-                  <v-icon
-                    size="18"
-                    color="grey-darken-1"
-                    class="label-icon"
-                  >
-                    mdi-label-outline
-                  </v-icon>
-                  <span class="label-key">{{ key }}</span>
+                      mdi-label-outline
+                    </v-icon>
+                    <span class="label-key">{{ key }}</span>
+                  </div>
+                  <div class="label-value">{{ value }}</div>
                 </div>
-                <div class="label-value">{{ value }}</div>
               </div>
-            </div>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-    <v-row v-else>
-      <v-col>
-        <v-card variant="flat">
-          <v-card-text>
-            <p class="text-grey">No labels</p>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- Show link to latest report -->
-     <v-row
-        v-if="latestReportByID"
-     >
-      <v-col>
-        <v-card
-          variant="outlined"
-          v-show="!isLatestReport()"
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+      <v-row v-else>
+        <v-col>
+          <v-card variant="flat">
+            <v-card-text>
+              <p class="text-grey">No labels</p>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <!-- Show link to latest report -->
+       <v-row
+          v-if="latestReportByID && !isLatestReport"
+       >
+        <v-col>
+          <v-card
+            variant="outlined"
+          >
+            <v-card-title>
+              Newer report detected
+            </v-card-title>
+
+            <v-card-text>
+              <p>
+                Updated at {{ formatDate(latestReportByID.Updated_at) }}
+              </p>
+                <v-icon :icon="getStatusIcon(latestReportByID.Pipeline.Result)" :color="getStatusColor(latestReportByID.Pipeline.Result)"></v-icon>  {{ latestReportByID.Pipeline.Name }}
+                <v-btn
+                  icon="mdi-arrow-right-circle"
+                  variant="flat"
+                  :to=getPipelineReportLink(latestReportByID.ID)>
+                </v-btn>
+            <v-divider></v-divider>
+            </v-card-text>
+          </v-card>
+        </v-col>
+       </v-row>
+
+      <v-row>
+        <v-col
+          cols="auto"
+          lg="12"
+          md="12"
+          sm="12"
         >
-          <v-card-title>
-            Newer report detected
-          </v-card-title>
-
-          <v-card-text>
-            <p>
-              Updated at {{ latestReportByID.Updated_at }}
-            </p>
-              <v-icon :icon="getStatusIcon(latestReportByID.Pipeline.Result)" :color="getStatusColor(latestReportByID.Pipeline.Result)"></v-icon>  {{ latestReportByID.Pipeline.Name }}
+
+          <v-container
+            class="d-flex justify-center align-center"
+          >
+            <v-btn-toggle
+              v-model="resourceStage"
+              mandatory
+            >
               <v-btn
-                icon="mdi-arrow-right-circle"
-                variant="flat"
-                :to=getPipelineReportLink(latestReportByID.ID)>
-              </v-btn>
-          <v-divider></v-divider>
-          </v-card-text>
-        </v-card>
-      </v-col>
-     </v-row>
-
-    <v-row>
-      <v-col
-        cols="auto"
-        lg="12"
-        md="12"
-        sm="12"
-      >
-
-        <v-container
-          class="d-flex justify-center align-center"
-        >
-          <v-btn-toggle v-model="resourceStage">
-            <v-btn
-              v-if="isSources()"
-              variant="text"
-              value="source"
-              :class="{ 'v-btn--active': resourceStage === 'source' }"
-            >Source</v-btn>
-            <v-btn
-              v-if="isConditions()"
-              variant="text"
-              value="condition"
-              :class="{ 'v-btn--active': resourceStage === 'condition' }"
-            >Condition</v-btn>
-            <v-btn
-              v-if="isTargets()"
-              variant="text"
-              value="target"
-              :class="{ 'v-btn--active': resourceStage === 'target' }"
-            >Target</v-btn>
-            <v-btn
-              v-if="isActions()"
-              variant="text"
-              value="action"
-              :class="{ 'v-btn--active': resourceStage === 'action' }"
-            >Action</v-btn>
-          </v-btn-toggle>
-        </v-container>
-
-        <!-- Show Sources -->
-        <v-card
-          variant="outlined"
-          v-if="isSources() && resourceStage === 'source'"
-        >
-          <v-card-text>
-              <v-card
-                variant="flat"
-                v-for="(data, key) in pipeline.Pipeline.Sources" :key="key"
-              >
-                <SourceComponent
-                  :id="key"
-                  :data="data"
-                ></SourceComponent>
-                <LinkedReports
-                  :configID="getResourceUUID('source', key)"
-                  configType="source"
-                  :pipelineUUID="pipelineUUID"
-                ></LinkedReports>
-              </v-card>
-          </v-card-text>
-        </v-card>
-
-        <!-- Show Conditions -->
-        <v-card
-          variant="outlined"
-          v-if="isConditions() && resourceStage === 'condition'"
-        >
-          <v-card-text>
-              <v-card
-                variant="flat"
-                v-for="(data, key) in pipeline.Pipeline.Conditions" :key="key"
-              >
-                <ConditionComponent
-                  :id="key"
-                  :data="data"
-                ></ConditionComponent>
-                <LinkedReports
-                  :configID="getResourceUUID('condition', key)"
-                  configType="condition"
-                  :pipelineUUID="pipelineUUID"
-                ></LinkedReports>
-              </v-card>
-          </v-card-text>
-        </v-card>
-
-        <!-- Show Targets -->
-        <v-card
-          variant="outlined"
-          v-if="isTargets() && resourceStage === 'target'"
-        >
-          <v-card-text>
-              <v-card
-                v-for="(data, key) in pipeline.Pipeline.Targets" :key="key"
-                variant="flat"
-              >
-                <TargetComponent
-                  :id="key"
-                  :data="data"
-                ></TargetComponent>
-                <LinkedReports
-                  :configID="getResourceUUID('target', key)"
-                  configType="target"
-                  :pipelineUUID="pipelineUUID"
-                ></LinkedReports>
-              </v-card>
-          </v-card-text>
-        </v-card>
-        <!-- Show Actions -->
-        <v-card
-          variant="outlined"
-          v-if="isActions() && resourceStage === 'action'"
-        >
-          <v-card-text>
-              <v-card
-                variant="flat"
-                v-for="(data, key) in pipeline.Pipeline.Actions" :key="key"
-              >
-                <ActionComponent
-                  :id="key"
-                  :data="data"
-                ></ActionComponent>
-              </v-card>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col
-        cols="auto"
-        lg="12"
-        md="12"
-        sm="12"
-        class="text-center"
-      >
+                v-if="hasSources"
+                variant="text"
+                value="source"
+              >Source</v-btn>
+              <v-btn
+                v-if="hasConditions"
+                variant="text"
+                value="condition"
+              >Condition</v-btn>
+              <v-btn
+                v-if="hasTargets"
+                variant="text"
+                value="target"
+              >Target</v-btn>
+              <v-btn
+                v-if="hasActions"
+                variant="text"
+                value="action"
+              >Action</v-btn>
+            </v-btn-toggle>
+          </v-container>
+
+          <!-- Show Sources -->
           <v-card
-            variant="flat"
-            v-if="pipeline.Pipeline.Graph"
+            variant="outlined"
+            v-if="hasSources && resourceStage === 'source'"
           >
-              <PipelineGraphComponent :data="pipeline.Pipeline.Graph" />
+            <v-card-text>
+                <v-card
+                  variant="flat"
+                  v-for="(data, key) in pipeline.Pipeline.Sources" :key="key"
+                >
+                  <SourceComponent
+                    :id="key"
+                    :data="data"
+                  ></SourceComponent>
+                  <LinkedReports
+                    :configID="getResourceUUID('source', key)"
+                    configType="source"
+                    :pipelineUUID="pipelineUUID"
+                  ></LinkedReports>
+                </v-card>
+            </v-card-text>
           </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+
+          <!-- Show Conditions -->
+          <v-card
+            variant="outlined"
+            v-if="hasConditions && resourceStage === 'condition'"
+          >
+            <v-card-text>
+                <v-card
+                  variant="flat"
+                  v-for="(data, key) in pipeline.Pipeline.Conditions" :key="key"
+                >
+                  <ConditionComponent
+                    :id="key"
+                    :data="data"
+                  ></ConditionComponent>
+                  <LinkedReports
+                    :configID="getResourceUUID('condition', key)"
+                    configType="condition"
+                    :pipelineUUID="pipelineUUID"
+                  ></LinkedReports>
+                </v-card>
+            </v-card-text>
+          </v-card>
+
+          <!-- Show Targets -->
+          <v-card
+            variant="outlined"
+            v-if="hasTargets && resourceStage === 'target'"
+          >
+            <v-card-text>
+                <v-card
+                  v-for="(data, key) in pipeline.Pipeline.Targets" :key="key"
+                  variant="flat"
+                >
+                  <TargetComponent
+                    :id="key"
+                    :data="data"
+                  ></TargetComponent>
+                  <LinkedReports
+                    :configID="getResourceUUID('target', key)"
+                    configType="target"
+                    :pipelineUUID="pipelineUUID"
+                  ></LinkedReports>
+                </v-card>
+            </v-card-text>
+          </v-card>
+          <!-- Show Actions -->
+          <v-card
+            variant="outlined"
+            v-if="hasActions && resourceStage === 'action'"
+          >
+            <v-card-text>
+                <v-card
+                  variant="flat"
+                  v-for="(data, key) in pipeline.Pipeline.Actions" :key="key"
+                >
+                  <ActionComponent
+                    :id="key"
+                    :data="data"
+                  ></ActionComponent>
+                </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col
+          cols="auto"
+          lg="12"
+          md="12"
+          sm="12"
+          class="text-center"
+        >
+            <v-card
+              variant="flat"
+              v-if="pipeline.Pipeline.Graph"
+            >
+                <PipelineGraphComponent :data="pipeline.Pipeline.Graph" />
+            </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </template>
 </template>
 
 <script>
@@ -325,11 +377,19 @@ import LinkedReports from './configs/_linkedReports.vue';
 
 import { getStatusColor, getStatusIcon, getStatusText } from '@/composables/status';
 import { toLocalDate } from '@/composables/date';
-import { getApiBaseURL } from '@/composables/api';
-import { isAuthEnabled } from '@/composables/runtime';
+import { apiFetch } from '@/composables/api';
+
+// CONFIG_ID_KEYS names, per resource stage, the field of the report holding the mapping
+// from a config UUID to the resource it belongs to. Actions are absent on purpose: they
+// carry no config of their own to link back to.
+const CONFIG_ID_KEYS = {
+  source: 'SourceConfigIDs',
+  condition: 'ConditionConfigIDs',
+  target: 'TargetConfigIDs',
+};
 
 export default {
-  name: 'PipelineReportView',
+  name: 'PipelineReport',
 
   components: {
     ActionComponent,
@@ -342,20 +402,16 @@ export default {
 
   data: () => ({
     isLoading: true,
+    loadError: '',
     resourceStage: "source",
     pipelineUUID: "",
-    pipeline: {
-      "Pipeline": {}
-    },
-    latestReportByID: {
-      "Pipeline": {}
-    },
+    // Both start empty rather than holding a placeholder shape: the template tells the
+    // three states apart by them, and a placeholder would render a report header with an
+    // unknown status before anything has been fetched.
+    pipeline: null,
+    latestReportByID: null,
   }),
 
-  beforeUnmount() {
-    this.cancelAutoUpdate();
-  },
-
   computed: {
     pipelineURLs() {
 
@@ -396,47 +452,54 @@ export default {
 
       return Object.entries(labels).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
     },
-  },
 
-  methods: {
-    getResourceUUID(type, id) {
-      if (type === "source") {
-        if (this.pipeline.SourceConfigIDs === undefined) {
-          return ""
-        }
+    hasSources() {
+      return Object.keys(this.pipeline?.Pipeline?.Sources || {}).length > 0
+    },
 
-        for (const [uuid, name] of Object.entries(this.pipeline.SourceConfigIDs)) {
-          if (name === id) {
-            return uuid
-          }
-        }
-      }
+    hasConditions() {
+      return Object.keys(this.pipeline?.Pipeline?.Conditions || {}).length > 0
+    },
 
-      if (type === "condition") {
-        if (this.pipeline.ConditionConfigIDs === undefined) {
-          return ""
-        }
+    hasTargets() {
+      return Object.keys(this.pipeline?.Pipeline?.Targets || {}).length > 0
+    },
 
-        for (const [uuid, name] of Object.entries(this.pipeline.ConditionConfigIDs)) {
-          if (name === id) {
-            return uuid
-          }
-        }
+    // hasActions asks for an actionUrl rather than merely for an action: an action with
+    // nowhere to link to has nothing to show on its tab.
+    hasActions() {
+      const actions = this.pipeline?.Pipeline?.Actions
+      if (!actions) {
+        return false
       }
 
-      if (type === "target") {
-        if (this.pipeline.TargetConfigIDs === undefined) {
-          return ""
-        }
+      return Object.values(actions).some((action) => action?.actionUrl !== undefined)
+    },
 
-        for (const [uuid, name] of Object.entries(this.pipeline.TargetConfigIDs)) {
-          if (name === id) {
-            return uuid
-          }
-        }
+    isLatestReport() {
+      if (!this.latestReportByID || !this.pipeline) {
+        return false
       }
 
-      return ``
+      return this.latestReportByID.ID === this.pipeline.ID
+    },
+
+    // resourceUUIDsByName indexes each stage's config UUIDs by resource name, so the
+    // template can look one up per resource instead of scanning the whole mapping.
+    resourceUUIDsByName() {
+      const index = (configIDs) => Object.fromEntries(
+        Object.entries(configIDs || {}).map(([uuid, name]) => [name, uuid])
+      )
+
+      return Object.fromEntries(
+        Object.entries(CONFIG_ID_KEYS).map(([stage, key]) => [stage, index(this.pipeline?.[key])])
+      )
+    },
+  },
+
+  methods: {
+    getResourceUUID(type, id) {
+      return this.resourceUUIDsByName[type]?.[id] || ''
     },
 
     formatDate(rawDate) {
@@ -452,64 +515,23 @@ export default {
     },
 
     getDefaultStage(){
-      if (this.isActions()) {
+      if (this.hasActions) {
         return "action"
-      } else if (this.isSources()) {
+      } else if (this.hasSources) {
         return "source"
-      } else if (this.isConditions()) {
+      } else if (this.hasConditions) {
         return "condition"
-      } else if (this.isTargets()) {
+      } else if (this.hasTargets) {
         return "target"
       }
 
       return "source";
     },
 
-    isActions(){
-      for (const action in this.pipeline.Pipeline.Actions) {
-        if (this.pipeline.Pipeline.Actions[action].actionUrl !== undefined){
-          return true
-        }
-      }
-      return false;
-    },
-
-    isLatestReport(){
-      if (this.latestReportByID !== null) {
-        return this.latestReportByID.ID == this.pipeline.ID
-      }
-      return ""
-    },
-
-    isConditions(){
-      for (const condition in this.pipeline.Pipeline.Conditions) {
-        return true
-      }
-      return false;
-    },
-
-    isSources(){
-      for (const source in this.pipeline.Pipeline.Sources) {
-        return true
-      }
-      return false;
-    },
-
-    isTargets(){
-      for (const target in this.pipeline.Pipeline.Targets) {
-        return true
-      }
-      return false;
-    },
-
     getPipelineReportLink: function(id){
       return "/pipeline/reports/" + id
     },
 
-    cancelAutoUpdate() {
-      clearInterval(this.timer);
-    },
-
     getStatusColor: function(input){
       return getStatusColor(input);
     },
@@ -523,72 +545,54 @@ export default {
     },
 
     async getPipelineReportData() {
-      if (isAuthEnabled) {
-        const token = await this.$auth0.getAccessTokenSilently();
-        const response = await fetch(`${getApiBaseURL()}/pipeline/reports/` + this.$route.params.id, {
-            headers: {
-            Authorization: `Bearer ${token}`
-          }
-        });
-        const data = await response.json();
-
-        this.pipeline = data.data;
-        this.isLoading = false;
-
-        if (this.pipeline !== null) {
-          this.latestReportByID = data.latestReportByID
-          this.isLatestReport()
-        }
-      } else {
-        const response = await fetch(`${getApiBaseURL()}/pipeline/reports/` + this.$route.params.id);
-        const data = await response.json();
+      this.isLoading = true
+      this.loadError = ''
 
-        this.pipeline = data.data;
-        this.isLoading = false;
-
-        if (this.pipeline !== null) {
-          this.latestReportByID = data.latestReportByID
-          this.isLatestReport()
-        }
+      try {
+        const data = await apiFetch(`/pipeline/reports/${this.pipelineUUID}`)
+
+        this.pipeline = data.data ?? null
+        this.latestReportByID = data.latestReportByID ?? null
+        this.resourceStage = this.getDefaultStage()
+      } catch (error) {
+        console.error('Error fetching pipeline report:', error)
+        this.pipeline = null
+        this.latestReportByID = null
+        // A 404 is how the API says the id has nothing behind it, which is not a failure
+        // to report. Leaving loadError empty falls through to the "not found" state, which
+        // tells the reader what happened better than the API's own "no rows in result set".
+        this.loadError = error.status === 404 ? '' : error.message
+      } finally {
+        this.isLoading = false
       }
-
-      this.resourceStage = this.getDefaultStage();
     },
   },
 
-  watch: {
-      isLoading (val) {
-        val && setTimeout(() => {
-          this.isLoading = false
-        }, 3000)
-      },
-  },
-
   async created() {
     this.pipelineUUID = this.$route.params.id
 
     this.$watch(
       () => this.$route.params,
       (toParams, previousParams) => {
-        if (toParams.id != previousParams.id) {
-          try {
-            this.getPipelineReportData()
-          } catch (error) {
-            console.log(error);
-          }
+        if (toParams.id !== previousParams.id) {
+          // The UUID has to follow the route: it is also what tells LinkedReports which
+          // report to leave out of the list it shows.
+          this.pipelineUUID = toParams.id
+          this.getPipelineReportData()
         }
       }
     )
-    try {
-      this.getPipelineReportData()
-    } catch (error) {
-      console.log(error);
-    }
+
+    await this.getPipelineReportData()
   },
 }
 </script>
 
 <style scoped>
+.loading-container {
+  min-height: 50vh;
+}
+
 .ci-warning {
   display: block;
   margin-top: 6px;
@@ -619,7 +623,8 @@ export default {
   gap: 16px;
   padding: 14px 16px;
   border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  /* Themed rather than a fixed black: the dark surface would otherwise swallow it. */
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
 .label-key-wrap {
diff --git a/src/components/pipeline/reports.vue b/src/components/pipeline/reports.vue
index c1b071402..cc50f3808 100644
--- a/src/components/pipeline/reports.vue
+++ b/src/components/pipeline/reports.vue
@@ -141,11 +141,34 @@
                 prepend-icon="mdi-arrow-right-circle"
                 :to=getPipelineLink(item.ID)></v-btn>
             </template>
+            <!-- A pipeline which had nothing to change reports a success even when the
+                 change it would have made is already waiting in a pull request nobody
+                 merged. The badge is what tells those apart from the genuinely up to
+                 date ones, which the result glyph alone cannot do. -->
             <template v-slot:item.Result="{ item }">
-              <v-icon
-                :icon=getStatusIcon(item.Result)
-                :color=getStatusColor(item.Result)
-                ></v-icon>
+              <v-tooltip :text="getResultTooltipText(item)">
+                <template v-slot:activator="{ props }">
+                  <v-badge
+                    v-if="hasOpenAction(item)"
+                    :icon="openActionIcon"
+                    :color="openActionColor"
+                    offset-x="-1"
+                    offset-y="-1"
+                    v-bind="props"
+                  >
+                    <v-icon
+                      :icon=getStatusIcon(item.Result)
+                      :color=getStatusColor(item.Result)
+                      ></v-icon>
+                  </v-badge>
+                  <v-icon
+                    v-else
+                    :icon=getStatusIcon(item.Result)
+                    :color=getStatusColor(item.Result)
+                    v-bind="props"
+                    ></v-icon>
+                </template>
+              </v-tooltip>
             </template>
             <template v-slot:item.Name="{ item }">
               <span style="min-width: 400px; display: inline-block;">{{ item.Name || 'Unnamed Report' }}</span>
@@ -179,11 +202,10 @@
 </template>
 
 <script>
-import { getStatusColor, getStatusIcon } from '@/composables/status';
+import { getStatusColor, getStatusIcon, getStatusText, OPEN_ACTION_ICON, OPEN_ACTION_COLOR } from '@/composables/status';
 import { extractGitURLInfo } from '@/composables/git'
 import { toLocalDate } from '@/composables/date'
-import { getApiBaseURL } from '@/composables/api';
-import { isAuthEnabled } from '@/composables/runtime';
+import { apiFetch } from '@/composables/api';
 
 export default {
   name: 'PipelinesTable',
@@ -194,6 +216,8 @@ export default {
 
   data: () => ({
     actionURLs: [], // Changed from {} to []
+    openActionIcon: OPEN_ACTION_ICON,
+    openActionColor: OPEN_ACTION_COLOR,
     sortBy: [{
       key: 'UpdatedAt',
       order: 'desc'
@@ -262,6 +286,26 @@ export default {
       return `${action.title} - Open ${action.url}`
     },
 
+    // hasOpenAction reports whether a pipeline left a pull request open. Updatecli only
+    // fills actionUrl from an open one and clears it once it is closed, so its presence
+    // is what says "a pull request is waiting right now" rather than "there was one".
+    hasOpenAction(pipeline){
+      return this.getActionsURL(pipeline).length > 0
+    },
+
+    getResultTooltipText(pipeline){
+      const status = getStatusText(pipeline.Result)
+      if (!this.hasOpenAction(pipeline)) {
+        return status
+      }
+
+      if (pipeline.Result === '✔') {
+        return `${status} - nothing to change, the change is already waiting in an open pull request`
+      }
+
+      return `${status} - a pull request is still open`
+    },
+
     getActionsURL(pipeline){
       let actionURLs = []
       if (pipeline.Report.Actions) {
@@ -301,7 +345,6 @@ export default {
 
     async getReportsData(page =1 ) {
       this.$emit('loaded', false)
-      const queryURL = `${getApiBaseURL()}/pipeline/reports/search`
 
       const requestBody = {
         limit: this.itemsPerPage,
@@ -349,33 +392,24 @@ export default {
         }
       }
 
-      try {
-        let response;
-        if (isAuthEnabled) {
-          const token = await this.$auth0.getAccessTokenSilently();
-          response = await fetch(queryURL, {
-            method: 'POST',
-            headers: {
-              Authorization: `Bearer ${token}`,
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(requestBody),
-          });
-        } else {
-          response = await fetch(queryURL, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(requestBody),
-          });
-        }
+      // Results has to be filtered server side: this table is paginated by the API,
+      // so dropping rows once they arrive would leave short pages and a total count
+      // counting reports the reader was never shown.
+      if (Array.isArray(this.filter?.results) && this.filter.results.length > 0) {
+        requestBody.results = this.filter.results
+      }
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+      // Same reason as the results above, and the value is a tri-state: an unset filter
+      // has to stay absent from the body rather than be sent as false.
+      if (typeof this.filter?.openAction === 'boolean') {
+        requestBody.open_action = this.filter.openAction
+      }
 
-        const data = await response.json();
+      try {
+        const data = await apiFetch('/pipeline/reports/search', {
+          method: 'POST',
+          body: requestBody,
+        });
 
         this.pipelines = data.data || data.reports || [];
         this.getPipelinesActionsURL()
diff --git a/src/components/scm/_filter.vue b/src/components/scm/_filter.vue
index 06d0297a1..711a867e6 100644
--- a/src/components/scm/_filter.vue
+++ b/src/components/scm/_filter.vue
@@ -93,12 +93,61 @@
                   </v-col>
                 </v-row>
               </div>
-                <!-- Date Range Labels -->
+                <!-- Pipeline Result and Open Pull Request Selection
+
+                     Both are picked from their name alone, unlike every other control
+                     here which can be checked against the rows it returns, so their
+                     items carry a subtitle spelling out what each one means.
+
+                     They sit side by side because they are read together: a pipeline
+                     reports a success when it had nothing to change, including when the
+                     change is already waiting in a pull request nobody merged, and
+                     pairing the two is what isolates those. They remain two controls
+                     rather than one list of five: an open pull request is a dimension of
+                     its own, orthogonal to the result. -->
+                <v-row>
+                  <v-col cols="12" md="6">
+                    <v-select
+                      variant="outlined"
+                      label="Pipeline Result (Optional)"
+                      :items="pipelineResults"
+                      :item-props="true"
+                      item-value="value"
+                      prepend-inner-icon="mdi-list-status"
+                      v-model="selectedResults"
+                      multiple
+                      chips
+                      closable-chips
+                      clearable
+                      hint="Leave empty to show every result"
+                      persistent-hint
+                    ></v-select>
+                  </v-col>
+                  <v-col cols="12" md="6">
+                    <v-select
+                      variant="outlined"
+                      label="Open Pull Request (Optional)"
+                      :items="openActionOptions"
+                      :item-props="true"
+                      item-value="value"
+                      prepend-inner-icon="mdi-source-pull"
+                      v-model="selectedOpenAction"
+                      clearable
+                      hint="Leave empty to show pipelines whether or not one is open"
+                      persistent-hint
+                    ></v-select>
+                  </v-col>
+                </v-row>
+                <!-- Date Range Labels
+
+                     Oldest on the left, newest on the right, matching the reversed
+                     slider below: dateRange[0] is "now" and larger steps go further
+                     back, so the second entry is the one that starts the range. -->
                 <v-row class="mb-0">
                   <v-col cols="6" class="text-left">
                     <v-text-field
-                      :model-value="stepToHumanDate(dateRange[0])"
-                      :hint="describeRelativeStep(dateRange[0])"
+                      :model-value="stepToHumanDate(dateRange[1])"
+                      :hint="describeRelativeStep(dateRange[1])"
                       persistent-hint
                       readonly
                       density="compact"
@@ -110,8 +159,8 @@
                   </v-col>
                   <v-col cols="6" class="text-right">
                     <v-text-field
-                      :model-value="stepToHumanDate(dateRange[1])"
-                      :hint="describeRelativeStep(dateRange[1])"
+                      :model-value="stepToHumanDate(dateRange[0])"
+                      :hint="describeRelativeStep(dateRange[0])"
                       persistent-hint
                       readonly
                       density="compact"
@@ -126,11 +175,14 @@
                 <v-row>
                   <v-col cols="12">
                     <v-range-slider
-                      v-model="dateRange"
+                      v-model="sliderRange"
                       :reverse="false"
                       :min="0"
-                      :max="30"
+                      :max="maxDateStep"
                       :step="1"
+                      :ticks="sliderTicks"
+                      show-ticks="always"
+                      tick-size="3"
                       class="py-2"
                       :strict="true"
                       :disabled="showRepositoryBranch && (!isRepositoriesData() || !isRepositoryBranchesData())"
@@ -170,10 +222,17 @@
 <script>
 import router from '../../router'
 
-import { getApiBaseURL } from '@/composables/api';
-import { isAuthEnabled } from '@/composables/runtime';
+import { apiFetch } from '@/composables/api';
+import { getMaxHistoryDays } from '@/composables/runtime';
 import { FILTER_STORAGE_KEY, stepToISO, formatToLayoutWithoutTimezone } from '@/composables/date';
-
+import { PIPELINE_RESULTS, PIPELINE_RESULT_VALUES, OPEN_ACTION_OPTIONS, OPEN_ACTION_VALUES, openActionToQuery } from '@/composables/status';
+import { encodeFilterState, decodeFilterState } from '@/composables/filter';
+
+// Steps 0-23 are hours ago; from 24 onwards a step is a day, so the step standing
+// for D days back is D + DAY_STEP_OFFSET. The default range is deliberately left at
+// the last day whatever the configured maximum: widening the slider must not widen
+// what every visitor asks the backend for by default.
+const DAY_STEP_OFFSET = 23;
 const DEFAULT_DATE_RANGE = [0, 24];
 
 export default {
@@ -206,6 +265,10 @@ export default {
     labelKeys: [],
     labelValuesByKey: {},  // Map to store label values for each key
     selectedLabels: [{ key: null, value: null }],  // Array of label selections
+    selectedResults: [],  // Pipeline results to keep, empty meaning all of them
+    pipelineResults: PIPELINE_RESULTS,
+    selectedOpenAction: null,  // "open", "none", or null meaning both
+    openActionOptions: OPEN_ACTION_OPTIONS,
     debounceTimer: null,
     nowTicker: null,
     nowRefreshKey: 0,
@@ -219,48 +282,148 @@ export default {
 
   computed: {
     hasActiveAdvancedFilters() {
-      return this.selectedLabels.some(label => label.key !== null)
+      return this.selectedLabels.some(label => label.key !== null) || this.selectedResults.length > 0 || this.selectedOpenAction !== null
     },
 
-    tickLabels() {
-      const labels = []
-      // Hours: 0-23 (1-24 hours ago)
-      for (let i = 0; i < 24; i++) {
-        if (i === 0) {
-          labels.push('now')
-          continue
-        }
-        if (i === 1) {
-          labels.push('1 hour')
-          continue
-        }
-        labels.push(`${i} hours`)
-      }
-      // Days: 24-30 (1-7 days ago)
-      for (let i = 0; i < 7; i++) {
-        if (i === 0) {
-          labels.push('end of today')
-          continue
-        }
-        if (i === 1) {
-          labels.push('1 day')
-          continue
-        }
-        labels.push(`${i} days`)
+    // sliderTicks marks a handful of anchors along the slider so the scale is
+    // readable. Labelling every step is unusable once the range spans weeks, and the
+    // exact instants either side are already spelled out in the two fields above it.
+    //
+    // Anchors follow the same mapping as stepToDate: below 24 a step is an hour, and
+    // the step for D days back is D + DAY_STEP_OFFSET.
+    sliderTicks() {
+      const ticks = {}
+      const maxDays = getMaxHistoryDays()
+
+      const hourAnchors = { 0: 'now', 6: '6h', 12: '12h', 18: '18h' }
+      Object.entries(hourAnchors).forEach(([step, label]) => {
+        ticks[this.toSliderValue(Number(step))] = label
+      })
+
+      const dayAnchors = [1, 7, 14, 30, 60, 90, 180, 365].filter((days) => days <= maxDays)
+
+      // Always mark the far end, so how far the filter reaches is legible at a glance.
+      if (!dayAnchors.includes(maxDays)) {
+        dayAnchors.push(maxDays)
       }
-      return labels
+
+      dayAnchors.forEach((days) => {
+        ticks[this.toSliderValue(days + DAY_STEP_OFFSET)] = days === 1 ? '1 day' : `${days} days`
+      })
+
+      return ticks
     },
 
+    // sliderRange presents dateRange the way a timeline reads: oldest on the left,
+    // now on the right. dateRange itself stays in "steps ago", which is what gets
+    // persisted, shared in the URL and turned into timestamps, so nothing downstream
+    // has to know about the flip.
+    //
+    // This is done by mirroring the values rather than with the slider's own reverse
+    // prop: reverse leaves the ticks sitting at the minimum and maximum pinned to the
+    // wrong ends, which puts "now" and the oldest label on the wrong sides.
+    sliderRange: {
+      get() {
+        return [this.toSliderValue(this.dateRange[1]), this.toSliderValue(this.dateRange[0])]
+      },
+      set(value) {
+        const [older, newer] = [...value].sort((a, b) => a - b)
+        this.dateRange = [this.toSliderValue(newer), this.toSliderValue(older)]
+      },
+    },
+
+    // dateRange[0] is the step closest to now and dateRange[1] the furthest back, so
+    // the range starts at the second entry. The API tolerates the two being handed
+    // over the wrong way round, which is why this read backwards for so long without
+    // breaking anything.
     formattedStartTime() {
-      return stepToISO(this.dateRange[0])
+      return stepToISO(this.dateRange[1])
     },
 
     formattedEndTime() {
-      return stepToISO(this.dateRange[1])
+      return stepToISO(this.dateRange[0])
+    },
+
+    // maxDateStep is how far the slider reaches, driven by the instance's configured
+    // history window rather than a fixed bound.
+    maxDateStep() {
+      return DAY_STEP_OFFSET + getMaxHistoryDays()
     },
   },
 
   methods: {
+    // clampStep keeps a restored step inside the slider. A range saved while the
+    // instance allowed more history would otherwise survive a lowered
+    // MAX_HISTORY_DAYS and keep querying beyond it.
+    clampStep(step) {
+      return Math.min(Math.max(step, 0), this.maxDateStep)
+    },
+
+    // toSliderValue mirrors a step across the track. It is its own inverse, so the
+    // same call converts in both directions.
+    toSliderValue(step) {
+      return this.maxDateStep - step
+    },
+
+    // sanitizeResults keeps only the results the API knows about, so a hand-edited
+    // URL or a stale local storage entry cannot turn into a query matching nothing.
+    sanitizeResults(value) {
+      if (!Array.isArray(value)) {
+        return []
+      }
+
+      return [...new Set(value.filter((result) => PIPELINE_RESULT_VALUES.includes(result)))]
+    },
+
+    // sanitizeOpenAction does for the open action what sanitizeResults does for the
+    // results: anything the API would not understand becomes "no filter" rather than a
+    // query matching nothing.
+    sanitizeOpenAction(value) {
+      return OPEN_ACTION_VALUES.includes(value) ? value : null
+    },
+
+    // toggleResult is what the summary doughnuts call when one of their segments is
+    // clicked. Clicking the same segment again clears it, so a click is never a
+    // one-way trip into a filter the reader then has to scroll up to undo.
+    //
+    // Segments standing for one half of a result split on whether a pull request is
+    // still open go through toggleResultWithOpenAction instead, so that both dimensions
+    // are set together.
+    toggleResult(result) {
+      const sanitized = this.sanitizeResults([result])
+      if (sanitized.length === 0) {
+        return
+      }
+
+      this.selectedResults = this.selectedResults.includes(sanitized[0])
+        ? this.selectedResults.filter((selected) => selected !== sanitized[0])
+        : [...this.selectedResults, sanitized[0]]
+
+      // Show what just changed: the control lives in a panel which is collapsed by
+      // default, and a filter the reader cannot see is a filter they cannot undo.
+      if (!this.expandedPanels.includes(0)) {
+        this.expandedPanels = [...this.expandedPanels, 0]
+      }
+
+      this.applyFilter()
+    },
+
+    // toggleResultWithOpenAction is what the segments split on the open action call, so
+    // that clicking "succeeded, waiting to be merged" selects both dimensions in one go
+    // rather than leaving the reader with a half applied filter.
+    toggleResultWithOpenAction(result, openAction) {
+      const wasSelected = this.selectedResults.includes(result) && this.selectedOpenAction === openAction
+
+      this.selectedResults = wasSelected ? [] : [result]
+      this.selectedOpenAction = wasSelected ? null : this.sanitizeOpenAction(openAction)
+
+      if (!this.expandedPanels.includes(0)) {
+        this.expandedPanels = [...this.expandedPanels, 0]
+      }
+
+      this.applyFilter()
+    },
+
     isRepositoriesData() {
       return this.repositories.length > 0
     },
@@ -272,29 +435,14 @@ export default {
     async getSCMSData() {
       this.$emit('loaded', false)
       try {
-        const auth_enabled = isAuthEnabled;
-
-        let query = `${getApiBaseURL()}/pipeline/scms`;
+        let query = '/pipeline/scms';
 
         if (this.restrictedSCM != "") {
           query = query + `?scmid=${this.restrictedSCM}`
         }
 
-        if (auth_enabled) {
-          const token = await this.$auth0.getAccessTokenSilently();
-
-          const response = await fetch(query, {
-            headers: {
-              Authorization: `Bearer ${token}`
-            }
-          });
-          const data = await response.json();
-          this.scms = data.scms
-        } else {
-          const response = await fetch(query);
-          const data = await response.json();
-          this.scms = data.scms
-        }
+        const data = await apiFetch(query);
+        this.scms = data.scms || []
 
         let urlArray = []
         this.repositories = []
@@ -337,23 +485,10 @@ export default {
 
     async getLabelKeys() {
       try {
-        const auth_enabled = isAuthEnabled;
-        let query = `${getApiBaseURL()}/pipeline/labels?keyonly=true&start_time=${encodeURIComponent(this.formattedStartTime)}&end_time=${encodeURIComponent(this.formattedEndTime)}`;
-
-        if (auth_enabled) {
-          const token = await this.$auth0.getAccessTokenSilently();
-          const response = await fetch(query, {
-            headers: {
-              Authorization: `Bearer ${token}`
-            }
-          });
-          const data = await response.json();
-          this.labelKeys = data.labels || [];
-        } else {
-          const response = await fetch(query);
-          const data = await response.json();
-          this.labelKeys = data.labels || [];
-        }
+        const query = `/pipeline/labels?keyonly=true&start_time=${encodeURIComponent(this.formattedStartTime)}&end_time=${encodeURIComponent(this.formattedEndTime)}`;
+
+        const data = await apiFetch(query);
+        this.labelKeys = data.labels || [];
       } catch (error) {
         console.error('Error fetching label keys:', error);
         this.labelKeys = [];
@@ -371,29 +506,14 @@ export default {
           return this.labelValuesByKey[labelKey];
         }
 
-        const auth_enabled = isAuthEnabled;
-        let query = `${getApiBaseURL()}/pipeline/labels?key=${encodeURIComponent(labelKey)}&start_time=${encodeURIComponent(this.formattedStartTime)}&end_time=${encodeURIComponent(this.formattedEndTime)}`;
+        const query = `/pipeline/labels?key=${encodeURIComponent(labelKey)}&start_time=${encodeURIComponent(this.formattedStartTime)}&end_time=${encodeURIComponent(this.formattedEndTime)}`;
 
-        if (auth_enabled) {
-          const token = await this.$auth0.getAccessTokenSilently();
-          const response = await fetch(query, {
-            headers: {
-              Authorization: `Bearer ${token}`
-            }
-          });
-          const data = await response.json();
-          // Extract unique values from the labels array
-          const uniqueValues = [...new Set(data.labels.map(label => label.value))];
-          this.labelValuesByKey[labelKey] = uniqueValues || [];
-          return this.labelValuesByKey[labelKey];
-        } else {
-          const response = await fetch(query);
-          const data = await response.json();
-          // Extract unique values from the labels array
-          const uniqueValues = [...new Set(data.labels.map(label => label.value))];
-          this.labelValuesByKey[labelKey] = uniqueValues || [];
-          return this.labelValuesByKey[labelKey];
-        }
+        const data = await apiFetch(query);
+
+        // Extract unique values from the labels array
+        const uniqueValues = [...new Set((data.labels || []).map(label => label.value))];
+        this.labelValuesByKey[labelKey] = uniqueValues;
+        return this.labelValuesByKey[labelKey];
       } catch (error) {
         console.error('Error fetching label values:', error);
         return [];
@@ -414,6 +534,8 @@ export default {
       this.restrictedSCM = ""
       this.dateRange = [...DEFAULT_DATE_RANGE]
       this.selectedLabels = [{ key: null, value: null }]
+      this.selectedResults = []
+      this.selectedOpenAction = null
       this.labelValuesByKey = {}
       this.getSCMSData()
       this.getLabelKeys()
@@ -454,43 +576,18 @@ export default {
       return repositoryBranches
     },
 
-    encodeBase64UrlUtf8(value) {
-      const bytes = new TextEncoder().encode(value)
-      let binary = ''
-      for (const byte of bytes) {
-        binary += String.fromCharCode(byte)
-      }
-      return btoa(binary)
-        .replace(/\+/g, '-')
-        .replace(/\//g, '_')
-        .replace(/=+$/g, '')
-    },
-
-    decodeBase64UrlUtf8(value) {
-      const padded = value
-        .replace(/-/g, '+')
-        .replace(/_/g, '/')
-        .padEnd(value.length + (4 - (value.length % 4 || 4)), '=')
-
-      const binary = atob(padded)
-      const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
-      return new TextDecoder().decode(bytes)
-    },
-
     loadFilterFromURL() {
       try {
-        const encoded = router.currentRoute.value.query.filter
-        if (!encoded || typeof encoded !== 'string') {
+        const decoded = decodeFilterState(router.currentRoute.value.query.filter)
+        if (!decoded) {
           return false
         }
 
-        const decoded = JSON.parse(this.decodeBase64UrlUtf8(encoded))
-
         if (Array.isArray(decoded.dateRange) && decoded.dateRange.length === 2) {
           const start = Number(decoded.dateRange[0])
           const end = Number(decoded.dateRange[1])
           if (Number.isFinite(start) && Number.isFinite(end)) {
-            this.dateRange = [start, end]
+            this.dateRange = [this.clampStep(start), this.clampStep(end)]
           }
         }
 
@@ -504,6 +601,9 @@ export default {
           this.selectedLabels = restoredLabels.length > 0 ? restoredLabels : [{ key: null, value: null }]
         }
 
+        this.selectedResults = this.sanitizeResults(decoded.selectedResults)
+        this.selectedOpenAction = this.sanitizeOpenAction(decoded.selectedOpenAction)
+
         if (this.showRepositoryBranch) {
           if (typeof decoded.repository === 'string') {
             this.repository = decoded.repository
@@ -533,7 +633,7 @@ export default {
           const start = Number(savedState.dateRange[0])
           const end = Number(savedState.dateRange[1])
           if (Number.isFinite(start) && Number.isFinite(end)) {
-            this.dateRange = [start, end]
+            this.dateRange = [this.clampStep(start), this.clampStep(end)]
           }
         }
 
@@ -548,6 +648,9 @@ export default {
           this.selectedLabels = restoredLabels.length > 0 ? restoredLabels : [{ key: null, value: null }]
         }
 
+        this.selectedResults = this.sanitizeResults(savedState.selectedResults)
+        this.selectedOpenAction = this.sanitizeOpenAction(savedState.selectedOpenAction)
+
         if (this.showRepositoryBranch) {
           if (typeof savedState.repository === 'string') {
             this.repository = savedState.repository
@@ -567,6 +670,8 @@ export default {
         const stateToPersist = {
           dateRange: this.dateRange,
           selectedLabels: this.selectedLabels,
+          selectedResults: this.selectedResults,
+          selectedOpenAction: this.selectedOpenAction,
           repository: this.showRepositoryBranch ? this.repository : '',
           branch: this.showRepositoryBranch ? this.branch : '',
           updatedAt: new Date().toISOString(),
@@ -615,19 +720,33 @@ export default {
         newFilter.labels = labels;
       }
 
+      if (this.selectedResults.length > 0) {
+        newFilter.results = [...this.selectedResults];
+      }
+
+      // The API reads the open action as an optional boolean, so an unset filter has to
+      // stay absent from the body rather than be sent as false, which would drop every
+      // pipeline carrying an open pull request.
+      const openAction = openActionToQuery(this.selectedOpenAction);
+      if (openAction !== undefined) {
+        newFilter.openAction = openAction;
+      }
+
       this.persistFilterState();
 
       // Keep the URL in sync so the current filter is always shareable
       const urlState = {
         dateRange: this.dateRange,
         selectedLabels: this.selectedLabels,
+        selectedResults: this.selectedResults,
+        selectedOpenAction: this.selectedOpenAction,
       }
       if (this.showRepositoryBranch) {
         urlState.repository = this.repository
         urlState.branch = this.branch
       }
       router.replace({
-        query: { ...router.currentRoute.value.query, filter: this.encodeBase64UrlUtf8(JSON.stringify(urlState)) },
+        query: { ...router.currentRoute.value.query, filter: encodeFilterState(urlState) },
       }).catch(() => {})
 
       this.$emit('update-filter', newFilter)
@@ -706,31 +825,6 @@ export default {
       return this.formatHumanDate(date)
     },
 
-    tickLabel(label) {
-
-      if (label < 24 ){
-        // Hours: 0-23 (1-24 hours ago)
-        if (label === 0) {
-          return 'now'
-        }
-        if (label === 1) {
-          return '1 hour'
-        }
-        return `${label} hours`
-      }
-      else {
-        // Days: 24-30 (1-7 days ago)
-        const daysAgo = label - 24
-        if (daysAgo === 0) {
-          return 'end of today'
-        }
-        if (daysAgo === 1) {
-          return '1 day'
-        }
-        return `${daysAgo} days`
-      }
-    },
-
     getLabelValuesForIndex(index) {
       const labelKey = this.selectedLabels[index].key;
       const values = this.labelValuesByKey[labelKey] || [];
@@ -826,9 +920,9 @@ export default {
           return
         }
 
-        // Emit only if valid (not equal)
-        const startTime = stepToISO(val[0])
-        const endTime = stepToISO(val[1])
+        // Emit only if valid (not equal). The furthest step back starts the range.
+        const startTime = stepToISO(val[1])
+        const endTime = stepToISO(val[0])
         this.$emit('date-range-changed', { startTime, endTime })
 
         // Debounce label refresh to avoid an API call on every slider tick
diff --git a/src/components/scm/_summary.vue b/src/components/scm/_summary.vue
index 9627568f3..b53c8be57 100644
--- a/src/components/scm/_summary.vue
+++ b/src/components/scm/_summary.vue
@@ -115,7 +115,7 @@
                                                                     <div class="flex-grow-1">
                                                                         <div class="font-weight-medium">{{ branch }}</div>
                                                                         <div class="text-caption text-grey-darken-1">
-                                                                            {{ branchData.total_result || 0 }} reports
+                                                                            {{ branchData.total_result || 0 }} {{ (branchData.total_result || 0) === 1 ? 'pipeline' : 'pipelines' }}
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -169,7 +169,7 @@
                                                     <div class="chart-container" v-if="hasDoughnutData(url, branch)">
                                                         <SCMDoughnut
                                                             :chartData="getDoughnutData(url, branch)"
-                                                            :chartOptions="miniDoughnutOptions"
+                                                            :chartOptions="doughnutOptionsFor(url, branch, branchData)"
                                                             :centerText="branchData.total_result"
                                                             size="small"
                                                         />
@@ -193,7 +193,7 @@
                                                                 <div class="flex-grow-1">
                                                                     <div class="font-weight-medium">{{ branch }}</div>
                                                                     <div class="text-caption text-grey-darken-1">
-                                                                        {{ branchData.total_result || 0 }} reports
+                                                                        {{ branchData.total_result || 0 }} {{ (branchData.total_result || 0) === 1 ? 'pipeline' : 'pipelines' }}
                                                                     </div>
                                                                 </div>
                                                             </div>
@@ -241,7 +241,7 @@
                                                         <div class="chart-container" v-if="hasDoughnutData(url, branch)">
                                                             <SCMDoughnut
                                                                 :chartData="getDoughnutData(url, branch)"
-                                                                :chartOptions="miniDoughnutOptions"
+                                                                :chartOptions="doughnutOptionsFor(url, branch, branchData)"
                                                                 :centerText="branchData.total_result"
                                                                 size="small"
                                                             />
@@ -251,6 +251,36 @@
                                             </div>
                                         </div>
 
+                                        <!-- Reports received on this branch. It sits
+                                             outside the link above so hovering the bars
+                                             does not read as navigation, and it only
+                                             mounts once a repository is expanded, so a
+                                             collapsed page costs nothing.
+
+                                             It follows the filter's window: the bucket
+                                             size is derived from that window, so the
+                                             last day now reads as hours rather than
+                                             collapsing into a single bar. Every card
+                                             shares the one window, which is what keeps
+                                             the branches comparable to each other. It
+                                             falls back to the full history when no
+                                             range is set. -->
+                                        <div class="branch-activity px-4 pb-2">
+                                            <ActivityChart
+                                                mode="volume"
+                                                granularity="auto"
+                                                height="44px"
+                                                compact
+                                                :start-time="filter.startTime || ''"
+                                                :end-time="filter.endTime || ''"
+                                                :days="maxHistoryDays"
+                                                :scmid="branchData.id"
+                                                :labels="filter.labels"
+                                                :results="filter.results"
+                                                :open-action="filter.openAction ?? null"
+                                            />
+                                        </div>
+
                                         <v-divider
                                             v-if="index < getVisibleBranchEntries(url, scmData).length - 1"
                                         ></v-divider>
@@ -322,19 +352,44 @@ import {
 import router from '../../router'
 
 import SCMDoughnut from './_scmDoughnut.vue'
+import ActivityChart from '../pipeline/activityChart.vue'
 
-import { getApiBaseURL } from '@/composables/api';
+import { apiFetch } from '@/composables/api';
 import { extractGitURLInfo } from '@/composables/git';
-import { isAuthEnabled, getStorageKey } from '@/composables/runtime';
+import { getStorageKey, getMaxHistoryDays } from '@/composables/runtime';
+import { encodeFilterState, decodeFilterState } from '@/composables/filter';
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend)
 
 const EMPTY_DONUT_DATA = Object.freeze({ labels: [], datasets: [] });
+
+// DOUGHNUT_SEGMENTS ties every slice to the pipeline result it counts, so the chart
+// and the click handler reading a slice back cannot drift apart. The last one has no
+// result: it counts whatever Updatecli did not report as one, so there is nothing to
+// filter on, and clicking it does nothing.
+//
+// The wording follows PIPELINE_RESULTS rather than getStatusText: at pipeline level
+// "⚠" is Updatecli reporting that it changed something, which "Warning" reads as the
+// opposite of.
+//
+// Success is split in two, matching RESULT_SERIES in activityChart.vue. A pipeline which
+// had nothing to change reports a success even when the change is already waiting in a
+// pull request nobody merged, and those are the ones worth looking at: without the split
+// they are indistinguishable from the branches which are genuinely up to date.
+const DOUGHNUT_SEGMENTS = Object.freeze([
+    { result: '✔', openAction: true, label: '✔ Waiting to be merged', color: 'rgba(59, 130, 246, 0.7)' }, // Blue
+    { result: '✔', openAction: false, label: '✔ Success', color: 'rgba(16, 185, 129, 0.7)' },  // Green
+    { result: '⚠', label: '⚠ Changed', color: 'rgba(245, 158, 11, 0.7)' },  // Amber
+    { result: '✗', label: '✗ Failed', color: 'rgba(220, 38, 38, 0.7)' },    // Red
+    { result: '-', label: '- Skipped', color: 'rgba(107, 114, 128, 0.7)' }, // Gray
+    { result: null, label: '? Unknown', color: 'rgba(139, 92, 246, 0.7)' }, // Purple
+]);
 const COLLAPSE_STORAGE_KEY = getStorageKey('scm.summary.collapse.v1');
 
 export default {
     components: {
         SCMDoughnut,
+        ActivityChart,
     },
     name: "SCMDashboard",
     props: {
@@ -390,6 +445,12 @@ export default {
     }),
 
     computed: {
+        // The per-branch activity strips span whatever history this instance is
+        // configured to serve, so they narrow along with MAX_HISTORY_DAYS.
+        maxHistoryDays() {
+            return getMaxHistoryDays();
+        },
+
         loadedScmBranchCount() {
             return this.countLoadedScmBranches(this.data);
         },
@@ -632,7 +693,6 @@ export default {
             this.$emit('loaded', false)
 
             try {
-                const auth_enabled = isAuthEnabled;
                 const restrictedSCM = router.currentRoute.value.query.filter?.scmid;
 
                 const requestBody = {
@@ -667,34 +727,21 @@ export default {
                     }
                 }
 
-                const query = `${getApiBaseURL()}/pipeline/scms/search`;
-
-                let response;
-                if (auth_enabled) {
-                    const token = await this.$auth0.getAccessTokenSilently();
-                    response = await fetch(query, {
-                        method: 'POST',
-                        headers: {
-                            Authorization: `Bearer ${token}`,
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(requestBody),
-                    });
-                } else {
-                    response = await fetch(query, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(requestBody),
-                    });
+                if (Array.isArray(this.filter?.results) && this.filter.results.length > 0) {
+                    requestBody.results = this.filter.results;
                 }
 
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
+                // Tri-state: an unset filter has to stay absent from the body rather than
+                // be sent as false, which would drop every pipeline with an open pull
+                // request.
+                if (typeof this.filter?.openAction === 'boolean') {
+                    requestBody.open_action = this.filter.openAction;
                 }
 
-                const responseData = await response.json();
+                const responseData = await apiFetch('/pipeline/scms/search', {
+                    method: 'POST',
+                    body: requestBody,
+                });
 
                 // Discard stale results if the filter changed while fetching
                 if (requestId !== this.currentRequestId) return;
@@ -832,58 +879,126 @@ export default {
         },
 
         buildDoughnutData(branchData) {
-            const labels = [
-                '✔ Success',
-                '⚠ Warning',
-                '✗ Error',
-                '- Skipped',
-                '? Unknown',
-            ];
-            const labelColors = [
-               'rgba(16, 185, 129, 0.7)',  // Green
-               'rgba(245, 158, 11, 0.7)',  // Amber
-               'rgba(220, 38, 38, 0.7)',   // Red
-               'rgba(107, 114, 128, 0.7)', // Gray
-               'rgba(139, 92, 246, 0.7)',  // Purple
-            ];
-
             if (!branchData || branchData.total_result === undefined) {
                 return EMPTY_DONUT_DATA;
             }
 
             const resultsByType = branchData.total_result_by_type || {};
-
-            let successResults = 0;
-            let warningResults = 0;
-            let errorResults = 0;
-            let skippedResults = 0;
-            let otherResults = 0;
+            // total_open_action_by_result is a breakdown of total_result_by_type rather
+            // than an addition to it, so a split result contributes to both of its
+            // segments and the doughnut still totals total_result.
+            const openActionsByType = branchData.total_open_action_by_result || {};
+            const counts = DOUGHNUT_SEGMENTS.map(() => 0);
 
             for (let result in resultsByType) {
-                if (result === '✔') {
-                    successResults = resultsByType[result];
-                } else if (result === '✗') {
-                    errorResults = resultsByType[result];
-                } else if (result === '⚠') {
-                    warningResults = resultsByType[result];
-                } else if (result === '-') {
-                    skippedResults = resultsByType[result];
-                } else {
-                    otherResults += resultsByType[result];
+                const open = openActionsByType[result] || 0;
+
+                const openIndex = DOUGHNUT_SEGMENTS.findIndex(
+                    (segment) => segment.result === result && segment.openAction === true);
+                const index = DOUGHNUT_SEGMENTS.findIndex(
+                    (segment) => segment.result === result && segment.openAction !== true);
+
+                if (openIndex !== -1) {
+                    counts[openIndex] += open;
                 }
+
+                // Anything which is not an Updatecli result lands in the last segment,
+                // which is the one carrying no result and so the one not filtering. A
+                // result without a split segment keeps its whole count, so an open action
+                // on it is still counted, just not called out.
+                counts[index === -1 ? DOUGHNUT_SEGMENTS.length - 1 : index] +=
+                    openIndex === -1 ? resultsByType[result] : resultsByType[result] - open;
             }
 
             return {
-                labels,
+                labels: DOUGHNUT_SEGMENTS.map((segment) => segment.label),
                 datasets: [
                     {
-                        data: [successResults, warningResults, errorResults, skippedResults, otherResults],
-                        backgroundColor: labelColors,
+                        data: counts,
+                        backgroundColor: DOUGHNUT_SEGMENTS.map((segment) => segment.color),
                     }
                 ]
             };
         },
 
+        // doughnutOptionsFor gives every doughnut its own options so the click handler
+        // knows which branch it belongs to. They are cached outside the reactive state:
+        // handing the chart a fresh options object on each render would have it
+        // reinitialise itself, and writing to reactive data while rendering would loop.
+        doughnutOptionsFor(url, branch, branchData) {
+            const key = JSON.stringify([url, branch]);
+
+            if (!this.doughnutOptionsCache[key]) {
+                const scmID = branchData.id;
+
+                this.doughnutOptionsCache[key] = {
+                    ...this.miniDoughnutOptions,
+                    onHover: (event, elements) => {
+                        const target = event?.native?.target;
+                        if (target) {
+                            target.style.cursor = this.isFilterableSegment(elements) ? 'pointer' : 'default';
+                        }
+                    },
+                    onClick: (event, elements) => {
+                        if (!this.isFilterableSegment(elements)) {
+                            return;
+                        }
+
+                        // On the dashboard the whole card is a link to this branch's
+                        // reports, and the canvas sits inside it. Stop the click there
+                        // so picking a segment does not also follow the link, losing
+                        // the result on the way.
+                        event?.native?.preventDefault();
+                        event?.native?.stopPropagation();
+
+                        const segment = DOUGHNUT_SEGMENTS[elements[0].index];
+                        this.selectResult(segment.result, scmID, segment.openAction);
+                    },
+                };
+            }
+
+            return this.doughnutOptionsCache[key];
+        },
+
+        // isFilterableSegment answers whether a click landed on a segment standing for
+        // a single result. The unknown one counts everything Updatecli did not report
+        // as a result, which is not something the search API can be asked for.
+        isFilterableSegment(elements) {
+            if (!Array.isArray(elements) || elements.length === 0) {
+                return false;
+            }
+
+            return !!DOUGHNUT_SEGMENTS[elements[0].index]?.result;
+        },
+
+        // openAction is undefined for the segments counting a result whole, and true or
+        // false for the two halves of a split one, which have to carry both dimensions
+        // so the reader lands on the pipelines the slice actually stood for.
+        selectResult(result, scmID, openAction) {
+            if (this.hideButton) {
+                // The reports for this branch are already on screen, so narrowing the
+                // filter in place is enough; navigating would only lose the reader's
+                // position on the page.
+                this.$emit('toggle-result', result, openAction);
+                return;
+            }
+
+            // The card already links to this branch's reports, so a segment click goes
+            // to that same place with the result carried over rather than somewhere
+            // new. The current filter travels along, keeping the date range and the
+            // labels the reader had set here.
+            const query = { ...router.currentRoute.value.query, scmid: scmID };
+            const state = decodeFilterState(query.filter) || {};
+
+            state.selectedResults = [result];
+            if (openAction !== undefined) {
+                state.selectedOpenAction = openAction ? 'open' : 'none';
+            }
+            query.filter = encodeFilterState(state);
+
+            router.push({ path: '/pipeline/reports', query }).catch(() => {});
+        },
+
         updateDoughnutDataForScmData(scmData) {
             if (!scmData || typeof scmData !== 'object') {
                 return;
@@ -923,6 +1038,10 @@ export default {
         },
     },
     async created() {
+        // Kept off the reactive state on purpose: it only holds the per-doughnut
+        // options objects, which have to keep their identity across renders.
+        this.doughnutOptionsCache = {};
+
         this.loadPersistedCollapseState();
         this.resetPagination();
         await this.loadNextPage();
diff --git a/src/composables/api.js b/src/composables/api.js
index 100717798..fd1636113 100644
--- a/src/composables/api.js
+++ b/src/composables/api.js
@@ -1,5 +1,6 @@
 
-import { getRuntimeConfig } from '@/composables/runtime'
+import { getAccessToken } from '@/composables/auth'
+import { getRuntimeConfig, isAuthEnabled } from '@/composables/runtime'
 
 // getApiBaseURL returns the base URL for API requests with no trailing slash.
 export function getApiBaseURL() {
@@ -20,3 +21,46 @@ export function getApiBaseUrl() {
 
   return window.location.origin + raw
 }
+
+// apiFetch calls the udash API at `path`, which is relative to the API base URL, and
+// returns the decoded JSON body. The bearer token is attached whenever auth is enabled,
+// so no caller has to know whether this instance runs with authentication or without.
+//
+// It throws on anything but a 2xx, preferring the sentence the API puts in the body over
+// the bare status code: that sentence is usually the only thing telling the reader why a
+// view came back empty.
+export async function apiFetch(path, { method = 'GET', body, signal } = {}) {
+  const headers = {}
+
+  if (isAuthEnabled) {
+    const token = await getAccessToken()
+    if (token) {
+      headers.Authorization = `Bearer ${token}`
+    }
+  }
+
+  const init = { method, headers, signal }
+
+  if (body !== undefined) {
+    headers['Content-Type'] = 'application/json'
+    init.body = JSON.stringify(body)
+  }
+
+  const response = await fetch(`${getApiBaseURL()}${path}`, init)
+
+  if (!response.ok) {
+    let detail = ''
+    try {
+      const errorBody = await response.json()
+      detail = errorBody?.error || errorBody?.message || ''
+    } catch {
+      detail = ''
+    }
+
+    const error = new Error(detail || `HTTP error! status: ${response.status}`)
+    error.status = response.status
+    throw error
+  }
+
+  return response.json()
+}
diff --git a/src/composables/auth.js b/src/composables/auth.js
new file mode 100644
index 000000000..b62f7e731
--- /dev/null
+++ b/src/composables/auth.js
@@ -0,0 +1,209 @@
+import { reactive, toRefs } from 'vue'
+import { UserManager, WebStorageStateStore } from 'oidc-client-ts'
+import { getRuntimeConfig, getAppBaseUrl, isAuthEnabled } from '@/composables/runtime'
+
+// Provider-agnostic OIDC auth layer (Authorization Code + PKCE).
+// Backed by oidc-client-ts, configured from the runtime config.json so any
+// standards-compliant provider (e.g. Zitadel) can be plugged in without code
+// changes.
+
+const RETURN_TO_KEY = 'udash.auth.returnTo'
+
+const state = reactive({
+  isAuthenticated: false,
+  isLoading: true,
+  user: null,
+  error: null,
+})
+
+let userManager = null
+let initPromise = null
+
+// loadUserInfoClaims resolves the profile claims for a session. The ID token carries
+// only what the provider chooses to put there — Zitadel omits `email`, `name`,
+// `preferred_username` and `picture` unless the application opts in — so the claims are
+// read from the userinfo endpoint and merged over the token's own.
+//
+// This is deliberately non-fatal. oidc-client-ts' built-in `loadUserInfo` runs inside
+// the signin callback and the refresh path and throws on failure, which would cost the
+// user their session over a transient userinfo error. Here a failure degrades to the
+// sparse ID-token profile and is recorded for the UI to surface.
+async function loadUserInfoClaims(user) {
+  if (!user?.access_token) {
+    return user?.profile ?? null
+  }
+
+  try {
+    const endpoint = await getUserManager().metadataService.getUserInfoEndpoint()
+    const response = await fetch(endpoint, {
+      headers: { Authorization: `Bearer ${user.access_token}` },
+    })
+
+    if (!response.ok) {
+      throw new Error(`userinfo request failed with status ${response.status}`)
+    }
+
+    const claims = await response.json()
+
+    // A response describing a different subject must never be merged in.
+    if (claims.sub !== user.profile.sub) {
+      throw new Error('userinfo subject does not match the ID token subject')
+    }
+
+    return { ...user.profile, ...claims }
+  } catch (err) {
+    state.error = err
+    return user.profile
+  }
+}
+
+async function applyUser(user) {
+  if (user && !user.expired) {
+    // Resolve the profile before flipping the flag so the two never disagree.
+    state.user = await loadUserInfoClaims(user)
+    state.isAuthenticated = true
+  } else {
+    state.isAuthenticated = false
+    state.user = null
+  }
+}
+
+function getUserManager() {
+  if (!userManager) {
+    const cfg = getRuntimeConfig()
+
+    userManager = new UserManager({
+      authority: cfg.OAUTH_DOMAIN,
+      client_id: cfg.OAUTH_CLIENTID,
+      redirect_uri: getAppBaseUrl(),
+      post_logout_redirect_uri: getAppBaseUrl(),
+      response_type: 'code',
+      scope: cfg.OAUTH_SCOPE || 'openid profile email offline_access',
+      userStore: new WebStorageStateStore({ store: window.localStorage }),
+      automaticSilentRenew: true,
+    })
+
+    userManager.events.addUserLoaded((user) => applyUser(user))
+    userManager.events.addUserUnloaded(() => applyUser(null))
+    userManager.events.addAccessTokenExpired(() => applyUser(null))
+    userManager.events.addSilentRenewError((err) => {
+      state.error = err
+    })
+  }
+
+  return userManager
+}
+
+// initAuth builds the UserManager, processes the redirect callback when the URL
+// carries OAuth `code`/`state`, then hydrates the reactive state from any stored
+// session. Safe to call multiple times: the work happens once.
+export function initAuth() {
+  if (!isAuthEnabled) {
+    state.isLoading = false
+    return Promise.resolve()
+  }
+
+  if (initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    const mgr = getUserManager()
+
+    try {
+      const params = new URLSearchParams(window.location.search)
+      if (params.has('code') && params.has('state')) {
+        const user = await mgr.signinRedirectCallback()
+        await applyUser(user)
+
+        // Strip the OAuth query params, keeping the current path and hash.
+        window.history.replaceState(
+          {},
+          document.title,
+          window.location.pathname + window.location.hash
+        )
+      } else {
+        await applyUser(await mgr.getUser())
+      }
+    } catch (err) {
+      state.error = err
+      await applyUser(null)
+    } finally {
+      state.isLoading = false
+    }
+  })()
+
+  return initPromise
+}
+
+// login redirects to the identity provider. When `returnTo` is provided it is
+// stashed so the app can navigate back to the intended route after callback.
+export async function login(returnTo) {
+  if (returnTo) {
+    sessionStorage.setItem(RETURN_TO_KEY, returnTo)
+  }
+  await getUserManager().signinRedirect()
+}
+
+export async function logout() {
+  await getUserManager().signoutRedirect()
+}
+
+// getAccessToken returns a valid bearer token, silently renewing if expired.
+export async function getAccessToken() {
+  const mgr = getUserManager()
+  let user = await mgr.getUser()
+
+  if (user && user.expired) {
+    try {
+      user = await mgr.signinSilent()
+    } catch (err) {
+      state.error = err
+      user = null
+    }
+  }
+
+  return user?.access_token || null
+}
+
+// consumeReturnTo returns and clears the route stashed before a login redirect.
+export function consumeReturnTo() {
+  const target = sessionStorage.getItem(RETURN_TO_KEY)
+  if (target) {
+    sessionStorage.removeItem(RETURN_TO_KEY)
+  }
+  return target
+}
+
+// authGuard protects routes: authenticated users pass, others are redirected to
+// the identity provider with the target route remembered.
+export async function authGuard(to) {
+  if (!isAuthEnabled) {
+    return true
+  }
+
+  await initAuth()
+  const user = await getUserManager().getUser()
+
+  if (user && !user.expired) {
+    return true
+  }
+
+  await login(to.fullPath)
+  return false
+}
+
+// useAuth exposes reactive auth state and actions to components.
+export function useAuth() {
+  const { isAuthenticated, isLoading, user, error } = toRefs(state)
+
+  return {
+    isAuthenticated,
+    isLoading,
+    user,
+    error,
+    login,
+    logout,
+    getToken: getAccessToken,
+  }
+}
diff --git a/src/composables/date.js b/src/composables/date.js
index 4583e2577..687045b8c 100644
--- a/src/composables/date.js
+++ b/src/composables/date.js
@@ -87,7 +87,9 @@ export function getStartTimeFromStorage() {
             return null
         }
 
-        const start = Number(parsedFilter.dateRange[0])
+        // dateRange[0] is the step closest to now, dateRange[1] the furthest back, so
+        // the range starts at the second entry.
+        const start = Number(parsedFilter.dateRange[1])
         if (!Number.isFinite(start)) {
             return null
         }
@@ -111,7 +113,7 @@ export function getEndTimeFromStorage() {
             return null
         }
 
-        const end = Number(parsedFilter.dateRange[1])
+        const end = Number(parsedFilter.dateRange[0])
         if (!Number.isFinite(end)) {
             return null
         }
diff --git a/src/composables/filter.js b/src/composables/filter.js
new file mode 100644
index 000000000..51f7e4f44
--- /dev/null
+++ b/src/composables/filter.js
@@ -0,0 +1,51 @@
+// Filter state travels in the URL as a single base64url blob rather than as one query
+// parameter per field, because it nests: the labels are a map and the date range is a
+// pair of steps. Encoding it keeps a filtered view shareable as a plain link.
+//
+// It is read by the filter component on load and written whenever the filter is
+// applied, so anything building a link to a filtered view has to speak the same
+// format, which is why these live here rather than inside that component.
+
+export function encodeBase64UrlUtf8(value) {
+  const bytes = new TextEncoder().encode(value)
+  let binary = ''
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte)
+  }
+  return btoa(binary)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/g, '')
+}
+
+export function decodeBase64UrlUtf8(value) {
+  const padded = value
+    .replace(/-/g, '+')
+    .replace(/_/g, '/')
+    .padEnd(value.length + (4 - (value.length % 4 || 4)), '=')
+
+  const binary = atob(padded)
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
+  return new TextDecoder().decode(bytes)
+}
+
+export function encodeFilterState(state) {
+  return encodeBase64UrlUtf8(JSON.stringify(state))
+}
+
+// decodeFilterState returns null rather than throwing: the blob comes from the URL,
+// so it is whatever the reader pasted, and an unreadable one means falling back to
+// the default filter rather than breaking the page.
+export function decodeFilterState(encoded) {
+  if (!encoded || typeof encoded !== 'string') {
+    return null
+  }
+
+  try {
+    const decoded = JSON.parse(decodeBase64UrlUtf8(encoded))
+    return decoded && typeof decoded === 'object' ? decoded : null
+  } catch (error) {
+    console.warn('Unable to decode filter state', error)
+    return null
+  }
+}
diff --git a/src/composables/runtime.js b/src/composables/runtime.js
index e140839b0..df6bdbb9d 100644
--- a/src/composables/runtime.js
+++ b/src/composables/runtime.js
@@ -1,6 +1,21 @@
 const runtimeConfig = window.config || {}
 
-export const isAuthEnabled = import.meta.env.VITE_AUTH_ENABLED === 'true'
+// MAX_HISTORY_DAYS caps how far back the interface lets anyone look: it drives the
+// date filter's reach and the window of the activity chart.
+//
+// It guards the UI only — the API enforces its own ceiling — so it is clamped to
+// that ceiling here rather than letting a misconfigured instance send requests the
+// backend answers with a 400. Raising it does not increase baseline load: the
+// filter's default selection stays at the last day whatever the maximum is, so a
+// wider range only ever costs something once someone deliberately asks for it.
+const DEFAULT_MAX_HISTORY_DAYS = 30
+const API_MAX_HISTORY_DAYS = 366
+
+// AUTH_ENABLED is read from the runtime config rather than the build environment so a
+// single image can serve both authenticated and open deployments. index.html populates
+// window.config before importing the bundle, so this is resolved by the time any module
+// body runs.
+export const isAuthEnabled = String(runtimeConfig.AUTH_ENABLED) === 'true'
 
 export function getRuntimeConfig() {
   return runtimeConfig
@@ -27,3 +42,15 @@ export function getDashboardUrl() {
 export function getStorageKey(id) {
   return `udash.${id}:${getAppBasePath()}`
 }
+
+// getMaxHistoryDays returns how many days of history the UI may offer, falling back
+// to the default whenever the value is missing or unusable.
+export function getMaxHistoryDays() {
+  const configured = Number(runtimeConfig.MAX_HISTORY_DAYS)
+
+  if (!Number.isFinite(configured) || configured < 1) {
+    return DEFAULT_MAX_HISTORY_DAYS
+  }
+
+  return Math.min(Math.floor(configured), API_MAX_HISTORY_DAYS)
+}
diff --git a/src/composables/status.js b/src/composables/status.js
index 32061b387..f45ad3914 100644
--- a/src/composables/status.js
+++ b/src/composables/status.js
@@ -28,6 +28,77 @@ export function getStatusIcon(status){
       }
 }
 
+// PIPELINE_RESULTS describes the four results a pipeline report can carry, for the
+// controls where someone picks a result by name with no data in front of them.
+//
+// The wording is deliberately not the one getStatusText returns. That function also
+// labels the source, condition and target rows, where the same glyphs mean something
+// else: a "✔" on a condition means the condition passed, not that nothing changed. It
+// reads "Warning" for "⚠" too, which at pipeline level says the opposite of what
+// happened, since "⚠" is how Updatecli reports that it applied a change.
+export const PIPELINE_RESULTS = [
+  { value: '✔', title: '✔ Success', subtitle: 'Ran fine, nothing to change' },
+  { value: '⚠', title: '⚠ Changed', subtitle: 'Updatecli applied a change' },
+  { value: '✗', title: '✗ Failed', subtitle: 'Something went wrong, or a condition did not pass' },
+  { value: '-', title: '- Skipped', subtitle: 'Did not run' },
+]
+
+// PIPELINE_RESULT_VALUES is what a pipeline result may be, to check the results
+// restored from a URL or from the local storage before querying with them.
+export const PIPELINE_RESULT_VALUES = PIPELINE_RESULTS.map((result) => result.value)
+
+// OPEN_ACTION_OPTIONS describes whether a pipeline carries an action left open, such as a
+// pull request still waiting to be merged.
+//
+// This is deliberately a dimension of its own rather than a fifth entry of
+// PIPELINE_RESULTS: an open action is orthogonal to the result. A pipeline may have
+// succeeded because its change is already waiting in a pull request, but it may also have
+// changed something and just opened one, or be failing while a pull request from a previous
+// run is still around. A fifth result would have to pick one of those and lose the others.
+//
+// "✔ with an open pull request" is the one worth looking for: those pipelines report a
+// success and had nothing to change only because the change is already waiting to be
+// merged, so they are invisible among the genuinely up to date ones.
+export const OPEN_ACTION_OPTIONS = [
+  { value: 'open', title: 'With an open pull request', subtitle: 'A change is waiting to be merged' },
+  { value: 'none', title: 'Without any open pull request', subtitle: 'Nothing to follow up' },
+]
+
+// OPEN_ACTION_VALUES is what the open action filter may be, to check the value restored
+// from a URL or from the local storage before querying with it.
+export const OPEN_ACTION_VALUES = OPEN_ACTION_OPTIONS.map((option) => option.value)
+
+// openActionToQuery maps the filter value to what the API expects, an optional boolean:
+// unset does not filter anything out, true only keeps the pipelines carrying an open
+// action and false only the ones without.
+export function openActionToQuery(value) {
+  switch (value) {
+    case 'open':
+      return true
+    case 'none':
+      return false
+    default:
+      return undefined
+  }
+}
+
+// OPEN_ACTION_ICON is the icon standing for an action left open. The merge request variant
+// is picked per repository by getActionIcon where the provider is known.
+export const OPEN_ACTION_ICON = 'mdi-source-pull'
+
+// OPEN_ACTION_COLOR is the colour standing for an action left open. It matches "⚠" rather
+// than "✔" on purpose: a pipeline in that state needs someone to look at it.
+export const OPEN_ACTION_COLOR = 'warning'
+
+// OPEN_ACTION_RESULT_SEGMENTS labels the result buckets once split on the open action
+// dimension, for the charts counting reports per result. Only the results which can
+// realistically carry an open action are split; the others would only ever show an empty
+// segment.
+export const OPEN_ACTION_RESULT_SEGMENTS = {
+  '✔': { label: '✔ Waiting to be merged', subtitle: 'Succeeded, the change is already in an open pull request' },
+  '⚠': { label: '⚠ Changed, pull request open', subtitle: 'Updatecli applied a change and opened a pull request' },
+}
+
 export function getStatusText(input){
       const statusMap = {
         '✔': 'Success',
diff --git a/src/main.js b/src/main.js
index 4e47bf3f6..891c94de9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,8 +3,8 @@ import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import { loadFonts } from './plugins/webfontloader'
 import router from './router'
-import { createAuth0 } from '@auth0/auth0-vue'
-import { getAppBaseUrl, getRuntimeConfig, isAuthEnabled } from '@/composables/runtime'
+import { initAuth, consumeReturnTo } from '@/composables/auth'
+import { isAuthEnabled } from '@/composables/runtime'
 
 import hljs from 'highlight.js'
 //import 'highlight.js/styles/atom-one-dark.css'
@@ -22,25 +22,25 @@ const highlightDirective = {
   }
 }
 
-const runtimeConfig = getRuntimeConfig()
-
-const app = createApp(App)
-  .use(router)
-  .use(vuetify)
-
-if (isAuthEnabled) {
-  app.use(
-    createAuth0({
-      domain: runtimeConfig.OAUTH_DOMAIN,
-      clientId: runtimeConfig.OAUTH_CLIENTID,
-      authorizationParams: {
-        redirect_uri: getAppBaseUrl(),
-        audience: runtimeConfig.OAUTH_AUDIENCE,
-      }
-    })
-  )
+async function bootstrap() {
+  const app = createApp(App)
+    .use(router)
+    .use(vuetify)
+    .directive('highlight', highlightDirective)
+
+  if (isAuthEnabled) {
+    // Initialize OIDC (and process any login callback) before mounting so
+    // route guards and the UI see the resolved auth state.
+    await initAuth()
+
+    // After a login redirect, navigate back to the originally requested route.
+    const returnTo = consumeReturnTo()
+    if (returnTo) {
+      router.replace(returnTo)
+    }
+  }
+
+  app.mount('#app')
 }
 
-app
-  .directive('highlight', highlightDirective)
-  .mount('#app')
+bootstrap()
diff --git a/src/router/index.js b/src/router/index.js
index f57992719..414e68153 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,7 +4,7 @@ import PipelineReportsView from '../views/pipeline/ReportsView.vue'
 import PipelineReportView from '../views/pipeline/ReportView.vue'
 import ProfileView from "../views/ProfileView.vue";
 import Dashboard from "../views/Dashboard.vue";
-import { createAuthGuard } from "@auth0/auth0-vue";
+import { authGuard } from "@/composables/auth";
 import { getAppBasePath, isAuthEnabled } from '@/composables/runtime'
 
 let routes = []
@@ -22,27 +22,27 @@ if (isAuthEnabled) {
       component: () => import('../views/AboutView.vue')
     },
     {
-      beforeEnter: createAuthGuard(),
+      beforeEnter: authGuard,
       path: '/pipeline/reports',
       name: 'pipelineReports',
       component: PipelineReportsView
     },
     {
-      beforeEnter: createAuthGuard(),
+      beforeEnter: authGuard,
       path: '/pipeline/reports/:id',
       name: 'pipelineReport',
       component: PipelineReportView
     },
     {
-      beforeEnter: createAuthGuard(),
+      beforeEnter: authGuard,
       path: "/profile",
       name: "profile",
       component: ProfileView
     },
     {
-      beforeEnter: createAuthGuard(),
-      path: "/scm/summary",
-      name: "scmSummary",
+      beforeEnter: authGuard,
+      path: "/scm/dashboard",
+      name: "scmDashboard",
       component: Dashboard
     }
   ]
@@ -79,7 +79,13 @@ if (isAuthEnabled) {
 
 const router = createRouter({
   history: createWebHistory(getAppBasePath()),
-  routes
+  routes,
+  // The app shell lives in App.vue and no longer unmounts between routes, so the
+  // document never collapses and the browser keeps the previous scroll offset.
+  // Reset it explicitly, while still honouring back/forward restoration.
+  scrollBehavior(to, from, savedPosition) {
+    return savedPosition || { top: 0 }
+  }
 })
 
 export default router
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 941c53b7b..f1b708db8 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,170 +1,97 @@
 <template>
-  <v-app>
-    <HeadNavigation/>
-    <SideNavigation/>
-
-    <v-main>
-      <v-container class="py-8">
-        <!-- Header Section -->
-        <v-row class="mb-8">
-          <v-col cols="12" class="text-center">
-            <h1 class="text-h3 font-weight-bold mb-4">
-              About
-              <v-icon size="large" class="ml-2">mdi-information</v-icon>
-            </h1>
-            <p class="text-h6 text-medium-emphasis">
-              A monitoring platform for your project's dependencies
-            </p>
-          </v-col>
-        </v-row>
-
-        <!-- Project Overview -->
-        <v-row class="mb-8">
-          <v-col cols="12" lg="8" class="mx-auto">
-            <v-card flat class="pa-6" color="background">
-              <v-card-title class="text-h5 mb-4">
-                <v-icon class="mr-2">mdi-rocket-launch</v-icon>
-                What is Udash?
-              </v-card-title>
-              <v-card-text>
-                <p class="text-body-1 mb-4">
-                  Udash is a web dashboard designed to work with
-                  <a href="https://updatecli.io" target="_blank" class="text-decoration-none">Updatecli</a>,
-                  providing visibility into your dependency update workflows.
-                </p>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-
-        <!-- Community Links -->
-        <v-row class="mb-8">
-          <v-col cols="12">
-            <v-card flat class="pa-6" color="background">
-              <v-card-title class="text-center mb-4">
-                <v-icon class="mr-2" color="red">mdi-heart</v-icon>
-                Join Our Community
-              </v-card-title>
-              <v-card-text>
-                <v-row class="text-center">
-                  <v-col
-                    v-for="link in communityLinks"
-                    :key="link.name"
-                    cols="6"
-                    md="3"
-                  >
-                    <v-btn
-                      :href="link.url"
-                      target="_blank"
-                      variant="outlined"
-                      :prepend-icon="link.icon"
-                      block
-                      class="mb-2"
-                    >
-                      {{ link.name }}
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-
-        <!-- License Section -->
+  <v-container class="page-container">
+
+    <!-- Hero Section -->
+    <section class="py-8 px-6">
+      <h1 class="text-h1 font-weight-bold mb-4">About</h1>
+      <p class="text-h6 text-medium-emphasis mb-0">
+        What Udash is, who builds it
+      </p>
+    </section>
+
+    <!-- Project Overview -->
+    <section class="pt-0 pb-8 px-6">
+      <v-card variant="flat" class="pa-4 pa-sm-6">
+        <h2 class="text-h5 font-weight-bold d-flex align-center mb-4">
+          <v-icon icon="mdi-rocket-launch" class="mr-2" aria-hidden="true"></v-icon>
+          What is Udash?
+        </h2>
+        <p class="text-body-1 mb-0">
+          Udash is a web dashboard designed to work with
+          <a href="https://updatecli.io" target="_blank" rel="noopener noreferrer"
+            class="text-decoration-none">Updatecli</a>,
+          providing visibility into your dependency update workflows.
+        </p>
+      </v-card>
+    </section>
+
+    <!-- Community Links -->
+    <section class="pt-0 pb-8 px-6">
+      <v-card variant="flat" class="pa-4 pa-sm-6">
+        <h2 class="text-h5 font-weight-bold d-flex align-center mb-4">
+          <v-icon icon="mdi-heart" color="error" class="mr-2" aria-hidden="true"></v-icon>
+          Join The Community
+        </h2>
         <v-row>
-          <v-col cols="12">
-            <v-card flat color="background">
-              <v-card-title class="d-flex align-center justify-space-between">
-                <div class="d-flex align-center">
-                  <v-icon class="mr-2">mdi-scale-balance</v-icon>
-                  License Information
-                </div>
-                <v-chip color="success" variant="tonal">
-                  AGPL v3
-                </v-chip>
-              </v-card-title>
-
-              <v-card-text>
-                <v-expansion-panels flat variant="accordion">
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      <div class="d-flex align-center">
-                        <v-icon class="mr-2">mdi-file-document-outline</v-icon>
-                        View Full License Text
-                      </div>
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                      <div class="license-container">
-                        <pre class="text-body-2">{{ license }}</pre>
-                      </div>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                </v-expansion-panels>
-
-                <div class="mt-4">
-                  <p class="text-body-1 mb-3">
-                    Udash is free and open-source software licensed under the
-                    <strong>GNU Affero General Public License v3.0</strong>.
-                  </p>
-                  <v-alert
-                    variant="tonal"
-                    class="mb-3"
-                  >
-                    <p class="mb-2">
-                      <strong>What this means:</strong>
-                    </p>
-                    <ul class="ml-4">
-                      <li>✅ You can use, modify, and distribute this software freely</li>
-                      <li>✅ You can use it for commercial purposes</li>
-                      <li>⚠️ If you modify and run it on a server, you must make the source code available</li>
-                      <li>⚠️ Any derivative works must also be licensed under AGPL v3</li>
-                    </ul>
-                  </v-alert>
-
-                  <div class="d-flex gap-2">
-                    <v-btn
-                      href="https://www.gnu.org/licenses/agpl-3.0.en.html"
-                      target="_blank"
-                      variant="outlined"
-                      prepend-icon="mdi-open-in-new"
-                      size="small"
-                    >
-                      Read License Summary
-                    </v-btn>
-                    <v-btn
-                      href="https://github.com/updatecli/udash/blob/main/LICENSE"
-                      target="_blank"
-                      variant="outlined"
-                      prepend-icon="mdi-github"
-                      size="small"
-                    >
-                      View on GitHub
-                    </v-btn>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
+          <v-col v-for="link in communityLinks" :key="link.name" cols="12" sm="6" md="3">
+            <v-btn :href="link.url" target="_blank" rel="noopener noreferrer" variant="outlined"
+              :prepend-icon="link.icon" block>
+              {{ link.name }}
+            </v-btn>
           </v-col>
         </v-row>
-      </v-container>
-    </v-main>
-
-    <ReleaseFooter/>
-  </v-app>
+      </v-card>
+    </section>
+
+    <!-- License Section -->
+    <section class="pt-0 pb-8 px-6">
+      <v-card variant="flat" class="pa-4 pa-sm-6">
+        <div class="d-flex align-center justify-space-between flex-wrap ga-2 mb-4">
+          <h2 class="text-h5 font-weight-bold d-flex align-center">
+            <v-icon icon="mdi-scale-balance" class="mr-2" aria-hidden="true"></v-icon>
+            License Information
+          </h2>
+          <v-chip color="success" variant="tonal">
+            AGPL v3
+          </v-chip>
+        </div>
+
+        <p class="text-body-1 mb-4">
+          Udash is free and open-source software licensed under the
+          <strong>GNU Affero General Public License v3.0</strong>.
+        </p>
+
+        <v-alert variant="tonal" class="mb-4">
+          <p class="mb-2">
+            <strong>What this means:</strong>
+          </p>
+          <ul class="license-terms">
+            <li v-for="term in licenseTerms" :key="term.text" class="d-flex align-start mb-2">
+              <v-icon :icon="term.icon" size="small" class="mr-2 mt-1" aria-hidden="true"></v-icon>
+              <span class="text-body-2">{{ term.text }}</span>
+            </li>
+          </ul>
+        </v-alert>
+
+        <div class="d-flex ga-2 flex-wrap">
+          <v-btn href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank" rel="noopener noreferrer"
+            variant="outlined" prepend-icon="mdi-open-in-new" size="small">
+            Read License Summary
+          </v-btn>
+          <v-btn href="https://github.com/updatecli/udash/blob/main/LICENSE" target="_blank"
+            rel="noopener noreferrer" variant="outlined" prepend-icon="mdi-github" size="small">
+            View on GitHub
+          </v-btn>
+        </div>
+      </v-card>
+    </section>
+
+  </v-container>
 </template>
 
 <script>
-import ReleaseFooter from '../components/ReleaseFooter.vue';
-import SideNavigation from '../components/SideNavigation.vue';
-import HeadNavigation from '../components/HeadNavigation.vue';
-
 export default {
   name: 'AboutView',
-  components: {
-    ReleaseFooter,
-    SideNavigation,
-    HeadNavigation,
-  },
 
   data: () => ({
     communityLinks: [
@@ -190,700 +117,41 @@ export default {
       }
     ],
 
-    license: `                    GNU AFFERO GENERAL PUBLIC LICENSE
-                      Version 3, 19 November 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-  A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate.  Many developers of free software are heartened and
-encouraged by the resulting cooperation.  However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-  The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community.  It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server.  Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-  An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals.  This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing under
-this license.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU Affero General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Remote Network Interaction; Use with the GNU General Public License.
-
-  Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your version
-supports such interaction) an opportunity to receive the Corresponding
-Source of your version by providing access to the Corresponding Source
-from a network server at no charge, through some standard or customary
-means of facilitating copying of software.  This Corresponding Source
-shall include the Corresponding Source for any work covered by version 3
-of the GNU General Public License that is incorporated pursuant to the
-following paragraph.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU Affero General Public License from time to time.  Such new versions
-will be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source.  For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code.  There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for the
-specific requirements.
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.
-    `
+    // The full licence text is not inlined here: it already lives in the repository's
+    // LICENSE file, and the two buttons below point at an authoritative copy. Keeping a
+    // second copy in the bundle only invited drift between them.
+    licenseTerms: [
+      {
+        icon: 'mdi-arrow-right-circle',
+        text: 'You can use, modify, and distribute this software freely'
+      },
+      {
+        icon: 'mdi-arrow-right-circle',
+        text: 'You can use it for commercial purposes'
+      },
+      {
+        icon: 'mdi-arrow-right-circle',
+        text: 'If you modify and run it on a server, you must make the source code available'
+      },
+      {
+        icon: 'mdi-arrow-right-circle',
+        text: 'Any derivative works must also be licensed under AGPL v3'
+      }
+    ],
   }),
 }
 </script>
 
 <style scoped>
-.license-container {
-  max-height: 400px;
-  overflow-y: auto;
-  border-radius: 8px;
-  background: rgba(var(--v-theme-surface-variant), 0.3);
-  border: 1px solid rgba(var(--v-theme-outline), 0.2);
-}
-
-.license-container pre {
-  margin: 0;
-  padding: 16px;
-  font-size: 0.75rem;
-  line-height: 1.4;
-}
-
-.gap-2 {
-  gap: 0.5rem;
+/* Matches HomeView so both pages share the same left/right content edge. */
+.page-container {
+  max-width: 1100px;
 }
 
-@media (max-width: 600px) {
-  .license-container {
-    max-height: 250px;
-  }
-  
-  .license-container pre {
-    font-size: 0.7rem;
-    padding: 12px;
-  }
+/* Kept as a list for screen readers, but the icons carry the marker, so the
+   default bullets and their indent are dropped. */
+.license-terms {
+  list-style: none;
+  padding-left: 0;
 }
 </style>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index d5097b24a..f3d50132f 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,79 +1,67 @@
 <template>
-  <v-app>
-    <HeadNavigation/>
-    <SideNavigation/>
-
-    <v-main>
-      <v-container
-        class="py-8 px-6"
-        fluid
+  <v-container
+    class="py-8 px-6"
+    fluid
+  >
+    <v-overlay
+      :model-value="isLoading"
+      class="align-center justify-center"
+      :disabled=false
+      :eager=true
+      :no-click-animation=false
+      :persistent=false
+      :opacity="0"
       >
-        <v-overlay
-          :model-value="isLoading"
-          class="align-center justify-center"
-          :disabled=false
-          :eager=true
-          :no-click-animation=false
-          :persistent=false
-          :opacity="0"
-          >
-          <v-progress-circular
-            color="black"
-            indeterminate
-            size="64"
-          ></v-progress-circular>
-        </v-overlay>
-        <v-row>
-          <v-col
-            class="text-right"
-            cols="auto"
-            lg="8"
-            md="8"
-            sm="12"
-          >
-            <h1>Git Dashboard<v-icon icon="mdi-view-dashboard"> </v-icon></h1>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            cols="auto"
-            lg="12"
-            md="12"
-            sm="12"
-          >
-            <PipelineSCMFilter
-              :filter="filter"
-              :show-repository-branch="false"
-              @update-filter="updateFilter"
-              @loaded="setFilterLoaded"
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            cols="auto"
-            lg="12"
-            md="12"
-            sm="12"
-          >
-            <PipelineSCMSSummary
-              v-if="isFilterLoaded"
-              :filter="filter"
-              @loaded="setSummaryLoaded"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-
-    <ReleaseFooter/>
-  </v-app>
+      <v-progress-circular
+        color="black"
+        indeterminate
+        size="64"
+      ></v-progress-circular>
+    </v-overlay>
+    <v-row>
+      <v-col
+        class="text-right"
+        cols="auto"
+        lg="8"
+        md="8"
+        sm="12"
+      >
+        <h1>Git Dashboard<v-icon icon="mdi-view-dashboard"> </v-icon></h1>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        cols="auto"
+        lg="12"
+        md="12"
+        sm="12"
+      >
+        <PipelineSCMFilter
+          :filter="filter"
+          :show-repository-branch="false"
+          @update-filter="updateFilter"
+          @loaded="setFilterLoaded"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        cols="auto"
+        lg="12"
+        md="12"
+        sm="12"
+      >
+        <PipelineSCMSSummary
+          v-if="isFilterLoaded"
+          :filter="filter"
+          @loaded="setSummaryLoaded"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import ReleaseFooter from '../components/ReleaseFooter.vue';
-import SideNavigation from '../components/SideNavigation.vue';
-import HeadNavigation from '../components/HeadNavigation.vue';
 import SCMSDashboard from '../components/scm/_summary.vue';
 
 import PipelineSCMFilter from '../components/scm/_filter.vue';
@@ -81,9 +69,6 @@ import PipelineSCMFilter from '../components/scm/_filter.vue';
 export default {
   name: 'DashboardView',
   components: {
-    ReleaseFooter,
-    SideNavigation,
-    HeadNavigation,
     PipelineSCMFilter,
     PipelineSCMSSummary: SCMSDashboard,
   },
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 99e90e2b3..8c5e0e713 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,250 +1,175 @@
 <template>
-  <v-app>
-    <HeadNavigation/>
-    <SideNavigation/>
-
-    <v-main>
-      <!-- Hero Section -->
-      <v-container>
-        <v-row align="center" justify="center">
-          <v-col cols="12" lg="8" md="10" class="text-center">
-            <h1 class="display-2 font-weight-bold mb-4">
-              Udash <v-icon size="large" icon="mdi-home-city"></v-icon>
-            </h1>
-            <p class="text-h6 mb-8 text-medium-emphasis">
-              the Updatecli dashboard, track automated updates across your Git repositories.
-            </p>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <v-img :src="logo" width="250" cover class="mx-auto" alt="Udash logo"></v-img>
-
-      <!-- Features Section -->
-      <v-container
-        class="py-12"
-      >
-        <v-row>
-          <v-col
-            v-for="feature in features"
-            :key="feature.title"
-            cols="12"
-            md="6"
-            class="mb-6"
+  <v-container class="page-container">
+
+    <!-- Hero Section -->
+    <section class="py-8 px-6">
+      <h1 class="text-h1 font-weight-bold mb-4">Udash</h1>
+      <p class="text-h6 text-medium-emphasis mb-0">
+        The Updatecli dashboard for tracking automated updates across your Git repositories.
+      </p>
+
+      <!-- On an authenticated instance every panel below needs a session, so an
+           anonymous visitor is given the one action that leads anywhere. It sits in
+           the hero rather than in a panel of its own: on a signed-out page it is the
+           only content, so a border would be separating it from nothing. -->
+      <div v-if="!isAuthenticated" class="d-flex align-center flex-wrap ga-4 mt-8">
+        <v-btn color="primary" @click="login">Sign in</v-btn>
+        <span class="text-medium-emphasis">
+          Pipeline activity and reports need an account.
+        </span>
+      </div>
+    </section>
+
+    <!-- Pipeline Activity Section
+
+         ActivityChart is mounted for any viewer allowed to fetch, but it renders
+         nothing until it has reports: an instance that has never reported keeps the
+         onboarding page it needs, without a chart of empty days. Gating the section
+         rather than its heading is what keeps a signed-out visitor from firing a
+         request the API will refuse. -->
+    <section v-if="isAuthenticated" class="px-6" :class="hasActivity ? 'pt-0 pb-8' : ''">
+      <template v-if="hasActivity">
+        <h2 class="text-h4 font-weight-bold mb-2">Pipeline activity</h2>
+        <p class="text-medium-emphasis mb-6">
+          Reports received over the last {{ maxHistoryDays }} days
+        </p>
+      </template>
+
+      <ActivityChart :days="maxHistoryDays" mode="volume" @loaded="onSummaryLoaded"/>
+    </section>
+
+    <!-- Get Started Section
+
+         Shown in full only while there is nothing to report yet. Once reports
+         are flowing it moves below the feature cards as a collapsed panel. -->
+    <section v-if="isAuthenticated && !hasActivity" class="py-8">
+      <v-card flat color="background" class="pa-6">
+        <v-card-title class="text-h4 font-weight-bold px-0 mb-2">Get Started</v-card-title>
+        <p class="text-medium-emphasis mb-8">
+          Connect your Updatecli runner to Udash in a few steps
+        </p>
+
+        <GetStartedSteps/>
+      </v-card>
+    </section>
+
+    <!-- Features Section -->
+    <section v-if="isAuthenticated" class="pt-0 pb-8 px-6">
+      <v-row>
+        <v-col
+          v-for="feature in features"
+          :key="feature.title"
+          cols="12"
+          md="6"
+        >
+          <v-card
+            :to="feature.to"
+            height="100%"
+            variant="outlined"
+            hover
+            class="pa-4 d-flex flex-column"
           >
-            <router-link :to="feature.to" style="text-decoration: none; color: inherit;">
-              <v-card height="100%" color="background" flat class="pa-4 text-center" hover>
-                <v-icon
-                  :icon="feature.icon"
-                  size="48"
-                  class="mb-4"
-                ></v-icon>
-                <v-card-title class="text-h6 mb-2">{{ feature.title }}</v-card-title>
-                <v-card-text>{{ feature.description }}</v-card-text>
-              </v-card>
-            </router-link>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <!-- Quick Start Section -->
-      <v-container class="py-12">
-        <v-row justify="center">
-          <v-col cols="12" lg="8" md="10">
-            <v-card flat class="pa-6" color="background">
-              <v-card-title class="text-h4 text-center mb-6">Get Started</v-card-title>
-
-              <!-- Tabs for different sections -->
-              <v-tabs v-model="activeTab" centered>
-                <v-tab value="quickstart">Quick Start</v-tab>
-                <v-tab value="configure">Configure</v-tab>
-                <v-tab value="feedback">Feedback</v-tab>
-              </v-tabs>
-
-              <v-window v-model="activeTab" class="mt-6">
-                <!-- Quick Start Tab -->
-                <v-window-item value="quickstart">
-                  <div class="text-center py-8">
-                    <v-icon icon="mdi-rocket-launch" size="64" class="mb-4"></v-icon>
-                    <h3 class="text-h5 mb-4">Ready to start?</h3>
-                    <p class="mb-6">
-                      Connect your Updatecli runner to Udash in just a few steps
-                    </p>
-                    <v-btn
-                      size="large"
-                      @click="activeTab = 'configure'"
-                      append-icon="mdi-arrow-right"
-                    >
-                      View Setup Guide
-                    </v-btn>
-                  </div>
-                </v-window-item>
-
-                <!-- Configure Tab -->
-                <v-window-item value="configure">
-                  <v-expansion-panels variant="accordion">
-                    <v-expansion-panel
-                      v-for="(step, index) in configSteps"
-                      :key="index"
-                      :title="`${index + 1}. ${step.title}`"
-                    >
-                      <v-expansion-panel-text>
-                        <div class="mb-3" v-html="step.description"></div>
-                        <pre class="mb-3 overflow-x-auto"
-                          v-if="step.code"
-                        >
-                          <code v-highlight class="language-bash">{{ getStepCode(step) }}</code>
-                        </pre>
-                      </v-expansion-panel-text>
-                    </v-expansion-panel>
-                  </v-expansion-panels>
-                </v-window-item>
-
-                <!-- Feedback Tab -->
-                <v-window-item value="feedback">
-                  <div class="text-center py-4">
-                    <v-icon icon="mdi-heart" size="48" color="red" class="mb-4"></v-icon>
-                    <h3 class="text-h5 mb-4">Join Our Community</h3>
-                    <p class="mb-6">
-                      Help shape the future of dependency monitoring
-                    </p>
-                    <v-row>
-                      <v-col
-                        v-for="contribute in contributeWays"
-                        :key="contribute.title"
-                        cols="12"
-                        sm="6"
-                        md="4"
-                      >
-                        <v-btn
-                          :href="contribute.link"
-                          target="_blank"
-                          variant="outlined"
-                          :prepend-icon="contribute.icon"
-                          block
-                          class="mb-2"
-                        >
-                          {{ contribute.title }}
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                  </div>
-                </v-window-item>
-              </v-window>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-
-    <ReleaseFooter/>
-  </v-app>
+            <v-icon :icon="feature.icon" size="48" class="mb-4"></v-icon>
+            <v-card-title class="text-h6 px-0 mb-2">{{ feature.title }}</v-card-title>
+            <v-card-text class="px-0">{{ feature.description }}</v-card-text>
+            <v-card-actions class="px-0 mt-auto text-info">
+              <span class="font-weight-medium">{{ feature.cta }}</span>
+              <v-icon icon="mdi-arrow-right" size="small" class="ml-1"></v-icon>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+
+    <!-- Setup steps, demoted to reference material once this instance is
+         already reporting: at that point they are only needed to add a runner. -->
+    <section v-if="hasActivity" class="pt-0 pb-8 px-6">
+      <v-expansion-panels variant="accordion" flat="true">
+        <v-expansion-panel title="Connect another runner">
+          <v-expansion-panel-text>
+            <GetStartedSteps/>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </section>
+
+  </v-container>
 </template>
 
 <script>
-import ReleaseFooter from '../components/ReleaseFooter.vue';
-import SideNavigation from '../components/SideNavigation.vue';
-import HeadNavigation from '../components/HeadNavigation.vue';
-import { getDashboardUrl } from '@/composables/runtime';
-import { getApiBaseUrl } from '@/composables/api';
-
-import logo from '@/assets/logo.svg';
+import GetStartedSteps from '../components/GetStartedSteps.vue';
+import ActivityChart from '../components/pipeline/activityChart.vue';
+import { getMaxHistoryDays, isAuthEnabled } from '@/composables/runtime';
+import { useAuth } from '@/composables/auth';
 
 export default {
   name: 'HomeView',
   components: {
-    ReleaseFooter,
-    SideNavigation,
-    HeadNavigation,
+    GetStartedSteps,
+    ActivityChart,
+  },
+  // Everything below the hero needs a session to be worth showing, so the page follows
+  // the auth state the way SideNavigation does. main.js resolves auth before mounting,
+  // which is why there is no loading state to hold: it is already settled here.
+  setup() {
+    if (isAuthEnabled) {
+      const auth = useAuth();
+
+      return {
+        isAuthenticated: auth.isAuthenticated,
+        login() {
+          auth.login();
+        }
+      }
+    }
+
+    // An open instance has no sign-in step, so every visitor is treated as one.
+    return {
+      isAuthenticated: true,
+    }
   },
   data: () => ({
-    logo,
-    activeTab: 'quickstart',
-    host: window.location.origin,
+    // hasActivity stays false while the summary is loading and whenever it could
+    // not be retrieved, so the page falls back to its onboarding layout instead of
+    // showing a broken widget to a first-time visitor.
+    hasActivity: false,
 
     features: [
       {
         title: "Dashboard",
         icon: "mdi-view-dashboard",
         description: "Visualize update status by Git repository with visual overviews.",
-        to: "/scm/dashboard"
+        to: "/scm/dashboard",
+        cta: "Open Dashboard"
       },
       {
         title: "Reports",
         icon: "mdi-book-open-variant",
         description: "Search pipelines by Git repository and branch for audit or debugging purposes.",
-        to: "/pipeline/reports"
-      },
-    ],
-
-    configSteps: [
-      {
-        title: "Install Updatecli",
-        description: "Make sure Updatecli is installed.<br/><a href=\"https://www.updatecli.io/docs/prologue/installation/\" target=\"_blank\" rel=\"noopener noreferrer\">View more installation options</a>",
-        code: `brew tap updatecli/updatecli\nbrew install updatecli`
-      },
-      {
-        title: "Choose authentication method",
-        description: `
-          <ul>
-            <li>Method A (Config file): Stores token locally, secure for local development</li>
-            <li>Method B (Environment variables): Better for CI/CD pipelines and containers</li>
-          </ul>
-        `,
-        code: ""
-      },
-      {
-        title: "Authenticate (Method A - Config File)",
-        description: "Configure Updatecli to use a local config file to connect to Udash",
-        codeTemplate: true,
-        code: (apiUrl, dashUrl) => `updatecli udash login --experimental --api-url "${apiUrl}" "${dashUrl}"`
-      },
-      {
-        title: "Authenticate (Method B - Environment Variables)",
-        description: "Set environment variables for Updatecli to connect to Udash",
-        codeTemplate: true,
-        code: (apiUrl, dashUrl) => `export UPDATECLI_UDASH_API_URL="${apiUrl}"\nexport UPDATECLI_UDASH_URL="${dashUrl}"\nexport UPDATECLI_UDASH_ACCESS_TOKEN="your_token_here"  # Only if required by your Udash instance`
-      },
-      {
-        title: "Run Updatecli",
-        description: "Execute Updatecli with the --experimental flag to send reports to Udash",
-        code: `updatecli diff --experimental`
+        to: "/pipeline/reports",
+        cta: "View Reports"
       },
     ],
-
-    contributeWays: [
-      {
-        title: "Star on GitHub",
-        icon: "mdi-star",
-        link: "https://github.com/updatecli/udash"
-      },
-      {
-        title: "Report Issues",
-        icon: "mdi-bug",
-        link: "https://github.com/updatecli/udash/issues"
-      },
-      {
-        title: "Contribute",
-        icon: "mdi-code-tags",
-        link: "https://github.com/updatecli/udash/blob/main/CONTRIBUTING.md"
-      }
-    ]
   }),
   computed: {
-    apiBaseUrl() {
-      return getApiBaseUrl()
-    },
-    dashboardUrl() {
-      return getDashboardUrl()
+    // The activity band never looks further back than the instance is configured to
+    // serve, so lowering MAX_HISTORY_DAYS narrows the chart along with the filter.
+    maxHistoryDays() {
+      return getMaxHistoryDays()
     }
   },
   methods: {
-    getStepCode(step) {
-      if (step.codeTemplate && typeof step.code === 'function') {
-        return step.code(this.apiBaseUrl, this.dashboardUrl)
-      }
-      return step.code || ''
+    onSummaryLoaded(summary) {
+      this.hasActivity = Boolean(summary)
     }
   }
 }
 </script>
+
+<style scoped>
+/* Single shared wrapper so the hero, Get Started, and card row share one
+   left/right edge (Vuetify's default v-container maxes out much wider). */
+.page-container {
+  max-width: 1100px;
+}
+</style>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 4f83aec24..a6a138ecf 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,88 +1,71 @@
 <template>
-  <v-app>
-    <HeadNavigation/>
-    <SideNavigation/>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <!-- The userinfo fetch is intentionally non-fatal, so without this a failure
+             would be indistinguishable from a user who simply has no details set. -->
+        <v-alert
+          v-if="error"
+          type="warning"
+          variant="tonal"
+          density="compact"
+          class="mx-auto mb-4"
+          max-width="344"
+        >
+          Could not load profile details: {{ error.message }}
+        </v-alert>
 
-    <v-main>
-      <v-container>
-        <v-row>
-          <v-col
-            class="text-left"
-            cols="auto"
-            lg="12"
-            md="12"
-            sm="12"
-          >
-            <v-card
-              class="mx-auto text-center"
-              max-width="344"
-              flat
-            >
-              <img
-                :src="user?.picture"
-                alt="User's profile picture"
-                class="rounded-circle img-fluid profile-picture"
-              />
+        <v-card
+          class="mx-auto text-center"
+          max-width="344"
+          flat
+        >
+          <v-avatar size="120" color="surface-variant" class="mt-6">
+            <v-img v-if="user?.picture" :src="user.picture" alt="User's profile picture" cover></v-img>
+            <v-icon v-else icon="mdi-account" size="64"></v-icon>
+          </v-avatar>
 
-              <v-card-title>
-                  Profile
-              </v-card-title>
-              <v-card-text>
-                <v-text-field
-                  label="Name"
-                  :model-value=user?.name
-                  readonly
-                  variant="outlined"
-                ></v-text-field>
-                <v-text-field
-                  label="Email"
-                  :model-value=user?.email
-                  readonly
-                  variant="outlined"
-                ></v-text-field>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            class="text-right"
-            cols="auto"
-            lg="8"
-            md="8"
-            sm="12"
-          >
-            <highlightjs language="json" :code="JSON.stringify(user, null, 2)" />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-
-    <ReleaseFooter/>
-
-  </v-app>
+          <v-card-title>
+              Profile
+          </v-card-title>
+          <v-card-text>
+            <v-text-field
+              label="Username"
+              :model-value="user?.preferred_username"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+            <v-text-field
+              label="Name"
+              :model-value="user?.name"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+            <v-text-field
+              label="Email"
+              :model-value="user?.email"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-  import { useAuth0 } from '@auth0/auth0-vue';
-  
-  import ReleaseFooter from '../components/ReleaseFooter.vue';
-  import SideNavigation from '../components/SideNavigation.vue';
-  import HeadNavigation from '../components/HeadNavigation.vue';
-  
+  import { useAuth } from '@/composables/auth';
+
   export default {
     name: "ProfileView",
-    components: {
-      ReleaseFooter,
-      SideNavigation,
-      HeadNavigation,
-    },
     setup() {
-      const auth0 = useAuth0();
-      
+      const auth = useAuth();
+
       return {
-        user: auth0.user,
+        user: auth.user,
+        error: auth.error,
       }
     }
   };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/pipeline/ReportView.vue b/src/views/pipeline/ReportView.vue
index 3199c2f2a..9b5a37532 100644
--- a/src/views/pipeline/ReportView.vue
+++ b/src/views/pipeline/ReportView.vue
@@ -1,39 +1,15 @@
 <template>
-  <v-app>
-    <HeadNavigation/>
-    <SideNavigation/>
-
-    <v-main>
-      <PipelineReport/>
-    </v-main>
-
-    <ReleaseFooter/>
-  </v-app>
+  <PipelineReport/>
 </template>
 
 <script>
 
-import ReleaseFooter from '../../components/ReleaseFooter.vue';
-import SideNavigation from '../../components/SideNavigation.vue';
-import HeadNavigation from '../../components/HeadNavigation.vue';
 import PipelineReport from '../../components/pipeline/report.vue';
 
 export default {
   name: 'PipelineReportView',
   components: {
-    ReleaseFooter,
-    SideNavigation,
-    HeadNavigation,
-    PipelineReport: PipelineReport,
+    PipelineReport,
   },
-  data: () => ({
-    links:[
-      {
-      name: "Updatecli",
-      to: "https://www.updatecli.io",
-      icon: "mdi-arrow-right-circle",
-      },
-  ]
-  })
 }
 </script>
diff --git a/src/views/pipeline/ReportsView.vue b/src/views/pipeline/ReportsView.vue
index e7d21d211..6fb6453c5 100644
--- a/src/views/pipeline/ReportsView.vue
+++ b/src/views/pipeline/ReportsView.vue
@@ -1,170 +1,159 @@
 <template>
-  <v-app>
-    <HeadNavigation/>
-    <SideNavigation/>
-
-    <v-main>
-      <v-overlay
-        :model-value="isLoading"
-        class="align-center justify-center"
-        :disabled=true
-        :eager=true
-        :no-click-animation=true
-        :persistent=true
-        :opacity="0"
+  <v-overlay
+    :model-value="isLoading"
+    class="align-center justify-center"
+    :disabled=true
+    :eager=true
+    :no-click-animation=true
+    :persistent=true
+    :opacity="0"
+  >
+    <v-progress-circular
+      color="black"
+      indeterminate
+      size="64"
+    ></v-progress-circular>
+  </v-overlay>
+  <v-container>
+    <v-row>
+      <v-col
+        class="text-right"
+        cols="auto"
+        lg="8"
+        md="8"
+        sm="12"
       >
-        <v-progress-circular
-          color="black"
-          indeterminate
-          size="64"
-        ></v-progress-circular>
-      </v-overlay>
-      <v-container>
-        <v-row>
-          <v-col
-            class="text-right"
-            cols="auto"
-            lg="8"
-            md="8"
-            sm="12"
-          >
-          <h1>
-            Reports <v-icon icon="mdi-book-open-variant"></v-icon>
-          </h1>
-          </v-col>
-        </v-row>
-      </v-container>
-      <v-container>
-        <v-row>
-          <v-col
-            cols="auto"
-            lg="12"
-            md="12"
-            sm="12"
-          >
-            <!-- Add explanatory header for filter -->
-            <div class="mb-3">
-              <h3 class="text-h6 d-flex align-items-center">
-                Filter Reports
-                <v-tooltip text="Search and filter pipeline reports by repository, branch, or status. Use the dropdown to select specific repositories or search by keywords.">
-                  <template v-slot:activator="{ props }">
-                    <v-icon
-                      v-bind="props"
-                      size="small"
-                      class="ml-2"
-                      color="grey-darken-1"
-                    >
-                      mdi-information-outline
-                    </v-icon>
-                  </template>
-                </v-tooltip>
-              </h3>
-              <p class="text-caption text-grey-darken-1 mb-0">
-                Search repositories, branches, or filter by status
-              </p>
-            </div>
-
-            <PipelineSCMFilter
-              :filter="filter"
-              :show-repository-branch="true"
-              @update-filter="updateFilter"
-              @loaded="setFilterLoaded"
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            cols="auto"
-            lg="12"
-            md="12"
-            sm="12"
-          >
-            <!-- Add explanatory header -->
-            <div class="mb-3">
-              <h3 class="text-h6 d-flex align-items-center">
-                Latest Status Overview
-                <v-tooltip text="Shows the status summary from the most recent pipeline reports for the current repository branch">
-                  <template v-slot:activator="{ props }">
-                    <v-icon
-                      v-bind="props"
-                      size="small"
-                      class="ml-2"
-                      color="grey-darken-1"
-                    >
-                      mdi-information-outline
-                    </v-icon>
-                  </template>
-                </v-tooltip>
-              </h3>
-              <p class="text-caption text-grey-darken-1 mb-0">
-                Current status from latest pipeline runs
-              </p>
-            </div>
-
-            <PipelineSCMSummary
-              v-if="isFilterLoaded"
-              :hideButton=true
-              :filter="filter"
-              :fullWidth=true
-              :disableLinks=true
-              :hideRepositoryTitle=true
-              @update-filter="updateFilter"
-              @loaded="setSummaryLoaded"
-              class="align-center justify-center"
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            cols="auto"
-            lg="12"
-            md="12"
-            sm="12"
-          >
-            <!-- Add explanatory header for pipeline reports -->
-            <div class="mb-3">
-              <h3 class="text-h6 d-flex align-items-center">
-                Detailed Reports
-                <v-tooltip text="Complete list of pipeline reports with detailed information including timestamps, status, and actions. Click on any report to view its configuration or access related resources like pull requests.">
-                  <template v-slot:activator="{ props }">
-                    <v-icon
-                      v-bind="props"
-                      size="small"
-                      class="ml-2"
-                      color="grey-darken-1"
-                    >
-                      mdi-information-outline
-                    </v-icon>
-                  </template>
-                </v-tooltip>
-              </h3>
-              <p class="text-caption text-grey-darken-1 mb-0">
-                Historical pipeline execution data with full details
-              </p>
-            </div>
+      <h1>
+        Reports <v-icon icon="mdi-book-open-variant"></v-icon>
+      </h1>
+      </v-col>
+    </v-row>
+  </v-container>
+  <v-container>
+    <v-row>
+      <v-col
+        cols="auto"
+        lg="12"
+        md="12"
+        sm="12"
+      >
+        <!-- Add explanatory header for filter -->
+        <div class="mb-3">
+          <h3 class="text-h6 d-flex align-items-center">
+            Filter Reports
+            <v-tooltip text="Search and filter pipeline reports by repository, branch, or status. Use the dropdown to select specific repositories or search by keywords.">
+              <template v-slot:activator="{ props }">
+                <v-icon
+                  v-bind="props"
+                  size="small"
+                  class="ml-2"
+                  color="grey-darken-1"
+                >
+                  mdi-information-outline
+                </v-icon>
+              </template>
+            </v-tooltip>
+          </h3>
+          <p class="text-caption text-grey-darken-1 mb-0">
+            Search repositories, branches, or filter by status
+          </p>
+        </div>
 
-            <PipelineReports
-              v-if="isFilterLoaded"
-              :filter="filter"
-              @update-filter="updateFilter"
-              @loaded="setReportsLoaded"
-            />
-          </v-col>
-        </v-row>
+        <PipelineSCMFilter
+          ref="scmFilter"
+          :filter="filter"
+          :show-repository-branch="true"
+          @update-filter="updateFilter"
+          @loaded="setFilterLoaded"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        cols="auto"
+        lg="12"
+        md="12"
+        sm="12"
+      >
+        <!-- Add explanatory header -->
+        <div class="mb-3">
+          <h3 class="text-h6 d-flex align-items-center">
+            Latest Status Overview
+            <v-tooltip text="Shows the status summary from the most recent pipeline reports for the current repository branch">
+              <template v-slot:activator="{ props }">
+                <v-icon
+                  v-bind="props"
+                  size="small"
+                  class="ml-2"
+                  color="grey-darken-1"
+                >
+                  mdi-information-outline
+                </v-icon>
+              </template>
+            </v-tooltip>
+          </h3>
+          <p class="text-caption text-grey-darken-1 mb-0">
+            Current status from latest pipeline runs
+          </p>
+        </div>
 
-      </v-container>
+        <PipelineSCMSummary
+          v-if="isFilterLoaded"
+          :hideButton=true
+          :filter="filter"
+          :fullWidth=true
+          :disableLinks=true
+          :hideRepositoryTitle=true
+          @update-filter="updateFilter"
+          @toggle-result="toggleResult"
+          @loaded="setSummaryLoaded"
+          class="align-center justify-center"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        cols="auto"
+        lg="12"
+        md="12"
+        sm="12"
+      >
+        <!-- Add explanatory header for pipeline reports -->
+        <div class="mb-3">
+          <h3 class="text-h6 d-flex align-items-center">
+            Detailed Reports
+            <v-tooltip text="Complete list of pipeline reports with detailed information including timestamps, status, and actions. Click on any report to view its configuration or access related resources like pull requests.">
+              <template v-slot:activator="{ props }">
+                <v-icon
+                  v-bind="props"
+                  size="small"
+                  class="ml-2"
+                  color="grey-darken-1"
+                >
+                  mdi-information-outline
+                </v-icon>
+              </template>
+            </v-tooltip>
+          </h3>
+          <p class="text-caption text-grey-darken-1 mb-0">
+            Historical pipeline execution data with full details
+          </p>
+        </div>
 
-    </v-main>
+        <PipelineReports
+          v-if="isFilterLoaded"
+          :filter="filter"
+          @update-filter="updateFilter"
+          @loaded="setReportsLoaded"
+        />
+      </v-col>
+    </v-row>
 
-    <ReleaseFooter/>
-  </v-app>
+  </v-container>
 </template>
 
 <script>
 
-import ReleaseFooter from '../../components/ReleaseFooter.vue';
-import SideNavigation from '../../components/SideNavigation.vue';
-import HeadNavigation from '../../components/HeadNavigation.vue';
 import PipelineReports from '../../components/pipeline/reports.vue';
 
 import PipelineSCMSummary from '../../components/scm/_summary.vue';
@@ -176,9 +165,6 @@ export default {
     this.cancelAutoUpdate();
   },
   components: {
-    ReleaseFooter,
-    SideNavigation,
-    HeadNavigation,
     PipelineReports,
     PipelineSCMFilter,
     PipelineSCMSummary
@@ -241,6 +227,22 @@ export default {
     updateFilter: function(filter) {
       this.filter = filter;
     },
+    // The summary doughnuts narrow the filter rather than filtering themselves, so
+    // they keep showing the whole breakdown of the branch while the reports below
+    // shrink to the result which was clicked. The filter owns that state, hence the
+    // hand off rather than a second copy of it here.
+    //
+    // openAction is set only by the segments standing for one half of a result split on
+    // whether a pull request is still open. Both dimensions are then handed over
+    // together, so the reports below never show a half applied filter.
+    toggleResult: function(result, openAction) {
+      if (openAction === undefined) {
+        this.$refs.scmFilter?.toggleResult(result);
+        return;
+      }
+
+      this.$refs.scmFilter?.toggleResultWithOpenAction(result, openAction ? 'open' : 'none');
+    },
     isAllComponentsLoaded: function() {
       if (this.isFilterLoaded && this.isSummaryLoaded && this.isReportsLoaded) {
         return true