feat: Lakeflow Jobs Plugin

.claude/skills/install-appkit-tarball.md

@@ -0,0 +1,126 @@
+---
+name: install-appkit-tarball
+description: "Install appkit tgz builds into a project. Downloads from the prepare-release CI workflow (default) or builds locally. Use when testing appkit release candidates, installing pre-release appkit, or when user says 'install appkit tarball', 'install local appkit', 'use local appkit', 'link appkit tgz', 'install appkit from CI'."
+user-invocable: true
+allowed-tools: Read, Edit, Bash, Glob
+---
+
+# Install AppKit Tarball
+
+Installs AppKit tgz packages into a project from either the CI prepare-release workflow or a local build.
+
+## Arguments
+
+Parse the user's input to determine mode and options:
+
+- **No args** → CI mode, latest successful prepare-release run, install in CWD
+- **GitHub Actions URL** (contains `actions/runs/`) → CI mode, extract run ID from URL
+- **Numeric run ID** → CI mode, that specific run
+- **`--local <path>`** → Local build mode from the given appkit repo path
+- **`--dir <path>`** (combinable with any above) → Override install target directory (default: CWD)
+
+## Workflow
+
+Follow these steps exactly:
+
+### Step 1: Determine target directory
+
+If `--dir` was provided, use that path. Otherwise use the current working directory.
+Verify `package.json` exists in the target directory.
+
+### Step 2: Get tgz files
+
+#### Option A: CI mode (default)
+
+**2a. Find the workflow run:**
+
+If no run ID was provided, get the latest successful run:
+
+```bash
+gh run list --repo databricks/appkit --workflow prepare-release.yml --status success --limit 1 --json databaseId,number
+```
+
+If a GitHub Actions URL was provided, extract the run ID from it (the number after `/runs/`).
+
+**2b. Find the artifact name:**
+
+```bash
+gh api "repos/databricks/appkit/actions/runs/{RUN_ID}/artifacts" --jq '.artifacts[] | select(.name | test("^appkit-release-[0-9]")) | .name'
+```
+
+**2c. Download the artifact:**
+
+```bash
+gh run download {RUN_ID} --repo databricks/appkit --name "{ARTIFACT_NAME}" --dir /tmp/appkit-release-artifacts
+```
+
+**2d. Verify checksums:**
+
+```bash
+cd /tmp/appkit-release-artifacts && shasum -a 256 -c SHA256SUMS
+```
+
+Note: Use `shasum -a 256` (macOS) not `sha256sum` (Linux).
+
+**2e. Print the downloaded version:**
+
+```bash
+cat /tmp/appkit-release-artifacts/VERSION
+```
+
+The tgz files are now at `/tmp/appkit-release-artifacts/databricks-appkit-*.tgz` and `/tmp/appkit-release-artifacts/databricks-appkit-ui-*.tgz`.
+
+#### Option B: Local build mode
+
+**2a. Build tgz files:**
+
+```bash
+cd {LOCAL_APPKIT_PATH} && pnpm pack:sdk
+```
+
+**2b. Find the tgz files:**
+
+Glob for `*.tgz` in:
+- `{LOCAL_APPKIT_PATH}/packages/appkit/tmp/*.tgz`
+- `{LOCAL_APPKIT_PATH}/packages/appkit-ui/tmp/*.tgz`
+
+There should be exactly one tgz in each directory.
+
+### Step 3: Copy tgz files to target directory
+
+Copy both `databricks-appkit-*.tgz` and `databricks-appkit-ui-*.tgz` to the target directory.
+
+### Step 4: Update package.json
+
+Read `package.json` in the target directory. Edit `@databricks/appkit` and `@databricks/appkit-ui` dependency values to use `file:./` prefix pointing to the tgz filenames.
+
+For example, if the tgz file is `databricks-appkit-0.22.0.tgz`:
+```json
+"@databricks/appkit": "file:./databricks-appkit-0.22.0.tgz"
+```
+
+Same pattern for `@databricks/appkit-ui`.
+
+### Step 5: Install dependencies
+
+Run in the target directory:
+
+```bash
+npm install --force ./databricks-appkit-{VERSION}.tgz ./databricks-appkit-ui-{VERSION}.tgz
+```
+
+### Step 6: Clean up
+
+If CI mode was used, remove the temp directory:
+
+```bash
+rm -rf /tmp/appkit-release-artifacts
+```
+
+### Step 7: Report
+
+Print a summary:
+- Source: CI run #{number} or local build from {path}
+- Version installed
+- Target directory
+- Installed packages

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/appKitTypes.d.ts

@@ -119,10 +119,10 @@ declare module "@databricks/appkit-ui/react" {
         result: Array<{
           /** @sqlType STRING */
           string_value: string;
-          /** @sqlType STRING */
-          number_value: string;
-          /** @sqlType STRING */
-          boolean_value: string;
+          /** @sqlType INT */
+          number_value: number;
+          /** @sqlType BOOLEAN */
+          boolean_value: boolean;
           /** @sqlType STRING */
           date_value: string;
           /** @sqlType STRING */

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">