{% extends '_base.html' %} {% block html_head %} <link rel="stylesheet" href="/static/xterm.css?v={{ cache_bust_version }}"><style>
  @font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  #terminal-wrapper {
    border-radius: 0.25rem;
    overflow: hidden;
    background: #1a1a2e;
  }
  #terminal-container {
    height: calc(100vh - 112px);
    min-height: 300px;
    overflow: hidden;
    padding-left: 3px;
  }
  @media (min-width: 640px) {
    #terminal-container {
      height: calc(100vh - 180px);
    }
  }
  #terminal-container .xterm-viewport {
    overflow-y: hidden !important;
  }
  .terminal-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .terminal-fullscreen #terminal-container {
    height: 100vh !important;
    overflow: hidden !important;
  }
  .term-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .term-status-dot.connected { background: #22c55e; }
  .term-status-dot.disconnected { background: #ef4444; }
  .term-status-dot.connecting { background: #eab308; }
</style> {% endblock %} {% block content %} <div class="container mx-auto w-full pt-10 sm:pt-24 md:pt-28 lg:px-4" style="padding-bottom:4px" x-data="terminalPage"><div class="flex items-center justify-between px-1" style="padding:4px 4px 3px 4px"><h1 class="font-bold uppercase text-gray-600">{{locales.terminal_title}}</h1><div class="flex items-center space-x-1 sm:space-x-3"><span class="flex items-center space-x-1 text-sm text-gray-500"><span class="term-status-dot" :class="status"></span><span x-text="statusText" class="hidden sm:inline"></span></span><button @click="disconnect()" x-show="status === 'connected'" x-cloak class="rounded border border-red-300 px-2 sm:px-3 py-1 text-sm text-red-600 hover:bg-red-50 transition-colors" title="{{locales.terminal_disconnect}}"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg><span class="hidden sm:inline ml-1">{{locales.terminal_disconnect}}</span></button><button @click="reconnect()" class="rounded border border-gray-300 px-2 sm:px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 transition-colors" title="{{locales.terminal_reconnect}}"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg><span class="hidden sm:inline ml-1">{{locales.terminal_reconnect}}</span></button><button @click="fontSizeDown()" class="rounded border border-gray-300 px-2 py-1 text-sm font-bold text-gray-600 hover:bg-gray-200 transition-colors" title="Decrease font size">A-</button><button @click="fontSizeUp()" class="rounded border border-gray-300 px-2 py-1 text-sm font-bold text-gray-600 hover:bg-gray-200 transition-colors" title="Increase font size">A+</button><button @click="toggleFullscreen()" class="rounded border border-gray-300 px-2 py-1 text-sm text-gray-600 hover:bg-gray-200 transition-colors flex items-center" :title="isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'"><svg x-show="!isFullscreen" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5"/></svg><svg x-show="isFullscreen" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 4H4v5m0-5l5 5m6-5h5v5m0-5l-5 5M9 20H4v-5m0 5l5-5m6 5h5v-5m0 5l-5-5"/></svg></button></div></div><div class="mb-0 px-0"><div id="terminal-wrapper" class="rounded border shadow"><div id="terminal-container"></div></div></div><button x-show="isFullscreen" x-cloak @click="toggleFullscreen()" style="position:fixed;top:8px;right:8px;z-index:10000;background:rgba(255,255,255,0.85);color:#333;border:1px solid #999;border-radius:4px;padding:4px 12px;font-size:14px;cursor:pointer"> ✕ Exit </button></div> {% endblock %} {% block bottom %} <script src="/static/xterm.min.js?v={{ cache_bust_version }}"></script><script src="/static/xterm-addon-fit.min.js?v={{ cache_bust_version }}"></script><script src="/static/socket.io.js?v={{ cache_bust_version }}"></script><script>
document.addEventListener("alpine:init", () => {
  Alpine.store("app").set_page("terminal");

  Alpine.data("terminalPage", () => ({
    term: null,
    fitAddon: null,
    socket: null,
    sessionId: "default",
    status: "connecting",
    isFullscreen: false,
    _resizeTimeout: null,
    _connected: false,
    _inputBuffer: "",
    _inputFlushTimeout: null,

    get statusText() {
      if (this.status === "connected") return "{{locales.terminal_connected}}";
      if (this.status === "connecting") return "{{locales.terminal_connecting}}";
      return "{{locales.terminal_disconnected}}";
    },

    init() {
      this._setup();
    },

    _setup() {
      const container = document.getElementById("terminal-container");
      const fitAddon = new FitAddon.FitAddon();
      this.fitAddon = fitAddon;
      const savedSize = localStorage.getItem('terminal_font_size');
      const defaultSize = window.innerWidth < 640 ? 8 : 14;
      const fontSize = savedSize ? parseInt(savedSize) : defaultSize;

      this.term = new Terminal({
        cursorBlink: true,
        fontSize: fontSize,
        fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace",
        theme: {
          background: "#1a1a2e",
          foreground: "#e0e0e0",
          cursor: "#FDE021",
          selectionBackground: "rgba(253, 224, 33, 0.3)",
          black: "#1a1a2e",
          red: "#ff5555",
          green: "#50fa7b",
          yellow: "#f1fa8c",
          blue: "#6272a4",
          magenta: "#ff79c6",
          cyan: "#8be9fd",
          white: "#f8f8f2"
        },
        scrollback: 5000,
        convertEol: false
      });
      this.term.loadAddon(fitAddon);
      this.term.open(container);
      fitAddon.fit();
      this.term.focus();

      this.term.onData((data) => {
        if (this.socket && this.socket.connected) {
          this._inputBuffer += data;
          if (!this._inputFlushTimeout) {
            this._inputFlushTimeout = setTimeout(() => {
              if (this._inputBuffer && this.socket && this.socket.connected) {
                this.socket.emit("terminal_input", { session_id: this.sessionId, data: this._inputBuffer });
                this._inputBuffer = "";
              }
              this._inputFlushTimeout = null;
            }, 30);
          }
        }
      });

      this.term.onResize((size) => {
        if (this._connected && this.socket && this.socket.connected) {
          this.socket.emit("terminal_resize", { session_id: this.sessionId, cols: size.cols, rows: size.rows });
        }
      });

      window.addEventListener("resize", () => {
        clearTimeout(this._resizeTimeout);
        this._resizeTimeout = setTimeout(() => {
          try { this.fitAddon.fit(); } catch(e) {}
        }, 150);
      });

      // Now connect
      this._initSocket();
    },

    _initSocket() {
      this.status = "connecting";
      this._openCount = 0;
      this.socket = io({ transports: ["websocket"], upgrade: false });

      this.socket.on("connect", () => {
        this.status = "connected";
        this._connected = true;
        this._openCount++;
        if (this._openCount > 1) {
          // Reconnect: clear screen before replaying scrollback to avoid duplicates
          this.term.clear();
        }
        this.socket.emit("terminal_open", {
          session_id: this.sessionId,
          cols: this.term.cols,
          rows: this.term.rows
        });
      });

      this.socket.on("terminal_output", (msg) => {
        if (msg.data) {
          this.term.write(msg.data);
        }
      });

      this.socket.on("terminal_exit", () => {
        this.term.write("\r\n\x1b[31m[Session ended]\x1b[0m\r\n");
        this.status = "disconnected";
      });

      this.socket.on("disconnect", () => {
        this.status = "disconnected";
        this._connected = false;
      });
    },

    disconnect() {
      if (this.socket && this.socket.connected) {
        this.socket.emit("terminal_kill", { session_id: this.sessionId });
      }
      this.status = "disconnected";
      this._connected = false;
    },

    reconnect() {
      if (this.socket && this.socket.connected) {
        this.socket.emit("terminal_kill", { session_id: this.sessionId });
      }
      setTimeout(() => { window.location.reload(); }, 300);
    },

    fontSizeUp() {
      const size = Math.min(this.term.options.fontSize + 2, 32);
      this.term.options.fontSize = size;
      localStorage.setItem('terminal_font_size', size);
      try { this.fitAddon.fit(); } catch(e) {}
    },

    fontSizeDown() {
      const size = Math.max(this.term.options.fontSize - 2, 8);
      this.term.options.fontSize = size;
      localStorage.setItem('terminal_font_size', size);
      try { this.fitAddon.fit(); } catch(e) {}
    },

    toggleFullscreen() {
      const wrapper = document.getElementById("terminal-wrapper");
      this.isFullscreen = !this.isFullscreen;
      if (this.isFullscreen) {
        wrapper.classList.add("terminal-fullscreen");
      } else {
        wrapper.classList.remove("terminal-fullscreen");
      }
      setTimeout(() => {
        try { this.fitAddon.fit(); } catch(e) {}
        this.term.focus();
      }, 100);
    }
  }));
});
</script> {% endblock %}