chore: bump @gpustack/core-ui to v1.0.32

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

@@ -1,143 +0,0 @@
----
-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

@@ -1,103 +0,0 @@
----
-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,7 +1,6 @@
 name: CI
 
 on:
-  workflow_dispatch: {}
   push:
     branches:
       - 'main'
@@ -118,20 +117,3 @@ 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/settings.local.json
+.claude
 /dist.zip
 .cache

AGENT.md

@@ -0,0 +1,265 @@
+# 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

@@ -1,5 +0,0 @@
-# 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

CLAUDE.md

@@ -1,140 +0,0 @@
-# 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.
-
-## Layout
-
-Compose layout with Ant components, not hand-written `display: flex`.
-
-- **1D flex** (row/column with `gap`, `align`, `justify`) → `Flex`. Do not write raw `display: flex` in new code.
-- **Inline sequence** of a few elements with uniform spacing → `Space`.
-- **Page/grid columns** → `Row` / `Col`.
-
-Drive spacing with the theme scale (`Flex`/`Space` `gap`, or `var(--ant-*)` spacing tokens), not scattered `px` literals.
-
-# 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`.
-- **`Select` options that need i18n**: set `label` to the message key and add `locale: true` on the option — the field translates it at render. Omit `locale` for options whose label is already final text. Ref `src/pages/benchmark/config/index.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

@@ -0,0 +1,46 @@
+## 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.

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.35",
+    "@gpustack/core-ui": "^1.0.32",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/tasks": "^0.11.6",
@@ -39,6 +39,7 @@
     "culori": "^4.0.2",
     "dayjs": "^1.11.11",
     "dompurify": "^3.2.6",
+    "driver.js": "^1.3.1",
     "echarts": "^5.5.1",
     "file-saver": "^2.0.5",
     "has-ansi": "^5.0.1",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^7.1.1
         version: 7.1.2
       '@gpustack/core-ui':
-        specifier: ^1.0.35
-        version: 1.0.35(czdvzceysqw7iv6pct2ucnb23e)
+        specifier: ^1.0.32
+        version: 1.0.32(czdvzceysqw7iv6pct2ucnb23e)
       '@huggingface/gguf':
         specifier: ^0.1.7
         version: 0.1.18
@@ -89,6 +89,9 @@ importers:
       dompurify:
         specifier: ^3.2.6
         version: 3.4.2
+      driver.js:
+        specifier: ^1.3.1
+        version: 1.4.0
       echarts:
         specifier: ^5.5.1
         version: 5.6.0
@@ -1481,8 +1484,8 @@ 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.35':
-    resolution: {integrity: sha512-MaEmCM3FikeKZdUgDSyUtIfXtNMbNOLeFiTynl6DcKEraUOpk6tgQXPDginBY3uXuisG4hzoIQbpHHkzaYiQew==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.35.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.1.0
       '@ant-design/pro-components': 3.1.0-0
@@ -4317,6 +4320,9 @@ packages:
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==, tarball: https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz}
 
+  driver.js@1.4.0:
+    resolution: {integrity: sha512-Gm64jm6PmcU+si21sQhBrTAM1JvUrR0QhNmjkprNLxohOBzul9+pNHXgQaT9lW84gwg9GMLB3NZGuGolsz5uew==, tarball: https://registry.npmjs.org/driver.js/-/driver.js-1.4.0.tgz}
+
   duck@0.1.12:
     resolution: {integrity: sha512-wkctla1O6VfP89gQ+J/yDesM0S7B7XLXjKGzXxMDVFg7uEn706niAtyYovKbyq1oT9YwDcly721/iUWoc8MVRg==, tarball: https://registry.npmjs.org/duck/-/duck-0.1.12.tgz}
 
@@ -10802,7 +10808,7 @@ snapshots:
 
   '@formatjs/intl-utils@2.3.0': {}
 
-  '@gpustack/core-ui@1.0.35(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)
@@ -14548,6 +14554,8 @@ snapshots:
       no-case: 3.0.4
       tslib: 2.8.1
 
+  driver.js@1.4.0: {}
+
   duck@0.1.12:
     dependencies:
       underscore: 1.13.8

src/components/full-markdown/index.tsx

@@ -1,12 +0,0 @@
-// Wrapper around core-ui's FullMarkdown that co-locates the KaTeX stylesheet.
-//
-// core-ui deliberately does NOT bundle katex.min.css (importing it there
-// base64-inlines ~1.4MB of fonts into the shared, render-blocking index.css).
-// Importing it here keeps the KaTeX CSS in the route chunk that actually
-// renders math, so it loads lazily and never blocks first paint.
-//
-// Always import FullMarkdown from this module, not from '@gpustack/core-ui/markdown'.
-import { FullMarkdown } from '@gpustack/core-ui/markdown';
-import 'katex/dist/katex.min.css';
-
-export default FullMarkdown;

src/config/theme/dark.ts

@@ -28,7 +28,6 @@ export default {
       rowSelectedBg: 'transparent',
       headerSortActiveBg: 'transparent',
       headerSortHoverBg: 'transparent',
-      bodySortBg: 'transparent',
       headerBg: 'none'
     },
     Button: {

src/config/theme/light.ts

@@ -31,7 +31,6 @@ export default {
       rowSelectedBg: 'transparent',
       headerSortActiveBg: 'transparent',
       headerSortHoverBg: 'transparent',
-      bodySortBg: 'transparent',
       headerSplitColor: '#e8e8e8',
       headerBg: 'none'
     },

src/global.less

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

src/hooks/use-actions.ts

@@ -0,0 +1,10 @@
+export default function useActions<T>(actions: Global.ActionItem<T>[], ctx: T) {
+  return actions
+    .filter((action) => {
+      return action.visible ? action.visible(ctx) : true;
+    })
+    .map((action) => ({
+      ...action,
+      disabled: action.disabled?.(ctx)
+    }));
+}

src/hooks/use-app-utils.ts

@@ -0,0 +1,58 @@
+import { useIntl } from '@umijs/max';
+import { message } from 'antd';
+
+type MessageType = 'input' | 'select';
+
+const useAppUtils = () => {
+  const intl = useIntl();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  /**
+   *
+   * @param type Array<'input' | 'select'>
+   * @param name
+   * @param locale boolean
+   * @returns
+   */
+  const getRuleMessage = (
+    type: MessageType | MessageType[],
+    name: string,
+    locale = true
+  ) => {
+    const nameStr = locale ? intl.formatMessage({ id: name }) : name;
+    // transform type to array
+    const typeList = Array.isArray(type) ? type : [type];
+
+    if (typeList.includes('select') && typeList.includes('input')) {
+      return intl.formatMessage(
+        { id: 'common.form.rule.selectInput' },
+        { name: nameStr }
+      );
+    }
+
+    if (typeList.includes('input')) {
+      return intl.formatMessage(
+        { id: 'common.form.rule.input' },
+        { name: nameStr }
+      );
+    }
+
+    return intl.formatMessage(
+      { id: 'common.form.rule.select' },
+      { name: nameStr }
+    );
+  };
+
+  const showSuccess = (msg?: string) => {
+    messageApi.success(
+      msg || intl.formatMessage({ id: 'common.message.success' })
+    );
+  };
+
+  return {
+    getRuleMessage,
+    showSuccess
+  };
+};
+
+export default useAppUtils;

src/hooks/use-broadcast.ts

@@ -0,0 +1,18 @@
+// broadcast channel hook
+
+import { useEffect, useRef } from 'react';
+
+export const useBroadcast = () => {
+  const broadcastChannel = useRef<BroadcastChannel | null>(null);
+
+  useEffect(() => {
+    broadcastChannel.current = new BroadcastChannel('broadcast_channel');
+
+    return () => {
+      broadcastChannel.current?.close();
+      console.log('broadcast channel closed');
+    };
+  }, []);
+
+  return { broadcastChannel };
+};

src/hooks/use-container-scorll.ts

@@ -0,0 +1,56 @@
+import _ from 'lodash';
+import { useRef } from 'react';
+
+export default function useContainerScroll(
+  container: any,
+  options?: { toBottom?: boolean }
+) {
+  const isWheeled = useRef(false);
+  const scroller = useRef(container);
+  const optionsRef = useRef(options);
+  const toBottomFlag = useRef(options?.toBottom);
+  const timerRef = useRef<any>(null);
+
+  const debunceResetWheeled = _.debounce(() => {
+    isWheeled.current = false;
+  }, 5000);
+
+  const handleContentWheel = (e: any) => {
+    isWheeled.current = true;
+    debunceResetWheeled.cancel?.();
+    debunceResetWheeled();
+  };
+
+  const scrollerRun = () => {
+    const scrollerContainer = scroller.current?.current || {};
+    const { scrollHeight, clientHeight, scrollTop } = scrollerContainer;
+    if (
+      optionsRef.current?.toBottom &&
+      toBottomFlag.current &&
+      scrollHeight > clientHeight + scrollTop
+    ) {
+      scroller.current.current.scrollTop = scrollHeight;
+      // toBottomFlag.current = false;
+      isWheeled.current = false;
+    } else if (
+      !isWheeled.current &&
+      scrollHeight > clientHeight + scrollTop &&
+      scroller.current?.current
+    ) {
+      scroller.current.current.scrollTop += 10;
+      window.requestAnimationFrame(scrollerRun);
+    }
+  };
+
+  const updateScrollerPosition = () => {
+    if (!isWheeled.current) {
+      window.requestAnimationFrame(scrollerRun);
+    }
+  };
+
+  return {
+    handleContentWheel,
+    updateScrollerPosition,
+    scroller
+  };
+}

src/hooks/use-cool-colors.ts

@@ -1,132 +1,54 @@
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import { clampChroma, formatHex, modeOklch, modeRgb, useMode } from 'culori/fn';
-import useUserSettings from './use-user-settings';
+import { converter, modeHsl, modeRgb, useMode } from 'culori/fn';
 
-// 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 toHsl = converter('hsl');
+
+const DEFAULT_BRAND_HUE = 211; // brand color
+const COOL_HUE_START = 180;
+const COOL_HUE_END = 280;
 const COOL_HUE_RANGE = COOL_HUE_END - COOL_HUE_START;
+const GOLDEN_RATIO_CONJUGATE = 0.618033988749895;
 
-/**
- * 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(modeOklch);
-
-  const { isDarkTheme } = useUserSettings();
-
-  return useMemoizedFn((count: number): string[] => {
-    if (count <= 0) return [];
-
-    const l = isDarkTheme ? 0.62 : 0.64;
-    const c = isDarkTheme ? 0.16 : 0.2;
-
-    const out: string[] = [];
-    for (let i = 0; i < count; i++) {
-      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;
-  });
+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]
+  // );
   useMode(modeRgb);
-  useMode(modeOklch);
+  useMode(modeHsl);
 
-  const { isDarkTheme } = useUserSettings();
+  const brandHue = DEFAULT_BRAND_HUE;
 
   return useMemoizedFn((count: number): string[] => {
     if (count <= 0) return [];
 
-    // 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;
+    const colors: string[] = [];
 
-    // 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'
-        )
-      )
-    ];
+    for (let i = 0; i < count; i++) {
+      let hue: number;
 
-    const rest = count - 1;
-    if (rest <= 0) return colors;
+      if (i === 0) {
+        hue = brandHue - 5;
+      } else {
+        const offset = (i * GOLDEN_RATIO_CONJUGATE) % 1;
+        hue = COOL_HUE_START + offset * COOL_HUE_RANGE;
 
-    // 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);
+        if (Math.abs(hue - brandHue) < 5) {
+          hue = (hue + 10) % COOL_HUE_END;
+        }
+      }
 
-    // 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];
+      const s = i === 0 ? 100 : 75 + (i % 3) * 5;
+      const l = i === 0 ? 50 : 55 + (i % 2) * 5;
 
-    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'
-          )
-        )
-      );
+      colors.push(`hsl(${Math.round(hue)}, ${s}%, ${l}%)`);
     }
 
     return colors;

src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,23 @@
+import { useCallback, useState } from 'react';
+
+const useCopyToClipboard = () => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = useCallback(async (text: string) => {
+    try {
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 3000);
+      }
+    } catch (error) {
+      setCopied(false);
+    }
+  }, []);
+
+  return { copied, copyToClipboard };
+};
+
+export default useCopyToClipboard;

src/hooks/use-download-logs.tsx

@@ -0,0 +1,71 @@
+import { HandlerOptions } from '@/hooks/use-chunk-fetch';
+import { useDownloadStream } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Progress, notification } from 'antd';
+import dayjs from 'dayjs';
+
+const renderMessage = (title: string) => {
+  return (
+    <div
+      style={{
+        width: 280,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      }}
+    >
+      {title}
+    </div>
+  );
+};
+
+const createFileName = (name: string) => {
+  const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+  const fileName = `${name}_${timestamp}.txt`;
+  return fileName;
+};
+
+const useDownloadLogs = () => {
+  const { downloadStream } = useDownloadStream();
+  const intl = useIntl();
+  const [api, contextHolder] = notification.useNotification({
+    stack: { threshold: 1 }
+  });
+
+  const downloadNotification = (
+    data: HandlerOptions & {
+      filename: string;
+      duration?: number;
+      chunkRequestRef: any;
+    }
+  ) => {
+    api.open({
+      duration: data.duration,
+      message: renderMessage(data.filename),
+      key: data.filename,
+      closeIcon: (
+        <span>{intl.formatMessage({ id: 'common.button.cancel' })}</span>
+      ),
+      description: <Progress percent={data.percent} size="small"></Progress>,
+      onClose() {
+        data.chunkRequestRef?.current?.abort();
+        notification.destroy?.(data.filename);
+      }
+    });
+  };
+
+  const handleDownloadLog = async (params: { url: string; name: string }) => {
+    downloadStream({
+      url: params.url,
+      filename: createFileName(params.name),
+      downloadNotification
+    });
+  };
+
+  return {
+    onDownloadLog: handleDownloadLog,
+    contextHolder
+  };
+};
+
+export default useDownloadLogs;

src/hooks/use-download-stream.ts

@@ -0,0 +1,136 @@
+import useSetChunkFetch, { HandlerOptions } from '@/hooks/use-chunk-fetch';
+import { message } from 'antd';
+import { useEffect, useRef } from 'react';
+
+export default function useDownloadStream() {
+  const chunkRequestRef = useRef<any>(null);
+  const logParseWorker = useRef<any>(null);
+  const clearScreen = useRef(false);
+  const filename = useRef('log');
+  const downloadNotificationRef = useRef<any>(null);
+
+  const { setChunkFetch } = useSetChunkFetch();
+
+  const downloadFile = (content: string) => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename.current;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    URL.revokeObjectURL(url);
+  };
+
+  const updateContent = (data: string, options?: HandlerOptions) => {
+    const { isComplete, percent } = options || {};
+
+    logParseWorker.current?.postMessage({
+      inputStr: data,
+      reset: clearScreen.current,
+      isComplete: isComplete,
+      percent: percent,
+      chunked: false
+    });
+    clearScreen.current = false;
+  };
+
+  const handleError = (error: any) => {
+    const errorMsg = error?.message || error;
+    const msg =
+      typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg);
+    message.error(msg);
+    downloadNotificationRef.current?.({
+      duration: 1,
+      percent: 0,
+      filename: filename.current
+    });
+  };
+
+  const downloadStream = async (props: {
+    data?: any;
+    url: string;
+    params?: any;
+    signal?: AbortSignal;
+    method?: string;
+    headers?: any;
+    filename?: string;
+    downloadNotification?: (data: any) => void;
+  }) => {
+    try {
+      clearScreen.current = true;
+      filename.current = props.filename || 'log';
+      downloadNotificationRef.current = props.downloadNotification;
+      const { params, url } = props;
+
+      chunkRequestRef.current?.current?.abort?.();
+
+      chunkRequestRef.current = setChunkFetch({
+        url,
+        params,
+        watch: false,
+        contentType: 'text',
+        errorHandler: handleError,
+        handler: updateContent
+      });
+      downloadNotificationRef.current?.({
+        filename: filename.current,
+        duration: null,
+        chunkRequestRef: chunkRequestRef.current
+      });
+    } catch (error) {
+      //
+      downloadNotificationRef.current?.({
+        duration: 1,
+        percent: 0,
+        filename: filename.current
+      });
+    }
+  };
+
+  useEffect(() => {
+    logParseWorker.current?.terminate?.();
+
+    logParseWorker.current = new Worker(
+      // @ts-ignore
+      new URL('@/components/logs-viewer/parse-worker.ts', import.meta.url),
+      {
+        type: 'module'
+      }
+    );
+
+    logParseWorker.current.onmessage = (event: any) => {
+      const { result, isComplete, percent } = event.data;
+
+      const isAborted = chunkRequestRef.current?.current?.signal?.aborted;
+      if (!isComplete && !isAborted) {
+        downloadNotificationRef.current?.({
+          percent: percent,
+          duration: null,
+          filename: filename.current,
+          chunkRequestRef: chunkRequestRef.current
+        });
+      } else if (isComplete && !isAborted) {
+        downloadNotificationRef.current?.({
+          duration: 1,
+          percent: 100,
+          filename: filename.current
+        });
+        downloadFile(result);
+      }
+    };
+
+    return () => {
+      if (logParseWorker.current) {
+        logParseWorker.current.terminate();
+      }
+    };
+  }, []);
+
+  return {
+    downloadStream
+  };
+}

src/hooks/use-driver.ts

@@ -0,0 +1,35 @@
+import { useIntl } from '@umijs/max';
+import { driver, type Config } from 'driver.js';
+import { useEffect, useRef } from 'react';
+
+export const useDriver = (config?: Config & { id: string }) => {
+  const intl = useIntl();
+  const driverRef = useRef<any>(null);
+
+  const handleDoNotShowAgain = () => {};
+
+  const init = () => {
+    driverRef.current = driver({
+      overlayOpacity: 0.2,
+      animate: false,
+      ...config
+    });
+  };
+
+  const start = () => {
+    if (!driverRef.current) {
+      init();
+    }
+    driverRef.current.drive();
+  };
+
+  useEffect(() => {
+    return () => {
+      driverRef.current?.destroy();
+    };
+  }, []);
+
+  return { start, initDriver: init, driver: driverRef.current };
+};
+
+export default useDriver;

src/hooks/use-esc-hint.tsx

@@ -0,0 +1,106 @@
+import HotKeys from '@/config/hotkeys';
+import { useIntl } from '@umijs/max';
+import { createStyles } from 'antd-style';
+import { throttle } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+const useStyles = createStyles(({ css, token }) => ({
+  hintOverlay: css`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-esc-hint-bg);
+    color: ${token.colorTextLightSolid};
+    padding: 16px 24px;
+    border-radius: 4px;
+    z-index: 2000;
+    font-size: 14px;
+    pointer-events: none;
+    animation: fadeInOut 2s ease-in-out;
+    @keyframes fadeInOut {
+      0% {
+        opacity: 0;
+      }
+      10% {
+        opacity: 1;
+      }
+      90% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  `
+}));
+
+export function useEscHint(options?: {
+  enabled?: boolean;
+  message?: string;
+  throttleDelay?: number;
+}) {
+  const { enabled = true, message, throttleDelay = 3000 } = options || {};
+  const intl = useIntl();
+  const { styles } = useStyles();
+  const [visible, setVisible] = useState(false);
+  const timeoutRef = useRef<any>(null);
+  const isHintActiveRef = useRef(false);
+
+  const showHintThrottled = useMemo(
+    () =>
+      throttle(
+        () => {
+          if (isHintActiveRef.current) return;
+
+          isHintActiveRef.current = true;
+
+          setVisible(true);
+
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+
+          timeoutRef.current = setTimeout(() => {
+            setVisible(false);
+            isHintActiveRef.current = false;
+          }, 2000);
+        },
+        throttleDelay,
+        {
+          leading: true,
+          trailing: false
+        }
+      ),
+    [throttleDelay]
+  );
+
+  useHotkeys(
+    HotKeys.ESC,
+    () => {
+      if (!enabled) return;
+      showHintThrottled();
+    },
+    {
+      enabled: enabled
+    }
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      showHintThrottled.cancel();
+    };
+  }, [showHintThrottled]);
+
+  const EscHint = visible ? (
+    <div className={styles.hintOverlay}>
+      {message || intl.formatMessage({ id: 'common.tips.escape.disable' })}
+    </div>
+  ) : null;
+
+  return { EscHint };
+}

src/hooks/use-event-source.ts

@@ -0,0 +1,72 @@
+import qs from 'query-string';
+import { useEffect, useRef } from 'react';
+
+export const createEventSourceURL = (url: string) => {
+  const { host, protocol } = window.location;
+  return `${protocol}://${host}${url}`;
+};
+
+/*  
+0: connecting
+1: connect successfully
+2: closed
+*/
+
+export default function useEventSource() {
+  const eventSourceRef = useRef<any>(null);
+
+  const createEventSourceConnection = (query: {
+    url: string;
+    params: any;
+    onmessage?: (data: any) => void;
+  }) => {
+    eventSourceRef.current?.close?.();
+
+    const { url, params, onmessage = () => {} } = query;
+
+    const sseurl = createEventSourceURL(url);
+
+    eventSourceRef.current = new EventSource(
+      `${url}?${qs.stringify({
+        ...params
+      })}`,
+      {
+        withCredentials: true
+      }
+    );
+
+    eventSourceRef.current.onmessage = (res: any) => {
+      try {
+        console.log('event source message: ', { res, resData: res });
+        const data = JSON.parse(res.data);
+        onmessage(data);
+      } catch (error) {
+        // error
+        console.log('event source error: ', error);
+      }
+    };
+
+    eventSourceRef.current.onclose = () => {
+      console.log('event source closed...');
+    };
+
+    eventSourceRef.current.onopen = () => {
+      console.log('event source connected...');
+    };
+
+    eventSourceRef.current.onerror = (error: any) => {
+      console.log('event source error: ', error);
+    };
+  };
+
+  useEffect(() => {
+    return () => {
+      eventSourceRef.current?.close?.();
+    };
+  }, []);
+
+  return {
+    eventSourceRef: eventSourceRef,
+    createEventSourceConnection
+  };
+}

