feat: Agent Playground

apps/extension/package.json

@@ -17,13 +17,13 @@
     "@heroicons/react": "^2.0.16",
     "@plasmohq/messaging": "^0.2.1",
     "@plasmohq/storage": "^1.3.1",
-    "@types/chrome": "^0.0.231",
+    "@types/chrome": "^0.0.235",
     "@types/webextension-polyfill": "^0.10.0",
     "@vespaiach/axios-fetch-adapter": "github:alexanderatallah/axios-fetch-adapter",
-    "axios": "^1.3.4",
+    "axios": "^1.4.0",
     "axios-retry": "^3.4.0",
     "object-hash": "^3.0.0",
-    "plasmo": "0.68.3",
+    "plasmo": "0.70.1",
     "puro": "^0.8.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -33,15 +33,15 @@
   "devDependencies": {
     "@plasmohq/prettier-plugin-sort-imports": "3.6.4",
     "@plasmohq/rps": "^1.8.4",
-    "@types/node": "18.15.11",
+    "@types/node": "20.0.0",
     "@types/object-hash": "^3.0.2",
-    "@types/react": "18.0.35",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.5",
+    "@types/react-dom": "18.2.4",
     "@types/uuid": "^9.0.1",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.22",
-    "prettier": "2.8.7",
-    "tailwindcss": "3.3.1",
+    "postcss": "^8.4.23",
+    "prettier": "2.8.8",
+    "tailwindcss": "3.3.2",
     "typescript": "5.0.4",
     "window.ai": "workspace:*"
   },

apps/web/next.config.mjs

@@ -0,0 +1,63 @@
+const securityHeaders = [
+  {
+    key: "X-Frame-Options",
+    value: "SAMEORIGIN"
+  },
+  {
+    key: "X-DNS-Prefetch-Control",
+    value: "on"
+  },
+  {
+    key: "X-XSS-Protection",
+    value: "1; mode=block"
+  },
+  {
+    key: "X-Content-Type-Options",
+    value: "nosniff"
+  },
+  {
+    key: "Referrer-Policy",
+    value: "origin-when-cross-origin"
+  }
+  // {
+  //   key: "Content-Security-Policy",
+  //   value: contentSecurityPolicy.replace(/\s{2,}/g, " ").trim()
+  // }
+]
+
+const webContainerHeaders = [
+  {
+    key: "Cross-Origin-Embedder-Policy",
+    value: "require-corp"
+  },
+  {
+    key: "Cross-Origin-Opener-Policy",
+    value: "same-origin"
+  }
+]
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const baseConfig = {
+  reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: "/(.*)",
+        headers: securityHeaders
+      },
+      {
+        source: "/vm",
+        headers: [...webContainerHeaders]
+      },
+      {
+        source: "/agent",
+        headers: [...webContainerHeaders]
+      }
+    ]
+  }
+}
+
+export default baseConfig

apps/web/package.json

@@ -10,25 +10,34 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tabler/icons-react": "^2.13.2",
+    "@airthium/extract-json-from-string": "1.0.10",
+    "@tabler/icons-react": "^2.17.0",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "@vercel/analytics": "^0.1.11",
+    "@vercel/analytics": "^1.0.1",
     "@vercel/examples-ui": "^1.0.5",
+    "@webcontainer/api": "1.1.3",
     "clsx": "^1.2.1",
-    "next": "13.2.4",
-    "react": "latest",
+    "nanoid": "4.0.2",
+    "next": "13.4.1",
+    "puro": "0.8.4",
+    "react": "18.2.0",
     "react-cookie": "^4.1.1",
-    "react-dom": "latest",
+    "react-dom": "18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-wrap-balancer": "^0.4.0"
+    "react-wrap-balancer": "^0.4.1",
+    "xterm": "5.1.0",
+    "xterm-addon-fit": "0.7.0",
+    "xterm-addon-webgl": "0.14.0"
   },
   "devDependencies": {
-    "window.ai": "workspace:*",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.0.35",
+    "@radix-ui/colors": "0.1.8",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.5",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.22",
-    "tailwindcss": "3.3.1",
-    "typescript": "5.0.4"
+    "postcss": "^8.4.23",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.0.4",
+    "window.ai": "workspace:*",
+    "windy-radix-palette": "0.6.1"
   }
 }