@hienlh/ppm 0.21.0 → 0.22.1

package/src/web/components/remote-desktop/remote-desktop-clipboard-notice.tsx

@@ -0,0 +1,127 @@
+/**
+ * The one piece of clipboard UI, shared by the desktop window and the mobile viewer.
+ *
+ * It exists because both failure modes of clipboard sync are otherwise *silent*: text the host
+ * copied cannot be written to this device without a secure context (PPM is usually plain HTTP on
+ * a LAN), and a host with no `xclip`/`wl-copy` installed simply does nothing. One is fixed by a
+ * click, the other by a command — so this renders whichever applies and nothing at all when
+ * sync is working.
+ */
+import { useState } from "react";
+import { Clipboard, ClipboardCheck, TerminalSquare, X } from "@/lib/icons";
+import { runInTerminal } from "@/lib/run-in-terminal";
+import { cn } from "@/lib/utils";
+import { copyTextWithGesture } from "./remote-desktop-clipboard-client";
+import type { RequirementAction } from "./use-remote-desktop-readiness";
+
+export interface RemoteDesktopClipboardNoticeProps {
+  /** Host text that needs a real click to reach this device's clipboard. */
+  pendingText: string | null;
+  onDismiss: () => void;
+  /** Set when the user tried to paste and the *host* has no clipboard tool. */
+  missingToolAction?: RequirementAction | null;
+  onDismissMissingTool?: () => void;
+  /** Override the bar's placement. The desktop window floats it over the video; the mobile
+   *  viewer puts it in normal flow above the toolbar, which the on-screen keyboard already
+   *  lifts — floating it there would land it behind the toolbar instead. */
+  positionClassName?: string;
+}
+
+export function RemoteDesktopClipboardNotice({
+  pendingText,
+  onDismiss,
+  missingToolAction,
+  onDismissMissingTool,
+  positionClassName = "absolute bottom-2 left-1/2 max-w-[92%] -translate-x-1/2",
+}: RemoteDesktopClipboardNoticeProps) {
+  const [copyFailed, setCopyFailed] = useState(false);
+
+  if (pendingText !== null) {
+    const onCopy = () => {
+      // Synchronous inside the click: `execCommand` is ignored outside a user gesture.
+      if (copyTextWithGesture(pendingText)) onDismiss();
+      else setCopyFailed(true);
+    };
+    return (
+      <NoticeBar onDismiss={onDismiss} testId="remote-desktop-clipboard-pending" positionClassName={positionClassName}>
+        <ClipboardCheck className="size-4 shrink-0 text-emerald-400" />
+        <span className="min-w-0 flex-1 truncate">
+          {copyFailed ? "Could not copy — select the text manually:" : "Copied on the host:"}
+          <span className="ml-1 text-white/60">{preview(pendingText)}</span>
+        </span>
+        <button
+          type="button"
+          onClick={onCopy}
+          className="min-h-8 shrink-0 rounded bg-white/15 px-2.5 text-xs hover:bg-white/25"
+          data-testid="remote-desktop-clipboard-copy"
+        >
+          Copy here
+        </button>
+      </NoticeBar>
+    );
+  }
+
+  if (missingToolAction !== undefined && missingToolAction !== null) {
+    return (
+      <NoticeBar
+        onDismiss={onDismissMissingTool ?? (() => {})}
+        testId="remote-desktop-clipboard-missing-tool"
+        positionClassName={positionClassName}
+      >
+        <Clipboard className="size-4 shrink-0 text-amber-300" />
+        <span className="min-w-0 flex-1">The host has no clipboard tool installed.</span>
+        {missingToolAction.kind === "terminal" && (
+          <button
+            type="button"
+            onClick={() => runInTerminal(missingToolAction.command)}
+            title={missingToolAction.command}
+            className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded bg-white/15 px-2.5 text-xs hover:bg-white/25"
+          >
+            <TerminalSquare className="size-3.5" /> {missingToolAction.label}
+          </button>
+        )}
+      </NoticeBar>
+    );
+  }
+
+  return null;
+}
+
+/** Bottom-centre by default, so it never covers the corner controls. */
+function NoticeBar({
+  children,
+  onDismiss,
+  testId,
+  positionClassName,
+}: {
+  children: React.ReactNode;
+  onDismiss: () => void;
+  testId: string;
+  positionClassName: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "z-50 flex items-center gap-2 rounded-lg border border-white/10 bg-black/85 px-3 py-2 text-xs text-white shadow-lg",
+        positionClassName,
+      )}
+      data-testid={testId}
+    >
+      {children}
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label="Dismiss"
+        className="flex size-8 shrink-0 items-center justify-center rounded text-white/60 hover:bg-white/10 hover:text-white"
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+/** Enough to recognise the text, on one line — a pasted stack trace must not take the screen. */
+function preview(text: string): string {
+  const oneLine = text.replace(/\s+/g, " ").trim();
+  return oneLine.length > 60 ? `${oneLine.slice(0, 60)}…` : oneLine;
+}

