Skip to content

fix(frontend): missing logs route, reworded onboarding, updated tanstack, fixed infinite onboarding loop#4428

Merged
jog1t merged 1 commit intomainfrom
fix/fe
Mar 15, 2026
Merged

fix(frontend): missing logs route, reworded onboarding, updated tanstack, fixed infinite onboarding loop#4428
jog1t merged 1 commit intomainfrom
fix/fe

Conversation

@jog1t
Copy link
Contributor

@jog1t jog1t commented Mar 15, 2026

This pull request introduces several improvements and refactors across the frontend codebase, focusing on UI/UX enhancements, dependency updates, and code cleanup. The most notable changes include updating the TanStack router dependencies, refining deployment and onboarding flows for better user experience, and cleaning up unused or redundant code in the actors list and deployment logs components.

Dependency updates:

  • Upgraded @tanstack/react-router and related packages to the latest versions, which may improve routing performance and compatibility.

UI/UX improvements:

  • Enhanced the deployment check and getting started onboarding flow:

    • The deployment status now uses a Ping indicator and improved messaging for better clarity. [1] [2] [3] [4] [5]
    • The "Deploy to Rivet Cloud" step is now clearer, and the status check is visually separated in a bordered box. [1] [2]
    • Skeleton loaders and stepper layout are now full-width, improving responsiveness. [1] [2] [3]
    • Improved environment variables section with async loading and better fallback UI.
  • Improved tables and logs:

    • The images table now has better column sizing for "Deployed To" and "Date" columns.
    • The deployment logs component now uses a more consistent grid layout for log rows and removes unnecessary viewport styling. [1] [2]

Code cleanup and refactoring:

  • Removed the unused ActorIdPrefiller component and related imports from the actors list, simplifying the list rendering logic. [1] [2] [3]
  • Cleaned up imports and minor formatting in several files for consistency. [1] [2] [3] [4]

Routing and type generation fixes:

  • Updated route paths and type definitions in routeTree.gen.ts to ensure trailing slashes are consistent and route matching is accurate. [1] [2] [3] [4] [5] [6]

Minor copy and terminology tweaks:

  • Adjusted labels and copy for clarity, such as changing "Currently deployed" to "Current" in the images table.

These changes collectively improve the frontend's usability, maintainability, and consistency.

@jog1t jog1t self-assigned this Mar 15, 2026
@railway-app railway-app bot temporarily deployed to rivet-frontend / rivet-pr-4428 March 15, 2026 18:33 Destroyed
@railway-app
Copy link

railway-app bot commented Mar 15, 2026

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

Service Status Web Updated (UTC)
website 😴 Sleeping (View Logs) Web Mar 15, 2026 at 6:48 pm
frontend-inspector 😴 Sleeping (View Logs) Web Mar 15, 2026 at 6:47 pm
frontend-cloud 😴 Sleeping (View Logs) Web Mar 15, 2026 at 6:45 pm
mcp-hub ✅ Success (View Logs) Web Mar 15, 2026 at 6:35 pm
ladle ❌ Build Failed (View Logs) Web Mar 15, 2026 at 6:34 pm

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 15, 2026

More templates

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4428

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4428

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4428

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4428

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4428

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4428

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4428

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4428

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4428

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4428

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4428

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4428

commit: 133bd02

@claude
Copy link

claude bot commented Mar 15, 2026

PR Review

Overall this is a solid set of improvements. The onboarding loop fix and the refactor from component-based Navigate to loader redirect are both meaningful improvements.

Bugs / Potential Issues

1. Inconsistent early-return guards between cloud and engine loaders

The cloud ns.$namespace/index.tsx uses if (deps.n && deps.actorId) (requires BOTH) while the engine version uses if (deps.n || deps.actorId) (requires EITHER) to skip the redirect logic.

If a user navigates to the cloud route with only actorId set but no n, the loader will not skip and will attempt a redirect, clobbering the existing actorId in the URL. This may be intentional (cloud needs both to fully initialize), but a comment explaining the distinction would help future maintainers.

2. @tanstack/zod-adapter not updated

Other TanStack packages were bumped from ^1.131.x to ^1.166-167.x, but @tanstack/zod-adapter remains at ^1.131.36. A ~35-minor-version gap with closely related packages can sometimes introduce API incompatibilities. Worth confirming this is intentional.

Logic Fix Worth Calling Out

The onboarding display logic change in ns.$namespace.tsx is correct:

  • Before (buggy): displayOnboarding = (!hasImage && !isReady) || !hasActors;
  • After (fixed): displayOnboarding = (!hasImage || !isReady) && !hasActors;

The old logic would trigger onboarding on any namespace with no actors even after a successful deployment. The companion fix to displayBackendOnboarding (adding !hasActors) is also correct.

Deployment Logs Grid Layout

The shift from grid-cols-subgrid (CSS subgrid inheriting from parent) to grid-cols-[max-content,16ch,3fr] per row gives each log row its own independent grid. The removal of [&>div]:!grid [&>div]:grid-cols-[minmax(0,1fr)] from viewportProps is now load-bearing. Worth verifying VirtualScrollArea does not impose conflicting layout on its children after this change.

Minor

  • The Ping in deployment-check.tsx has className="relative" on the component itself inside a wrapping div also with className="relative mr-4". The outer div is likely the one doing positioning work; the inner one may be redundant.
  • The fragment-to-span change for the success state is semantically correct.
  • Moving ActorIdPrefiller logic from a Suspense-rendered component using Navigate into a route loader is the right pattern. Component-based navigation triggers an extra render cycle compared to loader redirects.

@jog1t jog1t merged commit ce928e3 into main Mar 15, 2026
14 of 18 checks passed
@jog1t jog1t deleted the fix/fe branch March 15, 2026 18:55
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