xterm-input-panel 1.1.0 → 1.2.1

package/.storybook/vitest.setup.ts

@@ -1,6 +1,6 @@
-import { beforeAll } from 'vitest'
-import { setProjectAnnotations } from 'storybook/preview-api'
 import * as rendererAnnotations from '@storybook/web-components/entry-preview'
+import { setProjectAnnotations } from 'storybook/preview-api'
+import { beforeAll } from 'vitest'
 import * as previewAnnotations from './preview'
 
 const annotations = setProjectAnnotations([rendererAnnotations, previewAnnotations])

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # xterm-input-panel
 
+## 1.2.1
+
+### Patch Changes
+
+- fcfb701: Move terminal InputPanel entry from floating FAB to the terminal toolbar, harden InputPanel remount lifecycle recovery, and improve schema-driven workflow compatibility by removing proposal/tasks/design hard assumptions from dashboard metadata paths.
+
+  Also evolve `opsx-collab-pr-loop` into dedicated loop artifacts under `loop/*` (intake, research-plan, implementation, checkpoints) with apply tracking on `loop/checkpoints.md`.
+
+## 1.2.0
+
+### Minor Changes
+
+- Improve terminal interaction reliability, including InputPanel state persistence and ghostty virtual cursor behavior.
+
 ## 1.1.0
 
 ### Minor Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OpenSpecUI Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-input-panel",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
@@ -22,7 +22,7 @@
     "@storybook/web-components-vite": "^10.2.8",
     "@vitest/browser": "^4.0.18",
     "@vitest/browser-playwright": "^4.0.18",
-    "@xterm/xterm": "6.1.0-beta.152",
+    "@xterm/xterm": "6.1.0-beta.167",
     "playwright": "^1.58.2",
     "storybook": "^10.2.8",
     "typescript": "^5.7.2",
@@ -31,7 +31,7 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6007",
-    "test:browser": "vitest run --config vitest.storybook.config.ts",
+    "test:browser": "vitest run --retry 2 --config vitest.storybook.config.ts",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/input-method-tab.stories.ts

@@ -16,7 +16,9 @@ const meta: Meta = {
   tags: ['autodocs'],
   decorators: [
     (story) => html`
-      <div style="width: 400px; height: 250px; background: #1a1a1a; color: #fff; font-family: monospace;">
+      <div
+        style="width: 400px; height: 250px; background: #1a1a1a; color: #fff; font-family: monospace;"
+      >
         ${story()}
       </div>
     `,
@@ -56,7 +58,7 @@ export const SendInput: StoryObj = {
     sendBtn.click()
 
     // Wait for _send to complete
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     expect(sendHandler).toHaveBeenCalledTimes(1)
     const detail = (sendHandler.mock.calls[0] as unknown[])[0] as CustomEvent
@@ -85,13 +87,15 @@ export const CtrlEnterSend: StoryObj = {
     textarea.dispatchEvent(new Event('input', { bubbles: true }))
     await tab.updateComplete
 
-    textarea.dispatchEvent(new KeyboardEvent('keydown', {
-      key: 'Enter',
-      ctrlKey: true,
-      bubbles: true,
-    }))
+    textarea.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'Enter',
+        ctrlKey: true,
+        bubbles: true,
+      })
+    )
 
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     expect(sendHandler).toHaveBeenCalledTimes(1)
     const detail = (sendHandler.mock.calls[0] as unknown[])[0] as CustomEvent

package/src/input-method-tab.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit'
+import { LitElement, css, html } from 'lit'
 import { iconSend } from './icons.js'
 
 /**
@@ -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/input-panel.stories.ts

@@ -56,6 +56,20 @@ export const FloatingLayout: StoryObj = {
       <virtual-trackpad-tab slot="trackpad" floating></virtual-trackpad-tab>
     </input-panel>
   `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+    const dialog = panel.shadowRoot?.querySelector('.panel-dialog') as HTMLElement
+    expect(dialog).toBeTruthy()
+
+    const styles = getComputedStyle(dialog) as CSSStyleDeclaration & {
+      webkitBackdropFilter?: string
+    }
+    expect(styles.mixBlendMode).toBe('exclusion')
+    expect(
+      styles.backdropFilter.includes('blur(1px)') ||
+        styles.webkitBackdropFilter?.includes('blur(1px)')
+    ).toBe(true)
+  },
 }
 
 /**

package/src/input-panel.ts

@@ -200,19 +200,10 @@ export class InputPanel extends LitElement {
       position: relative;
     }
 
-    @keyframes breathing {
-      0%,
-      100% {
-        opacity: 0.5;
-      }
-      50% {
-        opacity: 0.05;
-      }
-    }
-
-    /* Fix 7: breathing animation on entire panel (including toolbar) */
     :host([layout='floating']) .panel-dialog {
-      animation: breathing 6s ease-in-out infinite;
+      mix-blend-mode: exclusion;
+      backdrop-filter: blur(1px);
+      -webkit-backdrop-filter: blur(1px);
     }
 
     .panel-dialog {

package/src/pixi-theme.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
-import { resolvePixiTheme, cssColorToHex, blendHex } from './pixi-theme.js'
+import { describe, expect, it } from 'vitest'
+import { blendHex, cssColorToHex, resolvePixiTheme } from './pixi-theme.js'
 
 describe('pixi-theme', () => {
   describe('resolvePixiTheme', () => {

package/src/platform.ts

@@ -3,9 +3,9 @@ export type PlatformMode = HostPlatform | 'auto'
 
 export function detectHostPlatform(): HostPlatform {
   const platformSource = (
-    (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform
-    ?? navigator.platform
-    ?? navigator.userAgent
+    (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform ??
+    navigator.platform ??
+    navigator.userAgent
   ).toLowerCase()
 
   if (platformSource.includes('mac')) return 'macos'