@opensumi/ide-terminal-next 2.12.1-next-079c1930

package/README.md

@@ -0,0 +1,89 @@
+# 终端
+
+## 实现方式
+
+实现 src/common/term.ts 文件中的 ITerminalService 类型，并在 src/browser/index.ts 中替换默认的 service 类型。
+
+```ts
+export interface ITerminalService {
+  /**
+   * 集成方自定义会话唯一标识的函数
+   */
+  makeId(): string;
+  /**
+   * 集成方自定义写入到 localStorage 的键值的函数
+   */
+  restore(): string;
+  /**
+   * 当关闭 IDE 的时候，允许集成方额外向每一个会话标识写入一个字符串字段，
+   * 信息内容由集成方决定
+   *
+   * @param sessionId 会话唯一标识
+   */
+  meta(sessionId: string): string;
+  /**
+   * Xterm 终端的构造选项
+   */
+  getOptions(): ITerminalOptions;
+  /**
+   * 用于获取特定会话的相关信息，包括进程 id 以及进程描述的 name，
+   * 这个函数允许返回为空
+   *
+   * @param sessionId 会话唯一标识
+   */
+  intro(sessionId: string): { pid: number, name: string } | undefined;
+  /**
+   *
+   * @param id 会话唯一标识
+   * @param message 发送的字符串信息
+   */
+  sendText(id: string, message: string): Promise<void>;
+  /**
+   *
+   * @param sessionId 会话唯一标识
+   * @param term 返回的 Xterm 终端实例
+   * @param restore 是否是恢复一个终端
+   * @param meta 恢复终端所需要的额外字段
+   * @param attachMethod 将 websocket 连接和 xterm 连接起来的函数
+   * @param options 创建一个新终端的进程选项
+   */
+  attach(sessionId: string, term: Terminal, restore: boolean, meta: string, attachMethod: (s: WebSocket) => void, options?: TerminalOptions): Promise<void>;
+  /**
+   *
+   * @param sessionId 会话唯一标识
+   * @param cols resize 的列数
+   * @param rows resize 的行数
+   */
+  resize(sessionId: string, cols: number, rows: number): Promise<void>;
+  /**
+   * 销毁一个终端进程
+   *
+   * @param sessionId 会话唯一标识
+   */
+  disposeById(sessionId: string): void;
+  /**
+   * 异步向后端获取一个会话的进程 id
+   *
+   * @param sessionId 会话唯一标识
+   */
+  getProcessId(sessionId: string): Promise<number>;
+
+  /**
+   * 报错处理的事件
+   *
+   * @param handler
+   */
+  onError(handler: (error: ITerminalError) => void): void;
+}
+```
+
+## 外部和内部 API
+
+对于 common 中默认导出的 api 认为为外部 api，而对于 common 中没有默认导出的类型则认为为内部 api，内部 api 依然可以通过子名称获取到类型进行覆盖或者使用，但是内部 api 的任何 api 修改不作为 bk，不推荐直接使用内部 api。
+
+## 接下来
+
+* [ ] 终端首次初始化使用对比的外层 dom 节点需要可指定，这里可能需要使用 core 内部 api 手动计算
+* [ ] 终端 Singleton 模式
+* [ ] 终端后端 Pty 代码优化，需要支持开发时重连
+* [ ] Vim 显示优化

package/lib/browser/component/resize.delegate.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IWidget } from '../../common/resize';
+export interface IResizeDelegateProps {
+    start: () => void;
+    stop: () => void;
+    left: IWidget | null;
+    self: IWidget;
+    right: IWidget | null;
+    last: boolean;
+    wholeWidth: number;
+}
+declare const _default: (props: IResizeDelegateProps) => JSX.Element;
+export default _default;
+//# sourceMappingURL=resize.delegate.d.ts.map

package/lib/browser/component/resize.delegate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.delegate.d.ts","sourceRoot":"","sources":["../../../src/browser/component/resize.delegate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAI9C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB;gCAMsB,oBAAoB;AAA3C,wBAwDE"}

