@t8n/ui 1.0.0

package/test-app/titan/dev.js

@@ -0,0 +1,350 @@
+/**
+ * Dev.js
+ * Titan development server with hot reload
+ * RULE: This file shows ONLY clean error messages - no raw logs, no stack traces
+ */
+
+import chokidar from "chokidar";
+import { spawn, execSync } from "child_process";
+import path from "path";
+import { fileURLToPath } from "url";
+import fs from "fs";
+import { createRequire } from "module";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Premium colors
+const cyan = (t) => `\x1b[36m${t}\x1b[0m`;
+const green = (t) => `\x1b[32m${t}\x1b[0m`;
+const yellow = (t) => `\x1b[33m${t}\x1b[0m`;
+const red = (t) => `\x1b[31m${t}\x1b[0m`;
+const gray = (t) => `\x1b[90m${t}\x1b[0m`;
+const bold = (t) => `\x1b[1m${t}\x1b[0m`;
+
+function getTitanVersion() {
+    try {
+        const require = createRequire(import.meta.url);
+        const pkgPath = require.resolve("@ezetgalaxy/titan/package.json");
+        return JSON.parse(fs.readFileSync(pkgPath, "utf-8")).version;
+    } catch (e) {
+        try {
+            let cur = __dirname;
+            for (let i = 0; i < 5; i++) {
+                const pkgPath = path.join(cur, "package.json");
+                if (fs.existsSync(pkgPath)) {
+                    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+                    if (pkg.name === "@ezetgalaxy/titan") return pkg.version;
+                }
+                cur = path.join(cur, "..");
+            }
+        } catch (e2) { }
+
+        try {
+            const output = execSync("tit --version", { encoding: "utf-8" }).trim();
+            const match = output.match(/v(\d+\.\d+\.\d+)/);
+            if (match) return match[1];
+        } catch (e3) { }
+    }
+    return "0.1.0";
+}
+
+let serverProcess = null;
+let isKilling = false;
+let isFirstBoot = true;
+
+async function killServer() {
+    if (!serverProcess) return;
+
+    isKilling = true;
+    const pid = serverProcess.pid;
+    const killPromise = new Promise((resolve) => {
+        if (serverProcess.exitCode !== null) return resolve();
+        serverProcess.once("close", resolve);
+    });
+
+    if (process.platform === "win32") {
+        try {
+            execSync(`taskkill /pid ${pid} /f /t`, { stdio: 'ignore' });
+        } catch (e) {
+            // Ignore errors if process is already dead
+        }
+    } else {
+        serverProcess.kill();
+    }
+
+    try {
+        await killPromise;
+    } catch (e) { }
+    serverProcess = null;
+    isKilling = false;
+}
+
+const delay = (ms) => new Promise(res => setTimeout(res, ms));
+
+let spinnerTimer = null;
+const frames = ["⏣", "⟐", "⟡", "⟠", "⟡", "⟐"];
+let frameIdx = 0;
+
+function startSpinner(text) {
+    if (spinnerTimer) clearInterval(spinnerTimer);
+    process.stdout.write("\x1B[?25l"); // Hide cursor
+    spinnerTimer = setInterval(() => {
+        process.stdout.write(`\r  ${cyan(frames[frameIdx])} ${gray(text)}`);
+        frameIdx = (frameIdx + 1) % frames.length;
+    }, 80);
+}
+
+function stopSpinner(success = true, text = "") {
+    if (spinnerTimer) {
+        clearInterval(spinnerTimer);
+        spinnerTimer = null;
+    }
+    process.stdout.write("\r\x1B[K"); // Clear line
+    process.stdout.write("\x1B[?25h"); // Show cursor
+    if (text) {
+        if (success) {
+            console.log(`  ${green("✔")} ${green(text)}`);
+        } else {
+            console.log(`  ${red("✖")} ${red(text)}`);
+        }
+    }
+}
+
+async function startRustServer(retryCount = 0) {
+    const maxRetries = 3;
+    const waitTime = retryCount > 0 ? 500 : 200;
+
+    await killServer();
+    await delay(waitTime);
+
+    const serverPath = path.join(process.cwd(), "server");
+    const startTime = Date.now();
+
+    startSpinner("Stabilizing your app on its orbit...");
+
+    let isReady = false;
+    let stdoutBuffer = "";
+    let stderrBuffer = "";
+
+    const slowTimer = setTimeout(() => {
+        if (!isReady && !isKilling) {
+            startSpinner("Still stabilizing... (the first orbit takes longer)");
+        }
+    }, 15000);
+
+    serverProcess = spawn("cargo", ["run", "--quiet"], {
+        cwd: serverPath,
+        stdio: ["ignore", "pipe", "pipe"], // Capture stderr to detect port conflicts
+        env: { ...process.env, CARGO_INCREMENTAL: "1" }
+    });
+
+    serverProcess.on("error", (err) => {
+        stopSpinner(false, "Orbit stabilization failed");
+    });
+
+    serverProcess.stdout.on("data", (data) => {
+        const out = data.toString();
+
+        if (!isReady) {
+            stdoutBuffer += out;
+            if (stdoutBuffer.includes("Titan server running") || stdoutBuffer.includes("████████╗")) {
+                isReady = true;
+                clearTimeout(slowTimer);
+                stopSpinner(true, "Your app is now orbiting Titan Planet");
+
+                if (isFirstBoot) {
+                    process.stdout.write(stdoutBuffer);
+                    isFirstBoot = false;
+                } else {
+                    const lines = stdoutBuffer.split("\n");
+                    for (const line of lines) {
+                        const isBanner = line.includes("Titan server running") ||
+                            line.includes("████████╗") ||
+                            line.includes("╚══") ||
+                            line.includes("   ██║") ||
+                            line.includes("   ╚═╝");
+                        if (!isBanner && line.trim()) {
+                            process.stdout.write(line + "\n");
+                        }
+                    }
+                }
+                stdoutBuffer = "";
+            }
+        } else {
+            process.stdout.write(data);
+        }
+    });
+
+    // Monitor stderr for port binding errors
+    serverProcess.stderr.on("data", (data) => {
+        stderrBuffer += data.toString();
+    });
+
+    serverProcess.on("close", async (code) => {
+        clearTimeout(slowTimer);
+        if (isKilling) return;
+        const runTime = Date.now() - startTime;
+
+        if (code !== 0 && code !== null) {
+            // Check for port binding errors
+            const isPortError = stderrBuffer.includes("Address already in use") ||
+                stderrBuffer.includes("address in use") ||
+                stderrBuffer.includes("os error 10048") || // Windows
+                stderrBuffer.includes("EADDRINUSE") ||
+                stderrBuffer.includes("AddrInUse");
+
+            if (isPortError) {
+                stopSpinner(false, "Orbit stabilization failed");
+                console.log("");
+
+                console.log(red("⏣  Your application cannot enter this orbit"));
+                console.log(red("↳  Another application is already bound to this port."));
+                console.log("");
+
+                console.log(yellow("Recommended Actions:"));
+                console.log(yellow("  1.") + " Release the occupied orbit (stop the other service).");
+                console.log(yellow("  2.") + " Assign your application to a new orbit in " + cyan("app/app.js"));
+                console.log(yellow("     Example: ") + cyan('t.start(3001, "Titan Running!")'));
+                console.log("");
+
+                return;
+            }
+
+
+            stopSpinner(false, "Orbit stabilization failed");
+
+            // // Debug: Show stderr if it's not empty and not a port error
+            // if (stderrBuffer && stderrBuffer.trim()) {
+            //     console.log(gray("\n[Debug] Cargo stderr:"));
+            //     console.log(gray(stderrBuffer.substring(0, 500))); // Show first 500 chars
+            // }
+
+            if (runTime < 15000 && retryCount < maxRetries) {
+                await delay(2000);
+                await startRustServer(retryCount + 1);
+            } else if (retryCount >= maxRetries) {
+                console.log(gray("\n[Titan] Waiting for changes to retry..."));
+            }
+        }
+    });
+}
+
+/**
+ * Rebuild JS runtime
+ * RULE: Only show "✖ Runtime preparation failed" on error
+ * RULE: No raw logs, no stack traces, no console.error output
+ */
+async function rebuild() {
+    try {
+        // Execute app.js - pipe both stdout and stderr to capture and filter
+        const result = execSync("node app/app.js", {
+            encoding: "utf-8",
+            stdio: ["ignore", "pipe", "pipe"]
+        });
+
+        // If succeeded, just print stdout (usually empty unless successful logs)
+        if (result) process.stdout.write(result);
+    } catch (e) {
+        stopSpinner(false, "Runtime preparation failed");
+
+        // RULE: Search for the error box in the output and print ONLY that
+        // This removes Node.js version, stack traces, etc.
+        const output = (e.stdout || "") + (e.stderr || "");
+
+        // Find the box content - look for the start border (accounting for ANSI color)
+        // Match from the first ┌ up to the last ┘
+        const startIdx = output.indexOf('┌');
+        const endIdx = output.lastIndexOf('┘');
+
+        if (startIdx !== -1 && endIdx !== -1 && endIdx > startIdx) {
+            // Include potential ANSI codes before/after borders
+            let box = output.substring(startIdx - 5, endIdx + 1 + 5);
+            // Clean up to ensure we start/end at ANSI boundaries or borders
+            const realStart = box.indexOf('\x1b[31m┌');
+            const realEnd = box.lastIndexOf('┘\x1b[0m');
+
+            if (realStart !== -1 && realEnd !== -1) {
+                console.error("\n" + box.substring(realStart, realEnd + 5) + "\n");
+            } else {
+                // Fallback to simpler match
+                const simpleBox = output.substring(startIdx, endIdx + 1);
+                console.error("\n" + red(simpleBox) + "\n");
+            }
+        } else if (e.stderr && !e.stderr.includes("Node.js v")) {
+            console.error(red(e.stderr.trim()));
+        }
+
+        throw e;
+    }
+}
+
+async function startDev() {
+    const root = process.cwd();
+    const actionsDir = path.join(root, "app", "actions");
+    let hasRust = false;
+    if (fs.existsSync(actionsDir)) {
+        hasRust = fs.readdirSync(actionsDir).some(f => f.endsWith(".rs"));
+    }
+
+    const isTs = fs.existsSync(path.join(root, "tsconfig.json")) ||
+        fs.existsSync(path.join(root, "app", "app.ts"));
+
+    let mode = "";
+    if (hasRust) {
+        mode = isTs ? "Rust + TS Actions" : "Rust + JS Actions";
+    } else {
+        mode = isTs ? "TS Actions" : "JS Actions";
+    }
+    const version = getTitanVersion();
+
+    console.clear();
+    console.log("");
+    console.log(`  ${bold(cyan("⏣ Titan Planet"))}     ${gray("v" + version)}    ${yellow("[ Dev Mode ]")}`);
+    console.log("");
+    console.log(`  ${gray("Type:       ")} ${mode}`);
+    console.log(`  ${gray("Hot Reload: ")} ${green("Enabled")}`);
+
+    if (fs.existsSync(path.join(root, ".env"))) {
+        console.log(`  ${gray("Env:        ")} ${yellow("Loaded")}`);
+    }
+    console.log("");
+
+    try {
+        await rebuild();
+        await startRustServer();
+    } catch (e) {
+        console.log(gray("\n[Titan] Waiting for changes to retry..."));
+    }
+
+    const watcher = chokidar.watch(["app", ".env"], {
+        ignoreInitial: true,
+        awaitWriteFinish: { stabilityThreshold: 500, pollInterval: 100 }
+    });
+
+    let timer = null;
+    watcher.on("all", async (event, file) => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(async () => {
+            try {
+                await killServer();
+                await rebuild();
+                await startRustServer();
+            } catch (e) {
+                console.log(gray("\n[Titan] Waiting for changes to retry..."));
+            }
+        }, 300);
+    });
+}
+
+async function handleExit() {
+    stopSpinner();
+    console.log(gray("\n[Titan] Stopping server..."));
+    await killServer();
+    process.exit(0);
+}
+
+process.on("SIGINT", handleExit);
+process.on("SIGTERM", handleExit);
+
+startDev();

