Skip to content

feat(master): React SPA control-plane UI (list/search + compaction) - #139

Merged
beinan merged 2 commits into
lance-format:mainfrom
beinan:master-ui
Jul 14, 2026
Merged

beinan merged 2 commits into
lance-format:mainfrom
beinan:master-ui

Conversation

@beinan

@beinan beinan commented Jul 14, 2026

Copy link
Copy Markdown
Collaborator

Summary

Final slice of lance-context-master. Stacked on #137 + #138 — this branch contains their commits too; review/merge #137 then #138 first, then this diff is just the ui/ directory.

React SPA served by the master's ServeDir when --ui-dir points at ui/dist:

  • Stack: Vite + React + TypeScript + Zustand (UI-local search/pagination state) + TanStack Query (data).
  • Experiments table: search by experiment_name, pagination, columns for row_count / fragment_count / pending WAL gens / last_updated / last_compaction, inline Compact button that polls .../compact/status until terminal.
  • Detail panel: metric cards with on-demand ?fresh=true recompute + manual compact trigger.
  • api.ts mirrors the lance-context-api DTOs; npm run build emits ui/dist (git-ignored).

Test plan

  • npm install + npm run build (tsc -b && vite build) green
  • Manual: run lance-context-master --data-dir <shared> --ui-dir crates/lance-context-master/ui/dist, browse list/search, trigger a compaction, watch status flip to done

🤖 Generated with Claude Code

beinan and others added 2 commits July 14, 2026 16:44
Add the compaction control loop to the master. A single background worker
drains one mpsc queue, so automatic sweeps and manual API triggers share the
same serial execution path — guaranteeing a single `Rewrite` driver and no
OCC conflict. `Rewrite` vs the data-plane's `Append` is non-conflicting, so
this runs safely alongside live ingest.

- state: `compact_tx`/`compact_rx` queue + per-experiment `jobs` status map.
- scheduler: `enqueue` (de-dupes queued/running), serial worker, optional
  periodic auto-sweep gated on fragment_count >= min_fragments and quiet
  hours; post-compaction it re-observes and bumps
  last_compaction/total_compactions in the stats table.
- routes: `POST /experiments/{name}/compact` (202 + job status) and
  `GET /experiments/{name}/compact/status`.

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
Add the master UI (Vite + React + TypeScript + Zustand + TanStack Query),
served by the master's ServeDir when `--ui-dir` points at `ui/dist`.

- Experiments table: search by experiment_name, pagination, columns for
  row_count / fragment_count / pending WAL gens / last_updated /
  last_compaction, and an inline Compact button that polls job status.
- Experiment detail panel: metric cards with on-demand `?fresh=true` refresh
  plus a manual compact trigger.
- api.ts mirrors the lance-context-api DTOs; store.ts holds UI-local search +
  pagination state. `npm run build` emits `ui/dist` (git-ignored).

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
@beinan
beinan merged commit 58bde89 into lance-format:main Jul 14, 2026
9 checks passed
beinan added a commit that referenced this pull request Jul 14, 2026
## Summary
The control-plane UI shipped in #139 was bare inline-styled scaffolding
with no design language. This gives it a real one, in the restrained,
data-dense register of a frontier AI lab.

- **Design system (`styles.css`)**: near-black layered canvas, hairline
borders, Inter + JetBrains Mono, a single electric-indigo accent,
monospace numerics. Design tokens for surfaces/borders/status colors.
- **Layout**: sticky branded topbar with a live-sync indicator, a 4-up
stat strip (experiments / rows / fragments / needs-compaction), refined
data grid with row hover and hot-fragment amber tinting.
- **Interactions**: status pills (queued/running/done/failed), skeleton
loaders, empty/error states, placeholder-preserving pagination, and a
slide-in detail **drawer** with scrim + Escape-to-close replacing the
old inline panel.

## Screens
- **List**: stat strip + searchable, paginated experiment grid with
inline Compact + status.
- **Drawer**: per-experiment storage metrics grid + accent Compact
action with live status polling.

## Test plan
- [x] `npm run build` (tsc + vite) clean; CSS bundled (~2.85 kB gzip)
- [x] End-to-end: master serves the bundled SPA + `/api/v1` on one port;
`/`, CSS asset, and `/api/v1/experiments` all verified against a seeded
data dir

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant