diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
deleted file mode 100644
index d23e13f20d..0000000000
--- a/desk/src/components/CommentTextEditor.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-  <Editor
-    ref="editorRef"
-    v-model="newComment"
-    :extensions="extensions"
-    :editable="editable"
-    :placeholder="placeholder"
-    :upload-function="(file:any)=>uploadFunction(file, doctype, ticketId)"
-  >
-    <template #default="{ isEmpty }">
-      <EditorContent
-        :class="[
-          'prose-sm max-w-none',
-          editable &&
-            'min-h-[7rem] mx-5 max-h-[44vh] overflow-y-auto border-t py-3',
-          getFontFamily(newComment),
-        ]"
-      />
-      <!-- Attachments -->
-      <AttachmentList
-        class="my-2 ms-5"
-        :attachments="attachments"
-        @remove="removeAttachment"
-      />
-      <div v-if="editable" class="flex flex-col gap-2 border-t">
-        <div class="px-4">
-          <!-- Fixed Menu -->
-          <div class="flex justify-between overflow-hidden py-2.5">
-            <div class="flex items-center overflow-x-auto w-[60%]">
-              <div class="inline-flex items-center gap-1.5 p-1">
-                <FileUploader
-                  :upload-args="{
-                    doctype: doctype,
-                    docname: ticketId,
-                    private: true,
-                  }"
-                  @success="(f) => attachments.push(f)"
-                >
-                  <template #default="{ openFileSelector, uploading }">
-                    {{ void (loading = uploading) }}
-                    <button
-                      class="flex rounded p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
-                      @click="openFileSelector()"
-                      :disabled="uploading"
-                    >
-                      <LoadingIndicator v-if="uploading" class="h-4 w-4" />
-                      <AttachmentIcon
-                        v-else
-                        class="h-4 w-4"
-                        style="stroke-width: 1.5 !important"
-                      />
-                    </button>
-                  </template>
-                </FileUploader>
-                <div class="h-4 w-[2px] border-s ml-1" />
-              </div>
-              <EditorFixedMenu :items="fullToolbar" />
-            </div>
-            <div class="flex items-center justify-end gap-x-2 w-[40%]">
-              <Button
-                label="Discard"
-                @click="
-                  () => {
-                    newComment = '';
-                    attachments = [];
-                    emit('discard');
-                  }
-                "
-              />
-              <Button
-                variant="solid"
-                :label="label"
-                :disabled="isDisabled"
-                :loading="loading"
-                @click="
-                  () => {
-                    loading = true;
-                    submitComment();
-                    newComment = '';
-                  }
-                "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </Editor>
-</template>
-<script setup lang="ts">
-import { FileUploader, LoadingIndicator, createResource } from "frappe-ui";
-import { Editor, EditorContent, EditorFixedMenu } from "frappe-ui/editor";
-import { useOnboarding } from "frappe-ui/frappe";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-
-import { AttachmentList } from "@/components/";
-import { buildEditorExtensions, fullToolbar } from "@/components/editor/config";
-import { AttachmentIcon } from "@/components/icons/";
-import { useTyping } from "@/composables/realtime";
-import { useAgentStore } from "@/stores/agent";
-import { useAuthStore } from "@/stores/auth";
-import {
-  getFontFamily,
-  isContentEmpty,
-  removeAttachmentFromServer,
-  uploadFunction,
-} from "@/utils";
-import { useStorage } from "@vueuse/core";
-import { storeToRefs } from "pinia";
-
-const { updateOnboardingStep } = useOnboarding("helpdesk");
-const { agents: agentsList, dropdown } = storeToRefs(useAgentStore());
-const { isManager } = useAuthStore();
-
-const props = defineProps({
-  ticketId: {
-    type: String,
-    default: null,
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  label: {
-    type: String,
-    default: "Comment",
-  },
-  editable: {
-    type: Boolean,
-    default: true,
-  },
-  doctype: {
-    type: String,
-    default: "HD Ticket",
-  },
-});
-
-const emit = defineEmits(["submit", "discard"]);
-
-const newComment = useStorage("commentBoxContent" + props.ticketId, null);
-
-// Mentions as a reactive getter so the `@` list stays in sync as agents load.
-const extensions = buildEditorExtensions({
-  mentions: () =>
-    (dropdown.value ?? []).map((a: { label: string; value: string }) => ({
-      id: a.value,
-      label: a.label,
-    })),
-});
-
-// Initialize typing composable
-const { onUserType, cleanup } = useTyping(props.ticketId);
-
-const attachments = ref([]);
-const isDisabled = computed(() => {
-  return isContentEmpty(newComment.value) || loading.value;
-});
-const loading = ref(false);
-
-function removeAttachment(attachment) {
-  attachments.value = attachments.value.filter((a) => a !== attachment);
-  removeAttachmentFromServer(attachment.name);
-}
-
-async function submitComment() {
-  if (isContentEmpty(newComment.value)) {
-    return false;
-  }
-  const comment = createResource({
-    url: "run_doc_method",
-    makeParams: () => ({
-      dt: props.doctype,
-      dn: props.ticketId,
-      method: "new_comment",
-      args: {
-        content: newComment.value,
-        attachments: attachments.value,
-      },
-    }),
-    onSuccess: () => {
-      if (isManager) {
-        updateOnboardingStep("comment_on_ticket");
-      }
-      emit("submit");
-      loading.value = false;
-      attachments.value = [];
-      newComment.value = null;
-    },
-    onError: () => {
-      loading.value = false;
-    },
-  });
-
-  comment.submit();
-}
-
-const editorRef = ref(null);
-const editor = computed(() => editorRef.value?.editor);
-
-// Watch for changes in comment content to trigger typing events
-watch(newComment, (newValue, oldValue) => {
-  if (newValue !== oldValue && newValue) {
-    onUserType();
-  }
-});
-
-onMounted(() => {
-  if (
-    agentsList.value.loading ||
-    agentsList.value.data?.length ||
-    agentsList.value.list.promise
-  ) {
-    return;
-  }
-  agentsList.value.fetch();
-});
-
-onBeforeUnmount(() => {
-  cleanup();
-  if (isContentEmpty(newComment.value)) {
-    localStorage.removeItem("commentBoxContent" + props.ticketId);
-  }
-});
-
-defineExpose({
-  submitComment,
-  editor,
-});
-</script>
diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
index 8d0aed24fc..cfa9c39fc5 100644
--- a/desk/src/components/CommunicationArea.vue
+++ b/desk/src/components/CommunicationArea.vue
@@ -1,175 +1,244 @@
 <template>
-  <div class="comm-area" resizable="true">
-    <div
-      class="flex justify-between gap-3 border-t px-6 md:px-5 py-4 md:py-2.5"
-    >
-      <div class="flex gap-1.5 items-center">
-        <Button
-          ref="sendEmailRef"
-          variant="ghost"
-          label="Reply"
-          :class="[
-            showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
-          ]"
-          @click="toggleEmailBox()"
-        >
-          <template #prefix>
-            <EmailIcon class="h-4" />
-          </template>
-        </Button>
+  <div ref="rootRef" class="max-sm:w-screen">
+    <!-- Minimized pill — the default state; opens the composer window. -->
+    <div v-show="!windowOpen" class="px-4 py-3">
+      <div
+        role="button"
+        tabindex="0"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-lg bg-surface-elevation-2 py-1 pl-2 pr-1 text-base text-ink-gray-5 shadow-md hover:bg-surface-elevation-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+        @click="openComposer()"
+        @keydown.enter.prevent="openComposer()"
+        @keydown.space.prevent="openComposer()"
+      >
+        <Avatar :image="userImage" :label="userName" size="md" />
+        <span class="min-w-0 flex-1 truncate py-1 text-left">
+          {{ minimizedLabel }}
+        </span>
+        <TypingIndicator :ticketId="ticketId" />
         <Button
           variant="ghost"
