diff --git a/Makefile b/Makefile
index e0900efb..8ddf51fa 100644
--- a/Makefile
+++ b/Makefile
@@ -11,6 +11,8 @@ FRONTEND_CRITICAL_VITEST := \
 	src/api/__tests__/admin.features.spec.ts \
 	src/api/admin/__tests__/backup.spec.ts \
 	src/views/admin/__tests__/FeatureRegistryView.spec.ts \
+	src/console/ReactPageHost.spec.ts \
+	src/console/react/DashboardPage.test.ts \
 	src/router/__tests__/progressive-routes.spec.ts \
 	src/components/ui/__tests__/primitives.spec.ts \
 	src/ui-platform/chartTheme.test.ts \
diff --git a/docs/architecture/CODEBASE_INVENTORY.tsv b/docs/architecture/CODEBASE_INVENTORY.tsv
index 2e512635..ae05b7a1 100644
--- a/docs/architecture/CODEBASE_INVENTORY.tsv
+++ b/docs/architecture/CODEBASE_INVENTORY.tsv
@@ -20,7 +20,7 @@ DEV_GUIDE.md	documentation	maintained	346	9185	196d76feb4c5898fed983fb13499f1d11
 Dockerfile	tooling	maintained	137	4947	c5350cef4a5cf82c87267986a8a98fa79d9a82a3357b6891763e1cba8799b439
 Dockerfile.goreleaser	other-text	maintained	62	2116	1709c5f34c1268966ecca43f34891acf2d1d653c018ff823fa95971cf1a3522c
 LICENSE	other-text	maintained	165	7651	a5681bf9b05db14d86776930017c647ad9e6e56ff6bbcfdf21e5848288dfaf1b
-Makefile	tooling	maintained	71	2353	4d2c4a15731c2e5f932ecbb6ff93b10e331ba53bdb14292e6aac609539161ce5
+Makefile	tooling	maintained	73	2433	0fea246b53079e07518fe5eace1c0e1d8962c01dddef8fece16ab4d9168bd10b
 README.md	documentation	generated	217	8731	ffa1b4f7414c2610ac8b2d8176be1d896a301aae39eb9bf6647ad770796eb2bd
 README_CN.md	documentation	maintained	210	8248	786cd59b59efb8c6344b61a12caea265015cabc0b18bb6c36880be54b184c342
 REPAIR_REPORT.md	documentation	maintained	53	3303	3dc924e1e4b67a1d0ba90a40a01ba1b6959548fff9729506ce7b1596f79214f8
@@ -34,7 +34,7 @@ backend/cmd/model-sync-smoke/README.md	documentation	maintained	47	1255	94d26b21
 backend/cmd/model-sync-smoke/main.go	backend-go	maintained	195	6131	30a89fd0dc24c2a0ab7f540d1cf26158936612103e15b227fb4ee151fb789252
 backend/cmd/model-sync-smoke/main_test.go	backend-go	maintained	174	6378	75550b4ce06d0a6540df9acb9793929e33076570f90cf5416b92acd180b4fa1a
 backend/cmd/module-migrate/main.go	backend-go	maintained	47	2079	fc048ad91f01d0c288222e5742a9cdef75b305d890ff7d844236eb0a57143ba1
-backend/cmd/server/VERSION	other-text	maintained	1	7	37d78127b770f11b7181f3501bdf30f54ad27fb1a796c313d009fdcfe47d3bec
+backend/cmd/server/VERSION	other-text	maintained	1	6	2e376439ec341f14ae018b8aa4796b9336702e6a59d6c42b91f61d84baac9807
 backend/cmd/server/cleanup.go	backend-go	maintained	258	6840	d3b6826d0a76cab0d573a6a2ae3091e44980c79378fb1865b1dc768187f4f2e5
 backend/cmd/server/cleanup_test.go	backend-go	maintained	47	1359	941fb150cc7fb912493e8f2d8b30d3a56b782379213310c6dd0c11740bce28bd
 backend/cmd/server/main.go	backend-go	maintained	205	5377	ac0796b43393359f52b48e68d20bba5309421ed87e6b8f0eeba133a44013d344
@@ -2612,25 +2612,27 @@ frontend/src/composables/useTableSelection.ts	frontend-script	maintained	105	245
 frontend/src/composables/useUIPlatform.test.ts	frontend-script	maintained	96	3646	4b5a32693c122d2b46864f1b3c30d4aa355b1c10033f6875c5c02a6707285f29
 frontend/src/composables/useUIPlatform.ts	frontend-script	maintained	217	7850	d2712e89fbc8745c01a5ba140d07dffb5f48937d246fc2f7a42b2b1c46e98ebe
 frontend/src/config/customProviderPresets.ts	frontend-script	maintained	490	16421	1632100f6067452643a01147b07cd14f505cb4afc27c53007bd34f005426cd92
