looking good

Got the results up to parity, next step is to work on performance
move Newton parser to its own file
2026-04-22 15:26:58 -07:00 · 2024-04-22 12:15:47 -07:00 · 2024-04-19 19:01:11 -07:00 · 2024-04-19 16:27:19 -07:00 · 2024-04-19 15:08:40 -07:00 · 2024-04-19 15:08:27 -07:00
154 changed files with 11655 additions and 4672 deletions
@@ -6,7 +6,7 @@
    },
    "productName": "Wave",
    "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.1",
+    "version": "0.7.2",
    "main": "dist/emain.js",
    "license": "Apache-2.0",
    "repository": {
@@ -18,12 +18,13 @@
        "appId": "dev.commandline.waveterm"
    },
    "dependencies": {
+        "@lexical/react": "^0.14.3",
        "@monaco-editor/react": "^4.5.1",
        "@table-nav/core": "^0.0.7",
        "@table-nav/react": "^0.0.7",
        "@tanstack/match-sorter-utils": "^8.8.4",
        "@tanstack/react-table": "^8.10.3",
-        "@types/semver": "^7.5.6",
+        "@withfig/autocomplete": "^2.652.3",
        "autobind-decorator": "^2.4.0",
        "base64-js": "^1.5.1",
        "classnames": "^2.3.1",
@@ -32,11 +33,14 @@
        "electron-squirrel-startup": "^1.0.0",
        "electron-updater": "^6.1.8",
        "framer-motion": "^10.16.16",
+        "lexical": "^0.14.3",
        "mobx": "6.12",
        "mobx-react": "^7.5.0",
        "monaco-editor": "^0.44.0",
        "mustache": "^4.2.0",
        "node-fetch": "^3.2.10",
+        "overlayscrollbars": "^2.6.1",
+        "overlayscrollbars-react": "^0.5.5",
        "papaparse": "^5.4.1",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
@@ -45,11 +49,13 @@
        "remark-gfm": "^4.0.0",
        "sprintf-js": "^1.1.2",
        "throttle-debounce": "^5.0.0",
-        "tsx-control-statements": "^4.1.1",
+        "tsx-control-statements": "^5.1.1",
        "uuid": "^9.0.0",
        "winston": "^3.8.2",
-        "xterm": "^5.0.0",
-        "xterm-addon-web-links": "^0.9.0"
+        "xterm": "^5.3.0",
+        "xterm-addon-serialize": "^0.11.0",
+        "xterm-addon-web-links": "^0.9.0",
+        "xterm-addon-webgl": "^0.16.0"
    },
    "devDependencies": {
        "@babel/cli": "^7.17.10",
@@ -66,24 +72,26 @@
        "@svgr/webpack": "^8.1.0",
        "@types/classnames": "^2.3.1",
        "@types/electron": "^1.6.10",
-        "@types/node": "20.11.0",
+        "@types/node": "^20.11.0",
        "@types/papaparse": "^5.3.10",
        "@types/react": "^18.0.12",
+        "@types/semver": "^7.5.6",
        "@types/sprintf-js": "^1.1.3",
        "@types/throttle-debounce": "^5.0.1",
-        "@types/uuid": "9.0.7",
+        "@types/uuid": "^9.0.7",
        "@types/webpack-env": "^1.18.3",
+        "@withfig/autocomplete-types": "^1.30.0",
        "babel-loader": "^9.1.3",
        "babel-plugin-jsx-control-statements": "^4.1.2",
-        "copy-webpack-plugin": "^11.0.0",
+        "copy-webpack-plugin": "^12.0.0",
        "css-loader": "^6.7.1",
-        "electron": "29.0.1",
+        "electron": "^29.0.1",
        "electron-builder": "^24.13.3",
        "electron-builder-squirrel-windows": "^24.13.3",
        "file-loader": "^6.2.0",
        "http-server": "^14.1.1",
        "less": "^4.1.2",
-        "less-loader": "^11.0.0",
+        "less-loader": "^12.0.0",
        "lodash-webpack-plugin": "^0.11.6",
        "mini-css-extract-plugin": "^2.6.0",
        "prettier": "^2.8.8",
@@ -94,11 +102,11 @@
        "webpack": "^5.73.0",
        "webpack-bundle-analyzer": "^4.10.1",
        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^4.9.1",
+        "webpack-dev-server": "^5.0.4",
        "webpack-merge": "^5.8.0",
        "yaml": "^2.4.0"
    },
    "scripts": {
        "postinstall": "electron-builder install-app-deps"
    }
-}
+}
@@ -5,14 +5,14 @@
        <base href="../" />
        <script charset="UTF-8" src="dist-dev/waveterm.js"></script>
        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
        <link rel="stylesheet" href="dist-dev/waveterm.css" />

-        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css">
+        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
    </head>
    <body>
        <div id="measure"></div>
@@ -5,14 +5,14 @@
        <base href="../" />
        <script charset="UTF-8" src="dist/waveterm.js"></script>
        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
        <link rel="stylesheet" href="dist/waveterm.css" />

