xterm-input-panel 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # xterm-input-panel
 
+## 1.2.0
+
+### Minor Changes
+
+- Improve terminal interaction reliability, including InputPanel state persistence and ghostty virtual cursor behavior.
+
 ## 1.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-input-panel",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/input-method-tab.ts

@@ -10,7 +10,7 @@ import { iconSend } from './icons.js'
 export class InputMethodTab extends LitElement {
   static get properties() {
     return {
-      _inputValue: { state: true },
+      value: { type: String, attribute: false },
     }
   }
 
@@ -84,15 +84,26 @@ export class InputMethodTab extends LitElement {
     }
   `
 
-  declare _inputValue: string
+  declare value: string
 
   constructor() {
     super()
-    this._inputValue = ''
+    this.value = ''
+  }
+
+  private _emitInputChange() {
+    this.dispatchEvent(
+      new CustomEvent('input-panel:input-change', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    )
   }
 
   private _onInput(e: Event) {
-    this._inputValue = (e.target as HTMLTextAreaElement).value
+    this.value = (e.target as HTMLTextAreaElement).value
+    this._emitInputChange()
   }
 
   private _onKeyDown(e: KeyboardEvent) {
@@ -104,7 +115,7 @@ export class InputMethodTab extends LitElement {
   }
 
   private _send() {
-    const text = this._inputValue.trim()
+    const text = this.value.trim()
     if (!text) return
 
     // Dispatch to terminal
@@ -116,7 +127,8 @@ export class InputMethodTab extends LitElement {
       })
     )
 
-    this._inputValue = ''
+    this.value = ''
+    this._emitInputChange()
   }
 
   render() {
@@ -124,7 +136,7 @@ export class InputMethodTab extends LitElement {
       <div class="input-area">
         <textarea
           placeholder="Type command and press Ctrl+Enter to send..."
-          .value=${this._inputValue}
+          .value=${this.value}
           @input=${this._onInput}
           @keydown=${this._onKeyDown}
         ></textarea>

package/src/xterm-addon.stories.ts

@@ -17,10 +17,11 @@ function resetAddonState() {
 
   // Remove any <input-panel> elements leaked into body or containers
   document.querySelectorAll('input-panel').forEach((el) => el.remove())
+  localStorage.removeItem('xtermInputPanelState')
 }
 
 /** Create a real xterm Terminal + InputPanelAddon, mount into container */
-function setupTerminal(container: HTMLElement) {
+function setupTerminal(container: HTMLElement, opts?: { stateKey?: string }) {
   const terminal = new Terminal({
     cols: 80,
     rows: 10,
@@ -29,7 +30,7 @@ function setupTerminal(container: HTMLElement) {
   })
 
   const inputHandler = fn()
-  const addon = new InputPanelAddon({ onInput: inputHandler })
+  const addon = new InputPanelAddon({ onInput: inputHandler, stateKey: opts?.stateKey })
   terminal.loadAddon(addon)
   terminal.open(container)
 
@@ -108,8 +109,8 @@ export const SingletonMigration: StoryObj = {
     resetAddonState()
     const containerA = canvasElement.querySelector('#term-a') as HTMLElement
     const containerB = canvasElement.querySelector('#term-b') as HTMLElement
-    const { addon: addonA } = setupTerminal(containerA)
-    const { addon: addonB } = setupTerminal(containerB)
+    const { addon: addonA } = setupTerminal(containerA, { stateKey: 'story-term-a' })
+    const { addon: addonB } = setupTerminal(containerB, { stateKey: 'story-term-b' })
 
     // Open A — panel should be inside container A
     addonA.open()
@@ -382,8 +383,8 @@ export const SharedMountTarget: StoryObj = {
     // Set shared mount target BEFORE creating terminals
     InputPanelAddon.mountTarget = wrapper
 
-    const { addon: addonA } = setupTerminal(containerA)
-    const { addon: addonB } = setupTerminal(containerB)
+    const { addon: addonA } = setupTerminal(containerA, { stateKey: 'switch-term-a' })
+    const { addon: addonB } = setupTerminal(containerB, { stateKey: 'switch-term-b' })
 
     // Open A — panel should be in the shared wrapper, NOT container A
     addonA.open()
@@ -411,3 +412,146 @@ export const SharedMountTarget: StoryObj = {
     InputPanelAddon.mountTarget = null
   },
 }
+
+/**
+ * Persist panel runtime state between close/open cycles:
+ * - active tab (input mode)
+ * - input draft text in Input tab
+ */
+export const PersistPanelSessionState: StoryObj = {
+  render: () => html`<div id="term-container" style="width:100%;height:100%;"></div>`,
+  play: async ({ canvasElement }) => {
+    resetAddonState()
+    const container = canvasElement.querySelector('#term-container') as HTMLElement
+    const { addon } = setupTerminal(container)
+
+    addon.open()
+    const panel = container.querySelector('input-panel') as HTMLElement & {
+      activeTab: string
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await panel.updateComplete
+
+    const inputTab = panel.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await inputTab.updateComplete
+    const textarea = inputTab.shadowRoot.querySelector('textarea') as HTMLTextAreaElement
+    textarea.value = 'echo keep'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await inputTab.updateComplete
+
+    const keysBtn = panel.shadowRoot.querySelectorAll('.tab-btn')[1] as HTMLButtonElement
+    keysBtn.click()
+    await panel.updateComplete
+    expect(panel.activeTab).toBe('keys')
+
+    addon.close()
+    addon.open()
+
+    const reopened = container.querySelector('input-panel') as HTMLElement & {
+      activeTab: string
+      updateComplete: Promise<void>
+    }
+    await reopened.updateComplete
+    expect(reopened.activeTab).toBe('keys')
+
+    const reopenedInputTab = reopened.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await reopenedInputTab.updateComplete
+    const reopenedTextarea = reopenedInputTab.shadowRoot.querySelector(
+      'textarea'
+    ) as HTMLTextAreaElement
+    expect(reopenedTextarea.value).toBe('echo keep')
+
+    addon.close()
+  },
+}
+
+/**
+ * Persist session state across terminal-instance switching:
+ * A(input draft + keys) -> B -> A should restore A state.
+ */
+export const PersistStateAcrossTerminalSwitch: StoryObj = {
+  render: () => html`
+    <div style="display:flex;gap:8px;height:100%;">
+      <div id="term-a" style="flex:1;"></div>
+      <div id="term-b" style="flex:1;"></div>
+    </div>
+  `,
+  play: async ({ canvasElement }) => {
+    type PanelEl = HTMLElement & {
+      activeTab: string
+      updateComplete: Promise<void>
+    }
+
+    resetAddonState()
+    const containerA = canvasElement.querySelector('#term-a') as HTMLElement
+    const containerB = canvasElement.querySelector('#term-b') as HTMLElement
+    const { addon: addonA } = setupTerminal(containerA, { stateKey: 'switch-term-a' })
+    const { addon: addonB } = setupTerminal(containerB, { stateKey: 'switch-term-b' })
+
+    addonA.open()
+    let panelA = containerA.querySelector('input-panel') as PanelEl
+    expect(panelA).not.toBeNull()
+    await panelA.updateComplete
+
+    const inputTabA = panelA.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await inputTabA.updateComplete
+    const textareaA = inputTabA.shadowRoot.querySelector('textarea') as HTMLTextAreaElement
+    textareaA.value = 'echo keep-on-a'
+    textareaA.dispatchEvent(new Event('input', { bubbles: true }))
+    await inputTabA.updateComplete
+
+    const keysBtnA = panelA.shadowRoot!.querySelectorAll('.tab-btn')[1] as HTMLButtonElement
+    keysBtnA.click()
+    await panelA.updateComplete
+    expect(panelA.activeTab).toBe('keys')
+    const persistedRaw = localStorage.getItem('xtermInputPanelState')
+    expect(persistedRaw).not.toBeNull()
+    const persisted = JSON.parse(persistedRaw ?? '{}') as {
+      sessions?: Record<string, { activeTab?: string; inputDraft?: string }>
+    }
+    expect(persisted.sessions?.['switch-term-a']?.activeTab).toBe('keys')
+    expect(persisted.sessions?.['switch-term-a']?.inputDraft).toBe('echo keep-on-a')
+
+    addonB.syncFocusLifecycle()
+    const panelB = containerB.querySelector('input-panel') as PanelEl
+    expect(panelB).not.toBeNull()
+    await panelB.updateComplete
+    expect(panelB.activeTab).toBe('keys')
+    const inputTabB = panelB.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await inputTabB.updateComplete
+    const textareaB = inputTabB.shadowRoot.querySelector('textarea') as HTMLTextAreaElement
+    expect(textareaB.value).toBe('')
+
+    addonA.syncFocusLifecycle()
+    panelA = containerA.querySelector('input-panel') as PanelEl
+    expect(panelA).not.toBeNull()
+    await panelA.updateComplete
+    expect(panelA.activeTab).toBe('keys')
+
+    const reopenedInputTabA = panelA.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await reopenedInputTabA.updateComplete
+    const reopenedTextareaA = reopenedInputTabA.shadowRoot.querySelector(
+      'textarea'
+    ) as HTMLTextAreaElement
+    expect(reopenedTextareaA.value).toBe('echo keep-on-a')
+
+    addonA.close()
+    addonB.close()
+  },
+}

package/src/xterm-addon.ts

@@ -1,12 +1,13 @@
 import type { ITerminalAddon, Terminal } from '@xterm/xterm'
 import { iconKeyboard, iconMousePointer2 } from './icons.js'
-import type { InputPanelLayout } from './input-panel.js'
+import type { InputPanelLayout, InputPanelTab } from './input-panel.js'
 import type { HostPlatform } from './platform.js'
 
 const SENSITIVITY = 1.5
 const EDGE_SCROLL_ZONE = 30
 const EDGE_SCROLL_INTERVAL = 50
 const EDGE_SCROLL_OVERSHOOT = 15
+const STATE_STORAGE_KEY = 'xtermInputPanelState'
 
 function isTouchDevice(): boolean {
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0
@@ -25,6 +26,84 @@ export interface InputPanelSettingsPayload {
   historyLimit: number
 }
 
+interface InputPanelSessionState {
+  activeTab: InputPanelTab
+  inputDraft: string
+}
+
+interface InputMethodTabElement extends HTMLElement {
+  value: string
+}
+
+interface InputPanelElement extends HTMLElement {
+  activeTab: InputPanelTab
+}
+
+function isInputPanelTab(value: unknown): value is InputPanelTab {
+  return (
+    value === 'input' ||
+    value === 'keys' ||
+    value === 'shortcuts' ||
+    value === 'trackpad' ||
+    value === 'settings'
+  )
+}
+
+interface InputPanelStateStore {
+  lastActiveTab?: InputPanelTab
+  sessions?: Record<string, Partial<InputPanelSessionState>>
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function loadPanelStateStore(): InputPanelStateStore {
+  try {
+    const raw = localStorage.getItem(STATE_STORAGE_KEY)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw)
+    return isRecord(parsed) ? (parsed as InputPanelStateStore) : {}
+  } catch {
+    return {}
+  }
+}
+
+function savePanelStateStore(store: InputPanelStateStore): void {
+  try {
+    localStorage.setItem(STATE_STORAGE_KEY, JSON.stringify(store))
+  } catch {
+    /* ignore */
+  }
+}
+
+function loadPanelSessionState(sessionKey: string): InputPanelSessionState | null {
+  const store = loadPanelStateStore()
+  const sessions = store.sessions
+  if (!sessions) return null
+  const rawState = sessions[sessionKey]
+  if (!isRecord(rawState)) return null
+
+  const state: InputPanelSessionState = {
+    activeTab: 'input',
+    inputDraft: '',
+  }
+
+  if (isInputPanelTab(rawState.activeTab)) {
+    state.activeTab = rawState.activeTab
+  }
+  if (typeof rawState.inputDraft === 'string') {
+    state.inputDraft = rawState.inputDraft
+  }
+
+  return state
+}
+
+function loadLastActiveTab(): InputPanelTab {
+  const store = loadPanelStateStore()
+  return isInputPanelTab(store.lastActiveTab) ? store.lastActiveTab : 'input'
+}
+
 /**
  * xterm.js addon that provides full InputPanel integration.
  *
@@ -56,6 +135,7 @@ export interface InputPanelSettingsPayload {
  * ```
  */
 export class InputPanelAddon implements ITerminalAddon {
+  private static _lastActiveTab: InputPanelTab = 'input'
   // ── Singleton state ──
 
   /** The currently active (open) addon instance, or null. */
@@ -301,6 +381,9 @@ export class InputPanelAddon implements ITerminalAddon {
   private _onSettingsChange: ((settings: InputPanelSettingsPayload) => Promise<void> | void) | null
   private _platform: HostPlatform
   private _defaultLayout: InputPanelLayout
+  private _panelSessionState: InputPanelSessionState
+  private _stateKey: string
+  private _hasOwnPersistedState: boolean
 
   constructor(opts?: {
     onInput?: (data: string) => void
@@ -312,6 +395,7 @@ export class InputPanelAddon implements ITerminalAddon {
     onSettingsChange?: (settings: InputPanelSettingsPayload) => Promise<void> | void
     platform?: HostPlatform
     defaultLayout?: InputPanelLayout
+    stateKey?: string
   }) {
     this._onInput = opts?.onInput ?? (() => {})
     this._onOpenCb = opts?.onOpen ?? null
@@ -322,6 +406,19 @@ export class InputPanelAddon implements ITerminalAddon {
     this._onSettingsChange = opts?.onSettingsChange ?? null
     this._platform = opts?.platform ?? 'common'
     this._defaultLayout = opts?.defaultLayout ?? 'floating'
+    this._stateKey = opts?.stateKey?.trim() ? opts.stateKey : 'default'
+    this._hasOwnPersistedState = false
+    this._panelSessionState = {
+      activeTab: 'input',
+      inputDraft: '',
+    }
+    const persistedState = loadPanelSessionState(this._stateKey)
+    if (persistedState) {
+      this._panelSessionState = persistedState
+      this._hasOwnPersistedState = true
+    } else {
+      this._panelSessionState.activeTab = InputPanelAddon._lastActiveTab || loadLastActiveTab()
+    }
   }
 
   get isOpen(): boolean {
@@ -348,12 +445,52 @@ export class InputPanelAddon implements ITerminalAddon {
     this._defaultLayout = layout
   }
 
+  private _persistPanelState(): void {
+    InputPanelAddon._lastActiveTab = this._panelSessionState.activeTab
+    const store = loadPanelStateStore()
+    const nextSessions = {
+      ...(store.sessions ?? {}),
+      [this._stateKey]: {
+        activeTab: this._panelSessionState.activeTab,
+        inputDraft: this._panelSessionState.inputDraft,
+      },
+    }
+    savePanelStateStore({
+      ...store,
+      lastActiveTab: this._panelSessionState.activeTab,
+      sessions: nextSessions,
+    })
+  }
+
   /**
    * Resolve the mount target for this addon instance.
    * Priority: static mountTarget > terminal container > document.body
    */
   private _getMountTarget(): HTMLElement {
-    return InputPanelAddon._mountTarget ?? this._terminal?.element?.parentElement ?? document.body
+    return InputPanelAddon._mountTarget ?? this._getTerminalHostElement() ?? document.body
+  }
+
+  /**
+   * Resolve the visual host element used for overlay UI (cursor/panel).
+   *
+   * xterm renderer usually exposes `.xterm` as `terminal.element`, while
+   * ghostty may expose the mount container itself.
+   */
+  private _getTerminalHostElement(): HTMLElement | null {
+    const termElement = this._terminal?.element
+    if (!(termElement instanceof HTMLElement)) return null
+    if (termElement.classList.contains('xterm')) {
+      return termElement.parentElement instanceof HTMLElement ? termElement.parentElement : termElement
+    }
+    return termElement
+  }
+
+  private _detectTerminalEngine(): 'xterm' | 'non-xterm' {
+    const termElement = this._terminal?.element
+    if (termElement instanceof HTMLElement && termElement.classList.contains('xterm')) {
+      return 'xterm'
+    }
+    return 'non-xterm'
   }
 
   activate(terminal: Terminal): void {
@@ -431,13 +568,21 @@ export class InputPanelAddon implements ITerminalAddon {
 
     this._suppressKeyboard()
 
+    if (!this._hasOwnPersistedState) {
+      const fallbackActiveTab = loadLastActiveTab()
+      this._panelSessionState.activeTab = fallbackActiveTab
+      InputPanelAddon._lastActiveTab = fallbackActiveTab
+    }
+
     // Build the element tree
-    const panel = document.createElement('input-panel')
+    const panel = document.createElement('input-panel') as InputPanelElement
     panel.setAttribute('layout', this._defaultLayout)
     this._applyPanelThemeBindings(panel)
+    panel.activeTab = this._panelSessionState.activeTab
 
-    const inputTab = document.createElement('input-method-tab')
+    const inputTab = document.createElement('input-method-tab') as InputMethodTabElement
     inputTab.setAttribute('slot', 'input')
+    inputTab.value = this._panelSessionState.inputDraft
     panel.appendChild(inputTab)
 
     const keysTab = document.createElement('virtual-keyboard-tab')
@@ -498,8 +643,21 @@ export class InputPanelAddon implements ITerminalAddon {
         }
       }
     })
+    this._on(inputTab, 'input-panel:input-change', (e) => {
+      const value = (e as CustomEvent).detail?.value
+      if (typeof value === 'string') {
+        this._panelSessionState.inputDraft = value
+        this._hasOwnPersistedState = true
+        this._persistPanelState()
+      }
+    })
     this._on(panel, 'input-panel:tab-change', (e) => {
       const tab = (e as CustomEvent).detail?.tab
+      if (isInputPanelTab(tab)) {
+        this._panelSessionState.activeTab = tab
+        this._hasOwnPersistedState = true
+        this._persistPanelState()
+      }
       if (tab === 'trackpad') this._showCursor()
       else this._hideCursor()
     })
@@ -590,7 +748,7 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   private _applyPanelThemeBindings(panel: HTMLElement): void {
-    const scope = this._terminal?.element?.parentElement ?? this._getMountTarget()
+    const scope = this._getTerminalHostElement() ?? this._getMountTarget()
     const style = getComputedStyle(scope)
 
     const background = this._readThemeVar(
@@ -667,6 +825,27 @@ export class InputPanelAddon implements ITerminalAddon {
     this._isOpen ? this.close() : this.open()
   }
 
+  /**
+   * Sync addon singleton state when host marks this terminal as active.
+   *
+   * Lifecycle:
+   * 1) Always refresh `_lastFocused` so FAB targets the current terminal.
+   * 2) If another terminal owns an open panel, migrate panel ownership here.
+   * 3) If this panel is already open, keep terminal focus in sync.
+   */
+  syncFocusLifecycle(): void {
+    InputPanelAddon._lastFocused = this
+
+    if (InputPanelAddon._active && InputPanelAddon._active !== this) {
+      this.open()
+      return
+    }
+
+    if (this._isOpen) {
+      this._focusTerminal()
+    }
+  }
+
   // ── Terminal focus ──
 
   private _focusTerminal(): void {
@@ -681,10 +860,13 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Cursor overlay ──
 
   private _createCursor(): void {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return
 
     const el = document.createElement('div')
+    el.setAttribute('data-input-panel-cursor', 'virtual-mouse')
+    el.setAttribute('data-terminal-engine', this._detectTerminalEngine())
+    el.setAttribute('aria-hidden', 'true')
     el.style.cssText =
       'position:absolute;z-index:10;pointer-events:none;opacity:0;transition:opacity 0.15s;color:#fff;'
     const pointer = iconMousePointer2(20)
@@ -707,7 +889,7 @@ export class InputPanelAddon implements ITerminalAddon {
   private _showCursor(): void {
     if (!this._cursorEl) this._createCursor()
     if (this._cursorEl) {
-      const container = this._terminal?.element?.parentElement
+      const container = this._getTerminalHostElement()
       if (container) {
         const rect = container.getBoundingClientRect()
         this._cursorPos = { x: rect.width / 2, y: rect.height / 2 }
@@ -722,7 +904,7 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   private _moveCursor(dx: number, dy: number): void {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return
     const rect = container.getBoundingClientRect()
     this._cursorPos.x = Math.max(0, Math.min(rect.width, this._cursorPos.x + dx * SENSITIVITY))
@@ -733,7 +915,7 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Mouse event dispatch ──
 
   private _getClientCoords(): { clientX: number; clientY: number } | null {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return null
     const rect = container.getBoundingClientRect()
     return {
@@ -743,7 +925,7 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   private _resolveTarget(clientX: number, clientY: number): Element {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return document.body
     const el = document.elementFromPoint(clientX, clientY)
     if (el && container.contains(el)) return el
@@ -814,7 +996,7 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Edge scroll (during drag selection) ──
 
   private _updateEdgeScroll(): void {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container || !this._isDragging) {
       this._stopEdgeScroll()
       return
@@ -829,7 +1011,7 @@ export class InputPanelAddon implements ITerminalAddon {
 
     this._stopEdgeScroll()
     this._edgeScrollTimer = setInterval(() => {
-      const container = this._terminal?.element?.parentElement
+      const container = this._getTerminalHostElement()
       if (!container || !this._isDragging) {
         this._stopEdgeScroll()
         return
@@ -914,7 +1096,7 @@ export class InputPanelAddon implements ITerminalAddon {
       button.style.border = '1px solid transparent'
       button.style.borderRadius = '4px'
       button.style.background = 'transparent'
-      button.style.color = 'var(--muted-foreground, #888)'
+      button.style.color = 'var(--foreground, #fff)'
       button.style.fontFamily = 'inherit'
       button.style.fontSize = '12px'
       button.style.textAlign = 'left'