Sidebar: Refresh-Status direkt im HTML gerendert statt dynamisch

renderIncidentItem() baut den Refresh-Status (Gold-Rand, Spinner,
Statustext, Warteschlange-Position) direkt ins HTML ein. Ueberlebt
jetzt renderSidebar()-Aufrufe bei Lagenwechsel und Aktualisierungen.

Sidebar wird nach jedem WebSocket-Status-Update neu gerendert,
damit der Status fuer ALLE Lagen immer sichtbar bleibt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/static/js/app.js

@@ -2043,6 +2043,8 @@ async handleRefresh() {
         const isFirst = inc && !inc.summary;
         // Always update sidebar status (visible for all incidents)
         UI._updateSidebarRefreshStatus(msg.incident_id, status, msg.data);
+        // Re-render sidebar so status is baked into HTML (survives future re-renders)
+        this.renderSidebar();
         if (msg.incident_id === this.currentIncidentId) {
             UI.showProgress(status, msg.data, msg.incident_id, isFirst);
             this._updateRefreshButton(status !== 'idle');

src/static/js/components.js

@@ -40,12 +40,32 @@ const UI = {
         const activeClass = isActive ? 'active' : '';
         const creator = (incident.created_by_username || '').split('@')[0];
 
+        // Determine refresh status for sidebar display
+        let refreshClass = '';
+        let refreshStatusHtml = '';
+        if (isRefreshing) {
+            const state = this._progressState[incident.id];
+            const step = state ? state.step : 'researching';
+            const isQueued = (step === 'queued');
+
+            if (isQueued) {
+                refreshClass = ' queued-item';
+                const pos = state && state._queuePos ? ' (#' + state._queuePos + ')' : '';
+                refreshStatusHtml = '<div class="incident-refresh-status queued-status" id="sidebar-refresh-' + incident.id + '"><span>Warteschlange' + pos + '</span></div>';
+            } else {
+                refreshClass = ' refreshing-item';
+                const label = this._getStepLabel(step);
+                refreshStatusHtml = '<div class="incident-refresh-status" id="sidebar-refresh-' + incident.id + '"><span class="mini-spinner"></span><span>' + label + '</span><span id="sidebar-refresh-timer-' + incident.id + '" style="margin-left:auto;font-family:var(--font-mono,monospace);font-size:10px;color:var(--text-disabled);"></span></div>';
+            }
+        }
+
         return `
-            <div class="incident-item ${activeClass}" data-id="${incident.id}" onclick="App.selectIncident(${incident.id})" role="button" tabindex="0">
+            <div class="incident-item ${activeClass}${refreshClass}" data-id="${incident.id}" onclick="App.selectIncident(${incident.id})" role="button" tabindex="0">
                 <span class="incident-dot ${dotClass}" id="dot-${incident.id}" aria-hidden="true"></span>
                 <div style="flex:1;min-width:0;">
                     <div class="incident-name">${this.escape(incident.title)}</div>
                     <div class="incident-meta">${incident.article_count} Artikel &middot; ${this.escape(creator)}</div>
+                    ${refreshStatusHtml}
                 </div>
                 ${incident.visibility === 'private' ? '<span class="badge badge-private" style="font-size:9px;" aria-label="Private Lage">PRIVAT</span>' : ''}
                 ${incident.refresh_mode === 'auto' ? '<span class="badge badge-auto" role="img" aria-label="Auto-Refresh aktiv">&#x21bb;</span>' : ''}
@@ -606,6 +626,9 @@ const UI = {
 
         if (isQueued) {
             const pos = (extra && extra.queue_position) ? extra.queue_position : '';
+            // Store queue position in state for renderIncidentItem
+            const pState = this._progressState[incidentId];
+            if (pState && pos) pState._queuePos = pos;
             statusEl.className = 'incident-refresh-status queued-status';
             statusEl.innerHTML = '<span>Warteschlange' + (pos ? ' (#' + pos + ')' : '') + '</span>';
         } else {