From a2119a8d063d7d8bc38cf683b061706b002ff5d9 Mon Sep 17 00:00:00 2001
From: andy <andymtt@163.com>
Date: Thu, 9 Jul 2026 17:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20Debug=20EML=20=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/debug/DebugEmlSuperAgentRunView.vue | 821 ++++++++++++------
 1 file changed, 549 insertions(+), 272 deletions(-)

diff --git a/client/src/views/debug/DebugEmlSuperAgentRunView.vue b/client/src/views/debug/DebugEmlSuperAgentRunView.vue
index beaa8f2..97c69a6 100644
--- a/client/src/views/debug/DebugEmlSuperAgentRunView.vue
+++ b/client/src/views/debug/DebugEmlSuperAgentRunView.vue
@@ -1,88 +1,12 @@
 <template>
   <div class="th-page debug-eml-view">
-    <header class="page-heading">
-      <div>
+    <header class="debug-eml-hero">
+      <div class="debug-eml-hero__copy">
         <h1>{{ t('debugEml.title') }}</h1>
         <p>{{ t('debugEml.subtitle') }}</p>
       </div>
-    </header>
 
-    <form
-      class="th-section debug-eml-form"
-      @submit.prevent="submitUpload"
-    >
-      <div class="th-section-header">
-        <h2 class="th-section-title">
-          {{ t('debugEml.uploadConfig') }}
-        </h2>
-      </div>
-
-      <div class="debug-eml-grid">
-        <label>
-          <span>{{ t('debugEml.hotelId') }}</span>
-          <input
-            v-model="hotelId"
-            name="hotel_id"
-            type="text"
-            :disabled="busy"
-            autocomplete="off"
-          >
-        </label>
-        <label>
-          <span>{{ t('debugEml.debugUploadKey') }}</span>
-          <input
-            v-model="debugUploadKey"
-            name="debug_upload_key"
-            type="password"
-            :disabled="busy"
-            autocomplete="off"
-          >
-        </label>
-        <label>
-          <span>{{ t('debugEml.runLabel') }}</span>
-          <input
-            v-model="runLabel"
-            name="run_label"
-            type="text"
-            :disabled="busy"
-            autocomplete="off"
-          >
-        </label>
-        <label>
-          <span>{{ t('debugEml.emlFile') }}</span>
-          <input
-            type="file"
-            accept=".eml,message/rfc822"
-            :disabled="busy"
-            @change="onFileChange"
-          >
-        </label>
-      </div>
-
-      <div class="debug-eml-actions">
-        <button
-          type="submit"
-          class="primary-button"
-          :disabled="submitDisabled"
-        >
-          {{ busy ? t('debugEml.submitting') : t('debugEml.submit') }}
-        </button>
-        <span
-          v-if="selectedFile"
-          class="th-muted"
-        >
-          {{ selectedFile.name }}
-        </span>
-      </div>
-    </form>
-
-    <section class="th-section debug-eml-status">
-      <div class="th-section-header">
-        <h2 class="th-section-title">
-          {{ t('debugEml.executionStatus') }}
-        </h2>
-      </div>
-      <dl class="debug-eml-kv">
+      <dl class="debug-eml-status-strip">
         <div>
           <dt>{{ t('debugEml.status') }}</dt>
           <dd>{{ statusLabel }}</dd>
@@ -100,172 +24,315 @@
           </dd>
         </div>
       </dl>
-      <p
-        v-if="busy"
-        class="debug-eml-callout"
-      >
-        {{ t('debugEml.waitingSuperAgent') }}
-      </p>
-      <div
-        v-if="errorCode"
-        class="empty-state empty-state--error"
-      >
-        <strong>{{ errorCode }}</strong>
-        <span>{{ errorDisplayMessage }}</span>
-        <small v-if="errorMessage">
-          {{ t('debugEml.backendMessage') }}: {{ errorMessage }}
-        </small>
-      </div>
-    </section>
+    </header>
 
