feat(layout): move navigation menu from sidebar to top header

Switch ProLayout to top layout with a custom horizontal HeaderMenu
(dropdowns for grouped items) and relocate the user/help/version actions
into the header right area.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

.claude/skills/create-crud-page/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: create-crud-page
+description: Scaffold a CRUD list/table page module in the gpustack-ui monorepo. Use when creating a new page module, building a list/table page, adding a create/edit drawer, or setting up the components/config/forms/hooks/services structure for a feature.
+---
+
+# Create a CRUD Table Page
+
+## Inputs (do this first)
+
+- The argument passed to this skill is the **module name** (e.g. `/create-crud-page api-keys` → module `api-keys`). If no name was given, ask for it.
+- **Always ask the user for the API documentation before generating any code**, even if a module name was provided:
+
+  > Where is the API documentation for this module? (OpenAPI/Swagger URL, schema file path, or an interface description)
+
+- Wait for the answer, then read/fetch it. Derive `config/types.ts` (`FormData`, `ListItem`), the `services` request hooks, and form fields from that schema. Do not guess field names or endpoints — if the doc is missing details, ask.
+
+- **Also ask which form layout to scaffold:**
+
+  > Should the form use tabs? (1) a plain form without tabs, or (2) a tabbed form
+
+  Choose the form structure in section 3 accordingly. Default to **no tabs** unless the user picks tabs or the schema clearly has many grouped sections.
+
+---
+
+Before anything: **reuse common `components`, `hooks`, and `utils` from `@gpustack/core-ui` whenever possible.**
+
+Reference implementation for sections below: `src/pages/model-routes`.
+
+## Module structure
+
+Create the module under `src/pages/{module}`:
+
+```text
+{module}
+├── components
+├── config
+├── forms
+├── hooks
+├── index.tsx
+└── services
+```
+
+## 1. components
+
+Module-specific components.
+
+- The create/edit form component is named `add-xxx-modal.tsx` (repo convention — keep the `-modal` suffix even though it is built with `FormDrawer`).
+- Use `FormDrawer` from `@gpustack/core-ui`.
+- If a table cell's render logic/structure is complex, extract it into `xxx-cell.tsx`.
+
+## 2. config
+
+```text
+config
+├── index.ts   # static configs & constants
+└── types.ts   # TypeScript types
+```
+
+Naming: form types → `FormData`; table list item types → `ListItem`.
+
+## 3. forms
+
+Main form component goes in `forms/index.tsx`.
+
+- **Complex interactions** (Form.Item split across components): create a dedicated Form Context and wrap with `FormContext.Provider`.
+- **Tab-based forms**: use `ScrollSpyTabs` from `@gpustack/core-ui`, wrapping the `Form` or `FormContext.Provider`. Do not use tabs unless necessary.
+- **Required-field validation**: use `getRuleMessage` for standard `input`/`select`.
+- For cascading selectors and async race protection, follow the **form-patterns** skill.
+
+## 4. hooks
+
+- Table columns → `use-xxx-columns.tsx`.
+- Open/close hooks for `add-xxx-modal.tsx` → `use-create-xxx.ts`.
+
+## 5. index.tsx (list page entry)
+
+- **Data fetching**: `useTableFetch` from `@gpustack/core-ui`.
+- **Data display**:
+  - Standard table → Ant Design `Table`. Ref: `src/pages/users/index.tsx`.
+  - Expandable/collapsible rows → `Table` from `@gpustack/core-ui`. Ref: `src/pages/model-routes/index.tsx`.
+  - Card-style lists → use `InfiniteScrollerProvider`. Ref: `src/pages/backends/index.tsx`.
+
+## 6. services
+
+`request` is injected via a provider — do **not** create a centralized `apis` directory like in `gpustack-ui`. Define request hooks directly in `services`.
+
+- Use `useRequest` from `@gpustack/core-ui`, or `useQueryData` (same underlying method).
+- Ref: `src/pages/gpu-service/storage-types/services/use-create-storage-type.ts`.
+
+## 7. Empty data
+
+- Page table lists → `NoResult`.
+- Simple (non-page) tables → `Empty` with `image={Empty.PRESENTED_IMAGE_SIMPLE}`.
+
+## Common UI conventions
+
+- **Drawer/Modal open/close**: use `useBodyScroll` from `@gpustack/core-ui`. Ref: `src/pages/model-routes/hooks/use-create-route.ts`.
+- **Status display** (success/failed/processing/warning): use `StatusTag`, never `Tag` from `antd` directly. See **Status display** below. Ref: `src/pages/llmodels/components/table-list.tsx`.
+- **Permission-gated visibility**: use `Access` / `useAccess`. Ref: `src/pages/access/index.tsx`.
+- **Styles**: avoid `styled-components` for complex/large styling. Prefer `createStyles` for component-scoped dynamic styles, CSS Modules (`xxx.module.less`) for static structured styles.
+
+## Status display
+
+Use `StatusTag` from `@gpustack/core-ui` for status display. Do not use `Tag` from `antd` directly.
+
+1. Define the mapping from business status values to UI status values in the module's `config/index.ts`:
+
+```ts
+import { StatusMaps } from '@/config';
+import { StatusType } from '@/config/types';
+
+export const XxxStatusValueMap = {
+  Running: 'running',
+  Pending: 'pending',
+  Failed: 'failed'
+};
+
+export const XxxStatusLabelMap: Record<string, string> = {
+  [XxxStatusValueMap.Running]: 'Running',
+  [XxxStatusValueMap.Pending]: 'Pending',
+  [XxxStatusValueMap.Failed]: 'Failed'
+};
+
+export const status: Record<string, StatusType> = {
+  [XxxStatusValueMap.Running]: StatusMaps.success,
+  [XxxStatusValueMap.Pending]: StatusMaps.transitioning,
+  [XxxStatusValueMap.Failed]: StatusMaps.error
+};
+```
+
+2. In table columns, pass only the UI status value and display text required by `StatusTag`:
+
+```tsx
+<StatusTag
+  statusValue={{
+    status: status[value],
+    text: XxxStatusLabelMap[value] || value,
+    message: record.state_message
+  }}
+/>
+```
+
+`statusValue.status` must be a value mapped from `StatusMaps` (`success`, `transitioning`, `warning`, `error`, `inactive`). Do not pass business status values such as `running` or `pending` directly.

.claude/skills/form-patterns/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: form-patterns
+description: Patterns for forms with cascading/dependent selections in the gpustack-ui monorepo. Use when building a form where picking one field derives another (pick A → auto-pick B → write form), handling async option loading on modal open, or protecting against stale async results.
+---
+
+# Form Patterns
+
+Theme: keep cascading selections (pick A → derive B → write form) on a single, predictable path.
+
+## Accessing the form: `form` vs `form.current`
+
+This is **not** absolute — it depends on the call site:
+
+- **Inside the form component** (`forms/index.tsx`), or anywhere holding a `Form.useForm()` instance → call it directly: `form.setFieldsValue(...)`.
+- **In the outer Drawer/Modal wrapper** that opens the form and holds it via `ref={form}` (`const form = useRef(null)`), driven by an `open` prop → go through the ref: `form.current?.setFieldsValue(...)`.
+
+The reference template below is written for the **Drawer-wrapper scenario** (it reacts to `open` and owns the shared `selection` state), so it uses `form.current?` throughout. If you lift this logic into the form body with a `useForm()` instance, drop the `.current`.
+
+## 1. No fallback for derived selection
+
+When "pick A then auto-pick B", match by rule and return `undefined` if no match — let the form field stay empty. Do **not** silently fall back to `list[0]`; a fallback hides data issues and fakes a valid selection.
+
+```ts
+const findB = (key, list) =>
+  key ? list.find((x) => x.key === key) : undefined;
+```
+
+For form fields, clear with `undefined`, not `''`. In Ant Design `undefined` restores the placeholder; `''` is treated as a real value.
+
+## 2. Async race protection
+
+For fetches triggered by a lifecycle entry (e.g. modal open), tag each invocation with a session ref. Discard stale results if the session rotated (modal closed and re-opened) before the response arrives.
+
+```ts
+const sessionRef = useRef(0);
+
+useEffect(() => {
+  if (!open) {
+    sessionRef.current += 1;
+    return;
+  }
+  const session = ++sessionRef.current;
+  Promise.all([fetchA(), fetchB()]).then(([as, bs]) => {
+    if (sessionRef.current !== session) return;
+    applySelection(as.items[0], findB(as.items[0].key, bs.items));
+  });
+}, [open]);
+```
+
+## 3. Reference template
+
+Two cascading selectors backed by a single shared state, with a single atomic write (state + form together):
+
+```ts
+type Selection = { a?: string; b?: number };
+
+const [selection, setSelection] = useState<Selection>({});
+const sessionRef = useRef(0);
+const form = useRef<any>(null); // wrapper holds the form via <Form ref={form} /> — see "Accessing the form" above
+
+const findB = (key, list) =>
+  key ? list.find((x) => x.key === key) : undefined;
+
+// Single atomic write: state + form together.
+const applySelection = (a, b) => {
+  setSelection({ a: a.name, b: b?.id });
+  form.current?.setFieldsValue({
+    field: b?.field,
+    spec: { ...currentSpec, ...b?.spec }
+  });
+};
+
+// Trigger 1: modal opened
+useEffect(() => {
+  if (!open) {
+    sessionRef.current++;
+    setSelection({});
+    return;
+  }
+  const session = ++sessionRef.current;
+  Promise.all([fetchA(), fetchB()]).then(([as, bs]) => {
+    if (sessionRef.current !== session) return;
+    const first = as.items[0];
+    applySelection(first, findB(first.key, bs.items));
+  });
+}, [open]);
+
+// Trigger 2: user picks A
+const handleAChange = (a) => {
+  applySelection(a, findB(a.key, listB));
+};
+
+// Trigger 3: user picks B
+const handleBChange = (b) => {
+  setSelection((prev) => ({ ...prev, b: b.id }));
+  form.current?.setFieldsValue({ ...b.fields });
+};
+```
+
+## Related
+
+- Module/file structure for forms lives in the **create-crud-page** skill (section 3).
+- Required-field validation: use `getRuleMessage`.

.github/workflows/ci.yml

@@ -1,6 +1,7 @@
 name: CI
 
 on:
+  workflow_dispatch: {}
   push:
     branches:
       - 'main'
@@ -117,3 +118,20 @@ jobs:
           remote_path: releases/${{ steps.version.outputs.version }}.tar.gz
           accelerate: true
           clean: false
+
+  trigger-backend:
+    needs: build-publish
+    if: (github.event_name == 'push' && !startsWith(github.ref, 'refs/tags/')) || github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Dispatch backend build
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.DISPATCH_PAT }}
+          repository: gpustack/gpustack
+          event-type: ui-built
+          client-payload: |
+            {
+              "ref": "${{ github.ref }}",
+              "sha": "${{ github.sha }}"
+            }

.gitignore

@@ -13,6 +13,6 @@
 .swc
 .DS_Store
 .idea
-.claude
+.claude/settings.local.json
 /dist.zip
 .cache

AGENT.md

@@ -1,265 +0,0 @@
-# React State and Request Patterns
-
-These guidelines define preferred patterns for request handling, state updates, and side-effect management in React applications.
-
-The primary goal is to keep data flow explicit, predictable, maintainable, and performant while avoiding unnecessary rerenders and effect-driven logic.
-
----
-
-## 1. Avoid Effect-Driven Requests
-
-Do not use request functions themselves as dependencies in `useEffect`.
-
-Avoid patterns like:
-
-```ts
-useEffect(() => {
-  fetchData();
-}, [fetchData]);
-```
-
-Requests should be triggered explicitly by user actions or lifecycle entry points.
-
----
-
-## 2. Form Requests Should Be Action-Driven
-
-For form-related requests (such as loading `Select` options):
-
-- Fetch data when the form is opened for the first time.
-- If later requests depend on user interactions, trigger them directly inside the interaction handler.
-- Do not rely on `useEffect` dependency changes to trigger requests.
-
-Recommended:
-
-```ts
-const handleOnChange = (value) => {
-  fetchData(value);
-};
-```
-
-Avoid:
-
-```ts
-useEffect(() => {
-  fetchData(value);
-}, [value]);
-```
-
-The action itself should control the request.
-
----
-
-## 3. Update Related States Together
-
-If a single action updates multiple related states:
-
-- Do not synchronize them through `useEffect`
-- Do not derive them indirectly through `useMemo`
-
-Instead, update all related states directly inside the action handler.
-
-Recommended:
-
-```ts
-const handleOnChange = (value) => {
-  setState1(...);
-  setState2(...);
-  buildState(...);
-};
-```
-
-Avoid implicit state synchronization chains.
-
----
-
-## 4. Group Strongly Related State
-
-If multiple states are always updated together:
-
-- Do not split them into multiple `useState` calls.
-- Prefer a single state object.
-
-Recommended:
-
-```ts
-const [state, setState] = useState({
-  state1: ...,
-  state2: ...,
-  state3: ...,
-});
-```
-
-This reduces unnecessary rerenders and keeps state transitions predictable.
-
----
-
-## 5. Prefer Explicit State Flow
-
-Avoid chaining business logic through multiple `useEffect` hooks.
-
-Keep:
-
-- request execution
-- state updates
-- derived calculations
-
-close to the triggering action whenever possible.
-
-Prefer:
-
-```ts
-const handleAction = () => {
-  fetchData();
-  setTableData(...);
-  setSelectedRow(...);
-};
-```
-
-Over:
-
-```ts
-useEffect(() => {
-  buildTable();
-}, [data]);
-
-useEffect(() => {
-  updateSelection();
-}, [tableData]);
-```
-
----
-
-## 6. Avoid Premature Memoization
-
-Do not use `useMemo` or `useCallback` unless there is a confirmed rendering or computation bottleneck.
-
-Overusing memoization:
-
-- increases complexity
-- makes state flow harder to understand
-- may introduce stale dependency issues
-
-Prefer simple and explicit logic first.
-
-Optimize only when necessary.
-
----
-
-## 7. Keep Request Logic Predictable
-
-A user interaction should clearly show:
-
-- what request is triggered
-- which states are updated
-- how the UI changes
-
-Avoid indirect update chains caused by dependency-driven effects.
-
-The code should make the request and update flow easy to trace.
-
----
-
-## 8. Prefer Action-Driven Architecture
-
-Prefer:
-
-- action-driven updates
-- explicit handlers
-- localized state transitions
-
-Over:
-
-- effect-driven synchronization
-- cross-hook implicit updates
-- reactive chains between states
-
-The triggering action should remain the primary source of truth for UI updates.
-
----
-
-# Form
-
-Form-specific patterns that build on the rules above. The theme: keep cascading selections (pick A → derive B → write form) on a single, predictable path.
-
-## 1. No Fallback for Derived Selection
-
-When "pick A then auto-pick B", match by rule and return `undefined` if no match — let the corresponding form field stay empty.
-
-Do not silently fall back to `list[0]` or another default. A fallback hides data issues and tricks the user into thinking they have a valid selection.
-
-```ts
-const findB = (key, list) =>
-  key ? list.find((x) => x.key === key) : undefined;
-```
-
-For form fields, prefer clearing with `undefined` over `''`. With Ant Design, `undefined` restores the placeholder; `''` is treated as a real value.
-
-## 2. Async Race Protection
-
-For fetches triggered by a lifecycle entry (e.g., modal open), tag each invocation with a session ref. Discard stale results if the session has rotated (the modal was closed and re-opened) by the time the response arrives.
-
-```ts
-const sessionRef = useRef(0);
-
-useEffect(() => {
-  if (!open) {
-    sessionRef.current += 1;
-    return;
-  }
-  const session = ++sessionRef.current;
-  Promise.all([fetchA(), fetchB()]).then(([as, bs]) => {
-    if (sessionRef.current !== session) return;
-    applySelection(as.items[0], findB(as.items[0].key, bs.items));
-  });
-}, [open]);
-```
-
-## 3. Reference Template
-
-A typical form with two cascading selectors backed by a single shared state:
-
-```ts
-type Selection = { a?: string; b?: number };
-
-const [selection, setSelection] = useState<Selection>({});
-const sessionRef = useRef(0);
-
-const findB = (key, list) =>
-  key ? list.find((x) => x.key === key) : undefined;
-
-// Single atomic write: state + form together.
-const applySelection = (a, b) => {
-  setSelection({ a: a.name, b: b?.id });
-  form.current?.setFieldsValue({
-    field: b?.field,
-    spec: { ...currentSpec, ...b?.spec }
-  });
-};
-
-// Trigger 1: modal opened
-useEffect(() => {
-  if (!open) {
-    sessionRef.current++;
-    setSelection({});
-    return;
-  }
-  const session = ++sessionRef.current;
-  Promise.all([fetchA(), fetchB()]).then(([as, bs]) => {
-    if (sessionRef.current !== session) return;
-    const first = as.items[0];
-    applySelection(first, findB(first.key, bs.items));
-  });
-}, [open]);
-
-// Trigger 2: user picks A
-const handleAChange = (a) => {
-  applySelection(a, findB(a.key, listB));
-};
-
-// Trigger 3: user picks B
-const handleBChange = (b) => {
-  setSelection((prev) => ({ ...prev, b: b.id }));
-  form.current?.setFieldsValue({ ...b.fields });
-};
-```

AGENTS.md

@@ -0,0 +1,74 @@
+# Agent Instructions
+
+This project keeps a single source of truth for agent/contributor conventions in [`CLAUDE.md`](./CLAUDE.md). **Read [`CLAUDE.md`](./CLAUDE.md) and follow it.**
+
+@CLAUDE.md
+
+## Downstream fork workflow
+
+This repo is a **downstream fork** that customizes the product appearance on top of
+upstream `gpustack/gpustack-ui`. The mirror chain is:
+
+```
+upstream  https://github.com/gpustack/gpustack-ui.git
+   |  (fetch)
+origin    ssh://git@192.168.0.23:11022/root/gpustack-ui.git   (private registry, also https://git.digiman.live)
+```
+
+### Goal
+
+Track upstream releases. When upstream changes, we pull it in, then apply our own
+appearance/customization changes on a dedicated branch so we keep our look-and-feel
+on top of the latest upstream product.
+
+### Branch naming
+
+Customization work lives on `v<upstream-version>-lofyer` branches (e.g.
+`v2.2.0-lofyer`). Each time upstream ships a new version we want to follow, create a
+new `v<version>-lofyer` branch from the corresponding upstream tag/branch and re-apply
+(or rebase) our customizations onto it.
+
+### Syncing from upstream
+
+`scripts/sync-github` mirrors upstream into the private `origin` (full mirror, force
+push of all branches + tags). It auto-configures the `upstream` remote on first run.
+
+```bash
+# preview only, no push
+DRY_RUN=1 ./scripts/sync-github
+
+# real sync (force-pushes every upstream branch + tag to origin)
+./scripts/sync-github
+
+# also delete origin branches that no longer exist upstream (true mirror, destructive)
+PRUNE_BRANCHES=1 ./scripts/sync-github
+```
+
+Env knobs: `UPSTREAM_URL`, `ORIGIN_REMOTE`, `UPSTREAM_REMOTE`, `PRUNE_BRANCHES`,
+`DRY_RUN`. After syncing, branch a fresh `v<version>-lofyer` off the updated upstream
+ref and apply the appearance changes there.
+
+### Re-applying brand customizations
+
+`scripts/rebrand` swaps the standalone brand word `GPUStack` for our brand
+(`MesaStack`) across user-facing text. It is the first appearance change to re-apply
+on every new `v<version>-lofyer` branch.
+
+```bash
+# preview hits, no writes
+DRY_RUN=1 ./scripts/rebrand
+
+# apply (default GPUStack -> MesaStack)
+./scripts/rebrand
+
+# custom brand words
+FROM=GPUStack TO=AcmeStack ./scripts/rebrand
+```
+
+It deliberately **does not** touch functional references — lowercase `gpustack`
+(npm pkg / URLs / paths / k8s namespace), ALL-CAPS `GPUSTACK_*` constants, JS
+identifiers like `getGPUStackPlugin`, and `X-*` HTTP headers — and carries a
+line-level skip list for backend-contract strings matched at runtime (see
+`SKIP_LINE_PATTERNS` in the script). Always review `git diff` afterwards. Logo
+images under `src/assets/images/` are NOT changed by the script — replace those PNGs
+separately when new brand assets are available.

CLAUDE.md

