diff --git a/frontend/src/app/(app)/tickets/[id]/page.tsx b/frontend/src/app/(app)/tickets/[id]/page.tsx
index 6073429..6086b8c 100644
--- a/frontend/src/app/(app)/tickets/[id]/page.tsx
+++ b/frontend/src/app/(app)/tickets/[id]/page.tsx
@@ -32,6 +32,57 @@ const STATUS_OPTIONS = [
   { value: "closed", label: "Cerrado" },
 ];
 
+// Hilo único estilo Freshdesk: comentarios + correos enviados desde
+// soporte + respuestas recibidas, ordenados cronológicamente. Las
+// respuestas por email que ya generaron comentario se muestran una
+// sola vez (versión email, con asunto y cuerpo).
+type ThreadItem =
+  | { kind: "comment"; key: string; createdAt: string; userName?: string; content: string; isInternal: boolean }
+  | { kind: "sent"; key: string; createdAt: string; who: string; subject: string; body?: string; fallback: string }
+  | { kind: "received"; key: string; createdAt: string; who: string; subject: string; body?: string; status: string; error?: string };
+
+function buildThread(
+  comments: Comment[],
+  sent: TicketSentEmail[],
+  received: TicketReceivedEmail[]
+): ThreadItem[] {
+  const linked = new Set(
+    received.map((r) => r.commentId).filter((v): v is number => typeof v === "number")
+  );
+  const items: ThreadItem[] = [
+    ...comments
+      .filter((c) => !linked.has(c.id))
+      .map((c): ThreadItem => ({
+        kind: "comment",
+        key: `comment-${c.id}`,
+        createdAt: c.createdAt,
+        userName: c.userName,
+        content: c.content,
+        isInternal: c.isInternal,
+      })),
+    ...sent.map((e): ThreadItem => ({
+      kind: "sent",
+      key: `sent-${e.id}`,
+      createdAt: e.createdAt,
+      who: e.recipient,
+      subject: e.subject,
+      body: e.body || undefined,
+      fallback: e.template,
+    })),
+    ...received.map((e, i): ThreadItem => ({
+      kind: "received",
+      key: `recv-${i}-${e.createdAt}`,
+      createdAt: e.createdAt,
+      who: e.authorEmail,
+      subject: e.subject,
+      body: e.body || undefined,
+      status: e.status,
+      error: e.error,
+    })),
+  ];
+  return items.sort((a, b) => +new Date(a.createdAt) - +new Date(b.createdAt));
+}
+
 export default function TicketDetailPage() {
   const params = useParams();
   const id = Number(params.id);
@@ -287,109 +338,84 @@ export default function TicketDetailPage() {
       )}
 
       <div className="row g-4">
-        {/* Comments Timeline */}
+        {/* Conversación estilo Freshdesk: comentarios + hilo de correos */}
         <div className="col-lg-8">
           <div className="card mb-4">
             <div className="card-header d-flex align-items-center gap-2">
               <i className="bi bi-chat-dots" style={{ color: "var(--primary)" }}></i>
-              Comentarios ({comments.length})
+              Conversación ({buildThread(comments, sentEmails, receivedEmails).length})
             </div>
