@lvce-editor/static-server 0.53.2 → 0.53.4

package/static/{03f3661 → 03e29f4}/packages/debug-worker/dist/debugWorkerMain.js

@@ -994,9 +994,10 @@ const WebWorkerRpcClient = {
   create: create$4
 };
 
-const None$5 = 0;
+const None$6 = 0;
 const Paused = 1;
 const Default = 2;
+const Unavailable = 3;
 
 const rpcs = Object.create(null);
 const set$d = (id, rpc) => {
@@ -1094,93 +1095,97 @@ const executeProvider = async ({
   return result;
 };
 
+const getDebugEvent = debugId => {
+  return `onDebug:${debugId}`;
+};
+
 const resume$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.resume',
     params: [debugId]
   });
 };
 const pause$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.pause',
     params: [debugId]
   });
 };
 const stepOver$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.stepOver',
     params: [debugId]
   });
 };
 const stepInto$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.stepInto',
     params: [debugId]
   });
 };
 const stepOut$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.stepOut',
     params: [debugId]
   });
 };
 const setPauseOnExceptions$2 = (debugId, value) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.setPauseOnExceptions',
     params: [debugId, value]
   });
 };
 const start$1 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.start',
     params: [debugId]
   });
 };
 const getProperties$1 = (debugId, objectId) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getProperties',
     params: [debugId, objectId]
   });
 };
 const evaluate$1 = (debugId, expression, callFrameId) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.evaluate',
     params: [debugId, expression, callFrameId]
   });
 };
 const getScriptSource = (debugId, scriptId) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getScriptSource',
     params: [debugId, scriptId]
   });
 };
 const getPausedStatus = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getPausedStatus',
     params: [debugId]
   });
 };
 const getCallStack$1 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getCallStack',
     params: [debugId]
   });
 };
 const getScripts = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getScripts',
     params: [debugId]
   });
