feat: move the terminal fully into the ssh-terminal plugin (B9)

plugins/ssh-terminal/src/frontend/local-terminal/LocalTerminal.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FitAddon } from "@xterm/addon-fit";
+import { ClipboardAddon } from "@xterm/addon-clipboard";
+import { useXTerm } from "react-xtermjs";
+import { toast } from "sonner";
+import { getMacLineNavigationSequence } from "../lib/mac-line-navigation";
+import {
+  handleTerminalClipboardKeyEvent,
+  createTerminalContextMenuHandler,
+} from "../terminal/terminal-clipboard";
+import {
+  useAppTheme as useTheme,
+  resolveTermixThemeColors,
+  DEFAULT_TERMINAL_CONFIG,
+  TERMINAL_FONTS,
+  ensureTerminalFontsLoaded,
+  RobustClipboardProvider,
+  copyToClipboard,
+  readFromClipboard,
+} from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+
+export function LocalTerminal({
+  instanceId,
+  isVisible,
+}: {
+  instanceId: string;
+  isVisible: boolean;
+}) {
+  const { t } = useTranslation();
+  // Read via a ref inside the session-lifecycle effect below so a language
+  // change (which gives react-i18next a new `t` identity) doesn't tear down
+  // the running local shell and spawn a new session.
+  const tRef = useRef(t);
+  tRef.current = t;
+  const { theme: appTheme } = useTheme();
+  const { instance: terminal, ref: xtermRef } = useXTerm();
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const sessionIdRef = useRef<string | null>(null);
+  const [isWindows, setIsWindows] = useState(false);
+  const [shell, setShell] = useState<"default" | "wsl">("default");
+
+  useEffect(() => {
+    window.electronAPI?.getPlatform().then((platform) => {
+      setIsWindows(platform === "win32");
+    });
+  }, []);
+
+  const fit = useCallback(() => {
+    const fitAddon = fitAddonRef.current;
+    const sessionId = sessionIdRef.current;
+    if (!terminal || !fitAddon) return;
+    fitAddon.fit();
+    if (sessionId) {
+      window.electronAPI.resizeLocalTerminal(
+        sessionId,
+        terminal.cols,
+        terminal.rows,
+      );
+    }
+  }, [terminal]);
+
+  useEffect(() => {
+    if (!terminal) return;
+    const colors = resolveTermixThemeColors("termix", appTheme);
+    const font = TERMINAL_FONTS.find(
+      (item) => item.value === DEFAULT_TERMINAL_CONFIG.fontFamily,
+    );
+    ensureTerminalFontsLoaded(font?.value ?? TERMINAL_FONTS[0].value);
+    terminal.options.theme = colors;
+    terminal.options.fontFamily = font?.fallback ?? TERMINAL_FONTS[0].fallback;
+    terminal.options.fontSize = DEFAULT_TERMINAL_CONFIG.fontSize;
+  }, [appTheme, terminal]);
+
+  useEffect(() => {
+    if (!terminal || !window.electronAPI?.isElectron) return;
+    const fitAddon = new FitAddon();
+    const clipboardProvider = new RobustClipboardProvider();
+    const clipboardAddon = new ClipboardAddon(undefined, clipboardProvider);
+    fitAddonRef.current = fitAddon;
+    terminal.loadAddon(fitAddon);
+    terminal.loadAddon(clipboardAddon);
+    fitAddon.fit();
+
+    async function writeTextToClipboard(text: string): Promise<boolean> {
+      const ok = await copyToClipboard(text);
+      if (!ok) toast.error(tRef.current("terminal.clipboardWriteFailed"));
+      return ok;
+    }
+
+    async function readTextFromClipboard(): Promise<string> {
+      const text = await readFromClipboard();
+      if (!text) toast.error(tRef.current("terminal.clipboardReadFailed"));
+      return text;
+    }
+
+    const clipboardActions = { writeTextToClipboard, readTextFromClipboard };
+
+    terminal.attachCustomKeyEventHandler((e: KeyboardEvent): boolean => {
+      if (e.type !== "keydown") return true;
+      const sequence = getMacLineNavigationSequence(e);
+      if (sequence) {
+        e.preventDefault();
+        e.stopPropagation();
+        terminal.input(sequence, true);
+        return false;
+      }
+      // No native "paste" event listener here (unlike the SSH terminal), so
+      // plain Ctrl/Cmd+V reads the clipboard explicitly rather than relying
+      // on the browser's own paste event.
+      return handleTerminalClipboardKeyEvent(e, terminal, clipboardActions, {
+        plainPasteMode: "explicit",
+      });
+    });
+
+    const handleContextMenu = createTerminalContextMenuHandler(
+      terminal,
+      clipboardActions,
+    );
+    const element = xtermRef.current;
+    element?.addEventListener("contextmenu", handleContextMenu);
+
+    let disposed = false;
+    let removeData = () => {};
+    let removeExit = () => {};
+    const input = terminal.onData((data) => {
+      const sessionId = sessionIdRef.current;
+      if (sessionId) window.electronAPI.writeLocalTerminal(sessionId, data);
+    });
+
+    window.electronAPI
+      .startLocalTerminal({ cols: terminal.cols, rows: terminal.rows, shell })
+      .then(({ sessionId }) => {
+        if (disposed) {
+          window.electronAPI.closeLocalTerminal(sessionId);
+          return;
+        }
+        sessionIdRef.current = sessionId;
+        removeData = window.electronAPI.onLocalTerminalData(sessionId, (data) =>
+          terminal.write(data),
+        );
+        removeExit = window.electronAPI.onLocalTerminalExit(
+          sessionId,
+          (exitCode) => {
+            sessionIdRef.current = null;
+            terminal.write(
+              `\r\n\x1b[33mProcess exited (${exitCode})\x1b[0m\r\n`,
+            );
+          },
+        );
+        return window.electronAPI.readyLocalTerminal(sessionId);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof Error ? error.message : String(error);
+        terminal.write(`\r\n\x1b[31m${message}\x1b[0m\r\n`);
+      });
+
+    const observer = new ResizeObserver(() => fit());
+    if (xtermRef.current) observer.observe(xtermRef.current);
+    return () => {
+      disposed = true;
+      terminal.attachCustomKeyEventHandler(() => true);
+      observer.disconnect();
+      input.dispose();
+      removeData();
+      removeExit();
+      element?.removeEventListener("contextmenu", handleContextMenu);
+      clipboardProvider.dispose();
+      const sessionId = sessionIdRef.current;
+      sessionIdRef.current = null;
+      if (sessionId) window.electronAPI.closeLocalTerminal(sessionId);
+      fitAddonRef.current = null;
+      fitAddon.dispose();
+    };
+  }, [fit, instanceId, shell, terminal, xtermRef]);
+
+  useEffect(() => {
+    if (isVisible) requestAnimationFrame(fit);
+  }, [fit, isVisible]);
+
+  return (
+    <div className="flex h-full w-full flex-col bg-background">
+      {isWindows && (
+        <div className="flex justify-end border-b border-border px-2 py-1">
+          <select
+            aria-label="Local terminal shell"
+            className="rounded border border-border bg-background px-2 py-1 text-xs text-foreground"
+            value={shell}
+            onChange={(event) =>
+              setShell(event.target.value === "wsl" ? "wsl" : "default")
+            }
+          >
+            <option value="default">PowerShell</option>
+            <option value="wsl">WSL</option>
+          </select>
+        </div>
+      )}
+      <div ref={xtermRef} className="min-h-0 flex-1 p-2" />
+    </div>
+  );
+}