@electerm/electerm-react 5.5.56 → 5.5.76

package/client/components/terminal/shortcut-bar-press.js

@@ -0,0 +1,192 @@
+/**
+ * press-and-hold auto-repeat for the touch shortcut bar.
+ *
+ * Why: the bar's buttons sent their key from `click` alone, so a touch user
+ * had to tap over and over for anything that repeats — holding Bksp to erase
+ * a word, holding ↓ to walk back through the scrollback. A physical key
+ * repeats while it is held, so the bar does the same: press, wait out the
+ * initial delay, then send the key at a steady interval until the finger (or
+ * mouse button) lifts.
+ *
+ * Deliberately free of React and of the DOM — shortcut-bar.jsx owns the
+ * wiring, this owns the timing, so the timing can be unit-tested on its own
+ * (src/test/unit-ci/shortcut-bar-press.spec.js).
+ *
+ * Two movement tolerances, because the two phases want opposite things:
+ *   - before the repeat begins, ANY movement means the finger is scrolling
+ *     the bar rather than pressing a key, so a tight tolerance cancels —
+ *     a press that slides off must never send a repeat;
+ *   - once the key is repeating, a held finger always drifts a little, so it
+ *     has to travel much further before it counts as a scroll. With one
+ *     tolerance, holding Bksp for two seconds would either stop halfway (too
+ *     tight) or keep erasing while the bar slides sideways (too loose).
+ *
+ * Only one press is ever in flight. A second pointerdown takes over (a second
+ * finger on another key is a deliberate change of target, and two repeating
+ * keys at once helps nobody), and any event from a different pointerId is
+ * ignored, so a stray move from a finger already lifted cannot stop or
+ * corrupt the live repeat.
+ *
+ * `up()` / `cancel()` report whether the gesture had become a long press, and
+ * both report the same value — a release can be caught by the component's own
+ * handler or by the window-level safety net (the pointer may be released
+ * anywhere, even outside the window), so the answer must not depend on which
+ * one runs first. The caller uses it to swallow the `click` the browser
+ * synthesizes after a long press, which would otherwise send one extra key.
+ */
+
+export const longPressDelay = 400
+
+// ~16 sends/sec once repeating: fast enough to clear a long line or scroll
+// back through history, slow enough that the remote end can keep up.
+export const repeatInterval = 60
+
+// pre-repeat: a press that moves this much is a scroll, not a tap
+export const moveTolerance = 10
+
+// while repeating: how far a held finger may drift before it is a scroll
+export const repeatMoveTolerance = 32
+
+export function createKeyRepeat (opts = {}) {
+  const {
+    send = () => {},
+    onRepeatChange = () => {},
+    delay = longPressDelay,
+    interval = repeatInterval,
+    tolerance = moveTolerance,
+    repeatTolerance = repeatMoveTolerance
+  } = opts
+
+  let holdTimer = null
+  let tickTimer = null
+  let payload = null
+  let startX = 0
+  let startY = 0
+  let pointerId = null
+  let inFlight = false
+  let repeating = false
+  // sticky for the whole gesture: set when the long press begins, cleared only
+  // by the next press, so it survives any release path
+  let longFired = false
+
+  function stopTimers () {
+    if (holdTimer) {
+      clearTimeout(holdTimer)
+      holdTimer = null
+    }
+    if (tickTimer) {
+      clearInterval(tickTimer)
+      tickTimer = null
+    }
+  }
+
+  function setRepeating (on) {
+    if (repeating === on) {
+      return
+    }
+    repeating = on
+    onRepeatChange(on ? payload : null)
+  }
+
+  // leave the gesture, keeping `longFired` for the caller's click decision
+  function release () {
+    stopTimers()
+    if (inFlight) {
+      setRepeating(false)
+    }
+    inFlight = false
+    payload = null
+    pointerId = null
+    return longFired
+  }
+
+  function beginRepeat () {
+    holdTimer = null
+    longFired = true
+    setRepeating(true)
+    // send the first repeat immediately: holding a key should not wait out
+    // the delay twice
+    send(payload)
+    tickTimer = setInterval(() => send(payload), interval)
+  }
+
+  // an event only counts while it belongs to the press in flight. Events
+  // synthesized in tests (or by a browser that omits pointerId) always match.
+  function owns (ev) {
+    return inFlight &&
+      (pointerId === null || !ev || ev.pointerId == null || ev.pointerId === pointerId)
+  }
+
+  return {
+    get repeating () {
+      return repeating
+    },
+
+    get longFired () {
+      return longFired
+    },
+
+    /**
+     * A press starts. `p` is whatever should be handed back to `send` — the
+     * bar passes the whole button so it can also read the id for its visual
+     * state. A second press cancels the first.
+     */
+    down (p, ev) {
+      release()
+      payload = p
+      pointerId = ev && ev.pointerId != null ? ev.pointerId : null
+      startX = ev ? ev.clientX || 0 : 0
+      startY = ev ? ev.clientY || 0 : 0
+      longFired = false
+      inFlight = true
+      holdTimer = setTimeout(beginRepeat, delay)
+    },
+
+    move (ev) {
+      if (!owns(ev)) {
+        return
+      }
+      const x = ev ? ev.clientX || 0 : 0
+      const y = ev ? ev.clientY || 0 : 0
+      const dx = x - startX
+      const dy = y - startY
+      const moved = Math.sqrt(dx * dx + dy * dy)
+      if (repeating) {
+        if (moved > repeatTolerance) {
+          release()
+        }
+      } else if (moved > tolerance) {
+        // the press turned into a scroll of the bar: drop it before it can
+        // fire, and let the scroll happen
+        release()
+      }
+    },
+
+    /** the pointer lifted. Returns true if this gesture was a long press. */
+    up (ev) {
+      if (!owns(ev)) {
+        return false
+      }
+      return release()
+    },
+
+    /**
+     * The gesture was aborted (pointercancel, a second finger, the bar being
+     * hidden, unmount). Never sends anything, so a scroll that turns into a
+     * cancel cannot leak a key.
+     */
+    cancel (ev) {
+      if (ev && !owns(ev)) {
+        return false
+      }
+      const wasLong = inFlight ? longFired : false
+      release()
+      return wasLong
+    },
+
+    dispose () {
+      release()
+      longFired = false
+    }
+  }
+}