-          label="Comment"
-          :class="[
-            showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
-          ]"
-          @click="toggleCommentBox()"
+          label="Expand"
+          tooltip="Expand"
+          @click.stop="openFloatingComposer"
         >
-          <template #prefix>
-            <CommentIcon class="h-4" />
-          </template>
+          <template #icon><LucideMaximize2 class="h-4 w-4" /></template>
         </Button>
-        <TypingIndicator :ticketId="ticketId" />
       </div>
     </div>
-    <Transition name="slide">
-      <div
-        v-show="showEmailBox"
-        ref="emailBoxRef"
-        @keydown.ctrl.enter.capture.stop="submitEmail"
-        @keydown.meta.enter.capture.stop="submitEmail"
-        @keydown.esc.capture.stop="showEmailBox = false"
-      >
-        <div class="overflow-hidden">
-          <EmailEditor
-            ref="emailEditorRef"
-            :label="
-              isMobileView ? 'Send' : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
-            "
-            placeholder="Hi John, we are looking into this issue."
-            :ticketId="ticketId"
-            :to-emails="toEmails"
-            :cc-emails="ccEmails"
-            :bcc-emails="bccEmails"
-            @submit="
-              () => {
-                showEmailBox = false;
-                emit('update');
-              }
-            "
-            @discard="
-              () => {
-                showEmailBox = false;
-              }
-            "
-          />
-        </div>
-      </div>
-    </Transition>
-    <Transition name="slide">
-      <div
-        v-show="showCommentBox"
-        ref="commentBoxRef"
-        @keydown.ctrl.enter.capture.stop="submitComment"
-        @keydown.meta.enter.capture.stop="submitComment"
-        @keydown.esc.capture.stop="showCommentBox = false"
-      >
-        <div class="overflow-hidden">
-          <CommentTextEditor
-            ref="commentTextEditorRef"
-            :label="
-              isMobileView
-                ? 'Comment'
-                : isMac
-                ? 'Comment (⌘ + ⏎)'
-                : 'Comment (Ctrl + ⏎)'
-            "
-            :ticketId="ticketId"
-            :editable="showCommentBox"
-            :doctype="doctype"
-            placeholder="@John could you please look into this?"
-            @submit="
-              () => {
-                showCommentBox = false;
-                emit('update');
-              }
-            "
-            @discard="
-              () => {
-                showCommentBox = false;
-              }
-            "
-          />
-        </div>
+    <!-- Enter classes only: closing is instant, so the composers can hide in
+         the same patch without a keep-alive dance. -->
+    <Transition
+      enter-active-class="transition duration-150 ease-out motion-reduce:transition-none"
+      enter-from-class="translate-y-1 opacity-0"
+    >
+      <div v-show="windowOpen" class="px-4 pb-3">
+        <FloatingWindow
+          v-model:mode="windowMode"
+          class="ticket-composer-window"
+          :class="{ 'composer-resized': dockedHeight > 0 }"
+          @pointerdown="onPanelPointerDown"
+        >
+          <!-- Single chrome row: channel switcher left, window controls right.
+               Doubles as the library's drag handle while floating and our
+               resize surface while docked. -->
+          <template #header="{ mode, dock, float }">
+            <div
+              class="flex w-full items-center justify-between gap-2 px-2.5 py-2"
+            >
+              <!-- Visible grab pill at the window's top edge (the panel root is
+                   the positioned ancestor); also the keyboard resize handle. -->
+              <button
+                v-if="mode === 'docked'"
+                type="button"
+                class="absolute left-1/2 top-0 z-10 hidden h-6 w-24 -translate-x-1/2 cursor-ns-resize touch-none items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100 focus:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3 sm:flex"
+                aria-label="Resize composer"
+                @pointerdown.stop.prevent="startDockedResize($event)"
+                @keydown.up.prevent="resizeDockedBy(16)"
+                @keydown.down.prevent="resizeDockedBy(-16)"
+              >
+                <span class="h-1 w-10 rounded-full bg-surface-gray-4" />
+              </button>
+              <TabButtons v-model="channel" :options="channelOptions" />
+              <div class="min-w-0 flex-1">
+                <TypingIndicator :ticketId="ticketId" />
+              </div>
+              <div class="flex shrink-0 items-center gap-1">
+                <Button
+                  v-if="!isMobileView"
+                  variant="ghost"
+                  :label="mode === 'floating' ? 'Dock' : 'Pop out'"
+                  :tooltip="mode === 'floating' ? 'Dock' : 'Pop out'"
+                  @click="mode === 'floating' ? dock() : float()"
+                >
+                  <template #icon>
+                    <component
+                      :is="
+                        mode === 'floating' ? LucideMinimize2 : LucideMaximize2
+                      "
+                      class="h-4 w-4"
+                    />
+                  </template>
+                </Button>
+                <Button
+                  variant="ghost"
+                  label="Close"
+                  tooltip="Close"
+                  @click="closeComposer"
+                >
+                  <template #icon><LucideX class="h-4 w-4" /></template>
+                </Button>
+              </div>
+            </div>
+          </template>
+          <!-- Esc closes the window before the composer's internal Esc-reset,
+               so drafts survive. Full-height column while floating pins the
+               composer toolbar to the window bottom; a dragged docked height
+               sizes the in-flow window through this column. -->
+          <div
+            ref="columnRef"
+            class="flex min-h-0 flex-col"
+            :class="windowMode === 'floating' ? 'h-full' : ''"
+            :style="dockedColumnStyle"
+            @keydown.esc.capture.stop="closeComposer"
+          >
+            <!-- v-show keeps both mounted so each draft survives a tab switch. -->
+            <div
+              v-show="showEmailBox"
+              class="flex min-h-0 flex-1 flex-col px-2.5 py-2"
+            >
+              <EmailComposer
+                ref="emailComposerRef"
+                v-model="emailBody"
+                v-model:to="to"
+                v-model:cc="cc"
+                v-model:bcc="bcc"
+                v-model:quoted="quotedContent"
+                v-model:from="fromEmail"
+                class="min-h-0 flex-1"
+                :show-from="hasMultipleSenders"
+                :senders="senders"
+                :search-recipients="searchRecipients"
+                :upload-function="uploadFile"
+                placeholder="Hi John, we are looking into this issue."
+                :submit-label="emailSubmitLabel"
+                @submit="onEmailSubmit"
+                @remove-attachment="
+                  (file) => removeAttachmentFromServer(file.name)
+                "
+              >
+                <template #actions>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    label="Saved replies"
+                    tooltip="Saved replies"
+                    @click="showSavedRepliesSelectorModal = true"
+                  >
+                    <template #icon><ZapIcon class="h-4 w-4" /></template>
+                  </Button>
+                </template>
+              </EmailComposer>
+              <!-- Saved reply actions, applied once the reply is sent -->
+              <SavedReplyActions
+                ref="savedReplyActionsRef"
+                class="mt-2 shrink-0"
+                :ticket-id="ticketId"
+                :doctype="doctype"
+              />
+            </div>
+            <div
+              v-show="showCommentBox"
+              class="flex min-h-0 flex-1 flex-col px-2.5 py-2"
+            >
+              <CommentComposer
+                ref="commentComposerRef"
+                v-model="commentBody"
+                class="min-h-0 flex-1"
+                :mentions="mentionOptions"
+                :upload-function="uploadFile"
+                placeholder="@John could you please look into this?"
+                :submit-label="commentSubmitLabel"
+                @submit="onCommentSubmit"
+                @remove-attachment="
+                  (file) => removeAttachmentFromServer(file.name)
+                "
+              />
+            </div>
+          </div>
+        </FloatingWindow>
       </div>
     </Transition>
   </div>
+  <SavedRepliesSelectorModal
+    v-model="showSavedRepliesSelectorModal"
+    :doctype="doctype"
+    :ticketId="ticketId"
+    @apply="applySavedReplies"
+  />
 </template>
 
 <script setup lang="ts">