-frontend/src/console/ReactPageHost.vue	frontend-vue	maintained	76	2092	e23e8f75e52761bf5846e4f5947939563747ee0b6abefc0f234630f01f85fd4c
+frontend/src/console/ReactPageHost.spec.ts	frontend-script	maintained	61	2387	ad4d2ef4238583e5bc142bb06ed9e3ff0c20f87a480adf5c4bf06a93b166fd71
+frontend/src/console/ReactPageHost.vue	frontend-vue	maintained	88	2286	aaffc188df6d15eab400ced10f94277b962c33ee53e082000a449d07adde5845
 frontend/src/console/react/AppearancePage.ts	frontend-script	maintained	158	7524	e6c300c79b4bb41be1133bbdce93a0a383edc32ea22a70c9fcb7d76506103ebd
 frontend/src/console/react/AuthSettingsPage.ts	frontend-script	maintained	152	8802	9a479aaa64bdb6a42ba9dac96085e98683544c2a4d951d5ba921afce2a5ec64e
 frontend/src/console/react/AvailableChannelsPage.ts	frontend-script	maintained	93	8176	d3fc96abfb5147b51ef7a29150d9f7eecf7b3bff7a69fae6e0b1972193a49c8f
 frontend/src/console/react/ChannelStatusPage.ts	frontend-script	maintained	111	12978	5bb7a4e15e8f8ca3c99ad6a4c172ceaf26d86c99c55767c1448fd1d469165651
 frontend/src/console/react/ConsoleHeader.ts	frontend-script	maintained	377	26885	b3299c481427e408801ca8affc2b065912b0ec3f85888b4f0b52087e1dc27d02
 frontend/src/console/react/ConsoleSidebar.tsx	frontend-script	maintained	362	12939	7a8279b3f01e02e6e307054937feda99d92ccffeba4e14734424482c97cb11c7
-frontend/src/console/react/DashboardPage.tsx	frontend-script	maintained	182	6699	648652560bca7ddea7b5b4ba04c0805479230f751445997f6719034aea591ea5
+frontend/src/console/react/DashboardPage.test.ts	frontend-script	maintained	107	3561	48424d9177be0b997ff85245b161678acb72becbf246736db01193d1b04cb4b6
+frontend/src/console/react/DashboardPage.tsx	frontend-script	maintained	182	6675	1175c99a7d0237a8f358eeaa922027a77ce4fd2380ebd569002215c60df0c7c6
 frontend/src/console/react/DashboardStats.ts	frontend-script	maintained	59	2289	a1f4475f02bd98443f503401d5f03747a1befadeedddf3aadf4cf54ea074658c
 frontend/src/console/react/DistributionPage.ts	frontend-script	maintained	621	27386	8aa71945766d752db2e3fa3b4bbe9ff565d209eb2e01e22fd821b16823c62e07
 frontend/src/console/react/FeatureRegistryPage.ts	frontend-script	maintained	208	11165	26ec8c48062641306a3b65d181309837c6680f44d558c666ba69998902d9170b
 frontend/src/console/react/FeedbackPage.test.ts	frontend-script	maintained	53	1903	41aac4518ea7af992532c60f5f44ec2f6211c339aa553d3d6971dc143b3b9331
 frontend/src/console/react/FeedbackPage.ts	frontend-script	maintained	106	4341	58603be155969b7255f6115d5b95b817d13bace5b3c37e76df3a0d6e8da39a20
 frontend/src/console/react/ModelCatalogPage.ts	frontend-script	maintained	242	15839	bbac3cb62dfec0208bb78cc5278c0c2339b04d2e2dd99ab9d335a584f6245a27
-frontend/src/console/react/ModelDistribution.ts	frontend-script	maintained	350	16533	b02922d24a32b335ed53c6a0f94e6258573a162711b370e8dc253141a70b84ce
+frontend/src/console/react/ModelDistribution.ts	frontend-script	maintained	350	16517	5f5456fd7fb38de8c73022933edab5c1697efd2ecac9d6eb6134bbdcde2b01aa
 frontend/src/console/react/PaymentDashboardPage.ts	frontend-script	maintained	183	10550	2393aaf69442ff7b070d19b9c8a43ee0bd793acaae6ea5fad0ea824f413592ad
 frontend/src/console/react/PaymentOrdersPage.ts	frontend-script	maintained	322	22908	d0690fd76a57aba3dd80da4f2922783eb9000a06908fbfd01edddf43d038cb65
 frontend/src/console/react/PaymentPlansPage.ts	frontend-script	maintained	140	14949	b683e06f5c14e590b9adc9f39b59529a4abb4fdb902af8e5330de0c2f4cff329
-frontend/src/console/react/TokenUsageTrend.tsx	frontend-script	maintained	111	4407	d199be878ebe154288c5eaf735b82b5129fe8965145bd4389e1e58ba062cdcb7
+frontend/src/console/react/TokenUsageTrend.tsx	frontend-script	maintained	112	4436	db5686687ccf783fa46e3e2a2964e6cc1c0d7151b949fd0f562de8767474146e
 frontend/src/console/react/UserDashboardPage.ts	frontend-script	maintained	183	18572	d642c735684744689bb98a5046c827ddae67ecfb76ddd001e3f629a44c6c96e7
 frontend/src/console/react/UserOrdersPage.ts	frontend-script	maintained	121	9568	0379ea41ce195b20b961a924b0372920a90120e4d630458b6bf82b7b8b07b786
 frontend/src/console/react/hooks/use-mobile.tsx	frontend-script	maintained	19	565	ad0936f84f1df79d3697bfbff9c18f8ad58431c1cbaf2359c6a853b0fcc9f28b
