v0.12.6-hotfix

web/index.html

@@ -891,8 +891,8 @@
         </div>
         <div class="flow-natural-preview" id="flowNaturalPreview">
           <button type="button" class="flow-preview-toggle" data-action="flow-preview-toggle"
-            aria-expanded="false"><strong data-i18n="flow.interpretation">Interpretation</strong><span
-              class="flow-preview-toggle-icon" aria-hidden="true">⌃</span></button>
+            aria-expanded="false"><strong data-i18n="flow.previewDetails">Interpretation and Flow cycle</strong><span
+              class="flow-preview-toggle-icon" aria-hidden="true">⌄</span></button>
           <div class="flow-preview-details">
             <div class="flow-preview-item flow-preview-interpretation"><strong
                 data-i18n="flow.interpretation">Interpretation</strong><span id="flowInterpretation"></span></div>

web/js/realtime.js

@@ -1,3 +1,15 @@
+function logNotificationBadge(item) {
+  const notification = item?.metadata?.notification;
+  if (notification?.status !== 'silent') return '';
+  const reasonKey = {
+    alert_type_disabled: 'logs.silentAlertTypeDisabled',
+    notifications_disabled: 'logs.silentNotificationsDisabled',
+    mode_filtered: 'logs.silentModeFiltered',
+    cooldown: 'logs.silentCooldown',
+  }[notification.reason] || 'logs.silentHint';
+  return `<span class="badge silent log-notification-badge" title="${esc(tr(reasonKey))}">${esc(tr('logs.silent'))}</span>`;
+}
+
 async function loadLogs() {
   renderLogRetention();
   try {
@@ -5,7 +17,7 @@ async function loadLogs() {
     const level = $('#logLevelFilter')?.value || 'all', category = $('#logCategoryFilter')?.value || 'all';
     const logs = (data.events || []).filter(item => (level === 'all' || item.level === level) && (category === 'all' || logCategory(item.kind) === category));
     $('#logList').innerHTML = logs.length
-      ? logs.map(item => `<div class="log-row ${esc(item.level)} category-${esc(logCategory(item.kind))}"><time>${esc(new Date(item.timestamp).toLocaleTimeString(locale()))}</time><span class="log-category">${esc(logCategory(item.kind))}</span><span class="kind">${esc(item.kind)}</span><span class="message">${esc(item.message)}</span></div>`).join('')
+      ? logs.map(item => `<div class="log-row ${esc(item.level)} category-${esc(logCategory(item.kind))}"><time>${esc(new Date(item.timestamp).toLocaleTimeString(locale()))}</time><span class="log-category">${esc(logCategory(item.kind))}</span><span class="kind">${esc(item.kind)}${logNotificationBadge(item)}</span><span class="message">${esc(item.message)}</span></div>`).join('')
       : `<div class="empty"><strong>${esc(tr('logs.emptyTitle'))}</strong>${esc(tr('logs.emptyText'))}</div>`;
   } catch (error) { toast(error.message, true); }
 }
@@ -70,6 +82,7 @@ async function handleWebSocketMessage(event) {
     else if (message.event === 'gree.frame') { if (app.settings?.debug?.overlay_enabled) debugLine('GREE', `${data.direction || '?'} ${data.protocol_version || ''}`, data.device_name || data.device_id || data.target || '', message.timestamp, data.payload); }
     else if (message.event === 'api.request') { if (app.settings?.debug?.overlay_enabled) debugLine('HTTP', `${data.method || '?'} ${data.status || ''}`, `${data.path || ''} · ${data.duration_ms ?? '?'} ms`, message.timestamp); }
     else if (message.event === 'log.created') { if (app.settings?.debug?.overlay_enabled) debugLine('API', data.kind || data.level || 'log', data.message || '', message.timestamp, data.metadata); if (app.currentView === 'logs') loadLogs(); }
+    else if (message.event === 'log.updated') { if (app.currentView === 'logs') loadLogs(); }
   } catch (_) { }
 }
 

web/styles.css

@@ -9255,4 +9255,86 @@ body.flow-editor-open {
     display: none;
     content: none;
   }
-}
+}
+/* Notification delivery audit in Events. */
+.log-row .kind .log-notification-badge {
+  margin-left: .45rem;
+  padding: 3px 7px;
+  border: 1px solid var(--line-strong);
+  background: transparent;
+  color: var(--muted);
+  font-size: .64rem;
+  font-weight: 700;
+  letter-spacing: .06em;
+  vertical-align: middle;
+}
+
+/* Keep the Flow footer compact before the full mobile layout kicks in. */
+@media (min-width:761px) and (max-width:1200px) {
+  .flow-natural-preview {
+    display: block;
+    min-height: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .flow-preview-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 40px;
+    padding: 8px 14px;
+    border: 0;
+    border-radius: 0;
+    background: var(--surface);
+    color: var(--text);
+    text-align: left;
+  }
+
+  .flow-preview-toggle strong {
+    font-size: .8rem;
+  }
+
+  .flow-preview-toggle-icon {
+    color: var(--muted);
+    font-size: 1rem;
+    transition: transform .15s ease;
+  }
+
+  .flow-preview-details {
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    max-height: 32dvh;
+    padding: 9px 14px 11px;
+    overflow: auto;
+  }
+
+  .flow-natural-preview.is-expanded .flow-preview-details {
+    display: flex;
+  }
+
+  .flow-natural-preview.is-expanded .flow-preview-toggle {
+    border-bottom: 1px solid var(--line);
+  }
+
+  .flow-natural-preview.is-expanded .flow-preview-toggle-icon {
+    transform: rotate(180deg);
+  }
+
+  .flow-preview-item {
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 10px;
+  }
+
+  .flow-preview-runtime {
+    justify-content: start;
+    text-align: left;
+  }
+
+  .flow-preview-runtime span {
+    white-space: normal;
+  }
+}