diff --git a/images/chromium-headful/client/public/index.html b/images/chromium-headful/client/public/index.html
index 6869c600b..e327bfa9b 100644
--- a/images/chromium-headful/client/public/index.html
+++ b/images/chromium-headful/client/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
     <title>Kernel</title>
     <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTEiIGhlaWdodD0iMTM5IiB2aWV3Qm94PSIwIDAgMTExIDEzOSIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0xMS4xNzUzIDBDMTQuMjY3MiAwIDE2Ljg5NDIgMS4wOTc2IDE5LjA1NDggMy4yOTMxMUMyMS4yNTI2IDUuNDUxNCAyMi4zNTEzIDguMDc1MTYgMjIuMzUxMyAxMS4xNjM3VjE2LjU1NjJDMjIuMzUxMyAxNy4yMjYxIDIzLjIwMzUgMTcuNTExMSAyMy42MDY0IDE2Ljk3NTlMMzMuMDI0NCA0LjQ2NTc2QzM0Ljg0OTggMi4wMDk3NSAzNy4yODk4IDAuNTc2OTU2IDQwLjM0NDUgMC4xNjc2MTlDNDMuMzk5IC0wLjI3ODgzIDQ2LjE3NDUgMC40MDk1NSA0OC42NzAzIDIuMjMyODhDNTEuMTI4NyA0LjA5MzQ0IDUyLjU2MjcgNi41NDk0MiA1Mi45NzI1IDkuNjAwNjRDNTMuNDE5NSAxMi42NTIxIDUyLjcxMTkgMTUuNDA2NCA1MC44NDkzIDE3Ljg2MjRMNDEuMTM5IDMwLjgxMjdDNDAuNzY3MyAzMS4zMDg0IDQwLjc2NyAzMS45OTAxIDQxLjEzODMgMzIuNDg2MUw1My41ODcxIDQ5LjEyMDdDNTUuNDQ5NyA1MS41NzY3IDU2LjE1OCA1NC4zMzAzIDU1LjcxMSA1Ny4zODE3QzU1LjMwMTIgNjAuNDMzMSA1My44NjY2IDYyLjg4ODkgNTEuNDA4MSA2NC43NDk1QzQ4LjkxMjIgNjYuNTcyOSA0Ni4xMzY5IDY3LjI2MTMgNDMuMDgyMyA2Ni44MTQ4QzQwLjAyNzcgNjYuNDA1NCAzNy41ODc2IDY0Ljk3MzEgMzUuNzYyMiA2Mi41MTczTDIzLjYwNTcgNDYuNDI3MkMyMy4yMDIzIDQ1Ljg5MzIgMjIuMzUxMyA0Ni4xNzgzIDIyLjM1MTMgNDYuODQ3NlY1NS44MTg2QzIyLjM1MTMgNTguOTA3MiAyMS4yNTI2IDYxLjU0OTYgMTkuMDU0OCA2My43NDUxQzE2Ljg5NDIgNjUuOTAzNCAxNC4yNjcyIDY2Ljk4MjQgMTEuMTc1MyA2Ni45ODI0QzguMDgzNTMgNjYuOTgyMyA1LjQzODQ0IDY1LjkwMzQgMy4yNDA2NCA2My43NDUxQzEuMDgwMDYgNjEuNTQ5NiAwIDU4LjkwNzIgMCA1NS44MTg2VjExLjE2MzdDMS4wOTI0OGUtMDUgOC4wNzUxNCAxLjA4MDA2IDUuNDUxNDEgMy4yNDA2NCAzLjI5MzExQzUuNDM4NDQgMS4wOTc2NiA4LjA4MzUzIDguMzA0OTFlLTA1IDExLjE3NTMgMFoiIGZpbGw9IiM4MUIzMDAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ni41OTE4IDAuNTU4MDVDOTIuNzc1NiAwLjU1ODA1NiA5OC4wNDY4IDIuNzM1MzEgMTAyLjQwNSA3LjA4OTA4QzEwNi43NjQgMTEuNDQyOSAxMDguOTQzIDE2LjcwODMgMTA4Ljk0MyAyMi44ODU1QzEwOC45NDMgMjkuMDYyOCAxMDYuNzY0IDM0LjMyODggMTAyLjQwNSAzOC42ODI2QzEwMi4yNDggMzguODQwMSAxMDIuMDkgMzguOTkzNiAxMDEuOTMyIDM5LjE0MzJDMTAxLjM5NiAzOS42NTE4IDEwMS4yOTkgNDAuNDgzNiAxMDEuNzQyIDQxLjA3NDlMMTA3Ljc3IDQ5LjEyMDdDMTA5LjYzMiA1MS41NzY3IDExMC4zNCA1NC4zMzA0IDEwOS44OTMgNTcuMzgxN0MxMDkuNDgzIDYwLjQzMyAxMDguMDQ5IDYyLjg4ODkgMTA1LjU5MSA2NC43NDk1QzEwMy4wOTUgNjYuNTcyOCAxMDAuMzIgNjcuMjYxMiA5Ny4yNjQ5IDY2LjgxNDhDOTQuMjEwNCA2Ni40MDU0IDkxLjc3MDIgNjQuOTczMSA4OS45NDQ5IDYyLjUxNzNMODIuMzA2NiA0OS4yMTI3QzgxLjk1MDYgNDguNTkzMiA4MS4wMDM5IDQ4Ljg0NTYgODEuMDAzOCA0OS41NjAyVjU1LjgxODZDODEuMDAzOCA1OC45MDczIDc5LjkwNTIgNjEuNTQ5NiA3Ny43MDczIDYzLjc0NTFDNzUuNTQ2NyA2NS45MDM0IDcyLjkyMDQgNjYuOTgyMyA2OS44Mjg1IDY2Ljk4MjRDNjYuNzM2NiA2Ni45ODI0IDY0LjA5MTcgNjUuOTAzMyA2MS44OTM4IDYzLjc0NTFDNTkuNzMzMiA2MS41NDk2IDU4LjY1MjUgNTguOTA3MyA1OC42NTI1IDU1LjgxODZWMTEuNzIxOEM1OC42NTI1IDguNjMzMjEgNTkuNzMzMiA2LjAwOTQ1IDYxLjg5MzggMy44NTExNkM2NC4wOTE3IDEuNjU1NzggNjYuNzM2NyAwLjU1ODA1MyA2OS44Mjg1IDAuNTU4MDVIODYuNTkxOFpNODMuNTI4MyAxOC4xNDExQzgxLjAyMzYgMTguMTQxMSA3OC45OTMgMjAuMTcxNiA3OC45OTMgMjIuNjc2M0M3OC45OTMgMjUuMTgxMSA4MS4wMjM2IDI3LjIxMTYgODMuNTI4MyAyNy4yMTE2Qzg2LjAzMzEgMjcuMjExNiA4OC4wNjM2IDI1LjE4MTEgODguMDYzNiAyMi42NzYzQzg4LjA2MzYgMjAuMTcxNiA4Ni4wMzMxIDE4LjE0MTEgODMuNTI4MyAxOC4xNDExWiIgZmlsbD0iIzgxQjMwMCIvPgo8cGF0aCBkPSJNNTAuMjkwNiA3MS41MTc2QzUzLjM4MjMgNzEuNTE3NyA1Ni4wMDgyIDcyLjYxNTUgNTguMTY4NyA3NC44MTA3QzYwLjM2NjYgNzYuOTY5MSA2MS40NjU5IDc5LjU5MjcgNjEuNDY1OSA4Mi42ODE0VjEyNy4zMzZDNjEuNDY1OSAxMzAuNDI1IDYwLjM2NjYgMTMzLjA2NyA1OC4xNjg3IDEzNS4yNjNDNTYuMDA4MiAxMzcuNDIxIDUzLjM4MjMgMTM4LjUgNTAuMjkwNiAxMzguNUM0Ny4xOTg4IDEzOC41IDQ0LjU3MjQgMTM3LjQwMiA0Mi40MTE4IDEzNS4yMDdMMjMuNTczIDExMy43NjdDMjMuMTQ4MyAxMTMuMjg0IDIyLjM1MTUgMTEzLjU4NSAyMi4zNTEzIDExNC4yMjhWMTI3LjMzNkMyMi4zNTEzIDEzMC40MjUgMjEuMjUyIDEzMy4wNjcgMTkuMDU0MSAxMzUuMjYzQzE2Ljg5MzUgMTM3LjQyMSAxNC4yNjcyIDEzOC41IDExLjE3NTMgMTM4LjVDOC4wODM0NyAxMzguNSA1LjQzODQ4IDEzNy40MjEgMy4yNDA2NCAxMzUuMjYzQzEuMDgwMDQgMTMzLjA2NyAwIDEzMC40MjUgMCAxMjcuMzM2VjgyLjY4MTRDMS4wOTI0OWUtMDUgNzkuNTkyNyAxLjA4MDAzIDc2Ljk2OTEgMy4yNDA2NCA3NC44MTA3QzUuNDM4NDggNzIuNjE1MyA4LjA4MzQ2IDcxLjUxNzcgMTEuMTc1MyA3MS41MTc2QzE0LjI2NzEgNzEuNTE3NiAxNi45MTIxIDcyLjU5NjcgMTkuMTEgNzQuNzU0OUwzNy44OTIyIDk2LjE4OTdDMzguMzE2NyA5Ni42NzQgMzkuMTE0NiA5Ni4zNzM4IDM5LjExNDYgOTUuNzI5OFY4Mi42ODE0QzM5LjExNDYgNzkuNTkyNyA0MC4xOTUzIDc2Ljk2OTEgNDIuMzU1OSA3NC44MTA3QzQ0LjU1MzggNzIuNjE1NCA0Ny4xOTg4IDcxLjUxNzYgNTAuMjkwNiA3MS41MTc2WiIgZmlsbD0iIzgxQjMwMCIvPgo8cGF0aCBkPSJNNzYuNzMyOSA3MS41MTc2Qzc5LjgyNDcgNzEuNTE3NiA4Mi40NTExIDcyLjYxNTQgODQuNjExNyA3NC44MTA3Qzg2LjgwOTYgNzYuOTY5MSA4Ny45MDg5IDc5LjU5MjcgODcuOTA4OSA4Mi42ODE0VjExNC4yMTlDODcuOTA5IDExNC45OSA4OC41MzM3IDExNS42MTQgODkuMzA0NCAxMTUuNjE0SDk5LjA4NDlDMTAyLjE3NyAxMTUuNjE1IDEwNC44MDMgMTE2LjcxMiAxMDYuOTY0IDExOC45MDhDMTA5LjE2MSAxMjEuMDY2IDExMC4yNiAxMjMuNjkgMTEwLjI2IDEyNi43NzhDMTEwLjI2IDEyOS44NjcgMTA5LjE2MiAxMzIuNTA5IDEwNi45NjQgMTM0LjcwNUMxMDQuODAzIDEzNi44NjMgMTAyLjE3NyAxMzcuOTQyIDk5LjA4NDkgMTM3Ljk0Mkg3Ni43MzI5QzczLjY0MTMgMTM3Ljk0MiA3MC45OTY3IDEzNi44NjMgNjguNzk4OSAxMzQuNzA1QzY2LjYzODMgMTMyLjUwOSA2NS41NTc2IDEyOS44NjcgNjUuNTU3NiAxMjYuNzc4VjgyLjY4MTRDNjUuNTU3NiA3OS41OTI3IDY2LjYzODMgNzYuOTY5MSA2OC43OTg5IDc0LjgxMDdDNzAuOTk2NyA3Mi42MTU1IDczLjY0MTMgNzEuNTE3NyA3Ni43MzI5IDcxLjUxNzZaIiBmaWxsPSIjODFCMzAwIi8+CjxwYXRoIGQ9Ik0xMDEuNTkzIDcxLjUxNzZDMTA2LjM4IDcxLjUxNzYgMTEwLjI2IDc1LjM5MzggMTEwLjI2IDgwLjE3NTJDMTEwLjI2IDg0Ljk1NjggMTA2LjM4IDg4LjgzMjkgMTAxLjU5MyA4OC44MzI5Qzk2LjgwNjUgODguODMyOCA5Mi45MjY2IDg0Ljk1NjcgOTIuOTI2NiA4MC4xNzUyQzkyLjkyNjcgNzUuMzkzOCA5Ni44MDY1IDcxLjUxNzcgMTAxLjU5MyA3MS41MTc2WiIgZmlsbD0iIzgxQjMwMCIvPgo8L3N2Zz4K">
     <link rel="manifest" href="site.webmanifest">
diff --git a/images/chromium-headful/client/src/app.vue b/images/chromium-headful/client/src/app.vue
index 3d7a83039..cf25d9983 100644
--- a/images/chromium-headful/client/src/app.vue
+++ b/images/chromium-headful/client/src/app.vue
@@ -56,11 +56,12 @@
     bottom: 0;
     max-width: 100vw;
     max-height: 100vh;
+    max-height: 100dvh;
     flex-direction: row;
     display: flex;
 
     .neko-main {
-      min-width: 360px;
+      min-width: 0;
       max-width: 100%;
       flex-grow: 1;
       flex-direction: column;
@@ -144,10 +145,12 @@
 
       .neko-main {
         height: 100vh;
+        height: 100dvh;
       }
 
       .neko-menu {
         height: 100vh;
+        height: 100dvh;
         width: 100% !important;
       }
     }
diff --git a/images/chromium-headful/client/src/components/clipboard.vue b/images/chromium-headful/client/src/components/clipboard.vue
index 07b780f04..b4c7648ba 100644
--- a/images/chromium-headful/client/src/components/clipboard.vue
+++ b/images/chromium-headful/client/src/components/clipboard.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="clipboard" v-if="opened" @click="$event.stopPropagation()">
+  <div class="clipboard" :class="{ touch }" v-if="opened" @click="$event.stopPropagation()">
+    <p v-if="touch && hint" class="hint">{{ hint }}</p>
     <textarea ref="textarea" v-model="clipboard" @focus="$event.target.select()" />
+    <div v-if="touch" class="actions">
+      <button @click.stop.prevent="send">Paste into page</button>
+      <button @click.stop.prevent="close">Close</button>
+    </div>
   </div>
 </template>
 
@@ -32,19 +37,67 @@
         background: $text-normal;
       }
     }
+
+    // on touch devices it sits at the top, clear of the soft keyboard and the controls
+    &.touch {
+      top: calc(56px + env(safe-area-inset-top));
+      bottom: auto;
+      left: 50%;
+      right: auto;
+      z-index: 4;
+      width: calc(100% - 24px);
+      height: auto;
+      max-height: none;
+      transform: translateX(-50%);
+      box-sizing: border-box;
+
+      textarea {
+        display: block;
+        height: 96px;
+        font-size: 16px;
+        user-select: text;
+        -webkit-user-select: text;
+      }
+
+      .hint {
+        margin: 0 0 4px;
+        color: $text-normal;
+        font-size: 13px;
+      }
+
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 4px;
+
+        button {
+          min-height: 36px;
+          padding: 0 12px;
+          border: 0;
+          border-radius: 18px;
+          background: rgba($color: #fff, $alpha: 0.15);
+          color: $text-normal;
+          font-weight: 600;
+        }
+      }
+    }
   }
 </style>
 
 <script lang="ts">