@@ -0,0 +1,129 @@
+# Repo
+
+This is the **open source UI** (`gpustack-ui`). Common `components`, `hooks`, and `utils` are published as `@gpustack/core-ui` and consumed throughout `src`.
+
+**Always prioritize reusing common `components`, `hooks`, and `utils` from `@gpustack/core-ui`.**
+
+Task-specific conventions live in skills: use **create-crud-page** when building a page module, **form-patterns** when building cascading/dependent forms.
+
+# React State and Request Patterns
+
+Keep data flow explicit, predictable, and performant. The triggering **action** is the source of truth for UI updates — not effect-driven synchronization.
+
+## 1. Avoid effect-driven requests
+
+Do not use request functions as `useEffect` dependencies. Trigger requests explicitly from user actions or lifecycle entry points.
+
+```ts
+// Avoid
+useEffect(() => {
+  fetchData();
+}, [fetchData]);
+```
+
+## 2. Form requests should be action-driven
+
+- Fetch form data (e.g. `Select` options) when the form first opens.
+- If later requests depend on interactions, trigger them inside the interaction handler.
+- Do not rely on `useEffect` dependency changes.
+
+```ts
+// Recommended
+const handleOnChange = (value) => {
+  fetchData(value);
+};
+```
+
+## 3. Update related states together
+
+When one action updates multiple related states, update them all directly in the handler. Do not sync via `useEffect` or derive indirectly via `useMemo`.
+
+```ts
+const handleOnChange = (value) => {
+  setState1(...);
+  setState2(...);
+  buildState(...);
+};
+```
+
+## 4. Group strongly related state
+
+If multiple states always update together, use a single state object instead of multiple `useState` calls — fewer rerenders, more predictable transitions.
+
+```ts
+const [state, setState] = useState({ state1: ..., state2: ..., state3: ... });
+```
+
+## 5. Prefer explicit state flow
+
+Keep request execution, state updates, and derived calculations close to the triggering action. Avoid chaining business logic through multiple `useEffect` hooks.
+
+```ts
+// Prefer
+const handleAction = () => {
+  fetchData();
+  setTableData(...);
+  setSelectedRow(...);
+};
+```
+
+## 6. Avoid premature memoization
+
+Do not use `useMemo` / `useCallback` unless there is a confirmed bottleneck. Overuse adds complexity, obscures state flow, and risks stale dependencies. Optimize only when necessary.
+
+## 7. Keep request logic predictable
+
+A user interaction should clearly show: what request fires, which states update, how the UI changes. Avoid indirect update chains from dependency-driven effects.
+
+## 8. Prefer action-driven architecture
+
+Prefer action-driven updates, explicit handlers, and localized state transitions over effect-driven synchronization, cross-hook implicit updates, and reactive chains between states.
+
+# Styles
+
+**Future direction (apply to all new code):** avoid `styled-components`. Prefer:
+
+1. `createStyles` for component-scoped dynamic styles
+2. CSS Modules (`xxx.module.less`) for structured static styles
+
+Existing `styled-components` usage is legacy tech debt — do not migrate it wholesale, but do not add new `styled-components` either. Theme tokens (`var(--ant-color-*)`) work in all three approaches.
+
+# Naming conventions
+
+A page module lives under `src/pages/{module}` with this sub-structure: `components/`, `config/`, `forms/`, `hooks/`, `services/`, `index.tsx`. File naming:
+
+- **Create/edit modal**: `add-{feature}-modal.tsx` (keep the `-modal` suffix even when built with `FormDrawer`).
+- **Table columns hook**: `use-{feature}-columns.tsx`.
+- **Open/close & request hooks**: `use-{verb}-{noun}.ts` (e.g. `use-create-user.ts`, `use-query-user-list.ts`).
+- **Complex table cell**: extract into `{feature}-cell.tsx`.
+
+# Config & types
+
+- `config/types.ts` — TypeScript types. Form shape → `FormData`; table/list row → `ListItem`.
+- `config/index.ts` — static constants, enums, and value/label maps (e.g. `XxxStatusValueMap`, `XxxStatusLabelMap`). Keep constants out of `types.ts`.
+
+# Common components
+
+Always check `@gpustack/core-ui` first. Frequently reused:
+
+- **Drawer/Modal open/close**: `useBodyScroll`.
+- **Form drawer / footer**: `FormDrawer`, `ModalFooter`.
+- **Delete confirmation**: `DeleteModal`.
+- **Search + bulk actions bar**: `FilterBar`.
+- **Form fields**: `BaseSelect`, `Input` (labeled).
+- **Text overflow**: `AutoTooltip`.
+- **Icons**: `IconFont`.
+- **Status display** (success/failed/processing/warning): `StatusTag`.
+- **Permission-gated visibility**: `Access` / `useAccess`.
+- **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList`.
+- **Table data fetching**: `useTableFetch`.
+- **Submit guard** (prevent double-submit): `useSubmitLock`.
+- **Tabbed forms**: `ScrollSpyTabs`.
+
+# Dynamic add-item form fields
+
+When building a form, select the add-item component from the **shape of the field's data** (its schema). Match the schema, don't hand-roll a list UI:
+
+- **Plain object** (key→value map) → `LabelSelector`.
+- **String array** → `ListInput`. Ref `src/pages/llmodels/forms/backend-parameters-list.tsx`.
+- **Object array** → `MetadataList` with a custom item renderer per entry. Ref `src/pages/llmodels/forms/model-lora-list.tsx`.

DESIGN.md

@@ -1,46 +0,0 @@
-## Create form table list
-
-## Create a form
-
-## StatusTag
-
-Use `StatusTag` from `@gpustack/core-ui` for status display. Do not use `Tag` from `antd` directly.
-
-1. Define the mapping from business status values to UI status values in the module's `config/index.ts`:
-
-```ts
-import { StatusMaps } from '@/config';
-import { StatusType } from '@/config/types';
-
-export const XxxStatusValueMap = {
-  Running: 'running',
-  Pending: 'pending',
-  Failed: 'failed'
-};
-
-export const XxxStatusLabelMap: Record<string, string> = {
-  [XxxStatusValueMap.Running]: 'Running',
-  [XxxStatusValueMap.Pending]: 'Pending',
-  [XxxStatusValueMap.Failed]: 'Failed'
-};
-
-export const status: Record<string, StatusType> = {
-  [XxxStatusValueMap.Running]: StatusMaps.success,
-  [XxxStatusValueMap.Pending]: StatusMaps.transitioning,
-  [XxxStatusValueMap.Failed]: StatusMaps.error
-};
-```
-
-2. In table columns, pass only the UI status value and display text required by `StatusTag`:
-
-```tsx
-<StatusTag
-  statusValue={{
-    status: status[value],
-    text: XxxStatusLabelMap[value] || value,
-    message: record.state_message
-  }}
-/>
-```
-
-`statusValue.status` must be a value mapped from `StatusMaps`, such as `success`, `transitioning`, `warning`, `error`, or `inactive`. Do not pass business status values such as `running` or `pending` directly.

README.md

@@ -1,6 +1,6 @@
-# GPUStack UI
+# MesaStack UI
 
-UI for [GPUStack](https://github.com/gpustack/gpustack).
+UI for [MesaStack](https://github.com/gpustack/gpustack).
 
 ## Installation
 

config/config.ts

@@ -77,7 +77,7 @@ export default defineConfig({
   antd: {
     style: 'less'
   },
-  title: 'GPUStack',
+  title: 'MesaStack',
   hash: true,
   access: {},
   model: {},

package.json

@@ -17,7 +17,7 @@
     "@ant-design/pro-components": "3.1.0-0",
     "@antv/g6": "^5.0.51",
     "@braintree/sanitize-url": "^7.1.1",
-    "@gpustack/core-ui": "^1.0.27",
+    "@gpustack/core-ui": "^1.0.32",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/tasks": "^0.11.6",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^7.1.1
         version: 7.1.2
       '@gpustack/core-ui':
-        specifier: ^1.0.27
-        version: 1.0.27(czdvzceysqw7iv6pct2ucnb23e)
+        specifier: ^1.0.32
+        version: 1.0.32(czdvzceysqw7iv6pct2ucnb23e)
       '@huggingface/gguf':
         specifier: ^0.1.7
         version: 0.1.18
@@ -49,7 +49,7 @@ importers:
         version: 4.17.24
       '@umijs/max':
         specifier: ^4.6.15
-        version: 4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(lightningcss@1.22.1)(prettier@3.8.3)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+        version: 4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(lightningcss@1.22.1)(prettier@3.8.3)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@xterm/addon-fit':
         specifier: ^0.10.0
         version: 0.10.0(@xterm/xterm@5.5.0)
@@ -109,7 +109,7 @@ importers:
         version: 3.3.0
       jotai:
         specifier: ^2.8.4
-        version: 2.20.0(@babel/core@7.29.0)(@babel/template@7.28.6)(@types/react@18.3.28)(react@18.3.1)
+        version: 2.20.0(@babel/core@7.23.6)(@babel/template@7.28.6)(@types/react@18.3.28)(react@18.3.1)
       js-yaml:
         specifier: ^4.1.0
         version: 4.1.1
@@ -205,7 +205,7 @@ importers:
         version: 6.4.1(css-to-react-native@3.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       umi-presets-pro:
         specifier: ^2.0.3
-        version: 2.0.3(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(chokidar@3.6.0)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(encoding@0.1.13)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)(umi@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))
+        version: 2.0.3(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(chokidar@3.6.0)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(encoding@0.1.13)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)(umi@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))
       wavesurfer.js:
         specifier: ^7.8.8
         version: 7.12.6
@@ -233,10 +233,10 @@ importers:
         version: 1.0.1
       '@umijs/plugins':
         specifier: ^4.4.11
-        version: 4.6.51(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.6.51(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       babel-plugin-named-asset-import:
         specifier: ^0.3.8
-        version: 0.3.8(@babel/core@7.29.0)
+        version: 0.3.8(@babel/core@7.23.6)
       case-sensitive-paths-webpack-plugin:
         specifier: ^2.4.0
         version: 2.4.0
@@ -1484,24 +1484,24 @@ packages:
     resolution: {integrity: sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==, tarball: https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz}
     deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
 
-  '@gpustack/core-ui@1.0.27':
-    resolution: {integrity: sha512-m3ue0EHFKULla0mpnpxZwn9LVaGKS+HnuzQYSBECQa4vaP8MEEQsR7oFBtG8bhWUWYA9VzP6k7fjozDkP6TymA==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.27.tgz}
+  '@gpustack/core-ui@1.0.32':
+    resolution: {integrity: sha512-kGTazoqbK2KyZgOP6gmQaRxTiQVfF2IKLGDXjJq6w6BbmJgALXFJA2v2ROjAbjEVyfTdBzyYeXfPo/JgISpMNw==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.32.tgz}
     peerDependencies:
-      '@ant-design/icons': '>=6.0.0'
+      '@ant-design/icons': ^6.1.0
       '@ant-design/pro-components': 3.1.0-0
       '@monaco-editor/react': ^4.6.0
-      ahooks: '>=3.0.0'
-      antd: '>=6.0.0'
-      antd-style: '>=3.0.0'
-      axios: '>=1.8.0'
-      echarts: '>=5.0.0'
+      ahooks: ^3.8.5
+      antd: ^6.3.3
+      antd-style: ^3.6.2
+      axios: ^1.8.2
+      echarts: ^5.5.1
       file-saver: ^2.0.5
       monaco-editor: ^0.30.1
       monaco-yaml: ^4.0.0
       overlayscrollbars-react: ^0.5.6
-      react: '>=18.0.0'
-      react-dom: '>=18.0.0'
-      styled-components: '>=6.0.0'
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      styled-components: ^6.1.15
 
   '@hono/node-server@1.19.14':
     resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==, tarball: https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.14.tgz}
@@ -9257,14 +9257,14 @@ snapshots:
       '@radix-ui/popper': 0.0.10
       react: 18.3.1
 
-  '@alita/plugins@3.5.5(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@alita/plugins@3.5.5(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@alita/babel-transform-jsx-class': 0.0.2
       '@alita/inspx': 0.0.2(react@18.3.1)
       '@alita/request': 3.1.2
       '@alita/types': 3.1.2
       '@umijs/bundler-utils': 4.4.11
-      '@umijs/plugins': 4.4.11(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@umijs/plugins': 4.4.11(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@umijs/utils': 4.4.11
       ahooks: 3.9.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       antd-mobile-alita: 2.3.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -10134,90 +10134,90 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-import-attributes@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-import-attributes@7.28.6(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.29.0)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.29.0)':
+  '@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.6)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/core': 7.23.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.23.6)
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-simple-access': 7.27.1
     transitivePeerDependencies:
@@ -10808,7 +10808,7 @@ snapshots:
 
   '@formatjs/intl-utils@2.3.0': {}
 
-  '@gpustack/core-ui@1.0.27(czdvzceysqw7iv6pct2ucnb23e)':
+  '@gpustack/core-ui@1.0.32(czdvzceysqw7iv6pct2ucnb23e)':
     dependencies:
       '@ant-design/icons': 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@ant-design/pro-components': 3.1.0-0(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12281,11 +12281,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@umijs/bundler-utoopack@4.6.51(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))':
+  '@umijs/bundler-utoopack@4.6.51(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))':
     dependencies:
       '@umijs/bundler-utils': 4.6.51
       '@umijs/bundler-webpack': 4.6.51(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
-      '@utoo/pack': 1.4.3(less-loader@11.1.0(less@4.1.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(less@4.1.3)(postcss@8.5.14)(resolve-url-loader@5.0.0)(sass-loader@13.2.0(sass@1.54.0)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))
+      '@utoo/pack': 1.4.3(less-loader@11.1.0(less@4.1.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(less@4.1.3)(postcss@8.5.14)(resolve-url-loader@5.0.0)(sass-loader@13.2.0(sass@1.54.0)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))
       compression: 1.8.1
       connect-history-api-fallback: 2.0.0
       cors: 2.8.6
@@ -12553,14 +12553,14 @@ snapshots:
       - supports-color
       - typescript
 
-  '@umijs/max@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(lightningcss@1.22.1)(prettier@3.8.3)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))':
+  '@umijs/max@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(lightningcss@1.22.1)(prettier@3.8.3)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))':
     dependencies:
       '@umijs/lint': 4.6.51(eslint@8.35.0)(stylelint@14.8.2)(typescript@5.9.3)
-      '@umijs/plugins': 4.6.51(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@4.24.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@umijs/plugins': 4.6.51(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@4.24.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       antd: 4.24.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       eslint: 8.35.0
       stylelint: 14.8.2
-      umi: 4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@8.35.0)(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+      umi: 4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@8.35.0)(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
     transitivePeerDependencies:
       - '@babel/core'
       - '@rspack/core'
@@ -12642,7 +12642,7 @@ snapshots:
     dependencies:
       tsx: 3.12.2
 
-  '@umijs/plugins@4.4.11(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@umijs/plugins@4.4.11(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@ahooksjs/use-request': 2.8.15(react@18.3.1)
       '@ant-design/antd-theme-variable': 1.0.0
@@ -12657,7 +12657,7 @@ snapshots:
       antd-dayjs-webpack-plugin: 1.0.6(dayjs@1.11.20)
       axios: 0.27.2
       babel-plugin-import: 1.13.8
-      babel-plugin-styled-components: 2.1.4(@babel/core@7.29.0)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      babel-plugin-styled-components: 2.1.4(@babel/core@7.23.6)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       dayjs: 1.11.20
       dva-core: 2.0.4(redux@4.2.1)
       dva-immer: 1.0.2(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
@@ -12687,7 +12687,7 @@ snapshots:
       - react-native
       - supports-color
 
-  '@umijs/plugins@4.6.51(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@4.24.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@umijs/plugins@4.6.51(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@4.24.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@ahooksjs/use-request': 2.8.15(react@18.3.1)
       '@ant-design/antd-theme-variable': 1.0.0
@@ -12702,7 +12702,7 @@ snapshots:
       antd-dayjs-webpack-plugin: 1.0.6(dayjs@1.11.20)
       axios: 0.27.2
       babel-plugin-import: 1.13.8
-      babel-plugin-styled-components: 2.1.4(@babel/core@7.29.0)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      babel-plugin-styled-components: 2.1.4(@babel/core@7.23.6)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       dayjs: 1.11.20
       dva-core: 2.0.4(redux@4.2.1)
       dva-immer: 1.0.2(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
@@ -12732,7 +12732,7 @@ snapshots:
       - react-native
       - supports-color
 
-  '@umijs/plugins@4.6.51(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@umijs/plugins@4.6.51(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@ahooksjs/use-request': 2.8.15(react@18.3.1)
       '@ant-design/antd-theme-variable': 1.0.0
@@ -12747,7 +12747,7 @@ snapshots:
       antd-dayjs-webpack-plugin: 1.0.6(dayjs@1.11.20)
       axios: 0.27.2
       babel-plugin-import: 1.13.8
-      babel-plugin-styled-components: 2.1.4(@babel/core@7.29.0)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      babel-plugin-styled-components: 2.1.4(@babel/core@7.23.6)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       dayjs: 1.11.20
       dva-core: 2.0.4(redux@4.2.1)
       dva-immer: 1.0.2(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
@@ -12777,7 +12777,7 @@ snapshots:
       - react-native
       - supports-color
 
-  '@umijs/preset-umi@4.6.51(@types/node@25.6.2)(@types/react@18.3.28)(lightningcss@1.22.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))':
+  '@umijs/preset-umi@4.6.51(@types/node@25.6.2)(@types/react@18.3.28)(lightningcss@1.22.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))':
     dependencies:
       '@iconify/utils': 2.1.1
       '@stagewise/toolbar': 0.6.2
@@ -12787,7 +12787,7 @@ snapshots:
       '@umijs/bundler-esbuild': 4.6.51
       '@umijs/bundler-mako': 0.11.10(postcss@8.5.14)(sass@1.54.0)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/bundler-utils': 4.6.51
-      '@umijs/bundler-utoopack': 4.6.51(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+      '@umijs/bundler-utoopack': 4.6.51(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/bundler-vite': 4.6.51(@types/node@25.6.2)(lightningcss@1.22.1)(postcss@8.5.14)(rollup@3.30.0)(sass@1.54.0)(terser@5.48.0)
       '@umijs/bundler-webpack': 4.6.51(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/core': 4.6.51
@@ -12870,13 +12870,13 @@ snapshots:
       react-helmet-async: 1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom: 6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  '@umijs/request-record@1.1.4(umi@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))':
+  '@umijs/request-record@1.1.4(umi@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))':
     dependencies:
       chokidar: 3.6.0
       express: 4.22.1
       lodash: 4.18.1
       prettier: 2.8.8
-      umi: 4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+      umi: 4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
     transitivePeerDependencies:
       - supports-color
 
@@ -12892,13 +12892,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@umijs/test@4.6.51(@babel/core@7.29.0)':
+  '@umijs/test@4.6.51(@babel/core@7.23.6)':
     dependencies:
-      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.6)
       '@jest/types': 27.5.1
       '@umijs/bundler-utils': 4.6.51
       '@umijs/utils': 4.6.51
-      babel-jest: 29.7.0(@babel/core@7.29.0)
+      babel-jest: 29.7.0(@babel/core@7.23.6)
       esbuild: 0.21.4
       identity-obj-proxy: 3.0.0
       isomorphic-unfetch: 4.0.2
@@ -13018,7 +13018,7 @@ snapshots:
   '@utoo/pack-win32-x64-msvc@1.4.3':
     optional: true
 
-  '@utoo/pack@1.4.3(less-loader@11.1.0(less@4.1.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(less@4.1.3)(postcss@8.5.14)(resolve-url-loader@5.0.0)(sass-loader@13.2.0(sass@1.54.0)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))':
+  '@utoo/pack@1.4.3(less-loader@11.1.0(less@4.1.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(less@4.1.3)(postcss@8.5.14)(resolve-url-loader@5.0.0)(sass-loader@13.2.0(sass@1.54.0)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))':
     dependencies:
       '@babel/code-frame': 7.22.5
       '@hono/node-server': 1.19.14(hono@4.12.18)
@@ -13039,7 +13039,7 @@ snapshots:
       sass-loader: 13.2.0(sass@1.54.0)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       semver: 7.8.0
       send: 0.17.1
-      styled-jsx: 5.1.7(@babel/core@7.29.0)(react@18.3.1)
+      styled-jsx: 5.1.7(@babel/core@7.23.6)(react@18.3.1)
       ws: 8.20.0
     optionalDependencies:
       '@utoo/pack-darwin-arm64': 1.4.3
@@ -13555,13 +13555,13 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  babel-jest@29.7.0(@babel/core@7.29.0):
+  babel-jest@29.7.0(@babel/core@7.23.6):
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@jest/transform': 29.7.0
       '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.6.3(@babel/core@7.29.0)
+      babel-preset-jest: 29.6.3(@babel/core@7.23.6)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -13601,9 +13601,9 @@ snapshots:
       cosmiconfig: 7.1.0
       resolve: 1.22.12
 
-  babel-plugin-named-asset-import@0.3.8(@babel/core@7.29.0):
+  babel-plugin-named-asset-import@0.3.8(@babel/core@7.23.6):
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
 
   babel-plugin-react-compiler@0.0.0-experimental-c23de8d-20240515:
     dependencies:
@@ -13615,11 +13615,11 @@ snapshots:
       zod: 3.25.76
       zod-validation-error: 2.1.0(zod@3.25.76)
 
-  babel-plugin-styled-components@2.1.4(@babel/core@7.29.0)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  babel-plugin-styled-components@2.1.4(@babel/core@7.23.6)(styled-components@6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-module-imports': 7.28.6
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.23.6)
       lodash: 4.18.1
       picomatch: 2.3.2
       styled-components: 6.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -13627,30 +13627,30 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.0):
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.23.6):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.29.0)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.29.0)
-      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.29.0)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.29.0)
+      '@babel/core': 7.23.6
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.6)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.23.6)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.6)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.6)
+      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.23.6)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.6)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.6)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.6)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.6)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.6)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.6)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.6)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.6)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.6)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.6)
 
-  babel-preset-jest@29.6.3(@babel/core@7.29.0):
+  babel-preset-jest@29.6.3(@babel/core@7.23.6):
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       babel-plugin-jest-hoist: 29.6.3
-      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.0)
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.23.6)
 
   babel-runtime-jsx-plus@0.1.5: {}
 
@@ -16410,9 +16410,9 @@ snapshots:
 
   jiti@2.7.0: {}
 
-  jotai@2.20.0(@babel/core@7.29.0)(@babel/template@7.28.6)(@types/react@18.3.28)(react@18.3.1):
+  jotai@2.20.0(@babel/core@7.23.6)(@babel/template@7.28.6)(@types/react@18.3.28)(react@18.3.1):
     optionalDependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
       '@babel/template': 7.28.6
       '@types/react': 18.3.28
       react: 18.3.1
@@ -19805,12 +19805,12 @@ snapshots:
       css-to-react-native: 3.2.0
       react-dom: 18.3.1(react@18.3.1)
 
-  styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1):
+  styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1):
     dependencies:
       client-only: 0.0.1
       react: 18.3.1
     optionalDependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.23.6
 
   stylelint-config-recommended@7.0.0(stylelint@14.8.2):
     dependencies:
@@ -20164,12 +20164,12 @@ snapshots:
 
   ua-parser-js@0.7.41: {}
 
-  umi-presets-pro@2.0.3(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(chokidar@3.6.0)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(encoding@0.1.13)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)(umi@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))):
+  umi-presets-pro@2.0.3(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(chokidar@3.6.0)(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(encoding@0.1.13)(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)(umi@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))):
     dependencies:
-      '@alita/plugins': 3.5.5(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@alita/plugins': 3.5.5(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@umijs/max-plugin-openapi': 2.0.3(chokidar@3.6.0)(encoding@0.1.13)(typescript@5.9.3)
-      '@umijs/plugins': 4.6.51(@babel/core@7.29.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@umijs/request-record': 1.1.4(umi@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))
+      '@umijs/plugins': 4.6.51(@babel/core@7.23.6)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(dva@2.5.0-beta.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@umijs/request-record': 1.1.4(umi@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)))
       swagger-ui-dist: 4.19.1
     transitivePeerDependencies:
       - '@babel/core'
@@ -20193,17 +20193,17 @@ snapshots:
       isomorphic-fetch: 2.2.1
       qs: 6.15.1
 
-  umi@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@8.35.0)(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)):
+  umi@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@8.35.0)(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)):
     dependencies:
       '@babel/runtime': 7.23.6
       '@umijs/bundler-utils': 4.6.51
       '@umijs/bundler-webpack': 4.6.51(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/core': 4.6.51
       '@umijs/lint': 4.6.51(eslint@8.35.0)(stylelint@14.8.2)(typescript@5.9.3)
-      '@umijs/preset-umi': 4.6.51(@types/node@25.6.2)(@types/react@18.3.28)(lightningcss@1.22.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+      '@umijs/preset-umi': 4.6.51(@types/node@25.6.2)(@types/react@18.3.28)(lightningcss@1.22.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/renderer-react': 4.6.51(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@umijs/server': 4.6.51
-      '@umijs/test': 4.6.51(@babel/core@7.29.0)
+      '@umijs/test': 4.6.51(@babel/core@7.23.6)
       '@umijs/utils': 4.6.51
       prettier-plugin-organize-imports: 3.2.4(prettier@3.8.3)(typescript@5.9.3)
       prettier-plugin-packagejson: 2.4.3(prettier@3.8.3)
@@ -20247,17 +20247,17 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  umi@4.6.51(@babel/core@7.29.0)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)):
+  umi@4.6.51(@babel/core@7.23.6)(@types/node@25.6.2)(@types/react@18.3.28)(eslint@9.39.4(jiti@2.7.0))(lightningcss@1.22.1)(prettier@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(stylelint@14.8.2)(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)):
     dependencies:
       '@babel/runtime': 7.23.6
       '@umijs/bundler-utils': 4.6.51
       '@umijs/bundler-webpack': 4.6.51(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/core': 4.6.51
       '@umijs/lint': 4.6.51(eslint@9.39.4(jiti@2.7.0))(stylelint@14.8.2)(typescript@5.9.3)
-      '@umijs/preset-umi': 4.6.51(@types/node@25.6.2)(@types/react@18.3.28)(lightningcss@1.22.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.29.0)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+      '@umijs/preset-umi': 4.6.51(@types/node@25.6.2)(@types/react@18.3.28)(lightningcss@1.22.1)(rollup@3.30.0)(sass@1.54.0)(styled-jsx@5.1.7(@babel/core@7.23.6)(react@18.3.1))(terser@5.48.0)(type-fest@0.20.2)(typescript@5.9.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       '@umijs/renderer-react': 4.6.51(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@umijs/server': 4.6.51
-      '@umijs/test': 4.6.51(@babel/core@7.29.0)
+      '@umijs/test': 4.6.51(@babel/core@7.23.6)
       '@umijs/utils': 4.6.51
       prettier-plugin-organize-imports: 3.2.4(prettier@3.8.3)(typescript@5.9.3)
       prettier-plugin-packagejson: 2.4.3(prettier@3.8.3)

scripts/rebrand

@@ -0,0 +1,102 @@
+#!/bin/bash
+#
+# rebrand: 把面向用户的品牌标识从 GPUStack 批量替换为 MesaStack（或自定义品牌）。
+#
+# 设计目标：上游每次更新后，在新的 v<version>-lofyer 分支上跑一次即可重新应用品牌定制。
+#
+# 只替换「独立的品牌词」FROM，并刻意跳过所有功能性引用：
+#   - 小写 `gpustack`     —— npm 包名 (@gpustack/core-ui)、URL、路径、k8s 命名空间、author（大小写敏感，天然不匹配）
+#   - 全大写 `GPUSTACK`   —— 常量/环境变量/全局 (GPUSTACK_API_BASE_URL, __GPUSTACK_*__, GPUSTACK_UI_*)（大小写敏感，不匹配）
+#   - 代码标识符          —— getGPUStackPlugin / GPUStackVersionAtom / GPUStackPluginManager / GPUStackLogo 等
+#                            （FROM 紧邻字母时视为标识符的一部分，跳过）
+#   - HTTP 头 X-GPUStack-* —— 后端契约 (如 X-GPUStack-Model)，跳过
+#
+# 匹配规则：FROM 前后都不是字母（独立单词），且不是 `X-` 前缀的头名。
+#
+# 环境变量：
+#   FROM       源品牌词（默认 GPUStack）
+#   TO         目标品牌词（默认 MesaStack）
+#   DRY_RUN    设为 1 时只预览将改动的行，不写文件
+#
+set -e
+
+FROM="${FROM:-GPUStack}"
+TO="${TO:-MesaStack}"
+DRY_RUN="${DRY_RUN:-0}"
+
+log() { echo -e "\033[1;34m[rebrand]\033[0m $*"; }
+
+# 大小写敏感、单词边界、排除 X- 头前缀的 Perl 正则。
+# (?<![A-Za-z]) 前面不是字母  (?<!X-) 不是 X- 头  (?![A-Za-z]) 后面不是字母
+# FROM 为纯字母品牌词（无正则元字符），故直接拼接，不用 \Q\E
+# —— \Q\E 在「经变量插值进正则」时不会被求值，反而会破坏匹配。
+PATTERN="(?<![A-Za-z])(?<!X-)${FROM}(?![A-Za-z])"
+
+# 行级排除：某些 FROM 出现在「与后端契约绑定的字符串」里，改了会破坏运行时逻辑，
+# 即使是独立单词也必须整行跳过。命中下列任一正则的行不替换。
+# 已知例外：
+#   - llmodels/hooks/index.ts 用 startsWith() 比对后端返回的英文兼容性消息
+#     （"... does not exist on the GPUStack server ..."），后端仍发 GPUStack，前端不能改。
+SKIP_LINE_PATTERNS=(
+  'does not exist on the .*server. It'"'"'s recommended'
+)
+skip_line() {
+  local line="$1" pat
+  for pat in "${SKIP_LINE_PATTERNS[@]}"; do
+    if echo "$line" | grep -qP "$pat"; then return 0; fi
+  done
+  return 1
+}
+
+# 待处理的已跟踪文本文件（排除 lockfile 与本脚本自身）。
+mapfile -t files < <(
+  git ls-files -- \
+    '*.ts' '*.tsx' '*.js' '*.jsx' '*.json' '*.less' '*.html' '*.md' \
+  | grep -v 'pnpm-lock.yaml'
+)
+
+log "品牌替换: '${FROM}' -> '${TO}'"
+log "候选文件: ${#files[@]}"
+
+# 把行级排除合并成一个 perl 正则，供预览与替换共用（经环境变量传入，免去转义）。
+SKIP_RE=""
+for pat in "${SKIP_LINE_PATTERNS[@]}"; do
+  SKIP_RE="${SKIP_RE:+${SKIP_RE}|}(?:${pat})"
+done
+export REBRAND_SKIP_RE="${SKIP_RE}"
+export REBRAND_PATTERN="${PATTERN}"
+export REBRAND_TO="${TO}"
+
+# 统计命中行（预览/确认用），已扣除被行级排除的行。
+log "命中行预览（最多 40 行）："
+grep -rnP "${PATTERN}" "${files[@]}" 2>/dev/null \
+  | { [[ -n "${SKIP_RE}" ]] && grep -vP "${SKIP_RE}" || cat; } \
+  | head -40 || true
+total=$(grep -rnP "${PATTERN}" "${files[@]}" 2>/dev/null \
+  | { [[ -n "${SKIP_RE}" ]] && grep -vP "${SKIP_RE}" || cat; } | wc -l)
+log "命中总行数: ${total}"
+if [[ -n "${SKIP_RE}" ]]; then
+  skipped=$(grep -rnP "${PATTERN}" "${files[@]}" 2>/dev/null | grep -cP "${SKIP_RE}" || true)
+  log "行级排除（后端契约，保留 ${FROM}）: ${skipped} 行"
+fi
+
+if [[ "${DRY_RUN}" == "1" ]]; then
+  log "DRY_RUN=1：未写入任何文件。"
+  exit 0
+fi
+
+# 实际替换（in-place）。命中行级排除的行整行跳过。
+changed=0
+for f in "${files[@]}"; do
+  if grep -qP "${PATTERN}" "$f" 2>/dev/null; then
+    perl -i -pe '
+      my $skip = $ENV{REBRAND_SKIP_RE};
+      next if length($skip) && /$skip/;
+      s/$ENV{REBRAND_PATTERN}/$ENV{REBRAND_TO}/g;
+    ' "$f"
+    changed=$((changed + 1))
+  fi
+done
+
+log "已修改文件数: ${changed}"
+log "完成。请用 'git diff' 复核改动。"

scripts/sync-github

@@ -0,0 +1,83 @@
+#!/bin/bash
+#
+# sync-github: 从上游 GitHub 拉取最新源码，并全量镜像同步到 192.168.0.23 私有源。
+#
+# 默认行为（全量镜像 / 强制）：
+#   1. 确保存在 upstream remote 指向 GitHub（不存在则自动添加，URL 不一致则更新）。
+#   2. 从 upstream 抓取所有分支与 tag（--prune 清理已删除的远端引用）。
+#   3. 将上游每个分支强制推送到私有源同名分支（force push）。
+#   4. 将上游所有 tag 强制推送到私有源。
+#
+# 可用环境变量：
+#   UPSTREAM_URL     上游 GitHub 仓库地址（默认 https://github.com/gpustack/gpustack-ui.git）
+#   ORIGIN_REMOTE    私有源 remote 名称（默认 origin）
+#   UPSTREAM_REMOTE  上游 remote 名称（默认 upstream）
+#   PRUNE_BRANCHES   设为 1 时，删除私有源上「上游已不存在」的分支（真·镜像，破坏性，默认关闭）
+#   DRY_RUN          设为 1 时，仅打印将要执行的推送动作，不实际推送
+#
+set -e
+
+UPSTREAM_URL="${UPSTREAM_URL:-https://github.com/gpustack/gpustack-ui.git}"
+ORIGIN_REMOTE="${ORIGIN_REMOTE:-origin}"
+UPSTREAM_REMOTE="${UPSTREAM_REMOTE:-upstream}"
+PRUNE_BRANCHES="${PRUNE_BRANCHES:-0}"
+DRY_RUN="${DRY_RUN:-0}"
+
+log() { echo -e "\033[1;34m[sync-github]\033[0m $*"; }
+warn() { echo -e "\033[1;33m[sync-github]\033[0m $*" >&2; }
+
+run() {
+  if [[ "${DRY_RUN}" == "1" ]]; then
+    echo "  (dry-run) git $*"
+  else
+    git "$@"
+  fi
+}
+
+# 1. 确保 upstream remote 指向 GitHub。
+if git remote get-url "${UPSTREAM_REMOTE}" >/dev/null 2>&1; then
+  current_url=$(git remote get-url "${UPSTREAM_REMOTE}")
+  if [[ "${current_url}" != "${UPSTREAM_URL}" ]]; then
+    log "更新 ${UPSTREAM_REMOTE} 地址: ${current_url} -> ${UPSTREAM_URL}"
+    git remote set-url "${UPSTREAM_REMOTE}" "${UPSTREAM_URL}"
+  fi
+else
+  log "添加 upstream remote: ${UPSTREAM_REMOTE} -> ${UPSTREAM_URL}"
+  git remote add "${UPSTREAM_REMOTE}" "${UPSTREAM_URL}"
+fi
+
+origin_url=$(git remote get-url "${ORIGIN_REMOTE}")
+log "上游 (拉取): ${UPSTREAM_URL}"
+log "私有源 (推送): ${origin_url}"
+
+# 2. 抓取上游所有分支与 tag。
+log "抓取上游分支与 tag..."
+git fetch --prune --tags "${UPSTREAM_REMOTE}"
+
+# 3. 逐个分支强制推送到私有源。
+log "强制同步分支到私有源..."
+upstream_branches=$(git for-each-ref --format='%(refname:strip=3)' "refs/remotes/${UPSTREAM_REMOTE}/" | grep -v '^HEAD$')
+
+for branch in ${upstream_branches}; do
+  log "  -> ${branch}"
+  run push --force "${ORIGIN_REMOTE}" \
+    "refs/remotes/${UPSTREAM_REMOTE}/${branch}:refs/heads/${branch}"
+done
+
+# 4. 强制同步所有 tag。
+log "强制同步 tag 到私有源..."
+run push --force --tags "${ORIGIN_REMOTE}"
+
+# 5. 可选：删除私有源上、上游已不存在的分支（真·镜像）。
+if [[ "${PRUNE_BRANCHES}" == "1" ]]; then
+  warn "PRUNE_BRANCHES=1：将删除私有源上上游已不存在的分支"
+  origin_branches=$(git ls-remote --heads "${ORIGIN_REMOTE}" | sed 's@.*refs/heads/@@')
+  for branch in ${origin_branches}; do
+    if ! echo "${upstream_branches}" | grep -qx "${branch}"; then
+      warn "  删除私有源分支: ${branch}"
+      run push "${ORIGIN_REMOTE}" --delete "${branch}"
+    fi
+  done
+fi
+
+log "同步完成。"

src/components/footer/index.tsx

@@ -1,9 +1,7 @@
 import { GPUStackVersionAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
-import VersionInfo, { modalConfig } from '@/components/version-info';
-import externalLinks from '@/constants/external-links';
 import { useIntl } from '@umijs/max';
-import { Button, Divider, Modal, Typography } from 'antd';
+import { Divider, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import styled from 'styled-components';
 
@@ -33,20 +31,10 @@ const useStyles = createStyles(({ token, css }) => ({
 
 const Footer: React.FC = () => {
   const intl = useIntl();
-  const [modal, contextHolder] = Modal.useModal();
   const { styles } = useStyles();
 
-  const showVersion = () => {
-    modal.info({
-      ...modalConfig,
-      width: 460,
-      content: <VersionInfo intl={intl} />
-    });
-  };
-
   return (
     <>
-      {contextHolder}
       <div className={styles.footer}>
         <div className="footer-content">
           <div className="footer-content-left">
@@ -63,18 +51,7 @@ const Footer: React.FC = () => {
                 </Typography.Link>
               </CompanyWrapper>
               <Divider orientation="vertical" />
-              <Button
-                type="link"
-                size="small"
-                href={externalLinks.documentation}
-                target="_blank"
-              >
-                {intl.formatMessage({ id: 'common.button.help' })}
-              </Button>
-              <Divider orientation="vertical" />
-              <Button type="link" size="small" onClick={showVersion}>
-                {getAtomStorage(GPUStackVersionAtom)?.version}
-              </Button>
+              <span>{getAtomStorage(GPUStackVersionAtom)?.version}</span>
             </div>
           </div>
         </div>

src/global.less

@@ -851,3 +851,6 @@ body {
   padding-right: 8px;
   padding-block: 8px;
 }
+.ant-select-multiple .ant-select-content {
+  height: 100%;
+}

src/hooks/use-cool-colors.ts

@@ -1,54 +1,132 @@
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import { converter, modeHsl, modeRgb, useMode } from 'culori/fn';
+import { clampChroma, formatHex, modeOklch, modeRgb, useMode } from 'culori/fn';
+import useUserSettings from './use-user-settings';
 
-const toHsl = converter('hsl');
-
-const DEFAULT_BRAND_HUE = 211; // brand color
-const COOL_HUE_START = 180;
-const COOL_HUE_END = 280;
+// Linear-style minimal/neutral palette: a TIGHT blue -> violet band in OKLCH
+// (perceptually uniform), kept moderate-chroma so fills read as clean and gentle
+// rather than candy-colored. We deliberately stay narrow and DON'T fan out to
+// green/magenta — in this aesthetic series are separated by LIGHTNESS, not by
+// spreading across the hue wheel. Every series (including the first) is generated
+// from this one ramp, so the whole palette stays in a single cohesive color
+// family — no special high-saturation brand color that clashes with the rest.
+const COOL_HUE_START = 250; // blue
+const COOL_HUE_END = 315; // violet (stops short of magenta/pink, stays neutral-cool)
 const COOL_HUE_RANGE = COOL_HUE_END - COOL_HUE_START;
-const GOLDEN_RATIO_CONJUGATE = 0.618033988749895;
 
-function colorStringToHue(input?: string): number | undefined {
-  if (!input) return undefined;
-  const color = toHsl(input);
-  if (!color || typeof color.h !== 'number') return undefined;
-  return color.h;
-}
-
-export default function useCoolColors() {
-  // const brandHue = useMemo(
-  //   () => colorStringToHue(userSettings.colorPrimary) ?? DEFAULT_BRAND_HUE,
-  //   [userSettings.colorPrimary]
-  // );
+/**
+ * Vivid, distinct cool accents — for places that need a handful of "primary"
+ * colors, one per card/section (e.g. the summary trend cards), NOT a stacked
+ * multi-series palette. Every color is anchor-quality (bright + saturated) and
+ * spread evenly across the blue→violet band, so the set reads as several equally
+ * strong primaries rather than one bold + several washed-out fills.
+ */
+export function useCoolAccents() {
   useMode(modeRgb);
-  useMode(modeHsl);
+  useMode(modeOklch);
 
-  const brandHue = DEFAULT_BRAND_HUE;
+  const { isDarkTheme } = useUserSettings();
 
   return useMemoizedFn((count: number): string[] => {
     if (count <= 0) return [];
 
-    const colors: string[] = [];
+    const l = isDarkTheme ? 0.62 : 0.64;
+    const c = isDarkTheme ? 0.16 : 0.2;
 
+    const out: string[] = [];
     for (let i = 0; i < count; i++) {
-      let hue: number;
+      const t = count <= 1 ? 0 : i / (count - 1);
+      const hue = COOL_HUE_START + t * COOL_HUE_RANGE;
+      out.push(
+        formatHex(clampChroma({ mode: 'oklch', l, c, h: hue }, 'oklch'))
+      );
+    }
+    return out;
+  });
+}
 
-      if (i === 0) {
-        hue = brandHue - 5;
-      } else {
-        const offset = (i * GOLDEN_RATIO_CONJUGATE) % 1;
-        hue = COOL_HUE_START + offset * COOL_HUE_RANGE;
+export default function useCoolColors() {
+  useMode(modeRgb);
+  useMode(modeOklch);
 
-        if (Math.abs(hue - brandHue) < 5) {
-          hue = (hue + 10) % COOL_HUE_END;
-        }
-      }
+  const { isDarkTheme } = useUserSettings();
 
-      const s = i === 0 ? 100 : 75 + (i % 3) * 5;
-      const l = i === 0 ? 50 : 55 + (i % 2) * 5;
+  return useMemoizedFn((count: number): string[] => {
+    if (count <= 0) return [];
 
-      colors.push(`hsl(${Math.round(hue)}, ${s}%, ${l}%)`);
+    // Moderate chroma: clean and crisp, but gentle (not neon). Too low reads as
+    // muddy/dirty; too high reads as harsh. Dark mode a touch lower so fills
+    // stay calm against the dark canvas.
+    const baseChroma = isDarkTheme ? 0.085 : 0.12;
+
+    // First series is the "primary" anchor: SAME blue family (the bluest end of
+    // the ramp, nearest the brand hue) but clearly brighter and more saturated —
+    // a vivid, clean brand-blue that reads as the base color. The rest of the
+    // palette stays low-chroma, so the anchor pops as the primary while the
+    // family still feels cohesive.
+    const colors: string[] = [
+      formatHex(
+        clampChroma(
+          {
+            mode: 'oklch',
+            l: isDarkTheme ? 0.62 : 0.66,
+            c: isDarkTheme ? 0.16 : 0.2,
+            h: COOL_HUE_START
+          },
+          'oklch'
+        )
+      )
+    ];
+
+    const rest = count - 1;
+    if (rest <= 0) return colors;
+
+    // Separation is driven by LIGHTNESS, not hue. The hue band is narrow, so as
+    // the count grows we add lightness TIERS — each tier reuses the same narrow
+    // hue ramp at a distinct lightness level, multiplying how many separable
+    // colors fit while keeping the whole palette in one cohesive family.
+    const tiers = rest <= 6 ? 1 : rest <= 12 ? 2 : 3;
+    const steps = Math.ceil(rest / tiers);
+
+    // Distinct lightness levels per tier count (index 0 → 2 tiers, 1 → 3 tiers).
+    // Lighter, airier levels for a fresh/crisp feel; kept in the upper-mid range
+    // so fills stay clean and legible.
+    const lightTiers = isDarkTheme
+      ? [
+          [0.68, 0.5],
+          [0.72, 0.6, 0.48]
+        ]
+      : [
+          [0.82, 0.64],
+          [0.84, 0.72, 0.6]
+        ];
+    // Single-tier light/dark zig-zag for the common small-count case.
+    const [lightLo, lightHi] = isDarkTheme ? [0.5, 0.68] : [0.64, 0.82];
+
+    for (let i = 0; i < rest; i++) {
+      // Cycle the tier on every step so consecutive series always differ in
+      // lightness — exactly where stacked bars are hardest to tell apart.
+      const tier = i % tiers;
+      const step = Math.floor(i / tiers);
+
+      // Even hue ramp across the narrow band. Each tier is offset by a fraction
+      // of a step so same-step colors in different tiers don't share a hue.
+      const t = steps <= 1 ? 0.5 : (step + tier / tiers) / steps;
+      const hue = COOL_HUE_START + t * COOL_HUE_RANGE;
+
+      // 1 tier (≤6 series): light/dark zig-zag. 2-3 tiers: the tier's level.
+      const lightness =
+        tiers === 1 ? (i % 2 ? lightLo : lightHi) : lightTiers[tiers - 2][tier];
+
+      // Clamp chroma into the sRGB gamut so values don't get distorted by a raw
+      // channel clip when serialized to hex.
+      colors.push(
+        formatHex(
+          clampChroma(
+            { mode: 'oklch', l: lightness, c: baseChroma, h: hue },
+            'oklch'
+          )
+        )
+      );
     }
 
     return colors;

src/layouts/extraRender.tsx

@@ -1,8 +1,6 @@
 import { GPUStackVersionAtom, UpdateCheckAtom } from '@/atoms/user';
 import PluginExtraField from '@/components/plugin-extra-fields';
-import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/constants/external-links';
-import useBodyScroll from '@/hooks/use-body-scroll';
 import { logout } from '@/pages/login/apis';
 import { useModel } from '@@/plugin-model';
 import {
@@ -13,12 +11,11 @@ import {
 } from '@ant-design/icons';
 import { DropdownActions, IconFont } from '@gpustack/core-ui';
 import { history, useIntl, useNavigate } from '@umijs/max';
-import { Avatar, Button, Divider, Modal } from 'antd';
+import { Avatar, Divider } from 'antd';
 import { useAtom } from 'jotai';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 import { DEFAULT_ENTER_PAGE } from '../config/settings';
-import GithubStar from './github-star';
 
 const NewLabel = styled.span`
   position: relative;
