feat(frontend): add provider icons

[jog1t]

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

[jog1t]

• fix(frontend): entry deduplication #5061
• [slop]feat(frontend): enable compute, add historical logs #5059
• chore: regenerate sdk #5036
• feat(frontend): allow creating serverfull instances during onboarding #5035
• feat(frontend): add provider icons #5034 👈 (View in Graphite)
• refactor(forntend): improve providers table #5033
• fix(frontend): missing provider configuration right after adding it #5032
• refactor(frontend): datacenter aware provider configuration #5031
• feat(frontend): allow local->staging tunnel in dev #5030
• refactor(frontend): better gateway errors #5029
• feat(frontend): rbac token notice for the engine #5028
• fix(frontend): build ladle correctly #5027
• feat(frontend): improve runners errors ui #5026
• fix(frontend): 404 navigation issues #5025
• fix(frontend): ns aware navigation #5024
• fix(frontend): navigate only by using actor ids #5023
• feat(frontend): add serverless check when editing the runner config #4961 : 1 other dependent PR (#4964 )
• main

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

[claude]

PR Review: feat(frontend): add provider icons

Overview

Adds custom branding (icon + display name) for custom runner providers. Users connecting with custom or custom-platform providers can now pick a FontAwesome icon and label that appears in the provider list. The core of this is a new IconPicker component that lazily loads icons and virtualizes the grid for performance.

---

Issues

icon-picker.tsx — "use client" directive is unnecessary
This is a Next.js-specific directive. The project uses TanStack Router. Remove it to avoid confusion.

icon-picker.tsx — loadAllIcons imports the entire icon library eagerly
import("@rivet-gg/icons") pulls the full icon library into a single chunk the moment the picker opens. The lazy per-file loading via import.meta.glob used for IconRenderer is the right pattern for display; consider using the same approach for the picker grid to avoid a large upfront fetch (or at minimum document the tradeoff).

data.ts — redundant .partial()
All fields in providerMetadataSchema are already marked .optional(), making the chained .partial() a no-op. Remove it.

const providerMetadataSchema = z
  .object({
    provider: z.string().optional(),
    customName: z.string().optional(),
    customIcon: z.string().optional(),
  })
  // .partial() is redundant — all fields above are already optional
  .optional();

isCustomProvider is duplicated across files
The helper isCustomProvider(provider) is defined inline in runner-config-table.tsx but the same logic (provider === "custom" || provider === "custom-platform") is also repeated in the two dialog frame files and the form. Move it to lib/data.ts alongside the other deriveX helpers.

data.ts — each deriveX call re-parses the same metadata object
When all three helpers are called together (as in runner-config-table.tsx), the Zod schema is applied three times to the same value. Parse once and return a structured object, or combine into a single deriveProviderBrandingFromMetadata helper.

CustomBranding component — preview not shown in the default state
The preview block is only rendered when name || icon is truthy. A user who fills neither field won't see the "Custom" default label rendered, which is the exact case worth previewing. Consider showing the preview unconditionally.

---

Minor / Nits

• icon-picker.tsx — keyboard navigation: The virtualized grid has no arrow-key navigation. Tabbing through hundreds of icon buttons is painful. Consider roving tabindex or at minimum grouping focus so Tab advances row-by-row.
• icon-picker.tsx — getLazyIcon keyed on exportName, not iconName: The cache map key is exportName (e.g. faRocket), which is consistent, but the function parameter is the raw icon name (e.g. rocket). The asymmetry between the parameter and the cache key is a readability concern — add a comment or rename one.
• connect-manual-serverfull-frame.tsx — trimming already handled in Zod schema: values.customName?.trim() || undefined duplicates the .trim() already present in the Zod schema. Rely on the schema output instead.
• icon-picker.stories.tsx — raw <input> instead of project Input: InsideProviderRow uses a plain <input>. Use the project's Input component for consistency with the real form.

---

What's working well

• Virtualizing the icon grid with @tanstack/react-virtual is the right call for a large icon set.
• The lazy-load cache (lazyIconCache) prevents redundant module fetches.
• groupKey in ProviderSummary correctly groups custom providers by both name and icon, avoiding misleading de-duplication.
• Using safeParse instead of parse in data.ts (changed from the original) is more resilient to unexpected metadata shapes.
• Storybook stories cover the empty, preselected, and unknown-icon-name cases — good defensive coverage.

[jog1t]

Merge activity

• May 15, 7:36 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 15, 8:00 PM UTC: Graphite rebased this pull request as part of a merge.
• May 15, 8:00 PM UTC: @jog1t merged this pull request with Graphite.