feat(webapp): customizable runs list with columns and smart columns - #4652
Merged
Conversation
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan includes up to 10 reviews per rolling hour; 6 remain after this review. 📜 Recent review details⏰ Context from checks skipped due to timeout. (17)
WalkthroughAdded customizable runs-list columns with visibility, ordering, locked columns, reset behavior, and URL-persisted layouts. Added smart columns that read payload, metadata, or output data through JSON paths and display formatted values. Updated table rendering, run loaders, live polling, presenters, and repository selection to load only required fields. Added smart-column preview support and Vitest coverage. 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Contributor
Observability mapAs of 19/100 over 446 measured of 463 entry points (base 19, no change) What this PR changed
FIX FIRST
AUDIT 3 of 50 sensitive mutations record an actor. 47 without one. What the score is made ofThe score and findings here are report-only and never gate the merge. Separately, a required test suite keeps this tool's symbol and route lists in sync with the code they name, and can fail a pull request that renames or removes a symbol they reference, or that adds the first route with a segment they anticipate. Each failure names the list to edit. The rules and their reasons: internal-packages/observability-map/README.md. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
ericallam
marked this pull request as ready for review
August 17, 2026 22:07
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…parsing Isomorphic column catalog plus the URL state codec (cols/sc) and the client-side payload/metadata/output parsing and JSON subpath extraction that the customizable runs list is built on. Pure, unit-tested; no behavior change on its own.
The list select is now built from the columns actually shown. A run's payload and output are large, so they are only hydrated when a smart column references them; everything else the presenter needs stays selected regardless.
Adds a Display popover to show/hide and reorder columns, and lets you add "smart columns" that pull a JSON value out of a run's payload, metadata, or output. Column choices live in the URL. ID, Task, and Status can be reordered but not hidden. Smart columns are display-only; offloaded or missing values render a clear placeholder.
The 3s poll now carries the payload/metadata/output a smart column reads, so custom column values update in place instead of only on a full page load.
Smart columns can now be edited in place from the Display popover. Marks smart columns with a code-bracket icon instead of a source-colored dot, shows a drop indicator while reordering columns, drops the redundant Duration cell-count label, and keeps the Display button label constant.
Toggling a column now hides/shows it in place instead of moving it to a separate section, so the list never reorders when you check a box (order lives in the URL, hidden columns keep their slot). Marks smart columns with a variable icon, and gives them an explicit remove action distinct from hiding.
…s on hover Marks smart columns with a bolt icon, and the display-options rows now show edit/remove/drag only on hover so a resting list is just a checkbox and a name.
Column state is now delta-encoded: order is written only when it differs from the default, and hidden columns are a single `hide` list. Removing one column produces `?hide=ver` instead of the whole ordered list.
Wider two-column layout with the sample/preview pinned beside the form. Source is now radio cards with a description each and defaults to payload; display options are pills; and the display-only note is an info box at the top instead of a warning at the bottom.
…blobs The sample now renders through the shared CodeBlock (JSON syntax highlighting, same as the run page) and the sample string is capped so a large inline blob can't stall the modal; the full value is still used to resolve the path, and offloaded values show the offloaded state.
The sample is now a clickable, syntax-colored JSON tree: clicking a key or array index fills the JSON path field and highlights the active node. Nodes collapse and children are capped so a large blob stays manageable.
Object and array rows in the smart-column sample now only expand and collapse; only leaf values fill the path when clicked, since a column renders a single value. Drill into a container to pick a leaf inside it (e.g. an array element, or a key within an array element).
…ration columns
Number(null)/Number("")/Number([])/Number(false) are all a finite 0, so an empty value showed a misleading 0 (or 0ms). Only coerce actual numbers and non-empty numeric strings; anything else falls back to its raw rendering.
RUN_COLUMN_IDS, STANDARD_COLUMNS, SMART_COLUMN_SOURCES, smartColumnRef and RunColumnGate are only used within runColumns.ts, so un-export them to satisfy the knip check. The externally-consumed RunColumnId/SmartColumnSource types stay exported.
Completes the previous commit: STANDARD_COLUMNS, SMART_COLUMN_SOURCES, smartColumnRef and RunColumnGate are only used within runColumns.ts.
… dialog The preview endpoint hydrated payload, metadata and output for 10 runs on every open (~3 blobs x 10, up to the 512KB inline limit each). It now fetches only the currently-selected source; the dialog passes its source and refetches when the user switches, cutting the worst-case transfer roughly threefold.
…anges The load effect skipped the fetch while a previous request was in flight and never retried, so quickly switching source could leave the sample and preview showing the old (or no) source. The effect only fires on open/sampleUrl change, so the guard was unnecessary; drop it.
ericallam
force-pushed
the
feature/tri-13328-runs-list-column-customization
branch
from
August 19, 2026 09:49
c2384e2 to
61cba49
Compare
@trigger.dev/build
trigger.dev
@trigger.dev/core
@trigger.dev/python
@trigger.dev/react-hooks
@trigger.dev/redis-worker
@trigger.dev/rsc
@trigger.dev/schema-to-json
@trigger.dev/sdk
commit: |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
… sample The sample loader forwarded every active filter except regions and taskKinds, so with a region or task-type filter applied the preview could sample runs not in the filtered list. Pass both through to match the list.
…tion Resolves two conflicts, both against mechanical lint fixes that landed on main after this branch's merge-base: - TaskRunsTable.tsx: main tidied a redundant fragment inside the hardcoded header block that this branch replaces wholesale with the column-registry `visibleColumns.map`. Kept the registry version; main's exhaustive-deps fix on the same file (`[checkboxes, runs, select]`) merged cleanly and is intact. - runs._index/route.tsx: main removed a redundant `<>` wrapper and reindented. Reapplied that same cleanup on top of this branch's version, so the Columns control and column-derived select are preserved. Also drops two now-unnecessary single-child fragments in ColumnHeader / ColumnCell, which main's newly-enforced react(jsx-no-useless-fragment) rule flags. Typecheck confirms the returns are valid without them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- Swap the trigger icon for a dedicated ColumnsIcon (three-column glyph). - Match the right-hand toolbar gap to the filters on the left (gap-x-1.5). - Style the column list's scrollbar with the app's standard thin scrollbar. - Replace the hand-rolled popover buttons with PopoverMenuItem, and pad the column list, so heights, padding, hover and cursor match menus elsewhere. The rows' name area is now a native label, so clicking it toggles the column and shows a pointer; locked rows stay non-interactive. - Stop Radix focusing the first row on open, which revealed that row's hover-only reorder handle through :focus-within before the mouse arrived. - Add "Save to favorites" / "Remove from favorites", sharing one useFavoritePageToggle hook with the page-header star so the two agree on what's favorited and produce identical favorites. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- The reorder handle and the smart-column edit/remove buttons revealed themselves through the row's :focus-within, so toggling a checkbox kept them visible after the cursor left. They now key off hover, plus :focus-visible on the control itself, which programmatic and mouse focus don't match — so the keyboard path still shows them but a checkbox click doesn't. - Size the rows and the footer items to h-8 with px-2, matching the visible row height of the filter popovers' SelectItem (they were 1.8rem, visibly shorter). - Give the Columns button an "l" shortcut and a "Customize columns" tooltip, the same text-plus-ShortcutKey pairing the filter buttons use, and list it under Runs page in the keyboard shortcuts sheet. "l" is unused on all five lists this control appears on (it's the Logs page's level filter elsewhere). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
The disabled "Reset to default" differed from its enabled state by exactly one
thing: opacity 0.75 on the inner span. Text and icon colours were identical and
the background never changed (hover can't fire under pointer-events-none), so
the only cue was a 25% fade on already-dim text. It now carries three cues:
opacity drops to 50%, the label steps from text-bright down to text-dimmed so
the label/icon hierarchy flattens, and the cursor reads not-allowed. A tooltip
explains the condition ("Columns are already at their default") rather than
leaving a dead control with no reason. Both levers are theme-safe: verified
near-black-on-white vs mid-grey-at-50% in light, bright vs dimmed in dark.
Opening the popover with the shortcut now lets Radix focus the first row so the
list can be tabbed immediately; mouse opens still keep focus put, since moving
it would reveal that row's hover-only reorder handle. The popover is controlled
so the two paths can be told apart.
Also updates ColumnsIcon to the wider 18x16 body with lines at x=9 and x=15.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…umns - Drop the info callout for plain intro text at the top of the dialog. - Narrow the dialog (1040px -> 860px) and stack Source, JSON path, Column label and Display as vertically instead of spreading them across a wide column. - Lay the body out as three even columns: form, sample, preview. - Display as now reuses the same radio card as Source, without descriptions. - Sample payload and Preview titles use Label, matching Source. - Both panels fill their column height and scroll internally. - Use the DialogFooter primitive: Cancel left, primary right, with the border and padding every other dialog gets (it was a bespoke justify-end div). Stacking the form made the dialog tall enough to clip its own header at 1280x720, so the content is bounded to 90vh with the form column taking up the slack. Also drops the disabled Reset tooltip; the dimming alone reads clearly enough. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The dialog had reinvented two components the app already ships. Source and Display as were a hand-rolled "SourceCard" button with a fake radio circle; both now use RadioGroup/RadioGroupItem — the "description" variant for Source (it takes a description) and "button/small" for Display as. The text fields move to the canonical InputGroup + Label + Input + Hint composition instead of a bespoke flex column with a raw Paragraph. SourceCard is deleted. - Halve the gap between the three columns (gap-5 -> gap-2.5). - Swap the smart column bolt for a custom SmartColumnIcon, in all three places it appears: the runs table header, the Columns popover, and the dialog preview (which is a preview of that same header, so they have to match). - Cancel becomes secondary. - Pad above the intro text to match the side padding, and make it a size larger and bright. - Reword the intro to lead with what to do rather than what the feature is. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The drop line was blue-500 while every selection control around it (the row checkboxes, the dialog's radios) is indigo. Note bg-primary is apple/green in this theme, so this uses indigo-500 directly — the token those controls use. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Rewords the second clause with "so" instead, which keeps the causal link. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- Widen the smart column dialog by 70px (860 -> 930). - Use the bolt icon for the "Add smart column" menu item. - Fix long text escaping above the preview panel's header. The rows are h-8 with items-center, so wrapped text taller than the row was centred and half of it overflowed upwards past scroll-top, where it was unreachable and clipped, losing the start of the string. Rows are now single-line, so content starts under the header and flows down; the panel still scrolls horizontally. - Say "sample payload" rather than "sample" in the intro. - Middle-truncate long text cells at 600px via the existing MiddleTruncate, with the full value in a tooltip. MiddleTruncate gains an optional tooltipDelay (it defaulted to opening instantly, which fires while merely scanning rows) and the runs table passes 500ms. The dialog preview opts out and keeps scrolling instead. - Move the smart column's bolt to the right of the header label at size-4, and give the header a tooltip naming the path, source and display type. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…e actions - The runs table header tooltip now hangs off the bolt itself rather than the info icon TableHeaderCell adds alongside it, and reads as one paragraph. - Cap the full-value tooltip and let it scroll (max-w-sm / max-h-64); a whole payload string is unbounded, so the box could grow arbitrarily tall. MiddleTruncate gains an optional tooltipContentClassName for this. - Wrap long preview text instead of forcing one line. Rows grow with their content now, so items-center no longer pushes overflow above the header -- the reason the previous fix had to disable wrapping. - Match the runs table in the preview header: label first, then the bolt. - The row edit/remove/reorder actions were raw buttons with a hardcoded charcoal hover, so light mode got a dark background. They now use Button variant="minimal/small", whose hover is the bg-tertiary token (verified rgb(39,42,46) dark / rgb(238,240,243) light), still square at 24px. Button forwards no onKeyDown, so the reorder arrow keys listen on a wrapper and catch the event bubbling from the focused button. - Even out the three footer icons at 1.15rem and give the outline star 2px strokes, matching the custom icons beside it (it defaults to 1.5px). - Replace the reset arrow with a custom ResetIcon. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The truncated cell text visibly ate itself a character at a time on load. Two separate causes: Runaway loop. MiddleTruncate measures its parent, and the cell sat in a max-width box inside an auto-width table column: eliding text narrowed the box, which narrowed the column, which re-triggered truncation. Sampling showed it never settled -- 226 chars down to 62 and still shrinking after six seconds. The box is now a definite width, which its own content cannot influence, and the decision to use it comes from the raw string length rather than from layout. Late first pass. Truncation needs layout, so the server rendered the whole string and it only shortened once React hydrated, ~3.6s in. MiddleTruncate now accepts an optional initialCharBudget and seeds its first render with a deterministic character-count truncation, so SSR and the pre-hydration client agree and the measured pass only refines it (99 chars to 102 here, versus 226 to 102 before). Callers that don't pass it are unaffected. Also: - Size the dialog from the form column alone. The sample and preview panels fill their column but no longer contribute height to it, so wrapped preview text scrolls instead of pushing the dialog taller (verified stable at 732px with four long rows). - Give all three columns one title row so their labels line up (they sat 3px apart because only two of them had a min-height). - Swap the smart column row's remove and edit buttons. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- Drop the drag handle's hover fill; it's a handle, not an action. - Tighten the gap between a smart column's name and its bolt (8px to 4px) without changing the checkbox gap, via a nested group. - Clicking a row rang the checkbox because its ring keys off :focus, which a mouse press matches, not :focus-visible. The checkbox no longer rings at all. - Instead the label rings, since that's the actual hit area, and only on keyboard focus (has-[:focus-visible], 1px inset in the link colour). - The form column scrolls, and overflow-y-auto clips at the content box, which cut the inputs' focus ring on both sides. It now has 4px of padding with a matching negative margin, so the ring has room and the content stays on the grid (column titles still align, visible gap unchanged). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…s-list-column-customization
The runs URL now carries cols/sc/hide, and describeFilters counts any param it doesn't recognise, so favoriting a view with customised columns named it "Runs: 3 filters" and added an inflated "+N" to genuinely filtered views. The layout is presentation, not a filter, so it joins NON_FILTER_PARAMS. The three param names were repeated as literals across four files, so they now come from one exported list in the column registry. Reported by Devin on the PR. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
samejr
approved these changes
Aug 21, 2026
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
3 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.
Summary
Makes the runs list customizable. A new Display control lets you show, hide, and reorder columns, and add smart columns that pull a single value out of a run's payload, metadata, or output by JSON path (e.g.
$.failed,$.order.total). Column choices live in the page URL, so a view can be bookmarked or shared. Applies to the global runs list and every per-task / scheduled / agent / webhook / error list, which all share one table.ID, Task, and Status can be reordered but not hidden. Smart columns are display-only (no sort or filter, which would defeat the ClickHouse sort key and cursor).
How it works
Columns come from a shared registry; the Postgres
selectis derived from the visible columns, so a run's large payload/output are only hydrated when a smart column actually references them. All JSON parsing for smart columns happens client-side, respecting the packet content type, parsed once per source per row. Offloaded (too-large) values and paths that aren't present render distinct placeholders rather than fetching per row. The live poll carries the same sources so smart-column values update in place.Scalar columns stay always-selected for now: the shared list presenter has a fixed output shape consumed by several routes and the live poll, and narrowing individual scalar fields would add no real query cost benefit on a single-row read. The select derivation is already column-driven, so tightening this later is a one-line change.
Screenshots
Open workspace in Conductor