package/lib/browser/component/resize.delegate.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const resize_module_less_1 = (0, tslib_1.__importDefault)(require("./resize.module.less"));
+// todo: 将这些变量放到一个实例中管理
+let startX = 0;
+let original = null;
+exports.default = (props) => {
+    const { start, stop, self, left, right, wholeWidth, last } = props;
+    const onMouseDown = (event) => {
+        startX = event.clientX;
+        original = self;
+        start();
+    };
+    const onMouseMove = (event) => {
+        if (!startX) {
+            return false;
+        }
+        const endX = event.clientX;
+        const move = (endX - startX) / wholeWidth * 100;
+        startX = endX;
+        if (move < 0) {
+            self && self.increase(move);
+            right && right.increase(-move);
+        }
+        else {
+            if (original) {
+                if (original === left) {
+                    self && self.increase(-move);
+                    left && left.increase(move);
+                }
+            }
+        }
+    };
+    const onMouseUp = (_) => {
+        startX = 0;
+        original = null;
+        self.resize();
+        left && left.resize();
+        right && right.resize();
+        stop();
+    };
+    return (react_1.default.createElement("div", { className: resize_module_less_1.default.resizeDelegetContainer, onMouseUp: onMouseUp, onMouseMove: onMouseMove }, !last &&
+        react_1.default.createElement("div", { className: resize_module_less_1.default.resizeDelegateBar, onMouseDown: onMouseDown, onMouseUp: onMouseUp })));
+};
+//# sourceMappingURL=resize.delegate.js.map

package/lib/browser/component/resize.delegate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.delegate.js","sourceRoot":"","sources":["../../../src/browser/component/resize.delegate.tsx"],"names":[],"mappings":";;;AAAA,+DAA0B;AAG1B,2FAA0C;AAY1C,uBAAuB;AACvB,IAAI,MAAM,GAAG,CAAC,CAAC;AACf,IAAI,QAAQ,GAAmB,IAAI,CAAC;AAEpC,kBAAe,CAAC,KAA2B,EAAE,EAAE;IAC7C,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC9C,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QACvB,QAAQ,GAAG,IAAI,CAAC;QAChB,KAAK,EAAE,CAAC;IACV,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC9C,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,KAAK,CAAC;SACd;QAED,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC;QAC3B,MAAM,IAAI,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,GAAG,CAAC;QAChD,MAAM,GAAG,IAAI,CAAC;QAEd,IAAI,IAAI,GAAG,CAAC,EAAE;YACZ,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC5B,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;SAChC;aAAM;YACL,IAAI,QAAQ,EAAE;gBACZ,IAAI,QAAQ,KAAK,IAAI,EAAE;oBACrB,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;oBAC7B,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;iBAC7B;aACF;SACF;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAmB,EAAE,EAAE;QACxC,MAAM,GAAG,CAAC,CAAC;QACX,QAAQ,GAAG,IAAI,CAAC;QAChB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,EAAE,CAAC;IACT,CAAC,CAAC;IAEF,OAAO,CACL,uCACE,SAAS,EAAG,4BAAM,CAAC,sBAAsB,EACzC,SAAS,EAAG,SAAS,EACrB,WAAW,EAAG,WAAW,IAGvB,CAAC,IAAI;QACL,uCACE,SAAS,EAAG,4BAAM,CAAC,iBAAiB,EACpC,WAAW,EAAG,WAAW,EACzB,SAAS,EAAG,SAAS,GAChB,CAEL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib/browser/component/resize.module.less

@@ -0,0 +1,55 @@
+@import '~@opensumi/ide-core-browser/lib/style/variable.less';
+
+.resizeWrapper {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.resizePanel {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  .resizeItem {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0px 2px 0px 10px;
+  }
+}
+
+.resizeDelegate {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  pointer-events: all;
+  z-index: 1;
+
+  .resizeHandler {
+    width: 100%;
+    height: 100%;
+
+    .resizeDelegetContainer {
+      width: 100%;
+      height: 100%;
+      pointer-events: inherit;
+    }
+
+    .resizeDelegateBar {
+      float: right;
+      width: 1px;
+      height: 100%;
+      cursor: ew-resize;
+      transform: translateX(1px);
+      pointer-events: all;
+      background: var(--terminal-foreground);
+      opacity: 0.35;
+    }
+  }
+}

package/lib/browser/component/resize.view.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IWidget, IWidgetGroup } from '../../common/resize';
+export declare enum ResizeDirection {
+    vertical = 0,
+    horizontal = 1
+}
+export interface IResizeViewProps {
+    direction: ResizeDirection;
+    useFlex: boolean;
+    shadow: boolean;
+    group: IWidgetGroup;
+    draw: (widget: IWidget) => JSX.Element;
+}
+declare const _default: React.FunctionComponent<IResizeViewProps>;
+export default _default;
+//# sourceMappingURL=resize.view.d.ts.map

