Fix Korean IME data being eaten on fast input and make composition view visible

xterm.js's CompositionHelper sends committed composed text via setTimeout(0)
after compositionend, so the data can arrive AFTER a new compositionstart for
the next character has already fired. The previous suppression logic checked
isComposing with a 20ms post-compositionend window, which was too narrow and
the wrong signal — late-arriving composed text from the previous character was
dropped, causing characters to silently disappear during fast Korean typing.

Track expected post-composition data with a pendingComposedData counter that
is incremented on compositionend and consumed on the next data event,
regardless of isComposing state. A 500ms safety timeout decays the counter if
the expected data never arrives (e.g. cancelled/empty composition).

Also override the xterm composition view styling (which has a known position
TODO and uses hardcoded black/white at z-index 1) so users can actually see
the in-progress IME text. Themed to terminal colors with a clear border and
bumped z-index above other helpers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: spike

frontend/app/view/term/term.scss

@@ -133,6 +133,24 @@
     .terminal {
         width: 100%;
 
+        // Make the xterm IME composition view actually visible. xterm.js renders this small
+        // box at the cursor position to show the in-progress IME text (e.g. Korean ㅎ → 하 → 한).
+        // The default styles are barely visible and z-index 1 lets it sit under other helpers.
+        // We theme it to match the terminal and bump z-index so the user can clearly see what
+        // they are composing.
+        .xterm-helpers {
+            z-index: 10;
+        }
+        .composition-view {
+            background: var(--main-bg-color, #000) !important;
+            color: var(--main-text-color, #fff) !important;
+            border: 1px solid var(--accent-color, #58c4dc);
+            border-radius: 2px;
+            padding: 0 3px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+            z-index: 20 !important;
+        }
+
         .xterm-viewport {
             &::-webkit-scrollbar {
                 width: 6px; /* this needs to match fitAddon.scrollbarWidth in termwrap.ts */

frontend/app/view/term/termwrap.ts

@@ -100,6 +100,11 @@ export class TermWrap {
     lastCompositionEnd: number = 0;
     lastComposedText: string = "";
     firstDataAfterCompositionSent: boolean = false;
+    // Counter of compositionend events whose committed text we still expect to receive via
+    // xterm.js's CompositionHelper setTimeout(0) callback. Decremented on first matching data
+    // event. Auto-decremented after a safety timeout if data never arrives (e.g. empty
+    // composition cancelled with Escape).
+    pendingComposedData: number = 0;
 
     // Paste deduplication
     // xterm.js paste() method triggers onData event, which can cause duplicate sends
@@ -313,6 +318,7 @@ export class TermWrap {
         this.lastComposedText = "";
         this.lastCompositionEnd = 0;
         this.firstDataAfterCompositionSent = false;
+        this.pendingComposedData = 0;
     }
 
     private handleCompositionStart = (e: CompositionEvent) => {
@@ -332,6 +338,21 @@ export class TermWrap {
         this.lastComposedText = e.data || "";
         this.lastCompositionEnd = Date.now();
         this.firstDataAfterCompositionSent = false;
+        // xterm.js's CompositionHelper schedules a setTimeout(0) after compositionend that
+        // reads the committed text from the textarea and dispatches it via onData. Track that
+        // we are expecting that data so handleTermData lets it through even if a new
+        // compositionstart for the next character has already fired.
+        if (e.data && e.data.length > 0) {
+            this.pendingComposedData++;
+            const expected = this.pendingComposedData;
+            setTimeout(() => {
+                // safety net: if the expected data never arrived, decay the counter so it
+                // does not stay elevated forever and allow normal data through wrongly.
+                if (this.pendingComposedData >= expected) {
+                    this.pendingComposedData--;
+                }
+            }, 500);
+        }
     };
 
     async initTerminal() {
@@ -436,13 +457,17 @@ export class TermWrap {
             return;
         }
 
-        // IME fix: suppress isComposing=true events unless they immediately follow
-        // a compositionend (within 20ms). This handles CapsLock input method switching
-        // where the composition buffer gets flushed as a spurious isComposing=true event
-        if (this.isComposing) {
+        // IME handling. xterm.js's CompositionHelper sends the committed composed text via a
+        // setTimeout(0) after compositionend, so the data may arrive AFTER a new
+        // compositionstart for the next character has already fired (isComposing=true again).
+        // We track expected post-composition data with pendingComposedData and let it through
+        // even when isComposing is true.
+        if (this.pendingComposedData > 0) {
+            this.pendingComposedData--;
+        } else if (this.isComposing) {
             const timeSinceCompositionEnd = Date.now() - this.lastCompositionEnd;
             if (timeSinceCompositionEnd > IMEDedupWindowMs) {
-                dlog("Suppressed IME data (composing, not near compositionend):", data);
+                dlog("Suppressed IME data (composing, no pending composed data):", data);
                 return;
             }
         }