wip

* added term keybindings

* removed logs and added a dump logs flag in keyutil

* un capture keys that we aren't using

* moved keybindings to inside terminal

assets/default-keybindings.json

@@ -1,7 +1,8 @@
 [
     {
       "command": "system:toggleDeveloperTools",
-      "keys": ["Cmd:Option:i"]
+      "keys": ["Cmd:Option:i"],
+      "info": "Opens the chrome developer tool menu"
     },
     {
       "command": "system:hideWindow",
@@ -15,10 +16,62 @@
       "command": "generic:confirm",
       "keys": ["Enter"]
     },
+    {
+      "command": "generic:expandTextInput",
+      "keys": ["Shift:Enter", "Ctrl:Enter"]
+    },
     {
       "command": "generic:deleteItem",
       "keys": ["Backspace", "Delete"]
     },
+    {
+      "command": "generic:space",
+      "keys": ["Space"]
+    },
+    {
+      "command": "generic:tab",
+      "keys": ["Tab"]
+    },
+    {
+      "command": "generic:numpad-0",
+      "keys": ["0"]
+    },
+    {
+      "command": "generic:numpad-1",
+      "keys": ["1"]
+    },
+    {
+      "command": "generic:numpad-2",
+      "keys": ["2"]
+    },
+    {
+      "command": "generic:numpad-3",
+      "keys": ["3"]
+    },
+    {
+      "command": "generic:numpad-4",
+      "keys": ["4"]
+    },
+    {
+      "command": "generic:numpad-5",
+      "keys": ["5"]
+    },
+    {
+      "command": "generic:numpad-6",
+      "keys": ["6"]
+    },
+    {
+      "command": "generic:numpad-7",
+      "keys": ["7"]
+    },
+    {
+      "command": "generic:numpad-8",
+      "keys": ["8"]
+    },
+    {
+      "command": "generic:numpad-9",
+      "keys": ["9"]
+    },
     {
       "command": "generic:selectAbove",
       "keys": ["ArrowUp"]
@@ -27,6 +80,14 @@
       "command": "generic:selectBelow",
       "keys": ["ArrowDown"]
     },
+    {
+      "command": "generic:selectLeft",
+      "keys": ["ArrowLeft"]
+    },
+    {
+      "command": "generic:selectRight",
+      "keys": ["ArrowRight"]
+    },
     {
       "command": "generic:selectPageAbove",
       "keys": ["PageUp"]
@@ -67,7 +128,8 @@
     },
     {
       "command": "app:restartCommand",
-      "keys": ["Cmd:r"]
+      "keys": ["Cmd:r"],
+      "info": "Restarts the command running in the current selected line"
     },
     {
       "command": "app:restartLastCommand",
@@ -87,39 +149,48 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"]
+      "keys": ["Cmd:1"],
+      "commandStr":"/screen 1"
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"]
+      "keys": ["Cmd:2"],
+      "commandStr":"/screen 2"
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"]
+      "keys": ["Cmd:3"],
+      "commandStr":"/screen 3"
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"]
+      "keys": ["Cmd:4"],
+      "commandStr":"/screen 4"
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"]
+      "keys": ["Cmd:5"],
+      "commandStr":"/screen 5"
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"]
+      "keys": ["Cmd:6"],
+      "commandStr":"/screen 6"
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"]
+      "keys": ["Cmd:7"],
+      "commandStr":"/screen 7"
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"]
+      "keys": ["Cmd:8"],
+      "commandStr":"/screen 8"
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"]
+      "keys": ["Cmd:9"],
+      "commandStr":"/screen 9"
     },
     {
       "command": "app:selectTabLeft",

package.json

@@ -6,7 +6,7 @@
     },
     "productName": "Wave",
     "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.0",
+    "version": "0.7.1",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "repository": {

public/themes/default.css

@@ -7,16 +7,6 @@
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
 
-    /* these variables are overridden by user settings */
-    /*
-    --termfontfamily: "Hack";
-    --termfontsize: 13px;
-    --termlineheight: 15px;
-    --termpad: 7px;
-    --termfontsize-sm: 11px;
-    --termlineheight-sm: 13px;
-    */
-
     /* base fonts */
     --base-font: normal 15px / normal "Lato", sans-serif;
 
@@ -44,16 +34,18 @@
     --floating-logo-width: 40px;
     --floating-logo-height: var(--screentabs-height);
 
+    /* right sidebar triggers */
+    --floating-right-sidebar-triggers-width-darwin: 50px;
+    --floating-right-sidebar-triggers-width: 40px;
+
     /* global colors */
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
-    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
-    --app-error-color: rgb(229, 77, 46);
-    --app-warning-color: rgb(224, 185, 86);
-    --app-success-color: rgb(78, 154, 6);
+    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
     --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-border-color: rgb(51, 51, 51);
     --app-maincontent-bg-color: #333;
     --app-panel-bg-color: rgba(21, 23, 21, 1);
@@ -62,16 +54,16 @@
     --app-icon-hover-color: #fff;
     --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
-    /* icon colors */
+    /* global status colors */
+    --app-error-color: rgb(229, 77, 46);
+    --app-warning-color: rgb(224, 185, 86);
+    --app-success-color: rgb(78, 154, 6);
+    --app-idle-color: var(--app-text-secondary-color);
 
     /* just for macos */
     --app-border-radius-darwin: 10px;
 
-    /* global generic colors */
-    --app-black: rgb(0, 0, 0);
-
     /* scrollbar colors */
-    /* --scrollbar-background-color: rgba(21, 23, 21, 1); */
     --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);
@@ -112,28 +104,9 @@
     --markdown-bg-color: rgb(35, 35, 35);
     --markdown-outline-color: var(--form-element-primary-color);
 
-    /* status(remote) colors */
-    /* todo: all status colors must be unified */
-    --status-connected-color: var(--app-success-color);
-    --status-connecting-color: var(--app-warning-color);
-    --status-error-color: var(--app-error-color);
-    --status-disconnected-color: var(--app-text-secondary-color);
-
-    /* status indicator colors */
-    /* todo: all status colors must be unified */
-    --status-indicator-color: var(--app-text-color);
-    --status-indicator-error: var(--status-error-color);
-    --status-indicator-success: var(--status-connected-color);
-
-    /* status(version) colors */
-    /* todo: all status colors must be unified */
-    --status-outdated-color: var(--status-connecting-color);
-    --status-updated-color: var(--status-connected-color);
-
     /* term status colors */
-    /* todo: all status colors must be unified */
-    --term-error-color: var(--status-error-color);
-    --term-warning-color: var(--status-connecting-color);
+    --term-error-color: var(--app-error-color);
+    --term-warning-color: var(--app-warning-color);
 
     /* hotkey colors */
     --hotkey-text-color: var(--app-text-secondary-color);
@@ -152,7 +125,6 @@
     --line-text-color: rgb(211, 215, 207);
     --line-svg-fill-color: rgb(150, 152, 150);
     --line-svg-hover-fill-color: #eceeec;
-    --line-selected-border-color: rgb(193, 195, 193);
     --line-separator-color: rgb(126, 126, 126);
     --line-error-color: var(--app-error-color);
     --line-warning-color: var(--app-warning-color);
@@ -175,17 +147,6 @@
     --line-actions-active-color: rgba(255, 255, 255, 1);
     --line-actions-bg-color: rgba(255, 255, 255, 0.15);
 
-    /* view colors */
-    /* todo: bookmarks is a view, colors must be unified with --view* colors */
-    --bookmarks-text-color: rgb(211, 215, 207);
-    --bookmarks-textarea-bg-color: rgb(0, 0, 0);
-    --bookmarks-disabled-text-color: rgb(173, 173, 173);
-    --bookmarks-control-hover-color: rgb(255, 255, 255);
-
-    /* view colors */
-    --view-error-color: var(--app-error-color);
-    --view-text-color: var(--app-text-color);
-
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
@@ -196,9 +157,6 @@
     --table-tr-selected-bg-color: #222;
     --table-tr-selected-hover-bg-color: #333;
 
-    /* session colors */
-    --session-bg-color: rgba(13, 13, 13, 0.85);
-
     /* cmdinput colors */
     --cmdinput-textarea-bg-color: #171717;
     --cmdinput-text-error-color: var(--term-red);
@@ -219,5 +177,13 @@
     --modal-bg-color: var(--app-bg-color);
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
-    --logo-button-hover-bg-color: #1e1e1e;
+    --logo-button-hover-bg-color: var(--app-accent-bg-color);
+
+    --xterm-viewport-border-color: rgba(241, 246, 243, 0.15);
+
+    --datepicker-cell-hover-bg-color: rgba(255, 255, 255, 0.06);
+    --datepicker-cell-other-text-color: rgba(255, 255, 255, 0.3);
+    --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 */
 }

