feat(ui): watch a device's screen from the device drawer

docs/internal/DESIGN.md

@@ -162,7 +162,7 @@ put together from them and draws nothing of its own that one of them already dra
   device row opens the drawer. Choosing a lease, a device, a request or an event opens a **drawer**: a 480px
   panel (full width under 768px) at the right edge over the page, with a dim layer over everything
   else, the sidebar included. It has a title (a lease's holder, a device's model and runtime, a request's requester, an event's name), a 40px square close button
-  (`IconButton`) and, for a lease, tabs. Escape, the close button and the dim layer close it. It slides in once, when it opens,
+  (`IconButton`) and, for a lease or a device, tabs: a device's are Details and Screen, a lease's Details and Events. Escape, the close button and the dim layer close it. It slides in once, when it opens,
   and switching its tabs does not replay that. A lease's drawer uses no status colour of its own;
   a device's shows the device's state as a status, word and square.
 - **Menu.** A table row ends in a **⋯** `IconButton` that opens a small list; a right-click on the

e2e/console/fixtures.ts

@@ -435,15 +435,24 @@ export interface Fleet {
  * leases through the gateway or reads a card's capacity right away would see that gap.
  */
 export async function startFleet(
-  workers: readonly { readonly label: string; readonly driverScript?: FakeDriverScript }[],
+  workers: readonly {
+    readonly label: string;
+    readonly driverScript?: FakeDriverScript;
+    readonly config?: Readonly<Record<string, unknown>>;
+  }[],
+  options: { readonly gatewayConfig?: Readonly<Record<string, unknown>> } = {},
 ): Promise<Fleet> {
-  const gateway = await startDaemon("gateway");
+  const gateway = await startDaemon(
+    "gateway",
+    options.gatewayConfig === undefined ? {} : { config: options.gatewayConfig },
+  );
   const started: RunningDaemon[] = [];
   try {
     for (const worker of workers) {
       started.push(
         await startDaemon("worker", {
           config: {
+            ...worker.config,
             gateway: {
               label: worker.label,
               token: gateway.tokens.worker,

e2e/console/leases.spec.ts

@@ -335,7 +335,7 @@ test.describe("the leases page", () => {
 
       await leaseRow(page, lease.id).click();
       await expect(page.getByRole("dialog")).toBeVisible();
-      for (const name of ["Screen", "Details", "Screen", "Details"]) {
+      for (const name of ["Events", "Details", "Events", "Details"]) {
         await page.getByRole("tab", { name }).click();
       }
       await page.waitForTimeout(400);
@@ -649,8 +649,7 @@ test.describe("the leases page", () => {
       await leaseRow(page, granted.id).click();
       await expect(inspectorTitle(page, /ci-runner-3/)).toBeVisible();
       await expect(fact(page, "Device", "UDID")).toHaveText(granted.udid);
-      await page.getByRole("tab", { name: "Screen" }).click();
-      await expect(page.getByRole("button", { name: "Show screen" })).toBeVisible();
+      await expect(page.getByRole("dialog").getByRole("tab")).toHaveText(["Details", "Events"]);
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
       await host.dispose();