Rename dom-terminal to terminal component

Renamed the DOM terminal component for cleaner naming:
- Renamed dom-terminal.ts to terminal.ts
- Renamed DomTerminal class to Terminal
- Renamed XTerm Terminal import to XtermTerminal to avoid conflicts
- Updated custom element from 'dom-terminal' to 'terminal'
- Updated CSS classes from dom-terminal-container to terminal-container
- Updated HTML test file to use new element name and CSS classes
- Updated import in test-terminals-entry.ts
- Fixed linting issues (removed unused variables)

The terminal component now has cleaner, more intuitive naming while
maintaining all existing functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/public/tests/dom-terminal-test.html

@@ -73,8 +73,8 @@
             overflow: hidden;
         }
 
-        /* Ensure the dom-terminal element takes full height of its container */
+        /* Ensure the terminal element takes full height of its container */
-        dom-terminal {
+        terminal {
             display: block;
             width: 100%;
             height: 100%;
@@ -102,12 +102,12 @@
     </header>
 
     <main>
-        <dom-terminal
+        <terminal
             id="main-terminal"
             cols="120"
             rows="40"
             show-controls="false">
-        </dom-terminal>
+        </terminal>
     </main>
 
     <!-- Load XTerm.js -->

web/src/client/components/terminal.ts

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { Terminal, IBufferLine, IBufferCell } from '@xterm/xterm';
+import { Terminal as XtermTerminal, IBufferLine, IBufferCell } from '@xterm/xterm';
 
-@customElement('dom-terminal')
+@customElement('terminal')
-export class DomTerminal extends LitElement {
+export class Terminal extends LitElement {
   // Disable shadow DOM for Tailwind compatibility and native text selection
   createRenderRoot() {
     return this as unknown as HTMLElement;
@@ -17,7 +17,7 @@ export class DomTerminal extends LitElement {
 
   private originalFontSize: number = 14;
 
-  @state() private terminal: Terminal | null = null;
+  @state() private terminal: XtermTerminal | null = null;
   @state() private viewportY = 0; // Current scroll position
   @state() private actualRows = 24; // Rows that fit in viewport
 
@@ -82,7 +82,7 @@ export class DomTerminal extends LitElement {
     try {
       this.requestUpdate();
 
-      this.container = this.querySelector('#dom-terminal-container') as HTMLElement;
+      this.container = this.querySelector('#terminal-container') as HTMLElement;
 
       if (!this.container) {
         throw new Error('Terminal container not found');
@@ -110,7 +110,7 @@ export class DomTerminal extends LitElement {
     try {
       console.log('Creating terminal for headless use...');
       // Create regular terminal but don't call .open() to make it headless
-      this.terminal = new Terminal({
+      this.terminal = new XtermTerminal({
         cursorBlink: false,
         fontSize: this.fontSize,
         fontFamily: 'Fira Code, ui-monospace, SFMono-Regular, monospace',
@@ -154,7 +154,8 @@ export class DomTerminal extends LitElement {
     measureEl.style.left = '0';
 
     // Use a mix of characters that represent typical terminal content
-    const testString = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
+    const testString =
+      'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
     const repeatCount = Math.ceil(this.cols / testString.length);
     measureEl.textContent = testString.repeat(repeatCount).substring(0, this.cols);
 
@@ -164,7 +165,6 @@ export class DomTerminal extends LitElement {
     const actualCharWidth = measureRect.width / this.cols;
     this.container!.removeChild(measureEl);
 
-    
     return actualCharWidth;
   }
 
@@ -198,7 +198,9 @@ export class DomTerminal extends LitElement {
         this.terminal.resize(this.cols, this.rows);
       }
 
-      console.log(`Horizontal fit: fontSize ${this.fontSize}px, ${this.cols}x${this.rows} in ${containerWidth}x${containerHeight}px`);
+      console.log(
+        `Horizontal fit: fontSize ${this.fontSize}px, ${this.cols}x${this.rows} in ${containerWidth}x${containerHeight}px`
+      );
     } else {
       // Normal mode: just calculate how many rows fit in the viewport
       const containerHeight = this.container.clientHeight;
@@ -275,7 +277,6 @@ export class DomTerminal extends LitElement {
 
       // Capture the pointer so we continue to receive events even if DOM rebuilds
       this.container!.setPointerCapture(e.pointerId);
-
     };
 
     const handlePointerMove = (e: PointerEvent) => {
@@ -301,13 +302,11 @@ export class DomTerminal extends LitElement {
       lastPointerTime = currentTime;
 
       // Accumulate pointer scroll delta for smooth scrolling with small movements
-      const prevAccumulator = this.touchScrollAccumulator;
       this.touchScrollAccumulator += deltaY;
 
       const lineHeight = this.fontSize * 1.2;
       const deltaLines = Math.trunc(this.touchScrollAccumulator / lineHeight);
 
-
       if (Math.abs(deltaLines) >= 1) {
         this.scrollViewport(deltaLines);
         // Subtract the scrolled amount, keep remainder for next pointer move
@@ -326,7 +325,6 @@ export class DomTerminal extends LitElement {
       // Release pointer capture
       this.container!.releasePointerCapture(e.pointerId);
 
-
       // Add momentum scrolling if needed (only after touch scrolling)
       if (isScrolling && Math.abs(velocity) > 0.5) {
         this.startMomentumScroll(velocity);
@@ -341,7 +339,6 @@ export class DomTerminal extends LitElement {
 
       // Release pointer capture
       this.container!.releasePointerCapture(e.pointerId);
-      
     };
 
     // Attach pointer events to the container (touch only)
@@ -565,7 +562,7 @@ export class DomTerminal extends LitElement {
           --terminal-color-15: #ffffff;
         }
 
-        .dom-terminal-container {
+        .terminal-container {
           color: #d4d4d4;
           font-family: 'Fira Code', ui-monospace, SFMono-Regular, monospace;
           font-size: ${this.fontSize}px;
@@ -613,7 +610,7 @@ export class DomTerminal extends LitElement {
           opacity: 0;
         }
       </style>
-      <div id="dom-terminal-container" class="dom-terminal-container w-full h-full"></div>
+      <div id="terminal-container" class="terminal-container w-full h-full"></div>
     `;
   }
 }

web/src/client/test-terminals-entry.ts

@@ -1,3 +1,3 @@
 // Entry point for test pages - includes both terminal implementations
 import './components/mobile-terminal.js';
-import './components/dom-terminal.js';
+import './components/terminal.js';