dsh-ssh-manage 0.2.1 → 0.3.0

package/client.js

@@ -16,6 +16,14 @@ window.__ModuleLoader__.load({
       panel: ['SSH 主机', 'SSH Hosts'],
       'tabs.hosts': ['主机', 'Hosts'],
       'tabs.sessions': ['会话', 'Sessions'],
+      'session.restoring': ['正在恢复终端会话…', 'Restoring terminal sessions…'],
+      'session.tooMany': ['最多同时打开 16 个终端会话，请先关闭一个。', 'At most 16 terminal sessions can be open. Close one first.'],
+      'session.attention': ['有会话已结束或出错', 'A session exited or failed'],
+      'session.state.loading': ['加载中', 'Loading'],
+      'session.state.connecting': ['连接中', 'Connecting'],
+      'session.state.ready': ['运行中', 'Running'],
+      'session.state.closed': ['已结束', 'Exited'],
+      'session.state.error': ['错误', 'Error'],
       'tabs.batch': ['批量命令', 'Batch'],
       'tabs.settings': ['设置', 'Settings'],
       'session.new': ['新建连接', 'New connection'],
@@ -141,6 +149,7 @@ window.__ModuleLoader__.load({
       'editor.required': ['请填写别名和服务器地址。', 'Alias and hostname are required.'],
       'editor.invalidAlias': ['别名只能包含字母、数字、点、下划线、@ 和短横线。', 'Alias may only contain letters, digits, dot, underscore, @ and dash.'],
       'editor.delete': ['删除这台主机', 'Delete this host'],
+      'editor.discardChanges': ['有未保存的修改，确定放弃？', 'Discard unsaved changes?'],
       'drawer.files': ['文件', 'Files'],
       'drawer.details': ['详情', 'Details'],
       'terminal.loading': ['正在加载终端…', 'Loading terminal…'],
@@ -151,6 +160,7 @@ window.__ModuleLoader__.load({
       'terminal.reconnect': ['重新连接', 'Reconnect'],
       'terminal.openDetails': ['打开主机详情', 'Open details'],
       'terminal.assetsError': ['终端组件加载失败：{message}。如果刚更新插件，请重启 DSH 后重试。', 'Could not load the terminal component: {message}. If the plugin was just updated, restart DSH and retry.'],
+      'terminal.resyncFailed': ['终端输出曾中断，已尝试重新同步；如仍异常请重连。', 'Terminal output was interrupted; attempted a resync. Reconnect if problems persist.'],
       'terminal.backendHint': ['无法连接到插件后端。如果刚更新插件，请重启 DSH 后重试。', 'Cannot reach the plugin backend. If the plugin was just updated, restart DSH and retry.'],
       'terminal.passwordMissing': ['该主机还没有保存密码，请先打开「主机详情」设置服务器密码。', 'No password stored for this host. Open Details and set the server password first.'],
       'drawer.exit': ['退出码 {code}', 'exit {code}'],
@@ -1178,8 +1188,15 @@ window.__ModuleLoader__.load({
       const [activeSessionId, setActiveSessionId] = React.useState(() => persistentPanelState.activeSessionId)
       const [treeWidth, setTreeWidth] = React.useState(readTreeWidth)
       const [clearSignals, setClearSignals] = React.useState({})
+      const [sessionStates, setSessionStates] = React.useState({})
       const toastTimer = React.useRef(null)
       const floatingRef = React.useRef(null)
+      const editorCloseGuard = React.useRef(null)
+      const groupsCloseGuard = React.useRef(null)
+
+      const setSessionState = React.useCallback((id, status) => {
+        setSessionStates((prev) => (prev[id] === status ? prev : { ...prev, [id]: status }))
+      }, [])
 
       const notify = React.useCallback((message, tone = 'info') => {
         if (toastTimer.current) clearTimeout(toastTimer.current)
@@ -1309,6 +1326,13 @@ window.__ModuleLoader__.load({
           for (const key of keys) if (ids.has(key)) next[key] = prev[key]
           return next
         })
+        setSessionStates((prev) => {
+          const keys = Object.keys(prev)
+          if (keys.every((key) => ids.has(key))) return prev
+          const next = {}
+          for (const key of keys) if (ids.has(key)) next[key] = prev[key]
+          return next
+        })
       }, [sessions])
 
       // Keep one valid active session, and leave the sessions tab when it becomes empty.
@@ -1375,6 +1399,10 @@ window.__ModuleLoader__.load({
         if (existing) {
           setActiveSessionId(existing.id)
         } else {
+          if (sessions.length >= MAX_TERMINAL_SESSIONS) {
+            notify(t('session.tooMany'), 'error')
+            return
+          }
           const id = newPtySessionId()
           ptyActiveIds.add(id)
           setSessions((prev) => [...prev, { id, hostAlias: host.host }])
@@ -1402,6 +1430,7 @@ window.__ModuleLoader__.load({
       }
 
       function clearSession(id) {
+        clearPtySession(id)
         setClearSignals((prev) => ({ ...prev, [id]: (prev[id] ?? 0) + 1 }))
       }
 
@@ -1584,11 +1613,15 @@ window.__ModuleLoader__.load({
             return
           }
           if (editor) {
-            setEditor(null)
+            const guard = editorCloseGuard.current
+            if (typeof guard === 'function') guard()
+            else setEditor(null)
             return
           }
           if (groupsOpen) {
-            setGroupsOpen(false)
+            const guard = groupsCloseGuard.current
+            if (typeof guard === 'function') guard()
+            else setGroupsOpen(false)
             return
           }
           if (drawer) setDrawer(null)
@@ -1680,10 +1713,14 @@ window.__ModuleLoader__.load({
         setFloating,
         setEditor,
         setDrawer,
+        editorCloseGuard,
+        groupsCloseGuard,
         treeWidth,
         setTreeWidth,
         sessions,
         activeSessionId,
+        sessionStates,
+        setSessionState,
         setActiveSessionId,
         clearSignals,
         openSession,
@@ -1868,9 +1905,15 @@ window.__ModuleLoader__.load({
         ]
       }
 
+      const sessionAttention = sessions.some((session) => {
+        const state = sessionStates[session.id]
+        return state === 'error' || state === 'closed'
+      })
       const tabItems = [
         ['hosts', t('tabs.hosts')],
-        ...(sessions.length > 0 ? [['sessions', t('tabs.sessions')]] : []),
+        ...(sessions.length > 0
+          ? [['sessions', h('span', { className: 'ssh-tabLabel' }, t('tabs.sessions'), sessionAttention ? h('span', { className: 'ssh-tabAlert', title: t('session.attention') }) : null)]]
+          : []),
         ['batch', t('tabs.batch')],
         ['settings', t('tabs.settings')],
       ]
@@ -1934,7 +1977,7 @@ window.__ModuleLoader__.load({
               'div',
               { className: 'ssh-loadingPage' },
               h(Spinner, { size: 22 }),
-              h('span', null, t('state.loading')),
+              h('span', null, sessions.length > 0 ? t('session.restoring') : t('state.loading')),
             )
           : !snapshot && error
             ? h(
@@ -1951,7 +1994,7 @@ window.__ModuleLoader__.load({
                 : effectiveTab === 'batch'
                   ? h(BatchTab, { model })
                   : h(SettingsTab, { model }),
-        sessions.length > 0
+        snapshot && sessions.length > 0
           ? h(
               'div',
               { className: 'ssh-sessionLayer', style: { display: effectiveTab === 'sessions' ? 'flex' : 'none' } },
@@ -2653,6 +2696,7 @@ window.__ModuleLoader__.load({
         t,
         hosts,
         sessions,
+        sessionStates,
         activeSessionId,
         setActiveSessionId,
         setActiveAlias,
@@ -2716,6 +2760,10 @@ window.__ModuleLoader__.load({
                 h('span', {
                   className: cx('ssh-sessionDot', credential ? (credential.key === 'password' ? 'ok' : 'warn') : 'warn'),
                 }),
+                h('span', {
+                  className: cx('ssh-sessionState', sessionStates[session.id] ?? 'loading'),
+                  title: t(`session.state.${sessionStates[session.id] ?? 'loading'}`),
+                }),
                 h('span', { className: 'ssh-sessionTabTitle' }, host ? hostName(host) : session.hostAlias),
                 h(
                   'button',
@@ -3039,13 +3087,91 @@ window.__ModuleLoader__.load({
       }
     }
 
+    const terminalThemeListeners = new Set()
+    let terminalThemeObserver = null
+    let terminalThemeMedia = null
+    let terminalThemeScheduled = false
+
+    function emitTerminalTheme() {
+      for (const listener of [...terminalThemeListeners]) {
+        try { listener() } catch {}
+      }
+    }
+
+    function scheduleTerminalTheme() {
+      if (terminalThemeScheduled) return
+      terminalThemeScheduled = true
+      const run = () => {
+        terminalThemeScheduled = false
+        emitTerminalTheme()
+      }
+      if (typeof requestAnimationFrame === 'function') requestAnimationFrame(run)
+      else setTimeout(run, 16)
+    }
+
+    function ensureTerminalThemeWatcher() {
+      if (typeof MutationObserver !== 'undefined' && !terminalThemeObserver) {
+        terminalThemeObserver = new MutationObserver(scheduleTerminalTheme)
+        const options = {
+          attributes: true,
+          attributeFilter: ['class', 'style', 'data-theme', 'data-color-mode', 'data-ds-dark-theme', 'data-ds-theme-source'],
+        }
+        terminalThemeObserver.observe(document.documentElement, options)
+        if (document.body) terminalThemeObserver.observe(document.body, options)
+      }
+      if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && !terminalThemeMedia) {
+        terminalThemeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+        const onChange = () => scheduleTerminalTheme()
+        if (typeof terminalThemeMedia.addEventListener === 'function') terminalThemeMedia.addEventListener('change', onChange)
+        else if (typeof terminalThemeMedia.addListener === 'function') terminalThemeMedia.addListener(onChange)
+        terminalThemeMedia.__sshThemeChange = onChange
+      }
+    }
+
+    function subscribeTerminalTheme(listener) {
+      terminalThemeListeners.add(listener)
+      ensureTerminalThemeWatcher()
+      return () => {
+        terminalThemeListeners.delete(listener)
+        if (terminalThemeListeners.size > 0) return
+        if (terminalThemeObserver) {
+          terminalThemeObserver.disconnect()
+          terminalThemeObserver = null
+        }
+        if (terminalThemeMedia) {
+          const onChange = terminalThemeMedia.__sshThemeChange
+          if (typeof terminalThemeMedia.removeEventListener === 'function') terminalThemeMedia.removeEventListener('change', onChange)
+          else if (typeof terminalThemeMedia.removeListener === 'function') terminalThemeMedia.removeListener(onChange)
+          terminalThemeMedia = null
+        }
+      }
+    }
+
     const PTY_EVENTS_ROUTE = '/dsh-ssh-manage/pty/events'
     const PTY_ATTACH_ROUTE = '/dsh-ssh-manage/pty/attach'
+    const PTY_CLEAR_ROUTE = '/dsh-ssh-manage/pty/clear'
+    const PTY_TOUCH_ROUTE = '/dsh-ssh-manage/pty/touch'
     const ptyStream = { source: null, ready: false, promise: null, listeners: new Map() }
     const ptyActiveIds = new Set()
     const ptyClosedIds = new Set()
+    const MAX_TERMINAL_SESSIONS = 16
     const ptyStreamLostHandlers = new Set()
 
+    if (typeof window !== 'undefined') {
+      const heartbeat = setInterval(() => {
+        if (ptyActiveIds.size === 0) return
+        try {
+          void fetch(PTY_TOUCH_ROUTE, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ ids: [...ptyActiveIds] }),
+            keepalive: true,
+          }).catch(() => {})
+        } catch {}
+      }, 60_000)
+      heartbeat.unref?.()
+    }
+
     function closePtySession(id) {
       if (!id) return
       ptyClosedIds.add(id)
@@ -3065,13 +3191,23 @@ window.__ModuleLoader__.load({
       return () => ptyStreamLostHandlers.delete(handler)
     }
 
-    function resetPtyStream() {
+    function resetPtyStream(reason = new Error('Terminal event stream closed')) {
+      const wasReady = ptyStream.ready === true
+      const rejectPending = ptyStream.reject
+      ptyStream.reject = null
       if (ptyStream.source) {
         try { ptyStream.source.close() } catch {}
       }
       ptyStream.source = null
       ptyStream.ready = false
       ptyStream.promise = null
+      if (rejectPending) {
+        try { rejectPending(reason) } catch {}
+      }
+      // A stream that never finished connecting is not a lost terminal yet;
+      // its waiting panes get the rejected ensure promise and keep their
+      // normal connecting/error overlay.
+      if (!wasReady) return
       for (const handler of [...ptyStreamLostHandlers]) {
         try { handler() } catch {}
       }
@@ -3085,8 +3221,18 @@ window.__ModuleLoader__.load({
     }
 
     function ensurePtyStream() {
-      if (ptyStream.ready && ptyStream.source && ptyStream.source.readyState === 1) return Promise.resolve()
-      if (ptyStream.source && ptyStream.source.readyState !== 1) resetPtyStream()
+      if (ptyStream.source) {
+        const state = ptyStream.source.readyState
+        if (state === 1 && ptyStream.ready) return Promise.resolve()
+        // CONNECTING: all callers must share the one in-flight promise; never
+        // tear it down. This is the multi-tab restore / rapid-second-connect
+        // race that used to leave N-1 panes in a permanent error overlay.
+        if (state === 0) {
+          if (ptyStream.promise) return ptyStream.promise
+          try { ptyStream.source.close() } catch {}
+          ptyStream.source = null
+        } else if (state === 2) resetPtyStream()
+      }
       if (ptyStream.promise) return ptyStream.promise
       ptyStream.promise = new Promise((resolve, reject) => {
         let settled = false
@@ -3100,14 +3246,17 @@ window.__ModuleLoader__.load({
           ptyStream.source = null
           ptyStream.ready = false
           ptyStream.promise = null
+          ptyStream.reject = null
           reject(error)
         }
         ptyStream.source = source
+        ptyStream.reject = reject
         timer = setTimeout(() => fail(new Error('Terminal event stream timed out')), 10_000)
         source.addEventListener('open', () => {
           if (settled) return
           settled = true
           clearTimeout(timer)
+          ptyStream.reject = null
           ptyStream.ready = true
           resolve()
         })
@@ -3161,6 +3310,11 @@ window.__ModuleLoader__.load({
       }
     }
 
+    function clearPtySession(id) {
+      if (!id) return
+      void ptyPost(PTY_CLEAR_ROUTE, { id }, 15_000).catch(() => {})
+    }
+
     function decodeBase64(text) {
       const binary = atob(String(text ?? ''))
       const bytes = new Uint8Array(binary.length)
@@ -3179,6 +3333,14 @@ window.__ModuleLoader__.load({
       const [status, setStatus] = React.useState('loading')
       const [message, setMessage] = React.useState('')
       const [retryToken, setRetryToken] = React.useState(0)
+      const clearRequested = React.useRef(false)
+      const reportStatus = model.setSessionState
+
+      React.useEffect(() => {
+        reportStatus?.(sessionId, status)
+      }, [reportStatus, sessionId, status])
+      const syncedRef = React.useRef(false)
+      const clearEpochRef = React.useRef(0)
 
       React.useEffect(() => {
         activeRef.current = active === true
@@ -3194,7 +3356,13 @@ window.__ModuleLoader__.load({
       }, [active])
 
       React.useEffect(() => {
-        if (!clearSignal || !termRef.current) return
+        if (!clearSignal) return
+        clearEpochRef.current += 1
+        // Only a clear issued before attach needs to survive into the attach
+        // replay. A clear on a live, synced terminal is handled by the server
+        // route directly and must not truncate the next attach replay.
+        clearRequested.current = syncedRef.current !== true
+        if (!termRef.current) return
         try {
           termRef.current.clear()
           termRef.current.write('\x1b[H\x1b[2J')
@@ -3217,6 +3385,8 @@ window.__ModuleLoader__.load({
         let opened = false
         let inputChain = Promise.resolve()
         let streamLost = null
+        let themeUnsub = null
+        syncedRef.current = false
         setStatus('loading')
         setMessage('')
 
@@ -3278,6 +3448,10 @@ window.__ModuleLoader__.load({
           termRef.current = term
           fitRef.current = fit
           try { fit.fit() } catch {}
+          themeUnsub = subscribeTerminalTheme(() => {
+            if (removed || !term) return
+            try { term.options.theme = terminalThemeFor(container) } catch {}
+          })
           term.onData((data) => {
             const id = sessionKey
             if (!id || !data || !opened) return
@@ -3324,22 +3498,103 @@ window.__ModuleLoader__.load({
           sessionKey = sessionId
           const id = sessionKey
           let synced = false
-          let lastSeq = 0
           const pendingEvents = []
 
+          const clearTerminal = () => {
+            if (!term) return
+            try {
+              term.clear()
+              term.write('\x1b[H\x1b[2J')
+            } catch {}
+          }
+
+          let resyncing = false
+          let resyncFailedAt = 0
+          let resyncAttempts = 0
+          let resyncGraceUntil = 0
+          const resyncQueue = []
+          let lastSeq = 0
+
           const applyOutput = (event) => {
             const seq = Number(event.seq)
             if (Number.isFinite(seq)) {
               if (seq <= lastSeq) return
-              lastSeq = seq
+              if (lastSeq > 0 && seq > lastSeq + 1) {
+                if (Date.now() < resyncGraceUntil) {
+                  lastSeq = seq
+                } else {
+                  resyncAttempts += 1
+                  if (resyncAttempts > 3) {
+                    resyncAttempts = 0
+                    resyncGraceUntil = Date.now() + 5_000
+                    lastSeq = seq
+                  } else {
+                    resyncQueue.push(event)
+                    void resync()
+                    return
+                  }
+                }
+              } else {
+                lastSeq = seq
+                resyncAttempts = 0
+              }
             }
             try { term.write(decodeBase64(event.data)) } catch {}
           }
 
+          const resync = async () => {
+            if (resyncing || stopped || finished || !sessionKey) return
+            const clearEpoch = clearEpochRef.current
+            resyncing = true
+            try {
+              const value = await ptyPost(PTY_ATTACH_ROUTE, {
+                id: sessionKey,
+                cols: term?.cols ?? 80,
+                rows: term?.rows ?? 24,
+              }, 15_000)
+              if (removed || stopped || finished) {
+                resyncing = false
+                return
+              }
+              if (clearEpochRef.current !== clearEpoch) {
+                clearRequested.current = false
+                clearTerminal()
+              } else if (value && value.output) {
+                try {
+                  term.reset()
+                  term.write(decodeBase64(value.output))
+                } catch {}
+              }
+              const seq = Number(value?.seq)
+              if (Number.isFinite(seq)) lastSeq = seq
+              resyncing = false
+              for (const event of resyncQueue.splice(0)) {
+                if (finished || stopped) break
+                handleEvent(event)
+              }
+            } catch {
+              resyncing = false
+              resyncFailedAt = Date.now()
+              resyncGraceUntil = Date.now() + 5_000
+              try { model.notify?.(t('terminal.resyncFailed'), 'error') } catch {}
+              for (const event of resyncQueue.splice(0)) {
+                if (finished || stopped) break
+                handleEvent(event)
+              }
+            }
+          }
+
           const handleEvent = (event) => {
+            if (resyncing) {
+              resyncQueue.push(event)
+              return
+            }
             if (event.kind === 'output') {
               if (!synced) pendingEvents.push(event)
               else applyOutput(event)
+            } else if (event.kind === 'clear') {
+              if (!synced) pendingEvents.push(event)
+              else clearTerminal()
             } else if (event.kind === 'exit') {
               if (!synced) {
                 pendingEvents.push(event)
@@ -3386,18 +3641,23 @@ window.__ModuleLoader__.load({
               closePtySession(id)
               return
             }
-            if (removed) return
-            if (value && value.output) {
+            if (removed || stopped || finished) return
+            if (clearRequested.current) {
+              clearRequested.current = false
+              clearTerminal()
+              clearPtySession(id)
+            } else if (value && value.output) {
               try { term.write(decodeBase64(value.output)) } catch {}
             }
             const seq = Number(value?.seq)
             if (Number.isFinite(seq)) lastSeq = seq
             synced = true
             for (const event of pendingEvents.splice(0)) {
-              if (finished) break
+              if (finished || stopped) break
               handleEvent(event)
             }
-            if (finished) return
+            if (finished || stopped || removed) return
+            syncedRef.current = true
             opened = true
             setStatus('ready')
             setMessage('')
@@ -3422,6 +3682,7 @@ window.__ModuleLoader__.load({
 
         return () => {
           removed = true
+          if (themeUnsub) themeUnsub()
           if (streamLost) streamLost()
           if (resizeObserver) resizeObserver.disconnect()
           teardown()
@@ -3809,6 +4070,28 @@ window.__ModuleLoader__.load({
         setDraft((prev) => ({ ...prev, [field]: value }))
       }
 
+      const dirty = password !== '' || JSON.stringify(draft) !== JSON.stringify(state.draft)
+      const requestClose = () => {
+        if (busy) return
+        if (!dirty) {
+          model.setEditor(null)
+          return
+        }
+        let discard = true
+        try {
+          discard = typeof window.confirm !== 'function' || window.confirm(t('editor.discardChanges'))
+        } catch {}
+        if (discard) model.setEditor(null)
+      }
+
+      React.useEffect(() => {
+        const guard = () => requestClose()
+        model.editorCloseGuard.current = guard
+        return () => {
+          if (model.editorCloseGuard.current === guard) model.editorCloseGuard.current = null
+        }
+      })
+
       async function submit() {
         const alias = draft.host.trim()
         const hostname = draft.hostname.trim()
@@ -3864,7 +4147,7 @@ window.__ModuleLoader__.load({
               t('editor.delete'),
             )
           : h('span', { key: 'spacer', className: 'ssh-toolSpacer' }),
-        h(Button, { key: 'cancel', onClick: () => model.setEditor(null), disabled: busy }, t('common.cancel')),
+        h(Button, { key: 'cancel', onClick: requestClose, disabled: busy }, t('common.cancel')),
         h(
           Button,
           { key: 'save', variant: 'primary', onClick: () => void submit(), disabled: busy },
@@ -3881,7 +4164,7 @@ window.__ModuleLoader__.load({
           width: 700,
           icon: h(IconTerminal, { size: 16 }),
           closeLabel: t('common.close'),
-          onClose: () => model.setEditor(null),
+          onClose: requestClose,
           footer,
         },
         h(
@@ -4004,6 +4287,17 @@ window.__ModuleLoader__.load({
       const groups = buildGroups(hosts, t).filter((group) => group.key !== '')
       const [drafts, setDrafts] = React.useState(() => Object.fromEntries(groups.map((group) => [group.key, group.key])))
       const busy = isPending('groups')
+      const requestClose = () => {
+        if (!busy) model.setGroupsOpen(false)
+      }
+
+      React.useEffect(() => {
+        const guard = () => requestClose()
+        model.groupsCloseGuard.current = guard
+        return () => {
+          if (model.groupsCloseGuard.current === guard) model.groupsCloseGuard.current = null
+        }
+      })
 
       async function commit(name) {
         const next = String(drafts[name] ?? '').trim()
@@ -4020,8 +4314,8 @@ window.__ModuleLoader__.load({
           width: 560,
           icon: h(IconFolder, { size: 16 }),
           closeLabel: t('common.close'),
-          onClose: () => model.setGroupsOpen(false),
-          footer: [h(Button, { key: 'close', onClick: () => model.setGroupsOpen(false) }, t('common.close'))],
+          onClose: requestClose,
+          footer: [h(Button, { key: 'close', onClick: requestClose }, t('common.close'))],
         },
         groups.length === 0
           ? h('div', { className: 'ssh-sectionHint' }, t('groups.empty'))
@@ -4654,6 +4948,12 @@ body.ssh-col-resizing,body.ssh-col-resizing *{cursor:col-resize!important;user-s
 .ssh-terminalOverlayBody{max-width:560px;font-size:11.5px;line-height:1.7;color:var(--ssh-text-3);word-break:break-word}
 .ssh-terminalOverlayActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
 .ssh-sessionLayer{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--ssh-bg)}
+.ssh-sessionState{width:6px;height:6px;border-radius:50%;background:var(--ssh-dim);flex:0 0 auto}
+.ssh-sessionState.loading,.ssh-sessionState.connecting{background:var(--ssh-warn)}
+.ssh-sessionState.ready{background:var(--ssh-success)}
+.ssh-sessionState.error,.ssh-sessionState.closed{background:var(--ssh-danger)}
+.ssh-tabLabel{display:inline-flex;align-items:center;gap:5px}
+.ssh-tabAlert{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ssh-danger);flex:0 0 auto}
 .ssh-sessions{flex:1;min-height:0;display:flex;flex-direction:column}
 .ssh-sessionBar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:.5px solid var(--ssh-border);min-height:48px}
 .ssh-sessionTabs{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;padding-bottom:1px}