feat: add driver selection feature to NewEnvironmentDialog and related hooks

hotlong · hotlong · commit 196edd77f7d0 · 2026-04-19T19:47:32.000+08:00
diff --git a/apps/studio/src/components/new-environment-dialog.tsx b/apps/studio/src/components/new-environment-dialog.tsx
@@ -13,7 +13,7 @@
  * and navigating into the new environment.
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Environment, EnvironmentType } from '@objectstack/spec/cloud';
 import {
   Dialog,
@@ -33,7 +33,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { useProvisionEnvironment } from '@/hooks/useEnvironments';
+import { useDrivers, useProvisionEnvironment } from '@/hooks/useEnvironments';
 import { toast } from '@/hooks/use-toast';
 
 const ENV_TYPES: { value: EnvironmentType; label: string; hint: string }[] = [
@@ -58,16 +58,30 @@ export function NewEnvironmentDialog({
   onCreated,
 }: NewEnvironmentDialogProps) {
   const { provision, provisioning } = useProvisionEnvironment();
+  const { drivers, loading: driversLoading } = useDrivers();
   const [slug, setSlug] = useState('');
   const [displayName, setDisplayName] = useState('');
   const [envType, setEnvType] = useState<EnvironmentType>('development');
   const [region, setRegion] = useState('');
+  const [driver, setDriver] = useState<string>('');
+
+  // Auto-select a sensible default once drivers load: prefer turso, then memory,
+  // otherwise the first registered driver.
+  useEffect(() => {
+    if (driver || drivers.length === 0) return;
+    const preferred =
+      drivers.find((d) => d.name === 'turso') ??
+      drivers.find((d) => d.name === 'memory') ??
+      drivers[0];
+    if (preferred) setDriver(preferred.name);
+  }, [driver, drivers]);
 
   const reset = () => {
     setSlug('');
     setDisplayName('');
     setEnvType('development');
     setRegion('');
+    setDriver('');
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -82,6 +96,7 @@ export function NewEnvironmentDialog({
         displayName: displayName.trim() || undefined,
         envType,
         region: region.trim() || undefined,
+        driver: driver || undefined,
       } as any);
       const env = (res?.environment ?? res) as Environment;
       toast({
@@ -164,6 +179,43 @@ export function NewEnvironmentDialog({
               </Select>
             </div>
 
+            <div className="grid gap-1.5">
+              <Label>Driver</Label>
+              <Select
+                value={driver}
+                onValueChange={setDriver}
+                disabled={driversLoading || drivers.length === 0}
+              >
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={
+                      driversLoading
+                        ? 'Loading drivers…'
+                        : drivers.length === 0
+                          ? 'No drivers registered'
+                          : 'Select a driver'
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {drivers.map((d) => (
+                    <SelectItem key={d.driverId} value={d.name}>
+                      <div className="flex flex-col">
+                        <span>{d.name}</span>
+                        <span className="text-[11px] text-muted-foreground">
+                          {d.driverId}
+                        </span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-[11px] text-muted-foreground">
+                Where this environment's data will be stored. `memory` is ideal
+                for tests; `turso` persists to libSQL.
+              </p>
+            </div>
+
             <div className="grid gap-1.5">
               <Label htmlFor="env-region">Region (optional)</Label>
               <Input
diff --git a/apps/studio/src/hooks/useEnvironments.ts b/apps/studio/src/hooks/useEnvironments.ts
@@ -128,6 +128,45 @@ export function useEnvironmentDetail(environmentId: string | undefined) {
   return { detail, loading, error };
 }
 
+/**
+ * Hook: list ObjectQL drivers registered on the server.
+ *
+ * Used by the NewEnvironmentDialog to populate the "Driver" selector. The
+ * server exposes whatever drivers are registered via `DriverPlugin`
+ * (`memory`, `turso`, or future `sql` drivers) — Studio does not hardcode
+ * any particular driver.
+ */
+export function useDrivers() {
+  const client = useClient() as any;
+  const [drivers, setDrivers] = useState<Array<{ name: string; driverId: string }>>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!client?.environments?.listDrivers) return;
+    let alive = true;
+    setLoading(true);
+    (async () => {
+      try {
+        const result = await client.environments.listDrivers();
+        if (!alive) return;
+        setDrivers(result?.drivers ?? []);
+      } catch (err) {
+        if (!alive) return;
+        setError(err as Error);
+        setDrivers([]);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [client]);
+
+  return { drivers, loading, error };
+}
+
 /**
  * Hook: provision a new environment via the control-plane API.
  */
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
@@ -693,6 +693,17 @@ export class ObjectStackClient {
       const res = await this.fetch(`${this.baseUrl}/api/v1/cloud/environments/${encodeURIComponent(id)}/members`);
       return this.unwrapResponse<{ members: any[] }>(res);
     },
+
+    /**
+     * List ObjectQL drivers registered on the server. Useful for populating a
+     * driver selector when provisioning a new environment (memory / turso /
+     * future sql drivers). Returned `name` is the short alias (e.g. `memory`,
+     * `turso`); `driverId` is the full FQN (e.g. `com.objectstack.driver.memory`).
+     */
+    listDrivers: async () => {
+      const res = await this.fetch(`${this.baseUrl}/api/v1/cloud/drivers`);
+      return this.unwrapResponse<{ drivers: Array<{ name: string; driverId: string }>; total: number }>(res);
+    },
   };
 
   /**
diff --git a/packages/runtime/src/dispatcher-plugin.ts b/packages/runtime/src/dispatcher-plugin.ts
@@ -318,6 +318,15 @@ export function createDispatcherPlugin(config: DispatcherPluginConfig = {}): Plu
             });
 
             // ── Cloud (Environments) ─────────────────────────────────────
+            server.get(`${prefix}/cloud/drivers`, async (req: any, res: any) => {
+                try {
+                    const result = await dispatcher.handleCloud('/drivers', 'GET', {}, req.query, { request: req });
+                    sendResult(result, res);
+                } catch (err: any) {
+                    errorResponse(err, res);
+                }
+            });
+
             server.get(`${prefix}/cloud/environments`, async (req: any, res: any) => {
                 try {
                     const result = await dispatcher.handleCloud('/environments', 'GET', {}, req.query, { request: req });
diff --git a/packages/runtime/src/http-dispatcher.ts b/packages/runtime/src/http-dispatcher.ts
@@ -939,14 +939,25 @@ export class HttpDispatcher {
     /**
      * Cloud / Environment Control-Plane routes.
      *
+     *  - GET    /cloud/drivers                                 → list registered ObjectQL drivers (for env provisioning)
      *  - GET    /cloud/environments                            → list
-     *  - POST   /cloud/environments                            → provision
+     *  - POST   /cloud/environments                            → provision (driver: memory | turso | <any registered driver>)
      *  - GET    /cloud/environments/:id                        → detail (+ db, credential, membership)
      *  - PATCH  /cloud/environments/:id                        → update displayName / plan / status / isDefault / metadata
      *  - POST   /cloud/environments/:id/activate               → mark as active for session (stub)
      *  - POST   /cloud/environments/:id/credentials/rotate     → rotate credential
      *  - GET    /cloud/environments/:id/members                → list members
      *
+     * Driver binding
+     * --------------
+     * Environments are not tied to any specific driver. At provisioning time the
+     * caller passes `driver` (a short name such as `memory`, `turso`, or any
+     * future `sql` / `postgres` driver). The dispatcher validates the name
+     * against the kernel's registered driver services (`driver.<name>`) and
+     * derives an appropriate placeholder `database_url` for the chosen driver.
+     * If `driver` is omitted, the dispatcher auto-selects the first available
+     * in preference order: turso → memory → any other registered driver.
+     *
      * Backed by ObjectQL sys__environment / sys__environment_database /
      * sys__database_credential / sys__environment_member tables (registered
      * by `@objectstack/service-tenant`'s `createTenantPlugin`).
@@ -966,6 +977,54 @@ export class HttpDispatcher {
         const CRED = 'sys__database_credential';
         const MEM = 'sys__environment_member';
 
+        // Enumerate registered ObjectQL drivers. Driver services are registered
+        // by `DriverPlugin` under the key `driver.<driver.name>` where
+        // `driver.name` is typically the full FQN like `com.objectstack.driver.memory`.
+        // We derive a short name by stripping the `com.objectstack.driver.` prefix.
+        const toShortName = (driverId: string): string => {
+            const prefix = 'com.objectstack.driver.';
+            return driverId.startsWith(prefix) ? driverId.slice(prefix.length) : driverId;
+        };
+        const listRegisteredDrivers = (): Array<{ name: string; driverId: string }> => {
+            const services = this.getServicesMap();
+            const drivers: Array<{ name: string; driverId: string }> = [];
+            for (const [serviceKey, svc] of Object.entries(services)) {
+                if (!serviceKey.startsWith('driver.')) continue;
+                const raw = serviceKey.slice('driver.'.length);
+                if (!raw || raw === 'unknown') continue;
+                const driverId = (svc as any)?.name ?? raw;
+                drivers.push({ name: toShortName(driverId), driverId });
+            }
+            return drivers;
+        };
+
+        const resolveDriver = (requested: string | undefined): { name: string; driverId: string } | undefined => {
+            const registered = listRegisteredDrivers();
+            if (requested) {
+                const wanted = String(requested).toLowerCase();
+                return registered.find((d) => d.name === wanted || d.driverId === wanted);
+            }
+            // Auto-pick: prefer turso, then memory, then whatever is available.
+            return (
+                registered.find((d) => d.name === 'turso') ??
+                registered.find((d) => d.name === 'memory') ??
+                registered[0]
+            );
+        };
+
+        const buildDatabaseUrl = (driverName: string, environmentId: string): string => {
+            const dbName = `env-${environmentId}`;
+            switch (driverName) {
+                case 'memory':
+                    return `memory://${dbName}`;
+                case 'turso':
+                    return `libsql://${dbName}.mock-turso.local`;
+                default:
+                    // Generic placeholder for future SQL / postgres / mysql drivers.
+                    return `${driverName}://${dbName}`;
+            }
+        };
+
         const findOne = async (obj: string, where: Record<string, unknown>): Promise<any | undefined> => {
             let rows = await ql.find(obj, { where } as any);
             if (rows && (rows as any).value) rows = (rows as any).value;
@@ -974,6 +1033,12 @@ export class HttpDispatcher {
         };
 
         try {
+            // ----- /cloud/drivers ------------------------------------------
+            if (parts.length === 1 && parts[0] === 'drivers' && m === 'GET') {
+                const drivers = listRegisteredDrivers();
+                return { handled: true, response: this.success({ drivers, total: drivers.length }) };
+            }
+
             // ----- /cloud/environments collection routes -----
             if (parts.length === 1 && parts[0] === 'environments' && m === 'GET') {
                 const where: Record<string, unknown> = {};
@@ -995,10 +1060,34 @@ export class HttpDispatcher {
                 const environmentDatabaseId = randomUUID();
                 const credentialId = randomUUID();
                 const nowIso = new Date().toISOString();
-                const driver = req.driver ?? 'turso';
+
+                // Bind environment to a driver. `req.driver` is optional — any
+                // registered ObjectQL driver is accepted (memory / turso / future
+                // sql / postgres). If omitted, pick the best default available.
+                const resolved = resolveDriver(req.driver);
+                if (!resolved) {
+                    const available = listRegisteredDrivers().map((d) => d.name);
+                    if (req.driver) {
+                        return {
+                            handled: true,
+                            response: this.error(
+                                `Unknown driver '${req.driver}'. Available drivers: [${available.join(', ') || 'none'}]`,
+                                400,
+                            ),
+                        };
+                    }
+                    return {
+                        handled: true,
+                        response: this.error(
+                            'No ObjectQL driver is registered. Register at least one DriverPlugin (e.g. InMemoryDriver or TursoDriver).',
+                            503,
+                        ),
+                    };
+                }
+                const driver = resolved.name;
                 const region = req.region ?? 'us-east-1';
                 const databaseName = `env-${environmentId}`;
-                const databaseUrl = `libsql://${databaseName}.mock-${driver}.local`;
+                const databaseUrl = buildDatabaseUrl(driver, environmentId);
                 const plaintextSecret = `mock-token-${environmentId}`;
 
                 await ql.insert(ENV, {
