Phase 2

src_assets/common/assets/web/config.html

@@ -211,6 +211,7 @@
               "mouse": "disabled",
               "high_resolution_scrolling": "enabled",
               "native_pen_touch": "enabled",
+              "owner_client_uuids": "",
               "keybindings": "[0x10,0xA0,0x11,0xA2,0x12,0xA4]",  // todo: add this to UI
             },
           },

src_assets/common/assets/web/configs/tabs/Inputs.vue

@@ -181,6 +181,15 @@ const config = ref(props.config)
               v-model="config.native_pen_touch"
               default="true"
     ></Checkbox>
+
+    <hr>
+    <div class="mb-3">
+      <label for="owner_client_uuids" class="form-label">Owner Client UUIDs</label>
+      <input type="text" class="form-control" id="owner_client_uuids"
+             placeholder=""
+             v-model="config.owner_client_uuids" />
+      <div class="form-text">Comma-separated UUIDs of owner clients. Owner sessions start with keyboard/mouse enabled. Find UUIDs in the Troubleshooting page under paired clients.</div>
+    </div>
   </div>
 </template>
 

src_assets/common/assets/web/troubleshooting.html

@@ -147,6 +147,49 @@
         </li>
       </ul>
     </div>
+    <!-- Live Input Status -->
+    <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>
+      </div>
+      <div v-if="activeSessions.length === 0" class="card-body pt-0">
+        <em>No active streaming sessions.</em>
+      </div>
+      <ul class="list-group list-group-flush" v-else>
+        <li v-for="s in activeSessions" :key="s.session_id" class="list-group-item">
+          <div class="d-flex align-items-center justify-content-between">
+            <div>
+              <strong>{{ s.client_name || s.client_uuid || 'Unknown' }}</strong>
+              <span v-if="s.is_owner_session" class="badge bg-primary ms-2">Owner</span>
+            </div>
+            <div class="d-flex gap-3 align-items-center">
+              <span class="d-flex align-items-center gap-1" title="Keyboard">
+                <span :class="['activity-dot', s.activity.keyboard_active ? 'dot-green' : 'dot-gray']"></span>
+                KB
+                <span :class="['badge', s.policy.allow_keyboard ? 'bg-success' : 'bg-secondary']" style="font-size: 0.7em">
+                  {{ s.policy.allow_keyboard ? 'ON' : 'OFF' }}
+                </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>
+                Mouse
+                <span :class="['badge', s.policy.allow_mouse ? 'bg-success' : 'bg-secondary']" style="font-size: 0.7em">
+                  {{ s.policy.allow_mouse ? 'ON' : 'OFF' }}
+                </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>
+                Gamepad
+                <span :class="['badge', s.policy.allow_gamepad ? 'bg-success' : 'bg-secondary']" style="font-size: 0.7em">
+                  {{ s.policy.allow_gamepad ? 'ON' : 'OFF' }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
     <!-- Logs -->
     <div class="card my-4">
       <div class="card-body">
@@ -229,6 +272,7 @@
       },
       data() {
         return {
+          activeSessions: [],
           clients: [],
           closeAppPressed: false,
           closeAppStatus: null,
@@ -237,6 +281,7 @@
           logs: 'Loading...',
           logFilter: null,
           logInterval: null,
+          sessionInterval: null,
           restartPressed: false,
           showApplyMessage: false,
           platform: "",
@@ -389,13 +434,32 @@
         this.logInterval = setInterval(() => {
           this.refreshLogs();
         }, 5000);
+        this.sessionInterval = setInterval(() => {
+          this.refreshActiveSessions();
+        }, 1000);
         this.refreshLogs();
         this.refreshClients();
+        this.refreshActiveSessions();
       },
       beforeDestroy() {
         clearInterval(this.logInterval);
+        clearInterval(this.sessionInterval);
       },
       methods: {
+        refreshActiveSessions() {
+          fetch("./api/sessions/active")
+            .then((r) => r.json())
+            .then((r) => {
+              if (r.status === true && r.sessions) {
+                this.activeSessions = r.sessions;
+              } else {
+                this.activeSessions = [];
+              }
+            })
+            .catch(() => {
+              this.activeSessions = [];
+            });
+        },
         refreshLogs() {
           fetch("./api/logs",)
             .then((r) => r.text())
@@ -610,4 +674,21 @@
     initApp(app);
   </script>
 
+  <style>
+    .activity-dot {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      transition: background-color 0.2s;
+    }
+    .dot-green {
+      background-color: #22c55e;
+      box-shadow: 0 0 4px #22c55e;
+    }
+    .dot-gray {
+      background-color: #6b7280;
+    }
+  </style>
+
 </body>