feat: polish session warning experience

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

@@ -322,6 +322,114 @@
   background: linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(243, 248, 255, 0.92));
 }
 
+.session-warning-dialog {
+  position: relative;
+  overflow: hidden;
+  padding-top: 28px;
+  background:
+    radial-gradient(circle at top right, rgba(201, 37, 37, 0.12), transparent 30%),
+    radial-gradient(circle at top left, rgba(255, 191, 120, 0.2), transparent 36%),
+    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,255,0.98));
+}
+
+.session-warning-orb {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 62px;
+  height: 62px;
+  display: grid;
+  place-items: center;
+}
+
+.session-warning-orb-ring,
+.session-warning-orb-core {
+  position: absolute;
+  border-radius: 999px;
+}
+
+.session-warning-orb-ring {
+  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));
+  box-shadow: 0 12px 24px rgba(128, 46, 18, 0.12);
+}
+
+.session-warning-orb-core {
+  inset: 9px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(180deg, #fff5ef, #ffe5d7);
+  color: #a53b17;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.session-warning-kicker {
+  color: #9a4a1e;
+}
+
+.session-warning-panels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.session-warning-panel {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid rgba(217, 227, 238, 0.92);
+  border-radius: 16px;
+  background: rgba(255,255,255,0.82);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
+}
+
+.session-warning-panel strong {
+  color: #152743;
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.session-warning-panel span {
+  color: #53657e;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.session-warning-countdown {
+  margin-bottom: 2px;
+  color: #9a3c1d;
+  font-weight: 700;
+}
+
+.session-warning-status {
+  margin: 0 0 4px;
+  color: #0f6b45;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+@media (max-width: 760px) {
+  .session-warning-panels {
+    grid-template-columns: 1fr;
+  }
+
+  .session-warning-dialog {
+    padding-top: 74px;
+  }
+
+  .session-warning-orb {
+    top: 14px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+}
+
 .app-notification-item.is-unread {
   border-color: rgba(0, 0, 120, 0.22);
   box-shadow: inset 3px 0 0 rgba(0, 0, 120, 0.9);

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

@@ -5,8 +5,9 @@
   const warningLeadSeconds = Math.min(300, Math.max(60, Math.floor(config.idleTimeoutSeconds / 6)));
   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 extendButton = document.getElementById("app-session-warning-extend");
-  if (!modal || !countdown || !extendButton) return;
+  if (!modal || !countdown || !extendButton || !status) return;
 
   let lastConfirmedAt = Date.now();
   let warningVisible = false;
@@ -27,8 +28,19 @@
     warningVisible = false;
   }
 
+  function showStatus(message) {
+    status.textContent = message;
+    status.hidden = false;
+  }
+
+  function hideStatus() {
+    status.hidden = true;
+    status.textContent = "";
+  }
+
   function showWarning(secondsLeft) {
     countdown.textContent = `Noch etwa ${secondsLeft} Sekunden bis zur automatischen Abmeldung.`;
+    hideStatus();
     if (warningVisible) return;
     modal.hidden = false;
     modal.setAttribute("aria-hidden", "false");
@@ -54,7 +66,11 @@
         return;
       }
       lastConfirmedAt = Date.now();
-      hideWarning();
+      showStatus("Sitzung erfolgreich verlängert.");
+      window.setTimeout(function () {
+        hideWarning();
+        hideStatus();
+      }, 1200);
     } catch (_error) {
       window.location.href = config.loginUrl;
     } finally {
@@ -75,7 +91,11 @@
   }
 
   extendButton.addEventListener("click", function () {
+    extendButton.disabled = true;
     sendKeepalive();
+    setTimeout(function () {
+      extendButton.disabled = false;
+    }, 800);
   });
 
   setInterval(tick, 1000);

backend/workflows/templates/workflows/base_shell.html

@@ -105,15 +105,30 @@
   </div>
   <div class="confirm-modal" id="app-session-warning-modal" hidden aria-hidden="true">
     <div class="confirm-backdrop"></div>
-    <div class="confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="app-session-warning-title" aria-describedby="app-session-warning-copy">
+    <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>
+      </div>
       <div class="confirm-dialog-head">
-        <p class="action-progress-kicker">{% trans "Sitzung" %}</p>
+        <p class="action-progress-kicker session-warning-kicker">{% trans "Sitzung" %}</p>
         <h2 id="app-session-warning-title">{% trans "Ihre Sitzung läuft bald ab" %}</h2>
       </div>
       <p class="confirm-message" id="app-session-warning-copy">
         {% trans "Sie sind weiterhin angemeldet, aber diese Sitzung wird bald ablaufen. Bleiben Sie aktiv, wenn Sie weiterarbeiten möchten." %}
       </p>
-      <p class="confirm-message" id="app-session-warning-countdown"></p>
+      <div class="session-warning-panels" aria-hidden="true">
+        <div class="session-warning-panel">
+          <strong>{% trans "Was passiert?" %}</strong>
+          <span>{% trans "Ohne Bestätigung endet die aktuelle Anmeldung automatisch." %}</span>
+        </div>
+        <div class="session-warning-panel">
+          <strong>{% trans "Empfohlener Schritt" %}</strong>
+          <span>{% trans "Verlängern Sie die Sitzung, bevor Sie weiter speichern oder sensible Aktionen ausführen." %}</span>
+        </div>
+      </div>
+      <p class="confirm-message session-warning-countdown" id="app-session-warning-countdown"></p>
+      <p class="session-warning-status" id="app-session-warning-status" hidden aria-live="polite"></p>
       <div class="confirm-actions">
         <form method="post" action="{% url 'logout' %}">
           {% csrf_token %}

backend/workflows/templates/workflows/developer_handbook.html

@@ -839,6 +839,17 @@ make backup-verify BACKUP_DIR=backups/backup_YYYYmmdd_HHMMSS</code></pre>
       <p>Create and verify backup bundles.</p>
     </div>
 
+    <div class="box">
+      <h3>Session handling</h3>
+      <p>The shell warns authenticated users before the idle timeout is reached.</p>
+      <ul>
+        <li><code>SESSION_IDLE_TIMEOUT_SECONDS</code> controls the idle session window.</li>
+        <li><code>SENSITIVE_ACTION_REAUTH_SECONDS</code> controls when sensitive POST actions require fresh authentication.</li>
+        <li><code>/session/keepalive/</code> refreshes both session timestamps when the user chooses <code>Angemeldet bleiben</code>.</li>
+      </ul>
+      <p>This warning is meant to protect work in progress without silently relaxing the security middleware.</p>
+    </div>
+
     <h2 id="troubleshooting">20) Troubleshooting</h2>
     <div class="box">
       <h3>Localhost still looks stale after the server is already fixed</h3>

backend/workflows/tests/test_session_warning.py

@@ -32,6 +32,8 @@ class SessionWarningTests(TestCase):
         self.assertContains(response, 'WorkdockSessionConfig')
         self.assertContains(response, '/session/keepalive/')
         self.assertContains(response, 'Ihre Sitzung läuft bald ab')
+        self.assertContains(response, 'app-session-warning-status')
+        self.assertContains(response, 'Was passiert?')
 
     def test_keepalive_refreshes_session_timestamps(self):
         client = Client(HTTP_HOST='localhost')