feat(report): add agent markdown export view

Author: quanru

apps/report/src/App.less

@@ -119,6 +119,9 @@ footer.mt-8 {
   .page-nav-left {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
 
     .page-nav-title {
       padding-left: 4px;
@@ -132,6 +135,32 @@ footer.mt-8 {
         font-size: 12px;
       }
     }
+
+    .report-view-mode-switch {
+      flex-shrink: 0;
+
+      .ant-segmented-item-label {
+        min-height: 26px;
+        line-height: 26px;
+        padding-inline: 12px;
+      }
+    }
+
+    .report-markdown-actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+
+      .ant-btn {
+        height: 28px;
+      }
+
+      .ant-btn:not(.ant-btn-icon-only) {
+        padding-inline: 10px;
+        font-size: 13px;
+      }
+    }
   }
 
   .page-nav-right {
@@ -178,6 +207,24 @@ footer.mt-8 {
   }
 }
 
+@media (max-width: 960px) {
+  .page-nav {
+    .page-nav-left {
+      gap: 8px;
+
+      .report-view-mode-switch .ant-segmented-item-label {
+        padding-inline: 8px;
+      }
+
+      .report-markdown-actions .ant-btn:not(.ant-btn-icon-only) {
+        max-width: 148px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
 .cost-str {
   color: @weak-text;
 }

apps/report/src/App.tsx

@@ -1,12 +1,24 @@
 import './App.less';
 
-import { Alert, App as AntdApp, ConfigProvider, Empty, theme } from 'antd';
+import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  App as AntdApp,
+  Button,
+  ConfigProvider,
+  Empty,
+  Segmented,
+  Tooltip,
+  message,
+  theme,
+} from 'antd';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 import {
   GroupedActionDump,
   dedupeExecutionsKeepLatest,
+  reportToMarkdown,
   restoreImageReferences,
 } from '@midscene/core';
 import { antiEscapeScriptTag } from '@midscene/shared/utils';
@@ -16,6 +28,7 @@ import {
   globalThemeConfig,
   useGlobalPreference,
 } from '@midscene/visualizer';
+import AgentScreenshotView from './components/agent-screenshot-view';
 import DetailPanel from './components/detail-panel';
 import DetailSide from './components/detail-side';
 import GlobalHoverPreview from './components/global-hover-preview';
@@ -27,8 +40,15 @@ import ThemeLightIcon from './icons/theme-light.svg?react';
 import type {
   PlaywrightTaskAttributes,
   PlaywrightTasks,
+  ReportViewMode,
   VisualizerProps,
 } from './types';
+import {
+  downloadMarkdownZip,
+  getReportMarkdownView,
+  markdownArchiveBaseName,
+  markdownZipDownloadTooltip,
+} from './utils/markdown-export';
 import { formatModelBriefText } from './utils/model-brief';
 import {
   getEmptyDumpDescription,
@@ -97,6 +117,12 @@ function Visualizer(props: VisualizerProps): JSX.Element {
   });
   const dump = useExecutionDump((store) => store.dump);
   const [timelineCollapsed, setTimelineCollapsed] = useState(false);
+  const [reportViewMode, setReportViewMode] = useState<ReportViewMode>('human');
+  const [selectedMarkdownImagePath, setSelectedMarkdownImagePath] = useState<
+    string | null
+  >(null);
+  const [selectedMarkdownImageRequestId, setSelectedMarkdownImageRequestId] =
+    useState(0);
   const {
     modelCallDetailsEnabled: proModeEnabled,
     setModelCallDetailsEnabled: setProModeEnabled,
@@ -147,6 +173,62 @@ function Visualizer(props: VisualizerProps): JSX.Element {
       dumps.every((d) => d.attributes?.playwright_test_status === 'skipped'),
     [dumps],
   );
+  const reportMarkdownView = useMemo(() => {
+    if (reportViewMode !== 'markdown') {
+      return null;
+    }
+    return getReportMarkdownView(dump, reportToMarkdown);
+  }, [dump, reportViewMode]);
+  const readyReportMarkdown =
+    reportMarkdownView?.status === 'ready' ? reportMarkdownView : null;
+  const reportArchiveBaseName = useMemo(
+    () => markdownArchiveBaseName(dump),
+    [dump],
+  );
+
+  const handleCopyReportMarkdown = async () => {
+    if (!readyReportMarkdown) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(readyReportMarkdown.markdown);
+      message.success('Markdown copied');
+    } catch {
+      message.error('Copy failed');
+    }
+  };
+
+  const handleDownloadReportMarkdownZip = async () => {
+    if (!readyReportMarkdown) {
+      return;
+    }
+
+    try {
+      const result = await downloadMarkdownZip(
+        readyReportMarkdown.markdown,
+        readyReportMarkdown.attachments,
+        reportArchiveBaseName,
+      );
+      if (result.missingAttachmentCount > 0) {
+        message.warning(
+          `${result.missingAttachmentCount} screenshot link${
+            result.missingAttachmentCount === 1 ? '' : 's'
+          } kept as markdown reference${
+            result.missingAttachmentCount === 1 ? '' : 's'
+          } but not packaged.`,
+        );
+      } else {
+        message.success('Markdown and images downloaded');
+      }
+    } catch {
+      message.error('Download failed');
+    }
+  };
+  const handleMarkdownImageClick = (markdownPath: string) => {
+    setSelectedMarkdownImagePath(markdownPath);
+    setSelectedMarkdownImageRequestId((current) => current + 1);
+  };
 
   const renderContent = () => {
     if (dump && dump.executions.length === 0) {
@@ -228,6 +310,9 @@ function Visualizer(props: VisualizerProps): JSX.Element {
             onProModeChange={setProModeEnabled}
             replayAllScripts={replayAllScripts}
             setReplayAllMode={setReplayAllMode}
+            reportViewMode={reportViewMode}
+            reportMarkdownView={reportMarkdownView}
+            onMarkdownImageClick={handleMarkdownImageClick}
           />
         </div>
         <div
@@ -252,28 +337,38 @@ function Visualizer(props: VisualizerProps): JSX.Element {
           }}
         />
         <div className="main-right">
-          <div
-            className="main-right-header"
-            onClick={() => setTimelineCollapsed(!timelineCollapsed)}
-            style={{ cursor: 'pointer', userSelect: 'none' }}
-          >
-            <span
-              className="timeline-collapse-icon"
-              style={{
-                display: 'inline-block',
-                marginRight: 8,
-                transition: 'transform 0.2s',
-                transform: timelineCollapsed
-                  ? 'rotate(-90deg)'
-                  : 'rotate(0deg)',
-              }}
-            >
-              ▼
-            </span>
-            Record
-          </div>
-          {!timelineCollapsed && <Timeline key={mainLayoutChangeFlag} />}
-          <div className="main-content">{content}</div>
+          {reportViewMode === 'markdown' ? (
+            <AgentScreenshotView
+              markdownView={reportMarkdownView}
+              selectedMarkdownImagePath={selectedMarkdownImagePath}
+              selectedMarkdownImageRequestId={selectedMarkdownImageRequestId}
+            />
+          ) : (
+            <>
+              <div
+                className="main-right-header"
+                onClick={() => setTimelineCollapsed(!timelineCollapsed)}
+                style={{ cursor: 'pointer', userSelect: 'none' }}
+              >
+                <span
+                  className="timeline-collapse-icon"
+                  style={{
+                    display: 'inline-block',
+                    marginRight: 8,
+                    transition: 'transform 0.2s',
+                    transform: timelineCollapsed
+                      ? 'rotate(-90deg)'
+                      : 'rotate(0deg)',
+                  }}
+                >
+                  ▼
+                </span>
+                Record
+              </div>
+              {!timelineCollapsed && <Timeline key={mainLayoutChangeFlag} />}
+              <div className="main-content">{content}</div>
+            </>
+          )}
         </div>
       </div>
     );
@@ -327,6 +422,46 @@ function Visualizer(props: VisualizerProps): JSX.Element {
           <div className="page-nav">
             <div className="page-nav-left">
               <Logo />
+              {executionDump && (
+                <Segmented
+                  size="small"
+                  className="report-view-mode-switch"
+                  value={reportViewMode}
+                  options={[
+                    { label: 'Human View', value: 'human' },
+                    { label: 'Markdown View', value: 'markdown' },
+                  ]}
+                  onChange={(value) => {
+                    setReportViewMode(value as ReportViewMode);
+                    setSelectedMarkdownImagePath(null);
+                    setSelectedMarkdownImageRequestId(0);
+                  }}
+                />
+              )}
+              {reportViewMode === 'markdown' && (
+                <div className="report-markdown-actions">
+                  <Tooltip title="Copy report.md markdown">
+                    <Button
+                      type="text"
+                      size="small"
+                      icon={<CopyOutlined />}
+                      disabled={!readyReportMarkdown}
+                      onClick={() => void handleCopyReportMarkdown()}
+                      aria-label="Copy report markdown"
+                    />
+                  </Tooltip>
+                  <Tooltip title={markdownZipDownloadTooltip}>
+                    <Button
+                      type="text"
+                      size="small"
+                      icon={<DownloadOutlined />}
+                      disabled={!readyReportMarkdown}
+                      onClick={() => void handleDownloadReportMarkdownZip()}
+                      aria-label="Download markdown and images ZIP"
+                    />
+                  </Tooltip>
+                </div>
+              )}
             </div>
             <div className="page-nav-right">
               <div className="page-nav-version">