src/hooks/use-overlay-scroller.ts

@@ -0,0 +1,280 @@
+import { useMemoizedFn } from 'ahooks';
+import { throttle } from 'lodash';
+import {
+  UseOverlayScrollbarsParams,
+  useOverlayScrollbars
+} from 'overlayscrollbars-react';
+import React, { useEffect } from 'react';
+import useUserSettings from './use-user-settings';
+
+type OverflowBehavior =
+  | 'hidden'
+  | 'scroll'
+  | 'visible'
+  | 'visible-hidden'
+  | 'visible-scroll';
+export interface OverlayScrollerOptions {
+  oppositeTheme?: boolean;
+  overflow?: {
+    x?: OverflowBehavior;
+    y?: OverflowBehavior;
+  };
+  scrollbars?: {
+    theme?: 'os-theme-light' | 'os-theme-dark';
+    autoHide?: 'never' | 'scroll' | 'leave' | 'move';
+    autoHideDelay?: number;
+    clickScroll?: boolean | 'instant';
+  };
+}
+
+export const overlaySollerOptions: UseOverlayScrollbarsParams = {
+  options: {
+    update: {
+      debounce: 0
+    },
+    overflow: {
+      x: 'hidden'
+    },
+    scrollbars: {
+      theme: 'os-theme-light',
+      autoHide: 'scroll',
+      autoHideDelay: 600,
+      clickScroll: 'instant'
+    }
+  },
+  defer: true
+};
+
+const RESETSCROLLDELAY = 5000;
+
+/**
+ *
+ * @param options.theme: if set theme, it will fix the theme
+ * @returns
+ */
+export default function useOverlayScroller(data?: {
+  options?: OverlayScrollerOptions;
+  events?: any;
+  defer?: boolean;
+}) {
+  const { userSettings } = useUserSettings();
+  const { options, events, defer = true } = data || {};
+  const { scrollbars, overflow, oppositeTheme } = options || {};
+  const scrollEventElement = React.useRef<any>(null);
+  const instanceRef = React.useRef<any>(null);
+  const initialized = React.useRef(false);
+  const scrollElementRef = React.useRef<any>(null);
+  const stopUpdatePosition = React.useRef(false);
+  const timerRef = React.useRef<any>(null);
+  const [initialize, instance] = useOverlayScrollbars({
+    options: {
+      update: {
+        debounce: 0
+      },
+      overflow: {
+        x: 'hidden',
+        ...overflow
+      },
+      scrollbars: {
+        autoHide: 'scroll',
+        autoHideDelay: 600,
+        clickScroll: 'instant',
+        ...scrollbars,
+        theme:
+          scrollbars?.theme ||
+          (userSettings.theme === 'light' || !userSettings.theme
+            ? 'os-theme-dark'
+            : 'os-theme-light')
+      }
+    },
+    events: {
+      ...events
+    },
+    defer: defer
+  });
+
+  instanceRef.current = instance?.();
+  scrollEventElement.current =
+    instanceRef.current?.elements()?.scrollEventElement;
+
+  const handleOnScroll = () => {
+    const scrollTop = scrollEventElement.current?.scrollTop;
+    const scrollHeight = scrollEventElement.current?.scrollHeight;
+    const clientHeight = scrollEventElement.current?.clientHeight;
+
+    const isBottom = scrollTop + clientHeight + 20 >= scrollHeight;
+
+    if (isBottom) {
+      stopUpdatePosition.current = false;
+    } else {
+      stopUpdatePosition.current = true;
+    }
+  };
+
+  const throttledScroll = useMemoizedFn(
+    throttle(() => {
+      scrollEventElement.current?.scrollTo?.({
+        top: scrollEventElement.current?.scrollHeight,
+        behavior: 'smooth'
+      });
+      instanceRef.current?.update?.();
+    }, 100)
+  );
+
+  const scrollauto = useMemoizedFn(() => {
+    scrollEventElement.current?.scrollTo?.({
+      top: scrollEventElement.current.scrollHeight,
+      behavior: 'auto'
+    });
+    instanceRef.current?.update?.();
+  });
+
+  // scroll to bottom
+  const throttledUpdateScrollerPosition = useMemoizedFn((delay?: number) => {
+    if (stopUpdatePosition.current) {
+      return;
+    }
+    if (delay === 0) {
+      scrollauto();
+    } else {
+      throttledScroll();
+    }
+  });
+
+  // scroll to top
+  const updateScrollerPositionToTop = useMemoizedFn(() => {
+    scrollEventElement.current?.scrollTo?.({
+      top: 0,
+      behavior: 'auto'
+    });
+    instanceRef.current?.update?.();
+  });
+
+  const generateInstance = () => {
+    instanceRef.current = instance?.();
+    scrollEventElement.current =
+      instanceRef.current?.elements()?.scrollEventElement;
+  };
+
+  const handleWheelCallback = useMemoizedFn((e: any) => {
+    handleOnScroll();
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      stopUpdatePosition.current = false;
+    }, RESETSCROLLDELAY);
+  });
+
+  // add  wheel event
+  const handleWheelEvent = () => {
+    scrollElementRef.current?.addEventListener?.('wheel', handleWheelCallback, {
+      passive: true
+    });
+  };
+
+  // remove wheel event
+  const removeWheelEvent = () => {
+    scrollElementRef.current?.removeEventListener?.(
+      'wheel',
+      handleWheelCallback,
+      { passive: true }
+    );
+  };
+
+  const createInstance = useMemoizedFn((el: any) => {
+    if (instanceRef.current) {
+      return instanceRef.current;
+    }
+    if (el) {
+      initialize(el);
+      scrollElementRef.current = el;
+      initialized.current = true;
+      instanceRef.current = instance?.();
+      scrollEventElement.current =
+        instanceRef.current?.elements()?.scrollEventElement;
+      handleWheelEvent();
+    }
+    return instanceRef.current;
+  });
+
+  const destroyInstance = () => {
+    instanceRef.current?.destroy?.();
+    removeWheelEvent();
+    instanceRef.current = null;
+  };
+
+  const scrollToTarget = (target: any, offset = 100) => {
+    if (!target) return;
+    if (!instanceRef.current || !scrollEventElement.current) {
+      instanceRef.current = instance?.();
+      scrollEventElement.current =
+        instanceRef.current?.elements()?.scrollEventElement;
+    }
+
+    const viewport = instanceRef.current?.elements().viewport;
+    const containerRect = viewport.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+
+    const scrollerState = instanceRef.current?.state();
+
+    const currentScroll = scrollerState.current?.overflowAmount?.y;
+
+    // const currentScroll = instanceRef.current?.scroll().position.y;
+    const targetPos = targetRect.top - containerRect.top + currentScroll;
+
+    scrollEventElement.current.scroll({
+      y: targetPos - offset,
+      behavior: 'smooth'
+    });
+    instanceRef.current?.update?.();
+  };
+
+  const getScrollElementScrollableHeight = () => {
+    if (!instanceRef.current || !scrollEventElement.current) {
+      instanceRef.current = instance?.();
+      scrollEventElement.current =
+        instanceRef.current?.elements()?.scrollEventElement;
+    }
+
+    const scrollOffsetElement = instanceRef.current?.elements().viewport;
+
+    return {
+      scrollTop: scrollOffsetElement?.scrollTop,
+      scrollHeight:
+        scrollOffsetElement?.scrollHeight - scrollOffsetElement?.clientHeight
+    };
+  };
+
+  const getScrollElement = () => {
+    if (!instanceRef.current || !scrollEventElement.current) {
+      instanceRef.current = instance?.();
+      scrollEventElement.current =
+        instanceRef.current?.elements()?.scrollEventElement;
+    }
+    return scrollEventElement;
+  };
+
+  useEffect(() => {
+    return () => {
+      instanceRef.current?.destroy?.();
+      removeWheelEvent();
+    };
+  }, [instance]);
+
+  return {
+    initialize: createInstance,
+    instance: instanceRef,
+    scrollEventElement: scrollEventElement,
+    initialized: initialized.current,
+    getScrollElementScrollableHeight,
+    getScrollElement,
+    generateInstance,
+    destroyInstance: destroyInstance,
+    updateScrollerPosition: throttledUpdateScrollerPosition,
+    updateScrollerPositionToTop: updateScrollerPositionToTop,
+    scrollToBottom: scrollauto,
+    scrollToTop: updateScrollerPositionToTop,
+    scrollToTarget
+  };
+}

