fix(web): support Piston synchronous code execution

Author: batalabs

README.md

@@ -99,9 +99,23 @@ Available on iOS and Android with the same powerful features and encryption.
 - 🔄 **Resizable Code Blocks** - Drag to adjust editor height for optimal viewing
 - 🌙 **Theme Toggle** - Switch between light and dark Monaco editor themes
 - 💾 **Persistent Results** - Code output is automatically saved with your notes
-- 🔒 **Secure Sandboxed Execution** - Code runs in isolated environments via Judge0 API
+- 🔒 **Secure Sandboxed Execution** - Code runs in isolated environments via Piston API on EC2
 - 📋 **Error Handling** - Clear error messages and compilation details for debugging
 
+### 📊 Diagram Support
+
+![Create Diagram Demo](https://github.com/typelets/typelets-app/blob/main/assets/diagram-demo.gif)
+
+Create beautiful diagrams with Mermaid and PlantUML support:
+
+- 📐 **Mermaid Diagrams** - Flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, and more
+- 🎨 **PlantUML Support** - UML diagrams, architecture diagrams, and technical drawings
+- 🚀 **Quick Create** - Use the "New Diagram" button or slash command `/diagram`
+- 👁️ **Live Preview** - See your diagram update in real-time as you type
+- 📋 **Diagram Templates** - Start with pre-built templates for common diagram types
+- 💾 **Auto-Save** - Diagrams are automatically saved with your notes
+- 🔄 **Instant Conversion** - Convert existing notes to diagram notes with one click
+
 ## 🔒 Security First
 
 Typelets uses industry-standard encryption:
@@ -175,7 +189,7 @@ VITE_APP_VERSION=0.5.0
 
 **Code Execution Setup:**
 - Code execution is handled securely by your backend API
-- The backend proxy manages Judge0 API integration
+- The backend uses Piston API running on EC2 for isolated code execution
 - No client-side API keys required for security
 
 ### Development Proxy
@@ -405,7 +419,7 @@ typelets/
 - **Styling:** Tailwind CSS v4
 - **Editor:** TipTap with code highlighting
 - **Code Editor:** Monaco Editor (VS Code engine)
-- **Code Execution:** Judge0 API for 15+ programming languages
+- **Code Execution:** Piston API (self-hosted on EC2) for 15+ programming languages
 - **Authentication:** Clerk
 - **UI Components:** Radix UI
 - **Encryption:** Web Crypto API with AES-256-GCM

assets/diagram-demo.gif

@@ -169,10 +169,67 @@ class CodeExecutionService {
       }
 
       const submissionResult = await response.json();
+
+      // Check if this is a synchronous response (Piston) with immediate results
+      // Piston returns stdout, stderr, status all in the initial response
+      if (submissionResult.stdout !== undefined || submissionResult.stderr !== undefined) {
+        // Synchronous execution (Piston) - results are already available
+        const statusId = submissionResult.status?.id || 3;
+        const statusDescription = submissionResult.status?.description || 'Accepted';
+
+        if (onStatusUpdate) {
+          onStatusUpdate({ id: statusId, description: statusDescription });
+        }
+
+        // Piston returns plain text (not base64), but check just in case
+        const stdout = this.decodeBase64(submissionResult.stdout) || submissionResult.stdout || '';
+        const stderr = this.decodeBase64(submissionResult.stderr) || submissionResult.stderr || '';
+        const compileOutput = this.decodeBase64(submissionResult.compile_output) || submissionResult.compile_output || '';
+
+        if (statusId === 3) {
+          return {
+            output: stdout,
+            error: undefined,
+            executionTime: parseFloat(submissionResult.time || '0') || Date.now() - startTime,
+            language,
+            status: {
+              id: statusId,
+              description: statusDescription,
+            },
+          };
+        } else {
+          let errorMessage = statusDescription;
+
+          if (stderr) {
+            const stderrContent = stderr.trim();
+            if (stderrContent) {
+              errorMessage += `\n\nDetails:\n${stderrContent}`;
+            }
+          } else if (compileOutput) {
+            const compileOutputContent = compileOutput.trim();
+            if (compileOutputContent) {
+              errorMessage += `\n\nCompilation details:\n${compileOutputContent}`;
+            }
+          }
+
+          return {
+            output: stdout || '',
+            error: errorMessage,
+            executionTime: parseFloat(submissionResult.time || '0') || Date.now() - startTime,
+            language,
+            status: {
+              id: statusId,
+              description: statusDescription,
+            },
+          };
+        }
+      }
+
+      // Asynchronous execution (Judge0) - need to poll for results
       const submissionToken = submissionResult.token;
 
       if (!submissionToken) {
-        throw new Error('No submission token returned from Judge0');
+        throw new Error('No submission token returned from execution service');
       }
 
       return await this.pollForResult(
@@ -243,7 +300,7 @@ class CodeExecutionService {
         }
 
         if (statusId && statusId !== 1 && statusId !== 2) {
-          // Decode base64 encoded output from Judge0
+          // Decode base64 encoded output (Judge0 uses base64 encoding)
           const stdout = this.decodeBase64(result.stdout);
           const stderr = this.decodeBase64(result.stderr);
           const compileOutput = this.decodeBase64(result.compile_output);
@@ -307,7 +364,7 @@ class CodeExecutionService {
 
     return {
       output: '',
-      error: 'Execution timeout - Judge0 took too long to process',
+      error: 'Execution timeout - code execution took too long to process',
       executionTime: Date.now() - startTime,
       language,
       status: {