gigaclaw 1.4.0

package/lib/code/terminal-view.js

@@ -0,0 +1,201 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { SearchAddon } from "@xterm/addon-search";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { SerializeAddon } from "@xterm/addon-serialize";
+import { ensureCodeWorkspaceContainer } from "./actions.js";
+import "@xterm/xterm/css/xterm.css";
+const STATUS = { connected: "#22c55e", connecting: "#eab308", disconnected: "#ef4444" };
+const RECONNECT_INTERVAL = 3e3;
+function TerminalView({ codeWorkspaceId }) {
+  const containerRef = useRef(null);
+  const termRef = useRef(null);
+  const fitAddonRef = useRef(null);
+  const wsRef = useRef(null);
+  const retryTimer = useRef(null);
+  const statusRef = useRef(null);
+  const [connected, setConnected] = useState(false);
+  const setStatus = useCallback((color) => {
+    if (statusRef.current) statusRef.current.style.backgroundColor = color;
+    setConnected(color === STATUS.connected);
+  }, []);
+  const sendResize = useCallback(() => {
+    const fit = fitAddonRef.current;
+    const ws = wsRef.current;
+    const term = termRef.current;
+    if (!fit || !term || !ws || ws.readyState !== WebSocket.OPEN) return;
+    fit.fit();
+    const payload = JSON.stringify({ columns: term.cols, rows: term.rows });
+    ws.send("1" + payload);
+  }, []);
+  const connect = useCallback(() => {
+    const term = termRef.current;
+    if (!term) return;
+    setStatus(STATUS.connecting);
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(`${protocol}//${window.location.host}/code/${codeWorkspaceId}/ws`);
+    wsRef.current = ws;
+    ws.binaryType = "arraybuffer";
+    ws.onopen = () => {
+      const handshake = JSON.stringify({ AuthToken: "", columns: term.cols, rows: term.rows });
+      ws.send(handshake);
+      setStatus(STATUS.connected);
+    };
+    ws.onmessage = (ev) => {
+      const data = typeof ev.data === "string" ? ev.data : new TextDecoder().decode(ev.data);
+      const type = data[0];
+      const payload = data.slice(1);
+      switch (type) {
+        case "0":
+          term.write(payload);
+          break;
+        case "1":
+          document.title = payload || "Code Workspace";
+          break;
+        case "2":
+          break;
+      }
+    };
+    ws.onclose = () => {
+      setStatus(STATUS.disconnected);
+      retryTimer.current = setTimeout(connect, RECONNECT_INTERVAL);
+    };
+    ws.onerror = () => {
+      ws.close();
+    };
+  }, [codeWorkspaceId, setStatus]);
+  useEffect(() => {
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 16,
+      fontFamily: '"Fira Code", "Cascadia Code", "JetBrains Mono", Menlo, monospace',
+      theme: {
+        background: "#1a1b26",
+        foreground: "#a9b1d6",
+        cursor: "#c0caf5",
+        selectionBackground: "#33467c"
+      },
+      allowProposedApi: true
+    });
+    const fitAddon = new FitAddon();
+    const searchAddon = new SearchAddon();
+    const webLinksAddon = new WebLinksAddon();
+    const serializeAddon = new SerializeAddon();
+    term.loadAddon(fitAddon);
+    term.loadAddon(searchAddon);
+    term.loadAddon(webLinksAddon);
+    term.loadAddon(serializeAddon);
+    termRef.current = term;
+    fitAddonRef.current = fitAddon;
+    term.open(containerRef.current);
+    const style = document.createElement("style");
+    style.textContent = ".xterm, .xterm-viewport { background-color: #1a1b26 !important; }";
+    containerRef.current.appendChild(style);
+    fitAddon.fit();
+    term.onData((data) => {
+      const ws = wsRef.current;
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send("0" + data);
+      }
+    });
+    let resizeTimeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(sendResize, 100);
+    };
+    window.addEventListener("resize", handleResize);
+    let cancelled = false;
+    (async () => {
+      try {
+        await ensureCodeWorkspaceContainer(codeWorkspaceId);
+      } catch {
+      }
+      if (!cancelled) connect();
+    })();
+    return () => {
+      cancelled = true;
+      clearTimeout(resizeTimeout);
+      clearTimeout(retryTimer.current);
+      window.removeEventListener("resize", handleResize);
+      if (wsRef.current) wsRef.current.close();
+      term.dispose();
+    };
+  }, [connect, sendResize, codeWorkspaceId]);
+  const handleReconnect = async () => {
+    clearTimeout(retryTimer.current);
+    if (wsRef.current) wsRef.current.close();
+    try {
+      await ensureCodeWorkspaceContainer(codeWorkspaceId);
+    } catch {
+    }
+    connect();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "mx-4", style: { height: "100%", borderRadius: 6, overflow: "hidden" } }),
+      !connected && /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        background: "rgba(255,255,255,0.9)",
+        color: "#000",
+        padding: "12px 24px",
+        borderRadius: 8,
+        fontSize: 14,
+        fontWeight: 500,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        zIndex: 10,
+        textAlign: "center",
+        maxWidth: 320
+      }, children: "Loading..." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flexShrink: 0,
+          height: 36,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0 16px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsxs("button", { onClick: handleReconnect, style: { ...btnStyle, display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: statusRef,
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: STATUS.connecting
+                }
+              }
+            ),
+            "Reconnect"
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+const btnStyle = {
+  background: "transparent",
+  border: "1px solid #d1d5db",
+  color: "inherit",
+  padding: "4px 10px",
+  borderRadius: 4,
+  cursor: "pointer",
+  fontSize: 12,
+  fontFamily: "inherit"
+};
+export {
+  TerminalView as default
+};

