@opensumi/ide-terminal-next 3.5.1-next-1730948411.0 → 3.5.1-next-1730963433.0

package/lib/common/render.d.ts

@@ -1,17 +1,14 @@
 /// <reference types="react" />
 import { ThemeType } from '@opensumi/ide-theme/lib/common';
-import { IShellLaunchConfig } from './pty';
+import { IWidgetGroup } from '../index';
 export declare enum ItemType {
     info = 0,
     add = 1
 }
 export interface ItemProps {
-    id?: string;
-    name?: string;
+    group?: IWidgetGroup;
     selected?: boolean;
     type?: ItemType;
-    editable?: boolean;
-    options?: IShellLaunchConfig;
     onClick?: () => void;
     onClose?: () => void;
     onInputBlur?: (id: string) => void;

package/lib/common/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/common/render.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAE3C,oBAAY,QAAQ;IAClB,IAAI,IAAI;IACR,GAAG,IAAA;CACJ;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,QAAQ,EAAE,uBAAuB,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,uBAAuB,eAAmC,CAAC;AACxE,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnD,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACnD"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/common/render.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,oBAAY,QAAQ;IAClB,IAAI,IAAI;IACR,GAAG,IAAA;CACJ;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,QAAQ,EAAE,uBAAuB,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,uBAAuB,eAAmC,CAAC;AACxE,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnD,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACnD"}

package/lib/common/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/common/render.ts"],"names":[],"mappings":";;;AAIA,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,uCAAQ,CAAA;IACR,qCAAG,CAAA;AACL,CAAC,EAHW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAGnB;AAoBY,QAAA,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/common/render.ts"],"names":[],"mappings":";;;AAIA,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,uCAAQ,CAAA;IACR,qCAAG,CAAA;AACL,CAAC,EAHW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAGnB;AAiBY,QAAA,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC"}

package/lib/common/resize.d.ts

@@ -1,11 +1,12 @@
 import { Disposable, Event } from '@opensumi/ide-core-common';
