Implement video interaction features in web interface. Add a checkbox for enabling/disabling keyboard and mouse input to the remote, along with corresponding UI updates and styles. Enhance user feedback with dynamic hints based on interaction state, improving overall usability.

lib/agent/web/index.html

@@ -133,6 +133,14 @@
       cursor: crosshair;
       background: #111;
     }
+    #video-canvas.view-only { cursor: default; }
+    label.check {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      user-select: none;
+    }
+    label.check input { margin: 0; }
     .error {
       display: none;
       max-width: 1100px;
@@ -268,11 +276,15 @@
         <label>Monitor
           <input id="video-monitor" type="number" min="0" value="0" style="width:4.5rem">
         </label>
+        <label class="check">
+          <input id="video-interact" type="checkbox">
+          Interactable
+        </label>
       </div>
-      <canvas id="video-canvas" width="1280" height="720"></canvas>
+      <canvas id="video-canvas" class="view-only" width="1280" height="720"></canvas>
       <p id="video-meta" class="meta"></p>
       <div class="row" style="margin-top:0.75rem">
-        <div id="video-key-hint">Keyboard sends to remote while this tab is active</div>
+        <div id="video-key-hint">View only — enable Interactable to send mouse and keyboard</div>
       </div>
       <div class="row">
         <button type="button" class="mod-btn" data-mod="ctrl" aria-pressed="false">Ctrl</button>