Repository navigation
feat(appkit): add dev-only design pages plugin and ui-only template - #680
MarioCadenas wants to merge 75 commits into
Conversation
📦 Bundle size reportCompared against
|
| dist | raw | gzip |
|---|---|---|
| JS (runtime) | 1.3 MB (+44 KB) | 478 KB (+16 KB) |
| Type declarations | 467 KB (+1.8 KB) | 169 KB (+910 B) |
| Source maps | 2.6 MB (+75 KB) | 888 KB (+24 KB) |
| Other | 11 KB | 3.7 KB |
| Total | 4.4 MB (+121 KB) | 1.5 MB (+41 KB) |
Per-entry composition (own code — deps external (as shipped))
| Entry | Initial (gz) | Lazy (gz) | Total (gz) | node_modules (min) | Own code (min) |
|---|---|---|---|---|---|
. |
107 KB (+72 B) | 2.5 KB | 110 KB (+72 B) | external | 347 KB (+77 B) |
./beta |
113 KB (+9.9 KB) | 484 B | 114 KB (+9.9 KB) | external | 338 KB (+27 KB) |
./testing |
46 KB (+1 B) | 33 KB (+74 B) | 79 KB (+75 B) | external | 229 KB (+175 B) |
./tsdown |
520 B | 0 B | 520 B | external | 813 B |
./type-generator |
26 KB (+31 B) | 0 B | 26 KB (+31 B) | external | 74 KB (+42 B) |
Chunks:
| Entry | Chunk | Load | Size (gz) |
|---|---|---|---|
. |
index.js |
initial | 103 KB |
. |
utils.js |
initial | 4.6 KB |
. |
remote-tunnel-manager.js |
lazy | 2.5 KB |
./beta |
beta.js |
initial | 93 KB |
./beta |
modular.js |
initial | 6.0 KB |
./beta |
stream-manager.js |
initial | 5.9 KB |
./beta |
service-context.js |
initial | 4.3 KB |
./beta |
databricks.js |
initial | 3.3 KB |
./beta |
client.js |
initial | 646 B |
./beta |
index.js |
initial | 20 B |
./beta |
supervisor-api.js |
lazy | 192 B |
./beta |
databricks.js |
lazy | 177 B |
./beta |
index.js |
lazy | 115 B |
./testing |
manifest.js |
initial | 33 KB |
./testing |
index.js |
initial | 10 KB |
./testing |
wide-event-emitter.js |
initial | 2.9 KB |
./testing |
index.js |
lazy | 29 KB |
./testing |
remote-tunnel-manager.js |
lazy | 2.5 KB |
./testing |
utils.js |
lazy | 1.8 KB |
./tsdown |
index.js |
initial | 520 B |
./type-generator |
index.js |
initial | 26 KB |
@databricks/appkit-ui
npm tarball (packed): 404 KB (+7.5 KB) — gzipped download (dist + bin; excludes release-only docs/NOTICE).
| dist | raw | gzip |
|---|---|---|
| JS (runtime) | 436 KB (+6.9 KB) | 149 KB (+2.7 KB) |
| Type declarations | 270 KB (+2.6 KB) | 100 KB (+1.3 KB) |
| Source maps | 861 KB (+13 KB) | 290 KB (+5.4 KB) |
| CSS | 16 KB | 3.2 KB |
| Total | 1.5 MB (+23 KB) | 542 KB (+9.4 KB) |
Per-entry composition (consumer bundle — deps bundled, peerDeps external)
| Entry | Initial (gz) | Lazy (gz) | Total (gz) | node_modules (min) | Own code (min) |
|---|---|---|---|---|---|
./js |
5.3 KB | 49 KB | 55 KB | 208 KB | 14 KB |
./js/beta |
2.1 KB | 0 B | 2.1 KB | 0 B | 5.0 KB |
./react |
434 KB (+55 B) | 49 KB | 483 KB (+55 B) | 1.3 MB (+3 B) | 178 KB (+126 B) |
./react/beta |
14 KB (+9.2 KB) | 0 B | 14 KB (+9.2 KB) | 25 KB (+25 KB) | 16 KB (+3.4 KB) |
Chunks:
| Entry | Chunk | Load | Size (gz) |
|---|---|---|---|
./js |
index.js |
initial | 5.2 KB |
./js |
chunk |
initial | 120 B |
./js |
apache-arrow |
lazy | 49 KB |
./js/beta |
beta.js |
initial | 2.1 KB |
./react |
index.js |
initial | 432 KB |
./react |
tslib |
initial | 2.1 KB |
./react |
apache-arrow |
lazy | 49 KB |
./react/beta |
beta.js |
initial | 14 KB |
|
Review 1 · Fail · 3 critical, 2 major Does the change do what the task asked? No. Gate: major and worse must be fixed. The canvas, multi-selection, notes, persistence across a real restart, and production 404 work, and the automated suite passes. The handoff is not reliable: normal selections can lack source locations, contain stale props, and include screenshots missing visible content. Valid wrapped components are also omitted, and concurrent reads can falsely report no pending selections. Required
|
|
Review 2 · Pass Does the change do what the task asked? Yes. Gate: major and worse must be fixed. The five earlier findings are fixed, and I found no regressions from those fixes. Browser checks against the built UI package, the full test suite, typechecking, and read-only lint/format checks passed. There are no remaining findings in this round. No findings. |
af1f4a2 to
aa65b0d
Compare
MarioCadenas
changed the title
|
Review 5 · Fail · 1 critical, 1 major Does the change do what the task asked? No. Gate: major and worse must be fixed. The design canvas, selection handoff, persistence and production 404 behavior work in the exercised cases, and all 50 targeted tests pass. The screenshot requirement is incomplete: selecting an absolutely positioned element can silently save an entirely blank image. The added CLI also omits declared resource defaults from deployment variables in an unusual supported case. Required
|
🤖 AppKit PR bot🔬 Run evalsStart an eval for this PR from the evals-monitor app: Go to Evals Monitor → 📦 Try this PR's app templateScaffolds a new app from this PR's SDK build. Run it in any folder (requires the GitHub CLI — gh run download 42205587970 -R databricks/appkit -n appkit-template-0.90.0-pr.329b318-work-1-design-plugin-dev-only-design-680 -D appkit-pr-680 \
&& unzip -o "appkit-pr-680/appkit-template-0.90.0-pr.329b318-work-1-design-plugin-dev-only-design-680.zip" -d "appkit-pr-680" \
&& databricks apps init --template "appkit-pr-680"The template pins |
aa65b0d to
4d00fbf
Compare
|
Review 6 · Pass Does the change do what the task asked? Yes. Gate: major and worse must be fixed. Both previous findings are fixed at the reviewed commit. Chrome reproduced the blank screenshot with the previous code and verified the saved JPEG with the fix; actual plugin-add runs preserved manifest defaults in deployment YAML. The focused regression checks passed, with no remaining findings in this round. No findings. |
4d00fbf to
acf5c0f
Compare
|
Review 7 · Fail · 3 critical Does the change do what the task asked? No. Gate: major and worse must be fixed. The main canvas, source tracing, persisted handoff, production 404 behavior, and ui-only template work in the exercised paths. Three browser-proven faults remain: open dialogs disable the picker, completing a send discards selections added during that send, and screenshots omit typed values in uncontrolled inputs. The repository was left unchanged. Required
|
|
Review 8 · Pass Does the change do what the task asked? Yes. Gate: major and worse must be fixed. F8, F9 and F10 are fixed: browser checks confirmed modal selection, preservation of later picks and edited notes during a pending send, and screenshots containing current form values. Focused tests and nearby runtime checks passed, with no remaining findings in this review round. The repository was left unchanged. No findings. |
9bdf7b9 to
ad6dc6e
Compare
|
Review 10 · Fail · 3 critical Does the change do what the task asked? No. Gate: major and worse must be fixed. The change does not meet the full task: the running app has no selection interface, open dialogs block selection, and clicking an SVG path saves a blank screenshot. The normal canvas handoff, source metadata, persistence across a server restart, and production 404 behavior worked locally. All 71 tests exercised passed, including the previously failing React type test. Required
|
|
Review 11 · Fail · 2 critical Does the change do what the task asked? No. Gate: major and worse must be fixed. F12 and F13 are fixed and worked in Chromium, but the change does not yet meet the supplied task. F11 remains against the original running-app selection requirement; the claimed later scope change was not confirmed. Pressing the advertised Escape shortcut after selecting dialog content also closes the dialog and silently loses its screenshot when sent. Required
|
MarioCadenas
changed the title
|
Review 12 · Fail · 2 critical, 1 major Does the change do what the task asked? No. Gate: major and worse must be fixed. The design pages and ui-only starter work, including hot reload and production 404s. The change does not meet the supplied task because element selection and persistent agent handoff are absent. An unrelated unfinished draft can also break an otherwise valid design page. Required
|
|
Review 13 · Fail · 2 critical Does the change do what the task asked? No. Gate: major and worse must be fixed. The broken-draft loading bug is fixed, including live browser rendering and hot reload beside an unfinished page. The current task still explicitly requires multi-selection with notes and a persisted agent handoff; both remain absent despite their intentional removal, so the change does not meet all stated requirements. Required
|
adfa702 to
b5f6314
Compare
|
Review 14 · Fail · 1 critical, 2 major Does the change do what the task asked? No. Gate: major and worse must be fixed. The change does not meet the full task: the required element selection and persistent agent handoff are absent. Design page rendering, navigation and production 404s work; 83 targeted tests pass and both changed TypeScript packages typecheck. Browser testing also reproduced false readiness after a render error and a broken route for pages/index.tsx. Required
|
b5f6314 to
48d89da
Compare
|
Review 15 · Fail · 1 critical, 1 major Does the change do what the task asked? No. Gate: major and worse must be fixed. The required selection and persistent agent-handoff workflow is still missing. The render-error fix works for edits to the index page, but readiness remains incorrectly true when an imported component fails after a hot edit. F20 is fixed, and all 49 focused design and server tests pass. Required
|
0341ad5 to
2d7a963
Compare
|
Review 20 · Pass · 1 minor, 1 trivial Does the change do what the task asked? Yes. Gate: major and worse must be fixed. Taking the human's later scope decisions into account (selection handling moved to the builder's inspector, drafts served with a hydrator), the branch does what was asked: /design is dev-only and returns 404 otherwise, drafts render real appkit-ui blocks, errors are reported, the props schema is published, and the ui-only template is generated. All 67 design-plugin tests and the use-design-ready tests pass. One edge case is left: the dark-mode token sync follows the system color scheme and ignores a draft that forces its own theme. Not required (below the gate)
|
|
Review 21 · Fail · 1 major Does the change do what the task asked? Yes. Gate: major and worse must be fixed. This round's additions (browserless status fields, theme.css, shipped schema, chart data types, template vitest inline) are in place and the design and chart tests pass. One claim is overstated: Required
|
- design() plugin (beta): in development serves a /design canvas that renders every PascalCase export under client/src/design/, and injects a click-to-select picker into the canvas and every app page. Picks are traced via the existing data-source transform plus the React fiber (component, owner stack, props), screenshotted, and persisted with an optional note to .appkit/design-selection.json (GET/POST/DELETE /api/design/selection). Outside development it mounts nothing and /design returns 404. - Plugins can contribute dev-server Vite plugins via an optional vitePlugins() hook. - appkit-ui/react/beta: DesignCanvas, DesignPicker, mountDesignPicker. - Template: gated client/src/design example, .appkit/ gitignored, and a ui-only app template (server + design). Co-authored-by: Isaac <no-reply@databricks.com> Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
The top-level compiled/compileError come from the index entry of pages, which already builds it, instead of a second compile of the same import graph per request. indexVersion, a one-use wrapper, is inlined. Same JSON. Co-authored-by: Isaac <no-reply@databricks.com> Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
…ng facts
No code change. Multi-line comments are cut to one short line (JSDoc
contracts kept, tightened), rationale repeated in several places is kept
in one (chart default height, the builder-origin format), and stale
wording ("after first paint", "only with a builder origin") is fixed.
Co-authored-by: Isaac <no-reply@databricks.com>
Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
The /design/__stream host no longer posts appkit:stream-frame messages, and the APPKIT_DESIGN_STREAM_MODE=boundary switch is gone, with its test. Both only served the KIT-40 spike's measurements (its replay app is already removed); nothing in App Builder reads or sets them. Streaming itself is unchanged. Co-authored-by: Isaac <no-reply@databricks.com> Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
…th-mo' into work/1-design-plugin-dev-only-design- Co-authored-by: Isaac <no-reply@databricks.com> Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
|
Review 39 · Fail · 1 critical, 1 minor Does the change do what the task asked? No. Gate: major and worse must be fixed. The dev-only /design pages, production 404, data-source file:line instrumentation, readiness status and the ui-only template entry are built and their tests pass. The selection handoff the task plainly asks for (multi-select with a note, sent to the agent, persisted to .appkit/design-selection.json, exposed via endpoint or MCP tool) was removed in 45b1261 and is not on this branch. The agent says the human narrowed scope to delegate selection to App Builder's inspector, but I found no such instruction in the board's inbox, and the agent's own closing note leaves that question open for the human. Required
Not required (below the gate)
|
|
Review 40 · Fail · 1 critical, 1 minor Does the change do what the task asked? No. Gate: major and worse must be fixed. The dev-only /design pages and the ui-only template exist, but the selection handoff the task plainly requires is not built. Commit 45b1261 removed the multi-select picker, notes, screenshots, the .appkit/design-selection.json store and the /api/design endpoint, and nothing replaces them at HEAD. The agent's argument that an earlier tested build also lacked them does not change what the task asks for. Required
Not required (below the gate)
|
|
Review 41 · Fail · 2 critical Does the change do what the task asked? No. Gate: major and worse must be fixed. The dev-only design plugin, /design canvas, production 404 and the ui-only template entry are built, and the plugin's 61 tests pass. The selection half of the task is not built: click-to-select, multi-select with a note, the agent handoff, .appkit/design-selection.json and the endpoint/MCP tool. The agent says a human ruled selection out of scope, but the board description still asks for it, so I judged against that and leave the waiver for the human to confirm. Required
|
|
Review 42 · Pass · 1 minor Does the change do what the task asked? Yes. Gate: major and worse must be fixed. The PR at b35ff17 is a draft, its head matches local, and all CI checks are green. The design plugin, appkit-ui and chart test suites pass locally (16 files, 334 tests). The plugin answers 404 outside development and registers no Vite plugin there. The only nit: an invalid builder-origin env var still throws in production. Not required (below the gate)
|
Signed-off-by: ditadi <victordperd@gmail.com>
…esign-plugin-dev-only-design-
|
Review 43 · Fail · 1 critical Does the change do what the task asked? No. Gate: major and worse must be fixed. The code at 453a05d is in good shape: all 24 CI check runs pass and the design plugin's 61 tests pass locally. But the task says plainly that PR #680 stays a draft, and it is not a draft any more. It was marked ready for review today, so that requirement is not met. Required
|
…allbacks (#716) Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
…parent (#717) Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
…713) Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
…e token (#711) Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
Signed-off-by: databricks-appkit[bot] <databricks-appkit[bot]@users.noreply.github.com>
… routes (#712) Signed-off-by: Fabian Jakobs <fabian.jakobs@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
Signed-off-by: databricks-appkit[bot] <databricks-appkit[bot]@users.noreply.github.com>
Signed-off-by: Mike Helmick <mike.helmick@databricks.com> Co-authored-by: Isaac <no-reply@databricks.com>
Signed-off-by: databricks-appkit[bot] <databricks-appkit[bot]@users.noreply.github.com>
Signed-off-by: databricks-appkit[bot] <databricks-appkit[bot]@users.noreply.github.com>
…esign-plugin-dev-only-design-
|
Review 44 · Fail · 1 critical, 1 pre-existing Does the change do what the task asked? No. Gate: major and worse must be fixed. The design plugin code looks complete for the scope: dev-only /design routes, TSX staging stream, __status, DesignPage/useDesignReady, chart sizing and the template entry. Its tests, typecheck and lint pass, and the out-of-scope HTML-draft and selection code is gone. But the task plainly requires the PR to stay a draft, and #680 is open as ready for review. Required
Not required (there before this change)
|
Adds a dev-only
design()plugin (beta) for building an app's UI as design pages before it's wired to data, and an emptyui-onlyapp template (server + design) for quick PoCs. This is the single design-plugin PR: it includes the TSX drafts work from #707 and #708 (KIT-38, KIT-40), which this replaces. HTML drafts are not part of it (the decision is TSX streaming only).What it does
/designand/design/<name>renderclient/src/design/index.tsxandclient/src/design/pages/<name>.tsxat full size, with the app's styles and hot reload. Other paths under/designreturn 404, and the plugin answers 404 in production.react-router7 (the template ships it), pages share a router with basename/design. Each page is imported on its own, so an unfinished page breaks only its own URL.TSX drafts, streamed while they're written.
client/src/design/.staging/<name>.tsx(and the shared mock's to.staging/mock.ts), then writes the finished, type-checked file topages/<name>.tsx./design/__stream/<name>shows the draft while it streams. The dev server keeps the latest renderable version of the staging file under the page's real module:closeOpencloses whatever is open at the cut (JSX, brackets, template literals), and components not written yet are stubbed.DraftPlaceholderskeleton.DesignPage(@databricks/appkit-ui/react/beta): every design page renders through it. It applies the app's theme before the first paint (dark included,?theme=override). Its error boundary keeps the last good frame on screen instead of a broken one.Readiness, for any kind of app, from a hidden preview.
GET /design/__statusreports:ready,compiled(server-side import-graph build, no browser) andwaitingFor;pages[]:compiled,rendered,errorsandstate;app:entry,compiled,path,rendered,templateanderrors.Errors cover render errors, uncaught errors, unhandled rejections and Vite errors, with their messages. They are
nulluntil a browser has loaded the page, and a hot update clears what it fixed. Nothing waits for a visible or painted frame (two frames, or 100 ms without them).Pages post
appkit:design-readyand the app's pagesappkit:app-readyto the configuredbuilderOrigin. That's a bare origin, never"*"; it defaults to theAPPKIT_DESIGN_BUILDER_ORIGINenvironment variable, so a scaffoldeddesign()needs no options.useDesignReady(false)holds readiness back for content the page can't detect on its own.Charts (appkit-ui) fill their container's height by default (at least 160px), or take an exact
height.Template: the
ui-onlyentry (featuredesign), a placeholderclient/src/design/index.tsx, and the.appkit/gitignore.Plugin hook: plugins can add Vite plugins to the dev server through an optional
vitePlugins()method.Selection is out of scope here (the human's decision): no element picker or
.appkit/design-selection.json. App Builder's own inspector selects elements through the dev server'sdata-source="file:line:col"attributes.How I checked it
closeOpenandrenderablePartial, the staging watcher,DesignPage, and chart sizing.display: noneiframes,/designpages and the app reportedrenderedand their errors..staging/<name>.tsxshowed up in the page as they were written.pnpm build,pnpm docs:build,pnpm -r typecheck,pnpm check, knip andpnpm test(324 files) pass.Not done
ui-onlywasn't generated withdatabricks apps init(needs the CLI and network); only the template files changed.Task: KIT-1 (app-kit/1)
This pull request and its description were written by Isaac.