@opensumi/ide-debug 2.23.5-rc-1681808681.0 → 2.23.5

package/src/browser/model/debug-stack-frame.ts

@@ -1,4 +1,4 @@
-import { formatLocalize, IRange } from '@opensumi/ide-core-browser';
+import { IRange } from '@opensumi/ide-core-browser';
 import { IResourceOpenOptions } from '@opensumi/ide-editor';
 import { Range } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/range';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
@@ -9,15 +9,12 @@ import { DebugScope, ExpressionContainer } from '../tree/debug-tree-node.define'
 import { DebugSource } from './debug-source';
 import { DebugThread } from './debug-thread';
 
+
 export class DebugStackFrameData {
   readonly raw: DebugProtocol.StackFrame;
 }
 
 export class DebugStackFrame extends DebugStackFrameData {
-  public static is(frame: any): frame is DebugStackFrame {
-    return !!frame && 'raw' in frame;
-  }
-
   constructor(readonly thread: DebugThread, readonly session: DebugSession) {
     super();
   }
@@ -112,26 +109,3 @@ export class DebugStackFrame extends DebugStackFrameData {
     return scopesContainingRange.length ? scopesContainingRange : nonExpensiveScopes;
   }
 }
-
-export class ShowMoreDebugStackFrame {
-  constructor(
-    // `undefined` 说明已经在末尾
-    public readonly nextFrame: DebugStackFrame | undefined,
-    public readonly frames: DebugStackFrame[],
-    readonly session: DebugSession,
-    readonly origin: string,
-    readonly _open: (showMoreFrame: ShowMoreDebugStackFrame) => void,
-  ) {}
-
-  get name() {
-    return formatLocalize('debug.stack.showMoreAndOrigin', this.frames.length, this.origin);
-  }
-
-  get id(): string {
-    return `${this.session.id}:showMore:${this.nextFrame?.id}`;
-  }
-
-  open = () => {
-    this._open(this);
-  };
-}

package/src/browser/model/debug-thread.ts

