[feature]: new onboarding UI

agenta-backend/pyproject.toml

@@ -18,7 +18,6 @@ python-multipart = "^0.0.7"
 backoff = "^2.2.1"
 redis = "^4.6.0"
 aiodocker = "^0.21.0"
-supertokens-python = "^0.15.1"
 sendgrid = "^6.10.0"
 restrictedpython = { version = "^6.2", python = ">=3.9,<3.12" }
 pytest-mock = "^3.11.1"
@@ -42,6 +41,7 @@ tqdm = "^4.66.4"
 alembic = "^1.13.2"
 numpy = "1.26.3"
 autoevals = "^0.0.83"
+supertokens-python = "^0.24.2"
 
 [tool.poetry.group.dev.dependencies]
 pytest = "^7.3.1"

agenta-web/package.json

@@ -50,7 +50,7 @@
         "@types/uuid": "^9.0.7",
         "ag-grid-community": "^31.2.0",
         "ag-grid-react": "^31.2.0",
-        "antd": "^5.4.7",
+        "antd": "^5.20.6",
         "autoprefixer": "10.4.14",
         "axios": "^1.4.0",
         "classnames": "^2.3.2",
@@ -80,8 +80,8 @@
         "react-resizable": "^3.0.5",
         "react-syntax-highlighter": "^15.5.0",
         "react-youtube": "^10.1.0",
-        "supertokens-auth-react": "^0.34.0",
-        "supertokens-node": "^15.0.4",
+        "supertokens-auth-react": "^0.47.0",
+        "supertokens-node": "^20.1.2",
         "swr": "^2.1.5",
         "tailwindcss": "^3.4.4",
         "typescript": "5.0.4",
@@ -92,7 +92,7 @@
         "@swc/cli": "^0.3.12",
         "@swc/core": "^1.4.15",
         "@types/node": "^20.8.10",
-        "cypress": "^13.4.0",
+        "cypress": "^13.15.0",
         "node-mocks-http": "^1.12.2",
         "prettier": "^3.2.5"
     }

agenta-web/src/components/AppSelector/AppSelector.tsx

@@ -279,19 +279,12 @@ const AppSelector: React.FC = () => {
             }}
         >
             <div className={classes.container}>
-                {isLoading ? (
-                    <div>
-                        <ResultComponent status={"info"} title="Loading..." spinner={true} />
-                    </div>
-                ) : error ? (
-                    <div>
-                        <ResultComponent status={"error"} title="Failed to load" />
-                    </div>
-                ) : Array.isArray(apps) && apps.length ? (
-                    <div className="flex flex-col gap-6">
-                        <div className="flex items-center justify-between">
-                            <h1 className={classes.title}>Applications</h1>
+                {!isLoading && !error && (
+                    <div className="flex items-center justify-between mb-5">
+                        <h1 className={classes.title}>App Management</h1>
+                        {Array.isArray(apps) && apps.length ? (
                             <Button
+                                type="primary"
                                 data-cy="create-new-app-button"
                                 icon={<PlusOutlined />}
                                 onClick={() => {
@@ -308,7 +301,20 @@ const AppSelector: React.FC = () => {
                             >
                                 Create new app
                             </Button>
-                        </div>
+                        ) : null}
+                    </div>
+                )}
+
+                {isLoading ? (
+                    <div>
+                        <ResultComponent status={"info"} title="Loading..." spinner={true} />
+                    </div>
+                ) : error ? (
+                    <div>
+                        <ResultComponent status={"error"} title="Failed to load" />
+                    </div>
+                ) : Array.isArray(apps) && apps.length ? (
+                    <div className="flex flex-col gap-6">
                         <div className={classes.cardsList}>
                             {Array.isArray(apps) && (
                                 <>