package/lib/code/terminal-view.jsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { SearchAddon } from '@xterm/addon-search';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { SerializeAddon } from '@xterm/addon-serialize';
+import { ensureCodeWorkspaceContainer } from './actions.js';
+import '@xterm/xterm/css/xterm.css';
+
+const STATUS = { connected: '#22c55e', connecting: '#eab308', disconnected: '#ef4444' };
+const RECONNECT_INTERVAL = 3000;
+
+export default function TerminalView({ codeWorkspaceId }) {
+  const containerRef = useRef(null);
+  const termRef = useRef(null);
+  const fitAddonRef = useRef(null);
+  const wsRef = useRef(null);
+  const retryTimer = useRef(null);
+  const statusRef = useRef(null);
+  const [connected, setConnected] = useState(false);
+
+  const setStatus = useCallback((color) => {
+    if (statusRef.current) statusRef.current.style.backgroundColor = color;
+    setConnected(color === STATUS.connected);
+  }, []);
+
+  const sendResize = useCallback(() => {
+    const fit = fitAddonRef.current;
+    const ws = wsRef.current;
+    const term = termRef.current;
+    if (!fit || !term || !ws || ws.readyState !== WebSocket.OPEN) return;
+    fit.fit();
+    const payload = JSON.stringify({ columns: term.cols, rows: term.rows });
+    ws.send('1' + payload);
+  }, []);
+
+  const connect = useCallback(() => {
+    const term = termRef.current;
+    if (!term) return;
+
+    setStatus(STATUS.connecting);
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}/code/${codeWorkspaceId}/ws`);
+    wsRef.current = ws;
+
+    ws.binaryType = 'arraybuffer';
+
+    ws.onopen = () => {
+      const handshake = JSON.stringify({ AuthToken: '', columns: term.cols, rows: term.rows });
+      ws.send(handshake);
+      setStatus(STATUS.connected);
+    };
+
+    ws.onmessage = (ev) => {
+      const data = typeof ev.data === 'string' ? ev.data : new TextDecoder().decode(ev.data);
+      const type = data[0];
+      const payload = data.slice(1);
+
+      switch (type) {
+        case '0':
+          term.write(payload);
+          break;
+        case '1':
+          document.title = payload || 'Code Workspace';
+          break;
+        case '2':
+          break;
+      }
+    };
+
+    ws.onclose = () => {
+      setStatus(STATUS.disconnected);
+      retryTimer.current = setTimeout(connect, RECONNECT_INTERVAL);
+    };
+
+    ws.onerror = () => {
+      ws.close();
+    };
+  }, [codeWorkspaceId, setStatus]);
+
+  useEffect(() => {
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 16,
+      fontFamily: '"Fira Code", "Cascadia Code", "JetBrains Mono", Menlo, monospace',
+      theme: {
+        background: '#1a1b26',
+        foreground: '#a9b1d6',
+        cursor: '#c0caf5',
+        selectionBackground: '#33467c',
+      },
+      allowProposedApi: true,
+    });
+
+    const fitAddon = new FitAddon();
+    const searchAddon = new SearchAddon();
+    const webLinksAddon = new WebLinksAddon();
+    const serializeAddon = new SerializeAddon();
+
+    term.loadAddon(fitAddon);
+    term.loadAddon(searchAddon);
+    term.loadAddon(webLinksAddon);
+    term.loadAddon(serializeAddon);
+
+    termRef.current = term;
+    fitAddonRef.current = fitAddon;
+
+    term.open(containerRef.current);
+
+    const style = document.createElement('style');
+    style.textContent = '.xterm, .xterm-viewport { background-color: #1a1b26 !important; }';
+    containerRef.current.appendChild(style);
+
+    fitAddon.fit();
+
+    term.onData((data) => {
+      const ws = wsRef.current;
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send('0' + data);
+      }
+    });
+
+    let resizeTimeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(sendResize, 100);
+    };
+    window.addEventListener('resize', handleResize);
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        await ensureCodeWorkspaceContainer(codeWorkspaceId);
+      } catch {}
+      if (!cancelled) connect();
+    })();
+
+    return () => {
+      cancelled = true;
+      clearTimeout(resizeTimeout);
+      clearTimeout(retryTimer.current);
+      window.removeEventListener('resize', handleResize);
+      if (wsRef.current) wsRef.current.close();
+      term.dispose();
+    };
+  }, [connect, sendResize, codeWorkspaceId]);
+
+  const handleReconnect = async () => {
+    clearTimeout(retryTimer.current);
+    if (wsRef.current) wsRef.current.close();
+    try { await ensureCodeWorkspaceContainer(codeWorkspaceId); } catch {}
+    connect();
+  };
+
+  return (
+    <>
+      <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
+        <div ref={containerRef} className="mx-4" style={{ height: '100%', borderRadius: 6, overflow: 'hidden' }} />
+        {!connected && (
+          <div style={{
+            position: 'absolute',
+            top: '50%', left: '50%',
+            transform: 'translate(-50%, -50%)',
+            background: 'rgba(255,255,255,0.9)',
+            color: '#000',
+            padding: '12px 24px',
+            borderRadius: 8,
+            fontSize: 14,
+            fontWeight: 500,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+            zIndex: 10,
+            textAlign: 'center',
+            maxWidth: 320,
+          }}>
+            Loading...
+          </div>
+        )}
+      </div>
+
+      {/* Toolbar */}
+      <div
+        style={{
+          flexShrink: 0,
+          height: 36,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 16px',
+        }}
+      >
+        <div />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <button onClick={handleReconnect} style={{ ...btnStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
+            <div
+              ref={statusRef}
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                backgroundColor: STATUS.connecting,
+              }}
+            />
+            Reconnect
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const btnStyle = {
+  background: 'transparent',
+  border: '1px solid #d1d5db',
+  color: 'inherit',
+  padding: '4px 10px',
+  borderRadius: 4,
+  cursor: 'pointer',
+  fontSize: 12,
+  fontFamily: 'inherit',
+};

package/lib/code/ws-proxy.js

@@ -0,0 +1,80 @@
+import { WebSocketServer, WebSocket } from 'ws';
+import { decode } from 'next-auth/jwt';
+import { getCodeWorkspaceById } from '../db/code-workspaces.js';
+
+async function isAuthenticated(req) {
+  const cookies = req.headers.cookie || '';
+  const secureName = '__Secure-authjs.session-token';
+  const plainName = 'authjs.session-token';
+  const isSecure = cookies.includes(secureName);
+  const name = isSecure ? secureName : plainName;
+  const match = cookies.match(new RegExp(`(?:^|;\\s*)${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}=([^;]+)`));
+  if (!match) return false;
+
+  try {
+    const token = await decode({
+      token: match[1],
+      secret: process.env.AUTH_SECRET,
+      salt: name,
+    });
+    return !!token?.sub;
+  } catch {
+    return false;
+  }
+}
+
+export function attachCodeProxy(server) {
+  const wss = new WebSocketServer({ noServer: true, perMessageDeflate: false });
+
+  server.on('upgrade', async (req, socket, head) => {
+    const match = req.url.match(/^\/code\/([^/]+)\/ws$/);
+    if (!match) return;
+
+    if (!await isAuthenticated(req)) {
+      console.log('[ws-proxy] rejected: unauthenticated upgrade');
+      socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
+      socket.destroy();
+      return;
+    }
+
+    const codeWorkspaceId = match[1];
+    const codeWorkspace = getCodeWorkspaceById(codeWorkspaceId);
+    if (!codeWorkspace) {
+      console.log(`[ws-proxy] rejected: unknown workspace ${codeWorkspaceId}`);
+      socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
+      socket.destroy();
+      return;
+    }
+
+    const container = codeWorkspace.containerName;
+
+    wss.handleUpgrade(req, socket, head, (clientWs) => {
+      const backendWs = new WebSocket(`ws://${container}:7681/ws`, 'tty');
+
+      backendWs.on('open', () => {
+        console.log(`[ws-proxy] connected: ${container}`);
+      });
+
+      backendWs.on('message', (data, isBinary) => {
+        if (clientWs.readyState === WebSocket.OPEN) {
+          clientWs.send(data, { binary: isBinary });
+        }
+      });
+
+      clientWs.on('message', (data, isBinary) => {
+        if (backendWs.readyState === WebSocket.OPEN) {
+          backendWs.send(data, { binary: isBinary });
+        }
+      });
+
+      backendWs.on('error', (err) => {
+        console.error(`[ws-proxy] backend error: ${err.message}`);
+        clientWs.close();
+      });
+
+      backendWs.on('close', () => clientWs.close());
+      clientWs.on('error', () => backendWs.close());
+      clientWs.on('close', () => backendWs.close());
+    });
+  });
+}