diff --git a/ui/src/components/yaml/index.tsx b/ui/src/components/yaml/index.tsx
index 25b4640c..ca25405b 100644
--- a/ui/src/components/yaml/index.tsx
+++ b/ui/src/components/yaml/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react'
 import type { LegacyRef } from 'react'
-import { Alert, Button, message, Space, Spin, Tooltip } from 'antd'
+import { Alert, Button, message, Modal, Space, Spin, Tooltip } from 'antd'
 import { Resizable } from 're-resizable'
 import { useTranslation } from 'react-i18next'
 import {
@@ -9,6 +9,7 @@ import {
   PoweroffOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
+  ExpandOutlined,
   ReloadOutlined,
 } from '@ant-design/icons'
 import hljs from 'highlight.js'
@@ -58,6 +59,7 @@ const Yaml = (props: IProps) => {
   const abortControllerRef = useRef<AbortController | null>(null)
   const { aiOptions } = useSelector((state: any) => state.globalSlice)
   const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     onRefresh?.()
@@ -264,6 +266,113 @@ const Yaml = (props: IProps) => {
   const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
   const dotToTopHeight = interpretEndRef.current?.getBoundingClientRect()?.top
 
+  function renderAiAnalysis(isDailog) {
+    return (
+      interpretStatus !== 'idle' && (
+        <div
+          className={styles.yaml_content_diagnosisPanel}
+          style={{
+            height: isDailog ? 700 : moduleHeight,
+            ...(isDailog ? { width: '100%' } : {}),
+          }}
+        >
+          <div className={styles.yaml_content_diagnosisHeader}>
+            <Space>
+              <div className={styles.yaml_content_diagnosisHeader_aiIcon}>
+                <img src={aiSummarySvg} alt="ai summary" />
+              </div>
+              {t('YAML.InterpretResult')}
+            </Space>
+            <Space>
+              {interpretStatus === 'streaming' && (
+                <Tooltip title={t('YAML.StopInterpret')} placement="bottom">
+                  <Button
+                    type="text"
+                    className={styles.stopButton}
+                    icon={<PoweroffOutlined />}
+                    onClick={() => {
+                      if (abortControllerRef.current) {
+                        abortControllerRef.current.abort()
+                        setInterpretStatus('complete' as InterpretStatus)
+                      }
+                    }}
+                  />
+                </Tooltip>
+              )}
+              {isDailog ? null : (
+                <>
+                  <Button
+                    type="text"
+                    icon={<ExpandOutlined />}
+                    onClick={() => {
+                      setOpen(!open)
+                    }}
+                  />
+                </>
+              )}
+              <Button
+                type="text"
+                icon={<CloseOutlined />}
+                onClick={() => {
+                  if (isDailog) {
+                    setOpen(false)
+                  } else {
+                    setInterpretStatus('idle' as InterpretStatus)
+                  }
+                }}
+              />
+            </Space>
+          </div>
+          <div
+            className={styles.yaml_content_diagnosisBody}
+            style={isDailog ? { width: '100%' } : {}}
+          >
+            <div
+              className={styles.yaml_content_diagnosisContent}
+              ref={contentRef}
+            >
+              {interpretStatus === 'loading' ||
+              (interpretStatus === 'streaming' && !interpret) ? (
+                <div className={styles.yaml_content_diagnosisLoading}>
+                  <Spin />
+                  <p>{t('EventAggregator.DiagnosisInProgress')}</p>
+                </div>
+              ) : interpretStatus === 'streaming' ? (
+                <>
+                  <Markdown>{interpret}</Markdown>
+                  <div
+                    ref={interpretEndRef}
+                    style={{
+                      float: 'left',
+                      clear: 'both',
+                    }}
+                  />
+                </>
+              ) : interpretStatus === 'error' ? (
+                <Alert
+                  type="error"
+                  message={t('EventAggregator.DiagnosisFailed')}
+                  description={t('EventAggregator.TryAgainLater')}
+                />
+              ) : (
+                <Markdown>{interpret}</Markdown>
+              )}
+            </div>
+            {interpretStatus === 'streaming' && interpret && (
+              <div
+                className={`${styles.yaml_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - moduleHeight >= 0 ? styles.yaml_content_streamingIndicatorFixed : ''}`}
+              >
+                <span className={styles.dot}></span>
+                <span className={styles.dot}></span>
+                <span className={styles.dot}></span>
+              </div>
+            )}
+          </div>
+        </div>
+      )
+    )
+  }
+
   return (
     <div style={{ paddingBottom: 20 }}>
       <Resizable
@@ -358,89 +467,27 @@ const Yaml = (props: IProps) => {
               />
             </div>
           </FullScreen>
-          {interpretStatus !== 'idle' && (
-            <div
-              className={styles.yaml_content_diagnosisPanel}
-              style={{ height: moduleHeight }}
-            >
-              <div className={styles.yaml_content_diagnosisHeader}>
-                <Space>
-                  <div className={styles.yaml_content_diagnosisHeader_aiIcon}>
-                    <img src={aiSummarySvg} alt="ai summary" />
-                  </div>
-                  {t('YAML.InterpretResult')}
-                </Space>
-                <Space>
-                  {interpretStatus === 'streaming' && (
-                    <Tooltip title={t('YAML.StopInterpret')} placement="bottom">
-                      <Button
-                        type="text"
-                        className={styles.stopButton}
-                        icon={<PoweroffOutlined />}
-                        onClick={() => {
-                          if (abortControllerRef.current) {
-                            abortControllerRef.current.abort()
-                            setInterpretStatus('complete' as InterpretStatus)
-                          }
-                        }}
-                      />
-                    </Tooltip>
-                  )}
-                  <Button
-                    type="text"
-                    icon={<CloseOutlined />}
-                    onClick={() =>
-                      setInterpretStatus('idle' as InterpretStatus)
-                    }
-                  />
-                </Space>
-              </div>
-              <div className={styles.yaml_content_diagnosisBody}>
-                <div
-                  className={styles.yaml_content_diagnosisContent}
-                  ref={contentRef}
-                >
-                  {interpretStatus === 'loading' ||
-                  (interpretStatus === 'streaming' && !interpret) ? (
-                    <div className={styles.yaml_content_diagnosisLoading}>
-                      <Spin />
-                      <p>{t('EventAggregator.DiagnosisInProgress')}</p>
-                    </div>
-                  ) : interpretStatus === 'streaming' ? (
-                    <>
-                      <Markdown>{interpret}</Markdown>
-                      <div
-                        ref={interpretEndRef}
-                        style={{
-                          float: 'left',
-                          clear: 'both',
-                        }}
-                      />
-                    </>
-                  ) : interpretStatus === 'error' ? (
-                    <Alert
-                      type="error"
-                      message={t('EventAggregator.DiagnosisFailed')}
-                      description={t('EventAggregator.TryAgainLater')}
-                    />
-                  ) : (
-                    <Markdown>{interpret}</Markdown>
-                  )}
-                </div>
-                {interpretStatus === 'streaming' && interpret && (
-                  <div
-                    className={`${styles.yaml_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - moduleHeight >= 0 ? styles.yaml_content_streamingIndicatorFixed : ''}`}
-                  >
-                    <span className={styles.dot}></span>
-                    <span className={styles.dot}></span>
-                    <span className={styles.dot}></span>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
+          {renderAiAnalysis(false)}
         </div>
       </Resizable>
+      <Modal
+        styles={{
+          content: {
+            padding: 0,
+            borderRadius: 16,
+            background:
+              'linear-gradient(135deg, rgba(147, 112, 219, 0.15) 0%, rgba(43, 29, 60, 0.95) 100%)',
+          },
+        }}
+        centered
+        closable={false}
+        width={'80%'}
+        height={700}
+        open={open}
+        footer={null}
+      >
+        <div style={{ overflow: 'auto' }}>{renderAiAnalysis(true)}</div>
+      </Modal>
     </div>
   )
 }
diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
index 3a7ad7b6..ccbd27a2 100644
--- a/ui/src/components/yaml/styles.module.less
+++ b/ui/src/components/yaml/styles.module.less
@@ -204,452 +204,449 @@
     }
   }
 
-  .yaml_content_diagnosisPanel {
-    box-sizing: border-box;
-    width: 400px;
-    background: #2b1d3c;
-    border-radius: 12px;
+}
+
+.yaml_content_diagnosisPanel {
+  box-sizing: border-box;
+  width: 400px;
+  background: #2b1d3c;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(8px);
+  z-index: 10;
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .yaml_content_diagnosisHeader {
     display: flex;
-    flex-direction: column;
-    backdrop-filter: blur(8px);
-    z-index: 10;
-    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    background: linear-gradient(135deg,
+        rgba(147, 112, 219, 0.15) 0%,
+        rgba(43, 29, 60, 0.95) 100%);
+    border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+    border-radius: 12px 12px 0 0;
+    color: #e6e6fa;
+    font-size: 14px;
+    font-weight: 500;
+    backdrop-filter: blur(4px);
+
+    .yaml_content_diagnosisHeader_aiIcon {
+      width: 18px;
+      height: 18px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
 
-    .yaml_content_diagnosisHeader {
+    .stopButton {
+      color: rgba(255, 255, 255, 0.45);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 28px;
+      height: 28px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 12px;
-      background: linear-gradient(
-        135deg,
-        rgba(147, 112, 219, 0.15) 0%,
-        rgba(43, 29, 60, 0.95) 100%
-      );
-      border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-      border-radius: 12px 12px 0 0;
-      color: #e6e6fa;
-      font-size: 14px;
-      font-weight: 500;
-      backdrop-filter: blur(4px);
-
-      .yaml_content_diagnosisHeader_aiIcon {
-        width: 18px;
-        height: 18px;
+      justify-content: center;
+      border-radius: 6px;
+      margin-right: 8px;
+      position: relative;
+      overflow: hidden;
 
-        img {
-          width: 100%;
-          height: 100%;
-        }
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255, 77, 79, 0);
+        transition: background 0.3s ease;
+        z-index: 0;
       }
 
-      .stopButton {
-        color: rgba(255, 255, 255, 0.45);
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        width: 28px;
-        height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 6px;
-        margin-right: 8px;
+      :global(.anticon) {
+        font-size: 16px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
-        overflow: hidden;
+        z-index: 1;
+      }
+
+      &:hover {
+        color: #ff4d4f;
+        transform: scale(1.05);
 
         &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(255, 77, 79, 0);
-          transition: background 0.3s ease;
-          z-index: 0;
+          background: rgba(255, 77, 79, 0.15);
         }
 
         :global(.anticon) {
-          font-size: 16px;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          position: relative;
-          z-index: 1;
+          transform: rotate(180deg) scale(1.1);
         }
+      }
 
-        &:hover {
-          color: #ff4d4f;
-          transform: scale(1.05);
+      &:active {
+        transform: scale(0.95);
 
-          &::before {
-            background: rgba(255, 77, 79, 0.15);
-          }
-
-          :global(.anticon) {
-            transform: rotate(180deg) scale(1.1);
-          }
+        &::before {
+          background: rgba(255, 77, 79, 0.25);
         }
+      }
+    }
+
+    .anticon {
+      margin-right: 8px;
+      font-size: 16px;
+      color: #9370db;
+      text-shadow: 0 0 8px rgba(147, 112, 219, 0.4);
+    }
 
-        &:active {
-          transform: scale(0.95);
+    button {
+      color: rgba(230, 230, 250, 0.85);
+      transition: all 0.3s ease;
+      border-radius: 6px;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-          &::before {
-            background: rgba(255, 77, 79, 0.25);
-          }
-        }
+      &:hover {
+        color: #fff !important;
+        background: rgba(147, 112, 219, 0.2) !important;
+        transform: scale(1.05) !important;
       }
 
-      .anticon {
-        margin-right: 8px;
-        font-size: 16px;
-        color: #9370db;
-        text-shadow: 0 0 8px rgba(147, 112, 219, 0.4);
+      &:active {
+        transform: scale(0.95);
       }
+    }
+  }
 
-      button {
-        color: rgba(230, 230, 250, 0.85);
-        transition: all 0.3s ease;
-        border-radius: 6px;
-        width: 28px;
-        height: 28px;
+  .yaml_content_diagnosisBody {
+    position: relative;
+    width: 400px;
+    overflow-y: auto;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 0 0 12px 12px;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(147, 112, 219, 0.05);
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 112, 219, 0.2);
+      border-radius: 4px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+
+      &:hover {
+        background: rgba(147, 112, 219, 0.3);
+        border: 2px solid transparent;
+        background-clip: padding-box;
+      }
+    }
+
+    .yaml_content_diagnosisContent {
+      color: #d4d4d4;
+      background: #2b1d3c;
+      border-radius: 0 0 12px 12px;
+      padding: 16px;
+      font-size: 14px;
+      line-height: 1.6;
+      box-sizing: border-box;
+      word-wrap: break-word;
+
+      .yaml_content_diagnosisLoading {
+        height: 100%;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
+        gap: 16px;
+        color: rgba(230, 230, 250, 0.85);
 
-        &:hover {
-          color: #fff;
-          background: rgba(147, 112, 219, 0.2);
-          transform: scale(1.05);
+        :global(.ant-spin) {
+          .ant-spin-dot-item {
+            background-color: #9370db;
+          }
         }
 
-        &:active {
-          transform: scale(0.95);
+        p {
+          font-size: 14px;
+          color: rgba(230, 230, 250, 0.85);
         }
       }
-    }
-
-    .yaml_content_diagnosisBody {
-      position: relative;
-      width: 400px;
-      overflow-y: auto;
-      height: 100%;
-      box-sizing: border-box;
-      border-radius: 0 0 12px 12px;
 
-      &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
+      h1,
+      h2,
+      h3 {
+        color: #e6e6fa;
+        margin-bottom: 16px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
       }
 
-      &::-webkit-scrollbar-track {
-        background: rgba(147, 112, 219, 0.05);
-        border-radius: 4px;
+      h1 {
+        font-size: 20px;
       }
 
-      &::-webkit-scrollbar-thumb {
-        background: rgba(147, 112, 219, 0.2);
-        border-radius: 4px;
-        border: 2px solid transparent;
-        background-clip: padding-box;
-
-        &:hover {
-          background: rgba(147, 112, 219, 0.3);
-          border: 2px solid transparent;
-          background-clip: padding-box;
-        }
+      h2 {
+        font-size: 18px;
+        margin-top: 24px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(147, 112, 219, 0.2);
       }
 
-      .yaml_content_diagnosisContent {
-        color: #d4d4d4;
-        background: #2b1d3c;
-        border-radius: 0 0 12px 12px;
-        padding: 16px;
-        font-size: 14px;
-        line-height: 1.6;
-        box-sizing: border-box;
-        word-wrap: break-word;
-
-        .yaml_content_diagnosisLoading {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          gap: 16px;
-          color: rgba(230, 230, 250, 0.85);
+      h3 {
+        font-size: 16px;
+        margin-top: 20px;
+      }
 
-          :global(.ant-spin) {
-            .ant-spin-dot-item {
-              background-color: #9370db;
-            }
-          }
+      p {
+        margin-bottom: 16px;
+        line-height: 1.7;
+      }
 
-          p {
-            font-size: 14px;
-            color: rgba(230, 230, 250, 0.85);
-          }
-        }
+      ul,
+      ol {
+        padding-left: 24px;
+        margin-bottom: 16px;
+      }
 
-        h1,
-        h2,
-        h3 {
-          color: #e6e6fa;
-          margin-bottom: 16px;
-          font-weight: 600;
-          letter-spacing: -0.01em;
-        }
+      li {
+        margin-bottom: 8px;
+      }
 
-        h1 {
-          font-size: 20px;
-        }
+      code {
+        background: rgba(147, 112, 219, 0.1);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+        font-size: 13px;
+      }
 
-        h2 {
-          font-size: 18px;
-          margin-top: 24px;
-          padding-bottom: 8px;
-          border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-        }
+      pre {
+        background: rgba(20, 15, 30, 0.8);
+        padding: 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        overflow-x: auto;
+        border: 1px solid rgba(147, 112, 219, 0.1);
 
-        h3 {
-          font-size: 16px;
-          margin-top: 20px;
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
         }
 
-        p {
-          margin-bottom: 16px;
-          line-height: 1.7;
+        &::-webkit-scrollbar-track {
+          background: rgba(147, 112, 219, 0.05);
+          border-radius: 4px;
         }
 
-        ul,
-        ol {
-          padding-left: 24px;
-          margin-bottom: 16px;
-        }
+        &::-webkit-scrollbar-thumb {
+          background: rgba(147, 112, 219, 0.2);
+          border-radius: 4px;
+          border: 2px solid transparent;
+          background-clip: padding-box;
 
-        li {
-          margin-bottom: 8px;
+          &:hover {
+            background: rgba(147, 112, 219, 0.3);
+            border: 2px solid transparent;
+            background-clip: padding-box;
+          }
         }
 
         code {
-          background: rgba(147, 112, 219, 0.1);
-          padding: 2px 6px;
-          border-radius: 4px;
-          font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-          font-size: 13px;
+          background: none;
+          padding: 0;
         }
+      }
 
-        pre {
-          background: rgba(20, 15, 30, 0.8);
+      :global {
+        .markdown-body {
+          color: #d4d4d4;
+          background: transparent;
           padding: 16px;
-          border-radius: 8px;
-          margin-bottom: 16px;
-          overflow-x: auto;
-          border: 1px solid rgba(147, 112, 219, 0.1);
-
-          &::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            color: rgba(230, 230, 250, 0.95);
+            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
           }
 
-          &::-webkit-scrollbar-track {
-            background: rgba(147, 112, 219, 0.05);
-            border-radius: 4px;
+          h1 {
+            font-size: 24px;
           }
 
-          &::-webkit-scrollbar-thumb {
-            background: rgba(147, 112, 219, 0.2);
-            border-radius: 4px;
-            border: 2px solid transparent;
-            background-clip: padding-box;
+          h2 {
+            font-size: 20px;
+          }
 
-            &:hover {
-              background: rgba(147, 112, 219, 0.3);
-              border: 2px solid transparent;
-              background-clip: padding-box;
-            }
+          h3 {
+            font-size: 18px;
           }
 
-          code {
-            background: none;
-            padding: 0;
+          h4 {
+            font-size: 16px;
           }
-        }
 
-        :global {
-          .markdown-body {
-            color: #d4d4d4;
-            background: transparent;
-            padding: 16px;
-
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-              color: rgba(230, 230, 250, 0.95);
-              border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-              margin-top: 24px;
-              margin-bottom: 16px;
-              font-weight: 600;
-              line-height: 1.25;
-            }
+          h5 {
+            font-size: 14px;
+          }
 
-            h1 {
-              font-size: 24px;
-            }
+          h6 {
+            font-size: 13px;
+          }
 
-            h2 {
-              font-size: 20px;
-            }
+          pre {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(147, 112, 219, 0.5);
+            border-radius: 6px;
+            padding: 12px;
+            margin: 12px 0;
+            overflow-x: auto;
 
-            h3 {
-              font-size: 18px;
+            code {
+              background: transparent;
+              padding: 0;
+              color: #f0e6ff;
             }
+          }
 
-            h4 {
-              font-size: 16px;
-            }
+          code {
+            background: rgba(147, 112, 219, 0.2);
+            padding: 2px 6px;
+            border-radius: 4px;
+            color: #f0e6ff;
+            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+          }
 
-            h5 {
-              font-size: 14px;
-            }
+          ul,
+          ol {
+            padding-left: 24px;
+            margin: 8px 0;
 
-            h6 {
-              font-size: 13px;
+            li {
+              margin: 4px 0;
             }
+          }
 
-            pre {
-              background: rgba(0, 0, 0, 0.4);
-              border: 1px solid rgba(147, 112, 219, 0.5);
-              border-radius: 6px;
-              padding: 12px;
-              margin: 12px 0;
-              overflow-x: auto;
+          blockquote {
+            color: rgba(230, 230, 250, 0.85);
+            border-left: 4px solid rgba(147, 112, 219, 0.4);
+            background: rgba(147, 112, 219, 0.1);
+            margin: 16px 0;
+            padding: 12px 16px;
+            border-radius: 0 8px 8px 0;
+          }
 
-              code {
-                background: transparent;
-                padding: 0;
-                color: #f0e6ff;
-              }
-            }
+          a {
+            color: #9370db;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border-bottom: 1px solid transparent;
 
-            code {
-              background: rgba(147, 112, 219, 0.2);
-              padding: 2px 6px;
-              border-radius: 4px;
-              color: #f0e6ff;
-              font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+            &:hover {
+              color: lighten(#9370db, 10%);
+              border-bottom-color: currentColor;
             }
+          }
 
-            ul,
-            ol {
-              padding-left: 24px;
-              margin: 8px 0;
-
-              li {
-                margin: 4px 0;
-              }
+          table {
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+            margin: 16px 0;
+            border-radius: 8px;
+            border: 1px solid rgba(147, 112, 219, 0.2);
+            overflow: hidden;
+
+            th,
+            td {
+              border: 1px solid rgba(147, 112, 219, 0.2);
+              padding: 12px;
             }
 
-            blockquote {
-              color: rgba(230, 230, 250, 0.85);
-              border-left: 4px solid rgba(147, 112, 219, 0.4);
+            th {
               background: rgba(147, 112, 219, 0.1);
-              margin: 16px 0;
-              padding: 12px 16px;
-              border-radius: 0 8px 8px 0;
-            }
-
-            a {
-              color: #9370db;
-              text-decoration: none;
-              transition: all 0.2s ease;
-              border-bottom: 1px solid transparent;
-
-              &:hover {
-                color: lighten(#9370db, 10%);
-                border-bottom-color: currentColor;
-              }
+              font-weight: 600;
+              text-align: left;
             }
 
-            table {
-              border-collapse: separate;
-              border-spacing: 0;
-              width: 100%;
-              margin: 16px 0;
-              border-radius: 8px;
-              border: 1px solid rgba(147, 112, 219, 0.2);
-              overflow: hidden;
-
-              th,
-              td {
-                border: 1px solid rgba(147, 112, 219, 0.2);
-                padding: 12px;
-              }
+            tr {
+              background-color: transparent;
+              transition: background-color 0.2s ease;
 
-              th {
-                background: rgba(147, 112, 219, 0.1);
-                font-weight: 600;
-                text-align: left;
+              &:nth-child(2n) {
+                background-color: rgba(147, 112, 219, 0.05);
               }
 
-              tr {
-                background-color: transparent;
-                transition: background-color 0.2s ease;
-
-                &:nth-child(2n) {
-                  background-color: rgba(147, 112, 219, 0.05);
-                }
-
-                &:hover {
-                  background-color: rgba(147, 112, 219, 0.1);
-                }
+              &:hover {
+                background-color: rgba(147, 112, 219, 0.1);
               }
             }
+          }
 
-            hr {
-              border: none;
-              height: 1px;
-              background: linear-gradient(
-                to right,
+          hr {
+            border: none;
+            height: 1px;
+            background: linear-gradient(to right,
                 rgba(147, 112, 219, 0.1),
                 rgba(147, 112, 219, 0.4),
-                rgba(147, 112, 219, 0.1)
-              );
-              margin: 24px 0;
-            }
+                rgba(147, 112, 219, 0.1));
+            margin: 24px 0;
           }
         }
       }
+    }
 
-      .yaml_content_streamingIndicator {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        padding: 16px;
-
-        .dot {
-          width: 6px;
-          height: 6px;
-          background-color: #4447c3;
-          border-radius: 50%;
-          opacity: 0.3;
-          animation: dotPulse 1.4s infinite;
-
-          &:nth-child(2) {
-            animation-delay: 0.2s;
-          }
+    .yaml_content_streamingIndicator {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 16px;
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #4447c3;
+        border-radius: 50%;
+        opacity: 0.3;
+        animation: dotPulse 1.4s infinite;
+
+        &:nth-child(2) {
+          animation-delay: 0.2s;
+        }
 
-          &:nth-child(3) {
-            animation-delay: 0.4s;
-          }
+        &:nth-child(3) {
+          animation-delay: 0.4s;
         }
       }
+    }
 
-      .yaml_content_streamingIndicatorFixed {
-        position: sticky;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
+    .yaml_content_streamingIndicatorFixed {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
     }
   }
 }
@@ -712,6 +709,7 @@
 }
 
 @keyframes sparkle {
+
   0%,
   100% {
     filter: drop-shadow(0 0 4px rgba(147, 112, 219, 0.4));
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
index 90d50100..fe0e0a75 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
+++ b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
@@ -11,11 +11,13 @@ import {
   Space,
   message,
   Tooltip,
+  Modal,
 } from 'antd'
 import {
   SearchOutlined,
   CloseOutlined,
   PoweroffOutlined,
+  ExpandOutlined,
 } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import { formatTime } from '@/utils/tools'
@@ -69,6 +71,7 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
   const abortControllerRef = useRef<AbortController | null>(null)
   const contentRef = useRef<HTMLDivElement>(null)
   const tableContainerRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
 
   const { aiOptions } = useSelector((state: any) => state.globalSlice)
   const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
@@ -358,7 +361,7 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
   const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
   const dotToTopHeight = diagnosisEndRef.current?.getBoundingClientRect()?.top
 
-  const renderDiagnosisWindow = () => {
+  const renderDiagnosisWindow = isDailog => {
     if (diagnosisStatus === 'idle') {
       return null
     }
@@ -366,7 +369,11 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
     return (
       <div
         className={styles.events_content_diagnosisPanel}
-        style={events_content_diagnosisPanel_style}
+        style={
+          isDailog
+            ? { width: '100%', height: 700 }
+            : events_content_diagnosisPanel_style
+        }
       >
         <div className={styles.events_content_diagnosisHeader}>
           <Space>
@@ -395,16 +402,29 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
                 />
               </Tooltip>
             )}
+            {isDailog ? null : (
+              <Button
+                type="text"
+                icon={<ExpandOutlined />}
+                onClick={() => {
+                  setOpen(!open)
+                }}
+              />
+            )}
             <Button
               type="text"
               icon={<CloseOutlined />}
               onClick={() => {
-                if (abortControllerRef.current) {
-                  abortControllerRef.current.abort()
+                if (isDailog) {
+                  setOpen(false)
+                } else {
+                  if (abortControllerRef.current) {
+                    abortControllerRef.current.abort()
+                  }
+                  setDiagnosisStatus('idle')
+                  setDiagnosis('')
+                  setStreaming(false)
                 }
-                setDiagnosisStatus('idle')
-                setDiagnosis('')
-                setStreaming(false)
               }}
             />
           </Space>
@@ -531,7 +551,25 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
             />
           )}
         </div>
-        {renderDiagnosisWindow()}
+        {renderDiagnosisWindow(false)}
+        <Modal
+          styles={{
+            content: {
+              padding: 0,
+              borderRadius: 16,
+              background:
+                'radial-gradient(ellipse 489px 674px at 6px 0px, #ffffff 0%, #f3efff 100%), radial-gradient(ellipse 587px 672px at 433px 513px, #ece6ff95 0%, #f0e9ff30 100%), radial-gradient(ellipse 346px 396px at 15px 506px, #e9e3ff90 0%, #f0e9ff30 100%), radial-gradient(ellipse 583px 668px at 436px 8px, #ffffff 0%, #f5f0ff30 100%)',
+            },
+          }}
+          centered
+          closable={false}
+          width={'80%'}
+          height={700}
+          open={open}
+          footer={null}
+        >
+          <div style={{ overflow: 'auto' }}>{renderDiagnosisWindow(true)}</div>
+        </Modal>
       </div>
     </div>
   )
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
index 27fcb238..dc6a3d0c 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
+++ b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -240,146 +240,228 @@
       }
     }
 
-    .events_content_diagnosisPanel {
-      width: 400px;
-      border-radius: 12px;
+
+  }
+}
+
+.events_content_diagnosisPanel {
+  width: 400px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+  box-shadow:
+    0 8px 24px rgba(149, 128, 247, 0.08),
+    0 2px 4px rgba(149, 128, 247, 0.12);
+  box-sizing: border-box;
+  border: 1px solid rgba(149, 128, 247, 0.15);
+  background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+      #ffffff 0%,
+      #f3efff 100%),
+    radial-gradient(ellipse 587px 672px at 433px 513px,
+      #ece6ff95 0%,
+      #f0e9ff30 100%),
+    radial-gradient(ellipse 346px 396px at 15px 506px,
+      #e9e3ff90 0%,
+      #f0e9ff30 100%),
+    radial-gradient(ellipse 583px 668px at 436px 8px,
+      #ffffff 0%,
+      #f5f0ff30 100%);
+
+  .events_content_diagnosisHeader {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(149, 128, 247, 0.15);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #000;
+    backdrop-filter: blur(8px);
+    background: linear-gradient(to right,
+        rgba(255, 255, 255, 0.95),
+        rgba(243, 239, 255, 0.95));
+
+    .events_content_diagnosisHeader_aiIcon {
+      width: 18px;
+      height: 18px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .events_content_diagnosisHeader_stopButton {
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 28px;
+      height: 28px;
       display: flex;
-      flex-direction: column;
-      z-index: 10;
-      box-shadow:
-        0 8px 24px rgba(149, 128, 247, 0.08),
-        0 2px 4px rgba(149, 128, 247, 0.12);
-      box-sizing: border-box;
-      border: 1px solid rgba(149, 128, 247, 0.15);
-      background-image: radial-gradient(
-          ellipse 489px 674px at 6px 0px,
-          #ffffff 0%,
-          #f3efff 100%
-        ),
-        radial-gradient(
-          ellipse 587px 672px at 433px 513px,
-          #ece6ff95 0%,
-          #f0e9ff30 100%
-        ),
-        radial-gradient(
-          ellipse 346px 396px at 15px 506px,
-          #e9e3ff90 0%,
-          #f0e9ff30 100%
-        ),
-        radial-gradient(
-          ellipse 583px 668px at 436px 8px,
-          #ffffff 0%,
-          #f5f0ff30 100%
-        );
-
-      .events_content_diagnosisHeader {
-        padding: 12px 16px;
-        border-bottom: 1px solid rgba(149, 128, 247, 0.15);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      margin-right: 8px;
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255, 77, 79, 0);
+        transition: background 0.3s ease;
+        z-index: 0;
+      }
+
+      :global(.anticon) {
         font-size: 16px;
-        font-weight: 500;
-        color: #000;
-        backdrop-filter: blur(8px);
-        background: linear-gradient(
-          to right,
-          rgba(255, 255, 255, 0.95),
-          rgba(243, 239, 255, 0.95)
-        );
-
-        .events_content_diagnosisHeader_aiIcon {
-          width: 18px;
-          height: 18px;
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        z-index: 1;
+      }
+
+      &:hover {
+        color: #ff4d4f;
+        transform: scale(1.05);
+
+        &::before {
+          background: rgba(255, 77, 79, 0.15);
         }
 
-        .events_content_diagnosisHeader_stopButton {
-          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          width: 28px;
-          height: 28px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 6px;
-          margin-right: 8px;
-          position: relative;
-          overflow: hidden;
+        :global(.anticon) {
+          transform: rotate(180deg) scale(1.1);
+        }
+      }
 
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(255, 77, 79, 0);
-            transition: background 0.3s ease;
-            z-index: 0;
-          }
+      &:active {
+        transform: scale(0.95);
 
-          :global(.anticon) {
-            font-size: 16px;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            z-index: 1;
-          }
+        &::before {
+          background: rgba(255, 77, 79, 0.25);
+        }
+      }
+    }
 
-          &:hover {
-            color: #ff4d4f;
-            transform: scale(1.05);
+    button {
+      transition: all 0.3s ease;
+      border-radius: 6px;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-            &::before {
-              background: rgba(255, 77, 79, 0.15);
-            }
+      &:hover {
+        color: #fff !important;
+        background: rgba(147, 112, 219, 0.2) !important;
+        transform: scale(1.05) !important;
+      }
 
-            :global(.anticon) {
-              transform: rotate(180deg) scale(1.1);
-            }
-          }
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
 
-          &:active {
-            transform: scale(0.95);
+  .events_content_diagnosisBody {
+    position: relative;
+    overflow-y: auto;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 0 0 12px 12px;
 
-            &::before {
-              background: rgba(255, 77, 79, 0.25);
-            }
-          }
-        }
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
 
-        button {
-          transition: all 0.3s ease;
-          border-radius: 6px;
-          width: 28px;
-          height: 28px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+    &::-webkit-scrollbar-track {
+      background: rgba(147, 112, 219, 0.05);
+      border-radius: 4px;
+    }
 
-          &:hover {
-            color: #fff;
-            background: rgba(147, 112, 219, 0.2);
-            transform: scale(1.05);
-          }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 112, 219, 0.2);
+      border-radius: 4px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
 
-          &:active {
-            transform: scale(0.95);
-          }
-        }
+      &:hover {
+        background: rgba(147, 112, 219, 0.3);
+        border: 2px solid transparent;
+        background-clip: padding-box;
+      }
+    }
+
+    .events_content_diagnosisContent {
+      color: #000;
+      border-radius: 0 0 12px 12px;
+      padding: 20px 16px;
+      font-size: 14px;
+      line-height: 1.6;
+      box-sizing: border-box;
+      word-wrap: break-word;
+
+      h1,
+      h2,
+      h3 {
+        color: #000;
+        margin-bottom: 16px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
       }
 
-      .events_content_diagnosisBody {
-        position: relative;
-        overflow-y: auto;
-        height: 100%;
-        box-sizing: border-box;
-        border-radius: 0 0 12px 12px;
+      h1 {
+        font-size: 20px;
+      }
+
+      h2 {
+        font-size: 18px;
+        margin-top: 10px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+      }
+
+      h3 {
+        font-size: 16px;
+        margin-top: 20px;
+      }
+
+      p {
+        margin-bottom: 16px;
+        line-height: 1.7;
+      }
+
+      ul,
+      ol {
+        padding-left: 24px;
+        margin-bottom: 16px;
+      }
+
+      li {
+        margin-bottom: 8px;
+      }
+
+      code {
+        background: rgba(147, 112, 219, 0.1);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+        font-size: 13px;
+      }
+
+      pre {
+        background: #000;
+        padding: 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        overflow-x: auto;
+        border: 1px solid rgba(147, 112, 219, 0.1);
 
         &::-webkit-scrollbar {
           width: 8px;
@@ -387,12 +469,12 @@
         }
 
         &::-webkit-scrollbar-track {
-          background: rgba(147, 112, 219, 0.05);
+          background: rgba(214, 199, 244, 0.05);
           border-radius: 4px;
         }
 
         &::-webkit-scrollbar-thumb {
-          background: rgba(147, 112, 219, 0.2);
+          background: rgba(237, 234, 242, 0.3);
           border-radius: 4px;
           border: 2px solid transparent;
           background-clip: padding-box;
@@ -404,304 +486,212 @@
           }
         }
 
-        .events_content_diagnosisContent {
-          color: #000;
-          border-radius: 0 0 12px 12px;
-          padding: 20px 16px;
+        code {
+          background: none;
+          padding: 0;
+          color: #fff;
+        }
+      }
+
+      .events_content_diagnosisLoading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: 16px;
+        text-align: center;
+        color: rgba(230, 230, 250, 0.85);
+
+        :global(.ant-spin) {
+          .ant-spin-dot-item {
+            background-color: #9370db;
+          }
+        }
+
+        p {
           font-size: 14px;
-          line-height: 1.6;
-          box-sizing: border-box;
-          word-wrap: break-word;
+          margin-top: 16px;
+          color: rgba(230, 230, 250, 0.85);
+        }
+      }
+
+      :global {
+        .markdown-body {
+          color: #d4d4d4;
+          background: transparent;
+          padding: 16px;
 
           h1,
           h2,
-          h3 {
-            color: #000;
+          h3,
+          h4,
+          h5,
+          h6 {
+            color: rgba(230, 230, 250, 0.95);
+            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+            margin-top: 24px;
             margin-bottom: 16px;
             font-weight: 600;
-            letter-spacing: -0.01em;
+            line-height: 1.25;
           }
 
           h1 {
-            font-size: 20px;
+            font-size: 24px;
           }
 
           h2 {
-            font-size: 18px;
-            margin-top: 10px;
-            padding-bottom: 8px;
-            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+            font-size: 20px;
           }
 
           h3 {
-            font-size: 16px;
-            margin-top: 20px;
-          }
-
-          p {
-            margin-bottom: 16px;
-            line-height: 1.7;
+            font-size: 18px;
           }
 
-          ul,
-          ol {
-            padding-left: 24px;
-            margin-bottom: 16px;
+          h4 {
+            font-size: 16px;
           }
 
-          li {
-            margin-bottom: 8px;
+          h5 {
+            font-size: 14px;
           }
 
-          code {
-            background: rgba(147, 112, 219, 0.1);
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+          h6 {
             font-size: 13px;
           }
 
           pre {
-            background: #000;
-            padding: 16px;
-            border-radius: 8px;
-            margin-bottom: 16px;
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(147, 112, 219, 0.5);
+            border-radius: 6px;
+            padding: 12px;
+            margin: 12px 0;
             overflow-x: auto;
-            border: 1px solid rgba(147, 112, 219, 0.1);
-
-            &::-webkit-scrollbar {
-              width: 8px;
-              height: 8px;
-            }
-
-            &::-webkit-scrollbar-track {
-              background: rgba(214, 199, 244, 0.05);
-              border-radius: 4px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-              background: rgba(237, 234, 242, 0.3);
-              border-radius: 4px;
-              border: 2px solid transparent;
-              background-clip: padding-box;
-
-              &:hover {
-                background: rgba(147, 112, 219, 0.3);
-                border: 2px solid transparent;
-                background-clip: padding-box;
-              }
-            }
 
             code {
-              background: none;
+              background: transparent;
               padding: 0;
-              color: #fff;
+              color: #f0e6ff;
             }
           }
 
-          .events_content_diagnosisLoading {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            gap: 16px;
-            text-align: center;
-            color: rgba(230, 230, 250, 0.85);
+          code {
+            background: rgba(147, 112, 219, 0.2);
+            padding: 2px 6px;
+            border-radius: 4px;
+            color: #f0e6ff;
+            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+          }
 
-            :global(.ant-spin) {
-              .ant-spin-dot-item {
-                background-color: #9370db;
-              }
-            }
+          ul,
+          ol {
+            padding-left: 24px;
+            margin: 8px 0;
 
-            p {
-              font-size: 14px;
-              margin-top: 16px;
-              color: rgba(230, 230, 250, 0.85);
+            li {
+              margin: 4px 0;
             }
           }
 
-          :global {
-            .markdown-body {
-              color: #d4d4d4;
-              background: transparent;
-              padding: 16px;
-
-              h1,
-              h2,
-              h3,
-              h4,
-              h5,
-              h6 {
-                color: rgba(230, 230, 250, 0.95);
-                border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-                margin-top: 24px;
-                margin-bottom: 16px;
-                font-weight: 600;
-                line-height: 1.25;
-              }
-
-              h1 {
-                font-size: 24px;
-              }
-
-              h2 {
-                font-size: 20px;
-              }
-
-              h3 {
-                font-size: 18px;
-              }
-
-              h4 {
-                font-size: 16px;
-              }
-
-              h5 {
-                font-size: 14px;
-              }
-
-              h6 {
-                font-size: 13px;
-              }
-
-              pre {
-                background: rgba(0, 0, 0, 0.4);
-                border: 1px solid rgba(147, 112, 219, 0.5);
-                border-radius: 6px;
-                padding: 12px;
-                margin: 12px 0;
-                overflow-x: auto;
-
-                code {
-                  background: transparent;
-                  padding: 0;
-                  color: #f0e6ff;
-                }
-              }
+          blockquote {
+            color: rgba(230, 230, 250, 0.85);
+            border-left: 4px solid rgba(147, 112, 219, 0.4);
+            background: rgba(147, 112, 219, 0.1);
+            margin: 16px 0;
+            padding: 12px 16px;
+            border-radius: 0 8px 8px 0;
+          }
 
-              code {
-                background: rgba(147, 112, 219, 0.2);
-                padding: 2px 6px;
-                border-radius: 4px;
-                color: #f0e6ff;
-                font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-              }
+          a {
+            color: #9370db;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border-bottom: 1px solid transparent;
 
-              ul,
-              ol {
-                padding-left: 24px;
-                margin: 8px 0;
+            &:hover {
+              color: lighten(#9370db, 10%);
+              border-bottom-color: currentColor;
+            }
+          }
 
-                li {
-                  margin: 4px 0;
-                }
-              }
+          table {
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+            margin: 16px 0;
+            border-radius: 8px;
+            border: 1px solid rgba(147, 112, 219, 0.2);
+            overflow: hidden;
 
-              blockquote {
-                color: rgba(230, 230, 250, 0.85);
-                border-left: 4px solid rgba(147, 112, 219, 0.4);
-                background: rgba(147, 112, 219, 0.1);
-                margin: 16px 0;
-                padding: 12px 16px;
-                border-radius: 0 8px 8px 0;
-              }
+            th,
+            td {
+              border: 1px solid rgba(147, 112, 219, 0.2);
+              padding: 12px;
+            }
 
-              a {
-                color: #9370db;
-                text-decoration: none;
-                transition: all 0.2s ease;
-                border-bottom: 1px solid transparent;
+            th {
+              background: rgba(147, 112, 219, 0.1);
+              font-weight: 600;
+              text-align: left;
+            }
 
-                &:hover {
-                  color: lighten(#9370db, 10%);
-                  border-bottom-color: currentColor;
-                }
-              }
+            tr {
+              background-color: transparent;
+              transition: background-color 0.2s ease;
 
-              table {
-                border-collapse: separate;
-                border-spacing: 0;
-                width: 100%;
-                margin: 16px 0;
-                border-radius: 8px;
-                border: 1px solid rgba(147, 112, 219, 0.2);
-                overflow: hidden;
-
-                th,
-                td {
-                  border: 1px solid rgba(147, 112, 219, 0.2);
-                  padding: 12px;
-                }
-
-                th {
-                  background: rgba(147, 112, 219, 0.1);
-                  font-weight: 600;
-                  text-align: left;
-                }
-
-                tr {
-                  background-color: transparent;
-                  transition: background-color 0.2s ease;
-
-                  &:nth-child(2n) {
-                    background-color: rgba(147, 112, 219, 0.05);
-                  }
-
-                  &:hover {
-                    background-color: rgba(147, 112, 219, 0.1);
-                  }
-                }
+              &:nth-child(2n) {
+                background-color: rgba(147, 112, 219, 0.05);
               }
 
-              hr {
-                border: none;
-                height: 1px;
-                background: linear-gradient(
-                  to right,
-                  rgba(147, 112, 219, 0.1),
-                  rgba(147, 112, 219, 0.4),
-                  rgba(147, 112, 219, 0.1)
-                );
-                margin: 24px 0;
+              &:hover {
+                background-color: rgba(147, 112, 219, 0.1);
               }
             }
           }
-        }
 
-        .events_content_streamingIndicator {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          padding: 16px;
-
-          .dot {
-            width: 6px;
-            height: 6px;
-            background-color: #4447c3;
-            border-radius: 50%;
-            opacity: 0.3;
-            animation: dotPulse 1.4s infinite;
-
-            &:nth-child(2) {
-              animation-delay: 0.2s;
-            }
-
-            &:nth-child(3) {
-              animation-delay: 0.4s;
-            }
+          hr {
+            border: none;
+            height: 1px;
+            background: linear-gradient(to right,
+                rgba(147, 112, 219, 0.1),
+                rgba(147, 112, 219, 0.4),
+                rgba(147, 112, 219, 0.1));
+            margin: 24px 0;
           }
         }
+      }
+    }
 
-        .events_content_streamingIndicatorFixed {
-          position: sticky;
-          bottom: 0;
-          left: 0;
-          right: 0;
+    .events_content_streamingIndicator {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 16px;
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #4447c3;
+        border-radius: 50%;
+        opacity: 0.3;
+        animation: dotPulse 1.4s infinite;
+
+        &:nth-child(2) {
+          animation-delay: 0.2s;
+        }
+
+        &:nth-child(3) {
+          animation-delay: 0.4s;
         }
       }
     }
+
+    .events_content_streamingIndicatorFixed {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
   }
 }
 
@@ -756,12 +746,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-      120deg,
-      transparent,
-      rgba(255, 255, 255, 0.6),
-      transparent
-    );
+    background: linear-gradient(120deg,
+        transparent,
+        rgba(255, 255, 255, 0.6),
+        transparent);
     transform: translateX(-100%);
   }
 
@@ -787,7 +775,7 @@
     .ant-table {
       background: transparent;
 
-      .ant-table-thead > tr > th {
+      .ant-table-thead>tr>th {
         background: #fafafa;
         font-weight: 500;
         border-bottom: 1px solid #f0f0f0;
@@ -795,7 +783,7 @@
       }
 
       .ant-table-tbody {
-        > tr {
+        >tr {
           transition: all 0.2s ease;
 
           &:hover {
@@ -804,7 +792,7 @@
             z-index: 1;
           }
 
-          > td {
+          >td {
             transition: background-color 0.2s ease;
           }
         }
@@ -851,13 +839,11 @@
       .ant-skeleton-paragraph {
         margin-bottom: 0;
 
-        > li {
-          background: linear-gradient(
-            90deg,
-            #f5f5f5 25%,
-            #e8e8e8 37%,
-            #f5f5f5 63%
-          );
+        >li {
+          background: linear-gradient(90deg,
+              #f5f5f5 25%,
+              #e8e8e8 37%,
+              #f5f5f5 63%);
           background-size: 400% 100%;
           animation: ant-skeleton-loading 1.4s ease infinite;
         }
diff --git a/ui/src/pages/insightDetail/components/exceptionList/index.tsx b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
index 40578802..2c91e2c5 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/index.tsx
+++ b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react'
-import { Button, Empty, Tag, Space, Tooltip, Alert, Spin } from 'antd'
+import { Button, Empty, Tag, Space, Tooltip, Alert, Spin, Modal } from 'antd'
 import { useTranslation } from 'react-i18next'
 import {
   ArrowRightOutlined,
@@ -8,6 +8,7 @@ import {
   PoweroffOutlined,
   CloseOutlined,
   RedoOutlined,
+  ExpandOutlined,
 } from '@ant-design/icons'
 import Loading from '@/components/loading'
 import { SEVERITY_MAP } from '@/utils/constants'
@@ -57,6 +58,7 @@ const ExceptionList = ({
   const exceptionRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
   const interpretBodyRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     setIsShowList(
@@ -238,7 +240,7 @@ const ExceptionList = ({
   const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
   const dotToTopHeight = interpretEndRef.current?.getBoundingClientRect()?.top
 
-  const renderInterpretWindow = () => {
+  const renderInterpretWindow = isDailog => {
     if (interpretStatus === 'idle') {
       return null
     }
@@ -246,7 +248,10 @@ const ExceptionList = ({
     return (
       <div
         className={styles.interpret_panel}
-        style={{ height: exceptionRef?.current?.offsetHeight }}
+        style={{
+          height: isDailog ? 700 : exceptionRef?.current?.offsetHeight,
+          ...(isDailog ? { width: '100%' } : {}),
+        }}
       >
         <div className={styles.interpret_header}>
           <Space>
@@ -275,16 +280,29 @@ const ExceptionList = ({
                 />
               </Tooltip>
             )}
+            {isDailog ? null : (
+              <Button
+                type="text"
+                icon={<ExpandOutlined />}
+                onClick={() => {
+                  setOpen(!open)
+                }}
+              />
+            )}
             <Button
               type="text"
               icon={<CloseOutlined />}
               onClick={() => {
-                if (abortControllerRef.current) {
-                  abortControllerRef.current.abort()
+                if (isDailog) {
+                  setOpen(false)
+                } else {
+                  if (abortControllerRef.current) {
+                    abortControllerRef.current.abort()
+                  }
+                  setInterpretStatus('idle')
+                  setInterpret('')
+                  setStreaming(false)
                 }
-                setInterpretStatus('idle')
-                setInterpret('')
-                setStreaming(false)
               }}
             />
           </Space>
@@ -484,7 +502,25 @@ const ExceptionList = ({
           </div>
         )}
       </div>
-      {renderInterpretWindow()}
+      {renderInterpretWindow(false)}
+      <Modal
+        styles={{
+          content: {
+            padding: 0,
+            borderRadius: 16,
+            background:
+              'radial-gradient(circle at center,rgba(149, 128, 247, 0.03) 0%,transparent 70%)',
+          },
+        }}
+        centered
+        closable={false}
+        width={'80%'}
+        height={700}
+        open={open}
+        footer={null}
+      >
+        <div style={{ overflow: 'auto' }}>{renderInterpretWindow(true)}</div>
+      </Modal>
     </div>
   )
 }
diff --git a/ui/src/pages/insightDetail/components/exceptionList/style.module.less b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
index f766c3ff..2ed61d1e 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/style.module.less
+++ b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
@@ -65,11 +65,9 @@
             left: 50%;
             width: 100%;
             height: 100%;
-            background: radial-gradient(
-              circle,
-              rgba(0, 0, 0, 0.06) 0%,
-              transparent 70%
-            );
+            background: radial-gradient(circle,
+                rgba(0, 0, 0, 0.06) 0%,
+                transparent 70%);
             transform: translate(-50%, -50%) scale(0);
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             pointer-events: none;
@@ -363,492 +361,478 @@
       }
     }
   }
+}
 
-  .interpret_panel {
-    width: 400px;
-    border-radius: 12px;
-    box-shadow:
-      0 8px 24px rgba(149, 128, 247, 0.08),
-      0 2px 4px rgba(149, 128, 247, 0.12);
-    border: 1px solid rgba(149, 128, 247, 0.15);
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    background-image: radial-gradient(
-        ellipse 489px 674px at 6px 0px,
-        #ffffff 0%,
-        #f3efff 100%
-      ),
-      radial-gradient(
-        ellipse 587px 672px at 433px 513px,
-        #ece6ff95 0%,
-        #f0e9ff30 100%
-      ),
-      radial-gradient(
-        ellipse 346px 396px at 15px 506px,
-        #e9e3ff90 0%,
-        #f0e9ff30 100%
-      ),
-      radial-gradient(
-        ellipse 583px 668px at 436px 8px,
-        #ffffff 0%,
-        #f5f0ff30 100%
-      );
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(
-        circle at center,
+.interpret_panel {
+  width: 400px;
+  border-radius: 12px;
+  box-shadow:
+    0 8px 24px rgba(149, 128, 247, 0.08),
+    0 2px 4px rgba(149, 128, 247, 0.12);
+  border: 1px solid rgba(149, 128, 247, 0.15);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+      #ffffff 0%,
+      #f3efff 100%),
+    radial-gradient(ellipse 587px 672px at 433px 513px,
+      #ece6ff95 0%,
+      #f0e9ff30 100%),
+    radial-gradient(ellipse 346px 396px at 15px 506px,
+      #e9e3ff90 0%,
+      #f0e9ff30 100%),
+    radial-gradient(ellipse 583px 668px at 436px 8px,
+      #ffffff 0%,
+      #f5f0ff30 100%);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle at center,
         rgba(149, 128, 247, 0.03) 0%,
-        transparent 70%
-      );
-      animation: rotate 60s linear infinite;
-      pointer-events: none;
-    }
+        transparent 70%);
+    animation: rotate 60s linear infinite;
+    pointer-events: none;
+  }
 
-    .interpret_header {
-      padding: 12px 16px;
-      border-bottom: 1px solid rgba(149, 128, 247, 0.15);
+  .interpret_header {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(149, 128, 247, 0.15);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #000;
+    backdrop-filter: blur(8px);
+    background: linear-gradient(to right,
+        rgba(255, 255, 255, 0.95),
+        rgba(243, 239, 255, 0.95));
+
+    .interpret_header_stopButton {
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 28px;
+      height: 28px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      border-top-left-radius: 12px;
-      border-top-right-radius: 12px;
-      font-size: 16px;
-      font-weight: 500;
-      color: #000;
-      backdrop-filter: blur(8px);
-      background: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0.95),
-        rgba(243, 239, 255, 0.95)
-      );
+      justify-content: center;
+      border-radius: 6px;
+      margin-right: 8px;
+      position: relative;
+      overflow: hidden;
 
-      .interpret_header_stopButton {
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        width: 28px;
-        height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 6px;
-        margin-right: 8px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255, 77, 79, 0);
+        transition: background 0.3s ease;
+        z-index: 0;
+      }
+
+      :global(.anticon) {
+        font-size: 16px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
-        overflow: hidden;
+        z-index: 1;
+      }
+
+      &:hover {
+        color: #ff4d4f;
+        transform: scale(1.05);
 
         &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(255, 77, 79, 0);
-          transition: background 0.3s ease;
-          z-index: 0;
+          background: rgba(255, 77, 79, 0.15);
         }
 
         :global(.anticon) {
-          font-size: 16px;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          position: relative;
-          z-index: 1;
-        }
-
-        &:hover {
-          color: #ff4d4f;
-          transform: scale(1.05);
-
-          &::before {
-            background: rgba(255, 77, 79, 0.15);
-          }
-
-          :global(.anticon) {
-            transform: rotate(180deg) scale(1.1);
-          }
+          transform: rotate(180deg) scale(1.1);
         }
+      }
 
-        &:active {
-          transform: scale(0.95);
+      &:active {
+        transform: scale(0.95);
 
-          &::before {
-            background: rgba(255, 77, 79, 0.25);
-          }
+        &::before {
+          background: rgba(255, 77, 79, 0.25);
         }
       }
+    }
 
-      button {
-        transition: all 0.3s ease;
-        border-radius: 6px;
-        width: 28px;
-        height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    button {
+      transition: all 0.3s ease;
+      border-radius: 6px;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-        &:hover {
-          color: #fff;
-          background: rgba(147, 112, 219, 0.2);
-          transform: scale(1.05);
-        }
+      &:hover {
+        color: #fff;
+        background: rgba(147, 112, 219, 0.2);
+        transform: scale(1.05);
+      }
 
-        &:active {
-          transform: scale(0.95);
-        }
+      &:active {
+        transform: scale(0.95);
       }
+    }
 
-      .interpret_close {
-        cursor: pointer;
-        color: #999;
-        transition: all 0.3s ease;
-        padding: 4px;
-        border-radius: 4px;
+    .interpret_close {
+      cursor: pointer;
+      color: #999;
+      transition: all 0.3s ease;
+      padding: 4px;
+      border-radius: 4px;
 
-        &:hover {
-          color: #000;
-          background: rgba(0, 0, 0, 0.06);
-        }
+      &:hover {
+        color: #000;
+        background: rgba(0, 0, 0, 0.06);
       }
     }
+  }
 
-    .interpret_body {
-      position: relative;
-      overflow-y: auto;
-      height: 100%;
-      box-sizing: border-box;
-      border-radius: 0 0 12px 12px;
+  .interpret_body {
+    position: relative;
+    overflow-y: auto;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 0 0 12px 12px;
 
-      &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
 
-      &::-webkit-scrollbar-track {
-        background: rgba(147, 112, 219, 0.05);
-        border-radius: 4px;
-      }
+    &::-webkit-scrollbar-track {
+      background: rgba(147, 112, 219, 0.05);
+      border-radius: 4px;
+    }
 
-      &::-webkit-scrollbar-thumb {
-        background: rgba(147, 112, 219, 0.2);
-        border-radius: 4px;
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 112, 219, 0.2);
+      border-radius: 4px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+
+      &:hover {
+        background: rgba(147, 112, 219, 0.3);
         border: 2px solid transparent;
         background-clip: padding-box;
+      }
+    }
 
-        &:hover {
-          background: rgba(147, 112, 219, 0.3);
-          border: 2px solid transparent;
-          background-clip: padding-box;
+    .interpret_content {
+      color: #000;
+      border-radius: 0 0 12px 12px;
+      padding: 20px 16px;
+      font-size: 14px;
+      line-height: 1.6;
+      box-sizing: border-box;
+      word-wrap: break-word;
+
+      .interpret_loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: 16px;
+        text-align: center;
+        color: rgba(230, 230, 250, 0.85);
+
+        :global(.ant-spin) {
+          .ant-spin-dot-item {
+            background-color: #9370db;
+          }
         }
+
+        p {
+          font-size: 14px;
+          margin-top: 16px;
+          color: rgba(230, 230, 250, 0.85);
+        }
+      }
+
+      .interpret_error {
+        margin: 16px;
+        border-radius: 6px;
       }
 
-      .interpret_content {
+      h1,
+      h2,
+      h3 {
         color: #000;
-        border-radius: 0 0 12px 12px;
-        padding: 20px 16px;
-        font-size: 14px;
-        line-height: 1.6;
-        box-sizing: border-box;
-        word-wrap: break-word;
+        margin-bottom: 16px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
 
-        .interpret_loading {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-          gap: 16px;
-          text-align: center;
-          color: rgba(230, 230, 250, 0.85);
+      h1 {
+        font-size: 20px;
+      }
 
-          :global(.ant-spin) {
-            .ant-spin-dot-item {
-              background-color: #9370db;
-            }
-          }
+      h2 {
+        font-size: 18px;
+        margin-top: 10px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+      }
 
-          p {
-            font-size: 14px;
-            margin-top: 16px;
-            color: rgba(230, 230, 250, 0.85);
-          }
-        }
+      h3 {
+        font-size: 16px;
+        margin-top: 20px;
+      }
 
-        .interpret_error {
-          margin: 16px;
-          border-radius: 6px;
-        }
+      p {
+        margin-bottom: 16px;
+        line-height: 1.7;
+      }
 
-        h1,
-        h2,
-        h3 {
-          color: #000;
-          margin-bottom: 16px;
-          font-weight: 600;
-          letter-spacing: -0.01em;
-        }
+      ul,
+      ol {
+        padding-left: 24px;
+        margin-bottom: 16px;
+      }
 
-        h1 {
-          font-size: 20px;
-        }
+      li {
+        margin-bottom: 8px;
+      }
 
-        h2 {
-          font-size: 18px;
-          margin-top: 10px;
-          padding-bottom: 8px;
-          border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-        }
+      code {
+        background: rgba(147, 112, 219, 0.1);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+        font-size: 13px;
+      }
 
-        h3 {
-          font-size: 16px;
-          margin-top: 20px;
-        }
+      pre {
+        background: #000;
+        padding: 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        overflow-x: auto;
+        border: 1px solid rgba(147, 112, 219, 0.1);
 
-        p {
-          margin-bottom: 16px;
-          line-height: 1.7;
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
         }
 
-        ul,
-        ol {
-          padding-left: 24px;
-          margin-bottom: 16px;
+        &::-webkit-scrollbar-track {
+          background: rgba(214, 199, 244, 0.05);
+          border-radius: 4px;
         }
 
-        li {
-          margin-bottom: 8px;
+        &::-webkit-scrollbar-thumb {
+          background: rgba(237, 234, 242, 0.3);
+          border-radius: 4px;
+          border: 2px solid transparent;
+          background-clip: padding-box;
+
+          &:hover {
+            background: rgba(147, 112, 219, 0.3);
+            border: 2px solid transparent;
+            background-clip: padding-box;
+          }
         }
 
         code {
-          background: rgba(147, 112, 219, 0.1);
-          padding: 2px 6px;
-          border-radius: 4px;
-          font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-          font-size: 13px;
+          background: none;
+          padding: 0;
+          color: #fff;
         }
+      }
 
-        pre {
-          background: #000;
+      :global {
+        .markdown-body {
+          color: #d4d4d4;
+          background: transparent;
           padding: 16px;
-          border-radius: 8px;
-          margin-bottom: 16px;
-          overflow-x: auto;
-          border: 1px solid rgba(147, 112, 219, 0.1);
 
-          &::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            color: rgba(230, 230, 250, 0.95);
+            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
           }
 
-          &::-webkit-scrollbar-track {
-            background: rgba(214, 199, 244, 0.05);
-            border-radius: 4px;
+          h1 {
+            font-size: 24px;
           }
 
-          &::-webkit-scrollbar-thumb {
-            background: rgba(237, 234, 242, 0.3);
-            border-radius: 4px;
-            border: 2px solid transparent;
-            background-clip: padding-box;
+          h2 {
+            font-size: 20px;
+          }
 
-            &:hover {
-              background: rgba(147, 112, 219, 0.3);
-              border: 2px solid transparent;
-              background-clip: padding-box;
-            }
+          h3 {
+            font-size: 18px;
           }
 
-          code {
-            background: none;
-            padding: 0;
-            color: #fff;
+          h4 {
+            font-size: 16px;
           }
-        }
 
-        :global {
-          .markdown-body {
-            color: #d4d4d4;
-            background: transparent;
-            padding: 16px;
-
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-              color: rgba(230, 230, 250, 0.95);
-              border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-              margin-top: 24px;
-              margin-bottom: 16px;
-              font-weight: 600;
-              line-height: 1.25;
-            }
+          h5 {
+            font-size: 14px;
+          }
 
-            h1 {
-              font-size: 24px;
-            }
+          h6 {
+            font-size: 13px;
+          }
 
-            h2 {
-              font-size: 20px;
-            }
+          pre {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(147, 112, 219, 0.5);
+            border-radius: 6px;
+            padding: 12px;
+            margin: 12px 0;
+            overflow-x: auto;
 
-            h3 {
-              font-size: 18px;
+            code {
+              background: transparent;
+              padding: 0;
+              color: #f0e6ff;
             }
+          }
 
-            h4 {
-              font-size: 16px;
-            }
+          code {
+            background: rgba(147, 112, 219, 0.2);
+            padding: 2px 6px;
+            border-radius: 4px;
+            color: #f0e6ff;
+            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+          }
 
-            h5 {
-              font-size: 14px;
-            }
+          ul,
+          ol {
+            padding-left: 24px;
+            margin: 8px 0;
 
-            h6 {
-              font-size: 13px;
+            li {
+              margin: 4px 0;
             }
+          }
 
-            pre {
-              background: rgba(0, 0, 0, 0.4);
-              border: 1px solid rgba(147, 112, 219, 0.5);
-              border-radius: 6px;
-              padding: 12px;
-              margin: 12px 0;
-              overflow-x: auto;
+          blockquote {
+            color: rgba(230, 230, 250, 0.85);
+            border-left: 4px solid rgba(147, 112, 219, 0.4);
+            background: rgba(147, 112, 219, 0.1);
+            margin: 16px 0;
+            padding: 12px 16px;
+            border-radius: 0 8px 8px 0;
+          }
 
-              code {
-                background: transparent;
-                padding: 0;
-                color: #f0e6ff;
-              }
-            }
+          a {
+            color: #9370db;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border-bottom: 1px solid transparent;
 
-            code {
-              background: rgba(147, 112, 219, 0.2);
-              padding: 2px 6px;
-              border-radius: 4px;
-              color: #f0e6ff;
-              font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+            &:hover {
+              color: lighten(#9370db, 10%);
+              border-bottom-color: currentColor;
             }
+          }
 
-            ul,
-            ol {
-              padding-left: 24px;
-              margin: 8px 0;
+          table {
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+            margin: 16px 0;
+            border-radius: 8px;
+            border: 1px solid rgba(147, 112, 219, 0.2);
+            overflow: hidden;
 
-              li {
-                margin: 4px 0;
-              }
+            th,
+            td {
+              border: 1px solid rgba(147, 112, 219, 0.2);
+              padding: 12px;
             }
 
-            blockquote {
-              color: rgba(230, 230, 250, 0.85);
-              border-left: 4px solid rgba(147, 112, 219, 0.4);
+            th {
               background: rgba(147, 112, 219, 0.1);
-              margin: 16px 0;
-              padding: 12px 16px;
-              border-radius: 0 8px 8px 0;
+              font-weight: 600;
+              text-align: left;
             }
 
-            a {
-              color: #9370db;
-              text-decoration: none;
-              transition: all 0.2s ease;
-              border-bottom: 1px solid transparent;
+            tr {
+              background-color: transparent;
+              transition: background-color 0.2s ease;
 
-              &:hover {
-                color: lighten(#9370db, 10%);
-                border-bottom-color: currentColor;
+              &:nth-child(2n) {
+                background-color: rgba(147, 112, 219, 0.05);
               }
-            }
-
-            table {
-              border-collapse: separate;
-              border-spacing: 0;
-              width: 100%;
-              margin: 16px 0;
-              border-radius: 8px;
-              border: 1px solid rgba(147, 112, 219, 0.2);
-              overflow: hidden;
 
-              th,
-              td {
-                border: 1px solid rgba(147, 112, 219, 0.2);
-                padding: 12px;
-              }
-
-              th {
-                background: rgba(147, 112, 219, 0.1);
-                font-weight: 600;
-                text-align: left;
-              }
-
-              tr {
-                background-color: transparent;
-                transition: background-color 0.2s ease;
-
-                &:nth-child(2n) {
-                  background-color: rgba(147, 112, 219, 0.05);
-                }
-
-                &:hover {
-                  background-color: rgba(147, 112, 219, 0.1);
-                }
+              &:hover {
+                background-color: rgba(147, 112, 219, 0.1);
               }
             }
+          }
 
-            hr {
-              border: none;
-              height: 1px;
-              background: linear-gradient(
-                to right,
+          hr {
+            border: none;
+            height: 1px;
+            background: linear-gradient(to right,
                 rgba(147, 112, 219, 0.1),
                 rgba(147, 112, 219, 0.4),
-                rgba(147, 112, 219, 0.1)
-              );
-              margin: 24px 0;
-            }
+                rgba(147, 112, 219, 0.1));
+            margin: 24px 0;
           }
         }
       }
+    }
 
-      .streaming_indicator {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        padding: 16px;
-
-        .dot {
-          width: 6px;
-          height: 6px;
-          background-color: #4447c3;
-          border-radius: 50%;
-          opacity: 0.3;
-          animation: dotPulse 1.4s infinite;
-
-          &:nth-child(2) {
-            animation-delay: 0.2s;
-          }
+    .streaming_indicator {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 16px;
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #4447c3;
+        border-radius: 50%;
+        opacity: 0.3;
+        animation: dotPulse 1.4s infinite;
+
+        &:nth-child(2) {
+          animation-delay: 0.2s;
+        }
 
-          &:nth-child(3) {
-            animation-delay: 0.4s;
-          }
+        &:nth-child(3) {
+          animation-delay: 0.4s;
         }
       }
+    }
 
-      .streaming_indicatorFixed {
-        position: sticky;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
+    .streaming_indicatorFixed {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
     }
   }
 }
diff --git a/ui/src/pages/insightDetail/components/podLogs/index.tsx b/ui/src/pages/insightDetail/components/podLogs/index.tsx
index 670ee890..65bbb1a9 100644
--- a/ui/src/pages/insightDetail/components/podLogs/index.tsx
+++ b/ui/src/pages/insightDetail/components/podLogs/index.tsx
@@ -26,6 +26,7 @@ import {
   FilterOutlined,
   FullscreenOutlined,
   FullscreenExitOutlined,
+  ExpandOutlined,
 } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import yaml from 'js-yaml'
@@ -100,6 +101,7 @@ const PodLogs: React.FC<PodLogsProps> = ({
   const eventSourceRef = useRef<EventSource | null>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
   const contentRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     if (yamlData) {
@@ -635,6 +637,106 @@ const PodLogs: React.FC<PodLogsProps> = ({
   const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
   const dotToTopHeight = diagnosisEndRef.current?.getBoundingClientRect()?.top
 
+  function renderAiAnalysis(isDailog) {
+    const panelStyle = isDailog
+      ? { width: '100%', height: 700, overflow: 'auto' }
+      : {}
+    return (
+      diagnosisStatus !== 'idle' && (
+        <div className={styles.diagnosisPanel} style={panelStyle}>
+          <div className={styles.diagnosisHeader}>
+            <Space>
+              <div className={styles.diagnosisHeader_aiIcon}>
+                <img src={aiSummarySvg} alt="ai summary" />
+              </div>
+              {t('LogAggregator.DiagnosisResult')}
+            </Space>
+            <Space>
+              {diagnosisStatus === 'streaming' && (
+                <Tooltip
+                  title={t('LogAggregator.StopDiagnosis')}
+                  placement="bottom"
+                >
+                  <Button
+                    type="text"
+                    className={styles.stopButton}
+                    icon={<PoweroffOutlined />}
+                    onClick={() => {
+                      if (abortControllerRef.current) {
+                        abortControllerRef.current.abort()
+                        setDiagnosisStatus('complete' as DiagnosisStatus)
+                      }
+                    }}
+                  />
+                </Tooltip>
+              )}
+              {isDailog ? null : (
+                <Button
+                  type="text"
+                  icon={<ExpandOutlined />}
+                  onClick={() => {
+                    setOpen(!open)
+                  }}
+                />
+              )}
+              <Button
+                type="text"
+                icon={<CloseOutlined />}
+                onClick={() => {
+                  if (isDailog) {
+                    setOpen(false)
+                  } else {
+                    setDiagnosisStatus('idle' as DiagnosisStatus)
+                  }
+                }}
+              />
+            </Space>
+          </div>
+          <div className={styles.diagnosisBody}>
+            <div className={styles.diagnosisContent} ref={contentRef}>
+              {diagnosisStatus === ('loading' as DiagnosisStatus) ||
+              (diagnosisStatus === ('streaming' as DiagnosisStatus) &&
+                !diagnosis) ? (
+                <div className={styles.diagnosisLoading}>
+                  <Spin />
+                  <span>{t('LogAggregator.PreparingDiagnosis')}</span>
+                </div>
+              ) : diagnosisStatus === ('streaming' as DiagnosisStatus) ? (
+                <div style={{ marginBottom: 30 }}>
+                  <Markdown>{diagnosis}</Markdown>
+                  <div
+                    ref={diagnosisEndRef}
+                    style={{ float: 'left', clear: 'both' }}
+                  />
+                </div>
+              ) : diagnosisStatus === ('error' as DiagnosisStatus) ? (
+                <div className={styles.diagnosisError}>
+                  <Alert
+                    type="error"
+                    message={t('LogAggregator.DiagnosisError')}
+                    description={diagnosis || t('LogAggregator.TryAgainLater')}
+                  />
+                </div>
+              ) : (
+                <Markdown>{diagnosis}</Markdown>
+              )}
+            </div>
+            {diagnosisStatus === ('streaming' as DiagnosisStatus) &&
+              diagnosis && (
+                <div
+                  className={`${styles.streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - 600 >= 0 ? styles.streamingIndicatorFixed : ''}`}
+                >
+                  <span className={styles.dot}></span>
+                  <span className={styles.dot}></span>
+                  <span className={styles.dot}></span>
+                </div>
+              )}
+          </div>
+        </div>
+      )
+    )
+  }
+
   return (
     <div className={styles.podLogs}>
       {error && (
@@ -799,91 +901,27 @@ const PodLogs: React.FC<PodLogsProps> = ({
               />
             )}
           </FullScreen>
-          {diagnosisStatus !== 'idle' && (
-            <div className={styles.diagnosisPanel}>
-              <div className={styles.diagnosisHeader}>
-                <Space>
-                  <div className={styles.diagnosisHeader_aiIcon}>
-                    <img src={aiSummarySvg} alt="ai summary" />
-                  </div>
-                  {t('LogAggregator.DiagnosisResult')}
-                </Space>
-                <Space>
-                  {diagnosisStatus === 'streaming' && (
-                    <Tooltip
-                      title={t('LogAggregator.StopDiagnosis')}
-                      placement="bottom"
-                    >
-                      <Button
-                        type="text"
-                        className={styles.stopButton}
-                        icon={<PoweroffOutlined />}
-                        onClick={() => {
-                          if (abortControllerRef.current) {
-                            abortControllerRef.current.abort()
-                            setDiagnosisStatus('complete' as DiagnosisStatus)
-                          }
-                        }}
-                      />
-                    </Tooltip>
-                  )}
-                  <Button
-                    type="text"
-                    icon={<CloseOutlined />}
-                    onClick={() =>
-                      setDiagnosisStatus('idle' as DiagnosisStatus)
-                    }
-                  />
-                </Space>
-              </div>
-              <div className={styles.diagnosisBody}>
-                <div className={styles.diagnosisContent} ref={contentRef}>
-                  {diagnosisStatus === ('loading' as DiagnosisStatus) ||
-                  (diagnosisStatus === ('streaming' as DiagnosisStatus) &&
-                    !diagnosis) ? (
-                    <div className={styles.diagnosisLoading}>
-                      <Spin />
-                      <span>{t('LogAggregator.PreparingDiagnosis')}</span>
-                    </div>
-                  ) : diagnosisStatus === ('streaming' as DiagnosisStatus) ? (
-                    <div style={{ marginBottom: 30 }}>
-                      <Markdown>{diagnosis}</Markdown>
-                      <div
-                        ref={diagnosisEndRef}
-                        style={{ float: 'left', clear: 'both' }}
-                      />
-                    </div>
-                  ) : diagnosisStatus === ('error' as DiagnosisStatus) ? (
-                    <div className={styles.diagnosisError}>
-                      <Alert
-                        type="error"
-                        message={t('LogAggregator.DiagnosisError')}
-                        description={
-                          diagnosis || t('LogAggregator.TryAgainLater')
-                        }
-                      />
-                    </div>
-                  ) : (
-                    <Markdown>{diagnosis}</Markdown>
-                  )}
-                </div>
-                {diagnosisStatus === ('streaming' as DiagnosisStatus) &&
-                  diagnosis && (
-                    <div
-                      className={`${styles.streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - 600 >= 0 ? styles.streamingIndicatorFixed : ''}`}
-                    >
-                      <span className={styles.dot}></span>
-                      <span className={styles.dot}></span>
-                      <span className={styles.dot}></span>
-                    </div>
-                  )}
-              </div>
-            </div>
-          )}
+          {renderAiAnalysis(false)}
         </div>
       </div>
 
       {renderSettingsModal()}
+      <Modal
+        styles={{
+          content: {
+            padding: 0,
+            borderRadius: 40,
+          },
+        }}
+        centered
+        closable={false}
+        width={'80%'}
+        height={700}
+        open={open}
+        footer={null}
+      >
+        <div style={{ overflow: 'auto' }}>{renderAiAnalysis(true)}</div>
+      </Modal>
     </div>
   )
 }
diff --git a/ui/src/pages/insightDetail/components/podLogs/styles.module.less b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
index 49f9d490..d93cbcb1 100644
--- a/ui/src/pages/insightDetail/components/podLogs/styles.module.less
+++ b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
@@ -321,451 +321,6 @@
         }
       }
 
-      .diagnosisPanel {
-        width: 400px;
-        min-height: 200px;
-        max-height: min(100%, 600px);
-        background: #2b1d3c;
-        border-radius: 12px;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid rgba(147, 112, 219, 0.2);
-        backdrop-filter: blur(8px);
-        z-index: 10;
-        animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-        .diagnosisHeader {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 12px;
-          background: linear-gradient(
-            135deg,
-            rgba(147, 112, 219, 0.15) 0%,
-            rgba(43, 29, 60, 0.95) 100%
-          );
-          border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-          border-radius: 12px 12px 0 0;
-          color: #e6e6fa;
-          font-size: 14px;
-          font-weight: 500;
-          backdrop-filter: blur(4px);
-
-          .diagnosisHeader_aiIcon {
-            width: 18px;
-            height: 18px;
-
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-
-          .stopButton {
-            color: rgba(255, 255, 255, 0.45);
-            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            width: 28px;
-            height: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 6px;
-            margin-right: 8px;
-            position: relative;
-            overflow: hidden;
-
-            &::before {
-              content: '';
-              position: absolute;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-              background: rgba(255, 77, 79, 0);
-              transition: background 0.3s ease;
-              z-index: 0;
-            }
-
-            :global(.anticon) {
-              font-size: 16px;
-              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-              position: relative;
-              z-index: 1;
-            }
-
-            &:hover {
-              color: #ff4d4f;
-              transform: scale(1.05);
-
-              &::before {
-                background: rgba(255, 77, 79, 0.15);
-              }
-
-              :global(.anticon) {
-                transform: rotate(180deg) scale(1.1);
-              }
-            }
-
-            &:active {
-              transform: scale(0.95);
-
-              &::before {
-                background: rgba(255, 77, 79, 0.25);
-              }
-            }
-          }
-
-          button {
-            color: rgba(230, 230, 250, 0.85);
-            transition: all 0.3s ease;
-            border-radius: 6px;
-            width: 28px;
-            height: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &:hover {
-              color: #fff;
-              background: rgba(147, 112, 219, 0.2);
-              transform: scale(1.05);
-            }
-
-            &:active {
-              transform: scale(0.95);
-            }
-          }
-        }
-
-        .diagnosisBody {
-          position: relative;
-          width: 400px;
-          overflow-y: auto;
-          height: 100%;
-          box-sizing: border-box;
-          border-radius: 0 0 12px 12px;
-
-          &::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-          }
-
-          &::-webkit-scrollbar-track {
-            background: rgba(147, 112, 219, 0.05);
-            border-radius: 4px;
-          }
-
-          &::-webkit-scrollbar-thumb {
-            background: rgba(147, 112, 219, 0.2);
-            border-radius: 4px;
-            border: 2px solid transparent;
-            background-clip: padding-box;
-
-            &:hover {
-              background: rgba(147, 112, 219, 0.3);
-              border: 2px solid transparent;
-              background-clip: padding-box;
-            }
-          }
-
-          .diagnosisContent {
-            color: #d4d4d4;
-            background: #2b1d3c;
-            border-radius: 0 0 12px 12px;
-            padding: 16px;
-            font-size: 14px;
-            line-height: 1.6;
-            box-sizing: border-box;
-            word-wrap: break-word;
-
-            .diagnosisLoading,
-            .diagnosisError {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              min-height: 200px;
-              gap: 16px;
-              text-align: center;
-              color: #d4d4d4;
-
-              :global(.ant-spin) {
-                .ant-spin-dot-item {
-                  background-color: #9370db;
-                }
-              }
-
-              p {
-                font-size: 14px;
-                color: rgba(230, 230, 250, 0.85);
-              }
-            }
-
-            h1,
-            h2,
-            h3 {
-              color: #e6e6fa;
-              margin-bottom: 16px;
-              font-weight: 600;
-              letter-spacing: -0.01em;
-            }
-
-            h1 {
-              font-size: 20px;
-            }
-
-            h2 {
-              font-size: 18px;
-              margin-top: 24px;
-              padding-bottom: 8px;
-              border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-            }
-
-            h3 {
-              font-size: 16px;
-              margin-top: 20px;
-            }
-
-            p {
-              margin-bottom: 16px;
-              line-height: 1.7;
-            }
-
-            ul,
-            ol {
-              padding-left: 24px;
-              margin-bottom: 16px;
-            }
-
-            li {
-              margin-bottom: 8px;
-            }
-
-            code {
-              background: rgba(147, 112, 219, 0.1);
-              padding: 2px 6px;
-              border-radius: 4px;
-              font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-              font-size: 13px;
-            }
-
-            pre {
-              background: rgba(20, 15, 30, 0.8);
-              padding: 16px;
-              border-radius: 8px;
-              margin-bottom: 16px;
-              overflow-x: auto;
-              border: 1px solid rgba(147, 112, 219, 0.1);
-
-              &::-webkit-scrollbar {
-                width: 8px;
-                height: 8px;
-              }
-
-              &::-webkit-scrollbar-track {
-                background: rgba(147, 112, 219, 0.05);
-                border-radius: 4px;
-              }
-
-              &::-webkit-scrollbar-thumb {
-                background: rgba(147, 112, 219, 0.2);
-                border-radius: 4px;
-                border: 2px solid transparent;
-                background-clip: padding-box;
-
-                &:hover {
-                  background: rgba(147, 112, 219, 0.3);
-                  border: 2px solid transparent;
-                  background-clip: padding-box;
-                }
-              }
-
-              code {
-                background: none;
-                padding: 0;
-              }
-            }
-
-            :global {
-              .markdown-body {
-                color: #d4d4d4;
-                background: transparent;
-                padding: 16px;
-
-                h1,
-                h2,
-                h3,
-                h4,
-                h5,
-                h6 {
-                  color: rgba(230, 230, 250, 0.95);
-                  border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-                  margin-top: 24px;
-                  margin-bottom: 16px;
-                  font-weight: 600;
-                  line-height: 1.25;
-                }
-
-                h1 {
-                  font-size: 24px;
-                }
-
-                h2 {
-                  font-size: 20px;
-                }
-
-                h3 {
-                  font-size: 18px;
-                }
-
-                h4 {
-                  font-size: 16px;
-                }
-
-                h5 {
-                  font-size: 14px;
-                }
-
-                h6 {
-                  font-size: 13px;
-                }
-
-                pre {
-                  background: rgba(0, 0, 0, 0.4);
-                  border: 1px solid rgba(147, 112, 219, 0.5);
-                  border-radius: 6px;
-                  padding: 12px;
-                  margin: 12px 0;
-                  overflow-x: auto;
-
-                  code {
-                    background: transparent;
-                    padding: 0;
-                    color: #f0e6ff;
-                  }
-                }
-
-                code {
-                  background: rgba(147, 112, 219, 0.2);
-                  padding: 2px 6px;
-                  border-radius: 4px;
-                  color: #f0e6ff;
-                  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-                }
-
-                ul,
-                ol {
-                  padding-left: 24px;
-                  margin: 8px 0;
-
-                  li {
-                    margin: 4px 0;
-                  }
-                }
-
-                blockquote {
-                  color: rgba(230, 230, 250, 0.85);
-                  border-left: 4px solid rgba(147, 112, 219, 0.4);
-                  background: rgba(147, 112, 219, 0.1);
-                  margin: 16px 0;
-                  padding: 12px 16px;
-                  border-radius: 0 8px 8px 0;
-                }
-
-                a {
-                  color: #9370db;
-                  text-decoration: none;
-                  transition: all 0.2s ease;
-                  border-bottom: 1px solid transparent;
-
-                  &:hover {
-                    color: lighten(#9370db, 10%);
-                    border-bottom-color: currentColor;
-                  }
-                }
-
-                table {
-                  border-collapse: separate;
-                  border-spacing: 0;
-                  width: 100%;
-                  margin: 16px 0;
-                  border-radius: 8px;
-                  border: 1px solid rgba(147, 112, 219, 0.2);
-                  overflow: hidden;
-
-                  th,
-                  td {
-                    border: 1px solid rgba(147, 112, 219, 0.2);
-                    padding: 12px;
-                  }
-
-                  th {
-                    background: rgba(147, 112, 219, 0.1);
-                    font-weight: 600;
-                    text-align: left;
-                  }
-
-                  tr {
-                    background-color: transparent;
-                    transition: background-color 0.2s ease;
-
-                    &:nth-child(2n) {
-                      background-color: rgba(147, 112, 219, 0.05);
-                    }
-
-                    &:hover {
-                      background-color: rgba(147, 112, 219, 0.1);
-                    }
-                  }
-                }
-
-                hr {
-                  border: none;
-                  height: 1px;
-                  background: linear-gradient(
-                    to right,
-                    rgba(147, 112, 219, 0.1),
-                    rgba(147, 112, 219, 0.4),
-                    rgba(147, 112, 219, 0.1)
-                  );
-                  margin: 24px 0;
-                }
-              }
-            }
-          }
-
-          .streamingIndicator {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            padding: 16px;
-
-            .dot {
-              width: 6px;
-              height: 6px;
-              background-color: #4447c3;
-              border-radius: 50%;
-              opacity: 0.3;
-              animation: dotPulse 1.4s infinite;
-
-              &:nth-child(2) {
-                animation-delay: 0.2s;
-              }
-
-              &:nth-child(3) {
-                animation-delay: 0.4s;
-              }
-            }
-          }
-
-          .streamingIndicatorFixed {
-            position: sticky;
-            bottom: 0;
-            left: 0;
-            right: 0;
-          }
-        }
-      }
     }
   }
 
@@ -782,11 +337,9 @@
       }
 
       .ant-drawer-header {
-        background: linear-gradient(
-          135deg,
-          rgba(147, 112, 219, 0.15) 0%,
-          rgba(43, 29, 60, 0.95) 100%
-        );
+        background: linear-gradient(135deg,
+            rgba(147, 112, 219, 0.15) 0%,
+            rgba(43, 29, 60, 0.95) 100%);
         border-bottom: 1px solid rgba(147, 112, 219, 0.2);
         padding: 16px 24px;
 
@@ -912,6 +465,448 @@
   }
 }
 
+.diagnosisPanel {
+  box-sizing: border-box;
+  width: 400px;
+  min-height: 200px;
+  max-height: min(100%, 600px);
+  background: #2b1d3c;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(147, 112, 219, 0.2);
+  backdrop-filter: blur(8px);
+  z-index: 10;
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .diagnosisHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    background: linear-gradient(135deg,
+        rgba(147, 112, 219, 0.15) 0%,
+        rgba(43, 29, 60, 0.95) 100%);
+    border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+    border-radius: 12px 12px 0 0;
+    color: #e6e6fa;
+    font-size: 14px;
+    font-weight: 500;
+    backdrop-filter: blur(4px);
+
+    .diagnosisHeader_aiIcon {
+      width: 18px;
+      height: 18px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .stopButton {
+      color: rgba(255, 255, 255, 0.45);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      margin-right: 8px;
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255, 77, 79, 0);
+        transition: background 0.3s ease;
+        z-index: 0;
+      }
+
+      :global(.anticon) {
+        font-size: 16px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        z-index: 1;
+      }
+
+      &:hover {
+        color: #ff4d4f;
+        transform: scale(1.05);
+
+        &::before {
+          background: rgba(255, 77, 79, 0.15);
+        }
+
+        :global(.anticon) {
+          transform: rotate(180deg) scale(1.1);
+        }
+      }
+
+      &:active {
+        transform: scale(0.95);
+
+        &::before {
+          background: rgba(255, 77, 79, 0.25);
+        }
+      }
+    }
+
+    button {
+      color: rgba(230, 230, 250, 0.85);
+      transition: all 0.3s ease;
+      border-radius: 6px;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: #fff !important;
+        background: rgba(147, 112, 219, 0.2) !important;
+        transform: scale(1.05) !important;
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+
+  .diagnosisBody {
+    position: relative;
+    overflow-y: auto;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 0 0 12px 12px;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(147, 112, 219, 0.05);
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 112, 219, 0.2);
+      border-radius: 4px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+
+      &:hover {
+        background: rgba(147, 112, 219, 0.3);
+        border: 2px solid transparent;
+        background-clip: padding-box;
+      }
+    }
+
+    .diagnosisContent {
+      color: #d4d4d4;
+      background: #2b1d3c;
+      border-radius: 0 0 12px 12px;
+      padding: 16px;
+      font-size: 14px;
+      line-height: 1.6;
+      box-sizing: border-box;
+      word-wrap: break-word;
+
+      .diagnosisLoading,
+      .diagnosisError {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 200px;
+        gap: 16px;
+        text-align: center;
+        color: #d4d4d4;
+
+        :global(.ant-spin) {
+          .ant-spin-dot-item {
+            background-color: #9370db;
+          }
+        }
+
+        p {
+          font-size: 14px;
+          color: rgba(230, 230, 250, 0.85);
+        }
+      }
+
+      h1,
+      h2,
+      h3 {
+        color: #e6e6fa;
+        margin-bottom: 16px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      h1 {
+        font-size: 20px;
+      }
+
+      h2 {
+        font-size: 18px;
+        margin-top: 24px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+      }
+
+      h3 {
+        font-size: 16px;
+        margin-top: 20px;
+      }
+
+      p {
+        margin-bottom: 16px;
+        line-height: 1.7;
+      }
+
+      ul,
+      ol {
+        padding-left: 24px;
+        margin-bottom: 16px;
+      }
+
+      li {
+        margin-bottom: 8px;
+      }
+
+      code {
+        background: rgba(147, 112, 219, 0.1);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+        font-size: 13px;
+      }
+
+      pre {
+        background: rgba(20, 15, 30, 0.8);
+        padding: 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        overflow-x: auto;
+        border: 1px solid rgba(147, 112, 219, 0.1);
+
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: rgba(147, 112, 219, 0.05);
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: rgba(147, 112, 219, 0.2);
+          border-radius: 4px;
+          border: 2px solid transparent;
+          background-clip: padding-box;
+
+          &:hover {
+            background: rgba(147, 112, 219, 0.3);
+            border: 2px solid transparent;
+            background-clip: padding-box;
+          }
+        }
+
+        code {
+          background: none;
+          padding: 0;
+        }
+      }
+
+      :global {
+        .markdown-body {
+          color: #d4d4d4;
+          background: transparent;
+          padding: 16px;
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            color: rgba(230, 230, 250, 0.95);
+            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
+          }
+
+          h1 {
+            font-size: 24px;
+          }
+
+          h2 {
+            font-size: 20px;
+          }
+
+          h3 {
+            font-size: 18px;
+          }
+
+          h4 {
+            font-size: 16px;
+          }
+
+          h5 {
+            font-size: 14px;
+          }
+
+          h6 {
+            font-size: 13px;
+          }
+
+          pre {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(147, 112, 219, 0.5);
+            border-radius: 6px;
+            padding: 12px;
+            margin: 12px 0;
+            overflow-x: auto;
+
+            code {
+              background: transparent;
+              padding: 0;
+              color: #f0e6ff;
+            }
+          }
+
+          code {
+            background: rgba(147, 112, 219, 0.2);
+            padding: 2px 6px;
+            border-radius: 4px;
+            color: #f0e6ff;
+            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+          }
+
+          ul,
+          ol {
+            padding-left: 24px;
+            margin: 8px 0;
+
+            li {
+              margin: 4px 0;
+            }
+          }
+
+          blockquote {
+            color: rgba(230, 230, 250, 0.85);
+            border-left: 4px solid rgba(147, 112, 219, 0.4);
+            background: rgba(147, 112, 219, 0.1);
+            margin: 16px 0;
+            padding: 12px 16px;
+            border-radius: 0 8px 8px 0;
+          }
+
+          a {
+            color: #9370db;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border-bottom: 1px solid transparent;
+
+            &:hover {
+              color: lighten(#9370db, 10%);
+              border-bottom-color: currentColor;
+            }
+          }
+
+          table {
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+            margin: 16px 0;
+            border-radius: 8px;
+            border: 1px solid rgba(147, 112, 219, 0.2);
+            overflow: hidden;
+
+            th,
+            td {
+              border: 1px solid rgba(147, 112, 219, 0.2);
+              padding: 12px;
+            }
+
+            th {
+              background: rgba(147, 112, 219, 0.1);
+              font-weight: 600;
+              text-align: left;
+            }
+
+            tr {
+              background-color: transparent;
+              transition: background-color 0.2s ease;
+
+              &:nth-child(2n) {
+                background-color: rgba(147, 112, 219, 0.05);
+              }
+
+              &:hover {
+                background-color: rgba(147, 112, 219, 0.1);
+              }
+            }
+          }
+
+          hr {
+            border: none;
+            height: 1px;
+            background: linear-gradient(to right,
+                rgba(147, 112, 219, 0.1),
+                rgba(147, 112, 219, 0.4),
+                rgba(147, 112, 219, 0.1));
+            margin: 24px 0;
+          }
+        }
+      }
+    }
+
+    .streamingIndicator {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 16px;
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #4447c3;
+        border-radius: 50%;
+        opacity: 0.3;
+        animation: dotPulse 1.4s infinite;
+
+        &:nth-child(2) {
+          animation-delay: 0.2s;
+        }
+
+        &:nth-child(3) {
+          animation-delay: 0.4s;
+        }
+      }
+    }
+
+    .streamingIndicatorFixed {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+
 @keyframes dotPulse {
   0% {
     opacity: 0.3;