From fa974f920c6afcca554bb410a2772d2abadf4511 Mon Sep 17 00:00:00 2001
From: Mathieu <70369997+MathieuRA@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:39:02 +0100
Subject: [PATCH] feat(web-stack): implement actions and clipboard for VM
 console (#8125)

---
 @xen-orchestra/lite/CHANGELOG.md              |   1 +
 .../lite/src/components/RemoteConsole.vue     |   8 +-
 @xen-orchestra/lite/src/locales/de.json       |   3 -
 @xen-orchestra/lite/src/locales/en.json       |   3 -
 @xen-orchestra/lite/src/locales/fa.json       |   3 -
 @xen-orchestra/lite/src/locales/fr.json       |   3 -
 .../lite/src/views/vm/VmConsoleView.vue       | 101 ++++++------------
 .../components/console/VtsActionsConsole.vue  |  67 ++++++++++++
 .../console/VtsClipboardConsole.vue           |  38 +++++++
 .../components/console/VtsLayoutConsole.vue   |  40 +++++++
 .../components/console/VtsRemoteConsole.vue   |   9 +-
 @xen-orchestra/web-core/lib/locales/de.json   |   3 +
 @xen-orchestra/web-core/lib/locales/en.json   |   8 ++
 @xen-orchestra/web-core/lib/locales/fa.json   |   3 +
 @xen-orchestra/web-core/lib/locales/fr.json   |   8 ++
 .../web/src/pages/host/[id]/console.vue       |  13 ++-
 .../web/src/pages/vm/[id]/console.vue         |  13 ++-
 CHANGELOG.unreleased.md                       |   6 ++
 18 files changed, 242 insertions(+), 88 deletions(-)
 create mode 100644 @xen-orchestra/web-core/lib/components/console/VtsActionsConsole.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/console/VtsClipboardConsole.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/console/VtsLayoutConsole.vue

diff --git a/@xen-orchestra/lite/CHANGELOG.md b/@xen-orchestra/lite/CHANGELOG.md
index 25e73315545..a13130ed0b9 100644
--- a/@xen-orchestra/lite/CHANGELOG.md
+++ b/@xen-orchestra/lite/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - [Pool/Dashboard] `Patches` and `Status` cards are displayed with a greater minimum width (PR [#8108](https://github.com/vatesfr/xen-orchestra/pull/8108))
 - [Header] Update user menu button (PR [#8109](https://github.com/vatesfr/xen-orchestra/pull/8109))
+- [VM/Console] Display _Console Clipboard_ and _Console Actions_ (PR [#8125](https://github.com/vatesfr/xen-orchestra/pull/8125))
 
 ## **0.5.0** (2024-10-31)
 
diff --git a/@xen-orchestra/lite/src/components/RemoteConsole.vue b/@xen-orchestra/lite/src/components/RemoteConsole.vue
index 02b2effd78a..079d907cdc3 100644
--- a/@xen-orchestra/lite/src/components/RemoteConsole.vue
+++ b/@xen-orchestra/lite/src/components/RemoteConsole.vue
@@ -110,10 +110,16 @@ defineExpose({
 
 <style lang="postcss" scoped>
 .vm-console {
-  height: 80rem;
+  flex: 1;
+  max-width: 100%;
 
   & > :deep(div) {
     background-color: transparent !important;
   }
+
+  /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
+  :deep(canvas) {
+    margin: 0 auto !important;
+  }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/locales/de.json b/@xen-orchestra/lite/src/locales/de.json
index dc2ff2eac0c..b19168d1474 100644
--- a/@xen-orchestra/lite/src/locales/de.json
+++ b/@xen-orchestra/lite/src/locales/de.json
@@ -94,7 +94,6 @@
   "following-hosts-unreachable": "Die folgenden Hosts sind nicht erreichbar",
   "force-reboot": "Neustart erzwingen",
   "force-shutdown": "Herunterfahren erzwingen",
-  "fullscreen": "Vollbild",
   "fullscreen-leave": "Vollbild schließen",
   "gateway": "Gateway",
   "n-gb-left": "{n} GB frei",
@@ -137,7 +136,6 @@
   "object": "Objekt",
   "ok": "OK",
   "on-object": "auf {object}",
-  "open-console-in-new-tab": "Konsole in neuem Reiter öffnen",
   "or": "Oder",
   "page-not-found": "Diese Seite wurde nicht gefunden…",
   "password": "Passwort",
@@ -167,7 +165,6 @@
   "select-compression": "Kompression auswählen",
   "select-destination-host": "Zielhost auswählen",
   "selected-vms-in-execution": "Einige der ausgewählten VMs sind eingeschaltet",
-  "send-ctrl-alt-del": "Ctrl+Alt+Del senden",
   "send-us-feedback": "Gib uns Feedback",
 
   "select.network": "Ein Netzwerk auswählen",
diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index f12ee23e7b0..4edce646b6a 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -96,7 +96,6 @@
   "following-hosts-unreachable": "The following hosts are unreachable",
   "force-reboot": "Force reboot",
   "force-shutdown": "Force shutdown",
-  "fullscreen": "Fullscreen",
   "fullscreen-leave": "Leave fullscreen",
   "gateway": "Gateway",
   "n-gb-left": "{n} GB left",
@@ -139,7 +138,6 @@
   "object": "Object",
   "ok": "OK",
   "on-object": "on {object}",
-  "open-console-in-new-tab": "Open console in new tab",
   "or": "Or",
   "page-not-found": "This page is not to be found…",
   "password": "Password",
@@ -169,7 +167,6 @@
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "selected-vms-in-execution": "Some selected VMs are running",
-  "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
   "send-us-feedback": "Send us feedback",
 
   "select.network": "Select a network",
diff --git a/@xen-orchestra/lite/src/locales/fa.json b/@xen-orchestra/lite/src/locales/fa.json
index 6bcd5ffaf41..4cd28bd8d6f 100644
--- a/@xen-orchestra/lite/src/locales/fa.json
+++ b/@xen-orchestra/lite/src/locales/fa.json
@@ -95,7 +95,6 @@
   "following-hosts-unreachable": "میزبان های زیر در دسترس نیستند",
   "force-reboot": "راه اندازی مجدد اجباری",
   "force-shutdown": "خاموش کردن اجباری",
-  "fullscreen": "تمام صفحه",
   "fullscreen-leave": "خروج از حالت تمام صفحه",
   "gateway": "دروازه",
   "n-gb-left": "{n} GB باقی مانده است",
@@ -137,7 +136,6 @@
   "object-not-found": "شیء {id} پیدا نمی شود…",
   "ok": "اوکی",
   "on-object": "در {object}",
-  "open-console-in-new-tab": "باز کردن کنسول در برگه جدید",
   "or": "یا",
   "page-not-found": "این صفحه پیدا نمی شود…",
   "password": "کلمه عبور",
@@ -167,7 +165,6 @@
   "select-compression": "یک فشرده سازی انتخاب کنید",
   "select-destination-host": "یک میزبان مقصد انتخاب کنید",
   "selected-vms-in-execution": "برخی از ماشین های مجازی انتخاب شده در حال اجرا هستند",
-  "send-ctrl-alt-del": "ارسال کلیدهای Ctrl+Alt+Del",
   "send-us-feedback": "برای ما بازخورد ارسال کنید",
 
   "select.network": "یک شبکه انتخاب کنید",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index e7a8abd90cf..9637896a37f 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -96,7 +96,6 @@
   "following-hosts-unreachable": "Les hôtes suivants sont inaccessibles",
   "force-reboot": "Forcer le redémarrage",
   "force-shutdown": "Forcer l'arrêt",
-  "fullscreen": "Plein écran",
   "fullscreen-leave": "Quitter plein écran",
   "gateway": "Passerelle",
   "n-gb-left": "{n} Go libres",
@@ -139,7 +138,6 @@
   "object": "Objet",
   "ok": "OK",
   "on-object": "sur {object}",
-  "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "or": "Ou",
   "page-not-found": "Cette page est introuvable…",
   "password": "Mot de passe",
@@ -169,7 +167,6 @@
   "select-compression": "Sélectionnez une compression",
   "select-destination-host": "Sélectionnez un hôte de destination",
   "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
-  "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
   "send-us-feedback": "Envoyez-nous vos commentaires",
 
   "select.network": "Sélectionner un réseau",
diff --git a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
index dda670d14db..797ac350c0a 100644
--- a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
+++ b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
@@ -4,26 +4,24 @@
     <UiSpinner v-else-if="!isReady" class="spinner" />
     <UiStatusPanel v-else-if="!isVmRunning" :image-source="monitor" :title="$t('power-on-vm-for-console')" />
     <template v-else-if="vm && vmConsole">
-      <MenuList horizontal>
-        <MenuItem v-if="uiStore.hasUi" :icon="faArrowUpRightFromSquare" @click="openInNewTab">
-          {{ $t('open-console-in-new-tab') }}
-        </MenuItem>
-        <MenuItem
-          :icon="uiStore.hasUi ? faUpRightAndDownLeftFromCenter : faDownLeftAndUpRightToCenter"
-          @click="toggleFullScreen"
-        >
-          {{ $t(uiStore.hasUi ? 'fullscreen' : 'fullscreen-leave') }}
-        </MenuItem>
-        <MenuItem :disabled="!consoleElement" :icon="faKeyboard" @click="sendCtrlAltDel">
-          {{ $t('send-ctrl-alt-del') }}
-        </MenuItem>
-      </MenuList>
-      <RemoteConsole
-        ref="consoleElement"
-        :is-console-available="isConsoleAvailable"
-        :location="vmConsole.location"
-        class="remote-console"
-      />
+      <VtsLayoutConsole>
+        <RemoteConsole
+          ref="consoleElement"
+          :is-console-available="isConsoleAvailable"
+          :location="vmConsole.location"
+          class="remote-console"
+        />
+        <template #actions>
+          <VtsActionsConsole
+            :open-in-new-tab="openInNewTab"
+            :send-ctrl-alt-del="sendCtrlAltDel"
+            :toggle-full-screen="toggleFullScreen"
+            :is-fullscreen="!uiStore.hasUi"
+          />
+          <VtsDivider type="stretch" />
+          <VtsClipboardConsole />
+        </template>
+      </VtsLayoutConsole>
     </template>
   </div>
 </template>
@@ -39,15 +37,13 @@ import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useConsoleStore } from '@/stores/xen-api/console.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-import MenuItem from '@core/components/menu/MenuItem.vue'
-import MenuList from '@core/components/menu/MenuList.vue'
+import VtsActionsConsole from '@core/components/console/VtsActionsConsole.vue'
+import VtsClipboardConsole from '@core/components/console/VtsClipboardConsole.vue'
+import VtsLayoutConsole from '@core/components/console/VtsLayoutConsole.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import {
-  faArrowUpRightFromSquare,
-  faDownLeftAndUpRightToCenter,
-  faKeyboard,
-  faUpRightAndDownLeftFromCenter,
-} from '@fortawesome/free-solid-svg-icons'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -110,6 +106,13 @@ const openInNewTab = () => {
   const routeData = router.resolve({ query: { ui: '0' } })
   window.open(routeData.href, '_blank')
 }
+
+const { escape } = useMagicKeys()
+const activeElement = useActiveElement()
+const canClose = computed(
+  () => (activeElement.value == null || activeElement.value.tagName !== 'CANVAS') && !uiStore.hasUi
+)
+whenever(logicAnd(escape, canClose), toggleFullScreen)
 </script>
 
 <style lang="postcss" scoped>
@@ -136,46 +139,4 @@ const openInNewTab = () => {
   max-width: 100%;
   height: 100%;
 }
-
-.not-available {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-align: center;
-  gap: 4rem;
-  color: var(--color-info-txt-base);
-  font-size: 3.6rem;
-}
-
-.open-in-new-window {
-  position: absolute;
-  top: 0;
-  right: 0;
-  overflow: hidden;
-
-  & > .link {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    background-color: var(--color-info-txt-base);
-    color: var(--color-info-txt-item);
-    text-decoration: none;
-    padding: 1.5rem;
-    font-size: 1.6rem;
-    border-radius: 0 0 0 0.8rem;
-    white-space: nowrap;
-    transform: translateX(calc(100% - 4.5rem));
-    transition: transform 0.2s ease-in-out;
-
-    &:hover {
-      transform: translateX(0);
-    }
-  }
-}
-
-.vm-console-view:deep(.menu-list) {
-  background-color: transparent;
-  align-self: center;
-}
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/console/VtsActionsConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsActionsConsole.vue
new file mode 100644
index 00000000000..cf9a8527b62
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/console/VtsActionsConsole.vue
@@ -0,0 +1,67 @@
+<template>
+  <UiCardTitle>{{ $t('console-actions') }}</UiCardTitle>
+  <UiButton
+    v-tooltip="toggleFullScreen === undefined ? $t('coming-soon') : undefined"
+    class="button"
+    :disabled="toggleFullScreen === undefined"
+    accent="info"
+    variant="tertiary"
+    size="medium"
+    :left-icon="isFullscreen ? faDownLeftAndUpRightToCenter : faUpRightAndDownLeftFromCenter"
+    @click="toggleFullScreen"
+  >
+    {{ $t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
+  </UiButton>
+  <UiButton
+    v-tooltip="openInNewTab === undefined ? $t('coming-soon') : undefined"
+    class="button"
+    :disabled="openInNewTab === undefined"
+    accent="info"
+    variant="tertiary"
+    size="medium"
+    :left-icon="faArrowUpRightFromSquare"
+    @click="openInNewTab"
+  >
+    {{ $t('open-console-in-new-tab') }}
+  </UiButton>
+  <UiButton
+    v-tooltip="sendCtrlAltDel === undefined ? $t('coming-soon') : undefined"
+    class="button"
+    accent="info"
+    variant="tertiary"
+    size="medium"
+    :disabled="sendCtrlAltDel === undefined"
+    :left-icon="faKeyboard"
+    @click="sendCtrlAltDel"
+  >
+    {{ $t('send-ctrl-alt-del') }}
+  </UiButton>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import {
+  faArrowUpRightFromSquare,
+  faDownLeftAndUpRightToCenter,
+  faKeyboard,
+  faUpRightAndDownLeftFromCenter,
+} from '@fortawesome/free-solid-svg-icons'
+
+// temporary undefined for xo6
+defineProps<{
+  openInNewTab?: () => void
+  toggleFullScreen?: () => void
+  sendCtrlAltDel?: () => void
+  isFullscreen?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.button {
+  align-self: start;
+  gap: 0.8rem;
+  text-align: left;
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/console/VtsClipboardConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsClipboardConsole.vue
new file mode 100644
index 00000000000..fa0ff4b98a4
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/console/VtsClipboardConsole.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="vts-clipboard-console">
+    <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
+    <UiTextarea v-tooltip="$t('coming-soon')" accent="info" disabled :model-value="modelValue" />
+    <div class="buttons-container">
+      <UiButton v-tooltip="$t('coming-soon')" accent="info" variant="primary" size="medium" disabled>
+        {{ $t('send') }}
+      </UiButton>
+      <UiButton v-tooltip="$t('coming-soon')" accent="info" variant="secondary" size="medium" disabled>
+        {{ $t('receive') }}
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import UiTextarea from '@core/components/ui/input/UiTextarea.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { ref } from 'vue'
+
+const modelValue = ref('')
+</script>
+
+<style lang="postcss" scoped>
+.vts-clipboard-console {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  width: 100%;
+
+  .buttons-container {
+    display: flex;
+    gap: 0.8rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/console/VtsLayoutConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsLayoutConsole.vue
new file mode 100644
index 00000000000..496329615bf
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/console/VtsLayoutConsole.vue
@@ -0,0 +1,40 @@
+<template>
+  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-layout-console">
+    <slot />
+    <UiCard class="card">
+      <slot name="actions" />
+    </UiCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import { useUiStore } from '@core/stores/ui.store'
+
+defineSlots<{
+  default(): any
+  actions(): any
+}>()
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-layout-console {
+  display: flex;
+  gap: 2.4rem;
+  height: 100%;
+  padding: 0.8rem;
+
+  &.mobile {
+    flex-direction: column;
+  }
+
+  .card {
+    height: fit-content;
+    gap: 1.6rem;
+    padding: 1.6rem;
+    width: 43rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
index e2d06b82e0d..d9179f6cba4 100644
--- a/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
+++ b/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
@@ -97,9 +97,7 @@ const uiStore = useUiStore()
 
 <style lang="postcss" scoped>
 .vts-remote-console {
-  padding: 0.8rem;
-  height: 80rem;
-  width: 100%;
+  flex-grow: 1;
   max-width: 100%;
 
   &.mobile {
@@ -111,5 +109,10 @@ const uiStore = useUiStore()
   .console {
     height: 100%;
   }
+
+  /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
+  :deep(canvas) {
+    margin: 0 auto !important;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/locales/de.json b/@xen-orchestra/web-core/lib/locales/de.json
index ec4ee886aba..86b90c96720 100644
--- a/@xen-orchestra/web-core/lib/locales/de.json
+++ b/@xen-orchestra/web-core/lib/locales/de.json
@@ -19,6 +19,7 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
+  "fullscreen": "Vollbild",
   "hosts": "Hosts",
   "learn-more": "Mehr erfahren",
   "loading-in-progress": "Ladevorgang läuft…",
@@ -27,10 +28,12 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
+  "open-console-in-new-tab": "Konsole in neuem Reiter öffnen",
   "patches": "Patches",
   "power-on-vm-for-console": "Konsole ist nach Start der VM verfügbar",
   "power-on-host-for-console": "Konsole ist nach Start des Hosts verfügbar",
   "running-vm": "VM eingeschalten | VMs eingeschalten",
+  "send-ctrl-alt-del": "Ctrl+Alt+Del senden",
   "stats": "Statistiken",
   "storage": "Speicher",
   "system": "System",
diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
index 3dd016f5a27..fe450172c00 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -7,6 +7,8 @@
 
   "coming-soon": "Coming soon!",
   "console": "Console",
+  "console-actions": "Console actions",
+  "console-clipboard": "Console clipboard",
 
   "core.copied": "Copied",
   "core.copy-id": "Copy ID",
@@ -43,6 +45,8 @@
   "access-forum": "Access forum",
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
+  "exit-fullscreen": "Exit fullscreen",
+  "fullscreen": "Fullscreen",
   "hosts": "Hosts",
   "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
@@ -52,13 +56,17 @@
   "network": "Network",
   "no-data": "No data",
   "object-not-found": "Object {id} can't be found…",
+  "open-console-in-new-tab": "Open console in new tab",
   "other": "Other",
   "patches": "Patches",
   "power-on-vm-for-console": "Power on your VM to access its console",
   "power-on-host-for-console": "Power on your host to access its console",
   "professional-support": "Professional support",
+  "receive": "Receive",
   "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
+  "send": "Send",
+  "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
   "stats": "Stats",
   "storage": "Storage",
   "system": "System",
diff --git a/@xen-orchestra/web-core/lib/locales/fa.json b/@xen-orchestra/web-core/lib/locales/fa.json
index e448d97e3d0..3b2a450873c 100644
--- a/@xen-orchestra/web-core/lib/locales/fa.json
+++ b/@xen-orchestra/web-core/lib/locales/fa.json
@@ -33,15 +33,18 @@
 
   "dashboard": "داشبورد",
   "documentation-name": "اسناد {name}",
+  "fullscreen": "تمام صفحه",
   "learn-more": "بیشتر بدانید",
   "loading-in-progress": "بارگیری در حال انجام است…",
   "log-out": "خروج",
   "master": "میزبان اصلی",
   "network": "شبکه",
+  "open-console-in-new-tab": "باز کردن کنسول در برگه جدید",
   "patches": "وصله ها",
   "power-on-vm-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
   "power-on-host-for-console": "هاست خود را برای دسترسی به کنسول آن روشن کنید",
   "running-vm": "ماشین های مجازی در حال اجرا | ماشین مجازی در حال اجرا",
+  "send-ctrl-alt-del": "ارسال کلیدهای Ctrl+Alt+Del",
   "stats": "آمار",
   "storage": "ذخیره سازی",
   "system": "سیستم",
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index 4414a7985ff..705999fbb97 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -7,6 +7,8 @@
 
   "coming-soon": "Bientôt disponible !",
   "console": "Console",
+  "console-actions": "Actions de la console",
+  "console-clipboard": "Presse-papiers de la console",
 
   "core.copied": "Copié",
   "core.copy-id": "Copier l'ID",
@@ -43,6 +45,8 @@
   "access-forum": "Accès au forum",
   "dashboard": "Tableau de bord",
   "documentation-name": "Documentation {name}",
+  "exit-fullscreen": "Quitter le plein écran",
+  "fullscreen": "Plein écran",
   "hosts": "Hôtes",
   "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
@@ -52,13 +56,17 @@
   "network": "Réseau",
   "no-data": "Aucune donnée",
   "object-not-found": "L'objet {id} est introuvable…",
+  "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "other": "Autre",
   "patches": "Patches",
   "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
   "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
   "professional-support": "Support professionel",
+  "receive": "Recevoir",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
+  "send": "Envoyer",
+  "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
   "stats": "Stats",
   "storage": "Stockage",
   "system": "Système",
diff --git a/@xen-orchestra/web/src/pages/host/[id]/console.vue b/@xen-orchestra/web/src/pages/host/[id]/console.vue
index 8d3123f7323..33f63f3027d 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/console.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/console.vue
@@ -1,11 +1,22 @@
 <template>
   <p v-if="!isHostConsoleAvailable" class="typo h5-medium">{{ $t('power-on-host-for-console') }}</p>
-  <VtsRemoteConsole v-else :url />
+  <VtsLayoutConsole v-else>
+    <VtsRemoteConsole :url />
+    <template #actions>
+      <VtsActionsConsole />
+      <VtsDivider type="stretch" />
+      <VtsClipboardConsole />
+    </template>
+  </VtsLayoutConsole>
 </template>
 
 <script lang="ts" setup>
 import type { XoHost } from '@/types/xo/host.type'
+import VtsActionsConsole from '@core/components/console/VtsActionsConsole.vue'
+import VtsClipboardConsole from '@core/components/console/VtsClipboardConsole.vue'
+import VtsLayoutConsole from '@core/components/console/VtsLayoutConsole.vue'
 import VtsRemoteConsole from '@core/components/console/VtsRemoteConsole.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/console.vue b/@xen-orchestra/web/src/pages/vm/[id]/console.vue
index b8958f6eabd..bc685cca2fa 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/console.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/console.vue
@@ -1,11 +1,22 @@
 <template>
   <p v-if="!isVmConsoleAvailable" class="typo h5-medium">{{ $t('power-on-vm-for-console') }}</p>
-  <VtsRemoteConsole v-else :url />
+  <VtsLayoutConsole v-else>
+    <VtsRemoteConsole :url />
+    <template #actions>
+      <VtsActionsConsole />
+      <VtsDivider type="stretch" />
+      <VtsClipboardConsole />
+    </template>
+  </VtsLayoutConsole>
 </template>
 
 <script lang="ts" setup>
 import type { XoVm } from '@/types/xo/vm.type'
+import VtsActionsConsole from '@core/components/console/VtsActionsConsole.vue'
+import VtsClipboardConsole from '@core/components/console/VtsClipboardConsole.vue'
+import VtsLayoutConsole from '@core/components/console/VtsLayoutConsole.vue'
 import VtsRemoteConsole from '@core/components/console/VtsRemoteConsole.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 8f0c50b2639..2d462a0a028 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -11,6 +11,9 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+- **XO 6**:
+  - [VM,Host/Console] Display _Console Clipboard_ and _Console Actions_ (PR [#8125](https://github.com/vatesfr/xen-orchestra/pull/8125))
+
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
@@ -31,4 +34,7 @@
 
 <!--packages-start-->
 
+- @xen-orchestra/web minor
+- @xen-orchestra/web-core minor
+
 <!--packages-end-->