@lijian-ui/dsh-term 0.1.0

package/src/client/index.ts

@@ -0,0 +1,223 @@
+/**
+ * dsh-term browser half: mounts the terminal as a DOCKED column in the web
+ * shell's right side — appended as the 6th grid track of the frame, beside
+ * the file-manager panels (preview/explorer) when present. This mirrors how
+ * file-manager extends the frame grid, so the two panels sit side by side.
+ *
+ * The frame is a CSS grid with `grid-auto-flow: row` (the default). A bare
+ * `appendChild` of a 6th child would WRAP to a 2nd row (off-screen) — so we
+ * must EXTEND `grid-template-columns` explicitly, the same way file-manager
+ * does. We append a `[dsh-term]` named 6th track after file-manager's 5
+ * tracks; the center column is `minmax(0,1fr)`, so it absorbs the 300px and
+ * the grid never overflows on wide screens. file-manager ignores any grid
+ * string that is not 3 (shell) or 5 (its own) tracks, so our 6-track write is
+ * left alone by it — we just re-assert it whenever file-manager rewrites the
+ * grid (drag / resize / collapse).
+ *
+ * Every DOM/runtime failure is logged, never thrown — the web shell fails the
+ * whole boot when a plugin apply throws.
+ * @module dsh-term/client
+ */
+
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: pulls the ui-slots SlotMap merge (keeps bundle purity gates calm).
+import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import { TermApi } from './term/api.ts'
+import { TerminalPanel } from './term/TerminalPanel.tsx'
+
+/** Required services: sessions (for the workspace cwd). */
+export const inject = ['sessions']
+
+/** Width of the docked terminal column, in px (the 6th grid track). */
+const TERMINAL_WIDTH = 300
+
+/** Locate the frame grid (same heuristic file-manager uses). */
+function findFrame(): HTMLElement | null {
+  const stamped = document.querySelector<HTMLElement>('[data-dsh-frame]')
+  if (stamped !== null) return stamped
+  return document.querySelector<HTMLElement>('[class*="sidebarCol"]')?.parentElement ?? null
+}
+
+/**
+ * Run `cb` once the frame exists. The shell mounts late (and may rebuild), so
+ * wait via a body-level MutationObserver when it is not present yet.
+ */
+function whenFrameReady(cb: (frame: HTMLElement) => void): () => void {
+  const existing = findFrame()
+  if (existing !== null) {
+    cb(existing)
+    return () => {}
+  }
+  const obs = new MutationObserver(() => {
+    const frame = findFrame()
+    if (frame !== null) {
+      obs.disconnect()
+      cb(frame)
+    }
+  })
+  obs.observe(document.body, { childList: true, subtree: true })
+  return () => obs.disconnect()
+}
+
+/** Inject the launcher button styles once (the button is a raw DOM node). */
+function adoptLauncherStyles(): void {
+  const id = 'dsh-term-launcher-style'
+  if (document.getElementById(id) !== null) return
+  const tag = document.createElement('style')
+  tag.id = id
+  tag.textContent = `
+.dsh-term-launcher {
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  z-index: 40;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid var(--aion-bg-3, #e5e6eb);
+  background: var(--aion-bg-1, #ffffff);
+  color: var(--aion-fg-1, #1f2329);
+  font-size: 13px;
+  font-family: var(--aion-font-sans, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.dsh-term-launcher:hover {
+  background: var(--aion-bg-2, #f2f3f5);
+}`
+  document.head.appendChild(tag)
+}
+
+/**
+ * Parse a `grid-template-columns` string into raw tokens. Named lines
+ * (`[name]`) and sizes are separate tokens — we keep them split so the
+ * terminal marker can be stripped reliably. Spaces inside `minmax(...)` /
+ * `repeat(...)` are preserved (not split).
+ */
+function tokenizeGrid(input: string): string[] {
+  const tokens: string[] = []
+  let depth = 0
+  let current = ''
+  for (const char of input) {
+    if (char === '(') depth += 1
+    if (char === ')') depth = Math.max(0, depth - 1)
+    if (char === ' ' && depth === 0) {
+      if (current !== '') {
+        tokens.push(current)
+        current = ''
+      }
+      continue
+    }
+    current += char
+  }
+  if (current !== '') tokens.push(current)
+  return tokens
+}
+
+/** Remove the terminal's `[dsh-term]` marker line and its following size token. */
+function stripTerminalTrack(tokens: readonly string[]): string[] {
+  const out: string[] = []
+  for (let i = 0; i < tokens.length; i += 1) {
+    if (tokens[i] === '[dsh-term]') {
+      i += 1 // skip the size that follows the marker
+      continue
+    }
+    out.push(tokens[i])
+  }
+  return out
+}
+
+/** Apply the browser half. */
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => {
+    let disposeFrame: (() => void) | undefined
+    const offWait = whenFrameReady((frame) => {
+      // The terminal column: appended as the LAST child of the frame grid, so
+      // it docks to the far right, beside file-manager's explorer. It becomes
+      // the 6th explicit grid track (sized by our `[dsh-term] 300px` write),
+      // not an implicit row — that is what makes it visible on the same row.
+      const col = document.createElement('div')
+      col.dataset.dshTermCol = ''
+      col.style.minWidth = '0'
+      col.style.height = '100%'
+      frame.appendChild(col)
+
+      // Keep the terminal the rightmost column even if file-manager appends
+      // its preview/explorer columns after this plugin mounts.
+      const keepLast = new MutationObserver(() => {
+        if (col !== frame.lastElementChild) frame.appendChild(col)
+      })
+      keepLast.observe(frame, { childList: true })
+
+      // Re-open button (after a collapse). Hidden while the column is open.
+      adoptLauncherStyles()
+      const launcher = document.createElement('button')
+      launcher.type = 'button'
+      launcher.className = 'dsh-term-launcher'
+      launcher.textContent = '终端'
+      launcher.setAttribute('aria-label', '打开终端')
+      launcher.style.display = 'none'
+      document.body.appendChild(launcher)
+
+      // Open/closed state. Closed by default (the column is a docked track).
+      let terminalOpen = false
+
+      /**
+       * Re-assert the frame grid: keep file-manager's tracks, append our
+       * `[dsh-term] 300px` track when open, strip it when collapsed.
+       * file-manager only acts on 3- or 5-track grids, so our 6-track write is
+       * never clobbered by it — but file-manager DOES overwrite us on every
+       * drag/resize/collapse, so we re-run on any frame style change.
+       */
+      const reconcileGrid = (): void => {
+        const inline = frame.style.gridTemplateColumns
+        if (inline.trim() === '') return
+        let tokens = tokenizeGrid(inline)
+        tokens = stripTerminalTrack(tokens)
+        const hasFilemgr = frame.querySelector('[data-filemgr-explorer-col]') !== null
+        const baseLen = hasFilemgr ? 5 : 3
+        // Wait while file-manager has not finalized its 5-track grid yet
+        // (e.g. the shell's own 3-track write landed before file-manager
+        // re-applied). Touching it now would desync file-manager's width math.
+        if (tokens.length !== baseLen) return
+        if (terminalOpen) tokens.push('[dsh-term]', `${TERMINAL_WIDTH}px`)
+        const next = tokens.join(' ')
+        if (next !== frame.style.gridTemplateColumns) {
+          frame.style.gridTemplateColumns = next
+        }
+      }
+
+      // Re-assert after file-manager rewrites the grid (drag / resize / collapse).
+      const styleObserver = new MutationObserver(() => reconcileGrid())
+      styleObserver.observe(frame, { attributes: true, attributeFilter: ['style'] })
+      // First pass (frame may already carry file-manager's 5-track grid).
+      reconcileGrid()
+
+      const api = new TermApi()
+      const root = createRoot(col)
+      const setVisible = (open: boolean): void => {
+        terminalOpen = open
+        col.style.display = open ? 'flex' : 'none'
+        launcher.style.display = open ? 'none' : 'flex'
+        reconcileGrid()
+      }
+      launcher.addEventListener('click', () => setVisible(true))
+      root.render(createElement(TerminalPanel, { ctx, api, onClose: () => setVisible(false) }))
+
+      disposeFrame = () => {
+        keepLast.disconnect()
+        styleObserver.disconnect()
+        root.unmount()
+        col.remove()
+        launcher.remove()
+      }
+    })
+    return () => {
+      offWait()
+      disposeFrame?.()
+    }
+  }, 'dsh-term: panel mount')
+}