package/lib/browser/component/resize.view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.view.d.ts","sourceRoot":"","sources":["../../../src/browser/component/resize.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAI5D,oBAAY,eAAe;IACzB,QAAQ,IAAA;IACR,UAAU,IAAA;CACX;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CACxC;;AAED,wBAwEG"}

package/lib/browser/component/resize.view.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizeDirection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const resize_delegate_1 = (0, tslib_1.__importDefault)(require("./resize.delegate"));
+const resize_module_less_1 = (0, tslib_1.__importDefault)(require("./resize.module.less"));
+var ResizeDirection;
+(function (ResizeDirection) {
+    ResizeDirection[ResizeDirection["vertical"] = 0] = "vertical";
+    ResizeDirection[ResizeDirection["horizontal"] = 1] = "horizontal";
+})(ResizeDirection = exports.ResizeDirection || (exports.ResizeDirection = {}));
+exports.default = (0, mobx_react_lite_1.observer)((props) => {
+    const { group, shadow } = props;
+    const [event, setEvent] = react_1.default.useState(false);
+    const [wholeWidth, setWholeWidth] = react_1.default.useState(Infinity);
+    const whole = react_1.default.createRef();
+    react_1.default.useEffect(() => {
+        if (whole.current && (whole.current.clientHeight !== wholeWidth)) {
+            setWholeWidth(whole.current.clientWidth);
+        }
+    });
+    return (react_1.default.createElement("div", { className: resize_module_less_1.default.resizeWrapper, ref: whole },
+        react_1.default.createElement("div", { style: {
+                pointerEvents: event ? 'all' : 'none',
+            }, className: resize_module_less_1.default.resizeDelegate }, group && group.widgets.map((widget, index) => {
+            const left = index - 1 > -1 ? group.widgets[index - 1] : null;
+            const self = group.widgets[index];
+            const right = index + 1 < group.widgets.length ? group.widgets[index + 1] : null;
+            return (react_1.default.createElement("div", { key: `resize-item-${index}`, style: { width: `${widget.shadowDynamic}%` }, className: resize_module_less_1.default.resizeHandler },
+                react_1.default.createElement(resize_delegate_1.default, { wholeWidth: wholeWidth, start: () => setEvent(true), stop: () => setEvent(false), self: self, left: left, right: right, last: index === (group.widgets.length - 1) })));
+        })),
+        react_1.default.createElement("div", { style: {
+                pointerEvents: !event ? 'all' : 'none',
+            }, className: resize_module_less_1.default.resizePanel }, group && group.widgets.map((widget) => {
+            return (react_1.default.createElement("div", { key: widget.id, style: { width: `${shadow ? widget.dynamic : widget.shadowDynamic}%` }, className: resize_module_less_1.default.resizeItem }, props.draw(widget)));
+        }))));
+});
+//# sourceMappingURL=resize.view.js.map

package/lib/browser/component/resize.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.view.js","sourceRoot":"","sources":["../../../src/browser/component/resize.view.tsx"],"names":[],"mappings":"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"}

package/lib/browser/component/tab.item.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ItemProps } from '../../common';
+export declare function renderInfoItem(props: ItemProps): JSX.Element;
+export declare function renderAddItem(props: ItemProps): JSX.Element;
+declare const _default: (props: ItemProps) => JSX.Element | null;
+export default _default;
+//# sourceMappingURL=tab.item.d.ts.map

package/lib/browser/component/tab.item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.item.d.ts","sourceRoot":"","sources":["../../../src/browser/component/tab.item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAKnD,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,eAyD9C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,eAY7C;gCAEsB,SAAS;AAAhC,wBAWE"}

