feat: add type-safe sql queries with query registry

.gitignore

@@ -10,3 +10,6 @@ coverage
 docs
 
 .turbo
+
+# AppKit type generation cache
+.appkit-types-cache.json

apps/dev-playground/client/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

apps/dev-playground/client/src/appKitTypes.d.ts

@@ -1,75 +1,160 @@
 // Auto-generated by AppKit - DO NOT EDIT
+// Generated by 'npx appkit-generate-types' or Vite plugin during build
 import "@databricks/app-kit-ui/react";
+import type { SQLTypeMarker, SQLStringMarker, SQLNumberMarker, SQLBooleanMarker, SQLBinaryMarker, SQLDateMarker, SQLTimestampMarker } from "@databricks/app-kit-ui/js";
 
 declare module "@databricks/app-kit-ui/react" {
-  interface PluginRegistry {
-    "reconnect": {
-      "/": {
-          message: string;
+  interface QueryRegistry {
+    apps_list: {
+        name: "apps_list";
+        parameters: Record<string, never>;
+        result: Array<{
+          /** @sqlType STRING */
+          id: string;
+          /** @sqlType STRING */
+          name: string;
+          /** @sqlType STRING */
+          creator: string;
+          /** @sqlType STRING */
+          tags: string;
+          /** @sqlType DECIMAL(38,6) */
+          totalSpend: number;
+          /** @sqlType DATE */
+          createdAt: string;
+        }>;
       };
-      "/stream": {
-          type: string;
-          count: number;
-          total: number;
-          timestamp: string;
-          content: string;
+    cost_recommendations: {
+        name: "cost_recommendations";
+        parameters: Record<string, never>;
+        result: Array<{
+          /** @sqlType INT */
+          dummy: number;
+        }>;
       };
-    }
-    "analytics": {
-      "/users/me/query/:query_key": {
-          chunk_index: number;
-          row_offset: number;
-          row_count: number;
-          data: any[];
+    example: {
+        name: "example";
+        parameters: Record<string, never>;
+        result: Array<{
+          /** @sqlType BOOLEAN */
+          "(1 = 1)": boolean;
+        }>;
       };
-      "/query/:query_key": {
-          chunk_index: number;
-          row_offset: number;
-          row_count: number;
-          data: any[];
+    spend_data: {
+        name: "spend_data";
+        parameters: {
+          /** STRING - use sql.string() */
+          groupBy: SQLStringMarker;
+          /** STRING - use sql.string() */
+          aggregationLevel: SQLStringMarker;
+          /** DATE - use sql.date() */
+          startDate: SQLDateMarker;
+          /** DATE - use sql.date() */
+          endDate: SQLDateMarker;
+          /** STRING - use sql.string() */
+          appId: SQLStringMarker;
+          /** STRING - use sql.string() */
+          creator: SQLStringMarker;
+        };
+        result: Array<{
+          /** @sqlType STRING */
+          group_key: string;
+          /** @sqlType TIMESTAMP */
+          aggregation_period: string;
+          /** @sqlType DECIMAL(38,6) */
+          cost_usd: number;
+        }>;
       };
-    }
-  }
-
-  interface QueryRegistry {
-
-    apps_list: {
-        id: string;
-        name: string;
-        creator: string;
-        tags: string[];
-        totalSpend: number;
-        createdAt: string;
-    }[];
     spend_summary: {
-        total: number;
-        average: number;
-        forecasted: number;
-    }[];
-    untagged_apps: {
-        app_name: string;
-        creator: string;
-        total_cost_usd: number;
-        avg_period_cost_usd: number;
-    }[];
-    spend_data: {
-        group_key: string;
-        aggregation_period: string;
-        cost_usd: number;
-    }[];
-    top_contributors: {
-        app_name: string;
-        total_cost_usd: number;
-    }[];
+        name: "spend_summary";
+        parameters: {
+          /** STRING - use sql.string() */
+          aggregationLevel: SQLStringMarker;
+          /** DATE - use sql.date() */
+          endDate: SQLDateMarker;
+          /** DATE - use sql.date() */
+          startDate: SQLDateMarker;
+        };
+        result: Array<{
+          /** @sqlType DECIMAL(33,0) */
+          total: number;
+          /** @sqlType DECIMAL(33,0) */
+          average: number;
+          /** @sqlType DECIMAL(33,0) */
+          forecasted: number;
+        }>;
+      };
     sql_helpers_test: {
-        string_value: string;
-        number_value: number;
-        boolean_value: boolean;
-        date_value: string;
-        timestamp_value: string;
-        binary_value: string;
-        binary_hex: string;
-        binary_length: number;
-    };
+        name: "sql_helpers_test";
+        parameters: {
+          /** STRING - use sql.string() */
+          stringParam: SQLStringMarker;
+          /** NUMERIC - use sql.number() */
+          numberParam: SQLNumberMarker;
+          /** BOOLEAN - use sql.boolean() */
+          booleanParam: SQLBooleanMarker;
+          /** DATE - use sql.date() */
+          dateParam: SQLDateMarker;
+          /** TIMESTAMP - use sql.timestamp() */
+          timestampParam: SQLTimestampMarker;
+          /** STRING - use sql.string() */
+          binaryParam: SQLStringMarker;
+        };
+        result: Array<{
+          /** @sqlType STRING */
+          string_value: string;
+          /** @sqlType STRING */
+          number_value: string;
+          /** @sqlType STRING */
+          boolean_value: string;
+          /** @sqlType STRING */
+          date_value: string;
+          /** @sqlType STRING */
+          timestamp_value: string;
+          /** @sqlType BINARY */
+          binary_value: string;
+          /** @sqlType STRING */
+          binary_hex: string;
+          /** @sqlType INT */
+          binary_length: number;
+        }>;
+      };
+    top_contributors: {
+        name: "top_contributors";
+        parameters: {
+          /** STRING - use sql.string() */
+          aggregationLevel: SQLStringMarker;
+          /** DATE - use sql.date() */
+          startDate: SQLDateMarker;
+          /** DATE - use sql.date() */
+          endDate: SQLDateMarker;
+        };
+        result: Array<{
+          /** @sqlType STRING */
+          app_name: string;
+          /** @sqlType DECIMAL(38,6) */
+          total_cost_usd: number;
+        }>;
+      };
+    untagged_apps: {
+        name: "untagged_apps";
+        parameters: {
+          /** STRING - use sql.string() */
+          aggregationLevel: SQLStringMarker;
+          /** DATE - use sql.date() */
+          startDate: SQLDateMarker;
+          /** DATE - use sql.date() */
+          endDate: SQLDateMarker;
+        };
+        result: Array<{
+          /** @sqlType STRING */
+          app_name: string;
+          /** @sqlType STRING */
+          creator: string;
+          /** @sqlType DECIMAL(38,6) */
+          total_cost_usd: number;
+          /** @sqlType DECIMAL(38,10) */
+          avg_period_cost_usd: number;
+        }>;
+      };
   }
 }

apps/dev-playground/client/src/routeTree.gen.ts

@@ -9,13 +9,19 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as TypeSafetyRouteRouteImport } from './routes/type-safety.route'
 import { Route as TelemetryRouteRouteImport } from './routes/telemetry.route'
 import { Route as SqlHelpersRouteRouteImport } from './routes/sql-helpers.route'
 import { Route as ReconnectRouteRouteImport } from './routes/reconnect.route'
 import { Route as DataVisualizationRouteRouteImport } from './routes/data-visualization.route'
 import { Route as AnalyticsRouteRouteImport } from './routes/analytics.route'
 import { Route as IndexRouteImport } from './routes/index'
 
+const TypeSafetyRouteRoute = TypeSafetyRouteRouteImport.update({
+  id: '/type-safety',
+  path: '/type-safety',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const TelemetryRouteRoute = TelemetryRouteRouteImport.update({
   id: '/telemetry',
   path: '/telemetry',
@@ -54,6 +60,7 @@ export interface FileRoutesByFullPath {
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
+  '/type-safety': typeof TypeSafetyRouteRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -62,6 +69,7 @@ export interface FileRoutesByTo {
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
+  '/type-safety': typeof TypeSafetyRouteRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -71,6 +79,7 @@ export interface FileRoutesById {
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
+  '/type-safety': typeof TypeSafetyRouteRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -81,6 +90,7 @@ export interface FileRouteTypes {
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
+    | '/type-safety'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -89,6 +99,7 @@ export interface FileRouteTypes {
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
+    | '/type-safety'
   id:
     | '__root__'
     | '/'
@@ -97,6 +108,7 @@ export interface FileRouteTypes {
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
+    | '/type-safety'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -106,10 +118,18 @@ export interface RootRouteChildren {
   ReconnectRouteRoute: typeof ReconnectRouteRoute
   SqlHelpersRouteRoute: typeof SqlHelpersRouteRoute
   TelemetryRouteRoute: typeof TelemetryRouteRoute
+  TypeSafetyRouteRoute: typeof TypeSafetyRouteRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/type-safety': {
+      id: '/type-safety'
+      path: '/type-safety'
+      fullPath: '/type-safety'
+      preLoaderRoute: typeof TypeSafetyRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/telemetry': {
       id: '/telemetry'
       path: '/telemetry'
@@ -162,6 +182,7 @@ const rootRouteChildren: RootRouteChildren = {
   ReconnectRouteRoute: ReconnectRouteRoute,
   SqlHelpersRouteRoute: SqlHelpersRouteRoute,
   TelemetryRouteRoute: TelemetryRouteRoute,
+  TypeSafetyRouteRoute: TypeSafetyRouteRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

apps/dev-playground/client/src/routes/__root.tsx

@@ -63,6 +63,14 @@ function RootComponent() {
                     SQL Helpers
                   </Button>
                 </Link>
+                <Link to="/type-safety" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-gray-700 hover:text-gray-900"
+                  >
+                    Type Safety
+                  </Button>
+                </Link>
               </div>
             </nav>
           </div>

apps/dev-playground/client/src/routes/index.tsx

@@ -121,6 +121,24 @@ function IndexRoute() {
               </Button>
             </div>
           </Card>
+
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex flex-col h-full">
+              <h3 className="text-2xl font-semibold text-gray-900 mb-3">
+                Type-Safe SQL
+              </h3>
+              <p className="text-gray-600 mb-6 flex-grow">
+                Generate TypeScript types from SQL files at build time. Full
+                IntelliSense for query names, parameters, and results.
+              </p>
+              <Button
+                onClick={() => navigate({ to: "/type-safety" })}
+                className="w-full"
+              >
+                Explore Type Safety
+              </Button>
+            </div>
+          </Card>
         </div>
 
         <div className="text-center pt-12 border-t border-gray-200">