-    <template v-if="result">
-      <section class="th-section">
-        <div class="th-section-header">
-          <h2 class="th-section-title">
-            {{ t('debugEml.sourceTrace') }}
-          </h2>
-        </div>
-        <dl class="debug-eml-kv debug-eml-kv--grid">
-          <div>
-            <dt>{{ t('debugEml.sourceMessageId') }}</dt>
-            <dd class="th-code">
-              {{ result.source_message_id ?? '-' }}
-            </dd>
-          </div>
-          <div>
-            <dt>{{ t('debugEml.sourceProvider') }}</dt>
-            <dd>
-              {{ result.source_provider ?? '-' }}
-            </dd>
-          </div>
-          <div>
-            <dt>{{ t('debugEml.externalMessageId') }}</dt>
-            <dd class="th-code">
-              {{ result.external_message_id ?? '-' }}
-            </dd>
-          </div>
-          <div>
-            <dt>{{ t('debugEml.externalConversationId') }}</dt>
-            <dd class="th-code">
-              {{ result.external_conversation_id ?? '-' }}
-            </dd>
-          </div>
-        </dl>
-      </section>
-
-      <section class="th-section debug-eml-preview-section">
-        <div class="th-section-header">
-          <h2 class="th-section-title">
-            {{ t('debugEml.mailPreview') }}
-          </h2>
-        </div>
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          v-if="renderableHtmlBody"
-          class="debug-eml-html-preview"
-          v-html="renderableHtmlBody"
-        />
-        <!-- eslint-enable vue/no-v-html -->
-        <div
-          v-else
-          class="empty-state"
+    <div class="debug-eml-workspace">
+      <aside class="debug-eml-panel">
+        <form
+          class="debug-eml-card debug-eml-form"
+          @submit.prevent="submitUpload"
         >
-          {{ t('debugEml.noSafeHtml') }}
-        </div>
+          <div class="th-section-header">
+            <h2 class="th-section-title">
+              <i
+                class="pi pi-upload"
+                aria-hidden="true"
+              />
+              {{ t('debugEml.uploadConfig') }}
+            </h2>
+          </div>
 
-        <div class="debug-eml-media-list">
-          <h3>{{ t('debugEml.uploadedMedia') }}</h3>
-          <ul v-if="result.uploaded_media.length">
-            <li
-              v-for="(media, index) in result.uploaded_media"
-              :key="media.external_media_id ?? media.object_key ?? index"
-            >
-              <span>{{ media.media_type ?? '-' }}</span>
-              <a
-                v-if="safeExternalUrl(media.external_url)"
-                :href="safeExternalUrl(media.external_url)"
-                target="_blank"
-                rel="noopener noreferrer"
+          <div class="debug-eml-grid">
+            <label>
+              <span>{{ t('debugEml.hotelId') }}</span>
+              <input
+                v-model="hotelId"
+                name="hotel_id"
+                type="text"
+                :disabled="busy"
+                autocomplete="off"
               >
