fix(playground, report): fix ui bugs (#1259)

Author: quanru

apps/report/src/components/detail-side/index.tsx

@@ -212,6 +212,16 @@ const DetailSide = (): JSX.Element => {
             },
           ]
         : []),
+      ...(task?.searchAreaUsage
+        ? [
+            {
+              key: 'searchAreaUsage',
+              content: (
+                <pre>{JSON.stringify(task.searchAreaUsage, undefined, 2)}</pre>
+              ),
+            },
+          ]
+        : []),
       ...(task?.usage
         ? [
             {

apps/report/src/components/sidebar/index.less

@@ -73,7 +73,7 @@
 
   .task-meta-tokens {
     display: grid;
-    grid-template-columns: 1fr auto 112px 26px;
+    grid-template-columns: 1fr auto minmax(100px, 1fr) 55px 65px;
     gap: 8px;
     align-items: center;
     font-size: 12px;
@@ -91,11 +91,11 @@
       justify-content: center;
 
       &:nth-child(2) {
-        grid-column: 3;
+        grid-column: 4;
       }
 
       &:nth-child(3) {
-        grid-column: 4;
+        grid-column: 5;
       }
 
       .token-value {
@@ -168,7 +168,7 @@
 
 
     &.pro-mode {
-      grid-template-columns: 1fr auto 100px 55px 65px;
+      grid-template-columns: 1fr auto minmax(100px, 1fr) 55px 65px;
     }
 
     .status-icon {
@@ -230,7 +230,7 @@
     flex-shrink: 0;
 
     &.pro-mode {
-      grid-template-columns: 1fr auto 100px 55px 65px;
+      grid-template-columns: 1fr auto minmax(100px, 1fr) 55px 65px;
     }
 
     .header-name {

apps/report/src/components/sidebar/index.tsx

@@ -1,7 +1,16 @@
 import './index.less';
 import { useAllCurrentTasks, useExecutionDump } from '@/components/store';
-import type { ExecutionTask, ExecutionTaskInsightLocate } from '@midscene/core';
+import type {
+  AIUsageInfo,
+  ExecutionTask,
+  ExecutionTaskInsightLocate,
+} from '@midscene/core';
 import { typeStr } from '@midscene/core/agent';
+
+// Extended task type with searchAreaUsage
+type ExecutionTaskWithSearchAreaUsage = ExecutionTask & {
+  searchAreaUsage?: AIUsageInfo;
+};
 import {
   type AnimationScript,
   iconForStatus,
@@ -16,7 +25,7 @@ import type { PlaywrightTasks } from '../../types';
 import ReportOverview from '../report-overview';
 
 const SideItem = (props: {
-  task: ExecutionTask;
+  task: ExecutionTaskWithSearchAreaUsage;
   selected?: boolean;
   onClick?: () => void;
   onItemHover?: (task: ExecutionTask | null, x?: number, y?: number) => any;
@@ -138,19 +147,31 @@ const SideItem = (props: {
         {/* Display usage info in table style if available and Pro mode is enabled */}
         {props.proModeEnabled && (
           <>
-            <Tooltip title="The name of the model used this time">
+            <Tooltip title={task.usage?.model_name || ''}>
               <div className="usage-column model-name">
                 {task.usage?.model_name || '-'}
               </div>
             </Tooltip>
             <Tooltip title="Input tokens sent to the AI model">
               <div className="usage-column prompt-tokens">
-                {task.usage?.prompt_tokens || '-'}
+                {(() => {
+                  const mainUsage = task.usage?.prompt_tokens || 0;
+                  const searchAreaUsage =
+                    task.searchAreaUsage?.prompt_tokens || 0;
+                  const total = mainUsage + searchAreaUsage;
+                  return total > 0 ? total : '-';
+                })()}
               </div>
             </Tooltip>
             <Tooltip title="Output tokens generated by the AI model">
               <div className="usage-column completion-tokens">
-                {task.usage?.completion_tokens || '-'}
+                {(() => {
+                  const mainUsage = task.usage?.completion_tokens || 0;
+                  const searchAreaUsage =
+                    task.searchAreaUsage?.completion_tokens || 0;
+                  const total = mainUsage + searchAreaUsage;
+                  return total > 0 ? total : '-';
+                })()}
               </div>
             </Tooltip>
           </>
@@ -235,13 +256,24 @@ const Sidebar = (props: SidebarProps = {}): JSX.Element => {
   const totalPromptTokens =
     groupedDump?.executions
       .flatMap((e) => e.tasks)
-      .reduce((acc, task) => acc + (task.usage?.prompt_tokens || 0), 0) || 0;
+      .reduce((acc, task) => {
+        const mainUsage = task.usage?.prompt_tokens || 0;
+        const searchAreaUsage =
+          (task as ExecutionTaskWithSearchAreaUsage).searchAreaUsage
+            ?.prompt_tokens || 0;
+        return acc + mainUsage + searchAreaUsage;
+      }, 0) || 0;
 
   const totalCompletionTokens =
     groupedDump?.executions
       .flatMap((e) => e.tasks)
-      .reduce((acc, task) => acc + (task.usage?.completion_tokens || 0), 0) ||
-    0;
+      .reduce((acc, task) => {
+        const mainUsage = task.usage?.completion_tokens || 0;
+        const searchAreaUsage =
+          (task as ExecutionTaskWithSearchAreaUsage).searchAreaUsage
+            ?.completion_tokens || 0;
+        return acc + mainUsage + searchAreaUsage;
+      }, 0) || 0;
 
   const executionContent = groupedDump ? (
     <div className="execution-info-section">

apps/report/test-data/ai-model.json

@@ -251,6 +251,11 @@ export class TaskExecutor {
             };
 
             task.usage = usage;
+
+            // Store searchAreaUsage in task metadata
+            if (dump?.taskInfo?.searchAreaUsage) {
+              task.searchAreaUsage = dump.taskInfo.searchAreaUsage;
+            }
           };
           this.insight.onceDumpUpdatedFn = dumpCollector;
           const shotTime = Date.now();

packages/core/src/agent/tasks.ts

@@ -393,6 +393,7 @@ export type ExecutionTask<
       cost?: number;
     };
     usage?: AIUsageInfo;
+    searchAreaUsage?: AIUsageInfo;
   };
 
 export interface ExecutionDump extends DumpMeta {

packages/core/src/types.ts

@@ -148,6 +148,12 @@
       z-index: 10;
       justify-content: flex-end; /* Right align when only one button */
       gap: 8px; /* Add gap between buttons when there are multiple */
+      pointer-events: none; /* Allow clicks to pass through the background */
+
+      /* Re-enable pointer events for child elements */
+      > * {
+        pointer-events: auto;
+      }
     }
   }
 

packages/visualizer/src/component/prompt-input/index.less

@@ -66,7 +66,9 @@ describe(
         'type "standard_user" in user name input, type "secret_sauce" in password',
       );
 
-      await agent.aiTap('Login');
+      await agent.aiTap('Login', {
+        deepThink: true,
+      });
 
       expect(beforeInvokeAction.mock.calls.length).toBeGreaterThan(1);
       expect(beforeInvokeAction.mock.calls.length).toEqual(