@@ -2640,7 +2642,7 @@ frontend/src/console/react/ui/avatar.tsx	frontend-script	maintained	48	1419	4b77
 frontend/src/console/react/ui/badge.tsx	frontend-script	maintained	24	1085	6dcdb8d9c68192fe3411d119923afe4e34ae57e50332bd6a1f4281ba845c9b46
 frontend/src/console/react/ui/breadcrumb.tsx	frontend-script	maintained	122	2603	880ed3253793f0a7779c6b03fd346dc9f9d7ccfe10bb45c509d4103584356cde
 frontend/src/console/react/ui/button.tsx	frontend-script	maintained	58	2711	80c001d59afc7ecc0dff1896299b05d766d05c5dab1dc68b6685a2e6ce9a6771
-frontend/src/console/react/ui/card.tsx	frontend-script	maintained	86	1969	07e46267185647a0344deb18872bae90fea10283edf2d1ab8b9be532dc75b949
+frontend/src/console/react/ui/card.tsx	frontend-script	maintained	86	2044	dd91a29b76c677aeacec132c9740f6481632666d3990f248357e6e9af75a7b82
 frontend/src/console/react/ui/chart.tsx	frontend-script	maintained	236	8883	c633e5fb80d34e7a034fc5ac1e49fa96890607eb8595b03643a745bc84e8c732
 frontend/src/console/react/ui/collapsible.tsx	frontend-script	maintained	9	315	6f5be8ba164c177759bf63cc25ad4d49391f162f6784ba624d72e5d5c0c0dde2
 frontend/src/console/react/ui/createElement.ts	frontend-script	maintained	39	1497	974b6867e3e7993d5740f9f15ccf582acc0da0973584e37a87c95b64f207c111
@@ -2652,8 +2654,8 @@ frontend/src/console/react/ui/label.tsx	frontend-script	maintained	12	447	ee3029
 frontend/src/console/react/ui/select.tsx	frontend-script	maintained	18	808	2d372502cf382e258a66a12b866fec44dc7605c0524b1cc9987b3849ab40dd17
 frontend/src/console/react/ui/separator.tsx	frontend-script	maintained	29	770	0616aa46245c089effe1e6773c6c67fa389f1efb3d102e8e71ff442ad249c3b2
 frontend/src/console/react/ui/sheet.tsx	frontend-script	maintained	140	4295	82240cc43a90ed4f446e8897d37ac319f8f13971e8e3424214f6a706240746e6
-frontend/src/console/react/ui/sidebar.tsx	frontend-script	maintained	772	23749	6d046cea2854ab18050a3a36693f4af718acef69751873209097fd7da929723b
-frontend/src/console/react/ui/skeleton.tsx	frontend-script	maintained	15	275	3b3106940c380677c0173dc213e13b1496361b6d08ed05fee40420c7f013173c
+frontend/src/console/react/ui/sidebar.tsx	frontend-script	maintained	772	23775	7961498b86bf87561b5fc84bc849ccb7e8a0799dd513586e725bc384653dd247
+frontend/src/console/react/ui/skeleton.tsx	frontend-script	maintained	15	289	8715bf0b00fe24fb3401a848a95ab5cebcff5809f914f1a275c222447ff26d39
 frontend/src/console/react/ui/switch.tsx	frontend-script	maintained	32	1269	fe63f12ad1ae351aba0d958234ff8502f69b4b943f18ffe172e1170a8d518a99
 frontend/src/console/react/ui/table.tsx	frontend-script	maintained	19	2190	9eb94a670377eef5d1a4c24132e8b45846df7d69b9daef3f4ef1a15805a2f215
 frontend/src/console/react/ui/textarea.tsx	frontend-script	maintained	18	864	64d675c9cd12cb86e7bd0357b78b3b55b099e65030f636e2ae91002de25a77e6
@@ -2691,7 +2693,8 @@ frontend/src/docs/content/release-0.3.0-preview.md	documentation	maintained	101
 frontend/src/docs/content/release-0.3.4.md	documentation	maintained	42	2463	df60266a985a76ec43d2313713df7c6144d4dc9069208cf03fde18cebd4fe5dd
 frontend/src/docs/content/release-0.3.64.md	documentation	maintained	18	650	a5b296f80cc4752651c6770566eab47a3086d53a1d40b653c9b578ed0d7a2dbd
 frontend/src/docs/content/release-0.3.7.md	documentation	maintained	24	1004	75acda42f7fed2e93430d7d232ec453998353ead8fb4d493babcd70a2264bd9c
