feat(frontend): compute ui

[abcxff]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

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?

Please describe the tests that you ran to verify your changes.

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-5084 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
frontend-inspector	❌ Build Failed (View Logs)	Web	May 23, 2026 at 1:27 am
kitchen-sink	❌ Build Failed (View Logs)	Web	May 23, 2026 at 1:26 am
ladle	🕒 Building (View Logs)	Web	May 23, 2026 at 1:26 am
website	🕒 Building (View Logs)	Web	May 23, 2026 at 1:26 am
frontend-cloud	🕒 Building (View Logs)	Web	May 23, 2026 at 1:26 am
mcp-hub	✅ Success (View Logs)	Web	May 21, 2026 at 12:06 am

[abcxff]

• docs: prep for site #5096
• chore: enable rivet compute docs #5095
• feat(frontend): compute ui #5084 👈 (View in Graphite)
• main

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

[claude]

PR Review: feat(frontend): compute ui

Summary

This PR activates the Rivet Compute (managed-pool / Docker image) UI that was previously disabled. Changes include: un-commenting the "Rivet Compute" provider option, adding an inline DeploymentsSection preview to the actors grid, adding namespace guards on the deployments/logs routes, converting the getting-started onboarding to a flat numbered list, guarding runner query calls behind capability checks, fixing the scroll-position restore in deployment logs, and various tooltip/dropdown polish.

---

Findings

Blocking

1. Missing faLogs import in actors-grid.tsx

faLogs is used at the "Logs" button but is not imported. The import line only brings in { faGear, faPlus, Icon }. This will cause a compile/runtime error when the Logs button renders (managed pool present).

Fix: add faLogs to the icon import.

---

2. limit: 1 on the full Deployments page

deployments.tsx line ~89 passes { limit: 1 } to currentProjectImagesQueryOptions. The inline actors-grid preview deliberately uses { limit: 5 }, but the dedicated /deployments route should use the default (10) or a larger batch. As written, infinite scroll loads one item per page.

---

Significant

3. hasMore uses count threshold instead of hasNextPage

actors-grid.tsx sets const hasMore = sorted.length >= 5 to decide whether to show "View all". If the API returns exactly 5 items with no next cursor this still shows the link, sending the user to the deployments page for the same 5 images. The correct signal is hasNextPage from the infinite query result.

---

4. YAML tab-vs-space indentation in agent instructions

getting-started.tsx line ~1021: the managed-pool-config line in the embedded GitHub Actions YAML uses hard tabs while all surrounding lines use spaces. YAML is whitespace-sensitive; mixed indentation is invalid and agents who copy this template will get a broken rivet-deploy.yml.

---

5. Inconsistency between agent-instructions YAML and UI-rendered githubActionYaml

The githubActionYaml constant (rendered in the UI for users to copy) omits the managed-pool-config line that the agent-instructions variant includes. The instructional text says port 3000 must be configured, but the UI code sample does not configure it. These should be consistent.

---

Minor

6. Dead code: unreachable else branch in logs.tsx

The component returns early when !pool, so the {pool ? <DeploymentLogs> : <div>No logs...</div>} ternary later in the render is always truthy. The else branch is dead code and can be removed.

---

7. Shared static noop query key across components

all-runner-select.tsx, runner-select.tsx, and actor-create-form.tsx all use the same static string "noop-runner-names" as the query key for their disabled fallback useInfiniteQuery. All three share a TanStack Query cache entry. This is low-risk since enabled: false skips fetching, but a better pattern would be skipToken or skipping the hook call entirely when the capability is absent.

---

8. Typo in agent instructions troubleshooting text

getting-started.tsx line ~1076:
"Ensure that we the container is connectable..." → "Ensure that the container is connectable..."

---

9. "Go to dashboard" link drops existing URL search params

getting-started.tsx line ~1570 uses search={{ onboardingSuccess: true }}, dropping any existing params. The auto-complete path at ~1537 correctly uses the spread form (s) => ({ ...s, onboardingSuccess: true }). These should be consistent.

---

Overall

The feature direction is correct and the architectural approach is solid (capability guards, route-level namespace guards, pixel-offset scroll restore). Items 1 and 2 are blocking — the missing import will crash the Logs button and limit: 1 functionally breaks the deployments page. Item 4 (YAML indentation) should also be fixed before merge since it produces an invalid CI template. The rest are polish/cleanup.

[abcxff]

Merge activity

• May 23, 1:25 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 23, 1:26 AM UTC: Graphite rebased this pull request as part of a merge.
• May 23, 1:27 AM UTC: @abcxff merged this pull request with Graphite.