more specific stuff

frontend/app/components/shared/Bookmark/Bookmark.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
+import { signalService } from 'App/services';
 
 interface Props {
   sessionId: any;
@@ -35,6 +36,14 @@ function Bookmark({ sessionId }: Props) {
     onToggleFavorite(sessionId).then(() => {
       toast.success(isFavorite ? REMOVED_MESSAGE : ADDED_MESSAGE);
       setIsFavorite(!isFavorite);
+
+      signalService.send(
+        {
+          source: 'vault',
+          value: !isFavorite,
+        },
+        sessionId,
+      );
     });
   };
 

frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
+import ExplainButton from 'Shared/DevTools/ExplainButton';
 import { Icon } from 'UI';
 import JumpButton from 'Shared/DevTools/JumpButton';
 import TabTag from '../TabTag';
@@ -13,6 +14,7 @@ interface Props {
   onClick?: () => void;
   getTabNum?: (tab: string) => number;
   showSingleTab: boolean;
+  sessionId: string;
 }
 function ConsoleRow(props: Props) {
   const { log, iconProps, jump, renderWithNL, style } = props;
@@ -106,7 +108,21 @@ function ConsoleRow(props: Props) {
             </div>
           ))}
       </div>
-      <JumpButton time={log.time} onClick={() => jump(log.time)} />
+      <JumpButton
+        extra={
+          <ExplainButton
+            sessionId={props.sessionId}
+            log={{
+              level: log.level,
+              message: log.message ? `${log.value} ${log.message}` : log.value,
+            }}
+          />
+        }
+        time={log.time}
+        onClick={() => {
+          jump(log.time);
+        }}
+      />
     </div>
   );
 }

frontend/app/components/shared/DevTools/ExplainButton.tsx

@@ -0,0 +1,3 @@
+export default function ExplainButton(props: any) {
+  return null;
+}

frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx

@@ -8,15 +8,14 @@ interface Props {
   onClick: any;
   time?: number;
   tooltip?: string;
+  extra?: React.ReactNode;
 }
 function JumpButton(props: Props) {
   const { tooltip } = props;
   return (
-    <div className="absolute right-2 top-0 bottom-0 my-auto flex items-center">
-      {props.time ? (
-        <div className="block mr-2 text-sm">
-          {shortDurationFromMs(props.time)}
-        </div>
+    <div className="absolute right-2 top-0 bottom-0 my-auto flex items-center gap-2">
+      {props.extra ? (
+        <div className={'hidden group-hover:block'}>{props.extra}</div>
       ) : null}
       <Tooltip title={tooltip} disabled={!tooltip}>
         <Button
@@ -32,6 +31,11 @@ function JumpButton(props: Props) {
         >
           JUMP
         </Button>
+        {props.time ? (
+          <div className="block group-hover:hidden mr-2 text-sm">
+            {shortDurationFromMs(props.time)}
+          </div>
+        ) : null}
       </Tooltip>
     </div>
   );

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -35,6 +35,8 @@ import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import WSPanel from './WSPanel';
 import { useTranslation } from 'react-i18next';
 import { mergeListsWithZoom, processInChunks } from './utils';
+import check from './hasExplainAi';
+import ExplainButton from '../ExplainButton';
 
 // Constants remain the same
 const INDEX_KEY = 'network';
@@ -734,6 +736,10 @@ export const NetworkPanelComp = observer(
       return cols;
     }, [showSingleTab, activeTab, t, getTabName, getTabNum, isSpot]);
 
+    const hasExplainAi = (reqType: string) => {
+      // @ts-ignore
+      return check && [ResourceType.XHR, ResourceType.FETCH].includes(reqType);
+    };
     return (
       <BottomBlock
         style={{ height: '100%' }}
@@ -869,6 +875,19 @@ export const NetworkPanelComp = observer(
                     player.jump(row.time);
                   }}
                   activeIndex={activeIndex}
+                  extra={(row) =>
+                    hasExplainAi(row.type) ? (
+                      <ExplainButton
+                        sessionId={sessionId}
+                        request={{
+                          url: row.url,
+                          status: parseInt(row.status),
+                          payload: row.request,
+                          response: row.response,
+                        }}
+                      />
+                    ) : null
+                  }
                 >
                   {tableCols}
                 </TimeTable>

frontend/app/components/shared/DevTools/NetworkPanel/hasExplainAi.ts

@@ -0,0 +1 @@
+export default false;

frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx

@@ -70,6 +70,7 @@ type Props = {
   hoverable?: boolean;
   onRowClick?: (row: any, index: number) => void;
   onJump?: (obj: { time: number }) => void;
+  extra?: (row: Record<string, any>) => React.ReactNode;
 };
 
 type TimeLineInfo = {
@@ -145,7 +146,10 @@ function TimeTable(props: Props) {
   ]);
   React.useEffect(() => {
     if (props.activeIndex && props.activeIndex >= 0 && scroller.current) {
-      scroller.current.scrollToIndex(props.activeIndex, { align: 'center', smooth: false });
+      scroller.current.scrollToIndex(props.activeIndex, {
+        align: 'center',
+        smooth: false,
+      });
       setFirstVisibleRowIndex(props.activeIndex ?? 0);
     }
   }, [props.activeIndex]);
@@ -296,6 +300,7 @@ function TimeTable(props: Props) {
                 onRowClick={onRowClick}
                 activeIndex={activeIndex}
                 onJump={onJump}
+                extra={props.extra}
               />
             )}
           </VList>
@@ -316,6 +321,7 @@ function RowRenderer({
   onRowClick,
   activeIndex,
   onJump,
+  extra,
 }: any) {
   if (!row) return;
   return (
@@ -350,7 +356,10 @@ function RowRenderer({
           popup={renderPopup}
         />
       </div>
-      <JumpButton onClick={() => onJump(index)} />
+      <JumpButton
+        extra={extra ? extra(row) : null}
+        onClick={() => onJump(index)}
+      />
     </div>
   );
 }