make the driver more composite

src/app/(outerbase)/local/edit-base/[baseId]/page.tsx

@@ -41,12 +41,11 @@ export default function LocalEditBasePage() {
     setValidateErrors(errors);
     if (Object.keys(errors).length > 0) return;
 
-    setLoading(true);
     const tmp = await updateLocalConnection(baseId, template.localTo(value));
     router.push(
       tmp?.content.driver === "sqlite-filehandler"
         ? `/playground/client?s=${tmp?.content.id}`
-        : `/client/s/${tmp?.content.driver ?? "turso"}?p=${tmp?.content.id}`
+        : `/client/s/${tmp?.content.driver ?? "turso"}?p=${baseId}`
     );
   }, [template, value, router, baseId]);
 

src/app/(outerbase)/local/hooks.tsx

@@ -134,7 +134,12 @@ export async function updateLocalConnection(
   };
 
   await localDb.connection.put(data);
+
   mutate("/connections/local");
+  mutate("/connections/local/" + id, data, {
+    optimisticData: data,
+    revalidate: false,
+  });
 
   return data;
 }

src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx

@@ -8,6 +8,9 @@ import {
   createPostgreSQLExtensions,
   createSQLiteExtensions,
 } from "@/core/standard-extension";
+import MySQLLikeDriver from "@/drivers/mysql/mysql-driver";
+import PostgresLikeDriver from "@/drivers/postgres/postgres-driver";
+import { SqliteLikeBaseDriver } from "@/drivers/sqlite-base-driver";
 import DataCatalogExtension from "@/extensions/data-catalog";
 import OuterbaseExtension from "@/extensions/outerbase";
 import {
@@ -17,9 +20,7 @@ import {
 import { OuterbaseAPIBaseCredential } from "@/outerbase-cloud/api-type";
 import { getOuterbaseBaseCredential } from "@/outerbase-cloud/api-workspace";
 import DataCatalogOuterbaseDriver from "@/outerbase-cloud/data-catalog-driver";
-import { OuterbaseMySQLDriver } from "@/outerbase-cloud/database/mysql";
-import { OuterbasePostgresDriver } from "@/outerbase-cloud/database/postgresql";
-import { OuterbaseSqliteDriver } from "@/outerbase-cloud/database/sqlite";
+import { OuterbaseQueryable } from "@/outerbase-cloud/database/query";
 import OuterbaseQueryDriver from "@/outerbase-cloud/query-driver";
 import { useParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
@@ -74,15 +75,18 @@ export default function OuterbaseSourcePage() {
 
     if (dialect === "postgres") {
       return [
-        new OuterbasePostgresDriver(outerbaseConfig),
+        new PostgresLikeDriver(new OuterbaseQueryable(outerbaseConfig)),
         new StudioExtensionManager([
           ...createPostgreSQLExtensions(),
           ...outerbaseSpecifiedDrivers,
         ]),
       ];
     } else if (dialect === "mysql") {
       return [
-        new OuterbaseMySQLDriver(outerbaseConfig, credential.database),
+        new MySQLLikeDriver(
+          new OuterbaseQueryable(outerbaseConfig),
+          credential.database
+        ),
         new StudioExtensionManager([
           ...createMySQLExtensions(),
           ...outerbaseSpecifiedDrivers,
@@ -91,7 +95,7 @@ export default function OuterbaseSourcePage() {
     }
 
     return [
-      new OuterbaseSqliteDriver(outerbaseConfig),
+      new SqliteLikeBaseDriver(new OuterbaseQueryable(outerbaseConfig)),
       new StudioExtensionManager([
         ...createSQLiteExtensions(),
         ...outerbaseSpecifiedDrivers,

src/app/(theme)/client/s/starbase/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useLocalConnection } from "@/app/(outerbase)/local/hooks";
+import ClientOnly from "@/components/client-only";
+import { Studio } from "@/components/gui/studio";
+import PageLoading from "@/components/page-loading";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import {
+  createMySQLExtensions,
+  createPostgreSQLExtensions,
+  createSQLiteExtensions,
+  createStandardExtensions,
+} from "@/core/standard-extension";
+import { StarbaseQuery } from "@/drivers/database/starbasedb";
+import MySQLLikeDriver from "@/drivers/mysql/mysql-driver";
+import PostgresLikeDriver from "@/drivers/postgres/postgres-driver";
+import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
+import { SqliteLikeBaseDriver } from "@/drivers/sqlite-base-driver";
+import { useAvailableAIAgents } from "@/lib/ai-agent-storage";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+function StarbasePageBody() {
+  const params = useSearchParams();
+  const baseId = params.get("p") ?? "";
+
+  const { data: conn } = useLocalConnection(baseId);
+  const [queryable, setQueryable] = useState<StarbaseQuery | null>(null);
+  const [driverType, setDriverType] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (conn && conn.content.driver === "starbase") {
+      if (conn.content.starbase_type === "hyperdrive") {
+        setDriverType("postgres");
+      } else if (conn.content.starbase_type !== "external") {
+        setDriverType("sqlite");
+      }
+
+      setQueryable(
+        new StarbaseQuery(
+          conn.content.url!,
+          conn.content.token!,
+          conn.content.starbase_type ?? "internal"
+        )
+      );
+    }
+  }, [conn]);
+
+  // Starbase is a complicated database. Since we never know
+  // what is behind it. It can be Postgres, SQLite, MySQL etc...
+  useEffect(() => {
+    if (driverType) return;
+    if (!queryable) return;
+
+    // Make one version call
+    queryable.query("SELECT VERSION() AS v").then((result) => {
+      if ((result.rows[0].v as string).includes("PostgreSQL"))
+        setDriverType("postgres");
+      else setDriverType("mysql");
+    });
+  }, [driverType, queryable]);
+
+  // Load extensions
+  const extensions = useMemo(() => {
+    if (driverType === "mysql") {
+      return new StudioExtensionManager(createMySQLExtensions());
+    } else if (driverType === "sqlite") {
+      return new StudioExtensionManager(createSQLiteExtensions());
+    } else if (driverType === "postgres") {
+      return new StudioExtensionManager(createPostgreSQLExtensions());
+    }
+
+    return new StudioExtensionManager(createStandardExtensions());
+  }, [driverType]);
+
+  // Load drivers
+  const driver = useMemo(() => {
+    if (!queryable) return null;
+
+    if (driverType === "sqlite") {
+      return new SqliteLikeBaseDriver(queryable);
+    } else if (driverType === "postgres") {
+      return new PostgresLikeDriver(queryable);
+    } else if (driverType === "mysql") {
+      return new MySQLLikeDriver(queryable);
+    }
+  }, [driverType, queryable]);
+
+  const docDriver = useMemo(() => {
+    if (conn) {
+      return new IndexdbSavedDoc(conn.id);
+    }
+  }, [conn]);
+
+  const agentDriver = useAvailableAIAgents(driver);
+
+  const router = useRouter();
+
+  const goBack = useCallback(() => {
+    router.push("/");
+  }, [router]);
+
+  if (!driver || !conn || !extensions) {
+    return <PageLoading>Loading Starbase</PageLoading>;
+  }
+
+  return (
+    <Studio
+      extensions={extensions}
+      driver={driver}
+      name={conn?.content.name}
+      color={conn?.content.label ?? "blue"}
+      onBack={goBack}
+      docDriver={docDriver}
+      agentDriver={agentDriver}
+    />
+  );
+}
+
+export default function StarbasePage() {
+  return (
+    <ClientOnly>
+      <StarbasePageBody />
+    </ClientOnly>
+  );
+}

src/app/(theme)/connect/saved-connection-storage.ts

@@ -57,4 +57,5 @@ export interface SavedConnectionRawLocalStorage {
   file_handler?: string;
   description?: string;
   last_used?: number;
+  starbase_type?: string;
 }

src/app/(theme)/embed/[driver]/page-client.tsx

@@ -6,12 +6,11 @@ import {
   createPostgreSQLExtensions,
   createSQLiteExtensions,
 } from "@/core/standard-extension";
-import {
-  IframeMySQLDriver,
-  IframePostgresDriver,
-  IframeSQLiteDriver,
-} from "@/drivers/iframe-driver";
+import { EmbedQueryable } from "@/drivers/iframe-driver";
+import MySQLLikeDriver from "@/drivers/mysql/mysql-driver";
+import PostgresLikeDriver from "@/drivers/postgres/postgres-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
+import { SqliteLikeBaseDriver } from "@/drivers/sqlite-base-driver";
 import DoltExtension from "@/extensions/dolt";
 import LocalSettingSidebar from "@/extensions/local-setting-sidebar";
 import { useAvailableAIAgents } from "@/lib/ai-agent-storage";
@@ -25,8 +24,9 @@ export default function EmbedPageClient({
 }) {
   const searchParams = useSearchParams();
 
-  const driver = useMemo(() => {
-    return createDatabaseDriver(driverName);
+  const [driver, queryable] = useMemo(() => {
+    const queryable = new EmbedQueryable();
+    return [createDatabaseDriver(driverName, queryable), queryable];
   }, [driverName]);
 
   const savedDocDriver = useMemo(() => {
@@ -42,8 +42,8 @@ export default function EmbedPageClient({
   const agentDriver = useAvailableAIAgents(driver);
 
   useEffect(() => {
-    return driver.listen();
-  }, [driver]);
+    return queryable.listen();
+  }, [queryable]);
 
   return (
     <Studio
@@ -57,25 +57,20 @@ export default function EmbedPageClient({
   );
 }
 
-function createDatabaseDriver(driverName: string) {
+function createDatabaseDriver(driverName: string, queryable: EmbedQueryable) {
   if (driverName === "turso") {
-    return new IframeSQLiteDriver({
-      supportPragmaList: false,
-      supportBigInt: true,
-    });
+    return new SqliteLikeBaseDriver(queryable);
   } else if (driverName === "sqlite") {
-    return new IframeSQLiteDriver();
+    return new SqliteLikeBaseDriver(queryable);
   } else if (driverName === "starbase") {
-    return new IframeSQLiteDriver({
-      supportPragmaList: false,
-    });
+    return new SqliteLikeBaseDriver(queryable);
   } else if (driverName === "mysql" || driverName === "dolt") {
-    return new IframeMySQLDriver();
+    return new MySQLLikeDriver(queryable, "");
   } else if (driverName === "postgres") {
-    return new IframePostgresDriver();
+    return new PostgresLikeDriver(queryable);
   }
 
-  return new IframeSQLiteDriver();
+  return new SqliteLikeBaseDriver(queryable);
 }
 
 function createEmbedExtensions(driverName: string) {

src/app/(theme)/playground/client/page-client.tsx

@@ -8,7 +8,7 @@ import {
 import ScreenDropZone from "@/components/screen-dropzone";
 import { StudioExtensionManager } from "@/core/extension-manager";
 import { createSQLiteExtensions } from "@/core/standard-extension";
-import SqljsDriver from "@/drivers/sqljs-driver";
+import SqljsDriver from "@/drivers/database/sqljs";
 import { localDb } from "@/indexdb";
 import { useAvailableAIAgents } from "@/lib/ai-agent-storage";
 import downloadFileFromUrl from "@/lib/download-file";

src/app/api/events/insert-tracking-record.ts

@@ -1,8 +1,9 @@
 "use server";
 
-import StarbaseDriver from "@/drivers/starbase-driver";
+import { StarbaseQuery } from "@/drivers/database/starbasedb";
 import { env } from "@/env";
 import { generateId } from "@/lib/generate-id";
+import { escapeSqlValue } from "@outerbase/sdk-transform";
 import { type TrackEventItem } from "../../../lib/tracking";
 
 export async function insertTrackingRecord(
@@ -16,9 +17,10 @@ export async function insertTrackingRecord(
     };
   }
 
-  const trackingDb = new StarbaseDriver(env.DATABASE_ANALYTIC_URL, {
-    Authorization: "Bearer " + env.DATABASE_ANALYTIC_AUTH_TOKEN,
-  });
+  const trackingDb = new StarbaseQuery(
+    env.DATABASE_ANALYTIC_URL,
+    env.DATABASE_ANALYTIC_AUTH_TOKEN
+  );
 
   const sql = [
     "INSERT INTO events(id, created_at, user_id, event_name, event_data) VALUES",
@@ -33,7 +35,7 @@ export async function insertTrackingRecord(
             event.name,
             JSON.stringify(event.data),
           ]
-            .map(trackingDb.escapeValue)
+            .map(escapeSqlValue)
             .join(", ") +
           ")"
       )