@dao42/d42paas-front 0.5.23 → 0.5.28

package/dist/DaoPaaS.es.js

@@ -29401,7 +29401,7 @@ const Loading = () => {
     })
   });
 };
-let index$5 = 0;
+let index$7 = 0;
 const REPLAY_INTERVAL = 250;
 let timer;
 let timeOutT;
@@ -29418,7 +29418,7 @@ const replayHandler = async () => {
     data: dockerInfo.fileTree
   });
   const crdts = await getLocalCRDTs();
-  const filterData = crdts[index$5];
+  const filterData = crdts[index$7];
   const cdata = __spreadValues({}, filterData);
   timeOutT = setTimeout(async () => {
     if (!cdata.timestamp) {
@@ -29440,7 +29440,7 @@ const replayHandler = async () => {
     }
     setCRDTInfo(__spreadValues({}, cdata));
   }, 0);
-  index$5++;
+  index$7++;
   return {};
 };
 const replay = async (status2) => {
@@ -29460,7 +29460,7 @@ const replay = async (status2) => {
         content: "\u64AD\u653E\u5B8C\u6BD5",
         placement: "topCenter"
       });
-      index$5 = 0;
+      index$7 = 0;
       break;
     case "disabled":
       clearInterval(timer);
@@ -29469,7 +29469,7 @@ const replay = async (status2) => {
         path: ""
       });
       setAppStatus("code");
-      index$5 = 0;
+      index$7 = 0;
       break;
     case "pause":
       clearInterval(timer);
@@ -29492,13 +29492,19 @@ const replay = async (status2) => {
       break;
   }
 };
-var index$4 = "";
+var index$6 = "";
 const LazyTreeComponent = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$3;
+  return index$5;
 })).FileTree);
 const LazyEditorComponent = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$2;
+  return index$4;
 })).Editor);
+const LazyConsoleComponent = lazy$2(async () => (await Promise.resolve().then(function() {
+  return index$3;
+})).default);
+const LazyBrowserComponent = lazy$2(async () => (await Promise.resolve().then(function() {
+  return index$2;
+})).default);
 const LazyShellComponent = lazy$2(async () => (await Promise.resolve().then(function() {
   return index$1;
 })).default);
@@ -29674,6 +29680,26 @@ class DaoPaaS {
       children: /* @__PURE__ */ jsx(LazyTreeComponent, __spreadValues({}, props))
     }), this.editorDOM);
   }
+  Console({
+    container,
+    props
+  }) {
+    this.editorDOM = container ? isHTMLElement$1(container) : this.editorDOM;
+    reactDom.exports.render(/* @__PURE__ */ jsx(react.exports.Suspense, {
+      fallback: /* @__PURE__ */ jsx(Loading, {}),
+      children: /* @__PURE__ */ jsx(LazyConsoleComponent, __spreadValues({}, props))
+    }), this.editorDOM);
+  }
+  Browser({
+    container,
+    props
+  }) {
+    this.editorDOM = container ? isHTMLElement$1(container) : this.editorDOM;
+    reactDom.exports.render(/* @__PURE__ */ jsx(react.exports.Suspense, {
+      fallback: /* @__PURE__ */ jsx(Loading, {}),
+      children: /* @__PURE__ */ jsx(LazyBrowserComponent, __spreadValues({}, props))
+    }), this.editorDOM);
+  }
 }
 function isHTMLElement$1(arg) {
   if (!/HTMLDivElement|HTMLElement/.test(Object.prototype.toString.call(arg))) {
@@ -31621,13 +31647,13 @@ var Tree = react.exports.forwardRef(function(props, ref) {
   }
   return react.exports.createElement(TreeContext.Provider, { value: treeContextProps }, react.exports.createElement(TreeActionsProvider, { ref }, react.exports.createElement(TreeManager, null)));
 });
-function IoClient(revision) {
+const IoClient = function(revision) {
   this.revision = revision;
   this.state = synchronized_;
   this.operation = [];
   this.receiveOperation = [];
   this.io = useOT.getState().socket;
-}
+};
 IoClient.prototype.setState = function(state) {
   this.state = state;
 };
@@ -31708,10 +31734,15 @@ AwaitingWithBuffer.prototype.applyClient = function(client2, operation) {
   return new AwaitingWithBuffer(this.outstanding, newBuffer);
 };
 AwaitingWithBuffer.prototype.applyServer = function(client2, operation) {
+  let pair2, pair1;
   const transform = operation.constructor.transform;
-  const pair1 = transform(this.outstanding, operation);
-  const pair2 = transform(this.buffer, pair1[1]);
-  client2.applyOperation(pair2[1]);
+  if (this.outstanding.baseLength === operation.baseLength) {
+    pair1 = transform(this.outstanding, operation);
+    if (this.buffer.baseLength === pair1[1].baseLength) {
+      pair2 = transform(this.buffer, pair1[1]);
+      client2.applyOperation(pair2[1]);
+    }
+  }
   return new AwaitingWithBuffer(pair1[0], pair2[0]);
 };
 AwaitingWithBuffer.prototype.serverAck = function(client2) {
@@ -32064,7 +32095,7 @@ const FileTree = ({
     })
   });
 };