-            <div className="card-body" style={{ maxHeight: "500px", overflowY: "auto" }}>
-              {comments.length > 0 ? (
-                comments.map((c) => (
-                  <div
-                    key={c.id}
-                    className={`comment comment-agent ${c.isInternal ? "comment-internal" : ""}`}
-                  >
-                    <div className="comment-bubble">
-                      <div className="comment-author">
-                        {c.userName || "Usuario"}
-                        {c.isInternal && (
-                          <span className="badge bg-warning text-dark ms-2" style={{ fontSize: "0.65rem" }}>
-                            Nota Interna
+            <div className="card-body" style={{ maxHeight: "600px", overflowY: "auto" }}>
+              {(() => {
+                const thread = buildThread(comments, sentEmails, receivedEmails);
+                if (thread.length === 0) {
+                  return (
+                    <div className="text-center text-muted py-4">
+                      <i className="bi bi-chat fs-3 d-block mb-2" style={{ opacity: 0.3 }}></i>
+                      Sin conversación aún
+                    </div>
+                  );
+                }
+                return thread.map((m) => {
+                  if (m.kind === "comment") {
+                    return (
+                      <div key={m.key} className={`comment comment-agent ${m.isInternal ? "comment-internal" : ""}`}>
+                        <div className="comment-bubble">
+                          <div className="comment-author">
+                            {m.userName || "Usuario"}
+                            {m.isInternal && (
+                              <span className="badge bg-warning text-dark ms-2" style={{ fontSize: "0.65rem" }}>
+                                Nota Interna
+                              </span>
+                            )}
+                          </div>
+                          <div className="comment-text">{m.content}</div>
+                          <div className="comment-time">{formatDateTime(m.createdAt)}</div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  const isSent = m.kind === "sent";
+                  return (
+                    <div key={m.key} className="comment comment-agent">
+                      <div className="comment-bubble">
+                        <div className="comment-author">
+                          <span
+                            className={`badge ${isSent ? "bg-primary" : "bg-success"} me-2`}
+                            title={isSent ? "Enviado desde soporte" : "Respuesta recibida por correo"}
+                          >
+                            <i className={`bi ${isSent ? "bi-send" : "bi-inbox"}`}></i>
                           </span>
+                          {isSent ? `Soporte → ${m.who}` : `De: ${m.who}`}
+                        </div>
+                        <div className="fw-semibold" style={{ fontSize: "0.85rem" }}>{m.subject}</div>
+                        {isSent ? (
+                          m.body ? (
+                            <div
+                              className="comment-text"
+                              dangerouslySetInnerHTML={{ __html: m.body }}
+                            />
+                          ) : (
+                            <div className="comment-text text-muted">Plantilla: {m.fallback}</div>
+                          )
+                        ) : m.body ? (
+                          <div className="comment-text" style={{ whiteSpace: "pre-wrap" }}>{m.body}</div>
+                        ) : (
+                          <div className="comment-text text-muted">
+                            {m.status === "inserted"
+                              ? "Agregado como comentario"
+                              : `Omitido: ${m.error || m.status}`}
+                          </div>
                         )}
-                      </div>
-                      <div className="comment-text">{c.content}</div>
-                      <div className="comment-time">
-                        {formatDateTime(c.createdAt)}
+                        <div className="comment-time">{formatDateTime(m.createdAt)}</div>
                       </div>
                     </div>
-                  </div>
-                ))
-              ) : (
-                <div className="text-center text-muted py-4">
-                  <i className="bi bi-chat fs-3 d-block mb-2" style={{ opacity: 0.3 }}></i>
-                  No hay comentarios aún
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Historial de correos: enviados desde soporte + respuestas
-              recibidas, integrados al ticket (hilo email <-> ticket) */}
-          <div className="card mb-4">
-            <div className="card-header d-flex align-items-center gap-2">
-              <i className="bi bi-envelope-at" style={{ color: "var(--primary)" }}></i>
-              Historial de correos ({sentEmails.length + receivedEmails.length})
-            </div>
-            <div className="card-body" style={{ maxHeight: "400px", overflowY: "auto" }}>
-              {sentEmails.length === 0 && receivedEmails.length === 0 ? (
-                <div className="text-center text-muted py-4">
-                  <i className="bi bi-envelope fs-3 d-block mb-2" style={{ opacity: 0.3 }}></i>
-                  Sin correos asociados a este ticket
-                </div>
-              ) : (
-                [...sentEmails.map((e) => ({
-                  key: `sent-${e.id}`,
-                  dir: "sent" as const,
-                  who: e.recipient,
-                  subject: e.subject,
-                  extra: e.template,
-                  status: e.status,
-                  error: e.error,
-                  createdAt: e.createdAt,
-                })), ...receivedEmails.map((e, i) => ({
-                  key: `recv-${i}-${e.createdAt}`,
-                  dir: "received" as const,
-                  who: e.authorEmail,
-                  subject: e.subject,
-                  extra: e.status === "inserted" ? "Agregado como comentario" : (e.error || e.status),
-                  status: e.status,
-                  error: e.error,
-                  createdAt: e.createdAt,
-                }))]
-                  .sort((a, b) => +new Date(b.createdAt) - +new Date(a.createdAt))
-                  .map((m) => (
-                    <div key={m.key} className="d-flex gap-2 mb-3">
-                      <span
-                        className={`badge ${m.dir === "sent" ? "bg-primary" : "bg-success"} align-self-start mt-1`}
-                        title={m.dir === "sent" ? "Enviado desde soporte" : "Respuesta recibida"}
-                      >
-                        <i className={`bi ${m.dir === "sent" ? "bi-send" : "bi-inbox"}`}></i>
-                      </span>
-                      <div className="flex-grow-1">
-                        <div className="fw-semibold" style={{ fontSize: "0.85rem" }}>
-                          {m.dir === "sent" ? "Para: " : "De: "}{m.who}
-                        </div>
-                        <div className="text-muted" style={{ fontSize: "0.85rem" }}>{m.subject}</div>
-                        <div className="d-flex gap-2 align-items-center flex-wrap">
-                          <small className="text-muted">{formatDateTime(m.createdAt)}</small>
-                          <small className="text-muted">·</small>
-                          <small className="text-muted">{m.extra}</small>
-                          {m.status !== "sent" && m.status !== "inserted" && (
-                            <span className="badge bg-warning text-dark" title={m.error || ""}>
-                              {m.status}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  ))
-              )}
+                  );
+                });
+              })()}
               <small className="text-muted d-block mt-2">
                 Las respuestas con etiqueta HD-{String(id).padStart(6, "0")} en el asunto
-                se agregan solas como comentarios (ingesta cada 5 min).
+                llegan a este hilo (ingesta cada 5 min).
               </small>
             </div>
           </div>
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 2327d02..82bb96e 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -140,6 +140,7 @@ export interface TicketSentEmail {
   subject: string;
   status: string;
   error?: string;
+  body?: string;
   createdAt: string;
 }
 
@@ -149,6 +150,8 @@ export interface TicketReceivedEmail {
   subject: string;
   status: string;
   error?: string;
+  body?: string;
+  commentId?: number;
   createdAt: string;
 }