Updates to xterm

frontend/src/css/layout.css

@@ -44,6 +44,7 @@
   border-bottom: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
+  height: var(--tab-bar-height);
   min-height: var(--tab-bar-height);
   overflow: hidden;
 }

frontend/src/css/leviathan.css

@@ -686,6 +686,14 @@
   background: var(--bg-input);
 }
 
+.leviathan-byte.is-editing {
+  border-color: var(--warning);
+}
+
+.leviathan-byte.is-saving {
+  color: var(--accent);
+}
+
 .leviathan-byte.is-search-hit {
   border-color: var(--warning);
   color: var(--text-inverse);

frontend/src/css/lib/xterm.css

@@ -112,10 +112,6 @@
     top: 0;
 }
 
-.xterm .xterm-scroll-area {
-    visibility: hidden;
-}
-
 .xterm-char-measure-element {
     display: inline-block;
     visibility: hidden;
@@ -140,7 +136,7 @@
     cursor: crosshair;
 }
 
-.xterm .xterm-accessibility,
+.xterm .xterm-accessibility:not(.debug),
 .xterm .xterm-message {
     position: absolute;
     left: 0;
@@ -152,6 +148,21 @@
     pointer-events: none;
 }
 
+.xterm .xterm-accessibility-tree:not(.debug) *::selection {
+  color: transparent;
+}
+
+.xterm .xterm-accessibility-tree {
+  font-family: monospace;
+  user-select: text;
+  white-space: pre;
+}
+
+.xterm .xterm-accessibility-tree > div {
+  transform-origin: left;
+  width: fit-content;
+}
+
 .xterm .live-region {
     position: absolute;
     left: -9999px;
@@ -207,3 +218,68 @@
     z-index: 2;
     position: relative;
 }
+
+
+
+/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */
+
+/* xterm.js customization: Override xterm's cursor style */
+.xterm .xterm-scrollable-element > .scrollbar {
+    cursor: default;
+}
+
+/* Arrows */
+.xterm .xterm-scrollable-element > .scrollbar > .scra {
+	cursor: pointer;
+	font-size: 11px !important;
+}
+
+.xterm .xterm-scrollable-element > .visible {
+	opacity: 1;
+
+	/* Background rule added for IE9 - to allow clicks on dom node */
+	background:rgba(0,0,0,0);
+
+	transition: opacity 100ms linear;
+	/* In front of peek view */
+	z-index: 11;
+}
+.xterm .xterm-scrollable-element > .invisible {
+	opacity: 0;
+	pointer-events: none;
+}
+.xterm .xterm-scrollable-element > .invisible.fade {
+	transition: opacity 800ms linear;
+}
+
+/* Scrollable Content Inset Shadow */
+.xterm .xterm-scrollable-element > .shadow {
+	position: absolute;
+	display: none;
+}
+.xterm .xterm-scrollable-element > .shadow.top {
+	display: block;
+	top: 0;
+	left: 3px;
+	height: 3px;
+	width: 100%;
+	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
+}
+.xterm .xterm-scrollable-element > .shadow.left {
+	display: block;
+	top: 3px;
+	left: 0;
+	height: 100%;
+	width: 3px;
+	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
+}
+.xterm .xterm-scrollable-element > .shadow.top-left-corner {
+	display: block;
+	top: 0;
+	left: 0;
+	height: 3px;
+	width: 3px;
+}
+.xterm .xterm-scrollable-element > .shadow.top.left {
+	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
+}

frontend/src/css/sidebar.css

@@ -10,6 +10,7 @@
   display: flex;
   align-items: center;
   padding: var(--space-3) var(--space-4);
+  height: var(--tab-bar-height);
   min-height: var(--tab-bar-height);
   border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;

frontend/src/css/tokens.css

@@ -139,7 +139,7 @@
        ----------------------------------------------------------------------- */
   --sidebar-width: 260px;
   --sidebar-width-collapsed: 48px;
-  --tab-bar-height: 36px;
+  --tab-bar-height: 44px;
   --toolbar-height: 40px;
   --status-bar-height: 24px;
 }