Improve live input indicator visibility

src/stream.h

@@ -23,9 +23,9 @@ namespace stream {
   constexpr auto CONTROL_PORT = 10;
   constexpr auto AUDIO_STREAM_PORT = 11;
 
-  constexpr uint64_t KB_ACTIVE_WINDOW_MS = 500;
+  constexpr uint64_t KB_ACTIVE_WINDOW_MS = 1500;
-  constexpr uint64_t MOUSE_ACTIVE_WINDOW_MS = 500;
+  constexpr uint64_t MOUSE_ACTIVE_WINDOW_MS = 1500;
-  constexpr uint64_t GAMEPAD_ACTIVE_WINDOW_MS = 500;
+  constexpr uint64_t GAMEPAD_ACTIVE_WINDOW_MS = 1500;
 
   struct session_t;
 

src_assets/common/assets/web/troubleshooting.html

@@ -151,7 +151,7 @@
     <div class="card my-4">
       <div class="card-body">
         <h2 id="input_status">Live Input Status</h2>
-        <p>Per-session input activity and policy. Indicators update every second.</p>
+        <p>Per-session input activity and policy. Indicators update twice per second.</p>
       </div>
       <div v-if="activeSessions.length === 0" class="card-body pt-0">
         <em>No active streaming sessions.</em>
@@ -170,6 +170,9 @@
                 <span :class="['badge', s.policy.allow_keyboard ? 'bg-success' : 'bg-secondary']" style="font-size: 0.7em">
                   {{ s.policy.allow_keyboard ? 'ON' : 'OFF' }}
                 </span>
+                <span :class="['activity-state', s.activity.keyboard_active ? 'text-success' : 'text-secondary']">
+                  {{ activityStateLabel(s.activity.keyboard_active, s.activity.last_keyboard_ms_ago) }}
+                </span>
               </span>
               <span class="d-flex align-items-center gap-1" title="Mouse">
                 <span :class="['activity-dot', s.activity.mouse_active ? 'dot-green' : 'dot-gray']"></span>
@@ -177,6 +180,9 @@
                 <span :class="['badge', s.policy.allow_mouse ? 'bg-success' : 'bg-secondary']" style="font-size: 0.7em">
                   {{ s.policy.allow_mouse ? 'ON' : 'OFF' }}
                 </span>
+                <span :class="['activity-state', s.activity.mouse_active ? 'text-success' : 'text-secondary']">
+                  {{ activityStateLabel(s.activity.mouse_active, s.activity.last_mouse_ms_ago) }}
+                </span>
               </span>
               <span class="d-flex align-items-center gap-1" title="Gamepad">
                 <span :class="['activity-dot', s.activity.gamepad_active ? 'dot-green' : 'dot-gray']"></span>
@@ -184,6 +190,9 @@
                 <span :class="['badge', s.policy.allow_gamepad ? 'bg-success' : 'bg-secondary']" style="font-size: 0.7em">
                   {{ s.policy.allow_gamepad ? 'ON' : 'OFF' }}
                 </span>
+                <span :class="['activity-state', s.activity.gamepad_active ? 'text-success' : 'text-secondary']">
+                  {{ activityStateLabel(s.activity.gamepad_active, s.activity.last_gamepad_ms_ago) }}
+                </span>
               </span>
             </div>
           </div>
@@ -436,7 +445,7 @@
         }, 5000);
         this.sessionInterval = setInterval(() => {
           this.refreshActiveSessions();
-        }, 1000);
+        }, 500);
         this.refreshLogs();
         this.refreshClients();
         this.refreshActiveSessions();
@@ -446,6 +455,21 @@
         clearInterval(this.sessionInterval);
       },
       methods: {
+        activityStateLabel(active, msAgo) {
+          if (active) {
+            return 'LIVE';
+          }
+
+          if (msAgo < 0) {
+            return 'never';
+          }
+
+          if (msAgo < 1000) {
+            return `${msAgo}ms`;
+          }
+
+          return `${(msAgo / 1000).toFixed(1)}s`;
+        },
         refreshActiveSessions() {
           fetch("./api/sessions/active")
             .then((r) => r.json())
@@ -677,18 +701,26 @@
   <style>
     .activity-dot {
       display: inline-block;
-      width: 10px;
+      width: 12px;
-      height: 10px;
+      height: 12px;
       border-radius: 50%;
       transition: background-color 0.2s;
+      border: 1px solid #9ca3af;
     }
     .dot-green {
       background-color: #22c55e;
       box-shadow: 0 0 4px #22c55e;
+      border-color: #16a34a;
     }
     .dot-gray {
       background-color: #6b7280;
     }
+    .activity-state {
+      min-width: 3.25rem;
+      font-size: 0.72em;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+    }
   </style>
 
 </body>