feat: add session warning countdown ring

backend/workflows/static/workflows/css/app_chrome.css

@@ -352,8 +352,15 @@
   inset: 0;
   background:
     radial-gradient(circle, rgba(255,255,255,0.92) 38%, rgba(255,255,255,0) 39%),
-    conic-gradient(from 0deg, rgba(201,37,37,0.16), rgba(255,191,120,0.64), rgba(201,37,37,0.2));
+    conic-gradient(
+      from -90deg,
+      rgba(201, 37, 37, 0.88) 0deg,
+      rgba(255, 191, 120, 0.74) calc(var(--session-warning-progress, 1) * 360deg),
+      rgba(225, 233, 242, 0.9) calc(var(--session-warning-progress, 1) * 360deg),
+      rgba(225, 233, 242, 0.9) 360deg
+    );
   box-shadow: 0 12px 24px rgba(128, 46, 18, 0.12);
+  transition: background 220ms linear;
 }
 
 .session-warning-orb-core {
@@ -362,9 +369,23 @@
   place-items: center;
   background: linear-gradient(180deg, #fff5ef, #ffe5d7);
   color: #a53b17;
-  font-size: 24px;
-  font-weight: 900;
+  text-align: center;
   line-height: 1;
+  gap: 1px;
+}
+
+.session-warning-orb-value {
+  display: block;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.session-warning-orb-label {
+  display: block;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .session-warning-kicker {

backend/workflows/static/workflows/js/session_warning.js

@@ -6,8 +6,10 @@
   const modal = document.getElementById("app-session-warning-modal");
   const countdown = document.getElementById("app-session-warning-countdown");
   const status = document.getElementById("app-session-warning-status");
+  const orb = modal.querySelector(".session-warning-orb-ring");
+  const orbValue = document.getElementById("app-session-warning-seconds");
   const extendButton = document.getElementById("app-session-warning-extend");
-  if (!modal || !countdown || !extendButton || !status) return;
+  if (!modal || !countdown || !extendButton || !status || !orb || !orbValue) return;
 
   let lastConfirmedAt = Date.now();
   let warningVisible = false;
@@ -40,6 +42,8 @@
 
   function showWarning(secondsLeft) {
     countdown.textContent = `Noch etwa ${secondsLeft} Sekunden bis zur automatischen Abmeldung.`;
+    orb.style.setProperty("--session-warning-progress", String(Math.max(0, Math.min(1, secondsLeft / warningLeadSeconds))));
+    orbValue.textContent = String(secondsLeft);
     hideStatus();
     if (warningVisible) return;
     modal.hidden = false;
@@ -67,6 +71,8 @@
       }
       lastConfirmedAt = Date.now();
       showStatus("Sitzung erfolgreich verlängert.");
+      orb.style.setProperty("--session-warning-progress", "1");
+      orbValue.textContent = "OK";
       window.setTimeout(function () {
         hideWarning();
         hideStatus();

backend/workflows/templates/workflows/base_shell.html

@@ -108,7 +108,10 @@
     <div class="confirm-dialog session-warning-dialog" role="dialog" aria-modal="true" aria-labelledby="app-session-warning-title" aria-describedby="app-session-warning-copy">
       <div class="session-warning-orb" aria-hidden="true">
         <span class="session-warning-orb-ring"></span>
-        <span class="session-warning-orb-core">!</span>
+        <span class="session-warning-orb-core">
+          <span class="session-warning-orb-value" id="app-session-warning-seconds">!</span>
+          <span class="session-warning-orb-label">{% trans "Sek." %}</span>
+        </span>
       </div>
       <div class="confirm-dialog-head">
         <p class="action-progress-kicker session-warning-kicker">{% trans "Sitzung" %}</p>

backend/workflows/tests/test_session_warning.py

@@ -33,6 +33,7 @@ class SessionWarningTests(TestCase):
         self.assertContains(response, '/session/keepalive/')
         self.assertContains(response, 'Ihre Sitzung läuft bald ab')
         self.assertContains(response, 'app-session-warning-status')
+        self.assertContains(response, 'app-session-warning-seconds')
         self.assertContains(response, 'Was passiert?')
 
     def test_keepalive_refreshes_session_timestamps(self):