From 6a2ba41b6195ce69c37b81e7abbfdedcf45017d7 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Wed, 2 Oct 2024 18:36:03 +0200
Subject: [PATCH 01/11] studio - login

---
 .vscode/terminals.json                        | 21 +++++++
 agdb_api/typescript/src/client.ts             | 10 +--
 agdb_api/typescript/tests/api.test.ts         |  2 +-
 agdb_studio/package-lock.json                 | 49 +++++++++++++++
 agdb_studio/package.json                      |  2 +
 agdb_studio/src/components/auth/LoginForm.vue | 26 +++++++-
 agdb_studio/src/router/index.ts               | 36 +++--------
 agdb_studio/src/router/routes.ts              | 27 ++++++++
 agdb_studio/src/services/api.service.ts       | 62 -------------------
 agdb_studio/src/services/auth.service.ts      | 37 +++++++++++
 10 files changed, 174 insertions(+), 98 deletions(-)
 create mode 100644 agdb_studio/src/router/routes.ts
 delete mode 100644 agdb_studio/src/services/api.service.ts
 create mode 100644 agdb_studio/src/services/auth.service.ts

diff --git a/.vscode/terminals.json b/.vscode/terminals.json
index bd0da09a8..dfec5988f 100644
--- a/.vscode/terminals.json
+++ b/.vscode/terminals.json
@@ -22,6 +22,27 @@
             "open": true,
             "focus": false,
             "commands": ["cd agdb_web"]
+        },
+        {
+            "name": "studio SERVER",
+            "description": "For running web studio server",
+            "open": true,
+            "focus": false,
+            "commands": ["cd agdb_studio", "npm run dev"]
+        },
+        {
+            "name": "studio SCRIPTS",
+            "description": "For running studio scripts",
+            "open": true,
+            "focus": false,
+            "commands": ["cd agdb_studio"]
+        },
+        {
+            "name": "api SCRIPTS",
+            "description": "For running api/typescript scripts",
+            "open": true,
+            "focus": false,
+            "commands": ["cd agdb_api/typescript"]
         }
     ]
 }
diff --git a/agdb_api/typescript/src/client.ts b/agdb_api/typescript/src/client.ts
index 10095aad4..1096e7f1a 100644
--- a/agdb_api/typescript/src/client.ts
+++ b/agdb_api/typescript/src/client.ts
@@ -2,10 +2,10 @@ import { OpenAPIClientAxios } from "openapi-client-axios";
 import type { Client } from "./openapi";
 
 type AgdbApi = {
-    token: string;
+    token: string | undefined;
     login: (username: string, password: string) => Promise<string>; // eslint-disable-line no-unused-vars
     logout: () => Promise<void>;
-    get_token: () => string;
+    get_token: () => string | undefined;
     set_token: (token: string) => void; // eslint-disable-line no-unused-vars
 };
 
@@ -19,19 +19,19 @@ async function login(username: string, password: string): Promise<string> {
     return token.data;
 }
 
