neural-loom 0.1.1

package/src/app/components/SshWizard.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface SshConfig {
+  host: string;
+  port: number;
+  username: string;
+  privateKeyPath: string;
+}
+
+interface SshWizardProps {
+  onClose: () => void;
+  onConfirmLaunch: () => void;
+}
+
+export default function SshWizard({ onClose, onConfirmLaunch }: SshWizardProps) {
+  const [config, setConfig] = useState<SshConfig>({
+    host: "",
+    port: 22,
+    username: "",
+    privateKeyPath: "",
+  });
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isTesting, setIsTesting] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  // Load saved credentials on mount
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const res = await fetch("/api/context/ssh");
+        if (res.ok) {
+          const data = await res.json();
+          if (data.success && data.config) {
+            setConfig({
+              host: data.config.host || "",
+              port: data.config.port || 22,
+              username: data.config.username || "",
+              privateKeyPath: data.config.privateKeyPath || "",
+            });
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load SSH configuration:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadConfig();
+  }, []);
+
+  const handleTestConnection = async () => {
+    if (!config.host || !config.username) {
+      setTestResult({ success: false, message: "Host and Username are required to test connection." });
+      return;
+    }
+
+    setIsTesting(true);
+    setTestResult(null);
+
+    try {
+      const res = await fetch("/api/context/ssh", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          test: true,
+          ...config,
+        }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setTestResult({
+          success: data.success,
+          message: data.message || (data.success ? "Connection successful!" : "Connection failed."),
+        });
+      } else {
+        const data = await res.json();
+        setTestResult({
+          success: false,
+          message: data.error || "Failed to reach testing endpoint.",
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      setTestResult({
+        success: false,
+        message: "Network error occurred while testing connection.",
+      });
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  const handleSaveAndLaunch = async () => {
+    if (!config.host || !config.username) {
+      setTestResult({ success: false, message: "Host and Username are required to save." });
+      return;
+    }
+
+    setIsSaving(true);
+    setTestResult(null);
+
+    try {
+      const res = await fetch("/api/context/ssh", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          test: false,
+          ...config,
+        }),
+      });
+
+      if (res.ok) {
+        setIsSaving(false);
+        onConfirmLaunch();
+      } else {
+        const data = await res.json();
+        setTestResult({
+          success: false,
+          message: data.error || "Failed to save settings.",
+        });
+        setIsSaving(false);
+      }
+    } catch (err) {
+      console.error(err);
+      setTestResult({
+        success: false,
+        message: "Failed to connect to NeuralLoom save endpoint.",
+      });
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div style={modalOverlayStyle}>
+        <div style={modalContainerStyle}>
+          <div style={{ textAlign: "center", padding: "2rem" }}>
+            <span style={{ color: "var(--muted)" }}>Loading SSH Configuration...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={modalOverlayStyle}>
+      <div style={modalContainerStyle}>
+        {/* Header */}
+        <div style={headerStyle}>
+          <h3 style={{ fontSize: "1.1rem", fontWeight: 700, margin: 0, display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            🌐 SSH Connection Wizard
+          </h3>
+          <button onClick={onClose} style={closeButtonStyle} aria-label="Close wizard">✖</button>
+        </div>
+
+        {/* Form Body */}
+        <div style={bodyStyle}>
+          <p style={{ fontSize: "0.825rem", color: "var(--muted)", marginBottom: "1.25rem", lineHeight: 1.4 }}>
+            Configure the remote VM connection. When you click <strong>Save & Launch</strong>, NeuralLoom will write to <code>ssh.json</code> and spawn Claude Code on the target host.
+          </p>
+
+          <div style={formGroupStyle}>
+            <label style={labelStyle}>Host IP or Domain Name</label>
+            <input
+              type="text"
+              value={config.host}
+              onChange={(e) => setConfig({ ...config, host: e.target.value })}
+              placeholder="e.g. 192.168.1.50 or host.remote.com"
+              style={inputStyle}
+            />
+          </div>
+
+          <div style={{ display: "flex", gap: "1rem" }}>
+            <div style={{ ...formGroupStyle, flex: 2 }}>
+              <label style={labelStyle}>Username</label>
+              <input
+                type="text"
+                value={config.username}
+                onChange={(e) => setConfig({ ...config, username: e.target.value })}
+                placeholder="e.g. ubuntu, root, or dave"
+                style={inputStyle}
+              />
+            </div>
+            <div style={{ ...formGroupStyle, flex: 1 }}>
+              <label style={labelStyle}>Port</label>
+              <input
+                type="number"
+                value={config.port}
+                onChange={(e) => setConfig({ ...config, port: parseInt(e.target.value, 10) || 22 })}
+                placeholder="22"
+                style={inputStyle}
+              />
+            </div>
+          </div>
+
+          <div style={formGroupStyle}>
+            <label style={labelStyle}>Private Key File Path (Optional)</label>
+            <input
+              type="text"
+              value={config.privateKeyPath}
+              onChange={(e) => setConfig({ ...config, privateKeyPath: e.target.value })}
+              placeholder="e.g. C:\Users\Dave\.ssh\id_rsa"
+              style={inputStyle}
+            />
+            <span style={{ fontSize: "0.7rem", color: "var(--muted)", marginTop: "0.25rem" }}>
+              Leave blank if using the default system SSH key agent.
+            </span>
+          </div>
+
+          {/* Test connection progress / alert */}
+          {isTesting && (
+            <div style={{ ...alertBoxStyle, borderColor: "var(--border)", color: "var(--muted)" }}>
+              <span className="pulseDot" style={{ marginRight: "0.5rem", display: "inline-block" }}></span>
+              Connecting and testing SSH tunnel... (ConnectTimeout=3s)
+            </div>
+          )}
+
+          {testResult && (
+            <div
+              style={{
+                ...alertBoxStyle,
+                borderColor: testResult.success ? "var(--success)" : "var(--danger)",
+                color: testResult.success ? "var(--success)" : "var(--danger)",
+                backgroundColor: testResult.success ? "rgba(16, 185, 129, 0.05)" : "rgba(239, 68, 68, 0.05)",
+              }}
+            >
+              {testResult.success ? "✓ " : "✗ "}
+              {testResult.message}
+            </div>
+          )}
+        </div>
+
+        {/* Footer Actions */}
+        <div style={footerStyle}>
+          <button onClick={onClose} style={secondaryButtonStyle} disabled={isSaving || isTesting}>
+            Cancel
+          </button>
+          <button onClick={handleTestConnection} style={secondaryButtonStyle} disabled={isSaving || isTesting}>
+            {isTesting ? "Testing..." : "Test Connection"}
+          </button>
+          <button
+            onClick={handleSaveAndLaunch}
+            style={primaryButtonStyle}
+            disabled={isSaving || isTesting || !config.host || !config.username}
+          >
+            {isSaving ? "Saving..." : "Save & Launch Session"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Styling definitions to keep dependencies clear and avoid style bleed
+const modalOverlayStyle: React.CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(5, 7, 10, 0.8)",
+  backdropFilter: "blur(8px)",
+  zIndex: 1000,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  animation: "fadeIn 0.2s ease-out",
+};
+
+const modalContainerStyle: React.CSSProperties = {
+  width: "90%",
+  maxWidth: "500px",
+  backgroundColor: "var(--card)",
+  border: "1px solid var(--border-focus)",
+  borderRadius: "12px",
+  boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5)",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+};
+
+const headerStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "1rem 1.25rem",
+  borderBottom: "1px solid var(--border)",
+  background: "hsla(var(--border-hsl), 0.2)",
+};
+
+const closeButtonStyle: React.CSSProperties = {
+  background: "none",
+  border: "none",
+  color: "var(--muted)",
+  fontSize: "0.9rem",
+  cursor: "pointer",
+  padding: "0.25rem",
+};
+
+const bodyStyle: React.CSSProperties = {
+  padding: "1.25rem",
+  display: "flex",
+  flexDirection: "column",
+};
+
+const formGroupStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  marginBottom: "1rem",
+};
+
+const labelStyle: React.CSSProperties = {
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color: "var(--foreground)",
+  marginBottom: "0.375rem",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+};
+
+const inputStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "0.5rem 0.75rem",
+  backgroundColor: "#080c14",
+  border: "1px solid var(--border)",
+  borderRadius: "6px",
+  color: "var(--foreground)",
+  fontFamily: "var(--font-mono), monospace",
+  fontSize: "0.825rem",
+  outline: "none",
+  transition: "border-color 0.15s ease",
+};
+
+const alertBoxStyle: React.CSSProperties = {
+  marginTop: "0.75rem",
+  padding: "0.75rem",
+  borderRadius: "6px",
+  border: "1px solid",
+  fontSize: "0.8rem",
+  lineHeight: 1.4,
+  wordBreak: "break-word",
+};
+
+const footerStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "0.75rem",
+  padding: "1rem 1.25rem",
+  borderTop: "1px solid var(--border)",
+  background: "hsla(var(--border-hsl), 0.2)",
+};
+
+const primaryButtonStyle: React.CSSProperties = {
+  padding: "0.5rem 1rem",
+  borderRadius: "6px",
+  border: "none",
+  background: "linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(0, 84%, 60%) 100%)",
+  color: "#fff",
+  fontSize: "0.8rem",
+  fontWeight: 600,
+  cursor: "pointer",
+};
+
+const secondaryButtonStyle: React.CSSProperties = {
+  padding: "0.5rem 1rem",
+  borderRadius: "6px",
+  border: "1px solid var(--border)",
+  backgroundColor: "transparent",
+  color: "var(--foreground)",
+  fontSize: "0.8rem",
+  fontWeight: 600,
+  cursor: "pointer",
+};

package/src/app/components/TerminalConsole.tsx

@@ -0,0 +1,228 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useEffect, useRef } from "react";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import "xterm/css/xterm.css";
+
+interface TerminalConsoleProps {
+  sessionId: string;
+  height?: string | number;
+}
+
+export default function TerminalConsole({ sessionId, height = "400px" }: TerminalConsoleProps) {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<Terminal | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (!terminalRef.current) return;
+
+    let isDisposed = false;
+
+    // Initialize xterm
+    const term = new Terminal({
+      cursorBlink: true,
+      fontFamily: "var(--font-mono), monospace",
+      fontSize: 13,
+      lineHeight: 1.4,
+      scrollback: 5000,
+      theme: {
+        background: "#05070a",
+        foreground: "#c9d1d9",
+        cursor: "#a855f7", // Purple matching primary theme
+        black: "#000000",
+        red: "#ff5555",
+        green: "#50fa7b",
+        yellow: "#f1fa8c",
+        blue: "#bd93f9",
+        magenta: "#ff79c6",
+        cyan: "#8be9fd",
+        white: "#ffffff",
+      },
+    });
+
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+
+    term.open(terminalRef.current);
+
+    // Monkeypatch to prevent crash during unmount / disposal
+    try {
+      const core = (term as any)._core;
+      if (core) {
+        // 1. Patch viewport._innerRefresh
+        const viewports = [
+          core.viewport,
+          core._viewport,
+          (term as any).viewport,
+          (term as any)._viewport
+        ].filter(Boolean);
+
+        for (const vp of viewports) {
+          const originalInnerRefresh = vp._innerRefresh;
+          if (originalInnerRefresh && !vp._innerRefresh.__patched) {
+            const patchedFn = function(this: any, ...args: any[]) {
+              try {
+                return originalInnerRefresh.apply(this, args);
+              } catch (err) {
+                console.warn("Suppressed xterm viewport refresh error during unmount:", err);
+              }
+            };
+            (patchedFn as any).__patched = true;
+            vp._innerRefresh = patchedFn;
+          }
+        }
+
+        // 2. Patch renderService.dimensions getter
+        const renderServices = [
+          core._renderService,
+          core.renderService,
+          (term as any)._renderService,
+          (term as any).renderService
+        ].filter(Boolean);
+
+        for (const rs of renderServices) {
+          if (rs && !rs.__dimensionsPatched) {
+            rs.__dimensionsPatched = true;
+            Object.defineProperty(rs, 'dimensions', {
+              get() {
+                try {
+                  if (this._renderer && this._renderer.value) {
+                    return this._renderer.value.dimensions;
+                  }
+                } catch {
+                  // Ignore
+                }
+                // Return a safe dummy fallback object
+                return {
+                  device: {
+                    cell: { width: 0, height: 0 },
+                    canvas: { width: 0, height: 0 }
+                  },
+                  css: {
+                    cell: { width: 0, height: 0 },
+                    canvas: { width: 0, height: 0 }
+                  }
+                };
+              },
+              configurable: true
+            });
+          }
+        }
+      }
+    } catch (e) {
+      console.warn("Failed to apply xterm monkeypatch:", e);
+    }
+    
+    // Fit the terminal to dimensions safely
+    const fitTimeout = setTimeout(() => {
+      if (isDisposed) return;
+      try {
+        if (terminalRef.current && terminalRef.current.clientWidth > 0 && terminalRef.current.clientHeight > 0) {
+          fitAddon.fit();
+        }
+      } catch (e) {
+        console.warn("Failed to fit terminal on mount", e);
+      }
+    }, 100);
+
+    xtermRef.current = term;
+
+    // Connect WebSocket client to gateway server on port 3001
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${window.location.hostname}:3001`;
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      if (isDisposed) return;
+      term.write("\r\n\x1b[1;36m[System] Console bridge connected to gateway WebSocket...\x1b[0m\r\n");
+      // Trigger session binding handshake
+      ws.send(JSON.stringify({ type: "handshake", sessionId }));
+    };
+
+    ws.onmessage = (event) => {
+      if (isDisposed) return;
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === "handshake-ack") {
+          term.clear();
+          if (msg.history) {
+            term.write(msg.history);
+          }
+        } else if (msg.type === "output") {
+          term.write(msg.data);
+        } else if (msg.type === "error") {
+          term.write(`\r\n\x1b[1;31m[System Error] ${msg.message}\x1b[0m\r\n`);
+        }
+      } catch {
+        // Fallback for raw stream chunks
+        term.write(event.data);
+      }
+    };
+
+    // User typing interaction: capture data and stream to WebSocket
+    term.onData((data) => {
+      if (isDisposed) return;
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "input", data }));
+      }
+    });
+
+    // Resize listener using ResizeObserver
+    const resizeObserver = new ResizeObserver(() => {
+      if (isDisposed) return;
+      try {
+        if (
+          terminalRef.current && 
+          terminalRef.current.isConnected && 
+          terminalRef.current.clientWidth > 0 && 
+          terminalRef.current.clientHeight > 0
+        ) {
+          fitAddon.fit();
+        }
+      } catch {
+        // Suppress layout errors
+      }
+    });
+    resizeObserver.observe(terminalRef.current);
+
+    return () => {
+      isDisposed = true;
+      clearTimeout(fitTimeout);
+      resizeObserver.disconnect();
+      ws.close();
+      try {
+        fitAddon.dispose();
+        term.dispose();
+      } catch (e) {
+        console.warn("Error disposing terminal:", e);
+      }
+    };
+  }, [sessionId]);
+
+  return (
+    <div 
+      style={{ 
+        width: "100%", 
+        height: height, 
+        backgroundColor: "#05070a", 
+        border: "1px solid var(--border)",
+        borderBottomLeftRadius: "12px",
+        borderBottomRightRadius: "12px",
+        overflow: "hidden"
+      }}
+    >
+      <div 
+        ref={terminalRef} 
+        style={{ 
+          width: "100%", 
+          height: "100%",
+          padding: "1rem"
+        }} 
+      />
+    </div>
+  );
+}

package/src/app/globals.css

@@ -0,0 +1,81 @@
+:root {
+  --background-hsl: 222, 24%, 7%;
+  --foreground-hsl: 210, 40%, 98%;
+  --card-hsl: 222, 24%, 10%;
+  --card-hover-hsl: 222, 24%, 13%;
+  --border-hsl: 222, 15%, 16%;
+  --border-focus-hsl: 262, 83%, 67%;
+  --primary-hsl: 262, 83%, 67%;
+  --primary-hover-hsl: 262, 83%, 62%;
+  --accent-hsl: 195, 100%, 50%;
+  --muted-hsl: 215, 20%, 65%;
+  --success-hsl: 142, 72%, 45%;
+  --warning-hsl: 38, 92%, 50%;
+  --danger-hsl: 0, 84%, 60%;
+
+  --background: hsl(var(--background-hsl));
+  --foreground: hsl(var(--foreground-hsl));
+  --card: hsl(var(--card-hsl));
+  --card-hover: hsl(var(--card-hover-hsl));
+  --border: hsl(var(--border-hsl));
+  --border-focus: hsl(var(--border-focus-hsl));
+  --primary: hsl(var(--primary-hsl));
+  --primary-hover: hsl(var(--primary-hover-hsl));
+  --accent: hsl(var(--accent-hsl));
+  --muted: hsl(var(--muted-hsl));
+  --success: hsl(var(--success-hsl));
+  --warning: hsl(var(--warning-hsl));
+  --danger: hsl(var(--danger-hsl));
+
+  --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
+  --font-mono: var(--font-geist-mono), monospace;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Micro-animations and utility styling */
+button,
+a.btn {
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card:hover {
+  border-color: var(--border-focus);
+  background-color: var(--card-hover);
+  transform: translateY(-2px);
+}