package/src/web/components/remote-desktop/remote-desktop-codec-labels.ts

@@ -0,0 +1,28 @@
+/**
+ * Human names for ffmpeg's H.264 encoders, for the codec picker.
+ *
+ * The wire values are ffmpeg's own encoder names, because that is what the host probes and
+ * spawns — but `h264_qsv` says nothing to anyone who has not read the capture code, and the
+ * choice a user is actually making is "the GPU or the CPU". Unknown names are shown verbatim
+ * rather than hidden: a newer ffmpeg gaining an encoder should add a row here, and until it
+ * does the picker must still be able to name what the host is running.
+ */
+const CODEC_LABELS: Record<string, string> = {
+  h264_nvenc: "NVIDIA NVENC",
+  h264_qsv: "Intel QuickSync",
+  h264_vaapi: "VAAPI (GPU)",
+  h264_amf: "AMD AMF",
+  h264_videotoolbox: "Apple VideoToolbox",
+  libx264: "Software (x264)",
+};
+
+export function codecLabel(encoder: string): string {
+  return Object.hasOwn(CODEC_LABELS, encoder) ? CODEC_LABELS[encoder]! : encoder;
+}
+
+/** Whether this encoder runs on the GPU — the part that matters for "why is my CPU at 100%".
+ *  Everything except libx264 is hardware; the list is the encoders, not a name pattern, so a
+ *  future software encoder cannot be mislabelled by matching `h264_*`. */
+export function isHardwareCodec(encoder: string): boolean {
+  return encoder !== "libx264" && Object.hasOwn(CODEC_LABELS, encoder);
+}

package/src/web/components/remote-desktop/remote-desktop-custom-quality-dialog.tsx

