From 12ef6b05f4559f649b045ef9647c8f31b97275ed Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 20 Aug 2026 09:27:44 +0000
Subject: [PATCH 1/3] fix: restore console dashboard visibility on React hosts

Mount React console pages in a real flex box instead of display:contents, which WebKit can omit from the box tree and hide every dashboard card. Keep card surfaces on explicit HSL tokens and add regression coverage for the host and admin dashboard.

Co-authored-by: GeekMr <WilliamWang1721@users.noreply.github.com>
---
 Makefile                                      |   2 +
 frontend/src/console/ReactPageHost.spec.ts    |  61 ++++++++++
 frontend/src/console/ReactPageHost.vue        |  20 +++-
 .../src/console/react/DashboardPage.test.ts   | 107 ++++++++++++++++++
 frontend/src/console/react/DashboardPage.tsx  |  24 ++--
 .../src/console/react/ModelDistribution.ts    |   2 +-
 .../src/console/react/TokenUsageTrend.tsx     |   5 +-
 frontend/src/console/react/ui/card.tsx        |   4 +-
 frontend/src/console/react/ui/sidebar.tsx     |   2 +-
 frontend/src/console/react/ui/skeleton.tsx    |   2 +-
 frontend/src/styles/ui-layout.css             |  14 +++
 .../styles/ui-modern-compat-parts/part-03.css |  12 ++
 frontend/vitest.config.ts                     |   3 +
 13 files changed, 235 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/console/ReactPageHost.spec.ts
 create mode 100644 frontend/src/console/react/DashboardPage.test.ts

diff --git a/Makefile b/Makefile
index e0900efba..8ddf51fa2 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/frontend/src/console/ReactPageHost.spec.ts b/frontend/src/console/ReactPageHost.spec.ts
new file mode 100644
index 000000000..56347ecd7
--- /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 4f60b6797..7e5d06458 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 000000000..5c17ff9af
--- /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 d1248c1fb..843164ea3 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 c03c78f18..dc1d6a760 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 2cf25b1f4..1f81cc99a 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 7e9593183..3fc95c216 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 da80deb69..d992a1150 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 e3e844a1d..045936971 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/styles/ui-layout.css b/frontend/src/styles/ui-layout.css
index 6277383e3..5afaf4c02 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 4291e3cc7..80da1d81e 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 8c45a9ff3..b1cfd7601 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',

From 762180a7caa9698aa3e3b89e9b10f2f05a0629a8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 20 Aug 2026 09:43:49 +0000
Subject: [PATCH 2/3] docs: add v0.3.8 notes and refresh inventory

Record the console dashboard visibility fix for the next release and keep the release inventory gate current.

Co-authored-by: GeekMr <WilliamWang1721@users.noreply.github.com>
---
 docs/architecture/CODEBASE_INVENTORY.tsv   | 28 ++++++++++++----------
 frontend/src/docs/content/release-0.3.8.md | 11 +++++++++
 frontend/src/docs/index.ts                 |  8 +++++++
 3 files changed, 34 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/docs/content/release-0.3.8.md

diff --git a/docs/architecture/CODEBASE_INVENTORY.tsv b/docs/architecture/CODEBASE_INVENTORY.tsv
index 2e5126357..995cafcc0 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,7 @@ 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/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 +2858,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 +3104,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/docs/content/release-0.3.8.md b/frontend/src/docs/content/release-0.3.8.md
new file mode 100644
index 000000000..aba2a994d
--- /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 d50aa2eba..d6ae7024b 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 版本更新',

From dfa9609bd0c5219d6e482912f189034d27af41c5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 20 Aug 2026 09:44:35 +0000
Subject: [PATCH 3/3] chore: refresh codebase inventory [skip ci]

Co-authored-by: GeekMr <WilliamWang1721@users.noreply.github.com>
---
 docs/architecture/CODEBASE_INVENTORY.tsv | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/architecture/CODEBASE_INVENTORY.tsv b/docs/architecture/CODEBASE_INVENTORY.tsv
index 995cafcc0..ae05b7a12 100644
--- a/docs/architecture/CODEBASE_INVENTORY.tsv
+++ b/docs/architecture/CODEBASE_INVENTORY.tsv
@@ -2693,6 +2693,7 @@ 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/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