-frontend/src/docs/index.ts	frontend-script	maintained	207	7236	c0c4307b7adff00f329f8f41c624e46c6af041c566ee060bb8666be127eeb4fe
+frontend/src/docs/content/release-0.3.8.md	documentation	maintained	11	545	edec885909dd4b8071b0c2cd52cc2730ebe11e546dcebb31fe80574c18b4c310
+frontend/src/docs/index.ts	frontend-script	maintained	215	7483	14c471318de02dc8166ad08800a178b21258dc94f2515a1f230e5402d727b2ea
 frontend/src/i18n/__tests__/riskControlLocales.spec.ts	frontend-script	maintained	24	1276	c5b9ea52f89a2c896982b4d3a414a9d51475b38209ffa842a29dc74804953e57
 frontend/src/i18n/__tests__/usageServiceTierLocales.spec.ts	frontend-script	maintained	20	727	009c53d195a044f6bf7371998265a0152e4668b625d7dc7348471893259c5afb
 frontend/src/i18n/index.ts	frontend-script	maintained	91	2598	5173621347ec40b634a43dd9582e9f11061f2756ed83838265ecfc102dc785b3
@@ -2856,10 +2859,10 @@ frontend/src/stores/subscriptions.ts	frontend-script	maintained	141	3405	efe86cc
 frontend/src/stores/timeRange.ts	frontend-script	maintained	108	2667	ec5719c8a3f89b35aaff6eb8a1c39c8c20e2e5bd118b48ebfdfcd5fea4ec16ec
 frontend/src/style.css	other-text	maintained	1653	43815	5baf2db0834c2b06a95ca671f9a77ed9785e570ff8d09befb815f25038ce3a41
 frontend/src/styles/onboarding.css	other-text	maintained	228	7696	ef82788329aa6647f16140f6246bca817c3964d8ff3fcb83537fce4dfe063e8e
-frontend/src/styles/ui-layout.css	other-text	maintained	36	869	fa54eeaccffc1afe144948dbeeea680d1cff869182d28643369f3831cd598c22
+frontend/src/styles/ui-layout.css	other-text	maintained	50	1232	f4d1f4509763257971fb44bd8004c1b8029eddc28e14d09940349a6767420a34
 frontend/src/styles/ui-modern-compat-parts/part-01.css	other-text	maintained	99	3356	a95d4d05a19dd2618f85238065bf74061c97c19b57b3c3390cc4dd15944b2b71
 frontend/src/styles/ui-modern-compat-parts/part-02.css	other-text	maintained	85	3245	39a490baf156c8b461324cd03854a8204d1e74831a460307ca5e255d6215786a
-frontend/src/styles/ui-modern-compat-parts/part-03.css	other-text	maintained	90	4420	022e8486e7d337e60e9f45ac7c933ad20ea10000406866ae2933ff3431ea8948
+frontend/src/styles/ui-modern-compat-parts/part-03.css	other-text	maintained	102	4834	de1f9f89f53ba5656f16e3d8205c870416f8eda4e1731085a43960d7b520b84d
 frontend/src/styles/ui-modern-compat-parts/part-04.css	other-text	maintained	105	3599	91549805c28ff6867bb03262aefd97c3f783e47c43e2749f8a151ff59a31d952
 frontend/src/styles/ui-modern-compat-parts/part-05.css	other-text	maintained	264	9375	209168c8d465e62c17dab0a41aa9792d729253db3ef5313ae7035b81359e294e
 frontend/src/styles/ui-modern-compat-parts/part-06.css	other-text	maintained	114	4190	13f5128acbbb4b02bbfe8df7badc7b162641a98786e45ec5ec58f8a98f97f6fc
@@ -3102,7 +3105,7 @@ frontend/tailwind.config.js	frontend-script	maintained	181	6206	ae2b3a586dce7517
 frontend/tsconfig.json	configuration	maintained	26	756	f98ff6cf3dda571189c0220ab3a7e52305e393856650785be136edd403217fe6
 frontend/tsconfig.node.json	configuration	maintained	10	213	9e2abb169ea87b7190613a1d4da57ca608463a453bd4231fa3aeee5e308370dd
 frontend/vite.config.ts	frontend-script	maintained	86	2418	7db831b211d28b14142ea3bf0a41c4e93b1b326cefc19ab765a850021af72351
-frontend/vitest.config.ts	frontend-script	maintained	40	938	7fe146c9d88c0b4a24e73f7b583cb1dd3ab94436246337482d18d0c8616db1a2
+frontend/vitest.config.ts	frontend-script	maintained	43	978	26c0856f200174ab4aeb9abef322560aa070a08ed008a302e9b1f9fa9ffde90a
 tools/check_pnpm_audit_exceptions.py	tooling	maintained	247	9027	43878828651706dd6725e5d4717bb0093e83134a8a96c805ff111f9a0282ae83
 tools/ci/check_environment_contract.py	tooling	maintained	165	7221	de6ac4729dfb64d2171357be4605589f20cf520c8d005ab34c782a2b8a119296
 tools/ci/full_stack_smoke.sh	tooling	maintained	202	6947	4e4c7a34cdca4937bc7802e4691eb3cfa359dfb41f47f696f117fa865cee3951
