feat: Lakeflow Jobs Plugin

apps/dev-playground/.env.dist

@@ -9,6 +9,7 @@ OTEL_SERVICE_NAME='dev-playground'
 DATABRICKS_VOLUME_PLAYGROUND=
 DATABRICKS_VOLUME_OTHER=
 DATABRICKS_GENIE_SPACE_ID=
+DATABRICKS_JOB_ID=
 DATABRICKS_SERVING_ENDPOINT_NAME=
 LAKEBASE_ENDPOINT='' # Run: databricks postgres list-endpoints projects/{project-id}/branches/{branch-id} — use the `name` field from the output
 PGHOST=

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

@@ -15,6 +15,7 @@ import { Route as SqlHelpersRouteRouteImport } from './routes/sql-helpers.route'
 import { Route as ServingRouteRouteImport } from './routes/serving.route'
 import { Route as ReconnectRouteRouteImport } from './routes/reconnect.route'
 import { Route as LakebaseRouteRouteImport } from './routes/lakebase.route'
+import { Route as JobsRouteRouteImport } from './routes/jobs.route'
 import { Route as GenieRouteRouteImport } from './routes/genie.route'
 import { Route as FilesRouteRouteImport } from './routes/files.route'
 import { Route as DataVisualizationRouteRouteImport } from './routes/data-visualization.route'
@@ -53,6 +54,11 @@ const LakebaseRouteRoute = LakebaseRouteRouteImport.update({
   path: '/lakebase',
   getParentRoute: () => rootRouteImport,
 } as any)
+const JobsRouteRoute = JobsRouteRouteImport.update({
+  id: '/jobs',
+  path: '/jobs',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const GenieRouteRoute = GenieRouteRouteImport.update({
   id: '/genie',
   path: '/genie',
@@ -97,6 +103,7 @@ export interface FileRoutesByFullPath {
   '/data-visualization': typeof DataVisualizationRouteRoute
   '/files': typeof FilesRouteRoute
   '/genie': typeof GenieRouteRoute
+  '/jobs': typeof JobsRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/serving': typeof ServingRouteRoute
@@ -112,6 +119,7 @@ export interface FileRoutesByTo {
   '/data-visualization': typeof DataVisualizationRouteRoute
   '/files': typeof FilesRouteRoute
   '/genie': typeof GenieRouteRoute
+  '/jobs': typeof JobsRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/serving': typeof ServingRouteRoute
@@ -128,6 +136,7 @@ export interface FileRoutesById {
   '/data-visualization': typeof DataVisualizationRouteRoute
   '/files': typeof FilesRouteRoute
   '/genie': typeof GenieRouteRoute
+  '/jobs': typeof JobsRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/serving': typeof ServingRouteRoute
@@ -145,6 +154,7 @@ export interface FileRouteTypes {
     | '/data-visualization'
     | '/files'
     | '/genie'
+    | '/jobs'
     | '/lakebase'
     | '/reconnect'
     | '/serving'
@@ -160,6 +170,7 @@ export interface FileRouteTypes {
     | '/data-visualization'
     | '/files'
     | '/genie'
+    | '/jobs'
     | '/lakebase'
     | '/reconnect'
     | '/serving'
@@ -175,6 +186,7 @@ export interface FileRouteTypes {
     | '/data-visualization'
     | '/files'
     | '/genie'
+    | '/jobs'
     | '/lakebase'
     | '/reconnect'
     | '/serving'
@@ -191,6 +203,7 @@ export interface RootRouteChildren {
   DataVisualizationRouteRoute: typeof DataVisualizationRouteRoute
   FilesRouteRoute: typeof FilesRouteRoute
   GenieRouteRoute: typeof GenieRouteRoute
+  JobsRouteRoute: typeof JobsRouteRoute
   LakebaseRouteRoute: typeof LakebaseRouteRoute
   ReconnectRouteRoute: typeof ReconnectRouteRoute
   ServingRouteRoute: typeof ServingRouteRoute
@@ -243,6 +256,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LakebaseRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/jobs': {
+      id: '/jobs'
+      path: '/jobs'
+      fullPath: '/jobs'
+      preLoaderRoute: typeof JobsRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/genie': {
       id: '/genie'
       path: '/genie'
@@ -303,6 +323,7 @@ const rootRouteChildren: RootRouteChildren = {
   DataVisualizationRouteRoute: DataVisualizationRouteRoute,
   FilesRouteRoute: FilesRouteRoute,
   GenieRouteRoute: GenieRouteRoute,
+  JobsRouteRoute: JobsRouteRoute,
   LakebaseRouteRoute: LakebaseRouteRoute,
   ReconnectRouteRoute: ReconnectRouteRoute,
   ServingRouteRoute: ServingRouteRoute,

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

@@ -104,6 +104,14 @@ function RootComponent() {
                     Files
                   </Button>
                 </Link>
+                <Link to="/jobs" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-foreground hover:text-secondary-foreground"
+                  >
+                    Jobs
+                  </Button>
+                </Link>
                 <Link to="/serving" className="no-underline">
                   <Button
                     variant="ghost"

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

@@ -219,6 +219,24 @@ function IndexRoute() {
             </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-foreground mb-3">
+                Lakeflow Jobs
+              </h3>
+              <p className="text-muted-foreground mb-6 flex-grow">
+                Trigger and monitor Databricks Lakeflow Jobs. View run history,
+                stream live status updates, and cancel in-flight runs.
+              </p>
+              <Button
+                onClick={() => navigate({ to: "/jobs" })}
+                className="w-full"
+              >
+                Manage Jobs
+              </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-foreground mb-3">