fix(web): UI papercuts — create shortcuts, palette ranking, data browser, trace legend, deep-link Back

[dviejokfs]

Description

A pass over recurring UI papercuts, driven by dogfooding. Frontend only — 24 files, all under web/src/, no backend or migration changes.

1. Sole create actions get an N shortcut

CreateActionButton (badge + shortcut) already existed but only 14 places used it. Ten list pages had a create button as their only primary action and no shortcut: Teams, Dashboards, Metric alerts, S3 sources, Notification providers, Routes, Monitors, Feature flags, Error alert rules, Email domains.

Where a page shows the button in both the header and the empty state, only the header registers the shortcut so one keypress can't fire twice. Where the header button is hidden while the list is empty (notification providers, email domains) the two branches are mutually exclusive and the empty-state button carries it.

Bug found in the shared hook: useKeyboardShortcut fired whenever focus wasn't in a text field, including with a modal open — pressing N with the S3 edit dialog up navigated the page out from under it. It now bails while a Radix dialog, alert dialog, menu or select is open. That fix applies to all 14 pre-existing usages too.

2. Command palette ranks by relevance

Results were bucketed by section and the sections rendered in a fixed order, so a weak keyword hit in Navigation outranked an exact title match in Settings — searching work put Sandboxes above Worker Nodes. Now one list ordered by score, with the section demoted to a right-aligned label.

Fuse alone wasn't enough: a zero-distance keyword hit beats a fuzzy title hit at any per-key weight, which put Users (tagged team) above Teams. Title matches now score explicitly (titleBoost, 0–0.6) and the Fuse component is capped at 0.25, so tags still rank but never above a title match.

Also: Teams and Create Team were missing from the palette entirely, and project sub-pages are now reachable from anywhere (demo deploy → that project's Deployments) for a bounded set of pages per project.

3. Data browser

• The tree/table split is draggable on desktop, width persisted per service. Mobile keeps the overlay drawer, where a resize handle has nothing to drag against.
• The mobile tree toggle had no accessible name.

The sort fix originally in this PR was reverted. Rebasing onto main brought in the data-browser redesign (#557), which had already fixed the stale-sort symptom independently via effectiveSortField (validates the sort column against the entity's own fields). Layering my navigateTo routing on top of that collapsed the tree on entity selection — confirmed by running the same switch-tables flow against unmodified origin/main (passes) and against this branch with the change (fails). Reverted rather than ship a fix plus a new regression. Residual gap: the stale filter still carries across a table switch; that needs a fix derived from the redesigned navigation and is left as a follow-up.

Note: react-resizable-panels v4 renames PanelGroup/PanelResizeHandle to Group/Separator, so the published shadcn resizable snippet does not compile against the version already in package.json. The wrapper here targets v4.

4. Unified trace: project legend instead of a slug per span

The per-span project badge truncated to galachain-gat… on every row while still costing ~88px of the name column. Rows now carry only the colour dot; a legend above the waterfall decodes the colours with the full slug, and the name stays reachable via tooltip/aria-label.

CrossProjectTraceDetail already had a legend. TraceDetail's inline unified view (?view=unified) did not — it tagged every span but never said what the colours meant — so that view gets one too.

5. Back works on deep links

navigate(-1) silently does nothing when a page is opened directly (shared URL, new tab, bookmark) — there's no earlier entry to pop, so the user clicks Back and stays put with no feedback. Trace detail is exactly the kind of page people paste to each other.

New useGoBack(fallback) uses react-router's history.state.idx to detect "nothing of ours behind us" and navigates to the parent instead. Applied to all 19 call sites across 8 files, each with its real parent. The forms' post-save navigate(-1) had the same bug — save on a deep-linked form and you were stranded on it.

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Evidence

Run against a real local instance (slot 15) with a provisioned Postgres service and two seeded tables with deliberately disjoint columns. 25 Playwright checks, all passing. The specs were written to verify these changes and deleted afterwards — they are not part of this PR.

Shortcuts (15 checks) — badge renders as N; n opens the dialog (Teams, Monitors, Feature flags) or navigates (Backups, Routes, Notifications, Dashboards, Metric alerts, Alert rules); typing n into a field does not fire; n with a dialog open does not navigate.

Palette (7 checks)

✓ "work" ranks Worker Nodes above Sandboxes
✓ "team": Teams first, keyword-only Users still listed but below
✓ "domains": exact title beats every project sub-page
✓ Teams is reachable from the palette
✓ Create Team from the palette opens the dialog
✓ project detail pages are reachable from anywhere
✓ N shortcut still opens the create dialog (after URL-owned dialog refactor)

Data browser (3 checks)

✓ switching tables drops the previous table sort column
✓ sidebar is resizable on desktop      (tree 320px -> 500px after drag)
✓ mobile keeps the drawer and shows no resize handle

Trace + Back (7 checks) — legend renders untruncated slugs, dot count equals span count, dots carry no text; and:

✓ deep-linked trace detail: Back goes to the traces list   (asserts history.state.idx === 0 first)
✓ deep-linked global trace: Back goes to a contributing project
✓ deep-linked IP detail: Back goes to proxy logs
✓ in-app navigation still pops history rather than using the fallback

That last one is the regression guard: it proves history navigation wasn't just replaced with a hardcoded redirect.

Static: tsc --noEmit clean. eslint clean on every changed file — the two remaining errors in ServiceDataBrowser.tsx and one in AlertRuleForm.tsx are pre-existing and were confirmed against the origin/main baseline.

Not verified at runtime

• Email → Domains N shortcut. Its create button only appears once an email provider is configured, which needs real SMTP credentials. Same code shape as the notification-providers case that does pass, and it typechecks.
• Unified trace rendering used a mocked /api/otel/global/traces/:id response rather than real ingest (that needs ClickHouse and cross-project OTel spans sharing a trace_id). This drives the real components with realistic data shaped by the generated UnifiedTrace type, but does not prove the backend returns that shape.

Checklist

• I have written tests that cover the changes — as throwaway Playwright specs, see Evidence; not committed
• All new and existing tests pass (cargo test --lib) — n/a, no Rust changes
• cargo check --lib passes with no warnings — n/a, no Rust changes
• My commits follow the Conventional Commits format
• I have updated documentation where necessary — no user-facing docs cover these surfaces

Related issues

None.

[github-actions]

📓 Changelog preview

This is what your commits will add to the generated CHANGELOG.md at release time (via git-cliff). Do not edit CHANGELOG.md by hand — it is generated from your Conventional Commit messages.

## [Unreleased]

### Fixed

- **web:** Give sole create actions an N shortcut and guard it behind overlays
- **web:** Rank palette results by relevance, add Teams, resizable data-browser tree
- **web:** Show unified-trace projects as a colour legend, not a slug per span
- **web:** Make Back work on deep-linked pages
- **web:** Address self-review findings on the shortcut hook and project dot

### Revert

- **web:** Drop the data-browser tree navigateTo routing