Add studio relation click-through

[mmkal]

Summary

Adds clickable relation previews to the studio table grid. Cells backed by a single-column foreign key now show a relation action that opens the referenced parent row, and referenced key cells show reverse actions for matching child rows.

The schema endpoint now returns relation metadata for both directions:

relation.foreignKeys // child table -> parent table
relation.referencedBy // parent table -> child tables

SQLite and Postgres both implement the new dialect hook. The UI intentionally limits the first visible click-through pass to single-column relationships, while the metadata shape can carry composite keys for a later UI pass.

Media

Forward relation preview from order_details.product_id to the referenced products row:

https://github.com/user-attachments/assets/a2105fef-0ffb-44b8-9132-e267fb2465bd

Reverse relation preview from products.product_id to matching order_details rows:

https://github.com/user-attachments/assets/745a4d6e-dd48-441b-a3cd-e8a4ac8d0791

Relation click-through walkthrough video:

pr-128-relation-click-through.mp4

Before / After

Before, an order_details.product_id cell was just a scalar value. The user had to manually know and type the follow-up query.

After, hovering/clicking the relation action previews the generated filtered query and matching rows:

select * from "products" where "product_id" = ? limit 100

Reverse relations work the same way from the parent row, for example products.product_id = 1 can preview matching order_details rows:

select * from "order_details" where "product_id" = ? limit 100

Verification

• pnpm --filter sqlfu exec vitest run test/ui-server.test.ts --testNamePattern "schema.get exposes forward"
• SQLFU_UI_TEST_PORT=3228 pnpm --filter @sqlfu/ui exec playwright test test/demo.spec.ts --grep "child rows|referenced parent"
• pnpm typecheck
• pnpm --filter @sqlfu/ui build

Package size — packed 240.2 kB (+844 B, +0.3%)

Package size

	main	this PR	Δ
packed	239.4 kB	240.2 kB	+0.3%
unpacked	991.8 kB	995.5 kB	+0.4%
files	185	185	0

dist/vendor/*.js bundles

	main	this PR	Δ
vendor/sha256.js	4.3 kB	4.3 kB	0
vendor/sql-formatter/*.js	58.3 kB	58.3 kB	0
vendor/sqlfu-sqlite-parser/*.js	17.2 kB	17.2 kB	0
vendor/standard-schema/*.js	2.8 kB	2.8 kB	0
vendor/typesql/*.js	134.6 kB	134.6 kB	0

Measured with npm pack --dry-run --json on sqlfu (0.0.3-7 on main vs 0.0.3-7 on this PR).

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/sqlfu@128

commit: 3caefca

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 3caefca. Configure here.}

[cursor]

Conditional push misaligns parallel arrays in foreign key grouping

Medium Severity

groupSqliteForeignKeys conditionally skips pushing to referencedColumns when referencedColumn is falsy (SQLite's to is NULL for implicit-PK references), but always pushes to columns and seq. The ordering step then indexes into referencedColumns using the same positional index as seq/columns, causing misaligned column associations for composite FKs and empty referencedColumns for single-column implicit-PK references — hiding those relation actions from the UI.

Additional Locations (1)

• packages/sqlfu/src/dialect.ts#L401-L408

 

^{Reviewed by Cursor Bugbot for commit 3caefca. Configure here.}