create-stylus-ide 1.0.0

package/cli.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+console.log('🚀 Starting Stylus IDE...');
+
+// Point to the frontend directory
+const frontendPath = path.join(__dirname, 'frontend');
+
+// Run 'npm run dev' inside the frontend folder
+// Note: For a production package, you might want to run 'npm run start' 
+// after building, but for "as is" source, 'dev' is safest.
+const child = spawn('npm', ['run', 'dev'], {
+  cwd: frontendPath,
+  stdio: 'inherit', // This pipes the output (logs) to the user's terminal
+  shell: true
+});
+
+child.on('error', (err) => {
+  console.error('Failed to start Stylus IDE:', err);
+});
+
+child.on('close', (code) => {
+  if (code !== 0) {
+    console.log(`Stylus IDE process exited with code ${code}`);
+  }
+});

package/frontend/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "cSpell.words": [
+        "cdylib",
+        "Chainlink",
+        "codegen",
+        "parseable",
+        "rustc"
+    ]
+}

package/frontend/app/api/chat/route.ts

@@ -0,0 +1,101 @@
+import { OpenAI } from "openai";
+
+export const runtime = "edge";
+export const maxDuration = 60;
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+const SYSTEM_PROMPT = `You are an expert Rust and Arbitrum Stylus smart contract developer. You help developers write, debug, and optimize Stylus contracts.
+
+Key knowledge:
+- Stylus uses Rust + stylus-sdk (currently v0.9.x)
+- Contracts use sol_storage! macro for storage
+- #[public] macro for external functions
+- alloy_primitives for types (U256, Address, etc.)
+- View functions (read-only) vs write functions (state changes)
+- WASM deployment with 24KB limit
+- Common patterns: ERC-20, Counter, Storage examples
+
+Response guidelines:
+- Provide concise, actionable code
+- Explain Stylus-specific patterns
+- Point out common mistakes
+- Suggest gas optimizations
+- Format code in markdown with \`\`\`rust blocks
+- Keep explanations brief but clear`;
+
+export async function POST(req: Request) {
+  try {
+    const { messages, context } = await req.json();
+
+    if (!process.env.OPENAI_API_KEY) {
+      return new Response(
+        JSON.stringify({ error: "OpenAI API key not configured" }),
+        { status: 500, headers: { "Content-Type": "application/json" } }
+      );
+    }
+
+    // Build messages with context
+    const contextMessage = context
+      ? {
+          role: "system" as const,
+          content: `Current context:\n${context}`,
+        }
+      : null;
+
+    const allMessages = [
+      { role: "system" as const, content: SYSTEM_PROMPT },
+      ...(contextMessage ? [contextMessage] : []),
+      ...messages,
+    ];
+
+    // 1. Create the completion with stream: true
+    const response = await openai.chat.completions.create({
+      model: "gpt-4o-mini",
+      messages: allMessages,
+      temperature: 0.7,
+      max_tokens: 2000,
+      stream: true,
+    });
+
+    // 2. Create a native ReadableStream to handle the response chunks
+    const stream = new ReadableStream({
+      async start(controller) {
+        const encoder = new TextEncoder();
+        try {
+          // Iterate over the async iterable provided by the OpenAI SDK
+          for await (const chunk of response) {
+            const content = chunk.choices[0]?.delta?.content || "";
+            if (content) {
+              // Encode string to Uint8Array and enqueue
+              controller.enqueue(encoder.encode(content));
+            }
+          }
+        } catch (err) {
+          controller.error(err);
+        } finally {
+          controller.close();
+        }
+      },
+    });
+
+    // 3. Return a standard Response with the stream
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/plain; charset=utf-8",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+  } catch (error) {
+    console.error("Chat API error:", error);
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "Chat failed",
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}

package/frontend/app/api/check-setup/route.ts

@@ -0,0 +1,93 @@
+import { exec } from "child_process";
+import { promisify } from "util";
+import { NextResponse } from "next/server";
+
+const execAsync = promisify(exec);
+
+interface SetupStatus {
+  rust: boolean;
+  cargo: boolean;
+  wasmTarget: boolean;
+  cargoStylus: boolean;
+  platform: "darwin" | "linux" | "win32" | "other";
+  rustVersion?: string;
+  needsUpdate?: boolean;
+}
+
+async function checkCommand(command: string): Promise<boolean> {
+  try {
+    await execAsync(command, { timeout: 5000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function getRustVersion(): Promise<{
+  version: string;
+  major: number;
+  minor: number;
+} | null> {
+  try {
+    const { stdout } = await execAsync("rustc --version", { timeout: 5000 });
+    const match = stdout.match(/rustc (\d+)\.(\d+)\.(\d+)/);
+    if (match) {
+      return {
+        version: `${match[1]}.${match[2]}.${match[3]}`,
+        major: parseInt(match[1]),
+        minor: parseInt(match[2]),
+      };
+    }
+  } catch {}
+  return null;
+}
+
+async function checkWasmTarget(): Promise<boolean> {
+  try {
+    const { stdout } = await execAsync("rustup target list", { timeout: 5000 });
+    return stdout.includes("wasm32-unknown-unknown (installed)");
+  } catch {
+    return false;
+  }
+}
+
+export async function GET() {
+  try {
+    const platform = process.platform as SetupStatus["platform"];
+
+    const [rust, cargo, wasmTarget, cargoStylus] = await Promise.all([
+      checkCommand("rustc --version"),
+      checkCommand("cargo --version"),
+      checkWasmTarget(),
+      checkCommand("cargo stylus --version"),
+    ]);
+
+    const rustVersionInfo = await getRustVersion();
+    const needsUpdate = rustVersionInfo
+      ? rustVersionInfo.major < 1 ||
+        (rustVersionInfo.major === 1 && rustVersionInfo.minor < 88)
+      : false;
+
+    const status: SetupStatus = {
+      rust,
+      cargo,
+      wasmTarget,
+      cargoStylus,
+      platform: ["darwin", "linux", "win32"].includes(platform)
+        ? (platform as "darwin" | "linux" | "win32")
+        : "other",
+      rustVersion: rustVersionInfo?.version,
+      needsUpdate,
+    };
+
+    return NextResponse.json(status);
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error: "Failed to check setup",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500 }
+    );
+  }
+}

package/frontend/app/api/cleanup/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+import { cleanupOldProjects } from "@/lib/file-utils";
+
+export const runtime = "nodejs";
+
+export async function POST(request: NextRequest) {
+  try {
+    await cleanupOldProjects(30); // Cleanup projects older than 30 minutes
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Cleanup error:", error);
+    return NextResponse.json({ error: "Cleanup failed" }, { status: 500 });
+  }
+}

package/frontend/app/api/compile/route.ts

@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from "next/server";
+import { randomUUID } from "crypto";
+import { getProjectPath } from "@/lib/file-utils";
+import {
+  runCargoStylusCheck,
+  parseCompilationErrors,
+  ProjectFile, // Import the interface
+} from "@/lib/compilation";
+
+export const runtime = "nodejs";
+export const maxDuration = 120;
+
+export async function POST(request: NextRequest) {
+  const sessionId = randomUUID();
+  const projectPath = getProjectPath(sessionId);
+
+  try {
+    const body = await request.json();
+    const { code, projectFiles } = body;
+
+    // Validate input
+    let filesToCompile: ProjectFile[] | undefined;
+    let mainCode = code;
+
+    if (
+      projectFiles &&
+      Array.isArray(projectFiles) &&
+      projectFiles.length > 0
+    ) {
+      // Multi-file mode
+      filesToCompile = projectFiles;
+
+      // Find lib.rs for backward compatibility (used as fallback)
+      const libFile = projectFiles.find(
+        (f: ProjectFile) => f.path === "src/lib.rs" || f.path === "./src/lib.rs"
+      );
+      if (libFile) {
+        mainCode = libFile.content;
+      } else {
+        // If no lib.rs, use first .rs file
+        const firstRsFile = projectFiles.find((f: ProjectFile) =>
+          f.path.endsWith(".rs")
+        );
+        if (firstRsFile) {
+          mainCode = firstRsFile.content;
+        }
+      }
+    } else if (!code || typeof code !== "string") {
+      return NextResponse.json(
+        {
+          error: "Code or projectFiles required",
+        },
+        { status: 400 }
+      );
+    }
+
+    // Run compilation with multi-file support
+    // The runCargoStylusCheck function now handles ALL file writing internally
+    const result = await runCargoStylusCheck(
+      projectPath,
+      mainCode,
+      undefined, // onOutput callback (optional)
+      filesToCompile // NEW: Pass project files (optional)
+    );
+
+    // Parse errors from stderr
+    const stderrContent = result.output
+      .filter((o) => o.type === "stderr")
+      .map((o) => o.data)
+      .join("\n");
+
+    const parsedErrors =
+      !result.success && stderrContent.length > 0
+        ? parseCompilationErrors(stderrContent)
+        : [];
+
+    return NextResponse.json({
+      success: result.success,
+      exitCode: result.exitCode,
+      output: result.output, // Already includes file count from runCargoStylusCheck
+      errors: parsedErrors,
+      sessionId,
+      wasmSize: result.wasmSize, // Include WASM size
+    });
+  } catch (error) {
+    console.error("Compilation error:", error);
+    return NextResponse.json(
+      {
+        error: "Compilation failed",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500 }
+    );
+  }
+}

package/frontend/app/api/compile-stream/route.ts

@@ -0,0 +1,98 @@
+import { NextRequest } from "next/server";
+import { randomUUID } from "crypto";
+import { getProjectPath } from "@/lib/file-utils";
+import {
+  runCargoStylusCheck,
+  CompilationOutput,
+  parseCompilationErrors,
+} from "@/lib/compilation";
+
+export const runtime = "nodejs";
+export const maxDuration = 120;
+
+export async function POST(request: NextRequest) {
+  const sessionId = randomUUID();
+  const projectPath = getProjectPath(sessionId);
+
+  try {
+    const body = await request.json();
+    const { code } = body;
+
+    if (!code || typeof code !== "string") {
+      return new Response("Code is required", { status: 400 });
+    }
+
+    const encoder = new TextEncoder();
+    const stream = new TransformStream();
+    const writer = stream.writable.getWriter();
+
+    (async () => {
+      const stderrChunks: string[] = [];
+
+      try {
+        await writer.write(
+          encoder.encode(
+            `data: ${JSON.stringify({ type: "start", sessionId })}\n\n`
+          )
+        );
+
+        const result = await runCargoStylusCheck(
+          projectPath,
+          code,
+          async (out: CompilationOutput) => {
+            if (out.type === "stderr") stderrChunks.push(out.data);
+            await writer.write(
+              encoder.encode(`data: ${JSON.stringify(out)}\n\n`)
+            );
+          }
+        );
+
+        const stderr = stderrChunks.join("\n");
+        const errors =
+          !result.success && stderr.length > 0
+            ? parseCompilationErrors(stderr)
+            : [];
+
+        await writer.write(
+          encoder.encode(
+            `data: ${JSON.stringify({
+              type: "result",
+              success: result.success,
+              exitCode: result.exitCode,
+              errors,
+            })}\n\n`
+          )
+        );
+      } catch (error) {
+        await writer.write(
+          encoder.encode(
+            `data: ${JSON.stringify({
+              type: "error",
+              data: error instanceof Error ? error.message : "Unknown error",
+            })}\n\n`
+          )
+        );
+      } finally {
+        // DON'T cleanup here - keep project for ABI export
+        // Cleanup will happen on next compilation or via separate cleanup route
+        await writer.close();
+      }
+    })();
+
+    return new Response(stream.readable, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        error: "Failed to start compilation",
+        details: error instanceof Error ? error.message : "Unknown error",
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}

package/frontend/app/api/complete/route.ts

@@ -0,0 +1,86 @@
+import { OpenAI } from "openai";
+
+export const runtime = "edge";
+// Increased maxDuration for more complex completions if needed
+export const maxDuration = 60;
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+const COMPLETION_SYSTEM_PROMPT = `You are an AI code completion assistant for Arbitrum Stylus smart contracts.
+
+Rules:
+- ONLY output the code completion, no explanations
+- Match the existing code style and indentation
+- Complete the function, type, or statement being written
+- Use Stylus SDK v0.9.x patterns
+- Keep completions concise and relevant
+- NO markdown formatting, just raw code`;
+
+export async function POST(req: Request) {
+  try {
+    const { prompt, context } = await req.json();
+
+    if (!process.env.OPENAI_API_KEY) {
+      return new Response(
+        JSON.stringify({ error: "OpenAI API key not configured" }),
+        { status: 500, headers: { "Content-Type": "application/json" } }
+      );
+    }
+
+    const fullPrompt = `${context}\n\n// Complete this:\n${prompt}`;
+
+    // 1. Create the completion with stream: true
+    const response = await openai.chat.completions.create({
+      model: "gpt-4o-mini",
+      messages: [
+        { role: "system", content: COMPLETION_SYSTEM_PROMPT },
+        { role: "user", content: fullPrompt },
+      ],
+      temperature: 0.3,
+      max_tokens: 500,
+      stream: true,
+    });
+
+    // 2. Create a native ReadableStream to handle the response chunks
+    //
+    const stream = new ReadableStream({
+      async start(controller) {
+        const encoder = new TextEncoder();
+        try {
+          // Iterate over the async iterable provided by the OpenAI SDK
+          for await (const chunk of response) {
+            // Note: Completion responses are similar to chat, using 'content'
+            const content = chunk.choices[0]?.delta?.content || "";
+            if (content) {
+              // Encode string to Uint8Array and enqueue
+              controller.enqueue(encoder.encode(content));
+            }
+          }
+        } catch (err) {
+          controller.error(err);
+        } finally {
+          controller.close();
+        }
+      },
+    });
+
+    // 3. Return a standard Response with the stream
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/plain; charset=utf-8",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+  } catch (error) {
+    console.error("Completion API error:", error);
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "Completion failed",
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}

package/frontend/app/api/deploy/route.ts

@@ -0,0 +1,118 @@
+//deploy/route.ts <- api
+import { NextRequest, NextResponse } from "next/server";
+import { getProjectPath, projectExists } from "@/lib/file-utils";
+import { deployContract } from "@/lib/deployment";
+
+export const runtime = "nodejs";
+export const maxDuration = 180;
+
+// Normalize and validate private key format
+function normalizePrivateKey(key: string): {
+  normalized: string;
+  error?: string;
+} {
+  // Remove whitespace and newlines
+  let normalized = key.trim().replace(/\s/g, "");
+
+  // Remove 0x prefix if present for validation
+  const withoutPrefix =
+    normalized.startsWith("0x") || normalized.startsWith("0X")
+      ? normalized.slice(2)
+      : normalized;
+
+  // Validate it's valid hex
+  if (!/^[a-fA-F0-9]+$/.test(withoutPrefix)) {
+    return {
+      normalized: "",
+      error:
+        "Private key contains invalid characters. Must be hexadecimal (0-9, a-f).",
+    };
+  }
+
+  // Validate correct length (64 hex chars = 32 bytes)
+  if (withoutPrefix.length !== 64) {
+    return {
+      normalized: "",
+      error: `Private key must be exactly 64 hex characters (got ${withoutPrefix.length}). This causes the "Odd number of digits" error.`,
+    };
+  }
+
+  // Always return with 0x prefix (required by cargo-stylus)
+  return { normalized: `0x${withoutPrefix}` };
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { sessionId, privateKey, rpcUrl } = body;
+
+    if (!sessionId || typeof sessionId !== "string") {
+      return NextResponse.json(
+        { error: "Session ID is required" },
+        { status: 400 }
+      );
+    }
+
+    if (!privateKey || typeof privateKey !== "string") {
+      return NextResponse.json(
+        { error: "Private key is required" },
+        { status: 400 }
+      );
+    }
+
+    if (!rpcUrl || typeof rpcUrl !== "string") {
+      return NextResponse.json(
+        { error: "RPC URL is required" },
+        { status: 400 }
+      );
+    }
+
+    // Normalize and validate private key
+    const { normalized: normalizedKey, error: keyError } =
+      normalizePrivateKey(privateKey);
+    if (keyError) {
+      return NextResponse.json(
+        { error: keyError, success: false },
+        { status: 400 }
+      );
+    }
+
+    const projectPath = getProjectPath(sessionId);
+
+    // Check if project exists
+    const exists = await projectExists(sessionId);
+    if (!exists) {
+      return NextResponse.json(
+        {
+          error: "Project not found. Please compile your contract first.",
+          success: false,
+        },
+        { status: 404 }
+      );
+    }
+
+    // Use normalized key for deployment
+    const result = await deployContract(projectPath, normalizedKey, rpcUrl);
+
+    return NextResponse.json({
+      success: result.success,
+      contractAddress: result.contractAddress,
+      txHash: result.activationTxHash ?? result.deploymentTxHash,
+      deploymentTxHash: result.deploymentTxHash,
+      activationTxHash: result.activationTxHash,
+      rpcUsed: result.rpcUsed,
+      error: result.error,
+      output: result.output,
+    });
+  } catch (error) {
+    console.error("Deployment error:", error);
+    return NextResponse.json(
+      {
+        error: "Deployment failed",
+        details: error instanceof Error ? error.message : "Unknown error",
+        success: false,
+      },
+      { status: 500 }
+    );
+  }
+}