package/lib/browser/component/tab.item.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAddItem = exports.renderInfoItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const common_1 = require("../../common");
+const debouce = require("lodash.debounce");
+const tab_module_less_1 = (0, tslib_1.__importDefault)(require("./tab.module.less"));
+function renderInfoItem(props) {
+    const handleSelect = debouce(() => props.onClick && props.onClick(), 20);
+    const handleClose = debouce(() => props.onClose && props.onClose(), 20);
+    const handleOnKeyDown = (e) => {
+        if (e.key === 'Enter' && props.onInputEnter && props.id) {
+            props.onInputEnter(props.id, e.target.value);
+        }
+    };
+    const ref = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        var _a;
+        // 刚刚选中，滚一下
+        if (props.selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        }
+    }, [props.selected]);
+    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)({
+            [tab_module_less_1.default.item_container]: true,
+            [tab_module_less_1.default.item_selected]: !!props.selected,
+        }), onClick: () => handleSelect(), onContextMenu: (event) => props.onContextMenu && props.onContextMenu(event) },
+        props.editable ?
+            react_1.default.createElement("input", { autoFocus: true, ref: (ele) => ele && ele.select(), className: tab_module_less_1.default.item_info_input, defaultValue: props.name, onClick: (e) => e.stopPropagation(), onBlur: () => (props.onInputBlur && props.id) && props.onInputBlur(props.id), onKeyDown: (e) => handleOnKeyDown(e) }) :
+            react_1.default.createElement("div", { id: props.id, className: tab_module_less_1.default.item_info_name, title: props.name }, props.name),
+        props.editable ?
+            react_1.default.createElement("div", null) :
+            react_1.default.createElement("div", { className: (0, classnames_1.default)([(0, ide_core_browser_1.getIcon)('close'), tab_module_less_1.default.close_icon]), onClick: (event) => {
+                    event.stopPropagation();
+                    handleClose();
+                } })));
+}
+exports.renderInfoItem = renderInfoItem;
+function renderAddItem(props) {
+    const handleAdd = debouce(() => props.onClick && props.onClick(), 20);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
+            [(0, ide_core_browser_1.getIcon)('plus')]: true,
+            [tab_module_less_1.default.item_add]: true,
+        }), onClick: () => handleAdd() }));
+}
+exports.renderAddItem = renderAddItem;
+exports.default = (props) => {
+    const type = props.type || common_1.ItemType.info;
+    switch (type) {
+        case common_1.ItemType.info:
+            return props.provider.infoItemRender(props);
+        case common_1.ItemType.add:
+            return props.provider.addItemRender(props);
+        default:
+            return null;
+    }
+};
+//# sourceMappingURL=tab.item.js.map

package/lib/browser/component/tab.item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.item.js","sourceRoot":"","sources":["../../../src/browser/component/tab.item.tsx"],"names":[],"mappings":"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"}

package/lib/browser/component/tab.module.less

