feat: show history compression progress and fix action trace overlays

apps/showcase_ui/src/app/utils/image-overlay.util.spec.ts

@@ -0,0 +1,85 @@
+import { drawActionCoordinatesOnOverlay, unwrapTraceAction } from './image-overlay.util';
+import { getActionCoords, getActionTargetText } from './action-formatter.util';
+
+// Trace records as the DataEngine publishes them in `generic_tools`.
+const PRO_TAP_TRACE = {
+  trace_id: 'pro-tap',
+  type: 'action',
+  name: 'tap',
+  timestamp: 1788478482.05,
+  status: 'success',
+  payload: {
+    action: {
+      action: 'tap',
+      coordinates: [922, 1710],
+      coordinate_space: 'pixel',
+      normalized_coordinates: [854, 705],
+      target_text: 'YouTube'
+    },
+    success: true,
+    post_screenshot: null
+  }
+};
+
+const FLASH_CLICK_TRACE = {
+  trace_id: 'flash-click',
+  type: 'action',
+  name: 'click',
+  timestamp: 1788478305.12,
+  status: 'success',
+  payload: {
+    args: { target: [618, 705], target_text: '相册' },
+    result: '{"outcome": "Clicked"}'
+  }
+};
+
+function fakeImage(): HTMLImageElement {
+  return { naturalWidth: 1080, naturalHeight: 2424 } as unknown as HTMLImageElement;
+}
+
+describe('unwrapTraceAction', () => {
+  it('flattens a Pro action trace (payload.action)', () => {
+    const act = unwrapTraceAction(PRO_TAP_TRACE);
+    expect(act.action).toBe('tap');
+    expect(act.normalized_coordinates).toEqual([854, 705]);
+    expect(act.target_text).toBe('YouTube');
+    expect(act.trace_id).toBe('pro-tap');
+    expect(act.timestamp).toBe(1788478482.05);
+  });
+
+  it('flattens a Flash action trace (payload.args)', () => {
+    const act = unwrapTraceAction(FLASH_CLICK_TRACE);
+    expect(act.action).toBe('click');
+    expect(act.target).toEqual([618, 705]);
+    expect(act.args.target).toEqual([618, 705]);
+  });
+
+  it('passes plain action objects through untouched', () => {
+    const plain = { action: 'tap', normalized_coordinates: [10, 20] };
+    expect(unwrapTraceAction(plain)).toBe(plain);
+  });
+});
+
+describe('drawActionCoordinatesOnOverlay', () => {
+  it('draws the tap marker for a Pro action trace', () => {
+    const overlay = document.createElement('div');
+    drawActionCoordinatesOnOverlay(fakeImage(), overlay, PRO_TAP_TRACE);
+    const marker = overlay.querySelector('.action-point-marker') as HTMLElement;
+    expect(marker).not.toBeNull();
+    expect(marker.style.left).toBe('85.4%');
+    expect(marker.style.top).toBe('70.5%');
+  });
+
+  it('draws the tap marker for a Flash action trace', () => {
+    const overlay = document.createElement('div');
+    drawActionCoordinatesOnOverlay(fakeImage(), overlay, FLASH_CLICK_TRACE);
+    expect(overlay.querySelector('.action-point-marker')).not.toBeNull();
+  });
+});
+
+describe('action card details from trace records', () => {
+  it('reads coordinates and target text from a Pro action trace', () => {
+    expect(getActionCoords(PRO_TAP_TRACE)).toContain('854');
+    expect(getActionTargetText(PRO_TAP_TRACE)).toBe('YouTube');
+  });
+});