package/client/components/terminal/shortcut-bar.jsx

@@ -10,6 +10,10 @@
  *   - first (fixed) button collapses the bar
  *   - second (fixed) button opens the edit modal (shortcut-bar-edit.jsx)
  *   - tapping a shortcut sends it to the active terminal via runQuickCommand
+ *   - pressing AND holding one repeats it, like a physical key: a tap has to
+ *     send exactly one key, but holding Bksp to erase a word or ↓ to walk
+ *     back through the scrollback is impossible without auto-repeat. The
+ *     timing lives in shortcut-bar-press.js
  *   - while the system input panel overlays the page without resizing the
  *     layout viewport (iOS / HarmonyOS do this, Android resizes instead), the
  *     bar lifts itself above the panel — see the visualViewport effect below
@@ -27,6 +31,7 @@ import { shortcutBarHeight } from '../../common/constants'
 import ShortcutBarEdit from './shortcut-bar-edit'
 import { KEYBOARD_MIN } from './shortcut-bar-entry'
 import { candidates, loadActive, saveActive, ESC } from './shortcut-bar-defs'
+import { createKeyRepeat } from './shortcut-bar-press'
 import './shortcut-bar.styl'
 
 const e = window.translate
@@ -47,15 +52,57 @@ const appCursorMap = {
   [ESC + '[F']: ESC + 'OF' // End
 }
 