src/layouts/index.tsx

@@ -52,6 +52,21 @@ import { ExtraContent } from './extraRender';
 import { patchRoutes } from './runtime';
 import SiderMenu from './sider-menu';
 
+// Pages that use the page container in the page
+const NO_CONTAINER_PAGES = [
+  'chat',
+  'rerank',
+  'embedding',
+  'speech',
+  'image',
+  'text2images',
+  'clusterDetail',
+  'clusterCreate',
+  'benchmarkDetail',
+  'deployment',
+  'video'
+];
+
 const CHECK_RESOURCE_PATH = [
   '/resources/workers',
   '/resources/clusters/list',
@@ -254,6 +269,11 @@ export default (props: any) => {
     [location.pathname]
   );
 
+  const isNoContainerPage = useMemo(() => {
+    // @ts-ignore
+    return NO_CONTAINER_PAGES.includes(matchedRoute?.name as string);
+  }, [matchedRoute]);
+
   const collapsed = useMemo(() => {
     return userSettings.collapsed || false;
   }, [userSettings.collapsed]);
@@ -449,11 +469,15 @@ export default (props: any) => {
               unAccessible={runtimeConfig?.unAccessible}
               noAccessible={runtimeConfig?.noAccessible}
             >
-              <PageContainerInner>
-                <div>
-                  <Outlet />
-                </div>
-              </PageContainerInner>
+              {isNoContainerPage ? (
+                <Outlet />
+              ) : (
+                <PageContainerInner>
+                  <div>
+                    <Outlet />
+                  </div>
+                </PageContainerInner>
+              )}
             </Exception>
           </div>
           {NoResourceModal}

src/locales/en-US/common.ts

@@ -198,8 +198,6 @@ 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':
@@ -253,11 +251,6 @@ 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!',
@@ -267,10 +260,6 @@ export default {
   'common.select.count': '{count} selected',
   'common.login.auth': 'Authenticating...',
   'common.login.auth.failed': 'Authentication failed',
-  'common.login.error.source_conflict':
-    'An account with this username already exists from a different authentication source. Please contact an administrator to link or convert it.',
-  'common.login.error.auth_failed':
-    'Authentication with the identity provider failed. Please try again or contact your administrator.',
   'common.login.password': 'Log in with Password',
   'common.login.username.holder': 'Please enter username',
   'common.login.password.holder': 'Please enter password',

src/locales/en-US/gpuservice.ts

@@ -81,8 +81,6 @@ 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/users.ts

@@ -12,11 +12,6 @@ export default {
   'users.form.active.description': 'Enable or disable this user account',
   'users.form.fullname': 'Full Name',
   'users.form.source': 'Source',
-  'users.form.source.local': 'Local',
-  'users.form.source.tip.switchToLocal':
-    'Switching to Local requires a new password. The user will sign in via the standard login form.',
-  'users.form.source.tip.switchToExternal':
-    "Switching to an external source clears the user's local password. They will sign in via the configured identity provider.",
   'users.table.user': 'users',
   'users.form.admin': 'Admin',
   'users.form.user': 'User',
@@ -33,8 +28,6 @@ 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.',

src/locales/ja-JP/common.ts

@@ -199,7 +199,6 @@ 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> を削除してもよろしいですか？',
@@ -252,11 +251,6 @@ 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!',
@@ -266,10 +260,6 @@ export default {
   'common.select.count': '{count} selected',
   'common.login.auth': 'Authenticating...',
   'common.login.auth.failed': 'Authentication failed',
-  'common.login.error.source_conflict':
-    'このユーザー名のアカウントは別の認証ソースで既に存在します。管理者にリンクまたは変換を依頼してください。',
-  'common.login.error.auth_failed':
-    'ID プロバイダーでの認証に失敗しました。再試行するか、管理者にお問い合わせください。',
   'common.login.password': 'Log in with Password',
   'common.login.username.holder': 'Please enter username',
   'common.login.password.holder': 'Please enter password',

src/locales/ja-JP/gpuservice.ts

@@ -80,8 +80,6 @@ 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/users.ts

@@ -13,11 +13,6 @@ export default {
     'このユーザーアカウントを有効または無効にする',
   'users.form.fullname': 'フルネーム',
   'users.form.source': 'ソース',
-  'users.form.source.local': 'ローカル',
-  'users.form.source.tip.switchToLocal':
-    'ローカルに切り替えるには新しいパスワードが必要です。以後、ユーザーは標準のログインフォームからサインインします。',
-  'users.form.source.tip.switchToExternal':
-    '外部ソースに切り替えるとユーザーのローカルパスワードが削除され、設定済みの ID プロバイダーからサインインするようになります。',
   'users.table.user': 'ユーザー',
   'users.form.admin': '管理者',
   'users.form.user': '一般ユーザー',
@@ -34,8 +29,6 @@ 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つのパスワードが一致しません。',

src/locales/ru-RU/common.ts

@@ -197,7 +197,6 @@ 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>?',
@@ -251,11 +250,6 @@ 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':
     'Страница может нуждаться в обновлении. Попробуйте обновить её!',
@@ -265,10 +259,6 @@ export default {
   'common.select.count': '{count} Выбрано',
   'common.login.auth': 'Аутентификация...',
   'common.login.auth.failed': 'Ошибка аутентификации',
-  'common.login.error.source_conflict':
-    'Учётная запись с таким именем уже существует, но с другим источником аутентификации. Обратитесь к администратору для связывания или преобразования.',
-  'common.login.error.auth_failed':
-    'Не удалось пройти аутентификацию через провайдера идентификации. Попробуйте ещё раз или обратитесь к администратору.',
   'common.login.password': 'Войти с паролем',
   'common.login.username.holder': 'Введите имя пользователя',
   'common.login.password.holder': 'Введите пароль',

src/locales/ru-RU/gpuservice.ts

@@ -84,8 +84,6 @@ 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/users.ts

@@ -13,11 +13,6 @@ export default {
     'Включить или отключить эту учетную запись пользователя',
   'users.form.fullname': 'Полное имя',
   'users.form.source': 'Источник',
-  'users.form.source.local': 'Локальный',
-  'users.form.source.tip.switchToLocal':
-    'Переключение на «Локальный» требует ввода нового пароля. После этого пользователь будет входить через стандартную форму входа.',
-  'users.form.source.tip.switchToExternal':
-    'Переключение на внешний источник удаляет локальный пароль пользователя. После этого вход будет выполняться через настроенного провайдера идентификации.',
   'users.table.user': 'пользователи',
   'users.form.admin': 'Администратор',
   'users.form.user': 'Пользователь',
@@ -34,8 +29,6 @@ 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': 'Пароли не совпадают',

src/locales/tr-TR/common.ts

@@ -199,7 +199,6 @@ 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':
@@ -255,11 +254,6 @@ 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!',
@@ -269,10 +263,6 @@ export default {
   'common.select.count': '{count} seçildi',
   'common.login.auth': 'Kimlik doğrulanıyor...',
   'common.login.auth.failed': 'Kimlik doğrulama başarısız',
-  'common.login.error.source_conflict':
-    'Bu kullanıcı adıyla farklı bir kimlik doğrulama kaynağından bir hesap zaten mevcut. Bağlamak veya dönüştürmek için lütfen yöneticinize başvurun.',
-  'common.login.error.auth_failed':
-    'Kimlik sağlayıcısı ile kimlik doğrulama başarısız oldu. Lütfen tekrar deneyin veya yöneticinize başvurun.',
   'common.login.password': 'Şifre ile giriş yap',
   'common.login.username.holder': 'Lütfen kullanıcı adını girin',
   'common.login.password.holder': 'Lütfen şifreyi girin',

src/locales/tr-TR/gpuservice.ts

@@ -80,8 +80,6 @@ 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/users.ts

@@ -13,11 +13,6 @@ export default {
     'Bu kullanıcı hesabını etkinleştir veya devre dışı bırak',
   'users.form.fullname': 'Tam Ad',
   'users.form.source': 'Kaynak',
-  'users.form.source.local': 'Yerel',
-  'users.form.source.tip.switchToLocal':
-    'Yerel kaynağa geçmek yeni bir parola gerektirir. Kullanıcı bundan sonra standart oturum açma formunu kullanır.',
-  'users.form.source.tip.switchToExternal':
-    'Harici bir kaynağa geçmek kullanıcının yerel parolasını siler. Kullanıcı bundan sonra yapılandırılmış kimlik sağlayıcı üzerinden oturum açar.',
   'users.table.user': 'kullanıcılar',
   'users.form.admin': 'Yönetici',
   'users.form.user': 'Kullanıcı',
@@ -34,8 +29,6 @@ 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.',

src/locales/zh-CN/common.ts

@@ -190,7 +190,6 @@ 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>',
@@ -247,9 +246,6 @@ 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 关闭窗口',
@@ -257,9 +253,6 @@ export default {
   'common.select.count': '已选 {count} 项',
   'common.login.auth': '认证中...',
   'common.login.auth.failed': '认证失败',
-  'common.login.error.source_conflict':
-    '已存在同名账号但来源不同。请联系管理员关联或转换该账号。',
-  'common.login.error.auth_failed': '身份提供商认证失败。请重试或联系管理员。',
   'common.login.password': '使用密码登录',
   'common.login.username.holder': '请输入用户名',
   'common.login.password.holder': '请输入密码',

src/locales/zh-CN/gpuservice.ts

@@ -75,8 +75,6 @@ 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/users.ts

@@ -12,11 +12,6 @@ export default {
   'users.form.active.description': '启用或禁用此用户账户',
   'users.form.fullname': '全名',
   'users.form.source': '来源',
-  'users.form.source.local': '本地',
-  'users.form.source.tip.switchToLocal':
-    '切换到本地需要设置新密码,之后用户将通过标准登录表单登录。',
-  'users.form.source.tip.switchToExternal':
-    '切换到外部来源会清除该用户的本地密码,之后用户将通过所配置的身份提供商登录。',
   'users.table.user': '用户',
   'users.form.admin': '管理员',
   'users.form.user': '普通用户',
@@ -32,7 +27,6 @@ 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': '两次输入的密码不一致',

src/pages/_components/bar-chart/index.tsx

@@ -1,5 +1,5 @@
 import useCoolColors from '@/hooks/use-cool-colors';
-import { Chart } from '@gpustack/core-ui/charts';
+import { Chart } from '@gpustack/core-ui';
 import { formatLargeNumber } from '@gpustack/core-ui/utils';
 import { Empty, Spin, theme } from 'antd';
 import _ from 'lodash';

src/pages/_components/page-box.tsx

@@ -4,53 +4,28 @@ import {
   RouteContext,
   type PageContainerProps
 } from '@ant-design/pro-components';
-import {
-  HeaderSlotContext,
-  useOverlayScroller,
-  type HeaderSlotContextValue
-} from '@gpustack/core-ui';
+import { useOverlayScroller } from '@gpustack/core-ui';
 import { Divider } from 'antd';
 import classNames from 'classnames';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import pageBoxCss from './styles/page-box.less';
 
-// The header-slot bridge (HeaderSlotContext, HeaderLeft, HeaderRight,
-// usePageContentStyle) lives in @gpustack/core-ui so the host and the
-// enterprise plugin share the SAME context instance and can portal into this
-// layout-owned header bar. Re-exported here so existing host import sites
-// keep working.
-export {
-  HeaderLeft,
-  HeaderRight,
-  usePageContentStyle
-} from '@gpustack/core-ui';
-
 const paddingInlinePageContainerContent = 24;
 
 export const PageContainerInner: React.FC<
   PageContainerProps & {
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
     styles?: {
       containerWrapper?: React.CSSProperties;
     };
   }
-> = ({ children, styles, title, ...rest }) => {
+> = ({ children, styles, title, leftContent, rightContent, ...rest }) => {
   const { initialize: initialize } = useOverlayScroller({
     defer: false
   });
   const pageContext = useContext(RouteContext);
   const contentWrapperRef = useRef<HTMLDivElement>(null);
-  const [leftEl, setLeftEl] = useState<HTMLDivElement | null>(null);
-  const [rightEl, setRightEl] = useState<HTMLDivElement | null>(null);
-  const [contentStyleOverride, setContentStyleOverride] = useState<
-    React.CSSProperties | undefined
-  >(undefined);
 
   useEffect(() => {
     if (contentWrapperRef.current) {
@@ -59,85 +34,43 @@ export const PageContainerInner: React.FC<
     }
   }, [initialize, contentWrapperRef]);
 
-  const setContentStyle = useCallback(
-    (style: React.CSSProperties | undefined) => {
-      setContentStyleOverride(style);
-      return () => setContentStyleOverride(undefined);
-    },
-    []
-  );
-
-  const slotOwnersRef = useRef<{ left: number; right: number }>({
-    left: 0,
-    right: 0
-  });
-
-  const registerSlot = useCallback((slot: 'left' | 'right') => {
-    const owners = slotOwnersRef.current;
-    owners[slot] += 1;
-    if (process.env.NODE_ENV !== 'production' && owners[slot] > 1) {
-      const name = slot === 'left' ? 'HeaderLeft' : 'HeaderRight';
-      console.warn(
-        `[PageContainerInner] ${owners[slot]} <${name}> are mounted at once; their content stacks in the same header slot. Only one page/component should own each slot at a time.`
-      );
-    }
-    return () => {
-      owners[slot] -= 1;
-    };
-  }, []);
-
-  const slotValue = useMemo<HeaderSlotContextValue>(
-    () => ({
-      leftEl,
-      rightEl,
-      setContentStyle,
-      registerSlot
-    }),
-    [leftEl, rightEl, setContentStyle, registerSlot]
-  );
-
   return (
-    <HeaderSlotContext.Provider value={slotValue}>
-      <div className={pageBoxCss.containerWrapper}>
-        <PageContainer
-          {...rest}
-          fixedHeader={false}
-          title={false}
-          pageHeaderRender={false}
-          style={{
-            flex: 1
-          }}
-          token={{
-            paddingInlinePageContainerContent: paddingInlinePageContainerContent
-          }}
+    <div className={pageBoxCss.containerWrapper}>
+      <PageContainer
+        {...rest}
+        fixedHeader={false}
+        title={false}
+        pageHeaderRender={false}
+        style={{
+          flex: 1
+        }}
+        token={{
+          paddingInlinePageContainerContent: paddingInlinePageContainerContent
+        }}
+      >
+        <div className={pageBoxCss.title}>
+          <div className={pageBoxCss.left}>
+            {leftContent || pageContext.title}
+          </div>
+          <div className={pageBoxCss.right}>
+            {rightContent && (
+              <div>
+                {rightContent}
+                <Divider orientation="vertical" style={{ margin: '0 16px' }} />
+              </div>
+            )}
+            <ExtraContent />
+          </div>
+        </div>
+        <div
+          className={classNames(pageBoxCss.contentWrapper)}
+          style={styles?.containerWrapper}
+          ref={contentWrapperRef}
         >
-          <div className={pageBoxCss.title}>
-            <div className={pageBoxCss.left}>
-              <div ref={setLeftEl} className={pageBoxCss.leftSlot} />
-              <span className={pageBoxCss.defaultTitle}>
-                {pageContext.title}
-              </span>
-            </div>
-            <div className={pageBoxCss.right}>
-              <div ref={setRightEl} className={pageBoxCss.rightSlot} />
-              <Divider
-                className={pageBoxCss.divider}
-                orientation="vertical"
-                style={{ margin: '0 16px' }}
-              />
-              <ExtraContent />
-            </div>
-          </div>
-          <div
-            className={classNames(pageBoxCss.contentWrapper)}
-            style={{ ...styles?.containerWrapper, ...contentStyleOverride }}
-            ref={contentWrapperRef}
-          >
-            {children}
-          </div>
-        </PageContainer>
-      </div>
-    </HeaderSlotContext.Provider>
+          {children}
+        </div>
+      </PageContainer>
+    </div>
   );
 };
 

src/pages/_components/pie-chart/index.tsx

@@ -1,5 +1,5 @@
 import useCoolColors from '@/hooks/use-cool-colors';
-import { Chart } from '@gpustack/core-ui/charts';
+import { Chart } from '@gpustack/core-ui';
 import { formatLargeNumber } from '@gpustack/core-ui/utils';
 import { Empty, Spin, theme } from 'antd';
 import React, {

src/pages/_components/styles/page-box.less

@@ -70,44 +70,14 @@
     height: 56px;
     border-bottom: 1px solid var(--ant-color-split);
 
-    // `.left` claims all the space between the title's left edge and `.right`.
-    // Because the container width is fixed regardless of inner content, the
-    // right side never shifts during route transitions and the content inside
-    // .left is anchored to the left edge — no horizontal jitter.
     .left {
       display: flex;
       align-items: center;
-      flex: 1 1 auto;
-      min-width: 0;
     }
 
     .right {
       display: flex;
       align-items: center;
-      flex-shrink: 0;
-    }
-
-    .leftSlot,
-    .rightSlot {
-      display: contents;
-    }
-
-    .defaultTitle {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    // Portal-driven visibility: when a page's HeaderLeft / HeaderRight
-    // portal target has children, hide the default title / show the divider.
-    // Using `:empty` (rather than React state) keeps visibility synchronous
-    // with the DOM mutation, so there is no inter-frame flicker on route
-    // transitions.
-    .leftSlot:not(:empty) ~ .defaultTitle {
-      display: none;
-    }
-
-    .rightSlot:empty ~ .divider {
-      display: none;
     }
   }
 }

src/pages/access/index.tsx

@@ -0,0 +1,24 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Access, useAccess } from '@umijs/max';
+import { Button } from 'antd';
+
+const AccessPage: React.FC = () => {
+  const access = useAccess();
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: 'permission example',
+        style: {
+          paddingInline: 'var(--layout-content-header-inlinepadding)'
+        }
+      }}
+    >
+      <Access accessible={access.canSeeAdmin}>
+        <Button>Only Admin can see this button</Button>
+      </Access>
+    </PageContainer>
+  );
+};
+
+export default AccessPage;

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

@@ -47,12 +47,7 @@ const APIKeyForm: React.FC<{
 
       <PluginExtraFields
         name="CreateOrgScopeField"
-        context={{
-          action,
-          allowPersonal: true,
-          allowGlobal: true,
-          globalLabelId: 'scope.global'
-        }}
+        context={{ action, allowPersonal: true }}
       />
 
       <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 for a
-  // personal-scope key, or NULL for an admin "All" mode key (no
-  // tenant pinning).
-  owner_principal_id?: number | null;
+  // 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;
   created_at: string;
   updated_at: string;
   expires_at: string;

src/pages/backends/community/backend-detail.tsx

@@ -1,6 +1,6 @@
-import FullMarkdown from '@/components/full-markdown';
 import { BulbOutlined } from '@ant-design/icons';
 import { AutoTooltip } from '@gpustack/core-ui';
+import { FullMarkdown } from '@gpustack/core-ui/markdown';
 import { useIntl } from '@umijs/max';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';

src/pages/benchmark/components/detail-content.tsx

@@ -1,5 +1,5 @@
 import { IconFont } from '@gpustack/core-ui';
-import { useIntl } from '@umijs/max';
+import { useIntl, useSearchParams } from '@umijs/max';
 import { Tabs, TabsProps } from 'antd';
 import React, { useState } from 'react';
 import Environment from './environment';
@@ -12,6 +12,7 @@ const Details: React.FC<{
 }> = ({ tabBarExtraContent }) => {
   const intl = useIntl();
   const [activeKey, setActiveKey] = useState('summary');
+  const [searchParams] = useSearchParams();
 
   const items: TabsProps['items'] = [
     {

src/pages/benchmark/details.tsx

@@ -2,7 +2,7 @@ import { BaseSelect, DeleteModal } from '@gpustack/core-ui';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import React, { useEffect, useRef } from 'react';
-import { HeaderLeft } from '../_components/page-box';
+import { PageContainerInner } from '../_components/page-box';
 import PageBreadcrumb from '../_components/page-breadcrumb';
 import { deleteBenchmark } from './apis';
 import DetailContent from './components/detail-content';
@@ -122,10 +122,9 @@ const Details: React.FC = () => {
   }, [id]);
 
   return (
-    <>
-      <HeaderLeft>
-        <PageBreadcrumb items={breadcrumbItems} />
-      </HeaderLeft>
+    <PageContainerInner
+      leftContent={<PageBreadcrumb items={breadcrumbItems} />}
+    >
       <DetailContext.Provider
         value={{
           detailData: detailData || {},
@@ -165,7 +164,7 @@ const Details: React.FC = () => {
         onCancel={closeViewLogsModal}
       ></ViewLogsModal>
       <DeleteModal ref={modalRef}></DeleteModal>
-    </>
+    </PageContainerInner>
   );
 };
 

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

@@ -1,15 +1,15 @@
+import { clusterDetailAtom } from '@/atoms/clusters';
 import GPUList from '@/pages/resources/components/gpus';
 import WorkerList from '@/pages/resources/components/workers';
 import { getGPUStackPlugin } from '@/plugins';
-import { BaseSelect, IconFont } from '@gpustack/core-ui';
+import { IconFont } from '@gpustack/core-ui';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { Tabs, type TabsProps } from 'antd';
-import { useEffect } from 'react';
-import { HeaderLeft } from '../_components/page-box';
+import { useAtomValue } from 'jotai';
+import { PageContainerInner } from '../_components/page-box';
 import PageBreadcrumb from '../_components/page-breadcrumb';
 import ClusterBasic from './components/detail/cluster-basic';
 import ClusterSystemLoad from './components/detail/cluster-system-load';
-import { useQueryClusterList } from './services/use-query-cluster-list';
 
 const ClusterDetailModal = () => {
   const navigate = useNavigate();
@@ -17,18 +17,7 @@ const ClusterDetailModal = () => {
   const [searchParams] = useSearchParams();
   const id = searchParams.get('id');
   const clusterName = searchParams.get('name');
-  const { clusterList, fetchClusterList, cancelRequest } =
-    useQueryClusterList();
-
-  // Switch to another cluster's detail from the breadcrumb. Navigating with a
-  // new ``id`` re-renders this page in place; the detail children refetch on
-  // their ``clusterId`` prop change, so the whole view updates.
-  const handleOnChange = (value: number, option: any) => {
-    navigate(
-      `/resources/clusters/detail?id=${option.value}&name=${option.label}&page=clusters`,
-      { replace: true }
-    );
-  };
+  const clusterDetailData = useAtomValue(clusterDetailAtom);
 
   const breadcrumbItems = [
     {
@@ -36,27 +25,10 @@ const ClusterDetailModal = () => {
       onClick: () => navigate(-1)
     },
     {
-      title: (
-        <BaseSelect
-          size="small"
-          variant="borderless"
-          options={clusterList}
-          value={clusterName}
-          style={{ minWidth: 100 }}
-          popupMatchSelectWidth={false}
-          onChange={handleOnChange}
-        ></BaseSelect>
-      )
+      title: clusterName
     }
   ];
 
-  useEffect(() => {
-    fetchClusterList({ page: -1 });
-    return () => {
-      cancelRequest();
-    };
-  }, []);
-
   // Extension slot: a registered plugin may inject additional tab
   // items (e.g. per-cluster access / quota panels) by exporting
   // ``clusterDetail.extraTabs(clusterId, intl)`` that returns an
@@ -74,10 +46,11 @@ const ClusterDetailModal = () => {
   ) ?? []) as TabItem[];
 
   return (
-    <>
-      <HeaderLeft>
-        <PageBreadcrumb items={breadcrumbItems} />
-      </HeaderLeft>
+    <PageContainerInner
+      header={{
+        title: <PageBreadcrumb items={breadcrumbItems} />
+      }}
+    >
       <ClusterBasic clusterId={Number(id)}></ClusterBasic>
       <ClusterSystemLoad clusterId={Number(id)}></ClusterSystemLoad>
       <Tabs
@@ -87,28 +60,22 @@ const ClusterDetailModal = () => {
         items={[
           {
             key: 'workers',
-            label: intl.formatMessage({ id: 'resources.nodes' }),
+            label: `Workers`,
             icon: <IconFont type="icon-resources" />,
             children: (
-              <WorkerList
-                key={id}
-                clusterId={Number(id)}
-                source="clusterDetail"
-              />
+              <WorkerList clusterId={Number(id)} source="clusterDetail" />
             )
           },
           {
             key: 'gpus',
-            label: intl.formatMessage({ id: 'menu.resources.gpus' }),
+            label: `GPUs`,
             icon: <IconFont type="icon-gpu1" />,
-            children: (
-              <GPUList key={id} clusterId={Number(id)} source="clusterDetail" />
-            )
+            children: <GPUList clusterId={Number(id)} source="clusterDetail" />
           },
           ...extraTabs
         ]}
       />
-    </>
+    </PageContainerInner>
   );
 };
 

src/pages/cluster-management/clusters.tsx

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

src/pages/cluster-management/components/cluster-metrics.tsx

@@ -1,5 +1,4 @@
-import { TemplateCard } from '@gpustack/core-ui';
-import { GaugeChart } from '@gpustack/core-ui/charts';
+import { GaugeChart, TemplateCard } from '@gpustack/core-ui';
 import { useSearchParams } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';

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: 146px;
+  height: 168px;
   .left {
-    padding: 16px 0px;
+    padding: 16px 24px;
     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: 24px;
+  margin-top: 16px;
   .item {
     display: flex;
     align-items: center;
@@ -134,6 +134,7 @@ const ClusterBasic: React.FC<{ clusterId: number }> = ({ clusterId }) => {
                 )}
               </Title>
             }
+            layout="vertical"
             items={items}
           />
           <Resources>