@hienlh/ppm 0.23.11 → 0.23.12

package/src/web/components/android/android-avd-create-dialog.tsx

@@ -0,0 +1,305 @@
+/**
+ * Create an AVD, without ever touching the SDK by hand.
+ *
+ * Three decisions worth stating, all of them from the plan's Phase 4:
+ *
+ *  - **PPM only offers images the host already has.** `/system-images` reads the installed tree;
+ *    there is no "download 2.9 GB now" button, because "không tự chấp nhận SDK license hay tải
+ *    nhiều GB khi mở tab" reads forward as well as back. An image for another CPU is listed but
+ *    unselectable, with the reason on the row, rather than hidden — hidden looks like a bug when
+ *    the user knows they installed it.
+ *  - **A device profile is required**, and the form says why in the hint: `avdmanager` with no
+ *    `--device` builds a 320x640 AVD, which looks like a broken emulator rather than a default.
+ *  - **The name is validated with the host's own regex** (`@/shared/android-avd`), so the form
+ *    cannot accept something the host will refuse after the dialog has closed.
+ *
+ * `SearchSelect` rather than a plain select: this host lists 88 device profiles, most of which
+ * agree for most of their length.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { api } from "@/lib/api-client";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Input } from "@/components/ui/input";
+import { SearchSelect } from "@/components/ui/search-select";
+import { Loader2, Smartphone, HardDrive, TriangleAlert } from "@/lib/icons";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { AVD_LIMITS, validateAvdName } from "../../../shared/android-avd";
+import type { AvdDeviceProfile } from "../../../shared/android-avd";
+
+/** What `/api/android/system-images` returns per row. `sysdir` is stripped host-side. */
+export interface SystemImageRow {
+  id: string;
+  apiLevel: number | null;
+  abi: string;
+  tag: string;
+  tagDisplay: string;
+  description: string;
+  playStore: boolean;
+  bytes: number;
+  hostCompatible: boolean;
+}
+
+export interface AndroidAvdCreateDialogProps {
+  open: boolean;
+  onClose: () => void;
+  /** Names already taken, so a duplicate is caught before a round trip. */
+  existingNames: string[];
+  /** The new AVD landed; the list should refresh. */
+  onCreated: (name: string) => void;
+}
+
+const KIND_ORDER: AvdDeviceProfile["kind"][] = [
+  "phone", "tablet", "tv", "wear", "automotive", "desktop", "other",
+];
+const KIND_LABEL: Record<AvdDeviceProfile["kind"], string> = {
+  phone: "Phones", tablet: "Tablets", tv: "TV", wear: "Wear",
+  automotive: "Automotive", desktop: "Desktop", other: "Other",
+};
+
+const gb = (bytes: number) => `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+
+export function AndroidAvdCreateDialog(
+  { open, onClose, existingNames, onCreated }: AndroidAvdCreateDialogProps,
+) {
+  const isMobile = useIsMobile();
+  const [images, setImages] = useState<SystemImageRow[] | null>(null);
+  const [profiles, setProfiles] = useState<AvdDeviceProfile[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const [name, setName] = useState("");
+  const [image, setImage] = useState("");
+  const [profile, setProfile] = useState("");
+  const [ramMb, setRamMb] = useState(String(AVD_LIMITS.ramMb.default));
+  const [storageMb, setStorageMb] = useState(String(AVD_LIMITS.storageMb.default));
+
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // The two lists are the host's, and the profile list costs a real `avdmanager` run (~730 ms
+  // cold, cached after), so they are fetched when the dialog opens rather than with the tab.
+  useEffect(() => {
+    if (!open) return;
+    let alive = true;
+    setLoadError(null);
+    void (async () => {
+      try {
+        const [i, p] = await Promise.all([
+          api.get<{ images: SystemImageRow[] }>("/api/android/system-images"),
+          api.get<{ profiles: AvdDeviceProfile[] }>("/api/android/device-profiles"),
+        ]);
+        if (!alive) return;
+        setImages(i.images);
+        setProfiles(p.profiles);
+        // Default to something that will actually boot here: the newest image this CPU can run.
+        const usable = i.images.filter((x) => x.hostCompatible);
+        const newest = usable.slice().sort((a, b) => (b.apiLevel ?? 0) - (a.apiLevel ?? 0))[0];
+        if (newest) setImage((current) => current || newest.id);
+        if (p.profiles.some((x) => x.id === "pixel_9")) setProfile((c) => c || "pixel_9");
+      } catch (e) {
+        if (alive) setLoadError((e as Error).message);
+      }
+    })();
+    return () => { alive = false; };
+  }, [open]);
+
+  const imageItems = useMemo(() => (images ?? []).map((i) => ({
+    value: i.hostCompatible ? i.id : "",
+    label: `API ${i.apiLevel ?? "?"} · ${i.tagDisplay} · ${i.abi}`,
+    group: i.hostCompatible ? "Runs on this host" : "Wrong CPU for this host",
+    hint: i.hostCompatible ? gb(i.bytes) : `needs ${i.abi}`,
+    title: i.id,
+  })), [images]);
+
+  const profileItems = useMemo(() => {
+    const list = profiles ?? [];
+    return KIND_ORDER.flatMap((kind) => list
+      .filter((p) => p.kind === kind)
+      .map((p) => ({ value: p.id, label: p.name, group: KIND_LABEL[kind], hint: p.oem })));
+  }, [profiles]);
+
+  const nameProblem = name.length === 0
+    ? null
+    : existingNames.some((n) => n.toLowerCase() === name.toLowerCase())
+      ? "an AVD with that name already exists"
+      : validateAvdName(name);
+  const ram = Number(ramMb);
+  const storage = Number(storageMb);
+  const ramProblem = Number.isFinite(ram) && ram >= AVD_LIMITS.ramMb.min && ram <= AVD_LIMITS.ramMb.max
+    ? null : `RAM must be between ${AVD_LIMITS.ramMb.min} and ${AVD_LIMITS.ramMb.max} MB`;
+  const storageProblem = Number.isFinite(storage) && storage >= AVD_LIMITS.storageMb.min
+    && storage <= AVD_LIMITS.storageMb.max
+    ? null : `Storage must be between ${AVD_LIMITS.storageMb.min} and ${AVD_LIMITS.storageMb.max} MB`;
+
+  const ready = name.length > 0 && !nameProblem && !ramProblem && !storageProblem
+    && image !== "" && profile !== "" && !saving;
+
+  const reset = () => {
+    setName(""); setError(null); setSaving(false);
+    setRamMb(String(AVD_LIMITS.ramMb.default));
+    setStorageMb(String(AVD_LIMITS.storageMb.default));
+  };
+
+  const submit = async () => {
+    if (!ready) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await api.post("/api/android/avds", {
+        name, systemImage: image, deviceProfile: profile, ramMb: ram, storageMb: storage,
+      });
+      onCreated(name);
+      reset();
+      onClose();
+    } catch (e) {
+      setError((e as Error).message);
+      setSaving(false);
+    }
+  };
+
+  const loading = !loadError && (images === null || profiles === null);
+
+  const body = (
+    <div className="space-y-4">
+      {loadError && (
+        <p className="flex items-start gap-2 text-sm leading-relaxed text-destructive">
+          <TriangleAlert className="mt-0.5 size-4 shrink-0" />
+          <span className="min-w-0 flex-1">{loadError}</span>
+        </p>
+      )}
+      {loading && (
+        <p className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" /> Reading the SDK…
+        </p>
+      )}
+
+      {!loading && !loadError && (
+        <>
+          <div className="space-y-1.5">
+            <label htmlFor="avd-name" className="text-sm font-medium">Name</label>
+            <Input
+              id="avd-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Pixel_9_API_35"
+              autoComplete="off"
+              spellCheck={false}
+              className="h-11"
+            />
+            {nameProblem
+              ? <p className="text-xs leading-relaxed text-destructive">{nameProblem}</p>
+              : <p className="text-xs leading-relaxed text-muted-foreground">
+                  This becomes a folder name, so no spaces.
+                </p>}
+          </div>
+
+          <div className="space-y-1.5">
+            <span className="text-sm font-medium">System image</span>
+            <SearchSelect
+              value={image}
+              items={imageItems}
+              onChange={setImage}
+              label="System image"
+              searchPlaceholder="Search images"
+              emptyText="No system images are installed"
+              placeholder="Pick an installed image"
+              icon={HardDrive}
+              className="h-11 w-full md:h-9"
+              modal={!isMobile}
+            />
+            <p className="text-xs leading-relaxed text-muted-foreground">
+              Only images already downloaded on this host. PPM never downloads one for you —
+              use Android Studio's SDK Manager, or{" "}
+              <code className="rounded bg-muted px-1 text-[11px]">sdkmanager</code>.
+            </p>
+          </div>
+
+          <div className="space-y-1.5">
+            <span className="text-sm font-medium">Device</span>
+            <SearchSelect
+              value={profile}
+              items={profileItems}
+              onChange={setProfile}
+              label="Device profile"
+              searchPlaceholder="Search devices"
+              emptyText="No device profiles"
+              placeholder="Pick a device"
+              icon={Smartphone}
+              className="h-11 w-full md:h-9"
+              modal={!isMobile}
+            />
+            <p className="text-xs leading-relaxed text-muted-foreground">
+              Sets the screen. Without one the emulator is 320x640.
+            </p>
+          </div>
+
+          <div className="flex gap-3">
+            <div className="min-w-0 flex-1 space-y-1.5">
+              <label htmlFor="avd-ram" className="text-sm font-medium">RAM (MB)</label>
+              <Input id="avd-ram" inputMode="numeric" value={ramMb} className="h-11"
+                onChange={(e) => setRamMb(e.target.value)} />
+            </div>
+            <div className="min-w-0 flex-1 space-y-1.5">
+              <label htmlFor="avd-storage" className="text-sm font-medium">Storage (MB)</label>
+              <Input id="avd-storage" inputMode="numeric" value={storageMb} className="h-11"
+                onChange={(e) => setStorageMb(e.target.value)} />
+            </div>
+          </div>
+          {(ramProblem || storageProblem) && (
+            <p className="text-xs leading-relaxed text-destructive">{ramProblem ?? storageProblem}</p>
+          )}
+
+          <p className="text-xs leading-relaxed text-muted-foreground">
+            PPM writes <code className="rounded bg-muted px-1 text-[11px]">hw.keyboard=yes</code>{" "}
+            into every AVD it creates — without it the emulator accepts key presses and shows
+            nothing.
+          </p>
+        </>
+      )}
+
+      {error && (
+        <p className="flex items-start gap-2 text-sm leading-relaxed text-destructive">
+          <TriangleAlert className="mt-0.5 size-4 shrink-0" />
+          <span className="min-w-0 flex-1">{error}</span>
+        </p>
+      )}
+
+      <div className="flex flex-col-reverse gap-2 pt-2 md:flex-row md:justify-end">
+        <Button variant="outline" className="min-h-11" onClick={() => { reset(); onClose(); }}>
+          Cancel
+        </Button>
+        <Button className="min-h-11" disabled={!ready} onClick={() => void submit()}>
+          {saving ? <><Loader2 className="animate-spin" /> Creating…</> : "Create device"}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (!open) return null;
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onClose}>
+        <div className="max-h-[80vh] overflow-y-auto px-4 pb-4">
+          <h2 className="mb-3 text-base font-semibold">New Android device</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>New Android device</DialogTitle>
+          <DialogDescription>Built from a system image already installed on this host.</DialogDescription>
+        </DialogHeader>
+        <div className="max-h-[70vh] overflow-y-auto pr-1">{body}</div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/android/android-avd-destroy-dialog.tsx

@@ -0,0 +1,151 @@
+/**
+ * Wipe or delete an AVD, with the name typed back.
+ *
+ * Plan Phase 4: "Wipe/Delete có xác nhận tên máy và hậu quả, chỉ khi stopped". All three parts
+ * are here and none of them is decoration:
+ *
+ *  - **The name is typed, not ticked.** These two rows sit next to each other in one list and
+ *    every AVD's row looks the same; a checkbox confirms that a dialog was open, not which
+ *    device it was open on.
+ *  - **The consequence is spelled out** in the device's own terms — what wipe keeps (the AVD and
+ *    its settings) against what delete does not.
+ *  - **Stopped only**, and the host checks again: this dialog is not offered for a running or
+ *    Studio-locked AVD, and the route refuses one anyway, because a list can be a few seconds old.
+ */
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api-client";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Input } from "@/components/ui/input";
+import { Loader2, TriangleAlert } from "@/lib/icons";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+export type DestructiveAction = "wipe" | "delete";
+
+export interface AndroidAvdDestroyDialogProps {
+  action: DestructiveAction | null;
+  avdId: string;
+  deviceName: string;
+  onCancel: () => void;
+  /** It happened; the list should refresh. `freed` is bytes, for wipe only. */
+  onDone: (action: DestructiveAction, message: string) => void;
+}
+
+export function AndroidAvdDestroyDialog(
+  { action, avdId, deviceName, onCancel, onDone }: AndroidAvdDestroyDialogProps,
+) {
+  const isMobile = useIsMobile();
+  const [typed, setTyped] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => { setTyped(""); setError(null); setBusy(false); }, [action, avdId]);
+
+  if (!action) return null;
+
+  const isDelete = action === "delete";
+  const title = isDelete ? "Delete this device" : "Wipe this device";
+  // Exact match, not case-insensitive: two AVDs may differ only in case, and this is the one
+  // place where guessing which was meant is the wrong kind of help.
+  const armed = typed === deviceName && !busy;
+
+  const run = async () => {
+    if (!armed) return;
+    setBusy(true);
+    setError(null);
+    try {
+      if (isDelete) {
+        await api.del(`/api/android/avds/${encodeURIComponent(avdId)}`, { confirmName: deviceName });
+        onDone("delete", `Deleted ${deviceName}`);
+      } else {
+        const res = await api.post<{ message: string; freedBytes: number }>(
+          `/api/android/avds/${encodeURIComponent(avdId)}/wipe`, { confirmName: deviceName },
+        );
+        onDone("wipe", res.message);
+      }
+    } catch (e) {
+      setError((e as Error).message);
+      setBusy(false);
+    }
+  };
+
+  const body = (
+    <div className="space-y-4">
+      <p className="text-sm leading-relaxed">
+        {isDelete ? (
+          <>
+            <span className="font-medium">{deviceName}</span> and everything in it will be removed
+            from disk. The AVD, its settings and its installed apps are gone for good — this is
+            not a recycle bin.
+          </>
+        ) : (
+          <>
+            Everything inside <span className="font-medium">{deviceName}</span> goes back to
+            factory: installed apps, accounts, files and saved snapshots. The device itself and
+            its settings stay, and the next start is a cold boot.
+          </>
+        )}
+      </p>
+
+      <div className="space-y-1.5">
+        <label htmlFor="avd-confirm" className="text-sm font-medium">
+          Type <span className="font-mono">{deviceName}</span> to confirm
+        </label>
+        <Input
+          id="avd-confirm"
+          value={typed}
+          onChange={(e) => setTyped(e.target.value)}
+          autoComplete="off"
+          spellCheck={false}
+          autoCapitalize="off"
+          className="h-11 font-mono"
+        />
+      </div>
+
+      {error && (
+        <p className="flex items-start gap-2 text-sm leading-relaxed text-destructive">
+          <TriangleAlert className="mt-0.5 size-4 shrink-0" />
+          <span className="min-w-0 flex-1">{error}</span>
+        </p>
+      )}
+
+      <div className="flex flex-col-reverse gap-2 pt-2 md:flex-row md:justify-end">
+        <Button variant="outline" className="min-h-11" onClick={onCancel}>Cancel</Button>
+        <Button variant="destructive" className="min-h-11" autoFocus={false}
+          disabled={!armed} onClick={() => void run()}>
+          {busy
+            ? <><Loader2 className="animate-spin" /> {isDelete ? "Deleting…" : "Wiping…"}</>
+            : (isDelete ? "Delete device" : "Wipe data")}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onCancel}>
+        <div className="px-4 pb-4">
+          <h2 className="mb-3 text-base font-semibold">{title}</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            {isDelete ? "This cannot be undone." : "A factory reset — the device itself stays."}
+          </DialogDescription>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/android/android-clipboard-panel.tsx

@@ -0,0 +1,94 @@
+/**
+ * The device's clipboard, both directions.
+ *
+ * Typing into a guest works already (`sendText`), so this is not about text entry — it is about
+ * the two cases typing cannot reach: getting something *out* of the device (a token an app
+ * printed, a deep link) and putting something in that the guest's own keyboard cannot produce.
+ *
+ * Nothing here is logged, on either side. The plan's Phase 3 gate says so explicitly, and the
+ * server route says so again where it would be easiest to slip.
+ */
+import { useCallback, useState } from "react";
+import { api } from "@/lib/api-client";
+import { Button } from "@/components/ui/button";
+import { Check, Clipboard, Loader2, Upload } from "@/lib/icons";
+
+export interface AndroidClipboardPanelProps {
+  deviceId: string;
+}
+
+export function AndroidClipboardPanel({ deviceId }: AndroidClipboardPanelProps) {
+  const [fromDevice, setFromDevice] = useState<string | null>(null);
+  const [toDevice, setToDevice] = useState("");
+  const [busy, setBusy] = useState<"read" | "write" | null>(null);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const read = useCallback(async () => {
+    setBusy("read"); setError(null);
+    try {
+      const res = await api.get<{ text: string }>(`/api/android/devices/${encodeURIComponent(deviceId)}/clipboard`);
+      setFromDevice(res.text);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(null);
+    }
+  }, [deviceId]);
+
+  const write = useCallback(async () => {
+    setBusy("write"); setError(null);
+    try {
+      await api.post(`/api/android/devices/${encodeURIComponent(deviceId)}/clipboard`, { text: toDevice });
+      setSent(true);
+      setTimeout(() => setSent(false), 1500);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(null);
+    }
+  }, [deviceId, toDevice]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-4 overflow-auto p-3">
+      <section className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <h3 className="flex-1 text-sm font-medium">From the device</h3>
+          <Button variant="secondary" className="h-11 md:h-9" onClick={() => void read()} disabled={busy !== null}>
+            {busy === "read" ? <Loader2 className="animate-spin" /> : <Clipboard />} Read
+          </Button>
+        </div>
+        {fromDevice !== null && (
+          <textarea
+            readOnly
+            value={fromDevice}
+            rows={3}
+            placeholder="(the device's clipboard is empty)"
+            className="w-full resize-y rounded-md border bg-muted/40 p-2 font-mono text-xs"
+          />
+        )}
+      </section>
+
+      <section className="flex flex-col gap-2 border-t pt-3">
+        <h3 className="text-sm font-medium">To the device</h3>
+        <textarea
+          value={toDevice}
+          onChange={(e) => setToDevice(e.target.value)}
+          rows={3}
+          placeholder="Text to put on the device's clipboard"
+          className="w-full resize-y rounded-md border bg-background p-2 font-mono text-xs"
+        />
+        <Button className="h-11 self-start md:h-9" onClick={() => void write()}
+          disabled={busy !== null || toDevice.length === 0}>
+          {sent ? <Check /> : busy === "write" ? <Loader2 className="animate-spin" /> : <Upload />}
+          {sent ? "Sent" : "Send to device"}
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          Paste it in the guest with a long press, or with the keyboard's paste key.
+        </p>
+      </section>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/web/components/android/android-controls.tsx

@@ -0,0 +1,128 @@
+/**
+ * The device's own buttons, plus the session controls that belong beside them.
+ *
+ * One component for both form factors rather than two: the *contents* are identical — an
+ * emulator has the same three navigation buttons whatever is looking at it — and only the
+ * placement differs. Below `md` it sits in the thumb zone at the bottom of the viewer (design
+ * guidelines §9: navigation bars go to the bottom, not the top); above it, the same row sits in
+ * the toolbar. Two copies would drift.
+ */
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  ArrowLeft, Circle, Square, Keyboard, RotateCw, Power, Volume2, Volume1, MoreHorizontal,
+} from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import type { AndroidClientMessage, AndroidQuality } from "../../../shared/android-protocol";
+
+export interface AndroidControlsProps {
+  send: (message: AndroidClientMessage) => void;
+  /** Without the lease every button here is a no-op on the server, so they are disabled. */
+  controller: boolean;
+  rotation: 0 | 90 | 180 | 270;
+  quality: AndroidQuality;
+  onQualityChange: (quality: AndroidQuality) => void;
+  onKeyboard: () => void;
+  layout: "bar" | "toolbar";
+}
+
+const QUALITY_LABELS: Record<AndroidQuality, string> = {
+  low: "Low", balanced: "Balanced", high: "High",
+};
+
+export function AndroidControls(props: AndroidControlsProps) {
+  const { send, controller, rotation, quality, onQualityChange, onKeyboard, layout } = props;
+  const [extrasOpen, setExtrasOpen] = useState(false);
+  const bar = layout === "bar";
+
+  // 44x44 minimum on touch (design guidelines §3); the toolbar variant is desktop-only and may
+  // be tighter, but never below 36px.
+  const buttonClass = bar ? "size-11" : "size-9";
+
+  const key = (k: "home" | "back" | "recent" | "power" | "volume-up" | "volume-down") =>
+    () => send({ type: "hardware", key: k });
+
+  return (
+    <div className={cn("flex items-center gap-2", containerClass(bar))}>
+      <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+        onClick={key("back")} title="Back" aria-label="Back">
+        <ArrowLeft />
+      </Button>
+      <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+        onClick={key("home")} title="Home" aria-label="Home">
+        <Circle />
+      </Button>
+      <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+        onClick={key("recent")} title="Recent apps" aria-label="Recent apps">
+        <Square />
+      </Button>
+
+      <span className="mx-1 h-6 w-px shrink-0 bg-border" aria-hidden />
+
+      <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+        onClick={onKeyboard} title="Keyboard" aria-label="Keyboard">
+        <Keyboard />
+      </Button>
+      <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+        onClick={() => send({ type: "rotate", rotation: nextRotation(rotation) })}
+        title={`Rotate (now ${rotation}°)`} aria-label="Rotate">
+        <RotateCw />
+      </Button>
+
+      {/* The rarely-used keys stay behind one more tap: a mis-hit Power on a phone is a guest
+          that goes to sleep mid-demo, and §9 puts destructive things out of easy reach. */}
+      <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+        onClick={() => setExtrasOpen((v) => !v)} title="More keys" aria-label="More keys"
+        aria-expanded={extrasOpen}>
+        <MoreHorizontal />
+      </Button>
+      {extrasOpen && (
+        <>
+          <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+            onClick={key("volume-up")} title="Volume up" aria-label="Volume up">
+            <Volume2 />
+          </Button>
+          <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+            onClick={key("volume-down")} title="Volume down" aria-label="Volume down">
+            <Volume1 />
+          </Button>
+          <Button variant="ghost" size="icon" className={buttonClass} disabled={!controller}
+            onClick={key("power")} title="Power" aria-label="Power">
+            <Power />
+          </Button>
+        </>
+      )}
+
+      <span className="flex-1" />
+
+      {/* A native select, per design guidelines §8 — a phone gets its own picker for free. */}
+      <label className="sr-only" htmlFor="android-quality">Quality</label>
+      <select
+        id="android-quality"
+        className={cn(
+          "rounded-md border bg-background px-2 text-sm",
+          bar ? "h-11" : "h-9",
+        )}
+        value={quality}
+        disabled={!controller}
+        onChange={(e) => onQualityChange(e.target.value as AndroidQuality)}
+      >
+        {(Object.keys(QUALITY_LABELS) as AndroidQuality[]).map((q) => (
+          <option key={q} value={q}>{QUALITY_LABELS[q]}</option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function containerClass(bar: boolean): string {
+  return bar
+    ? "w-full justify-center border-t bg-background/95 px-3 py-2 backdrop-blur"
+    : "px-2 py-1";
+}
+
+/** 0 -> 90 -> 180 -> 270 -> 0. One button rather than four: a phone-shaped toolbar has no room
+ *  for a rotation picker, and every orientation is two taps away at worst. */
+export function nextRotation(current: 0 | 90 | 180 | 270): 0 | 90 | 180 | 270 {
+  return (((current + 90) % 360) as 0 | 90 | 180 | 270);
+}