diff --git a/frontend/src/console/ReactPageHost.spec.ts b/frontend/src/console/ReactPageHost.spec.ts
new file mode 100644
index 00000000..56347ecd
--- /dev/null
+++ b/frontend/src/console/ReactPageHost.spec.ts
@@ -0,0 +1,61 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { act, createElement } from 'react'
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import ReactPageHost from './ReactPageHost.vue'
+
+;(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const src = resolve(dirname(fileURLToPath(import.meta.url)))
+const hostSource = readFileSync(resolve(src, 'ReactPageHost.vue'), 'utf8')
+const layoutSource = readFileSync(resolve(src, '../styles/ui-layout.css'), 'utf8')
+const cardSource = readFileSync(resolve(src, 'react/ui/card.tsx'), 'utf8')
+
+function VisibleDashboardStub() {
+  return createElement(
+    'div',
+    { 'data-slot': 'card', className: 'card bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]' },
+    'API Keys',
+  )
+}
+
+describe('React console host visibility', () => {
+  it('mounts React pages in a real layout box instead of display:contents', () => {
+    expect(hostSource).not.toMatch(/class="contents"/)
+    expect(hostSource).toContain('data-console-runtime="react"')
+    expect(hostSource).toContain('console-runtime-host')
+    expect(hostSource).toContain('flex h-full min-h-0 min-w-0 w-full flex-1 flex-col')
+    expect(layoutSource).toContain("[data-console-runtime='react']")
+    expect(layoutSource).toContain('display: flex;')
+    expect(layoutSource).not.toMatch(/\[data-console-runtime='react'\][^{]*contents/)
+    expect(cardSource).toContain('bg-[hsl(var(--card))]')
+    expect(cardSource).toContain('text-[hsl(var(--card-foreground))]')
+  })
+
+  it('renders dashboard metric cards into the host so they stay in the box tree', async () => {
+    const wrapper = mount(ReactPageHost, {
+      props: {
+        load: async () => ({ default: VisibleDashboardStub }),
+        props: {},
+        errorMessage: 'Failed to load console page',
+      },
+      attachTo: document.body,
+    })
+
+    await act(async () => {
+      await flushPromises()
+    })
+
+    const host = wrapper.get('[data-console-runtime="react"]')
+    expect(host.classes()).toContain('console-runtime-host')
+    expect(host.classes()).not.toContain('contents')
+    expect(wrapper.text()).toContain('API Keys')
+    expect(wrapper.find('[data-slot="card"]').exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+})
diff --git a/frontend/src/console/ReactPageHost.vue b/frontend/src/console/ReactPageHost.vue
index 4f60b679..7e5d0645 100644
--- a/frontend/src/console/ReactPageHost.vue
+++ b/frontend/src/console/ReactPageHost.vue
@@ -1,5 +1,9 @@
 <template>
-  <div ref="mountNode" class="contents" data-console-runtime="react"></div>
+  <div
+    ref="mountNode"
+    class="console-runtime-host flex h-full min-h-0 min-w-0 w-full flex-1 flex-col"
+    data-console-runtime="react"
+  ></div>
   <component v-if="error && fallback" :is="fallback" />
   <slot v-else-if="error && $slots.fallback" name="fallback" />
   <div
@@ -14,7 +18,7 @@
 <script setup lang="ts">
 import { createElement, type ComponentType } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue'
 
 type ReactPageProps = object
 type ReactPageModule = { default?: unknown }
@@ -48,7 +52,11 @@ async function loadPage() {
 
   try {
     const module = await props.load()
-    if (!mounted || currentGeneration !== generation || !mountNode.value) return
+    if (!mounted || currentGeneration !== generation) return
+    if (!mountNode.value) {
+      error.value = props.errorMessage
+      return
+    }
 
     if (typeof module.default !== 'function' && typeof module.default !== 'object') {
       throw new Error('React console page export is invalid')
@@ -64,7 +72,11 @@ async function loadPage() {
 
 watch(() => props.props, render, { deep: true })
 
-onMounted(() => { void loadPage() })
+onMounted(() => {
+  void nextTick().then(() => {
+    void loadPage()
+  })
+})
 
 onBeforeUnmount(() => {
   mounted = false
diff --git a/frontend/src/console/react/DashboardPage.test.ts b/frontend/src/console/react/DashboardPage.test.ts
new file mode 100644
index 00000000..5c17ff9a
--- /dev/null
+++ b/frontend/src/console/react/DashboardPage.test.ts
@@ -0,0 +1,107 @@
+import { act, createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import DashboardPage, { type DashboardPageProps } from './DashboardPage'
+
+;(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const props: DashboardPageProps = {
+  loading: false,
+  cards: [
+    { key: 'apiKeys', label: 'API Keys', value: '12', hint: '8 active', order: 0 },
+    { key: 'todayRequests', label: 'Today requests', value: '128', hint: 'Total: 1,024', order: 1 },
+  ],
+  modelDistribution: {
+    modelStats: [{
+      model: 'gpt-4',
+      requests: 10,
+      input_tokens: 800,
+      output_tokens: 200,
+      cache_creation_tokens: 0,
+      cache_read_tokens: 0,
+      total_tokens: 1000,
+      cost: 1.2,
+      actual_cost: 1,
+      account_cost: 1.1,
+    }],
+    rankingItems: [],
+    loading: false,
+    rankingLoading: false,
+    rankingError: false,
+    labels: {
+      modelDistribution: 'Model distribution',
+      spendingRankingTitle: 'Spending',
+      viewModelDistribution: 'Models',
+      viewSpendingRanking: 'Spend',
+      spendingRankingUser: 'User',
+      spendingRankingRequests: 'Requests',
+      spendingRankingTokens: 'Tokens',
+      spendingRankingSpend: 'Spend',
+      spendingRankingOther: 'Other',
+      model: 'Model',
+      requests: 'Requests',
+      tokens: 'Tokens',
+      actual: 'Actual',
+      accountCost: 'Account',
+      standard: 'Standard',
+      noData: 'No data',
+      failedToLoad: 'Failed',
+      userPrefix: (id: number) => `User ${id}`,
+    },
+  },
+  tokenUsageTrend: {
+    trendData: [],
+    loading: false,
+    title: 'Token usage trend',
+    noData: 'No trend data',
+  },
+  userTrend: [{ date: '2026-08-20', user_id: 7, username: 'alice', email: 'alice@example.com', requests: 3, tokens: 300, cost: 0.4, actual_cost: 0.3 }],
+  userTrendLoading: false,
+  labels: {
+    recentUsage: 'Recent usage',
+    userUsageTrend: 'User usage trend',
+    requests: 'Requests',
+    tokens: 'Tokens',
+    noData: 'No usage data',
+    userPrefix: (id: number) => `User ${id}`,
+  },
+}
+
+const roots: Array<{ container: HTMLDivElement; unmount: () => Promise<void> }> = []
+
+afterEach(async () => {
+  await act(async () => {
+    await Promise.all(roots.splice(0).map(async ({ container, unmount }) => {
+      await unmount()
+      container.remove()
+    }))
+  })
+})
+
+describe('admin DashboardPage', () => {
+  it('keeps metric, chart and ranking cards visible with concrete labels', async () => {
+    const container = document.createElement('div')
+    container.setAttribute('data-console-runtime', 'react')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    roots.push({ container, unmount: async () => { root.unmount() } })
+
+    await act(async () => {
+      root.render(createElement(DashboardPage, props))
+    })
+
+    expect(container.textContent).toContain('API Keys')
+    expect(container.textContent).toContain('Today requests')
+    expect(container.textContent).toContain('Token usage trend')
+    expect(container.textContent).toContain('Model distribution')
+    expect(container.textContent).toContain('User usage trend')
+    expect(container.textContent).toContain('alice')
+    const cards = container.querySelectorAll('[data-slot="card"]')
+    expect(cards.length).toBeGreaterThanOrEqual(4)
+    for (const card of cards) {
+      expect(card.className.split(/\s+/)).toContain('card')
+      expect(card.className).toContain('text-[hsl(var(--card-foreground))]')
+    }
+  })
+})
diff --git a/frontend/src/console/react/DashboardPage.tsx b/frontend/src/console/react/DashboardPage.tsx
index d1248c1f..843164ea 100644
--- a/frontend/src/console/react/DashboardPage.tsx
+++ b/frontend/src/console/react/DashboardPage.tsx
@@ -53,11 +53,11 @@ function SectionCards({ cards, loading }: Pick<DashboardPageProps, 'cards' | 'lo
   const visibleCards = loading && cards.length === 0 ? Array.from({ length: 8 }, (_, index) => ({ key: `loading-${index}` })) : cards
 
   return (
-    <div className="*:data-[slot=card]:shadow-xs grid grid-cols-1 gap-3 px-3 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card sm:grid-cols-2 dark:*:data-[slot=card]:bg-card lg:grid-cols-4">
+    <div className="grid grid-cols-1 gap-3 px-3 sm:grid-cols-2 lg:grid-cols-4">
       {visibleCards.map((card) => {
         if (!('label' in card)) {
           return (
-            <Card key={card.key} className="@container/card gap-4 py-4">
+            <Card key={card.key} className="gap-4 py-4">
               <CardHeader className="gap-3 px-4">
                 <Skeleton className="h-4 w-24" />
                 <Skeleton className="h-8 w-32" />
@@ -72,25 +72,25 @@ function SectionCards({ cards, loading }: Pick<DashboardPageProps, 'cards' | 'lo
 
         const MetricIcon = metricIcons[card.key] || Activity
         return (
-          <Card key={card.key} className="@container/card gap-4 py-4">
+          <Card key={card.key} className="gap-4 py-4">
             <CardHeader className="relative px-4">
-              <CardDescription className="text-base font-medium">{card.label}</CardDescription>
-              <CardTitle className="text-3xl font-semibold tabular-nums">
+              <CardDescription className="text-base font-medium text-[hsl(var(--foreground))]">{card.label}</CardDescription>
+              <CardTitle className="text-3xl font-semibold tabular-nums text-[hsl(var(--foreground))]">
                 {card.value}
               </CardTitle>
               <div className="absolute right-4 top-4">
-                <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+                <Badge variant="outline" className="flex gap-1 rounded-lg text-xs text-[hsl(var(--foreground))]">
                   <MetricIcon className="size-3" aria-hidden="true" />
                   <span className="sr-only">{card.label}</span>
                 </Badge>
               </div>
             </CardHeader>
             <CardFooter className="flex-col items-start gap-1 px-4 text-sm">
-              <div className="line-clamp-1 flex gap-2 font-medium">
+              <div className="line-clamp-1 flex gap-2 font-medium text-[hsl(var(--foreground))]">
                 {card.hint || card.meta?.text || '\u00a0'}
                 <Activity className="size-4" aria-hidden="true" />
               </div>
-              <div className="text-muted-foreground">{card.meta?.alert || '\u00a0'}</div>
+              <div className="text-[hsl(var(--muted-foreground))]">{card.meta?.alert || '\u00a0'}</div>
             </CardFooter>
           </Card>
         )
@@ -119,9 +119,9 @@ function UserTrendCard({
   const rows = [...totals.entries()].sort(([, a], [, b]) => b.tokens - a.tokens).slice(0, 12)
 
   return (
-    <Card className="@container/card min-w-0">
+    <Card className="min-w-0">
       <CardHeader>
-        <CardTitle>{labels.userUsageTrend}</CardTitle>
+        <CardTitle className="text-[hsl(var(--foreground))]">{labels.userUsageTrend}</CardTitle>
         <CardDescription>{labels.recentUsage}</CardDescription>
       </CardHeader>
       <CardContent className="min-h-56">
@@ -130,7 +130,7 @@ function UserTrendCard({
             {Array.from({ length: 5 }, (_, index) => <Skeleton key={index} className="h-8 w-full" />)}
           </div>
         ) : rows.length === 0 ? (
-          <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">{labels.noData}</div>
+          <div className="flex h-48 items-center justify-center text-sm text-[hsl(var(--muted-foreground))]">{labels.noData}</div>
         ) : (
           <Table>
             <TableHeader>
@@ -166,7 +166,7 @@ export default function DashboardPage({
   labels,
 }: DashboardPageProps) {
   return (
-    <div className="@container/main flex flex-1 flex-col gap-2">
+    <div className="flex min-w-0 flex-1 flex-col gap-2">
       <div className="flex flex-col gap-4 py-3 md:gap-4">
         <SectionCards cards={cards} loading={loading} />
         <div className="px-3">
diff --git a/frontend/src/console/react/ModelDistribution.ts b/frontend/src/console/react/ModelDistribution.ts
index c03c78f1..dc1d6a76 100644
--- a/frontend/src/console/react/ModelDistribution.ts
+++ b/frontend/src/console/react/ModelDistribution.ts
@@ -321,7 +321,7 @@ export default function ModelDistribution({
     ])
   }
 
-  return h(Card, { className: '@container/card min-w-0 overflow-hidden' }, [
+  return h(Card, { className: 'min-w-0 overflow-hidden' }, [
     h(CardHeader, { key: 'header', className: 'flex-row items-center justify-between gap-3 space-y-0 pb-4' }, [
       h(CardTitle, { key: 'title', className: 'text-base' }, title),
       h('div', { key: 'switches', className: 'inline-flex rounded-lg bg-[hsl(var(--muted))] p-1' }, [
diff --git a/frontend/src/console/react/TokenUsageTrend.tsx b/frontend/src/console/react/TokenUsageTrend.tsx
index 2cf25b1f..1f81cc99 100644
--- a/frontend/src/console/react/TokenUsageTrend.tsx
+++ b/frontend/src/console/react/TokenUsageTrend.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type { TrendDataPoint } from '@/types'
 import { readUsageNumber } from '@/utils/usageDisplay'
 import {
@@ -91,7 +92,7 @@ export default function TokenUsageTrend({ trendData, loading = false, title, noD
   const points = normalizeTrend(trendData)
 
   return (
-    <Card className="@container/card min-w-0 overflow-hidden">
+    <Card className="min-w-0 overflow-hidden">
       <CardHeader className="pb-4">
         <CardTitle className="text-base">{title}</CardTitle>
       </CardHeader>
@@ -103,7 +104,7 @@ export default function TokenUsageTrend({ trendData, loading = false, title, noD
         ) : points.length > 0 ? (
           <TrendChart points={points} />
         ) : (
-          <div className="flex h-64 items-center justify-center text-sm text-muted-foreground">{noData}</div>
+          <div className="flex h-64 items-center justify-center text-sm text-[hsl(var(--muted-foreground))]">{noData}</div>
         )}
       </CardContent>
     </Card>
diff --git a/frontend/src/console/react/ui/card.tsx b/frontend/src/console/react/ui/card.tsx
index 7e959318..3fc95c21 100644
--- a/frontend/src/console/react/ui/card.tsx
+++ b/frontend/src/console/react/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        "card flex flex-col gap-6 rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] py-6 text-[hsl(var(--card-foreground))] shadow-sm",
         className
       )}
       {...props}
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-sm text-[hsl(var(--muted-foreground))]", className)}
       {...props}
     />
   )
diff --git a/frontend/src/console/react/ui/sidebar.tsx b/frontend/src/console/react/ui/sidebar.tsx
index da80deb6..d992a115 100644
--- a/frontend/src/console/react/ui/sidebar.tsx
+++ b/frontend/src/console/react/ui/sidebar.tsx
@@ -184,7 +184,7 @@ const Sidebar = React.forwardRef<
     if (collapsible === "none") {
       return (
         <div
-          className={cn("group flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)}
+          className={cn("group flex h-full w-full flex-col bg-[hsl(var(--sidebar-background))] text-[hsl(var(--sidebar-foreground))]", className)}
           data-state={state}
           data-collapsible={state === "collapsed" ? "icon" : undefined}
           data-variant={variant}
diff --git a/frontend/src/console/react/ui/skeleton.tsx b/frontend/src/console/react/ui/skeleton.tsx
index e3e844a1..04593697 100644
--- a/frontend/src/console/react/ui/skeleton.tsx
+++ b/frontend/src/console/react/ui/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-md bg-[hsl(var(--muted))]", className)}
       {...props}
     />
   )
diff --git a/frontend/src/docs/content/release-0.3.8.md b/frontend/src/docs/content/release-0.3.8.md
new file mode 100644
index 00000000..aba2a994
--- /dev/null
+++ b/frontend/src/docs/content/release-0.3.8.md
@@ -0,0 +1,11 @@
+# 0.3.8 版本更新
+
+## 修复
+1. 控制仪表台组件不可见
+    - React 控制台页面不再挂在 `display: contents` 根节点上，避免 WebKit 把侧栏、顶栏和仪表盘卡片从盒模型中丢掉。
+    - 仪表盘卡片改用明确的 HSL 语义色，并在现代主题层强制卡片底色与文字色，防止组件与页面背景融为一体。
+
+## 升级说明
+1. 本版本无需数据库或配置迁移
+    - 升级二进制或容器并重启服务即可生效。
+    - 前端为界面修复，请同时升级前后端。
diff --git a/frontend/src/docs/index.ts b/frontend/src/docs/index.ts
index d50aa2eb..d6ae7024 100644
--- a/frontend/src/docs/index.ts
+++ b/frontend/src/docs/index.ts
@@ -11,6 +11,7 @@ import release030Preview from './content/release-0.3.0-preview.md?raw'
 import release034 from './content/release-0.3.4.md?raw'
 import release0364 from './content/release-0.3.64.md?raw'
 import release037 from './content/release-0.3.7.md?raw'
+import release038 from './content/release-0.3.8.md?raw'
 import opsPublicPages from './content/ops-public-pages.md?raw'
 import opsUserCenter from './content/ops-user-center.md?raw'
 import opsUserPayment from './content/ops-user-payment.md?raw'
@@ -123,6 +124,13 @@ export const lightBridgeDocs: LightBridgeDoc[] = [
     description: '订阅管理、公告管理、兑换码管理、优惠码管理、风控管理功能说明',
     content: opsAdminDistribution,
   },
+  {
+    id: 'release-0.3.8',
+    title: '0.3.8 版本更新',
+    group: '版本更新',
+    description: '修复控制仪表台所有组件不可见的问题',
+    content: release038,
+  },
   {
     id: 'release-0.3.7',
     title: '0.3.7 版本更新',
diff --git a/frontend/src/styles/ui-layout.css b/frontend/src/styles/ui-layout.css
index 6277383e..5afaf4c0 100644
--- a/frontend/src/styles/ui-layout.css
+++ b/frontend/src/styles/ui-layout.css
@@ -34,3 +34,17 @@ html[data-ui-mode='package'] .sidebar.w-64 {
     padding: 1rem;
   }
 }
+
+/* React createRoot cannot paint reliably on display:contents (especially WebKit). */
+[data-console-runtime='react'] {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+}
+
+[data-console-runtime='react'] [data-slot='card'] {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border-color: hsl(var(--border));
+}
diff --git a/frontend/src/styles/ui-modern-compat-parts/part-03.css b/frontend/src/styles/ui-modern-compat-parts/part-03.css
index 4291e3cc..80da1d81 100644
--- a/frontend/src/styles/ui-modern-compat-parts/part-03.css
+++ b/frontend/src/styles/ui-modern-compat-parts/part-03.css
@@ -81,6 +81,18 @@
   backdrop-filter: none !important;
 }
 
+:where(html[data-ui-mode='modern'], html[data-ui-mode='package']) [data-console-runtime='react'] {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+}
+
+:where(html[data-ui-mode='modern'], html[data-ui-mode='package']) [data-console-runtime='react'] [data-slot='card'] {
+  border: 1px solid hsl(var(--border)) !important;
+  background: hsl(var(--card)) !important;
+  color: hsl(var(--card-foreground)) !important;
+}
+
 :where(html[data-ui-mode='modern'], html[data-ui-mode='package']) .card-hover:hover {
   border-color: hsl(var(--ring) / 0.35) !important;
   box-shadow:
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 8c45a9ff..b1cfd760 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -10,6 +10,9 @@ export default defineConfig({
       'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
     }
   },
+  esbuild: {
+    jsx: 'automatic',
+  },
   test: {
     globals: true,
     environment: 'jsdom',