-        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css" />
+        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
    </head>
    <body>
        <div id="measure"></div>
@@ -42,16 +42,19 @@
    --app-bg-color: black;
    --app-accent-color: rgb(88, 193, 66);
    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
+    --app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
    --app-text-color: rgb(211, 215, 207);
    --app-text-primary-color: rgb(255, 255, 255);
    --app-text-secondary-color: rgb(195, 200, 194);
    --app-text-disabled-color: rgb(173, 173, 173);
+    --app-text-bg-color: rgb(23, 23, 23);
+    --app-text-bg-disabled-color: rgb(51, 51, 51);
    --app-border-color: rgb(51, 51, 51);
-    --app-maincontent-bg-color: #333;
+    --app-maincontent-bg-color: rgb(51, 51, 51);
    --app-panel-bg-color: rgba(21, 23, 21, 1);
    --app-panel-bg-color-dev: rgb(21, 23, 48);
    --app-icon-color: rgb(139, 145, 138);
-    --app-icon-hover-color: #fff;
+    --app-icon-hover-color: rgb(255, 255, 255);
    --app-selected-mask-color: rgba(255, 255, 255, 0.06);

    /* global status colors */
@@ -67,6 +70,7 @@
    --scrollbar-background-color: var(--app-bg-color);
    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
+    --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);

    /* code color */
    --pre-bg-color: rgb(0, 0, 0);
@@ -86,6 +90,7 @@
    --form-element-border-color: rgba(241, 246, 243, 0.15);
    --form-element-bg-color: var(--app-bg-color);
    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--app-text-primary-color);
    --form-element-label-color: var(--app-text-secondary-color);
    --form-element-primary-color: var(--app-accent-color);
    --form-element-secondary-color: rgba(255, 255, 255, 0.2);
@@ -112,7 +117,7 @@
    --hotkey-text-color: var(--app-text-secondary-color);

    /* sidebar colors */
-    --sidebar-highlight-color: rgba(241, 246, 243, 0.08);
+    --sidebar-highlight-color: var(--app-accent-bg-color);
    --sidebar-font-size: 15px;
    --sidebar-line-height: 1.5;
    --sidebar-font-weight: normal;
@@ -120,18 +125,18 @@

    /* line colors */
    --line-sidebar-message-color: rgb(196, 160, 0);
-    --line-background: rgba(21, 23, 21, 1);
-    --line-avatar-color: #eceeec;
+    --line-background: var(--app-panel-bg-color);
+    --line-avatar-color: rgb(236, 238, 236);
    --line-text-color: rgb(211, 215, 207);
    --line-svg-fill-color: rgb(150, 152, 150);
-    --line-svg-hover-fill-color: #eceeec;
+    --line-svg-hover-fill-color: rgb(236, 238, 236);
    --line-separator-color: rgb(126, 126, 126);
    --line-error-color: var(--app-error-color);
    --line-warning-color: var(--app-warning-color);
-    --line-base-soft-blue-color: #729fcf;
+    --line-base-soft-blue-color: rgb(114, 159, 207);
    --line-active-border-color: var(--app-accent-color);
    --line-selected-bg-color: rgba(255, 255, 255, 0.05);
-    --line-selected-border-left-color: #777777;
+    --line-selected-border-left-color: rgb(119, 119, 119);
    --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
    --line-selected-error-bg-color: rgb(19, 4, 3);
    --line-error-bg-color: rgba(200, 0, 0, 0.1);
@@ -150,22 +155,21 @@
    /* table colors */
    --table-border-color: rgba(241, 246, 243, 0.15);
    --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-bright-border-color: #ccc;
+    --table-thead-bright-border-color: rgb(204, 204, 204);
    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
    --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
    --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
-    --table-tr-selected-bg-color: #222;
-    --table-tr-selected-hover-bg-color: #333;
+    --table-tr-selected-bg-color: rgb(34, 34, 34);
+    --table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);

    /* cmdinput colors */
-    --cmdinput-textarea-bg-color: #171717;
+    --cmdinput-bg-color: var(--app-text-bg-color);
    --cmdinput-text-error-color: var(--term-red);
    --cmdinput-history-item-error-color: var(--term-bright-red);
    --cmdinput-history-item-selected-error-color: var(--term-bright-red);
-    --cmdinput-button-bg-color: rgb(88, 193, 66);
-    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
-    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
-    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);
+    --cmdinput-button-bg-color: var(--tab-green);
+    --cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
+    --cmdinput-history-bg-color: var(--app-bg-color);

    /* screen view color */
    --screen-view-text-caption-color: rgb(139, 145, 138);
@@ -186,4 +190,11 @@
    --datepicker-header-fade-color: rgba(255, 255, 255, 0.4);
    --datepicker-year-header-bg-color: rgba(255, 255, 255, 0.2); /* Light grey background */
    --datepicker-year-header-border-color: rgba(241, 246, 243, 0.15); /* Light grey border */
