@lvce-editor/static-server 0.53.6 → 0.53.8

package/static/{f429d0a → ac6286f}/packages/debug-worker/dist/debugWorkerMain.js

@@ -1000,7 +1000,7 @@ const Default = 2;
 const Unavailable = 3;
 
 const rpcs = Object.create(null);
-const set$d = (id, rpc) => {
+const set$f = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$1 = id => {
@@ -1024,7 +1024,7 @@ const create$2 = rpcId => {
       return rpc.invokeAndTransfer(method, ...params);
     },
     set(rpc) {
-      set$d(rpcId, rpc);
+      set$f(rpcId, rpc);
     },
     async dispose() {
       const rpc = get$1(rpcId);
@@ -1040,28 +1040,25 @@ const RpcId = {
   __proto__: null,
   DebugWorker: DebugWorker$1};
 const {
-  invoke: invoke$b,
-  set: set$b
-} = create$2(EditorWorker$1);
+  invoke: invoke$c,
+  set: set$c} = create$2(EditorWorker$1);
 const EditorWorker = {
   __proto__: null,
-  invoke: invoke$b,
-  set: set$b
+  invoke: invoke$c,
+  set: set$c
 };
 const {
-  invoke: invoke$8,
-  set: set$8
-} = create$2(ExtensionHostWorker);
+  invoke: invoke$9,
+  set: set$9} = create$2(ExtensionHostWorker);
 const ExtensionHost = {
   __proto__: null,
-  invoke: invoke$8,
-  set: set$8
+  invoke: invoke$9,
+  set: set$9
 };
 const {
   invoke: invoke$3,
   invokeAndTransfer: invokeAndTransfer$3,
-  set: set$3$1
-} = create$2(RendererWorker$1);
+  set: set$3$1} = create$2(RendererWorker$1);
 const RendererWorker = {
   __proto__: null,
   invoke: invoke$3,
@@ -1081,8 +1078,7 @@ const activateByEvent = event => {
 
 const {
   invoke: invoke$1,
-  set: set$2
-} = ExtensionHost;
+  set: set$2} = ExtensionHost;
 
 const executeProvider = async ({
   event,
@@ -1193,8 +1189,7 @@ const getScripts = debugId => {
 
 const {
   invoke,
-  set: set$1
-} = EditorWorker;
+  set: set$1} = EditorWorker;
 
 const getDebugUri = (key, scriptId) => {
   const uri = `debug:///${key}/${scriptId}`;
@@ -1413,444 +1408,106 @@ const getNewWatchExpressionsAccept = async (debugId, callFrameId, debugState, wa
   return newWatchExpressions2;
 };
 
-const acceptWatchExpressionEdit = async state => {
-  const {
-    watchExpressions,
-    editingValue,
-    debugId,
-    debugState,
-    callFrameId
-  } = state;
-  const newWatchExpressions = await getNewWatchExpressionsAccept(debugId, callFrameId, debugState, watchExpressions, editingValue);
-  return {
-    ...state,
-    watchExpressions: newWatchExpressions,
-    focus: 0,
-    editingValue: '',
-    editingselectionstart: 0,
-    editingselectionend: 0
-  };
-};
-
-const FocusDebugWatchInput = 1290;
-const FocusDebugRow = 1299;
-
-const addWatchExpression$1 = async (state, expression) => {
-  const {
-    watchExpressions
-  } = state;
-  const watchExpression = {
-    expression,
-    value: null,
-    isEditing: true
-  };
-  const newWatchExpressions1 = [...watchExpressions, watchExpression];
-  return {
-    ...state,
-    watchExpressions: newWatchExpressions1,
-    focus: FocusDebugWatchInput,
-    editingselectionstart: 0,
-    editingselectionend: expression.length
-  };
-};
+const SectionHeading = 1;
+const Value = 2;
+const Exception$2 = 3;
+const Scope$4 = 4;
+const Property$1 = 5;
+const Message = 6;
+const CallStack$3 = 7;
+const CheckBox$1 = 8;
+const WatchMessage = 9;
+const WatchExpression = 10;
+const InputField = 11;
 
-const getNewWatchExpressionsCancel = watchExpressions => {
-  const lastExpression = watchExpressions[watchExpressions.length - 1];
-  if (lastExpression && lastExpression.expression === '') {
-    return watchExpressions.toSpliced(-1, 1);
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
   }
-  return watchExpressions;
-};
-
-const cancelWatchExpressionEdit = state => {
-  const {
-    watchExpressions
-  } = state;
-  const newWatchExpressions = getNewWatchExpressionsCancel(watchExpressions);
-  return {
-    ...state,
-    watchExpressions: newWatchExpressions,
-    focus: 0,
-    editingselectionstart: 0,
-    editingselectionend: 0
+  const replacer = (match, rest) => {
+    return placeholders[rest];
   };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const None$5 = 'none';
-const Exception$2 = 'exception';
-const Other = 'other';
-
-const All = 1;
-const Uncaught = 2;
-const None$4 = 0;
-
-const None$3 = 'none';
+const Block$1 = 'Block';
+const BreakPoints$2 = 'BreakPoints';
+const CallStack$2 = 'Call Stack';
+const Catch$1 = '`Catch` block';
+const Closure$1 = 'Closure';
+const DebuggerPaused = 'Debugger paused';
+const DebuggerPausedOnException = 'Paused on exception';
+const Eval$1 = 'Eval';
+const Expression = 'Expression';
+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';
+const Resume = 'Resume';
+const Scope$3 = 'Scope';
+const Script$2 = 'Script';
+const StepInto = 'Step Into';
+const StepOut = 'Step Out';
+const StepOver = 'Step Over';
+const Stop = 'Stop';
+const Watch$2 = 'Watch';
+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$2 = 'Delete Watch Expression';
+const DeleteAllWatchExpressions = 'Delete All Watch Expressions';
+const AddWatchExpression$1 = 'Add Watch Expression';
 
-const create = (id, uri, x, y, width, height) => {
-  const state = {
-    id,
-    disposed: false,
-    processes: [],
-    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$5,
-    pausedMessage: '',
-    debugInputValue: '',
-    debugOutputValue: '',
-    callFrameId: '',
-    expandedIds: [],
-    scopeFocusedIndex: -1,
-    focusedIndex: -1,
-    pauseOnExceptionState: None$3,
-    cache: Object.create(null),
-    // TODO maybe store cache in extension host worker
-    exceptionBreakPoints: None$4,
-    watchExpressions: [],
-    focus: 0,
-    editingValue: '',
-    debugId: 0,
-    inputSource: 0,
-    editingselectionstart: 0,
-    editingselectionend: 0,
-    openFilesOnPause: true,
-    maxDescriptionLength: 100,
-    selectedIndex: -1,
-    visibleRows: []
-  };
-  set(id, state, state);
+const local = () => {
+  return i18nString(Local$1);
 };
-
-const deleteAllWatchExpressions$1 = state => {
-  return {
-    ...state,
-    watchExpressions: []
-  };
+const namedClosure = name => {
+  return i18nString(NamedClosure, {
+    PH1: name
+  });
 };
-
-const deleteWatchExpression$1 = (state, index) => {
-  if (index < 0 || index >= state.watchExpressions.length) {
-    return state;
-  }
-  return {
-    ...state,
-    watchExpressions: state.watchExpressions.toSpliced(index, 1)
-  };
+const closure = () => {
+  return i18nString(Closure$1);
 };
-
-const isEqual$5 = (oldState, newState) => {
-  return oldState.focus === newState.focus;
+const global = () => {
+  return i18nString(Global$1);
 };
-
-const isEqual$4 = (oldState, newState) => {
-  if (!newState.focus) {
-    return true;
-  }
-  return oldState.focus === newState.focus;
+const block = () => {
+  return i18nString(Block$1);
 };
-
-const RenderItems = 1;
-const RenderFocus = 2;
-const RenderValue = 3;
-const RenderFocusContext = 7;
-const RenderSelection = 8;
-const RenderPauseOnExceptions = 9;
-
-const diffType$1 = RenderItems;
-const isEqual$3 = (oldState, newState) => {
-  return oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.callFrameId === newState.callFrameId && oldState.callStackExpanded === newState.callStackExpanded && oldState.debugState === newState.debugState && oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.selectedIndex === newState.selectedIndex && oldState.visibleRows === newState.visibleRows && oldState.watchExpanded === newState.watchExpanded && oldState.watchExpressions === newState.watchExpressions;
+const expression = () => {
+  return i18nString(Expression);
 };
-
-const diffType = RenderPauseOnExceptions;
-const isEqual$2 = (oldState, newState) => {
-  return oldState.exceptionBreakPoints === newState.exceptionBreakPoints;
+const module2 = () => {
+  return i18nString(Module$1);
 };
-
-const isEqual$1 = (oldState, newState) => {
-  return oldState.editingselectionstart === newState.editingselectionstart && oldState.editingselectionend === newState.editingselectionend;
+const evalScope = () => {
+  return i18nString(Eval$1);
 };
-
-const Script$2 = 2;
-
-const isEqual = (oldState, newState) => {
-  if (newState.inputSource === Script$2) {
-    return newState.editingValue.length === 0;
-  }
-  return true;
+const script = () => {
+  return i18nString(Script$2);
 };
-
-const modules = [isEqual$3, isEqual$4, isEqual, isEqual$5, isEqual$1, isEqual$2];
-const numbers = [diffType$1, RenderFocusContext, RenderValue, RenderFocus, RenderSelection, diffType];
-
-const diff = (oldState, newState) => {
-  const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
-    if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
-    }
-  }
-  return diffResult;
+const withScope = () => {
+  return i18nString(With$1);
 };
-
-const diff2 = uid => {
-  const {
-    oldState,
-    newState
-  } = get(uid);
-  const diffResult = diff(oldState, newState);
-  return diffResult;
+const catchScope = () => {
+  return i18nString(Catch$1);
 };
-
-const dispose = async uid => {
-  dispose$1(uid);
+const debuggerPaused = () => {
+  return i18nString(DebuggerPaused);
 };
-
-const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'deleteAllWatchExpressions', 'deleteWatchExpression', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleEnter', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleSpace', 'handleWatchExpressionContextMenu', 'handleWatchExpressionDoubleClick', 'handleWatchValueChange', 'hideCallStack', 'hideScope', 'hideWatch', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'showCallStack', 'showScope', 'showWatch', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
-
-const getCommandIds = () => {
-  return commandIds;
+const debuggerPausedOnException = () => {
+  return i18nString(DebuggerPausedOnException);
 };
-
-const emptyHighlight = {
-  uri: '',
-  rowIndex: 0,
-  columnIndex: 0
-};
-const getHighlight = uid => {
-  const state = get(uid);
-  if (!state) {
-    return emptyHighlight;
-  }
-  const {
-    newState
-  } = state;
-  const {
-    parsedScripts,
-    callStack
-  } = newState;
-  if (callStack.length === 0) {
-    return emptyHighlight;
-  }
-  const top = callStack[0];
-  const {
-    location
-  } = top;
-  const {
-    scriptId,
-    lineNumber,
-    columnNumber
-  } = location;
-  const script = parsedScripts[scriptId];
-  if (!script) {
-    return emptyHighlight;
-  }
-  return {
-    uri: script.url,
-    rowIndex: lineNumber,
-    columnIndex: columnNumber
-  };
-};
-
-const Enter = 3;
-const Escape = 8;
-const Space$1 = 9;
-const End = 255;
-const Home = 12;
-const LeftArrow = 13;
-const UpArrow = 14;
-const RightArrow = 15;
-const DownArrow = 16;
-const Delete = 18;
-const KeyC = 31;
-const KeyV = 50;
-const F2 = 58;
-const Backslash = 91;
-const Star = 131;
-
-const CtrlCmd = 1 << 11 >>> 0;
-const Alt = 1 << 9 >>> 0;
-
-const getKeyBindings = () => {
-  return [{
-    key: Backslash | CtrlCmd,
-    command: 'Run And Debug.togglePause'
-  }, {
-    key: LeftArrow,
-    command: 'Run And Debug.handleArrowLeft',
-    when: FocusDebugRow
-  }, {
-    key: RightArrow,
-    command: 'Run And Debug.handleArrowRight',
-    when: FocusDebugRow
-  }, {
-    key: Home,
-    command: 'Run And Debug.focusFirst',
-    when: FocusDebugRow
-  }, {
-    key: End,
-    command: 'Run And Debug.focusLast',
-    when: FocusDebugRow
-  }, {
-    key: UpArrow,
-    command: 'Run And Debug.selectPreviousRow',
-    when: FocusDebugRow
-  }, {
-    key: DownArrow,
-    command: 'Run And Debug.selectNextRow',
-    when: FocusDebugRow
-  }, {
-    key: CtrlCmd | Star,
-    command: 'Run And Debug.expandAll',
-    when: FocusDebugRow
-  }, {
-    key: Alt | RightArrow,
-    command: 'Run And Debug.expandRecursively',
-    when: FocusDebugRow
-  }, {
-    key: CtrlCmd | LeftArrow,
-    command: 'Run And Debug.collapseAll',
-    when: FocusDebugRow
-  }, {
-    key: CtrlCmd | KeyV,
-    command: 'Run And Debug.handlePaste',
-    when: FocusDebugRow
-  }, {
-    key: CtrlCmd | KeyC,
-    command: 'Run And Debug.handleCopy',
-    when: FocusDebugRow
-  }, {
-    key: F2,
-    command: 'Run And Debug.rename',
-    when: FocusDebugRow
-  }, {
-    key: Delete,
-    command: 'Run And Debug.removeDirent',
-    when: FocusDebugRow
-  }, {
-    key: Escape,
-    command: 'Run And Debug.focusNone',
-    when: FocusDebugRow
-  }, {
-    key: Enter,
-    command: 'Run And Debug.handleClickCurrent',
-    when: FocusDebugRow
-  }, {
-    key: Space$1,
-    command: 'Run And Debug.handleSpace',
-    when: FocusDebugRow
-  }, {
-    key: Enter,
-    command: 'Run And Debug.handleEnter',
-    when: FocusDebugRow
-  }, {
-    key: Escape,
-    command: 'Run And Debug.cancelWatchExpressionEdit',
-    when: FocusDebugWatchInput
-  }, {
-    key: Enter,
-    command: 'Run And Debug.acceptWatchExpressionEdit',
-    when: FocusDebugWatchInput
-  }];
-};
-
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
-};
-
-const Block$1 = 'Block';
-const BreakPoints$2 = 'BreakPoints';
-const CallStack$3 = 'Call Stack';
-const Catch$1 = '`Catch` block';
-const Closure$1 = 'Closure';
-const DebuggerPaused = 'Debugger paused';
-const DebuggerPausedOnException = 'Paused on exception';
-const Eval$1 = 'Eval';
-const Expression = 'Expression';
-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';
-const Resume = 'Resume';
-const Scope$4 = 'Scope';
-const Script$1 = 'Script';
-const StepInto = 'Step Into';
-const StepOut = 'Step Out';
-const StepOver = 'Step Over';
-const Stop = 'Stop';
-const Watch$2 = 'Watch';
-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$2 = 'Delete Watch Expression';
-const DeleteAllWatchExpressions = 'Delete All Watch Expressions';
-const AddWatchExpression$1 = 'Add Watch Expression';
-
-const local = () => {
-  return i18nString(Local$1);
-};
-const namedClosure = name => {
-  return i18nString(NamedClosure, {
-    PH1: name
-  });
-};
-const closure = () => {
-  return i18nString(Closure$1);
-};
-const global = () => {
-  return i18nString(Global$1);
-};
-const block = () => {
-  return i18nString(Block$1);
-};
-const expression = () => {
-  return i18nString(Expression);
-};
-const module2 = () => {
-  return i18nString(Module$1);
-};
-const evalScope = () => {
-  return i18nString(Eval$1);
-};
-const script = () => {
-  return i18nString(Script$1);
-};
-const withScope = () => {
-  return i18nString(With$1);
-};
-const catchScope = () => {
-  return i18nString(Catch$1);
-};
-const debuggerPaused = () => {
-  return i18nString(DebuggerPaused);
-};
-const debuggerPausedOnException = () => {
-  return i18nString(DebuggerPausedOnException);
-};
-const stepInto$1 = () => {
-  return i18nString(StepInto);
+const stepInto$1 = () => {
+  return i18nString(StepInto);
 };
 const stepOver$1 = () => {
   return i18nString(StepOver);
@@ -1868,10 +1525,10 @@ const breakPoints = () => {
   return i18nString(BreakPoints$2);
 };
 const scope = () => {
-  return i18nString(Scope$4);
+  return i18nString(Scope$3);
 };
 const callStack = () => {
-  return i18nString(CallStack$3);
+  return i18nString(CallStack$2);
 };
 const notPaused = () => {
   return i18nString(NotPaused);
@@ -1894,65 +1551,19 @@ const pauseOnUncaughtExceptions = () => {
 const noWatchExpression = () => {
   return i18nString(NoWatchExpression);
 };
-const deleteWatchExpression = () => {
+const deleteWatchExpression$1 = () => {
   return i18nString(DeleteWatchExpression$2);
 };
-const deleteAllWatchExpressions = () => {
+const deleteAllWatchExpressions$1 = () => {
   return i18nString(DeleteAllWatchExpressions);
 };
-const addWatchExpression = () => {
+const addWatchExpression$1 = () => {
   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 SectionHeading = 1;
-const Value = 2;
-const Exception$1 = 3;
-const Scope$3 = 4;
-const Property$1 = 5;
-const Message = 6;
-const CallStack$2 = 7;
-const CheckBox$1 = 8;
-const WatchMessage = 9;
-const WatchExpression = 10;
-const InputField = 11;
-
 const Scope$2 = 'Scope';
 const CallStack$1 = 'CallStack';
 const Watch$1 = 'Watch';
@@ -1963,6 +1574,10 @@ const CallStack = 'callstack';
 const Scope$1 = 'scope';
 const Watch = 'watch';
 
+const All = 1;
+const Uncaught = 2;
+const None$5 = 0;
+
 const AddWatchExpression = 'AddWatchExpression';
 const WatchExpressionInput = 'WatchExpressionInput';
 const DebugPause$1 = 'DebugPause';
@@ -2088,7 +1703,7 @@ const getRunAndDebugVisibleRowsCallStack = state => {
         const description = formatLocation(script.url, lineNumber);
         const hasArrow = item === callStack$1[0];
         rows.push({
-          type: CallStack$2,
+          type: CallStack$3,
           text: item.functionName,
           expanded: false,
           key: CallStack,
@@ -2121,37 +1736,219 @@ const getRunAndDebugVisibleRowsCallStack = state => {
 const Scope = 1;
 const This = 2;
 const Property = 3;
-const Exception = 4;
+const Exception$1 = 4;
 
 const getNoopRows = () => {
   return [];
 };
 
-const getScopeExceptionRows = scope => {
-  const {
-    key,
-    value,
-    indent
-  } = scope;
-  return [{
-    type: Exception$1,
-    text: '',
-    expanded: false,
-    key,
-    value,
-    indent,
-    valueType: '',
-    name: '',
-    description: ''
-  }];
-};
-
-const None$1 = 0;
-const Expanded = 1 << 0;
-const Collapsed = 1 << 1;
+const keywords = ['var', 'let', 'const', 'if', 'else', 'for', 'while', 'return', 'class', 'extends', 'new', 'this', 'super', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'finally', 'throw', 'switch', 'case', 'break', 'continue', 'do', 'in', 'of', 'typeof', 'instanceof', 'delete', 'void', 'null', 'undefined', 'true', 'false', 'Infinity', 'NaN'];
+const operators = ['=', '==', '===', '!=', '!==', '<', '<=', '>', '>=', '+', '-', '*', '/', '**', '%', '++', '--', '&&', '||', '!', '&', '|', '^', '~', '<<', '>>', '>>>', '+=', '-=', '*=', '/=', '%=', '**=', '&=', '|=', '^=', '<<=', '>>=', '>>>=', '=>', '?', '?.', '??', '??=', '...'];
+const punctuation = ['(', ')', '[', ']', '{', '}', ';', ',', '`', ':', '.'];
+const isWhitespace = char => /\s/.test(char);
+const isDigit = char => /[0-9]/.test(char);
+const isLetter = char => /[a-zA-Z_]/.test(char);
+const isIdentifierChar = char => isLetter(char) || isDigit(char) || char === '_' || char === '$';
+const readWhitespace = (input, current, tokens) => {
+  let whitespace = '';
+  let pos = current;
+  while (pos < input.length && isWhitespace(input[pos])) {
+    whitespace += input[pos];
+    pos++;
+  }
+  if (whitespace) {
+    tokens.push(whitespace, 'WhiteSpace');
+  }
+  return pos;
+};
+const readString = (input, current, tokens) => {
+  const quote = input[current];
+  let string = quote;
+  let pos = current + 1;
+  while (pos < input.length && input[pos] !== quote) {
+    if (input[pos] === '\\') {
+      string += input[pos];
+      pos++;
+      if (pos < input.length) {
+        string += input[pos];
+        pos++;
+      }
+    } else {
+      string += input[pos];
+      pos++;
+    }
+  }
+  if (pos < input.length) {
+    string += input[pos];
+    pos++;
+  }
+  tokens.push(string, 'String');
+  return pos;
+};
+const readNumber = (input, current, tokens) => {
+  let number = '';
+  let pos = current;
+  if (input[pos] === '0' && pos + 1 < input.length) {
+    const next = input[pos + 1].toLowerCase();
+    if (next === 'x' || next === 'b' || next === 'o') {
+      number += input[pos] + input[pos + 1];
+      pos += 2;
+      while (pos < input.length && /[0-9a-fA-F]/.test(input[pos])) {
+        number += input[pos];
+        pos++;
+      }
+      tokens.push(number, 'Number');
+      return pos;
+    }
+  }
+  while (pos < input.length && isDigit(input[pos])) {
+    number += input[pos];
+    pos++;
+  }
+  if (pos < input.length && input[pos] === '.' && pos + 1 < input.length && isDigit(input[pos + 1])) {
+    number += input[pos];
+    pos++;
+    while (pos < input.length && isDigit(input[pos])) {
+      number += input[pos];
+      pos++;
+    }
+  }
+  if (pos < input.length && (input[pos] === 'e' || input[pos] === 'E')) {
+    number += input[pos];
+    pos++;
+    if (pos < input.length && (input[pos] === '+' || input[pos] === '-')) {
+      number += input[pos];
+      pos++;
+    }
+    while (pos < input.length && isDigit(input[pos])) {
+      number += input[pos];
+      pos++;
+    }
+  }
+  tokens.push(number, 'Number');
+  return pos;
+};
+const readIdentifier = (input, current, tokens) => {
+  let identifier = '';
+  let pos = current;
+  while (pos < input.length && isIdentifierChar(input[pos])) {
+    identifier += input[pos];
+    pos++;
+  }
+  if (identifier === 'function') {
+    tokens.push(identifier, 'Function');
+  } else if (keywords.includes(identifier)) {
+    tokens.push(identifier, 'Keyword');
+  } else {
+    tokens.push(identifier, 'Identifier');
+  }
+  return pos;
+};
+const readOperator = (input, current, tokens) => {
+  let operator = '';
+  let maxLength = 0;
+  let pos = current;
+  for (const op of operators) {
+    if (input.slice(pos, pos + op.length) === op && op.length > maxLength) {
+      maxLength = op.length;
+      operator = op;
+    }
+  }
+  if (operator) {
+    tokens.push(operator, 'Operator');
+    pos += operator.length;
+  } else {
+    tokens.push(input[pos], 'Punctuation');
+    pos++;
+  }
+  return pos;
+};
+const readComment = (input, current, tokens) => {
+  let comment = '';
+  let pos = current;
+  if (input[pos] === '/' && pos + 1 < input.length) {
+    if (input[pos + 1] === '/') {
+      comment = '//';
+      pos += 2;
+      while (pos < input.length && input[pos] !== '\n') {
+        comment += input[pos];
+        pos++;
+      }
+    } else if (input[pos + 1] === '*') {
+      comment = '/*';
+      pos += 2;
+      while (pos < input.length - 1) {
+        comment += input[pos];
+        if (input[pos] === '*' && input[pos + 1] === '/') {
+          comment += '/';
+          pos += 2;
+          break;
+        }
+        pos++;
+      }
+    }
+  }
+  if (comment) {
+    tokens.push(comment, 'Comment');
+  }
+  return pos;
+};
+const tokenizeValue = input => {
+  const tokens = [];
+  let current = 0;
+  while (current < input.length) {
+    const char = input[current];
+    if (isWhitespace(char)) {
+      current = readWhitespace(input, current, tokens);
+    } else if (char === '"' || char === "'" || char === '`') {
+      current = readString(input, current, tokens);
+    } else if (isDigit(char)) {
+      current = readNumber(input, current, tokens);
+    } else if (isLetter(char) || char === '_' || char === '$') {
+      current = readIdentifier(input, current, tokens);
+    } else if (char === '/' && current + 1 < input.length && (input[current + 1] === '/' || input[current + 1] === '*')) {
+      current = readComment(input, current, tokens);
+    } else if (operators.includes(char) || current + 1 < input.length && operators.includes(char + input[current + 1]) || current + 2 < input.length && operators.includes(char + input[current + 1] + input[current + 2])) {
+      current = readOperator(input, current, tokens);
+    } else if (punctuation.includes(char)) {
+      tokens.push(char, 'Punctuation');
+      current++;
+    } else {
+      tokens.push(char, 'Punctuation');
+      current++;
+    }
+  }
+  return tokens;
+};
+
+const getScopeExceptionRows = (scope, index) => {
+  const {
+    key,
+    value,
+    indent
+  } = scope;
+  const tokens = tokenizeValue(value);
+  return [{
+    type: Exception$2,
+    text: '',
+    tokens,
+    expanded: false,
+    key,
+    value,
+    indent,
+    valueType: '',
+    name: '',
+    description: '',
+    index
+  }];
+};
+
+const None$4 = 0;
+const Expanded = 1 << 0;
+const Collapsed = 1 << 1;
 const Focused = 1 << 2;
 
-const getScopePropertyRows = scope => {
+const getScopePropertyRows = (scope, index) => {
   const {
     indent,
     key,
@@ -2159,26 +1956,29 @@ const getScopePropertyRows = scope => {
     valueType,
     flags
   } = scope;
+  const tokens = tokenizeValue(value);
   return [{
     type: Property$1,
     text: '',
+    tokens,
     expanded: Boolean(flags & Expanded),
     key,
     value,
     indent,
     valueType,
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
-const getScopeScopeRows = scope => {
+const getScopeScopeRows = (scope, index) => {
   const {
     key,
     flags
   } = scope;
   return [{
-    type: Scope$3,
+    type: Scope$4,
     text: '',
     expanded: Boolean(flags & Expanded),
     key,
@@ -2186,27 +1986,31 @@ const getScopeScopeRows = scope => {
     indent: 0,
     valueType: '',
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
-const getScopeThisRows = scope => {
+const getScopeThisRows = (scope, index) => {
   const {
     indent,
     key,
     value,
     valueType
   } = scope;
+  const tokens = tokenizeValue(value);
   return [{
     type: Value,
     text: '',
+    tokens,
     expanded: false,
     key,
     value,
     indent,
     valueType,
     name: '',
-    description: ''
+    description: '',
+    index
   }];
 };
 
@@ -2214,7 +2018,7 @@ const getScopeRenderer = type => {
   switch (type) {
     case This:
       return getScopeThisRows;
-    case Exception:
+    case Exception$1:
       return getScopeExceptionRows;
     case Scope:
       return getScopeScopeRows;
@@ -2232,7 +2036,7 @@ const getExpandable = valueType => {
   return false;
 };
 const getFlags = (isExpanded, isExpandable, isFocused) => {
-  let flags = None$1;
+  let flags = None$4;
   if (isExpanded) {
     flags |= Expanded;
   } else if (isExpandable) {
@@ -2290,7 +2094,8 @@ const getRunAndDebugVisibleRowsScope = state => {
       const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
       for (const scope of visible) {
         const renderer = getScopeRenderer(scope.type);
-        rows.push(...renderer(scope));
+        const index = visible.indexOf(scope);
+        rows.push(...renderer(scope, index));
       }
     } else {
       rows.push({
@@ -2435,11 +2240,6 @@ const getRunAndDebugVisibleRows = state => {
   return [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
 };
 
-const getSectionIndex = (state, name) => {
-  const rows = getRunAndDebugVisibleRows(state);
-  return rows.findIndex(row => row.type === SectionHeading && row.name === name);
-};
-
 const updateVisibleRows = state => {
   const visibleRows = getRunAndDebugVisibleRows(state);
   return {
@@ -2448,178 +2248,629 @@ const updateVisibleRows = state => {
   };
 };
 
-const handleClickSectionBreakPoints = state => {
+const FocusDebugWatchInput = 1290;
+const FocusDebugRow = 1299;
+
+const acceptWatchExpressionEdit = async state => {
   const {
-    breakPointsExpanded
+    watchExpressions,
+    editingValue,
+    debugId,
+    debugState,
+    callFrameId
   } = state;
+  const newWatchExpressions = await getNewWatchExpressionsAccept(debugId, callFrameId, debugState, watchExpressions, editingValue);
+  if (watchExpressions === newWatchExpressions) {
+    return state;
+  }
   const newState = {
     ...state,
-    breakPointsExpanded: !breakPointsExpanded,
-    selectedIndex: getSectionIndex(state, BreakPoints$1),
-    focus: FocusDebugRow
+    watchExpressions: newWatchExpressions,
+    focus: FocusDebugRow,
+    editingValue: '',
+    editingselectionstart: 0,
+    editingselectionend: 0
   };
   return updateVisibleRows(newState);
 };
 
-const handleClickSectionCallstack = state => {
+const addWatchExpression = async (state, expression = '') => {
   const {
-    callStackExpanded
+    watchExpressions
   } = state;
+  const watchExpression = {
+    expression,
+    value: null,
+    isEditing: true
+  };
+  const newWatchExpressions1 = [...watchExpressions, watchExpression];
   const newState = {
     ...state,
-    callStackExpanded: !callStackExpanded,
-    selectedIndex: getSectionIndex(state, CallStack$1),
-    focus: FocusDebugRow
+    watchExpressions: newWatchExpressions1,
+    focus: FocusDebugWatchInput,
+    editingselectionstart: 0,
+    editingselectionend: expression.length
   };
   return updateVisibleRows(newState);
 };
 
-const handleClickSectionScope = state => {
+const getNewWatchExpressionsCancel = watchExpressions => {
+  const lastExpression = watchExpressions.at(-1);
+  if (lastExpression && lastExpression.expression === '') {
+    return watchExpressions.toSpliced(-1, 1);
+  }
+  if (lastExpression && lastExpression.isEditing) {
+    return watchExpressions.toSpliced(-1, 1);
+  }
+  return watchExpressions;
+};
+
+const cancelWatchExpressionEdit = state => {
   const {
-    scopeExpanded
+    watchExpressions
   } = state;
+  const newWatchExpressions = getNewWatchExpressionsCancel(watchExpressions);
   const newState = {
     ...state,
-    scopeExpanded: !scopeExpanded,
-    selectedIndex: getSectionIndex(state, Scope$2),
-    focus: FocusDebugRow
+    watchExpressions: newWatchExpressions,
+    focus: FocusDebugRow,
+    editingselectionstart: 0,
+    editingselectionend: 0,
+    editingValue: ''
   };
   return updateVisibleRows(newState);
 };
 
-const handleClickSectionUnkown = state => {
-  // For unknown section IDs, return the state unchanged
-  return state;
+const None$3 = 'none';
+const Exception = 'exception';
+const Other = 'other';
+
+const None$2 = 'none';
+
+const create = (id, uri, x, y, width, height) => {
+  const state = {
+    id,
+    disposed: false,
+    processes: [],
+    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$3,
+    pausedMessage: '',
+    debugInputValue: '',
+    debugOutputValue: '',
+    callFrameId: '',
+    expandedIds: [],
+    scopeFocusedIndex: -1,
+    focusedIndex: -1,
+    pauseOnExceptionState: None$2,
+    cache: Object.create(null),
+    // TODO maybe store cache in extension host worker
+    exceptionBreakPoints: None$5,
+    watchExpressions: [],
+    focus: 0,
+    editingValue: '',
+    debugId: 0,
+    inputSource: 0,
+    editingselectionstart: 0,
+    editingselectionend: 0,
+    openFilesOnPause: true,
+    maxDescriptionLength: 100,
+    selectedIndex: -1,
+    visibleRows: [],
+    tokenColoringEnabled: false
+  };
+  set(id, state, state);
 };
 
-const handleClickSectionWatch = state => {
+const deleteAllWatchExpressions = state => {
+  return {
+    ...state,
+    watchExpressions: []
+  };
+};
+
+const deleteWatchExpression = (state, index) => {
   const {
-    watchExpanded
+    watchExpressions
   } = state;
+  if (index < 0 || index >= watchExpressions.length) {
+    return state;
+  }
   const newState = {
     ...state,
-    watchExpanded: !watchExpanded,
-    selectedIndex: getSectionIndex(state, Watch$1),
-    focus: FocusDebugRow
+    watchExpressions: watchExpressions.toSpliced(index, 1)
   };
   return updateVisibleRows(newState);
 };
 
-const getSectionClickHandler = id => {
-  switch (id) {
-    case Watch:
-      return handleClickSectionWatch;
-    case BreakPoints:
-      return handleClickSectionBreakPoints;
-    case Scope$1:
-      return handleClickSectionScope;
-    case CallStack:
-      return handleClickSectionCallstack;
-    default:
-      return handleClickSectionUnkown;
-  }
+const isEqual$5 = (oldState, newState) => {
+  return oldState.focus === newState.focus;
 };
 
-const handleArrowLeft = async state => {
-  const {
-    selectedIndex
-  } = state;
-  const rows = getRunAndDebugVisibleRows(state);
-  const row = rows[selectedIndex];
-  if (row && row.type === SectionHeading && row.expanded) {
-    const clickHandler = getSectionClickHandler(row.key);
-    return clickHandler(state);
+const isEqual$4 = (oldState, newState) => {
+  if (!newState.focus) {
+    return true;
   }
-  return state;
+  return oldState.focus === newState.focus;
 };
 
-const handleArrowRight = async state => {
-  const {
-    selectedIndex
-  } = state;
-  const rows = getRunAndDebugVisibleRows(state);
-  const row = rows[selectedIndex];
-  if (row && row.type === SectionHeading && !row.expanded) {
-    const clickHandler = getSectionClickHandler(row.key);
-    return clickHandler(state);
-  }
-  return state;
+const RenderItems = 1;
+const RenderFocus = 2;
+const RenderValue = 3;
+const RenderFocusContext = 7;
+const RenderSelection = 8;
+const RenderPauseOnExceptions = 9;
+
+const diffType$1 = RenderItems;
+const isEqual$3 = (oldState, newState) => {
+  return oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.callFrameId === newState.callFrameId && oldState.callStackExpanded === newState.callStackExpanded && oldState.debugState === newState.debugState && oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.selectedIndex === newState.selectedIndex && oldState.visibleRows === newState.visibleRows && oldState.watchExpanded === newState.watchExpanded && oldState.watchExpressions === newState.watchExpressions;
 };
 
-const createScriptMap = scripts => {
-  const parsedScripts = Object.create(null);
-  for (const script of scripts) {
-    parsedScripts[script.scriptId] = script;
-  }
-  return parsedScripts;
+const diffType = RenderPauseOnExceptions;
+const isEqual$2 = (oldState, newState) => {
+  return oldState.exceptionBreakPoints === newState.exceptionBreakPoints;
 };
 
-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 isEqual$1 = (oldState, newState) => {
+  return oldState.editingselectionstart === newState.editingselectionstart && oldState.editingselectionend === newState.editingselectionend;
 };
 
-const getDebugPausedMessage = reason => {
-  switch (reason) {
-    case Other:
-      return debuggerPaused();
-    case Exception$2:
-      return debuggerPausedOnException();
+const Script$1 = 2;
+
+const isEqual = (oldState, newState) => {
+  if (newState.inputSource === Script$1) {
+    return newState.editingValue.length === 0;
+  }
+  return true;
+};
+
+const modules = [isEqual$3, isEqual$4, isEqual, isEqual$5, isEqual$1, isEqual$2];
+const numbers = [diffType$1, RenderFocusContext, RenderValue, RenderFocus, RenderSelection, diffType];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
+const diff2 = uid => {
+  const {
+    oldState,
+    newState
+  } = get(uid);
+  const diffResult = diff(oldState, newState);
+  return diffResult;
+};
+
+const dispose = async uid => {
+  dispose$1(uid);
+};
+
+const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'deleteAllWatchExpressions', 'deleteWatchExpression', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleClickWatchExpressionDelete', 'handleCopy', 'handleDebugInput', 'handleDelete', 'handleEnter', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handleNew', 'handlePaused', 'handleRename', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleSpace', 'handleWatchExpressionContextMenu', 'handleWatchExpressionDoubleClick', 'handleWatchValueChange', 'hideCallStack', 'hideScope', 'hideWatch', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectFirstIndex', 'selectIndex', 'selectLastIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'showCallStack', 'showScope', 'showWatch', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
+
+const getCommandIds = () => {
+  return commandIds;
+};
+
+const emptyHighlight = {
+  uri: '',
+  rowIndex: 0,
+  columnIndex: 0
+};
+const getHighlight = uid => {
+  const state = get(uid);
+  if (!state) {
+    return emptyHighlight;
+  }
+  const {
+    newState
+  } = state;
+  const {
+    parsedScripts,
+    callStack
+  } = newState;
+  if (callStack.length === 0) {
+    return emptyHighlight;
+  }
+  const top = callStack[0];
+  const {
+    location
+  } = top;
+  const {
+    scriptId,
+    lineNumber,
+    columnNumber
+  } = location;
+  const script = parsedScripts[scriptId];
+  if (!script) {
+    return emptyHighlight;
+  }
+  return {
+    uri: script.url,
+    rowIndex: lineNumber,
+    columnIndex: columnNumber
+  };
+};
+
+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 Enter = 3;
+const Escape = 8;
+const Space$1 = 9;
+const End = 255;
+const Home = 12;
+const LeftArrow = 13;
+const UpArrow = 14;
+const RightArrow = 15;
+const DownArrow = 16;
+const Delete = 18;
+const KeyC = 31;
+const KeyN = 42;
+const KeyV = 50;
+const F2 = 58;
+const Backslash = 91;
+const Star = 131;
+const KeyCode = {
+  __proto__: null,
+  Backslash,
+  Delete,
+  DownArrow,
+  End,
+  Enter,
+  Escape,
+  F2,
+  Home,
+  KeyC,
+  KeyN,
+  KeyV,
+  LeftArrow,
+  RightArrow,
+  Space: Space$1,
+  Star,
+  UpArrow
+};
+const CtrlCmd = 1 << 11 >>> 0;
+const Alt = 1 << 9 >>> 0;
+const KeyModifier = {
+  __proto__: null,
+  Alt,
+  CtrlCmd};
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text$1 = 12;
+const text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getKeyBindings = () => {
+  return [{
+    key: KeyCode.Backslash | KeyModifier.CtrlCmd,
+    command: 'Run And Debug.togglePause'
+  }, {
+    key: KeyCode.LeftArrow,
+    command: 'Run And Debug.handleArrowLeft',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.RightArrow,
+    command: 'Run And Debug.handleArrowRight',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Home,
+    command: 'Run And Debug.focusFirst',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.End,
+    command: 'Run And Debug.focusLast',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.UpArrow,
+    command: 'Run And Debug.selectPreviousRow',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.DownArrow,
+    command: 'Run And Debug.selectNextRow',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.Star,
+    command: 'Run And Debug.expandAll',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.Alt | KeyCode.RightArrow,
+    command: 'Run And Debug.expandRecursively',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.LeftArrow,
+    command: 'Run And Debug.collapseAll',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.KeyV,
+    command: 'Run And Debug.handlePaste',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.KeyC,
+    command: 'Run And Debug.handleCopy',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.KeyN,
+    command: 'Run And Debug.handleNew',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.F2,
+    command: 'Run And Debug.handleRename',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Delete,
+    command: 'Run And Debug.handleDelete',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Escape,
+    command: 'Run And Debug.focusNone',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Enter,
+    command: 'Run And Debug.handleClickCurrent',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Space,
+    command: 'Run And Debug.handleSpace',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Enter,
+    command: 'Run And Debug.handleEnter',
+    when: FocusDebugRow
+  }, {
+    key: KeyCode.Escape,
+    command: 'Run And Debug.cancelWatchExpressionEdit',
+    when: FocusDebugWatchInput
+  }, {
+    key: KeyCode.Enter,
+    command: 'Run And Debug.acceptWatchExpressionEdit',
+    when: FocusDebugWatchInput
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.Home,
+    command: 'Run And Debug.selectFirstIndex',
+    when: FocusDebugRow
+  }, {
+    key: KeyModifier.CtrlCmd | KeyCode.End,
+    command: 'Run And Debug.selectLastIndex',
+    when: FocusDebugRow
+  }];
+};
+
+const None$1 = 0;
+
+const getMenuEntriesWatchExpression = () => {
+  const addMenuEntry = {
+    id: 'addWatchExpression',
+    label: addWatchExpression$1(),
+    flags: None$1,
+    command: 'RunAndDebug.addWatchExpression'
+  };
+  const deleteMenuEntry = {
+    id: 'deleteWatchExpression',
+    label: deleteWatchExpression$1(),
+    flags: None$1,
+    command: 'RunAndDebug.deleteWatchExpression'
+  };
+  const deleteAllMenuEntry = {
+    id: 'deleteAllWatchExpressions',
+    label: deleteAllWatchExpressions$1(),
+    flags: None$1,
+    command: 'RunAndDebug.deleteAllWatchExpressions'
+  };
+  return [addMenuEntry, deleteMenuEntry, deleteAllMenuEntry];
+};
+
+const DebugWatchExpression = 21_900;
+const DebugWatchSectionHeading = 21_901;
+
+const getMenuEntries = () => {
+  return [{
+    id: DebugWatchExpression,
+    entries: getMenuEntriesWatchExpression()
+  }];
+};
+
+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),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
+};
+
+const handleClickSectionCallstack = state => {
+  const {
+    callStackExpanded
+  } = state;
+  const newState = {
+    ...state,
+    callStackExpanded: !callStackExpanded,
+    selectedIndex: getSectionIndex(state, CallStack$1),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
+};
+
+const handleClickSectionScope = state => {
+  const {
+    scopeExpanded
+  } = state;
+  const newState = {
+    ...state,
+    scopeExpanded: !scopeExpanded,
+    selectedIndex: getSectionIndex(state, Scope$2),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
+};
+
+const handleClickSectionUnkown = state => {
+  // For unknown section IDs, return the state unchanged
+  return state;
+};
+
+const handleClickSectionWatch = state => {
+  const {
+    watchExpanded
+  } = state;
+  const newState = {
+    ...state,
+    watchExpanded: !watchExpanded,
+    selectedIndex: getSectionIndex(state, Watch$1),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
+};
+
+const getSectionClickHandler = id => {
+  switch (id) {
+    case Watch:
+      return handleClickSectionWatch;
+    case BreakPoints:
+      return handleClickSectionBreakPoints;
+    case Scope$1:
+      return handleClickSectionScope;
+    case CallStack:
+      return handleClickSectionCallstack;
     default:
-      return `Debugger paused (${reason})`;
+      return handleClickSectionUnkown;
   }
 };
 
-const NewLine = '\n';
-const Space = ' ';
-
-const Local = 'local';
-const Closure = 'closure';
-const Global = 'global';
-const Catch = 'catch';
-const Eval = 'eval';
-const Block = 'block';
-const Script = 'script';
-const With = 'with';
-const Module = 'module';
-const WasmExpressionStack = 'wasm-expression-stack';
+const removeElement = (array, element) => {
+  const index = array.indexOf(element);
+  if (index === -1) {
+    return array;
+  }
+  return [...array.slice(0, index), ...array.slice(index + 1)];
+};
 
-const getScopeLabel = element => {
-  switch (element.type) {
-    case Local:
-      return local();
-    case Closure:
-      if (element.name) {
-        return namedClosure(element.name);
-      }
-      return closure();
-    case Global:
-      return global();
-    case Block:
-      return block();
-    case WasmExpressionStack:
-      return expression();
-    case Module:
-      return module2();
-    case Eval:
-      return evalScope();
-    case Script:
-      return script();
-    case With:
-      return withScope();
-    case Catch:
-      return catchScope();
-    default:
-      return element.type;
+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 {
+    newScopeChain: scopeChain,
+    newCache: cache
+  };
+};
+
+// 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 {
+    cache
+  } = state;
+  const newExpandedIds = removeElement(expandedIds, element.objectId);
+  const {
+    newScopeChain,
+    newCache
+  } = getCollapsedScopeChain(cache, scopeChain, element, index);
+  const newState = {
+    ...state,
+    expandedIds: newExpandedIds,
+    scopeChain: newScopeChain,
+    scopeFocusedIndex: index,
+    cache: newCache,
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
 };
 
 const Boolean$1 = 'boolean';
@@ -2679,61 +2930,251 @@ const getDebugPropertyValueLabelObject = property => {
   if (property.subtype === 'array') {
     return getDebugPropertyValueLabelArray(property);
   }
-  if (property.preview) {
-    const inner = property.preview.properties.map(getInnerPreview).join(',');
-    if (property.preview.description !== 'Object') {
-      return `${property.preview.description} {${inner}}`;
-    }
-    return `{${inner}}`;
+  if (property.preview) {
+    const inner = property.preview.properties.map(getInnerPreview).join(',');
+    if (property.preview.description !== 'Object') {
+      return `${property.preview.description} {${inner}}`;
+    }
+    return `{${inner}}`;
+  }
+  return property.description;
+};
+
+const getDebugPropertyValueLabelString$1 = property => {
+  return `"${property.value}"`;
+};
+
+const getDebugPropertyValueLabelString = property => {
+  return 'undefined';
+};
+
+const getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
+  if (!property) {
+    return 'n/a';
+  }
+  switch (property.type) {
+    case Number$1:
+    case Symbol:
+    case Function:
+      return getDebugPropertyValueLabelCommon(property, maxDescriptionLength);
+    case Object$1:
+      return getDebugPropertyValueLabelObject(property);
+    case Undefined:
+      return getDebugPropertyValueLabelString();
+    case String$1:
+      return getDebugPropertyValueLabelString$1(property);
+    case Boolean$1:
+      return getDebugPropertyValueLabelBoolean(property);
+    default:
+      return `${JSON.stringify(property)}`;
+  }
+};
+
+const getDebugValueObjectId = child => {
+  return child.object?.objectId || child.value?.objectId || '';
+};
+
+const getDebugValueType = child => {
+  if (!child) {
+    return None;
+  }
+  if (child.value && child.value.type) {
+    return child.value.type;
+  }
+  if (child.get) {
+    return Getter;
+  }
+  return None;
+};
+
+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,
+      key: child.name,
+      value: valueLabel,
+      valueType: getDebugValueType(child),
+      objectId: getDebugValueObjectId(child),
+      indent: indent + 10,
+      label: '',
+      flags: None$4
+    });
+  }
+  return childScopeChain;
+};
+
+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 expandScopeChain = async (state, expandedIds, scopeChain, element, index, debugId) => {
+  const {
+    cache,
+    maxDescriptionLength
+  } = state;
+  const newScopeChain = await getChildScopeChain(cache, index, debugId, scopeChain, maxDescriptionLength);
+  const objectId = scopeChain[index].objectId;
+  const newExpandedIds = [...expandedIds, objectId];
+  const newState = {
+    ...state,
+    scopeChain: newScopeChain,
+    expandedIds: newExpandedIds,
+    scopeFocusedIndex: index,
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
+};
+
+const LeftClick = 0;
+
+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;
+};
+
+// TODO pass index to function instead of text
+const handleClickScopeValue = async (state, text, button) => {
+  // Return state unchanged if not left click
+  if (button !== LeftClick) {
+    return state;
+  }
+  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 handleArrowLeft = async state => {
+  const {
+    selectedIndex
+  } = state;
+  const rows = getRunAndDebugVisibleRows(state);
+  const row = rows[selectedIndex];
+  if (row && row.type === SectionHeading && row.expanded) {
+    const clickHandler = getSectionClickHandler(row.key);
+    return clickHandler(state);
+  }
+  if (row && row.type === Scope$4 && row.expanded) {
+    return await handleClickScopeValue(state, row.key, LeftClick);
+  }
+  return state;
+};
+
+const handleArrowRight = async state => {
+  const {
+    selectedIndex
+  } = state;
+  const rows = getRunAndDebugVisibleRows(state);
+  const row = rows[selectedIndex];
+  if (row && row.type === SectionHeading && !row.expanded) {
+    const clickHandler = getSectionClickHandler(row.key);
+    return clickHandler(state);
+  }
+  if (row && row.type === Scope$4 && !row.expanded) {
+    return await handleClickScopeValue(state, row.key, LeftClick);
   }
-  return property.description;
+  return state;
 };
 
-const getDebugPropertyValueLabelString$1 = property => {
-  return `"${property.value}"`;
+const createScriptMap = scripts => {
+  const parsedScripts = Object.create(null);
+  for (const script of scripts) {
+    parsedScripts[script.scriptId] = script;
+  }
+  return parsedScripts;
 };
 
-const getDebugPropertyValueLabelString = property => {
-  return 'undefined';
+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 getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
-  if (!property) {
-    return 'n/a';
-  }
-  switch (property.type) {
-    case Number$1:
-    case Symbol:
-    case Function:
-      return getDebugPropertyValueLabelCommon(property, maxDescriptionLength);
-    case Object$1:
-      return getDebugPropertyValueLabelObject(property);
-    case Undefined:
-      return getDebugPropertyValueLabelString();
-    case String$1:
-      return getDebugPropertyValueLabelString$1(property);
-    case Boolean$1:
-      return getDebugPropertyValueLabelBoolean(property);
+const getDebugPausedMessage = reason => {
+  switch (reason) {
+    case Other:
+      return debuggerPaused();
+    case Exception:
+      return debuggerPausedOnException();
     default:
-      return `${JSON.stringify(property)}`;
+      return `Debugger paused (${reason})`;
   }
 };
 
-const getDebugValueObjectId = child => {
-  return child.object?.objectId || child.value?.objectId || '';
-};
+const NewLine = '\n';
+const Space = ' ';
 
-const getDebugValueType = child => {
-  if (!child) {
-    return None;
-  }
-  if (child.value && child.value.type) {
-    return child.value.type;
-  }
-  if (child.get) {
-    return Getter;
+const Local = 'local';
+const Closure = 'closure';
+const Global = 'global';
+const Catch = 'catch';
+const Eval = 'eval';
+const Block = 'block';
+const Script = 'script';
+const With = 'with';
+const Module = 'module';
+const WasmExpressionStack = 'wasm-expression-stack';
+
+const getScopeLabel = element => {
+  switch (element.type) {
+    case Local:
+      return local();
+    case Closure:
+      if (element.name) {
+        return namedClosure(element.name);
+      }
+      return closure();
+    case Global:
+      return global();
+    case Block:
+      return block();
+    case WasmExpressionStack:
+      return expression();
+    case Module:
+      return module2();
+    case Eval:
+      return evalScope();
+    case Script:
+      return script();
+    case With:
+      return withScope();
+    case Catch:
+      return catchScope();
+    default:
+      return element.type;
   }
-  return None;
 };
 
 const getDescriptionValueLabel = params => {
@@ -2757,10 +3198,10 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties, descript
     });
     // if(params.reason)
     if (scope.type === Local) {
-      if (params.reason === Exception$2) {
+      if (params.reason === Exception) {
         const value = getDescriptionValueLabel(params);
         elements.push({
-          type: Exception,
+          type: Exception$1,
           key: 'Exception',
           value,
           valueType: '',
@@ -2873,7 +3314,7 @@ const handleResumed = state => {
     scopeChain: [],
     callStack: [],
     pausedMessage: '',
-    pausedReason: None$5,
+    pausedReason: None$3,
     callFrameId: ''
   };
   return updateVisibleRows(newState);
@@ -2936,216 +3377,88 @@ 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 handleClickPauseOnExceptions = async state => {
-  const {
-    exceptionBreakPoints
-  } = state;
-  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 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 {
-    exceptionBreakPoints
-  } = state;
-  const newExceptionState = getNewExceptionState(exceptionBreakPoints);
-  return setPauseOnExceptions(state, newExceptionState);
-};
-
-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 {
-    newScopeChain: scopeChain,
-    newCache: cache
-  };
-};
-
-// 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 {
-    cache
-  } = state;
-  const newExpandedIds = removeElement(expandedIds, element.objectId);
-  const {
-    newScopeChain,
-    newCache
-  } = getCollapsedScopeChain(cache, scopeChain, element, index);
-  const newState = {
-    ...state,
-    expandedIds: newExpandedIds,
-    scopeChain: newScopeChain,
-    scopeFocusedIndex: index,
-    cache: newCache,
-    focus: FocusDebugRow
-  };
-  return updateVisibleRows(newState);
-};
-
-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,
-      key: child.name,
-      value: valueLabel,
-      valueType: getDebugValueType(child),
-      objectId: getDebugValueObjectId(child),
-      indent: indent + 10
-    });
+    parsedScripts,
+    id
+  } = state;
+  const item = callStack[index];
+  if (!item) {
+    return state;
   }
-  return childScopeChain;
-};
-
-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 {
+    uri,
+    languageId,
+    rowIndex,
+    columnIndex
+  } = getOpenInfo(id, parsedScripts, item);
+  await openUri(uri, languageId, rowIndex, columnIndex);
+  return state;
 };
 
-const expandScopeChain = async (state, expandedIds, scopeChain, element, index, debugId) => {
+const setPauseOnExceptions = async (state, value) => {
   const {
-    cache,
-    maxDescriptionLength
+    debugId,
+    exceptionBreakPoints
   } = state;
-  const newScopeChain = await getChildScopeChain(cache, index, debugId, scopeChain, maxDescriptionLength);
-  const objectId = scopeChain[index].objectId;
-  const newExpandedIds = [...expandedIds, objectId];
-  const newState = {
+  if (exceptionBreakPoints === value) {
+    return state;
+  }
+  await setPauseOnExceptions$1(debugId, value);
+  return {
     ...state,
-    scopeChain: newScopeChain,
-    expandedIds: newExpandedIds,
-    scopeFocusedIndex: index,
-    focus: FocusDebugRow
+    exceptionBreakPoints: value
   };
-  return updateVisibleRows(newState);
 };
 
-const getElementIndex = (debugId, scopeChain, text) => {
-  for (let i = 0; i < scopeChain.length; i++) {
-    const element = scopeChain[i];
-    if (element.key === text) {
-      return i;
-    }
+const handleClickPauseOnExceptions = async state => {
+  const {
+    exceptionBreakPoints
+  } = state;
+  switch (exceptionBreakPoints) {
+    case None$5:
+      return setPauseOnExceptions(state, All);
+    case Uncaught:
+      return setPauseOnExceptions(state, All);
+    case All:
+      return setPauseOnExceptions(state, None$5);
+    default:
+      return state;
   }
-  return -1;
 };
 
-// TODO pass index to function instead of text
-const handleClickScopeValue = async (state, text) => {
+const getNewExceptionState = exceptionState => {
+  switch (exceptionState) {
+    case None$5:
+      return Uncaught;
+    case Uncaught:
+      return None$5;
+    case All:
+      return None$5;
+    default:
+      return exceptionState;
+  }
+};
+const handleClickPauseOnUncaughtExceptions = async state => {
   const {
-    scopeChain,
-    debugId,
-    expandedIds
+    exceptionBreakPoints
   } = 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);
+  const newExceptionState = getNewExceptionState(exceptionBreakPoints);
+  return setPauseOnExceptions(state, newExceptionState);
+};
+
+const getCheckBoxClickHandler = name => {
+  switch (name) {
+    case PauseOnExceptions:
+      return handleClickPauseOnExceptions;
+    case PauseOnUncaughtExceptions:
+      return handleClickPauseOnUncaughtExceptions;
+    default:
+      throw new Error('unknown input name');
   }
-  return expandScopeChain(state, expandedIds, scopeChain, element, index, debugId);
+};
+
+const handleClickCheckBox = (state, name) => {
+  const fn = getCheckBoxClickHandler(name);
+  return fn(state);
 };
 
 /**
@@ -3217,6 +3530,7 @@ const handleEvaluate = async state => {
     debugId
   } = state;
   const result = await evaluate(debugId, debugInputValue, callFrameId);
+  // @ts-ignore
   const actualResult = result.result.result.value;
   return {
     ...state,
@@ -3297,7 +3611,7 @@ const handleClickSectionAction = async (state, actionId) => {
     return state;
   }
   if (actionId === AddWatchExpression) {
-    return addWatchExpression$1(state, '');
+    return addWatchExpression(state, '');
   }
   if (actionId === RefreshWatchExpressions) {
     return refreshWatchExpression(state);
@@ -3305,8 +3619,6 @@ const handleClickSectionAction = async (state, actionId) => {
   return state;
 };
 
-const LeftClick = 0;
-
 const handleClickSectionHeading = async (state, id, button) => {
   if (button !== LeftClick) {
     return state;
@@ -3328,15 +3640,16 @@ const editWatchExpression = (state, index) => {
     isEditing: true
   };
   const newWatchExpressions = watchExpressions.toSpliced(index, 1, newItem);
-  return {
+  const newState = {
     ...state,
     watchExpressions: newWatchExpressions,
     focus: FocusDebugWatchInput,
-    inputSource: Script$2,
+    inputSource: Script$1,
     editingValue: item.expression,
     editingselectionstart: 0,
     editingselectionend: item.expression.length
   };
+  return updateVisibleRows(newState);
 };
 
 const handleClickWatchExpression = async (state, dataIndex, defaultPrevented) => {
@@ -3349,13 +3662,63 @@ const handleClickWatchExpression = async (state, dataIndex, defaultPrevented) =>
 
 const handleClickWatchExpressionDelete = async (state, dataIndex) => {
   const index = parseIndex(dataIndex);
-  return deleteWatchExpression$1(state, index);
+  return deleteWatchExpression(state, index);
 };
 
 const handleWatchExpressionDoubleClick = async (state, dataIndex) => {
   return state;
 };
 
+const copyTextToClipboard = async text => {
+  // TODO: Implement clipboard functionality
+};
+
+const copyWatchExpression = async (state, index) => {
+  const {
+    watchExpressions
+  } = state;
+  if (index < 0 || index >= watchExpressions.length) {
+    return;
+  }
+  const watchExpression = watchExpressions[index];
+  if (watchExpression) {
+    await copyTextToClipboard();
+  }
+};
+
+const handleCopy = async state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  if (selectedIndex < 0 || selectedIndex >= visibleRows.length) {
+    return state;
+  }
+  const currentRow = visibleRows[selectedIndex];
+  if (currentRow.type !== WatchExpression || currentRow.index === undefined) {
+    return state;
+  }
+  const watchIndex = currentRow.index;
+  await copyWatchExpression(state, watchIndex);
+  return state;
+};
+
+const handleDelete = async state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  if (selectedIndex < 0 || selectedIndex >= visibleRows.length) {
+    return state;
+  }
+  const currentRow = visibleRows[selectedIndex];
+  if (currentRow.type !== WatchExpression || currentRow.index === undefined) {
+    return state;
+  }
+  const watchIndex = currentRow.index;
+  return deleteWatchExpression(state, watchIndex);
+};
+
 const handleEnter = async state => {
   return state;
 };
@@ -3385,6 +3748,34 @@ const handleInputFieldChange = (state, name, value) => {
   return state;
 };
 
+const handleNew = async state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  const row = visibleRows[selectedIndex];
+  if (row && (row.type === WatchExpression || row.type === WatchMessage)) {
+    return addWatchExpression(state, '');
+  }
+  return state;
+};
+
+const handleRename = async state => {
+  const {
+    selectedIndex
+  } = state;
+  const rows = getRunAndDebugVisibleRows(state);
+  const row = rows[selectedIndex];
+  if (row && row.type === WatchExpression && row.index !== undefined) {
+    const watchIndex = row.index;
+    const watchExpression = state.watchExpressions[watchIndex];
+    if (watchExpression && !watchExpression.isEditing) {
+      return editWatchExpression(state, watchIndex);
+    }
+  }
+  return state;
+};
+
 const handleScriptParsed = (state, parsedScript) => {
   const {
     parsedScripts
@@ -3437,25 +3828,23 @@ const handleWatchExpressionContextMenu = async (state, x, y, dataIndex) => {
   return state;
 };
 
-const hideCallStack = state => {
+const hideSection = (state, visibilityKey) => {
   return {
     ...state,
-    callStackVisible: false
+    [visibilityKey]: false
   };
 };
 
+const hideCallStack = state => {
+  return hideSection(state, 'callStackVisible');
+};
+
 const hideScope = state => {
-  return {
-    ...state,
-    scopeVisible: false
-  };
+  return hideSection(state, 'scopeVisible');
 };
 
 const hideWatch = state => {
-  return {
-    ...state,
-    watchVisible: false
-  };
+  return hideSection(state, 'watchVisible');
 };
 
 const getPortTuple = () => {
@@ -3616,6 +4005,9 @@ const restoreState = savedState => {
 };
 
 const loadContent = async (state, isTest, savedState) => {
+  if (isTest) {
+    savedState = {};
+  }
   const {
     watchExpressions,
     watchExpanded,
@@ -3745,71 +4137,6 @@ const ToolBar = 'toolbar';
 const Tree = 'tree';
 const TreeItem = 'treeitem';
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-const Text$1 = 12;
-const text = data => {
-  return {
-    type: Text$1,
-    text: data,
-    childCount: 0
-  };
-};
-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,
@@ -4044,16 +4371,32 @@ const getDebugValueClassName = valueType => {
 
 const separator = text(': ');
 
-const renderValue = (row, selectedIndex, rowIndex) => {
+const renderValue = (row, selectedIndex, rowIndex, tokenColoringEnabled) => {
   const {
     indent,
     key,
     value,
     valueType,
-    expanded
+    expanded,
+    tokens
   } = row;
   const isSelected = rowIndex === selectedIndex;
   const className = getDebugRowClassName(DebugRow, isSelected);
+  const hasTokens = tokenColoringEnabled && tokens && tokens.length > 0;
+  let valueChildren;
+  if (hasTokens) {
+    valueChildren = [];
+    for (let i = 0; i < tokens.length; i += 2) {
+      valueChildren.push({
+        type: Span,
+        className: `DebugToken DebugToken${tokens[i + 1]}`,
+        childCount: 1,
+        children: [text(tokens[i])]
+      });
+    }
+  } else {
+    valueChildren = [text(value)];
+  }
   return [{
     type: Div,
     className: className,
@@ -4070,8 +4413,8 @@ const renderValue = (row, selectedIndex, rowIndex) => {
   }, text(key), separator, {
     type: Span,
     className: mergeClassNames(DebugValue, getDebugValueClassName(valueType)),
-    childCount: 1
-  }, text(value)];
+    childCount: hasTokens ? valueChildren.length / 2 : 1
+  }, ...valueChildren];
 };
 
 const renderInputField = (row, selectedIndex, rowIndex) => {
@@ -4106,7 +4449,8 @@ const renderInputField = (row, selectedIndex, rowIndex) => {
 const renderScope = (row, selectedIndex, rowIndex) => {
   const {
     key,
-    expanded
+    expanded,
+    index
   } = row;
   const isSelected = rowIndex === selectedIndex;
   const className = getDebugRowClassName(DebugRow, isSelected);
@@ -4118,7 +4462,8 @@ const renderScope = (row, selectedIndex, rowIndex) => {
     ariaLevel: 2,
     childCount: 2,
     onPointerDown: HandleClickScopeValue,
-    'data-name': key
+    'data-name': key,
+    'data-index': index
   }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
     type: Span,
     className: mergeClassNames(DebugValue, DebugValueScopeName),
@@ -4153,7 +4498,7 @@ const renderWatchExpression = (row, selectedIndex, rowIndex) => {
     childCount: 1
   }, text(value), {
     type: Button,
-    title: deleteWatchExpression(),
+    title: deleteWatchExpression$1(),
     className: mergeClassNames(IconButton, DebugSectionAction, DeleteWatchExpression),
     'data-index': index,
     onClick: HandleClickWatchExpressionDelete,
@@ -4199,13 +4544,13 @@ const getRowRenderer = type => {
       return renderMessage;
     case SectionHeading:
       return renderSectionHeading;
-    case CallStack$2:
+    case CallStack$3:
       return renderCallStack;
-    case Scope$3:
+    case Scope$4:
       return renderScope;
     case Value:
     case Property$1:
-    case Exception$1:
+    case Exception$2:
       return renderValue;
     case CheckBox$1:
       return renderCheckBox;
@@ -4220,25 +4565,26 @@ const getRowRenderer = type => {
   }
 };
 
-const getRunAndDebugRowVirtualDom = (row, selectedIndex, rowIndex) => {
+const getRunAndDebugRowVirtualDom = (row, selectedIndex, rowIndex, tokenColoringEnabled) => {
   const renderer = getRowRenderer(row.type);
-  return renderer(row, selectedIndex, rowIndex);
+  return renderer(row, selectedIndex, rowIndex, tokenColoringEnabled);
 };
 
-const getRunAndDebugVirtualDom2 = (rows, selectedIndex) => {
+const getRunAndDebugVirtualDom2 = (rows, selectedIndex, tokenColoringEnabled) => {
   return [{
     type: Div,
     className: 'Viewlet RunAndDebug',
     tabIndex: 0,
     childCount: rows.length,
     role: Tree
-  }, ...rows.flatMap((row, index) => getRunAndDebugRowVirtualDom(row, selectedIndex, index))];
+  }, ...rows.flatMap((row, index) => getRunAndDebugRowVirtualDom(row, selectedIndex, index, tokenColoringEnabled))];
 };
 
 const renderItems = (oldState, newState) => {
   const rows = newState.visibleRows;
   const selectedIndex = newState.selectedIndex;
-  const dom = getRunAndDebugVirtualDom2(rows, selectedIndex);
+  const tokenColoringEnabled = newState.tokenColoringEnabled ?? true;
+  const dom = getRunAndDebugVirtualDom2(rows, selectedIndex, tokenColoringEnabled);
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
@@ -4464,7 +4810,7 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleClickScopeValue,
-    params: ['handleClickScopeValue', 'event.target.dataset.name']
+    params: ['handleClickScopeValue', 'event.target.dataset.name', 'event.button']
   }, {
     name: HandleInputFieldChange,
     params: ['handleInputFieldChange', 'event.target.name', 'event.target.value']
@@ -4543,6 +4889,18 @@ const selectIndex = (state, index) => {
   };
 };
 
+const selectFirstIndex = state => {
+  return selectIndex(state, 0);
+};
+
+const selectLastIndex = state => {
+  const {
+    visibleRows
+  } = state;
+  const lastIndex = visibleRows.length - 1;
+  return selectIndex(state, lastIndex);
+};
+
 const selectNextRow = state => {
   return selectIndex(state, state.selectedIndex + 1);
 };
@@ -4583,11 +4941,11 @@ const commandMap = {
   'Debug.scriptParsed': scriptParsed,
   'Initialize.initialize': initialize,
   'RunAndDebug.acceptWatchExpressionEdit': wrapCommand(acceptWatchExpressionEdit),
-  'RunAndDebug.addWatchExpression': wrapCommand(addWatchExpression$1),
+  'RunAndDebug.addWatchExpression': wrapCommand(addWatchExpression),
   'RunAndDebug.cancelWatchExpressionEdit': wrapCommand(cancelWatchExpressionEdit),
   'RunAndDebug.create': create,
-  'RunAndDebug.deleteWatchExpression': deleteWatchExpression$1,
-  'RunAndDebug.deleteAllWatchExpressions': deleteAllWatchExpressions$1,
+  'RunAndDebug.deleteWatchExpression': deleteWatchExpression,
+  'RunAndDebug.deleteAllWatchExpressions': deleteAllWatchExpressions,
   'RunAndDebug.diff2': diff2,
   'RunAndDebug.dispose': dispose,
   'RunAndDebug.focusNext': wrapCommand(focusNext),
@@ -4615,6 +4973,8 @@ const commandMap = {
   'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
   'RunAndDebug.handleClickWatchExpression': wrapCommand(handleClickWatchExpression),
   'RunAndDebug.handleClickWatchExpressionDelete': wrapCommand(handleClickWatchExpressionDelete),
+  'RunAndDebug.handleCopy': wrapCommand(handleCopy),
+  'RunAndDebug.handleNew': wrapCommand(handleNew),
   'RunAndDebug.handleDebugInput': wrapCommand(handleDebugInput),
   'RunAndDebug.handleEvaluate': wrapCommand(handleEvaluate),
   'RunAndDebug.handleInputBlur': wrapCommand(handleInputBlur),
@@ -4657,7 +5017,11 @@ const commandMap = {
   'RunAndDebug.showCallStack': wrapCommand(showCallStack),
   'RunAndDebug.hideCallStack': wrapCommand(hideCallStack),
   'RunAndDebug.handleEnter': wrapCommand(handleEnter),
-  'RunAndDebug.handleSpace': wrapCommand(handleSpace)
+  'RunAndDebug.handleRename': wrapCommand(handleRename),
+  'RunAndDebug.handleDelete': wrapCommand(handleDelete),
+  'RunAndDebug.handleSpace': wrapCommand(handleSpace),
+  'RunAndDebug.selectFirstIndex': wrapCommand(selectFirstIndex),
+  'RunAndDebug.selectLastIndex': wrapCommand(selectLastIndex)
 };
 
 const listen = async () => {