-import { CommentTextEditor, EmailEditor, TypingIndicator } from "@/components";
-import { CommentIcon, EmailIcon } from "@/components/icons/";
+import { SavedRepliesSelectorModal, TypingIndicator } from "@/components";
+import { createDialog } from "@/components/dialogs";
+import SavedReplyActions from "@/components/SavedReplyActions/SavedReplyActions.vue";
 import { useDevice } from "@/composables";
+import { useTyping } from "@/composables/realtime";
 import { useScreenSize } from "@/composables/screen";
 import { useShortcut } from "@/composables/shortcuts";
-import { showCommentBox, showEmailBox } from "@/pages/ticket/modalStates";
-import { onClickOutside } from "@vueuse/core";
-import { ref, watch } from "vue";
-
-const emit = defineEmits(["update"]);
-const content = defineModel("content");
-const { isMac } = useDevice();
-const { isMobileView } = useScreenSize();
-let doc = defineModel();
-// let doc = inject(TicketSymbol)?.value.doc
-const emailEditorRef = ref(null);
-const commentTextEditorRef = ref(null);
-const emailBoxRef = ref(null);
-const commentBoxRef = ref(null);
-
-function toggleEmailBox() {
-  if (showCommentBox.value) {
-    showCommentBox.value = false;
-  }
-  showEmailBox.value = !showEmailBox.value;
-}
-
-function toggleCommentBox() {
-  if (showEmailBox.value) {
-    showEmailBox.value = false;
-  }
-  showCommentBox.value = !showCommentBox.value;
-}
-
-function submitEmail() {
-  if (emailEditorRef.value.submitMail()) {
-    emit("update");
-  }
-}
-
-function submitComment() {
-  if (commentTextEditorRef.value.submitComment()) {
-    emit("update");
-  }
-}
-
-function splitIfString(str: string | string[]) {
-  if (typeof str === "string") {
-    return str.split(",");
-  }
-  return str;
-}
-
-function replyToEmail(data: object) {
-  showEmailBox.value = true;
-
-  emailEditorRef.value.addToReply(
-    data.content,
-    splitIfString(data.to),
-    splitIfString(data.cc),
-    splitIfString(data.bcc)
-  );
-}
+import { getUserEmailInfo } from "@/composables/useUserEmailInfo";
+import {
+  replyComposer,
+  showCommentBox,
+  showEmailBox,
+  toggleCommentBox,
+  toggleEmailBox,
+} from "@/pages/ticket/modalStates";
+import { useAgentStore } from "@/stores/agent";
+import { useAuthStore } from "@/stores/auth";
+import { __ } from "@/translation";
+import { RenderedSavedReply } from "@/types";
+import {
+  htmlToText,
+  isContentEmpty,
+  removeAttachmentFromServer,
+  uploadFunction,
+} from "@/utils";
+// Deep import: the @framework/ui root barrel would pull the whole library
+// (FormLayout, ListView, …) into the bundle — same pattern as TicketField's
+// Link import.
+import type {
+  CommentPayload,
+  EmailPayload,
+  MentionOption,
+  Recipient,
+} from "@framework/ui/components/Composer/index.ts";
+import {
+  CommentComposer,
+  EmailComposer,
+} from "@framework/ui/components/Composer/index.ts";
+import { onClickOutside, useEventListener, useStorage } from "@vueuse/core";
+import {
+  Avatar,
+  TabButtons,
+  createResource,
+  frappeRequest,
+  toast,
+} from "frappe-ui";
+import { FloatingWindow, type WindowMode } from "frappe-ui/experimental";
+import { useOnboarding } from "frappe-ui/frappe";
+import { storeToRefs } from "pinia";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import LucideMaximize2 from "~icons/lucide/maximize-2";
+import LucideMinimize2 from "~icons/lucide/minimize-2";
+import LucideX from "~icons/lucide/x";
+import ZapIcon from "~icons/lucide/zap";
 
 const props = defineProps({
   doctype: {
@@ -194,24 +263,499 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["update"]);
+// MobileTicketAgent binds v-model="ticket.doc"; keep the model registered.
+const doc = defineModel();
+
+const { isMac } = useDevice();
+const { isMobileView } = useScreenSize();
+const { updateOnboardingStep } = useOnboarding("helpdesk");
+const { isManager, userImage, userName } = useAuthStore();
+const { onUserType, cleanup } = useTyping(props.ticketId);
+
+const rootRef = ref(null);
+const columnRef = ref<HTMLElement | null>(null);
+const emailComposerRef = ref<InstanceType<typeof EmailComposer> | null>(null);
+const commentComposerRef = ref<InstanceType<typeof CommentComposer> | null>(
+  null
+);
+
+// ─── Window state ─────────────────────────────────────────────
+const windowOpen = computed(() => showEmailBox.value || showCommentBox.value);
+const windowMode = ref<WindowMode>("docked");
+
+// A non-docked panel teleports to <body>, so the wrapper's v-show can't hide
+// it: force docked whenever the window is closed or the viewport is mobile.
+watch([windowOpen, isMobileView, windowMode], ([open, mobile, mode]) => {
+  if (mode !== "docked" && (!open || mobile)) {
+    windowMode.value = "docked";
+  }
+});
+
+function closeComposer() {
+  showEmailBox.value = false;
+  showCommentBox.value = false;
+}
+
+// ─── Channel & pill ───────────────────────────────────────────
+// The two show flags stay the source of truth so external writers (Sidebar
+// onboarding, mobile toggles, shortcuts) keep working.
+const channelOptions = [
+  { label: "Email", value: "email" },
+  { label: "Comment", value: "comment" },
+];
+
+const channel = computed({
+  get: () => (showCommentBox.value ? "comment" : "email"),
+  set: (value) => {
+    showEmailBox.value = value === "email";
+    showCommentBox.value = value === "comment";
+  },
+});
+
+const hasEmailDraft = computed(
+  () =>
+    (!isContentEmpty(emailBody.value) && !isOnlySignature(emailBody.value)) ||
+    !!quotedContent.value
+);
+const hasCommentDraft = computed(() => !isContentEmpty(commentBody.value));
+
+function openComposer() {
+  if (hasCommentDraft.value && !hasEmailDraft.value) {
+    showCommentBox.value = true;
+    showEmailBox.value = false;
+    return;
+  }
+  showEmailBox.value = true;
+  showCommentBox.value = false;
+}
+
+// The pill's expand button skips the docked stage and pops straight out
+// (the mode watcher forces docked back on mobile, where it just opens).
+function openFloatingComposer() {
+  openComposer();
+  windowMode.value = "floating";
+}
+
+const minimizedLabel = computed(() => {
+  let draft: string | null = null;
+  if (hasEmailDraft.value) {
+    // Quoted-only drafts (reply started, nothing typed) preview the quote.
+    draft =
+      !isContentEmpty(emailBody.value) && !isOnlySignature(emailBody.value)
+        ? emailBody.value
+        : quotedContent.value;
+  } else if (hasCommentDraft.value) {
+    draft = commentBody.value;
+  }
+  const preview = draft ? htmlToText(draft).trim() : "";
+  return preview || "Send a reply";
+});
+
+// ─── Docked-height resize ─────────────────────────────────────
+// Dragging the title bar sizes the in-flow window by setting an explicit
+// height on our body column — no library hook needed. 0 means natural height.
+// The number default keeps useStorage on the number serializer, so reloads
+// can't rehydrate the value as a string.
+const dockedHeight = useStorage("helpdesk-composer-height", 0);
+
+const MIN_BODY_HEIGHT = 240;
+// Dragging this far below the minimum collapses the window back to the pill.
+const MINIMIZE_OVERDRAG = 60;
+
+const dockedColumnStyle = computed(() =>
+  windowMode.value === "docked" && dockedHeight.value > 0
+    ? { height: `${dockedHeight.value}px` }
+    : undefined
+);
+
+function clampBodyHeight(value: number) {
+  return Math.min(
+    Math.max(value, MIN_BODY_HEIGHT),
+    Math.round(window.innerHeight * 0.8)
+  );
+}
+
+// The live drag; move/up listeners are registered once below and no-op while
+// this is null, so nothing can stack or leak.
+let resizing: { startY: number; startHeight: number } | null = null;
+// A pointer released outside the window must not count as an outside click.
+let justResized = false;
+
+// Bound on <FloatingWindow>, so it lands on the panel root and catches
+// pointerdowns bubbling from the built-in title bar. The column containment
+// test limits the resize surface to the chrome without naming its internals;
+// the button filter matches the library's own drag bail-out.
+function onPanelPointerDown(event: PointerEvent) {
+  if (windowMode.value !== "docked" || isMobileView.value) return;
+  const target = event.target as HTMLElement;
+  if (target.closest("button, a, input, select, textarea, [role='button']"))
+    return;
+  if (columnRef.value?.contains(target)) return;
+  event.preventDefault();
+  startDockedResize(event);
+}
+
+function startDockedResize(event: PointerEvent) {
+  resizing = {
+    startY: event.clientY,
+    startHeight: currentBodyHeight(),
+  };
+  // Best-effort: a successful capture keeps the post-drag click inside the
+  // panel; synthetic pointers without an id fall back to the guard flag.
+  try {
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  } catch {}
+}
+
+function currentBodyHeight() {
+  return dockedHeight.value || columnRef.value?.offsetHeight || MIN_BODY_HEIGHT;
+}
+
+function resizeDockedBy(delta: number) {
+  dockedHeight.value = clampBodyHeight(currentBodyHeight() + delta);
+}
+
+useEventListener(window, "pointermove", (event: PointerEvent) => {
+  if (!resizing) return;
+  const next = resizing.startHeight + (resizing.startY - event.clientY);
+  if (next < MIN_BODY_HEIGHT - MINIMIZE_OVERDRAG) {
+    // Dragged well past the floor: collapse to the pill, keeping the pre-drag
+    // height so reopening restores it.
+    const previous = resizing.startHeight;
+    stopDockedResize();
+    dockedHeight.value = clampBodyHeight(previous);
+    closeComposer();
+    return;
+  }
+  dockedHeight.value = clampBodyHeight(next);
+});
+useEventListener(window, "pointerup", stopDockedResize);
+useEventListener(window, "pointercancel", stopDockedResize);
+
+function stopDockedResize() {
+  if (!resizing) return;
+  resizing = null;
+  justResized = true;
+  // The click event fires after pointerup; lift the guard a task later.
+  setTimeout(() => (justResized = false), 0);
+}
+
+// ─── Email draft & signature ──────────────────────────────────
+const cachedEmail = useStorage<string | null>(
+  "emailBoxContent" + props.ticketId,
+  null
+);
+const emailBody = ref<string>(cachedEmail.value ?? "");
+const quotedContent = useStorage<string | null>(
+  "quotedEmailBoxContent" + props.ticketId,
+  null
+);
+const emailSignature = ref<string | null>(null);
+
+function isOnlySignature(content: string | null) {
+  if (!content || !emailSignature.value) return false;
+  return htmlToText(content) === htmlToText(emailSignature.value);
+}
+
+const userResource = getUserEmailInfo();
+
 watch(
-  () => showEmailBox.value,
-  (value) => {
-    if (value) {
-      emailEditorRef.value?.editor?.commands?.focus("start");
+  () => userResource.data,
+  (data: { email_signature?: string } | null) => {
+    if (!data?.email_signature) return;
+    emailSignature.value = `<br>${data.email_signature}`;
+    if (isOnlySignature(cachedEmail.value)) {
+      cachedEmail.value = null;
     }
+    if (isContentEmpty(emailBody.value) && !quotedContent.value) {
+      emailBody.value = emailSignature.value;
+    }
+  },
+  { immediate: true }
+);
+
+watch(emailBody, (value, oldValue) => {
+  if (value !== oldValue && value) {
+    onUserType();
+  }
+  // Only the composer's internal Discard/Esc reset the model to exactly "";
+  // deleting text by hand leaves an empty paragraph. A discarded draft takes
+  // its staged saved-reply actions with it.
+  if (!value) {
+    savedReplyActionsRef.value?.clear();
   }
+  cachedEmail.value = isOnlySignature(value) ? null : value || null;
+});
+
+// ─── Sender identities ────────────────────────────────────────
+const fromEmail = useStorage<string>("from-email", "");
+
+const outgoingEmails = computed<{ email_account: string; email_id: string }[]>(
+  () => userResource.data?.outgoing_emails ?? []
 );
 
+const senders = computed<Recipient[]>(() => {
+  if (!outgoingEmails.value.length) return [];
+  if (
+    outgoingEmails.value.length === 1 &&
+    outgoingEmails.value[0].email_id === userResource.data?.email
+  )
+    return [];
+  return outgoingEmails.value.map((e) => ({
+    label: e.email_account + " <" + e.email_id + ">",
+    email: e.email_id,
+  }));
+});
+
+const hasMultipleSenders = computed(() => senders.value.length > 1);
+
 watch(
-  () => showCommentBox.value,
-  (value) => {
-    if (value) {
-      commentTextEditorRef.value?.editor?.commands?.focus();
+  senders,
+  (options) => {
+    if (!options.find((option) => option.email === fromEmail.value)) {
+      fromEmail.value = options.length ? options[0].email : "";
     }
+  },
+  { immediate: true }
+);
+
+// ─── Recipients ───────────────────────────────────────────────
+function toRecipientList(emails: unknown[] | undefined): Recipient[] {
+  return (emails ?? []).filter(Boolean).map((email) => ({
+    email: String(email),
+  }));
+}
+
+const to = ref<Recipient[]>([]);
+const cc = ref<Recipient[]>([]);
+const bcc = ref<Recipient[]>([]);
+
+function resetRecipients() {
+  to.value = toRecipientList(props.toEmails);
+  cc.value = toRecipientList(props.ccEmails);
+  bcc.value = toRecipientList(props.bccEmails);
+}
+resetRecipients();
+
+// Plain request, not createResource: RecipientSelect evaluates this inside a
+// computedAsync, and touching a reactive resource there re-triggers evaluation
+// forever.
+async function searchRecipients(query: string): Promise<Recipient[]> {
+  const contacts = await frappeRequest<
+    { full_name?: string; name: string; email_id: string }[]
+  >({
+    url: "/api/method/helpdesk.api.contact.search_contacts",
+    method: "GET",
+    params: { txt: query },
+  });
+  return (contacts ?? []).map(
+    (contact: { full_name?: string; name: string; email_id: string }) => ({
+      email: contact.email_id,
+      label: contact.full_name || contact.name || contact.email_id,
+    })
+  );
+}
+
+// ─── Attachments ──────────────────────────────────────────────
+function uploadFile(file: File) {
+  return uploadFunction(file, props.doctype, props.ticketId);
+}
+
+// ─── Saved replies ────────────────────────────────────────────
+const showSavedRepliesSelectorModal = ref(false);
+const savedReplyActionsRef = ref<InstanceType<typeof SavedReplyActions>>();
+
+/** A reply is only replaced when another one is already applied. */
+function applySavedReplies(reply: RenderedSavedReply) {
+  const staged = savedReplyActionsRef.value?.stagedSummary();
+  if (!staged) {
+    insertSavedReply(reply);
+    return;
   }
+  createDialog({
+    title: __("Replace saved reply"),
+    message: __(
+      'Applying "{0}" discards the reply you have now, along with its {1} action(s).',
+      [reply.title, staged.count]
+    ),
+    actions: [
+      { label: __("Cancel") },
+      {
+        label: __("Replace"),
+        variant: "solid",
+        onClick: ({ close }: { close: () => void }) => {
+          replaceSavedReply(reply);
+          close();
+        },
+      },
+    ],
+  });
+}
+
+/** First reply of a draft: added to whatever the agent has already written. */
+function insertSavedReply(reply: RenderedSavedReply) {
+  const editor = emailComposerRef.value?.editor;
+  if (!editor) return;
+  editor.chain().focus("start").insertContent(reply.message).run();
+  savedReplyActionsRef.value?.add(reply);
+}
+
+/** Confirmed replace: the new reply's body and actions stand alone. */
+function replaceSavedReply(reply: RenderedSavedReply) {
+  emailBody.value = reply.message + (emailSignature.value ?? "");
+  savedReplyActionsRef.value?.add(reply);
+  nextTick(() => emailComposerRef.value?.focus());
+}
+
+// ─── Send email ───────────────────────────────────────────────
+const sendMail = createResource({
+  url: "run_doc_method",
+  debounce: 300,
+  onSuccess: () => {
+    savedReplyActionsRef.value?.submit();
+    // reset() clears the to/cc/bcc models itself, so re-seed after it.
+    emailComposerRef.value?.reset();
+    resetRecipients();
+    emailBody.value = emailSignature.value ?? "";
+    showEmailBox.value = false;
+    emit("update");
+    if (isManager) {
+      updateOnboardingStep("reply_on_ticket");
+    }
+  },
+});
+
+const emailSubmitLabel = computed(() => {
+  if (sendMail.loading) return "Sending...";
+  return isMobileView.value
+    ? "Send"
+    : isMac
+    ? "Send (⌘ + ⏎)"
+    : "Send (Ctrl + ⏎)";
+});
+
+function onEmailSubmit(payload: EmailPayload) {
+  if (sendMail.loading) return;
+  const { to, cc, bcc } = payload;
+  if (!to.length && !cc.length && !bcc.length) {
+    toast.warning(
+      "Email has no recipients. Please add at least one recipient (To, Cc, or Bcc) before sending."
+    );
+    return;
+  }
+  // The composer already appended the quoted block to `body` in the exact
+  // wire format reply_via_agent expects; a failed send leaves the draft
+  // untouched because nothing is cleared until onSuccess.
+  sendMail.submit({
+    dt: props.doctype,
+    dn: props.ticketId,
+    method: "reply_via_agent",
+    args: {
+      attachments: payload.attachments.map((file) => file.name),
+      from_email: outgoingEmails.value.find((e) => e.email_id === payload.from),
+      to: to.map((recipient) => recipient.email).join(","),
+      cc: cc.map((recipient) => recipient.email).join(","),
+      bcc: bcc.map((recipient) => recipient.email).join(","),
+      message: payload.body,
+    },
+  });
+}
+
+// ─── Comment ──────────────────────────────────────────────────
+const commentBody = useStorage<string | null>(
+  "commentBoxContent" + props.ticketId,
+  null
 );
 
+const { agents: agentsList, dropdown } = storeToRefs(useAgentStore());
+const mentionOptions = computed<MentionOption[]>(() => dropdown.value ?? []);
+
+const sendComment = createResource({
+  url: "run_doc_method",
+  onSuccess: () => {
+    commentComposerRef.value?.reset();
+    showCommentBox.value = false;
+    emit("update");
+    if (isManager) {
+      updateOnboardingStep("comment_on_ticket");
+    }
+  },
+});
+
+const commentSubmitLabel = computed(() => {
+  if (sendComment.loading) return "Commenting...";
+  return isMobileView.value
+    ? "Comment"
+    : isMac
+    ? "Comment (⌘ + ⏎)"
+    : "Comment (Ctrl + ⏎)";
+});
+
+function onCommentSubmit(payload: CommentPayload) {
+  if (sendComment.loading) return;
+  sendComment.submit({
+    dt: props.doctype,
+    dn: props.ticketId,
+    method: "new_comment",
+    args: {
+      content: payload.body,
+      attachments: payload.attachments,
+    },
+  });
+}
+
+watch(commentBody, (value, oldValue) => {
+  if (value !== oldValue && value) {
+    onUserType();
+  }
+});
+
+// ─── Reply from the activity feed ─────────────────────────────
+function splitIfString(value: string | string[]) {
+  if (typeof value === "string") {
+    return value.split(",");
+  }
+  return value;
+}
+
+function replyToEmail(data: {
+  content: string;
+  to: string | string[];
+  cc: string | string[];
+  bcc: string | string[];
+}) {
+  showCommentBox.value = false;
+  showEmailBox.value = true;
+
+  to.value = toRecipientList(splitIfString(data.to));
+  cc.value = toRecipientList(splitIfString(data.cc));
+  bcc.value = toRecipientList(splitIfString(data.bcc));
+
+  // Plain-text emails (e.g. Thunderbird) have no HTML tags, so their
+  // newlines/spacing would be lost in the quoted block.
+  let body = data.content;
+  const parsed = new DOMParser().parseFromString(body, "text/html");
+  if (parsed.body.children.length === 0) {
+    body = `<div style="white-space: pre-wrap; line-height: 1.5">${parsed.body.innerHTML}</div>`;
+  }
+  quotedContent.value = body;
+
+  nextTick(() => {
+    emailBody.value = emailSignature.value ?? "";
+    emailComposerRef.value?.focus();
+  });
+}
+
+// ─── Open/close behavior ──────────────────────────────────────
+watch(showEmailBox, (open) => {
+  if (open) nextTick(() => emailComposerRef.value?.focus());
+});
+
+watch(showCommentBox, (open) => {
+  if (open) nextTick(() => commentComposerRef.value?.focus());
+});
+
 useShortcut("r", () => {
   toggleEmailBox();
 });
@@ -219,21 +763,14 @@ useShortcut("c", () => {
   toggleCommentBox();
 });
 
-defineExpose({
-  replyToEmail,
-  toggleEmailBox,
-  toggleCommentBox,
-  editor: emailEditorRef,
-});
-
 const IGNORED_SELECTORS = [
-  ".tippy-box",
   ".tippy-content",
   ".PopoverContent",
   '[role="dialog"]',
   '[role="presentation"]',
   '[role="menu"]',
   ".dialog-overlay",
+  "[data-reka-popper-content-wrapper]",
 ];
 
 // `ignore` is only consulted on pointerdown, which dialogs stop, so the click
@@ -244,48 +781,65 @@ function isIgnored(event: Event): boolean {
 }
 
 onClickOutside(
-  emailBoxRef,
+  rootRef,
   (event) => {
-    if (showEmailBox.value && !isIgnored(event)) {
-      showEmailBox.value = false;
-    }
+    // A floating window lives outside the page flow — only the docked
+    // composer closes on outside clicks.
+    if (windowMode.value !== "docked") return;
+    if (justResized) return;
+    if (isIgnored(event)) return;
+    closeComposer();
   },
   {
     ignore: IGNORED_SELECTORS,
   }
 );
 
-onClickOutside(
-  commentBoxRef,
-  (event) => {
-    if (showCommentBox.value && !isIgnored(event)) {
-      showCommentBox.value = false;
-    }
-  },
-  {
-    ignore: IGNORED_SELECTORS,
+onMounted(() => {
+  // Published for the command palette, which opens the email box itself
+  // before inserting. See modalStates.ts.
+  replyComposer.value = applySavedReplies;
+  if (
+    agentsList.value.loading ||
+    agentsList.value.data?.length ||
+    agentsList.value.list.promise
+  ) {
+    return;
   }
-);
+  agentsList.value.fetch();
+});
+
+onBeforeUnmount(() => {
+  replyComposer.value = null;
+  cleanup();
+  if (isContentEmpty(commentBody.value)) {
+    localStorage.removeItem("commentBoxContent" + props.ticketId);
+  }
+});
+
+defineExpose({
+  replyToEmail,
+  toggleEmailBox,
+  toggleCommentBox,
+});
 </script>
 
 <style>
-@media screen and (max-width: 640px) {
-  .comm-area {
-    width: 100vw;
-  }
+/* When the window's height is fixed (floating, or docked at a dragged height),
+   release the editor's internal 50vh cap so it fills and the toolbar pins to
+   the bottom. `.overflow-y-auto` matches exactly one element inside the
+   window: ComposerEditor's scroll region. */
+.ticket-composer-window[data-state="floating"] .overflow-y-auto,
+.ticket-composer-window.composer-resized[data-state="docked"] .overflow-y-auto {
+  max-height: none;
 }
 
-.slide-enter-active,
-.slide-leave-active {
-  display: grid;
-  transition: grid-template-rows 0.25s ease;
-}
-.slide-enter-from,
-.slide-leave-to {
-  grid-template-rows: 0fr;
-}
-.slide-enter-to,
-.slide-leave-from {
-  grid-template-rows: 1fr;
+/* The built-in title bar doubles as the docked resize surface. Positional
+   selector into the library chrome; worst case on a library change is a wrong
+   cursor, nothing functional. */
+@media (min-width: 640px) {
+  .ticket-composer-window[data-state="docked"] > div:first-child {
+    cursor: ns-resize;
+  }
 }
 </style>
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
deleted file mode 100644
index bceb810bfb..0000000000
--- a/desk/src/components/EmailEditor.vue
+++ /dev/null
@@ -1,691 +0,0 @@
-<template>
-  <Editor
-    ref="editorRef"
-    v-model="newEmail"
-    :placeholder="placeholder"
-    :editable="editable"
-    :extensions="extensions"
-    :upload-function="(file:any)=>uploadFunction(file, doctype, ticketId)"
-  >
-    <template #default>
-      <div @keydown.capture="handleKeydown">
-        <!-- Email headers -->
-        <div
-          v-if="hasMultipleSenders"
-          class="mx-6 md:mx-5 flex items-center gap-2 border-t py-2.5 h-12.5"
-        >
-          <span class="text-p-xs text-ink-gray-4">{{ __("From") }}:</span>
-          <FormControl
-            v-model="fromEmail"
-            type="select"
-            variant="ghost"
-            class="w-full"
-            :placeholder="__('')"
-            :options="from"
-          />
-        </div>
-        <div class="mx-6 md:mx-5 flex items-center gap-2 border-y py-2.5">
-          <span class="text-p-xs text-ink-gray-4">{{ __("To") }}:</span>
-          <EmailMultiSelect
-            v-model="toEmailsClone"
-            class="flex-1"
-            scope="contact"
-            variant="ghost"
-            allow-custom-email
-            copy-on-click
-            :validate="validateEmailWithZod"
-            :custom-email-label="__('Add to recipients')"
-          />
-          <div class="flex gap-1.5">
-            <Button
-              :label="__('Cc')"
-              variant="ghost"
-              :class="[
-                cc || showCC
-                  ? '!bg-surface-gray-4 hover:bg-surface-gray-3'
-                  : '!text-ink-gray-4',
-              ]"
-              @click="toggleCC()"
-            />
-            <Button
-              :label="__('Bcc')"
-              variant="ghost"
-              :class="[
-                bcc || showBCC
-                  ? '!bg-surface-gray-4 hover:bg-surface-gray-3'
-                  : '!text-ink-gray-4',
-              ]"
-              @click="toggleBCC()"
-            />
-          </div>
-        </div>
-        <div
-          v-if="showCC || cc"
-          class="mx-5 flex items-center gap-2 py-2.5"
-          :class="cc || showCC ? 'border-b' : ''"
-        >
-          <span class="text-xs text-ink-gray-4">{{ __("Cc:") }}</span>
-          <EmailMultiSelect
-            ref="ccInput"
-            v-model="ccEmailsClone"
-            class="flex-1"
-            scope="contact"
-            variant="ghost"
-            allow-custom-email
-            copy-on-click
-            :validate="validateEmailWithZod"
-            :custom-email-label="__('Add to recipients')"
-          />
-        </div>
-        <div
-          v-if="showBCC || bcc"
-          class="mx-5 flex items-center gap-2 py-2.5"
-          :class="bcc || showBCC ? 'border-b' : ''"
-        >
-          <span class="text-xs text-ink-gray-4">{{ __("Bcc:") }}</span>
-          <EmailMultiSelect
-            ref="bccInput"
-            v-model="bccEmailsClone"
-            class="flex-1"
-            scope="contact"
-            variant="ghost"
-            allow-custom-email
-            copy-on-click
-            :validate="validateEmailWithZod"
-            :custom-email-label="__('Add to recipients')"
-          />
-        </div>
-
-        <!-- Editor content + quoted reply -->
-        <div class="overflow-y-auto min-h-[7rem] max-h-[30vh] flex flex-col">
-          <div class="flex-1">
-            <EditorContent
-              :class="[
-                'prose-sm max-w-full mx-6 md:mx-5 py-3',
-                getFontFamily(newEmail),
-                '[&_p.reply-to-content]:hidden',
-              ]"
-            />
-          </div>
-          <div
-            v-if="quotedContent"
-            class="replied-content mx-6 md:mx-5 mb-2 mt-auto"
-          >
-            <label class="collapse" for="quoted-toggle">...</label>
-            <input
-              id="quoted-toggle"
-              class="replyCollapser"
-              type="checkbox"
-              :checked="isQuoteExpanded"
-            />
-            <div
-              ref="quotedContentRef"
-              contenteditable="true"
-              class="prose !max-w-full mx-1 my-2 border-s-4 border-outline-gray-2 ps-4 text-sm focus:outline-none"
-              @input="onQuotedInput"
-            />
-          </div>
-        </div>
-
-        <!-- Attachments -->
-        <AttachmentList
-          class="px-5 my-2"
-          :attachments="attachments"
-          @remove="removeAttachment"
-        />
-        <!-- Saved reply actions, applied once the reply is sent -->
-        <SavedReplyActions
-          ref="savedReplyActionsRef"
-          class="mx-5 my-2"
-          :ticket-id="ticketId"
-          :doctype="doctype"
-        />
-        <!-- Fixed Menu -->
-        <div
-          class="flex justify-between overflow-scroll px-4 py-2.5 items-center border-t"
-        >
-          <div class="flex items-center overflow-x-auto w-[60%]">
-            <div class="inline-flex items-center gap-1.5 p-1">
-              <FileUploader
-                :upload-args="{
-                  doctype: doctype,
-                  docname: ticketId,
-                  private: true,
-                }"
-                @success="
-                  (f) => {
-                    attachments.push(f);
-                  }
-                "
-              >
-                <template #default="{ openFileSelector, uploading }">
-                  {{ void (isUploading = uploading) }}
-                  <Tooltip :text="__('Attach file')">
-                    <button
-                      class="flex rounded p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
-                      @click="openFileSelector()"
-                      :disabled="uploading"
-                    >
-                      <LoadingIndicator v-if="uploading" class="h-4 w-4" />
-                      <AttachmentIcon
-                        v-else
-                        class="h-4 w-4"
-                        style="stroke-width: 1.5 !important"
-                      />
-                    </button>
-                  </Tooltip>
-                </template>
-              </FileUploader>
-              <Tooltip :text="__('Saved replies')">
-                <button
-                  class="flex rounded p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
-                  @click="showSavedRepliesSelectorModal = true"
-                >
-                  <ZapIcon class="h-4 w-4" />
-                </button>
-              </Tooltip>
-              <div class="h-4 w-[2px] border-s ml-1" />
-            </div>
-            <EditorFixedMenu :items="fullToolbar" />
-          </div>
-          <div class="flex items-center justify-end gap-x-2 sm:mt-0 w-[40%]">
-            <Button label="Discard" @click="handleDiscard" />
-            <Button
-              variant="solid"
-              :disabled="isDisabled"
-              :loading="sendMail.loading"
-              :label="label"
-              @click="
-                () => {
-                  submitMail();
-                }
-              "
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-  </Editor>
-  <SavedRepliesSelectorModal
-    v-model="showSavedRepliesSelectorModal"
-    :doctype="doctype"
-    @apply="applySavedReplies"
-    :ticketId="ticketId"
-  />
-</template>
-
-<script setup lang="ts">
-import { AttachmentList, SavedRepliesSelectorModal } from "@/components";
-import { buildEditorExtensions, fullToolbar } from "@/components/editor/config";
-import EmailMultiSelect from "@/components/EmailMultiSelect.vue";
-import { createDialog } from "@/components/dialogs";
-import { AttachmentIcon } from "@/components/icons";
-import SavedReplyActions from "@/components/SavedReplyActions/SavedReplyActions.vue";
-import { useTyping } from "@/composables/realtime";
-import { getUserEmailInfo } from "@/composables/useUserEmailInfo";
-import { replyComposer } from "@/pages/ticket/modalStates";
-import { useAuthStore } from "@/stores/auth";
-import { __ } from "@/translation";
-import { RenderedSavedReply } from "@/types";
-import {
-  getFontFamily,
-  htmlToText,
-  isContentEmpty,
-  removeAttachmentFromServer,
-  uploadFunction,
-  validateEmailWithZod,
-} from "@/utils";
-import { useStorage } from "@vueuse/core";
-import {
-  FileUploader,
-  LoadingIndicator,
-  Tooltip,
-  createResource,
-  toast,
-} from "frappe-ui";
-import { Editor, EditorContent, EditorFixedMenu } from "frappe-ui/editor";
-import { useOnboarding } from "frappe-ui/frappe";
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
-import ZapIcon from "~icons/lucide/zap";
-
-// ─── Props & Emits ────────────────────────────────────────────
-const props = defineProps({
-  ticketId: {
-    type: String,
-    default: null,
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  label: {
-    type: String,
-    default: "Send",
-  },
-  editable: {
-    type: Boolean,
-    default: true,
-  },
-  doctype: {
-    type: String,
-    default: "HD Ticket",
-  },
-  toEmails: {
-    type: Array,
-    default: () => [],
-  },
-  ccEmails: {
-    type: Array,
-    default: () => [],
-  },
-  bccEmails: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(["submit", "discard"]);
-
-const { updateOnboardingStep } = useOnboarding("helpdesk");
-const { isManager } = useAuthStore();
-const { onUserType, cleanup } = useTyping(props.ticketId);
-
-const extensions = buildEditorExtensions();
-
-const editorRef = ref(null);
-const editor = computed(() => editorRef.value?.editor);
-
-function focusEditorAtStart() {
-  setTimeout(() => {
-    editorRef.value?.editor?.commands?.focus("start");
-  }, 0);
-}
-
-const cachedEmail = useStorage<null | string>(
-  "emailBoxContent" + props.ticketId,
-  null
-);
-
-const newEmail = ref<null | string>(cachedEmail.value);
-
-const emailSignature = ref<string | null>(null);
-
-function isOnlySignature(content: string | null) {
-  if (!content || !emailSignature.value) return false;
-  return htmlToText(content) === htmlToText(emailSignature.value);
-}
-
-const userResource = getUserEmailInfo();
-
-const quotedContent = useStorage<null | string>(
-  "quotedEmailBoxContent" + props.ticketId,
-  null
-);
-const quotedContentRef = ref<HTMLElement | null>(null);
-const isQuoteExpanded = ref(false);
-
-function onQuotedInput() {
-  const el = quotedContentRef.value;
-  if (!el) return;
-  quotedContent.value = el.innerHTML || null;
-}
-
-const toEmailsClone = ref([...props.toEmails]);
-const ccEmailsClone = ref([...props.ccEmails]);
-const bccEmailsClone = ref([...props.bccEmails]);
-const showCC = ref(false);
-const showBCC = ref(false);
-const cc = computed(() => (ccEmailsClone.value?.length ? true : false));
-const bcc = computed(() => (bccEmailsClone.value?.length ? true : false));
-const ccInput = ref(null);
-const bccInput = ref(null);
-
-function toggleCC() {
-  showCC.value = !showCC.value;
-  showCC.value &&
-    nextTick(() => {
-      ccInput.value.setFocus();
-    });
-}
-
-function toggleBCC() {
-  showBCC.value = !showBCC.value;
-  showBCC.value &&
-    nextTick(() => {
-      bccInput.value.setFocus();
-    });
-}
-
-const fromEmail = useStorage<string | "">("from-email", "");
-
-const outgoingEmails = computed<{ email_account: string; email_id: string }[]>(
-  () => userResource.data?.outgoing_emails ?? []
-);
-
-// selected mail from the outgoing emails list
-const selectedFromEmail = computed(() =>
-  outgoingEmails.value.find((e) => e.email_id === fromEmail.value)
-);
-
-const from = computed(() => {
-  if (!outgoingEmails.value.length) return [];
-  if (
-    outgoingEmails.value.length === 1 &&
-    outgoingEmails.value[0].email_id === userResource.data?.email
-  )
-    return [];
-  return outgoingEmails.value.map((e) => ({
-    label: e.email_account + " <" + e.email_id + ">",
-    value: e.email_id,
-  }));
-});
-
-const hasMultipleSenders = computed(() => (from?.value.length ?? 0) > 1);
-
-const attachments = ref([]);
-const isUploading = ref(false);
-
-async function removeAttachment(attachment) {
-  attachments.value = attachments.value.filter((a) => a !== attachment);
-  await removeAttachmentFromServer(attachment.name);
-}
-
-const showSavedRepliesSelectorModal = ref(false);
-const savedReplyActionsRef = ref<InstanceType<typeof SavedReplyActions>>();
-
-/** A reply is only replaced when another one is already applied. */
-function applySavedReplies(reply: RenderedSavedReply) {
-  const staged = savedReplyActionsRef.value?.stagedSummary();
-  if (!staged) {
-    insertSavedReply(reply);
-    return;
-  }
-  createDialog({
-    title: __("Replace saved reply"),
-    message: __(
-      'Applying "{0}" discards the reply you have now, along with its {1} action(s).',
-      [reply.title, staged.count]
-    ),
-    actions: [
-      { label: __("Cancel") },
-      {
-        label: __("Replace"),
-        variant: "solid",
-        onClick: ({ close }: { close: () => void }) => {
-          replaceSavedReply(reply);
-          close();
-        },
-      },
-    ],
-  });
-}
-
-/** First reply of a draft: added to whatever the agent has already written. */
-function insertSavedReply(reply: RenderedSavedReply) {
-  const textEditor = editorRef.value?.editor;
-  if (!textEditor) return;
-  textEditor.chain().focus("start").insertContent(reply.message).run();
-  savedReplyActionsRef.value?.add(reply);
-}
-
-/** Confirmed replace: the new reply's body and actions stand alone. */
-function replaceSavedReply(reply: RenderedSavedReply) {
-  newEmail.value = reply.message + (emailSignature.value ?? "");
-  savedReplyActionsRef.value?.add(reply);
-  focusEditorAtStart();
-}
-
-const sendMail = createResource({
-  url: "run_doc_method",
-  makeParams: () => ({
-    dt: props.doctype,
-    dn: props.ticketId,
-    method: "reply_via_agent",
-    args: {
-      attachments: attachments.value.map((x) => x.name),
-      from_email: selectedFromEmail.value,
-      to: toEmailsClone.value.join(","),
-      cc: ccEmailsClone.value?.join(","),
-      bcc: bccEmailsClone.value?.join(","),
-      message:
-        newEmail.value +
-        (quotedContentRef.value
-          ? `<p class="reply-to-content"></p><blockquote>${quotedContentRef.value.innerHTML}</blockquote>`
-          : ""),
-    },
-  }),
-  onSuccess: () => {
-    savedReplyActionsRef.value?.submit();
-    resetState();
-    emit("submit");
-
-    if (isManager) {
-      updateOnboardingStep("reply_on_ticket");
-    }
-  },
-  debounce: 300,
-});
-
-const label = computed(() => (sendMail.loading ? "Sending..." : props.label));
-
-const isDisabled = computed(
-  () =>
-    (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) ||
-    sendMail.loading ||
-    isUploading.value
-);
-
-function submitMail() {
-  if (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) {
-    return false;
-  }
-  if (
-    !toEmailsClone.value.length &&
-    !ccEmailsClone.value.length &&
-    !bccEmailsClone.value.length
-  ) {
-    toast.warning(
-      "Email has no recipients. Please add at least one recipient (To, Cc, or Bcc) before sending."
-    );
-    return false;
-  }
-
-  sendMail.submit();
-}
-
-function getInitialContent() {
-  return emailSignature.value ? emailSignature.value : "<p></p>";
-}
-
-function addToReply(
-  body: string,
-  toEmails: string[],
-  ccEmails: string[],
-  bccEmails: string[]
-) {
-  toEmailsClone.value = toEmails;
-  ccEmailsClone.value = ccEmails;
-  bccEmailsClone.value = bccEmails;
-
-  // Plain-text emails (e.g. Thunderbird) have no HTML tags, so their newlines/spacing
-  // thus lose formatting when added to replied content
-  const doc = new DOMParser().parseFromString(body, "text/html");
-  if (doc.body.children.length === 0) {
-    body = `<div style="white-space: pre-wrap; line-height: 1.5">${doc.body.innerHTML}</div>`;
-  }
-
-  if (body !== quotedContent.value) {
-    //trigger change for watch when replied to body data is different from current quoted content
-    quotedContent.value = null;
-    isQuoteExpanded.value = false;
-    nextTick(() => {
-      quotedContent.value = body;
-    });
-  }
-
-  nextTick(() => {
-    newEmail.value = getInitialContent();
-  });
-  focusEditorAtStart();
-}
-
-// Staged actions are left to `submit()`, which unstages them either way
-function resetState() {
-  newEmail.value = emailSignature.value ? emailSignature.value : null;
-  attachments.value = [];
-  quotedContent.value = null;
-  isQuoteExpanded.value = false;
-  focusEditorAtStart();
-}
-
-function handleDiscard() {
-  attachments.value = [];
-  savedReplyActionsRef.value?.clear();
-  newEmail.value = getInitialContent();
-  quotedContent.value = null;
-  ccEmailsClone.value = [];
-  bccEmailsClone.value = [];
-  showCC.value = false;
-  showBCC.value = false;
-  isQuoteExpanded.value = false;
-
-  focusEditorAtStart();
-  emit("discard");
-}
-
-function handleSelectAll(e: KeyboardEvent) {
-  const active = document.activeElement;
-  const editorContext = editorRef.value?.editor;
-  const editorDom = editorContext?.view?.dom as HTMLElement | undefined;
-  const quotedEl = quotedContentRef.value;
-  const sel = window.getSelection();
-  if (!sel || !editorDom) return;
-  if (!editorDom.contains(active) && !(quotedEl && quotedEl.contains(active))) {
-    return;
-  }
-  e.preventDefault();
-  editorContext?.commands.selectAll();
-  sel.removeAllRanges();
-  const range = document.createRange();
-
-  if (quotedEl) {
-    range.setStartBefore(editorDom);
-    range.setEndAfter(quotedEl);
-  } else {
-    range.selectNodeContents(editorDom);
-  }
-  sel.addRange(range);
-}
-
-function handleDelete(e: KeyboardEvent) {
-  const sel = window.getSelection();
-  const quotedEl = quotedContentRef.value;
-  const editorDom = editorRef.value?.editor?.view?.dom as
-    | HTMLElement
-    | undefined;
-
-  if (!sel || sel.isCollapsed || !quotedEl || !editorDom) return;
-
-  const isSelectingEntireEditor = sel.containsNode(editorDom, true);
-  const isSelectingEntireQuote = sel.containsNode(quotedEl, true);
-
-  if (isSelectingEntireEditor && isSelectingEntireQuote) {
-    e.preventDefault();
-
-    editorRef.value?.editor?.commands?.clearContent();
-    newEmail.value = null;
-    quotedContent.value = null;
-
-    sel.removeAllRanges();
-  }
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  const key = e.key.toLowerCase();
-
-  if ((e.metaKey || e.ctrlKey) && key === "a") {
-    isQuoteExpanded.value = true;
-    handleSelectAll(e);
-    return;
-  }
-
-  if (key === "backspace" || key === "delete") {
-    handleDelete(e);
-    return;
-  }
-}
-
-watch(newEmail, (newValue, oldValue) => {
-  if (newValue !== oldValue && newValue) {
-    onUserType();
-  }
-  cachedEmail.value = isOnlySignature(newValue) ? null : newValue;
-});
-
-watch(quotedContent, (newVal, oldVal) => {
-  if (!oldVal && newVal) {
-    nextTick(() => {
-      if (quotedContentRef.value) {
-        quotedContentRef.value.innerHTML = newVal;
-      }
-    });
-  }
-});
-
-watch(
-  () => userResource.data,
-  (data: { email_signature?: string } | null) => {
-    if (!data?.email_signature) return;
-    emailSignature.value = `<br>${data.email_signature}`;
-    if (isOnlySignature(cachedEmail.value)) {
-      cachedEmail.value = null;
-    }
-    if (isContentEmpty(newEmail.value) && !quotedContent.value) {
-      newEmail.value = emailSignature.value;
-      focusEditorAtStart();
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  from,
-  (fromOptions) => {
-    if (!fromOptions.find((f) => f.value === fromEmail.value)) {
-      fromEmail.value = fromOptions.length ? fromOptions[0].value : "";
-    }
-  },
-  { immediate: true }
-);
-
-onMounted(() => {
-  // Published for the command palette, which cannot reach `editorRef` from
-  // module scope. See modalStates.ts.
-  replyComposer.value = applySavedReplies;
-  if (quotedContent.value) {
-    nextTick(() => {
-      if (quotedContentRef.value) {
-        quotedContentRef.value.innerHTML = quotedContent.value;
-      }
-    });
-  }
-});
-
-onBeforeUnmount(() => {
-  replyComposer.value = null;
-  cleanup();
-});
-
-defineExpose({
-  addToReply,
-  editor,
-  submitMail,
-});
-</script>
diff --git a/desk/src/components/index.ts b/desk/src/components/index.ts
index e3c82c6de2..d970337116 100644
--- a/desk/src/components/index.ts
+++ b/desk/src/components/index.ts
@@ -3,10 +3,8 @@ export { default as AttachmentItem } from "./AttachmentItem.vue";
 export { default as AttachmentList } from "./AttachmentList.vue";
 export { default as Autocomplete } from "./Autocomplete.vue";
 export { default as CommentBox } from "./CommentBox.vue";
-export { default as CommentTextEditor } from "./CommentTextEditor.vue";
 export { default as CommunicationArea } from "./CommunicationArea.vue";
 export { default as EmailArea } from "./EmailArea.vue";
-export { default as EmailEditor } from "./EmailEditor.vue";
 export { default as FadedScrollableDiv } from "./FadedScrollableDiv.vue";
 export { default as AutocompleteNew } from "./frappe-ui/Autocomplete.vue";
 export { default as Link } from "./frappe-ui/Link.vue";
diff --git a/desk/src/index.css b/desk/src/index.css
index d313c0b94a..2e2f6125cc 100644
--- a/desk/src/index.css
+++ b/desk/src/index.css
@@ -27,6 +27,13 @@
   display: none !important;
 }
 
+/* Dialogs (e.g. saved replies) must sit above a detached FloatingWindow
+   (z-50); the frappe-ui overlay has no z-index of its own. Deletable once
+   frappe-ui is ≥ beta.55, where the window drops to z-40 under dialogs. */
+body.has-floating-window .dialog-overlay {
+  z-index: 100;
+}
+
 html,
 body {
   color: var(--ink-gray-9);