const fs = require('fs');
let code = fs.readFileSync('src/components/TerminalPanel.vue', 'utf8');

// The place where we can attach is right after viewportScroller is queried.
// Let's find viewportScroller assignment.

const attachCode = `
  viewportScroller = containerRef.value.querySelector(".xterm-viewport");
  if (viewportScroller) {
    // ---- [VIEWPORT DEBUG START] ----
    ['touchstart', 'touchmove', 'touchend', 'touchcancel'].forEach(type => {
      viewportScroller.addEventListener(type, (event) => {
        console.log(\`[Viewport Event] \${type}\`, {
          target: (event.target as Node)?.nodeName,
          eventPhase: event.eventPhase,
          cancelable: event.cancelable,
          defaultPrevented: event.defaultPrevented,
          touches: (event as TouchEvent).touches?.length
        });
      }, { capture: true, passive: false });
    });
    // ---- [VIEWPORT DEBUG END] ----
  }
`;

code = code.replace(/viewportScroller = containerRef\.value\.querySelector\("\.xterm-viewport"\);\n\s*if \(\!viewportScroller\) \{/m, attachCode + "\n  if (!viewportScroller) {");

fs.writeFileSync('src/components/TerminalPanel.vue', code);