Add sort + filter to dashboard runs table (BEN-47)#51
Closed
benSepanski wants to merge 1 commit intomainfrom
Closed
Add sort + filter to dashboard runs table (BEN-47)#51benSepanski wants to merge 1 commit intomainfrom
benSepanski wants to merge 1 commit intomainfrom
Conversation
The runs table was render-only: no way to sort, narrow by status, or hone in on a specific issue identifier. Once the DB has more than ~50 runs the dashboard becomes a Ctrl-F dance. Filter / sort state lives in the URL hash so views are reload-stable and shareable (e.g. `#/?status=failed&q=BEN-30`). The pure parse / serialize / apply helpers live in `dashboardFilters.ts` and are unit-tested independently of React.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
BEN-47: the runs table in
src/web/Dashboard.tsxwas render-only — no sort headers, no status filter, no way to narrow by issue identifier. With more than ~50 runs the dashboard becomes a Ctrl-F dance.TL;DR
Add sortable column headers, multi-select status pills, and a free-text identifier/title filter to the dashboard runs table. State persists in the URL hash so views are reload-stable and shareable.
Summary
src/web/dashboardFilters.ts— pureparseFilters/serializeFilters/applyFilters/toggleStatus/toggleSorthelpers, no React deps. Unit-tested indashboardFilters.test.ts(15 cases).src/web/Dashboard.tsx— addsFilterBar(status pills + text input) andSortableHeader, sorts on Started, Finished, Turns, Tokens, Cost; default remains "started desc".status,q,sort,dir(e.g.#/?status=failed,running&q=BEN-30&sort=cost&dir=asc), so reloads and shared links keep the view.src/web/App.tsx—parseHash()extracts the dashboard query string and passes it to<Dashboard />.docs/FRONTEND.md— documents the new query-string convention next to the route table.Demo
n/a — automated cron run; web UI not exercised in headless environment. Manual smoke-test journey:
pnpm dev WORKFLOW.md --mock, click status pills, sort headers, and the URL hash updates; reloading restores the view.Alternatives
/api/runs?status=...query — rejected: the current API already returns the visible runs, and client-side filtering is instant and matches the ticket's "client-side filter is fine" guidance.App.tsxmatches existing patterns (route.search) and avoids ambient state.@tanstack/react-virtual) — deferred per the ticket's "only if N > ~200" note.Test Plan
pnpm all— typecheck + fmt:check + lint + test + eval (135 unit + 5 eval, all green)pnpm build:web— not run in this cron environmentdashboardFilters.test.tscovers parse/serialize round-trip, multi-status filter, identifier and title text filter (case-insensitive), each sort key, and null-finishedAtordering.Generated by Claude Code