-  import { Component, Ref, Vue } from 'vue-property-decorator'
+  import { Component, Prop, Ref, Vue } from 'vue-property-decorator'
 
   @Component({
     name: 'neko-clipboard',
   })
   export default class extends Vue {
     @Ref('textarea') readonly _textarea!: HTMLTextAreaElement
+    // the fallback when a touch device's clipboard cannot be read or written
+    @Prop(Boolean) readonly touch!: boolean
 
     private opened: boolean = false
+    private hint = ''
     private typing?: number
 
     get clipboard() {
@@ -62,10 +115,22 @@
       this.typing = window.setTimeout(() => this.$accessor.remote.sendClipboard(this.clipboard), 500)
     }
 
-    open() {
+    open(hint = '') {
       this.opened = true
+      this.hint = hint
       document.body.addEventListener('click', this.close)
-      window.setTimeout(() => this._textarea.focus(), 0)
+      // focusing it would raise the soft keyboard over it
+      if (!this.touch) window.setTimeout(() => this._textarea.focus(), 0)
+    }
+
+    // the text goes to the remote clipboard as typed; this pastes it into the page
+    send() {
+      if (this.typing) {
+        clearTimeout(this.typing)
+        this.typing = undefined
+      }
+      this.$emit('paste', this.clipboard)
+      this.close()
     }
 
     close() {
diff --git a/images/chromium-headful/client/src/components/touch-controls.vue b/images/chromium-headful/client/src/components/touch-controls.vue
new file mode 100644
index 000000000..332958754
--- /dev/null
+++ b/images/chromium-headful/client/src/components/touch-controls.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="touch-controls">
+    <div
+      ref="control"
+      class="keyboard-control"
+      :class="[`mode-${mode}`, { dragging: !!dragPoint, faded, open: keyboardOpen }]"
+      :style="controlStyle"
+      @touchstart.stop.prevent="onTouchStart"
+      @touchmove.stop.prevent="onTouchMove"
+      @touchend.stop.prevent="onTouchEnd"
+      @touchcancel.stop.prevent="onTouchCancel"
+      @mousedown.prevent
+    >
+      <button
+        class="control-button"
+        data-role="keyboard-toggle"
+        :aria-label="keyboardOpen ? 'Hide keyboard' : 'Keyboard'"
+        @click.stop.prevent="run('toggle')"
+      >
+        <i class="fas fa-keyboard" />
+        <span v-if="mode === 'bottom'">{{ keyboardOpen ? 'Hide keyboard' : 'Keyboard' }}</span>
+        <span v-else-if="keyboardOpen" class="short">Hide</span>
+      </button>
+      <button
+        v-if="copyOffered"
+        class="control-button"
+        data-role="copy"
+        aria-label="Copy"
+        @click.stop.prevent="run('copy')"
+      >
+        <i class="fas fa-copy" />
+        <span v-if="mode !== 'overlay'" :class="{ short: mode !== 'bottom' }">Copy</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .touch-controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .keyboard-control {
+    position: absolute;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    border-radius: 22px;
+    background: rgba($color: #000, $alpha: 0.7);
+    color: #fff;
+    font-size: 15px;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    pointer-events: auto;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity 300ms ease, left 200ms ease-out, top 200ms ease-out;
+
+    &.dragging {
+      transition: opacity 300ms ease;
+    }
+
+    .control-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-width: 44px;
+      min-height: 44px;
+      padding: 0 12px;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    // over the stream and in a side strip the buttons stack, as narrow as the strip
+    &.mode-left,
+    &.mode-right,
+    &.mode-overlay {
+      flex-direction: column;
+    }
+
+    &.mode-left,
+    &.mode-right {
+      .control-button {
+        flex-direction: column;
+        gap: 2px;
+        padding: 6px 0;
+      }
+
+      .short {
+        font-size: 10px;
+      }
+    }
+
+    &.open {
+      background: #81b300;
+      color: #000;
+    }
+
+    &.faded {
+      opacity: 0.3;
+    }
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
+  import {
+    ControlFrame,
+    ControlMode,
+    ControlPosition,
+    SafeArea,
+    Size,
+    dropControl,
+    placeControl,
+  } from '~/utils/touch-controls'
+
+  type ControlAction = 'toggle' | 'copy'
+
+  const ACTIONS: Record<string, ControlAction> = { 'keyboard-toggle': 'toggle', copy: 'copy' }
+
+  const IDLE_FADE_MS = 3000
+  const DRAG_SLOP = 6
+
+  interface Point {
+    x: number
+    y: number
+  }
+
+  @Component({ name: 'neko-touch-controls' })
+  export default class extends Vue {
+    @Ref('control') readonly _control!: HTMLElement
+
+    @Prop({ type: String, required: true }) readonly mode!: ControlMode
+    @Prop({ type: Object, required: true }) readonly position!: ControlPosition
+    @Prop({ type: Object, required: true }) readonly safeArea!: SafeArea
+    @Prop(Boolean) readonly keyboardOpen!: boolean
+    // shown for a while after a selection
+    @Prop(Boolean) readonly copyOffered!: boolean
+    @Prop({ type: Number, default: 0 }) readonly areaWidth!: number
+    @Prop({ type: Number, default: 0 }) readonly areaHeight!: number
+    @Prop({ type: Number, default: 0 }) readonly keyboardInset!: number
+
+    private size: Size = { width: 44, height: 44 }
+    private faded = false
+    private fadeTimer = 0
+    private touchStart: Point | null = null
+    // the button a touch started on
+    private touchAction: ControlAction = 'toggle'
+    // over the stream a faded control is easy to hit by accident, so its first touch only wakes it
+    private wakeOnly = false
+    // finger offset from the control's top-left corner, so a drag does not jump
+    private grab: Point = { x: 0, y: 0 }
+    private dragPoint: Point | null = null
+
+    get frame(): ControlFrame {
+      return {
+        area: { width: this.areaWidth, height: this.areaHeight },
+        control: this.size,
+        safe: this.safeArea,
+        keyboardInset: this.keyboardInset,
+      }
+    }
+
+    get corner(): Point {
+      if (this.dragPoint) {
+        return { x: this.dragPoint.x - this.grab.x, y: this.dragPoint.y - this.grab.y }
+      }
+      return placeControl(this.mode, this.position, this.frame)
+    }
+
+    get controlStyle() {
+      return { left: `${this.corner.x}px`, top: `${this.corner.y}px` }
+    }
+
+    mounted() {
+      this.measure()
+      this.wake()
+    }
+
+    updated() {
+      this.measure()
+    }
+
+    beforeDestroy() {
+      window.clearTimeout(this.fadeTimer)
+    }
+
+    @Watch('keyboardOpen')
+    onKeyboardOpen() {
+      this.wake()
+    }
+
+    // the label changes the control's size, which its placement depends on
+    measure() {
+      const { offsetWidth: width, offsetHeight: height } = this._control
+      if (width !== this.size.width || height !== this.size.height) {
+        this.size = { width, height }
+      }
+    }
+
+    // restore full opacity and restart the idle timer
+    wake() {
+      this.faded = false
+      window.clearTimeout(this.fadeTimer)
+      this.fadeTimer = window.setTimeout(() => {
+        this.faded = !this.keyboardOpen && !this.dragPoint
+      }, IDLE_FADE_MS)
+    }
+
+    run(action: ControlAction) {
+      this.wake()
+      this.$emit(action)
+    }
+
+    localPoint(t: Touch): Point {
+      const rect = this.$el.getBoundingClientRect()
+      return { x: t.clientX - rect.left, y: t.clientY - rect.top }
+    }
+
+    onTouchStart(e: TouchEvent) {
+      const button = (e.target as Element).closest('[data-role]')
+      this.touchAction = (button && ACTIONS[button.getAttribute('data-role') || '']) || 'toggle'
+      this.wakeOnly = this.faded && this.mode === 'overlay'
+      this.wake()
+      const p = this.localPoint(e.changedTouches[0])
+      const corner = this.corner
+      this.touchStart = p
+      this.grab = { x: p.x - corner.x, y: p.y - corner.y }
+    }
+
+    onTouchMove(e: TouchEvent) {
+      if (!this.touchStart) return
+      const p = this.localPoint(e.changedTouches[0])
+      if (!this.dragPoint && Math.hypot(p.x - this.touchStart.x, p.y - this.touchStart.y) < DRAG_SLOP) return
+      this.dragPoint = p
+    }
+
+    // runs inside touchend, so a tap can still raise the soft keyboard or use the clipboard
+    onTouchEnd() {
+      if (!this.dragPoint) {
+        this.touchStart = null
+        if (!this.wakeOnly) this.run(this.touchAction)
+        return
+      }
+
+      const corner = this.corner
+      this.touchStart = null
+      this.dragPoint = null
+      this.$emit('move', dropControl(this.mode, this.position, corner.x, corner.y, this.frame))
+      this.wake()
+    }
+
+    onTouchCancel() {
+      this.touchStart = null
+      this.dragPoint = null
+    }
+  }
+</script>
diff --git a/images/chromium-headful/client/src/components/touch-keys.vue b/images/chromium-headful/client/src/components/touch-keys.vue
new file mode 100644
index 000000000..93779da0e
--- /dev/null
+++ b/images/chromium-headful/client/src/components/touch-keys.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="touch-keys" :style="{ top: `${top}px` }" @touchstart.stop.prevent @mousedown.prevent>
+    <button
+      v-for="key in keys"
+      :key="key.label"
+      class="touch-key"
+      :class="{ latched: key.ctrl && ctrlLatched }"
+      :aria-label="key.label"
+      :aria-pressed="key.ctrl ? String(ctrlLatched) : undefined"
+      @touchend.stop.prevent="press(key)"
+      @click.stop.prevent="press(key)"
+    >
+      <i v-if="key.icon" :class="['fas', key.icon]" />
+      <span v-else>{{ key.label }}</span>
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .touch-keys {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    display: flex;
+    gap: 4px;
+    height: 44px;
+    padding: 0 calc(4px + env(safe-area-inset-right)) 0 calc(4px + env(safe-area-inset-left));
+    box-sizing: border-box;
+    background: rgba($color: #000, $alpha: 0.8);
+    touch-action: none;
+  }
+
+  .touch-key {
+    flex: 1;
+    min-width: 0;
+    margin: 4px 0;
+    border: 0;
+    border-radius: 6px;
+    background: rgba($color: #fff, $alpha: 0.15);
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    -webkit-tap-highlight-color: transparent;
+
+    &.latched {
+      background: #81b300;
+      color: #000;
+    }
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator'
+
+  export interface TouchKey {
+    label: string
+    icon?: string
+    keysym?: number
+    ctrl?: boolean
+    paste?: boolean
+  }
+
+  export const TOUCH_KEYS_HEIGHT = 44
+
+  export const TOUCH_KEYS: TouchKey[] = [
+    { label: 'Esc', keysym: 0xff1b },
+    { label: 'Tab', keysym: 0xff09 },
+    { label: 'Ctrl', ctrl: true },
+    { label: 'Left', icon: 'fa-arrow-left', keysym: 0xff51 },
+    { label: 'Up', icon: 'fa-arrow-up', keysym: 0xff52 },
+    { label: 'Down', icon: 'fa-arrow-down', keysym: 0xff54 },
+    { label: 'Right', icon: 'fa-arrow-right', keysym: 0xff53 },
+    { label: 'Paste', icon: 'fa-paste', paste: true },
+  ]
+
+  // A row of keys soft keyboards lack, shown above the soft keyboard. Every key
+  // acts on touchend, inside the tap, which reading the clipboard for Paste
+  // needs, and never takes focus, so the keyboard stays open.
+  @Component({ name: 'neko-touch-keys' })
+  export default class extends Vue {
+    @Prop({ type: Number, required: true }) readonly top!: number
+    @Prop(Boolean) readonly ctrlLatched!: boolean
+
+    readonly keys = TOUCH_KEYS
+
+    press(key: TouchKey) {
+      if (key.paste) {
+        this.$emit('paste')
+      } else if (key.ctrl) {
+        this.$emit('ctrl', !this.ctrlLatched)
+      } else {
+        this.$emit('key', key.keysym)
+      }
+    }
+  }
+</script>
diff --git a/images/chromium-headful/client/src/components/video.vue b/images/chromium-headful/client/src/components/video.vue
index 6b0355651..de10e4cda 100644
--- a/images/chromium-headful/client/src/components/video.vue
+++ b/images/chromium-headful/client/src/components/video.vue
@@ -12,9 +12,12 @@
           ref="overlay"
           class="overlay"
           spellcheck="false"
+          autocapitalize="off"
+          autocorrect="off"
+          :autocomplete="is_touch_device ? 'one-time-code' : 'off'"
           tabindex="0"
           data-gramm="false"
-          :style="{ pointerEvents: hosting ? 'auto' : 'none' }"
+          :style="{ pointerEvents: hosting || is_touch_device ? 'auto' : 'none' }"
           @click.stop.prevent
           @contextmenu.stop.prevent
           @mousemove.stop.prevent="onMouseMove"
@@ -22,12 +25,18 @@
           @mouseup.stop.prevent="onMouseUp"
           @mouseenter.stop.prevent="onMouseEnter"
           @mouseleave.stop.prevent="onMouseLeave"
-          @touchmove.stop.prevent="onTouchHandler"
-          @touchstart.stop.prevent="onTouchHandler"
-          @touchend.stop.prevent="onTouchHandler"
+          @touchstart.stop.prevent="onTouchStart"
+          @touchmove.stop.prevent="onTouchMove"
+          @touchend.stop.prevent="onTouchEnd"
+          @touchcancel.stop.prevent="onTouchCancel"
+          @keydown="onOverlayKey"
+          @keyup="onOverlayKey"
+          @input="onOverlayInput"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
           @paste.stop.prevent="onPaste"
           @focus="onOverlayFocus"
-          @blur="resetKeyboard"
+          @blur="onOverlayBlur"
         />
         <!-- KERNEL
         <div v-if="!playing && playable" class="player-overlay" @click.stop.prevent="playAndUnmute">
@@ -44,7 +53,10 @@
         <li><i @click.stop.prevent="requestFullscreen" class="fas fa-expand"></i></li>
         <li v-if="admin"><i @click.stop.prevent="openResolution" class="fas fa-desktop"></i></li>
         -->
-        <li v-if="!controlLocked && !implicitHosting && !readOnly" :class="extraControls || 'extra-control'">
+        <li
+          v-if="!controlLocked && !implicitHosting && !readOnly"
+          :class="extraControls || is_touch_device ? '' : 'extra-control'"
+        >
           <i
             :class="[
               hosted && !hosting ? 'disabled' : '',
@@ -72,16 +84,46 @@
           />
           -->
         </li>
-        <li
-          v-if="hosting && is_touch_device"
-          :class="extraControls || 'extra-control'"
-          @click.stop.prevent="openMobileKeyboard"
-        >
-          <i class="fas fa-keyboard" />
-        </li>
       </ul>
+      <neko-touch-controls
+        v-if="showTouchControls"
+        ref="controls"
+        :mode="touchLayout.mode"
+        :position="controlPosition"
+        :safe-area="safeArea"
+        :keyboard-open="keyboardOpen"
+        :area-width="playerWidth"
+        :area-height="playerHeight"
+        :keyboard-inset="keyboardInset"
+        :copy-offered="copyOffered"
+        @toggle="toggleMobileKeyboard"
+        @move="onControlMove"
+        @copy="copyToClipboard"
+      />
+      <neko-touch-keys
+        v-if="showTouchKeys"
+        :top="touchKeysTop"
+        :ctrl-latched="ctrlLatched"
+        @key="pressTouchKey"
+        @ctrl="latchCtrl"
+        @paste="pasteFromClipboard"
+      />
+      <button
+        v-if="zoomed && !hideControls"
+        class="touch-button zoom-chip"
+        @touchend.stop.prevent="resetZoom"
+        @click.stop.prevent="resetZoom"
+      >
+        {{ zoomScale.toFixed(1) }}× · Reset
+      </button>
+      <div v-if="touchNotice && !hideControls" class="touch-button touch-notice" role="status">{{ touchNotice }}</div>
       <neko-resolution ref="resolution" v-if="admin" />
-      <neko-clipboard ref="clipboard" v-if="hosting && (!clipboard_read_available || !clipboard_write_available)" />
+      <neko-clipboard
+        ref="clipboard"
+        v-if="hosting && (is_touch_device || !clipboard_read_available || !clipboard_write_available)"
+        :touch="is_touch_device"
+        @paste="pasteText"
+      />
     </div>
   </div>
 </template>
@@ -93,10 +135,46 @@
 
     .player {
       position: absolute;
+      box-sizing: border-box;
       display: flex;
       justify-content: center;
       align-items: center;
       background: #000;
+      overflow: hidden;
+      touch-action: none;
+      transition: transform 150ms ease-out;
+
+      .touch-button {
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 44px;
+        padding: 0 16px;
+        border: 0;
+        border-radius: 22px;
+        background: rgba($color: #000, $alpha: 0.7);
+        color: #fff;
+        font-size: 15px;
+        font-weight: 600;
+        white-space: nowrap;
+        cursor: pointer;
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      .zoom-chip {
+        left: calc(12px + env(safe-area-inset-left));
+        top: calc(12px + env(safe-area-inset-top));
+      }
+
+      .touch-notice {
+        left: 50%;
+        top: calc(12px + env(safe-area-inset-top));
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
 
       .video-menu {
         position: absolute;
@@ -153,6 +231,7 @@
         position: relative;
         width: 100%;
         max-width: calc(16 / 9 * 100vh);
+        transform-origin: 0 0;
 
         video {
           position: absolute;
@@ -205,8 +284,12 @@
           outline: 0;
           border: 0;
           color: transparent;
+          caret-color: transparent;
           background: transparent;
           resize: none;
+          touch-action: none;
+          // iOS zooms the page when focusing a field with a smaller font
+          font-size: 16px;
         }
 
         .player-aspect {
@@ -223,10 +306,27 @@
   import ResizeObserver from 'resize-observer-polyfill'
   import { elementRequestFullscreen, onFullscreenChange, isFullscreen, lockKeyboard, unlockKeyboard } from '~/utils'
   import { isClipboardReadGranted } from '~/utils/clipboard'
+  import { TouchGestures, Point } from '~/utils/touch-gestures'
+  import { ZoomPan, Box } from '~/utils/zoom-pan'
+  import {
+    ControlLayout,
+    ControlPosition,
+    SafeArea,
+    controlLayout,
+    decodePosition,
+    encodePosition,
+  } from '~/utils/touch-controls'
+  import { get, set } from '~/utils/localstorage'
+  import { CursorImage, CursorKind, cachedCursorKind, classifyCursor } from '~/utils/cursor-shape'
+  import { TextInput, XK_RETURN, focusNeedsGesture } from '~/utils/text-input'
+  import { TapKeyboard, TapKeyboardMode } from '~/utils/tap-keyboard'
+  import { keyboardPan, keyboardShrink } from '~/utils/keyboard-pan'
 
   import Emote from './emote.vue'
   import Resolution from './resolution.vue'
   import Clipboard from './clipboard.vue'
+  import TouchControls from './touch-controls.vue'
+  import TouchKeys, { TOUCH_KEYS_HEIGHT } from './touch-keys.vue'
 
   // @ts-ignore
   import GuacamoleKeyboard from '~/utils/guacamole-keyboard.ts'
@@ -235,12 +335,28 @@
   const SCROLL_SENSITIVITY_BASE = 10
   const INT16_MAX = 32767
 
+  // wheel units per remote pixel of finger travel, so content tracks the finger
+  const TOUCH_SCROLL_UNITS_PER_PX = 1.1
+  const TOUCH_NOTICE_MS = 3000
+  // how long Copy waits for the remote clipboard to change after Ctrl+C
+  const COPY_WAIT_MS = 2000
+  // how long Copy stays on the controls after a selection
+  const COPY_OFFER_MS = 8000
+  // pasted text up to this length is typed instead of pasted
+  const TYPED_PASTE_MAX = 32
+  // kept in the overlay so soft keyboards that only emit input events still report backspace
+  const INPUT_SENTINEL = ' '
+
+  const CONTROL_POSITION_KEY = 'touch_control_position'
+
   @Component({
     name: 'neko-video',
     components: {
       'neko-emote': Emote,
       'neko-resolution': Resolution,
       'neko-clipboard': Clipboard,
+      'neko-touch-controls': TouchControls,
+      'neko-touch-keys': TouchKeys,
     },
   })
   export default class extends Vue {
@@ -254,6 +370,7 @@
 
     private _wheelHandler: ((e: WheelEvent) => void) | null = null
     @Ref('clipboard') readonly _clipboard!: Clipboard
+    @Ref('controls') readonly _controls?: TouchControls
 
     // all controls are hidden (e.g. for cast mode)
     @Prop(Boolean) readonly hideControls!: boolean
@@ -271,6 +388,35 @@
     private mutedOverlay = true
     private isVideoSyncing = false
 
+    private gestures!: TouchGestures
+    private tapKeyboard!: TapKeyboard
+    private textInput!: TextInput
+    private zoom!: ZoomPan
+    private zoomScale = 1
+    private keyboardOpen = false
+    private touchNotice: string | null = null
+    private touchNoticeTimer = 0
+    // Copy control clipboard writes still waiting for their text
+    private copyWrites = 0
+    private cursorSeq = 0
+    private keyboardInset = 0
+    // how far the video is moved up above the soft keyboard, and the last tap
+    // measured from the player's top, which the move keeps visible
+    private keyboardPan = 0
+    private keyboardAnchor: number | null = null
+    // the extra keys row's top, in the player's coordinates
+    private touchKeysTop = 0
+    private ctrlLatched = false
+    private copyOffered = false
+    private copyOfferTimer = 0
+    private touchLayout: ControlLayout = { mode: 'overlay', band: 0 }
+    private controlPosition: ControlPosition = decodePosition(get<string>(CONTROL_POSITION_KEY, ''))
+    private playerWidth = 0
+    private playerHeight = 0
+    private safeAreaProbe: HTMLElement | null = null
+    private safeArea: SafeArea = { top: 0, bottom: 0, left: 0, right: 0 }
+    private scrollRemainder = { x: 0, y: 0 }
+
     get admin() {
       return this.$accessor.user.admin
     }
@@ -399,13 +545,47 @@
       )
     }
 
+    get showTouchControls() {
+      return this.hosting && this.is_touch_device && !this.hideControls && !this.fullscreen
+    }
+
+    get zoomed() {
+      return this.zoomScale > 1.01
+    }
+
+    // ?tapKeyboard=auto (default) raises the keyboard when a tap lands on text,
+    // always raises it on every tap, off leaves it to the keyboard button
+    get tapKeyboardMode(): TapKeyboardMode {
+      const value = new URL(location.href).searchParams.get('tapKeyboard')
+      return value === 'always' || value === 'off' ? value : 'auto'
+    }
+
+    get showTouchKeys() {
+      return this.keyboardOpen && this.showTouchControls
+    }
+
+    get inputEnabled() {
+      return this.hosting && !this.locked
+    }
+
+    // Losing input ends the page's part of a touch instead of each handler
+    // checking for it.
+    @Watch('inputEnabled')
+    onInputEnabledChanged(enabled: boolean) {
+      if (enabled || !this.gestures) return
+      this.gestures.cancel()
+      this.tapKeyboard.cancel()
+    }
+
     @Watch('width')
     onWidthChanged() {
+      this.resetZoom()
       this.onResize()
     }
 
     @Watch('height')
     onHeightChanged() {
+      this.resetZoom()
       this.onResize()
     }
 
@@ -480,7 +660,8 @@
 
     @Watch('clipboard')
     async onClipboardChanged(clipboard: string) {
-      if (this.clipboard_write_available) {
+      // a second write would replace the Copy control's pending one
+      if (this.clipboard_write_available && this.copyWrites === 0) {
         try {
           await navigator.clipboard.writeText(clipboard)
           this.$accessor.remote.setClipboard(clipboard)
@@ -491,6 +672,46 @@
     }
 
     mounted() {
+      this.zoom = new ZoomPan(this.containerBox, this.playerBox, this.maxZoom)
+      this.gestures = new TouchGestures({
+        onTouchBegin: this.onGestureBegin,
+        onTap: this.onGestureTap,
+        onLongPress: this.onGestureLongPress,
+        onLongPressRelease: this.onGestureLongPressRelease,
+        onDragStart: this.onGestureDragStart,
+        onDragMove: this.onGestureDragMove,
+        onDragEnd: this.onGestureDragEnd,
+        onScroll: this.onGestureScroll,
+        onPinchStart: this.onGesturePinchStart,
+        onPinchMove: this.onGesturePinchMove,
+        onPinchEnd: this.onGesturePinchEnd,
+      })
+      this.tapKeyboard = new TapKeyboard(
+        this.tapKeyboardMode,
+        focusNeedsGesture(navigator),
+        {
+          keyboardOpen: () => this.keyboardOpen,
+          focus: this.focusForTyping,
+          hold: this.holdFocus,
+          release: () => this._overlay.blur(),
+        },
+        {
+          now: () => performance.now(),
+          setTimeout: (fn, ms) => window.setTimeout(fn, ms),
+          clearTimeout: (id) => window.clearTimeout(id),
+        },
+      )
+      this.textInput = new TextInput(
+        (event, key) => {
+          this.$client.sendData(event, { key })
+          if (event === 'keydown' && key === XK_RETURN && this.is_touch_device) this.tapKeyboard.submit()
+        },
+        () => this.is_touch_device,
+      )
+      this.textInput.onCtrlLatch = (latched) => (this.ctrlLatched = latched)
+      // only touch input reads the cursor shape
+      if (this.is_touch_device) this.$client.on('cursor', this.onCursorImage)
+
       this._container.addEventListener('resize', this.onResize)
       this.onVolumeChanged(this.volume)
       this.onMutedChanged(this.muted)
@@ -548,6 +769,8 @@
       }
       document.addEventListener('wheel', this._wheelHandler, { passive: false, capture: true })
       window.addEventListener('blur', this.resetKeyboard)
+      window.visualViewport?.addEventListener('resize', this.updateKeyboardView)
+      window.visualViewport?.addEventListener('scroll', this.updateKeyboardView)
       window.addEventListener('pagehide', this.resetKeyboard)
       document.addEventListener('visibilitychange', this.resetKeyboardWhenHidden)
 
@@ -570,7 +793,7 @@
           return true
         }
 
-        this.$client.sendData('keydown', { key: this.keyMap(key) })
+        this.textInput.keyDown(key, this.keyMap(key))
       }
       this.keyboard.onkeyup = (key: number) => {
         if (!this.hosting || this.locked) {
@@ -582,17 +805,25 @@
           return
         }
 
-        this.$client.sendData('keyup', { key: this.keyMap(key) })
+        this.textInput.keyUp(key, this.keyMap(key))
       }
       this.keyboard.listenTo(this._overlay)
     }
 
     beforeDestroy() {
+      this.gestures.destroy()
+      this.tapKeyboard.cancel()
+      this.$client.off('cursor', this.onCursorImage)
+      window.clearTimeout(this.touchNoticeTimer)
+      window.clearTimeout(this.copyOfferTimer)
+      if (this.safeAreaProbe) this.safeAreaProbe.remove()
       if (this._wheelHandler) {
         document.removeEventListener('wheel', this._wheelHandler, { capture: true })
         this._wheelHandler = null
       }
       window.removeEventListener('blur', this.resetKeyboard)
+      window.visualViewport?.removeEventListener('resize', this.updateKeyboardView)
+      window.visualViewport?.removeEventListener('scroll', this.updateKeyboardView)
       window.removeEventListener('pagehide', this.resetKeyboard)
       document.removeEventListener('visibilitychange', this.resetKeyboardWhenHidden)
       this.observer.disconnect()
@@ -735,8 +966,11 @@
       this._resolution.open(event)
     }
 
-    openClipboard() {
-      this._clipboard.open()
+    openClipboard(hint?: string) {
+      if (!this._clipboard) return
+      // the panel sits at the top of the player, which the keyboard moves up
+      if (this.is_touch_device && this.keyboardOpen) this._overlay.blur()
+      this._clipboard.open(hint)
     }
 
     async syncClipboard() {
@@ -797,43 +1031,417 @@
       }
     }
 
-    onTouchHandler(e: TouchEvent) {
-      let first = e.changedTouches[0]
-      let type = ''
-      switch (e.type) {
-        case 'touchstart':
-          type = 'mousedown'
-          break
-        case 'touchmove':
-          type = 'mousemove'
-          break
-        case 'touchend':
-          type = 'mouseup'
-          break
-        default:
-          return
+    onTouchStart(e: TouchEvent) {
+      this.gestures.touchStart(e)
+    }
+
+    onTouchMove(e: TouchEvent) {
+      this.gestures.touchMove(e)
+    }
+
+    onTouchEnd(e: TouchEvent) {
+      this.gestures.touchEnd(e)
+    }
+
+    onTouchCancel() {
+      this.gestures.touchCancel()
+    }
+
+    // maps a client point on the (possibly zoomed) video to remote screen pixels
+    remotePoint(p: Point) {
+      const { w, h } = this.$accessor.video.resolution
+      const rect = this._overlay.getBoundingClientRect()
+      return {
+        x: Math.max(0, Math.min(w - 1, Math.round((w / rect.width) * (p.x - rect.left)))),
+        y: Math.max(0, Math.min(h - 1, Math.round((h / rect.height) * (p.y - rect.top)))),
+      }
+    }
+
+    // remote pixels per client pixel at the current zoom
+    remotePerClient() {
+      return this.width / this._overlay.getBoundingClientRect().width
+    }
+
+    clickAt(here: Point, button: number) {
+      this.$client.sendData('mousemove', here)
+      this.$client.sendData('mousedown', { key: button })
+      this.$client.sendData('mouseup', { key: button })
+    }
+
+    onGestureBegin(p: Point) {
+      this.unmuteOnInteraction()
+      this.tapKeyboard.touchBegin()
+      if (this._controls) this._controls.wake()
+
+      if (!this.controlling && this.implicitHosting && !this.locked) {
+        this.$accessor.remote.request()
+      }
+      if (!this.hosting) {
+        this.$emit('control-attempt')
       }
+      // without input the touch stays local, where only a pinch zooms
+      if (!this.inputEnabled) return false
+      this.$client.sendData('mousemove', this.remotePoint(p))
+      return true
+    }
+
+    onGestureTap(p: Point) {
+      const here = this.remotePoint(p)
+      this.clickAt(here, 1)
+      this.keyboardAnchor = p.y - this._player.getBoundingClientRect().top
+      // the click clears the remote selection
+      this.withdrawCopy()
+      this.tapKeyboard.tap(here, this.remotePerClient())
+      if (this.keyboardOpen) this.updateKeyboardView()
+    }
+
+    onGestureLongPress() {
+      if (navigator.vibrate) navigator.vibrate(15)
+    }
+
+    onGestureLongPressRelease(p: Point) {
+      this.clickAt(this.remotePoint(p), 3)
+    }
+
+    onGestureDragStart(p: Point) {
+      this.$client.sendData('mousemove', this.remotePoint(p))
+      this.pressedMouseButtons.add(1)
+      this.$client.sendData('mousedown', { key: 1 })
+    }
+
+    onGestureDragMove(p: Point) {
+      this.$client.sendData('mousemove', this.remotePoint(p))
+    }
 
-      const simulatedEvent = new MouseEvent(type, {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-        screenX: first.screenX,
-        screenY: first.screenY,
-        clientX: first.clientX,
-        clientY: first.clientY,
+    onGestureDragEnd(p: Point) {
+      if (!this.pressedMouseButtons.has(1)) return
+      this.$client.sendData('mousemove', this.remotePoint(p))
+      this.pressedMouseButtons.delete(1)
+      this.$client.sendData('mouseup', { key: 1 })
+      this.offerCopy()
+    }
+
+    // a long-press drag usually selects text, so Copy shows on the controls for a while
+    offerCopy() {
+      this.copyOffered = true
+      window.clearTimeout(this.copyOfferTimer)
+      this.copyOfferTimer = window.setTimeout(this.withdrawCopy, COPY_OFFER_MS)
+    }
+
+    withdrawCopy() {
+      window.clearTimeout(this.copyOfferTimer)
+      this.copyOffered = false
+    }
+
+    onGestureScroll(dx: number, dy: number) {
+      // finger travel in remote pixels; content follows the finger, so scroll the opposite way
+      const units = TOUCH_SCROLL_UNITS_PER_PX * this.remotePerClient()
+      this.scrollRemainder.x -= dx * units
+      this.scrollRemainder.y -= dy * units
+
+      const x = Math.trunc(this.scrollRemainder.x)
+      const y = Math.trunc(this.scrollRemainder.y)
+      if (x === 0 && y === 0) return
+      this.scrollRemainder.x -= x
+      this.scrollRemainder.y -= y
+      this.$client.sendData('wheel', {
+        x: Math.max(-INT16_MAX, Math.min(INT16_MAX, x)),
+        y: Math.max(-INT16_MAX, Math.min(INT16_MAX, y)),
       })
-      first.target.dispatchEvent(simulatedEvent)
     }
 
-    focusOverlay(e: MouseEvent) {
-      // Touch input is translated into an untrusted mouse event above. Keep the
-      // existing mobile-keyboard behavior while allowing a real mouse to focus
-      // the overlay on touch-capable devices.
-      if (this.is_touch_device && !e.isTrusted) {
+    onGesturePinchStart(mid: Point, distance: number) {
+      this.tapKeyboard.touchBegin()
+      this.zoom.pinchStart(mid, distance)
+    }
+
+    onGesturePinchMove(mid: Point, distance: number) {
+      this.zoom.pinchMove(mid, distance)
+      this.applyZoom(false)
+    }
+
+    onGesturePinchEnd() {
+      if (!this.zoom.zoomed) this.resetZoom()
+    }
+
+    // the container box before the zoom transform, in client coordinates
+    containerBox(): Box {
+      const player = this._player.getBoundingClientRect()
+      return {
+        left: player.left + this._container.offsetLeft,
+        top: player.top + this._container.offsetTop,
+        width: this._container.offsetWidth,
+        height: this._container.offsetHeight,
+      }
+    }
+
+    // the area the zoomed video may fill: the player minus the control band
+    // and the part an overlaid soft keyboard covers
+    playerBox(): Box {
+      const player = this._player.getBoundingClientRect()
+      const { left, top, width } = player
+      const height = player.height - this.keyboardInset
+      const { mode, band } = this.touchLayout
+      if (mode === 'bottom') return { left, top, width, height: player.height - Math.max(band, this.keyboardInset) }
+      if (mode === 'left') return { left: left + band, top, width: width - band, height }
+      if (mode === 'right') return { left, top, width: width - band, height }
+      return { left, top, width, height }
+    }
+
+    maxZoom() {
+      const fit = this.width / Math.max(this._container.offsetWidth, 1)
+      return Math.min(8, Math.max(3, fit * 1.5))
+    }
+
+    applyZoom(animate: boolean) {
+      this._container.style.transition = animate ? 'transform 150ms ease-out' : ''
+      this._container.style.transform = this.zoom.transform
+      this.zoomScale = this.zoom.scale
+    }
+
+    resetZoom() {
+      if (!this.zoom) return
+      this.zoom.reset()
+      this.applyZoom(true)
+    }
+
+    onCursorImage(image: CursorImage) {
+      // classification is async; only the newest cursor image may apply
+      const seq = ++this.cursorSeq
+      const apply = (kind: CursorKind) => {
+        if (seq === this.cursorSeq) this.tapKeyboard.cursor(kind)
+      }
+
+      const cached = cachedCursorKind(image)
+      if (cached) {
+        apply(cached)
+      } else {
+        classifyCursor(image).then(apply)
+      }
+    }
+
+    // The Paste key reads the phone's clipboard inside the tap, where Safari
+    // allows it after the user confirms. Where it cannot, the clipboard panel
+    // takes the text instead.
+    pasteFromClipboard() {
+      if (!navigator.clipboard || !navigator.clipboard.readText) {
+        this.openClipboard('Paste here, then tap Paste into page')
+        return
+      }
+      navigator.clipboard.readText().then(
+        (text) => {
+          if (text) {
+            this.pasteText(text)
+          } else {
+            this.showTouchNotice('The clipboard is empty')
+          }
+        },
+        () => this.openClipboard('Clipboard access was not allowed. Paste here, then tap Paste into page'),
+      )
+    }
+
+    // Short text is typed, which also works in fields that block pasting and in
+    // code fields with one box per character. Longer text goes through the
+    // remote clipboard and Ctrl+V, as a desktop paste does, once the remote
+    // confirms the clipboard; without that it is typed.
+    pasteText(text: string) {
+      text = text.replace(/[\r\n]+$/, '')
+      if (!text || !this.inputEnabled) return
+      if (text.length <= TYPED_PASTE_MAX && !/[\r\n]/.test(text)) {
+        this.textInput.paste(text)
+        return
+      }
+      this.nextRemoteClipboard()
+        .then((remote) => {
+          if (remote !== text) throw new Error('the remote clipboard holds other text')
+          if (this.inputEnabled) this.pressShortcut(0x0076)
+        })
+        .catch(() => {
+          if (this.inputEnabled) this.textInput.paste(text)
+        })
+      this.$accessor.remote.setClipboard(text)
+      this.$accessor.remote.sendClipboard(text)
+    }
+
+    // Ctrl and a letter key, mapped for the remote keyboard
+    pressShortcut(keysym: number) {
+      const ctrl = this.keyMap(0xffe3)
+      const key = this.keyMap(keysym)
+      this.$client.sendData('keydown', { key: ctrl })
+      this.$client.sendData('keydown', { key })
+      this.$client.sendData('keyup', { key })
+      this.$client.sendData('keyup', { key: ctrl })
+    }
+
+    pressTouchKey(keysym: number) {
+      if (this.inputEnabled) this.textInput.key(keysym)
+    }
+
+    latchCtrl(latched: boolean) {
+      this.textInput.latchCtrl(latched)
+    }
+
+    // The Copy control copies the remote selection to the phone. Safari only
+    // lets a page write the clipboard inside the tap, so the write starts here
+    // with its text pending, and the text arrives when the remote clipboard
+    // changes after Ctrl+C.
+    copyToClipboard() {
+      if (!this.inputEnabled) return
+      if (typeof ClipboardItem === 'undefined' || !navigator.clipboard || !navigator.clipboard.write) {
+        // the panel shows the remote clipboard once Ctrl+C updates it
+        this.pressShortcut(0x0063)
+        this.openClipboard('Select the text and copy it')
         return
       }
 
+      let copied = false
+      const text = this.nextRemoteClipboard().then((t) => {
+        copied = true
+        return new Blob([t], { type: 'text/plain' })
+      })
+      this.copyWrites++
+      navigator.clipboard
+        .write([new ClipboardItem({ 'text/plain': text })])
+        .then(
+          () => this.showTouchNotice('Copied'),
+          () => {
+            if (copied) {
+              this.openClipboard('Copying to this device was not allowed. Select the text and copy it')
+            } else {
+              this.showTouchNotice('Nothing was copied')
+            }
+          },
+        )
+        .then(() => this.copyWrites--)
+
+      this.pressShortcut(0x0063)
+    }
+
+    // the remote clipboard text from the next update, rejected if none comes in time
+    nextRemoteClipboard() {
+      return new Promise<string>((resolve, reject) => {
+        const onClipboard = (text: string) => {
+          window.clearTimeout(timer)
+          this.$client.off('clipboard', onClipboard)
+          if (text) {
+            resolve(text)
+          } else {
+            reject(new Error('the remote clipboard is empty'))
+          }
+        }
+        const timer = window.setTimeout(() => {
+          this.$client.off('clipboard', onClipboard)
+          reject(new Error('the remote clipboard did not change'))
+        }, COPY_WAIT_MS)
+        this.$client.on('clipboard', onClipboard)
+      })
+    }
+
+    showTouchNotice(text: string) {
+      this.touchNotice = text
+      window.clearTimeout(this.touchNoticeTimer)
+      this.touchNoticeTimer = window.setTimeout(() => (this.touchNotice = null), TOUCH_NOTICE_MS)
+    }
+
+    focusForTyping() {
+      this.resetInputSentinel()
+      this._overlay.removeAttribute('inputmode')
+      if (document.activeElement !== this._overlay) {
+        this._overlay.focus({ preventScroll: true })
+      } else if (!this.keyboardOpen) {
+        // removing inputmode from a held focus raised the keyboard
+        this.onOverlayFocus()
+      }
+    }
+
+    // Focuses the overlay inside the tap without showing the keyboard. iOS
+    // raises the keyboard when inputmode="none" is removed from an element that
+    // was focused inside a gesture, so a text cursor that arrives after the
+    // finger lifts can still open it.
+    holdFocus() {
+      this._overlay.setAttribute('inputmode', 'none')
+      this._overlay.focus({ preventScroll: true })
+      if (document.activeElement === this._overlay) return true
+      this._overlay.removeAttribute('inputmode')
+      return false
+    }
+
+    // iOS overlays the soft keyboard on the layout viewport, and some pages
+    // shrink instead. Either way the video keeps its size while the keyboard is
+    // open and moves up to keep the last tap visible, and the keyboard button
+    // is lifted by the part of the player still covered.
+    updateKeyboardView() {
+      const area = (!this.fullscreen ? this._component : document.body).getBoundingClientRect()
+      const viewport = window.visualViewport
+      const visibleTop = viewport ? Math.max(area.top, viewport.offsetTop) : area.top
+      // the extra keys row sits on the keyboard, so the video stays above both
+      const visibleBottom =
+        (viewport ? Math.min(area.bottom, viewport.offsetTop + viewport.height) : area.bottom) -
+        (this.showTouchKeys ? TOUCH_KEYS_HEIGHT : 0)
+      // the layout position, which the pan transform (mid-transition, too) does not move
+      const parent = this._player.offsetParent
+      const top = (parent ? parent.getBoundingClientRect().top : 0) + this._player.offsetTop
+      const height = this._player.offsetHeight
+      const pan =
+        this.keyboardOpen && this.is_touch_device
+          ? keyboardPan({
+              top,
+              height,
+              anchor: this.keyboardAnchor,
+              current: this.keyboardPan,
+              visibleTop,
+              visibleBottom,
+            })
+          : 0
+      if (pan !== this.keyboardPan) {
+        this.keyboardPan = pan
+        this._player.style.transform = pan ? `translateY(${-pan}px)` : ''
+      }
+      this.keyboardInset = Math.max(0, Math.round(top + height - pan - visibleBottom))
+      this.touchKeysTop = Math.round(visibleBottom - (top - pan))
+    }
+
+    toggleMobileKeyboard() {
+      if (this.keyboardOpen) {
+        this._overlay.blur()
+      } else {
+        this.focusForTyping()
+      }
+    }
+
+    resetInputSentinel() {
+      if (!this.is_touch_device) return
+      this._overlay.value = INPUT_SENTINEL
+      this._overlay.setSelectionRange(INPUT_SENTINEL.length, INPUT_SENTINEL.length)
+    }
+
+    // Soft keyboards that report keyCode 229 (Android) deliver text only through
+    // input events, which the Guacamole keyboard does not handle.
+    onOverlayInput(e: Event) {
+      if (!this.is_touch_device) return
+      if (this.inputEnabled) {
+        const event = e as InputEvent
+        // AutoFill can put the text in dataTransfer instead of data
+        const data = event.data ?? (event.dataTransfer ? event.dataTransfer.getData('text/plain') : null)
+        this.textInput.input(event.inputType, data)
+      }
+      if (!this.textInput.composing) this.resetInputSentinel()
+    }
+
+    onOverlayKey(e: KeyboardEvent) {
+      this.textInput.keyEvent(e.type === 'keyup')
+    }
+
+    onCompositionStart() {
+      this.textInput.compositionStart()
+    }
+
+    onCompositionEnd(e: CompositionEvent) {
+      this.textInput.compositionEnd(e.data || '', this.inputEnabled)
+      this.resetInputSentinel()
+    }
+
+    focusOverlay() {
       const focus = () => {
         if (this.hosting && !this.locked) {
           this._overlay.focus()
@@ -859,7 +1467,7 @@
         return
       }
 
-      this.focusOverlay(e)
+      this.focusOverlay()
 
       this.sendMousePos(e)
       this.pressedMouseButtons.add(e.button + 1)
@@ -871,7 +1479,7 @@
         return
       }
 
-      this.focusOverlay(e)
+      this.focusOverlay()
       this.sendMousePos(e)
       this.pressedMouseButtons.delete(e.button + 1)
       this.$client.sendData('mouseup', { key: e.button + 1 })
@@ -942,6 +1550,13 @@
       if (!this.hosting || this.locked) return
 
       try {
+        // on touch devices a native paste goes the same way as the Paste key
+        if (this.is_touch_device) {
+          const text = event.clipboardData?.getData('text/plain')
+          if (text) this.pasteText(text)
+          return
+        }
+
         // Read clipboard text directly from the paste event. This is
         // synchronous and works in every browser — including Safari
         // cross-origin iframes that block navigator.clipboard.readText()
@@ -978,20 +1593,104 @@
     }
 
     onOverlayFocus() {
+      if (this.tapKeyboard.holding) return
+      this.keyboardOpen = true
       if (this.hosting) {
+        if (this.is_touch_device) this.$accessor.remote.releaseCapsLock()
         this.syncClipboard()
       }
     }
 
+    onOverlayBlur() {
+      if (this.ctrlLatched) this.textInput.latchCtrl(false)
+      this.tapKeyboard.blur()
+      this._overlay.removeAttribute('inputmode')
+      this.keyboardOpen = false
+      this.resetKeyboard()
+    }
+
     onResize() {
       const { offsetWidth, offsetHeight } = !this.fullscreen ? this._component : document.body
+      const size = { width: offsetWidth, height: offsetHeight }
+      if (
+        this.is_touch_device &&
+        keyboardShrink(this.keyboardOpen, { width: this.playerWidth, height: this.playerHeight }, size)
+      ) {
+        this.updateKeyboardView()
+        return
+      }
+      if (`${offsetWidth}px` !== this._player.style.width || `${offsetHeight}px` !== this._player.style.height) {
+        this.resetZoom()
+      }
       this._player.style.width = `${offsetWidth}px`
       this._player.style.height = `${offsetHeight}px`
-      const aspectPreservingMaxWidth = (this.horizontal / this.vertical) * offsetHeight
-      this._container.style.maxWidth = `${
-        !this.fullscreen ? Math.min(this.width, aspectPreservingMaxWidth) : aspectPreservingMaxWidth
-      }px`
+      this.playerWidth = offsetWidth
+      this.playerHeight = offsetHeight
+
+      const aspect = this.horizontal / this.vertical
+      const maxWidth = (height: number) => (!this.fullscreen ? Math.min(this.width, aspect * height) : aspect * height)
+
+      // Reserve a band outside the video for the touch controls, shrinking the
+      // video slightly if needed; with no room they overlay the stream instead.
+      const videoWidth = Math.min(offsetWidth, maxWidth(offsetHeight))
+      this.safeArea = this.safeAreaInsets()
+      this.touchLayout = this.showTouchControls
+        ? controlLayout(
+            offsetWidth,
+            offsetHeight,
+            videoWidth,
+            videoWidth / aspect,
+            this.safeArea,
+            this.controlPosition.side,
+          )
+        : { mode: 'overlay', band: 0 }
+      const { mode, band } = this.touchLayout
+      this._player.style.paddingBottom = mode === 'bottom' ? `${band}px` : ''
+      this._player.style.paddingLeft = mode === 'left' ? `${band}px` : ''
+      this._player.style.paddingRight = mode === 'right' ? `${band}px` : ''
+
+      this._container.style.maxWidth = `${maxWidth(offsetHeight - (mode === 'bottom' ? band : 0))}px`
       this._aspect.style.paddingBottom = `${(this.vertical / this.horizontal) * 100}%`
+      this.updateKeyboardView()
+    }
+
+    safeAreaInsets(): SafeArea {
+      if (!this.safeAreaProbe) {
+        this.safeAreaProbe = document.createElement('div')
+        this.safeAreaProbe.style.cssText =
+          'position:fixed;visibility:hidden;pointer-events:none;' +
+          'padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)'
+        document.body.appendChild(this.safeAreaProbe)
+      }
+      const style = getComputedStyle(this.safeAreaProbe)
+      return {
+        top: parseFloat(style.paddingTop) || 0,
+        bottom: parseFloat(style.paddingBottom) || 0,
+        left: parseFloat(style.paddingLeft) || 0,
+        right: parseFloat(style.paddingRight) || 0,
+      }
+    }
+
+    onControlMove(position: ControlPosition) {
+      this.controlPosition = position
+      set(CONTROL_POSITION_KEY, encodePosition(position))
+      this.onResize()
+    }
+
+    @Watch('showTouchControls')
+    onShowTouchControls() {
+      this.$nextTick(this.onResize)
+    }
+
+    // the size kept while the keyboard was open is refitted once it closes
+    @Watch('keyboardOpen')
+    onKeyboardOpenChanged(open: boolean) {
+      if (!this.is_touch_device) return
+      if (open) {
+        this.updateKeyboardView()
+      } else {
+        this.onResize()
+      }
     }
 
     @Watch('focused')
@@ -1008,10 +1707,5 @@
         this._overlay.focus()
       }
     }
-
-    openMobileKeyboard() {
-      // focus opens the keyboard on mobile
-      this._overlay.focus()
-    }
   }
 </script>
diff --git a/images/chromium-headful/client/src/neko/base.ts b/images/chromium-headful/client/src/neko/base.ts
index cfc8e816a..37b16deac 100644
--- a/images/chromium-headful/client/src/neko/base.ts
+++ b/images/chromium-headful/client/src/neko/base.ts
@@ -1,6 +1,7 @@
 import EventEmitter from 'eventemitter3'
 import { OPCODE } from './data'
 import { EVENT, WebSocketEvents } from './events'
+import { CursorImage } from '~/utils/cursor-shape'
 
 import {
   WebSocketMessages,
@@ -47,6 +48,9 @@ export interface BaseEvents {
   warn: (...message: any[]) => void
   debug: (...message: any[]) => void
   error: (error: Error) => void
+  cursor: (image: CursorImage) => void
+  // the remote clipboard changed; sent even when the text is the same
+  clipboard: (text: string) => void
 }
 
 export abstract class BaseClient extends EventEmitter<BaseEvents> {
@@ -350,6 +354,8 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
     }
 
     this._channel = this._peer.createDataChannel('data')
+    // Safari defaults to blob, whose async conversion can reorder messages
+    this._channel.binaryType = 'arraybuffer'
     this._channel.onerror = this.onError.bind(this)
     this._channel.onmessage = this.onData.bind(this)
     this._channel.onclose = this.onDisconnected.bind(this, new Error('peer data channel closed'))
diff --git a/images/chromium-headful/client/src/neko/index.ts b/images/chromium-headful/client/src/neko/index.ts
index 9c7463483..a64a53bf9 100644
--- a/images/chromium-headful/client/src/neko/index.ts
+++ b/images/chromium-headful/client/src/neko/index.ts
@@ -4,6 +4,7 @@ import { BaseClient, BaseEvents } from './base'
 import { Member } from './types'
 import { EVENT } from './events'
 import { accessor } from '~/store'
+import { parseCursorImage } from '~/utils/cursor-shape'
 
 import {
   SystemMessagePayload,
@@ -131,7 +132,14 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.video.setStream(0)
   }
 
-  protected [EVENT.DATA]() {}
+  protected [EVENT.DATA](data: ArrayBuffer | string) {
+    if (!(data instanceof ArrayBuffer)) return
+
+    const image = parseCursorImage(data)
+    if (image) {
+      this.emit('cursor', image)
+    }
+  }
 
   /////////////////////////////
   // System Events
@@ -338,6 +346,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
   protected [EVENT.CONTROL.CLIPBOARD]({ text }: ControlClipboardPayload) {
     this.$accessor.remote.setClipboard(text)
+    this.emit('clipboard', text)
   }
 
   /////////////////////////////
diff --git a/images/chromium-headful/client/src/store/remote.ts b/images/chromium-headful/client/src/store/remote.ts
index a4c47c27c..fd737f64b 100644
--- a/images/chromium-headful/client/src/store/remote.ts
+++ b/images/chromium-headful/client/src/store/remote.ts
@@ -198,5 +198,21 @@ export const actions = actionTree(
       accessor.remote.setKeyboardModifierState({ capsLock, numLock, scrollLock })
       $client.sendMessage(EVENT.CONTROL.KEYBOARD, { capsLock, numLock, scrollLock })
     },
+
+    // Touch input types each letter's case with Shift and never sends Caps
+    // Lock, so it needs the remote's Caps Lock off; the other locks stay as they are.
+    releaseCapsLock({ state }) {
+      if (state.readOnly) return
+
+      const current = state.keyboardModifierState
+      if (current !== -1) {
+        accessor.remote.setKeyboardModifierState({
+          capsLock: false,
+          numLock: !!(current & 2),
+          scrollLock: !!(current & 4),
+        })
+      }
+      $client.sendMessage(EVENT.CONTROL.KEYBOARD, { capsLock: false })
+    },
   },
 )
diff --git a/images/chromium-headful/client/src/utils/cursor-shape.ts b/images/chromium-headful/client/src/utils/cursor-shape.ts
new file mode 100644
index 000000000..ca0666d6d
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/cursor-shape.ts
@@ -0,0 +1,100 @@
+// Classifies the remote X cursor image that neko pushes over the data channel.
+// Chromium switches to the text (I-beam) cursor over editable fields, which is
+// the only signal the client has that a tap landed on something typeable.
+
+export type CursorKind = 'text' | 'other' | 'unknown'
+
+export interface CursorImage {
+  width: number
+  height: number
+  xhot: number
+  yhot: number
+  png: Uint8Array
+}
+
+// data channel opcode for cursor images (neko server/internal/webrtc/payload/send.go)
+const OP_CURSOR_IMAGE = 0x02
+const HEADER_SIZE = 3
+const CURSOR_HEADER_SIZE = 8
+
+export function parseCursorImage(buffer: ArrayBuffer): CursorImage | undefined {
+  if (buffer.byteLength < HEADER_SIZE + CURSOR_HEADER_SIZE) return
+  const view = new DataView(buffer)
+  if (view.getUint8(0) !== OP_CURSOR_IMAGE) return
+  return {
+    width: view.getUint16(3),
+    height: view.getUint16(5),
+    xhot: view.getUint16(7),
+    yhot: view.getUint16(9),
+    png: new Uint8Array(buffer, HEADER_SIZE + CURSOR_HEADER_SIZE),
+  }
+}
+
+const cache = new Map<string, CursorKind>()
+
+function cacheKey(img: CursorImage) {
+  // FNV-1a over the image bytes; cursor images are small
+  let hash = 0x811c9dc5
+  for (let i = 0; i < img.png.length; i++) {
+    hash ^= img.png[i]
+    hash = Math.imul(hash, 0x01000193)
+  }
+  return `${img.width}x${img.height}@${img.xhot},${img.yhot}:${img.png.length}:${hash >>> 0}`
+}
+
+export function cachedCursorKind(img: CursorImage): CursorKind | undefined {
+  return cache.get(cacheKey(img))
+}
+
+export async function classifyCursor(img: CursorImage): Promise<CursorKind> {
+  const key = cacheKey(img)
+  const cached = cache.get(key)
+  if (cached) return cached
+
+  let kind: CursorKind = 'unknown'
+  try {
+    const bitmap = await createImageBitmap(new Blob([img.png], { type: 'image/png' }))
+    const canvas = document.createElement('canvas')
+    canvas.width = bitmap.width
+    canvas.height = bitmap.height
+    const ctx = canvas.getContext('2d')
+    if (ctx) {
+      ctx.drawImage(bitmap, 0, 0)
+      kind = classifyPixels(ctx.getImageData(0, 0, bitmap.width, bitmap.height), img.xhot, img.yhot)
+    }
+    bitmap.close()
+  } catch (e) {
+    kind = 'unknown'
+  }
+
+  cache.set(key, kind)
+  return kind
+}
+
+function classifyPixels(data: ImageData, xhot: number, yhot: number): CursorKind {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  for (let y = 0; y < data.height; y++) {
+    for (let x = 0; x < data.width; x++) {
+      if (data.data[(y * data.width + x) * 4 + 3] > 64) {
+        minX = Math.min(minX, x)
+        maxX = Math.max(maxX, x)
+        minY = Math.min(minY, y)
+        maxY = Math.max(maxY, y)
+      }
+    }
+  }
+  // an empty image means the cursor is hidden
+  if (maxX < 0) return 'unknown'
+
+  const width = maxX - minX + 1
+  const height = maxY - minY + 1
+  // I-beam: tall and narrow, hotspot in the middle of the shape. Arrows and
+  // hands have their hotspot at the tip, near the top edge.
+  const narrow = height >= 8 && width / height <= 0.6
+  const centeredX = Math.abs(xhot - (minX + maxX) / 2) <= Math.max(2, width * 0.35)
+  const middleY = yhot > minY + height * 0.2 && yhot < maxY - height * 0.2
+  return narrow && centeredX && middleY ? 'text' : 'other'
+}
diff --git a/images/chromium-headful/client/src/utils/keyboard-pan.ts b/images/chromium-headful/client/src/utils/keyboard-pan.ts
new file mode 100644
index 000000000..c17ce9ae9
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/keyboard-pan.ts
@@ -0,0 +1,43 @@
+// Keeps the video's scale while the soft keyboard is open and moves it up
+// instead, the way Safari scrolls a focused field into view. Coordinates are
+// client (CSS) pixels.
+
+// how far above the keyboard the tapped point stays, so the field under it shows too
+export const ANCHOR_GAP = 96
+const TOP_MARGIN = 16
+
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface KeyboardView {
+  // the player's top and height without any pan
+  top: number
+  height: number
+  // the last tap, measured from the player's top; null if there was none
+  anchor: number | null
+  current: number
+  // the part of the viewport the keyboard leaves visible
+  visibleTop: number
+  visibleBottom: number
+}
+
+// While the keyboard is open, a frame that only got shorter is the keyboard
+// taking room, not a new layout to fit the stream into.
+export function keyboardShrink(open: boolean, current: Size, next: Size) {
+  return open && next.width === current.width && next.height < current.height
+}
+
+// How far to move the video up. The current pan is kept while the tapped point
+// stays visible, and the video never moves further than its covered part.
+export function keyboardPan(view: KeyboardView) {
+  const max = Math.max(0, view.top + view.height - view.visibleBottom)
+  let pan = view.current
+  if (view.anchor !== null) {
+    const y = view.top + view.anchor
+    pan = Math.max(pan, y + ANCHOR_GAP - view.visibleBottom)
+    pan = Math.min(pan, y - TOP_MARGIN - view.visibleTop)
+  }
+  return Math.round(Math.max(0, Math.min(max, pan)))
+}
diff --git a/images/chromium-headful/client/src/utils/tap-keyboard.ts b/images/chromium-headful/client/src/utils/tap-keyboard.ts
new file mode 100644
index 000000000..7016ae3b7
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/tap-keyboard.ts
@@ -0,0 +1,198 @@
+// Decides whether a tap on the live view raises the soft keyboard. The signal is
+// the remote cursor shape: Chromium shows an I-beam over text fields (and over
+// selectable page text, which is the false positive), and the pointer moves to
+// the touch point on touchstart. Over a real network the cursor update usually
+// arrives after the finger lifts, and iOS ignores focus() outside a gesture, so
+// there the overlay is focused inside the tap with inputmode="none", which shows
+// no keyboard, and removing inputmode later raises it. If the guess misses a
+// field, the keyboard button opens the keyboard.
+
+import { Point } from './touch-gestures'
+import { CursorKind } from './cursor-shape'
+
+export type TapKeyboardMode = 'auto' | 'always' | 'off'
+
+// how long after a tap a text cursor can still raise the keyboard
+export const CURSOR_WAIT_MS = 800
+// how long after Enter the cursor has to leave the I-beam for the keyboard to close
+export const SUBMIT_WAIT_MS = 1000
+// remote px; the smallest radius for the spot where a text cursor was seen
+const TEXT_SPOT_MIN = 16
+// a tap this close (CSS px on screen) to where a text cursor was seen raises the keyboard
+const TEXT_SPOT_RADIUS = 12
+
+export interface TapKeyboardOutputs {
+  keyboardOpen(): boolean
+  // raise the keyboard, from a held focus if there is one
+  focus(): void
+  // focus without a keyboard; false if the focus did not take
+  hold(): boolean
+  // blur the overlay: closes the keyboard or ends a held focus
+  release(): void
+}
+
+export interface Clock {
+  now(): number
+  setTimeout(fn: () => void, ms: number): number
+  clearTimeout(id: number): void
+}
+
+interface Tap {
+  // remote point, for the text spot
+  here: Point
+  // remote px per CSS px when tapped
+  scale: number
+}
+
+type State =
+  | { name: 'idle' }
+  | { name: 'waiting'; tap: Tap; heldFocus: boolean; timer: number }
+  | { name: 'submitted'; timer: number }
+
+export class TapKeyboard {
+  private state: State = { name: 'idle' }
+  private cursorKind: CursorKind = 'unknown'
+  private cursorChangedAt = -Infinity
+  private touchBeganAt = 0
+  // A text cursor before this time may be for the previous tap's position, whose
+  // update can still be in flight when the pointer moves on, and the latest
+  // text cursor arrived in that window.
+  private staleUntil = -Infinity
+  // only says something about the touch it arrived during
+  private cursorStale = false
+  // remote position where a text cursor was last seen after a tap
+  private textSpot: Point | null = null
+
+  constructor(
+    private mode: TapKeyboardMode,
+    private focusNeedsGesture: boolean,
+    private out: TapKeyboardOutputs,
+    private clock: Clock,
+  ) {}
+
+  // the overlay is focused with inputmode="none" while a tap waits for the cursor
+  get holding() {
+    return this.state.name === 'waiting' && this.state.heldFocus
+  }
+
+  // A new touch ends the wait for the previous tap's cursor, so it cannot
+  // raise the keyboard during a scroll, pinch or drag.
+  touchBegin() {
+    this.touchBeganAt = this.clock.now()
+    if (this.state.name === 'waiting') this.staleUntil = this.touchBeganAt + CURSOR_WAIT_MS
+    this.cancel()
+  }
+
+  // Runs inside touchend, the only place iOS lets focus() raise the keyboard.
+  tap(here: Point, scale: number) {
+    this.cancel()
+    if (this.mode === 'off') return
+    if (this.mode === 'always') {
+      this.out.focus()
+      return
+    }
+
+    const tap = { here, scale }
+    if (this.cursorKind === 'text' && this.cursorChangedAt >= this.touchBeganAt && !this.cursorStale) {
+      this.textSpot = here
+      this.offer(true)
+      return
+    }
+
+    let heldFocus = false
+    if (this.nearTextSpot(tap)) {
+      // the tap may still have moved the pointer off the field, which the end
+      // of the window catches
+      this.offer(true)
+    } else if (!this.out.keyboardOpen() && this.focusNeedsGesture) {
+      // marked first: the focus event the hold causes must not count as the keyboard opening
+      this.state = { name: 'waiting', tap, heldFocus: true, timer: 0 }
+      heldFocus = this.out.hold()
+    }
+
+    // Pages often flash another cursor before the I-beam, so any text cursor
+    // within the window counts; only the end of the window means "not text".
+    const timer = this.clock.setTimeout(this.endWait, CURSOR_WAIT_MS)
+    this.state = { name: 'waiting', tap, heldFocus, timer }
+  }
+
+  cursor(kind: CursorKind) {
+    this.cursorKind = kind
+    this.cursorChangedAt = this.clock.now()
+    this.cursorStale = kind === 'text' && this.cursorChangedAt < this.staleUntil
+    if (kind !== 'text') return
+
+    const state = this.state
+    // a possibly stale I-beam is left to the end of the window, when a later
+    // cursor may have replaced it
+    if (state.name === 'waiting' && !this.cursorStale) {
+      this.clock.clearTimeout(state.timer)
+      this.state = { name: 'idle' }
+      this.textSpot = state.tap.here
+      this.offer(state.heldFocus)
+    }
+  }
+
+  // Enter was sent while the keyboard is open. If the I-beam under the last
+  // tap goes away, the form was submitted or the page navigated, so the
+  // keyboard closes; a chat box or textarea keeps its I-beam and the keyboard.
+  submit() {
+    if (!this.out.keyboardOpen() || this.cursorKind !== 'text') return
+    this.cancel()
+    this.state = { name: 'submitted', timer: this.clock.setTimeout(this.endSubmit, SUBMIT_WAIT_MS) }
+  }
+
+  // the overlay lost focus, so a held focus is gone
+  blur() {
+    if (this.state.name === 'waiting') this.state.heldFocus = false
+  }
+
+  // ends any wait, releasing a held focus
+  cancel() {
+    const state = this.state
+    this.state = { name: 'idle' }
+    if (state.name === 'idle') return
+    this.clock.clearTimeout(state.timer)
+    if (state.name === 'waiting' && state.heldFocus) this.out.release()
+  }
+
+  // No new text cursor showed up for the tap. An I-beam that was already
+  // showing stays put when the tap lands on text again, so only a non-text
+  // cursor means the tap was not on a text field.
+  private endWait = () => {
+    const state = this.state
+    if (state.name !== 'waiting') return
+    this.state = { name: 'idle' }
+    if (this.cursorKind === 'text' && this.cursorStale && this.cursorChangedAt >= this.touchBeganAt) {
+      // no later cursor settled it, so leave it to the keyboard button
+      if (state.heldFocus) this.out.release()
+      return
+    }
+    if (this.cursorKind === 'text') {
+      this.textSpot = state.tap.here
+      this.offer(state.heldFocus)
+      return
+    }
+    if (this.nearTextSpot(state.tap)) this.textSpot = null
+    if (this.out.keyboardOpen() || state.heldFocus) this.out.release()
+  }
+
+  private endSubmit = () => {
+    if (this.state.name !== 'submitted') return
+    this.state = { name: 'idle' }
+    if (this.cursorKind !== 'text' && this.out.keyboardOpen()) this.out.release()
+  }
+
+  // inGesture: running inside the tap, or from a focus held since then. iOS
+  // ignores a focus outside both.
+  private offer(inGesture: boolean) {
+    if (this.out.keyboardOpen()) return
+    if (inGesture || !this.focusNeedsGesture) this.out.focus()
+  }
+
+  private nearTextSpot(tap: Tap) {
+    if (!this.textSpot) return false
+    const radius = Math.max(TEXT_SPOT_MIN, TEXT_SPOT_RADIUS * tap.scale)
+    return Math.hypot(tap.here.x - this.textSpot.x, tap.here.y - this.textSpot.y) <= radius
+  }
+}
diff --git a/images/chromium-headful/client/src/utils/text-input.ts b/images/chromium-headful/client/src/utils/text-input.ts
new file mode 100644
index 000000000..5ed92612b
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/text-input.ts
@@ -0,0 +1,201 @@
+// Helpers for turning text from mobile soft keyboards into X keysyms.
+// Android keyboards report keyCode 229 for most keys, which the Guacamole
+// keyboard ignores, so their text only arrives through input events.
+
+export const XK_SHIFT_L = 0xffe1
+export const XK_SHIFT_R = 0xffe2
+export const XK_CAPS_LOCK = 0xffe5
+export const XK_CONTROL_L = 0xffe3
+export const XK_BACKSPACE = 0xff08
+export const XK_RETURN = 0xff0d
+
+export function charToKeysym(ch: string): number {
+  if (ch === '\n' || ch === '\r') return XK_RETURN
+  const cp = ch.codePointAt(0) as number
+  // Latin-1 keysyms equal their code points; everything else uses the Unicode range
+  if ((cp >= 0x20 && cp <= 0x7e) || (cp >= 0xa0 && cp <= 0xff)) return cp
+  return 0x01000000 | cp
+}
+
+// Neko maps a keysym to a keycode using the current modifier state. An upper
+// case letter sent without Shift lands on the lower case key, so soft keyboards
+// that never report Shift type the wrong case.
+export function needsShift(ch: string) {
+  return ch !== ch.toLowerCase() && ch === ch.toUpperCase()
+}
+
+export function keysymNeedsShift(keysym: number) {
+  if (keysym >= 0x41 && keysym <= 0x5a) return true
+  if (keysym >= 0xc0 && keysym <= 0xde && keysym !== 0xd7) return true
+  if ((keysym & 0xff000000) === 0x01000000) return needsShift(String.fromCodePoint(keysym & 0x00ffffff))
+  return false
+}
+
+// iOS (every browser there is WebKit) raises the soft keyboard only for focus()
+// inside a user gesture handler. Other mobile browsers also raise it for a
+// later focus() once the page has had a user gesture.
+export function focusNeedsGesture(nav: { userAgent: string; platform: string; maxTouchPoints: number }) {
+  return /iPad|iPhone|iPod/.test(nav.userAgent) || (nav.platform === 'MacIntel' && nav.maxTouchPoints > 1)
+}
+
+// Minimal edit that turns prev into next: delete from the end, then insert.
+export function textDiff(prev: string, next: string) {
+  const a = Array.from(prev)
+  const b = Array.from(next)
+  let common = 0
+  while (common < a.length && common < b.length && a[common] === b[common]) common++
+  return { deletes: a.length - common, insert: b.slice(common).join('') }
+}
+
+function isModifier(keysym: number) {
+  return (keysym >= 0xffe1 && keysym <= 0xffee) || keysym === 0xfe03
+}
+
+type KeySink = (event: 'keydown' | 'keyup', keysym: number) => void
+
+// The one path from keyboard input to X key events: key events from the
+// Guacamole keyboard, and text that arrives only as input or composition
+// events. On touch devices each letter's case comes from its keysym. Soft
+// keyboards report their Shift and Caps Lock as separate key events (iOS sends
+// them as synthetic modifier events, and the Guacamole keyboard releases every
+// key on iOS right after pressing it), so Caps Lock is never sent, the remote's
+// Caps Lock is turned off when the keyboard opens, and Shift is sent around a
+// capital unless the remote already holds Shift.
+export class TextInput {
+  composing = false
+  private composed = ''
+  // a key event already sent the text the next input event reports
+  private keyed = false
+  // compositionend already sent this text, and some keyboards repeat it in an input event
+  private compositionEcho: string | null = null
+  // Shift keys held on the remote, from the keys sent
+  private shiftDown = new Set<number>()
+  private shiftWrapped = new Set<number>()
+  // a Ctrl tapped on the extra keys row holds for the next key only
+  private ctrlLatched = false
+  private ctrlWrapped: number | null = null
+  onCtrlLatch: (latched: boolean) => void = () => {}
+
+  constructor(private send: KeySink, private touch: () => boolean) {}
+
+  // a key from the Guacamole keyboard; sent is the keysym after layout mapping
+  keyDown(keysym: number, sent = keysym) {
+    this.down(keysym, sent)
+    // modifiers type nothing, and iOS sends its soft Shift as one
+    if (!isModifier(keysym)) this.keyed = true
+  }
+
+  keyUp(keysym: number, sent = keysym) {
+    this.up(keysym, sent)
+  }
+
+  // A native keydown or keyup on the overlay. The Guacamole keyboard can
+  // release a key before its input event arrives (it does on iOS), so only the
+  // native keyup ends the key's claim on that event.
+  keyEvent(keyup: boolean) {
+    if (keyup) this.keyed = false
+    this.compositionEcho = null
+  }
+
+  input(inputType: string, data: string | null) {
+    const keyed = this.keyed
+    const echo = this.compositionEcho !== null && data === this.compositionEcho
+    this.keyed = false
+    this.compositionEcho = null
+
+    if (inputType === 'insertCompositionText') {
+      this.updateComposition(data || '')
+      return
+    }
+    if (keyed || echo) return
+
+    switch (inputType) {
+      case 'insertText':
+      case 'insertReplacementText':
+        this.type(data || '')
+        break
+      case 'insertLineBreak':
+      case 'insertParagraph':
+        this.press(XK_RETURN)
+        break
+      case 'deleteContentBackward':
+        this.press(XK_BACKSPACE)
+        break
+    }
+  }
+
+  latchCtrl(latched: boolean) {
+    this.ctrlLatched = latched
+    this.onCtrlLatch(latched)
+  }
+
+  // a key from the extra keys row
+  key(keysym: number) {
+    this.press(keysym)
+  }
+
+  // pasted text, without the line break copied text often ends with
+  paste(text: string) {
+    this.type(text.replace(/[\r\n]+$/, ''))
+  }
+
+  compositionStart() {
+    this.composing = true
+    this.composed = ''
+    this.compositionEcho = null
+  }
+
+  // send: false when input is not enabled, so the text is dropped
+  compositionEnd(data: string, send: boolean) {
+    if (send) this.updateComposition(data)
+    this.compositionEcho = data
+    this.composing = false
+    this.composed = ''
+  }
+
+  private updateComposition(text: string) {
+    const { deletes, insert } = textDiff(this.composed, text)
+    for (let i = 0; i < deletes; i++) this.press(XK_BACKSPACE)
+    this.type(insert)
+    this.composed = text
+  }
+
+  private type(text: string) {
+    for (const ch of Array.from(text)) this.press(charToKeysym(ch))
+  }
+
+  private press(keysym: number) {
+    this.down(keysym, keysym)
+    this.up(keysym, keysym)
+  }
+
+  private down(keysym: number, sent: number) {
+    if (this.touch() && keysym === XK_CAPS_LOCK) return
+    if (this.ctrlLatched && !isModifier(keysym) && this.ctrlWrapped === null) {
+      this.ctrlWrapped = keysym
+      this.send('keydown', XK_CONTROL_L)
+    }
+    if (this.needsShift(keysym)) {
+      this.shiftWrapped.add(keysym)
+      this.send('keydown', XK_SHIFT_L)
+    }
+    this.send('keydown', sent)
+    if (keysym === XK_SHIFT_L || keysym === XK_SHIFT_R) this.shiftDown.add(keysym)
+  }
+
+  private up(keysym: number, sent: number) {
+    if (this.touch() && keysym === XK_CAPS_LOCK) return
+    this.send('keyup', sent)
+    this.shiftDown.delete(keysym)
+    if (this.shiftWrapped.delete(keysym)) this.send('keyup', XK_SHIFT_L)
+    if (this.ctrlWrapped === keysym) {
+      this.ctrlWrapped = null
+      this.send('keyup', XK_CONTROL_L)
+      this.latchCtrl(false)
+    }
+  }
+
+  private needsShift(keysym: number) {
+    return this.touch() && this.shiftDown.size === 0 && keysymNeedsShift(keysym)
+  }
+}
diff --git a/images/chromium-headful/client/src/utils/touch-controls.ts b/images/chromium-headful/client/src/utils/touch-controls.ts
new file mode 100644
index 000000000..d85635c95
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/touch-controls.ts
@@ -0,0 +1,150 @@
+// Layout math for the touch controls. The control prefers a band outside the
+// video (shrinking the video a little to make one if needed) and only
+// overlays the stream when there is no room.
+
+// a 44px target plus a 4px margin on each side
+export const BAND_SIZE = 52
+// how much the video may shrink to make room for a band
+export const MAX_VIDEO_SHRINK = 0.1
+export const EDGE_MARGIN = 8
+
+export type ControlSide = 'left' | 'right'
+export type ControlMode = 'bottom' | ControlSide | 'overlay'
+
+export interface ControlLayout {
+  mode: ControlMode
+  // reserved band thickness in px, including the safe-area inset; 0 for overlay
+  band: number
+}
+
+export interface ControlPosition {
+  side: ControlSide
+  // 0..1 along the bottom band
+  x: number
+  // 0..1 along a side strip or screen edge
+  y: number
+}
+
+export interface Insets {
+  bottom: number
+  left: number
+  right: number
+}
+
+export const DEFAULT_POSITION: ControlPosition = { side: 'left', x: 0, y: 0.5 }
+
+// videoWidth/videoHeight: the size the video gets in the whole area, before any band is reserved
+export function controlLayout(
+  areaWidth: number,
+  areaHeight: number,
+  videoWidth: number,
+  videoHeight: number,
+  insets: Insets,
+  side: ControlSide,
+): ControlLayout {
+  const bottom = BAND_SIZE + insets.bottom
+  const strip = BAND_SIZE + insets[side]
+
+  if (areaHeight - videoHeight >= bottom) return { mode: 'bottom', band: bottom }
+  if (areaWidth - videoWidth >= strip) return { mode: side, band: strip }
+
+  // scale the video would need to fit next to each band
+  const fit = (width: number, height: number) => Math.min(1, width / videoWidth, height / videoHeight)
+  const bottomScale = fit(areaWidth, areaHeight - bottom)
+  const stripScale = fit(areaWidth - strip, areaHeight)
+  const best = Math.max(bottomScale, stripScale)
+  if (best < 1 - MAX_VIDEO_SHRINK) return { mode: 'overlay', band: 0 }
+  return bottomScale >= stripScale ? { mode: 'bottom', band: bottom } : { mode: side, band: strip }
+}
+
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface SafeArea extends Insets {
+  top: number
+}
+
+export interface ControlFrame {
+  area: Size
+  control: Size
+  safe: SafeArea
+  // height of the soft keyboard covering the bottom of the area
+  keyboardInset: number
+}
+
+// gap between the control and the edge it is docked to
+const DOCK_GAP = { band: 4, overlay: 6 }
+
+interface Track {
+  start: number
+  length: number
+}
+
+// the range the control's leading edge can move along
+function track(mode: ControlMode, frame: ControlFrame): Track {
+  const { area, control, safe, keyboardInset } = frame
+  if (mode === 'bottom') {
+    const start = safe.left + EDGE_MARGIN
+    return { start, length: Math.max(0, area.width - safe.right - EDGE_MARGIN - control.width - start) }
+  }
+  const start = safe.top + EDGE_MARGIN
+  const end = area.height - keyboardInset - safe.bottom - EDGE_MARGIN - control.height
+  return { start, length: Math.max(0, end - start) }
+}
+
+// top-left corner of the control in area coordinates
+export function placeControl(mode: ControlMode, position: ControlPosition, frame: ControlFrame) {
+  const { area, control, safe, keyboardInset } = frame
+  const t = track(mode, frame)
+  if (mode === 'bottom') {
+    return {
+      x: t.start + position.x * t.length,
+      y: area.height - keyboardInset - safe.bottom - DOCK_GAP.band - control.height,
+    }
+  }
+  const side = mode === 'overlay' ? position.side : mode
+  const gap = mode === 'overlay' ? DOCK_GAP.overlay : DOCK_GAP.band
+  return {
+    x: side === 'left' ? safe.left + gap : area.width - safe.right - gap - control.width,
+    y: t.start + position.y * t.length,
+  }
+}
+
+function fraction(offset: number, t: Track) {
+  return t.length > 0 ? Math.min(1, Math.max(0, (offset - t.start) / t.length)) : 0.5
+}
+
+// Where a control dropped with its top-left corner at (x, y) ends up. Overlay
+// and side strips snap to the nearest side; the bottom band only moves along
+// its length.
+export function dropControl(
+  mode: ControlMode,
+  position: ControlPosition,
+  x: number,
+  y: number,
+  frame: ControlFrame,
+): ControlPosition {
+  const t = track(mode, frame)
+  if (mode === 'bottom') return { ...position, x: fraction(x, t) }
+  const center = x + frame.control.width / 2
+  return { ...position, side: center < frame.area.width / 2 ? 'left' : 'right', y: fraction(y, t) }
+}
+
+export function encodePosition(position: ControlPosition) {
+  return `${position.side}:${Math.round(position.x * 1000)}:${Math.round(position.y * 1000)}`
+}
+
+export function decodePosition(value: string): ControlPosition {
+  const [side, x, y] = value.split(':')
+  const unit = (v: string, def: number) => {
+    const n = parseInt(v, 10) / 1000
+    return isNaN(n) ? def : Math.min(1, Math.max(0, n))
+  }
+  return {
+    side: side === 'right' ? 'right' : 'left',
+    x: unit(x, DEFAULT_POSITION.x),
+    y: unit(y, DEFAULT_POSITION.y),
+  }
+}
diff --git a/images/chromium-headful/client/src/utils/touch-gestures.ts b/images/chromium-headful/client/src/utils/touch-gestures.ts
new file mode 100644
index 000000000..fa73f157e
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/touch-gestures.ts
@@ -0,0 +1,240 @@
+// Turns raw touch events on the live view overlay into semantic gestures:
+// tap, long-press (release = right click, move = drag), one-finger scroll with
+// momentum, and two-finger pinch/pan. Coordinates are client (CSS) pixels.
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface GestureHandlers {
+  // First finger down; called before any other handler for the sequence.
+  // Returns whether the touch belongs to the page. If not, only a pinch is
+  // recognized until every finger lifts.
+  onTouchBegin(p: Point): boolean
+  // called synchronously from touchend, so it runs inside the user gesture
+  onTap(p: Point): void
+  onLongPress(p: Point): void
+  onLongPressRelease(p: Point): void
+  onDragStart(p: Point): void
+  onDragMove(p: Point): void
+  onDragEnd(p: Point): void
+  // finger delta since the previous call; positive means the finger moved right/down
+  onScroll(dx: number, dy: number, anchor: Point): void
+  onPinchStart(mid: Point, distance: number): void
+  onPinchMove(mid: Point, distance: number): void
+  onPinchEnd(): void
+}
+
+const TAP_SLOP = 10
+const LONG_PRESS_MS = 500
+const VELOCITY_WINDOW_MS = 100
+// a finger that rested this long before lifting does not fling
+const FLING_REST_MS = 60
+// per-millisecond velocity decay, close to iOS UIScrollView's "normal" rate
+const FLING_DECAY = 0.9975
+const FLING_MIN_START = 0.15
+const FLING_MIN_STOP = 0.02
+
+// passive: the touch does not belong to the page, so only a pinch is recognized
+type Mode = 'idle' | 'pending' | 'passive' | 'scroll' | 'held' | 'drag' | 'pinch'
+
+interface Sample extends Point {
+  t: number
+}
+
+function point(t: Touch): Point {
+  return { x: t.clientX, y: t.clientY }
+}
+
+function distance(a: Point, b: Point) {
+  return Math.hypot(a.x - b.x, a.y - b.y)
+}
+
+function midpoint(a: Point, b: Point): Point {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+}
+
+export class TouchGestures {
+  private mode: Mode = 'idle'
+  private start: Point = { x: 0, y: 0 }
+  private last: Point = { x: 0, y: 0 }
+  private samples: Sample[] = []
+  private longPressTimer?: ReturnType<typeof setTimeout>
+  private flingFrame?: number
+  private interruptedFling = false
+
+  constructor(private handlers: GestureHandlers) {}
+
+  get flinging() {
+    return this.flingFrame !== undefined
+  }
+
+  touchStart(e: TouchEvent) {
+    if (e.touches.length === 1 && this.mode === 'idle') {
+      this.interruptedFling = this.stopFling()
+      const p = point(e.touches[0])
+      this.start = p
+      this.last = p
+      this.samples = [{ ...p, t: e.timeStamp }]
+      this.mode = 'pending'
+      if (!this.handlers.onTouchBegin(p)) {
+        this.mode = 'passive'
+        return
+      }
+      this.longPressTimer = setTimeout(() => {
+        this.longPressTimer = undefined
+        if (this.mode === 'pending') {
+          this.mode = 'held'
+          this.handlers.onLongPress(this.start)
+        }
+      }, LONG_PRESS_MS)
+      return
+    }
+
+    if (e.touches.length >= 2 && this.mode !== 'pinch') {
+      this.clearLongPress()
+      this.stopFling()
+      if (this.mode === 'drag') this.handlers.onDragEnd(this.last)
+      this.mode = 'pinch'
+      const a = point(e.touches[0])
+      const b = point(e.touches[1])
+      this.handlers.onPinchStart(midpoint(a, b), distance(a, b))
+    }
+  }
+
+  touchMove(e: TouchEvent) {
+    if (this.mode === 'pinch') {
+      if (e.touches.length >= 2) {
+        const a = point(e.touches[0])
+        const b = point(e.touches[1])
+        this.handlers.onPinchMove(midpoint(a, b), distance(a, b))
+      }
+      return
+    }
+
+    if (e.touches.length !== 1 || this.mode === 'passive') return
+    const p = point(e.touches[0])
+
+    switch (this.mode) {
+      case 'pending':
+        if (distance(p, this.start) <= TAP_SLOP) return
+        this.clearLongPress()
+        this.mode = 'scroll'
+        this.handlers.onScroll(p.x - this.last.x, p.y - this.last.y, this.start)
+        break
+      case 'scroll':
+        this.handlers.onScroll(p.x - this.last.x, p.y - this.last.y, this.start)
+        break
+      case 'held':
+        if (distance(p, this.start) <= TAP_SLOP) return
+        this.mode = 'drag'
+        this.handlers.onDragStart(this.start)
+        this.handlers.onDragMove(p)
+        break
+      case 'drag':
+        this.handlers.onDragMove(p)
+        break
+    }
+
+    this.last = p
+    this.samples.push({ ...p, t: e.timeStamp })
+    while (this.samples.length > 2 && e.timeStamp - this.samples[0].t > VELOCITY_WINDOW_MS) {
+      this.samples.shift()
+    }
+  }
+
+  touchEnd(e: TouchEvent) {
+    // wait for every finger to lift; a leftover finger after a pinch must not scroll
+    if (e.touches.length > 0) return
+    this.clearLongPress()
+
+    const mode = this.mode
+    this.mode = 'idle'
+
+    switch (mode) {
+      case 'pending':
+        if (!this.interruptedFling) this.handlers.onTap(this.last)
+        break
+      case 'held':
+        this.handlers.onLongPressRelease(this.last)
+        break
+      case 'drag':
+        this.handlers.onDragEnd(this.last)
+        break
+      case 'scroll':
+        this.startFling(e.timeStamp)
+        break
+      case 'pinch':
+        this.handlers.onPinchEnd()
+        break
+    }
+  }
+
+  touchCancel() {
+    this.clearLongPress()
+    if (this.mode === 'drag') this.handlers.onDragEnd(this.last)
+    if (this.mode === 'pinch') this.handlers.onPinchEnd()
+    this.mode = 'idle'
+  }
+
+  // Ends the page's part of the current gesture, including a fling. A drag
+  // still releases its button; nothing else is delivered. A pinch carries on.
+  cancel() {
+    this.clearLongPress()
+    this.stopFling()
+    if (this.mode === 'drag') this.handlers.onDragEnd(this.last)
+    if (this.mode !== 'idle' && this.mode !== 'pinch') this.mode = 'passive'
+  }
+
+  // returns true if a fling was running
+  stopFling() {
+    if (this.flingFrame === undefined) return false
+    cancelAnimationFrame(this.flingFrame)
+    this.flingFrame = undefined
+    return true
+  }
+
+  destroy() {
+    this.clearLongPress()
+    this.stopFling()
+  }
+
+  private clearLongPress() {
+    if (this.longPressTimer !== undefined) {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = undefined
+    }
+  }
+
+  private startFling(endTime: number) {
+    const first = this.samples[0]
+    const last = this.samples[this.samples.length - 1]
+    if (!first || !last || endTime - last.t > FLING_REST_MS) return
+    const dt = last.t - first.t
+    if (dt <= 0) return
+
+    let vx = (last.x - first.x) / dt
+    let vy = (last.y - first.y) / dt
+    if (Math.hypot(vx, vy) < FLING_MIN_START) return
+
+    const anchor = this.start
+    let prev = performance.now()
+    const step = (now: number) => {
+      const elapsed = Math.min(now - prev, 50)
+      prev = now
+      const decay = Math.pow(FLING_DECAY, elapsed)
+      vx *= decay
+      vy *= decay
+      this.handlers.onScroll(vx * elapsed, vy * elapsed, anchor)
+      // the handler may have stopped the fling
+      if (this.flingFrame === undefined) return
+      if (Math.hypot(vx, vy) < FLING_MIN_STOP) {
+        this.flingFrame = undefined
+        return
+      }
+      this.flingFrame = requestAnimationFrame(step)
+    }
+    this.flingFrame = requestAnimationFrame(step)
+  }
+}
diff --git a/images/chromium-headful/client/src/utils/zoom-pan.ts b/images/chromium-headful/client/src/utils/zoom-pan.ts
new file mode 100644
index 000000000..2e63bb053
--- /dev/null
+++ b/images/chromium-headful/client/src/utils/zoom-pan.ts
@@ -0,0 +1,67 @@
+// Local zoom and pan of the live view video. The remote screen is unchanged;
+// this only scales what the viewer sees so a large stream is usable on a phone.
+
+import { Point } from './touch-gestures'
+
+export interface Box {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+export class ZoomPan {
+  scale = 1
+  tx = 0
+  ty = 0
+
+  private startScale = 1
+  private startDistance = 1
+  private anchor: Point = { x: 0, y: 0 }
+
+  // element: the video box before the transform. viewport: the visible area the
+  // zoomed video may fill, which includes any letterbox bars around it.
+  constructor(private element: () => Box, private viewport: () => Box, private maxScale: () => number) {}
+
+  get zoomed() {
+    return this.scale > 1.01
+  }
+
+  pinchStart(mid: Point, distance: number) {
+    const e = this.element()
+    this.startScale = this.scale
+    this.startDistance = Math.max(distance, 1)
+    // content point (in unscaled element px) under the fingers
+    this.anchor = {
+      x: (mid.x - e.left - this.tx) / this.scale,
+      y: (mid.y - e.top - this.ty) / this.scale,
+    }
+  }
+
+  pinchMove(mid: Point, distance: number) {
+    const e = this.element()
+    const scale = Math.min(this.maxScale(), Math.max(1, (this.startScale * distance) / this.startDistance))
+    this.scale = scale
+    this.tx = clampAxis(mid.x - e.left - this.anchor.x * scale, e.left, e.width * scale, this.viewport(), 'x')
+    this.ty = clampAxis(mid.y - e.top - this.anchor.y * scale, e.top, e.height * scale, this.viewport(), 'y')
+  }
+
+  reset() {
+    this.scale = 1
+    this.tx = 0
+    this.ty = 0
+  }
+
+  get transform() {
+    if (!this.zoomed) return ''
+    return `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})`
+  }
+}
+
+// Content larger than the viewport must cover it; smaller content stays centered.
+function clampAxis(offset: number, origin: number, size: number, viewport: Box, axis: 'x' | 'y') {
+  const start = axis === 'x' ? viewport.left : viewport.top
+  const length = axis === 'x' ? viewport.width : viewport.height
+  if (size <= length) return start + (length - size) / 2 - origin
+  return Math.min(start - origin, Math.max(start + length - size - origin, offset))
+}
diff --git a/images/chromium-headful/client/tests/keyboard-pan.test.ts b/images/chromium-headful/client/tests/keyboard-pan.test.ts
new file mode 100644
index 000000000..83cbea23e
--- /dev/null
+++ b/images/chromium-headful/client/tests/keyboard-pan.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'bun:test'
+import { ANCHOR_GAP, keyboardPan, keyboardShrink } from '../src/utils/keyboard-pan'
+
+// a 390x664 player at the top of the screen; the keyboard leaves the top 380px
+const view = { top: 0, height: 664, anchor: null, current: 0, visibleTop: 0, visibleBottom: 380 }
+
+describe('keyboard shrink', () => {
+  test('a shorter frame while the keyboard is open is the keyboard', () => {
+    expect(keyboardShrink(true, { width: 390, height: 664 }, { width: 390, height: 380 })).toBe(true)
+  })
+
+  test('a closed keyboard, a new width or a taller frame is a new layout', () => {
+    expect(keyboardShrink(false, { width: 390, height: 664 }, { width: 390, height: 380 })).toBe(false)
+    expect(keyboardShrink(true, { width: 390, height: 664 }, { width: 664, height: 300 })).toBe(false)
+    expect(keyboardShrink(true, { width: 390, height: 380 }, { width: 390, height: 664 })).toBe(false)
+  })
+})
+
+describe('keyboard pan', () => {
+  test('moves a tap under the keyboard up to sit above it', () => {
+    const pan = keyboardPan({ ...view, anchor: 500 })
+    expect(pan).toBe(500 + ANCHOR_GAP - 380)
+    expect(500 - pan + ANCHOR_GAP).toBe(380)
+  })
+
+  test('leaves a tap that is already above the keyboard where it is', () => {
+    expect(keyboardPan({ ...view, anchor: 120 })).toBe(0)
+  })
+
+  test('keeps the current pan while the tap stays visible', () => {
+    expect(keyboardPan({ ...view, anchor: 400, current: 200 })).toBe(200)
+  })
+
+  test('lowers the pan when a later tap would go off the top', () => {
+    // the player is already moved up 250px; a tap 100px from its top is above the screen
+    expect(keyboardPan({ ...view, anchor: 100, current: 250 })).toBe(100 - 16)
+  })
+
+  test('never moves the video further than the part the keyboard covers', () => {
+    expect(keyboardPan({ ...view, anchor: 650 })).toBe(664 - 380)
+  })
+
+  test('keeps the pan within the covered part without a tap, and drops it once nothing is covered', () => {
+    expect(keyboardPan({ ...view, current: 100 })).toBe(100)
+    expect(keyboardPan({ ...view, current: 100, visibleBottom: 664 })).toBe(0)
+  })
+})
diff --git a/images/chromium-headful/client/tests/tap-keyboard.test.ts b/images/chromium-headful/client/tests/tap-keyboard.test.ts
new file mode 100644
index 000000000..d9f520c73
--- /dev/null
+++ b/images/chromium-headful/client/tests/tap-keyboard.test.ts
@@ -0,0 +1,426 @@
+import { describe, expect, test } from 'bun:test'
+import { TapKeyboard, TapKeyboardMode } from '../src/utils/tap-keyboard'
+import { focusNeedsGesture } from '../src/utils/text-input'
+
+// A 1920x1080 stream shown 390px wide, as on a phone in portrait: about 4.9
+// remote px per CSS px. Taps are given in CSS px.
+const SCALE = 1920 / 390
+
+function setup(mode: TapKeyboardMode, ios = true) {
+  let clock = 0
+  let timers: { fn: () => void; at: number; id: number }[] = []
+  let nextTimer = 1
+  const events: string[] = []
+  // the overlay: unfocused, focused with inputmode="none", or focused with the keyboard up
+  let overlay: 'blurred' | 'held' | 'open' = 'blurred'
+  let holdTakes = true
+
+  const keyboard: TapKeyboard = new TapKeyboard(
+    mode,
+    ios,
+    {
+      keyboardOpen: () => overlay === 'open',
+      focus: () => {
+        events.push(overlay === 'held' ? 'raise-held' : 'focus')
+        overlay = 'open'
+      },
+      hold: () => {
+        events.push('hold')
+        if (!holdTakes) return false
+        expect(keyboard.holding).toBe(true)
+        overlay = 'held'
+        return true
+      },
+      release: () => {
+        if (overlay === 'blurred') return
+        events.push('release')
+        overlay = 'blurred'
+        keyboard.blur()
+      },
+    },
+    {
+      now: () => clock,
+      setTimeout: (fn, ms) => {
+        timers.push({ fn, at: clock + ms, id: nextTimer })
+        return nextTimer++
+      },
+      clearTimeout: (id) => {
+        timers = timers.filter((t) => t.id !== id)
+      },
+    },
+  )
+
+  const advance = (ms: number) => {
+    const until = clock + ms
+    for (;;) {
+      const due = timers.filter((t) => t.at <= until).sort((a, b) => a.at - b.at)[0]
+      if (!due) break
+      timers = timers.filter((t) => t !== due)
+      clock = due.at
+      due.fn()
+    }
+    clock = until
+  }
+
+  // the finger lifts 80ms after touching down
+  const tap = (p: { x: number; y: number }) => {
+    keyboard.touchBegin()
+    advance(80)
+    keyboard.tap({ x: Math.round(p.x * SCALE), y: Math.round(p.y * SCALE) }, SCALE)
+  }
+  // the user or the OS dismisses the keyboard
+  const dismiss = () => {
+    overlay = 'blurred'
+    keyboard.blur()
+  }
+
+  return {
+    keyboard,
+    tap,
+    advance,
+    dismiss,
+    events,
+    overlay: () => overlay,
+    failHold: () => (holdTakes = false),
+  }
+}
+
+const field = { x: 100, y: 50 }
+const blank = { x: 200, y: 180 }
+
+describe('tap keyboard on iOS', () => {
+  test('a text cursor after the finger lifts raises the keyboard through the focus held since the tap', () => {
+    const t = setup('auto')
+    t.tap(field)
+    expect(t.events).toEqual(['hold'])
+    expect(t.keyboard.holding).toBe(true)
+
+    t.advance(150)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold', 'raise-held'])
+    expect(t.overlay()).toBe('open')
+    expect(t.keyboard.holding).toBe(false)
+  })
+
+  test('a text cursor during the touch raises the keyboard inside the tap', () => {
+    const t = setup('auto')
+    t.keyboard.touchBegin()
+    t.advance(40)
+    t.keyboard.cursor('text')
+    t.advance(40)
+    t.keyboard.tap(field, SCALE)
+    expect(t.events).toEqual(['focus'])
+  })
+
+  test('a text cursor flashed after another cursor still counts', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(100)
+    t.keyboard.cursor('other')
+    t.advance(300)
+    t.keyboard.cursor('text')
+    expect(t.overlay()).toBe('open')
+  })
+
+  test('a non-text tap releases the held focus without a keyboard', () => {
+    const t = setup('auto')
+    t.tap(blank)
+    t.advance(100)
+    t.keyboard.cursor('other')
+    t.advance(800)
+    expect(t.events).toEqual(['hold', 'release'])
+    expect(t.overlay()).toBe('blurred')
+  })
+
+  test('a text cursor after the window does nothing, leaving it to the keyboard button', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(900)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold', 'release'])
+  })
+
+  test('a text cursor long after the window does nothing', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(2500)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold', 'release'])
+  })
+
+  test('tapping a field under an unchanged text cursor raises the keyboard at the end of the window', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    t.dismiss()
+    t.events.length = 0
+
+    // 30 CSS px from the remembered spot, inside the same wide field
+    t.advance(2000)
+    t.tap({ x: field.x + 30, y: field.y })
+    expect(t.events).toEqual(['hold'])
+    t.advance(800)
+    expect(t.events).toEqual(['hold', 'raise-held'])
+  })
+
+  test('a tap near where a text cursor was seen raises the keyboard inside the tap', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    t.dismiss()
+    t.events.length = 0
+
+    t.advance(2000)
+    t.tap({ x: field.x + 8, y: field.y })
+    expect(t.events).toEqual(['focus'])
+  })
+
+  test('a tap near a remembered spot that turns out not to be text closes the keyboard and forgets the spot', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    t.dismiss()
+
+    t.advance(2000)
+    t.tap({ x: field.x, y: field.y + 8 })
+    expect(t.overlay()).toBe('open')
+    t.advance(100)
+    t.keyboard.cursor('other')
+    t.advance(800)
+    expect(t.overlay()).toBe('blurred')
+
+    t.events.length = 0
+    t.advance(2000)
+    t.tap({ x: field.x, y: field.y + 8 })
+    expect(t.events).toEqual(['hold'])
+  })
+
+  test('a non-text tap closes an open keyboard', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    t.events.length = 0
+
+    t.advance(1000)
+    t.tap(blank)
+    t.advance(100)
+    t.keyboard.cursor('other')
+    t.advance(800)
+    expect(t.events).toEqual(['release'])
+  })
+
+  test('a new touch before the cursor arrives drops the tap', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(50)
+    t.keyboard.touchBegin()
+    expect(t.events).toEqual(['hold', 'release'])
+    t.advance(100)
+    t.keyboard.cursor('text')
+    t.advance(2000)
+    expect(t.events).toEqual(['hold', 'release'])
+  })
+
+  test("the previous tap's I-beam arriving during the next tap does not raise the keyboard", () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(20)
+    // the next tap lands on a blank spot before the field's I-beam arrives
+    t.tap(blank)
+    t.advance(30)
+    t.keyboard.cursor('text')
+    expect(t.overlay()).not.toBe('open')
+    t.advance(50)
+    t.keyboard.cursor('other')
+    t.advance(800)
+    expect(t.events).toEqual(['hold', 'release', 'hold', 'release'])
+  })
+
+  test('an I-beam that may be stale and is never replaced raises nothing', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(20)
+    t.tap({ x: field.x, y: field.y + 40 })
+    t.advance(30)
+    t.keyboard.cursor('text')
+    t.advance(800)
+    expect(t.events).toEqual(['hold', 'release', 'hold', 'release'])
+  })
+
+  test('a field tap after a non-text tap raises the keyboard', () => {
+    const t = setup('auto')
+    t.tap(blank)
+    t.advance(100)
+    t.keyboard.cursor('other')
+    t.advance(800)
+    t.events.length = 0
+    t.advance(500)
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold', 'raise-held'])
+  })
+
+  test('a possibly stale I-beam does not affect a later tap under it', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(20)
+    t.tap({ x: field.x, y: field.y + 40 })
+    t.advance(30)
+    t.keyboard.cursor('text')
+    t.advance(800)
+    t.events.length = 0
+    // the I-beam is still showing and the next tap lands on the same field
+    t.advance(2000)
+    t.tap({ x: field.x + 60, y: field.y + 40 })
+    t.advance(800)
+    expect(t.events).toEqual(['hold', 'raise-held'])
+  })
+
+  test('a tap after the previous cursor settled is not affected', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    t.dismiss()
+    t.events.length = 0
+    t.advance(2000)
+    t.tap({ x: field.x + 100, y: field.y + 60 })
+    t.advance(100)
+    t.keyboard.cursor('other')
+    t.advance(100)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold', 'raise-held'])
+  })
+
+  test('a held focus lost to the OS raises nothing', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.dismiss()
+    t.advance(150)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold'])
+  })
+
+  test('raises nothing when the focus could not be held', () => {
+    const t = setup('auto')
+    t.failHold()
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold'])
+  })
+
+  test('cancel releases a held focus and ends the wait', () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.keyboard.cancel()
+    t.advance(150)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['hold', 'release'])
+  })
+})
+
+describe('keyboard after Enter', () => {
+  // the keyboard is open on a field under an I-beam
+  const typing = () => {
+    const t = setup('auto')
+    t.tap(field)
+    t.advance(150)
+    t.keyboard.cursor('text')
+    t.events.length = 0
+    return t
+  }
+
+  test('closes when the I-beam goes away after Enter', () => {
+    const t = typing()
+    t.keyboard.submit()
+    t.advance(300)
+    t.keyboard.cursor('other')
+    t.advance(700)
+    expect(t.events).toEqual(['release'])
+  })
+
+  test('stays open while the I-beam stays, as in a chat box', () => {
+    const t = typing()
+    t.keyboard.submit()
+    t.advance(1500)
+    expect(t.events).toEqual([])
+    expect(t.overlay()).toBe('open')
+  })
+
+  test('stays open when another cursor flashes and the I-beam comes back', () => {
+    const t = typing()
+    t.keyboard.submit()
+    t.advance(200)
+    t.keyboard.cursor('other')
+    t.advance(100)
+    t.keyboard.cursor('text')
+    t.advance(1000)
+    expect(t.events).toEqual([])
+  })
+
+  test('ignores a cursor change after the window and a touch during it', () => {
+    const late = typing()
+    late.keyboard.submit()
+    late.advance(1100)
+    late.keyboard.cursor('other')
+    late.advance(1000)
+    expect(late.events).toEqual([])
+
+    const touched = typing()
+    touched.keyboard.submit()
+    touched.advance(100)
+    touched.keyboard.touchBegin()
+    touched.keyboard.cursor('other')
+    touched.advance(1000)
+    expect(touched.events).toEqual([])
+  })
+
+  test('does nothing without an open keyboard on an I-beam', () => {
+    const t = setup('auto')
+    t.keyboard.cursor('other')
+    t.keyboard.submit()
+    t.advance(1000)
+    expect(t.events).toEqual([])
+  })
+})
+
+describe('tap keyboard elsewhere', () => {
+  test('focuses when the cursor arrives without holding focus during the tap', () => {
+    const t = setup('auto', false)
+    t.tap(field)
+    expect(t.events).toEqual([])
+    t.advance(150)
+    t.keyboard.cursor('text')
+    expect(t.events).toEqual(['focus'])
+  })
+
+  test('off mode does nothing and always mode focuses inside the tap', () => {
+    const off = setup('off')
+    off.tap(field)
+    off.advance(150)
+    off.keyboard.cursor('text')
+    expect(off.events).toEqual([])
+
+    const always = setup('always')
+    always.tap(blank)
+    expect(always.events).toEqual(['focus'])
+  })
+})
+
+describe('focusNeedsGesture', () => {
+  test('detects iOS and iPadOS', () => {
+    const iphone = 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15'
+    expect(focusNeedsGesture({ userAgent: iphone, platform: 'iPhone', maxTouchPoints: 5 })).toBe(true)
+    expect(focusNeedsGesture({ userAgent: 'Macintosh', platform: 'MacIntel', maxTouchPoints: 5 })).toBe(true)
+    expect(focusNeedsGesture({ userAgent: 'Macintosh', platform: 'MacIntel', maxTouchPoints: 0 })).toBe(false)
+    expect(focusNeedsGesture({ userAgent: 'Linux; Android 14', platform: 'Linux armv8l', maxTouchPoints: 5 })).toBe(
+      false,
+    )
+  })
+})
diff --git a/images/chromium-headful/client/tests/touch-controls.test.ts b/images/chromium-headful/client/tests/touch-controls.test.ts
new file mode 100644
index 000000000..70bc305e6
--- /dev/null
+++ b/images/chromium-headful/client/tests/touch-controls.test.ts
@@ -0,0 +1,190 @@
+import { describe, expect, test } from 'bun:test'
+import { readFileSync } from 'node:fs'
+import { runInNewContext } from 'node:vm'
+import ts from 'typescript'
+import { parseComponent } from 'vue-template-compiler'
+import {
+  BAND_SIZE,
+  ControlFrame,
+  DEFAULT_POSITION,
+  controlLayout,
+  decodePosition,
+  dropControl,
+  encodePosition,
+  placeControl,
+} from '../src/utils/touch-controls'
+
+const noInsets = { bottom: 0, left: 0, right: 0 }
+
+describe('control layout', () => {
+  test('uses the bottom band when the video leaves vertical room', () => {
+    // a 16:9 stream on a portrait phone
+    expect(controlLayout(390, 664, 390, 219, noInsets, 'left')).toEqual({ mode: 'bottom', band: BAND_SIZE })
+  })
+
+  test('uses a side strip on the preferred side when only horizontal room is left', () => {
+    // a portrait stream pillarboxed on a shorter screen
+    expect(controlLayout(390, 664, 307, 664, noInsets, 'right')).toEqual({ mode: 'right', band: BAND_SIZE })
+  })
+
+  test('includes the safe-area inset in the band', () => {
+    const insets = { bottom: 34, left: 0, right: 0 }
+    expect(controlLayout(390, 664, 390, 219, insets, 'left')).toEqual({ mode: 'bottom', band: BAND_SIZE + 34 })
+    // 52 + 34 does not fit in a 60px band, so the strip or shrinking decides instead
+    expect(controlLayout(390, 844, 390, 784, insets, 'left').mode).not.toBe('overlay')
+  })
+
+  test('shrinks the video slightly rather than overlaying it', () => {
+    // a stream that exactly fills its frame: shrinking by 52px is about 6%
+    expect(controlLayout(390, 844, 390, 844, noInsets, 'left')).toEqual({ mode: 'bottom', band: BAND_SIZE })
+  })
+
+  test('overlays the stream when making room would shrink it too much', () => {
+    expect(controlLayout(300, 200, 300, 200, noInsets, 'left')).toEqual({ mode: 'overlay', band: 0 })
+  })
+})
+
+const frame = (overrides: Partial<ControlFrame> = {}): ControlFrame => ({
+  area: { width: 390, height: 844 },
+  control: { width: 44, height: 44 },
+  safe: { top: 0, bottom: 0, left: 0, right: 0 },
+  keyboardInset: 0,
+  ...overrides,
+})
+
+describe('placing and dragging the control', () => {
+  test('a dropped control snaps to the nearest side edge and keeps its height', () => {
+    const dropped = dropControl('overlay', DEFAULT_POSITION, 330, 380, frame())
+    expect(dropped.side).toBe('right')
+    expect(placeControl('overlay', dropped, frame())).toEqual({ x: 390 - 6 - 44, y: 380 })
+    expect(dropControl('left', dropped, 20, -50, frame())).toEqual({ ...dropped, side: 'left', y: 0 })
+  })
+
+  test('drops a wide control where it was released, not where a 44px one would be', () => {
+    const wide = frame({ control: { width: 120, height: 44 } })
+    const dropped = dropControl('bottom', DEFAULT_POSITION, 150, 790, wide)
+    expect(placeControl('bottom', dropped, wide).x).toBeCloseTo(150)
+    // the bottom band only moves sideways
+    expect(placeControl('bottom', dropped, wide).y).toBe(844 - 4 - 44)
+  })
+
+  test('keeps the control out of the safe areas and above the soft keyboard', () => {
+    const notched = frame({ safe: { top: 47, bottom: 34, left: 0, right: 0 }, keyboardInset: 300 })
+    const top = placeControl('overlay', { ...DEFAULT_POSITION, y: 0 }, notched)
+    const bottom = placeControl('overlay', { ...DEFAULT_POSITION, y: 1 }, notched)
+    expect(top.y).toBe(47 + 8)
+    expect(bottom.y + 44).toBe(844 - 300 - 34 - 8)
+    expect(placeControl('bottom', DEFAULT_POSITION, notched).y).toBe(844 - 300 - 34 - 4 - 44)
+  })
+
+  test('round-trips the stored position and falls back to the default', () => {
+    const position = { side: 'right' as const, x: 0.25, y: 0.75 }
+    expect(decodePosition(encodePosition(position))).toEqual(position)
+    expect(decodePosition('')).toEqual(DEFAULT_POSITION)
+    expect(decodePosition('up:abc:2000')).toEqual({ side: 'left', x: DEFAULT_POSITION.x, y: 1 })
+  })
+})
+
+describe('keyboard control', () => {
+  // the real component methods, without mounting it
+  const script = parseComponent(readFileSync(new URL('../src/components/touch-controls.vue', import.meta.url), 'utf8'))
+    .script!.content
+  const compiled = ts.transpileModule(script, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020, experimentalDecorators: true },
+  }).outputText
+  const exports: { default?: { prototype: Record<string, Function> } } = {}
+  const noDecorator = () => () => undefined
+  runInNewContext(compiled, {
+    exports,
+    require: (name: string) =>
+      name === 'vue-property-decorator'
+        ? {
+            Vue: class {},
+            Component: () => (type: unknown) => type,
+            Ref: noDecorator,
+            Watch: noDecorator,
+            Prop: noDecorator,
+          }
+        : {},
+  })
+  const methods = exports.default!.prototype
+
+  const control = (mode: string) => {
+    const emitted: string[] = []
+    const ctx: Record<string, any> = {
+      mode,
+      faded: true,
+      dragPoint: null,
+      corner: { x: 0, y: 0 },
+      localPoint: () => ({ x: 20, y: 20 }),
+      wake: () => (ctx.faded = false),
+      $emit: (name: string) => emitted.push(name),
+    }
+    ctx.run = (action: string) => methods.run.call(ctx, action)
+    // role: the button the finger lands on
+    const tap = (role = 'keyboard-toggle') => {
+      const button = { getAttribute: () => role }
+      methods.onTouchStart.call(ctx, { changedTouches: [{}], target: { closest: () => button } })
+      methods.onTouchEnd.call(ctx)
+    }
+    return { ctx, emitted, tap }
+  }
+
+  test('the first tap on a faded control over the stream only wakes it', () => {
+    const { ctx, emitted, tap } = control('overlay')
+    tap()
+    expect(ctx.faded).toBe(false)
+    expect(emitted).toEqual([])
+    tap()
+    expect(emitted).toEqual(['toggle'])
+  })
+
+  test('a faded control in a band toggles on the first tap', () => {
+    const { emitted, tap } = control('bottom')
+    tap()
+    expect(emitted).toEqual(['toggle'])
+  })
+
+  test('a tap on the copy button copies', () => {
+    const { emitted, tap } = control('left')
+    tap('copy')
+    expect(emitted).toEqual(['copy'])
+  })
+
+  test('the first touch on a faded copy button over the stream also only wakes it', () => {
+    const overlay = control('overlay')
+    overlay.tap('copy')
+    expect(overlay.emitted).toEqual([])
+    overlay.tap('copy')
+    expect(overlay.emitted).toEqual(['copy'])
+  })
+})
+
+describe('extra keys row', () => {
+  const script = parseComponent(readFileSync(new URL('../src/components/touch-keys.vue', import.meta.url), 'utf8'))
+    .script!.content
+  const compiled = ts.transpileModule(script, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020, experimentalDecorators: true },
+  }).outputText
+  const exports: Record<string, any> = {}
+  const noDecorator = () => () => undefined
+  runInNewContext(compiled, {
+    exports,
+    require: () => ({ Vue: class {}, Component: () => (type: unknown) => type, Prop: noDecorator }),
+  })
+
+  test('has Esc, Tab, Ctrl, the arrows and Paste last, and reports what was pressed', () => {
+    const keys: { label: string }[] = exports.TOUCH_KEYS
+    expect(keys.map((k) => k.label)).toEqual(['Esc', 'Tab', 'Ctrl', 'Left', 'Up', 'Down', 'Right', 'Paste'])
+
+    const emitted: unknown[][] = []
+    const ctx = { ctrlLatched: false, $emit: (...args: unknown[]) => emitted.push(args) }
+    for (const label of ['Esc', 'Ctrl', 'Paste']) {
+      exports.default.prototype.press.call(
+        ctx,
+        keys.find((k) => k.label === label),
+      )
+    }
+    expect(emitted).toEqual([['key', 0xff1b], ['ctrl', true], ['paste']])
+  })
+})
diff --git a/images/chromium-headful/client/tests/touch-input.test.ts b/images/chromium-headful/client/tests/touch-input.test.ts
new file mode 100644
index 000000000..1d404509d
--- /dev/null
+++ b/images/chromium-headful/client/tests/touch-input.test.ts
@@ -0,0 +1,683 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  charToKeysym,
+  keysymNeedsShift,
+  needsShift,
+  textDiff,
+  TextInput,
+  XK_BACKSPACE,
+  XK_CAPS_LOCK,
+  XK_CONTROL_L,
+  XK_RETURN,
+  XK_SHIFT_L,
+  XK_SHIFT_R,
+} from '../src/utils/text-input'
+import createKeyboard from '../src/utils/guacamole-keyboard'
+import { ZoomPan } from '../src/utils/zoom-pan'
+import { GestureHandlers, Point, TouchGestures } from '../src/utils/touch-gestures'
+
+describe('text input', () => {
+  test('maps characters to keysyms', () => {
+    expect(charToKeysym('a')).toBe(0x61)
+    expect(charToKeysym('é')).toBe(0xe9)
+    expect(charToKeysym('€')).toBe(0x010020ac)
+    expect(charToKeysym('\n')).toBe(XK_RETURN)
+  })
+
+  test('detects letters that need shift', () => {
+    expect(needsShift('A')).toBe(true)
+    expect(needsShift('a')).toBe(false)
+    expect(needsShift('!')).toBe(false)
+    expect(keysymNeedsShift(0x41)).toBe(true)
+    expect(keysymNeedsShift(0x61)).toBe(false)
+    expect(keysymNeedsShift(0xc9)).toBe(true)
+    expect(keysymNeedsShift(0x01000416)).toBe(true)
+  })
+
+  test('diffs composition updates', () => {
+    expect(textDiff('', 'te')).toEqual({ deletes: 0, insert: 'te' })
+    expect(textDiff('tez', 'tes')).toEqual({ deletes: 1, insert: 's' })
+    expect(textDiff('hello', 'help')).toEqual({ deletes: 2, insert: 'p' })
+  })
+})
+
+// The remote X server as far as typing goes: Shift held, Caps Lock toggled by
+// its key, and a letter's case from Shift xor Caps Lock (neko maps a keysym to
+// its key, so the keysym's own case does not matter).
+function remoteX() {
+  const keys: number[] = []
+  const shift = new Set<number>()
+  let capsLock = false
+  let text = ''
+  const sink = (event: 'keydown' | 'keyup', key: number) => {
+    keys.push(event === 'keydown' ? key : -key)
+    if (key === XK_SHIFT_L || key === XK_SHIFT_R) {
+      if (event === 'keydown') shift.add(key)
+      else shift.delete(key)
+      return
+    }
+    if (event === 'keyup') return
+    if (key === XK_CAPS_LOCK) capsLock = !capsLock
+    else if (key === XK_BACKSPACE) text = text.slice(0, -1)
+    else if (key === XK_RETURN) text += '\n'
+    else if (key < 0x100 || (key & 0xff000000) === 0x01000000) {
+      const ch = String.fromCodePoint(key & 0x00ffffff)
+      const cased = ch.toUpperCase() !== ch.toLowerCase()
+      text += !cased ? ch : shift.size > 0 !== capsLock ? ch.toUpperCase() : ch.toLowerCase()
+    }
+  }
+  return {
+    sink,
+    keys,
+    get text() {
+      return text
+    },
+    get capsLock() {
+      return capsLock
+    },
+  }
+}
+
+describe('soft keyboard text', () => {
+  const setup = (touch = true) => {
+    const remote = remoteX()
+    const input = new TextInput(remote.sink, () => touch)
+    return { input, remote }
+  }
+
+  test('text from a key event is not typed again by its input event', () => {
+    const { input, remote } = setup()
+    // the Guacamole keyboard on iOS releases a key right after pressing it
+    input.keyDown(0x61)
+    input.keyUp(0x61)
+    input.input('insertText', 'a')
+    input.keyEvent(true)
+    // a keyboard that reports keyCode 229 sends only the input event
+    input.input('insertText', 'b')
+    expect(remote.text).toBe('ab')
+  })
+
+  test('a key without text does not swallow the next input event', () => {
+    const { input, remote } = setup()
+    input.keyDown(0xff51)
+    input.keyUp(0xff51)
+    input.keyEvent(true)
+    input.input('insertText', 'x')
+    expect(remote.text).toBe('x')
+  })
+
+  test('a soft Shift does not swallow the next input event', () => {
+    const { input, remote } = setup()
+    input.keyDown(XK_SHIFT_L)
+    input.keyUp(XK_SHIFT_L)
+    input.input('insertReplacementText', 'Hi')
+    expect(remote.text).toBe('Hi')
+  })
+
+  test('types line breaks and backspace from input events', () => {
+    const { input, remote } = setup()
+    input.input('insertText', 'ab')
+    input.input('deleteContentBackward', null)
+    input.input('insertLineBreak', null)
+    expect(remote.text).toBe('a\n')
+  })
+
+  test('types composition updates as edits and ignores the echo after compositionend', () => {
+    const { input, remote } = setup()
+    input.compositionStart()
+    input.input('insertCompositionText', 'te')
+    input.input('insertCompositionText', 'tez')
+    input.input('insertCompositionText', 'te')
+    input.compositionEnd('tea', true)
+    input.input('insertText', 'tea')
+    expect(remote.text).toBe('tea')
+    expect(remote.keys.filter((k) => k === XK_BACKSPACE)).toHaveLength(1)
+    expect(input.composing).toBe(false)
+
+    // only the event right after compositionend is an echo
+    input.input('insertText', 'tea')
+    expect(remote.text).toBe('teatea')
+  })
+
+  test('a key event ends the window for a composition echo', () => {
+    const { input, remote } = setup()
+    input.compositionStart()
+    input.compositionEnd('a', true)
+    input.keyEvent(false)
+    input.input('insertText', 'a')
+    expect(remote.text).toBe('aa')
+  })
+
+  test('a latched Ctrl holds for the next key only, from any path', () => {
+    const { input, remote } = setup()
+    const latches: boolean[] = []
+    input.onCtrlLatch = (latched) => latches.push(latched)
+    input.latchCtrl(true)
+    input.input('insertText', 'c')
+    input.input('insertText', 'd')
+    expect(remote.keys).toEqual([XK_CONTROL_L, 0x63, -0x63, -XK_CONTROL_L, 0x64, -0x64])
+    expect(latches).toEqual([true, false])
+
+    remote.keys.length = 0
+    input.latchCtrl(true)
+    // a soft Shift from the Guacamole keyboard does not use up the latch
+    input.keyDown(XK_SHIFT_L)
+    input.keyUp(XK_SHIFT_L)
+    input.key(0xff09)
+    expect(remote.keys).toEqual([XK_SHIFT_L, -XK_SHIFT_L, XK_CONTROL_L, 0xff09, -0xff09, -XK_CONTROL_L])
+  })
+
+  test('an unlatched Ctrl sends nothing', () => {
+    const { input, remote } = setup()
+    input.latchCtrl(true)
+    input.latchCtrl(false)
+    input.key(0xff1b)
+    expect(remote.keys).toEqual([0xff1b, -0xff1b])
+  })
+
+  test('types pasted text without its trailing line break', () => {
+    const { input, remote } = setup()
+    input.paste('Pass Word\n2\n')
+    expect(remote.text).toBe('Pass Word\n2')
+    expect(remote.keys.slice(0, 2)).toEqual([XK_SHIFT_L, 0x50])
+  })
+
+  test('drops composed text while input is disabled', () => {
+    const { input, remote } = setup()
+    input.compositionStart()
+    input.compositionEnd('hi', false)
+    expect(remote.keys).toEqual([])
+  })
+
+  test('sends Shift around capitals', () => {
+    const { input, remote } = setup()
+    input.keyDown(0x41)
+    input.keyUp(0x41)
+    input.keyEvent(true)
+    input.input('insertText', 'Bc')
+    expect(remote.text).toBe('ABc')
+    expect(remote.keys.slice(0, 4)).toEqual([XK_SHIFT_L, 0x41, -0x41, -XK_SHIFT_L])
+  })
+
+  test('never sends Caps Lock from a touch device', () => {
+    const { input, remote } = setup()
+    input.keyDown(XK_CAPS_LOCK)
+    input.keyUp(XK_CAPS_LOCK)
+    input.input('insertText', 'Hi')
+    expect(remote.text).toBe('Hi')
+    expect(remote.keys.some((k) => Math.abs(k) === XK_CAPS_LOCK)).toBe(false)
+  })
+
+  test('a Shift held on the remote types capitals without another Shift', () => {
+    const { input, remote } = setup()
+    input.keyDown(XK_SHIFT_L)
+    input.keyDown(0x41)
+    input.keyUp(0x41)
+    input.keyUp(XK_SHIFT_L)
+    expect(remote.text).toBe('A')
+    expect(remote.keys.filter((k) => k === XK_SHIFT_L)).toHaveLength(1)
+  })
+
+  test('sends desktop keys as they are, Caps Lock included', () => {
+    const { input, remote } = setup(false)
+    input.keyDown(XK_CAPS_LOCK)
+    input.keyUp(XK_CAPS_LOCK)
+    input.keyDown(0x41, 0x41)
+    input.keyUp(0x41, 0x41)
+    expect(remote.keys).toEqual([XK_CAPS_LOCK, -XK_CAPS_LOCK, 0x41, -0x41])
+  })
+})
+
+// The events iOS Safari sends for its soft keyboard, replayed through the real
+// Guacamole keyboard wired to TextInput as the live view wires them. WebKit
+// reports the keyboard's Shift and Caps Lock state changes as synthetic key
+// events with no text (WKSyntheticFlagsChangedWebEvent), and the Guacamole
+// keyboard treats every keyup on iOS as unreliable. The modifier flags on the
+// letter events themselves are not documented, so every combination is tried.
+describe('iOS soft keyboard', () => {
+  const ios = () => {
+    const saved = Object.getOwnPropertyDescriptor(navigator, 'platform')!
+    Object.defineProperty(navigator, 'platform', { value: 'iPhone', configurable: true })
+    const remote = remoteX()
+    const input = new TextInput(remote.sink, () => true)
+    const listeners: Record<string, ((e: unknown) => void)[]> = {}
+    const target = {
+      addEventListener: (type: string, fn: (e: unknown) => void) => (listeners[type] ||= []).push(fn),
+    }
+    const keyboard = createKeyboard(target as unknown as Element)
+    Object.defineProperty(navigator, 'platform', saved)
+    keyboard.onkeydown = (key) => {
+      input.keyDown(key)
+      return false
+    }
+    keyboard.onkeyup = (key) => input.keyUp(key)
+
+    // capture listeners (the Guacamole keyboard) run before the live view's own at the target
+    const fire = (type: string, init: Record<string, unknown>, modifiers: { shift?: boolean; caps?: boolean } = {}) => {
+      const e = {
+        type,
+        shiftKey: !!modifiers.shift,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        location: 0,
+        repeat: false,
+        preventDefault() {},
+        getModifierState: (name: string) =>
+          name === 'CapsLock' ? !!modifiers.caps : name === 'Shift' && !!modifiers.shift,
+        ...init,
+      }
+      for (const fn of listeners[type] || []) fn(e)
+      if (type === 'keydown' || type === 'keyup') input.keyEvent(type === 'keyup')
+    }
+    const flags = (key: 'Shift' | 'CapsLock', down: boolean) =>
+      fire(
+        down ? 'keydown' : 'keyup',
+        { key, keyCode: key === 'Shift' ? 16 : 20 },
+        {
+          shift: key === 'Shift' && down,
+          caps: key === 'CapsLock' && down,
+        },
+      )
+    const letter = (ch: string, modifiers: { shift?: boolean; caps?: boolean } = {}) => {
+      const code = ch.toUpperCase().charCodeAt(0)
+      fire('keydown', { key: ch, keyCode: code }, modifiers)
+      fire('keypress', { key: ch, keyCode: ch.charCodeAt(0), charCode: ch.charCodeAt(0) }, modifiers)
+      input.input('insertText', ch)
+      fire('keyup', { key: ch, keyCode: code }, modifiers)
+    }
+    return { remote, flags, letter }
+  }
+
+  const combos = [
+    { shift: false, caps: false },
+    { shift: false, caps: true },
+    { shift: true, caps: false },
+    { shift: true, caps: true },
+  ]
+
+  for (const modifiers of combos) {
+    test(`a Shift tap capitalizes one letter (letter flags ${JSON.stringify(modifiers)})`, () => {
+      const { remote, flags, letter } = ios()
+      flags('Shift', true)
+      letter('H', modifiers)
+      flags('Shift', false)
+      for (const ch of 'ello') letter(ch)
+      expect(remote.text).toBe('Hello')
+      expect(remote.capsLock).toBe(false)
+    })
+
+    test(`soft Caps Lock types capitals and leaves the remote Caps Lock alone (letter flags ${JSON.stringify(
+      modifiers,
+    )})`, () => {
+      const { remote, flags, letter } = ios()
+      flags('CapsLock', true)
+      letter('A', modifiers)
+      letter('B', modifiers)
+      flags('CapsLock', false)
+      letter('c')
+      expect(remote.text).toBe('ABc')
+      expect(remote.capsLock).toBe(false)
+      expect(remote.keys.some((k) => Math.abs(k) === XK_CAPS_LOCK)).toBe(false)
+    })
+  }
+})
+
+describe('zoom and pan', () => {
+  const element = { left: 0, top: 200, width: 400, height: 225 }
+  const viewport = { left: 0, top: 0, width: 400, height: 625 }
+
+  test('keeps the content point under the fingers while scaling', () => {
+    const zoom = new ZoomPan(
+      () => element,
+      () => viewport,
+      () => 8,
+    )
+    zoom.pinchStart({ x: 200, y: 312 }, 100)
+    zoom.pinchMove({ x: 200, y: 312 }, 300)
+    expect(zoom.scale).toBe(3)
+    // content point (200, 112) in element px stays at client (200, 312)
+    expect(element.left + zoom.tx + 200 * zoom.scale).toBeCloseTo(200)
+    expect(element.top + zoom.ty + 112 * zoom.scale).toBeCloseTo(312)
+  })
+
+  test('clamps scale and keeps the viewport covered', () => {
+    const zoom = new ZoomPan(
+      () => element,
+      () => viewport,
+      () => 4,
+    )
+    zoom.pinchStart({ x: 10, y: 210 }, 100)
+    zoom.pinchMove({ x: 390, y: 600 }, 1000)
+    expect(zoom.scale).toBe(4)
+    expect(element.left + zoom.tx).toBeLessThanOrEqual(viewport.left)
+    expect(element.left + zoom.tx + element.width * 4).toBeGreaterThanOrEqual(viewport.left + viewport.width)
+    expect(element.top + zoom.ty).toBeLessThanOrEqual(viewport.top)
+    expect(element.top + zoom.ty + element.height * 4).toBeGreaterThanOrEqual(viewport.top + viewport.height)
+  })
+
+  test('never zooms out below the fitted size', () => {
+    const zoom = new ZoomPan(
+      () => element,
+      () => viewport,
+      () => 4,
+    )
+    zoom.pinchStart({ x: 200, y: 312 }, 300)
+    zoom.pinchMove({ x: 200, y: 312 }, 100)
+    expect(zoom.scale).toBe(1)
+    expect(zoom.transform).toBe('')
+  })
+})
+
+describe('touch gestures', () => {
+  const touches = (...points: Point[]) => points.map((p) => ({ clientX: p.x, clientY: p.y })) as unknown as TouchList
+  const event = (timeStamp: number, ...points: Point[]) =>
+    ({ timeStamp, touches: touches(...points) } as unknown as TouchEvent)
+
+  const recorder = (overrides: Partial<GestureHandlers> = {}) => {
+    const calls: string[] = []
+    const handlers = new Proxy(overrides as GestureHandlers, {
+      get: (target, name: string) =>
+        name in target
+          ? target[name as keyof GestureHandlers]
+          : (...args: unknown[]) => calls.push(`${name} ${JSON.stringify(args)}`),
+    })
+    return { calls, handlers }
+  }
+
+  test('a short touch without movement is a tap', () => {
+    const { calls, handlers } = recorder()
+    const g = new TouchGestures(handlers)
+    g.touchStart(event(0, { x: 10, y: 10 }))
+    g.touchMove(event(20, { x: 12, y: 11 }))
+    g.touchEnd(event(60))
+    g.destroy()
+    expect(calls.map((c) => c.split(' ')[0])).toEqual(['onTouchBegin', 'onTap'])
+  })
+
+  test('movement past the slop scrolls by the finger delta', () => {
+    const { calls, handlers } = recorder()
+    const g = new TouchGestures(handlers)
+    g.touchStart(event(0, { x: 100, y: 300 }))
+    g.touchMove(event(16, { x: 100, y: 280 }))
+    g.touchMove(event(32, { x: 100, y: 250 }))
+    g.touchEnd(event(200))
+    g.destroy()
+    const scrolls = calls.filter((c) => c.startsWith('onScroll'))
+    expect(scrolls.length).toBe(2)
+    expect(scrolls[0]).toContain('[0,-20,')
+    expect(scrolls[1]).toContain('[0,-30,')
+    expect(calls.some((c) => c.startsWith('onTap'))).toBe(false)
+  })
+
+  test('two fingers pinch and never scroll or tap', () => {
+    const { calls, handlers } = recorder()
+    const g = new TouchGestures(handlers)
+    g.touchStart(event(0, { x: 100, y: 300 }))
+    g.touchStart(event(10, { x: 100, y: 300 }, { x: 200, y: 300 }))
+    g.touchMove(event(26, { x: 80, y: 300 }, { x: 220, y: 300 }))
+    g.touchEnd(event(40, { x: 220, y: 300 }))
+    g.touchMove(event(56, { x: 260, y: 300 }))
+    g.touchEnd(event(70))
+    g.destroy()
+    const names = calls.map((c) => c.split(' ')[0])
+    expect(names).toEqual(['onTouchBegin', 'onPinchStart', 'onPinchMove', 'onPinchEnd'])
+  })
+
+  // fake timers and animation frames, swapped into the globals the recognizer uses
+  const fakeTime = () => {
+    let now = 0
+    let timers: { fn: () => void; at: number; id: number }[] = []
+    let frames = new Map<number, (t: number) => void>()
+    let nextId = 1
+    const saved = {
+      setTimeout: globalThis.setTimeout,
+      clearTimeout: globalThis.clearTimeout,
+      requestAnimationFrame: globalThis.requestAnimationFrame,
+      cancelAnimationFrame: globalThis.cancelAnimationFrame,
+      now: performance.now,
+    }
+    Object.assign(globalThis, {
+      setTimeout: (fn: () => void, ms: number) => {
+        timers.push({ fn, at: now + ms, id: nextId })
+        return nextId++
+      },
+      clearTimeout: (id: number) => {
+        timers = timers.filter((t) => t.id !== id)
+      },
+      requestAnimationFrame: (fn: (t: number) => void) => {
+        frames.set(nextId, fn)
+        return nextId++
+      },
+      cancelAnimationFrame: (id: number) => frames.delete(id),
+    })
+    performance.now = () => now
+    return {
+      advance(ms: number) {
+        now += ms
+        for (const t of timers.filter((t) => t.at <= now)) {
+          timers = timers.filter((x) => x !== t)
+          t.fn()
+        }
+      },
+      // runs pending animation frames 16ms apart, up to a limit
+      frames(limit: number) {
+        let ran = 0
+        while (frames.size > 0 && ran < limit) {
+          now += 16
+          const pending = frames
+          frames = new Map()
+          for (const fn of pending.values()) fn(now)
+          ran++
+        }
+        return ran
+      },
+      get pendingFrames() {
+        return frames.size
+      },
+      restore() {
+        Object.assign(globalThis, saved)
+        performance.now = saved.now
+      },
+    }
+  }
+
+  const fling = (g: TouchGestures) => {
+    g.touchStart(event(0, { x: 100, y: 400 }))
+    g.touchMove(event(16, { x: 100, y: 380 }))
+    g.touchMove(event(32, { x: 100, y: 340 }))
+    g.touchMove(event(48, { x: 100, y: 300 }))
+    g.touchEnd(event(50))
+  }
+
+  test('a fast swipe flings until the velocity decays', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder()
+      const g = new TouchGestures(handlers)
+      fling(g)
+      expect(g.flinging).toBe(true)
+      const before = calls.length
+      expect(time.frames(1000)).toBeLessThan(1000)
+      expect(calls.length).toBeGreaterThan(before + 10)
+      expect(g.flinging).toBe(false)
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('stopping the fling from the scroll handler ends it', () => {
+    const time = fakeTime()
+    try {
+      let scrolls = 0
+      const { handlers } = recorder({
+        onScroll: () => {
+          scrolls++
+          if (g.flinging) g.stopFling()
+        },
+      })
+      const g = new TouchGestures(handlers)
+      fling(g)
+      const swipe = scrolls
+      time.frames(100)
+      expect(scrolls).toBe(swipe + 1)
+      expect(time.pendingFrames).toBe(0)
+      expect(g.flinging).toBe(false)
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('cancel stops a fling and ends a scroll without further handlers', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder()
+      const g = new TouchGestures(handlers)
+      fling(g)
+      time.frames(2)
+      g.cancel()
+      expect(g.flinging).toBe(false)
+      expect(time.pendingFrames).toBe(0)
+
+      calls.length = 0
+      g.touchStart(event(1000, { x: 100, y: 400 }))
+      g.touchMove(event(1016, { x: 100, y: 380 }))
+      g.cancel()
+      g.touchMove(event(1032, { x: 100, y: 300 }))
+      g.touchEnd(event(1034))
+      time.frames(100)
+      expect(calls.map((c) => c.split(' ')[0])).toEqual(['onTouchBegin', 'onScroll'])
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('cancel releases a drag once and delivers nothing after it', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder()
+      const g = new TouchGestures(handlers)
+      g.touchStart(event(0, { x: 50, y: 60 }))
+      time.advance(500)
+      g.touchMove(event(520, { x: 80, y: 60 }))
+      g.cancel()
+      g.touchMove(event(540, { x: 120, y: 60 }))
+      g.touchEnd(event(600))
+      expect(calls.map((c) => c.split(' ')[0])).toEqual([
+        'onTouchBegin',
+        'onLongPress',
+        'onDragStart',
+        'onDragMove',
+        'onDragEnd',
+      ])
+      expect(calls[calls.length - 1]).toBe('onDragEnd [{"x":80,"y":60}]')
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('a cancelled touch can still pinch', () => {
+    const { calls, handlers } = recorder()
+    const g = new TouchGestures(handlers)
+    g.touchStart(event(0, { x: 100, y: 300 }))
+    g.cancel()
+    g.touchStart(event(10, { x: 100, y: 300 }, { x: 200, y: 300 }))
+    g.touchMove(event(26, { x: 80, y: 300 }, { x: 220, y: 300 }))
+    g.touchEnd(event(40))
+    expect(calls.map((c) => c.split(' ')[0])).toEqual(['onTouchBegin', 'onPinchStart', 'onPinchMove', 'onPinchEnd'])
+  })
+
+  test('a touch the page does not take only pinches', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder({ onTouchBegin: () => false })
+      const g = new TouchGestures(handlers)
+      g.touchStart(event(0, { x: 100, y: 300 }))
+      time.advance(600)
+      g.touchMove(event(620, { x: 100, y: 200 }))
+      g.touchEnd(event(640))
+      g.touchStart(event(1000, { x: 100, y: 300 }))
+      g.touchEnd(event(1050))
+      expect(calls).toEqual([])
+
+      g.touchStart(event(2000, { x: 100, y: 300 }))
+      g.touchStart(event(2010, { x: 100, y: 300 }, { x: 200, y: 300 }))
+      g.touchEnd(event(2040))
+      expect(calls.map((c) => c.split(' ')[0])).toEqual(['onPinchStart', 'onPinchEnd'])
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('a long press released in place is a right click', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder()
+      const g = new TouchGestures(handlers)
+      g.touchStart(event(0, { x: 50, y: 60 }))
+      time.advance(500)
+      g.touchMove(event(520, { x: 53, y: 62 }))
+      g.touchEnd(event(600))
+      expect(calls.map((c) => c.split(' ')[0])).toEqual(['onTouchBegin', 'onLongPress', 'onLongPressRelease'])
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('a long press then move drags', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder()
+      const g = new TouchGestures(handlers)
+      g.touchStart(event(0, { x: 50, y: 60 }))
+      time.advance(500)
+      g.touchMove(event(520, { x: 80, y: 60 }))
+      g.touchMove(event(540, { x: 120, y: 60 }))
+      g.touchEnd(event(600))
+      expect(calls).toEqual([
+        'onTouchBegin [{"x":50,"y":60}]',
+        'onLongPress [{"x":50,"y":60}]',
+        'onDragStart [{"x":50,"y":60}]',
+        'onDragMove [{"x":80,"y":60}]',
+        'onDragMove [{"x":120,"y":60}]',
+        'onDragEnd [{"x":120,"y":60}]',
+      ])
+    } finally {
+      time.restore()
+    }
+  })
+
+  test('touchcancel ends a drag or pinch and never taps', () => {
+    const time = fakeTime()
+    try {
+      const { calls, handlers } = recorder()
+      const g = new TouchGestures(handlers)
+      g.touchStart(event(0, { x: 50, y: 60 }))
+      g.touchCancel()
+      time.advance(600)
+      g.touchEnd(event(700))
+
+      g.touchStart(event(1000, { x: 50, y: 60 }))
+      time.advance(500)
+      g.touchMove(event(1520, { x: 90, y: 60 }))
+      g.touchCancel()
+
+      g.touchStart(event(2000, { x: 100, y: 300 }))
+      g.touchStart(event(2010, { x: 100, y: 300 }, { x: 200, y: 300 }))
+      g.touchCancel()
+      expect(calls.map((c) => c.split(' ')[0])).toEqual([
+        'onTouchBegin',
+        'onTouchBegin',
+        'onLongPress',
+        'onDragStart',
+        'onDragMove',
+        'onDragEnd',
+        'onTouchBegin',
+        'onPinchStart',
+        'onPinchEnd',
+      ])
+    } finally {
+      time.restore()
+    }
+  })
+})
diff --git a/images/chromium-headful/client/tests/video-input.test.ts b/images/chromium-headful/client/tests/video-input.test.ts
index 9faa3e5dc..65ad72114 100644
--- a/images/chromium-headful/client/tests/video-input.test.ts
+++ b/images/chromium-headful/client/tests/video-input.test.ts
@@ -3,6 +3,7 @@ import { readFileSync } from 'node:fs'
 import { runInNewContext } from 'node:vm'
 import ts from 'typescript'
 import { parseComponent } from 'vue-template-compiler'
+import * as keyboardPan from '../src/utils/keyboard-pan'
 
 // Load the real component methods without mounting its media player or child components.
 const script = parseComponent(readFileSync(new URL('../src/components/video.vue', import.meta.url), 'utf8')).script!
@@ -11,7 +12,11 @@ const compiled = ts.transpileModule(script, {
   compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020, experimentalDecorators: true },
 }).outputText
 
-function videoMethods(readText: () => Promise<string>, granted = async () => true) {
+function videoMethods(
+  readText: () => Promise<string>,
+  granted = async () => true,
+  globals: Record<string, unknown> = {},
+) {
   const exports: { default?: { prototype: Record<string, Function> } } = {}
   const noDecorator = () => () => undefined
   runInNewContext(compiled, {
@@ -27,11 +32,13 @@ function videoMethods(readText: () => Promise<string>, granted = async () => tru
         }
       }
       if (name === '~/utils/clipboard') return { isClipboardReadGranted: granted }
+      if (name === '~/utils/keyboard-pan') return keyboardPan
       return {}
     },
-    window: { self: {}, top: {}, document: { hasFocus: () => true } },
+    window: { self: {}, top: {}, document: { hasFocus: () => true }, setTimeout, clearTimeout },
     navigator: { clipboard: { readText } },
     setTimeout,
+    ...globals,
   })
   return exports.default!.prototype
 }
@@ -172,3 +179,389 @@ describe('video input during read-only transitions', () => {
     methods.onMouseEnter.call({ hosting: true, locked: true }, {})
   })
 })
+
+describe('video touch input', () => {
+  const touchContext = (sent: string[]) => ({
+    zoomScale: 2,
+    remotePoint: (p: { x: number; y: number }) => p,
+    remotePerClient: () => 1,
+    $client: { sendData: (event: string, data: unknown) => sent.push(`${event} ${JSON.stringify(data)}`) },
+    tapKeyboard: { tap: () => {}, cancel: () => sent.push('keyboard cancel') },
+    gestures: { cancel: () => sent.push('gestures cancel') },
+    resetZoom: () => sent.push('reset zoom'),
+    withdrawCopy: () => {},
+    _player: { getBoundingClientRect: () => ({ top: 0 }) },
+    keyboardOpen: false,
+  })
+
+  test('a double tap while zoomed clicks twice and keeps the zoom', () => {
+    const methods = videoMethods(async () => '')
+    const sent: string[] = []
+    const ctx = {
+      ...touchContext(sent),
+      clickAt: (here: unknown, button: number) => methods.clickAt.call(ctx, here, button),
+    }
+    methods.onGestureTap.call(ctx, { x: 10, y: 20 })
+    methods.onGestureTap.call(ctx, { x: 12, y: 21 })
+    expect(sent).toEqual([
+      'mousemove {"x":10,"y":20}',
+      'mousedown {"key":1}',
+      'mouseup {"key":1}',
+      'mousemove {"x":12,"y":21}',
+      'mousedown {"key":1}',
+      'mouseup {"key":1}',
+    ])
+  })
+
+  test('losing input ends the touch gesture and the keyboard wait', () => {
+    const methods = videoMethods(async () => '')
+    const sent: string[] = []
+    const ctx = touchContext(sent)
+    methods.onInputEnabledChanged.call(ctx, true)
+    expect(sent).toEqual([])
+    methods.onInputEnabledChanged.call(ctx, false)
+    expect(sent).toEqual(['gestures cancel', 'keyboard cancel'])
+  })
+})
+
+describe('touch keyboard opening', () => {
+  const focus = (touch: boolean) => {
+    const methods = videoMethods(async () => '')
+    const calls: string[] = []
+    const ctx = {
+      hosting: true,
+      is_touch_device: touch,
+      keyboardOpen: false,
+      tapKeyboard: { holding: false },
+      $accessor: { remote: { releaseCapsLock: () => calls.push('release caps lock') } },
+      syncClipboard: () => calls.push('sync clipboard'),
+    }
+    methods.onOverlayFocus.call(ctx)
+    return { ctx, calls }
+  }
+
+  test('turns the remote Caps Lock off when the soft keyboard opens', () => {
+    const { ctx, calls } = focus(true)
+    expect(ctx.keyboardOpen).toBe(true)
+    expect(calls).toEqual(['release caps lock', 'sync clipboard'])
+  })
+
+  test('leaves the remote Caps Lock alone on desktop', () => {
+    expect(focus(false).calls).toEqual(['sync clipboard'])
+  })
+})
+
+describe('video with the soft keyboard open', () => {
+  // a 390x664 player, its last tap 500px down; the keyboard leaves the top 380px
+  const keyboardContext = (open: boolean) => {
+    const style: Record<string, string> = { width: '390px', height: '664px', transform: '' }
+    const ctx: Record<string, any> = {
+      is_touch_device: true,
+      fullscreen: false,
+      keyboardOpen: open,
+      keyboardPan: 0,
+      keyboardAnchor: 500,
+      keyboardInset: 0,
+      playerWidth: 390,
+      playerHeight: 664,
+      _component: { offsetWidth: 390, offsetHeight: 380, getBoundingClientRect: () => ({ top: 0, bottom: 380 }) },
+      // mid-transition the on-screen position is neither the old nor the new pan
+      _player: {
+        style,
+        offsetTop: 0,
+        offsetHeight: 664,
+        offsetParent: { getBoundingClientRect: () => ({ top: 0 }) },
+        getBoundingClientRect: () => ({ top: -7, height: 664 }),
+      },
+      resetZoom: () => {
+        throw new Error('the zoom must survive the keyboard')
+      },
+    }
+    return { ctx, style }
+  }
+
+  test('keeps the video size and moves it up so the tap stays above the keyboard', () => {
+    const methods = videoMethods(async () => '')
+    const { ctx, style } = keyboardContext(true)
+    ctx.updateKeyboardView = () => methods.updateKeyboardView.call(ctx)
+    methods.onResize.call(ctx)
+    expect(style.width).toBe('390px')
+    expect(style.height).toBe('664px')
+    expect(ctx.keyboardPan).toBe(216)
+    expect(style.transform).toBe('translateY(-216px)')
+    // the keyboard button is lifted by the part of the player still covered
+    expect(ctx.keyboardInset).toBe(664 - 216 - 380)
+  })
+
+  test('drops the pan when the keyboard closes', () => {
+    const methods = videoMethods(async () => '')
+    const { ctx, style } = keyboardContext(false)
+    ctx.keyboardPan = 216
+    style.transform = 'translateY(-216px)'
+    ctx._component.getBoundingClientRect = () => ({ top: 0, bottom: 664 })
+    methods.updateKeyboardView.call(ctx)
+    expect(ctx.keyboardPan).toBe(0)
+    expect(style.transform).toBe('')
+    expect(ctx.keyboardInset).toBe(0)
+  })
+
+  test('refits the video once the keyboard closes', () => {
+    const methods = videoMethods(async () => '')
+    const calls: string[] = []
+    methods.onKeyboardOpenChanged.call(
+      { is_touch_device: true, onResize: () => calls.push('resize'), updateKeyboardView: () => calls.push('view') },
+      false,
+    )
+    expect(calls).toEqual(['resize'])
+  })
+})
+
+// the remote side of the clipboard: control/clipboard updates and the keys sent
+function clipboardSetup(globals: Record<string, unknown> = {}) {
+  const timers: (() => void)[] = []
+  const listeners: ((text: string) => void)[] = []
+  const sent: string[] = []
+  const typed: string[] = []
+  const methods = videoMethods(async () => '', undefined, {
+    window: { setTimeout: (fn: () => void) => timers.push(fn), clearTimeout: () => {} },
+    ...globals,
+  })
+  const ctx: Record<string, any> = {
+    inputEnabled: true,
+    hosting: true,
+    locked: false,
+    is_touch_device: true,
+    touchNotice: null,
+    panel: null,
+    copyWrites: 0,
+    keyMap: (key: number) => key,
+    textInput: { paste: (text: string) => typed.push(text) },
+    $accessor: {
+      remote: {
+        setClipboard: () => {},
+        sendClipboard: (text: string) => sent.push(`clipboard ${text}`),
+      },
+    },
+    $client: {
+      sendData: (event: string, data: { key: number }) => sent.push(`${event} ${data.key.toString(16)}`),
+      on: (_: string, fn: (text: string) => void) => listeners.push(fn),
+      off: (_: string, fn: (text: string) => void) => listeners.splice(listeners.indexOf(fn), 1),
+    },
+  }
+  for (const name of ['nextRemoteClipboard', 'pressShortcut', 'pasteText']) {
+    ctx[name] = (...args: unknown[]) => methods[name].call(ctx, ...args)
+  }
+  ctx.showTouchNotice = (text: string) => (ctx.touchNotice = text)
+  ctx.openClipboard = (hint: string) => (ctx.panel = hint)
+  return {
+    ctx,
+    methods,
+    sent,
+    typed,
+    listeners,
+    remoteClipboard: (text: string) => [...listeners].forEach((fn) => fn(text)),
+    timeout: () => timers.splice(0).forEach((fn) => fn()),
+  }
+}
+const settle = () => new Promise((done) => setTimeout(done, 20))
+const long = 'a'.repeat(40)
+
+describe('touch paste', () => {
+  test('types short text', () => {
+    const t = clipboardSetup()
+    t.ctx.pasteText('123456\n')
+    expect(t.typed).toEqual(['123456'])
+    expect(t.sent).toEqual([])
+  })
+
+  test('pastes longer text through the remote clipboard and Ctrl+V once the remote confirms it', async () => {
+    const t = clipboardSetup()
+    t.ctx.pasteText(long)
+    expect(t.sent).toEqual([`clipboard ${long}`])
+    t.remoteClipboard(long)
+    await settle()
+    expect(t.sent.slice(1)).toEqual(['keydown ffe3', 'keydown 76', 'keyup 76', 'keyup ffe3'])
+    expect(t.typed).toEqual([])
+  })
+
+  test('types longer text when the remote never confirms the clipboard', async () => {
+    const t = clipboardSetup()
+    t.ctx.pasteText(long)
+    t.timeout()
+    await settle()
+    expect(t.typed).toEqual([long])
+    expect(t.sent).toEqual([`clipboard ${long}`])
+  })
+
+  test('types longer text when the remote clipboard holds other text', async () => {
+    const t = clipboardSetup()
+    t.ctx.pasteText(long)
+    t.remoteClipboard('something else')
+    await settle()
+    expect(t.typed).toEqual([long])
+  })
+
+  test('the Paste key reads the phone clipboard', async () => {
+    const t = clipboardSetup({ navigator: { clipboard: { readText: async () => 'Secret1' } } })
+    t.methods.pasteFromClipboard.call(t.ctx)
+    await settle()
+    expect(t.typed).toEqual(['Secret1'])
+  })
+
+  test('a refused or missing clipboard read opens the clipboard panel', async () => {
+    const denied = clipboardSetup({
+      navigator: { clipboard: { readText: () => Promise.reject(new DOMException('denied', 'NotAllowedError')) } },
+    })
+    denied.methods.pasteFromClipboard.call(denied.ctx)
+    await settle()
+    expect(denied.ctx.panel).toContain('not allowed')
+    expect(denied.typed).toEqual([])
+
+    const missing = clipboardSetup({ navigator: { clipboard: undefined } })
+    missing.methods.pasteFromClipboard.call(missing.ctx)
+    expect(missing.ctx.panel).toBe('Paste here, then tap Paste into page')
+  })
+
+  test('an empty clipboard says so', async () => {
+    const t = clipboardSetup({ navigator: { clipboard: { readText: async () => '' } } })
+    t.methods.pasteFromClipboard.call(t.ctx)
+    await settle()
+    expect(t.ctx.touchNotice).toBe('The clipboard is empty')
+  })
+
+  test('a native paste on a touch device goes the same way', async () => {
+    const t = clipboardSetup()
+    t.ctx.pastePending = true
+    await t.methods.onPaste.call(t.ctx, { clipboardData: { getData: () => '123456' } })
+    expect(t.typed).toEqual(['123456'])
+    expect(t.ctx.pastePending).toBe(false)
+  })
+})
+
+describe('clipboard panel', () => {
+  test('on a touch device it closes the soft keyboard first, so the panel is not moved off screen', () => {
+    const methods = videoMethods(async () => '')
+    const calls: string[] = []
+    const ctx = {
+      is_touch_device: true,
+      keyboardOpen: true,
+      _overlay: { blur: () => calls.push('blur') },
+      _clipboard: { open: (hint: string) => calls.push(`open ${hint}`) },
+    }
+    methods.openClipboard.call(ctx, 'Paste here')
+    expect(calls).toEqual(['blur', 'open Paste here'])
+
+    calls.length = 0
+    methods.openClipboard.call({ ...ctx, is_touch_device: false })
+    expect(calls).toEqual(['open undefined'])
+  })
+})
+
+describe('touch copy', () => {
+  class FakeClipboardItem {
+    constructor(public items: Record<string, Promise<Blob>>) {}
+  }
+  const copySetup = (write?: (items: FakeClipboardItem[]) => Promise<void>) => {
+    const written: string[] = []
+    const clipboard = {
+      write:
+        write ||
+        (async (items: FakeClipboardItem[]) => {
+          written.push(await (await items[0].items['text/plain']).text())
+        }),
+    }
+    const t = clipboardSetup({ ClipboardItem: FakeClipboardItem, Blob, navigator: { clipboard } })
+    return { ...t, written, copy: () => t.methods.copyToClipboard.call(t.ctx) }
+  }
+
+  test('sends Ctrl+C and writes the remote clipboard text to the phone', async () => {
+    const t = copySetup()
+    t.copy()
+    expect(t.sent).toEqual(['keydown ffe3', 'keydown 63', 'keyup 63', 'keyup ffe3'])
+    t.remoteClipboard('Order #1234')
+    await settle()
+    expect(t.written).toEqual(['Order #1234'])
+    expect(t.ctx.touchNotice).toBe('Copied')
+    expect(t.listeners).toHaveLength(0)
+    expect(t.ctx.copyWrites).toBe(0)
+  })
+
+  test('starts the clipboard write inside the tap', () => {
+    let calledDuringTap = false
+    const t = copySetup(() => {
+      calledDuringTap = true
+      return new Promise(() => {})
+    })
+    t.copy()
+    expect(calledDuringTap).toBe(true)
+  })
+
+  test('says nothing was copied when the remote clipboard does not change', async () => {
+    const t = copySetup()
+    t.copy()
+    t.timeout()
+    await settle()
+    expect(t.written).toEqual([])
+    expect(t.ctx.touchNotice).toBe('Nothing was copied')
+    expect(t.ctx.panel).toBe(null)
+  })
+
+  test('a refused clipboard write opens the clipboard panel', async () => {
+    const t = copySetup(async (items) => {
+      await items[0].items['text/plain']
+      throw new DOMException('denied', 'NotAllowedError')
+    })
+    t.copy()
+    t.remoteClipboard('secret')
+    await settle()
+    expect(t.ctx.panel).toContain('not allowed')
+  })
+
+  test('without ClipboardItem it copies on the remote and opens the clipboard panel', () => {
+    const t = clipboardSetup({ ClipboardItem: undefined })
+    t.methods.copyToClipboard.call(t.ctx)
+    expect(t.sent).toEqual(['keydown ffe3', 'keydown 63', 'keyup 63', 'keyup ffe3'])
+    expect(t.ctx.panel).toBe('Select the text and copy it')
+  })
+
+  test('the clipboard sync does not write over a pending Copy', async () => {
+    const writes: string[] = []
+    const methods = videoMethods(async () => '', undefined, {
+      navigator: { clipboard: { writeText: async (text: string) => writes.push(text) } },
+    })
+    const ctx = { clipboard_write_available: true, copyWrites: 1, $accessor: { remote: { setClipboard: () => {} } } }
+    await methods.onClipboardChanged.call(ctx, 'copied text')
+    expect(writes).toEqual([])
+    ctx.copyWrites = 0
+    await methods.onClipboardChanged.call(ctx, 'copied text')
+    expect(writes).toEqual(['copied text'])
+  })
+
+  test('Copy is offered after a drag selection and withdrawn by the next tap', () => {
+    const methods = videoMethods(async () => '')
+    const ctx: Record<string, any> = {
+      copyOffered: false,
+      pressedMouseButtons: new Set([1]),
+      remotePoint: (p: unknown) => p,
+      $client: { sendData: () => {} },
+    }
+    ctx.offerCopy = () => methods.offerCopy.call(ctx)
+    ctx.withdrawCopy = () => methods.withdrawCopy.call(ctx)
+    methods.onGestureDragEnd.call(ctx, { x: 1, y: 1 })
+    expect(ctx.copyOffered).toBe(true)
+    ctx.withdrawCopy()
+    expect(ctx.copyOffered).toBe(false)
+  })
+})
+
+describe('remote pointer after touch', () => {
+  test('stays where the touch left it', () => {
+    const methods = videoMethods(async () => '')
+    const sent: string[] = []
+    methods.onTouchEnd.call(
+      { gestures: { touchEnd: () => {} }, $client: { sendData: (event: string) => sent.push(event) } },
+      { touches: [] },
+    )
+    expect(sent).toEqual([])
+  })
+})