+
+    /* OverlayScrollbars styling */
+    .os-scrollbar {
+        --os-handle-bg: var(--scrollbar-thumb-color);
+        --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
+        --os-handle-bg-active: var(--scrollbar-thumb-active-color);
+    }
 }
@@ -1,53 +1,48 @@
 /* Copyright 2024, Command Line Inc.
   SPDX-License-Identifier: Apache-2.0 */

-@import "./default.css";
-@import "./term-default.css";
-@import "./term-light.css";
+@import url("./term-default.css");
+@import url("./term-light.css");

 :root {
-    --app-bg-color: #fefefe;
+    --app-bg-color: rgb(254, 254, 254);
    --app-accent-color: rgb(75, 166, 57);
    --app-accent-bg-color: rgba(75, 166, 57, 0.2);
-    --app-text-color: #000;
-    --app-text-primary-color: rgb(0, 0, 0, 0.9);
-    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
+    --app-text-color: rgb(0, 0, 0);
+    --app-text-primary-color: rgb(23, 23, 23);
+    --app-text-secondary-color: rgb(76, 76, 76);
    --app-border-color: rgb(139 145 138);
-    --app-panel-bg-color: #e0e0e0;
-    --app-panel-bg-color-dev: #e0e0e0;
-    --app-icon-color: rgb(80, 80, 80);
-    --app-icon-hover-color: rgb(100, 100, 100);
+    --app-panel-bg-color: rgb(224, 224, 224);
+    --app-panel-bg-color-dev: rgb(224, 224, 224);
+    --app-icon-color: rgb(110, 110, 110);
+    --app-icon-hover-color: rgb(80, 80, 80);
    --app-selected-mask-color: rgba(0, 0, 0, 0.06);

-    --input-bg-color: #eeeeee;
+    --input-bg-color: rgb(238, 238, 238);

    /* tab color */
    --tab-white: rgb(0, 0, 0, 0.6);
    --tab-mint: rgb(70, 235, 156);

-    /* button colors */
-    --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
-    --button-primary-color: #fefefe;
-    --button-secondary-bg-color: rgba(200, 200, 200, 0.3); /* Semi-transparent light gray */
-
    /* table colors */
    --table-thead-border-top-color: rgba(0, 0, 0, 0.2);
    --table-thead-border-bottom-color: rgba(0, 0, 0, 0.3);
    --table-thead-bg-color: rgba(250, 250, 250, 0.15);
    --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
    --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
-    --table-tr-selected-bg-color: #dddddd;
-    --table-tr-selected-hover-bg-color: #cccccc;
+    --table-tr-selected-bg-color: rgb(221, 221, 221);
+    --table-tr-selected-hover-bg-color: rgb(204, 204, 204);

    /* form colors */
    --form-element-border-color: rgba(0, 0, 0, 0.3);
    --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: var(--app-text-color);
+    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--app-text-primary-color);
    --form-element-label-color: rgba(0, 0, 0, 0.6);
    --form-element-secondary-color: rgba(0, 0, 0, 0.09);
    --form-element-icon-color: rgb(0, 0, 0, 0.6);
-    --form-element-disabled-text-color: #b7b7b7;
-    --form-element-placeholder-color: #b7b7b7;
+    --form-element-disabled-text-color: rgb(183, 183, 183);
+    --form-element-placeholder-color: rgb(183, 183, 183);

    --markdown-bg-color: rgb(0, 0, 0, 0.1);

@@ -55,28 +50,27 @@
    --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);

    /* cmd input */
-    --cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
-    --cmdinput-textarea-border-color: var(--form-element-border-color);

    /* scroll colors */
    --scrollbar-background-color: var(--app-bg-color);
    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
+    --scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);

    /* line color */
    --line-actions-bg-color: rgba(0, 0, 0, 0.1);
    --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
    --line-actions-active-color: rgba(0, 0, 0, 1);

-    --logo-button-hover-bg-color: #f0f0f0;
+    --logo-button-hover-bg-color: rgb(240, 240, 240);

    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);

-    --datepicker-cell-hover-bg-color: #f0f0f0;
+    --datepicker-cell-hover-bg-color: rgb(240, 240, 240);
    --datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
    --datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
-    --datepicker-year-header-bg-color: #f5f5f5;
-    --datepicker-year-header-border-color: #dcdcdc;
+    --datepicker-year-header-bg-color: rgb(245, 245, 245);
+    --datepicker-year-header-border-color: rgb(220, 220, 220);

    /* toggle colors */
    --toggle-thumb-color: var(--app-bg-color);