package/test-app/titan/error-box.js

@@ -0,0 +1,268 @@
+/**
+ * Error Box Renderer
+ * Renders errors in a Next.js-style red terminal box
+ */
+
+// Simple color function using ANSI escape codes
+const red = (text) => `\x1b[31m${text}\x1b[0m`;
+
+/**
+ * Wraps text to fit within a specified width
+ * @param {string} text - Text to wrap
+ * @param {number} maxWidth - Maximum width per line
+ * @returns {string[]} Array of wrapped lines
+ */
+
+function getTitanVersion() {
+    try {
+        const require = createRequire(import.meta.url);
+        const pkgPath = require.resolve("@ezetgalaxy/titan/package.json");
+        return JSON.parse(fs.readFileSync(pkgPath, "utf-8")).version;
+    } catch (e) {
+        try {
+            let cur = __dirname;
+            for (let i = 0; i < 5; i++) {
+                const pkgPath = path.join(cur, "package.json");
+                if (fs.existsSync(pkgPath)) {
+                    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+                    if (pkg.name === "@ezetgalaxy/titan") return pkg.version;
+                }
+                cur = path.join(cur, "..");
+            }
+        } catch (e2) { }
+
+        try {
+            const output = execSync("tit --version", { encoding: "utf-8" }).trim();
+            const match = output.match(/v(\d+\.\d+\.\d+)/);
+            if (match) return match[1];
+        } catch (e3) { }
+    }
+    return "0.1.0";
+}
+
+function wrapText(text, maxWidth) {
+    if (!text) return [''];
+
+    const lines = text.split('\n');
+    const wrapped = [];
+
+    for (const line of lines) {
+        if (line.length <= maxWidth) {
+            wrapped.push(line);
+            continue;
+        }
+
+        // Word wrap logic
+        const words = line.split(' ');
+        let currentLine = '';
+
+        for (const word of words) {
+            const testLine = currentLine ? `${currentLine} ${word}` : word;
+
+            if (testLine.length <= maxWidth) {
+                currentLine = testLine;
+            } else {
+                if (currentLine) {
+                    wrapped.push(currentLine);
+                }
+                // If single word is too long, force split it
+                if (word.length > maxWidth) {
+                    let remaining = word;
+                    while (remaining.length > maxWidth) {
+                        wrapped.push(remaining.substring(0, maxWidth));
+                        remaining = remaining.substring(maxWidth);
+                    }
+                    currentLine = remaining;
+                } else {
+                    currentLine = word;
+                }
+            }
+        }
+
+        if (currentLine) {
+            wrapped.push(currentLine);
+        }
+    }
+
+    return wrapped.length > 0 ? wrapped : [''];
+}
+
+/**
+ * Pads text to fit within box width
+ * @param {string} text - Text to pad
+ * @param {number} width - Target width
+ * @returns {string} Padded text
+ */
+function padLine(text, width) {
+    const padding = width - text.length;
+    return text + ' '.repeat(Math.max(0, padding));
+}
+
+/**
+ * Renders an error in a Next.js-style red box
+ * @param {Object} errorInfo - Error information
+ * @param {string} errorInfo.title - Error title (e.g., "Build Error")
+ * @param {string} errorInfo.file - File path where error occurred
+ * @param {string} errorInfo.message - Error message
+ * @param {string} [errorInfo.location] - Error location (e.g., "at hello.js:3:1")
+ * @param {number} [errorInfo.line] - Line number
+ * @param {number} [errorInfo.column] - Column number
+ * @param {string} [errorInfo.codeFrame] - Code frame showing error context
+ * @param {string} [errorInfo.suggestion] - Recommended fix
+ */
+/**
+ * Renders an error in a Next.js-style red box
+ * @param {Object} errorInfo - Error information
+ * @param {string} errorInfo.title - Error title (e.g., "Build Error")
+ * @param {string} errorInfo.file - File path where error occurred
+ * @param {string} errorInfo.message - Error message
+ * @param {string} [errorInfo.location] - Error location (e.g., "at hello.js:3:1")
+ * @param {number} [errorInfo.line] - Line number
+ * @param {number} [errorInfo.column] - Column number
+ * @param {string} [errorInfo.codeFrame] - Code frame showing error context
+ * @param {string} [errorInfo.suggestion] - Recommended fix
+ */
+export function renderErrorBox(errorInfo) {
+    const boxWidth = 72;
+    const contentWidth = boxWidth - 4; // Account for "│ " and " │"
+
+    const lines = [];
+
+    // Add title
+    if (errorInfo.title) {
+        lines.push(bold(errorInfo.title));
+    }
+
+    // Add file path
+    if (errorInfo.file) {
+        lines.push(errorInfo.file);
+    }
+
+    // Add message
+    if (errorInfo.message) {
+        lines.push('');
+        lines.push(...wrapText(errorInfo.message, contentWidth));
+    }
+
+    // Add location
+    if (errorInfo.location) {
+        lines.push(gray(errorInfo.location));
+    } else if (errorInfo.file && errorInfo.line !== undefined) {
+        const loc = `at ${errorInfo.file}:${errorInfo.line}${errorInfo.column !== undefined ? `:${errorInfo.column}` : ''}`;
+        lines.push(gray(loc));
+    }
+
+    // Add code frame if available
+    if (errorInfo.codeFrame) {
+        lines.push(''); // Empty line for separation
+        const frameLines = errorInfo.codeFrame.split('\n');
+        for (const frameLine of frameLines) {
+            lines.push(frameLine);
+        }
+    }
+
+    // Add suggestion if available
+    if (errorInfo.suggestion) {
+        lines.push(''); // Empty line for separation
+        lines.push(...wrapText('Recommended fix: ' + errorInfo.suggestion, contentWidth));
+    }
+
+    // Add Footer with Branding
+    lines.push('');
+    const version = getTitanVersion()
+    lines.push(gray(`⏣ Titan Planet      ${version}`));
+
+    // Build the box
+    const topBorder = '┌' + '─'.repeat(boxWidth - 2) + '┐';
+    const bottomBorder = '└' + '─'.repeat(boxWidth - 2) + '┘';
+
+   
+    const boxLines = [
+        red(topBorder),
+        ...lines.map(line => {
+            // Strip ANSI codes for padding calculation if any were added
+            const plainLine = line.replace(/\x1b\[\d+m/g, '');
+            const padding = ' '.repeat(Math.max(0, contentWidth - plainLine.length));
+            return red('│ ') + line + padding + red(' │');
+        }),
+        red(bottomBorder)
+    ];
+
+    return boxLines.join('\n');
+}
+
+// Internal formatting helpers
+function gray(t) { return `\x1b[90m${t}\x1b[0m`; }
+function bold(t) { return `\x1b[1m${t}\x1b[0m`; }
+
+/**
+ * Parses esbuild error and extracts relevant information
+ * @param {Object} error - esbuild error object
+ * @returns {Object} Parsed error information
+ */
+export function parseEsbuildError(error) {
+    const errorInfo = {
+        title: 'Build Error',
+        file: error.location?.file || 'unknown',
+        message: error.text || error.message || 'Unknown error',
+        line: error.location?.line,
+        column: error.location?.column,
+        location: null,
+        codeFrame: null,
+        suggestion: error.notes?.[0]?.text || null
+    };
+
+    // Format location
+    if (error.location) {
+        const { file, line, column } = error.location;
+        errorInfo.location = `at ${file}:${line}:${column}`;
+
+        // Format code frame if lineText is available
+        if (error.location.lineText) {
+            const lineText = error.location.lineText;
+            // Ensure column is at least 1 to prevent negative values
+            const col = Math.max(0, (column || 1) - 1);
+            const pointer = ' '.repeat(col) + '^';
+            errorInfo.codeFrame = `${line} | ${lineText}\n${' '.repeat(String(line).length)} | ${pointer}`;
+        }
+    }
+
+    return errorInfo;
+}
+
+/**
+ * Parses Node.js syntax error and extracts relevant information
+ * @param {Error} error - Node.js error object
+ * @param {string} [file] - File path (if known)
+ * @returns {Object} Parsed error information
+ */
+export function parseNodeError(error, file = null) {
+    const errorInfo = {
+        title: 'Syntax Error',
+        file: file || 'unknown',
+        message: error.message || 'Unknown error',
+        location: null,
+        suggestion: null
+    };
+
+    // Try to extract line and column from error message
+    const locationMatch = error.message.match(/\((\d+):(\d+)\)/) ||
+        error.stack?.match(/:(\d+):(\d+)/);
+
+    if (locationMatch) {
+        const line = parseInt(locationMatch[1]);
+        const column = parseInt(locationMatch[2]);
+        errorInfo.line = line;
+        errorInfo.column = column;
+        errorInfo.location = `at ${errorInfo.file}:${line}:${column}`;
+    }
+
+    // Extract suggestion from error message if available
+    if (error.message.includes('expected')) {
+        errorInfo.suggestion = 'Check for missing or misplaced syntax elements';
+    } else if (error.message.includes('Unexpected token')) {
+        errorInfo.suggestion = 'Remove or fix the unexpected token';
+    }
+
+    return errorInfo;
+}