@@ -98,11 +95,9 @@ const CustomItem = styled.div`
 
 export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
   const { isDarkTheme } = props;
-  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
-  const [modal, contextHolder] = Modal.useModal();
+  const intl = useIntl();
   const [version] = useAtom(GPUStackVersionAtom);
   const [updateCheck] = useAtom(UpdateCheckAtom);
-  const intl = useIntl();
   const initialInfo = useModel('@@initialState') || {
     initialState: undefined,
     loading: false,
@@ -140,16 +135,6 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
     return {};
   }, [isDarkTheme]);
 
-  const showVersion = () => {
-    saveScrollHeight();
-    modal.info({
-      ...modalConfig,
-      width: 460,
-      content: <VersionInfo intl={intl} />,
-      onCancel: restoreScrollHeight
-    });
-  };
-
   const handleLogout = async () => {
     await logout();
     navigate(loginPath);
@@ -159,7 +144,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
     {
       key: 'site',
       icon: <HomeOutlined />,
-      label: 'GPUStack',
+      label: 'MesaStack',
       url: externalLinks.site
     },
     {
@@ -259,25 +244,20 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
 
   return (
     <Wrapper>
-      {contextHolder}
       <PluginExtraField name="OrgSwitcher" isDarkTheme={isDarkTheme} />
-      {process.env.ENABLE_ENTERPRISE !== 'true' && <GithubStar />}
       <div
         style={{
           display: 'flex',
           alignItems: 'center'
         }}
       >
-        <Button
-          type="text"
-          size="small"
-          onClick={showVersion}
+        <span
           style={{
             color: 'var(--ant-color-text-tertiary)'
           }}
         >
           {version.version}
-        </Button>
+        </span>
         {showUpgrade && (
           <NewLabel>
             <span className="text">

src/layouts/github-star.tsx

@@ -1,140 +0,0 @@
-import externalLinks from '@/constants/external-links';
-import { GithubFilled } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
-import { Tooltip } from 'antd';
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-const REPO = 'gpustack/gpustack';
-const CACHE_KEY = 'gpustack:github-stars';
-const CACHE_TTL = 24 * 60 * 60 * 1000;
-const FETCH_TIMEOUT = 4000;
-
-const StarLink = styled.a`
-  display: inline-flex;
-  align-items: stretch;
-  height: 24px;
-  border-radius: var(--ant-border-radius);
-  border: 1px solid var(--ant-color-border-secondary);
-  background-color: var(--ant-color-bg-container);
-  color: var(--ant-color-text-secondary);
-  font-size: 12px;
-  line-height: 1;
-  overflow: hidden;
-  transition:
-    border-color 0.2s,
-    color 0.2s;
-
-  &:hover {
-    border-color: var(--ant-color-border);
-    color: var(--ant-color-text);
-  }
-
-  .seg {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0 8px;
-  }
-
-  .seg + .seg {
-    border-left: 1px solid var(--ant-color-border-secondary);
-    background-color: var(--ant-color-fill-quaternary);
-  }
-
-  .anticon {
-    font-size: 13px;
-  }
-
-  .count {
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-    min-width: 1.5em;
-    text-align: center;
-  }
-`;
-
-const formatCount = (n: number): string => {
-  if (n >= 1000) {
-    const k = n / 1000;
-    return k >= 10 ? `${Math.round(k)}k` : `${k.toFixed(1)}k`;
-  }
-  return String(n);
-};
-
-type CacheEntry = { value: number; time: number };
-
-const readCache = (): CacheEntry | null => {
-  try {
-    const raw = localStorage.getItem(CACHE_KEY);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (typeof parsed?.value !== 'number' || typeof parsed?.time !== 'number') {
-      return null;
-    }
-    return parsed;
-  } catch {
-    return null;
-  }
-};
-
-const writeCache = (value: number) => {
-  try {
-    localStorage.setItem(
-      CACHE_KEY,
-      JSON.stringify({ value, time: Date.now() })
-    );
-  } catch {
-    // ignore quota errors
-  }
-};
-
-const GithubStar = () => {
-  const intl = useIntl();
-  const [count, setCount] = useState<number | null>(
-    () => readCache()?.value ?? null
-  );
-
-  useEffect(() => {
-    const cached = readCache();
-    const fresh = cached && Date.now() - cached.time < CACHE_TTL;
-    if (fresh) return;
-
-    const controller = new AbortController();
-    const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
-
-    fetch(`https://api.github.com/repos/${REPO}`, { signal: controller.signal })
-      .then((r) => (r.ok ? r.json() : null))
-      .then((data) => {
-        if (!data || typeof data.stargazers_count !== 'number') return;
-        setCount(data.stargazers_count);
-        writeCache(data.stargazers_count);
-      })
-      .catch(() => {
-        // offline, blocked, rate-limited — stay hidden if no cache
-      })
-      .finally(() => clearTimeout(timer));
-
-    return () => {
-      clearTimeout(timer);
-      controller.abort();
-    };
-  }, []);
-
-  return (
-    <Tooltip title={intl.formatMessage({ id: 'common.github.star.tooltip' })}>
-      <StarLink href={externalLinks.github} target="_blank" rel="noreferrer">
-        <span className="seg">
-          <GithubFilled />
-        </span>
-        <span className="seg">
-          <span className="count">
-            {count != null ? formatCount(count) : 'Star'}
-          </span>
-        </span>
-      </StarLink>
-    </Tooltip>
-  );
-};
-
-export default GithubStar;

src/layouts/header-menu.tsx

@@ -0,0 +1,128 @@
+import { IconFont } from '@gpustack/core-ui';
+import { Link, useLocation, useNavigate } from '@umijs/max';
+import { Menu } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { useMemo } from 'react';
+
+interface MenuItem {
+  icon?: string;
+  selectedIcon?: string;
+  defaultIcon?: string;
+  children?: MenuItem[];
+
+  [key: string]: any;
+}
+
+interface HeaderMenuProps {
+  menuData: MenuItem[];
+  initialState?: Global.InitialStateType;
+}
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    headerMenu: css`
+      flex: 1;
+      min-width: 0;
+      background: transparent;
+      border-bottom: none;
+      line-height: inherit;
+
+      &.ant-menu-horizontal {
+        border-bottom: none;
+      }
+      &.ant-menu-horizontal > .ant-menu-item::after,
+      &.ant-menu-horizontal > .ant-menu-submenu::after {
+        display: none;
+      }
+      .ant-menu-title-content {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .anticon {
+        font-size: 16px;
+      }
+    `
+  };
+});
+
+const isItemSelected = (item: MenuItem, pathname: string) => {
+  return (
+    pathname === item.path ||
+    (Array.isArray(item.subMenu) && item.subMenu.includes(pathname))
+  );
+};
+
+const HeaderMenu: React.FC<HeaderMenuProps> = (props) => {
+  const { menuData } = props;
+  const { styles } = useStyles();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const buildLeaf = (item: MenuItem) => {
+    const selected = isItemSelected(item, location.pathname);
+    return {
+      key: item.path as string,
+      label: (
+        <Link
+          prefetch="intent"
+          to={(item.path as string).replace('/*', '')}
+          target={item.target}
+        >
+          <span className="flex-center gap-8">
+            <IconFont
+              type={selected ? item.selectedIcon || '' : item.defaultIcon || ''}
+            />
+            <span>{item.name}</span>
+          </span>
+        </Link>
+      )
+    };
+  };
+
+  const items = useMemo(() => {
+    return menuData.map((item) => {
+      if (item.children && item.children.length > 0) {
+        return {
+          key: item.key,
+          label: item.name,
+          children: item.children.map((child) => buildLeaf(child))
+        };
+      }
+      return buildLeaf(item);
+    });
+  }, [menuData, location.pathname]);
+
+  const selectedKeys = useMemo(() => {
+    const keys: string[] = [];
+    for (const item of menuData) {
+      const leaves =
+        item.children && item.children.length > 0 ? item.children : [item];
+      for (const leaf of leaves) {
+        if (isItemSelected(leaf, location.pathname)) {
+          keys.push(leaf.path as string);
+        }
+      }
+    }
+    return keys;
+  }, [menuData, location.pathname]);
+
+  const handleClick = ({ key }: { key: string }) => {
+    if (key.startsWith('/')) {
+      navigate(key.replace('/*', ''));
+    }
+  };
+
+  return (
+    <Menu
+      className={styles.headerMenu}
+      mode="horizontal"
+      selectedKeys={selectedKeys}
+      items={items}
+      onClick={handleClick}
+      triggerSubMenuAction="hover"
+    />
+  );
+};
+
+export default HeaderMenu;

src/layouts/index.tsx