@@ -0,0 +1,3 @@
+@import url("./default.css") screen;
+
+@import url("./light.css") screen and (prefers-color-scheme: light);
@@ -44,7 +44,7 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
-WAVESHELL_VERSION=v0.5
+WAVESHELL_VERSION=v0.6
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
    (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -69,7 +69,7 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
-WAVESHELL_VERSION=v0.5
+WAVESHELL_VERSION=v0.6
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
    (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -96,7 +96,7 @@ CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflag
 ```bash
 # @scripthaus command fullbuild-waveshell
 set -e
-WAVESHELL_VERSION=v0.5
+WAVESHELL_VERSION=v0.6
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
    (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -251,6 +251,13 @@ input[type="checkbox"] {
    justify-content: center;
 }

+.flex-centered-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
 a.a-block {
    display: block;
 }
@@ -786,6 +793,75 @@ a.a-block {
    margin-top: 6px;
 }

+.conn-dropdown {
+    width: 412px;
+
+    .lefticon {
+        position: absolute;
+        top: 50%;
+        left: 16px;
+        transform: translateY(-50%);
+
+        .globe-icon {
+            width: 16px;
+            height: 16px;
+            flex-shrink: 0;
+            fill: var(--app-text-secondary-color);
+        }
+
+        .status-icon {
+            position: absolute;
+            left: 7px;
+            top: 8px;
+            circle {
+                stroke: var(--app-bg-color);
+            }
+        }
+    }
+
+    .wave-dropdown-display {
+        bottom: 7px;
+    }
+}
+
+.tab-colors,
+.tab-icons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .tab-color-sep,
+    .tab-icon-sep {
+        padding-left: 10px;
+        padding-right: 10px;
+        font-weight: bold;
+        user-select: none;
+    }
+
+    .tab-color-icon,
+    .tab-icon-icon {
+        width: 1.1em;
+        vertical-align: middle;
+    }
+
+    .tab-color-name,
+    .tab-icon-name {
+        display: inline-block;
+        margin-left: 1em;
+        min-width: 70px;
+        user-select: none;
+    }
+
+    .tab-color-select,
+    .tab-icon-select {
+        cursor: pointer;
+        margin: 3px;
+        &:hover {
+            outline: 2px solid white;
+        }
+    }
+}
+
 .settings-field {
    display: flex;
    flex-direction: row;
@@ -847,7 +923,7 @@ a.a-block {
            }
        }

-        input {
+        input:not(.wave-input) {
            padding: 4px;
            border-radius: 3px;
        }
@@ -858,44 +934,6 @@ a.a-block {
            }
        }

-        .tab-colors,
-        .tab-icons {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .tab-color-sep,
-            .tab-icon-sep {
-                padding-left: 10px;
-                padding-right: 10px;
-                font-weight: bold;
-                user-select: none;
-            }
-
-            .tab-color-icon,
-            .tab-icon-icon {
-                width: 1.1em;
-                vertical-align: middle;
-            }
-
-            .tab-color-name,
-            .tab-icon-name {
-                display: inline-block;
-                margin-left: 1em;
-                min-width: 70px;
-                user-select: none;
-            }
-
-            .tab-color-select,
-            .tab-icon-select {
-                cursor: pointer;
-                margin: 3px;
-                &:hover {
-                    outline: 2px solid white;
-                }
-            }
-        }
-
        .action-text {
            margin-left: 20px;

@@ -8,7 +8,7 @@ import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalCommandRunner, GlobalModel } from "@/models";
+import { GlobalModel } from "@/models";
 import { isBlank } from "@/util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
@@ -101,7 +101,7 @@ class App extends React.Component<{}, {}> {
            return (
                <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
                    <div ref={this.mainContentRef} className="main-content">
-                        <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
+                        <MainSideBar parentRef={this.mainContentRef} />
                        <div className="session-view" />
                    </div>
                    <If condition={dcWait}>
@@ -123,7 +123,7 @@ class App extends React.Component<{}, {}> {
        const mainSidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
        const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
        const activeMainView = GlobalModel.activeMainView.get();
-        const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
+        const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
        return (
            <div
                key={"version-" + renderVersion}
@@ -146,12 +146,12 @@ class App extends React.Component<{}, {}> {
                <If condition={GlobalModel.isDev && rightSidebarCollapsed && activeMainView == "session"}>
                    <div className="right-sidebar-triggers">
                        <Button className="secondary ghost right-sidebar-trigger" onClick={this.openRightSidebar}>
-                            <i className="fa-sharp fa-regular fa-lightbulb"></i>
+                            <i className="fa-sharp fa-solid fa-sidebar-flip"></i>
                        </Button>
                    </div>
                </If>
                <div ref={this.mainContentRef} className="main-content">
-                    <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
+                    <MainSideBar parentRef={this.mainContentRef} />
                    <ErrorBoundary>
                        <PluginsView />
                        <WorkspaceView />
@@ -160,7 +160,7 @@ class App extends React.Component<{}, {}> {
                        <ConnectionsView model={remotesModel} />
                        <ClientSettingsView model={remotesModel} />
                    </ErrorBoundary>
-                    <RightSideBar parentRef={this.mainContentRef} clientData={clientData} />
+                    <RightSideBar parentRef={this.mainContentRef} />
                </div>
                <ModalsProvider />
            </div>
@@ -64,3 +64,8 @@ export enum StatusIndicatorLevel {

 // matches packet.go
 export const ErrorCode_InvalidCwd = "ERRCWD";
+
+export const InputAuxView_History = "history";
+export const InputAuxView_Info = "info";
+export const InputAuxView_AIChat = "aichat";
+export const InputAuxView_Suggestions = "suggestions";
@@ -6,13 +6,14 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
+import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
+import { MainView } from "@/common/elements/mainview";

 import "./clientsettings.less";
-import { MainView } from "../common/elements/mainview";

 class ClientSettingsKeybindings extends React.Component<{}, {}> {
    componentDidMount() {
@@ -64,11 +65,25 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
    }

    @boundMethod
-    handleChangeTheme(theme: string): void {
-        if (GlobalModel.getTheme() == theme) {
+    handleChangeThemeSource(themeSource: NativeThemeSource): void {
+        if (GlobalModel.getThemeSource() == themeSource) {
            return;
        }
-        const prtn = GlobalCommandRunner.setTheme(theme, false);
+        const prtn = GlobalCommandRunner.setTheme(themeSource, false);
+        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    handleChangeTermTheme(theme: string): void {
+        // For global terminal theme, the key is global, otherwise it's either
+        // sessionId or screenId.
+        const currTheme = GlobalModel.getTermTheme()["global"];
+        if (currTheme == theme) {
+            return;
+        }
+
+        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
        commandRtnHandler(prtn, this.errorMessage);
    }

@@ -92,7 +107,13 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
            prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
        }
        commandRtnHandler(prtn, this.errorMessage);
-        getApi().changeAutoUpdate(val);
+        GlobalModel.getElectronApi().changeAutoUpdate(val);
+    }
+
+    @boundMethod
+    handleChangeAutocompleteEnabled(val: boolean): void {
+        const prtn: Promise<CommandRtnType> = GlobalCommandRunner.setAutocompleteEnabled(val);
+        commandRtnHandler(prtn, this.errorMessage);
    }

    getFontSizes(): DropdownItem[] {
@@ -111,11 +132,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
        return availableFontFamilies;
    }

-    getThemes(): DropdownItem[] {
-        const themes: DropdownItem[] = [];
-        themes.push({ label: "Dark", value: "dark" });
-        themes.push({ label: "Light", value: "light" });
-        return themes;
+    getThemeSources(): DropdownItem[] {
+        const themeSources: DropdownItem[] = [];
+        themeSources.push({ label: "Dark", value: "dark" });
+        themeSources.push({ label: "Light", value: "light" });
+        themeSources.push({ label: "System", value: "system" });
+        return themeSources;
    }

    @boundMethod
@@ -190,7 +212,9 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
        );
        const curFontSize = GlobalModel.getTermFontSize();
        const curFontFamily = GlobalModel.getTermFontFamily();
-        const curTheme = GlobalModel.getTheme();
+        const curTheme = GlobalModel.getThemeSource();
+        const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
+        const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;

        return (
            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
@@ -225,12 +249,25 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                        <div className="settings-input">
                            <Dropdown
                                className="theme-dropdown"
-                                options={this.getThemes()}
+                                options={this.getThemeSources()}
                                defaultValue={curTheme}
-                                onChange={this.handleChangeTheme}
+                                onChange={this.handleChangeThemeSource}
                            />
                        </div>
                    </div>
+                    <If condition={termThemes.length > 0}>
+                        <div className="settings-field">
+                            <div className="settings-label">Terminal Theme</div>
+                            <div className="settings-input">
+                                <Dropdown
+                                    className="terminal-theme-dropdown"
+                                    options={termThemes}
+                                    defaultValue={currTermTheme}
+                                    onChange={this.handleChangeTermTheme}
+                                />
+                            </div>
+                        </div>
+                    </If>
                    <div className="settings-field">
                        <div className="settings-label">Client ID</div>
                        <div className="settings-input">{cdata.clientid}</div>
@@ -281,7 +318,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                                text={isBlank(openAIOpts.baseurl) ? "openai default" : openAIOpts.baseurl}
                                value={openAIOpts.baseurl ?? ""}
                                onChange={this.inlineUpdateOpenAIBaseURL}
-                                maxLength={10}
+                                maxLength={200}
                                showIcon={true}
                            />
                        </div>
@@ -323,6 +360,15 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                            />
                        </div>
                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Command Autocomplete</div>
+                        <div className="settings-input">
+                            <Toggle
+                                checked={cdata.clientopts.autocompleteenabled ?? false}
+                                onChange={this.handleChangeAutocompleteEnabled}
+                            />
+                        </div>
+                    </div>
                    <SettingsError errorMessage={this.errorMessage} />
                </div>
            </MainView>
@@ -10,7 +10,6 @@
    border-radius: 6px;
    height: auto;
    line-height: 1.5;
-    display: block;
    white-space: nowrap;
    user-select: none;

@@ -21,13 +20,17 @@
    }

    &.primary {
-        color: var(--form-element-text-color);
+        color: var(--form-element-primary-text-color);
        background: var(--form-element-primary-color);
        i {
            fill: var(--form-element-text-color);
        }
    }

+    &.primary.danger {
+        background: var(--app-error-color);
+    }
+
    &.primary.outlined {
        background: none;
        border: 1px solid var(--form-element-primary-color);
@@ -37,6 +40,37 @@
        }
    }

+    &.primary.greyoutlined {
+        background: none;
+        border: 1px solid var(--app-text-secondary-color);
+
+        i {
+            fill: var(--app-text-secondary-color);
+        }
+    }
+
+    &.primary.outlined,
+    &.primary.greyoutlined {
+        &.hover-danger:hover {
+            color: var(--form-element-primary-text-color);
+            border: 1px solid var(--app-error-color);
+            background: var(--app-error-color);
+        }
+    }
+
+    &.primary.outlined.danger {
+        background: none;
+        border: 1px solid var(--app-error-color);
+
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
+    &.greytext {
+        color: var(--app-text-secondary-color);
+    }
+
    &.primary.ghost {
        background: none;
        i {
@@ -44,6 +78,13 @@
        }
    }

+    &.primary.ghost.danger {
+        background: none;
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
    &.secondary {
        color: var(--form-element-text-color);
        background: var(--form-element-secondary-color);
@@ -57,6 +98,11 @@
        border: 1px solid var(--form-element-text-color);
    }

+    &.secondary.outlined.danger {
+        background: none;
+        border: 1px solid var(--app-error-color);
+    }
+
    &.secondary.ghost {
        background: none;
    }
@@ -6,7 +6,7 @@ import "./button.less";

 interface ButtonProps {
    children: React.ReactNode;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    disabled?: boolean;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
@@ -14,6 +14,7 @@ interface ButtonProps {
    autoFocus?: boolean;
    className?: string;
    termInline?: boolean;
+    title?: string;
 }

 class Button extends React.Component<ButtonProps> {
@@ -23,14 +24,14 @@ class Button extends React.Component<ButtonProps> {
    };

    @boundMethod
-    handleClick() {
+    handleClick(e) {
        if (this.props.onClick && !this.props.disabled) {
-            this.props.onClick();
+            this.props.onClick(e);
        }
    }

    render() {
-        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = this.props;
+        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className, title } = this.props;

        return (
            <button
@@ -39,6 +40,7 @@ class Button extends React.Component<ButtonProps> {
                disabled={disabled}
                style={style}
                autoFocus={autoFocus}
+                title={title}
            >
                {leftIcon && <span className="icon-left">{leftIcon}</span>}
                {children}
@@ -0,0 +1,7 @@
+.copy-button {
+    padding: 5px 5px;
+
+    .fa-check {
+        color: var(--app-success-color);
+    }
+}
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Button } from "./button";
+import { boundMethod } from "autobind-decorator";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+
+import "./copybutton.less";
+
+type CopyButtonProps = {
+    title: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+@mobxReact.observer
+class CopyButton extends React.Component<CopyButtonProps, {}> {
+    isCopied: OV<boolean> = mobx.observable.box(false, { name: "isCopied" });
+
+    @boundMethod
+    handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
+        if (this.isCopied.get()) {
+            return;
+        }
+        mobx.action(() => {
+            this.isCopied.set(true);
+        })();
+        setTimeout(() => {
+            mobx.action(() => {
+                this.isCopied.set(false);
+            })();
+        }, 2000);
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+    }
+
+    render() {
+        const { title, onClick } = this.props;
+        const isCopied = this.isCopied.get();
+        return (
+            <Button onClick={this.handleOnClick} className="copy-button secondary ghost" title={title}>
+                {isCopied ? (
+                    <i className="fa-sharp fa-solid fa-check"></i>
+                ) : (
+                    <i className="fa-sharp fa-solid fa-copy"></i>
+                )}
+            </Button>
+        );
+    }
+}
+
+export { CopyButton };
@@ -22,6 +22,7 @@
    display: flex;
    align-items: center;
    justify-content: center;
+    background-color: var(--form-element-bg-color);

    input {
        outline: none !important;
@@ -29,6 +30,7 @@
        height: 100%;
        padding: 0 !important;
        cursor: default !important;
+        background-color: inherit !important;
    }

    .fa-calendar {
@@ -99,6 +101,7 @@
            background-color: var(--datepicker-cell-hover-bg-color);
        }
        &.selected {
+            color: var(--form-element-primary-text-color);
            background-color: var(--form-element-primary-color);
            font-weight: bold;
        }
@@ -157,6 +160,7 @@
        }

        &.selected {
+            color: var(--form-element-primary-text-color);
            background-color: var(--form-element-primary-color);
        }
    }
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, createRef } from "react";
 import * as mobx from "mobx";
 import ReactDOM from "react-dom";
 import dayjs from "dayjs";
-import cs from "classnames";
+import cn from "classnames";
 import { Button } from "@/elements";
 import { If } from "tsx-control-statements/components";
 import { GlobalModel } from "@/models";
@@ -39,8 +39,8 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        MM: selDate.format("MM"),
        DD: selDate.format("DD"),
    });
-    let curUuid = uuidv4();
-    let keybindsRegistered = mobx.observable.box(false, {
+    const curUuid = uuidv4();
+    const keybindsRegistered = mobx.observable.box(false, {
        name: "datepicker-keybinds-registered",
    });

@@ -90,7 +90,6 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        const newDate = dayjs(date);
        setSelDate(newDate); // Update selDate with the new dayjs object
        onSelectDate && onSelectDate(date); // Call parent's onSelectDate
-        setIsOpen(false); // Close the picker
    };

    const changeMonth = (delta: number) => {
@@ -103,7 +102,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        return (
            <div className="day-picker-header">
                <div
-                    className={cs({ fade: showYearAccordion })}
+                    className={cn({ fade: showYearAccordion })}
                    onClick={() => {
                        if (!showYearAccordion) {
                            setExpandedYear(selDate.year()); // Set expandedYear when opening accordion
@@ -112,7 +111,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
                    }}
                >
                    {selDate.format("MMMM YYYY")}
-                    <span className={cs("dropdown-arrow", { fade: showYearAccordion })}></span>
+                    <span className={cn("dropdown-arrow", { fade: showYearAccordion })}></span>
                </div>
                <If condition={!showYearAccordion}>
                    <div className="arrows">
@@ -183,9 +182,9 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        }

        // Next month's filler days
+        let overFlowIndex = 1;
        while (days.length < 42) {
-            const fillerDayCount = days.length - daysInPreviousMonth - endDay.date();
-            const dayDate = endDay.add(fillerDayCount + 1, "day");
+            const dayDate = endDay.add(overFlowIndex++, "day");
            days.push(
                <div
                    key={`next-month-day-${dayDate.format("YYYY-MM-DD")}`}
@@ -251,14 +250,14 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
                            </div>
                            <If condition={expandedYear === year}>
                                <div
-                                    className={cs("month-container", {
+                                    className={cn("month-container", {
                                        expanded: expandedYear === year,
                                    })}
                                >
                                    {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
                                        <div
                                            key={month}
-                                            className={cs("month", {
+                                            className={cn("month", {
                                                selected: year === currentYear && month === selDate.month() + 1,
                                            })}
                                            onClick={() => handleMonthYearSelect(month, year)}
@@ -301,7 +300,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
          )
        : null;

-    const handleDatePartChange = (part, value) => {
+    const handleDatePartChange = (part: string, value: string) => {
        const newDateParts = { ...dateParts, [part]: value };
        setDateParts(newDateParts);

@@ -312,7 +311,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        }
    };

-    const handleArrowNavigation = (key, currentPart) => {
+    const handleArrowNavigation = (key: string, currentPart: string) => {
        const currentIndex = formatParts.indexOf(currentPart);
        let targetInput;

@@ -327,9 +326,9 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        }
    };

-    const handleKeyDown = (event, currentPart) => {};
+    const handleKeyDown = (event, currentPart: string) => {};

-    const handleFocus = (event, part) => {
+    const handleFocus = (event, part: string) => {
        event.target.select();
        registerKeybindings(event, part);
    };
@@ -341,74 +340,69 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
        mobx.action(() => {
            keybindsRegistered.set(true);
        })();
-        let keybindManager = GlobalModel.keybindManager;
-        let domain = "datepicker-" + curUuid + "-" + part;
-        keybindManager.registerKeybinding("control", domain, "generic:selectLeft", (waveEvent) => {
+        const keybindManager = GlobalModel.keybindManager;
+        const domain = "datepicker-" + curUuid + "-" + part;
+        keybindManager.registerKeybinding("control", domain, "generic:selectLeft", (_) => {
            handleArrowNavigation("ArrowLeft", part);
            return true;
        });
-        keybindManager.registerKeybinding("control", domain, "generic:selectRight", (waveEvent) => {
+        keybindManager.registerKeybinding("control", domain, "generic:selectRight", (_) => {
            handleArrowNavigation("ArrowRight", part);
            return true;
        });
-        keybindManager.registerKeybinding("control", domain, "generic:space", (waveEvent) => {
+        keybindManager.registerKeybinding("control", domain, "generic:space", (_) => {
            toggleModal();
            return true;
        });
-        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (_) => {
            toggleModal();
            return true;
        });
-        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (_) => {
            closeModal();
            return true;
        });
-        keybindManager.registerKeybinding("control", domain, "generic:tab", (waveEvent) => {
+        keybindManager.registerKeybinding("control", domain, "generic:tab", (_) => {
            handleArrowNavigation("ArrowRight", part);
            return true;
        });
        for (let numpadKey = 0; numpadKey <= 9; numpadKey++) {
-            keybindManager.registerKeybinding(
-                "control",
-                domain,
-                "generic:numpad-" + numpadKey.toString(),
-                (waveEvent) => {
-                    let currentPart = part;
-                    const maxLength = currentPart === "YYYY" ? 4 : 2;
-                    const newValue = event.target.value.length < maxLength ? event.target.value + numpadKey : numpadKey;
-                    let selectionTimeoutId = null;
-                    handleDatePartChange(currentPart, newValue);
+            keybindManager.registerKeybinding("control", domain, "generic:numpad-" + numpadKey.toString(), (_) => {
+                const currentPart = part;
+                const maxLength = currentPart === "YYYY" ? 4 : 2;
+                const newValue = event.target.value.length < maxLength ? event.target.value + numpadKey : numpadKey;
+                let selectionTimeoutId = null;
+                handleDatePartChange(currentPart, newValue);

-                    // Clear any existing timeout
-                    if (selectionTimeoutId !== null) {
-                        clearTimeout(selectionTimeoutId);
-                    }
-
-                    // Re-focus and select the input after state update
-                    selectionTimeoutId = setTimeout(() => {
-                        event.target.focus();
-                        event.target.select();
-                    }, 0);
-                    return true;
+                // Clear any existing timeout
+                if (selectionTimeoutId !== null) {
+                    clearTimeout(selectionTimeoutId);
                }
-            );
+
+                // Re-focus and select the input after state update
+                selectionTimeoutId = setTimeout(() => {
+                    event.target.focus();
+                    event.target.select();
+                }, 0);
+                return true;
+            });
        }
    };

-    const handleBlur = (event, part) => {
+    const handleBlur = (event, part: string) => {
        unregisterKeybindings(part);
    };

-    const unregisterKeybindings = (part) => {
+    const unregisterKeybindings = (part: string) => {
        mobx.action(() => {
            keybindsRegistered.set(false);
        })();
-        let domain = "datepicker-" + curUuid + "-" + part;
+        const domain = "datepicker-" + curUuid + "-" + part;
        GlobalModel.keybindManager.unregisterDomain(domain);
    };

    // Prevent use from selecting text in the input
-    const handleMouseDown = (event, part) => {
+    const handleMouseDown = (event, part: string) => {
        event.preventDefault();

        handleFocus(event, part);
@@ -53,7 +53,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        };
        this.wrapperRef = React.createRef();
        this.menuRef = React.createRef();
-        this.curUuid == uuidv4();
+        this.curUuid = uuidv4();
    }

    componentDidMount() {
@@ -100,6 +100,9 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {

    @boundMethod
    handleClick() {
+        if (!this.state.isOpen || !this.state.isTouched) {
+            this.registerKeybindings();
+        }
        this.toggleDropdown();
    }

@@ -109,6 +112,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        this.registerKeybindings();
    }

+    @boundMethod
    registerKeybindings() {
        let keybindManager = GlobalModel.keybindManager;
        let domain = "dropdown-" + this.curUuid;
@@ -122,6 +126,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        });
        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
            this.setState({ isOpen: false });
+            this.unregisterKeybindings();
            return true;
        });
        keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
@@ -165,10 +170,12 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        }
    }

+    @boundMethod
    handleBlur() {
        this.unregisterKeybindings();
    }

+    @boundMethod
    unregisterKeybindings() {
        let domain = "dropdown-" + this.curUuid;
        GlobalModel.keybindManager.unregisterDomain(domain);
@@ -189,6 +196,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        }
        onChange(value);
        this.setState({ isOpen: false, isTouched: true });
+        this.unregisterKeybindings();
    }

    @boundMethod
@@ -18,3 +18,4 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
+export { CopyButton } from "./copybutton";
@@ -7,8 +7,10 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";

 import "./markdown.less";
+import { boundMethod } from "autobind-decorator";

 function LinkRenderer(props: any): any {
    let newUrl = "https://extern?" + encodeURIComponent(props.href);
@@ -28,14 +30,17 @@ function CodeRenderer(props: any): any {
 }

@mobxReact.observer
-class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
+class CodeBlockMarkdown extends React.Component<
+    { children: React.ReactNode; codeSelectSelectedIndex?: number; uuid: string },
+    {}
+> {
    blockIndex: number;
    blockRef: React.RefObject<HTMLPreElement>;

    constructor(props) {
        super(props);
        this.blockRef = React.createRef();
-        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef);
+        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef, this.props.uuid);
    }

    render() {
@@ -62,9 +67,21 @@ class Markdown extends React.Component<
    { text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
    {}
 > {
-    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number): any {
+    curUuid: string;
+
+    constructor(props) {
+        super(props);
+        this.curUuid = uuidv4();
+    }
+
+    @boundMethod
+    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
        if (codeSelect) {
-            return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
+            return (
+                <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex} uuid={curUuid}>
+                    {props.children}
+                </CodeBlockMarkdown>
+            );
        } else {
            const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
                let blockText = (e.target as HTMLElement).innerText;
@@ -90,7 +107,7 @@ class Markdown extends React.Component<
            h5: (props) => HeaderRenderer(props, 5),
            h6: (props) => HeaderRenderer(props, 6),
            code: (props) => CodeRenderer(props),
-            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex),
+            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex, this.curUuid),
        };
        return (
            <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
--- a/Show More
+++ b/Show More