scrolling info box

src/main.tsx

@@ -276,7 +276,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
         return (
             <div className={cn("line", "line-cmd", {"focus": isFocused})} id={"line-" + getLineId(line)} ref={this.lineRef} style={{position: "relative"}} data-lineid={line.lineid} data-windowid={line.windowid} data-cmdid={line.cmdid}>
                 <div className="line-header">
-                    <div className={cn("avatar",{"num4": cmdRefNumStr.length == 4}, {"num5": cmdRefNumStr.length >= 5}, "status-" + status)} onClick={this.doRefresh}>
+                    <div className={cn("avatar",{"num4": cmdRefNumStr.length == 4}, {"num5": cmdRefNumStr.length >= 5}, "status-" + status, {"ephemeral": line.ephemeral})} onClick={this.doRefresh}>
                         {cmdRefNumStr}
                         <If condition={status == "hangup" || status == "error"}>
                             <i className="fa fa-exclamation-triangle status-icon"/>
@@ -472,6 +472,7 @@ class CmdInput extends React.Component<{}, {}> {
         let istr : string = null;
         let istrIdx : number = 0;
         let line : string = null;
+        let idx : number = 0;
         return (
             <div className={cn("box cmd-input has-background-black", {"has-info": infoShow})}>
                 <div className="cmd-input-info" style={{display: (infoShow ? "block" : "none")}}>
@@ -487,8 +488,8 @@ class CmdInput extends React.Component<{}, {}> {
                     </If>
                     <If condition={infoMsg && infoMsg.infolines != null}>
                         <div className="info-lines">
-                            <For each="line" of={infoMsg.infolines}>
-                                <div>{line}</div>
+                            <For index="idx" each="line" of={infoMsg.infolines}>
+                                <div key={idx}>{line}</div>
                             </For>
                         </div>
                     </If>

src/sh2.less

@@ -399,6 +399,11 @@ html, body, #main {
             background-color: #555;
         }
 
+        &.ephemeral {
+            opacity: 0.5;
+            outline: 1px solid white;
+        }
+
         &.status-error {
             .status-icon {
                 color: #cc0000;
@@ -467,13 +472,15 @@ body .xterm .xterm-viewport {
     overflow-y: auto;
 }
 
-.xterm-viewport::-webkit-scrollbar {
+.cmd-input-info, .xterm-viewport {
+    &::-webkit-scrollbar {
         background-color: #777;
         width: 5px;
-}
+    }
 
-.xterm-viewport::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb {
         background: white;
+    }
 }
 
 .line.line-invalid {
@@ -491,6 +498,10 @@ body .xterm .xterm-viewport {
     padding-top: 10px;
     padding-right: 0px;
     flex-grow: 1;
+
+    .line:first-child {
+        padding-top: 1px;
+    }
 }
 
 .cmd-input {
@@ -499,6 +510,9 @@ body .xterm .xterm-viewport {
     border-right: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     border-bottom-right-radius: 10px;
+    max-height: max(300px, 40%);
+    display: flex;
+    flex-direction: column;
 
     &.has-info {
         padding-top: 5px;
@@ -535,6 +549,9 @@ body .xterm .xterm-viewport {
     }
 
     .cmd-input-info {
+        flex-shrink: 1;
+        overflow-y: auto;
+        
         .info-msg {
             font-family: 'JetBrains Mono', monospace;
             font-weight: 400;

src/types.ts

@@ -23,6 +23,7 @@ type LineType = {
     linetype : string,
     text : string,
     cmdid : string,
+    ephemeral? : boolean,
     remove? : boolean,
 };