@@ -0,0 +1,144 @@
+/**
+ * RustDesk's "Custom image quality" dialog: a bitrate-percentage slider, an fps slider, a
+ * "More" checkbox that raises the bitrate ceiling from 100% to 2000%, and Close.
+ *
+ * Both sliders commit on a debounce, not per tick: each commit respawns the host's ffmpeg
+ * (`-b:v`/`-r` are fixed at spawn), so a dragged slider would otherwise restart the capture
+ * dozens of times and the picture would strobe. RustDesk gets away with per-tick updates
+ * because its encoder is retunable in place; ours is not, and that difference is the reason
+ * for the delay rather than an arbitrary choice.
+ *
+ * Shown as a bottom sheet below `md` per `docs/design-guidelines.md`.
+ */
+import { useEffect, useRef, useState } from "react";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  CUSTOM_FPS_MAX, CUSTOM_FPS_MIN, CUSTOM_QUALITY_MAX_MORE_PERCENT, CUSTOM_QUALITY_MAX_PERCENT,
+  CUSTOM_QUALITY_MIN_PERCENT, clampCustomFps, clampCustomQualityPercent, customBitrateKbps,
+} from "../../../shared/remote-desktop-custom-quality";
+
+/** Long enough that a drag is one respawn, short enough to feel like a live control. */
+const COMMIT_DEBOUNCE_MS = 400;
+
+export interface RemoteDesktopCustomQualityDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  percent: number;
+  fps: number;
+  more: boolean;
+  onSetMore: (more: boolean) => void;
+  /** Commit both values; also selects the custom rung. */
+  onCommit: (percent: number, fps: number) => void;
+  /** The capture's own size, so the dialog can say what the percentage really costs. */
+  frameSize: { width: number; height: number };
+}
+
+export function RemoteDesktopCustomQualityDialog({
+  open, onOpenChange, percent, fps, more, onSetMore, onCommit, frameSize,
+}: RemoteDesktopCustomQualityDialogProps) {
+  const [localPercent, setLocalPercent] = useState(percent);
+  const [localFps, setLocalFps] = useState(fps);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Adopt the stored values whenever the dialog is opened, so it never shows a stale drag.
+  useEffect(() => { if (open) { setLocalPercent(percent); setLocalFps(fps); } }, [open, percent, fps]);
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  const max = more ? CUSTOM_QUALITY_MAX_MORE_PERCENT : CUSTOM_QUALITY_MAX_PERCENT;
+
+  const commitLater = (nextPercent: number, nextFps: number) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => onCommit(nextPercent, nextFps), COMMIT_DEBOUNCE_MS);
+  };
+  const changePercent = (raw: number) => {
+    const next = clampCustomQualityPercent(raw, more);
+    setLocalPercent(next);
+    commitLater(next, localFps);
+  };
+  const changeFps = (raw: number) => {
+    const next = clampCustomFps(raw);
+    setLocalFps(next);
+    commitLater(localPercent, next);
+  };
+  const toggleMore = (next: boolean) => {
+    onSetMore(next);
+    // Turning it off strands a percent above the new ceiling; commit the clamped value so the
+    // host is never left encoding at a rate the dialog no longer shows.
+    const clamped = clampCustomQualityPercent(localPercent, next);
+    if (clamped !== localPercent) { setLocalPercent(clamped); commitLater(clamped, localFps); }
+  };
+
+  const kbps = customBitrateKbps(localPercent, frameSize.width, frameSize.height);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" data-testid="remote-desktop-custom-quality-dialog">
+        <DialogHeader>
+          <DialogTitle>Custom image quality</DialogTitle>
+          <DialogDescription>
+            {/* RustDesk shows the bare percentage. The real figure is worth showing because the
+                percentage is not a ratio — 50% is the resolution's *base* bitrate, not half of
+                anything — so the number alone reads as "half quality" and is not. */}
+            {frameSize.width > 0
+              ? `${localPercent}% of the base rate for ${frameSize.width}×${frameSize.height} — about ${(kbps / 1000).toFixed(1)} Mbit/s`
+              : "Waiting for the first frame"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={CUSTOM_QUALITY_MIN_PERCENT}
+              max={max}
+              step={1}
+              value={Math.min(localPercent, max)}
+              onChange={(e) => changePercent(Number(e.target.value))}
+              aria-label="Bitrate"
+              data-testid="remote-desktop-custom-bitrate"
+              className="h-1 min-w-0 flex-1 cursor-pointer appearance-none rounded bg-accent accent-primary"
+            />
+            <span className="w-14 text-right text-xs tabular-nums">{localPercent}%</span>
+            <span className="w-14 text-xs text-muted-foreground">Bitrate</span>
+            <label className="flex shrink-0 items-center gap-1.5 text-xs">
+              <input
+                type="checkbox"
+                checked={more}
+                onChange={(e) => toggleMore(e.target.checked)}
+                data-testid="remote-desktop-custom-more"
+                className="size-3.5 accent-primary"
+              />
+              More
+            </label>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={CUSTOM_FPS_MIN}
+              max={CUSTOM_FPS_MAX}
+              step={1}
+              value={localFps}
+              onChange={(e) => changeFps(Number(e.target.value))}
+              aria-label="FPS"
+              data-testid="remote-desktop-custom-fps"
+              className="h-1 min-w-0 flex-1 cursor-pointer appearance-none rounded bg-accent accent-primary"
+            />
+            <span className="w-14 text-right text-xs tabular-nums">{localFps}</span>
+            <span className="w-14 text-xs text-muted-foreground">FPS</span>
+            {/* Keeps the two rows' sliders the same length as the row above, which carries an
+                extra checkbox. */}
+            <span className="w-[4.25rem] shrink-0" aria-hidden />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button onClick={() => onOpenChange(false)}>Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/remote-desktop/remote-desktop-mobile-key-bar.tsx

@@ -14,8 +14,18 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 
+/** Ctrl/Cmd + C or X, by `code` rather than by button label so renaming a button cannot
+ *  silently stop the host clipboard being fetched. */
+function isCopyChord(codes: readonly string[]): boolean {
+  const mod = codes.includes("ControlLeft") || codes.includes("MetaLeft");
+  return mod && (codes.includes("KeyC") || codes.includes("KeyX"));
+}
+
 export interface RemoteDesktopMobileKeyBarProps {
   sendMessage: (msg: Record<string, unknown>) => void;
+  /** Fired after a copy/cut combo — the touch equivalent of the desktop's Ctrl+C cue, since
+   *  none of these buttons goes through `use-remote-input-capture`'s key handler. */
+  onCopyCombo?: () => void;
 }
 
 const MODIFIERS = [
@@ -73,7 +83,7 @@ function KeyBarButton({
   );
 }
 
-export function RemoteDesktopMobileKeyBar({ sendMessage }: RemoteDesktopMobileKeyBarProps) {
+export function RemoteDesktopMobileKeyBar({ sendMessage, onCopyCombo }: RemoteDesktopMobileKeyBarProps) {
   const [held, setHeld] = useState<ReadonlySet<string>>(new Set());
   const heldRef = useRef(held);
   heldRef.current = held;
@@ -106,7 +116,8 @@ export function RemoteDesktopMobileKeyBar({ sendMessage }: RemoteDesktopMobileKe
     // chord (last key down first key up would read as a different shortcut on some apps).
     codes.forEach((code) => sendMessage({ type: "key", code, down: true }));
     [...codes].reverse().forEach((code) => sendMessage({ type: "key", code, down: false }));
-  }, [sendMessage]);
+    if (isCopyChord(codes)) onCopyCombo?.();
+  }, [sendMessage, onCopyCombo]);
 
   return (
     <div

package/src/web/components/remote-desktop/remote-desktop-mobile-settings.tsx

@@ -0,0 +1,232 @@
+/**
+ * The mobile viewer's settings panel — the toggles the desktop keeps in its `Settings2`
+ * dropdown, which has no room in a thumb-zone row of 44px buttons.
+ *
+ * Rendered *in flow* inside the bottom bar rather than through `mobile-bottom-sheet`, exactly
+ * like `remote-desktop-mobile-key-bar.tsx`: the viewer already lives in its own full-viewport
+ * portal, so a second portal would have to win a z-index argument with it, and a panel in the
+ * bottom bar rides that bar's `keyboardInset` lift for free.
+ *
+ * Scale modes are deliberately absent: pinch-zoom and the toolbar's Reset zoom already own the
+ * transform here, and they do it continuously rather than in three fixed steps.
+ */
+import { useMemo } from "react";
+import { Circle, Clipboard, EyeOff, Gauge, Image, MousePointer2, Square, Volume2 } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { fitLocalMode, localScreenSize, resolutionChoices } from "./remote-desktop-resolution-list";
+import type { HostMode } from "./use-remote-desktop-readiness";
+
+export interface RemoteDesktopMobileSettingsProps {
+  statsVisible: boolean;
+  onToggleStats: () => void;
+  showCursor: boolean;
+  onSetShowCursor: (show: boolean) => void;
+  clipboardEnabled: boolean;
+  onSetClipboardEnabled: (enabled: boolean) => void;
+  audioOn: boolean;
+  /** Why audio cannot be turned on, or null when it can. */
+  audioReason: string | null;
+  onSetAudioOn: (on: boolean) => void;
+  privacyOn: boolean;
+  privacyReason: string | null;
+  onSetPrivacyOn: (on: boolean) => void;
+  /** The host's own display modes, collapsed to one row per size by the panel. Empty on a host
+   *  whose resolution cannot be changed, which renders no section at all. */
+  hostModes: HostMode[];
+  hostModeId: string | null;
+  /** The mode the host was on before this session changed it, for the "Original" chip. */
+  hostOriginalModeId: string | null;
+  onSetHostMode: (modeId: string) => void;
+  /** Input injection available. Resizing the host is host control, so a view-only session must
+   *  not offer it — RustDesk gates the same submenu on `ffiModel.keyboard`. */
+  canResizeHost: boolean;
+  resolutionError: string | null;
+  recording: boolean;
+  recordingSupported: boolean;
+  onToggleRecording: () => void;
+  onScreenshot: () => void;
+}
+
+function SettingRow({
+  icon, label, hint, checked, onToggle, testId, disabled,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  hint?: string;
+  checked: boolean;
+  onToggle: () => void;
+  testId: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={onToggle}
+      data-testid={testId}
+      className="flex min-h-11 w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-white/80 active:bg-white/10 disabled:opacity-50"
+    >
+      <span className="shrink-0 opacity-80">{icon}</span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-xs">{label}</span>
+        {hint && <span className="block truncate text-[10px] text-white/45">{hint}</span>}
+      </span>
+      {/* A drawn switch rather than the `ui/switch` primitive: this panel sits on black inside
+          the viewer's own portal, where the themed component's surface colours disappear. */}
+      <span
+        className={cn(
+          "relative h-5 w-9 shrink-0 rounded-full transition-colors",
+          checked ? "bg-primary" : "bg-white/20",
+        )}
+      >
+        <span
+          className={cn(
+            "absolute top-0.5 size-4 rounded-full bg-white transition-all",
+            checked ? "left-[1.125rem]" : "left-0.5",
+          )}
+        />
+      </span>
+    </button>
+  );
+}
+
+export function RemoteDesktopMobileSettings({
+  statsVisible, onToggleStats, showCursor, onSetShowCursor,
+  clipboardEnabled, onSetClipboardEnabled,
+  audioOn, audioReason, onSetAudioOn,
+  privacyOn, privacyReason, onSetPrivacyOn,
+  hostModes, hostModeId, hostOriginalModeId, onSetHostMode, canResizeHost, resolutionError,
+  recording, recordingSupported, onToggleRecording, onScreenshot,
+}: RemoteDesktopMobileSettingsProps) {
+  const resolutions = useMemo(() => resolutionChoices(hostModes), [hostModes]);
+  const localScreen = useMemo(() => localScreenSize(), []);
+  const fitLocal = useMemo(
+    () => fitLocalMode(hostModes, localScreen, hostModeId),
+    [hostModes, localScreen, hostModeId],
+  );
+  return (
+    <div
+      className="mx-2 mb-1 space-y-0.5 rounded-xl border border-white/10 bg-black/90 p-1"
+      data-testid="remote-desktop-mobile-settings"
+    >
+      <SettingRow
+        icon={<Gauge className="size-4" />}
+        label="Quality monitor"
+        checked={statsVisible}
+        onToggle={onToggleStats}
+        testId="remote-desktop-mobile-stats-toggle"
+      />
+      <SettingRow
+        icon={<MousePointer2 className="size-4" />}
+        label="Show remote cursor"
+        hint="Restarts the stream"
+        checked={showCursor}
+        onToggle={() => onSetShowCursor(!showCursor)}
+        testId="remote-desktop-mobile-cursor-toggle"
+      />
+      <SettingRow
+        icon={<Clipboard className="size-4" />}
+        label="Sync clipboard"
+        hint="Off: Ctrl+V pastes the host's own clipboard"
+        checked={clipboardEnabled}
+        onToggle={() => onSetClipboardEnabled(!clipboardEnabled)}
+        testId="remote-desktop-mobile-clipboard-toggle"
+      />
+      {/* The tap on this row is the user gesture the autoplay policy needs to resume the
+          `AudioContext`, which is why audio can only ever be started from a control. */}
+      <SettingRow
+        icon={<Volume2 className="size-4" />}
+        label="Play host audio"
+        hint={audioReason ?? undefined}
+        checked={audioOn}
+        disabled={audioReason !== null}
+        onToggle={() => onSetAudioOn(!audioOn)}
+        testId="remote-desktop-mobile-audio-toggle"
+      />
+      <SettingRow
+        icon={<EyeOff className="size-4" />}
+        label="Privacy mode"
+        hint={privacyReason ?? "Blocks the host's own keyboard and mouse"}
+        checked={privacyOn}
+        disabled={privacyReason !== null && !privacyOn}
+        onToggle={() => onSetPrivacyOn(!privacyOn)}
+        testId="remote-desktop-mobile-privacy-toggle"
+      />
+      {/* A scrolling list of chips rather than a select: a native `<select>` on a phone opens
+          the OS picker *over* the viewer's own portal, and this panel is inside it. */}
+      {canResizeHost && resolutions.length > 1 && (
+        <div className="px-3 pt-1">
+          <div className="pb-1.5 text-[10px] uppercase tracking-wide text-white/40">Resolution</div>
+          <div className="flex max-h-28 flex-wrap gap-1.5 overflow-y-auto">
+            {hostOriginalModeId && hostOriginalModeId !== hostModeId && (
+              <button
+                type="button"
+                onClick={() => onSetHostMode(hostOriginalModeId)}
+                data-testid="remote-desktop-mobile-resolution-original"
+                className="min-h-9 rounded-md bg-white/10 px-2.5 py-1 text-[11px] text-white/70 active:bg-white/20"
+              >
+                Original
+              </button>
+            )}
+            {/* A phone's screen is almost never one of the host's advertised sizes, so this chip
+                is normally absent — the same as RustDesk on the same pair. */}
+            {fitLocal && (
+              <button
+                type="button"
+                onClick={() => onSetHostMode(fitLocal.id)}
+                data-testid="remote-desktop-mobile-resolution-fit-local"
+                className="min-h-9 rounded-md bg-white/10 px-2.5 py-1 text-[11px] text-white/70 active:bg-white/20"
+              >
+                Fit local
+              </button>
+            )}
+            {resolutions.map((r) => {
+              const active = (hostModeId ?? resolutions.find((c) => c.current)?.id) === r.id;
+              return (
+                <button
+                  key={r.id}
+                  type="button"
+                  onClick={() => onSetHostMode(r.id)}
+                  data-testid={`remote-desktop-mobile-resolution-${r.width}x${r.height}`}
+                  className={cn(
+                    "min-h-9 rounded-md px-2.5 py-1 text-[11px] tabular-nums",
+                    active ? "bg-white/25 text-white" : "bg-white/10 text-white/70 active:bg-white/20",
+                  )}
+                >
+                  {r.width}×{r.height}
+                </button>
+              );
+            })}
+          </div>
+          {resolutionError && (
+            <div className="pt-1.5 text-[10px] leading-tight text-red-400">{resolutionError}</div>
+          )}
+        </div>
+      )}
+      {/* Actions, not switches — a plain row each, so the drawn switch is never shown for
+          something that does not stay on. */}
+      <button
+        type="button"
+        onClick={onScreenshot}
+        data-testid="remote-desktop-mobile-screenshot"
+        className="flex min-h-11 w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-xs text-white/80 active:bg-white/10"
+      >
+        <Image className="size-4 opacity-80" /> Save screenshot
+      </button>
+      {recordingSupported && (
+        <button
+          type="button"
+          onClick={onToggleRecording}
+          data-testid="remote-desktop-mobile-record"
+          className="flex min-h-11 w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-xs text-white/80 active:bg-white/10"
+        >
+          {recording
+            ? <><Square className="size-4 text-red-500" /> Stop recording</>
+            : <><Circle className="size-4 opacity-80" /> Start recording</>}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/web/components/remote-desktop/remote-desktop-mobile-toolbar.tsx

@@ -1,11 +1,13 @@
 /**
  * Bottom (thumb-zone) toolbar for the mobile remote-desktop viewer: Touch/Mouse mode toggle,
  * virtual keyboard, zoom reset, close. Every button is a 44px+ touch target per
- * `docs/design-guidelines.md`'s Mobile-First UI Rules.
+ * `docs/design-guidelines.md`'s Mobile-First UI Rules — which is also why the three on/off
+ * settings live behind the More button in `remote-desktop-mobile-settings.tsx` instead of as
+ * three more buttons here: the row is `flex-1` per button, and at eight of them each target
+ * falls under 44px on a small phone.
  */
-import { Hand, MousePointer2, Keyboard, ZoomOut, Gauge, Monitor, X } from "@/lib/icons";
+import { Hand, MousePointer2, Keyboard, ZoomOut, Settings2, Monitor, Wifi, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
-import { useSettingsStore } from "@/stores/settings-store";
 import type { RemoteDesktopInputMode } from "./use-remote-desktop-touch";
 
 export interface RemoteDesktopMobileToolbarProps {
@@ -13,10 +15,17 @@ export interface RemoteDesktopMobileToolbarProps {
   displayLabel: string | null;
   /** Cycle to the next display — one tap per hop beats a dropdown in the thumb zone. */
   onNextDisplay: () => void;
+  /** Short name of the rung being streamed ("Auto", "480p"…) for the quality button's label. */
+  qualityLabel: string;
+  /** Cycle auto → tiny → low → balanced → high → auto, same one-tap-per-hop reasoning. */
+  onNextQuality: () => void;
   mode: RemoteDesktopInputMode;
   onToggleMode: () => void;
   onOpenKeyboard: () => void;
   onResetZoom: () => void;
+  /** Show/hide the settings panel above this row (stats, remote cursor, clipboard sync). */
+  settingsOpen: boolean;
+  onToggleSettings: () => void;
   onClose: () => void;
 }
 
@@ -51,15 +60,16 @@ function ToolbarButton({
 export function RemoteDesktopMobileToolbar({
   displayLabel,
   onNextDisplay,
+  qualityLabel,
+  onNextQuality,
   mode,
   onToggleMode,
   onOpenKeyboard,
   onResetZoom,
+  settingsOpen,
+  onToggleSettings,
   onClose,
 }: RemoteDesktopMobileToolbarProps) {
-  const statsVisible = useSettingsStore((s) => s.remoteDesktopStatsVisible);
-  const toggleStats = useSettingsStore((s) => s.toggleRemoteDesktopStatsVisible);
-
   return (
     <div
       className="flex shrink-0 items-stretch gap-1 border-t border-white/10 bg-black/90 px-2 pb-[max(0.375rem,env(safe-area-inset-bottom))] pt-1.5"
@@ -79,8 +89,11 @@ export function RemoteDesktopMobileToolbar({
           <Monitor className="size-5" />
         </ToolbarButton>
       )}
-      <ToolbarButton onClick={toggleStats} label="Stats" active={statsVisible}>
-        <Gauge className="size-5" />
+      <ToolbarButton onClick={onNextQuality} label={qualityLabel}>
+        <Wifi className="size-5" />
+      </ToolbarButton>
+      <ToolbarButton onClick={onToggleSettings} label="More" active={settingsOpen}>
+        <Settings2 className="size-5" />
       </ToolbarButton>
       <ToolbarButton onClick={onClose} label="Close">
         <X className="size-5" />