package/src/client/term/TerminalPanel.tsx

@@ -0,0 +1,259 @@
+/**
+ * dsh-term panel: a multi-tab local terminal (real PTY via node-pty on the
+ * host, bridged over /dsh-term/*). One xterm instance per tab; output lands
+ * through a single EventSource routed by session id.
+ *
+ * Mounting: this component renders a DOCKED column (not a floating overlay).
+ * The client entry (`index.ts`) appends that column as the last grid track of
+ * the web shell's frame, beside the file-manager panels (preview/explorer)
+ * when present. The panel itself only owns its inner content (header + stage).
+ *
+ * A-version scope: pure user terminal. No agent integration, no SSH targets
+ * yet — those are the B-version.
+ * @module dsh-term/client/term/TerminalPanel
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { JSX } from 'react'
+import { Terminal } from 'xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import type { ClientContext, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { TermEvent, TermSessionInfo } from '../../core/types.ts'
+import type { TermApi } from './api.ts'
+import { XTERM_CSS } from './xterm-styles.ts'
+import css from './term.module.css'
+
+/** One open tab: the wire info plus its live xterm handles. */
+interface Tab {
+  readonly sessionId: string
+  readonly title: string
+  readonly term: Terminal
+  readonly fit: FitAddon
+  readonly wrap: HTMLDivElement
+}
+
+/** Inject the xterm core styles once (idempotent). */
+const XTERM_STYLE_ID = 'dsh-term-xterm-style'
+function adoptXtermStyles(): void {
+  if (document.getElementById(XTERM_STYLE_ID) !== null) return
+  const tag = document.createElement('style')
+  tag.id = XTERM_STYLE_ID
+  tag.textContent = XTERM_CSS
+  document.head.appendChild(tag)
+}
+
+/** Terminal theme matching the shell's light/dark marker. */
+function themeOf(): Record<string, string> {
+  const dark = document.body.dataset.dsDarkTheme !== undefined
+  return {
+    background: dark ? '#0e0e0e' : '#ffffff',
+    foreground: dark ? '#ced3da' : '#1f2329',
+    cursor: dark ? '#ced3da' : '#1f2329',
+    selectionBackground: dark ? 'rgba(255,255,255,0.2)' : 'rgba(22,93,255,0.25)',
+  }
+}
+
+/** Current workspace cwd from the session list ('' when none). */
+function currentCwd(ctx: ClientContext): string {
+  const snapshot = ctx.sessions.list.getSnapshot()
+  const sessionId = snapshot.current as SessionId | undefined
+  const cwd = sessionId === undefined ? undefined : snapshot.byId[sessionId]?.cwd
+  return typeof cwd === 'string' && cwd !== '' ? cwd : ''
+}
+
+/** The docked panel: header (title / tabs / new / collapse) + xterm stage. */
+export function TerminalPanel({
+  ctx, api, onClose,
+}: { ctx: ClientContext; api: TermApi; onClose: () => void }): JSX.Element {
+  const [tabs, setTabs] = useState<readonly Tab[]>([])
+  const [active, setActive] = useState<string | null>(null)
+  const stageRef = useRef<HTMLDivElement | null>(null)
+  const tabsRef = useRef(tabs)
+  tabsRef.current = tabs
+
+  // xterm needs its core stylesheet; inject once when the panel mounts.
+  useEffect(() => { adoptXtermStyles() }, [])
+
+  // Keep every open tab's xterm theme in lockstep with the shell dark marker
+  // (the shell toggles body[data-ds-dark-theme] — CSS only can't reach xterm).
+  useEffect(() => {
+    const applyTheme = (): void => {
+      const theme = themeOf()
+      for (const tab of tabsRef.current) tab.term.options.theme = theme
+    }
+    applyTheme()
+    const obs = new MutationObserver(applyTheme)
+    obs.observe(document.body, { attributes: true, attributeFilter: ['data-ds-dark-theme'] })
+    return () => obs.disconnect()
+  }, [])
+
+  // One global stream subscription; route frames to the right tab by id.
+  useEffect(() => {
+    const off = api.subscribe((event: TermEvent) => {
+      if (event.kind === 'output') {
+        const tab = tabsRef.current.find((t) => t.sessionId === event.id)
+        tab?.term.write(event.data)
+        return
+      }
+      if (event.kind === 'exit') {
+        const tab = tabsRef.current.find((t) => t.sessionId === event.id)
+        if (tab !== undefined) tab.term.write(`\r\n[dsh-term] 进程已退出（code ${event.exitCode}）\r\n`)
+      }
+    })
+    return off
+  }, [api])
+
+  /** Create a tab: xterm instance + host spawn, then attach output routing. */
+  const openTab = useCallback(async (): Promise<void> => {
+    if (stageRef.current === null) return
+    const wrap = document.createElement('div')
+    wrap.className = css.termWrap
+    stageRef.current.appendChild(wrap)
+    const term = new Terminal({
+      fontSize: 13,
+      fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+      cursorBlink: true,
+      theme: themeOf(),
+      scrollback: 5000,
+    })
+    const fit = new FitAddon()
+    term.loadAddon(fit)
+    term.open(wrap)
+    try {
+      fit.fit()
+    } catch {
+      // Not yet in the DOM layout; the first resize below will fit it.
+    }
+    // Route typed input straight to the host.
+    term.onData((data) => {
+      const tab = tabsRef.current.find((t) => t.term === term)
+      if (tab !== undefined) void api.write(tab.sessionId, data)
+    })
+
+    let session: TermSessionInfo
+    try {
+      session = await api.spawn({
+        cwd: currentCwd(ctx) || undefined,
+        cols: term.cols,
+        rows: term.rows,
+      })
+    } catch (error) {
+      term.write(`\r\n[dsh-term] 启动失败: ${String(error)}\r\n`)
+      return
+    }
+    const tab: Tab = { sessionId: session.id, title: session.title, term, fit, wrap }
+    setTabs((prev) => [...prev, tab])
+    setActive(session.id)
+    // Sync the first real size back to the PTY (fit() before open may be off).
+    void api.resize(session.id, term.cols, term.rows)
+    term.focus()
+  }, [api, ctx])
+
+  // First tab on mount.
+  useEffect(() => {
+    if (tabs.length === 0) void openTab()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Refit the active tab whenever the stage gets a size (window resize, tab
+  // switch, or the docked column being shown after a collapse). A hidden
+  // column reports 0 size, so fit is deferred until it becomes visible.
+  useEffect(() => {
+    const stage = stageRef.current
+    if (stage === null) return
+    const refit = (): void => {
+      const tab = tabsRef.current.find((t) => t.sessionId === active)
+      if (tab === undefined) return
+      try {
+        tab.fit.fit()
+        void api.resize(tab.sessionId, tab.term.cols, tab.term.rows)
+      } catch {
+        // Measurement race on first paint; the next resize retry handles it.
+      }
+    }
+    const observer = new ResizeObserver(refit)
+    observer.observe(stage)
+    return () => observer.disconnect()
+  }, [active, api])
+
+  // Apply the active marker on the DOM wrappers (display toggling).
+  useEffect(() => {
+    for (const tab of tabsRef.current) {
+      tab.wrap.classList.toggle(css.termWrapActive, tab.sessionId === active)
+    }
+    if (active !== null) {
+      const tab = tabsRef.current.find((t) => t.sessionId === active)
+      if (tab !== undefined) {
+        try {
+          tab.fit.fit()
+          void api.resize(tab.sessionId, tab.term.cols, tab.term.rows)
+        } catch {
+          // Ignore measurement races on first paint.
+        }
+        tab.term.focus()
+      }
+    }
+  }, [active, api, tabs])
+
+  const closeTab = (sessionId: string): void => {
+    const tab = tabsRef.current.find((t) => t.sessionId === sessionId)
+    if (tab !== undefined) {
+      void api.close(sessionId)
+      tab.term.dispose()
+      tab.wrap.remove()
+    }
+    const next = tabsRef.current.filter((t) => t.sessionId !== sessionId)
+    setTabs(next)
+    if (active === sessionId) setActive(next[0]?.sessionId ?? null)
+  }
+
+  // Panel teardown: kill every host session and dispose the xterm instances.
+  useEffect(() => {
+    const current = tabsRef.current
+    return () => {
+      for (const tab of current) {
+        void api.close(tab.sessionId)
+        tab.term.dispose()
+        tab.wrap.remove()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div className={css.col} data-dsh-term="">
+      <div className={css.toolbar}>
+        <span className={css.title}>终端</span>
+        <span className={css.tabDivider} />
+        {tabs.map((tab) => (
+          <button
+            key={tab.sessionId}
+            type="button"
+            className={`${css.tab}${tab.sessionId === active ? ` ${css.tabActive}` : ''}`}
+            onClick={() => setActive(tab.sessionId)}
+            title={tab.title}
+          >
+            <span>{tab.title}</span>
+            <span
+              role="button"
+              aria-label={`关闭 ${tab.title}`}
+              className={css.tabClose}
+              onClick={(event) => {
+                event.stopPropagation()
+                closeTab(tab.sessionId)
+              }}
+            >
+              ×
+            </span>
+          </button>
+        ))}
+        <button type="button" className={css.addTab} title="新建终端" onClick={() => void openTab()}>+</button>
+        <span className={css.spacer} />
+        <button type="button" className={css.collapse} title="收起" onClick={onClose}>—</button>
+      </div>
+      <div className={css.stage} ref={stageRef}>
+        {tabs.length === 0 && <div className={css.emptyHint}>点击 + 新建终端</div>}
+      </div>
+    </div>
+  )
+}

package/src/client/term/api.ts

@@ -0,0 +1,66 @@
+/**
+ * Browser-half bridge to the /dsh-term/* host routes: fetch envelope calls
+ * plus one EventSource for the output/exit stream. Thin and stateless — the
+ * panel owns all session state.
+ * @module dsh-term/client/term/api
+ */
+
+import type { TermEvent, TermSessionInfo, TermSpawnRequest } from '../../core/types.ts'
+
+/** Envelope mirror of the host route layer. */
+type Envelope<T> = { ok: true; value: T } | { ok: false; error: { code: string; message: string } }
+
+async function call<T>(path: string, body?: unknown): Promise<T> {
+  const response = await fetch(path, {
+    method: body === undefined ? 'GET' : 'POST',
+    headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  })
+  const envelope = await response.json() as Envelope<T>
+  if (!envelope.ok) throw new Error(envelope.error.message)
+  return envelope.value
+}
+
+/** The stateless client bridge. */
+export class TermApi {
+  /** Open a session; returns the wire info. */
+  spawn(request: TermSpawnRequest): Promise<TermSessionInfo> {
+    return call<TermSessionInfo>('/dsh-term/spawn', request)
+  }
+
+  /** Deliver terminal input. */
+  write(id: string, data: string): Promise<{ ok: boolean }> {
+    return call<{ ok: boolean }>('/dsh-term/write', { id, data })
+  }
+
+  /** Resize one session. */
+  resize(id: string, cols: number, rows: number): Promise<{ ok: boolean }> {
+    return call<{ ok: boolean }>('/dsh-term/resize', { id, cols, rows })
+  }
+
+  /** Close one session. */
+  close(id: string): Promise<{ ok: boolean }> {
+    return call<{ ok: boolean }>('/dsh-term/close', { id })
+  }
+
+  /** Current session listing (used on reconnect). */
+  list(): Promise<{ sessions: readonly TermSessionInfo[] }> {
+    return call<{ sessions: readonly TermSessionInfo[] }>('/dsh-term/list')
+  }
+
+  /**
+   * Subscribe to the output/exit stream. Returns the unsubscribe.
+   * @param onEvent - receives every pushed event.
+   */
+  subscribe(onEvent: (event: TermEvent) => void): () => void {
+    const source = new EventSource('/dsh-term/events')
+    source.addEventListener('term', (event) => {
+      try {
+        onEvent(JSON.parse((event as MessageEvent).data) as TermEvent)
+      } catch {
+        // Malformed frame: drop it; the stream stays alive.
+      }
+    })
+    return () => { source.close() }
+  }
+}

package/src/client/term/term.module.css

@@ -0,0 +1,153 @@
+/**
+ * dsh-term panel styles. The :global block inlines the required xterm.js
+ * core styles (MIT, xterm 5.3.0) because the client build only compiles
+ * *.module.css; the shell's --aion tokens drive the panel chrome.
+ * @module dsh-term/client/term/term.module
+ */
+
+.col {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--aion-border-base, #e5e6eb);
+  background: var(--aion-bg-1, #f9fafb);
+  overflow: hidden;
+  font-family: var(--aion-font-sans, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
+}
+
+.title {
+  flex: none;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--aion-text-primary, #1f2329);
+  user-select: none;
+}
+
+.tabDivider {
+  flex: none;
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: var(--aion-border-base, #e5e6eb);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 32px;
+  padding: 0 6px;
+  border-bottom: 1px solid var(--aion-border-base, #e5e6eb);
+  background: var(--aion-bg-base, #ffffff);
+  flex: none;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: var(--aion-text-secondary, #454d5f);
+  font-size: 12px;
+  cursor: pointer;
+  max-width: 200px;
+}
+
+.tabActive {
+  background: var(--aion-bg-2, #f2f3f5);
+  color: var(--aion-text-primary, #000000);
+}
+
+.tabClose {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--aion-text-tertiary, #86909c);
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.tabClose:hover {
+  background: var(--aion-bg-3, #e5e6eb);
+  color: var(--aion-text-primary, #000000);
+}
+
+.addTab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--aion-text-secondary, #454d5f);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.addTab:hover {
+  background: var(--aion-bg-2, #f2f3f5);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--aion-text-secondary, #454d5f);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.collapse:hover {
+  background: var(--aion-bg-2, #f2f3f5);
+}
+
+.stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--aion-bg-base, #ffffff);
+}
+
+.termWrap {
+  position: absolute;
+  inset: 0;
+  padding: 4px;
+  display: none;
+}
+
+.termWrapActive {
+  display: block;
+}
+
+.emptyHint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--aion-text-tertiary, #86909c);
+  font-size: 13px;
+}