-var index$3 = /* @__PURE__ */ Object.freeze({
+var index$5 = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
   FileTree
@@ -174690,7 +174721,9 @@ const EditorLayout = newStyled.div`
   .stack-list {
     width: 100%;
     height: 40px;
-
+    transform: translate(0, -1px);
+    overflow-x: auto;
+    flex-wrap: nowrap;
     li {
       /* width: 100px; */
       height: 100%;
@@ -174701,11 +174734,11 @@ const EditorLayout = newStyled.div`
 
     .active {
       background: #1e1e1e;
+      box-shadow: 0px 1px 0px 0 #333;
       /* border-left: 1px solid rgb(42 96 231);
       border-right: 1px solid rgb(42 96 231); */
       /* background: red; */
     }
-
   }
 `;
 const ContentLayout = newStyled.div`
@@ -174715,7 +174748,10 @@ const ContentLayout = newStyled.div`
 `;
 const Editor = ({
   doc,
-  docType
+  docType,
+  containerStyle,
+  menuStyle,
+  editorStyle
 }) => {
   const divEl = react.exports.useRef(null);
   react.exports.useState(doc ? doc : "");
@@ -174788,13 +174824,20 @@ const Editor = ({
         setPosition(editor.getPosition());
         let keepString = 0;
         let rangeLengthamount = 0;
+        let rangeOffsetthamount = 0;
+        let preOffset = 0;
         const valuelength = editorValue.length - changes.reduce((change, nextChange, i2) => change - nextChange.rangeLength + nextChange.text.length, 0);
-        const operation = changes.sort((c1, c2) => c1.rangeOffset - c2.rangeOffset).map((change, i2) => {
-          rangeLengthamount += i2 === 0 ? 0 : change.rangeLength;
-          keepString += i2 === 0 ? 0 : change.text.length;
-          return new TextOperation().retain(i2 === 0 ? change.rangeOffset : change.rangeOffset - rangeLengthamount + keepString).delete(change.rangeLength).insert(change.text).retain(valuelength - change.rangeOffset - change.rangeLength);
-        }).reduce((a2, b2) => a2.compose(b2));
-        setLocalFile((doc2 == null ? void 0 : doc2.path) ? doc2 == null ? void 0 : doc2.path : "singleFile", editor.getValue());
+        const operation = new TextOperation();
+        changes.sort((change1, change2) => change1.rangeOffset - change2.rangeOffset).forEach((change, index2, _array) => {
+          operation.retain(index2 === 0 ? change.rangeOffset : change.rangeOffset - preOffset).delete(change.rangeLength).insert(change.text);
+          if (index2 + 1 === _array.length) {
+            operation.retain(valuelength - change.rangeLength - change.rangeOffset);
+          }
+          preOffset = change.rangeOffset + change.rangeLength;
+          rangeLengthamount += change.rangeLength;
+          keepString += change.text.length;
+          rangeOffsetthamount += change.rangeOffset;
+        });
         client2.applyClient(operation);
       } else {
         setValue(changes[0].text);
@@ -174867,7 +174910,7 @@ const Editor = ({
       setLocalFile(doc2.path, file.value);
     }
   };
-  const lspServerInject = (lan, disable) => {
+  const lspServerInject = (_lan, disable) => {
     languages.register({
       id: "ruby",
       extensions: [".rb"],
@@ -174962,13 +175005,14 @@ const Editor = ({
       });
       editor = editor$1.create(divEl.current, {
         theme: "vs-dark",
+        automaticLayout: true,
         glyphMargin: true,
         lightbulb: {
           enabled: true
         }
       });
-      lspServerInject(INIT_LANGUAGE, oTStore.getState().lspServerDisabled);
       editorEventBinder();
+      lspServerInject(INIT_LANGUAGE, oTStore.getState().lspServerDisabled);
       const editorService = editor._codeEditorService;
       const openEditorBase = editorService.openCodeEditor.bind(editorService);
       editorService.openCodeEditor = async (input, source, workspacePath) => {
@@ -175014,7 +175058,7 @@ const Editor = ({
           index2 += op;
         }
         if (TextOperation.isInsert(op)) {
-          const insert = model.getPositionAt(index2);
+          const insert = model == null ? void 0 : model.getPositionAt(index2);
           const originResult = {
             forceMoveMarkers: true,
             range: new Range$4(insert.lineNumber, insert.column, insert.lineNumber, insert.column),
@@ -175023,8 +175067,8 @@ const Editor = ({
           results.push(originResult);
         }
         if (TextOperation.isDelete(op)) {
-          const start = model.getPositionAt(index2);
-          const end = model.getPositionAt(index2 - op);
+          const start = model == null ? void 0 : model.getPositionAt(index2);
+          const end = model == null ? void 0 : model.getPositionAt(index2 - op);
           results.push({
             forceMoveMarkers: false,
             range: new Range$4(start.lineNumber, start.column, end.lineNumber, end.column),
@@ -175034,7 +175078,7 @@ const Editor = ({
         }
       });
       {
-        model.pushEditOperations([], results, null);
+        model == null ? void 0 : model.pushEditOperations([], results, null);
       }
     }
   }, [OTSTATE.CRDTInfo]);
@@ -175078,10 +175122,9 @@ const Editor = ({
           }));
         });
         setUsersDelta(usersDelta.map((deltaInfo) => {
-          var _a3;
           if (deltaInfo.uuid === CRDTInfo.userInfo.uuid) {
             return __spreadProps(__spreadValues({}, deltaInfo), {
-              delta: editor.deltaDecorations(deltaInfo.delta ? deltaInfo.delta : "", (_a3 = CRDTInfo == null ? void 0 : CRDTInfo.selection) == null ? void 0 : _a3.map((s2) => ({
+              delta: editor.deltaDecorations(deltaInfo.delta ? deltaInfo.delta : "", (CRDTInfo == null ? void 0 : CRDTInfo.selection).map((s2) => ({
                 range: new Range$4(s2[0], s2[1], s2[2], s2[3]),
                 options: {
                   isWholeLine: false,
@@ -175176,8 +175219,10 @@ const Editor = ({
     });
   }, [USERLISTSTORE.userList, file == null ? void 0 : file.path]);
   return /* @__PURE__ */ jsxs(EditorLayout, {
+    style: containerStyle,
     className: "editor-layout flex flex-col",
     children: [FileTreeStack.length > 0 ? /* @__PURE__ */ jsx("ul", {
+      style: menuStyle,
       className: "bg-codezone-black stack-list flex flex-row items-center flex-shrink-0",
       children: FileTreeStack.map((f2, index2) => /* @__PURE__ */ jsx("li", {
         className: `flex flex-row justify-center items-center cursor-pointer ${f2.path === (file == null ? void 0 : file.path) ? "active" : ""}`,
@@ -175189,11 +175234,12 @@ const Editor = ({
     }) : null, /* @__PURE__ */ jsx(ContentLayout, {
       ref: divEl,
       userList: userListStore.getState().userList,
-      className: "edito-content flex-1"
+      className: "edito-content flex-1",
+      style: editorStyle
     })]
   });
 };
-var index$2 = /* @__PURE__ */ Object.freeze({
+var index$4 = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
   Editor
@@ -182320,12 +182366,237 @@ const XTerm = (_a2) => {
     })
   });
 };
-const TerminalComponent = (_c2) => {
+const Console = (_c2) => {
   var _d2 = _c2, {
     options
   } = _d2, props = __objRest(_d2, [
     "options"
   ]);
+  const defaultOptions2 = __spreadValues({
+    convertEol: true,
+    fontSize: 12,
+    fontFamily: "Monaco, Menlo, monospace",
+    lineHeight: 1,
+    cursorBlink: true,
+    cursorWidth: 1,
+    cursorStyle: "block",
+    rightClickSelectsWord: true,
+    theme: {
+      background: "#1E1E1E"
+    }
+  }, options);
+  const [terminal, setTerminal] = react.exports.useState(null);
+  const {
+    CRDTInfo
+  } = oTStore((state) => state);
+  const {
+    dockerStatus
+  } = oTStore((state) => state);
+  const initTerminalText = (terminal2, text2) => {
+    terminal2.write("\r\n");
+    terminal2.clear();
+    writeText(terminal2, text2);
+  };
+  const writeText = (terminal2, text2) => {
+    terminal2.write(text2);
+  };
+  react.exports.useEffect(() => {
+    if (!terminal) {
+      const term = new xterm.exports.Terminal(defaultOptions2);
+      setTerminal(term);
+    }
+  }, []);
+  react.exports.useEffect(() => {
+    if (!terminal)
+      return;
+    if (dockerStatus === "STOP") {
+      initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
+    } else {
+      initTerminalText(terminal, oTStore.getState().dockerInfo.consoleHistory);
+    }
+  }, [terminal]);
+  react.exports.useEffect(() => {
+    if (!terminal)
+      return;
+    const crdt = CRDTInfo.console;
+    if (crdt) {
+      writeText(terminal, crdt.doc.value || "");
+    }
+  }, [CRDTInfo.console]);
+  react.exports.useEffect(() => {
+    if (!terminal)
+      return;
+    if (dockerStatus === "STOP") {
+      setTimeout(() => {
+        writeText(terminal, "\r\n\u5E94\u7528\u672A\u542F\u52A8\r\n");
+      }, 400);
+    } else {
+      initTerminalText(terminal, "");
+    }
+  }, [dockerStatus]);
+  return /* @__PURE__ */ jsx("div", {
+    style: {
+      height: "100%",
+      width: "100%"
+    },
+    children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
+      terminal
+    }, props))
+  });
+};
+var index$3 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  "default": Console
+});
+const PROTOCOL = "https://";
+const NavBar = newStyled.div`
+  background-color: white;
+  height: 30px;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin: 0 10px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.disabled {
+      color: #f2fffe;
+      &:hover {
+        background-color: white;
+      }
+    }
+
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
+
+  input {
+    flex: 1;
+    display: inline-block;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 8px;
+    border: 1px solid #adacac;
+    border-radius: 5px;
+  }
+`;
+const StopMask = newStyled.div`
+  width: 100%;
+  height: calc(100% - 30px);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #ffffff;
+  background-color: #5a5a5a;
+  opacity: 0.6;
+`;
+const OutputBrowser = (_e2) => {
+  var _f2 = _e2, {
+    url: url2
+  } = _f2, props = __objRest(_f2, [
+    "url"
+  ]);
+  const pStatus = oTStore((state) => state.playgroundStatus);
+  const dStatus = oTStore((state) => state.dockerStatus);
+  const [playgroundStatus, setPlaygroundStatus] = react.exports.useState("EMPTY");
+  const [dockerStatus, setDockerStatus] = react.exports.useState("STOP");
+  const urlWithProtocol = (url22) => {
+    if (!url22)
+      return `${PROTOCOL}showmebug.com`;
+    if (url22.indexOf("http://") !== 0 && url22.indexOf("https://") !== 0) {
+      url22 = `${PROTOCOL}${url22}`;
+    }
+    return url22;
+  };
+  react.exports.useEffect(() => {
+    setPlaygroundStatus(pStatus);
+  }, [pStatus]);
+  react.exports.useEffect(() => {
+    setDockerStatus(dStatus);
+    setTimeout(() => {
+      onRefresh();
+    }, 800);
+  }, [dStatus]);
+  const iframeRef = react.exports.useRef(null);
+  const [iframeSrc, setIframeSrc] = react.exports.useState(urlWithProtocol(url2));
+  react.exports.useEffect(() => {
+    setIframeSrc(urlWithProtocol(url2));
+  }, [url2]);
+  react.exports.useEffect(() => {
+  }, [iframeRef]);
+  const onEnterKey = (e2) => {
+    var _a2, _b2;
+    if (e2.keyCode !== 13)
+      return;
+    const url22 = urlWithProtocol(e2.target.value);
+    setIframeSrc(url22);
+    (_b2 = (_a2 = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a2.contentWindow) == null ? void 0 : _b2.location.replace(url22);
+  };
+  const onRefresh = () => {
+    var _a2, _b2;
+    (_b2 = (_a2 = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a2.contentWindow) == null ? void 0 : _b2.location.replace(iframeSrc);
+  };
+  const onOpenInNewTab = () => {
+    window.open(iframeSrc);
+  };
+  react.exports.useEffect(() => {
+    var _a2, _b2;
+    if (playgroundStatus === "EMPTY")
+      return;
+    if (playgroundStatus === "ACTIVE" && dockerStatus === "RUNNING") {
+      if (iframeSrc !== "http://" && iframeSrc !== "https://") {
+        (_b2 = (_a2 = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a2.contentWindow) == null ? void 0 : _b2.location.replace(iframeSrc);
+      }
+    }
+  }, [playgroundStatus, dockerStatus]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(NavBar, {
+      children: [/* @__PURE__ */ jsx("i", {
+        className: "d42 text-xl reload cursor-pointer",
+        onClick: onRefresh
+      }), /* @__PURE__ */ jsx("input", {
+        type: "text",
+        value: iframeSrc,
+        onChange: (e2) => setIframeSrc(e2.target.value),
+        onKeyDown: onEnterKey
+      }), /* @__PURE__ */ jsx("i", {
+        className: "d42 text-xl file-copy cursor-pointer",
+        onClick: onOpenInNewTab
+      })]
+    }), dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
+      children: /* @__PURE__ */ jsx("span", {
+        children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
+      })
+    }), /* @__PURE__ */ jsx("iframe", {
+      ref: iframeRef,
+      src: iframeSrc,
+      style: {
+        width: "100%",
+        height: "calc(100% - 30px)"
+      }
+    })]
+  });
+};
+var index$2 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  "default": OutputBrowser
+});
+const TerminalComponent = (_g2) => {
+  var _h2 = _g2, {
+    options
+  } = _h2, props = __objRest(_h2, [
+    "options"
+  ]);
   const defaultOptions2 = __spreadValues({}, options);
   const userLabel = document.createElement("div");
   userLabel.classList.add("xterm-helper-user-label");
@@ -182365,15 +182636,15 @@ const TerminalComponent = (_c2) => {
     }
   }, []);
   react.exports.useEffect(() => {
-    var _a2, _b2, _c3, _d3;
+    var _a2, _b2, _c2, _d2;
     if (!terminal)
       return;
     if (CRDTInfo.terminal) {
-      initTerminalText(terminal, ((_d3 = (_c3 = (_b2 = (_a2 = oTStore.getState()) == null ? void 0 : _a2.CRDTInfo) == null ? void 0 : _b2.terminal) == null ? void 0 : _c3.doc) == null ? void 0 : _d3.value) || "");
+      initTerminalText(terminal, ((_d2 = (_c2 = (_b2 = (_a2 = oTStore.getState()) == null ? void 0 : _a2.CRDTInfo) == null ? void 0 : _b2.terminal) == null ? void 0 : _c2.doc) == null ? void 0 : _d2.value) || "");
     }
   }, [terminal]);
   react.exports.useEffect(() => {
-    var _a2, _b2, _c3;
+    var _a2, _b2, _c2;
     const crdt = CRDTInfo.terminal;
     if (terminal && crdt) {
       if (((_a2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _a2.action) === "Get") {
@@ -182381,7 +182652,7 @@ const TerminalComponent = (_c2) => {
         return;
       }
       writeText(terminal, ((_b2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _b2.value) || "");
-      const postUser = userListStore.getState().userList[(_c3 = CRDTInfo == null ? void 0 : CRDTInfo.userInfo) == null ? void 0 : _c3.uuid];
+      const postUser = userListStore.getState().userList[(_c2 = CRDTInfo == null ? void 0 : CRDTInfo.userInfo) == null ? void 0 : _c2.uuid];
       if (postUser && !IsMe(CRDTInfo.userInfo)) {
         const helperContainer = terminal._core._helperContainer;
         userLabel.innerText = postUser.name;
@@ -182428,12 +182699,12 @@ var index$1 = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": TerminalComponent
 });
-const Tabs = (_e2) => {
-  var _f2 = _e2, {
+const Tabs = (_i) => {
+  var _j = _i, {
     activeKey,
     onSelect,
     tabItems
-  } = _f2, props = __objRest(_f2, [
+  } = _j, props = __objRest(_j, [
     "activeKey",
     "onSelect",
     "tabItems"
@@ -182751,10 +183022,10 @@ const AvatarLayout = newStyled.div`
   border-color: ${(props) => props.user.color};
   background-image: ${(props) => 'url("' + props.user.avatar + '")'};
 `;
-const Avatar = (_g2) => {
-  var _h2 = _g2, {
+const Avatar = (_k) => {
+  var _l = _k, {
     user
-  } = _h2, props = __objRest(_h2, [
+  } = _l, props = __objRest(_l, [
     "user"
   ]);
   return /* @__PURE__ */ jsx(AvatarLayout, __spreadValues({
@@ -182763,8 +183034,8 @@ const Avatar = (_g2) => {
   }, props));
 };
 const SkeletonThemeContext = React.createContext({});
-function SkeletonTheme(_i) {
-  var _j = _i, { children } = _j, styleOptions = __objRest(_j, ["children"]);
+function SkeletonTheme(_m) {
+  var _n = _m, { children } = _n, styleOptions = __objRest(_n, ["children"]);
   return React.createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children);
 }
 const defaultEnableAnimation = true;
@@ -182790,8 +183061,8 @@ function styleOptionsToCssProperties({ baseColor, highlightColor, width, height,
     style["--highlight-color"] = highlightColor;
   return style;
 }
-function Skeleton$1(_k) {
-  var _l = _k, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _l, propsStyleOptions = __objRest(_l, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
+function Skeleton$1(_o) {
+  var _p = _o, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _p, propsStyleOptions = __objRest(_p, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
   var _a2, _b2;
   const contextStyleOptions = React.useContext(SkeletonThemeContext);
   const styleOptions = __spreadProps(__spreadValues(__spreadValues({}, contextStyleOptions), propsStyleOptions), {
@@ -182842,87 +183113,6 @@ function Box({
     children
   });
 }
-const Console = (_m) => {
-  var _n = _m, {
-    options
-  } = _n, props = __objRest(_n, [
-    "options"
-  ]);
-  const defaultOptions2 = __spreadValues({
-    convertEol: true,
-    fontSize: 12,
-    fontFamily: "Monaco, Menlo, monospace",
-    lineHeight: 1,
-    cursorBlink: true,
-    cursorWidth: 1,
-    cursorStyle: "block",
-    rightClickSelectsWord: true,
-    theme: {
-      background: "#1E1E1E"
-    }
-  }, options);
-  const [terminal, setTerminal] = react.exports.useState(null);
-  const {
-    CRDTInfo
-  } = oTStore((state) => state);
-  const {
-    dockerStatus
-  } = oTStore((state) => state);
-  const initTerminalText = (terminal2, text2) => {
-    terminal2.write("\r\n");
-    terminal2.clear();
-    writeText(terminal2, text2);
-  };
-  const writeText = (terminal2, text2) => {
-    terminal2.write(text2);
-  };
-  react.exports.useEffect(() => {
-    if (!terminal) {
-      const term = new xterm.exports.Terminal(defaultOptions2);
-      setTerminal(term);
-    }
-  }, []);
-  react.exports.useEffect(() => {
-    if (!terminal)
-      return;
-    if (dockerStatus === "STOP") {
-      initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
-    } else {
-      initTerminalText(terminal, oTStore.getState().dockerInfo.consoleHistory);
-    }
-  }, [terminal]);
-  react.exports.useEffect(() => {
-    const crdt = CRDTInfo.console;
-    if (terminal && crdt) {
-      if (crdt.doc.value === "^C") {
-        writeText(terminal, crdt.doc.value);
-        initTerminalText(terminal, "");
-        return;
-      }
-      writeText(terminal, crdt.doc.value || "");
-    }
-  }, [CRDTInfo.console]);
-  react.exports.useEffect(() => {
-    if (!terminal)
-      return;
-    if (dockerStatus === "STOP") {
-      setTimeout(() => {
-        initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
-      }, 400);
-    } else {
-      initTerminalText(terminal, "");
-    }
-  }, [dockerStatus]);
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      height: "100%",
-      width: "100%"
-    },
-    children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
-      terminal
-    }, props))
-  });
-};
 const ToolBarWrapper = newStyled.div`
   position: relative;
   display: flex;
@@ -182995,8 +183185,8 @@ const ButtonContent = ({
     })()
   });
 };
-const ToolBar = (_o) => {
-  var props = __objRest(_o, []);
+const ToolBar = (_q) => {
+  var props = __objRest(_q, []);
   const io = useOT((state) => state.socket);
   const pStatus = oTStore((state) => state.playgroundStatus);
   const dStatus = oTStore((state) => state.dockerStatus);
@@ -183062,140 +183252,6 @@ const ToolBar = (_o) => {
     })]
   });
 };
-const PROTOCOL = "https://";
-const NavBar = newStyled.div`
-  background-color: white;
-  height: 30px;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin: 0 10px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.disabled {
-      color: #f2fffe;
-      &:hover {
-        background-color: white;
-      }
-    }
-
-    &:hover {
-      background-color: #e0e0e0;
-    }
-  }
-
-  input {
-    flex: 1;
-    display: inline-block;
-    height: 26px;
-    line-height: 26px;
-    padding: 0 8px;
-    border: 1px solid #adacac;
-    border-radius: 5px;
-  }
-`;
-const StopMask = newStyled.div`
-  width: 100%;
-  height: calc(100% - 30px);
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
-  color: #ffffff;
-  background-color: #5a5a5a;
-  opacity: 0.6;
-`;
-const OutputBrowser = (_p) => {
-  var _q = _p, {
-    url: url2
-  } = _q, props = __objRest(_q, [
-    "url"
-  ]);
-  const pStatus = oTStore((state) => state.playgroundStatus);
-  const dStatus = oTStore((state) => state.dockerStatus);
-  const [playgroundStatus, setPlaygroundStatus] = react.exports.useState("EMPTY");
-  const [dockerStatus, setDockerStatus] = react.exports.useState("STOP");
-  const urlWithProtocol = (url22) => {
-    if (!url22)
-      return `${PROTOCOL}showmebug.com`;
-    if (url22.indexOf("http://") !== 0 && url22.indexOf("https://") !== 0) {
-      url22 = `${PROTOCOL}${url22}`;
-    }
-    return url22;
-  };
-  react.exports.useEffect(() => {
-    setPlaygroundStatus(pStatus);
-  }, [pStatus]);
-  react.exports.useEffect(() => {
-    setDockerStatus(dStatus);
-    setTimeout(() => {
-      onRefresh();
-    }, 800);
-  }, [dStatus]);
-  const iframeRef = react.exports.useRef(null);
-  const [iframeSrc, setIframeSrc] = react.exports.useState(urlWithProtocol(url2));
-  react.exports.useEffect(() => {
-    setIframeSrc(urlWithProtocol(url2));
-  }, [url2]);
-  react.exports.useEffect(() => {
-  }, [iframeRef]);
-  const onEnterKey = (e2) => {
-    if (e2.keyCode !== 13)
-      return;
-    const url22 = urlWithProtocol(e2.target.value);
-    setIframeSrc(url22);
-    iframeRef.current.contentWindow.location.replace(url22);
-  };
-  const onRefresh = () => {
-    iframeRef.current.contentWindow.location.replace(iframeSrc);
-  };
-  const onOpenInNewTab = () => {
-    window.open(iframeSrc);
-  };
-  react.exports.useEffect(() => {
-    if (playgroundStatus === "EMPTY")
-      return;
-    if (playgroundStatus === "ACTIVE" && dockerStatus === "RUNNING") {
-      if (iframeSrc !== "http://" && iframeSrc !== "https://") {
-        iframeRef.current.contentWindow.location.replace(iframeSrc);
-      }
-    }
-  }, [playgroundStatus, dockerStatus]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(NavBar, {
-      children: [/* @__PURE__ */ jsx("i", {
-        className: "d42 text-xl reload cursor-pointer",
-        onClick: onRefresh
-      }), /* @__PURE__ */ jsx("input", {
-        type: "text",
-        value: iframeSrc,
-        onChange: (e2) => setIframeSrc(e2.target.value),
-        onKeyDown: onEnterKey
-      }), /* @__PURE__ */ jsx("i", {
-        className: "d42 text-xl file-copy cursor-pointer",
-        onClick: onOpenInNewTab
-      })]
-    }), dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
-      children: /* @__PURE__ */ jsx("span", {
-        children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
-      })
-    }), /* @__PURE__ */ jsx("iframe", {
-      ref: iframeRef,
-      src: iframeSrc,
-      style: {
-        width: "100%",
-        height: "calc(100% - 30px)"
-      }
-    })]
-  });
-};
 var loglevel = { exports: {} };
 (function(module2) {
   (function(root2, definition) {
@@ -232609,6 +232665,7 @@ const Index = (props) => {
   };
   const isFolded = useIndexState.getState().isFolded;
   const playgroundInfo = oTStore((state) => state.playgroundInfo);
+  const dockerInfo = oTStore((state) => state.dockerInfo);
   const [active, setActive] = react.exports.useState("shell");
   const [url2, setUrl] = react.exports.useState(playgroundInfo.url);
   const {
@@ -232647,7 +232704,7 @@ const Index = (props) => {
           children: [/* @__PURE__ */ jsx(SliderComponent, {}), /* @__PURE__ */ jsx(TreeComponent, {})]
         }), /* @__PURE__ */ jsx("section", {
           className: "bg-codezone-black rounded-sm mx-3.5 flex-1 flex flex-col",
-          children: playgroundInfo.dockerId ? /* @__PURE__ */ jsx(react.exports.Suspense, {
+          children: dockerInfo.dockerId ? /* @__PURE__ */ jsx(react.exports.Suspense, {
             fallback: /* @__PURE__ */ jsx(Skeleton, {
               count: 10
             }),