@@ -22,7 +22,7 @@ import {
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
 import { ProLayout } from '@ant-design/pro-components';
-import { CoreUIProvider, IconFont } from '@gpustack/core-ui';
+import { CoreUIProvider } from '@gpustack/core-ui';
 import {
   Access,
   Outlet,
@@ -39,18 +39,18 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
-import { Button, ConfigProvider, Modal, theme } from 'antd';
+import { ConfigProvider, Modal, theme } from 'antd';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
 import { useEffect, useMemo, useRef } from 'react';
 import { PageContainerInner } from '../pages/_components/page-box';
 import Exception from './Exception';
 import './Layout.css';
-import { LogoIcon, SLogoIcon } from './Logo';
+import { LogoIcon } from './Logo';
 import ErrorBoundary from './error-boundary';
 import { ExtraContent } from './extraRender';
+import HeaderMenu from './header-menu';
 import { patchRoutes } from './runtime';
-import SiderMenu from './sider-menu';
 
 // Pages that use the page container in the page
 const NO_CONTAINER_PAGES = [
@@ -133,7 +133,7 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 
 export default (props: any) => {
   const [, contextHolder] = Modal.useModal();
-  const { themeData, setUserSettings, userSettings } = useUserSettings();
+  const { themeData, userSettings } = useUserSettings();
   const [userInfo] = useAtom(userAtom);
   const [routeCache] = useAtom(routeCacheAtom);
   const location = useLocation();
@@ -238,13 +238,6 @@ export default (props: any) => {
 
   const coreUISlots = useMemo(() => ({ ExtraContent }), []);
 
-  const handleToggleCollapse = (e: any) => {
-    e.stopPropagation();
-    setUserSettings({
-      ...userSettings,
-      collapsed: !userSettings.collapsed
-    });
-  };
   const newRoutes = filterRoutes(
     // @ts-ignore
     clientRoutes.filter((route) => route.id === 'max-tabs'),
@@ -274,16 +267,19 @@ export default (props: any) => {
     return NO_CONTAINER_PAGES.includes(matchedRoute?.name as string);
   }, [matchedRoute]);
 
-  const collapsed = useMemo(() => {
-    return userSettings.collapsed || false;
-  }, [userSettings.collapsed]);
-
   const renderMenuHeader = (logo: React.ReactNode, title: React.ReactNode) => {
     return <>{logo}</>;
   };
 
-  const menuContentRender = (menuProps: any, defaultDom: React.ReactNode) => {
-    return <SiderMenu {...menuProps}></SiderMenu>;
+  const headerContentRender = (
+    headerProps: any,
+    defaultDom: React.ReactNode
+  ) => {
+    return <HeaderMenu {...headerProps}></HeaderMenu>;
+  };
+
+  const actionsRender = () => {
+    return <ExtraContent isDarkTheme={userSettings.isDarkTheme} />;
   };
 
   const onPageChange = async (route: any) => {
@@ -337,17 +333,6 @@ export default (props: any) => {
     navigate(pagepath);
   };
 
-  const onCollapse = (value: boolean) => {
-    // only trigger by window resize
-    if (!value) {
-      return;
-    }
-    setUserSettings({
-      ...userSettings,
-      collapsed: value
-    });
-  };
-
   return (
     <ConfigProvider
       componentSize="large"
@@ -408,48 +393,27 @@ export default (props: any) => {
         <DarkMask></DarkMask>
         <ProLayout
           fixSiderbar
-          fixedHeader={false}
-          headerRender={false}
+          fixedHeader
           breadcrumbRender={false}
           route={route}
           location={location}
           title={userConfig.title}
           navTheme={userSettings.theme}
-          layout="side"
+          layout="top"
           contentStyle={{
             paddingBlock: 0,
             paddingInline: 0
           }}
-          openKeys={false}
           disableMobile={true}
-          siderWidth={220}
-          menuFooterRender={() => (
-            <Button
-              style={{
-                border: 'none'
-              }}
-              size="small"
-              type={'text'}
-              onClick={handleToggleCollapse}
-            >
-              <IconFont
-                type={collapsed ? 'icon-expand-left' : 'icon-expand-right'}
-                className="font-size-18"
-              />
-            </Button>
-          )}
-          onCollapse={onCollapse}
           onMenuHeaderClick={onMenuHeaderClick}
-          collapsed={userSettings.collapsed}
           onPageChange={onPageChange}
           formatMessage={formatMessage}
           menu={{
-            locale: true,
-            type: 'group'
+            locale: true
           }}
-          splitMenus={true}
-          logo={userSettings.collapsed ? <SLogoIcon /> : <LogoIcon />}
-          menuContentRender={menuContentRender}
+          logo={<LogoIcon />}
+          headerContentRender={headerContentRender}
+          actionsRender={actionsRender}
           {...runtimeConfig}
           ErrorBoundary={ErrorBoundary}
         >
@@ -457,7 +421,7 @@ export default (props: any) => {
             style={{
               display: 'flex',
               flexDirection: 'column',
-              height: '100vh',
+              height: '100%',
               overflow: 'hidden'
             }}
           >

src/layouts/rightRender.tsx

@@ -82,7 +82,7 @@ export const getRightRenderContent = (opts: {
     {
       key: 'site',
       icon: <HomeOutlined />,
-      label: 'GPUStack',
+      label: 'MesaStack',
       url: externalLinks.site
     },
     {

src/locales/en-US/billing.ts

@@ -1,7 +1,7 @@
 export default {
   'billing.upsell.title': 'Billing is an Enterprise feature',
   'billing.upsell.subtitle':
-    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
+    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to MesaStack Enterprise to manage billing.',
   'billing.upsell.featuresTitle': 'What you get in Enterprise',
   'billing.upsell.feature.usage':
     'See cost breakdowns by organization, user, and model',

src/locales/en-US/clusters.ts

@@ -85,7 +85,7 @@ export default {
   'clusters.addworker.detectWorkerAddress.tips':
     'Defaults to Worker IP if not specified.',
   'clusters.addworker.externalIP.tips':
-    'If running in a VPC or private network, please specify the Worker external address reachable by the GPUStack Server.',
+    'If running in a VPC or private network, please specify the Worker external address reachable by the MesaStack Server.',
   'clusters.addworker.enterWorkerIP': 'Enter worker IP',
   'clusters.addworker.enterWorkerIP.error': 'Please enter the worker IP.',
   'clusters.addworker.enterWorkerAddress': 'Enter worker external address',
@@ -113,20 +113,20 @@ export default {
     '{count} new worker has been added to the cluster.',
   'clusters.addworker.message.success_multiple':
     '{count} new workers have been added to the cluster.',
-  'clusters.create.serverUrl': 'GPUStack Server URL',
+  'clusters.create.serverUrl': 'MesaStack Server URL',
   'clusters.create.workerConfig': 'Worker Configuration',
   'clusters.edit.k8sOptions.changed.tip':
     'You have changed the Kubernetes options. Re-run the registration command on the target cluster for the changes to take effect.',
   'clusters.addworker.containerName': 'Worker Container Name',
   'clusters.addworker.containerName.tips':
     'Specify a name for the worker container.',
-  'clusters.addworker.dataVolume': 'GPUStack Data Volume',
+  'clusters.addworker.dataVolume': 'MesaStack Data Volume',
   'clusters.addworker.dataVolume.tips':
-    'Specify a data storage path for GPUStack.',
+    'Specify a data storage path for MesaStack.',
   'clusters.table.ip.internal': 'Internal',
   'clusters.table.ip.external': 'External',
   'clusters.form.serverUrl.tips':
-    'Specify an externally accessible GPUStack service URL if the worker cannot access GPUStack Server directly.',
+    'Specify an externally accessible MesaStack service URL if the worker cannot access MesaStack Server directly.',
   'clusters.form.setDefault': 'Set as Default',
   'clusters.form.setDefault.tips': 'Default for deployment.',
   'clusters.addworker.noClusters': 'No available Docker clusters found',
@@ -144,7 +144,7 @@ export default {
   'clusters.addworker.theadNotes-02':
     'T-Head PPU uses the Container Device Interface (CDI) for device injection and requires the <span class="bold-text">/var/run/cdi</span> directory to be available for CDI generation.',
   'clusters.addworker.nvidiaNotes':
-    'The built-in inference backends in GPUStack require <span class="bold-text">CUDA 12.8+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">570</span> or newer.',
+    'The built-in inference backends in MesaStack require <span class="bold-text">CUDA 12.8+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">570</span> or newer.',
   'clusters.volume.title': 'Volume Mounts',
   'clusters.volume.name': 'Volume Name',
   'clusters.volume.mountPath': 'Container Path',
@@ -171,7 +171,7 @@ export default {
   'clusters.volume.add': 'Add Volume Mount',
   'clusters.systemDefaultContainerRegistry.title': 'Default Container Registry',
   'clusters.systemDefaultContainerRegistry.tip':
-    'Default registry used to resolve GPUStack images for this cluster. Falls back to the server default when unset.',
+    'Default registry used to resolve MesaStack images for this cluster. Falls back to the server default when unset.',
   'clusters.k8sOptions.title': 'Kubernetes Deployment Options',
   'clusters.imageCredentials.title': 'Image Credentials',
   'clusters.imageCredentials.add': 'Add Credential',
@@ -183,7 +183,7 @@ export default {
     'Pod nodeSelector applied to every worker DaemonSet — only nodes whose labels match are eligible to run the worker.',
   'clusters.operatorImage.title': 'Operator Image',
   'clusters.operatorImage.tip':
-    'Override for the GPUStack Operator container image. Leave empty to use the server default.',
+    'Override for the MesaStack Operator container image. Leave empty to use the server default.',
   'clusters.namespace.title': 'Namespace',
   'clusters.namespace.tip':
     'Kubernetes namespace the cluster’s manifests render into. Leave empty to use gpustack-system.',

src/locales/en-US/common.ts

@@ -46,7 +46,7 @@ export default {
   'common.button.enabled': 'Enabled',
   'common.button.disabled': 'Disabled',
   'common.button.upgrade': 'Upgrade',
-  'common.enterprise.feature': 'Available in GPUStack Enterprise',
+  'common.enterprise.feature': 'Available in MesaStack Enterprise',
   'common.input.holder': 'Please enter',
   'common.validate.value': '{name} value is required',
   'common.button.edit': 'Edit',
@@ -198,6 +198,8 @@ export default {
   'common.table.user': 'User',
   'common.settings.instructions': 'Instructions',
   'common.settings.language': 'Language',
+  'common.settings.language.tips':
+    'Set the display language for the interface.',
   'common.delete.confirm':
     'Are you sure you want to delete the selected {type}?',
   'common.delete.single.confirm':
@@ -212,7 +214,7 @@ export default {
   'common.form.password': 'Password',
   'common.form.username': 'Username',
   'common.login.rember': 'Remember me',
-  'settings.company': 'GPUStack.ai',
+  'settings.company': 'MesaStack',
   'common.button.help': 'Help',
   'common.button.feedback': 'Feedback',
   'common.button.docs': 'Documentation',
@@ -251,6 +253,11 @@ export default {
   'common.appearance.tips': 'Default follows system preference.',
   'common.button.forgotpassword': 'Forgot password?',
   'common.appearance.theme': 'Theme',
+  'common.appearance.description':
+    'Customize how the interface looks on your device.',
+  'common.security': 'Security',
+  'common.security.description':
+    'Manage the password used to sign in to your account.',
   'common.page.wentwrong': 'Something went wrong.',
   'common.page.refresh.tips':
     'The page may need to be updated. Try refreshing it!',

src/locales/en-US/gpuservice.ts

@@ -81,6 +81,8 @@ export default {
   'gpuservice.publicKey': 'SSH Public Key',
   'gpuservice.publicKey.add': 'Add SSH Public Key',
   'gpuservice.publicKey.edit': 'Edit SSH Public Key',
+  'gpuservice.publicKey.delete.tips':
+    'Deleting an SSH Public Key will not revoke access for existing attached Instances. To remove access, edit those Instances separately.',
   'gpuservice.publicKey.filter.name': 'Search by name',
   'gpuservice.publicKey.label': 'SSH Public Key',
   'gpuservice.instance.ssh.enable': 'Enable SSH Access',

src/locales/en-US/models.ts

@@ -14,7 +14,7 @@ export default {
   'models.form.env': 'Environment Variables',
   'models.form.configurations': 'Configurations',
   'models.form.s3address': 'S3 Address',
-  'models.form.partialoffload.tips': `When CPU offloading is enabled, GPUStack will allocate CPU memory if GPU resources are insufficient. You must correctly configure the inference backend to use hybrid CPU+GPU or full CPU inference.`,
+  'models.form.partialoffload.tips': `When CPU offloading is enabled, MesaStack will allocate CPU memory if GPU resources are insufficient. You must correctly configure the inference backend to use hybrid CPU+GPU or full CPU inference.`,
   'models.form.distribution.tips': `Allows for offloading part of the model's layers to single or multiple remote workers when the resources of a worker are insufficient.`,
   'models.openinplayground': 'Open in Playground',
   'models.instances': 'instances',
@@ -24,7 +24,7 @@ export default {
   'model.deploy.sort': 'Sort',
   'model.deploy.search.placeholder': 'Type <kbd>/</kbd> to search models',
   'model.form.ollamatips':
-    'Tip: The following are the preconfigured Ollama models in GPUStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.',
+    'Tip: The following are the preconfigured Ollama models in MesaStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.',
   'models.sort.name': 'Name',
   'models.sort.size': 'Size',
   'models.sort.likes': 'Likes',
@@ -87,7 +87,7 @@ export default {
   'models.form.filePath': 'Model Path',
   'models.form.backendVersion': 'Backend Version',
   'models.form.backendVersion.tips':
-    'To use the desired version of {backend}{version}, the system will automatically create a virtual environment in the online environment to install the corresponding version. After a GPUStack upgrade, the backend version will remain fixed. {link}',
+    'To use the desired version of {backend}{version}, the system will automatically create a virtual environment in the online environment to install the corresponding version. After a MesaStack upgrade, the backend version will remain fixed. {link}',
   'models.form.gpuselector': 'GPU Selector',
   'models.form.backend.llamabox':
     'For GGUF format models, supports Linux, macOS, and Windows.',
@@ -277,7 +277,7 @@ export default {
   'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`,
   'models.catalog.nogpus.tips':
     'No compatible GPUs are available in the selected cluster for this model.',
-  'models.form.modelfile.notfound': `The model file path you specified does not exist on the GPUStack server. It's recommended to place the model file at the same path on both the GPUStack server and GPUStack workers. This helps GPUStack make better decisions.`,
+  'models.form.modelfile.notfound': `The model file path you specified does not exist on the MesaStack server. It's recommended to place the model file at the same path on both the MesaStack server and MesaStack workers. This helps MesaStack make better decisions.`,
   'models.form.readyWorkers': 'workers ready',
   'models.form.maxContextLength': 'Maximum Context Length',
   'models.form.backend.helperText':

src/locales/en-US/organizations.ts

@@ -1,7 +1,7 @@
 export default {
   'organizations.upsell.title': 'Organizations are an Enterprise feature',
   'organizations.upsell.subtitle':
-    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to GPUStack Enterprise to manage organizations.',
+    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to MesaStack Enterprise to manage organizations.',
   'organizations.upsell.featuresTitle': 'What you get in Enterprise',
   'organizations.upsell.feature.orgs':
     'Create organizations to group users and isolate workloads',

src/locales/en-US/resources.ts

@@ -52,7 +52,7 @@ export default {
   'resources.worker.container.supported': 'Do not support macOS or Windows.',
   'resources.worker.current.version': 'Current version is {version}.',
   'resources.worker.driver.install':
-    'Install <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">required drivers and libraries</a> prior to GPUStack installation.',
+    'Install <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">required drivers and libraries</a> prior to MesaStack installation.',
   'resources.worker.select.command':
     'Select a label to generate the command and copy it using the copy button.',
   'resources.worker.script.install': 'Script Installation',
@@ -89,7 +89,7 @@ export default {
     'Paste the <span class="bold-text">Token</span>.',
   'resources.register.worker.step7':
     'Click <span class="bold-text">Restart</span> to apply the settings.',
-  'resources.register.install.title': 'Install GPUStack on {os}',
+  'resources.register.install.title': 'Install MesaStack on {os}',
   'resources.register.download':
     'Download and install the <a href={url} target="_blank">installer</a>. Only supported: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
@@ -111,7 +111,7 @@ export default {
     'No available clusters. Please create a cluster before adding a node.',
   'resources.metrics.details': 'Monitoring',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.',
+    'Please upgrade to match the MesaStack Server version.',
   'resources.worker.version': 'Worker Version: {version}',
   'resources.server.version': 'Server Version: {version}',
   'resources.worker.currentVersion': 'Current Version: {version}',

src/locales/en-US/users.ts

@@ -28,16 +28,18 @@ export default {
   'users.password.modify.title': 'Modify Password',
   'users.password.modify.description':
     "For your account's security, please change your initial password.",
+  'users.password.modify.tips':
+    'Regularly updating your password helps keep your account secure.',
   'users.password.confirm': 'Confirm New Password',
   'users.password.confirm.empty': 'Please confirm the new password.',
   'users.password.confirm.error': 'The two passwords entered do not match.',
   'users.login.title': 'Log in to',
-  'users.version.islatest': 'GPUStack {version} is the latest version',
-  'users.version.update': 'GPUStack {version} is available',
+  'users.version.islatest': 'MesaStack {version} is the latest version',
+  'users.version.update': 'MesaStack {version} is available',
   'users.settings.title': 'User Settings',
   'users.status.activate': 'Activate Account',
   'users.status.deactivate': 'Deactivate Account',
   'users.status.inactiveAccount': 'Inactive Account',
   'users.login.getInitialPassword':
-    'Run the following command on your GPUStack Server to retrieve the initial admin password.'
+    'Run the following command on your MesaStack Server to retrieve the initial admin password.'
 };

src/locales/ja-JP/billing.ts

@@ -1,7 +1,7 @@
 export default {
   'billing.upsell.title': 'Billing is an Enterprise feature',
   'billing.upsell.subtitle':
-    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
+    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to MesaStack Enterprise to manage billing.',
   'billing.upsell.featuresTitle': 'What you get in Enterprise',
   'billing.upsell.feature.usage':
     'See cost breakdowns by organization, user, and model',

src/locales/ja-JP/clusters.ts

@@ -113,20 +113,20 @@ export default {
     '{count} new worker has been added to the cluster.',
   'clusters.addworker.message.success_multiple':
     '{count} new workers have been added to the cluster.',
-  'clusters.create.serverUrl': 'GPUStack Server URL',
+  'clusters.create.serverUrl': 'MesaStack Server URL',
   'clusters.create.workerConfig': 'Worker Configuration',
   'clusters.edit.k8sOptions.changed.tip':
     'Kubernetes オプションを変更しました。変更を有効にするには、対象クラスターで登録コマンドを再実行してください。',
   'clusters.addworker.containerName': 'Worker Container Name',
   'clusters.addworker.containerName.tips':
     'Specify a name for the worker container.',
-  'clusters.addworker.dataVolume': 'GPUStack Data Volume',
+  'clusters.addworker.dataVolume': 'MesaStack Data Volume',
   'clusters.addworker.dataVolume.tips':
-    'Specify a data storage path for GPUStack.',
+    'Specify a data storage path for MesaStack.',
   'clusters.table.ip.internal': 'Internal',
   'clusters.table.ip.external': 'External',
   'clusters.form.serverUrl.tips':
-    'Specify an externally accessible GPUStack service URL if the worker cannot access GPUStack Server directly.',
+    'Specify an externally accessible MesaStack service URL if the worker cannot access MesaStack Server directly.',
   'clusters.form.setDefault': 'Set as Default',
   'clusters.form.setDefault.tips': 'Default for deployment.',
   'clusters.addworker.noClusters': 'No available Docker clusters found',
@@ -144,7 +144,7 @@ export default {
   'clusters.addworker.theadNotes-02':
     'T-Head PPU uses the Container Device Interface (CDI) for device injection and requires the <span class="bold-text">/var/run/cdi</span> directory to be available for CDI generation.',
   'clusters.addworker.nvidiaNotes':
-    'The built-in inference backends in GPUStack require <span class="bold-text">CUDA 12.8+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">570</span> or newer.',
+    'The built-in inference backends in MesaStack require <span class="bold-text">CUDA 12.8+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">570</span> or newer.',
   'clusters.volume.title': 'Volume Mounts',
   'clusters.volume.name': 'Volume Name',
   'clusters.volume.mountPath': 'Container Path',
@@ -171,7 +171,7 @@ export default {
   'clusters.volume.add': 'Add Volume Mount',
   'clusters.systemDefaultContainerRegistry.title': 'Default Container Registry',
   'clusters.systemDefaultContainerRegistry.tip':
-    'Default registry used to resolve GPUStack images for this cluster. Falls back to the server default when unset.',
+    'Default registry used to resolve MesaStack images for this cluster. Falls back to the server default when unset.',
   'clusters.k8sOptions.title': 'Kubernetes Deployment Options',
   'clusters.imageCredentials.title': 'Image Credentials',
   'clusters.imageCredentials.add': 'Add Credential',
@@ -183,7 +183,7 @@ export default {
     'Pod nodeSelector applied to every worker DaemonSet — only nodes whose labels match are eligible to run the worker.',
   'clusters.operatorImage.title': 'Operator Image',
   'clusters.operatorImage.tip':
-    'Override for the GPUStack Operator container image. Leave empty to use the server default.',
+    'Override for the MesaStack Operator container image. Leave empty to use the server default.',
   'clusters.namespace.title': 'Namespace',
   'clusters.namespace.tip':
     'Kubernetes namespace the cluster’s manifests render into. Leave empty to use gpustack-system.',
@@ -276,15 +276,15 @@ export default {
 // 73. 'clusters.addworker.cacheVolume.holder': 'e.g. /data/cache (path must start with /)',
 // 74. 'clusters.addworker.message.success_single': '{count} new worker has been added to the cluster.',
 // 75. 'clusters.addworker.message.success_multiple': '{count} new workers have been added to the cluster.',
-// 76. 'clusters.create.serverUrl': 'GPUStack Server URL',
+// 76. 'clusters.create.serverUrl': 'MesaStack Server URL',
 // 77.  'clusters.create.workerConfig': 'Worker Configuration'
 // 78.  'clusters.addworker.containerName': 'Worker Container Name',
 // 79.  'clusters.addworker.containerName.tips':'Specify a name for the worker container.',
-// 77. 'clusters.addworker.dataVolume': 'GPUStack Data Volume',
-// 78.  'clusters.addworker.dataVolume.tips': 'Specify a data storage path for GPUStack.',
+// 77. 'clusters.addworker.dataVolume': 'MesaStack Data Volume',
+// 78.  'clusters.addworker.dataVolume.tips': 'Specify a data storage path for MesaStack.',
 // 79.  'clusters.table.ip.internal': 'Internal',
 // 80.  'clusters.table.ip.external': 'External',
-// 81.  'clusters.form.serverUrl.tips': 'Specify an externally accessible GPUStack service URL if the worker cannot access GPUStack Server directly.',
+// 81.  'clusters.form.serverUrl.tips': 'Specify an externally accessible MesaStack service URL if the worker cannot access MesaStack Server directly.',
 // 82. 'clusters.addworker.externalIP.tips': 'Specify an external IP if the worker is in a VPC or private network.',
 // 83. 'clusters.form.setDefault': 'Set as Default',
 // 84. 'clusters.form.setDefault.tips': 'Default for deployment',
@@ -300,5 +300,5 @@ export default {
 // 94. 'clusters.create.steps.configure': 'Configure',
 // 99. 'clusters.addworker.theadNotes': 'If the <span class="bold-text>/usr/local/PPU_SDK</span> directory does not exist, please create a symbolic link pointing to the T-Head PPU SDK installed path: <span class="bold-text>ln -s /path/to/PPU_SDK /usr/local/PPU_SDK</span>',
 // 100. 'clusters.addworker.theadNotes-02': 'T-Head PPU uses the Container Device Interface (CDI) for device injection and requires the <span class="bold-text">/var/run/cdi</span> directory to be available for CDI generation.',
-// 101. 'clusters.addworker.nvidiaNotes': 'The built-in inference backends in GPUStack v2.1 require <span class="bold-text">CUDA 12.6+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">560</span> or newer.'
+// 101. 'clusters.addworker.nvidiaNotes': 'The built-in inference backends in MesaStack v2.1 require <span class="bold-text">CUDA 12.6+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">560</span> or newer.'
 // ========== End of To-Do List ==========

src/locales/ja-JP/common.ts

@@ -46,7 +46,7 @@ export default {
   'common.button.enabled': '有効',
   'common.button.disabled': '無効',
   'common.button.upgrade': 'アップグレード',
-  'common.enterprise.feature': 'Available in GPUStack Enterprise',
+  'common.enterprise.feature': 'Available in MesaStack Enterprise',
   'common.input.holder': '入力してください',
   'common.validate.value': '{name} の値は必須です',
   'common.button.edit': '編集',
@@ -199,6 +199,7 @@ export default {
   'common.table.user': 'ユーザー',
   'common.settings.instructions': '手順',
   'common.settings.language': '言語',
+  'common.settings.language.tips': 'インターフェースの表示言語を設定します。',
   'common.delete.confirm': '選択した {type} を削除してもよろしいですか？',
   'common.delete.single.confirm':
     '<span style="font-size: 13px;font-weight: 700">{name}</span> を削除してもよろしいですか？',
@@ -212,7 +213,7 @@ export default {
   'common.form.password': 'パスワード',
   'common.form.username': 'ユーザー名',
   'common.login.rember': 'ログイン状態を保持',
-  'settings.company': 'GPUStack.ai',
+  'settings.company': 'MesaStack',
   'common.button.help': 'ヘルプ',
   'common.button.feedback': 'フィードバック',
   'common.button.docs': 'ドキュメント',
@@ -251,6 +252,11 @@ export default {
   'common.appearance.tips': 'Default follows system preference.',
   'common.button.forgotpassword': 'Forgot password?',
   'common.appearance.theme': 'Theme',
+  'common.appearance.description':
+    'デバイス上でのインターフェースの表示をカスタマイズします。',
+  'common.security': 'セキュリティ',
+  'common.security.description':
+    'アカウントへのログインに使用するパスワードを管理します。',
   'common.page.wentwrong': 'Something went wrong.',
   'common.page.refresh.tips':
     'The page may need to be updated. Try refreshing it!',

src/locales/ja-JP/gpuservice.ts

@@ -80,6 +80,8 @@ export default {
   'gpuservice.publicKey': 'SSH 公開鍵',
   'gpuservice.publicKey.add': 'SSH 公開鍵を追加',
   'gpuservice.publicKey.edit': 'SSH 公開鍵を編集',
+  'gpuservice.publicKey.delete.tips':
+    'SSH 公開鍵を削除しても、既にアタッチされているインスタンスのアクセス権は取り消されません。アクセス権を削除するには、対象のインスタンスを個別に編集してください。',
   'gpuservice.publicKey.filter.name': '名前で検索',
   'gpuservice.publicKey.label': 'SSH 公開鍵',
   'gpuservice.instance.ssh.enable': 'SSH アクセスを有効化',

src/locales/ja-JP/models.ts

@@ -14,7 +14,7 @@ export default {
   'models.form.env': '環境変数',
   'models.form.configurations': '設定',
   'models.form.s3address': 'S3アドレス',
-  'models.form.partialoffload.tips': `When CPU offloading is enabled, GPUStack will allocate CPU memory if GPU resources are insufficient. You must correctly configure the inference backend to use hybrid CPU+GPU or full CPU inference.`,
+  'models.form.partialoffload.tips': `When CPU offloading is enabled, MesaStack will allocate CPU memory if GPU resources are insufficient. You must correctly configure the inference backend to use hybrid CPU+GPU or full CPU inference.`,
   'models.form.distribution.tips':
     'ワーカーのリソースが不足している場合、モデルの一部のレイヤーを単一または複数のリモートワーカーにオフロードすることができます。',
   'models.openinplayground': 'プレイグラウンドで開く',
@@ -25,7 +25,7 @@ export default {
   'model.deploy.sort': '並び替え',
   'model.deploy.search.placeholder': '<kbd>/</kbd>を入力してモデルを検索',
   'model.form.ollamatips':
-    'ヒント: 以下はGPUStackで事前設定されたOllamaモデルです。希望するモデルを選択するか、右側の【{name}】入力ボックスにデプロイしたいモデルを直接入力してください。',
+    'ヒント: 以下はMesaStackで事前設定されたOllamaモデルです。希望するモデルを選択するか、右側の【{name}】入力ボックスにデプロイしたいモデルを直接入力してください。',
   'models.sort.name': '名前',
   'models.sort.size': 'サイズ',
   'models.sort.likes': 'いいね',
@@ -88,7 +88,7 @@ export default {
   'models.form.filePath': 'モデルパス',
   'models.form.backendVersion': 'バックエンドバージョン',
   'models.form.backendVersion.tips':
-    '希望する{backend}{version}バージョンを使用するには、システムがオンライン環境で対応するバージョンをインストールする仮想環境を自動的に作成します。GPUStackのアップグレード後もバックエンドバージョンは固定されます。{link}',
+    '希望する{backend}{version}バージョンを使用するには、システムがオンライン環境で対応するバージョンをインストールする仮想環境を自動的に作成します。MesaStackのアップグレード後もバックエンドバージョンは固定されます。{link}',
   'models.form.gpuselector': 'GPUセレクター',
   'models.form.backend.llamabox':
     'GGUF形式のモデル用（Linux、macOS、Windowsをサポート）。',
@@ -277,7 +277,7 @@ export default {
   'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`,
   'models.catalog.nogpus.tips':
     'No compatible GPUs are available in the selected cluster for this model.',
-  'models.form.modelfile.notfound': `The model file path you specified does not exist on the GPUStack server. It's recommended to place the model file at the same path on both the GPUStack server and GPUStack workers. This helps GPUStack make better decisions.`,
+  'models.form.modelfile.notfound': `The model file path you specified does not exist on the MesaStack server. It's recommended to place the model file at the same path on both the MesaStack server and MesaStack workers. This helps MesaStack make better decisions.`,
   'models.form.readyWorkers': 'workers ready',
   'models.form.maxContextLength': 'Maximum Context Length',
   'models.form.backend.helperText':
@@ -381,7 +381,7 @@ export default {
 // 62. 'models.form.backend_parameters.vllm.tips': 'For more details about {backend} parameters, see <a href={link} target="_blank">here</a>.',
 // 63. 'models.button.accessSettings.tips': 'Changes to access settings take effect after one minute.',
 // 64.  'models.table.userSelection.tips': 'Admin users can access all models by default.',
-// 65. 'models.form.partialoffload.tips': `When CPU offloading is enabled, GPUStack will allocate CPU memory if GPU resources are insufficient. You must correctly configure the inference backend to use hybrid CPU+GPU or full CPU inference.`,
+// 65. 'models.form.partialoffload.tips': `When CPU offloading is enabled, MesaStack will allocate CPU memory if GPU resources are insufficient. You must correctly configure the inference backend to use hybrid CPU+GPU or full CPU inference.`,
 // 66. 'models.form.backend.warning': 'The selected backend does not support GGUF models. Please add a backend with GGUF support in the Inference Backend.',
 // 67.  'models.form.backend.warning.gguf': 'Please ensure that the selected custom backend supports GGUF models.',,
 // 68. 'models.form.backendVersion.deprecated': 'Deprecated',
@@ -390,7 +390,7 @@ export default {
 // 71.'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.',
 // 72. 'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`,
 // 73. 'models.catalog.nogpus.tips': 'No compatible GPUs are available in the selected cluster for this model.',
-// 74. 'models.form.modelfile.notfound': `The model file path you specified does not exist on the GPUStack server. It's recommended to place the model file at the same path on both the GPUStack server and GPUStack workers. This helps GPUStack make better decisions.`,
+// 74. 'models.form.modelfile.notfound': `The model file path you specified does not exist on the MesaStack server. It's recommended to place the model file at the same path on both the MesaStack server and MesaStack workers. This helps MesaStack make better decisions.`,
 // 75. 'models.form.readyWorkers': 'workers ready',
 // 76. 'models.form.maxContextLength': 'Maximum Context Length',
 // 77. 'models.form.backend.helperText': 'Not enabled yet. Will be enabled after deployment. ',

src/locales/ja-JP/organizations.ts

@@ -1,7 +1,7 @@
 export default {
   'organizations.upsell.title': 'Organizations are an Enterprise feature',
   'organizations.upsell.subtitle':
-    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to GPUStack Enterprise to manage organizations.',
+    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to MesaStack Enterprise to manage organizations.',
   'organizations.upsell.featuresTitle': 'What you get in Enterprise',
   'organizations.upsell.feature.orgs':
     'Create organizations to group users and isolate workloads',

src/locales/ja-JP/resources.ts

@@ -52,7 +52,7 @@ export default {
     'MacOSまたはWindowsはサポートされていません。',
   'resources.worker.current.version': '現在のバージョンは {version} です。',
   'resources.worker.driver.install':
-    '<a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">必要なドライバとライブラリ</a> をGPUStackのインストール前にインストールしてください。',
+    '<a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">必要なドライバとライブラリ</a> をMesaStackのインストール前にインストールしてください。',
   'resources.worker.select.command':
     'ラベルを選択してコマンドを生成し、コピーを使用してコマンドをコピーします。',
   'resources.worker.script.install': 'スクリプトインストール',
@@ -89,7 +89,7 @@ export default {
     'Paste the <span class="bold-text">Token</span>.',
   'resources.register.worker.step7':
     'Click <span class="bold-text">Restart</span> to apply the settings.',
-  'resources.register.install.title': 'Install GPUStack on {os}',
+  'resources.register.install.title': 'Install MesaStack on {os}',
   'resources.register.download':
     'Download and install the <a href={url} target="_blank">installer</a>. Only supported: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
@@ -112,7 +112,7 @@ export default {
     'No available clusters. Please create a cluster before adding a node.',
   'resources.metrics.details': 'Monitoring',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.',
+    'Please upgrade to match the MesaStack Server version.',
   'resources.worker.version': 'Worker Version: {version}',
   'resources.server.version': 'Server Version: {version}',
   'resources.worker.currentVersion': 'Current Version: {version}',
@@ -128,7 +128,7 @@ export default {
 // 5. 'resources.register.worker.step5': 'Enter the <span class="bold-text">Server URL</span>: {url}.',
 // 6. 'resources.register.worker.step6': 'Paste the <span class="bold-text">Token</span>.',
 // 7. 'resources.register.worker.step7': 'Click <span class="bold-text">Restart</span> to apply the settings.',
-// 8. 'resources.register.install.title': 'Install GPUStack on {os}',
+// 8. 'resources.register.install.title': 'Install MesaStack on {os}',
 // 9. 'resources.register.download':'Download and install the <a>installer</a>. Only supported: {versions}.',
 // 10. 'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
 // 11. 'resource.register.windows.support': 'win 10, win 11',
@@ -145,5 +145,5 @@ export default {
 // 22. 'resources.worker.maintenance.remark.rules': 'Please enter maintenance remarks',
 // 23. 'resources.worker.maintenance.tips': 'When maintenance mode is enabled, the node will stop scheduling new model deployment tasks. Running instances will not be affected.',
 // 24. 'resources.worker.noCluster.tips': 'No available clusters. Please create a cluster before adding a node.'
-// 25. 'resoureces.worker.upgrade.tips': 'Please upgrade to match the GPUStack Server version.'
+// 25. 'resoureces.worker.upgrade.tips': 'Please upgrade to match the MesaStack Server version.'
 // ========== End of To-Do List ==========

src/locales/ja-JP/users.ts

@@ -29,18 +29,20 @@ export default {
   'users.password.modify.title': 'パスワードを変更',
   'users.password.modify.description':
     'アカウントのセキュリティのため、初期パスワードを変更してください。',
+  'users.password.modify.tips':
+    'パスワードを定期的に更新すると、アカウントの安全を保てます。',
   'users.password.confirm': '新しいパスワードを確認',
   'users.password.confirm.empty': '新しいパスワードを確認してください。',
   'users.password.confirm.error': '入力された2つのパスワードが一致しません。',
   'users.login.title': 'ログイン',
-  'users.version.islatest': 'GPUStack {version} は最新バージョンです',
-  'users.version.update': 'GPUStack {version} が利用可能です',
+  'users.version.islatest': 'MesaStack {version} は最新バージョンです',
+  'users.version.update': 'MesaStack {version} が利用可能です',
   'users.settings.title': 'User Settings',
   'users.status.activate': 'Activate Account',
   'users.status.deactivate': 'Deactivate Account',
   'users.status.inactiveAccount': 'Inactive Account',
   'users.login.getInitialPassword':
-    'Run the following command on your GPUStack Server to retrieve the initial admin password.'
+    'Run the following command on your MesaStack Server to retrieve the initial admin password.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -48,5 +50,5 @@ export default {
 // 2. 'users.status.activate': 'Activate Account',
 // 3. 'users.status.deactivate': 'Deactivate Account',
 // 4. 'users.status.inactiveAccount': 'Inactive Account',
-// 5. 'users.login.getInitialPassword': 'Run the following command on your GPUStack Server to retrieve the initial admin password.'
+// 5. 'users.login.getInitialPassword': 'Run the following command on your MesaStack Server to retrieve the initial admin password.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/billing.ts

@@ -1,7 +1,7 @@
 export default {
   'billing.upsell.title': 'Billing is an Enterprise feature',
   'billing.upsell.subtitle':
-    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
+    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to MesaStack Enterprise to manage billing.',
   'billing.upsell.featuresTitle': 'What you get in Enterprise',
   'billing.upsell.feature.usage':
     'See cost breakdowns by organization, user, and model',

src/locales/ru-RU/clusters.ts

@@ -113,20 +113,20 @@ export default {
     '{count} новый воркер был добавлен в кластер.',
   'clusters.addworker.message.success_multiple':
     '{count} новых воркеров были добавлены в кластер.',
-  'clusters.create.serverUrl': 'URL сервера GPUStack',
+  'clusters.create.serverUrl': 'URL сервера MesaStack',
   'clusters.create.workerConfig': 'Конфигурация воркера',
   'clusters.edit.k8sOptions.changed.tip':
     'Вы изменили параметры Kubernetes. Чтобы изменения вступили в силу, повторно выполните команду регистрации в целевом кластере.',
   'clusters.addworker.containerName': 'Имя контейнера воркера',
   'clusters.addworker.containerName.tips':
     'Укажите имя для контейнера воркера.',
-  'clusters.addworker.dataVolume': 'Том данных GPUStack',
+  'clusters.addworker.dataVolume': 'Том данных MesaStack',
   'clusters.addworker.dataVolume.tips':
-    'Укажите путь для хранения данных GPUStack.',
+    'Укажите путь для хранения данных MesaStack.',
   'clusters.table.ip.internal': 'Внутренний',
   'clusters.table.ip.external': 'Внешний',
   'clusters.form.serverUrl.tips':
-    'Если рабочий узел не может напрямую получить доступ к GPUStack Server, укажите внешний URL службы GPUStack Server.',
+    'Если рабочий узел не может напрямую получить доступ к MesaStack Server, укажите внешний URL службы MesaStack Server.',
   'clusters.form.setDefault': 'Установить по умолчанию',
   'clusters.form.setDefault.tips':
     'Использовать по умолчанию для развертывания.',
@@ -145,7 +145,7 @@ export default {
   'clusters.addworker.theadNotes-02':
     'T-Head PPU uses the Container Device Interface (CDI) for device injection and requires the <span class="bold-text">/var/run/cdi</span> directory to be available for CDI generation.',
   'clusters.addworker.nvidiaNotes':
-    'The built-in inference backends in GPUStack require <span class="bold-text">CUDA 12.8+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">570</span> or newer.',
+    'The built-in inference backends in MesaStack require <span class="bold-text">CUDA 12.8+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">570</span> or newer.',
   'clusters.volume.title': 'Volume Mounts',
   'clusters.volume.name': 'Volume Name',
   'clusters.volume.mountPath': 'Container Path',
@@ -172,7 +172,7 @@ export default {
   'clusters.volume.add': 'Add Volume Mount',
   'clusters.systemDefaultContainerRegistry.title': 'Default Container Registry',
   'clusters.systemDefaultContainerRegistry.tip':
-    'Default registry used to resolve GPUStack images for this cluster. Falls back to the server default when unset.',
+    'Default registry used to resolve MesaStack images for this cluster. Falls back to the server default when unset.',
   'clusters.k8sOptions.title': 'Kubernetes Deployment Options',
   'clusters.imageCredentials.title': 'Image Credentials',
   'clusters.imageCredentials.add': 'Add Credential',
@@ -184,7 +184,7 @@ export default {
     'Pod nodeSelector applied to every worker DaemonSet — only nodes whose labels match are eligible to run the worker.',
   'clusters.operatorImage.title': 'Operator Image',
   'clusters.operatorImage.tip':
-    'Override for the GPUStack Operator container image. Leave empty to use the server default.',
+    'Override for the MesaStack Operator container image. Leave empty to use the server default.',
   'clusters.namespace.title': 'Namespace',
   'clusters.namespace.tip':
     'Kubernetes namespace the cluster’s manifests render into. Leave empty to use gpustack-system.',
@@ -213,5 +213,5 @@ export default {
 // 10. 'clusters.addworker.theadNotes': 'If the <span class="bold-text>/usr/local/PPU_SDK</span> directory does not exist, please create a symbolic link pointing to the T-Head PPU SDK installed path: <span class="bold-text>ln -s /path/to/PPU_SDK /usr/local/PPU_SDK</span>',
 // 11. 'clusters.addworker.theadNotes-02': 'T-Head PPU uses the Container Device Interface (CDI) for device injection and requires the <span class="bold-text">/var/run/cdi</span> directory to be available for CDI generation.'
 // 12. 'clusters.addworker.metaxNotes': `If the <span class="bold-text">/opt/mxdriver</span> or <span class="bold-text">/opt/maca</span> directory does not exist, create a symbolic link to the MetaX driver and SDK installation path: <span class="desc-fill">ln -s /path/to/mxdriver /opt/mxdriver</span><span class="desc-fill">ln -s /path/to/maca /opt/maca</span>.`,
-// 13. 'clusters.addworker.nvidiaNotes': 'The built-in inference backends in GPUStack v2.1 require <span class="bold-text">CUDA 12.6+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">560</span> or newer.'
+// 13. 'clusters.addworker.nvidiaNotes': 'The built-in inference backends in MesaStack v2.1 require <span class="bold-text">CUDA 12.6+</span>. Please ensure your NVIDIA driver version is <span class="bold-text">560</span> or newer.'
 // ================================================================

src/locales/ru-RU/common.ts

@@ -46,7 +46,7 @@ export default {
   'common.button.enabled': 'Активно',
   'common.button.disabled': 'Отключено',
   'common.button.upgrade': 'Обновить',
-  'common.enterprise.feature': 'Available in GPUStack Enterprise',
+  'common.enterprise.feature': 'Available in MesaStack Enterprise',
   'common.input.holder': 'Введите значение',
   'common.validate.value': 'Поле {name} обязательно',
   'common.button.edit': 'Редактировать',
@@ -197,6 +197,7 @@ export default {
   'common.table.user': 'Пользователь',
   'common.settings.instructions': 'Инструкции',
   'common.settings.language': 'Язык',
+  'common.settings.language.tips': 'Задайте язык отображения интерфейса.',
   'common.delete.confirm': 'Вы уверены, что хотите удалить выбранный {type}?',
   'common.delete.single.confirm':
     'Вы уверены, что хотите удалить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
@@ -210,7 +211,7 @@ export default {
   'common.form.password': 'Пароль',
   'common.form.username': 'Имя пользователя',
   'common.login.rember': 'Запомнить меня',
-  'settings.company': 'GPUStack.ai',
+  'settings.company': 'MesaStack',
   'common.button.help': 'Помощь',
   'common.button.feedback': 'Обратная связь',
   'common.button.docs': 'Документация',
@@ -250,6 +251,11 @@ export default {
   'common.appearance.tips': 'По умолчанию соответствует системным настройкам.',
   'common.button.forgotpassword': 'Забыли пароль?',
   'common.appearance.theme': 'Тема',
+  'common.appearance.description':
+    'Настройте внешний вид интерфейса на вашем устройстве.',
+  'common.security': 'Безопасность',
+  'common.security.description':
+    'Управляйте паролем для входа в учётную запись.',
   'common.page.wentwrong': 'Что-то пошло не так.',
   'common.page.refresh.tips':
     'Страница может нуждаться в обновлении. Попробуйте обновить её!',

src/locales/ru-RU/gpuservice.ts

@@ -84,6 +84,8 @@ export default {
   'gpuservice.publicKey': 'Открытый ключ SSH',
   'gpuservice.publicKey.add': 'Добавить открытый ключ SSH',
   'gpuservice.publicKey.edit': 'Изменить открытый ключ SSH',
+  'gpuservice.publicKey.delete.tips':
+    'Удаление открытого ключа SSH не отзывает доступ для уже подключённых экземпляров. Чтобы удалить доступ, отредактируйте эти экземпляры отдельно.',
   'gpuservice.publicKey.filter.name': 'Поиск по имени',
   'gpuservice.publicKey.label': 'Открытый ключ SSH',
   'gpuservice.instance.ssh.enable': 'Включить SSH-доступ',

src/locales/ru-RU/models.ts

@@ -15,7 +15,7 @@ export default {
   'models.form.configurations': 'Конфигурации',
   'models.form.s3address': 'S3-адрес',
   'models.form.partialoffload.tips':
-    'При включении CPU оффлоудинга GPUStack будет выделять оперативную память, если ресурсов GPU недостаточно. Вы должны правильно настроить бэкенд вывода для использования гибридного CPU+GPU или полного CPU вывода.',
+    'При включении CPU оффлоудинга MesaStack будет выделять оперативную память, если ресурсов GPU недостаточно. Вы должны правильно настроить бэкенд вывода для использования гибридного CPU+GPU или полного CPU вывода.',
   'models.form.distribution.tips':
     'Позволяет переносить часть слоёв модели на один или несколько удалённых воркеров, когда ресурсов текущего воркера недостаточно.',
   'models.openinplayground': 'Открыть в Песочнице',
@@ -26,7 +26,7 @@ export default {
   'model.deploy.sort': 'Сортировка',
   'model.deploy.search.placeholder': 'Введите <kbd>/</kbd> для поиска моделей',
   'model.form.ollamatips':
-    'Подсказка: ниже представлены предустановленные модели Ollama в GPUStack. Выберите нужную или введите модель для развертывания в поле 【{name}】 справа.',
+    'Подсказка: ниже представлены предустановленные модели Ollama в MesaStack. Выберите нужную или введите модель для развертывания в поле 【{name}】 справа.',
   'models.sort.name': 'По имени',
   'models.sort.size': 'По размеру',
   'models.sort.likes': 'По лайкам',
@@ -89,7 +89,7 @@ export default {
   'models.form.filePath': 'Путь к модели',
   'models.form.backendVersion': 'Версия бэкенда',
   'models.form.backendVersion.tips':
-    'Чтобы использовать желаемую версию {backend} {version}, система автоматически создаст виртуальную среду в онлайн-окружении для установки соответствующей версии. После обновления GPUStack версия бэкенда останется зафиксированной. {link}',
+    'Чтобы использовать желаемую версию {backend} {version}, система автоматически создаст виртуальную среду в онлайн-окружении для установки соответствующей версии. После обновления MesaStack версия бэкенда останется зафиксированной. {link}',
   'models.form.gpuselector': 'Селектор GPU',
   'models.form.backend.llamabox':
     'Для моделей формата GGUF. Поддержка Linux, macOS и Windows.',
@@ -281,7 +281,7 @@ export default {
   'models.form.backendVersions.tips': `Чтобы использовать больше версий, перейдите на страницу {link} и отредактируйте бэкенд для добавления версий.`,
   'models.catalog.nogpus.tips':
     'В выбранном кластере нет доступных GPU, совместимых с этой моделью.',
-  'models.form.modelfile.notfound': `Указанный путь к файлу модели не существует на сервере GPUStack. Рекомендуется размещать файл модели по одному и тому же пути как на сервере GPUStack, так и на воркерах GPUStack. Это поможет системе принимать лучшие решения по распределению ресурсов.`,
+  'models.form.modelfile.notfound': `Указанный путь к файлу модели не существует на сервере MesaStack. Рекомендуется размещать файл модели по одному и тому же пути как на сервере MesaStack, так и на воркерах MesaStack. Это поможет системе принимать лучшие решения по распределению ресурсов.`,
   'models.form.readyWorkers': 'воркеров готово',
   'models.form.maxContextLength': 'Maximum Context Length',
   'models.form.backend.helperText':

src/locales/ru-RU/organizations.ts

@@ -1,7 +1,7 @@
 export default {
   'organizations.upsell.title': 'Organizations are an Enterprise feature',
   'organizations.upsell.subtitle':
-    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to GPUStack Enterprise to manage organizations.',
+    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to MesaStack Enterprise to manage organizations.',
   'organizations.upsell.featuresTitle': 'What you get in Enterprise',
   'organizations.upsell.feature.orgs':
     'Create organizations to group users and isolate workloads',

src/locales/ru-RU/resources.ts

@@ -51,7 +51,7 @@ export default {
   'resources.worker.container.supported': 'Только для Linux.',
   'resources.worker.current.version': 'Текущая версия: {version}',
   'resources.worker.driver.install':
-    'Установите <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">необходимые драйверы и библиотеки</a> перед установкой GPUStack.', // Translated
+    'Установите <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">необходимые драйверы и библиотеки</a> перед установкой MesaStack.', // Translated
   'resources.worker.select.command':
     'Выберите метку для генерации команды и скопируйте её.',
   'resources.worker.script.install': 'Установка скриптом',
@@ -87,7 +87,7 @@ export default {
     'Вставьте <span class="bold-text">Токен</span>.',
   'resources.register.worker.step7':
     'Нажмите <span class="bold-text">Перезапуск</span> для применения настроек.',
-  'resources.register.install.title': 'Установка GPUStack на {os}',
+  'resources.register.install.title': 'Установка MesaStack на {os}',
   'resources.register.download':
     'Скачайте и установите <a href={url} target="_blank">инсталлятор</a>. Поддерживаемые версии: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (серия M), macOS 14+',
@@ -110,7 +110,7 @@ export default {
     'No available clusters. Please create a cluster before adding a node.',
   'resources.metrics.details': 'Monitoring',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.',
+    'Please upgrade to match the MesaStack Server version.',
   'resources.worker.version': 'Worker Version: {version}',
   'resources.server.version': 'Server Version: {version}',
   'resources.worker.currentVersion': 'Current Version: {version}',
@@ -127,5 +127,5 @@ export default {
 // 7. 'resources.worker.maintenance.tips': 'When maintenance mode is enabled, the node will stop scheduling new model deployment tasks. Running instances will not be affected.',
 // 8. 'resources.worker.noCluster.tips': 'No available clusters. Please create a cluster before adding a node.',
 // 9. 'resources.metrics.details': 'Monitoring',
-// 10. 'resoureces.worker.upgrade.tips': 'Please upgrade to match the GPUStack Server version.'
+// 10. 'resoureces.worker.upgrade.tips': 'Please upgrade to match the MesaStack Server version.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/users.ts

@@ -29,12 +29,14 @@ export default {
   'users.password.modify.title': 'Смена пароля',
   'users.password.modify.description':
     'В целях безопасности измените первоначальный пароль.',
+  'users.password.modify.tips':
+    'Регулярное обновление пароля помогает защитить вашу учётную запись.',
   'users.password.confirm': 'Подтвердите новый пароль',
   'users.password.confirm.empty': 'Подтвердите новый пароль',
   'users.password.confirm.error': 'Пароли не совпадают',
   'users.login.title': 'Вход в',
-  'users.version.islatest': 'GPUStack {version} — последняя версия',
-  'users.version.update': 'Доступно обновление GPUStack {version}',
+  'users.version.islatest': 'MesaStack {version} — последняя версия',
+  'users.version.update': 'Доступно обновление MesaStack {version}',
   'users.settings.title': 'Настройки пользователя',
   'users.status.activate': 'Активировать аккаунт',
   'users.status.deactivate': 'Деактивировать аккаунт',

src/locales/tr-TR/billing.ts

@@ -1,7 +1,7 @@
 export default {
   'billing.upsell.title': 'Billing is an Enterprise feature',
   'billing.upsell.subtitle':
-    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
+    'Track spend, generate invoices, and enforce budgets across teams. Upgrade to MesaStack Enterprise to manage billing.',
   'billing.upsell.featuresTitle': 'What you get in Enterprise',
   'billing.upsell.feature.usage':
     'See cost breakdowns by organization, user, and model',

src/locales/tr-TR/clusters.ts

@@ -85,7 +85,7 @@ export default {
   'clusters.addworker.detectWorkerAddress.tips':
     "Belirtilmezse İşçi Düğüm IP'si varsayılır.",
   'clusters.addworker.externalIP.tips':
-    'VPC veya özel ağda çalıştırılıyorsa, lütfen GPUStack Sunucusuna erişilebilir İşçi Düğüm harici adresini belirtin.',
+    'VPC veya özel ağda çalıştırılıyorsa, lütfen MesaStack Sunucusuna erişilebilir İşçi Düğüm harici adresini belirtin.',
   'clusters.addworker.enterWorkerIP': "İşçi düğüm IP'sini girin",
   'clusters.addworker.enterWorkerIP.error': "Lütfen işçi düğüm IP'sini girin.",
   'clusters.addworker.enterWorkerAddress': 'İşçi düğüm harici adresini girin',
@@ -113,20 +113,20 @@ export default {
     '{count} yeni işçi düğüm kümeye eklendi.',
   'clusters.addworker.message.success_multiple':
     '{count} yeni işçi düğüm kümeye eklendi.',
-  'clusters.create.serverUrl': "GPUStack Sunucu URL'si",
+  'clusters.create.serverUrl': "MesaStack Sunucu URL'si",
   'clusters.create.workerConfig': 'İşçi Düğüm Yapılandırması',
   'clusters.edit.k8sOptions.changed.tip':
     'Kubernetes seçeneklerini değiştirdiniz. Değişikliklerin etkili olması için kayıt komutunu hedef kümede yeniden çalıştırın.',
   'clusters.addworker.containerName': 'İşçi Düğüm Konteyner Adı',
   'clusters.addworker.containerName.tips':
     'İşçi düğüm konteyneri için bir ad belirtin.',
-  'clusters.addworker.dataVolume': 'GPUStack Veri Birimi',
+  'clusters.addworker.dataVolume': 'MesaStack Veri Birimi',
   'clusters.addworker.dataVolume.tips':
-    'GPUStack için veri depolama yolu belirtin.',
+    'MesaStack için veri depolama yolu belirtin.',
   'clusters.table.ip.internal': 'Dahili',
   'clusters.table.ip.external': 'Harici',
   'clusters.form.serverUrl.tips':
-    "İşçi düğüm GPUStack Sunucusuna doğrudan erişemiyorsa, harici olarak erişilebilir bir GPUStack hizmet URL'si belirtin.",
+    "İşçi düğüm MesaStack Sunucusuna doğrudan erişemiyorsa, harici olarak erişilebilir bir MesaStack hizmet URL'si belirtin.",
   'clusters.form.setDefault': 'Varsayılan Olarak Ayarla',
   'clusters.form.setDefault.tips': 'Dağıtım için varsayılan.',
   'clusters.addworker.noClusters': 'Kullanılabilir Docker kümesi bulunamadı',
@@ -145,7 +145,7 @@ export default {
   'clusters.addworker.theadNotes-02':
     'T-Head PPU, cihaz enjeksiyonu için Container Device Interface (CDI) kullanır ve CDI oluşturma için <span class="bold-text">/var/run/cdi</span> dizininin kullanılabilir olmasını gerektirir.',
   'clusters.addworker.nvidiaNotes':
-    'GPUStack\'teki yerleşik çıkarım altyapıları <span class="bold-text">CUDA 12.8+</span> gerektirir. Lütfen NVIDIA sürücü sürümünüzün <span class="bold-text">570</span> veya daha yeni olduğundan emin olun.',
+    'MesaStack\'teki yerleşik çıkarım altyapıları <span class="bold-text">CUDA 12.8+</span> gerektirir. Lütfen NVIDIA sürücü sürümünüzün <span class="bold-text">570</span> veya daha yeni olduğundan emin olun.',
   'clusters.volume.title': 'Volume Mounts',
   'clusters.volume.name': 'Volume Name',
   'clusters.volume.mountPath': 'Container Path',
@@ -172,7 +172,7 @@ export default {
   'clusters.volume.add': 'Add Volume Mount',
   'clusters.systemDefaultContainerRegistry.title': 'Default Container Registry',
   'clusters.systemDefaultContainerRegistry.tip':
-    'Default registry used to resolve GPUStack images for this cluster. Falls back to the server default when unset.',
+    'Default registry used to resolve MesaStack images for this cluster. Falls back to the server default when unset.',
   'clusters.k8sOptions.title': 'Kubernetes Deployment Options',
   'clusters.imageCredentials.title': 'Image Credentials',
   'clusters.imageCredentials.add': 'Add Credential',
@@ -184,7 +184,7 @@ export default {
     'Pod nodeSelector applied to every worker DaemonSet — only nodes whose labels match are eligible to run the worker.',
   'clusters.operatorImage.title': 'Operator Image',
   'clusters.operatorImage.tip':
-    'Override for the GPUStack Operator container image. Leave empty to use the server default.',
+    'Override for the MesaStack Operator container image. Leave empty to use the server default.',
   'clusters.namespace.title': 'Namespace',
   'clusters.namespace.tip':
     'Kubernetes namespace the cluster’s manifests render into. Leave empty to use gpustack-system.',

src/locales/tr-TR/common.ts

@@ -46,7 +46,7 @@ export default {
   'common.button.enabled': 'Etkin',
   'common.button.disabled': 'Devre dışı',
   'common.button.upgrade': 'Yükselt',
-  'common.enterprise.feature': 'Available in GPUStack Enterprise',
+  'common.enterprise.feature': 'Available in MesaStack Enterprise',
   'common.input.holder': 'Lütfen girin',
   'common.validate.value': '{name} değeri gereklidir',
   'common.button.edit': 'Düzenle',
@@ -199,6 +199,7 @@ export default {
   'common.table.user': 'Kullanıcı',
   'common.settings.instructions': 'Talimatlar',
   'common.settings.language': 'Dil',
+  'common.settings.language.tips': 'Arayüzün görüntüleme dilini ayarlayın.',
   'common.delete.confirm':
     'Seçili {type} öğesini silmek istediğinizden emin misiniz?',
   'common.delete.single.confirm':
@@ -215,7 +216,7 @@ export default {
   'common.form.password': 'Şifre',
   'common.form.username': 'Kullanıcı adı',
   'common.login.rember': 'Beni hatırla',
-  'settings.company': 'GPUStack.ai',
+  'settings.company': 'MesaStack',
   'common.button.help': 'Yardım',
   'common.button.feedback': 'Geri Bildirim',
   'common.button.docs': 'Dokümantasyon',
@@ -254,6 +255,11 @@ export default {
   'common.appearance.tips': 'Varsayılan olarak sistem tercihini takip eder.',
   'common.button.forgotpassword': 'Şifrenizi mi unuttunuz?',
   'common.appearance.theme': 'Tema',
+  'common.appearance.description':
+    'Arayüzün cihazınızdaki görünümünü özelleştirin.',
+  'common.security': 'Güvenlik',
+  'common.security.description':
+    'Hesabınıza giriş yapmak için kullanılan parolayı yönetin.',
   'common.page.wentwrong': 'Bir şeyler ters gitti.',
   'common.page.refresh.tips':
     'Sayfanın güncellenmesi gerekebilir. Yenilemeyi deneyin!',

src/locales/tr-TR/gpuservice.ts

@@ -80,6 +80,8 @@ export default {
   'gpuservice.publicKey': 'SSH Açık Anahtarı',
   'gpuservice.publicKey.add': 'SSH Açık Anahtarı Ekle',
   'gpuservice.publicKey.edit': 'SSH Açık Anahtarını Düzenle',
+  'gpuservice.publicKey.delete.tips':
+    'Bir SSH Açık Anahtarını silmek, mevcut bağlı Örneklerin erişimini iptal etmez. Erişimi kaldırmak için ilgili Örnekleri ayrı ayrı düzenleyin.',
   'gpuservice.publicKey.filter.name': 'Ada göre ara',
   'gpuservice.publicKey.label': 'SSH Açık Anahtarı',
   'gpuservice.instance.ssh.enable': 'SSH Erişimini Etkinleştir',

src/locales/tr-TR/models.ts

@@ -14,7 +14,7 @@ export default {
   'models.form.env': 'Ortam Değişkenleri',
   'models.form.configurations': 'Yapılandırmalar',
   'models.form.s3address': 'S3 Adresi',
-  'models.form.partialoffload.tips': `CPU aktarımı etkinleştirildiğinde, GPU kaynakları yetersiz olduğunda GPUStack CPU belleği ayırır. Hibrit CPU+GPU veya tam CPU çıkarımı kullanmak için çıkarım altyapısını doğru şekilde yapılandırmanız gerekir.`,
+  'models.form.partialoffload.tips': `CPU aktarımı etkinleştirildiğinde, GPU kaynakları yetersiz olduğunda MesaStack CPU belleği ayırır. Hibrit CPU+GPU veya tam CPU çıkarımı kullanmak için çıkarım altyapısını doğru şekilde yapılandırmanız gerekir.`,
   'models.form.distribution.tips': `Bir işçi düğümün kaynakları yetersiz olduğunda, modelin katmanlarının bir kısmının tekli veya çoklu uzak işçi düğümlere aktarılmasına olanak tanır.`,
   'models.openinplayground': 'Deneme Alanında Aç',
   'models.instances': 'örnekler',
@@ -24,7 +24,7 @@ export default {
   'model.deploy.sort': 'Sırala',
   'model.deploy.search.placeholder': 'Modelleri aramak için <kbd>/</kbd> yazın',
   'model.form.ollamatips':
-    "İpucu: Aşağıdakiler GPUStack'te önceden yapılandırılmış Ollama modelleridir. İstediğiniz modeli seçin veya dağıtmak istediğiniz modeli doğrudan sağdaki 【{name}】 giriş kutusuna yazın.",
+    "İpucu: Aşağıdakiler MesaStack'te önceden yapılandırılmış Ollama modelleridir. İstediğiniz modeli seçin veya dağıtmak istediğiniz modeli doğrudan sağdaki 【{name}】 giriş kutusuna yazın.",
   'models.sort.name': 'Ad',
   'models.sort.size': 'Boyut',
   'models.sort.likes': 'Beğeniler',
@@ -87,7 +87,7 @@ export default {
   'models.form.filePath': 'Model Yolu',
   'models.form.backendVersion': 'Altyapı Sürümü',
   'models.form.backendVersion.tips':
-    '{backend}{version} sürümünü kullanmak için sistem, ilgili sürümü yüklemek üzere çevrimiçi ortamda otomatik olarak sanal ortam oluşturur. GPUStack yükseltmesinden sonra altyapı sürümü sabit kalır. {link}',
+    '{backend}{version} sürümünü kullanmak için sistem, ilgili sürümü yüklemek üzere çevrimiçi ortamda otomatik olarak sanal ortam oluşturur. MesaStack yükseltmesinden sonra altyapı sürümü sabit kalır. {link}',
   'models.form.gpuselector': 'GPU Seçici',
   'models.form.backend.llamabox':
     'GGUF format modeller için, Linux, macOS ve Windows destekler.',
@@ -277,7 +277,7 @@ export default {
   'models.form.backendVersions.tips': `Daha fazla sürüm kullanmak için {link} sayfasına gidin ve sürüm eklemek üzere altyapıyı düzenleyin.`,
   'models.catalog.nogpus.tips':
     'Seçili kümede bu model için uyumlu GPU bulunmuyor.',
-  'models.form.modelfile.notfound': `Belirttiğiniz model dosyası yolu GPUStack sunucusunda mevcut değil. Model dosyasını hem GPUStack sunucusunda hem de GPUStack işçi düğümlerinde aynı yola yerleştirmeniz önerilir. Bu, GPUStack'in daha iyi kararlar almasına yardımcı olur.`,
+  'models.form.modelfile.notfound': `Belirttiğiniz model dosyası yolu MesaStack sunucusunda mevcut değil. Model dosyasını hem MesaStack sunucusunda hem de MesaStack işçi düğümlerinde aynı yola yerleştirmeniz önerilir. Bu, MesaStack'in daha iyi kararlar almasına yardımcı olur.`,
   'models.form.readyWorkers': 'hazır işçi düğüm',
   'models.form.maxContextLength': 'Maksimum Bağlam Uzunluğu',
   'models.form.backend.helperText':

src/locales/tr-TR/organizations.ts

@@ -1,7 +1,7 @@
 export default {
   'organizations.upsell.title': 'Organizations are an Enterprise feature',
   'organizations.upsell.subtitle':
-    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to GPUStack Enterprise to manage organizations.',
+    'Multi-tenancy lets you isolate users, resources, and quotas across teams. Upgrade to MesaStack Enterprise to manage organizations.',
   'organizations.upsell.featuresTitle': 'What you get in Enterprise',
   'organizations.upsell.feature.orgs':
     'Create organizations to group users and isolate workloads',

src/locales/tr-TR/resources.ts

@@ -52,7 +52,7 @@ export default {
   'resources.worker.container.supported': 'macOS veya Windows desteklenmez.',
   'resources.worker.current.version': 'Mevcut sürüm: {version}.',
   'resources.worker.driver.install':
-    'GPUStack kurulumundan önce <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">gerekli sürücüleri ve kütüphaneleri</a> yükleyin.',
+    'MesaStack kurulumundan önce <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">gerekli sürücüleri ve kütüphaneleri</a> yükleyin.',
   'resources.worker.select.command':
     'Komutu oluşturmak için bir etiket seçin ve kopyala düğmesiyle kopyalayın.',
   'resources.worker.script.install': 'Betik Kurulumu',
@@ -89,7 +89,7 @@ export default {
     '<span class="bold-text">Token</span>\'ı yapıştırın.',
   'resources.register.worker.step7':
     'Ayarları uygulamak için <span class="bold-text">Yeniden Başlat</span>\'a tıklayın.',
-  'resources.register.install.title': '{os} üzerine GPUStack kur',
+  'resources.register.install.title': '{os} üzerine MesaStack kur',
   'resources.register.download':
     '<a href={url} target="_blank">Yükleyiciyi</a> indirip kurun. Yalnızca desteklenen: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (M serisi), macOS 14+',
@@ -110,7 +110,7 @@ export default {
     'Kullanılabilir küme yok. Lütfen düğüm eklemeden önce bir küme oluşturun.',
   'resources.metrics.details': 'İzleme',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.',
+    'Please upgrade to match the MesaStack Server version.',
   'resources.worker.version': 'Worker Version: {version}',
   'resources.server.version': 'Server Version: {version}',
   'resources.worker.currentVersion': 'Current Version: {version}',
@@ -119,5 +119,5 @@ export default {
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1. 'resoureces.worker.upgrade.tips': 'Please upgrade to match the GPUStack Server version.'
+// 1. 'resoureces.worker.upgrade.tips': 'Please upgrade to match the MesaStack Server version.'
 // ========== End of To-Do List ==========

src/locales/tr-TR/users.ts

@@ -29,16 +29,18 @@ export default {
   'users.password.modify.title': 'Şifreyi Değiştir',
   'users.password.modify.description':
     'Hesabınızın güvenliği için lütfen başlangıç şifrenizi değiştirin.',
+  'users.password.modify.tips':
+    'Parolanızı düzenli olarak güncellemek hesabınızın güvenliğini korumaya yardımcı olur.',
   'users.password.confirm': 'Yeni Şifreyi Onayla',
   'users.password.confirm.empty': 'Lütfen yeni şifreyi tekrar girin.',
   'users.password.confirm.error': 'Girilen iki şifre eşleşmiyor.',
   'users.login.title': 'Giriş yap:',
-  'users.version.islatest': 'GPUStack {version} en güncel sürümdür',
-  'users.version.update': 'GPUStack {version} kullanılabilir',
+  'users.version.islatest': 'MesaStack {version} en güncel sürümdür',
+  'users.version.update': 'MesaStack {version} kullanılabilir',
   'users.settings.title': 'Kullanıcı Ayarları',
   'users.status.activate': 'Hesabı Etkinleştir',
   'users.status.deactivate': 'Hesabı Devre Dışı Bırak',
   'users.status.inactiveAccount': 'Pasif Hesap',
   'users.login.getInitialPassword':
-    'Başlangıç yönetici şifresini almak için GPUStack Sunucunuzda aşağıdaki komutu çalıştırın.'
+    'Başlangıç yönetici şifresini almak için MesaStack Sunucunuzda aşağıdaki komutu çalıştırın.'
 };

src/locales/zh-CN/billing.ts

@@ -1,7 +1,7 @@
 export default {
   'billing.upsell.title': '计费是企业版功能',
   'billing.upsell.subtitle':
-    '在团队间跟踪花费、生成账单并执行预算。升级到 GPUStack 企业版即可管理计费。',
+    '在团队间跟踪花费、生成账单并执行预算。升级到 MesaStack 企业版即可管理计费。',
   'billing.upsell.featuresTitle': '企业版包含的能力',
   'billing.upsell.feature.usage': '按组织、用户与模型查看成本明细',
   'billing.upsell.feature.invoices': '生成账单并导出计费报表',

src/locales/zh-CN/clusters.ts

@@ -83,7 +83,7 @@ export default {
   'clusters.addworker.detectWorkerAddress.tips':
     '如果未指定，则默认为节点 IP。',
   'clusters.addworker.externalIP.tips':
-    '如运行在 VPC 或私有网络时，请指定 GPUStack Server 可达的节点外部地址。',
+    '如运行在 VPC 或私有网络时，请指定 MesaStack Server 可达的节点外部地址。',
   'clusters.addworker.enterWorkerIP': '输入节点 IP',
   'clusters.addworker.enterWorkerIP.error': '请输入节点 IP',
   'clusters.addworker.enterWorkerAddress': '输入节点外部地址',
@@ -111,18 +111,18 @@ export default {
     '已将 {count} 个新节点添加到集群中。',
   'clusters.addworker.message.success_multiple':
     '已将 {count} 个新节点添加到集群中。',
-  'clusters.create.serverUrl': 'GPUStack Server 节点地址',
+  'clusters.create.serverUrl': 'MesaStack Server 节点地址',
   'clusters.create.workerConfig': '节点配置',
   'clusters.edit.k8sOptions.changed.tip':
     '您已修改 Kubernetes 选项，需要在目标集群上重新运行注册命令才会生效。',
   'clusters.addworker.containerName': '节点容器名称',
   'clusters.addworker.containerName.tips': '为节点容器指定一个名称。',
-  'clusters.addworker.dataVolume': 'GPUStack 数据卷',
-  'clusters.addworker.dataVolume.tips': '为 GPUStack 指定数据存储路径。',
+  'clusters.addworker.dataVolume': 'MesaStack 数据卷',
+  'clusters.addworker.dataVolume.tips': '为 MesaStack 指定数据存储路径。',
   'clusters.table.ip.internal': '内',
   'clusters.table.ip.external': '外',
   'clusters.form.serverUrl.tips':
-    '如果节点无法直接访问 GPUStack Server，则指定一个可访问的外部 GPUStack Server 地址。',
+    '如果节点无法直接访问 MesaStack Server，则指定一个可访问的外部 MesaStack Server 地址。',
   'clusters.form.setDefault': '设为默认',
   'clusters.form.setDefault.tips': '部署时的默认集群。',
   'clusters.addworker.noClusters': '无可用的 Docker 集群',
@@ -138,7 +138,7 @@ export default {
   'clusters.addworker.theadNotes-02':
     '平头哥（T-Head）PPU 使用容器设备接口（CDI）进行设备注入，因此需要确保 <span class="bold-text">/var/run/cdi</span> 目录可用以生成 CDI。',
   'clusters.addworker.nvidiaNotes':
-    'GPUStack 内置推理后端依赖 <span class="bold-text">CUDA 12.8</span> 及以上版本，请确保 NVIDIA 驱动版本为 <span class="bold-text">570</span> 或以上。',
+    'MesaStack 内置推理后端依赖 <span class="bold-text">CUDA 12.8</span> 及以上版本，请确保 NVIDIA 驱动版本为 <span class="bold-text">570</span> 或以上。',
   'clusters.volume.title': '卷挂载',
   'clusters.volume.name': '卷名称',
   'clusters.volume.mountPath': '容器内路径',
@@ -164,7 +164,7 @@ export default {
   'clusters.volume.add': '添加卷挂载',
   'clusters.systemDefaultContainerRegistry.title': '默认容器镜像仓库',
   'clusters.systemDefaultContainerRegistry.tip':
-    '用于解析该集群 GPUStack 镜像的默认镜像仓库。未设置时回退到服务端默认值。',
+    '用于解析该集群 MesaStack 镜像的默认镜像仓库。未设置时回退到服务端默认值。',
   'clusters.k8sOptions.title': 'Kubernetes 部署选项',
   'clusters.imageCredentials.title': '镜像仓库凭证',
   'clusters.imageCredentials.add': '添加凭证',
@@ -176,7 +176,7 @@ export default {
     '应用到每个 worker DaemonSet 的 Pod nodeSelector，只有标签匹配的节点才会被调度运行 worker。',
   'clusters.operatorImage.title': 'Operator 镜像',
   'clusters.operatorImage.tip':
-    'GPUStack Operator 容器镜像的覆盖值。留空则使用服务端默认值。',
+    'MesaStack Operator 容器镜像的覆盖值。留空则使用服务端默认值。',
   'clusters.namespace.title': '命名空间',
   'clusters.namespace.tip':
     '集群清单渲染所使用的 Kubernetes 命名空间。留空则使用 gpustack-system。',

src/locales/zh-CN/common.ts

@@ -44,7 +44,7 @@ export default {
   'common.button.rollback': '回滚',
   'common.button.new': '新建{ text }',
   'common.button.upgrade': '升级',
-  'common.enterprise.feature': 'GPUStack 企业版可用',
+  'common.enterprise.feature': 'MesaStack 企业版可用',
   'common.input.holder': '请输入',
   'common.holder.search': '搜索',
   'common.button.edit': '编辑',
@@ -190,6 +190,7 @@ export default {
   'common.table.user': '用户',
   'common.settings.instructions': '操作指引',
   'common.settings.language': '语言',
+  'common.settings.language.tips': '设置界面的显示语言。',
   'common.delete.confirm': '确定删除选中的{type}吗？',
   'common.delete.single.confirm':
     '确定删除以下内容？\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
@@ -203,7 +204,7 @@ export default {
   'common.form.password': '密码',
   'common.form.username': '用户名',
   'common.login.rember': '记住我',
-  'settings.company': '数澈软件',
+  'settings.company': 'MesaStack',
   'common.button.help': '帮助',
   'common.button.feedback': '反馈',
   'common.button.docs': '文档',
@@ -246,6 +247,9 @@ export default {
   'common.appearance.tips': '默认跟随系统设置',
   'common.button.forgotpassword': '忘记密码？',
   'common.appearance.theme': '主题',
+  'common.appearance.description': '自定义界面在您设备上的视觉表现。',
+  'common.security': '安全设置',
+  'common.security.description': '管理用于登录账户的密码。',
   'common.page.wentwrong': '哎呀，出了点问题',
   'common.page.refresh.tips': '页面似乎需要更新，刷新一下试试吧！',
   'common.tips.escape.disable': '请点击「取消」按钮或右上角 X 关闭窗口',

src/locales/zh-CN/gpuservice.ts

@@ -75,6 +75,8 @@ export default {
   'gpuservice.publicKey': 'SSH 公钥',
   'gpuservice.publicKey.add': '添加 SSH 公钥',
   'gpuservice.publicKey.edit': '编辑 SSH 公钥',
+  'gpuservice.publicKey.delete.tips':
+    '删除 SSH Public Key 不会撤销已挂载 GPU 实例的访问权限。如需移除访问权限，请分别编辑对应的 GPU 实例。',
   'gpuservice.publicKey.filter.name': '按名称搜索',
   'gpuservice.publicKey.label': 'SSH 公钥',
   'gpuservice.instance.ssh.enable': '启用 SSH 访问',

src/locales/zh-CN/models.ts

@@ -15,7 +15,7 @@ export default {
   'models.form.configurations': '配置',
   'models.form.s3address': 'S3 地址',
   'models.form.partialoffload.tips':
-    '启用 CPU 卸载后，GPU 不足时 GPUStack 会自动使用 CPU 内存。请确保推理后端已正确配置为混合 CPU+GPU 或纯 CPU 推理。',
+    '启用 CPU 卸载后，GPU 不足时 MesaStack 会自动使用 CPU 内存。请确保推理后端已正确配置为混合 CPU+GPU 或纯 CPU 推理。',
   'models.form.distribution.tips':
     '允许在单个节点资源不足时，将部分计算卸载到一个或多个远程节点。',
   'models.openinplayground': '在 Playground 中打开',
@@ -26,7 +26,7 @@ export default {
   'model.deploy.sort': '排序',
   'model.deploy.search.placeholder': '按 <kbd>/</kbd> 开始搜索模型',
   'model.form.ollamatips':
-    '提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
+    '提示：以下为 MesaStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
   'models.sort.name': '名称',
   'models.sort.size': '大小',
   'models.sort.likes': '点赞量',
@@ -86,7 +86,7 @@ export default {
   'models.form.filePath': '模型路径',
   'models.form.backendVersion': '后端版本',
   'models.form.backendVersion.tips':
-    '固定以使用期望的 {backend} 版本 {version}，在线环境会自动创建虚拟环境安装对应版本的 {backend}。在 GPUStack 升级后也将保持固定的后端版本。{link}',
+    '固定以使用期望的 {backend} 版本 {version}，在线环境会自动创建虚拟环境安装对应版本的 {backend}。在 MesaStack 升级后也将保持固定的后端版本。{link}',
   'models.form.gpuselector': 'GPU 选择器',
   'models.form.backend.llamabox':
     '用于 GGUF 格式模型，支持 Linux, macOS 和 Windows。',
@@ -262,7 +262,7 @@ export default {
   'models.form.backendVersions.tips': `如需使用更多版本，请前往{link}页面并编辑对应的后端以添加版本。`,
   'models.catalog.nogpus.tips': '所选集群中没有兼容该模型的 GPU。',
   'models.form.modelfile.notfound':
-    '你指定的模型文件路径在 GPUStack Server 节点上不存在。建议在 GPUStack Server 节点和 GPUStack 节点上使用相同的模型文件路径，这有助于 GPUStack 做出更优的调度与决策。',
+    '你指定的模型文件路径在 MesaStack Server 节点上不存在。建议在 MesaStack Server 节点和 MesaStack 节点上使用相同的模型文件路径，这有助于 MesaStack 做出更优的调度与决策。',
   'models.form.readyWorkers': '节点就绪',
   'models.form.maxContextLength': '最大上下文长度',
   'models.form.backend.helperText': '该社区后端暂未启用，部署后将自动启用',

src/locales/zh-CN/organizations.ts

@@ -1,7 +1,7 @@
 export default {
   'organizations.upsell.title': '组织是企业版功能',
   'organizations.upsell.subtitle':
-    '多租户可在团队间隔离用户、资源与配额。升级到 GPUStack 企业版即可管理组织。',
+    '多租户可在团队间隔离用户、资源与配额。升级到 MesaStack 企业版即可管理组织。',
   'organizations.upsell.featuresTitle': '企业版包含的能力',
   'organizations.upsell.feature.orgs': '创建组织来分组用户并隔离工作负载',
   'organizations.upsell.feature.members': '为每个组织管理成员与角色',

src/locales/zh-CN/resources.ts

@@ -52,7 +52,7 @@ export default {
   'resources.worker.current.version': '当前版本为 {version}',
   'resources.worker.select.command': '选择一个标签生成命令并使用复制按钮复制',
   'resources.worker.driver.install':
-    '在安装 GPUStack 之前，请安装<a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">所需的驱动程序和库</a>。',
+    '在安装 MesaStack 之前，请安装<a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">所需的驱动程序和库</a>。',
   'resources.worker.script.install': '脚本安装',
   'resources.worker.container.install': '容器安装(仅支持 Linux)',
   'resources.worker.cann.tips':
@@ -87,7 +87,7 @@ export default {
     '粘贴 <span class="bold-text">Token</span>。',
   'resources.register.worker.step7':
     '点击<span class="bold-text">重启</span>，应用设置。',
-  'resources.register.install.title': '在 {os} 上安装 GPUStack',
+  'resources.register.install.title': '在 {os} 上安装 MesaStack',
   'resources.register.download':
     '下载并安装<a href={url} target="_blank">安装包</a>，仅支持 {versions}。',
   'resource.register.maos.support': 'M 芯片，macOS 14+',
@@ -106,7 +106,7 @@ export default {
     '进入维护模式后，节点将停止调度新的模型实例部署任务，正在运行的实例不会受到影响。',
   'resources.worker.noCluster.tips': '当前无可用集群，请先创建集群再添加节点。',
   'resources.metrics.details': '监控',
-  'resoureces.worker.upgrade.tips': '请升级到与 GPUStack Server 版本一致。',
+  'resoureces.worker.upgrade.tips': '请升级到与 MesaStack Server 版本一致。',
   'resources.worker.version': '节点版本：{version}',
   'resources.server.version': 'Server 版本：{version}',
   'resources.worker.currentVersion': '当前版本：{version}',

src/locales/zh-CN/users.ts

@@ -27,16 +27,17 @@ export default {
   'users.password.length': '长度在6至64个字符之间',
   'users.password.modify.title': '修改密码',
   'users.password.modify.description': '为了确保您的账户安全，请修改初始密码',
+  'users.password.modify.tips': '定期更新密码有助于保护账户安全。',
   'users.password.confirm': '确认新密码',
   'users.password.confirm.empty': '请确认新密码',
   'users.password.confirm.error': '两次输入的密码不一致',
   'users.login.title': '登录',
-  'users.version.islatest': 'GPUStack {version} 已是最新版本',
-  'users.version.update': 'GPUStack {version} 版本可供更新',
+  'users.version.islatest': 'MesaStack {version} 已是最新版本',
+  'users.version.update': 'MesaStack {version} 版本可供更新',
   'users.settings.title': '用户设置',
   'users.status.activate': '启用账户',
   'users.status.deactivate': '停用账户',
   'users.status.inactiveAccount': '停用账户',
   'users.login.getInitialPassword':
-    '在 GPUStack Server 节点运行以下命令以获取初始管理员密码。'
+    '在 MesaStack Server 节点运行以下命令以获取初始管理员密码。'
 };

src/pages/_components/page-box.tsx

@@ -1,11 +1,9 @@
-import { ExtraContent } from '@/layouts/extraRender';
 import {
   PageContainer,
   RouteContext,
   type PageContainerProps
 } from '@ant-design/pro-components';
 import { useOverlayScroller } from '@gpustack/core-ui';
-import { Divider } from 'antd';
 import classNames from 'classnames';
 import { useContext, useEffect, useRef } from 'react';
 import pageBoxCss from './styles/page-box.less';
@@ -53,13 +51,7 @@ export const PageContainerInner: React.FC<
             {leftContent || pageContext.title}
           </div>
           <div className={pageBoxCss.right}>
-            {rightContent && (
-              <div>
-                {rightContent}
-                <Divider orientation="vertical" style={{ margin: '0 16px' }} />
-              </div>
-            )}
-            <ExtraContent />
+            {rightContent && <div>{rightContent}</div>}
           </div>
         </div>
         <div

src/pages/api-keys/components/add-apikey-modal/form.tsx

@@ -47,7 +47,12 @@ const APIKeyForm: React.FC<{
 
       <PluginExtraFields
         name="CreateOrgScopeField"
-        context={{ action, allowPersonal: true }}
+        context={{
+          action,
+          allowPersonal: true,
+          allowGlobal: true,
+          globalLabelId: 'scope.global'
+        }}
       />
 
       <Form.Item<FormData>

src/pages/api-keys/config/types.ts

@@ -6,10 +6,10 @@ export interface ListItem {
   masked_value?: string;
   user_id?: number;
   user_name?: string;
-  // The owning principal — an Org, or a USER principal when the key
-  // was created in someone's Personal Org. Read by the enterprise
-  // plugin's Organization column in the admin All-org view.
-  owner_principal_id?: number;
+  // The owning principal — an Org, or a USER principal for a
+  // personal-scope key, or NULL for an admin "All" mode key (no
+  // tenant pinning).
+  owner_principal_id?: number | null;
   created_at: string;
   updated_at: string;
   expires_at: string;

src/pages/cluster-management/cluster-detail.tsx

@@ -60,7 +60,7 @@ const ClusterDetailModal = () => {
         items={[
           {
             key: 'workers',
-            label: `Workers`,
+            label: intl.formatMessage({ id: 'resources.nodes' }),
             icon: <IconFont type="icon-resources" />,
             children: (
               <WorkerList clusterId={Number(id)} source="clusterDetail" />
@@ -68,7 +68,7 @@ const ClusterDetailModal = () => {
           },
           {
             key: 'gpus',
-            label: `GPUs`,
+            label: intl.formatMessage({ id: 'menu.resources.gpus' }),
             icon: <IconFont type="icon-gpu1" />,
             children: <GPUList clusterId={Number(id)} source="clusterDetail" />
           },

src/pages/cluster-management/clusters.tsx

@@ -194,7 +194,11 @@ const Clusters: React.FC = () => {
     });
   };
 
-  const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
+  const handleSelect = useMemoizedFn((val: any, row: ListItem, item?: any) => {
+    if (item?.onClick) {
+      item.onClick(row);
+      return;
+    }
     if (val === 'edit') {
       handleEditCluster(row);
     } else if (val === 'delete') {

src/pages/cluster-management/components/detail/cluster-basic.tsx

@@ -16,9 +16,9 @@ import { useClusterDetail } from '../../services/use-cluster-detail';
 
 const Container = styled.div`
   display: flex;
-  height: 168px;
+  height: 146px;
   .left {
-    padding: 16px 24px;
+    padding: 16px 0px;
     width: 124px;
     display: flex;
     flex-direction: column;
@@ -56,7 +56,7 @@ const Resources = styled.div`
   gap: 24px;
   align-items: center;
   line-height: 22px;
-  margin-top: 16px;
+  margin-top: 24px;
   .item {
     display: flex;
     align-items: center;
@@ -134,7 +134,6 @@ const ClusterBasic: React.FC<{ clusterId: number }> = ({ clusterId }) => {
                 )}
               </Title>
             }
-            layout="vertical"
             items={items}
           />
           <Resources>

src/pages/cluster-management/components/detail/cluster-system-load.tsx

@@ -47,10 +47,21 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
     }
   }, [clusterId]);
 
+  const generateStrokeColor = (percent: number) => {
+    if (percent <= 50) {
+      return 'var(--ant-color-success)';
+    }
+    if (percent <= 80) {
+      return 'var(--ant-color-warning)';
+    }
+    return 'var(--ant-color-error)';
+  };
+
   const renderStepsProgress = (
     percent: number,
     tag: { color: string; text: string }
   ) => {
+    const strokeColor = generateStrokeColor(percent);
     return (
       <Progress
         percent={percent}
@@ -58,6 +69,7 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
         size={50}
         strokeWidth={8}
         showInfo={true}
+        strokeColor={strokeColor}
         format={() => (
           <Tag
             color={tag?.color || 'blue'}

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -24,15 +24,18 @@ import {
   ProviderValueMap
 } from '../config';
 import { ClusterListItem } from '../config/types';
+
 const clusterActionList = [
   {
     key: 'edit',
     label: 'common.button.edit',
+    order: 0,
     icon: icons.EditOutlined
   },
   {
     label: 'resources.metrics.details',
     key: 'metrics',
+    order: 10,
     icon: (
       <span className="flex-center">
         <GrafanaIcon style={{ width: 14, height: 14 }}></GrafanaIcon>
@@ -44,6 +47,7 @@ const clusterActionList = [
     label: 'resources.button.create',
     provider: ProviderValueMap.Docker,
     locale: true,
+    order: 20,
     icon: icons.DockerOutlined
   },
   {
@@ -51,6 +55,7 @@ const clusterActionList = [
     label: 'clusters.button.register',
     provider: ProviderValueMap.Kubernetes,
     locale: true,
+    order: 30,
     icon: icons.KubernetesOutlined
   },
   {
@@ -58,16 +63,20 @@ const clusterActionList = [
     label: 'clusters.button.addNodePool',
     provider: ProviderValueMap.DigitalOcean,
     locale: true,
+    order: 40,
     icon: icons.Catalog1
   },
   {
     key: 'isDefault',
     label: 'clusters.form.setDefault',
+    locale: true,
+    order: 50,
     icon: icons.StarOutlined
   },
   {
     key: 'delete',
     label: 'common.button.delete',
+    order: 999,
     icon: icons.DeleteOutlined,
     props: {
       danger: true
@@ -76,7 +85,7 @@ const clusterActionList = [
 ];
 
 const useClusterColumns = (
-  handleSelect: (val: string, record: ClusterListItem) => void,
+  handleSelect: (val: string, record: ClusterListItem, item?: any) => void,
   onCellClick?: (record: ClusterListItem, dataIndex: string) => void
 ): SealColumnProps[] => {
   const intl = useIntl();
@@ -88,11 +97,15 @@ const useClusterColumns = (
   // `clusterDetail.linkableName`. Without a plugin we render the
   // name as plain text (matches the pre-restore behaviour); with one
   // we use Typography.Link wired to the parent's `onCellClick`.
-  const nameLinkable: boolean =
-    !!getGPUStackPlugin()?.clusterDetail?.linkableName;
+
+  const { linkableName: nameLinkable, useGenerateActions } =
+    getGPUStackPlugin()?.clusterDetail || {};
+
+  const actionList =
+    useGenerateActions?.({ actions: clusterActionList }) || clusterActionList;
 
   const setActionsItems = (row: ClusterListItem) => {
-    return clusterActionList.filter((item) => {
+    return actionList.filter((item: any) => {
       if (item.provider) {
         return item.provider === row.provider;
       }
@@ -182,7 +195,7 @@ const useClusterColumns = (
         )
       },
       {
-        title: intl.formatMessage({ id: 'menu.resources.gpus' }),
+        title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
         dataIndex: 'gpus',
         span: 2,
         sorter: tableSorter(3),
@@ -238,7 +251,9 @@ const useClusterColumns = (
         render: (value: string, record: ClusterListItem) => (
           <DropdownButtons
             items={setActionsItems(record)}
-            onSelect={(val) => handleSelect(val, record)}
+            onSelect={(val: string, item: any) =>
+              handleSelect(val, record, item)
+            }
           ></DropdownButtons>
         )
       }

src/pages/dashboard/config/index.ts

@@ -225,29 +225,77 @@ export const toUsagePieData = (
   return aggregateUsageByGroup(data, groupBy, metric);
 };
 
-export const toUsageRankData = (
+export type UsageTokenMetric = 'input_tokens' | 'output_tokens';
+
+export interface UsageTokenSeriesDef {
+  name: string;
+  key: UsageTokenMetric;
+  color: string;
+}
+
+// Aggregates each group's input/output tokens into a stacked HBarChart shape,
+// so a single bar shows prompt (input) and completion (output) tokens side by
+// side. Rows sharing a group (e.g. the same user across dates) are summed, then
+// ranked by combined tokens and capped at the top 10.
+export const toUsageTokenBreakdownData = (
   data: UsageBreakdownResponse | null | undefined,
   groupBy: UsageGroupBy,
-  seriesName: string,
-  color: string
+  seriesDefs: UsageTokenSeriesDef[]
 ) => {
-  const items = aggregateUsageByGroup(data, groupBy, 'total_tokens');
-  const names = items.map((item) => item.name);
+  const itemMap = new Map<string, { total: number; values: number[] }>();
+  const items = getUsageResponseItems(data);
+
+  items.forEach((item: BreakdownItem) => {
+    const name = buildUsageLabel(item, groupBy);
+    const entry = itemMap.get(name) || {
+      total: 0,
+      values: seriesDefs.map(() => 0)
+    };
+
+    seriesDefs.forEach((def, index) => {
+      const value = Number((item as any)?.[def.key] ?? 0);
+      entry.values[index] += value;
+      entry.total += value;
+    });
+
+    itemMap.set(name, entry);
+  });
+
+  const ranked = Array.from(itemMap.entries())
+    .filter(([, entry]) => entry.total > 0)
+    .sort((a, b) => b[1].total - a[1].total)
+    .slice(0, 10);
+
+  const names = ranked.map(([name]) => name);
+
+  // Round only the outer ends of the stacked bar; the seam where the input and
+  // output segments meet stays square ([topLeft, topRight, bottomRight, bottomLeft]).
+  const radius = 2;
+  const getBorderRadius = (index: number, count: number) => {
+    if (count <= 1) {
+      return [radius, radius, radius, radius];
+    }
+    if (index === 0) {
+      return [radius, 0, 0, radius];
+    }
+    if (index === count - 1) {
+      return [0, radius, radius, 0];
+    }
+    return [0, 0, 0, 0];
+  };
 
   return {
     names,
-    series: [
-      {
-        name: seriesName,
-        color,
-        data: items.map((item) => ({
-          name: item.name,
-          value: item.value,
-          itemStyle: {
-            borderRadius: [2, 2, 2, 2]
-          }
-        }))
-      }
-    ]
+    series: seriesDefs.map((def, index) => ({
+      name: def.name,
+      color: def.color,
+      data: ranked.map(([name, entry]) => ({
+        name,
+        value: entry.values[index],
+        itemStyle: {
+          borderRadius: getBorderRadius(index, seriesDefs.length)
+        }
+      }))
+    }))
   };
 };

src/pages/dashboard/hooks/use-top-token-usage-by-user.ts

@@ -1,20 +1,17 @@
 import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
-import { useIntl } from '@umijs/max';
 import { useEffect, useMemo } from 'react';
 import {
   baseColorMap,
   DashboardUsageCommonParams,
-  toUsageRankData
+  toUsageTokenBreakdownData
 } from '../config';
 
 export default function useTopTokenUsageByUser(
   commonParams: DashboardUsageCommonParams
 ) {
-  const intl = useIntl();
   const query = useQueryTimeSeriesData({
     key: 'topTokenUsageByUserData'
   });
-  const tokenUsageText = intl.formatMessage({ id: 'dashboard.tokens' });
 
   useEffect(() => {
     query
@@ -31,13 +28,19 @@ export default function useTopTokenUsageByUser(
 
   const rankData = useMemo(
     () =>
-      toUsageRankData(
-        query.detailData,
-        'user',
-        tokenUsageText,
-        baseColorMap.base
-      ),
-    [query.detailData, tokenUsageText]
+      toUsageTokenBreakdownData(query.detailData, 'user', [
+        {
+          name: 'Prompt Tokens',
+          key: 'input_tokens',
+          color: baseColorMap.base
+        },
+        {
+          name: 'Completion Tokens',
+          key: 'output_tokens',
+          color: baseColorMap.baseR3
+        }
+      ]),
+    [query.detailData]
   );
 
   return {

src/pages/gpu-service/instances/config/index.ts

@@ -48,7 +48,7 @@ export const GPUStackFailedStatuses = [
 export const InstanceStatusLabelMap: Record<string, string> = {
   // === K8s Statuses ===
   ...Object.fromEntries(K8SStatuses.map((status) => [status, status])),
-  // === GPUStack Statuses no logs and events===
+  // === MesaStack Statuses no logs and events===
   [InstanceStatusValueMap.Deleting]: 'Deleting',
   [InstanceStatusValueMap.Stopping]: 'Stopping',
   [InstanceStatusValueMap.Stopped]: 'Stopped',

src/pages/gpu-service/instances/config/types.ts

@@ -111,6 +111,7 @@ export interface ListItem extends FormData {
   updated_at: string;
   deleted_at?: string | null;
   creator_id?: number | null;
+  clusterId: number;
   status?: InstanceStatus | null;
 }
 

src/pages/gpu-service/public-keys/index.tsx

@@ -87,10 +87,25 @@ const GPUServicePublicKeys: React.FC = () => {
     if (val === 'edit') {
       handleEdit(row);
     } else if (val === 'delete') {
-      handleDelete({ ...row, name: row.name as string });
+      handleDelete(
+        { ...row, name: row.name as string },
+        {
+          tips: intl.formatMessage({
+            id: 'gpuservice.publicKey.delete.tips'
+          })
+        }
+      );
     }
   });
 
+  const handleDeleteByBatch = () => {
+    handleDeleteBatch({
+      tips: intl.formatMessage({
+        id: 'gpuservice.publicKey.delete.tips'
+      })
+    });
+  };
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     return (
@@ -130,7 +145,7 @@ const GPUServicePublicKeys: React.FC = () => {
           })}
           buttonText={intl.formatMessage({ id: 'gpuservice.publicKey.add' })}
           handleSearch={handleSearch}
-          handleDeleteByBatch={handleDeleteBatch}
+          handleDeleteByBatch={handleDeleteByBatch}
           handleClickPrimary={handleAdd}
           handleInputChange={handleNameChange}
           rowSelection={rowSelection}

src/pages/login/apis/index.ts

@@ -9,9 +9,6 @@ export const AUTH_API = '/auth';
 
 export const AUTH_CONFIG_API = '/auth/config';
 
-export const AUTH_OIDC_LOGIN_API = '/auth/oidc/login';
-export const AUTH_SAML_LOGIN_API = '/auth/saml/login';
-
 export const login = async (
   params: { username: string; password: string },
   options?: any
@@ -53,10 +50,18 @@ export const updatePassword = async (params: any) => {
   });
 };
 
+export type ExternalAuth = {
+  // Provider kind (``OIDC`` / ``SAML`` / ``CAS`` / …). Stays a free-form
+  // string so adding a new provider on the backend doesn't require a
+  // TypeScript change here.
+  type: string;
+  // Browser-facing login URL the SSO button should navigate to.
+  login_url: string;
+};
+
 export const fetchAuthConfig = async () => {
   return request<{
-    is_saml: boolean;
-    is_oidc: boolean;
+    external_auth: ExternalAuth | null;
     first_time_setup: boolean;
     get_initial_password_command: string;
   }>(AUTH_CONFIG_API);

src/pages/login/components/local-user-form.tsx

@@ -45,8 +45,6 @@ interface LocalUserFormProps {
   form: FormInstance;
   loading?: boolean;
   loginOption: {
-    saml: boolean;
-    oidc: boolean;
     first_time_setup: boolean;
     get_initial_password_command: string;
   };

src/pages/login/components/login-form.tsx

@@ -182,18 +182,12 @@ const LoginForm = () => {
   };
 
   const handleLoginWithThirdParty = () => {
-    if (SSOAuth.options.oidc) {
-      SSOAuth.loginWithOIDC();
-    } else if (SSOAuth.options.saml) {
-      SSOAuth.loginWithSAML();
-    }
+    SSOAuth.loginWithExternalAuth();
     setLoading(true);
     setAuthError(null);
   };
 
-  const hasThirdPartyLogin = useMemo(() => {
-    return SSOAuth.options.oidc || SSOAuth.options.saml;
-  }, [SSOAuth.options]);
+  const hasThirdPartyLogin = !!SSOAuth.options.external_auth;
 
   const isThirdPartyAuthHandling = useMemo(() => {
     return loading && !authError;
@@ -205,18 +199,8 @@ const LoginForm = () => {
 
     return (
       <Buttons>
-        {SSOAuth.options.oidc && (
-          <ButtonWrapper onClick={SSOAuth.loginWithOIDC}>
-            <ButtonText>
-              {intl.formatMessage(
-                { id: 'common.external.login' },
-                { type: 'SSO' }
-              )}
-            </ButtonText>
-          </ButtonWrapper>
-        )}
-        {SSOAuth.options.saml && (
-          <ButtonWrapper onClick={SSOAuth.loginWithSAML}>
+        {SSOAuth.options.external_auth && (
+          <ButtonWrapper onClick={SSOAuth.loginWithExternalAuth}>
             <ButtonText>
               {intl.formatMessage(
                 { id: 'common.external.login' },

src/pages/login/hooks/use-sso-auth.ts

@@ -1,15 +1,13 @@
 // hooks/useSSOAuth.ts
 import { history, useIntl } from '@umijs/max';
 import { useEffect, useState } from 'react';
-import {
-  AUTH_OIDC_LOGIN_API,
-  AUTH_SAML_LOGIN_API,
-  fetchAuthConfig
-} from '../apis';
+import { ExternalAuth, fetchAuthConfig } from '../apis';
 
 type LoginOption = {
-  saml: boolean;
-  oidc: boolean;
+  // Active external auth provider, or ``null`` when only local login is
+  // configured. Drives the SSO button: when set, render a button that
+  // navigates to ``external_auth.login_url``.
+  external_auth: ExternalAuth | null;
   first_time_setup: boolean;
   get_initial_password_command: string;
 };
@@ -26,8 +24,7 @@ export function useSSOAuth({
   onLoading?: (loading: boolean) => void;
 }) {
   const [loginOption, setLoginOption] = useState<LoginOption>({
-    saml: false,
-    oidc: false,
+    external_auth: null,
     first_time_setup: false,
     get_initial_password_command: ''
   });
@@ -38,29 +35,28 @@ export function useSSOAuth({
   const params = new URLSearchParams(location.search);
   const sso = params.get('sso');
 
-  const oidcLogin = () => {
-    window.location.href = AUTH_OIDC_LOGIN_API;
-  };
-
-  const samlLogin = () => {
-    window.location.href = AUTH_SAML_LOGIN_API;
+  const loginWithExternalAuth = (auth: ExternalAuth | null) => {
+    if (auth) {
+      window.location.href = auth.login_url;
+    }
   };
 
   const init = async () => {
     try {
-      const { is_oidc, is_saml, ...rest } = await fetchAuthConfig();
+      const { external_auth, ...rest } = await fetchAuthConfig();
       setLoginOption({
         ...rest,
-        oidc: !!is_oidc,
-        saml: !!is_saml
+        external_auth: external_auth ?? null
       });
       if (sso) {
         onLoading?.(true);
-        if (is_oidc) {
-          oidcLogin();
-        } else if (is_saml) {
-          samlLogin();
+        if (external_auth) {
+          loginWithExternalAuth(external_auth);
         } else {
+          // ``?sso`` deep-link landed on a server with no external auth
+          // configured. Surface the error AND release the loading
+          // state — otherwise the form is stuck on the spinner.
+          onLoading?.(false);
           onError?.(
             new Error(intl.formatMessage({ id: 'common.sso.noConfig' }))
           );
@@ -68,12 +64,15 @@ export function useSSOAuth({
       }
     } catch (error: any) {
       setLoginOption({
-        oidc: false,
-        saml: false,
+        external_auth: null,
         first_time_setup: false,
         get_initial_password_command: ''
       });
       onLoading?.(false);
+      // ``fetchAuthConfig`` failed (network, server 5xx, …). Without
+      // propagating, the login UI silently falls back to local-only —
+      // which can mask a real ``?sso`` redirect failure.
+      onError?.(error);
     }
   };
 
@@ -84,7 +83,7 @@ export function useSSOAuth({
   return {
     isSSOLogin: !!sso,
     options: loginOption,
-    loginWithOIDC: oidcLogin,
-    loginWithSAML: samlLogin
+    loginWithExternalAuth: () =>
+      loginWithExternalAuth(loginOption.external_auth)
   };
 }

src/pages/playground/speech/forms/tts-form.tsx

@@ -110,12 +110,15 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       const newList = updateVoiceOptions(model!);
       setModelMeta(model?.meta || {});
 
+      form.resetFields();
+
       const values = {
         ..._.pick(model?.meta || {}, MetaFields),
         task_type: model?.meta?.task_type,
         model: value,
         language: model?.meta?.languages?.[0] || '',
-        voice: newList[0]?.value
+        voice: newList[0]?.value,
+        x_vector_only_mode: model?.meta?.x_vector_only_mode || null
       };
       updatateParams(values);
       form.setFieldsValue(values);

src/pages/profile/components/appearance.tsx

@@ -1,92 +1,150 @@
 import useUserSettings from '@/hooks/use-user-settings';
 import langConfigMap from '@/locales/lang-config-map';
-import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { CheckCircleFilled } from '@ant-design/icons';
 import { BaseSelect } from '@gpustack/core-ui';
 import { getAllLocales, setLocale, useIntl } from '@umijs/max';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
-import styled from 'styled-components';
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px 0;
-`;
+import { SettingRow, SettingsGroup } from './settings-group';
+import ThemePreview, { PreviewMode } from './theme-preview';
 
-const SettingsItem = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 300px;
-  .label {
+const useStyles = createStyles(({ token, css }) => ({
+  cards: css`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+  `,
+  card: css`
+    padding: 8px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG + 2}px;
+    background: ${token.colorBgContainer};
+    cursor: pointer;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:hover {
+      border-color: ${token.colorPrimaryBorderHover};
+    }
+  `,
+  cardActive: css`
+    border-color: ${token.colorPrimary};
+    box-shadow: 0 0 0 1px ${token.colorPrimary};
+  `,
+  meta: css`
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    padding: 12px 8px 6px;
+  `,
+  label: css`
     font-size: 14px;
-    font-weight: var(--font-weight-500);
-  }
-`;
+    font-weight: var(--font-weight-medium);
+    color: ${token.colorText};
+  `,
+  check: css`
+    font-size: 18px;
+    color: ${token.colorPrimary};
+  `,
+  radio: css`
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1.5px solid ${token.colorBorder};
+  `
+}));
 
 const Appearance: React.FC = () => {
   const { setTheme, userSettings } = useUserSettings();
-
   const intl = useIntl();
+  const { styles } = useStyles();
   const allLocals = getAllLocales();
 
-  const ThemeOptions = [
+  const themeOptions: { value: PreviewMode; label: string }[] = [
     {
       value: 'light',
-      label: intl.formatMessage({ id: 'common.appearance.light' }),
-      icon: <SunOutlined />
+      label: intl.formatMessage({ id: 'common.appearance.lightmode' })
     },
     {
       value: 'realDark',
-      label: intl.formatMessage({ id: 'common.appearance.dark' }),
-      icon: <MoonOutlined />
+      label: intl.formatMessage({ id: 'common.appearance.darkmode' })
     },
     {
       value: 'auto',
-      label: intl.formatMessage({ id: 'common.appearance.system' }),
-      icon: <SunOutlined />
+      label: intl.formatMessage({ id: 'common.appearance.system' })
     }
   ];
 
-  const handleOnChange = (value: 'light' | 'realDark' | 'auto') => {
-    setTheme(value);
-  };
-
   const languageOptions = allLocals.map((locale) => ({
     value: locale,
     label: _.get(langConfigMap, [locale, 'label'])
   }));
 
+  const handleSelectTheme = (value: PreviewMode) => {
+    setTheme(value);
+  };
+
   return (
-    <Wrapper>
-      <SettingsItem>
-        <span className="label">
-          <span>{intl.formatMessage({ id: 'common.appearance.theme' })}</span>
-        </span>
-        <BaseSelect
-          defaultValue={'light'}
-          value={userSettings.mode}
-          options={ThemeOptions}
-          onChange={handleOnChange}
-          style={{ width: 200 }}
-        ></BaseSelect>
-      </SettingsItem>
-      <SettingsItem>
-        <span className="label">
-          <span>{intl.formatMessage({ id: 'common.settings.language' })}</span>
-        </span>
-        <BaseSelect
-          value={intl.locale}
-          options={languageOptions}
-          onChange={(value) => {
-            setLocale(value, false);
-          }}
-          style={{ width: 200 }}
-        ></BaseSelect>
-      </SettingsItem>
-    </Wrapper>
+    <SettingsGroup>
+      <SettingRow
+        title={intl.formatMessage({ id: 'common.appearance.theme' })}
+        description={intl.formatMessage({ id: 'common.appearance.tips' })}
+      >
+        <div className={styles.cards}>
+          {themeOptions.map((option) => {
+            const active = userSettings.mode === option.value;
+            return (
+              <div
+                key={option.value}
+                role="radio"
+                aria-checked={active}
+                tabIndex={0}
+                className={classNames(styles.card, {
+                  [styles.cardActive]: active
+                })}
+                onClick={() => handleSelectTheme(option.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleSelectTheme(option.value);
+                  }
+                }}
+              >
+                <ThemePreview mode={option.value} />
+                <div className={styles.meta}>
+                  <span className={styles.label}>{option.label}</span>
+                  {active ? (
+                    <CheckCircleFilled className={styles.check} />
+                  ) : (
+                    <span className={styles.radio} />
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </SettingRow>
+
+      <SettingRow
+        title={intl.formatMessage({ id: 'common.settings.language' })}
+        description={intl.formatMessage({
+          id: 'common.settings.language.tips'
+        })}
+        extra={
+          <BaseSelect
+            value={intl.locale}
+            options={languageOptions}
+            onChange={(value: string) => {
+              setLocale(value, false);
+            }}
+            style={{ width: 200 }}
+          />
+        }
+      />
+    </SettingsGroup>
   );
 };
 

src/pages/profile/components/modify-password-form.tsx

@@ -0,0 +1,132 @@
+import { PasswordReg } from '@/config';
+import { INPUT_WIDTH } from '@/constants';
+import useSubmitLock from '@/hooks/use-submit-lock';
+import { updatePassword } from '@/pages/login/apis';
+import { Input as CInput, FormButtons } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import React from 'react';
+
+interface FormData {
+  new_password: string;
+  current_password: string;
+  confirm_password?: string;
+}
+
+interface ModifyPasswordFormProps {
+  onCancel: () => void;
+  onSuccess?: () => void;
+}
+
+const ModifyPasswordForm: React.FC<ModifyPasswordFormProps> = ({
+  onCancel,
+  onSuccess
+}) => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  const { guard, run, release } = useSubmitLock();
+
+  const handleSubmit = () => {
+    guard(() => form.submit());
+  };
+
+  const onFinish = async (values: FormData) => {
+    await run(async () => {
+      await updatePassword({
+        new_password: values.new_password,
+        current_password: values.current_password
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      onSuccess?.();
+    });
+  };
+
+  return (
+    <Form
+      name="modifyPasswordForm"
+      form={form}
+      onFinish={onFinish}
+      onFinishFailed={release}
+      preserve={false}
+    >
+      <Form.Item<FormData>
+        name="current_password"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: intl.formatMessage({
+                  id: 'users.form.currentpassword'
+                })
+              }
+            )
+          }
+        ]}
+      >
+        <CInput.Password
+          autoComplete="current-password"
+          label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+          required
+          style={{ width: INPUT_WIDTH.default }}
+        />
+      </Form.Item>
+      <Form.Item<FormData>
+        name="new_password"
+        rules={[
+          {
+            required: true,
+            pattern: PasswordReg,
+            message: intl.formatMessage({
+              id: 'users.form.rule.password'
+            })
+          }
+        ]}
+      >
+        <CInput.Password
+          autoComplete="new-password"
+          label={intl.formatMessage({ id: 'users.form.newpassword' })}
+          required
+          style={{ width: INPUT_WIDTH.default }}
+        />
+      </Form.Item>
+      <Form.Item
+        name="confirm_password"
+        dependencies={['new_password']}
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage({
+              id: 'users.password.confirm.empty'
+            })
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('new_password') === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(
+                new Error(
+                  intl.formatMessage({ id: 'users.password.confirm.error' })
+                )
+              );
+            }
+          })
+        ]}
+      >
+        <CInput.Password
+          required
+          autoComplete="new-password"
+          style={{ width: INPUT_WIDTH.default }}
+          label={intl.formatMessage({ id: 'users.password.confirm' })}
+        />
+      </Form.Item>
+      <FormButtons htmlType="submit" onCancel={onCancel} showCancel />
+    </Form>
+  );
+};
+
+ModifyPasswordForm.displayName = 'ModifyPasswordForm';
+
+export default ModifyPasswordForm;

src/pages/profile/components/public-key.tsx

@@ -1,36 +0,0 @@
-import { INPUT_WIDTH } from '@/constants';
-import { Textarea } from '@gpustack/core-ui';
-import { useIntl } from '@umijs/max';
-import { Button, Form } from 'antd';
-import React from 'react';
-
-interface PublicKeyFormData {
-  public_key?: string;
-}
-
-const PublicKey: React.FC = () => {
-  const intl = useIntl();
-  const [form] = Form.useForm<PublicKeyFormData>();
-
-  return (
-    <Form style={{ width: '524px' }} name="publicKeyForm" form={form}>
-      <Form.Item<PublicKeyFormData> name="public_key">
-        <Textarea
-          label="SSH 公钥"
-          placeholder="将您的 SSH 公钥粘贴到此处"
-          trim={false}
-          alwaysFocus
-          autoSize={{ minRows: 4, maxRows: 8 }}
-          style={{ width: INPUT_WIDTH.default }}
-        ></Textarea>
-      </Form.Item>
-      <Button type="primary" style={{ width: 120, marginTop: 100 }}>
-        {intl.formatMessage({ id: 'common.button.save' })}
-      </Button>
-    </Form>
-  );
-};
-
-PublicKey.displayName = 'PublicKey';
-
-export default PublicKey;

src/pages/profile/components/security.tsx

@@ -0,0 +1,39 @@
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import ModifyPasswordForm from './modify-password-form';
+import { SettingRow, SettingsGroup } from './settings-group';
+
+const Security: React.FC = () => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <SettingsGroup>
+      <SettingRow
+        title={intl.formatMessage({ id: 'users.form.updatepassword' })}
+        description={intl.formatMessage({
+          id: 'users.password.modify.tips'
+        })}
+        extra={
+          !open && (
+            <Button onClick={() => setOpen(true)}>
+              {intl.formatMessage({ id: 'users.form.updatepassword' })}
+            </Button>
+          )
+        }
+      >
+        {open && (
+          <ModifyPasswordForm
+            onCancel={() => setOpen(false)}
+            onSuccess={() => setOpen(false)}
+          />
+        )}
+      </SettingRow>
+    </SettingsGroup>
+  );
+};
+
+Security.displayName = 'Security';
+
+export default Security;

src/pages/profile/components/settings-group.tsx

@@ -0,0 +1,84 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+const useStyles = createStyles(({ token, css }) => ({
+  group: css`
+    /* Match the page panel surface (page-box.less): 8px radius + the
+       lighter container border, rather than the heavier component token. */
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+    background: ${token.colorBgContainer};
+    overflow: hidden;
+  `,
+  row: css`
+    padding: 16px 20px;
+
+    & + & {
+      border-top: 1px solid ${token.colorBorderSecondary};
+    }
+  `,
+  head: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+  `,
+  info: css`
+    min-width: 0;
+  `,
+  title: css`
+    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+    color: ${token.colorText};
+    line-height: 22px;
+  `,
+  description: css`
+    margin-top: 2px;
+    font-size: 13px;
+    color: ${token.colorTextTertiary};
+    line-height: 20px;
+  `,
+  extra: css`
+    flex-shrink: 0;
+  `,
+  body: css`
+    margin-top: 16px;
+  `
+}));
+
+export const SettingsGroup: React.FC<{ children: React.ReactNode }> = ({
+  children
+}) => {
+  const { styles } = useStyles();
+  return <div className={styles.group}>{children}</div>;
+};
+
+interface SettingRowProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const SettingRow: React.FC<SettingRowProps> = ({
+  title,
+  description,
+  extra,
+  children
+}) => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.row}>
+      <div className={styles.head}>
+        <div className={styles.info}>
+          <div className={styles.title}>{title}</div>
+          {description && (
+            <div className={styles.description}>{description}</div>
+          )}
+        </div>
+        {extra && <div className={styles.extra}>{extra}</div>}
+      </div>
+      {children && <div className={styles.body}>{children}</div>}
+    </div>
+  );
+};

src/pages/profile/components/settings-section.tsx

@@ -0,0 +1,53 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+const useStyles = createStyles(({ token, css }) => ({
+  section: css`
+    & + & {
+      margin-top: 40px;
+    }
+  `,
+  header: css`
+    margin-bottom: 16px;
+  `,
+  title: css`
+    margin: 0;
+    font-size: 16px;
+    font-weight: var(--font-weight-medium);
+    color: ${token.colorTextHeading};
+    line-height: 24px;
+  `,
+  description: css`
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: ${token.colorTextTertiary};
+    line-height: 20px;
+  `
+}));
+
+interface SettingsSectionProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const SettingsSection: React.FC<SettingsSectionProps> = ({
+  title,
+  description,
+  children
+}) => {
+  const { styles } = useStyles();
+  return (
+    <section className={styles.section}>
+      <div className={styles.header}>
+        <h3 className={styles.title}>{title}</h3>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {children}
+    </section>
+  );
+};
+
+SettingsSection.displayName = 'SettingsSection';
+
+export default SettingsSection;

src/pages/profile/components/theme-preview.tsx

@@ -0,0 +1,119 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+export type PreviewMode = 'light' | 'realDark' | 'auto';
+
+const PALETTE = {
+  light: {
+    surface: '#ffffff',
+    bar: '#e7ebf2',
+    block: '#f1f4f9',
+    accent: '#cdd7e8'
+  },
+  dark: {
+    surface: '#0f1729',
+    bar: '#1d2740',
+    block: '#27324d',
+    accent: '#39445f'
+  }
+};
+
+const useStyles = createStyles(({ css }) => ({
+  preview: css`
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    pointer-events: none;
+    user-select: none;
+  `,
+  half: css`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    gap: 8px;
+    overflow: hidden;
+  `,
+  topbar: css`
+    height: 8px;
+    border-radius: 3px;
+    flex-shrink: 0;
+  `,
+  body: css`
+    flex: 1;
+    display: flex;
+    gap: 8px;
+  `,
+  sidebar: css`
+    width: 22%;
+    border-radius: 4px;
+  `,
+  main: css`
+    flex: 1;
+    border-radius: 4px;
+  `,
+  footer: css`
+    height: 6px;
+    border-radius: 3px;
+    flex-shrink: 0;
+  `,
+  systemIcon: css`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    color: rgba(255, 255, 255, 0.55);
+    mix-blend-mode: difference;
+    z-index: 2;
+  `,
+  systemWrap: css`
+    position: relative;
+  `
+}));
+
+const Mockup: React.FC<{ tone: 'light' | 'dark'; flex?: number }> = ({
+  tone,
+  flex = 1
+}) => {
+  const { styles } = useStyles();
+  const c = PALETTE[tone];
+  return (
+    <div
+      className={styles.half}
+      style={{ background: c.surface, flex, minWidth: 0 }}
+    >
+      <div className={styles.topbar} style={{ background: c.accent }} />
+      <div className={styles.body}>
+        <div className={styles.sidebar} style={{ background: c.block }} />
+        <div className={styles.main} style={{ background: c.block }} />
+      </div>
+      <div className={styles.footer} style={{ background: c.bar }} />
+    </div>
+  );
+};
+
+const ThemePreview: React.FC<{ mode: PreviewMode }> = ({ mode }) => {
+  const { styles } = useStyles();
+
+  if (mode === 'auto') {
+    return (
+      <div className={`${styles.preview} ${styles.systemWrap}`}>
+        <Mockup tone="light" />
+        <Mockup tone="dark" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.preview}>
+      <Mockup tone={mode === 'realDark' ? 'dark' : 'light'} />
+    </div>
+  );
+};
+
+ThemePreview.displayName = 'ThemePreview';
+
+export default ThemePreview;

src/pages/profile/index-copy.tsx

@@ -0,0 +1,69 @@
+import useTabActive from '@/hooks/use-tab-active';
+import { useIntl, useModel } from '@umijs/max';
+import { Tabs, TabsProps } from 'antd';
+import React, { useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import PageBox from '../_components/page-box';
+import Appearance from './components/appearance';
+import ModifyPasswordn from './components/modify-password';
+
+const Wrapper = styled.div`
+  .ant-page-header-heading {
+    padding-inline: 8px;
+  }
+`;
+
+const Profile: React.FC = () => {
+  const intl = useIntl();
+  const { initialState, setInitialState } = useModel('@@initialState') || {};
+  const { setTabActive, getTabActive, tabsMap } = useTabActive();
+  const [activeKey, setActiveKey] = useState(
+    initialState?.currentUser?.source === 'Local'
+      ? 'modify-password'
+      : 'appearance'
+  );
+
+  const items: TabsProps['items'] = useMemo(() => {
+    if (initialState?.currentUser?.source !== 'Local') {
+      return [
+        {
+          key: 'appearance',
+          label: intl.formatMessage({ id: 'common.appearance' }),
+          children: <Appearance />
+        }
+      ];
+    }
+    return [
+      {
+        key: 'modify-password',
+        label: intl.formatMessage({ id: 'users.form.updatepassword' }),
+        children: <ModifyPasswordn />
+      },
+      {
+        key: 'appearance',
+        label: intl.formatMessage({ id: 'common.appearance' }),
+        children: <Appearance />
+      }
+    ];
+  }, [intl, initialState?.currentUser?.source]);
+
+  const handleChangeTab = useCallback((key: string) => {
+    setActiveKey(key);
+    setTabActive(tabsMap.userSettings, key);
+  }, []);
+
+  return (
+    <PageBox>
+      <Tabs
+        activeKey={activeKey}
+        onChange={handleChangeTab}
+        items={items}
+        type="card"
+      />
+    </PageBox>
+  );
+};
+
+Profile.displayName = 'Profile';
+
+export default Profile;

src/pages/profile/index.tsx

@@ -1,65 +1,49 @@
-import useTabActive from '@/hooks/use-tab-active';
 import { useIntl, useModel } from '@umijs/max';
-import { Tabs, TabsProps } from 'antd';
-import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { createStyles } from 'antd-style';
+import React from 'react';
 import PageBox from '../_components/page-box';
 import Appearance from './components/appearance';
-import ModifyPasswordn from './components/modify-password';
+import Security from './components/security';
+import SettingsSection from './components/settings-section';
 
-const Wrapper = styled.div`
-  .ant-page-header-heading {
-    padding-inline: 8px;
-  }
-`;
+const useStyles = createStyles(({ css }) => ({
+  wrapper: css`
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 8px 0 40px;
+  `
+}));
 
 const Profile: React.FC = () => {
   const intl = useIntl();
-  const { initialState, setInitialState } = useModel('@@initialState') || {};
-  const { setTabActive, getTabActive, tabsMap } = useTabActive();
-  const [activeKey, setActiveKey] = useState(
-    initialState?.currentUser?.source === 'Local'
-      ? 'modify-password'
-      : 'appearance'
-  );
-
-  const items: TabsProps['items'] = useMemo(() => {
-    if (initialState?.currentUser?.source !== 'Local') {
-      return [
-        {
-          key: 'appearance',
-          label: intl.formatMessage({ id: 'common.appearance' }),
-          children: <Appearance />
-        }
-      ];
-    }
-    return [
-      {
-        key: 'modify-password',
-        label: intl.formatMessage({ id: 'users.form.updatepassword' }),
-        children: <ModifyPasswordn />
-      },
-      {
-        key: 'appearance',
-        label: intl.formatMessage({ id: 'common.appearance' }),
-        children: <Appearance />
-      }
-    ];
-  }, [intl, initialState?.currentUser?.source]);
-
-  const handleChangeTab = useCallback((key: string) => {
-    setActiveKey(key);
-    setTabActive(tabsMap.userSettings, key);
-  }, []);
+  const { styles } = useStyles();
+  const { initialState } = useModel('@@initialState') || {};
+  const isLocalUser = initialState?.currentUser?.source === 'Local';
 
   return (
     <PageBox>
-      <Tabs
-        activeKey={activeKey}
-        onChange={handleChangeTab}
-        items={items}
-        type="card"
-      />
+      <div className={styles.wrapper}>
+        <SettingsSection
+          title={intl.formatMessage({ id: 'common.appearance' })}
+          description={intl.formatMessage({
+            id: 'common.appearance.description'
+          })}
+        >
+          <Appearance />
+        </SettingsSection>
+
+        {isLocalUser && (
+          <SettingsSection
+            title={intl.formatMessage({ id: 'common.security' })}
+            description={intl.formatMessage({
+              id: 'common.security.description'
+            })}
+          >
+            <Security />
+          </SettingsSection>
+        )}
+      </div>
     </PageBox>
   );
 };

src/pages/resources/apis/index.ts

@@ -44,7 +44,7 @@ export async function downloadWorkerPrivateKey({
 export async function queryWorkersList<T extends Record<string, any>>(
   params: Global.SearchParams & T,
   options?: {
-    token: any;
+    token?: any;
     skipErrorHandler?: boolean;
   }
 ) {

src/pages/usage/apis/resource.ts

@@ -11,6 +11,7 @@
  * whole-machine SKU model meters runtime, not decomposed components.
  */
 import { request } from '@umijs/max';
+import { instanceTypeSeriesLabel } from '../utils/format-instance-type';
 
 export interface ResourceUsageFilters {
   creator_ids?: number[];
@@ -73,6 +74,10 @@ export interface ResourceBreakdownItem extends ResourceBreakdownSummary {
   unit_cpu_milli?: number;
   unit_memory_mib?: number;
   vram_mib?: number;
+  // Instance totals (requested cpu/ram) — the real size, so CPU instance types
+  // show "CPU Only · 2 vCPU · 4 GB" instead of just the per-unit spec.
+  cpu_milli?: number;
+  memory_mib?: number;
   // Per-instance rows also carry the card count + ephemeral disk so the
   // Instances table can render "<product> x <count>" + the spec popover.
   gpu_count?: number;
@@ -202,6 +207,8 @@ interface ServerBreakdownItem {
     unit_cpu_milli?: number | null;
     unit_memory_mib?: number | null;
     vram_mib?: number | null;
+    cpu_milli?: number | null;
+    memory_mib?: number | null;
     gpu_count?: number | null;
     ephemeral_mib?: number | null;
     local_storage_mib?: number | null;
@@ -313,6 +320,8 @@ function flattenItem(
     if (dims.unit_memory_mib != null)
       flat.unit_memory_mib = dims.unit_memory_mib;
     if (dims.vram_mib != null) flat.vram_mib = dims.vram_mib;
+    if (dims.cpu_milli != null) flat.cpu_milli = dims.cpu_milli;
+    if (dims.memory_mib != null) flat.memory_mib = dims.memory_mib;
     if (dims.gpu_count != null) flat.gpu_count = dims.gpu_count;
     if (dims.ephemeral_mib != null) flat.ephemeral_mib = dims.ephemeral_mib;
     if (dims.local_storage_mib != null)
@@ -321,6 +330,15 @@ function flattenItem(
     if (dims.storage_type) flat.storage_type = dims.storage_type;
     if (dims.capacity_mib != null) flat.capacity_mib = dims.capacity_mib;
   }
+  // Instance-type grouped trend: the series label (``group``) defaults to the
+  // raw flavor slug. Instance Types are grouped by actual shape, so label each
+  // series by that shape — "<product> x <cards>" / "CPU Only · 3 vCPU · 6 GB" —
+  // matching the table and keeping every shape a distinct series (#5700).
+  // ``groupBy`` is the unmapped frontend dimension; the instance-type axis is
+  // ``gpu_type`` (→ backend ``instance_type`` via GROUP_BY_MAP).
+  if (groupBy === 'gpu_type') {
+    flat.group = instanceTypeSeriesLabel(flat);
+  }
   return flat;
 }
 

src/pages/usage/components/resource-export-data.tsx

@@ -163,11 +163,12 @@ const ResourceExportData: React.FC<ResourceExportDataProps> = (props) => {
     setPageParams({ page, perPage });
   };
 
-  // Export the full filtered set, not just the visible page.
+  // Export the full filtered set, not just the visible page. ``page: -1`` is
+  // the backend's no-pagination sentinel (perPage is then ignored).
   const handleSubmit = async () => {
     setExporting(true);
     try {
-      const res = await queryFn(buildRequest(1, 10000));
+      const res = await queryFn(buildRequest(-1, INITIAL_PAGE.perPage));
       exportBreakdownRows(
         res.items ?? [],
         toExportColumns(columns),

src/pages/usage/components/resource-filter-bar.tsx

@@ -174,6 +174,7 @@ const ResourceFilterBar: React.FC<ResourceFilterBarProps> = (props) => {
             allowClear
             showSearch
             mode="multiple"
+            maxTagCount={'responsive'}
             options={userOptions}
             placeholder={intl.formatMessage({ id: 'usage.filter.user' })}
             styles={{
@@ -189,6 +190,7 @@ const ResourceFilterBar: React.FC<ResourceFilterBarProps> = (props) => {
             allowClear
             showSearch
             mode="multiple"
+            maxTagCount={'responsive'}
             options={resourceFilter.options}
             placeholder={resourceFilter.placeholder}
             styles={{

src/pages/usage/config/types.ts

@@ -96,3 +96,12 @@ export interface UsageMeta {
 }
 
 export type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;
+
+// The full breakdown filter set (route / user / api_key). Every breakdown
+// table sends all active dimensions — matching the trend chart — so e.g. a
+// user filter narrows the Models table too, not only the Users table.
+export type BreakdownFilters = {
+  routes?: FilterOptionType[];
+  users?: FilterOptionType[];
+  api_keys?: FilterOptionType[];
+};

src/pages/usage/hooks/use-usage-filters.ts

@@ -1,6 +1,7 @@
 import { exportJsonToExcel } from '@gpustack/core-ui/excel';
 import dayjs from 'dayjs';
-import { useEffect, useMemo, useState } from 'react';
+import _ from 'lodash';
+import { useEffect, useRef, useState } from 'react';
 import { GroupOption } from '../config';
 import { BreakdownItem, UsageFilterItem } from '../config/types';
 import useQueryTimeSeriesData from '../services/use-query-timeseries-data';
@@ -181,10 +182,17 @@ export const useUsageFilters = ({
     return filters;
   };
 
-  const filters = useMemo(
-    () => buildFilters(commonFilters),
-    [commonFilters, routeOptions, userOptions, apiKeyOptions]
-  );
+  // Keep a stable reference while the content is unchanged. ``buildFilters``
+  // returns a fresh object every render — and again when the meta options
+  // resolve after mount — which would otherwise retrigger every breakdown
+  // table's fetch effect a second time on first load. Only a real selection
+  // change (or options resolving a previously-selected id) should swap it.
+  const filtersRef = useRef<ReturnType<typeof buildFilters>>({});
+  const nextFilters = buildFilters(commonFilters);
+  if (!_.isEqual(nextFilters, filtersRef.current)) {
+    filtersRef.current = nextFilters;
+  }
+  const filters = filtersRef.current;
 
   const fetchData = (
     currentSelectedFilters = commonFilters,
@@ -208,6 +216,11 @@ export const useUsageFilters = ({
     fetchTimeSeriesData({
       ...currentChartFilters,
       group_by: groupByArray,
+      // The trend chart needs the complete date series. ``page: -1`` is the
+      // backend's no-pagination sentinel — without it the default page (20
+      // buckets, sorted by total tokens) drops low-traffic dates, leaving
+      // gaps in the chart for ranges spanning more than a handful of buckets.
+      page: -1,
       // Without ``scope`` the backend defaults to ``all``, while the
       // breakdown tables pass ``scope`` explicitly. The mismatch makes
       // the chart and the tables run different filters on the same

src/pages/usage/instances-tab/index.tsx

@@ -148,7 +148,8 @@ const GpuInstancesTab: React.FC = () => {
       // whole range. The default order is metric-desc, so partial (current/
       // recent) buckets have smaller values and would be pushed onto later
       // pages — dropping the newest hours from the chart under a small page.
-      perPage: 10000
+      // ``page: -1`` is the backend's no-pagination sentinel.
+      page: -1
     });
 
   useEffect(() => {
@@ -296,7 +297,8 @@ const GpuInstancesTab: React.FC = () => {
           ...baseRequest(),
           group_by: [g.key],
           // A breakdown export is the full filtered set, not a page.
-          perPage: 10000
+          // ``page: -1`` is the backend's no-pagination sentinel.
+          page: -1
         })
       )
     );

src/pages/usage/instances-tab/tables/use-instances-columns.tsx

@@ -5,7 +5,7 @@ import {
 import { useIntl } from '@umijs/max';
 import { useMemo } from 'react';
 import { ResourceBreakdownItem } from '../../apis/resource';
-import { instanceTypeLabel } from '../../utils/format-instance-type';
+import { instanceTypeSeriesLabel } from '../../utils/format-instance-type';
 import { parseRollup } from '../../utils/time-buckets';
 
 type GroupKey = 'gpu_type' | 'instance' | 'user';
@@ -44,25 +44,29 @@ const useInstancesColumns = (groupKey: GroupKey) => {
       title: intl.formatMessage({ id: 'usage.table.instanceType' }),
       dataIndex: 'gpu_type',
       key: 'gpu_type',
-      render: (_v: string, row: ResourceBreakdownItem) =>
-        renderInstanceType(
+      render: (_v: string, row: ResourceBreakdownItem) => {
+        const isCpu = !row.gpu_count && !row.vram_mib;
+        return renderInstanceType(
           buildInstanceTypeRecordFromMiB({
             name: row.instance_name,
             product: row.product || row.gpu_type,
             gpuCount: row.gpu_count,
-            unitCpuMilli: row.unit_cpu_milli,
-            unitMemoryMib: row.unit_memory_mib,
+            // CPU instance types show their real total size (cpu/mem totals);
+            // GPU keeps per-card specs since the renderer multiplies by the
+            // card count.
+            unitCpuMilli: isCpu ? row.cpu_milli : row.unit_cpu_milli,
+            unitMemoryMib: isCpu ? row.memory_mib : row.unit_memory_mib,
             vramMib: row.vram_mib
           }),
           {
             intl,
             categories: ['cpu', 'ram'],
-            title:
-              !!row.gpu_count || !!row.vram_mib
-                ? instanceTypeLabel(row)
-                : 'CPU Only'
+            // Each row is one shape: GPU "<product> x <cards>", CPU
+            // "CPU Only · <spec>".
+            title: instanceTypeSeriesLabel(row)
           }
-        )
+        );
+      }
     };
     // Instances breakdown: render through the canonical GPU Instances list
     // renderer so the label + spec popover are identical. The breakdown row
@@ -71,21 +75,29 @@ const useInstancesColumns = (groupKey: GroupKey) => {
       title: intl.formatMessage({ id: 'usage.table.instanceType' }),
       dataIndex: 'gpu_type',
       key: 'gpu_type',
-      render: (_v: string, row: ResourceBreakdownItem) =>
-        renderInstanceType(
+      render: (_v: string, row: ResourceBreakdownItem) => {
+        const isCpu = !row.gpu_count && !row.vram_mib;
+        return renderInstanceType(
           buildInstanceTypeRecordFromMiB({
             name: row.instance_name,
             product: row.product || row.gpu_type,
             gpuCount: row.gpu_count,
-            unitCpuMilli: row.unit_cpu_milli,
-            unitMemoryMib: row.unit_memory_mib,
+            // A per-instance row is one concrete instance, so CPU shows its
+            // real requested size (cpu/mem totals), not the per-unit flavor
+            // spec — e.g. a 3c6g instance of a 1c2g flavor reads "3 vCPU · 6 GB".
+            unitCpuMilli: isCpu ? row.cpu_milli : row.unit_cpu_milli,
+            unitMemoryMib: isCpu ? row.memory_mib : row.unit_memory_mib,
             vramMib: row.vram_mib,
             localStorageMib: row.local_storage_mib,
             ephemeralMib: row.ephemeral_mib,
             persistentMib: row.persistent_mib
           }),
-          { intl }
-        )
+          // Label by shape directly (consistent with the Instance Types
+          // column); avoids renderInstanceType's "CPU Only" fallback when a
+          // GPU row has vram but a missing/zero gpu_count.
+          { intl, title: instanceTypeSeriesLabel(row) }
+        );
+      }
     };
     // Last Active = the last active day. The backend sends a rollup-tz instant
     // with its offset; parseRollup keeps that wall clock (no browser-tz convert),

src/pages/usage/storage-tab/index.tsx

@@ -140,7 +140,8 @@ const StorageTab: React.FC = () => {
       // whole range. The default order is metric-desc, so partial (current/
       // recent) buckets have smaller values and would be pushed onto later
       // pages — dropping the newest hours from the chart under a small page.
-      perPage: 10000
+      // ``page: -1`` is the backend's no-pagination sentinel.
+      page: -1
     })
   );
 
@@ -283,7 +284,8 @@ const StorageTab: React.FC = () => {
           ...baseRequest(),
           group_by: [g.key],
           // A breakdown export is the full filtered set, not a page.
-          perPage: 10000
+          // ``page: -1`` is the backend's no-pagination sentinel.
+          page: -1
         })
       )
     );

src/pages/usage/summary-tab/index.tsx

@@ -21,7 +21,7 @@
  * each domain's natural unit (tokens / GPU-Hours / GB-Days); a true
  * cross-resource split needs a common unit.
  */
-import useCoolColors from '@/hooks/use-cool-colors';
+import { useCoolAccents } from '@/hooks/use-cool-colors';
 import BarChart from '@/pages/_components/bar-chart';
 import PieChart from '@/pages/_components/pie-chart';
 import { formatLargeNumber } from '@/utils';
@@ -31,7 +31,9 @@ import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect, useMemo, useState } from 'react';
 import ResourceFilterBar from '../components/resource-filter-bar';
-import useResourceMeta from '../hooks/use-resource-meta';
+import { FilterOptionType } from '../config/types';
+import useResourceMeta, { SelectOption } from '../hooks/use-resource-meta';
+import useQueryUsageMetaData from '../services/use-query-meta-data';
 import {
   bucketKey,
   generateBucketRange,
@@ -209,7 +211,8 @@ const SummaryTab: React.FC = () => {
   const access = useAccess();
   const intl = useIntl();
   const t = (id: string) => intl.formatMessage({ id });
-  const coolColors = useCoolColors()(8);
+  // One vivid primary per summary card (Tokens / Compute / Storage).
+  const coolColors = useCoolAccents()(3);
 
   // No All/My dropdown (matches the Tokens tab): managers see the org-wide
   // view and narrow it with the user filter, others only their own rows.
@@ -230,7 +233,38 @@ const SummaryTab: React.FC = () => {
     selectedUsers: []
   });
   const { start, end, selectedUsers } = queryParams;
-  const { creators: userOptions } = useResourceMeta(scope);
+  const { creators: resourceUsers } = useResourceMeta(scope);
+  const { detailData: tokenMeta, fetchData: fetchTokenMeta } =
+    useQueryUsageMetaData();
+
+  // The user filter unions two sources: resource creators (GPU / storage
+  // usage) and the token-usage users (/usage/meta) — a user may appear in only
+  // one. Deduped by user id. The token meta also carries the per-user identity
+  // the token-series endpoint filters on (see ``tokenUserById``).
+  const userOptions = useMemo<SelectOption[]>(() => {
+    const map = new Map<number, SelectOption>();
+    resourceUsers.forEach((u) =>
+      map.set(u.value, { value: u.value, label: u.label, deleted: u.deleted })
+    );
+    (tokenMeta?.users || []).forEach((u) => {
+      const id = u.identity.current?.user_id;
+      if (id != null && !map.has(id)) {
+        map.set(id, { value: id, label: u.label });
+      }
+    });
+    return Array.from(map.values());
+  }, [resourceUsers, tokenMeta]);
+
+  // user id → the identity object the token series filters by. Built from the
+  // token meta so the trend's ``users`` filter carries the real identity.
+  const tokenUserById = useMemo(() => {
+    const map = new Map<number, FilterOptionType>();
+    (tokenMeta?.users || []).forEach((u) => {
+      const id = u.identity.current?.user_id;
+      if (id != null) map.set(id, { identity: u.identity });
+    });
+    return map;
+  }, [tokenMeta]);
 
   const {
     detailData: summary,
@@ -284,6 +318,24 @@ const SummaryTab: React.FC = () => {
       ? { creator_ids: currentParams.selectedUsers }
       : undefined;
 
+    // The token series hits /usage/breakdown, which filters users by identity
+    // rather than the creator_ids the resource endpoints take — so the token
+    // trend honors the user filter like the totals do. Resolve each id to its
+    // token-meta identity, falling back to a minimal current.user_id object for
+    // users present only in the resource meta.
+    const tokenUserFilter: { users?: FilterOptionType[] } = currentParams
+      .selectedUsers.length
+      ? {
+          users: currentParams.selectedUsers.map(
+            (id) =>
+              tokenUserById.get(id) ??
+              ({
+                identity: { current: { user_id: id } }
+              } as unknown as FilterOptionType)
+          )
+        }
+      : {};
+
     await Promise.all([
       fetchSummary({
         ...commonParams,
@@ -298,16 +350,21 @@ const SummaryTab: React.FC = () => {
         filters: creatorFilter
       }),
 
+      // Date-bucketed trends: fetch the whole series via the no-pagination
+      // sentinel (page: -1). A metric-desc page would drop low-traffic (often
+      // most recent) buckets and leave gaps in the chart.
       fetchTokenSeries({
         ...commonParams,
         metric: 'total_tokens',
         group_by: ['date'],
         granularity,
-        filters: {}
+        page: -1,
+        filters: tokenUserFilter
       }),
 
       fetchComputeBreakdown({
         ...paginationParams,
+        page: -1,
         group_by: ['date'],
         granularity,
         filters: creatorFilter
@@ -315,6 +372,7 @@ const SummaryTab: React.FC = () => {
 
       fetchStorageByDate({
         ...paginationParams,
+        page: -1,
         group_by: ['date'],
         granularity,
         filters: creatorFilter
@@ -411,6 +469,7 @@ const SummaryTab: React.FC = () => {
   };
 
   useEffect(() => {
+    fetchTokenMeta();
     fetchAll();
   }, []);
 
@@ -499,13 +558,13 @@ const SummaryTab: React.FC = () => {
         <Col span={24}>
           <DomainSection
             title={t('usage.tabs.storage')}
-            accent={coolColors[3]}
+            accent={coolColors[2]}
             donutData={storageDonut}
             donutTotalLabel={t('usage.metric.gbDays')}
             trendTitle={t('usage.summary.gbDaysOverTime')}
             trendXAxis={storageTrend.xAxis}
             trendData={storageTrend.data}
-            trendColor={coolColors[3]}
+            trendColor={coolColors[2]}
             trendGran={granularity}
             pieLoading={storageByTypeLoading}
             barLoading={storageByDateLoading}

src/pages/usage/token-tab/components/breakdown-tabs.tsx

@@ -1,14 +1,11 @@
 import { useIntl } from '@umijs/max';
 import { Tabs } from 'antd';
 import React, { useMemo } from 'react';
-import { UsageFilterItem } from '../../config/types';
+import { BreakdownFilters } from '../../config/types';
 import ApiKeysTable from '../tables/apikeys-table';
 import ModelsTable from '../tables/models-table';
 import UsersTable from '../tables/users-table';
 
-type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;
-const EMPTY_FILTERS: FilterOptionType[] = [];
-
 const BreakdownTabs: React.FC<{
   dateRange: {
     start_date: string;
@@ -17,16 +14,9 @@ const BreakdownTabs: React.FC<{
   scope: string;
   pageResetKey?: number;
   refreshKey?: number;
-  filters: {
-    routes?: FilterOptionType[];
-    users?: FilterOptionType[];
-    api_keys?: FilterOptionType[];
-  };
+  filters: BreakdownFilters;
 }> = ({ filters, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
   const intl = useIntl();
-  const routes = filters.routes || EMPTY_FILTERS;
-  const users = filters.users || EMPTY_FILTERS;
-  const apiKeys = filters.api_keys || EMPTY_FILTERS;
 
   const items = useMemo(() => {
     return [
@@ -37,7 +27,7 @@ const BreakdownTabs: React.FC<{
         children: (
           <ModelsTable
             key="models"
-            routes={routes}
+            filters={filters}
             dateRange={dateRange}
             scope={scope}
             pageResetKey={pageResetKey}
@@ -52,7 +42,7 @@ const BreakdownTabs: React.FC<{
         children: (
           <UsersTable
             key="users"
-            users={users}
+            filters={filters}
             dateRange={dateRange}
             scope={scope}
             pageResetKey={pageResetKey}
@@ -67,7 +57,7 @@ const BreakdownTabs: React.FC<{
         children: (
           <ApiKeysTable
             key="api_keys"
-            apiKeys={apiKeys}
+            filters={filters}
             dateRange={dateRange}
             scope={scope}
             pageResetKey={pageResetKey}
@@ -81,7 +71,7 @@ const BreakdownTabs: React.FC<{
       }
       return true;
     });
-  }, [apiKeys, dateRange, routes, pageResetKey, refreshKey, scope, users]);
+  }, [filters, dateRange, pageResetKey, refreshKey, scope]);
 
   return (
     <div style={{ marginTop: 16 }}>