diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx
index db94fe32d..dc760f77a 100644
--- a/stories/extensions/test/testPane.tsx
+++ b/stories/extensions/test/testPane.tsx
@@ -6,10 +6,13 @@ import { Select, Option } from 'mo/components/select';
 import { IColorTheme } from 'mo/model/colorTheme';
 import { FileTypes, Float, IEditorTab, TreeNodeModel } from 'mo/model';
 import { ILocale } from 'mo/i18n/localization';
-import { localize } from 'mo/i18n/localize';
 import { Scrollable } from 'mo/components';
 import { randomId } from 'mo/common/utils';
 
+function shortRandomId() {
+    return Math.round(Math.random() * 1000);
+}
+
 export default class TestPane extends React.Component {
     constructor(props) {
         super(props);
@@ -72,22 +75,24 @@ export default class TestPane extends React.Component {
 
     render() {
         const addABar = function () {
-            const id = Math.random() * 10 + 1;
+            const id = shortRandomId();
             molecule.activityBar.add({
                 id: id + '',
-                name: 'folder' + id,
+                name: 'ActivityBarItem-' + id,
                 icon: 'edit',
             });
         };
 
-        let globalTempId;
+        const showHideActivityBar = function () {
+            molecule.layout.toggleActivityBarVisibility();
+        };
 
         const addStatusBar = function () {
-            globalTempId = randomId();
+            const id = shortRandomId();
             molecule.statusBar.add(
                 {
-                    id: globalTempId,
-                    name: 'test' + globalTempId,
+                    id,
+                    name: 'StatusBarItem-' + id,
                     sortIndex: 2,
                 },
                 Float.right
@@ -95,24 +100,38 @@ export default class TestPane extends React.Component {
         };
 
         const removeStatusBar = function () {
-            molecule.statusBar.remove(globalTempId);
+            const { rightItems } = molecule.statusBar.getState();
+            const lastItem = rightItems[rightItems.length - 1];
+            if (lastItem?.id && lastItem.name?.includes('-')) {
+                molecule.statusBar.remove(lastItem?.id);
+            }
         };
 
         const updateStatusBar = function () {
-            globalTempId = randomId();
-            molecule.statusBar.update({
-                id: globalTempId,
-                name: 'testUpdate' + randomId(),
-            });
+            const { rightItems } = molecule.statusBar.getState();
+            const lastItem = rightItems[rightItems.length - 1];
+            if (lastItem?.id) {
+                molecule.statusBar.update({
+                    id: lastItem?.id,
+                    name: 'TestUpdate-' + lastItem?.id,
+                });
+            }
+        };
+
+        const showHideStatusBar = () => {
+            molecule.layout.toggleStatusBarVisibility();
         };
 
         const addPanel = function () {
-            const id = Math.random() * 10 + 1;
+            const id = shortRandomId();
+            const panelId = `Panel-${id}`;
             molecule.panel.open({
-                id: 'Pane' + id,
-                name: 'Panel' + id,
+                id: panelId,
+                name: panelId,
                 closable: true,
-                renderPane: () => <h1>Test Pane</h1>,
+                renderPane: () => (
+                    <div style={{ padding: 20 }}>Test {panelId}</div>
+                ),
             });
         };
 
@@ -121,15 +140,20 @@ export default class TestPane extends React.Component {
         };
 
         const updateOutput = () => {
+            const { PANEL_OUTPUT } = molecule.builtin.getConstants();
             const editorIns = molecule.panel.outputEditorInstance;
             console.log('outputEditorInstance:', editorIns);
+            molecule.panel.setActive(PANEL_OUTPUT!);
             molecule.panel.appendOutput('Number: ' + Math.random() * 10 + '\n');
         };
 
         const updateProblem = () => {
+            const { PANEL_PROBLEMS } = molecule.builtin.getConstants();
+            molecule.panel.setActive(PANEL_PROBLEMS!);
             molecule.problems.add({
                 id: randomId(),
                 name: 'text.tsx',
+                isLeaf: false,
                 value: {
                     code: 'text.tsx',
                     message: '文件夹',
@@ -143,9 +167,10 @@ export default class TestPane extends React.Component {
                     {
                         id: randomId(),
                         name: '0-1',
+                        isLeaf: true,
                         value: {
                             code: 'endLineNumber',
-                            message: '语法错误',
+                            message: '提示信息',
                             startLineNumber: 0,
                             startColumn: 1,
                             endLineNumber: 0,
@@ -163,67 +188,59 @@ export default class TestPane extends React.Component {
         };
 
         const newEditor = function () {
-            const key = (Math.random() * 10 + 1).toFixed(2);
+            const key = shortRandomId();
+            const name = `editor-${key}.ts`;
             const tabData: IEditorTab = {
                 id: `${key}`,
-                name: `editor${key}.ts`,
-                icon: Math.random() >= 0.5 ? 'selection' : undefined,
+                name,
+                icon: 'selection',
                 data: {
-                    value: `${key}export interface Type<T> { new(...args: any[]): T;}
+                    value: `// editor-${key}
+export interface Type<T> { new (...args: any[]): T; }
 export type GenericClassDecorator<T> = (target: T) => void;`,
-                    path: 'desktop/molecule/editor1',
+                    path: `desktop/molecule/${name}`,
                     language: 'typescript',
                     modified: false,
                 },
-                breadcrumb: [{ id: `${key}`, name: `editor.ts` }],
+                breadcrumb: [{ id: `${key}`, name }],
             };
             console.log('open editor:', tabData);
             molecule.editor.open(tabData);
         };
 
-        molecule.editor.onUpdateTab((newTab) => {
-            // const { current } = molecule.editor.getState();
-            // const tab = current?.tab!;
-            // molecule.editor.updateTab(
-            //     {
-            //         id: tab.id,
-            //         data: {
-            //             ...tab.data,
-            //             modified: true,
-            //         },
-            //     },
-            //     current?.id || -1
-            // );
-            // // TODO editorService add onSaveEditor() event.
-            // current?.editorInstance.addCommand(
-            //     monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
-            //     () => {
-            //         // ctrl + s
-            //         molecule.editor.updateTab(
-            //             {
-            //                 id: tab.id,
-            //                 data: {
-            //                     ...tab.data,
-            //                     modified: false,
-            //                 },
-            //             },
-            //             current?.id || -1
-            //         );
-            //     }
-            // );
-        });
+        const updateEntryPage = () => {
+            const style: React.CSSProperties = {
+                display: 'flex',
+                width: '100%',
+                height: '100%',
+                fontSize: 48,
+                alignItems: 'center',
+                justifyContent: 'center',
+            };
+            const entry = <div style={style}>Welcome</div>;
+            molecule.editor.setEntry(entry);
+        };
+
         const addANotification = function () {
+            const { showNotifications } = molecule.notification.getState();
+            if (!showNotifications) {
+                toggleNotification();
+            }
             molecule.notification.add<string>([
                 {
-                    id: 'test',
+                    id: randomId(),
                     value: 'Test Notification!',
                 },
             ]);
         };
 
         const removeNotification = function () {
-            const { data = [] } = molecule.notification.getState();
+            const { data = [], showNotifications } =
+                molecule.notification.getState();
             const lastItemId = data[data.length - 1]?.id;
+            if (!showNotifications) {
+                toggleNotification();
+            }
             if (lastItemId) {
                 molecule.notification.remove(lastItemId);
             }
@@ -233,26 +250,72 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
             molecule.notification.toggleNotification();
         };
 
-        const openCommand = function () {};
+        const notice = function (msg: string) {
+            const { showNotifications } = molecule.notification.getState();
+            molecule.notification.clear();
+            if (!showNotifications) {
+                toggleNotification();
+            }
+            molecule.notification.add<string>([
+                {
+                    id: randomId(),
+                    value: msg,
+                },
+            ]);
+        };
 
         const appendMenu = function () {
-            const id = Math.random() * 10 + 1;
+            const id = shortRandomId();
+            const name = `MenuBarItem-${id}`;
             molecule.menuBar.append(
                 {
                     id: id + '',
-                    name: 'menuBar' + id,
+                    name,
                     icon: '',
                 },
                 'Edit'
             );
+            notice(
+                `${name} has been added to MenuBar's Edit menu and \n you can open the menu to view it`
+            );
         };
 
         const removeMenu = function () {
-            molecule.menuBar.remove('SelectAll');
+            const { ACTION_QUICK_SELECT_ALL } = molecule.builtin.getConstants();
+            molecule.menuBar.remove(ACTION_QUICK_SELECT_ALL!);
+            notice(
+                `The SelectAll menu item under the MenuBar's Selection menu has been removed`
+            );
         };
 
         const updateMenu = function () {
-            molecule.menuBar.update('SelectAll', { icon: 'check' });
+            const { ACTION_QUICK_UNDO } = molecule.builtin.getConstants();
+            molecule.menuBar.update(ACTION_QUICK_UNDO!, { icon: 'check' });
+            notice(
+                `The Undo menu item under the MenuBar's Edit menu has been updated`
+            );
+        };
+
+        const toggleMenuBarMode = () => {
+            const currentMode = molecule.layout.getMenuBarMode();
+            const newMode =
+                currentMode === 'horizontal' ? 'vertical' : 'horizontal';
+            molecule.layout.setMenuBarMode(newMode);
+        };
+
+        const updateMenuBarLogo = () => {
+            const randomColor = `hsl(${Math.floor(
+                Math.random() * 360
+            )}, 100%, 50%)`;
+            const logo = (
+                <span style={{ backgroundColor: randomColor }}>MO</span>
+            );
+            molecule.layout.setMenuBarMode('horizontal');
+            molecule.menuBar.setState({ logo });
+        };
+
+        const showHideMenuBar = () => {
+            molecule.layout.toggleMenuBarVisibility();
         };
 
         const addSettingsItem = function () {
@@ -263,6 +326,10 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
                     },
                 },
             });
+            molecule.settings.openSettingsInEditor();
+            notice(
+                `The "project.a.name" property has been added to the settings.json file`
+            );
         };
 
         const addExplorer = () => {
@@ -281,6 +348,9 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
                 },
             ];
             molecule.explorer.addPanel(panels);
+            notice(
+                `Panel-${id} has been added to Explorer and you can switch to Explorer to view it`
+            );
         };
 
         const addRootFolder = () => {
@@ -288,91 +358,108 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
                 (_, index) =>
                     new TreeNodeModel({
                         id: index,
-                        name: `test_sql_${index}.txt`,
+                        name: `test_sql_${index}.sql`,
                         fileType: FileTypes.File,
                         isLeaf: true,
-                        content: `show tables;
+                        content: `SHOW TABLES;
+
 SELECT 1;
+
 DESC 6d_target_test;
-create table if not exists ods_order_header1213 (
-order_header_id     string comment '订单头id'
-,order_date          bigint comment '订单日期'
-,shop_id             string comment '店铺id'
-,customer_id         string comment '客户id'
-,order_status        bigint comment '订单状态'
-,pay_date            bigint comment '支付日期'
-)comment '销售订单明细表'
-PARTITIONED BY (ds string) lifecycle 1000;
+
+CREATE TABLE IF NOT EXISTS ods_order_header1213 (
+order_header_id     STRING COMMENT '订单头id',
+order_date          STRING COMMENT '订单日期',
+shop_id             STRING COMMENT '店铺id',
+customer_id         STRING COMMENT '客户id',
+order_status        BIGINT COMMENT '订单状态',
+pay_date            BIGINT COMMENT '支付日期'
+) COMMENT '销售订单明细表'
+PARTITIONED BY (DE STRING) LIFECYCLE 1000;
 `,
                     })
             );
             molecule.folderTree.add(
                 new TreeNodeModel({
                     id: randomId(),
-                    name: 'molecule_temp',
+                    name: 'Sample SQLs',
                     fileType: FileTypes.RootFolder,
                     children,
                 })
             );
-        };
-
-        const toggleMenuBarMode = () => {
-            const currentMode = molecule.layout.getMenuBarMode();
-            const newMode =
-                currentMode === 'horizontal' ? 'vertical' : 'horizontal';
-            molecule.layout.setMenuBarMode(newMode);
+            notice(
+                `The root folder has been added to Explorer and you can switch to Explorer to view it`
+            );
         };
 
         return (
             <Scrollable isShowShadow>
-                <div>
-                    <div style={{ margin: '50px 20px' }}>
-                        <Button onClick={addABar}>Add Bar</Button>
+                <div style={{ padding: 20 }}>
+                    <div style={{ marginBottom: 50 }}>
+                        <h2>Simple examples:</h2>
                         <Button onClick={newEditor}>New Editor</Button>
-                        <Button onClick={openCommand}>Command Palette</Button>
+                        <Button onClick={updateEntryPage}>
+                            Update Entry Page
+                        </Button>
+                        <Button onClick={addSettingsItem}>
+                            Append Settings Item
+                        </Button>
                     </div>
-                    <div style={{ margin: '50px 20px' }}>
-                        <h1>Select a ColorTheme:</h1>
+                    <div style={{ marginBottom: 50 }}>
+                        <h2>Select a ColorTheme:</h2>
                         {this.renderColorThemes()}
                     </div>
-                    <div style={{ margin: '50px 20px' }}>
-                        <h1>Select a localization language:</h1>
+                    <div style={{ marginBottom: 50 }}>
+                        <h2>Select a localization language:</h2>
                         {this.renderLocales()}
-                        {localize('test.id', 'aaaa')}
                     </div>
-                    <div style={{ margin: '50px 20px' }}>
-                        <h2>Add a new Panel:</h2>
+                    <div style={{ marginBottom: 50 }}>
+                        <h2>ActivityBar:</h2>
+                        <Button onClick={addABar}>Add ActivityBar Item</Button>
+                        <Button onClick={showHideActivityBar}>
+                            Show/Hide ActivityBar
+                        </Button>
+                    </div>
+                    <div style={{ marginBottom: 50 }}>
+                        <h2>Panel:</h2>
                         <Button onClick={addPanel}>Add Panel</Button>
                         <Button onClick={showHidePanel}>Show/Hide Panel</Button>
                         <Button onClick={updateOutput}>Update Output</Button>
                         <Button onClick={updateProblem}>Update Problem</Button>
                         <Button onClick={clearProblems}>Clear Problem</Button>
                     </div>
-                    <div style={{ margin: '50px 20px' }}>
+                    <div style={{ marginBottom: 50 }}>
                         <h2>Notification:</h2>
                         <Button onClick={addANotification}>
-                            Add A Notification
+                            Add Notification Item
                         </Button>
                         <Button onClick={removeNotification}>
-                            Remove A Notification
+                            Remove Notification Item
                         </Button>
                         <Button onClick={toggleNotification}>
-                            Toggle Notifications
+                            Toggle Notification
                         </Button>
                     </div>
-                    <div style={{ margin: '50px 20px' }}>
+                    <div style={{ marginBottom: 50 }}>
                         <h2>MenuBar:</h2>
-                        <Button onClick={appendMenu}>Add MenuBar</Button>
-                        <Button onClick={removeMenu}>Remove MenuBar</Button>
-                        <Button onClick={updateMenu}>Update MenuBar</Button>
-                        <Button onClick={addSettingsItem}>
-                            Append Settings Item
+                        <Button onClick={appendMenu}>Add MenuBar Item</Button>
+                        <Button onClick={removeMenu}>
+                            Remove MenuBar Item
+                        </Button>
+                        <Button onClick={updateMenu}>
+                            Update MenuBar Item
                         </Button>
                         <Button onClick={toggleMenuBarMode}>
                             Toggle MenuBar mode
                         </Button>
+                        <Button onClick={updateMenuBarLogo}>
+                            Update MenuBar Logo
+                        </Button>
+                        <Button onClick={showHideMenuBar}>
+                            Show/Hide MenuBar
+                        </Button>
                     </div>
-                    <div style={{ margin: '50px 20px' }}>
+                    <div style={{ marginBottom: 50 }}>
                         <h2>Exploer:</h2>
                         <Button onClick={addExplorer}>
                             Add Explorer Panel
@@ -381,15 +468,18 @@ PARTITIONED BY (ds string) lifecycle 1000;
                     </div>
                     <div>
                         <h2>StatusBar:</h2>
-                        <molecule.component.Button onClick={addStatusBar}>
-                            Add a StatusBar
-                        </molecule.component.Button>
-                        <molecule.component.Button onClick={removeStatusBar}>
-                            Remove a StatusBar
-                        </molecule.component.Button>
-                        <molecule.component.Button onClick={updateStatusBar}>
-                            Update a StatusBar
-                        </molecule.component.Button>
+                        <Button onClick={addStatusBar}>
+                            Add StatusBar Item
+                        </Button>
+                        <Button onClick={removeStatusBar}>
+                            Remove StatusBar Item
+                        </Button>
+                        <Button onClick={updateStatusBar}>
+                            Update StatusBar Item
+                        </Button>
+                        <Button onClick={showHideStatusBar}>
+                            Show/Hide StatusBar
+                        </Button>
                     </div>
                 </div>
             </Scrollable>