@@ -1430,7 +1435,7 @@ const acceptWatchExpressionEdit = async state => {
 const FocusDebugScope = 30;
 const FocusDebugWatchInput = 1290;
 
-const addWatchExpression = async (state, expression) => {
+const addWatchExpression$1 = async (state, expression) => {
   const {
     watchExpressions
   } = state;
@@ -1471,30 +1476,34 @@ const cancelWatchExpressionEdit = state => {
   };
 };
 
-const None$4 = 'none';
+const None$5 = 'none';
 const Exception$2 = 'exception';
 const Other = 'other';
 
 const All = 1;
 const Uncaught = 2;
-const None$3 = 0;
+const None$4 = 0;
 
-const None$2 = 'none';
+const None$3 = 'none';
 
 const create = (id, uri, x, y, width, height) => {
   const state = {
     id,
     disposed: false,
     processes: [],
-    debugState: None$5,
+    debugState: None$6,
     watchExpanded: false,
     breakPointsExpanded: false,
     scopeExpanded: false,
     callStackExpanded: false,
+    watchVisible: true,
+    breakPointsVisible: true,
+    scopeVisible: true,
+    callStackVisible: true,
     scopeChain: [],
     callStack: [],
     parsedScripts: Object.create(null),
-    pausedReason: None$4,
+    pausedReason: None$5,
     pausedMessage: '',
     debugInputValue: '',
     debugOutputValue: '',
@@ -1502,21 +1511,32 @@ const create = (id, uri, x, y, width, height) => {
     expandedIds: [],
     scopeFocusedIndex: -1,
     focusedIndex: -1,
-    pauseOnExceptionState: None$2,
+    pauseOnExceptionState: None$3,
     cache: Object.create(null),
     // TODO maybe store cache in extension host worker
-    exceptionBreakPoints: None$3,
+    exceptionBreakPoints: None$4,
     watchExpressions: [],
     focus: 0,
     editingValue: '',
     debugId: 0,
     inputSource: 0,
     editingselectionstart: 0,
-    editingselectionend: 0
+    editingselectionend: 0,
+    openFilesOnPause: true,
+    maxDescriptionLength: 100,
+    selectedIndex: -1,
+    visibleRows: []
   };
   set(id, state, state);
 };
 
+const deleteAllWatchExpressions$1 = state => {
+  return {
+    ...state,
+    watchExpressions: []
+  };
+};
+
 const deleteWatchExpression$1 = (state, index) => {
   if (index < 0 || index >= state.watchExpressions.length) {
     return state;
@@ -1546,7 +1566,7 @@ const RenderSelection = 8;
 
 const diffType = RenderItems;
 const isEqual$2 = (oldState, newState) => {
-  return oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.callFrameId === newState.callFrameId && oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.debugState === newState.debugState && oldState.watchExpanded === newState.watchExpanded && oldState.callStackExpanded === newState.callStackExpanded && oldState.watchExpressions === newState.watchExpressions;
+  return oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.callFrameId === newState.callFrameId && oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.debugState === newState.debugState && oldState.watchExpanded === newState.watchExpanded && oldState.callStackExpanded === newState.callStackExpanded && oldState.watchExpressions === newState.watchExpressions && oldState.visibleRows === newState.visibleRows;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -1589,7 +1609,7 @@ const dispose = async uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleWatchExpressionDoubleClick', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleWatchValueChange', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'removeWatchExpression', 'deleteWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
+const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleWatchExpressionDoubleClick', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleWatchExpressionContextMenu', 'handleWatchValueChange', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'deleteWatchExpression', 'deleteAllWatchExpressions', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause', 'showWatch', 'hideWatch', 'showScope', 'hideScope', 'showCallStack', 'hideCallStack'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1733,27 +1753,6 @@ const getKeyBindings = () => {
   }];
 };
 
-const createScriptMap = scripts => {
-  const parsedScripts = Object.create(null);
-  for (const script of scripts) {
-    parsedScripts[script.scriptId] = script;
-  }
-  return parsedScripts;
-};
-
-const getCallStack = callFrames => {
-  array(callFrames);
-  const callStack = [];
-  for (const callFrame of callFrames) {
-    callStack.push({
-      functionName: callFrame.functionName || '(anonymous)',
-      functionLocation: callFrame.functionLocation,
-      location: callFrame.location
-    });
-  }
-  return callStack;
-};
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1767,7 +1766,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 };
 
 const Block$1 = 'Block';
-const BreakPoints$1 = 'BreakPoints';
+const BreakPoints$2 = 'BreakPoints';
 const CallStack$3 = 'Call Stack';
 const Catch$1 = '`Catch` block';
 const Closure$1 = 'Closure';
@@ -1779,6 +1778,7 @@ const Global$1 = 'Global';
 const Local$1 = 'Local';
 const Module$1 = 'Module';
 const NamedClosure = 'Closure ({PH1})';
+const NoScriptRunning = 'No script running. To enable debugging, start a Node.js script with debugging enabled (e.g. node --inspect your-script.js) and connect to it.';
 const NotPaused = 'Not Paused';
 const Pause = 'Pause';
 const Restart = 'Restart';
@@ -1794,7 +1794,9 @@ const With$1 = '`With` block';
 const PauseOnExceptions$1 = 'Pause on Exceptions';
 const PauseOnUncaughtExceptions$1 = 'Pause on uncaught Exceptions';
 const NoWatchExpression = 'No Watch Expression';
-const DeleteWatchExpression$1 = 'Delete watch expression';
+const DeleteWatchExpression$2 = 'Delete Watch Expression';
+const DeleteAllWatchExpressions = 'Delete All Watch Expressions';
+const AddWatchExpression$1 = 'Add Watch Expression';
 
 const local = () => {
   return i18nString(Local$1);
@@ -1853,7 +1855,7 @@ const watch = () => {
   return i18nString(Watch$2);
 };
 const breakPoints = () => {
-  return i18nString(BreakPoints$1);
+  return i18nString(BreakPoints$2);
 };
 const scope = () => {
   return i18nString(Scope$4);
@@ -1883,7 +1885,71 @@ const noWatchExpression = () => {
   return i18nString(NoWatchExpression);
 };
 const deleteWatchExpression = () => {
-  return i18nString(DeleteWatchExpression$1);
+  return i18nString(DeleteWatchExpression$2);
+};
+const deleteAllWatchExpressions = () => {
+  return i18nString(DeleteAllWatchExpressions);
+};
+const addWatchExpression = () => {
+  return i18nString(AddWatchExpression$1);
+};
+const noScriptRunning = () => {
+  return i18nString(NoScriptRunning);
+};
+
+const None$2 = 0;
+
+const getMenuEntriesWatchExpression = () => {
+  const addMenuEntry = {
+    id: 'addWatchExpression',
+    label: addWatchExpression(),
+    flags: None$2,
+    command: 'RunAndDebug.addWatchExpression'
+  };
+  const deleteMenuEntry = {
+    id: 'deleteWatchExpression',
+    label: deleteWatchExpression(),
+    flags: None$2,
+    command: 'RunAndDebug.deleteWatchExpression'
+  };
+  const deleteAllMenuEntry = {
+    id: 'deleteAllWatchExpressions',
+    label: deleteAllWatchExpressions(),
+    flags: None$2,
+    command: 'RunAndDebug.deleteAllWatchExpressions'
+  };
+  return [addMenuEntry, deleteMenuEntry, deleteAllMenuEntry];
+};
+
+const DebugWatchExpression = 21_900;
+const DebugWatchSectionHeading = 21_901;
+
+const getMenuEntries = () => {
+  return [{
+    id: DebugWatchExpression,
+    entries: getMenuEntriesWatchExpression()
+  }];
+};
+
+const createScriptMap = scripts => {
+  const parsedScripts = Object.create(null);
+  for (const script of scripts) {
+    parsedScripts[script.scriptId] = script;
+  }
+  return parsedScripts;
+};
+
+const getCallStack = callFrames => {
+  array(callFrames);
+  const callStack = [];
+  for (const callFrame of callFrames) {
+    callStack.push({
+      functionName: callFrame.functionName || '(anonymous)',
+      functionLocation: callFrame.functionLocation,
+      location: callFrame.location
+    });
+  }
+  return callStack;
 };
 
 const getDebugPausedMessage = reason => {
@@ -1960,8 +2026,20 @@ const getDebugPropertyValueLabelBoolean = property => {
   return `${property.value}`;
 };
 
-const getDebugPropertyValueLabelCommon = property => {
-  return property.description;
+const getDebugPropertyValueLabelCommon = (property, maxDescriptionLength) => {
+  const description = property.description;
+  if (description && description.length > maxDescriptionLength) {
+    return description.slice(0, Math.max(0, maxDescriptionLength)) + '...';
+  }
+  return description;
+};
+
+const getArrayPropertyPreview = item => {
+  return `"${item.value}"`;
+};
+const getArrayPropertiesPreview = properties => {
+  const formattedItems = properties.map(getArrayPropertyPreview);
+  return formattedItems.join(', ');
 };
 
 const RE_ARRAY_DESCRIPTION = /\((\d+)\)/;
@@ -1972,13 +2050,6 @@ const parseLength = description => {
   }
   return '';
 };
-const getArrayPropertyPreview = item => {
-  return `"${item.value}"`;
-};
-const getArrayPropertiesPreview = properties => {
-  const formattedItems = properties.map(getArrayPropertyPreview);
-  return formattedItems.join(', ');
-};
 const getDebugPropertyValueLabelArray = property => {
   if (property.preview) {
     const innerLabel = getArrayPropertiesPreview(property.preview.properties);
@@ -2016,7 +2087,7 @@ const getDebugPropertyValueLabelString = property => {
   return 'undefined';
 };
 
-const getDebugPropertyValueLabel = property => {
+const getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
   if (!property) {
     return 'n/a';
   }
@@ -2024,7 +2095,7 @@ const getDebugPropertyValueLabel = property => {
     case Number$1:
     case Symbol:
     case Function:
-      return getDebugPropertyValueLabelCommon(property);
+      return getDebugPropertyValueLabelCommon(property, maxDescriptionLength);
     case Object$1:
       return getDebugPropertyValueLabelObject(property);
     case Undefined:
@@ -2061,7 +2132,7 @@ const getDescriptionValueLabel = params => {
   }
   return `${params.data.value}`;
 };
-const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
+const getScopeChain = (params, thisObject, scopeChain, knownProperties, descriptionLength) => {
   const elements = [];
   for (const scope of scopeChain) {
     const label = getScopeLabel(scope);
@@ -2087,7 +2158,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
           indent: 20
         });
       }
-      const valueLabel = getDebugPropertyValueLabel(thisObject);
+      const valueLabel = getDebugPropertyValueLabel(thisObject, descriptionLength);
       elements.push({
         type: This,
         key: 'this',
@@ -2100,7 +2171,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
     const children = knownProperties[scope.object.objectId];
     if (children) {
       for (const child of children.result.result) {
-        const valueLabel = getDebugPropertyValueLabel(child.value);
+        const valueLabel = getDebugPropertyValueLabel(child.value, descriptionLength);
         elements.push({
           type: Property$1,
           key: child.name,
@@ -2115,7 +2186,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
   return elements;
 };
 
-const getPausedInfo2 = async debugId => {
+const getPausedInfo2 = async (debugId, maxDescriptionLength) => {
   const callFrames = await getCallStack$1(debugId);
   const callStack = getCallStack(callFrames);
   const {
@@ -2135,7 +2206,7 @@ const getPausedInfo2 = async debugId => {
   };
   const scopeChain = getScopeChain(params, thisObject, callFrames[0].scopeChain, {
     [objectId]: properties
-  });
+  }, maxDescriptionLength);
   const pausedReason = reason;
   const pausedMessage = getDebugPausedMessage(reason);
   return {
@@ -2149,176 +2220,27 @@ const getPausedInfo2 = async debugId => {
   };
 };
 
-const handleResumed = state => {
-  return {
-    ...state,
-    debugState: Default,
-    scopeChain: [],
-    callStack: [],
-    pausedMessage: '',
-    pausedReason: None$4,
-    callFrameId: ''
-  };
-};
-
-const handlePaused$1 = async state => {
-  const {
-    debugId,
-    watchExpressions
-  } = state;
-  try {
-    const {
-      callFrameId,
-      callStack,
-      scopeChain,
-      pausedMessage,
-      pausedReason,
-      expandedIds,
-      scriptMap
-    } = await getPausedInfo2(debugId);
-    // TODO move this to getPausedInfo2
-    const newWatchExpressions = await evaluateWatchExpressions(debugId, callFrameId, watchExpressions);
-    return {
-      ...state,
-      debugState: Paused,
-      scopeChain,
-      scopeExpanded: true,
-      callStack,
-      pausedReason,
-      pausedMessage,
-      callFrameId,
-      expandedIds,
-      parsedScripts: scriptMap,
-      watchExpressions: newWatchExpressions
-    };
-  } catch {
-    return state;
-  }
-};
-const handleChange = async (state, params) => {
-  if (params.type === 'resumed') {
-    return handleResumed(state);
-  }
-  if (params.type === 'paused') {
-    return handlePaused$1(state);
-  }
-  return state;
-};
-
-const isSupportedOpenUri = uri => {
-  if (uri.startsWith('file://')) {
-    return true;
-  }
-  return false;
-};
-
-const getOpenInfo = (id, parsedScripts, item) => {
-  const {
-    location
-  } = item;
-  const {
-    scriptId,
-    lineNumber,
-    columnNumber
-  } = location;
-  const script = parsedScripts[scriptId];
-  const {
-    url,
-    scriptLanguage
-  } = script;
-  if (isSupportedOpenUri(url)) {
-    return {
-      uri: url,
-      languageId: scriptLanguage,
-      rowIndex: lineNumber,
-      columnIndex: columnNumber
-    };
-  }
-  const debugUri = getDebugUri(id, scriptId);
-  return {
-    uri: debugUri,
-    languageId: scriptLanguage,
-    rowIndex: lineNumber,
-    columnIndex: columnNumber
-  };
-};
-
-const parseIndex = dataIndex => {
-  const index = Number.parseInt(dataIndex);
-  return index;
-};
-
-const handleClickCallstackItem = async (state, dataIndex) => {
-  const index = parseIndex(dataIndex);
-  const {
-    callStack,
-    parsedScripts,
-    id
-  } = state;
-  const item = callStack[index];
-  if (!item) {
-    return state;
-  }
-  const {
-    uri,
-    languageId,
-    rowIndex,
-    columnIndex
-  } = getOpenInfo(id, parsedScripts, item);
-  await openUri(uri, languageId, rowIndex, columnIndex);
-  return state;
-};
-
-const setPauseOnExceptions = async (state, value) => {
-  const {
-    debugId,
-    exceptionBreakPoints
-  } = state;
-  if (exceptionBreakPoints === value) {
-    return state;
-  }
-  await setPauseOnExceptions$1(debugId, value);
-  return {
-    ...state,
-    exceptionBreakPoints: value
-  };
-};
+const SectionHeading = 1;
+const Value = 2;
+const Exception = 3;
+const Scope$2 = 4;
+const Property = 5;
+const Message = 6;
+const CallStack$2 = 7;
+const CheckBox$1 = 8;
+const WatchMessage = 9;
+const WatchExpression = 10;
+const InputField = 11;
 
-const handleClickPauseOnExceptions = async state => {
-  const {
-    exceptionBreakPoints
-  } = state;
-  switch (exceptionBreakPoints) {
-    case None$3:
-      return setPauseOnExceptions(state, All);
-    case Uncaught:
-      return setPauseOnExceptions(state, All);
-    case All:
-      return setPauseOnExceptions(state, None$3);
-    default:
-      return state;
-  }
-};
+const Scope$1 = 'Scope';
+const CallStack$1 = 'CallStack';
+const Watch$1 = 'Watch';
+const BreakPoints$1 = 'BreakPoints';
 
-const getNewExceptionState = exceptionState => {
-  switch (exceptionState) {
-    case None$3:
-      return Uncaught;
-    case Uncaught:
-      return None$3;
-    case All:
-      return None$3;
-    default:
-      return exceptionState;
-  }
-};
-const handleClickPauseOnUncaughtExceptions = async state => {
-  const {
-    exceptionBreakPoints
-  } = state;
-  const newExceptionState = getNewExceptionState(exceptionBreakPoints);
-  return setPauseOnExceptions(state, newExceptionState);
-};
+const BreakPoints = 'breakpoints';
+const CallStack = 'callstack';
+const Scope = 'scope';
+const Watch = 'watch';
 
 const AddWatchExpression = 'AddWatchExpression';
 const WatchExpressionInput = 'WatchExpressionInput';
@@ -2331,1589 +2253,1954 @@ const DebugStepOver$1 = 'DebugStepOver';
 const DebugStop$1 = 'DebugStop';
 const PauseOnExceptions = 'PauseOnExceptions';
 const PauseOnUncaughtExceptions = 'PauseOnUncaughtExceptions';
+const RefreshWatchExpressions = 'RefreshWatchExpressions';
 
-const getCheckBoxClickHandler = name => {
-  switch (name) {
-    case PauseOnExceptions:
-      return handleClickPauseOnExceptions;
-    case PauseOnUncaughtExceptions:
-      return handleClickPauseOnUncaughtExceptions;
-    default:
-      throw new Error('unknown input name');
+const getRunAndDebugVisibleRowsBreakPoints = state => {
+  const {
+    breakPointsExpanded,
+    exceptionBreakPoints,
+    breakPointsVisible
+  } = state;
+  if (!breakPointsVisible) {
+    return [];
   }
-};
-
-const handleClickCheckBox = (state, name) => {
-  const fn = getCheckBoxClickHandler(name);
-  return fn(state);
-};
-
-const removeElement = (array, element) => {
-  const index = array.indexOf(element);
-  if (index === -1) {
-    return array;
+  if (breakPointsExpanded) {
+    return [{
+      type: SectionHeading,
+      text: breakPoints(),
+      expanded: true,
+      key: BreakPoints,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: BreakPoints$1,
+      description: ''
+    }, {
+      type: CheckBox$1,
+      text: pauseOnExceptions(),
+      expanded: exceptionBreakPoints === All,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: PauseOnExceptions,
+      description: ''
+    }, {
+      type: CheckBox$1,
+      text: pauseOnUncaughtExceptions(),
+      expanded: exceptionBreakPoints === Uncaught,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: PauseOnUncaughtExceptions,
+      description: ''
+    }];
   }
-  return [...array.slice(0, index), ...array.slice(index + 1)];
+  return [{
+    type: SectionHeading,
+    text: breakPoints(),
+    expanded: breakPointsExpanded,
+    key: BreakPoints,
+    value: '',
+    indent: 0,
+    valueType: '',
+    name: BreakPoints$1,
+    description: ''
+  }];
 };
 
-const getCollapsedScopeChain = (cache, scopeChain, element, index) => {
-  const indent = element.indent;
-  for (let i = index + 1; i < scopeChain.length; i++) {
-    if (scopeChain[i].indent <= indent) {
-      const newItems = scopeChain.slice(index + 1, i);
-      const newCache = {
-        ...cache,
-        [scopeChain[index].objectId]: newItems
-      };
-      return {
-        newScopeChain: [...scopeChain.slice(0, index + 1), ...scopeChain.slice(i)],
-        newCache
-      };
-    }
+const formatLocation = (url, rowIndex, columnIndex) => {
+  const lastSlashIndex = url.lastIndexOf('/');
+  const adjustedRowIndex = rowIndex + 1;
+  if (lastSlashIndex === -1) {
+    return `${url}:${adjustedRowIndex}`;
   }
-  return {
-    newScopeChain: scopeChain,
-    newCache: cache
-  };
+  const part = url.slice(lastSlashIndex + 1);
+  return `${part}:${adjustedRowIndex}`;
 };
 
-// TODO maybe store scope chain elements as tree
-// TODO when collapsing, store collapsed elements by parent id in cache
-// TODO when expanding, retrieve items from cache by parent id first
-// if they don't exist, query the actual items
-
-const collapseScopeChain = (state, expandedIds, scopeChain, element, index) => {
+const unknownScript = {
+  url: 'unknown'
+};
+const getRunAndDebugVisibleRowsCallStack = state => {
   const {
-    cache
+    callStack: callStack$1,
+    callStackExpanded,
+    parsedScripts,
+    callStackVisible
   } = state;
-  const newExpandedIds = removeElement(expandedIds, element.objectId);
-  const {
-    newScopeChain,
-    newCache
-  } = getCollapsedScopeChain(cache, scopeChain, element, index);
-  return {
-    ...state,
-    expandedIds: newExpandedIds,
-    scopeChain: newScopeChain,
-    scopeFocusedIndex: index,
-    cache: newCache
-  };
-};
-
-const getInnerChildScopeChain = async (cache, debugId, objectId, indent) => {
-  if (cache[objectId]) {
-    return cache[objectId];
+  if (!callStackVisible) {
+    return [];
   }
-  const childScopes = await getProperties(debugId, objectId);
-  const childScopeChain = [];
-  for (const child of childScopes.result.result) {
-    const valueLabel = getDebugPropertyValueLabel(child.value || child.get || {});
-    childScopeChain.push({
-      type: Property$1,
-      key: child.name,
-      value: valueLabel,
-      valueType: getDebugValueType(child),
-      objectId: getDebugValueObjectId(child),
-      indent: indent + 10
+  const rows = [];
+  if (callStackExpanded) {
+    rows.push({
+      type: SectionHeading,
+      text: callStack(),
+      expanded: true,
+      key: CallStack,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: CallStack$1,
+      description: ''
+    });
+    if (callStack$1.length === 0) {
+      rows.push({
+        type: Message,
+        text: notPaused(),
+        expanded: false,
+        key: '',
+        value: '',
+        indent: 0,
+        valueType: '',
+        name: '',
+        description: ''
+      });
+    } else {
+      for (const item of callStack$1) {
+        const {
+          scriptId,
+          lineNumber} = item.location;
+        const script = parsedScripts[scriptId] || unknownScript;
+        const description = formatLocation(script.url, lineNumber);
+        const hasArrow = item === callStack$1[0];
+        rows.push({
+          type: CallStack$2,
+          text: item.functionName,
+          expanded: false,
+          key: CallStack,
+          value: '',
+          indent: 0,
+          valueType: '',
+          name: '',
+          description,
+          hasArrow,
+          index: callStack$1.indexOf(item) // TODO use for loop
+        });
+      }
+    }
+  } else {
+    rows.push({
+      type: SectionHeading,
+      text: callStack(),
+      expanded: false,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: CallStack$1,
+      description: ''
     });
   }
-  return childScopeChain;
+  return rows;
 };
 
-const getChildScopeChain = async (cache, index, debugId, scopeChain) => {
-  const element = scopeChain[index];
-  const objectId = element.objectId;
-  const childScopeChain = await getInnerChildScopeChain(cache, debugId, objectId, element.indent);
-  const newScopeChain = [...scopeChain.slice(0, index + 1), ...childScopeChain, ...scopeChain.slice(index + 1)];
-  return newScopeChain;
+const getNoopRows = () => {
+  return [];
 };
 
-const expandScopeChain = async (state, expandedIds, scopeChain, element, index, debugId) => {
+const getScopeExceptionRows = scope => {
   const {
-    cache
-  } = state;
-  const newScopeChain = await getChildScopeChain(cache, index, debugId, scopeChain);
-  const objectId = scopeChain[index].objectId;
-  const newExpandedIds = [...expandedIds, objectId];
-  return {
-    ...state,
-    scopeChain: newScopeChain,
-    expandedIds: newExpandedIds,
-    scopeFocusedIndex: index
-  };
+    key,
+    value,
+    indent
+  } = scope;
+  return [{
+    type: Exception,
+    text: '',
+    expanded: false,
+    key,
+    value,
+    indent,
+    valueType: '',
+    name: '',
+    description: ''
+  }];
 };
 
-const getElementIndex = (debugId, scopeChain, text) => {
-  for (let i = 0; i < scopeChain.length; i++) {
-    const element = scopeChain[i];
-    if (element.key === text) {
-      return i;
-    }
-  }
-  return -1;
+const None = 0;
+const Expanded = 1 << 0;
+const Collapsed = 1 << 1;
+const Focused = 1 << 2;
+
+const getScopePropertyRows = scope => {
+  const {
+    indent,
+    key,
+    value,
+    valueType,
+    flags
+  } = scope;
+  return [{
+    type: Property,
+    text: '',
+    expanded: Boolean(flags & Expanded),
+    key,
+    value,
+    indent,
+    valueType,
+    name: '',
+    description: ''
+  }];
 };
 
-// TODO pass index to function instead of text
-const handleClickScopeValue = async (state, text) => {
+const getScopeScopeRows = scope => {
   const {
-    scopeChain,
-    debugId,
-    expandedIds
-  } = state;
-  const index = getElementIndex(debugId, scopeChain, text);
-  if (index === -1) {
-    return state;
-  }
-  const element = scopeChain[index];
-  if (expandedIds.includes(element.objectId)) {
-    return collapseScopeChain(state, expandedIds, scopeChain, element, index);
-  }
-  return expandScopeChain(state, expandedIds, scopeChain, element, index, debugId);
+    key,
+    flags
+  } = scope;
+  return [{
+    type: Scope$2,
+    text: '',
+    expanded: Boolean(flags & Expanded),
+    key,
+    value: '',
+    indent: 0,
+    valueType: '',
+    name: '',
+    description: ''
+  }];
 };
 
-/**
- * @deprecated
- */
-const handlePaused = async (state, params) => {
-  return state;
+const getScopeThisRows = scope => {
+  const {
+    indent,
+    key,
+    value,
+    valueType
+  } = scope;
+  return [{
+    type: Value,
+    text: '',
+    expanded: false,
+    key,
+    value,
+    indent,
+    valueType,
+    name: '',
+    description: ''
+  }];
 };
 
-// TODO maybe store scope chain elements as tree
-// TODO when collapsing, store collapsed elements by parent id in cache
-// TODO when expanding, retrieve items from cache by parent id first
-// if they don't exist, query the actual items
-
-const resume = async state => {
-  const {
-    debugId
-  } = state;
-  await resume$2(debugId);
-  return state;
+const getScopeRenderer = type => {
+  switch (type) {
+    case This:
+      return getScopeThisRows;
+    case Exception$1:
+      return getScopeExceptionRows;
+    case Scope$3:
+      return getScopeScopeRows;
+    case Property$1:
+      return getScopePropertyRows;
+    default:
+      return getNoopRows;
+  }
 };
-const pause = async state => {
-  const {
-    debugId
-  } = state;
-  await pause$2(debugId);
-  return state;
+
+const getExpandable = valueType => {
+  if (valueType === 'object') {
+    return true;
+  }
+  return false;
 };
-const togglePause = async state => {
-  const {
-    debugState
-  } = state;
-  if (debugState === Default) {
-    return pause(state);
+const getFlags = (isExpanded, isExpandable, isFocused) => {
+  let flags = None;
+  if (isExpanded) {
+    flags |= Expanded;
+  } else if (isExpandable) {
+    flags |= Collapsed;
   }
-  return resume(state);
+  if (isFocused) {
+    flags |= Focused;
+  }
+  return flags;
 };
-const stepOver = async state => {
-  const {
-    debugId
-  } = state;
-  await stepOver$2(debugId);
-  return state;
+const getVisibleScopeItems = (scopeChain, expandedIds, focusedIndex) => {
+  const minLineY = 0;
+  const maxLineY = scopeChain.length;
+  const visible = [];
+  for (let i = minLineY; i < maxLineY; i++) {
+    const element = scopeChain[i];
+    const isExpanded = expandedIds.includes(element.objectId);
+    const isExpandable = getExpandable(element.valueType);
+    const isFocused = i === focusedIndex;
+    const flags = getFlags(isExpanded, isExpandable, isFocused);
+    visible.push({
+      ...element,
+      flags
+    });
+  }
+  return visible;
 };
-const stepInto = async state => {
+
+const getRunAndDebugVisibleRowsScope = state => {
   const {
-    debugId
+    scopeChain,
+    scopeExpanded,
+    expandedIds,
+    scopeFocusedIndex,
+    scopeVisible,
+    debugState
   } = state;
-  await stepInto$2(debugId);
-  return state;
+  if (!scopeVisible) {
+    return [];
+  }
+  const rows = [];
+  if (scopeExpanded) {
+    rows.push({
+      type: SectionHeading,
+      text: scope(),
+      expanded: true,
+      key: Scope,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: Scope$1,
+      description: ''
+    });
+    if (debugState === Paused) {
+      const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
+      for (const scope of visible) {
+        const renderer = getScopeRenderer(scope.type);
+        rows.push(...renderer(scope));
+      }
+    } else {
+      rows.push({
+        type: Message,
+        text: notPaused(),
+        expanded: false,
+        key: '',
+        value: '',
+        indent: 0,
+        valueType: '',
+        name: '',
+        description: ''
+      });
+    }
+  } else {
+    rows.push({
+      type: SectionHeading,
+      text: scope(),
+      expanded: false,
+      key: Scope,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: Scope$1,
+      description: ''
+    });
+  }
+  return rows;
 };
-const stepOut = async state => {
-  const {
-    debugId
-  } = state;
-  await stepOut$2(debugId);
-  return state;
+
+const formatValue = value => {
+  return value === null || value === undefined ? '' : String(value);
 };
-const handleDebugInput = (state, value) => {
+const renderWatchExpression$1 = (expression, value, isEditing, index) => {
+  if (isEditing) {
+    return {
+      type: InputField,
+      text: '',
+      expanded: false,
+      key: 'new-watch-expression',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: WatchExpressionInput,
+      description: '',
+      index
+    };
+  }
   return {
-    ...state,
-    debugInputValue: value
+    type: WatchExpression,
+    text: expression,
+    expanded: false,
+    key: expression,
+    value: formatValue(value),
+    indent: 0,
+    valueType: '',
+    name: '',
+    description: '',
+    index
   };
 };
-const handleEvaluate = async state => {
+const getRunAndDebugVisibleRowsWatchContent = watchExpressions => {
+  const rows = [];
+  if (watchExpressions.length === 0) {
+    rows.push({
+      type: WatchMessage,
+      text: noWatchExpression(),
+      expanded: false,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: '',
+      description: ''
+    });
+  } else {
+    for (const watchExpression of watchExpressions) {
+      // TODO simplify index
+      const index = watchExpressions.indexOf(watchExpression);
+      rows.push(renderWatchExpression$1(watchExpression.expression, watchExpression.value, watchExpression.isEditing || false, index));
+    }
+  }
+  return rows;
+};
+
+const getWatchActions = watchExpanded => {
+  if (!watchExpanded) {
+    return [];
+  }
+  return [{
+    id: AddWatchExpression,
+    title: 'Add new watch expression',
+    icon: '+'
+  }, {
+    id: RefreshWatchExpressions,
+    title: 'Refresh watch expressions',
+    icon: '↻'
+  }];
+};
+
+const getRunAndDebugVisibleRowsWatch = state => {
   const {
-    debugInputValue,
-    callFrameId,
-    debugId
+    watchExpanded,
+    watchExpressions,
+    watchVisible
   } = state;
-  const result = await evaluate(debugId, debugInputValue, callFrameId);
-  const actualResult = result.result.result.value;
+  if (!watchVisible) {
+    return [];
+  }
+  const rows = [{
+    type: SectionHeading,
+    text: watch(),
+    expanded: watchExpanded,
+    key: Watch,
+    value: '',
+    indent: 0,
+    valueType: '',
+    name: Watch$1,
+    description: '',
+    actions: getWatchActions(watchExpanded)
+  }];
+  if (watchExpanded) {
+    rows.push(...getRunAndDebugVisibleRowsWatchContent(watchExpressions));
+  }
+  return rows;
+};
+
+const getRunAndDebugVisibleRows = state => {
+  if (state.debugState === Unavailable) {
+    return [{
+      type: Message,
+      text: noScriptRunning(),
+      expanded: false,
+      key: 'no-script-running',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: '',
+      description: ''
+    }];
+  }
+  return [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
+};
+
+const updateVisibleRows = state => {
+  const visibleRows = getRunAndDebugVisibleRows(state);
   return {
     ...state,
-    debugInputValue: '',
-    debugOutputValue: `${actualResult}`
+    visibleRows
   };
 };
-const handleArrowLeft = state => {
-  const {
-    focusedIndex
-  } = state;
-  if (focusedIndex === 2) {
-    return {
-      ...state,
-      scopeExpanded: false
-    };
-  }
-  return state;
-};
-const handleArrowRight = state => {
+
+const handlePaused2 = async state => {
   const {
-    focusedIndex
+    debugId,
+    watchExpressions
   } = state;
-  if (focusedIndex === 2) {
-    return {
+  try {
+    const {
+      callFrameId,
+      callStack,
+      scopeChain,
+      pausedMessage,
+      pausedReason,
+      expandedIds,
+      scriptMap
+    } = await getPausedInfo2(debugId, state.maxDescriptionLength);
+    // TODO move this to getPausedInfo2
+    const newWatchExpressions = await evaluateWatchExpressions(debugId, callFrameId, watchExpressions);
+    const newState = {
       ...state,
-      scopeExpanded: true
+      debugState: Paused,
+      scopeChain,
+      scopeExpanded: true,
+      callStack,
+      pausedReason,
+      pausedMessage,
+      callFrameId,
+      expandedIds,
+      parsedScripts: scriptMap,
+      watchExpressions: newWatchExpressions
     };
+    return updateVisibleRows(newState);
+  } catch {
+    return state;
   }
-  return state;
-};
-const handleArrowUp = state => {
-  return state;
-};
-const handleArrowDown = state => {
-  return state;
-};
-const focusPrevious = state => {
-  return state;
-};
-const focusNext = state => {
-  return state;
 };
-const resize = (state, dimensions) => {
-  return {
+
+const handleResumed = state => {
+  const newState = {
     ...state,
-    ...dimensions
+    debugState: Default,
+    scopeChain: [],
+    callStack: [],
+    pausedMessage: '',
+    pausedReason: None$5,
+    callFrameId: ''
   };
+  return updateVisibleRows(newState);
 };
 
-const stop = async state => {
-  // TODO
-  return state;
+const handleChange = async (state, params) => {
+  let newState = state;
+  if (params.type === 'resumed') {
+    newState = handleResumed(state);
+  } else if (params.type === 'paused') {
+    newState = await handlePaused2(state);
+  }
+  return updateVisibleRows(newState);
 };
-const noop = async state => {
-  // TODO
-  return state;
+
+const isSupportedOpenUri = uri => {
+  if (uri.startsWith('file://')) {
+    return true;
+  }
+  return false;
 };
-const getDebugButtonHandler = inputName => {
-  switch (inputName) {
-    case DebugPause$1:
-      return pause;
-    case DebugResume:
-      return resume;
-    case DebugStepInto$1:
-      return stepInto;
-    case DebugStepOver$1:
-      return stepOver;
-    case DebugStepOut$1:
-      return stepOut;
-    case DebugStop$1:
-      return stop;
-    default:
-      return noop;
+
+const getOpenInfo = (id, parsedScripts, item) => {
+  const {
+    location
+  } = item;
+  const {
+    scriptId,
+    lineNumber,
+    columnNumber
+  } = location;
+  const script = parsedScripts[scriptId];
+  const {
+    url,
+    scriptLanguage
+  } = script;
+  if (isSupportedOpenUri(url)) {
+    return {
+      uri: url,
+      languageId: scriptLanguage,
+      rowIndex: lineNumber,
+      columnIndex: columnNumber
+    };
   }
+  const debugUri = getDebugUri(id, scriptId);
+  return {
+    uri: debugUri,
+    languageId: scriptLanguage,
+    rowIndex: lineNumber,
+    columnIndex: columnNumber
+  };
 };
 
-const handleClickDebugButton = async (state, inputName) => {
-  const fn = getDebugButtonHandler(inputName);
-  return fn(state);
+const parseIndex = dataIndex => {
+  const index = Number.parseInt(dataIndex);
+  return index;
 };
 
-const handleClickSectionAction = async (state, actionId) => {
-  if (!actionId) {
+const handleClickCallstackItem = async (state, dataIndex) => {
+  const index = parseIndex(dataIndex);
+  const {
+    callStack,
+    parsedScripts,
+    id
+  } = state;
+  const item = callStack[index];
+  if (!item) {
     return state;
   }
-  if (actionId === AddWatchExpression) {
-    return addWatchExpression(state, '');
-  }
+  const {
+    uri,
+    languageId,
+    rowIndex,
+    columnIndex
+  } = getOpenInfo(id, parsedScripts, item);
+  await openUri(uri, languageId, rowIndex, columnIndex);
   return state;
 };
 
-const handleClickSectionBreakPoints = state => {
+const setPauseOnExceptions = async (state, value) => {
   const {
-    breakPointsExpanded
+    debugId,
+    exceptionBreakPoints
   } = state;
+  if (exceptionBreakPoints === value) {
+    return state;
+  }
+  await setPauseOnExceptions$1(debugId, value);
   return {
     ...state,
-    breakPointsExpanded: !breakPointsExpanded,
-    focusedIndex: 1 // TODO don't hardcode number
+    exceptionBreakPoints: value
   };
 };
 
-const handleClickSectionCallstack = state => {
+const handleClickPauseOnExceptions = async state => {
   const {
-    callStackExpanded
+    exceptionBreakPoints
   } = state;
-  return {
-    ...state,
-    callStackExpanded: !callStackExpanded,
-    focusedIndex: 1 // TODO don't hardcode number
-  };
+  switch (exceptionBreakPoints) {
+    case None$4:
+      return setPauseOnExceptions(state, All);
+    case Uncaught:
+      return setPauseOnExceptions(state, All);
+    case All:
+      return setPauseOnExceptions(state, None$4);
+    default:
+      return state;
+  }
 };
 
-const BreakPoints = 'breakpoints';
-const CallStack$2 = 'callstack';
-const Scope$2 = 'scope';
-const Watch$1 = 'watch';
-
-const handleClickSectionScope = state => {
+const getNewExceptionState = exceptionState => {
+  switch (exceptionState) {
+    case None$4:
+      return Uncaught;
+    case Uncaught:
+      return None$4;
+    case All:
+      return None$4;
+    default:
+      return exceptionState;
+  }
+};
+const handleClickPauseOnUncaughtExceptions = async state => {
   const {
-    scopeExpanded
+    exceptionBreakPoints
   } = state;
-  return {
-    ...state,
-    scopeExpanded: !scopeExpanded,
-    focusedIndex: 2 // TODO don't hardcode number
-  };
+  const newExceptionState = getNewExceptionState(exceptionBreakPoints);
+  return setPauseOnExceptions(state, newExceptionState);
 };
 
-const handleClickSectionUnkown = state => {
-  const {
-    callStackExpanded
-  } = state;
+const getCheckBoxClickHandler = name => {
+  switch (name) {
+    case PauseOnExceptions:
+      return handleClickPauseOnExceptions;
+    case PauseOnUncaughtExceptions:
+      return handleClickPauseOnUncaughtExceptions;
+    default:
+      throw new Error('unknown input name');
+  }
+};
+
+const handleClickCheckBox = (state, name) => {
+  const fn = getCheckBoxClickHandler(name);
+  return fn(state);
+};
+
+const removeElement = (array, element) => {
+  const index = array.indexOf(element);
+  if (index === -1) {
+    return array;
+  }
+  return [...array.slice(0, index), ...array.slice(index + 1)];
+};
+
+const getCollapsedScopeChain = (cache, scopeChain, element, index) => {
+  const indent = element.indent;
+  for (let i = index + 1; i < scopeChain.length; i++) {
+    if (scopeChain[i].indent <= indent) {
+      const newItems = scopeChain.slice(index + 1, i);
+      const newCache = {
+        ...cache,
+        [scopeChain[index].objectId]: newItems
+      };
+      return {
+        newScopeChain: [...scopeChain.slice(0, index + 1), ...scopeChain.slice(i)],
+        newCache
+      };
+    }
+  }
   return {
-    ...state,
-    callStackExpanded: !callStackExpanded
+    newScopeChain: scopeChain,
+    newCache: cache
   };
 };
 
-const handleClickSectionWatch = state => {
+// TODO maybe store scope chain elements as tree
+// TODO when collapsing, store collapsed elements by parent id in cache
+// TODO when expanding, retrieve items from cache by parent id first
+// if they don't exist, query the actual items
+
+const collapseScopeChain = (state, expandedIds, scopeChain, element, index) => {
   const {
-    watchExpanded
+    cache
   } = state;
-  return {
+  const newExpandedIds = removeElement(expandedIds, element.objectId);
+  const {
+    newScopeChain,
+    newCache
+  } = getCollapsedScopeChain(cache, scopeChain, element, index);
+  const newState = {
     ...state,
-    watchExpanded: !watchExpanded,
-    focusedIndex: 0 // TODO don't hardcode number
+    expandedIds: newExpandedIds,
+    scopeChain: newScopeChain,
+    scopeFocusedIndex: index,
+    cache: newCache
   };
+  return updateVisibleRows(newState);
 };
 
-const getSectionClickHandler = id => {
-  switch (id) {
-    case Watch$1:
-      return handleClickSectionWatch;
-    case BreakPoints:
-      return handleClickSectionBreakPoints;
-    case Scope$2:
-      return handleClickSectionScope;
-    case CallStack$2:
-      return handleClickSectionCallstack;
-    default:
-      return handleClickSectionUnkown;
+const getInnerChildScopeChain = async (cache, debugId, objectId, indent, maxDescriptionLength) => {
+  if (cache[objectId]) {
+    return cache[objectId];
   }
+  const childScopes = await getProperties(debugId, objectId);
+  const childScopeChain = [];
+  for (const child of childScopes.result.result) {
+    const valueLabel = getDebugPropertyValueLabel(child.value || child.get || {}, maxDescriptionLength);
+    childScopeChain.push({
+      type: Property$1,
+      key: child.name,
+      value: valueLabel,
+      valueType: getDebugValueType(child),
+      objectId: getDebugValueObjectId(child),
+      indent: indent + 10
+    });
+  }
+  return childScopeChain;
 };
 
-const handleClickSectionHeading = async (state, id) => {
-  const fn = getSectionClickHandler(id);
-  return fn(state);
+const getChildScopeChain = async (cache, index, debugId, scopeChain, maxDescriptionLength) => {
+  const element = scopeChain[index];
+  const objectId = element.objectId;
+  const childScopeChain = await getInnerChildScopeChain(cache, debugId, objectId, element.indent, maxDescriptionLength);
+  const newScopeChain = [...scopeChain.slice(0, index + 1), ...childScopeChain, ...scopeChain.slice(index + 1)];
+  return newScopeChain;
 };
 
-const editWatchExpression = (state, index) => {
+const expandScopeChain = async (state, expandedIds, scopeChain, element, index, debugId) => {
   const {
-    watchExpressions
+    cache,
+    maxDescriptionLength
   } = state;
-  const item = watchExpressions[index];
-  if (!item) {
-    return state;
-  }
-  const newItem = {
-    ...item,
-    isEditing: true
-  };
-  const newWatchExpressions = watchExpressions.toSpliced(index, 1, newItem);
-  return {
+  const newScopeChain = await getChildScopeChain(cache, index, debugId, scopeChain, maxDescriptionLength);
+  const objectId = scopeChain[index].objectId;
+  const newExpandedIds = [...expandedIds, objectId];
+  const newState = {
     ...state,
-    watchExpressions: newWatchExpressions,
-    focus: FocusDebugWatchInput,
-    inputSource: Script$2,
-    editingValue: item.expression,
-    editingselectionstart: 0,
-    editingselectionend: item.expression.length
+    scopeChain: newScopeChain,
+    expandedIds: newExpandedIds,
+    scopeFocusedIndex: index
   };
+  return updateVisibleRows(newState);
 };
 
-const handleClickWatchExpression = async (state, dataIndex, defaultPrevented) => {
-  if (defaultPrevented) {
-    return state;
+const getElementIndex = (debugId, scopeChain, text) => {
+  for (let i = 0; i < scopeChain.length; i++) {
+    const element = scopeChain[i];
+    if (element.key === text) {
+      return i;
+    }
   }
-  const index = parseIndex(dataIndex);
-  return editWatchExpression(state, index);
+  return -1;
 };
 
-const handleClickWatchExpressionDelete = async (state, dataIndex) => {
-  const index = parseIndex(dataIndex);
-  return deleteWatchExpression$1(state, index);
+// TODO pass index to function instead of text
+const handleClickScopeValue = async (state, text) => {
+  const {
+    scopeChain,
+    debugId,
+    expandedIds
+  } = state;
+  const index = getElementIndex(debugId, scopeChain, text);
+  if (index === -1) {
+    return state;
+  }
+  const element = scopeChain[index];
+  if (expandedIds.includes(element.objectId)) {
+    return collapseScopeChain(state, expandedIds, scopeChain, element, index);
+  }
+  return expandScopeChain(state, expandedIds, scopeChain, element, index, debugId);
 };
 
-const handleWatchExpressionDoubleClick = async (state, dataIndex) => {
+/**
+ * @deprecated
+ */
+const handlePaused = async (state, params) => {
   return state;
 };
 
-const handleInputBlur = async state => {
+// TODO maybe store scope chain elements as tree
+// TODO when collapsing, store collapsed elements by parent id in cache
+// TODO when expanding, retrieve items from cache by parent id first
+// if they don't exist, query the actual items
+
+const resume = async state => {
   const {
-    watchExpressions
+    debugId
   } = state;
-  const editingIndex = watchExpressions.findIndex(expr => expr.isEditing);
-  if (editingIndex === -1) {
-    return state;
-  }
-  return acceptWatchExpressionEdit(state);
+  await resume$2(debugId);
+  return state;
 };
-
-const handleWatchValueChange = (state, value) => {
-  return {
-    ...state,
-    editingValue: value
-  };
+const pause = async state => {
+  const {
+    debugId
+  } = state;
+  await pause$2(debugId);
+  return state;
 };
-
-const handleInputFieldChange = (state, name, value) => {
-  if (name === WatchExpressionInput) {
-    return handleWatchValueChange(state, value);
+const togglePause = async state => {
+  const {
+    debugState
+  } = state;
+  if (debugState === Default) {
+    return pause(state);
   }
+  return resume(state);
+};
+const stepOver = async state => {
+  const {
+    debugId
+  } = state;
+  await stepOver$2(debugId);
   return state;
 };
-
-const handleScriptParsed = (state, parsedScript) => {
+const stepInto = async state => {
   const {
-    parsedScripts
+    debugId
+  } = state;
+  await stepInto$2(debugId);
+  return state;
+};
+const stepOut = async state => {
+  const {
+    debugId
   } = state;
+  await stepOut$2(debugId);
+  return state;
+};
+const handleDebugInput = (state, value) => {
   return {
     ...state,
-    parsedScripts: {
-      ...parsedScripts,
-      [parsedScript.scriptId]: parsedScript
-    }
+    debugInputValue: value
   };
 };
-
-const getPortTuple = () => {
+const handleEvaluate = async state => {
   const {
-    port1,
-    port2
-  } = new MessageChannel();
+    debugInputValue,
+    callFrameId,
+    debugId
+  } = state;
+  const result = await evaluate(debugId, debugInputValue, callFrameId);
+  const actualResult = result.result.result.value;
   return {
-    port1,
-    port2
+    ...state,
+    debugInputValue: '',
+    debugOutputValue: `${actualResult}`
   };
 };
-
-const sendMessagePortToEditorWorker = async port => {
-  const command = 'HandleMessagePort.handleMessagePort';
-  // @ts-ignore
-  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, RpcId.DebugWorker);
-};
-
-const createEditorWorkerRpc = async () => {
-  try {
-    const {
-      port1,
-      port2
-    } = getPortTuple();
-    await sendMessagePortToEditorWorker(port2);
-    const rpc = await PlainMessagePortRpcParent.create({
-      commandMap: {},
-      messagePort: port1
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create editor worker rpc`);
-  }
-};
-
-const initializeEditorWorker = async () => {
-  try {
-    const rpc = await createEditorWorkerRpc();
-    set$1(rpc);
-  } catch {
-    // ignore
+const handleArrowLeft = state => {
+  const {
+    focusedIndex
+  } = state;
+  if (focusedIndex === 2) {
+    return {
+      ...state,
+      scopeExpanded: false
+    };
   }
+  return state;
 };
-
-const sendMessagePortToExtensionHostWorker = async port => {
-  const command = 'HandleMessagePort.handleMessagePort2';
-  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, RpcId.DebugWorker);
-};
-
-const createExtensionHostRpc = async () => {
-  try {
-    const {
-      port1,
-      port2
-    } = getPortTuple();
-    await sendMessagePortToExtensionHostWorker(port2);
-    const rpc = await PlainMessagePortRpcParent.create({
-      commandMap: {},
-      messagePort: port1
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
+const handleArrowRight = state => {
+  const {
+    focusedIndex
+  } = state;
+  if (focusedIndex === 2) {
+    return {
+      ...state,
+      scopeExpanded: true
+    };
   }
+  return state;
 };
-
-const initializeExtensionHost = async () => {
-  const rpc = await createExtensionHostRpc();
-  set$2(rpc);
-};
-
-const initialize = async () => {
-  await Promise.all([initializeExtensionHost(), initializeEditorWorker()]);
-};
-
-const getDebugId = isTest => {
-  const debugId = isTest ? 'test-debug' : 'node-debug'; // TODO
-  return debugId;
+const handleArrowUp = state => {
+  return state;
 };
-
-const hasProperty = (object, key) => {
-  return Boolean(object && typeof object === 'object' && key in object);
+const handleArrowDown = state => {
+  return state;
 };
-
-const restoreBoolean = (savedState, key) => {
-  if (hasProperty(savedState, key) && typeof savedState[key] === 'boolean') {
-    return savedState[key];
-  }
-  return false;
+const focusPrevious = state => {
+  return state;
 };
-
-const restoreBreakPointsExpanded = savedState => {
-  return restoreBoolean(savedState, 'breakPointsExpanded');
+const focusNext = state => {
+  return state;
 };
-
-const restoreEditingValue = savedState => {
-  if (hasProperty(savedState, 'editingValue') && typeof savedState.editingValue === 'string') {
-    return savedState.editingValue;
-  }
-  return '';
+const resize = (state, dimensions) => {
+  return {
+    ...state,
+    ...dimensions
+  };
 };
 
-const restoreFocus = savedState => {
-  // if (hasProperty(savedState, 'focus') && typeof savedState.focus === 'number') {
-  //   return savedState.focus
-  // }
-  return 0;
+const stop = async state => {
+  // TODO
+  return state;
 };
-
-const restoreScopeExpanded = savedState => {
-  return restoreBoolean(savedState, 'scopeExpanded');
+const noop = async state => {
+  // TODO
+  return state;
+};
+const getDebugButtonHandler = inputName => {
+  switch (inputName) {
+    case DebugPause$1:
+      return pause;
+    case DebugResume:
+      return resume;
+    case DebugStepInto$1:
+      return stepInto;
+    case DebugStepOver$1:
+      return stepOver;
+    case DebugStepOut$1:
+      return stepOut;
+    case DebugStop$1:
+      return stop;
+    default:
+      return noop;
+  }
 };
 
-const restoreWatchExpanded = savedState => {
-  return restoreBoolean(savedState, 'watchExpanded');
+const handleClickDebugButton = async (state, inputName) => {
+  const fn = getDebugButtonHandler(inputName);
+  return fn(state);
 };
 
-const restoreWatchExpression = savedExpression => {
-  if (typeof savedExpression === 'object' && savedExpression !== null && hasProperty(savedExpression, 'expression') && typeof savedExpression.expression === 'string' && hasProperty(savedExpression, 'value') && hasProperty(savedExpression, 'isEditing') && typeof savedExpression.isEditing === 'boolean') {
-    const value = savedExpression.value;
-    if (value === null || value === undefined || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-      return {
-        expression: savedExpression.expression,
-        value,
-        isEditing: savedExpression.isEditing
-      };
-    }
+const refreshWatchExpression = async state => {
+  const {
+    debugId,
+    callFrameId,
+    debugState,
+    watchExpressions
+  } = state;
+  if (debugState !== Paused) {
+    return state;
   }
+  const newWatchExpressions = await evaluateWatchExpressions(debugId, callFrameId, watchExpressions);
   return {
-    expression: '',
-    value: null,
-    isEditing: false
+    ...state,
+    watchExpressions: newWatchExpressions
   };
 };
-const restoreWatchExpressions = savedState => {
-  if (hasProperty(savedState, 'watchExpressions') && Array.isArray(savedState.watchExpressions)) {
-    return savedState.watchExpressions.map(restoreWatchExpression);
+
+const handleClickSectionAction = async (state, actionId) => {
+  if (!actionId) {
+    return state;
   }
-  return [];
+  if (actionId === AddWatchExpression) {
+    return addWatchExpression$1(state, '');
+  }
+  if (actionId === RefreshWatchExpressions) {
+    return refreshWatchExpression(state);
+  }
+  return state;
 };
 
-const restoreState = savedState => {
-  const watchExpressions = restoreWatchExpressions(savedState);
-  const watchExpanded = restoreWatchExpanded(savedState);
-  const scopeExpanded = restoreScopeExpanded(savedState);
-  const breakPointsExpanded = restoreBreakPointsExpanded(savedState);
-  const focus = restoreFocus();
-  const editingValue = restoreEditingValue(savedState);
-  return {
-    watchExpressions,
-    watchExpanded,
-    scopeExpanded,
-    breakPointsExpanded,
-    focus,
-    editingValue
+const getSectionIndex = (state, name) => {
+  const rows = getRunAndDebugVisibleRows(state);
+  return rows.findIndex(row => row.type === SectionHeading && row.name === name);
+};
+
+const handleClickSectionBreakPoints = state => {
+  const {
+    breakPointsExpanded
+  } = state;
+  const newState = {
+    ...state,
+    breakPointsExpanded: !breakPointsExpanded,
+    selectedIndex: getSectionIndex(state, BreakPoints$1)
   };
+  return updateVisibleRows(newState);
 };
 
-const loadContent = async (state, isTest, savedState) => {
+const handleClickSectionCallstack = state => {
   const {
-    watchExpressions,
-    watchExpanded,
-    breakPointsExpanded,
-    scopeExpanded,
-    focus,
-    editingValue
-  } = restoreState(savedState);
-  const debugId = getDebugId(isTest);
-  return {
+    callStackExpanded
+  } = state;
+  const newState = {
     ...state,
-    debugId,
-    debugState: Default,
-    scopeExpanded,
-    callStackExpanded: true,
-    breakPointsExpanded,
-    watchExpressions,
-    watchExpanded,
-    focus,
-    editingValue
+    callStackExpanded: !callStackExpanded,
+    selectedIndex: getSectionIndex(state, CallStack$1)
   };
+  return updateVisibleRows(newState);
 };
 
-const loadContentLater = async state => {
+const handleClickSectionScope = state => {
   const {
-    debugId
+    scopeExpanded
   } = state;
-  await start(debugId);
+  const newState = {
+    ...state,
+    scopeExpanded: !scopeExpanded,
+    selectedIndex: getSectionIndex(state, Scope$1)
+  };
+  return updateVisibleRows(newState);
+};
+
+const handleClickSectionUnkown = state => {
+  // For unknown section IDs, return the state unchanged
   return state;
 };
 
-const parseUri = uri => {
-  const parts = uri.split('/');
-  const key = Number.parseInt(parts[1]);
-  const scriptId = parts[2];
-  return {
-    key,
-    scriptId
+const handleClickSectionWatch = state => {
+  const {
+    watchExpanded
+  } = state;
+  const newState = {
+    ...state,
+    watchExpanded: !watchExpanded,
+    selectedIndex: getSectionIndex(state, Watch$1)
   };
+  return updateVisibleRows(newState);
 };
-const readFile = async uri => {
-  const {
-    key,
-    scriptId
-  } = parseUri(uri);
-  const instance = get(key);
-  if (!instance) {
-    return '';
+
+const getSectionClickHandler = id => {
+  switch (id) {
+    case Watch:
+      return handleClickSectionWatch;
+    case BreakPoints:
+      return handleClickSectionBreakPoints;
+    case Scope:
+      return handleClickSectionScope;
+    case CallStack:
+      return handleClickSectionCallstack;
+    default:
+      return handleClickSectionUnkown;
   }
-  const {
-    newState
-  } = instance;
-  const {
-    debugId
-  } = newState;
-  const content = await getScriptSource(debugId, scriptId);
-  return content;
 };
 
-const refresh = async state => {
-  return {
-    ...state
-  };
+const LeftClick = 0;
+
+const handleClickSectionHeading = async (state, id, button) => {
+  if (button !== LeftClick) {
+    return state;
+  }
+  const fn = getSectionClickHandler(id);
+  return fn(state);
 };
 
-const removeWatchExpression = (state, index) => {
+const editWatchExpression = (state, index) => {
   const {
     watchExpressions
   } = state;
+  const item = watchExpressions[index];
+  if (!item) {
+    return state;
+  }
+  const newItem = {
+    ...item,
+    isEditing: true
+  };
+  const newWatchExpressions = watchExpressions.toSpliced(index, 1, newItem);
   return {
     ...state,
-    watchExpressions: watchExpressions.toSpliced(index, 1)
+    watchExpressions: newWatchExpressions,
+    focus: FocusDebugWatchInput,
+    inputSource: Script$2,
+    editingValue: item.expression,
+    editingselectionstart: 0,
+    editingselectionend: item.expression.length
   };
 };
 
-const getFocusSelector = focusId => {
-  switch (focusId) {
-    case FocusDebugWatchInput:
-      return WatchExpressionInput;
-    default:
-      return '';
+const handleClickWatchExpression = async (state, dataIndex, defaultPrevented) => {
+  if (defaultPrevented) {
+    return state;
   }
+  const index = parseIndex(dataIndex);
+  return editWatchExpression(state, index);
 };
 
-const renderFocus = (oldState, newState) => {
-  const {
-    id,
-    focus
-  } = newState;
-  const selector = getFocusSelector(focus);
-  if (!selector) {
-    return ['Viewlet.focusElementByName', id, ''];
-  }
-  return ['Viewlet.focusElementByName', id, selector];
+const handleClickWatchExpressionDelete = async (state, dataIndex) => {
+  const index = parseIndex(dataIndex);
+  return deleteWatchExpression$1(state, index);
 };
 
-const renderFocusContext = (oldState, newState) => {
-  const {
-    focus
-  } = newState;
-  return ['Viewlet.setFocusContext', focus];
+const handleWatchExpressionDoubleClick = async (state, dataIndex) => {
+  return state;
 };
 
-const renderInputValue = (oldState, newState) => {
+const handleInputBlur = async state => {
   const {
-    id,
-    focus,
-    editingValue
-  } = newState;
-  const selector = getFocusSelector(focus);
-  if (!selector) {
-    return ['Viewlet.setValueByName', id, '', editingValue];
+    watchExpressions
+  } = state;
+  const editingIndex = watchExpressions.findIndex(expr => expr.isEditing);
+  if (editingIndex === -1) {
+    return state;
   }
-  return ['Viewlet.setValueByName', id, selector, editingValue];
+  return acceptWatchExpressionEdit(state);
 };
 
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const TreeItem = 'treeitem';
-
-const SectionHeading = 1;
-const Value = 2;
-const Exception = 3;
-const Scope$1 = 4;
-const Property = 5;
-const Message = 6;
-const CallStack$1 = 7;
-const CheckBox$1 = 8;
-const WatchMessage = 9;
-const WatchExpression = 10;
-const InputField = 11;
+const handleWatchValueChange = (state, value) => {
+  return {
+    ...state,
+    editingValue: value
+  };
+};
 
-const CallStackArrow = 'CallStackArrow';
-const CallStackDescription = 'CallStackDescription';
-const CallStackLabel = 'CallStackLabel';
-const Chevron = 'Chevron';
-const DebugButton = 'DebugButton';
-const DebugButtons = 'DebugButtons';
-const DebugPausedMessage = 'DebugPausedMessage';
-const DebugRow = 'DebugRow';
-const DebugRowCallStack = 'DebugRowCallStack';
-const DebugRowCheckBox = 'DebugRowCheckBox';
-const DebugRowInputField = 'DebugRowInputField';
-const DebugSectionAction = 'DebugSectionAction';
-const DebugSectionActions = 'DebugSectionActions';
-const DebugSectionHeader = 'DebugSectionHeader';
-const DebugValue = 'DebugValue';
-const DebugValueBoolean = 'DebugValueBoolean';
-const DebugValueFunction = 'DebugValueFunction';
-const DebugValueGetter = 'DebugValueGetter';
-const DebugValueNumber = 'DebugValueNumber';
-const DebugValueObject = 'DebugValueObject';
-const DebugValueScopeName = 'DebugValueScopeName';
-const DebugValueString = 'DebugValueString';
-const DebugValueSymbol = 'DebugValueSymbol';
-const DebugValueUndefined = 'DebugValueUndefined';
-const DeleteWatchExpression = 'DeleteWatchExpression';
-const IconButton = 'IconButton';
-const InputBox = 'InputBox';
-const InputLabel = 'InputLabel';
+const handleInputFieldChange = (state, name, value) => {
+  if (name === WatchExpressionInput) {
+    return handleWatchValueChange(state, value);
+  }
+  return state;
+};
 
-const HandleClickCallStackItem = 'handleClickCallStackItem';
-const HandleClickWatchExpression = 'handleClickWatchExpression';
-const HandleClickWatchExpressionDelete = 'handleClickWatchExpressionDelete';
-const HandleClickCheckBox = 'handleClickCheckBox';
-const HandleClickContinue = 'handleClickContinue';
-const HandleClickDebugButton = 'handleClickDebugButton';
-const HandleClickPause = 'handleClickPause';
-const HandleClickScopeValue = 'handleClickScopeValue';
-const HandleClickSectionBreakPoints = 'handleClickSectionBreakPoints';
-const HandleClickSectionCallstack = 'handleClickSectionCallstack';
-const HandleClickSectionHeading = 'handleClickSectionHeading';
-const HandleClickSectionScope = 'handleClickSectionScope';
-const HandleClickSectionWatch = 'handleClickSectionWatch';
-const HandleClickStepInto = 'handleClickStepInto';
-const HandleClickStepOut = 'handleClickStepOut';
-const HandleClickStepOver = 'handleClickStepOver';
-const HandleDebugInput = 'handleDebugInput';
-const HandleClickSectionAction = 'handleClickSectionAction';
-const HandleInputFieldChange = 'handleInputFieldChange';
-const HandleInputBlur = 'handleInputBlur';
+const handleScriptParsed = (state, parsedScript) => {
+  const {
+    parsedScripts
+  } = state;
+  return {
+    ...state,
+    parsedScripts: {
+      ...parsedScripts,
+      [parsedScript.scriptId]: parsedScript
+    }
+  };
+};
 
-// TODo use same click event listener for all debug sections
+const show = async (x, y, id, ...args) => {
+  await invoke$2('ContextMenu.show', x, y, id);
+};
 
-const Button = 1;
-const Div = 4;
-const Input = 6;
-const Span = 8;
-const Label = 66;
+const handleSectionHeaderContextMenu = async (state, x, y, id) => {
+  await show(x, y, DebugWatchSectionHeading);
+  return state;
+};
 
-const getChevronDownVirtualDom = (extraClassName = '') => {
+const handleWatchExpressionContextMenu = async (state, x, y, dataIndex) => {
+  const index = parseIndex(dataIndex);
+  const newState = {
+    ...state,
+    focusedIndex: index
+  };
+  const {
+    oldState
+  } = get(state.id);
+  set(state.id, oldState, newState);
+  await show(x, y, DebugWatchExpression);
+  return state;
+};
+
+const hideCallStack = state => {
   return {
-    type: Div,
-    className: `${Chevron} MaskIconChevronDown ${extraClassName}`,
-    childCount: 0
+    ...state,
+    callStackVisible: false
   };
 };
-const getChevronRightVirtualDom = (extraClassName = '') => {
+
+const hideScope = state => {
   return {
-    type: Div,
-    className: `${Chevron} MaskIconChevronRight ${extraClassName}`,
-    childCount: 0
+    ...state,
+    scopeVisible: false
   };
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const hideWatch = state => {
+  return {
+    ...state,
+    watchVisible: false
+  };
 };
-const Text$1 = 12;
-const text = data => {
+
+const getPortTuple = () => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
   return {
-    type: Text$1,
-    text: data,
-    childCount: 0
+    port1,
+    port2
   };
 };
 
-const getActionsDom = actions => {
-  const nodes = [];
-  nodes.push({
-    type: Div,
-    className: DebugSectionActions,
-    childCount: actions.length
-  });
-  for (const action of actions) {
-    nodes.push({
-      type: Button,
-      className: DebugSectionAction,
-      title: action.title,
-      onClick: HandleClickSectionAction,
-      name: action.id,
-      childCount: 1
+const sendMessagePortToEditorWorker = async port => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, RpcId.DebugWorker);
+};
+
+const createEditorWorkerRpc = async () => {
+  try {
+    const {
+      port1,
+      port2
+    } = getPortTuple();
+    await sendMessagePortToEditorWorker(port2);
+    const rpc = await PlainMessagePortRpcParent.create({
+      commandMap: {},
+      messagePort: port1
     });
-    nodes.push(text(action.icon));
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create editor worker rpc`);
   }
-  return nodes;
 };
-const renderSectionHeading = row => {
-  const {
-    expanded,
-    text: text$1,
-    key,
-    actions
-  } = row;
-  const hasActions = actions && actions.length > 0;
-  const nodes = [{
-    type: Div,
-    className: DebugSectionHeader,
-    role: TreeItem,
-    ariaExpanded: expanded,
-    ariaLevel: 1,
-    childCount: hasActions ? 3 : 2,
-    onClick: HandleClickSectionHeading,
-    'data-name': key
-  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), text(text$1), ...getActionsDom(actions || [])];
-  return nodes;
+
+const initializeEditorWorker = async () => {
+  try {
+    const rpc = await createEditorWorkerRpc();
+    set$1(rpc);
+  } catch {
+    // ignore
+  }
 };
 
-const getArrowNodes = hasArrow => {
-  if (!hasArrow) {
-    return [];
+const sendMessagePortToExtensionHostWorker = async port => {
+  const command = 'HandleMessagePort.handleMessagePort2';
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, RpcId.DebugWorker);
+};
+
+const createExtensionHostRpc = async () => {
+  try {
+    const {
+      port1,
+      port2
+    } = getPortTuple();
+    await sendMessagePortToExtensionHostWorker(port2);
+    const rpc = await PlainMessagePortRpcParent.create({
+      commandMap: {},
+      messagePort: port1
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
   }
-  return [{
-    type: Div,
-    className: CallStackArrow,
-    childCount: 1
-  }, {
-    type: Div,
-    className: 'MaskIcon MaskIconArrowRight',
-    childCount: 0
-  }];
 };
 
-const labelNode = {
-  type: Div,
-  className: CallStackLabel,
-  childCount: 1
+const initializeExtensionHost = async () => {
+  const rpc = await createExtensionHostRpc();
+  set$2(rpc);
 };
-const descriptionNode = {
-  type: Div,
-  className: CallStackDescription,
-  childCount: 1
+
+const initialize = async () => {
+  await Promise.all([initializeExtensionHost(), initializeEditorWorker()]);
 };
-const renderCallStack = row => {
-  const {
-    text: text$1,
-    description,
-    hasArrow,
-    index
-  } = row;
-  const childCount = hasArrow ? 3 : 2;
-  const arrowNodes = getArrowNodes(hasArrow);
-  return [{
-    type: Div,
-    className: mergeClassNames(DebugRow, DebugRowCallStack),
-    role: TreeItem,
-    ariaLevel: 2,
-    childCount,
-    onClick: HandleClickCallStackItem,
-    'data-index': index
-  }, ...arrowNodes, labelNode, text(text$1), descriptionNode, text(description)];
+
+const getDebugId = isTest => {
+  const debugId = isTest ? 'test-debug' : 'node-debug'; // TODO
+  return debugId;
 };
 
-const CheckBox = 'checkbox';
-const Text = 'text';
+const hasProperty = (object, key) => {
+  return Boolean(object && typeof object === 'object' && key in object);
+};
 
-const renderCheckBox = row => {
-  const {
-    text: text$1,
-    expanded,
-    name
-  } = row;
-  return [{
-    type: Div,
-    className: mergeClassNames(DebugRow, DebugRowCheckBox),
-    role: TreeItem,
-    ariaLevel: 2,
-    childCount: 2
-  }, {
-    type: Input,
-    inputType: CheckBox,
-    name,
-    checked: expanded,
-    childCount: 0,
-    onChange: HandleClickCheckBox,
-    id: name
-  }, {
-    type: Label,
-    className: InputLabel,
-    htmlFor: name,
-    childCount: 1
-  }, text(text$1)];
+const restoreBoolean = (savedState, key) => {
+  if (hasProperty(savedState, key) && typeof savedState[key] === 'boolean') {
+    return savedState[key];
+  }
+  return false;
+};
+
+const restoreBreakPointsExpanded = savedState => {
+  return restoreBoolean(savedState, 'breakPointsExpanded');
+};
+
+const restoreEditingValue = savedState => {
+  if (hasProperty(savedState, 'editingValue') && typeof savedState.editingValue === 'string') {
+    return savedState.editingValue;
+  }
+  return '';
+};
+
+const restoreFocus = savedState => {
+  // if (hasProperty(savedState, 'focus') && typeof savedState.focus === 'number') {
+  //   return savedState.focus
+  // }
+  return 0;
 };
 
-const getDebugValueClassName = valueType => {
-  switch (valueType) {
-    case Undefined:
-      return DebugValueUndefined;
-    case Number$1:
-      return DebugValueNumber;
-    case Symbol:
-      return DebugValueSymbol;
-    case Boolean$1:
-      return DebugValueBoolean;
-    case String$1:
-      return DebugValueString;
-    case Object$1:
-      return DebugValueObject;
-    case Function:
-      return DebugValueFunction;
-    case Getter:
-      return DebugValueGetter;
-    default:
-      return '';
+const restoreScopeExpanded = savedState => {
+  return restoreBoolean(savedState, 'scopeExpanded');
+};
+
+const restoreWatchExpanded = savedState => {
+  return restoreBoolean(savedState, 'watchExpanded');
+};
+
+const restoreWatchExpression = savedExpression => {
+  if (typeof savedExpression === 'object' && savedExpression !== null && hasProperty(savedExpression, 'expression') && typeof savedExpression.expression === 'string' && hasProperty(savedExpression, 'value') && hasProperty(savedExpression, 'isEditing') && typeof savedExpression.isEditing === 'boolean') {
+    const value = savedExpression.value;
+    if (value === null || value === undefined || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return {
+        expression: savedExpression.expression,
+        value,
+        isEditing: savedExpression.isEditing
+      };
+    }
+  }
+  return {
+    expression: '',
+    value: null,
+    isEditing: false
+  };
+};
+const restoreWatchExpressions = savedState => {
+  if (hasProperty(savedState, 'watchExpressions') && Array.isArray(savedState.watchExpressions)) {
+    return savedState.watchExpressions.map(restoreWatchExpression);
   }
+  return [];
 };
 
-const separator = text(': ');
+const restoreState = savedState => {
+  const watchExpressions = restoreWatchExpressions(savedState);
+  const watchExpanded = restoreWatchExpanded(savedState);
+  const scopeExpanded = restoreScopeExpanded(savedState);
+  const breakPointsExpanded = restoreBreakPointsExpanded(savedState);
+  const focus = restoreFocus();
+  const editingValue = restoreEditingValue(savedState);
+  return {
+    watchExpressions,
+    watchExpanded,
+    scopeExpanded,
+    breakPointsExpanded,
+    focus,
+    editingValue
+  };
+};
 
-const renderValue = row => {
+const loadContent = async (state, isTest, savedState) => {
   const {
-    indent,
-    key,
-    value,
-    valueType,
-    expanded
-  } = row;
-  const className = getDebugValueClassName(valueType);
-  return [{
-    type: Div,
-    className: DebugRow,
-    role: TreeItem,
-    ariaExpanded: expanded,
-    ariaLevel: 3,
-    paddingLeft: indent,
-    onPointerDown: HandleClickScopeValue,
-    childCount: 3
-  }, {
-    type: Span,
-    className: 'DebugValue DebugPropertyKey',
-    childCount: 1
-  }, text(key), separator, {
-    type: Span,
-    className: mergeClassNames(DebugValue, className),
-    childCount: 1
-  }, text(value)];
+    watchExpressions,
+    watchExpanded,
+    breakPointsExpanded,
+    scopeExpanded,
+    focus,
+    editingValue
+  } = restoreState(savedState);
+  const debugId = getDebugId(isTest);
+  const newState = {
+    ...state,
+    debugId,
+    debugState: Default,
+    scopeExpanded,
+    callStackExpanded: true,
+    breakPointsExpanded,
+    watchExpressions,
+    watchExpanded,
+    focus,
+    editingValue
+  };
+  return updateVisibleRows(newState);
 };
 
-const renderInputField = row => {
+const loadContentLater = async state => {
   const {
-    text,
-    name
-  } = row;
-  return [{
-    type: Div,
-    className: mergeClassNames(DebugRow, DebugRowInputField),
-    role: TreeItem,
-    ariaLevel: 2,
-    childCount: 1
-  }, {
-    type: Input,
-    inputType: Text,
-    spellcheck: false,
-    autocapitalize: 'off',
-    autocorrect: 'off',
-    className: InputBox,
-    name,
-    value: text,
-    childCount: 0,
-    onInput: HandleInputFieldChange,
-    onBlur: HandleInputBlur,
-    id: name
-  }];
+    debugId
+  } = state;
+  await start(debugId);
+  const status = await getPausedStatus(debugId);
+  if (status && status.status === 'unavailable') {
+    const newState = {
+      ...state,
+      debugState: Unavailable
+    };
+    return updateVisibleRows(newState);
+  }
+  return state;
 };
 
-const renderScope = row => {
-  const {
+const parseUri = uri => {
+  const parts = uri.split('/');
+  const key = Number.parseInt(parts[1]);
+  const scriptId = parts[2];
+  return {
     key,
-    expanded
-  } = row;
-  const className = DebugRow;
-  return [{
-    type: Div,
-    className,
-    role: TreeItem,
-    ariaExpanded: expanded,
-    ariaLevel: 2,
-    childCount: 2,
-    onPointerDown: HandleClickScopeValue,
-    'data-name': key
-  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
-    type: Span,
-    className: mergeClassNames(DebugValue, DebugValueScopeName),
-    childCount: 1
-  }, text(key)];
+    scriptId
+  };
 };
-
-const renderWatchExpression$1 = row => {
+const readFile = async uri => {
   const {
-    value,
     key,
-    index
-  } = row;
-  return [{
-    type: Div,
-    className: DebugRow,
-    role: TreeItem,
-    childCount: 4,
-    'data-index': index,
-    onClick: HandleClickWatchExpression // TODO use doubleclick
-  }, {
-    type: Span,
-    className: DebugValueScopeName,
-    childCount: 1
-  }, text(key), separator, {
-    type: Span,
-    className: DebugValue,
-    childCount: 1
-  }, text(value), {
-    type: Button,
-    title: deleteWatchExpression(),
-    className: mergeClassNames(IconButton, DebugSectionAction, DeleteWatchExpression),
-    'data-index': index,
-    onClick: HandleClickWatchExpressionDelete,
-    childCount: 1
-  }, text('×')];
-};
-
-const renderWatchMessage = row => {
+    scriptId
+  } = parseUri(uri);
+  const instance = get(key);
+  if (!instance) {
+    return '';
+  }
   const {
-    text: text$1
-  } = row;
-  return [{
-    type: Div,
-    className: 'WatchMessage',
-    childCount: 1
-  }, text(text$1)];
+    newState
+  } = instance;
+  const {
+    debugId
+  } = newState;
+  const content = await getScriptSource(debugId, scriptId);
+  return content;
 };
 
-const renderNoop = row => {
-  return [{
-    type: Div,
-    childCount: 1
-  }, text('unknown row type')];
+const refresh = async state => {
+  return {
+    ...state
+  };
 };
-const renderMessage = row => {
+
+const removeWatchExpression = (state, index) => {
   const {
-    text: text$1
-  } = row;
-  return [{
-    type: Div,
-    className: DebugPausedMessage,
-    childCount: 1
-  }, text(text$1)];
+    watchExpressions
+  } = state;
+  return {
+    ...state,
+    watchExpressions: watchExpressions.toSpliced(index, 1)
+  };
 };
 
-const getRowRenderer = type => {
-  switch (type) {
-    case Message:
-      return renderMessage;
-    case SectionHeading:
-      return renderSectionHeading;
-    case CallStack$1:
-      return renderCallStack;
-    case Scope$1:
-      return renderScope;
-    case Value:
-    case Property:
-    case Exception:
-      return renderValue;
-    case CheckBox$1:
-      return renderCheckBox;
-    case WatchMessage:
-      return renderWatchMessage;
-    case WatchExpression:
-      return renderWatchExpression$1;
-    case InputField:
-      return renderInputField;
+const getFocusSelector = focusId => {
+  switch (focusId) {
+    case FocusDebugWatchInput:
+      return WatchExpressionInput;
     default:
-      return renderNoop;
+      return '';
   }
 };
 
-const getRunAndDebugRowVirtualDom = row => {
-  const renderer = getRowRenderer(row.type);
-  return renderer(row);
+const renderFocus = (oldState, newState) => {
+  const {
+    id,
+    focus
+  } = newState;
+  const selector = getFocusSelector(focus);
+  if (!selector) {
+    return ['Viewlet.focusElementByName', id, ''];
+  }
+  return ['Viewlet.focusElementByName', id, selector];
 };
 
-const getRunAndDebugVirtualDom2 = rows => {
-  return [{
-    type: Div,
-    className: 'Viewlet RunAndDebug',
-    tabIndex: 0,
-    childCount: rows.length,
-    role: Tree
-  }, ...rows.flatMap(getRunAndDebugRowVirtualDom)];
+const renderFocusContext = (oldState, newState) => {
+  const {
+    focus
+  } = newState;
+  return ['Viewlet.setFocusContext', focus];
 };
 
-const getRunAndDebugVisibleRowsBreakPoints = state => {
+const renderInputValue = (oldState, newState) => {
   const {
-    breakPointsExpanded,
-    exceptionBreakPoints
-  } = state;
-  if (breakPointsExpanded) {
-    return [{
-      type: SectionHeading,
-      text: breakPoints(),
-      expanded: true,
-      key: BreakPoints,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: '',
-      description: ''
-    }, {
-      type: CheckBox$1,
-      text: pauseOnExceptions(),
-      expanded: exceptionBreakPoints === All,
-      key: '',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: PauseOnExceptions,
-      description: ''
-    }, {
-      type: CheckBox$1,
-      text: pauseOnUncaughtExceptions(),
-      expanded: exceptionBreakPoints === Uncaught,
-      key: '',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: PauseOnUncaughtExceptions,
-      description: ''
-    }];
+    id,
+    focus,
+    editingValue
+  } = newState;
+  const selector = getFocusSelector(focus);
+  if (!selector) {
+    return ['Viewlet.setValueByName', id, '', editingValue];
   }
-  return [{
-    type: SectionHeading,
-    text: breakPoints(),
-    expanded: breakPointsExpanded,
-    key: BreakPoints,
-    value: '',
-    indent: 0,
-    valueType: '',
-    name: '',
-    description: ''
-  }];
+  return ['Viewlet.setValueByName', id, selector, editingValue];
 };
 
-const Scope = 'Scope';
-const CallStack = 'CallStack';
-const Watch = 'Watch';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
 
-const formatLocation = (url, rowIndex, columnIndex) => {
-  const lastSlashIndex = url.lastIndexOf('/');
-  const adjustedRowIndex = rowIndex + 1;
-  if (lastSlashIndex === -1) {
-    return `${url}:${adjustedRowIndex}`;
-  }
-  const part = url.slice(lastSlashIndex + 1);
-  return `${part}:${adjustedRowIndex}`;
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
-
-const unknownScript = {
-  url: 'unknown'
+const Text$1 = 12;
+const text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
 };
-const getRunAndDebugVisibleRowsCallStack = state => {
+const CallStackArrow$1 = 'CallStackArrow';
+const CallStackDescription$1 = 'CallStackDescription';
+const CallStackLabel$1 = 'CallStackLabel';
+const Chevron$1 = 'Chevron';
+const DebugButton$1 = 'DebugButton';
+const DebugButtons$1 = 'DebugButtons';
+const DebugRow$1 = 'DebugRow';
+const DebugRowInputField$1 = 'DebugRowInputField';
+const DebugSectionAction$1 = 'DebugSectionAction';
+const DebugSectionActions$1 = 'DebugSectionActions';
+const DebugSectionHeader$1 = 'DebugSectionHeader';
+const DebugValue$1 = 'DebugValue';
+const DebugValueBoolean$1 = 'DebugValueBoolean';
+const DebugValueFunction$1 = 'DebugValueFunction';
+const DebugValueGetter$1 = 'DebugValueGetter';
+const DebugValueNumber$1 = 'DebugValueNumber';
+const DebugValueObject$1 = 'DebugValueObject';
+const DebugValueScopeName$1 = 'DebugValueScopeName';
+const DebugValueString$1 = 'DebugValueString';
+const DebugValueSymbol$1 = 'DebugValueSymbol';
+const DebugValueUndefined$1 = 'DebugValueUndefined';
+const DeleteWatchExpression$1 = 'DeleteWatchExpression';
+const IconButton$1 = 'IconButton';
+const InputBox$1 = 'InputBox';
+const InputLabel$1 = 'InputLabel';
+const ClassNames = {
+  __proto__: null,
+  CallStackArrow: CallStackArrow$1,
+  CallStackDescription: CallStackDescription$1,
+  CallStackLabel: CallStackLabel$1,
+  Chevron: Chevron$1,
+  DebugButton: DebugButton$1,
+  DebugButtons: DebugButtons$1,
+  DebugRow: DebugRow$1,
+  DebugRowInputField: DebugRowInputField$1,
+  DebugSectionAction: DebugSectionAction$1,
+  DebugSectionActions: DebugSectionActions$1,
+  DebugSectionHeader: DebugSectionHeader$1,
+  DebugValue: DebugValue$1,
+  DebugValueBoolean: DebugValueBoolean$1,
+  DebugValueFunction: DebugValueFunction$1,
+  DebugValueGetter: DebugValueGetter$1,
+  DebugValueNumber: DebugValueNumber$1,
+  DebugValueObject: DebugValueObject$1,
+  DebugValueScopeName: DebugValueScopeName$1,
+  DebugValueString: DebugValueString$1,
+  DebugValueSymbol: DebugValueSymbol$1,
+  DebugValueUndefined: DebugValueUndefined$1,
+  DeleteWatchExpression: DeleteWatchExpression$1,
+  IconButton: IconButton$1,
+  InputBox: InputBox$1,
+  InputLabel: InputLabel$1
+};
+
+const {
+  CallStackArrow,
+  CallStackDescription,
+  CallStackLabel,
+  Chevron,
+  DebugButton,
+  DebugButtons,
+  DebugRow,
+  DebugRowInputField,
+  DebugSectionAction,
+  DebugSectionActions,
+  DebugSectionHeader,
+  DebugValue,
+  DebugValueBoolean,
+  DebugValueFunction,
+  DebugValueGetter,
+  DebugValueNumber,
+  DebugValueObject,
+  DebugValueScopeName,
+  DebugValueString,
+  DebugValueSymbol,
+  DebugValueUndefined,
+  DeleteWatchExpression,
+  IconButton,
+  InputBox,
+  InputLabel
+} = ClassNames;
+
+const HandleClickCallStackItem = 'handleClickCallStackItem';
+const HandleClickWatchExpression = 'handleClickWatchExpression';
+const HandleClickWatchExpressionDelete = 'handleClickWatchExpressionDelete';
+const HandleClickCheckBox = 'handleClickCheckBox';
+const HandleClickContinue = 'handleClickContinue';
+const HandleClickDebugButton = 'handleClickDebugButton';
+const HandleClickPause = 'handleClickPause';
+const HandleClickScopeValue = 'handleClickScopeValue';
+const HandleClickSectionBreakPoints = 'handleClickSectionBreakPoints';
+const HandleClickSectionCallstack = 'handleClickSectionCallstack';
+const HandleClickSectionHeading = 'handleClickSectionHeading';
+const HandleClickSectionScope = 'handleClickSectionScope';
+const HandleClickSectionWatch = 'handleClickSectionWatch';
+const HandleClickStepInto = 'handleClickStepInto';
+const HandleClickStepOut = 'handleClickStepOut';
+const HandleClickStepOver = 'handleClickStepOver';
+const HandleDebugInput = 'handleDebugInput';
+const HandleClickSectionAction = 'handleClickSectionAction';
+const HandleInputFieldChange = 'handleInputFieldChange';
+const HandleInputBlur = 'handleInputBlur';
+const HandleSectionHeaderContextMenu = 'handleSectionHeaderContextMenu';
+const HandleWatchExpressionContextMenu = 'handleWatchExpressionContextMenu';
+
+// TODo use same click event listener for all debug sections
+
+const Button = 1;
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Label = 66;
+
+const getActionDom = action => {
   const {
-    callStack: callStack$1,
-    callStackExpanded,
-    parsedScripts
-  } = state;
-  const rows = [];
-  if (callStackExpanded) {
-    rows.push({
-      type: SectionHeading,
-      text: callStack(),
-      expanded: true,
-      key: CallStack$2,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: CallStack,
-      description: ''
-    });
-    if (callStack$1.length === 0) {
-      rows.push({
-        type: Message,
-        text: notPaused(),
-        expanded: false,
-        key: '',
-        value: '',
-        indent: 0,
-        valueType: '',
-        name: '',
-        description: ''
-      });
-    } else {
-      for (const item of callStack$1) {
-        const {
-          scriptId,
-          lineNumber} = item.location;
-        const script = parsedScripts[scriptId] || unknownScript;
-        const description = formatLocation(script.url, lineNumber);
-        const hasArrow = item === callStack$1[0];
-        rows.push({
-          type: CallStack$1,
-          text: item.functionName,
-          expanded: false,
-          key: CallStack$2,
-          value: '',
-          indent: 0,
-          valueType: '',
-          name: '',
-          description,
-          hasArrow,
-          index: callStack$1.indexOf(item) // TODO use for loop
-        });
-      }
-    }
-  } else {
-    rows.push({
-      type: SectionHeading,
-      text: callStack(),
-      expanded: false,
-      key: '',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: CallStack,
-      description: ''
-    });
+    title,
+    id,
+    icon
+  } = action;
+  return [{
+    type: Button,
+    className: DebugSectionAction,
+    title,
+    onClick: HandleClickSectionAction,
+    name: id,
+    childCount: 1
+  }, text(icon)];
+};
+
+const getActionsDom = actions => {
+  if (actions.length === 0) {
+    return [];
   }
-  return rows;
+  return [{
+    type: Div,
+    className: DebugSectionActions,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionDom)];
 };
 
-const getNoopRows = () => {
-  return [];
+const getChevronDownVirtualDom = (extraClassName = '') => {
+  return {
+    type: Div,
+    className: `${Chevron} MaskIconChevronDown ${extraClassName}`,
+    childCount: 0
+  };
+};
+const getChevronRightVirtualDom = (extraClassName = '') => {
+  return {
+    type: Div,
+    className: `${Chevron} MaskIconChevronRight ${extraClassName}`,
+    childCount: 0
+  };
 };
 
-const getScopeExceptionRows = scope => {
+const getDebugRowClassName = (baseClassName, isSelected) => {
+  return isSelected ? mergeClassNames(baseClassName, 'DebugRowSelected') : baseClassName;
+};
+
+const renderSectionHeading = (row, selectedIndex, rowIndex) => {
   const {
+    expanded,
+    text: text$1,
     key,
-    value,
-    indent
-  } = scope;
-  return [{
-    type: Exception,
-    text: '',
-    expanded: false,
-    key,
-    value,
-    indent,
-    valueType: '',
-    name: '',
-    description: ''
-  }];
+    actions
+  } = row;
+  const hasActions = actions && actions.length > 0;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(DebugSectionHeader, isSelected);
+  const nodes = [{
+    type: Div,
+    className,
+    role: TreeItem,
+    ariaExpanded: expanded,
+    ariaLevel: 1,
+    childCount: hasActions ? 3 : 2,
+    onClick: HandleClickSectionHeading,
+    onContextMenu: HandleSectionHeaderContextMenu,
+    'data-name': key
+  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), text(text$1), ...getActionsDom(actions || [])];
+  return nodes;
 };
 
-const None = 0;
-const Expanded = 1 << 0;
-const Collapsed = 1 << 1;
-const Focused = 1 << 2;
-
-const getScopePropertyRows = scope => {
-  const {
-    indent,
-    key,
-    value,
-    valueType,
-    flags
-  } = scope;
+const getArrowNodes = hasArrow => {
+  if (!hasArrow) {
+    return [];
+  }
   return [{
-    type: Property,
-    text: '',
-    expanded: Boolean(flags & Expanded),
-    key,
-    value,
-    indent,
-    valueType,
-    name: '',
-    description: ''
+    type: Div,
+    className: CallStackArrow,
+    childCount: 1
+  }, {
+    type: Div,
+    className: 'MaskIcon MaskIconArrowRight',
+    childCount: 0
   }];
 };
 
-const getScopeScopeRows = scope => {
+const labelNode = {
+  type: Div,
+  className: CallStackLabel,
+  childCount: 1
+};
+const descriptionNode = {
+  type: Div,
+  className: CallStackDescription,
+  childCount: 1
+};
+const renderCallStack = (row, selectedIndex, rowIndex) => {
   const {
-    key,
-    flags
-  } = scope;
+    text: text$1,
+    description,
+    hasArrow,
+    index
+  } = row;
+  const childCount = hasArrow ? 3 : 2;
+  const arrowNodes = getArrowNodes(hasArrow);
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName('DebugRow DebugRowCallStack', isSelected);
   return [{
-    type: Scope$1,
-    text: '',
-    expanded: Boolean(flags & Expanded),
-    key,
-    value: '',
-    indent: 0,
-    valueType: '',
-    name: '',
-    description: ''
-  }];
+    type: Div,
+    className,
+    role: TreeItem,
+    ariaLevel: 2,
+    childCount,
+    onClick: HandleClickCallStackItem,
+    'data-index': index
+  }, ...arrowNodes, labelNode, text(text$1), descriptionNode, text(description)];
 };
 
-const getScopeThisRows = scope => {
+const CheckBox = 'checkbox';
+const Text = 'text';
+
+const renderCheckBox = (row, selectedIndex, rowIndex) => {
   const {
-    indent,
-    key,
-    value,
-    valueType
-  } = scope;
+    text: text$1,
+    expanded,
+    name
+  } = row;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(DebugRow, isSelected);
   return [{
-    type: Value,
-    text: '',
-    expanded: false,
-    key,
-    value,
-    indent,
-    valueType,
-    name: '',
-    description: ''
-  }];
+    type: Div,
+    className,
+    role: TreeItem,
+    ariaLevel: 2,
+    childCount: 2
+  }, {
+    type: Input,
+    inputType: CheckBox,
+    name,
+    checked: expanded,
+    childCount: 0,
+    onChange: HandleClickCheckBox,
+    id: name
+  }, {
+    type: Label,
+    className: InputLabel,
+    htmlFor: name,
+    childCount: 1
+  }, text(text$1)];
 };
 
-const getScopeRenderer = type => {
-  switch (type) {
-    case This:
-      return getScopeThisRows;
-    case Exception$1:
-      return getScopeExceptionRows;
-    case Scope$3:
-      return getScopeScopeRows;
-    case Property$1:
-      return getScopePropertyRows;
+const getDebugValueClassName = valueType => {
+  switch (valueType) {
+    case Undefined:
+      return DebugValueUndefined;
+    case Number$1:
+      return DebugValueNumber;
+    case Symbol:
+      return DebugValueSymbol;
+    case Boolean$1:
+      return DebugValueBoolean;
+    case String$1:
+      return DebugValueString;
+    case Object$1:
+      return DebugValueObject;
+    case Function:
+      return DebugValueFunction;
+    case Getter:
+      return DebugValueGetter;
     default:
-      return getNoopRows;
+      return '';
   }
 };
 
-const getExpandable = valueType => {
-  if (valueType === 'object') {
-    return true;
-  }
-  return false;
-};
-const getFlags = (isExpanded, isExpandable, isFocused) => {
-  let flags = None;
-  if (isExpanded) {
-    flags |= Expanded;
-  } else if (isExpandable) {
-    flags |= Collapsed;
-  }
-  if (isFocused) {
-    flags |= Focused;
-  }
-  return flags;
-};
-const getVisibleScopeItems = (scopeChain, expandedIds, focusedIndex) => {
-  const minLineY = 0;
-  const maxLineY = scopeChain.length;
-  const visible = [];
-  for (let i = minLineY; i < maxLineY; i++) {
-    const element = scopeChain[i];
-    const isExpanded = expandedIds.includes(element.objectId);
-    const isExpandable = getExpandable(element.valueType);
-    const isFocused = i === focusedIndex;
-    const flags = getFlags(isExpanded, isExpandable, isFocused);
-    visible.push({
-      ...element,
-      flags
-    });
-  }
-  return visible;
+const separator = text(': ');
+
+const renderValue = (row, selectedIndex, rowIndex) => {
+  const {
+    indent,
+    key,
+    value,
+    valueType,
+    expanded
+  } = row;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(DebugRow, isSelected);
+  return [{
+    type: Div,
+    className: className,
+    role: TreeItem,
+    ariaExpanded: expanded,
+    ariaLevel: 3,
+    paddingLeft: indent,
+    onPointerDown: HandleClickScopeValue,
+    childCount: 3
+  }, {
+    type: Span,
+    className: 'DebugValue DebugPropertyKey',
+    childCount: 1
+  }, text(key), separator, {
+    type: Span,
+    className: mergeClassNames(DebugValue, getDebugValueClassName(valueType)),
+    childCount: 1
+  }, text(value)];
 };
 
-const getRunAndDebugVisibleRowsScope = state => {
-  const rows = [];
+const renderInputField = (row, selectedIndex, rowIndex) => {
   const {
-    scopeChain,
-    scopeExpanded,
-    expandedIds,
-    scopeFocusedIndex
-  } = state;
-  if (scopeExpanded) {
-    rows.push({
-      type: SectionHeading,
-      text: scope(),
-      expanded: true,
-      key: Scope$2,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: Scope,
-      description: ''
-    });
-    if (scopeChain.length === 0) {
-      rows.push({
-        type: Message,
-        text: notPaused(),
-        expanded: false,
-        key: '',
-        value: '',
-        indent: 0,
-        valueType: '',
-        name: '',
-        description: ''
-      });
-    } else {
-      const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
-      for (const scope of visible) {
-        const renderer = getScopeRenderer(scope.type);
-        rows.push(...renderer(scope));
-      }
-    }
-  } else {
-    rows.push({
-      type: SectionHeading,
-      text: scope(),
-      expanded: false,
-      key: Scope$2,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: Scope,
-      description: ''
-    });
-  }
-  return rows;
+    text,
+    name
+  } = row;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(`${DebugRow} ${DebugRowInputField}`, isSelected);
+  return [{
+    type: Div,
+    className,
+    role: TreeItem,
+    ariaLevel: 2,
+    childCount: 1
+  }, {
+    type: Input,
+    inputType: Text,
+    spellcheck: false,
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    className: InputBox,
+    name,
+    value: text,
+    childCount: 0,
+    onInput: HandleInputFieldChange,
+    onBlur: HandleInputBlur,
+    id: name
+  }];
 };
 
-const formatValue = value => {
-  return value === null || value === undefined ? '' : String(value);
+const renderScope = (row, selectedIndex, rowIndex) => {
+  const {
+    key,
+    expanded
+  } = row;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(DebugRow, isSelected);
+  return [{
+    type: Div,
+    className,
+    role: TreeItem,
+    ariaExpanded: expanded,
+    ariaLevel: 2,
+    childCount: 2,
+    onPointerDown: HandleClickScopeValue,
+    'data-name': key
+  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
+    type: Span,
+    className: mergeClassNames(DebugValue, DebugValueScopeName),
+    childCount: 1
+  }, text(key)];
 };
-const renderWatchExpression = (expression, value, isEditing, index) => {
-  if (isEditing) {
-    return {
-      type: InputField,
-      text: '',
-      expanded: false,
-      key: 'new-watch-expression',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: WatchExpressionInput,
-      description: '',
-      index
-    };
-  }
-  return {
-    type: WatchExpression,
-    text: expression,
-    expanded: false,
-    key: expression,
-    value: formatValue(value),
-    indent: 0,
-    valueType: '',
-    name: '',
-    description: '',
+
+const renderWatchExpression = (row, selectedIndex, rowIndex) => {
+  const {
+    value,
+    key,
     index
-  };
+  } = row;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(DebugRow, isSelected);
+  return [{
+    type: Div,
+    className,
+    role: TreeItem,
+    childCount: 4,
+    'data-index': index,
+    onClick: HandleClickWatchExpression,
+    // TODO use doubleclick
+    onContextMenu: HandleWatchExpressionContextMenu
+  }, {
+    type: Span,
+    className: DebugValueScopeName,
+    childCount: 1
+  }, text(key), separator, {
+    type: Span,
+    className: DebugValue,
+    childCount: 1
+  }, text(value), {
+    type: Button,
+    title: deleteWatchExpression(),
+    className: mergeClassNames(IconButton, DebugSectionAction, DeleteWatchExpression),
+    'data-index': index,
+    onClick: HandleClickWatchExpressionDelete,
+    childCount: 1
+  }, text('×')];
 };
-const getRunAndDebugVisibleRowsWatchContent = watchExpressions => {
-  const rows = [];
-  if (watchExpressions.length === 0) {
-    rows.push({
-      type: WatchMessage,
-      text: noWatchExpression(),
-      expanded: false,
-      key: '',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: '',
-      description: ''
-    });
-  } else {
-    for (const watchExpression of watchExpressions) {
-      // TODO simplify index
-      const index = watchExpressions.indexOf(watchExpression);
-      rows.push(renderWatchExpression(watchExpression.expression, watchExpression.value, watchExpression.isEditing || false, index));
-    }
-  }
-  return rows;
+
+const renderWatchMessage = (row, selectedIndex, rowIndex) => {
+  const {
+    text: text$1
+  } = row;
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName('WatchMessage', isSelected);
+  return [{
+    type: Div,
+    className,
+    childCount: 1
+  }, text(text$1)];
 };
 
-const getWatchActions = watchExpanded => {
-  if (!watchExpanded) {
-    return [];
-  }
+const renderNoop = (row, selectedIndex, rowIndex) => {
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName(DebugRow, isSelected);
   return [{
-    id: AddWatchExpression,
-    title: 'Add new watch expression',
-    icon: '+'
-  }];
+    type: Div,
+    className,
+    childCount: 1
+  }, text('unknown row type')];
+};
+const renderMessage = (row, selectedIndex, rowIndex) => {
+  const isSelected = rowIndex === selectedIndex;
+  const className = getDebugRowClassName('DebugPausedMessage', isSelected);
+  return [{
+    type: Div,
+    className,
+    childCount: 1
+  }, text(row.text)];
 };
 
-const getRunAndDebugVisibleRowsWatch = state => {
-  const {
-    watchExpanded,
-    watchExpressions
-  } = state;
-  const rows = [{
-    type: SectionHeading,
-    text: watch(),
-    expanded: watchExpanded,
-    key: Watch$1,
-    value: '',
-    indent: 0,
-    valueType: '',
-    name: Watch,
-    description: '',
-    actions: getWatchActions(watchExpanded)
-  }];
-  if (watchExpanded) {
-    rows.push(...getRunAndDebugVisibleRowsWatchContent(watchExpressions));
+const getRowRenderer = type => {
+  switch (type) {
+    case Message:
+      return renderMessage;
+    case SectionHeading:
+      return renderSectionHeading;
+    case CallStack$2:
+      return renderCallStack;
+    case Scope$2:
+      return renderScope;
+    case Value:
+    case Property:
+    case Exception:
+      return renderValue;
+    case CheckBox$1:
+      return renderCheckBox;
+    case WatchMessage:
+      return renderWatchMessage;
+    case WatchExpression:
+      return renderWatchExpression;
+    case InputField:
+      return renderInputField;
+    default:
+      return renderNoop;
   }
-  return rows;
 };
 
-const getRunAndDebugVisibleRows = state => {
-  const rows = [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
-  return rows;
+const getRunAndDebugRowVirtualDom = (row, selectedIndex, rowIndex) => {
+  const renderer = getRowRenderer(row.type);
+  return renderer(row, selectedIndex, rowIndex);
+};
+
+const getRunAndDebugVirtualDom2 = (rows, selectedIndex) => {
+  return [{
+    type: Div,
+    className: 'Viewlet RunAndDebug',
+    tabIndex: 0,
+    childCount: rows.length,
+    role: Tree
+  }, ...rows.flatMap((row, index) => getRunAndDebugRowVirtualDom(row, selectedIndex, index))];
 };
 
 const renderItems = (oldState, newState) => {
-  const rows = getRunAndDebugVisibleRows(newState);
-  const dom = getRunAndDebugVirtualDom2(rows);
+  const rows = newState.visibleRows;
+  const selectedIndex = newState.selectedIndex;
+  const dom = getRunAndDebugVirtualDom2(rows, selectedIndex);
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
@@ -3973,6 +4260,9 @@ const DebugRestart = 'DebugRestart';
 const DebugStop = 'DebugStop';
 
 const getDebugButtons = debugState => {
+  if (debugState === Unavailable) {
+    return [];
+  }
   const debugButtons = [];
   if (debugState === Paused) {
     debugButtons.push({
@@ -4048,8 +4338,12 @@ const renderActions = uid => {
     newState
   } = get(uid);
   const {
-    scopeExpanded
+    scopeExpanded,
+    debugState
   } = newState;
+  if (debugState === Unavailable) {
+    return [];
+  }
   if (scopeExpanded) {
     return getRunAndDebugButtonsVirtualDom(newState.debugState);
   }
@@ -4095,7 +4389,8 @@ const renderEventListeners = () => {
     params: ['handleDebugInput', 'event.target.value']
   }, {
     name: HandleClickSectionHeading,
-    params: ['handleClickSectionHeading', 'event.target.dataset.name']
+    params: ['handleClickSectionHeading', 'event.target.dataset.name', 'event.button'],
+    preventDefault: true
   }, {
     name: HandleClickCheckBox,
     params: ['handleClickCheckBox', 'event.target.name']
@@ -4124,6 +4419,14 @@ const renderEventListeners = () => {
   }, {
     name: HandleInputBlur,
     params: ['handleInputBlur']
+  }, {
+    name: HandleSectionHeaderContextMenu,
+    params: ['handleSectionHeaderContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.name'],
+    preventDefault: true
+  }, {
+    name: HandleWatchExpressionContextMenu,
+    params: ['handleWatchExpressionContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.index'],
+    preventDefault: true
   }];
 };
 
@@ -4167,6 +4470,63 @@ const saveState = (uid, reason) => {
   };
 };
 
+const selectIndex = (state, index) => {
+  const {
+    visibleRows
+  } = state;
+  const maxIndex = visibleRows.length - 1;
+  const clampedIndex = Math.max(-1, Math.min(index, maxIndex));
+  return {
+    ...state,
+    selectedIndex: clampedIndex
+  };
+};
+
+const selectNextRow = state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  const maxIndex = visibleRows.length - 1;
+  const newIndex = Math.min(maxIndex, selectedIndex + 1);
+  return {
+    ...state,
+    selectedIndex: newIndex
+  };
+};
+
+const selectPreviousRow = state => {
+  const {
+    selectedIndex
+  } = state;
+  const newIndex = Math.max(-1, selectedIndex - 1);
+  return {
+    ...state,
+    selectedIndex: newIndex
+  };
+};
+
+const showCallStack = state => {
+  return {
+    ...state,
+    callStackVisible: true
+  };
+};
+
+const showScope = state => {
+  return {
+    ...state,
+    scopeVisible: true
+  };
+};
+
+const showWatch = state => {
+  return {
+    ...state,
+    watchVisible: true
+  };
+};
+
 const terminate = () => {
   globalThis.close();
 };
@@ -4177,19 +4537,25 @@ const commandMap = {
   'Debug.resumed': resumed,
   'Debug.scriptParsed': scriptParsed,
   'Initialize.initialize': initialize,
+  'RunAndDebug.acceptWatchExpressionEdit': wrapCommand(acceptWatchExpressionEdit),
+  'RunAndDebug.addWatchExpression': wrapCommand(addWatchExpression$1),
+  'RunAndDebug.cancelWatchExpressionEdit': wrapCommand(cancelWatchExpressionEdit),
   'RunAndDebug.create': create,
+  'RunAndDebug.deleteWatchExpression': deleteWatchExpression$1,
+  'RunAndDebug.deleteAllWatchExpressions': deleteAllWatchExpressions$1,
   'RunAndDebug.diff2': diff2,
   'RunAndDebug.dispose': dispose,
-  'RunAndDebug.restoreState': restoreState,
   'RunAndDebug.focusNext': wrapCommand(focusNext),
   'RunAndDebug.focusPrevious': wrapCommand(focusPrevious),
   'RunAndDebug.getCommandIds': getCommandIds,
   'RunAndDebug.getHighlight': getHighlight,
   'RunAndDebug.getKeyBindings': getKeyBindings,
+  'RunAndDebug.getMenuEntries': getMenuEntries,
   'RunAndDebug.handleArrowDown': wrapCommand(handleArrowDown),
   'RunAndDebug.handleArrowLeft': wrapCommand(handleArrowLeft),
   'RunAndDebug.handleArrowRight': wrapCommand(handleArrowRight),
   'RunAndDebug.handleArrowUp': wrapCommand(handleArrowUp),
+  'RunAndDebug.handleChange': wrapCommand(handleChange),
   'RunAndDebug.handleClickCallStackItem': wrapCommand(handleClickCallstackItem),
   'RunAndDebug.handleClickCheckBox': wrapCommand(handleClickCheckBox),
   'RunAndDebug.handleClickDebugButton': wrapCommand(handleClickDebugButton),
@@ -4201,42 +4567,50 @@ const commandMap = {
   'RunAndDebug.handleClickSectionCallstack': wrapCommand(handleClickSectionCallstack),
   'RunAndDebug.handleClickSectionHeading': wrapCommand(handleClickSectionHeading),
   'RunAndDebug.handleClickSectionScope': wrapCommand(handleClickSectionScope),
+  'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
   'RunAndDebug.handleClickWatchExpression': wrapCommand(handleClickWatchExpression),
-  'RunAndDebug.handleWatchExpressionDoubleClick': wrapCommand(handleWatchExpressionDoubleClick),
   'RunAndDebug.handleClickWatchExpressionDelete': wrapCommand(handleClickWatchExpressionDelete),
-  'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
   'RunAndDebug.handleDebugInput': wrapCommand(handleDebugInput),
   'RunAndDebug.handleEvaluate': wrapCommand(handleEvaluate),
-  'RunAndDebug.handleWatchValueChange': wrapCommand(handleWatchValueChange),
+  'RunAndDebug.handleInputBlur': wrapCommand(handleInputBlur),
+  'RunAndDebug.handleInputFieldChange': wrapCommand(handleInputFieldChange),
   // eslint-disable-next-line  @typescript-eslint/no-deprecated
   'RunAndDebug.handlePaused': wrapCommand(handlePaused),
-  'RunAndDebug.addWatchExpression': wrapCommand(addWatchExpression),
-  'RunAndDebug.cancelWatchExpressionEdit': wrapCommand(cancelWatchExpressionEdit),
-  'RunAndDebug.acceptWatchExpressionEdit': wrapCommand(acceptWatchExpressionEdit),
-  'RunAndDebug.handleChange': wrapCommand(handleChange),
-  'RunAndDebug.handleInputFieldChange': wrapCommand(handleInputFieldChange),
-  'RunAndDebug.handleInputBlur': wrapCommand(handleInputBlur),
   'RunAndDebug.handleResumed': wrapCommand(handleResumed),
   'RunAndDebug.handleScriptParsed': wrapCommand(handleScriptParsed),
+  'RunAndDebug.handleSectionHeaderContextMenu': wrapCommand(handleSectionHeaderContextMenu),
+  'RunAndDebug.handleWatchExpressionContextMenu': wrapCommand(handleWatchExpressionContextMenu),
+  'RunAndDebug.handleWatchExpressionDoubleClick': wrapCommand(handleWatchExpressionDoubleClick),
+  'RunAndDebug.handleWatchValueChange': wrapCommand(handleWatchValueChange),
   'RunAndDebug.loadContent': wrapCommand(loadContent),
   'RunAndDebug.loadContentLater': wrapCommand(loadContentLater),
   'RunAndDebug.pause': wrapCommand(pause),
   'RunAndDebug.readFile': readFile,
   'RunAndDebug.refresh': wrapCommand(refresh),
+  'RunAndDebug.refreshWatchExpression': wrapCommand(refreshWatchExpression),
   'RunAndDebug.removeWatchExpression': removeWatchExpression,
-  'RunAndDebug.deleteWatchExpression': deleteWatchExpression$1,
   'RunAndDebug.render2': render2,
   'RunAndDebug.renderActions': renderActions,
   'RunAndDebug.renderEventListeners': renderEventListeners,
   'RunAndDebug.resize': wrapCommand(resize),
+  'RunAndDebug.restoreState': restoreState,
   'RunAndDebug.resume': wrapCommand(resume),
   'RunAndDebug.saveState': saveState,
+  'RunAndDebug.selectIndex': wrapCommand(selectIndex),
+  'RunAndDebug.selectNextRow': wrapCommand(selectNextRow),
+  'RunAndDebug.selectPreviousRow': wrapCommand(selectPreviousRow),
   'RunAndDebug.setPauseOnExceptions': wrapCommand(setPauseOnExceptions),
   'RunAndDebug.stepInto': wrapCommand(stepInto),
   'RunAndDebug.stepOut': wrapCommand(stepOut),
   'RunAndDebug.stepOver': wrapCommand(stepOver),
   'RunAndDebug.terminate': terminate,
-  'RunAndDebug.togglePause': wrapCommand(togglePause)
+  'RunAndDebug.togglePause': wrapCommand(togglePause),
+  'RunAndDebug.showWatch': wrapCommand(showWatch),
+  'RunAndDebug.hideWatch': wrapCommand(hideWatch),
+  'RunAndDebug.showScope': wrapCommand(showScope),
+  'RunAndDebug.hideScope': wrapCommand(hideScope),
+  'RunAndDebug.showCallStack': wrapCommand(showCallStack),
+  'RunAndDebug.hideCallStack': wrapCommand(hideCallStack)
 };
 
 const listen = async () => {