refactor(core): per-execution append model for report generation

Change report writing granularity from "entire GroupedActionDump" to
"single ExecutionDump" with append-only semantics.

- IReportGenerator: onDumpUpdate(dump) -> onExecutionUpdate(exec, groupMeta)
- ReportGenerator: frozen/active region tracking with proper screenshot
  memory lifecycle (active screenshots stay in memory, frozen are released)
- Agent: pass individual ExecutionDump to report generator
- Viewer: merge dump tags by data-group-id for backward-compatible UX
- Add GroupMeta type for group-level metadata

Validated: pnpm run lint, vitest report-generator (25 pass),
vitest report-merge-count (8 pass), vitest html-utils, vitest report

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ottomao

apps/report/src/App.tsx

@@ -305,78 +305,175 @@ function Visualizer(props: VisualizerProps): JSX.Element {
 }
 
 export function App() {
+  /**
+   * Parse attributes from a dump script element.
+   */
+  function parseAttributesFromElement(el: Element): PlaywrightTaskAttributes {
+    const attributes: Partial<PlaywrightTaskAttributes> & Record<string, any> =
+      {
+        playwright_test_description: '',
+        playwright_test_id: '',
+        playwright_test_title: '',
+        playwright_test_status: undefined,
+        playwright_test_duration: 0,
+      };
+    Array.from(el.attributes).forEach((attr) => {
+      const { name, value } = attr;
+      const valueDecoded = decodeURIComponent(value);
+      if (name.startsWith('playwright_')) {
+        if (name === 'playwright_test_duration') {
+          attributes[name] = Number(valueDecoded) || 0;
+        } else {
+          attributes[name] = valueDecoded;
+        }
+      }
+    });
+    return attributes as PlaywrightTaskAttributes;
+  }
+
+  /**
+   * Build a PlaywrightTasks entry from a single dump element (original behavior).
+   */
+  function buildPlaywrightTaskFromElement(el: Element): PlaywrightTasks {
+    const attributes = parseAttributesFromElement(el);
+    let cachedJsonContent: GroupedActionDump | null = null;
+    let isParsed = false;
+
+    return {
+      get: () => {
+        if (!isParsed) {
+          try {
+            console.time('parse_dump');
+            const content = antiEscapeScriptTag(el.textContent || '');
+            const parsed = JSON.parse(content);
+            const restored = restoreImageReferences(
+              parsed,
+              resolveImageFromDom,
+            );
+            cachedJsonContent = GroupedActionDump.fromJSON(restored);
+            console.timeEnd('parse_dump');
+            (cachedJsonContent as any).attributes = attributes;
+            isParsed = true;
+          } catch (e) {
+            console.error(el);
+            console.error('failed to parse json content', e);
+            cachedJsonContent = new GroupedActionDump({
+              sdkVersion: '',
+              groupName: '',
+              modelBriefs: [],
+              executions: [],
+            });
+            (cachedJsonContent as any).attributes = attributes;
+            (cachedJsonContent as any).error = 'Failed to parse JSON content';
+            isParsed = true;
+          }
+        }
+        return cachedJsonContent!;
+      },
+      attributes,
+    };
+  }
+
   function getDumpElements(): PlaywrightTasks[] {
     const dumpElements = document.querySelectorAll(
       'script[type="midscene_web_dump"]',
     );
-    const reportDump: PlaywrightTasks[] = [];
-    Array.from(dumpElements)
-      .filter((el) => {
-        const textContent = el.textContent;
-        if (!textContent) {
-          console.warn('empty content in script tag', el);
+    const validElements = Array.from(dumpElements).filter((el) => {
+      const textContent = el.textContent;
+      if (!textContent) {
+        console.warn('empty content in script tag', el);
+      }
+      return !!textContent;
+    });
+
+    // Group elements by data-group-id
+    const groupMap = new Map<string, Element[]>();
+    const ungrouped: Element[] = [];
+
+    for (const el of validElements) {
+      const groupId = el.getAttribute('data-group-id');
+      if (groupId) {
+        const decodedGroupId = decodeURIComponent(groupId);
+        if (!groupMap.has(decodedGroupId)) {
+          groupMap.set(decodedGroupId, []);
         }
-        return !!textContent;
-      })
-      .forEach((el) => {
-        const attributes: Partial<PlaywrightTaskAttributes> &
-          Record<string, any> = {
-          playwright_test_description: '',
-          playwright_test_id: '',
-          playwright_test_title: '',
-          playwright_test_status: undefined,
-          playwright_test_duration: 0,
-        };
-        Array.from(el.attributes).forEach((attr) => {
-          const { name, value } = attr;
-          const valueDecoded = decodeURIComponent(value);
-          if (name.startsWith('playwright_')) {
-            if (name === 'playwright_test_duration') {
-              attributes[name] = Number(valueDecoded) || 0;
-            } else {
-              attributes[name] = valueDecoded;
-            }
-          }
-        });
+        groupMap.get(decodedGroupId)!.push(el);
+      } else {
+        ungrouped.push(el);
+      }
+    }
 
-        // Lazy loading: Store raw content and parse only when get() is called
-        let cachedJsonContent: GroupedActionDump | null = null;
-        let isParsed = false;
+    const result: PlaywrightTasks[] = [];
 
-        reportDump.push({
-          get: () => {
-            if (!isParsed) {
-              try {
-                console.time('parse_dump');
-                const content = antiEscapeScriptTag(el.textContent || '');
+    // Process grouped dump tags — merge into one PlaywrightTasks per group
+    for (const [, elements] of groupMap) {
+      const attributes = parseAttributesFromElement(elements[0]);
+      let cachedJsonContent: GroupedActionDump | null = null;
+      let isParsed = false;
+
+      result.push({
+        get: () => {
+          if (!isParsed) {
+            try {
+              console.time('parse_grouped_dump');
+              const allExecutions: any[] = [];
+              let baseDump: GroupedActionDump | null = null;
 
+              for (const el of elements) {
+                const content = antiEscapeScriptTag(el.textContent || '');
                 const parsed = JSON.parse(content);
                 const restored = restoreImageReferences(
                   parsed,
                   resolveImageFromDom,
                 );
-                cachedJsonContent = GroupedActionDump.fromJSON(restored);
-
-                console.timeEnd('parse_dump');
-                (cachedJsonContent as any).attributes = attributes;
-                isParsed = true;
-              } catch (e) {
-                console.error(el);
-                console.error('failed to parse json content', e);
-                // Return a fallback object to prevent crashes
-                cachedJsonContent = {
-                  attributes,
-                  error: 'Failed to parse JSON content',
-                } as any;
-                isParsed = true;
+                const dump = GroupedActionDump.fromJSON(restored);
+                if (!baseDump) {
+                  baseDump = dump;
+                }
+                allExecutions.push(...dump.executions);
+              }
+
+              if (baseDump) {
+                baseDump.executions = allExecutions;
+                cachedJsonContent = baseDump;
+              } else {
+                cachedJsonContent = new GroupedActionDump({
+                  sdkVersion: '',
+                  groupName: '',
+                  modelBriefs: [],
+                  executions: [],
+                });
               }
+
+              console.timeEnd('parse_grouped_dump');
+              (cachedJsonContent as any).attributes = attributes;
+              isParsed = true;
+            } catch (e) {
+              console.error('failed to parse grouped dump content', e);
+              cachedJsonContent = new GroupedActionDump({
+                sdkVersion: '',
+                groupName: '',
+                modelBriefs: [],
+                executions: [],
+              });
+              (cachedJsonContent as any).attributes = attributes;
+              (cachedJsonContent as any).error =
+                'Failed to parse grouped JSON content';
+              isParsed = true;
             }
-            return cachedJsonContent;
-          },
-          attributes: attributes as PlaywrightTaskAttributes,
-        });
+          }
+          return cachedJsonContent!;
+        },
+        attributes,
       });
-    return reportDump;
+    }
+
+    // Process ungrouped dump tags — original behavior (backward compatible)
+    for (const el of ungrouped) {
+      result.push(buildPlaywrightTaskFromElement(el));
+    }
+
+    return result;
   }
 
   const [reportDump, setReportDump] = useState<PlaywrightTasks[]>([]);

packages/core/src/agent/agent.ts

@@ -18,6 +18,7 @@ import {
   type ExecutionRecorderItem,
   type ExecutionTask,
   type ExecutionTaskLog,
+  type GroupMeta,
   GroupedActionDump,
   type LocateOption,
   type LocateResultElement,
@@ -343,7 +344,7 @@ export class Agent<
           }
 
           // Fire and forget - don't block task execution
-          this.writeOutActionDumps();
+          this.writeOutActionDumps(executionDump);
         },
       },
     });
@@ -451,11 +452,27 @@ export class Agent<
     return reportHTMLContent(this.dumpDataString(opt));
   }
 
-  writeOutActionDumps() {
-    this.reportGenerator.onDumpUpdate(this.dump);
+  private lastExecutionDump?: ExecutionDump;
+
+  writeOutActionDumps(executionDump?: ExecutionDump) {
+    const exec = executionDump || this.lastExecutionDump;
+    if (exec) {
+      this.lastExecutionDump = exec;
+      this.reportGenerator.onExecutionUpdate(exec, this.getGroupMeta());
+    }
     this.reportFile = this.reportGenerator.getReportPath();
   }
 
+  private getGroupMeta(): GroupMeta {
+    return {
+      groupName: this.dump.groupName,
+      groupDescription: this.dump.groupDescription,
+      sdkVersion: this.dump.sdkVersion,
+      modelBriefs: this.dump.modelBriefs,
+      deviceType: this.dump.deviceType,
+    };
+  }
+
   private async callbackOnTaskStartTip(task: ExecutionTask) {
     const param = paramStr(task);
     const tip = param ? `${typeStr(task)} - ${param}` : typeStr(task);
@@ -1264,7 +1281,7 @@ export class Agent<
     // Wait for all queued write operations to complete
     await this.reportGenerator.flush();
 
-    await this.reportGenerator.finalize(this.dump);
+    await this.reportGenerator.finalize();
     this.reportFile = this.reportGenerator.getReportPath();
 
     await this.interface.destroy?.();
@@ -1327,7 +1344,7 @@ export class Agent<
       }
     }
 
-    this.writeOutActionDumps();
+    this.writeOutActionDumps(executionDump);
     await this.reportGenerator.flush();
   }
 

packages/core/src/index.ts

@@ -28,6 +28,7 @@ export {
   GroupedActionDump,
   type IExecutionDump,
   type IGroupedActionDump,
+  type GroupMeta,
 } from './types';
 
 export { z };