feat: polish alpine live page states

apps/ui/js/logs.js

@@ -86,27 +86,34 @@ document.addEventListener('DOMContentLoaded', function () {
     };
   }
 
-  function renderEmpty(message) {
+  function renderEmpty(title, message) {
     logList.innerHTML = '';
     var empty = document.createElement('div');
-    empty.style.cssText = 'text-align:center;padding:40px;color:var(--text-muted);font-size:13.5px;';
-    empty.textContent = message;
+    empty.className = 'empty-state';
+    empty.innerHTML =
+      '<div class="empty-state-title">' + title + '</div>' +
+      '<div class="empty-state-text">' + message + '</div>';
     logList.appendChild(empty);
   }
 
   function renderLogs() {
     if (state.loading && state.logs.length === 0) {
-      renderEmpty('Loading logs...');
+      renderEmpty('Loading logs…', 'Fetching invocation history for the current workspace.');
       return;
     }
 
     if (state.loadError) {
-      renderEmpty(state.loadError);
+      renderEmpty('Unable to load logs', state.loadError);
       return;
     }
 
     if (!state.logs.length) {
-      renderEmpty('No log entries match the current filter');
+      renderEmpty(
+        'No log entries found',
+        state.search || state.level !== 'all'
+          ? 'Try widening the period or clearing the current search and level filters.'
+          : 'Run tests or published MCP tools to start collecting invocation history.'
+      );
       return;
     }
 
@@ -323,6 +330,12 @@ document.addEventListener('DOMContentLoaded', function () {
     state.liveMode = !state.liveMode;
     setLiveState();
     startPolling();
+    if (window.CrankUi) {
+      window.CrankUi.info(
+        state.liveMode ? 'Polling logs every 4 seconds.' : 'Automatic polling is paused.',
+        state.liveMode ? 'Live mode enabled' : 'Live mode paused'
+      );
+    }
   }
 
   document.querySelectorAll('.filter-chip[data-level]').forEach(function (button) {
@@ -344,7 +357,13 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   if (refreshBtn) {
-    refreshBtn.addEventListener('click', loadLogs);
+    refreshBtn.addEventListener('click', function () {
+      loadLogs().then(function () {
+        if (!state.loadError && window.CrankUi) {
+          window.CrankUi.info('The latest invocation records were loaded for the current workspace.', 'Logs refreshed');
+        }
+      });
+    });
   }
 
   if (timeRangeSel) {