feat(history): fold the roadmap, lay out the sidebar, highlight what you click

[huyplb]

Five changes to the Lokee history surface, plus a friendlier SQLite credential form. The last two commits carry over from the previous branch (#267 merged only the Db2 commit from it).

Roadmap folding

A database captured over months has hundreds of versions, and any one table moved in a handful of them. Printing one row per version buried the few that mattered.

roadmap.ts keeps the versions that changed the object, the head, and whatever is being viewed; each untouched run folds into one row (8 versions left it unchanged · v2–v9) that opens on click. Show all versions unfolds everything. Rows gain a column delta measured against the real previous version — not the previous visible row, so collapsing a gap cannot change the number.

Verified on a seeded 15-version SQLite history where customers moved at v1 and v10: 5 rows instead of 15; expanding v2–v9 gives 11; "Show all versions" gives 15.

Sidebar layout

Order is now Object type → Object status → Version → Date → User. Object type decides what the graph is made of, so every other filter reads as a narrowing of it; status is the legend and sits next to what it colours.

Sections drag to reorder by their grip (only the grip — the panels are full of checkboxes and date inputs, and a whole-panel drag source turns every mis-aimed click into a drag). The column drags to resize; double-click resets, arrows nudge. Both persist in localStorage.

Version and User lists carry a permanently visible thin scroll track: macOS hides overlay scrollbars, so a list that scrolled looked identical to one that had been cut off.

Click-to-highlight — and the wiring bug under it

The node renderers already drew a ring for a selected node, but the graph is fully controlled and had no onNodesChange, so React Flow's selection had nowhere to be written back and selected was never true. Clicking opened the inspector and the graph looked untouched.

highlight.ts applies selection from app state: solid ring on the clicked card, dashed outline on the same object at every other version, bright animated lineage edges, and everything else faded to 0.28 — faded, never removed, so the graph does not re-flow on a click. With no selection it returns the same array references, so the common case costs nothing.

The same missing handler was breaking edges

From React Flow's source, adoptUserNodes → parseHandles:

if (!userNode.handles) {
  return !userNode.measured ? undefined : internalNode?.internals.handleBounds;
}

isNodeInitialized then refuses to place any edge touching a node with no handle bounds. This graph handed React Flow freshly built node objects (no measured) on every filter change, with no onNodesChange to report the re-measurement back — so each rebuild reset the bounds with nothing to restore them.

Fixed with useNodesState + onNodesChange, plus carryMeasurements(next, previous) so a rebuild does not drop the edges for a frame. Seven unit tests pin the contract, quoting the React Flow source as the reason.

Reviewer note, stated plainly: I first reported this as "edges intermittently vanish" from browser observation. That symptom was substantially a harness artifact — my Browser pane was hidden, so the container measured 0×0 and nothing could be measured (the NaN console spam on <circle>/<pattern> is the same zero-size layout). With the pane painted, edges draw. The wiring defect above is real and verified against the library source; the browser could not give a clean A/B while pane visibility was doing its own thing, so the evidence here is the unit tests.

Reverting leaves the object inspector

It lives in the version compare modal, which can scope a revert to ticked objects. A per-row button could only ever revert the whole schema, and two entry points with different blast radii was the trap. The Reused hash — stored once (pointer) line goes too — storage internals, not schema history.

SQLite / DuckDB credentials

Host, port, username, password, SSL and "Save password" are hidden for a file on disk; "Database Name" becomes Database File; the default credential name is the file rather than localhost/.

Browse… opens a picker. A browser's file dialog yields a File with a name and no path, so it lists the machine running the backend:

• GET /api/files/browse — directories plus only .db .db3 .sqlite .sqlite3 .duckdb .ddb, with name/size/mtime and never contents. Dotfiles skipped, 500-entry cap, rate-limited 60/min, behind schema.browse.
• NUL-bearing paths resolve to home rather than being normalized; relative paths resolve against home, not the service's cwd.
• Deliberately not jailed to a root (decided with the repo owner). A signed-in user can already open any path by typing it into the form; this makes that discoverable without widening it. The extension filter is what keeps it from being a general file browser — file-browse.test.ts asserts id_rsa, secrets.env, dump.sql and .env are never listed. If you want the jail, it is one env var plus a prefix check in resolveBrowsePath.

Verified live: picking /tmp/fox-roadmap-demo.db fills the field, and POST /api/schema/list against it returns {"schemas":["main"]}.

Gates

cd apps/web && npx tsc --noEmit clean · npx vitest run 1925 pass / 2 expected-fail · eslint 0 errors. The three detect-non-literal-fs-filename warnings in file-browse.ts are the feature itself and carry inline justifications.

🤖 Generated with Claude Code

---

Note

Medium Risk
Adds a filesystem listing API (extension-filtered and permission-gated, but not path-jailed) and changes SQL rewriting, migration type rendering, and graph/React Flow wiring—areas that affect security posture and execution behavior if misconfigured.

Overview
Lokee history gets a folded object roadmap (changed versions, head, and current view stay visible; unchanged runs collapse into expandable gaps with column deltas vs the real prior version), a reorderable/resizable filter sidebar (persisted in localStorage), and selection highlighting on the version graph (clicked object/version, lineage edges, dimmed rest) wired through useNodesState, onNodesChange, and carryMeasurements so edges do not disappear after filter rebuilds. Per-row revert is removed from the object inspector (revert stays in the compare modal); script diffs can open full screen.

SQLite / DuckDB credentials hide server-style fields and add Browse… backed by GET /api/files/browse (schema.browse, rate-limited): directories plus database extensions only, metadata never file contents, NUL paths fall back to home.

SQL execution rewrites unaliased SELECT expressions via autoAliasSelectColumns so result grids get distinct column keys. MySQL string defaults now escape backslashes in normalizeDefault; Db2 caps migrated DECIMAL precision at 31 with a warning; BEGIN procedural blocks are treated as writes for safe-mode classification. Schema compare blueprint shows # position for columns and indexes; Monaco maps wire-compatible dialects to the right SQL grammar.

^{Reviewed by Cursor Bugbot for commit 50fc6b8. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_59db89e7-9fba-4299-9680-8900b3611a57)