@@ -158,12 +158,10 @@ export class DebugThread extends DebugThreadData {
     const result = new Map<number, DebugStackFrame>(this._frames);
     for (const raw of frames) {
       const id = raw.id;
-      if (!this._frames.has(id)) {
-        const frame = new DebugStackFrame(this, this.session);
-        this._frames.set(id, frame);
-        frame.update({ raw });
-        result.set(id, frame);
-      }
+      const frame = this._frames.get(id) || new DebugStackFrame(this, this.session);
+      this._frames.set(id, frame);
+      frame.update({ raw });
+      result.set(id, frame);
     }
     const values = [...result.values()];
     frontEndTime('doUpdateFrames');

package/src/browser/view/breakpoints/debug-breakpoints.module.less

@@ -21,6 +21,8 @@
     pointer-events: none;
   }
   &:hover {
+    background: var(--list-hoverBackground);
+    color: var(--list-hoverForeground);
     .debug_remove_breakpoints_icon {
       display: inline-block;
       pointer-events: all;
@@ -40,7 +42,6 @@
   width: 19px;
   height: 19px;
   min-width: 19px;
-  margin-right: 3px;
 }
 
 .debug_breakpoints_badge {
@@ -50,7 +51,9 @@
 
 .debug_breakpoints_description {
   display: block;
-  opacity: 0.85;
+  transform: scale(0.95);
+  opacity: 0.7;
+  margin-left: 5px;
   display: inline;
 }
 
@@ -66,7 +69,3 @@
   margin-right: 5px;
   flex: 1;
 }
-
-.debug_breakpoints_item_tree_node {
-  padding-left: 27px !important;
-}

package/src/browser/view/breakpoints/debug-breakpoints.service.ts

@@ -1,16 +1,7 @@
 import { observable, action, runInAction } from 'mobx';
 
 import { Injectable, Autowired } from '@opensumi/di';
-import {
-  URI,
-  WithEventBus,
-  OnEvent,
-  IContextKeyService,
-  IReporterService,
-  Schemes,
-  Emitter,
-  Event,
-} from '@opensumi/ide-core-browser';
+import { URI, WithEventBus, OnEvent, IContextKeyService, IReporterService, Schemes } from '@opensumi/ide-core-browser';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
 import { ICodeEditor, EditorCollectionService, getSimpleEditorOptions } from '@opensumi/ide-editor';
 import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
@@ -25,12 +16,10 @@ import {
   isDebugExceptionBreakpoint,
   BreakpointManager,
   DebugDecorator,
-  EXCEPTION_BREAKPOINT_URI,
 } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 import { DebugViewModel } from '../debug-view-model';
 
-import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
 import { BreakpointItem } from './debug-breakpoints.view';
 
 @Injectable()
@@ -62,17 +51,14 @@ export class DebugBreakpointsService extends WithEventBus {
   @Autowired(IEditorDocumentModelService)
   protected readonly documentService: IEditorDocumentModelService;
 
-  private readonly _onDidChangeBreakpointsTreeNode = new Emitter<Map<string, BreakpointsTreeNode[]>>();
-  readonly onDidChangeBreakpointsTreeNode: Event<Map<string, BreakpointsTreeNode[]>> =
-    this._onDidChangeBreakpointsTreeNode.event;
-
   private _inputEditor: ICodeEditor;
 
   public get inputEditor(): ICodeEditor {
     return this._inputEditor;
   }
 
-  public treeNodeMap: Map<string, BreakpointsTreeNode[]> = new Map();
+  @observable
+  public nodes: BreakpointItem[] = [];
 
   @observable
   public enable: boolean;
@@ -89,6 +75,7 @@ export class DebugBreakpointsService extends WithEventBus {
 
   async init() {
     await this.updateRoots();
+    await this.updateBreakpoints();
     this.workspaceService.onWorkspaceChanged(async () => {
       this.updateRoots();
       this.updateBreakpoints();
@@ -99,9 +86,6 @@ export class DebugBreakpointsService extends WithEventBus {
     this.breakpoints.onDidChangeExceptionsBreakpoints(() => {
       this.updateBreakpoints();
     });
-    this.breakpoints.whenReady.then(() => {
-      this.updateBreakpoints();
-    });
     this.contextKeyService.onDidChangeContext((e) => {
       if (e.payload.affectsSome(new Set([CONTEXT_IN_DEBUG_MODE_KEY]))) {
         runInAction(() => {
@@ -155,71 +139,38 @@ export class DebugBreakpointsService extends WithEventBus {
     }
   }
 
-  extractNodes(item: DebugExceptionBreakpoint | IDebugBreakpoint): BreakpointItem | undefined {
-    if (isDebugBreakpoint(item)) {
-      return {
-        id: item.id,
-        name: '',
-        description: '',
-        onDescriptionChange: Event.None,
-        breakpoint: item,
-      };
-    }
-    if (isDebugExceptionBreakpoint(item)) {
-      return {
-        id: item.filter,
-        name: item.label,
-        onDescriptionChange: Event.None,
-        description: '',
-        breakpoint: item,
-      };
-    }
+  extractNodes(items: (DebugExceptionBreakpoint | IDebugBreakpoint)[]) {
+    const nodes: BreakpointItem[] = [];
+    items.forEach((item) => {
+      if (isDebugBreakpoint(item)) {
+        const uri = URI.parse(item.uri);
+        const parent = this.roots.filter((root) => root.isEqualOrParent(uri))[0];
+        nodes.push({
+          id: item.id,
+          name: uri.displayName,
+          description: parent && parent.relative(uri)!.toString(),
+          breakpoint: item,
+        });
+      }
+      if (isDebugExceptionBreakpoint(item)) {
+        nodes.push({
+          id: item.filter,
+          name: item.label,
+          description: '',
+          breakpoint: item,
+        });
+      }
+    });
+    return nodes;
   }
 
   @action
   private async updateBreakpoints() {
     await this.breakpoints.whenReady;
-    this.treeNodeMap.clear();
-
-    const allBreakpoints = [...this.breakpoints.getExceptionBreakpoints(), ...this.breakpoints.getBreakpoints()];
-
-    allBreakpoints.forEach((item) => {
-      const extractNode = this.extractNodes(item);
-      if (extractNode) {
-        const uri = isDebugBreakpoint(item) ? URI.parse(item.uri) : EXCEPTION_BREAKPOINT_URI;
-        const getTreeNodes = this.treeNodeMap.get(uri.toString()) || [];
-        getTreeNodes.push(new BreakpointsTreeNode(uri, extractNode));
-        this.treeNodeMap.set(uri.toString(), getTreeNodes);
-      }
-    });
-    this._onDidChangeBreakpointsTreeNode.fire(this.treeNodeMap);
-  }
-
-  private async getDocumentModelRef(uri: URI) {
-    const document = this.documentService.getModelReference(uri);
-    if (!document) {
-      return this.documentService.createModelReference(uri);
-    }
-    return document;
-  }
-
-  public async refreshBreakpointsInfo() {
-    const treeNodeValues = this.treeNodeMap.values();
-    const allTreeNodes: BreakpointsTreeNode[] = Array.from(treeNodeValues).reduce((acc, cur) => acc.concat(cur), []);
-
-    for await (const node of allTreeNodes) {
-      const { rawData, uri } = node;
-      if (isDebugBreakpoint(rawData.breakpoint)) {
-        const line = rawData.breakpoint.raw.line;
-        const monacoModel = await this.getDocumentModelRef(uri);
-        if (!monacoModel) {
-          return;
-        }
-
-        const getContent = monacoModel.instance.getMonacoModel().getLineContent(line);
-        node.fireDescriptionChange(getContent.trim());
-      }
-    }
+    this.nodes = this.extractNodes([
+      ...this.breakpoints.getExceptionBreakpoints(),
+      ...this.breakpoints.getBreakpoints(),
+    ]);
   }
 
   removeAllBreakpoints() {

package/src/browser/view/breakpoints/debug-breakpoints.view.tsx

@@ -1,34 +1,16 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React from 'react';
 
-import { BasicRecycleTree, CheckBox, IBasicTreeData, ICompositeTreeNode } from '@opensumi/ide-components';
-import { Badge } from '@opensumi/ide-components';
-import {
-  useInjectable,
-  CommandService,
-  EDITOR_COMMANDS,
-  URI,
-  getIcon,
-  Disposable,
-  ViewState,
-  Event,
-  isUndefined,
-} from '@opensumi/ide-core-browser';
+import { CheckBox } from '@opensumi/ide-components';
+import { Badge, RecycleList } from '@opensumi/ide-components';
+import { useInjectable, ViewState, CommandService, EDITOR_COMMANDS, URI, getIcon } from '@opensumi/ide-core-browser';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
 import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
-import {
-  DebugExceptionBreakpoint,
-  isDebugBreakpoint,
-  isRuntimeBreakpoint,
-  getStatus,
-  isDebugExceptionBreakpoint,
-  EXCEPTION_BREAKPOINT_URI,
-} from '../../breakpoint';
+import { DebugExceptionBreakpoint, isDebugBreakpoint, isRuntimeBreakpoint, getStatus } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
-import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
 import styles from './debug-breakpoints.module.less';
 import { DebugBreakpointsService } from './debug-breakpoints.service';
 
@@ -36,101 +18,29 @@ export interface BreakpointItem {
   name: string;
   id: string;
   description: string;
-  onDescriptionChange: Event<string>;
   breakpoint: IDebugBreakpoint | DebugExceptionBreakpoint;
 }
 
 export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
-  const debugBreakpointsService: DebugBreakpointsService = useInjectable(DebugBreakpointsService);
-  const { enable, toggleBreakpointEnable } = debugBreakpointsService;
-  const isDisposed = useRef<boolean>(false);
-  const [treeData, setTreeData] = useState<IBasicTreeData[]>([]);
-
-  const updateTreeData = useCallback(
-    (nodes: [string, BreakpointsTreeNode[]][]) => {
-      const { roots } = debugBreakpointsService;
-      const breakpointTreeData: IBasicTreeData[] = [];
-      nodes.forEach(([uri, items]) => {
-        const isException = EXCEPTION_BREAKPOINT_URI.toString() === uri;
-        if (isException) {
-          items.forEach((item) => {
-            breakpointTreeData.push({
-              label: '',
-              expandable: false,
-              children: [],
-              description: (
-                <BreakpointItem
-                  toggle={() => toggleBreakpointEnable(item.breakpoint)}
-                  breakpointEnabled={enable}
-                  data={item.rawData}
-                  isDebugMode={debugBreakpointsService.inDebugMode}
-                ></BreakpointItem>
-              ),
-            });
-          });
-        } else {
-          const toURI = URI.parse(uri);
-          const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
-
-          breakpointTreeData.push({
-            label: parent ? parent.relative(toURI)?.toString() || '' : URI.parse(uri).displayName,
-            expandable: true,
-            iconClassName: getIcon('file-text'),
-            expanded: true,
-            children: items.map((item) => ({
-              ...item,
-              label: '',
-              expandable: false,
-              description: (
-                <BreakpointItem
-                  toggle={() => toggleBreakpointEnable(item.breakpoint)}
-                  breakpointEnabled={enable}
-                  data={item.rawData}
-                  isDebugMode={debugBreakpointsService.inDebugMode}
-                ></BreakpointItem>
-              ),
-            })),
-          });
-        }
-      });
-      if (!isDisposed.current) {
-        setTreeData(breakpointTreeData);
-      }
-    },
-    [treeData],
+  const { nodes, enable, inDebugMode, toggleBreakpointEnable }: DebugBreakpointsService =
+    useInjectable(DebugBreakpointsService);
+  const template = ({ data }: { data: BreakpointItem }) => (
+    <BreakpointItem
+      toggle={() => toggleBreakpointEnable(data.breakpoint)}
+      breakpointEnabled={enable}
+      data={data}
+      isDebugMode={inDebugMode}
+    ></BreakpointItem>
   );
 
-  useEffect(() => {
-    const dispose = new Disposable();
-    updateTreeData(Array.from(debugBreakpointsService.treeNodeMap.entries()));
-    dispose.addDispose(
-      debugBreakpointsService.onDidChangeBreakpointsTreeNode((nodes: Map<string, BreakpointsTreeNode[]>) => {
-        updateTreeData(Array.from(nodes.entries()));
-      }),
-    );
-
-    return () => {
-      isDisposed.current = true;
-      dispose.dispose();
-    };
-  }, []);
+  const containerStyle = {
+    height: viewState.height,
+    width: viewState.width,
+  } as React.CSSProperties;
 
-  useEffect(() => {
-    if (treeData.length > 0) {
-      requestAnimationFrame(() => {
-        debugBreakpointsService.refreshBreakpointsInfo();
-      });
-    }
-  }, [treeData]);
-
-  const getItemClassName = useCallback((item: ICompositeTreeNode) => {
-    if (!item.children && isUndefined((item as any).expandable)) {
-      return styles.debug_breakpoints_item_tree_node;
-    }
-  }, []);
   return (
     <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
-      <BasicRecycleTree treeData={treeData} height={viewState.height} getItemClassName={getItemClassName} />
+      <RecycleList data={nodes} itemHeight={22} template={template} style={containerStyle} />
     </div>
   );
 });
@@ -152,7 +62,6 @@ export const BreakpointItem = ({
   const debugBreakpointsService = useInjectable<DebugBreakpointsService>(DebugBreakpointsService);
   const [enabled, setEnabled] = React.useState<boolean>(defaultValue);
   const [status, setStatus] = React.useState<DebugProtocol.Breakpoint | false | undefined>(undefined);
-  const [description, setDescription] = React.useState<string>(data.description);
 
   const handleBreakpointChange = () => {
     toggle();
@@ -189,8 +98,6 @@ export const BreakpointItem = ({
   };
 
   React.useEffect(() => {
-    const disposable = new Disposable();
-
     const exec = () => {
       if (isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint)) {
         const status = getStatus(data.breakpoint);
@@ -198,11 +105,9 @@ export const BreakpointItem = ({
       }
     };
 
-    disposable.addDispose(manager.onDidChangeActiveDebugSession(() => exec()));
+    const disposable = manager.onDidChangeActiveDebugSession(() => exec());
     exec();
 
-    disposable.addDispose(data.onDescriptionChange(setDescription));
-
     return () => {
       setStatus(undefined);
       disposable.dispose();
@@ -237,15 +142,13 @@ export const BreakpointItem = ({
     debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
   };
 
-  const isExceptionBreakpoint = useMemo(() => isDebugExceptionBreakpoint(data.breakpoint), [data]);
-
   return (
     <div className={cls(styles.debug_breakpoints_item)}>
-      {!isExceptionBreakpoint && <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>}
+      <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>
       <CheckBox id={data.id} onChange={handleBreakpointChange} checked={enabled}></CheckBox>
       <div className={styles.debug_breakpoints_wrapper} onClick={handleBreakpointClick}>
-        {data.name && <span className={styles.debug_breakpoints_name}>{data.name}</span>}
-        <span className={styles.debug_breakpoints_description}>{description}</span>
+        <span className={styles.debug_breakpoints_name}>{data.name}</span>
+        <span className={styles.debug_breakpoints_description}>{data.description}</span>
       </div>
       {isDebugBreakpoint(data.breakpoint) ? (
         <>

package/src/browser/view/configuration/debug-configuration.module.less

@@ -1,14 +1,11 @@
 @import '~@opensumi/ide-components/lib/style/mixins.less';
 
-.debug_action_bar_internal {
-  padding: 0px 8px;
-  margin-bottom: 8px;
-}
-
 .debug_action_bar {
   height: 28px;
   display: flex;
   align-items: center;
+  padding: 0px 8px;
+  margin-bottom: 8px;
   justify-content: flex-start;
   pointer-events: all;
   overflow: hidden;
@@ -39,14 +36,11 @@
   }
 }
 
-.debug_configuration_container {
-  padding-right: 8px;
-  margin-bottom: 8px;
-}
-
 .debug_configuration_toolbar {
   display: flex;
   height: 28px;
+  padding-right: 8px;
+  margin-bottom: 8px;
   align-items: center;
 
   .debug_actions {

package/src/browser/view/configuration/debug-configuration.view.tsx

@@ -2,15 +2,15 @@ import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { Option, Select } from '@opensumi/ide-components';
-import { AppConfig, URI, localize, useInjectable } from '@opensumi/ide-core-browser';
+import { Select, Option } from '@opensumi/ide-components';
+import { useInjectable, localize, URI, AppConfig } from '@opensumi/ide-core-browser';
 import { Select as NativeSelect } from '@opensumi/ide-core-browser/lib/components/select';
 
 import {
   DEFAULT_ADD_CONFIGURATION_KEY,
+  DEFAULT_NO_CONFIGURATION_KEY,
   DEFAULT_CONFIGURATION_INDEX_SEPARATOR,
   DEFAULT_CONFIGURATION_NAME_SEPARATOR,
-  DEFAULT_NO_CONFIGURATION_KEY,
   DebugSessionOptions,
 } from '../../../common';
 import { DebugAction } from '../../components';
@@ -198,26 +198,7 @@ export const DebugActionBar = React.memo(({ runDebug, openConfiguration, openDeb
   </div>
 ));
 
-export const DebugConfigurationContainerView = observer(() => {
-  const { float } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
-
-  return (
-    <>
-      <DebugControllerView className={styles.debug_configuration_container} />
-      {!float && <DebugToolbarView float={false} className={styles.debug_action_bar_internal} />}
-    </>
-  );
-});
-
-export interface DebugControllerViewProps {
-  className?: string;
-}
-
-/**
- * 该组件支持用户导入
- * 后续如果有一些改动需要考虑是否有 breakchange
- */
-export const DebugControllerView = observer((props: DebugControllerViewProps) => {
+export const DebugConfigurationView = observer((props) => {
   const {
     configurationOptions,
     toValue,
@@ -227,12 +208,12 @@ export const DebugControllerView = observer((props: DebugControllerViewProps) =>
     openDebugConsole,
     updateConfiguration,
     start,
+    float,
     isMultiRootWorkspace,
     workspaceRoots,
   } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
   const appConfig = useInjectable<AppConfig>(AppConfig);
   const addConfigurationLabel = localize('debug.action.add.configuration');
-
   const setCurrentConfiguration = React.useCallback((event: React.ChangeEvent<HTMLSelectElement> | string) => {
     let value: React.ChangeEvent<HTMLSelectElement> | string;
     if (typeof event === 'object') {
@@ -255,18 +236,21 @@ export const DebugControllerView = observer((props: DebugControllerViewProps) =>
   }, []);
 
   return (
-    <div className={cls(styles.debug_configuration_toolbar, props.className || '')}>
-      <ConfigurationSelector
-        currentValue={currentValue}
-        options={configurationOptions}
-        onChangeConfiguration={setCurrentConfiguration}
-        isMultiRootWorkspace={isMultiRootWorkspace}
-        addConfigurationLabel={addConfigurationLabel}
-        toValue={toValue}
-        isElectronRenderer={appConfig.isElectronRenderer}
-        workspaceRoots={workspaceRoots}
-      />
-      <DebugActionBar runDebug={start} openConfiguration={openConfiguration} openDebugConsole={openDebugConsole} />
+    <div>
+      <div className={styles.debug_configuration_toolbar}>
+        <ConfigurationSelector
+          currentValue={currentValue}
+          options={configurationOptions}
+          onChangeConfiguration={setCurrentConfiguration}
+          isMultiRootWorkspace={isMultiRootWorkspace}
+          addConfigurationLabel={addConfigurationLabel}
+          toValue={toValue}
+          isElectronRenderer={appConfig.isElectronRenderer}
+          workspaceRoots={workspaceRoots}
+        />
+        <DebugActionBar runDebug={start} openConfiguration={openConfiguration} openDebugConsole={openDebugConsole} />
+      </div>
+      {!float && <DebugToolbarView float={false} />}
     </div>
   );
 });

package/src/browser/view/configuration/debug-toolbar.view.tsx

@@ -7,13 +7,13 @@ import { Injectable } from '@opensumi/di';
 import { Option, Select } from '@opensumi/ide-components';
 import {
   AppConfig,
-  DisposableCollection,
-  PreferenceService,
-  electronEnv,
   getIcon,
-  isMacintosh,
   localize,
+  PreferenceService,
   useInjectable,
+  DisposableCollection,
+  electronEnv,
+  isMacintosh,
 } from '@opensumi/ide-core-browser';
 import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
 import { Select as NativeSelect } from '@opensumi/ide-core-browser/lib/components/select';
@@ -79,13 +79,8 @@ class FloatController {
 
 export interface DebugToolbarViewProps {
   float: boolean;
-  className?: string;
 }
 
-/**
- * 该组件支持用户导入
- * 后续如果有一些改动需要考虑是否有 breakchange
- */
 export const DebugToolbarView = observer((props: DebugToolbarViewProps) => {
   const {
     state,
@@ -226,7 +221,7 @@ export const DebugToolbarView = observer((props: DebugToolbarViewProps) => {
   );
 
   return (
-    <div className={cls(styles.debug_action_bar, props.className || '')}>
+    <div className={styles.debug_action_bar}>
       {renderSelections(sessions.filter((s: DebugSession) => !s.parentSession))}
       <div className={styles.debug_actions}>
         {renderContinue(state)}