tree 3cee7b1035b037f34140856ec69346764b2f3968
parent 882b1d12f097997164523af4947954781ccfce09
author banksean <banksean@gmail.com> 1751502775 +0000
committer Sean McCullough <banksean@gmail.com> 1751513008 -0700

webui: convert sketch-terminal to SketchTailwindElement inheritance

Convert sketch-terminal component from LitElement to SketchTailwindElement inheritance
to disable shadow DOM and enable consistent Tailwind utility class usage across the
webui component library.

Inheritance Change:
- Replace LitElement with SketchTailwindElement as base class
- Remove CSS-in-JS static styles in favor of Tailwind utility classes
- Switch from shadow DOM to light DOM rendering for better Tailwind integration

CSS to Tailwind Conversion:
- Terminal view container: w-full bg-gray-100 rounded-lg overflow-hidden mb-5 shadow-md p-4
- Terminal container: w-full h-full overflow-hidden
- Maintain 70vh height using inline style for specific viewport requirement
- Remove static CSS definitions while preserving visual appearance

DOM Query Updates:
- Change renderRoot.querySelector to this.querySelector for light DOM compatibility
- Update CSS loading from shadow DOM injection to global document head injection
- Rename loadXtermlCSS to loadXtermCSS for consistency

Technical Implementation:
- Preserve all terminal functionality: xterm.js integration, SSE connections, resize handling
- Maintain event listeners for view mode changes and window resize events
- Keep terminal input queue processing and WebSocket communication intact
- Update xterm CSS loading to work with light DOM architecture

The conversion enables the terminal component to benefit from global Tailwind
styles while maintaining all existing terminal emulation functionality and
server communication features.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s853becde7eccb88ck