+import { IObservable, ISettableObservable } from '@opensumi/ide-monaco/lib/common/observable';
 import { IShellLaunchConfig } from './pty';
 export interface IWidget extends Disposable {
+    dynamic: IObservable<number>;
+    shadowDynamic: IObservable<number>;
+    name: ISettableObservable<string>;
+    processName: ISettableObservable<string>;
     id: string;
-    name: string;
-    processName?: string;
-    dynamic: number;
-    shadowDynamic: number;
     element: HTMLDivElement;
     group: IWidgetGroup;
     reuse: boolean;
@@ -22,16 +23,16 @@ export interface IWidget extends Disposable {
     onError: Event<boolean>;
 }
 export interface IWidgetGroup extends Disposable {
+    name: IObservable<string>;
+    snapshot: IObservable<string>;
+    activated: IObservable<boolean>;
+    editable: IObservable<boolean>;
+    widgets: IObservable<IWidget[]>;
     id: string;
-    name: string;
     options?: IShellLaunchConfig;
-    editable: boolean;
-    activated: boolean;
     length: number;
-    widgets: IWidget[];
     widgetsMap: Map<string, IWidget>;
     last: IWidget;
-    snapshot: string;
     addWidget(widget: IWidget): void;
     removeWidgetByIndex: (index: number) => IWidget;
     edit(): void;

package/lib/common/resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/common/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,OAAQ,SAAQ,UAAU;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,IAAI,IAAI,IAAI,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/common/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAE9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,OAAQ,SAAQ,UAAU;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,WAAW,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAEzC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IAEf,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IAEhC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,IAAI,IAAI,IAAI,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-terminal-next",
-  "version": "3.5.1-next-1730948411.0",
+  "version": "3.5.1-next-1730963433.0",
   "files": [
     "lib",
     "src"
@@ -17,11 +17,11 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-connection": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-core-common": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-core-node": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-file-service": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-utils": "3.5.1-next-1730948411.0",
+    "@opensumi/ide-connection": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-core-common": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-core-node": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-file-service": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-utils": "3.5.1-next-1730963433.0",
     "@xterm/addon-canvas": "0.7.0",
     "@xterm/addon-fit": "0.10.0",
     "@xterm/addon-search": "0.15.0",
@@ -31,18 +31,19 @@
     "os-locale": "^4.0.0"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-core-browser": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-dev-tool": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-editor": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-main-layout": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-overlay": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-status-bar": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-theme": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-variable": "3.5.1-next-1730948411.0",
-    "@opensumi/ide-workspace": "3.5.1-next-1730948411.0",
+    "@opensumi/ide-components": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-core-browser": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-dev-tool": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-editor": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-main-layout": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-monaco": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-overlay": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-status-bar": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-theme": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-variable": "3.5.1-next-1730963433.0",
+    "@opensumi/ide-workspace": "3.5.1-next-1730963433.0",
     "@types/http-proxy": "^1.17.2",
     "http-proxy": "^1.18.0"
   },
-  "gitHead": "0cdd8c2585ef42131d5453e7f9f4d80f07027011"
+  "gitHead": "1ef9d77a91894dc04e317a815be97c786b7f9920"
 }

package/src/browser/component/resize.view.tsx

@@ -1,8 +1,7 @@
 import cls from 'classnames';
-import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { getIcon, useInjectable } from '@opensumi/ide-core-browser';
+import { getIcon, useAutorun, useInjectable } from '@opensumi/ide-core-browser';
 
 import { ITerminalGroupViewService } from '../../common/controller';
 import { IWidget, IWidgetGroup } from '../../common/resize';
@@ -23,8 +22,46 @@ export interface IResizeViewProps {
   draw: (widget: IWidget) => JSX.Element;
 }
 
-export default observer((props: IResizeViewProps) => {
+const ResizeItem = ({ index, widget, wholeWidth, setEvent, self, left, right, last }) => {
+  const shadowDynamic = useAutorun(widget.shadowDynamic);
+
+  return (
+    <div key={`resize-item-${index}`} style={{ width: `${shadowDynamic}%` }} className={styles.resizeHandler}>
+      <ResizeDelegate
+        wholeWidth={wholeWidth}
+        start={() => setEvent(true)}
+        stop={() => setEvent(false)}
+        self={self}
+        left={left}
+        right={right}
+        last={last}
+      />
+    </div>
+  );
+};
+
+const ResizePanelItem = ({ widget, dynamic, draw, handleRemoveWidget, widgetsLength }) => {
+  const _dynamic = useAutorun(dynamic);
+
+  return (
+    <div key={widget.id} style={{ width: `${_dynamic}%` }} className={styles.resizeItem}>
+      {draw(widget)}
+      {widgetsLength > 1 && (
+        <div
+          className={cls(styles.closeBtn, getIcon('close'))}
+          onClick={() => {
+            handleRemoveWidget(widget.id);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default (props: IResizeViewProps) => {
   const { group, shadow } = props;
+  const widgets = useAutorun(group.widgets);
+
   const [event, setEvent] = React.useState(false);
   const [wholeWidth, setWholeWidth] = React.useState(Infinity);
   const view = useInjectable<ITerminalGroupViewService>(ITerminalGroupViewService);
@@ -42,61 +79,39 @@ export default observer((props: IResizeViewProps) => {
 
   return (
     <div className={styles.resizeWrapper} ref={whole}>
-      <div
-        style={{
-          pointerEvents: event ? 'all' : 'none',
-        }}
-        className={styles.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;
+      <div style={{ pointerEvents: event ? 'all' : 'none' }} className={styles.resizeDelegate}>
+        {widgets &&
+          widgets.map((widget, index) => {
+            const left = index - 1 > -1 ? widgets[index - 1] : null;
+            const self = widgets[index];
+            const right = index + 1 < widgets.length ? widgets[index + 1] : null;
+
             return (
-              <div
-                key={`resize-item-${index}`}
-                style={{ width: `${widget.shadowDynamic}%` }}
-                className={styles.resizeHandler}
-              >
-                <ResizeDelegate
-                  wholeWidth={wholeWidth}
-                  start={() => setEvent(true)}
-                  stop={() => setEvent(false)}
-                  self={self}
-                  left={left}
-                  right={right}
-                  last={index === group.widgets.length - 1}
-                />
-              </div>
+              <ResizeItem
+                index={index}
+                widget={widget}
+                wholeWidth={wholeWidth}
+                setEvent={setEvent}
+                self={self}
+                left={left}
+                right={right}
+                last={index === widgets.length - 1}
+              />
             );
           })}
       </div>
-      <div
-        style={{
-          pointerEvents: !event ? 'all' : 'none',
-        }}
-        className={styles.resizePanel}
-      >
-        {group &&
-          group.widgets.map((widget) => (
-            <div
-              key={widget.id}
-              style={{ width: `${shadow ? widget.dynamic : widget.shadowDynamic}%` }}
-              className={styles.resizeItem}
-            >
-              {props.draw(widget)}
-              {group.widgets.length > 1 && (
-                <div
-                  className={cls(styles.closeBtn, getIcon('close'))}
-                  onClick={() => {
-                    handleRemoveWidget(widget.id);
-                  }}
-                />
-              )}
-            </div>
-          ))}
+      <div style={{ pointerEvents: !event ? 'all' : 'none' }} className={styles.resizePanel}>
+        {widgets &&
+          widgets.map((widget) => (
+              <ResizePanelItem
+                widget={widget}
+                dynamic={shadow ? widget.dynamic : widget.shadowDynamic}
+                draw={props.draw}
+                handleRemoveWidget={handleRemoveWidget}
+                widgetsLength={widgets.length}
+              />
+            ))}
       </div>
     </div>
   );
-});
+};

package/src/browser/component/tab.item.tsx

@@ -1,15 +1,14 @@
 import cls from 'classnames';
 import debounce from 'lodash/debounce';
-import { observer } from 'mobx-react-lite';
-import React, { KeyboardEvent, createElement, useEffect, useRef } from 'react';
+import React, { KeyboardEvent, createElement, useCallback, useEffect, useRef } from 'react';
 
 import { Icon } from '@opensumi/ide-components/lib/icon/icon';
 import {
-  AppConfig,
   TERMINAL_COMMANDS,
   URI,
   getIcon,
   localize,
+  useAutorun,
   useDesignStyles,
   useInjectable,
 } from '@opensumi/ide-core-browser';
@@ -22,7 +21,7 @@ import { ItemProps, ItemType } from '../../common';
 
 import styles from './tab.module.less';
 
-export const renderInfoItem = observer((props: ItemProps) => {
+export const renderInfoItem = (props: ItemProps) => {
   const iconService = useInjectable<IIconService>(IconService);
   const handleSelect = debounce(() => props.onClick && props.onClick(), 20);
   const handleClose = debounce(() => props.onClose && props.onClose(), 20);
@@ -31,31 +30,45 @@ export const renderInfoItem = observer((props: ItemProps) => {
   const styles_item_info_name = useDesignStyles(styles.item_info_name, 'item_info_name');
   const styles_tab_close_icon = useDesignStyles(styles.tab_close_icon, 'tab_close_icon');
   const layoutViewSize = useInjectable<LayoutViewSizeConfig>(LayoutViewSizeConfig);
-
-  const handleOnKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && props.onInputEnter && props.id) {
-      props.onInputEnter(props.id, (e.target as any).value);
-    }
-  };
   const ref = useRef<HTMLDivElement>(null);
+
+  const { group } = props;
+  if (!group) {
+    return null;
+  }
+
+  const { options, id } = group;
+
+  const editable = useAutorun(group.editable);
+  const name = useAutorun(group.snapshot);
+
+  const handleOnKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && props.onInputEnter && id) {
+        props.onInputEnter(id, (e.target as any).value);
+      }
+    },
+    [id, props.onInputEnter],
+  );
+
   useEffect(() => {
     if (props.selected) {
       ref.current?.scrollIntoView();
     }
-  }, [props.selected]);
+  }, [ref, props.selected]);
 
   let iconClass;
 
-  if (props.options?.icon) {
-    if ((props.options.icon as any)?.id) {
-      iconClass = iconService.fromString(`$(${(props.options.icon as any)?.id})`);
-    } else if (props.options.icon instanceof URI) {
-      iconClass = iconService.fromIcon(props.options?.icon.toString());
-    } else if ((props.options.icon as any)?.light || (props.options?.icon as any)?.dark) {
+  if (options?.icon) {
+    if ((options.icon as any)?.id) {
+      iconClass = iconService.fromString(`$(${(options.icon as any)?.id})`);
+    } else if (options.icon instanceof URI) {
+      iconClass = iconService.fromIcon(options?.icon.toString());
+    } else if ((options.icon as any)?.light || (options?.icon as any)?.dark) {
       iconClass =
         props.theme === 'light'
-          ? iconService.fromIcon((props.options.icon as any).light.toString())
-          : iconService.fromIcon((props.options.icon as any).dark.toString());
+          ? iconService.fromIcon((options.icon as any).light.toString())
+          : iconService.fromIcon((options.icon as any).dark.toString());
     }
   }
 
@@ -70,34 +83,32 @@ export const renderInfoItem = observer((props: ItemProps) => {
       onClick={() => handleSelect()}
       onContextMenu={(event) => props.onContextMenu && props.onContextMenu(event)}
     >
-      {props.editable ? (
+      {editable ? (
         <input
           autoFocus
           ref={(ele) => ele && ele.select()}
           className={styles.item_info_input}
-          defaultValue={props.name}
+          defaultValue={name}
           onClick={(e) => e.stopPropagation()}
-          onBlur={() => props.onInputBlur && props.id && props.onInputBlur(props.id)}
+          onBlur={() => props.onInputBlur && group.id && props.onInputBlur(group.id)}
           onKeyDown={(e) => handleOnKeyDown(e)}
         ></input>
       ) : (
-        <div id={props.id} className={styles_item_info_name} title={props.name}>
-          {props.name !== '' ? (
+        <div id={group.id} className={styles_item_info_name} title={name}>
+          {name !== '' ? (
             <>
               <Icon
-                iconClass={
-                  iconClass ? iconClass : getIcon(props.name?.toLowerCase() || 'terminal') || getIcon('terminal')
-                }
+                iconClass={iconClass ? iconClass : getIcon(name?.toLowerCase() || 'terminal') || getIcon('terminal')}
                 style={{ marginRight: 4, color: 'inherit', fontSize: 14 }}
               />
-              <span className={styles.item_title}>{props.name}</span>
+              <span className={styles.item_title}>{name}</span>
             </>
           ) : (
             <Loading />
           )}
         </div>
       )}
-      {props.editable ? (
+      {editable ? (
         <div></div>
       ) : (
         <div
@@ -110,9 +121,9 @@ export const renderInfoItem = observer((props: ItemProps) => {
       )}
     </div>
   );
-});
+};
 
-export const renderAddItem = observer((props: ItemProps) => {
+export const renderAddItem = (props: ItemProps) => {
   const handleAdd = debounce(() => props.onClick && props.onClick(), 20);
   const keybinding = props.getKeybinding && props.getKeybinding(TERMINAL_COMMANDS.ADD.id);
   const createTitle = keybinding ? `${localize('terminal.new')}(${keybinding})` : localize('terminal.new');
@@ -138,7 +149,7 @@ export const renderAddItem = observer((props: ItemProps) => {
       />
     </div>
   );
-});
+};
 
 export default (props: ItemProps) => {
   const type = props.type || ItemType.info;

package/src/browser/component/tab.view.tsx

@@ -1,8 +1,7 @@
-import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Scrollbars } from '@opensumi/ide-components';
-import { KeybindingRegistry, useDesignStyles, useInjectable } from '@opensumi/ide-core-browser';
+import { KeybindingRegistry, useAutorun, useDesignStyles, useInjectable } from '@opensumi/ide-core-browser';
 import { IThemeService, ThemeType } from '@opensumi/ide-theme';
 
 import { ITerminalGroupViewService, ITerminalRenderProvider, ItemType } from '../../common';
@@ -11,7 +10,7 @@ import { TerminalContextMenuService } from '../terminal.context-menu';
 import TabItem from './tab.item';
 import styles from './tab.module.less';
 
-export default observer(() => {
+export default () => {
   const view = useInjectable<ITerminalGroupViewService>(ITerminalGroupViewService);
   const provider = useInjectable<ITerminalRenderProvider>(ITerminalRenderProvider);
   const menuService = useInjectable<TerminalContextMenuService>(TerminalContextMenuService);
@@ -21,6 +20,9 @@ export default observer(() => {
   const [theme, setTheme] = useState<ThemeType>('dark');
   const styles_tab_contents = useDesignStyles(styles.tab_contents, 'tab_contents');
 
+  const groups = useAutorun(view.groups);
+  const currentGroup = useAutorun(view.currentGroup);
+
   const init = useCallback(() => {
     themeService.getCurrentTheme().then((theme) => {
       setTheme(theme.type);
@@ -36,23 +38,17 @@ export default observer(() => {
       disposable.dispose();
     };
   }, []);
+
   return (
     <div className={styles.view_container}>
       <div className={styles.tabs}>
         <Scrollbars forwardedRef={(el) => (el ? (tabContainer.current = el.ref) : null)}>
           <div className={styles_tab_contents}>
-            {view.groups.map((group, index) => {
-              if (!group) {
-                return;
-              }
-              return (
+            {groups.filter(Boolean).map((group, index) => (
                 <TabItem
                   key={group.id}
-                  id={group.id}
-                  options={group.options}
-                  editable={group.editable}
-                  name={group.snapshot}
-                  selected={view.currentGroup && view.currentGroup.id === group.id}
+                  group={group}
+                  selected={currentGroup && currentGroup.id === group.id}
                   onInputBlur={() => group.unedit()}
                   onInputEnter={(_: string, name: string) => group.rename(name)}
                   onClick={() => view.selectGroup(index)}
@@ -61,8 +57,7 @@ export default observer(() => {
                   provider={provider}
                   theme={theme}
                 ></TabItem>
-              );
-            })}
+              ))}
             <div className={styles.button}>
               <TabItem
                 type={ItemType.add}
@@ -89,4 +84,4 @@ export default observer(() => {
       </div>
     </div>
   );
-});
+};

package/src/browser/component/terminal.view.tsx

@@ -1,9 +1,8 @@
 import cls from 'classnames';
 import debounce from 'lodash/debounce';
-import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { FRAME_THREE, getIcon, localize, useEventEffect, useInjectable } from '@opensumi/ide-core-browser';
+import { FRAME_THREE, getIcon, localize, useAutorun, useEventEffect, useInjectable } from '@opensumi/ide-core-browser';
 
 import {
   ITerminalController,
@@ -21,16 +20,20 @@ import TerminalWidget from './terminal.widget';
 
 import '@xterm/xterm/css/xterm.css';
 
-export default observer(() => {
+export default () => {
   const controller = useInjectable<ITerminalController>(ITerminalController);
-  const view = useInjectable<ITerminalGroupViewService>(ITerminalGroupViewService);
   const searchService = useInjectable<ITerminalSearchService>(ITerminalSearchService);
   const errorService = useInjectable<ITerminalErrorService>(ITerminalErrorService);
   const network = useInjectable<ITerminalNetwork>(ITerminalNetwork);
-  const { groups, currentGroupIndex, currentGroupId } = view;
+
   const inputRef = React.useRef<HTMLInputElement>(null);
   const wrapperRef = React.useRef<HTMLDivElement | null>(null);
 
+  const view = useInjectable<ITerminalGroupViewService>(ITerminalGroupViewService);
+  const currentGroupId = useAutorun(view.currentGroupId);
+  const currentGroupIndex = useAutorun(view.currentGroupIndex);
+  const groups = useAutorun(view.groups);
+
   React.useEffect(() => {
     const dispose = searchService.onVisibleChange((show) => {
       if (show && inputRef.current) {
@@ -130,12 +133,12 @@ export default observer(() => {
         </div>
       )}
       {groups.map((group, index) => {
-        if (!group.activated) {
+        if (!group.activated.get()) {
           return;
         }
         return (
           <div
-            data-group-rendered={group.activated}
+            data-group-rendered={group.activated.get()}
             key={`terminal-${group.id}`}
             style={{ display: currentGroupIndex === index ? 'block' : 'none' }}
             className={styles.group}
@@ -155,4 +158,4 @@ export default observer(() => {
       })}
     </div>
   );
-});
+};