-function sendToTerminal (data) {
+function activeTerm () {
   const { store } = window
-  const term = refs.get('term-' + store.activeTabId)
+  return refs.get('term-' + store.activeTabId)
+}
+
+function sendToTerminal (data) {
+  const term = activeTerm()
   if (term && typeof term.runQuickCommand === 'function') {
     const resolved = resolveCursorMode(data, term)
     term.runQuickCommand(resolved, true)
   }
 }
 
+// Put focus back on the terminal's helper textarea, which is the element that
+// owns the soft keyboard.
+//
+// A press on a bar button focuses that button instead, and the OS then
+// dismisses the input panel — which also drops the bar, since it rides above
+// the panel, so the hold visibly breaks.
+//
+// Preventing the default on mousedown covers the mouse path, but Chromium only
+// synthesizes those compatibility mouse events after touchend, so on touch the
+// theft happens after any reclaim made during pointerdown. Hence this is also
+// driven from the focusin listener in the effect below, which is timing
+// independent. Called from pointerdown it still helps: it puts focus back
+// before the platform has any chance to act on the button.
+//
+// The call is synchronous inside the user gesture, which is what a
+// keyboard-showing focus() requires, and it is idempotent.
+let reclaiming = false
+
+function reclaimTerminalFocus () {
+  // focus() re-raises focusin, so guard against recursing: a press that
+  // repeatedly reclaims would otherwise spin.
+  if (reclaiming) {
+    return
+  }
+  const term = activeTerm()
+  if (!term || !term.term || typeof term.term.focus !== 'function') {
+    return
+  }
+  reclaiming = true
+  try {
+    term.term.focus()
+  } finally {
+    // released synchronously, once the focus() call has returned — the
+    // focusin it triggers has already been dispatched by then
+    reclaiming = false
+  }
+}
+
 // honor the active terminal's DECCKM state for the cursor / Home / End keys.
 // custom combos can be multi-key sequences (Ctrl+A then ↑), so match the
 // trailing key too — not only the whole payload.
@@ -177,13 +224,142 @@ function ShortcutBar (props) {
     saveActive(next)
   }
 
+  // ---- press-and-hold auto-repeat ----
+  // A tap is a plain click, so it stays one key. On top of that, a press that
+  // is held repeats its key (see shortcut-bar-press.js) — the only way to hold
+  // Bksp or an arrow key without a physical keyboard.
+  const repeatRef = useRef(null)
+  // id of the button currently repeating, so only it shows the pressed state
+  const [repeatingId, setRepeatingId] = useState(null)
+  // a long press has already sent its key(s); the click the browser fires on
+  // release must not add one more. Set by the repeat, cleared once consumed.
+  const swallowClickRef = useRef(false)
+
+  if (!repeatRef.current) {
+    repeatRef.current = createKeyRepeat({
+      send: b => {
+        if (b) {
+          sendToTerminal(b.data)
+        }
+      },
+      onRepeatChange: b => setRepeatingId(b ? b.id : null)
+    })
+  }
+
+  // The gesture can end anywhere — the finger can slide off the bar, lift
+  // outside the window, or the system can steal it (a callout, an incoming
+  // call). A window-level release is the only net that catches all of those;
+  // the per-button handler below is what keeps the common case responsive.
+  useEffect(() => {
+    function onGlobalRelease (ev) {
+      if (repeatRef.current.up(ev)) {
+        swallowClickRef.current = true
+      }
+    }
+    function onGlobalCancel (ev) {
+      // a cancelled gesture is not a long press: nothing was sent that the
+      // user needs to "not double", so no click has to be swallowed
+      repeatRef.current.cancel(ev)
+    }
+    // Catch-all for focus theft, and the reliable half of the fix.
+    //
+    // Reclaiming focus at pointerdown is too early to be trustworthy: Chromium
+    // only synthesizes the compatibility mouse events (mousedown/mouseup/click)
+    // AFTER touchend, so on the touch path the button takes focus *after* the
+    // press has already reclaimed it. Timing the reclaim per-event cannot cover
+    // that; reacting to focus itself can, and it covers every path — mouse,
+    // touch, the compatibility mousedown, and the context-menu focus grab.
+    //
+    // focusin rather than focus: it bubbles, so one listener on the window sees
+    // the bar's buttons from outside the portal.
+    //
+    // The guard is what keeps this from looping: only focus landing inside this
+    // bar is reclaimed, and not when it is the reclaim's own doing.
+    function onFocusIn (ev) {
+      const el = ev.target
+      if (!el || !el.closest || !el.closest('.shortcut-bar')) {
+        return
+      }
+      if (reclaiming) {
+        return
+      }
+      reclaimTerminalFocus()
+    }
+    window.addEventListener('pointerup', onGlobalRelease)
+    window.addEventListener('pointercancel', onGlobalCancel)
+    window.addEventListener('focusin', onFocusIn)
+    return () => {
+      window.removeEventListener('pointerup', onGlobalRelease)
+      window.removeEventListener('pointercancel', onGlobalCancel)
+      window.removeEventListener('focusin', onFocusIn)
+      // unmount (or the bar going away) must not leave a timer running
+      repeatRef.current.dispose()
+    }
+  }, [])
+
+  // the bar hiding mid-hold is a cancel, not a release: the keys already sent
+  // stand, and no stale click may be swallowed by the next one
+  useEffect(() => {
+    if (!store.shortcutBarVisible) {
+      repeatRef.current.cancel()
+      swallowClickRef.current = false
+    }
+  }, [store.shortcutBarVisible])
+
+  function handleClick (b) {
+    if (swallowClickRef.current) {
+      swallowClickRef.current = false
+      return
+    }
+    sendToTerminal(b.data)
+  }
+
+  function handlePointerDown (ev, b) {
+    // a right / middle click is not a key press
+    if (ev.button != null && ev.button > 0) {
+      return
+    }
+    // The flag only has to survive from the release to the click the browser
+    // synthesizes right after it. A release that lands OFF the button
+    // synthesizes no click at all, so without this the flag would still be
+    // armed on the next press and eat a legitimate key. Any new press starts
+    // strictly after the previous click, so clearing here is safe.
+    swallowClickRef.current = false
+    // Only a mouse: capturing a touch pointer makes the browser scroll the
+    // button row no more, and dragging the row by a button is exactly how the
+    // bar is scrolled. Touch instead relies on pointercancel (fired when the
+    // browser takes over for a scroll) plus the move tolerance below.
+    if (ev.pointerType === 'mouse') {
+      try {
+        ev.currentTarget.setPointerCapture(ev.pointerId)
+      } catch (e) {
+        // capture is an optimisation for cancel-on-slide-off; without it the
+        // hold still stops on pointerup, just via the window-level net
+      }
+    }
+    // before anything can steal it — see reclaimTerminalFocus()
+    reclaimTerminalFocus()
+    repeatRef.current.down(b, ev)
+  }
+
+  function handlePointerUp (ev) {
+    if (repeatRef.current.up(ev)) {
+      swallowClickRef.current = true
+    }
+  }
+
   function renderButton (b, i) {
     return (
       <button
         type='button'
         key={b.id + '-' + i}
-        className='shortcut-bar-btn'
-        onClick={() => sendToTerminal(b.data)}
+        className={
+          'shortcut-bar-btn' + (repeatingId === b.id ? ' repeating' : '')
+        }
+        onPointerDown={ev => handlePointerDown(ev, b)}
+        onPointerMove={ev => repeatRef.current.move(ev)}
+        onPointerUp={handlePointerUp}
+        onClick={() => handleClick(b)}
       >
         {b.label}
       </button>
@@ -199,6 +375,25 @@ function ShortcutBar (props) {
       className='shortcut-bar'
       role='toolbar'
       style={kbOffset ? { bottom: kbOffset + 'px' } : undefined}
+      // Keep the press from moving DOM focus in the first place.
+      //
+      // A button is focusable, and on a real press the browser focuses it
+      // (measured: focus lands on .shortcut-bar-btn, not on the terminal's
+      // helper textarea). That helper textarea is what owns the soft keyboard,
+      // so on Android Chrome focus moving to a non-editable element makes the
+      // OS dismiss the input panel — and the bar, which rides above the
+      // panel, drops with it, so the hold visibly breaks.
+      //
+      // This is the preventive half (it still delivers the click, also
+      // measured) and it covers the mouse path plus the compatibility mousedown
+      // on the container, so the two icon buttons get it too. It cannot cover
+      // the touch path on its own — those compatibility events are synthesized
+      // after touchend — which is why the focusin listener above exists as the
+      // reliable half.
+      //
+      // pointerdown is deliberately NOT prevented: that would stop the browser
+      // scrolling the button row.
+      onMouseDown={e => e.preventDefault()}
     >
       <div className='shortcut-bar-fixed'>
         <button

package/client/components/terminal/shortcut-bar.styl

@@ -17,6 +17,41 @@
   user-select none
   -webkit-user-select none
 
+// A held button now means "keep sending this key", so the platform must not
+// treat the hold as its own gesture:
+//   - the iOS callout (Copy/Look Up) and Android's text-selection handles
+//     would swallow it — same reason .term-wrap suppresses them;
+//   - touch-action keeps the hold from turning into a scroll of the page; the
+//     bar's own horizontal scroll lives on .shortcut-bar-scroll, which is a
+//     separate element, so this only affects the button itself.
+.shortcut-bar-btn
+  -webkit-touch-callout none
+  touch-action manipulation
+  flex-shrink 0
+  height 32px
+  min-width 32px
+  padding 0 10px
+  display inline-flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  border 1px solid var(--main-lighter)
+  background var(--main-light)
+  color var(--text)
+  font-size 13px
+  cursor pointer
+  white-space nowrap
+  &:active
+    background var(--primary)
+    color var(--primary-contrast)
+  &:hover
+    color var(--text-light)
+  // held down and repeating: keep the :active look for as long as the key is
+  // being re-sent, so the user can see the auto-repeat is running
+  &.repeating
+    background var(--primary)
+    color var(--primary-contrast)
+
 .shortcut-bar-fixed
   display flex
   align-items stretch
@@ -33,6 +68,8 @@
   color var(--text)
   cursor pointer
   font-size 16px
+  -webkit-touch-callout none
+  touch-action manipulation
   &:active
     background var(--main-lighter)
   &:hover
@@ -48,30 +85,12 @@
   overflow-y hidden
   scrollbar-width none
   -webkit-overflow-scrolling touch
+  // a press that turns into a drag is a scroll of the button row, which is
+  // exactly what this container does — the hold itself is handled in JS
+  touch-action pan-x
   &::-webkit-scrollbar
     display none
 
-.shortcut-bar-btn
-  flex-shrink 0
-  height 32px
-  min-width 32px
-  padding 0 10px
-  display inline-flex
-  align-items center
-  justify-content center
-  border-radius 6px
-  border 1px solid var(--main-lighter)
-  background var(--main-light)
-  color var(--text)
-  font-size 13px
-  cursor pointer
-  white-space nowrap
-  &:active
-    background var(--primary)
-    color var(--primary-contrast)
-  &:hover
-    color var(--text-light)
-
 // while the bar is visible, lift the footer + reserve space so nothing is
 // covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible;
 // --shortcut-bar-kb-offset raises both bar + footer above a page-overlaying

package/client/components/terminal/ssh-reload-state.js

@@ -46,17 +46,56 @@ export function createRestoreCwdCommand (cwd) {
   return safeCwd ? `cd -- ${quotePosixShellArg(safeCwd)}` : ''
 }
 
-export function createWindowsRestoreCwdCommand (cwd) {
+// The shell setting is hand-entered config, so tolerate a quoted or padded
+// executable path before deciding which shell we are looking at.
+export function isPowerShellExecutable (shell = '') {
+  const shellPath = String(shell || '').trim().replace(/^"|"$/g, '')
+  return /(?:^|[/\\])(?:powershell|pwsh)(?:\.exe)?$/i.test(shellPath)
+}
+
+export function createWindowsRestoreCwdCommand (cwd, shell = '') {
   const safeCwd = sanitizeSshCwd(cwd)
   if (!safeCwd) {
     return ''
   }
+  if (isPowerShellExecutable(shell)) {
+    // -LiteralPath keeps `[`, `]` and `*` in a directory name from being read
+    // as a wildcard; '' is PowerShell's escape for a literal single quote.
+    return `Set-Location -LiteralPath '${safeCwd.replace(/'/g, "''")}'`
+  }
   // Strip control chars already handled by sanitize; escape embedded double
-  // quotes for cmd/powershell (`""` is accepted by both as a literal quote).
+  // quotes for CMD.
   const escaped = safeCwd.replace(/"/g, '""')
   return `cd /d "${escaped}"`
 }
 
+/**
+ * The `cd <dir>` command for a terminal session, used when the user sends a
+ * directory from the file panel to the terminal.
+ *
+ * A local session knows which shell it spawned, so it can emit syntax that
+ * shell actually understands (PowerShell rejects CMD's `cd /d`). A remote tab
+ * cannot: the far side's shell is unknown from here, so it keeps the CMD form.
+ * Every branch quotes the path with the target shell's own rules - a directory
+ * name is attacker-influenced (it can come out of an unpacked archive), so a
+ * bare `cd "..."` would let `$(...)` and backticks run.
+ *
+ * Returns '' when the path is unusable. Callers must not fall back to
+ * interpolating the raw path into a command.
+ */
+export function createCdCommand (dir, { remote = false, shell = '' } = {}) {
+  const safeDir = sanitizeSshCwd(dir)
+  if (!safeDir) {
+    return ''
+  }
+  if (!/^[a-zA-Z]:\\/.test(safeDir)) {
+    return `cd ${quotePosixShellArg(safeDir)}`
+  }
+  return remote
+    ? `cd /d "${safeDir.replace(/"/g, '""')}"`
+    : createWindowsRestoreCwdCommand(safeDir, shell)
+}
+
 export function shouldCaptureTerminalReloadState (tab, config = {}) {
   return !!config.restoreTerminalSessionOnReload && isRestorableTerminalTab(tab)
 }

package/client/components/terminal/startup-queue.js

@@ -141,7 +141,7 @@ export class StartupQueue {
 
   // ---- queue ----
 
-  runInitScript = () => {
+  runInitScript = (localShell) => {
     const { term } = this
     window.store.triggerResize()
     const {
@@ -156,9 +156,13 @@ export class StartupQueue {
     const startFolder = reloadCwd || startDirectory || window.initFolder
     let cwdCommand = ''
     if (startFolder) {
+      // No `|| cd "<raw>"` fallback: these helpers return '' for a path they
+      // refuse (control characters, over-long), and interpolating the raw value
+      // instead would hand `startDirectory` - which a quick-connect link can
+      // set - straight to the shell as a command.
       cwdCommand = this.isPosixShell()
         ? createRestoreCwdCommand(startFolder)
-        : createWindowsRestoreCwdCommand(startFolder) || `cd "${startFolder}"`
+        : createWindowsRestoreCwdCommand(startFolder, localShell || term.props.config.execWindows)
     }
     if (cwdCommand) {
       scripts.unshift({ script: cwdCommand, delay: 0 })

package/client/components/terminal/terminal.jsx

@@ -19,7 +19,7 @@ import NormalBuffer from './normal-buffer.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
-import ReconnectOverlay from './reconnect-overlay.jsx'
+import SessionStatusOverlay from './session-status-overlay.jsx'
 import TerminalErrorHandle from './terminal-error-handle.jsx'
 import DropFileModal from './drop-file-modal.jsx'
 import TerminalSelectText from './terminal-select-text.jsx'
@@ -77,6 +77,12 @@ class Term extends Component {
       matchIndex: -1,
       totalLines: 0,
       reconnectCountdown: null,
+      // True once this pane has no live session (socket closed, or the session
+      // failed to start). Not derivable from tab.status: store.updateTab mutates
+      // the tab in place, and nothing in this component's ancestor chain reads
+      // tab.status during render, so a status change does not re-render the
+      // pane. Setting it here is also what triggers that render.
+      sessionStopped: false,
       terminalError: null,
       dropFileModalVisible: false,
       droppedFiles: [],
@@ -103,6 +109,10 @@ class Term extends Component {
       name: 'rightClickSelectsWord',
       type: 'glob'
     },
+    {
+      name: 'mouseEventsRequireAlt',
+      type: 'glob'
+    },
     {
       name: 'fontSize',
       type: 'glob_local'
@@ -425,8 +435,13 @@ class Term extends Component {
             showEditBookmarkButton={this.state.terminalError?.from === 'bookmarks' && !!this.state.terminalError?.srcId}
             onEditBookmark={this.handleEditBookmarkFromError}
           />
-          <ReconnectOverlay
+          <SessionStatusOverlay
+            // A failed start already has the error alert as its message; the
+            // notice would just stack on top of it.
+            stopped={this.state.sessionStopped && !this.state.terminalError}
             countdown={this.state.reconnectCountdown}
+            reloadShortcut={this.getShortcut('app_reloadCurrentTab')}
+            closeShortcut={this.getShortcut('app_closeCurrentTab')}
           />
           {this.renderResetFontSizeButton()}
           <DropFileModal

package/client/components/terminal/terminal.styl

@@ -222,12 +222,21 @@
   max-height 200px
   overflow-y scroll
 
-.terminal-reconnect-overlay
+.terminal-session-stopped
   position absolute
-  bottom 6px
-  right 12px
-  font-size 11px
-  color rgba(255, 255, 255, 0.55)
+  left 50%
+  top 50%
+  transform translate(-50%, -50%)
+  padding 8px 14px
+  background var(--main)
+  color var(--text)
+  border 1px solid var(--main-lighter)
+  border-radius 4px
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.35)
+  font-size 12px
+  line-height 1.7
+  white-space nowrap
+  // keyboard-only affordance: never intercept a click meant for the terminal
   pointer-events none
   z-index 110