-                {{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
-              </a>
-              <strong v-else>
-                {{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
-              </strong>
-              <small>
-                {{ media.content_type ?? '-' }} / {{ formatMediaSize(media.size_bytes) }}
-              </small>
-            </li>
-          </ul>
-          <p
-            v-else
-            class="th-muted"
-          >
-            {{ t('common.noData') }}
-          </p>
-        </div>
-
-        <details class="debug-eml-raw-html">
-          <summary>{{ t('debugEml.rawHtml') }}</summary>
-          <pre>{{ result.html_body_with_oss_urls ?? '-' }}</pre>
-        </details>
-      </section>
-
-      <section class="th-section debug-eml-result-section">
-        <div class="th-section-header">
-          <h2 class="th-section-title">
-            {{ t('debugEml.superAgentResult') }}
-          </h2>
-        </div>
-        <dl class="debug-eml-kv debug-eml-kv--grid">
-          <div>
-            <dt>{{ t('debugEml.superAgentSessionId') }}</dt>
-            <dd class="th-code">
-              {{ result.superagent_session_id ?? '-' }}
-            </dd>
+            </label>
+            <label>
+              <span>{{ t('debugEml.debugUploadKey') }}</span>
+              <input
+                v-model="debugUploadKey"
+                name="debug_upload_key"
+                type="password"
+                :disabled="busy"
+                autocomplete="off"
+              >
+            </label>
+            <label>
+              <span>{{ t('debugEml.runLabel') }}</span>
+              <input
+                v-model="runLabel"
+                name="run_label"
+                type="text"
+                :disabled="busy"
+                autocomplete="off"
+              >
+            </label>
+            <label>
+              <span>{{ t('debugEml.emlFile') }}</span>
+              <input
+                type="file"
+                accept=".eml,message/rfc822"
+                :disabled="busy"
+                @change="onFileChange"
+              >
+            </label>
           </div>
-          <div>
-            <dt>{{ t('debugEml.superAgentRunId') }}</dt>
-            <dd class="th-code">
-              {{ result.superagent_run_id ?? '-' }}
-            </dd>
-          </div>
-        </dl>
-        <div class="debug-eml-two-column">
-          <section>
-            <h3>{{ t('debugEml.parsedJson') }}</h3>
-            <pre>{{ formatJson(result.superagent_parsed_json) }}</pre>
-          </section>
-          <section>
-            <h3>{{ t('debugEml.rawAnswer') }}</h3>
-            <pre>{{ result.superagent_raw_answer ?? '-' }}</pre>
-          </section>
-        </div>
-        <div
-          v-if="result.warnings.length"
-          class="debug-eml-warning-list"
-        >
-          <h3>{{ t('debugEml.warnings') }}</h3>
-          <ul>
-            <li
-              v-for="warning in result.warnings"
-              :key="warning"
+
+          <div class="debug-eml-actions">
+            <button
+              type="submit"
+              class="primary-button"
+              :disabled="submitDisabled"
             >
-              {{ warning }}
-            </li>
-          </ul>
-        </div>
-      </section>
+              <i
+                class="pi pi-send"
+                aria-hidden="true"
+              />
+              {{ busy ? t('debugEml.submitting') : t('debugEml.submit') }}
+            </button>
+            <span
+              v-if="selectedFile"
+              class="debug-eml-selected-file"
+            >
+              <i
+                class="pi pi-file"
+                aria-hidden="true"
+              />
+              {{ selectedFile.name }}
+            </span>
+          </div>
+        </form>
 
-      <section class="th-section">
-        <div class="th-section-header">
-          <h2 class="th-section-title">
-            {{ t('debugEml.debugPayload') }}
-          </h2>
-        </div>
-        <pre>{{ formatJson(result.agentbus_like_payload) }}</pre>
-      </section>
-    </template>
+        <section class="debug-eml-card debug-eml-status">
+          <div class="th-section-header">
+            <h2 class="th-section-title">
+              <i
+                class="pi pi-info-circle"
+                aria-hidden="true"
+              />
+              {{ t('debugEml.executionStatus') }}
+            </h2>
+          </div>
+          <dl class="debug-eml-kv">
+            <div>
+              <dt>{{ t('debugEml.status') }}</dt>
+              <dd>{{ statusLabel }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('debugEml.debugRunId') }}</dt>
+              <dd class="th-code">
+                {{ result?.debug_run_id ?? '-' }}
+              </dd>
+            </div>
+            <div>
+              <dt>{{ t('debugEml.backendStatus') }}</dt>
+              <dd class="th-code">
+                {{ result?.status ?? '-' }}
+              </dd>
+            </div>
+          </dl>
+          <p
+            v-if="busy"
+            class="debug-eml-callout"
+          >
+            {{ t('debugEml.waitingSuperAgent') }}
+          </p>
+          <div
+            v-if="errorCode"
+            class="empty-state empty-state--error"
+          >
+            <strong>{{ errorCode }}</strong>
+            <span>{{ errorDisplayMessage }}</span>
+            <small v-if="errorMessage">
+              {{ t('debugEml.backendMessage') }}: {{ errorMessage }}
+            </small>
+          </div>
+        </section>
+      </aside>
+
+      <main class="debug-eml-results">
+        <template v-if="result">
+          <section class="debug-eml-card">
+            <div class="th-section-header">
+              <h2 class="th-section-title">
+                <i
+                  class="pi pi-sitemap"
+                  aria-hidden="true"
+                />
+                {{ t('debugEml.sourceTrace') }}
+              </h2>
+            </div>
+            <dl class="debug-eml-kv debug-eml-kv--grid">
+              <div>
+                <dt>{{ t('debugEml.sourceMessageId') }}</dt>
+                <dd class="th-code">
+                  {{ result.source_message_id ?? '-' }}
+                </dd>
+              </div>
+              <div>
+                <dt>{{ t('debugEml.sourceProvider') }}</dt>
+                <dd>
+                  {{ result.source_provider ?? '-' }}
+                </dd>
+              </div>
+              <div>
+                <dt>{{ t('debugEml.externalMessageId') }}</dt>
+                <dd class="th-code">
+                  {{ result.external_message_id ?? '-' }}
+                </dd>
+              </div>
+              <div>
+                <dt>{{ t('debugEml.externalConversationId') }}</dt>
+                <dd class="th-code">
+                  {{ result.external_conversation_id ?? '-' }}
+                </dd>
+              </div>
+            </dl>
+          </section>
+
+          <section class="debug-eml-card debug-eml-preview-section">
+            <div class="th-section-header">
+              <h2 class="th-section-title">
+                <i
+                  class="pi pi-envelope"
+                  aria-hidden="true"
+                />
+                {{ t('debugEml.mailPreview') }}
+              </h2>
+            </div>
+            <!-- eslint-disable vue/no-v-html -->
+            <div
+              v-if="renderableHtmlBody"
+              class="debug-eml-html-preview"
+              v-html="renderableHtmlBody"
+            />
+            <!-- eslint-enable vue/no-v-html -->
+            <div
+              v-else
+              class="empty-state"
+            >
+              {{ t('debugEml.noSafeHtml') }}
+            </div>
+
+            <div class="debug-eml-media-list">
+              <h3>{{ t('debugEml.uploadedMedia') }}</h3>
+              <ul v-if="result.uploaded_media.length">
+                <li
+                  v-for="(media, index) in result.uploaded_media"
+                  :key="media.external_media_id ?? media.object_key ?? index"
+                >
+                  <span>{{ media.media_type ?? '-' }}</span>
+                  <a
+                    v-if="safeExternalUrl(media.external_url)"
+                    :href="safeExternalUrl(media.external_url)"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
+                  </a>
+                  <strong v-else>
+                    {{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
+                  </strong>
+                  <small>
+                    {{ media.content_type ?? '-' }} / {{ formatMediaSize(media.size_bytes) }}
+                  </small>
+                </li>
+              </ul>
+              <p
+                v-else
+                class="th-muted"
+              >
+                {{ t('common.noData') }}
+              </p>
+            </div>
+
+            <details class="debug-eml-raw-html">
+              <summary>{{ t('debugEml.rawHtml') }}</summary>
+              <pre>{{ result.html_body_with_oss_urls ?? '-' }}</pre>
+            </details>
+          </section>
+
+          <section class="debug-eml-card debug-eml-result-section">
+            <div class="th-section-header">
+              <h2 class="th-section-title">
+                <i
+                  class="pi pi-bolt"
+                  aria-hidden="true"
+                />
+                {{ t('debugEml.superAgentResult') }}
+              </h2>
+            </div>
+            <dl class="debug-eml-kv debug-eml-kv--grid">
+              <div>
+                <dt>{{ t('debugEml.superAgentSessionId') }}</dt>
+                <dd class="th-code">
+                  {{ result.superagent_session_id ?? '-' }}
+                </dd>
+              </div>
+              <div>
+                <dt>{{ t('debugEml.superAgentRunId') }}</dt>
+                <dd class="th-code">
+                  {{ result.superagent_run_id ?? '-' }}
+                </dd>
+              </div>
+            </dl>
+            <div class="debug-eml-two-column">
+              <section>
+                <h3>{{ t('debugEml.parsedJson') }}</h3>
+                <pre>{{ formatJson(result.superagent_parsed_json) }}</pre>
+              </section>
+              <section>
+                <h3>{{ t('debugEml.rawAnswer') }}</h3>
+                <pre>{{ result.superagent_raw_answer ?? '-' }}</pre>
+              </section>
+            </div>
+            <div
+              v-if="result.warnings.length"
+              class="debug-eml-warning-list"
+            >
+              <h3>{{ t('debugEml.warnings') }}</h3>
+              <ul>
+                <li
+                  v-for="warning in result.warnings"
+                  :key="warning"
+                >
+                  {{ warning }}
+                </li>
+              </ul>
+            </div>
+          </section>
+
+          <section class="debug-eml-card">
+            <div class="th-section-header">
+              <h2 class="th-section-title">
+                <i
+                  class="pi pi-code"
+                  aria-hidden="true"
+                />
+                {{ t('debugEml.debugPayload') }}
+              </h2>
+            </div>
+            <pre>{{ formatJson(result.agentbus_like_payload) }}</pre>
+          </section>
+        </template>
+
+        <section
+          v-else
+          class="debug-eml-card debug-eml-empty-panel"
+        >
+          <div class="empty-state">
+            <strong>{{ t('debugEml.executionStatus') }}</strong>
+            <span>{{ busy ? t('debugEml.waitingSuperAgent') : t('common.noData') }}</span>
+          </div>
+        </section>
+      </main>
+    </div>
   </div>
 </template>
 
@@ -383,23 +450,108 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 <style scoped>
 .debug-eml-view {
-  max-width: 1320px;
+  max-width: 1440px;
+  display: grid;
+  gap: 18px;
 }
 
-.page-heading h1,
-.page-heading p {
+.debug-eml-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
+  gap: 18px;
+  align-items: stretch;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 14px;
+  background:
+    linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(248 250 252 / 92%)),
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%);
+  box-shadow: 0 20px 50px rgb(15 23 42 / 6%);
+  padding: 22px;
+}
+
+.debug-eml-hero__copy {
+  min-width: 0;
+  display: grid;
+  align-content: center;
+  gap: 8px;
+}
+
+.debug-eml-hero__copy h1,
+.debug-eml-hero__copy p {
   margin: 0;
 }
 
-.page-heading h1 {
+.debug-eml-hero__copy h1 {
   color: var(--th-color-slate-900);
   font-size: 28px;
+  line-height: 1.2;
 }
 
-.page-heading p {
-  margin-top: 8px;
+.debug-eml-hero__copy p {
+  max-width: 760px;
   color: var(--th-color-slate-500);
   font-size: 14px;
+  line-height: 1.7;
+}
+
+.debug-eml-status-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0;
+}
+
+.debug-eml-status-strip div {
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 82%);
+  padding: 14px;
+}
+
+.debug-eml-status-strip dt {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.debug-eml-status-strip dd {
+  margin: 7px 0 0;
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
+.debug-eml-workspace {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.debug-eml-panel {
+  position: sticky;
+  top: calc(var(--th-topbar-height) + 18px);
+  display: grid;
+  gap: 14px;
+}
+
+.debug-eml-results {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.debug-eml-card {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 12px;
+  background: rgb(255 255 255 / 96%);
+  box-shadow: 0 12px 30px rgb(15 23 42 / 5%);
+  padding: 18px;
 }
 
 .debug-eml-form,
@@ -412,8 +564,8 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
+  grid-template-columns: 1fr;
+  gap: 13px;
 }
 
 .debug-eml-grid label {
@@ -425,12 +577,36 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .debug-eml-grid input {
-  min-height: 38px;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-sm);
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  border-radius: 8px;
   background: var(--th-color-white);
   color: var(--th-color-slate-900);
   padding: 0 12px;
+  font: inherit;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.debug-eml-grid input[type='file'] {
+  min-height: auto;
+  padding: 9px 10px;
+  color: var(--th-color-slate-600);
+  font-size: 12px;
+}
+
+.debug-eml-grid input:focus {
+  outline: none;
+  border-color: var(--th-color-blue-600);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.debug-eml-grid input:disabled {
+  cursor: not-allowed;
+  background: var(--th-color-slate-50);
+  color: var(--th-color-slate-500);
 }
 
 .debug-eml-actions {
@@ -441,19 +617,49 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .primary-button {
-  min-height: 38px;
+  min-height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   border: 0;
-  border-radius: var(--th-radius-sm);
+  border-radius: 9px;
   background: var(--th-color-blue-600);
   color: var(--th-color-white);
-  padding: 0 16px;
+  padding: 0 18px;
   font-weight: 800;
   cursor: pointer;
+  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.primary-button:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.25);
 }
 
 .primary-button:disabled {
   cursor: not-allowed;
   opacity: 0.55;
+  box-shadow: none;
+}
+
+.debug-eml-selected-file {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 999px;
+  background: var(--th-color-slate-50);
+  color: var(--th-color-slate-600);
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
 }
 
 .empty-state {
@@ -465,6 +671,9 @@ function formatMediaSize(sizeBytes: number | null): string {
   font-size: 13px;
   padding: 24px;
   text-align: center;
+  border: 1px dashed rgba(148, 163, 184, 0.38);
+  border-radius: 10px;
+  background: var(--th-color-slate-50);
 }
 
 .empty-state strong {
@@ -472,13 +681,17 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .empty-state--error {
+  place-items: start;
   color: var(--th-color-danger);
+  text-align: left;
+  background: rgba(220, 38, 38, 0.06);
+  border-color: rgba(220, 38, 38, 0.22);
 }
 
 .debug-eml-kv {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  grid-template-columns: 1fr;
+  gap: 10px;
   margin: 0;
 }
 
@@ -488,10 +701,10 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-kv div {
   min-width: 0;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 10px;
   padding: 12px;
-  background: var(--th-color-white);
+  background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
 }
 
 .debug-eml-kv dt {
@@ -510,7 +723,8 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-callout {
   margin: 0;
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(37, 99, 235, 0.16);
+  border-radius: 10px;
   background: rgba(37, 99, 235, 0.08);
   color: var(--th-color-blue-600);
   padding: 12px;
@@ -521,10 +735,12 @@ function formatMediaSize(sizeBytes: number | null): string {
 .debug-eml-html-preview {
   max-height: 520px;
   overflow: auto;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 10px;
   background: var(--th-color-white);
-  padding: 16px;
+  padding: 18px;
+  color: var(--th-color-slate-900);
+  line-height: 1.65;
 }
 
 .debug-eml-media-list {
@@ -551,11 +767,12 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-media-list li {
   display: grid;
-  grid-template-columns: 140px minmax(0, 1fr) 220px;
+  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) minmax(170px, 220px);
   gap: 12px;
   align-items: center;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 10px;
+  background: var(--th-color-slate-50);
   padding: 10px 12px;
 }
 
@@ -572,8 +789,9 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .debug-eml-raw-html {
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 10px;
+  background: var(--th-color-slate-50);
   padding: 12px;
 }
 
@@ -588,13 +806,22 @@ pre {
   max-height: 420px;
   overflow: auto;
   margin: 0;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-sm);
-  background: var(--th-color-slate-50);
-  color: var(--th-color-slate-900);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 10px;
+  background: #0f172a;
+  color: #dbeafe;
   padding: 12px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.debug-eml-result-section pre,
+.debug-eml-card > pre,
+.debug-eml-raw-html pre {
+  background: #0f172a;
+  color: #dbeafe;
 }
 
 .debug-eml-two-column {
@@ -606,6 +833,7 @@ pre {
 .debug-eml-two-column section {
   display: grid;
   gap: 10px;
+  min-width: 0;
 }
 
 .debug-eml-warning-list {
@@ -614,7 +842,7 @@ pre {
 }
 
 .debug-eml-warning-list li {
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
   background: rgba(245, 158, 11, 0.12);
   color: #92400e;
   padding: 10px 12px;
@@ -622,13 +850,62 @@ pre {
   font-weight: 700;
 }
 
+.debug-eml-empty-panel {
+  min-height: 360px;
+  align-content: center;
+}
+
+.th-section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.th-section-title i {
+  color: var(--th-color-blue-600);
+  font-size: 14px;
+}
+
+@media (max-width: 1180px) {
+  .debug-eml-hero,
+  .debug-eml-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .debug-eml-panel {
+    position: static;
+  }
+
+  .debug-eml-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 920px) {
-  .debug-eml-grid,
+  .debug-eml-status-strip,
   .debug-eml-kv,
   .debug-eml-kv--grid,
   .debug-eml-two-column,
   .debug-eml-media-list li {
     grid-template-columns: 1fr;
   }
+
+  .debug-eml-hero {
+    padding: 18px;
+  }
+}
+
+@media (max-width: 640px) {
+  .debug-eml-hero__copy h1 {
+    font-size: 24px;
+  }
+
+  .debug-eml-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .debug-eml-card {
+    padding: 16px;
+  }
 }
 </style>