-function get_token(): string {
+function get_token(): string | undefined {
     return this.token;
 }
 
 async function logout(): Promise<void> {
     await this.user_logout();
-    this.token = "";
+    this.token = undefined;
     this.interceptors.request.use((config) => {
         return config;
     });
 }
 
-function set_token(token: string) {
+function set_token(token: string): void {
     this.token = token;
     this.interceptors.request.use((config) => {
         config.headers.Authorization = `Bearer ${token}`;
diff --git a/agdb_api/typescript/tests/api.test.ts b/agdb_api/typescript/tests/api.test.ts
index 18c2b965b..08ddedf64 100644
--- a/agdb_api/typescript/tests/api.test.ts
+++ b/agdb_api/typescript/tests/api.test.ts
@@ -19,7 +19,7 @@ describe("openapi test", () => {
         let client = await AgdbApi.client("http://localhost:3000");
         await client.login("admin", "admin");
         await client.logout();
-        expect(client.get_token()).toEqual("");
+        expect(client.get_token()).toEqual(undefined);
 
         await expect(client.db_list()).rejects.toThrowError(
             "Request failed with status code 401",
diff --git a/agdb_studio/package-lock.json b/agdb_studio/package-lock.json
index 76e345d26..61c815f90 100644
--- a/agdb_studio/package-lock.json
+++ b/agdb_studio/package-lock.json
@@ -8,6 +8,8 @@
             "name": "agdb_studio",
             "version": "0.0.0",
             "dependencies": {
+                "@kalimahapps/vue-icons": "^1.7.1",
+                "agdb_api": "file:../agdb_api/typescript",
                 "openapi-client-axios": "^7.5.1",
                 "pinia": "^2.1.7",
                 "vue": "^3.3.4",
@@ -38,6 +40,30 @@
                 "vue-tsc": "^2.0.28"
             }
         },
+        "../../agdb_api/typescript": {
+            "extraneous": true
+        },
+        "../agdb_api/typescript": {
+            "name": "@agnesoft/agdb_api",
+            "version": "0.9.0",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "openapi-client-axios": "^7.5.5"
+            },
+            "devDependencies": {
+                "@rushstack/eslint-patch": "^1.10.3",
+                "@types/node": "^20.14.10",
+                "@typescript-eslint/parser": "^7.16.0",
+                "@vitest/coverage-v8": "^2.0.2",
+                "copyfiles": "^2.4.1",
+                "eslint": "^8.56.0",
+                "openapicmd": "^2.4.0",
+                "prettier": "^3.3.3",
+                "typescript": "^5.5.3",
+                "vite": "^5.3.3",
+                "vitest": "^2.0.2"
+            }
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -752,6 +778,20 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@kalimahapps/vue-icons": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/@kalimahapps/vue-icons/-/vue-icons-1.7.1.tgz",
+            "integrity": "sha512-PXMiVTPOZ0LTU8DuIIcuOc1FyC9I9e2SMz9XUzByZZEPN8ruDCdNw2fyVCH8rcNpVSrlMlfqDT7di7tPZgH8XA==",
+            "dependencies": {
+                "svg-parser": "^2.0.4"
+            },
+            "engines": {
+                "node": ">=14.16"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1713,6 +1753,10 @@
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
         },
+        "node_modules/agdb_api": {
+            "resolved": "../agdb_api/typescript",
+            "link": true
+        },
         "node_modules/agent-base": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -4714,6 +4758,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/svg-parser": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+            "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/agdb_studio/package.json b/agdb_studio/package.json
index 748bbf4bb..2be895d5b 100644
--- a/agdb_studio/package.json
+++ b/agdb_studio/package.json
@@ -16,6 +16,8 @@
         "before-commit": "npm run format && npm run lint && npm run test:unit && npm run test:e2e"
     },
     "dependencies": {
+        "@kalimahapps/vue-icons": "^1.7.1",
+        "agdb_api": "file:../agdb_api/typescript",
         "openapi-client-axios": "^7.5.1",
         "pinia": "^2.1.7",
         "vue": "^3.3.4",
diff --git a/agdb_studio/src/components/auth/LoginForm.vue b/agdb_studio/src/components/auth/LoginForm.vue
index 18ac6bf93..2c0aee2ab 100644
--- a/agdb_studio/src/components/auth/LoginForm.vue
+++ b/agdb_studio/src/components/auth/LoginForm.vue
@@ -1,17 +1,34 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { login } from "@/services/auth.service";
 
 const username = ref("");
 const password = ref("");
 
-const login = async () => {
-    // todo - handle login
+const loading = ref(false);
+const error = ref("");
+
+const clearError = () => {
+    error.value = "";
+};
+
+const onLogin = async () => {
+    loading.value = true;
+    clearError();
+    login(username.value, password.value)
+        .then(() => {
+            loading.value = false;
+        })
+        .catch((e) => {
+            loading.value = false;
+            error.value = e.message;
+        });
 };
 </script>
 
 <template>
     <div class="base-form login-form">
-        <form @submit.prevent="login">
+        <form @submit.prevent="onLogin">
             <div>
                 <label for="username">Username:</label>
                 <input type="text" id="username" v-model="username" required />
@@ -38,5 +55,8 @@ const login = async () => {
         font-size: 1.2rem;
         margin-top: 0.6rem;
     }
+    input {
+        border-radius: 0.2rem;
+    }
 }
 </style>
diff --git a/agdb_studio/src/router/index.ts b/agdb_studio/src/router/index.ts
index 4e0c9c0eb..3c952e215 100644
--- a/agdb_studio/src/router/index.ts
+++ b/agdb_studio/src/router/index.ts
@@ -1,35 +1,17 @@
 import { createRouter, createWebHistory } from "vue-router";
-import MainLayout from "@/layouts/MainLayout.vue";
-
-const routes = [
-    {
-        path: "/login",
-        name: "login",
-        component: () => import("@/views/LoginView.vue"),
-    },
-    {
-        path: "",
-        component: MainLayout,
-        children: [
-            {
-                path: "",
-                name: "home",
-                component: () => import("@/views/HomeView.vue"),
-            },
-            {
-                path: "/about",
-                name: "about",
-                component: () => import("@/views/AboutView.vue"),
-            },
-        ],
-    },
-];
+import { createRoutes } from "./routes";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
-    routes,
+    routes: createRoutes(),
 });
 
-export { routes };
+router.beforeEach((to, from, next) => {
+    if (to.name !== "login" && !localStorage.getItem("token")) {
+        next({ name: "login" });
+    } else {
+        next();
+    }
+});
 
 export default router;
diff --git a/agdb_studio/src/router/routes.ts b/agdb_studio/src/router/routes.ts
new file mode 100644
index 000000000..79be8ef15
--- /dev/null
+++ b/agdb_studio/src/router/routes.ts
@@ -0,0 +1,27 @@
+import MainLayout from "@/layouts/MainLayout.vue";
+
+export const createRoutes = () => {
+    return [
+        {
+            path: "/login",
+            name: "login",
+            component: () => import("@/views/LoginView.vue"),
+        },
+        {
+            path: "",
+            component: MainLayout,
+            children: [
+                {
+                    path: "",
+                    name: "home",
+                    component: () => import("@/views/HomeView.vue"),
+                },
+                {
+                    path: "/about",
+                    name: "about",
+                    component: () => import("@/views/AboutView.vue"),
+                },
+            ],
+        },
+    ];
+};
diff --git a/agdb_studio/src/services/api.service.ts b/agdb_studio/src/services/api.service.ts
deleted file mode 100644
index 310a7bcbe..000000000
--- a/agdb_studio/src/services/api.service.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Client } from "../../../agdb_api/typescript/src/openapi";
-import OpenAPIClientAxios from "openapi-client-axios";
-import type { AxiosResponse, InternalAxiosRequestConfig } from "axios";
-
-export class Api {
-    private static api: OpenAPIClientAxios | undefined = undefined;
-    private static c: Client | undefined = undefined;
-    private static token: string = "";
-
-    static async client(): Promise<Client> {
-        if (Api.c === undefined) {
-            Api.api = new OpenAPIClientAxios({
-                definition: `${import.meta.env.VITE_API_URL}/api/v1/openapi.json`,
-            });
-
-            Api.c = await Api.api.init<Client>();
-            Api.c.interceptors.request.use(
-                (config: InternalAxiosRequestConfig) => {
-                    if (Api.token !== "") {
-                        config.headers.Authorization = `Bearer ${Api.token}`;
-                    }
-                    return config;
-                },
-            );
-            Api.c.interceptors.response.use(
-                (response: AxiosResponse) => {
-                    return response.data;
-                },
-                (error: any) => {
-                    if (!error.response) {
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 401) {
-                        // TODO: logout
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 302) {
-                        // TODO: handle redirect
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 404) {
-                        // TODO: redirect to 404 page
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 500) {
-                        return Promise.reject(error);
-                    }
-                    const data = error.response.data;
-                    const errorData: string =
-                        (data && data.message) || "Unknown error";
-                    return Promise.reject(errorData);
-                },
-            );
-        }
-
-        return Api.c as Client;
-    }
-
-    static setToken(token: string) {
-        Api.token = token;
-    }
-}
diff --git a/agdb_studio/src/services/auth.service.ts b/agdb_studio/src/services/auth.service.ts
new file mode 100644
index 000000000..16687988f
--- /dev/null
+++ b/agdb_studio/src/services/auth.service.ts
@@ -0,0 +1,37 @@
+import { AgdbApi } from "agdb_api";
+
+const client = await AgdbApi.client("http://localhost:3000");
+
+const getLocalStorageToken = (): string | undefined => {
+    const token = localStorage.getItem("token") ?? undefined;
+    if (token) {
+        client.set_token(token);
+    }
+    return token;
+};
+
+const setLocalStorageToken = (token: string): void => {
+    localStorage.setItem("token", token);
+};
+
+const getToken = (): string | undefined => {
+    let token = client.get_token();
+    if (!token) {
+        token = getLocalStorageToken();
+    }
+    return token;
+};
+
+export const isLoggedIn = (): boolean => {
+    return getToken() !== undefined;
+};
+
+export const login = async (
+    username: string,
+    password: string,
+): Promise<string> => {
+    return client.login(username, password).then((token) => {
+        setLocalStorageToken(token);
+        return token;
+    });
+};

From b72c8349f577535a9d6f99315c4f8d34ec36cc61 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 09:55:46 +0200
Subject: [PATCH 02/11] studio - login spinner

---
 agdb_studio/src/components/auth/LoginForm.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/agdb_studio/src/components/auth/LoginForm.vue b/agdb_studio/src/components/auth/LoginForm.vue
index 2c0aee2ab..7d24cd987 100644
--- a/agdb_studio/src/components/auth/LoginForm.vue
+++ b/agdb_studio/src/components/auth/LoginForm.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { login } from "@/services/auth.service";
+import { CgSpinnerTwo } from "@kalimahapps/vue-icons";
 
 const username = ref("");
 const password = ref("");
@@ -42,7 +43,10 @@ const onLogin = async () => {
                     required
                 />
             </div>
-            <button type="submit" class="button button-success">Login</button>
+            <button type="submit" class="button button-success">
+                <CgSpinnerTwo v-if="loading" />
+                Login
+            </button>
         </form>
     </div>
 </template>

From b7d42fbfe38f3f8af9462b8837f4a1afe4835ff8 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 10:44:00 +0200
Subject: [PATCH 03/11] studio - auth error

---
 agdb_studio/src/services/auth.service.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/agdb_studio/src/services/auth.service.ts b/agdb_studio/src/services/auth.service.ts
index 16687988f..5fe2a35a0 100644
--- a/agdb_studio/src/services/auth.service.ts
+++ b/agdb_studio/src/services/auth.service.ts
@@ -1,11 +1,17 @@
 import { AgdbApi } from "agdb_api";
+import type { AxiosError } from "axios";
 
-const client = await AgdbApi.client("http://localhost:3000");
+const client = await AgdbApi.client("http://localhost:3000").catch(
+    (error: AxiosError) => {
+        console.error(error.message);
+        return undefined;
+    },
+);
 
 const getLocalStorageToken = (): string | undefined => {
     const token = localStorage.getItem("token") ?? undefined;
     if (token) {
-        client.set_token(token);
+        client?.set_token(token);
     }
     return token;
 };
@@ -15,7 +21,7 @@ const setLocalStorageToken = (token: string): void => {
 };
 
 const getToken = (): string | undefined => {
-    let token = client.get_token();
+    let token = client?.get_token();
     if (!token) {
         token = getLocalStorageToken();
     }
@@ -29,8 +35,8 @@ export const isLoggedIn = (): boolean => {
 export const login = async (
     username: string,
     password: string,
-): Promise<string> => {
-    return client.login(username, password).then((token) => {
+): Promise<string | undefined> => {
+    return client?.login(username, password).then((token) => {
         setLocalStorageToken(token);
         return token;
     });

From e7c89b37423d2721b0f27c72503c23a9c29f1dc2 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 11:40:17 +0200
Subject: [PATCH 04/11] studio - login

---
 agdb_studio/src/components/auth/LoginForm.vue | 2 ++
 agdb_studio/src/router/index.ts               | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/agdb_studio/src/components/auth/LoginForm.vue b/agdb_studio/src/components/auth/LoginForm.vue
index 7d24cd987..2d687185a 100644
--- a/agdb_studio/src/components/auth/LoginForm.vue
+++ b/agdb_studio/src/components/auth/LoginForm.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { login } from "@/services/auth.service";
 import { CgSpinnerTwo } from "@kalimahapps/vue-icons";
+import router from "@/router";
 
 const username = ref("");
 const password = ref("");
@@ -19,6 +20,7 @@ const onLogin = async () => {
     login(username.value, password.value)
         .then(() => {
             loading.value = false;
+            router.push({ name: "Home" });
         })
         .catch((e) => {
             loading.value = false;
diff --git a/agdb_studio/src/router/index.ts b/agdb_studio/src/router/index.ts
index 3c952e215..9a353357f 100644
--- a/agdb_studio/src/router/index.ts
+++ b/agdb_studio/src/router/index.ts
@@ -7,7 +7,7 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-    if (to.name !== "login" && !localStorage.getItem("token")) {
+    if (to.name !== "login" && !localStorage.isLoggedIn()) {
         next({ name: "login" });
     } else {
         next();

From 7c25ec29a9118e9dea7edcea8200c92871326b30 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 16:24:10 +0200
Subject: [PATCH 05/11] studio - login

---
 agdb_api/typescript/src/client.ts             | 18 ++++---
 agdb_studio/package.json                      |  2 +-
 agdb_studio/src/assets/button.less            |  4 +-
 agdb_studio/src/components/auth/LoginForm.vue |  2 +-
 agdb_studio/src/layouts/MainLayout.vue        | 21 ++++++--
 agdb_studio/src/router/index.ts               | 14 +++--
 agdb_studio/src/services/auth.service.ts      | 52 ++++++++++++++++---
 7 files changed, 87 insertions(+), 26 deletions(-)

diff --git a/agdb_api/typescript/src/client.ts b/agdb_api/typescript/src/client.ts
index 1096e7f1a..7c701e2a0 100644
--- a/agdb_api/typescript/src/client.ts
+++ b/agdb_api/typescript/src/client.ts
@@ -1,4 +1,4 @@
-import { OpenAPIClientAxios } from "openapi-client-axios";
+import { AxiosRequestConfig, OpenAPIClientAxios } from "openapi-client-axios";
 import type { Client } from "./openapi";
 
 type AgdbApi = {
@@ -7,6 +7,7 @@ type AgdbApi = {
     logout: () => Promise<void>;
     get_token: () => string | undefined;
     set_token: (token: string) => void; // eslint-disable-line no-unused-vars
+    remove_token: () => void;
 };
 
 async function login(username: string, password: string): Promise<string> {
@@ -25,20 +26,24 @@ function get_token(): string | undefined {
 
 async function logout(): Promise<void> {
     await this.user_logout();
-    this.token = undefined;
-    this.interceptors.request.use((config) => {
-        return config;
-    });
+    this.remove_token();
 }
 
 function set_token(token: string): void {
     this.token = token;
-    this.interceptors.request.use((config) => {
+    this.interceptors.request.use((config: AxiosRequestConfig) => {
         config.headers.Authorization = `Bearer ${token}`;
         return config;
     });
 }
 
+function remove_token(): void {
+    this.token = undefined;
+    this.interceptors.request.use((config: AxiosRequestConfig) => {
+        return config;
+    });
+}
+
 export type AgdbApiClient = Client & AgdbApi;
 
 export async function client(address: String): Promise<AgdbApiClient> {
@@ -51,5 +56,6 @@ export async function client(address: String): Promise<AgdbApiClient> {
     client.logout = logout;
     client.set_token = set_token;
     client.get_token = get_token;
+    client.remove_token = remove_token;
     return client;
 }
diff --git a/agdb_studio/package.json b/agdb_studio/package.json
index 2be895d5b..88b55b1c2 100644
--- a/agdb_studio/package.json
+++ b/agdb_studio/package.json
@@ -6,7 +6,7 @@
         "dev": "vite",
         "build": "run-p type-check \"build-only {@}\" --",
         "preview": "vite preview",
-        "test:unit": "vitest run --coverage",
+        "test": "vitest run --coverage",
         "test:e2e": "playwright test",
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
diff --git a/agdb_studio/src/assets/button.less b/agdb_studio/src/assets/button.less
index 9d5ac0ea8..9d4ad70a6 100644
--- a/agdb_studio/src/assets/button.less
+++ b/agdb_studio/src/assets/button.less
@@ -20,8 +20,8 @@
 }
 
 .button-warning {
-    background-color: #ffc107;
-    color: #212529;
+    background-color: #ff9f2c;
+    color: #181818;
 }
 
 .button-danger {
diff --git a/agdb_studio/src/components/auth/LoginForm.vue b/agdb_studio/src/components/auth/LoginForm.vue
index 2d687185a..01159ffe3 100644
--- a/agdb_studio/src/components/auth/LoginForm.vue
+++ b/agdb_studio/src/components/auth/LoginForm.vue
@@ -20,7 +20,7 @@ const onLogin = async () => {
     login(username.value, password.value)
         .then(() => {
             loading.value = false;
-            router.push({ name: "Home" });
+            router.push({ name: "home" });
         })
         .catch((e) => {
             loading.value = false;
diff --git a/agdb_studio/src/layouts/MainLayout.vue b/agdb_studio/src/layouts/MainLayout.vue
index 23ca2843a..a2289ee5b 100644
--- a/agdb_studio/src/layouts/MainLayout.vue
+++ b/agdb_studio/src/layouts/MainLayout.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { RouterLink, RouterView } from "vue-router";
+import { logout } from "@/services/auth.service";
 </script>
 
 <template>
@@ -9,8 +10,8 @@ import { RouterLink, RouterView } from "vue-router";
                 alt="agdb logo"
                 class="logo"
                 src="@/assets/logo.svg"
-                width="125"
-                height="125"
+                width="100"
+                height="100"
             />
 
             <div class="wrapper">
@@ -18,6 +19,9 @@ import { RouterLink, RouterView } from "vue-router";
                     <RouterLink to="/">Home</RouterLink>
                     <RouterLink to="/about">About</RouterLink>
                 </nav>
+                <button class="button button-warning" @click="logout">
+                    Logout
+                </button>
             </div>
         </header>
         <main>
@@ -54,12 +58,14 @@ footer {
 }
 
 .logo {
+    --logo-size: 100px;
     display: block;
     margin: 0 auto 2rem;
+    width: var(--logo-size);
+    height: var(--logo-size);
 }
 
 nav {
-    width: 100%;
     font-size: 12px;
     text-align: center;
     margin-top: 2rem;
@@ -91,13 +97,18 @@ nav a:first-of-type {
     }
 
     .logo {
-        margin: 0 2rem 0 0;
+        --logo-size: 75px;
+        margin: 0 2rem 0 1rem;
     }
 
     header .wrapper {
         display: flex;
         place-items: flex-start;
         flex-wrap: wrap;
+
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
     }
 
     nav {
@@ -106,7 +117,7 @@ nav a:first-of-type {
         font-size: 1rem;
 
         padding: 1rem 0;
-        margin-top: 1rem;
+        margin-top: 0;
     }
 }
 </style>
diff --git a/agdb_studio/src/router/index.ts b/agdb_studio/src/router/index.ts
index 9a353357f..2c0e1d268 100644
--- a/agdb_studio/src/router/index.ts
+++ b/agdb_studio/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { createRoutes } from "./routes";
+import { isLoggedIn, logout } from "@/services/auth.service";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,10 +8,17 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-    if (to.name !== "login" && !localStorage.isLoggedIn()) {
-        next({ name: "login" });
-    } else {
+    if (isLoggedIn()) {
+        if (to.name === "login") {
+            logout();
+        }
         next();
+    } else {
+        if (to.name !== "login") {
+            next({ name: "login" });
+        } else {
+            next();
+        }
     }
 });
 
diff --git a/agdb_studio/src/services/auth.service.ts b/agdb_studio/src/services/auth.service.ts
index 5fe2a35a0..1115845f2 100644
--- a/agdb_studio/src/services/auth.service.ts
+++ b/agdb_studio/src/services/auth.service.ts
@@ -1,15 +1,16 @@
 import { AgdbApi } from "agdb_api";
 import type { AxiosError } from "axios";
 
-const client = await AgdbApi.client("http://localhost:3000").catch(
-    (error: AxiosError) => {
-        console.error(error.message);
-        return undefined;
-    },
-);
+const ACCESS_TOKEN = "studio_token";
+
+let client: AgdbApi.AgdbApiClient | undefined;
+
+export const getClient = (): AgdbApi.AgdbApiClient | undefined => {
+    return client;
+};
 
 const getLocalStorageToken = (): string | undefined => {
-    const token = localStorage.getItem("token") ?? undefined;
+    const token = localStorage.getItem(ACCESS_TOKEN) ?? undefined;
     if (token) {
         client?.set_token(token);
     }
@@ -17,7 +18,7 @@ const getLocalStorageToken = (): string | undefined => {
 };
 
 const setLocalStorageToken = (token: string): void => {
-    localStorage.setItem("token", token);
+    localStorage.setItem(ACCESS_TOKEN, token);
 };
 
 const getToken = (): string | undefined => {
@@ -28,6 +29,12 @@ const getToken = (): string | undefined => {
     return token;
 };
 
+const removeToken = (): void => {
+    client?.remove_token();
+    localStorage.removeItem(ACCESS_TOKEN);
+    location.reload();
+};
+
 export const isLoggedIn = (): boolean => {
     return getToken() !== undefined;
 };
@@ -41,3 +48,32 @@ export const login = async (
         return token;
     });
 };
+
+export const logout = async (): Promise<void> => {
+    if (!isLoggedIn()) {
+        return;
+    }
+    await client?.logout();
+    removeToken();
+};
+
+const initClient = async () => {
+    client = await AgdbApi.client("http://localhost:3000").catch(
+        (error: AxiosError) => {
+            console.error(error.message);
+            return undefined;
+        },
+    );
+
+    client?.interceptors.response.use(
+        (response) => response,
+        (error: AxiosError) => {
+            console.error(error.message);
+            if (error.response?.status === 401) {
+                removeToken();
+            }
+            return Promise.reject(error);
+        },
+    );
+};
+await initClient();

From 7bd30563d8e9983eaaff85defc3c7ab2ee4f4406 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 16:26:56 +0200
Subject: [PATCH 06/11] studio - fixed path

---
 agdb_studio/tests/router/router.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/agdb_studio/tests/router/router.test.ts b/agdb_studio/tests/router/router.test.ts
index 90c2350da..94934641e 100644
--- a/agdb_studio/tests/router/router.test.ts
+++ b/agdb_studio/tests/router/router.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { createRouter, createWebHistory } from "vue-router";
 import { mount } from "@vue/test-utils";
-import { routes } from "@/router/index";
+import { createRoutes } from "@/router/routes";
 import type { Router } from "vue-router";
 import HomeView from "@/views/HomeView.vue";
 import AboutView from "@/views/HomeView.vue";
@@ -13,7 +13,7 @@ describe("router", () => {
     beforeEach(async () => {
         router = createRouter({
             history: createWebHistory(),
-            routes,
+            routes: createRoutes(),
         });
 
         router.push("/");

From 92aa5385d426c6d20ef404cc914b060eeaa447e4 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 16:38:23 +0200
Subject: [PATCH 07/11] studio - fixed tests

---
 .github/workflows/agdb_studio.yaml | 144 ++++++++++++++---------------
 agdb_studio/README.md              |   2 +-
 agdb_studio/e2e/vue.spec.ts        |   4 +-
 agdb_studio/package.json           |   2 +-
 agdb_studio/playwright.config.ts   |  50 +++++-----
 5 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/.github/workflows/agdb_studio.yaml b/.github/workflows/agdb_studio.yaml
index e0fdb2259..93ab4258e 100644
--- a/.github/workflows/agdb_studio.yaml
+++ b/.github/workflows/agdb_studio.yaml
@@ -1,81 +1,81 @@
 name: agdb_studio
 
 on:
-  pull_request:
-    branches: ["main"]
+    pull_request:
+        branches: ["main"]
 
 jobs:
-  diff:
-    runs-on: ubuntu-latest
-    outputs:
-      diff: ${{ steps.diff.outputs.diff }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - id: diff
-        shell: bash
-        run: |
-          if [[ "$(git diff origin/main --name-only -- agdb_studio/ agdb_api/typescript/src/ agdb_api/typescript/package.json agdb_server/openapi/schema.json .github/workflows/agdb_studio.yaml)" != "" ]]; then (echo "diff=true" >> $GITHUB_OUTPUT); fi
+    diff:
+        runs-on: ubuntu-latest
+        outputs:
+            diff: ${{ steps.diff.outputs.diff }}
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - id: diff
+              shell: bash
+              run: |
+                  if [[ "$(git diff origin/main --name-only -- agdb_studio/ agdb_api/typescript/src/ agdb_api/typescript/package.json agdb_server/openapi/schema.json .github/workflows/agdb_studio.yaml)" != "" ]]; then (echo "diff=true" >> $GITHUB_OUTPUT); fi
 
-  agdb_studio_analyse:
-    runs-on: ubuntu-latest
-    needs: diff
-    if: needs.diff.outputs.diff == 'true'
-    defaults:
-      run:
-        working-directory: agdb_studio
-    steps:
-      - uses: actions/checkout@v4
-      - run: npm ci
-      - run: npm run lint
+    agdb_studio_analyse:
+        runs-on: ubuntu-latest
+        needs: diff
+        if: needs.diff.outputs.diff == 'true'
+        defaults:
+            run:
+                working-directory: agdb_studio
+        steps:
+            - uses: actions/checkout@v4
+            - run: npm ci
+            - run: npm run lint
 
-  agdb_studio_coverage:
-    runs-on: ubuntu-latest
-    needs: diff
-    if: needs.diff.outputs.diff == 'true'
-    defaults:
-      run:
-        working-directory: agdb_studio
-    steps:
-      - uses: actions/checkout@v4
-      - run: npm ci
-      - run: npm run test:unit
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: coverage
-          path: agdb_studio/coverage/
-          retention-days: 30
+    agdb_studio_coverage:
+        runs-on: ubuntu-latest
+        needs: diff
+        if: needs.diff.outputs.diff == 'true'
+        defaults:
+            run:
+                working-directory: agdb_studio
+        steps:
+            - uses: actions/checkout@v4
+            - run: npm ci
+            - run: npm run test
+            - uses: actions/upload-artifact@v4
+              if: always()
+              with:
+                  name: coverage
+                  path: agdb_studio/coverage/
+                  retention-days: 30
 
-  agdb_studio_e2e:
-    runs-on: ubuntu-latest
-    needs: diff
-    if: needs.diff.outputs.diff == 'true'
-    defaults:
-      run:
-        working-directory: agdb_studio
-    steps:
-      - uses: actions/checkout@v4
-      - run: npm ci
-      - run: npx playwright install --with-deps
-      - run: npm run build
-      - run: npm run test:e2e
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: e2e
-          path: agdb_studio/playwright-report/
-          retention-days: 30
+    agdb_studio_e2e:
+        runs-on: ubuntu-latest
+        needs: diff
+        if: needs.diff.outputs.diff == 'true'
+        defaults:
+            run:
+                working-directory: agdb_studio
+        steps:
+            - uses: actions/checkout@v4
+            - run: npm ci
+            - run: npx playwright install --with-deps
+            - run: npm run build
+            - run: npm run test:e2e
+            - uses: actions/upload-artifact@v4
+              if: always()
+              with:
+                  name: e2e
+                  path: agdb_studio/playwright-report/
+                  retention-days: 30
 
-  agdb_studio_format:
-    runs-on: ubuntu-latest
-    needs: diff
-    if: needs.diff.outputs.diff == 'true'
-    defaults:
-      run:
-        working-directory: agdb_studio
-    steps:
-      - uses: actions/checkout@v4
-      - run: npm ci
-      - run: npm run format:check
+    agdb_studio_format:
+        runs-on: ubuntu-latest
+        needs: diff
+        if: needs.diff.outputs.diff == 'true'
+        defaults:
+            run:
+                working-directory: agdb_studio
+        steps:
+            - uses: actions/checkout@v4
+            - run: npm ci
+            - run: npm run format:check
diff --git a/agdb_studio/README.md b/agdb_studio/README.md
index a323eb896..6e6817cd4 100644
--- a/agdb_studio/README.md
+++ b/agdb_studio/README.md
@@ -42,7 +42,7 @@ npm run build
 ### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
-npm run test:unit
+npm run test
 ```
 
 ### Run End-to-End Tests with [Playwright](https://playwright.dev)
diff --git a/agdb_studio/e2e/vue.spec.ts b/agdb_studio/e2e/vue.spec.ts
index 0a5c3c62c..9a54f1f8d 100644
--- a/agdb_studio/e2e/vue.spec.ts
+++ b/agdb_studio/e2e/vue.spec.ts
@@ -3,6 +3,6 @@ import { test, expect } from "@playwright/test";
 // See here how to get started:
 // https://playwright.dev/docs/intro
 test("visits the app root url", async ({ page }) => {
-    await page.goto("/");
-    await expect(page.locator("div.main-wrapper")).toBeVisible();
+    await page.goto("/login");
+    await expect(page.locator("div.login-form")).toBeVisible();
 });
diff --git a/agdb_studio/package.json b/agdb_studio/package.json
index 88b55b1c2..3737b09b2 100644
--- a/agdb_studio/package.json
+++ b/agdb_studio/package.json
@@ -13,7 +13,7 @@
         "lint": "eslint --max-warnings=0 . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
         "format": "prettier --write src/ e2e/ tests/",
         "format:check": "prettier --check src/ e2e/ tests/",
-        "before-commit": "npm run format && npm run lint && npm run test:unit && npm run test:e2e"
+        "before-commit": "npm run format && npm run lint && npm run test && npm run test:e2e"
     },
     "dependencies": {
         "@kalimahapps/vue-icons": "^1.7.1",
diff --git a/agdb_studio/playwright.config.ts b/agdb_studio/playwright.config.ts
index 86c497660..bf1ffcb37 100644
--- a/agdb_studio/playwright.config.ts
+++ b/agdb_studio/playwright.config.ts
@@ -53,32 +53,32 @@ const config: PlaywrightTestConfig = {
                 ...devices["Desktop Chrome"],
             },
         },
-        {
-            name: "firefox",
-            use: {
-                ...devices["Desktop Firefox"],
-            },
-        },
-        {
-            name: "webkit",
-            use: {
-                ...devices["Desktop Safari"],
-            },
-        },
+        // {
+        //     name: "firefox",
+        //     use: {
+        //         ...devices["Desktop Firefox"],
+        //     },
+        // },
+        // {
+        //     name: "webkit",
+        //     use: {
+        //         ...devices["Desktop Safari"],
+        //     },
+        // },
 
-        /* Test against mobile viewports. */
-        {
-            name: "Mobile Chrome",
-            use: {
-                ...devices["Pixel 5"],
-            },
-        },
-        {
-            name: "Mobile Safari",
-            use: {
-                ...devices["iPhone 12"],
-            },
-        },
+        // /* Test against mobile viewports. */
+        // {
+        //     name: "Mobile Chrome",
+        //     use: {
+        //         ...devices["Pixel 5"],
+        //     },
+        // },
+        // {
+        //     name: "Mobile Safari",
+        //     use: {
+        //         ...devices["iPhone 12"],
+        //     },
+        // },
 
         /* Test against branded browsers. */
         // {

From 91ba43db2282423e8ba0e7ac8afcc54be7f107e6 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 16:46:43 +0200
Subject: [PATCH 08/11] studio - fixed tests

---
 .github/workflows/agdb_studio.yaml       | 8 ++++++++
 agdb_api/typescript/src/client.ts        | 6 +++---
 agdb_studio/src/services/auth.service.ts | 2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/agdb_studio.yaml b/.github/workflows/agdb_studio.yaml
index 93ab4258e..6b16a8adc 100644
--- a/.github/workflows/agdb_studio.yaml
+++ b/.github/workflows/agdb_studio.yaml
@@ -39,6 +39,10 @@ jobs:
                 working-directory: agdb_studio
         steps:
             - uses: actions/checkout@v4
+            - run: npm ci
+              working-directory: agdb_api/typescript
+            - run: npm run build
+              working-directory: agdb_api/typescript
             - run: npm ci
             - run: npm run test
             - uses: actions/upload-artifact@v4
@@ -57,6 +61,10 @@ jobs:
                 working-directory: agdb_studio
         steps:
             - uses: actions/checkout@v4
+            - run: npm ci
+              working-directory: agdb_api/typescript
+            - run: npm run build
+              working-directory: agdb_api/typescript
             - run: npm ci
             - run: npx playwright install --with-deps
             - run: npm run build
diff --git a/agdb_api/typescript/src/client.ts b/agdb_api/typescript/src/client.ts
index 7c701e2a0..ca8f301b3 100644
--- a/agdb_api/typescript/src/client.ts
+++ b/agdb_api/typescript/src/client.ts
@@ -7,7 +7,7 @@ type AgdbApi = {
     logout: () => Promise<void>;
     get_token: () => string | undefined;
     set_token: (token: string) => void; // eslint-disable-line no-unused-vars
-    remove_token: () => void;
+    reset_token: () => void;
 };
 
 async function login(username: string, password: string): Promise<string> {
@@ -37,7 +37,7 @@ function set_token(token: string): void {
     });
 }
 
-function remove_token(): void {
+function reset_token(): void {
     this.token = undefined;
     this.interceptors.request.use((config: AxiosRequestConfig) => {
         return config;
@@ -56,6 +56,6 @@ export async function client(address: String): Promise<AgdbApiClient> {
     client.logout = logout;
     client.set_token = set_token;
     client.get_token = get_token;
-    client.remove_token = remove_token;
+    client.reset_token = reset_token;
     return client;
 }
diff --git a/agdb_studio/src/services/auth.service.ts b/agdb_studio/src/services/auth.service.ts
index 1115845f2..97689f508 100644
--- a/agdb_studio/src/services/auth.service.ts
+++ b/agdb_studio/src/services/auth.service.ts
@@ -30,7 +30,7 @@ const getToken = (): string | undefined => {
 };
 
 const removeToken = (): void => {
-    client?.remove_token();
+    client?.reset_token();
     localStorage.removeItem(ACCESS_TOKEN);
     location.reload();
 };

From 649cf2a96e74f5c64906c52183da8bd174209cf6 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 16:49:02 +0200
Subject: [PATCH 09/11] studio - fixed tests

---
 agdb_api/typescript/src/client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agdb_api/typescript/src/client.ts b/agdb_api/typescript/src/client.ts
index ca8f301b3..f61571287 100644
--- a/agdb_api/typescript/src/client.ts
+++ b/agdb_api/typescript/src/client.ts
@@ -26,7 +26,7 @@ function get_token(): string | undefined {
 
 async function logout(): Promise<void> {
     await this.user_logout();
-    this.remove_token();
+    this.reset_token();
 }
 
 function set_token(token: string): void {

From d8e127a56293b47fcc9f158452bb92ff11fa277e Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 16:55:24 +0200
Subject: [PATCH 10/11] studio - vite config

---
 agdb_studio/vite.config.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/agdb_studio/vite.config.ts b/agdb_studio/vite.config.ts
index 4695fa8f5..8e03c3911 100644
--- a/agdb_studio/vite.config.ts
+++ b/agdb_studio/vite.config.ts
@@ -11,7 +11,4 @@ export default defineConfig({
             "@": fileURLToPath(new URL("./src", import.meta.url)),
         },
     },
-    build: {
-        target: ["es2015", "edge88", "firefox78", "chrome87", "safari12"],
-    },
 });

From 722992067c6bdb23a2f8e3558610acd3f6bafe81 Mon Sep 17 00:00:00 2001
From: Jana Vlachova <jana.vlach@gmail.com>
Date: Sun, 20 Oct 2024 17:04:13 +0200
Subject: [PATCH 11/11] studio - config

---
 .github/workflows/agdb_studio.yaml | 160 ++++++++++++++---------------
 agdb_studio/vite.config.ts         |   5 +
 2 files changed, 85 insertions(+), 80 deletions(-)

diff --git a/.github/workflows/agdb_studio.yaml b/.github/workflows/agdb_studio.yaml
index 6b16a8adc..0e1652361 100644
--- a/.github/workflows/agdb_studio.yaml
+++ b/.github/workflows/agdb_studio.yaml
@@ -1,89 +1,89 @@
 name: agdb_studio
 
 on:
-    pull_request:
-        branches: ["main"]
+  pull_request:
+    branches: ["main"]
 
 jobs:
-    diff:
-        runs-on: ubuntu-latest
-        outputs:
-            diff: ${{ steps.diff.outputs.diff }}
-        steps:
-            - uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-            - id: diff
-              shell: bash
-              run: |
-                  if [[ "$(git diff origin/main --name-only -- agdb_studio/ agdb_api/typescript/src/ agdb_api/typescript/package.json agdb_server/openapi/schema.json .github/workflows/agdb_studio.yaml)" != "" ]]; then (echo "diff=true" >> $GITHUB_OUTPUT); fi
+  diff:
+    runs-on: ubuntu-latest
+    outputs:
+      diff: ${{ steps.diff.outputs.diff }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - id: diff
+        shell: bash
+        run: |
+          if [[ "$(git diff origin/main --name-only -- agdb_studio/ agdb_api/typescript/src/ agdb_api/typescript/package.json agdb_server/openapi/schema.json .github/workflows/agdb_studio.yaml)" != "" ]]; then (echo "diff=true" >> $GITHUB_OUTPUT); fi
 
-    agdb_studio_analyse:
-        runs-on: ubuntu-latest
-        needs: diff
-        if: needs.diff.outputs.diff == 'true'
-        defaults:
-            run:
-                working-directory: agdb_studio
-        steps:
-            - uses: actions/checkout@v4
-            - run: npm ci
-            - run: npm run lint
+  agdb_studio_analyse:
+    runs-on: ubuntu-latest
+    needs: diff
+    if: needs.diff.outputs.diff == 'true'
+    defaults:
+      run:
+        working-directory: agdb_studio
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci
+      - run: npm run lint
 
-    agdb_studio_coverage:
-        runs-on: ubuntu-latest
-        needs: diff
-        if: needs.diff.outputs.diff == 'true'
-        defaults:
-            run:
-                working-directory: agdb_studio
-        steps:
-            - uses: actions/checkout@v4
-            - run: npm ci
-              working-directory: agdb_api/typescript
-            - run: npm run build
-              working-directory: agdb_api/typescript
-            - run: npm ci
-            - run: npm run test
-            - uses: actions/upload-artifact@v4
-              if: always()
-              with:
-                  name: coverage
-                  path: agdb_studio/coverage/
-                  retention-days: 30
+  agdb_studio_coverage:
+    runs-on: ubuntu-latest
+    needs: diff
+    if: needs.diff.outputs.diff == 'true'
+    defaults:
+      run:
+        working-directory: agdb_studio
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci
+        working-directory: agdb_api/typescript
+      - run: npm run build
+        working-directory: agdb_api/typescript
+      - run: npm ci
+      - run: npm run test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage
+          path: agdb_studio/coverage/
+          retention-days: 30
 
-    agdb_studio_e2e:
-        runs-on: ubuntu-latest
-        needs: diff
-        if: needs.diff.outputs.diff == 'true'
-        defaults:
-            run:
-                working-directory: agdb_studio
-        steps:
-            - uses: actions/checkout@v4
-            - run: npm ci
-              working-directory: agdb_api/typescript
-            - run: npm run build
-              working-directory: agdb_api/typescript
-            - run: npm ci
-            - run: npx playwright install --with-deps
-            - run: npm run build
-            - run: npm run test:e2e
-            - uses: actions/upload-artifact@v4
-              if: always()
-              with:
-                  name: e2e
-                  path: agdb_studio/playwright-report/
-                  retention-days: 30
+  agdb_studio_e2e:
+    runs-on: ubuntu-latest
+    needs: diff
+    if: needs.diff.outputs.diff == 'true'
+    defaults:
+      run:
+        working-directory: agdb_studio
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci
+        working-directory: agdb_api/typescript
+      - run: npm run build
+        working-directory: agdb_api/typescript
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npm run build
+      - run: npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: e2e
+          path: agdb_studio/playwright-report/
+          retention-days: 30
 
-    agdb_studio_format:
-        runs-on: ubuntu-latest
-        needs: diff
-        if: needs.diff.outputs.diff == 'true'
-        defaults:
-            run:
-                working-directory: agdb_studio
-        steps:
-            - uses: actions/checkout@v4
-            - run: npm ci
-            - run: npm run format:check
+  agdb_studio_format:
+    runs-on: ubuntu-latest
+    needs: diff
+    if: needs.diff.outputs.diff == 'true'
+    defaults:
+      run:
+        working-directory: agdb_studio
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci
+      - run: npm run format:check
diff --git a/agdb_studio/vite.config.ts b/agdb_studio/vite.config.ts
index 8e03c3911..12a8222a8 100644
--- a/agdb_studio/vite.config.ts
+++ b/agdb_studio/vite.config.ts
@@ -11,4 +11,9 @@ export default defineConfig({
             "@": fileURLToPath(new URL("./src", import.meta.url)),
         },
     },
+    esbuild: {
+        supported: {
+            "top-level-await": true,
+        },
+    },
 });