feat(ui): expand AI interpret result panel (#851)

## What type of PR is this?

/kind feature

## What this PR does / why we need it:

Expands the AI Interpret Result panel so longer AI responses are easier
to read.

The panel now opens in an expanded reading mode when interpretation
starts, and includes a header control to collapse or expand the result
panel.

## Which issue(s) this PR fixes:

Fixes #796

## Validation

- `npm run lint`
- `npm run build` compiles, with existing CSS order warnings from #784
on upstream `main`
- Local browser smoke test at `http://localhost:8000`

Author: manichandra

ui/src/components/yaml/index.tsx

@@ -28,12 +28,7 @@ import styles from './styles.module.less'
 hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'))
 
 type InterpretStatus =
-  | 'idle'
-  | 'init'
-  | 'streaming'
-  | 'complete'
-  | 'error'
-  | 'loading'
+  'idle' | 'init' | 'streaming' | 'complete' | 'error' | 'loading'
 
 type IProps = {
   data: any

ui/src/pages/insightDetail/components/exceptionList/index.tsx

@@ -8,6 +8,8 @@ import {
   PoweroffOutlined,
   CloseOutlined,
   RedoOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
 } from '@ant-design/icons'
 import Loading from '@/components/loading'
 import { SEVERITY_MAP } from '@/utils/constants'
@@ -42,6 +44,7 @@ const ExceptionList = ({
   const [currentKey, setCurrentKey] = useState('All')
   const { t, i18n } = useTranslation()
   const [isShowList, setIsShowList] = useState(true)
+  const [isInterpretExpanded, setInterpretExpanded] = useState(false)
 
   // AI interpret states
   const [interpret, setInterpret] = useState('')
@@ -91,6 +94,7 @@ const ExceptionList = ({
         // Reset interpret state
         setInterpret('')
         setInterpretStatus('loading')
+        setInterpretExpanded(true)
         setStreaming(true)
 
         // Cancel any existing SSE connection
@@ -237,6 +241,10 @@ const ExceptionList = ({
 
   const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
   const dotToTopHeight = interpretEndRef.current?.getBoundingClientRect()?.top
+  const interpretPanelHeight =
+    interpretBodyRef.current?.offsetHeight ||
+    exceptionRef.current?.offsetHeight ||
+    0
 
   const renderInterpretWindow = () => {
     if (interpretStatus === 'idle') {
@@ -245,8 +253,14 @@ const ExceptionList = ({
 
     return (
       <div
-        className={styles.interpret_panel}
-        style={{ height: exceptionRef?.current?.offsetHeight }}
+        className={classNames(styles.interpret_panel, {
+          [styles.interpret_panel_expanded]: isInterpretExpanded,
+        })}
+        style={{
+          height: isInterpretExpanded
+            ? undefined
+            : exceptionRef?.current?.offsetHeight,
+        }}
       >
         <div className={styles.interpret_header}>
           <Space>
@@ -256,6 +270,26 @@ const ExceptionList = ({
             {t('ExceptionList.InterpretResult')}
           </Space>
           <Space>
+            <Tooltip
+              title={
+                isInterpretExpanded
+                  ? t('ExceptionList.Collapse')
+                  : t('ExceptionList.Expand')
+              }
+              placement="bottom"
+            >
+              <Button
+                type="text"
+                icon={
+                  isInterpretExpanded ? (
+                    <FullscreenExitOutlined />
+                  ) : (
+                    <FullscreenOutlined />
+                  )
+                }
+                onClick={() => setInterpretExpanded(prev => !prev)}
+              />
+            </Tooltip>
             {isStreaming && (
               <Tooltip
                 title={t('ExceptionList.StopInterpret')}
@@ -284,6 +318,7 @@ const ExceptionList = ({
                 }
                 setInterpretStatus('idle')
                 setInterpret('')
+                setInterpretExpanded(false)
                 setStreaming(false)
               }}
             />
@@ -312,7 +347,7 @@ const ExceptionList = ({
           </div>
           {interpretStatus === 'streaming' && interpret && (
             <div
-              className={`${styles.streaming_indicator} ${dotToTopHeight - contentToTopHeight + 57 - exceptionRef.current?.offsetHeight >= 0 ? styles.streaming_indicatorFixed : ''}`}
+              className={`${styles.streaming_indicator} ${dotToTopHeight - contentToTopHeight + 57 - interpretPanelHeight >= 0 ? styles.streaming_indicatorFixed : ''}`}
             >
               <span className={styles.dot}></span>
               <span className={styles.dot}></span>

ui/src/pages/insightDetail/components/exceptionList/style.module.less

@@ -366,6 +366,7 @@
 
   .interpret_panel {
     width: 400px;
+    flex: 0 0 400px;
     border-radius: 12px;
     box-shadow:
       0 8px 24px rgba(149, 128, 247, 0.08),
@@ -851,6 +852,31 @@
       }
     }
   }
+
+  .interpret_panel_expanded {
+    width: min(720px, 48vw);
+    height: min(720px, calc(100vh - 160px));
+    max-height: calc(100vh - 160px);
+    min-width: 520px;
+    flex-basis: min(720px, 48vw);
+  }
+}
+
+@media (width <= 1200px) {
+  .exceptionContainer {
+    flex-direction: column;
+
+    .interpret_panel,
+    .interpret_panel_expanded {
+      width: 100%;
+      min-width: 0;
+      flex-basis: auto;
+    }
+
+    .interpret_panel_expanded {
+      height: min(640px, calc(100vh - 160px));
+    }
+  }
 }
 
 @keyframes dotPulse {