refactor(FR-2493): centralize resource slot metadata into BAIMetaDataProvider

[nowgnuesLee]

Resolves #6484 (FR-2493)

Summary

• Centralize resource slot metadata fetching into BAIMetaDataProvider context
• Move useResourceSlotsDetails API call from BUI to webui, with BUI components reading from context via useBAIMetaData() hook
• Add unified useBAIMetaData() hook returning deviceMetaData, resourceSlotsInRG, mergedResourceSlots, refresh, isLoading
• Move ImageWithFallback from webui to BUI as BAIImageWithFallback
• Fix BAIResourceNumberWithIcon to handle server-configured icons via SVG fallback
• Move BAIMetaDataWrapper from DefaultProvidersForReactRoot to MainLayout (wraps only <Outlet />) to prevent login screen blocking
• Update 16 webui components to import useResourceSlotsDetails from src/hooks/backendai
• Remove duplicate useResourceSlotsDetails from BUI hooks/index.ts

Test plan

• Verify login screen renders correctly (BAIMetaDataWrapper no longer blocks it)
• Verify resource slot icons display properly on session creation page
• Verify server-configured accelerator icons show with SVG fallback
• Verify agent detail modal shows correct resource metadata
• Verify My Resource and Fair Share pages work with the new hook imports

[nowgnuesLee]

• docs: require 'use memo' directive in custom hooks #6669
• refactor(FR-2493): centralize resource slot metadata into BAIMetaDataProvider #6668 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

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

[github-actions]

Coverage report for ./packages/backend.ai-ui

St.❔	Category	Percentage	Covered / Total
🟢	Statements	81.87%	429/524
🟡	Branches	70.43%	362/514
🟡	Functions	76.86%	93/121
🟢	Lines	83.19%	391/470

Test suite run success

319 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from 8908c4f

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	8.87% (+0% 🔼)	1736/19573
🔴	Branches	8.03% (-0% 🔻)	1097/13653
🔴	Functions	5.31%	283/5328
🔴	Lines	8.56% (+0% 🔼)	1628/19012

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🔴	hooks/backendai.tsx	11.11% (-0.16% 🔻)	0%	0%	11.39% (-0.2% 🔻)

Test suite run success

847 tests passing in 38 suites.

Report generated by 🧪jest coverage report action from 8908c4f

[Copilot]

Pull request overview

This PR centralizes resource slot/device metadata handling by moving the “resource slot details” fetch/merge logic into the WebUI side and exposing the consolidated result to Backend.AI UI (BUI) components via BAIMetaDataProvider + useBAIMetaData(). It also relocates the image fallback component into the shared UI package and updates multiple WebUI components to use the new hook source.

Changes:

• Added a WebUI-side useResourceSlotsDetails() hook that fetches /config/resource-slots/details and merges it with resources/device_metadata.json.
• Updated provider wiring so BUI reads metadata via BAIMetaDataProvider + useBAIMetaData(), and moved BAIMetaDataWrapper to MainLayout to avoid blocking the login screen.
• Moved ImageWithFallback into backend.ai-ui as BAIImageWithFallback and updated resource-icon rendering to support SVG fallback for server-configured icons.

Reviewed changes

Copilot reviewed 36 out of 36 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
react/src/hooks/backendai.tsx	Adds WebUI useResourceSlotsDetails() that fetches server slot details and merges with static metadata.
react/src/components/DefaultProviders.tsx	Refactors BAIMetaDataWrapper to populate BAIMetaDataProvider with unified metadata fields; removes wrapper from root providers.
react/src/components/MainLayout/MainLayout.tsx	Wraps routed content with BAIMetaDataWrapper to avoid login-screen blocking.
react/src/components/*.tsx (multiple)	Switches imports to use WebUI useResourceSlotsDetails() and updates icon rendering to use BAIImageWithFallback.
react/src/components/MyResourceWithinResourceGroup.test.tsx	Updates mocks to reflect the hook import move from BUI to WebUI.
packages/backend.ai-ui/src/hooks/index.ts	Removes duplicate useResourceSlotsDetails export; re-exports useBAIMetaData.
packages/backend.ai-ui/src/components/provider/BAIMetaDataProvider/*	Expands provider/context to carry device metadata + resource slot details + merged result + refresh/loading, and introduces useBAIMetaData.
packages/backend.ai-ui/src/components/BAIResourceNumberWithIcon.tsx	Updates to read merged metadata from context and adds SVG fallback icon loading via BAIImageWithFallback.
packages/backend.ai-ui/src/components/BAIImageWithFallback.tsx	Introduces shared BAIImageWithFallback component in BUI.
.github/instructions/react.instructions.md	Updates guidance to require 'use memo' for components and custom hooks.
.claude/rules/use-memo-directive.md	Adds a repo rule enforcing 'use memo' on components and custom hooks across WebUI and BUI.

Comments suppressed due to low confidence (2)

packages/backend.ai-ui/src/components/BAIImageWithFallback.tsx:30

• hasError is never reset when src changes. If the first src fails to load and later a different (valid) src is provided, the component will remain stuck on the fallback. Consider resetting hasError to false in an effect when src changes.
  packages/backend.ai-ui/src/components/BAIImageWithFallback.tsx:23
• BAIImageWithFallback is a (newly introduced/relocated) component but it’s missing the required 'use memo' directive. Add 'use memo'; as the first statement in the component body (before any hooks like useState).

[nowgnuesLee]

Addressed the two suppressed Copilot comments for BAIImageWithFallback:

1. hasError not resetting on src change — Replaced useState(false) + useEffect reset pattern with derived state: errorSrc tracks which src failed, and hasError is derived as errorSrc === src. When src changes, the error state clears automatically without an effect.

2. Missing 'use memo' directive — Added 'use memo' as the first statement in the component body.