@hienlh/ppm 0.21.0 → 0.22.0

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" />

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

@@ -9,14 +9,23 @@
 import { useRef, useState, useCallback } from "react";
 import { RotateCw, MonitorX } from "@/lib/icons";
 import { useVisualViewport } from "@/hooks/use-visual-viewport";
+import { useSettingsStore } from "@/stores/settings-store";
 import { useRemoteDesktopConnection } from "./use-remote-desktop-connection";
 import { useRemoteDesktopTouch, type RemoteDesktopInputMode } from "./use-remote-desktop-touch";
 import { useRemoteDesktopVirtualKeyboard } from "./use-remote-desktop-virtual-keyboard";
 import { RemoteDesktopMobileToolbar } from "./remote-desktop-mobile-toolbar";
+import {
+  nextQualityChoice, shortQualityLabel, type QualityChoice,
+} from "../../../shared/remote-desktop-quality";
 import { RemoteDesktopMobileKeyBar } from "./remote-desktop-mobile-key-bar";
+import { RemoteDesktopMobileSettings } from "./remote-desktop-mobile-settings";
+import { useRemoteDesktopRecorder } from "./use-remote-desktop-recorder";
+import { saveCanvasScreenshot } from "./remote-desktop-recording";
 import { RemoteDesktopStatsOverlay } from "./remote-desktop-stats-overlay";
 import { letterboxedContentRect } from "./remote-desktop-coords";
 import { useRemoteDesktopDisplayChoice } from "./use-remote-desktop-display-choice";