public/themes/light.css

@@ -23,15 +23,13 @@
 
     /* 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 */
 
-    /* view colors */
-    --view-text-color: var(--app-text-color);
-
     /* table colors */
     --table-thead-border-top-color: rgba(0, 0, 0, 0.2);
     --table-thead-border-bottom-color: rgba(0, 0, 0, 0.3);
@@ -70,8 +68,16 @@
     --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;
+
+    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
+
+    --datepicker-cell-hover-bg-color: #f0f0f0;
+    --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;
+
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);
-
-    --logo-button-hover-bg-color: #f0f0f0;
 }

public/themes/term-default.css

@@ -27,6 +27,6 @@
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
-    --term-selection-background: #ffffff90;
+    --term-selection-background: #ffffff60;
     --term-cursor-accent: #000000;
 }

src/app/app.less

@@ -101,6 +101,7 @@ body input.input {
     font-size: 10px;
     font-weight: 300;
     line-height: 14px;
+    user-select: none;
 }
 
 .text-s1.icon {
@@ -302,6 +303,25 @@ a.a-block {
     }
 }
 
+.right-sidebar-triggers {
+    position: absolute;
+    z-index: 25;
+    right: 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    pointer-events: none;
+    height: 38px;
+    padding: 0 5px;
+
+    .right-sidebar-trigger {
+        cursor: pointer;
+        user-select: none;
+        -webkit-app-region: no-drag;
+        pointer-events: all;
+    }
+}
+
 .copied-indicator {
     position: absolute;
     top: 0;
@@ -716,28 +736,28 @@ a.a-block {
 .status-icon.status-connected {
     path,
     circle {
-        fill: var(--status-connected-color);
+        fill: var(--app-success-color);
     }
 }
 
 .status-icon.status-connecting {
     path,
     circle {
-        fill: var(--status-connecting-color);
+        fill: var(--app-warning-color);
     }
 }
 
 .status-icon.status-disconnected {
     path,
     circle {
-        fill: var(--status-disconnected-color);
+        fill: var(--app-idle-color);
     }
 }
 
 .status-icon.status-error {
     path,
     circle {
-        fill: var(--status-error-color);
+        fill: var(--app-error-color);
     }
 }
 
@@ -800,6 +820,7 @@ a.a-block {
         display: flex;
         flex-direction: row;
         align-items: center;
+        user-select: none;
         .info-message {
             margin-left: 5px;
         }
@@ -848,6 +869,7 @@ a.a-block {
                 padding-left: 10px;
                 padding-right: 10px;
                 font-weight: bold;
+                user-select: none;
             }
 
             .tab-color-icon,
@@ -861,6 +883,7 @@ a.a-block {
                 display: inline-block;
                 margin-left: 1em;
                 min-width: 70px;
+                user-select: none;
             }
 
             .tab-color-select,

src/app/app.tsx

@@ -16,10 +16,12 @@ import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
 import { ConnectionsView } from "./connections/connections";
 import { ClientSettingsView } from "./clientsettings/clientsettings";
-import { MainSideBar } from "./sidebar/sidebar";
-import { DisconnectedModal, ClientStopModal } from "./common/modals";
-import { ModalsProvider } from "./common/modals/provider";
-import { ErrorBoundary } from "./common/error/errorboundary";
+import { MainSideBar } from "./sidebar/main";
+import { RightSideBar } from "./sidebar/right";
+import { DisconnectedModal, ClientStopModal } from "@/modals";
+import { ModalsProvider } from "@/modals/provider";
+import { Button } from "@/elements";
+import { ErrorBoundary } from "@/common/error/errorboundary";
 import cn from "classnames";
 import "./app.less";
 
@@ -65,9 +67,17 @@ class App extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    openSidebar() {
-        const width = GlobalModel.mainSidebarModel.getWidth(true);
-        GlobalCommandRunner.clientSetSidebar(width, false);
+    openMainSidebar() {
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+        const width = mainSidebarModel.getWidth(true);
+        mainSidebarModel.saveState(width, false);
+    }
+
+    @boundMethod
+    openRightSidebar() {
+        const rightSidebarModel = GlobalModel.rightSidebarModel;
+        const width = rightSidebarModel.getWidth(true);
+        rightSidebarModel.saveState(width, false);
     }
 
     render() {
@@ -110,23 +120,36 @@ class App extends React.Component<{}, {}> {
         }
         // used to force a full reload of the application
         const renderVersion = GlobalModel.renderVersion.get();
-        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
+        const mainSidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
+        const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
+        const activeMainView = GlobalModel.activeMainView.get();
         const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
         return (
             <div
                 key={"version-" + renderVersion}
                 id="main"
-                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
+                className={cn(
+                    "platform-" + platform,
+                    { "mainsidebar-collapsed": mainSidebarCollapsed, "rightsidebar-collapsed": rightSidebarCollapsed },
+                    lightDarkClass
+                )}
                 onContextMenu={this.handleContextMenu}
             >
-                <If condition={sidebarCollapsed}>
+                <If condition={mainSidebarCollapsed}>
                     <div key="logo-button" className="logo-button-container">
                         <div className="logo-button-spacer" />
-                        <div className="logo-button" onClick={this.openSidebar}>
+                        <div className="logo-button" onClick={this.openMainSidebar}>
                             <img src="public/logos/wave-logo.png" alt="logo" />
                         </div>
                     </div>
                 </If>
+                <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>
+                        </Button>
+                    </div>
+                </If>
                 <div ref={this.mainContentRef} className="main-content">
                     <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
@@ -137,6 +160,7 @@ class App extends React.Component<{}, {}> {
                         <ConnectionsView model={remotesModel} />
                         <ClientSettingsView model={remotesModel} />
                     </ErrorBoundary>
+                    <RightSideBar parentRef={this.mainContentRef} clientData={clientData} />
                 </div>
                 <ModalsProvider />
             </div>

src/app/bookmarks/bookmarks.less

@@ -6,11 +6,11 @@
     }
 
     .bookmarks-list {
-        color: var(--bookmarks-text-color);
+        color: var(--app-text-color);
         margin: 4px 10px 5px 5px;
 
         .no-bookmarks {
-            color: var(--bookmarks-text-color);
+            color: var(--app-text-color);
             padding: 30px 10px 35px 10px;
             border-bottom: 1px solid white;
         }
@@ -46,21 +46,21 @@
         }
 
         label {
-            color: var(--bookmarks-text-color);
+            color: var(--app-text-color);
             margin-bottom: 4px;
         }
 
         textarea {
             width: 80%;
             min-width: 50%;
-            color: var(--bookmarks-text-color);
-            background-color: var(--bookmarks-textarea-bg-color);
+            color: var(--app-text-color);
+            background-color: var(--form-element-bg-color);
         }
 
         .bookmark-id-div {
             display: none;
             position: absolute;
-            color: var(--bookmarks-disabled-text-color);
+            color: var(--app-text-disabled-color);
             right: 5px;
             bottom: 2px;
             font-size: 0.8em;
@@ -75,7 +75,7 @@
             flex-direction: row;
 
             visibility: hidden;
-            color: var(--bookmarks-text-color);
+            color: var(--app-text-color);
 
             .bookmark-control:first-child {
                 margin-left: 0;
@@ -85,10 +85,6 @@
                 margin-left: 10px;
                 cursor: pointer;
                 padding: 2px;
-
-                &:hover {
-                    color: var(--bookmarks-control-hover-color);
-                }
             }
         }
 

src/app/bookmarks/bookmarks.tsx

@@ -22,6 +22,59 @@ type BookmarkProps = {
     bookmark: BookmarkType;
 };
 
+class BookmarkKeybindings extends React.Component<{}, {}> {
+    @boundMethod
+    componentDidMount(): void {
+        let keybindManager = GlobalModel.keybindManager;
+        let bookmarksModel = GlobalModel.bookmarksModel;
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:cancel", (waveEvent) => {
+            bookmarksModel.handleUserClose();
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:deleteItem", (waveEvent) => {
+            bookmarksModel.handleUserDelete();
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectAbove", (waveEvent) => {
+            bookmarksModel.handleUserNavigate(-1);
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectBelow", (waveEvent) => {
+            bookmarksModel.handleUserNavigate(1);
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageAbove", (waveEvent) => {
+            bookmarksModel.handleUserNavigate(-10);
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageBelow", (waveEvent) => {
+            bookmarksModel.handleUserNavigate(10);
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:confirm", (waveEvent) => {
+            bookmarksModel.handleUserConfirm();
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:edit", (waveEvent) => {
+            bookmarksModel.handleUserEdit();
+            return true;
+        });
+        keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:copy", (waveEvent) => {
+            bookmarksModel.handleUserCopy();
+            return true;
+        });
+    }
+
+    @boundMethod
+    componentWillUnmount() {
+        GlobalModel.keybindManager.unregisterDomain("bookmarks");
+    }
+
+    render() {
+        return null;
+    }
+}
+
 @mobxReact.observer
 class Bookmark extends React.Component<BookmarkProps, {}> {
     @boundMethod
@@ -194,6 +247,9 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmark: BookmarkType = null;
         return (
             <MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
+                <If condition={!isHidden}>
+                    <BookmarkKeybindings></BookmarkKeybindings>
+                </If>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
                         <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />

src/app/clientsettings/clientsettings.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 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 { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
@@ -13,6 +14,25 @@ import * as appconst from "@/app/appconst";
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";
 
+class ClientSettingsKeybindings extends React.Component<{}, {}> {
+    componentDidMount() {
+        let clientSettingsViewModel = GlobalModel.clientSettingsViewModel;
+        let keybindManager = GlobalModel.keybindManager;
+        keybindManager.registerKeybinding("mainview", "clientsettings", "generic:cancel", (waveEvent) => {
+            clientSettingsViewModel.closeView();
+            return true;
+        });
+    }
+
+    componentWillUnmount() {
+        GlobalModel.keybindManager.unregisterDomain("clientsettings");
+    }
+
+    render() {
+        return null;
+    }
+}
+
 @mobxReact.observer
 class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
@@ -116,6 +136,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         commandRtnHandler(prtn, this.errorMessage);
     }
 
+    @boundMethod
+    inlineUpdateOpenAIBaseURL(newBaseURL: string): void {
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ baseurl: newBaseURL });
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
     @boundMethod
     setErrorMessage(msg: string): void {
         mobx.action(() => {
@@ -168,6 +194,9 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
         return (
             <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
+                <If condition={!isHidden}>
+                    <ClientSettingsKeybindings></ClientSettingsKeybindings>
+                </If>
                 <div className="content">
                     <div className="settings-field">
                         <div className="settings-label">Term Font Size</div>
@@ -232,7 +261,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </div>
                     </div>
                     <div className="settings-field">
-                        <div className="settings-label">OpenAI Token</div>
+                        <div className="settings-label">AI Token</div>
                         <div className="settings-input">
                             <InlineSettingsTextEdit
                                 placeholder=""
@@ -245,7 +274,20 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </div>
                     </div>
                     <div className="settings-field">
-                        <div className="settings-label">OpenAI Model</div>
+                        <div className="settings-label">AI Base URL</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder=""
+                                text={isBlank(openAIOpts.baseurl) ? "openai default" : openAIOpts.baseurl}
+                                value={openAIOpts.baseurl ?? ""}
+                                onChange={this.inlineUpdateOpenAIBaseURL}
+                                maxLength={10}
+                                showIcon={true}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">AI Model</div>
                         <div className="settings-input">
                             <InlineSettingsTextEdit
                                 placeholder="gpt-3.5-turbo"
@@ -258,7 +300,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </div>
                     </div>
                     <div className="settings-field">
-                        <div className="settings-label">OpenAI MaxTokens</div>
+                        <div className="settings-label">AI MaxTokens</div>
                         <div className="settings-input">
                             <InlineSettingsTextEdit
                                 placeholder=""

src/app/common/elements/button.less

@@ -1,11 +1,8 @@
 .wave-button {
     background: none;
-    color: inherit;
     border: none;
-    font: inherit;
     cursor: pointer;
     outline: inherit;
-
     display: flex;
     padding: 6px 16px;
     align-items: center;
@@ -13,57 +10,65 @@
     border-radius: 6px;
     height: auto;
     line-height: 1.5;
+    display: block;
+    white-space: nowrap;
+    user-select: none;
+
+    color: var(--form-element-text-color);
+    background: var(--form-element-primary-color);
+    i {
+        fill: var(--form-element-text-color);
+    }
 
     &.primary {
+        color: var(--form-element-text-color);
+        background: var(--form-element-primary-color);
+        i {
+            fill: var(--form-element-text-color);
+        }
+    }
+
+    &.primary.outlined {
         background: none;
+        border: 1px solid var(--form-element-primary-color);
 
         i {
             fill: var(--form-element-primary-color);
         }
+    }
 
-        &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-primary-color);
-
-            i {
-                fill: var(--form-element-text-color);
-            }
-        }
-
-        &.outlined {
-            border: 1px solid var(--form-element-primary-color);
-        }
-
-        &.ghost {
-            // Styles for .ghost are already defined above
-        }
-
-        &:hover {
-            color: var(--form-element-text-color);
+    &.primary.ghost {
+        background: none;
+        i {
+            fill: var(--form-element-primary-color);
         }
     }
 
     &.secondary {
         color: var(--form-element-text-color);
+        background: var(--form-element-secondary-color);
+        i {
+            fill: var(--form-element-text-color);
+        }
+    }
+
+    &.secondary.outlined {
         background: none;
+        border: 1px solid var(--form-element-text-color);
+    }
 
-        &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-secondary-color);
-            box-shadow: none;
-        }
+    &.secondary.ghost {
+        background: none;
+    }
 
-        &.outlined {
-            border: 1px solid var(--form-element-secondary-color);
-        }
+    &.secondary.danger {
+        color: var(--app-error-color);
+    }
 
-        &.ghost {
-            padding: 6px 10px;
-
-            i {
-                fill: var(--form-element-primary-color);
-            }
-        }
+    &.small {
+        padding: 4px 8px;
+        font-size: 12px;
+        border-radius: 3.6px;
     }
 
     &.term-inline {

src/app/common/elements/button.tsx

@@ -1,24 +1,15 @@
-// Copyright 2023, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
 import * as React from "react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 
 import "./button.less";
 
-type ButtonVariantType = "outlined" | "solid" | "ghost";
-type ButtonThemeType = "primary" | "secondary";
-
 interface ButtonProps {
-    theme?: ButtonThemeType;
     children: React.ReactNode;
     onClick?: () => void;
     disabled?: boolean;
-    variant?: ButtonVariantType;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-    color?: string;
     style?: React.CSSProperties;
     autoFocus?: boolean;
     className?: string;
@@ -27,10 +18,8 @@ interface ButtonProps {
 
 class Button extends React.Component<ButtonProps> {
     static defaultProps = {
-        theme: "primary",
-        variant: "solid",
-        color: "",
         style: {},
+        className: "primary",
     };
 
     @boundMethod
@@ -41,31 +30,11 @@ class Button extends React.Component<ButtonProps> {
     }
 
     render() {
-        const {
-            leftIcon,
-            rightIcon,
-            theme,
-            children,
-            disabled,
-            variant,
-            color,
-            style,
-            autoFocus,
-            termInline,
-            className,
-        } = this.props;
+        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = this.props;
 
         return (
             <button
-                className={cn(
-                    "wave-button",
-                    theme,
-                    variant,
-                    color,
-                    { disabled: disabled },
-                    { "term-inline": termInline },
-                    className
-                )}
+                className={cn("wave-button", { disabled }, { "term-inline": termInline }, className)}
                 onClick={this.handleClick}
                 disabled={disabled}
                 style={style}

src/app/common/elements/datepicker.less

@@ -0,0 +1,183 @@
+.day-picker-modal {
+    background-color: var(--form-element-bg-color);
+    z-index: 1000;
+    width: 250px;
+    height: 293px;
+    font-size: 13px;
+    border: 1px solid var(--form-element-border-color);
+    border-radius: 4px;
+    color: var(--form-element-text-color);
+}
+
+.day-picker-input {
+    cursor: default;
+    border: 1px solid var(--form-element-border-color) !important;
+    height: 34px;
+    user-select: none;
+    display: flex;
+    border-radius: 4px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    input {
+        outline: none !important;
+        border: none !important;
+        height: 100%;
+        padding: 0 !important;
+        cursor: default !important;
+    }
+
+    .fa-calendar {
+        margin-left: 10px;
+        cursor: pointer;
+    }
+}
+
+.day-picker-header {
+    color: var(--form-element-text-color);
+    padding: 10px 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    position: sticky;
+
+    div {
+        cursor: default;
+        font-weight: bold;
+        user-select: none;
+
+        &.fade {
+            color: var(--datepicker-header-fade-color);
+        }
+    }
+
+    .arrows {
+        display: flex;
+
+        .wave-button {
+            padding: 5px !important;
+            font-size: 18px !important;
+            cursor: default !important;
+        }
+    }
+}
+
+.day-header {
+    display: flex;
+    color: var(--form-element-text-color);
+    padding: 0 10px;
+
+    .day-header-cell {
+        flex: 1;
+        padding: 10px;
+        color: var(--form-element-text-color);
+        text-align: center;
+        font-weight: bold;
+        user-select: none;
+    }
+}
+
+.day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+    padding: 0 10px 10px;
+
+    .day {
+        padding: 10px 4px;
+        color: var(--form-element-text-color);
+        text-align: center;
+        cursor: default;
+        border-radius: 3px;
+
+        &:hover {
+            background-color: var(--datepicker-cell-hover-bg-color);
+        }
+        &.selected {
+            background-color: var(--form-element-primary-color);
+            font-weight: bold;
+        }
+    }
+
+    .other-month {
+        color: var(--datepicker-cell-other-text-color);
+    }
+}
+
+.year-month-accordion-wrapper {
+    overflow-y: auto;
+    height: 243px;
+    margin-top: 8px;
+    padding: 0 10px 10px;
+
+    .year-month-accordion {
+        color: var(--form-element-text-color);
+    }
+
+    .year-header {
+        padding: 5px 10px;
+        background-color: var(--datepicker-year-header-bg-color);
+        border-bottom: 1px solid var(--datepicker-year-header-border-color);
+        margin-bottom: 5px;
+        font-weight: bold;
+        text-align: center;
+        cursor: default;
+        color: var(--form-element-text-color);
+        user-select: none;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .month-container {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 5px;
+        padding: 10px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+        cursor: default;
+    }
+
+    .month {
+        padding: 5px;
+        text-align: center;
+        border-radius: 3px;
+        color: var(--form-element-text-color);
+
+        &:hover {
+            background-color: var(--datepicker-cell-hover-bg-color);
+        }
+
+        &.selected {
+            background-color: var(--form-element-primary-color);
+        }
+    }
+
+    .expanded {
+        max-height: 500px;
+    }
+}
+
+.dropdown-arrow {
+    display: inline-block;
+    margin-left: 5px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--form-element-text-color);
+    vertical-align: middle;
+    user-select: none;
+
+    &.fade {
+        border-top: 5px solid var(--datepicker-header-fade-color);
+    }
+}

src/app/common/elements/datepicker.tsx

@@ -0,0 +1,499 @@
+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 { Button } from "@/elements";
+import { If } from "tsx-control-statements/components";
+import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";
+
+import "./datepicker.less";
+
+interface YearRefs {
+    [key: number]: React.RefObject<HTMLDivElement>;
+}
+
+type DatePickerProps = {
+    selectedDate: Date;
+    onSelectDate: (date: Date) => void;
+    format?: string;
+};
+
+const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/YYYY", onSelectDate }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selDate, setSelDate] = useState(dayjs(selectedDate)); // Initialize with dayjs object
+    const [showYearAccordion, setShowYearAccordion] = useState(false);
+    const [expandedYear, setExpandedYear] = useState<number | null>(selDate.year());
+    const yearRefs = useRef<YearRefs>({});
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const calendarIconRef = useRef(null);
+    const inputRefs = useRef({ YYYY: null, MM: null, DD: null });
+    // Extract delimiter using regex
+    const delimiter = format.replace(/[0-9YMD]/g, "")[0] || "/";
+    // Split format and create state for each part
+    const formatParts = format.split(delimiter);
+    const [dateParts, setDateParts] = useState({
+        YYYY: selDate.format("YYYY"),
+        MM: selDate.format("MM"),
+        DD: selDate.format("DD"),
+    });
+    let curUuid = uuidv4();
+    let keybindsRegistered = mobx.observable.box(false, {
+        name: "datepicker-keybinds-registered",
+    });
+
+    useEffect(() => {
+        inputRefs.current = {
+            YYYY: createRef(),
+            MM: createRef(),
+            DD: createRef(),
+        };
+    }, []);
+
+    useEffect(() => {
+        if (showYearAccordion && expandedYear && yearRefs.current[expandedYear]) {
+            yearRefs.current[expandedYear].current?.scrollIntoView({
+                block: "nearest",
+            });
+        }
+    }, [showYearAccordion, expandedYear]);
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+        setDateParts({
+            YYYY: selDate.format("YYYY"),
+            MM: selDate.format("MM"),
+            DD: selDate.format("DD"),
+        });
+    }, [selDate]);
+
+    const handleClickOutside = (event: MouseEvent) => {
+        // Check if the click is on the calendar icon
+        if (calendarIconRef.current && calendarIconRef.current.contains(event.target as Node)) {
+            // Click is on the calendar icon, do nothing
+            return;
+        }
+
+        // Check if the click is outside the modal
+        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+            setIsOpen(false); // Close the modal
+        }
+    };
+
+    const handleDayClick = (date: Date) => {
+        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) => {
+        const newDate = selDate.add(delta, "month");
+        setSelDate(newDate);
+        onSelectDate && onSelectDate(newDate.toDate());
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="day-picker-header">
+                <div
+                    className={cs({ fade: showYearAccordion })}
+                    onClick={() => {
+                        if (!showYearAccordion) {
+                            setExpandedYear(selDate.year()); // Set expandedYear when opening accordion
+                        }
+                        setShowYearAccordion(!showYearAccordion);
+                    }}
+                >
+                    {selDate.format("MMMM YYYY")}
+                    <span className={cs("dropdown-arrow", { fade: showYearAccordion })}></span>
+                </div>
+                <If condition={!showYearAccordion}>
+                    <div className="arrows">
+                        <Button className="secondary ghost" onClick={() => changeMonth(-1)}>
+                            &uarr;
+                        </Button>
+                        <Button className="secondary ghost" onClick={() => changeMonth(1)}>
+                            &darr;
+                        </Button>
+                    </div>
+                </If>
+            </div>
+        );
+    };
+
+    const renderDayHeaders = () => {
+        const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"]; // First letter of each day
+        return (
+            <div className="day-header">
+                {daysOfWeek.map((day, i) => (
+                    <div key={`${day}-${i}`} className="day-header-cell">
+                        {day}
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    const renderDays = () => {
+        const days = [];
+        const startDay = selDate.startOf("month");
+        const endDay = selDate.endOf("month");
+        const startDate = startDay.day(); // 0 for Sunday, 1 for Monday, ..., 6 for Saturday
+
+        // Previous month's filler days
+        const previousMonth = startDay.subtract(1, "month");
+        const daysInPreviousMonth = previousMonth.daysInMonth();
+        for (let i = daysInPreviousMonth - startDate + 1; i <= daysInPreviousMonth; i++) {
+            const dayDate = previousMonth.date(i);
+            days.push(
+                <div
+                    key={`prev-month-day-${i}`}
+                    className="day other-month"
+                    onClick={() => handleDayClick(dayDate.toDate())}
+                >
+                    {i}
+                </div>
+            );
+        }
+
+        // Current month's days
+        for (
+            let dayCount = 1;
+            startDay.add(dayCount - 1, "day").isBefore(endDay) ||
+            startDay.add(dayCount - 1, "day").isSame(endDay, "day");
+            dayCount++
+        ) {
+            const currentDate = startDay.add(dayCount - 1, "day");
+            days.push(
+                <div
+                    key={dayCount}
+                    className={`day ${selDate.isSame(currentDate, "day") ? "selected" : ""}`}
+                    onClick={() => handleDayClick(currentDate.toDate())}
+                >
+                    {dayCount}
+                </div>
+            );
+        }
+
+        // Next month's filler days
+        while (days.length < 42) {
+            const fillerDayCount = days.length - daysInPreviousMonth - endDay.date();
+            const dayDate = endDay.add(fillerDayCount + 1, "day");
+            days.push(
+                <div
+                    key={`next-month-day-${dayDate.format("YYYY-MM-DD")}`}
+                    className="day other-month"
+                    onClick={() => handleDayClick(dayDate.toDate())}
+                >
+                    {dayDate.date()}
+                </div>
+            );
+        }
+
+        return days;
+    };
+
+    const calculatePosition = (): React.CSSProperties => {
+        if (wrapperRef.current) {
+            const rect = wrapperRef.current.getBoundingClientRect();
+            return {
+                position: "absolute",
+                top: `${rect.bottom + window.scrollY + 2}px`,
+                left: `${rect.left + window.scrollX}px`,
+            };
+        }
+        return {};
+    };
+
+    const populateYears = () => {
+        const currentYear = dayjs().year();
+        const startYear = currentYear - 10;
+        const endYear = currentYear + 10;
+        const yearsRange = [];
+
+        for (let year = startYear; year <= endYear; year++) {
+            yearsRange.push(year);
+            yearRefs.current[year] = React.createRef();
+        }
+
+        return yearsRange;
+    };
+
+    const handleMonthYearSelect = (month: number, year: number) => {
+        const newDate = dayjs(new Date(year, month - 1));
+        setSelDate(newDate);
+        setShowYearAccordion(false); // Close accordion
+        onSelectDate && onSelectDate(newDate.toDate());
+    };
+
+    const renderYearMonthAccordion = () => {
+        const years = populateYears();
+        const currentYear = selDate.year();
+
+        return (
+            <div className="year-month-accordion-wrapper">
+                <div className="year-month-accordion">
+                    {years.map((year) => (
+                        <div key={year} ref={yearRefs.current[year]}>
+                            <div
+                                className="year-header"
+                                data-year={year}
+                                onClick={() => setExpandedYear(year === expandedYear ? null : year)}
+                            >
+                                {year}
+                            </div>
+                            <If condition={expandedYear === year}>
+                                <div
+                                    className={cs("month-container", {
+                                        expanded: expandedYear === year,
+                                    })}
+                                >
+                                    {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+                                        <div
+                                            key={month}
+                                            className={cs("month", {
+                                                selected: year === currentYear && month === selDate.month() + 1,
+                                            })}
+                                            onClick={() => handleMonthYearSelect(month, year)}
+                                        >
+                                            {dayjs(new Date(year, month - 1)).format("MMM")}
+                                        </div>
+                                    ))}
+                                </div>
+                            </If>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    const toggleModal = () => {
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setShowYearAccordion(false);
+    };
+
+    const closeModal = () => {
+        setIsOpen(false);
+        setShowYearAccordion(false);
+    };
+
+    const dayPickerModal = isOpen
+        ? ReactDOM.createPortal(
+              <div ref={modalRef} className="day-picker-modal" style={calculatePosition()}>
+                  {renderHeader()}
+                  {showYearAccordion && renderYearMonthAccordion()}
+                  <If condition={!showYearAccordion}>
+                      <>
+                          {renderDayHeaders()}
+                          <div className="day-picker">{renderDays()}</div>
+                      </>
+                  </If>
+              </div>,
+              document.getElementById("app")!
+          )
+        : null;
+
+    const handleDatePartChange = (part, value) => {
+        const newDateParts = { ...dateParts, [part]: value };
+        setDateParts(newDateParts);
+
+        // Construct a new date from the updated parts
+        const newDate = dayjs(`${newDateParts.YYYY}-${newDateParts.MM}-${newDateParts.DD}`);
+        if (newDate.isValid()) {
+            onSelectDate(newDate.toDate()); // Call onSelectDate with the new date
+        }
+    };
+
+    const handleArrowNavigation = (key, currentPart) => {
+        const currentIndex = formatParts.indexOf(currentPart);
+        let targetInput;
+
+        if (key == "ArrowLeft" && currentIndex > 0) {
+            targetInput = inputRefs.current[formatParts[currentIndex - 1]].current;
+        } else if (key == "ArrowRight" && currentIndex < formatParts.length - 1) {
+            targetInput = inputRefs.current[formatParts[currentIndex + 1]].current;
+        }
+
+        if (targetInput) {
+            targetInput.focus();
+        }
+    };
+
+    const handleKeyDown = (event, currentPart) => {};
+
+    const handleFocus = (event, part) => {
+        event.target.select();
+        registerKeybindings(event, part);
+    };
+
+    const registerKeybindings = (event: any, part: string) => {
+        if (keybindsRegistered.get() == true) {
+            return;
+        }
+        mobx.action(() => {
+            keybindsRegistered.set(true);
+        })();
+        let keybindManager = GlobalModel.keybindManager;
+        let domain = "datepicker-" + curUuid + "-" + part;
+        keybindManager.registerKeybinding("control", domain, "generic:selectLeft", (waveEvent) => {
+            handleArrowNavigation("ArrowLeft", part);
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:selectRight", (waveEvent) => {
+            handleArrowNavigation("ArrowRight", part);
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:space", (waveEvent) => {
+            toggleModal();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
+            toggleModal();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
+            closeModal();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:tab", (waveEvent) => {
+            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);
+
+                    // 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) => {
+        unregisterKeybindings(part);
+    };
+
+    const unregisterKeybindings = (part) => {
+        mobx.action(() => {
+            keybindsRegistered.set(false);
+        })();
+        let domain = "datepicker-" + curUuid + "-" + part;
+        GlobalModel.keybindManager.unregisterDomain(domain);
+    };
+
+    // Prevent use from selecting text in the input
+    const handleMouseDown = (event, part) => {
+        event.preventDefault();
+
+        handleFocus(event, part);
+    };
+
+    const handleIconKeyDown = (event) => {
+        if (event.key === "Enter") {
+            toggleModal();
+        }
+    };
+
+    const setInputWidth = (inputRef, value) => {
+        const span = document.createElement("span");
+        document.body.appendChild(span);
+        span.style.font = "inherit";
+        span.style.visibility = "hidden";
+        span.style.position = "absolute";
+        span.textContent = value;
+        const textWidth = span.offsetWidth;
+        document.body.removeChild(span);
+
+        if (inputRef.current) {
+            inputRef.current.style.width = `${textWidth}px`;
+        }
+    };
+
+    useEffect(() => {
+        // This timeout ensures that the effect runs after the DOM updates
+        const timeoutId = setTimeout(() => {
+            formatParts.forEach((part) => {
+                const inputRef = inputRefs.current[part];
+                if (inputRef && inputRef.current) {
+                    setInputWidth(inputRef, dateParts[part]);
+                }
+            });
+        }, 0);
+
+        return () => clearTimeout(timeoutId); // Cleanup timeout on unmount
+    }, []);
+
+    const renderDatePickerInput = () => {
+        return (
+            <div className="day-picker-input">
+                {formatParts.map((part, index) => {
+                    const inputRef = inputRefs.current[part];
+
+                    return (
+                        <React.Fragment key={part}>
+                            {index > 0 && <span>{delimiter}</span>}
+                            <input
+                                readOnly
+                                ref={inputRef}
+                                type="text"
+                                value={dateParts[part]}
+                                onChange={(e) => handleDatePartChange(part, e.target.value)}
+                                onKeyDown={(e) => handleKeyDown(e, part)}
+                                onMouseDown={(e) => handleMouseDown(e, part)}
+                                onFocus={(e) => handleFocus(e, part)}
+                                onBlur={(e) => handleBlur(e, part)}
+                                maxLength={part === "YYYY" ? 4 : 2}
+                                className="date-input"
+                                placeholder={part}
+                            />
+                        </React.Fragment>
+                    );
+                })}
+                <i
+                    ref={calendarIconRef}
+                    className="fa-sharp fa-regular fa-calendar"
+                    onClick={toggleModal}
+                    onKeyDown={handleIconKeyDown}
+                    tabIndex={0} // Makes the icon focusable
+                    role="button" // Semantic role for accessibility
+                    aria-label="Toggle date picker" // Accessible label for screen readers
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div ref={wrapperRef}>
+            {renderDatePickerInput()}
+            {dayPickerModal}
+        </div>
+    );
+};
+
+export { DatePicker };

src/app/common/elements/dropdown.less

@@ -20,6 +20,7 @@
         transition: all 0.3s;
         color: var(--form-element-label-color);
         line-height: 10px;
+        user-select: none;
 
         &.float {
             font-size: 10px;

src/app/common/elements/dropdown.tsx

@@ -7,6 +7,8 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 import ReactDOM from "react-dom";
+import { v4 as uuidv4 } from "uuid";
+import { GlobalModel } from "@/models";
 
 import "./dropdown.less";
 
@@ -39,6 +41,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     wrapperRef: React.RefObject<HTMLDivElement>;
     menuRef: React.RefObject<HTMLDivElement>;
     timeoutId: any;
+    curUuid: string;
 
     constructor(props: DropdownProps) {
         super(props);
@@ -50,6 +53,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         };
         this.wrapperRef = React.createRef();
         this.menuRef = React.createRef();
+        this.curUuid == uuidv4();
     }
 
     componentDidMount() {
@@ -102,49 +106,76 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     @boundMethod
     handleFocus() {
         this.setState({ isTouched: true });
+        this.registerKeybindings();
+    }
+
+    registerKeybindings() {
+        let keybindManager = GlobalModel.keybindManager;
+        let domain = "dropdown-" + this.curUuid;
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
+            this.handleConfirm();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:space", (waveEvent) => {
+            this.handleConfirm();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
+            this.setState({ isOpen: false });
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
+            const { isOpen } = this.state;
+            const { options } = this.props;
+            if (isOpen) {
+                this.setState((prevState) => ({
+                    highlightedIndex:
+                        prevState.highlightedIndex > 0 ? prevState.highlightedIndex - 1 : options.length - 1,
+                }));
+            }
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:selectBelow", (waveEvent) => {
+            const { isOpen } = this.state;
+            const { options } = this.props;
+            if (isOpen) {
+                this.setState((prevState) => ({
+                    highlightedIndex:
+                        prevState.highlightedIndex < options.length - 1 ? prevState.highlightedIndex + 1 : 0,
+                }));
+            }
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:tab", (waveEvent) => {
+            this.setState({ isOpen: false });
+            return true;
+        });
+    }
+
+    handleConfirm() {
+        const { options } = this.props;
+        const { isOpen, highlightedIndex } = this.state;
+        if (isOpen) {
+            const option = options[highlightedIndex];
+            if (option) {
+                this.handleSelect(option.value, undefined);
+            }
+        } else {
+            this.toggleDropdown();
+        }
+    }
+
+    handleBlur() {
+        this.unregisterKeybindings();
+    }
+
+    unregisterKeybindings() {
+        let domain = "dropdown-" + this.curUuid;
+        GlobalModel.keybindManager.unregisterDomain(domain);
     }
 
     @boundMethod
-    handleKeyDown(event: React.KeyboardEvent) {
-        const { options } = this.props;
-        const { isOpen, highlightedIndex } = this.state;
-
-        switch (event.key) {
-            case "Enter":
-            case " ":
-                if (isOpen) {
-                    const option = options[highlightedIndex];
-                    if (option) {
-                        this.handleSelect(option.value, undefined);
-                    }
-                } else {
-                    this.toggleDropdown();
-                }
-                break;
-            case "Escape":
-                this.setState({ isOpen: false });
-                break;
-            case "ArrowUp":
-                if (isOpen) {
-                    this.setState((prevState) => ({
-                        highlightedIndex:
-                            prevState.highlightedIndex > 0 ? prevState.highlightedIndex - 1 : options.length - 1,
-                    }));
-                }
-                break;
-            case "ArrowDown":
-                if (isOpen) {
-                    this.setState((prevState) => ({
-                        highlightedIndex:
-                            prevState.highlightedIndex < options.length - 1 ? prevState.highlightedIndex + 1 : 0,
-                    }));
-                }
-                break;
-            case "Tab":
-                this.setState({ isOpen: false });
-                break;
-        }
-    }
+    handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
     handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
@@ -228,7 +259,8 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                 tabIndex={0}
                 onKeyDown={this.handleKeyDown}
                 onClick={this.handleClick}
-                onFocus={this.handleFocus}
+                onFocus={this.handleFocus.bind(this)}
+                onBlur={this.handleBlur.bind(this)}
             >
                 {decoration?.startDecoration && <>{decoration.startDecoration}</>}
                 <If condition={label}>

src/app/common/elements/iconbutton.tsx

@@ -1,21 +0,0 @@
-// Copyright 2023, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import * as React from "react";
-import { Button } from "./button";
-class IconButton extends Button {
-    render() {
-        const { children, theme, variant = "solid", ...rest } = this.props;
-        const className = `wave-button icon-button ${theme} ${variant}`;
-
-        return (
-            <button {...rest} className={className}>
-                {children}
-            </button>
-        );
-    }
-}
-
-export default IconButton;
-
-export { IconButton };

src/app/common/elements/index.tsx

@@ -3,7 +3,6 @@ export { Checkbox } from "./checkbox";
 export { CmdStrCode } from "./cmdstrcode";
 export { renderCmdText } from "./cmdtext";
 export { Dropdown } from "./dropdown";
-export { IconButton } from "./iconbutton";
 export { InlineSettingsTextEdit } from "./inlinesettingstextedit";
 export { InputDecoration } from "./inputdecoration";
 export { LinkButton } from "./linkbutton";
@@ -18,3 +17,4 @@ export { TextField } from "./textfield";
 export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
+export { DatePicker } from "./datepicker";

src/app/common/elements/inlinesettingstextedit.tsx

@@ -8,6 +8,8 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
+import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";
 
 import "./inlinesettingstextedit.less";
 
@@ -27,6 +29,11 @@ class InlineSettingsTextEdit extends React.Component<
     tempText: OV<string>;
     shouldFocus: boolean = false;
     inputRef: React.RefObject<any> = React.createRef();
+    curId: string;
+
+    componentDidMount(): void {
+        this.curId = uuidv4();
+    }
 
     componentDidUpdate(): void {
         if (this.shouldFocus) {
@@ -52,6 +59,7 @@ class InlineSettingsTextEdit extends React.Component<
             this.tempText = null;
             this.props.onChange(newText);
         })();
+        this.unregisterKeybindings();
     }
 
     @boundMethod
@@ -60,24 +68,38 @@ class InlineSettingsTextEdit extends React.Component<
             this.isEditing.set(false);
             this.tempText = null;
         })();
+        this.unregisterKeybindings();
     }
 
-    @boundMethod
-    handleKeyDown(e: any): void {
-        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
-        if (checkKeyPressed(waveEvent, "Enter")) {
-            e.preventDefault();
-            e.stopPropagation();
+    handleFocus() {
+        this.registerKeybindings();
+    }
+
+    registerKeybindings() {
+        let keybindManager = GlobalModel.keybindManager;
+        let domain = "inline-settings" + this.curId;
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
             this.confirmChange();
-            return;
-        }
-        if (checkKeyPressed(waveEvent, "Escape")) {
-            e.preventDefault();
-            e.stopPropagation();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
             this.cancelChange();
-            return;
-        }
-        return;
+            return true;
+        });
+    }
+
+    unregisterKeybindings() {
+        let domain = "inline-settings" + this.curId;
+        GlobalModel.keybindManager.unregisterDomain(domain);
+    }
+
+    handleBlur() {
+        this.unregisterKeybindings();
+        this.cancelChange();
+    }
+
+    componentWillUnmount(): void {
+        this.unregisterKeybindings();
     }
 
     @boundMethod
@@ -99,7 +121,8 @@ class InlineSettingsTextEdit extends React.Component<
                                 ref={this.inputRef}
                                 className="input"
                                 type="text"
-                                onKeyDown={this.handleKeyDown}
+                                onFocus={this.handleFocus.bind(this)}
+                                onBlur={this.handleBlur.bind(this)}
                                 placeholder={this.props.placeholder}
                                 onChange={this.handleChangeText}
                                 value={this.tempText.get()}

src/app/common/elements/mainview.less

@@ -9,6 +9,10 @@
         display: none;
     }
 
+    .header-container {
+        border-bottom: 1px solid var(--app-border-color);
+    }
+
     .header {
         -webkit-app-region: drag;
         display: flex;
@@ -18,7 +22,7 @@
         vertical-align: middle;
         padding: 0 10px 0 10px;
         margin: 0;
-        border-bottom: 1px solid var(--app-border-color);
+        user-select: none;
 
         .title {
             font-size: var(--title-font-size);
@@ -42,10 +46,10 @@
 
 // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case.
 // More margin is given on macOS to account for the traffic light buttons
-#main.platform-darwin.sidebar-collapsed .header {
-    margin-left: var(--floating-logo-width-darwin);
+#main.platform-darwin.mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width-darwin);
 }
 
-#main:not(.platform-darwin).sidebar-collapsed .header {
-    margin-left: var(--floating-logo-width);
+#main:not(.platform-darwin).mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width);
 }