@@ -0,0 +1,112 @@
+.view_container {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+}
+
+.tabs {
+  display: flex;
+  :first-child {
+    &.item_container {
+      border-left: 1px solid var(--kt-panelTab-border);
+    }
+  }
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.button {
+  flex: 1;
+}
+
+.item_container {
+  padding: 0px 12px 0px 12px;
+  cursor: pointer;
+  user-select: none;
+  height: 28px;
+  display: flex;
+  color: var(--kt-panelTab-inactiveForeground);
+  background-color: var(--kt-panelTab-inactiveBackground);
+  border-right: 1px solid var(--kt-panelTab-border);
+  max-width: 800px;
+  min-width: 105px;
+  align-items: center;
+  position: relative;
+  :last-child {
+    transition: opacity 0.2s ease-in-out;
+    opacity: 0;
+    line-height: 24px;
+    border-right: 0;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--kt-panelTab-border);
+  }
+}
+
+.item_container:hover {
+  :last-child {
+    opacity: 1;
+  }
+}
+
+.item_info_name {
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+  height: 20px;
+  position: relative;
+  text-indent: 1px;
+  max-width: 160px;
+}
+
+.item_info_input {
+  flex: 1;
+  text-indent: 0px;
+  text-align: left;
+  border: none;
+  outline: none;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+  color: inherit;
+  background-color: inherit;
+}
+
+.item_selected {
+  color: var(--kt-panelTab-activeForeground);
+  background-color: var(--kt-panelTab-activeBackground);
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    width: 100%;
+    height: 1px;
+    background-color: var(--kt-panelTab-activeBackground);
+  }
+}
+
+.item_add {
+  display: inline-block;
+  padding: 0 6px;
+  line-height: 28px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.close_icon {
+  color: var(--kt-panelTabActionIcon-foreground);
+}

package/lib/browser/component/tab.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.FunctionComponent<object>;
+export default _default;
+//# sourceMappingURL=tab.view.d.ts.map

package/lib/browser/component/tab.view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.view.d.ts","sourceRoot":"","sources":["../../../src/browser/component/tab.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;AAS1B,wBA6CG"}

package/lib/browser/component/tab.view.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const common_1 = require("../../common");
+const tab_item_1 = (0, tslib_1.__importDefault)(require("./tab.item"));
+const terminal_context_menu_1 = require("../terminal.context-menu");
+const tab_module_less_1 = (0, tslib_1.__importDefault)(require("./tab.module.less"));
+exports.default = (0, mobx_react_lite_1.observer)(() => {
+    const view = (0, ide_core_browser_1.useInjectable)(common_1.ITerminalGroupViewService);
+    const provider = (0, ide_core_browser_1.useInjectable)(common_1.ITerminalRenderProvider);
+    const menuService = (0, ide_core_browser_1.useInjectable)(terminal_context_menu_1.TerminalContextMenuService);
+    return (react_1.default.createElement("div", { className: tab_module_less_1.default.view_container },
+        react_1.default.createElement("div", { className: tab_module_less_1.default.tabs }, view.groups.map((group, index) => {
+            if (!group) {
+                return;
+            }
+            return (react_1.default.createElement(tab_item_1.default, { key: group.id, id: group.id, editable: group.editable, name: group.snapshot || 'init...', selected: view.currentGroup && view.currentGroup.id === group.id, onInputBlur: () => group.unedit(), onInputEnter: (_, name) => group.rename(name), onClick: () => view.selectGroup(index), onClose: () => view.removeGroup(index), onContextMenu: (event) => menuService.onTabContextMenu(event, index), provider: provider }));
+        })),
+        react_1.default.createElement("div", { className: tab_module_less_1.default.button },
+            react_1.default.createElement(tab_item_1.default, { type: common_1.ItemType.add, onClick: () => {
+                    const index = view.createGroup();
+                    const group = view.getGroup(index);
+                    view.createWidget(group);
+                    view.selectGroup(index);
+                }, provider: provider }))));
+});
+//# sourceMappingURL=tab.view.js.map

package/lib/browser/component/tab.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.view.js","sourceRoot":"","sources":["../../../src/browser/component/tab.view.tsx"],"names":[],"mappings":";;;AAAA,+DAA0B;AAC1B,qDAA2C;AAC3C,iEAA2D;AAC3D,yCAA4F;AAC5F,uEAAiC;AACjC,oEAAsE;AAEtE,qFAAuC;AAEvC,kBAAe,IAAA,0BAAQ,EAAC,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG,IAAA,gCAAa,EAA4B,kCAAyB,CAAC,CAAC;IACjF,MAAM,QAAQ,GAAG,IAAA,gCAAa,EAA0B,gCAAuB,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAA6B,kDAA0B,CAAC,CAAC;IAE1F,OAAO,CACL,uCAAK,SAAS,EAAG,yBAAM,CAAC,cAAc;QACpC,uCAAK,SAAS,EAAG,yBAAM,CAAC,IAAI,IAExB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO;aACR;YACD,OAAO,CACL,8BAAC,kBAAO,IACN,GAAG,EAAG,KAAK,CAAC,EAAE,EACd,EAAE,EAAG,KAAK,CAAC,EAAE,EACb,QAAQ,EAAG,KAAK,CAAC,QAAQ,EACzB,IAAI,EAAG,KAAK,CAAC,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,EACjE,WAAW,EAAG,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,EAClC,YAAY,EAAG,CAAC,CAAS,EAAE,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACvC,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACvC,aAAa,EAAG,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,EACrE,QAAQ,EAAG,QAAQ,GACV,CACZ,CAAC;QACJ,CAAC,CAAC,CAEA;QACN,uCAAK,SAAS,EAAG,yBAAM,CAAC,MAAM;YAC5B,8BAAC,kBAAO,IACN,IAAI,EAAG,iBAAQ,CAAC,GAAG,EACnB,OAAO,EAAG,GAAG,EAAE;oBACb,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;oBACzB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAG,QAAQ,GACnB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/browser/component/terminal.module.less

@@ -0,0 +1,69 @@
+@import "~@opensumi/ide-components/lib/style/mixins.less";
+
+.terminalWrapper {
+  height: 100%;
+  width: 100%;
+}
+
+.terminalContainer {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.terminalInstance {
+  height: 100%;
+  width: 100%;
+}
+
+.group {
+  height: 100%;
+  width: 100%;
+}
+
+.terminalCover {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background: var(--terminal-background);
+  opacity: 0.8;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.terminalContent {
+  height: 100%;
+  width: 100%;
+}
+
+.terminalSearch {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 999;
+  right: 16px;
+  .overlay-shadow();
+  background: var(--kt-panelTitle-background);
+
+  input {
+    background: var(--kt-panelTitle-background);
+    border: none;
+    outline: none;
+    padding: 3px 0px 3px 8px;
+    font-size: 12px;
+  }
+
+  div {
+    padding: 0px 6px;
+    cursor: pointer;
+  }
+}
+
+.terminalFake {
+  position: absolute;
+  z-index: -999;
+}

package/lib/browser/component/terminal.select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.FunctionComponent<object>;
+export default _default;
+//# sourceMappingURL=terminal.select.d.ts.map

package/lib/browser/component/terminal.select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"terminal.select.d.ts","sourceRoot":"","sources":["../../../src/browser/component/terminal.select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;AAO1B,wBAsBG"}

package/lib/browser/component/terminal.select.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const common_1 = require("../../common");
+const terminal_module_less_1 = (0, tslib_1.__importDefault)(require("./terminal.module.less"));
+exports.default = (0, mobx_react_lite_1.observer)(() => {
+    const view = (0, ide_core_browser_1.useInjectable)(common_1.ITerminalGroupViewService);
+    const onChange = (event) => {
+        const index = event.target.value;
+        view.selectGroup(parseInt(index, 10));
+    };
+    const index = view.currentGroupIndex;
+    return (react_1.default.createElement("div", { className: terminal_module_less_1.default.toolbarSelect },
+        react_1.default.createElement("select", { value: index || 0, onChange: onChange }, (view.groups || []).map((group, index) => {
+            return react_1.default.createElement("option", { key: `${group}-${index}`, value: index }, `${index + 1}: ${group.snapshot}`);
+        }))));
+});
+//# sourceMappingURL=terminal.select.js.map

package/lib/browser/component/terminal.select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"terminal.select.js","sourceRoot":"","sources":["../../../src/browser/component/terminal.select.tsx"],"names":[],"mappings":";;;AAAA,+DAA0B;AAC1B,qDAA2C;AAC3C,iEAA2D;AAC3D,yCAAyD;AAEzD,+FAA4C;AAE5C,kBAAe,IAAA,0BAAQ,EAAC,GAAG,EAAE;IAE3B,MAAM,IAAI,GAAG,IAAA,gCAAa,EAA4B,kCAAyB,CAAC,CAAC;IAEjF,MAAM,QAAQ,GAAG,CAAC,KAA2C,EAAE,EAAE;QAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAErC,OAAO,CACL,uCAAK,SAAS,EAAE,8BAAM,CAAC,aAAa;QAClC,0CAAQ,KAAK,EAAG,KAAK,IAAI,CAAC,EAAG,QAAQ,EAAG,QAAQ,IAE5C,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACvC,OAAO,0CAAQ,GAAG,EAAG,GAAG,KAAK,IAAI,KAAK,EAAE,EAAG,KAAK,EAAG,KAAK,IAAK,GAAG,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,QAAQ,EAAE,CAAW,CAAC;QAC5G,CAAC,CAAC,CAEG,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/browser/component/terminal.variable.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IMergedEnvironmentVariableCollectionDiff } from '../../common/environmentVariable';
+interface ITerminalVariableProps {
+    diff: IMergedEnvironmentVariableCollectionDiff;
+}
+export declare const TerminalVariable: ({ diff }: ITerminalVariableProps) => JSX.Element;
+export {};
+//# sourceMappingURL=terminal.variable.d.ts.map

package/lib/browser/component/terminal.variable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"terminal.variable.d.ts","sourceRoot":"","sources":["../../../src/browser/component/terminal.variable.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA6C,wCAAwC,EAAoB,MAAM,kCAAkC,CAAC;AAIzJ,UAAU,sBAAsB;IAC9B,IAAI,EAAE,wCAAwC,CAAC;CAChD;AAeD,eAAO,MAAM,gBAAgB,aAAc,sBAAsB,gBA2ChE,CAAC"}