refactor(frontend): actor list uplift

[jog1t]

Description

This pull request improves the user interface and user experience across several components in the frontend application.

Key improvements include:

• Infinite scroll optimization: Added isFetchingNextPage checks to prevent duplicate API calls when the VisibilitySensor is already triggering a fetch operation across multiple components (actor builds list, context switcher, namespace select, user dropdown, etc.)

• Responsive sidebar enhancements:

  • Implemented automatic sidebar collapse when window width is below 1000px with auto-expansion when space becomes available
  • Added configurable maximum width (280px) alongside the existing minimum width constraint
  • Enhanced sidebar dimensions context to track both min and max width values

• Actor interface improvements:

  • Redesigned actor tabs with icons and responsive labels that hide on narrow screens while showing tooltips
  • Moved actor stop button to the General tab with improved styling and confirmation flow
  • Added status indicators directly on tabs and optimized the actor list layout for mobile devices
  • Enhanced the destroy actor button with better loading states and query invalidation

• Performance optimizations:

  • Implemented shared interval system for RelativeTime components to reduce timer overhead
  • Added responsive tab label visibility based on available width
  • Improved actor list grid layout for better mobile responsiveness

• UI polish:

  • Conditional rendering of destroyed timestamp (only shown when actor is actually destroyed)
  • Better loading states and combobox infinite scroll handling
  • Enhanced tooltip system with disabled state support

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Tested infinite scroll behavior to ensure no duplicate API calls
• Verified responsive sidebar behavior at various screen sizes
• Tested actor tab functionality with and without labels
• Confirmed actor destruction flow works correctly with proper state updates
• Validated mobile responsiveness across different viewport sizes

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4511 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
ladle	❌ Build Failed (View Logs)	Web	Apr 15, 2026 at 3:09 pm
kitchen-sink	❌ Build Failed (View Logs)	Web	Apr 15, 2026 at 3:08 pm
frontend-inspector	🕒 Building (View Logs)	Web	Apr 15, 2026 at 3:08 pm
frontend-cloud	🕒 Building (View Logs)	Web	Apr 15, 2026 at 3:08 pm
website	😴 Sleeping (View Logs)	Web	Apr 12, 2026 at 6:50 pm
mcp-hub	✅ Success (View Logs)	Web	Mar 25, 2026 at 9:52 pm

[jog1t]

• feat: dev toolbar #4325
• refactor: icons chunk #4567
• refactor(frontend): actor list uplift #4511 👈 (View in Graphite)
• feat(frontend): logs uplift #4504
• refactor: uplift metrics #4499 : 1 other dependent PR (#4503 )
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

---

PR Review: refactor(frontend): actor list uplift

Overview

This PR delivers a solid set of UX improvements: fixing duplicate infinite-scroll API calls, making the sidebar responsive, adding icon+responsive-label tabs to actor details, moving the destroy button into the General tab, and a clever shared-interval optimization for RelativeTime. The changes are generally well-structured.

---

Bugs / Correctness

1. Status indicator absolute positioning without a relative parent

In actors-actor-details.tsx, the QueriedActorStatusIndicator inside the Metadata TabsTrigger uses className="absolute top-0.5 right-0". Without relative on the parent TabsTrigger, the indicator positions relative to the nearest positioned ancestor rather than the tab trigger. This causes a visible layout bug. Add relative to the TabsTrigger className for the metadata tab.

2. Dead cn class in actor-general.tsx

After wrapping the destroyed section in destroyTs ? ... : null, the inner Dd still has a cn class with !destroyTs that is always false inside the truthy branch. The class is never applied. Remove the cn call or drop the class entirely.

---

Code Quality

3. Significant tab rendering duplication

The tab list JSX is copy-pasted nearly verbatim between ActorTabsShell and the non-actorId branch of ActorTabs. Each tab is roughly 15 lines of WithTooltip > TabsTrigger > Icon + span repeated for every tab in both components. This pushes actors-actor-details.tsx past 700 lines and makes both paths hard to keep in sync. Consider extracting a shared ActorTab helper component accepting value, icon, label, showLabel, and optional disabled/children props. This would cut the tab-list JSX by roughly 80%.

4. isFetching vs isFetchingNextPage inconsistency in user-dropdown.tsx

All other VisibilitySensor guards use isFetchingNextPage, but user-dropdown.tsx uses isFetching (from Clerk's useOrganizationList). This is likely correct since Clerk's API differs from React Query's useInfiniteQuery, but a short comment would make the intentional inconsistency clear.

---

Minor / Style

5. SidebarDimensionsContext default maxWidth: 20 is a magic number

The 20 is a percentage matching the old maxSize={20} prop, but it is not obvious at a glance. A brief comment would help.

6. metadata moved to last in TAB_PRIORITY is a silent behavior change

Moving metadata after console changes the default-selected tab when most tabs are hidden. Worth a comment in the constant explaining the intended priority.

7. RelativeTime tier computed from Date.now() rather than now state

Using Date.now() at render time is correct and always accurate. If strict consistency with the displayed time is ever needed, use the now state value instead. In practice there is no observable difference since now is refreshed every tick.

---

What is Good

• isFetchingNextPage guard applied consistently across all infinite-scroll sensors.
• The shared-interval system in RelativeTime is a clean optimization. Cleanup logic (clearing intervals when subscriber count hits zero) is correct.
• autoCollapsedRef in route-layout.tsx cleanly distinguishes user-triggered vs auto-triggered collapse and handles edge cases correctly.
• Replacing empty div elements with null for hidden grid cells avoids phantom grid columns.
• Adding queryClient.invalidateQueries on destroy success in ActorStopButton ensures the UI reflects the new state immediately.
• Conditional rendering of the destroyed timestamp is a clean UX improvement.

---

Summary

The infinite-scroll fix and RelativeTime optimization are solid. The main issue is the missing relative on the Metadata tab trigger (item 1, causes a visible layout bug). The tab duplication (item 3) is the most significant code quality concern. Everything else is minor polish.

[jog1t]

Merge activity

• Mar 26, 2:44 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 26, 2:45 AM UTC: Graphite couldn't merge this pull request because a downstack PR refactor: uplift metrics #4499 failed to merge.
• Apr 15, 3:02 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 15, 3:08 PM UTC: Graphite rebased this pull request as part of a merge.
• Apr 15, 3:09 PM UTC: @jog1t merged this pull request with Graphite.

[github-actions]

Preview packages published to npm

Install with:

npm install rivetkit@pr-4511

All packages published as 0.0.0-pr.4511.59c8a5d with tag pr-4511.

Engine binary is shipped via @rivetkit/engine-cli on linux-x64-musl, linux-arm64-musl, darwin-x64, and darwin-arm64. Windows users should use the release installer or set RIVET_ENGINE_BINARY.

Docker images:

docker pull rivetdev/engine:slim-59c8a5d
docker pull rivetdev/engine:full-59c8a5d

Individual packages

npm install rivetkit@pr-4511
npm install @rivetkit/react@pr-4511
npm install @rivetkit/rivetkit-native@pr-4511
npm install @rivetkit/sqlite-wasm@pr-4511
npm install @rivetkit/workflow-engine@pr-4511