feat: polish session warning experience

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>