+import { RemoteDesktopClipboardNotice } from "./remote-desktop-clipboard-notice";
+import { useRemoteDesktopReadiness } from "./use-remote-desktop-readiness";
 
 export interface RemoteDesktopMobileViewProps {
   onClose: () => void;
@@ -27,12 +36,21 @@ export default function RemoteDesktopMobileView({ onClose }: RemoteDesktopMobile
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [mode, setMode] = useState<RemoteDesktopInputMode>("mouse");
   const [keyBarOpen, setKeyBarOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const display = useRemoteDesktopDisplayChoice();
 
   const {
     connState, errorMessage, decoderStatus, decoderErrorMessage, sendMessage, reconnect,
-    getTotalBytes, getFrameCount,
+    getTotalBytes, getFrameCount, quality, setQuality, showCursor, setShowCursor,
+    audioOn, setAudioOn, getAudioTracks, privacyOn, privacyError, setPrivacyOn,
+    hostModeId, hostOriginalModeId, resolutionError, setHostMode,
+    pendingHostClipboard, clearHostClipboard, sendClipboard, requestHostClipboard,
   } = useRemoteDesktopConnection(canvasRef, { displayId: display.displayId });
+  const statsVisible = useSettingsStore((s) => s.remoteDesktopStatsVisible);
+  const toggleStats = useSettingsStore((s) => s.toggleRemoteDesktopStatsVisible);
+  const clipboardSync = useSettingsStore((s) => s.remoteDesktopClipboardSync);
+  const setClipboardSync = useSettingsStore((s) => s.setRemoteDesktopClipboardSync);
+  const qualityChoice = useSettingsStore((st) => st.remoteDesktopQuality);
   const streaming = connState === "streaming";
 
   const { transform, virtualCursor, resetZoom } = useRemoteDesktopTouch({
@@ -42,7 +60,24 @@ export default function RemoteDesktopMobileView({ onClose }: RemoteDesktopMobile
     sendMessage,
     enabled: streaming,
   });
-  const { inputRef: keyboardInputRef, show: showKeyboard } = useRemoteDesktopVirtualKeyboard(sendMessage, streaming);
+  // A phone paste goes through the *host clipboard* rather than being typed character by
+  // character: typing is subject to the host's IME (a Telex host rewrites "World" as "ửold"),
+  // and a pasted URL or token is exactly the text that must survive verbatim. The server falls
+  // back to typing by itself when the host has no clipboard tool.
+  const [pasteAttempted, setPasteAttempted] = useState(false);
+  // Undefined with sync off, which is how the toggle is implemented on this surface: the
+  // virtual keyboard then lets the `paste` event's own default action stand (i.e. nothing
+  // leaves the device), and the key bar's Ctrl+V button still pastes the *host's* clipboard.
+  const onPasteText = useCallback((text: string) => {
+    setPasteAttempted(true);
+    sendClipboard(text, true);
+  }, [sendClipboard]);
+  // One fetch, no polling — read only to explain a paste that had to fall back to typing, and
+  // an audio toggle the host cannot honour.
+  const { caps } = useRemoteDesktopReadiness(false);
+  const recorder = useRemoteDesktopRecorder(canvasRef, getAudioTracks);
+  const { inputRef: keyboardInputRef, show: showKeyboard } =
+    useRemoteDesktopVirtualKeyboard(sendMessage, streaming, clipboardSync ? onPasteText : undefined);
 
   // Lifts the toolbar/key-bar row above the on-screen keyboard instead of the whole sheet
   // shrinking to make room for it (that was the previous, since-reverted behavior — see
@@ -169,14 +204,58 @@ export default function RemoteDesktopMobileView({ onClose }: RemoteDesktopMobile
         style={keyboardInset > 0 ? { transform: `translateY(-${keyboardInset}px)` } : undefined}
         data-testid="remote-desktop-mobile-bottom-bar"
       >
-        {keyBarOpen && <RemoteDesktopMobileKeyBar sendMessage={sendMessage} />}
+        {/* In flow above the key bar so it rides the same `keyboardInset` lift and is never
+            hidden behind the toolbar. */}
+        <RemoteDesktopClipboardNotice
+          pendingText={pendingHostClipboard}
+          onDismiss={clearHostClipboard}
+          missingToolAction={pasteAttempted && caps && !caps.clipboard.available ? caps.clipboard.action : null}
+          onDismissMissingTool={() => setPasteAttempted(false)}
+          positionClassName="mx-2 mb-1 max-w-[calc(100%-1rem)]"
+        />
+        {settingsOpen && (
+          <RemoteDesktopMobileSettings
+            statsVisible={statsVisible}
+            onToggleStats={toggleStats}
+            showCursor={showCursor}
+            onSetShowCursor={setShowCursor}
+            clipboardEnabled={clipboardSync}
+            onSetClipboardEnabled={setClipboardSync}
+            audioOn={audioOn}
+            audioReason={caps && !caps.audio.available ? caps.audio.reason : null}
+            onSetAudioOn={setAudioOn}
+            privacyOn={privacyOn}
+            privacyReason={privacyError ?? (caps && !caps.privacy.available ? caps.privacy.reason : null)}
+            hostModes={caps?.resolutions?.modes ?? []}
+            hostModeId={hostModeId}
+            hostOriginalModeId={hostOriginalModeId}
+            onSetHostMode={setHostMode}
+            canResizeHost={caps?.inputReady ?? false}
+            resolutionError={resolutionError}
+            onSetPrivacyOn={setPrivacyOn}
+            recording={recorder.recording}
+            recordingSupported={recorder.supported}
+            onToggleRecording={recorder.toggle}
+            onScreenshot={() => void saveCanvasScreenshot(canvasRef.current)}
+          />
+        )}
+        {keyBarOpen && (
+          <RemoteDesktopMobileKeyBar
+            sendMessage={sendMessage}
+            onCopyCombo={clipboardSync ? requestHostClipboard : undefined}
+          />
+        )}
         <RemoteDesktopMobileToolbar
           displayLabel={display.displays.length > 1 ? display.current?.label ?? null : null}
           onNextDisplay={display.next}
+          qualityLabel={shortQualityLabel(qualityChoice)}
+          onNextQuality={() => setQuality(nextQualityChoice(qualityChoice))}
           mode={mode}
           onToggleMode={toggleMode}
           onOpenKeyboard={openKeyboard}
           onResetZoom={resetZoom}
+          settingsOpen={settingsOpen}
+          onToggleSettings={() => setSettingsOpen((open) => !open)}
           onClose={onClose}
         />
       </div>