feat(plugin-terminals): light/dark theming + live process-name tabs with rename

- Follow the system color mode and react to changes at runtime: the UI
  chrome (CSS variables) and every xterm instance switch between dark and
  a GitHub-light palette without reload, driven by prefers-color-scheme.
- Tab labels show the live foreground process of the controlling TTY
  (e.g. bash → vim → bash), polled from node-pty for PTY sessions.
- Custom renaming: double-click a tab to edit inline; backed by a new
  `devframes-plugin-terminals:rename` RPC. Display precedence is
  customTitle > processName > base title.

Adds processName/customTitle to the session descriptor, a getProcessName
hook on the PTY backend, an unref'd poll timer (cleared on exit/restart/
remove/dispose), and tests for process-name tracking and renaming.

Author: antfubot

plugins/terminals/src/client/index.ts

@@ -1,3 +1,4 @@
+import type { ITheme } from '@xterm/xterm'
 import type { DevframeRpcClient } from 'devframe/client'
 import type { StreamReader } from 'devframe/utils/streaming-channel'
 import type { TerminalPreset, TerminalSessionInfo, TerminalsSharedState } from '../types'
@@ -33,48 +34,87 @@ interface SessionView {
 
 const UI_CSS = `
 .dft-root { position: absolute; inset: 0; display: flex; flex-direction: column;
-  font-family: system-ui, sans-serif; background: #0b0e14; color: #c9d1d9; }
+  font-family: system-ui, sans-serif; background: var(--dft-bg); color: var(--dft-fg); }
+.dft-root.dft-dark {
+  --dft-bg: #0d1117; --dft-fg: #c9d1d9; --dft-muted: #8b949e;
+  --dft-border: #1c2128; --dft-surface: #161b22; --dft-surface-hover: #30363d;
+  --dft-surface-active: #21262d; --dft-term-bg: #000000; --dft-accent: #58a6ff;
+}
+.dft-root.dft-light {
+  --dft-bg: #f6f8fa; --dft-fg: #1f2328; --dft-muted: #59636e;
+  --dft-border: #d0d7de; --dft-surface: #ffffff; --dft-surface-hover: #eaeef2;
+  --dft-surface-active: #ffffff; --dft-term-bg: #ffffff; --dft-accent: #0969da;
+}
 .dft-header { display: flex; align-items: stretch; gap: 4px; padding: 6px 8px;
-  border-bottom: 1px solid #1c2128; background: #0d1117; }
+  border-bottom: 1px solid var(--dft-border); background: var(--dft-bg); }
 .dft-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; align-items: center; }
 .dft-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
-  padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: #161b22;
-  color: #8b949e; font-size: 12px; cursor: pointer; }
-.dft-tab:hover { color: #c9d1d9; }
-.dft-tab.active { background: #21262d; color: #fff; border-color: #30363d; }
+  padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: var(--dft-surface);
+  color: var(--dft-muted); font-size: 12px; cursor: pointer; }
+.dft-tab:hover { color: var(--dft-fg); }
+.dft-tab.active { background: var(--dft-surface-active); color: var(--dft-fg); border-color: var(--dft-border); }
 .dft-dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; flex: none; }
 .dft-dot.exited { background: #6e7681; }
 .dft-dot.error { background: #f85149; }
 .dft-actions { display: flex; gap: 6px; align-items: center; }
-.dft-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #30363d;
-  background: #21262d; color: #c9d1d9; font-size: 12px; cursor: pointer; }
-.dft-btn:hover { background: #30363d; }
+.dft-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--dft-border);
+  background: var(--dft-surface); color: var(--dft-fg); font-size: 12px; cursor: pointer; }
+.dft-btn:hover { background: var(--dft-surface-hover); }
 .dft-btn:disabled { opacity: 0.45; cursor: default; }
-.dft-select { padding: 4px 8px; border-radius: 6px; border: 1px solid #30363d;
-  background: #21262d; color: #c9d1d9; font-size: 12px; }
+.dft-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--dft-border);
+  background: var(--dft-surface); color: var(--dft-fg); font-size: 12px; }
+.dft-rename { font: inherit; font-size: 12px; width: 10ch; min-width: 64px; padding: 1px 5px;
+  border: 1px solid var(--dft-accent); border-radius: 4px; background: var(--dft-bg);
+  color: var(--dft-fg); outline: none; }
 .dft-toolbar { display: flex; align-items: center; gap: 8px; padding: 4px 10px;
-  border-bottom: 1px solid #1c2128; font-size: 12px; color: #8b949e; min-height: 20px; }
+  border-bottom: 1px solid var(--dft-border); font-size: 12px; color: var(--dft-muted); min-height: 20px; }
 .dft-badge { padding: 1px 7px; border-radius: 10px; font-size: 10px; text-transform: uppercase;
-  letter-spacing: 0.03em; border: 1px solid #30363d; }
-.dft-badge.interactive { color: #58a6ff; border-color: #1f6feb55; }
-.dft-badge.readonly { color: #d29922; border-color: #9e6a0355; }
+  letter-spacing: 0.03em; border: 1px solid var(--dft-border); }
+.dft-badge.interactive { color: var(--dft-accent); border-color: #1f6feb55; }
+.dft-badge.readonly { color: #bb8009; border-color: #9e6a0355; }
 .dft-spacer { flex: 1; }
-.dft-body { position: relative; flex: 1; overflow: hidden; background: #000; }
+.dft-body { position: relative; flex: 1; overflow: hidden; background: var(--dft-term-bg); }
 .dft-view { position: absolute; inset: 0; padding: 4px; display: none; }
 .dft-view.active { display: block; }
 .dft-empty { position: absolute; inset: 0; display: flex; align-items: center;
-  justify-content: center; color: #6e7681; font-size: 13px; pointer-events: none; }
+  justify-content: center; color: var(--dft-muted); font-size: 13px; pointer-events: none; }
 .dft-view .xterm, .dft-view .xterm-viewport, .dft-view .xterm-screen { height: 100%; }
-.dft-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9d1d9; }
+.dft-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dft-fg); }
 `
 
-const THEME = {
+const DARK_THEME: ITheme = {
   background: '#000000',
   foreground: '#c9d1d9',
   cursor: '#58a6ff',
+  cursorAccent: '#000000',
   selectionBackground: '#234876',
 }
 
+// GitHub-light palette so the default-bright ANSI colors stay legible on white.
+const LIGHT_THEME: ITheme = {
+  background: '#ffffff',
+  foreground: '#1f2328',
+  cursor: '#0969da',
+  cursorAccent: '#ffffff',
+  selectionBackground: '#b6d7ff',
+  black: '#24292f',
+  red: '#cf222e',
+  green: '#116329',
+  yellow: '#7d4e00',
+  blue: '#0969da',
+  magenta: '#8250df',
+  cyan: '#1b7c83',
+  white: '#6e7781',
+  brightBlack: '#57606a',
+  brightRed: '#a40e26',
+  brightGreen: '#1a7f37',
+  brightYellow: '#633c01',
+  brightBlue: '#218bff',
+  brightMagenta: '#a475f9',
+  brightCyan: '#3192aa',
+  brightWhite: '#8c959f',
+}
+
 let stylesInjected = false
 function injectStyles(): void {
   if (stylesInjected || typeof document === 'undefined')
@@ -133,6 +173,37 @@ export async function mountTerminals(
   let activeId: string | null = null
   let presets: TerminalPreset[] = []
   let disposed = false
+  let renamingId: string | null = null
+
+  // Follow the system color mode and react to changes at runtime, switching
+  // both the UI chrome (via CSS classes) and every xterm instance's theme.
+  const colorScheme = typeof window !== 'undefined' && window.matchMedia
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null
+  let isDark = colorScheme ? colorScheme.matches : true
+
+  function activeTheme(): ITheme {
+    return isDark ? DARK_THEME : LIGHT_THEME
+  }
+
+  function applyColorScheme(): void {
+    root.classList.toggle('dft-dark', isDark)
+    root.classList.toggle('dft-light', !isDark)
+    for (const view of views.values())
+      view.term.options.theme = activeTheme()
+  }
+
+  const onColorScheme = (e: MediaQueryListEvent): void => {
+    isDark = e.matches
+    applyColorScheme()
+  }
+  colorScheme?.addEventListener('change', onColorScheme)
+  applyColorScheme()
+
+  /** Tab/toolbar label: custom name wins, then the live process, then the base title. */
+  function displayName(info: TerminalSessionInfo): string {
+    return info.customTitle || info.processName || info.title
+  }
 
   function spawn(req: Parameters<DevframeRpcClient['call']>[1]): void {
     rpc.call('devframes-plugin-terminals:spawn', req as any).catch(() => {})
@@ -202,7 +273,9 @@ export async function mountTerminals(
     const badge = el('span', `dft-badge ${info.mode}`)
     badge.textContent = info.mode
     const label = el('span', 'dft-mono')
-    label.textContent = `${info.command}${info.args.length ? ` ${info.args.join(' ')}` : ''}`
+    label.textContent = info.processName && info.processName !== info.command
+      ? `${info.processName} · ${info.command}`
+      : `${info.command}${info.args.length ? ` ${info.args.join(' ')}` : ''}`
     const status = el('span')
     status.textContent = info.status === 'running'
       ? `running · ${info.backend}${info.pid ? ` · pid ${info.pid}` : ''}`
@@ -234,7 +307,7 @@ export async function mountTerminals(
       fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
       fontSize: 13,
       scrollback: 10000,
-      theme: THEME,
+      theme: activeTheme(),
       disableStdin: info.mode !== 'interactive',
       allowProposedApi: false,
     })
@@ -264,6 +337,13 @@ export async function mountTerminals(
 
     const tab = el('button', 'dft-tab')
     tab.onclick = () => setActive(info.id)
+    tab.ondblclick = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const view = views.get(info.id)
+      if (view)
+        startRename(view)
+    }
 
     requestAnimationFrame(() => {
       try {
@@ -284,16 +364,57 @@ export async function mountTerminals(
 
   function renderTabs(): void {
     for (const view of views.values()) {
+      if (view.tab.parentElement !== tabs)
+        tabs.append(view.tab)
+      // Leave the tab being renamed untouched so its input survives
+      // concurrent shared-state updates.
+      if (view.info.id === renamingId)
+        continue
       view.tab.replaceChildren()
       const dot = el('span', `dft-dot ${view.info.status === 'running' ? '' : view.info.status}`)
       const label = el('span')
-      label.textContent = view.info.title
+      label.textContent = displayName(view.info)
+      view.tab.title = 'Double-click to rename'
       view.tab.append(dot, label)
-      if (view.tab.parentElement !== tabs)
-        tabs.append(view.tab)
     }
   }
 
+  /** Inline-edit a tab name; commits via the rename RPC on Enter/blur. */
+  function startRename(view: SessionView): void {
+    renamingId = view.info.id
+    const input = el('input', 'dft-rename')
+    input.value = displayName(view.info)
+    input.spellcheck = false
+    view.tab.replaceChildren(input)
+    input.focus()
+    input.select()
+
+    let settled = false
+    const finish = (commit: boolean): void => {
+      if (settled)
+        return
+      settled = true
+      renamingId = null
+      if (commit) {
+        rpc.call('devframes-plugin-terminals:rename', { id: view.info.id, title: input.value.trim() })
+          .catch(() => {})
+      }
+      renderTabs()
+    }
+    input.onclick = e => e.stopPropagation()
+    input.onkeydown = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        finish(true)
+      }
+      else if (e.key === 'Escape') {
+        e.preventDefault()
+        finish(false)
+      }
+    }
+    input.onblur = () => finish(true)
+  }
+
   function syncSessions(sessions: TerminalSessionInfo[]): void {
     if (disposed)
       return
@@ -362,6 +483,7 @@ export async function mountTerminals(
       disposed = true
       offSessions?.()
       offPresets?.()
+      colorScheme?.removeEventListener('change', onColorScheme)
       resizeObserver?.disconnect()
       for (const view of views.values())
         disposeView(view)

plugins/terminals/src/node/backend.ts

@@ -16,6 +16,11 @@ export interface TerminalProcess {
   kill: (signal?: string) => void
   onData: (cb: (data: string) => void) => void
   onExit: (cb: (exitCode: number) => void) => void
+  /**
+   * Current foreground process name of the controlling TTY, when the
+   * backend can resolve it (PTY only). Polled by the manager.
+   */
+  getProcessName?: () => string | undefined
 }
 
 export interface SpawnBackendOptions {
@@ -41,6 +46,8 @@ interface PtyModule {
 
 interface PtyProcess {
   pid: number
+  /** Foreground process title; updated by node-pty as the foreground changes. */
+  readonly process?: string
   onData: (cb: (data: string) => void) => void
   onExit: (cb: (e: { exitCode: number, signal?: number }) => void) => void
   write: (data: string) => void
@@ -127,6 +134,14 @@ export async function spawnPty(options: SpawnBackendOptions): Promise<TerminalPr
     },
     onData: cb => proc.onData(cb),
     onExit: cb => proc.onExit(e => cb(e.exitCode ?? 0)),
+    getProcessName: () => {
+      try {
+        return proc.process || undefined
+      }
+      catch {
+        return undefined
+      }
+    },
   }
 }
 

plugins/terminals/src/node/manager.ts

@@ -40,8 +40,12 @@ interface ManagedSession {
   sink: StreamSink<string>
   spawn: ResolvedSpawn
   proc?: TerminalProcess
+  pollTimer?: ReturnType<typeof setInterval>
 }
 
+/** How often a PTY session's foreground process name is polled. */
+const PROCESS_POLL_INTERVAL = 1000
+
 function defaultShell(): string {
   if (process.platform === 'win32')
     return process.env.COMSPEC || 'powershell.exe'
@@ -253,17 +257,48 @@ export class TerminalManager {
       // Ignore the exit of a process replaced by restart().
       if (session.proc !== proc)
         return
+      this.stopProcessPoll(session)
       session.info.status = code === 0 ? 'exited' : 'error'
       session.info.exitCode = code
       session.info.pid = undefined
+      session.info.processName = undefined
       if (!sink.closed)
         sink.write(`\r\n\x1B[2m[process exited with code ${code}]\x1B[0m\r\n`)
       this.publish()
     })
 
+    this.startProcessPoll(session)
     this.publish()
   }
 
+  /**
+   * Poll the PTY foreground process name and reflect changes (e.g. `bash`
+   * → `vim` → `bash`) into the session info. The interval is `unref`'d so
+   * it never keeps the process alive on its own.
+   */
+  private startProcessPoll(session: ManagedSession): void {
+    const read = session.proc?.getProcessName
+    if (!read)
+      return
+    const poll = (): void => {
+      const name = session.proc?.getProcessName?.()
+      if (name && name !== session.info.processName) {
+        session.info.processName = name
+        this.publish()
+      }
+    }
+    poll()
+    session.pollTimer = setInterval(poll, PROCESS_POLL_INTERVAL)
+    session.pollTimer.unref?.()
+  }
+
+  private stopProcessPoll(session: ManagedSession): void {
+    if (session.pollTimer) {
+      clearInterval(session.pollTimer)
+      session.pollTimer = undefined
+    }
+  }
+
   write(id: string, data: string): void {
     const session = this.sessions.get(id)
     if (!session)
@@ -294,13 +329,24 @@ export class TerminalManager {
     session.proc?.kill()
   }
 
+  /** Set a custom display name. Pass an empty string to clear it. */
+  rename(id: string, title: string): void {
+    const session = this.sessions.get(id)
+    if (!session)
+      throw diagnostics.DP_TERMINALS_0001({ id })
+    const trimmed = title.trim()
+    session.info.customTitle = trimmed.length ? trimmed : undefined
+    this.publish()
+  }
+
   /** Restart the session's command in place, reusing the same stream id. */
   restart(id: string): TerminalSessionInfo {
     const session = this.sessions.get(id)
     if (!session)
       throw diagnostics.DP_TERMINALS_0001({ id })
     const previous = session.proc
     session.proc = undefined
+    this.stopProcessPoll(session)
     previous?.kill()
     if (!session.sink.closed)
       session.sink.write('\r\n\x1B[2m[restarting…]\x1B[0m\r\n')
@@ -318,6 +364,7 @@ export class TerminalManager {
       throw diagnostics.DP_TERMINALS_0001({ id })
     const proc = session.proc
     session.proc = undefined
+    this.stopProcessPoll(session)
     proc?.kill()
     if (!session.sink.closed)
       session.sink.close()
@@ -328,6 +375,7 @@ export class TerminalManager {
   /** Tear everything down — used on server shutdown and in tests. */
   dispose(): void {
     for (const session of this.sessions.values()) {
+      this.stopProcessPoll(session)
       session.proc?.kill()
       if (!session.sink.closed)
         session.sink.close()