Moving server

.gitignore

@@ -1,9 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules/
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -41,4 +42,36 @@ yarn-error.log*
 .vercel
 
 #used files
-_*
+_*
+*.pem
+*.tsbuildinfo
+next-env.d.ts
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+.env
+.venv
+env/
+venv/
+ENV/
+.python-version
+.ruff_cache/
+.mypy_cache/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Logs
+logs/
+*.log
+
+# Lock files
+package-lock.json
+yarn.lock
+bun.lockb
+uv.lock

backend/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "cotomata-backend",
+  "version": "1.0.0",
+  "description": "Backend server for Cotomata",
+  "main": "src/server.js",
+  "type": "module",
+  "scripts": {
+    "start": "bun src/server.js",
+    "dev": "bun --watch src/server.js"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "redis": "^4.6.12",
+    "socket.io": "^4.8.1"
+  }
+} 

frontend/server.js → backend/src/server.js

@@ -1,11 +1,6 @@
-import { createServer } from 'http';
 import { Server } from 'socket.io';
 import { createClient } from 'redis';
-import next from 'next';
-
-const dev = process.env.NODE_ENV !== 'production';
-const app = next({ dev });
-const handle = app.getRequestHandler();
+import { createServer } from 'http';
 
 // Redis client configuration
 const redisClient = createClient({
@@ -15,19 +10,28 @@ const redisClient = createClient({
 // Allowed channels for Redis pub/sub 
 const allowedChannels = ['Scene:Jack', 'Scene:Jane', 'Human:Jack', 'Jack:Human', 'Agent:Runtime', 'Runtime:Agent'];
 
-app.prepare().then(async () => {
-  // Connect Redis client
-  redisClient.on('error', (err) => {
-    console.error('Redis error:', err);
-  });
+// Connect Redis client
+redisClient.on('error', (err) => {
+  console.error('Redis error:', err);
+});
+
+const init = async () => {
   await redisClient.connect();
 
   // Create HTTP server
-  const server = createServer((req, res) => {
-    handle(req, res);
+  const httpServer = createServer((req, res) => {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.writeHead(200);
+    res.end('Socket.IO server running');
+  });
+
+  // Initialize Socket.IO server with CORS
+  const io = new Server(httpServer, {
+    cors: {
+      origin: "http://localhost:3000",
+      methods: ["GET", "POST"]
+    }
   });
-  // Initialize Socket.IO server
-  const io = new Server(server);
 
   // Redis subscriber setup
   const subscriber = redisClient.duplicate();
@@ -107,21 +111,40 @@ app.prepare().then(async () => {
 
     // Handle process initialization
     socket.on('init_process', async () => {
+      console.log('Received init_process request');
       try {
-        const response = await fetch('http://localhost:5000/run-dataflow', {
+        const initParams = {
+          node_name: "openhands_node",
+          input_channels: ["Agent:Runtime"],
+          output_channels: ["Runtime:Agent"],
+          modal_session_id: "arpan"
+        };
+
+        const response = await fetch('http://localhost:5000/initialize', {
           method: 'POST',
-          headers: { 'Content-Type': 'application/json' }
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(initParams)
         });
 
         if (!response.ok) {
-          throw new Error(`Failed to initialize process: ${response.statusText}`);
+          const errorData = await response.json();
+          throw new Error(`Failed to initialize process: ${errorData.error || response.statusText}`);
         }
 
         const result = await response.json();
-        socket.emit('init_process_result', result);
-        console.log('openhands connected')
+
+        if (result.status === 'initialized') {
+          socket.emit('init_process_result', { success: true });
+          console.log('OpenHands initialized successfully');
+        } else {
+          throw new Error(`Unexpected initialization status: ${result.status}`);
+        }
       } catch (err) {
         console.error('Error initializing process:', err);
+        socket.emit('init_process_result', { 
+          success: false, 
+          error: err.message 
+        });
       }
     });
 
@@ -131,11 +154,10 @@ app.prepare().then(async () => {
   });
 
   // Start the server
-  const port = process.env.PORT || 3000;
-  server.listen(port, (err) => {
-    if (err) throw err;
-    console.log(`> Ready on http://localhost:3000`);
+  const port = process.env.PORT || 8000;
+  httpServer.listen(port, () => {
+    console.log(`> Backend server ready on http://localhost:${port}`);
   });
-});
+};
 
-export default app;
+init().catch(console.error); 

frontend/app/error.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: string;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
+      <div className="max-w-md w-full p-6">
+        <Alert variant="destructive">
+          <AlertTitle>Initialization Failed</AlertTitle>
+          <AlertDescription className="mt-2 space-y-4">
+            <p>{error}</p>
+            <Button 
+              variant="outline" 
+              onClick={reset}
+              className="w-full"
+            >
+              Try Again
+            </Button>
+          </AlertDescription>
+        </Alert>
+      </div>
+    </div>
+  );
+}

frontend/app/globals.css

@@ -2,85 +2,67 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
+    --foreground: 240 10% 3.9%;
+
     --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
+    --card-foreground: 240 10% 3.9%;
+
     --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 224 71.4% 4.1%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
     --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
+
   .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 216 12.2% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }