tstest/natlab/vmtest: add macOS VM screenshot streaming to web UI

When --vmtest-web is set, Host.app is launched with --screenshot-port 0
to start a localhost HTTP server that captures the VZVirtualMachineView
display. The Go test harness parses the SCREENSHOT_PORT=<port> line from
stdout, then polls every 2 seconds for JPEG thumbnails and pushes them
over WebSocket to the web dashboard.

Clicking a screenshot thumbnail opens a full-resolution image proxied
through the web UI's /screenshot/{node} endpoint.

Screenshot events are excluded from the EventBus history (they're large
and only the latest matters, stored in NodeStatus.Screenshot).

Updates #13038

Change-Id: I9bc67ddd1cc72948b33c555d4be3d8db06a41f6d
Signed-off-by: Brad Fitzpatrick <bradfitz@tailscale.com>

tstest/natlab/vmtest/assets/event.html

@@ -35,5 +35,11 @@
 <span id="ts-{{.NodeName}}" hx-swap-oob="innerHTML">{{.Detail}}</span>
 {{end}}
 
+{{if eq .Type "screenshot"}}
+<div id="screenshot-{{.NodeName}}" hx-swap-oob="innerHTML"><a href="/screenshot/{{.NodeName}}" target="_blank"><img src="data:image/jpeg;base64,{{.Message}}"></a></div>
+{{end}}
+
+{{if ne .Type "screenshot"}}
 <div id="events" hx-swap-oob="beforeend"><div class="event event-{{.Type}}"><span class="event-time">{{.Time.Format "15:04:05.000"}}</span> {{if .NodeName}}<span class="event-node">[{{.NodeName}}]</span> {{end}}<span class="event-msg">{{.Message}}</span>{{if .Detail}} <span class="event-detail">{{.Detail}}</span>{{end}}</div>
 </div>
+{{end}}

tstest/natlab/vmtest/assets/index.html

@@ -47,6 +47,7 @@
             </div>
             {{end}}
         </div>
+        <div class="screenshot" id="screenshot-{{$node.Name}}">{{if $node.Screenshot}}<a href="/screenshot/{{$node.Name}}" target="_blank"><img src="{{$node.Screenshot}}"></a>{{end}}</div>
         <div class="console" id="console-{{$node.Name}}">{{range $node.Console}}{{ansi .}}
 {{end}}</div>
     </div>

tstest/natlab/vmtest/assets/style.css

@@ -120,6 +120,20 @@ h2 {
     color: #4af;
 }
 
+/* VM display screenshot */
+.screenshot:empty { display: none; }
+.screenshot {
+    margin-bottom: 4px;
+}
+.screenshot img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 4px;
+    border: 1px solid #222;
+    cursor: pointer;
+}
+
 /* Console output */
 .console {
     background: #0a0a0a;