Merge pull request #26 from chechojgb/terminal

style: cambios estilos terminal

Author: chechojgb

microservicio-ssh/index.js

@@ -30,7 +30,7 @@ wss.on("connection", (ws) => {
         }
 
         shellStream = stream;
-        ws.send(JSON.stringify({ output: "🟢 Sesión iniciada\n" }));
+        // ws.send(JSON.stringify({ output: "🟢 Sesión iniciada\n" }));
 
         stream.on("data", (data) => {
           ws.send(JSON.stringify({ output: data.toString() }));

package-lock.json

@@ -68,7 +68,9 @@
     "typescript": "^5.7.2",
     "vite": "^6.0",
     "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.8.0"
+    "xterm-addon-fit": "^0.8.0",
+    "xterm-addon-search": "^0.13.0",
+    "xterm-addon-web-links": "^0.9.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.9.5",

package.json

@@ -1,5 +1,4 @@
-// components/XTermSSH.jsx
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 import "xterm/css/xterm.css";
@@ -9,29 +8,40 @@ export default function XTermSSH() {
   const term = useRef(null);
   const fitAddon = useRef(new FitAddon());
   const socketRef = useRef(null);
+  const [showToast, setShowToast] = useState(false);
+
+  const getTheme = () => {
+    const isDark = document.documentElement.classList.contains("dark");
+    return {
+      background: isDark ? "#" : "#ffffff",
+      foreground: isDark ? "#00ff00" : "#000000",
+      cursor: isDark ? "#00ff00" : "#000000",
+      selection: isDark ? "rgba(255, 255, 255, 0.3)" : "rgba(0,0,0,0.3)",
+    };
+  };
+
+  const applyTheme = () => {
+    if (term.current) {
+      const theme = getTheme();
+      term.current.options.theme = theme;
+      term.current.refresh(0, term.current.rows - 1);
+    }
+  };
 
   useEffect(() => {
     term.current = new Terminal({
       cursorBlink: true,
       fontSize: 14,
       fontFamily: "monospace",
-      theme: {
-        background: "#1e1e1e",
-        foreground: "#00ff00",
-      },
+      theme: getTheme(),
     });
 
     term.current.loadAddon(fitAddon.current);
     term.current.open(terminalRef.current);
     fitAddon.current.fit();
 
-    // Conexión WebSocket
     socketRef.current = new WebSocket("ws://localhost:3001");
 
-    socketRef.current.onopen = () => {
-      term.current.write("🟢 Conectado al servidor\n");
-    };
-
     socketRef.current.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data.output) {
@@ -41,33 +51,59 @@ export default function XTermSSH() {
       }
     };
 
-    socketRef.current.onclose = () => {
-      term.current.write("\n🔌 Conexión cerrada");
-    };
-
     socketRef.current.onerror = (err) => {
       term.current.write(`\n❌ Error: ${err.message}`);
     };
 
-    // Captura de entrada del usuario
     term.current.onData((data) => {
       socketRef.current.send(JSON.stringify({ input: data }));
     });
 
-    // Resize terminal si la ventana cambia de tamaño
+    const observer = new MutationObserver(applyTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
     const handleResize = () => fitAddon.current.fit();
     window.addEventListener("resize", handleResize);
 
+    // ✅ Copiar automáticamente lo seleccionado (una sola vez)
+    let lastCopiedSelection = "";
+    term.current.onSelectionChange(() => {
+      const selection = term.current.getSelection();
+      if (selection && selection !== lastCopiedSelection) {
+        navigator.clipboard.writeText(selection).then(() => {
+          setShowToast(true);
+          setTimeout(() => setShowToast(false), 1500);
+        });
+        lastCopiedSelection = selection;
+      }
+    });
+
+    // ✅ Pegar con clic derecho
+    terminalRef.current.addEventListener("contextmenu", async (e) => {
+      e.preventDefault();
+      const text = await navigator.clipboard.readText();
+      if (text) term.current.paste(text);
+    });
+
     return () => {
       term.current.dispose();
       socketRef.current.close();
+      observer.disconnect();
       window.removeEventListener("resize", handleResize);
     };
   }, []);
 
   return (
-    <div className="h-screen bg-black">
+    <div className="relative w-full h-full">
       <div ref={terminalRef} className="w-full h-full" />
+      {showToast && (
+        <div className="absolute top-2 right-2 bg-green-600 text-white px-4 py-2 rounded shadow-lg text-sm animate-fade-in-out z-50">
+          Copiado al portapapeles
+        </div>
+      )}
     </div>
   );
 }

resources/js/components/terminal/XTermSSH.jsx

@@ -1,3 +1,24 @@
+// import { useEffect, useState } from 'react';
+
+// export default function useDarkMode() {
+//     const [darkMode, setDarkMode] = useState(() => {
+//         if (typeof window !== 'undefined') {
+//             const saved = localStorage.getItem('darkMode');
+//             if (saved !== null) return JSON.parse(saved);
+//             return window.matchMedia('(prefers-color-scheme: dark)').matches;
+//         }
+//         return false;
+//     });
+
+//     useEffect(() => {
+//         localStorage.setItem('darkMode', JSON.stringify(darkMode));
+//         document.documentElement.classList.toggle('dark', darkMode);
+//     }, [darkMode]);
+
+//     return [darkMode, setDarkMode];
+// }
+
+
 import { useEffect, useState } from 'react';
 
 export default function useDarkMode() {
@@ -13,6 +34,9 @@ export default function useDarkMode() {
     useEffect(() => {
         localStorage.setItem('darkMode', JSON.stringify(darkMode));
         document.documentElement.classList.toggle('dark', darkMode);
+
+        // ✅ Esta línea notifica a otros componentes (como XTerm) del cambio
+        window.dispatchEvent(new Event("storage"));
     }, [darkMode]);
 
     return [darkMode, setDarkMode];

resources/js/hooks/useDarkMode.jsx

@@ -17,7 +17,9 @@ export default function TableAgents() {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="terminal" />
-            <XTermSSH/>
+            <div className='p-8 space-y-8 w-full h-[calc(100vh-4rem)]'>
+                <XTermSSH/>
+            </div>
         </AppLayout>
     );
 }